/* rec 화면 전용 스타일(2026-10-20 개편). brand.css 다음에 로드. 선택자는 #view-rec 로 한정한다.
   움직이는 속성은 transform · opacity · clip-path · font-weight(ink) 뿐. 새 무한 애니 없음. */

/* ---------- 머리: 뒤로 링크 · 아이브로우 · 제목 + F4(.done) + 삼합 배지 · 받침 진행 ---------- */
#view-rec .back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 10px; font: 600 13px/1 var(--font); color: var(--muted); word-break: keep-all; }
#view-rec .back .dt { font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
#view-rec .rec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 10px; }
#view-rec .rec-title { min-width: 0; flex: 1 1 200px; }
#view-rec .rec-tag { font: 800 24px/1.15 var(--title); letter-spacing: -.02em; word-break: keep-all; text-wrap: balance; display: flex; align-items: center; gap: 10px; }
#view-rec .rec-tag small { font: 600 12px/1 var(--font); color: var(--muted); margin-left: 2px; white-space: nowrap; }
#view-rec .rec-tag small .num { font: 800 13px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--text); }
#view-rec .rec-intent { margin-top: 4px; font: 400 13px/1.5 var(--font); color: var(--muted); word-break: keep-all; }
#view-rec .rec-f4wrap { display: grid; justify-items: end; gap: 6px; flex: 0 0 auto; }
#view-rec .rec-prog { margin: 2px 0 6px; }
#view-rec .rec-prog .f4-prog { width: 100%; }
#view-rec .f4-prog-say { font: 600 12px/1.4 var(--font); color: var(--muted); word-break: keep-all; }
@media (max-width: 420px) { #view-rec .rec-head { align-items: flex-start; } #view-rec .rec-f4wrap { justify-items: start; } }

/* ---------- 스테퍼: 이모지 → Syne 숫자, 켜진 단계는 chipin 1회 + 정적 코발트 링(fspulse 는 brand.css 가 끔) ---------- */
#view-rec .fs .fs-ic { font: 800 18px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--text); transition: transform .35s var(--ease-back); }
#view-rec .fs.on .fs-ic { color: #fff; background: var(--text); box-shadow: 0 0 0 4px var(--cobalt-s); transform: scale(1.12); animation: rec-stepin .45s var(--ease-back) both; }
#view-rec .fs.done .fs-ic { color: var(--cobalt); background: var(--cobalt-s); }
@keyframes rec-stepin { from { transform: scale(.8); opacity: .5; } to { transform: scale(1.12); opacity: 1; } }
#view-rec .flow-say { font: 700 17px/1.4 var(--title); word-break: keep-all; }
#view-rec .flow-say.play { animation: rise .5s var(--ease-expo) both; }
#view-rec .panel-title { font: 800 15px/1.4 var(--font); word-break: keep-all; }

/* ---------- 팔레트: 탭할 수 있는 실제 버튼. refresh() 재호출이면 rise 반복 없음(#palette[data-played]) ---------- */
#view-rec .sw { font-family: var(--font); text-align: left; cursor: pointer; appearance: none; -webkit-appearance: none; animation-timing-function: var(--ease-expo); }
#view-rec .sw:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
#view-rec #palette[data-played] .sw { animation: none; opacity: 1; }
#view-rec #palette[data-played] .sw.avoid { opacity: .45; }
#view-rec .sw.hit { transform: translateY(-3px) scale(1.03); }

/* '왜 이 색인가': 첫 항목 색 이름 ink 1회 · 스와치 탭 → 해당 문장 배경 하이라이트(가상 요소 opacity 전환, 배경색 전환 금지) */
#view-rec #rec-why li { position: relative; isolation: isolate; }
#view-rec #rec-why li::after { content: ''; position: absolute; inset: -4px -8px; border-radius: 10px; background: var(--cobalt-s); opacity: 0; transition: opacity .3s var(--ease-io); z-index: -1; pointer-events: none; }
#view-rec #rec-why li.hl::after { opacity: 1; }
#view-rec #rec-why li:first-child b { font-weight: 800; animation: ink .9s var(--ease-expo) both; animation-delay: 200ms; }

/* ---------- 패션 행: 처음(full)엔 차례로, refresh 뒤엔 바뀐 행만 rise ---------- */
#view-rec .or.rise { animation: rise .5s var(--ease-expo) both; animation-delay: calc(var(--i, 0) * var(--row-step, 40ms)); }

/* ---------- 친구 궁합 점수 Syne(countTo) ---------- */
#view-rec .frec .sc { font-family: var(--display); font-variant-numeric: tabular-nums; }

/* ---------- 카드 과정 목록: 켜진 단계 아이콘 정적 링(fspulse 는 brand.css 가 끔) ---------- */
#view-rec .pr.on .pr-ic { box-shadow: 0 0 0 3px var(--cobalt-s); }
#view-rec .pr .pr-ic.num { font-family: var(--display); font-size: 15px; }

/* ---------- 모션 줄이기: 전부 최종 상태 ---------- */
@media (prefers-reduced-motion: reduce) {
  #view-rec .fs.on .fs-ic, #view-rec .flow-say.play, #view-rec .or.rise, #view-rec #rec-why li:first-child b, #view-rec .sw { animation: none !important; transition: none !important; opacity: 1 !important; }
  #view-rec .sw.avoid { opacity: .45 !important; }
  #view-rec #rec-why li::after { transition: none !important; }
}