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


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

.mo-only {
    display: none;
}

/* Tablet/Mobile — 모바일 전용 요소 표시 */
@media (max-width: 767px) {
    .mo-only,
    .mo-br {
        display: block;
    }
}

/* ===== Hero Text (sticky scroll-to-color) ===== */
.hero-text-outer {
    position: relative;
    min-height: 250vh;
    /* CSS fallback, JS가 정확한 값으로 덮어씀 */
    padding-bottom: 0;
}

.hero-text-inner {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    z-index: 1;
    overflow: hidden;
}

.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;
}

/* ===== Hero Image (Expanding on scroll) ===== */
.hero-image-section {
    padding-top: 60px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.hero-image-wrapper {
    width: clamp(328px, calc(100% - 32px), 1860px);
    height: clamp(300px, 28.125vw, 540px);
    border-radius: clamp(15px, 1.56vw, 30px);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.hero-image-overlay {
    position: absolute;
    top: clamp(40px, 7.3vw, 140px);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(320px, 84.6vw, 1626px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1;
}

.overlay-label {
    font-family: 'Pretendard';
    font-size: clamp(16px, 1.25vw, 24px);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    line-height: 150%;
}

.overlay-text {
    font-family: 'Pretendard';
    font-size: clamp(20px, 2.29vw, 44px);
    font-weight: 700;
    color: #FFFFFF;
    line-height: 150%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0;
    word-break: keep-all;
}

#expand-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.product-intro .inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
}

/* CEO Message Section */
.ceo-message-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: clamp(10px, 0.83vw, 16px);
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    background: #FFFFFF;
    box-sizing: border-box;
}

.ceo-msg-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(10px, 0.83vw, 16px);
    width: 100%;
}

.ceo-msg-label {
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: clamp(18px, 1.25vw, 24px);
    line-height: 150%;
    color: #7A7A7A;
}

.ceo-msg-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(20px, 2.08vw, 40px);
    width: 100%;
}

.ceo-msg-heading {
    flex: 1;
    max-width: clamp(300px, 34vw, 652px);
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: clamp(28px, 2.6vw, 50px);
    line-height: 140%;
    color: #000000;
    margin: 0;
}

.ceo-msg-paragraphs-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(30px, 3.125vw, 60px);
    flex: 1.28;
    max-width: clamp(340px, 43.75vw, 840px);
}

.ceo-msg-paragraphs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
}

.ceo-msg-paragraphs p {
    font-family: 'Pretendard';
    font-weight: 400;
    font-size: clamp(16px, 1.25vw, 24px);
    line-height: 150%;
    color: #4E4E4E;
    margin: 0;
}

.ceo-signature {
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: clamp(16px, 1.25vw, 24px);
    line-height: 150%;
    color: #4E4E4E;
}

/* ===== 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;
}

/* Mission Section */
.mission-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--section-padding-y) var(--section-padding-x);
    gap: clamp(20px, 2.08vw, 40px);
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    background: #FFFFFF;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.mission-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    text-align: left;
    width: 100%;
    max-width: 1680px;
}

.mission-label {
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: clamp(18px, 1.25vw, 24px);
    line-height: 150%;
    color: #7A7A7A;
}

.mission-heading {
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: clamp(30px, 2.6vw, 50px);
    line-height: 140%;
    color: #000000;
    margin: 0;
    word-break: keep-all;
    height: 70px;
    display: flex;
    align-items: center;
}

.mission-desc {
    font-family: 'Pretendard';
    font-weight: 400;
    font-size: clamp(18px, 1.25vw, 24px);
    line-height: 150%;
    color: #4E4E4E;
    margin: 0;
    word-break: keep-all;
}

.mission-cards {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(16px, 1.25vw, 24px);
    width: 100%;
    max-width: 1680px;
    height: clamp(200px, 20.8vw, 400px);
}

.mission-card {
    position: relative;
    width: 50%;
    height: clamp(200px, 20.8vw, 400px);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mission-card.change {
    border-radius: clamp(20px, 2.6vw, 50px) clamp(20px, 2.6vw, 50px) 0px clamp(20px, 2.6vw, 50px);
}

.mission-card.innovation {
    border-radius: 0px clamp(20px, 2.6vw, 50px) clamp(20px, 2.6vw, 50px) clamp(20px, 2.6vw, 50px);
}

.mission-card .bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mission-card h3 {
    position: relative;
    z-index: 1;
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: clamp(40px, 3.125vw, 60px);
    line-height: 140%;
    color: #FFFFFF;
    text-align: center;
    margin: 0;
}

/* Philosophy Section */
.philosophy-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--section-padding-y) var(--section-padding-x);
    gap: 40px;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    background: #FFFFFF;
    box-sizing: border-box;
}

.philosophy-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    width: 100%;
    max-width: 1680px;
}

.philosophy-label {
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: clamp(18px, 1.25vw, 24px);
    line-height: 150%;
    color: #7A7A7A;
}

.philosophy-heading {
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: clamp(30px, 2.6vw, 50px);
    line-height: 140%;
    color: #000000;
    margin: 0;
    word-break: keep-all;
    height: 126px;
    display: flex;
    align-items: center;
}

.philosophy-content {
    width: 100%;
    max-width: 1680px;
}

.ph-card-wrap {
    background: #F8F9FB;
    border-radius: 30px;
    position: relative;
    width: 100%;
    height: clamp(500px, 38.85vw, 746px);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "tl tr"
        ".  ."
        "bl br";
    padding: var(--section-padding-y) var(--section-padding-x);
}

