@charset "UTF-8";
/* ==========================================================================
   subpage.css — 서브페이지 공통 스타일
   --------------------------------------------------------------------------
   목차
   00. 변수 · 유틸리티
   01. 서브 비주얼 (타이틀 / 브레드크럼 / 뎁스 드롭다운)
   02. 서브 공통 레이아웃 (섹션 / 헤딩 / 탭 / 버튼)
   03. AX플랫폼 소개 (1_1)
   04. 제품 상세 공통 컴포넌트 (1_2_x ~ 1_4_x)
       04-1. 섹션 타이틀 · 버튼 · 태그 · 불릿
       04-2. 제품 소개 (로고 / 우측 비주얼 카드)
       04-3. 카드류 (체크 / 아이콘 / 다크 / 벤토 / 기능 / 도입사례 / 환경)
       04-4. 서비스 특징 (스크린샷형)
       04-5. 포인트 그리드 · 구분선 리스트 · 스텝 · 기능 요약
       04-6. 배너
       04-7. 구성도 (공통 / Meta)
       04-8. 테이블 (스펙 / 요금제 / 표준화 / 도입 전후)
       04-9. 주요 기능 행 리스트 · FAQ · 고객사
   05. AI Search 전용 (1_4_1) — 공식 카드는 ITSM 에서도 재사용
   06. 도깨비 ITSM 전용 (2_1_1)
       06-1. 탭 패널 (인포그래픽 + 기능 리스트)
       06-2. 통합 플랫폼 공식 카드 (5단)
       06-3. 구성도 (프로세스 흐름 / 통합 포털 / 모듈)
       06-4. 에디션 카드
   07. 도깨비 알림톡 전용 (2_2_1)
       07-1. 메시지 미리보기 카드 (HTML 목업)
       07-2. 채널 통합 다이어그램
       07-3. 개인정보 보호 발송 흐름도
       07-4. 도입 방식 (플랫폼 / API) · 활용 사례
   08. ICT 전용 (3_1)
       08-1. 대표 서비스 타일
       08-2. 고객사 카드
       08-3. 2분할 CTA 배너
   09. 시스템 인프라 전용 (3_2)
       09-1. 컨설팅/구축/유지보수 절차
       09-2. 특장점 카드
   10. 가나 소개 전용 (6_1)
       10-1. 공통 라벨
       10-2. 인트로 스테이트먼트 (스크롤 단어 채움)
       10-3. 확장 이미지
       10-4. 비전 · 미션 (Sticky)
       10-5. 숫자로 보는 가나
       10-6. 핵심가치 (가로 아코디언)
       10-7. 사업영역 (행 리스트 + 커서 이미지)
       10-8. 키워드 마키
   11. 연혁 전용 (6_2)
       11-1. 인트로
       11-2. 타임라인 레이아웃 (좌측 고정 + 우측 내역)
       11-3. 롤링 연도 · 연도 내비
       11-4. 연도 그룹 · 진행 라인
   12. 인증/수상 전용 (6_3)
       12-1. 헤드 · 분류 필터
       12-2. 인증서 카드 그리드
       12-3. 라이트박스 (크게 보기)
   13. 오시는 길 전용 (6_4)
       13-1. 사업장 탭 · 지도 (카카오맵 / 구글맵) · 위치 핀
       13-2. 회사 정보 (주소 · 길찾기 · 연락처)
       13-3. 주소 복사 토스트
   14. 파트너 프로그램 전용 (7_4)
       14-1. 인트로 환영 문구
       14-2. 파트너 유형 (이미지 배너 + 유형 카드)
       14-3. 파트너 혜택 (아이콘 카드 5단)
   15. 가나피플 전용 (8_1)
       15-1. 섹션 헤드 (좌 타이틀 / 우 설명)
       15-2. 인재상 (5단 컬럼)
       15-3. 복지제도 (좌측 고정 헤드 + 칩 카드)
   16. 스크롤 등장 모션
   17. 반응형 (1279 / 1024 / 768 / 600 / 480)
   18. 모션 최소화 (prefers-reduced-motion)
   · 수치 주석: 1920 기준 px / 1920
   ========================================================================== */


/* ==========================================================================
   00. 변수 · 유틸리티
   ========================================================================== */
:root {
  --sub-orange: #ff6700;
  --sub-orange-soft: #fff1e6;
  --sub-orange-line: rgba(255, 103, 0, .45);
  --sub-ink: #1e1e1e;
  --sub-text: #555;
  --sub-muted: #888;
  --sub-line: #e6e6e6;
  --sub-gray-bg: #f6f7f9;
  --sub-ease: cubic-bezier(.22, .61, .36, 1);
  /* 좌우 여백: 1920px → 160px, 1024px → 40px 사이를 브라우저 폭에 비례해 선형 축소 */
  --sub-pad-x: clamp(40px, calc(13.3929vw - 97.14px), 160px);
}

/* common.css 의 html, body { overflow-x: hidden } 은 body 를 스크롤 컨테이너로 만들어
   position: sticky 를 막으므로, 가로 넘침만 잘라내는 clip 으로 대체 */
html, body { overflow-x: clip; }

.text-orange2 { color: var(--sub-orange); }

.blind {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 링크 hover 색상 */
.sub-content a:not([class]):hover { color: var(--sub-orange); }


/* ==========================================================================
   01. 서브 비주얼
   ========================================================================== */
.sub-visual {
  position: relative;
  min-height: 720px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 70px;
  padding: 100px var(--sub-pad-x) 70px;
  background: #000;
}

.sub-visual__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.sub-visual__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .6; }

.sub-visual__tit {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 34px;
  color: #fff;
}

.sub-visual__tit h1 { font-size: 69px; font-weight: 700; line-height: 1.1; }
.sub-visual__tit p  { font-size: 19px; font-weight: 500; opacity: .7; }

.sub-visual__con {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 35px;
  border-bottom: 1px solid rgba(255, 255, 255, .4);
}

.sub-visual__line {
  position: absolute;
  left: var(--sub-pad-x);
  right: var(--sub-pad-x);
  bottom: 0;
  width: auto;
  height: 1px;
}

/* ---- 브레드크럼 ---- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}

.breadcrumb__home  { width: 16px; height: 16px; }
.breadcrumb__arrow { width: 7px; height: 7px; transform: rotate(135deg); }

/* ---- 뎁스 드롭다운 ---- */
.depth-dropdowns { display: flex; flex-wrap: wrap; gap: 10px; }
.depth-dropdown-item { position: relative; }

.depth-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: clamp(160px, 11.4583vw, 220px);                     /* 220 / 1920 */
  height: clamp(46px, 3.125vw, 60px);                         /* 60 / 1920 */
  padding: 0 clamp(18px, 1.5625vw, 30px);                     /* 30 / 1920 */
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: clamp(14px, 0.8854vw, 17px);                    /* 17 / 1920 */
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.depth-dropdown--active { border-color: var(--sub-orange); background: var(--sub-orange); }

.depth-dropdown span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.depth-dropdown svg {
  flex-shrink: 0;
  width: clamp(14px, 0.8333vw, 16px);
  height: clamp(14px, 0.8333vw, 16px);
  color: #fff;
  transition: transform .2s ease;
}

.depth-dropdown[aria-expanded="true"] svg { transform: rotate(180deg); }

.depth-dropdown__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  width: 100%;
  min-width: clamp(160px, 11.4583vw, 220px);
  padding: 8px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.depth-dropdown-item.is-open .depth-dropdown__menu { opacity: 1; visibility: visible; transform: translateY(0); }

.depth-dropdown__menu li + li { margin-top: 2px; }

.depth-dropdown__menu button {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  background: none;
  color: #333;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
}

.depth-dropdown__menu button:hover,
.depth-dropdown__menu button:focus-visible { background: #f5f5f5; }

.depth-dropdown__menu button.is-active {
  background: rgba(255, 103, 0, .1);
  color: var(--sub-orange);
  font-weight: 700;
}


/* ==========================================================================
   02. 서브 공통 레이아웃
   · 모든 서브페이지에서 재사용하는 섹션 프레임 / 섹션 헤딩 / 탭 / 버튼
   · 좌우 여백은 .sub-visual 과 동일하게 맞춤
   ========================================================================== */
.sub-section {
  position: relative;
  padding: clamp(80px, 7.2917vw, 140px) var(--sub-pad-x);   /* 140 / 1920 */
  background: #fff;
}

/* 제품 상세 섹션 기본 여백 (100 / 1920) */
.sub-content .sub-section { padding-top: clamp(64px, 5.2083vw, 100px); padding-bottom: clamp(64px, 5.2083vw, 100px); }

.sub-section--gray { background: var(--sub-gray-bg); }
.sub-section--line { border-top: 1px solid var(--sub-line); }

.sub-section--dark {
  background:
    radial-gradient(60% 70% at 85% 0%, rgba(255, 103, 0, .14) 0%, rgba(255, 103, 0, 0) 70%),
    linear-gradient(180deg, #361700 0%, #1c0b00 55%, #050200 100%);
  color: #fff;
}

.sub-inner { width: 100%; max-width: 1600px; margin: 0 auto; }

.sub-block + .sub-block { margin-top: clamp(72px, 5.7292vw, 110px); }

/* ---- 섹션 헤딩 : 영문 아이브로 + 국문 타이틀 (가운데 정렬) ---- */
.sub-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 0.8333vw, 16px);
  margin-bottom: clamp(40px, 3.6458vw, 70px);                /* 70 / 1920 */
  text-align: center;
}

.sub-head__eyebrow {
  font-size: clamp(13px, 0.9375vw, 18px);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sub-orange);
}

.sub-head__tit {
  font-size: clamp(26px, 2.2917vw, 44px);                    /* 44 / 1920 */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--sub-ink);
  text-wrap: balance;
  word-break: keep-all;
}

/* 가는 타이틀 + 강조 단어만 굵게 */
.sub-head__tit--light        { font-weight: 400; }
.sub-head__tit--light strong { font-weight: 700; }

.sub-head__desc {
  max-width: 900px;
  font-size: clamp(15px, 0.9375vw, 18px);
  line-height: 1.6;
  color: var(--sub-text);
  word-break: keep-all;
  text-wrap: pretty;
}

.sub-head__desc strong { font-weight: 700; color: var(--sub-ink); box-shadow: inset 0 -1px 0 currentColor; }
.sub-head__note        { font-size: clamp(12px, 0.7292vw, 14px); color: var(--sub-muted); }

/* ---- 서브 탭 (밑줄형) — [data-tabs] 안의 role="tablist" 에 사용 ---- */
.sub-tab-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 clamp(20px, 2.6042vw, 50px);
  margin-bottom: clamp(40px, 4.1667vw, 80px);
  border-bottom: 1px solid var(--sub-line);
}

.sub-tab {
  position: relative;
  padding: 0 4px clamp(14px, 1.0417vw, 20px);
  font-size: clamp(15px, 1.0417vw, 20px);
  font-weight: 500;
  color: var(--sub-muted);
  white-space: nowrap;
  transition: color .25s ease;
}

.sub-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--sub-orange);
  transform: scaleX(0);
  transition: transform .3s var(--sub-ease);
}

.sub-tab:hover                { color: var(--sub-ink); }
.sub-tab.is-active            { color: var(--sub-ink); font-weight: 700; }
.sub-tab.is-active::after     { transform: scaleX(1); }
.sub-tab:focus-visible        { outline: 2px solid var(--sub-orange); outline-offset: 4px; border-radius: 4px; }

.sub-tab-panel                { display: none; }
.sub-tab-panel.is-active      { display: block; animation: sub-fade-up .45s ease both; }

@keyframes sub-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ---- 어두운 사각 버튼 (자세히 알아보기 등) ---- */
.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 28px;
  border-radius: 8px;
  background: var(--sub-ink);
  color: #fff;
  font-size: clamp(14px, 0.8854vw, 17px);
  font-weight: 600;
  transition: background-color .25s ease;
}

.btn-dark img   { width: 11px; height: 11px; transform: rotate(135deg); }
.btn-dark:hover { background: var(--sub-orange); }

/* ---- CTA / 배너 공용 pill 버튼 크기 (1920 기준 비례 축소) ---- */
.sub-cta .btn-pill,
.sub-banner .btn-pill {
  gap: clamp(14px, 1.5625vw, 30px);                           /* 30 / 1920 */
  padding: clamp(10px, 0.7813vw, 15px) clamp(22px, 1.8229vw, 35px);
  font-size: clamp(15px, 1.0417vw, 20px);                     /* 20 / 1920 */
  line-height: clamp(26px, 1.9792vw, 38px);                   /* 38 / 1920 */
}

.sub-cta .btn-pill__arrow,
.sub-banner .btn-pill__arrow {
  width: clamp(10px, 0.7292vw, 14px);
  height: clamp(10px, 0.7292vw, 14px);
}

.sub-cta .btn-pill,
.sub-banner .btn-pill { color: #fff; }


/* ==========================================================================
   03. AX플랫폼 소개 (1_1)
   ========================================================================== */

/* ---- 01. Why AI Transformation : 원형 3단 ---- */
.ax-why__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 5.2083vw, 100px);
}

.ax-why__item {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: clamp(240px, 16.1458vw, 310px);                     /* 310 / 1920 */
  aspect-ratio: 1;
  padding: 30px;
  border-radius: 50%;
  background: var(--sub-gray-bg);
  text-align: center;
}

/* 주황 호(arc) — 원마다 각도를 달리해 흐름감 표현 */
.ax-why__item::before {
  content: "";
  position: absolute;
  inset: -8px;
  border: 2px solid transparent;
  border-top-color: var(--sub-orange);
  border-right-color: var(--sub-orange);
  border-radius: 50%;
  transform: rotate(var(--arc-rot, 45deg));
  transition: transform .8s var(--sub-ease);
}

.ax-why__item:nth-child(1) { --arc-rot: 45deg; }
.ax-why__item:nth-child(2) { --arc-rot: -45deg; }
.ax-why__item:nth-child(3) { --arc-rot: -135deg; }
.ax-why__item:hover::before { transform: rotate(calc(var(--arc-rot) + 90deg)); }

/* 원 사이 연결 점(···) */
.ax-why__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + clamp(20px, 2.6042vw, 50px) - 14px);
  width: 28px;
  height: 4px;
  background: radial-gradient(circle, var(--sub-orange) 1.6px, transparent 2px) 0 0 / 10px 4px repeat-x;
  opacity: .6;
  transform: translateY(-50%);
}

.ax-why__num  { font-size: clamp(28px, 2.0833vw, 40px); font-weight: 800; line-height: 1; color: var(--sub-orange); }
.ax-why__tit  { font-size: clamp(18px, 1.25vw, 24px); font-weight: 700; color: var(--sub-ink); }
.ax-why__desc { font-size: clamp(14px, 0.8854vw, 17px); line-height: 1.55; color: var(--sub-text); }

/* ---- 02. Strategy : 이미지 카드 3단 ---- */
.img-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.5625vw, 30px);
}

.img-card {
  overflow: hidden;
  border: 1px solid var(--sub-line);
  border-radius: 16px;
  background: #fff;
  transition: box-shadow .3s ease, transform .3s ease;
}

.img-card__thumb     { aspect-ratio: 16 / 8; overflow: hidden; background: #000; }
.img-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }

.img-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: clamp(28px, 2.0833vw, 40px) 24px clamp(32px, 2.3958vw, 46px);
  text-align: center;
}

.img-card__tit  { font-size: clamp(18px, 1.3542vw, 26px); font-weight: 700; color: var(--sub-ink); }
.img-card__desc { font-size: clamp(14px, 0.9375vw, 18px); line-height: 1.6; color: var(--sub-text); text-wrap: pretty; }

@media (hover: hover) {
  .img-card:hover                { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0, 0, 0, .08); }
  .img-card:hover .img-card__thumb img { transform: scale(1.05); }
}

/* ---- 03. Core Solutions : 탭 패널 (텍스트 + 로고) ---- */
.sol-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(40px, 5.2083vw, 100px);
  max-width: 1400px;
  margin: 0 auto;
}

.sol-panel__label { font-size: clamp(14px, 0.9375vw, 18px); font-weight: 600; color: var(--sub-orange); }

.sol-panel__tit {
  margin: 10px 0 clamp(20px, 1.5625vw, 30px);
  font-size: clamp(30px, 2.5vw, 48px);                       /* 48 / 1920 */
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sub-ink);
}

.sol-panel__desc {
  max-width: 760px;
  font-size: clamp(15px, 0.9896vw, 19px);
  line-height: 1.7;
  color: var(--sub-text);
  text-wrap: pretty;
  word-break: keep-all;
}

.sol-panel__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 40px;
  max-width: 760px;
  margin: clamp(24px, 2.0833vw, 40px) 0 clamp(32px, 2.6042vw, 50px);
  padding: clamp(22px, 1.5625vw, 30px) 0;
  border-top: 1px solid var(--sub-line);
  border-bottom: 1px solid var(--sub-line);
}

.sol-panel__list li {
  position: relative;
  padding-left: 16px;
  font-size: clamp(14px, 0.9375vw, 18px);
  line-height: 1.5;
  color: #333;
}

.sol-panel__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sub-orange);
}

/* 우측 로고 비주얼 — 패널별 --sol-color 로 배경 톤만 교체 */
.sol-panel__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(280px, 23.9583vw, 460px);                     /* 460 / 1920 */
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--sol-color) 16%, #fff) 0%, rgba(255, 255, 255, 0) 70%);
}

.sol-panel__visual::before,
.sol-panel__visual::after {
  content: "";
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--sol-color) 22%, transparent);
  border-radius: 50%;
}

.sol-panel__visual::before { inset: 6%; }
.sol-panel__visual::after  { inset: -4%; border-style: dashed; opacity: .6; }

.sol-panel__logo {
  position: relative;
  z-index: 1;
  width: 58%;
  filter: drop-shadow(0 24px 40px color-mix(in srgb, var(--sol-color) 35%, transparent));
}

.sol-panel--cms         { --sol-color: #ff6700; }
.sol-panel--reservation { --sol-color: #3b3bd6; }
.sol-panel--lms         { --sol-color: #1f6fd1; }
.sol-panel--moda        { --sol-color: #0e7f7f; }

/* ---- 04. Public & Enterprise : 오버레이 카드 4단 ---- */
.overlay-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.25vw, 24px);
}

.overlay-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
  aspect-ratio: 3 / 4;
  padding: clamp(24px, 2.0833vw, 40px);
  overflow: hidden;
  border-radius: 20px;
  background: #111;
  color: #fff;
  isolation: isolate;
}

.overlay-card__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}

.overlay-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .05) 20%, rgba(0, 0, 0, .82) 100%);
}

.overlay-card__num  { font-size: clamp(14px, 0.9375vw, 18px); font-weight: 700; color: var(--sub-orange); }
.overlay-card__tit  { font-size: clamp(22px, 1.6667vw, 32px); font-weight: 700; line-height: 1.3; }
.overlay-card__desc { font-size: clamp(14px, 0.9375vw, 18px); line-height: 1.6; color: rgba(255, 255, 255, .8); text-wrap: pretty; }

@media (hover: hover) {
  .overlay-card:hover .overlay-card__bg { transform: scale(1.06); }
}

/* ---- 05. CTA 배너 ---- */
.sub-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 2.0833vw, 40px);
  padding: clamp(90px, 7.8125vw, 150px) var(--sub-pad-x);
  overflow: hidden;
  background: #000;
  text-align: center;
  isolation: isolate;
}

.sub-cta__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .45;
}

.sub-cta__tit {
  font-size: clamp(24px, 2.0833vw, 40px);
  font-weight: 700;
  line-height: 1.45;
  color: #fff;
  text-wrap: balance;
  word-break: keep-all;
}


/* ==========================================================================
   04. 제품 상세 공통 컴포넌트 (1_2_x ~ 1_4_x)
   · 도깨비(TKB) CMS 를 기준으로 제작 — 동일 구조 페이지에서 섹션 조합만 바꿔 재사용
   ========================================================================== */

