/* ===== Layout helpers ===== */
.mo-br {
    display: none;
}



.pc-only {
    display: inline-block !important;
}

.mo-only {
    display: none !important;
}

/* ===== Hero Text (sticky scroll-to-color) ===== */
.hero-text-outer {
    position: relative;
    padding-bottom: var(--section-padding-y);
}

.hero-text-inner {
    background: #fff;
    z-index: 10;
}

.hero-text-section {
    padding: var(--section-padding-y) var(--section-padding-x) 0;
    text-align: center;
}

.hero-text-section h2 {
    font-size: clamp(30px, 3.125vw, 60px);
    font-weight: 700;
    color: #E9E9E9;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

.hero-text-section h2 em {
    font-style: normal;
    color: #E9E9E9;
}

.hero-text-section h2 .char {
    transition: color 0.4s ease;
}

.hero-text-section h2 .char.active {
    color: #363636;
}

.hero-text-section h2 em .char.active {
    color: #363636;
}

/* ===== Feature Cards ===== */
.feature-cards {
    padding: 60px 0 0;
    display: flex;
    justify-content: center;
    width: 100%;
}

.fcards-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: clamp(12px, 1.25vw, 24px);
    max-width: 1436px;
    width: 100%;
}

.fcard {
    position: relative;
    overflow: hidden;
    flex: 1;
    min-width: 0;
    aspect-ratio: 460 / 540;
}

.fcard .label-text {
    position: absolute;
    left: clamp(20px, 8.7%, 40px);
    top: clamp(24px, 9.26%, 50px);
    font-size: clamp(14px, 1.35vw, 26px);
    font-weight: 700;
    line-height: 150%;
    z-index: 10;
}

.fcard .title-text {
    position: absolute;
    left: clamp(20px, 8.7%, 40px);
    font-size: clamp(24px, 3.125vw, 60px);
    font-weight: 700;
    line-height: 140%;
    display: flex;
    align-items: center;
    z-index: 10;
}

/* 1. Premium Card */
.fcard-premium {
    max-width: 470px;
}

.fcard-premium .bg-main {
    position: absolute;
    width: 100%;
    height: 85.19%;
    /* 460 / 540 */
    left: 0;
    top: 0;
    background: #185235;
    border-radius: clamp(16px, 1.56vw, 30px) clamp(16px, 1.56vw, 30px) 0 0;
    z-index: 1;
}

.fcard-premium .bg-circle {
    position: absolute;
    width: calc(100% + 16px);
    height: 87.04%;
    /* 470 / 540 */
    left: -8px;
    top: 56.67%;
    /* 306 / 540 */
    background: #ffffff;
    border-radius: 99999px;
    z-index: 2;
}

.fcard-premium .product-img {
    position: absolute;
    width: 100%;
    height: 42.22%;
    /* 228 / 540 */
    left: 0;
    top: 57.78%;
    /* 312 / 540 */
    background: url('../assets/dikel/steel-plate.svg') no-repeat center/contain;
    border-radius: 0px 0px 8px 8px;
    z-index: 3;
}

.fcard-premium .label-text {
    color: #FFFFFF;
}

.fcard-premium .title-text {
    color: #FFFFFF;
    top: 33.89%;
    /* 183 / 540 */
}

/* 2. Stable Card */
.fcard-stable {
    max-width: 460px;
    background: #F27100;
    border-radius: clamp(16px, 1.56vw, 30px);
}

.fcard-stable .label-text {
    color: #FFFFFF;
}

.fcard-stable .title-text {
    color: #FFFFFF;
    top: auto;
    bottom: clamp(20px, 8.7%, 40px);
}

/* 3. Next-Gen Card */
.fcard-nextgen {
    max-width: 460px;
    background: #F1F3F7;
    border-radius: clamp(16px, 1.56vw, 30px);
}

.fcard-nextgen .label-text {
    color: #222222;
}

.fcard-nextgen .title-text {
    color: #000000;
    top: auto;
    bottom: clamp(20px, 8.7%, 40px);
}



/* ===== Product Tabs 최적화 ===== */
/* ===== 하단 플로팅 제품 네비게이션 ===== */
.product-tabs {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    gap: 4px;
    width: fit-content;
    height: 78px;
    /* 검수 0703: backdrop-filter를 ::before로 분리 — Safari/Whale에서 position:fixed + backdrop-filter
       동시 사용 시 최하단 스크롤에서 fixed가 깨져 위로 밀리는 버그 방지 */
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.12);
    border-radius: 16px;
    z-index: 999;
    box-sizing: border-box;
    overflow: hidden;
}

.product-tabs::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.ptab {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    height: 58px;
    border-radius: 12px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 160%;
    color: #363636;
    cursor: pointer;
    background: transparent;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
    box-sizing: border-box;
}

.ptab.active {
    background: #000000;
    color: #FFFFFF;
    font-weight: 500;
}

/* ===== 제품소개 ===== */
.product-intro {
    padding: 0 0 0;
}

.product-intro .inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: clamp(40px, 5.2vw, 100px);
}

.pi-top-wrapper {
    display: flex;
    gap: clamp(30px, 6.25vw, 100px);
    align-items: flex-start;
    width: 100%;
}

.product-intro .accordion {
    width: 100%;
    margin-top: 40px;
    padding: 40px 0 var(--section-padding-y);
}

.pi-left {
    flex: 1;
    max-width: 743px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.pi-top-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px 0px 60px;
    gap: 20px;
    width: 100%;
}

.pi-label {
    width: 100%;
    font-size: 24px;
    font-weight: 700;
    line-height: 150%;
    color: #7A7A7A;
    margin: 0;
}

.pi-main-texts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    width: 100%;
}

.pi-title {
    font-size: clamp(30px, 2.6vw, 50px);
    font-weight: 700;
    line-height: 140%;
    display: flex;
    align-items: center;
    color: #000000;
    margin: 0;
}

.pi-subtitle-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    width: 100%;
}

.pi-subtitle {
    width: 100%;
    font-size: clamp(16px, 1.35vw, 26px);
    font-weight: 700;
    line-height: 150%;
    color: #1B1B1B;
    margin: 0;
}

.pi-description-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
}

.pi-desc {
    width: 100%;
    font-size: clamp(16px, 1.14vw, 22px);
    font-weight: 400;
    line-height: 160%;
    color: #4E4E4E;
    margin: 0;
}

/* Brochure Download */
.pi-brochure-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    max-width: 464px;
}

.pi-brochure-label {
    font-size: 20px;
    font-weight: 700;
    line-height: 150%;
    color: #222222;
}

.pi-brochure-btns {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 464px;
}

.btn-round {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    padding-left: 30px;
    gap: 8px;
    height: 53px;
    background: #F27100;
    border-radius: 100px;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease, opacity 0.2s ease;
    border: none;
    cursor: pointer;
}

.btn-round:hover {
    opacity: 0.9;
}

.pi-brochure-btns .btn-round:hover {
    background: #C15A00;
    opacity: 1;
}

.btn-round .btn-label {
    line-height: 160%;
}

img.ic-download {
    width: 24px;
    height: 24px;
}

.br-btn {
    padding: 10px 22px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: opacity .2s;
}

.br-btn.on {
    background: #F27100;
    color: #fff;
}

.br-btn.off {
    background: #F0F2F4;
    color: #363636;
}

.br-btn:hover {
    opacity: 0.82;
}

.pi-right {
    flex: 1;
    max-width: 828px;
    min-width: 0;
    height: clamp(400px, 37.5vw, 720px);
    border-radius: clamp(12px, 1vw, 16px);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9E9E9E;
    font-size: 16px;
}

.pi-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== Accordion (Figma Specs) ===== */
.accordion {
    padding: 40px 0 var(--section-padding-y);
    background: #fff;
}

.accordion .inner {
    padding: 0 var(--section-padding-x);
    display: flex;
    flex-direction: column;
}

.acc-item {
    width: 100%;
}

.acc-header {
    width: 100%;
    height: 140px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 24px;
    cursor: pointer;
    border-bottom: 1px solid #D6D6D6;
}

.acc-header-left {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0 auto 0 0;
}

.acc-dot {
    width: 24px;
    height: 24px;
    background: #D3D3D3;
    border-radius: 50%;
    -webkit-mask-image: radial-gradient(circle, transparent 25%, black 25%);
    mask-image: radial-gradient(circle, transparent 25%, black 25%);
    transition: background 0.3s ease;
}

.acc-item.open .acc-dot {
    background: #F27100;
}

.acc-title {
    font-size: clamp(20px, 1.66vw, 32px);
    font-weight: 700;
    line-height: 150%;
    color: #1B1B1B;
}

.acc-dropdown-icon {
    width: clamp(40px, 3.33vw, 64px);
    height: clamp(40px, 3.33vw, 64px);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}

.acc-dropdown-icon img.minus {
    display: none;
}

.acc-item.open .acc-dropdown-icon img.plus {
    display: none;
}

.acc-item.open .acc-dropdown-icon img.minus {
    display: block;
}

.acc-body {
    display: none;
    width: 100%;
}

.acc-item.open .acc-body {
    display: block;
}

/* 💡 아코디언 펼침 내용 박스 */
.acc-content-box {
    width: 100%;
    background: transparent;
    /* 👈 회색(#F1F3F7)이었던 배경을 투명색으로 변경 */
    border-radius: 30px;
    padding: 48px 44px;
    /* 👈 피그마 스펙의 패딩 값 적용 */
    display: flex;
    flex-direction: column;
    gap: 60px;
    overflow-x: auto;
}

/* Specification Grids */
.spec-grid-group {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.spec-grid-label {
    font-size: clamp(18px, 1.25vw, 24px);
    font-weight: 700;
    line-height: 150%;
    color: #363636;
}

.spec-grid-row {
    display: flex;
    width: 100%;
}

.spec-grid-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.spec-head {
    height: clamp(60px, 5.21vw, 100px);
    background: linear-gradient(0deg, #F9FAFE, #F9FAFE), #FCFDFF;
    border-top: 1px solid #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(16px, 1.25vw, 24px);
    font-weight: 700;
    line-height: 160%;
    color: #000000;
    text-align: center;
}

.spec-value {
    height: clamp(60px, 5.21vw, 100px);
    background: #FFFFFF;
    border-top: 1px solid #D6D6D6;
    border-right: 1px solid #D6D6D6;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 clamp(12px, 1.25vw, 24px);
    font-size: clamp(14px, 1.04vw, 20px);
    font-weight: 400;
    line-height: 150%;
    color: #363636;
    text-align: left;
    box-sizing: border-box;
}

.spec-grid-row:last-child .spec-value {
    border-bottom: none !important;
}

/* 💡 만약 HTML에 spec-ann-value-center 클래스가 같이 붙어있다면 이것도 해제해야 합니다 */
.spec-ann-value-center {
    justify-content: flex-start !important;
    padding-left: 24px !important;
}

@media (min-width: 768px) {
    .support-info h3 br {
        display: none;
    }
}



.spec-grid-col:last-child .spec-value,
.spec-ann-col:last-child .spec-value {
    border-right: none;
}


/* 중앙 정렬용 헬퍼 */
.spec-ann-value-center {
    justify-content: center;
    padding-left: 0;
    text-align: center;
}

/* ── 기계적 물성 하단 범례(Legend) 박스 (Figma Specs 적용) ── */
.spec-legend {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 4px;
    /* 3.8px 올림 */
    width: 167px;
    height: 118px;
    /* 117.6px 올림 */
    background: #F8F9FB;
    border-radius: 16px;
    box-sizing: border-box;
    margin-top: -10px;
    /* 위쪽 표와의 간격을 맞추기 위한 여백 (필요시 조절) */
}

.legend-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    height: 26px;
}

.legend-tag {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 160%;
    color: #363636;
}

.legend-desc {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    color: #363636;
}

/* ===== 활용분야 (소프트 코딩 적용) ===== */
.usage-section {
    width: 100%;
    background: #FFFFFF;
    padding: var(--section-padding-y) 0;
    /* 위아래 여백으로 자연스럽게 높이 확보 */
}

.usage-section .inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--section-padding-x);
    display: flex;
    flex-direction: column;
    gap: 72px;
    /* 타이틀과 컨텐츠 사이의 간격 */
}

.usage-title {
    font-family: 'Pretendard', sans-serif;
    font-size: clamp(30px, 2.6vw, 50px);
    font-weight: 700;
    color: #000000;
    line-height: 140%;
    margin: 0;
}

.usage-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    /* 부모(inner)의 패딩을 제외한 1680px 자동 할당 */
}

/* ── 왼쪽 메뉴 영역 ── */
.usage-left {
    display: flex;
    flex-direction: column;
    width: 572px;
    max-width: 35%;
    flex-shrink: 0;
    gap: 20px;
}

.usage-menu-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    cursor: pointer;
}

.umi-header {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    height: 66px;
}

/* 아이콘 공통 및 좌우 반전(Soft) */
@media (min-width: 1440px) {
    .umi-icon {
        width: 23px;
        height: 46px;
    }

    .battery-compare {
        gap: 40px;
    }
}

.umi-icon {
    width: clamp(15px, calc(5.86px + 1.19vw), 23px);
    height: clamp(30px, calc(11.72px + 2.38vw), 46px);
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

/* 💡 로컬 절대 경로 대신 상대 경로 사용 */
.usage-menu-item .umi-icon {
    background-image: url('../assets/dikel/ic_SemiCircle_gray.svg');
}

.usage-menu-item.active .umi-icon {
    background-image: url('../assets/dikel/ic_SemiCircle.svg');
}

.umi-title {
    font-size: clamp(24px, 2.29vw, 44px);
    font-weight: 700;
    line-height: 150%;
    color: #1b1b1b; /* 검수 0729: 닫힌 제목 #1b1b1b */
    transition: color 0.3s;
}

.usage-menu-item.active .umi-title {
    color: #1B1B1B; /* 열린 제목 Figma gray/700 */
}

/* 검수 0724: 아코디언 ± 토글 아이콘 (Figma IcDropdown). 활성=−(minus), 비활성=+(plus).
   헤더 우측 정렬(margin-left:auto). 박스 64px / 글리프 33px, 모바일 42/21로 축소. */
.umi-toggle {
    margin-left: auto;
    flex-shrink: 0;
    width: clamp(42px, 3.33vw, 64px);
    height: clamp(42px, 3.33vw, 64px);
    background: url('../../assets/common/ic_plus.svg') center / clamp(21px, 1.72vw, 33px) no-repeat;
}

.usage-menu-item.active .umi-toggle {
    background-image: url('../../assets/common/ic_minus.svg');
}

/* 텍스트 박스 공통 설정 (항상 노출, 색상만 변경) */
.umi-desc {
    width: auto;
    max-width: 492px;
    margin: 0 0 0 40px;
    font-size: clamp(16px, 1.14vw, 22px);
    font-weight: 400;
    line-height: 160%;
    color: #A7A7A7;
    display: none;
    word-break: keep-all;
    transition: color 0.3s;
}

/* 활성 상태 텍스트 색상 */
.usage-menu-item.active .umi-desc {
    display: block;
    color: #4E4E4E;
    /* 활성 상태 색상 (기본 회색) */
}

/* ── 오른쪽 컨텐츠 영역 ── */
.usage-right {
    width: 1004px;
    max-width: 60%;
    flex: 1 1 auto;
    position: relative;
}

.usage-tab-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s;
}

.usage-tab-content.active {
    opacity: 1;
    pointer-events: auto;
    position: relative;
}

.utc-video {
    width: 100%;
    aspect-ratio: 1004 / 494;
    border-radius: clamp(16px, 1.56vw, 30px);
    overflow: hidden;
    position: relative;
}

.utc-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.utc-video-bg {
    width: 100%;
    aspect-ratio: 1004 / 494;
    border-radius: clamp(16px, 1.56vw, 30px);
    background-size: cover;
    background-position: center;
}

.utc-parts {
    display: flex;
    gap: 9px;
    justify-content: center;
    width: 100%;
    height: auto;
}

.utc-part-box {
    flex: 1;
    max-width: 135px;
    aspect-ratio: 135 / 150;
    background: #ECEDF0;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.utc-part-box img {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

.utc-footer-info {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    width: 100%;
}

.utc-footer-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
    margin-top: calc((clamp(16px, 1.14vw, 22px) * 1.6 - 30px) / 2);
}

