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

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

.mo-only {
    display: none;
}

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

.hero-text-inner {
    position: sticky;
    top: 100px;
    background: #fff;
    z-index: 10;
}

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

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

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

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

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

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

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

.fcards-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 24px;
    max-width: 1436px;
    width: 100%;
    height: 540px;
}

.fcard {
    position: relative;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

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

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

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

.fcard-premium .bg-main {
    position: absolute;
    width: 100%;
    height: 460px;
    left: 0;
    top: 0;
    background: #185235;
    border-radius: 30px 30px 0px 0px;
    z-index: 1;
}

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

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

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

.fcard-premium .title-text {
    color: #FFFFFF;
    top: 183px;
}

/* 2. Stable Card */
.fcard-stable {
    max-width: 460px;
    height: 540px;
    background: #F27100;
    border-radius: 30px;
}

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

.fcard-stable .title-text {
    color: #FFFFFF;
    top: 396px;
}

/* 3. Next-Gen Card */
.fcard-nextgen {
    max-width: 460px;
    height: 540px;
    background: #F1F3F7;
    border-radius: 30px;
}

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

.fcard-nextgen .title-text {
    color: #000000;
    top: 396px;
}

/* ===== Product Tabs 최적화 ===== */
/* ===== 하단 플로팅 제품 네비게이션 ===== */
.product-tabs {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    gap: 4px;
    width: fit-content;
    height: 78px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    z-index: 999;
    box-sizing: border-box;
}

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

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

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

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

.pi-top-wrapper {
    display: flex;
    gap: 100px;
    align-items: flex-start;
    width: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.pi-right {
    flex: 1;
    max-width: 100%;
    max-width: 828px;
    min-width: 0;
    height: 720px;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9E9E9E;
    font-size: 16px;
}

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

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

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

.acc-item {
    width: 100%;
}

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

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

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

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

.acc-title {
    font-size: clamp(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 {
    width: 100%;
    background: #FFFFFF;
    padding: var(--section-padding-y) 0;
    /* 위아래 여백으로 자연스럽게 높이 확보 */
}

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

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

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

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

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

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

/* 아이콘 공통 및 좌우 반전(Soft) */
.umi-icon {
    width: 26px;
    height: 53px;
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
    transform: scaleX(1);
    /* 좌우 반전 */
}

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

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

.umi-title {
    font-size: clamp(24px, 2.29vw, 44px);
    font-weight: 700;
    line-height: 150%;
    color: #A7A7A7;
    transition: color 0.3s;
}

.usage-menu-item.active .umi-title {
    color: #1B1B1B;
}

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

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

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

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

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

.utc-video {
    width: 100%;
    height: 494px;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
}

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

.utc-video-bg {
    width: 100%;
    height: 494px;
    border-radius: 30px;
    background-size: cover;
    background-position: center;
}

.utc-parts {
    display: flex;
    gap: 9px;
    justify-content: center;
}

.utc-part-box {
    width: 135px;
    height: 135px;
    background: #ECEDF0;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.utc-part-box img {
    width: 94px;
    height: 94px;
    object-fit: contain;
}

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

.utc-footer-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
    margin-top: 2px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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







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

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

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

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

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

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

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



    .hero-text-outer {
        min-height: 200vh;
        padding-bottom: 46px;
    }

    .hero-text-inner {
        top: 72px;
    }

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

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

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

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

    .fcard-premium,
    .fcard-stable,
    .fcard-nextgen {
        width: 100%;
        max-width: 100%;
        height: 156px;
        border-radius: 16px;
        flex: none;
    }

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

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

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

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

    .fcard-premium .label-text {
        left: 16px;
        top: 16px;
        font-size: 16px;
        line-height: 1.6;
        font-weight: 400;
        width: auto;
    }

    .fcard-premium .title-text {
        left: 16px;
        top: 98px;
        bottom: auto;
        font-size: 30px;
        line-height: 1.4;
    }

    /* 카드2, 카드3: flex 전환 */
    .fcard-stable,
    .fcard-nextgen {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 16px;
        gap: 30px;
        box-sizing: border-box;
    }

    .fcard-stable .label-text,
    .fcard-nextgen .label-text {
        position: relative;
        left: auto;
        top: auto;
        font-size: 16px;
        line-height: 1.6;
        font-weight: 400;
        width: auto;
        max-width: 100%;
        margin: 0;
    }

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

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

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

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

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

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

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

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

    .pi-left {
        display: contents;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .acc-item {
        width: 100%;
    }

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

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

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

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

    .acc-body {
        width: 100%;
    }

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

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

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

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

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

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

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

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

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

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

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

    .spec-ann-sub-header-row {
        width: 448px;
        height: 50px;
    }

    .spec-ann-sub-head {
        width: 149.33px;
        height: 50px;
        box-sizing: border-box;
        flex: none;
    }

    .spec-ann-value-row {
        width: 448px;
        height: 90px;
    }

    .spec-ann-sub-value {
        width: 149.33px;
        height: 90px;
        box-sizing: border-box;
        flex: none;
    }

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

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

    .scroll-thumb {
        position: absolute;
        width: 164px;
        height: 0px;
        left: 2px;
        top: 15px;
        border: 2px solid #D3D3D3;
    }

    .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 clamp(16px, 3vw, 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) {



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







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

/* =========================================================================
   실시간 주가 섹션
   ========================================================================= */
.stock-realtime-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--section-padding-y) var(--section-padding-x);
    gap: clamp(30px, 2.08vw, 40px);
    width: 100%;
    max-width: 1920px;
    background: #FFFFFF;
    margin: 0 auto;
    box-sizing: border-box;
    z-index: 2;
}

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

.stock-rt-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;
    width: 100%;
}

/* 주가 영역 */
.stock-price-block {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: clamp(0px, 2.08vw, 40px) clamp(10px, 1.56vw, 30px);
    gap: 20px;
    width: 100%;
    border-radius: clamp(16px, 1.56vw, 30px);
    box-sizing: border-box;
    background: #FFFFFF;
}

.stock-pb-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    /* Vertical padding removed */
    gap: 10px;
    height: auto;
    box-sizing: border-box;
}

.stock-pb-name {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 1.25vw, 24px);
    line-height: 150%;
    color: #363636;
}

.stock-pb-code {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: clamp(4px, 0.31vw, 6px) clamp(8px, 0.625vw, 12px);
    gap: 10px;
    border: 1px solid #F27100;
    border-radius: 6px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: clamp(16px, 1.04vw, 20px);
    line-height: 24px;
    color: #F27100;
    box-sizing: border-box;
}

.stock-pb-info-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    align-self: stretch;
    padding: 0px;
    width: 100%;
}

.stock-pb-price {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    padding: 0px;
    gap: 45px;
    width: 100%;
    flex: none;
    order: 1;
    flex-grow: 0;
}