/* --------------------------------------------------------------------------
   04-1. 섹션 타이틀 · 버튼 · 태그 · 불릿
   -------------------------------------------------------------------------- */
/* 섹션 타이틀 : 좌측 정렬 + 우상단 주황 점 */
.sec-tit {
  position: relative;
  display: inline-block;
  margin-bottom: clamp(28px, 2.3958vw, 46px);
  padding-right: 18px;
  font-size: clamp(26px, 2.0833vw, 40px);                    /* 40 / 1920 */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--sub-ink);
}

.sec-tit::after {
  content: "";
  position: absolute;
  top: .1em;
  right: 0;
  width: clamp(7px, 0.5208vw, 10px);                         /* 타이틀 폰트와 같은 비율로 축소 */
  height: clamp(7px, 0.5208vw, 10px);
  border-radius: 50%;
  background: var(--sub-orange);
}

.sub-section--dark .sec-tit { color: #fff; }

/* 리드 문장형 타이틀 (24 / 1920) */
.sec-lead {
  margin-bottom: clamp(24px, 2.1875vw, 42px);
  font-size: clamp(19px, 1.25vw, 24px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--sub-ink);
  word-break: keep-all;
}

/* 섹션 타이틀 + 보조 설명 (좌우 배치) */
.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 30px;
  margin-bottom: clamp(28px, 2.3958vw, 46px);
}

.sec-head .sec-tit { margin-bottom: 0; }
.sec-head__desc { font-size: clamp(15px, 0.9375vw, 18px); line-height: 1.5; color: var(--sub-text); word-break: keep-all; }

/* 섹션 가운데 헤드 (타이틀 + 설명) */
.sec-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 0.9375vw, 18px);
  margin-bottom: clamp(36px, 3.125vw, 60px);
  text-align: center;
}

.sec-center .sec-tit { margin-bottom: 0; }
.sec-center__desc {
  max-width: 760px;
  font-size: clamp(15px, 0.9896vw, 19px);
  line-height: 1.6;
  color: var(--sub-text);
  word-break: keep-all;
  text-wrap: pretty;
}

.sub-section--dark .sec-head__desc,
.sub-section--dark .sec-center__desc { color: rgba(255, 255, 255, .6); }

/* 라인 버튼 (소개서 다운로드 / 문의하기) */
.btn-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: clamp(150px, 9.375vw, 180px);
  height: clamp(42px, 2.3958vw, 46px);
  padding: 0 22px;
  border: 1px solid #d9d9d9;
  border-radius: 999px;
  background: #fff;
  font-size: clamp(14px, 0.7813vw, 15px);
  font-weight: 500;
  color: #333;
  transition: border-color .25s ease, color .25s ease, box-shadow .25s ease;
}

/* 아이콘은 인라인 SVG(fill="currentColor") — hover 시 텍스트와 함께 색상 전환 */
.btn-line__icon {
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: inherit;
  transition: transform .3s ease;
}

@media (hover: hover) {
  .btn-line:hover { border-color: var(--sub-orange); color: var(--sub-orange); box-shadow: 0 6px 18px rgba(255, 103, 0, .12); }
  .btn-line[download]:hover .btn-line__icon       { animation: btn-line-bounce .7s ease; }
  .btn-line:not([download]):hover .btn-line__icon { transform: rotate(-8deg) scale(1.08); }
}

@keyframes btn-line-bounce {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(3px); }
  70%      { transform: translateY(-1px); }
}

/* 태그 칩 */
.tag-list { display: flex; flex-wrap: wrap; gap: 10px; }

.tag {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 17px;
  border-radius: 999px;
  background: #f1f2f4;
  font-size: clamp(13px, 0.7813vw, 15px);
  font-weight: 500;
  color: #555;
}

.tag--point { background: var(--sub-orange-soft); color: var(--sub-orange); }
.tag-list--sm .tag { height: 32px; padding: 0 10px; border-radius: 4px; }

/* 점 불릿 리스트 */
.dot-list { display: flex; flex-direction: column; gap: clamp(8px, 0.7292vw, 14px); }

.dot-list li {
  position: relative;
  padding-left: 24px;
  font-size: clamp(15px, 0.8854vw, 17px);
  line-height: 1.5;
  color: #444;
}

.dot-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sub-orange);
}

/* --------------------------------------------------------------------------
   04-2. 제품 소개
   -------------------------------------------------------------------------- */
.sub-content .prod-intro { padding-top: clamp(32px, 2.6042vw, 50px); }

.prod-intro__actions { display: flex; justify-content: flex-end; gap: 10px; }

.prod-intro__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(32px, 4.1667vw, 80px);
  margin-top: clamp(20px, 2.0833vw, 40px);
}

.prod-intro__line { width: 71px; height: 3px; margin-bottom: clamp(28px, 2.3958vw, 46px); }

.prod-intro__tit {
  margin-bottom: clamp(24px, 2.0833vw, 40px);
  font-size: clamp(26px, 2.2917vw, 44px);                    /* 44 / 1920 */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

.prod-intro__desc {
  max-width: 1180px;
  font-size: clamp(15px, 0.9896vw, 19px);
  line-height: 1.55;
  color: var(--sub-text);
  word-break: keep-all;
  text-wrap: pretty;
}

.prod-intro__desc + .prod-intro__desc { margin-top: 8px; }
.prod-intro__desc strong { font-weight: 600; color: var(--sub-ink); }
.prod-intro .tag-list { margin-top: clamp(24px, 2.2917vw, 44px); }

.prod-intro__logo     { width: clamp(180px, 17.1875vw, 330px); margin-top: clamp(0px, 1.5625vw, 30px); }
.prod-intro__logo img { width: 100%; }

/* ---- 우측 비주얼 카드 (로고 미보유 페이지 · 알림톡 / ICT 공용) ---- */
.intro-visual {
  position: relative;
  width: clamp(320px, 23.9583vw, 460px);                     /* 460 / 1920 */
  padding: clamp(24px, 2.0833vw, 40px);
  overflow: hidden;
  border-radius: 32px;
  background: var(--sub-gray-bg);
  isolation: isolate;
}

/* 우상단 장식 원 */
.intro-visual::before {
  content: "";
  position: absolute;
  top: -70px;
  right: -70px;
  z-index: -1;
  width: 220px;
  height: 220px;
  border: 1px dashed var(--sub-orange-line);
  border-radius: 50%;
}

.intro-visual__head { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(20px, 1.5625vw, 30px); }

.intro-visual__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 3.3333vw, 64px);
  aspect-ratio: 1;
  border-radius: 18px;
  background: var(--sub-orange);
  color: #fff;
  box-shadow: 0 10px 24px rgba(255, 103, 0, .28);
}

.intro-visual__icon svg   { width: 55%; height: 55%; }
.intro-visual__name       { font-size: clamp(18px, 1.1458vw, 22px); font-weight: 700; color: var(--sub-ink); }
.intro-visual__name small { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--sub-muted); }
.intro-visual__list       { display: flex; flex-direction: column; gap: 12px; }

.intro-bubble {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 88%;
  padding: 14px 16px;
  border-radius: 16px 16px 16px 4px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .05);
}

.intro-bubble--shift { margin-left: auto; border-radius: 16px 16px 4px 16px; }
.intro-bubble--full  { width: 100%; border-radius: 16px; }

.intro-bubble__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sub-orange-soft);
  color: var(--sub-orange);
}

.intro-bubble__icon svg    { width: 18px; height: 18px; }
.intro-bubble__icon--dark  { background: var(--sub-ink); color: #fff; }
.intro-bubble__txt         { min-width: 0; font-size: 13px; line-height: 1.45; color: var(--sub-text); word-break: keep-all; }
.intro-bubble__txt strong  { display: block; font-size: 14px; font-weight: 700; color: var(--sub-ink); }

/* --------------------------------------------------------------------------
   04-3. 카드류
   · 공통 hover : 주황 라인 + 옅은 그림자 + 4px 상승
   -------------------------------------------------------------------------- */
@media (hover: hover) {
  .check-card:hover,
  .icon-card:hover,
  .step-list__item:hover,
  .env-card:hover,
  .ai-formula__item:hover { border-color: var(--sub-orange-line); box-shadow: 0 12px 30px rgba(0, 0, 0, .05); }

  .icon-card:hover,
  .step-list__item:hover,
  .env-card:hover,
  .ai-formula__item:hover { transform: translateY(-4px); }
}

/* ---- 체크 카드 (인증/수상) ---- */
.check-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.5625vw, 30px);
}

.check-card {
  padding: clamp(24px, 2.0833vw, 40px);
  border: 1px solid var(--sub-line);
  border-radius: 10px;
  background: #fff;
  transition: border-color .3s ease, box-shadow .3s ease;
}

.check-card__tit {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(16px, 0.9375vw, 18px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--sub-ink);
  word-break: keep-all;
}

.check-card__icon {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--sub-orange-soft) 0 13px, transparent 14px);
}

/* 점선 링 — 둥근 점(stroke-dasharray 0 + round cap), hover 시 이 레이어만 회전 */
.check-card__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18.6' fill='none' stroke='%23ff6700' stroke-width='2.4' stroke-linecap='round' stroke-dasharray='0 8.35'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transition: transform .6s var(--sub-ease);
}

.check-card__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 9px;
  height: 5px;
  border-left: 1.6px solid var(--sub-orange);
  border-bottom: 1.6px solid var(--sub-orange);
  transform: translate(-50%, -50%) rotate(-45deg);
}

.check-card__desc {
  margin-top: 14px;
  font-size: clamp(14px, 0.7813vw, 15px);
  line-height: 1.6;
  color: var(--sub-text);
  word-break: keep-all;
}

@media (hover: hover) {
  .check-card:hover .check-card__icon::before { transform: rotate(180deg); }
}

/* ---- 아이콘 카드 (4단) ---- */
.icon-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.25vw, 24px); }

.icon-card {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 1.875vw, 36px);
  border: 1px solid var(--sub-line);
  border-radius: 16px;
  background: #fff;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.icon-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(48px, 2.9167vw, 56px);
  aspect-ratio: 1;
  margin-bottom: clamp(20px, 1.875vw, 36px);
  border-radius: 14px;
  background: var(--sub-orange-soft);
  color: var(--sub-orange);
  transition: background-color .3s ease, color .3s ease;
}

.icon-card__icon svg { width: 52%; height: 52%; }
.icon-card__label    { margin-bottom: 8px; font-size: clamp(13px, 0.7813vw, 15px); font-weight: 600; color: var(--sub-orange); }
.icon-card__tit      { font-size: clamp(17px, 1.0417vw, 20px); font-weight: 700; line-height: 1.4; color: var(--sub-ink); word-break: keep-all; }
.icon-card__desc     { margin-top: 10px; font-size: clamp(14px, 0.7813vw, 15px); line-height: 1.6; color: var(--sub-text); word-break: keep-all; text-wrap: pretty; }

@media (hover: hover) {
  .icon-card:hover .icon-card__icon { background: var(--sub-orange); color: #fff; }
}

/* ---- 다크 섹션 카드 (4단) ---- */
.eff-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.25vw, 24px); }

.eff-card {
  display: flex;
  flex-direction: column;
  min-height: clamp(240px, 15.625vw, 300px);
  padding: clamp(24px, 1.875vw, 36px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(6px);
  transition: border-color .3s ease, background-color .3s ease, transform .3s ease;
}

.eff-card__top  { display: flex; align-items: center; justify-content: space-between; padding-bottom: clamp(28px, 2.6042vw, 50px); }
.eff-card__num  { font-size: clamp(15px, 0.9375vw, 18px); font-weight: 700; color: var(--sub-orange); }
.eff-card__icon {
  width: clamp(34px, 2.0833vw, 40px);
  height: clamp(34px, 2.0833vw, 40px);
  color: rgba(255, 255, 255, .8);
  transition: color .3s ease, transform .5s var(--sub-ease);
}
.eff-card__icon svg { width: 100%; height: 100%; }
.eff-card__tit  { font-size: clamp(18px, 1.1458vw, 22px); font-weight: 700; line-height: 1.4; color: #fff; word-break: keep-all; }
.eff-card__desc { margin-top: 12px; font-size: clamp(14px, 0.8333vw, 16px); line-height: 1.55; color: rgba(255, 255, 255, .6); word-break: keep-all; text-wrap: pretty; }

@media (hover: hover) {
  .eff-card:hover { border-color: rgba(255, 103, 0, .6); background: rgba(255, 103, 0, .08); transform: translateY(-4px); }
  .eff-card:hover .eff-card__icon { color: var(--sub-orange); transform: rotate(-8deg) scale(1.08); }
}

/* ---- 벤토 그리드 (다크 섹션용 · 와이드 2칸 + 일반 1칸 교차) ---- */
.bento-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.25vw, 24px); }

.bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(40px, 4.1667vw, 80px);
  min-height: clamp(260px, 16.6667vw, 320px);
  padding: clamp(24px, 2.0833vw, 40px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 24px;
  background: rgba(255, 255, 255, .04);
  isolation: isolate;
  transition: border-color .35s ease, background-color .35s ease, transform .35s ease;
}

.bento-card--wide  { grid-column: span 2; }
.bento-card--point { border-color: transparent; background: linear-gradient(135deg, #ff7a1a 0%, var(--sub-orange) 45%, #c94c00 100%); }

.bento-card__deco {
  position: absolute;
  right: clamp(-40px, -2.0833vw, -20px);
  bottom: clamp(-40px, -2.0833vw, -20px);
  z-index: -1;
  width: clamp(160px, 11.4583vw, 220px);
  height: clamp(160px, 11.4583vw, 220px);
  color: #fff;
  opacity: .06;
  stroke-width: 1;
  transition: transform .8s var(--sub-ease), opacity .4s ease;
}

.bento-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(48px, 2.9167vw, 56px);
  height: clamp(48px, 2.9167vw, 56px);
  border-radius: 14px;
  background: rgba(255, 103, 0, .14);
  color: var(--sub-orange);
}

.bento-card__icon svg { width: 52%; height: 52%; }
.bento-card__body { max-width: 520px; }
.bento-card__num  { font-size: clamp(13px, 0.7813vw, 15px); font-weight: 700; color: var(--sub-orange); }
.bento-card__tit  { margin-top: 8px; font-size: clamp(20px, 1.4583vw, 28px); font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; color: #fff; word-break: keep-all; }
.bento-card__desc { margin-top: 12px; font-size: clamp(14px, 0.8854vw, 17px); line-height: 1.6; color: rgba(255, 255, 255, .6); word-break: keep-all; text-wrap: pretty; }

/* 포인트(주황) 카드 */
.bento-card--point .bento-card__deco { opacity: .16; }
.bento-card--point .bento-card__icon { background: rgba(255, 255, 255, .2); color: #fff; }
.bento-card--point .bento-card__num  { color: rgba(255, 255, 255, .8); }
.bento-card--point .bento-card__desc { color: rgba(255, 255, 255, .9); }

@media (hover: hover) {
  .bento-card:hover { transform: translateY(-4px); }
  .bento-card:not(.bento-card--point):hover { border-color: rgba(255, 103, 0, .5); background: rgba(255, 103, 0, .06); }
  .bento-card:hover .bento-card__deco { transform: rotate(-10deg) scale(1.08); opacity: .12; }
  .bento-card--point:hover .bento-card__deco { opacity: .24; }
}

/* ---- 주요 기능 카드 (2단 / 3단) ---- */
.func-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.0833vw, 40px);
}

.func-card {
  overflow: hidden;
  border: 1px solid var(--sub-line);
  border-radius: 20px;
  background: #fff;
  transition: box-shadow .35s ease, transform .35s ease;
}

.func-card__thumb     { aspect-ratio: 778 / 310; overflow: hidden; background: #111; }
.func-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--sub-ease); }

.func-card__body { padding: clamp(24px, 2.0833vw, 40px) clamp(24px, 2.0833vw, 40px) clamp(28px, 2.6042vw, 50px); }

.func-card__tit {
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 0.8333vw, 16px);
  margin-bottom: clamp(18px, 1.5625vw, 30px);
  font-size: clamp(21px, 1.5625vw, 30px);                    /* 30 / 1920 */
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sub-ink);
}

.func-card__num  { font-size: .87em; font-weight: 700; color: var(--sub-orange); }
.func-card__desc { font-size: clamp(15px, 0.8854vw, 17px); line-height: 1.6; color: #444; word-break: keep-all; text-wrap: pretty; }
.func-card .tag-list { margin-top: clamp(18px, 1.5625vw, 30px); }

.func-card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.5625vw, 30px); }
.func-card-grid--3 .func-card__thumb { aspect-ratio: 16 / 9; }
.func-card-grid--3 .func-card__tit   { font-size: clamp(20px, 1.3542vw, 26px); }

@media (hover: hover) {
  .func-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 0, 0, .08); }
  .func-card:hover .func-card__thumb img { transform: scale(1.05); }
}

/* ---- 도입사례 카드 (3단) ---- */
.case-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.5625vw, 30px); }

.case-card {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.0833vw, 40px);
  border: 1px solid var(--sub-line);
  border-radius: 20px;
  background: #fff;
  transition: border-color .3s ease, box-shadow .35s ease, transform .35s ease;
}

.case-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: clamp(20px, 1.5625vw, 30px);
  border-bottom: 1px solid var(--sub-line);
}

.case-card__logo  { width: auto; max-width: 70%; height: clamp(30px, 1.875vw, 36px); object-fit: contain; object-position: left center; }
.case-card__mark  { flex-shrink: 0; width: 28px; height: 21px; color: var(--sub-orange); opacity: .25; transition: opacity .3s ease; }
.case-card__tit   { font-size: clamp(18px, 1.1458vw, 22px); font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; color: var(--sub-ink); word-break: keep-all; }
.case-card__quote { flex: 1; padding: clamp(20px, 1.5625vw, 30px) 0; }
.case-card__quote p { font-size: clamp(15px, 0.8854vw, 17px); line-height: 1.7; color: #333; word-break: keep-all; text-wrap: pretty; }
.case-card__quote p + p { margin-top: 10px; }

.case-card__org        { display: flex; align-items: center; gap: 10px; font-size: clamp(14px, 0.7813vw, 15px); }
.case-card__org strong { font-weight: 700; color: var(--sub-ink); }
.case-card__org span   { padding: 4px 10px; border-radius: 4px; background: var(--sub-orange-soft); font-size: 13px; font-weight: 500; color: var(--sub-orange); }

.case-card__foot       { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.case-card__more       { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(14px, 0.8333vw, 16px); font-weight: 600; color: var(--sub-ink); transition: color .25s ease; }
.case-card__more-arrow { width: 9px; height: 9px; transform: rotate(135deg); transition: transform .3s ease; }

@media (hover: hover) {
  .case-card:hover { border-color: var(--sub-orange-line); box-shadow: 0 18px 40px rgba(0, 0, 0, .06); transform: translateY(-6px); }
  .case-card:hover .case-card__mark { opacity: 1; }
  .case-card__more:hover { color: var(--sub-orange); }
  .case-card__more:hover .case-card__more-arrow { transform: translateX(3px) rotate(135deg); }
}

/* ---- 지원범위 · 구축환경 카드 ---- */
.env-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.25vw, 24px); }

.env-card {
  display: flex;
  align-items: center;
  gap: clamp(18px, 1.5625vw, 30px);
  padding: clamp(24px, 2.0833vw, 40px);
  border: 1px solid var(--sub-line);
  border-radius: 20px;
  background: #fff;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.env-card__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: clamp(64px, 4.1667vw, 80px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sub-orange-soft);
  color: var(--sub-orange);
  transition: background-color .3s ease, color .3s ease;
}

