/* ══════════════════════════════════════════════════════
   KONIVO Home — DESIGN-stripe.md 완전 준수
   Tokens: primary #533afd | ink #0d253d | canvas #fff
   Typography: Noto Sans KR (한글) + Inter (영문) — 통일 고딕
   Mesh: cream→sherbet→lavender→indigo→ruby (DESIGN-stripe.md 스펙)
   ══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&family=Inter:wght@400;500;600;700&display=swap');

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-feature-settings: "ss01"; }
body {
  font-family: 'Noto Sans KR', 'Inter', 'SF Pro Display', system-ui, -apple-system, sans-serif;
  font-size: 15px; font-weight: 400; line-height: 1.6;
  color: #0d253d; background: #ffffff;
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Layout ── */
.container    { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
.container-sm { max-width: 680px;  margin: 0 auto; }
.divider      { height: 1px; background: #e3e8ee; }

/* ── Section base ── */
section { padding: 96px 32px; }

/* ── Section header ── */
.section-header { margin-bottom: 64px; }

/* pill-tag-soft eyebrow */
.section-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 400; letter-spacing: 0.1px;
  text-transform: uppercase;
  color: #4434d4;        /* primary-deep */
  background: #b9b9f9;   /* primary-sub */
  border-radius: 9999px;
  padding: 4px 10px;
  margin-bottom: 16px;
}

.section-title {
  font-size: clamp(28px, 3.6vw, 42px); font-weight: 700;
  color: #0d253d; letter-spacing: -0.84px; line-height: 1.08;
  margin-bottom: 16px;
}
/* primary color accent — 컬러 강조 (italic 없음) */
.section-title em {
  font-style: normal;
  font-weight: 700;
  color: #533afd;
}
/* primary color accent */
.section-title strong { font-style: normal; font-weight: 700; color: #533afd; }

.section-sub {
  font-size: 16px; font-weight: 400; color: #64748d;
  line-height: 1.7; max-width: 520px;
}
.section-sub.center { margin: 0 auto; text-align: center; }

/* ═══════════════════════════════════════════════════
   HERO v2 — 5:5 Split · Pill CTA · 3D Dashboard Mockup
   Global DS: Pretendard · Blurple #635BFF · #0A2540
   ═══════════════════════════════════════════════════ */

/* ── 폰트 업데이트: home.css는 shared.css Pretendard 상속 ── */
body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
}

/* ── Hero 컨테이너 ── */
.hero {
  position: relative; overflow: hidden;
  background: #ffffff;
  padding: 0 32px;
  min-height: 100vh;
  display: flex; align-items: center;
}
/* ── 모바일: hero min-height 해제 (섹션 여백 방지) ── */
@media (max-width: 960px) {
  .hero { min-height: auto !important; }
  .hero-inner {
    grid-template-columns: 1fr !important;
    padding: 100px 0 72px !important;
  }
  .hero-right {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
  .hero-aurora {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important; height: 0 !important;
  }
}
.hero::before { display: none; }
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(108deg, #ffffff 36%, transparent 64%);
}

/* ── Aurora blobs ── */
.hero-aurora {
  position: absolute;
  top: 0; right: 0;
  width: 75%; height: 100%;
  z-index: 0; pointer-events: none;
  overflow: hidden;
}
.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(52px);
  will-change: transform, opacity;
  mix-blend-mode: normal;
}
/* Blob 1: 쿨 라벤더 */
.aurora-blob-1 {
  width: 560px; height: 420px;
  top: -12%; left: -5%;
  background: radial-gradient(ellipse at center, rgba(235,233,255,0.90) 0%, transparent 70%);
  animation: aurora1 14s ease-in-out infinite;
}
/* Blob 2: Blurple soft */
.aurora-blob-2 {
  width: 440px; height: 380px;
  top: -8%; left: 22%;
  background: radial-gradient(ellipse at center, rgba(99,91,255,0.18) 0%, transparent 68%);
  animation: aurora2 18s ease-in-out infinite;
}
/* Blob 3: 라이트 퍼플 */
.aurora-blob-3 {
  width: 500px; height: 450px;
  top: -15%; left: 40%;
  background: radial-gradient(ellipse at center, rgba(199,196,255,0.60) 0%, transparent 65%);
  animation: aurora3 22s ease-in-out infinite;
}
/* Blob 4: Blurple mid */
.aurora-blob-4 {
  width: 460px; height: 400px;
  top: 0%; left: 58%;
  background: radial-gradient(ellipse at center, rgba(99,91,255,0.45) 0%, transparent 60%);
  animation: aurora4 16s ease-in-out infinite;
}
/* Blob 5: 루비 accent */
.aurora-blob-5 {
  width: 360px; height: 320px;
  top: -5%; left: 73%;
  background: radial-gradient(ellipse at center, rgba(234,34,97,0.30) 0%, transparent 58%);
  animation: aurora5 20s ease-in-out infinite;
}
/* Blob 6: 마젠타 */
.aurora-blob-6 {
  width: 320px; height: 280px;
  top: 20%; left: 63%;
  background: radial-gradient(ellipse at center, rgba(160,100,255,0.22) 0%, transparent 60%);
  animation: aurora6 24s ease-in-out infinite;
}

@keyframes aurora1 {
  0%,100% { transform: translate(0,0) scale(1);       opacity: 1; }
  25%      { transform: translate(30px,20px) scale(1.08); opacity: .85; }
  50%      { transform: translate(10px,40px) scale(.96);  opacity: 1; }
  75%      { transform: translate(-20px,15px) scale(1.05);opacity: .90; }
}
@keyframes aurora2 {
  0%,100% { transform: translate(0,0) scale(1);        opacity: 1; }
  30%      { transform: translate(-25px,35px) scale(1.12); opacity: .80; }
  60%      { transform: translate(40px,10px) scale(.94);   opacity: .95; }
}
@keyframes aurora3 {
  0%,100% { transform: translate(0,0) scale(1);        opacity: 1; }
  20%      { transform: translate(20px,-30px) scale(1.10); opacity: .88; }
  50%      { transform: translate(-30px,20px) scale(1.04);  opacity: 1; }
  80%      { transform: translate(15px,35px) scale(.96);   opacity: .90; }
}
@keyframes aurora4 {
  0%,100% { transform: translate(0,0) scale(1);         opacity: 1; }
  35%      { transform: translate(-35px,-20px) scale(1.15); opacity: .82; }
  65%      { transform: translate(25px,30px) scale(.92);    opacity: .95; }
}
@keyframes aurora5 {
  0%,100% { transform: translate(0,0) scale(1);         opacity: 1; }
  40%      { transform: translate(-20px,40px) scale(1.08);  opacity: .78; }
  70%      { transform: translate(30px,-15px) scale(1.02);  opacity: .92; }
}
@keyframes aurora6 {
  0%,100% { transform: translate(0,0) scale(1);        opacity: .90; }
  30%      { transform: translate(35px,-25px) scale(1.18); opacity: .70; }
  60%      { transform: translate(-15px,35px) scale(.88);  opacity: .95; }
}

@media (prefers-reduced-motion: reduce) {
  .aurora-blob { animation: none !important; }
}

.hero > * { position: relative; z-index: 2; }
.hero-aurora { position: absolute !important; z-index: 0 !important; }

/* ── 5:5 grid 레이아웃 ── */
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  width: 100%; max-width: 1160px;
  margin: 0 auto;
  padding: 120px 0 104px;
  position: relative; z-index: 2;
}

/* ── 좌측 텍스트 ── */
.hero-left { max-width: 540px; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 500; letter-spacing: -.01em;
  color: #425466;
  margin-bottom: 28px;
}
.hero-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #635BFF; flex-shrink: 0;
}

.hero-h1 {
  font-size: clamp(38px, 5vw, 58px);
  font-weight: 800; line-height: 1.06; letter-spacing: -.04em;
  color: #0A2540; margin: 0 0 22px;
}
.hero-h1 em {
  font-style: normal; font-weight: 800;
  color: #635BFF;
}

.hero-sub {
  font-size: 16px; font-weight: 400;
  color: #425466; line-height: 1.75;
  margin: 0 0 28px; letter-spacing: -.01em;
}

/* 신뢰 항목 */
.hero-trust {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.hero-trust-item {
  font-size: 13px; font-weight: 500; color: #425466;
  display: flex; align-items: center; gap: 7px; letter-spacing: -.01em;
}
.hero-trust-item::before {
  content: '';
  width: 16px; height: 16px; border-radius: 50%;
  background: #ebe9ff; flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 5l2 2 4-4' stroke='%23635BFF' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 10px;
}

/* CTA 영역 */
.hero-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 32px;
}

