/* ─────────────────────────────────────────
   landing page style.css
   벤치마킹 기반: Robin Wieruch(헤더) + Sindre(히어로) +
   위시켓(탭필터) + 이랜서(숫자신뢰) + Jon Bellah(타이포)
   ───────────────────────────────────────── */

/* ── CSS 변수 (디자인 토큰) ── */
:root {
  /* 색상 팔레트 */
  --clr-bg:        #0a0b0f;        /* 메인 배경 (아주 진한 네이비블랙) */
  --clr-bg-2:      #111318;        /* 카드 배경 */
  --clr-bg-3:      #1a1d25;        /* 강조 카드 배경 */
  --clr-border:    rgba(255,255,255,0.07);  /* 테두리 */
  --clr-text:      #e8eaf0;        /* 본문 텍스트 */
  --clr-text-2:    #8b92a8;        /* 보조 텍스트 */
  --clr-text-3:    #555e75;        /* 약한 텍스트 */

  /* 브랜드 컬러 (그라디언트) */
  --clr-primary:   #6366f1;        /* 인디고 */
  --clr-secondary: #8b5cf6;        /* 퍼플 */
  --clr-accent:    #06b6d4;        /* 사이언 */
  --clr-kakao:     #fee500;        /* 카카오 옐로우 */

  /* 그라디언트 */
  --grad-brand:    linear-gradient(135deg, var(--clr-primary), var(--clr-secondary));
  --grad-text:     linear-gradient(135deg, #818cf8 0%, #c084fc 50%, #38bdf8 100%);
  --grad-glow:     radial-gradient(ellipse 80% 60% at 50% 0%, rgba(99,102,241,0.18) 0%, transparent 70%);

  /* 타이포그래피 */
  --font-main:     'Pretendard', 'Inter', sans-serif;
  --fs-xs:         0.75rem;
  --fs-sm:         0.875rem;
  --fs-base:       1rem;
  --fs-lg:         1.125rem;
  --fs-xl:         1.25rem;
  --fs-2xl:        1.5rem;
  --fs-3xl:        2rem;
  --fs-4xl:        2.75rem;
  --fs-5xl:        3.5rem;

  /* 간격 */
  --sp-1: 0.25rem;   --sp-2: 0.5rem;    --sp-3: 0.75rem;
  --sp-4: 1rem;      --sp-5: 1.25rem;   --sp-6: 1.5rem;
  --sp-7: 1.75rem;   --sp-8: 2rem;      --sp-9: 2.25rem;
  --sp-10: 2.5rem;   --sp-12: 3rem;     --sp-16: 4rem;     --sp-24: 6rem;

  /* 테두리 반경 */
  --radius-sm:     6px;
  --radius-md:     12px;
  --radius-lg:     20px;
  --radius-xl:     28px;
  --radius-full:   9999px;

  /* 그림자 */
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:     0 4px 20px rgba(0,0,0,0.5);
  --shadow-glow:   0 0 40px rgba(99,102,241,0.25);

  /* 전환 */
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --duration:      0.25s;
}

/* ── 리셋 & 기본 ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-main);
  background: var(--clr-bg);
  color: var(--clr-text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* 한국어 어절(단어) 단위로만 줄바꿈 — 음절 중간 절단 방지 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font: inherit; border: none; background: none; }
ul { list-style: none; }

/* ── 레이아웃 헬퍼 ── */
.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

/* ── 텍스트 유틸리티 ── */
.gradient-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─────────────────────────────────────────
   버튼 컴포넌트
   ───────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  /* 기본 padding 추가 — 없으면 글자보다 버튼이 작아 보임 */
  padding: var(--sp-3) var(--sp-6);
  font-weight: 600;
  border-radius: var(--radius-full);
  transition: transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease),
              opacity var(--duration) var(--ease);
  white-space: nowrap;
  cursor: pointer;
}

.btn-sm  { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); }
.btn-lg  { padding: var(--sp-3) var(--sp-8); font-size: var(--fs-base); }

.btn-primary {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 4px 20px rgba(99,102,241,0.35);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(99,102,241,0.55);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  color: var(--clr-text);
  border: 1.5px solid var(--clr-border);
  background: rgba(255,255,255,0.04);
}
.btn-ghost:hover {
  border-color: var(--clr-primary);
  background: rgba(99,102,241,0.1);
  transform: translateY(-2px);
}

.btn-outline {
  color: var(--clr-primary);
  border: 1.5px solid var(--clr-primary);
  background: transparent;
}
.btn-outline:hover {
  background: rgba(99,102,241,0.12);
  transform: translateY(-2px);
}

.btn-white {
  background: #fff;
  color: var(--clr-bg);
  font-weight: 700;
}
.btn-white:hover { opacity: 0.9; }

/* ─────────────────────────────────────────
   섹션 공통
   ───────────────────────────────────────── */
section { padding: var(--sp-16) 0; }

.section-header { text-align: center; margin-bottom: var(--sp-12); }

.section-tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--clr-primary);
  background: rgba(99,102,241,0.12);
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: var(--radius-full);
  padding: var(--sp-1) var(--sp-3);
  margin-bottom: var(--sp-4);
}

.section-title {
  font-size: var(--fs-4xl);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-4);
}

.section-sub {
  font-size: var(--fs-lg);
  color: var(--clr-text-2);
  max-width: 540px;
  margin: 0 auto;
}

/* ─────────────────────────────────────────
   NAV
   ───────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(10, 11, 15, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--clr-border);
  transition: background var(--duration) var(--ease);
}
.nav.scrolled {
  background: rgba(10, 11, 15, 0.95);
}

.nav-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
  height: 64px;
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}

.nav-logo {
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--clr-text);
}
.logo-bracket { color: var(--clr-primary); }

.nav-links {
  display: flex;
  gap: var(--sp-8);
  margin-left: auto;
}
.nav-links a {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--clr-text-2);
  transition: color var(--duration) var(--ease);
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: var(--clr-primary);
  border-radius: 2px;
  transition: width var(--duration) var(--ease);
}
.nav-links a:hover { color: var(--clr-text); }
.nav-links a:hover::after { width: 100%; }

.nav-cta { margin-left: var(--sp-4); }

/* 모바일 토글 */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
  padding: var(--sp-2);
}
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--clr-text);
  border-radius: 2px;
  transition: all var(--duration) var(--ease);
}