.env-card__icon svg { width: 46%; height: 46%; }
.env-card__tit  { font-size: clamp(18px, 1.1458vw, 22px); font-weight: 700; line-height: 1.4; color: var(--sub-ink); }
.env-card__desc { margin-top: 10px; font-size: clamp(14px, 0.8854vw, 17px); line-height: 1.6; color: var(--sub-text); word-break: keep-all; text-wrap: pretty; }

@media (hover: hover) {
  .env-card:hover .env-card__icon { background: var(--sub-orange); color: #fff; }
}

/* --------------------------------------------------------------------------
   04-4. 서비스 특징 (스크린샷 겹침형 · 다크)
   -------------------------------------------------------------------------- */
.svc {
  display: grid;
  grid-template-columns: minmax(0, 782fr) minmax(0, 703fr);
  align-items: center;
  gap: clamp(40px, 6.0938vw, 117px);
}

/* 스크린샷 겹침 — 뒤(좌상단) / 앞(우하단) */
.svc__shots { position: relative; aspect-ratio: 782 / 480; }

.svc__shot {
  position: absolute;
  width: 90.8%;
  overflow: hidden;
  border-radius: clamp(10px, 0.8333vw, 16px);
}

.svc__shot--back {
  left: 0;
  top: 0;
  height: 90.6%;
  object-fit: cover;
  object-position: left top;
  opacity: .9;
}

.svc__shot--front {
  right: 0;
  bottom: 0;
  height: 94.8%;
  background: #fff;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
}

.svc__shot--front img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }

.svc__list { display: flex; flex-direction: column; gap: clamp(28px, 1.5104vw, 29px); }
.svc__item { position: relative; padding-left: clamp(20px, 1.5625vw, 30px); }

/* 좌측 주황 라인 — 등장 시 위에서 아래로 그려짐 */
.svc__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--sub-orange);
  transform-origin: top;
  transition: transform .9s var(--sub-ease) calc(var(--reveal-delay, 0s) + .25s);
}

.is-reveal-ready .svc__item:not(.is-revealed)::before { transform: scaleY(0); }

.svc__tit  { font-size: clamp(18px, 1.25vw, 24px); font-weight: 700; line-height: 1.4; color: #fff; word-break: keep-all; }
.svc__desc { margin-top: clamp(10px, 1.0417vw, 20px); font-size: clamp(14px, 0.8333vw, 16px); line-height: 1.55; color: rgba(255, 255, 255, .6); word-break: keep-all; }

/* --------------------------------------------------------------------------
   04-5. 포인트 그리드 · 스텝 · 기능 요약
   -------------------------------------------------------------------------- */
/* ---- 포인트 그리드 (번호 + 제목 + 설명) ---- */
.point-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(40px, 3.125vw, 60px);
  overflow: hidden;
  border: 1px solid var(--sub-line);
  border-radius: 20px;
  background: var(--sub-line);
}

.point-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(24px, 1.5625vw, 30px) clamp(16px, 1.5625vw, 30px);
  background: #fff;
  text-align: center;
  transition: background-color .3s ease;
}

.point-grid__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: 1px solid var(--sub-orange);
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--sub-orange);
  transition: background-color .3s ease, color .3s ease, transform .3s ease;
}

.point-grid__tit  { margin-top: 16px; font-size: clamp(17px, 1.0417vw, 20px); font-weight: 700; color: var(--sub-ink); }
.point-grid__desc { margin-top: clamp(12px, 0.9375vw, 18px); font-size: clamp(14px, 0.7813vw, 15px); line-height: 1.45; color: #666; word-break: keep-all; text-wrap: pretty; }

/* 3단 변형 (헤드 바로 아래 배치) */
.point-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }

@media (hover: hover) {
  .point-grid__item:hover { background: #fffaf6; }
  .point-grid__item:hover .point-grid__num { background: var(--sub-orange); color: #fff; transform: translateY(-3px); }
}

/* ---- 구분선 리스트 (3단 · 세로 구분선 + 타이틀/아이콘 + 설명) ---- */
.divide-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.divide-list__item {
  padding: 0 clamp(20px, 2.0833vw, 40px);
  border-left: 1px solid var(--sub-line);
}

.divide-list__item:first-child { padding-left: 0; border-left: 0; }

.divide-list__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(14px, 1.25vw, 24px); }
.divide-list__tit  { font-size: clamp(18px, 1.1458vw, 22px); font-weight: 700; color: var(--sub-ink); }
.divide-list__icon { flex-shrink: 0; width: 32px; height: 32px; color: #b5b5b5; }
.divide-list__desc { font-size: clamp(14px, 0.8854vw, 17px); line-height: 1.65; color: var(--sub-text); word-break: keep-all; text-wrap: pretty; }

/* ---- 도입 절차 스텝 (4단 / 5단) ---- */
.step-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.5625vw, 30px); counter-reset: step; }
.step-list--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.step-list__item {
  position: relative;
  padding: clamp(24px, 2.0833vw, 40px);
  border: 1px solid var(--sub-line);
  border-radius: 20px;
  background: #fff;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

/* 스텝 사이 화살표(>) */
.step-list__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(clamp(16px, 1.5625vw, 30px) / -2 - 5px);
  z-index: 1;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--sub-orange);
  border-right: 2px solid var(--sub-orange);
  transform: translateY(-50%) rotate(45deg);
}

.step-list__num {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--sub-orange-soft);
  font-size: clamp(12px, 0.7292vw, 14px);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--sub-orange);
  transition: background-color .3s ease, color .3s ease;
}

.step-list__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(48px, 2.9167vw, 56px);
  aspect-ratio: 1;
  margin-top: clamp(18px, 1.5625vw, 30px);
  border-radius: 14px;
  background: var(--sub-gray-bg);
  color: var(--sub-ink);
  transition: background-color .3s ease, color .3s ease;
}

.step-list__icon svg { width: 52%; height: 52%; }
.step-list__tit  { margin-top: clamp(18px, 1.5625vw, 30px); font-size: clamp(19px, 1.25vw, 24px); font-weight: 700; color: var(--sub-ink); }
.step-list__desc { margin-top: 8px; font-size: clamp(14px, 0.8333vw, 16px); line-height: 1.55; color: var(--sub-text); word-break: keep-all; }
.step-list--5 .step-list__tit { margin-top: 16px; }

@media (hover: hover) {
  .step-list__item:hover .step-list__num  { background: var(--sub-orange); color: #fff; }
  .step-list__item:hover .step-list__icon { background: var(--sub-orange-soft); color: var(--sub-orange); }
}

/* ---- 기능 요약 패널 (좌측 헤드 + 우측 아이콘 칩 그리드) ---- */
.feature-summary {
  display: grid;
  grid-template-columns: minmax(0, 360fr) minmax(0, 1180fr);
  align-items: center;
  gap: clamp(28px, 3.125vw, 60px);
  margin-top: clamp(40px, 3.125vw, 60px);
  padding: clamp(28px, 3.125vw, 60px);
  border-radius: 24px;
  background: var(--sub-gray-bg);
}

.feature-summary__eyebrow { font-size: clamp(13px, 0.7813vw, 15px); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sub-orange); }
.feature-summary__tit     { margin-top: 12px; font-size: clamp(22px, 1.6667vw, 32px); font-weight: 400; line-height: 1.4; letter-spacing: -0.02em; color: var(--sub-ink); word-break: keep-all; }
.feature-summary__tit strong { font-weight: 700; }
.feature-summary__list    { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 0.7292vw, 14px); }

.feature-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: clamp(60px, 3.6458vw, 70px);
  padding: 10px clamp(12px, 0.9375vw, 18px);
  border: 1px solid transparent;
  border-radius: 14px;
  background: #fff;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.feature-chip__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sub-orange-soft);
  color: var(--sub-orange);
  transition: background-color .3s ease, color .3s ease;
}

.feature-chip__icon svg { width: 20px; height: 20px; }
.feature-chip__txt { font-size: clamp(14px, 0.8854vw, 17px); font-weight: 600; color: var(--sub-ink); word-break: keep-all; }

@media (hover: hover) {
  .feature-chip:hover { border-color: rgba(255, 103, 0, .4); box-shadow: 0 10px 24px rgba(0, 0, 0, .05); transform: translateY(-3px); }
  .feature-chip:hover .feature-chip__icon { background: var(--sub-orange); color: #fff; }
}

/* --------------------------------------------------------------------------
   04-6. 배너 (텍스트 배너 · CTA)
   -------------------------------------------------------------------------- */
.sub-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 2.0833vw, 40px);
  min-height: clamp(320px, 22.3958vw, 430px);                /* 430 / 1920 */
  padding: 60px var(--sub-pad-x);
  overflow: hidden;
  background: #000;
  color: #fff;
  text-align: center;
  isolation: isolate;
}

.sub-banner__bg { position: absolute; inset: 0; z-index: -1; }

.sub-banner__bg img {
  position: absolute;
  left: 0;
  top: -18%;
  width: 100%;
  height: 140%;
  object-fit: cover;
  opacity: .55;
}

.sub-banner__tit  { font-size: clamp(26px, 2.0833vw, 40px); font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; word-break: keep-all; }
.sub-banner__desc { font-size: clamp(15px, 1.0417vw, 20px); line-height: 1.5; color: rgba(255, 255, 255, .9); word-break: keep-all; }

/* 배너 타이틀 + 로고 */
.sub-banner__tit--logo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(12px, 1.0417vw, 20px); }
.sub-banner__logo      { width: clamp(56px, 4.1667vw, 80px); border-radius: 18px; }

/* --------------------------------------------------------------------------
   04-7. 구성도
   -------------------------------------------------------------------------- */
.arch {
  display: grid;
  grid-template-columns: minmax(0, 1180fr) minmax(0, 390fr);
  align-items: start;
  gap: clamp(20px, 1.5625vw, 30px);
}

.arch__diagram {
  padding: clamp(14px, 1.0417vw, 20px);
  border: 1px solid var(--sub-line);
  border-radius: 20px;
  background: #fff;
}

.arch__diagram > .arch__row--5 { margin-bottom: 20px; }

.arch__row    { display: grid; gap: 12px; }
.arch__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.arch__row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.arch__row--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.arch__row--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.arch__row--7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }

.arch__box {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 20px 0;
  padding: clamp(12px, 1.0417vw, 20px);
  border: 1px solid var(--sub-line);
  border-radius: 12px;
  background: #fafafb;
}

.arch__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(44px, 2.7083vw, 52px);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: clamp(13px, 0.8333vw, 16px);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  word-break: keep-all;
  transition: transform .25s ease, box-shadow .25s ease;
}