.stock-pb-price-wrap {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    padding: 0px;
    gap: clamp(8px, 0.73vw, 14px);
    width: auto;
    height: auto;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.stock-pb-price-num {
    width: auto;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(40px, 4.16vw, 80px);
    line-height: 140%;
    color: #000000;
    display: flex;
    align-items: center;
}

.stock-pb-currency {
    width: auto;
    height: auto;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 1.35vw, 26px);
    line-height: 150%;
    color: #363636;
    display: flex;
    align-items: baseline;
}

.stock-pb-bot {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 0px 6px;
    gap: 20px;
    width: auto;
    height: 66px;
    flex: none;
    order: 1;
    flex-grow: 0;
}

.stock-pb-rate-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;
    width: auto;
    height: 60px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.stock-pb-diff-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;
    width: auto;
    height: 60px;
    flex: none;
    order: 2;
    flex-grow: 0;
}

.stock-pb-rate-group .stock-pb-label-wrap {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 2px 0px;
    gap: 10px;
    height: 36px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.stock-pb-diff-group .stock-pb-label-wrap {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 2px 0px;
    gap: 10px;
    height: 36px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.stock-pb-label {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 500;
    font-size: clamp(16px, 1.04vw, 20px);
    line-height: 160%;
    color: #7A7A7A;
}

.stock-pb-rate-group .stock-pb-val-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 6px; /* 검수 0727(Figma): 화살표↔숫자↔% 6px (누락돼 있던 것) */
    height: 60px;
    flex: none;
    order: 1;
    flex-grow: 0;
}

.stock-pb-diff-group .stock-pb-val-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 6px;
    width: auto;
    height: 60px;
    flex: none;
    order: 1;
    flex-grow: 1;
}

.stock-pb-icon {
    width: 16px;
    height: 12px;
    object-fit: contain;
    padding-top: 4px;
    padding-bottom: 7px;
    box-sizing: content-box;
}

.stock-pb-rate-group .stock-pb-val-red {
    width: auto; /* 검수 0727(Figma): 고정폭 제거 → 숫자~% 간격이 gap(6)만 남게 */
    height: 45px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 150%;
    color: #F64301;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.stock-pb-diff-group .stock-pb-val-red {
    width: auto; /* 검수 0727(Figma): 고정폭 제거 */
    height: 45px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 150%;
    color: #F64301;
    display: flex;
    align-items: center;
}

.stock-pb-percent {
    width: 20px;
    height: 30px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 150%;
    color: #F64301;
    display: flex;
    align-items: flex-end;
}

.stock-pb-divider-v {
    display: flex;
    align-items: center;
    justify-content: center;
}

.stock-pb-divider-v svg {
    width: 1px;
    height: 20px;
}

/* .stock-mc-block merged into .stock-price-block - restoring desktop styles for the info part */
.stock-mc-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 20px;
    width: 360px;
    height: 207px;
    border-radius: 30px;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

.stock-mc-inner {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 2px 0px;
    gap: 20px;
    width: 293px;
    height: 207px;
    flex: none;
    order: 0;
    flex-grow: 1;
}

.stock-mc-label {
    width: auto;
    height: auto;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 160%;
    color: #4E4E4E;
}

.stock-mc-val-wrap {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    padding: 0px;
    gap: clamp(8px, 0.73vw, 14px);
    width: auto;
    height: auto;
}

.stock-mc-price {
    width: auto;
    height: auto;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(36px, 3.125vw, 60px);
    line-height: 140%;
    color: #000000;
}

.stock-mc-currency {
    width: auto;
    height: auto;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 1.35vw, 26px);
    line-height: 150%;
    color: #363636;
}

/* 당일 거래 지표&추가 투자 정보 */
.stock-info-board {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px clamp(20px, 1.56vw, 30px);
    gap: 30px;
    width: 100%;
    background: #F8F9FB;
    border-radius: clamp(16px, 1.56vw, 30px);
    box-sizing: border-box;
}

.stock-daily-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    min-width: 900px;
}

.stock-daily-table th,
.stock-daily-table td {
    height: clamp(60px, 5.21vw, 100px);
    box-sizing: border-box;
    padding: clamp(12px, 1.25vw, 18px) clamp(16px, 1.25vw, 24px);
}

.stock-daily-table thead th {
    background: #F8F9FB;
    border-top: 1px solid #000000;
    font-family: 'Pretendard', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: clamp(18px, 1.25vw, 24px);
    line-height: 150%;
    color: #363636;
    text-align: center;
    vertical-align: middle;
}

.stock-daily-table th:nth-child(1) {
    width: 18%;
    text-align: left;
}

.stock-daily-table tbody td:nth-child(1) {
    text-align: left;
}

.stock-daily-table tbody td {
    background: #FFFFFF;
    border-top: 1px solid #D3D3D3;
    border-right: 1px solid #D3D3D3;
    font-family: 'Pretendard', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: clamp(16px, 1.04vw, 20px);
    line-height: 160%;
    color: #363636;
    text-align: center;
    vertical-align: middle;
}

.stock-daily-table tbody td:last-child {
    border-right: none;
}

@media (min-width: 768px) and (max-width: 1439px) {
    .stock-info-board {
        width: min(100%, calc(100vw - 40px));
        margin-left: auto;
        margin-right: auto;
        padding: 20px clamp(12px, 1.5vw, 24px);
        gap: 20px;
    }

    .stock-ib-items {
        gap: clamp(8px, 1vw, 20px);
    }

    .stock-ib-item {
        flex: 1 1 0;
        min-width: 0;
    }

    .stock-ib-label {
        font-size: clamp(10px, 1.3vw, 18px);
        white-space: nowrap;
    }

    .stock-ib-val {
        font-size: clamp(14px, 1.8vw, 30px);
    }

    .stock-ib-val-group {
        gap: 2px;
    }

    .stock-ib-divider {
        height: 80px;
    }
}

@media (min-width: 768px) and (max-width: 1439px) {
    .stock-pb-info-wrap {
        flex: 1 1 auto;
        min-width: 0;
    }

    .stock-pb-price {
        flex-wrap: wrap;
        gap: clamp(16px, 2vw, 32px);
    }

    .stock-pb-price-wrap {
        width: auto;
        min-width: 0;
        flex: 0 0 auto;
    }

    .stock-pb-bot {
        flex: 1 1 320px;
        min-width: 0;
        width: auto;
        height: auto;
        padding-bottom: 0;
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .stock-pb-label {
        font-size: clamp(14px, 1.3vw, 20px);
    }

    .stock-pb-rate-group .stock-pb-val-red,
    .stock-pb-diff-group .stock-pb-val-red {
        font-size: clamp(22px, 2.2vw, 30px);
        width: auto;
    }

    .stock-pb-percent {
        font-size: clamp(16px, 1.5vw, 20px);
        width: auto;
    }

    .stock-pb-rate-group .stock-pb-val-wrap,
    .stock-pb-diff-group .stock-pb-val-wrap {
        height: auto;
    }

    .stock-pb-rate-group,
    .stock-pb-diff-group {
        height: auto;
    }

    .stock-pb-icon {
        padding-top: 0;
        padding-bottom: 0;
        align-self: center;
    }

    .stock-mc-info {
        width: clamp(260px, 18vw, 360px);
        flex: 0 0 clamp(260px, 18vw, 360px);
    }
}

.stock-ib-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    width: 100%;
    border-radius: clamp(16px, 1.56vw, 30px);
    box-sizing: border-box;
}

