/*
  NSSymbolDrawOnEffect + effectWithIndividually + optionsWithNonRepeating
  → 웹 CSS 등가 구현: pathLength="1" 기반 stroke-dashoffset 애니메이션
  각 path가 순서대로 한 번만 그려짐
*/

/* ─── Draw-On keyframe ─── */
@keyframes sf-draw {
  0%   { stroke-dashoffset: 1; }
  100% { stroke-dashoffset: 0; }
}

@keyframes sf-fill-in {
  0%   { opacity: 0; transform: scale(0.7); }
  60%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

/* ─── 베이스 ─── */
.sf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: currentColor;
}

.sf svg {
  overflow: visible;
}

/* stroke 기반 path — draw-on */
.sf [data-draw] {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  pathLength: 1; /* CSS pathLength은 지원 안 되므로 HTML attribute로 설정 */
}

/* fill 기반 shape — fade+scale-in */
.sf [data-fill] {
  opacity: 0;
}

/* .sf--animate 클래스 추가 시 실행 */
.sf--animate [data-draw]:nth-child(1)  { animation: sf-draw 0.45s cubic-bezier(.25,0,.1,1) 0.00s forwards; }
.sf--animate [data-draw]:nth-child(2)  { animation: sf-draw 0.45s cubic-bezier(.25,0,.1,1) 0.08s forwards; }
.sf--animate [data-draw]:nth-child(3)  { animation: sf-draw 0.45s cubic-bezier(.25,0,.1,1) 0.16s forwards; }
.sf--animate [data-draw]:nth-child(4)  { animation: sf-draw 0.45s cubic-bezier(.25,0,.1,1) 0.24s forwards; }
.sf--animate [data-draw]:nth-child(5)  { animation: sf-draw 0.45s cubic-bezier(.25,0,.1,1) 0.32s forwards; }
.sf--animate [data-draw]:nth-child(6)  { animation: sf-draw 0.45s cubic-bezier(.25,0,.1,1) 0.40s forwards; }
.sf--animate [data-draw]:nth-child(7)  { animation: sf-draw 0.45s cubic-bezier(.25,0,.1,1) 0.48s forwards; }
.sf--animate [data-fill]:nth-child(1)  { animation: sf-fill-in 0.3s cubic-bezier(.34,1.56,.64,1) 0.00s forwards; }
.sf--animate [data-fill]:nth-child(2)  { animation: sf-fill-in 0.3s cubic-bezier(.34,1.56,.64,1) 0.10s forwards; }
.sf--animate [data-fill]:nth-child(3)  { animation: sf-fill-in 0.3s cubic-bezier(.34,1.56,.64,1) 0.20s forwards; }

/* 정적(이미 그려진) 상태 */
.sf--static [data-draw] { stroke-dashoffset: 0; }
.sf--static [data-fill]  { opacity: 1; }

/* 색상 시멘틱 */
.sf--blue   { color: #0066cc; }
.sf--green  { color: #34c759; }
.sf--red    { color: #ff3b30; }
.sf--orange { color: #ff9500; }
.sf--purple { color: #af52de; }
.sf--gray   { color: #8e8e93; }
.sf--teal   { color: #30b0c7; }

/* 크기 */
.sf--16 svg { width: 16px; height: 16px; }
.sf--20 svg { width: 20px; height: 20px; }
.sf--24 svg { width: 24px; height: 24px; }
.sf--32 svg { width: 32px; height: 32px; }
.sf--48 svg { width: 48px; height: 48px; }