@charset "utf-8";

/* main.css/layout_re.css와 동일하게, 각 요소마다 PC 규칙 바로 아래에
   노트북/모바일 반응형을 이어붙이는 구조로 정리 */

/* 공통 클래스: Contents 공통(.contents-wrap/.cont-title/.ps-title), 공통 타이틀·설명 텍스트(.sub-s-headline/.sub-s-title/.sub-s-subtitle/.sub-s-desc/.img-wrap-note)
   아래부터는 Product Overview 등 개별 페이지·섹션 전용 스타일 */

/* Contents 공통 (PC): 서브페이지 콘텐츠 영역 공통 래퍼 + 타이틀(로고 + 설명문구) */
/* .contents-wrap 세로 방향 flex 배치 (공통 유틸 클래스 대신 속성 직접 정의) */
.contents-wrap {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    gap: 5rem;
    padding: 10rem 0;
}
/* .contents-wrap .cont-title {
    padding: 0 18.75rem;
} */
.contents-wrap .cont-title .section-header {
    display: flex;
    flex-flow: column;
    align-items: center;
}
/* SYSTEM/CONSULTING 12개 페이지: product-structure의 ps-title을 필 배지 + 대형 헤드라인으로 사용.
   cont-title의 pg-logo-wrap은 product-structure .section-body 상단에 위치 (아래 참고) */
.cont-title .ps-title {
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 1.5rem;
    padding: 0;
    text-align: center;
}
.cont-title .ps-title .ps-label {
    display: inline-flex;
    align-items: center;
    background: var(--color-primary);
    color: var(--color-w);
    font: var(--section-label);
    letter-spacing: var(--ls-wide);
    padding: 0.25rem 1.25rem;
    border-radius: 30rem;
}
.cont-title .ps-title .ps-headline {
    line-height: var(--lh-tight);
    text-align: center;
}
.cont-title .ps-title .title-line {
    display: block;
    color: var(--color-text-secondary);
    font-size: var(--fs-32);
    font-weight: var(--fw-regular);
}
.cont-title .ps-title .point {
    display: block;
    margin-top: 0.75rem;
    color: var(--color-text);
    font-size: var(--fs-60);
    font-weight: var(--fw-semiBold);
    letter-spacing: var(--ls-tight);
}
.cont-title .ps-title .point .hl {
    position: relative;
    color: var(--color-primary);
    white-space: nowrap;
}
/* 핵심 제품명 아래 두꺼운 포인트 컬러 밑줄바로 한 번 더 강조 */
.cont-title .ps-title .point .hl::after {
    content: '';
    position: absolute;
    left: 0.05em;
    right: 0.05em;
    bottom: 0.06em;
    height: 0.28em;
    background: rgba(var(--color-primary-rgb), 0.22);
    z-index: -1;
    border-radius: 0.125rem;
}

/* Contents 공통 - 노트북 (~1500px) 반응형
   Product Structure/Expected Effects 등 다른 섹션과 동일하게 좌우 여백을 18.75rem→10rem으로 축소해
   SYSTEM/CONSULTING 하위 12개 페이지를 포함한 서브페이지 전체가 일관된 여백을 갖도록 함 */
@media (max-width: 1500px) {
    .contents-wrap {
        gap: 4rem;
        padding: 8rem 0;
    }
    .contents-wrap .cont-title {
        padding: 0 10rem;
    }
    /* SYSTEM/CONSULTING 12개 페이지만 좌우 여백 12.5rem으로 넓힘 (다른 페이지는 10rem 유지).
       detail_ 클래스가 페이지마다 달라 공용으로 못 묶어 ps-title 존재 여부로 스코프 지정 */
    .contents-wrap .cont-title:has(.ps-title) {
        padding: 0 12.5rem;
    }
    /* ps-title: "PC 느낌 그대로, 정확히 85%(-15%)로 축소" - 모든 값을 동일 비율로 줄여
       요소마다 축소폭이 달라 보이는 문제를 방지 (ps-label 폰트는 --section-label 토큰이
       이 구간에서 이미 1.0625rem으로 맞춰줘서 별도 지정 불필요, 패딩만 보정) */
    .cont-title .ps-title {
        gap: 1.275rem; /* 1.5rem의 85% */
    }
    .cont-title .ps-title .ps-label {
        padding: 0.2125rem 1.0625rem; /* 0.25rem 1.25rem의 85% */
    }
    .cont-title .ps-title .title-line {
        font-size: var(--fs-28); /* fs-24(1.5rem)의 85% */
    }
    .cont-title .ps-title .point {
        font-size: var(--fs-44);
        margin-top: 0.6375rem; /* 0.75rem의 85% */
    }
}

/* Contents 공통 - 모바일 (~1024px) 반응형 */
@media (max-width: 1024px) {
    .contents-wrap {
        gap: 3rem;
        padding-top: 6.25rem;
        padding-bottom: 4rem;
    }
    .contents-wrap .cont-title,
    .contents-wrap .cont-title:has(.ps-title) {
        padding: 0 1rem;
    }
    .cont-title .ps-title {
        gap: 0.75rem;
    }
    /* ps-label: --section-label 토큰이 1024px 이하에서는 별도 축소값이 없어
       PC 기본값(1.25rem)으로 되돌아가 노트북 구간보다 오히려 커지던 문제라
       모바일 전용 크기/패딩을 직접 지정 */
    .cont-title .ps-title .ps-label {
        font-size: var(--fs-14);
        padding: 0.2rem 1rem;
    }
    .cont-title .ps-title .title-line {
        font-size: var(--fs-20);
    }
    .cont-title .ps-title .point {
        font-size: var(--fs-28);
        margin-top: 0.5rem;
    }
    .cont-title .ps-title .point .hl::after {
        height: 0.22em;
    }
}


/* 공통 타이틀/설명 텍스트 (PC): Product Structure/Overview/Expected Effects 등에서 재사용되는
   헤드라인(sub-s-headline)/제목(sub-s-title)/부제목(sub-s-subtitle)/설명(sub-s-desc) 스타일 */
.sub-s-headline {
    font-size: var(--fs-48);
    font-weight: var(--fw-semiBold);
    margin-bottom: 2.5rem;
    word-break: keep-all;
}
.sub-s-title {
    font-size: var(--fs-44);
    font-weight: var(--fw-semiBold);
    margin-bottom: 2.5rem;
}
/* project / news / company(오시는 길) 목록 페이지 타이틀 - NEWS는 container 클래스가
   detail_news/detail_press/detail_promotion으로 세분화되어 셀렉터에 함께 포함되고,
   detail_location(오시는 길)도 동일한 가운데 정렬 타이틀을 씀 */
.detail_project .sub-s-title,
.detail_news .sub-s-title,
.detail_press .sub-s-title,
.detail_promotion .sub-s-title,
.detail_location .sub-s-title {
    margin-bottom: 3.75rem;
}
.sub-s-subtitle {
    font-size: var(--fs-30);
    font-weight: var(--fw-semiBold);
    margin-bottom: 1.25rem;
    word-break: keep-all;
}
.sub-s-subtitle .point {
    color: var(--color-primary);
    font-weight: var(--fw-semiBold);
}
.sub-s-subtitle span {
    font-size: var(--fs-18);
    color: rgba(var(--color-text-secondary-rgb), 0.5);
    font-weight: var(--fw-regular);
}

.sub-s-desc {
    word-break: keep-all;
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-loose);
    font-size: var(--fs-20);
}

/* 이미지 Sample Data 안내문구 - 여러 섹션에서 재사용 가능하도록
   position:absolute 없이 일반 텍스트로 정의 (배치는 사용하는 곳에서 담당) */
.img-wrap-note {
    display: block;
    font-size: var(--fs-14);
    color: rgba(var(--color-text-secondary-rgb), 0.6);
}

/* 공통 타이틀/설명 텍스트 - 노트북 (~1500px) 반응형
   PC(48/44/30/18~20)와 모바일(28/24/20/14) 사이 중간 크기 추가 */
@media (max-width: 1500px) {
    .sub-s-headline {
        font-size: var(--fs-36);
        margin-bottom: 2rem;
    }
    .sub-s-title {
        font-size: var(--fs-32);
        margin-bottom: 2rem;
    }
    .sub-s-subtitle {
        font-size: var(--fs-24);
    }
    .sub-s-subtitle span {
        font-size: var(--fs-16);
    }
    .sub-s-desc {
        font-size: var(--fs-18);
    }
}

/* 공통 타이틀/설명 텍스트 - 모바일 (~1024px) 반응형 */
@media (max-width: 1024px) {
    .sub-s-headline {
        font-size: var(--fs-28);
        margin-bottom: 1.5rem;
    }
    .sub-s-title {
        font-size: var(--fs-24);
        margin-bottom: 1.5rem;
    }
    .sub-s-subtitle {
        font-size: var(--fs-20);
    }
    .sub-s-desc {
        font-size: var(--fs-14);
    }
}
/* ---------------- 공통 끝 ---------------- */


/* Product Overview 카드 컴포넌트 (PC): 아코디언 카드(acc-card) */
.card-list {
    /* .card-list 세로 방향 flex 배치 (공통 유틸 클래스 대신 속성 직접 정의) */
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    gap: 1.25rem;
    margin-top: 2.5rem;
}
/* acc-card: 색(민트 배경/hover·open 시 테두리)은 헤더 상자에만 들어가고,
   바디는 헤더와 10px 정도 떨어진 별도의 흰 박스로 뜨는 구조 - acc-card 자체는
   header/body를 세로로 쌓고 간격만 주는 투명 래퍼 역할 */
.acc-card {
    display: flex;
    flex-flow: column;
    gap: 0.625rem;
}
/* acc-header: 배경/테두리/그림자를 헤더 상자에만 적용 (공통 유틸 클래스 대신 flex 속성 직접 정의).
   border-style은 유지해야 border-color 트랜지션이 동작하므로 none 대신 transparent 사용 */
/* 헤더 안에 강조 문구(p) 다음으로 리스트도 노출해야 해서, 위아래로 쌓던
   acc-left/acc-right 2단을 진짜 좌/우 2단으로 변경 - acc-left가 배지+제목+문구+(선택)리스트를
   세로로 쌓고, 아이콘만 우측에 남음 */
.acc-header {
    background: var(--effects-bg);
    border: 0.063rem solid transparent;
    border-radius: 1rem;
    transition: border-color 0.25s, box-shadow 0.25s;
    cursor: pointer;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem 10rem;
    padding: 2.5rem 2.5rem 1rem 3.75rem;
}
/* PC도 hover 대신 .open 클릭(js/sub/acc_card.js)으로만 펼침 */
.acc-card.open .acc-header {
    border-color: var(--color-primary);
    box-shadow: 0 4px 24px rgba(var(--color-primary-rgb), 0.16);
}
/* .acc-left: 배지+제목 → 강조 문구(acc-desc) → (선택) 리스트(acc-list) 순으로 세로로 쌓는
   텍스트 블록. 리스트가 없는 카드도 동일 구조로 그대로 대응됨 (공통 유틸 클래스 대신 속성 직접 정의) */
.acc-left {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    gap: 1rem;
    /* flex-basis:0 고정 - auto면 긴 리스트(PERT 등)의 콘텐츠 폭 때문에 flex-wrap이
       의도치 않게 줄바꿈됨 */
    flex: 1 1 0%;
    min-width: 0;
}
.acc-left-top {
    display: flex;
    flex-flow: row;
    align-items: center;
}
/* 배지(badge) - 제목 대비 크기를 줄인 작은 pill 형태 */
.badge {
    display: inline-flex;
    align-items: center;
    background: var(--color-primary);
    color: var(--color-w);
    font-size: var(--fs-18);
    font-weight: var(--fw-medium);
    padding: 0.063rem 0.625rem 0.125rem;
    border-radius: 30rem;
    white-space: nowrap;
    letter-spacing: var(--ls-wide);
    flex-shrink: 0;
    margin-right: 0.625rem;
}
.acc-title {
    font-size: var(--fs-24);
    font-weight: var(--fw-medium);
}
.acc-desc {
    font-size: var(--fs-18);
}
/* acc-list: acc-desc 아래 추가로 노출되는 세부 항목 목록 (acc-body-inner li와 동일한
   dot bullet 스타일을 재사용) */
.acc-list {
    display: flex;
    flex-flow: column;
    gap: 0.5rem;
}
.acc-list li {
    position: relative;
    padding-left: 1rem;
    font-size: var(--fs-16);
    color: var(--color-text-secondary);
    word-break: keep-all;
}
.acc-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: rgba(var(--icon-color-grb), 0.5);
}
/* acc-header 전체가 클릭 가능한 아코디언임을 알려주는 힌트 텍스트.
   flex-basis:100%로 강제 줄바꿈시켜 헤더 하단 2행으로 배치 */
.acc-more {
    display: flex;
    flex: 1 0 100%;
    justify-content: flex-end;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--fs-14);
    color: var(--color-primary-20);
    border-top: 0.063rem solid var(--color-primary-0);
    padding-top: 1rem;
}
.acc-more-icon {
    font-size: 1rem;
    font-variation-settings:
    'FILL' 0,
    'wght' 300,
    'GRAD' 0,
    'opsz' 20;
    color: var(--color-primary-20);
    display: inline-block;
    transition: transform 0.25s;
}
/* 열리면 화살표 아래로 회전 */
.acc-card.open .acc-more-icon {
    transform: rotate(90deg);
}
.acc-icon-right {
    flex-shrink: 0;
    color: var(--acc-icon-color);
    font-size: var(--acc-icon-size);
    font-variation-settings:
    'FILL' 0,
    'wght' 100,
    'GRAD' 0,
    'opsz' 48;
}
.acc-card.open .acc-icon-right {
    opacity: 0.7;
}
/* acc-body: 색은 헤더 상자에만 들어가므로 항상 같은 회색 테두리를 갖는 흰 박스로 고정.
   헤더와의 10px 간격은 acc-card의 gap이 담당하므로 별도 margin은 불필요 */
.acc-body {
    display: none;
    padding: 2.5rem 2.5rem 2.5rem 3.75rem;
    background: var(--color-w);
    border: 0.063rem solid var(--color-border);
    border-radius: 1rem;
}
/* 모든 기기가 동일하게 acc-header 클릭 시 붙는 .open 클래스(js/sub/acc_card.js)로만
   아코디언 내용을 펼침 - PC도 hover로 펼쳐지던 동작 제거 */
.acc-card.open .acc-body {
    display: block;
}
/* acc-body-inner: 좌우 배치 flex (공통 유틸 클래스 대신 속성 직접 정의).
   acc-body가 흰 박스+테두리 구조라 내부 구분선 없이 gap만으로 여백 처리 */
.acc-body-inner {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
}

.acc-body-inner li {
    font-size: var(--fs-18);
    display: flex;
    align-items: center;
}
.acc-body-inner li::before {
    content: '';
    flex-shrink: 0;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: rgba(var(--icon-color-grb), 0.5);
    margin-right: 0.5rem;
    /* 텍스트가 2줄이 될 때 dot이 첫째줄에 오도록 flex-start + 첫줄 높이 절반만큼 margin-top으로 보정 */
    align-self: flex-start;
    margin-top: calc((var(--fs-18) * var(--lh-normal) - 0.25rem) / 2);
}

/* acc-body가 ul+thumb 대신 옵션 이미지 1장만 담는 카드용 스타일 - width:100%면 화질이 흐려져
   max-width로 원본 크기를 상한으로 두고 컨테이너가 더 좁으면 축소되도록 함 */
.acc-option-img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    margin: 0 auto;
    border-radius: 0.625rem;
}

/* .acc-thumb 가운데 정렬 flex 배치 (공통 유틸 클래스 대신 속성 직접 정의) */
.acc-thumb {
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    aspect-ratio: 368 / 207;
    width: 44%;
    height: auto;
    border-radius: 0.625rem;
    overflow: hidden;
    border: 0.063rem solid var(--color-border);
}
.acc-thumb img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Product Overview 카드 컴포넌트 - 노트북 (~1500px) 반응형
   이 컴포넌트는 원래 1500px 전용 값이 없어 1024px 모바일 전까지 PC 크기
   그대로였음 - "PC 그대로 20% 작게" 원칙으로 통일 */