.utc-footer-text {
    font-size: clamp(16px, 1.14vw, 22px);
    font-weight: 400;
    line-height: 160%;
    color: #4E4E4E;
}

/* ===== 공정과정 (Scroll-Driven) ===== */

/* ===== 공정과정 (Auto-Play 전환 대응) ===== */

/* 모바일 전용 요소: 데스크탑에서 숨김 */
.ps-mobile-indicators,
.ps-mobile-info-card,
.ps-mobile-diagram {
    display: none;
}

.process-scroll-outer {
    position: relative;
    height: auto;
    background: #FFFFFF;
    padding: 0 30px 80px;
    overflow: hidden;
}

.process-sticky {
    position: relative;
    top: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: visible;
}

.process-card {
    width: 1860px;
    height: 1080px;
    background: #F1EDEA;
    border-radius: 30px;
    position: relative;
    flex-shrink: 0;
    font-family: 'Pretendard', sans-serif;
    overflow: visible;
    transform-origin: top center;
}

/* ── Header ── */
.ps-header {
    position: absolute;
    width: 1620px;
    height: 126px;
    left: 120px;
    top: 100px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.ps-title-box {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ps-label {
    font-size: 24px;
    font-weight: 700;
    line-height: 150%;
    color: #7A7A7A;
    margin: 0;
}

.ps-title {
    font-size: clamp(30px, 2.6vw, 50px);
    font-weight: 700;
    line-height: 140%;
    color: #000;
    margin: 0;
}

.ps-toggle {
    display: flex;
    flex-direction: row;
    padding: 12px;
    gap: 4px;
    width: 304px;
    height: 82px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 70px;
}

.ps-toggle-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 138px;
    height: 58px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 700;
    line-height: 160%;
    cursor: pointer;
    background: transparent;
    color: #7A7A7A;
    transition: all 0.2s;
    user-select: none;
}

.ps-toggle-btn.active {
    background: #FFFFFF;
    color: #1B1B1B;
}

/* ── Diagram area: 1860×486, top:240 ── */
.ps-diagram-area {
    position: absolute;
    width: 1860px;
    height: 486px;
    left: 0;
    top: 240px;
    overflow: visible;
}

/* Default background SVG */
.ps-diagram-default {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* Each step's SVG – always visible, faded grayscale by default, color when active */
.ps-step-img {
    position: absolute;
    opacity: 0.4;
    filter: grayscale(1);
    transition: filter 0.4s ease, opacity 0.4s ease;
    pointer-events: none;
}

.ps-step-img.visible {
    opacity: 1;
    filter: grayscale(0);
}

/* ── Tooltip (speech bubble) ── */
/* Positions are relative to .ps-diagram-area (same coordinate space as Figma) */
.ps-bubble {
    position: absolute;
    background: #FFFFFF;
    border-radius: 20px;
    padding: 24px 30px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 20;
    width: max-content;
    min-width: 260px;
    box-sizing: border-box;
}

.ps-bubble.visible {
    opacity: 1;
}

.ps-bubble h3 {
    font-size: clamp(20px, 1.56vw, 30px);
    font-weight: 700;
    line-height: 150%;
    color: #000;
    margin: 0;
    white-space: nowrap;
}

.ps-bubble p {
    font-size: 18px;
    font-weight: 500;
    line-height: 160%;
    color: #4E4E4E;
    margin: 0;
}

/* Arrow variants */
.ps-bubble .bubble-arrow {
    position: absolute;
    width: 0;
    height: 0;
}

/* Arrow pointing UP (tip on top, box below) */
.arrow-up {
    border-left: 11.5px solid transparent;
    border-right: 11.5px solid transparent;
    border-bottom: 19px solid #FFFFFF;
    left: 44px;
}

/* Arrow pointing DOWN (tip at bottom, box above) */
.arrow-down {
    border-left: 11.5px solid transparent;
    border-right: 11.5px solid transparent;
    border-top: 19px solid #FFFFFF;
    left: 44px;
}

/* Arrow pointing DOWN, anchored right-ish */
.arrow-down-right {
    border-left: 11.5px solid transparent;
    border-right: 11.5px solid transparent;
    border-top: 19px solid #FFFFFF;
    left: 314px;
}

/* ── Progress bar: absolute within card ── */
.ps-progress {
    position: absolute;
    width: calc(100% - 180px);
    height: 182px;
    left: 90px;
    top: 808px;
    background: #FFFFFF;
    border-radius: 30px;
    padding: 40px;
    box-sizing: border-box;
}

.ps-steps {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    width: 100%;
    height: 102px;
}

.ps-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    height: 102px;
    cursor: pointer;
}

.ps-step-line {
    width: 100%;
    height: 6px;
    background: #E9E9E9;
    position: relative;
    overflow: hidden;
    border-radius: 3px;
}

.ps-step-line::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: #F27100;
}

/* 활성화 시 3초 동안 서서히 채워짐 */
.ps-step.active .ps-step-line::after {
    width: 100%;
    transition: width 3s linear;
}

/* 완료된 상태는 즉시 100% */
.ps-step.done .ps-step-line::after {
    width: 100%;
    transition: none;
}

.ps-step-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ps-step-num {
    font-size: 16px;
    font-weight: 700;
    line-height: 160%;
    color: #A7A7A7;
    transition: color 0.3s;
}

.ps-step-name {
    font-size: 20px;
    font-weight: 700;
    line-height: 150%;
    color: #D3D3D3;
    transition: color 0.3s;
}

.ps-step.done .ps-step-num {
    color: #363636;
}

.ps-step.done .ps-step-name {
    color: #4E4E4E;
}

.ps-step.active .ps-step-num,
.ps-step.active .ps-step-name {
    color: #F27100;
}






/* ═══════════════════════════════════════════
   공정과정 태블릿 (768px ~ 1439px)
   모바일과 동일, 토글만 우상단
   ═══════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1439px) {

    .process-scroll-outer {
        padding: 0 30px 80px !important;
        height: auto !important;
        overflow: visible !important;
    }

    .process-sticky {
        align-items: stretch !important;
        display: block !important;
        height: auto !important;
        position: relative !important;
    }

    .process-card {
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: clamp(30px, 4vw, 50px) clamp(24px, 4vw, 40px);
        border-radius: clamp(16px, 2vw, 30px);
        overflow: visible;
        display: flex;
        flex-direction: column;
        gap: 40px;
        transform: none;
    }

    /* ── Header: 타이틀 + 토글 가로 배치 (토글 우상단) ── */
    .ps-header {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        left: 0 !important;
        top: 0 !important;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 20px;
        padding: 0 !important;
    }

    .ps-label {
        display: none;
    }

    .ps-title {
        font-size: clamp(30px, 2.6vw, 50px);
        line-height: 140%;
    }

    .ps-diagram-area {
        display: none !important;
    }

    .ps-bubble {
        display: none !important;
    }

    .ps-progress {
        display: none !important;
    }

    .ps-mobile-diagram {
        display: block !important;
        position: relative;
        width: 100%;
        border-radius: 8px;
        overflow: visible;
    }

    #ps-mobile-diagram-bulk {
        background-color: #F1EDEA;
        width: 500px;
        height: 480px;
        margin: 0 auto;
        overflow: visible;
        position: relative;
    }

    #ps-mobile-diagram-special {
        background-color: #F1EDEA;
        width: 500px;
        height: 480px;
        margin: 0 auto;
        overflow: visible;
        position: relative;
    }

    .ps-mobile-row {
        position: relative;
        width: 100%;
        overflow: hidden;
        margin-bottom: 30px;
    }

    .ps-mobile-row:first-child {
        margin-top: 35px;
        left: -10px;
    }

    .ps-mobile-row:last-child {
        margin-bottom: 0;
    }

    .ps-mobile-row:nth-child(2) {
        margin-top: 15px;
        left: 20px;
        width: calc(100% - 20px);
    }

    .ps-mobile-row:nth-child(3) {
        margin-top: 30px;
        left: 16px;
        width: calc(100% - 16px);
    }


    #ps-mobile-diagram-bulk .ps-mobile-step-label[data-mobile-step="0"],
    #ps-mobile-diagram-bulk .ps-mobile-step-label[data-mobile-step="1"],
    #ps-mobile-diagram-bulk .ps-mobile-step-label[data-mobile-step="2"] {
        margin-top: -5px;
        margin-left: -10px;
    }

    #ps-mobile-diagram-bulk .ps-mobile-step-label[data-mobile-step="3"],
    #ps-mobile-diagram-bulk .ps-mobile-step-label[data-mobile-step="4"],
    #ps-mobile-diagram-bulk .ps-mobile-step-label[data-mobile-step="5"] {
        margin-top: -8px;
        margin-left: 20px;
    }

    /* 배치형 소둔: 약간 아래로 */
    #ps-mobile-diagram-special .ps-mobile-step-label[data-mobile-step="3"] {
        margin-top: -5px;
        margin-left: 15px;
    }

    /* 표면마감: 우하단으로 */
    #ps-mobile-diagram-special .ps-mobile-step-label[data-mobile-step="4"] {
        margin-top: -5px;
        margin-left: 20px;
    }

    #ps-mobile-diagram-bulk .ps-mobile-step-label[data-mobile-step="6"],
    #ps-mobile-diagram-bulk .ps-mobile-step-label[data-mobile-step="7"] {
        margin-top: -10px;
        margin-left: 16px;
    }

    /* 정밀컷팅: 우하단으로 */
    #ps-mobile-diagram-special .ps-mobile-step-label[data-mobile-step="5"] {
        margin-top: -20px;
        margin-left: 20px;
    }

    /* 포장정리: 우하단으로 */
    #ps-mobile-diagram-special .ps-mobile-step-label[data-mobile-step="6"] {
        margin-top: -20px;
        margin-left: 20px;
    }

    .ps-row-inner {
        position: absolute;
        width: 1860px;
        height: 486px;
        left: 0;
        top: 0;
    }

    .ps-row-inner img.ps-diagram-default {
        position: absolute;
        width: 100%;
        height: 100%;
        inset: 0;
    }

    .ps-row-inner .ps-step-img {
        position: absolute;
        opacity: 0.3;
        filter: grayscale(1);
        transition: filter 0.4s ease, opacity 0.4s ease;
        pointer-events: auto;
        cursor: pointer;
    }

    .ps-row-inner .ps-step-img.visible {
        opacity: 1;
        filter: grayscale(0);
    }

    .ps-mobile-step-label {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        opacity: 0;
        transition: opacity 0.4s ease;
        pointer-events: none;
        z-index: 20;
    }

    .ps-mobile-step-label.visible {
        opacity: 1;
    }

    .ps-mobile-step-label span {
        font-family: 'Pretendard', sans-serif;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.5;
        color: #4E4E4E;
        white-space: nowrap;
    }

    .ps-mobile-step-label .label-arrow {
        width: 0;
        height: 0;
        border-left: 5.5px solid transparent;
        border-right: 5.5px solid transparent;
        border-top: 9px solid #F27100;
    }

    .ps-mobile-bottom-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        box-sizing: border-box;
    }

    .ps-mobile-indicators {
        display: flex !important;
        justify-content: center;
        gap: 6px;
        padding: 10px 7px; /* 검수 0708: 프로그레스 바 좌우 7px 마진 */
        width: 100%;
    }

    .ps-mobile-dot {
        flex: 1;
        height: 6px;
        border-radius: 3px;
        background: #D3D3D3;
        position: relative;
        overflow: hidden;
    }

    .ps-mobile-dot::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 0;
        background: #F27100;
    }

    .ps-mobile-dot.active::after {
        width: 100%;
        transition: width 3s linear;
    }

    .ps-mobile-dot.done::after {
        width: 100%;
        transition: none;
    }

    .ps-mobile-info-card {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
        background: #FFFFFF;
        border-radius: 16px;
        padding: 16px 20px;
        width: 100%;
        box-sizing: border-box;
    }

    .ps-mobile-indicators.is-hidden,
    .ps-mobile-info-card.is-hidden,
    .ps-mobile-diagram.is-hidden,
    .ps-mobile-bottom-group.is-hidden {
        display: none !important;
    }

    .ps-mobile-info-header {
        display: flex;
        gap: 10px;
        align-items: flex-start;
    }

    .ps-mobile-info-num {
        font-size: 18px;
        font-weight: 700;
        line-height: 1.6;
        color: #F27100;
    }

    .ps-mobile-info-name {
        font-size: 18px;
        font-weight: 700;
        line-height: 1.6;
        color: #000;
    }

    .ps-mobile-info-desc {
        font-size: 16px;
        font-weight: 400;
        line-height: 1.6;
        color: #4E4E4E;
        margin: 0;
        min-height: calc(16px * 1.6 * 2);
    }

    /* ── 주요 적용분야: 태블릿 오버라이드 ── */
    .umi-header {
        height: auto;
    }

    .umi-desc {
        text-align: left;
        margin-left: calc(clamp(15px, calc(5.86px + 1.19vw), 23px) + 16px);
    }

    .utc-footer-text {
        text-align: left;
    }

    /* 검수 0708: 부품 콘텐츠 폭만큼 usage-right가 안 줄어 삐져나오던 것 → min-width:0으로 축소 허용 */
    .usage-right {
        min-width: 0;
    }

    .usage-tab-content {
        min-width: 0;
    }

    /* 검수 0708: 태블릿 부품 행 — 상단 이미지 폭을 넘으면 좌우 스크롤(이미지 폭에 클립, 좌우 마진 미노출) */
    .utc-parts {
        gap: 6px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        min-width: 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .utc-parts::-webkit-scrollbar {
        display: none;
    }

    .utc-part-box {
        flex: 0 0 80px;
        width: 80px;
        height: 88px;
        min-width: 80px;
        border-radius: 12px;
        padding: 8px;
    }

    .utc-part-box img {
        width: 64px;
        height: 64px;
    }
}



/* ===== Responsive: 1280–1760 ===== */
@media (max-width: 1439px) {
    .feature-cards {
        padding: 40px 5vw 0;
    }

    .hero-text-section {
        padding: var(--section-padding-y) 5vw 0;
    }

    /* ── 태블릿 스펙 서브 헤드 ── */
    .spec-ann-sub-head {
        font-size: 18px !important;
    }

    .spec-head {
        font-size: 16px !important;
    }

    .spec-ann-col .spec-head,
    .spec-ann-col.wide .spec-head {
        font-size: 16px !important;
    }

    .spec-value {
        font-size: 14px !important;
    }

    /* 검수 0622: 소둔 유형 열(Batch/Continuous)은 인라인 16px 유지 — 위 .spec-value 14px !important에 씹히지 않도록 */
    .spec-ann-col:first-child .spec-value {
        font-size: 16px !important;
    }


    .pi-desc br {
        display: none;
    }

    /* ── 태블릿 아코디언 여백 ── */
    .accordion {
        padding: 0;
        margin: 0;
    }

    .accordion .inner {
        max-width: 100%;
        padding: 0 16px;
    }

    .acc-item {
        width: 100% !important;
    }

    .acc-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0;
        gap: 20px;
        height: 72px;
        border-bottom: 1px solid #D3D3D3;
    }

    .acc-title {
        font-size: 20px;
        font-weight: 700;
        line-height: 150%;
        color: #1B1B1B;
    }

    .acc-dropdown-icon {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 42px;
        height: 42px;
        border-radius: 21.7241px;
    }

    .acc-dropdown-icon img {
        width: 42px;
        height: 42px;
    }

    .acc-body {
        width: 100% !important;
    }

    .acc-content-box {
        width: 100% !important;
        padding: 30px 0;
        gap: 30px;
        background: #FFFFFF;
    }
}

@media (max-width: 1439px) {
    html {
        font-size: 14px;
    }
}

@media (max-width: 1439px) {
    html {
        font-size: 13px;
    }
}

/* ════════════════════════════════════
           MOBILE — 1023px 이하 (DiKel Tab1)
           (공통: common.css가 GNB/헤더/탭/서포트/푸터 처리)
           ════════════════════════════════════ */
