@charset "utf-8";

/* ==========================================================================
   GBSNC (지비에스앤씨) 공식 홈페이지 스타일시트
   --------------------------------------------------------------------------
   - 시안 : Figma "HOME / F" 확정안 기준
   - 구성 : 01 폰트 → 02 디자인 토큰 → 03 리셋 → 04 공통 레이아웃
            → 05 공통 컴포넌트 → 06 섹션별 스타일 → 07 애니메이션
            → 08 반응형 → 09 접근성
   - 규칙 : 인라인 스타일 사용 금지, 모든 색상/간격 값은 :root 토큰 사용
   ========================================================================== */


/* ==========================================================================
   01. 웹폰트
   ========================================================================== */

/* 영문·숫자 전용 서체 (Inter) — 쓰는 굵기만 불러온다 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap");

/* --------------------------------------------------------------------------
   본문 서체 : Pretendard
   - 이 스타일시트에서 실제로 쓰는 굵기 5종만 등록한다.
     400 본문 · 500 보조 강조 · 600 GNB · 700 제목/강조 · 900 대제목/지표
   - font-display: swap 으로 웹폰트 로딩 중에도 텍스트가 바로 보이게 한다.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

/* ==========================================================================
   02. 디자인 토큰 (Design Tokens)
   - 브랜드 컬러는 GB S&C 로고에서 추출한 값을 그대로 사용한다.
   - 로고 블루(#0080cb)를 주색, 로고 연두(#a6cc44)를 포인트로 운용한다.
   ========================================================================== */

:root {
  /* ----- 브랜드 컬러 ----- */
  --color-blue: #0080cb;              /* 주색 : 버튼·링크·아이콘·지표 */
  --color-blue-dark: #0a4a72;         /* 딥 블루 : 그라디언트 끝단·강조 */
  --color-blue-deep: #0a3d63;         /* 썸네일 그라디언트용 */
  --color-green: #a6cc44;             /* 포인트 : CTA 그라디언트·구간 강조 */
  --color-green-ink: #6b8a1e;         /* 연두 계열 텍스트(가독성 확보용) */

  /* ----- 중립 컬러 ----- */
  --color-ink: #171424;               /* 헤딩 텍스트 */
  --color-slate: #6b7280;             /* 본문 텍스트 */
  --color-muted: #9aa8b8;             /* 보조 텍스트 */
  --color-border: #dce8f2;            /* 구분선·카드 테두리 */
  --color-white: #ffffff;

  /* ----- 배경 컬러 (섹션 밴드 교차용) ----- */
  --color-bg-tint: #f4f9fc;           /* 섹션 배경 1 */
  --color-bg-tint2: #e9f3fb;          /* 섹션 배경 2 */
  --color-bg-chip: #e0f0fa;           /* eyebrow 칩 배경 */
  --color-bg-chip-green: #f0f7de;     /* 연두 칩 배경 */
  --color-bg-dark: #191c25;           /* 다크 밴드 */
  --color-bg-dark-soft: #232733;      /* 다크 밴드 위 카드 */

  /* ----- 다크 배경 위 텍스트 ----- */
  --color-on-dark: #ffffff;
  --color-on-dark-muted: #b4becd;
  --color-on-dark-accent: #7cc4f0;    /* 다크 위 블루(대비 확보) */

  /* ----- 그라디언트 ----- */
  --gradient-brand: linear-gradient(120deg, var(--color-blue) 0%, var(--color-green) 100%);
  --gradient-hero: linear-gradient(180deg, var(--color-bg-tint2) 0%, var(--color-white) 100%);
  --gradient-hero-sub: linear-gradient(90deg, var(--color-bg-tint2) 0%, var(--color-white) 100%);
  --gradient-thumb: linear-gradient(150deg, #193d71 0%, #0e1b37 100%);
  --gradient-thumb-alt: linear-gradient(150deg, var(--color-blue-dark) 0%, #0a1f33 100%);

  /* ----- 타이포그래피 ----- */
  --font-base: "Pretendard", "맑은 고딕", "Malgun Gothic", sans-serif;
  --font-en: "Inter", "Pretendard", "맑은 고딕", "Malgun Gothic", sans-serif;

  --fs-display: 3.125rem;   /* 50px : 히어로 헤드라인 */
  --fs-h1: 2.125rem;        /* 34px : 섹션 타이틀 */
  --fs-h2: 1.875rem;        /* 30px : 지그재그·CTA 타이틀 */
  --fs-h3: 1.625rem;        /* 26px : 서브 타이틀 */
  --fs-h4: 1.375rem;        /* 22px : 카드 대제목 */
  --fs-card: 1.1875rem;     /* 19px : 카드 제목 */
  --fs-lg: 1.0625rem;       /* 17px : 강조 본문 */
  --fs-body: 0.9375rem;     /* 15px : 기본 본문 */
  --fs-sm: 0.875rem;        /* 14px : 보조 본문 */
  --fs-xs: 0.8125rem;       /* 13px : 캡션 */
  --fs-eyebrow: 0.6875rem;  /* 11px : 섹션 라벨 */

  --lh-tight: 1.2;
  --lh-heading: 1.35;
  --lh-body: 1.65;

  /* ----- 레이아웃 ----- */
  --container-max: 1312px;  /* 콘텐츠 최대 폭 (1440 캔버스 - 좌우 64) */
  --gutter: 64px;           /* 좌우 여백 */
  --section-py: 88px;       /* 섹션 상하 여백 */
  --header-h: 84px;         /* 헤더 높이 */

  /* ----- 간격 스케일 ----- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 72px;

  /* ----- 모서리 반경 ----- */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-pill: 999px;

  /* ----- 그림자 ----- */
  --shadow-sm: 0 2px 8px rgba(16, 42, 67, 0.05);
  --shadow-md: 0 10px 30px rgba(16, 42, 67, 0.08);
  --shadow-lg: 0 20px 50px rgba(16, 42, 67, 0.12);

  /* ----- 모션 ----- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.4s;
  --dur-slow: 0.8s;

  /* ----- z-index 관리 ----- */
  --z-header: 100;
  --z-progress: 110;
  --z-drawer: 120;
}


/* ==========================================================================
   03. 리셋 & 기본 요소
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h); /* 앵커 이동 시 헤더에 가리지 않도록 보정 */
  overflow-x: hidden;                  /* 등장 애니메이션 대기 요소로 인한 가로 스크롤 차단 */
  /* 우측 스크롤바를 브랜드 컬러로 (Firefox) */
  scrollbar-color: var(--color-blue) var(--color-bg-tint);
  scrollbar-width: thin;
}

/* 우측 스크롤바 (Chrome · Edge · Safari) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background-color: var(--color-bg-tint);
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-blue);
  background-clip: content-box;        /* 트랙과 사이를 띄워 얇은 막대처럼 보이게 한다 */
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-blue-dark);
}

