/* ===== 열처리강판 전용 스타일 (common.css 보완) ===== */

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

.mo-only {
    display: none;
}

.pc-only {
    display: block;
}












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

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

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

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

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

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

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

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

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

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

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

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

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



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

.product-tabs::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, 0.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;
    /* 👈 각 탭의 고정 너비를 지우고, 양옆 여백(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: 500;
}

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

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

.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 {
    height: 70px;
    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%;
    height: 39px;
    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: 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%;
    font-size: 18px;
}

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 48px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    overflow-x: auto;
}

.spec-note {
    font-size: 20px;
    font-weight: 400;
    line-height: 160%;
    color: #F27100;
}

@media (max-width: 767px) {
    .spec-note {
        font-size: 14px;
    }

    .acc-content-box {
        gap: 20px;
        /* 모바일에서는 간격을 조금 더 좁게 조정 */
        padding: 30px 16px;
    }
}

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

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

/* ── 기계적 물성 하단 범례(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;
    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;
}

.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: 스크롤 고정 없이 자연스럽게 흐름 */
.process-scroll-outer {
    position: relative;
    height: auto;
    background: #FFFFFF;
    padding: 0 30px 80px;
    overflow: hidden;
}

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

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

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

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

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

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

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

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

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

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

/* Default background SVG */
/* 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 기반 1행 다이어그램 */
    .ps-mobile-diagram {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        position: relative;
        aspect-ratio: 328 / 160;
        overflow: visible;
    }

    .ps-mobile-diagram-inner {
        width: 100%;
        aspect-ratio: 328 / 120;
        position: relative;
    }

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

    .ps-mob-group {
        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행: 냉연코일세팅, 열처리, 정밀컷팅, 포장정리 */
    .ps-mob-icon[data-step="0"] {
        right: 75%;
        top: calc(10% + 4px);
        width: calc(25% - 10px);
    }

    .ps-mob-icon[data-step="1"] {
        left: 20%;
        top: 15%;
        width: 30%;
    }

    .ps-mob-icon[data-step="2"] {
        left: calc(49% - 1px);
        top: calc(7% + 11px);
        width: calc(22% - 10px);
    }

    .ps-mob-icon[data-step="3"] {
        left: calc(74% - 20px);
        top: 28%;
        width: 26%;
    }

    /* 공정 라벨 */
    .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: calc(12% + 8px);
        top: 15%;
    }

    .ps-mobile-step-label[data-step="1"] {
        left: 35%;
        top: 31%;
    }

    .ps-mobile-step-label[data-step="2"] {
        left: calc(60% - 10px);
        top: 32%;
    }

    .ps-mobile-step-label[data-step="3"] {
        left: calc(87% - 25px);
        top: 58%;
    }

    /* 하단 그룹 */
    .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;
    }

    /* ── 생산가능 범위: 태블릿 세로 스택 ── */
    .spec-flex-wrap {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .spec-text-col {
        min-width: 0 !important;
        width: 100% !important;
    }

    .spec-chart-col {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }

    /* 검수 0708: 부품 행 태블릿 — 상단 이미지 폭에 맞춰 좌우 스크롤(제품 페이지 공통 동작 통일) */
    .usage-right {
        min-width: 0;
    }

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

    .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;
        max-width: 80px;
        height: 88px;
        min-width: 80px;
        aspect-ratio: auto;
        border-radius: 12px;
    }
}

