/* ── 디자인 토큰 ── */
:root {
  /* 브랜드 컬러 (BRAND.md) */
  --c-blue: #1a6fd6;
  --c-blue-mid: #1458ab;
  --c-blue-soft: rgba(26, 111, 214, 0.08);
  --c-blue-ring: rgba(26, 111, 214, 0.35);
  --c-bg: #f0f5fb;
  --c-navy: #1a2233;
  --c-white: #ffffff;
  --c-gray: #d1dce8;
  --c-text-sub: #46566e;

  /* 타이포 */
  --font:
    "LINE Seed KR", "LINESeedKR", "Pretendard", "Noto Sans KR", sans-serif;

  /* 스페이싱 스케일 (8px 리듬) */
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 48px;
  --sp-7: 72px;
  --sp-8: 120px;
  --sp-9: 160px;

  /* 섹션 간 시각 간격 — 인접 섹션이 절반씩 부담 */
  --gap-section: 520px;

  /* 기타 */
  --radius: 16px;
  --radius-sm: 12px;
  --shadow-card: 0 1px 2px rgba(26, 34, 51, 0.04);
  --shadow-card-hover: 0 12px 32px rgba(26, 111, 214, 0.12);
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* z-index 스케일 */
  --z-header: 100;
  --z-skip: 1000;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  position: relative;
  font-family: var(--font);
  background: #ffffff;
  color: var(--c-navy);
  overflow-x: hidden;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 전역 배경 — 문서 전체에 좌우로 번갈아 배치된 라디얼 글로우 */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle 800px at 100% 200px, #cfe3fb, transparent),
    radial-gradient(
      circle 900px at 0% 28%,
      rgba(207, 227, 251, 0.85),
      transparent
    ),
    radial-gradient(
      circle 900px at 100% 54%,
      rgba(207, 227, 251, 0.75),
      transparent
    ),
    radial-gradient(
      circle 900px at 0% 80%,
      rgba(207, 227, 251, 0.75),
      transparent
    ),
    radial-gradient(
      circle 800px at 100% 100%,
      rgba(207, 227, 251, 0.85),
      transparent
    ),
    linear-gradient(to bottom, #ffffff 20%, var(--c-bg) 100%);
  pointer-events: none;
}

/* 접근성: 스킵 링크 */
.skip-link {
  position: fixed;
  top: -48px;
  left: 16px;
  z-index: var(--z-skip);
  background: var(--c-navy);
  color: var(--c-white);
  padding: 12px 20px;
  border-radius: 0 0 12px 12px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: top var(--transition);
}

.skip-link:focus {
  top: 0;
}

/* 접근성: 포커스 링 */
:focus-visible {
  outline: 3px solid var(--c-blue-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

a,
button {
  touch-action: manipulation;
  cursor: pointer;
}

/* ── 헤더 ── */
header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  height: 76px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(209, 220, 232, 0.5);
  transition:
    background 0.35s ease,
    border-color 0.35s ease;
}

/* 메인 랜딩 최상단 — 헤더 배경을 투명하게, 스크롤이 시작되면
   기본 화이트 톤으로 복귀 (다크 크롬 라우트는 제외) */
body.at-top:not(.chrome-dark) header {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo img {
  height: 26px;
  display: block;
}

nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

nav a {
  text-decoration: none;
  color: var(--c-navy);
  font-size: 15px;
  font-weight: 700;
  opacity: 0.72;
  transition:
    opacity var(--transition),
    color 0.35s ease;
  letter-spacing: -0.1px;
  padding: 12px 14px;
  border-radius: 10px;
}

nav a:hover {
  opacity: 1;
}

.nav-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  white-space: nowrap;
  flex-shrink: 0;
  background: var(--c-blue);
  color: var(--c-white);
  border: none;
  padding: 0 24px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 700;
  transition:
    background var(--transition),
    transform var(--transition);
  text-decoration: none;
  letter-spacing: -0.1px;
}

.btn-cta:hover {
  background: var(--c-blue-mid);
  transform: translateY(-1px);
}

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  padding: 0;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--c-navy);
  position: relative;
  transition: background var(--transition);
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--c-navy);
  transition:
    transform var(--transition),
    top var(--transition);
}

.nav-toggle span::before {
  top: -6px;
}

.nav-toggle span::after {
  top: 6px;
}

.nav-toggle.active span {
  background: transparent;
}

.nav-toggle.active span::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle.active span::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ── 전체 메뉴 패널 ── */
.menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 28px;
  width: 320px;
  background: var(--c-white);
  border: 1px solid var(--c-gray);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(26, 34, 51, 0.16);
  padding: 12px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition:
    opacity var(--transition),
    transform var(--transition);
}

.menu-panel.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.menu-panel nav {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}

.menu-panel nav a {
  font-size: 15px;
  padding: 13px 14px;
  opacity: 0.85;
}

.menu-panel-contact {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  padding: 8px 0 4px;
  border-top: 1px solid var(--c-bg);
}

/* 표시용 정보 행 — 링크 아님(전화/메일 앱 연결 동작 없음).
   네비 메뉴 항목과 같은 안쪽 여백으로 간격을 맞춘다 */
.menu-contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-text-sub);
  letter-spacing: -0.1px;
}

/* 문의 페이지 회사정보 아이콘과 같은 원형 아이콘 — 색은 텍스트를 따라감 */
.menu-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--c-gray);
  flex-shrink: 0;
}

.menu-contact-icon svg {
  width: 14px;
  height: 14px;
}

/* ── 히어로 (심플 센터 레이아웃) ── */
.hero {
  position: relative;
  padding: 92px 48px 96px;
  overflow: hidden;
}

/* 하단 Orb — 뷰포트 바닥에 고정, 위 절반만 노출. 스크롤 시 그 자리에서 축소 */
.hero-orb {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  /* FHD(1920w) 기준 720px과 동일 비율(37.5vw)로 확대해 QHD 이상에서도
     화면 대비 크기가 작아 보이지 않게 함 (960px는 QHD 2560w에서 도달) */
  width: clamp(560px, 37.5vw, 960px);
  aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
}

.hero-orb canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* FHD(1080h) 기준 기존 540px 고정값은 그대로 유지(50vh=540px로 동일)하되
     QHD 이상 큰 화면에서는 뷰포트 높이에 비례해 커져 타이틀이 화면 중앙에 더
     가깝게 오도록 함. Orb는 fixed라 이 높이와 무관 */
  min-height: min(50vh, calc(100svh - 340px));
}

.hero-logo {
  margin-bottom: 44px;
}

.hero-logo img {
  display: block;
  width: min(520px, 78vw);
  height: auto;
}

.hero-tagline {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--c-navy);
  margin-bottom: 18px;
}

.hero-desc {
  font-size: 19px;
  color: var(--c-text-sub);
  line-height: 1.75;
  max-width: 560px;
  margin: 0 auto 48px;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  background: var(--c-blue);
  color: white;
  padding: 0 38px;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition:
    background var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
  box-shadow: 0 4px 20px rgba(26, 111, 214, 0.28);
  letter-spacing: -0.1px;
}