@media (max-width: 1500px) {
    .card-list {
        margin-top: 2rem; /* 2.5rem의 80% */
    }
    .acc-header {
        padding: 2rem 2rem 2rem 3rem; /* 2.5rem 2.5rem 2.5rem 3.75rem의 80% */
        gap: 1rem 8rem; /* 1.25rem/1.5rem의 80% */
    }
    .acc-left {
        gap: 0.8rem; /* 1rem의 80% */
    }
    .badge {
        font-size: 0.9rem; /* fs-18(1.125rem)의 80% */
        padding: 0.05rem 0.5rem 0.1rem; /* 0.063rem 0.625rem 0.125rem의 80% */
        margin-right: 0.5rem; /* 0.625rem의 80% */
    }
    .acc-title {
        font-size: 1.2rem; /* fs-24(1.5rem)의 80% */
    }
    .acc-desc {
        font-size: 0.9rem; /* fs-18(1.125rem)의 80% */
    }
    .acc-list {
        gap: 0.4rem; /* 0.5rem의 80% */
    }
    .acc-list li {
        font-size: 0.8rem; /* fs-16(1rem)의 80% */
    }
    .acc-more {
        font-size: 0.7rem; /* fs-14(0.875rem)의 80% */
    }
    .acc-icon-right {
        font-size: 5.5rem; /* --acc-icon-size(6.875rem)의 80% */
    }
    .acc-body {
        padding: 2rem 3rem;
    }
    .acc-body-inner {
        gap: 3rem; /* 1.5rem의 80% */
    }
    .acc-body-inner li {
        font-size: 0.9rem; /* fs-18(1.125rem)의 80% */
    }
    /* 노트북/모바일(~1500px)에서는 li font-size가 0.9rem으로 줄어들므로
       ::before의 margin-top(첫줄 중앙 정렬용)도 0.9rem 기준으로 재계산 */
    .acc-body-inner li::before {
        margin-top: calc((0.9rem * var(--lh-normal) - 0.25rem) / 2);
    }
}

/* Product Overview 카드 컴포넌트 - 모바일 (~1024px) 반응형
   section-header 이후 간격은 다른 섹션과 통일해 .option-system .section-header 쪽
   margin-bottom에서 담당하므로 여기서는 margin-top을 따로 두지 않음 */
@media (max-width: 1024px) {
    .card-list {
        gap: 1rem;
    }
    /* acc-left에 문구+리스트가 붙으면서 세로 길이가 카드마다 크게 달라져,
       PC처럼 좌/우 row + 세로 중앙정렬로 두면 아이콘이 리스트 중간 어딘가에 떠 보이게 됨.
       모바일에서는 아이콘을 텍스트 아래로 내려 sp-card-icon과 동일하게 우측 하단에 배치 */
    .acc-header {
        padding: 1.5rem 1rem;
        gap: 0.75rem;
        flex-flow: column;
        align-items: stretch;
    }
    .detail_ez-4d .option-system .acc-card:last-child .acc-header {
        padding: 1.5rem 1rem !important;
    }
    .acc-left {
        gap: 0.5rem;
    }
    .acc-left-top {
        flex-flow: column;
        align-items: flex-start;
    }
    .badge {
        font-size: var(--fs-12);
        margin-bottom: 0.5rem;
    }
    .acc-title {
        font-size: var(--fs-18);
    }
    .acc-desc {
        font-size: var(--fs-14);
    }
    .acc-list li {
        font-size: var(--fs-14);
    }
    .acc-more {
        /* acc-header가 column으로 바뀌면서 flex-basis:100%(PC용 강제 줄바꿈)가
           세로축(높이) 기준으로 해석되어 버리므로 auto로 되돌림 */
        flex: 0 0 auto;
        font-size: var(--fs-12);
    }
    .acc-icon-right {
        align-self: flex-end;
        font-size: var(--fs-56);
    }
    /* 모바일에서는 항상 펼치지 않고 acc-header 터치 시 .open 클래스로 펼침
       (display:none은 기본 규칙 그대로, padding만 모바일용으로 축소).
       acc-body가 흰 박스 형태라 margin은 쓰지 않고 acc-card의 gap이 헤더와의 간격을 담당 */
    .acc-body {
        padding: 1.5rem 1rem;
    }
    .acc-body-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    .acc-thumb {
        width: 100%;
    }
}


/* Expected Effects 피처 컴포넌트 (PC): feature-list 그리드(라벨 + 카드 목록) */
.feature-list {
    border-radius: 1rem;
    padding: 3.75rem;
    display: grid;
    grid-template-columns: 25rem 1fr;
    gap: 0;
    background: var(--color-w);
}
/* .feature-label 가로 배치 flex (공통 유틸 클래스 대신 속성 직접 정의) */
.feature-label {
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
}
.feature-label h2 {
    font-size: var(--fs-24);
    font-weight: var(--fw-medium);
}
.feature-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 2.5rem 3.75rem;
}
/* s-pmis / s-ve / s-evm */
.detail_s-pmis .feature-list,
.detail_s-ve .feature-list,
.detail_s-evm .feature-list {
    grid-template-columns: 1fr;
}
.detail_s-pmis .feature-label,
.detail_s-ve .feature-label,
.detail_s-evm .feature-label {
    display: none;
}
.detail_s-pmis .feature-wrap {
    grid-template-columns: repeat(3, 1fr);
}
/* .feature 가로 배치 flex (공통 유틸 클래스 대신 속성 직접 정의) */
.feature {
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    width: 100%;
    min-height: 100%;
    animation: fadeUp 0.5s ease both;
    gap: 1.5rem;
}
.feature-bar {
    width: 0.25rem;
    border-radius: 1rem;
    flex-shrink: 0;
    align-self: stretch;
}
.feature:nth-child(1) .feature-bar { background: var(--accent-mint); }
.feature:nth-child(2) .feature-bar { background: var(--accent-blue); }
.feature:nth-child(3) .feature-bar { background: var(--accent-orange); }
.feature:nth-child(4) .feature-bar { background: var(--accent-purple); }
.feature:nth-child(5) .feature-bar { background: var(--accent-pnik); }
.feature:nth-child(6) .feature-bar { background: var(--accent-green); }
.feature:nth-child(7) .feature-bar { background: var(--accent-plum); }

.feature-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.feature:nth-child(1) { animation-delay: 0.2s; }
.feature:nth-child(2) { animation-delay: 0.25s; }
.feature:nth-child(3) { animation-delay: 0.3s; }
.feature:nth-child(4) { animation-delay: 0.35s; }
.feature:nth-child(5) { animation-delay: 0.4s; }
.feature:nth-child(6) { animation-delay: 0.45s; }
.feature:nth-child(7) { animation-delay: 0.5s; }

.feature-title {
    font-size: var(--fs-24);
    font-weight: var(--fw-medium);
}
.feature-desc {
    color: var(--color-text-secondary);
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(1rem); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Expected Effects 피처 컴포넌트 - 노트북 (~1500px) 반응형
   PC의 25rem 고정 라벨 컬럼은 노트북 폭에서 feature-wrap 2열 공간을 거의 남기지 않아
   라벨(feature-label)을 위로 올리고 feature-wrap을 그 아래 전체 폭으로 내리는 1열 구조로 전환 */
@media (max-width: 1500px) {
    .detail_s-pmis .feature-wrap,
    .detail_ez-bim .feature-wrap  {
        grid-template-columns: 1fr 1fr;
    }
    /* feature-list 내부 값들도 노트북 전용 값이 없어 PC 크기 그대로였던 것을
       "PC 그대로 20% 작게" 원칙으로 통일 */
    .feature-list {
        padding: 3rem; /* 3.75rem의 80% */
        grid-template-columns: 20rem 1fr;
    }
    .feature-label h2 {
        font-size: 1.2rem; /* fs-24(1.5rem)의 80% */
    }
    .feature-wrap {
        gap: 2rem 3rem; /* 2.5rem 3.75rem의 80% */
    }
    .feature {
        gap: 1.2rem; /* 1.5rem의 80% */
    }
    .feature-bar {
        width: 0.2rem; /* 0.25rem의 80% */
    }
    .feature-content {
        gap: 0.4rem; /* 0.5rem의 80% */
    }
    .feature-title {
        font-size: 1.2rem; /* fs-24(1.5rem)의 80% */
    }
}

/* Expected Effects 피처 컴포넌트 - 모바일 (~1024px) 반응형 */
@media (max-width: 1024px) {
    .feature-list {
        padding: 1.5rem 1rem;
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .feature-label {justify-content: center;}
    .feature-wrap {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .detail_s-pmis .feature-wrap,
    .detail_ez-bim .feature-wrap {
        grid-template-columns: 1fr;
    }
    .feature-title {
        font-size: var(--fs-18);
    }
    .feature-desc {
        font-size: var(--fs-14);
    }
}


/* ================================================
        Product Structure (PC) / 제품구조
================================================ */
.product-structure {
    position: relative;
    width: 100%;
    /* overflow: hidden; */
    /* margin-top: 6.25rem; */
}
.product-structure::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 62%; /* ps-title이 cont-title로 빠지면서 섹션이 짧아진 만큼 배경 하프 블록 비율도 같이 조정 */
    background: var(--gray-bg-100);
    z-index: var(--z-base-line);
}

/* ps-title은 cont-title .section-header로 이동함 (위 cont-title 영역 참고) */

.product-structure .section-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    padding: 6.25rem 18.75rem;
    gap: 5rem;
}
.product-structure .section-header {
    position: relative;
    flex: 0 0 auto;
    width: 38.75rem;
}
/* 페이지마다 원본 이미지 비율이 달라(system 계열 4:3 vs consulting 계열 약 1.83:1)
   monitor-wrap 높이가 페이지별로 들쭉날쭉하던 문제 수정. s-PMIS 이미지 비율(896x672 = 4:3)을
   기준으로 박스 크기를 고정하고, object-fit:cover로 모든 페이지 이미지가 이 박스에 맞춰 채워지도록 함 */
.product-structure .monitor-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    position: relative;
    border-radius: 2.5rem;
    border-bottom-left-radius: 0;
    overflow: hidden;
    box-shadow: var(--box-shadow);
}
.product-structure .monitor-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* .product-structure .kv-scroll 가운데 정렬 flex 배치 (공통 유틸 클래스 대신 속성 직접 정의) */
.product-structure .kv-scroll {
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    /* section-wrap 마크업 순서를 텍스트|이미지로 변경(order 미사용)하면서
       이미지가 우측으로 이동해, 장식 아이콘도 바깥쪽 모서리(우측)로 함께 이동 */
    right: -10%;
    top: -10%;
    width: clamp(6rem, 7vw, 7rem);
    height: clamp(6rem, 7vw, 7rem);
    pointer-events: auto;
    z-index: var(--z-contents);
    /* kv-scroll-text가 회전(rotate-text)하는데, 정사각형 박스의 축정렬 경계상자는 45도 부근에서
       실제 크기보다 최대 약 41%까지 커져 모바일에서 주기적으로 가로 스크롤을 유발 - 내용이
       이미 원형이라 여기서 클리핑해도 보이는 모양은 그대로임 */
    overflow: hidden;
}

.product-structure .kv-scroll-text {
    /* 부모(.kv-scroll)의 justify-content/align-items 정렬에만 의존하면 브라우저마다 위치 계산이
       미세하게 어긋나 모바일 가로 스크롤을 유발 - 부모와 크기 동일하므로 top/left:0으로 고정 */
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(6rem, 7vw, 7rem);
    height: clamp(6rem, 7vw, 7rem);
    border-radius: 50%;
    animation: rotate-text 10s linear infinite;
}
.product-structure .kv-scroll-text img {
    width: 100%;
    height: 100%;
}
@keyframes rotate-text {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

/* .product-structure .section-body 세로 방향 flex 배치 (공통 유틸 클래스 대신 속성 직접 정의) */
.product-structure .section-body {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    flex: 1;
}
.product-structure .sub-s-subtitle span {
    font-size: var(--fs-30);
}
/* pg-logo-wrap은 section-body 상단(제품/컨설팅 개요 타이틀 자리)에 위치, 전체 75% 축소.
   p가 flex:1이 없으면 좁게 shrink-wrap되어 짧은 텍스트도 줄바꿈되는 문제가 있어
   flex:1 + min-width:0으로 남는 가로공간을 다 차지하도록 하고, white-space:nowrap으로 PC에서 한 줄 고정 */
.product-structure .section-body .pg-logo-wrap {
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
    gap: 1.125rem; /* 1.5rem의 75% */
    margin-bottom: 4.5rem;
}
.product-structure .section-body .pg-logo-wrap>img.ez-size {
    height: 2.5rem;
}
.product-structure .section-body .pg-logo-wrap>img.s-size {
    height: 3.125rem;
}
.product-structure .section-body .pg-logo-wrap .separator {
    display: block;
    width: 0.063rem;
    height: 2.48rem; /* 3.313rem의 75% */
    background: var(--color-border);
}
.product-structure .section-body .pg-logo-wrap p {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-flow: column;
    align-items: flex-start;
    font-size: 1.125rem; /* fs-24(1.5rem)의 75% = fs-18 */
    color: var(--color-text-secondary);
    font-weight: var(--fw-medium);
    word-break: keep-all;
    white-space: nowrap;
}
.product-structure .section-body .pg-logo-wrap span {
    font-size: 0.938rem; /* fs-20(1.25rem)의 75% */
    color: rgba(var(--color-text-secondary-rgb), 0.5);
    font-weight: var(--fw-regular);
    white-space: nowrap;
}

/* Product Structure - 노트북 (~1500px) 반응형
   PC의 좌우 18.75rem 여백 + section-header 고정폭 38.75rem은 노트북 폭에서
   section-body(flex:1) 공간을 음수로 만들어 텍스트와 이미지가 겹치므로 여백과 이미지 폭을 축소 */
@media (max-width: 1500px) {
    .product-structure .section-wrap {
        padding: 5rem 12.5rem; /* 좌우 여백 12.5rem으로 확대 */
        gap: 4rem;
    }
    .product-structure .section-header {
        width: 26rem;
    }
    .product-structure .sub-s-subtitle span {
    font-size: var(--fs-24);
}
    /* pg-logo-wrap: 이미 75%로 줄인 "PC" 값 기준으로 추가 -20% */
    .product-structure .section-body .pg-logo-wrap {
        gap: 0.9rem; /* 1.125rem의 80% */
        margin-bottom: 3.6rem; /* 4.5rem의 80% */
    }
    .product-structure .section-body .pg-logo-wrap>img.ez-size {
        height: 2.2rem;
    }
    .product-structure .section-body .pg-logo-wrap>img.s-size {
        height: 2.7rem;
    }
    .product-structure .section-body .pg-logo-wrap .separator {
        height: 1.98rem; /* 2.48rem의 80% */
    }
    .product-structure .section-body .pg-logo-wrap p {
        font-size: 0.9rem; /* 1.125rem의 80% */
    }
    .product-structure .section-body .pg-logo-wrap span {
        font-size: 0.75rem; /* 0.938rem의 80% */
    }
}

/* Product Structure - 모바일 (~1024px) 반응형 */
@media (max-width: 1024px) {
    .product-structure .section-wrap {
        flex-direction: column;
        /* align-items:center(PC용 상속값)이면 텍스트 요소들이 내용 크기만큼만 줄어들어
           폭이 제각각이 되므로, 전체 폭을 채우도록 stretch로 지정 */
        align-items: stretch;
        padding: 3rem 1rem;
        gap: 0;
    }
    .product-structure .section-header {
        width: 100%;
        /* 이미지를 맨 위로 - section-header(이미지)→pg-logo-wrap→sub-s-subtitle→sub-s-desc 순서로 노출.
           첫 요소가 되어 margin-top은 section-wrap의 padding-top으로 충분해 제거 */
        order: 1;
    }
    .product-structure .kv-scroll {
        left: auto;
        right: 0;
    }
    /* 모바일은 이미지가 맨 위, pg-logo-wrap/부제목/설명이 그 아래로 배치되어야 해서
       section-body를 display:contents로 풀어 자식들을 section-wrap의 flex item으로
       직접 참여시키고 order로 재배치 */
    .product-structure .section-body {
        display: contents;
    }
    /* section-body가 display:contents로 풀리는 구간이라, pg-logo-wrap이 이미지
       바로 다음(order:2) 자리를 맡음. 세로로 쌓고, 구분선도 세로선 대신 로고 아래
       짧은 가로선으로 전환. margin-top으로 위 이미지와의 간격을 담당 */
    .product-structure .section-body .pg-logo-wrap {
        order: 2;
        flex-flow: column;
        align-items: flex-start;
        gap: 0.75rem;
        margin-top: 2rem;
        margin-bottom: 1.5rem;
    }
    .product-structure .section-body .pg-logo-wrap>img.ez-size {
        height: 2rem;
    }
    .product-structure .section-body .pg-logo-wrap>img.s-size {
        height: 2.2rem;
    }
    /* 모바일에서는 원본 사이트도 ez-size/s-size 둘 다 같은 높이(2.5rem)를 썼어서
       75% 축소 후에도 두 클래스가 동일한 값(1.875rem)이라 하나로 합침 */
    .product-structure .section-body .pg-logo-wrap .separator {
        display: none;
    }
    .product-structure .section-body .pg-logo-wrap p {
        font-size: var(--fs-16); /* fs-18(1.125rem)의 75% */
        white-space: normal;
        align-items: flex-start;
    }
    .product-structure .section-body .pg-logo-wrap span {
        font-size: var(--fs-12); /* fs-14(0.875rem)의 75% */
        white-space: normal;
    }
    .product-structure .sub-s-subtitle {
        order: 3;
        margin-bottom: 1rem;
        /* 위 pg-logo-wrap의 margin-bottom(1.5rem)이 간격을 담당하므로
           기존 margin-top(이미지 바로 아래였을 때의 값)은 제거 */
    }
    .product-structure .sub-s-subtitle span {
        font-size: var(--fs-20);
    }
    .product-structure .sub-s-desc {
        order: 4;
    }
}

/* s-VE/s-EVM 페이지의 product-structure는 텍스트 | 이미지 2단 분리 + 텍스트 우측 정렬
   (다른 페이지는 이미지 | 텍스트 순서 유지, detail_s-ve 등 클래스로만 분기) */


/* Product Category (PC) / 제품 종류: C/S System · Web System 목록 - ez-PERT 페이지에서 사용 */
.product-category {
    padding: 5rem 18.75rem;
}
.product-category .section-header {
    flex-flow: column;
    align-items: flex-start;
}
/* 두 제품을 한 패널 안에서 세로선으로 나눠 나란히 비교하는 분할 패널 구조 */
.category-split-panel {
    display: flex;
    margin-top: 2.5rem;
    background: var(--color-w);
    border: 0.063rem solid var(--color-border);
    border-radius: 1.25rem;
    overflow: hidden;
}
.category-split-half {
    flex: 1;
    display: flex;
    flex-flow: column;
    gap: 0.9rem;
    padding: 2.5rem 2.5rem 2.75rem;
    border-top: 0.188rem solid transparent;
}
.category-split-half + .category-split-half {
    border-left: 0.063rem solid var(--color-border);
}
.category-split-half--mint { border-top-color: var(--accent-mint); }
.category-split-half--blue { border-top-color: var(--accent-blue); }
.category-split-icon {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-24);
    color: var(--color-w);
    font-variation-settings:
    'FILL' 0,
    'wght' 300,
    'GRAD' 0,
    'opsz' 48;
}
.category-split-half--mint .category-split-icon { background: var(--accent-mint); }
.category-split-half--blue .category-split-icon { background: var(--accent-blue); }
.category-split-title {
    font-size: var(--fs-20);
    font-weight: var(--fw-semiBold);
}
.category-split-desc {
    word-break: keep-all;
    line-height: var(--lh-loose);
    font-size: var(--fs-16);
    color: var(--color-text-secondary);
}

