/* ── design-system.css (gts2) ── */
/**
 * GTS2 디자인 시스템
 * 적용 범위: 리뉴얼 메인과 리뉴얼 하위 페이지 7개
 *
 * 폰트, 색상, 기본 페이지 레이아웃만 중앙에서 관리합니다.
 * 기존 레이아웃이 바뀌지 않도록 페이지별 카드, 그리드, 슬라이더,
 * 이미지 비율과 인터랙션은 각 페이지 스타일에 유지합니다.
 * 현재 테마에는 아직 연결하지 않은 상태입니다.
 */

/* --------------------------------------------------------------------------
   1. 디자인 기초 토큰
   -------------------------------------------------------------------------- */

:root {
    /* 폰트와 굵기 */
    --gts-font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --gts-fw-400: 400;
    --gts-fw-500: 500;
    --gts-fw-600: 600;
    --gts-fw-700: 700;
    --gts-fw-800: 800;
    --gts-fw-900: 900;

    /* 8개 페이지에서 반복 사용하는 폰트 크기 */
    --gts-fs-12: 12px;
    --gts-fs-13: 13px;
    --gts-fs-14: 14px;
    --gts-fs-15: 15px;
    --gts-fs-16: 16px;
    --gts-fs-17: 17px;
    --gts-fs-18: 18px;
    --gts-fs-20: 20px;
    --gts-fs-22: 22px;
    --gts-fs-24: 24px;
    --gts-fs-26: 26px;
    --gts-fs-28: 28px;
    --gts-fs-30: 30px;
    --gts-fs-32: 32px;
    --gts-fs-34: 34px;
    --gts-fs-38: 38px;
    --gts-fs-42: 42px;
    --gts-fs-48: 48px;

    /* 현재 페이지에서 사용하는 브랜드 및 무채색 팔레트 */
    --gts-color-primary: #1D79CB;
    --gts-color-action: #1b8fe9;
    --gts-color-action-hover: #0f73c0;
    --gts-color-black: #111;
    --gts-color-black-soft: #171717;
    --gts-color-heading-soft: #202020;
    --gts-color-gray-800: #333;
    --gts-color-gray-700: #555;
    --gts-color-gray-600: #666;
    --gts-color-gray-500: #777;
    --gts-color-gray-400: #888;
    --gts-color-gray-300: #999;
    --gts-color-white: #fff;
    --gts-color-surface: #f7f8fa;
    --gts-color-surface-product: #f6f7f9;
    --gts-color-surface-media: #eef0f3;
    --gts-color-border: #dfe5ea;
    --gts-color-border-soft: #e4e7eb;

    /* 기본 레이아웃 */
    --gts-container-width: 1320px;
    --gts-container-gutter: 32px;
    --gts-section-space: 96px;
    --gts-section-space-spacious: 120px;
    --gts-radius: 4px;
}

/* --------------------------------------------------------------------------
   2. 적용 페이지의 기본값과 의미 변수
   -------------------------------------------------------------------------- */

.gts-page {
    --gts-heading-color: var(--gts-color-black);
    --gts-description-color: var(--gts-color-gray-600);
    --gts-description-weight: var(--gts-fw-600);
    --gts-supporting-color: var(--gts-color-gray-500);
    --gts-supporting-weight: var(--gts-fw-600);
    --gts-hero-size-tablet: var(--gts-fs-48);
    --gts-hero-size-mobile: var(--gts-fs-34);
    --gts-hero-line-height: 1.18;
    --gts-hero-line-height-mobile: var(--gts-hero-line-height);
    --gts-hero-desc-color: rgba(255, 255, 255, .92);
    --gts-hero-desc-weight: var(--gts-fw-500);
    --gts-hero-desc-line-height: 1.6;
    --gts-hero-desc-line-height-mobile: 1.6;
    --gts-section-title-line-height: 1.28;

    overflow: hidden;
    background: var(--gts-color-white);
    color: var(--gts-heading-color);
    font-family: var(--gts-font-family);
    letter-spacing: 0;
    word-break: keep-all;
}

.gts-page *,
.gts-page *::before,
.gts-page *::after {
    box-sizing: border-box;
}

.gts-page a {
    color: inherit;
}

/* 기존 페이지의 색감이나 굵기가 다르면 공통 폰트 규칙을 변경하지 않고
   페이지 래퍼에서 아래 의미 변수만 덮어쓸 수 있습니다. */
.gts-tone--soft {
    --gts-heading-color: var(--gts-color-heading-soft);
    --gts-description-color: var(--gts-color-gray-700);
    --gts-description-weight: var(--gts-fw-500);
    --gts-supporting-color: var(--gts-color-gray-700);
    --gts-supporting-weight: var(--gts-fw-500);
}

.gts-tone--dark {
    --gts-heading-color: var(--gts-color-black-soft);
}

.gts-tone--regular-desc {
    --gts-description-weight: var(--gts-fw-500);
    --gts-supporting-weight: var(--gts-fw-500);
}

/* --------------------------------------------------------------------------
   3. 역할별 타이포그래피
   -------------------------------------------------------------------------- */

.gts-type-hero,
.gts-type-hero-desc,
.gts-type-page-title,
.gts-type-section-title,
.gts-type-section-desc,
.gts-type-module-title,
.gts-type-body,
.gts-type-meta,
.gts-type-caption {
    margin-top: 0;
    margin-bottom: 0;
}

.gts-type-hero {
    color: inherit;
    font-size: var(--gts-fs-48);
    font-weight: var(--gts-fw-800);
    line-height: var(--gts-hero-line-height);
    letter-spacing: 0;
}

.gts-type-hero-desc {
    color: var(--gts-hero-desc-color);
    font-size: var(--gts-fs-17);
    font-weight: var(--gts-hero-desc-weight);
    line-height: var(--gts-hero-desc-line-height);
}

.gts-type-page-title {
    color: var(--gts-color-primary);
    font-size: var(--gts-fs-38);
    font-weight: var(--gts-fw-900);
    line-height: 1.2;
    letter-spacing: -.03em;
}

.gts-type-section-title {
    color: var(--gts-heading-color);
    font-size: var(--gts-fs-34);
    font-weight: var(--gts-fw-900);
    line-height: var(--gts-section-title-line-height);
    letter-spacing: 0;
}

.gts-type-section-desc {
    margin-top: 14px;
    color: var(--gts-description-color);
    font-size: var(--gts-fs-15);
    font-weight: var(--gts-description-weight);
    line-height: 1.7;
}

.gts-type-module-title {
    color: var(--gts-heading-color);
    font-size: var(--gts-fs-24);
    font-weight: var(--gts-fw-800);
    line-height: 1.3;
}

.gts-type-body {
    color: var(--gts-description-color);
    font-size: var(--gts-fs-15);
    font-weight: var(--gts-description-weight);
    line-height: 1.7;
}

.gts-type-meta {
    color: var(--gts-supporting-color);
    font-size: var(--gts-fs-13);
    font-weight: var(--gts-supporting-weight);
    line-height: 1.55;
}

.gts-type-caption {
    color: var(--gts-supporting-color);
    font-size: var(--gts-fs-12);
    font-weight: var(--gts-supporting-weight);
    line-height: 1.55;
}

/* --------------------------------------------------------------------------
   4. 폰트 유틸리티
   -------------------------------------------------------------------------- */