.btn-primary:hover {
  background: var(--c-blue-mid);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(26, 111, 214, 0.36);
}

/* 등장 애니메이션 */
.reveal-fade {
  opacity: 0;
  transform: translateY(32px);
  animation: fadeInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

/* ── 인트로 전환 (텍스트 고정 페이드) ── */
.intro {
  position: relative;
  text-align: center;
  /* Orb가 완전히 사라진 직후 짧은 스크롤만으로 인트로 글귀가 등장하도록 간격 축소 */
  margin-top: 0;
}

/* 고정 페이드 스테이지 — 섹션을 길게 잡고 텍스트를 화면 중앙에 sticky로
   고정. 스크롤 진행도에 따라 main.js가 .fade-stage-text의 opacity를 제어 */
.fade-stage {
  height: 220vh;
}

.fade-stage-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}

.fade-stage-text {
  opacity: 0;
  will-change: opacity;
}

.intro-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.intro-phrase {
  font-size: clamp(28px, 4.2vw, 48px);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: var(--c-navy);
}

.intro-phrase + .intro-phrase {
  margin-top: 22px;
  color: var(--c-text-sub);
  font-weight: 500;
  font-size: clamp(18px, 2.4vw, 25px);
  letter-spacing: -0.02em;
}

/* 스크롤 리빌 공통 */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.reveal-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ── 페이지 라우팅 (메뉴 = 개별 페이지) ── */
main > section[hidden] {
  display: none;
}

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

main.page-enter > section:not([hidden]) {
  animation: pageIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 히어로는 transform이 걸리면 내부 fixed Orb의 컨테이닝 블록이 되어
   Orb가 화면 중앙에 나타났다 하단으로 점프하므로, 페이드만 적용 */
main.page-enter > #hero:not([hidden]) {
  animation-name: pageInFade;
}
@keyframes pageInFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ── 섹션 공통 ── */
.section-preview {
  padding: var(--sp-9) 48px;
  max-width: 1800px;
  margin: 0 auto;
}

/* 홈 랜딩의 섹션 리듬 통일 — 세로 패딩은 --gap-section의 절반 */
#service .section-preview {
  padding-block: calc(var(--gap-section) / 2);
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-blue);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}

.section-title {
  font-size: clamp(32px, 4.2vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.28;
  color: var(--c-navy);
  margin-bottom: var(--sp-4);
}

.section-desc {
  font-size: 18px;
  color: var(--c-text-sub);
  line-height: 1.75;
  max-width: 620px;
  margin-bottom: var(--sp-7);
}

/* ── 서비스 소개 카드 ── */
/* 서비스 섹션은 타이틀만 노출 — 폰트를 줄이고 카드와의 간격 확보 */
#service .section-title {
  font-size: clamp(26px, 3.2vw, 40px);
  margin-bottom: var(--sp-7);
  color: rgba(26, 34, 51, 0.62);
}

/* '모든 IT 서비스를 제공'만 진하게 — 나머지는 흐리게 */
#service .section-title strong {
  font-weight: inherit;
  color: var(--c-navy);
}

.service-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* 흐린 외곽선 + 유리질 배경 */
.service-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius);
  padding: 42px 32px 36px;
  border: 1px solid rgba(209, 220, 232, 0.4);
  box-shadow: 0 12px 40px rgba(26, 111, 214, 0.07);
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 52px rgba(26, 111, 214, 0.16);
  border-color: rgba(26, 111, 214, 0.25);
}

.service-icon {
  width: 48px;
  height: 48px;
  background: var(--c-blue-soft);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 42px;
  flex-shrink: 0;
}

.service-icon svg {
  width: 27px;
  height: 27px;
  stroke: var(--c-blue);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.service-card h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 18px;
  letter-spacing: -0.02em;
}

.service-card p {
  font-size: 16px;
  color: var(--c-text-sub);
  line-height: 1.75;
  margin-bottom: 36px;
}

.service-card p strong {
  font-weight: 700;
  color: var(--c-navy);
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.service-tag {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-blue);
  background: var(--c-blue-soft);
  border-radius: 100px;
  padding: 6px 13px;
  letter-spacing: -0.01em;
}

/* ── 보유솔루션 ── */
.solution-rows {
  display: grid;
  gap: var(--sp-8);
}

.solution-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-7);
  align-items: center;
}

.solution-row.reverse .solution-copy {
  order: 2;
}

.solution-row.reverse .solution-shot {
  order: 1;
}

.solution-badge {
  display: inline-flex;
  align-items: center;
  background: var(--c-blue-soft);
  color: var(--c-blue);
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 20px;
}

.solution-copy h3 {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.35;
  margin-bottom: 14px;
}

.solution-copy > p {
  font-size: 16.5px;
  color: var(--c-text-sub);
  line-height: 1.75;
  margin-bottom: 26px;
}

.solution-points {
  list-style: none;
  display: grid;
  gap: 12px;
}

.solution-points li {
  position: relative;
  padding-left: 30px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--c-navy);
  letter-spacing: -0.1px;
}

.solution-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-blue-soft);
}

.solution-points li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  width: 8px;
  height: 5px;
  border-left: 2px solid var(--c-blue);
  border-bottom: 2px solid var(--c-blue);
  transform: rotate(-45deg);
}

.solution-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--c-gray);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(26, 34, 51, 0.12);
}

/* ── 포트폴리오 (메인 랜딩 전용) — 전폭 마퀴 ──
   행 폭 = 화면 폭 - 좌우 여백(--pf-edge × 2), 카드 폭 = (행 폭 - 갭 합) / --pf-cols.
   %(콘텐츠 폭) 기준 계산이라 스크롤바 폭의 영향을 받지 않는다.
   섹션이 뷰포트 중앙일 때(x=0) 정확히 --pf-cols 장이 여백 안에 꽉 찬다. */
.pf-home {
  --pf-cols: 6;
  --pf-gap: 14px;
  --pf-edge: 5px;
  padding: calc(var(--gap-section) / 2) 0;
  /* clip은 hidden과 달리 스크롤 컨테이너를 만들지 않아
     모바일 핀 모드의 내부 sticky(.pf-home-pin)가 동작할 수 있다 */
  overflow: hidden;
  overflow: clip;
}

.pf-rows {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pf-gap);
}

.pf-row {
  display: flex;
  gap: var(--pf-gap);
  width: calc(100% - var(--pf-edge) * 2);
  will-change: transform;
}

.pf-card {
  position: relative;
  width: calc((100% - (var(--pf-cols) - 1) * var(--pf-gap)) / var(--pf-cols));
  aspect-ratio: 1 / 1; /* 정사각형, 축소 시 비율 유지 */
  flex-shrink: 0;
  border-radius: var(--radius);
  border: 1px solid var(--c-gray);
  background: linear-gradient(135deg, #f5f8fc 0%, #eaf1f8 100%);
  overflow: hidden;
}

/* 채워진 카드 — 포트폴리오 라우트 카드의 기본 이미지를 축소 표시 (후버 동작 없음) */
.pf-card.filled img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pf-card.filled::after {
  content: none;
}

/* 이미지 자리 표시 글리프 */
.pf-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8bdd6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3C/svg%3E")
    center / 40px no-repeat;
  opacity: 0.55;
}