/* Product Category - 노트북 (~1500px) 반응형 */
@media (max-width: 1500px) {
    .product-category {
        padding: 0 12.5rem;
    }
    .category-split-panel {
        margin-top: 2rem; /* 2.5rem의 80% */
        border-radius: 1rem; /* 1.25rem의 80% */
    }
    .category-split-half {
        gap: 0.72rem; /* 0.9rem의 80% */
        padding: 2rem 2rem 2.2rem; /* 80% */
    }
    .category-split-icon {
        width: 2.2rem; /* 2.75rem의 80% */
        height: 2.2rem;
        border-radius: 0.52rem;
        font-size: 1.2rem; /* fs-24(1.5rem)의 80% */
    }
    .category-split-title {
        font-size: 1rem; /* fs-20(1.25rem)의 80% */
    }
    .category-split-desc {
        font-size: 0.9rem; /* fs-16(1rem)의 80% */
    }
}

/* Product Category - 모바일 (~1024px) 반응형: 좌우 분할 대신 위아래로 쌓음 */
@media (max-width: 1024px) {
    .product-category {
        padding: 0 1rem;
    }
    /* 4px 간격을 두고 따로 떨어진 두 개의 상자로 분리 - 바깥 패널의 테두리/배경/모서리는 제거 */
    .category-split-panel {
        flex-flow: column;
        gap: 0.25rem; /* 약 4px */
        margin-top: 1.5rem;
        background: transparent;
        border: none;
        border-radius: 0;
        overflow: visible;
    }
    .category-split-half {
        gap: 0.6rem;
        padding: 1.5rem 1.25rem 1.75rem;
        border-right: 0.063rem solid var(--color-border);
        border-bottom: 0.063rem solid var(--color-border);
        border-left: 0.063rem solid var(--color-border);
        border-radius: 0.9rem; /* 분리된 상자이므로 네 모서리 모두 동일하게 둥글게 */
    }
    /* border-top의 두께만 나머지 세 변과 맞추고, 색상(mint/blue)은 그대로 유지 */
    .category-split-half--mint,
    .category-split-half--blue {
        border-top-width: 0.125rem;
    }
    .category-split-icon {
        width: 2rem;
        height: 2rem;
        border-radius: 0.5rem;
        font-size: var(--fs-18);
    }
    .category-split-title {
        font-size: var(--fs-18);
    }
    .category-split-desc {
        font-size: var(--fs-14);
    }
}

/* System Process (PC) / 시스템 과정: PM 종합/핵심/전문분야협력 Process 카드 3개 */
.system-process {
    padding: 7.5rem 18.75rem;
}
.sp-card-list {
    display: flex;
    flex-flow: row;
    gap: 1.875rem;
}
.sp-card {
    position: relative;
    flex: 1;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    min-height: 23rem;
    padding: 2.5rem;
    background: var(--effects-bg);
    border-radius: 1.5rem;
}
.sp-card-title {
    font-size: var(--fs-24);
    font-weight: var(--fw-semiBold);
    margin-bottom: 1.25rem;
    line-height: var(--lh-normal);
}
.sp-card-title>span {
    font-size: var(--fs-18);
    font-weight: var(--fw-regular);
    color: var(--color-text-secondary);
}
.sp-card-desc {
    word-break: keep-all;
    line-height: var(--lh-loose);
    font-size: var(--fs-18);
    color: var(--color-text-secondary);
}
.sp-card-icon {
    margin-top: auto;
    align-self: flex-end;
    font-size: var(--fs-72);
    color: var(--acc-icon-color);
    font-variation-settings:
    'FILL' 0,
    'wght' 100,
    'GRAD' 0,
    'opsz' 48;
}
/* sp-card-icon은 여러 페이지가 공유하므로, hub 아이콘만 작게 하려고 modifier로 분리 */
.sp-card-icon--sm {
    font-size: var(--fs-64);
}

/* System Process - 노트북 (~1500px) 반응형
   좌우 여백뿐 아니라 상하 padding도 함께 축소해, 동일한 desktop 값(7.5rem 18.75rem)을
   쓰는 형제 섹션(reference-system, expected-effects 등)과 같은 비율로 여백 유지 */
@media (max-width: 1500px) {
    .system-process {
        padding: 5rem 12.5rem; /* 좌우 여백 12.5rem으로 확대 */
    }
    /* sp-card 관련 값 전체를 "PC 그대로 20% 작게" 원칙으로 통일
       (기존 gap/min-height는 서로 다른 비율로 줄어 있었고, title/desc/icon은
       노트북 전용 값 자체가 없어 PC 크기 그대로였음) */
    .sp-card-list {
        gap: 1.5rem; /* 1.875rem의 80% */
    }
    .sp-card {
        min-height: 18.4rem; /* 23rem의 80% */
        padding: 2rem; /* 2.5rem의 80% */
        border-radius: 1.2rem; /* 1.5rem의 80% */
    }
    .sp-card-title {
        font-size: var(--fs-19);
        margin-bottom: 1rem; /* 1.25rem의 80% */
    }
    .sp-card-title>span {
        font-size: var(--fs-14);
    }
    .sp-card-desc {
        font-size: 0.9rem; /* fs-18(1.125rem)의 80% */
    }
    .sp-card-icon {
        font-size: 3.6rem; /* fs-72(4.5rem)의 80% */
    }
    .sp-card-icon--sm {
        font-size: 3.2rem; /* fs-64(4rem)의 80% */
    }
}

/* System Process - 모바일 (~1024px) 반응형 (상하 padding 관련은 위 1500px 반응형 참고) */
@media (max-width: 1024px) {
    .system-process {
        padding: 3rem 1rem;
    }
    /* section-header 이후 간격을 다른 섹션과 동일하게 맞추기 위해 sp-card-list의
       margin-top은 두지 않고, 타이틀(sub-s-title) 자체의 모바일 margin-bottom(1.5rem,
       공통 타이틀 스타일)만으로 간격을 통일 */
    .sp-card-list {
        flex-flow: column;
        gap: 1.25rem;
    }
    .sp-card {
        min-height: 0;
        padding: 1.75rem;
        border-radius: 1rem;
    }
    .sp-card-title {
        font-size: var(--fs-18);
        margin-bottom: 0.75rem;
    }
    .sp-card-desc {
        font-size: var(--fs-14);
    }
    .sp-card-icon {
        font-size: var(--fs-48);
        margin-top: 1rem;
    }
}


/* ================================================
        Reference System (PC) / 도식
================================================ */
.reference-system {
    padding: 0 18.75rem 7.5rem;
    display: flex;
    flex-flow: column;
    gap: 5rem;
}
/* 실제 마크업 클래스는 .ref-bg이며, width:100%는 motion_add.css의 .ref-bg img가 담당 */

/* .reference-system .ref-layout - 이미지1 + 타이틀/문구 + 이미지2를 세로로 쌓는 구조 */
.reference-system .ref-layout {
    display: flex;
    flex-flow: column;
}
/* s-TPM처럼 .ref-bg 안에 문구(div)+이미지가 같이 들어가는 경우 둘 사이에 간격을 줌
   (문구 없이 이미지만 있는 다른 페이지의 .ref-bg에는 해당 자식이 없어 영향 없음) */
.reference-system .ref-bg {
    padding: 0 6.25rem;
}
.reference-system .ref-bg > div {
    margin-bottom: 5rem;
}
.reference-system .ref-process-info {
    margin: 5rem 0;
}
.reference-system .ref-process-info .sub-s-title {
    margin-bottom: 1.25rem;
}

.detail_s-pmis .reference-system {
    padding: 0 18.75rem;
}

/* Reference System - 노트북 (~1500px) 반응형
   다른 섹션과 동일하게 좌우 여백을 축소해 콘텐츠 전체가 일관된 여백을 갖도록 함 */
@media (max-width: 1500px) {
    .reference-system,
    .detail_s-pmis .reference-system {
        padding: 0 12.5rem; /* 좌우 여백 12.5rem으로 확대 */
        gap: 4rem; /* PC 그대로 20% 작게 - 5rem의 80% */
    }
    .reference-system .ref-bg {
        padding: 0 5rem;
    }
    .reference-system .ref-bg > div {
        margin-bottom: 1.2rem; /* 1.5rem의 80% */
    }
    .reference-system .ref-process-info {
        margin: 4rem 0; /* 5rem의 80% */
    }
    .reference-system .ref-process-info .sub-s-title {
        margin-bottom: 1rem; /* 1.25rem의 80% */
    }
}

/* Reference System - 모바일 (~1024px) 반응형: header/body는 flex(column) gap 구조라
   header 마지막 요소의 margin-bottom을 0으로 없애고 gap만 1.5rem으로 통일 */
@media (max-width: 1024px) {
    .reference-system,
    .detail_s-pmis .reference-system {
        padding: 3rem 1rem;
        gap: 1.5rem;
    }
    .reference-system .ref-bg {padding: 0 1rem;}
    .reference-system .section-header > *:last-child {
        margin-bottom: 0;
    }
    .reference-system .ref-process-info {
        margin: 3rem 0;
    }
}

/* ================================================
        Reference System (PC) / 시스템 레퍼런스
================================================ */
.reference-system .section-header {
    flex-flow: column;
    align-items: flex-start;
}


/* Service Stage (PC) / s-TPM 전용: 주요 연혁(.detail_history)과 동일한 sticky 좌측 탭 + 우측 연속 패널 구조.
   스크롤스파이/스무스스크롤은 js/sub/stage_filter.js(history_filter.js와 동일 패턴) */
.stage-section {
    padding: 0;
}
/* 좌측 sticky 영역 배경을 화면 끝까지 채우기 위해, 페이지 좌측 여백(18.75rem)을
   stage-body의 padding이 아니라 stage-tab-col의 width/padding-left에 포함시킴
   (.detail_history .history-tab-col과 동일한 방식) */
.stage-body {
    display: flex;
    flex-flow: row;
    align-items: flex-start;
}
.stage-tab-col {
    position: sticky;
    top: 0;
    flex-shrink: 0;
    width: 42rem; /* 18.75rem(페이지 여백) + 22.5rem(컬럼 콘텐츠) + 2.5rem(우측 여백) */
    padding: 5rem 3.75rem 5rem 18.75rem;
    display: flex;
    flex-flow: column;
    background: var(--gray-bg-100);
}
.stage-tab-col .section-header {
    flex-flow: column;
    align-items: flex-start;
    text-align: left;
    margin-bottom: 3.75rem;
    opacity: 1;
    transform: none;
    transition: none;
}
.stage-tab-col .sub-s-headline {
    margin-bottom: 1.25rem;
}

.stage-tab-col .sub-s-desc {
    font-size: var(--fs-18);
}

.stage-tab-list {
    display: flex;
    flex-flow: column;
}
/* 원 크기/선 여백을 변수로 빼서 ::after 계산에 재사용 - 노트북 브레이크포인트는
   이 두 변수만 재정의하면 됨 */
.stage-tab-btn {
    --stage-num-size: 2.5rem;
    --stage-line-gap: 0.75rem;
    position: relative;
    display: flex;
    flex-flow: row;
    align-items: flex-start;
    gap: 1.25rem;
    padding-bottom: 4.375rem;
    cursor: pointer;
}
/* 번호 원 사이 세로선(마지막 탭 제외). left는 원 중심에 translateX(-50%)로 맞춤 */
.stage-tab-btn:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(var(--stage-num-size) + var(--stage-line-gap));
    left: calc(var(--stage-num-size) / 2);
    transform: translateX(-50%);
    width: 0.063rem;
    height: calc(100% - var(--stage-num-size) - (var(--stage-line-gap) * 2));
    background: var(--color-border);
}
.stage-tab-num {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    font-family: var(--font-en);
    font-size: var(--fs-18);
    font-weight: var(--fw-medium);
    color: var(--color-text-secondary);
    border: 0.063rem solid var(--color-border);
    transition: background 0.3s, color 0.3s;
}
.stage-tab-label {
    display: flex;
    flex-flow: column;
}
.stage-tab-label strong {
    font-size: var(--fs-22);
    font-weight: var(--fw-semiBold);
    color: rgba(var(--color-text-secondary-rgb), 0.6);
    transition: color 0.3s;
}
.stage-tab-label small {
    font-size: var(--fs-18);
    color: rgba(var(--color-text-secondary-rgb), 0.6);
}
.stage-tab-btn.active .stage-tab-num {
    background: var(--color-primary);
    color: var(--color-w);
    border: none;
}
.stage-tab-btn.active .stage-tab-label strong {
    color: var(--color-text);
}
.stage-tab-btn.active .stage-tab-label small {
    color: var(--color-text);
}