/* 모바일 드로워 */
.nav-drawer {
  display: none;
  flex-direction: column;
  padding: var(--sp-4) var(--sp-6) var(--sp-6);
  border-top: 1px solid var(--clr-border);
  gap: var(--sp-1);
}
.nav-drawer.open { display: flex; }
.drawer-link {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-base);
  color: var(--clr-text-2);
  border-radius: var(--radius-md);
  transition: background var(--duration), color var(--duration);
}
.drawer-link:hover, .cta-link {
  background: rgba(99,102,241,0.1);
  color: var(--clr-primary);
}

/* ─────────────────────────────────────────
   HERO
   ───────────────────────────────────────── */
.hero {
  /*
   * 처음엔 min-height: 100svh → 뷰포트 전체를 채움
   * 스크롤 시작 → JS가 .hero--shrunk 클래스 추가
   * .hero--shrunk → min-height: 0 → 콘텐츠 높이만큼으로 즉시 축소
   * 결과: 아래 빈 여백이 사라지며 다음 섹션이 바로 붙음
   */
  min-height: 100svh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 100px 0 var(--sp-16);
  /* min-height 변화를 부드럽게 (0.35초) */
  transition: min-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 스크롤 시작 후 히어로가 콘텐츠 크기로 줄어든 상태 */
.hero--shrunk {
  min-height: 0 !important;
  align-items: flex-start !important;  /* center 정렬 해제 → 내용이 위로 붙음 */
  padding: 64px var(--sp-6) var(--sp-6) !important;  /* top: 네비바, bottom: 최소 여백 */
}
/* 스크롤 후 scroll 힌트 숨기기 */
.hero--shrunk .scroll-hint { display: none; }

/* 배경 글로우 (Glassmorphism 분위기) */
.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.glow-1 {
  width: 600px; height: 600px;
  background: rgba(99,102,241,0.2);
  top: -200px; left: -200px;
  animation: glowPulse 8s ease-in-out infinite;
}
.glow-2 {
  width: 500px; height: 500px;
  background: rgba(139,92,246,0.15);
  bottom: -100px; right: -100px;
  animation: glowPulse 8s ease-in-out infinite 4s;
}

/* 그리드 패턴 */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
  pointer-events: none;
}

@keyframes glowPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.7; transform: scale(1.1); }
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
  position: relative;
  z-index: 1;
}

/* HERO 텍스트 */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--clr-text-2);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  padding: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-6);
}
.badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: blink 2s ease-in-out infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.hero-title {
  font-size: var(--fs-5xl);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-6);
}

.hero-sub {
  font-size: var(--fs-lg);
  color: var(--clr-text-2);
  line-height: 1.8;
  margin-bottom: var(--sp-8);
}
.hero-sub strong { color: var(--clr-text); }

.hero-actions {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-8);
}

/* 기술 스택 (Robin Wieruch 패턴) */
.tech-stack {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.tech-label {
  font-size: var(--fs-sm);
  color: var(--clr-text-3);
  white-space: nowrap;
}
.tech-pills { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.tech-pill {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--clr-text-2);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  padding: 3px 10px;
}

/* 코드 카드 */
.hero-visual {
  position: relative;
}

.code-card {
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md), var(--shadow-glow);
  animation: floatCard 6s ease-in-out infinite;

  /* 3D 틸트를 위한 perspective 부모 설정 */
  transform-style: preserve-3d;
  transition:
    box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);

  /* 스캔라인 기준점 */
  position: relative;
}

/* 마우스 올리면 floatCard 일시 중지 + 글로우 강화 */
.code-card:hover {
  animation-play-state: paused;
  border-color: rgba(99,102,241,0.55);
  box-shadow:
    var(--shadow-md),
    0 0 60px rgba(99,102,241,0.4),
    0 0 120px rgba(139,92,246,0.15);
}

/* ── 스캔라인 (::before) ── */
.code-card::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -40px;           /* 시작 위치는 카드 위 */
  height: 40px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(99,102,241,0.08) 40%,
    rgba(99,102,241,0.18) 50%,
    rgba(99,102,241,0.08) 60%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

/* 호버 시 스캔라인 활성화 */
.code-card:hover::before {
  opacity: 1;
  animation: scanLine 1.8s linear infinite;
}

@keyframes scanLine {
  0%   { top: -40px; }
  100% { top: 100%; }
}

/* ── 코드 라인별 호버 하이라이트 ── */
.code-card:hover .code-body {
  background: rgba(99,102,241,0.03);
}

/* ── 코너 포인트 (sci-fi 느낌) ── */
.code-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.code-card:hover::after {
  opacity: 1;
  box-shadow:
    inset 2px 2px 0 rgba(99,102,241,0.6),   /* 좌상 */
    inset -2px -2px 0 rgba(139,92,246,0.6); /* 우하 */
}

@keyframes floatCard {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}