.stock-ib-items {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: clamp(15px, 1.56vw, 30px);
    width: 100%;
}

.stock-ib-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0px;
    width: 100%;
}

.stock-ib-label {
    font-family: 'Pretendard', sans-serif;
    text-align: center;
    display: flex;
    justify-content: flex-start;
}

.stock-ib-val-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: clamp(4px, 0.42vw, 8px) 0px;
    gap: 4px;
    width: 100%;
}

.stock-ib-val {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(24px, 1.875vw, 36px);
    line-height: 150%;
    color: #1B1B1B;
}

.stock-ib-val.val-red {
    color: #F64301;
}

.stock-ib-val.val-blue {
    color: #2063F3;
}

.stock-ib-val-split {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.stock-ib-slash {
    width: 2px;
    height: 36.47px;
    background: #7A7A7A;
    transform: rotate(19.76deg);
}

.stock-ib-divider {
    width: 1px;
    height: 119px;
    background: #D3D3D3;
    flex: 0 0 1px; /* 검수 0727: 사파리 flex에서 1px 구분선이 0으로 축소돼 안 보이던 것 방지 */
}

.stock-ib-divider.m-only {
    display: none;
}

@media (min-width: 768px) and (max-width: 1439px) {
    .stock-ib-items {
        gap: clamp(8px, 1vw, 20px);
    }

    .stock-ib-item {
        flex: 1 1 0;
        min-width: 0;
    }

    .stock-ib-label {
        font-size: clamp(14px, 1.3vw, 18px);
        white-space: nowrap;
    }

    .stock-ib-val {
        font-size: clamp(22px, 1.8vw, 30px);
    }

    .stock-ib-val-group {
        gap: 2px;
    }

    .stock-ib-divider {
        height: 80px;
    }
}

/* 일자별 주가 영역 */
.stock-daily-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--section-padding-y) var(--section-padding-x);
    gap: clamp(30px, 2.08vw, 40px);
    width: 100%;
    max-width: 1920px;
    background: #FFFFFF;
    box-sizing: border-box;
    margin: 0 auto;
}

.stock-daily-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: clamp(30px, 2.08vw, 40px);
    width: 100%;
}

.stock-daily-title-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 20px;
    width: 228px;
    height: 70px;
}

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

.stock-table-wrap {
    width: 100%;
    border-bottom: 1px solid #000000;
    overflow-x: auto;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.stock-table-wrap::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari and Opera */
}

.stock-daily-table tbody td:last-child {
    border-right: none;
}

.table-val-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.table-icon {
    width: 20px;
    height: 16px;
    object-fit: contain;
}

.table-val-up {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 1.04vw, 24px);
    line-height: 150%;
    color: #F64301;
}

.table-val-down {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 1.04vw, 24px);
    line-height: 150%;
    color: #2063F3;
}

@media (min-width: 768px) and (max-width: 1439px) {
    .stock-daily-section {
        padding: 40px var(--section-padding-x);
    }
}

/* =========================================================================
   모바일 반응형 (360px) - 주가현황
   ========================================================================= */