/* ── Pill CTA 버튼 — 화살표 우측 이동 애니메이션 ── */
.btn-hero-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 28px; border-radius: 9999px;
  font-size: 15px; font-weight: 600; font-family: inherit;
  letter-spacing: -.02em;
  background: #635BFF; color: #ffffff;
  text-decoration: none; border: none; cursor: pointer;
  transition: background .18s, box-shadow .18s, transform .12s;
  box-shadow: 0 4px 18px rgba(99,91,255,.36);
}
.btn-hero-pill:hover {
  background: #4f48d4;
  box-shadow: 0 8px 28px rgba(99,91,255,.44);
  transform: translateY(-1px);
}
.btn-hero-pill:active { background: #3a35a8; transform: translateY(0); }

/* 화살표 아이콘 — hover 시 우측으로 4px 이동 */
.btn-hero-arrow {
  display: inline-block;
  font-size: 16px; line-height: 1;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
  will-change: transform;
}
.btn-hero-pill:hover .btn-hero-arrow {
  transform: translateX(4px);
}

/* 보조 ghost 버튼 */
.btn-hero-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 22px; border-radius: 9999px;
  font-size: 15px; font-weight: 500; font-family: inherit;
  letter-spacing: -.01em;
  border: 1.5px solid #E3E8EF; color: #425466;
  text-decoration: none; background: #fff; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.btn-hero-ghost:hover {
  border-color: #635BFF; color: #635BFF;
  background: rgba(99,91,255,.04);
}
.btn-hero-ghost::after { content: ' →'; }

