/* 위닥스 홈 개편 — 홈 전용 스타일 (main.css 무수정 원칙: 별도 파일, 홈에서만 enqueue)
 * 규칙: 브랜드 토큰(:root --primary 등, main.css/main-home.css 정의)만 사용. 되돌리기 = 이 파일 + enqueue 1블록 제거.
 * 단계: Stage 1 — 용어위키 진입 섹션 + 앱 다운로드 배너.
 */

/* ── 용어위키 진입 섹션 ─────────────────────────────── */
.wd-wiki {
  background: var(--primary-light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
}
/* 줄 나누기·줄 끝 정렬은 전적으로 브라우저가 한다(PHP 는 4줄치를 넉넉히 보내기만 함).
   ① .wd-wiki__tag { flex: 1 1 auto } → 각 줄의 남는 폭을 그 줄 칩들이 나눠 가져 양끝이 정확히 맞음.
   ② --wd-wiki-rows 줄 높이만큼만 보이게 클립 → 마지막에 남는(덜 찬) 줄은 화면 밖. 보이는 줄은 항상 꽉 참.
   칩 높이 = line-height 18 + padding 16 + border 2 = 36px 고정(폰트에 따라 흔들리지 않게 line-height 고정). */
.wd-wiki__tags {
  --wd-wiki-rows: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
  /* +6px = 마지막 보이는 줄의 hover 그림자가 잘리지 않을 만큼의 여유(다음 줄은 gap 9px 뒤라 안 보임) */
  max-height: calc(var(--wd-wiki-rows) * 36px + (var(--wd-wiki-rows) - 1) * 9px + 6px);
  overflow: hidden;
}
.wd-wiki__tag {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  flex: 1 1 auto;
  line-height: 18px;
  font-size: 13px;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.wd-wiki__tag:hover,
.wd-wiki__tag:focus-visible {
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.wd-wiki__term { color: var(--primary); font-weight: 700; }
/* 좁은 화면은 줄당 칩이 3~5개뿐이라 3줄이면 너무 빈약 → 보이는 줄 수만 늘린다(개수 조정 불필요). */
@media (max-width: 767px) { .wd-wiki__tags { --wd-wiki-rows: 5; } }
@media (max-width: 520px) {
  .wd-wiki { padding: 20px; }
  .wd-wiki__tags { --wd-wiki-rows: 6; }
}

/* ── 앱 다운로드 배너 (최하단) ─────────────────────── */
.wd-appbanner {
  background: linear-gradient(120deg, var(--primary), var(--primary-dark));
  border-radius: var(--radius);
  padding: 30px 34px;
  display: flex;
  align-items: center;
  gap: 24px;
  color: #fff;
  flex-wrap: wrap;
}
.wd-appbanner__txt { flex: 1; min-width: 220px; }
.wd-appbanner__title { font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.wd-appbanner__sub { font-size: 14px; opacity: .92; margin-top: 6px; }
.wd-appbanner__btns { display: flex; gap: 10px; flex-wrap: wrap; }
.wd-appbanner__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .32);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 11px 18px;
  border-radius: 12px;
  text-decoration: none;
  transition: background .18s;
}
.wd-appbanner__btn:hover,
.wd-appbanner__btn:focus-visible { background: rgba(255, 255, 255, .26); }
.wd-appbanner__btn svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 520px) {
  .wd-appbanner { padding: 24px; }
  .wd-appbanner__btn { flex: 1; justify-content: center; }
}