/* ==============================================
   코디온(CodiON) 홍보 웹사이트
   디자인: Figma — 20260401_코디온홍보웹사이트
   퍼블리싱: 2026.04.09
   ============================================== */
/* CSS 변수는 css/variables.css 에서 관리 */

/* ── 공통 ── */
.section-label {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 1.75rem;    /* 28px */
  color: var(--color-blue-deep);
  line-height: 1.4;
  text-align: center;
}

.section-title {
  font-family: var(--font-base);
  font-weight: 800;
  font-size: 2.875rem;   /* 46px */
  color: #000;
  line-height: 1.3;
  text-align: center;
}

/* 그라디언트 텍스트 */
.text-grad {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ==============================================
   스킵 내비게이션
   ============================================== */
.skip-nav {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  padding: 1rem;
  background: var(--color-blue-deep);
  color: var(--color-white);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  z-index: 9999;
  transition: top var(--transition);
}
.skip-nav:focus {
  top: 0;
}


/* ==============================================
   GNB (전역 내비게이션)
   ============================================== */
.gnb {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: 20px 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* ── 초기 상태: 투명 (hero 위에 자연스럽게 올라감) ── */
  background: transparent;
  backdrop-filter: blur(0px) saturate(1);
  -webkit-backdrop-filter: blur(0px) saturate(1);
  border-bottom: 1px solid transparent;
  box-shadow: none;

  /* ── 모든 상태 전환을 하나의 transition으로 ── */
  transition:
    background        0.4s ease,
    backdrop-filter   0.4s ease,
    -webkit-backdrop-filter 0.4s ease,
    border-color      0.4s ease,
    box-shadow        0.4s ease,
    transform         0.35s ease;
}

/* 스크롤 다운 → 위로 숨김 (기존 동작 유지) */
.gnb.is-hidden {
  transform: translateY(-100%);
}

/* 패널: 데스크탑에서는 flex row */
.gnb__panel {
  display: flex;
  align-items: center;
  gap: 70px;
  margin-left: auto;
}

/* ── 스크롤 시: 화이트 글래스모피즘 ── */
.gnb.is-scrolled {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid transparent;
  box-shadow: none;
}

/* ── 서브페이지: 화이트 글래스모피즘 ── */
.gnb--solid {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid transparent;
  box-shadow: none;
}

/* ── 서브페이지: 스크롤 시 조금 더 불투명 ── */
.gnb--solid.is-scrolled {
  background: rgba(255, 255, 255, 0.08);
}

/* ── 밝은 GNB (스크롤 중 밝은 섹션 / 서브페이지): 다크 컬러 ── */
.gnb.is-scrolled:not(.gnb--on-dark) .gnb__menu-link,
.gnb--solid .gnb__menu-link { color: #111; }
.gnb.is-scrolled:not(.gnb--on-dark) .gnb__menu-link::after,
.gnb--solid .gnb__menu-link::after { background: var(--grad-brand); }
.gnb.is-scrolled:not(.gnb--on-dark) .gnb__menu-link:focus-visible,
.gnb--solid .gnb__menu-link:focus-visible { outline-color: #002572; }
.gnb.is-scrolled:not(.gnb--on-dark) .gnb__hamburger span,
.gnb--solid .gnb__hamburger span { background: #111; }

/* 로고 */
.gnb__logo {
  position: relative;
  display: block;
  width: 170px;
  flex-shrink: 0;
}
.gnb__logo img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.4s ease;
}
/* 다크 로고: 기본 숨김 */
.gnb__logo-dark {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}
/* 밝은 섹션(스크롤) / 서브페이지: 다크 로고로 크로스페이드 */
.gnb.is-scrolled:not(.gnb--on-dark) .gnb__logo-light,
.gnb--solid .gnb__logo-light {
  opacity: 0;
  pointer-events: none;
}
.gnb.is-scrolled:not(.gnb--on-dark) .gnb__logo-dark,
.gnb--solid .gnb__logo-dark {
  opacity: 1;
  pointer-events: auto;
}

/* 햄버거 버튼 (기본 숨김 — 모바일에서만 표시) */
.gnb__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  padding: 4px;
  flex-shrink: 0;
  z-index: 101;
}
.gnb__hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-white);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}
/* 열린 상태 — X 모양 */
.gnb.is-open .gnb__hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.gnb.is-open .gnb__hamburger span:nth-child(2) { opacity: 0; }
.gnb.is-open .gnb__hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* 메뉴 */
.gnb__menu {
  display: flex;
  gap: 70px;
  align-items: center;
}
.gnb__menu-item {}
.gnb__menu-link {
  display: block;
  position: relative;
  font-family: var(--font-base);
  font-weight: 800;
  font-size: 1.25rem;   /* 20px */
  color: var(--color-white);
  padding: 5px 0;
  white-space: nowrap;
  line-height: 1.4;
  transition: color var(--transition);
}
.gnb__menu-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--grad-brand);
  transition: width 0.35s ease;
}
.gnb__menu-link:hover::after,
.gnb__menu-link.is-active::after {
  width: 100%;
}
.gnb__menu-link:focus-visible {
  outline-color: var(--color-white);
}

/* 문의하기 버튼 */
.gnb__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 20px;
  border-radius: 8px;
  background: var(--grad-brand);
  font-family: var(--font-base);
  font-weight: 800;
  font-size: 1.125rem;  /* 18px */
  color: var(--color-white);
  white-space: nowrap;
  line-height: 1.4;
  transition: opacity var(--transition);
}
.gnb__cta:hover { opacity: 0.85; }


/* ==============================================
   01. 메인비주얼
   ============================================== */
/* visual + slogan 감싸는 wrapper — visual sticky pin 범위 제어 */
.visual-wrap {
  position: relative;
  background: #07092e; /* 섹션 전환 시 body #fff 노출 방지 */
}

.visual {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  background: #07092e;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

/* 배경 동영상 */
.visual__video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.visual__video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.visual__inner {
  position: relative;
  z-index: 2;
}
.visual__video-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(7, 9, 46, 0.6); /* 텍스트 가독성 확보용 오버레이 */
}
.visual__video-bg iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 16:9 비율로 뷰포트보다 크게 확장 */
  width: 100vw;
  height: 56.25vw; /* 100vw ÷ 16 × 9 */
  min-width: 177.78vh; /* 100vh × 16 ÷ 9 */
  min-height: 100vh;
  border: none;
}

/* 배경 장식 (CSS 전용) */

.visual::before {
  top: 50%;
  left: 45%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 900px;
  border: 80px solid rgba(47, 107, 255, 0.12);
  box-shadow:
    0 0 0 120px rgba(100, 50, 200, 0.06),
    0 0 0 200px rgba(200, 50, 150, 0.05);
}
.visual::after {
  bottom: -100px;
  left: 200px;
  width: 600px;
  height: 600px;
  border: 60px solid rgba(44, 211, 163, 0.1);
}

.visual__inner {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  gap: clamp(32px, 5vw, 120px);
  align-items: center;
  padding: 91px clamp(40px, 7vw, 120px) 100px;
}

/* 슬로건 */
.visual__slogan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex-shrink: 0;
  min-width: 0;
}

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

.visual__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.25rem, 4vw, 4.5rem);
  color: var(--color-white);
  line-height: 1.35;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  opacity: 0;
  animation: fadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}
.visual__heading strong {
  font-weight: 800;
}

/* 첫 줄: [ 키워드 ]을 연결하는 — inline-flex */
.visual__line1 {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* [ ] 브라켓 */
.visual__bk {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 4vw, 4.5rem);
  line-height: 1.35;
  color: var(--color-white);
  flex-shrink: 0;
}
.visual__bk:first-child  { padding-right: 0.35em; } /* [ 뒤 간격 넓게 */
.visual__bk:last-of-type { padding-left:  0.35em; } /* ] 앞 간격 넓게 */