.stage-panel-wrap {
    flex: 1;
    min-width: 0;
    padding: 7.5rem 18.75rem 5rem 5rem;
    display: flex;
    flex-flow: column;
    gap: 10rem;
}
.stage-badge {
    display: block;
    font-size: var(--fs-24);
    font-weight: var(--fw-semiBold);
    margin-bottom: 2.5rem;
}
.stage-badge span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    font-family: var(--font-en);
    font-size: var(--fs-20);
    font-weight: var(--fw-medium);
    background: var(--color-primary);
    color: var(--color-w);
}
.stage-badge em {
    font-style: normal;
    font-weight: var(--fw-regular);
    color: var(--color-text-secondary);
    font-size: var(--fs-20);
}
.stage-title {
    font-size: var(--fs-36);
    font-weight: var(--fw-semiBold);
    word-break: keep-all;
    margin-bottom: 2rem;
}
.stage-service {
    font-size: var(--fs-28);
    font-weight: var(--fw-medium);
    margin-bottom: 1rem;
}
.stage-panel .sub-s-desc {
    margin-bottom: 4rem;
}

/* 01 입찰단계 - 3단 카드 */
.stage-card-list {
    display: flex;
    flex-flow: row;
    gap: 1.25rem;
    margin-bottom: 3rem;
}
.stage-card {
    flex: 1;
    background: var(--color-w);
    border: 0.063rem solid var(--color-border);
    border-radius: 0.5rem;
    overflow: hidden;
}
.stage-card h4 {
    font-size: var(--fs-18);
    font-weight: var(--fw-medium);
    text-align: center;
    padding: 0.6rem 1.25rem;
}
.stage-card ul {
    display: flex;
    flex-flow: column;
    gap: 0.125rem;
    padding: 1.25rem;
}
.stage-card li {
    position: relative;
    padding-left: 0.875rem;
    word-break: keep-all;
    line-height: var(--lh-normal);
    font-size: var(--fs-14);
    color: var(--color-text-secondary);
}
.stage-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: rgba(var(--color-text-secondary-rgb), 0.7);
}
.stage-card--blue h4 {
    background: color-mix(in srgb, var(--accent-blue) 14%, var(--color-w));
    color: var(--accent-blue);
}
.stage-card--mint h4 {
    background: color-mix(in srgb, var(--accent-mint) 14%, var(--color-w));
    color: var(--accent-mint);
}
.stage-card--orange h4 {
    background: color-mix(in srgb, var(--accent-orange) 16%, var(--color-w));
    color: var(--accent-orange);
}
.stage-card--pnik h4 {
    background: color-mix(in srgb, var(--accent-pnik) 14%, var(--color-w));
    color: var(--accent-pnik);
}
.stage-card--green h4 {
    background: color-mix(in srgb, var(--accent-green) 14%, var(--color-w));
    color: var(--accent-green);
}

/* 02/03 다이어그램 이미지 */
.stage-diagram {
    margin-bottom: 4rem;
}
.stage-diagram img {
    display: block;
    width: 100%;
}

/* 하단 2단 정보블록(컬러 좌측 바) - 공통 */
.stage-info-list {
    display: flex;
    flex-flow: row;
    gap: 3.75rem;
}
.stage-info {
    position: relative;
    flex: 1;
    padding: 0.5rem 0 0.5rem 1.5rem;
}
/* border-left 대신 알약 모양 컬러 바를 별도 요소로 구현 */
.stage-info::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3rem;
    bottom: 0.3rem;
    width: 0.25rem;
    border-radius: 999px;
    background-color: var(--color-border);
}
.stage-info h4 {
    font-size: var(--fs-22);
    font-weight: var(--fw-medium);
    margin-bottom: 0.5rem;
}
.stage-info p {
    word-break: keep-all;
    line-height: var(--lh-loose);
    font-size: var(--fs-16);
    color: var(--color-text-secondary);
}
.stage-info--blue::before   { background-color: var(--accent-blue); }
.stage-info--mint::before    { background-color: var(--accent-mint); }
.stage-info--orange::before { background-color: var(--accent-orange); }
.stage-info--pnik::before    { background-color: var(--accent-pnik); }
.stage-info--green::before  { background-color: var(--accent-green); }

/* Service Stage - 노트북 (~1500px) 반응형: PC 그대로 80%로 축소 */
@media (max-width: 1500px) {
    .stage-tab-col {
        width: 32.5rem; /* 12.5rem(페이지 여백) + 18rem(컬럼 콘텐츠) + 2rem(우측 여백) */
        padding: 6rem 2rem 4rem 12.5rem;
    }
    .stage-panel-wrap {
        padding: 6rem 12.5rem 4rem 4rem;
        gap: 8rem; /* 패널 간 간격은 이 flex gap이 담당 - PC 10rem의 80% */
    }
    .stage-tab-col .section-header {
        margin-bottom: 2.4rem;
    }
    .stage-tab-btn {
        --stage-num-size: 2rem;
        --stage-line-gap: 0.6rem; /* 0.75rem의 80% */
        gap: 1rem;
        padding-bottom: 2rem;
    }
    .stage-tab-num {
        width: 2rem;
        height: 2rem;
        font-size: var(--fs-16);
    }
    .stage-tab-label {
        padding-top: 0.4rem;
    }
    .stage-tab-label strong {
        font-size: var(--fs-17);
    }
    .stage-tab-label small {
        font-size: var(--fs-13);
    }
    .stage-badge {
        font-size: var(--fs-20);
        margin-bottom: 2rem;
    }
    .stage-badge span {
        width: 2rem;
        height: 2rem;
        font-size: var(--fs-17);
    }
    .stage-badge em {
        font-size: var(--fs-17);
    }
    .stage-title {
        font-size: var(--fs-32);
    }
    .stage-service {
        font-size: var(--fs-19);
    }
    .stage-panel .sub-s-desc {
        margin-bottom: 3rem;
    }
    .stage-card-list,
    .stage-info-list {
        gap: 1rem;
    }
    .stage-card h4 {
        font-size: var(--fs-16);
        padding: 0.7rem 0.8rem;
    }
    .stage-card ul {
        padding: 1rem;
    }
    .stage-card li {
        font-size: var(--fs-13);
    }
    .stage-diagram {
        margin-bottom: 3rem;
    }
    .stage-info h4 {
        font-size: var(--fs-20);
    }
}

/* Service Stage - 모바일 (~1024px) 반응형
   탭 스위처 대신 패널 3개를 전부 세로로 나열 (js/sub/stage_filter.js도 모바일 분기 없음) */
@media (max-width: 1024px) {
    .stage-body {
        flex-flow: column;
    }
    .stage-tab-col {
        position: static;
        width: 100%;
        padding: 3rem 1rem 1.5rem;
        background: none; /* 세로 1단 배치라 좌측 컬럼 배경은 제외 */
    }
    .stage-tab-col .section-header {
        margin-bottom: 1.5rem;
    }
    /* 탭 인디케이터는 모바일에서 숨김 - section-header 다음 바로 panel-wrap이 이어짐 */
    .stage-tab-list {
        display: none;
    }
    .stage-panel-wrap {
        padding: 0 1rem 3rem;
        gap: 4rem;
    }
    .stage-badge {
        font-size: var(--fs-16);
        margin-bottom: 1.5rem;
    }
    .stage-badge span {
        width: 1.75rem;
        height: 1.75rem;
        font-size: var(--fs-14);
        margin-right: 0.25rem;
    }
    .stage-badge em {
        font-size: var(--fs-14);
    }
    .stage-title {
        font-size: var(--fs-24);
    }
    .stage-service {
        font-size: var(--fs-17);
    }
    .stage-panel .sub-s-desc {
        margin-bottom: 2.5rem;
    }
    .stage-card-list {
        flex-flow: column;
        margin-bottom: 2rem;
    }
    .stage-card h4 {
        font-size: var(--fs-16);
        padding: 0.75rem 0.875rem;
    }
    .stage-card ul {
        padding: 1rem;
    }
    .stage-card li {
        font-size: var(--fs-13);
    }
    .stage-diagram {
        margin-bottom: 2.5rem;
    }
    .stage-info-list {
        flex-flow: column;
        gap: 2rem;
    }
    .stage-info h4 {
        font-size: var(--fs-18);
    }
    .stage-info p {
        font-size: var(--fs-14);
    }
}


/* ================================================
        Product Overview (PC) / 제품소개
================================================ */
.option-system {
    padding: 7.5rem 18.75rem;
}
.option-system .section-header {
    flex-flow: column;
    align-items: flex-start;
}
/* s-pmis */
.detail_s-pmis .option-system .card-list>.acc-card:nth-child(2) .acc-icon-right {
    transform: rotate(90deg);
}

/* 제품 소개(ez-PERT) - 2단 스크린샷 구성(.img-wrap-top/.img-wrap-bottom) */
.option-system .img-wrap-top {
    margin: 3.75rem 0;
    padding: 0 6.25rem;
}
.option-system .img-wrap-bottom {
    margin-top: 6.25rem;
}
.option-system .img-wrap-top .img-wrap-note {
    text-align: right;
    margin-bottom: 1rem;
}
.option-system .img-wrap-bottom .img-wrap-note {
    text-align: left;
    margin-top: 1rem;
}
.option-system .img-list {
    display: flex;
    flex-flow: row;
    gap: 2.5rem;
    position: relative;
}
.detail_ez-4d .option-system .img-wrap>.img-list,
.detail_ez-smart .option-system .img-wrap>.img-list {
    margin-top: 2.5rem;
}
.detail_ez-4d .option-system .img-wrap>.img-list:first-of-type,
.detail_ez-smart .option-system .img-wrap>.img-list:first-of-type {
    margin-top: 0;
}
/* ez-PERT - Network View/Bar View 전환(Switching) 표시 뱃지.
   switch-badge-ref는 img-col-thumb과 동일한 폭 계산식(50% - gap의 절반) + 동일 aspect-ratio를 가진
   투명 기준 박스라, 뷰포트가 달라져도 항상 썸네일과 같은 높이를 가져 뱃지가 세로 중앙에 오도록 함 */
.detail_ez-pert .option-system .img-wrap-top .switch-badge-ref {
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(50% - 1.25rem);
    aspect-ratio: 720 / 415;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: var(--z-contents);
}
.detail_ez-pert .option-system .img-wrap-top .switch-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
}
.detail_ez-pert .option-system .img-wrap-top .switch-badge-icon {
    font-size: var(--fs-24);
    color: #fff;
}
.detail_ez-pert .option-system .img-wrap-top .switch-badge-text {
    font-size: var(--fs-10);
    font-weight: var(--fw-semiBold);
    letter-spacing: var(--ls-wide);
    color: #fff;
}

.detail_ez-4d .option-system .acc-card:last-child .acc-header {
    padding: 2.5rem 2.5rem 2.5rem 3.75rem;
}

/* Switching 뱃지 - 노트북 (~1500px) 반응형 */
@media (max-width: 1500px) {
    .detail_ez-pert .option-system .img-wrap-top .switch-badge {
        width: 5rem; /* 6.25rem의 80% */
        height: 5rem;
    }
    .detail_ez-pert .option-system .img-wrap-top .switch-badge-icon {
        font-size: 1.4rem; /* fs-28(1.75rem)의 80% */
    }
    .detail_ez-pert .option-system .img-wrap-top .switch-badge-text {
        font-size: 0.6rem; /* fs-12(0.75rem)의 80% */
    }
}

/* Switching 뱃지 - 모바일 (~1024px) 반응형: img-list가 세로로 쌓이는 경우
   가로 중앙 배치가 의미 없어져 뱃지를 숨김 (모바일 img-wrap 반응형은 아래쪽 참고) */
@media (max-width: 1024px) {
    .detail_ez-pert .option-system .img-wrap-top .switch-badge-ref {
        display: none;
    }
}
.option-system .img-wrap-bottom .img-list {
    margin-top: 2.5rem;
}
.option-system .img-col {
    display: flex;
    flex-flow: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 0;
}
.option-system .img-col-thumb {
    width: 100%;
    aspect-ratio: 720 / 415;
    border-radius: 0.625rem;
    overflow: hidden;
    border: 0.063rem solid var(--color-border);
}
/* ez-smart */
.detail_ez-smart .option-system .img-wrap-bottom .img-col-thumb {
    aspect-ratio: 330 / 697;
}
.option-system .img-col-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.option-system .img-col-title {
    font-size: var(--fs-18);
    font-weight: var(--fw-semiBold);
    margin-top: 1.5rem;
}
.option-system .img-col-title span {
    font-size: var(--fs-14);
    font-weight: var(--fw-regular);
    color: rgba(var(--color-text-secondary-rgb), 0.6);
}
.option-system .img-col-desc {
    margin-top: 0.5rem;
    font-size: var(--fs-14);
    color: var(--color-text-secondary);
}

/* Product Overview - 노트북 (~1500px) 반응형
   다른 섹션과 동일하게 좌우 여백을 축소해 콘텐츠 전체가 일관된 여백을 갖도록 함 */
@media (max-width: 1500px) {
    .option-system {
        padding: 5rem 12.5rem; /* 좌우 여백 12.5rem으로 확대 */
    }
    /* 이미지/카드 관련 값도 "PC 그대로 20% 작게" 원칙으로 통일 */
    .option-system .img-wrap-top {
        margin-bottom: 3rem; /* 3.75rem의 80% */
    }
    .option-system .img-wrap-bottom {
        margin-top: 5rem; /* 6.25rem의 80% */
    }
    .option-system .img-wrap-top .img-wrap-note {
        margin-bottom: 0.8rem; /* 1rem의 80% */
    }
    .option-system .img-wrap-bottom .img-wrap-note {
        margin-top: 0.8rem; /* 1rem의 80% */
    }
    .option-system .img-list {
        gap: 2rem; /* 2.5rem의 80% */
    }
    .option-system .img-wrap-bottom .img-list {
        margin-top: 2rem; /* 2.5rem의 80% */
    }
    .option-system .img-col-title {
        font-size: 0.9rem; /* fs-18(1.125rem)의 80% */
        margin-top: 1.2rem; /* 1.5rem의 80% */
    }
    .option-system .img-col-title span {
        font-size: 0.7rem; /* fs-14(0.875rem)의 80% */
    }
    .option-system .img-col-desc {
        margin-top: 0.4rem; /* 0.5rem의 80% */
        font-size: 0.7rem; /* fs-14(0.875rem)의 80% */
    }
}

/* Product Overview - 모바일 (~1024px) 반응형: section-header 이후 간격을 다른 섹션과 1.5rem으로 통일 -
   헤더 마지막 요소의 margin-bottom을 0으로 없애고 section-header의 margin-bottom을 1.5rem으로 고정 (위 .card-list margin-top 제거와 세트) */
@media (max-width: 1024px) {
    .option-system {
        padding: 3rem 1rem;
    }
    .option-system .section-header > *:last-child {
        margin-bottom: 0;
    }
    .option-system .section-header {
        margin-bottom: 1.5rem;
    }
    /* img-wrap 2단 이미지 - 모바일에서 1단으로 전환 */
    .option-system .img-wrap {
        margin-bottom: 2.5rem;
        padding: 0 1rem;
    }
    .option-system .img-list {
        flex-flow: column;
        gap: 2rem;
    }
    .detail_ez-smart .option-system .img-wrap-bottom .img-list {
        flex-flow: row;
    }
}


/* ================================================
        Expected Effects (PC) / 제품효과
================================================ */
.expected-effects {
    padding: 7.5rem 18.75rem;
    background: var(--effects-bg);
}
.expected-effects .section-header {
    flex-flow: column;
    align-items: center;
    margin-bottom: 5rem;
}
/* .expected-effects .section-body 세로 방향 flex 배치 (공통 유틸 클래스 대신 속성 직접 정의) */
.expected-effects .section-body {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    gap: 2.5rem;
}

.expected-effects .sub-s-desc {
    text-align: center;
}

/* Expected Effects - 노트북 (~1500px) 반응형
   좌우 18.75rem 여백은 노트북 폭에서 내부 feature-list 공간을 지나치게 좁히므로 여백 축소
   (feature-list/feature-wrap 자체 반응형은 위쪽 참고) */
@media (max-width: 1500px) {
    .expected-effects {
        padding: 6rem 12.5rem; /* 좌우 여백 12.5rem으로 확대 */
    }
    .expected-effects .section-header {
        margin-bottom: 4rem; /* PC 그대로 20% 작게 - 5rem의 80% */
    }
    .expected-effects .section-body {
        gap: 2rem; /* 2.5rem의 80% */
    }
}

/* Expected Effects - 모바일 (~1024px) 반응형
   section-header 이후 간격을 다른 섹션과 1.5rem으로 통일 */
@media (max-width: 1024px) {
    .expected-effects {
        padding: 3rem 1rem;
    }
    .expected-effects .section-header > *:last-child {
        margin-bottom: 0;
    }
    .expected-effects .section-header {
        margin-bottom: 1.5rem;
    }
}