.code-card-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid var(--clr-border);
}
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot.red    { background: #ff5f57; }
.dot.yellow { background: #ffbd2e; }
.dot.green  { background: #28c840; }
.code-title {
  margin-left: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--clr-text-3);
  font-family: 'Courier New', monospace;
}

.code-body {
  padding: var(--sp-6);
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.82rem;
  line-height: 1.8;
  overflow-x: auto;
}
.c-keyword { color: #c792ea; }
.c-var     { color: #82aaff; }
.c-fn      { color: #82aaff; }
.c-prop    { color: #f07178; }
.c-str     { color: #c3e88d; }
.c-bool    { color: #ff9f00; }
.c-cmt     { color: #546e7a; font-style: italic; }

/* 플로팅 스탯 카드 */
.stat-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--clr-bg-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-md);
  animation: floatCard 6s ease-in-out infinite;
}
.stat-top    { top: -20px; right: -30px; animation-delay: 1s; }
.stat-bottom { bottom: -20px; left: -30px; animation-delay: 2s; }
.stat-icon   { font-size: 1.5rem; }
.stat-num    { font-size: var(--fs-xl); font-weight: 800; }
.stat-label  { font-size: var(--fs-xs); color: var(--clr-text-2); }

/* 스크롤 힌트 */
.scroll-hint {
  position: absolute;
  bottom: var(--sp-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  color: var(--clr-text-3);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  animation: scrollBounce 2s ease-in-out infinite;
}
.scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--clr-primary), transparent);
}
@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.8; }
  50%       { transform: translateX(-50%) translateY(8px); opacity: 0.4; }
}

/* ─────────────────────────────────────────
   STATS BAR (이랜서 스타일 신뢰 지표)
   ───────────────────────────────────────── */
.stats-bar {
  padding: var(--sp-12) 0;
  background: var(--clr-bg-2);
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
}

.stats-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
}

.stat-item { text-align: center; }
.stat-big {
  font-size: var(--fs-4xl);
  font-weight: 900;
  letter-spacing: -0.04em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-unit {
  font-size: var(--fs-xl);
}
.stat-desc {
  font-size: var(--fs-sm);
  color: var(--clr-text-2);
  margin-top: var(--sp-1);
}
.stat-divider {
  width: 1px;
  height: 48px;
  background: var(--clr-border);
}

/* ─────────────────────────────────────────
   SERVICES
   ───────────────────────────────────────── */
.services { background: var(--clr-bg); }

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
}

.service-card {
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  transition: transform var(--duration) var(--ease),
              border-color var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(99,102,241,0.4);
  box-shadow: 0 8px 32px rgba(99,102,241,0.15);
}

/* 대표 서비스 강조 */
.card-featured {
  background: var(--clr-bg-3);
  border-color: rgba(99,102,241,0.35);
  grid-row: span 1;
  position: relative;
  overflow: hidden;
}
.card-featured::before {
  content: '추천';
  position: absolute;
  top: var(--sp-4); right: var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--clr-primary);
  background: rgba(99,102,241,0.18);
  border: 1px solid rgba(99,102,241,0.3);
  border-radius: var(--radius-full);
  padding: 2px 10px;
}

.service-icon { font-size: 2.5rem; margin-bottom: var(--sp-4); }

.service-card h3 {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: var(--sp-3);
}

.service-card p {
  color: var(--clr-text-2);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
  line-height: 1.7;
}

.service-features {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}
.service-features li {
  font-size: var(--fs-sm);
  color: var(--clr-text-2);
}

.service-price {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--clr-text);
  margin-bottom: var(--sp-4);
}

.service-btn { width: 100%; justify-content: center; }

/* ─────────────────────────────────────────
   PORTFOLIO — 3D 원근 카드 덱 스택
   핵심 전략:
     · .deck-ring 부모에 rotateY 적용
       → 자식 .deck-card 는 모두 동일 기울기
     · 카드별 translateX/Z 오프셋으로만 깊이감 표현
     · 카드 사이 "틈"으로 뒷 카드가 자연스럽게 비쳐 보임
   ───────────────────────────────────────── */
.portfolio {
  /* 배경 없음 — 카드가 허공에 떠 있는 느낌 */
  background: transparent;
  /* 카드 덱이 섹션 밖으로 나가도 잘리지 않도록 */
  overflow: visible;
}


/* ── 전체 레이아웃: 좌(정보) + 우(덱) ── */
.deck-layout {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  margin-top: var(--sp-12);
  min-height: 460px;
  /* 기울어진 카드가 잘리지 않도록 overflow 허용 */
  overflow: visible;
}

/* ── 좌측: 프로젝트 정보 패널 ── */
.deck-info {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* 카테고리 배지 */
.deck-badge {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  background: rgba(99,102,241,0.15);
  color: var(--clr-primary);
  border: 1px solid rgba(99,102,241,0.35);
  border-radius: var(--radius-full);
  padding: 4px 14px;
  width: fit-content;
  transition: all 0.3s var(--ease);
}

/* 프로젝트 제목 */
.deck-title {
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: 1.25;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* 기술 스택 태그 */
.deck-tags {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-1);
}
.deck-tags span {
  font-size: var(--fs-xs);
  color: var(--clr-text-3);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  padding: 3px 10px;
}

/* 카운터 (현재/전체) */
.deck-counter {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: var(--sp-3);
  color: var(--clr-text-3);
  font-size: var(--fs-sm);
}
#deckNum {
  font-size: var(--fs-3xl);
  font-weight: 900;
  color: var(--clr-text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: opacity 0.2s ease;
}
.deck-counter-sep { font-size: var(--fs-xl); }

/* 다음 프로젝트 버튼 */
.deck-flip-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: fit-content;
  margin-top: var(--sp-4);
}

/* 문의하기 버튼 */
.deck-contact-btn { width: fit-content; }

/* ─────────────────────────────────────────
   3D 덱 씬 컨테이너
   ───────────────────────────────────────── */

/* 카드 덱 전체를 담는 원근감 컨테이너 */
.deck-scene {
  flex: 1;
  min-width: 0;
  /* 팬 스프레드: 카드가 위쪽으로 퍼지므로 충분한 높이 확보 */
  height: 400px;
  display: flex;
  /* 첫 번째 카드가 왼쪽에 고정되도록 */
  align-items: flex-start;
  justify-content: flex-start;
  overflow: visible;
  perspective: 1400px;
  perspective-origin: 40% 60%;
  cursor: pointer;
  outline: none;
}

/* ────────────────────────────────────────
   deck-ring: 모든 카드 공통 기울기 컨테이너
   ────────────────────────────────────────
   핵심 원리:
     · 이 컨테이너를 rotateX + rotateY로 기울임
     · 자식 카드들은 개별 rotation 없이
       translateX / translateY 오프셋만 가짐

     · 결과: 모든 카드가 완전히 동일한 각도,
       위치(X/Y)만 다르게 배치됨 = 스케치 원안
*/
.deck-ring {
  position: relative;
  /* 스택 전체 표시 영역 — 카드 1장(560px) + 나머지 5장 오프셋(5×80=400px) */
  width: 960px;
  height: 315px;
  /* 3D 자식 보존 */
  transform-style: preserve-3d;
  /*
    transform-origin: 0 50% → 회전 기준점을 왼쪽 중앙으로
    이로 인해 첫 카드(X=0)는 좌측에 그대로 고정되고
    오른쪽 카드들만 perspective에 의해 뒤로 물러나 보임
  */
  transform-origin: 0 50%;
  /* rotateX 제거: X축 회전 시 오른쪽 카드가 위로 떠 보이는 현상 발생
     rotateY만 유지하면 모든 카드가 동일한 Y에서 옆으로만 펼쳐짐 */
  transform: rotateY(-22deg);
  /* 왼쪽으로 당기기: perspective 기울기 후 시각적으로 오른쪽에 떠 보이는 것 보정 */
  margin-left: -80px;
}

