/* Figma 33:43 — 1920px 원본. 기존 클래스·공통 reset·Swiper를 재사용합니다. */
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../../font/NotoSansKR-Light.woff2') format('woff2');
}
:root {
    --brand-red-500: #e60021;
    --brand-red-700: #b7001b;
    --brand-neutral-950: #161519;
    --brand-neutral-500: #626773;
    --brand-neutral-200: #dde1e5;
    --neutral-50: #f7f8fa;
    --neutral-0: #fff;
    --primary-default: var(--brand-red-500);
    --primary-hover: var(--brand-red-700);
    --background-default: var(--neutral-50);
    --surface-default: var(--neutral-0);
    --text-primary: var(--brand-neutral-950);
    --text-muted: var(--brand-neutral-500);
    --text-inverse: #fff;
    --border-default: var(--brand-neutral-200);
    --brand-blue: #08337d;
    --header-height: 80px;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
}
html,
body {
    overflow-x: clip;
}
body {
    background: #fff;
    color: var(--text-primary);
    font-family: 'Noto Sans KR', sans-serif;
}
main:focus {
    outline: none;
}
section,
figure,
#contact {
    scroll-margin-top: 24px;
}
.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 200;
    padding: 12px 20px;
    transform: translateY(-160%);
    clip-path: inset(50%);
    background: #fff;
    color: #161519;
}
.skip-link:focus {
    transform: none;
    clip-path: none;
}

/* 25:4 — 스크롤 방향에 따라 숨고, 위쪽 탐색 시 다시 나타나는 헤더 */
.site-header {
    position: fixed;
    z-index: 100;
    inset: 0 0 auto;
    color: #fff;
    transform: translateY(0);
    transition:
        transform 0.24s ease,
        background-color 0.2s,
        color 0.2s;
}
.site-header.is-scrolled,
.site-header.mega-open {
    background: var(--background-default);
    color: var(--text-primary);
    box-shadow: 0 8px 26px #0001;
}
.site-header.is-hidden {
    transform: translateY(calc(-100% - 12px));
    box-shadow: none;
    pointer-events: none;
}
.site-header__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    column-gap: clamp(24px, 4vw, 80px);
    padding-inline: 4.453125%;
}
.site-logo {
    grid-column: 1;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    height: var(--header-height);
    min-width: 0;
}
.site-logo__media {
    position: relative;
    display: block;
    width: 300px;
    max-width: 100%;
}
.site-logo img {
    width: 100%;
    height: auto;
}
.site-logo__dark {
    position: absolute;
    inset: 0;
    opacity: 0;
}
.is-scrolled .site-logo__light,
.mega-open .site-logo__light {
    opacity: 0;
}
.is-scrolled .site-logo__dark,
.mega-open .site-logo__dark {
    opacity: 1;
}
.site-nav {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    width: min(100%, 540px);
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.site-nav__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.site-nav__group {
    min-width: 0;
}
.site-nav__item {
    display: block;
    width: 100%;
    height: var(--header-height);
    padding-inline: 8px;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
}
.site-nav__submenu {
    display: none;
    flex-direction: column;
    padding: 12px 0 24px;
}
.mega-open .site-nav__group.is-expanded .site-nav__submenu {
    display: flex;
}
.site-nav__submenu a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
}
.site-nav__item:hover,
.site-nav__item:focus-visible,
.site-nav__submenu a:hover {
    color: var(--primary-default);
}
.site-header-right {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    align-items: center;
    height: var(--header-height);
}
.site-lang {
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
}
.menu-toggle {
    display: none;
}

/* 20:91 — 히어로와 130px 컨트롤 */
.hero-sec {
    position: relative;
    color: #fff;
}
.hero-sec .swiper {
    height: 920px;
}
.hero-sec .swiper-slide {
    position: relative;
}
.hero-sec .swiper-slide > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-sec .swiper-slide::after {
    position: absolute;
    inset: 0;
    content: '';
    background: #0003;
}
.hero-copy {
    position: absolute;
    z-index: 2;
    left: 10px;
    right: 20px;
    bottom: 179px;
    pointer-events: none;
}
.hero-title {
    font-size: 72px;
    font-weight: 700;
    line-height: 1.444444;
    letter-spacing: 0;
}
.swiper-controls {
    position: absolute;
    z-index: 3;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: minmax(0, 908fr) minmax(0, 847fr);
    align-items: center;
    gap: 65px;
    height: 130px;
    padding-inline: 50px;
    border-top: 1px solid #ffffff80;
}
.hero-sec .swiper-controls .swiper-pagination {
    position: static;
    display: grid;
    grid-template-columns: 292fr 291fr 305fr;
    gap: 10px;
    width: 100%;
    transform: none;
}
.hero-sec .swiper-controls .swiper-pagination-bullet {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    height: 85px;
    padding: 14px 30px 14px 12px;
    margin: 0;
    border-radius: 0;
    border: 1px solid transparent;
    background: #ffffff4d;
    color: #fff;
    text-align: left;
    opacity: 1;
    transition:
        background-color 0.2s,
        border-color 0.2s;
}
.hero-sec .swiper-controls .swiper-pagination-bullet-active {
    background: #ffffff59;
    border-color: #ffffff80;
}
.hero-thumb {
    flex: 0 0 100px;
    width: 100px;
    height: 55px;
    object-fit: cover;
}
.hero-thumb-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.22;
}
.hero-pagination-index {
    position: absolute;
    top: 14px;
    right: 10px;
    color: #ffffff99;
    font-size: 12px;
    line-height: 15px;
}
.hero-solution {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 34px;
    height: 130px;
    padding-top: 27px;
    padding-left: 34px;
}
.hero-solution::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    content: '';
    background: url('../img/figma/hero-divider.svg') center/1px 100% no-repeat;
}
.hero-solution-label {
    flex-shrink: 0;
    padding-top: 10px;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}