/* 롤링 키워드 영역 */
.visual__keyword-wrap {
  position: relative;
  width: 2.5em;
  height: 1.35em;
  overflow: hidden;
  flex-shrink: 0;
  font-size: clamp(2.25rem, 4vw, 4.5rem);
}
.visual__keyword-list {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1em;
  line-height: 1.35;
  animation: rolling 9s infinite; /* 50% 느리게 */
}
.visual__keyword-list li {
  flex-shrink: 0;
  height: 1.35em;
  display: flex;
  align-items: center;
  justify-content: center; /* 브라켓 중앙 정렬 */
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/*
  seamless 루프 원리:
  4번째 li = "공간" 복사본 → 93%에서 -291px 유지 후
  93.01%에 translateY(0) 으로 즉시 snap (같은 글자라 안 보임)
*/
@keyframes rolling {
  0%,   20%  { transform: translateY(0); }
  27%,  47%  { transform: translateY(-1.35em); }
  54%,  74%  { transform: translateY(-2.7em); }
  81%,  93%  { transform: translateY(-4.05em); }
  93.01%, 100% { transform: translateY(0); }
}

.visual__desc {
  font-family: var(--font-base);
  font-weight: 400;
  font-size: clamp(1rem, 1.5vw, 1.625rem);
  color: var(--color-white);
  line-height: 1.35;
  white-space: nowrap;
  opacity: 0;
  animation: fadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.75s forwards;
}

/* CD 제품 이미지 */
.visual__image {
  position: relative;
  flex: 0 1 45%;
  max-width: 678px;
  min-width: 220px;
  aspect-ratio: 678 / 488;
  height: auto;
  opacity: 0;
  animation: fadeUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}
.visual__image svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ==============================================
   CD SVG 애니메이션
   (cd-wrapper-animated.html 기반)
   ============================================== */

/* 픽셀 깜빡임 키프레임 */
@keyframes blink1 {
  0%, 100% { opacity: 1; }
  40%       { opacity: 0.08; }
  60%       { opacity: 0.9; }
}
@keyframes blink2 {
  0%, 100% { opacity: 0.7; }
  30%       { opacity: 0.05; }
  65%       { opacity: 1; }
}
@keyframes blink3 {
  0%, 100% { opacity: 1; }
  20%       { opacity: 0.4; }
  50%       { opacity: 0.05; }
  80%       { opacity: 0.85; }
}
@keyframes blink4 {
  0%, 100% { opacity: 0.5; }
  35%       { opacity: 1; }
  70%       { opacity: 0.1; }
}
@keyframes blink5 {
  0%, 100% { opacity: 1; }
  45%       { opacity: 0.2; }
  75%       { opacity: 0.7; }
}

/* 그라디언트 stop 색상 순환 */
@keyframes gradFlow {
  0%   { stop-color: #07328B; }
  25%  { stop-color: #0E7FBF; }
  50%  { stop-color: #26E0EA; }
  75%  { stop-color: #2CD3A3; }
  100% { stop-color: #07328B; }
}
@keyframes gradFlow2 {
  0%   { stop-color: #B7FE4A; }
  33%  { stop-color: #26E0EA; }
  66%  { stop-color: #2CD3A3; }
  100% { stop-color: #B7FE4A; }
}
@keyframes gradFlow3 {
  0%   { stop-color: #26E0EA; }
  50%  { stop-color: #B7FE4A; }
  100% { stop-color: #26E0EA; }
}

/* 그라디언트 stop 애니메이션 */
#s0  { animation: gradFlow  6s ease-in-out infinite; }
#s1  { animation: gradFlow3 6s ease-in-out infinite 1s; }
#s2  { animation: gradFlow3 6s ease-in-out infinite 2s; }
#s3  { animation: gradFlow3 6s ease-in-out infinite 3s; }
#s4  { animation: gradFlow2 6s ease-in-out infinite; }
#ms0 { animation: gradFlow  6s ease-in-out infinite; }
#ms1 { animation: gradFlow3 5s ease-in-out infinite 0.5s; }
#ms2 { animation: gradFlow2 6s ease-in-out infinite; }

/* 픽셀 그룹 — 상단 중앙 */
.px-top-1  { animation: blink1 2.3s ease-in-out infinite 0s; }
.px-top-2  { animation: blink2 3.1s ease-in-out infinite 0.4s; }
.px-top-3  { animation: blink3 2.7s ease-in-out infinite 0.8s; }
.px-top-4  { animation: blink4 1.9s ease-in-out infinite 1.2s; }
.px-top-5  { animation: blink5 3.5s ease-in-out infinite 0.2s; }
.px-top-6  { animation: blink1 2.1s ease-in-out infinite 1.5s; }
.px-top-7  { animation: blink3 2.9s ease-in-out infinite 0.6s; }
.px-top-8  { animation: blink2 1.8s ease-in-out infinite 1.0s; }
.px-top-9  { animation: blink4 3.3s ease-in-out infinite 0.3s; }
.px-top-10 { animation: blink5 2.5s ease-in-out infinite 1.8s; }
.px-top-11 { animation: blink1 3.0s ease-in-out infinite 0.7s; }
.px-top-12 { animation: blink2 2.2s ease-in-out infinite 1.3s; }
.px-top-13 { animation: blink3 1.7s ease-in-out infinite 2.0s; }
.px-top-14 { animation: blink4 2.8s ease-in-out infinite 0.5s; }
.px-top-15 { animation: blink5 2.0s ease-in-out infinite 1.6s; }
.px-top-16 { animation: blink1 3.4s ease-in-out infinite 0.9s; }
.px-top-17 { animation: blink2 2.6s ease-in-out infinite 1.4s; }

/* 픽셀 그룹 — 우측 */
.px-right-1  { animation: blink2 2.4s ease-in-out infinite 0.1s; }
.px-right-2  { animation: blink3 3.2s ease-in-out infinite 0.5s; }
.px-right-3  { animation: blink1 2.0s ease-in-out infinite 1.0s; }
.px-right-4  { animation: blink4 2.8s ease-in-out infinite 0.3s; }
.px-right-5  { animation: blink5 1.9s ease-in-out infinite 1.5s; }
.px-right-6  { animation: blink2 3.0s ease-in-out infinite 0.7s; }
.px-right-7  { animation: blink1 2.5s ease-in-out infinite 1.2s; }
.px-right-8  { animation: blink3 2.1s ease-in-out infinite 0.4s; }
.px-right-9  { animation: blink4 3.3s ease-in-out infinite 0.8s; }
.px-right-10 { animation: blink5 2.7s ease-in-out infinite 1.7s; }
.px-right-11 { animation: blink1 2.3s ease-in-out infinite 0.2s; }
.px-right-12 { animation: blink2 1.8s ease-in-out infinite 1.1s; }
.px-right-13 { animation: blink3 2.9s ease-in-out infinite 0.6s; }
.px-right-14 { animation: blink4 2.2s ease-in-out infinite 1.9s; }
.px-right-15 { animation: blink5 3.1s ease-in-out infinite 0.9s; }
.px-right-16 { animation: blink1 2.6s ease-in-out infinite 1.4s; }
.px-right-17 { animation: blink2 2.0s ease-in-out infinite 0.3s; }
.px-right-18 { animation: blink3 3.4s ease-in-out infinite 1.6s; }
.px-right-19 { animation: blink4 2.4s ease-in-out infinite 0.5s; }
.px-right-20 { animation: blink5 1.7s ease-in-out infinite 1.3s; }
.px-right-21 { animation: blink1 3.0s ease-in-out infinite 2.1s; }
.px-right-22 { animation: blink2 2.8s ease-in-out infinite 0.0s; }

/* 픽셀 그룹 — 상단 좌측 */
.px-tl-1  { animation: blink3 2.2s ease-in-out infinite 0.2s; }
.px-tl-2  { animation: blink1 3.0s ease-in-out infinite 0.8s; }
.px-tl-3  { animation: blink4 2.5s ease-in-out infinite 0.4s; }
.px-tl-4  { animation: blink2 1.9s ease-in-out infinite 1.2s; }
.px-tl-5  { animation: blink5 2.8s ease-in-out infinite 0.6s; }
.px-tl-6  { animation: blink3 3.1s ease-in-out infinite 1.0s; }
.px-tl-7  { animation: blink1 2.3s ease-in-out infinite 0.0s; }
.px-tl-8  { animation: blink4 2.7s ease-in-out infinite 1.4s; }
.px-tl-9  { animation: blink2 2.0s ease-in-out infinite 0.3s; }
.px-tl-10 { animation: blink5 3.3s ease-in-out infinite 1.7s; }
.px-tl-11 { animation: blink1 2.1s ease-in-out infinite 0.9s; }
.px-tl-12 { animation: blink3 2.9s ease-in-out infinite 1.5s; }
.px-tl-13 { animation: blink4 1.8s ease-in-out infinite 2.0s; }
.px-tl-14 { animation: blink2 2.6s ease-in-out infinite 0.5s; }
.px-tl-15 { animation: blink5 3.4s ease-in-out infinite 0.1s; }
.px-tl-16 { animation: blink1 2.4s ease-in-out infinite 1.1s; }
.px-tl-17 { animation: blink3 1.7s ease-in-out infinite 0.7s; }
.px-tl-18 { animation: blink2 3.2s ease-in-out infinite 1.3s; }

/* 픽셀 그룹 — 하단 */
.px-bot-1  { animation: blink4 2.3s ease-in-out infinite 0.1s; }
.px-bot-2  { animation: blink2 3.0s ease-in-out infinite 0.6s; }
.px-bot-3  { animation: blink5 2.6s ease-in-out infinite 1.1s; }
.px-bot-4  { animation: blink1 1.9s ease-in-out infinite 0.4s; }
.px-bot-5  { animation: blink3 2.8s ease-in-out infinite 1.3s; }
.px-bot-6  { animation: blink4 3.2s ease-in-out infinite 0.8s; }
.px-bot-7  { animation: blink2 2.1s ease-in-out infinite 1.6s; }
.px-bot-8  { animation: blink5 2.5s ease-in-out infinite 0.2s; }
.px-bot-9  { animation: blink1 3.1s ease-in-out infinite 1.9s; }
.px-bot-10 { animation: blink3 2.0s ease-in-out infinite 0.7s; }
.px-bot-11 { animation: blink4 2.9s ease-in-out infinite 1.4s; }
.px-bot-12 { animation: blink2 2.4s ease-in-out infinite 0.3s; }
.px-bot-13 { animation: blink5 1.8s ease-in-out infinite 1.0s; }
.px-bot-14 { animation: blink1 3.3s ease-in-out infinite 0.5s; }
.px-bot-15 { animation: blink3 2.7s ease-in-out infinite 1.8s; }
.px-bot-16 { animation: blink4 2.2s ease-in-out infinite 0.9s; }
.px-bot-17 { animation: blink2 3.4s ease-in-out infinite 1.2s; }
.px-bot-18 { animation: blink5 2.3s ease-in-out infinite 0.0s; }
.px-bot-19 { animation: blink1 2.1s ease-in-out infinite 1.5s; }
.px-bot-20 { animation: blink3 1.7s ease-in-out infinite 2.2s; }
.px-bot-21 { animation: blink4 3.0s ease-in-out infinite 0.6s; }
.px-bot-22 { animation: blink2 2.8s ease-in-out infinite 1.7s; }
.px-bot-23 { animation: blink5 2.5s ease-in-out infinite 0.4s; }
.px-bot-24 { animation: blink1 3.2s ease-in-out infinite 1.0s; }
.px-bot-25 { animation: blink3 2.0s ease-in-out infinite 1.3s; }
.px-bot-26 { animation: blink4 2.7s ease-in-out infinite 0.2s; }

/* 픽셀 그룹 — 좌측 */
.px-left-1  { animation: blink5 2.4s ease-in-out infinite 0.3s; }
.px-left-2  { animation: blink1 3.0s ease-in-out infinite 0.9s; }
.px-left-3  { animation: blink3 2.2s ease-in-out infinite 1.4s; }
.px-left-4  { animation: blink2 2.8s ease-in-out infinite 0.1s; }
.px-left-5  { animation: blink4 1.9s ease-in-out infinite 1.8s; }
.px-left-6  { animation: blink5 3.1s ease-in-out infinite 0.5s; }
.px-left-7  { animation: blink1 2.6s ease-in-out infinite 1.1s; }
.px-left-8  { animation: blink3 2.0s ease-in-out infinite 0.7s; }
.px-left-9  { animation: blink2 3.3s ease-in-out infinite 1.6s; }
.px-left-10 { animation: blink4 2.5s ease-in-out infinite 0.4s; }
.px-left-11 { animation: blink5 2.1s ease-in-out infinite 2.0s; }
.px-left-12 { animation: blink1 2.9s ease-in-out infinite 0.8s; }
.px-left-13 { animation: blink3 2.3s ease-in-out infinite 1.3s; }
.px-left-14 { animation: blink2 3.4s ease-in-out infinite 0.6s; }
.px-left-15 { animation: blink4 1.8s ease-in-out infinite 1.0s; }
.px-left-16 { animation: blink5 2.7s ease-in-out infinite 1.5s; }
.px-left-17 { animation: blink1 3.2s ease-in-out infinite 0.2s; }
.px-left-18 { animation: blink3 2.4s ease-in-out infinite 1.7s; }
.px-left-19 { animation: blink2 2.0s ease-in-out infinite 0.0s; }
.px-left-20 { animation: blink4 2.8s ease-in-out infinite 1.2s; }
.px-left-21 { animation: blink5 1.7s ease-in-out infinite 0.9s; }
.px-left-22 { animation: blink1 3.0s ease-in-out infinite 2.1s; }


/* ==============================================
   02. 슬로건 섹션
   ============================================== */
/* slogan-pin: 슬로건 고정 + 텍스트 채움 스크롤 공간 */
.slogan-pin {
  position: relative;
  min-height: calc(100svh + 660vh); /* 100vh 슬로건 채움 + 120vh 홀드 + 120vh 원형 전환 + 220vh text1→text2→desc 애니 + 100vh 주요기능 전환 홀드 */
}

/* ==============================================
   02→03. 원형 전환 (circle reveal)
   ============================================== */
.circle-zone {
  /* slogan-pin 전체를 덮는 overlay — 자체 스크롤 트리거 없음 */
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: transparent;
  z-index: 3;
}

.circle-zone__inner {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  clip-path: circle(var(--cz-r, 0%) at 50% 50%);
  will-change: clip-path;
}

.circle-zone__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 125.52%;
  top: -12.76%;
  object-fit: cover;
  pointer-events: none;
}

/* circle-zone 내부 about 섹션 초기 상태 레이어 */
.circle-zone__content {
  position: absolute;
  inset: 0;
}
/* about__phase1-group이 circle-zone__content 기준으로 중앙 위치 */
.circle-zone__content .about__phase1-group {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.slogan {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 0;
  padding: 100px var(--section-px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 50px;
  min-height: 100svh;
}

.slogan__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.slogan__sub {
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 1.75rem;   /* 28px */
  color: var(--color-white);
  line-height: 1.4;
  text-align: center;
}

.slogan__title {
  position: relative;
  font-family: var(--font-base);
  font-weight: 800;
  font-size: 3.25rem;   /* 52px */
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  /* 초기: 흰색 아웃라인만 */
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.45);
}

/* 그라디언트 채움 레이어 — 스크롤에 비례해 좌→우 reveal */
.slogan__title::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  height: 100%;
  text-align: center;
  white-space: nowrap;
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-text-stroke: 0px transparent;
  /* --fill: 0(시작) → 1(완료), JS가 실시간 주입 */
  clip-path: inset(0 calc((1 - var(--fill, 0)) * 100%) 0 0);
}

/* PC: span은 투명(display:contents) — h2::after가 전체 담당 */
.slogan__title-part {
  display: contents;
}
/* span::after PC에서 숨김 */
.slogan__title-part::after {
  display: none;
}

.slogan__desc {
  font-family: var(--font-base);
  font-weight: 300;
  font-size: 1.375rem;  /* 22px */
  color: var(--color-white);
  line-height: 1.35;
  text-align: center;
}


/* ==============================================
   03. About CodiON
   ============================================== */
.about {
  position: relative;
  min-height: 350vh; /* text 애니 slogan-pin으로 이관 → desc만 처리 */
}

.about__inner {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

/* 배경 원 — 스크롤에 맞춰 살짝 확대 */
.about__inner::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(var(--circle-scale, 1));
  width: 100vmax;
  height: 100vmax;
  border-radius: 50%;
  border: none;
  box-shadow:
    inset 0 0 80px rgba(47, 107, 255, 0.06),
    0 0 60px rgba(47, 107, 255, 0.05);
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

.about__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 125.52%;
  top: -12.76%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}

/* Phase 1 그룹: About Codi 라벨 + 큰 문장 2개 — 중앙에서 위로 이동 */
.about__phase1-group {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 90%;
  text-align: center;
  will-change: transform;
}

/* 두 문장을 같은 위치에 겹침 */
.about__text-slot {
  display: grid;
  text-align: center;
}

.about__text1,
.about__text2 {
  grid-area: 1 / 1;
  font-family: var(--font-base);
  font-weight: 800;
  font-size: 2.875rem;  /* 46px */
  line-height: 1.4;
  text-align: center;
  will-change: opacity;
}

.about__text2 {
  opacity: 0;
}
/* PC: text2 스팬을 인라인으로 흘려 2줄 표현 */
.about__text2 .about__line {
  display: inline-block;
  white-space: nowrap;
}
.about__text2 .about__line::after {
  white-space: nowrap;
}
.about__text2-br { display: block; }

/* 한 줄씩 좌→우 채움 */
.about__line {
  display: block;
  position: relative;
  color: rgba(0, 37, 114, 0.2);
  white-space: nowrap;
  line-height: 1.4;
  text-align: center;
}

.about__line::after {
  content: attr(data-line);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #111111;
  clip-path: inset(0 calc((1 - var(--fill, 0)) * 100%) 0 0);
}

/* PC(1200px+): --1a / --1b 두 스팬을 한 줄로 합쳐 표시 */
@media (min-width: 1200px) {
  .about__line--1a,
  .about__line--1b {
    display: inline-block;
    vertical-align: top;
  }
  .about__line--1b {
    margin-left: 0.35em;
  }
}


/* about__desc — phase1-group 내부, 큰 문장 아래 함께 중앙 정렬 */
/* 큰 문장과의 간격: flex gap 20px + margin-top 30px = 50px (02섹션과 동일) */

.about__desc {
  position: absolute;
  top: calc(100% + 50px); /* 그룹 하단에서 50px 아래 (02섹션 gap과 동일) */
  left: 0;
  width: 100%;
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 1.375rem;  /* 22px */
  color: #333;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  transform: translateY(60px);
  will-change: transform, opacity;
}

/* 원 안 복제 텍스트: 항상 중앙 고정 */
.about__phase1-group--clone {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  width: 90%;
  margin: 0;
  padding: 0;
  will-change: auto;
}

/* 원 안에서는 desc 안 보이게 */
.about__phase1-group--clone .about__desc,
.about__phase1-group--clone .about__text2 {
  display: none;
}

/* 실제 About만 스크롤 애니메이션 대상 */
.about__phase1-group--real {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  will-change: transform;
}

/* 원 안 레이어 정렬 안정화 */
.circle-zone__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 원 전환 시 실제 about가 너무 빨리 튀어보이지 않게 */
.about {
  position: relative;
  min-height: 350vh;
}

.about__inner {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}


/* ==============================================
   04. Key Features (주요기능)
   ============================================== */
/* features-pin: 카드 스크롤 여유 공간 (JS에서 높이 설정) */
.features-pin {
  position: relative;
  background: var(--color-bg-light); /* features 배경색과 동일 — 섹션 전환 단절 방지 */
}

.features {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--color-bg-light);
  padding: clamp(40px, 6vw, 100px) var(--section-px) 20px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: clamp(35px, 4.5vw, 75px); /* 카드 gap의 약 2.5배 */
  align-items: start;
}

.features__title-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.features__title-area .section-label,
.features__title-area .section-title {
  text-align: left;
}

/* 카드 그리드 */
.features__grid {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 30px);
  will-change: transform;
}

.features__row {
  display: flex;
  gap: clamp(14px, 1.8vw, 30px);
}

/* 카드 */
.feature-card {
  flex: 1;
  background: var(--color-white);
  border-radius: clamp(12px, 1.5vw, 20px);
  padding: clamp(24px, 3vw, 50px) clamp(18px, 2.2vw, 30px);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 30px);
  transition: box-shadow var(--transition);
}
.feature-card:hover {
  box-shadow: 0 8px 24px rgba(0, 37, 114, 0.1);
}

.feature-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.feature-card__title {
  font-family: var(--font-base);
  font-weight: 800;
  font-size: clamp(1rem, 1.4vw, 1.625rem);
  color: var(--color-blue-deep);
  line-height: 1.35;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.feature-card__icon {
  width: clamp(40px, 4vw, 68px);
  height: clamp(40px, 4vw, 68px);
  border-radius: clamp(8px, 1vw, 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.feature-card__icon--green { background: #c5e8dc; }
.feature-card__icon--blue  { background: #d0def7; }
.feature-card__icon img {
  width: clamp(36px, 3.2vw, 60px);
  height: clamp(36px, 3.2vw, 60px);
  object-fit: contain;
}

/* ── 가로형 카드 변형 (아이콘 좌측 / 텍스트 우측) ── */
.features__row--horizontal {
  gap: 30px;
}

.feature-card--horizontal {
  flex-direction: row;
  align-items: center;
  gap: 20px;
  padding: 30px;
}

.feature-card--horizontal .feature-card__icon {
  width: 140px;
  height: 140px;
  border-radius: 20px;
  flex-shrink: 0;
}

.feature-card--horizontal .feature-card__icon img {
  width: 100px;
  height: 100px;
}

.feature-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feature-card__desc {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: clamp(0.8125rem, 1vw, 1.125rem);
  color: var(--color-text-mid);
  line-height: 1.35;
  word-break: keep-all;
  overflow-wrap: break-word;
}


/* ==============================================
   05~07. 공통 배경 래퍼 (특장점 → 구축사례 → 온라인문의)
   ============================================== */
.sections-bg {
  position: relative; /* 내부 sticky 섹션의 스크롤 범위 기준 */
  background-color: #012062;  /* 그라디언트 밖 영역 기본색 */
  background-image: linear-gradient(to bottom,
    #ecf7ff  0%,    /* 주요기능 배경색과 동일 — 자연스러운 연결 */
    #ecf7ff 12%,    /* 특장점 상단 연결 구간 유지 */
    #8eade7 40%,    /* 특장점 하단 */
    #002572 65%,    /* 구축사례 하단 */
    #012062 100%    /* 온라인문의 */
  );
  background-attachment: fixed;  /* JS가 background-position-y로 핀존 동결 제어 */
  background-repeat: no-repeat;
  background-size: 100% 100%;    /* JS가 naturalH로 덮어씀 */
}


/* ==============================================
   05. Key Benefits (특장점)
   ============================================== */
.benefits {
  position: relative;
  background: transparent; /* 공통 배경 사용 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(20px, 2.5vw, 40px);
  padding: clamp(120px, 12vw, 180px) 0 80px;
}

.benefits__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 0 var(--section-px);
  white-space: nowrap;
}

/* pin-wrap: sticky 스크롤 공간 제공 (높이는 JS 설정) */
.benefits__pin-wrap {
  position: relative;
  width: 100%;
  flex-shrink: 0;
}

.benefits__visual {
  /* position/top은 JS에서 PC일 때 sticky로 전환 */
  position: relative;
  width: 100%;
  height: clamp(300px, 56vw, 1076px);
}

/* 배경 타원 장식 — 피그마 기준 */
.benefits__ellipse {
  position: absolute;
  width: 124.7%;
  height: 60%;
  left: -34%;
  top: 76%;
  background: radial-gradient(ellipse at center,
    rgba(175, 215, 245, 0.55) 0%,
    rgba(145, 195, 235, 0.3) 40%,
    transparent 70%);
  transform: rotate(1.75deg);
  pointer-events: none;
  z-index: 0;
}

/* 키오스크 컨테이너: 피그마 left=217/1920=11.3%, width=1486/1920=77.4% */
.benefits__kiosk {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%) translateY(60px); /* JS가 scroll-progress로 덮어씀 */
  opacity: 0;
  width: 77.4%;
  height: 100%;
  z-index: 1;
  /* transition 제거 — JS inline style로 직접 제어 */
}

/* 영상: 키오스크 스크린 위치 (피그마 모니터영역 기준) */
/* left=495/1486=33.3%, top=78/1076=7.25%, w=445/1486=29.96%, h=772/1076=71.75% */
.benefits__video {
  position: absolute;
  left: calc(33.3% - 2px);
  top: 7.25%;
  width: calc(29.96% + 2px);
  height: 71.75%;
  object-fit: cover;
  z-index: 3;
}

/* 키오스크 프레임: 영상 아래 */
.benefits__mockup {
  position: absolute;
  inset: 0;
  width: 99.8%;
  height: 99.8%;
  object-fit: contain;
  z-index: 2;
}

/* 네트워크 연결선 — 피그마: top=718/1076=66.7%, 전체 너비, h=505/1076=46.9% */
.benefits__network {
  position: absolute;
  top: 66.7%;
  left: 0;
  width: 100%;
  height: 46.9%;
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
  z-index: 1;
  overflow: clip;
}

/* 말풍선 텍스트 박스 */
.callout {
  position: absolute;
  z-index: 3;
  background: rgba(209, 225, 247, 0.80);
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  padding: clamp(12px, 1.4vw, 20px) clamp(16px, 1.8vw, 30px);
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.6vw, 10px);
}
.callout__title {
  font-family: var(--font-base);
  font-weight: 800;
  font-size: clamp(1rem, 1.35vw, 1.625rem);
  color: var(--color-blue-deep);
  line-height: 1.35;
  white-space: nowrap;
}
.callout__desc {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: clamp(0.8rem, 0.95vw, 1.125rem);
  color: var(--color-text);
  line-height: 1.3;
  word-break: keep-all;
}
/* 위치 — 피그마 px → % 변환 (기준: 1920×1076) */
.callout--brand-value      { top: 13.0%; left: 15.3%; } /* 294/1920,  237/1076 */
.callout--storytelling     { top: 22.3%; left: 65.3%; } /* 1254/1920, 197/1076 */
.callout--interactive      { top: 36.0%; left: 10.3%; } /* 197/1920,  560/1076 */
.callout--multimedia       { top: 50.6%; left: 68.2%; } /* 1347/1920, 415/1076 */
.callout--brand-experience { top: 61.9%; left: 12.9%; } /* 1284/1920, 666/1076 */


/* ── callout 3단계 상태: 숨김 → 비활성(흐림) → 활성(선명) ── */

/* ① 기본: 완전 숨김 (키오스크 등장 전) */
.callout {
  opacity: 0;
  transform: scale(0.5);
  filter: blur(10px);
  pointer-events: none;
  transition: opacity 0.55s ease,
              transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              filter 0.55s ease,
              box-shadow 0.55s ease;
}

/* ② 등장 후 비활성(흐린) 상태 */
.callout.is-callout-entered {
  opacity: 0.45;
  transform: scale(0.69);
  filter: blur(4px);
  pointer-events: auto;
}

/* ③ 활성 상태 */
.callout.is-callout-entered.is-active,
.callout.is-callout-entered:hover {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  box-shadow: 0 8px 32px rgba(0, 37, 114, 0.25);
  z-index: 10;
  cursor: default;
}


/* ==============================================
   06. Portfolio (구축사례)
   ============================================== */

.portfolio {
  position: relative;
  z-index: 10;
  background: transparent;
  padding: 80px var(--section-px) 50px;
  min-height: calc(100svh + 200px);
}


.portfolio__card {
  position: relative;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 30px;
  box-shadow: 0 0 30px rgba(0, 32, 98, 0.2);
  padding: 60px 50px 50px;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
  overflow: hidden;
  /* 등장 애니메이션 초기 상태 */
  opacity: 0;
  transform: translateY(100px) scale(0.94);
  transition: opacity 0.8s ease,
              transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.portfolio__slider {
  margin-top: 50px;
  width: 100%;
}
.portfolio__pagination {
  margin-top: 20px;
}

.portfolio.is-card-visible .portfolio__card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 섹션 진입 시 슬라이더 전체 페이드인 */
.portfolio.is-card-visible .portfolio__slider {
  opacity: 1;
}

.portfolio__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
  white-space: nowrap;
}
.portfolio__head-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.portfolio__sub {
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 1.375rem;  /* 22px */
  color: var(--color-text);
  line-height: 1.35;
}

/* ── 캐러셀 슬라이더 ── */
.portfolio__slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.portfolio__slider.is-dragging { cursor: grabbing; }

/* 트랙 — transform 으로 이동 */
.portfolio__list {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 520px;
  will-change: transform;
  /* transition 은 JS 에서 필요 시 주입 */
}

/* 카드 기본(비활성) */
.portfolio__link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.portfolio__item {
  flex: 0 0 auto;
  width: clamp(300px, 32vw, 520px);
  min-width: 0;
  height: 100%;
  opacity: 0.4;
  transform: scale(0.83);
  /* 슬라이드와 동일한 easing/duration → 이동·크기·불투명도가 하나의 흐름으로 전환 */
  transition: width      0.52s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform  0.52s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity    0.52s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.52s ease;
  cursor: pointer;
}

/* 인접 카드 (prev / next) */
.portfolio__item.is-prev,
.portfolio__item.is-next {
  opacity: 0.68;
  transform: scale(0.91);
}

/* 활성 카드 */
.portfolio__item.is-active {
  width: clamp(400px, 44vw, 660px);
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

/* 활성 카드: 제목 크게 + 설명글 레이아웃 포함 표시 */
.portfolio__item.is-active .portfolio__caption-title { font-size: 1.875rem; }
.portfolio__item.is-active .portfolio__caption-sub {
  max-height: 3em;
  margin-top: 10px;
  opacity: 1;
  transform: translateY(0);
}

/* 활성 카드 hover 강조 */
.portfolio__item.is-active:hover .portfolio__img { transform: scale(1.04); }
.portfolio__item.is-active:hover .portfolio__figure::before { background: rgba(0,0,0,0.35); }

/* 페이지네이션 — 활성 도트는 pill 형태 */
.portfolio__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.portfolio__pagination button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: rgba(0,0,0,0.2);
  cursor: pointer;
  font-size: 0;
  line-height: 0;
  transition: width 0.3s ease, background 0.3s ease;
}
.portfolio__pagination button.is-active {
  width: 28px;
  background: var(--color-teal, #00D084);
}

/* 무한루프 clone→real 점프 시 전체(리스트 포함) 트랜지션/애니메이션 차단 */
.portfolio__list.is-jumping,
.portfolio__list.is-jumping * {
  transition: none !important;
  animation: none !important;
}

/* 슬라이드 시작 직전 클래스 확정 시 아이템 트랜지션만 차단 (리스트 transform 은 유지)
   슬라이드 도중 카드 크기 변화로 인한 레이아웃 이동 방지 */
.portfolio__list.is-updating .portfolio__item,
.portfolio__list.is-updating .portfolio__item * {
  transition: none !important;
  animation: none !important;
}

/* 터치 디바이스: 설명글 항상 표시 */
@media (hover: none) {
  .portfolio__caption-sub {
    max-height: 4em;
    margin-top: 10px;
    opacity: 1;
    transform: none;
    transition: none;
    white-space: normal;
    word-break: keep-all;
  }
}

/* figure/figcaption */
.portfolio__figure {
  position: relative;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.portfolio__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.portfolio__item:hover .portfolio__img {
  transform: scale(1.04);
}

/* 다크 오버레이 — hover 시 표시 */
.portfolio__figure::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.35s ease;
  z-index: 1;
  border-radius: 20px;
}
.portfolio__item:hover .portfolio__figure::before {
  background: rgba(0, 0, 0, 0.4);
}

/* 이미지 위 그라디언트 오버레이 */
.portfolio__figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 60%);
  border-radius: 20px;
  z-index: 2;
}

/* figcaption */
.portfolio__figcaption {
  position: relative;
  z-index: 3;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 0; /* gap 제거 — 서브텍스트 margin-top으로 대체 */
}

.portfolio__caption-title {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 1.625rem;  /* 26px */
  color: var(--color-white);
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
  line-height: 1.3;
  white-space: nowrap;
  /* 슬라이드(0.52s) 내에 완료 — 0.12s 후 시작, 0.47s에 끝 */
  transition: font-size 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.12s;
}
.portfolio__item.is-active:hover .portfolio__caption-title {
  font-size: 1.875rem;  /* 30px */
}

.portfolio__caption-sub {
  font-family: var(--font-base);
  font-weight: 200;
  font-size: 1.125rem;  /* 18px */
  color: var(--color-white);
  line-height: 1.35;
  white-space: nowrap;
  word-break: keep-all;
  /* 비활성: 레이아웃에서 완전히 제거 */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transform: translateY(8px);
  /* 슬라이드(0.52s) 내에 완료 — 0.38s에 끝나 transitionend cleanup과 겹치지 않음 */
  transition: max-height 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              margin-top  0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity     0.28s ease 0.08s,
              transform   0.28s ease 0.08s;
}


/* ==============================================
   07. 온라인문의
   ============================================== */
.contact {
  position: sticky;
  top: 0;
  z-index: 11;
  height: 100svh;
  background: transparent;
  padding: clamp(30px, 5svh, 80px) var(--section-px);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.contact__bg {
  display: none; /* 공통 배경(.sections-bg) 사용으로 불필요 */
}

.contact__wrap {
  position: relative;
  z-index: 2;
  background: var(--color-white);
  border-radius: 30px;
  box-shadow: 0 0 30px rgba(0, 32, 98, 0.2);
  padding: clamp(24px, 3svh, 50px);
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  /* 등장 애니메이션 초기 상태 */
  opacity: 0;
  transform: translateY(100px) scale(0.94);
  transition: opacity 0.8s ease,
              transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.contact.is-card-visible .contact__wrap {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.contact__inner {
  display: flex;
  gap: 60px;
  align-items: stretch;
  width: 100%;
}

/* 좌측: 문의 안내 */
.contact__info {
  flex: 1;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  padding: clamp(24px, 3.5svh, 50px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 배경 레이어 컨테이너 */
.contact__info-bg-wrap {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  overflow: hidden;
  z-index: 0;
}
.contact__info-bg {
  position: absolute;
  top: 0;
  left: -1.01%;
  width: 151.49%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform: scale(1.4);
  transform-origin: center center;
  transition: transform 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* 뷰포트 진입 시 줌인 */
.contact.is-visible .contact__info-bg {
  transform: scale(1.0);
}
.contact__info-overlay {
  position: absolute;
  inset: 0;
  background: rgba(1, 32, 98, 0.2);
}

/* 텍스트를 배경 위로 올리기 */
.contact__info > *:not(.contact__info-bg-wrap) {
  position: relative;
  z-index: 1;
}

.contact__info-title {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 2.875rem;  /* 46px */
  color: var(--color-white);
  line-height: 1.3;
  white-space: nowrap;
}

.contact__detail {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.contact__cta {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 1.75rem;   /* 28px */
  color: var(--color-white);
  line-height: 1.35;
}
.contact__address {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-style: normal;
}
.contact__address-item {
  display: flex;
  flex-direction: column;
}
.contact__address-item dt {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 1.375rem;  /* 22px */
  color: var(--color-white);
  line-height: 1.4;
  text-transform: uppercase;
}
.contact__address-item dd {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 1.375rem;
  color: var(--color-white);
  line-height: 1.4;
}

/* 우측: 문의 폼 */
.contact__form-area {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s,
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}
.contact.is-card-visible .contact__form-area {
  opacity: 1;
  transform: translateY(0);
}

/* 폼 */
.inquiry-form {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.inquiry-form fieldset {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2svh, 18px);
  height: 100%;
}

.form-row {
  display: flex;
  gap: 10px;
}
.form-row .form-group { flex: 1; }

.form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.form-label {
  display: flex;
  align-items: center;
  gap: 5px;
}
.form-label__text {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 1rem;  /* 16px */
  color: var(--color-text);
  line-height: normal;
}
/* 필수 항목 표시 */
.form-label__required {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--color-blue-main);
  border-radius: 50%;
}
/* 선택 항목 표시 */
.form-label__optional {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.55);
  font-weight: 400;
  margin-left: 4px;
}

.form-input {
  width: 100%;
  height: clamp(40px, 5svh, 49px);
  background: #f2f4f7;
  border-radius: 10px;
  padding: clamp(8px, 1.5svh, 15px) 20px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 1rem;
  color: var(--color-text);
  transition: background var(--transition);
}
.form-input:focus {
  background: #e8edf5;
  outline: 2px solid var(--color-blue-main);
  outline-offset: 0;
}
.form-input::placeholder { color: var(--color-text-muted); }

/* 에러 상태 */
.form-group.is-error .form-input,
.form-group.is-error .form-select-trigger {
  outline: 2px solid #e0392b;
  outline-offset: 0;
  background: #fff5f5;
}
.form-error {
  display: none;
  font-family: var(--font-base);
  font-size: 0.875rem;
  font-weight: 500;
  color: #e0392b;
  margin-top: -2px;
}
.form-group.is-error .form-error { display: block; }
.privacy-agree.is-error .privacy-agree__label { color: #e0392b; }
.privacy-agree__err { display: none; font-size: 0.875rem; color: #e0392b; font-family: var(--font-base); font-weight: 500; white-space: nowrap; }

/* 커스텀 셀렉트 */
.form-select-wrap {
  position: relative;
}

.form-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: clamp(40px, 5svh, 50px);
  background: #f2f4f7;
  border-radius: 10px;
  padding: 0 20px;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 1rem;
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition), outline var(--transition);
  text-align: left;
  gap: 8px;
}
.form-select-trigger:focus-visible {
  outline: 2px solid var(--color-blue-main);
  outline-offset: 0;
  background: #e8edf5;
}
.form-select-value.is-placeholder {
  color: var(--color-text-muted);
}
.form-select-arrow {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  transition: transform 0.2s ease;
}
.form-select-wrap[aria-expanded="true"] .form-select-arrow {
  transform: rotate(180deg);
}
.form-select-wrap[aria-expanded="true"] .form-select-trigger {
  background: #e8edf5;
  outline: 2px solid var(--color-blue-main);
  outline-offset: 0;
}

/* 드롭다운 패널 */
.form-select-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  background: #f2f4f7;
  border: 1px solid #d3d3d3;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 32, 98, 0.12);
  z-index: 50;
  overflow: hidden;
}
.form-select-option {
  padding: 9px 20px;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition);
}
.form-select-option:hover {
  background: #c8d8ef;
}
.form-select-option[aria-selected="true"] {
  background: #c8d8ef;
  font-weight: 700;
}

.form-textarea {
  width: 100%;
  height: clamp(90px, 14svh, 189px);
  background: #f2f4f7;
  border-radius: 10px;
  padding: clamp(8px, 1.5svh, 15px) 20px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 1rem;
  color: var(--color-text);
  resize: none;
  transition: background var(--transition);
}
.form-textarea:focus {
  background: #e8edf5;
  outline: 2px solid var(--color-blue-main);
}
.form-textarea::placeholder { color: var(--color-text-muted); }

/* 개인정보 동의 */
.privacy-agree {
  display: flex;
  align-items: center;
  gap: 10px;
}
.privacy-agree__checkbox {
  width: 20px;
  height: 20px;
  border: 1px solid #d3d3d3;
  border-radius: 4px;
  background: var(--color-white);
  flex-shrink: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  transition: background var(--transition), border-color var(--transition);
}
.privacy-agree__checkbox:checked {
  background: var(--color-blue-deep);
  border-color: var(--color-blue-deep);
}
.privacy-agree__checkbox:checked::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.5 7.5l3 3 6-6' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
.privacy-agree__checkbox:focus-visible {
  outline: 2px solid var(--color-blue-main);
  outline-offset: 2px;
}
.privacy-agree__label {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 1rem;
  color: var(--color-text-sub);
  cursor: pointer;
  white-space: nowrap;
}

/* 개인정보처리방침 링크 아이콘 */
.privacy-agree__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  background: var(--grad-brand);
  border-radius: 50%;
  flex-shrink: 0;
  transition: opacity var(--transition);
}
.privacy-agree__link:hover {
  opacity: 0.8;
}

/* 제출 버튼 */
.btn-submit {
  width: 100%;
  padding: clamp(12px, 2svh, 20px);
  border: 2px solid var(--color-blue-deep);
  border-radius: 50px;
  font-family: var(--font-base);
  font-weight: 800;
  font-size: 1.375rem;  /* 22px */
  color: var(--color-blue-deep);
  text-align: center;
  background: var(--color-white);
  cursor: pointer;
  line-height: 24px;
  transition: background var(--transition), color var(--transition);
  margin-top: auto;
}
.btn-submit:hover {
  background: var(--color-blue-deep);
  color: var(--color-white);
}
.btn-submit:focus-visible {
  outline: 3px solid var(--color-blue-main);
  outline-offset: 3px;
}

/* ==============================================
   Footer
   ============================================== */
.footer {
  position: relative;
  background: #012062;
  padding: 50px var(--section-px) 30px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  overflow: hidden;
}

.footer__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: lighten;
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}
.footer > *:not(.footer__bg) { position: relative; z-index: 1; }
/* 명시도(0-2-0)로 일반 규칙(0-1-1) 덮어쓰기 → 드롭다운이 하위 푸터 요소 위에 표시 */
.footer > .footer__top { z-index: 10; }

/* 상단: 로고+주소 / 메뉴 */
.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
}

.footer__info {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.footer__logo {
  display: block;
  width: 161px;
}
.footer__logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* 주소 (address 태그) */
.footer__address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__address-item {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}
.footer__address-item dt {
  font-family: var(--font-base);
  font-weight: 800;
  font-size: 1rem;
  color: var(--color-white);
  text-transform: uppercase;
}
.footer__address-item dd {
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 1rem;
  color: #b2bcd0;
}

/* 우측 영역: 내비 + 패밀리링크 */
.footer__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 30px;
}

/* 푸터 내비게이션 */
.footer__nav { display: flex; gap: 50px; align-items: center; }
.footer__nav-item {}
.footer__nav-link {
  font-family: var(--font-base);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--color-white);
  line-height: 1.4;
  white-space: nowrap;
  transition: color var(--transition);
}
.footer__nav-link:hover { color: var(--color-teal); }

/* 패밀리링크 드롭다운 */
.family-select {
  position: relative;
  width: 380px;
}

.family-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 50px;
  padding: 0 20px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  color: var(--color-white);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.family-select__trigger:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.45);
}

.family-select__label {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 1.125rem;
}

.family-select__arrow {
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.family-select[aria-expanded="true"] .family-select__arrow,
.family-select__trigger[aria-expanded="true"] .family-select__arrow {
  transform: rotate(180deg);
}

.family-select__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 100;
}
.family-select__list[hidden] { display: none; }

.family-select__link {
  display: block;
  padding: 12px 20px;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 1rem;
  color: var(--color-white);
  transition: background var(--transition), color var(--transition);
}
.family-select__link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-teal);
}


/* 브랜드 + 맨 위로 */
.footer__brand-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 135px;
}


.footer__brand { display: flex; gap: 20px; align-items: center; font-family: var(--font-display); font-weight: 700; font-size: 6.25rem;   /* 100px */ line-height: 1; white-space: nowrap; } .footer__brand-ko { color: var(--color-white); } .footer__brand-en { background: var(--grad-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }


/* 카피라이트 */
.footer__copyright {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.footer__divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.footer__copy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer__copy {
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 1rem;
  color: #b2bcd0;
  line-height: 1.4;
}
.footer__privacy-btn {
  font-family: var(--font-base);
  font-size: 1rem;
  font-weight: 600;
  color: #b2bcd0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 1.4;
  transition: color 0.2s;
  white-space: nowrap;
}
.footer__privacy-btn:hover,
.footer__privacy-btn:focus-visible {
  color: var(--color-teal);
  outline: none;
}
.footer__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}
.footer__auth-btn {
  font-family: var(--font-base);
  font-size: 1rem;
  font-weight: 600;
  color: #b2bcd0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s;
  white-space: nowrap;
  text-decoration: none;
}
.footer__auth-btn:hover {
  color: var(--color-teal);
}
.footer__auth-btn svg {
  flex-shrink: 0;
  vertical-align: middle;
}


/* ==============================================
   반응형 — 태블릿 (~ 1199px)
   ============================================== */
@media (max-width: 1199px) {

  :root { --section-px: 30px; }

  /* ── GNB ── */
  .gnb { padding: 16px 30px; }
  .gnb__panel { gap: 40px; }
  .gnb__menu  { gap: 32px; }
  .gnb__menu-link { font-size: 1rem; }
  .gnb__cta   { font-size: 1rem; padding: 5px 16px; }

  /* ── 공통 타이포 ── */
   .section-label {font-size: 1.375rem; text-align: center; }
  .section-title { font-size: 2.25rem; text-align: center; }

  /* ── 01. 메인비주얼 ── */
  /* sticky 해제: 모바일에서 슬로건·about 콘텐츠가 visual(z-index:1) 아래 덮히는 현상 방지 */
  .visual { min-height: 700px; position: relative; top: auto; }

  /* ── 02. 슬로건 ── */
  .slogan { padding: 80px var(--section-px); min-height: 100vh; gap: 36px; }
  .slogan__sub   { font-size: 1.375rem; }
  .slogan__title { font-size: 2.25rem; white-space: normal; }
  .slogan__desc  { font-size: 1.125rem; }
  /* 반응형: h2::after 숨기고 span별 순차 채움 */
  .slogan__title::after { display: none; }
  .slogan__title-part {
    display: block;
    position: relative;
    text-align: center;
    white-space: nowrap;
  }
  .slogan__title-part::after {
    display: block;
    content: attr(data-text);
    position: absolute;
    inset: 0;
    white-space: normal;
    background: var(--grad-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-text-stroke: 0px transparent;
    clip-path: inset(0 calc((1 - var(--fill, 0)) * 100%) 0 0);
  }

  /* ── 슬로건 + 원형 전환: 모바일 압축 구조
     circle-zone은 PC와 동일한 absolute overlay 구조 유지
     JS에서 350vh 압축 타임라인으로 분기, 텍스트 채움 애니메이션도 PC와 동일하게 실행 ── */
  .slogan-pin { min-height: calc(100svh + 350vh); }
  .slogan { position: sticky; top: 0; }

  /* circle-zone / circle-zone__inner: PC 구조 그대로 유지 */
  /* About 콘텐츠 애니메이션: JS scroll-driven으로 동작 (CSS 정적 오버라이드 없음) */

  /* ── 03. About ── */
  /* About 섹션: 350vh 스크롤 터널 해제 */
  .about { min-height: auto; }
  .about__inner { position: static; height: auto; overflow: visible; }
  .about__phase1-group { width: 95%; gap: 16px; }
  .about__text1, .about__text2 { font-size: 2rem; }
  .about__line { white-space: nowrap; }
  .about__line::after {
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
  }
  .about__text2 { padding: 0 40px; }
  .about__text2 .about__line { display: block; white-space: normal; text-align: center; }
  .about__text2 .about__line::after { white-space: normal; left: 0; transform: none; width: 100%; text-align: center; }
  .about__text2-br { display: none; }
  .about__desc { font-size: 1.125rem; }

  /* ── 04. Key Features ── */
  .features-pin { height: auto !important; }
  .features {
    position: static;
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: clamp(30px, 5vw, 80px) var(--section-px);
  }
  .features__grid { transform: none !important; }
  .features__title-area .section-label,
  .features__title-area .section-title { text-align: center; }
  /* 카드: 좌측 타이틀+설명 / 우측 아이콘 */
  .feature-card {
    position: relative;
    padding: 24px 90px 24px 24px;
    gap: 10px;
    min-height: 90px;
    justify-content: center;
  }
  .feature-card__header { display: block; }
  .feature-card__title  { font-size: 1.375rem; white-space: normal; }
  .feature-card__icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    border-radius: 12px;
  }
  .feature-card__icon img { width: 48px; height: 48px; }
  .feature-card__desc { font-size: 1rem; }

  /* ── 05~07. 공통 배경 (반응형) ── */
  /* 모바일/태블릿: fixed → scroll 전환 (iOS Safari fixed 미지원 + JS positon 불필요)
     gradient가 sections-bg 전체 높이를 자연스럽게 채움 */
  .sections-bg {
    background-attachment: scroll;
    background-size: 100% 100%;
    background-position: 0 0;
  }

  /* ── 05. Key Benefits ── */
  .benefits { padding: 120px 0 60px; min-height: auto; }
  .benefits__pin-wrap { height: auto; }  /* JS가 setupPin()으로 덮어씀 */
  .benefits__visual   { position: relative; top: auto; } /* JS가 sticky로 덮어씀 */
  /* 태블릿: % 기반 그대로 적용 (clamp로 자동 조절) */

  /* ── 06. Portfolio ── */
  .portfolio { padding: 40px var(--section-px); min-height: auto; }
  .portfolio__card { padding: 40px 30px 40px; }
  .portfolio__slider { margin-top: 30px; }
  .portfolio__pagination { margin-top: 16px; }
  .portfolio__list { height: 380px; gap: 16px; }
  .portfolio__item { flex: 0 0 clamp(220px, 42vw, 360px); }
  .portfolio__caption-title { font-size: 1.25rem; white-space: normal; }
  .portfolio__figcaption { padding: 24px; gap: 8px; }
  .portfolio__caption-sub {
    font-size: 1rem;
    white-space: normal;
    word-break: keep-all;
    opacity: 1;          /* 항상 표시 */
    transform: none;
    transition: none;
  }

  /* ── 07. 온라인문의 ── */
  .contact { padding: 60px var(--section-px); height: auto; min-height: 100svh; overflow: visible; }
  .contact__inner { gap: 40px; }
  .contact__info-title { font-size: 2.25rem; white-space: normal; }
  .contact__cta  { font-size: 1.375rem; }
  .contact__address-item dt,
  .contact__address-item dd { font-size: 1.125rem; }

  /* ── Footer ── */
  .footer { padding: 50px var(--section-px) 30px; }
  .footer__nav { gap: 30px; }
  .footer__nav-link { font-size: 1rem; }
  .footer__brand { font-size: 4rem; }
  .family-select { width: 280px; }
}


/* ==============================================
   Top 버튼
   ============================================== */
.btn-top {
  position: fixed;
  right: clamp(20px, 2.5vw, 40px);
  bottom: clamp(20px, 3vw, 40px);
  z-index: 200;
  width: clamp(52px, 5.5vw, 81px);
  height: clamp(52px, 5.5vw, 81px);
  border-radius: 50%;
  /* 어두운 배경 기본 스타일 */
  color: #fff;
  border: 2px solid #ffffff;
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease,
              border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* 밝은 배경에서는 다크 variant */
.btn-top.is-on-light {
  color: #111;
  border-color: rgba(0, 0, 0, 0.18);
  background: rgba(0, 0, 0, 0.08);
}

/* 호버: 항상 그라디언트 + 흰 아이콘 */
.btn-top::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(65.24deg, #2F6BFF 3.49%, #2CD3A3 47.24%, #ADFB50 90.25%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.btn-top:hover::before {
  opacity: 1;
}
.btn-top:hover {
  color: #fff;
  border-color: transparent;
}

/* 화살표 아이콘 */
.btn-top__icon {
  position: relative;
  z-index: 1;
  width: clamp(20px, 2vw, 28px);
  height: clamp(20px, 2vw, 28px);
  transition: transform 0.3s ease;
}
.btn-top:hover .btn-top__icon {
  transform: translateY(-3px);
}

/* TOP 텍스트 */
.btn-top__label {
  position: relative;
  z-index: 1;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: clamp(9px, 0.75vw, 11px);
  letter-spacing: 0.12em;
  line-height: 1;
}

/* ==============================================
   반응형 — 모바일 (~ 767px)
   ============================================== */
@media (max-width: 767px) {

  :root { --section-px: 16px; }

  /* ── GNB ── */
  .gnb {
    padding: 14px 20px;
    flex-wrap: nowrap;
    align-items: center;
  }
  .gnb__logo      { order: 1; width: 120px; }
  .gnb__hamburger { order: 2; display: flex; align-self: center; }

  /* 패널: 풀스크린 오른쪽→왼쪽 슬라이드 */
  .gnb__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100svh;
    background: rgba(5, 10, 40, 0.97);
    padding: 0 24px;
    z-index: 99; /* GNB(100) 아래 → 햄버거 X 버튼 항상 노출 */
    transform: translateX(100%);
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
  }
  .gnb.is-open   .gnb__panel { transform: translateX(0); }
  /* 모바일 패널: 스크롤 여부 무관하게 항상 동일한 불투명 배경 유지 */
  .gnb.is-scrolled .gnb__panel { background: rgba(5, 10, 40, 0.97); }

  /* 메뉴: 풀스크린 중앙 세로 목록 */
  .gnb__menu {
    flex-direction: column;
    gap: 0;
    align-items: center;
  }
  .gnb__menu-link {
    font-size: 1.375rem;
    padding: 18px 24px;
    text-align: center;
    color: var(--color-white);
  }
  .gnb__menu-link::after { display: none; }
  .gnb__menu-link:hover,
  .gnb__menu-link.is-active {
    color: var(--color-teal);
  }
  /* 패널 열린 상태: solid/scrolled 클래스가 붙어도 항상 흰색 */
  .gnb.is-open .gnb__menu-link { color: var(--color-white); }
  .gnb.is-open .gnb__menu-link:hover,
  .gnb.is-open .gnb__menu-link.is-active { color: var(--color-teal); }

  /* CTA */
  .gnb__cta {
    margin: 30px 0 0;
    text-align: center;
    padding: 14px 40px;
    font-size: 1.125rem;
  }

  /* ── 공통 타이포 ── */
  .section-label { font-size: 1.125rem; }
  .section-title { font-size: 1.75rem; }

  /* ── 01. 메인비주얼 ── */
  .visual { min-height: 100svh; max-height: none; }
  .visual__inner {
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    padding: 70px 24px 40px;
    align-items: center;
  }
  .visual__slogan   { align-items: center; text-align: center; }
  .visual__heading  { white-space: normal; text-align: center; }
  .visual__desc     { white-space: normal; text-align: center; }
  .visual__image    { flex: none; width: 65%; max-width: 300px; }

  /* ── 02. 슬로건 ── */
  /* 모바일: 300vh 터널 (텍스트 채움 + 원형 + 내부 텍스트 애니메이션 수용) */
  .slogan-pin { min-height: calc(100svh + 300vh); }
  .slogan { padding: 60px var(--section-px); gap: 24px; }
  .slogan__sub   { font-size: 1.125rem; }
  .slogan__title { font-size: 1.75rem; white-space: normal; }
  .slogan__desc br { display: none; }
  .about__desc br { display: none; }
  .slogan__desc  { font-size: 1rem; }

  /* ── 03. About ── */
  .about { min-height: 250vh; }
  .about__phase1-group { width: 100%; gap: 14px; }
  .about__text1, .about__text2 { font-size: 1.375rem; }
  .about__text1 br, .about__text2 br { display: none; }
  .about__line { display: block; white-space: normal; text-align: center; }
  .about__line::after { white-space: normal; left: 0; transform: none; width: 100%; text-align: center; }
  .about__text2-br { display: none; }
  .about__desc { font-size: 1rem; }

  /* ── 04. Key Features ── */
  .features-pin { height: auto !important; }
  .features {
    position: static;
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    padding: 60px var(--section-px);
    gap: 24px;
  }
  .features__grid { transform: none !important; }
  .features__title-area .section-label,
  .features__title-area .section-title { text-align: center; }
  .features__row { flex-direction: column; gap: 14px; }
  .features__row--horizontal { gap: 14px; }
  .feature-card--horizontal { padding: 20px; gap: 16px; }
  .feature-card--horizontal .feature-card__icon { width: 80px; height: 80px; border-radius: 14px; }
  .feature-card--horizontal .feature-card__icon img { width: 56px; height: 56px; }
  /* 카드: 좌측 타이틀+설명 / 우측 아이콘 */
  .feature-card {
    position: relative;
    flex-direction: column;
    padding: 20px 90px 20px 20px;
    gap: 8px;
    min-height: 90px;
    justify-content: center;
  }
  .feature-card__header { display: block; }
  .feature-card__title  { font-size: 1.125rem; white-space: normal; }
  .feature-card__icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 64px;
    height: 64px;
    border-radius: 14px;
  }
  .feature-card__icon img { width: 50px; height: 50px; }
  .feature-card__desc { font-size: 0.9375rem; }

  /* ── 05~07. 공통 배경 (모바일) ── */
  /* 태블릿 override 상속 — scroll + 100% 100% 유지 */

  /* ── 05. Key Benefits ── */
  .benefits { padding: 80px 0 40px; }
  .benefits__pin-wrap { height: auto; }  /* JS가 setupPin()으로 덮어씀 */
  .benefits__visual   { position: relative; top: auto; } /* JS가 sticky로 덮어씀 */
  .benefits__title { white-space: normal; text-align: center; padding: 0; }

  /* 모바일: PC 키오스크 레이아웃 그대로 유지
     섹션 좌우 패딩 제거 후 visual을 100% 너비로 중앙 정렬 */
  .benefits__visual {
    width: 100%;
    margin-left: 0;
    height: clamp(240px, 55svh, 480px);
  }
  /* 목업: 세로 기준으로 키워서 letterbox 없이 채움 */
  .benefits__mockup {
    object-fit: cover;
    object-position: center 10%;
  }

  /* 모든 callout: 가로 폭 통일 */
  .benefits .callout {
    width: clamp(120px, 38vw, 200px);
  }
  /* br 제거 — 카드 폭에 맞게 자연 줄바꿈 */
  .benefits .callout__desc br { display: none; }
  /* 글자 크기 해상도 비례 통일 */
  .benefits .callout__title { font-size: clamp(0.75rem, 3vw, 1rem); white-space: normal; }
  .benefits .callout__desc  { font-size: clamp(0.65rem, 2.4vw, 0.875rem); white-space: normal; }

  /* 좌측 카드: 오른쪽으로 조금 이동 */
  .benefits .callout--brand-value      { left: 5%; }
  .benefits .callout--interactive      { left: 4%; }
  .benefits .callout--brand-experience { left: 4%; }

  /* ── 06. Portfolio ── */
  .portfolio { padding: 20px var(--section-px) 10px; min-height: auto; }
  .portfolio__card { padding: 24px 16px 20px; gap: 0; border-radius: 20px; }
  .portfolio__slider { margin-top: 20px; }
  .portfolio__pagination { margin-top: 12px; }
  .portfolio__header { white-space: normal; }
  .portfolio__sub { font-size: 1.125rem; } /* 18px */
  .portfolio__list { height: 260px; gap: 12px; }
  .portfolio__item { flex: 0 0 min(calc(100vw - 80px), 300px); }
  .portfolio__figure { height: 100%; }
  .portfolio__figcaption { padding: 16px 20px; }
  .portfolio__caption-title { font-size: 1.125rem; white-space: normal; }
  .portfolio__caption-sub { max-height: 4em !important; margin-top: 6px !important; opacity: 1 !important; transform: none !important; font-size: 0.9375rem; white-space: normal; word-break: keep-all; }

  /* ── 07. 온라인문의 ── */
  .contact { padding: 30px var(--section-px); height: auto; min-height: auto; overflow: visible; }
  .contact__wrap { padding: 20px 16px; border-radius: 20px; flex: none; }
  .contact__inner { flex-direction: column; gap: 24px; }
  .contact__info { min-height: auto; padding: 30px 24px; border-radius: 16px; }
  .contact__info-title { font-size: 1.75rem; white-space: normal; }
  .contact__cta  { font-size: 1.125rem; }
  .contact__address-item dt,
  .contact__address-item dd { font-size: 1rem; }
  .form-row { flex-direction: column; gap: 16px; }
  .form-input,
  .form-select { height: 46px; font-size: 1rem; }
  .form-textarea { height: 150px; font-size: 1rem; }
  .form-label__text { font-size: 1rem; }
  .inquiry-form { height: auto; }
  .inquiry-form fieldset { height: auto; }
  .contact__form-area { flex: none; padding-top: 0; transform: translateY(30px); }
  .contact.is-card-visible .contact__form-area { transform: translateY(0); }
  .btn-submit { font-size: 1.125rem; padding: 16px; }
  .privacy-agree__label { font-size: 0.9375rem; white-space: normal; }

  /* ── Footer ── */
  .footer { padding: 40px var(--section-px) 24px; gap: 30px; }
  .footer__top { flex-direction: column; gap: 30px; }
  .footer__right { align-items: flex-start; position: relative; z-index: 20; }
  .footer__nav { flex-wrap: wrap; gap: 16px 24px; }
  .footer__nav-link { font-size: 0.9375rem; }
  .family-select { width: 100%; }
  /* 모바일: 드롭다운 위로 열기 (아래 푸터 텍스트에 가리지 않도록) */
  .family-select__list { top: auto; bottom: calc(100% + 6px); }
  .footer__brand-row { height: auto; flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer__brand { font-size: 2.5rem; gap: 10px; flex-wrap: wrap; }
}

html, body {
  overflow-x: clip; /* hidden 대신 clip: 스크롤 컨텍스트를 유지하여 sticky 정상 작동 */
}

/* 스크롤바 gutter 영역을 다크 배경으로 고정 (투명 track 시 흰색 방지) */
html {
  background: #0b1220;
}

body {
  word-break: keep-all;
  line-break: strict;
}

.about__line,
.about__line::after {
  word-break: keep-all;
}


/* ==============================================
   스크롤 리빌 애니메이션
   ============================================== */

/* 초기 상태: 숨김 + 시작 위치 */
[data-reveal]            { opacity: 0; }
[data-reveal="up"]       { transform: translateY(72px); }
[data-reveal="left"]     { transform: translateX(-56px); }
[data-reveal="right"]    { transform: translateX(56px); }
[data-reveal="scale"]    { transform: scale(0.88) translateY(16px); }

/* 뷰포트 진입 후 is-revealed 클래스 추가 → CSS 트랜지션으로 재생 */
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity  0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ==============================================
   개인정보처리방침 팝업
   ============================================== */
.privacy-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.privacy-modal[hidden] { display: none; }

/* 딤 */
.privacy-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.privacy-modal.is-open .privacy-modal__overlay { opacity: 1; }

/* 팝업 컨테이너 */
.privacy-modal__wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(720px, 100%);
  max-height: calc(100svh - 48px);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(0,0,0,0.22);
  overflow: hidden;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1),
              opacity 0.35s cubic-bezier(0.22,1,0.36,1);
}
.privacy-modal.is-open .privacy-modal__wrap {
  transform: translateY(0);
  opacity: 1;
}

/* 헤더 */
.privacy-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  background: var(--color-blue-deep);
  border-radius: 16px 16px 0 0;
  flex-shrink: 0;
}
.privacy-modal__title {
  font-family: var(--font-base);
  font-size: 1.375rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}
.privacy-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.privacy-modal__close:hover { background: rgba(255,255,255,0.28); }

/* 본문 스크롤 영역 */
.privacy-modal__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  background: #ffffff;
}
.privacy-modal__body::-webkit-scrollbar { width: 4px; }
.privacy-modal__body::-webkit-scrollbar-track { background: #f0f0f0; }
.privacy-modal__body::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

/* 서문 */
.privacy-modal__intro {
  font-family: var(--font-base);
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--color-text-sub);
  word-break: keep-all;
}

/* 섹션 */
.privacy-modal__section { display: flex; flex-direction: column; gap: 10px; }

.privacy-modal__section-title {
  font-family: var(--font-base);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-blue-deep);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-blue-deep);
}

.privacy-modal__section p {
  font-family: var(--font-base);
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--color-text-mid);
  word-break: keep-all;
}