/* ─────────────────────────────────────────
   개별 카드 공통 스타일
   · 고정 크기 560×315 (16:9)
   · shadow + border-radius로 카드감 표현
   · 위치만 data-pos 기반으로 변환
   ───────────────────────────────────────── */
.deck-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 560px;
  height: 315px;   /* 560 × 9/16 = 315 — 정확한 16:9 */
  border-radius: 10px;
  overflow: hidden;
  /* 카드 전환 부드러운 슬라이드 */
  transition:
    transform  0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter     0.55s ease,
    opacity    0.45s ease,
    box-shadow 0.55s ease;
  will-change: transform, filter;
  /* 기본 그림자 */
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}

/* 카드 이미지 — 카드를 가득 채움 */
.deck-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

/* ─────────────────────────────────────────
   카드 위치별 변환 (data-pos 기반)

   사용자 요청 그대로 구현:
     · 모든 카드: Y = 0 (동일한 Y 좌표)
     · 모든 카드: 동일한 크기, 동일한 기울기
     · X만 80px씩 증가: 스페이서처럼 나란히 배치
     · 3D 원근감은 deck-ring의 rotateY로만 표현
     · brightness: 뒤 카드일수록 어둡게 → 깊이감
   ───────────────────────────────────────── */

/* pos 0: 맨앞 (활성 카드) — 왼쪽 기준점에 고정 */
.deck-card[data-pos="0"] {
  z-index: 10;
  transform: translateX(0px);      /* Y=0, X=0 */
  filter: brightness(1);
  box-shadow: 0 28px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(99,102,241,0.3);
}

/* pos 1 — X만 80px 이동, Y는 0 유지 */
.deck-card[data-pos="1"] {
  z-index: 9;
  transform: translateX(80px);     /* Y=0, X=80 */
  filter: brightness(0.78);
}

/* pos 2 */
.deck-card[data-pos="2"] {
  z-index: 8;
  transform: translateX(160px);    /* Y=0, X=160 */
  filter: brightness(0.60);
}

/* pos 3 */
.deck-card[data-pos="3"] {
  z-index: 7;
  transform: translateX(240px);    /* Y=0, X=240 */
  filter: brightness(0.45);
}

/* pos 4 */
.deck-card[data-pos="4"] {
  z-index: 6;
  transform: translateX(320px);    /* Y=0, X=320 */
  filter: brightness(0.33);
}

/* pos 5: 맨뒤 */
.deck-card[data-pos="5"] {
  z-index: 5;
  transform: translateX(400px);    /* Y=0, X=400 */
  filter: brightness(0.22);
}

/* 맨앞 카드 호버: 살짝 앞으로 나오는 느낌 */
.deck-scene:hover .deck-card[data-pos="0"] {
  transform: translate(-4px, -2px);
  filter: brightness(1.08);
  box-shadow: 0 32px 90px rgba(0,0,0,0.75), 0 0 0 1px rgba(99,102,241,0.5), 0 0 40px rgba(99,102,241,0.2);
}

/* ─────────────────────────────────────────
   퇴장 애니메이션 — 제자리에서 서서히 사라짐
   ───────────────────────────────────────── */
/*
  동작:
  ① 맨앞 카드: 이동 없이 opacity만 0으로 (제자리 소멸)
  ② JS에서 즉시 맨뒤(pos 5)로 순간이동 + opacity 복원
  ③ 나머지 카드들: CSS transition으로 한 칸씩 앞으로 이동
*/
.deck-card--leaving {
  /* 이동 없이 제자리에서 사라짐 — 날아가는 연출 없음 */
  opacity: 0 !important;
  transition: opacity 0.35s ease-in !important;
  z-index: 20 !important;
}

/* ─── 모바일 반응형 (max-width: 900px) ─── */
@media (max-width: 900px) {
  .deck-layout {
    flex-direction: column;
    gap: var(--sp-10);
    min-height: unset;
  }
  .deck-info {
    flex: unset;
    width: 100%;
  }
  .deck-scene {
    height: 260px;
    width: 100%;
    justify-content: center;
    overflow: visible;
  }
  .deck-ring {
    /* 모바일: 크기 축소 + 기울기 약하게 */
    width: 340px;
    height: 220px;
    transform: rotateX(6deg) rotateY(-18deg) scale(0.55);
    transform-origin: top left;
  }
  /* 모바일: 카드 간격 좁혀서 화면 안에 맞춤 */
  .deck-card {
    width: 560px;
    height: 315px;
  }
  .deck-card[data-pos="1"] { transform: translate(50px, -30px); }
  .deck-card[data-pos="2"] { transform: translate(100px, -60px); }
  .deck-card[data-pos="3"] { transform: translate(150px, -90px); }
  .deck-card[data-pos="4"] { transform: translate(200px, -120px); }
  .deck-card[data-pos="5"] { transform: translate(250px, -150px); }
}

/* ── 전체 레이아웃: 좌(정보) + 우(덱) ── */
.deck-layout {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  margin-top: var(--sp-12);
  min-height: 420px;
}

/* ── 좌측: 프로젝트 정보 패널 ── */
.deck-info {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* 카테고리 배지 */
.deck-badge {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  background: rgba(99,102,241,0.15);
  color: var(--clr-primary);
  border: 1px solid rgba(99,102,241,0.35);
  border-radius: var(--radius-full);
  padding: 4px 14px;
  width: fit-content;
  transition: all 0.3s var(--ease);
}

/* 프로젝트 제목 */
.deck-title {
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: 1.25;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* 기술 스택 태그 */
.deck-tags {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-1);
}
.deck-tags span {
  font-size: var(--fs-xs);
  color: var(--clr-text-3);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  padding: 3px 10px;
}

/* 카운터 (현재/전체) */
.deck-counter {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: var(--sp-3);
  color: var(--clr-text-3);
  font-size: var(--fs-sm);
}
#deckNum {
  font-size: var(--fs-3xl);
  font-weight: 900;
  color: var(--clr-text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: opacity 0.2s ease;
}
.deck-counter-sep { font-size: var(--fs-xl); }

/* 다음 프로젝트 버튼 */
.deck-flip-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: fit-content;
  margin-top: var(--sp-4);
}