.arch__cell--tall   { min-height: clamp(64px, 4.1667vw, 80px); }
.arch__cell--dark   { background: #1a1c20; color: #fff; }
.arch__cell--orange { background: #f47621; color: #fff; }
.arch__cell--line   { border: 1px solid var(--sub-line); background: #fff; color: #333; }
.arch__cell--point  { border: 1px solid #ffc49a; background: #fff4ec; color: var(--sub-orange); }
.arch__cell--gray   { background: #f1f2f4; color: #333; }
.arch__cell--dashed { min-height: clamp(46px, 2.8125vw, 54px); border: 1px dashed #b5b5b5; color: #333; }

@media (hover: hover) {
  .arch__cell--point:hover,
  .arch__cell--gray:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, .06); }
}

.arch__arrow     { display: flex; justify-content: center; margin: 0 0 20px; color: #777; }
.arch__arrow svg { width: 16px; height: 34px; animation: arch-arrow 2.4s ease-in-out infinite; }

@keyframes arch-arrow {
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(2px); }
}

.arch__layers { display: flex; flex-direction: column; gap: 20px; }

.layer-card {
  min-height: clamp(120px, 7.8125vw, 150px);
  padding: clamp(24px, 2.0833vw, 40px);
  border: 1px solid var(--sub-line);
  border-radius: 20px;
  background: #fff;
  transition: border-color .3s ease;
}

.layer-card__tit  { font-size: clamp(16px, 0.9375vw, 18px); font-weight: 700; color: var(--sub-orange); }
.layer-card__desc { margin-top: clamp(12px, 0.9375vw, 18px); font-size: clamp(14px, 0.7813vw, 15px); line-height: 1.6; color: #333; word-break: keep-all; }

@media (hover: hover) {
  .layer-card:hover { border-color: var(--sub-orange-line); }
}

/* ---- Meta 구성도 ---- */
.meta-arch {
  display: grid;
  grid-template-columns: minmax(0, 240fr) minmax(0, 110fr) minmax(0, 620fr) 40px minmax(0, 240fr);
  align-items: stretch;
  gap: clamp(10px, 0.8333vw, 16px);
  padding: clamp(14px, 1.25vw, 24px);
  border: 1px solid var(--sub-line);
  border-radius: 20px;
  background: var(--sub-gray-bg);
}

.meta-arch__zone  { display: flex; flex-direction: column; gap: 10px; padding: clamp(12px, 0.9375vw, 18px); border: 1px dashed #c9c9c9; border-radius: 14px; background: #fff; }
.meta-arch__stack { display: flex; flex-direction: column; gap: clamp(10px, 0.8333vw, 16px); }
.meta-arch__stack .meta-arch__zone { flex: 1; }
.meta-arch__list  { display: flex; flex-direction: column; gap: 6px; }
.meta-arch__list .arch__cell { flex: 1; min-height: clamp(40px, 2.5vw, 48px); }

.meta-arch__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: clamp(13px, 0.8333vw, 16px);
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  color: var(--sub-ink);
  word-break: keep-all;
}

.meta-arch__link svg { width: 36px; height: 14px; color: var(--sub-orange); }
.meta-arch__next     { display: flex; align-items: center; justify-content: center; color: var(--sub-orange); }
.meta-arch__next svg { width: 20px; height: 20px; }

.meta-arch__core { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.meta-arch__col  { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 10px; background: #f1f2f4; }
.meta-arch__col .arch__cell { flex: 1; }
.meta-arch__col--repo { justify-content: center; }
.meta-arch__col--repo .arch__cell { font-weight: 700; color: var(--sub-ink); }

.meta-arch__base { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.meta-arch__base .arch__cell--full { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   04-8. 테이블
   -------------------------------------------------------------------------- */
/* ---- 스펙 테이블 ---- */
.spec-table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--sub-ink); }

.spec-table th,
.spec-table td {
  padding: clamp(18px, 1.3542vw, 26px) 10px;
  border-bottom: 1px solid var(--sub-line);
  font-size: clamp(15px, 0.8854vw, 17px);
  line-height: 1.5;
  text-align: left;
  vertical-align: middle;
}

.spec-table th { width: clamp(110px, 14.5833vw, 280px); font-weight: 700; white-space: nowrap; color: var(--sub-ink); }
.spec-table td { color: var(--sub-text); word-break: keep-all; }

/* 표 안의 불릿 리스트 — 셀 폰트 크기를 그대로 따름 (스펙 테이블 / 사양 비교표 공용) */
.spec-table td .dot-list li,
.meta-table--spec .dot-list li { font-size: inherit; color: var(--sub-text); }

/* 지원사양 엔진 표기 */
.spec-engine {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--sub-gray-bg);
  font-size: clamp(13px, 0.8333vw, 16px);
  color: var(--sub-text);
}

.spec-engine strong { font-weight: 800; letter-spacing: .08em; color: var(--sub-ink); }

/* ---- 가로 스크롤 안내 — [data-scroll-hint] 안 스크롤 영역에 넘침이 있을 때만 노출 ---- */
.scroll-hint-box { position: relative; }

.scroll-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 18px 12px;
  border-radius: 16px;
  background: rgba(30, 30, 30, .72);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(.92);
  transition: opacity .35s ease, transform .35s ease, visibility .35s;
}

.scroll-hint svg { width: 34px; height: 34px; animation: scroll-hint-swipe 1.6s ease-in-out infinite; }
.scroll-hint-box.is-scrollable .scroll-hint { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.scroll-hint-box.is-scrollable.is-scrolled .scroll-hint { opacity: 0; visibility: hidden; transform: translate(-50%, -50%) scale(.92); }

@keyframes scroll-hint-swipe {
  0%, 100% { transform: translateX(-6px); }
  50%      { transform: translateX(6px); }
}

/* ---- 요금제 비교 테이블 ---- */
.plan-table-wrap { overflow-x: auto; border: 1px solid var(--sub-line); border-radius: 20px; background: #fff; }
.plan-table { width: 100%; min-width: 760px; border-collapse: collapse; table-layout: fixed; }

.plan-table th,
.plan-table td {
  padding: clamp(16px, 1.1458vw, 22px) clamp(14px, 1.25vw, 24px);
  border-bottom: 1px solid var(--sub-line);
  font-size: clamp(14px, 0.8333vw, 16px);
  line-height: 1.5;
  text-align: center;
  color: var(--sub-text);
  word-break: keep-all;
}

.plan-table tbody tr:last-child th,
.plan-table tbody tr:last-child td { border-bottom: 0; }

.plan-table thead th {
  padding-top: clamp(28px, 2.0833vw, 40px);
  padding-bottom: clamp(24px, 1.6667vw, 32px);
  border-bottom: 2px solid var(--sub-ink);
  vertical-align: bottom;
}

.plan-table thead th:first-child,
.plan-table tbody th { width: 22%; text-align: left; font-weight: 700; color: var(--sub-ink); }

.plan-table .is-point { background: #fffaf6; }
.plan-table thead .is-point { border-bottom-color: var(--sub-orange); }
.plan-table__badge { display: inline-block; margin-bottom: 10px; padding: 3px 10px; border-radius: 999px; background: var(--sub-orange); font-size: 12px; font-weight: 700; color: #fff; }
.plan-table__name  { display: block; font-size: clamp(18px, 1.25vw, 24px); font-weight: 700; color: var(--sub-ink); }
.plan-table__price { display: block; margin-top: 6px; font-size: clamp(13px, 0.7813vw, 15px); font-weight: 500; color: var(--sub-muted); }
.plan-table__check { display: inline-block; width: 12px; height: 7px; border-left: 2px solid var(--sub-orange); border-bottom: 2px solid var(--sub-orange); transform: translateY(-3px) rotate(-45deg); }
.plan-table__none  { color: #c4c4c4; }
.plan-note { margin-top: 16px; font-size: clamp(13px, 0.7813vw, 15px); color: var(--sub-muted); word-break: keep-all; }

/* ---- 표준화 비교 (표준화 전 / 후) ---- */
.std-compare { display: flex; flex-direction: column; gap: clamp(16px, 1.25vw, 24px); }
.std-row { display: grid; grid-template-columns: minmax(0, 1fr) clamp(200px, 12.5vw, 240px); align-items: center; gap: clamp(16px, 1.5625vw, 30px); }
.std-row__label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: clamp(14px, 0.8333vw, 16px); font-weight: 700; color: var(--sub-ink); }
.std-row__label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #b5b5b5; }
.std-row--after .std-row__label::before { background: var(--sub-orange); }

.meta-table-wrap { overflow-x: auto; border: 1px solid var(--sub-line); border-radius: 16px; background: #fff; }
.meta-table { width: 100%; min-width: 640px; border-collapse: collapse; }

.meta-table th,
.meta-table td {
  padding: clamp(12px, 0.9375vw, 18px) 14px;
  border-bottom: 1px solid var(--sub-line);
  font-size: clamp(14px, 0.8333vw, 16px);
  line-height: 1.5;
  text-align: center;
  color: var(--sub-text);
  word-break: keep-all;
}

.meta-table td + td,
.meta-table th + th { border-left: 1px solid var(--sub-line); }
.meta-table thead th { background: #f1f2f4; font-weight: 700; color: var(--sub-ink); }
.meta-table tbody tr:last-child td { border-bottom: 0; }
.meta-table td.is-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(13px, 0.7813vw, 15px); color: #333; }

/* 사양 비교표 (구분 행 헤더 + 좌측 정렬 셀) — ITSM 지원사양 */
.meta-table--spec { min-width: 900px; table-layout: fixed; }
.meta-table--spec thead th:first-child { width: 16%; }
.meta-table--spec tbody th { border-bottom: 1px solid var(--sub-line); background: #fafafb; font-weight: 700; color: var(--sub-ink); }
.meta-table--spec tbody th + td { border-left: 1px solid var(--sub-line); }
.meta-table--spec tbody tr:last-child th { border-bottom: 0; }
.meta-table--spec td { text-align: left; vertical-align: middle; }
.meta-table--spec .dot-list { gap: 4px; }

.std-row--after .meta-table-wrap { border-color: var(--sub-orange-line); }
.std-row--after .meta-table thead th { background: #fff4ec; color: var(--sub-orange); }
.std-row--after .meta-table thead th + th { border-left-color: #ffd9bf; }

.std-tags { display: flex; flex-direction: column; gap: 10px; margin-top: 30px; }
.std-tag  { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px; border: 1px solid var(--sub-line); border-radius: 12px; background: #fff; font-size: clamp(14px, 0.8333vw, 16px); font-weight: 600; color: #666; }
.std-tag__icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #f1f2f4; color: #999; }
.std-tag__icon svg { width: 12px; height: 12px; }
.std-row--after .std-tag { border-color: transparent; background: var(--sub-orange-soft); color: var(--sub-orange); }
.std-row--after .std-tag__icon { background: var(--sub-orange); color: #fff; }

.std-arrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: calc(clamp(200px, 12.5vw, 240px) + clamp(16px, 1.5625vw, 30px));
  font-size: clamp(13px, 0.7813vw, 15px);
  font-weight: 700;
  color: var(--sub-orange);
}

.std-arrow::before,
.std-arrow::after { content: ""; flex: 1; height: 1px; background: var(--sub-line); }
.std-arrow svg { width: 16px; height: 34px; animation: arch-arrow 2.4s ease-in-out infinite; }

/* ---- 도입 전 / 후 ---- */
.ba-scroll { overflow-x: auto; }
.ba-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }

.ba-table th,
.ba-table td {
  padding: clamp(16px, 1.1458vw, 22px) clamp(14px, 1.25vw, 24px);
  font-size: clamp(14px, 0.8854vw, 17px);
  line-height: 1.5;
  text-align: center;
  word-break: keep-all;
}

.ba-table thead th  { font-size: clamp(16px, 0.9375vw, 18px); font-weight: 700; }
.ba-table__before   { border-bottom: 1px solid var(--sub-line); background: #fff; color: #888; }
.ba-table__after    { border-bottom: 1px solid var(--sub-line); background: #fff; color: var(--sub-ink); font-weight: 500; }
.ba-table__mid      { width: 24%; font-weight: 700; color: var(--sub-ink); }

.ba-table thead .ba-table__before { border-bottom: 0; border-radius: 16px 16px 0 0; background: #4a4c52; color: #fff; }
.ba-table thead .ba-table__after  { border-bottom: 0; border-radius: 16px 16px 0 0; background: var(--sub-orange); color: #fff; }
.ba-table thead .ba-table__mid    { color: var(--sub-orange); }
.ba-table thead .ba-table__mid svg { width: 28px; height: 12px; vertical-align: middle; }

.ba-table tbody td:first-child { border-left: 1px solid var(--sub-line); border-right: 1px solid var(--sub-line); }
.ba-table tbody td:last-child  { border-left: 1px solid rgba(255, 103, 0, .3); border-right: 1px solid rgba(255, 103, 0, .3); }
.ba-table tbody tr:last-child td:first-child { border-radius: 0 0 16px 16px; }
.ba-table tbody tr:last-child td:last-child  { border-radius: 0 0 16px 16px; border-bottom-color: rgba(255, 103, 0, .3); }
.ba-table tbody .ba-table__mid { position: relative; }
.ba-table tbody .ba-table__mid span { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: 999px; background: #e7e9ed; font-size: clamp(13px, 0.8333vw, 16px); }

/* --------------------------------------------------------------------------
   04-9. 주요 기능 행 리스트 · FAQ · 고객사
   -------------------------------------------------------------------------- */
/* ---- 주요 기능 (기능 행 리스트) ---- */
.func-list { border-top: 2px solid var(--sub-ink); }

.func-row {
  display: grid;
  grid-template-columns: minmax(0, 420fr) minmax(0, 1180fr);
  gap: clamp(16px, 2.0833vw, 40px);
  padding: clamp(26px, 2.0833vw, 40px) 10px;
  border-bottom: 1px solid var(--sub-line);
  transition: background-color .3s ease;
}

.func-row__tit {
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 0.8333vw, 16px);
  font-size: clamp(18px, 1.1458vw, 22px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--sub-ink);
  word-break: keep-all;
}

.func-row__num { font-size: .82em; color: var(--sub-orange); }
.func-row__sub { display: block; margin-top: 4px; font-size: clamp(14px, 0.8333vw, 16px); font-weight: 500; color: var(--sub-muted); }
.func-row .dot-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 0.7292vw, 14px) 30px; }

@media (hover: hover) {
  .func-row:hover { background: #fffaf6; }
}

/* ---- FAQ 아코디언 ---- */
.faq       { border-top: 2px solid var(--sub-ink); }
.faq__item { border-bottom: 1px solid var(--sub-line); }

.faq__question {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.0417vw, 20px);
  width: 100%;
  min-height: clamp(64px, 3.9063vw, 75px);
  padding: 16px 10px;
  font-size: clamp(15px, 0.8854vw, 17px);
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  color: var(--sub-ink);
  transition: color .25s ease;
}

.faq__question:hover         { color: var(--sub-orange); }
.faq__question:focus-visible { outline: 2px solid var(--sub-orange); outline-offset: -2px; border-radius: 4px; }

.faq__mark   { flex-shrink: 0; width: 16px; font-size: clamp(16px, 0.9375vw, 18px); font-weight: 700; color: var(--sub-orange); }
.faq__q-text { flex: 1; min-width: 0; word-break: keep-all; }

.faq__arrow { flex-shrink: 0; width: 13px; height: 7px; margin-right: 6px; filter: brightness(0); opacity: .6; transition: transform .35s ease; }
.faq__item.is-open .faq__arrow { transform: rotate(180deg); }

/* grid-template-rows 0fr → 1fr 로 높이 자동 애니메이션 */
.faq__answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--sub-ease); }
.faq__item.is-open .faq__answer { grid-template-rows: 1fr; }
.faq__answer-inner { min-height: 0; overflow: hidden; background: var(--sub-gray-bg); }

.faq__answer p {
  display: flex;
  gap: clamp(14px, 1.0417vw, 20px);
  padding: clamp(18px, 1.3542vw, 26px) 10px;
  border-top: 1px solid var(--sub-line);
  font-size: clamp(14px, 0.8333vw, 16px);
  line-height: 1.6;
  color: var(--sub-text);
  word-break: keep-all;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .3s ease, transform .35s ease;
}

.faq__item.is-open .faq__answer p { opacity: 1; transform: none; transition-delay: .08s; }
.faq__answer .faq__mark { color: #999; }

/* ---- 고객사 로고 그리드 ---- */
.client-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.0417vw, 20px); }

.client-grid__item {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 250 / 100;
  padding: 0 clamp(10px, 1.0417vw, 20px);
  border: 1px solid var(--sub-line);
  border-radius: 10px;
  background: #fff;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.client-grid__item img { max-width: min(88%, 221px); max-height: 48%; object-fit: contain; }

/* 로고 미보유 시 텍스트 표기 */
.client-grid__name { font-size: clamp(14px, 0.9375vw, 18px); font-weight: 700; text-align: center; color: #444; word-break: keep-all; }

@media (hover: hover) {
  .client-grid__item:hover { border-color: #d0d0d0; box-shadow: 0 10px 24px rgba(0, 0, 0, .06); transform: translateY(-3px); }
}


/* ==========================================================================
   05. AI Search 전용 (1_4_1 도깨비(TKB) AI Search)
   ========================================================================== */

/* ---- 핵심 기술 공식 : 벡터 DB + RAG + 멀티 LLM Ops ---- */
.ai-formula {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.5625vw, 30px);
}

.ai-formula__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 1.3542vw, 26px);
  width: clamp(190px, 13.5417vw, 260px);                     /* 260 / 1920 */
  padding: clamp(28px, 2.0833vw, 40px) 20px clamp(26px, 1.875vw, 36px);
  border: 1px solid var(--sub-line);
  border-radius: 20px;
  background: #fff;
  text-align: center;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.ai-formula__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(88px, 6.25vw, 120px);                         /* 120 / 1920 */
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sub-gray-bg);
  color: var(--sub-ink);
  transition: background-color .3s ease, color .3s ease;
}

.ai-formula__icon svg { width: 46%; height: 46%; }

.ai-formula__tit {
  font-size: clamp(18px, 1.1458vw, 22px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--sub-ink);
}

/* 카드 사이 + 기호 */
.ai-formula__plus {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.ai-formula__plus::before,
.ai-formula__plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 2px;
  background: var(--sub-orange);
  transform: translate(-50%, -50%);
}

.ai-formula__plus::before { width: 100%; height: 2px; }
.ai-formula__plus::after  { width: 2px; height: 100%; }

@media (hover: hover) {
  .ai-formula__item:hover .ai-formula__icon { background: var(--sub-orange-soft); color: var(--sub-orange); }
}

/* ---- 하이브리드 구조 요약 문장 ---- */
.ai-summary {
  max-width: 1180px;
  margin: clamp(32px, 2.6042vw, 50px) auto clamp(40px, 3.125vw, 60px);
  padding: clamp(24px, 2.0833vw, 40px) clamp(20px, 2.6042vw, 50px);
  border: 1px solid var(--sub-line);
  border-radius: 20px;
  background: #fff;
  font-size: clamp(15px, 0.9896vw, 19px);
  line-height: 1.7;
  text-align: center;
  color: var(--sub-text);
  word-break: keep-all;
  text-wrap: pretty;
}

.ai-summary strong { font-weight: 700; color: var(--sub-ink); }
.ai-summary em     { font-style: normal; font-weight: 700; color: var(--sub-orange); }


/* ==========================================================================
   06. 도깨비 ITSM 전용 (2_1_1 도깨비 ITSM)
   · 목업 이미지 없이 인포그래픽 · 카드 · 타이포그래피로 구성
   ========================================================================== */

/* --------------------------------------------------------------------------
   06-1. 탭 패널 : 좌측 인포그래픽 + 우측 기능 리스트
   -------------------------------------------------------------------------- */
.itsm-panel {
  display: grid;
  grid-template-columns: minmax(0, 820fr) minmax(0, 640fr);
  align-items: center;
  gap: clamp(40px, 5.2083vw, 100px);
  max-width: 1400px;
  margin: 0 auto;
}

/* ---- 인포그래픽 카드 ---- */
.itsm-visual {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 2.6042vw, 50px);
  padding: clamp(24px, 2.6042vw, 50px);
  border: 1px solid var(--sub-line);
  border-radius: 24px;
  background: var(--sub-gray-bg);
}

.itsm-visual__head { display: flex; align-items: center; gap: clamp(14px, 1.0417vw, 20px); }

.itsm-visual__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 3.3333vw, 64px);
  aspect-ratio: 1;
  border-radius: 16px;
  background: var(--sub-orange);
  color: #fff;
}

.itsm-visual__icon svg { width: 50%; height: 50%; }
.itsm-visual__label    { font-size: clamp(13px, 0.7813vw, 15px); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sub-orange); }
.itsm-visual__tit      { margin-top: 6px; font-size: clamp(19px, 1.3542vw, 26px); font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; color: var(--sub-ink); word-break: keep-all; }
.itsm-visual .tag      { background: #fff; }

/* ---- 프로세스 흐름 : 번호 노드 + 점선 연결 ---- */
.itsm-flow {
  --node: clamp(44px, 2.9167vw, 56px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.itsm-flow::before {
  content: "";
  position: absolute;
  top: calc(var(--node) / 2 - 1px);
  left: 10%;
  right: 10%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--sub-orange-line) 0 6px, transparent 6px 12px);
}

.itsm-flow__step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }

.itsm-flow__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--node);
  aspect-ratio: 1;
  border: 1px solid var(--sub-orange);
  border-radius: 50%;
  background: #fff;
  font-size: clamp(13px, 0.8333vw, 16px);
  font-weight: 700;
  color: var(--sub-orange);
  transition: background-color .3s ease, color .3s ease, transform .3s ease;
}

.itsm-flow__step:last-child .itsm-flow__num { background: var(--sub-orange); color: #fff; }
.itsm-flow__txt { font-size: clamp(13px, 0.8333vw, 16px); font-weight: 600; line-height: 1.4; color: var(--sub-ink); word-break: keep-all; }

@media (hover: hover) {
  .itsm-flow__step:hover .itsm-flow__num { background: var(--sub-orange); color: #fff; transform: translateY(-3px); }
}

/* ---- 기능 리스트 : 좌측 주황 라인 ---- */
.itsm-feat       { display: flex; flex-direction: column; gap: clamp(24px, 2.0833vw, 40px); }
.itsm-feat__item { position: relative; padding-left: clamp(20px, 1.5625vw, 30px); }

.itsm-feat__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--sub-orange);
}

.itsm-feat__tit  { font-size: clamp(18px, 1.25vw, 24px); font-weight: 700; line-height: 1.4; color: var(--sub-ink); word-break: keep-all; }
.itsm-feat__desc { margin-top: clamp(8px, 0.625vw, 12px); font-size: clamp(14px, 0.8854vw, 17px); line-height: 1.6; color: var(--sub-text); word-break: keep-all; text-wrap: pretty; }

/* --------------------------------------------------------------------------
   06-2. 통합 플랫폼 공식 카드 (.ai-formula 5단 변형)
   -------------------------------------------------------------------------- */
.ai-formula--5 .ai-formula__item {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: 220px;
  padding-left: 16px;
  padding-right: 16px;
}

.ai-formula__desc { margin-top: 8px; font-size: clamp(13px, 0.7813vw, 15px); line-height: 1.5; color: var(--sub-text); word-break: keep-all; }

/* --------------------------------------------------------------------------
   06-3. 구성도 (.arch 공통 셀 재사용)
   -------------------------------------------------------------------------- */
.itsm-arch            { display: flex; flex-direction: column; gap: 20px; }
.itsm-arch .arch__box { margin: 0; }

/* 프로세스 흐름 — 좁은 화면에서는 가로 스크롤 */
.itsm-arch__scroll { display: flex; flex-direction: column; gap: 12px; overflow-x: auto; }

.itsm-arch__stages,
.itsm-arch__steps {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 20px;
  min-width: 900px;
}

.itsm-arch__steps + .itsm-arch__stages { margin-top: 12px; }
.itsm-arch__stage--5 { grid-column: span 5; }
.itsm-arch__stage--2 { grid-column: span 2; }

.itsm-arch__steps .arch__cell { position: relative; padding: 8px 6px; font-size: clamp(12px, 0.7813vw, 15px); }

/* 단계 사이 화살표(▶) — ITSM 구성도 / 인프라 컨설팅 절차 공용 */
.itsm-arch__steps .arch__cell:not(:last-child)::after,
.infra-proc__steps .arch__cell:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -13px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid #999;
  transform: translateY(-50%);
}

/* 모듈 4단 */
.itsm-arch__modules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.itsm-arch__col     { display: flex; flex-direction: column; gap: 8px; }
.itsm-arch__col .arch__cell--point { font-weight: 700; }

/* --------------------------------------------------------------------------
   06-4. 에디션 카드 (3단)
   -------------------------------------------------------------------------- */
.edition-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.5625vw, 30px);
  max-width: 1400px;
  margin: 0 auto;
}

.edition-card {
  overflow: hidden;
  border: 1px solid var(--sub-line);
  border-radius: 20px;
  background: #fff;
  transition: border-color .3s ease, box-shadow .35s ease, transform .35s ease;
}

.edition-card__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: clamp(22px, 1.5625vw, 30px) 20px;
  background: #f1f2f4;
  text-align: center;
}

.edition-card__step { font-size: clamp(12px, 0.7292vw, 14px); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sub-muted); }
.edition-card__name { font-size: clamp(20px, 1.4583vw, 28px); font-weight: 700; letter-spacing: -0.02em; color: var(--sub-ink); }
.edition-card__list { display: flex; flex-direction: column; gap: clamp(12px, 0.9375vw, 18px); padding: clamp(24px, 2.0833vw, 40px); }

.edition-card__list li {
  position: relative;
  padding-left: 28px;
  font-size: clamp(15px, 0.8854vw, 17px);
  line-height: 1.5;
  color: #444;
  word-break: keep-all;
}

/* 체크 표시 */
.edition-card__list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .45em;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--sub-orange);
  border-bottom: 2px solid var(--sub-orange);
  transform: rotate(-45deg);
}

.edition-card__list strong { font-weight: 700; color: var(--sub-orange); }

/* 포인트(최상위) 에디션 */
.edition-card--point                     { border-color: var(--sub-orange-line); }
.edition-card--point .edition-card__head { background: var(--sub-orange); }
.edition-card--point .edition-card__step { color: rgba(255, 255, 255, .8); }
.edition-card--point .edition-card__name { color: #fff; }

/* 중간(Professional) 에디션 — 옅은 주황 헤더 */
.edition-card--mid .edition-card__head { background: var(--sub-orange-soft); }
.edition-card--mid .edition-card__step { color: var(--sub-orange); }

@media (hover: hover) {
  .edition-card:hover { border-color: var(--sub-orange-line); box-shadow: 0 18px 40px rgba(0, 0, 0, .06); transform: translateY(-6px); }
}


/* ==========================================================================
   07. 도깨비 알림톡 전용 (2_2_1 도깨비 알림톡)
   · 카카오 메시지 캡처 · 관리자 화면 목업 대신 HTML 카드 / 다이어그램으로 구성
   ========================================================================== */

/* --------------------------------------------------------------------------
   07-1. 메시지 미리보기 카드 (4단 / 3단)
   -------------------------------------------------------------------------- */
.msg-grid    { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.5625vw, 30px); }
.msg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.msg-grid__item  { display: flex; flex-direction: column; gap: 16px; }
.msg-grid__body  { padding: 8px 4px 0; }

/* 3단 : 목업 / 설명을 subgrid 행으로 공유해 카드 높이 통일 */
.msg-grid--3 .msg-grid__item { display: grid; grid-row: span 2; grid-template-rows: subgrid; gap: 16px; }

.msg-grid__label {
  align-self: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--sub-ink);
  font-size: clamp(12px, 0.7292vw, 14px);
  font-weight: 600;
  color: #fff;
}

/* 채팅방 배경 */
.msg-stage {
  flex: 1;
  padding: clamp(18px, 1.5625vw, 30px);
  border-radius: 24px;
  background: #e9ecf1;
}

.msg-stage__from   { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: #555; }
.msg-stage__avatar { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 10px; background: var(--sub-orange); color: #fff; }
.msg-stage__avatar svg { width: 60%; height: 60%; }

/* 말풍선 메시지 */
.msg-stage { display: flex; flex-direction: column; }

.msg-mock {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .05);
}
.msg-mock__bar { padding: 10px 16px; background: var(--sub-orange-soft); font-size: 13px; font-weight: 700; color: var(--sub-orange); }

.msg-mock__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: clamp(150px, 9.375vw, 180px);                  /* 카드 간 히어로 높이 통일 */
  padding: 20px 16px;
  border-bottom: 1px solid var(--sub-line);
  text-align: center;
}

.msg-mock__hero > svg { width: 44px; height: 44px; color: var(--sub-orange); }
.msg-mock__logo       { font-size: clamp(26px, 1.875vw, 36px); font-weight: 800; letter-spacing: -0.03em; color: var(--sub-orange); }