::-webkit-scrollbar-corner {
  background-color: var(--color-bg-tint);
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-body);
  letter-spacing: -0.025em;
  line-height: var(--lh-body);
  color: var(--color-ink);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* body 에는 overflow-x 를 걸지 않는다.
     body 가 스크롤 컨테이너가 되면 헤더의 position:sticky 가 뷰포트가 아닌
     body 박스를 기준으로 잡혀 상단 고정이 풀린다. 가로 스크롤 차단은
     위의 html 규칙만으로 충분하다. */
}

/* dl/dt/dd 도 함께 초기화한다.
   브라우저 기본값이 dd 에 margin-inline-start: 40px 를 주기 때문에
   지표(값/설명) 묶음에서 설명 줄만 오른쪽으로 밀려 정렬이 어긋난다. */
h1,
h2,
h3,
h4,
p,
figure,
ul,
ol,
dl,
dt,
dd {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* 화면에는 보이지 않지만 스크린리더에는 읽히는 텍스트 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 키보드 포커스 링 (접근성) */
:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}


/* ==========================================================================
   04. 공통 레이아웃
   ========================================================================== */

/* 콘텐츠 가운데 정렬 컨테이너 */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* 섹션 기본 : 상하 여백만 담당하고 배경은 변형 클래스로 제어 */
.section {
  padding-block: var(--section-py);
}

/* ----- 섹션 배경 밴드 (흰색 ↔ 틴트 교차로 스크롤 리듬 형성) ----- */
.section--tint {
  background-color: var(--color-bg-tint);
}

.section--tint2 {
  background-color: var(--color-bg-tint2);
}

.section--dark {
  position: relative;
  color: var(--color-on-dark);
  background-color: var(--color-bg-dark);
}

/* 다크 밴드 안에서는 본문 색상을 반전 */
.section--dark .section-header__title {
  color: var(--color-on-dark);
}

.section--dark .section-header__desc {
  color: var(--color-on-dark-muted);
}


/* ==========================================================================
   05. 공통 컴포넌트
   ========================================================================== */

/* --------------------------------------------------------------------------
   5-1. Eyebrow 칩 : 섹션 라벨
   -------------------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-family: var(--font-en);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-blue);
  background-color: var(--color-bg-chip);
  border-radius: var(--radius-pill);
}

/* 연두 포인트 칩 */
.chip--accent {
  color: var(--color-green-ink);
  background-color: var(--color-bg-chip-green);
}

/* 다크 배경 위 칩 */
.chip--on-dark {
  color: var(--color-on-dark-accent);
  background-color: rgba(124, 196, 240, 0.14);
}

/* --------------------------------------------------------------------------
   5-2. 버튼
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  padding: 15px 24px;
  font-size: var(--fs-body);
  font-weight: 700;
  border-radius: var(--radius-md);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}

/* 마우스를 올리면 살짝 떠오르는 반응 */
.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

/* 화살표는 hover 시 오른쪽으로 미끄러진다 */
.btn__arrow {
  transition: transform var(--dur-fast) var(--ease-out);
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

/* 주 버튼 : 로고 블루 배경 */
.btn--primary {
  color: var(--color-white);
  background-color: var(--color-blue);
  box-shadow: 0 6px 16px rgba(0, 128, 203, 0.25);
}

.btn--primary:hover {
  background-color: #0072b6;
  box-shadow: 0 10px 24px rgba(0, 128, 203, 0.32);
}

/* 보조 버튼 : 흰 배경 + 테두리 */
.btn--secondary {
  color: var(--color-ink);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
}

.btn--secondary:hover {
  border-color: var(--color-blue);
  box-shadow: var(--shadow-sm);
}

/* 컬러 배경 위 반전 버튼 */
.btn--inverse {
  color: var(--color-blue);
  background-color: var(--color-white);
}

/* 컬러 배경 위 아웃라인 버튼 */
.btn--outline {
  color: var(--color-white);
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.btn--outline:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

/* 헤더 전용 소형 버튼 */
.btn--sm {
  padding: 11px 18px;
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   5-3. 섹션 헤더 (칩 + 타이틀 + 설명)
   - 좌측 정렬과 가운데 정렬을 섹션마다 번갈아 사용해 나열감을 줄인다.
   -------------------------------------------------------------------------- */

.section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
  max-width: 720px;
  margin-bottom: var(--space-8);
}

.section-header--center {
  align-items: center;
  margin-inline: auto;
  text-align: center;
}

.section-header__title {
  font-size: var(--fs-h1);
  font-weight: 900;
  line-height: var(--lh-heading);
  color: var(--color-ink);
}

.section-header__desc {
  font-size: var(--fs-body);
  color: var(--color-slate);
}

/* --------------------------------------------------------------------------
   5-4. 카드 공통
   -------------------------------------------------------------------------- */

.card {
  padding: var(--space-6);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

/* 카드 hover : 살짝 떠오르며 테두리에 브랜드 컬러가 스며든다 */
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 128, 203, 0.35);
  box-shadow: var(--shadow-md);
}

.card__title {
  margin-bottom: var(--space-3);
  font-size: var(--fs-card);
  font-weight: 700;
  line-height: var(--lh-heading);
}
.icon-badge + .card__title {
  margin-top: var(--space-3);
}

.card__desc {
  font-size: var(--fs-sm);
  color: var(--color-slate);
}

/* --------------------------------------------------------------------------
   5-5. 아이콘 뱃지
   -------------------------------------------------------------------------- */

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--color-blue);
  background-color: var(--color-bg-chip);
  border-radius: var(--radius-lg);
  transition: transform var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}

/* 카드에 hover 하면 아이콘이 함께 반응한다 */
.card:hover .icon-badge {
  /* transform: scale(1.08) rotate(-4deg); */
  background-color: var(--color-blue);
  color: var(--color-white);
}

.icon-badge svg {
  width: 24px;
  height: 24px;
}

/* --------------------------------------------------------------------------
   5-6. 불릿 리스트
   -------------------------------------------------------------------------- */

.bullet-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bullet-list__item {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-ink);
}

.bullet-list__item::before {
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 6px;
  height: 6px;
  background-color: var(--color-blue);
  border-radius: 50%;
  content: "";
}