@media (max-width: 767px) {

    /* ── 실시간 주가 섹션 ── */
    .stock-realtime-section {
        width: 100%;
        height: auto;
        padding: 40px 16px;
        gap: 30px;
    }

    .stock-rt-title {
        width: 100%;
        height: 42px;
        font-size: 24px; /* 검수0729 30→24 */
        line-height: 140%;
    }

    /* 카드: 세로 스택으로 전환 */
    .stock-rt-card {
        flex-direction: column;
        width: 100%;
        height: auto;
        gap: 0;
        /* Gap will be managed by individual block margins/dividers */
    }

    /* 주가 + 시가총액 통합 블록 */
    .stock-price-block {
        width: 100%;
        height: auto;
        padding: 0px 10px 0px;
        display: flex;
        flex-direction: column;
        gap: 0;
        border-radius: 16px;
    }

    .stock-pb-info-wrap {
        width: 100%;
        height: auto;
    }

    .stock-pb-divider-h {
        display: block;
        width: 100%;
        height: 1px;
        background: #E9E9E9;
        margin: 16px 0;
    }

    .stock-mc-info {
        width: 100%;
        height: auto;
        padding: 0px;
        gap: 12px;
        border-radius: 16px;
        margin-top: 0;
    }

    /* 상단 (종목명 + 코드) */
    .stock-pb-top {
        height: 29px;
        gap: 10px;
        padding: 0;
    }

    .stock-pb-name {
        font-size: 18px;
        line-height: 160%;
    }

    .stock-pb-code {
        padding: 2px 8px;
        border-radius: 3.87px;
        font-size: 14px;
        line-height: 150%;
    }

    /* info-wrap: 세로 쌓기 */
    .stock-pb-info-wrap {
        width: 100%;
        height: auto;
        justify-content: flex-start;
        align-self: auto;
    }

    /* 가격 + 등락률 행 */
    .stock-pb-price {
        flex-direction: column;
        height: auto;
        gap: 0;
        width: 100%;
    }

    .stock-pb-price-wrap {
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        width: auto;
        height: 54px; /* 검수 0730: 모바일 현재가 영역 높이 54 고정 */
        gap: 10px; /* 검수 0724: 현재가 숫자~원 간격 10px */
    }

    .stock-pb-price-num {
        width: auto;
        height: auto;
        font-size: 36px; /* 검수 0724: 현재가 숫자 36px */
        line-height: 140%;
        display: flex;
        align-items: center;
    }

    .stock-pb-currency {
        width: auto;
        height: auto;
        font-size: 18px; /* 검수 0724: '원' 18px */
        line-height: 150%;
        display: flex;
        align-self: flex-start;
        margin-top: 20px;
    }

    /* 등락률 / 전일대비 행 */
    .stock-pb-bot {
        height: 40px; /* 검수(0720): 등락률/전일대비 영역 높이 40px */
        padding: 0;
        gap: 10px;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
    }

    .stock-daily-scroll-wrap {
        display: block;
        width: 100%;
        height: 16px;
        margin: 0 auto;
        position: relative;
    }

    .stock-pb-rate-group,
    .stock-pb-diff-group {
        width: auto;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .stock-pb-label-wrap {
        font-size: 16px;
        width: auto;
        min-width: auto;
        height: auto;
        padding: 0;
    }

    .stock-pb-label {
        font-size: 16px;
    }

    .stock-pb-rate-group .stock-pb-val-wrap,
    .stock-pb-diff-group .stock-pb-val-wrap {
        gap: 6px;
        width: auto;
        min-width: auto;
        height: auto;      /* 고정높이 제거 → 컨테이너(40px)에서 center 정렬 */
        padding: 0;
        align-items: center;
    }

    .stock-pb-rate-group .stock-pb-val-red,
    .stock-pb-diff-group .stock-pb-val-red {
        font-size: 20px;
        line-height: 1;
        width: auto;
        height: auto;
    }

    .stock-pb-percent {
        font-size: 18px;
        height: auto;          /* base 30px 제거 */
        align-items: center;   /* base flex-end 제거 → 세로 중앙 */
        line-height: 1;
    }

    .stock-pb-icon {
        width: 16px;
        height: 12px;
        padding: 0;            /* base padding-top:4/bottom:7 제거 → 세로 중앙 */
    }

    /* 시가총액 블록 */
    .stock-mc-block {
        width: 100%;
        height: auto;
        padding: 0px;
        gap: 12px;
        border-radius: 16px;
    }

    .stock-mc-inner {
        width: auto;
        height: auto;
        gap: 0;
        padding: 0;
    }

    .stock-mc-label {
        width: auto;
        height: 29px;
        font-size: 18px;
        line-height: 160%;
        color: #4E4E4E;
    }

    .stock-mc-val-wrap {
        width: auto;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        gap: 10px; /* 검수 0724: 시가총액 숫자~억원 간격 10px */
    }

    .stock-mc-price {
        width: auto;
        height: auto;
        font-size: 30px; /* 검수 0724: 시가총액 숫자 30px */
        line-height: 150%;
    }

    .stock-mc-currency {
        width: auto;
        height: auto;
        font-size: 18px; /* 검수 0724: '억 원' 18px */
        line-height: 150%;
        display: flex;
        align-self: flex-start;
        margin-top: 16px;
    }

    /* 당일 거래 지표 + 추가 투자정보 블록 (세로 목록) */
    .stock-info-board {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 12px 20px;
        height: auto;
        background: #F8F9FB;
        border-radius: 16px;
        gap: 0;
        box-sizing: border-box;
        margin: 0 auto;
    }

    .stock-ib-row,
    .stock-ib-items {
        display: contents;
        /* Flatten structure for column layout */
    }

    .stock-ib-item {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0px; /* 검수(0720): 표 항목 상하 패딩 12px */
        width: 288px;
        height: 62px;
        box-sizing: border-box;
        border-bottom: 1px solid #E9E9E9;
    }

    .stock-ib-item.item-stacked {
        height: 91px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 3px;
    }

    .stock-ib-item.item-stacked .stock-ib-val-group {
        width: 100%;
        height: 30px;
        padding: 0;
        justify-content: flex-end;
    }

    /* Last item of the whole board should not have a border */
    .stock-ib-row:last-child .stock-ib-item:last-child {
        border-bottom: none;
    }

    .stock-ib-divider,
    .stock-ib-divider.m-only {
        display: none;
    }

    .stock-ib-label {
        font-size: 16px;
        line-height: 160%;
        color: #4E4E4E;
        font-weight: 400;
        width: auto;
    }

    .stock-ib-val-group {
        width: auto;
        height: 30px;
        padding: 0;
        gap: 4px;
        display: flex;
        align-items: center;
    }

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

    .stock-ib-val.val-red {
        color: #F64301;
    }

    .stock-ib-val.val-blue {
        color: #2063F3;
    }

    .stock-ib-divider {
        display: none;
    }

    .stock-ib-slash {
        height: 17.15px;
        width: 1.5px;
    }

    /* ── 일자별 주가 섹션 ── */
    .stock-daily-section {
        width: 100%;
        height: auto;
        padding: 40px 16px;
        gap: 20px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .stock-daily-inner {
        width: 100%;
        height: auto;
        gap: 0px;
    }

    .stock-daily-title-wrap {
        width: 100%;
        height: 42px;
        margin-bottom: 20px;
    }

    .stock-daily-title {
        font-size: 24px; /* 검수0729 30→24 */
        line-height: 140%;
    }

    /* 테이블: 가로 스크롤 */
    .stock-table-wrap {
        width: 100%;
        height: auto;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-bottom: 1px solid #000000;
    }

    .stock-daily-table {
        width: 1161px;
        table-layout: fixed;
    }

    .stock-daily-table th,
    .stock-daily-table td {
        height: 70px;
        padding: 16px;
    }

    .stock-daily-table thead th {
        font-size: 16px;
        line-height: 160%;
    }

    .stock-daily-table th:nth-child(1) {
        width: 207px;
        text-align: left;
    }

    .stock-daily-table tbody td:nth-child(1) {
        text-align: left;
    }

    .stock-daily-table th:nth-child(2) {
        width: 136px;
    }

    .stock-daily-table th:nth-child(3) {
        width: 136px;
    }

    .stock-daily-table th:nth-child(4) {
        width: 137px;
    }

    .stock-daily-table th:nth-child(5) {
        width: 136px;
    }

    .stock-daily-table th:nth-child(6) {
        width: 136px;
    }

    .stock-daily-table th:nth-child(7) {
        width: 136px;
    }

    .stock-daily-table th:nth-child(8) {
        width: 137px;
    }

    .stock-daily-table tbody td {
        font-size: 16px;
        line-height: 160%;
    }

    .table-icon {
        width: 16px;
        height: 12px;
    }

    .table-val-up,
    .table-val-down {
        font-size: 16px;
        line-height: 160%;
    }
}

/* ── 커스텀 스크롤바 (모바일 전용) ── */
@media (max-width: 1439px) {
    .stock-daily-scroll-wrap {
        display: block;
        width: 100%;
        height: 16px;
        margin: 0 auto;
        position: relative;
    }

    .stock-daily-scroll-track {
        position: absolute;
        width: calc(100% - 4px);
        height: 4px;
        left: 2px;
        top: 6px;
        background: rgba(211, 211, 211, 0.3);
        border-radius: 2px;
    }

    .stock-daily-scroll-thumb {
        position: absolute;
        width: 50%;
        height: 4px;
        left: 2px;
        top: 6px;
        background: #D3D3D3;
        border-radius: 2px;
        transition: left 0.1s ease-out;
    }
}

@media (max-width: 767px) {
    .stock-table-wrap::-webkit-scrollbar {
        display: none;
    }

    /* Custom scrollbar styles moved to 1919px query above */
}

/* ===== 주주환원 (Shareholder Return) ===== */

.dividend-policy-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--section-padding-y) var(--section-padding-x);
    gap: 40px;
    width: 100%;
    max-width: 1920px;
    background: #FFFFFF;
    margin: 0 auto;
    box-sizing: border-box;
}