.hero-solution-description {
    flex: 1;
    min-width: 0;
    padding-top: 10px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
}
.hero-solution-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 133px;
    height: 40px;
    margin-top: 10px;
    padding: 12px;
    border-radius: 30px;
    background: #fff;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
}
.hero-solution-link:hover {
    background: #e9ebee;
}
.hero-sec .swiper-scrollbar.swiper-scrollbar-horizontal {
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    height: 2px;
    border-radius: 0;
    background: transparent;
}
.hero-sec .swiper-scrollbar-drag {
    border-radius: 0;
    background: #ffffffa6;
}

/* 원강금속의 원래 색상(백색 → 연회색 → 브랜드 파랑)을 복원하고
   배경·텍스트·사진을 같은 스크롤 진행도에 따라 자연스럽게 교차시킵니다. */
.card-stack {
    position: relative;
    isolation: isolate;
    background: var(--background-default);
}
.card-stack__deck {
    position: relative;
}
/* 고정 장면 내부의 절대 배치 요소는 스냅 좌표가 될 수 없으므로,
   일반 문서 흐름에 연결된 사업 영역 안에 별도의 스냅 기준점을 둡니다. */
.card-stack__snap-points {
    display: none;
}
/* 세 장면에 가까이 멈추면 정렬하되, 다른 페이지 구간을 강제로 넘기지 않습니다. */
@media (prefers-reduced-motion: no-preference) and (min-height: 601px) {
    html {
        scroll-snap-type: y proximity;
    }
    .card-stack.is-enhanced .card-stack__snap-points {
        position: absolute;
        inset: 0;
        display: block;
        pointer-events: none;
    }
    .card-stack.is-enhanced .card-stack__snap-point {
        position: absolute;
        left: 0;
        width: 1px;
        height: 1px;
        scroll-snap-align: start;
        scroll-snap-stop: normal;
        /* 기존 html scroll-padding-top(헤더 높이)만큼 상쇄하여
           스냅이 JS의 0 / 1 / 2 장면 좌표와 정확히 일치하도록 합니다. */
        scroll-margin-top: calc(-1 * var(--header-height));
    }
    .card-stack.is-enhanced .card-stack__snap-point[data-snap-index='0'] { top: 0; }
    .card-stack.is-enhanced .card-stack__snap-point[data-snap-index='1'] { top: 130svh; }
    .card-stack.is-enhanced .card-stack__snap-point[data-snap-index='2'] { top: 260svh; }
}
.steel-service {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding: calc(60px + var(--header-height)) 20px 112px;
    background: var(--service-background);
}
.steel-service--casting {
    --service-background: #fff;
}
.steel-service--alloy {
    --service-background: var(--brand-neutral-200);
}
.steel-service--stainless {
    --service-background: var(--brand-blue);
    color: #fff;
}
/* 모션 설정이 허용되는 경우에만 한 화면을 고정하고 내용끼리 교차시킵니다. */
.card-stack.is-enhanced {
    height: 360svh;
}
.card-stack.is-enhanced .card-stack__deck {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
}
.card-stack.is-enhanced .steel-service {
    position: absolute;
    inset: 0;
    height: 100%;
    min-height: 0;
    background: transparent;
    visibility: hidden;
    pointer-events: none;
    isolation: isolate;
}
.card-stack.is-enhanced .steel-service:nth-child(1) { z-index: 1; }
.card-stack.is-enhanced .steel-service:nth-child(2) { z-index: 2; }
.card-stack.is-enhanced .steel-service:nth-child(3) { z-index: 3; }
.card-stack.is-enhanced .steel-service.is-visible {
    visibility: visible;
}
/* 다음 장면의 배경만 서서히 불투명해집니다. 색상을 강제로 덮어쓰지 않습니다. */
.card-stack.is-enhanced .steel-service::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--service-background);
    opacity: var(--sequence-background-opacity, 1);
    pointer-events: none;
}
.card-stack.is-enhanced .steel-service__inner {
    position: relative;
    z-index: 1;
}
.card-stack.is-enhanced .steel-service__text {
    opacity: var(--sequence-text-opacity, 1);
    transform: translate3d(0, var(--sequence-text-y, 0px), 0);
    will-change: opacity, transform;
}
.card-stack.is-enhanced .steel-service__image {
    opacity: var(--sequence-image-opacity, 1);
    transform: translate3d(0, var(--sequence-image-y, 0px), 0);
    will-change: opacity, transform;
}
.card-stack__navigation {
    position: sticky;
    z-index: 5;
    bottom: 28px;
    display: flex;
    gap: 8px;
    width: max-content;
    margin: -84px 40px 24px auto;
    padding: 8px;
    border-radius: 40px;
    background: #161519cc;
    color: #fff;
}
.card-stack.is-enhanced .card-stack__navigation {
    position: absolute;
    right: clamp(20px, 4vw, 70px);
    bottom: max(24px, env(safe-area-inset-bottom));
    margin: 0;
}
.card-stack__nav {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #ffffffb3;
    font-size: 13px;
    font-weight: 700;
    transition: background-color 0.2s, color 0.2s;
}
.card-stack__nav.is-current,
.card-stack__nav:hover,
.card-stack__nav:focus-visible {
    background: #fff;
    color: var(--text-primary);
}
.card-stack__nav:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}
.steel-service__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 100px;
    width: min(100%, 1520px);
    margin-inline: auto;
}
.steel-service__label {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 30px;
    background: #e9ebee;
    color: var(--text-muted);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4375;
}
.steel-service__title {
    font-size: 60px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.9px;
}
.steel-service--casting .steel-service__title {
    line-height: 1.45;
}
.steel-service__text p {
    margin-top: 26px;
    color: var(--text-muted);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
}
.steel-service--stainless .steel-service__text p {
    color: #fff;
}
.steel-service__image {
    width: 100%;
    height: 278px;
    object-fit: cover;
    border-radius: 12px;
}
.steel-service--casting .steel-service__image {
    height: 282.212px;
}