/* 연두 불릿 변형 */
.bullet-list--accent .bullet-list__item::before {
  background-color: var(--color-green);
}

/* --------------------------------------------------------------------------
   5-7. 통계 타일
   -------------------------------------------------------------------------- */

.stat-tile {
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.stat-tile__label {
  font-size: var(--fs-eyebrow);
  color: var(--color-slate);
}

.stat-tile__value {
  font-size: 1.125rem;
  font-weight: 900;
  color: var(--color-ink);
}


/* ==========================================================================
   06. 섹션별 스타일
   ========================================================================== */

/* --------------------------------------------------------------------------
   6-1. 스크롤 진행 표시줄 (페이지 상단 고정)
   -------------------------------------------------------------------------- */

.scroll-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: var(--z-progress);
  width: 100%;
  height: 3px;
  background: var(--gradient-brand);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   6-1b. 상단 이동 버튼 (우측 하단 고정)
   - 일정 거리 이상 내려가면 JS 가 .is-visible 을 붙여 나타난다.
   -------------------------------------------------------------------------- */

.to-top {
  display: inline-flex;
  position: fixed;
  z-index: var(--z-progress);
  align-items: center;
  justify-content: center;
  inset-block-end: 28px;
  inset-inline-end: 28px;
  width: 48px;
  height: 48px;
  color: var(--color-white);
  background-color: var(--color-blue);
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(16, 42, 67, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              visibility var(--dur-base);
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.to-top:hover {
  background-color: var(--color-blue-dark);
}

.to-top svg {
  width: 20px;
  height: 20px;
}

/* --------------------------------------------------------------------------
   6-2. 헤더 / 내비게이션
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background-color: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  transition: box-shadow var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}

/* 스크롤이 시작되면 그림자를 주어 콘텐츠와 분리한다 (JS가 클래스 토글) */
.header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 20px rgba(16, 42, 67, 0.08);
}

.header__inner {
  display: flex;
  gap: var(--space-6);
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

/* ----- 로고 ----- */
.logo {
  display: inline-flex;
  gap: var(--space-2);
  align-items: baseline;
  font-size: 1.375rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--color-blue);
}
.logo img {
  height: 28px;
}

.logo__sub {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-muted);
}

/* ----- 메뉴 ----- */
.gnb {
  display: flex;
  gap: var(--space-7);
  align-items: center;
}

.gnb__link {
  position: relative;
  padding-block: var(--space-2);
  font-family: var(--font-en);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-slate);
  transition: color var(--dur-fast) var(--ease-out);
}

/* 하단 인디케이터 : 기본은 접혀 있고 hover/active 시 펼쳐진다 */
.gnb__link::after {
  position: absolute;
  inset-block-end: -2px;
  inset-inline-start: 0;
  width: 100%;
  height: 3px;
  background-color: var(--color-blue);
  border-radius: var(--radius-pill);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-base) var(--ease-out);
  content: "";
}

.gnb__link:hover {
  color: var(--color-blue);
}

.gnb__link:hover::after {
  transform: scaleX(1);
}

/* 현재 페이지 메뉴 : 블루 + Bold + 인디케이터 고정 노출 */
.gnb__link.is-active {
  font-weight: 700;
  color: var(--color-blue);
}

.gnb__link.is-active::after {
  transform: scaleX(1);
}

/* ----- 헤더 우측 액션 ----- */
.header__actions {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.header__support {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--color-ink);
  transition: color var(--dur-fast) var(--ease-out);
}

.header__support:hover {
  color: var(--color-blue);
}

/* ----- 모바일 햄버거 버튼 ----- */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
}

.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-ink);
  border-radius: var(--radius-pill);
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}

/* 열림 상태에서 X 모양으로 변형 */
.nav-toggle.is-open .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   6-3. 히어로
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: var(--space-10) var(--section-py);
  overflow: hidden;
  background: var(--gradient-hero);
}

/* ----- 사진 배경 슬라이드형 메인 비주얼 (.hero--media) -----
   시안(Figma Hero)처럼 현장 사진을 풀블리드로 깔고 그 위에 카피를 얹는다.
   사진은 JS(initFader)가 일정 간격으로 교차 페이드시킨다. */
.hero--media {
  background: var(--color-bg-dark);
}

/* 사진이 배경 장식 원과 겹쳐 지저분해지므로 이 히어로에서는 원을 숨긴다 */
.hero--media .hero__orb {
  display: none;
}

/* 패럴랙스로 아래로 밀리더라도 위아래 끝이 드러나지 않도록 여유를 준다
   (히어로 자체가 overflow:hidden 이라 넘치는 부분은 잘린다) */
.hero__media {
  position: absolute;
  inset: -100px 0;
  z-index: 0;
  overflow: hidden;
}

.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* 노출되는 동안 아주 천천히 확대돼 정지 사진에 생동감을 준다 */
  transform: scale(1.06);
  transition: opacity 1.2s var(--ease-out), transform 8s linear;
}

.hero__slide.is-active {
  opacity: 1;
  transform: scale(1);
}

/* 사진 위에서 흰 카피가 읽히도록 좌측이 더 어두운 그라디언트를 덮는다 */
.hero--media::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(9, 26, 41, 0.92) 0%,
    rgba(9, 26, 41, 0.78) 42%,
    rgba(9, 26, 41, 0.42) 100%);
}

/* 사진 위 타이포·요소 색상 반전 */
.hero--media .hero__title,
.hero--media .hero-stat__value {
  color: var(--color-on-dark);
}

.hero--media .hero__desc,
.hero--media .hero__meta-item,
.hero--media .hero-stat__label {
  color: var(--color-on-dark-muted);
}

.hero--media .chip {
  color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.18);
}

/* 배경 장식 원 : 스크롤에 따라 미세하게 움직인다(JS 패럴랙스) */
.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  pointer-events: none;
}

.hero__orb--1 {
  inset-block-start: -120px;
  inset-inline-end: -80px;
  width: 420px;
  height: 420px;
  background-color: rgba(0, 128, 203, 0.28);
}

.hero__orb--2 {
  inset-block-end: -160px;
  inset-inline-start: -100px;
  width: 380px;
  height: 380px;
  background-color: rgba(166, 204, 68, 0.25);
}

.hero__inner {
  display: grid;
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: center;
}

.hero__title {
  margin-block: var(--space-5) var(--space-4);
  font-size: var(--fs-display);
  font-weight: 900;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
}

.hero__desc {
  max-width: 520px;
  margin-bottom: var(--space-5);
  color: var(--color-slate);
}

/* 히어로 보조 정보(체크 항목) */
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.hero__meta-item {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-slate);
}