/* ================================================
        Product Inquiries (PC) / 제품문의
================================================ */
.product-inquiries {
    text-align: center;
    padding-top: 5rem;
    position: relative;
    /* motion_sub.js가 .line1/.line2에 거는 등장 전 초기값(x:±40)이 뷰포트 가장자리와 가까운
       페이지(ez-PERT 등)에서 모바일 가로 스크롤을 유발 - overflow:hidden 필요. CSS 스펙상
       overflow-x만 지정해도 y가 auto로 강제되므로 x/y 함께 hidden 처리(버튼도 opacity:0이라 무영향) */
    overflow: hidden;
}
.product-inquiries .quote-block {
    display: inline-block;
    margin-bottom: 5rem;
}
/* 따옴표를 실제 텍스트로 두면 구글 번역이 오역해서 엉뚱한 단어를 채워넣어 CSS 장식으로 그린다 */
.product-inquiries .line1::before,
.product-inquiries .line2::after {
    font-size: var(--fs-112);
    color: rgba(var(--color-text-rgb), 0.1);
    font-family: var(--font-en);
    line-height: 0;
    user-select: none;
    position: relative;
    z-index: var(--z-base-line);
}
.product-inquiries .line1::before {
    content: '"';
    vertical-align: top;
    margin-right: -1.875rem;
    top: 3rem;
}
.product-inquiries .line2::after {
    content: '"';
    vertical-align: top;
    margin-left: -1.875rem;
    top: 3rem;
}
.product-inquiries .line1,
.product-inquiries .line2 {
    display: block;
    font-family: var(--font-sub);
    font-size: var(--fs-64);
    font-weight: bold;
}
.product-inquiries .line1 {
    margin-bottom: 0.5rem;
}
.product-inquiries .line2 {
    color: var(--color-primary);
}
/* .prd-inquiry-btns 가운데 정렬 flex 배치 (공통 유틸 클래스 대신 속성 직접 정의) */
.prd-inquiry-btns {
    display: flex;
    flex-flow: row;
    justify-content: center;
    gap: 2.5rem;
}
/* .inquiry-btn 좌우 배치 flex (공통 유틸 클래스 대신 속성 직접 정의) */
.inquiry-btn {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    width: 15rem;
    height: 3.5rem;
    padding: 0 0.938rem 0 1.875rem;
    border-radius: 50px;
    font-size: var(--fs-15);
    transition: opacity 0.2s, transform 0.2s;
}
.inquiry-btn:hover {
    opacity: 0.85;
    transform: translateY(-4px);
}
.contact-btn>span,
.results-btn>span {
    border-radius: 50%;
    font-size: var(--fs-24);
    padding: 0.25rem;
    flex-shrink: 0;
}
.contact-btn {
    background: var(--color-primary);
    color: var(--color-w);
    border: none;
}
.contact-btn>span {
    background: var(--color-w);
    color: rgba(var(--color-text-rgb),0.7)
}
.results-btn {
    background: var(--color-w);
    border: 0.063rem solid var(--color-border);
}
.results-btn>span {
    background: var(--color-primary);
    color: var(--color-w);
}

/* Product Inquiries - 노트북 (~1500px) 반응형
   원래 이 섹션은 1500px 전용 값이 없어 1024px 모바일 전까지 PC 크기
   그대로였음 - "PC 그대로 20% 작게" 원칙으로 통일 */
@media (max-width: 1500px) {
    .product-inquiries {
        padding-top: 4rem; /* 5rem의 80% */
    }
    .product-inquiries .quote-block {
        margin-bottom: 4rem; /* 5rem의 80% */
    }
    .product-inquiries .line1::before,
    .product-inquiries .line2::after {
        font-size: 5.6rem; /* fs-112(7rem)의 80% */
    }
    .product-inquiries .line1::before {
        margin-right: -1.5rem; /* -1.875rem의 80% */
        top: 2.4rem; /* 3rem의 80% */
    }
    .product-inquiries .line2::after {
        margin-left: -1.5rem; /* -1.875rem의 80% */
        top: 2.4rem; /* 3rem의 80% */
    }
    .product-inquiries .line1,
    .product-inquiries .line2 {
        font-size: 3.2rem; /* fs-64(4rem)의 80% */
    }
    .product-inquiries .line1 {
        margin-bottom: 0.4rem; /* 0.5rem의 80% */
    }
    .prd-inquiry-btns {
        gap: 2rem; /* 2.5rem의 80% */
    }
    .inquiry-btn {
        width: 12rem; /* 15rem의 80% */
        height: 2.8rem; /* 3.5rem의 80% */
        padding: 0 0.75rem 0 1.5rem; /* 0 0.938rem 0 1.875rem의 80% */
        font-size: 0.75rem; /* fs-15(0.938rem)의 80% */
    }
    .contact-btn>span,
    .results-btn>span {
        font-size: 1.2rem; /* fs-24(1.5rem)의 80% */
        padding: 0.2rem; /* 0.25rem의 80% */
    }
}

/* Product Inquiries - 모바일 (~1024px) 반응형 */
@media (max-width: 1024px) {
    .product-inquiries {
        padding: 3rem 1rem;
    }
    .product-inquiries .quote-block {
        margin-bottom: 2.5rem;
    }
    .product-inquiries .line1::before,
    .product-inquiries .line2::after {
        font-size: var(--fs-64);
    }
    .product-inquiries .line1::before {
        margin-right: -1rem;
        top: 1.5rem;
    }
    .product-inquiries .line2::after {
        margin-left: -1rem;
        top: 1.5rem;
    }
    .product-inquiries .line1,
    .product-inquiries .line2 {
        font-size: var(--fs-28);
    }
    .prd-inquiry-btns {
        gap: 1rem;
        padding: 0 1rem;
    }
    .inquiry-btn {
        width: 100%;
        height: 3rem;
        padding: 0 0.5rem 0 1.2rem;
    }
}


/* Project List (PC) / 실적(프로젝트) 목록: PROJECT 페이지 - 시스템사업부/컨설팅사업부 탭별 실적 카드 목록 */
/* flex-flow/gap/padding, 툴바, 필터 select, 검색창, 카드 그리드 등은
   News List(.news-list 이하)와 완전히 동일해서 공유 셀렉터로 통합 - display만 페이지별로
   다름 (PROJECT는 부서 탭 전환용 hidden/active, NEWS는 항상 노출) */
.project-list,
.news-list {
    flex-flow: column;
    gap: 1.5rem;
    padding: 0 18.75rem;
}
.project-list {
    display: none;
}
.project-list.active {
    display: flex;
}

/* 툴바: 좌측 Total 카운트 + 우측 필터(시스템/연도 select + 검색) */
.project-toolbar,
.news-toolbar {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
}
.project-total,
.news-total {
    font-size: var(--fs-14);
    color: var(--color-text-secondary);
}
.project-total span,
.news-total span {
    color: var(--color-accent);
}
.project-filter {
    display: flex;
    flex-flow: row;
    align-items: center;
    gap: 0.75rem;
}

/* 필터용 custom-select - 브레드크럼용(.sub-hero .breadcrumb-wrap .custom-select)과 별개로 테두리 있는 알약형 드롭다운으로 새로 정의
   (마크업/열림·닫힘 동작은 js/renewal_header.js 공용). PROJECT는 .project-filter가 여러 .custom-select를 감싸고,
   NEWS/PROMO는 .news-filter 자신이 .custom-select라 셀렉터는 다르지만 스타일은 동일해서 통합 */
.project-filter .custom-select,
.news-filter {
    position: relative;
}
.project-filter .select-trigger,
.news-filter .select-trigger {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    height: 2.5rem;
    padding: 0 0.75rem 0 1rem;
    border: 0.063rem solid var(--color-border);
    border-radius: 50rem;
    background: var(--color-w);
    font-size: var(--fs-14);
    color: var(--color-text);
    white-space: nowrap;
    min-width: 10rem;
}
.project-filter .select-arrow,
.news-filter .select-arrow {
    display: flex;
    flex-flow: row;
    align-items: center;
    transition: transform 0.2s;
}
/* 드롭다운 화살표 아이콘 - Material Symbols Rounded 아이콘 폰트 사용
   (mask 처리가 필요한 단색 svg와 달리 색상을 폰트 color 속성으로 바로 제어) */
.project-filter .select-arrow .material-symbols-rounded,
.news-filter .select-arrow .material-symbols-rounded {
    font-size: var(--fs-24);
    color: var(--icon-color);
}
.project-filter .custom-select.open .select-arrow,
.news-filter.open .select-arrow {
    transform: rotate(180deg);
}
.project-filter .select-options,
.news-filter .select-options {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 100%;
    max-height: 16rem;
    overflow-y: auto;
    background: var(--color-w);
    border: 0.063rem solid var(--color-border);
    border-radius: 0.75rem;
    box-shadow: var(--box-shadow);
    z-index: var(--z-dropdown);
}
.project-filter .custom-select.open .select-options,
.news-filter.open .select-options {
    display: block;
}
.project-filter .select-options li,
.news-filter .select-options li {
    padding: 0.625rem 1.25rem;
    font-size: var(--fs-14);
    color: var(--color-text);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.project-filter .select-options li:hover,
.news-filter .select-options li:hover {
    background: var(--gray-bg-200);
}
.project-filter .select-options li.selected,
.news-filter .select-options li.selected {
    color: var(--color-primary);
    font-weight: var(--fw-medium);
}

.proj-search,
.news-search {
    display: flex;
    flex-flow: row;
    align-items: center;
    gap: 0.5rem;
    height: 2.5rem;
    padding: 0 0.75rem 0 1rem;
    border: 0.063rem solid var(--color-border);
    border-radius: 50rem;
    background: var(--color-w);
    width: 17.5rem;
}
.proj-search input,
.news-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: var(--fs-14);
    font-family: var(--font-main);
    color: var(--color-text);
}
.proj-search input::placeholder,
.news-search input::placeholder {
    color: rgba(var(--color-text-secondary-rgb), 0.6);
}
.proj-search button,
.news-search button {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    border: 0;
    color: var(--icon-color);
}
.proj-search button .search-icon,
.news-search button .search-icon {
    width: var(--fs-24);
    height: var(--fs-24);
}

/* 카드 목록 - 3열 그리드 (PROJECT/NEWS 공통, PROMO는 4열이라 별도) */
.project-card-list,
.news-card-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    gap: 1.875rem;
}
.proj-card,
.news-card {
    display: flex;
    flex-flow: column;
    background: var(--color-w);
    border: 0.063rem solid var(--color-border);
    border-radius: 1rem;
    overflow: hidden;
}
/* 기본은 썸네일이 보이고, 호버 시 .proj-detail 패널이 아래에서
   위로 올라오며 썸네일을 덮고 상세 정보(구성기능/지원내용 등)를 보여줌.
   NEWS 카드(.news-card)는 이 호버 패널이 없어 position:relative가 필요 없음 */
.proj-card {
    position: relative;
}
.proj-card .proj-detail {
    position: absolute;
    inset: 0;
    display: flex;
    flex-flow: column;
    background: var(--color-w);
    padding: 2rem;
    overflow-y: auto;
    /* translateY(100%)는 카드 전체 높이만큼 이동해 느려 보여서, proj-body 높이만큼만(50%)
       겹쳐 시작하도록 축소 (opacity:0이라 대기 상태에서는 안 보임) */
    transform: translateY(50%);
    opacity: 0;
    /* 공통 스크롤 리빌 이징(layout_re.css .section-header 등과 동일 커브) 사용. opacity와
       transform을 비슷한 길이로 겹치면 반투명한 패널과 아래 proj-body 텍스트가 겹쳐 보이므로,
       opacity만 짧게(0.15s) 줘서 먼저 불투명해진 뒤 슬라이드만 하도록 분리 */
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.15s ease;
    z-index: var(--z-contents);
}
@media (hover: hover) and (pointer: fine) {
    .proj-card:hover .proj-detail {
        transform: translateY(0);
        opacity: 1;
    }
}
.proj-thumb,
.news-thumb {
    width: 100%;
    aspect-ratio: 1920 / 1080;
    overflow: hidden;
    background: var(--gray-bg-200);
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    border-bottom: 0.063rem solid var(--color-border);
}
.proj-thumb img,
.news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top; /* 가운데 크롭 대신 상단 기준으로 크롭 */
    display: block;
}
.proj-body,
.news-body {
    display: flex;
    flex-flow: column;
}
.proj-body {
    padding: 2rem;
}
.news-body {
    padding: 1.5rem;
}
.proj-badge,
.news-badge {
    display: inline-flex;
    align-items: center;
    border: 0.063rem solid var(--color-accent);
    color: var(--color-accent);
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    padding: 0.25rem 0.625rem 0.188rem 0.625rem;
    border-radius: 50rem;
    height: 1.5rem;
    box-sizing: border-box;
    /* news-meta가 배지+날짜를 가로 flex row로 배치하는데, 이 두 속성이
       없으면 카드 폭이 좁은 기기(iPhone SE 375px 등)에서 배지가 flex-shrink로
       눌리면서 "국토일보" 같은 라벨이 두 줄로 줄바꿈되어 pill이 세로로 찌그러져 보임 */
    white-space: nowrap;
    flex-shrink: 0;
}

.news-badge.press-orange {
    border: 0.063rem solid var(--accent-tangerine);
    color: var(--accent-tangerine);
}
.news-badge.press-blue {
    border: 0.063rem solid var(--accent-azure);
    color: var(--accent-azure);
}
/* proj-badge는 proj-body의 flex-column 안에서 제목/메타와 세로로 쌓이는 첫 요소라
   자기 정렬/여백이 필요하고, news-badge는 .news-meta(가로 행) 안에서 날짜와 나란히
   붙기만 하면 돼서 이 두 속성은 필요 없음 */
.proj-badge {
    align-self: flex-start;
    margin-bottom: 0.75rem;
}
.proj-title,
.news-title {
    font-size: var(--fs-20);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}
/* proj-title 뒤에는 proj-meta가 이어지고, news-title은 news-body의 마지막 요소라
   trailing margin이 필요 없음 */
.proj-title {
    margin-bottom: 1.5rem;
}
/* 카드 상세보기(.proj-detail)의 제목은 기본 2줄 말줄임을 풀어 전체를 보여준다(기본 카드는 2줄 유지).
   min-height는 0이 아니라 auto여야 함 - 0으로 두면 고정 높이 flex 부모 안에서 내용이 넘칠 때
   flexbox가 이 박스를 0 높이로 찌그러뜨려, overflow:visible 텍스트가 아래 요소와 겹친다. */
.proj-detail .proj-title {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
    min-height: auto;
}
.proj-meta {
    display: flex;
    flex-flow: column;
    gap: 0.5rem;
}
.proj-meta > div {
    display: flex;
    flex-flow: row;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: var(--fs-16);
}
/* dt 앞에 회색 점, dt/dd 사이(gap)에 세로 구분선 표시 */
.proj-meta dt {
    flex-shrink: 0;
    width: 4.4rem;
    display: flex;
    align-items: flex-start; /* 텍스트가 여러 줄이어도 ::before/::after 위치가 첫 줄 기준으로 고정되도록 */
    gap: 0.5rem;
    position: relative;
}
.proj-meta dt::before {
    content: '';
    flex-shrink: 0;
    width: 0.25rem;
    height: 0.25rem;
    margin-top: 0.625rem; /* 1줄 높이(1.5rem)-점 높이(0.25rem)의 절반 - 첫 줄 가운데 위치 고정 */
    border-radius: 50%;
    background: rgba(var(--icon-color-grb), 0.5);
}
.proj-meta dt::after {
    content: '';
    position: absolute;
    top: 0.75rem; /* 1줄 높이(1.5rem)의 절반 고정 - 여러 줄이 돼도 첫 줄 위치 유지 */
    right: -0.3rem;
    transform: translateY(-50%);
    width: 0.063rem;
    height: 1rem;
    background: var(--color-border);
}
.proj-meta dd {
    color: var(--color-text);
}
.proj-meta-extra {
    margin-top: 0.5rem;
}
.proj-meta-extra dd {
    line-height: var(--lh-normal);
    /* TCIC 원본 데이터의 줄바꿈을 살리되(기본값 normal은 무시함) 긴 줄은 폭에 맞춰 자동 줄바꿈. */
    white-space: pre-line;
}