/* 로고형 : 심볼 + 워드마크 */
.msg-mock__brand      { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border-radius: 999px; background: var(--sub-orange-soft); }
.msg-mock__brand-icon { display: flex; align-items: center; justify-content: center; width: clamp(38px, 2.3958vw, 46px); aspect-ratio: 1; border-radius: 50%; background: var(--sub-orange); color: #fff; box-shadow: 0 6px 14px rgba(255, 103, 0, .3); }
.msg-mock__brand-icon svg { width: 55%; height: 55%; }
.msg-mock__brand .msg-mock__logo { font-size: clamp(22px, 1.5625vw, 30px); }
.msg-mock__hero-tit   { font-size: clamp(16px, 1.0417vw, 20px); font-weight: 700; line-height: 1.4; color: var(--sub-ink); word-break: keep-all; }
.msg-mock__hero-tit em { font-style: normal; color: var(--sub-orange); }

.msg-mock__hero-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--sub-orange); color: #fff; }
.msg-mock__hero-icon svg { width: 60%; height: 60%; }

/* 쿠폰형 */
.msg-mock__coupon {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 18px;
  border-radius: 10px;
  background: var(--sub-ink);
  font-size: 13px;
  color: rgba(255, 255, 255, .7);
}

.msg-mock__coupon strong { font-size: clamp(18px, 1.25vw, 22px); font-weight: 800; color: #fff; }

.msg-mock__body { flex: 1; padding: 16px; }
.msg-mock__tit  { display: block; margin-bottom: 8px; font-size: clamp(14px, 0.8333vw, 16px); font-weight: 700; line-height: 1.45; color: var(--sub-ink); word-break: keep-all; }
.msg-mock__txt  { font-size: clamp(13px, 0.7292vw, 14px); line-height: 1.6; color: var(--sub-text); word-break: keep-all; }
.msg-mock__btn  { display: block; margin: 0 16px 16px; padding: 10px; border-radius: 8px; background: #f1f2f4; font-size: 13px; font-weight: 600; text-align: center; color: #444; }

/* --------------------------------------------------------------------------
   07-2. 채널 통합 다이어그램 (채널 4종 → 도깨비 알림톡)
   -------------------------------------------------------------------------- */
.at-channel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 2.0833vw, 40px);
  margin-bottom: clamp(48px, 4.1667vw, 80px);
}

.at-channel__group {
  display: flex;
  gap: clamp(10px, 0.8333vw, 16px);
  padding: clamp(12px, 1.0417vw, 20px);
  border-radius: 999px;
  background: #e6e8ec;
}

.at-channel__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: clamp(96px, 7.2917vw, 140px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  font-size: clamp(14px, 0.9375vw, 18px);
  font-weight: 600;
  text-align: center;
  color: var(--sub-ink);
}

.at-channel__item svg   { width: clamp(28px, 2.0833vw, 40px); height: clamp(28px, 2.0833vw, 40px); color: var(--sub-orange); }
.at-channel__item small { display: block; font-size: clamp(11px, 0.6771vw, 13px); font-weight: 500; color: var(--sub-muted); }

.at-channel__arrow { position: relative; flex-shrink: 0; width: clamp(48px, 5.2083vw, 100px); height: 2px; background: var(--sub-orange); }

.at-channel__arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid var(--sub-orange);
  transform: translateY(-50%);
}

.at-channel__hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: clamp(140px, 9.375vw, 180px);
  aspect-ratio: 1;
  border: 2px dashed var(--sub-orange-line);
  border-radius: 50%;
  font-size: clamp(16px, 1.0417vw, 20px);
  font-weight: 700;
  text-align: center;
  color: var(--sub-ink);
}

.at-channel__hub-icon { display: flex; align-items: center; justify-content: center; width: clamp(52px, 3.3333vw, 64px); aspect-ratio: 1; border-radius: 16px; background: var(--sub-orange); color: #fff; }
.at-channel__hub-icon svg { width: 55%; height: 55%; }

/* --------------------------------------------------------------------------
   07-3. 개인정보 보호 발송 흐름도 (7열 그리드 · 좁은 화면 가로 스크롤)
   -------------------------------------------------------------------------- */
.at-flow-scroll { overflow-x: auto; }

.at-flow {
  --circle: clamp(110px, 7.8125vw, 150px);
  display: grid;
  grid-template-columns: var(--circle) minmax(150px, 1fr) var(--circle) minmax(150px, 1fr) var(--circle) minmax(150px, 1fr) var(--circle);
  align-items: end;
  min-width: 1000px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px 8px;
}

.at-flow__node   { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.at-flow__label  { font-size: clamp(16px, 1.0417vw, 20px); font-weight: 700; white-space: nowrap; color: var(--sub-ink); }

.at-flow__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--circle);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sub-gray-bg);
  color: #444;
}

.at-flow__circle svg { width: 38%; height: 38%; }

.at-flow__node--brand .at-flow__circle { background: var(--sub-orange); color: #fff; }
.at-flow__node--user  .at-flow__circle { background: var(--sub-orange-soft); color: var(--sub-orange); }
.at-flow__node--user  .at-flow__label  { color: var(--sub-orange); }

.at-flow__badge {
  position: absolute;
  top: calc(100% + 10px);
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--sub-orange-soft);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--sub-orange);
}

/* 연결선 (보내기 → / 결과 ←) */
.at-flow__conn { display: flex; flex-direction: column; justify-content: center; gap: 8px; height: var(--circle); padding: 0 clamp(12px, 1.0417vw, 20px); }
.at-flow__msg  { display: flex; align-items: flex-start; gap: 6px; font-size: clamp(13px, 0.7813vw, 15px); font-weight: 500; line-height: 1.4; color: #444; word-break: keep-all; }

.at-flow__no {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sub-ink);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

.at-flow__arrow { position: relative; display: block; height: 2px; background: #b5b5b5; }

.at-flow__arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid #b5b5b5;
  transform: translateY(-50%);
}

.at-flow__arrow--back::after { right: auto; left: -1px; border-left: 0; border-right: 8px solid #b5b5b5; }

/* 발송 실패 시 전환 (카카오 → 통신사) */
.at-flow__down {
  position: relative;
  grid-column: 5;
  grid-row: 2;
  justify-self: center;
  width: 2px;
  height: clamp(90px, 6.25vw, 120px);
  margin: 24px 0;
  background: repeating-linear-gradient(180deg, #999 0 4px, transparent 4px 8px);
}

.at-flow__down::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid #999;
  transform: translateX(-50%);
}

.at-flow__down .at-flow__msg { position: absolute; left: 16px; top: 50%; width: max-content; transform: translateY(-50%); }

.at-flow__node--telco { grid-column: 5; grid-row: 3; }
.at-flow__conn--telco { grid-column: 6; grid-row: 3; }
.at-flow__node--sms   { grid-column: 7; grid-row: 3; }

/* --------------------------------------------------------------------------
   07-4. 도입 방식 (플랫폼 / API) · 활용 사례
   -------------------------------------------------------------------------- */
.offer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.6042vw, 50px); }
.offer      { display: flex; flex-direction: column; }

.offer__head    { margin-bottom: clamp(20px, 1.5625vw, 30px); text-align: center; }
.offer__eyebrow { font-size: clamp(15px, 0.9375vw, 18px); color: var(--sub-text); word-break: keep-all; }
.offer__tit     { margin-top: 8px; font-size: clamp(24px, 1.6667vw, 32px); font-weight: 700; letter-spacing: -0.02em; color: var(--sub-orange); }

.offer__body {
  flex: 1;
  padding: clamp(24px, 2.0833vw, 40px);
  border-top: 3px solid var(--sub-orange);
  border-radius: 0 0 20px 20px;
  background: #fff;
}

.offer__desc { font-size: clamp(15px, 0.9375vw, 18px); line-height: 1.7; color: #444; word-break: keep-all; text-wrap: pretty; }
.offer__note { margin-top: 16px; font-size: clamp(13px, 0.7813vw, 15px); line-height: 1.6; color: var(--sub-muted); word-break: keep-all; }
.offer .tag-list { margin-top: clamp(20px, 1.5625vw, 30px); }

.offer--dark .offer__tit  { color: var(--sub-ink); }
.offer--dark .offer__body { border-top-color: var(--sub-ink); }

/* ---- 활용 사례 (3단 아이콘) ---- */
.usecase-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.0833vw, 40px); max-width: 1100px; margin: 0 auto; }
.usecase      { display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 1.5625vw, 30px); text-align: center; }

.usecase__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(88px, 6.25vw, 120px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sub-orange-soft);
  color: var(--sub-orange);
  transition: background-color .3s ease, color .3s ease;
}

.usecase__icon svg { width: 44%; height: 44%; }
.usecase__txt { font-size: clamp(15px, 1.0417vw, 20px); font-weight: 500; line-height: 1.55; color: var(--sub-ink); word-break: keep-all; }

@media (hover: hover) {
  .usecase:hover .usecase__icon { background: var(--sub-orange); color: #fff; }
}


/* ==========================================================================
   08. ICT 전용 (3_1 ICT)
   ========================================================================== */

/* 맞춤형 서비스 카드 — 태그 가운데 정렬 */
.img-card .tag-list { justify-content: center; margin-top: 6px; }

/* --------------------------------------------------------------------------
   08-1. 대표 서비스 타일 (주요 2단 + 일반 5단)
   -------------------------------------------------------------------------- */
.svc-board { display: flex; flex-direction: column; gap: clamp(12px, 1.0417vw, 20px); }

.svc-tiles    { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 0.8333vw, 16px); }
.svc-tiles--2 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.0417vw, 20px); }

/* ---- 일반 타일 : 아이콘 + 국문 / 영문 (세로) ---- */
.svc-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: clamp(22px, 1.5625vw, 30px) 16px;
  overflow: hidden;
  border: 1px solid var(--sub-line);
  border-radius: 16px;
  background: #fff;
  text-align: center;
  isolation: isolate;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.svc-tile__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 2.7083vw, 52px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sub-gray-bg);
  color: var(--sub-ink);
  transition: background-color .3s ease, color .3s ease;
}

.svc-tile__icon svg { width: 48%; height: 48%; }
.svc-tile__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.svc-tile__ko  { font-size: clamp(15px, 0.9375vw, 18px); font-weight: 700; line-height: 1.4; color: var(--sub-ink); word-break: keep-all; }
.svc-tile__en  { font-size: clamp(12px, 0.7292vw, 14px); line-height: 1.4; color: var(--sub-muted); overflow-wrap: anywhere; }

/* ---- 주요 타일 : 가로형 · 주황 아이콘 · 큰 번호 ---- */
.svc-tiles--2 .svc-tile {
  flex-direction: row;
  align-items: center;
  gap: clamp(14px, 1.0417vw, 20px);
  padding: clamp(22px, 1.6667vw, 32px) clamp(20px, 1.6667vw, 32px);
  border-color: transparent;
  border-radius: 20px;
  text-align: left;
}

.svc-tiles--2 .svc-tile__icon { width: clamp(52px, 3.3333vw, 64px); border-radius: 16px; background: var(--sub-orange-soft); color: var(--sub-orange); }
.svc-tiles--2 .svc-tile__ko   { font-size: clamp(17px, 1.1458vw, 22px); }

.svc-tile__num {
  position: absolute;
  right: clamp(16px, 1.25vw, 24px);
  bottom: -.18em;
  z-index: -1;
  font-size: clamp(52px, 3.75vw, 72px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--sub-gray-bg);
  transition: color .3s ease;
}

@media (hover: hover) {
  .svc-tile:hover { border-color: var(--sub-orange-line); box-shadow: 0 12px 28px rgba(0, 0, 0, .06); transform: translateY(-4px); }
  .svc-tile:hover .svc-tile__icon { background: var(--sub-orange); color: #fff; }
  .svc-tile:hover .svc-tile__num  { color: var(--sub-orange-soft); }
}

/* --------------------------------------------------------------------------
   08-2. 고객사 카드 (분야별 · 로고 대신 텍스트 표기)
   -------------------------------------------------------------------------- */
.client-card-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 1.25vw, 24px); }

.client-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--sub-line);
  border-radius: 20px;
  background: #fff;
  transition: border-color .3s ease, box-shadow .35s ease, transform .35s ease;
}

.client-card__head { padding: clamp(22px, 1.5625vw, 30px) 20px clamp(16px, 1.25vw, 24px); text-align: center; }
.client-card__tit  { font-size: clamp(17px, 1.0417vw, 20px); font-weight: 700; color: var(--sub-ink); word-break: keep-all; }
.client-card__desc { margin-top: 8px; font-size: clamp(13px, 0.7813vw, 15px); line-height: 1.5; color: var(--sub-text); word-break: keep-all; }

.client-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(140px, 8.8542vw, 170px);
  margin: 0 12px 12px;
  padding: 14px;
  border-radius: 14px;
  background: var(--sub-gray-bg);
}

.client-card__name { font-size: clamp(22px, 1.4583vw, 28px); font-weight: 800; letter-spacing: -0.02em; text-align: center; color: var(--sub-ink); }

.client-card__names,
.client-card__rows { display: grid; gap: 6px; }
.client-card__names { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.client-card__names li,
.client-card__rows li {
  padding: 8px 6px;
  border-radius: 8px;
  background: #fff;
  font-size: clamp(12px, 0.7292vw, 14px);
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  color: #333;
  word-break: keep-all;
}

.client-card__names li.is-wide { grid-column: 1 / -1; }  /* 긴 기관명은 한 줄 전체 사용 */

.client-card__rows li        { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; text-align: left; }
.client-card__rows li span   { font-weight: 500; color: var(--sub-muted); }
.client-card__rows li strong { font-weight: 800; color: var(--sub-ink); }

@media (hover: hover) {
  .client-card:hover { border-color: var(--sub-orange-line); box-shadow: 0 18px 40px rgba(0, 0, 0, .06); transform: translateY(-6px); }
}

/* --------------------------------------------------------------------------
   08-3. 2분할 CTA 배너 (.sub-banner 2개 나란히)
   -------------------------------------------------------------------------- */
.banner-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.banner-split .sub-banner      { padding: 60px clamp(20px, 3.125vw, 60px); }
.banner-split .sub-banner__tit { font-size: clamp(22px, 1.6667vw, 32px); }


/* ==========================================================================
   09. 시스템 인프라 전용 (3_2 시스템 인프라)
   ========================================================================== */

/* --------------------------------------------------------------------------
   09-1. 컨설팅/구축/유지보수 절차 (좌 : 흐름도 / 우 : .layer-card 설명)
   -------------------------------------------------------------------------- */
.infra-proc {
  display: grid;
  grid-template-columns: minmax(0, 680fr) minmax(0, 560fr);
  align-items: center;
  gap: clamp(32px, 3.125vw, 60px);
}

.infra-proc__flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px clamp(90px, 6.25vw, 120px) 24px clamp(90px, 6.25vw, 120px);
  align-items: stretch;
  gap: 10px;
}

.infra-proc__std { margin: 0; background: #fff; }

.infra-proc__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding: 12px;
  border: 1px dashed #b5b5b5;
  border-radius: 10px;
}

.infra-proc__steps .arch__cell { position: relative; }

.infra-proc__next     { display: flex; align-items: center; justify-content: center; color: var(--sub-orange); }
.infra-proc__next svg { width: 22px; height: 22px; }
.infra-proc__stage    { height: 100%; font-weight: 700; }

/* --------------------------------------------------------------------------
   09-2. 특장점 카드 (.img-card--feature : 번호 + 아이콘 배지)
   -------------------------------------------------------------------------- */
.img-card--feature { position: relative; border-radius: 20px; }
.img-card--feature .img-card__thumb { position: relative; aspect-ratio: 16 / 9; }

/* 썸네일 하단 어둡게 + 번호 */
.img-card--feature .img-card__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .45) 100%);
}

.img-card__num {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  font-size: 13px;
  font-weight: 700;
  color: var(--sub-orange);
}

.img-card--feature .img-card__body {
  position: relative;
  align-items: flex-start;
  padding: clamp(44px, 3.125vw, 60px) clamp(24px, 2.0833vw, 40px) clamp(28px, 2.0833vw, 40px);
  text-align: left;
}

.img-card__icon {
  position: absolute;
  top: 0;
  left: clamp(24px, 2.0833vw, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 3.3333vw, 64px);
  aspect-ratio: 1;
  border: 4px solid #fff;
  border-radius: 18px;
  background: var(--sub-orange);
  color: #fff;
  box-shadow: 0 10px 24px rgba(255, 103, 0, .28);
  transform: translateY(-50%);
  transition: transform .4s var(--sub-ease);
}

.img-card__icon svg { width: 48%; height: 48%; }

/* 타이틀 아래 짧은 주황 라인 */
.img-card--feature .img-card__tit::after { content: ""; display: block; width: 24px; height: 2px; margin-top: 14px; background: var(--sub-orange); transition: width .4s var(--sub-ease); }

@media (hover: hover) {
  .img-card--feature:hover .img-card__icon { transform: translateY(-50%) rotate(-6deg); }
  .img-card--feature:hover .img-card__tit::after { width: 48px; }
}


/* ==========================================================================
   10. 가나 소개 전용 (6_1 가나 소개)
   · 스크롤 연동 값(--r, .is-lit)과 커서 이미지는 js/about.js 에서 제어
   ========================================================================== */

/* --------------------------------------------------------------------------
   10-1. 공통 라벨 (영문 아이브로 + 주황 점)
   -------------------------------------------------------------------------- */
.about-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(13px, 0.8333vw, 16px);                    /* 16 / 1920 */
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sub-orange);
}

.about-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

/* --------------------------------------------------------------------------
   10-2. 인트로 스테이트먼트
   · 단어(.about-fill__w)가 스크롤 진행도에 맞춰 순서대로 채워짐
   -------------------------------------------------------------------------- */
.sub-content .about-intro {
  padding-top: clamp(100px, 8.3333vw, 160px);                /* 160 / 1920 */
  padding-bottom: clamp(80px, 7.2917vw, 140px);
}

.about-intro__statement {
  max-width: 1500px;
  margin-top: clamp(28px, 2.0833vw, 40px);
  font-size: clamp(28px, 3.5417vw, 68px);                    /* 68 / 1920 */
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.03em;
  color: var(--sub-ink);
  word-break: keep-all;
}

.about-intro__statement strong { font-weight: inherit; color: var(--sub-orange); }

.about-fill__w                        { transition: opacity .45s ease; }
.is-fill-ready .about-fill__w         { opacity: .14; }
.is-fill-ready .about-fill__w.is-lit  { opacity: 1; }

.about-intro__foot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4.1667vw, 80px);
  margin-top: clamp(56px, 5.2083vw, 100px);
  padding-top: clamp(28px, 2.0833vw, 40px);
  border-top: 1px solid var(--sub-line);
}

.about-intro__sub {
  font-size: clamp(18px, 1.25vw, 24px);                      /* 24 / 1920 */
  font-weight: 700;
  line-height: 1.5;
  color: var(--sub-ink);
  word-break: keep-all;
}

.about-intro__desc {
  font-size: clamp(15px, 0.9896vw, 19px);
  line-height: 1.75;
  color: var(--sub-text);
  word-break: keep-all;
  text-wrap: pretty;
}

.about-intro__desc + .about-intro__desc { margin-top: 14px; }

/* --------------------------------------------------------------------------
   10-3. 확장 이미지
   · --r : 0 → 1 (스크롤 진행도). 0 일 때 본문 폭 + 라운드, 1 일 때 풀블리드
   -------------------------------------------------------------------------- */
.about-media {
  --r: 0;
  position: relative;
  height: clamp(420px, 46.875vw, 900px);                     /* 900 / 1920 */
  overflow: hidden;
  background: #fff;
}

.about-media__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
  clip-path: inset(
    calc((1 - var(--r)) * 10%) calc((1 - var(--r)) * var(--sub-pad-x))
    round calc((1 - var(--r)) * 40px)
  );
  will-change: clip-path;
}