/* 목록 */
.privacy-modal__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 0;
  list-style: none;
}
.privacy-modal__list li {
  font-family: var(--font-base);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-text-mid);
  padding-left: 14px;
  position: relative;
  word-break: keep-all;
}
.privacy-modal__list li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--color-blue-main);
  font-weight: 700;
}

/* 테이블 */
.privacy-modal__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-base);
  font-size: 0.875rem;
}
.privacy-modal__table th,
.privacy-modal__table td {
  padding: 10px 14px;
  border: 1px solid #d3d3d3;
  line-height: 1.6;
  word-break: keep-all;
  vertical-align: top;
}
.privacy-modal__table thead th {
  background: #F2F4F7;
  color: var(--color-text);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}
.privacy-modal__table tbody td {
  background: #ffffff;
}
.privacy-modal__table tbody td:first-child {
  background: #ffffff;
  font-weight: 600;
  color: var(--color-text-mid);
  white-space: nowrap;
  text-align: center;
}

/* 버전 표기 */
.privacy-modal__version {
  font-size: 0.8125rem !important;
  color: var(--color-text-muted) !important;
  text-align: right;
}

/* 모바일 */
@media (max-width: 767px) {
  .privacy-modal__header { padding: 16px 20px; }
  .privacy-modal__body  { padding: 20px 20px 28px; gap: 22px; }
  .privacy-modal__table { font-size: 0.8125rem; }
  .privacy-modal__table th,
  .privacy-modal__table td { padding: 8px 10px; }
}