@media (max-width: 767px) {
    .pc-only {
        display: none !important;
    }

    .mo-only {
        display: inline-block !important;
    }

    body {
        min-width: 0 !important;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }



    .hero-text-outer {
        padding-bottom: 40px;
    }

    .hero-text-section {
        padding: 40px 16px 0;
        text-align: center;
    }

    .hero-text-section h2 {
        font-size: 24px;
        line-height: 150%;
    }

    .feature-cards {
        padding: 20px 16px 0;
    }

    .fcards-row {
        flex-direction: column;
        width: 100% !important;
        height: auto;
        gap: 12px;
        padding: 0;
    }

    .fcard-premium,
    .fcard-stable,
    .fcard-nextgen {
        width: 100% !important;
        max-width: 100% !important;
        height: 136px;              /* 검수(0720): 카드 높이 136px */
        aspect-ratio: auto;
        border-radius: 16px;
        flex: none;
        /* 3카드 동일 flex 레이아웃 — 라벨↔타이틀 간격 10px 통일 */
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        padding: 16px !important;
        gap: 10px !important;
        box-sizing: border-box !important;
    }

    /* 카드1: 피그마 디켈 기준 */
    .fcard-premium {
        overflow: hidden !important;
    }

    .fcard-premium .bg-main {
        width: 100% !important;
        height: 100% !important;
        left: 0 !important;
        top: 0 !important;
        border-radius: 16px !important;
    }

    .fcard-premium .bg-circle {
        width: 170px;
        height: 170px;
        left: unset;
        right: 0;
        top: 50%;
        border-radius: 50% !important;
    }

    .fcard-premium .product-img {
        width: 157px !important;
        height: 75px;
        left: auto !important;
        right: 6px !important;
        top: 52%;
        background-size: contain !important;
        background-position: center bottom !important;
        border-radius: 0 0 2.7px 2.7px !important;
    }

    /* 3카드 라벨/타이틀 — 절대배치(top:98px, bottom:clamp%) 제거하고 flex 흐름으로 통일 */
    .fcard-premium .label-text,
    .fcard-stable .label-text,
    .fcard-nextgen .label-text {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        font-size: 16px !important;
        line-height: 1.6 !important;
        font-weight: 400 !important;
        width: auto;
        max-width: 100%;
        margin: 0;
    }

    .fcard-premium .title-text,
    .fcard-stable .title-text,
    .fcard-nextgen .title-text {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        bottom: auto !important;
        font-size: 30px !important;
        line-height: 1.4 !important;
        margin: 0;
    }

    .fcard-premium .title-text br,
    .fcard-stable .title-text br,
    .fcard-nextgen .title-text br {
        display: none;
    }

    .product-tabs {
        position: fixed;
        bottom: 0;
        left: 0;
        transform: none;
        margin: 0;
        width: 100%;
        height: auto;
        padding: 6px;
        gap: 0;
        border-radius: 0;
        z-index: 100;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: #FFFFFF;
        border: none;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
        box-sizing: border-box;
    }

    .ptab {
        flex: 1;
        padding: 10px 12px;
        height: 41px;
        font-size: 14px;
        font-weight: 400;
        border-radius: 10px;
        white-space: nowrap;
        box-sizing: border-box;
    }

    .product-intro {
        padding: 40px 0;
        background: #fff;
        position: relative;
        z-index: 10;
    }

    /* 피그마 38:4443: flex-col gap-[20px] pb-[20px] */
    .product-intro .inner {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0 16px;
        padding-bottom: 20px;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden;
    }

    .pi-top-wrapper {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .product-intro .accordion {
        padding: 0;
        margin-top: 40px;
    }

    .pi-left {
        display: contents;
    }

    .pi-top-content {
        display: contents;
    }

    /* 피그마: 타이틀 → 이미지 → 서브타이틀+본문 → 브로슈어 순서 */
    .pi-title {
        order: 1;
    }

    .pi-right {
        order: 2;
        width: 100%;
        max-width: 100%;
        height: 232px;
        aspect-ratio: unset;
        border-radius: 16px;
        flex: none;
        overflow: hidden;
    }

    .pi-right img {
        object-position: center bottom;
    }

    .pi-main-texts {
        display: contents;
    }

    .pi-subtitle-group {
        order: 3;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word;
        word-break: keep-all;
        gap: 20px !important;
    }

    .pi-description-stack {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word;
    }

    .pi-brochure-section {
        order: 4;
        width: 100% !important;
        max-width: 100% !important;
        gap: 16px !important;
    }

    .pi-top-content,
    .pi-main-texts,
    .pi-subtitle-group,
    .pi-description-stack,
    .pi-label,
    .pi-desc {
        width: 100% !important;
    }

    /* 피그마: 30px Bold, line-height 1.4 */
    .pi-title {
        width: 100% !important;
        font-size: 30px !important;
        line-height: 1.4 !important;
        height: auto;
        white-space: normal;
    }

    /* 피그마: 24px Bold, line-height 1.5, color #1B1B1B */
    .pi-subtitle {
        font-size: 24px !important;
        line-height: 1.5 !important;
        width: 100%;
    }

    /* 피그마: Description gap-[8px] */
    .pi-description-stack {
        gap: 8px !important;
    }

    /* 피그마: 16px Regular, line-height 1.6, color #4E4E4E */
    .pi-desc {
        font-size: 16px !important;
        line-height: 1.6 !important;
        width: 100%;
    }

    /* 모바일에서 본문 내 <br> 숨김 → 자연스럽게 이어지는 세 문단 */
    .pi-desc br {
        display: none;
    }

    /* 피그마: 브로슈어 라벨 18px Bold */
    .pi-brochure-label {
        font-size: 18px !important;
        line-height: 1.6 !important;
    }

    .pi-right {
        /* display: contents 에 의해 위에서 order로 처리됨 */
    }

    .pi-brochure-section {
        padding-bottom: 20px;
    }

    .pi-brochure-btns {
        width: 100% !important;
        max-width: 100% !important;
        display: flex;
        flex-wrap: nowrap !important;
        gap: 4px;
        justify-content: flex-start;
    }

    /* 피그마: 버튼 16px Bold, padding 10px 12px 10px 18px, gap 4px */
    .btn-round {
        flex: 0 0 auto;
        min-width: 0;
        width: 81px;
        height: 46px;
        flex-shrink: 0;
        padding: 10px 12px 10px 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        gap: 4px;
        box-sizing: border-box;
        transition: background 0.2s ease;
    }

    .btn-round:hover {
        background: #C15A00;
        opacity: 1;
    }

    .btn-round .btn-label {
        line-height: 1;
    }

    .pi-brochure-btns {
        gap: 4px !important;
    }

    .btn-round img.ic-download {
        width: 20px;
        height: 20px;
    }

    .accordion {
        padding: 0;
        margin: 0;
    }

    .accordion .inner {
        max-width: 100%;
        padding: 0 16px;
    }

    .acc-item {
        width: 100% !important;
    }

    .acc-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0;
        gap: 20px;
        height: 72px;
        border-bottom: 1px solid #D3D3D3;
    }

    .acc-title {
        font-size: 20px;
        font-weight: 700;
        line-height: 150%;
        color: #1B1B1B;
    }

    .acc-dropdown-icon {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 42px;
        height: 42px;
        border-radius: 21.7241px;
    }

    .acc-dropdown-icon img {
        width: 42px;
        height: 42px;
    }

    .acc-body {
        width: 100% !important;
    }

    .acc-content-box {
        width: 100% !important;
        padding: 30px 0;
        gap: 30px;
        background: #FFFFFF;
    }

    .spec-grid-group {
        width: 100% !important;
        /* overflow-x 제거하여 타이틀과 범례가 스크롤되지 않도록 함 */
    }

    .spec-table-container {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE/Edge */
    }

    .spec-table-container::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari */
    }

    .spec-grid-row {
        width: max-content;
        min-width: 100%;
        display: flex;
    }

    .spec-grid-col {
        flex: 1 1 auto;
        min-width: 150px;
    }


    .spec-grid-label {
        font-size: 20px;
    }

    .spec-head {
        width: 100%;
        height: 70px;
        box-sizing: border-box;
        font-size: 16px;
    }

    .spec-value {
        width: 100%;
        height: 60px;
        box-sizing: border-box;
        font-size: 14px;
    }


    .scroll-horizontal {
        position: relative;
        width: 100% !important;
        height: 30px !important;
        margin: -12px auto 0 !important;
        /* 부모 gap 12px 상쇄하여 표와 밀착 */
        display: block !important;
    }

    .scroll-track {
        position: absolute;
        width: 100% !important;
        height: 0px !important;
        left: 0 !important;
        top: 15px !important;
        border: 2px solid rgba(211, 211, 211, 0.3) !important;
    }

    .scroll-thumb {
        position: absolute;
        width: 80px;
        /* will be updated dynamically by JS */
        height: 0px !important;
        left: 0 !important;
        top: 15px !important;
        border: 2px solid #D3D3D3 !important;
    }

    .usage-section {
        padding: 40px 0;
    }

    .usage-section .inner {
        padding: 0 16px;
        gap: 20px; /* 검수 0724: 타이틀↔콘텐츠 20 */
    }

    .usage-title {
        font-size: 18px;
        font-weight: 700;
        color: #7A7A7A;
    }

    .usage-content {
        flex-direction: column;
        gap: 24px;
    }

    .usage-left {
        width: 100% !important;
        max-width: 100% !important;
        flex-shrink: 1;
        gap: 20px; /* 검수 0724: 항목↔항목 20 */
    }

    .usage-menu-item {
        gap: 0; /* 검수 0724: 세부 간격은 desc/tab-content margin으로(8/12) */
    }

    .umi-header {
        height: auto;
    }

    .umi-title {
        font-size: 30px;
    }

    .umi-desc {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0; /* 검수 0724: Figma 모바일 설명은 들여쓰기 없이 full-width (기존 23px 잔재 제거) */
        margin-top: 8px; /* 제목↔설명 8 */
        font-size: 16px;
        height: auto !important;
        margin-bottom: 0;
    }

    /* 검수 0722: 모바일 '주요 적용분야' 아코디언 — 콘텐츠(영상/부품)가 JS로 선택 제목(.usage-menu-item) 안으로 이동 */
    .usage-right {
        display: none; /* 콘텐츠 이동 후 빈 컨테이너 */
    }

    .usage-menu-item .usage-tab-content {
        display: none;
        width: 100%;
        gap: 0; /* 검수 0724: 내부 간격은 margin으로(영상↔txt 12, txt↔부품 10) */
    }

    .usage-menu-item.active .usage-tab-content {
        display: flex;
        margin-top: 12px; /* 검수 0724: 설명↔영상 12 */
    }

    .usage-tab-content.active {
        position: relative !important;
    }

    .utc-video {
        height: auto;
        aspect-ratio: 651 / 320;
        border-radius: 16px;
    }

    .utc-footer-info {
        justify-content: flex-start;
        align-items: flex-start;
        margin-top: 12px; /* 검수 0724: 영상↔txt 12 */
    }

    .utc-footer-icon {
        width: 20px;
        height: 20px;
        margin-top: 3px;
    }

    .utc-footer-text {
        font-size: 16px;
    }

    .utc-parts {
        height: auto;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 4px;
        margin-top: 10px; /* 검수 0724: txt↔부품 10 */
        padding-bottom: 4px;
        justify-content: flex-start;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .utc-parts::-webkit-scrollbar {
        display: none;
    }

    .utc-part-box {
        flex: 0 0 62px;
        width: 62px;
        height: 76px;
        min-width: 62px;
        border-radius: 10px;
        padding: 11px 4px;
        scroll-snap-align: start;
    }

    .utc-part-box img {
        width: 54px;
        height: 54px;
    }

    /* ═══════════════════════════════════════════════
               공정과정 모바일 – 피그마 38:4523 기준
               ═══════════════════════════════════════════════ */

    .process-scroll-outer {
        padding: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }

    .process-sticky {
        align-items: stretch !important;
        display: block !important;
        height: auto !important;
        position: relative !important;
    }

    .process-card {
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 40px 16px 40px;
        border-radius: 0;
        overflow: visible;
        display: flex;
        flex-direction: column;
        gap: 40px;
        transform: none;
    }

    /* ── Header: 타이틀 + 토글 세로 배치 ── */
    .ps-header {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        left: 0 !important;
        top: 0 !important;
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 0 !important;
    }

    .ps-label {
        display: none;
    }

    .ps-title {
        font-size: 30px !important;
        line-height: 1.5 !important;
    }

    /* 토글 버튼 – 피그마: 57px, 14px Bold, pill */
    .ps-toggle {
        width: 100% !important;
        height: 57px !important;
        padding: 6px !important;
        border-radius: 50px !important;
        gap: 4px !important;
    }

    .ps-toggle-btn {
        flex: 1 !important;
        height: 45px !important;
        font-size: 14px !important;
        border-radius: 30px !important;
    }

    /* ── 데스크탑 다이어그램: 모바일에서 숨김 ── */
    .ps-diagram-area {
        display: none !important;
    }

    /* ── 말풍선: 모바일에서 숨김 ── */
    .ps-bubble {
        display: none !important;
    }

    /* ── 기존 Progress bar 숨김 ── */
    .ps-progress {
        display: none !important;
    }

    /* ═══ 모바일 3줄 다이어그램 ═══ */
    .ps-mobile-diagram {
        display: block !important;
        position: relative;
        width: 100%;
        border-radius: 8px;
        overflow: visible;
        /* 라벨 등이 잘리지 않도록 visible 설정 */
    }

    #ps-mobile-diagram-bulk {
        background-color: #F1EDEA;
        width: 328px;
        height: 277px;
        margin: 0 auto;
        overflow: visible;
        /* 라벨 등이 잘리지 않도록 visible 설정 */
        position: relative;
    }

    #ps-mobile-diagram-special {
        background-color: #F1EDEA;
        width: 328px;
        height: 277px;
        margin: 0 auto;
        overflow: visible;
        position: relative;
    }

    .ps-mobile-row {
        position: relative;
        width: 100%;
        overflow: hidden;
        margin-bottom: 20px;
    }

    .ps-mobile-row:first-child {
        margin-top: 25px;
        /* 아래로 10px 이동 (15px + 10px) */
        left: -10px;
        /* 왼쪽으로 10px 이동 */
    }

    .ps-mobile-row:last-child {
        margin-bottom: 0;
    }

    .ps-mobile-row:nth-child(2) {
        margin-top: -7px;
        /* 위로 2px 이동 (-5px - 2px) */
        left: 20px;
        /* 오른쪽으로 20px 이동 */
        width: calc(100% - 20px);
        /* 360px 모바일 화면 이탈 방지 */
    }

    .ps-mobile-row:nth-child(3) {
        margin-top: -9px;
        /* 위로 2px 올라간 영향을 상쇄하고(+2px) 아래로 7px 이동하기 위해 -18px에서 -9px로 조정 */
        left: 16px;
        /* 오른쪽으로 16px 이동 */
        width: calc(100% - 16px);
        /* 360px 모바일 화면 이탈 방지 */
    }

    /* ── 1행 공정 라벨 ── */
    #ps-mobile-diagram-bulk .ps-mobile-step-label[data-mobile-step="0"],
    #ps-mobile-diagram-bulk .ps-mobile-step-label[data-mobile-step="1"],
    #ps-mobile-diagram-bulk .ps-mobile-step-label[data-mobile-step="2"] {
        margin-top: -5px;
        /* 아래로 10px 이동 (-15px + 10px) */
        margin-left: -10px;
        /* 왼쪽으로 10px 이동 */
    }

    /* ── 2행 공정 라벨 ── */
    #ps-mobile-diagram-bulk .ps-mobile-step-label[data-mobile-step="3"],
    #ps-mobile-diagram-bulk .ps-mobile-step-label[data-mobile-step="4"],
    #ps-mobile-diagram-bulk .ps-mobile-step-label[data-mobile-step="5"] {
        margin-top: -22px;
        /* 위로 2px 이동 (-20px - 2px) */
        margin-left: 20px;
        /* 오른쪽으로 20px 이동 */
    }

    /* 특수 1행: 냉연코일세팅 좌상으로 */
    #ps-mobile-diagram-special .ps-mobile-step-label[data-mobile-step="0"] {
        margin-top: -10px;
        margin-left: -15px;
    }

    /* 특수 2행: 배치형소둔 우측으로 */
    #ps-mobile-diagram-special .ps-mobile-step-label[data-mobile-step="3"] {
        margin-top: -20px;
        margin-left: 15px;
    }

    /* 특수 2행: 표면마감 우상단으로 */
    #ps-mobile-diagram-special .ps-mobile-step-label[data-mobile-step="4"] {
        margin-top: -25px;
        margin-left: 15px;
    }

    /* 특수 3행: 정밀컷팅 우상단으로 */
    #ps-mobile-diagram-special .ps-mobile-step-label[data-mobile-step="5"] {
        margin-top: -40px;
        margin-left: 15px;
    }

    /* 특수 3행: 포장정리 우상단으로 */
    #ps-mobile-diagram-special .ps-mobile-step-label[data-mobile-step="6"] {
        margin-top: -40px;
        margin-left: 15px;
    }

    /* ── 3행 공정 라벨 ── */
    #ps-mobile-diagram-bulk .ps-mobile-step-label[data-mobile-step="6"],
    #ps-mobile-diagram-bulk .ps-mobile-step-label[data-mobile-step="7"] {
        margin-top: -48px;
        margin-left: 16px;
    }

    /* 각 row 내부의 원본 이미지 컨테이너 (1860×486 좌표계 유지) */
    .ps-row-inner {
        position: absolute;
        width: 1860px;
        height: 486px;
        left: 0;
        top: 0;
    }

    .ps-row-inner img.ps-diagram-default {
        position: absolute;
        width: 100%;
        height: 100%;
        inset: 0;
    }

    .ps-row-inner .ps-step-img {
        position: absolute;
        opacity: 0.3;
        filter: grayscale(1);
        transition: filter 0.4s ease, opacity 0.4s ease;
        pointer-events: auto;
        cursor: pointer;
    }

    .ps-row-inner .ps-step-img.visible {
        opacity: 1;
        filter: grayscale(0);
    }

    /* 활성 공정 라벨 (연속소둔 등) */
    .ps-mobile-step-label {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        opacity: 0;
        transition: opacity 0.4s ease;
        pointer-events: none;
        z-index: 20;
        /* 10 -> 20 (가장 앞으로 오도록 설정) */
    }

    .ps-mobile-step-label.visible {
        opacity: 1;
    }

    .ps-mobile-step-label span {
        font-family: 'Pretendard', sans-serif;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.5;
        color: #4E4E4E;
        white-space: nowrap;
    }

    .ps-mobile-step-label .label-arrow {
        width: 0;
        height: 0;
        border-left: 5.5px solid transparent;
        border-right: 5.5px solid transparent;
        border-top: 9px solid #F27100;
    }

    /* ── 모바일 하단 조절 영역 래퍼 (순수 구조적 그룹화, 기존 gap: 10px 레이아웃 유지) ── */
    .ps-mobile-bottom-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        box-sizing: border-box;
    }

    /* ── 모바일 인디케이터 바 ── */
    .ps-mobile-indicators {
        display: flex !important;
        justify-content: center;
        gap: 6px;
        padding: 10px 7px; /* 검수 0708: 프로그레스 바 좌우 7px 마진 */
        width: 100%;
    }

    .ps-mobile-dot {
        flex: 1;
        height: 6px;
        border-radius: 3px;
        background: #D3D3D3;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .ps-mobile-dot::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 0;
        background: #F27100;
    }

    .ps-mobile-dot.active::after {
        width: 100%;
        transition: width 3s linear;
    }

    .ps-mobile-dot.done::after {
        width: 100%;
        transition: none;
    }

    /* ── 모바일 설명 카드 ── */
    .ps-mobile-info-card {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
        background: #FFFFFF;
        border-radius: 16px;
        padding: 16px 20px;
        width: 100%;
        box-sizing: border-box;
    }

    /* is-hidden 클래스로 모바일 요소 숨김 제어 */
    .ps-mobile-indicators.is-hidden,
    .ps-mobile-info-card.is-hidden,
    .ps-mobile-diagram.is-hidden,
    .ps-mobile-bottom-group.is-hidden {
        display: none !important;
    }

    .ps-mobile-info-header {
        display: flex;
        gap: 10px;
        align-items: flex-start;
    }

    .ps-mobile-info-num {
        font-size: 18px;
        font-weight: 700;
        line-height: 1.6;
        color: #F27100;
    }

    .ps-mobile-info-name {
        font-size: 18px;
        font-weight: 700;
        line-height: 1.6;
        color: #000;
    }

    .ps-mobile-info-desc {
        font-size: 16px;
        font-weight: 400;
        line-height: 1.6;
        color: #4E4E4E;
        margin: 0;
        min-height: calc(16px * 1.6 * 2);
    }



    .grade-table {
        width: 100% !important;
        height: auto !important;
        overflow-x: auto;
    }


    .grade-left,
    .grade-right {
        min-width: 300px;
    }

    /* ===== 브랜드 리소스 모바일 반응형 ===== */

    /* --- DiKel 스토리 --- */
    .story-section {
        padding: var(--section-padding-y) 0 !important;
    }

    .story-section .inner {
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 var(--section-padding-x) !important;
        gap: 40px !important;
    }

    .story-title {
        font-size: clamp(24px, 8.3vw, 30px) !important;
        line-height: 1.4;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        text-align: left !important;
    }

    .story-title-mobile {
        display: block !important;
        order: -1 !important;
        width: 100% !important;
    }

    .story-title-desktop {
        display: block !important;
        height: 42px !important;
        text-align: center !important;
        justify-content: center !important;
    }

    .story-desc {
        font-size: clamp(14px, 4.4vw, 16px) !important;
        line-height: 1.6;
        width: 100% !important;
        max-width: 100% !important;
        height: 156px !important;
        min-height: auto !important;
        display: block !important;
        text-align: center !important;
    }

    .story-desc-sub {
        max-width: 100% !important;
        margin-top: 0 !important;
        text-align: center !important;
    }

    .story-desc-group {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        gap: 12px !important;
        align-items: flex-start !important;
    }

    /* --- 카드 세로 배치 --- */
    .story-txt {
        order: 1;
        gap: 30px !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: flex-start !important;
    }

    .story-cards {
        order: 0;
        flex-direction: column !important;
        gap: 0 !important;
        align-items: center !important;
        width: 100% !important;
        height: auto !important;
    }

    .scard-dk,
    .scard-db,
    .scard-nickel {
        width: clamp(200px, 57.8vw, 208px) !important;
        height: clamp(72px, 22.2vw, 80px) !important;
        margin: 0 auto;
    }

    .scard-dk {
        border-radius: clamp(12px, 4.3vw, 15.4px) clamp(12px, 4.3vw, 15.4px) 0 clamp(12px, 4.3vw, 15.4px) !important;
    }

    .scard-db {
        border-radius: clamp(12px, 4.3vw, 15.4px) !important;
    }

    .scard-nickel {
        border-radius: 0 clamp(12px, 4.3vw, 15.4px) clamp(12px, 4.3vw, 15.4px) clamp(12px, 4.3vw, 15.4px) !important;
    }

    .scard-dk-inner,
    .scard-db-inner,
    .scard-nickel-inner {
        font-size: clamp(22px, 7.2vw, 26px) !important;
    }

    .scard-plus-1,
    .scard-plus-2 {
        display: none !important;
    }

    .scard-mobile-plus {
        display: flex !important;
        width: 24px !important;
        height: 24px !important;
        font-size: 12px !important;
        margin: -8px auto !important;
    }



    .bi-section {
        padding: 40px 0;
    }

    .bi-section .inner {
        padding: 0 16px;
        gap: 30px;
    }

    .bi-section .bi-header {
        height: auto;
        gap: 20px;
        margin-bottom: 0;
    }

    .bi-section .bi-title {
        font-size: 30px;
        height: 42px;
    }

    .bi-section .bi-header-row {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        gap: 20px;
    }

    .bi-section .bi-desc {
        font-size: 16px;
        height: 104px;
        max-width: 100%;
    }

    .bi-section .btn-brochure {
        width: auto;
        height: 46px;
        padding: 10px 12px 10px 18px;
        border-radius: 100px;
    }

    .bi-section .btn-brochure span {
        font-size: 16px;
    }

    .bi-section .btn-brochure svg {
        width: 20px;
        height: 20px;
    }

    /* --- 로고활용 / 로고여백 --- */
    .bi-section .logo-usage-block {
        margin-bottom: 0;
        height: auto;
        gap: 20px;
    }

    .bi-section .logo-usage-label,
    .bi-section .lmg-col-label {
        height: 36px;
        min-height: 0;
    }

    /* 검수(0720): 로고활용·영문·국문 라벨 모바일 18px */
    .bi-section .logo-usage-label {
        font-size: 18px;
    }

    .bi-section .lmg-col-label {
        display: flex;
        font-size: 18px;
        height: 36px;
        min-height: 0;
    }

    .bi-section .mobile-only-label {
        display: none !important;
    }

    .bi-section .logo-usage-card {
        height: 174px;
        min-height: 0;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #F8F9FB !important;
    }

    .bi-section .logo-usage-card img {
        position: relative;
        width: 68%;
        max-width: 224px;
        height: auto;
        left: auto;
        top: auto;
        transform: none;
    }

    .bi-section .logo-margin-block {
        margin-bottom: 0;
    }

    .bi-section .logo-margin-cards {
        flex-direction: column;
        gap: 16px;
    }

    .bi-section .lmg-col {
        width: 100%;
        gap: 16px;
    }

    .bi-section .logo-margin-card {
        height: auto;
        aspect-ratio: 828 / 390;
        min-height: 0;
        border-radius: 16px;
        border: 1px solid #E9E9E9;
    }

    /* --- 모노로고 (BI 색상활용) --- */
    .bi-section .mono-logo-block {
        margin-bottom: 0;
        gap: 20px;
    }

    .bi-section .mono-logo-subtitle {
        font-size: 18px;   /* 검수(0720): 모바일 18px */
        height: 36px;
        min-height: 0;
    }

    .bi-section .mono-logo-subtitle .desktop-label {
        display: none;
    }

    .bi-section .mono-logo-subtitle .mobile-label {
        display: inline !important;
    }

    .bi-section .mono-grid {
        gap: 10px;
    }

    .bi-section .mono-row {
        gap: 10px;
        height: auto;
        min-height: 0;
    }

    .bi-section .mono-card-half,
    .bi-section .mono-card-full {
        height: 174px;
        min-height: 0;
        border-radius: 16px;
        padding: 16px;
    }

    .bi-section .dikel-mark {
        width: 121px;
        height: auto;
    }

    .bi-section .dikel-mark img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
    }

    /* --- BI 컬러 --- */
    .bi-section .bi-color-block {
        height: auto;
        gap: 16px;
        margin-bottom: 0;
    }

    .bi-section .bi-color-label {
        font-size: 18px;   /* 검수(0720): 모바일 18px */
        height: auto;
        min-height: 0;
    }

    .bi-section .bi-color-grid {
        flex-direction: column;
        padding: 0;
        height: auto;
        gap: 24px;
    }

    .bi-section .bi-color-card {
        width: 100%;
        max-width: 100%;
        height: auto;
        gap: 30px;
    }

    .bi-section .color-circle {
        width: 100px;
        height: 100px;
    }

    .bi-section .color-info-group {
        height: auto;
        gap: 10px;
    }

    .bi-section .color-name {
        width: 100%;
        height: auto;
        font-size: 18px;
    }

    .bi-section .color-values {
        width: 100%;
        height: auto;
    }

    .bi-section .color-val-row {
        width: 100%;
        height: auto;
    }

    .bi-section .color-val-text {
        font-size: 16px;
    }


}