@media (max-width: 1024px) {
    .proj-card,
    .news-card,
    .proj-thumb,
    .news-thumb {
        border-radius: 0.5rem;
    }
}

/* 페이지네이션은 여러 목록 페이지에서 공통으로 쓰는 컴포넌트라 layout_re.css에서 정의함 */

/* News List (PC) / 사내소식·보도자료·홍보자료 목록: PROJECT 목록과 레이아웃 대부분 동일해 공유 셀렉터는 Project List에서 정의.
   여기선 NEWS 전용 배지+날짜 가로 배치(.news-meta/.news-date)만 정의 - 호버 상세 패널 없음, 부서 탭 없이 검색만 제공 */
.news-list {
    display: flex;
}
.news-meta {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin-bottom: 0.75rem;
}
.news-date {
    margin-left: 0.625rem;
    font-size: var(--fs-14);
    color: var(--color-text-secondary);
}
.detail_news .news-date {
    margin-left: 0;
}

/* News List - 모바일 (~1024px) 반응형 (공통 반응형은 Project List 섹션에서 함께 처리) */
@media (max-width: 1024px) {
    .news-date {
        font-size: var(--fs-11);
    }
}


/* News Detail (PC) / 사내소식·보도자료·홍보자료 상세: 제목+날짜+구분선까지만 마크업, 구분선 아래 본문(.news-view-body)은
   CMS 에디터로 채워지는 영역이라 레이아웃 자리만 확보 - 본문 아래 구분선+이전/다음 내비게이션+목록 버튼 이어짐 */
.news-view {
    display: flex;
    flex-flow: column;
    padding: 0 18.75rem;
}
.news-view-head {
    padding-bottom: 5rem;
    border-bottom: 0.063rem solid var(--color-border);
}
.news-view-title {
    font-size: var(--fs-40);
    font-weight: var(--fw-semiBold);
    line-height: var(--lh-normal);
    word-break: keep-all;
}
.news-view-date {
    margin-top: 2.5rem;
    font-size: var(--fs-15);
    color: var(--color-text-secondary);
}
/* 에디터(CMS) 본문이 채워지는 영역 - 지금은 빈 상태라 위아래 구분선 사이 최소 높이만 확보 */
.news-view-body {
    min-height: 25rem;
    padding: 5rem 1.25rem;
}
/* body의 font-weight가 light라 <strong>/<b>의 기본값(bolder)이 400 정도로만 계산되어
   TCIC 에디터 본문의 굵은 글씨가 안 굵어 보인다 - CMS 원문 의도대로 확실히 굵게 고정 */
.news-view-body strong,
.news-view-body b {
    font-weight: var(--fw-bold, 700);
}
/* reset.css가 전역적으로 img{display:block}을 강제하지만, TCIC 에디터는 <p style="text-align:center"><img></p>로
   이미지를 가운데 정렬해 block 자식엔 text-align이 안 먹는다 - 이 안에서만 inline-block으로 되돌려 정렬이 먹게 함 */
.news-view-body img {
    display: inline-block;
    height: auto;
    max-width: 100%;
}
.news-view-foot {
    border-top: 0.063rem solid var(--color-border);
}
.news-view-nav {
    display: flex;
    flex-flow: column;
}
.news-view-nav li {
    display: flex;
    flex-flow: row;
    align-items: center;
    gap: 5rem;
    padding: 2.5rem 1.25rem;
    border-bottom: 0.063rem solid var(--color-border);
}
.news-view-nav .nav-label {
    display: flex;
    flex-flow: row;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    width: 5rem;
    font-size: var(--fs-17);
    font-weight: var(--fw-regular);
    color: var(--color-text);
}
.news-view-nav .nav-label .material-symbols-rounded {
    font-size: var(--fs-24);
}
/* 이전/다음 글이 없을 때만 라벨까지 연하게 - 글이 있으면 다음글과 동일하게 진하게 표시 */
.news-view-nav li:has(.nav-empty) .nav-label {
    color: var(--color-text-secondary);
}
.news-view-nav a {
    flex: 1;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}
.news-view-nav .nav-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-17);
    color: var(--color-text);
    font-weight: var(--fw-regular);
}
.news-view-nav .nav-empty {
    flex: 1;
    font-size: var(--fs-17);
    color: var(--color-text-secondary);
}
.news-view-nav .nav-date {
    flex-shrink: 0;
    font-size: var(--fs-15);
    font-weight: var(--fw-regular);
}
.news-view-list-btn {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.375rem;
    width: 10rem;
    height: 3rem;
    margin: 3.75rem auto 0;
    border: 0.063rem solid #404040;
    border-radius: 50rem;
    font-size: var(--fs-16);
    color: #404040;
    padding: 0 1.5rem;
}
.news-view-list-btn .material-symbols-rounded {
    font-size: var(--fs-20);
    color: #404040;
}

.news-view-body img {
    border: 1px solid #e0e0e0;
}


/* news_04 상세페이지만 좌우 여백을 25rem으로 확대 - 노트북/모바일 반응형의 .news-view 값은
   그대로 유지되도록 PC 구간(min-width 1501px)에서만 적용 */
@media (min-width: 1501px) {
    .detail_news-view .news-view {
        padding: 0 25rem;
    }
}

/* News Detail - 노트북 (~1500px) 반응형 */
@media (max-width: 1500px) {
    .news-view {
        padding: 0 10rem;
    }
    .detail_news-view .news-view {
        padding: 0 17.5rem;
    }
    .news-view-head {
        padding-bottom: 4rem;
    }
    .news-view-title {
        font-size: var(--fs-32);
    }
    .news-view-date {
        margin-top: 2rem;
        font-size: var(--fs-14);
    }
    .news-view-body {
        padding: 4rem 1rem;
    }
    .news-view-nav li {
        gap: 4rem;
        padding: 2rem 1rem;
    }
    .news-view-list-btn {
        gap: 0.3rem;
        width: 8rem;
        height: 2.4rem;
        margin: 3rem auto 0;
        padding: 0 1.2rem;
        font-size: var(--fs-15);
    }
    .news-view-nav .nav-label {
        gap: 0.4rem;
        width: 4rem;
        font-size: var(--fs-16);
    }
    .news-view-nav .nav-empty,
    .news-view-nav .nav-title {
        font-size: var(--fs-16);
    }
    .news-view-nav .nav-date {
        font-size: var(--fs-14);
    }
}

/* News Detail - 모바일 (~1024px) 반응형 */
@media (max-width: 1024px) {
    .detail_news-view .news-view,
    .news-view {
        padding: 0 1rem;
    }
    .news-view-head {
        padding-bottom: 1.5rem;
    }
    .news-view-title {
        font-size: var(--fs-22);
    }
    .news-view-date {
        margin-top: 0.75rem;
        font-size: var(--fs-12);
    }
    .news-view-body {
        min-height: 15rem;
    }
    /* 에디터로 작성된 본문 강제로 폰트 사이즈 키움 - bold 된 폰트만 */
    .news-view-body strong, .news-view-body strong span, .news-view-body strong font,
    .news-view-body b, .news-view-body b span, .news-view-body b font {
        font-size: clamp(0.938rem, 4.6vw, 1.25rem) !important;
    }
    /* CKEditor 본문의 데스크톱용 인라인 px 크기가 모바일 레이아웃을 깨서, !important로 안전한 범위로 누른다(img는 위 공통 규칙에서 이미 방어됨). */
    .news-view-body :not(table):not(tr):not(td):not(th):not(colgroup):not(col) {
        /* max-width만으로는 이미 그보다 좁은 고정 width(예: 데스크톱에서 옆에 뭔가
           나란히 배치하려던 값)를 못 넓힌다 - 그 결과 글자가 좁은 폭 안에서 한 글자씩
           줄바꿈되어 세로로 쌓이는 심각한 레이아웃 깨짐이 생겨서 width도 같이 되돌린다. */
        width: auto !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .news-view-body table {
        width: auto !important;
        max-width: none !important;
    }
    .news-view-body {
        overflow-wrap: break-word;
        word-break: break-word;
    }
    .news-view-body p,
    .news-view-body div,
    .news-view-body span,
    .news-view-body li,
    .news-view-body td,
    .news-view-body th {
        font-size: clamp(0.875rem, 4vw, 1.125rem) !important;
    }
    .news-view-body h1,
    .news-view-body h2 {
        font-size: clamp(1.25rem, 6vw, 1.75rem) !important;
    }
    .news-view-body h3,
    .news-view-body h4,
    .news-view-body h5,
    .news-view-body h6 {
        font-size: clamp(1.125rem, 5vw, 1.5rem) !important;
    }
    /* 표는 폭을 줄이면 셀 내용이 심하게 찌그러지므로, 크기는 원래대로 두고
       필요하면 표 자체만 가로 스크롤되게 한다 */
    .news-view-body table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .news-view-nav .nav-label .material-symbols-rounded {
        font-size: var(--fs-16);
    }
    .news-view-nav li {
        padding: 1rem 0.5rem;
        gap: 1rem;
    }
    .news-view-nav .nav-label {
        width: 3rem;
        font-size: var(--fs-14);
        gap: 0.25rem;
    }
    .news-view-nav .nav-title {
        font-size: var(--fs-14);
    }
    .news-view-nav .nav-empty {
        font-size: var(--fs-14);
    }
    .news-view-nav .nav-date {
        font-size: var(--fs-12);
    }
    .news-view-list-btn {
        width: 8.75rem;
        height: 2.75rem;
        margin-top: 1.5rem;
        font-size: var(--fs-14);
    }
}


/* Promo List (PC) / 홍보자료 목록: 사내소식/보도자료와 같은 news-list/news-toolbar 레이아웃 재사용하되
   카드는 포스터 이미지+연도 태그만 있는 4열 그리드, 검색 없이 연도 select 하나만 제공 */
/* 카드 목록 - 4열 그리드 (포스터형 이미지 + 연도 태그) */
.promo-card-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
    gap: 1.5rem;
}
.promo-card {
    position: relative;
    border-radius: 1rem;
    border: 0.063rem solid var(--color-border);
    background: var(--color-w);
    overflow: hidden;
    cursor: pointer;
}
.promo-card img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: top;
    display: block;
}
.promo-year {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: rgba(var(--color-text-rgb), 0.75);
    color: var(--color-w);
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    padding: 0.25rem 0.75rem;
    border-radius: 50rem;
}

/* Promo List - 노트북 (~1500px) 반응형 */
@media (max-width: 1500px) {
    .promo-card-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Promo List - 모바일 (~1024px) 반응형 */
@media (max-width: 1024px) {
    .promo-card-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .promo-year {
        font-size: var(--fs-12);
        padding: 0.188rem 0.625rem;
    }
}


/* Project/News List - 노트북 (~1500px) 반응형 (공통) */
@media (max-width: 1500px) {
    .project-list,
    .news-list {
        padding: 4rem 10rem 5rem;
    }
    .proj-search,
    .news-search {
        width: 12rem;
    }
}

/* Project/News List - 모바일 (~1024px) 반응형: 컨테이너/카드 그리드/카드 내부는 PROJECT·NEWS 공통으로 묶고,
   툴바 세로 스택·필터 wrap 등 PROJECT 전용(부서/연도 select 2개+검색) 동작만 .project-*로 남김 - NEWS는 select 1개 이하라 한 줄 유지 */
@media (max-width: 1024px) {
    .project-list,
    .news-list {
        padding: 3rem 1rem;
        gap: 1.5rem;
    }
    .project-list .section-header > *:last-child {
        margin-bottom: 0;
    }
    .project-toolbar {
        flex-flow: column;
        align-items: stretch;
        gap: 1rem;
    }
    .project-total {
        text-align: left;
    }
    .project-filter {
        flex-wrap: wrap;
    }
    /* select 2개(전체 시스템/전체 연도)가 첫 줄을 채우고 검색창(proj-search)이 둘째 줄 전체를 차지하도록,
       proj-select를 flex:1로 늘리고 select-trigger도 폭 100%로 채움 */
    .project-filter .proj-select {
        flex: 1;
        /* flex:1(flex-basis:0)이어도 min-width는 기본값 auto라 select 2개의
           내용(라벨+화살표) 최소폭 합이 한 줄 폭보다 크면 강제로 줄바꿈됨 -
           min-width:0으로 내용 기준 최소폭 제한을 풀어 항상 한 줄에 유지 */
        min-width: 0;
    }
    .project-filter .select-trigger {
        width: 100%;
        height: 2.5rem;
        padding: 0 1rem;
    }
    /* select-trigger가 min-width:0으로 좁아질 수 있어, 라벨이 넘칠 때
       화살표를 밀어내지 않고 말줄임(ellipsis)되도록 안전장치 추가 */
    .project-filter .select-value {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .proj-search {
        width: 100%;
        flex: 1 1 100%;
    }
    .project-card-list,
    .news-card-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .proj-body,
    .news-body {
        padding: 1rem;
    }
    .proj-badge,
    .news-badge {
        font-size: var(--fs-11);
        padding: 0.125rem 0.5rem 0;
        height: auto;
    }
    .proj-title,
    .news-title {
        font-size: var(--fs-14);
    }
    .proj-title {
        margin-bottom: 0.75rem;
    }
    .news-title {
        min-height: 2.4em;
    }
    /* 모바일도 PC와 동일하게 dt/dd 가로 배치 유지, 폰트 크기만 축소하고
       dt 앞 점(::before)은 숨김 */
    .proj-meta > div {
        font-size: var(--fs-12);
    }
    .proj-meta > div:first-child dd {
        display: -webkit-box;
        line-clamp: 1;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .proj-meta dt {
        width: 2.8rem;
    }
    .proj-meta dt::before {
        display: none;
    }
    .proj-meta dt::after {
        top: 0.5625rem; /* 모바일 폰트(fs-12) 기준 1줄 높이(1.125rem)의 절반으로 재고정 */
        right: -0.3rem;
    }
}


/* Location (PC) / 오시는 길: 지도 그래픽(.location-map)은 디자인팀 이미지 삽입 전 비율만 잡아둔 자리 (PC/모바일 이미지 경로 별도 삽입).
   .location-transit는 화면 전체로 퍼지는 풀블리드 섹션이라 .location-section의 형제로 #contents-wrap에 바로 둠 */
.location-section {
    display: flex;
    flex-flow: column;
    gap: 2.5rem;
    padding: 0 18.75rem;
}
/* product-structure::after와 동일한 방식 - .location-section 뒤에 지도 하단 1/4에 민트색(--color-primary) 배경을
   화면 전체 너비로 깔아 지도와 겹쳐 보이게 함 (::after는 z-index로 지도보다 뒤라 좌우 바깥/하단 일부만 비침) */
.location-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 50%;
    background: var(--gradient-bg-top);
    z-index: var(--z-base-line);
}

.location-map-wrap {
    position: relative;
}
.location-map {
    width: 100%;
    aspect-ratio: 4200 / 1920; /* 실제 PC 지도 이미지(location_map_pc.png) 원본 비율 */
    border-radius: 1rem;
    overflow: hidden;
    background: var(--gray-bg-200);
    border: 0.063rem solid var(--color-border);
}
.location-map img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.location-info {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 1.75rem 2.5rem;
    border: 0.063rem solid rgba(var(--color-w-rgb), 0.3);
    border-radius: 1rem;
}
.location-info-text {
    display: flex;
    flex-flow: row;
    align-items: center;
    gap: 1.25rem;
    flex: 1;
    min-width: 0;
}
.location-label {
    flex-shrink: 0;
    font-size: var(--fs-28);
    font-weight: var(--fw-medium);
    color: var(--color-w);
    font-family: var(--font-en);
}
.location-divider {
    flex-shrink: 0;
    display: block;
    width: 0.063rem;
    height: 1.5rem;
    background: rgba(var(--color-w-rgb), 0.3);
}
.location-address {
    font-size: var(--fs-22);
    color: var(--color-w);
    font-weight: var(--fw-semiBold);
    word-break: keep-all;
}
.location-map-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    height: 3.5rem;
    width: 12.5rem;
    padding:  0 1.5rem 0 1.75rem;
    border-radius: 50rem;
    background: var(--color-w);
    color: var(--gnb-item-color);
    font-size: var(--fs-16);
    font-weight: var(--fw-medium);
    white-space: nowrap;
}
.location-map-btn .material-symbols-rounded {
    font-size: var(--fs-24);
    color: var(--gnb-item-color);
    font-variation-settings:
    'FILL' 1,
    'wght' 300,
    'GRAD' 0,
    'opsz' 24;
}

/* 지하철/버스 안내 - 풀블리드 배경 */
.location-transit {
    width: 100%;
    color: var(--color-w);
}
.location-transit-inner {
    padding: 0 18.75rem;
    display: flex;
    flex-flow: column;
    gap: 2rem;
}
.transit-row {
    display: flex;
    flex-flow: row;
}
.transit-head {
    flex-shrink: 0;
    width: 15rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    gap: 0.5rem;
}
.transit-head .material-symbols-rounded {
    font-size: var(--fs-32);
    color: var(--color-w);
}
.transit-head h3 {
    font-size: var(--fs-20);
    font-weight: var(--fw-semiBold);
}
.transit-body {
    flex: 1;
    display: flex;
    flex-flow: column;
    gap: 1rem;
}
.transit-desc {
    font-size: var(--fs-18);
    font-weight: var(--fw-medium);
    color: var(--color-w);
    line-height: var(--lh-normal);
    word-break: keep-all;
}
.transit-detail-list {
    display: flex;
    flex-flow: column;
    gap: 0.75rem;
}
.transit-detail-list li {
    display: flex;
    flex-flow: row;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--fs-17);
}
.transit-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 1.5rem;
    padding: 0 0.55rem;
    border: 0.063rem solid var(--color-w);
    border-radius: 50rem;
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
}
.transit-badge--circle {
    width: 1.5rem;
    padding: 0;
    border-radius: 50%;
}
.transit-divider {
    display: block;
    width: 100%;
    height: 0.063rem;
    background: rgba(var(--color-w-rgb), 0.25);
}

