/* ============================================================
   페이대장 — Vivid Mint Color System
   컬러: 쿨 화이트 + 선명한 민트(#00D4AA) 중심 SaaS 팔레트
   콘텐츠: 기존 유지 / 색상만 교체
   ============================================================ */

/* ── Design Tokens ── */
:root {
  /* ── Primary: Vivid Mint ── */
  --mint-700: #00a884;   /* 깊은 민트 (hover, 강조) */
  --mint-600: #00be96;   /* 주 포인트 */
  --mint-500: #00D4AA;   /* 브랜드 민트 (Primary) — 선명한 민트 */
  --mint-400: #1ff0c4;   /* 밝은 민트 (hover highlight) */
  --mint-200: #80edd6;   /* tint border */
  --mint-100: #c0f7eb;   /* 연 민트 배경 */
  --mint-50:  #edfdf8;   /* 극연 민트 배경 */

  /* ── Text (Deep Ink — 가독성 우선) ── */
  --ink-900:  #0d2137;   /* 제목, 브랜드 텍스트 */
  --ink-800:  #132843;   /* 서브 타이틀 */
  --ink-700:  #1c3a55;   /* 강조 텍스트 */

  /* ── Service accents (각 결제수단 포인트) ── */
  --qr-ink:      #00be96;   /* QR — 메인 민트 */
  --qr-tint:     #edfdf8;
  --manual-ink:  #0891b2;   /* 수기 — 시안 블루 */
  --manual-tint: #ecfeff;
  --sms-ink:     #059669;   /* SMS — 에메랄드 */
  --sms-tint:    #f0fdf4;
  --link-ink:    #7c3aed;   /* 링크 — 바이올렛 */
  --link-tint:   #f5f3ff;

  /* ── Neutrals ── */
  --white:    #ffffff;
  --gray-50:  #f8fafb;
  --gray-100: #f0f4f8;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-700: #334155;
  --gray-900: #0f172a;

  --text-heading: #0d2137;
  --text-body:    #334155;
  --text-muted:   #64748b;
  --text-light:   #94a3b8;

  /* ── Shadows (민트 틴트 그림자) ── */
  --sh-xs: 0 1px 2px rgba(0,212,170,.06);
  --sh-sm: 0 2px 8px rgba(0,212,170,.09);
  --sh-md: 0 4px 18px rgba(0,212,170,.12);
  --sh-lg: 0 8px 36px rgba(0,212,170,.15);
  --sh-xl: 0 16px 56px rgba(0,212,170,.18);

  /* ── Radii ── */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-full: 9999px;

  --transition: all .22s cubic-bezier(.4,0,.2,1);
  --font: 'Pretendard', sans-serif;

  /* ── Hero layout ── */
  --hero-max-width:    1280px;
  --hero-min-height:   750px;
  --hero-padding-top:  106px;

  /* ── Hero mockup sizes ── */
  --phone-mockup-width: 260px;
  --pc-mockup-width:    520px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font);
  color: var(--text-body);
  background: var(--white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  word-break: keep-all;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ============================================================
   NAVBAR — Glass Transparent Header
   ============================================================ */

/* ── 기본 상태: 완전 투명 ── */
/* 주의: backdrop-filter는 .navbar 자체가 아니라 ::before 가상요소에만 적용한다.
   .navbar는 position:fixed인 #navMenu(전체화면 모바일 메뉴)의 부모이므로,
   .navbar 자체에 backdrop-filter(또는 filter/transform)가 걸리면 스펙상
   새 containing block이 생겨 #navMenu의 fixed 기준이 뷰포트가 아닌
   .navbar(높이 80px) 박스로 바뀌어 메뉴가 찌그러져 보이지 않게 된다. */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  /* 초기: 투명 */
  background: transparent;
  border-bottom: none;
  transition:
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}
.navbar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transition: backdrop-filter .35s ease;
}

/* ── 스크롤 후: 유리 효과 ── */
.navbar.scrolled {
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid rgba(0, 212, 170, 0.15);
  box-shadow: 0 1px 32px rgba(0, 30, 20, 0.07);
}
.navbar.scrolled::before {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ── 모바일 메뉴 열렸을 때는 항상 불투명 ── */
.navbar.menu-open {
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid var(--gray-200);
}
.navbar.menu-open::before {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ── 내부 컨테이너 ── */
.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   로고
━━━━━━━━━━━━━━━━━━━━━━━━ */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo__icon {
  width: 60px; height: 60px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid var(--mint-500);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 0 0 3px rgba(0,212,170,0.15);
  transition: transform .22s ease, box-shadow .22s ease;
}
.nav-logo__icon .logo-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.nav-logo:hover .nav-logo__icon {
  transform: translateY(-1px) scale(1.06);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}

.nav-logo__label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-top: 0;
  justify-content: center;
}
.nav-logo__text {
  font-family: 'Pretendard', sans-serif;
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  line-height: 1.2;
  transition: color .22s ease;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   중앙 메뉴 링크
━━━━━━━━━━━━━━━━━━━━━━━━ */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0 auto; /* 중앙 배치 */
}

/* 공통 링크/버튼 스타일 */
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink-800);
  border-radius: var(--r-sm);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
  white-space: nowrap;
}
.nav-link:hover {
  background: rgba(0,212,170,0.08);
  color: var(--mint-700);
}
/* 스크롤 전 투명 배경에서 텍스트 가독성 */
.navbar:not(.scrolled) .nav-link {
  color: var(--ink-800);
}

/* 현재 섹션 활성 표시 */
.nav-link.nav-active {
  color: var(--mint-700);
  font-weight: 600;
}
.nav-link.nav-active::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 2px; left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 2px;
  background: var(--mint-500);
  border-radius: 2px;
}
/* 드롭다운 트리거 position */
.nav-item--dropdown { position: relative; }
.nav-dropdown-trigger { position: relative; }

/* 화살표 아이콘 */
.nav-chevron {
  font-size: 9px;
  transition: transform .2s ease;
  opacity: .7;
}
.nav-item--dropdown.dropdown-open .nav-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   드롭다운 패널 (메가 스타일)
━━━━━━━━━━━━━━━━━━━━━━━━ */
.nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  width: 440px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0,212,170,0.14);
  border-radius: 18px;
  box-shadow:
    0 24px 60px rgba(0,30,20,0.12),
    0  4px 16px rgba(0,212,170,0.08),
    0  0   0  1px rgba(255,255,255,0.6) inset;
  padding: 16px;
  z-index: 950;
  animation: dropFadeIn .18s ease both;
}
.nav-item--dropdown.dropdown-open .nav-dropdown {
  display: block;
}
@keyframes dropFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);    }
}

/* 2열 그리드 */
.nav-dropdown__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

/* 각 메뉴 아이템 (링크 없음 — 안내 표시용) */
.nav-dropdown__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none;
  cursor: default;
  transition: background .16s ease, transform .16s ease;
}

/* 아이콘 박스 */
.nav-dropdown__icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  transition: transform .16s ease;
}
.nav-dropdown__item:hover .nav-dropdown__icon {
  transform: scale(1.08);
}

/* 텍스트 */
.nav-dropdown__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-dropdown__info strong {
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.2;
}
.nav-dropdown__info span {
  font-size: .77rem;
  color: var(--gray-400);
  line-height: 1.3;
}

/* 하단 푸터 바 */
.nav-dropdown__footer {
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--mint-50);
  border-radius: 10px;
  font-size: .76rem;
  font-weight: 600;
  color: var(--mint-700);
  display: flex;
  align-items: center;
  gap: 7px;
}
.nav-dropdown__footer i { font-size: 12px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   우측 CTA 영역
━━━━━━━━━━━━━━━━━━━━━━━━ */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* 로그인 (아웃라인 버튼) */
.nav-login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink-700);
  text-decoration: none;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--gray-300);
  background: transparent;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
  white-space: nowrap;
}
.nav-login:hover {
  border-color: var(--mint-400);
  color: var(--mint-700);
  background: rgba(0,212,170,0.05);
}

/* 주문조회 (아웃라인 버튼) */
.nav-order {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--mint-700);
  text-decoration: none;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--mint-400);
  background: rgba(0,212,170,0.06);
  transition: border-color .18s ease, color .18s ease, background .18s ease;
  white-space: nowrap;
}
.nav-order:hover {
  background: rgba(0,212,170,0.14);
  border-color: var(--mint-600);
  color: var(--mint-800);
}
.nav-order i { font-size: 12px; }
.nav-order__text { display: inline; }

/* 가입 문의 (민트 필 버튼) */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  background: var(--mint-600);
  color: var(--white);
  font-size: .875rem;
  font-weight: 700;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  text-decoration: none;
  box-shadow: 0 3px 12px rgba(0,212,170,0.34);
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
  white-space: nowrap;
}
.nav-cta:hover {
  background: var(--mint-700);
  box-shadow: 0 6px 20px rgba(0,212,170,0.42);
  transform: translateY(-1px);
}
.nav-cta i { font-size: 12px; }

/* 가입안내 드롭다운 (버튼형 CTA + 메뉴) */
.nav-signup-item { position: relative; }
.nav-signup-item .nav-cta {
  cursor: pointer;
  font: inherit;
}
.nav-signup-item .nav-dropdown.nav-signup-dropdown {
  width: 260px;
  left: auto;
  right: 0;
  transform: none;
}
.nav-signup-item.dropdown-open .nav-dropdown.nav-signup-dropdown {
  display: block;
}
@keyframes dropFadeInRight {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0);    }
}
.nav-signup-item .nav-dropdown.nav-signup-dropdown {
  animation: dropFadeInRight .18s ease both;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   햄버거 (모바일)
━━━━━━━━━━━━━━━━━━━━━━━━ */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px; height: 38px;
  padding: 7px;
  border-radius: var(--r-sm);
  background: none;
  border: none;
  cursor: pointer;
  transition: background .18s ease;
}
.hamburger:hover { background: rgba(0,212,170,0.08); }