.pf-home-title {
  text-align: center;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.35;
  color: var(--c-navy);
  margin-top: var(--sp-8);
  padding: 0 24px;
}

/* ── 서비스소개 전용 페이지 (/service) — 중성 블랙 + 멀티 컬러 글로우 ── */
.svc-page {
  --svcp-bg: #0a0a0d;
  --svcp-panel: rgba(255, 255, 255, 0.03);
  --svcp-panel-solid: #121216;
  --svcp-ink: #f2f3f5;
  --svcp-dim: rgba(242, 243, 245, 0.42);
  --svcp-faint: rgba(242, 243, 245, 0.24);
  --svcp-sky: #6fb3ff;
  --svcp-red: #ff6b6b;
  --svcp-line: rgba(255, 255, 255, 0.08);
  position: relative;
  background: var(--svcp-bg);
  color: var(--svcp-ink);
  /* clip은 hidden과 달리 스크롤 컨테이너를 만들지 않아 내부 sticky
     (포트폴리오 카드 스택, 문의 페이지 연락처)가 뷰포트에 고정될 수 있다 */
  overflow: hidden;
  overflow: clip;
}
.svc-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      520px 380px at 12% 3%,
      rgba(26, 111, 214, 0.1),
      transparent 70%
    ),
    radial-gradient(
      460px 420px at 88% 14%,
      rgba(123, 92, 255, 0.06),
      transparent 70%
    ),
    radial-gradient(
      520px 460px at 8% 46%,
      rgba(53, 208, 192, 0.05),
      transparent 70%
    ),
    radial-gradient(
      640px 520px at 90% 72%,
      rgba(26, 111, 214, 0.08),
      transparent 70%
    ),
    radial-gradient(
      560px 480px at 15% 92%,
      rgba(123, 92, 255, 0.05),
      transparent 70%
    );
}
.svcp-block {
  position: relative;
  padding: calc(var(--gap-section) / 2) 48px;
}
.svcp-inner {
  max-width: 1600px;
  margin: 0 auto;
}
.svcp-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--svcp-sky);
  text-transform: uppercase;
  margin-bottom: 28px;
}
.svcp-title {
  font-size: clamp(28px, 3.6vw, 56px);
  font-weight: 800;
  line-height: 1.42;
  letter-spacing: -0.03em;
  word-break: keep-all;
}
.svcp-title strong {
  color: var(--svcp-sky);
  font-weight: inherit;
}
.svcp-lead {
  margin-top: 28px;
  font-size: 18px;
  line-height: 1.9;
  color: var(--svcp-dim);
  word-break: keep-all;
}

/* S1. 가치 — 연결된 원 (FHD에서 섹션 전체가 한 화면에 들어오도록 상단 여백 축소) */
.svcp-values {
  padding-top: 120px;
  padding-bottom: calc(var(--gap-section) / 4);
  text-align: left;
}
/* S1-S2 사이 간격 50%로 축소 (요청 반영) */
.svcp-values + .svcp-block {
  padding-top: calc(var(--gap-section));
}
.svcp-ring {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  margin-top: 112px;
  list-style: none;
  padding: 0;
}
.svcp-circle {
  position: relative;
  /* 1600px 컨테이너를 좌우로 꽉 채우는 크기 (5개 × 19.8vw − 겹침 75px×4) */
  width: clamp(200px, 19.8vw, 380px);
  height: clamp(200px, 19.8vw, 380px);
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-left: -75px;
}
/* 테두리 — SVG stroke (펜으로 그리듯 트레이싱 애니메이션을 위해 mask 대신 실제 path 사용) */
.svcp-circle-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  transition: filter 0.35s ease;
}
.svcp-ring.is-drawing .svcp-circle-svg circle {
  will-change: stroke-dashoffset;
}
/* 후버 — 내부는 채우지 않고 외곽선만 밝아짐 */
.svcp-circle:hover .svcp-circle-svg {
  filter: brightness(1.6);
}
.svcp-circle:first-child {
  margin-left: 0;
}
/* 스크롤 진입 시 테두리가 그려지는 애니메이션 — 원마다 순차 시작 */
@keyframes svcp-circle-draw {
  to {
    stroke-dashoffset: 0;
  }
}
.svcp-ring.is-drawing .svcp-circle-svg circle {
  animation: svcp-circle-draw 650ms ease forwards;
}
/* reveal-on-scroll의 부모 transform 트랜지션(0.7s)이 끝난 뒤 시작 —
   부모 transform과 자식 SVG stroke 애니메이션이 겹치면 크롬 GPU 래스터라이즈가
   깨지는 경우가 있어(비-스케일링 stroke + 동시 transform), 겹치지 않게 700ms부터 시작 */
.svcp-ring.is-drawing .svcp-circle:nth-child(1) .svcp-circle-svg circle {
  animation-delay: 700ms;
}
.svcp-ring.is-drawing .svcp-circle:nth-child(2) .svcp-circle-svg circle {
  animation-delay: 820ms;
}
.svcp-ring.is-drawing .svcp-circle:nth-child(3) .svcp-circle-svg circle {
  animation-delay: 940ms;
}
.svcp-ring.is-drawing .svcp-circle:nth-child(4) .svcp-circle-svg circle {
  animation-delay: 1060ms;
}
.svcp-ring.is-drawing .svcp-circle:nth-child(5) .svcp-circle-svg circle {
  animation-delay: 1180ms;
}
.svcp-circle span {
  font-size: clamp(14px, 1vw, 19px);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.38s ease,
    transform 0.38s ease;
}
/* 테두리가 모두 그려진 뒤(1830ms) 텍스트가 하나씩 나타남 */
.svcp-ring.is-drawing .svcp-circle span {
  opacity: 1;
  transform: translateY(0);
}
.svcp-ring.is-drawing .svcp-circle:nth-child(1) span {
  transition-delay: 1830ms;
}
.svcp-ring.is-drawing .svcp-circle:nth-child(2) span {
  transition-delay: 1940ms;
}
.svcp-ring.is-drawing .svcp-circle:nth-child(3) span {
  transition-delay: 2050ms;
}
.svcp-ring.is-drawing .svcp-circle:nth-child(4) span {
  transition-delay: 2160ms;
}
.svcp-ring.is-drawing .svcp-circle:nth-child(5) span {
  transition-delay: 2270ms;
}
.svcp-values .svcp-lead {
  margin-top: 48px;
  font-size: 22px;
  font-weight: 700;
}