.ph-card {
    width: auto;
    height: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(4px, 0.4vw, 8px);
    box-sizing: border-box;
    z-index: 2;
}

.ph-card.active {}

.ph-card h3 {
    font-size: clamp(20px, 1.875vw, 36px);
    font-weight: 700;
    color: #333333;
    margin: 0;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.ph-card.active h3 {
    color: #F27100;
}

.ph-card p {
    font-family: 'Pretendard';
    font-weight: 400;
    font-size: clamp(14px, 1.25vw, 24px);
    line-height: 150%;
    color: #4E4E4E;
    margin: 0;
}

/* Card Positions — Grid areas */
.ph-card-tl {
    grid-area: tl;
    justify-self: start;
    align-self: start;
    text-align: left;
}

.ph-card-tr {
    grid-area: tr;
    justify-self: end;
    align-self: start;
    text-align: right;
}

.ph-card-bl {
    grid-area: bl;
    justify-self: start;
    align-self: end;
    text-align: left;
}

.ph-card-br {
    grid-area: br;
    justify-self: end;
    align-self: end;
    text-align: right;
}

/* 캔버스: wrap 전체 영역 중앙 (패딩 무시) */
.ph-center-graphic {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 850px;
    height: calc(100% - 4px);
    z-index: 1;
}

#ph-torus-canvas {
    width: 100%;
    height: 100%;
    display: block;
}



/* Philosophy Detail Section */
.philosophy-detail-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--section-padding-x);
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    background: #FFFFFF;
    box-sizing: border-box;
}

.ph-detail-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    width: 100%;
    max-width: 1680px;
    padding: 0;
    box-sizing: border-box;
}

.ph-detail-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 70px;
    width: 100%;
}

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

.ph-detail-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(40px, 4.16vw, 80px);
    width: 100%;
}

.ph-detail-txt {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(30px, 3.125vw, 60px);
    padding-top: 10px;
}

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

.ph-detail-desc-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ph-detail-motto {
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: clamp(20px, 1.4vw, 26px);
    line-height: 150%;
    color: #1B1B1B;
    margin: 0;
    display: flex;
    align-items: center;
}

.ph-detail-desc {
    font-family: 'Pretendard';
    font-weight: 400;
    font-size: clamp(16px, 1.2vw, 22px);
    line-height: 160%;
    color: #4E4E4E;
    margin: 0;
    max-width: 840px;
    display: flex;
    align-items: center;
}

.ph-detail-footnote {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 4px;
}

.footnote-mark {
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: clamp(14px, 0.83vw, 16px);
    line-height: 160%;
    color: #363636;
    white-space: nowrap;
}

.ph-detail-footnote p {
    font-family: 'Pretendard';
    font-weight: 400;
    font-size: clamp(14px, 0.83vw, 16px);
    line-height: 160%;
    color: #363636;
    margin: 0;
}

.ph-detail-img {
    width: 610px;
    height: 351px;
    flex-shrink: 0;
}

.ph-detail-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
}

@media (min-width: 768px) and (max-width: 1439px) {
    .ph-detail-img {
        width: clamp(300px, 38vw, 610px);
        height: 100%;
    }
    .ph-detail-img img {
        border-radius: 20px;
    }
}

@media (max-width: 767px) {
    .ph-detail-content {
        flex-direction: column;
    }

    .ph-detail-img {
        width: 100%;
        height: auto;
        aspect-ratio: 610/351;
    }
}


/* Core Values Section */
.core-values-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--section-padding-x);
    gap: clamp(30px, 2.6vw, 50px);
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    background: #F1EDEA;
    box-sizing: border-box;
}

.values-top {
    width: 100%;
    max-width: 1680px;
    text-align: left;
}

.values-label {
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: clamp(18px, 1.25vw, 24px);
    line-height: 150%;
    color: #7A7A7A;
}

.values-grid {
    display: flex;
    flex-direction: row;
    gap: clamp(16px, 1.25vw, 24px);
    width: 100%;
    max-width: 1680px;
}

.value-card {
    flex: 1;
    background: #FFFFFF;
    border-radius: 30px;
    padding: clamp(30px, 2.6vw, 50px);
    display: flex;
    flex-direction: column;
    gap: clamp(30px, 3.125vw, 60px);
    box-sizing: border-box;
}

.value-icon {
    width: 64px;
    height: 64px;
    position: relative;
}

.circle-outer {
    width: 64px;
    height: 64px;
    background: #F27100;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle-inner {
    background: #FFFFFF;
    border-radius: 50%;
}

.ci-32 {
    width: 32px;
    height: 32px;
}

.ci-24 {
    width: 24px;
    height: 24px;
}

.ci-16 {
    width: 16px;
    height: 16px;
}

.ci-8 {
    width: 8px;
    height: 8px;
}

.value-txt {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

.value-txt p {
    font-family: 'Pretendard';
    font-weight: 400;
    font-size: clamp(16px, 1.25vw, 24px);
    line-height: 150%;
    color: #4E4E4E;
    margin: 0;
    word-break: keep-all;
    width: 100%;
    height: auto;
}

@media (max-width: 1439px) {
    .values-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    .values-grid {
        grid-template-columns: 1fr;
    }

    .core-values-section {
        padding: 60px 20px;
    }
}

.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(18px, 1.66vw, 32px);
    font-weight: 700;
    line-height: 150%;
    color: #1B1B1B;
}

.acc-dropdown-icon {
    width: 64px;
    height: 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: 24px;
    font-weight: 700;
    line-height: 150%;
    color: #363636;
}

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

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

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