/* 문의하기 버튼 */
.deck-contact-btn {
  width: fit-content;
}

/* ── 우측: 카드 덱 래퍼 ── */

/* 탭 */
.portfolio-tabs {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-12);
  flex-wrap: wrap;
  justify-content: center;
}
.tab-btn {
  padding: var(--sp-2) var(--sp-6);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-text-2);
  background: transparent;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-full);
  transition: all var(--duration) var(--ease);
}
.tab-btn:hover {
  color: var(--clr-text);
  border-color: rgba(99,102,241,0.4);
}
.tab-btn.active {
  background: var(--grad-brand);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 16px rgba(99,102,241,0.3);
}

/* 포트폴리오 그리드 */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.portfolio-card {
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--duration) var(--ease),
              border-color var(--duration) var(--ease),
              opacity 0.3s var(--ease);
}
.portfolio-card:hover {
  transform: translateY(-4px);
  border-color: rgba(99,102,241,0.4);
}
.portfolio-card.hidden {
  display: none;
}

/* 썸네일 영역 */
.pf-image {
  position: relative;
  height: 180px;
  overflow: hidden;
}

/* ─────────────────────────────────────────
   PORTFOLIO — 가로 슬라이드 캐러셀
   ───────────────────────────────────────── */
.portfolio {
  background: var(--clr-bg-2);
  overflow: hidden;         /* 트랙 오버플로 숨김 */
}

/* ── 슬라이더 래퍼 (화살표 포지션 기준) ── */
.pf-carousel-wrap {
  position: relative;
  margin-top: var(--sp-8);
  padding: 0 var(--sp-12);  /* 화살표 공간 확보 */
}

/* ── 스크롤 가능한 트랙 ── */
.pf-track {
  display: flex;
  gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;  /* 한 카드씩 멈추기 */
  scroll-behavior: smooth;
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE/Edge */
  cursor: grab;
  padding: var(--sp-4) var(--sp-2) var(--sp-6);  /* 호버 스케일 여백 */
}
.pf-track::-webkit-scrollbar { display: none; }
.pf-track:active { cursor: grabbing; }

/* ── 개별 카드 ── */
.pf-card {
  flex: 0 0 280px;             /* 고정 너비: 컴팩트 */
  scroll-snap-align: start;
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    transform 0.3s var(--ease),
    border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
.pf-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(99,102,241,0.45);
  box-shadow: 0 12px 32px rgba(99,102,241,0.18);
}

/* ── 카드 비주얼 (상단 컬러 영역) ── */
.pf-card-visual {
  height: 160px;       /* 전체 높이의 약 60% */
  position: relative;
  overflow: hidden;
}