/* S2·S4. 말풍선 패널 — 좌우 2단 (말풍선 + 메시지) */
.svcp-chat {
  background: var(--svcp-panel);
  border: 1px solid var(--svcp-line);
  border-radius: 32px;
  padding: 96px 88px;
  display: grid;
  /* 균등 분할 — 우측 메시지 컬럼이 "문제는 기술이 아니라 …" 문장을 한 줄에 담도록 */
  grid-template-columns: 1fr 1fr;
  gap: 88px;
  align-items: center;
  backdrop-filter: blur(8px);
}
.svcp-bubbles {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.svcp-msg {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  max-width: 620px;
}
.svcp-msg p {
  padding: 18px 26px;
  border-radius: 18px;
  border-bottom-left-radius: 4px;
  background: #1b1b21;
  font-size: 17px;
  line-height: 1.7;
  word-break: keep-all;
  color: rgba(242, 243, 245, 0.85);
}
.svcp-msg.a {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.svcp-msg.a p {
  background: var(--c-blue);
  border-radius: 18px;
  border-bottom-right-radius: 4px;
  color: #fff;
}
.svcp-badge {
  display: inline-block;
  background: rgba(255, 107, 107, 0.1);
  color: var(--svcp-red);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 100px;
  margin-bottom: 24px;
}
.svcp-badge.blue {
  background: rgba(26, 111, 214, 0.14);
  color: var(--svcp-sky);
}
.svcp-verdict {
  text-align: left;
  font-size: clamp(20px, 1.8vw, 30px);
  font-weight: 700;
  line-height: 1.75;
  word-break: keep-all;
}
/* 좁은 화면에서 문장 꼬리("있습니다.")만 어중간하게 떨어지지 않도록 구 단위로 줄바꿈 */
.svcp-nowrap {
  white-space: nowrap;
}
.svcp-verdict strong {
  color: var(--svcp-red);
  font-weight: inherit;
  border-bottom: 2px solid rgba(255, 107, 107, 0.45);
  padding-bottom: 2px;
}
/* 메시지 컬럼 하단 보조 문구 (S2 우측 / S4 좌측) */
.svcp-note {
  margin-top: 36px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.9;
  color: var(--svcp-dim);
  word-break: keep-all;
}

/* S3. 글로우 선언 */
.svcp-statement {
  text-align: center;
  padding: 320px 48px;
}
/* S3 고정 페이드 — 패딩 대신 스테이지 높이로 공간 확보, 글로우는 sticky
   래퍼로 옮겨 텍스트와 함께 화면 중앙에 고정 (텍스트만 페이드) */
.svcp-statement.fade-stage {
  padding: 0;
}
.svcp-statement.fade-stage::before {
  content: none;
}
.svcp-statement .fade-stage-sticky::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 700px;
  background: radial-gradient(
    circle,
    rgba(26, 111, 214, 0.22),
    rgba(123, 92, 255, 0.05) 55%,
    transparent 72%
  );
  filter: blur(14px);
  pointer-events: none;
}
.svcp-statement::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 700px;
  background: radial-gradient(
    circle,
    rgba(26, 111, 214, 0.22),
    rgba(123, 92, 255, 0.05) 55%,
    transparent 72%
  );
  filter: blur(14px);
  pointer-events: none;
}
.svcp-statement h2 {
  position: relative;
  font-size: clamp(30px, 4.2vw, 64px);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -0.04em;
  word-break: keep-all;
}
.svcp-statement h2 strong {
  color: var(--svcp-sky);
  font-weight: inherit;
}
/* S5→S6 브릿지 — S3와 같은 선언형 양식.
   S5 화이트 패널과 S6 사이에서 호흡을 만드는 구간이라 여백을 넉넉히 잡음.
   S5 화이트가 확장 등장하듯, 화이트 베이스 위로 다크 패널이 확장 등장 (--svcp-exp: 0→1) */
.svcp-bridge {
  --svcp-exp: 0;
  padding: 440px 48px;
  background: #fafbfd;
}
.svcp-bridge::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--svcp-bg);
  border-radius: calc((1 - var(--svcp-exp)) * 48px);
  transform: scaleX(calc(0.86 + var(--svcp-exp) * 0.14));
  will-change: transform;
}
.svcp-bridge::before {
  z-index: 1;
}
.svcp-bridge h2 {
  z-index: 2;
}
/* 2026-07-24: 접근성 설정 무관 전체 애니메이션 노출 결정으로 비활성화(주석).
@media (prefers-reduced-motion: reduce) {
  .svcp-bridge {
    background: none;
  }
  .svcp-bridge::after {
    transform: none;
    border-radius: 0;
  }
}
*/
/* S5 — 패널 안 왼쪽 컬럼으로 들어가는 타이틀 */
.svcp-consult-head {
  text-align: left;
}
.svcp-consult-head .svcp-title {
  font-size: clamp(24px, 2.3vw, 38px);
}

/* S5. 서비스 — 화이트 반전 패널 (스크롤에 따라 가로로 확장, --svcp-exp: 0→1) */
.svcp-services {
  --svcp-exp: 0;
  position: relative;
  color: var(--c-navy);
  padding: 200px 48px;
}
.svcp-services::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fafbfd;
  border-radius: calc((1 - var(--svcp-exp)) * 48px);
  transform: scaleX(calc(0.86 + var(--svcp-exp) * 0.14));
  will-change: transform;
}
.svcp-services > * {
  position: relative;
}
/* 2026-07-24: 접근성 설정 무관 전체 애니메이션 노출 결정으로 비활성화(주석).
@media (prefers-reduced-motion: reduce) {
  .svcp-services::before {
    transform: none;
    border-radius: 0;
  }
}
*/
/* S5 신규 — 에디토리얼 넘버 레이아웃.
   거대 고스트 넘버 + 대형 영문 타이틀(첫 글자 블루), 행마다 좌우 교차 정렬 */
.svcp-ed-list {
  max-width: 1600px;
  margin: 24px auto 0;
}
.svcp-ed-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px 80px;
  padding: 104px 0;
  border-bottom: 1px solid #e6edf5;
}
.svcp-ed-row:last-child {
  border-bottom: none;
  padding-bottom: 32px;
}
.svcp-ed-row:nth-child(even) {
  flex-direction: row-reverse;
}
.svcp-ed-num {
  flex-shrink: 0;
  font-size: clamp(140px, 13vw, 240px);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: #ecf2f9;
  user-select: none;
}
.svcp-ed-body {
  max-width: 720px;
}
.svcp-ed-row:nth-child(odd) .svcp-ed-body {
  text-align: right;
}
.svcp-ed-title {
  font-size: clamp(38px, 4.2vw, 68px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-bottom: 36px;
}
.svcp-ed-title strong {
  color: var(--c-blue);
}
.svcp-ed-kicker {
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 14px;
}
/* 서비스별 핵심 한 줄 — 설명보다 진하게 강조 */
.svcp-ed-lead {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-navy);
  word-break: keep-all;
  margin-bottom: 12px;
}
.svcp-ed-desc {
  max-width: 600px;
  font-size: 17px;
  line-height: 1.85;
  color: #5a6b82;
  word-break: keep-all;
  margin-bottom: 30px;
}
.svcp-ed-row:nth-child(odd) .svcp-ed-desc {
  margin-left: auto;
}
.svcp-ed-desc strong {
  color: var(--c-navy);
}
.svcp-ed-body .svcp-tags {
  gap: 10px;
}
.svcp-ed-row:nth-child(odd) .svcp-tags {
  justify-content: flex-end;
}
.svcp-ed-body .svcp-tag {
  background: transparent;
  border-color: #cfdbe9;
  font-size: 13px;
  padding: 8px 18px;
}
.svcp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.svcp-tag {
  font-size: 12px;
  font-weight: 700;
  color: #4a5e78;
  background: #eef3f9;
  border: 1px solid #dde6f0;
  padding: 5px 12px;
  border-radius: 100px;
}