.spec-value {
    height: 90px;
    background: #FFFFFF;
    border-top: 1px solid #D6D6D6;
    border-right: 1px solid #D6D6D6;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 24px;
    font-size: 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;
}

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

@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 {
    padding: 40px 0;
}

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

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

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

.usage-left {
    width: 100%;
    max-width: 100%;
    flex-shrink: 1;
    GAP: 0
}

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

.umi-desc {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    font-size: 16px;
    height: auto;
    margin-bottom: 10px;
}

.usage-right {
    width: 100%;
    max-width: 100%;
    height: auto;
}

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

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

.utc-parts {
    height: auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 4px;
    padding-bottom: 4px;
    justify-content: flex-start;
}

.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;
}

.utc-footer-info {
    justify-content: flex-start;
}

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

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

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

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

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

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

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

.ps-label {
    display: none;
}

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

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

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

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

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

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

/* ═══ 모바일 3줄 다이어그램 ═══ */
.ps-mobile-diagram {
    display: block;
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    padding-top: 30px;
}

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

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

/* 각 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.25;
    filter: grayscale(1);
    transition: filter 0.4s ease, opacity 0.4s ease;
    pointer-events: none;
}

.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: 10;
}

.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-indicators {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    padding: 10px 0;
    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;
    flex-direction: column;
    gap: 10px;
    background: #FFFFFF;
    border-radius: 16px;
    padding: 16px 20px;
    width: 100%;
    box-sizing: border-box;
    margin-top: -50px;
}

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

.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;
}



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


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

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

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

.story-section .inner {
    flex-direction: column;
    width: 100%;
    padding: 0 var(--section-padding-x);
    gap: clamp(24px, 6.7vw, 30px);
}

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

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

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

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

.story-desc-sub {
    max-width: 100%;
    margin-top: 12px;
    text-align: left;
}

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

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

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

.scard-dk,
.scard-db,
.scard-nickel {
    width: clamp(200px, 57.8vw, 208px);
    height: clamp(72px, 22.2vw, 80px);
    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);
}

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

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

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

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

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



.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: clamp(24px, 8.3vw, 30px);
    height: auto;
}

.bi-section .bi-header-row {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    gap: clamp(16px, 4.4vw, 20px);
}

.bi-section .bi-desc {
    font-size: clamp(14px, 4.4vw, 16px);
    height: auto;
    max-width: 100%;
}

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

.bi-section .btn-brochure span {
    font-size: clamp(14px, 4.4vw, 16px);
}

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

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

.bi-section .logo-usage-label,
.bi-section .lmg-col-label {
    font-size: 24px;
    height: auto;
    min-height: 0;
}

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

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

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

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

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

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

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

.bi-section .logo-margin-card {
    height: 174px;
    min-height: 0;
    border-radius: 16px;
    border: 1px solid #E9E9E9;
}

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

.bi-section .mono-logo-subtitle {
    font-size: 24px;
    height: auto;
    min-height: 0;
}

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

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

.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: 26px;
}

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

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

.bi-section .bi-color-label {
    font-size: 24px;
    height: auto;
    min-height: 0;
}

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

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

.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: 0px;
    gap: 40px;

    width: 1064px;
    height: 235px;

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

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

    /* heading/Medium */
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    font-size: 50px;
    line-height: 140%;
    /* identical to box height, or 70px */
    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: auto;

    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 160%;
    text-align: center;

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

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

.story-desc-sub {
    display: block;
    margin-top: 20px;
    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 {
    /* Frame 2116936061 */
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 20px;

    width: 1064px;
    height: 125px;

    /* 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: 50px 50px 0px 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: 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 50px 50px 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 {
    width: 15px;
    height: 16px;
    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(20px, 1.56vw, 30px);
    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: 24px 40px;
    gap: 100px;
    flex: 1 1 45%;
    min-width: 0;
    height: 280px;
    border-radius: 30px;
}

.mono-card-full {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 24px 40px;
    gap: 100px;
    width: 100%;
    height: 280px;
    border-radius: 30px;
}

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

.mc-black {
    background: #000000;
}

.mc-blue {
    background: #003592;
}

.mc-orange {
    background: #EE7826;
}

.dikel-mark {
    width: 318px;
    max-width: 100%;
    height: 68px;
    position: relative;
}

.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;
    -webkit-overflow-scrolling: touch;
}

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

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

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

.spec-ann-col.wide {
    flex: 540;
}

.spec-ann-col .spec-head {
    height: 100px;
    background: #F9FAFE;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 24px;
    color: #363636;
    text-align: center;
}

.spec-ann-col .spec-value {
    height: 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: 20px;
    color: #4E4E4E;
    text-align: left;
    padding: 0 24px;
    box-sizing: border-box;
}

.spec-ann-col.wide .spec-head {
    height: 50px;
}

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

.spec-ann-sub-head {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #363636;
    /* 하위 헤더 사이에도 세로선 없음 */
}

.spec-ann-value-row {
    display: flex;
    height: 100px;
    border-top: 1px solid #D6D6D6;
}

.spec-ann-sub-value {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 24px;
    font-size: 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(20px, 1.56vw, 30px);
    line-height: 140%;
    display: flex;
    align-items: center;
    color: #4E4E4E;
}

.bi-color-grid {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 30px;
    width: 100%;
    height: auto;
}

.bi-color-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 40px;
    width: 100%;
    max-width: 540px;
    height: 230px;
    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: 616px;
    margin-bottom: 100px;
}

.logo-usage-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;
    margin: 0;
}