.dividend-policy-title {
    width: auto;
    height: 70px;
    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;
    margin: 0;
}

.dividend-policy-desc {
    width: 100%;
    max-width: 1407px;
    height: 105px;
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-size: clamp(16px, 1.15vw, 22px);
    line-height: 160%;
    display: block;
    color: #4E4E4E;
    margin: 0;
}

.dividend-status-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--section-padding-y) var(--section-padding-x);
    gap: 40px;
    width: 100%;
    max-width: 1920px;
    background: #FFFFFF;
    margin: 0 auto;
    box-sizing: border-box;
}

.dividend-status-title {
    width: auto;
    height: 70px;
    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;
    margin: 0;
}

.dividend-table-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dividend-table-wrap {
    width: 100%;
    height: auto;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.dividend-table-wrap::-webkit-scrollbar {
    display: none;
}

/* 커스텀 스크롤바 — 기본 숨김, JS에서 오버플로우 감지 시 .has-scroll 추가 */
.dividend-scroll-wrap {
    display: none;
    width: 100%;
    height: 16px;
    margin: 0 auto;
    position: relative;
}

.dividend-scroll-wrap.has-scroll {
    display: block;
}

.dividend-scroll-track {
    position: absolute;
    width: calc(100% - 4px);
    height: 4px;
    left: 2px;
    top: 6px;
    background: rgba(211, 211, 211, 0.3);
    border-radius: 2px;
}

.dividend-scroll-thumb {
    position: absolute;
    width: 50%;
    height: 4px;
    left: 2px;
    top: 6px;
    background: #D3D3D3;
    border-radius: 2px;
    transition: left 0.1s ease-out;
}

.dividend-table {
    width: 100%;
    border-collapse: collapse;
    border-bottom: 1px solid #000000;
    table-layout: auto;
}

.dividend-table th {
    box-sizing: border-box;
    height: auto;
    background: #F8F9FB;
    border-top: 1px solid #000000;
    padding: clamp(18px, 1.67vw, 32px) clamp(16px, 1.25vw, 24px);
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: clamp(18px, 1.25vw, 24px);
    line-height: 150%;
    color: #363636;
    text-align: center;
    white-space: nowrap;
}

/* 첫 번째 열 (구분) */
.dividend-table th:first-child,
.dividend-table td:first-child {
    text-align: left;
    white-space: nowrap;
}

.dividend-table td {
    box-sizing: border-box;
    height: auto;
    background: #FFFFFF;
    border-top: 1px solid #D3D3D3;
    border-right: 1px solid #D3D3D3;
    padding: clamp(18px, 1.77vw, 34px) clamp(16px, 1.25vw, 24px);
    font-family: 'Pretendard';
    font-weight: 400;
    font-size: clamp(16px, 1.04vw, 20px);
    line-height: 160%;
    color: #363636;
    text-align: center;
    white-space: nowrap;
}

.dividend-table td:last-child {
    border-right: none;
}

.dividend-caption {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 20px 0px;
    gap: 8px;
    width: 100%;
    height: auto;
}

.caption-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
}

.caption-dot {
    width: 10px;
    font-family: 'Pretendard';
    font-size: clamp(14px, 1.04vw, 20px);
    line-height: 160%;
    color: #363636;
}

.caption-text {
    flex: 1;
    font-family: 'Pretendard';
    font-weight: 400;
    font-size: clamp(14px, 1.04vw, 20px);
    line-height: 160%;
    color: #363636;
    margin: 0;
}

.caption-text.gray {
    color: #4E4E4E;
}

/* 모바일 대응 (간략하게 우선 추가) */
@media (max-width: 767px) {

    .dividend-policy-section,
    .dividend-status-section {
        padding: 40px 16px;
        height: auto;
        width: 100%;
        gap: 20px;
    }

    .dividend-policy-desc,
    .dividend-table-wrap,
    .dividend-table,
    .dividend-caption {
        width: 100%;
    }

    .dividend-policy-title {
        font-size: 24px; /* 검수0729 30→24 */
        height: 40px;
    }

    .dividend-status-title {
        font-size: 24px; /* 검수0729 30→24 */
        height: 40px;
    }

    .dividend-policy-desc {
        font-size: 16px;
        height: 182px;
        word-break: keep-all;
    }

    .dividend-table-area {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .dividend-table-wrap {
        width: 100%;
        overflow-x: auto;
    }

    .dividend-table-wrap::-webkit-scrollbar {
        display: none;
    }

    .dividend-table {
        width: 900px;
        border-bottom: 1px solid #000000;
    }

    .dividend-table th {
        width: 150px;
        height: 70px;
        font-size: 16px;
        padding: 16px;
    }

    .dividend-table td {
        width: 150px;
        height: 70px;
        font-size: 16px;
        padding: 16px;
    }

    .dividend-caption {
        width: 100%;
        gap: 8px;
        padding: 12px 0 0;
    }

    .caption-text {
        font-size: 14px;
        line-height: 150%;
    }

    .caption-dot {
        font-size: 14px;
    }

    /* Custom scrollbar styles moved to 1919px query above */
}

/* ===== 주요 투자강점 (Investment Strengths) ===== */

.investment-strengths-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--section-padding-y) var(--section-padding-x);
    gap: 20px;
    width: 100%;
    max-width: 1920px;
    background: #F1F3F7;
    margin: 0 auto;
    box-sizing: border-box;
}

.strengths-title {
    width: 100%;
    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;
    margin: 0;
}

.strengths-cards {
    display: flex;
    flex-direction: row;
    align-items: stretch; /* center에서 stretch로 변경하여 카드 높이 통일 */
    padding: 0px;
    gap: clamp(16px, 1.25vw, 24px);
    width: 100%;
}

.strength-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
    width: auto;
    height: auto;
    background: #FFFFFF;
    border-radius: clamp(16px, 1.56vw, 30px);
    box-sizing: border-box;
    flex: 1;
    min-width: 0;
}

.strength-img-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    width: 100%;
    height: 200px;
    background: #F8F9FB;
    border-radius: clamp(12px, 1.25vw, 24px) clamp(12px, 1.25vw, 24px) 0px 0px;
    flex: none;
    align-self: stretch;
}

.strength-icon {
    width: 88px;
    height: 88px;
    object-fit: contain;
}

.strength-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    gap: 40px;
    width: 100%;
    box-sizing: border-box;
}

.strength-label {
    width: 100%;
    height: auto;
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: clamp(18px, 1.25vw, 24px);
    line-height: 150%;
    color: #4E4E4E;
    margin: 0;
}

.strength-text-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 12px;
    width: 100%;
}

