/* wsQf 패밀리 스위처 — 공용 스타일 (tokens.css 변수 사용) */
.wsqf-family { position: relative; }
.wsqf-family__btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text);
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.wsqf-family__btn:hover { border-color: var(--primary); }
.wsqf-family__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.wsqf-family__grid i { width: 3px; height: 3px; border-radius: 1px; background: currentColor; display: block; }
.wsqf-family__label { white-space: nowrap; }

.wsqf-family__panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  width: 280px; max-width: 78vw; padding: 6px;
  background: var(--glass-strong, var(--surface)); backdrop-filter: var(--blur);
  border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
}
.wsqf-family__item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 9px; color: var(--text);
}
.wsqf-family__item:hover { background: var(--primary-soft); text-decoration: none; }
.wsqf-family__emoji { font-size: 20px; flex: none; width: 24px; text-align: center; }
.wsqf-family__text { display: flex; flex-direction: column; line-height: 1.3; }
.wsqf-family__text b { font-size: 14px; }
.wsqf-family__text small { font-size: 12px; color: var(--sub); }