.logo-usage-card {
    width: 100%;
    height: 550px;
    background: #F1F3F7;
    border-radius: 30px;
    position: relative;
    flex-shrink: 0;
}

.logo-usage-card img {
    position: absolute;
    width: 100%;
    max-width: 415px;
    height: 88px;
    left: calc(50% - 415px / 2);
    top: calc(50% - 88px / 2);
}

/* ── 로고여백 ── */
.logo-margin-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    gap: 20px;
    /* 👈 간격 20으로 설정됨 */
    width: 100%;
    height: 452px;
    margin-bottom: 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(20px, 1.56vw, 30px);
    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(20px, 1.56vw, 30px);
    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: 390px;
    background: #FFFFFF;
    border-radius: 30px;
    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: 30px;
    width: 100%;
    height: 320px;
    align-items: center;
}

.color-item {
    display: flex;
    align-items: center;
    gap: 40px;
    width: 100%;
    max-width: 540px;
    height: 230px;
    box-sizing: border-box;
}

.color-circle {
    width: 230px;
    height: 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: 20px;
    width: 270px;
    height: 154px;
    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: 95px;
}

.color-val {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 160%;
    letter-spacing: 0%;
    color: #A7A7A7;
    display: flex;
    align-items: center;
    width: 270px;
    height: 29px;
}



@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-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: flex-start;
    padding: 0px;
    gap: 24px;
    width: 100%;
    height: 580px;
}

.mcard {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 40px 40px 60px;
    gap: 40px;
    flex: 1;
    min-width: 0;
    height: 580px;
    border-radius: 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 auto;
    width: 100%;
    max-width: 100%;
    max-width: 464px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

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

.mcard-txt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;
    margin: 0 auto;
    width: 100%;
    height: auto;
}

.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: 120px 0;
    background: #fff;
}

.why-section .inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--section-padding-x);
}

.why-label {
    font-size: clamp(30px, 2.6vw, 50px);
    font-weight: 700;
    color: #F27100;
}

.why-desc {
    font-size: clamp(30px, 2.6vw, 50px);
    font-weight: 400;
    color: #111;
    line-height: 1.4;
    max-width: 1309px;
}

/* 📍 ===== DiKel 지속가능 가치 (피그마 좌표/스펙 완벽 반영) ===== */
.value-section {
    background: #fff;
    padding: 0;
    height: 250vh;
    position: relative;
}

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

.value-inner-box {
    position: relative;
    width: 100%;
    height: min(1080px, 56.25vw);
    margin: 0 auto;
    background: #FFFFFF;
}

/* 📍 chager1 이미지 (좌표 top 120, left 120) */
.value-img {
    position: absolute;
    width: 38.54%;
    height: 76%;
    left: 6.25%;
    top: 11.1%;
    border-radius: clamp(16px, 1.56vw, 30px);
    overflow: hidden;
}

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

/* 📍 라벨 텍스트 박스 피그마 스펙 완벽 최적화 */
.value-section-label {
    position: absolute;
    width: auto;
    height: auto;
    left: 51.04%;
    top: 11%;
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    font-size: clamp(18px, 1.56vw, 30px);
    line-height: 150%;
    display: flex;
    align-items: center;
    color: #7A7A7A;
    margin: 0;
    letter-spacing: -0.02em;
}

/* 데스크탑에서 두번째 라벨 숨김 (모바일 전용) */
.value-label-2 {
    display: none;
}

/* 텍스트 마스크 (여기를 넘어가면 잘려서 보이지 않음) */
.value-text-mask {
    position: absolute;
    width: 42.18%;
    right: 6.25%;
    top: 24.3%;
    height: 1000px;
    overflow: hidden;
    z-index: 10;
}

/* 📍 텍스트 아이템 공통 (마스크 내부) */
.value-item {
    position: absolute;
    width: 100%;
    height: auto;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 40px;
    will-change: transform, opacity;
}

/* 📍 Environmental Value 영역 */
.value-item-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 12px;
    width: 100%;
}

.value-item-tag-wrap {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 0px;
    gap: 4px;
    height: 46px;
}

.value-item-tag {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 150%;
    color: #F27100;
}

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

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

/* 1. 부모 박스의 gap을 40px로 고정 (아이템 간 간격을 자동으로 40px씩 배분) */
.value-item {
    position: absolute;
    width: 100%;
    height: auto;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 40px;
    will-change: transform, opacity;
}

/* 2. 기존에 들어있던 margin-top 값들을 모두 제거해야 겹치지 않습니다 */
.value-item-divider {
    width: 100%;
    max-width: 693px;
    height: 0px;
    border: 1px solid #E9E9E9;
    flex: none;
    margin: 0;
}

.value-item-desc {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-size: clamp(16px, 1.25vw, 24px);
    line-height: 150%;
    color: #4E4E4E;
    width: 100%;
    max-width: 693px;
    height: auto;
    margin: 0;
    word-break: keep-all;
}

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

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

/* 우측 인디케이터 바 */
.value-indicator {
    position: absolute;
    width: 0px;
    height: 42.6%;
    right: 3.6%;
    top: 24.3%;
    border: 3px solid #D3D3D3;
}

.value-indicator-fill {
    position: absolute;
    left: -3px;
    top: -3px;
    width: 0px;
    height: 50%;
    border: 3px solid #F27100;
}

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

.battery-section .inner {
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--section-padding-x);
    /* 피그마 왼쪽 벽 120px 여백 반영 */
}

/* 📍 메인 타이틀 */
.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: 50px;
    /* 비교 헤드와 박스 간의 50px 여백 */
    width: 100%;
}

