/* ============================================================
   Company — 03-company.html 페이지 전용 스타일
   ============================================================ */

/* 회사소개 히어로 — 배경 동영상 풀블리드 + 중앙 슬로건.
   고정 헤더(100px) 위로 밝은 영상이 깔리고, 텍스트는 섹션 정중앙에 위치한다. */
.company-hero {
    position: relative;
    height: 100vh;
    min-height: 640px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* 배경 = 영상. 섹션 전체를 cover 로 채우고 가로/세로 모두 중앙 기준으로 잘린다. */
.company-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* 영상 2장을 같은 자리에 겹쳐 두고(03-company.js 가 제어),
   루프 이음새에서 opacity 디졸브로 끊김을 가린다. */
.company-hero__bg video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 0.8s linear;
}

.company-hero__bg video.is-active {
    opacity: 1;
}

/* 중앙 슬로건 — 영상 위에 얹힘 */
.company-hero__text {
    position: relative;
    z-index: 1;
    padding: 0 20px;
}

.company-hero__title {
    display: flex;
    flex-direction: column;
    align-items: center; /* 각 라인을 글자 폭에 맞춰 줄여, 호버 영역이 텍스트와 일치 */
    gap: 12px;
    line-height: 1.15;
    /* 인터랙션용 글자라 I-beam 텍스트 커서 대신 기본 커서 + 드래그 선택 방지 */
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
}

/* 영문 라인 — 브랜드 오렌지 / Poppins */
.company-hero__title-en {
    font-family: "Poppins", sans-serif;
    font-size: 5rem; /* 80px */
    font-weight: 600;
    letter-spacing: -1px;
    color: var(--color-primary);
}

/* 국문 라인 — 다크 */
.company-hero__title-ko {
    font-size: 4rem; /* 64px */
    font-weight: 700;
    letter-spacing: -2px;
    color: var(--color-text);
}

/* ── 글자 단위 키네틱 리빌 + 호버 인터랙션 (03-company.js 가 글자 분해) ──
   단어는 inline-block 으로 묶어 줄바꿈은 단어 사이에서만. */
.company-hero__word {
    display: inline-block;
}

/* 바깥 글자 = 진입 애니메이션 대상. 리빌 전 blur·아래로 내려가 회전된 상태로 숨김. */
.company-hero__char {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.6em) rotate(8deg);
    filter: blur(12px);
}

/* .is-revealed 가 붙으면 글자마다 --i 순서대로 stagger 등장 (blur 풀리며 제자리로) */
.company-hero__title.is-revealed .company-hero__char {
    animation: companyCharIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--i) * 0.04s);
}

@keyframes companyCharIn {
    0% {
        opacity: 0;
        transform: translateY(0.6em) rotate(8deg);
        filter: blur(12px);
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(0);
        filter: blur(0);
    }
}

.company-hero__char-inner {
    display: inline-block;
}

/* 호버 — 글자 단위가 아니라 라인(영문/국문) 각각 전체가 통통 커진다 */
.company-hero__title-en,
.company-hero__title-ko {
    transform-origin: center;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}

.company-hero__title-en:hover,
.company-hero__title-ko:hover {
    transform: scale(1.08);
}

/* ============================================================
   회사 스토리 — 좌측 sticky 텍스트 + 우측 스크롤 갤러리.
   part1(warm) → part2(deep) 배경 크로스페이드.
   ============================================================ */
.company-story {
    position: relative;
    /* 패널 텍스트색 기본값(다크 배경 위 흰 텍스트) */
    color: #fff;
}

/* 배경 색 레이어 — 섹션 스크롤 내내 화면에 고정(sticky), warm↔deep 디졸브.
   sticky 박스가 화면을 차지하고 위로 part 들이 흘러 지나간다(z-index 로 분리). */
.company-story__bg {
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 0;
    overflow: hidden;
    /* 음수 마진을 두지 않는다 — 두면 sticky 보더 박스가 섹션 끝보다 100vh 더
       뻗어 그 아래 푸터를 덮어버린다. 대신 inner 의 margin-top 으로 겹쳐 올린다. */
}

.company-story__bg-layer {
    position: absolute;
    inset: 0;
    transition: opacity 0.8s ease;
}