/* S6. 솔루션 */
.svcp-solutions {
  padding-top: 170px;
}
/* 섹션 헤드 — S1(서비스 구현 가치)과 동일한 좌측 정렬·타이포 스케일 */
.svcp-solutions .svcp-sec-head {
  text-align: left;
  margin-bottom: 40px;
}
.svcp-solutions .svcp-lead {
  margin-top: 48px;
  font-size: 22px;
  font-weight: 700;
}
/* S6 신규 — 좌우 2분할 대형 쇼케이스 카드.
   기본: 제품명 + 스크린샷 / 후버·포커스: 그라데이션 위 기술스택 칩 + 타이틀/서브타이틀 */
.svcp-sol-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 72px;
}
.svcp-sol-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: 24px;
  border: 1px solid var(--svcp-line);
  background: linear-gradient(180deg, #17181d, #101014);
  min-height: clamp(540px, 74vh, 800px);
  outline: none;
}
.svcp-sol-base {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 스크린샷 비노출 상태에서는 제품명을 세로 중앙에 배치.
     (스크린샷 복원 시에는 margin-top: auto가 우선되어 하단으로 밀림) */
  justify-content: center;
  text-align: center;
  padding: 76px 56px 0;
  transition: opacity 0.45s ease;
}
/* 후버 레이어가 반투명이라 기본 레이어 텍스트가 비치지 않도록 함께 페이드아웃 */
.svcp-sol-card:hover .svcp-sol-base,
.svcp-sol-card:focus-visible .svcp-sol-base {
  opacity: 0;
}
.svcp-sol-kicker {
  font-size: 17px;
  font-weight: 700;
  color: var(--svcp-dim);
  letter-spacing: -0.2px;
  margin-bottom: 14px;
}
.svcp-sol-name {
  font-size: clamp(44px, 3.6vw, 64px);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
}
.svcp-sol-shot {
  margin-top: auto;
  padding-top: 48px;
  width: min(86%, 760px);
}
.svcp-sol-shot img {
  width: 100%;
  display: block;
  border-radius: 14px 14px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: none;
  box-shadow: 0 -20px 80px rgba(0, 0, 0, 0.45);
}
/* has-img — 카드 비율(1580×1600)에 맞춰 제작된 완성형 카드 이미지를 풀블리드로 사용.
   이미지 안에 타이틀이 포함되어 있어 카드 자체 키커·제품명은 숨김.
   (/solutions 서브페이지의 텍스트 온리 .svcp-sol-card에는 영향 없음) */
.svcp-sol-card.has-img .svcp-sol-base {
  padding: 0;
}
.svcp-sol-card.has-img .svcp-sol-kicker,
.svcp-sol-card.has-img .svcp-sol-name {
  display: none;
}
.svcp-sol-card.has-img .svcp-sol-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}
.svcp-sol-card.has-img .svcp-sol-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 카드 비율(약 1:1)에 맞춘 이미지 — 상단 타이틀이 잘리지 않게 위 기준 크롭 */
  object-position: center top;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transition: filter 0.45s ease;
}
/* has-img 카드는 후버 시에도 카드 이미지가 은은하게 비치도록 유지.
   (텍스트 온리 카드는 기본 텍스트가 후버 레이어에 비치므로 기존 페이드아웃 유지) */
.svcp-sol-card.has-img:hover .svcp-sol-base,
.svcp-sol-card.has-img:focus-visible .svcp-sol-base {
  opacity: 1;
}
/* 이미지에 새겨진 흰색 타이틀이 후버 텍스트와 겹쳐 보이지 않게 광량을 낮춤 */
.svcp-sol-card.has-img:hover .svcp-sol-shot img,
.svcp-sol-card.has-img:focus-visible .svcp-sol-shot img {
  filter: brightness(0.4);
}
/* 포트폴리오 카드 — 후버 시 타이틀 없는 전용 이미지(.shot-hover)로 크로스페이드.
   타이틀 겹침이 없으므로 광량 저하 없이 그대로 노출 */
.svcp-sol-card.has-img .svcp-sol-shot .shot-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.svcp-sol-card.has-img:hover .svcp-sol-shot .shot-hover,
.svcp-sol-card.has-img:focus-visible .svcp-sol-shot .shot-hover {
  opacity: 1;
  filter: none;
}
.svcp-sol-card.has-img .svcp-sol-hover {
  background: linear-gradient(
    150deg,
    rgba(16, 52, 100, 0.84),
    rgba(26, 111, 214, 0.74) 55%,
    rgba(111, 179, 255, 0.6)
  );
}
.svcp-sol-hover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px;
  opacity: 0;
  background: linear-gradient(
    150deg,
    rgba(16, 52, 100, 0.94),
    rgba(26, 111, 214, 0.9) 55%,
    rgba(111, 179, 255, 0.85)
  );
  transition: opacity 0.45s ease;
}
.svcp-sol-card:hover .svcp-sol-hover,
.svcp-sol-card:focus-visible .svcp-sol-hover {
  opacity: 1;
}
.svcp-sol-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}
.svcp-sol-chips span {
  background: #fff;
  color: var(--c-navy);
  font-size: 14px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 100px;
}
.svcp-sol-hover h4 {
  font-size: clamp(36px, 2.8vw, 52px);
  font-weight: 800;
  color: #fff;
  margin-bottom: 18px;
}
.svcp-sol-hover h4 span {
  font-size: 0.5em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
  margin-left: 14px;
  letter-spacing: 0.04em;
}
.svcp-sol-hover p {
  font-size: 18px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.88);
  word-break: keep-all;
}
/* (구) S6 좌우 교차 행 레이아웃 — 복원 대비 보관.
   HTML 쪽 마크업이 주석 처리되어 있어 아래 규칙은 현재 미사용 */
.svcp-sol-row {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 96px;
  align-items: center;
  padding: 96px 0;
}
.svcp-sol-row.flip .svcp-sol-img {
  order: 2;
}
.svcp-sol-img {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--svcp-line);
  background: var(--svcp-panel-solid);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}
.svcp-sol-img img {
  width: 100%;
  display: block;
}
.svcp-sol-row h3 {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 20px;
}
.svcp-sol-row h3 span {
  color: var(--svcp-sky);
}
.svcp-sol-row p {
  font-size: 17px;
  line-height: 1.9;
  color: var(--svcp-dim);
  word-break: keep-all;
  margin-bottom: 26px;
}
.svcp-solutions .svcp-tag {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--svcp-line);
  color: var(--svcp-dim);
}
/* 개별 페이지 헤드 (포트폴리오·프로젝트 문의) —
   아이브로·타이틀·서브타이틀을 서비스소개 진입(S1)과 동일한 위치·양식으로.
   (.svcp-block의 padding 단축 속성보다 뒤에 와야 padding-top이 적용된다) */