.battery-head,
.bsys-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Figma: Center alignment */
    padding: 0px;
    gap: 16px;
    /* Title-Desc gap: 16px */
    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: 20px;
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
}

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

.img-box-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    width: 300px;
    height: 300px;
    background: #fff;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

.img-box-side.pouch img {
    transform: scaleX(-1);
}

.img-box-side img {
    width: 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 라벨 (피그마: 24px Bold #363636) */
.center-label {
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: clamp(16px, 1.25vw, 24px);
    line-height: 150%;
    color: #363636;
    text-align: center;
    margin: 0;
}

.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: 16px 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: 70px;
    width: 100%;
    margin-top: 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: 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% - 120px);
    height: 100%;
    padding: 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(260px, 24vw, 460px);
    height: clamp(260px, 24vw, 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;
}

/* Cell: 주황 원 (피그마: bg-#f27100 rounded-243 size-460) */
.bsys-circle-orange {
    background: #F27100;
}

/* Bettery Pack: 연한 회색 배경 (이미지 원형) */
.bsys-circle-gray {
    background: #F1F3F7;
}

/* Module: 검은 원 (피그마: #170B00) */
.bsys-circle-dark {
    background: #170B00;
}

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

/* pill 라벨 (배경 제거 및 40px 위치 조정) */
.bsys-pill-label {
    position: absolute;
    bottom: 50px;
    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: 32px;
    left: 50%;
    transform: translateX(-50%);
    width: 197.24px;
    height: 367.86px;
}

.bsys-circle-gray .bsys-img {
    position: absolute;
    top: 68px;
    left: 50%;
    transform: translateX(-50%);
}

.bsys-circle-dark .bsys-img {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 80%;
    max-height: 80%;
}

.bsys-pill-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(36px, 4.68vw, 48px);
    height: clamp(36px, 4.68vw, 48px);
    background: #F1F3F7;
    border-radius: 1000px;
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: clamp(16px, 2.03vw, 26px);
    color: #363636;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.05);
}

.bsys-circle-gray .bsys-pill-num {
    background: #FFFFFF;
}

.bsys-pill-text {
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: clamp(16px, 2.03vw, 26px);
    line-height: 150%;
    color: #363636;
}

/* 주황색/어두운 배경 대응: 텍스트 색상 반전 */
.bsys-circle-orange .bsys-pill-text,
.bsys-circle-dark .bsys-pill-text {
    color: #FFFFFF;
}

/* 화살표 분리 요소 */
.bsys-arrow-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    flex-shrink: 0;
    margin-right: 10px;
}

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

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

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

.bsys-labels {
    display: none;
}

/* ═══ 배경 원호 (데코레이션) ═══ */
.battery-section {
    position: relative;
    overflow: hidden;
}

/* 큰 배경 원 1: 피그마 38:6040 size-2271 */
.battery-section::before {
    content: '';
    position: absolute;
    width: 2271px;
    height: 2271px;
    left: 50%;
    transform: translateX(-50%);
    top: 111px;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    pointer-events: none;
    z-index: 0;
    clip-path: inset(0 0 10% 0);
    /* 하단 절단면을 대폭 낮춰서 카드에 확실히 닿게 조정 */
}

/* 큰 배경 원 2: 피그마 38:6022 size-1501 */
.battery-section::after {
    content: '';
    position: absolute;
    width: 1501px;
    height: 1501px;
    left: 50%;
    transform: translateX(-50%);
    top: 494px;
    border-radius: 50%;
    border: 8px solid #FFFFFF;
    /* 연결 라인에 8px 보더 적용 */
    pointer-events: none;
    z-index: 0;
    clip-path: inset(0 0 40% 0);
    /* 하단 절단면을 대폭 낮춰서 카드에 확실히 닿게 조정 */
}

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

/* 📍 ===== 디켈 경쟁력 Gallery ===== */
.gallery-section {
    background: #fff;
    padding: var(--section-padding-x) 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;
}





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

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

    .mo-br {
        display: block;
    }

    