/* ==============================================
   Toast 알림
   ============================================== */
.toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  max-width: min(480px, calc(100vw - 48px));
  border-radius: 12px;
  background: #1a1a1a;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s cubic-bezier(0.22,1,0.36,1),
              transform 0.32s cubic-bezier(0.22,1,0.36,1);
}
.toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* 아이콘 원형 뱃지 */
.toast__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toast__icon::after {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background: center / contain no-repeat;
}

/* 성공 */
.toast--success .toast__icon { background: var(--grad-brand); }
.toast--success .toast__icon::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 13l4 4L19 7' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 오류 */
.toast--error .toast__icon { background: linear-gradient(135deg, #ff4d6d, #ff6b35); }
.toast--error .toast__icon::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18 6L6 18M6 6l12 12' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.toast__msg {
  font-family: var(--font-base);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  word-break: keep-all;
}

/* 모바일 */
@media (max-width: 767px) {
  .toast { bottom: 24px; padding: 12px 16px; gap: 10px; }
  .toast__msg { font-size: 0.875rem; }
}

/* ── 스크롤바 (PC only) ── */
@media (min-width: 768px) {
  /* Firefox */
  html,
  body {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
  }

  /* Chrome, Edge — html/body + 전체 선택자 병행 적용 */
  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  *::-webkit-scrollbar {
    width: 8px;
  }

  html::-webkit-scrollbar-track,
  body::-webkit-scrollbar-track,
  *::-webkit-scrollbar-track {
    background: transparent !important;
  }

  html::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb,
  *::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3) !important;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
  }

  html::-webkit-scrollbar-thumb:hover,
  body::-webkit-scrollbar-thumb:hover,
  *::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.55) !important;
  }

  html::-webkit-scrollbar-corner,
  body::-webkit-scrollbar-corner,
  *::-webkit-scrollbar-corner {
    background: transparent !important;
  }
}