/* 기존 그라디언트 배경 재사용 */
.pf-img-1 { background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%); }
.pf-img-2 { background: linear-gradient(135deg, #14532d 0%, #166534 100%); }
.pf-img-3 { background: linear-gradient(135deg, #1e3a5f 0%, #1d4ed8 100%); }
.pf-img-4 { background: linear-gradient(135deg, #4a1942 0%, #7c3aed 100%); }
.pf-img-5 { background: linear-gradient(135deg, #422006 0%, #c2410c 100%); }
.pf-img-6 { background: linear-gradient(135deg, #052e16 0%, #065f46 100%); }

/* 각 카드 중앙 아이콘 텍스트 */
.pf-img-1::after { content: '🛒'; display:flex; align-items:center; justify-content:center; height:100%; font-size:2.8rem; }
.pf-img-2::after { content: '📊'; display:flex; align-items:center; justify-content:center; height:100%; font-size:2.8rem; }
.pf-img-3::after { content: '🤖'; display:flex; align-items:center; justify-content:center; height:100%; font-size:2.8rem; }
.pf-img-4::after { content: '🏠'; display:flex; align-items:center; justify-content:center; height:100%; font-size:2.8rem; }
.pf-img-5::after { content: '📦'; display:flex; align-items:center; justify-content:center; height:100%; font-size:2.8rem; }

/* ── 카드 배지 ── */
.pf-card-badge {
  position: absolute;
  top: var(--sp-3); left: var(--sp-3);
  z-index: 2;
  font-size: var(--fs-xs);
  font-weight: 700;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border-radius: var(--radius-full);
  padding: 3px 10px;
  backdrop-filter: blur(6px);
}

/* ── 호버 오버레이 ── */
.pf-card-hover {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.pf-card:hover .pf-card-hover { opacity: 1; }

/* ── 카드 하단 텍스트 ── */
.pf-card-meta {
  padding: var(--sp-4) var(--sp-5);
}
.pf-card-meta h3 {
  font-size: var(--fs-sm);
  font-weight: 700;
  margin-bottom: var(--sp-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-card-tags {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.pf-card-tags span {
  font-size: 0.68rem;
  color: var(--clr-text-3);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  padding: 2px 7px;
}

/* ── 퀀트 카드 전용 ── */
.pf-quant {
  position: relative;
  overflow: hidden;
}
.pf-quant::before {
  content: '📈';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -60%);
  font-size: 2.8rem;
  z-index: 1;
}
.quant-chart {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 55%;
  z-index: 0;
  opacity: 0.9;
}

/* ── 화살표 버튼 ── */
.pf-arrow {
  position: absolute;
  top: 50%; transform: translateY(-60%);  /* 비주얼 중앙 정렬 */
  z-index: 10;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--clr-bg-3);
  border: 1px solid var(--clr-border);
  color: var(--clr-text);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s var(--ease);
  cursor: pointer;
}
.pf-arrow:hover {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
  box-shadow: 0 4px 16px rgba(99,102,241,0.4);
}
.pf-arrow:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.pf-prev { left: 0; }
.pf-next { right: 0; }

/* ── 페이지 인디케이터 ── */
.pf-indicators {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-8);
  padding-bottom: var(--sp-4);
}
.pf-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--clr-border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.25s var(--ease);
}
.pf-dot.active {
  background: var(--clr-primary);
  width: 22px;
  border-radius: 4px;
}
.pf-dot:hover:not(.active) {
  background: var(--clr-text-3);
}
.pf-counter {
  margin-left: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--clr-text-3);
  font-variant-numeric: tabular-nums;
}


/* ─────────────────────────────────────────
   PROCESS
   ───────────────────────────────────────── */
.process { background: var(--clr-bg); }

.process-steps {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-16);
  flex-wrap: wrap;
  justify-content: center;
}

.process-step {
  flex: 1;
  min-width: 180px;
  max-width: 220px;
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  transition: transform var(--duration) var(--ease), border-color var(--duration);
}
.process-step:hover {
  transform: translateY(-4px);
  border-color: rgba(99,102,241,0.4);
}

.step-num {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--clr-primary);
  margin-bottom: var(--sp-3);
}
.step-icon { font-size: 2rem; margin-bottom: var(--sp-3); }

.process-step h3 {
  font-size: var(--fs-base);
  font-weight: 700;
  margin-bottom: var(--sp-2);
}
.process-step p {
  font-size: var(--fs-sm);
  color: var(--clr-text-2);
  line-height: 1.6;
  margin-bottom: var(--sp-4);
}
.step-duration {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--clr-primary);
  background: rgba(99,102,241,0.12);
  border-radius: var(--radius-full);
  padding: 2px 10px;
  display: inline-block;
}

.process-arrow {
  font-size: var(--fs-2xl);
  color: var(--clr-text-3);
  padding-top: 60px;
  flex-shrink: 0;
}

/* 결제 단계 가이드 */
.payment-guide {
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 600px;
  margin: 0 auto;
}
.payment-step {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--clr-text-2);
}
.pay-pct { font-weight: 700; color: var(--clr-text); }
.pay-bar {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.pay-fill {
  height: 100%;
  background: var(--grad-brand);
  border-radius: var(--radius-full);
  transition: width 1s var(--ease);
}

/* ─────────────────────────────────────────
   REVIEWS (Lee Robinson 텍스트 인용 강조)
   ───────────────────────────────────────── */
.reviews {
  background: var(--clr-bg-2);
}

.reviews-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--sp-6);
}

.review-card {
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  transition: transform var(--duration) var(--ease),
              border-color var(--duration);
}
.review-card:hover {
  transform: translateY(-4px);
  border-color: rgba(99,102,241,0.3);
}

/* 첫 번째 후기 크게 표시 */
.review-featured {
  grid-column: 1 / -1;
  background: var(--clr-bg-3);
  border-color: rgba(99,102,241,0.25);
}

.review-stars {
  color: #fbbf24;
  font-size: var(--fs-base);
  letter-spacing: 3px;
  margin-bottom: var(--sp-4);
}

.review-text {
  font-size: var(--fs-lg);
  line-height: 1.8;
  color: var(--clr-text);
  font-style: italic;
  margin-bottom: var(--sp-6);
  position: relative;
}
.review-text::before {
  content: '"';
  font-size: 4rem;
  line-height: 1;
  color: var(--clr-primary);
  opacity: 0.3;
  position: absolute;
  top: -10px; left: -10px;
  font-family: Georgia, serif;
}

.review-card:not(.review-featured) .review-text {
  font-size: var(--fs-base);
}

/* ═══════════════════════════════════════════
   반응형 — 태블릿 (≤ 900px)
   ═══════════════════════════════════════════ */
@media (max-width: 900px) {
  /* 섹션 여백 더 줄이기 */
  section { padding: var(--sp-12) 0; }
  section.hero { padding: 80px 0 var(--sp-12); }
  .section-header { margin-bottom: var(--sp-8); }

  /* 네비 */
  .nav-links { display: none; }
  .nav-cta   { display: none; }
  .nav-toggle { display: flex; }

  /* 히어로 1단: 텍스트 먼저, 코드카드 아래 */
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--sp-6);
  }
  .hero-actions { justify-content: center; }
  .tech-stack   { justify-content: center; }
  .hero-visual  { order: 1; }
  .stat-card    { display: none; }
  .hero-title   { font-size: var(--fs-4xl); }

  /* 서비스 1단 — gap을 명시해야 카드 간 여백 유지됨 */
  .services-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);   /* 카드 사이 24px 여백 (--sp-5는 미정의, 반드시 --sp-6 사용) */
  }

  /* 포트폴리오 카드덱 — 모바일 스케일 */
  .deck-layout {
    flex-direction: column;
    gap: var(--sp-6);
  }
  .deck-info { width: 100%; text-align: center; }
  .deck-flip-btn, .deck-contact-btn { margin: 0 auto; }
  .deck-scene {
    width: 100%;
    height: 220px;
    overflow: hidden;
  }
  .deck-ring {
    transform: rotateY(-12deg) scale(0.55);
    transform-origin: 0 50%;
    margin-left: -30px;
  }

  /* 프로세스 */
  .process-steps { gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }
  .process-arrow { display: none; }

  /* 리뷰 1단 */
  .reviews-grid { grid-template-columns: 1fr; }
  .review-featured { grid-column: 1; }

  /* CTA 섹션 */
  .contact-layout { grid-template-columns: 1fr; }
  .cta-title { font-size: var(--fs-3xl); }

  /* 글자 크기 */
  .section-title { font-size: var(--fs-3xl); }
}

/* ═══════════════════════════════════════════
   반응형 — 모바일 (≤ 600px)
   ═══════════════════════════════════════════ */
