/* ═══════════════════════════════════════
   SOLUTION 섹션 — solution.css
   daphone-landing-page
═══════════════════════════════════════ */

/* ── 섹션 기본 ── */
.solution {
  background: var(--black2);
  scroll-margin-top: 80px; /* '마케팅 전략' 네비 앵커 보정(sticky 헤더) */
}

/* ── 레이아웃: 좌우 2분할 해제 → 단일 컬럼 세로 스택 ──
   순서: (헤드라인은 .solution__layout 밖 상단) → 원 카운터 → 6항목
   DOM 순서(6항목 먼저)는 그대로 두고 flex order 로 시각 순서만 재배치(콘텐츠 무수정). */
.solution__layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  margin-top: clamp(40px, 6vw, 64px); /* 헤드라인↔원 간격 시원하게(모바일 비례 축소) */
}

/* 헤드라인/태그/리드 — 상단 중앙 정렬 */
.solution > .section-tag,
.solution > .section-title,
.solution > .section-sub {
  text-align: center;
}

/* ── 혜택 리스트 ── */
.solution__benefits {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.solution__benefit {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 24px;
  background: var(--black);
  border-left: 3px solid var(--gold);
  transition:
    transform var(--transition),
    background var(--transition);
}

.solution__benefit:hover {
  transform: translateX(6px);
  background: #0a0a0a;
}

.solution__check {
  width: 28px;
  height: 28px;
  background: var(--gold);
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 900;
  flex-shrink: 0;
  margin-top: 2px;
}

.solution__benefit h4 {
  font-size: 0.98rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--white);
  word-break: keep-all;
}

.solution__benefit p {
  font-size: 0.84rem;
  color: var(--gray2);
  line-height: 1.7;
  word-break: keep-all;
}

/* ── 통계 카드 ── */
.solution__cards {
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: sticky;
  top: 80px;
}

.solution__card {
  background: var(--black3);
  padding: 28px 32px;
  border-left: 4px solid transparent;
  transition: border-color var(--transition);
}

.solution__card:hover {
  border-color: var(--gold);
}

.solution__card-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.solution__card-value {
  font-family: var(--font-en);
  font-size: 2.4rem;
  color: var(--white);
  letter-spacing: 1px;
  line-height: 1;
  margin-bottom: 6px;
}

.solution__card-desc {
  font-size: 0.82rem;
  color: var(--gray2);
}

/* ══════════════════════════════════════
   반응형 — 태블릿 (900px)
══════════════════════════════════════ */
@media (max-width: 900px) {
  .solution__layout {
    gap: 44px;
  }
}

/* ══════════════════════════════════════
   반응형 — 모바일 (640px)
══════════════════════════════════════ */
@media (max-width: 640px) {
  .solution__layout {
    gap: 28px;
  }

  .solution__benefit {
    padding: 18px 18px;
    gap: 14px;
  }

  .solution__benefit h4 {
    font-size: 0.92rem;
  }

  .solution__cards {
    gap: 2px;
  }

  .solution__card {
    padding: 20px 22px;
  }

  .solution__card-value {
    font-size: 2rem;
  }
}

/* ══ 초소형 (360px) ══ */
@media (max-width: 360px) {
  .solution__benefit {
    padding: 16px 14px;
    gap: 12px;
  }

  .solution__card {
    padding: 18px 16px;
  }

  .solution__card-value {
    font-size: 1.8rem;
  }
}

/* ═══════════════════════════════════════════════════════════
   SOLUTION COUNTERS — "파동 치는 원형" 카운터 3 (우측 수치)
   · 비활성 = 회색 원 / 활성·hover = 골드 그라데이션 원 + 동심원 파동(무한)
   · 자동전환(3s)·hover 일시정지·카운트업은 solution-counter.js
   · 파동은 원 뒤(z-index 0), 라벨/수치는 위(z-index 2) → 숫자 가독성 보존
   · 흰 배경(phase2: .solution=transparent) 기준 톤. .scounter 는 신규 클래스라
     phase4/theme-phase2 의 .solution__card 규칙과 충돌하지 않음.
═══════════════════════════════════════════════════════════ */
.solution__counters {
  --scircle: clamp(180px, 22vw, 280px); /* 원 지름 — 연결선 높이 계산과 공유 */
  --sgap: clamp(64px, 7vw, 104px); /* 원 사이 가로 간격 — 넓게(파동 최대에도 안 겹침), 한 줄 유지, 연결선 길이와 공유 */
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 36px var(--sgap);
  width: 100%;
  order: 1; /* 헤드라인 아래, 6항목 위 */
}
.scounter {
  position: relative;
  z-index: 1; /* 연결선(::after, 갭에 위치)보다 위 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: var(--scircle); /* 시안: 큼직한 원 */
}