/* ═══════════════════════════════════════════════
   구축사례 상세페이지 (.pv)  — 1-컬럼 디자인 기준
   ═══════════════════════════════════════════════ */

/* ── 공통 ── */
.pv {
  background: #fff;
  color: #111;
  font-family: 'Pretendard', sans-serif;
}

/* padding-top 140px = GNB 고정 높이(~80px) + 디자인 여백(60px) */
.pv__wrap {
  max-width: 1200px;
  margin-inline: auto;
  padding: 140px 40px 80px;
}

/* ── ① 타이틀 ── */
.pv__header {
  text-align: center;
  margin-bottom: 48px;
}

.pv__title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #111;
  line-height: 1.3;
  word-break: keep-all;
}

/* ── ② 히어로 슬라이더 ── */
.pv__hero {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin-bottom: 52px;   /* 슬라이드 1개(썸네일 없음) 시 desc와의 간격 */
  background: #0d1a2e;
}
/* 썸네일 있을 때: hero margin-bottom 상쇄 → margin-top 6px만 적용 */
.pv__hero + .pv__thumbs { margin-top: calc(6px - 52px); }

.pv__hero-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.pv__hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.pv__hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.pv__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pv__hero-vthumb-empty,
.pv__hero-empty {
  width: 100%;
  height: 100%;
  background: #1a2a4a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.4);
  font-size: 0.875rem;
}