@media (max-width: 600px) {
  /* 섹션 여백 — 충분히 확보 */
  section { padding: var(--sp-12) 0; }
  section.hero {
    padding: 0;                /* 수직 여백을 hero-inner로 이전 */
    min-height: 100svh;
    align-items: stretch;    /* hero-inner를 section 높이만큼 늘림 */
  }
  /* hero-inner: 뷰포트 연장 + 코드 카드 visible 기준점 */
  .hero-inner {
    min-height: 100svh;
    padding-top: 72px;
    padding-bottom: var(--sp-12);
    display: flex;
    flex-direction: column;
    justify-content: center;   /* 텍스트 수직 중앙 */
    text-align: center;
    gap: var(--sp-6);
    position: relative;       /* 자식 절대 포지셔닝 기준점 (전역 규칙 중복 명시) */
    overflow: hidden;          /* 코드 카드 블러 갈라내기 */
  }
  /* 히어로 텍스트: 코드 배경 + 오버레이 위에 표시 */
  .hero-text {
    position: relative;
    z-index: 2;    /* hero-visual(z:0) + ::after 오버레이(z:1) 보다 위 */
  }
  .section-header { margin-bottom: var(--sp-6); }

  /* 히어로 글자 */
  .hero-title { font-size: var(--fs-3xl); }
  .hero-sub   { font-size: var(--fs-sm); }

  /* 히어로 액션 버튼 세로 정렬 */
  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
  }
  .hero-actions .btn { width: 100%; justify-content: center; max-width: 320px; }


  /* 코드 카드 → 모바일 배경으로 전환 */
  /* ─ Chrome bug fix: filter + position:absolute + overflow:hidden 조합 시 클리핑 무시됨 ─ */
  /* ─ 해결책: flex 컨테이너로 코드카드를 중앙 배치, position:absolute 없이 처리 ─ */
  .hero-visual {
    position: absolute;        /* hero-inner 기준으로 절대 포지셔닝 */
    inset: 0;                  /* 상하좌우 모두 0 → hero-inner 전체를 덮음 */
    z-index: 0;                /* 텍스트(z-index:2) 아래 */
    max-width: none;           /* .container 너비 제한 해제 */
    margin: 0;
    overflow: hidden;          /* 코드 카드 경계 클리핑 */
    pointer-events: none;      /* 클릭 통과 */
    /* flex로 코드카드 중앙 배치 — position:absolute 없이도 center 가능 */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 코드 카드: flex child로 중앙 배치 (position:absolute 제거 → Chrome 클리핑 버그 해소) */
  .hero-visual .code-card {
    flex-shrink: 0;             /* flex 압축 방지 */
    width: 110%;                /* 뷰포트보다 살짝 넓게 */
    filter: blur(0.75px);       /* 1.5px 절반 — 코드 라인 더 선명하게 */
    opacity: 1;
    animation: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
    transform: scale(1.5);      /* 1.5배 확대 — flex center 기준이라 중앙 유지 */
    transform-origin: center center;
  }

  /* pre 가로 오버플로 차단 */
  .hero-visual pre { overflow: hidden; }

  /* 가독성 오버레이: 코드(z:auto) 위, 히어로텍스트(z:2 parent ctx) 아래 */
  .hero-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 15, 0.18);  /* 18% — 코드 색상(82%) 살림 + 제목 가독 확보 */
    pointer-events: none;
    z-index: 1;                /* hero-visual 내부에서 코드카드 위 */
  }

  /* hero--shrunk 없음: 모바일에선 므니 동작 없음 */

  /* 포트폴리오 덱 */
  .deck-ring {
    transform: rotateY(-8deg) scale(0.45);
    transform-origin: 0 50%;
    margin-left: -20px;
  }
  .deck-scene { height: 190px; }

  /* 상담 폼 */
  .inquiry-form { padding: var(--sp-6) var(--sp-4); }
  /* 카카오 카드: 모바일에서도 기본 패딩 유지 (컴팩트 가로형) */


  /* 글자 크기 */
  .section-title { font-size: var(--fs-2xl); }
  .cta-title     { font-size: var(--fs-2xl); }

  /* 통계 */
  .stats-inner { gap: var(--sp-6); }
  .stat-divider { display: none; }

  /* 서비스 카드 */
  .service-card { padding: var(--sp-6); }

  /* 푸터 */
  .footer-inner { flex-direction: column; text-align: center; gap: var(--sp-4); }
  .scroll-top   { bottom: var(--sp-4); right: var(--sp-4); }
}

.review-footer {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.reviewer-avatar {
  font-size: 2rem;
  width: 48px; height: 48px;
  background: rgba(99,102,241,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.reviewer-name { font-weight: 700; margin-bottom: 2px; }
.reviewer-biz  { font-size: var(--fs-sm); color: var(--clr-text-2); }

/* ─────────────────────────────────────────
   CTA SECTION
   ───────────────────────────────────────── */
.cta-section {
  background: var(--clr-bg);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta-glow {
  position: absolute;
  width: 700px; height: 400px;
  background: var(--grad-glow);
  top: 0; left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.cta-inner {
  position: relative;
  z-index: 1;
}

.cta-title {
  font-size: var(--fs-4xl);
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-4);
}
/* 모바일 전용 줄바꿈 제어: 데스크톱에서는 숨김, 모바일에서만 보임 */
br.br-m { display: none; }
@media (max-width: 720px) {
  br.br-m { display: inline; }
}

.cta-sub {
  font-size: var(--fs-lg);
  color: var(--clr-text-2);
  margin-bottom: var(--sp-12);
  line-height: 1.8;
}

/* ── 카카오 + 폼 2단 레이아웃 ── */
.contact-layout {
  display: grid;
  /* 카카오 카드(1fr) | 상담 폼(1.6fr) */
  grid-template-columns: 1fr 1.6fr;
  gap: var(--sp-6);
  max-width: 860px;
  margin: 0 auto var(--sp-10);
  text-align: left;
}

/* 카카오톡 오픈채팅 카드 — 컴팩트 노란 테두리 스타일 */
.kakao-cta-card {
  display: flex;
  flex-direction: row;          /* 아이콘·텍스트·화살표 가로 배치 */
  align-items: center;
  align-self: start;            /* 그리드에서 폼 높이에 안 맞춰지도록 */
  gap: var(--sp-4);
  background: var(--clr-bg-2);  /* 다크 배경 */
  color: #FEE500;               /* 카카오 노란색 */
  border: 2px solid #FEE500;    /* 노란 테두리 */
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-6);
  text-align: left;
  text-decoration: none;
  transition: background var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease),
              transform var(--duration) var(--ease);
}
.kakao-cta-card:hover {
  background: rgba(254, 229, 0, 0.08);
  box-shadow: 0 4px 24px rgba(254, 229, 0, 0.2);
  transform: translateY(-2px);
}

/* 아이콘: SVG fill을 노란색으로 */
.kakao-cta-icon {
  flex-shrink: 0;
  color: #FEE500;
}

/* 텍스트 영역: 아이콘 우측으로 */
.kakao-cta-body { flex: 1; }

.kakao-cta-title {
  font-weight: 700;
  font-size: var(--fs-base);
  margin-bottom: 2px;
  color: #FEE500;
}
.kakao-cta-desc {
  font-size: var(--fs-xs);
  color: rgba(254, 229, 0, 0.65);  /* 반투명 노란색 */
}
.kakao-cta-arrow {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: #FEE500;
  margin-top: 0;                   /* 가로 배치에서 상단 여백 불필요 */
  flex-shrink: 0;
}

/* ── 상담 문의 폼 ── */
.inquiry-form {
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl, 20px);
  padding: var(--sp-7) var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.inquiry-form-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: var(--sp-1);
}

/* 입력 그룹 */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.form-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-text-2);
}
.form-required { color: var(--clr-primary); }