.hamburger__bar {
  display: block;
  width: 100%; height: 2px;
  background: var(--ink-800);
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease, width .25s ease;
  transform-origin: center;
}
/* 열린 상태: X 모양 */
.hamburger.is-open .hamburger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open .hamburger__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.is-open .hamburger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━
   모바일 메뉴 오버레이
━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ══════════════════════════════════════════
   모바일 네비 — 860px 이하
   ══════════════════════════════════════════ */
@media (max-width: 860px) {

  /* 햄버거 표시 */
  .hamburger { display: flex; }

  /* 데스크톱 nav-actions 숨김 */
  .nav-actions { display: none; }

  /* 모바일: 스크롤 전에도 항상 불투명 배경 —
     투명 배경 상태에서 로고/브랜드명이 히어로 타이틀과
     같은 레이어처럼 겹쳐 보이는 착시를 방지
     (backdrop-filter는 .navbar::before에만 적용 — 이유는 위 주석 참고) */
  .navbar {
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid rgba(0, 212, 170, 0.12);
    box-shadow: 0 1px 12px rgba(0, 30, 20, 0.05);
  }
  .navbar::before {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  /* ── 풀스크린 메뉴 오버레이 ── */
  .nav-menu {
    display: none;
    position: fixed;
    /* JS(main.js)가 실제 네비바 높이를 --navbar-real-height로 반영 —
       480px 이하에서 nav-container 높이가 72px로 줄어드는 등의 변화에 대응 */
    inset: var(--navbar-real-height, 80px) 0 0 0;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: stretch;
    padding: 16px 16px 40px;
    gap: 4px;
    overflow-y: auto;
    z-index: 800;
    border-top: 1px solid var(--gray-100);
    animation: mobileMenuIn .22s ease both;
  }
  .nav-menu.open { display: flex; }

  @keyframes mobileMenuIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
  }

  /* 메뉴 링크 풀너비 */
  .nav-link {
    padding: 13px 16px;
    font-size: .95rem;
    border-radius: 10px;
    justify-content: space-between;
    width: 100%;
  }

  /* 드롭다운: 인라인 펼침 */
  .nav-item--dropdown { width: 100%; }
  .nav-dropdown-trigger { width: 100%; }
  .nav-dropdown {
    position: static;
    transform: none;
    width: 100%;
    border-radius: 12px;
    box-shadow: none;
    border: 1px solid var(--gray-100);
    backdrop-filter: none;
    animation: none;
    padding: 10px;
    margin-top: 4px;
  }
  @keyframes dropFadeIn { from {} to {} } /* 모바일 애니 없음 */

  .nav-dropdown__grid { grid-template-columns: 1fr 1fr; gap: 4px; }
  .nav-dropdown__item { padding: 10px 12px; }

  /* ── 모바일 메뉴 하단 CTA 버튼 통합 ── */
  .nav-menu::after {
    content: '';
    display: block;
    margin-top: auto;
  }

  /* 모바일 CTA 버튼 2개 */
  .nav-mobile-cta {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    padding: 16px 0 0;
    margin-top: 8px;
    border-top: 1px solid var(--gray-100);
  }
  .nav-mobile-cta .nav-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: var(--r-sm);
    font-size: .95rem;
    font-weight: 600;
    color: var(--ink-700);
    border: 1.5px solid var(--gray-200);
    text-decoration: none;
    transition: var(--transition);
  }
  .nav-mobile-cta .nav-login-btn:hover {
    border-color: var(--mint-400);
    color: var(--mint-700);
    background: rgba(0,212,170,.04);
  }
  .nav-mobile-cta .nav-order-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--r-sm);
    font-size: .95rem;
    font-weight: 600;
    color: var(--mint-700);
    border: 1.5px solid var(--mint-400);
    background: rgba(0,212,170,0.06);
    text-decoration: none;
    transition: var(--transition);
  }
  .nav-mobile-cta .nav-order-btn:hover {
    background: rgba(0,212,170,0.14);
    border-color: var(--mint-600);
  }
  /* 가입안내 그룹 라벨 (가입 문의 / 가입 신청 버튼 위) */
  .nav-mobile-cta__label {
    font-size: .74rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: .02em;
    margin-top: 4px;
  }
  /* 가입 문의 / 가입 신청 — 링크 없는 안내용 버튼 (클릭 불가) */
  .nav-mobile-cta .nav-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 20px;
    border-radius: var(--r-sm);
    font-size: .95rem;
    font-weight: 700;
    color: var(--white);
    background: var(--mint-600);
    text-decoration: none;
    box-shadow: 0 3px 12px rgba(0,212,170,.32);
    cursor: default;
  }
}

@media (max-width: 480px) {
  .nav-container { padding: 0 16px; height: 72px; }
  .nav-logo__icon { width: 50px; height: 50px; }
  .nav-logo__text { font-size: 1.05rem; }
  .nav-dropdown__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HERO — 2단 레이아웃 (좌: 텍스트 + CTA / 우: 목업 이미지)
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 68px);
  background: linear-gradient(150deg,
    #f0fdf9 0%,
    #e6faf4 45%,
    #f0fdf9 100%);
  display: flex;
  align-items: center;
}

/* ── 배경 그라디언트 오브 ── */
.hero__orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
}
.hero__orb--tl {
  width: 600px; height: 600px;
  top: -200px; left: -150px;
  background: radial-gradient(circle, rgba(0,212,170,0.20) 0%, transparent 70%);
}
.hero__orb--br {
  width: 500px; height: 500px;
  bottom: -150px; right: -100px;
  background: radial-gradient(circle, rgba(0,190,150,0.16) 0%, transparent 70%);
}
.hero__orb--c {
  width: 400px; height: 400px;
  top: 20%; left: 40%;
  background: radial-gradient(circle, rgba(100,235,200,0.14) 0%, transparent 70%);
  filter: blur(70px);
}

/* ── 2단 Inner ── */
.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 96px;
  padding-top: calc(var(--hero-padding-top) + 20px);
  padding-bottom: 80px;
}

/* ── 좌측 텍스트 ── */
.hero__left {
  display: flex;
  flex-direction: column;
  gap: 0;
  animation: fadeUp .6s ease both;
}

.hero__title {
  font-size: clamp(32px, 4.2vw, 58px);
  font-weight: 900;
  color: #111;
  line-height: 1.22;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
  word-break: keep-all;
}

.hero__sub {
  font-size: clamp(14px, 1.3vw, 16px);
  color: #555;
  line-height: 1.8;
  margin: 0 0 36px;
  word-break: keep-all;
}

/* ── 버튼 ── */
.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 999px;
  font-size: clamp(14px, 1.2vw, 15px);
  font-weight: 700;
  font-family: var(--font);
  text-decoration: none;
  white-space: nowrap;
  transition: all .22s ease;
  cursor: pointer;
}
/* ── 스토어 버튼 (히어로) ── */
.hero__btn--android,
.hero__btn--ios {
  gap: 12px;
  padding: 12px 24px;
  border-radius: 14px;
  min-width: 160px;
}
.hero__btn--android {
  background: #1a1a2e;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 20px rgba(0,0,0,0.22);
}
.hero__btn--android:hover {
  background: #0f0f1e;
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(0,0,0,0.30);
}
.hero__btn--android .fa-google-play { color: #78d64b; font-size: 1.6rem; flex-shrink: 0; }
.hero__btn--ios {
  background: #fff;
  color: #1a1a2e;
  border: 1.5px solid rgba(0,0,0,0.10);
  box-shadow: 0 4px 20px rgba(0,0,0,0.10);
}
.hero__btn--ios:hover {
  background: #f5f5f5;
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(0,0,0,0.15);
}
.hero__btn--ios .fa-apple { font-size: 1.7rem; flex-shrink: 0; }

.hero__btn-store-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.hero__btn-store-sub {
  font-size: .65rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.2;
  opacity: .75;
}
.hero__btn-store-main {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* ── 우측 비주얼 ── */
.hero__right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  /* animation 제거: animation이 stacking context를 생성해 mix-blend-mode가 hero 배경까지 블렌딩 못함 */
}

/* ── 캐릭터 래퍼 (히어로 중앙 이미지 배경) ── */
.hero__char-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  background: linear-gradient(150deg, #f0fdf9 0%, #e6faf4 45%, #f0fdf9 100%);
  border-radius: 50%;
}

/* ── 히어로 메인 이미지 ── */
/* 이미지 자체 배경(#EAFBF5)이 히어로 그라디언트와 완전히 동일하지 않으므로
   가장자리를 방사형 마스크로 서서히 투명하게 만들어 경계선을 자연스럽게 없앰 */
.hero__main-img {
  width: 100%;
  max-width: 380px;
  height: auto;
  display: block;
  object-fit: contain;
  position: relative;
  z-index: 1;
  border-radius: 24px;
  -webkit-mask-image: radial-gradient(circle at center, #000 46%, transparent 76%);
  mask-image: radial-gradient(circle at center, #000 46%, transparent 76%);
  /* 캐릭터 얼굴(피부톤)을 살짝 더 환하게 보정 (과하면 배경이 하얗게 들뜨므로 값 축소) */
  filter: brightness(1.06) saturate(1.03);
}

/* ── 플로팅 카드 ── */
.hero__float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 14px;
  padding: 11px 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
  min-width: 200px;
  max-width: 240px;
  z-index: 3;
  animation: floatY 3.5s ease-in-out infinite;
}
.hero__float--tl { top: 20px;   left: -60px;  animation-delay: 0s; }
.hero__float--tr { top: 20px;   right: -50px; animation-delay: .5s; }
.hero__float--bl { bottom: 30px; left: -50px;  animation-delay: 1s; }
.hero__float--br { bottom: 30px; right: -40px; animation-delay: 1.5s; }

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

.hero__float-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
  flex-shrink: 0;
}
.hero__float-icon--qr     { background: var(--qr-tint);     color: var(--qr-ink); }
.hero__float-icon--manual { background: var(--manual-tint); color: var(--manual-ink); }
.hero__float-icon--sms    { background: var(--sms-tint);    color: var(--sms-ink); }
.hero__float-icon--link   { background: var(--link-tint);   color: var(--link-ink); }

.hero__float-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hero__float-text strong {
  font-size: .75rem;
  font-weight: 700;
  color: #222;
  white-space: nowrap;
}
.hero__float-text span {
  font-size: .68rem;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hero__left, .hero__right { animation: none; }
  .hero__float { animation: none; }
}

/* ─── 히어로 반응형 ─── */
@media (max-width: 960px) {
  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding-bottom: 60px;
  }
  .hero__actions  { justify-content: center; }
  .hero__right    { min-height: 360px; }
  .hero__float--tl { left: 0; top: 0; }
  .hero__float--tr { right: 0; top: 0; }
  .hero__float--bl { left: 0; bottom: 20px; }
  .hero__float--br { right: 0; bottom: 20px; }
}

