/* ===== 냉연강판 전용 스타일 (common.css 보완) ===== */

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

/* ── 제품강종 테이블: 데이터 셀 너비 144px (데스크탑) ── */
@media (min-width: 1440px) {
    .cat-f-table {
        width: auto !important;
    }

    .cat-f-table th,
    .cat-f-table td {
        width: 144px !important;
        min-width: 144px !important;
        max-width: 144px !important;
        box-sizing: border-box;
    }

    .cat-f-table .f-row-1 th:first-child,
    .cat-f-table tbody td:first-child {
        width: 152px !important;
        min-width: 152px !important;
        max-width: 152px !important;
    }
}













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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.c1-bg-orange {
    position: absolute;
    width: 100%;
    height: 85.19%;
    left: 0;
    top: 0;
    background: #F27100;
    border-radius: clamp(16px, 1.56vw, 30px) clamp(16px, 1.56vw, 30px) 0 0;
}

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

.fcard-premium .product-img {
    position: absolute;
    width: 100%;
    height: 42.22%;
    /* 228 / 540 */
    left: 0;
    top: 57.78%;
    /* 312 / 540 */
    border-radius: 0px 0px 8px 8px;
    object-fit: cover;
    z-index: 3;
}

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

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

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

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

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

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

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

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



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

.product-tabs::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, 0.3); /* 검수 0730: 연혁(history-fab)과 동일 투명도 0.85→0.3 */
    backdrop-filter: blur(10px); /* 검수 0730: 연혁과 동일 블러 20→10 */
    -webkit-backdrop-filter: blur(10px);
}

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

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

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

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

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

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

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

.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: 32px;
    gap: 8px;
    height: 53px;
    background: #F27100;
    border-radius: 100px;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease, opacity 0.2s ease;
    border: none;
    cursor: pointer;
}

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

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

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

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

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

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

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

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

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

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

/* ===== Accordion (Figma Specs) ===== */
.product-intro .accordion {
    width: 100%;
    margin-top: 40px;
    padding: 40px 0 var(--section-padding-y);
}