/* 69:232 — 75% 암전 배경과 실적 숫자.
   프레임은 원본 그대로 두고, 한 번의 휠 이동에 해당하는 거리만큼만 잠시 붙잡습니다. */
.company-achievements {
    position: relative;
    height: 1002px;
}
.company-achievements__frame {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background:
        linear-gradient(#000000bf, #000000bf),
        url('../img/figma/factory.png') center/cover;
    color: #fff;
}
.company-achievements__content {
    width: calc(100% - 418px);
}
.company-achievements h2 {
    font-size: 48px;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
}
.company-achievements__stats {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-top: 133px;
}
.company-achievements__stats > div {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}
.company-achievements__stats dd {
    font-size: 64px;
    font-weight: 500;
    line-height: 1.45;
    white-space: nowrap;
}
.company-achievements__stats dt {
    margin-top: 10px;
    color: #ffffff99;
    font-size: 20px;
    line-height: 1.45;
}
.stat-value {
    font-variant-numeric: tabular-nums;
}
.stat-roller {
    display: inline-flex;
    align-items: flex-end;
    white-space: nowrap;
    line-height: 1;
}
.stat-digit {
    display: inline-block;
    position: relative;
    width: 0.555em;
    height: 1em;
    overflow: hidden;
    line-height: 1;
    text-align: center;
    vertical-align: bottom;
}
.stat-digit__strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    transform: translate3d(0, 0, 0);
}
.stat-digit__step {
    display: block;
    flex: 0 0 1em;
    width: 100%;
    height: 1em;
    line-height: 1;
}
.stat-static {
    display: inline-block;
    line-height: 1;
}