@media (max-width: 600px) {
  .hero { min-height: auto; padding: 0; }
  .hero__inner {
    gap: 32px;
    padding-top: calc(var(--hero-padding-top) + 28px);
    padding-bottom: 48px;
  }
  .hero__title { font-size: clamp(28px, 8vw, 38px); letter-spacing: -0.01em; }
  .hero__sub   { font-size: .88rem; }
  .hero__right    { min-height: 300px; }
  /* 모바일: 설명 문구는 숨기고 타이틀만 표시, 카드 크기 축소 */
  .hero__float {
    min-width: 0;
    max-width: 118px;
    padding: 8px 10px;
    gap: 7px;
    border-radius: 11px;
  }
  .hero__float-icon { width: 26px; height: 26px; border-radius: 8px; font-size: .74rem; }
  .hero__float-text strong { font-size: .72rem; }
  .hero__float-text span { display: none; }
  .hero__float--tl { left: 2px;  top: 0; }
  .hero__float--tr { right: 2px; top: 0; }
  .hero__float--bl { left: 2px;  bottom: 10px; }
  .hero__float--br { right: 2px; bottom: 10px; }
  .hero__orb--tl, .hero__orb--br { display: none; }
  .hero__actions { flex-direction: column; align-items: center; }
  .hero__btn { width: 100%; max-width: 280px; }
}

/* QR SVG currentColor 연동 — .qr-code-art 색상을 CSS로 제어 */
.qr-code-art svg {
  color: var(--qr-ink);
}

/* ============================================================
   SECTION SHARED
   ============================================================ */
.section-header { text-align: center; margin-bottom: 60px; }

/* section badge */
.section-badge {
  display: inline-block;
  background: var(--mint-50); color: var(--mint-600);
  border: 1px solid var(--mint-200);
  border-radius: var(--r-xs);
  padding: 5px 14px;
  font-size: .76rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: 16px;
}

.section-header h2 {
  font-size: clamp(1.65rem, 3vw, 2.3rem);
  font-weight: 800; color: var(--text-heading);
  line-height: 1.3; letter-spacing: -.4px; margin-bottom: 14px;
}

/* 모바일 전용 줄바꿈 — 데스크탑에선 숨김 */
.mo-br { display: none; }
@media (max-width: 600px) {
  .mo-br { display: block; }
  .section-header h2  { letter-spacing: -0.01em; }
  .payment-title      { letter-spacing: -0.01em; }
}
.section-header p { font-size: .97rem; color: var(--text-muted); }

/* 모바일 전용 요소 — 데스크탑에서는 숨김 */
.mo-only { display: none; }

/* 결제서비스 카드 좌우 스와이프 힌트 (768px 이하에서만 노출, 표시 여부는 .mo-only가 제어) */
.features-swipe-hint {
  margin-top: 10px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--mint-600);
  align-items: center;
  gap: 6px;
}
.features-swipe-hint i { font-size: .72rem; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ============================================================
   FEATURES OVERVIEW
   ============================================================ */
.features-overview {
  padding: 96px 0;
  background: #ffffff;
}

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

.feature-card {
  display: block;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r-lg);
  padding: 28px 22px 36px;
  text-align: center;
  position: relative; overflow: hidden;
  transition: var(--transition);
}
.feature-card:hover {
  border-color: transparent;
  box-shadow: var(--sh-xl);
  transform: translateY(-6px);
}
.feature-card:nth-child(1):hover { border-top: 3px solid var(--qr-ink); }
.feature-card:nth-child(2):hover { border-top: 3px solid var(--manual-ink); }
.feature-card:nth-child(3):hover { border-top: 3px solid var(--sms-ink); }
.feature-card:nth-child(4):hover { border-top: 3px solid var(--link-ink); }

.feature-icon-wrap {
  width: 64px; height: 64px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
  transition: var(--transition);
}
.feature-card:hover .feature-icon-wrap { transform: scale(1.08); }

/* 아이콘 배경 — 민트/서비스 컬러 솔리드 */
.qr-gradient     { background: var(--qr-ink); }
.manual-gradient { background: var(--manual-ink); }
.sms-gradient    { background: var(--sms-ink); }
.link-gradient   { background: var(--link-ink); }

.feature-icon-3d { font-size: 1.6rem; color: var(--white); }

.feature-card h3 {
  font-size: 1.05rem; font-weight: 800; color: var(--text-heading); margin-bottom: 8px;
}
.feature-card p { font-size: .87rem; color: var(--text-muted); line-height: 1.6; }

.feature-arrow {
  position: absolute; bottom: 16px; right: 18px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--gray-100);
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; color: var(--text-muted);
  transition: var(--transition);
}
.feature-card:hover .feature-arrow { background: var(--mint-500); color: var(--white); transform: translate(3px,-3px); }

/* ============================================================
   PAYMENT SECTIONS
   ============================================================ */
.payment-section { padding: 96px 0; position: relative; overflow: hidden; }

/* ─────────────────────────────────────────────────────
   결제 섹션 배경색 — 홀짝 교차 규칙
   홀수(QR·SMS): 흰 기반 + 서비스 컬러 그라데이션
   짝수(수기·링크): 연한 회색 기반 + 서비스 컬러 그라데이션
   ───────────────────────────────────────────────────── */

/* 1번(홀) QR — 흰 기반, 민트 포인트 */
.qr-section {
  background:
    radial-gradient(ellipse 55% 45% at 88% 18%, rgba(0,212,170,0.09) 0%, transparent 65%),
    radial-gradient(ellipse 38% 38% at 8%  82%, rgba(0,212,170,0.05) 0%, transparent 65%),
    #ffffff;
}

/* 2번(짝) 수기 — 연회색 기반, 시안 포인트 */
.manual-section {
  background:
    radial-gradient(ellipse 55% 45% at 12% 18%, rgba(14,165,233,0.08) 0%, transparent 65%),
    radial-gradient(ellipse 38% 38% at 92% 82%, rgba(14,165,233,0.05) 0%, transparent 65%),
    #f7fafb;
}

/* 3번(홀) SMS — 흰 기반, 에메랄드 포인트 */
.sms-section {
  background:
    radial-gradient(ellipse 55% 45% at 88% 18%, rgba(5,150,105,0.08) 0%, transparent 65%),
    radial-gradient(ellipse 38% 38% at 8%  82%, rgba(5,150,105,0.04) 0%, transparent 65%),
    #ffffff;
}

/* 4번(짝) 링크 — 연회색 기반, 바이올렛 포인트 */
.link-section {
  background:
    radial-gradient(ellipse 55% 45% at 12% 18%, rgba(139,92,246,0.08) 0%, transparent 65%),
    radial-gradient(ellipse 38% 38% at 92% 82%, rgba(139,92,246,0.05) 0%, transparent 65%),
    #f8f7fb;
}

.payment-layout {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 72px; align-items: center;
}
.payment-layout.reverse { direction: rtl; }
.payment-layout.reverse > * { direction: ltr; }

