/* ==========================================================================
   /solution/snapads 페이지 전용 CSS
   ----------------------------------------------------------------------------
   - 메가 mock UI 군 (.sa-pipe, .sa-mock*, .sa-converge*, .sa-mock-frame*)
   - 관련 keyframes (saPipeChipIn ... saConvergePulse)
   - .sp-hero-agent__body--pipe 는 snapads 전용 변형이라 함께 분리
   - snapads/index.php 에서 style.css 다음에 로드.
   ========================================================================== */

.sp-hero-agent__body--pipe {
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(50% 70% at 18% 50%, rgba(38, 153, 251, 0.22) 0%, transparent 60%),
    radial-gradient(45% 65% at 82% 50%, rgba(165, 83, 229, 0.18) 0%, transparent 60%),
    radial-gradient(40% 60% at 50% 50%, rgba(91, 182, 255, 0.12) 0%, transparent 60%),
    rgba(255, 255, 255, 0.02);
  overflow: hidden;
}
.sa-pipe {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 1fr 1.05fr 1fr;
  align-items: center;
  padding: 14px 16px;
  gap: 4px;
}
.sa-pipe__inputs {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 6px;
  position: relative; z-index: 2;
}
.sa-pipe__chip {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 5px;
  background: linear-gradient(160deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 100%);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: -0.012em;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateX(-10px);
}
.sa-pipe.is-active .sa-pipe__chip { animation: saPipeChipIn 0.55s ease-out forwards; }
.sa-pipe.is-active .sa-pipe__chip:nth-child(1) { animation-delay: 0.25s; }
.sa-pipe.is-active .sa-pipe__chip:nth-child(2) { animation-delay: 0.38s; }
.sa-pipe.is-active .sa-pipe__chip:nth-child(3) { animation-delay: 0.51s; }
.sa-pipe.is-active .sa-pipe__chip:nth-child(4) { animation-delay: 0.64s; }
.sa-pipe.is-active .sa-pipe__chip:nth-child(5) { animation-delay: 0.77s; }
.sa-pipe__ico {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  background: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  flex-shrink: 0;
}
.sa-pipe__ico--google { color: #4285F4; }
.sa-pipe__ico--meta   { color: #1877F2; }
.sa-pipe__ico--naver  { background: #03C75A; color: #fff; font-weight: 800; font-size: 11px; }
.sa-pipe__ico--kakao  { background: #FEE500; color: #181600; font-weight: 800; font-size: 11px; }
.sa-pipe__ico--tiktok { background: #000; color: #fff; }
.sa-pipe__chip-name { white-space: nowrap; }

/* 연결 라인 — SVG, 가운데에서 펼침 */
.sa-pipe__lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}
.sa-pipe__line {
  fill: none;
  stroke: rgba(91, 182, 255, 0.7);
  stroke-width: 1.4px;
  stroke-linecap: round;
  stroke-dasharray: 1 5;
  vector-effect: non-scaling-stroke;
  /* stroke-dashoffset 흐름은 인라인 SMIL <animate> 가 담당 (CSS animation 보다
     SVG path 의 stroke 속성 변경 호환성이 안정적) */
}
.sa-pipe__line--out {
  stroke: rgba(165, 83, 229, 0.85);
  stroke-width: 1.6;
}

/* Center — Snap AI 코어 */
.sa-pipe__core {
  position: relative; z-index: 3;
  width: 78px; height: 78px;
  justify-self: center; align-self: center;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
}
.sa-pipe__core-ring {
  position: absolute; inset: 0;
  border: 1.5px solid rgba(91, 182, 255, 0.45);
  border-radius: 50%;
  animation: saPipeRing 3s ease-in-out infinite;
}
.sa-pipe__core-ring--2 {
  inset: -8px;
  border-color: rgba(165, 83, 229, 0.32);
  border-style: dashed;
  animation: saPipeRingSpin 14s linear infinite;
}
.sa-pipe__core-mark {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #2699FB 0%, #5BB6FF 55%, #A553E5 130%);
  color: #fff;
  border-radius: 50%;
  font-size: 18px;
  box-shadow:
    0 0 24px rgba(91, 182, 255, 0.55),
    inset 0 1px 0 rgba(255,255,255,0.3);
  animation: saPipeCorePulse 2.4s ease-in-out infinite;
}
.sa-pipe__core-label {
  font-size: 9.5px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.86);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Right — 통합 출력 메트릭 */
.sa-pipe__output {
  display: flex; flex-direction: column;
  gap: 8px;
  align-items: stretch;
  position: relative; z-index: 2;
}
.sa-pipe__metric {
  padding: 7px 11px;
  background: linear-gradient(160deg, rgba(38, 153, 251, 0.18) 0%, rgba(165, 83, 229, 0.10) 100%);
  border: 1px solid rgba(91, 182, 255, 0.28);
  border-radius: 10px;
  display: flex; flex-direction: column;
  gap: 1px;
  opacity: 0;
  transform: translateX(10px);
}
.sa-pipe.is-active .sa-pipe__metric { animation: saPipeMetricIn 0.6s ease-out forwards; }
.sa-pipe.is-active .sa-pipe__metric:nth-child(1) { animation-delay: 1.1s; }
.sa-pipe.is-active .sa-pipe__metric:nth-child(2) { animation-delay: 1.3s; }
.sa-pipe__metric-label {
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: -0.01em;
}
.sa-pipe__metric-value {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* 좁은 폭 — 폰트·간격 축소 */
@media (max-width: 720px) {
  .sa-pipe { padding: 10px 12px; }
  .sa-pipe__chip { font-size: 10px; padding: 4px 8px 4px 4px; gap: 5px; }
  .sa-pipe__ico { width: 17px; height: 17px; font-size: 10px; }
  .sa-pipe__core { width: 62px; height: 62px; }
  .sa-pipe__core-mark { width: 30px; height: 30px; font-size: 14px; }
  .sa-pipe__core-label { font-size: 8.5px; }
  .sa-pipe__metric { padding: 5px 8px; }
  .sa-pipe__metric-value { font-size: 14px; }
}

@keyframes saPipeChipIn {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes saPipeMetricIn {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes saPipeRing {
  0%, 100% { transform: scale(1);   opacity: 0.55; }
  50%      { transform: scale(1.18); opacity: 0; }
}
@keyframes saPipeRingSpin {
  to { transform: rotate(360deg); }
}
@keyframes saPipeCorePulse {
  0%, 100% { box-shadow: 0 0 24px rgba(91, 182, 255, 0.55), inset 0 1px 0 rgba(255,255,255,0.3); }
  50%      { box-shadow: 0 0 36px rgba(91, 182, 255, 0.85), inset 0 1px 0 rgba(255,255,255,0.3); }
}

/* ==========================================================================
   /solution/snapads · Feature 01 — 매체별 전환 데이터 통합 Mockup
   ========================================================================== */
.sa-mock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 16px;
  background: #fff;
  color: #1F2937;
  font-size: 11.5px;
  overflow: hidden;
}
.sa-mock__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  background: #F4F6FA;
  border: 1px solid #E5E9EF;
  border-radius: 8px;
}
.sa-mock__filter {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #2699FB 0%, #5BB6FF 100%);
  color: #fff;
  border-radius: 5px;
  font-size: 11px;
}
.sa-mock__search { color: #9CA3AF; font-size: 11.5px; }
.sa-mock__tabs {
  display: flex; gap: 4px;
  padding: 2px 4px;
  border-bottom: 1px solid #EEF1F6;
  padding-bottom: 6px;
}
.sa-mock__tab {
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 600;
  color: #6B7280;
  border-radius: 999px;
  letter-spacing: -0.01em;
}
.sa-mock__tab--active {
  background: #E8EEF6;
  color: #0F172A;
}
.sa-mock__table {
  display: flex; flex-direction: column;
  flex: 1;
  min-height: 0;
}
.sa-mock__thead,
.sa-mock__row {
  display: grid;
  grid-template-columns: 1.45fr 1.05fr 1.05fr 0.95fr 0.85fr;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
}
.sa-mock__thead {
  font-size: 10.5px;
  font-weight: 600;
  color: #9CA3AF;
  letter-spacing: -0.01em;
  border-bottom: 1px solid #EEF1F6;
}
.sa-mock__thead > span:not(:first-child),
.sa-mock__row > span:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sa-mock__row {
  position: relative;
  font-size: 11.5px;
  font-weight: 500;
  border-bottom: 1px solid #F1F4F8;
  opacity: 0;
  transform: translateY(6px);
}
.sa-mock.is-active .sa-mock__row { animation: saRowReveal 0.55s ease-out forwards; }
.sa-mock.is-active .sa-mock__row:nth-child(2) { animation-delay: 0.2s;  }
.sa-mock.is-active .sa-mock__row:nth-child(3) { animation-delay: 0.35s; }
.sa-mock.is-active .sa-mock__row:nth-child(4) { animation-delay: 0.5s;  }
.sa-mock.is-active .sa-mock__row:nth-child(5) { animation-delay: 0.65s; }
.sa-mock.is-active .sa-mock__row:nth-child(6) { animation-delay: 0.8s;  }
.sa-mock.is-active .sa-mock__row:nth-child(7) { animation-delay: 0.95s; }
.sa-mock__row::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 4px;
  background: linear-gradient(180deg, #2699FB 0%, #5BB6FF 100%);
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  animation: saRowPulse 7.2s ease-in-out infinite;
}
.sa-mock__row::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(38,153,251,0.22) 0%, rgba(38,153,251,0.06) 70%, rgba(38,153,251,0) 100%);
  opacity: 0;
  pointer-events: none;
  animation: saRowPulse 7.2s ease-in-out infinite;
  z-index: 0;
}
.sa-mock__row:nth-child(2)::before,
.sa-mock__row:nth-child(2)::after { animation-delay: 1.4s; }
.sa-mock__row:nth-child(3)::before,
.sa-mock__row:nth-child(3)::after { animation-delay: 2.6s; }
.sa-mock__row:nth-child(4)::before,
.sa-mock__row:nth-child(4)::after { animation-delay: 3.8s; }
.sa-mock__row:nth-child(5)::before,
.sa-mock__row:nth-child(5)::after { animation-delay: 5.0s; }
.sa-mock__row:nth-child(6)::before,
.sa-mock__row:nth-child(6)::after { animation-delay: 6.2s; }
.sa-mock__row:nth-child(7)::before,
.sa-mock__row:nth-child(7)::after { animation-delay: 7.4s; }
.sa-mock__row > * { position: relative; z-index: 1; }
.sa-mock__plat {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600;
  color: #0F172A;
  position: relative;
  z-index: 1;
}
.sa-mock__ico {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  background: #fff;
  border: 1px solid #E5E9EF;
  flex-shrink: 0;
}
.sa-mock__ico--google { color: #4285F4; }
.sa-mock__ico--naver  { background: #03C75A; color: #fff; font-weight: 800; font-size: 10.5px; border-color: #03C75A; }
.sa-mock__ico--meta   { color: #1877F2; }
.sa-mock__ico--kakao  { background: #FEE500; color: #181600; font-weight: 800; font-size: 11px; border-color: #FEE500; }
.sa-mock__ico--tiktok { background: #000; color: #fff; border-color: #000; }
.sa-mock__row--total {
  border-top: 1px solid #EEF1F6;
  border-bottom: 0;
  margin-top: 2px;
  font-weight: 700;
}
.sa-mock__row--total > span:not(:first-child) {
  color: #2699FB;
  font-weight: 700;
}

@keyframes saRowReveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes saRowPulse {
  0%       { opacity: 0; }
  2%       { opacity: 1; }
  15%      { opacity: 1; }
  18%, 100%{ opacity: 0; }
}

/* 반응형 — 좁은 화면에선 폰트·패딩 축소 */
@media (max-width: 720px) {
  .sa-mock { padding: 12px; font-size: 10.5px; gap: 8px; }
  .sa-mock__thead,
  .sa-mock__row { padding: 7px 8px; gap: 6px; }
  .sa-mock__tab { padding: 4px 8px; font-size: 10px; }
  .sa-mock__ico { width: 18px; height: 18px; font-size: 10.5px; }
}

@media (max-width: 0) {
  .sa-mock__row { opacity: 1; transform: none; animation: none; }
  .sa-mock__row::before,
  .sa-mock__row::after { animation: none; opacity: 0; }
}

/* ==========================================================================
   /solution/snapads · Mock 공통 atoms (card / chart / table / dot)
   ========================================================================== */
.sa-mock__card {
  background: #fff;
  border: 1px solid #E5E9EF;
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.04);
  position: relative;
}
.sa-mock__card-title {
  font-size: 10.5px;
  font-weight: 700;
  color: #0F172A;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.sa-mock__card-sub {
  font-size: 9px;
  color: #9CA3AF;
  margin: -2px 0 4px;
  display: block;
}

/* 차트 — grid: [yaxis | svg] / [_ | xaxis] */
.sa-mock__chart {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 4px;
  row-gap: 3px;
}
.sa-mock__svg {
  grid-column: 2; grid-row: 1;
  width: 100%;
  height: 60px;
  display: block;
  overflow: visible;
}
.sa-mock--corr .sa-mock__chart { grid-template-columns: 1fr; }
.sa-mock--corr .sa-mock__svg { grid-column: 1; height: 78px; }
.sa-mock--rev  .sa-mock__svg { height: 72px; }
.sa-mock__grid line { stroke: #EEF1F6; stroke-width: 0.5; }
.sa-line {
  fill: none;
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.sa-line--red    { stroke: #EF4444; }
.sa-line--orange { stroke: #F59E0B; }
.sa-line--cyan   { stroke: #06B6D4; }
.sa-line--blue   { stroke: #2699FB; }
.sa-line--purple { stroke: #A553E5; }
.sa-line--teal   { stroke: #10B981; }
.sa-line--yellow { stroke: #F59E0B; }
.sa-line--thick  { stroke-width: 2; }
.sa-mock__bars rect { fill: #2699FB; opacity: 0.78; }

.sa-mock__xaxis {
  grid-column: 2; grid-row: 2;
  display: flex; justify-content: space-between;
  font-size: 8px;
  color: #9CA3AF;
  letter-spacing: -0.02em;
}
.sa-mock--corr .sa-mock__xaxis { grid-column: 1; }
.sa-mock__yaxis {
  grid-column: 1; grid-row: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: 8px;
  color: #9CA3AF;
  padding-right: 4px;
  min-width: 18px;
  text-align: right;
  height: 60px;
}
.sa-mock--rev .sa-mock__yaxis { height: 72px; }

/* 3개월 실적 / 일반 데이터 테이블 */
.sa-mock__rtable { font-size: 9px; }
.sa-mock__rhead,
.sa-mock__rrow {
  display: grid;
  grid-template-columns: 0.8fr 1fr 1fr 1fr;
  gap: 4px;
  padding: 4px 6px;
  align-items: center;
}
.sa-mock__rhead {
  color: #9CA3AF;
  font-weight: 600;
  border-bottom: 1px solid #EEF1F6;
}
.sa-mock__rhead span:not(:first-child),
.sa-mock__rrow span:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sa-mock__rrow {
  border-bottom: 1px solid #F1F4F8;
  color: #1F2937;
  font-weight: 500;
}
.sa-mock__rrow:last-child { border-bottom: 0; }
.sa-mock__rrow span:first-child { font-weight: 600; }

/* 전월 대비 — 빨강 강조 */
.sa-mock__rrow--diff {
  background: #FFF1F2;
  border-bottom: 0;
  padding-top: 5px; padding-bottom: 5px;
}
.sa-mock__rrow--diff span:first-child {
  color: #DC2626;
  font-weight: 700;
}
.sa-mock__rrow--diff b {
  color: #DC2626;
  font-weight: 700;
  display: block;
}
.sa-mock__rrow--diff em {
  font-style: normal;
  display: block;
  color: #DC2626;
  font-size: 8px;
  font-weight: 500;
}

/* ==========================================================================
   /solution/snapads · Mock 01 — report-summary (차트 + 3개월 실적)
   ========================================================================== */
.sa-mock--report {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: #F8FAFC;
}

/* ==========================================================================
   /solution/snapads · Mock 03 — correlation (차트 + 강조 카드)
   ========================================================================== */
.sa-mock--corr {
  position: absolute; inset: 0;
  padding: 14px 16px;
  background: #F8FAFC;
}
.sa-mock__overlay {
  position: absolute;
  right: 18px; bottom: 18px;
  background: #ECFDF5;
  border: 1px solid #D1FAE5;
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.12);
  min-width: 130px;
}
.sa-mock__overlay-tag {
  display: inline-flex; align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 600;
  color: #0F172A;
}
.sa-mock__overlay-badge {
  background: #DCFCE7;
  color: #15803D;
  padding: 1px 5px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 700;
  margin-left: 2px;
}
.sa-mock__overlay-row {
  display: flex; justify-content: center; align-items: center;
  gap: 10px;
  margin: 4px 0 2px;
}
.sa-mock__overlay-step {
  width: 16px; height: 16px;
  border: 1px solid #D1FAE5;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  color: #15803D;
  background: #fff;
}
.sa-mock__overlay-label {
  font-size: 9.5px;
  color: #15803D;
  font-weight: 600;
}
.sa-mock__overlay-pct {
  font-size: 16px;
  font-weight: 800;
  color: #15803D;
  text-align: center;
  margin: 0;
  letter-spacing: -0.02em;
}

/* ==========================================================================
   /solution/snapads · Mock 04 — revenue-mix (혼합 차트 + 매출 테이블)
   ========================================================================== */
.sa-mock--rev {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: #F8FAFC;
}
.sa-mock__legend {
  display: flex; flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 4px;
  padding: 0 4px;
  font-size: 8px;
  color: #6B7280;
  letter-spacing: -0.02em;
}
.sa-mock__legend span {
  display: inline-flex; align-items: center; gap: 3px;
}
.sa-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.sa-dot--blue   { background: #2699FB; }
.sa-dot--purple { background: #A553E5; }
.sa-dot--teal   { background: #14B8A6; }
.sa-dot--blue2  { background: #1E40AF; }
.sa-dot--orange { background: #F59E0B; }
.sa-dot--red    { background: #EF4444; }
.sa-mock__rtable--rev .sa-mock__rhead,
.sa-mock__rtable--rev .sa-mock__rrow {
  grid-template-columns: 1.3fr 0.8fr 1fr;
}
.sa-mock__rhead-hl { color: #2699FB; font-weight: 700; }

/* ==========================================================================
   /solution/snapads · Mock 05 — multi-platform (자사몰 × 오픈마켓 통합)
   ========================================================================== */
.sa-mock--multi {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: #F8FAFC;
}
.sa-mock__mtable {
  font-size: 9px;
  border-radius: 8px;
  overflow: hidden;
}
.sa-mock__mhead-top {
  display: grid;
  grid-template-columns: 1.4fr 3fr;
  background: #F4F6FA;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 600;
  color: #6B7280;
  border-bottom: 1px solid #EEF1F6;
  letter-spacing: -0.01em;
}
.sa-mock__mhead-right { text-align: center; }
.sa-mock__mhead-sub {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  padding: 5px 8px;
  font-size: 8.5px;
  color: #9CA3AF;
  font-weight: 600;
  border-bottom: 1px solid #EEF1F6;
}
.sa-mock__mhead-sub span:not(:first-child) { text-align: right; }
.sa-mock__mrow {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  padding: 6px 8px;
  font-size: 9px;
  color: #1F2937;
  border-bottom: 1px solid #F1F4F8;
  font-variant-numeric: tabular-nums;
  align-items: center;
}
.sa-mock__mrow:last-child { border-bottom: 0; }
.sa-mock__mrow span:not(:first-child) { text-align: right; }
.sa-mock__mname {
  font-weight: 600;
  color: #0F172A;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-right: 6px;
}
.sa-mock__card--list { padding: 8px 10px; }
.sa-mock__bar--mini {
  padding: 5px 8px;
  font-size: 9px;
  border-radius: 6px;
}

/* ==========================================================================
   /solution/snapads · Mock 02 — media-table 의 보기 드롭다운 오버레이
   ========================================================================== */
.sa-mock__dropdown {
  position: absolute;
  right: 24px; top: 56%;
  transform: translateY(-50%);
  background: #fff;
  border: 1px solid #E5E9EF;
  border-radius: 6px;
  box-shadow: 0 12px 24px -6px rgba(15, 23, 42, 0.18);
  font-size: 9.5px;
  z-index: 3;
  min-width: 92px;
  overflow: hidden;
}
.sa-mock__dropdown-head {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  padding: 5px 9px;
  background: #F4F6FA;
  color: #1F2937;
  font-weight: 600;
  border-bottom: 1px solid #EEF1F6;
}
.sa-mock__dropdown-head i { color: #6B7280; font-size: 11px; }
.sa-mock__dropdown-item {
  display: block;
  padding: 5px 9px;
  color: #6B7280;
  border-bottom: 1px solid #F1F4F8;
  letter-spacing: -0.01em;
}
.sa-mock__dropdown-item:last-child { border-bottom: 0; }
.sa-mock__dropdown-item--active {
  background: #2699FB;
  color: #fff;
  font-weight: 700;
}
.sa-mock__dropdown-item--muted { color: #C7CDD7; }

/* 좁은 화면 — mock 공통 폰트·패딩 축소 */
@media (max-width: 720px) {
  .sa-mock--report,
  .sa-mock--corr,
  .sa-mock--rev,
  .sa-mock--multi { padding: 10px 12px; gap: 6px; }
  .sa-mock__card { padding: 6px 8px; }
  .sa-mock__rtable,
  .sa-mock__mtable { font-size: 8px; }
  .sa-mock__svg { height: 54px; }
  .sa-mock--corr .sa-mock__svg { height: 64px; }
  .sa-mock--rev  .sa-mock__svg { height: 64px; }
  .sa-mock__overlay { right: 12px; bottom: 12px; min-width: 110px; }
  .sa-mock__overlay-pct { font-size: 14px; }
  .sa-mock__dropdown { right: 12px; min-width: 80px; font-size: 8.5px; }
}

/* ==========================================================================
   /solution/snapads · Mock 전체 reveal 게이트 애니메이션
   각 mockup이 화면에 들어올 때 카드 → 차트 라인/바 → 행이 순차 등장
   ========================================================================== */

/* 카드 페이드업 (mock 01 / 03 / 04 / 05 공통) */
.sa-mock__card {
  opacity: 0;
  transform: translateY(8px);
}
.sa-mock.is-active .sa-mock__card { animation: saCardIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.sa-mock.is-active .sa-mock__card:nth-child(1) { animation-delay: 0.1s; }
.sa-mock.is-active .sa-mock__card:nth-child(2) { animation-delay: 0.28s; }

/* 차트 라인 — 초기엔 숨김, .is-active 시 페이드인 (이후 SMIL animate 가 points 연속 변동) */
.sa-line { opacity: 0; }
.sa-mock.is-active .sa-line { animation: saLineFadeIn 0.6s ease-out forwards; }
.sa-mock.is-active .sa-line:nth-of-type(1) { animation-delay: 0.5s; }
.sa-mock.is-active .sa-line:nth-of-type(2) { animation-delay: 0.62s; }
.sa-mock.is-active .sa-line:nth-of-type(3) { animation-delay: 0.74s; }
.sa-mock.is-active .sa-line:nth-of-type(4) { animation-delay: 0.86s; }
.sa-mock.is-active .sa-line:nth-of-type(5) { animation-delay: 0.98s; }

/* Mock 04 — 바 차트 그로우 + 연속 변동 (기간 바뀌듯) */
.sa-mock__bars rect {
  transform-box: fill-box;
  transform-origin: center bottom;
  transform: scaleY(0);
}
.sa-mock.is-active .sa-mock__bars rect {
  animation:
    saBarGrow 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
    saBarMorph 5.4s ease-in-out infinite;
}
.sa-mock.is-active .sa-mock__bars rect:nth-child(1) { animation-delay: 0.4s, 1.8s; }
.sa-mock.is-active .sa-mock__bars rect:nth-child(2) { animation-delay: 0.5s, 2.1s; }
.sa-mock.is-active .sa-mock__bars rect:nth-child(3) { animation-delay: 0.6s, 2.4s; }
.sa-mock.is-active .sa-mock__bars rect:nth-child(4) { animation-delay: 0.7s, 2.7s; }
.sa-mock.is-active .sa-mock__bars rect:nth-child(5) { animation-delay: 0.8s, 3.0s; }
.sa-mock.is-active .sa-mock__bars rect:nth-child(6) { animation-delay: 0.9s, 3.3s; }
.sa-mock.is-active .sa-mock__bars rect:nth-child(7) { animation-delay: 1.0s, 3.6s; }

@keyframes saBarMorph {
  0%, 100% { transform: scaleY(1);    }
  18%      { transform: scaleY(0.72); }
  38%      { transform: scaleY(1.22); }
  58%      { transform: scaleY(0.86); }
  78%      { transform: scaleY(1.1);  }
}

/* 테이블 행 페이드인 — rrow (mock 01 / 04) */
.sa-mock__rrow {
  opacity: 0;
  transform: translateY(4px);
}
.sa-mock.is-active .sa-mock__rrow { animation: saRowFade 0.5s ease-out forwards; }
.sa-mock.is-active .sa-mock__rrow:nth-child(2) { animation-delay: 0.6s; }
.sa-mock.is-active .sa-mock__rrow:nth-child(3) { animation-delay: 0.74s; }
.sa-mock.is-active .sa-mock__rrow:nth-child(4) { animation-delay: 0.88s; }

/* 테이블 행 페이드인 — mrow (mock 05) */
.sa-mock__mrow {
  opacity: 0;
  transform: translateY(4px);
}
.sa-mock.is-active .sa-mock__mrow { animation: saRowFade 0.5s ease-out forwards; }
.sa-mock.is-active .sa-mock__mrow:nth-child(3) { animation-delay: 0.5s; }
.sa-mock.is-active .sa-mock__mrow:nth-child(4) { animation-delay: 0.64s; }
.sa-mock.is-active .sa-mock__mrow:nth-child(5) { animation-delay: 0.78s; }

/* Mock 03 — 95.94% 강조 카드 등장 + 숫자 펄스 */
.sa-mock__overlay {
  opacity: 0;
  transform: translateY(8px) scale(0.96);
}
.sa-mock.is-active .sa-mock__overlay { animation: saOverlayIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 1.3s; }
.sa-mock.is-active .sa-mock__overlay-pct { animation: saPctPulse 2.4s ease-in-out 2.2s infinite; }

/* Mock 02 — dropdown 활성 아이템 글로우 */
.sa-mock.is-active .sa-mock__dropdown-item--active { animation: saDdGlow 2.4s ease-in-out 1.4s infinite; }

@keyframes saCardIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes saLineFadeIn {
  to { opacity: 1; }
}
@keyframes saBarGrow {
  to { transform: scaleY(1); }
}
@keyframes saRowFade {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes saOverlayIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes saPctPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes saDdGlow {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(255,255,255,0); }
  50%      { box-shadow: inset 0 0 0 9999px rgba(255,255,255,0.08); }
}

/* ==========================================================================
   /solution/snapads · PROBLEM Before/After Converge (sq-chat 대체)
   ========================================================================== */
.sa-converge {
  max-width: 1020px;
  margin: clamp(36px, 4vw, 56px) auto 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: stretch;
}
.sa-converge__card {
  background: #fff;
  border: 1px solid #E5E9EF;
  border-radius: 16px;
  padding: 24px 22px;
  box-shadow: 0 12px 30px -16px rgba(15, 23, 42, 0.08);
  display: flex; flex-direction: column;
  gap: 14px;
}
.sa-converge__card--after {
  border-color: #BFD9F6;
  background: linear-gradient(180deg, #F4F8FF 0%, #FFFFFF 100%);
  box-shadow: 0 16px 36px -16px rgba(38, 153, 251, 0.22);
}
.sa-converge__cap {
  display: flex; align-items: center; justify-content: space-between;
}
.sa-converge__cap-tag {
  padding: 4px 10px;
  background: #F1F4F8;
  color: #6B7280;
  border-radius: 999px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.12em;
}
.sa-converge__cap-tag--brand {
  background: linear-gradient(160deg, #2699FB 0%, #5BB6FF 100%);
  color: #fff;
}
.sa-converge__cap-icon {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #F1F4F8;
  border-radius: 8px;
  font-size: 16px;
  color: #9CA3AF;
}
.sa-converge__cap-icon--brand {
  background: linear-gradient(160deg, #2699FB 0%, #5BB6FF 60%, #A553E5 130%);
  color: #fff;
}
.sa-converge__title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.02em;
}
.sa-converge__list {
  margin: 0; padding: 0;
  list-style: none;
  display: flex; flex-direction: column;
  gap: 10px;
}
.sa-converge__list li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #6B7280;
  letter-spacing: -0.012em;
}
.sa-converge__list i { color: #9CA3AF; font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.sa-converge__list b { color: #0F172A; font-weight: 700; }
.sa-converge__list--brand li { color: #1F2937; }
.sa-converge__list--brand i { color: #2699FB; }
.sa-converge__list--brand b { color: #1664A9; font-weight: 800; }

/* Before — 매체 타일 (흩어진 리포트 시각화) */
.sa-converge__tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 12px;
  background: #F8FAFC;
  border: 1px dashed #E5E9EF;
  border-radius: 10px;
}
.sa-converge__tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px;
  background: #fff;
  border: 1px solid #EEF1F6;
  border-radius: 8px;
  font-size: 10px;
  color: #6B7280;
  position: relative;
  transform-origin: center bottom;
  animation: saTileSway 4.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.18s);
}
@keyframes saTileSway {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-3px) rotate(calc(var(--i, 0) * 0.4deg - 0.8deg)); }
}
.sa-converge__tile-ico {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #E5E9EF;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}
.sa-ico--google { color: #4285F4; }
.sa-ico--meta   { color: #1877F2; }
.sa-ico--naver  { background: #03C75A; color: #fff; border-color: #03C75A; font-size: 10.5px; }
.sa-ico--kakao  { background: #FEE500; color: #181600; border-color: #FEE500; font-size: 10.5px; }
.sa-ico--tiktok { background: #000; color: #fff; border-color: #000; }
.sa-converge__tile-t { font-weight: 700; color: #0F172A; font-size: 10.5px; letter-spacing: -0.01em; }
.sa-converge__tile-meta {
  font-size: 9px;
  color: #9CA3AF;
  padding: 1px 5px;
  background: #F1F4F8;
  border-radius: 999px;
  font-weight: 600;
}

/* After — 미니 대시보드 */
.sa-converge__dash {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px;
  background: #fff;
  border: 1px solid #BFD9F6;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.sa-converge__dash-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.sa-converge__kpi {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px;
  background: linear-gradient(160deg, rgba(38, 153, 251, 0.08) 0%, rgba(165, 83, 229, 0.06) 100%);
  border-radius: 8px;
}
.sa-converge__kpi-k {
  font-size: 9.5px;
  color: #6B7280;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.sa-converge__kpi-v {
  font-size: 15px;
  font-weight: 800;
  color: #1664A9;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.sa-converge__dash-chart {
  position: relative;
  height: 60px;
}
.sa-converge__bars {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 6px;
  padding: 0 6px;
}
.sa-converge__bars span {
  flex: 1;
  background: linear-gradient(180deg, rgba(38, 153, 251, 0.55) 0%, rgba(38, 153, 251, 0.22) 100%);
  border-radius: 3px 3px 0 0;
  height: var(--h, 50%);
  transform-origin: bottom;
  animation: saBarBreathe 5.4s ease-in-out infinite;
}
.sa-converge__bars span:nth-child(1) { animation-delay: 0s; }
.sa-converge__bars span:nth-child(2) { animation-delay: 0.2s; }
.sa-converge__bars span:nth-child(3) { animation-delay: 0.4s; }
.sa-converge__bars span:nth-child(4) { animation-delay: 0.6s; }
.sa-converge__bars span:nth-child(5) { animation-delay: 0.8s; }
.sa-converge__bars span:nth-child(6) { animation-delay: 1.0s; }
.sa-converge__bars span:nth-child(7) { animation-delay: 1.2s; }
@keyframes saBarBreathe {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.15); }
}
.sa-converge__dash-line {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

.sa-converge__bridge {
  align-self: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  position: relative;
}
.sa-converge__flow {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 140px; height: 100px;
  pointer-events: none;
  overflow: visible;
}
.sa-converge__flow-line {
  stroke: rgba(91, 182, 255, 0.25);
  stroke-width: 0.6;
  stroke-dasharray: 2 2;
  vector-effect: non-scaling-stroke;
}
.sa-converge__flow-dot {
  fill: #5BB6FF;
  filter: drop-shadow(0 0 4px rgba(91, 182, 255, 0.8));
}
.sa-converge__bridge-ring {
  position: absolute;
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 1.5px dashed rgba(165, 83, 229, 0.4);
  animation: saConvergeSpin 14s linear infinite;
}
.sa-converge__bridge-core {
  position: relative;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #2699FB 0%, #5BB6FF 60%, #A553E5 130%);
  color: #fff;
  border-radius: 50%;
  font-size: 20px;
  box-shadow: 0 0 24px rgba(91, 182, 255, 0.55);
  animation: saConvergePulse 2.4s ease-in-out infinite;
}
.sa-converge__bridge-text {
  font-size: 11px; font-weight: 800;
  color: #0F172A;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@keyframes saConvergeSpin { to { transform: rotate(360deg); } }
@keyframes saConvergePulse {
  0%, 100% { box-shadow: 0 0 24px rgba(91, 182, 255, 0.55); }
  50%      { box-shadow: 0 0 36px rgba(91, 182, 255, 0.85); }
}

@media (max-width: 840px) {
  .sa-converge { grid-template-columns: 1fr; gap: 16px; }
  .sa-converge__bridge { flex-direction: row; }
  .sa-converge__bridge-ring { width: 52px; height: 52px; }
}

/* ==========================================================================
   /solution/snapads · Core Features (snapreview/snapfit 스타일)
   .feature-grid 패턴 + .sa-mock-frame 깔끔 컨테이너 (agent 헤더·chips 푸터 제거)
   ========================================================================== */
.sa-mock-frame {
  position: relative;
  background: #fff;
  border: 1px solid #E5E9EF;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 50px -22px rgba(15, 23, 42, 0.12);
}
.sa-mock-frame__body {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(160deg, #F4F8FF 0%, #E8F2FF 100%);
}
.sa-mock-frame__placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  color: rgba(38, 153, 251, 0.55);
  font-size: 13px;
  letter-spacing: -0.01em;
  font-weight: 500;
}
.sa-mock-frame__placeholder i { font-size: 40px; }

/* ★ Flagship — 살짝 강조 (브랜드 컬러 보더 + 강한 그림자) */
.sq-fsec--star .sa-mock-frame {
  border-color: #BFD9F6;
  box-shadow: 0 24px 60px -20px rgba(38, 153, 251, 0.28);
}

/* --------------------------------------------------------------------------

   Hero (page-snapads) — 기존 shared 블록 중 snapads 부분만 페이지 CSS 로 옮김.

   style.css 의 shared 블록(.page-snappush/.page-snapads/.page-snapfit) 은

   snappush.css 작업 시 분해됨.

   -------------------------------------------------------------------------- */

.page-snapads .hero-h1,

.page-snapads .hero-sub { word-break: keep-all; }

.page-snapads .hero-h1 { font-size: clamp(28px, 3.05vw, 46px); line-height: 1.2; letter-spacing: -0.035em; }

.page-snapads .hero-grid { grid-template-columns: 1.15fr 0.85fr; }

@media (max-width: 960px) {

  .page-snapads .hero-grid { grid-template-columns: 1fr; }

  .page-snapads .hero-h1 { font-size: clamp(26px, 6vw, 36px); }

}