.acc-item {
    width: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

/* 💡 아코디언 펼침 내용 박스 */
.acc-content-box {
    width: 100%;
    background: transparent;
    border-radius: 30px;
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    gap: 60px;
    overflow-x: auto;
}

/* Production Range List Container */
.pr-list-container {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.pr-item-row {
    display: flex;
    flex-direction: row;
    gap: 60px;
    align-items: flex-start;
    align-self: stretch;
}

.pr-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pr-title-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.pr-title-main {
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: 24px;
    line-height: 150%;
    color: #000000;
}

.pr-title-sub {
    font-family: 'Pretendard';
    font-weight: 400;
    font-size: 20px;
    line-height: 160%;
    color: #4E4E4E;
}

.pr-item-desc {
    font-family: 'Pretendard';
    font-weight: 500;
    font-size: 20px;
    line-height: 160%;
    color: #4E4E4E;
    margin: 0;
}

/* Gray Background Box for Desktop Charts */
.pr-chart-box {
    background: #F8F9FB;
    border-radius: 30px;
    padding: 40px;
    width: 890px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.pr-chart-visual {
    width: 810px;
    height: 416px;
}

@media (max-width: 767px) {
    .pr-list-container {
        gap: 40px;
    }

    .m-notice-text {
        width: 323px;
        height: 21px;
        font-family: 'Pretendard';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 150%;
        color: #F27100;
        margin: 0;
    }

    .pr-item-row {
        flex-direction: column;
        gap: 20px;
    }
}

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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

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

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

/* 아이콘 공통 및 좌우 반전(Soft) */
.umi-icon {
    width: clamp(15px, calc(5.86px + 1.19vw), 23px);
    height: clamp(30px, calc(11.72px + 2.38vw), 46px);
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

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

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

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

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

/* 검수 0724: 아코디언 ± 토글 아이콘. 활성=−(minus), 비활성=+(plus). 헤더 우측 정렬. */
.umi-toggle {
    margin-left: auto;
    flex-shrink: 0;
    width: clamp(42px, 3.33vw, 64px);
    height: clamp(42px, 3.33vw, 64px);
    background: url('../../assets/common/ic_plus.svg') center / clamp(21px, 1.72vw, 33px) no-repeat;
}
.usage-menu-item.active .umi-toggle {
    background-image: url('../../assets/common/ic_minus.svg');
}

/* 텍스트 박스 공통 설정 (항상 노출, 색상만 변경) */
.umi-desc {
    width: auto;
    max-width: 492px;
    margin: 0 0 0 40px;
    /* 왼쪽 아이콘 너비만큼 여백 40px */
    font-size: clamp(16px, 1.14vw, 22px);
    font-weight: 400;
    line-height: 160%;
    color: #A7A7A7;
    /* 비활성 상태 색상 (연한 회색) */
    display: none;
    word-break: keep-all;
    transition: color 0.3s;
    /* 부드러운 색상 전환 */
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===== 공정과정 (Auto-Play 방식으로 변경) ===== */

/* 1. 전체 길이를 700vh로 만들던 설비를 제거합니다 */
.process-scroll-outer {
    position: relative;
    height: auto;
    /* 고정 높이 제거 */
    background: #FFFFFF;
    padding: 0 30px 80px;
    /* 상하 여백 제거, 좌우 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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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






/* ═══════════════════════════════════════════
   공정과정 태블릿 (768px ~ 1439px)
   ═══════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1439px) {

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

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

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

    .ps-header {
        position: relative;
        width: 100%;
        height: auto;
        left: 0;
        top: 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0;
    }

    .ps-label {
        display: none;
    }

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

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

    .ps-bubble {
        display: none;
    }

    .ps-progress {
        display: none;
    }

    /* 모바일과 동일한 ps-mob-icon 기반 2행 다이어그램 */
    .ps-mobile-diagram {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        position: relative;
        aspect-ratio: 328 / 277;
        overflow: visible;
    }

    .ps-mobile-diagram-inner {
        width: 100%;
        aspect-ratio: 328 / 277;
        position: relative;
        top: -20px;
    }

    .ps-mobile-row {
        display: contents;
    }

    .ps-mob-icon {
        position: absolute;
        object-fit: contain;
        object-position: bottom;
        cursor: pointer;
        opacity: 0.4;
        filter: grayscale(1);
        transition: opacity 0.3s, filter 0.3s;
    }

    .ps-mob-icon.active {
        opacity: 1;
        filter: grayscale(0);
    }

    /* 1행: 1-열연코일세팅, 2-산세라인, 3-정밀컷팅, 4-냉간압연 */
    .ps-mob-icon[data-step="0"] {
        left: 0%;
        top: 26.05%;
        width: 30%;
        transform: translateY(-9px);
    }

    .ps-mob-icon[data-step="1"] {
        left: 27%;
        top: 23.68%;
        width: 20%;
        transform: translateY(-9px);
    }

    .ps-mob-icon[data-step="2"] {
        left: 46%;
        top: 26.05%;
        width: 28%;
        transform: translateY(-9px);
    }

    .ps-mob-icon[data-step="3"] {
        left: 76%;
        top: 26.05%;
        width: 20%;
        transform: translateY(-9px);
    }

    /* 2행: 5-소둔라인, 6-표면마감, 7-포장정리 */
    .ps-mob-icon[data-step="4"] {
        left: 4px;
        top: calc(60% - 31px);
        width: 30%;
        max-height: calc(50.92% - 5px);
        object-fit: contain;
        object-position: top;
        transform: translate(20px, -25px);
    }

    .ps-mob-icon[data-step="5"] {
        left: 28%;
        top: calc(58% - 30px);
        width: 26%;
        max-height: calc(52.1% - 5px);
        object-fit: contain;
        object-position: top;
        transform: translate(20px, -25px);
    }

    .ps-mob-icon[data-step="6"] {
        left: calc(59% - 10px);
        top: calc(50% - 20px);
        width: 47%;
        max-height: calc(60.39% - 15px);
        object-fit: contain;
        object-position: top;
        transform-origin: left bottom;
        transform: translateX(1px) translateY(-30px) scale(0.831);
    }

    /* 공정 라벨 */
    .ps-mobile-step-label {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        opacity: 0;
        transition: opacity 0.4s ease;
        pointer-events: none;
        z-index: 20;
        transform: translateX(-50%) translateY(-100%);
        margin-top: -25px;
    }

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

    .ps-mobile-step-label span {
        font-family: 'Pretendard', sans-serif;
        font-size: clamp(13px, 1.6vw, 16px);
        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;
    }

    /* 각 step 라벨 위치 */
    .ps-mobile-step-label[data-step="0"] {
        left: 17%;
        top: 28%;
        transform: translateX(-50%) translateY(calc(-100% - 9px));
    }

    .ps-mobile-step-label[data-step="1"] {
        left: 37%;
        top: calc(25% + 16px);
        transform: translateX(-50%) translateY(calc(-100% - 9px));
    }

    .ps-mobile-step-label[data-step="2"] {
        left: calc(61% + 6px);
        top: 28%;
        transform: translateX(-50%) translateY(calc(-100% - 9px));
    }

    .ps-mobile-step-label[data-step="3"] {
        left: 86%;
        top: calc(28% + 15px);
        transform: translateX(-50%) translateY(calc(-100% - 9px));
    }

    .ps-mobile-step-label[data-step="4"] {
        left: 16%;
        top: calc(60% + 37px);
        transform: translateX(calc(-50% + 20px)) translateY(calc(-100% - 25px));
    }

    .ps-mobile-step-label[data-step="5"] {
        left: 41%;
        top: calc(76% - 4px);
        transform: translateX(calc(-50% + 20px)) translateY(calc(-100% - 25px));
    }

    .ps-mobile-step-label[data-step="6"] {
        left: calc(77% - 10px);
        top: calc(80% + 8px);
        transform: translateX(calc(-50% - 4px)) translateY(calc(-100% - 17px));
    }

    /* 하단 그룹 */
    .ps-mobile-bottom-group {
        display: flex;
        flex-direction: column;
        gap: clamp(10px, 1.5vw, 16px);
        width: 100%;
        box-sizing: border-box;
    }

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

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

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

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

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

    .ps-mobile-info-card {
        display: flex !important;
        flex-direction: column;
        gap: clamp(8px, 1.2vw, 14px);
        background: #FFFFFF;
        border-radius: clamp(12px, 1.5vw, 20px);
        padding: clamp(16px, 2.5vw, 24px) clamp(20px, 3vw, 30px);
        width: 100%;
        box-sizing: border-box;
    }

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

    .ps-mobile-info-num {
        font-size: clamp(16px, 2vw, 22px);
        font-weight: 700;
        line-height: 1.6;
        color: #F27100;
    }

    .ps-mobile-info-name {
        font-size: clamp(16px, 2vw, 22px);
        font-weight: 700;
        line-height: 1.6;
        color: #000;
    }

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

    /* 태블릿에서 공정 관련 mobile-only 요소 강제 표시 */
    .ps-mobile-diagram.mobile-only,
    .ps-mobile-bottom-group.mobile-only {
        display: flex !important;
    }

    .ps-mobile-diagram.mobile-only {
        flex-direction: column;
        justify-content: center;
    }

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

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

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

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

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

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

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

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

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

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

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


    .pi-desc br {
        display: none;
    }

    /* ── 태블릿 아코디언/표 반응형 ── */
    .accordion {
        padding: 0;
        margin: 0;
    }

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

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

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

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

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

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

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

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

    .spec-grid-group {
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .spec-grid-group::-webkit-scrollbar {
        display: none;
    }

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

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

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

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

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

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

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

/* ════════════════════════════════════
           MOBILE — 1023px 이하
           모든 고정 너비/절대 위치를 유연한 레이아웃으로 전환
           ════════════════════════════════════ */
@media (max-width: 767px) {
    body {
        min-width: 0;
        width: 100%;
        overflow-x: hidden;
    }



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

    .hero-text-section {
        padding: 20px 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: 136px;              /* 검수(0720): 카드 높이 136px */
        border-radius: 16px;
        flex: none;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 16px;
        gap: 10px;                  /* 라벨↔타이틀 간격 10px */
        box-sizing: border-box;
    }

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

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

    .fcard-stable .bg-main,
    .fcard-nextgen .bg-main {
        display: none;
    }

    .fcard-stable {
        background: #F27100;
    }

    .fcard-nextgen {
        background: #F1F3F7;
    }

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

    /* 검수(0720): 3카드 라벨/타이틀 절대배치(top:98px) 제거 → flex 흐름 통일, 간격 10px */
    .fcard-premium .label-text,
    .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-premium .title-text,
    .fcard-stable .title-text,
    .fcard-nextgen .title-text {
        position: relative;
        left: auto;
        top: auto;
        bottom: auto;
        font-size: 30px;
        line-height: 1.4;
        margin: 0;
    }

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

    .product-tabs {
        position: fixed;
        bottom: 0;
        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;
    }

    .product-intro .inner {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0 16px;
        padding-bottom: 40px;
        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-top: 40px;
    }

    .pi-left {
        display: contents;
    }

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

    /* 피그마: 타이틀 → 이미지 → 서브타이틀+본문 → 브로슈어 순서 */
    .pi-title {
        order: 1;
        width: 100%;
        font-size: 30px;
        line-height: 1.4;
        height: auto;
        white-space: normal;
    }

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

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

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

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

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

    .pi-subtitle {
        font-size: 24px !important;
        line-height: 1.5;
        width: 100%;
    }

    .pi-desc {
        font-size: 16px;
        line-height: 1.6;
        width: 100%;
        height: 78px;
    }

    .pi-desc br:not(.mo-br) {
        display: none;
    }

    .pi-brochure-label {
        font-size: 18px;
        line-height: 1.6;
        height: 29px;
    }

    .pi-brochure-btns {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding: 0px;
        gap: 4px;
        width: 328px;
        height: 46px;
    }

    .pi-brochure-btns .btn-round {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 10px 12px 10px 18px;
        gap: 4px;
        width: auto;
        height: 46px;
        background: #F27100;
        border-radius: 100px;
        flex: none;
        flex-grow: 0;
        border: none;
        transition: background 0.2s ease;
    }

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

    .pi-brochure-btns .btn-round:nth-child(1) {
        width: 106px;
    }

    .pi-brochure-btns .btn-round:nth-child(2) {
        width: 104px;
    }

    .pi-brochure-btns .btn-round:nth-child(3) {
        width: 108px;
    }

    .btn-round .btn-label {
        font-family: 'Pretendard';
        font-weight: 700;
        font-size: 16px;
        line-height: 160%;
        color: #FFFFFF;
        flex: none;
        flex-grow: 0;
    }

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

    .accordion {
        padding: 0 0 40px;
    }


    .acc-item {
        width: 100%;
    }

    .acc-header {
        height: 72px;
        padding-right: 8px;
    }

    .acc-title {
        font-size: 20px;
    }

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

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

    .acc-body {
        width: 100%;
    }

    .acc-content-box {
        width: 100%;
        padding: 16px 0;
        gap: 24px;
        border-radius: 16px;
    }

    .pr-item-desc {
        font-weight: 400 !important;
    }

    .spec-grid-group {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .spec-grid-row {
        min-width: 500px;
        width: max-content;
    }

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

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

    .usage-section .usage-right {
        overflow: visible;
    }

    .usage-section .usage-tab-content {
        overflow: visible;
    }

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

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

    .usage-menu-item:not(.active) .umi-title {
        color: #1b1b1b; /* 검수 0729 */
    }

    .usage-menu-item:not(.active) .umi-desc {
        display: none;
    }

    .umi-icon {
        width: 15px;
        height: 30px;
    }

    .umi-header {
        gap: 8px;
        height: auto;
    }

    .usage-menu-item {
        gap: 0;
    }

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

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

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

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

    .usage-menu-item .usage-tab-content {
        display: none;
        width: 100%;
        gap: 0;
    }

    .usage-menu-item.active .usage-tab-content {
        display: flex;
        margin-top: 12px;
    }

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

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

    .utc-parts {
        height: auto;
        margin-top: 10px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 16px;
        gap: 4px;
        padding: 0 16px 4px 16px;
        margin: 10px -16px 0 -16px; /* 검수 0729: top 10 유지(txt↔부품 간격) — 기존 단축마진이 margin-top:10을 0으로 덮던 것 수정 */
        justify-content: flex-start;
        scrollbar-width: none;
        -ms-overflow-style: none;
        box-sizing: border-box;
        width: calc(100% + 32px);
    }

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

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

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

    .utc-footer-info {
        justify-content: flex-start;
        align-items: flex-start;
        margin-top: 12px;
    }

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

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

    /* ── 공정: 데스크탑 요소 숨김 ── */
    .process-scroll-outer {
        width: 100%;
        max-width: 100vw;
        margin: 0 auto;
        padding: 0;
        overflow: visible;
    }

    .process-sticky {
        display: block;
        height: auto;
        position: relative;
        padding: 0;
    }

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

    .ps-header {
        position: relative;
        width: 100%;
        height: auto;
        left: 0;
        top: 0;
        padding: 0;
    }

    .ps-label {
        display: none;
    }

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

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

    .ps-bubble {
        display: none;
    }

    .ps-progress {
        display: none;
    }

    .ps-mobile-diagram {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        position: relative;
        aspect-ratio: 328 / 277;
        overflow: visible;
    }

    .ps-mobile-diagram-inner {
        width: 100%;
        aspect-ratio: 328 / 277;
        position: relative;
        top: -20px;
    }

    .ps-mobile-row {
        display: contents;
    }

    .ps-mob-icon {
        position: absolute;
        object-fit: contain;
        object-position: bottom;
        cursor: pointer;
        opacity: 0.4;
        filter: grayscale(1);
        transition: opacity 0.3s, filter 0.3s;
    }

    .ps-mob-icon.active {
        opacity: 1;
        filter: grayscale(0);
    }

    /* 1행: 1-열연코일세팅, 2-산세라인, 3-정밀컷팅, 4-냉간압연 */
    .ps-mob-icon[data-step="0"] {
        left: 0%;
        top: 26.05%;
        width: 30%;
        transform: translateY(-9px);
    }

    .ps-mob-icon[data-step="1"] {
        left: 27%;
        top: 23.68%;
        width: 20%;
        transform: translateY(-9px);
    }

    .ps-mob-icon[data-step="2"] {
        left: 46%;
        top: 26.05%;
        width: 28%;
        transform: translateY(-9px);
    }

    .ps-mob-icon[data-step="3"] {
        left: 76%;
        top: 26.05%;
        width: 20%;
        transform: translateY(-9px);
    }

    /* 2행: 5-소둔라인, 6-표면마감, 7-포장정리 */
    .ps-mob-icon[data-step="4"] {
        left: 4px;
        top: calc(67.49% - 31px);
        width: 30%;
        max-height: calc(50.92% - 5px);
        object-fit: contain;
        object-position: top;
        transform: translate(20px, -25px);
    }

    .ps-mob-icon[data-step="5"] {
        left: 28%;
        top: calc(66.31% - 30px);
        width: 26%;
        max-height: calc(52.1% - 5px);
        object-fit: contain;
        object-position: top;
        transform: translate(20px, -25px);
    }

    .ps-mob-icon[data-step="6"] {
        left: calc(59% - 10px);
        top: calc(58.02% - 20px);
        width: 47%;
        max-height: calc(60.39% - 15px);
        object-fit: contain;
        object-position: top;
        transform-origin: left bottom;
        transform: translateX(1px) translateY(-30px) scale(0.831);
    }

    /* 활성 공정 라벨 (공정 이름 + 화살표) */
    .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;
        transform: translateX(-50%) translateY(-100%);
        margin-top: -5px;
    }

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

    /* 각 step 라벨 위치 (대각선 하강) */
    .ps-mobile-step-label[data-step="0"] {
        left: 14%;
        top: 26.05%;
        transform: translateX(-50%) translateY(calc(-100% - 9px));
    }

    .ps-mobile-step-label[data-step="1"] {
        left: 34.5%;
        top: calc(23.68% + 10px);
        transform: translateX(-50%) translateY(calc(-100% - 9px));
    }

    .ps-mobile-step-label[data-step="2"] {
        left: calc(58% + 6px);
        top: 26.05%;
        transform: translateX(-50%) translateY(calc(-100% - 9px));
    }

    .ps-mobile-step-label[data-step="3"] {
        left: 83.5%;
        top: calc(26.05% + 10px);
        transform: translateX(-50%) translateY(calc(-100% - 9px));
    }

    .ps-mobile-step-label[data-step="4"] {
        left: 19%;
        top: calc(67.49% - 6px);
        transform: translateX(calc(-50% + 20px)) translateY(calc(-100% - 25px));
    }

    .ps-mobile-step-label[data-step="5"] {
        left: 38%;
        top: calc(84.07% - 22px);
        transform: translateX(calc(-50% + 20px)) translateY(calc(-100% - 25px));
    }

    .ps-mobile-step-label[data-step="6"] {
        left: calc(80% - 10px);
        top: calc(88.81% - 30px);
        transform: translateX(calc(-50% - 4px)) translateY(calc(-100% - 17px));
    }

    /* ── 모바일 하단 조절 영역 래퍼 ── */
    .ps-mobile-bottom-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        box-sizing: border-box;
    }

    /* ── 모바일 인디케이터 바 ── */
    .ps-mobile-indicators {
        display: flex;
        justify-content: space-between;
        gap: 6px;
        padding: 10px 7px;
        width: 100%;
    }

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

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

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

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

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

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

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

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

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

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

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

    /* ── 제품사양: 모바일 오버플로우 방지 ── */
    .acc-body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    .acc-content-box {
        overflow-x: hidden;
        max-width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 30px 16px;
    }

    .sg-card {
        flex-direction: column;
        gap: 24px;
        width: 100%;
        max-width: 100%;
    }

    .sg-info {
        width: 100%;
        max-width: 100%;
    }

    .sg-visual-box {
        width: 100%;
        max-width: 100%;
        padding: 16px;
        border-radius: 16px;
        overflow-x: hidden;
        box-sizing: border-box;
        gap: 30px;
    }

    .sg-graph-area {
        width: 100%;
        min-width: 0;
        height: auto;
    }

    .sg-graph-area img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .capa-info-group {
        width: 100%;
        height: auto;
    }

    .sg-graph-area img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .pr-item-row {
        flex-direction: column;
        gap: 40px;
        /* Gaps between info and chart as per spec */
    }


    .pr-item-row .pr-title-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .pr-item-row .pr-title-main {
        font-size: 20px;
        font-weight: 700;
        line-height: 1.5;
        color: #000000;
    }

    .pr-item-row .pr-title-sub {
        font-size: 16px;
        font-weight: 400;
        line-height: 1.6;
        color: #4E4E4E;
    }

    .pr-item-desc {
        width: 100%;
        height: auto;
        font-size: 16px;
        line-height: 1.6;
        color: #4E4E4E;
    }

    .pr-item-row {
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 0;
        gap: 20px;
    }

    .pr-item-info {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0;
        gap: 12px;
    }

    /* Mobile Chart Styles */
    .m-chart-container {
        width: 100%;
        background: transparent;
        padding: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .m-chart-visual-wrap {
        width: 100% !important;
        background: #F8F9FB;
        border-radius: 16px;
        padding: 24px 20px;
        box-sizing: border-box;
        position: relative;
        align-items: center;
    }

    .m-chart-visual {
        width: 288px;
        height: 179px;
        position: relative;
        flex: none;
    }

    .m-chart-rect {
        position: absolute;
        box-sizing: border-box;
        background: #FAC699;
        border: 1px solid #F27100;
    }

    .m-chart-axis-box {
        position: absolute;
        box-sizing: border-box;
        border: 1px solid #7A7A7A;
    }

    .m-chart-label {
        position: absolute;
        font-family: 'Pretendard';
        font-size: 12px;
        color: #4E4E4E;
        text-align: center;
    }

    .m-chart-val {
        position: absolute;
        display: flex;
        align-items: center;
        gap: 2.67px;
    }

    .m-chart-val span {
        font-family: 'Pretendard';
        font-size: 14px;
        line-height: 1.5;
        color: #000000;
    }

    .m-chart-val span.star {
        color: #F27100;
    }

    .m-chart-tick-h {
        width: 6px;
        border-top: 1px solid #7A7A7A;
    }

    .m-chart-tick-v {
        height: 6px;
        border-left: 1px solid #7A7A7A;
    }

    .m-chart-dash-h {
        border-top: 1px dashed #A7A7A7;
    }

    .m-chart-dash-v {
        border-left: 1px dashed #A7A7A7;
    }

    /* Capa Styles */
    .m-capa-box {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .m-capa-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 4px;
        font-family: 'Pretendard';
        font-size: 14px;
        line-height: 1.5;
    }

    .m-capa-label {
        font-weight: 700;
        color: #363636;
    }

    .m-capa-sub {
        font-weight: 400;
        color: #7A7A7A;
    }

    .m-capa-val {
        font-weight: 400;
        color: #363636;
        margin-left: auto;
    }

    .m-notice-text {
        font-size: 14px;
        color: #F27100;
        line-height: 1.5;
        margin: 0;
    }

}


/* ================== 제품분류 Table Styles ================== */
.cat-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 24px;
    margin-top: 48px;
}

.cat-f-table {
    min-width: 1530px;
    width: 100%;
    border-collapse: collapse;
    font-family: 'Pretendard', sans-serif;
    text-align: center;
}

.cat-f-table th,
.cat-f-table td {
    border: 1px solid #D6D6D6;
    box-sizing: border-box;
}

.cat-f-table th {
    background: #F9FAFE;
    color: #363636;
    font-weight: inherit;
    padding: 0;
    align-items: stretch;
}

.cat-f-table thead tr:first-child th {
    border-top: 2px solid #000;
}

/* ===== 1. 표의 맨 왼쪽 선 제거 ===== */
/* '분류' 헤더칸(3칸짜리)의 왼쪽 선과 아래 데이터들의 첫 번째 칸 왼쪽 선 제거 */
.cat-f-table thead tr:first-child th:first-child,
.cat-f-table tbody tr td:first-child {
    border-left: none;
}

/* ===== 2. 표의 맨 오른쪽 선 제거 ===== */
/* 가로줄(tr)에 상관없이 무조건 제일 끝에 있는 칸의 오른쪽 선 제거 */
.cat-f-table tr th:last-child,
.cat-f-table tr td:last-child {
    border-right: none;
}

/* ===== 3. 표의 맨 아래쪽 선 제거 ===== */
/* 데이터(tbody)의 제일 마지막 줄(DN 줄)에 있는 모든 칸의 밑선 제거 */
.cat-f-table tbody tr:last-child td {
    border-bottom: none;
}

.th-in {
    padding: 18px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    height: 100%;
    box-sizing: border-box;
}

.txt-lbl-24 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    color: #363636;
}

.txt-lbl-20 {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.6;
    color: #363636;
}

.txt-p-16 {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #A7A7A7;
}

.txt-p-16-d {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #363636;
}

.txt-p-14 {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #A7A7A7;
    text-align: center;
}

.txt-p-20 {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    color: #363636;
    word-break: keep-all;
    margin-bottom: 30px;
}

.td-f-val {
    padding: 18px 24px;
    background: #FFF;
    vertical-align: middle;
    height: 245px;
}

.td-f-val.bg-gray {
    background: #FFFFFF;
    font-weight: 700;
    font-size: 20px;
    width: 145px;
    height: 245px;
}

/* ================== 제품사양 Graph Styles ================== */
.sg-card {
    display: flex;
    flex-direction: row;
    gap: 60px;
}

.sg-card:last-child {
    margin-bottom: 0;
}

.sg-info {
    width: 642px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
}

.sg-info-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sg-title {
    font-size: 24px;
    font-weight: 700;
    color: #000;
}

.sg-sub {
    font-size: 20px;
    font-weight: 400;
    color: #4E4E4E;
}

.sg-desc {
    font-size: 20px;
    font-weight: 500;
    color: #4E4E4E;
    line-height: 1.6;
}

.sg-visual-box {
    width: 890px;
    background: #F8F9FB;
    border-radius: 30px;
    padding: 40px;

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 60px;
}

.sg-capa-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sg-capa-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sg-capa-lbl {
    font-size: 16px;
    font-weight: 700;
    color: #363636;
    width: 107px;
}

.sg-capa-lbl.w-auto {
    width: auto;
}

.sg-capa-sub {
    font-size: 16px;
    font-weight: 400;
    color: #7A7A7A;
    width: 102px;
}

.sg-capa-val {
    font-size: 16px;
    font-weight: 400;
    color: #363636;
}

.sg-capa-accent {
    font-size: 16px;
    font-weight: 400;
    color: #F27100;
    padding-top: 4px;
}

.g-axes {
    position: absolute;
    width: 580px;
    height: 344px;
    left: 131px;
    top: 36px;
    border-left: 1px solid #7A7A7A;
    border-bottom: 1px solid #7A7A7A;
    box-sizing: border-box;
}

.g-axes::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-right: 1px solid #7A7A7A;
    border-top: 1px solid #7A7A7A;
    pointer-events: none;
}

.g-axis-name {
    position: absolute;
    font-size: 16px;
    font-weight: 400;
    color: #4E4E4E;
    line-height: 1.6;
}

.g-tick-y {
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    height: 29px;
}

.g-tick-x {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 87px;
    height: 36px;
    gap: 8px;
}

.g-tick-val {
    font-size: 18px;
    font-weight: 500;
    color: #000;
    line-height: 1.6;
    text-align: center;
}

.g-tick-star {
    font-size: 20px;
    font-weight: 400;
    color: #F27100;
    margin-left: 2px;
}

.g-tick-line-y {
    width: 8px;
    height: 0px;
    border-top: 1px solid #7A7A7A;
}

.g-tick-line-x {
    width: 0px;
    height: 8px;
    border-left: 1px solid #7A7A7A;
}

.g-dash-h {
    position: absolute;
    height: 0;
    border-top: 1px dashed #A7A7A7;
}

.g-dash-v {
    position: absolute;
    width: 0;
    border-left: 1px dashed #A7A7A7;
}

.g-box-solid {
    position: absolute;
    box-sizing: border-box;
    background: #FAC699;
    border: 1px solid #F27100;
}

.g-box-dashed {
    position: absolute;
    box-sizing: border-box;
    border: 1px dashed #A7A7A7;
    background: #F1EDEA;
}

.g-label-txt {
    position: absolute;
    font-size: 18px;
    font-weight: 500;
    color: #7A7A7A;
    line-height: 1.6;
}


/* ── New Flex-Table (Figma Spec) ── */
@media (max-width: 767px) {
    .cat-table-wrap {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
        margin-bottom: 0;
        overflow-x: hidden !important;
        background: #fff;
        border: none !important;
        box-shadow: none !important;
    }

    .cat-scroll-box {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE/Edge */
    }

    .cat-scroll-box::-webkit-scrollbar {
        display: none !important;
        /* Chrome/Safari */
    }

    .cat-table-inner {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 1px;
        width: 1194px;
        height: 770px;
        background: #D6D6D6;
        /* Gap visibility */
        border: 1px solid #D6D6D6;
        border-left: none;
        border-top: 1px solid #000000;
        box-sizing: border-box;
    }

    .cat-table-inner>* {
        background: #fff;
        /* Reset columns background */
    }

    .cat-table-inner,
    .cat-table-inner * {
        box-sizing: border-box;
    }

    /* Columns */
    .cat-col {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex-shrink: 0;
    }

    .cat-col-label {
        width: 100px;
        min-width: 100px;
        max-width: 100px;
    }

    .cat-col-auto {
        width: 546px;
    }

    .cat-col-ind {
        width: 546px;
    }

    /* Cells */
    .cat-cell {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .cat-header-main {
        height: 90px;
        background: linear-gradient(0deg, #F9FAFE, #F9FAFE), #FCFDFF;
        border-top: 1px solid #000000;
        padding: 14px 18px;
        font-family: 'Pretendard';
        font-weight: 700;
        font-size: 18px;
        line-height: 160%;
        color: #363636;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        flex-shrink: 0;
        box-sizing: border-box;
    }

    .cat-col-label .cat-header-main {
        width: 100px;
        height: 209px;
        color: #000000;
    }

    /* Mid Headers */
    .cat-header-mid-row {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 119px;
        gap: 1px;
        /* Vertical lines within sub-group */
    }

    .cat-header-mid {
        flex: 1;
        height: 119px;
        background: #F9FAFE;
        padding: 14px 18px;
        font-family: 'Pretendard';
        font-weight: 400;
        font-size: 16px;
        line-height: 160%;
        color: #363636;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        box-sizing: border-box;
    }

    .cat-header-mid:last-child {
        border-right: none;
    }

    .cat-header-mid span,
    .cat-header-main span {
        font-size: 12px;
        font-weight: 400;
        color: #A7A7A7;
        line-height: 160%;
    }

    /* Alloy Group */
    .cat-alloy-group {
        display: flex;
        flex-direction: column;
        width: 302px;
    }

    .cat-col-ind .cat-alloy-group {
        width: 426px;
    }

    .alloy-title {
        height: 55px;
        width: 100%;
    }

    .alloy-subs {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 64px;
        gap: 1px;
    }

    .cat-header-sub {
        flex: 1;
        height: 64px;
        background: #F9FAFE;
        padding: 6px 12px;
        font-size: 14px;
        color: #363636;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        text-align: left;
    }

    .cat-header-sub:last-child {
        border-right: none;
    }

    .cat-header-sub span {
        font-size: 12px;
        color: #A7A7A7;
    }

    /* Data Cells */
    .cat-data-cell {
        height: 187px;
        background: #FFFFFF;
        padding: 14px 18px;
        font-family: 'Pretendard';
        font-weight: 400;
        font-size: 14px;
        line-height: 150%;
        color: #363636;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        text-align: left;
        word-break: break-word;
        flex-shrink: 0;
        box-sizing: border-box;
    }

    .cat-col-label .cat-data-cell {
        width: 100px;
        height: 187px;
        font-weight: 700;
        font-size: 18px;
        line-height: 160%;
    }

    .cat-col-ind .cat-data-cell:last-child,
    .cat-alloy-group .cat-data-cell:last-child {
        border-right: none;
    }

    /* Row structure in columns */
    .cat-data-rows {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .cat-data-row {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 187px;
        gap: 1px;
    }
}

/* Scroll indicator */
@media (max-width: 767px) {
    .cat-scroll-indicator {
        position: relative;
        width: 328px;
        height: 4px;
        margin-top: 0;
    }

    .cat-scroll-bg {
        position: absolute;
        width: 324px;
        height: 4px;
        left: 2px;
        top: 0;
        background: rgba(211, 211, 211, 0.3);
        border-radius: 2px;
        box-sizing: border-box;
    }

    .cat-scroll-thumb {
        position: absolute;
        width: 164px;
        height: 4px;
        left: 2px;
        top: 0;
        background: #D3D3D3;
        border-radius: 2px;
        box-sizing: border-box;
    }
}

@media (max-width: 767px) {
    .txt-p-20 {
        font-size: 14px;
        color: #F27100;
        line-height: 1.4;
        margin-bottom: 0;
    }

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

    .acc-content-box {
        padding: 30px 0;
        gap: 20px;
    }

}

@media (max-width: 767px) {
    .desktop-only {
        display: none !important;
    }

    .col-label-txt {
        font-size: 16px !important;
        height: 26px !important;
    }

    .sub-label-txt {
        height: 26px !important;
    }

    .sub-label-sm {
        height: 21px !important;
    }

    .desktop-only.legend-box {
        display: flex !important;
        width: 100%;
        box-sizing: border-box;
    }

    .mo-br {
        display: block;
    }


}

@media (max-width: 767px) {
    .usage-menu-item {
        gap: 0 !important;
    }
}

@media (min-width: 768px) {
    .mobile-only {
        display: none !important;
    }

    .mo-br {
        display: none;
    }

    .support-info h3 br {
        display: none;
    }
}

@media (max-width: 767px) {
    .ps-mobile-diagram {
        aspect-ratio: 328 / 277 !important;
    }
}

/* ═══ 태블릿 표(cat-f-table) 글자·크기 축소 ═══
   base 선언(.txt-lbl-24 등)보다 반드시 뒤에 위치해야 오버라이드 됨 */
@media (max-width: 1439px) {
    .cat-f-table {
        width: 100%;
        table-layout: auto;
    }

    .cat-f-table th,
    .cat-f-table td {
        padding: 8px 10px;
    }

    .th-in {
        padding: 8px 6px;
    }

    .txt-lbl-24 {
        font-size: 18px;
    }

    .txt-lbl-20 {
        font-size: 16px;
    }

    .txt-p-16,
    .txt-p-16-d {
        font-size: 13px;
    }

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

    .txt-p-20 {
        font-size: 16px;
    }

    .td-f-val {
        padding: 12px 14px;
        height: auto;
    }

    .cat-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── 차트/그래프 반응형 ── */
    .pr-chart-box {
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
        padding: clamp(20px, 2.5vw, 40px);
        border-radius: 20px;
        gap: 30px;
    }

    .pr-chart-visual {
        width: 100%;
        height: auto;
        aspect-ratio: 810 / 416;
    }

    .pr-chart-visual img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .pr-item-row {
        flex-direction: column;
        gap: 24px;
    }

    .pr-item-info {
        width: 100%;
    }
}

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

    .acc-content-box,
    .pr-chart-box,
    .process-card,
    .ps-progress,
    .sg-visual-box {
        border-radius: 20px;
    }
}