/* Payment badge */
.payment-badge {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: var(--r-xs);
  padding: 6px 14px;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: 18px;
}
.qr-badge     { background: var(--qr-tint);     color: var(--qr-ink);     border: 1px solid var(--mint-200); }
.manual-badge { background: var(--manual-tint);  color: var(--manual-ink);  border: 1px solid #a5f3fc; }
.sms-badge    { background: var(--sms-tint);     color: var(--sms-ink);     border: 1px solid #bbf7d0; }
.link-badge   { background: var(--link-tint);    color: var(--link-ink);    border: 1px solid #ddd6fe; }

.payment-title {
  font-size: clamp(1.65rem, 2.8vw, 2.2rem);
  font-weight: 800; color: var(--text-heading);
  line-height: 1.3; letter-spacing: -.4px; margin-bottom: 18px;
}

/* highlight-text — 서비스별 포인트 컬러 */
.highlight-text {
  background: none; -webkit-text-fill-color: var(--qr-ink); color: var(--qr-ink);
}
.manual-section .highlight-text { -webkit-text-fill-color: var(--manual-ink); color: var(--manual-ink); }
.sms-section    .highlight-text { -webkit-text-fill-color: var(--sms-ink);    color: var(--sms-ink); }
.link-section   .highlight-text { -webkit-text-fill-color: var(--link-ink);   color: var(--link-ink); }

.payment-desc { font-size: .97rem; color: var(--text-muted); line-height: 1.8; margin-bottom: 28px; }

/* Steps */
.payment-steps { margin-bottom: 26px; }
.step-item { display: flex; align-items: flex-start; gap: 14px; }

.step-num {
  width: 36px; height: 36px; border-radius: 50%;
  font-size: .72rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-family: 'Inter', sans-serif;
  /* QR: 메인 민트 */
  background: var(--mint-500); color: var(--white);
  box-shadow: 0 3px 8px rgba(0,212,170,.28);
}
.manual-num { background: var(--manual-ink); box-shadow: 0 3px 8px rgba(8,145,178,.25); }
.sms-num    { background: var(--sms-ink);    box-shadow: 0 3px 8px rgba(5,150,105,.25); }
.link-num   { background: var(--link-ink);   box-shadow: 0 3px 8px rgba(124,58,237,.25); }

.step-info strong { display: block; font-size: .92rem; font-weight: 700; color: var(--text-heading); margin-bottom: 1px; }
.step-info span   { font-size: .83rem; color: var(--text-muted); }

.step-connector { width: 1px; height: 22px; background: var(--gray-200); margin-left: 17px; }

/* Benefit tags */
.payment-benefits { display: flex; flex-wrap: wrap; gap: 8px; }
.benefit-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--white); border: 1.5px solid var(--gray-200);
  border-radius: var(--r-sm);
  padding: 6px 13px; font-size: .8rem; font-weight: 600;
  color: var(--text-body); transition: var(--transition);
}
.benefit-tag i { color: #00be96; font-size: .72rem; }
.benefit-tag:hover        { border-color: var(--qr-ink);     color: var(--qr-ink); }
.manual-tag:hover         { border-color: var(--manual-ink); color: var(--manual-ink); }
.sms-tag:hover            { border-color: var(--sms-ink);    color: var(--sms-ink); }
.link-tag:hover           { border-color: var(--link-ink);   color: var(--link-ink); }

/* ── QR Demo Card ── */
.qr-demo-card {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--r-xl); box-shadow: var(--sh-xl);
  overflow: hidden; max-width: 310px; margin: 0 auto;
}
.qr-demo-header {
  background: linear-gradient(135deg, var(--mint-600), var(--mint-700));
  color: var(--white);
  padding: 14px 18px; font-weight: 700; font-size: .88rem;
}
.qr-code-display { padding: 28px 22px; text-align: center; }
.qr-code-art {
  display: inline-block; padding: 14px;
  background: var(--white); border-radius: var(--r-md);
  border: 1.5px solid var(--mint-100);
  box-shadow: var(--sh-sm); margin-bottom: 18px;
  position: relative;
  animation: qrPulse 3.5s ease-in-out infinite;
}
@keyframes qrPulse {
  0%,100% { box-shadow: var(--sh-sm); }
  50%      { box-shadow: 0 6px 24px rgba(0,212,170,.22); }
}
/* SVG QR 색상 → 민트 */
.qr-code-art svg rect[fill="#4F46E5"] { fill: var(--mint-600); }

.qr-amount { font-size: 1.5rem; font-weight: 800; color: var(--text-heading); margin-bottom: 6px; font-family: 'Inter', sans-serif; }
.qr-hint   { font-size: .82rem; color: var(--text-muted); }
.qr-demo-footer {
  background: var(--gray-50); padding: 11px 18px;
  display: flex; justify-content: space-between;
  font-size: .76rem; font-weight: 600;
  border-top: 1px solid var(--gray-200);
}
.qr-timer  { color: #b45309; }
.qr-secure { color: var(--mint-600); }

/* ── Card Input Demo ── */
.card-input-demo {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--r-xl); box-shadow: var(--sh-xl);
  padding: 26px; max-width: 350px; margin: 0 auto;
}
.demo-header {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; color: var(--text-heading); font-size: .88rem;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--gray-100);
}
.demo-header i { color: var(--manual-ink); font-size: 1rem; }
.card-visual { margin-bottom: 18px; }

.credit-card {
  /* 카드 비주얼: 민트 그라디언트 */
  background: linear-gradient(135deg, var(--mint-600), var(--mint-700));
  border-radius: var(--r-md); padding: 18px 20px;
  color: var(--white); position: relative; height: 112px; overflow: hidden;
}
.credit-card::before {
  content: ''; position: absolute;
  width: 180px; height: 180px; border-radius: 50%;
  background: rgba(255,255,255,.08); top: -70px; right: -50px;
}
.credit-card::after {
  content: ''; position: absolute;
  width: 110px; height: 110px; border-radius: 50%;
  background: rgba(255,255,255,.05); bottom: -40px; left: -28px;
}
.card-chip {
  width: 32px; height: 22px;
  background: linear-gradient(135deg, #fbbf24, #d97706);
  border-radius: 3px; margin-bottom: 14px; position: relative; z-index: 1;
}
.card-number-display {
  font-size: .9rem; letter-spacing: 2px;
  margin-bottom: 10px; position: relative; z-index: 1;
  font-family: 'Inter', sans-serif;
}
.card-info { display: flex; justify-content: space-between; font-size: .72rem; opacity: .82; position: relative; z-index: 1; }
.card-logo { position: absolute; bottom: 13px; right: 18px; font-weight: 900; font-style: italic; font-size: .95rem; opacity: .88; }

.input-fields { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.input-row { display: flex; flex-direction: column; }
.input-row.two-col { flex-direction: row; gap: 8px; }
.input-row.two-col .input-field { flex: 1; }

.input-field {
  background: var(--gray-50); border: 1.5px solid var(--gray-200);
  border-radius: var(--r-sm); padding: 9px 12px;
}
.input-field:focus-within { border-color: var(--mint-400); }
.input-field label {
  display: block; font-size: .67rem; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 2px;
}
.input-field .input-value { font-size: .86rem; font-weight: 600; color: var(--text-heading); }
.input-value.amount { color: var(--manual-ink); font-size: .92rem; font-weight: 800; font-family: 'Inter', sans-serif; }

.demo-pay-btn {
  width: 100%; background: linear-gradient(135deg, var(--mint-500), var(--mint-600));
  color: var(--white);
  border-radius: var(--r-sm); padding: 12px;
  font-weight: 700; font-size: .88rem;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  box-shadow: 0 4px 14px rgba(0,212,170,.30);
  transition: var(--transition); border: none; cursor: pointer;
}
.demo-pay-btn:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,212,170,.38); }

/* ── SMS Demo ── */
.sms-demo { max-width: 310px; margin: 0 auto; }
.sms-demo .phone-frame {
  background: var(--ink-900); border-radius: 32px; padding: 11px;
  box-shadow: 0 24px 72px rgba(0,212,170,.15), 0 0 0 1px rgba(255,255,255,.07);
}
.phone-top-bar {
  display: flex; justify-content: space-between;
  padding: 3px 14px 7px; font-size: .66rem; color: rgba(255,255,255,.4);
}
.sms-chat { background: #f2f2f7; border-radius: 24px; overflow: hidden; min-height: 390px; }
.sms-header {
  background: var(--white); padding: 13px 15px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--gray-100);
}
.sms-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--mint-500), var(--mint-700));
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.sms-sender-info strong { display: block; font-size: .85rem; color: var(--text-heading); }
.sms-sender-info span   { font-size: .7rem; color: var(--sms-ink); }

.message-list { padding: 14px 11px; display: flex; flex-direction: column; gap: 10px; }
.message { display: flex; flex-direction: column; }
.message.received { align-items: flex-start; }
.message.sent     { align-items: flex-end; }

.msg-bubble {
  max-width: 82%; padding: 9px 13px; border-radius: 16px;
  font-size: .78rem; line-height: 1.55;
  background: var(--white); color: var(--text-body);
  box-shadow: 0 1px 3px rgba(0,0,0,.07);
}
/* 보낸 메시지: 민트 계열 */
.sent-bubble { background: linear-gradient(135deg, var(--mint-500), var(--mint-600)); color: var(--white); border-radius: 16px; }
.link-bubble {
  background: var(--white); border: 1.5px solid var(--mint-100);
  border-radius: 12px; padding: 9px;
  display: flex; flex-direction: column; gap: 5px;
  font-size: .7rem; color: var(--mint-600);
}
.link-bubble i { font-size: .68rem; }
.link-bubble > span { color: var(--mint-600); word-break: break-all; }

.link-preview {
  display: flex; align-items: center; gap: 7px;
  background: var(--mint-50); border-radius: var(--r-xs); padding: 7px;
}
.preview-icon { font-size: 1.1rem; }
.preview-info strong { display: block; font-size: .73rem; color: var(--text-heading); }
.preview-info span   { font-size: .68rem; color: var(--sms-ink); font-weight: 700; }

.msg-time { font-size: .63rem; color: var(--text-light); margin-top: 2px; padding: 0 3px; }