.about-media__frame img {
  position: absolute;
  left: 0;
  top: -10%;
  width: 100%;
  height: 120%;
  object-fit: cover;
  opacity: .62;
  transform: translateY(calc((var(--r) - .5) * -6%)) scale(calc(1.15 - var(--r) * .15));
}

.about-media__txt {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.0417vw, 20px);
  padding: 0 var(--sub-pad-x);
  color: #fff;
  text-align: center;
  opacity: var(--r);
  transform: translateY(calc((1 - var(--r)) * 40px));
}

.about-media__en {
  font-size: clamp(44px, 6.25vw, 120px);                     /* 120 / 1920 */
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

.about-media__ko { font-size: clamp(15px, 1.0417vw, 20px); font-weight: 500; word-break: keep-all; }

/* --------------------------------------------------------------------------
   10-4. 비전 · 미션 (좌측 타이틀 고정)
   -------------------------------------------------------------------------- */
.about-vision {
  display: grid;
  grid-template-columns: minmax(0, 560fr) minmax(0, 1040fr);
  align-items: start;
  gap: clamp(40px, 5.2083vw, 100px);
}

.about-vision__head { position: sticky; top: clamp(100px, 6.25vw, 120px); }

.about-vision__tit {
  margin-top: 20px;
  font-size: clamp(26px, 2.2917vw, 44px);                    /* 44 / 1920 */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--sub-ink);
  word-break: keep-all;
}

.about-vision__item {
  display: grid;
  grid-template-columns: clamp(90px, 7.2917vw, 140px) minmax(0, 1fr);
  gap: 24px;
  padding: clamp(32px, 2.6042vw, 50px) 0;
  border-top: 1px solid var(--sub-line);
}

.about-vision__item:last-child { border-bottom: 1px solid var(--sub-line); }

.about-vision__key {
  padding-top: .5em;
  font-size: clamp(14px, 0.9375vw, 18px);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sub-orange);
}

.about-vision__txt {
  font-size: clamp(22px, 1.875vw, 36px);                     /* 36 / 1920 */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--sub-ink);
  word-break: keep-all;
}

.about-vision__desc {
  max-width: 760px;
  margin-top: 14px;
  font-size: clamp(15px, 0.9375vw, 18px);
  line-height: 1.7;
  color: var(--sub-text);
  word-break: keep-all;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   10-5. 숫자로 보는 가나 (카운트업)
   -------------------------------------------------------------------------- */
.about-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--sub-ink);
}

.about-stats__item {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 2.6042vw, 50px);
  padding: clamp(24px, 1.875vw, 36px) clamp(16px, 1.5625vw, 30px) clamp(28px, 2.0833vw, 40px);
  border-right: 1px solid var(--sub-line);
  border-bottom: 1px solid var(--sub-line);
}

.about-stats__item:last-child { border-right: 0; }

.about-stats__label { font-size: clamp(15px, 0.9375vw, 18px); font-weight: 600; color: var(--sub-text); }

.about-stats__num {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
  font-size: clamp(44px, 4.1667vw, 80px);                    /* 80 / 1920 */
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--sub-ink);
  font-variant-numeric: tabular-nums;
}

.about-stats__unit { font-size: .34em; font-weight: 700; letter-spacing: 0; color: var(--sub-orange); }

/* --------------------------------------------------------------------------
   10-6. 핵심가치 (가로 아코디언)
   · hover / focus / click 된 항목(.is-active)이 넓어지며 설명 노출
   -------------------------------------------------------------------------- */
.about-core {
  display: flex;
  gap: clamp(10px, 0.8333vw, 16px);
  height: clamp(460px, 31.25vw, 600px);                      /* 600 / 1920 */
}

.about-core__item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 24px;
  background: #111;
  color: #fff;
  cursor: pointer;
  isolation: isolate;
  transition: flex-grow .7s var(--sub-ease);
}

.about-core__item.is-active { flex-grow: 2.6; }
.about-core__item:focus-visible { outline: 2px solid var(--sub-orange); outline-offset: 3px; }

.about-core__item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .1) 30%, rgba(0, 0, 0, .78) 100%);
}

.about-core__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
  transform: scale(1.08);
  transition: transform 1s var(--sub-ease), opacity .6s ease;
}

.about-core__item.is-active .about-core__bg { opacity: .85; transform: scale(1); }

.about-core__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(24px, 2.0833vw, 40px);
}

.about-core__num { font-size: clamp(14px, 0.9375vw, 18px); font-weight: 700; color: var(--sub-orange); }
.about-core__en  { font-size: clamp(13px, 0.7813vw, 15px); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }

.about-core__tit {
  margin-top: 8px;
  font-size: clamp(24px, 1.875vw, 36px);                     /* 36 / 1920 */
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* 설명 : grid-rows 0fr → 1fr 로 높이 애니메이션 */
.about-core__more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .6s var(--sub-ease);
}

.about-core__desc {
  width: clamp(240px, 20.8333vw, 400px);                     /* 펼침 중 줄바꿈 흔들림 방지 */
  max-width: 100%;
  min-height: 0;
  overflow: hidden;
  font-size: clamp(14px, 0.9375vw, 18px);
  line-height: 1.65;
  color: rgba(255, 255, 255, .9);
  word-break: keep-all;
  opacity: 0;
  transition: opacity .3s ease;
}

.about-core__item.is-active .about-core__more { grid-template-rows: 1fr; }
.about-core__item.is-active .about-core__desc { padding-top: 16px; opacity: 1; transition-delay: .25s; }

/* --------------------------------------------------------------------------
   10-7. 사업영역 (행 리스트 + 커서 이미지)
   -------------------------------------------------------------------------- */
.about-biz { border-top: 1px solid var(--sub-ink); }
.about-biz__item { border-bottom: 1px solid var(--sub-line); }

.about-biz__link {
  position: relative;
  display: grid;
  grid-template-columns: clamp(48px, 5.2083vw, 100px) minmax(0, 480fr) minmax(0, 860fr) auto;
  align-items: center;
  gap: clamp(16px, 2.0833vw, 40px);
  padding: clamp(28px, 2.3958vw, 46px) clamp(0px, 1.0417vw, 20px);
  overflow: hidden;
  isolation: isolate;
}

/* hover 배경 — 아래에서 위로 채워짐 */
.about-biz__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--sub-ink);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .5s var(--sub-ease);
}

.about-biz__num { font-size: clamp(14px, 0.9375vw, 18px); font-weight: 700; color: var(--sub-orange); }

.about-biz__tit {
  font-size: clamp(22px, 2.0833vw, 40px);                    /* 40 / 1920 */
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sub-ink);
  transition: color .4s ease, transform .5s var(--sub-ease);
}

.about-biz__desc {
  font-size: clamp(14px, 0.9375vw, 18px);
  line-height: 1.6;
  color: var(--sub-text);
  word-break: keep-all;
  transition: color .4s ease;
}

.about-biz__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 3.125vw, 60px);
  aspect-ratio: 1;
  border: 1px solid var(--sub-line);
  border-radius: 50%;
  color: var(--sub-ink);
  transition: background-color .4s ease, border-color .4s ease, color .4s ease;
}

.about-biz__arrow svg { width: 40%; height: 40%; transition: transform .5s var(--sub-ease); }

@media (hover: hover) {
  .about-biz__link:hover::before { transform: scaleY(1); }
  .about-biz__link:hover .about-biz__tit  { color: #fff; transform: translateX(10px); }
  .about-biz__link:hover .about-biz__desc { color: rgba(255, 255, 255, .75); }
  .about-biz__link:hover .about-biz__arrow { border-color: var(--sub-orange); background: var(--sub-orange); color: #fff; }
  .about-biz__link:hover .about-biz__arrow svg { transform: rotate(-45deg); }
}

/* 커서 이미지 (위치는 JS 가 translate 로 지정) */
.about-biz__cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  width: clamp(220px, 15.625vw, 300px);                      /* 300 / 1920 */
  aspect-ratio: 4 / 3;
  margin: calc(clamp(220px, 15.625vw, 300px) * -.375) 0 0 calc(clamp(220px, 15.625vw, 300px) * -.5);
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
  opacity: 0;
  scale: .7;
  pointer-events: none;
  transition: opacity .3s ease, scale .45s var(--sub-ease);
}

.about-biz__cursor.is-show { opacity: 1; scale: 1; }
.about-biz__cursor img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   10-8. 키워드 마키 (무한 흐름)
   -------------------------------------------------------------------------- */
.about-marquee {
  overflow: hidden;
  padding: clamp(40px, 3.125vw, 60px) 0;
  border-top: 1px solid var(--sub-line);
  background: #fff;
}

.about-marquee__track {
  display: flex;
  width: max-content;
  animation: about-marquee 40s linear infinite;
}

.about-marquee__group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: clamp(28px, 2.6042vw, 50px);
  padding-right: clamp(28px, 2.6042vw, 50px);
}

.about-marquee__word {
  font-size: clamp(48px, 6.25vw, 120px);                     /* 120 / 1920 */
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  /* 가변 폰트(Pretendard Variable)의 겹친 윤곽선이 stroke 로 드러나는 현상 방지
     → 배경색(#fff)으로 채운 뒤 fill 을 stroke 위에 그려 내부 선을 가림 (선 굵기는 2배 지정 = 바깥쪽 절반만 노출) */
  color: #fff;
  -webkit-text-stroke: 2px #c4c4c4;
  paint-order: stroke fill;
}

.about-marquee__word--fill { color: var(--sub-ink); -webkit-text-stroke: 0; }

.about-marquee__dot {
  flex-shrink: 0;
  width: clamp(10px, 0.8333vw, 16px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sub-orange);
}

@keyframes about-marquee {
  to { transform: translateX(-50%); }
}


/* ==========================================================================
   11. 연혁 전용 (6_2 연혁)
   · 현재 연도(.is-active) · 지나온 연도(.is-passed) · 진행도(--p) 는 js/script.js 에서 제어
   · 공통 라벨은 10-1 .about-label 재사용
   ========================================================================== */

/* --------------------------------------------------------------------------
   11-1. 인트로
   -------------------------------------------------------------------------- */
.sub-content .hist-intro {
  overflow: hidden;
  padding-top: clamp(100px, 8.3333vw, 160px);                /* 160 / 1920 */
  padding-bottom: clamp(80px, 7.2917vw, 140px);
}

/* 배경 대형 아웃라인 텍스트 — 스크롤에 따라 가로로 흐름 (--drift, JS) */
.hist-intro__bg {
  position: absolute;
  top: clamp(40px, 3.125vw, 60px);
  left: 0;
  z-index: 0;
  font-size: clamp(100px, 13.5417vw, 260px);                 /* 260 / 1920 */
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
  /* 가변 폰트(Pretendard Variable)의 겹친 윤곽선이 stroke 로 드러나는 현상 방지
     → 배경색(#fff)으로 채운 뒤 fill 을 stroke 위에 그려 내부 선을 가림 (선 굵기는 2배 지정 = 바깥쪽 절반만 노출) */
  color: #fff;
  -webkit-text-stroke: 4px #f1f1f1;
  paint-order: stroke fill;
  pointer-events: none;
  user-select: none;
  transform: translateX(calc(var(--drift, 0) * -1px + 30vw));
}

.hist-intro__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 960fr) minmax(0, 560fr);
  align-items: end;
  gap: clamp(40px, 5.2083vw, 100px);
  padding-top: clamp(60px, 6.25vw, 120px);
}

.hist-intro__tit {
  margin-top: clamp(24px, 2.0833vw, 40px);
  font-size: clamp(28px, 3.3333vw, 64px);                    /* 64 / 1920 */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--sub-ink);
  word-break: keep-all;
}

.hist-intro__tit strong { font-weight: inherit; color: var(--sub-orange); }

.hist-intro__side {
  padding-top: clamp(24px, 1.875vw, 36px);
  border-top: 2px solid var(--sub-ink);
}

.hist-intro__desc {
  font-size: clamp(15px, 0.9896vw, 19px);
  line-height: 1.75;
  color: var(--sub-text);
  word-break: keep-all;
  text-wrap: pretty;
}

.hist-intro__desc + .hist-intro__desc { margin-top: 12px; }

/* --------------------------------------------------------------------------
   11-2. 타임라인 레이아웃
   -------------------------------------------------------------------------- */
.sub-content .hist {
  padding-top: clamp(40px, 4.1667vw, 80px);
  padding-bottom: clamp(100px, 8.3333vw, 160px);             /* 160 / 1920 */
}

.hist__inner {
  --hist-gap: clamp(32px, 3.125vw, 60px);                    /* 라인 ~ 내역 간격 */
  display: grid;
  grid-template-columns: minmax(0, 560fr) minmax(0, 1040fr);
  align-items: start;
  gap: clamp(40px, 5.2083vw, 100px);
}

.hist__aside {
  position: sticky;
  top: calc(var(--header-h) + 40px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 2.6042vw, 50px);
}

/* --------------------------------------------------------------------------
   11-3. 롤링 연도 (숫자 릴이 위아래로 회전) · 연도 내비
   -------------------------------------------------------------------------- */
.hist-year__digits {
  display: flex;
  font-size: clamp(80px, 9.375vw, 180px);                    /* 180 / 1920 */
  font-weight: 800;
  line-height: 1;
  color: var(--sub-ink);
  font-variant-numeric: tabular-nums;
}

.hist-year__col                    { display: block; height: 1em; overflow: hidden; }
.hist-year__col + .hist-year__col  { margin-left: -0.04em; }
.hist-year__col:nth-child(n + 3)   { color: var(--sub-orange); }

/* --d : 표시할 숫자(0~9) */
.hist-year__reel {
  display: flex;
  flex-direction: column;
  transform: translateY(calc(var(--d, 0) * -1em));
  transition: transform .8s var(--sub-ease);
}

.hist-year__reel span { display: block; height: 1em; text-align: center; }

.hist-nav {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 440px;
}

.hist-nav__btn {
  height: clamp(36px, 2.0833vw, 40px);
  padding: 0 clamp(14px, 0.9375vw, 18px);
  border: 1px solid var(--sub-line);
  border-radius: 999px;
  background: #fff;
  font-size: clamp(14px, 0.8333vw, 16px);
  font-weight: 600;
  color: var(--sub-muted);
  white-space: nowrap;
  transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}

.hist-nav__btn:hover          { border-color: #bdbdbd; color: var(--sub-ink); }
.hist-nav__btn.is-active      { border-color: var(--sub-orange); background: var(--sub-orange); color: #fff; }
.hist-nav__btn:focus-visible  { outline: 2px solid var(--sub-orange); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   11-4. 연도 그룹 · 진행 라인
   -------------------------------------------------------------------------- */
.hist__body { position: relative; padding-left: var(--hist-gap); }

/* 세로 라인 + 스크롤 진행도(--p)만큼 주황으로 채움 */
.hist__line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--sub-line);
}

.hist__line-fill {
  position: absolute;
  left: -.5px;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--sub-orange);
  transform: scaleY(var(--p, 0));
  transform-origin: top;
}

.hist-group {
  --year-size: clamp(32px, 2.9167vw, 56px);                  /* 56 / 1920 */
  position: relative;
  padding-bottom: clamp(56px, 5.2083vw, 100px);
}

.hist-group:last-child { padding-bottom: 0; }

/* 라인 위 연도 점 */
.hist-group::before {
  content: "";
  position: absolute;
  top: calc(var(--year-size) / 2 - 7px);
  left: calc(var(--hist-gap) * -1 - 7px);
  width: 14px;
  height: 14px;
  border: 2px solid #d0d0d0;
  border-radius: 50%;
  background: #fff;
  transition: border-color .4s ease, background-color .4s ease, box-shadow .4s ease;
}

.hist-group.is-passed::before { border-color: var(--sub-orange); background: var(--sub-orange); }
.hist-group.is-active::before { border-color: var(--sub-orange); background: #fff; box-shadow: 0 0 0 6px rgba(255, 103, 0, .15); }

.hist-group__year {
  font-size: var(--year-size);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #cfcfcf;
  transition: color .5s ease;
}

.hist-group.is-passed .hist-group__year { color: var(--sub-ink); }
.hist-group.is-active .hist-group__year { color: var(--sub-orange); }

.hist-group__list { margin-top: clamp(20px, 1.875vw, 36px); border-top: 1px solid var(--sub-line); }

.hist-item {
  display: grid;
  grid-template-columns: clamp(90px, 6.25vw, 120px) minmax(0, 1fr);
  gap: 20px;
  padding: clamp(18px, 1.25vw, 24px) 0;
  border-bottom: 1px solid var(--sub-line);
}

.hist-item__date {
  padding-top: .15em;
  font-size: clamp(14px, 0.9375vw, 18px);
  font-weight: 700;
  color: var(--sub-orange);
  font-variant-numeric: tabular-nums;
}

.hist-item__txt {
  font-size: clamp(16px, 1.0417vw, 20px);                    /* 20 / 1920 */
  font-weight: 500;
  line-height: 1.55;
  color: #333;
  word-break: keep-all;
}


/* ==========================================================================
   12. 인증/수상 전용 (6_3 인증/수상)
   · 필터(.is-hidden / .is-filtered) · 라이트박스(.is-open) 는 js/script.js 에서 제어
   · 공통 라벨은 10-1 .about-label 재사용
   ========================================================================== */

/* --------------------------------------------------------------------------
   12-1. 헤드 · 분류 필터
   -------------------------------------------------------------------------- */
.sub-content .cert {
  padding-top: clamp(100px, 8.3333vw, 160px);                /* 160 / 1920 */
  padding-bottom: clamp(100px, 8.3333vw, 160px);
}

.cert__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
  margin-bottom: clamp(40px, 3.6458vw, 70px);                /* 70 / 1920 */
}

.cert__tit {
  margin-top: clamp(20px, 1.5625vw, 30px);
  font-size: clamp(28px, 2.9167vw, 56px);                    /* 56 / 1920 */
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--sub-ink);
  word-break: keep-all;
}

.cert__tit strong { font-weight: 700; }

.cert-filter { display: flex; flex-wrap: wrap; gap: 8px; }

.cert-filter__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: clamp(40px, 2.3958vw, 46px);
  padding: 0 clamp(16px, 1.0417vw, 20px);
  border: 1px solid var(--sub-line);
  border-radius: 999px;
  background: #fff;
  font-size: clamp(14px, 0.8333vw, 16px);
  font-weight: 600;
  color: var(--sub-muted);
  white-space: nowrap;
  transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}

.cert-filter__cnt { font-size: .85em; font-weight: 500; opacity: .7; }

.cert-filter__btn:hover         { border-color: #bdbdbd; color: var(--sub-ink); }
.cert-filter__btn.is-active     { border-color: var(--sub-orange); background: var(--sub-orange); color: #fff; }
.cert-filter__btn:focus-visible { outline: 2px solid var(--sub-orange); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   12-2. 인증서 카드 그리드
   -------------------------------------------------------------------------- */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(32px, 2.6042vw, 50px) clamp(16px, 1.5625vw, 30px);
}

.cert-card.is-hidden   { display: none; }
.cert-card.is-filtered { animation: sub-fade-up .5s ease both; }

.cert-card__btn {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.25vw, 24px);
  width: 100%;
  padding: 0;
  background: none;
  text-align: left;
  cursor: zoom-in;
}

.cert-card__btn:focus-visible { outline: none; }
.cert-card__btn:focus-visible .cert-card__thumb { outline: 2px solid var(--sub-orange); outline-offset: 3px; }

.cert-card__thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 1.5625vw, 30px);                      /* 상하좌우 동일 여백 */
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 20px;
  background: var(--sub-gray-bg);
  transition: background-color .4s ease, border-color .4s ease;
}

/* 썸네일 높이는 인증서 비율(486 × 672)을 따름 */
.cert-card__thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 486 / 672;
  object-fit: contain;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