.hero__meta-dot {
  width: 8px;
  height: 8px;
  background-color: var(--color-blue);
  border-radius: 50%;
}

.hero__meta-item:last-child .hero__meta-dot {
  background-color: var(--color-green);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

/* ----- 히어로 지표 ----- */
/* 값의 글자 수가 제각각이라 flex 로 두면 항목 시작 위치가 들쭉날쭉해진다.
   3등분 그리드로 칸 폭을 고정해 세로 기준선을 맞춘다.
   (글자 정렬은 왼쪽 그대로 두어 위쪽 제목·본문 라인과 이어지게 한다) */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.hero-stat__value {
  font-size: var(--fs-h3);
  font-weight: 900;
  color: var(--color-blue);
}

.hero-stat__label {
  font-size: var(--fs-xs);
  color: var(--color-slate);
}

/* ----- 히어로 비주얼(플레이스홀더 목업) ----- */
.hero__visual {
  position: relative;
}

.mockup {
  padding: var(--space-5);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
}

.mockup__bar {
  display: flex;
  gap: 6px;
  margin-bottom: var(--space-4);
}

.mockup__dot {
  width: 10px;
  height: 10px;
  background-color: var(--color-border);
  border-radius: 50%;
}

.mockup__screen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--color-bg-tint2);
  border-radius: var(--radius-lg);
}

.mockup__panel {
  height: 78px;
  background-color: var(--color-white);
  border-radius: var(--radius-md);
}

/* 3개 패널이 시간차를 두고 위아래로 부드럽게 움직인다 */
.mockup__panel--1 {
  animation: float 4s var(--ease-in-out) infinite;
}

.mockup__panel--2 {
  animation: float 4s var(--ease-in-out) 0.4s infinite;
}

.mockup__panel--3 {
  animation: float 4s var(--ease-in-out) 0.8s infinite;
}

.mockup__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.mockup__row {
  height: 10px;
  background-color: var(--color-bg-tint);
  border-radius: var(--radius-pill);
}

.mockup__row--accent {
  width: 60%;
  background-color: var(--color-blue);
}

.mockup__row--accent-green {
  width: 38%;
  background-color: var(--color-green);
}

/* --------------------------------------------------------------------------
   6-4. 고객사 로고 띠
   -------------------------------------------------------------------------- */

.clients {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.clients__item {
  padding: 13px 22px;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-ink);
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}

.clients__item:hover {
  transform: translateY(-4px);
  color: var(--color-blue);
}

/* --------------------------------------------------------------------------
   6-5. 핵심 기술 : 벤토 그리드 (큰 카드 1 + 작은 카드 2)
   -------------------------------------------------------------------------- */

.bento {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-5);
}

.bento__side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-5);
}

/* ----- 큰 카드 안의 관제 대시보드 목업 ----- */
.dashboard {
  margin-top: var(--space-5);
  padding: var(--space-5);
  background-color: var(--color-bg-tint);
  border-radius: var(--radius-lg);
}

.dashboard__head {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.dashboard__title {
  font-size: var(--fs-xs);
  color: var(--color-slate);
}

.dashboard__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* ----- SVG 라인 차트 ----- */
.chart {
  padding: var(--space-4);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.chart__svg {
  width: 100%;
  height: 90px;
}

.chart__line {
  fill: none;
  stroke: var(--color-blue);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 화면에 들어오면 선이 왼쪽에서 오른쪽으로 그려진다 (JS가 is-drawn 부여) */
.chart__line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

.chart.is-drawn .chart__line {
  animation: draw-line 1.6s var(--ease-out) forwards;
}

.chart__area {
  fill: url(#chartGradient);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out) 0.6s;
}

.chart.is-drawn .chart__area {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   6-6. 제품 라인업 / 패키지 / 스텝 공통 그리드
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--space-5);
}

.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* 라인업 카드 하단 강조 수치 */
.lineup__metric {
  margin-top: var(--space-4);
  font-size: var(--fs-h4);
  font-weight: 900;
  color: var(--color-blue);
}

.lineup__target {
  font-size: var(--fs-xs);
  color: var(--color-slate);
}

/* --------------------------------------------------------------------------
   6-7. 서비스 프로세스 / 도입 단계
   -------------------------------------------------------------------------- */

.step {
  position: relative;
  padding: var(--space-6) var(--space-5);
  background-color: var(--color-bg-tint);
  border-radius: var(--radius-xl);
  transition: transform var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
  cursor: default;
}

.step:hover {
  transform: translateY(-6px);
  background-color: var(--color-white);
  box-shadow: var(--shadow-md);
}

.step__no {
  display: inline-flex;
  margin-bottom: var(--space-3);
  padding: 5px 10px;
  font-family: var(--font-en);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-blue);
  background-color: var(--color-bg-chip);
  border-radius: var(--radius-pill);
}

/* 마지막 단계는 연두 포인트로 마무리 */
.step:last-child .step__no {
  color: var(--color-green-ink);
  background-color: var(--color-bg-chip-green);
}

.step__title {
  margin-bottom: var(--space-2);
  font-size: var(--fs-lg);
  font-weight: 700;
}

.step__desc {
  font-size: var(--fs-xs);
  color: var(--color-slate);
}

/* --------------------------------------------------------------------------
   6-8. 활용 사례 : 좌우 교차(지그재그) 레이아웃
   -------------------------------------------------------------------------- */

.zigzag {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.zigzag__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--space-10);
  align-items: center;
}

/* 짝수 행은 비주얼을 왼쪽으로 보내 시선이 지그재그로 흐르게 한다 */
.zigzag__row:nth-child(even) .zigzag__copy {
  order: 2;
}

.zigzag__row:nth-child(even) .zigzag__visual {
  order: 1;
}

.zigzag__title {
  margin-block: var(--space-4) var(--space-3);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-heading);
}

.zigzag__desc {
  margin-bottom: var(--space-4);
  color: var(--color-slate);
}

.zigzag__tag {
  padding-top: var(--space-4);
  font-family: var(--font-en);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--color-blue);
  border-top: 1px solid var(--color-border);
}

.zigzag__caption {
  font-size: var(--fs-xs);
  color: var(--color-slate);
}

/* 비주얼 패널 */
.panel {
  padding: var(--space-7);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
}

.panel__screen {
  position: relative;
  height: 200px;
  overflow: hidden;
  background-color: var(--color-bg-tint2);
  border-radius: var(--radius-lg);
}

/* 패널 화면 안에서 교차 페이드되는 현장 사진 (JS initFader 가 제어) */
.panel__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s var(--ease-out);
}