.svcp-page-head {
  padding-top: 120px;
  text-align: left;
}
.svcp-page-head .svcp-lead {
  margin-top: 48px;
  font-size: 22px;
  font-weight: 700;
}
/* S7. 컨택트 — 메인 랜딩 컨택트 섹션의 다크 버전 */
.svcp-contact {
  /* FHD(1080h) 기준 기존 240/260px 고정값과 동일(calc 그대로 두면 1080에서
     정확히 같은 값) — QHD 이상에서는 뷰포트 높이에 비례해 커져 히어로와
     맞춰짐 */
  padding: calc(100svh * 240 / 1080) 48px calc(100svh * 260 / 1080);
}
.svcp-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    760px 520px at 50% 55%,
    rgba(26, 111, 214, 0.14),
    transparent 70%
  );
}
.svcp-contact .contact-head,
.svcp-contact .contact-cta {
  position: relative;
}
/* 메인 #contact와 동일한 타이포 스케일, 색상만 다크 팔레트로 반전 */
.svcp-contact .cta-display {
  font-size: clamp(30px, 4.2vw, 80px);
  white-space: nowrap;
  margin-bottom: var(--sp-7);
  color: var(--svcp-ink);
}
.svcp-contact .contact-sub {
  color: var(--svcp-dim);
}
.svcp-contact .contact-sub strong {
  color: var(--svcp-ink);
}
/* S7 다크 Orb — 히어로 Orb와 동일 지오메트리 (뷰포트 하단 고정, 위 절반 노출) */
.svcp-orb {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  width: clamp(560px, 37.5vw, 960px);
  aspect-ratio: 1;
  pointer-events: none;
}
.svcp-orb canvas {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 900px) {
  .svcp-block {
    padding-left: 20px;
    padding-right: 20px;
  }
  .svcp-ring {
    flex-wrap: nowrap;
  }
  .svcp-circle {
    width: 150px;
    height: 150px;
    margin-left: -50px;
  }
  .svcp-circle:first-child {
    margin-left: 0;
  }
  .svcp-chat {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 48px 24px;
  }
  .svcp-verdict {
    text-align: center;
  }
  .svcp-consult-head {
    text-align: center;
  }
  .svcp-msg {
    max-width: 100%;
  }
  .svcp-services {
    padding: 120px 20px;
  }
  .svcp-services::before {
    transform: none;
    border-radius: calc((1 - var(--svcp-exp)) * 24px);
  }
  .svcp-ed-row,
  .svcp-ed-row:nth-child(even) {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 64px 0;
  }
  .svcp-ed-num {
    font-size: 96px;
  }
  .svcp-ed-row:nth-child(odd) .svcp-ed-body {
    text-align: left;
  }
  .svcp-ed-title {
    margin-bottom: 20px;
  }
  .svcp-ed-row:nth-child(odd) .svcp-ed-desc {
    margin-left: 0;
  }
  .svcp-ed-row:nth-child(odd) .svcp-tags {
    justify-content: flex-start;
  }
  .svcp-sol-duo {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 48px;
  }
  .svcp-sol-card {
    min-height: 480px;
  }
  .svcp-sol-base {
    padding: 48px 24px 0;
  }
  /* 터치 환경(탭 후 :hover가 그대로 눌어붙는 현상 포함)에서는 후버 레이어를
     띄우지 않고 기본 이미지만 노출. 마우스가 실제로 있는 환경(hover:hover)이거나
     키보드 포커스(:focus-visible)일 때만 아래 스타일로 정보 레이어 노출 */
  .svcp-sol-card:hover .svcp-sol-base {
    opacity: 1;
  }
  .svcp-sol-card.has-img:hover .svcp-sol-shot img {
    filter: none;
  }
  .svcp-sol-card.has-img:hover .svcp-sol-shot .shot-hover {
    opacity: 0;
  }
  .svcp-sol-card:hover .svcp-sol-hover {
    opacity: 0;
  }
  .svcp-sol-hover {
    justify-content: flex-end;
    padding: 28px 24px;
    background: linear-gradient(
      to top,
      rgba(10, 10, 13, 0.9) 24%,
      rgba(10, 10, 13, 0.55) 60%,
      transparent
    );
  }
  .svcp-sol-card:focus-visible .svcp-sol-hover {
    opacity: 1;
  }
  .svcp-sol-chips {
    margin-bottom: 18px;
  }
  .svcp-sol-chips span {
    font-size: 12px;
    padding: 6px 12px;
  }
  .svcp-sol-hover p {
    font-size: 15px;
  }
  /* 포트폴리오 라우트 — 카드 스택: 화면 중앙에 고정된 카드 한 장이
     스크롤 진행도에 따라 교체된다. 트랙 높이·스테이지 크기·고정 위치는
     main.js가 뷰포트 기준으로 계산해 CSS 변수로 지정 */
  .svcp-sol-track.is-stack {
    position: relative;
    margin-top: 48px;
  }
  .svcp-sol-track.is-stack .svcp-sol-duo {
    position: sticky;
    top: var(--sol-top, 15vh);
    display: block;
    height: var(--sol-stage, 520px);
    margin-top: 0;
  }
  .svcp-sol-track.is-stack .svcp-sol-card {
    position: absolute;
    inset: 0;
    min-height: 0;
    visibility: hidden;
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition:
      opacity 0.4s ease,
      transform 0.4s ease,
      visibility 0s linear 0.4s;
  }
  /* visibility는 reduced-motion의 reveal 강제 노출(!important)과 무관하게
     비활성 카드를 확실히 감춘다 */
  .svcp-sol-track.is-stack .svcp-sol-card.sol-active {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
  .svcp-sol-row {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 48px 0;
  }
  .svcp-sol-row.flip .svcp-sol-img {
    order: 0;
  }
  .svcp-statement {
    padding: 160px 20px;
  }
  .svcp-bridge {
    padding: 240px 20px;
  }
  .svcp-bridge::after {
    transform: none;
    border-radius: calc((1 - var(--svcp-exp)) * 24px);
  }
  .svcp-contact {
    padding: 140px 20px 160px;
  }
}

/* ── 프로젝트 문의 ── */
.contact-section {
  position: relative;
  /* --gap-section 공용 리듬 대신 S7(svcp-contact)과 동일한 vh 스케일링을
     적용 — FHD(1080h)에서는 기존 260px(=--gap-section/2)와 동일, QHD
     이상에서는 비례 확대되어 히어로/S7과 크기가 맞음 */
  padding: calc(100svh * 260 / 1080) 48px;
}

.contact-inner {
  position: relative;
  z-index: 1; /* 백그라운드 Orb 위에 텍스트가 오도록 */
  max-width: 1800px;
  margin: 0 auto;
}

.contact-head {
  text-align: center;
  margin: 0 auto;
}

/* 컨택트 섹션 전용 — 한 줄 대형 타이틀 (1920px 기준 80px) */
#contact .cta-display {
  font-size: clamp(30px, 4.2vw, 80px);
  white-space: nowrap;
  margin-bottom: var(--sp-7);
}