/* Location - 노트북 (~1500px) 반응형 */
@media (max-width: 1500px) {
    .location-section {
        padding: 0 10rem;
    }
    .location-transit-inner {
        padding: 3.5rem 10rem;
    }
}

/* Location - 모바일 (~1024px) 반응형 */
@media (max-width: 1024px) {
    .location-section {
        padding: 0 1rem;
        gap: 1.5rem;
    }
    .location-section::after {
        height: 64%;
    }
    .location-map {
        aspect-ratio: 1312 / 1160; /* 실제 모바일 지도 이미지(location_map_m.png) 원본 비율 (정사각형이 아니라 좌우가 잘리는 비율) */
        border-radius: 0.75rem;
    }
    .location-info {
        flex-flow: column;
        align-items: stretch;
        gap: 1.25rem;
        padding: 1rem;
    }
    .location-info-text {
        flex-flow: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .location-label {
        font-size: var(--fs-14);
    }
    .location-divider {
        display: none;
    }
    .location-address {
        font-size: var(--fs-20);
    }
    .location-map-btn {
        align-self: flex-end;
        height: 2.5rem;
        width: 8.2rem;
        padding: 0 0.875rem 0 1rem;
        font-size: var(--fs-14);
    }
    .location-map-btn .material-symbols-rounded {
        font-size: var(--fs-16);
    }
    .location-transit-inner {
        padding: 0 1rem;
        gap: 1.5rem;
    }
    .transit-row {
        flex-flow: column;
        gap: 1rem;
    }
    .transit-head {
        width: auto;
        gap: 0.25rem;
    }
    .transit-head .material-symbols-rounded {
        font-size: var(--fs-24);
    }
    .transit-desc {
        font-size: var(--fs-14);
    }
    .transit-detail-list li {
        font-size: var(--fs-14);
    }
    .transit-row:last-child .transit-detail-list li:last-child {
        align-items: flex-start;
    }
}

/* 회사 소개 (Company Overview) (PC): About Us / Since 1992 타임라인 / PDCA / Key Business Functions.
   타임라인·PDCA·3원 다이어그램은 텍스트까지 포함된 완성 이미지를 그대로 삽입 - 여기선 이미지를 담는 레이아웃만 정의 */
.section-eyebrow {
    display: inline-block;
    font-size: var(--fs-20);
    font-weight: var(--fw-medium);
    color: var(--color-accent);
    letter-spacing: var(--ls-wide);
    margin-bottom: 1.25rem;
}

.company-about {
    position: relative;
}
.about-map-bg {
    position: absolute;
    top: 0;
    right: 16.25rem;
    width: 60rem;
    z-index: var(--z-base-line);
    pointer-events: none;
}
.about-map-bg img {
    width: 100%;
    display: block;
}
.about-head {
    position: relative;
    padding: 0 16.25rem;
    padding-top: 7.5rem;
}
.about-title {
    font-family: var(--font-en);
    font-size: var(--fs-96);
    font-weight: var(--fw-medium);
}
.about-title .title-light {
    font-weight: var(--fw-light);
}
.about-title .title-thin {
    font-weight: 100;
}
.about-title .point {
    color: var(--color-primary);
}
/* motion_sub.js ⑩ - 줄 단위 clip-path 커튼 리빌을 위해 각 줄을 block으로 분리 */
.about-title .title-line {
    display: block;
}
.about-title .br-mobile {
    display: none;
}
.about-copy {
    margin-top: 2.5rem;
}
.about-visual {
    position: relative;
    padding: 0 2.5rem;
    margin-top: 7.5rem;
}
.about-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 3680 / 1120;
    object-fit: cover;
    border-radius: 1.25rem;
}
.about-caption {
    position: relative;
    z-index: var(--z-contents);
    display: flex;
    flex-flow: row;
    align-items: flex-end;
    gap: 3.75rem;
    margin-top: -5rem;
    padding: 0 13.75rem;
}
.about-card {
    flex-shrink: 0;
    width: 18.75rem;
    height: 17.5rem;
    background: rgba(var(--color-primary-40-rgb), 0.95);
    color: var(--color-w);
    padding: 2.5rem;
    box-shadow: 0 0 2.5rem rgba(var(--color-text-rgb), 0.2);
    /* 텍스트(eyebrow+타이틀)를 카드 하단에 붙이기 위해 flex column + justify-content:flex-end 적용 */
    display: flex;
    flex-flow: column;
    justify-content: flex-end;
}
.about-card .section-eyebrow {
    font-size: var(--fs-18);
    color: var(--color-w);
    font-family: var(--font-en);
    margin-bottom: 1.5rem;
}
.about-card-title {
    font-size: var(--fs-30);
    font-weight: var(--fw-medium);
    color: var(--color-w);
}
.about-visual-desc {
    flex: 1;
    padding-bottom: 2.25rem;
    font-size: var(--fs-20);
    line-height: var(--lh-loose);
    word-break: keep-all;
}

.company-timeline {
    padding: 2.5rem 25rem 10rem 25rem;
    /* 이미지가 컨테이너 너비만큼 늘어나던 문제 수정 - 가운데 정렬로 원본 비율 유지 */
    display: flex;
    justify-content: center;
}
.company-timeline picture,
.company-timeline img {
    display: block;
    /* 확대 방지 - 축소만 되도록 auto+max-width로 변경 */
    width: auto;
    max-width: 100%;
}

.company-pdca {
    width: 100%;
    background: var(--gray-bg-100);
}
.company-pdca-inner {
    padding: 10rem 17.5rem;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
}
.pdca-text {
    flex-shrink: 0;
    max-width: 40rem;
}
.pdca-text .sub-s-desc {
    color: var(--color-text-secondary);
}
.pdca-visual {
    display: flex;
    justify-content: center;
}
.pdca-visual img {
    width: 100%;
    max-width: 34rem;
}

.company-business {
    padding: 10rem 16.25rem 5rem 16.25rem;
}
.business-head {
    margin: 0 auto;
    display: flex;
    flex-flow: column;
    align-items: center;
    text-align: center;
}
.business-head .sub-s-desc {
    color: var(--color-text-secondary);
}
.business-visual {
    display: block;
    margin-top: 5rem;
}
.business-visual img {
    display: block;
    width: 100%;
}

/* 회사 소개 - 노트북 (~1500px) 반응형: PC 패딩이 섹션 wrapper가 아니라
   .about-head/.about-visual/.about-caption/.company-pdca-inner 등 하위 요소에 개별 지정되어 반응형도 그 하위 요소들을 직접 줄임 */
@media (max-width: 1500px) {
    .about-map-bg {
        width: 32rem;
        right: 4rem;
    }
    .about-head {
        padding: 0 10rem;
        padding-top: 5rem;
    }
    .about-title {
        font-size: var(--fs-64);
    }
    .about-visual {
        padding: 0 2rem;
        margin-top: 5rem;
    }
    .about-caption {
        padding: 0 8rem;
        gap: 2.5rem;
    }
    .about-card-title {
        font-size: var(--fs-26);
    }
    .about-visual-desc br {
        display: none;
    }
    .company-timeline {
        padding: 2rem 20rem 6rem;
    }
    .company-pdca-inner {
        padding: 6rem 10rem;
    }
    .company-business {
        padding: 6rem 10rem 4rem;
    }
}

/* 회사 소개 - 모바일 (~1024px) 반응형 */
@media (max-width: 1024px) {
    .section-eyebrow {
        font-size: var(--fs-12);
        margin-bottom: 0.75rem;
    }
    .about-map-bg {
        width: 100%;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .company-about {
        padding: 0 1rem;
    }
    .about-head {
        padding: 0;
        padding-top: 3rem;
    }
    .about-title {
        font-size: var(--fs-48);
        text-align: center;
    }
    .about-title .br-mobile {
        display: block;
    }
    .about-copy {
        margin-top: 1.875rem;
    }
    .about-copy .sub-s-desc,
    .about-copy .sub-s-subtitle {
        text-align: center;
    }
    .about-visual {
        padding: 0;
        margin-top: 2.5rem;
    }
    .about-photo img {
        aspect-ratio: auto;
        border-radius: 0.75rem;
    }
    .about-caption {
        flex-flow: column;
        align-items: stretch;
        gap: 1.25rem;
        margin-top: -1.5rem;
        padding: 0;
    }
    .about-card {
        width: calc(100% - 30%);
        height: auto;
        padding: 1.5rem 1.75rem;
    }
    .about-card-title {
        font-size: var(--fs-18);
    }
    .about-visual-desc {
        padding-bottom: 0;
        font-size: var(--fs-14);
        text-align: right;
    }

    .company-timeline {
        padding: 1.5rem 1rem 3rem;
    }

    .company-pdca-inner {
        flex-flow: column;
        align-items: stretch;
        padding: 3rem 1rem;
        gap: 2.5rem;
    }
    .pdca-text {
        max-width: none;
        text-align: center;
    }

    .company-business {
        padding: 3rem 1rem;
    }
    .business-visual {
        margin-top: 2.5rem;
    }
}

/* 조직 역할 (Organization) (PC): 조직도 이미지(완성 이미지 삽입) + 좌측 세로 탭(1/2/3) / 우측 상세 패널.
   탭 전환은 js/sub/org_filter.js가 .org-tab-btn/.org-panel의 data-org 값을 맞춰 .active 토글 (PROJECT 페이지 data-dept와 동일 방식) */
.org-section {
    padding: 0 2.5rem;
}
.org-chart-wrap {
    margin-top: 3.75rem;
    background: rgba(var(--color-primary-0-rgb), 0.7);
    border-radius: 1rem;
    padding: 5rem 13.75rem;
}
.org-chart-wrap picture,
.org-chart-wrap img {
    display: block;
    width: 100%;
}

.org-detail-section {
    padding-left: 16.25rem;
}
.org-detail-title {
    font-size: var(--fs-40);
    font-weight: var(--fw-semiBold);
    word-break: keep-all;
    margin-top: 7.5rem;
    margin-bottom: 3.75rem;
}
.org-detail {
    display: flex;
    flex-flow: row;
    gap: 1.5rem;
}
.org-tab-list {
    flex-shrink: 0;
    width: 21rem;
    display: flex;
    flex-flow: column;
    padding: 1.5rem 0;
    gap: 1.5rem;
}
/* 비활성 탭은 배경 없는 순수 텍스트(번호+라벨 가로 배치)이고,
   선택된 탭만 teal 카드가 되면서 오른쪽으로 커져 .org-panel-wrap 좌측 모서리 위에
   살짝 겹쳐 올라탄 것처럼 보임 (음수 margin-right + z-index로 구현) */
.org-tab-btn {
    display: flex;
    flex-flow: row;
    align-items: center;
    gap: 2rem;
    cursor: pointer;
    padding: 1.5rem 2rem;
}
.org-tab-num {
    flex-shrink: 0;
    font-family: var(--font-en);
    font-size: var(--fs-64);
    font-weight: var(--fw-medium);
    line-height: 1;
    color: rgba(var(--color-text-rgb), 0.1);
}
.org-tab-label {
    display: flex;
    flex-flow: column;
    gap: 0.5rem;
    font-size: var(--fs-24);
    font-weight: var(--fw-semiBold);
}
/* nowrap은 .org-tab-label 전체가 아니라 이름(label-full/label-short)에만 적용.
   small(영문 서브라벨)까지 nowrap이 상속되면 모바일 좁은 폭에서 "System Division"이
   줄바꿈을 못 해 .org-tab-list 전체가 화면 밖으로 밀려남 */
.org-tab-label > span {
    white-space: nowrap;
}
.org-tab-label small {
    font-size: var(--fs-14);
    font-weight: var(--fw-regular);
    color: rgba(var(--color-text-secondary-rgb), 0.7);
}
/* 모바일 전용 축약 라벨(시스템/컨설팅/협업) - PC/노트북에서는 전체 이름만 노출 */
.org-tab-label .label-short {
    display: none;
}
.org-tab-btn.active {
    position: relative;
    z-index: var(--z-contents);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-50));
    border-top-left-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
    margin-right: -3.5rem;
}
.org-tab-btn.active .org-tab-num {
    color: rgba(var(--color-w-rgb), 0.3);
}
.org-tab-btn.active .org-tab-label {
    color: var(--color-w);
}
.org-tab-btn.active .org-tab-label small {
    color: rgba(var(--color-w-rgb), 0.75);
}

.org-panel-wrap {
    position: relative;
    flex: 1;
    background: var(--gray-bg-100);
    border-top-left-radius: 5rem;
    border-bottom-left-radius: 1.5rem;
    padding: 4rem;
    padding-right: 16.25rem;
}
.org-panel {
    display: none;
}
.org-panel.active {
    display: block;
}
.org-row {
    display: flex;
    flex-flow: row;
    gap: 3.75rem;
    padding: 2rem 0;
    border-bottom: 0.063rem solid var(--color-border);
}
.org-row:last-child {
    border-bottom: none;
}
.org-row-team {
    flex-shrink: 0;
    width: 10rem;
    font-size: var(--fs-18);
    font-weight: var(--fw-semiBold);
}
.org-row-body {
    flex: 1;
}
.org-row-title {
    font-size: var(--fs-18);
    font-weight: var(--fw-medium);
    margin-bottom: 1rem;
}
.org-row-body .org-tit-margin {
    margin-top: 2rem;
}
.org-row-list {
    display: flex;
    flex-flow: column;
    gap: 0.375rem;
}
.org-row-list li {
    font-size: var(--fs-17);
    word-break: keep-all;
}
.org-br {display: none;}

/* 조직 역할 - 노트북 (~1500px) 반응형 */
@media (max-width: 1500px) {
    .org-section {
        padding: 0 4rem;
    }
    .org-chart-wrap {
        padding: 4rem 11rem;
    }
    .org-detail-section {
        padding-left: 10rem;
    }
    .org-panel-wrap {
        /* 상하 padding(PC 4rem)이 이 브레이크포인트에서 그대로 유지되고 있어
           다른 형제 섹션들과 맞춰 85%(4rem*0.85=3.4rem)로 축소 */
        padding-top: 3.4rem;
        padding-bottom: 3.4rem;
        padding-right: 10rem;
    }
}

