/* 사역 강점 고르기 — 묶음별 세로 키워드 칩, 1~5개 (2026-11-04 대표 피그마 코멘트 38번, 리뷰 키워드 고르기 참고) */
.sp-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-1); }
.sp-title { margin-bottom: 0; }
.sp-count { flex: none; display: inline-flex; align-items: baseline; gap: 2px; min-height: 32px; padding: 4px 12px; border-radius: var(--r-pill); background: var(--c-milk); color: var(--c-muted); font-size: var(--t-sm); font-weight: 700; }
.sp-count b { color: var(--c-ink); font-size: var(--t-md); }
.sp.is-full .sp-count { background: var(--c-milk-2); color: var(--c-berry); }
.sp.is-full .sp-count b { color: var(--c-berry); }
.sp-desc { color: var(--c-muted); font-size: var(--t-sm); }
.sp-notice { min-height: 20px; margin: var(--s-1) 0 var(--s-3); font-size: var(--t-sm); font-weight: 700; color: var(--c-muted); }
.sp-notice[data-tone="warn"] { color: var(--c-danger); }

/* 묶음 — PC 4열, 이전에 고른 강점은 아래 한 줄 */
.sp-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--s-2); }
.sp-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.sp-group-title { display: flex; align-items: center; gap: 6px; margin-bottom: var(--s-3); padding: 0; font-weight: 700; font-size: var(--t-sm); color: var(--c-ink); white-space: nowrap; }
.sp-group-title .ico { color: var(--c-berry); }
.sp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.sp-group-legacy { grid-column: 1 / -1; }
.sp-group-legacy .sp-list { flex-direction: row; flex-wrap: wrap; }

/* 칩 — 앞에 그림, 고르면 옅은 포인트 면 + 테두리 */
.sp-chip { position: relative; display: inline-flex; max-width: 100%; cursor: pointer; }
.sp-input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sp-face { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 6px; border: var(--border); border-radius: var(--r-sm); background: #fff; box-shadow: var(--shadow-2); color: var(--c-ink); font-size: var(--t-sm); font-weight: 600; white-space: nowrap; transition: background var(--m-fast), border-color var(--m-fast), color var(--m-fast), transform var(--m-base) var(--ease-press); }
.sp-ico { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-milk); color: var(--c-muted); transition: background var(--m-fast), color var(--m-fast); }
.sp-chip:hover .sp-face { background: var(--c-surface-2); }
.sp-chip:active .sp-face { transform: scale(.96); transition-duration: var(--m-fast); }
.sp-input:checked + .sp-face { background: var(--c-milk-2); border-color: var(--c-accent); color: var(--c-berry); font-weight: 700; }
.sp-input:checked + .sp-face .sp-ico { background: var(--c-accent); color: #fff; }
.sp-input:focus-visible + .sp-face { outline: 2px solid var(--c-accent); outline-offset: 2px; }
/* 5개를 다 고르면 남은 칩은 한 톤 내려 '다 골랐다'를 보여 준다 (누르면 안내가 뜬다) */
.sp.is-full .sp-input:not(:checked) + .sp-face { color: var(--c-muted); box-shadow: none; }

/* 모션 — 고를 때 살짝 튕김, 더 못 고를 때 좌우로 살짝 흔들림 */
.sp-chip.is-pop .sp-face { animation: sp-pop var(--m-base) var(--ease-press); }
.sp-chip.is-pop .sp-ico { animation: sp-ico-pop var(--m-base) var(--ease-press); }
.sp-chip.is-denied .sp-face { animation: sp-deny 320ms var(--ease); }
@keyframes sp-pop { 0% { transform: scale(.92); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes sp-ico-pop { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(-12deg) scale(1.18); } 100% { transform: rotate(0) scale(1); } }
@keyframes sp-deny { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) {
  .sp-chip.is-pop .sp-face, .sp-chip.is-pop .sp-ico, .sp-chip.is-denied .sp-face { animation: none; }
  .sp-face, .sp-ico { transition: none; }
}

/* 모바일 — 묶음을 가로로 넘겨 보기 (리뷰 키워드 고르기처럼) */
@media (max-width: 720px) {
  .sp-groups { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(172px, 72%); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--s-4); margin: 0 calc(var(--s-4) * -1); padding: 0 var(--s-4) var(--s-2); -webkit-overflow-scrolling: touch; }
  .sp-group { scroll-snap-align: start; }
  .sp-group-legacy { grid-column: auto; }
  .sp-group-legacy .sp-list { flex-direction: column; flex-wrap: nowrap; }
}