/* ===== 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 */
    .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 */
    .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% !important;
        max-width: 100% !important;
        height: 136px;              /* 검수(0720): 카드 높이 136px */
        border-radius: 16px;
        flex: none;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        padding: 16px !important;
        gap: 10px !important;       /* 라벨↔타이틀 간격 10px */
        box-sizing: border-box !important;
    }

    /* 카드1 */
    .fcard-premium {
        overflow: hidden !important;
    }

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

    .fcard-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% !important;
    }

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

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

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

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

    /* Product Tabs */
    .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 — 냉연강판 모바일 동일 구조 */
    .product-intro {
        padding: 40px 0;
    }

    .product-intro .inner {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0 16px;
        padding-bottom: 20px;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden;
    }

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

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

    .pi-left,
    .pi-top-content,
    .pi-main-texts {
        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-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: 20px;
    }

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

    .desktop-only {
        display: none;
    }

    /* ── 제품생산 설비 모바일 이미지 ── */
    .m-equip-img-box {
        width: 100%;
        aspect-ratio: 5 / 3;
        background: #FFFFFF;
        border-radius: 12px;
        overflow: hidden;
    }

    .m-equip-img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 검수 0724: 가로 원본(5/3)으로 교체 → 5/3 박스에 딱 맞아 크롭/여백 없이 전체 노출 */
        display: block;
    }

    /* ── New Flex-Table (Figma Spec) ── */
    .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;
        /* Zero gap with scrollbar */
        overflow-x: auto;
        background: #fff;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE and Edge */
    }

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

    .cat-table-inner {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 0;
        border-right: none;
        box-sizing: border-box;
    }

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

    .cat-header-main {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 14px 18px;
        background: linear-gradient(0deg, #F9FAFE, #F9FAFE), #FCFDFF;
        border-top: 1px solid #000000;
        font-family: 'Pretendard';
        font-weight: 700;
        font-size: 16px;
        line-height: 160%;
        color: #000000;
        text-align: center;
        width: 100%;
        height: 26px;
        flex: none;
        order: 0;
        flex-grow: 0;
        min-height: 70px;
        max-height: 70px;
        overflow: hidden;
    }

    .cat-data-cell {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 14px 18px;
        background: #FFFFFF;
        border-width: 1px 1px 0px 0px;
        border-style: solid;
        border-color: #D6D6D6;

        font-family: 'Pretendard';
        font-weight: 400;
        font-size: 14px;
        line-height: 150%;
        color: #363636;
        text-align: left;
        word-break: break-all;
        flex: none;
        flex-grow: 0;
        overflow: hidden;
        box-sizing: border-box !important;
    }

    .cat-data-inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 0px;
        margin: 0;
        /* Changed from auto to 0 to stick left */
        flex: none;
        order: 0;
        flex-grow: 1;
        width: 100%;
        height: 100%;
    }

    .cat-data-inner span {
        display: block;
        width: 100%;
        font-family: 'Pretendard';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 150%;
        color: #363636;
        text-align: left;
        flex: none;
        order: 0;
        align-self: stretch;
        flex-grow: 0;
    }

    /* ── 제품생산 테이블 모바일 스크롤바 (냉연강판 사양 통일) ── */
    .cat-scroll-indicator {
        position: relative;
        width: 100%;
        height: 4px;
        margin-top: 10px;
    }

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

    .cat-scroll-thumb {
        position: absolute;
        width: 164px;
        height: 4px;
        left: 0;
        top: 0;
        background: #D3D3D3;
        border-radius: 2px;
        transition: transform 0.1s ease-out;
        z-index: 2 !important;
    }

    .cat-col[style*="width: 150px"] .cat-header-main,
    .cat-col[style*="width: 150px"] .cat-data-cell {
        width: 150px;
        min-width: 150px;
        max-width: 150px;
    }

    .cat-col[style*="width: 160px"] .cat-header-main,
    .cat-col[style*="width: 160px"] .cat-data-cell {
        width: 160px;
        min-width: 160px;
        max-width: 160px;
    }

    .cat-col:last-child .cat-data-cell:last-child {
        border-right: none !important;
    }

    .cat-scroll-indicator {
        position: relative;
        width: 100% !important;
        height: 30px;
        margin: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box !important;
    }

    .cat-scroll-bg {
        position: absolute;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 4px;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(211, 211, 211, 0.3);
        border-radius: 2px;
        box-sizing: border-box !important;
    }

    .cat-scroll-thumb {
        position: absolute;
        width: 50px;
        height: 4px;
        left: 0 !important;
        top: 50%;
        transform: translateY(-50%);
        background: #D3D3D3;
        border-radius: 2px;
        box-sizing: border-box !important;
    }

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

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

    .pi-desc br {
        display: none;
    }

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

    .pi-brochure-btns {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding: 0px;
        gap: 4px;
        width: 326px;
        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: 106px;
        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;
    }

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

    .mo-br {
        display: block;
    }


    /* Accordion — 1680px 고정폭 해제 */
    .accordion {
        padding: 0 0 40px;
    }

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

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

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

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

    .grade-mobile-only {
        margin-top: 0 !important;
    }

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

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

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

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

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

    .acc-content-box {
        width: 100% !important;
        padding: 30px 0 !important;
        gap: 20px;
        border-radius: 16px;
        overflow-x: hidden !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .acc-content-box>div[style] {
        max-width: 100% !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
        padding: 16px !important;
    }

    /* 생산가능 범위 mobile layout */
    .spec-flex-wrap,
    .acc-content-box>div.spec-flex-wrap {
        flex-direction: column !important;
        gap: 20px !important;
        align-items: stretch !important;
        padding: 0 !important;
        border-radius: 0 !important;
        background: none !important;
    }

    .spec-text-col {
        min-width: 0 !important;
        width: 100% !important;
        gap: 12px !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    .spec-title {
        font-size: 18px !important;
        height: auto !important;
        line-height: 140% !important;
    }

    .spec-desc {
        font-size: 14px !important;
        line-height: 160% !important;
        height: 78px !important;
    }

    .spec-chart-col {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        border-radius: 16px !important;
        padding: 16px 0 !important;
    }

    .spec-chart-col img {
        height: auto !important;
        width: 100% !important;
        display: block !important;
    }

    .spec-note {
        font-size: 14px !important;
        line-height: 160% !important;
        margin: 0 !important;
        height: 21px !important;
    }

    /* Tables — 1584px 고정폭 → 스크롤 */
    .spec-grid-group {
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

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

    /* Usage Section — 572px + 1004px 고정폭 해제 */
    .usage-section {
        padding: 40px 16px;
    }

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

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

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

    .usage-left {
        width: 100% !important;
        max-width: 100% !important;
        flex-shrink: 1;
        gap: 20px;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .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 {
        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;
        box-sizing: border-box;
    }

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

    .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 / 160;
        overflow: visible;
    }

    .ps-mobile-diagram-inner {
        width: 100%;
        aspect-ratio: 328 / 160;
        position: relative;
        margin-top: 40px; /* 검수 0724 */
    }

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

    .ps-mob-group {
        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행: 냉연코일세팅, 열처리, 정밀컷팅, 포장정리 */
    .ps-mob-icon[data-step="0"] {
        right: 75%;
        top: calc(10% + 4px);
        width: calc(25% - 10px);
    }

    .ps-mob-icon[data-step="1"] {
        left: 20%;
        top: 15%;
        width: 30%;
    }

    .ps-mob-icon[data-step="2"] {
        left: calc(49% - 1px);
        top: calc(7% + 11px);
        width: calc(22% - 10px);
    }

    .ps-mob-icon[data-step="3"] {
        left: calc(74% - 20px);
        top: 22%;
        width: 26%;
    }

    /* 활성 공정 라벨 (공정 이름 + 화살표) */
    .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%);
    }

    .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 라벨 위치 (아이콘 top과 동일) */
    .ps-mobile-step-label[data-step="0"] {
        left: calc(12% + 8px);
        top: 10%;
    }

    .ps-mobile-step-label[data-step="1"] {
        left: 35%;
        top: 26%;
    }

    .ps-mobile-step-label[data-step="2"] {
        left: calc(60% - 10px);
        top: 27%;
    }

    .ps-mobile-step-label[data-step="3"] {
        left: calc(87% - 25px);
        top: calc(22% + 20px);
    }

    /* ── 모바일 하단 조절 영역 래퍼 ── */
    .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 — 1584px 고정폭 → 스크롤 */
    .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;
    }

    /* ── 제품설비: 모바일 반응형 (피그마 38:9189) ── */
    .equip-box {
        width: 100%;
        height: auto;
        flex-direction: column;
        padding: 16px;
        gap: 20px;
        border-radius: 16px;
    }

    .equip-img-box {
        width: 100%;
        height: auto;
        border-radius: 20px;
    }

    .equip-info {
        gap: 20px;
        padding-top: 0;
    }

    .equip-title {
        font-size: 26px;
        line-height: 150%;
    }

    .equip-desc {
        font-size: 16px;
        line-height: 160%;
        color: #4E4E4E;
    }

    .equip-tags {
        gap: 6px;
    }

    .equip-tags-row {
        flex-wrap: wrap;
        gap: 6px;
    }

    .equip-tag {
        font-size: 16px;
        padding: 10px 18px;
        width: 145px !important; /* 검수 0731: 모바일 태그 너비 145px 통일 (base auto 오버라이드) */
    }
}