/* ===== TAB PANELS ===== */
.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}


/* ===== DiKel 스토리 ===== */
.story-section {
    width: 100%;
    background: #ffffff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--section-padding-y) 0;
}

.story-section .inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;
    padding: 0 var(--section-padding-x);
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    box-sizing: border-box;
}

.story-txt {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    gap: 40px;

    width: 100%;
    max-width: 1064px;
    height: auto;

    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
}

.story-title {
    width: 100%;
    max-width: 1064px;
    height: 70px;

    /* heading/Medium */
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    font-size: clamp(30px, 2.6vw, 50px);
    line-height: 140%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    /* gray/900 */
    color: #000000;

    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    margin: 0;
}

.story-title-mobile {
    display: none;
}

.story-desc {
    width: 100%;
    height: 105px;

    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-size: clamp(16px, 1.15vw, 22px);
    line-height: 160%;
    text-align: center;

    /* gray/500 */
    color: #4E4E4E;

    margin: 0;
    word-break: keep-all;
}

.story-desc-sub {
    display: block;
    font-weight: 400;
    /* second part width was 1026px in Figma, we can constrain it if needed */
    max-width: 1026px;
    margin-left: auto;
    margin-right: auto;
}

.story-desc b {
    font-weight: 700;
}

.story-desc-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    gap: 40px;

    width: 100%;
    max-width: 1064px;
    height: auto;

    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

.story-cards {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 0;
    isolation: isolate;
    height: auto;
    position: relative;
    flex-shrink: 0;
    order: 0;
}

.scard-dk {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(200px, 22vw, 320px);
    height: clamp(160px, 18vw, 260px);
    background: #F27100;
    border-radius: clamp(20px, 2.6vw, 50px) clamp(20px, 2.6vw, 50px) 0px clamp(20px, 2.6vw, 50px);
    position: relative;
    z-index: 0;
}

.scard-dk-inner {
    display: flex;
    align-items: center;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(30px, 2.6vw, 50px);
    line-height: 1.4;
    color: #FFFFFF;
    white-space: nowrap;
}

.scard-text-d {
    opacity: 1;
}

.scard-text-ongkuk {
    opacity: 0.3;
}

/* -- Decarbonize 카드 -- */
.scard-db {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(220px, 25vw, 376px);
    height: clamp(160px, 18vw, 260px);
    background: #CDEBFB;
    border-radius: clamp(20px, 2.6vw, 50px);
    position: relative;
    z-index: 1;
}

.scard-db-inner {
    display: flex;
    align-items: center;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(30px, 2.6vw, 50px);
    line-height: 1.4;
    color: #000000;
    white-space: nowrap;
}

.scard-text-db-d {
    opacity: 1;
}

.scard-text-ecarbonize {
    opacity: 0.2;
}

/* -- Nickel 카드 -- */
.scard-nickel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(200px, 22vw, 320px);
    height: clamp(160px, 18vw, 260px);
    border-radius: 0px clamp(20px, 2.6vw, 50px) clamp(20px, 2.6vw, 50px) clamp(20px, 2.6vw, 50px);
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.scard-nickel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../assets/dikel/Nickel.png') no-repeat center/cover;
}

.scard-nickel-inner {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(30px, 2.6vw, 50px);
    line-height: 1.4;
    color: #FFFFFF;
    white-space: nowrap;
}

.snt-n {
    opacity: 0.3;
}

.snt-i {
    opacity: 1;
}

.snt-c {
    opacity: 0.3;
}

.snt-kel {
    opacity: 1;
}

/* + 커넥터 (모든 뷰포트) */
.scard-mobile-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: #FFFFFF;
    border-radius: 50%;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #4E4E4E;
    z-index: 5;
    flex-shrink: 0;
    line-height: 1;
    margin: 0 -13px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.scard-plus-1,
.scard-plus-2 {
    display: none;
}