.gts-fs-12 { font-size: var(--gts-fs-12) !important; }
.gts-fs-13 { font-size: var(--gts-fs-13) !important; }
.gts-fs-14 { font-size: var(--gts-fs-14) !important; }
.gts-fs-15 { font-size: var(--gts-fs-15) !important; }
.gts-fs-16 { font-size: var(--gts-fs-16) !important; }
.gts-fs-17 { font-size: var(--gts-fs-17) !important; }
.gts-fs-18 { font-size: var(--gts-fs-18) !important; }
.gts-fs-20 { font-size: var(--gts-fs-20) !important; }
.gts-fs-22 { font-size: var(--gts-fs-22) !important; }
.gts-fs-24 { font-size: var(--gts-fs-24) !important; }
.gts-fs-26 { font-size: var(--gts-fs-26) !important; }
.gts-fs-28 { font-size: var(--gts-fs-28) !important; }
.gts-fs-30 { font-size: var(--gts-fs-30) !important; }
.gts-fs-32 { font-size: var(--gts-fs-32) !important; }
.gts-fs-34 { font-size: var(--gts-fs-34) !important; }
.gts-fs-38 { font-size: var(--gts-fs-38) !important; }
.gts-fs-42 { font-size: var(--gts-fs-42) !important; }
.gts-fs-48 { font-size: var(--gts-fs-48) !important; }

.gts-fw-400 { font-weight: var(--gts-fw-400) !important; }
.gts-fw-500 { font-weight: var(--gts-fw-500) !important; }
.gts-fw-600 { font-weight: var(--gts-fw-600) !important; }
.gts-fw-700 { font-weight: var(--gts-fw-700) !important; }
.gts-fw-800 { font-weight: var(--gts-fw-800) !important; }
.gts-fw-900 { font-weight: var(--gts-fw-900) !important; }

.gts-lh-118 { line-height: 1.18 !important; }
.gts-lh-120 { line-height: 1.2 !important; }
.gts-lh-125 { line-height: 1.25 !important; }
.gts-lh-128 { line-height: 1.28 !important; }
.gts-lh-130 { line-height: 1.3 !important; }
.gts-lh-135 { line-height: 1.35 !important; }
.gts-lh-145 { line-height: 1.45 !important; }
.gts-lh-155 { line-height: 1.55 !important; }
.gts-lh-160 { line-height: 1.6 !important; }
.gts-lh-165 { line-height: 1.65 !important; }
.gts-lh-170 { line-height: 1.7 !important; }
.gts-lh-175 { line-height: 1.75 !important; }

.gts-ls-tight { letter-spacing: -.03em !important; }
.gts-ls-normal { letter-spacing: 0 !important; }
.gts-ls-wide { letter-spacing: .02em !important; }

/* --------------------------------------------------------------------------
   5. 색상 유틸리티
   -------------------------------------------------------------------------- */

.gts-text-primary { color: var(--gts-color-primary) !important; }
.gts-text-action { color: var(--gts-color-action) !important; }
.gts-text-black { color: var(--gts-color-black) !important; }
.gts-text-heading-soft { color: var(--gts-color-heading-soft) !important; }
.gts-text-gray-800 { color: var(--gts-color-gray-800) !important; }
.gts-text-gray-700 { color: var(--gts-color-gray-700) !important; }
.gts-text-gray-600 { color: var(--gts-color-gray-600) !important; }
.gts-text-gray-500 { color: var(--gts-color-gray-500) !important; }
.gts-text-gray-400 { color: var(--gts-color-gray-400) !important; }
.gts-text-white { color: var(--gts-color-white) !important; }

.gts-bg-white { background-color: var(--gts-color-white) !important; }
.gts-bg-surface { background-color: var(--gts-color-surface) !important; }
.gts-bg-product { background-color: var(--gts-color-surface-product) !important; }
.gts-bg-media { background-color: var(--gts-color-surface-media) !important; }

.gts-border-default { border-color: var(--gts-color-border) !important; }
.gts-border-soft { border-color: var(--gts-color-border-soft) !important; }

/* --------------------------------------------------------------------------
   6. 기본 레이아웃
   -------------------------------------------------------------------------- */

.gts-container {
    width: min(var(--gts-container-width), calc(100% - (var(--gts-container-gutter) * 2)));
    margin-inline: auto;
}

.gts-container--main {
    width: min(1460px, calc(100% - 128px));
    margin-inline: auto;
}

.gts-section {
    position: relative;
    padding-block: var(--gts-section-space);
}

.gts-section--spacious {
    padding-block: var(--gts-section-space-spacious);
}

/* 문의/FAQ처럼 안내문과 실사용 콘텐츠가 나란히 놓이는 공용 하단 모듈 */
.gts-info-layout {
    --gts-heading-color: var(--gts-color-black);
    --gts-description-color: var(--gts-color-gray-600);
    --gts-description-weight: var(--gts-fw-500);
    --gts-info-control-height: 54px;
    --gts-info-control-gap: 12px;
    --gts-info-control-border: #e3e8ee;
    --gts-info-control-radius: var(--gts-radius);
    --gts-info-control-font-size: var(--gts-fs-14);
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    column-gap: 96px;
    row-gap: 0;
    align-items: center;
    text-align: left;
    font-family: var(--gts-font-family);
}

.gts-info-layout__intro {
    min-width: 0;
}

.gts-info-layout .gts-type-section-title {
    font-size: var(--gts-fs-38);
    line-height: 1.25;
}

.gts-info-layout .gts-type-section-desc {
    margin-top: 16px;
    font-size: var(--gts-fs-15);
    line-height: 1.7;
}

.gts-info-layout__icon {
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 0 22px;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
}

.gts-info-layout__content {
    min-width: 0;
    width: 100%;
}

.gts-center { text-align: center !important; }
.gts-left { text-align: left !important; }
.gts-mx-auto { margin-inline: auto !important; }
.gts-mt-0 { margin-top: 0 !important; }

/* --------------------------------------------------------------------------
   7. 반응형 타이포그래피와 기본 레이아웃
   -------------------------------------------------------------------------- */

/* PC(≥1280px) 전용 타이포 확대 — 넓은 화면에서만 본문·제목이 작아 보이는 것을 보정합니다.
   중앙 폰트 토큰을 .gts-page 안에서만 한 단계 키우므로 태블릿·모바일(≤1024)과
   헤더·푸터에는 영향이 없습니다. 큰 글자는 크게, 본문은 조금, 12px(약관 등)은 그대로 두어
   기존 위계(디자인 흐름)를 유지합니다. */
@media (min-width: 1280px) {
    .gts-page {
        --gts-fs-13: 14px;
        --gts-fs-14: 15px;
        --gts-fs-15: 16px;
        --gts-fs-16: 17px;
        --gts-fs-17: 18px;
        --gts-fs-18: 19px;
        --gts-fs-20: 22px;
        --gts-fs-22: 24px;
        --gts-fs-24: 26px;
        --gts-fs-26: 29px;
        --gts-fs-28: 31px;
        --gts-fs-30: 33px;
        --gts-fs-32: 36px;
        --gts-fs-34: 40px;
        --gts-fs-38: 42px;
        --gts-fs-42: 46px;
        --gts-fs-48: 54px;

        /* PC component typography roles */
        --gts-pc-card-title-size: 22px;
        --gts-pc-card-desc-size: 15px;
        --gts-pc-compact-title-size: 19px;
        --gts-pc-compact-desc-size: 14px;
        --gts-pc-caption-title-size: 22px;
        --gts-pc-caption-desc-size: 14px;
        --gts-pc-metric-title-size: 31px;
        --gts-pc-metric-desc-size: 14px;
        --gts-pc-process-title-size: 22px;
        --gts-pc-process-desc-size: 14px;
    }
}