.panel__slide.is-active {
  opacity: 1;
}

/* 화면 아래 막대 = 슬라이드 인디케이터
   슬라이드 한 장당 막대 하나. 현재 슬라이드의 막대만 길고 진하게 표시한다.
   (스크립트가 없으면 마크업의 첫 막대가 활성 상태 그대로 남는다) */
.panel__bars {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* 좁은 화면에서 막대 합이 패널 폭을 넘지 않도록 flex-shrink 로 함께 줄인다 */
.panel__bar {
  flex: 0 1 84px;
  position: relative;
  min-width: 24px;
  height: 8px;
  padding: 0;
  background-color: var(--color-border);
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: flex-basis var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}

/* 막대가 얇아 누르기 어려우므로 보이지 않는 여유 터치 영역을 덧댄다 */
.panel__bar::before {
  position: absolute;
  inset: -12px 0;
  content: "";
}

.panel__bar:hover {
  background-color: var(--color-muted);
}

.panel__bar.is-active {
  flex-basis: 150px;
  background-color: var(--color-blue);
}

/* 연두 포인트를 쓰는 행 */
.panel__bars--accent .panel__bar.is-active {
  background-color: var(--color-green);
}

/* --------------------------------------------------------------------------
   6-9. 패키지 요금
   -------------------------------------------------------------------------- */

.package {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-6);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  /* 강조가 카드 사이를 옮겨다녀도 레이아웃은 흔들리지 않아야 한다.
     여백/크기/위치는 건드리지 않고 색과 그림자만 전환한다. */
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  cursor: default;
}

.package:hover {
  box-shadow: var(--shadow-md);
}

/* 강조 상태
   - .package--featured : 스크립트가 없을 때의 기본 강조(추천 패키지)
   - .package.is-active : 스크립트가 일정 간격으로 옮겨 붙이는 강조.
     마우스를 올리면 그 카드로 즉시 옮겨온다.
   두 상태의 외형은 같게 유지한다.
   테두리는 1px 그대로 두고 안쪽 그림자를 겹쳐 2px 처럼 보이게 한다.
   border-width 를 키우면 그만큼 카드 내용이 밀리기 때문이다. */
.package--featured,
.package.is-active {
  background-color: var(--color-bg-tint2);
  border-color: var(--color-blue);
  box-shadow: inset 0 0 0 1px var(--color-blue), var(--shadow-lg);
}

/* 강조가 옮겨올 때 카드를 살짝 띄워 전환이 눈에 보이게 한다.
   transform 은 주변 배치를 밀지 않으므로 감싼 그리드는 그대로 있다.
   .reveal / .reveal.is-visible 과 선택자 무게가 같아 밀리기 때문에
   [data-package-roll] 로 한 단계 올려 잡는다. */
[data-package-roll] .package {
  transition: transform var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

/* 등장 애니메이션(.reveal)이 끝난 뒤부터 띄운다.
   scale 로 키우면 실제 크기는 그대로라 옆 카드가 밀리지 않는다. */
[data-package-roll] .package.is-visible.is-active {
  /* 커진 카드가 이웃 카드에 가리지 않도록 한 겹 위로 올린다 */
  position: relative;
  z-index: 1;
  transform: translateY(-10px) scale(1.03);
}

/* MOST POPULAR 배지는 강조된 카드에만 보인다.
   (모든 카드가 배지를 들고 있고 강조를 받은 카드만 펼친다) */
.package > .chip {
  display: none;
}

.package--featured > .chip,
.package.is-active > .chip {
  display: inline-flex;
}

/* 강조된 카드에서는 적용 대상(고객 규모)을 블루로 또렷하게 보여준다.
   굵기를 바꾸면 글자 폭이 변해 문장이 흔들리므로 색만 바꾼다. */
.package.is-active .package__target,
.package--featured .package__target {
  color: var(--color-blue);
}

.package__name {
  font-size: var(--fs-h4);
  font-weight: 700;
}

.package__target {
  font-size: var(--fs-xs);
  color: var(--color-slate);
}

.package__price {
  font-size: var(--fs-h2);
  font-weight: 900;
  color: var(--color-blue);
}

.package__unit {
  margin-bottom: var(--space-2);
  font-size: 0.75rem;
  color: var(--color-slate);
}

.package__list {
  display: flex;
  flex-direction: column;
  /* 카드가 align-items:flex-start 라 목록은 따로 가로 폭을 채워
     구분선(border-top)이 카드 전체를 가로지르게 한다 */
  align-self: stretch;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   6-10. 구축 레퍼런스 (다크 밴드)
   -------------------------------------------------------------------------- */

.ref-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background-color: var(--color-bg-dark-soft);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

.ref-card:hover {
  transform: translateY(-6px);
  border-color: rgba(124, 196, 240, 0.5);
}

.ref-card__tag {
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-on-dark-accent);
}

.ref-card__desc {
  font-size: var(--fs-body);
  color: var(--color-on-dark-muted);
}

.ref-card__name {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 700;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ref-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--color-white);
  background-color: rgba(124, 196, 240, 0.18);
  border-radius: 50%;
}

.ref-card__icon svg {
  width: 18px;
  height: 18px;
}

/* 이미지 썸네일이 들어간 카드 : 사진이 카드 상단을 꽉 채운다 */
.ref-card--media {
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.ref-card__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--color-blue-deep);
}

.ref-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform var(--dur-slow) var(--ease-out);
}

.ref-card:hover .ref-card__thumb img {
  transform: scale(1.08);
}

/* 사진 위쪽을 살짝 어둡게 덮어 카드 본문과 자연스럽게 이어지게 한다 */
.ref-card__thumb::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(15, 18, 25, 0) 45%, rgba(15, 18, 25, 0.55) 100%);
}

.ref-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
}

/* 담당 기관·고객사 (이름 아래 보조 라벨) */
.ref-card__org {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--color-on-dark-muted);
}

/* --------------------------------------------------------------------------
   6-11. 레퍼런스 이미지 슬라이더
   - --per-view : 한 화면에 보이는 카드 수(반응형에서 값만 바꾼다)
   - 카드를 1장씩 밀어 넘기므로 페이지 수 = 전체 카드 - per-view + 1
   -------------------------------------------------------------------------- */

.ref-slider {
  --per-view: 3;
  --slide-gap: var(--space-5);

  position: relative;
}

/* 카드 hover 시 떠오르는 만큼 상하 여백을 확보해 잘리지 않게 한다 */
.ref-slider__viewport {
  padding: 10px 0 16px;
  overflow: hidden;
}