/* 확대 아이콘 — hover 시 카드 중앙에 노출 */
.cert-card__zoom {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(56px, 3.6458vw, 70px);                        /* 70 / 1920 */
  height: clamp(56px, 3.6458vw, 70px);
  border-radius: 50%;
  background: var(--sub-orange);
  color: #fff;
  box-shadow: 0 10px 24px rgba(255, 103, 0, .3);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.8);
  transition: opacity .3s ease, transform .4s var(--sub-ease);
}

.cert-card__zoom svg { width: 46%; height: 46%; }

.cert-card__body { display: flex; flex-direction: column; gap: 6px; }
.cert-card__cat  { font-size: clamp(13px, 0.7813vw, 15px); font-weight: 600; color: var(--sub-orange); }

.cert-card__tit {
  font-size: clamp(16px, 1.0417vw, 20px);                    /* 20 / 1920 */
  font-weight: 700;
  line-height: 1.4;
  color: var(--sub-ink);
  word-break: keep-all;
}

@media (hover: hover) {
  .cert-card__btn:hover .cert-card__thumb { border-color: var(--sub-orange); background: #eef0f3; }
  .cert-card__btn:hover .cert-card__zoom  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* --------------------------------------------------------------------------
   12-3. 라이트박스
   -------------------------------------------------------------------------- */
html.is-cert-open { overflow: hidden; }

.cert-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 3.125vw, 60px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}

/* 열릴 때는 visibility 를 즉시 전환(포커스 이동 가능), 닫힐 때만 지연 */
.cert-lightbox.is-open { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s linear 0s; }

.cert-lightbox__dim {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 12, .86);
  backdrop-filter: blur(6px);
}

.cert-lightbox__panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1200px;
  height: 100%;
  pointer-events: none;
}

.cert-lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-height: 100%;
  pointer-events: auto;
  transform: translateY(20px) scale(.97);
  transition: transform .45s var(--sub-ease);
}

.cert-lightbox.is-open .cert-lightbox__figure { transform: none; }

.cert-lightbox__img {
  width: auto;
  max-width: min(640px, 100%);
  height: auto;
  max-height: calc(100vh - 200px);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
  transition: opacity .25s ease;
}

.cert-lightbox__img.is-changing { opacity: 0; }

.cert-lightbox__cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; color: #fff; text-align: center; }
.cert-lightbox__tit { font-size: clamp(16px, 1.0417vw, 20px); font-weight: 700; word-break: keep-all; }
.cert-lightbox__count   { font-size: 14px; color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; }
.cert-lightbox__count b { font-weight: 700; color: #fff; }

.cert-lightbox__nav {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(48px, 3.125vw, 60px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(0, 0, 0, .2);
  color: #fff;
  pointer-events: auto;
  transform: translateY(-50%);
  transition: background-color .3s ease, border-color .3s ease;
}

.cert-lightbox__nav svg   { width: 40%; height: 40%; }
.cert-lightbox__nav--prev { left: 0; }
.cert-lightbox__nav--next { right: 0; }

.cert-lightbox__nav:hover,
.cert-lightbox__nav:focus-visible { border-color: var(--sub-orange); background: var(--sub-orange); outline: none; }

/* 닫기 (X) */
.cert-lightbox__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 48px;
  pointer-events: auto;
}

.cert-lightbox__close span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 2px;
  background: #fff;
  transition: background-color .25s ease;
}

.cert-lightbox__close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.cert-lightbox__close span:last-child  { transform: translate(-50%, -50%) rotate(-45deg); }
.cert-lightbox__close:hover span,
.cert-lightbox__close:focus-visible span { background: var(--sub-orange); }
.cert-lightbox__close:focus-visible { outline: none; }


/* ==========================================================================
   13. 오시는 길 전용 (6_4 오시는 길)
   · 지도 렌더링(카카오맵 → 키가 없거나 실패 시 구글맵 임베드)은 js/script.js 에서 제어
   · 인트로는 11-1 .hist-intro, 라벨은 10-1 .about-label, 버튼은 .btn-line 재사용
   ========================================================================== */

/* --------------------------------------------------------------------------
   13-1. 사업장 탭 · 지도 · 위치 핀
   · 탭 전환은 initSubTabs([data-tabs] / role="tab") 공통 로직 사용, 패널은 .sub-tab-panel 재사용
   -------------------------------------------------------------------------- */
.sub-content .loc {
  padding-top: 0;
  padding-bottom: clamp(100px, 8.3333vw, 160px);             /* 160 / 1920 */
}

/* 세그먼트형 pill 탭 — 서브 비주얼 뎁스 드롭다운 · 인증 필터와 같은 pill + 주황 활성 톤 */
.loc-tabs {
  display: inline-flex;
  gap: 4px;
  margin-bottom: clamp(32px, 2.6042vw, 50px);
  padding: 5px;
  border: 1px solid var(--sub-line);
  border-radius: 999px;
  background: #fff;
}

.loc-tab {
  min-width: clamp(110px, 7.2917vw, 140px);                  /* 140 / 1920 */
  height: clamp(44px, 2.7083vw, 52px);                        /* 52 / 1920 */
  padding: 0 clamp(20px, 1.5625vw, 30px);
  border-radius: 999px;
  background: transparent;
  font-size: clamp(15px, 0.9375vw, 18px);
  font-weight: 600;
  color: var(--sub-muted);
  white-space: nowrap;
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}

.loc-tab:hover         { color: var(--sub-ink); }
.loc-tab.is-active     { background: var(--sub-orange); color: #fff; box-shadow: 0 6px 16px rgba(255, 103, 0, .25); }
.loc-tab:focus-visible { outline: 2px solid var(--sub-orange); outline-offset: 2px; }

.loc-map {
  position: relative;
  height: clamp(360px, 33.3333vw, 640px);                    /* 640 / 1920 */
  border-radius: clamp(16px, 1.25vw, 24px);
  background: var(--sub-gray-bg);
  overflow: hidden;
  isolation: isolate;
}

.loc-map__canvas,
.loc-map__canvas iframe { display: block; width: 100%; height: 100%; border: 0; }

.loc-map__loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--sub-muted);
  pointer-events: none;
  transition: opacity .3s ease;
}

.loc-map.is-loaded .loc-map__loading { opacity: 0; }

/* 카카오맵 커스텀 오버레이 */
.loc-pin {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--sub-orange);
  box-shadow: 0 10px 24px rgba(255, 103, 0, .35);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.loc-pin::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}

.loc-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: var(--sub-orange);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 0 0 3px 0;
}

/* --------------------------------------------------------------------------
   13-2. 회사 정보
   -------------------------------------------------------------------------- */
.loc-info {
  display: grid;
  grid-template-columns: minmax(0, 760fr) minmax(0, 760fr);
  gap: clamp(40px, 5.2083vw, 100px);                         /* 100 / 1920 */
  margin-top: clamp(48px, 4.1667vw, 80px);
  padding-top: clamp(32px, 2.5vw, 48px);
  border-top: 2px solid var(--sub-ink);
}

.loc-info__company {
  font-size: clamp(15px, 0.9375vw, 18px);
  font-weight: 700;
  color: var(--sub-orange);
}

.loc-info__addr {
  margin-top: clamp(12px, 0.8333vw, 16px);
  font-size: clamp(24px, 1.875vw, 36px);                     /* 36 / 1920 */
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--sub-ink);
  word-break: keep-all;
}

.loc-info__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(24px, 1.875vw, 36px);
}

.loc-info__actions .btn-line { min-width: 0; }

.loc-info__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 2.0833vw, 40px); }

.loc-info__item {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.0417vw, 20px);
  padding: clamp(20px, 1.4583vw, 28px) 0;
  border-bottom: 1px solid var(--sub-line);
}

.loc-info__item:nth-child(-n + 2) { padding-top: 0; }

.loc-info__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 2.9167vw, 56px);                         /* 56 / 1920 */
  height: clamp(44px, 2.9167vw, 56px);
  border-radius: 50%;
  background: var(--sub-orange-soft);
  color: var(--sub-orange);
}

.loc-info__svg { width: 46%; height: 46%; }

.loc-info__label {
  font-size: clamp(12px, 0.7292vw, 14px);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--sub-muted);
}

.loc-info__val {
  margin-top: 4px;
  font-size: clamp(16px, 1.0417vw, 20px);                    /* 20 / 1920 */
  font-weight: 600;
  color: var(--sub-ink);
  word-break: break-all;
}

/* --------------------------------------------------------------------------
   13-3. 주소 복사 토스트
   -------------------------------------------------------------------------- */
.loc-toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  z-index: 1000;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--sub-ink);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

.loc-toast.is-show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }


/* ==========================================================================
   14. 파트너 프로그램 전용 (7_4 파트너 프로그램)
   · 인트로는 11-1 .hist-intro, 혜택 카드는 04-3 .icon-card, 신청 배너는 03 .sub-cta 재사용
   · 공통 라벨은 10-1 .about-label 재사용
   ========================================================================== */

/* --------------------------------------------------------------------------
   14-1. 인트로 환영 문구 (8_1 가나피플 공용)
   -------------------------------------------------------------------------- */
.ptn-intro__welcome,
.people-intro__welcome {
  margin-bottom: clamp(14px, 1.0417vw, 20px);
  font-size: clamp(16px, 1.0417vw, 20px);                    /* 20 / 1920 */
  font-weight: 700;
  line-height: 1.5;
  color: var(--sub-ink);
  word-break: keep-all;
}

/* --------------------------------------------------------------------------
   14-2. 파트너 유형 (이미지 배너 + 유형 카드)
   -------------------------------------------------------------------------- */
.sub-content .ptn-type { padding-top: 0; }

.ptn-type__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(12px, 0.8333vw, 16px);
  min-height: clamp(300px, 20.8333vw, 400px);                /* 400 / 1920 */
  padding: clamp(36px, 4.1667vw, 80px) clamp(28px, 5.2083vw, 100px);
  overflow: hidden;
  border-radius: 24px;
  background: #000;
  color: #fff;
  isolation: isolate;
}

.ptn-type__bg { position: absolute; inset: 0; z-index: -1; }

.ptn-type__bg img {
  position: absolute;
  left: 0;
  top: -15%;
  width: 100%;
  height: 130%;
  object-fit: cover;
  opacity: .5;
}

.ptn-type__tit {
  font-size: clamp(30px, 2.5vw, 48px);                       /* 48 / 1920 */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.ptn-type__desc {
  max-width: 760px;
  font-size: clamp(15px, 1.0417vw, 20px);                    /* 20 / 1920 */
  line-height: 1.65;
  color: rgba(255, 255, 255, .88);
  word-break: keep-all;
}

.ptn-type__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.25vw, 24px);
  margin-top: clamp(24px, 2.0833vw, 40px);
}

.ptn-type__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 0.7292vw, 14px);
  padding: clamp(28px, 2.2917vw, 44px) clamp(24px, 2.5vw, 48px);
  overflow: hidden;
  border: 1px solid var(--sub-line);
  border-radius: 16px;
  background: #fff;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

/* 상단 주황 라인 — hover 시 좌 → 우로 채워짐 */
.ptn-type__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--sub-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--sub-ease);
}

.ptn-type__meta { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(2px, 0.4167vw, 8px); }
.ptn-type__num  { font-size: clamp(14px, 0.9375vw, 18px); font-weight: 800; color: var(--sub-orange); }
.ptn-type__en   { font-size: clamp(12px, 0.7292vw, 14px); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sub-muted); }
.ptn-type__name { font-size: clamp(20px, 1.4583vw, 28px); font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; color: var(--sub-ink); }
.ptn-type__txt  { font-size: clamp(15px, 0.9375vw, 18px); line-height: 1.65; color: var(--sub-text); word-break: keep-all; text-wrap: pretty; }

@media (hover: hover) {
  .ptn-type__item:hover         { border-color: transparent; box-shadow: 0 16px 40px rgba(0, 0, 0, .08); transform: translateY(-4px); }
  .ptn-type__item:hover::before { transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   14-3. 파트너 혜택 (아이콘 카드 5단)
   -------------------------------------------------------------------------- */
.icon-card-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }


/* ==========================================================================
   15. 가나피플 전용 (8_1 가나피플)
   · 인트로는 11-1 .hist-intro + 14-1 환영 문구, 채용 배너는 03 .sub-cta 재사용
   ========================================================================== */

/* --------------------------------------------------------------------------
   15-1. 섹션 헤드 (좌 타이틀 / 우 설명)
   -------------------------------------------------------------------------- */
.people-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  align-items: end;
  gap: 20px clamp(40px, 5.2083vw, 100px);
  margin-bottom: clamp(40px, 3.6458vw, 70px);                /* 70 / 1920 */
}

.people-head__tit {
  margin-top: clamp(14px, 1.0417vw, 20px);
  font-size: clamp(30px, 2.5vw, 48px);                       /* 48 / 1920 */
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--sub-ink);
}

.people-head__desc {
  font-size: clamp(15px, 0.9896vw, 19px);
  line-height: 1.7;
  color: var(--sub-text);
  word-break: keep-all;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   15-2. 인재상 (5단 컬럼)
   · 상단 굵은 라인 + 1px 구분선 그리드 (목록 배경색을 gap 으로 노출)
   · 컬럼마다 대형 아웃라인 이니셜, hover 시 아래 → 위로 주황 톤이 차오름
   -------------------------------------------------------------------------- */
.people-talent__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  border-top: 2px solid var(--sub-ink);
  border-bottom: 1px solid var(--sub-line);
  background: var(--sub-line);
}

.people-talent__item {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(360px, 23.9583vw, 460px);                /* 460 / 1920 */
  padding: clamp(24px, 1.875vw, 36px) clamp(20px, 1.6667vw, 32px) clamp(28px, 2.2917vw, 44px);
  overflow: hidden;
  background: #fff;
  isolation: isolate;
}

.people-talent__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, rgba(255, 241, 230, 0) 0%, var(--sub-orange-soft) 100%);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .5s var(--sub-ease);
}

.people-talent__letter {
  position: absolute;
  top: clamp(4px, 0.5208vw, 10px);
  right: clamp(12px, 1.0417vw, 20px);
  z-index: -1;
  font-size: clamp(110px, 8.8542vw, 170px);                  /* 170 / 1920 */
  font-weight: 800;
  line-height: 1;
  /* 가변 폰트(Pretendard Variable)의 겹친 윤곽선이 stroke 로 드러나는 현상 방지
     → 배경색(#fff)으로 채운 뒤 fill 을 stroke 위에 그려 내부 선을 가림 (선 굵기는 2배 지정 = 바깥쪽 절반만 노출) */
  color: #fff;
  -webkit-text-stroke: 3px #ebebeb;
  paint-order: stroke fill;
  pointer-events: none;
  user-select: none;
  transition: -webkit-text-stroke-color .4s ease, transform .5s var(--sub-ease);
}

.people-talent__num {
  font-size: clamp(13px, 0.8333vw, 16px);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--sub-muted);
  transition: color .3s ease;
}

.people-talent__body { margin-top: auto; padding-top: clamp(40px, 3.125vw, 60px); }

.people-talent__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(48px, 2.9167vw, 56px);                        /* 56 / 1920 */
  aspect-ratio: 1;
  margin-bottom: clamp(20px, 1.4583vw, 28px);
  border: 1px solid var(--sub-orange-line);
  border-radius: 50%;
  background: #fff;
  color: var(--sub-orange);
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

.people-talent__icon svg { width: 48%; height: 48%; }

.people-talent__key {
  font-size: clamp(22px, 1.4583vw, 28px);                    /* 28 / 1920 */
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--sub-ink);
}

.people-talent__key em { font-style: normal; color: var(--sub-orange); }

.people-talent__desc {
  margin-top: clamp(10px, 0.7292vw, 14px);
  font-size: clamp(14px, 0.8854vw, 17px);
  line-height: 1.65;
  color: var(--sub-text);
  word-break: keep-all;
  text-wrap: pretty;
}

@media (hover: hover) {
  .people-talent__item:hover::before                { transform: scaleY(1); }
  .people-talent__item:hover .people-talent__letter { -webkit-text-stroke-color: var(--sub-orange-line); transform: translateY(-8px); }
  .people-talent__item:hover .people-talent__num    { color: var(--sub-orange); }
  .people-talent__item:hover .people-talent__icon   { border-color: var(--sub-orange); background: var(--sub-orange); color: #fff; }
}

/* --------------------------------------------------------------------------
   15-3. 복지제도 (좌측 고정 헤드 + 칩 카드)
   · 데스크탑: 좌측 헤드 + 우측 2단 카드 / 1024px↓ 헤드 상단 배치 / 768px↓ 1단 카드
   -------------------------------------------------------------------------- */
.people-welfare__layout {
  display: grid;
  grid-template-columns: minmax(0, 420fr) minmax(0, 1180fr);
  align-items: start;
  gap: clamp(40px, 4.1667vw, 80px);
}

.people-welfare__head .people-head__desc { margin-top: clamp(16px, 1.25vw, 24px); }

.people-welfare__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.0417vw, 20px);
}

.people-welfare__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(16px, 1.25vw, 24px);
  padding: clamp(24px, 1.875vw, 36px);
  border: 1px solid transparent;
  border-radius: 20px;
  background: #fff;
  transition: border-color .3s ease, box-shadow .3s ease;
}

.people-welfare__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 3.3333vw, 64px);                        /* 64 / 1920 */
  aspect-ratio: 1;
  border-radius: 16px;
  background: var(--sub-orange-soft);
  color: var(--sub-orange);
  transition: background-color .3s ease, color .3s ease;
}

.people-welfare__icon svg { width: 48%; height: 48%; }

.people-welfare__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: clamp(2px, 0.3125vw, 6px) 0 clamp(14px, 1.0417vw, 20px);
}

.people-welfare__tit { font-size: clamp(17px, 1.0417vw, 20px); font-weight: 700; color: var(--sub-ink); word-break: keep-all; }
.people-welfare__num { font-size: clamp(13px, 0.7813vw, 15px); font-weight: 700; letter-spacing: .04em; color: var(--sub-muted); }

.people-welfare__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.people-welfare__chips li {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--sub-gray-bg);
  font-size: clamp(13px, 0.8333vw, 16px);
  font-weight: 500;
  line-height: 1.4;
  color: #333;
  transition: background-color .3s ease;
}

@media (hover: hover) {
  .people-welfare__card:hover                          { border-color: var(--sub-orange-line); box-shadow: 0 16px 40px rgba(0, 0, 0, .06); }
  .people-welfare__card:hover .people-welfare__icon    { background: var(--sub-orange); color: #fff; }
  .people-welfare__card:hover .people-welfare__chips li { background: var(--sub-orange-soft); }
}


/* ==========================================================================
   16. 스크롤 등장 모션 (공통)
   · [data-reveal] 요소가 뷰포트에 들어오면 아래 → 위로 페이드인
   · JS 가 html 에 .is-reveal-ready 를 붙인 경우에만 숨김 (JS 미동작 시 컨텐츠 노출 보장)
   · 같은 부모 안 형제는 JS 가 --reveal-delay 로 순차 지연
   ========================================================================== */
.is-reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity .8s ease,
    transform .9s var(--sub-ease);
  transition-delay: var(--reveal-delay, 0s);
}

.is-reveal-ready [data-reveal].is-revealed { opacity: 1; transform: none; }