.cta-display {
  font-size: clamp(38px, 6vw, 72px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.2;
  color: var(--c-navy);
  margin-bottom: 22px;
}

/* 첫 줄은 흐리게, 핵심 메시지 줄(strong)은 진하게 */
.contact-sub {
  color: rgba(26, 34, 51, 0.62);
  font-size: clamp(18px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1.7;
}

.contact-sub strong {
  font-weight: inherit;
  color: var(--c-navy);
}

.contact-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-7);
}

/* 헤더 CTA 버튼과 동일한 높이, 가로는 넉넉하게 */
.contact-cta .btn-primary {
  min-height: 46px;
  min-width: 200px;
  padding: 0 24px;
  font-size: 15px;
}

.btn-primary.btn-xl {
  min-height: 66px;
  padding: 0 52px;
  font-size: 18px;
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── 프로젝트 문의 페이지 (/request) —
   헤드는 .svcp-page-head 공용 양식, 아래는 좌(회사정보)/우(문의 폼) 2분할 ── */
.request-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-top: 88px;
}

/* 좌측 — 회사 연락 정보 (스크롤해도 화면에 고정) */
.request-info {
  align-self: start;
  position: sticky;
  top: 160px;
}

.request-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.request-info-row {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.request-info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--svcp-line);
  background: var(--svcp-panel);
  color: #fff;
  flex-shrink: 0;
  transition: border-color var(--transition);
}

.request-info-icon svg {
  width: 21px;
  height: 21px;
}

.request-cta {
  display: flex;
  margin-top: 64px;
}

/* 제출 버튼은 폼(우측 컬럼) 너비에 맞춤 */
.request-cta .btn-primary {
  width: 100%;
}

.rf-status {
  display: block;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.rf-status.is-success {
  color: var(--c-blue);
}

.rf-status.is-error {
  color: #e0473e;
}

/* 문의 폼 — 작성 내용을 메일로 전달 */
.request-form {
  min-width: 0;
}

.rf-group {
  border: none;
  padding: 0;
  margin: 0 0 64px;
}

.rf-legend {
  display: block;
  font-size: 21px;
  font-weight: 800;
  color: var(--svcp-ink);
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}

.rf-step {
  color: var(--svcp-sky);
  font-size: 15px;
  letter-spacing: 0.08em;
  margin-right: 12px;
}

.rf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 16px;
}

.rf-field {
  display: block;
}

.rf-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--svcp-dim);
  margin-bottom: 10px;
}

.rf-label em {
  font-style: normal;
  color: var(--svcp-sky);
}

.rf-input,
.rf-textarea {
  width: 100%;
  background: var(--svcp-panel);
  border: 1px solid var(--svcp-line);
  border-radius: 12px;
  padding: 14px 18px;
  font-family: var(--font);
  font-size: 15px;
  color: var(--svcp-ink);
  transition: border-color var(--transition);
}

.rf-input::placeholder,
.rf-textarea::placeholder {
  color: var(--svcp-faint);
}

.rf-input:focus-visible,
.rf-textarea:focus-visible {
  outline: none;
  border-color: var(--c-blue);
}

.rf-textarea {
  resize: vertical;
  min-height: 170px;
  line-height: 1.7;
}

/* 예산·일정 — 태그형 단일 선택 칩 */
.rf-choice + .rf-choice {
  margin-top: 36px;
}

.rf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.rf-chip {
  position: relative;
}

/* 라디오 입력은 칩 전체를 덮되 보이지 않게 — 유효성 말풍선 위치 확보 */
.rf-chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.rf-chip span {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 100px;
  border: 1px solid var(--svcp-line);
  background: var(--svcp-panel);
  font-size: 15px;
  font-weight: 600;
  color: var(--svcp-dim);
  cursor: pointer;
  transition:
    border-color var(--transition),
    background var(--transition),
    color var(--transition);
}

.rf-chip:hover span {
  border-color: rgba(111, 179, 255, 0.45);
  color: var(--svcp-ink);
}

.rf-chip input:checked + span {
  background: var(--c-blue);
  border-color: var(--c-blue);
  color: #fff;
  font-weight: 700;
}

.rf-chip input:checked + span::before {
  content: "✓ ";
}

.rf-chip input:focus-visible + span {
  outline: 2px solid var(--svcp-sky);
  outline-offset: 2px;
}

/* 개인정보 동의 — 입력 필드와 같은 라운드 박스 안에 배치 */
.rf-agree {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--svcp-panel);
  border: 1px solid var(--svcp-line);
  border-radius: 12px;
  padding: 18px 20px;
  font-size: 15px;
  color: var(--svcp-dim);
  cursor: pointer;
  transition: border-color var(--transition);
}

.rf-agree:hover {
  border-color: rgba(111, 179, 255, 0.45);
}

.rf-agree input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--c-blue);
  cursor: pointer;
}

/* 개인정보처리방침 링크 — 밑줄 표시, 클릭 시 팝업 */
.rf-policy-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--svcp-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.rf-policy-link:hover {
  color: var(--svcp-sky);
}

/* 개인정보처리방침 팝업 */
.rf-policy-modal {
  margin: auto;
  width: min(680px, calc(100vw - 40px));
  background: var(--svcp-panel-solid);
  color: var(--svcp-ink);
  border: 1px solid var(--svcp-line);
  border-radius: 20px;
  padding: 0;
}

.rf-policy-modal::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.rf-policy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  border-bottom: 1px solid var(--svcp-line);
}

.rf-policy-head h3 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.rf-policy-close {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--svcp-dim);
  cursor: pointer;
  transition: color var(--transition);
}

.rf-policy-close:hover {
  color: var(--svcp-ink);
}

.rf-policy-body {
  padding: 24px 28px 32px;
  max-height: 68vh;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.8;
  color: var(--svcp-dim);
  word-break: keep-all;
}

.rf-policy-body h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--svcp-ink);
  margin: 24px 0 6px;
}

.rf-policy-body h5 {
  font-size: 14px;
  font-weight: 700;
  color: var(--svcp-ink);
  margin: 14px 0 4px;
}

.rf-policy-body p + p {
  margin-top: 8px;
}

.rf-policy-body ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

.rf-policy-body li {
  margin: 2px 0;
}

.rf-policy-body a {
  color: var(--svcp-sky);
  word-break: break-all;
}

.rf-policy-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 13.5px;
}

.rf-policy-table th,
.rf-policy-table td {
  border: 1px solid var(--svcp-line);
  padding: 8px 14px;
  text-align: left;
}

.rf-policy-table th {
  color: var(--svcp-ink);
  font-weight: 700;
  background: var(--svcp-panel);
}

.rf-policy-dates {
  margin-top: 24px;
  font-weight: 700;
  color: var(--svcp-ink);
}

/* 문의 페이지 반응형 — 위 기본 규칙들보다 뒤에 선언해야 모바일에서 적용된다 */
@media (max-width: 900px) {
  .request-layout {
    grid-template-columns: 1fr;
    gap: 48px;
    margin-top: 64px;
  }

  .request-info {
    position: static;
  }

  .request-info-row {
    font-size: 16px;
  }

  .request-info-icon {
    width: 42px;
    height: 42px;
  }

  .rf-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .rf-legend {
    font-size: 19px;
  }

  .request-cta {
    margin-top: 48px;
  }
}