/* ── Social Post ── */
.link-demo { max-width: 330px; margin: 0 auto; }
.social-post {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--r-lg); box-shadow: var(--sh-xl); overflow: hidden;
}
.post-header {
  padding: 13px 15px; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--gray-100);
}
.post-avatar {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, #fda4af, #fb7185);
  border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.post-user strong { display: block; font-size: .86rem; color: var(--text-heading); }
.post-user span   { font-size: .7rem; color: var(--text-muted); }

.post-image {
  background: linear-gradient(135deg, #fdf2f8, #fce7f3);
  aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
}
.product-image-placeholder { text-align: center; color: var(--text-muted); }
.product-emoji { font-size: 3.5rem; display: block; margin-bottom: 7px; }
.product-image-placeholder span { font-size: .83rem; font-weight: 600; }

.post-content { padding: 13px 15px; }
.post-content p { font-size: .8rem; color: var(--text-body); line-height: 1.6; margin-bottom: 11px; }

.link-card-preview {
  display: flex; align-items: center; gap: 9px;
  background: var(--link-tint); border: 1.5px solid #ddd6fe;
  border-radius: var(--r-sm); padding: 9px 11px;
  transition: var(--transition);
}
.link-card-preview:hover { background: #ede9fe; transform: translateX(3px); }
.link-thumb {
  width: 34px; height: 34px; background: var(--link-ink);
  border-radius: var(--r-xs);
  display: flex; align-items: center; justify-content: center; font-size: .95rem;
}
.link-info strong { display: block; font-size: .78rem; color: var(--text-heading); }
.link-info span   { font-size: .7rem; color: var(--link-ink); font-weight: 700; }
.link-card-preview > i { color: var(--text-light); font-size: .72rem; }

.post-actions {
  padding: 11px 15px; border-top: 1px solid var(--gray-100);
  display: flex; gap: 14px; font-size: .78rem; color: var(--text-muted); font-weight: 600;
}

/* ============================================================
   WHY SECTION
   ============================================================ */
.why-section {
  padding: 96px 0;
  background: #f8fafb;
}

.why-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }

.why-card {
  background: var(--gray-50); border: 1.5px solid var(--gray-200);
  border-radius: var(--r-lg); padding: 30px 26px;
  transition: var(--transition);
}
.why-card:hover {
  background: var(--white); border-color: var(--mint-400);
  box-shadow: var(--sh-lg); transform: translateY(-4px);
}

.why-icon {
  width: 48px; height: 48px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; color: var(--white);
  margin-bottom: 18px;
  background: var(--mint-500);
  transition: var(--transition);
}
/* 각 카드별 아이콘 색상 */
.why-card:nth-child(2) .why-icon { background: var(--manual-ink); }
.why-card:nth-child(3) .why-icon { background: var(--sms-ink); }
.why-card:nth-child(4) .why-icon { background: #7c3aed; }
.why-card:nth-child(5) .why-icon { background: var(--link-ink); }
.why-card:nth-child(6) .why-icon { background: var(--mint-600); }
.why-card:hover .why-icon { transform: scale(1.08); }

/* ── Why 수치 뱃지 ── */
.why-stat {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, var(--mint-50), rgba(0,212,170,0.12));
  border: 1.5px solid var(--mint-200);
  border-radius: var(--r-full);
  font-size: .82rem;
  font-weight: 800;
  color: var(--mint-700);
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.why-card:nth-child(2) .why-stat { background: rgba(8,145,178,.07);  border-color: #a5f3fc; color: var(--manual-ink); }
.why-card:nth-child(3) .why-stat { background: rgba(5,150,105,.07);  border-color: #bbf7d0; color: var(--sms-ink); }
.why-card:nth-child(4) .why-stat { background: rgba(124,58,237,.07); border-color: #ddd6fe; color: #7c3aed; }
.why-card:nth-child(5) .why-stat { background: rgba(124,58,237,.07); border-color: #ddd6fe; color: var(--link-ink); }
.why-card:nth-child(6) .why-stat { background: linear-gradient(135deg, var(--mint-50), rgba(0,212,170,0.12)); border-color: var(--mint-200); color: var(--mint-700); }

.why-card h3 { font-size: 1.02rem; font-weight: 800; color: var(--text-heading); margin-bottom: 9px; }
.why-card p  { font-size: .875rem; color: var(--text-muted); line-height: 1.7; }

/* ============================================================
   WHY SECTION — 대시보드 소개 블록
   ============================================================ */
.why-dashboard {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr 1.55fr;
  gap: 56px;
  align-items: center;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r-xl);
  padding: 48px 48px 48px 52px;
  box-shadow: var(--sh-md);
  overflow: hidden;
  position: relative;
}
/* 배경 민트 오브 */
.why-dashboard::before {
  content: '';
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,170,.06) 0%, transparent 70%);
  top: -80px; left: -80px;
  pointer-events: none;
}

/* ── 텍스트 영역 ── */
.why-dashboard__title {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 900;
  color: var(--ink-900);
  line-height: 1.25;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
  word-break: keep-all;
}
.why-dashboard__title em {
  font-style: normal;
  color: var(--mint-600);
}
.why-dashboard__desc {
  font-size: .97rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 28px;
}

/* 기능 리스트 */
.why-dashboard__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.why-dashboard__features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .9rem;
  color: var(--text-body);
}
.why-db-badge {
  width: 32px; height: 32px;
  border-radius: var(--r-xs);
  background: var(--mint-50);
  border: 1px solid var(--mint-200);
  display: flex; align-items: center; justify-content: center;
  color: var(--mint-600);
  font-size: .8rem;
  flex-shrink: 0;
}

/* ── 비주얼 래퍼 ── */
.why-dashboard__visual {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 380px;  /* 충분한 세로 공간 확보 */
}

/* ══════════════════════════════════════
   이미지 롤링 슬라이더 (PC + 모바일 앱)
══════════════════════════════════════ */

/* 슬라이더 컨테이너 */
.db-slider {
  position: relative;
  width: 100%;
  flex: 1;                              /* 비주얼 래퍼 높이를 꽉 채움 */
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 20px 64px rgba(0, 0, 0, 0.18);
  background: #f0f4f8;
  height: 380px;                        /* 고정 높이 (absolute 슬라이드 기준) */
  min-height: 340px;
}

/* 각 슬라이드 */
.db-slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 52px;      /* 컨트롤 바 높이만큼 제외 */
  opacity: 0;
  transition: opacity 0.65s ease;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  overflow: hidden;
}
.db-slide--active {
  opacity: 1;
  pointer-events: auto;
}

/* 슬라이드 라벨 (PC / 모바일) */
.db-slide__label {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--r-full);
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
}
.db-slide__label i { color: var(--mint-400); }

/* 이미지 프레임 */
.db-slide__frame {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* PC: 가로형 — 전체 폭 */
.db-slide__frame--pc {
  background: #e8ecf0;
}
.db-slide__frame--pc .db-slide__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* 모바일: 세로형 — 중앙 정렬 */
.db-slide__frame--mobile {
  background: linear-gradient(145deg, #edfdf8, #f0f4f8);
  padding: 24px 0 0;
}
.db-slide__frame--mobile .db-slide__img {
  height: 100%;
  max-height: 340px;
  width: auto;
  max-width: 62%;
  object-fit: contain;
  object-position: top;
  display: block;
  border-radius: 18px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
}

/* ── 컨트롤 바 (하단 고정) ── */
.db-slider__controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  z-index: 5;
}

/* 화살표 버튼 */
.db-slider__arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--gray-300);
  background: var(--white);
  color: var(--gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.db-slider__arrow:hover {
  border-color: var(--mint-500);
  color: var(--mint-600);
  background: var(--mint-50);
  transform: scale(1.08);
}

/* 인디케이터 dots */
.db-slider__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.db-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--gray-300);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}
.db-dot--active {
  background: var(--mint-500);
  width: 24px;
  border-radius: var(--r-full);
  box-shadow: 0 0 8px rgba(0, 212, 170, 0.45);
}

/* ── 반응형 ── */
@media (max-width: 1024px) {
  .why-dashboard {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 36px 32px;
  }
  .why-dashboard__visual { min-height: 300px; }
  .db-slider { height: 300px; min-height: 280px; }
}
@media (max-width: 600px) {
  .why-dashboard { padding: 28px 20px; margin-top: 44px; }
  .why-dashboard__title { font-size: 1.55rem; }
  .why-dashboard__visual { min-height: 260px; }
  .db-slider { height: 260px; min-height: 240px; }
  .db-slide__frame--mobile .db-slide__img { max-width: 72%; }
}

/* ============================================================
   HOW-TO SECTION — 서비스 신청방법
   Why 섹션·Features 섹션과 동일한 카드 그리드 패턴 적용
   ============================================================ */
.howto-section {
  padding: 96px 0;
  background: #f8fafb;
}

/* ══════════════════════════════════════
   4단계 카드 그리드
══════════════════════════════════════ */
.howto-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 44px;
  position: relative;
}

/* 카드 사이 연결선 */
.howto-grid::before {
  content: '';
  position: absolute;
  top: 52px;                        /* 아이콘 수직 중앙 */
  left: calc(12.5% + 14px);
  right: calc(12.5% + 14px);
  height: 2px;
  background: linear-gradient(to right,
    var(--mint-200) 0%,
    var(--mint-400) 50%,
    var(--mint-200) 100%);
  z-index: 0;
  border-radius: 2px;
  pointer-events: none;
}