/* ===== 제품등급 테이블 ===== */
.grade-table {
    display: flex;
    flex-direction: row;
    width: 1584px;
    height: 600px;
}

.grade-left {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
}

.grade-col {
    display: flex;
    flex-direction: column;
    width: 342px;
    flex-shrink: 0;
}

.grade-th {
    height: 100px;
    background: linear-gradient(0deg, #F9FAFE, #F9FAFE), #FCFDFF;
    border-top: 1px solid #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 💡 가로 방향 중앙 정렬 */
    align-items: center;
    /* 세로 방향 중앙 정렬 */
    width: 100%;
    padding: 0 24px;
    font-size: 24px;
    font-weight: 700;
    color: #363636;
    box-sizing: border-box;
}

.grade-td {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 18px 24px;
    background: #FFFFFF;
    border-top: 1px solid #D6D6D6;
    border-right: 1px solid #D6D6D6;
    font-size: 20px;
    font-weight: 400;
    color: #363636;
    box-sizing: border-box;
}

.grade-td-100 {
    height: 100px;
}

.grade-td-200 {
    height: 200px;
}

.grade-right {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.grade-micro-cells {
    display: flex;
    flex-direction: row;
    flex: 1;
}

.grade-micro-cell {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 18px 24px;
    background: #FFFFFF;
    border-top: 1px solid #D6D6D6;
    border-right: 1px solid #D6D6D6;
    font-size: 20px;
    font-weight: 400;
    color: #363636;
    box-sizing: border-box;
    gap: 8px;
    line-height: 160%;
}

.grade-row:last-child .grade-td,
.grade-row:last-child .grade-micro-cell {
    border-bottom: none !important;
}

.grade-micro-cell:last-child {
    border-right: none;
}

.grade-footnote {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    font-family: 'Pretendard';
    font-size: 16px;
    line-height: 160%;
    color: #363636;
}

.grade-footnote strong {
    font-weight: 700;
}



.spec-chart-panel {
    width: 890px;
    background: #F8F9FB;
    border-radius: 30px;
    padding: 40px;
    box-sizing: border-box;
}

.spec-chart-inner {
    width: 810px;
    height: 416px;
    position: relative;
    font-family: 'Pretendard', sans-serif;
}

.chart-border-rect {
    position: absolute;
    left: 131px;
    top: 36px;
    width: 580px;
    height: 344px;
    border: 1px solid #7A7A7A;
}

.chart-dashed-area {
    position: absolute;
    left: 174px;
    top: 79px;
    width: 494px;
    height: 258px;
    background: #F1EDEA;
    border: 1px dashed #A7A7A7;
    z-index: 1;
}

.chart-orange-area {
    position: absolute;
    left: 174px;
    top: 79px;
    width: 494px;
    height: 219px;
    background: #FAC699;
    border: 1px solid #F27100;
    z-index: 2;
}

.chart-text {
    position: absolute;
    font-size: 18px;
    font-weight: 500;
    color: #7A7A7A;
    z-index: 3;
    pointer-events: none;
}

.chart-axis-label {
    position: absolute;
    font-size: 16px;
    font-weight: 400;
    color: #4E4E4E;
    white-space: nowrap;
    pointer-events: none;
}

.chart-tick-val {
    position: absolute;
    font-size: 18px;
    font-weight: 500;
    color: #000;
    pointer-events: none;
}

.chart-tick-h {
    position: absolute;
    height: 0;
    border-top: 1px dashed #A7A7A7;
    pointer-events: none;
}

.chart-tick-v {
    position: absolute;
    width: 0;
    border-left: 1px solid #7A7A7A;
    pointer-events: none;
}

/* ===== 제품설비 ===== */
.equip-box {
    width: 100%;
    max-width: 1680px;
    background: #F1F3F7;
    border-radius: 30px;
    padding: clamp(24px, 2.5vw, 48px);
    display: flex;
    flex-direction: row;
    gap: clamp(24px, 2.5vw, 48px);
    box-sizing: border-box;
    min-height: 0;
    align-items: flex-start;
}

.equip-img-box {
    width: 45%;
    aspect-ratio: 1 / 1;
    background: #FFFFFF;
    border-radius: 20px;
    overflow: hidden;
    flex-shrink: 0;
}

.equip-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.equip-info {
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 6.25vw, 120px);
    padding-top: 20px;
    flex: 1;
    min-width: 0;
}

.equip-texts {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.25vw, 24px);
}