/* 좌우 화살표 */
.pv__hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.42);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background 0.2s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.pv__hero-arrow--prev { left: 20px; }
.pv__hero-arrow--next { right: 20px; }
.pv__hero-arrow:hover:not(:disabled) { background: rgba(0, 0, 0, 0.72); }
.pv__hero-arrow:disabled { opacity: 0.3; cursor: default; }

/* 썸네일 스트립 */
.pv__thumbs {
  display: flex;
  gap: 8px;
  margin-top: 6px;       /* 이미지↔썸네일: 좁게 */
  margin-bottom: 48px;   /* 썸네일↔내용: 넓게 */
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.15) transparent;
}
.pv__thumbs::-webkit-scrollbar { height: 4px; }
.pv__thumbs::-webkit-scrollbar-track { background: transparent; }
.pv__thumbs::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; }

.pv__thumb {
  flex-shrink: 0;
  width: 90px;
  height: 62px;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  background: #dce3ef;
  transition: border-color 0.2s, opacity 0.2s;
  position: relative;
  opacity: 0.55;
}
.pv__thumb:hover { opacity: 0.85; }
.pv__thumb.is-active {
  border-color: var(--color-teal);
  opacity: 1;
}
.pv__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 영상 썸네일 재생 아이콘 오버레이 */
.pv__thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.32);
}
.pv__thumb-play--empty {
  background: #1a2a4a;
}