@media (max-width: 1200px) {
    .gts-container--main {
        width: min(1100px, calc(100% - 48px));
    }
}

@media (max-width: 1024px) {
    .gts-page {
        --gts-container-width: 720px;
        --gts-container-gutter: 20px;
        --gts-section-space: 78px;
    }

}

@media (max-width: 1023px) {
    .gts-container--main {
        width: min(720px, calc(100% - 48px));
    }

    .gts-type-hero {
        font-size: var(--gts-hero-size-tablet);
    }

    .gts-info-layout {
        grid-template-columns: 1fr;
        gap: 36px;
        align-items: start;
    }

    .gts-info-layout__intro {
        text-align: center;
    }

    .gts-info-layout__icon {
        margin-right: auto;
        margin-left: auto;
        background-position: center;
    }
}

@media (max-width: 640px) {
    .gts-page {
        --gts-container-gutter: 16px;
        --gts-section-space: 64px;
        --gts-section-space-spacious: 72px;
    }

    .gts-container--main {
        width: calc(100% - 32px);
    }

    .gts-type-hero {
        font-size: var(--gts-hero-size-mobile);
        line-height: var(--gts-hero-line-height-mobile);
    }

    .gts-type-hero-desc {
        font-size: var(--gts-fs-15);
        line-height: var(--gts-hero-desc-line-height-mobile);
    }

    .gts-type-page-title {
        font-size: var(--gts-fs-30);
    }

    .gts-type-section-title {
        font-size: 27px;
        line-height: 1.35;
    }

    .gts-info-layout .gts-type-section-title {
        font-size: var(--gts-fs-30);
    }

    .gts-type-section-desc {
        font-size: var(--gts-fs-14);
        line-height: 1.65;
    }

    .gts-type-module-title {
        font-size: var(--gts-fs-22);
    }
}

/* --------------------------------------------------------------------------
   8. PC 컨테이너 폭 통일 (시안 기준)
   원본 디자인 시안은 콘텐츠가 화면의 약 92%를 차지 (1920px 기준 좌우 여백 약 77px).
   고정 최대폭(1320/1460px) 대신 비율로 늘어나 어떤 모니터에서도 시안과 같은
   여백 비율을 유지합니다. 태블릿·모바일(1024px 이하)은 기존 규칙이 그대로 적용됩니다.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    .gts-container,
    .gts-container--main {
        width: 92%;
    }
}

/* ── gts-typography.css (gts2) ── */
@charset "UTF-8";

/**
 * GTS 전역 타이포그래피 유틸리티
 * --------------------------------------------------------------------------
 * 목적
 * - 페이지마다 흩어진 font-family, font-size, font-weight, line-height,
 *   letter-spacing 값을 재사용 가능한 하나의 체계로 관리한다.
 * - 개발 클래스명과 디자이너의 타이포그래피 스타일명을 같은 규칙으로 맞춘다.
 * - PC, 태블릿, 모바일 값을 하나의 클래스에 포함해 반응형 누락을 방지한다.
 *
 * 현재 기준 화면
 * - 메인: theme/gts2/index.php
 * - 아파트 도입: theme/gts2/page/intro_apt.php
 * - 제품 시그니처: theme/gts2/page/product_signature.php
 * - 위 세 화면이 공유하는 헤더와 푸터
 * - 위 세 화면이 공유하는 창업·도입 문의 폼과 FAQ
 *
 * 위 세 페이지는 디자인 변경이 완료된 기준 화면이다. 다만 이 파일은 세 페이지
 * 전용 CSS가 아니다. 이후 정리가 완료되는 모든 GTS2 페이지가 동일한 유틸리티를
 * 사용하도록 확장하는 전역 타이포그래피 시스템이다.
 *
 * 네이밍
 * - CSS: .typo-{group}-{level}[-{weight}]
 * - 디자인: {Group}/{Level} [{Weight}]
 * - 예시: .typo-body-2, .typo-body-2-strong
 *         Body/2, Body/2 Strong
 * - level 1이 해당 그룹에서 가장 크고, 숫자가 커질수록 작아진다.
 * - medium과 strong은 크기와 행간은 유지하고 굵기만 변경한다.
 *
 * 그룹
 * - display: 히어로와 대형 홍보 문구
 * - heading: 페이지와 섹션 제목
 * - title: 카드, 모듈, 콘텐츠 제목
 * - body: 본문과 설명
 * - label: 메뉴, 버튼, 탭, 폼 라벨
 * - caption: 날짜, 메타 정보, 각주
 * - metric: 가격, 실적, 순번처럼 크게 강조하는 숫자
 *
 * 반응형
 * - PC: 1280px 이상
 * - 태블릿: 641px ~ 1279px
 * - 모바일: 640px 이하
 * - .typo-body-1-pc 또는 .typo-body-1-mobile 같은 기기별 클래스는 만들지 않는다.
 * - 모든 뷰포트 값은 동일한 .typo-* 클래스 내부에서 관리한다.
 *
 * 확장 규칙
 * 1. 기존 클래스와 크기, 굵기, 행간이 같다면 새 클래스를 만들지 않는다.
 * 2. 같은 역할에서 더 작은 단계가 필요할 때만 다음 level을 추가한다.
 * 3. 같은 크기와 행간에서 굵기만 다르면 -medium 또는 -strong을 추가한다.
 * 4. 페이지명, 컴포넌트명, 픽셀값, pc/tablet/mobile을 클래스명에 넣지 않는다.
 * 5. 색상, 여백, 정렬, 레이아웃은 이 파일에서 관리하지 않는다.
 * 6. 한 요소에는 하나의 .typo-* 클래스만 사용한다.
 *
 * 적용 단계 안내
 * - 공통 헤더, 모바일 메뉴, 푸터, 창업·도입 문의 폼과 FAQ에는 적용이 완료됐다.
 * - 기준 3페이지의 본문도 역할별 유틸리티 매핑과 로컬 폰트 선언 정리를 완료했다.
 * - PC는 실제 화면 피드백을 반영해 본문과 모듈 제목을 한 단계 여유 있게 조정했다.
 * - 이후 페이지도 새 값을 임의로 추가하기보다 먼저 이 체계의 기존 역할에 매핑한다.
 */

:root {
    /**
     * 한국어 지원이 확인된 Pretendard를 기본 서체로 사용한다.
     * 브랜드 로고나 이미지 안에 포함된 글자는 타이포그래피 대상에서 제외한다.
     */
    --typo-font-family:
        "Pretendard",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Noto Sans KR",
        sans-serif;
}

/* --------------------------------------------------------------------------
 * 공통 출력 규칙
 * --------------------------------------------------------------------------
 * 각 유틸리티는 아래 내부 변수만 정의한다.
 * --typo-size-{pc|tablet|mobile}
 * --typo-line-{pc|tablet|mobile}
 * --typo-weight
 * --typo-tracking
 */

[class^="typo-"],
[class*=" typo-"] {
    font-family: var(--typo-font-family) !important;
    font-size: var(--typo-size-pc) !important;
    font-style: normal !important;
    font-weight: var(--typo-weight) !important;
    line-height: var(--typo-line-pc) !important;
    letter-spacing: var(--typo-tracking, 0) !important;
    font-synthesis: none;
}