/* 채널 pill 목록 */
.hero-channels-inline {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.hero-channels-label {
  font-size: 11px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: #aabdd4;
  white-space: nowrap;
}
.hero-channel-pill {
  font-size: 12px; font-weight: 500; color: #425466;
  background: #F6F9FC; border: 1px solid #E3E8EF;
  border-radius: 9999px;
  padding: 4px 12px; letter-spacing: -.01em;
}

/* ═══════════════════════════════════════════════════
   HERO RIGHT — 3D 카드 스태크 (대시보드 목업)
   CSS perspective + translateZ / rotate로 공중 부양감
   ═══════════════════════════════════════════════════ */
.hero-right {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 0;
}

/* 3D 퍼스펙티브 씬 컨테이너 */
.hero-card-scene {
  position: relative;
  width: 100%;
  max-width: 460px;
  height: 520px;
  perspective: 1000px;
}

/* ── 공통 카드 스타일 ── */
.hc {
  background: #ffffff;
  border: 1px solid #E3E8EF;
  border-radius: 16px;
  position: absolute;
  box-shadow:
    0 2px 8px rgba(10,37,64,.05),
    0 8px 32px rgba(10,37,64,.08),
    0 1px 4px rgba(10,37,64,.04);
}

/* ── 메인 카드: 월간 매출 현황 ── */
.hc--main {
  top: 32px; left: 0; right: 0;
  padding: 24px 24px 20px;
  z-index: 1;
  transform: rotateX(2deg) rotateY(-3deg);
  transform-origin: center top;
  transition: transform .4s ease, box-shadow .4s ease;
  animation: floatMain 6s ease-in-out infinite;
}
.hc--main:hover {
  transform: rotateX(0deg) rotateY(0deg) translateY(-4px);
  box-shadow: 0 20px 60px rgba(10,37,64,.14), 0 4px 16px rgba(10,37,64,.06);
}

/* 카드 헤더 행 */
.hc-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.hc-header-left {
  display: flex; align-items: center; gap: 7px;
}
.hc-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.hc-dot--green { background: #10b981; }
.hc-dot--blue  { background: #635BFF; }

/* 카드 공통 레이블 */
.hc-label {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: #425466;
}

/* 금액 표시 */
.hc-amount {
  font-size: 30px; font-weight: 800; color: #0A2540;
  letter-spacing: -.05em; line-height: 1;
  margin-bottom: 4px; font-feature-settings: "tnum";
}
.hc-period {
  font-size: 12px; color: #425466; margin-bottom: 18px;
}

/* 채널별 바 차트 */
.hc-chart { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.hc-chart-row {
  display: grid;
  grid-template-columns: 110px 1fr 54px;
  align-items: center; gap: 8px;
}
.hc-chart-label {
  font-size: 11px; color: #425466; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.hc-chart-bar-wrap {
  height: 5px; background: #F6F9FC; border-radius: 9999px; overflow: hidden;
}
.hc-chart-bar {
  height: 100%; border-radius: 9999px;
  background: #635BFF;
  transition: width .6s cubic-bezier(.4,0,.2,1);
}
.hc-chart-bar--b { background: #0A2540; }
.hc-chart-bar--c { background: #10b981; }
.hc-chart-val {
  font-size: 11px; font-weight: 700; color: #0A2540;
  text-align: right; font-feature-settings: "tnum";
}

/* 목표 달성률 */
.hc-goal { border-top: 1px solid #E3E8EF; padding-top: 14px; }
.hc-goal-row {
  display: flex; justify-content: space-between;
  margin-bottom: 7px;
}
.hc-goal-label { font-size: 11px; color: #425466; }
.hc-goal-pct   { font-size: 12px; font-weight: 700; color: #635BFF; }
.hc-goal-track {
  height: 5px; background: #F6F9FC; border-radius: 9999px; overflow: hidden;
}
.hc-goal-fill {
  height: 100%; border-radius: 9999px;
  background: linear-gradient(90deg, #635BFF 0%, #a78bfa 100%);
  transition: width .8s cubic-bezier(.4,0,.2,1);
}

/* 배지 */
.hc-badge {
  font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 9999px;
  letter-spacing: -.01em;
}
.hc-badge--up { background: #d1fae5; color: #065f46; }
.hc-badge--ok { background: #ebe9ff; color: #635BFF; }

/* ── 상태 카드: IoR / 통관 현황 ── */
.hc--status {
  bottom: 0; left: 0; right: 64px;
  padding: 18px 20px;
  z-index: 3;
  transform: rotateX(-1.5deg) rotateY(2deg) translateY(0px);
  transform-origin: center bottom;
  box-shadow:
    0 -2px 8px rgba(10,37,64,.04),
    0 16px 40px rgba(10,37,64,.12),
    0 2px 8px rgba(10,37,64,.05);
  animation: floatStatus 7s ease-in-out infinite;
  animation-delay: -2s;
}
.hc--status:hover {
  transform: rotateX(0deg) rotateY(0deg) translateY(-3px);
  box-shadow: 0 20px 60px rgba(10,37,64,.16), 0 4px 16px rgba(10,37,64,.06);
}

.hc-status-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
/* 실시간 점멸 점 */
.hc-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16,185,129,.4);
  animation: livePulse 2s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.4); }
  70%  { box-shadow: 0 0 0 7px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

.hc-status-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.hc-status-item {
  display: flex; align-items: flex-start; gap: 9px;
}
.hc-status-icon {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.hc-status-icon--green  { background: #d1fae5; color: #065f46; }
.hc-status-icon--blue   { background: #ebe9ff; color: #635BFF; }
.hc-status-icon--purple { background: #f3e8ff; color: #7c3aed; }
.hc-status-icon--orange { background: #fff7ed; color: #c2410c; }

.hc-status-title { font-size: 12px; font-weight: 600; color: #0A2540; letter-spacing: -.01em; }
.hc-status-sub   { font-size: 11px; color: #425466; margin-top: 1px; font-feature-settings: "tnum"; }

/* ── 재고 미니 카드 ── */
.hc--inventory {
  top: 12px; right: -16px;
  width: 188px;
  padding: 16px 18px;
  z-index: 4;
  transform: rotateX(1.5deg) rotateY(3deg) translateZ(12px);
  box-shadow:
    0 4px 16px rgba(10,37,64,.10),
    0 12px 36px rgba(10,37,64,.12);
  animation: floatInventory 5.5s ease-in-out infinite;
  animation-delay: -1s;
}
.hc--inventory:hover {
  transform: rotateX(0deg) rotateY(0deg) translateZ(16px) translateY(-3px);
  box-shadow: 0 16px 48px rgba(10,37,64,.16), 0 4px 12px rgba(10,37,64,.08);
}

.hc-inv-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.hc-inv-count {
  font-size: 28px; font-weight: 800; color: #0A2540;
  letter-spacing: -.04em; line-height: 1;
  font-feature-settings: "tnum";
}
.hc-inv-unit { font-size: 14px; font-weight: 600; margin-left: 2px; }
.hc-inv-sub  { font-size: 11px; color: #425466; margin-top: 3px; margin-bottom: 12px; }
.hc-inv-bar-wrap { display: flex; align-items: center; gap: 8px; }
.hc-inv-bar {
  flex: 1; height: 4px; background: #F6F9FC;
  border-radius: 9999px; overflow: hidden;
}
.hc-inv-fill {
  height: 100%; border-radius: 9999px;
  background: linear-gradient(90deg, #635BFF 0%, #a78bfa 100%);
  transition: width .8s ease;
}
.hc-inv-pct { font-size: 10px; font-weight: 600; color: #425466; white-space: nowrap; }

/* ── KPI 마이크로 카드 ── */
.hc--kpi {
  top: 50%; right: -28px;
  transform: translateY(-50%) rotateY(4deg) rotateX(-1deg) translateZ(20px);
  width: 140px;
  padding: 14px 16px;
  z-index: 5;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow:
    0 4px 20px rgba(10,37,64,.12),
    0 1px 4px rgba(10,37,64,.06);
  animation: floatKPI 4.8s ease-in-out infinite;
  animation-delay: -.5s;
}
.hc--kpi:hover {
  transform: translateY(-50%) rotateY(0deg) rotateX(0deg) translateZ(24px) translateX(-4px);
  box-shadow: 0 16px 48px rgba(10,37,64,.16), 0 4px 12px rgba(10,37,64,.08);
}

.hc-kpi-item { display: flex; flex-direction: column; gap: 2px; }
.hc-kpi-val {
  font-size: 22px; font-weight: 800; color: #0A2540;
  letter-spacing: -.04em; line-height: 1;
  font-feature-settings: "tnum";
}
.hc-kpi-val--green { color: #10b981; }
.hc-kpi-label { font-size: 10px; font-weight: 600; color: #425466; letter-spacing: .02em; }
.hc-kpi-divider {
  height: 1px; background: #E3E8EF;
}

/* ── 카드 부유 애니메이션 (각기 다른 주기) ── */
@keyframes floatMain {
  0%,100% { transform: rotateX(2deg) rotateY(-3deg) translateY(0px); }
  50%      { transform: rotateX(2deg) rotateY(-3deg) translateY(-8px); }
}
@keyframes floatStatus {
  0%,100% { transform: rotateX(-1.5deg) rotateY(2deg) translateY(0px); }
  50%      { transform: rotateX(-1.5deg) rotateY(2deg) translateY(-6px); }
}
@keyframes floatInventory {
  0%,100% { transform: rotateX(1.5deg) rotateY(3deg) translateZ(12px) translateY(0px); }
  50%      { transform: rotateX(1.5deg) rotateY(3deg) translateZ(12px) translateY(-7px); }
}
@keyframes floatKPI {
  0%,100% { transform: translateY(-50%) rotateY(4deg) rotateX(-1deg) translateZ(20px); }
  50%      { transform: translateY(calc(-50% - 6px)) rotateY(4deg) rotateX(-1deg) translateZ(20px); }
}

/* prefers-reduced-motion: 부유 애니메이션 비활성 */
@media (prefers-reduced-motion: reduce) {
  .hc--main, .hc--status, .hc--inventory, .hc--kpi { animation: none !important; }
}

/* ═══════════════════════════════════════
   STATS ROW — body-tabular tnum
═══════════════════════════════════════ */
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #e3e8ee; border-bottom: 1px solid #e3e8ee;
}
.stat-cell {
  padding: 40px 24px; text-align: center;
  border-right: 1px solid #e3e8ee;
  transition: background .15s;
}
.stat-cell:last-child { border-right: none; }
.stat-cell:hover { background: #f6f9fc; }

.stat-num  {
  font-size: 40px; font-weight: 700; color: #0d253d;
  letter-spacing: -1.4px; line-height: 1;
  font-feature-settings: "tnum";
  margin-bottom: 8px;
}
.stat-unit { color: #533afd; }
.stat-label {
  font-size: 13px; font-weight: 400; color: #64748d;
  letter-spacing: 0; line-height: 1.5;
}

/* ═══════════════════════════════════════
   BUTTONS (section-level)
═══════════════════════════════════════ */
/* button-primary-pill */
.btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 22px; border-radius: 9999px;
  font-size: 15px; font-weight: 400; font-family: inherit; letter-spacing: 0;
  background: #533afd; color: #fff; text-decoration: none;
  border: none; cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .15s;
  box-shadow: 0 2px 8px rgba(83,58,253,0.28);
  font-feature-settings: "ss01";
}
.btn-primary:hover { background: #4434d4; box-shadow: 0 4px 16px rgba(83,58,253,0.36); }
.btn-primary:active { background: #2e2b8c; transform: translateY(1px); }

/* button-secondary: canvas, primary border */
.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 20px; border-radius: 9999px;
  font-size: 15px; font-weight: 400; font-family: inherit; letter-spacing: 0;
  border: 1px solid #a8c3de; color: #64748d; text-decoration: none;
  background: #fff; cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.btn-ghost:hover { border-color: #533afd; color: #533afd; background: rgba(83,58,253,0.04); }

/* button-on-dark */
.btn-dark {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 22px; border-radius: 9999px;
  font-size: 15px; font-weight: 400; font-family: inherit; letter-spacing: 0;
  background: #1c1e54; color: #fff; text-decoration: none;
  border: none; cursor: pointer; transition: background .15s;
}
.btn-dark:hover { background: #252862; }

/* ═══════════════════════════════════════
   BARRIER CARDS — 1px gap grid
═══════════════════════════════════════ */
.barriers-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  row-gap: 1px; column-gap: 1px;
  background: #e3e8ee; border: 1px solid #e3e8ee; border-radius: 12px; overflow: hidden;
}
.barrier-card {
  background: #fff; padding: 40px 36px 36px;
  position: relative; overflow: hidden;
  transition: background .18s;
}
.barrier-card:hover { background: #f6f9fc; }

.barrier-num {
  font-size: 11px; font-weight: 400; letter-spacing: 0.1px;
  text-transform: uppercase; color: #a8c3de;
  margin-bottom: 18px; font-feature-settings: "tnum";
}
.barrier-title {
  font-size: 20px; font-weight: 600; color: #0d253d;
  letter-spacing: -0.4px; line-height: 1.25; margin-bottom: 14px;
}
.barrier-desc {
  font-size: 14px; font-weight: 400; color: #64748d; line-height: 1.7;
}

/* ═══════════════════════════════════════
   MODULE GRID (6 ops)
═══════════════════════════════════════ */
.modules-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: #e3e8ee;
  border: 1px solid #e3e8ee; border-radius: 12px; overflow: hidden;
}
.module-cell {
  background: #fff; padding: 36px 32px;
  transition: background .18s;
}
.module-cell:hover { background: #f6f9fc; }

.module-num {
  font-size: 10px; font-weight: 400; letter-spacing: 0.1px; text-transform: uppercase;
  color: #a8c3de; margin-bottom: 20px; font-feature-settings: "tnum";
}
/* pill-tag-soft */
.module-tag {
  display: inline-block;
  font-size: 10px; font-weight: 400; letter-spacing: 0.1px; text-transform: uppercase;
  color: #4434d4; background: #b9b9f9;
  padding: 3px 8px; border-radius: 9999px;
  margin-bottom: 8px;
}
.module-title {
  font-size: 17px; font-weight: 600; color: #0d253d;
  letter-spacing: -0.3px; line-height: 1.3; margin-bottom: 12px;
}
.module-desc {
  font-size: 13.5px; font-weight: 400; color: #64748d; line-height: 1.7; margin-bottom: 18px;
}
.module-systems { display: flex; flex-wrap: wrap; gap: 5px; }
.sys-tag {
  font-size: 11px; font-weight: 400; color: #64748d;
  border: 1px solid #e3e8ee;
  border-radius: 9999px; padding: 3px 10px; letter-spacing: -0.05px;
}

/* ═══════════════════════════════════════════════════════════
   IoR / SoR SECTION v2 — 플로우차트 + 파이프라인 애니메이션
   ═══════════════════════════════════════════════════════════ */

.sec-ior {
  padding: var(--sec-py, 104px) var(--px, 40px);
  background: var(--bg2, #F6F9FC);
}

/* 헤더 */
.ior-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 72px;
}
.ior-header .section-title {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text, #0A2540);
  margin-bottom: 16px;
}
.ior-header .section-sub {
  font-size: 16px;
  color: var(--muted, #425466);
  line-height: 1.7;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   플로우차트 전체 레이아웃
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ior-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 auto 72px;
  max-width: 1080px;
  padding: 48px 40px;
  background: #ffffff;
  border: 1px solid var(--border, #E3E8EF);
  border-radius: 24px;
  box-shadow: var(--shadow-2, 0 8px 32px rgba(10,37,64,.08));
  overflow: hidden;
  position: relative;
}

/* 배경 글로우 — KONIVO 허브 강조 */
.ior-flow::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 320px; height: 200px;
  background: radial-gradient(ellipse at center, rgba(99,91,255,.06) 0%, transparent 70%);
  pointer-events: none;
}

/* ── 노드 박스 ── */
.iorf-node {
  flex: 0 0 auto;
  width: 168px;
  background: #ffffff;
  border: 1.5px solid var(--border, #E3E8EF);
  border-radius: 16px;
  padding: 22px 16px 18px;
  text-align: center;
  position: relative;
  z-index: 1;
  transition: box-shadow .22s, transform .22s, border-color .22s;
}
.iorf-node:hover {
  box-shadow: var(--shadow-3, 0 20px 60px rgba(10,37,64,.10));
  transform: translateY(-3px);
}

/* 노드 색상 변형 */
.iorf-node--brand    { border-color: #c7c4ff; }
.iorf-node--konivo  {
  border-color: var(--clr-primary, #635BFF);
  background: linear-gradient(160deg, #f5f4ff 0%, #ffffff 100%);
  box-shadow: 0 0 0 4px rgba(99,91,255,.08), var(--shadow-2);
}
.iorf-node--konivo:hover {
  box-shadow: 0 0 0 6px rgba(99,91,255,.12), var(--shadow-3);
}
.iorf-node--platform { border-color: #a7f3d0; }
.iorf-node--customer { border-color: #bfdbfe; }

/* 노드 아이콘 */
.iorf-node-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
}
.iorf-node--brand    .iorf-node-icon { background: #f3e8ff; color: #7c3aed; }
.iorf-node--konivo  .iorf-node-icon { background: var(--clr-primary-sub, #ebe9ff); color: var(--clr-primary, #635BFF); }
.iorf-node--platform .iorf-node-icon { background: #d1fae5; color: #059669; }
.iorf-node--customer .iorf-node-icon { background: #dbeafe; color: #1d4ed8; }

/* KONIVO 뱃지 */
.iorf-node-kbadge {
  position: absolute;
  top: -11px; left: 50%;
  transform: translateX(-50%);
  background: var(--clr-primary, #635BFF);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 3px 10px;
  border-radius: 99px;
  white-space: nowrap;
}

/* 노드 텍스트 */
.iorf-node-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #0A2540);
  letter-spacing: -.01em;
  margin-bottom: 3px;
  line-height: 1.3;
}
.iorf-node-sub {
  font-size: 10.5px;
  color: var(--muted, #425466);
  margin-bottom: 12px;
  line-height: 1.4;
}

/* 노드 태그 */
.iorf-node-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}
.iorf-tag {
  padding: 3px 7px;
  background: var(--bg2, #F6F9FC);
  border: 1px solid var(--border, #E3E8EF);
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted, #425466);
  white-space: nowrap;
}
.iorf-tag--primary {
  background: var(--clr-primary-sub, #ebe9ff);
  border-color: var(--clr-primary-mid, #c7c4ff);
  color: var(--clr-primary, #635BFF);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   파이프 연결선 (핵심: 점선 + 이동하는 빛 점)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.iorf-pipe {
  flex: 1 1 0;
  min-width: 40px;
  max-width: 100px;
  position: relative;
  height: 40px;
  display: flex;
  align-items: center;
  z-index: 0;
}

.iorf-pipe-track {
  position: relative;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
}

/* 점선 트랙 */
.iorf-pipe-dashes {
  position: absolute;
  left: 0; right: 0;
  top: 50%; transform: translateY(-50%);
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--clr-primary-mid, #c7c4ff) 0px,
    var(--clr-primary-mid, #c7c4ff) 5px,
    transparent 5px,
    transparent 10px
  );
}

/* ── 이동하는 빛 점 (핵심 마이크로 애니메이션) ── */
.iorf-pipe-dot {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--clr-primary, #635BFF);
  box-shadow: 0 0 8px 3px rgba(99,91,255,.45), 0 0 2px rgba(99,91,255,.9);
  /* 초기 위치: left=-10px, 종료 위치: left=100% */
  left: -10px;
  animation: pipeDotFlow 2.4s cubic-bezier(.4,0,.6,1) infinite;
}

/* 각 파이프별 딜레이 — 파이프라인처럼 순차 흐름 */
.iorf-pipe-dot--1 { animation-delay: 0s; }
.iorf-pipe-dot--2 { animation-delay: .8s; }
.iorf-pipe-dot--3 { animation-delay: 1.6s; }

@keyframes pipeDotFlow {
  0%   { left: -10px;   opacity: 0; }
  8%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: calc(100% + 10px); opacity: 0; }
}

/* 점선 위 라벨 */
.iorf-pipe-label {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  font-size: 10px;
  font-weight: 600;
  color: var(--muted, #425466);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: .01em;
}
.iorf-pipe-label--top { top: 1px; }
.iorf-pipe-label--bot { bottom: 1px; }

/* 화살표 머리 */
.iorf-arrow {
  position: absolute;
  right: -1px; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
}
.iorf-arrow--right {
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--clr-primary, #635BFF);
}

/* prefers-reduced-motion 대응 */
@media (prefers-reduced-motion: reduce) {
  .iorf-pipe-dot { animation: none; opacity: 0; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   역할 설명 2컬럼 카드 (IoR / SoR)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ior-role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.ior-role-card {
  background: #ffffff;
  border: 1px solid var(--border, #E3E8EF);
  border-radius: 16px;
  padding: 32px 28px;
  transition: box-shadow .22s, transform .22s;
}
.ior-role-card:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

.ior-role-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.ior-role-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  font-size: 12px; font-weight: 800;
  letter-spacing: .03em;
  flex-shrink: 0;
}
.ior-role-badge--ior { background: var(--clr-primary-sub, #ebe9ff); color: var(--clr-primary, #635BFF); }
.ior-role-badge--sor { background: #d1fae5; color: #059669; }

.ior-role-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #0A2540);
  letter-spacing: -.01em;
  line-height: 1.4;
}

.ior-role-desc {
  font-size: 14px;
  color: var(--muted, #425466);
  line-height: 1.75;
  margin-bottom: 18px;
}

.ior-role-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ior-role-list li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13.5px; color: var(--text, #0A2540); line-height: 1.55;
}
.ior-role-list li::before {
  content: '✓';
  color: var(--clr-primary, #635BFF);
  font-size: 11px; font-weight: 700;
  flex-shrink: 0; margin-top: 2px;
}

/* ── IoR items 8칸 그리드 ── */
.ior-items-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border, #E3E8EF);
  border: 1px solid var(--border, #E3E8EF);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
}
.ior-item {
  background: #fff;
  padding: 24px 16px;
  text-align: center;
  transition: background .15s;
}
.ior-item:hover { background: var(--bg2, #F6F9FC); }
.ior-item-icon  { font-size: 22px; margin-bottom: 8px; }
.ior-item-title {
  font-size: 13px; font-weight: 700;
  color: var(--text, #0A2540);
  margin-bottom: 4px; letter-spacing: -.01em;
}
.ior-item-desc {
  font-size: 11.5px;
  color: var(--muted, #425466);
  line-height: 1.5;
}

/* ── Sovereignty banner ── */
.sov-banner {
  display: flex; align-items: center; gap: 32px;
  background: linear-gradient(135deg, #071629 0%, #0A2540 60%, #1a3560 100%);
  border-radius: 16px;
  padding: 32px 40px;
  border: 1px solid rgba(99,91,255,.2);
}
.sov-title {
  font-size: 15px; font-weight: 700; color: #fff;
  margin-bottom: 8px; letter-spacing: -.02em;
}
.sov-desc { font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.7; }
.sov-cta  { flex-shrink: 0; white-space: nowrap; }

/* ═══════════════════════════════════════
   PLANS — Stripe pricing card (card-pricing + card-pricing-featured)
═══════════════════════════════════════ */
.plans-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: #e3e8ee; border: 1px solid #e3e8ee;
  border-radius: 12px; overflow: hidden;
  max-width: 100%; margin: 0 auto;
}
.plan-card {
  background: #fff; padding: 36px 28px;
  display: flex; flex-direction: column;
  position: relative; transition: background .18s;
}
.plan-card:hover { background: #f6f9fc; }

/* card-pricing-featured: brand-dark-900 #1c1e54 */
.plan-card.featured { background: #1c1e54; }
.plan-card.featured:hover { background: #252862; }

.plan-badge {
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  font-size: 9px; font-weight: 400; letter-spacing: 0.1px; text-transform: uppercase;
  color: #fff; background: #533afd;
  padding: 4px 14px; border-radius: 0 0 8px 8px;
  white-space: nowrap;
}

/* heading-lg: 22px 300 */
.plan-letter {
  font-size: 13px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase;
  color: #533afd; margin-bottom: 12px; margin-top: 8px;
}
.plan-card.featured .plan-letter { color: rgba(185,185,249,0.8); }

.plan-name {
  font-size: 22px; font-weight: 700; color: #0d253d;
  letter-spacing: -0.44px; margin-bottom: 12px; line-height: 1.1;
}
.plan-card.featured .plan-name { color: #fff; }

.plan-desc {
  font-size: 14px; font-weight: 400; color: #64748d;
  line-height: 1.7; flex: 1; margin-bottom: 20px;
}
.plan-card.featured .plan-desc { color: rgba(255,255,255,0.55); }

.plan-speed {
  font-size: 11px; font-weight: 400; color: #a8c3de;
  letter-spacing: -0.05px; margin-bottom: 20px;
}
.plan-card.featured .plan-speed { color: rgba(255,255,255,0.35); }

/* button-secondary pill */
.plan-cta {
  display: block; text-align: center;
  font-size: 14px; font-weight: 400; letter-spacing: 0;
  padding: 9px 18px; border-radius: 9999px; text-decoration: none;
  border: 1px solid #a8c3de; color: #64748d;
  transition: border-color .15s, background .15s, color .15s; margin-top: auto;
  background: transparent;
}
.plan-cta:hover { border-color: #533afd; color: #533afd; background: rgba(83,58,253,0.05); }

/* featured plan CTA — button-primary-pill */
.plan-cta.solid {
  background: #533afd; border-color: #533afd; color: #fff;
  box-shadow: 0 4px 12px rgba(83,58,253,0.32);
}
.plan-cta.solid:hover { background: #4434d4; border-color: #4434d4; box-shadow: 0 6px 20px rgba(83,58,253,0.40); }

.plan-card.featured .plan-cta {
  border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.08);
}
.plan-card.featured .plan-cta:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.35); }

.plan-note-banner {
  max-width: 100%; margin: 20px auto 0;
  display: flex; align-items: center; gap: 24px;
  background: #f6f9fc; border: 1px solid #e3e8ee; border-radius: 12px;
  padding: 24px 28px;
}
.plan-note-text { flex: 1; min-width: 0; }
.plan-note-title { font-size: 13px; font-weight: 400; color: #0d253d; margin-bottom: 5px; letter-spacing: -0.1px; }
.plan-note-desc  { font-size: 13px; font-weight: 400; color: #64748d; line-height: 1.65; }
.plan-note-cta   { flex-shrink: 0; white-space: nowrap; }

/* ═══════════════════════════════════════
   PROCESS — 가로 5단계 스텝 트랙
═══════════════════════════════════════ */
.process-steps-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-bottom: 48px;
  border: 1px solid #e3e8ee;
  border-radius: 12px;
  overflow: hidden;
  background: #e3e8ee;
}
.process-step-card {
  background: #fff;
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; transition: background .18s;
}
.process-step-card:hover { background: #f6f9fc; }

/* ps-num: pill circle with primary color */
.ps-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: #f6f9fc; border: 1.5px solid #e3e8ee;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 400; color: #533afd;
  font-feature-settings: "tnum";
  flex-shrink: 0;
}
/* micro-cap eyebrow */
.ps-label {
  font-size: 10px; font-weight: 400; letter-spacing: 0.1px;
  text-transform: uppercase; color: #533afd;
}
.ps-title {
  font-size: 14px; font-weight: 600; color: #0d253d;
  letter-spacing: -0.2px; line-height: 1.3;
}
.ps-desc {
  font-size: 12.5px; font-weight: 400; color: #64748d;
  line-height: 1.6;
}

/* 세로 리스트 (기존 호환) */
.process-list { display: flex; flex-direction: column; }
.process-item {
  display: grid; grid-template-columns: 80px 1fr;
  border-bottom: 1px solid #e3e8ee;
  padding: 32px 0; transition: background .15s; border-radius: 4px;
}
.process-item:last-child { border-bottom: none; }
.process-item:hover { background: #f6f9fc; padding-left: 12px; padding-right: 12px; }

.process-num {
  font-size: 11px; font-weight: 400; letter-spacing: 0.06em;
  color: #a8c3de; padding-top: 4px;
  font-feature-settings: "tnum";
}
.process-step-label {
  font-size: 10px; font-weight: 400; letter-spacing: 0.1px; text-transform: uppercase;
  color: #533afd; margin-bottom: 6px;
}
.process-step-title {
  font-size: 17px; font-weight: 600; color: #0d253d;
  letter-spacing: -0.3px; line-height: 1.3; margin-bottom: 8px;
}
.process-step-desc {
  font-size: 14px; font-weight: 400; color: #64748d; line-height: 1.7;
}

/* ═══════════════════════════════════════
   GUIDE CARDS
═══════════════════════════════════════ */
.guides-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; }
.guide-card {
  background: #fff; border: 1px solid #e3e8ee; border-radius: 12px;
  padding: 32px; text-decoration: none; display: block;
  transition: background .15s, box-shadow .15s;
}
.guide-card:hover {
  background: #f6f9fc;
  box-shadow: 0 4px 20px rgba(0,55,112,0.08);
}
/* micro-cap */
.guide-category {
  font-size: 10px; font-weight: 400; letter-spacing: 0.1px; text-transform: uppercase;
  color: #533afd; margin-bottom: 10px;
}
.guide-title {
  font-size: 16px; font-weight: 600; color: #0d253d;
  letter-spacing: -0.3px; line-height: 1.4; margin-bottom: 8px;
}
.guide-desc {
  font-size: 13px; font-weight: 400; color: #64748d; line-height: 1.65;
}

/* ═══════════════════════════════════════
   FAQ
═══════════════════════════════════════ */
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid #e3e8ee; }
.faq-item:first-child { border-top: 1px solid #e3e8ee; }

.faq-btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 22px 4px; background: none; border: none; cursor: pointer;
  text-align: left; gap: 16px; transition: background .12s; border-radius: 6px;
}
.faq-btn:hover { background: #f6f9fc; padding-left: 12px; padding-right: 12px; }

.faq-q {
  font-size: 15px; font-weight: 500; color: #0d253d;
  line-height: 1.5; letter-spacing: -0.15px;
}
.faq-toggle {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%; border: 1.5px solid #a8c3de;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #64748d;
  transition: all .2s; font-weight: 400; line-height: 1;
}
.faq-toggle.open { background: #533afd; border-color: #533afd; color: #fff; transform: rotate(45deg); }

.faq-answer { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-answer.open { max-height: 500px; }
.faq-a {
  padding: 0 4px 22px;
  font-size: 14px; font-weight: 400; color: #64748d; line-height: 1.8;
}

/* FAQ footer — 전체 FAQ 버튼 */
.faq-footer {
  margin-top: 48px;
  display: flex;
  justify-content: center;
}
.faq-all-btn {
  padding: 13px 36px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.1px;
}

/* ═══════════════════════════════════════
   CTA / APPLY — Stripe 라이트
═══════════════════════════════════════ */
.cta-box {
  border: 1px solid #e3e8ee; border-radius: 16px 16px 0 0;
  padding: 72px 48px 56px; text-align: center;
  background: #f6f9fc;
}
.cta-box .section-title { margin-bottom: 12px; }

/* Form — card-dashboard-mockup 스타일 */
.form-card {
  border: 1px solid #e3e8ee; border-top: none;
  border-radius: 0 0 16px 16px; padding: 44px 48px 48px;
  background: #fff;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label {
  font-size: 12px; font-weight: 400; color: #64748d;
  letter-spacing: -0.05px;
}
/* text-input: 8px 12px, r-sm 6px, hairline-input #a8c3de */
.form-group input,
.form-group select,
.form-group textarea {
  background: #fff; border: 1px solid #a8c3de;
  border-radius: 6px; color: #0d253d; font-family: inherit;
  font-size: 14px; font-weight: 400; padding: 8px 12px;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: #a8c3de; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #533afd;
  box-shadow: 0 0 0 3px rgba(83,58,253,0.12);
}
.form-group textarea { resize: vertical; min-height: 100px; }

/* button-on-dark for submit */
.form-submit {
  width: 100%; padding: 12px; border-radius: 9999px; border: none; cursor: pointer;
  font-size: 15px; font-weight: 400; font-family: inherit; letter-spacing: 0;
  background: #1c1e54; color: #fff; transition: background .15s;
  box-shadow: 0 2px 8px rgba(28,30,84,0.20);
}
.form-submit:hover { background: #252862; }

.form-note {
  font-size: 12px; font-weight: 400; color: #a8c3de;
  text-align: center; margin-top: 12px;
}

.report-item {
  display: flex; gap: 12px; align-items: flex-start;
}
.report-arrow { color: #533afd; font-size: 12px; margin-top: 1px; flex-shrink: 0; }
.report-text  { font-size: 13px; font-weight: 400; color: #64748d; }

/* ═══════════════════════════════════════
   FOOTER — footer-light (DESIGN-stripe.md)
   canvas bg, ink-mute text, caption type, 64px 24px padding
═══════════════════════════════════════ */
.footer {
  border-top: 1px solid #e3e8ee; padding: 64px 32px 48px;
  background: #fff;
}
.footer-inner {
  max-width: 1160px; margin: 0 auto;
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 48px; flex-wrap: wrap;
}
.footer-brand { max-width: 240px; }
.footer-logo {
  font-size: 15px; font-weight: 400; letter-spacing: -0.3px; color: #0d253d;
}
.footer-logo span { color: #533afd; font-weight: 400; }
.footer-brand p {
  font-size: 13px; font-weight: 400; color: #64748d;
  margin-top: 10px; line-height: 1.7;
}
.footer-biznum {
  font-size: 11px; font-weight: 400; color: #a8c3de; margin-top: 10px;
  font-feature-settings: "tnum";
}
.footer-cols { display: flex; gap: 56px; }
/* micro-cap headings */
.footer-col h5 {
  font-size: 10px; font-weight: 400; letter-spacing: 0.1px; text-transform: uppercase;
  color: #273951; margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a {
  font-size: 13px; font-weight: 400; color: #64748d;
  text-decoration: none; transition: color .12s;
}
.footer-col ul li a:hover { color: #533afd; }
.footer-bottom {
  max-width: 1160px; margin: 40px auto 0; padding-top: 24px;
  border-top: 1px solid #e3e8ee;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
}
.footer-bottom p { font-size: 12px; font-weight: 400; color: #a8c3de; }

/* ═══════════════════════════════════════
   FADE IN
═══════════════════════════════════════ */
.fade-in { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════
   STRIPE 2열 FEATURE 섹션 (Stripe.com 참조)
   좌: 텍스트 + pill-tags | 우: UI 목업 카드
═══════════════════════════════════════ */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 72px 0;
  border-bottom: 1px solid #e3e8ee;
}
.feature-row:last-child { border-bottom: none; }
.feature-row.reverse { direction: rtl; }
.feature-row.reverse > * { direction: ltr; }

.feature-text { }
.feature-text-eyebrow {
  font-size: 10px; font-weight: 600; letter-spacing: 0.1px;
  text-transform: uppercase; color: #533afd;
  margin-bottom: 16px; display: block;
}
.feature-text h3 {
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 700; color: #0d253d;
  letter-spacing: -0.72px; line-height: 1.15;
  margin-bottom: 16px;
}
.feature-text p {
  font-size: 15px; font-weight: 400; color: #64748d;
  line-height: 1.75; margin-bottom: 20px;
}
.feature-pills {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px;
}
.feature-pill {
  font-size: 13px; font-weight: 400; color: #4434d4;
  background: #eef0f6; border-radius: 9999px;
  padding: 6px 16px; letter-spacing: -0.05px;
  transition: background .15s, color .15s;
}
.feature-pill:hover { background: #e8e4ff; color: #533afd; }

/* UI 목업 컨테이너 */
.feature-mockup {
  background: #eef0f6;
  border-radius: 20px;
  padding: 28px;
  display: flex; align-items: center; justify-content: center;
  min-height: 320px;
  position: relative; overflow: hidden;
}
.feature-mockup::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 80% 20%, rgba(83,58,253,0.08) 0%, transparent 60%),
              radial-gradient(ellipse 60% 50% at 20% 80%, rgba(199,191,253,0.15) 0%, transparent 60%);
  pointer-events: none;
}

/* 목업 내부 흰 카드 */
.mockup-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e3e8ee;
  box-shadow: 0 8px 40px rgba(0,55,112,0.10), 0 2px 8px rgba(0,55,112,0.06);
  padding: 20px 24px;
  width: 100%;
  max-width: 340px;
  position: relative; z-index: 1;
}
.mockup-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid #e3e8ee;
}
.mockup-card-title {
  font-size: 13px; font-weight: 600; color: #0d253d;
  letter-spacing: -0.13px;
}
.mockup-badge {
  font-size: 11px; font-weight: 500; padding: 3px 10px;
  border-radius: 9999px;
}
.mockup-badge.green { background: #d1fae5; color: #065f46; }
.mockup-badge.blue  { background: #edeaff; color: #4434d4; }
.mockup-badge.orange{ background: #fff7ed; color: #c2410c; }

.mockup-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid #f0f2f5;
  font-size: 12.5px;
}
.mockup-row:last-child { border-bottom: none; }
.mockup-row-label { color: #64748d; font-weight: 400; }
.mockup-row-val   { color: #0d253d; font-weight: 600; font-feature-settings: "tnum"; }
.mockup-row-val.primary { color: #533afd; }
.mockup-row-val.green   { color: #059669; }

.mockup-number {
  font-size: 26px; font-weight: 700; color: #0d253d;
  letter-spacing: -1px; line-height: 1;
  margin-bottom: 4px; font-feature-settings: "tnum";
}
.mockup-sub { font-size: 11px; color: #64748d; font-weight: 400; margin-bottom: 12px; }

.mockup-bar-wrap { margin: 12px 0; }
.mockup-bar-label {
  display: flex; justify-content: space-between;
  font-size: 11px; color: #64748d; margin-bottom: 5px;
}
.mockup-bar-track {
  height: 5px; border-radius: 9999px; background: #e3e8ee;
}
.mockup-bar-fill {
  height: 100%; border-radius: 9999px;
  background: linear-gradient(90deg, #533afd, #8b7afe);
}

.mockup-chart {
  display: flex; align-items: flex-end; gap: 5px;
  height: 80px; margin: 12px 0;
}
.mockup-bar-col {
  flex: 1; border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #533afd, #8b7afe);
  opacity: 0.85;
  transition: opacity .15s;
}
.mockup-bar-col.secondary {
  background: linear-gradient(180deg, #b9b9f9, #d4d1fe);
}

.mockup-flow {
  display: flex; flex-direction: column; gap: 8px; margin: 8px 0;
}
.mockup-flow-item {
  display: flex; align-items: center; gap: 10px;
  background: #f6f9fc; border-radius: 8px; padding: 8px 12px;
}
.mockup-flow-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.mockup-flow-dot.primary { background: #533afd; }
.mockup-flow-dot.success { background: #10b981; }
.mockup-flow-dot.warning { background: #f59e0b; }
.mockup-flow-text { font-size: 12px; color: #0d253d; font-weight: 500; flex: 1; }
.mockup-flow-val  { font-size: 12px; color: #64748d; font-weight: 400; }

.mockup-list {
  display: flex; flex-direction: column; gap: 6px; margin: 8px 0;
}
.mockup-list-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: #0d253d; font-weight: 400;
}
.mockup-list-check {
  width: 16px; height: 16px; border-radius: 50%;
  background: #d1fae5; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
  font-size: 9px; color: #059669; font-weight: 700;
}

/* 2열 반응형 */
@media (max-width: 900px) {
  .feature-row { grid-template-columns: 1fr; gap: 32px; }
  .feature-row.reverse { direction: ltr; }
}

/* ═══════════════════════════════════════════════════════════
   섹션 A — THE 4 BARRIERS  (2×2 듀오톤 카드 그리드)
   ═══════════════════════════════════════════════════════════ */

.sec-barriers {
  padding: var(--sec-py, 104px) var(--px, 40px);
  background: var(--bg2, #F6F9FC);
}

.barriers-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 64px;
}
.barriers-header .section-eyebrow { margin-bottom: 16px; }
.barriers-header .section-title {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text, #0A2540);
  margin-bottom: 16px;
}
.barriers-header .section-sub {
  font-size: 16px;
  color: var(--muted, #425466);
  line-height: 1.7;
}

/* 2×2 카드 그리드 */
.barriers-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}

/* 개별 카드 */
.barrier-card-v2 {
  background: #ffffff;
  border: 1px solid var(--border, #E3E8EF);
  border-radius: 20px;
  padding: 32px 28px 28px;
  transition: box-shadow .25s ease, transform .25s ease;
  position: relative;
  overflow: hidden;
}
.barrier-card-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(99,91,255,.02) 0%, transparent 60%);
  pointer-events: none;
}
.barrier-card-v2:hover {
  box-shadow: 0 20px 60px rgba(10,37,64,.12), 0 4px 16px rgba(10,37,64,.06);
  transform: translateY(-5px);
}

/* 듀오톤 아이콘 래퍼 */
.bcv2-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.bcv2-icon--orange { background: #fff7ed; color: #c2410c; }
.bcv2-icon--blue   { background: #ebe9ff; color: #635BFF; }
.bcv2-icon--purple { background: #f3e8ff; color: #7c3aed; }
.bcv2-icon--red    { background: #fef2f2; color: #dc2626; }

/* 듀오톤 SVG 레이어 */
.bcv2-svg { display: block; }
.bcv2-svg-bg   { opacity: 0.35; }
.bcv2-svg-line { opacity: 1; }

/* 번호 배지 */
.bcv2-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--muted, #425466);
  margin-bottom: 10px;
  opacity: .7;
}

/* 카드 제목 */
.bcv2-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text, #0A2540);
  margin-bottom: 10px;
  line-height: 1.35;
}

/* 카드 설명 */
.bcv2-desc {
  font-size: 14.5px;
  color: var(--muted, #425466);
  line-height: 1.7;
  margin-bottom: 18px;
}

/* 하단 태그 */
.bcv2-tag {
  display: inline-block;
  padding: 5px 12px;
  background: var(--bg2, #F6F9FC);
  border: 1px solid var(--border, #E3E8EF);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #425466);
  letter-spacing: .01em;
}

/* 하단 CTA 스트립 */
.barriers-cta-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 56px;
  padding: 28px 40px;
  background: #ffffff;
  border: 1px solid var(--border, #E3E8EF);
  border-radius: 16px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.barriers-cta-text {
  font-size: 15px;
  font-weight: 500;
  color: var(--muted, #425466);
  margin: 0;
}
.barriers-cta-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--clr-primary, #635BFF);
  text-decoration: none;
  white-space: nowrap;
  transition: gap .18s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.barriers-cta-link:hover { gap: 8px; text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════
   섹션 B — 6 MODULES  (Z패턴 교차 레이아웃)
   ═══════════════════════════════════════════════════════════ */

.sec-modules {
  padding: var(--sec-py, 104px) var(--px, 40px);
  background: var(--bg, #ffffff);
}

.modules-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 80px;
}
.modules-header .section-eyebrow { margin-bottom: 16px; }
.modules-header .section-title {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text, #0A2540);
  margin-bottom: 16px;
}
.modules-header .section-sub {
  font-size: 16px;
  color: var(--muted, #425466);
  line-height: 1.7;
}
.modules-header .section-sub.center { text-align: center; }

/* ── Z패턴 Row ── */
.zrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: 72px 0;
  border-bottom: 1px solid var(--border, #E3E8EF);
}
.zrow:first-of-type { padding-top: 0; }
.zrow--last {
  border-bottom: none;
  padding-bottom: 0;
}

/* Reverse: 목업을 왼쪽, 텍스트를 오른쪽 */
.zrow--reverse .zrow-mockup { order: -1; }

/* 텍스트 블록 */
.zrow-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--clr-primary, #635BFF);
  margin-bottom: 14px;
}
.zrow-h3 {
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text, #0A2540);
  line-height: 1.3;
  margin-bottom: 16px;
}
.zrow-desc {
  font-size: 15px;
  color: var(--muted, #425466);
  line-height: 1.75;
  margin-bottom: 24px;
}

/* 기능 pills */
.zrow-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.zrow-pill {
  padding: 5px 12px;
  background: var(--clr-primary-sub, #ebe9ff);
  color: var(--clr-primary, #635BFF);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── zmk-card (대시보드 목업 카드) ── */
.zmk-card {
  background: #ffffff;
  border: 1px solid var(--border, #E3E8EF);
  border-radius: 16px;
  padding: 22px 22px 20px;
  box-shadow: var(--shadow-2, 0 8px 32px rgba(10,37,64,.08), 0 1px 4px rgba(10,37,64,.04));
  font-size: 13px;
}

/* 카드 헤더 */
.zmk-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.zmk-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #0A2540);
  letter-spacing: -.01em;
}

/* 상태 뱃지 */
.zmk-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
}
.zmk-badge--green  { background: #d1fae5; color: #065f46; }
.zmk-badge--blue   { background: #ebe9ff; color: #635BFF; }
.zmk-badge--purple { background: #f3e8ff; color: #7c3aed; }

/* 뱃지 점 (펄스 애니메이션) */
.zmk-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  flex-shrink: 0;
  animation: zmkDotPulse 2.2s ease-in-out infinite;
}
.zmk-badge-dot--blue   { color: #635BFF; }
.zmk-badge-dot--purple { color: #7c3aed; }

@keyframes zmkDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.75); }
}

/* ── Row 1: 채널 바 차트 ── */
.zmk-channel-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.zmk-channel-row  { display: flex; align-items: center; gap: 8px; }
.zmk-channel-left {
  display: flex; align-items: center; gap: 7px;
  min-width: 140px; flex-shrink: 0;
}
.zmk-channel-right {
  display: flex; align-items: center; gap: 8px; flex: 1;
}
.zmk-ch-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.zmk-ch-dot--rocket { background: #ff5a00; }
.zmk-ch-dot--naver  { background: #03c75a; }
.zmk-ch-dot--kakao  { background: #fee500; }
.zmk-ch-name { font-size: 12px; color: var(--muted, #425466); white-space: nowrap; }
.zmk-ch-bar-wrap {
  flex: 1; height: 6px; background: var(--bg2, #F6F9FC);
  border-radius: 99px; overflow: hidden;
}
.zmk-ch-bar {
  height: 100%; border-radius: 99px;
  background: var(--clr-primary, #635BFF);
  transition: width .4s ease;
}
.zmk-ch-bar--b { background: #03c75a; }
.zmk-ch-bar--c { background: #fee500; }
.zmk-ch-val { font-size: 12px; font-weight: 600; color: var(--text, #0A2540); white-space: nowrap; font-feature-settings: "tnum"; }

/* 카드 푸터 (합계) */
.zmk-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 14px; border-top: 1px solid var(--border, #E3E8EF);
}
.zmk-footer-label { font-size: 12px; color: var(--muted, #425466); }
.zmk-footer-val   { font-size: 14px; font-weight: 700; color: var(--text, #0A2540); font-feature-settings: "tnum"; }

/* ── Row 2: 통관 플로우 타임라인 ── */
.zmk-flow { display: flex; flex-direction: column; gap: 0; }
.zmk-flow-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0;
  border-left: 2px solid var(--border, #E3E8EF);
  margin-left: 12px;
  padding-left: 16px;
  position: relative;
}
.zmk-flow-item:last-child { border-left-color: transparent; }

.zmk-flow-icon {
  position: absolute; left: -11px; top: 12px;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.zmk-flow-icon--done {
  background: #d1fae5; color: #059669;
  border: 2px solid #a7f3d0;
}
.zmk-flow-icon--active {
  background: var(--clr-primary-sub, #ebe9ff);
  border: 2px solid var(--clr-primary-mid, #c7c4ff);
}
.zmk-flow-icon--pending {
  background: var(--bg2, #F6F9FC);
  border: 2px solid var(--border, #E3E8EF);
}

/* 진행 중 펄스 */
.zmk-flow-pulse {
  display: block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--clr-primary, #635BFF);
  animation: zmkFlowPulse 1.8s ease-in-out infinite;
}
@keyframes zmkFlowPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.4); opacity: .6; }
}

.zmk-flow-body { display: flex; flex-direction: column; gap: 2px; padding-bottom: 4px; }
.zmk-flow-label { font-size: 13px; font-weight: 600; color: var(--text, #0A2540); }
.zmk-flow-date  { font-size: 11px; color: var(--muted, #425466); }
.zmk-flow-date--active { color: var(--clr-primary, #635BFF); font-weight: 600; }

.zmk-flow-item--done   .zmk-flow-label { color: var(--muted, #425466); }
.zmk-flow-item--pending .zmk-flow-label { color: var(--border2, #aabdd4); }
.zmk-flow-item--pending .zmk-flow-date  { color: var(--border, #E3E8EF); }

/* ── Row 3: 재고 현황 ── */
.zmk-big-num {
  font-size: 40px; font-weight: 800; letter-spacing: -.04em;
  color: var(--text, #0A2540); margin-bottom: 4px;
  font-feature-settings: "tnum";
}
.zmk-big-unit { font-size: 18px; font-weight: 600; color: var(--muted, #425466); margin-left: 2px; }
.zmk-big-sub  { font-size: 12px; color: var(--muted, #425466); margin-bottom: 18px; }

.zmk-progress-block { margin-bottom: 10px; }
.zmk-progress-row {
  display: flex; justify-content: space-between; margin-bottom: 6px;
}
.zmk-prog-label { font-size: 12px; color: var(--muted, #425466); }
.zmk-prog-val   { font-size: 12px; font-weight: 600; color: var(--text, #0A2540); font-feature-settings: "tnum"; }
.zmk-prog-val--green { color: #059669; }
.zmk-prog-track { height: 6px; background: var(--bg2, #F6F9FC); border-radius: 99px; overflow: hidden; }
.zmk-prog-fill  { height: 100%; border-radius: 99px; transition: width .4s ease; }
.zmk-prog-fill--purple { background: var(--clr-primary, #635BFF); }
.zmk-prog-fill--green  { background: #10b981; }

.zmk-stat-row {
  display: flex; align-items: center; gap: 0;
  padding-top: 14px; border-top: 1px solid var(--border, #E3E8EF);
  margin-top: 14px;
}
.zmk-stat-item { flex: 1; text-align: center; }
.zmk-stat-divider { width: 1px; height: 32px; background: var(--border, #E3E8EF); }
.zmk-stat-val { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--text, #0A2540); font-feature-settings: "tnum"; }
.zmk-stat-val--green { color: #059669; }
.zmk-stat-label { display: block; font-size: 11px; color: var(--muted, #425466); margin-top: 2px; }

/* ── Row 4: CS 통계 + 리뷰 ── */
.zmk-cs-stats {
  display: flex; gap: 0;
  padding: 12px 0 16px; border-bottom: 1px solid var(--border, #E3E8EF);
  margin-bottom: 14px;
}
.zmk-cs-stat { flex: 1; text-align: center; }
.zmk-cs-num {
  display: block; font-size: 22px; font-weight: 800;
  color: var(--text, #0A2540); letter-spacing: -.03em;
  font-feature-settings: "tnum";
}
.zmk-cs-num--green { color: #059669; }
.zmk-cs-num--blue  { color: var(--clr-primary, #635BFF); }
.zmk-cs-lbl { display: block; font-size: 11px; color: var(--muted, #425466); margin-top: 2px; }

.zmk-review-header { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--muted, #425466); margin-bottom: 8px; text-transform: uppercase; }
.zmk-review-list { display: flex; flex-direction: column; gap: 6px; }
.zmk-review-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; background: var(--bg2, #F6F9FC);
  border-radius: 8px; font-size: 12px;
}
.zmk-review-check  { color: #059669; font-weight: 700; font-size: 11px; }
.zmk-review-platform { font-weight: 600; color: var(--text, #0A2540); flex-shrink: 0; }
.zmk-review-stars  { color: #f59e0b; font-size: 11px; flex: 1; }
.zmk-review-status { font-size: 11px; font-weight: 600; }
.zmk-review-status--ok { color: #059669; }

/* ── Row 5: 정산 내역 ── */
.zmk-settlement { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0; }
.zmk-settle-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--bg2, #F6F9FC);
}
.zmk-settle-row--deduct .zmk-settle-label { padding-left: 10px; }
.zmk-settle-label { font-size: 12.5px; color: var(--muted, #425466); }
.zmk-settle-val   { font-size: 13px; font-weight: 600; color: var(--text, #0A2540); font-feature-settings: "tnum"; }
.zmk-settle-val--minus { color: #ef4444; }

.zmk-settle-total {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 14px 12px;
  background: var(--clr-primary-sub, #ebe9ff);
  border-radius: 10px;
  margin-top: 10px;
}
.zmk-settle-total-label { font-size: 13px; font-weight: 700; color: var(--clr-primary, #635BFF); }
.zmk-settle-total-val   { font-size: 16px; font-weight: 800; color: var(--clr-primary, #635BFF); font-feature-settings: "tnum"; }

/* ── Row 6: 바 차트 + 소유권 뱃지 ── */
.zmk-chart-wrap { margin-bottom: 16px; }
.zmk-chart-label-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; font-size: 12px; color: var(--muted, #425466);
}
.zmk-chart-growth { font-weight: 700; color: #059669; }

.zmk-bar-chart {
  display: flex; align-items: flex-end;
  gap: 6px; height: 80px;
}
.zmk-bar-chart-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; height: 100%; gap: 4px;
}
.zmk-bar-fill-v {
  width: 100%; border-radius: 4px 4px 0 0;
  background: var(--clr-primary-mid, #c7c4ff);
  transition: height .4s ease;
  min-height: 4px;
}
.zmk-bar-fill-v--mid { background: var(--clr-primary, #635BFF); }
.zmk-bar-fill-v--hi  { background: var(--clr-primary-deep, #4f48d4); }
.zmk-bar-month { font-size: 10px; color: var(--muted, #425466); }

/* 소유권 뱃지 */
.zmk-ownership-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.zmk-own-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px;
  font-size: 12px; font-weight: 600;
}
.zmk-own-badge--green  { background: #d1fae5; color: #065f46; }
.zmk-own-badge--blue   { background: var(--clr-primary-sub, #ebe9ff); color: var(--clr-primary, #635BFF); }
.zmk-own-badge-icon    { font-size: 11px; }
  .feature-mockup { min-height: 260px; }
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 960px) {
  section { padding: 72px 24px; }
  /* hero-inner: 세로 스택 전환 (위 인라인 @media에서도 !important로 처리됨) */
  .hero-inner { grid-template-columns: 1fr !important; gap: 0; padding: 100px 0 72px !important; }
  .hero-right { display: none !important; visibility: hidden !important; position: absolute !important; width: 0 !important; height: 0 !important; overflow: hidden !important; }
  .hero-left { max-width: 100%; }
  .hero-aurora { display: none !important; visibility: hidden !important; position: absolute !important; width: 0 !important; height: 0 !important; }  /* 모바일: aurora blob 완전 숨김 */
  .hero .container { grid-template-columns: 1fr; gap: 48px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .barriers-grid { grid-template-columns: 1fr; }
  .modules-grid  { grid-template-columns: 1fr 1fr; }
  .ior-sor-grid  { grid-template-columns: 1fr; }
  .ior-items-grid { grid-template-columns: repeat(2, 1fr); }
  .plans-grid { grid-template-columns: 1fr; max-width: 400px; }
  .guides-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; gap: 32px; }
  .footer-cols { gap: 32px; flex-wrap: wrap; }
  .sov-banner { flex-direction: column; align-items: stretch; padding: 24px 28px; gap: 16px; }
  .plan-note-banner { flex-direction: column; align-items: stretch; }
  .process-steps-track { grid-template-columns: 1fr 1fr; }

  /* 섹션 A: barriers — 1열 */
  .barriers-card-grid { grid-template-columns: 1fr; max-width: 520px; }
  .barriers-cta-strip { flex-direction: column; gap: 12px; text-align: center; padding: 24px 28px; }

  /* 섹션 B: Z패턴 → 세로 스택 */
  .zrow {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 52px 0;
  }
  .zrow--reverse .zrow-mockup { order: 0; }

  /* IoR 플로우차트 — 태블릿: 2×2 랩 */
  .ior-flow {
    flex-wrap: wrap;
    gap: 16px;
    padding: 36px 24px;
    justify-content: center;
  }
  .iorf-node  { width: 148px; }
  .iorf-pipe  { display: none; }  /* 태블릿에서 연결선 숨김, 노드만 표시 */
  .ior-role-grid { grid-template-columns: 1fr; }
  .ior-items-grid { grid-template-columns: repeat(2, 1fr); }
  .sov-banner { flex-direction: column; gap: 16px; padding: 28px 24px; border-radius: 16px; }
}

@media (max-width: 600px) {
  .hero { padding: 0 20px; }
  .hero-inner { padding: 88px 0 64px; }
  .hero .container { padding: 100px 0 80px; }
  section { padding: 56px 16px; }
  .container { padding: 0 16px; }
  .hero-h1 { letter-spacing: -.03em; font-size: clamp(32px, 9vw, 44px); }
  .modules-grid { grid-template-columns: 1fr; }
  .ior-items-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-box { padding: 48px 24px 40px; }
  .form-card { padding: 28px 20px 32px; }
  .stat-num { font-size: 32px; letter-spacing: -0.8px; }
  .process-steps-track { grid-template-columns: 1fr; }
  .hero-channels-inline { gap: 6px; }

  /* 섹션 A 모바일 */
  .barrier-card-v2 { padding: 24px 20px 20px; }
  .bcv2-title { font-size: 16px; }

  /* 섹션 B 모바일 */
  .zrow { padding: 40px 0; gap: 28px; }
  .zrow-h3 { font-size: 22px; }
  .zmk-card { padding: 18px 16px; max-width: 100%; overflow: hidden; }
  .zrow-mockup { max-width: 100%; overflow: hidden; }
  .zmk-big-num { font-size: 32px; }
  .zmk-cs-stats { gap: 0; }
  .zmk-channel-left { min-width: 110px; }

  /* IoR 플로우차트 — 모바일 */
  .ior-flow { padding: 28px 16px; gap: 12px; }
  .iorf-node { width: 100%; max-width: 280px; }
  .ior-role-card { padding: 24px 18px; }
  .ior-items-grid { grid-template-columns: repeat(2, 1fr); }
}