/* hover 시 자체 transform 을 쓰는 카드 — 등장 완료 후 hover transition 으로 복귀 */
.is-reveal-ready .img-card[data-reveal].is-revealed,
.is-reveal-ready .func-card[data-reveal].is-revealed,
.is-reveal-ready .client-grid__item[data-reveal].is-revealed,
.is-reveal-ready .icon-card[data-reveal].is-revealed,
.is-reveal-ready .eff-card[data-reveal].is-revealed,
.is-reveal-ready .case-card[data-reveal].is-revealed,
.is-reveal-ready .bento-card[data-reveal].is-revealed,
.is-reveal-ready .step-list__item[data-reveal].is-revealed,
.is-reveal-ready .env-card[data-reveal].is-revealed,
.is-reveal-ready .ai-formula__item[data-reveal].is-revealed,
.is-reveal-ready .edition-card[data-reveal].is-revealed,
.is-reveal-ready .client-card[data-reveal].is-revealed,
.is-reveal-ready .ptn-type__item[data-reveal].is-revealed,
.is-reveal-ready .people-talent__item[data-reveal].is-revealed,
.is-reveal-ready .people-welfare__card[data-reveal].is-revealed {
  transition:
    border-color .3s ease,
    background-color .3s ease,
    box-shadow .35s ease,
    transform .35s ease,
    opacity .8s ease;
  transition-delay: 0s;
}


/* ==========================================================================
   17. 반응형
   ========================================================================== */

/* ---- ~1279px ---- */
@media (max-width: 1279px) {
  /* AX 소개 */
  .overlay-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overlay-card { aspect-ratio: 4 / 3; }

  /* 제품 상세 */
  .point-grid  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .client-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .arch        { grid-template-columns: minmax(0, 1fr); }
  .arch__layers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .icon-card-grid,
  .eff-card-grid,
  .case-card-grid,
  .func-card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .feature-summary { grid-template-columns: minmax(0, 1fr); }
  .feature-summary__tit br { display: none; }

  .step-list--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step-list--5 .step-list__item:nth-child(3)::after { display: none; }

  /* Meta 구성도 */
  .meta-arch { grid-template-columns: minmax(0, 1fr); }
  .meta-arch__link { flex-direction: row; padding: 4px 0; }
  .meta-arch__link svg,
  .meta-arch__next svg { transform: rotate(90deg); }
  .meta-arch__link br { display: none; }
  .meta-arch__list  { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .meta-arch__stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* ITSM */
  .itsm-panel { gap: 48px; }

  /* 알림톡 */
  .msg-grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .msg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* ICT */
  .client-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* 시스템 인프라 */
  .infra-proc { grid-template-columns: minmax(0, 1fr); }
  .infra-proc .arch__layers { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* 인증/수상 */
  .cert-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* 가나 소개 */
  .about-biz__link { grid-template-columns: clamp(48px, 5.2083vw, 100px) minmax(0, 1fr) auto; row-gap: 8px; }
  .about-biz__desc  { grid-column: 2; grid-row: 2; }
  .about-biz__arrow { grid-column: 3; grid-row: 1 / span 2; }

  /* 파트너 프로그램 : 혜택 3단 */
  .icon-card-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- ~1024px (태블릿) ---- */
@media (max-width: 1024px) {
  /* 헤더 · 서브 비주얼 */
  body.subpage .gnb { display: none; }
  body.subpage .gnb-toggle { display: flex; }
  body.subpage .gnb-mobile.is-open { display: flex; }

  .sub-visual__tit h1 { font-size: 52px; }
  .sub-visual__con { flex-direction: column; align-items: flex-start; }
  .depth-dropdowns { width: 100%; }
  .depth-dropdown-item { flex: 1 1 0; }
  .depth-dropdown { width: 100%; }

  /* AX 소개 */
  .ax-why__list { flex-direction: column; gap: 56px; }
  .ax-why__item:not(:last-child)::after {
    top: calc(100% + 14px);
    left: 50%;
    width: 4px;
    height: 28px;
    background: radial-gradient(circle, var(--sub-orange) 1.6px, transparent 2px) 0 0 / 4px 10px repeat-y;
    transform: translateX(-50%);
  }
  .img-card-grid { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin: 0 auto; }
  .sol-panel { grid-template-columns: minmax(0, 1fr); }
  .sol-panel__visual { order: -1; width: min(320px, 70vw); margin: 0 auto; }

  /* 제품 상세 */
  .prod-intro__body { grid-template-columns: minmax(0, 1fr); }
  .prod-intro__logo { order: -1; width: 160px; margin-top: 0; }
  .intro-visual     { width: 100%; max-width: 460px; }
  .svc { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .svc__shots { max-width: 720px; }

  .func-card-grid,
  .func-card-grid--3 { grid-template-columns: minmax(0, 1fr); max-width: 720px; }

  .eff-card { min-height: 0; }

  .arch__row--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .arch__row--6 > :first-child { grid-column: 1 / -1; }
  .arch__row--6 > :first-child br { display: none; }

  .bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-card--wide { grid-column: auto; }
  .bento-card:first-child,
  .bento-card:last-child { grid-column: 1 / -1; }
  .bento-grid--5 .bento-card:last-child { grid-column: auto; }

  .step-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step-list__item:nth-child(2)::after { display: none; }
  .step-list--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step-list--5 .step-list__item:nth-child(3)::after { display: block; }
  .step-list--5 .step-list__item:nth-child(2n)::after { display: none; }

  .std-row { grid-template-columns: minmax(0, 1fr); }
  .std-tags { flex-direction: row; flex-wrap: wrap; margin-top: 0; }
  .std-tag { flex: 1 1 160px; }
  .std-arrow { padding-right: 0; }

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

  /* AI Search */
  .ai-formula { flex-wrap: wrap; }

  /* ITSM */
  .itsm-panel { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
  .ai-formula--5 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .ai-formula--5 .ai-formula__plus { display: none; }
  .ai-formula--5 .ai-formula__item { max-width: none; }
  .arch__row--7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .itsm-arch__modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* ICT */
  .svc-tiles--2,
  .svc-tiles:not(.svc-tiles--2) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-tiles:not(.svc-tiles--2) .svc-tile { flex-direction: row; gap: 14px; padding: 16px 18px; text-align: left; }

  /* 알림톡 : 채널 다이어그램 세로 배치 */
  .at-channel { flex-direction: column; }
  .at-channel__arrow { width: 2px; height: 48px; }
  .at-channel__arrow::after {
    right: auto;
    top: auto;
    left: 50%;
    bottom: -1px;
    border-top: 9px solid var(--sub-orange);
    border-right: 6px solid transparent;
    border-bottom: 0;
    border-left: 6px solid transparent;
    transform: translateX(-50%);
  }

  /* 가나 소개 : 비전 1단 · 숫자 2단 · 핵심가치 카드형 */
  .about-intro__foot { grid-template-columns: minmax(0, 1fr); }
  .about-vision { grid-template-columns: minmax(0, 1fr); }
  .about-vision__head { position: static; }

  .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-stats__item:nth-child(2n) { border-right: 0; }

  .about-core { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }
  .about-core__item { aspect-ratio: 4 / 3; cursor: default; }
  .about-core__item .about-core__bg { opacity: .7; transform: none; }
  .about-core__more { grid-template-rows: 1fr; }
  .about-core__desc { width: auto; padding-top: 12px; opacity: 1; }

  /* 연혁 : 인트로 1단 */
  .hist-intro__inner { grid-template-columns: minmax(0, 1fr); align-items: start; }

  /* 연혁 : 좌측 고정 영역 → 상단 고정 바 (연도 + 가로 스크롤 내비) */
  .hist__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hist__aside {
    top: var(--header-h);
    z-index: 5;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    margin: 0 calc(var(--sub-pad-x) * -1);
    padding: 14px var(--sub-pad-x);
    border-bottom: 1px solid var(--sub-line);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(8px);
  }
  /* 스크롤 다운으로 헤더가 숨겨지면 화면 최상단에 붙음 */
  body:has(.header.is-hidden) .hist__aside { top: 0; }
  .hist__aside { transition: top .3s ease; }
  .hist-year__digits { font-size: 48px; }
  .hist-nav {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
    max-width: none;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .hist-nav::-webkit-scrollbar { display: none; }

  /* 오시는 길 : 정보 1단 */
  .loc-info { grid-template-columns: minmax(0, 1fr); }

  /* 파트너 프로그램 */
  .ptn-type__desc br { display: none; }

  /* 가나피플 : 인재상 2단(마지막 카드 전체 폭) · 복지 헤드 상단 배치 */
  .people-talent__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people-talent__item:last-child { grid-column: 1 / -1; }
  .people-welfare__layout { grid-template-columns: minmax(0, 1fr); }
}

/* ---- ~768px (모바일) ---- */
@media (max-width: 768px) {
  :root { --sub-pad-x: 20px; }

  /* 헤더 · 서브 비주얼 */
  body.subpage .header { padding: 0 20px; }
  body.subpage .logo { width: 130px; height: 36px; }

  .sub-visual { gap: 40px; padding-top: 90px; padding-bottom: 40px; }
  .sub-visual__tit h1 { font-size: 36px; }
  .sub-visual__tit p { font-size: 16px; }
  .breadcrumb { gap: 10px; font-size: 13px; }
  .depth-dropdowns { flex-direction: column; }
  .depth-dropdown-item,
  .depth-dropdown { width: 100%; }

  /* 공통 */
  .sub-tab-list { flex-wrap: nowrap; justify-content: flex-start; gap: 0 24px; overflow-x: auto; scrollbar-width: none; }
  .sub-tab-list::-webkit-scrollbar { display: none; }
  .sub-cta__tit br,
  .sub-banner__desc br { display: none; }
  .sec-head { flex-direction: column; align-items: flex-start; }
  .btn-line { flex: 1 1 0; min-width: 0; padding: 0 14px; }

  /* AX 소개 */
  .sol-panel__list { grid-template-columns: minmax(0, 1fr); }
  .overlay-card-grid { grid-template-columns: minmax(0, 1fr); }

  /* 제품 상세 */
  .prod-intro__actions { justify-content: flex-start; }
  .prod-intro__line { display: none; }
  .prod-intro__logo { width: 120px; }

  .check-card-grid { grid-template-columns: minmax(0, 1fr); }
  .check-card__tit { align-items: flex-start; }
  .check-card__icon { width: 34px; height: 34px; margin-top: -4px; background: radial-gradient(circle, var(--sub-orange-soft) 0 11px, transparent 12px); }

  .point-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-card-grid,
  .env-grid { grid-template-columns: minmax(0, 1fr); }
  .env-card { align-items: flex-start; }
  .feature-summary__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

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

  .meta-arch__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meta-arch__stack,
  .meta-arch__core,
  .meta-arch__base { grid-template-columns: minmax(0, 1fr); }
  .meta-arch__base .arch__cell--empty { display: none; }

  .spec-table th { width: 90px; }
  .func-row .dot-list { grid-template-columns: minmax(0, 1fr); }

  /* AI Search : 공식 카드 세로 배치 */
  .ai-formula { flex-direction: column; flex-wrap: nowrap; }
  .ai-formula__item { flex-direction: row; gap: 18px; width: 100%; max-width: 420px; padding: 16px 20px; text-align: left; }
  .ai-formula__icon { width: 64px; }
  .ai-summary br { display: none; }

  /* ITSM : 흐름 세로 배치 · 공식/에디션 카드 1단 */
  .itsm-flow { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .itsm-flow::before {
    top: calc(var(--node) / 2);
    bottom: calc(var(--node) / 2);
    left: calc(var(--node) / 2 - 1px);
    right: auto;
    width: 2px;
    height: auto;
    background: repeating-linear-gradient(180deg, var(--sub-orange-line) 0 6px, transparent 6px 12px);
  }
  .itsm-flow__step { flex-direction: row; gap: 14px; text-align: left; }

  .ai-formula--5 { grid-template-columns: minmax(0, 420px); justify-content: center; }
  .ai-formula--5 .ai-formula__item { width: 100%; max-width: none; }
  .ai-formula__desc br,
  .sec-center__desc br { display: none; }

  .edition-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; }

  /* 구분선 리스트 → 가로 구분선 */
  .divide-list { grid-template-columns: minmax(0, 1fr); }
  .divide-list__item { padding: 24px 0; border-left: 0; border-top: 1px solid var(--sub-line); }
  .divide-list__item:first-child { padding-top: 0; border-top: 0; }

  /* 알림톡 */
  .sub-head__desc br { display: none; }
  .msg-grid,
  .msg-grid--3 { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin: 0 auto; }
  .offer-grid,
  .usecase-list { grid-template-columns: minmax(0, 1fr); }
  .usecase__txt br { display: none; }

  /* ICT */
  .client-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .banner-split { grid-template-columns: minmax(0, 1fr); }
  .banner-split .sub-banner { min-height: 260px; }
  .banner-split .sub-banner__tit br { display: none; }

  /* 시스템 인프라 : 흐름도 세로 배치 */
  .infra-proc__flow { grid-template-columns: minmax(0, 1fr); }
  .infra-proc__next svg { transform: rotate(90deg); }
  .infra-proc__stage { min-height: 52px; }
  .sec-head__desc br { display: none; }
  .infra-proc .arch__layers { grid-template-columns: minmax(0, 1fr); }

  /* 가나 소개 */
  .about-intro__statement br,
  .about-intro__sub br,
  .about-vision__txt br { display: none; }
  .about-media { height: 360px; }
  .about-media__frame { clip-path: inset(calc((1 - var(--r)) * 6%) calc((1 - var(--r)) * var(--sub-pad-x)) round calc((1 - var(--r)) * 20px)); }
  .about-vision__item { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .about-vision__key { padding-top: 0; }
  .about-stats__num { justify-content: flex-start; }
  .about-stats__item { padding-left: 0; padding-right: 16px; }
  .about-stats__item:nth-child(2n) { padding-left: 16px; }
  .about-core { grid-template-columns: minmax(0, 1fr); }
  .about-core__item { aspect-ratio: 16 / 11; }
  .about-biz__link { grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 12px; padding: 24px 0; }

  /* 연혁 */
  .hist-intro__tit br { display: none; }
  .hist-intro__inner { padding-top: 40px; }
  .hist-intro__bg { -webkit-text-stroke-width: 2px; }
  .hist__inner { --hist-gap: 28px; }
  .hist__aside { gap: 14px; padding-top: 12px; padding-bottom: 12px; }
  .hist-year__digits { font-size: 36px; }
  .hist-item { grid-template-columns: minmax(0, 1fr); gap: 4px; }

  /* 인증/수상 : 2단 · 필터 가로 스크롤 */
  .cert__tit br { display: none; }
  .cert-filter {
    flex-wrap: nowrap;
    width: calc(100% + var(--sub-pad-x) * 2);
    margin: 0 calc(var(--sub-pad-x) * -1);
    padding: 0 var(--sub-pad-x);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .cert-filter::-webkit-scrollbar { display: none; }
  .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .cert-card__thumb { padding: 14px; border-radius: 14px; }
  .cert-card__zoom { display: none; }

  .cert-lightbox { padding: 56px 16px 24px; }
  .cert-lightbox__img { max-height: calc(100vh - 170px); }
  .cert-lightbox__nav { width: 40px; background: rgba(0, 0, 0, .45); }
  .cert-lightbox__nav--prev { left: -4px; }
  .cert-lightbox__nav--next { right: -4px; }
  .cert-lightbox__close { top: -48px; right: -8px; }

  /* 오시는 길 */
  .loc-tabs { display: flex; width: 100%; }
  .loc-tab { flex: 1 1 0; min-width: 0; padding: 0 8px; }
  .loc-map { height: 320px; border-radius: 14px; }
  .loc-info__addr br { display: none; }
  .loc-info__list { grid-template-columns: minmax(0, 1fr); }
  .loc-info__item:nth-child(2) { padding-top: clamp(20px, 1.4583vw, 28px); }
  .loc-toast { bottom: 24px; max-width: calc(100% - 40px); }

  /* 파트너 프로그램 : 유형 1단 · 혜택 2단 */
  .ptn-type__visual { min-height: 260px; border-radius: 16px; }
  .ptn-type__list { grid-template-columns: minmax(0, 1fr); }
  .ptn-type__txt br { display: none; }
  .icon-card-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* 가나피플 : 헤드 1단 · 복지 카드 1단 */
  .people-head { grid-template-columns: minmax(0, 1fr); }
  .people-welfare__grid { grid-template-columns: minmax(0, 1fr); }
  .people-cta .sub-cta__tit br { display: none; }
}

/* ---- ~600px ---- */
@media (max-width: 600px) {
  .bento-grid { grid-template-columns: minmax(0, 1fr); }
  .bento-card { min-height: 0; }

  .at-channel__group { display: grid; grid-template-columns: repeat(2, auto); border-radius: 32px; }

  /* 가나피플 : 인재상 · 복지 1단 */
  .people-talent__list,
  .people-welfare__grid { grid-template-columns: minmax(0, 1fr); }
  .people-talent__item { min-height: 0; }
  .people-talent__body { padding-top: 28px; }
  .people-talent__letter { font-size: 96px; }

}

/* ---- ~480px ---- */
@media (max-width: 480px) {
  .about-stats { grid-template-columns: minmax(0, 1fr); }
  .about-stats__item,
  .about-stats__item:nth-child(2n) { padding-left: 0; border-right: 0; }
  .about-stats__item { flex-direction: row; align-items: baseline; justify-content: space-between; }

  .point-grid,
  .icon-card-grid,
  .eff-card-grid,
  .itsm-arch__modules,
  .client-card-grid,
  .svc-tiles--2,
  .svc-tiles:not(.svc-tiles--2) { grid-template-columns: minmax(0, 1fr); }
  .arch__row--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .spec-table th,
  .spec-table td { display: block; width: 100%; }
  .spec-table th { padding-bottom: 4px; border-bottom: 0; }
  .spec-table td { padding-top: 0; }

  .step-list,
  .step-list--5 { grid-template-columns: minmax(0, 1fr); }
  .loc-info__actions .btn-line { flex: 1 1 100%; }

  .step-list__item:not(:last-child)::after,
  .step-list--5 .step-list__item:not(:last-child)::after {
    display: block;
    top: auto;
    right: 50%;
    bottom: calc(clamp(16px, 1.5625vw, 30px) / -2 - 5px);
    transform: translateX(50%) rotate(135deg);
  }

  /* 파트너 프로그램 : 혜택 1단 */
  .icon-card-grid--5 { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   18. 모션 최소화
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .is-reveal-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
  .sub-tab-panel.is-active,
  .arch__arrow svg,
  .std-arrow svg,
  .scroll-hint svg,
  .about-marquee__track { animation: none; }
  .hist-intro__bg { transform: none; }
  .cert-card.is-filtered { animation: none; }
  .cert-card__thumb,
  .cert-card__zoom,
  .cert-lightbox,
  .cert-lightbox__figure,
  .cert-lightbox__img { transition: none; }
  .hist-year__reel,
  .hist-group::before,
  .hist-group__year,
  .hist-nav__btn { transition: none; }
  .loc-map__loading,
  .loc-toast,
  .loc-tab { transition: none; }
  .ptn-type__item,
  .ptn-type__item::before,
  .people-talent__item::before,
  .people-talent__letter,
  .people-talent__num,
  .people-talent__icon,
  .people-welfare__card,
  .people-welfare__icon,
  .people-welfare__chips li { transition: none; }

  .ax-why__item::before,
  .img-card,
  .img-card__thumb img,
  .overlay-card__bg,
  .svc__item::before,
  .faq__answer,
  .faq__answer p,
  .func-card,
  .func-card__thumb img,
  .icon-card,
  .eff-card,
  .eff-card__icon,
  .case-card,
  .bento-card,
  .bento-card__deco,
  .feature-chip,
  .feature-chip__icon,
  .step-list__item,
  .step-list__icon,
  .env-card,
  .env-card__icon,
  .func-row,
  .ai-formula__item,
  .ai-formula__icon,
  .itsm-flow__num,
  .edition-card,
  .usecase__icon,
  .svc-tile,
  .svc-tile__icon,
  .svc-tile__num,
  .img-card__icon,
  .client-card,
  .about-core__item,
  .about-core__bg,
  .about-core__more,
  .about-core__desc,
  .about-biz__link::before,
  .about-biz__tit,
  .about-biz__arrow svg,
  .about-fill__w { transition: none; }
}