.plus-bars {
    position: relative;
    width: 19.62px;
    height: 19.62px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.plus-bar-h {
    position: absolute;
    width: 19.62px;
    height: 0;
    left: 0;
    top: calc(50% - 1.57px);
    border-top: 3.13846px solid #363636;
}

.plus-bar-v {
    position: absolute;
    width: 19.62px;
    height: 0;
    left: 0;
    top: calc(50% - 1.57px);
    border-top: 3.13846px solid #363636;
    transform: rotate(90deg);
}

/* ===== 🌟 DiKel BI (스펙 업데이트 적용) 🌟 ===== */
.bi-section {
    padding: var(--section-padding-y) 0;
    /* 위 TBD 박스와의 간격 100px */
    background: #fff;
    width: 100%;
}

.bi-section .inner {
    display: flex;
    padding: 0 var(--section-padding-x);
    flex-direction: column;
    align-items: center;
    /* 자식 요소들 중앙 정렬 */
}

/* 4-1. DiKel BI 까지 포함한 전체 헤더 박스: 1680 x 180 */
.bi-header {
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* 타이틀(70) + 갭(40) + 설명로우(70) = 총 180px */
    width: 100%;
    height: 180px;
    flex-shrink: 0;
    margin-bottom: 100px;
}

/* 1. 'DiKel BI' 박스: 1680 x 70 */
.bi-title {
    width: 100%;
    height: 70px;
    font-family: 'Pretendard', sans-serif;
    font-size: clamp(30px, 2.6vw, 50px);
    font-weight: 700;
    color: #000;
    margin: 0;
    display: flex;
    align-items: center;
}

/* 4. 설명글과 버튼을 포함한 박스: 1680 x 70 */
.bi-header-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* 양쪽 끝으로 밀착시켜 간격 997px 자동 완성 */
    align-items: center;
    width: 100%;
    height: 70px;
}

/* 2. 설명글 박스: 683 x 70 */
.bi-desc {
    width: 100%;
    max-width: 683px;
    height: 70px;
    font-family: 'Pretendard', sans-serif;
    font-size: clamp(16px, 1.14vw, 22px);
    color: #4E4E4E;
    line-height: 160%;
    margin: 0;
    display: flex;
    align-items: center;
}

/* 3. 전체 다운로드 버튼 박스: 184 x 53 */
.btn-brochure {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* 내부 컨텐츠를 중앙으로 정렬하여 지정된 여백 효과 */
    gap: 8px;
    /* 텍스트와 아이콘 간격 8px */
    width: 184px;
    height: 53px;
    background: #FF6800;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: opacity .2s;
}

.btn-brochure:hover {
    opacity: .85;
}

/* 3-1. 버튼 텍스트 속성 */
.btn-brochure span {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 160%;
    letter-spacing: 0%;
    color: #FFFFFF;
    display: flex;
    align-items: center;
}

/* 3-1. 버튼 아이콘 박스: 24 x 24 */
.btn-brochure svg,
.btn-brochure img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* ===== 모노로고 (BI 색상활용) ===== */
.mono-logo-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 16px;
    width: 100%;
    height: auto;
    margin-bottom: 120px;
}

.mono-logo-subtitle {
    width: 100%;
    height: 42px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 1.56vw, 26px);   /* 검수(0720): PC 26 / 모바일 18 / 태블릿 clamp 18~26 */
    line-height: 140%;
    display: flex;
    align-items: center;
    color: #4E4E4E;
    margin: 0;
    align-self: stretch;
}

.mono-grid {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 24px;
    width: 100%;
    height: auto;
    align-self: stretch;
}

.mono-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 0;
    gap: 24px;
    width: 100%;
    height: auto;
    min-height: 0;
    align-self: stretch;
}

.mono-card-half {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: clamp(16px, 1.25vw, 24px) clamp(20px, 2.08vw, 40px);
    gap: 100px;
    flex: 1 1 45%;
    min-width: 0;
    height: 280px;
    border-radius: clamp(16px, 1.56vw, 30px);
    overflow: hidden;
}

.mono-card-full {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: clamp(16px, 1.25vw, 24px) clamp(20px, 2.08vw, 40px);
    gap: 100px;
    width: 100%;
    height: 280px;
    border-radius: clamp(16px, 1.56vw, 30px);
    overflow: hidden;
}

.mc-white {
    background: #FFFFFF;
    border: 1px solid #E9E9E9;
}

.mc-black {
    background: #000000;
}

.mc-blue {
    background: #003592;
}

.mc-orange {
    background: #EE7826;
}

.dikel-mark {
    width: clamp(200px, 16.56vw, 318px);
    max-width: 100%;
    height: auto;
    position: relative;
}

.dikel-mark img {
    width: 100%;
    height: auto;
    display: block;
}

.bi-sub {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.bi-sub-title {
    font-size: 30px;
    font-weight: 700;
    color: #4E4E4E;
}

/* ===== 소둔(열처리) Annealing Line Table ===== */
.spec-table-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
}

.spec-ann-grid-row {
    display: flex;
    flex-direction: row;
    width: max-content;
    min-width: 100%;
    border-top: 1px solid #000000;
    background: #FFFFFF;
}

.spec-ann-col {
    flex: 263;
    display: flex;
    flex-direction: column;
    min-width: 150px;
    /* 헤더에 세로선 없음 — 내용 셀에서만 border-right 처리 */
}

.spec-ann-col:nth-child(4) {
    min-width: 280px;
}

.spec-ann-col:last-child .spec-value {
    border-right: none;
}

.spec-ann-col.wide {
    flex: 540;
    min-width: 480px;
    /* Prevent wrapping at any desktop width */
}

.spec-ann-col .spec-head {
    height: clamp(60px, 5.2vw, 100px);
    background: #F9FAFE;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: clamp(16px, 1.25vw, 24px);
    color: #363636;
    text-align: center;
}

.spec-ann-col .spec-value {
    height: clamp(60px, 5.2vw, 100px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-top: 1px solid #D6D6D6;
    border-right: 1px solid #D6D6D6;
    font-weight: 400;
    font-size: clamp(14px, 1.04vw, 20px);
    color: #4E4E4E;
    text-align: left;
    padding: 0 clamp(12px, 1.25vw, 24px);
    box-sizing: border-box;
}

.spec-ann-col.wide .spec-head {
    height: clamp(30px, 2.6vw, 50px);
    font-size: clamp(16px, 1.25vw, 24px);
    white-space: nowrap;
}

/* 추가 설비 → 하위 헤더 구분 가로선 */
.spec-ann-sub-header-row {
    display: flex;
    height: clamp(30px, 2.6vw, 50px);
    background: #F9FAFE;
    border-top: 1px solid #D6D6D6;
}

.spec-ann-sub-head {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(16px, 1.25vw, 24px);
    font-weight: 700;
    color: #363636;
}

.spec-ann-value-row {
    display: flex;
    height: clamp(60px, 5.2vw, 100px);
    border-top: 1px solid #D6D6D6;
}

.spec-ann-sub-value {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 clamp(12px, 1.25vw, 24px);
    font-size: clamp(14px, 0.94vw, 18px);
    border-right: 1px solid #D6D6D6;
    color: #4E4E4E;
    font-weight: 400;
    box-sizing: border-box;
}

.spec-ann-sub-value:last-child {
    border-right: none;
}

/* ── BI 컬러 ── */
.bi-color-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 20px;
    width: 100%;
    height: auto;
}

.bi-color-label {
    width: 100%;
    height: 42px;
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: clamp(18px, 1.56vw, 26px);   /* 검수(0720): PC 26 / 모바일 18 / 태블릿 clamp 18~26 */
    line-height: 140%;
    display: flex;
    align-items: center;
    color: #4E4E4E;
}

.bi-color-grid {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 45px 0;
    gap: clamp(20px, 1.56vw, 30px);
    width: 100%;
    height: auto;
}

@media (max-width: 1439px) {
    .bi-color-grid {
        flex-direction: column;
        align-items: flex-start;
    }
}

.bi-color-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: clamp(20px, 2.08vw, 40px);
    width: 100%;
    max-width: 540px;
    height: auto;
    box-sizing: border-box;
}

.color-circle {
    width: 230px;
    max-width: 100%;
    height: 230px;
    border-radius: 50%;
    flex-shrink: 0;
}

.color-circle.dk-blue {
    background: #003592;
}

.color-circle.dk-orange {
    background: #EE7826;
}

.color-circle.dk-grey {
    background: #9DA6A8;
}

.color-info-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 20px;
    height: 154px;
}

.color-name {
    height: 39px;
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: clamp(16px, 1.35vw, 26px);
    line-height: 150%;
    color: #000000;
}

.color-values {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
    height: 95px;
}

.color-val-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;
}

.color-val-text {
    font-family: 'Pretendard';
    font-weight: 500;
    font-size: 18px;
    line-height: 160%;
    color: #A7A7A7;
}

/* ── 로고활용 ── */
.logo-usage-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0;
    gap: 24px;
    width: 100%;
    height: auto;
    margin-bottom: clamp(40px, 5.2vw, 100px);
}

.logo-usage-label {
    width: 100%;
    height: 42px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 1.56vw, 26px);   /* 검수(0720): PC 26 / 태블릿 clamp 18~26 */
    line-height: 140%;
    color: #4E4E4E;
    margin: 0;
}

.logo-usage-card {
    width: 100%;
    height: 550px;
    background: #F1F3F7;
    border-radius: clamp(16px, 1.56vw, 30px);
    position: relative;
    flex-shrink: 0;
}

.logo-usage-card img {
    position: absolute;
    width: 80%;
    max-width: 415px;
    height: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* ── 로고여백 ── */
.logo-margin-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    gap: 20px;
    width: 100%;
    height: auto;
    margin-bottom: clamp(40px, 6.25vw, 120px);
}

.logo-margin-label {
    width: 100%;
    height: 42px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 1.56vw, 30px);
    line-height: 140%;
    color: #4E4E4E;
    align-self: stretch;
    margin: 0;
}

.logo-margin-cards {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0;
    gap: 20px;
    width: 100%;
    height: auto;
}

.lmg-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 828px;
}

.lmg-col-label {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 1.56vw, 26px);   /* 검수(0720): PC 26 / 모바일 18 / 태블릿 clamp 18~26 */
    line-height: 140%;
    color: #4E4E4E;
    margin: 0;
    height: 42px;
    display: flex;
    align-items: center;
}

.logo-margin-label {
    width: 100%;
    height: 42px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 1.56vw, 30px);
    line-height: 140%;
    color: #4E4E4E;
    align-self: stretch;
    margin: 0;
}

.logo-margin-cards {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0;
    gap: 20px;
    width: 100%;
    height: auto;
}

.lmg-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 828px;
}

.lmg-col-label {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 1.56vw, 26px);   /* 검수(0720): PC 26 / 모바일 18 / 태블릿 clamp 18~26 */
    line-height: 140%;
    color: #4E4E4E;
    margin: 0;
    height: 42px;
    display: flex;
    align-items: center;
}

.logo-margin-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 828px;
    height: auto;
    background: #FFFFFF;
    border-radius: clamp(16px, 1.56vw, 30px);
    border: 1px solid #E9E9E9; /* 검수 0708: 보더 없는 이미지로 교체 → 프레임은 전 구간 CSS 테두리로 통일 */
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}



.lmg-line {
    box-sizing: border-box;
    position: absolute;
    height: 0;
    border-top: 1px solid #E2E2E2;
    z-index: 1;
    /* 선은 안개(2층) 아래로 */
}

.lmg-vline {
    position: absolute;
    width: 0;
    border-left: 1px solid #E2E2E2;
    z-index: 1;
    /* 선은 안개(2층) 아래로 */
}

.lmg-rect-orange {
    position: absolute;
    width: 36px;
    height: 36px;
    background: rgba(253, 228, 213, 0.8);
    z-index: 3;
    /* 주황 박스는 안개(2층) 위로 올라와 또렷하게 */
}

.lmg-dot {
    position: absolute;
    width: 23px;
    height: 23px;
    background: rgba(238, 120, 38, 0.5);
    z-index: 3;
}

.lmg-label {
    position: absolute;
    font-family: 'Pretendard', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 160%;
    color: #F27100;
    display: flex;
    align-items: center;
    z-index: 3;
}

.lmg-logo {
    position: absolute;
    z-index: 3;
}

/* ── BI 컬러 ── */
.color-row {
    display: flex;
    gap: clamp(20px, 1.56vw, 30px);
    width: 100%;
    height: auto;
    align-items: center;
}

@media (max-width: 1439px) {
    .color-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

.color-item {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.08vw, 40px);
    width: 100%;
    max-width: 540px;
    height: auto;
    box-sizing: border-box;
}

.color-circle {
    width: clamp(120px, 11.98vw, 230px);
    height: clamp(120px, 11.98vw, 230px);
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-mask: radial-gradient(circle, transparent 20%, black calc(20% + 1px));
    mask: radial-gradient(circle, transparent 20%, black calc(20% + 1px));
}

.color-circle-inner {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: transparent;
    padding: 0 var(--section-padding-x);
}

.color-meta {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.04vw, 20px);
    flex: 1;
    min-width: 0;
    height: auto;
    justify-content: center;
}

.color-name {
    font-size: clamp(16px, 1.35vw, 26px);
    font-weight: 700;
    color: #000;
    line-height: 150%;
    margin: 0;
    height: 39px;
    display: flex;
    align-items: center;
}

.color-values {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: auto;
}

.color-val {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: clamp(14px, 0.94vw, 18px);
    line-height: 160%;
    letter-spacing: 0%;
    color: #A7A7A7;
    display: flex;
    align-items: center;
    width: 100%;
    height: auto;
}



@media (max-width: 1439px) {
    .inner {
        padding: 0 5vw;
    }

    .footer-content {
        padding: 80px 5vw 40px;
    }
}

@media (max-width: 1439px) {
    html {
        font-size: 14px;
    }
}

@media (max-width: 1439px) {
    html {
        font-size: 13px;
    }
}

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

html {
    font-size: clamp(12px, 0.833vw, 16px);
}

body {
    background: #fff;
    color: #111;

    overflow-x: hidden;
}

.inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--section-padding-x);
}

/* GNB는 공통(css/common.css)만 사용 — 페이지 개별 오버라이드 금지 */









/* 📍 ===== Hero (요청하신 padding 0 30px 30px 반영) ===== */
.hero-wrap {
    background: #fff;
    padding: 30px 30px 30px;
}

.hero {
    max-width: 1860px;
    width: calc(100% - 60px);
    height: 800px;
    border-radius: 30px;
    background: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    margin: 30px auto 0;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero-bg-decor {
    position: absolute;
    width: 80vw;
    max-width: 1532px;
    aspect-ratio: 1;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    animation: circleReveal 1.2s cubic-bezier(.25, .46, .45, .94) forwards 0.1s;
}

.hero-bg-decor img {
    width: 100%;
    height: 100%;
    display: block;
}

@keyframes circleReveal {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.15);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 60px;
    gap: 40px;
    position: absolute;
    width: 100%;
    max-width: 1153px;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.hero-title {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: clamp(30px, 4.16vw, 80px);
    width: 100%;
    height: auto;
    justify-content: center;
}

.hero-title span {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 600;
    font-size: clamp(36px, 4.79vw, 92px);
    line-height: 140%;
    text-align: center;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}

.hero-title-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: clamp(20px, 3.125vw, 60px);
    height: auto;
    opacity: 0;
    animation: slideFromLeft 0.9s cubic-bezier(.25, .46, .45, .94) forwards 0.15s;
}

.hero-title-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: clamp(20px, 3.125vw, 60px);
    height: auto;
    opacity: 0;
    animation: slideFromRight 0.9s cubic-bezier(.25, .46, .45, .94) forwards 0.15s;
}