/* 따뜻한 브라운 */
.company-story__bg-layer--warm {
    opacity: 1;
    background: #3B2D24;
}

/* 딥 네이비 — 기본 숨김, .is-deep 일 때 노출 */
.company-story__bg-layer--deep {
    opacity: 0;
    background: #23303F;
}

.company-story.is-deep .company-story__bg-layer--warm {
    opacity: 0;
}

.company-story.is-deep .company-story__bg-layer--deep {
    opacity: 1;
}

.company-story__inner {
    position: relative;
    z-index: 1; /* sticky 배경 레이어(z-index:0) 위로 콘텐츠를 올림 */
    /* 배경(100vh) 위로 겹쳐 올려, 진입하자마자 패널 텍스트가 고정되게 한다.
       (배경 대신 여기서 끌어올려야 배경이 섹션을 넘어 푸터를 덮지 않음) */
    margin-top: -100vh;
    display: grid;
    /* 갤러리 칼럼은 320px 카드 2열 폭(auto)으로 고정, 패널이 남은 폭을 차지 */
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 48px;
    align-items: start;
}

/* 좌측 패널 — 뷰포트에 고정(sticky)된 채 섹션 내내 한자리 유지.
   안의 텍스트 2장(warm/deep)을 같은 자리에 겹쳐 두고 제자리 크로스페이드. */
.company-story__panel {
    position: sticky;
    top: 0;
    height: 100vh;
}

/* 겹쳐 둔 텍스트 — 패널을 가득 채우고 세로 중앙 정렬. 기본은 숨김(살짝 아래). */
.company-story__text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    pointer-events: none;
}

/* warm = 섹션 첫 진입 시 fade-up 으로 1회 등장(.is-revealed). 그 전엔 숨김.
   deep 은 .is-deep 일 때 노출. 떠나는 텍스트는 위로 살짝 빠진다.
   (모바일 ≤1200 스택에선 1200 블록이 텍스트를 항상 노출로 덮어써 무관) */
.company-story__text--warm {
    opacity: 0;
    transform: translateY(40px);
    pointer-events: none;
}