/* 188:673 — 원본 사진과 SVG 오버레이. 고정은 바깥 스크롤 영역이 담당합니다. */
.product-showcase-scroll {
    position: relative;
}
.product-showcase {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* 제품 CTA 네 칸을 한 장면으로 유지하고, 잠시 읽고 누를 여유를 줍니다.
   좁은 화면의 2열·1열 목록에는 적용하지 않으며 스크롤 입력을 차단하지 않습니다. */
@media (min-width: 1101px) and (min-height: 760px) and (prefers-reduced-motion: no-preference) {
    .product-showcase-scroll {
        --cta-stage-height: min(920px, 100svh);
        height: calc(var(--cta-stage-height) + clamp(180px, 25svh, 260px));
    }
    .product-showcase-scroll > .product-showcase {
        position: sticky;
        top: 0;
        height: var(--cta-stage-height);
    }
    .product-showcase-scroll .product-panel {
        height: var(--cta-stage-height);
    }
}
.product-panel {
    position: relative;
    isolation: isolate;
    min-width: 0;
    height: 920px;
    color: #fff;
}
.product-panel__image {
    position: absolute;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-panel::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: '';
    background: url('../img/figma/product-shade.svg') center/100% 100%;
}
.product-panel::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: '';
    background: url('../img/figma/product-active-shade.svg') center/100% 100%;
    opacity: 0;
    transition: opacity 0.35s;
}
.product-panel:hover::after,
.product-panel:focus-within::after {
    opacity: 1;
}
.product-panel__reveal {
    opacity: 0;
    visibility: hidden;
    transform: translateY(24px);
    transition:
        opacity 0.3s,
        transform 0.4s,
        visibility 0.3s;
}
.product-panel:hover .product-panel__reveal,
.product-panel:focus-within .product-panel__reveal {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.product-panel:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -6px;
}
.product-panel__content {
    padding: 310px 18.75% 0;
}
.product-panel__title {
    font-size: 34px;
    font-weight: 700;
    line-height: 41px;
    white-space: nowrap;
}
.product-panel p {
    margin-top: 15px;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: -0.15px;
}
.product-panel p span {
    display: block;
}
.product-panel p span + span {
    margin-top: 10.4px;
}
.product-panel__detail {
    display: inline-flex;
    align-items: center;
    gap: 21px;
    height: 40px;
    margin-top: 67.6px;
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
}
.detail-icon {
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
}
.detail-arrow {
    position: absolute;
    top: 13.1px;
    left: 9.1px;
}
.product-panel__detail:hover .detail-icon {
    transform: translateX(4px);
}
.product-panel__actions {
    display: flex;
    gap: 10px;
    margin-top: 32px;
}
.product-panel__actions > * {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
    height: 70px;
    padding: 0 16px;
    background: url('../img/figma/product-action.svg') center/100% 100%;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}
.product-panel__actions img {
    flex-shrink: 0;
    object-fit: contain;
}

/* 85:54 — 일정한 간격의 좌우 교차 배치와 아래에서 위로 등장 */
.process-gallery {
    padding-block: 5.364583333vw;
    background: #fff;
}
.process-gallery h2 {
    font-size: clamp(64px, 6.666666667vw, 120px);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: 0.333333333vw;
}
.process-gallery__items {
    display: flex;
    flex-direction: column;
    gap: clamp(96px, 8.333333333vw, 160px);
    width: calc(100% - 112px);
    margin: 12.489583333vw auto 0;
}
.process-item {
    align-self: flex-start;
    min-width: 0;
    width: calc(50% - 32px);
}
.process-item:nth-child(even) {
    align-self: flex-end;
    --reveal-x: 40px;
}
.process-item:nth-child(odd) {
    --reveal-x: -40px;
}
.process-item__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 960/948;
}
.process-item__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.process-item--pattern .process-item__media {
    aspect-ratio: 960/733;
}
.process-item--pattern img {
    position: absolute;
    top: -15.55%;
    height: 130.97%;
    object-fit: fill;
}
.process-item--housing img {
    position: absolute;
    top: -0.67%;
    width: 100.21%;
    max-width: none;
    height: 101.27%;
}
.process-item figcaption {
    padding-top: 12px;
    font-size: 2.8125vw;
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.scroll-reveal {
    opacity: 0;
    transform: translate3d(var(--reveal-x, 0px), 96px, 0);
    transition:
        opacity 0.8s,
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-reveal.is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* 85:53 — 특허증을 펼친 11개 인증서 */
.certifications {
    min-height: 1087px;
    padding: 50px 5.833333333% 193px;
    background: #fff;
}
.certifications h2 {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 2.4px;
}
.certificate-list {
    /* 각 카드의 flex-basis를 개별 애니메이션으로 바꾸면 전환 중 가로폭 합이
       줄거나 경계가 한쪽으로 밀립니다. 11개 트랙을 한 번에 전환해
       선택을 빠르게 바꿔도 인증서 행 전체를 항상 100% 채웁니다. */
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr))
        minmax(0, 4.180602fr)
        repeat(5, minmax(0, 1fr));
    height: 700px;
    margin-top: 28px;
    transition: grid-template-columns 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.certificate-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #b8bec5;
    background: #fff;
}
.certificate-card.is-active {
    z-index: 1;
}
.certificate-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.certificate-card:focus-visible {
    z-index: 1;
    outline: 3px solid var(--brand-blue);
    outline-offset: 3px;
}