@media (max-width: 1279px) {
    [class^="typo-"],
    [class*=" typo-"] {
        font-size: var(--typo-size-tablet) !important;
        line-height: var(--typo-line-tablet) !important;
    }
}

@media (max-width: 640px) {
    [class^="typo-"],
    [class*=" typo-"] {
        font-size: var(--typo-size-mobile) !important;
        line-height: var(--typo-line-mobile) !important;
    }
}

/* --------------------------------------------------------------------------
 * Display
 * --------------------------------------------------------------------------
 * 큰 히어로 문구에만 사용한다.
 */

/* Display/1 — 메인 히어로급 */
.typo-display-1 {
    --typo-size-pc: 62px;
    --typo-size-tablet: 48px;
    --typo-size-mobile: 34px;
    --typo-line-pc: 1.18;
    --typo-line-tablet: 1.18;
    --typo-line-mobile: 1.2;
    --typo-weight: 800;
    --typo-tracking: 0.01em;
}

/* Display/2 — 하위 페이지 히어로급 */
.typo-display-2 {
    --typo-size-pc: 54px;
    --typo-size-tablet: 42px;
    --typo-size-mobile: 34px;
    --typo-line-pc: 1.18;
    --typo-line-tablet: 1.18;
    --typo-line-mobile: 1.2;
    --typo-weight: 800;
    --typo-tracking: 0.01em;
}

/* Display/3 — 소형 히어로 또는 대형 메시지 */
.typo-display-3 {
    --typo-size-pc: 48px;
    --typo-size-tablet: 38px;
    --typo-size-mobile: 32px;
    --typo-line-pc: 1.2;
    --typo-line-tablet: 1.2;
    --typo-line-mobile: 1.25;
    --typo-weight: 800;
    --typo-tracking: 0.01em;
}

/* --------------------------------------------------------------------------
 * Heading
 * --------------------------------------------------------------------------
 * 페이지 제목, 섹션 제목처럼 콘텐츠 구조를 나누는 제목에 사용한다.
 */

/* Heading/1 — 문의, FAQ 등 독립 대형 섹션 제목 */
.typo-heading-1 {
    --typo-size-pc: 42px;
    --typo-size-tablet: 40px;
    --typo-size-mobile: 32px;
    --typo-line-pc: 1.25;
    --typo-line-tablet: 1.25;
    --typo-line-mobile: 1.25;
    --typo-weight: 900;
    --typo-tracking: 0.02em;
}

/* Heading/2 — 세 기준 페이지의 일반 섹션 제목 */
.typo-heading-2 {
    --typo-size-pc: 40px;
    --typo-size-tablet: 38px;
    --typo-size-mobile: 30px;
    --typo-line-pc: 1.26;
    --typo-line-tablet: 1.28;
    --typo-line-mobile: 1.35;
    --typo-weight: 900;
    --typo-tracking: 0.02em;
}

/* Heading/3 — 일반 섹션보다 한 단계 작은 보조 헤딩 */
.typo-heading-3 {
    --typo-size-pc: 38px;
    --typo-size-tablet: 38px;
    --typo-size-mobile: 30px;
    --typo-line-pc: 1.25;
    --typo-line-tablet: 1.25;
    --typo-line-mobile: 1.25;
    --typo-weight: 900;
    --typo-tracking: 0.02em;
}

/* Heading/4 — 비주얼 콘텐츠 내부의 중형 섹션 제목 */
.typo-heading-4 {
    --typo-size-pc: 36px;
    --typo-size-tablet: 32px;
    --typo-size-mobile: 27px;
    --typo-line-pc: 1.2;
    --typo-line-tablet: 1.22;
    --typo-line-mobile: 1.25;
    --typo-weight: 900;
    --typo-tracking: 0.02em;
}

/* Heading/5 — 섹션 안의 대형 소제목 */
.typo-heading-5 {
    --typo-size-pc: 33px;
    --typo-size-tablet: 30px;
    --typo-size-mobile: 24px;
    --typo-line-pc: 1.34;
    --typo-line-tablet: 1.32;
    --typo-line-mobile: 1.3;
    --typo-weight: 900;
    --typo-tracking: 0.02em;
}

/* Heading/6 — 시스템, 제품군 등 하위 구조 제목 */
.typo-heading-6 {
    --typo-size-pc: 27px;
    --typo-size-tablet: 24px;
    --typo-size-mobile: 21px;
    --typo-line-pc: 1.25;
    --typo-line-tablet: 1.25;
    --typo-line-mobile: 1.25;
    --typo-weight: 900;
    --typo-tracking: 0.02em;
}

/* --------------------------------------------------------------------------
 * Title
 * --------------------------------------------------------------------------
 * 카드, 모듈, 제품 정보처럼 섹션 내부 콘텐츠의 제목에 사용한다.
 */

/* Title/1 — 제품 상세 패널의 대형 제목 */
.typo-title-1 {
    --typo-size-pc: 42px;
    --typo-size-tablet: 36px;
    --typo-size-mobile: 30px;
    --typo-line-pc: 1.08;
    --typo-line-tablet: 1.1;
    --typo-line-mobile: 1.12;
    --typo-weight: 800;
    --typo-tracking: 0.015em;
}

/* Title/2 — 대형 카드와 강조 콘텐츠 제목 */
.typo-title-2 {
    --typo-size-pc: 33px;
    --typo-size-tablet: 28px;
    --typo-size-mobile: 24px;
    --typo-line-pc: 1.3;
    --typo-line-tablet: 1.3;
    --typo-line-mobile: 1.3;
    --typo-weight: 800;
    --typo-tracking: 0.015em;
}

/* Title/3 — 중대형 카드 제목 */
.typo-title-3 {
    --typo-size-pc: 30px;
    --typo-size-tablet: 26px;
    --typo-size-mobile: 23px;
    --typo-line-pc: 1.35;
    --typo-line-tablet: 1.35;
    --typo-line-mobile: 1.35;
    --typo-weight: 800;
    --typo-tracking: 0.015em;
}

/* Title/4 — 일반 카드와 섹션 내부 모듈 제목 */
.typo-title-4 {
    --typo-size-pc: 28px;
    --typo-size-tablet: 24px;
    --typo-size-mobile: 22px;
    --typo-line-pc: 1.3;
    --typo-line-tablet: 1.3;
    --typo-line-mobile: 1.3;
    --typo-weight: 800;
    --typo-tracking: 0.015em;
}

/* Title/5 — 작은 카드와 기능 제목 */
.typo-title-5 {
    --typo-size-pc: 22px;
    --typo-size-tablet: 20px;
    --typo-size-mobile: 18px;
    --typo-line-pc: 1.35;
    --typo-line-tablet: 1.35;
    --typo-line-mobile: 1.35;
    --typo-weight: 800;
    --typo-tracking: 0.015em;
}

/* Title/6 — 헤더 메가 메뉴와 작은 콘텐츠 타이틀 */
.typo-title-6 {
    --typo-size-pc: 20px;
    --typo-size-tablet: 20px;
    --typo-size-mobile: 18px;
    --typo-line-pc: 1.3;
    --typo-line-tablet: 1.3;
    --typo-line-mobile: 1.3;
    --typo-weight: 800;
    --typo-tracking: 0.015em;
}

/* Title/7 — 리스트, 설치사례, 가장 작은 콘텐츠 제목 */
.typo-title-7 {
    --typo-size-pc: 18px;
    --typo-size-tablet: 18px;
    --typo-size-mobile: 17px;
    --typo-line-pc: 1.35;
    --typo-line-tablet: 1.35;
    --typo-line-mobile: 1.35;
    --typo-weight: 800;
    --typo-tracking: 0.015em;
}