@keyframes slideFromLeft {
    from {
        opacity: 0;
        transform: translateX(-220px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideFromRight {
    from {
        opacity: 0;
        transform: translateX(220px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.hero-sub {
    height: auto;
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-size: clamp(16px, 1.25vw, 24px);
    line-height: 150%;
    display: flex;
    align-items: center;
    text-align: center;
    color: #FFFFFF;
    opacity: 0;
    animation: heroFadeIn 0.8s ease forwards 0.85s;
}

@keyframes heroFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ===== Material ===== */
.material-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--section-padding-y) var(--section-padding-x);
    gap: clamp(40px, 4.16vw, 80px);
    width: 100%;
    margin: 0 auto;
    background: #FFFFFF;
}

.material-section .inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;
    width: 100%;
    height: auto;
}

.material-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: clamp(40px, 4.16vw, 80px);
    width: 100%;
    height: auto;
}

.material-title {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    font-size: clamp(30px, 2.6vw, 50px);
    line-height: 140%;
    display: flex;
    align-items: center;
    color: #000000;
    width: 100%;
    max-width: 554px;
    height: auto;
}

.material-cards {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    padding: 0px;
    gap: 24px;
    width: 100%;
}

.mcard {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: clamp(24px, 2.08vw, 40px); /* 검수 0730: 카드 패딩 40 균일 (하단 60→40) */
    height: 580px;
    flex: 1;
    min-width: 0;
    border-radius: clamp(16px, 1.56vw, 30px);
    overflow: hidden;
}

.mcard-1 {
    background: linear-gradient(0deg, #C9F8E2, #C9F8E2);
}

.mcard-2 {
    background: linear-gradient(0deg, #CDEBFB, #CDEBFB);
}

.mcard-3 {
    background: linear-gradient(0deg, #FCE3CC, #FCE3CC);
}

.mcard-illus {
    margin: 0;
    width: 300px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    align-self: flex-end;
}

.mcard-illus img {
    display: block;
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mcard-txt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 12px; /* 검수 0730: 제목↔설명 간격 24→12 */
    margin: 0 auto;
    width: 100%;
    height: auto;
    order: -1;
}

.mcard-title {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    font-size: clamp(24px, 1.875vw, 36px);
    line-height: 150%;
    color: #1B1B1B;
    width: 100%;
    height: auto;
}

.mcard-desc {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-size: clamp(16px, 1.25vw, 24px);
    line-height: 150%;
    color: #4E4E4E;
    width: 100%;
    height: auto;
}

/* ===== Why DiKel? ===== */
.why-section {
    padding: var(--section-padding-y) 0 0; /* 검수 0730: 하단 간격은 value 섹션 상단 패딩(80)이 담당 */
    background: #fff;
}

.why-section .inner {
    display: flex;
    flex-direction: column;
    gap: 12px;                 /* 검수 0730: 라벨↔제목 간격 10→12 (Figma) */
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--section-padding-x);
}

.why-label {
    font-size: 30px;   /* 검수 0730: 44→30 (Figma 30pt) */
    font-weight: 700;
    color: #7A7A7A;    /* 검수 0730: 오렌지→#7A7A7A (Figma) */
}

.why-desc {
    font-size: clamp(30px, 2.6vw, 44px);   /* 검수(0716): 데스크탑 44px */
    font-weight: 700;   /* 검수 0730: 400→700 (Figma Bold) */
    color: #111;
    line-height: 1.5;   /* 검수 0730: 1.4→1.5 (Figma, 132/2/44) */
    max-width: 1309px;
}

/* 📍 ===== Value Section (sticky scroll parallax) ===== */
.value-section {
    background: #fff;
    padding: 0;
    height: 400vh;
    position: relative;
}

.value-sticky-wrap {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.value-inner-box {
    display: flex;
    align-items: stretch;
    gap: var(--section-padding-x);
    width: 100%;
    max-width: 1920px;
    height: 100vh;
    padding: 80px var(--section-padding-x) var(--section-padding-y); /* 검수 0730: 상단 100→80 (why 제목↔이미지 간격 80), 하단·좌우 유지 */
    box-sizing: border-box;
    background: #FFFFFF;
    margin: 0 auto;
}

/* ── Left Column: 이미지 ── */
.value-left {
    position: relative;
    flex: 0 0 45%;
    border-radius: clamp(16px, 1.56vw, 30px);
    overflow: hidden;
}

.value-img {
    position: absolute;
    inset: 0;
    transition: opacity 0.3s ease;
}

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

/* ── Right Column: 라벨 + 텍스트 + 인디케이터 ── */
.value-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-right: 20px;
}

.value-section-label {
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: clamp(18px, 1.56vw, 30px);
    line-height: 150%;
    color: #7A7A7A;
    margin: 0 0 clamp(20px, 2vw, 40px);
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

.value-label-2 {
    display: none;
}

/* ── 텍스트 마스크 (스크롤 애니메이션 클립) ── */
.value-text-mask {
    flex: 1;
    position: relative;
    overflow: hidden;
    width: 88%;
}

/* ── 텍스트 아이템 (JS translateY 애니메이션) ── */
.value-item {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(20px, 2.08vw, 40px);
    will-change: transform, opacity;
}

.value-item-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    width: 100%;
}

.value-item-tag-wrap {
    display: flex;
    align-items: center;
}

.value-item-tag {
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: clamp(16px, 1.04vw, 20px);
    line-height: 150%;
    color: #F27100;
}

.value-item-title-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
}

.value-item-title {
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: clamp(28px, 2.6vw, 50px);
    line-height: 140%;
    color: #000000;
    width: 100%;
    margin: 0;
}

.value-item-divider {
    width: 100%;
    height: 0;
    border: 1px solid #E9E9E9;
    flex: none;
    margin: 0;
}

.value-item-desc {
    font-family: 'Pretendard';
    font-weight: 400;
    font-size: clamp(18px, 1.25vw, 24px); /* 검수 0708: 본문 최소 18px (태블릿에서 너무 작던 것 상향) */
    line-height: 150%;
    color: #4E4E4E;
    width: 100%;
    margin: 0;
    word-break: keep-all;
}

/* 검수: 리니어 스크롤 — 초기값(JS가 스크롤 진행도로 갱신) */
#vitem-0 {
    transform: translateY(142px);
    opacity: 1;
}

#vitem-1 {
    transform: translateY(1000px);
    opacity: 0.3;
}

/* ── 인디케이터 바 ── */
.value-indicator {
    position: absolute;
    width: 3px;
    right: 0;
    top: 0;
    border-radius: 1.5px;
    background: #D3D3D3;
    /* height는 JS syncIndicatorHeight()가 동적 설정 */
}

.value-indicator-fill {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 50%;
    border-radius: 1.5px;
    background: #F27100;
}

/* 📍 ===== 원통형 배터리 경쟁력 (피그마 좌표/여백 완벽 반영) ===== */
.battery-section {
    background: #F1F3F7;
    position: relative;
    padding: var(--section-padding-y) 0;
    overflow: hidden;
}

.battery-section .inner {
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--section-padding-x);
}

@media (min-width: 768px) {
    .battery-section .inner {
        container-type: inline-size;
    }
}

/* 📍 메인 타이틀 */
.battery-main-title {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    font-size: clamp(30px, 2.6vw, 50px);
    line-height: 140%;
    display: flex;
    align-items: center;
    color: #000000;
    width: 100%;
    height: auto;
    margin-bottom: clamp(40px, 4.16vw, 80px);
}

.battery-compare {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: clamp(30px, 2.6vw, 50px);
    width: 100%;
}

.battery-head,
.bsys-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Figma: Center alignment */
    padding: 0px;
    gap: 12px; /* 검수 0730: 제목↔설명 간격 16→12 (Figma) */
    width: 100%;
    /* Robust centering */
    max-width: 1680px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.battery-sub-title {
    width: 100%;
    max-width: 800px;
    height: auto;
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    font-size: clamp(24px, 2.29vw, 44px);
    line-height: 150%;
    text-align: center;
    color: #222222;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Section specific title max-widths if needed */
.battery-head .battery-sub-title {
    max-width: 762px;
}

.bsys-head .battery-sub-title {
    max-width: 747px;
}

.battery-sub-desc {
    width: 100%;
    height: auto;
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-size: clamp(18px, 1.25vw, 24px);
    line-height: 150%;
    text-align: center;
    color: #4E4E4E;
    margin: 0;
}

.compare-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: clamp(20px, 1.56vw, 30px);
    width: 100%;
    height: auto;
    position: relative;
    overflow: visible;
}

.compare-images {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    padding: 0px;
    gap: clamp(10px, 6.25vw, 120px);
    width: 100%;
    height: auto;
    position: relative;
}

/* 배터리 비교 원 (실제 DOM) */
.bat-circle {
    position: absolute;
    border-radius: 50%;
    left: 50%;
    top: 160%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: -1;
}

.bat-circle-outer {
    width: 140%;
    aspect-ratio: 1;
    border: 2px solid #FFFFFF;
    clip-path: inset(0 0 50% 0);
    display: none;   /* 검수 0806: [WEB] 바깥 라인 삭제 (태블릿·모바일은 이미 숨김) */
}

.bat-circle-inner {
    width: 100%;
    aspect-ratio: 1;
    border: 8px solid #FFFFFF;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 60%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 60%)
}

.img-box-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(10px, 0.83vw, 16px);
    flex-shrink: 0;
    width: clamp(170px, 15.6vw, 300px);
    height: clamp(170px, 15.6vw, 300px);
    background: #F8F9FB; /* 검수 0730: fill #F8F9FB (Figma) */
    border: 1px solid #FFFFFF; /* 검수 0730: stroke #FFFFFF (Figma) */
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.03); /* 검수 0730: 그림자 추가 (Figma) */
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

.img-box-side.pouch img {
    transform: none;
}

.img-box-side img {
    width: clamp(100px, 9.27vw, 178px);
    height: auto;
    object-fit: contain;
}

/* side 라벨: pill 하단 내부 (피그마: 20px Medium #7a7a7a) */
.side-label {
    margin: 0;
    font-family: 'Pretendard';
    font-weight: 500;
    font-size: clamp(14px, 1.04vw, 20px);
    line-height: 160%;
    color: #7A7A7A;
    white-space: nowrap;
    text-align: center;
}

/* center 래퍼: 라벨 + 이미지 + 태그를 세로 배열 */
.img-box-center-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

/* center 라벨 (검수 0730: 2줄 — 니켈도금강판 16/#7A7A7A + 원통형 배터리 26/#363636, gap 4) */
.center-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    margin: 0;
}

.center-label-sub {
    font-family: 'Pretendard';
    font-weight: 500;
    font-size: 16px;
    line-height: 1.6;
    color: #7A7A7A;
}

.center-label-main {
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: 26px;
    line-height: 1.5;
    color: #363636;
}

.center-label-slash {
    color: #7A7A7A;
}

.img-box-center {
    position: relative;
    width: 100%;
    max-width: 584px;
}

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

/* 기존 compare-labels는 더 이상 사용 안 함 (HTML 제거됨) */
.compare-labels {
    display: none;
}

.clbl {
    display: none;
}



/* 📍 태그 래퍼: 피그마 – 이미지 아래 가로 배열 (gap: 6px) */
.bat-float-tags {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 100%;
}

/* 📍 태그 아이템 (피그마: px-24 py-16 rounded-1000 shadow bg-#F27100 20px bold) */
.bat-float-tag {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: clamp(10px, 0.83vw, 16px) clamp(16px, 1.25vw, 24px);
    gap: 10px;
    position: relative;
    background: #F27100;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.06);
    border-radius: 1000px;
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    font-size: clamp(16px, 1.04vw, 20px);
    line-height: 150%;
    color: #FFFFFF;
    text-align: center;
    box-sizing: border-box;
    white-space: nowrap;
}

/* 📍 ===== 원통형 배터리 시스템 (Cell → Bettery Pack → Module) ===== */
.battery-system {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(40px, 3.64vw, 70px);
    width: 100%;
    margin-top: clamp(40px, 4.16vw, 80px);
}

.bsys-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 16px;
    text-align: center;
}

/* 흰색 거대 pill 컨테이너 (피그마: bg-white h-580 rounded-1000000) */
.bsys-card {
    position: relative;
    width: 100%;
    max-width: 1680px;
    height: clamp(240px, 30.2vw, 580px);
    background: #FFFFFF;
    border-radius: 1000000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.bsys-items {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: calc(100% - clamp(20px, 6.25vw, 120px));
    height: 100%;
    padding: clamp(30px, 3.12vw, 60px) 0;
    box-sizing: border-box;
}

.bsys-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 박스 내 상하 가운데 정렬로 복구 */
    position: relative;
    height: 100%;
}

/* 원형 배경 공통 */
.bsys-circle {
    flex-shrink: 0;
    width: clamp(140px, 20vw, 460px);
    height: clamp(140px, 20vw, 460px);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    border: none;
}

/* 검수 0730: 원형 배경 삭제 (Figma 디자인 전반 수정) — 색 원 제거, 이미지+라벨만 */
.bsys-circle-orange,
.bsys-circle-gray,
.bsys-circle-dark {
    background: transparent;
}

.bsys-img {
    max-width: 50%;
    max-height: 70%;
    object-fit: contain;
    display: block;
}

/* pill 라벨 (배경 제거 및 40px 위치 조정) */
.bsys-pill-label {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.78vw, 10px);
    z-index: 2;
    white-space: nowrap;
}

.bsys-circle-orange .bsys-img {
    position: absolute;
    top: 7%;
    left: 50%;
    transform: translateX(-50%);
    width: 43%;
    height: auto;
    max-width: none;
    max-height: none;
}

.bsys-circle-gray .bsys-img {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 46%;
    height: auto;
    max-width: none;
    max-height: none;
}

.bsys-circle-dark .bsys-img {
    position: absolute;
    top: 17%;
    left: 50%;
    transform: translateX(-50%);
    width: 75%;
    height: auto;
    max-width: none;
    max-height: none;
}

/* 검수 0730: 번호 뱃지(①②③) 삭제 */
.bsys-pill-num {
    display: none;
}

.bsys-pill-text {
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: clamp(14px, 1.35vw, 26px);
    line-height: 150%;
    color: #4E4E4E; /* 검수 0730: 이미지 하단 라벨 #4E4E4E (Figma) */
}

/* 화살표 분리 요소 */
.bsys-arrow-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(24px, 2.08vw, 40px);
    flex-shrink: 0;
    margin-right: clamp(4px, 0.52vw, 10px);
}

.bsys-arrow-sep img {
    display: none;
}

.bsys-arrow-sep::after {
    content: '';
    display: block;
    width: clamp(16px, 1.25vw, 24px);
    height: clamp(16px, 1.25vw, 24px);
    border-right: clamp(2px, 0.2vw, 4px) solid #999999;
    border-top: clamp(2px, 0.2vw, 4px) solid #999999;
    transform: rotate(45deg);
}

/* 기존 bsys-arrow, bsys-labels 숨김 */
.bsys-arrow {
    display: none;
}

.bsys-labels {
    display: none;
}

/* 배경 데코 원호: 실제 DOM(.bat-circle)으로 대체됨 */
.battery-section {
    position: relative;
    overflow: hidden;
}

.battery-section .inner {
    position: relative;
    z-index: 1;
}


/* battery-section cqw 비율 스케일링 (태블릿+데스크탑) */
@container (min-width: 0px) {
    .battery-main-title {
        font-size: clamp(24px, 2.98cqw, 50px);
        margin-bottom: 20px
    }

    .battery-compare {
        gap: 68px;
    }

    .battery-sub-title {
        font-size: clamp(28px, 2.62cqw, 36px);
    }

    .battery-sub-desc {
        font-size: clamp(14px, 1.43cqw, 24px);
    }

    .compare-row {
        gap: 1.79cqw;
    }

    .compare-images {
        gap: 7.14cqw;
    }

    .img-box-center {
        max-width: 34.76cqw;
    }

    .img-box-side {
        gap: 0.95cqw;
        width: 17.86cqw;
        height: 17.86cqw;
    }

    .img-box-side img {
        width: 10.6cqw;
    }

    .side-label {
        font-size: clamp(12px, 1.19cqw, 20px);
    }

    .center-label {
        font-size: clamp(14px, 1.43cqw, 24px);
    }

    .bat-float-tag {
        padding: clamp(8px, 0.95cqw, 16px) clamp(12px, 1.43cqw, 24px);
        font-size: clamp(12px, 1.19cqw, 20px);
    }

    .battery-system {
        gap: 4.17cqw;
        margin-top: 4.76cqw;
    }

    .bsys-card {
        height: 34.52cqw;
    }

    .bsys-items {
        width: calc(100% - 7.14cqw);
        padding: 3.57cqw 0;
    }

    .bsys-circle {
        width: 27.38cqw;
        height: 27.38cqw;
    }

    .bsys-pill-label {
        gap: 0.6cqw;
    }

    .bsys-pill-num {
        width: clamp(22px, 2.86cqw, 48px);
        height: clamp(22px, 2.86cqw, 48px);
        font-size: clamp(11px, 1.55cqw, 26px);
    }

    .bsys-pill-text {
        font-size: clamp(11px, 1.55cqw, 26px);
    }

    .bsys-arrow-sep {
        width: 2.38cqw;
        margin-right: 0.6cqw;
    }

    .bsys-arrow-sep::after {
        width: 1.43cqw;
        height: 1.43cqw;
        border-right: 0.24cqw solid #999999;
        border-top: 0.24cqw solid #999999;
    }

}