/* ── 개별 카드 ── */
.howto-card {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r-lg);
  padding: 32px 22px 28px;
  text-align: center;
  position: relative;
  z-index: 1;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 데스크탑: body 래퍼는 투명 — 자식 요소가 column flex 흐름에 참여 */
.howto-card__body {
  display: contents;
}
.howto-card:hover {
  border-color: var(--mint-300, #6ee7d4);
  box-shadow: var(--sh-lg);
  transform: translateY(-5px);
}

/* ── 마지막 카드 — 완료 강조 ── */
.howto-card--final {
  border-color: var(--mint-200);
  background: linear-gradient(160deg, var(--mint-50) 0%, #ffffff 60%);
}
.howto-card--final:hover {
  border-color: var(--mint-500);
  box-shadow: var(--sh-xl);
}

/* ── 단계 번호 배지 ── */
.howto-card__step {
  position: absolute;
  top: 14px; right: 14px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--mint-500);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  font-family: 'Inter', sans-serif;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,212,170,.30);
}
.howto-card--final .howto-card__step {
  background: linear-gradient(135deg, var(--mint-600), #059669);
  box-shadow: 0 2px 10px rgba(5,150,105,.35);
}

/* ── 아이콘 박스 ── */
.howto-card__icon {
  width: 60px; height: 60px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem;
  color: var(--white);
  margin-bottom: 18px;
  transition: var(--transition);
  flex-shrink: 0;
}
.howto-card:hover .howto-card__icon {
  transform: scale(1.1) rotate(-3deg);
}

/* 각 카드 아이콘 색상 */
.howto-card:nth-child(1) .howto-card__icon {
  background: linear-gradient(135deg, var(--mint-500), var(--mint-700));
  box-shadow: 0 6px 18px rgba(0,212,170,.30);
}
.howto-card:nth-child(2) .howto-card__icon {
  background: linear-gradient(135deg, #0891b2, #0e7490);
  box-shadow: 0 6px 18px rgba(8,145,178,.28);
}
.howto-card:nth-child(3) .howto-card__icon {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  box-shadow: 0 6px 18px rgba(124,58,237,.28);
}
.howto-card:nth-child(4) .howto-card__icon {
  background: linear-gradient(135deg, #059669, #047857);
  box-shadow: 0 6px 18px rgba(5,150,105,.28);
}

/* ── 제목 ── */
.howto-card__title {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--text-heading);
  margin-bottom: 10px;
  line-height: 1.3;
  word-break: keep-all;
}

/* ── 설명 ── */
.howto-card__desc {
  font-size: .84rem;
  color: var(--text-muted);
  line-height: 1.75;
  word-break: keep-all;
  margin-bottom: 14px;
}

/* ── 체크리스트 ── */
.howto-card__checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin-top: auto;
}
.howto-card__checklist li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .8rem;
  color: var(--text-body);
  font-weight: 500;
}
.howto-card__checklist li .fa-check {
  color: var(--mint-600);
  font-size: .72rem;
  flex-shrink: 0;
}

/* ── 스토어 태그 (Step 3) ── */
.howto-card__stores {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: auto;
}
.howto-store-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: .74rem;
  font-weight: 700;
}
.howto-store-tag--android {
  background: #1a1a2e;
  color: #78d64b;
}
.howto-store-tag--ios {
  background: var(--gray-100);
  color: var(--ink-900);
  border: 1px solid var(--gray-200);
}

/* ── 강조 텍스트 ── */
.howto-em {
  color: var(--mint-600);
  font-weight: 800;
  -webkit-text-fill-color: var(--mint-600);
}

/* ── 태블릿: 2×2 그리드 ── */
@media (max-width: 1024px) {
  .howto-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .howto-grid::before { display: none; }
}

/* ══════════════════════════════════════
   모바일 600px 이하 — 세로 1열 카드 리스트
══════════════════════════════════════ */
@media (max-width: 600px) {

  .howto-section { padding: 64px 0; }

  /* 그리드 해제 → 세로 flex */
  .howto-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 32px;
  }
  .howto-grid::before,
  .howto-grid::after { display: none; }

  /* ── 카드: 아이콘 왼쪽 + body 오른쪽 ── */
  .howto-card {
    display: flex;
    flex-direction: row !important;   /* column 덮어쓰기 */
    align-items: flex-start !important;
    gap: 14px;
    /* 크기/여백 */
    width: 100%;
    padding: 18px 16px 18px 16px;
    /* 배경/테두리 */
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    /* 텍스트 */
    text-align: left;
    /* 데스크탑 hover 초기화 */
    transform: none !important;
  }
  .howto-card:hover {
    border-color: var(--mint-200);
    box-shadow: 0 4px 16px rgba(0,212,170,.1);
    transform: none !important;
  }
  .howto-card--final {
    border-color: var(--mint-200);
    background: linear-gradient(135deg, var(--mint-50) 0%, #fff 70%);
  }

  /* 단계 번호 배지 우상단 */
  .howto-card__step {
    position: absolute;
    top: -11px;
    right: 12px;
    width: 26px; height: 26px;
    font-size: .64rem;
    z-index: 3;
  }

  /* 아이콘 — 왼쪽 고정, 절대 축소 금지 */
  .howto-card__icon {
    width: 48px;
    height: 48px;
    min-width: 48px;   /* flex-shrink 방지 핵심 */
    border-radius: 13px;
    font-size: 1.1rem;
    margin: 0;
    flex-shrink: 0;
    align-self: flex-start;
  }
  .howto-card:hover .howto-card__icon { transform: none; }

  /* ── body 래퍼: 오른쪽 텍스트 전체 ── */
  .howto-card__body {
    /* display:contents 해제 → 정상 flex column */
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-width: 0;    /* 텍스트 overflow 방지 */
    gap: 0;
  }

  /* 제목 */
  .howto-card__title {
    font-size: .95rem;
    font-weight: 800;
    color: var(--text-heading);
    margin-bottom: 6px;
    line-height: 1.35;
    word-break: keep-all;
  }

  /* 설명 */
  .howto-card__desc {
    font-size: .8rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 10px;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  /* 모바일에서 강제 줄바꿈 태그 무시 */
  .howto-card__desc br { display: none; }

  /* 체크리스트 */
  .howto-card__checklist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    margin-top: 0;
  }
  .howto-card__checklist li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .78rem;
    font-weight: 500;
    color: var(--text-body);
    word-break: keep-all;
  }
  .howto-card__checklist li .fa-check {
    color: var(--mint-600);
    font-size: .66rem;
    flex-shrink: 0;
  }

  /* 스토어 태그 */
  .howto-card__stores {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0;
    justify-content: flex-start;
  }
  .howto-store-tag {
    font-size: .72rem;
    padding: 4px 10px;
    white-space: nowrap;
  }
}

/* ============================================================
   PRICING SECTION — 서비스 이용요금
   ============================================================ */
.pricing-section {
  padding: 96px 0;
  background: var(--gray-50);
}

/* ── 테이블 래퍼 ── */
.pricing-table {
  border-radius: 20px;
  overflow: hidden;
  border: 1.5px solid var(--gray-200);
  box-shadow: var(--sh-lg);
  margin-bottom: 24px;
}

/* ── 공통 행 ── */
.pt-row {
  display: grid;
  grid-template-columns: 160px 1fr 260px;
  border-bottom: 1px solid var(--gray-200);
  background: #fff;
  transition: background .18s ease;
}
.pt-row:last-child { border-bottom: none; }
.pt-row:hover:not(.pt-row--header) { background: var(--mint-50); }
.pt-row--header {
  background: linear-gradient(135deg, var(--mint-600), var(--mint-700));
}
.pt-row--accent { background: #fafffe; }
.pt-row--last   { background: #fff; }

/* ── 셀 공통 ── */
.pt-cell {
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .92rem;
  line-height: 1.6;
}
.pt-cell + .pt-cell {
  border-left: 1px solid var(--gray-200);
}

/* 헤더 셀 */
.pt-row--header .pt-cell {
  color: #fff;
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .04em;
  border-left-color: rgba(255,255,255,0.2);
}

/* 라벨 셀 */
.pt-cell--label {
  font-weight: 700;
  color: var(--ink-800);
  font-size: .9rem;
  background: rgba(0,212,170,0.04);
  flex-shrink: 0;
}
.pt-cell--label i {
  color: var(--mint-600);
  font-size: .85rem;
  width: 16px;
  text-align: center;
}

/* 값 셀 */
.pt-cell--value {
  font-weight: 500;
  color: var(--ink-800);
  flex-direction: column;
  align-items: flex-start;
}

/* 리스트 형 값 */
.pt-cell--list {
  padding: 16px 22px;
}
/* 항목이 1개뿐인 리스트 셀 — 위아래 여백을 동일하게 맞추기 위해 세로 중앙 정렬 */
.pt-cell--list-mid {
  justify-content: center;
  height: 100%;
}
.pt-cell--list ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pt-cell--list ul li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  color: var(--text-body);
}
.pt-cell--list ul li::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--mint-500);
  flex-shrink: 0;
}

/* 태그 (법인 등) */
.pt-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  background: var(--manual-tint);
  color: var(--manual-ink);
  border: 1px solid rgba(8,145,178,0.15);
}

/* 무료 배지 */
.pt-badge--free {
  display: inline-flex;
  align-items: center;
  padding: 4px 16px;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 700;
  background: var(--mint-50);
  color: var(--mint-700);
  border: 1.5px solid var(--mint-200);
}

/* ══════════════════════════════════════
   결제 수수료 — 매출액 구간 바 차트
══════════════════════════════════════ */