/* --------------------------------------------------------------------------
 * Body
 * --------------------------------------------------------------------------
 * 각 level은 기본, medium, strong이 동일한 크기와 행간을 공유한다.
 * 기본 500 / medium 600 / strong 700
 */

.typo-body-1,
.typo-body-1-medium,
.typo-body-1-strong {
    --typo-size-pc: 21px;
    --typo-size-tablet: 16px;
    --typo-size-mobile: 15px;
    --typo-line-pc: 1.6;
    --typo-line-tablet: 1.6;
    --typo-line-mobile: 1.65;
    --typo-tracking: 0.02em;
}

.typo-body-2,
.typo-body-2-medium,
.typo-body-2-strong {
    --typo-size-pc: 18px;
    --typo-size-tablet: 15px;
    --typo-size-mobile: 14px;
    --typo-line-pc: 1.6;
    --typo-line-tablet: 1.6;
    --typo-line-mobile: 1.65;
    --typo-tracking: 0.02em;
}

.typo-body-3,
.typo-body-3-medium,
.typo-body-3-strong {
    --typo-size-pc: 17px;
    --typo-size-tablet: 15px;
    --typo-size-mobile: 14px;
    --typo-line-pc: 1.7;
    --typo-line-tablet: 1.7;
    --typo-line-mobile: 1.65;
    --typo-tracking: 0.02em;
}

.typo-body-4,
.typo-body-4-medium,
.typo-body-4-strong {
    --typo-size-pc: 15px;
    --typo-size-tablet: 14px;
    --typo-size-mobile: 14px;
    --typo-line-pc: 1.7;
    --typo-line-tablet: 1.7;
    --typo-line-mobile: 1.65;
    --typo-tracking: 0.02em;
}

.typo-body-5,
.typo-body-5-medium,
.typo-body-5-strong {
    --typo-size-pc: 14px;
    --typo-size-tablet: 14px;
    --typo-size-mobile: 14px;
    --typo-line-pc: 1.55;
    --typo-line-tablet: 1.55;
    --typo-line-mobile: 1.55;
    --typo-tracking: 0.02em;
}

.typo-body-6,
.typo-body-6-medium,
.typo-body-6-strong {
    --typo-size-pc: 13px;
    --typo-size-tablet: 12px;
    --typo-size-mobile: 12px;
    --typo-line-pc: 1.5;
    --typo-line-tablet: 1.5;
    --typo-line-mobile: 1.5;
    --typo-tracking: 0.02em;
}

.typo-body-1,
.typo-body-2,
.typo-body-3,
.typo-body-4,
.typo-body-5,
.typo-body-6 {
    --typo-weight: 500;
}

.typo-body-1-medium,
.typo-body-2-medium,
.typo-body-3-medium,
.typo-body-4-medium,
.typo-body-5-medium,
.typo-body-6-medium {
    --typo-weight: 600;
}

.typo-body-1-strong,
.typo-body-2-strong,
.typo-body-3-strong,
.typo-body-4-strong,
.typo-body-5-strong,
.typo-body-6-strong {
    --typo-weight: 700;
}

/* --------------------------------------------------------------------------
 * Label
 * --------------------------------------------------------------------------
 * 메뉴, 버튼, 탭, 폼 라벨에 사용한다.
 * 기본 600 / medium 700 / strong 800
 *
 * 공통 헤더와 모바일 메뉴는 터치 화면에서도 판독 크기를 유지해야 하므로
 * 일반 본문보다 화면별 축소 폭을 작게 잡는다.
 */

.typo-label-1,
.typo-label-1-medium,
.typo-label-1-strong {
    --typo-size-pc: 18px;
    --typo-size-tablet: 18px;
    --typo-size-mobile: 16px;
    --typo-line-pc: 1.1;
    --typo-line-tablet: 1.1;
    --typo-line-mobile: 1.1;
    --typo-tracking: 0.01em;
}

.typo-label-2,
.typo-label-2-medium,
.typo-label-2-strong {
    --typo-size-pc: 16px;
    --typo-size-tablet: 16px;
    --typo-size-mobile: 16px;
    --typo-line-pc: 1.35;
    --typo-line-tablet: 1.35;
    --typo-line-mobile: 1.35;
    --typo-tracking: 0.01em;
}

.typo-label-3,
.typo-label-3-medium,
.typo-label-3-strong {
    --typo-size-pc: 15px;
    --typo-size-tablet: 15px;
    --typo-size-mobile: 14px;
    --typo-line-pc: 1.5;
    --typo-line-tablet: 1.5;
    --typo-line-mobile: 1.5;
    --typo-tracking: 0.01em;
}

.typo-label-4,
.typo-label-4-medium,
.typo-label-4-strong {
    --typo-size-pc: 14px;
    --typo-size-tablet: 14px;
    --typo-size-mobile: 14px;
    --typo-line-pc: 1.4;
    --typo-line-tablet: 1.4;
    --typo-line-mobile: 1.4;
    --typo-tracking: 0.01em;
}

.typo-label-5,
.typo-label-5-medium,
.typo-label-5-strong {
    --typo-size-pc: 13px;
    --typo-size-tablet: 13px;
    --typo-size-mobile: 12px;
    --typo-line-pc: 1.5;
    --typo-line-tablet: 1.5;
    --typo-line-mobile: 1.5;
    --typo-tracking: 0.01em;
}

.typo-label-6,
.typo-label-6-medium,
.typo-label-6-strong {
    --typo-size-pc: 12px;
    --typo-size-tablet: 12px;
    --typo-size-mobile: 11px;
    --typo-line-pc: 1.2;
    --typo-line-tablet: 1.2;
    --typo-line-mobile: 1.2;
    --typo-tracking: 0.01em;
}

.typo-label-1,
.typo-label-2,
.typo-label-3,
.typo-label-4,
.typo-label-5,
.typo-label-6 {
    --typo-weight: 600;
}

.typo-label-1-medium,
.typo-label-2-medium,
.typo-label-3-medium,
.typo-label-4-medium,
.typo-label-5-medium,
.typo-label-6-medium {
    --typo-weight: 700;
}

.typo-label-1-strong,
.typo-label-2-strong,
.typo-label-3-strong,
.typo-label-4-strong,
.typo-label-5-strong,
.typo-label-6-strong {
    --typo-weight: 800;
}

/* --------------------------------------------------------------------------
 * Caption
 * --------------------------------------------------------------------------
 * 날짜, 메타 정보, 각주, 법적 안내에 사용한다.
 * 기본 500 / medium 600 / strong 700
 */

.typo-caption-1,
.typo-caption-1-medium,
.typo-caption-1-strong {
    --typo-size-pc: 13px;
    --typo-size-tablet: 12px;
    --typo-size-mobile: 11px;
    --typo-line-pc: 1.5;
    --typo-line-tablet: 1.5;
    --typo-line-mobile: 1.5;
    --typo-tracking: 0.01em;
}

.typo-caption-2,
.typo-caption-2-medium,
.typo-caption-2-strong {
    --typo-size-pc: 12px;
    --typo-size-tablet: 11px;
    --typo-size-mobile: 11px;
    --typo-line-pc: 1.5;
    --typo-line-tablet: 1.5;
    --typo-line-mobile: 1.5;
    --typo-tracking: 0.01em;
}