/* 📍 ===== 디켈 경쟁력 Gallery ===== */
.gallery-section {
    background: #fff;
    padding: var(--section-padding-y) 0;
}

.gallery-title {
    font-size: clamp(30px, 2.6vw, 50px);
    font-weight: 700;
    color: #1B1B1B;
    line-height: 1.4;
    padding: 0 var(--section-padding-x);
    max-width: 1920px;
    margin: 0 auto clamp(40px, 4.16vw, 80px);
}

.gallery-scroll {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: hidden;
    padding: 0 0 120 0;
    max-width: 1920px;
    margin: 0 auto;
}

.gallery-img {
    flex: none;
    width: 460px;
    height: 460px;
    border-radius: 60px;
    overflow: hidden;
    margin-right: 24px;
}

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

/* 갤러리 모서리 설정 (유지) */
.gallery-scroll .gallery-img:nth-child(1),
.gallery-scroll .gallery-img:nth-child(7) {
    margin-right: 19px;
    border-top-left-radius: 0;
}

.gallery-scroll .gallery-img:nth-child(2),
.gallery-scroll .gallery-img:nth-child(8) {
    width: 322px;
    margin-right: 19px;
}

.gallery-scroll .gallery-img:nth-child(3),
.gallery-scroll .gallery-img:nth-child(9) {
    border-bottom-right-radius: 0;
}

.gallery-scroll .gallery-img:nth-child(5),
.gallery-scroll .gallery-img:nth-child(11) {
    border-top-right-radius: 0;
}

.gallery-scroll .gallery-img:nth-child(6),
.gallery-scroll .gallery-img:nth-child(12) {
    border-bottom-right-radius: 0;
}

.gallery-scroll .gallery-img:last-child {
    margin-right: 0;
}





/* ════════════════════════════════════
           TABLET/LAPTOP — 1024px ~ 1411px (추가 설비 컬럼 줄바꿈 방지)
           ════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1439px) {
    .spec-ann-grid-row {
        width: max-content;
        min-width: 100%;
    }

    .spec-ann-col {
        width: 150px;
        flex: none;
    }

    .spec-ann-col:nth-child(4) {
        width: 280px;
    }

    .spec-ann-col.wide {
        width: 580px;
        min-width: 580px;
    }
}

/* ════════════════════════════════════
           MOBILE — 1023px 이하 (탭 패널 공통)
           Brand Resource / 제품 상세 등의 고정폭 해제
           ════════════════════════════════════ */