/* ── 푸터 ── */
footer {
  /* 배경은 투명 — 컨택트 백그라운드 Orb가 푸터 영역까지 이어져 보이고,
     텍스트만 z-index로 Orb 위에 얹힌다 */
  position: relative;
  z-index: 1;
  color: var(--c-text-sub);
  border-top: 1px solid rgba(209, 220, 232, 0.5);
  padding: var(--sp-4) 48px;
  font-size: 13px;
}

.footer-inner {
  max-width: 1800px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px var(--sp-4);
  flex-wrap: wrap;
}

.footer-logo {
  display: block;
  height: 18px;
  opacity: 0.9;
  flex-shrink: 0;
}

.footer-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 28px;
  line-height: 1.6;
}

.footer-copy {
  color: rgba(26, 34, 51, 0.4);
  flex-shrink: 0;
}

/* ── 다크 크롬 — 메인 랜딩이 아닌 라우트에서 헤더/푸터 다크 전환 ── */
body.chrome-dark {
  background: #0a0a0d;
}

/* 라이트 전역 글로우(body::before)는 다크 크롬에서 끔 —
   투명해진 푸터 뒤로 흰 배경이 비치지 않도록 */
body.chrome-dark::before {
  content: none;
}

/* 최상단과 스크롤 상태의 색 차이가 없도록 거의 불투명하게 유지,
   구분선을 없애 히어로와 한 덩어리로 보이게 */
body.chrome-dark header {
  background: rgba(10, 10, 13, 0.96);
  border-bottom-color: transparent;
}

body.chrome-dark nav a {
  color: #f2f3f5;
}

body.chrome-dark .nav-toggle span,
body.chrome-dark .nav-toggle span::before,
body.chrome-dark .nav-toggle span::after {
  background: #f2f3f5;
}

body.chrome-dark .menu-panel {
  background: #121216;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

body.chrome-dark .menu-panel-contact {
  border-top-color: rgba(255, 255, 255, 0.08);
}

body.chrome-dark .menu-contact-row {
  color: rgba(242, 243, 245, 0.55);
}

body.chrome-dark .menu-contact-icon {
  border-color: rgba(255, 255, 255, 0.14);
}

body.chrome-dark footer {
  /* 배경은 투명 — body의 다크 배경이 그대로 비치고,
     서비스소개 S7의 Orb가 푸터 영역까지 끊김 없이 이어져 보인다 */
  background: transparent;
  color: rgba(242, 243, 245, 0.55);
  border-top-color: rgba(255, 255, 255, 0.08);
}

body.chrome-dark .footer-copy {
  color: rgba(242, 243, 245, 0.35);
}

/* ── 라이트 오버라이드 — 서비스 페이지 S5 화이트 구간 위에서는
   헤더/메뉴 패널을 밝은 배경 기준으로 전환 (스크롤 감지 JS가 클래스 토글) ── */
body.chrome-dark.chrome-over-light header {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: rgba(209, 220, 232, 0.5);
}

body.chrome-dark.chrome-over-light nav a {
  color: var(--c-navy);
}

body.chrome-dark.chrome-over-light .nav-toggle span,
body.chrome-dark.chrome-over-light .nav-toggle span::before,
body.chrome-dark.chrome-over-light .nav-toggle span::after {
  background: var(--c-navy);
}

body.chrome-dark.chrome-over-light .nav-toggle.active span {
  background: transparent;
}

body.chrome-dark.chrome-over-light .menu-panel {
  background: var(--c-white);
  border-color: var(--c-gray);
  box-shadow: 0 24px 60px rgba(26, 34, 51, 0.16);
}

body.chrome-dark.chrome-over-light .menu-panel-contact {
  border-top-color: var(--c-bg);
}

body.chrome-dark.chrome-over-light .menu-contact-row {
  color: var(--c-text-sub);
}

body.chrome-dark.chrome-over-light .menu-contact-icon {
  border-color: var(--c-gray);
}

/* ── 모션 축소 대응 ──
   2026-07-24: OS 접근성 설정과 무관하게 전체 애니메이션을 항상 노출하기로
   결정 — 아래 블록 전체를 비활성화(주석). 되돌리려면 주석 해제.
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .fade-stage {
    height: auto;
    min-height: 100vh;
  }

  .fade-stage-text {
    opacity: 1 !important;
  }
}
*/

/* ── 반응형 ── */
@media (max-width: 1280px) {
  /* 마퀴 한 화면 5장 */
  .pf-home {
    --pf-cols: 5;
  }
}

@media (max-width: 1024px) {
  .service-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .solution-row,
  .solution-row.reverse {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .solution-row.reverse .solution-copy {
    order: 1;
  }

  .solution-row.reverse .solution-shot {
    order: 2;
  }

  /* 마퀴 한 화면 4장 */
  .pf-home {
    --pf-cols: 4;
  }
}

@media (max-width: 768px) {
  :root {
    --gap-section: 320px;
  }

  header {
    padding: 0 20px;
  }

  .logo img {
    height: 19px;
  }

  .btn-cta {
    min-height: 42px;
    padding: 0 18px;
    font-size: 14px;
  }

  .nav-group nav {
    display: none;
  }

  .menu-panel {
    left: 12px;
    right: 12px;
    width: auto;
  }

  .hero {
    padding: 48px 20px 56px;
  }

  .section-preview {
    padding: var(--sp-8) 20px;
  }

  .service-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  /* 한 화면 3장 */
  .pf-home {
    --pf-cols: 3;
  }

  /* 마퀴 핀 모드 — 섹션을 길게 늘이고(main.js가 높이 지정) 행+타이틀을
     화면에 고정, 스크롤 진행도에 따라 행이 좌우로 이동하며 12장을 모두
     보여준 뒤 다음 섹션으로 진행한다 */
  .pf-home.is-pin .pf-home-pin {
    position: sticky;
    top: var(--pfp-top, 20vh);
  }

  .solution-rows {
    gap: var(--sp-7);
  }

  .contact-section {
    padding: calc(var(--gap-section) / 2) 20px;
  }

  /* 좁은 화면에서는 타이틀 줄바꿈 허용 */
  #contact .cta-display {
    white-space: normal;
  }

  footer {
    padding: var(--sp-4) 20px;
  }

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

  .footer-info {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .service-cards {
    grid-template-columns: 1fr;
  }

  /* 스마트폰 — 한 화면 위 2장 / 아래 2장 */
  .pf-home {
    --pf-cols: 2;
  }

  .btn-primary {
    width: 100%;
  }

  .contact-cta .btn-primary {
    min-height: 42px;
    padding: 0 18px;
    font-size: 14px;
  }

  /* S1 가치 원 — 좁은 화면에서도 겹친 형태 유지, 다 안 들어오면
     중앙(Trust)을 기준으로 잘려서 보이는 만큼만 노출 */
  .svcp-circle {
    width: 116px;
    height: 116px;
    margin-left: -38px;
  }
  .svcp-circle span {
    font-size: 10px;
    letter-spacing: 0.08em;
  }
}