/* ── 원 사이 연결선 (데스크톱 가로 배치) ──
   각 원의 오른쪽 갭을 원 중심 높이에서 잇는 얇은 선. 갭에만 위치 → 끝이 원 가장자리에 닿음.
   hover/활성 scale 시 원이 선 끝을 살짝 덮어 '원 뒤로' 지나가는 느낌. */
.scounter:not(:last-child)::after {
  content: '';
  position: absolute;
  top: calc(var(--scircle) / 2); /* 원 중심 높이 */
  left: 100%; /* 원 오른쪽 가장자리부터 */
  width: var(--sgap); /* 다음 원 왼쪽 가장자리까지 */
  height: 2px;
  transform: translateY(-1px);
  background: rgba(240, 192, 0, 0.35); /* 은은한 골드 */
  z-index: -1;
  pointer-events: none;
  transition: background 0.3s ease;
}
/* 활성 원에서 뻗는 선만 골드로 강조(과하지 않게) */
.scounter.is-active::after,
.scounter:hover::after {
  background: var(--gold, #f0c000);
}
.scounter__circle {
  position: relative;
  width: var(--scircle);
  height: var(--scircle);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #eceef2; /* 비활성 회색 원 */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease; /* 부드러운 확장 */
}
/* 활성 / hover(PC) → 골드 그라데이션 원 + 살짝 확장(C안)
   transform 만 사용(scale 1.05) → 레이아웃 출렁임 없음, 옆 원/연결선 충돌 방지 */
.scounter.is-active .scounter__circle,
.scounter:hover .scounter__circle {
  background: radial-gradient(
    circle at 32% 28%,
    #ffe27a 0%,
    var(--gold, #f0c000) 60%,
    var(--gold-dark, #c9a000) 100%
  );
  box-shadow: 0 14px 30px rgba(240, 192, 0, 0.38);
  transform: scale(1.05);
}

/* ── 동심원 파동(골드 링) — 활성/hover 시 무한 반복 ── */
.scounter__ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--gold, #f0c000);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
}
.scounter.is-active .scounter__ripple,
.scounter:hover .scounter__ripple {
  animation: scounter-wave 3.2s ease-out infinite;
}
.scounter.is-active .scounter__ripple--2,
.scounter:hover .scounter__ripple--2 {
  animation-delay: 1.6s; /* 두 번째 링은 절반 주기 뒤 → 끊김 없는 파동 */
}
@keyframes scounter-wave {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.4); /* 옆 원에 안 닿게 축소(파동 최대) */
    opacity: 0;
  }
}

/* ── 원 안 내용 (파동 위) ── */
.scounter__label {
  position: relative;
  z-index: 2;
  font-family: var(--font-ko, 'Noto Sans KR', sans-serif);
  font-size: clamp(0.86rem, 1.4vw, 1.05rem);
  font-weight: 700;
  color: #666;
  text-align: center;
  word-break: keep-all;
  transition: color 0.35s ease;
}
.scounter__value {
  position: relative;
  z-index: 2;
  font-family: var(--font-en, 'Bebas Neue', sans-serif);
  font-size: clamp(2.6rem, 5.2vw, 3.8rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.5px;
  color: #1a1a1a; /* 회색·골드 양쪽에서 가독성 좋은 진한 글씨 */
}
.scounter.is-active .scounter__label,
.scounter:hover .scounter__label {
  color: #1a1a1a;
}

/* ── 원 밖 설명 (각 원 하단 중앙) ── */
.scounter__desc {
  font-size: clamp(0.86rem, 1.2vw, 0.98rem);
  line-height: 1.5;
  color: #777;
  text-align: center;
  word-break: keep-all;
  max-width: 220px;
}

/* ── 6항목 블록 — 원 아래, 2열 그리드(중앙), 모바일 1열 ──
   내용·카드 구조(phase4)는 보존, 배치만 변경. */
.solution__benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  order: 2; /* 원 카운터 아래 */
}

/* ── prefers-reduced-motion: 파동·전환 정지, 정적 표시 ── */
@media (prefers-reduced-motion: reduce) {
  .scounter__circle {
    transform: none !important;
    transition: none !important;
  }
  .scounter__ripple {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ── 반응형 ── */
@media (max-width: 900px) {
  .solution__counters {
    --sgap: clamp(40px, 6vw, 72px); /* 태블릿: 한 줄 유지하며 간격 확보 */
    row-gap: 28px;
  }
}
@media (max-width: 640px) {
  /* 원·항목 세로로 깔끔하게 (원 크기는 --scircle 로 일괄 조정) */
  .solution__counters {
    --scircle: clamp(190px, 62vw, 250px);
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }
  /* 세로 배치에선 가로 연결선이 어색 → 숨김(레이아웃 깨짐 방지) */
  .scounter:not(:last-child)::after {
    display: none;
  }
  .scounter__value {
    font-size: clamp(2.6rem, 12vw, 3.4rem);
  }
  /* 6항목 — 1열 (44px 터치 여백 유지) */
  .solution__benefits {
    grid-template-columns: 1fr;
    max-width: 460px;
  }
}