/* 조직 역할 - 모바일 (~1024px) 반응형 */
@media (max-width: 1024px) {
    .org-section,
    .org-detail-section {
        padding: 0 1rem;
    }
    .org-chart-wrap {
        margin-top: 2rem;
        padding: 1.25rem;
        border-radius: 0.5rem;
    }
    .org-detail-title {
        font-size: var(--fs-20);
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
    .no-mobile {
        display: none;
    }
    /* 탭 3개는 세로 스택이 아니라 .org-tab-list 자체가 flex-flow:row인 한 줄
       (1번 카드 + 2/3번 텍스트가 나란히)이고, 1번 카드만 키가 커서 그 아래
       .org-panel-wrap 위로 겹쳐 올라탄 것처럼 보임 (PC와 같은 원리, 방향만 아래쪽) */
    .org-detail {
        flex-flow: column;
        gap: 0;
    }
    .org-tab-list {
        width: auto;
        flex-flow: row;
        align-items: flex-start;
        gap: 0;
        padding: 0;
        position: relative;
        z-index: var(--z-contents);
        margin-bottom: -2rem;
    }
    /* 탭 3개가 화면 폭을 3등분해서 자동으로 채우도록 flex:1로 지정
       (gap 0, 각자 padding 0 - 비활성 탭은 카드가 아니라 텍스트라 패딩 불필요).
       번호(org-tab-num)는 비활성 상태에서는 숨기고 active일 때만 노출 */
    .org-tab-btn {
        flex: 1;
        flex-flow: row;
        align-items: center;
        gap: 0.5rem;
        padding: 0;
        padding: 0.75rem 1rem;
    }
    .org-tab-btn.active {
        flex-flow: column;
        align-items: flex-start;
        margin-right: 0;
    }
    .org-tab-num {
        display: none;
    }
    .org-tab-btn.active .org-tab-num {
        display: block;
        font-size: var(--fs-24);
    }
    .org-tab-label {
        font-size: var(--fs-15);
    }
    .org-tab-btn.active .org-tab-label {
        font-size: var(--fs-16);
    }
    .org-tab-label .label-full {
        display: none;
    }
    .org-tab-label .label-short {
        display: inline;
    }
    .org-panel-wrap {
        padding: 2.5rem 1.25rem 0.5rem;
        border-top-left-radius: 1.875rem;
        border-bottom-left-radius: 0.75rem;
    }
    .org-row {
        flex-flow: column;
        gap: 0.5rem;
        padding: 1.5rem 0;
    }
    .org-row-team {
        width: auto;
        font-size: var(--fs-20);
    }
    .org-row-title {
        font-size: var(--fs-16);
    }
    .org-row-list li {
        font-size: var(--fs-14);
    }
    .org-br {display: block;}
}

/* 주요 연혁 (History) (PC): #container의 .detail_history로 스코프. 좌측 탭은 sticky 사이드바+스크롤스파이
   (js/sub/split_scroll.js의 sticky-sidebar 로직을 history_filter.js가 적용) - 패널은 숨기지 않고 이어져 있고 스크롤로 js가 .active만 동기화, 탭 클릭 시 스무스 스크롤.
   teal 배경은 풀블리드(내용에만 패딩); 활성 탭 카드는 org 탭과 달리 네 모서리 균일하게 둥글고 옆 패널과 안 겹침 */
/* teal 그라디언트가 .history-body뿐 아니라 "주요 연혁" 제목까지 이어져야 해서 배경을 .contents-wrap 자체에 줌.
   padding-top/bottom도 공통 .contents-wrap 규칙에 얹지 않고 .detail_history로 명시해 다른 페이지에 영향 없이 독립 관리 */
.detail_history .contents-wrap {
    padding-top: 0;
    padding-bottom: 0;
    /* 위→아래 수직이 아닌 좌상단→우하단 대각선 그라디언트 */
    background: linear-gradient(135deg, var(--gradient-bg-top), var(--gradient-bg-bottom));
}
.detail_history .history-section {
    padding: 0;
}
/* 제목+탭 목록이 같은 배경 band 위에 있어야 해서 .history-tab-col로 묶어 PC는 좌측 컬럼,
   모바일은 상단 band로 배치. .history-body 자체엔 outer margin/padding 없음 - 왼쪽 어두운
   영역이 패널 상단/좌측 끝에 여백 없이 바로 붙어야 함 */
.detail_history .history-body {
    display: flex;
    flex-flow: row;
}
.detail_history .sub-s-headline {
    color: var(--color-w);
}
/* 260px(16.25rem) 여백은 .history-body가 아니라 .history-tab-col의
   padding-left / .history-panel-wrap의 padding-right에 각각 줌 - 그래야 배경(어두운 톤/teal)은
   패널 끝까지 꽉 차면서 내용(제목·카드·텍스트)만 260px 안쪽에서 시작함 */
.detail_history .history-tab-col {
    position: sticky;
    top: 0;
    flex-shrink: 0;
    width: 39.25rem;
    display: flex;
    flex-flow: column;
    padding: 7.5rem 2rem 10rem 16.25rem;
    background: rgba(var(--gnb-item-color-rgb), 0.15);
}
/* layout_re.css의 공통 규칙(.section-header{opacity:0}, .section.visible에서만 노출)이
   다른 서브페이지들처럼 여기도 적용되므로, motion_add.css의 .cont-title/.product-structure
   등과 동일하게 처음부터 보이도록 무효화 */
.detail_history .history-tab-col .section-header {
    margin-bottom: 1.25rem;
    text-align: left;
    opacity: 1;
    transform: none;
    transition: none;
}
.detail_history .history-tab-list {
    display: flex;
    flex-flow: column;
    gap: 1.5rem;
}
.detail_history .history-tab-btn {
    display: flex;
    flex-flow: row;
    align-items: center;
    gap: 1.25rem;
    cursor: pointer;
    padding: 1.5rem 2rem;
    color: var(--color-w);
}
.detail_history .history-tab-icon {
    flex-shrink: 0;
    font-size: var(--fs-64);
    color: rgba(var(--color-w-rgb), 0.3);
}
.detail_history .history-tab-label {
    display: flex;
    flex-flow: column;
    gap: 0.375rem;
}
.detail_history .history-tab-label strong {
    font-size: var(--fs-24);
    font-weight: var(--fw-semiBold);
}
.detail_history .history-tab-label small {
    font-size: var(--fs-14);
    color: rgba(var(--color-w-rgb), 0.8);
}
/* .org-tab-btn.active와 동일하게 음수 margin-right로 활성 카드가 .history-panel-wrap
   영역 위로 살짝 겹쳐 보이도록 함 (모서리는 org와 달리 네 군데 모두 균일하게 둥글게 유지) */
.detail_history .history-tab-btn.active {
    position: relative;
    z-index: var(--z-contents);
    background: var(--color-w);
    color: var(--color-text);
    border-top-left-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
    margin-right: -3.5rem;
}
.detail_history .history-tab-btn.active .history-tab-icon {
    color: rgba(var(--color-accent-rgb), 0.3);
}
.detail_history .history-tab-btn.active .history-tab-label small {
    color: rgba(var(--color-text-rgb), 0.6);
}

.detail_history .history-panel-wrap {
    flex: 1;
    min-width: 0;
    padding: 13.751rem 16.25rem 10rem 6rem;
}
/* 탭 클릭이 패널을 숨기는 스위처가 아니라 sticky 사이드바 + 스크롤스파이 방식이라
   .history-panel은 전부 같은 흐름 안에서 이어져야 해서 display:none을 두지 않음
   (js/sub/history_filter.js가 스크롤 위치로 active 탭만 동기화하고 패널은 항상 보임) */
.detail_history .history-year {
    padding: 1.5rem 0;
}
.detail_history .history-panel .history-year:last-child {
    border-bottom: none;
}
.detail_history .history-year h3 {
    font-family: var(--font-en);
    font-size: var(--fs-40);
    font-weight: var(--fw-medium);
    color: var(--color-w);
    margin-bottom: 1.25rem;
}
.detail_history .history-list {
    display: flex;
    flex-flow: column;
    gap: 0.75rem;
}
.detail_history .history-list li {
    display: flex;
    flex-flow: row;
}
.detail_history .history-month {
    flex-shrink: 0;
    width: 3.75rem;
    font-family: var(--font-en);
    font-size: var(--fs-18);
    font-weight: var(--fw-medium);
    color: var(--color-w);
}
.detail_history .history-list p {
    font-size: var(--fs-17);
    word-break: keep-all;
    color: rgba(var(--color-w-rgb), 0.92);
}

/* 주요 연혁 - 노트북 (~1500px) 반응형 - 조직 역할 페이지와 동일하게 260px(16.25rem) 여백을 4rem으로 축소 */
@media (max-width: 1500px) {
    .detail_history .history-tab-col {
        width: 30.5rem;
        /* top padding(PC 7.5rem)이 이 브레이크포인트에서 그대로 유지되고 있어
           85%(7.5rem*0.85=6.375rem)로 축소 (bottom은 이미 5rem으로 축소되어 있어 그대로 둠) */
        padding: 6.375rem 1.5rem 5rem 10rem;
    }
    .detail_history .history-panel-wrap {
        padding: 7.5rem 10rem 5rem 6rem;
    }
}

/* 주요 연혁 - 모바일 (~1024px) 반응형
   sticky를 풀고 좌측 탭 컬럼(제목+탭) → 우측 패널이 위/아래로 쌓이는 일반 흐름으로 전환.
   .history-tab-col이 화면 전체 폭의 상단 band가 되고, 그 안에서 제목/탭이 이어진다 */
@media (max-width: 1024px) {
    .detail_history .contents-wrap {
        padding-top: 0;
        padding-bottom: 4rem;
    }
    .detail_history .history-body {
        flex-flow: column;
    }
    /* PC는 좌측 정렬 제목이지만 모바일은 "주요 연혁" 제목을 가운데 정렬
       (PC 전용 text-align:left를 모바일에서 center로 덮어씀) */
    .detail_history .history-tab-col .section-header {
        justify-content: center;
        text-align: center;
    }
    .detail_history .history-tab-col {
        position: static;
        width: 100%;
        padding: 6.25rem 1.5rem 1.125rem 1.5rem;
    }
    /* 모바일은 세로 스택이 아니라 조직 역할 모바일 탭과 같은 가로(row) 배치 -
       비활성 탭(2010~2019/1992~2009)은 아이콘 없이 제목/부제만 세로로 쌓인 일반 텍스트이고,
       활성 탭(2020~현재)만 흰 카드 + 아이콘을 갖춘 채 나머지 폭을 더 많이 차지한다 */
    .detail_history .history-tab-list {
        flex-flow: row;
        align-items: flex-end;
        gap: 0.5rem;
    }
    .detail_history .history-tab-btn {
        flex: 1;
        flex-flow: column;
        align-items: flex-start;
        gap: 0.375rem;
        padding: 0;
    }
    .detail_history .history-tab-icon {
        display: none;
        font-size: var(--fs-32);
    }
    /* PC의 margin-right 겹침(활성 카드가 우측 패널 위로 올라탐)과 같은 원리를 세로 구조에 맞춰
       margin-bottom으로 적용 - 겹침 폭이 PC(24px)와 비슷해 보이도록 -3.5rem 사용
       (history-tab-col의 padding-bottom 2rem에 흡수되는 만큼 고려한 값) */
    .detail_history .history-tab-btn.active {
        flex: 1;
        margin-right: 0;
        margin-bottom: -3.5rem;
        padding: 0.7rem;
    }
    .detail_history .history-tab-btn.active .history-tab-icon {
        display: block;
    }
    .detail_history .history-tab-label strong {
        font-size: var(--fs-16);
    }
    .detail_history .history-tab-label small {
        font-size: var(--fs-12);
    }
    /* padding-top을 너무 넉넉히 주면(4rem) 카드 겹침 효과가 묻히고 빈 여백만 넓어 보이므로,
       겹침(순수 24px)이 살짝 여백을 남기고 자연스럽게 이어지도록 2rem으로 지정 */
    .detail_history .history-panel-wrap {
        padding: 2rem 1rem;
    }
    .detail_history .history-year {
        padding: 1.25rem 0;
    }
    .detail_history .history-year h3 {
        font-size: var(--fs-24);
        margin-bottom: 0.75rem;
    }
    .detail_history .history-month {
        width: 2.75rem;
        font-size: var(--fs-14);
    }
    .detail_history .history-list p {
        font-size: var(--fs-14);
    }
    /* 모바일은 내용이 너무 길어져 스크롤스파이 대신 org_filter.js와 같은
       탭 스위처로 전환 - 클릭한 탭의 data-history와 일치하는 패널만 노출 (js/sub/history_filter.js) */
    .detail_history .history-panel {
        display: none;
    }
    .detail_history .history-panel.active {
        display: block;
    }
}

/* SYSTEM/CONSULTING 서브페이지(2606~2617) "제품 문의" 버튼 -> 메인페이지 Contact 섹션 팝업
   (#contact-popup은 각 페이지에 고정 배치, iframe이 2601_main_renewal.html?popup=contact를 로드) */
.contact-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
}
.contact-popup.is-open {
    display: block;
}
.contact-popup-dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}
.contact-popup-inner {
    position: relative;
    width: 92vw;
    height: 90vh;
    margin: 3vh auto;
    background: var(--color-w);
    border-radius: 1rem;
    overflow: hidden;
}
.contact-popup-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    cursor: pointer;
}
.contact-popup-frame {
    width: 100%;
    height: 100%;
    border: 0;
}
html.contact-popup-open,
body.contact-popup-open {
    overflow: hidden;
}

/* 제품 문의 팝업 - 모바일 (~768px) 반응형: 전체화면으로 표시.
   닫기 버튼이 스크롤 중에도 고정 위치라 배경 없이는 어색해 ::before로 반투명 상단 바 추가 -
   기본은 숨기고, 맨 위 콘텐츠를 가리지 않도록 스크롤 후(js/sub/contact_popup.js의 .is-scrolled)에만 페이드인 */
@media (max-width: 768px) {
    .contact-popup-inner {
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 0;
    }
    .contact-popup-inner::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4.5rem;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
        z-index: 1;
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    .contact-popup.is-scrolled .contact-popup-inner::before {
        opacity: 1;
    }
    .contact-popup-close {
        top: 1rem;
        right: 1rem;
        z-index: 2;
    }
}

/* 홍보자료 페이지 카드(.promo-card) 클릭 시 썸네일 이미지를 확대해서 보여주는 팝업 */
.promo-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
}
.promo-popup.is-open {
    display: block;
}
.promo-popup-dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
}
.promo-popup-inner {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem;
}
.promo-popup-inner img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 0.5rem;
    display: block;
}
.promo-popup-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    cursor: pointer;
}
.promo-popup-close .material-symbols-rounded {
    /* .material-symbols-rounded는 color를 직접 지정(상속X)하므로 버튼의 흰색을 span에 재지정 */
    color: var(--color-w);
}
html.promo-popup-open,
body.promo-popup-open {
    overflow: hidden;
}

/* 이미지 팝업 - 모바일 (~768px) 반응형: 여백을 줄여 이미지를 최대한 크게 표시 */
@media (max-width: 768px) {
    .promo-popup-inner {
        padding: 1.5rem;
    }
    .promo-popup-close {
        top: 1rem;
        right: 1rem;
    }
}


/* 영문 번역 CSS */
.lang-en .about-card-title {
    font-size: var(--fs-22);
}
.lang-en .about-visual-desc {
    padding-bottom: 1.5rem;
}
.lang-en .about-visual-desc br {
    display: none;
}

.lang-en .org-tab-label > span {
    white-space: normal;
}

.lang-en .transit-row:first-child .transit-detail-list>li:last-child .transit-badge {
    width: unset;
}
.lang-en .contents-wrap .cont-title:has(.ps-title) {
    padding: 0 18.75rem;
}
.lang-en .product-inquiries {
    padding-top: unset;
    padding: 5rem 18.75rem 0 18.75rem;
}
.lang-en .stage-badge span {
    margin-right: 0.25rem;
}
.lang-en .proj-meta-extra font {
    word-break: break-all;
}

/* 영문 번역 CSS - 노트북 */
@media (max-width: 1500px) {
    .lang-en .about-card-title {
        font-size: var(--fs-22);
    }
    .lang-en .about-visual-desc {
        font-size: var(--fs-17);
    }
    .lang-en .contents-wrap .cont-title:has(.ps-title) {
        padding: 0 12.5rem;
    }
    .lang-en .product-inquiries {
        padding-top: unset;
        padding: 4rem 12.5rem 0 12.5rem;
    }
}

/* 영문 번역 CSS - 모바일 */
@media (max-width: 1024px) {
    .lang-en .transit-detail-list li {
        flex-flow: column;
        align-items: flex-start;
    }

    .lang-en .contents-wrap .cont-title:has(.ps-title) {
        padding: 0 1rem;
    }
    .lang-en .cont-title .ps-title .ps-headline font {
        white-space: normal;
    }
    .lang-en .product-inquiries {
        padding-top: unset;
        padding: 3rem 1rem 0 1rem;
    }
}