/* 메인 — 와그작 서비스(패밀리 브랜드) 섹션
 * ---------------------------------------------------------------------------
 * 구조 정본 = circuscompany.com/services 의 두 번째 섹션(`.svccond` / #svcrow).
 *   카드 = 타일 아이콘 + 브랜드 이름 + 슬로건 한 줄 + 작은 액션 버튼(웹 열기 / 앱 받기).
 *   준비중 액션은 <a> 가 아니라 <span> 이다 (거기 걸 주소가 아직 없다).
 *
 * 색은 와그작 토큰을 쓰되 ★카드에 브랜드 색 띠를 넣지 않는다 (오너 지시 2026-09-12).
 * 지금 라이브의 `#svc-row` 만큼 담백하게 두고, 정보는 색이 아니라 묶음으로 나눈다.
 *
 * 묶음 = 와그작 / 퀴가. 브랜드 계통이 둘이라는 사실 자체가 이 섹션의 정보다.
 */

.wz-family {
  padding: 80px 0 84px;
  background: var(--wz-bg-cream, #FFFBF5);
}

/* ── 머리말 ───────────────────────────────────────────────────────────── */

.wz-family__header {
  max-width: 760px;
  margin: 0 auto 38px;
  padding: 0 20px;
  text-align: center;
}

.wz-family__title {
  font-family: var(--font-display, 'Nunito', sans-serif);
  font-size: clamp(1.7rem, 4.4vw, 2.3rem);
  font-weight: 800;
  line-height: 1.3;
  color: var(--wz-text-primary, #2D2A3E);
  margin: 0 0 12px;
  word-break: keep-all;
}

.wz-family__desc {
  font-family: var(--font-body, 'Lexend', sans-serif);
  font-size: clamp(0.95rem, 2.4vw, 1.06rem);
  line-height: 1.7;
  color: var(--wz-text-secondary, #6B6880);
  margin: 0;
  word-break: keep-all;
}

/* ── 묶음 (와그작 / 퀴가) ─────────────────────────────────────────────── */

.wz-family__group {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

.wz-family__group + .wz-family__group {
  margin-top: 34px;
}

.wz-family__group-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-family: var(--font-display, 'Nunito', sans-serif);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--wz-text-primary, #2D2A3E);
  word-break: keep-all;
}

.wz-family__group-label::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: #EDE4F3;
}

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

/* 한 줄 3장으로 고정한다(1080 안에 3x300 + 2x14 = 928).
   4장으로 두면 와그작 묶음 다섯 장이 4+1 이 되어 마지막 한 장이 외톨이로 떨어진다.
   3장이면 5 = 3+2, 3 = 3 으로 두 묶음 다 줄이 차 보이고, 슬로건 두 줄도 넉넉하다. */
.wz-family__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}

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

.wz-family-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #ECE6F3;
  box-shadow: 0 2px 10px rgba(43, 27, 61, 0.05);
}

.wz-family-card__tile {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F6F2FB;
}

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

.wz-family-card__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}

.wz-family-card__name {
  font-family: var(--font-display, 'Nunito', sans-serif);
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--wz-text-primary, #2D2A3E);
  margin: 0;
  word-break: keep-all;
}

.wz-family-card__slogan {
  font-family: var(--font-body, 'Lexend', sans-serif);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--wz-text-secondary, #6B6880);
  margin: 0;
  word-break: keep-all;
}

/* ── 액션 (웹 열기 / 앱 받기) ─────────────────────────────────────────── */

/* 웹 / 앱 버튼은 손가락으로 갈라 눌러야 한다 — 붙여 두면 오탭이 난다.
   버튼 30px + 사이 12px 이면 두 과녁의 중심이 42px 떨어진다. */
.wz-family-card__acts {
  display: flex;
  gap: 12px;
  margin-top: 5px;
}

.wz-family-card__act {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #E7DEF1;
  background: #fff;
  color: var(--wz-purple, #9E63CF);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wz-family-card__act svg {
  width: 17px;
  height: 17px;
  display: block;
}

/* main.css 의 전역 a 장식이 버튼 안에서 튀어나오지 않게 */
.wz-family-card__act::before {
  display: none;
}

a.wz-family-card__act:hover {
  background: #F6EEFC;
  border-color: #D9C9EC;
  color: var(--wz-purple-dark, #7E4FA6);
  text-decoration: none;
}

a.wz-family-card__act:focus-visible {
  outline: 2px solid var(--wz-purple, #9E63CF);
  outline-offset: 2px;
}

/* 준비중 — 링크가 아니라 <span>. 걸 주소가 아직 없다. */
.wz-family-card__act--soon {
  color: #C3B7D2;
  border-style: dashed;
  border-color: #E2D8EE;
  background: #FBF9FD;
  cursor: default;
}

/* ── 모바일 ───────────────────────────────────────────────────────────── */

/* 모바일 = 2열 (오너 지시 2026-09-12).
   한 칸이 170px 안팎이라 타일을 글 옆에 두면 슬로건이 서너 줄로 쪼개진다.
   그래서 이 폭에서는 카드를 세로로 세운다 — 타일 위, 글 아래. */
@media (max-width: 768px) {
  .wz-family {
    padding: 50px 0 54px;
  }

  .wz-family__header {
    margin-bottom: 26px;
  }

  .wz-family__group {
    padding: 0 16px;
  }

  .wz-family__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .wz-family__group + .wz-family__group {
    margin-top: 24px;
  }

  .wz-family-card {
    padding: 14px;
    gap: 12px;
    border-radius: 14px;
  }

  .wz-family-card__tile {
    width: 46px;
    height: 46px;
    border-radius: 12px;
  }
}

/* 좁은 화면 — 두 열을 유지하면서 타일 옆에 이름을 붙인다(오너 지시 2026-09-12).
   카드를 세로로 세우면 타일 한 줄만큼 카드마다 키가 커져 스크롤이 길어진다.
   이름은 타일 오른쪽에 두고, 슬로건과 버튼은 그 아래로 흘려 한 칸을 낮게 만든다. */
@media (max-width: 600px) {
  .wz-family-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-areas:
      "tile   name"
      "slogan slogan"
      "acts   acts";
    gap: 4px 10px;
    padding: 12px 13px 11px;
  }

  /* body 를 사라지게 해서 이름·슬로건·버튼을 카드 격자의 칸으로 올린다.
     (이름만 타일 옆으로 보내려면 셋이 카드의 직접 자식이어야 한다) */
  .wz-family-card__body {
    display: contents;
  }

  .wz-family-card__tile {
    grid-area: tile;
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }

  .wz-family-card__name {
    grid-area: name;
    font-size: 0.88rem;
    align-self: center;
  }

  .wz-family-card__slogan {
    grid-area: slogan;
    font-size: 0.74rem;
    line-height: 1.45;
  }

  .wz-family-card__acts {
    grid-area: acts;
    margin-top: 6px;
    gap: 14px;
  }

  .wz-family-card__act {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }
}

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