.ref-slider__track {
  display: flex;
  gap: var(--slide-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform var(--dur-slow) var(--ease-out);
  will-change: transform;
}

/* 드래그(스와이프) 중에는 손가락을 그대로 따라오도록 전환 효과를 끈다 */
.ref-slider.is-dragging .ref-slider__track {
  transition: none;
}

.ref-slider__slide {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--slide-gap)) / var(--per-view));
  min-width: 0;
}

.ref-slider__slide .ref-card {
  height: 100%;
}

/* 컨트롤 : 이전 / 인디케이터 / 다음 */
.ref-slider__controls {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  justify-content: center;
  max-width: 620px;
  margin-top: var(--space-6);
  margin-inline: auto;
}

.ref-slider__nav {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-on-dark);
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.ref-slider__nav:hover {
  background-color: var(--color-blue);
  border-color: var(--color-blue);
}

.ref-slider__nav svg {
  width: 18px;
  height: 18px;
}

/* 인디케이터 : 비주얼 패널과 같은 막대 형태로 통일한다.
   폭이 좁아지면 flex-shrink 로 함께 줄어 컨트롤 줄이 넘치지 않는다. */
/* 남는 폭을 모두 차지하고 그 안에서 막대를 가운데 모은다.
   (폭을 내용에 맡기면 막대가 최소 크기로 찌그러진다) */
.ref-slider__bars {
  display: flex;
  flex: 1 1 auto;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.ref-slider__bar {
  flex: 0 1 28px;
  position: relative;
  min-width: 14px;
  height: 8px;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.3);
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: flex-basis var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}

/* 막대가 얇아 누르기 어려우므로 보이지 않는 여유 터치 영역을 덧댄다 */
.ref-slider__bar::before {
  position: absolute;
  inset: -14px -4px;
  content: "";
}

.ref-slider__bar:hover {
  background-color: rgba(255, 255, 255, 0.55);
}

.ref-slider__bar.is-active {
  flex-basis: 48px;
  background-color: var(--color-blue);
}

/* 카드 수가 보이는 개수 이하이면 넘길 것이 없으므로 컨트롤을 숨긴다 */
.ref-slider.is-static .ref-slider__controls {
  display: none;
}

/* --------------------------------------------------------------------------
   6-12. 사진 배경 밴드
   - .section--dark 와 함께 사용한다(위치 기준·기본 배경색을 그대로 활용).
   -------------------------------------------------------------------------- */

.section--photo::before,
.section--photo::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.section--photo::before {
  background-image: url("../images/reference-bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.45;
}

/* 사진 위에서도 흰 텍스트가 읽히도록 어두운 레이어를 덮는다 */
.section--photo::after {
  background: linear-gradient(180deg,
    rgba(15, 18, 25, 0.86) 0%,
    rgba(15, 18, 25, 0.72) 40%,
    rgba(15, 18, 25, 0.9) 100%);
}

.section--photo > .container {
  position: relative;
  z-index: 1;
}

/* 사진 위 카드는 반투명 유리 느낌으로 처리한다 */
.section--photo .ref-card {
  background-color: rgba(25, 28, 37, 0.78);
  backdrop-filter: blur(6px);
}

/* --------------------------------------------------------------------------
   6-13. CTA 밴드
   -------------------------------------------------------------------------- */

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-8) var(--space-8);
  color: var(--color-white);
  background: var(--gradient-brand);
  border-radius: var(--radius-2xl);
}

.cta__title {
  font-size: var(--fs-h2);
  font-weight: 900;
  line-height: var(--lh-heading);
}