@media (max-width: 767px) {
    body {
        min-width: 0 !important;
        width: 100% !important;
        overflow-x: hidden;
    }

    .inner {
        max-width: 100% !important;
        padding: 0 16px !important;
    }

    .mo-br {
        display: block !important;
    }



    /* Brand Resource 탭 패널 */
    .brand-section,
    .brand-inner,
    .brand-row,
    .brand-card-row,
    .timeline-section,
    .timeline-inner,
    .ci-section,
    .ci-inner,
    .product-list-section,
    .product-list-inner,
    .history-section,
    .history-inner {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 모든 1680px 컨테이너 */
    [class*="grid-group"] {
        width: 100% !important;
        max-width: 100% !important;
        gap: 12px !important;
    }

    [class*="section"] .inner,
    [class*="content-box"],
    [class*="card-wrap"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 탭 패널 내 큰 컨테이너 */
    .tab-panel .inner {
        padding: 0 16px !important;
    }

    /* 플렉스 컬럼 스택 */
    .brand-card-row,
    .timeline-row {
        flex-direction: column !important;
        gap: 16px !important;
    }

    /* 이미지/미디어 */
    .brand-card-row img,
    .ci-logo-row img,
    .product-list-img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* 모바일 표 텍스트 중앙 정렬 및 세로 스크롤 제거 */
    .spec-value,
    .spec-ann-col .spec-value {
        justify-content: center !important;
        text-align: center !important;
        padding: 0 10px !important;
    }

    .acc-body,
    .acc-content-box,
    .spec-table-container {
        overflow-y: hidden !important;
        height: auto !important;
        max-height: none !important;
    }

    /* ── 소둔 열처리 표 모바일 상세 스펙 (Figma 반영) ── */
    .spec-ann-grid-row {
        display: flex;
        flex-direction: row;
        width: max-content;
        min-width: 100%;
        height: 280px;
        background: #FFFFFF;
        border: none;
    }

    /* Columns styling */
    .spec-ann-col {
        flex: none;
        width: 150px !important;
        min-width: 150px !important;
        height: auto;
        border-right: 1px solid #D6D6D6;
        box-sizing: border-box;
    }

    .spec-ann-col:nth-child(5) {
        width: 177px !important;
        min-width: 177px !important;
    }

    .spec-ann-col.wide {
        width: 480px !important;
        min-width: 480px !important;
        border-right: none;
    }

    /* Cell content styling */
    .spec-ann-col .spec-head {
        box-sizing: border-box;
        width: 100%;
        height: 100px;
        padding: 0 10px;
        background: linear-gradient(0deg, #F9FAFE, #F9FAFE), #FCFDFF;
        border-top: 1px solid #000000;
        border-bottom: 1px solid #D6D6D6;
        font-family: 'Pretendard';
        font-weight: 700;
        font-size: 16px; /* 검수 0622: 모바일 소둔표 헤더 16px */
        line-height: 160%;
        color: #000000;
        justify-content: center;
        text-align: center;
        white-space: nowrap;
    }

    .spec-ann-col .spec-value {
        box-sizing: border-box;
        width: 100%;
        height: 90px;
        padding: 14px 18px;
        background: #FFFFFF;
        border-top: none;
        border-bottom: 1px solid #D6D6D6;
        border-right: none;
        font-family: 'Pretendard';
        font-weight: 400;
        font-size: 14px;
        line-height: 150%;
        color: #363636;
        justify-content: center;
        text-align: center;
    }

    /* Wide 컬럼 전용 상단 보더 조정 (중첩 방지) */
    .spec-ann-col.wide .spec-head {
        height: 50px;
        border-bottom: 1px solid #D6D6D6;
        white-space: nowrap;
        font-size: 16px; /* 검수 0622: 모바일 소둔표 헤더 16px */
    }

    /* 추가 설비 컬럼 내부 레이아웃 */
    .spec-ann-sub-header-row {
        display: flex;
        width: 100%;
        height: 50px;
        background: linear-gradient(0deg, #F9FAFE, #F9FAFE), #FCFDFF;
        border-top: none;
    }

    .spec-ann-sub-head {
        flex: 1 1 0;
        width: auto;
        height: 50px;
        padding: 0 6px;
        border-right: 1px solid #D6D6D6;
        border-top: none;
        border-bottom: 1px solid #D6D6D6;
        font-size: 14px;
        font-weight: 700;
        color: #000000;
        box-sizing: border-box;
        white-space: nowrap;
    }

    .spec-ann-sub-head:last-child {
        border-right: none;
    }

    .spec-ann-value-row {
        display: flex;
        width: 100%;
        height: 90px;
        border-top: none;
    }

    .spec-ann-sub-value {
        flex: 1 1 0;
        width: auto;
        height: 90px;
        padding: 14px 4px;
        border-right: 1px solid #D6D6D6;
        border-top: none;
        border-bottom: none;
        font-size: 14px;
        color: #363636;
        box-sizing: border-box;
        justify-content: center;
        text-align: center;
    }

    .spec-ann-sub-value:last-child {
        border-right: none;
    }

    /* Wide 컬럼의 Row 1 값 (-) 조정 */
    .spec-ann-col.wide .spec-value {
        height: 90px;
        border-top: none;
        border-bottom: 1px solid #D6D6D6;
    }

    /* 일반 컬럼의 마지막 행 선 제거 */
    .spec-ann-col:not(.wide) .spec-value:last-child {
        border-bottom: none;
    }
}

/* ════════════════════════════════════
           모바일 반응형 (768px 이하) - 피그마 MOB 스펙 반영
           ════════════════════════════════════ */
@media (max-width: 767px) {



    .page-header .page-label {
        font-size: 14px;
    }







    .hero-bg-decor {
        width: 148vw;
        max-width: none;
    }

    /* foreignObject가 모바일 Safari에서 흰 배경으로 렌더링되는 버그 회피 */
    .hero-bg-decor img {
        display: none !important;
    }

    .hero-bg-decor::before,
    .hero-bg-decor::after {
        content: '';
        position: absolute;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.5);
        background: transparent;
    }

    /* 바깥 원 */
    .hero-bg-decor::before {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    /* 안쪽 원 - 9시~12시 비어있는 호 */
    .hero-bg-decor::after {
        width: 100vw;
        height: 100vw;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 50%, 50% 50%);
    }

    /* ── 히어로: 피그마 MOB h-[700px] 전체너비, 라운딩없음 ── */
    .hero {
        max-width: 100% !important;
        width: 100% !important;
        height: 700px !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }



    .hero-content {
        width: 100% !important;
        max-width: 328px !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        padding: 0 !important;
        gap: 6px !important;
        height: auto !important;
    }

    .hero-title {
        flex-direction: column !important;
        gap: 6px !important;
        align-items: center !important;
        height: auto !important;
        width: 100% !important;
    }

    .hero-title-left,
    .hero-title-right {
        gap: 8px !important;
        height: auto !important;
        justify-content: center !important;
    }

    .hero-title span {
        font-size: 50px !important;
        font-weight: 700 !important;
    }

    .hero-sub {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        font-size: 16px !important;
        line-height: 1.6 !important;
        text-align: center !important;
        margin: 0 auto !important;
        word-break: keep-all !important;
    }

    /* ── 새로운 소재: 피그마 38:4175 MOB ── */
    .material-section {
        padding: 40px 0 !important;
        overflow: clip !important;
    }

    .material-section .inner {
        padding: 0 16px !important;
    }

    .material-content {
        gap: 40px !important; /* 검수 0730: 섹션 타이틀↔카드 간격 20→40 (Figma) */
    }

    .material-title {
        font-size: 26px !important; /* 검수 0730: 모바일 30→26 (Figma) */
        font-weight: 700 !important;
        height: auto !important;
        max-width: 100% !important;
        line-height: 1.4 !important;
        text-align: left !important;
    }

    /* 카드 그리드 → 세로 스택 gap-10 */
    .material-cards {
        flex-direction: column !important;
        height: auto !important;
        gap: 10px !important;
    }

    .mcard {
        flex: none;
        width: 100%;
        height: auto;
        min-height: 292px;
        border-radius: 16px;
        padding: 20px; /* 검수 0730: 카드 패딩 20 균일 (하단 30→20) */
        margin: 0 auto;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }

    /* illus: 150x100 우측하단 flex */
    .mcard-illus {
        width: 150px;
        height: 100px;
        overflow: hidden;
        margin: 0;
        align-self: flex-end;
    }

    .mcard-illus img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* txt: 좌측상단, 전체폭 */
    .mcard-txt {
        width: 100%;
        max-width: 100%;
        gap: 8px; /* 검수 0730: 카드 제목↔설명 간격 20→8 (Figma) */
        align-items: flex-start;
        order: -1;
    }

    .mcard-title {
        font-size: 20px;
        font-weight: 700;
        height: auto;
        line-height: 1.5;
        color: #1B1B1B;
    }

    .mcard-desc {
        font-size: 16px;
        font-weight: 400;
        height: auto;
        line-height: 1.6;
        color: #4E4E4E;
    }

    /* ── Why DiKel: 피그마 MOB px-[16px] py-[40px] gap-[30px] ── */
    .why-section {
        padding: 40px 0 0 !important;      /* 검수 0730: 하단 0 → 제목↔이미지 간격은 value 섹션 상단(40)이 담당 */
        overflow: hidden !important;
    }

    .why-section .inner {
        padding: 0 16px !important;
        gap: 8px !important;               /* 검수 0730: 라벨↔제목 간격 10→8 (Figma) */
    }

    .why-label {
        font-size: 16px !important;        /* 검수 0730: 모바일 24→16 (Figma) */
        color: #7A7A7A !important;         /* 검수 0730: #7A7A7A (Figma) */
    }

    .why-desc {
        font-size: 26px !important;        /* 검수 0730: 모바일 24→26 (Figma) */
        line-height: 1.5 !important;
    }

    /* ── 지속가능 가치: 피그마 MOB 세로 스택 ── 
               데스크탑의 sticky 스크롤 애니메이션 완전 해제
               피그마: px-[16px] py-[40px] gap-[20px]
               라벨 18px → 이미지 363px rounded-16 → 텍스트블록 */
    .value-section {
        height: auto !important;
        padding: 40px 0 !important;
        overflow: visible !important;
    }

    .value-sticky-wrap {
        position: relative !important;
        height: auto !important;
        overflow: visible !important;
    }

    .value-inner-box {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 16px !important;
        gap: 20px !important;
        box-sizing: border-box !important;
    }

    /* 래퍼 투명화 — 자식을 inner-box 레벨로 올림 */
    .value-left,
    .value-right {
        display: contents !important;
    }

    .value-section-label {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        font-size: 18px !important;
        height: auto !important;
        margin-bottom: 0 !important;
        order: 0 !important;
    }

    /* 1번째 이미지 + 텍스트 */
    .value-img {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        left: auto !important;
        top: auto !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        opacity: 1 !important;
        flex-shrink: 0 !important;
    }

    .value-img img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        object-fit: cover !important;
        border-radius: 16px !important;
    }

    #value-img-1 {
        order: 1 !important;
    }

    #value-img-2 {
        order: 4 !important;
        opacity: 1 !important;
    }

    /* value-text-mask → display:contents로 자식을 부모 레벨로 올림 */
    .value-text-mask {
        display: contents !important;
    }

    #vitem-0 {
        order: 2 !important;
    }

    #vitem-1 {
        order: 3 !important;
        display: contents !important;
    }

    /* vitem-1 내부 자식들: 이미지(order:4) 뒤에 배치 */
    #vitem-1>.value-item-top,
    #vitem-1>.value-item-divider,
    #vitem-1>.value-item-desc {
        order: 5 !important;
    }

    /* ── 가치 섹션 추가 간격 (피그마: txt wrapper py-20 gap-30) ── */
    .value-item {
        position: relative !important;
        width: 100% !important;
        transform: none !important;
        opacity: 1 !important;
        top: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;                 /* 검수 0730: 제목블록↔설명 간격 30→20 (Figma) */
        padding: 0 0 40px 4px !important;      /* 검수 0730: 상단 20→0, 좌 4(패딩값 4) — 이미지↔태그 간격은 inner-box gap(20)만 */
    }

    .value-item-top {
        gap: 4px !important;                  /* 검수 0730: 태그↔제목 간격 12→4 (Figma) */
    }

    .value-item-tag {
        font-size: 16px !important;
        color: #F27100 !important;
    }

    .value-item-tag-wrap {
        height: auto !important;
        padding: 0 !important;
    }

    .value-item-title {
        font-size: 22px !important; /* 검수 0730: 24→22 (Figma) */
        line-height: 1.46 !important; /* 검수 0730: 행간 146% (Figma) */
        height: auto !important;
        width: 100% !important;
    }

    .value-item-divider {
        display: none !important;
    }

    .value-item-desc {
        max-width: 100% !important;
        width: 100% !important;
        font-size: 18px !important;
        color: #7A7A7A !important;
        font-weight: 500 !important;
        height: auto !important;
        line-height: 1.6 !important;
    }

    /* 모바일에서 두번째 라벨 표시 */
    .value-label-2 {
        display: block !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #7A7A7A !important;
        line-height: 1.6 !important;
        margin-bottom: 0 !important;
        order: 3 !important;
    }

    /* 두번째 이미지: 모바일에서 보이고 순서 조정 */
    #value-img-2 {
        opacity: 1 !important;
        display: block !important;
    }

    .value-indicator {
        display: none !important;
    }

    /* ══════════════════════════════════════════════════════
               배터리 비교 섹션 – 모바일 CSS (피그마 38:4221 기준 완전 재작성)
               피그마: bg-[#f1f3f7] px-16 py-40 gap-40
               ══════════════════════════════════════════════════════ */
    .battery-section {
        padding: 40px 0 !important;
        background: #F1F3F7 !important;
    }

    .bat-circle-outer {
        display: none !important;
    }

    .bat-circle-inner {
        width: calc(100% - 20px) !important; /* 검수 0730: 지름(곡률)은 크게 유지 */
        border-width: 3px !important;   /* 검수 0806: [mob] 라인 두께 6→3px */
        clip-path: inset(0 0 50% 0) !important;
        top: 80% !important; /* 검수 0730: top 80% */
        /* 검수 0730: 아크 양끝 길이 축소 — 마스크를 더 일찍(35%) 페이드해 아크가 짧게 끝남 */
        -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 45%) !important;
        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 45%) !important;
    }

    /* 검수 0730: 필름 파우치형 이미지 좌우 반전 (Figma) */
    .img-box-side.pouch img {
        transform: scaleX(-1) !important;
    }

    .battery-section .inner {
        padding: 0 16px !important;
    }

    .battery-main-title {
        font-size: 26px !important;        /* 검수(0716): 모바일 26px */
        height: auto !important;
        margin-bottom: 40px !important;
        line-height: 1.5 !important;
    }

    .battery-compare {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }

    /* compare-row: 세로 배열, overflow 보이기 */
    .compare-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        height: auto !important;
        overflow: visible !important;
        gap: 12px !important;
        padding: 0 !important;
    }

    /* compare-images: 모바일에서 세로 배열 */
    .compare-images {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 18px !important;
        height: auto !important;
        width: 100% !important;
    }

    /* center 래퍼: 모바일에서 전체 너비 (라벨+이미지+태그 세로) */
    .img-box-center-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
        width: 100% !important;
        order: -1 !important;
    }

    /* center 라벨: 검수(0716) 모바일 16px / 미디움 */
    .center-label {
        margin-bottom: 8px !important; /* 검수 0730: 라벨↔이미지 간격 8 (Figma) */
    }

    .center-label-sub {
        font-size: 14px !important; /* 검수 0730: 모바일 니켈도금강판 14pt (Figma) */
    }

    .center-label-main {
        font-size: 16px !important; /* 검수 0730: 모바일 원통형 배터리 16pt (Figma) */
    }

    /* 원통형 이미지 (피그마 h-338 rounded-16) */
    .img-box-center {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px !important;
        overflow: visible !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 1 !important;
    }

    /* 모바일 전용: 원통형 배터리를 감싸는 흰색 반원 라인 */
    .img-box-center::before {
        display: none !important;
    }

    .img-box-center img {
        width: auto !important;
        height: 80% !important;
        max-width: 259px !important;
        object-fit: contain !important;
    }

    /* 태그 래퍼: 모바일 가로 배열 (피그마 gap-2 h-40) */
    .bat-float-tags {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        width: 100% !important;
        justify-content: space-between !important;
        height: auto !important;
        align-items: center !important;
        margin-top: 16px !important;
    }

    .bat-float-tag {
        padding: 8px 0 !important;
        font-size: clamp(14px, 2.6vw, 14px) !important;
        font-weight: 700 !important;
        border-radius: 685px !important;
        box-shadow: none !important;
        flex: 1 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    /* 검수 0730: Figma 모바일 레이아웃 — 파우치(좌)·각형(우)이 중앙 원통형을 좌우로 감싸는 absolute 배치.
       원형(22%≈80px)은 원통형 이미지 높이에 맞춰 위치, 라벨은 원 '위'(overflow visible). */
    .img-box-side {
        position: absolute !important;
        top: 65% !important;                  /* 검수 0730: 원통형 이미지 세로 중앙(≈65%) */
        transform: translateY(-50%) !important;
        width: 24% !important;                /* 검수 0730: ≈80px (Figma) */
        max-width: 84px !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 50% !important;
        background: #F8F9FB !important;      /* fill #F8F9FB */
        border: 1px solid #FFFFFF !important; /* stroke #FFFFFF */
        box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.03) !important; /* 그림자 */
        overflow: visible !important;         /* 라벨을 원 밖(위)으로 노출 */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        gap: 0 !important;
        z-index: 3 !important;
    }

    .img-box-side.pouch { left: 0 !important; right: auto !important; }
    .img-box-side.prism { left: auto !important; right: 0 !important; }

    /* 라벨: 원형 바로 위 (Figma: 필름 파우치형 / 알루미늄 각형) */
    .img-box-side .side-label {
        position: absolute !important;
        bottom: calc(100% + 6px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: max-content !important;
        max-width: 100px !important;
    }

    .img-box-side img {
        width: auto !important;
        height: auto !important;
        max-height: 45% !important;
        max-width: 80% !important;
        object-fit: contain !important;
        margin: 0 auto !important;
    }

    /* side 라벨: 모바일 14px */
    .side-label {
        margin: 0 !important;
        font-size: 12px !important; /* 검수 0730: 모바일 14→12 (Figma) */
        color: #7A7A7A !important; /* 검수 0730: #4E4E4E→#7A7A7A (Figma) */
        line-height: 1.5 !important;
        white-space: normal !important;
        text-align: center !important;
    }

    /* 검수 0730: 중앙 컬럼 + 좌우 absolute 사이드 (Figma 모바일 레이아웃) */
    .compare-images {
        position: relative !important;
        display: block !important;
        width: 100% !important;
    }

    .img-box-center-wrap {
        width: 100% !important;
        flex: none !important;
    }

    /* 하단 제목/설명 (검수 0730: 제목↔설명 간격 8) */
    .battery-head {
        gap: 8px !important;
    }

    .battery-sub-title {
        font-size: 22px !important; /* 검수 0730: 24→22 (Figma) */
        color: #1B1B1B !important; /* 검수 0730: #1B1B1B (Figma) */
        height: auto !important;
        text-align: center !important;
        line-height: 1.46 !important; /* 검수 0730: 행간 146% (Figma) */
    }

    /* 파우치형/각형 대비 설명: 16px */
    .battery-sub-desc {
        font-size: 16px !important; /* 검수 0730: 18→16 (Figma) */
        height: auto !important;
        text-align: center !important;
        font-weight: 400 !important; /* 검수 0730: 500→400 */
        color: #4E4E4E !important; /* 검수 0730: #7A7A7A→#4E4E4E */
        line-height: 1.5 !important;
    }

    /* bsys(효율적인 에너지) 설명: 14px/#868686 (Figma 이미지 하단 텍스트) */
    .bsys-head .battery-sub-desc {
        font-size: 14px !important; /* 검수 0730: 14pt (Figma) */
        color: #868686 !important; /* 검수 0730: #868686 (Figma) */
    }

    /* ── 배터리 시스템: 모바일 가로 pill (Figma 2224:16432) ── */
    .battery-system {
        height: auto !important;
        padding: 0 !important;
        margin-top: 60px !important;
        gap: 30px !important;
    }

    /* 흰색 pill 컨테이너 */
    .bsys-card {
        width: 100% !important;
        height: auto !important;
        border-radius: 999px !important;
        background: #fff !important;
        padding: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 가로 배열: 3항목 + chevron */
    .bsys-items {
        width: 100% !important;
        height: auto !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        gap: 8px !important;
    }

    .bsys-item {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
        height: auto !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
    }

    /* 원형 배경 컨테이너 → 이미지+라벨 세로(배경/절대배치 해제) */
    .bsys-circle {
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        background: transparent !important;
        overflow: visible !important;
        padding: 6px 0 !important;
        border-radius: 0 !important;
    }

    /* 이미지: 정상 흐름, 높이 48px (절대배치 해제) */
    .bsys-img,
    .bsys-circle-orange .bsys-img,
    .bsys-circle-gray .bsys-img,
    .bsys-circle-dark .bsys-img {
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: auto !important;
        height: 48px !important;
        max-width: 100% !important;
        max-height: 48px !important;
        object-fit: contain !important;
    }

    /* 라벨: 이미지 아래(절대배치 해제) 12px #4E4E4E */
    .bsys-pill-label {
        position: static !important;
        transform: none !important;
        bottom: auto !important;
        left: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    .bsys-pill-num {
        display: none !important;
    }

    .bsys-pill-text {
        font-size: 12px !important;
        color: #4E4E4E !important;
    }

    /* 화살표: 가로(오른쪽) 작은 chevron (Figma 5×10 #A7A7A7) */
    .bsys-arrow-sep {
        width: auto !important;
        height: auto !important;
        flex: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .bsys-arrow-sep img {
        display: none !important;
    }

    .bsys-arrow-sep::after {
        content: '' !important;
        display: block !important;
        width: 5px !important;
        height: 5px !important;
        border: 1.5px solid #A7A7A7 !important;
        border-left: 0 !important;
        border-bottom: 0 !important;
        transform: rotate(45deg) !important;
        margin: 0 !important;
    }

    /* 기존 bsys-arrow 숨김 */
    .bsys-arrow {
        display: none !important;
    }

    .bsys-labels {
        display: none !important;
    }

    .bsys-head {
        text-align: center !important;
        align-items: center !important;
    }

    /* ── 갤러리(디켈경쟁력): 피그마 MOB px-[16px] py-[40px] gap-[50px] ── */
    .gallery-section {
        padding: 40px 0 !important;
        overflow: hidden !important;
    }

    .gallery-section .inner {
        padding: 0 16px !important;
    }

    .gallery-title {
        font-size: 26px !important; /* 검수 0730: 모바일 30→26 (Figma) */
        padding: 0 16px !important;
        line-height: 1.5 !important;
        margin-bottom: 30px !important;
    }

    /* 피그마 MOB: 데스크탑 디자인 반영 (비율 및 특수 라운드 조정) */
    .gallery-scroll {
        overflow: hidden !important;
        padding: 20px 0 !important;
        gap: 16px !important;
        /* 데스크탑의 24px/19px을 고려한 모바일 간격 */
    }

    .gallery-img {
        width: 220px !important;
        height: 220px !important;
        min-width: 220px !important;
        border-radius: 30px !important;
        margin-right: 0 !important;
    }

    /* 데스크탑 특수 디자인 모바일 이식 */
    .gallery-scroll .gallery-img:nth-child(1),
    .gallery-scroll .gallery-img:nth-child(7) {
        border-top-left-radius: 0 !important;
    }

    .gallery-scroll .gallery-img:nth-child(2),
    .gallery-scroll .gallery-img:nth-child(8) {
        width: 154px !important;
        /* 데스크탑 322px 비율 (322/460 * 220) */
        min-width: 154px !important;
    }

    .gallery-scroll .gallery-img:nth-child(3),
    .gallery-scroll .gallery-img:nth-child(9) {
        border-bottom-right-radius: 0 !important;
    }

    .gallery-scroll .gallery-img:nth-child(5),
    .gallery-scroll .gallery-img:nth-child(11) {
        border-top-right-radius: 0 !important;
    }

    .gallery-scroll .gallery-img:nth-child(6),
    .gallery-scroll .gallery-img:nth-child(12) {
        border-bottom-right-radius: 0 !important;
    }

    /* ── 활용분야 ── */
    .usage-section {
        padding: 40px 0 !important;
    }

    .usage-section .inner {
        padding: 0 16px !important;
    }

    .umi-icon {
        width: 15px !important;
        height: 30px !important;
    }

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

    .usage-menu-item .umi-desc {
        display: none !important;
    }

    .usage-menu-item.active .umi-desc {
        display: block !important;
    }



    /* ── 문의 CTA ── */
    .inquiry-section .inner {
        padding: 0 16px !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .inquiry-section .inquiry-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ── BI: 로고여백 블록 ── */
    .logo-margin-block {
        gap: 16px !important;
    }

    /* ── BI: color-values 아래 텍스트 라이트 ── */
    .color-val-text,
    .color-values {
        font-weight: 300 !important;
    }

    /* --- BI 섹션 (데스크톱 스타일 오버라이드) --- */
    .bi-section {
        padding: 40px 0;
    }
}

/* ═══ 태블릿 mcard 제목 폰트 축소 (한 줄 유지) ═══ */
@media (min-width: 768px) and (max-width: 1439px) {

    /* 내부 원: 30%만 보이게 (파우치-각형 잇는 호 정도) */
    .bat-circle-inner {
        clip-path: inset(0 0 70% 0);
        top: 125%;
    }

    /* 외부 원: 태블릿에서 숨김 */
    .bat-circle-outer {
        display: none;
    }

    /* 파우치/각형 배터리: 원통형보다 아래로 */
    .compare-images {
        align-items: flex-start;
    }

    .img-box-side {
        margin-top: 35%;
        min-width: 160px;
        min-height: 160px;
    }

    .img-box-center {
        min-width: 320px;
        min-height: 268px;
    }

    /* 주황 태그: compare-images 아래로 완전 분리 */
    .compare-row {
        padding-bottom: 60px;
    }

    .bat-float-tags {
        position: absolute;
        top: 110%;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        margin-top: 0;
        z-index: 2;
        gap: 10px;
    }

    .bat-float-tag {
        font-size: 16px;
        padding: 10px 20px;
    }

    .mcard {
        height: auto;
        justify-content: space-between;
        gap: 40px;
    }

    /* 검수: 태블릿 이미지 150×100, 하단 중앙 정렬 (우측 구석 → 카드 가로 중앙) */
    .mcard-illus {
        width: 150px;
        height: 100px;
        align-self: center;
        justify-content: center;
    }

    /* 검수: 태블릿 폰트 16 */
    .mcard-title {
        font-size: 16px;
        white-space: nowrap;
    }

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

    /* ── 갤러리 태블릿 크기 축소 ── */
    .gallery-img {
        width: clamp(280px, 32vw, 460px);
        height: clamp(280px, 32vw, 460px);
        border-radius: clamp(30px, 4.2vw, 60px);
        margin-right: clamp(12px, 1.7vw, 24px);
    }

    .gallery-scroll .gallery-img:nth-child(2),
    .gallery-scroll .gallery-img:nth-child(8) {
        width: clamp(200px, 22vw, 322px);
    }

    /* ── value-section sticky 태블릿 ── */
    .value-section {
        height: 200vh;
    }

    .value-inner-box {
        padding: 15vh var(--section-padding-x);
    }

    /* 검수: 태블릿에서 이미지 너비 축소 시 우측(배터리) 유지되도록 우측 기준 크롭 */
    .value-img img {
        object-position: right center;
    }

    /* 검수 0622: 배터리 타이틀 — 태블릿에서 동일 수준 타이틀(material-title)과 동일 크기로
       (@container의 cqw 스케일을 이 페이지 다른 타이틀과 동일한 2.6vw로 맞춤) */
    .battery-main-title {
        font-size: clamp(30px, 2.6vw, 50px);
    }

}



@media (min-width: 1920px) {
    .fcards-row {
        height: 540px;
    }
}

@media (min-width: 1920px) {
    .pi-title {
        height: 70px;
    }
}

@media (min-width: 1920px) {
    .pi-subtitle {
        height: 39px;
    }
}







@media (min-width: 1440px) {
    .material-cards {
        gap: 24px;
    }

    .mcard {
        height: 580px;
        padding: 40px 40px 60px;
        gap: 40px;
    }

    .mcard-illus {
        width: 300px;
        height: 200px;
    }

    .mcard-txt {
        gap: 12px; /* 검수 0730: 제목↔설명 간격 24→12 (데스크탑 ≥1440) */
    }

    .mcard-title {
        font-size: 36px;
        font-weight: 700;
        line-height: 150%;
    }

    .mcard-desc {
        font-size: 24px;
        font-weight: 400;
        line-height: 150%;
    }
}

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

    .acc-content-box,
    .process-card,
    .ps-progress,
    .hero,
    .fcard-premium .bg-main,
    .fcard-stable,
    .fcard-nextgen,
    .utc-video,
    .utc-video-bg,
    .mono-card-half,
    .mono-card-full,
    .logo-usage-card,
    .logo-margin-card,
    .mcard {
        border-radius: 20px !important;
    }
}