/* 405.kr 글자·값 연출(v3 키네틱, 2026-10-06) — docs/LUXSYSTEM-DESIGN.md §12.1. 짝은 /kin.js.
   규칙: ① 한 번 재생하고 멈춘다(무한 루프 없음) ② 장면은 2.5초 안 ③ 「움직임 줄이기」면 머리 스니펫이 html.kin 을 안 붙여 아무것도 숨지 않는다
   ④ 스크립트가 안 와도 숨긴 것은 CSS 가 스스로 되돌린다(kin-show) ⑤ 끝나면 DOM 을 원래대로 되돌린다(글자 조각을 남기지 않는다).
   html 상태 — kin: 움직임 허용 · kin-wait: 이 세션 첫 장면 대기 · kin-ready: kin.js 가 떠서 맡았다. */
:root{--kin-ease:cubic-bezier(.22,1,.36,1);--kin-accent:var(--t-accent,var(--teal,#6A57F2));--kin-warn:#E0612F}

@keyframes kin-rise{from{opacity:0;transform:translateY(.42em)}to{opacity:1;transform:none}}
@keyframes kin-zoom{from{opacity:0;transform:scale(1.9);filter:blur(6px)}60%{opacity:1;filter:blur(0)}to{opacity:1;transform:none;filter:none}}
@keyframes kin-wobble{0%{transform:rotate(0)}20%{transform:rotate(-7deg) translateY(-.04em)}45%{transform:rotate(6deg)}70%{transform:rotate(-3deg)}100%{transform:none}}
@keyframes kin-fade{from{opacity:0}to{opacity:1}}
@keyframes kin-show{to{opacity:1;transform:none}}
@keyframes kin-rule{from{background-size:0% 2px,0% .14em}to{background-size:100% 2px,100% .14em}}
@keyframes kin-strike{0%{background-size:0% .07em;background-position:0 56%}22%{background-size:100% .07em;background-position:0 56%}78%{background-size:100% .07em;background-position:100% 56%}100%{background-size:0% .07em;background-position:100% 56%}}
@keyframes kin-odo{from{transform:translateY(var(--kin-from,0))}to{transform:translateY(var(--kin-to,0))}}
@keyframes kin-stamp{from{opacity:0;transform:rotate(-8deg) scale(1.55)}to{opacity:.92;transform:rotate(-8deg) scale(1)}}
@keyframes kin-print{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

/* ── 글자 조각(끝나면 kin.js 가 지운다) ── */
.kin-w{display:inline-block;white-space:nowrap}
.kin-c{display:inline-block}
/* 제목 장면: 원문의 줄 나눔을 재서 <br> 로 굳혔으니 스스로는 줄을 바꾸지 않는다(kin.js split 의 freeze) */
.kin-nowrap{white-space:nowrap}

/* ── 스크립트가 뜨기 전: 잠깐 숨기고, 1.6초 안에 스크립트가 안 오면 스스로 보인다 ── */
html.kin:not(.kin-ready) [data-kin="words"],
html.kin:not(.kin-ready) [data-kin="rise"],
html.kin:not(.kin-ready) [data-kin="stagger"]>*{opacity:0;transition:none;animation:kin-show .01s linear 1.6s forwards}

/* ── 화면에 들어올 때 한 번 ── */
/* animation:none — luxsystem.css 의 lux-rise(스크롤 타임라인)가 걸린 카드는 그 애니메이션이 opacity 를 쥐고 있어 숨김이 안 먹는다.
   transition:none — kin 이 쥐고 있는 동안(끝나기 전)은 요소의 제 전환을 끈다. 홈 카드(.tool)는 transition:.15s(= all)라
     숨김(0)↔보임(1)으로 <바탕값>이 바뀌는 순간에 전환이 돌 수 있다. 실제로 겪은 것은 「늦게 온 날」 한 번이다(2026-10-06):
     표식을 붙이는 사이에 레이아웃을 읽자 그때의 중간 상태(숨김)가 한 번 계산됐고, 보이던 카드가 0.08 까지 꺼졌다 다시 켜졌다.
     (보통 길에서는 차례가 지켜진다 — 재 봤다: 90ms 시점 첫 카드 0.60 · 마지막 카드 0.00. 여기는 다른 브라우저를 위한 방어다.)
     끝난 뒤(kin-done)에는 이 규칙이 안 걸려 요소의 제 전환으로 돌아간다(hover 가 다시 산다). */
html.kin-ready [data-kin="rise"]:not(.kin-go){opacity:0;animation:none;transition:none}
html.kin-ready [data-kin="rise"].kin-go:not(.kin-done){animation:kin-rise .55s var(--kin-ease) both;transition:none}
html.kin-ready [data-kin="stagger"]:not(.kin-go)>*{opacity:0;animation:none;transition:none}
html.kin-ready [data-kin="stagger"].kin-go:not(.kin-done)>*{animation:kin-rise .5s var(--kin-ease) both;animation-delay:calc(var(--i,0)*55ms);transition:none}
/* 끝난 뒤에는 애니메이션을 걷는다 — 채움(both)이 남아 있으면 카드의 hover 이동(transform)을 덮어 버린다 */
html.kin-ready [data-kin="rise"].kin-done,html.kin-ready [data-kin="stagger"].kin-done>*{animation:none}
/* 늦게 온 날: 연출 없이 바로 「끝남」으로 넘기는 요소(kin.js 의 settle). 그 한 번의 바뀜에서 전환이 돌지 않게 0.08초만 끈다 */
.kin-now,.kin-now>*{transition:none!important}
/* 낱말 제목: 차례가 오기 전에는 <요소째> 숨긴다(조각은 보일 때 낸다 — 안 내려 본 제목이 조각난 채로 남지 않게).
   조각 규칙은 클래스(.kin-words)에 건다 — data-kin 속성에 걸면 Kin.words() 로 부른 요소는 조각만 나고 안 움직인다(가입 화면 제목이 그랬다). */
html.kin-ready [data-kin="words"]:not(.kin-split):not(.kin-done){opacity:0}
.kin-words .kin-w{opacity:0}
.kin-words.kin-go .kin-w{animation:kin-rise .5s var(--kin-ease) both;animation-delay:calc(var(--i,0)*70ms)}

/* ── 장면(첫 화면): 부품은 .kin-s, 제목은 [data-kin="headline"] ── */
html.kin-wait [data-kin-scene] .kin-s,
html.kin-wait [data-kin="headline"]{opacity:0;animation:kin-show .01s linear 1.3s forwards}
[data-kin-scene].kin-play .kin-s{animation:kin-rise .5s var(--kin-ease) both;animation-delay:var(--kin-d,0ms)}
.kin-split[data-kin="headline"] .kin-c{opacity:0}
.kin-split[data-kin="headline"] .kin-c.kin-a,
.kin-split[data-kin="headline"] .kin-c.kin-z{animation:kin-rise .42s var(--kin-ease) both;animation-delay:var(--d,0ms)}
.kin-split[data-kin="headline"] .kin-c.kin-b{animation:kin-zoom .52s var(--kin-ease) both;animation-delay:var(--d,0ms)}
.kin-split[data-kin="headline"] .kin-c.kin-k{animation:kin-rise .42s var(--kin-ease) both,kin-wobble .5s ease-in-out forwards;animation-delay:var(--d,0ms),calc(var(--d,0ms) + .4s)}
/* 조각으로 나뉜 동안은 글자색 그라디언트(background-clip:text)가 조각에 안 실린다 → 단색으로 둔다. 끝나면 원래 마크업으로 돌아간다. */
.kin-split .pt{background:none;-webkit-text-fill-color:currentColor;color:var(--kin-accent)}

/* 짐작 — 줄이 그어졌다가 걷힌다 */
.kin-split .kd{background-image:linear-gradient(var(--kin-warn),var(--kin-warn));background-repeat:no-repeat;background-size:0% .07em;background-position:0 56%;animation:kin-strike 1.5s var(--kin-ease) forwards;animation-delay:var(--d,0ms)}

/* 잰 값 — 눈금자 밑줄. 평소에도 그려져 있고(정적), 장면에서는 왼쪽부터 그려진다 */
.ptw{background-image:linear-gradient(var(--kin-accent),var(--kin-accent)),repeating-linear-gradient(90deg,var(--kin-accent) 0 2px,transparent 2px 10px);background-repeat:no-repeat;background-position:0 100%,0 100%;background-size:100% 2px,100% .14em;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:.1em}
.kin-split .ptw{background-size:0% 2px,0% .14em;animation:kin-rule .6s var(--kin-ease) forwards;animation-delay:var(--d,0ms)}

/* ── 굴러 올라가는 숫자 ──
   감싸개는 줄 높이와 <같은 높이>로 줄 바닥에 붙인다(inline-flex + vertical-align:bottom). 기준선 맞춤에 맡기면 줄이 3.9px 높아져
   아래 내용이 밀린다(2026-10-06 실측: .proof 109.9 → 113.7). 높이가 줄과 같으면 글자 자리도 굴리기 전·후가 같다. */
.kin-odo{display:inline-flex;vertical-align:bottom;height:var(--kin-lh,1.2em);white-space:nowrap;font-variant-numeric:tabular-nums}
.kin-odo>span{display:block;flex:none;height:var(--kin-lh,1.2em);line-height:var(--kin-lh,1.2em)}
.kin-odo-d{overflow:hidden}
.kin-odo-s{display:block;animation:kin-odo var(--kin-dur,1s) var(--kin-ease) both;animation-delay:var(--d,0ms)}
.kin-odo-s>span{display:block;height:var(--kin-lh,1.2em);line-height:var(--kin-lh,1.2em)}

/* ── 도장 · 인쇄되어 나오는 종이(회원 화면) ── */
.lx-stamp--anim.is-in.kin-thump{animation:kin-stamp .3s var(--kin-ease) 1 both}
.kin-print{animation:kin-print .9s var(--kin-ease) both}
.kin-print>*{animation:kin-fade .45s linear both;animation-delay:calc(var(--i,0)*90ms + .12s)}
.kin-print .kin-row{animation:kin-fade .45s linear both;animation-delay:calc(var(--i,0)*90ms + .12s)}

@media (prefers-reduced-motion:reduce){
  [data-kin],[data-kin="stagger"]>*,[data-kin-scene] .kin-s,.kin-c,.kin-w,.kin-odo-s,.kin-print,.kin-print>*,.kd,.ptw{animation:none!important;opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
  .lx-stamp--anim.is-in.kin-thump{opacity:.92!important;transform:rotate(-8deg)!important}
  .ptw{background-size:100% 2px,100% .14em!important}
}
@media print{
  [data-kin],[data-kin="stagger"]>*,[data-kin-scene] .kin-s,.kin-c,.kin-w,.kin-print,.kin-print>*{animation:none!important;opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
}