.cta__desc {
  margin-top: var(--space-2);
  color: rgba(255, 255, 255, 0.92);
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* --------------------------------------------------------------------------
   6-14. 푸터
   -------------------------------------------------------------------------- */

.footer {
  padding-block: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
}

.footer__copy {
  font-size: var(--fs-xs);
  color: var(--color-slate);
}

.footer__links {
  display: flex;
  gap: var(--space-6);
}

.footer__link {
  font-size: var(--fs-xs);
  color: var(--color-slate);
  transition: color var(--dur-fast) var(--ease-out);
}

.footer__link:hover {
  color: var(--color-blue);
}


/* ==========================================================================
   07. 애니메이션
   ========================================================================== */

/* ----- 키프레임 ----- */

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ----- 스크롤 리빌 -----
   기본은 숨김 상태이고, IntersectionObserver 가 is-visible 을 부여하면 나타난다.
   data-delay 속성으로 순차 등장(stagger)을 만든다. */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 좌우에서 밀려 들어오는 변형 (지그재그 섹션용) */
.reveal--left {
  transform: translateX(-40px);
}

.reveal--right {
  transform: translateX(40px);
}

.reveal--left.is-visible,
.reveal--right.is-visible {
  transform: translateX(0);
}

/* 확대되며 등장하는 변형 (카드용) */
.reveal--zoom {
  transform: scale(0.96);
}

.reveal--zoom.is-visible {
  transform: scale(1);
}


/* ==========================================================================
   08. 반응형
   ========================================================================== */

/* ----- 1200px 이하 : 여백 축소, 5열 → 3열 ----- */
@media (max-width: 1200px) {
  :root {
    --gutter: 40px;
    --section-py: 72px;
    --fs-display: 2.5rem;
    --fs-h1: 1.875rem;
  }

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

/* ----- 992px 이하 : 히어로/벤토/지그재그 1열 전환 ----- */
@media (max-width: 992px) {
  .hero__inner,
  .bento,
  .zigzag__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .bento__side {
    grid-template-rows: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 모바일에서는 좌우 교차 대신 항상 텍스트가 먼저 오도록 정렬 */
  .zigzag__row:nth-child(even) .zigzag__copy,
  .zigzag__row:nth-child(even) .zigzag__visual {
    order: initial;
  }

  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 태블릿 : 레퍼런스 슬라이드를 2장씩 보여준다 */
  .ref-slider {
    --per-view: 2;
  }

  /* 모바일 메뉴 : 기본 숨김 → is-open 시 드로어로 펼침 */
  .nav-toggle {
    display: flex;
  }

  .gnb {
    position: fixed;
    inset-block-start: var(--header-h);
    inset-inline: 0;
    z-index: var(--z-drawer);
    flex-direction: column;
    gap: var(--space-4);
    align-items: flex-start;
    padding: var(--space-6) var(--gutter) var(--space-8);
    background-color: var(--color-white);
    box-shadow: var(--shadow-md);
    transform: translateY(-120%);
    transition: transform var(--dur-base) var(--ease-out);
  }

  .gnb.is-open {
    transform: translateY(0);
  }

  .header__support {
    display: none;
  }
}

/* ----- 768px 이하 : 2열 → 1열, 타이포 축소 ----- */
@media (max-width: 768px) {
  :root {
    --gutter: 20px;
    --section-py: 56px;
    --fs-display: 2rem;
    --fs-h1: 1.625rem;
    --fs-h2: 1.5rem;
    --fs-h3: 1.375rem;
  }

  /* 좁은 화면에서는 좌우 슬라이드 대신 위로 올라오는 등장으로 대체한다.
     (가로 방향 이동이 화면 밖 여백을 만들어 가로 스크롤을 유발하기 때문) */
  .reveal--left,
  .reveal--right {
    transform: translateY(28px);
  }

  .grid--2,
  .grid--3,
  .grid--4,
  .grid--5,
  .bento__side,
  .dashboard__tiles,
  .mockup__screen {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__stats {
    gap: var(--space-6);
  }

  /* 모바일 : 레퍼런스 슬라이드를 1장씩 보여준다 */
  .ref-slider {
    --per-view: 1;
  }

  /* 좁은 화면에서는 상단 이동 버튼을 조금 작게, 가장자리에 가깝게 둔다 */
  .to-top {
    inset-block-end: 18px;
    inset-inline-end: 18px;
    width: 42px;
    height: 42px;
  }

  .panel__screen {
    height: 170px;
  }

  .cta {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ==========================================================================
   09. 접근성 : 모션 최소화 설정 존중
   - 사용자가 OS에서 "동작 줄이기"를 켠 경우 모든 애니메이션을 제거한다.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .chart__line {
    stroke-dashoffset: 0;
  }

  .chart__area {
    opacity: 1;
  }
}


/* ==========================================================================
   10. 서브페이지 전용 스타일
   - index.html 에는 없는, 하위 페이지에서만 쓰이는 블록을 모아둔다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   10-1. 페이지 히어로 (서브페이지 상단)
   -------------------------------------------------------------------------- */

.page-hero {
  padding-block: var(--section-py);
  background: var(--gradient-hero-sub);
}

.page-hero__title {
  margin-block: var(--space-5) var(--space-4);
  font-size: var(--fs-display);
  font-weight: 900;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
}

.page-hero__desc {
  max-width: 760px;
  font-size: var(--fs-lg);
  color: var(--color-slate);
}

/* 현재 위치 표시(브레드크럼) */
.breadcrumb {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-5);
  font-size: var(--fs-xs);
  color: var(--color-slate);
}

.breadcrumb__link {
  transition: color var(--dur-fast) var(--ease-out);
}

.breadcrumb__link:hover {
  color: var(--color-blue);
}

.breadcrumb__current {
  font-weight: 700;
  color: var(--color-blue);
}

/* --------------------------------------------------------------------------
   10-2. 성장 로드맵 카드 (OUR HISTORY)
   -------------------------------------------------------------------------- */

.roadmap__bar {
  display: block;
  width: 52px;
  height: 5px;
  margin-bottom: var(--space-4);
  background-color: var(--color-blue);
  border-radius: var(--radius-pill);
}

/* 마지막 단계는 연두 포인트 */
.roadmap__card--accent .roadmap__bar {
  background-color: var(--color-green);
}

.roadmap__period {
  font-family: var(--font-en);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-blue);
}

.roadmap__card--accent .roadmap__period {
  color: var(--color-green-ink);
}

.roadmap__title {
  margin-top: var(--space-2);
  font-size: var(--fs-h4);
  font-weight: 700;
}

.roadmap__sub {
  font-size: var(--fs-xs);
  color: var(--color-slate);
}

.roadmap__list {
  margin-block: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* 단계별 성과 요약 박스 */
.roadmap__outcome {
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 700;
  background-color: var(--color-bg-tint);
  border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------------
   10-3. 연도별 타임라인 (OUR HISTORY)
   -------------------------------------------------------------------------- */

.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.timeline__item {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--space-8);
  padding: var(--space-6) var(--space-7);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.timeline__item:hover {
  transform: translateX(6px);
  box-shadow: var(--shadow-md);
}

.timeline__year {
  font-size: var(--fs-h2);
  font-weight: 900;
  color: var(--color-blue);
}

/* 가장 최근 연도는 연두 포인트로 구분 */
.timeline__item--accent .timeline__year {
  color: var(--color-green-ink);
}

.timeline__count {
  display: inline-block;
  margin-top: var(--space-2);
  padding: 4px 10px;
  font-family: var(--font-en);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-slate);
  background-color: var(--color-bg-tint);
  border-radius: var(--radius-pill);
}

.timeline__item--accent .bullet-list__item::before {
  background-color: var(--color-green);
}

/* --------------------------------------------------------------------------
   10-4. 인증 카드 (OUR HISTORY)
   -------------------------------------------------------------------------- */

.cert {
  padding: var(--space-6) var(--space-5);
  background-color: var(--color-bg-tint);
  border-radius: var(--radius-lg);
  transition: transform var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}

.cert:hover {
  transform: translateY(-6px);
  background-color: var(--color-bg-tint2);
}

.cert__date {
  font-family: var(--font-en);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-blue);
}

.cert__title {
  margin-block: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.cert__org {
  font-size: var(--fs-xs);
  color: var(--color-slate);
}

/* --------------------------------------------------------------------------
   10-5. 비전·미션·핵심가치 카드 (OUR VISION)
   -------------------------------------------------------------------------- */

.core__card {
  padding: var(--space-7) var(--space-6);
  background-color: var(--color-bg-tint);
  border-radius: var(--radius-xl);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.core__card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.core__bar {
  display: block;
  width: 46px;
  height: 5px;
  margin-bottom: var(--space-4);
  background-color: var(--color-blue);
  border-radius: var(--radius-pill);
}

.core__card--accent .core__bar {
  background-color: var(--color-green);
}

.core__tag {
  font-family: var(--font-en);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-blue);
}

.core__card--accent .core__tag {
  color: var(--color-green-ink);
}

.core__title {
  margin-block: var(--space-3) var(--space-2);
  font-size: var(--fs-h4);
  font-weight: 700;
}

.core__desc {
  font-size: var(--fs-sm);
  color: var(--color-slate);
}

/* --------------------------------------------------------------------------
   10-6. 태그 행 / 전략 번호 (OUR VISION)
   -------------------------------------------------------------------------- */

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.tag-row__item {
  padding: 8px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-blue);
  background-color: var(--color-bg-chip);
  border-radius: var(--radius-pill);
}

.tag-row__item--accent {
  color: var(--color-green-ink);
  background-color: var(--color-bg-chip-green);
}

/* 슬라이드 인디케이터로 쓰일 때 : 현재 슬라이드의 태그를 꽉 찬 색으로 표시 */
.tag-row__item.is-active {
  color: var(--color-white);
  background-color: var(--color-blue);
}

.tag-row__item--accent.is-active {
  background-color: var(--color-green-ink);
}

.strategy__no {
  margin-bottom: var(--space-3);
  font-size: var(--fs-h3);
  font-weight: 900;
  color: var(--color-blue);
}

.grid--5 .step:last-child .strategy__no {
  color: var(--color-green-ink);
}

.competency__list {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   10-7. 성과 지표 밴드 / 사례 카드 (OUR REFERENCE)
   -------------------------------------------------------------------------- */

.stats-band {
  position: relative;
  padding-block: var(--space-9);
  overflow: hidden;
}
.section.stats-band .container {
  position: relative;
  z-index: 2;
}
.section.stats-band::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/section-bg1.jpg');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
  opacity: .085;
  transition: .3s all;
}
.section.stats-band:hover::after {
  transform: scale(1.05);
}

.stat-block {
  text-align: center;
}

.stat-block__value {
  font-size: 2.375rem;
  font-weight: 900;
  color: var(--color-on-dark);
}

.stat-block__label {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-on-dark-muted);
}

/* 사례 썸네일 : 이미지 교체 전 플레이스홀더 */
/* 썸네일 : 사진이 있으면 img 를 넣고, 없는 사례는 그라디언트만으로 둔다 */
.case__thumb {
  position: relative;
  height: 96px;
  margin-bottom: var(--space-3);
  overflow: hidden;
  background: var(--gradient-thumb);
  border-radius: var(--radius-md);
}

.case__thumb--alt {
  background: var(--gradient-thumb-alt);
}

.case__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.case:hover .case__thumb img {
  transform: scale(1.06);
}

.case__tag {
  font-family: var(--font-en);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-blue);
}

.case__title {
  margin-block: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 700;
}

/* 업종별 적용 카드 */
.app-card {
  padding: var(--space-7) var(--space-6);
  background-color: var(--color-bg-tint);
  border-radius: var(--radius-xl);
  transition: transform var(--dur-base) var(--ease-out);
  cursor: default;
}

.app-card:hover {
  transform: translateY(-6px);
}

.app-card__bar {
  display: block;
  width: 46px;
  height: 5px;
  margin-bottom: var(--space-4);
  background-color: var(--color-blue);
  border-radius: var(--radius-pill);
}

.app-card__bar--accent {
  background-color: var(--color-green);
}

.app-card .card__title {
  margin-bottom: var(--space-4);
}

/* 다크 비주얼 패널 (대표 사례용) */
.panel--dark {
  background: var(--color-bg-tint2);
  border-color: transparent;
}

.panel__screen--dark {
  background-color: rgba(255, 255, 255, 0.12);
}

/* 다크 패널에서는 비활성 막대만 흰색 반투명으로 낮춘다.
   :not() 을 써서 활성 막대의 브랜드 색을 덮어쓰지 않도록 한다. */
/* .panel--dark .panel__bar:not(.is-active) {
  background-color: rgba(255, 255, 255, 0.28);
}

.panel--dark .panel__bar:not(.is-active):hover {
  background-color: rgba(255, 255, 255, 0.55);
} */

/* --------------------------------------------------------------------------
   10-8. SignMaster 전용
   -------------------------------------------------------------------------- */
.section:has(.container.support) {
  position: relative;
  overflow: hidden;
}
.section:has(.container.support) .container {
  position: relative;
  z-index: 2;
}
.section:has(.container.support)::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/section-bg2.jpg');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
  opacity: .085;
  transition: .3s all;
}
.section:has(.container.support):hover::after {
  transform: scale(1.05);
}