/* 수수료 셀 패딩 조정 */
.pt-cell--fee {
  padding: 20px 24px;
  gap: 0;
}

/* 상단 안내 */
.fee-intro {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.fee-intro__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  background: var(--mint-50);
  border: 1.5px solid var(--mint-200);
  border-radius: var(--r-full);
  font-size: .76rem;
  font-weight: 700;
  color: var(--mint-700);
}
.fee-intro__vat {
  font-size: .75rem;
  color: var(--gray-400);
  font-weight: 500;
}

/* ── 수수료 바 목록 ── */
.fee-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* 각 구간 행 */
.fee-bar {
  display: grid;
  grid-template-columns: 160px 1fr 56px;
  align-items: center;
  gap: 12px;
}

/* 좌측 라벨 */
.fee-bar__left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.fee-bar__tier {
  font-size: .82rem;
  font-weight: 800;
  color: var(--ink-800);
  white-space: nowrap;
}
.fee-bar__range {
  font-size: .72rem;
  color: var(--gray-400);
  white-space: nowrap;
}

/* 트랙 (배경) */
.fee-bar__track {
  height: 28px;
  background: var(--gray-100);
  border-radius: var(--r-full);
  overflow: hidden;
  position: relative;
}

/* 채워진 바 */
.fee-bar__fill {
  height: 100%;
  border-radius: var(--r-full);
  transition: width 1s cubic-bezier(.22,.68,0,1.2);
  position: relative;
}
/* 바 위 반짝임 */
.fee-bar__fill::after {
  content: '';
  position: absolute;
  top: 4px; left: 10px; right: 10px;
  height: 6px;
  background: rgba(255,255,255,0.28);
  border-radius: var(--r-full);
}