.company-story.is-revealed .company-story__text--warm {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.company-story.is-deep .company-story__text--warm {
    opacity: 0;
    transform: translateY(-18px);
    pointer-events: none;
}

.company-story.is-deep .company-story__text--deep {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* 거대 워터마크 — inner 가 아니라 섹션(=__bg, 풀폭 sticky) 기준 좌측에 붙는 장식 텍스트.
   글자 아래로 갈수록 그라데이션이 투명해져 흐려지며 사라진다(background-clip:text). */
.company-story__watermark {
    position: absolute;
    left: 0;
    bottom: -8%;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 20rem;
    line-height: 1;
    letter-spacing: -17px;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
    /* 그라데이션을 글자 모양으로 클립 + 채움색 투명 → 텍스트가 그라데이션으로 보임 */
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    opacity: 0;
    transition: opacity 0.7s ease;
}

/* warm = 기본 노출(오렌지 계열 페이드), deep = .is-deep 일 때 노출(블루 계열 페이드) */
.company-story__watermark--warm {
    opacity: 1;
    background-image: linear-gradient(180deg, rgba(255, 140, 73, 0.25) 26.81%, rgba(153, 84, 44, 0) 73.33%);
}

.company-story__watermark--deep {
    left: 5%;
    letter-spacing: 6.8px;
    background-image: linear-gradient(180deg, rgba(117, 177, 219, 0.25) 26.81%, rgba(28, 39, 53, 0) 73.33%);
}

.company-story.is-deep .company-story__watermark--warm {
    opacity: 0;
}

.company-story.is-deep .company-story__watermark--deep {
    opacity: 1;
}

.text-title strong {
    font-weight: 700;
    color: var(--color-primary); /* warm 기본: 오렌지 */
}

/* deep 텍스트 강조색은 블루 */
.company-story__text--deep .text-title strong {
    color: #5a9bff;
}

.company-story__desc {
    margin-top: 24px;
    font-size: 1.25rem; /* 20px */
    line-height: 1.6;
    color: #fff;
}

/* 검증 포인트 박스 */
.company-story__points {
    width: fit-content;
    margin-top: 24px;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
}

.company-story__points li {
    position: relative;
    padding-left: 16px;
    font-size: 1.25rem; /* 20px */
    line-height: 1.6;
    color: #fff;
}

.company-story__points li::before {
    content: "·";
    position: absolute;
    left: 2px;
    color: #fff;
}

/* 우측 갤러리 — 320px 2칼럼 masonry(오른쪽 칼럼 아래로 오프셋, 좁은 간격).
   각 카드는 스크롤 위치(중앙 밴드)에 맞춰 fade-in-up / fade-out-up (03-company.js). */
.company-story__gallery {
    width: 664px; /* 320*2 + 24 gap */
    display: grid;
    grid-template-columns: repeat(2, 320px);
    align-items: start; /* 카드 높이 제각각 → 위 기준 정렬 */
    gap: 48px;
    /* 상단 60vh: 섹션 진입 시 첫 카드가 밴드(화면 45~55%) 아래라 '텍스트만' 보임.
       하단 10vh: 묶음 사이 빈 구간을 짧게 — 패널은 계속 고정된 채 다음 묶음으로. */
    padding: 60vh 0 10vh;
}

/* deep(둘째) 묶음 — 상단 25vh: 전환 직후 'deep 텍스트만' 잠깐 보이는 정도.
   하단 55vh: 마지막 카드가 밴드 위로 빠져 사라지는 순간 패널 고정이 풀리도록 맞춤
   (사라짐 = 섹션 종료 일치 → 곧바로 푸터로 스크롤). */
.company-story__gallery[data-part="deep"] {
    padding: 25vh 0 55vh;
}

/* 카드 = 가로 320px 고정, 세로는 이미지 원본 비율대로.
   기본 = 아래에서 투명 대기 → 중앙 밴드 진입 시 .is-in(제자리·fade-in-up),
   밴드 위로 빠지면 .is-out(위로·fade-out-up). 03-company.js 가 토글. */
.company-story__card {
    width: 320px;
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    opacity: 0;
    transform: translateY(56px);
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

/* 오른쪽(짝수) 칼럼을 아래로 내려 엇갈린 masonry — 참조 이미지처럼 붙어서 어긋나게 */
.company-story__gallery > .company-story__card:nth-child(even) {
    margin-top: 120px;
}

/* 밴드 안 — 제자리로 떠올라 보임(fade-in-up 도착) */
.company-story__card.is-in {
    opacity: 1;
    transform: none;
}

/* 밴드 위로 빠짐 — 위로 사라짐(fade-out-up) */
.company-story__card.is-out {
    opacity: 0;
    transform: translateY(-56px);
}

.company-story__card img {
    width: 100%;
    height: auto; /* 원본 비율 유지 */
    display: block;
}

/* 플레이스홀더 — 실제 이미지 교체 전 임시 카드.
   이미지가 없어 높이를 못 잡으므로 미리보기용 임시 높이만 부여(교체 시 자동 높이로 대체). */
.company-story__ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 240px;
    padding: 16px;
    text-align: center;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
    background:
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0 12px, rgba(255, 255, 255, 0.02) 12px 24px);
}

.company-story__card--tall .company-story__ph {
    min-height: 420px;
}

/* ============================================================
   검증/설계 — 좌측(타이틀+텍스트) 고정 / 우측 이미지 자연 스크롤.
   타이틀+텍스트를 한 묶음(__aside)으로 sticky 고정하므로, 둘이 함께 멈춰
   텍스트가 처음부터 제자리(아래)에 박혀 스크롤 중에도 움직이지 않는다.
   우측 이미지 4장은 갭을 두고 아래→위로 자연 스크롤되고, 화면 중앙에 온
   이미지에 맞춰 좌측 텍스트가 제자리에서 교체된다(이미지별 IntersectionObserver).
   이미지는 우측 칼럼이라 좌측 타이틀과 가로로 겹치지 않아 그냥 위로 빠진다.
   ============================================================ */
.company-rigor {
    padding: 6vw 0;
}

/* 좌측 고정 영역 / 우측 이미지 칼럼(620px) 2단 */
.company-rigor__body {
    display: grid;
    grid-template-columns: 1fr minmax(0, 620px);
    gap: 64px;
    align-items: start; /* sticky aside 가 행 높이(=이미지 칼럼)만큼 이동할 수 있게 */
}

/* 타이틀 + 텍스트를 통째 sticky 고정 — 함께 멈춰 상대 위치가 안 변한다(드리프트 없음) */
.company-rigor__aside {
    padding-top: 1vh;
    padding-bottom: 20vh;
    position: sticky;
    top: 100px; /* 고정 헤더(100px) 바로 아래 */
    align-self: start;
}

/* 메인 타이틀 — 묶음 상단. 둘째 줄 강조만 오렌지.
   margin-bottom 으로 타이틀↔텍스트 간격(=텍스트를 아래로 내리는 양)을 조절. */
.company-rigor__title {
    margin-bottom: 120px;
}

.company-rigor__title strong {
    color: var(--color-primary);
    font-weight: inherit;
}

/* 텍스트 4장을 같은 그리드 셀에 겹쳐 쌓아(grid-stack) 활성 1장만 크로스페이드 */
.company-rigor__texts {
    display: grid;
}

.company-rigor__text {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.company-rigor__text.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.company-rigor__subtitle {
    margin-bottom: 20px;
}

.company-rigor__desc {
    line-height: 1.6;
}

/* 우측 이미지 칼럼 — 이미지 4장을 갭을 두고 세로로 자연 스크롤.
   상단 패딩 없음(첫 이미지는 타이틀과 같은 높이에서 시작), 하단 여유는
   마지막 이미지가 화면 중앙까지 올라와 활성화될 수 있도록 둔다. */
.company-rigor__media {
    display: flex;
    flex-direction: column;
    gap: 16vh;
    padding-bottom: 10vh;
    padding-top: 20vh;
}

.company-rigor__image {
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
}

.company-rigor__image img {
    display: block;
    width: 100%;
    height: auto;
}

/* ============================================================
   연혁 — 좌측 연도 / 우측 성과 목록을 수직 라인으로 잇는 타임라인.
   라인(.company-history__line)은 첫 노드~마지막 노드 사이를 절대배치로 긋고,
   스크롤에 맞춰 __line-fill 이 위→아래로 차오른다(03-company.js). 필이 어느
   노드를 지나면 그 item 에 .is-active 가 붙어 노드 링·연도가 주황으로 켜진다.
   노드와 라인의 가로 위치는 --year-col/--node-w 로 계산해 맞춘다. */
.company-history {
    padding: 6vw 0;
    --year-col: 240px;
    --node-w: 66px;
}

/* 타이틀 — 검증/설계와 동일 스타일(.company-rigor__title) 재사용.
   그 클래스의 margin-bottom(120px)을 타임라인용 간격으로 덮어쓴다. */
.company-history__title {
    margin-bottom: 72px;
}

.company-history__timeline {
    position: relative;
}

/* 수직 라인(회색 트랙) — left/top/height 모두 03-company.js 가 노드의 실제
   링 중심(viewBox 66 의 cx/cy=29)에 맞춰 px 로 지정한다. 50% 는 무JS 폴백. */
.company-history__line {
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    transform: translateX(-1px);
    background: #e8e8e8;
    z-index: 0;
}

/* 스크롤 따라 위→아래로 차오르는 주황 필 */
.company-history__line-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: var(--color-primary);
}

.company-history__list {
    position: relative;
    z-index: 1; /* 라인 위로 — 노드 흰 원이 라인을 덮어 끊긴 듯 보인다 */
}

/* 각 연도 행 — 연도(좌) | 빈 갭(1fr) | 노드 | 성과 목록 4단.
   빈 갭이 노드+목록 블록을 오른쪽으로 밀어, 연도만 왼쪽에 떨어진다(이미지 레이아웃). */
.company-history__item {
    display: grid;
    grid-template-columns: var(--year-col) 1fr var(--node-w) minmax(0, 1.25fr);
    align-items: start;
}

.company-history__item:not(:last-child) {
    margin-bottom: 72px;
}

/* 연도 — 좌측 끝. 기본 옅은 회색, 라인이 도달(.is-active)하면 진하게 켜짐 */
.company-history__year {
    grid-column: 1;
    color: #c9c9c9;
    transition: color 0.4s ease;
}

.company-history__item.is-active .company-history__year {
    color: #262626;
}

/* 노드 — 3번째 칼럼. 라인과의 정렬은 JS 가 링 실제 중심으로 맞춘다.
   링 중심을 연도 첫 줄에 맞춰 살짝 위로. */
.company-history__node {
    grid-column: 3;
    display: flex;
    justify-content: center;
    margin-top: -6px;
}

.company-history__node-svg {
    display: block;
    width: var(--node-w);
    height: auto;
}

/* 노드 링(둘째 circle) — 기본 회색, 활성 시 주황(CSS 가 SVG 속성 stroke 덮어씀) */
.company-history__node-svg circle:nth-of-type(2) {
    stroke: #dadada;
    transition: stroke 0.4s ease;
}

.company-history__item.is-active .company-history__node-svg circle:nth-of-type(2) {
    stroke: var(--color-primary);
}

/* 성과 목록 — 4번째 칼럼(우측). text-desc 위에 글자색/행간만 덮어쓰기 */
.company-history__events {
    grid-column: 4;
    padding-left: 24px;
    color: #262626;
    line-height: 2.2;
}

/* ============================================================
   마무리(비전) — 배경 영상 풀블리드 + 좌측 텍스트.
   영상은 우측에 글로브가 있는 어두운 톤 → 텍스트가 놓이는 좌측을 더 어둡게
   하는 가로 그라데이션 스크림으로 흰 텍스트 대비를 확보하고 우측 글로브는 살린다.
   ============================================================ */
.company-outro {
    position: relative;
    min-height: 560px;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center; /* 텍스트 세로 가운데 */
}

.company-outro__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.company-outro__bg video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 가독성용 스크림 — 좌측을 진하게(텍스트 영역), 우측은 투명(글로브 노출) */
.company-outro__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.5) 35%, rgba(0, 0, 0, 0.15) 65%, rgba(0, 0, 0, 0) 85%);
}