.panel--tint {
  background-color: var(--color-bg-tint2);
  border-color: transparent;
}

.panel__screen--light {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
}

/* 주문→픽업 흐름 표시 */
.flow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.flow__item {
  flex: 1 1 0;
  padding: 8px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-slate);
  text-align: center;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* --active : 스크립트가 없을 때의 기본 강조 / .is-active : 슬라이드와 함께 옮겨다니는 강조 */
.flow__item--active,
.flow__item.is-active {
  color: var(--color-white);
  background-color: var(--color-blue);
  border-color: var(--color-blue);
}

.flow__item:hover {
  border-color: var(--color-blue);
}

.strength__en {
  font-family: var(--font-en);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-blue);
}

.strength__ko {
  margin-block: var(--space-2) var(--space-3);
  font-size: var(--fs-h4);
  font-weight: 700;
}

/* ----- 기능 비교표 ----- */
.table-wrap {
  overflow-x: auto;              /* 모바일에서 가로 스크롤 */
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.spec-table {
  min-width: 720px;
  font-size: var(--fs-xs);
}

.spec-table th,
.spec-table td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
}

.spec-table thead th {
  font-weight: 700;
  color: var(--color-white);
  background-color: var(--color-ink);
}

.spec-table tbody th {
  font-weight: 700;
  color: var(--color-ink);
}

.spec-table tbody td {
  color: var(--color-slate);
}

/* 지원 항목은 브랜드 컬러로 강조 */
.spec-table .is-included {
  font-weight: 700;
  color: var(--color-blue);
}

/* 가독성을 위한 줄무늬 배경 */
.spec-table tbody tr:nth-child(even) {
  background-color: var(--color-bg-tint);
}

.spec-table__note {
  color: var(--color-muted);
}

/* ----- 기술 지원 (다크 밴드 2단) ----- */
.support {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-9);
  align-items: center;
}

.support__title {
  margin-block: var(--space-4) var(--space-3);
  font-size: var(--fs-h2);
  font-weight: 900;
}

.support__desc {
  color: var(--color-on-dark-muted);
}

.support__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.support__item {
  padding: var(--space-6) var(--space-5);
  text-align: left;
  background-color: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  transition: background-color var(--dur-base) var(--ease-out);
  cursor: default;
}

.support__item:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

.support__value {
  font-size: var(--fs-h3);
  font-weight: 900;
  color: var(--color-on-dark);
}

.support__label {
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-on-dark-muted);
}

/* --------------------------------------------------------------------------
   10-9. 서브페이지 반응형
   -------------------------------------------------------------------------- */

@media (max-width: 992px) {
  .support {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .timeline__item {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .support__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}