/* 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%;
        max-width: 100%;
    }

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

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

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

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

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

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

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

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

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

    .spec-ann-col.wide {
        width: 448px;
        border-right: none;
    }

    /* Cell content styling */
    .spec-ann-col .spec-head {
        box-sizing: border-box;
        width: 100%;
        height: 100px;
        padding: 0 18px;
        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: 18px;
        line-height: 160%;
        color: #000000;
        justify-content: center;
        text-align: center;
    }

    .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;
    }

    /* Batch, Continuous 텍스트는 볼드(700) 처리 */
    .spec-ann-col:first-child .spec-value {
        font-weight: 700;
        font-size: 18px;
        line-height: 160%;
        color: #000000;
    }

    /* Wide 컬럼 전용 상단 보더 조정 (중첩 방지) */
    .spec-ann-col.wide .spec-head {
        height: 50px;
        border-bottom: 1px solid #D6D6D6;
    }

    /* 추가 설비 컬럼 내부 레이아웃 */
    .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;
        width: 149.33px;
        height: 50px;
        padding: 0 18px;
        border-right: 1px solid #D6D6D6;
        border-top: none;
        border-bottom: 1px solid #D6D6D6;
        /* 아래쪽 구분선 복구 */
        font-size: 18px;
        font-weight: 700;
        color: #000000;
        box-sizing: border-box;
    }

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

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

    .spec-ann-sub-value {
        flex: 1;
        width: 149.33px;
        height: 90px;
        padding: 14px 18px;
        border-right: 1px solid #D6D6D6;
        border-bottom: none;
        /* 최하단 선 제거 */
        border-top: none;
        font-size: 14px;
        color: #363636;
        box-sizing: border-box;
    }

    .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) {









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

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

    .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%;
        width: 100%;
        height: 700px;
        border-radius: 0;
        margin: 0;
    }



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

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

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

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

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

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

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

    .material-content {
        gap: 20px;
    }

    .material-title {
        font-size: 30px;
        font-weight: 700;
        height: auto;
        max-width: 100%;
        line-height: 1.4;
        text-align: left;
    }

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

    .mcard {
        flex: none;
        width: 328px;
        height: 356px;
        border-radius: 16px;
        padding: 40px 20px;
        margin: 0 auto;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
    }

    /* illus: h-150 w-296 */
    .mcard-illus {
        max-width: 296px;
        min-width: 155px;
        height: 150px;
        min-height: 130px;
        overflow: hidden;
    }

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

    /* txt: w-288 gap-20, title 20px/1.5, desc 16px/1.6 #4E4E4E */
    .mcard-txt {
        width: 100%;
        max-width: 288px;
        gap: 20px;
        align-items: flex-start;
    }

    .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;
        overflow: hidden;
    }

    .why-section .inner {
        padding: 0 16px;
    }

    .why-label {
        font-size: 30px;
    }

    .why-desc {
        font-size: 30px;
        line-height: 1.5;
    }

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

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

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

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

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

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

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

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

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

    #vitem-0 {
        order: 2;
    }

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

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

    /* ── 가치 섹션 추가 간격 (피그마: txt wrapper py-20 gap-30) ── */
    .value-item {
        position: relative;
        width: 100%;
        transform: none;
        opacity: 1;
        top: auto;
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 20px 0;
    }

    .value-item-top {
        gap: 12px;
    }

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

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

    .value-item-title {
        font-size: 24px;
        line-height: 1.5;
        height: auto;
        width: 100%;
    }

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

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

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

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

    .value-indicator {
        display: none;
    }

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

    .battery-section::before,
    .battery-section::after {
        display: none;
    }

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

    .battery-main-title {
        font-size: 30px;
        height: auto;
        margin-bottom: 40px;
        line-height: 1.5;
    }

    .battery-compare {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

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

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

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

    /* center 라벨: 모바일 20px */
    .center-label {
        font-size: 20px;
        margin-bottom: 10px;
    }

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

    /* 모바일 전용: 원통형 배터리를 감싸는 흰색 반원 라인 */
    .img-box-center::before {
        content: '';
        position: absolute;
        width: 130vw;
        height: 130vw;
        max-width: 600px;
        max-height: 600px;
        border: 4px solid #FFFFFF;
        border-radius: 50%;
        top: 40px;
        left: 50%;
        transform: translateX(-50%);
        z-index: -1;
        clip-path: inset(0 0 50% 0);
    }

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

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

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

    /* side 이미지 (피그마 flex-1 h-158 rounded-800 bg-white) – 가로 배열 */
    .img-box-side {
        flex: none;
        width: calc(50% - 6px);
        height: auto;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        background: #fff;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0;
        gap: 8px;
    }

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

    /* side 라벨: 모바일 14px */
    .side-label {
        margin: 0;
        font-size: clamp(14px, 3.12vw, 14px);
        color: #4E4E4E;
        line-height: 1.5;
        white-space: normal;
        text-align: center;
    }

    /* side 이미지가 가로 배열되도록 래퍼 구조 조정 */
    .compare-images {
        flex-wrap: wrap;
        flex-direction: row;
    }

    .img-box-center-wrap {
        flex: 0 0 100%;
    }

    /* 하단 제목/설명 (피그마: gap-20 text-center) */
    .battery-head {
        gap: 20px;
    }

    .battery-sub-title {
        font-size: 24px;
        height: auto;
        text-align: center;
        line-height: 1.5;
    }

    .battery-sub-desc {
        font-size: 18px;
        height: auto;
        text-align: center;
        font-weight: 500;
        color: #7A7A7A;
        line-height: 1.6;
    }

    /* ── 배터리 시스템: 모바일 세로 배열 ── */
    .battery-system {
        height: auto;
        padding: 0;
        margin-top: 16px;
        gap: 30px;
    }

    .bsys-card {
        width: unset;
        height: auto;
        border-radius: 200px;
        background: #fff;
        padding: 16px 16px;
    }

    .bsys-items {
        width: 100%;
        height: auto;
        flex-direction: column;
        align-items: center;
        padding: 0;
        gap: 0;
    }

    /* 각 아이템: 세로 배열 */
    .bsys-item {
        width: 100%;
        height: auto;
        flex-direction: column;
        align-items: center;
        background: transparent;
    }

    /* 원형 배경: 모바일 296px (반응형) */
    .bsys-circle {
        width: 296px;
        height: 296px;
        max-width: 100%;
        max-height: 80vw;
        flex-direction: column;
        justify-content: center;
        gap: 12px;
    }

    .bsys-img {
        max-width: 60%;
        max-height: 60%;
        transform: none;
    }

    .bsys-circle-orange .bsys-img {
        position: absolute;
        top: 32px;
        left: 50%;
        transform: translateX(-50%);
        width: 108px;
        height: 181px;
    }

    .bsys-circle-gray .bsys-img {
        position: absolute;
        top: 42px;
        left: 50%;
        transform: translateX(-50%);
    }

    .bsys-circle-dark .bsys-img {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 219px;
        height: 164px;
        object-fit: fill;
    }

    /* pill 라벨: 모바일 스타일 */
    .bsys-pill-label {
        position: absolute;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 0;
        padding: 0;
        gap: 8px;
    }

    .bsys-pill-num {
        width: 40px;
        height: 40px;
        background: #F1F3F7;
        font-size: 20px;
    }

    .bsys-circle-gray .bsys-pill-num {
        background: #FFFFFF;
    }

    .bsys-pill-text {
        font-size: 20px;
    }

    /* 화살표 분리: 모바일에서 세로(↓) */
    .bsys-arrow-sep {
        width: 100%;
        height: 40px;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

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

    .bsys-arrow-sep::after {
        content: '';
        display: block;
        width: 18px;
        height: 18px;
        border-top: 0;
        border-left: 0;
        border-right: 3px solid #999999;
        border-bottom: 3px solid #999999;
        transform: rotate(45deg);
        margin: -10px 0 0 0;
    }

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

    .bsys-labels {
        display: none;
    }

    .bsys-head {
        text-align: center;
        align-items: center;
    }

    /* ── 갤러리(디켈경쟁력): 피그마 MOB px-[16px] py-[40px] gap-[50px] ── */
    .gallery-section {
        padding: 40px 0;
        overflow: hidden;
    }

    .gallery-section .inner {
        padding: 0 16px;
    }

    .gallery-title {
        font-size: 30px;
        padding: 0 16px;
        line-height: 1.5;
        margin-bottom: 40px;
    }

    /* 피그마 MOB: 데스크탑 디자인 반영 (비율 및 특수 라운드 조정) */
    .gallery-scroll {
        overflow: hidden;
        padding: 20px 0;
        gap: 16px;
        /* 데스크탑의 24px/19px을 고려한 모바일 간격 */
    }

    .gallery-img {
        width: 220px;
        height: 220px;
        min-width: 220px;
        border-radius: 30px;
        margin-right: 0;
    }

    /* 데스크탑 특수 디자인 모바일 이식 */
    .gallery-scroll .gallery-img:nth-child(1),
    .gallery-scroll .gallery-img:nth-child(7) {
        border-top-left-radius: 0;
    }

    .gallery-scroll .gallery-img:nth-child(2),
    .gallery-scroll .gallery-img:nth-child(8) {
        width: 154px;
        /* 데스크탑 322px 비율 (322/460 * 220) */
        min-width: 154px;
    }

    .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;
    }

    /* ── 활용분야 ── */
    .usage-section {
        padding: 40px 0;
    }

    .usage-section .inner {
        padding: 0 16px;
    }

    .umi-icon {
        height: 30px;
    }

    .umi-header {
        gap: 0;
    }

    .usage-menu-item {
        gap: 12px;
    }

    .usage-menu-item .umi-desc {
        display: none;
    }

    .usage-menu-item.active .umi-desc {
        display: block;
    }



    /* ── 문의 CTA ── */
    .inquiry-section .inner {
        padding: 0 16px;
        flex-direction: column;
        gap: 20px;
    }

    .inquiry-section .inquiry-card {
        width: 100%;
        max-width: 100%;
    }

    /* ── BI: 로고여백 블록 ── */
    .logo-margin-block {
        gap: 16px;
    }

    /* ── BI: color-values 아래 텍스트 라이트 ── */
    .color-val-text,
    .color-values {
        font-weight: 300;
    }

    /* --- BI 섹션 (데스크톱 스타일 오버라이드) --- */
    .bi-section {
        padding: 40px 0;
    }
}

