/* 메인 — 히어로 바로 아래 서비스 바로가기 행
 * ---------------------------------------------------------------------------
 * 와그작 / 와그작 점프 / 재미나 / 퀴가 웹 / 퀴가 플레이(준비중)
 *
 * JUMP 페이지의 wj-app-row 와 같은 구조지만 CSS 는 따로 쓴다.
 * JUMP 는 어두운 우주 배경이라 반투명 글래스 카드였는데, 메인은 흰 배경이라
 * 그대로 얹으면 카드가 보이지 않는다.
 *
 * 칸 수는 고정하지 않는다 — auto-fit 이라 5칸이든 6칸이든 알아서 배치된다.
 * (와그작 플레이 추가가 예정돼 있어 6칸까지는 손대지 않고 들어간다)
 */

.wz-svc-row {
  padding: 56px 0 48px;
  background: #fff;
}

.wz-svc-row__header {
  max-width: 1100px;
  margin: 0 auto 28px;
  padding: 0 20px;
  text-align: center;
}

.wz-svc-row__title {
  font-family: var(--wz-font-heading, 'Lexend', sans-serif);
  font-size: clamp(1.4rem, 3.6vw, 1.9rem);
  font-weight: 800;
  line-height: 1.3;
  color: #2b1b3d;
  margin: 0 0 8px;
  word-break: keep-all;
}

.wz-svc-row__desc {
  font-size: clamp(0.9rem, 2.4vw, 1.02rem);
  line-height: 1.6;
  color: #6b5b7d;
  margin: 0;
  word-break: keep-all;
}

/* ── 격자 ─────────────────────────────────────────────────────────────── */

/* grid + auto-fit 을 쓰다가 flex 로 바꿨다.
   auto-fit 은 한 줄에 안 들어가면 남는 카드를 '왼쪽에 홀로' 떨어뜨린다
   (6칸일 때 5+1 이 되어 마지막 하나가 외톨이로 보였다).
   flex-wrap + justify-content:center 는 넘친 줄을 가운데로 모아 주므로,
   앞으로 칸이 더 늘어도 배치가 흉해지지 않는다. */
.wz-svc-row__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.wz-svc-row__grid > * {
  flex: 1 1 150px;
  max-width: 200px;
}

/* 태블릿 — 6칸을 한 줄에 우겨넣지 않고 3+3 으로 나눈다 */
@media (max-width: 1024px) {
  .wz-svc-row__grid {
    max-width: 640px;
  }

  .wz-svc-row__grid > * {
    flex: 1 1 170px;
    max-width: none;
  }
}

/* ── 카드 ─────────────────────────────────────────────────────────────── */

.wz-svc-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 14px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #ece6f3;
  box-shadow: 0 2px 10px rgba(43, 27, 61, 0.05);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

a.wz-svc-item:hover {
  transform: translateY(-4px);
  border-color: #d9c9ec;
  box-shadow: 0 10px 24px rgba(43, 27, 61, 0.12);
  text-decoration: none;
  color: inherit;
}

a.wz-svc-item:active {
  transform: translateY(-1px);
}

a.wz-svc-item:focus-visible {
  outline: 2px solid var(--wz-purple, #9e63cf);
  outline-offset: 3px;
}

/* main.css 의 전역 a 장식이 카드 안에서 튀어나오지 않게 */
.wz-svc-item::before {
  display: none;
}

/* ── 아이콘 ───────────────────────────────────────────────────────────── */

.wz-svc-item__icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6f2fb;
}

.wz-svc-item__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 정사각 앱 아이콘이 아니라 투명 배경 일러스트를 넣는 칸 —
   잘리지 않게 contain 으로 담고 옅은 바탕을 깐다 */
.wz-svc-item__icon--art img {
  object-fit: contain;
  padding: 6px;
  box-sizing: border-box;
}

.wz-svc-item__icon--zemina { background: #fdf3f6; }
.wz-svc-item__icon--quiga  { background: #eef4ff; }
.wz-svc-item__icon--wzplay { background: #f3edfd; }

.wz-svc-item__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── 글 ───────────────────────────────────────────────────────────────── */

.wz-svc-item__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.wz-svc-item__name {
  font-family: var(--wz-font-heading, 'Lexend', sans-serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: #2b1b3d;
  text-align: center;
  word-break: keep-all;
}

.wz-svc-item__sub {
  font-size: 12.5px;
  line-height: 1.4;
  color: #7c6b8d;
  text-align: center;
  word-break: keep-all;
}

/* ── 준비중 (링크 아님) ───────────────────────────────────────────────── */

.wz-svc-item--soon {
  cursor: default;
  background: #faf8fc;
  border-style: dashed;
  border-color: #e2d8ee;
  box-shadow: none;
}

.wz-svc-item--soon .wz-svc-item__icon,
.wz-svc-item--soon .wz-svc-item__name {
  opacity: 0.55;
}

.wz-svc-item__badge {
  display: inline-block;
  margin-top: 2px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #efe6fa;
  color: #7b4fae;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}

/* ── 모바일: 세로 스택 · 아이콘 좌 / 글 우 ────────────────────────────── */

@media (max-width: 768px) {
  .wz-svc-row {
    padding: 36px 0 32px;
  }

  .wz-svc-row__header {
    margin-bottom: 20px;
  }

  .wz-svc-row__grid {
    flex-direction: column;
    gap: 10px;
    max-width: 460px;
  }

  .wz-svc-row__grid > * {
    flex: 0 0 auto;
    max-width: none;
  }

  .wz-svc-item {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 14px;
  }

  a.wz-svc-item:hover {
    transform: none;
  }

  .wz-svc-item__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }

  .wz-svc-item__text {
    align-items: flex-start;
  }

  .wz-svc-item__name,
  .wz-svc-item__sub {
    text-align: start;
  }

  .wz-svc-item__badge {
    margin-top: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wz-svc-item {
    transition: none;
  }

  a.wz-svc-item:hover,
  a.wz-svc-item:active {
    transform: none;
  }
}