/* 영상 슬라이드 */
.pv__hero-video {
  position: relative;
  width: 100%;
  height: 100%;
}

.pv__hero-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: transform 0.2s;
}

.pv__hero-play:hover { transform: scale(1.08); }

.pv__hero-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ── ③ 설명 영역 ── */
.pv__desc {
  margin-bottom: 52px;
}

.pv__desc-summary {
  font-size: 1.5rem;   /* 24px */
  font-weight: 700;
  color: #111;
  line-height: 1.47;
  margin-bottom: 20px;
  word-break: keep-all;
}

.pv__desc-body {
  font-size: 1.125rem; /* 18px */
  font-weight: 400;
  color: #555;
  line-height: 1.76;
  word-break: keep-all;
}

/* ── ④ 기능 설명 블록 ── */
.pv__features {
  margin-bottom: 60px;
}

.pv__feat-block {
  padding: 32px 0;
}

.pv__feat-title {
  font-size: 1.5rem;   /* 24px */
  font-weight: 700;
  color: #111;
  margin-bottom: 14px;
  line-height: 1.33;
}

.pv__feat-body {
  font-size: 1.125rem; /* 18px */
  font-weight: 400;
  color: #555;
  line-height: 1.76;
  word-break: keep-all;
}

/* ── ⑤ 목록으로 버튼 ── */
.pv__nav {
  display: flex;
  justify-content: flex-end;
}