/* ================================================================
   Mobile Responsive (360px optimized)
   ================================================================ */
@media (max-width: 767px) {
    .mo-only {
        display: inline;
    }

    /* Hero Section Mobile */
    .hero-text-section {
        padding: var(--section-padding-y) 20px 0;
    }

    .hero-image-section {
        padding-top: 24px;
    }

    .hero-text-section h2 {
        font-size: clamp(24px, 6.66vw, 30px);
        height: 72px;
    }

    .hero-image-overlay {
        position: absolute;
        top: 80px;
        left: 0;
        transform: none;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .overlay-text {
        width: 100%;
        height: auto;
        font-size: clamp(26px, 4vw, 44px);
    }

    /* CEO Message Mobile */
    .product-intro .inner {
        padding-top: var(--section-padding-y);
        padding-bottom: var(--section-padding-y);
        padding-left: 16px;
        padding-right: 16px;
    }

    .ceo-msg-content {
        flex-direction: column;
        gap: clamp(30px, 8.33vw, 40px);
    }

    .ceo-msg-heading {
        max-width: 100%;
        font-size: clamp(28px, 7.77vw, 50px);
        height: 168px;
    }

    .ceo-msg-top {
        gap: 8px;
    }

    .ceo-msg-paragraphs-wrap {
        max-width: 100%;
        gap: 20px;
    }

    .ceo-msg-paragraphs {
        gap: 16px;
    }

    .ceo-msg-paragraphs p {
        font-size: 16px;
        line-height: 26px;
    }

    /* Mission Section Mobile */
    .mission-section {
        padding: 40px 16px;
        gap: 30px;
    }

    .mission-top {
        gap: 8px;
    }

    .mission-label {
        margin-bottom: 0;
        height: 29px;
    }

    .mission-heading {
        height: 126px;
        margin-bottom: 12px;
        padding: 0;
    }

    .mission-cards {
        flex-direction: row;
        gap: 10px;
        justify-content: center;
        height: auto;
    }

    .mission-card {
        flex: 1;
        max-width: none;
        height: 120px;
    }

    .mission-card.change {
        border-radius: 16px 16px 0 16px;
    }

    .mission-card.innovation {
        border-radius: 0 16px 16px 16px;
    }

    .mission-card h3 {
        font-size: 24px;
        line-height: 150%;
    }

    .mission-desc {
        font-size: 16px;
        line-height: 26px;
    }

    /* Philosophy Section Mobile */
    .philosophy-section {
        padding: 30px 16px;
        gap: clamp(40px, 11.1vw, 100px);
    }

    .ph-card-wrap {
        width: clamp(328px, 91.11vw, 800px);
        height: clamp(334px, 92.77vw, 815px);
        border-radius: 16px;
        margin: 0 auto;
        padding: clamp(24px, 6.6vw, 50px) clamp(20px, 5.55vw, 40px);
    }

    .ph-card {
        padding: 0;
    }

    .ph-card h3 {
        font-size: 16px;
        line-height: 160%;
        color: #1B1B1B;
        margin: 0;
    }

    .ph-card.active h3 {
        color: #F27100;
    }

    .ph-card p {
        display: none;
    }

    .ph-center-graphic {
        width: clamp(220px, 66vw, 440px);
        height: clamp(220px, 66vw, 440px);
    }

    #ph-torus-canvas {
        width: 100%;
        height: 100%;
    }

    /* Philosophy Detail Mobile */
    .philosophy-detail-section {
        padding: 40px 16px;
    }

    .ph-detail-container {
        gap: 30px;
    }

    .ph-detail-item {
        gap: 0;
    }

    .ph-divider {
        display: none;
    }

    .ph-detail-item:not(:first-child) {
        border-top: 1px solid #E9E9E9;
        padding-top: 20px;
    }

    .ph-detail-content {
        flex-direction: column-reverse;
        gap: 20px;
    }

    .ph-detail-txt {
        padding-top: 6px;
        gap: 20px;
    }

    .ph-detail-title {
        font-size: 24px;
        line-height: 150%;
    }

    .ph-detail-motto {
        font-size: 18px;
        font-weight: 700;
        line-height: 160%;
        height: auto;
    }

    .ph-detail-item:nth-child(1) .ph-detail-motto,
    .ph-detail-item:nth-child(2) .ph-detail-motto,
    .ph-detail-item:nth-child(4) .ph-detail-motto {}

    .ph-detail-item:nth-child(1) .ph-detail-desc,
    .ph-detail-item:nth-child(2) .ph-detail-desc,
    .ph-detail-item:nth-child(4) .ph-detail-desc {}

    .ph-detail-item:nth-child(3) .ph-detail-motto {}

    .ph-detail-desc {
        font-size: 16px;
        line-height: 160%;
        height: auto;
    }

    .ph-detail-item:nth-child(3) .ph-detail-desc {}

    .ph-detail-desc-group {
        gap: 8px;
    }

    .ph-detail-footnote {
        flex-direction: column;
        gap: 4px;
    }

    .ph-detail-footnote p {
        font-size: 16px;
    }

    .ph-detail-img {
        width: 100%;
        height: 189px;
        aspect-ratio: unset;
    }

    .ph-detail-img img {
        border-radius: 16px;
    }

    /* Core Values Mobile */
    .core-values-section {
        padding: var(--section-padding-y) var(--section-padding-x);
        gap: clamp(8px, 2.22vw, 50px);
    }

    .values-top {
        height: 29px;
    }

    .values-label {
        font-size: clamp(18px, 5vw, 24px);
    }

    .values-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(10px, 2vw, 20px);
        width: 100%;
        max-width: none;
        margin: 10px auto 0;
    }

    .value-card {
        width: 100%;
        height: auto;
        min-height: 182.06px;
        padding: clamp(16px, 3vw, 24px);
        gap: clamp(16px, 3vw, 24px);
        border-radius: 16px;
        background: #FFFFFF;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .value-icon {
        width: 42px;
        height: 42px;
    }

    .value-icon img {
        width: 42px;
        height: 42px;
        display: block;
    }

    .circle-outer {
        width: 30px;
        height: 30px;
        background: #F27100;
    }

    .circle-inner {
        background: #FFFFFF;
    }

    .ci-32 {
        width: 15px;
        height: 15px;
    }

    .ci-24 {
        width: 12px;
        height: 12px;
    }

    .ci-16 {
        width: 8px;
        height: 8px;
    }

    .ci-8 {
        width: 4px;
        height: 4px;
    }

    .value-txt {
        display: flex;
        flex-direction: column;
        gap: 8.06px;
        width: 100%;
    }

    .value-txt h3 {
        font-size: 24px;
    }

    .value-txt p {
        font-size: 14px;
    }
}

/* ── 태블릿: PC에서 30px인 border-radius를 20px로 ── */
@media (min-width: 768px) and (max-width: 1439px) {
    /* 스크롤 인터렉션 히어로 텍스트 — 사회경영과 동일 (24px/700/1.4) */
    .hero-text-section h2 { font-size: clamp(24px, 3.125vw, 60px); }

    /* 인트로 간격 — 환경경영 기준 통일 (텍스트 위 100 / 아래는 이미지섹션 top 60으로 유지) */
    .hero-text-section { padding-top: 100px; }

    .ph-card-wrap,
    .value-card,
    .value-card.revealed,
    .acc-content-box,
    .ps-toggle-btn,
    .mono-card-half,
    .mono-card-full,
    .logo-usage-card,
    .logo-margin-card,
    .hero,
    .mcard,
    .gallery-img,
    .value-img {
        border-radius: 20px !important;
    }
}