/* 구간별 바 색상 (낮을수록 초록 → 높을수록 주황) */
.fee-bar--1 .fee-bar__fill { background: linear-gradient(90deg, #00c896, #00D4AA); }
.fee-bar--2 .fee-bar__fill { background: linear-gradient(90deg, #00b4cc, #0891b2); }
.fee-bar--3 .fee-bar__fill { background: linear-gradient(90deg, #6366f1, #7c3aed); }
.fee-bar--4 .fee-bar__fill { background: linear-gradient(90deg, #f59e0b, #d97706); }
.fee-bar--5 .fee-bar__fill { background: linear-gradient(90deg, #f97316, #ea580c); }

/* 우측 수치 */
.fee-bar__right {
  display: flex;
  justify-content: flex-end;
}
.fee-bar__rate {
  font-size: 1.05rem;
  font-weight: 900;
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
/* 구간별 수치 색상 */
.fee-bar--1 .fee-bar__rate { color: #00a884; }
.fee-bar--2 .fee-bar__rate { color: #0891b2; }
.fee-bar--3 .fee-bar__rate { color: #7c3aed; }
.fee-bar--4 .fee-bar__rate { color: #d97706; }
.fee-bar--5 .fee-bar__rate { color: #ea580c; }

/* 행 hover 강조 */
.fee-bar:hover .fee-bar__fill { filter: brightness(1.07); }
.fee-bar:hover .fee-bar__tier { color: var(--mint-700); }

/* 첫 구간 특별 강조 (가장 낮은 수수료) */
.fee-bar--1 .fee-bar__tier::after {
  content: ' ✦';
  color: var(--mint-500);
  font-size: .7rem;
}
.fee-bar--1 .fee-bar__track {
  background: var(--mint-50);
  border: 1px solid var(--mint-100);
}

/* 강조 수치 */
.pt-highlight {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--mint-600);
  letter-spacing: -0.02em;
}
/* 강조 수치 내 보조 설명 텍스트 (예: "(일부업종 제외)") — 본문보다 작게 */
.pt-highlight__sub {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: normal;
  margin-left: 2px;
}

/* 비고 셀 */
.pt-cell--note {
  font-size: .8rem;
  color: var(--gray-500);
  align-items: flex-start;
}
.pt-cell--note-box {
  flex-direction: column;
  gap: 5px;
  padding: 16px 18px;
  background: rgba(0,212,170,0.03);
}
.pt-cell--note-box p {
  font-size: .78rem;
  color: var(--gray-500);
  line-height: 1.5;
  margin: 0;
}

/* 하단 안내 */
.pricing-notice {
  display: block;
  padding: 14px 20px;
  background: var(--mint-50);
  border: 1px solid var(--mint-100);
  border-radius: 10px;
  font-size: .84rem;
  color: var(--gray-500);
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.pricing-notice i {
  display: inline;
  color: var(--mint-500);
  font-size: .9rem;
  margin-right: 6px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.pricing-notice span {
  display: inline;
}
.pricing-notice a {
  color: var(--mint-600);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── 반응형 ── */
@media (max-width: 860px) {
  .pt-row {
    grid-template-columns: 120px 1fr;
  }
  .pt-cell--note { display: none; }
  .fee-bar {
    grid-template-columns: 120px 1fr 50px;
    gap: 8px;
  }
  .fee-bar__range { display: none; }       /* 모바일에선 범위 텍스트 숨김 */
}
@media (max-width: 600px) {
  .pt-row {
    grid-template-columns: 1fr;
    border-bottom: 1px solid var(--gray-200);
  }
  .pt-cell--label {
    background: rgba(0,212,170,0.07);
    border-bottom: 1px solid var(--gray-100);
  }
  .pt-cell + .pt-cell { border-left: none; border-top: 1px solid var(--gray-100); }
  .fee-bar {
    grid-template-columns: 90px 1fr 46px;
    gap: 8px;
  }
  .fee-bar__track { height: 22px; }
  .fee-bar__tier  { font-size: .78rem; }
  .fee-bar__rate  { font-size: .92rem; }
}

/* ============================================================
   TESTIMONIALS — 실제 판매자 후기
   ============================================================ */
.testimonials-section {
  padding: 96px 0;
  background: var(--white);
}

/* 3열 그리드 */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ── 카드 ── */
.testi-card {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r-xl);
  padding: 28px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
/* 카드 상단 민트 라인 */
.testi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mint-400), var(--mint-600));
  opacity: 0;
  transition: opacity .25s ease;
}
.testi-card:hover {
  border-color: var(--mint-200);
  box-shadow: 0 12px 40px rgba(0,212,170,.12);
  transform: translateY(-5px);
}
.testi-card:hover::before { opacity: 1; }

/* ── 카드 상단 행 (업종 + 별점) ── */
.testi-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* 업종 뱃지 */
.testi-industry {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px 4px 6px;
  border-radius: var(--r-full);
  background: var(--mint-50);
  border: 1px solid var(--mint-100);
}
.testi-industry__icon {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--mint-500);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem;
  flex-shrink: 0;
}
.testi-industry__name {
  font-size: .74rem;
  font-weight: 700;
  color: var(--mint-700);
  white-space: nowrap;
}

/* 별점 */
.testi-stars {
  font-size: .88rem;
  color: #f59e0b;
  letter-spacing: 1px;
  flex-shrink: 0;
}

/* ── 인용문 ── */
.testi-quote {
  flex: 1;
  margin: 0;
  padding: 0;
  font-size: .88rem;
  color: var(--text-body);
  line-height: 1.82;
  word-break: keep-all;
  position: relative;
}
.testi-quote__mark {
  display: inline-block;
  font-family: Georgia, serif;
  font-size: 2.8rem;
  line-height: .5;
  color: var(--mint-200);
  font-weight: 900;
  vertical-align: -0.5rem;
  margin-right: 2px;
  user-select: none;
}

/* ── 작성자 ── */
.testi-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-100);
}
.testi-author__info strong {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink-800);
  margin-bottom: 2px;
}
.testi-author__info span {
  font-size: .78rem;
  color: var(--text-muted);
}

/* ── 아바타 ── */
.testi-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0;
}
/* 3가지 그라데이션 색상 (후기 카드 3개: 후원단체/청소방역/SNS판매) */
.testi-avatar--1 { background: linear-gradient(135deg, var(--mint-500), var(--mint-700)); }
.testi-avatar--2 { background: linear-gradient(135deg, #0891b2, #0e7490); }
.testi-avatar--3 { background: linear-gradient(135deg, #ec4899, #be185d); }

/* 업종 아이콘 색상도 아바타와 맞춤 */
.testi-card:nth-child(1) .testi-industry__icon { background: var(--mint-500); }
.testi-card:nth-child(2) .testi-industry__icon { background: #0891b2; }
.testi-card:nth-child(3) .testi-industry__icon { background: #ec4899; }

/* ── 반응형 ── */
@media (max-width: 1024px) {
  .testi-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 600px) {
  .testi-grid { grid-template-columns: 1fr; gap: 16px; }
  .testimonials-section { padding: 96px 0; }
  .testi-card { padding: 22px 20px 20px; }
  .testi-industry__name { display: none; }   /* 모바일: 아이콘만 */
  .testi-industry { padding: 4px 8px 4px 6px; }
}

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section {
  padding: 96px 0;
  /* 딥 민트-틸 그라디언트 */
  background: linear-gradient(145deg, #063d35 0%, #0a5c50 60%, #0e7a6a 100%);
  position: relative; overflow: hidden; text-align: center;
}
.cta-bg-shapes { position: absolute; inset: 0; pointer-events: none; }
.cta-shape { position: absolute; border-radius: 50%; }
.cta-shape-1 {
  width: 480px; height: 480px; background: rgba(0,212,170,.08);
  top: -200px; right: -100px;
  animation: driftShape 14s ease-in-out infinite;
}
.cta-shape-2 {
  width: 320px; height: 320px; background: rgba(0,212,170,.06);
  bottom: -140px; left: -80px;
  animation: driftShape 10s ease-in-out infinite reverse;
}
.cta-content { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; }

.cta-badge {
  display: inline-block;
  background: rgba(0,212,170,.15);
  color: rgba(255,255,255,.90);
  border: 1px solid rgba(0,212,170,.30);
  border-radius: var(--r-sm);
  padding: 7px 18px; font-size: .82rem; font-weight: 600;
  margin-bottom: 22px;
}

.cta-title {
  font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  font-weight: 800; color: var(--white);
  line-height: 1.28; letter-spacing: -.4px; margin-bottom: 18px;
}
/* CTA 강조 텍스트: 밝은 민트 */
.cta-highlight {
  color: var(--mint-400);
  background: none; -webkit-text-fill-color: var(--mint-400);
}
.cta-desc { font-size: 1.02rem; color: rgba(255,255,255,.65); line-height: 1.8; margin-bottom: 36px; }

.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }

/* CTA 버튼: 민트 그라디언트 → 흰 텍스트 (링크 없는 안내용 — 클릭 불가) */
.cta-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--mint-500); color: var(--white);
  padding: 14px 32px; border-radius: var(--r-sm);
  font-weight: 800; font-size: .97rem;
  box-shadow: 0 6px 22px rgba(0,212,170,.35);
  cursor: default;
}

.cta-btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: #ffffff;
  color: #00be96;
  padding: 14px 28px; border-radius: var(--r-sm);
  font-weight: 700; font-size: .97rem;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  transition: var(--transition);
}
.cta-btn-secondary:hover {
  background: #00be96;
  border-color: #00be96;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,212,170,0.38);
}

.cta-note {
  display: flex; align-items: center; justify-content: center;
  gap: 22px; font-size: .79rem;
  color: rgba(255,255,255,.5); font-weight: 500; flex-wrap: wrap;
}
.cta-note i { color: var(--mint-400); margin-right: 3px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--gray-50);
  color: var(--text-body);
  padding: 48px 0 0;
  border-top: 1px solid var(--gray-200);
  overflow-x: hidden;
}

/* ── 상단: 로고 + 버튼 ── */
.footer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-logo__img {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(0,212,170,.35);
  flex-shrink: 0;
}

.footer-logo__text {
  font-family: 'Gugi', var(--font);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--mint-600);
  line-height: 1.2;
  background: none;
  -webkit-text-fill-color: var(--mint-600);
}

/* 태그라인 */
.footer-tagline {
  font-size: .88rem;
  color: var(--text-muted);
  margin: 0 0 20px;
}

/* 구분선 */
.footer-divider {
  border: none;
  border-top: 1px solid var(--gray-200);
  margin: 0 0 28px;
}

/* ── 사업자 정보 블록 ── */
.footer-biz-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 28px;
}

.footer-biz-block {}

.footer-biz-info {
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.85;
  margin: 0;
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* 신규가입문의 번호 — footer(밝은 배경) 내에서 가장 눈에 띄도록 강조 */
.footer-biz-signup {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--mint-500);
  border: 1px solid var(--mint-600);
  border-radius: var(--r-sm);
  padding: 8px 18px;
  margin-bottom: 10px;
  font-size: .92rem;
  font-weight: 700;
  color: var(--white);
  box-shadow: 0 4px 14px rgba(0,212,170,.28);
}
.footer-biz-signup i { color: var(--white); font-size: .88rem; }
.footer-biz-signup strong { font-size: 1.08rem; font-weight: 800; color: var(--white); }

/* ── 하단: copyright + 약관 ── */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px 0;
  border-top: 1px solid var(--gray-200);
  font-size: .75rem;
  color: var(--text-light);
}

.footer-copyright { margin: 0; }

.footer-policy-links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-policy-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: .75rem;
  transition: color .15s;
}
.footer-policy-links a:hover { color: var(--mint-600); }
.footer-policy-sep { color: var(--gray-300); }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ── 히어로 반응형 — 새 디자인 (hero__stage / hero__top 기반) ── */
/* 세부 반응형은 HERO 블록 내부 @media에서 이미 처리됨 */

/* ── 기타 섹션 반응형 ── */
@media (max-width: 1024px) {
  .features-grid           { grid-template-columns: repeat(2,1fr); }
  .why-grid                { grid-template-columns: repeat(2,1fr); }
  .payment-layout,
  .payment-layout.reverse  { grid-template-columns: 1fr; direction: ltr; gap: 44px; }
}

@media (max-width: 768px) {
  /* 모바일 전용 스와이프 힌트 노출 */
  .mo-only { display: inline-flex; }

  /* 결제서비스 4개 카드(구로) → 가로 스와이프 캐러셀 */
  .features-grid {
    display: flex;
    flex-direction: row;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding: 4px 4px 12px;
    margin: 0 -4px;
    scrollbar-width: none;
  }
  .features-grid::-webkit-scrollbar { display: none; }
  .feature-card {
    flex: 0 0 74%;
    scroll-snap-align: center;
  }
  /* 왜 페이대장 6개 카드 → 가로 스와이프 캐러셀 */
  .why-grid {
    display: flex;
    flex-direction: row;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding: 4px 4px 12px;
    margin: 0 -4px;
    scrollbar-width: none;
  }
  .why-grid::-webkit-scrollbar { display: none; }
  .why-card {
    flex: 0 0 74%;
    scroll-snap-align: center;
  }

  /* 실제 판매자 후기 카드 → 가로 스와이프 캐러셀 */
  .testi-grid {
    display: flex;
    flex-direction: row;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding: 4px 4px 12px;
    margin: 0 -4px;
    scrollbar-width: none;
  }
  .testi-grid::-webkit-scrollbar { display: none; }
  .testi-card {
    flex: 0 0 78%;
    scroll-snap-align: center;
  }

  .features-overview,
  .payment-section,
  .why-section,
  .testimonials-section,
  .cta-section { padding: 64px 0; }

  /* nav 주문조회: 텍스트 숨기고 아이콘 전용 */
  .nav-order { padding: 8px 11px; gap: 0; }
  .nav-order__text { display: none; }
  .nav-order i { font-size: 14px; }

  .footer-head       { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-bottom     { flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer-biz-info   { word-break: break-all; overflow-wrap: anywhere; font-size: .74rem; }

  .cta-actions       { flex-direction: column; align-items: center; }
  .cta-btn-primary,
  .cta-btn-secondary { width: 100%; max-width: 300px; justify-content: center; }

  /* 결제서비스 상세 섹션: 모바일에서는 항상 텍스트(설명) → 이미지(데모) 순서로 표시 */
  .payment-layout.reverse .payment-content { order: -1; }
  .payment-layout.reverse .payment-visual  { order: 1; }
}

@media (max-width: 480px) {
  /* .hero__inner는 .container를 상속하므로 좌우 패딩만 덮어써서
     상하 padding(히어로 상단 여백)이 0으로 초기화되지 않도록 함 */
  .container         { padding-left: 20px; padding-right: 20px; }
  .nav-container     { padding: 0 20px; }
  .footer-biz-info   { font-size: .72rem; line-height: 1.75; }
  .cta-note          { flex-direction: column; gap: 9px; }
  .hero__btn { width: 100%; max-width: 290px; justify-content: center; }
  /* 480px 이하 feature-card padding 축소 (가로 캐러셀 카드 폭도 살짝 넓게) */
  .feature-card {
    padding: 20px 16px 26px;
    flex: 0 0 80%;
  }
  /* 왜 페이대장 카드도 480px 이하에서 폭 넓게 */
  .why-card {
    flex: 0 0 80%;
  }
  /* 실제 판매자 후기 카드도 480px 이하에서 폭 넓게 */
  .testi-card {
    flex: 0 0 84%;
  }
}

/* ============================================================
   QUICK MENU — 우측 고정 퀵메뉴 위젯
   ============================================================ */
.quick-menu {
  position: fixed;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  width: 132px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-sm);
  box-shadow: 0 10px 30px rgba(13,33,55,.14);
  overflow: hidden;
  z-index: 500;
}
.quick-menu__title {
  margin: 0;
  padding: 13px 0;
  text-align: center;
  background: var(--ink-900);
  color: var(--white);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .06em;
}
.quick-menu__list { margin: 0; padding: 0; list-style: none; }
.quick-menu__item + .quick-menu__item { border-top: 1px solid var(--gray-200); }

.quick-menu__link,
.quick-menu__link--static {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px 14px;
  text-decoration: none;
  color: var(--ink-900);
  text-align: center;
  transition: background .15s;
}
.quick-menu__link:hover { background: var(--gray-50); }
.quick-menu__link--static { cursor: default; }

.quick-menu__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 1.1rem;
  color: var(--white);
  box-shadow: 0 2px 6px rgba(13,33,55,.18);
}
.quick-menu__icon--signup  { background: var(--mint-500); }
.quick-menu__icon--youtube { background: #ff0000; }
.quick-menu__icon--blog    { background: #03c75a; font-size: .78rem; font-weight: 800; letter-spacing: -.02em; }
.quick-menu__icon--phone   { background: var(--ink-900); }

.quick-menu__label {
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.4;
  word-break: keep-all;
  color: var(--ink-900);
  letter-spacing: -.01em;
}

/* 태블릿 이하: 화면 폭이 좁아지면 다른 콘텐츠를 가리지 않도록 숨김 */
@media (max-width: 1024px) {
  .quick-menu { display: none; }
}