/* 184:55 — 4열 3행 파트너 로고 */
.partners {
    padding: 160px 7.083333333%;
    text-align: center;
}
.partners__eyebrow {
    color: #1d4175;
    font-size: 26px;
    font-weight: 700;
    line-height: 32px;
}
.partners h2 {
    margin-top: 32px;
    color: #1c2026;
    font-size: 64px;
    font-weight: 700;
    line-height: 96px;
}
.partner-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 80px;
    margin-top: 96px;
}
.partner-list li {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 160px;
}
.partner-list img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* 187:583 — 원본 SVG 배경 위의 유동 그리드 */
.site-footer {
    position: relative;
    padding: 212.981px 1.061354167% 31.849px 2.00471875%;
    background: var(--background-default) url('../img/figma/footer-background.svg') left -113.098px/105.9234375% auto
        no-repeat;
}
.footer-panel {
    position: relative;
    min-height: 627.17px;
    padding: 61.132px 3.284668% 82.887px;
    background: #222 url('../img/figma/footer-panel.svg') center/100% 100% no-repeat;
    color: #bebebe;
}
.footer-brand {
    display: block;
    width: 258.11px;
}
.footer-brand img {
    width: 100%;
    height: auto;
}
.footer-main {
    display: grid;
    grid-template-columns: 55% 45%;
    margin-top: 67.999px;
}
.footer-main h2 {
    margin-bottom: 19.887px;
    color: #f5f5f5;
    font-size: 18.113px;
    font-weight: 700;
    line-height: 22px;
}
.footer-contacts {
    display: grid;
    grid-template-columns: 47.17% 52.83%;
    row-gap: 51.32px;
}
.footer-contacts address {
    display: flex;
    flex-direction: column;
    gap: 7.17px;
    font-size: 16.981px;
    font-style: normal;
    line-height: 20px;
}
.footer-navigation {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 0.74fr;
}
.footer-navigation ul {
    display: flex;
    flex-direction: column;
    gap: 23.019px;
}
.footer-navigation li {
    font-size: 16.981px;
    line-height: 20px;
}
.footer-main a:hover,
.footer-legal button:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.footer-legal {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 62.019px;
    margin-top: 85.283px;
    padding-top: 43.019px;
    background: url('../img/figma/footer-divider.svg') left top/100% 1.132px no-repeat;
}
.footer-legal > div {
    display: flex;
    gap: 39.755px;
}
.footer-legal button {
    color: #eee;
    font-size: 15.849px;
    font-weight: 700;
    line-height: 19px;
}
.footer-legal p {
    color: #ddd;
    font-size: 15.849px;
    line-height: 19px;
    text-align: right;
}
.back-to-top {
    position: absolute;
    top: 31.698px;
    right: 3.284668%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 38px;
    width: 49.811px;
    height: 133.585px;
    padding-top: 17px;
    background: url('../img/figma/top-background.svg') center/100% 100%;
    color: #b9c7e8;
}
.back-to-top span {
    writing-mode: vertical-rl;
    font-size: 15.849px;
    line-height: 19px;
}
.back-to-top:hover {
    filter: brightness(1.3);
}

/* 실제 상세 콘텐츠와 인증서 확대 */
.detail-dialog {
    width: min(880px, calc(100% - 32px));
    max-height: calc(100dvh - 48px);
    margin: auto;
    padding: 28px;
    overflow-y: auto;
    border: 0;
    border-radius: 12px;
    background: #fff;
    color: var(--text-primary);
}
.detail-dialog::backdrop {
    background: #000b;
}
.detail-dialog__header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
    background: var(--surface-default);
}
.detail-dialog h2 {
    font-size: 26px;
    font-weight: 700;
}
.dialog-close {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e9ebee;
    font-size: 32px;
    line-height: 1;
}
.detail-dialog__body > img {
    width: 100%;
    max-height: 52dvh;
    margin-bottom: 24px;
    object-fit: contain;
}
.detail-dialog--certificate {
    width: min(980px, calc(100% - 32px));
}
.detail-dialog--certificate .detail-dialog__body > img {
    max-height: none;
    margin-bottom: 0;
}
.detail-dialog p {
    line-height: 1.8;
}
.dialog-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}
.dialog-contact a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 20px;
    border-radius: 24px;
    background: var(--brand-blue);
    color: #fff;
}
body.dialog-open {
    overflow: hidden;
}