.typo-caption-3,
.typo-caption-3-medium,
.typo-caption-3-strong {
    --typo-size-pc: 12px;
    --typo-size-tablet: 11px;
    --typo-size-mobile: 10px;
    --typo-line-pc: 1.5;
    --typo-line-tablet: 1.5;
    --typo-line-mobile: 1.5;
    --typo-tracking: 0.01em;
}

.typo-caption-4,
.typo-caption-4-medium,
.typo-caption-4-strong {
    --typo-size-pc: 11px;
    --typo-size-tablet: 11px;
    --typo-size-mobile: 10px;
    --typo-line-pc: 1.5;
    --typo-line-tablet: 1.5;
    --typo-line-mobile: 1.5;
    --typo-tracking: 0.01em;
}

.typo-caption-1,
.typo-caption-2,
.typo-caption-3,
.typo-caption-4 {
    --typo-weight: 500;
}

.typo-caption-1-medium,
.typo-caption-2-medium,
.typo-caption-3-medium,
.typo-caption-4-medium {
    --typo-weight: 600;
}

.typo-caption-1-strong,
.typo-caption-2-strong,
.typo-caption-3-strong,
.typo-caption-4-strong {
    --typo-weight: 700;
}

/* --------------------------------------------------------------------------
 * Metric
 * --------------------------------------------------------------------------
 * 숫자나 짧은 단어를 크게 강조할 때만 사용한다.
 * 긴 문장에는 display 또는 heading을 사용한다.
 */

/* Metric/1 — 가격 또는 핵심 수치의 최상위 숫자 */
.typo-metric-1 {
    --typo-size-pc: 99px;
    --typo-size-tablet: 68px;
    --typo-size-mobile: 54px;
    --typo-line-pc: 0.92;
    --typo-line-tablet: 0.95;
    --typo-line-mobile: 1;
    --typo-weight: 900;
    --typo-tracking: 0;
}

/* Metric/2 — 가격 문구 또는 대형 수치 */
.typo-metric-2 {
    --typo-size-pc: 83px;
    --typo-size-tablet: 60px;
    --typo-size-mobile: 46px;
    --typo-line-pc: 1;
    --typo-line-tablet: 1;
    --typo-line-mobile: 1;
    --typo-weight: 900;
    --typo-tracking: 0;
}

/* Metric/3 — 강조 메시지와 중대형 숫자 */
.typo-metric-3 {
    --typo-size-pc: 54px;
    --typo-size-tablet: 46px;
    --typo-size-mobile: 34px;
    --typo-line-pc: 1.1;
    --typo-line-tablet: 1.1;
    --typo-line-mobile: 1.1;
    --typo-weight: 900;
    --typo-tracking: 0;
}

/* Metric/4 — 실적, 순위, 통계 수치 */
.typo-metric-4 {
    --typo-size-pc: 46px;
    --typo-size-tablet: 38px;
    --typo-size-mobile: 28px;
    --typo-line-pc: 1.2;
    --typo-line-tablet: 1.2;
    --typo-line-mobile: 1.2;
    --typo-weight: 900;
    --typo-tracking: 0;
}

/* Metric/5 — 패널 순번과 보조 수치 */
.typo-metric-5 {
    --typo-size-pc: 42px;
    --typo-size-tablet: 36px;
    --typo-size-mobile: 28px;
    --typo-line-pc: 1;
    --typo-line-tablet: 1;
    --typo-line-mobile: 1;
    --typo-weight: 800;
    --typo-tracking: 0;
}

/* ── content-pattern.css (gts2) ── */
/**
 * GTS2 반복 콘텐츠 패턴
 * 적용 범위: 리뉴얼 제품 및 도입·창업 하위 페이지 7개
 *
 * 모든 패턴은 페이지별 선택 적용 방식입니다. 페이지 전용 클래스를 직접
 * 선택하지 않으므로 해당 gts-pattern-* 클래스를 추가하기 전에는 화면이
 * 바뀌지 않습니다. 진행 절차 패턴을 제외한 그리드, 열 수, 섹션 구성은
 * 기존 페이지 스타일에서 계속 관리합니다.
 *
 * design-system.css를 먼저 불러와야 합니다.
 */

/* --------------------------------------------------------------------------
   1. 제품 제원 항목 표현
   제원 컨테이너의 열 수, 너비, 간격과 배치는 제어하지 않습니다.
   -------------------------------------------------------------------------- */