.strength-main-title {
    width: 100%;
    height: auto;
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: clamp(24px, 1.875vw, 36px);
    line-height: 150%;
    color: #000000;
    margin: 0;
}

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

/* 태블릿: 2x2 그리드 */
@media (min-width: 768px) and (max-width: 1439px) {
    .investment-strengths-section {
        padding: 40px var(--section-padding-x);
        height: auto;
        gap: 20px;
    }

    .strengths-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        height: auto;
        gap: 16px;
    }

    .strength-card {
        width: 100%;
        height: auto;
        border-radius: 16px;
    }
}

/* 모바일: 세로 1열 + 아이콘 우상단 */
@media (max-width: 767px) {
    .investment-strengths-section {
        padding: 40px 16px;
        height: auto;
        gap: 20px;
    }

    .strengths-title {
        width: 100%;
        font-size: 24px; /* 검수0729 30→24 */
        height: auto;
    }

    .strengths-cards {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        gap: 16px;
    }

    .strength-card {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        width: 100%;
        height: auto;
        min-height: 189px;
        background: #FFFFFF;
        border-radius: 16px;
        box-sizing: border-box;
    }

    .strength-img-box {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
    }

    .strength-icon {
        width: 50px;
        height: 50px;
    }

    .strength-content {
        flex: 1;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
        padding: 10px 0 0 0;
    }

    .strength-label {
        width: 100%;
        font-family: 'Pretendard';
        font-weight: 700;
        font-size: 18px;
        line-height: 160%;
        color: #4E4E4E;
        margin: 0;
    }

    .strength-text-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .strength-main-title {
        font-family: 'Pretendard';
        font-weight: 700;
        font-size: 20px;
        line-height: 150%;
        color: #000000;
        margin: 0;
        white-space: nowrap;
    }

    .strength-desc {
        font-family: 'Pretendard';
        font-weight: 400;
        font-size: 16px;
        line-height: 160%;
        color: #4E4E4E;
        margin: 0;
    }
}

/* ==========================================================================
   재무정보 - 재무상태표 (Finance Status Section)
   ========================================================================== */

.finance-status-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--section-padding-y) var(--section-padding-x);
    background: #FFFFFF;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}

.fs-content {
    display: flex;
    flex-direction: column;
    gap: clamp(60px, 5.21vw, 100px);
    width: 100%;
}

.fs-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 40px;
    width: 100%;
}

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

.fs-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 0px;
    width: 100%;
}

/* 그래프 영역 */
.fs-graphs {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: clamp(12px, 1.25vw, 24px);
    width: 100%;
    max-width: 1680px;
    height: auto;
    min-height: clamp(328px, 28.125vw, 540px);
}

.fs-graph-box {
    position: relative;
    box-sizing: border-box;
    flex: 1;
    width: auto;
    max-width: 544px;
    min-width: 220px;
    /* Further reduced to prevent overlap */
    height: clamp(328px, 28.125vw, 540px);
    background: #FFFFFF;
    border: clamp(0.6px, 0.05vw, 1px) solid #E9E9E9;
    border-radius: clamp(16px, 1.56vw, 30px);
}

.fs-graph-title {
    position: absolute;
    width: auto;
    left: clamp(16px, 2.08vw, 40px);
    top: clamp(16px, 2.08vw, 40px);
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    font-size: clamp(18px, 1.56vw, 30px);
    line-height: 150%;
    color: #363636;
    margin: 0;
}

.fs-chart-area {
    position: absolute;
    width: calc(100% - clamp(32px, 4.16vw, 80px));
    height: clamp(204px, 21.1vw, 405.27px);
    left: clamp(16px, 2.08vw, 40px);
    top: clamp(75px, 6.98vw, 134px);
}

/* Grid Rows */
.fs-grid-rows {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: clamp(183px, 17.18vw, 330px);
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.fs-chart-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(12px, 1.04vw, 20px);
    width: 100%;
    height: clamp(21px, 1.56vw, 30px);
}

.fs-chart-row span {
    width: clamp(60px, 3.75vw, 72px);
    height: auto;
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 500;
    font-size: clamp(14px, 0.9375vw, 18px);
    line-height: 160%;
    text-align: right;
    color: #D3D3D3;
}

.fs-line {
    flex: 1;
    height: 0;
    border-top: 1px solid #E9E9E9;
}

.fs-line.dark {
    border-top: 1px solid #4E4E4E;
    /* 검수 0727: 0 기준선이 막대(z-index 2)에 가려지지 않게 위로 */
    position: relative;
    z-index: 5;
}

/* Bar Columns Container */
.fs-bar-columns {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0px;
    position: absolute;
    width: calc(100% - clamp(72px, 4.79vw, 92px));
    /* height = fs-grid-rows height - fs-chart-row height */
    height: calc(clamp(183px, 17.18vw, 330px) - clamp(21px, 1.56vw, 30px));
    /* top = fs-chart-row height / 2 */
    left: clamp(72px, 4.79vw, 92px);
    top: calc(clamp(21px, 1.56vw, 30px) / 2);
    padding: 0;
    box-sizing: border-box;
}

.fs-chart-column {
    display: flex;
    flex-direction: column;
    width: 30%;
    height: 100%;
    position: relative;
}

.fs-bar {
    width: clamp(43px, 1.86vw + 36.3px, 72px);
    max-width: 90%;
    border-radius: 8px 8px 0px 0px;
    background: #A7A7A7;
    position: absolute;
    bottom: 0;
    /* Default base line for Balance Sheet */
    left: 50%;
    transform: translateX(-50%);
    /* 검수 0727: 데이터 로드 시 0에서 위로 자라나는 애니메이션 */
    transition: height 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.fs-bar.orange {
    background: #F27100;
    z-index: 2;
}

.fs-bar.gray {
    background: #A7A7A7;
}

/* 0-line at the middle for Income Statement charts (Operating Profit & Net Income only) */
#tab-return .fs-graph-box:nth-child(n+2) .fs-bar {
    bottom: 50%;
    /* Mid-point of grid area */
}

#tab-return .fs-graph-box:nth-child(n+2) .fs-bar.negative {
    bottom: auto;
    top: 50%;
    border-radius: 0px 0px 8px 8px;
}

.fs-year {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 500;
    font-size: clamp(14px, 0.9375vw, 18px);
    line-height: 160%;
    text-align: center;
    color: #7A7A7A;
    /* Changed from #363636 to #7A7A7A per Figma specs */
    position: absolute;
    bottom: clamp(-44px, -2.29vw, -32px);
    /* Adjust below grid */
}