.equip-title {
    font-size: clamp(24px, 2.29vw, 44px);
    font-weight: 700;
    line-height: 150%;
    color: #363636;
}

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

.equip-tags {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.equip-tags-row {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
}

.equip-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 0.625vw, 12px) clamp(14px, 1.25vw, 24px);
    background: #FFFFFF;
    border-radius: 999px;
    font-size: clamp(16px, 1.14vw, 22px);
    font-weight: 400;
    color: #363636;
    white-space: nowrap;
    width: auto !important;
}


/* Visibility Classes */
.m-br {
    display: none;
}

@media (max-width: 767px) {
    .m-br {
        display: inline;
    }

    .desktop-only {
        display: none;
    }
}

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

/* 제품등급 테이블 전용 반응형 분기 */
@media (max-width: 767px) {
    .grade-desktop-only {
        display: none !important;
    }
}

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

/* 제품등급 테이블 데스크탑 스타일 (1920px 기준) */
@media (min-width: 768px) {
    .grade-table-wrap {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

    .grade-section-desktop {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: clamp(20px, 4.8vw, 48px);
        gap: 20px;
        width: 100%;
        max-width: 1680px;
        height: auto;
        border-radius: 30px;
        background: transparent;
        box-sizing: border-box;
        margin: 0 auto;
    }

    .grade-container-new {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        padding: 0px;
        width: 1584px;
        height: 600px;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    .grade-left-part-new {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px;
        width: 684px;
        height: 600px;
        flex: none;
        order: 0;
        flex-grow: 1;
    }

    .grade-col-new {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 0px;
        width: 342px;
        height: 600px;
        flex: none;
        flex-grow: 1;
    }

    .grade-header-new {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0px 24px;
        gap: 20px;
        width: 342px;
        height: 100px;
        background: linear-gradient(0deg, #F9FAFE, #F9FAFE), #FCFDFF;
        border-top: 1px solid #000000;
        flex: none;
        order: 0;
        align-self: stretch;
        flex-grow: 0;
    }

    .grade-header-text {
        width: auto;
        height: 36px;
        font-family: 'Pretendard';
        font-style: normal;
        font-weight: 700;
        font-size: 24px;
        line-height: 150%;
        color: #363636;
        flex: none;
        order: 0;
        flex-grow: 0;
    }

    .grade-body-new {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        width: 342px;
        height: 500px;
        flex: none;
        order: 1;
        align-self: stretch;
        flex-grow: 0;
    }

    .grade-row-new {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 18px 24px;
        gap: 20px;
        width: 342px;
        height: 100px;
        background: #FFFFFF;
        border-width: 1px 1px 0px 0px;
        border-style: solid;
        border-color: #D6D6D6;
        flex: none;
        align-self: stretch;
        flex-grow: 0;
    }

    .grade-row-text {
        margin: 0;
        width: 294px;
        height: auto;
        font-family: 'Pretendard';
        font-style: normal;
        font-weight: 400;
        font-size: 20px;
        line-height: 160%;
        color: #363636;
        flex: none;
        order: 0;
        flex-grow: 1;
        text-align: left;
    }

    .grade-col-tolerance-new {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 0px;
        width: 342px;
        height: 600px;
        flex: none;
        order: 1;
        flex-grow: 1;
    }

    .grade-row-200-new {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 18px 24px;
        gap: 20px;
        width: 342px;
        height: 200px;
        background: #FFFFFF;
        border-width: 1px 1px 0px 0px;
        border-style: solid;
        border-color: #D6D6D6;
        flex: none;
        align-self: stretch;
        flex-grow: 0;
    }

    .grade-right-part-new {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 0px;
        width: 900px;
        height: 600px;
        flex: none;
        order: 1;
        align-self: stretch;
        flex-grow: 0;
    }

    .grade-header-900-new {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0px 24px;
        gap: 20px;
        width: 900px;
        height: 100px;
        background: linear-gradient(0deg, #F9FAFE, #F9FAFE), #FCFDFF;
        border-top: 1px solid #000000;
        flex: none;
        order: 0;
        align-self: stretch;
        flex-grow: 0;
    }

    .grade-body-row-new {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding: 0px;
        width: 900px;
        height: 500px;
        flex: none;
        order: 1;
        align-self: stretch;
        flex-grow: 1;
    }

    .grade-cell-new {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 18px 24px;
        gap: 20px;
        width: 300px;
        height: 500px;
        background: #FFFFFF;
        border-width: 1px 1px 0px 0px;
        border-style: solid;
        border-color: #D6D6D6;
        flex: none;
        align-self: stretch;
        flex-grow: 1;
    }

    .grade-cell-last-new {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 18px 24px;
        gap: 20px;
        width: 300px;
        height: 500px;
        background: #FFFFFF;
        border-top: 1px solid #D6D6D6;
        flex: none;
        align-self: stretch;
        flex-grow: 1;
    }

    .grade-cell-text-new {
        margin: 0;
        width: 252px;
        height: auto;
        font-family: 'Pretendard';
        font-style: normal;
        font-weight: 400;
        font-size: 20px;
        line-height: 160%;
        color: #363636;
        flex: none;
        order: 0;
        flex-grow: 1;
        text-align: left;
    }

    .grade-footnote-new {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px;
        gap: 4px;
        width: 300px;
        height: 26px;
        flex: none;
        order: 1;
        flex-grow: 0;
    }

    .footnote-tag-new {
        width: auto;
        height: 26px;
        font-family: 'Pretendard';
        font-style: normal;
        font-weight: 700;
        font-size: 16px;
        line-height: 160%;
        color: #363636;
        flex: none;
        order: 0;
        flex-grow: 0;
    }

    .footnote-desc-new {
        width: auto;
        height: 26px;
        font-family: 'Pretendard';
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 160%;
        color: #363636;
        flex: none;
        order: 1;
        flex-grow: 0;
    }
}

/* 제품설비 데스크탑 스타일 (1920px 기준) */
@media (min-width: 768px) {
    .equip-box {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding: clamp(24px, 2.5vw, 48px);
        gap: clamp(24px, 2.5vw, 48px);
        width: 100%;
        max-width: 1680px;
        min-height: 0;
        height: auto;
        background: #F1F3F7;
        border-radius: 30px;
        box-sizing: border-box;
        margin: 30px auto;
    }

    .equip-img-box {
        width: 45%;
        aspect-ratio: 1 / 1;
        background: #FFFFFF;
        border-radius: 20px;
        flex-shrink: 0;
        overflow: hidden;
    }

    .equip-img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .equip-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 0 0;
        gap: clamp(40px, 6.25vw, 120px);
        width: 100%;
        height: auto;
        flex: 1;
        min-width: 0;
        box-sizing: border-box;
    }

    .equip-texts {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(12px, 1.25vw, 24px);
        width: 100%;
        height: auto;
    }

    .equip-title {
        width: 100%;
        height: auto;
        font-family: 'Pretendard';
        font-weight: 700;
        font-size: clamp(24px, 2.29vw, 44px);
        line-height: 150%;
        color: #363636;
        margin: 0;
    }

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

    .equip-tags {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
        height: auto;
    }

    .equip-tags-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        width: auto;
        height: auto;
        flex-wrap: wrap;
    }

    .equip-tags-row.row-2 {
        width: auto;
    }

    .equip-tag {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: clamp(8px, 0.625vw, 12px) clamp(14px, 1.25vw, 24px);
        gap: 8px;
        height: auto;
        background: #FFFFFF;
        border-radius: 999px;
        box-sizing: border-box;
    }

    .equip-tag-text {
        font-family: 'Pretendard';
        font-weight: 400;
        font-size: clamp(16px, 1.14vw, 22px);
        line-height: 160%;
        text-align: center;
        color: #363636;
        white-space: nowrap;
    }
}

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

@media (max-width: 767px) {
    /* 검수: QT 공정은 한 줄이라 aspect-ratio 대신 고정 높이 180px */
    .ps-mobile-diagram {
        height: 180px;
    }

    .ps-mob-icon[data-step="0"] {
        transform: translateX(-9px);
    }

    .ps-mob-icon[data-step="1"] {
        transform: scale(1.07) translateX(-6.1px) translateY(1.5px);
        transform-origin: left bottom;
    }

    .ps-mob-icon[data-step="2"] {
        transform: translateX(-0.5px) translateY(-2.1px);
    }

    .ps-mob-icon[data-step="3"] {
        transform: scale(1.214);
        transform-origin: left bottom;
    }

    .ps-mobile-step-label[data-step="3"] {
        left: calc(87% - 15px);
    }
}

/* ═══ 태블릿 등급표(grade) 글자 축소 + 횡스크롤 ═══
   base 선언(min-width:768px 블록)보다 반드시 뒤에 위치해야 오버라이드 됨 */
@media (max-width: 1439px) {
    .grade-section-desktop {
        padding: 0;
        border-radius: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

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

    .grade-header-text {
        font-size: 18px;
        height: auto;
    }

    .grade-row-text {
        font-size: 16px;
    }

    .grade-cell-text-new {
        font-size: 16px;
    }

    .footnote-tag-new,
    .footnote-desc-new {
        font-size: 14px;
    }

    /* ── 대응규격 이미지 인라인 max-width 해제 ── */
    .acc-content-box>div[style*="max-width: 890px"] {
        max-width: 100% !important;
        border-radius: 20px !important;
    }

    /* ── 제품설비 equip 태블릿 ── */
    .equip-box {
        border-radius: 20px;
    }

    .equip-img-box {
        border-radius: 16px;
    }
}

@media (min-width: 1920px) {
    .equip-img-box {
        width: 704px;
        height: 704px;
    }
}

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

    .acc-content-box,
    .process-card,
    .ps-progress,
    .spec-chart-panel,
    .equip-box {
        border-radius: 20px;
    }

    /* 검수 0714: 텍스트가 길어 콘텐츠가 이미지보다 커질 때, 좌측 이미지를 콘텐츠 높이에 맞춰 fill(하단 빈공간 제거) */
    .equip-box {
        align-items: stretch;
    }

    .equip-img-box {
        aspect-ratio: auto;
        height: auto;
        align-self: stretch;
    }
}