/* 공통 입력 스타일 */
.form-input,
.form-textarea {
  width: 100%;
  background: var(--clr-bg);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md, 10px);
  padding: var(--sp-3) var(--sp-4);
  color: var(--clr-text);
  font-size: var(--fs-sm);
  font-family: inherit;
  transition: border-color var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
  resize: none;
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--clr-text-3); }
.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}

/* 제출 버튼 */
.form-submit-btn {
  width: 100%;
  justify-content: center;
  font-size: var(--fs-base);
  margin-top: var(--sp-1);
}

/* 제출 성공 메시지 */
.form-success {
  text-align: center;
  font-size: var(--fs-sm);
  color: #4ade80;
  padding: var(--sp-3);
  background: rgba(74,222,128,0.1);
  border-radius: var(--radius-md);
}

/* 모바일: 1단으로 전환 */
@media (max-width: 720px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-8);   /* 모바일 세로 스택 시 카카오카드↕폼박스 간격 32px */
  }
}

/* ─────────────────────────────────────────
   전화번호 분할 입력 (010-XXXX-XXXX)
   ───────────────────────────────────────── */

/* 세 조각을 한 줄에 배치하는 컨테이너 */
.phone-input-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);       /* 8px 간격 */
}

/* "010" 고정 텍스트 — 입력값처럼 보이도록 스타일 통일 */
.phone-prefix {
  background: var(--clr-bg);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md, 10px);
  padding: var(--sp-3) var(--sp-3);
  color: var(--clr-text-3);     /* 회색으로 구분: 수정 불가임을 암시 */
  font-size: var(--fs-sm);
  font-family: inherit;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
  display: flex;
  align-items: center;
  height: 44px;                 /* form-input 높이와 맞춤 */
  box-sizing: border-box;
}

/* 대시 구분자 */
.phone-dash {
  color: var(--clr-text-3);
  font-size: var(--fs-base);
  font-weight: 600;
  flex-shrink: 0;
}

/* 각 숫자 세그먼트 입력창 */
.phone-seg {
  /*
   * flex:1 을 쓰면 모바일에서 중간 칸이 화면 밖으로 넘침
   * → clamp()로 화면 너비 비례 고정폭 사용
   *   min: 60px (아주 좁은 기기), preferred: 22vw, max: 90px (데스크톱)
   */
  flex: 0 0 clamp(60px, 22vw, 90px);
  min-width: 0;
  background: var(--clr-bg);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md, 10px);
  padding: var(--sp-3) var(--sp-2);
  color: var(--clr-text);
  font-size: var(--fs-sm);
  font-family: inherit;
  text-align: center;
  transition: border-color var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
}
.phone-seg::placeholder { color: var(--clr-text-3); }
.phone-seg:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}

/* ─────────────────────────────────────────
   개인정보 수집·이용 동의
   ───────────────────────────────────────── */

/* 체크박스 + 텍스트를 한 줄로 */
.privacy-agree-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--clr-text-2);
}

/* 브라우저 기본 체크박스 숨기고 커스텀 적용 */
.privacy-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--clr-border);
  border-radius: 4px;
  background: var(--clr-bg);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: border-color var(--duration), background var(--duration);
}
/* 체크됐을 때: 보라 배경 + 흰 체크 표시 */
.privacy-checkbox:checked {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
}
.privacy-checkbox:checked::after {
  content: '';
  position: absolute;
  top: 2px; left: 5px;
  width: 5px; height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.privacy-checkbox:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.2);
}

/* 개인정보 안내 소문자 */
.privacy-notice {
  font-size: var(--fs-xs);
  color: var(--clr-text-3);
  line-height: 1.6;
  margin-top: var(--sp-1);
  padding-left: 26px;           /* 체크박스 너비에 맞춰 들여쓰기 */
}

.cta-notice {
  font-size: var(--fs-sm);
  color: var(--clr-text-3);
  line-height: 2;
}
.cta-notice strong { color: var(--clr-text-2); }


/* ─────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────── */
.footer {
  background: var(--clr-bg-2);
  border-top: 1px solid var(--clr-border);
  padding: var(--sp-8) 0;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.footer-logo {
  font-size: var(--fs-lg);
  font-weight: 800;
}
.footer-links {
  display: flex;
  gap: var(--sp-6);
}
.footer-links a {
  font-size: var(--fs-sm);
  color: var(--clr-text-2);
  transition: color var(--duration);
}
.footer-links a:hover { color: var(--clr-primary); }
.footer-copy {
  font-size: var(--fs-xs);
  color: var(--clr-text-3);
}

/* ─────────────────────────────────────────
   스크롤 탑 버튼
   ───────────────────────────────────────── */
.scroll-top {
  position: fixed;
  bottom: var(--sp-8);
  right: var(--sp-8);
  width: 44px; height: 44px;
  background: var(--grad-brand);
  color: #fff;
  font-size: var(--fs-base);
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(99,102,241,0.4);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
  z-index: 999;
  cursor: pointer;
}
.scroll-top.visible {
  opacity: 1;
  transform: translateY(0);
}
.scroll-top:hover { transform: translateY(-2px); }

/* ─── 초협소 폰 (320~380px: 갤럭시 A·구형 아이폰 SE) ─── */
@media (max-width: 380px) {
  /* 컨테이너 여백 최소화 */
  .container { padding: 0 var(--sp-4); }

  /* 히어로 폰트 한 단계 더 축소 */
  .hero-title { font-size: var(--fs-2xl); }
  .hero-sub   { font-size: var(--fs-xs); }

  /* 히어로 패딩 감소 */
  section.hero { padding: 64px 0 var(--sp-8); }

  /* 버튼 패딩 줄여 협소 화면에서 잘림 방지 */
  .btn { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); }
  .hero-actions .btn { max-width: 280px; }

  /* 코드 카드 최대폭 화면에 맞게 */
  .hero-visual { max-width: 100%; }

  /* 서비스 카드 패딩 최소화 */
  .service-card { padding: var(--sp-6) var(--sp-4); }

  /* 폼 패딩 최소화 */
  .inquiry-form { padding: var(--sp-4) var(--sp-3); }
}