.fs-tooltip {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    width: 132px;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    /* Gap between tooltip arrow and the bar */
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.fs-bar:hover .fs-tooltip,
.fs-bar.orange:hover .fs-tooltip {
    opacity: 1;
    visibility: visible;
}

.fs-tooltip.hidden {
    visibility: hidden;
}

.fs-tooltip-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: clamp(6px, 0.52vw, 10px);
    width: clamp(80px, 6.875vw, 132px);
    height: clamp(34px, 2.91vw, 56px);
    background: #FFFFFF; /* 검수 0727: 말풍선 밝게 — 배경 흰색 */
    border: 1px solid #D3D3D3; /* 라인 #D3D3D3 */
    border-radius: 999px;
    box-sizing: border-box;
}

.fs-tooltip-box span {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    font-size: clamp(14px, 1.25vw, 24px);
    line-height: 150%;
    text-align: center;
    color: #4E4E4E; /* 검수 0727: 말풍선 텍스트 #4E4E4E */
}

/* 검수 0727: 말풍선 꼭지 — 흰 채움 + #D3D3D3 테두리(삼각형 2겹). 뒤=테두리색, 앞=흰색(1px 작게) */
.fs-tooltip-arrow {
    position: relative;
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-top: 14px solid #D3D3D3;
    margin-top: -1px; /* pill 하단 테두리와 살짝 겹쳐 이음새 최소화 */
}

.fs-tooltip-arrow::after {
    content: '';
    position: absolute;
    top: -14px;
    left: -12px;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 13px solid #FFFFFF;
}

@media (max-width: 767px) {

    /* 모바일: 기본 숨김, 탭한 바만 표시 */
    .fs-bar.orange .fs-tooltip {
        opacity: 0;
        visibility: hidden;
    }

    .fs-bar.active .fs-tooltip {
        opacity: 1;
        visibility: visible;
    }
}

.fs-unit {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    max-width: 1680px;
    height: auto;
    padding: 20px 20px 20px 0px;
    box-sizing: border-box;
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-size: clamp(14px, 1.04vw, 20px);
    line-height: 160%;
    color: #7A7A7A;
}

/* 테이블 영역 */
.fs-table-wrap {
    width: 100%;
    border-bottom: 1px solid #000000;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin-top: clamp(20px, 2.08vw, 40px);
}

.fs-table-wrap::-webkit-scrollbar {
    display: none;
}

.fs-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    min-width: 900px;
}

/* 공통 셀 */
.fs-table th,
.fs-table td {
    box-sizing: border-box;
    padding: clamp(12px, 1.83vw, 35px) clamp(16px, 1.25vw, 24px);
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-size: clamp(16px, 1.04vw, 20px);
    line-height: 150%;
    text-align: center;
    vertical-align: middle;
    color: #363636;
    white-space: nowrap;
}

/* 헤더 */
.fs-table thead th {
    border-top: 1px solid #000000;
    font-weight: 700;
}

/* 구분 칼럼 (첫 열) */
.fs-table th:first-child,
.fs-table td:first-child {
    text-align: left;
    width: clamp(180px, 14.58vw, 280px);
}

/* 본문 행 보더 */
.fs-table tbody td {
    border-top: 1px solid #D3D3D3;
    border-right: 1px solid #D3D3D3;
}

.fs-table tbody td:last-child {
    border-right: none;
}

/* 헤더 2025년 주황 */
.fs-table th.highlight-text {
    color: #F27100;
}

/* 합계 행 - 재무상태표 탭 */
#tab-stock .sum-row td:not(.highlight-bg-strong) {
    background: #F8F9FB;
}

/* label (자산총계 등) */
.fs-table td.label {
    font-weight: 700;
    text-align: left;
    padding-left: clamp(12px, 1.25vw, 24px);
}

/* sub-label (유동자산 등 - 들여쓰기) */
.fs-table td.sub-label {
    font-weight: 700;
    text-align: left;
    padding-left: clamp(24px, 1.67vw, 32px);
}

.m-br {
    display: none;
}

/* 하이라이트 배경 */
.fs-table td.highlight-bg-strong {
    background: rgba(252, 227, 204, 0.6);
    font-weight: 700;
}

.fs-table td.highlight-bg-light {
    background: rgba(252, 227, 204, 0.2);
    font-weight: 700;
}

.fs-unit.unit-bottom {
    padding-right: 0;
}

@media (max-width: 1439px) {
    .fs-scroll-wrap {
        display: block;
        width: 100%;
        height: 16px;
        margin: 0 auto;
        position: relative;
    }

    .fs-scroll-track {
        position: absolute;
        width: calc(100% - 4px);
        height: 4px;
        left: 2px;
        top: 6px;
        background: rgba(211, 211, 211, 0.3);
        border-radius: 4px;
    }

    .fs-scroll-thumb {
        position: absolute;
        width: 50%;
        height: 4px;
        left: 2px;
        top: 6px;
        background: #D3D3D3;
        border-radius: 4px;
        transition: left 0.1s ease-out;
    }
}

@media (min-width: 768px) and (max-width: 1439px) {
    .finance-status-section {
        padding: 40px var(--section-padding-x);
    }

    .fs-content {
        gap: clamp(40px, 5vw, 80px);
    }

    .fs-block {
        gap: 24px;
    }

    .fs-graph-box {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
    }
}

/* 투자정보 하위페이지 — 모바일 탭 오버라이드 (탭 2개) */
@media (max-width: 767px) {

    [data-page="stock-info"] .tab-nav,
    [data-page="finance-info"] .tab-nav,
    [data-page="disclosures"] .tab-nav,
    [data-page="ir"] .tab-nav {
        justify-content: center;
    }

    [data-page="stock-info"] .tab-item,
    [data-page="finance-info"] .tab-item,
    [data-page="disclosures"] .tab-item,
    [data-page="ir"] .tab-item {
        flex: none;
        min-width: 120px;
        width: auto;
    }
}

/* ==========================================================================
   재무상태표 모바일 반응형 (360px 기준)
   ========================================================================== */
