/* 고요 — 눈 놀이 버튼(js/snow-play.js가 곁의 할 일 자리와 칩 줄에 넣습니다)
   - 주요 버튼(눈 굴리기·눈 뿌리기·돌 얹기)은 다른 곁의 할 일과 같은 .dock-main입니다. 눈 놀이 버튼만 눈빛 띠를 조금 섞습니다
   - 칩 줄: 눈 뿌리기 칩, 목도리 색 견본(둥근 단추), 자리 안내·돌 수(.dock-count) */
.snow-btn { background: linear-gradient(180deg, #f6f1e4, #dfe7f0); color: #1f2a36; box-shadow: 0 6px 16px -8px rgba(170, 196, 226, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.snow-btn[disabled] { cursor: default; filter: saturate(0.6) brightness(0.92); }
.snow-btn[disabled]:active { transform: none; }
.snow-swatches {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 999px; pointer-events: auto;
  background: var(--dock-glass); border: 1px solid var(--dock-line); box-shadow: inset 0 1px 0 var(--dock-hi);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.snow-swatches[hidden], .snow-btn[hidden], .snow-chip[hidden], .snow-note[hidden], .snow-count[hidden] { display: none; }
.snow-swatch {
  appearance: none; margin: 0; padding: 0; width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  background: var(--scarf); border: 2px solid rgba(255, 255, 255, 0.25); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18);
  transition: transform 0.15s, border-color 0.15s;
}
.snow-swatch:hover { transform: scale(1.08); }
.snow-swatch[aria-pressed="true"] { border-color: #ffffff; transform: scale(1.12); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 -2px 0 rgba(0, 0, 0, 0.18); }
.snow-note { white-space: nowrap; }
@media (pointer: coarse) {
  .snow-swatches { padding: 4px 7px; gap: 6px; }
  .snow-swatch { width: 28px; height: 28px; }
}
@media (max-width: 440px) {
  .snow-swatches { gap: 3px; }
}