/* 화면 축소 시 글자와 조작 영역은 읽을 수 있는 크기로 유지 */
@media (max-width: 1700px) {
    .hero-title {
        font-size: clamp(44px, 3.75vw, 72px);
    }
    .hero-sec .swiper {
        height: max(720px, 47.916666667vw);
    }
    .site-logo__media {
        width: clamp(210px, 15.625vw, 300px);
    }
    .swiper-controls {
        gap: 24px;
        padding-inline: 32px;
    }
    .hero-thumb {
        flex-basis: 5.2vw;
        width: 5.2vw;
    }
    .hero-thumb-title {
        font-size: 12px;
    }
    .hero-sec .swiper-controls .swiper-pagination-bullet {
        gap: 8px;
        padding-left: 8px;
    }
    .hero-solution {
        gap: 18px;
        padding-left: 24px;
    }
    .hero-solution-description {
        font-size: 13px;
        line-height: 1.4;
    }
    .hero-solution-label,
    .hero-solution-link {
        font-size: 14px;
    }
    .hero-solution-link {
        min-width: 110px;
    }
    .hero-solution-break {
        display: none;
    }
    .steel-service__inner {
        width: min(100%, calc(100vw - 160px));
        gap: 5.208333333vw;
    }
    .steel-service__title {
        font-size: 3.125vw;
    }
    .steel-service__text p {
        font-size: 16px;
    }
    .product-panel {
        height: 47.916666667vw;
        min-height: 650px;
    }
    .product-panel__content {
        padding-top: max(220px, 16.145833333vw);
        padding-inline: 12%;
    }
    .product-panel__title {
        font-size: clamp(23px, 1.770833333vw, 34px);
    }
    .product-panel p {
        font-size: 15px;
        line-height: 1.8;
    }
    .product-panel__detail {
        margin-top: 48px;
        font-size: 16px;
    }
    .product-panel__actions > * {
        padding-inline: 12px;
        font-size: 12px;
    }
    .product-panel__actions img {
        max-width: 23px;
        height: auto;
    }
    .company-achievements {
        height: max(700px, 52.1875vw);
    }
    .certifications {
        min-height: auto;
        padding-bottom: 120px;
    }
    .certificate-list {
        height: 36.458333333vw;
    }
    .partners {
        padding-block: 8.333333333vw;
    }
    .partners h2 {
        font-size: 3.333333333vw;
        line-height: 1.5;
    }
    .partner-list {
        column-gap: 4.166666667vw;
    }
    .site-footer {
        padding-top: 180px;
    }
    .footer-main {
        grid-template-columns: 50% 50%;
    }
    .footer-contacts {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .footer-navigation {
        gap: 20px;
    }
    .footer-legal {
        margin-top: 60px;
    }
}
@media (max-width: 1100px) {
    .hero-sec .swiper {
        height: 820px;
    }
    .hero-copy {
        left: 24px;
        bottom: 230px;
    }
    .hero-title {
        font-size: 48px;
    }
    .swiper-controls {
        grid-template-columns: 1fr;
        gap: 14px;
        height: 204px;
        padding: 16px 24px;
    }
    .hero-sec .swiper-controls .swiper-pagination-bullet {
        height: 66px;
        padding: 7px 28px 7px 10px;
    }
    .hero-thumb {
        flex-basis: 78px;
        width: 78px;
        height: 50px;
    }
    .hero-thumb-title {
        font-size: 13px;
    }
    .hero-solution {
        align-items: center;
        gap: 20px;
        height: auto;
        padding: 12px 0 0;
        border-top: 1px solid #ffffff66;
    }
    .hero-solution::before {
        display: none;
    }
    .hero-solution-label,
    .hero-solution-description {
        padding: 0;
    }
    .hero-solution-link {
        margin: 0;
    }
    .steel-service__inner {
        width: calc(100% - 40px);
        gap: 36px;
    }
    .steel-service__image,
    .steel-service--casting .steel-service__image {
        height: 240px;
    }
    .steel-service__title {
        font-size: 36px;
    }
    .steel-service__text p {
        font-size: 14px;
    }
    .company-achievements__content {
        width: calc(100% - 100px);
    }
    .company-achievements h2 {
        font-size: 40px;
    }
    .company-achievements__stats dd {
        font-size: 50px;
    }
    .product-showcase {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .product-panel {
        height: 620px;
        min-height: 0;
    }
    .product-panel__content {
        padding: 175px 14% 0;
    }
    .product-panel__title {
        font-size: 30px;
    }
    .product-panel p {
        font-size: 16px;
    }
    .certifications h2 {
        font-size: 36px;
        letter-spacing: 1px;
    }
    .certificate-list {
        height: 410px;
    }
    .partner-list {
        margin-top: 70px;
        row-gap: 12px;
    }
    .partner-list li {
        height: 120px;
    }
    .site-footer {
        background-position-y: -30px;
        padding-top: 140px;
    }
    .footer-main {
        grid-template-columns: 1fr;
        gap: 48px;
        margin-top: 48px;
    }
    .footer-contacts {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
    .footer-navigation {
        grid-template-columns: repeat(4, 1fr);
    }
    .footer-legal {
        flex-direction: column;
        align-items: flex-start;
    }
}
@media (max-width: 850px) {
    :root {
        --header-height: 76px;
    }
    .site-header__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 16px;
        padding-inline: 22px;
    }
    .site-logo__media {
        width: clamp(170px, 31vw, 240px);
    }
    .site-header-right {
        grid-column: 2;
        gap: 20px;
    }
    .site-lang {
        font-size: 14px;
    }
    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        width: 44px;
        height: 44px;
        padding: 8px;
    }
    .menu-toggle span {
        display: block;
        width: 28px;
        height: 2px;
        background: currentColor;
    }
    .site-nav {
        grid-column: 1/-1;
        grid-row: 2;
        display: none;
        width: 100%;
        max-height: calc(100dvh - var(--header-height));
    }
    .mega-open .site-nav {
        display: block;
    }
    .site-nav__list {
        gap: 12px;
    }
    .site-nav__item {
        height: 44px;
        padding-inline: 0;
        color: var(--brand-blue);
        font-size: 16px;
        font-weight: 700;
    }
    .site-nav__submenu {
        padding: 0 0 20px;
    }
    .site-nav__submenu a {
        padding: 10px 0;
        font-size: 13px;
    }
}
@media (max-width: 600px) {
    .site-nav__list {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .site-nav__item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 48px;
        padding-inline: 8px;
        text-align: left;
    }
    .site-nav__item::after {
        content: '+';
        font-size: 22px;
        font-weight: 400;
    }
    .site-nav__item[aria-expanded='true']::after {
        content: '−';
    }
    .site-nav__submenu a {
        justify-content: flex-start;
        padding-inline: 16px;
        font-size: 14px;
        text-align: left;
    }
    section,
    figure,
    #contact {
        scroll-margin-top: 16px;
    }
    .hero-sec .swiper {
        height: 100svh;
        min-height: 660px;
        max-height: 920px;
    }
    .hero-sec .swiper-slide > img {
        object-position: 46% center;
    }
    .hero-copy {
        left: 20px;
        right: 20px;
        bottom: 205px;
    }
    .hero-title {
        font-size: clamp(30px, 8vw, 34px);
        line-height: 1.35;
        letter-spacing: -0.025em;
    }
    .swiper-controls {
        height: 180px;
        padding: 12px 16px 16px;
        gap: 10px;
    }
    .hero-sec .swiper-controls .swiper-pagination {
        gap: 6px;
    }
    .hero-sec .swiper-controls .swiper-pagination-bullet {
        height: 58px;
        padding: 6px 20px 6px 6px;
    }
    .hero-thumb {
        flex-basis: calc(100% - 8px);
        width: calc(100% - 8px);
        height: 44px;
    }
    .hero-thumb-title {
        display: none;
    }
    .hero-pagination-index {
        top: 8px;
        right: 4px;
        font-size: 11px;
    }
    .hero-solution {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 6px 12px;
        padding-top: 10px;
    }
    .hero-solution-label {
        grid-column: 1;
        font-size: 12px;
    }
    .hero-solution-description {
        grid-column: 1;
        font-size: 12px;
        line-height: 1.45;
    }
    .hero-solution-link {
        grid-column: 2;
        grid-row: 1/3;
        min-width: 88px;
        min-height: 44px;
        font-size: 13px;
    }
    .steel-service,
    .steel-service--casting {
        min-height: 100svh;
        padding: calc(64px + var(--header-height)) 20px 112px;
    }
    .card-stack__navigation {
        bottom: 20px;
        margin-right: 20px;
    }
    .card-stack.is-enhanced .card-stack__navigation {
        right: 20px;
        bottom: max(20px, env(safe-area-inset-bottom));
        margin: 0;
    }
    .steel-service__inner {
        grid-template-columns: 1fr;
        width: 100%;
        gap: 28px;
    }
    .steel-service--alloy .steel-service__image {
        order: 2;
    }
    .card-stack.is-enhanced .steel-service__inner {
        padding-bottom: 36px;
    }
    .steel-service__label {
        font-size: 13px;
    }
    .steel-service__title,
    .steel-service--casting .steel-service__title {
        font-size: clamp(28px, 7.5vw, 32px);
        line-height: 1.3;
    }
    .steel-service__text p {
        margin-top: 20px;
        font-size: 15px;
        line-height: 1.5;
    }
    .steel-service__text p br {
        display: none;
    }
    .steel-service__image,
    .steel-service--casting .steel-service__image {
        height: auto;
        aspect-ratio: 556/221;
    }
    .company-achievements {
        height: 620px;
    }
    .company-achievements__content {
        width: calc(100% - 40px);
    }
    .company-achievements h2 {
        font-size: 28px;
    }
    .company-achievements__stats {
        gap: 10px;
        margin-top: 80px;
    }
    .company-achievements__stats dd {
        font-size: clamp(24px, 6.5vw, 38px);
    }
    .company-achievements__stats dt {
        margin-top: 12px;
        font-size: 13px;
    }
    .product-showcase {
        grid-template-columns: 1fr;
    }
    .product-panel {
        height: 540px;
    }
    .product-panel__content {
        padding: 150px 32px 0;
    }
    .product-panel__title {
        font-size: 28px;
    }
    .product-panel p {
        font-size: 16px;
    }
    .product-panel__detail {
        min-height: 44px;
        margin-top: 40px;
    }
    .product-panel__actions {
        width: 300px;
        max-width: 100%;
        margin-top: 24px;
    }
    .product-panel__actions > * {
        font-size: 14px;
    }
    .product-panel__actions img {
        max-width: 32px;
    }
    .process-gallery {
        padding: 64px 0;
    }
    .process-gallery h2 {
        padding-inline: 20px;
        font-size: clamp(28px, 6.3vw, 38px);
        line-height: 1.3;
        letter-spacing: 0.025em;
    }
    /* 모바일 생산공정 갤러리는 애매한 좌우 지그재그를 없애고
       가로형 크롭 + 짧은 간격으로 기존 세로 길이를 약 절반으로 줄입니다. */
    .process-gallery__items {
        gap: 24px;
        width: calc(100% - 40px);
        margin-top: 32px;
    }
    .process-item,
    .process-item:nth-child(odd),
    .process-item:nth-child(even) {
        align-self: center;
        width: 100%;
        --reveal-x: 0px;
    }
    .process-item__media,
    .process-item--pattern .process-item__media {
        aspect-ratio: 2.2 / 1;
    }
    /* 데스크톱 전용 사진 위치·확대 보정은 모바일 가로형 프레임에서 해제합니다. */
    .process-item--pattern img,
    .process-item--housing img {
        position: static;
        top: auto;
        width: 100%;
        max-width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    .process-item figcaption {
        padding: 9px 0 0;
        font-size: clamp(16px, 4.35vw, 24px);
        line-height: 1.3;
        letter-spacing: 0.02em;
        white-space: normal;
    }
    .certifications {
        padding: 40px 20px 64px;
    }
    .certifications h2 {
        font-size: 26px;
        line-height: 1.4;
        letter-spacing: 0;
    }
    .certifications h2 br {
        display: none;
    }
    .certificate-list {
        display: flex;
        grid-template-columns: none;
        height: 360px;
        margin-top: 28px;
        overflow-x: auto;
        gap: 8px;
        padding: 4px 3px 12px;
        scroll-snap-type: x mandatory;
    }
    .certificate-card,
    .certificate-card.is-active {
        flex: 0 0 80%;
        scroll-snap-align: center;
    }
    .certificate-card img {
        object-fit: contain;
    }
    .partners {
        padding: 64px 24px;
    }
    .partners__eyebrow {
        font-size: 18px;
        line-height: 26px;
    }
    .partners h2 {
        margin-top: 20px;
        font-size: 26px;
        line-height: 1.45;
    }
    .partners h2 br {
        display: none;
    }
    .partner-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 28px;
        margin-top: 44px;
    }
    .partner-list li {
        height: 94px;
    }
    .partner-list img {
        max-height: 74px;
    }
    /* SVG 배경의 진한 #212121이 끝나면서 흰 바탕이 다시 나타나던 틈 보정.
       상단 곡선 SVG는 유지하고 나머지 하단 면을 같은 색으로 연장합니다. */
    .site-footer {
        padding: 90px 12px 12px;
        background:
            url('../img/figma/footer-background.svg') left top / auto 340px no-repeat,
            linear-gradient(to bottom, var(--background-default) 0 39px, #212121 39px 100%);
    }
    /* 모바일 최하단에서 바운스 스크롤이 일어나도 밝은 배경이 보이지 않도록 합니다. */
    html {
        background-color: #212121;
    }
    .footer-panel {
        padding: 32px 20px;
    }
    .footer-brand {
        width: 200px;
    }
    .back-to-top {
        top: 20px;
        right: 16px;
        width: 40px;
        height: 96px;
        gap: 19px;
        padding-top: 13px;
    }
    .footer-main {
        gap: 40px;
        margin-top: 48px;
    }
    .footer-contacts {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 0;
    }
    .footer-main h2 {
        margin-bottom: 14px;
        font-size: 16px;
        line-height: 22px;
    }
    .footer-contacts address {
        font-size: 14px;
        line-height: 1.7;
    }
    .footer-navigation {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 12px;
    }
    .footer-navigation ul {
        gap: 8px;
    }
    .footer-navigation li {
        font-size: 14px;
        line-height: 1.7;
    }
    .footer-navigation a {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
    }
    .footer-legal {
        margin-top: 36px;
        padding-top: 24px;
        gap: 20px;
    }
    .footer-legal > div {
        flex-wrap: wrap;
        gap: 8px 24px;
    }
    .footer-legal button {
        min-height: 44px;
        font-size: 12px;
    }
    .footer-legal p {
        font-size: 11px;
        line-height: 1.6;
        text-align: left;
    }
    .detail-dialog {
        padding: 20px;
    }
    .detail-dialog h2 {
        font-size: 21px;
    }
}
@media (hover: none), (pointer: coarse) {
    .product-panel__reveal {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}
@media (max-height: 600px) {
    .steel-service {
        position: relative;
        top: auto;
        min-height: 0;
        padding-block: calc(48px + var(--header-height)) 100px;
    }
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .site-header,
    .certificate-card,
    .certificate-list,
    .swiper-pagination-bullet,
    .stat-digit__strip {
        transition: none !important;
    }
    .scroll-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .product-panel__reveal,
    .product-panel::after {
        transition: none;
    }
    .steel-service {
        position: relative;
        top: auto;
    }
}

/* 480~660px가량의 추가 스크롤만 소비합니다. wheel 이벤트 차단·강제 스냅 없음.
   작은 높이 또는 모션 감소 환경에서는 기존 일반 스크롤을 유지합니다. */
@media (prefers-reduced-motion: no-preference) and (min-height: 650px) {
    .company-achievements {
        height: calc(100svh + clamp(480px, 60svh, 660px));
    }
    .company-achievements__frame {
        position: sticky;
        top: 0;
        height: 100svh;
    }
}