@media (max-width: 767px) {
    .finance-status-section {
        padding: 40px 16px 16px;
        background: #FFFFFF;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .fs-content {
        gap: 60px;
        /* Reduced from 100px for mobile */
        width: 100%;
        min-width: 0;
    }

    .fs-block {
        gap: 20px;
        width: 100%;
        min-width: 0;
    }

    .fs-title {
        font-size: 24px; /* 검수 0729: 모바일 재무상태표·손익계산서 타이틀 30→24 (Figma 초록 딱지) */
        line-height: 140%;
        height: 42px;
        display: flex;
        align-items: center;
    }

    .fs-body {
        width: 100%;
        min-width: 0;
        gap: 0;
    }

    /* 단위 텍스트 */
    .fs-unit {
        width: 100%;
        height: auto;
        padding: 16px 0px 28px;
        font-size: 14px;
        line-height: 150%;
        justify-content: flex-end;
    }

    /* 그래프 영역 */
    .fs-graphs {
        flex-direction: column;
        gap: 12px;
        width: 100%;
        height: auto;
    }

    .fs-graph-box {
        flex: none;
        width: 100%;
        max-width: none;
        height: clamp(328px, 35.33vw + 200.8px, 540px);
        border: 0.6px solid #E9E9E9;
        border-radius: 16px;
    }

    .fs-graph-title {
        left: 16px;
        top: 16px;
        font-size: 18px;
        line-height: 160%;
        height: 29px;
    }

    .fs-chart-area {
        position: absolute;
        width: calc(100% - 32px);
        left: 16px;
        top: clamp(75px, 9.83vw + 39.6px, 134px);
        bottom: clamp(49px, 3.83vw + 35.2px, 72px);
        height: auto;
    }

    /* Grid Rows */
    .fs-grid-rows {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .fs-chart-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        width: 100%;
        height: 21px;
    }

    .fs-chart-row span {
        width: 60px;
        font-size: 14px;
        line-height: 150%;
        text-align: right;
        color: #D3D3D3;
    }

    .fs-line {
        flex: 1;
        height: 1px;
        background: #E9E9E9;
    }

    .fs-line.dark {
        background: #4E4E4E;
    }

    /* Bar Columns Container */
    .fs-bar-columns {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-evenly;
        gap: 0;
        position: absolute;
        width: calc(100% - 72px);
        height: calc(100% - 21px);
        top: 10.5px;
        left: 72px;
        padding: 0;
        box-sizing: border-box;
    }

    .fs-chart-column {
        display: flex;
        flex-direction: column;
        width: 30%;
        height: 100%;
        position: relative;
    }

    .fs-bar {
        width: clamp(36px, 85%, 72px);
        border-radius: 6px 6px 0px 0px;
        background: #A7A7A7;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    /* 0-line at the middle for Income Statement charts (Operating Profit & Net Income only) */
    #tab-return .fs-graph-box:nth-child(1) .fs-bar {
        bottom: 0 !important;
    }

    #tab-return .fs-graph-box:nth-child(n+2) .fs-bar {
        bottom: 50% !important;
    }

    #tab-return .fs-graph-box:nth-child(n+2) .fs-bar.negative {
        bottom: auto !important;
        top: 50% !important;
        border-radius: 0px 0px 6px 6px;
    }

    .fs-year {
        width: 100%;
        font-size: 14px; /* 14px로 고정 */
        line-height: 150%;
        text-align: center;
        position: absolute;
        bottom: -32px;
        white-space: nowrap;
    }

    .fs-tooltip-arrow {
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 8px solid #111111;
    }



    /* Removed obsolete Tooltip overrides for mobile */
    /* Table */
    .fs-table-wrap {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .fs-table {
        width: 960px;
        height: auto;
    }

    .fs-table-wrap::-webkit-scrollbar {
        display: none;
    }

    .fs-scroll-wrap {
        display: block;
        position: relative;
        width: 100%;
        height: 16px;
    }

    .fs-scroll-track {
        position: absolute;
        width: calc(100% - 4px);
        height: 4px;
        left: 2px;
        top: 6px;
        background: rgba(211, 211, 211, 0.3);
        border-radius: 4px;
    }

    .fs-scroll-thumb {
        position: absolute;
        width: 50%;
        height: 4px;
        left: 2px;
        top: 6px;
        background: #D3D3D3;
        border-radius: 4px;
        transition: left 0.1s ease-out;
    }

    .fs-table-wrap {
        margin-top: 0;
    }

    .fs-table {
        width: 960px;
        height: auto;
    }

    .fs-table th,
    .fs-table td {
        padding: 0 16px; /* 상하 패딩 제거 후 높이로 제어 */
        height: 70px; /* 셀 높이 70px */
        font-size: 16px;
        line-height: 160%;
        box-sizing: border-box;
        vertical-align: middle; /* 수직 중앙 정렬 */
    }

    .fs-table thead th {
        font-size: 16px;
        padding: 12px 16px;
    }

    .fs-table td.label {
        font-size: 16px;
        padding-left: 16px;
    }

    .m-br {
        display: inline;
    }

    .fs-table td.sub-label {
        padding: 16px 16px 16px 30px;
        font-size: 16px;
    }

    /* Mobile scrollbar indicator */
    .fs-scroll-indicator {
        display: block;
        width: 100%;
        height: 16px;
        position: relative;
        margin-top: 8px;
    }

    /* 손익계산서 탭 특정 라벨 줄바꿈 처리 */
    #tab-return .fs-table td.label {
        white-space: normal;
        word-break: keep-all;
        line-height: 1.6; /* 1.3에서 1.6으로 수정 */
        text-align: left;
    }

    #tab-return .m-br {
        display: block !important;
        content: "";
        margin-top: 0;
    }
}

@media (max-width: 767px) {
    .stock-info-board {
        width: min(100%, calc(100vw - 40px));
        margin-left: auto;
        margin-right: auto;
    }

    .stock-ib-item {
        width: 100%;
    }

    .stock-pb-price {
        width: 100%;
    }

    .stock-pb-price-wrap,
    .stock-pb-bot {
        width: 100%;
    }


}

@media (max-width: 767px) {
    .fs-graph-box {
        height: 328px;
    }

    .fs-chart-area {
        left: 12px;
        right: 12px;
        width: auto;
        height: auto;
        bottom: 12px;
        box-sizing: border-box;
    }

    .fs-grid-rows {
        height: calc(100% - 30px);
    }

    .fs-chart-row {
        gap: 8px;
    }

    .fs-chart-row span {
        width: 44px;
        flex-shrink: 0;
        font-size: 14px; /* 12px에서 14px로 수정 */
    }

    .fs-bar-columns {
        justify-content: space-evenly;
        gap: 0;
        left: 52px;
        right: 0;
        width: auto;
        height: calc(100% - 51px);
    }

    .fs-chart-column {
        flex: 1 1 0;
        width: auto;
        min-width: 32px;
        max-width: none;
    }

    .fs-bar {
        width: clamp(43px, 7.13vw + 17.3px, 72px);
    }

    .fs-year {
        font-size: 14px; /* 11px에서 14px로 수정 */
        line-height: 140%;
        bottom: -24px;
    }

    .fs-tooltip-box span {
        font-size: 14px !important; /* 모바일에서 14px 일괄 적용 */
    }
}

.fs-bar:hover {
    z-index: 5 !important;
}

@media (min-width: 1920px) {
    .investment-strengths-section {
        gap: 40px;
    }
}

/* ── 태블릿: border-radius 30px → 20px ── */
@media (min-width: 768px) and (max-width: 1439px) {
    .fcard-premium .bg-main,
    .fcard-stable,
    .fcard-nextgen,
    .acc-content-box,
    .utc-video,
    .utc-video-bg,
    .process-card,
    .ps-progress,
    .mono-card-half,
    .mono-card-full,
    .logo-usage-card,
    .logo-margin-card,
    .hero,
    .mcard,
    .stock-mc-info {
        border-radius: 20px !important;
    }
}