/* inner 로 페이지 좌측 여백 정렬 — 텍스트 블록은 좌측에 폭 제한해 글로브와 안 겹침 */
.company-outro__inner {
    position: relative;
    z-index: 1;
    width: 100%;
}

.company-outro__text {
    color: #fff;
}

/* 라벨 — 오렌지, Poppins(라틴/숫자) */
.company-outro__eyebrow {
    font-family: "Poppins", sans-serif;
    font-size: 2rem; /* 32px */
    font-weight: 600;
    letter-spacing: -1px;
    color: var(--color-primary);
    margin-bottom: 18px;
}

.company-outro__title {
    white-space: nowrap; /* 데스크탑에선 한 줄 고정(모바일에서 해제) */
}

.company-outro__desc {
    margin-top: 24px;
    font-size: 1.5rem; /* 24px */
    line-height: 1.75;
    letter-spacing: -1px;
}

/* ── 반응형 ─────────────────────────────────────────────── */
/* 노트북 / 서브데스크탑 */
@media (max-width: 1440px) {
    .company-hero__title-en {
        font-size: 5rem; /* 80px */
    }

    .company-hero__title-ko {
        font-size: 3.25rem; /* 52px */
    }

    .text-title {
        font-size: 2.5rem; /* 40px */
    }

    .company-story__watermark {
        font-size: 10rem;
    }

    .company-story__inner {
        gap: 32px;
    }
}