.pv__back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  padding: 0 32px;
  border-radius: 30px;
  border: 2px solid #002572;
  color: #002572;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.22s ease, color 0.22s ease;
}

.pv__back-btn:hover,
.pv__back-btn:focus-visible {
  background: #002572;
  color: #fff;
}

/* ── ⑥ 관련 구축사례 ── */
.pv__related {
  background: #fff;
  padding: 0 0 80px;
  margin-top: 80px;
}

.pv__related-inner {
  position: relative;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 40px;
  border-top: 1px solid #E5E7EB;
  padding-top: 60px;
}

.pv__related-viewport {
  overflow: hidden;
  margin-inline: 62px; /* 화살표(46px) + 간격(16px) */
}

.pv__related-list {
  display: flex;
  gap: 20px;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 3개 기본: (100% - 2x20px) / 3 */
.pv__related-item {
  flex: 0 0 calc((100% - 40px) / 3);
  min-width: 0;
}

.pv__related-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.pv__related-card.is-current .pv__related-img-wrap,
.pv__related-card:hover .pv__related-img-wrap {
  outline: 3px solid var(--color-teal);
  outline-offset: -3px;
}

.pv__related-card.is-current .pv__related-name,
.pv__related-card:hover .pv__related-name {
  color: var(--color-teal);
}

/* 썸네일: border-radius 20px */
.pv__related-img-wrap {
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  background: #e8edf2;
  margin-bottom: 16px;
}

.pv__related-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.pv__related-card:hover .pv__related-img {
  transform: scale(1.05);
}

.pv__related-img-empty {
  width: 100%;
  height: 100%;
  background: #dde3ea;
}

.pv__related-info {
  padding: 0 4px;
}

.pv__related-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.33;
}

.pv__related-desc {
  font-size: 0.9375rem;
  font-weight: 400;
  color: #555;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.52;
}

/* 화살표 버튼 */
.pv__rarrow {
  position: absolute;
  top: calc(50% + 30px); /* 콘텐츠 영역(padding-top 60px 이하) 기준 수직 중앙 */
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #D1D5DB;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #333;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  z-index: 2;
}
.pv__rarrow--prev { left: 0; }
.pv__rarrow--next { right: 0; }

.pv__rarrow:hover:not(:disabled) {
  background: #002572;
  border-color: #002572;
  color: #fff;
}
.pv__rarrow:disabled { opacity: 0.30; cursor: default; }


/* ════ 반응형 ════ */

@media (max-width: 1280px) {
  .pv__wrap          { padding-inline: 32px; }
  .pv__related-inner { padding-inline: 32px; }
}

@media (max-width: 1024px) {
  .pv__wrap          { padding-inline: 28px; }
  .pv__related-inner { padding-inline: 28px; }
  /* 3개 → 2개 */
  .pv__related-item  { flex: 0 0 calc((100% - 20px) / 2); }
}

@media (max-width: 768px) {
  .pv__wrap          { padding: 100px 20px 60px; }
  .pv__related-inner { padding-inline: 20px; gap: 12px; }
  .pv__title         { font-size: 1.875rem; }
  .pv__desc-summary  { font-size: 1.25rem; }
  .pv__hero          { aspect-ratio: 4 / 3; margin-bottom: 36px; }
  .pv__hero-arrow    { width: 40px; height: 40px; }
  /* 2개 유지 */
  .pv__rarrow        { width: 38px; height: 38px; }
  .pv__related       { margin-top: 60px; padding: 48px 0 64px; }
}

@media (max-width: 480px) {
  .pv__wrap            { padding: 90px 16px 48px; }
  .pv__related-inner   { padding-inline: 16px; gap: 10px; }
  .pv__title           { font-size: 1.5rem; }
  .pv__desc-summary    { font-size: 1.125rem; }
  .pv__hero            { aspect-ratio: 1 / 1; border-radius: 14px; margin-bottom: 28px; }
  .pv__hero-arrow      { width: 36px; height: 36px; }
  .pv__hero-arrow--prev { left: 12px; }
  .pv__hero-arrow--next { right: 12px; }
  .pv__thumb  { width: 68px; height: 48px; }
  .pv__back-btn        { height: 44px; padding: 0 24px; font-size: 0.9375rem; }
  .pv__feat-title      { font-size: 1.125rem; }
  /* 1개 */
  .pv__related-item    { flex: 0 0 100%; }
  .pv__rarrow          { width: 34px; height: 34px; }
  .pv__related-img-wrap { border-radius: 14px; }
}