.gts-pattern-spec-item > strong {
    display: block;
    padding-bottom: var(--gts-spec-label-space, 11px);
    border-bottom: 1px solid var(--gts-spec-border, var(--gts-color-border, #dfe5ea));
    color: var(--gts-spec-label-color, var(--gts-color-primary, #1686dd));
    font-size: var(--gts-spec-label-size, var(--gts-fs-14, 14px));
    font-weight: var(--gts-spec-label-weight, var(--gts-fw-900, 900));
    line-height: var(--gts-spec-label-line-height, 1.4);
}

.gts-pattern-spec-item > span,
.gts-pattern-spec-item > p {
    display: block;
    margin: var(--gts-spec-value-space, 11px) 0 0;
    color: var(--gts-spec-value-color, var(--gts-supporting-color, #777));
    font-size: var(--gts-spec-value-size, var(--gts-fs-13, 13px));
    font-weight: var(--gts-spec-value-weight, var(--gts-supporting-weight, 600));
    line-height: var(--gts-spec-value-line-height, 1.55);
}

/* --------------------------------------------------------------------------
   2. 제품 이미지 프레임과 공용 이전·다음 버튼
   제품과 제원 영역의 전체 배치는 각 페이지에 유지합니다.
   -------------------------------------------------------------------------- */

.gts-pattern-product-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--gts-product-stage-height, 430px);
    overflow: hidden;
    border-radius: var(--gts-product-stage-radius, var(--gts-radius, 4px));
    background: var(--gts-product-stage-bg, var(--gts-color-surface-product, #f6f7f9));
}

.gts-pattern-product-stage > img {
    display: block;
    max-width: var(--gts-product-image-max-width, 78%);
    max-height: var(--gts-product-image-max-height, 78%);
    object-fit: contain;
}

.gts-pattern-nav {
    position: absolute;
    z-index: var(--gts-pattern-nav-z, 5);
    top: 50%;
    width: var(--gts-pattern-nav-size, 32px);
    height: var(--gts-pattern-nav-size, 32px);
    padding: 0;
    border: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transform: translateY(-50%);
    cursor: pointer;
}

.gts-pattern-nav--prev {
    left: var(--gts-pattern-nav-offset, 14px);
    background-image: url("../assets/imges/common/slide_prev.png");
}

.gts-pattern-nav--next {
    right: var(--gts-pattern-nav-offset, 14px);
    background-image: url("../assets/imges/common/slide_next.png");
}

/* --------------------------------------------------------------------------
   3. 콘텐츠·매장·시설 영역의 가로 확장 슬라이더
   반복되는 PC 719px, 태블릿 620px, 모바일 화면 폭 기준을 사용합니다.
   슬라이드 캡션 폰트는 각 페이지에서 관리합니다.
   -------------------------------------------------------------------------- */

.gts-pattern-bleed-slider {
    margin-top: var(--gts-bleed-slider-margin, 48px);
    overflow: visible;
}

.gts-pattern-bleed-slider > .swiper-wrapper {
    height: auto !important;
    align-items: stretch;
}

.gts-pattern-bleed-slider > .swiper-wrapper > .swiper-slide {
    width: var(--gts-bleed-slide-width, 719px);
    min-width: var(--gts-bleed-slide-width, 719px);
    height: auto !important;
}

.gts-pattern-slide-media {
    display: block;
    width: 100%;
    aspect-ratio: var(--gts-slide-media-ratio, 719 / 350);
    border-radius: var(--gts-slide-media-radius, var(--gts-radius, 4px));
    background: var(--gts-slide-media-bg, var(--gts-color-surface-media, #eef0f3));
    object-fit: cover;
}

.gts-pattern-dots {
    display: flex;
    justify-content: center;
    gap: var(--gts-pattern-dot-gap, 10px);
    margin-top: var(--gts-pattern-dot-margin, 28px);
    line-height: 1;
}

.gts-pattern-dots .swiper-pagination-bullet {
    width: var(--gts-pattern-dot-size, 10px);
    height: var(--gts-pattern-dot-size, 10px);
    margin: 0 !important;
    border-radius: 50%;
    background: var(--gts-pattern-dot-color, #d1d1d1);
    opacity: 1;
}

.gts-pattern-dots .swiper-pagination-bullet-active {
    background: var(--gts-pattern-dot-active-color, var(--gts-color-primary, #1686dd));
}

/* --------------------------------------------------------------------------
   4. 도입·창업 진행 절차
   도입·창업 3개 페이지가 모두 동일한 PC 6열, 태블릿 3열,
   모바일 2열 구조를 사용하므로 이 패턴만 반응형 열 수를 관리합니다.
   -------------------------------------------------------------------------- */

.gts-pattern-process {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--gts-process-gap, 12px);
    margin-top: var(--gts-process-margin, 40px);
}

.gts-pattern-process-item {
    padding: var(--gts-process-item-padding, 24px 12px);
    border-radius: var(--gts-process-item-radius, var(--gts-radius, 4px));
    background: var(--gts-process-item-bg, var(--gts-color-surface, #f7f8fa));
    text-align: center;
}

.gts-pattern-process-item > em {
    display: block;
    color: var(--gts-process-number-color, var(--gts-color-primary, #1686dd));
    font-size: var(--gts-process-number-size, var(--gts-fs-14, 14px));
    font-style: normal;
    font-weight: var(--gts-process-number-weight, var(--gts-fw-900, 900));
}

.gts-pattern-process-item > strong {
    display: block;
    margin-top: var(--gts-process-title-space, 10px);
    color: var(--gts-process-title-color, var(--gts-heading-color, #111));
    font-size: var(--gts-process-title-size, var(--gts-fs-20, 20px));
    font-weight: var(--gts-process-title-weight, var(--gts-fw-900, 900));
    line-height: var(--gts-process-title-line-height, 1.35);
}

.gts-pattern-process-item > span,
.gts-pattern-process-item > p {
    display: block;
    margin: var(--gts-process-desc-space, 10px) 0 0;
    color: var(--gts-process-desc-color, var(--gts-supporting-color, #777));
    font-size: var(--gts-process-desc-size, var(--gts-fs-12, 12px));
    font-weight: var(--gts-process-desc-weight, var(--gts-supporting-weight, 600));
    line-height: var(--gts-process-desc-line-height, 1.55);
}

/* --------------------------------------------------------------------------
   5. 정보 카드 표현
   카드 그리드와 반응형 열 수는 각 페이지에서 관리합니다.
   -------------------------------------------------------------------------- */

.gts-pattern-info-card {
    min-height: var(--gts-info-card-min-height, 190px);
    padding: var(--gts-info-card-padding, 38px 24px);
    border: var(--gts-info-card-border, 0);
    border-radius: var(--gts-info-card-radius, var(--gts-radius, 4px));
    background: var(--gts-info-card-bg, var(--gts-color-surface, #f7f8fa));
    text-align: var(--gts-info-card-align, center);
}

.gts-pattern-info-card > strong {
    display: block;
    color: var(--gts-info-card-title-color, var(--gts-color-primary, #1686dd));
    font-size: var(--gts-info-card-title-size, var(--gts-fs-20, 20px));
    font-weight: var(--gts-info-card-title-weight, var(--gts-fw-900, 900));
    line-height: var(--gts-info-card-title-line-height, 1.35);
}

.gts-pattern-info-card > span,
.gts-pattern-info-card > p {
    display: block;
    margin: var(--gts-info-card-desc-space, 20px) 0 0;
    color: var(--gts-info-card-desc-color, var(--gts-supporting-color, #777));
    font-size: var(--gts-info-card-desc-size, var(--gts-fs-13, 13px));
    font-weight: var(--gts-info-card-desc-weight, var(--gts-supporting-weight, 600));
    line-height: var(--gts-info-card-desc-line-height, 1.65);
}

/* --------------------------------------------------------------------------
   6. 수치 및 실적 항목 표현
   수치 영역의 컨테이너와 열 수는 각 페이지에서 관리합니다.
   -------------------------------------------------------------------------- */

.gts-pattern-metric {
    padding: var(--gts-metric-padding, 26px 14px);
    text-align: center;
}

.gts-pattern-metric > strong {
    display: block;
    color: var(--gts-metric-title-color, var(--gts-heading-color, #111));
    font-size: var(--gts-metric-title-size, var(--gts-fs-28, 28px));
    font-weight: var(--gts-metric-title-weight, var(--gts-fw-900, 900));
    line-height: var(--gts-metric-title-line-height, 1.25);
}

.gts-pattern-metric > span,
.gts-pattern-metric > p {
    display: block;
    margin: var(--gts-metric-desc-space, 8px) 0 0;
    color: var(--gts-metric-desc-color, var(--gts-supporting-color, #777));
    font-size: var(--gts-metric-desc-size, var(--gts-fs-13, 13px));
    font-weight: var(--gts-metric-desc-weight, var(--gts-supporting-weight, 600));
    line-height: var(--gts-metric-desc-line-height, 1.55);
}

/* --------------------------------------------------------------------------
   7. 이미지 캡션과 공공 신뢰 로고 행
   상위 이미지 및 설치 유형 그리드는 각 페이지에서 관리합니다.
   -------------------------------------------------------------------------- */

.gts-pattern-media-caption {
    margin-top: var(--gts-media-caption-margin, 18px);
    text-align: center;
}

.gts-pattern-media-caption > strong {
    display: block;
    color: var(--gts-media-caption-title-color, var(--gts-heading-color, #111));
    font-size: var(--gts-media-caption-title-size, var(--gts-fs-18, 18px));
    font-weight: var(--gts-media-caption-title-weight, var(--gts-fw-900, 900));
    line-height: 1.35;
}

.gts-pattern-media-caption > span,
.gts-pattern-media-caption > p {
    display: block;
    margin: var(--gts-media-caption-desc-space, 8px) 0 0;
    color: var(--gts-media-caption-desc-color, var(--gts-supporting-color, #777));
    font-size: var(--gts-media-caption-desc-size, var(--gts-fs-13, 13px));
    font-weight: var(--gts-media-caption-desc-weight, var(--gts-supporting-weight, 600));
    line-height: 1.55;
}

.gts-pattern-logo-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gts-logo-row-gap, 44px);
    margin: var(--gts-logo-row-margin, 34px 0 44px);
}

.gts-pattern-logo-row > img {
    width: auto;
    max-height: var(--gts-logo-max-height, 58px);
}

/* --------------------------------------------------------------------------
   8. 제품 하위페이지 4개 상단배너 컨텐츠
   시그니처·파크골프·GOLF24·골프타운 제품 상세 4개 페이지의 첫 화면(히어로)
   공통 레이아웃입니다. 배경 이미지와 등장 효과는 gtsn-reveal.css의
   .gtsn-hero / .gtsn-hero-bg가, 타이틀·서브텍스트 폰트는 design-system.css의
   .gts-type-hero / .gts-type-hero-desc가 담당합니다.
   버튼 색과 모양(.xxx-btn), 타이틀 크기 변수는 각 페이지에서 관리합니다.
   -------------------------------------------------------------------------- */

/* 배경 이미지를 담는 풀블리드 히어로 박스 */
.gts-pattern-hero {
    position: relative;
    height: var(--gts-hero-height, 640px);
    min-height: var(--gts-hero-height, 640px);
    padding: 0;
    overflow: hidden;
    color: var(--gts-hero-color, #fff);
}

/* 타이틀·서브텍스트·버튼을 위에서부터 가운데 정렬로 쌓는 래퍼 */
.gts-pattern-hero-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: var(--gts-hero-copy-top, 148px);
    text-align: center;
}

/* 서브텍스트 (타이틀 아래 한 줄 설명) */
.gts-pattern-hero-copy > p {
    margin: var(--gts-hero-desc-space, 24px) 0 0;
}

/* 버튼 줄 (버튼 자체 색·모양은 페이지별 .xxx-btn에서 정의) */
.gts-pattern-hero-actions {
    display: flex;
    justify-content: center;
    gap: var(--gts-hero-actions-gap, 12px);
    margin-top: var(--gts-hero-actions-space, 34px);
}

/* --------------------------------------------------------------------------
   9. 기존 페이지에서 확인한 반응형 처리
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    /* 상단배너: 태블릿 높이·컨텐츠 시작 위치 */
    .gts-pattern-hero {
        height: var(--gts-hero-height-tablet, 600px);
        min-height: var(--gts-hero-height-tablet, 600px);
    }

    .gts-pattern-hero-copy {
        padding-top: var(--gts-hero-copy-top-tablet, 132px);
    }

    .gts-pattern-bleed-slider > .swiper-wrapper > .swiper-slide {
        width: var(--gts-bleed-slide-width-tablet, 620px);
        min-width: var(--gts-bleed-slide-width-tablet, 620px);
    }

    .gts-pattern-process {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    /* 상단배너: 모바일 높이·컨텐츠 시작 위치(태블릿과 같은 비율로 내림) */
    .gts-pattern-hero {
        height: var(--gts-hero-height-mobile, 540px);
        min-height: var(--gts-hero-height-mobile, 540px);
    }

    .gts-pattern-hero-copy {
        padding-top: var(--gts-hero-copy-top-mobile, 136px);
    }

    .gts-pattern-hero-copy > p {
        margin-top: var(--gts-hero-desc-space-mobile, 18px);
    }

    .gts-pattern-hero-actions {
        flex-wrap: wrap;
        gap: var(--gts-hero-actions-gap-mobile, 10px);
        margin-top: var(--gts-hero-actions-space-mobile, 28px);
    }

    .gts-pattern-product-stage {
        position: relative;
        height: auto;
        aspect-ratio: var(--gts-product-stage-ratio-mobile, 4 / 3);
    }

    .gts-pattern-product-stage::before {
        content: "";
        display: block;
        flex: 0 0 auto;
        padding-top: 75%;
    }

    .gts-pattern-product-stage > img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: var(--gts-product-image-max-width, 78%);
        height: var(--gts-product-image-max-height, 78%);
        max-width: none;
        max-height: none;
        transform: translate(-50%, -50%);
        object-fit: contain;
    }

    .gts-pattern-nav {
        width: var(--gts-pattern-nav-size-mobile, 26px);
        height: var(--gts-pattern-nav-size-mobile, 26px);
    }

    .gts-pattern-nav--prev {
        left: var(--gts-pattern-nav-offset-mobile, 8px);
    }

    .gts-pattern-nav--next {
        right: var(--gts-pattern-nav-offset-mobile, 8px);
    }

    .gts-pattern-bleed-slider {
        margin-top: var(--gts-bleed-slider-margin-mobile, 34px);
    }

    .gts-pattern-bleed-slider > .swiper-wrapper > .swiper-slide {
        width: var(--gts-bleed-slide-width-mobile, calc(100vw - 32px));
        min-width: var(--gts-bleed-slide-width-mobile, calc(100vw - 32px));
    }

    .gts-pattern-process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--gts-process-gap-mobile, 8px);
        margin-top: var(--gts-process-margin-mobile, 32px);
    }

    .gts-pattern-process-item {
        padding: var(--gts-process-item-padding-mobile, 22px 8px);
    }

    .gts-pattern-process-item > strong {
        font-size: var(--gts-process-title-size-mobile, var(--gts-process-title-size, 18px));
    }

    .gts-pattern-info-card {
        min-height: var(--gts-info-card-min-height-mobile, 0);
        padding: var(--gts-info-card-padding-mobile, 30px 20px);
    }

    .gts-pattern-metric {
        padding: var(--gts-metric-padding-mobile, 22px 8px);
    }

    .gts-pattern-metric > strong {
        font-size: var(--gts-metric-title-size-mobile, var(--gts-metric-title-size, 25px));
    }

    .gts-pattern-logo-row {
        flex-wrap: wrap;
        gap: var(--gts-logo-row-gap-mobile, 20px 28px);
        margin: var(--gts-logo-row-margin-mobile, 30px 0 34px);
    }

    .gts-pattern-logo-row > img {
        max-width: var(--gts-logo-max-width-mobile, 44%);
        max-height: var(--gts-logo-max-height-mobile, 46px);
    }
}

/* ── gtsn-reveal.css (gts2) ── */
.gtsn-hero-bg { position:absolute; inset:0; background:var(--hero-bg) center center/cover no-repeat; opacity:0; transform:translate3d(0, 34px, 0); transition:opacity 1.05s cubic-bezier(.19,1,.22,1), transform 1.05s cubic-bezier(.19,1,.22,1); will-change:opacity, transform; }
.gtsn-hero.is-loaded .gtsn-hero-bg { opacity:1; transform:translate3d(0, 0, 0); }
.gtsn-hero-bg:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.12) 45%, rgba(0,0,0,.2)); opacity:0; transition:opacity .55s ease .25s; }
.intro-golf24-page .gtsn-hero-bg:after { background:rgba(0,0,0,.6); }
.intro-apt-page .gtsn-hero-bg:after,
.intro-park-page .gtsn-hero-bg:after,
.intro-proc-page .gtsn-hero-bg:after { background:rgba(0,0,0,.87); }
.gtsn-hero.is-loaded .gtsn-hero-bg:after { opacity:1; }

.gtsn-reveal { opacity:0; transform:translate3d(0, 26px, 0); filter:blur(4px); transition:opacity .9s cubic-bezier(.19,1,.22,1), transform .9s cubic-bezier(.19,1,.22,1), filter .9s cubic-bezier(.19,1,.22,1); transition-delay:var(--reveal-delay, 0ms); will-change:opacity, transform, filter; }
.gtsn-reveal.is-visible { opacity:1; transform:translate3d(0, 0, 0); filter:blur(0); }

@media (max-width:640px) {
    .gtsn-hero > :not(.gtsn-hero-bg) {
        padding-left:24px;
        padding-right:24px;
    }
}