/* ── 태블릿 이하 — 스크롤리텔링(스티키 패널) 해제 후 세로 스택 ──────────
   PC 의 sticky 패널 + 스크롤 카드 연출은 폭이 좁아지면 좌측 패널이 짓눌려 깨진다
   (갤러리 664px 고정 + 양옆 패딩이면 ~1200px 아래부터 패널 폭이 부족).
   그래서 1200px 이하에서는 warm/deep 을 위→아래로 쌓는 단순 스택으로 전환한다.
   풀폭 sticky 배경·워터마크·크로스페이드는 끄고, 각 묶음에 배경색을 직접 입힌다. */
@media (max-width: 1200px) {
    .company-story__bg {
        display: none; /* 스택 레이아웃에선 풀폭 sticky 배경/워터마크 불필요 */
    }

    /* 이 섹션 안에서 생기는 가로 오버플로만 잘라낸다 — 색 배경은 100%(=뷰포트 폭)까지
       칠해지므로, 자식이 살짝 넘쳐 가로 스크롤이 생기면 그 오른쪽에 흰 body 배경이
       "오른쪽 흰 띠"로 드러난다(스크롤바 폭만큼 디바이스마다 다르게 보임).
       이 구간의 story 는 sticky/음수마진이 없는 단순 세로 스택이라 섹션 단위 clip 이
       데스크탑 연출이나 다른 섹션에 전혀 영향을 주지 않는다. */
    .company-story {
        overflow-x: clip;
    }

    /* inner: 끌어올림(-100vh) 해제 + 단순 세로 플로우.
       panel/galleries 래퍼는 contents 로 해제해 텍스트·갤러리를 직속 자식처럼 정렬. */
    .company-story__inner {
        margin-top: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
    }

    .company-story__panel,
    .company-story__galleries {
        display: contents;
    }

    .company-story__panel {
        position: static;
        height: auto;
    }

    /* 겹쳐 두던 텍스트 2장을 플로우로 풀어 둘 다 노출(.is-deep 토글 무시).
       각 묶음을 가운데 정렬된 인트로 밴드처럼 보이게 한다. */
    .company-story__text {
        width: 100%;
        position: relative;
        inset: auto;
        height: auto;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        align-items: center;
        text-align: center;
        padding: clamp(48px, 8vw, 88px) 24px 32px;
    }

    .company-story.is-deep .company-story__text--warm,
    .company-story.is-deep .company-story__text--deep {
        opacity: 1;
        transform: none;
    }

    /* 모바일 인터랙션 — 밴드 배경은 그대로 두고 내부 글(제목/설명/포인트)만 fade-up.
       밴드가 뷰포트에 들어오면 03-company.js 가 .is-in 을 붙인다(1회성). */
    .company-story__text > h2,
    .company-story__text > p,
    .company-story__text > ul {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .company-story__text.is-in > h2,
    .company-story__text.is-in > p,
    .company-story__text.is-in > ul {
        opacity: 1;
        transform: none;
    }

    /* 제목 → 설명 → 포인트 순으로 살짝 스태거 */
    .company-story__text.is-in > p {
        transition-delay: 0.08s;
    }

    .company-story__text.is-in > ul {
        transition-delay: 0.16s;
    }

    /* warm텍스트 → warm갤러리 → deep텍스트 → deep갤러리 순서로 쌓고
       각 영역에 part 배경색을 직접 부여(스티키 배경 대체) */
    .company-story__text--warm {
        order: 1;
        background: linear-gradient(135deg, #4a382d 0%, #34271f 100%);
    }

    .company-story__gallery[data-part="warm"] {
        order: 2;
        background: #34271f;
    }

    .company-story__text--deep {
        order: 3;
        background: linear-gradient(135deg, #1d2934 0%, #131b24 100%);
    }

    .company-story__gallery[data-part="deep"] {
        order: 4;
        background: #131b24;
    }

    /* 포인트 박스만 좌측 정렬(불릿 가독성 유지) */
    .company-story__points {
        text-align: left;
    }

    /* 갤러리 — 배경색은 풀폭으로 깔되(양옆 흰 여백 방지) 카드 2칼럼만
       가운데로 모은다. 칼럼은 fr 로 화면에 맞춰 줄어들어 절대 넘치지 않고,
       좌우 padding 을 max() 로 키워 콘텐츠 폭을 720px 로 가운데 제한한다.
       (고정 px 칼럼이면 좁은 화면에서 칼럼이 화면 밖으로 넘쳐 오른쪽에 흰 띠가 생긴다.) */
    .company-story__gallery,
    .company-story__gallery[data-part="warm"],
    .company-story__gallery[data-part="deep"] {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 24px;
        padding-block: 8px clamp(56px, 9vw, 96px);
        padding-inline: max(24px, (100% - 720px) / 2);
    }

    /* 카드 — min-width:0 필수: grid 아이템 기본 min-width:auto(=이미지 원본 폭) 때문에
       1fr 칼럼이 이미지 원본 폭만큼 넘쳐 가로 스크롤(=오른쪽 흰 띠)이 생긴다.
       노출 연출은 기본 카드 규칙(초기 숨김 translateY(56px) → .is-in 이면 페이드업)을
       그대로 재사용한다. 모바일에선 03-company.js 가 화면 도달 시 .is-in 을 1회만
       붙이고 되돌리지 않아 AOS 식 fade-up 으로 동작한다(is-out 미사용). */
    .company-story__card {
        border-radius: 8px;
        width: auto;
        min-width: 0;
    }

    /* PC 처럼 오른쪽(짝수) 칼럼을 아래로 내려 2칼럼 지그재그(masonry) 유지 */
    .company-story__gallery > .company-story__card:nth-child(even) {
        margin-top: 56px;
    }

    /* 검증/설계 — 좌측 고정 해제 후 타이틀 → (텍스트→이미지)×4 세로 스택.
       (태블릿 폭부터 620px 이미지 + 텍스트 2단이 좁아 깨지므로 1200 에서 푼다) */
    .company-rigor__body {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    /* aside/텍스트/미디어 래퍼를 풀어 타이틀·텍스트·이미지를 body 직속 자식처럼 정렬 */
    .company-rigor__aside,
    .company-rigor__texts,
    .company-rigor__media {
        display: contents;
    }

    /* 타이틀은 맨 위(order 0), 간격 보정 */
    .company-rigor__title {
        order: 0;
        margin-bottom: 24px;
    }

    /* 겹쳐 있던 텍스트를 흐름으로 풀어(.is-active 무시) 뷰포트 진입 시 1회 fade-up.
       데스크탑 크로스페이드 대신 모바일은 AOS 식 등장 — 03-company.js 가 .is-in 토글. */
    .company-rigor__text {
        grid-area: auto;
        pointer-events: auto;
        margin-bottom: 16px;
        opacity: 0;
        transform: translateY(28px);
        transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* 이미지 — 갭/하단여백 해제하고 단순 세로 스택 + 동일 fade-up */
    .company-rigor__image {
        margin-bottom: 48px;
        opacity: 0;
        transform: translateY(28px);
        transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* 뷰포트 진입(.is-in) — 제자리로 떠오름 */
    .company-rigor__text.is-in,
    .company-rigor__image.is-in {
        opacity: 1;
        transform: none;
    }

    /* 첫 텍스트의 하드코딩 .is-active 가 모바일에서 미리 보이지 않게 — is-in 전엔 숨김 유지
       (.is-active 의 opacity:1 규칙이 미디어쿼리 밖이라 이 :not(.is-in) 으로 무력화) */
    .company-rigor__text.is-active:not(.is-in) {
        opacity: 0;
        transform: translateY(28px);
    }

    /* text0 → img0 → text1 → img1 … 순서로 끼워 넣기 */
    .company-rigor__text:nth-child(1) { order: 1; }
    .company-rigor__image:nth-child(1) { order: 2; }
    .company-rigor__text:nth-child(2) { order: 3; }
    .company-rigor__image:nth-child(2) { order: 4; }
    .company-rigor__text:nth-child(3) { order: 5; }
    .company-rigor__image:nth-child(3) { order: 6; }
    .company-rigor__text:nth-child(4) { order: 7; }
    .company-rigor__image:nth-child(4) { order: 8; }

    /* 연혁 — 레이아웃 유지하되 연도 칼럼/노드 축소(폭 절약) */
    .company-history {
        --year-col: 180px;
        --node-w: 56px;
    }

    .company-history__events {
        padding-left: 20px;
    }
}

/* 모바일 — 루트 폰트(12px) 축소로 rem 이 함께 줄지만, 타이포·여백을 추가 보정 */
@media (max-width: 768px) {
    .company-hero {
        height: 100svh;
        min-height: 480px;
    }

    .company-hero__title {
        gap: 8px;
    }

    .company-hero__title-en {
        font-size: 2.75rem;
    }

    .company-hero__title-ko {
        font-size: 1.9rem;
        letter-spacing: -1px;
    }

    /* 스토리 텍스트 — 좁은 화면용 타이포 보정 (스택 구조는 1200px 블록에서 처리) */
    .text-title {
        font-size: 2.25rem;
    }

    .company-story__desc {
        margin-top: 16px;
        font-size: 1.125rem;
    }

    .company-story__points {
        padding: 14px 18px;
    }

    .company-story__points li {
        font-size: 1.125rem;
    }

    /* 폰에선 2칼럼 간격·여백을 더 좁히고, 아주 좁으면 1칼럼으로 */
    .company-story__gallery,
    .company-story__gallery[data-part="warm"],
    .company-story__gallery[data-part="deep"] {
        gap: 12px;
        padding: 0 16px clamp(48px, 12vw, 72px);
    }

    /* 검증/설계 — 폰 타이포 보정 (스택 구조는 1200px 블록에서 처리) */
    .company-rigor__subtitle {
        margin-bottom: 12px;
    }

    .company-rigor__desc {
        font-size: 1.125rem;
    }

    /* 연혁 — 폰에선 좌측 레일(노드) | 우측(연도 위, 성과 아래) 2단으로 전환 */
    .company-history {
        --node-w: 44px;
    }

    .company-history__line {
        left: calc(var(--node-w) / 2); /* 노드가 맨 왼쪽으로 오므로 라인도 좌측으로 */
    }

    .company-history__item {
        grid-template-columns: var(--node-w) 1fr;
        grid-template-rows: auto auto;
        column-gap: 16px;
    }

    .company-history__node {
        grid-column: 1;
        grid-row: 1 / 3; /* 연도+성과 높이를 가로지르되 위쪽에 정렬 */
        align-self: start;
        margin-top: -4px;
    }

    .company-history__year {
        grid-column: 2;
        grid-row: 1;
        margin-bottom: 8px;
        font-size: 1.75rem;
    }

    .company-history__events {
        grid-column: 2;
        grid-row: 2;
        padding-left: 0;
        line-height: 2;
        font-size: 1.0625rem;
    }

    /* 마무리 — 폰 타이포 보정 */
    .company-outro {
        height: 70vh;
        min-height: 440px;
    }

    /* 폰: 세로 맞춤으로 가로가 넘칠 때 우측에 붙여 왼쪽만 잘리게 */
    .company-outro__bg video {
        object-position: right center;
    }

    .company-outro__title {
        font-size: 2.25rem;
        letter-spacing: -1px;
        white-space: normal; /* 폰에선 자연 줄바꿈 허용 */
    }

    .company-outro__desc {
        margin-top: 20px;
        font-size: 1.125rem;
    }
}

/* 모션 최소화 — 글자 분해 효과 없이 즉시 노출, 호버 변형도 생략 */
@media (prefers-reduced-motion: reduce) {
    .company-hero__char {
        opacity: 1;
        transform: none;
        filter: none;
    }

    .company-hero__title.is-revealed .company-hero__char {
        animation: none;
    }

    .company-hero__title-en,
    .company-hero__title-ko {
        transition: none;
    }

    .company-hero__title-en:hover,
    .company-hero__title-ko:hover {
        transform: none;
    }

    /* 스토리 — 배경·텍스트·카드 전환 생략(상태는 그대로 토글), 카드 즉시 노출 */
    .company-story__bg-layer,
    .company-story__text,
    .company-story__card {
        transition: none;
    }

    /* 스토리 텍스트 — 모바일 글자 fade-up 모션 생략(즉시 노출) */
    .company-story__text > h2,
    .company-story__text > p,
    .company-story__text > ul {
        opacity: 1;
        transform: none;
        transition: none;
    }

    /* 검증/설계 — 텍스트/이미지 전환 생략(활성 스텝은 그대로 즉시 노출) */
    .company-rigor__text,
    .company-rigor__image {
        transition: none;
    }

    /* 연혁 — 연도/노드 색 전환 생략(03-company.js 가 라인·노드를 즉시 완성) */
    .company-history__year,
    .company-history__node-svg circle:nth-of-type(2) {
        transition: none;
    }

    .company-story__gallery > .company-story__card,
    .company-story__gallery > .company-story__card:nth-child(odd),
    .company-story__gallery > .company-story__card:nth-child(even) {
        opacity: 1;
        transform: none;
    }
}