/* king.css — (v4.3.1) 노노카 지각 이스터에그 「국왕 납시오」. 로직 · 단계 정의는 js/king.js 머리말.
   장식이 붙은 요소(root = PC 블록 .tt-blk / PC 팝업 .tt-pop / 모바일 카드 .tcard)에 king.js 가 클래스를 붙인다:
     .k-on  장식 중      .k-s1~.k-s5  지각 단계(누적)      .k-arrive  입장 연출 중      .k-live  금빛 「입장 후」 모습(v4.5.8 부터 모션 줄이기 · 재생 중 다시 그려진 경우만)
     .k-leave  복귀 연출 중(.k-arrive 또는 .k-live 와 함께 붙음 — 1.2초 동안 서서히 걷어냄, 파일 끝 「복귀 연출」)
   색 약속: 입장 전 = 은빛(가만히), 입장 순간부터 = 금빛 + 후광 + 움직임. (v4.5.8) 입장 연출이 끝나면 바로 .k-leave 로 서서히 걷어낸 뒤 king.js 가 장식을 지운다(.k-live 는 모션 줄이기 · 재생 중 다시 그려진 경우만).
   모션 성격 Premium: 이징 하나(--k-ease), 지속 시간 0.28 / 0.56 / 1.2초.
   무대는 .kg-*, PC 블록의 작은 장식은 .kb-*, 대신의 말은 .king-*. */

.k-on {
  --k-ease: cubic-bezier(.4, 0, .2, 1);
  --k-out: cubic-bezier(.05, .7, .1, 1);
  --k-in: cubic-bezier(.3, 0, 1, 1);
  --k-std: .56s;
  --k-slow: 1.2s;
  --k-leave: 1.2s;                          /* 복귀 연출 길이 — king.js LEAVE_MS 와 같게 */
  --k-silver: #c3cad8;
  --k-silver-hi: #e8ecf4;
  --k-silver-lo: #6f7787;
  --k-gold: #e8b84a;
  --k-gold-hi: #ffe49a;
  --k-gold-lo: #9a6d1c;
  --k-trim: var(--k-silver);
  --k-trim-lo: var(--k-silver-lo);
  --k-glow: rgba(205, 215, 235, .5);
  /* (v4.5.8) 카드 · 팝업 본문(사이트 배경) 위 글자 · 테두리 — 무대 그림이 아니라 테마를 따른다. 어둡게 = 아래 값, 밝게 = theme.css */
  --k-ink-kick: var(--k-silver);            /* 「대신이 고하오」 */
  --k-ink: var(--k-silver-hi);              /* 대신의 말 굵은 글 · 대기 시간 카운터 */
  --k-ink-gold-kick: var(--k-gold);         /* 입장 후 머리말 */
  --k-ink-gold: var(--k-gold-hi);           /* 입장 후 굵은 글 */
  --k-edge-lo: var(--k-silver-lo);          /* 단계가 오른 카드 · 블록 테두리 */
  --k-edge: var(--k-silver);
}
.k-on.k-arrive, .k-on.k-live {
  --k-trim: var(--k-gold);
  --k-trim-lo: var(--k-gold-lo);
  --k-glow: rgba(255, 214, 120, .6);
}

/* ───────── 무대 (모바일 카드 · PC 팝업의 썸네일 자리를 덮는다) ───────── */
.kg-scene { position: absolute; inset: 0; overflow: hidden; background: #0e0a17; isolation: isolate; z-index: 1; transition: opacity var(--k-leave) var(--k-ease) .1s; }   /* 모바일 카드: LIVE · 합동 아이콘(z-index 1, 뒤에 붙음)이 위 */
.k-pop .tt-pop__img { position: relative; }
.k-pop .kg-scene { z-index: 2; }                                                    /* 팝업: 자리표시 아바타(z-index 1)를 덮는다 */
.kg-scene > * { position: absolute; pointer-events: none; }

.kg-hall { inset: 0; background: radial-gradient(62% 72% at 50% 30%, #38305a 0%, #1b1729 58%, #0e0a17 100%); }
.kg-hall::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(#241f37, #110d1b); }

/* 광선: 입장 전 = 은빛, 입장 후 = 금빛(위에 겹친 .kg-gold 층이 나타남) */
.kg-rays {
  left: 50%; top: 30%; width: 440px; height: 440px; margin: -220px 0 0 -220px; z-index: 1;
  background: repeating-conic-gradient(from 0deg, rgba(205, 215, 235, .22) 0 7deg, transparent 7deg 21deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 66%);
  mask-image: radial-gradient(circle, #000 0, transparent 66%);
  opacity: 0; scale: 1;
  transition: opacity var(--k-slow) var(--k-ease), scale var(--k-slow) var(--k-out);
}
.kg-rays.kg-gold { background: repeating-conic-gradient(from 0deg, rgba(255, 214, 120, .3) 0 7deg, transparent 7deg 21deg); }
.k-s2 .kg-rays:not(.kg-gold) { opacity: .45; animation: kg-spin 48s linear infinite; }
.k-s4 .kg-rays:not(.kg-gold) { opacity: .7; }
.k-arrive .kg-rays:not(.kg-gold), .k-live .kg-rays:not(.kg-gold) { opacity: 0; }
.k-arrive .kg-rays.kg-gold { opacity: 1; scale: 1.3; animation: kg-spin 26s linear infinite; transition-delay: .6s; }
.k-live .kg-rays.kg-gold { opacity: .6; scale: 1; animation: kg-spin 40s linear infinite; }
@keyframes kg-spin { to { rotate: 360deg; } }

.kg-carpet { left: 0; right: 0; bottom: 0; height: 64%; z-index: 2; transform-origin: 50% 100%; transform: scaleY(0); transition: transform 1.4s var(--k-out); }
.kg-carpet::before, .kg-carpet::after { content: ""; position: absolute; inset: 0; }
.kg-carpet::before { background: linear-gradient(var(--k-trim-lo), var(--k-trim)); clip-path: polygon(40.3% 0, 59.7% 0, 87.3% 100%, 12.7% 100%); }
.kg-carpet::after { background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .16) 0 3px, transparent 3px 15px), linear-gradient(180deg, #7a1a33, #a3223f); clip-path: polygon(41.4% 1.6%, 58.6% 1.6%, 85.6% 100%, 14.4% 100%); }
.k-s3 .kg-carpet { transform: scaleY(1); }

.kg-dais { left: 50%; top: 33%; width: 132px; height: 26px; margin-left: -66px; z-index: 2; border-radius: 50%; background: radial-gradient(closest-side, var(--k-glow), transparent); opacity: 0; transition: opacity var(--k-slow) var(--k-ease); }
.k-s4 .kg-dais { opacity: 1; animation: kg-breathe 3s ease-in-out infinite; }
@keyframes kg-breathe { 0%, 100% { scale: .97; } 50% { scale: 1.04; } }

.kg-pelmet { left: 0; right: 0; top: 0; height: 9%; z-index: 4; background: linear-gradient(#58101f, #7a1a33); border-bottom: 2px solid var(--k-trim-lo); translate: 0 -100%; transition: translate var(--k-std) var(--k-out); }
.k-s1 .kg-pelmet { translate: 0 0; }
.kg-drape { top: 0; bottom: 0; width: 21%; z-index: 3; background: repeating-linear-gradient(90deg, #7a1a33 0 10px, #8f2140 10px 20px, #661429 20px 30px); transition: transform var(--k-std) var(--k-out); }
.kg-drape::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .13), transparent); background-size: 220% 100%; animation: kg-sheen 7s ease-in-out infinite; }
.kg-drape.kg-l { left: 0; transform: translateX(-102%); box-shadow: 6px 0 14px rgba(0, 0, 0, .45); }
.kg-drape.kg-r { right: 0; transform: translateX(102%); box-shadow: -6px 0 14px rgba(0, 0, 0, .45); }
.k-s1 .kg-drape { transform: none; }
.k-arrive .kg-drape, .k-live .kg-drape { transition: transform .75s var(--k-in) .4s; }
.k-arrive .kg-drape.kg-l, .k-live .kg-drape.kg-l { transform: translateX(-102%); }
.k-arrive .kg-drape.kg-r, .k-live .kg-drape.kg-r { transform: translateX(102%); }
@keyframes kg-sheen { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 0; } }

/* 신하 */
.kg-sub { left: var(--x); bottom: var(--y); width: 26px; height: 50px; margin-left: -13px; z-index: 3; scale: var(--sc); transform-origin: 50% 100%; opacity: 0; translate: 0 16px; transition: opacity var(--k-std) var(--k-out), translate var(--k-std) var(--k-out); transition-delay: calc(var(--i) * 90ms); }
.kg-in { position: absolute; inset: 0; transform-origin: 50% 100%; transition: transform .35s var(--k-out); transition-delay: calc(var(--i) * 70ms); }
.kg-head { position: absolute; top: 0; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #b9a9d6; transition: transform var(--k-std) var(--k-ease); }
.kg-torso { position: absolute; bottom: 0; left: 0; right: 0; height: 36px; border-radius: 12px 12px 3px 3px; background: linear-gradient(#5d4b88, #392c57); box-shadow: inset 0 3px 0 var(--k-trim-lo); }
.k-s2 .kg-sub { opacity: 1; translate: 0 0; }
.k-s2 .kg-sub .kg-in { animation: kg-fidget var(--fd) ease-in-out var(--fl) infinite; }
.k-s5 .kg-sub .kg-in { animation: kg-doze 5.5s ease-in-out var(--fl) infinite; }
.k-s5 .kg-sub .kg-head { transform: translateY(4px) rotate(14deg); }
.k-arrive .kg-sub .kg-in, .k-live .kg-sub .kg-in { animation: none; transform: translateY(5px) scaleY(.88); }
.k-arrive .kg-sub .kg-head, .k-live .kg-sub .kg-head { transform: translateY(4px); }
@keyframes kg-fidget { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2.5deg) translateY(-2px); } }
@keyframes kg-doze { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(5deg) translateY(2px); } }
.kg-zz { left: 14%; bottom: 31%; z-index: 3; font-weight: 800; color: var(--k-silver-hi); opacity: 0; }
.k-s5 .kg-zz { animation: kg-zfloat 3.2s ease-out calc(var(--k) * 1s) infinite; }
.k-arrive .kg-zz, .k-live .kg-zz { animation: none; opacity: 0; }
@keyframes kg-zfloat { 0% { opacity: 0; transform: translate(0, 0) scale(.7); } 20% { opacity: .9; } 100% { opacity: 0; transform: translate(12px, -36px) scale(1.2); } }

.kg-motes { inset: 0; z-index: 3; }
.kg-motes i { position: absolute; left: var(--mx0); bottom: var(--my0); width: 3px; height: 3px; border-radius: 50%; background: var(--k-silver-hi); opacity: 0; }
.k-s4 .kg-motes i { animation: kg-mote var(--md) ease-in-out var(--mdl) infinite; }
.k-arrive .kg-motes i, .k-live .kg-motes i { animation: none; }
@keyframes kg-mote { 0% { opacity: 0; transform: translate(0, 0); } 25% { opacity: .85; } 100% { opacity: 0; transform: translate(var(--mdx), -72px); } }

/* ───────── 왕관: 입장 전 = 은빛으로 가만히, 입장 순간 = 금빛으로 바뀌며 후광 · 궤도 별 · 광택이 움직임 ───────── */
.kg-crown, .kb-crown { opacity: 0; transform: translateY(-26px) scale(.82); filter: drop-shadow(0 0 3px rgba(200, 210, 230, .25)); transition: opacity var(--k-std) var(--k-out), transform var(--k-slow) var(--k-out), filter var(--k-slow) var(--k-ease); }
.kg-crown { left: 50%; top: 13%; width: 68px; height: 56px; margin-left: -34px; z-index: 7; --R: 46px; }
.kg-crown-in { display: block; width: 100%; height: 100%; }
.kg-crown svg, .kb-crown svg { width: 100%; height: 100%; display: block; overflow: visible; }
.k-s1 .kg-crown { opacity: 1; transform: none; }
.kg-cs, .kg-cg { transition: opacity .6s var(--k-ease); }
.kg-cg { opacity: 0; }
.k-arrive .kg-cg, .k-live .kg-cg { opacity: 1; transition-delay: .7s; }
.k-arrive .kg-cs, .k-live .kg-cs { opacity: 0; transition-delay: .7s; }
.kg-sweep { opacity: 0; }
.k-arrive .kg-sweep, .k-live .kg-sweep { opacity: 1; animation: kg-sweep 3.6s ease-in-out 1.2s infinite; }
@keyframes kg-sweep { 0%, 55% { translate: -26px 0; } 100% { translate: 96px 0; } }

.kg-halo { position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; margin: -85px 0 0 -85px; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 228, 150, .6) 0, rgba(255, 200, 90, .28) 38%, transparent 68%); opacity: 0; }
.k-arrive .kg-halo { animation: kg-halo-in 1.2s var(--k-out) .7s both; }
.k-live .kg-halo { animation: kg-halo-pulse 3.2s ease-in-out infinite; }
@keyframes kg-halo-in { 0% { opacity: 0; transform: scale(.4); } 100% { opacity: .9; transform: scale(1); } }
@keyframes kg-halo-pulse { 0%, 100% { opacity: .9; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }
.kg-orbit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; transition: opacity .8s var(--k-ease); }
.kg-orbit i { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--k-gold-hi); box-shadow: 0 0 6px var(--k-gold); transform: rotate(calc(var(--a) * 1deg)) translateX(var(--R)); }
.k-arrive .kg-orbit, .k-live .kg-orbit { opacity: 1; transition-delay: 1.1s; animation: kg-orbit 9s linear infinite; }
@keyframes kg-orbit { to { transform: rotate(360deg); } }

.kg-veil { inset: 0; z-index: 6; background: #05030a; opacity: 0; }
.k-arrive .kg-veil { animation: kg-veil 1.2s ease both; }
@keyframes kg-veil { 0% { opacity: 0; } 20% { opacity: .5; } 62% { opacity: .5; } 100% { opacity: 0; } }
.k-arrive .kg-crown { animation: kg-strike 1.8s both; }
.k-live .kg-crown { opacity: 1; transform: scale(1.18); animation: kg-glow 3.2s ease-in-out infinite; }
@keyframes kg-strike {
  0%   { transform: scale(1); animation-timing-function: cubic-bezier(.05, .7, .1, 1); }
  20%  { transform: translateY(7px) scale(.92); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  40%  { transform: translateY(-6px) scale(1.45); filter: drop-shadow(0 0 24px rgba(255, 232, 160, .98)); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  64%  { transform: scale(1.18); filter: drop-shadow(0 0 12px rgba(255, 214, 120, .6)); }
  100% { transform: scale(1.18); filter: drop-shadow(0 0 12px rgba(255, 214, 120, .6)); }
}
@keyframes kg-glow { 0%, 100% { filter: drop-shadow(0 0 12px rgba(255, 214, 120, .6)); } 50% { filter: drop-shadow(0 0 22px rgba(255, 226, 150, .92)); } }
.kg-flare { left: 50%; top: 27%; width: 60px; height: 60px; margin: -30px 0 0 -30px; z-index: 8; border-radius: 50%; background: radial-gradient(circle, #fff6d0 0, rgba(255, 214, 120, .6) 35%, transparent 70%); opacity: 0; }
.k-arrive .kg-flare { animation: kg-flare 1s var(--k-out) .72s both; }
@keyframes kg-flare { 0% { opacity: 0; transform: scale(.2); } 20% { opacity: 1; } 100% { opacity: 0; transform: scale(5); } }
.kg-sparks { inset: 0; z-index: 8; }
.kg-sparks i { position: absolute; left: 50%; top: 27%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--k-gold-hi); opacity: 0; box-shadow: 0 0 6px var(--k-gold); }
.k-arrive .kg-sparks i { animation: kg-burst 1s var(--k-out) calc(.74s + var(--j) * 25ms) both; }
@keyframes kg-burst { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); } }

/* ───────── 대신의 말 ───────── */
.king-msg { min-height: 7.2rem; display: grid; align-content: start; gap: 2px; margin-top: 6px; transition: opacity .5s var(--k-ease), max-height 1s var(--k-ease) .15s, min-height 1s var(--k-ease) .15s, margin-top 1s var(--k-ease) .15s, padding-top 1s var(--k-ease) .15s, border-top-width 1s var(--k-ease) .15s; }
.king-msg > * { animation: king-in .4s var(--k-out) both; }
.king-msg > *:nth-child(2) { animation-delay: .08s; }
.king-msg > *:nth-child(3) { animation-delay: .16s; }
.king-msg > *:nth-child(4) { animation-delay: .24s; }
@keyframes king-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.king-kick { font-size: 0.72rem; letter-spacing: .1em; color: var(--k-ink-kick); opacity: .9; }
.king-msg b { font-size: 1.05rem; font-weight: 800; line-height: 1.4; color: var(--k-ink); text-wrap: balance; }
.king-msg b.king-big { font-size: 1.6rem; animation-name: king-pop; animation-duration: .6s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
@keyframes king-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
.king-msg small { color: var(--color-text-muted, #999); font-size: 0.8rem; line-height: 1.55; }
.king-count { font-size: 1.9rem; font-weight: 700; line-height: 1.15; color: var(--k-ink); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.k-arrive .king-kick, .k-live .king-kick { color: var(--k-ink-gold-kick); }
.k-arrive .king-msg b, .k-live .king-msg b { color: var(--k-ink-gold); }
.k-pop .king-msg { min-height: 8rem; padding-top: 8px; border-top: 1px solid var(--color-line-soft, #2a2a2a); }
.k-pop .king-msg b { font-size: 0.92rem; }
.k-pop .king-msg b.king-big { font-size: 1.35rem; }
.k-pop .king-msg small { font-size: 0.74rem; }
.k-pop .king-count { font-size: 1.6rem; }
/* (v4.5.8) PC 카드 보기(v4.4.0, 5열): 카드 본문이 고정 높이(--bh, timetable.css)라 대신의 말이 잘려 안 보였다 — 노노카 카드만 본문이 늘어나게 하고
   (레인의 오늘 카드 영역은 높이 고정 · 넘치면 영역 안 스크롤) 글자는 좁은 폭(제목 칸 약 150px)에 맞게 줄인다.
   최소 높이는 :not(.k-leave) — 복귀 연출의 min-height 0 전환을 막지 않게 */
.cards-board .tcard.k-card .tcard__body { height: auto; min-height: var(--bh); }
.cards-board .tcard.k-card:not(.k-leave) .king-msg { min-height: 5.6rem; }
.cards-board .k-card .king-kick { font-size: 0.66rem; }
.cards-board .k-card .king-msg b { font-size: 0.82rem; line-height: 1.35; }
.cards-board .k-card .king-msg b.king-big { font-size: 1.12rem; }
.cards-board .k-card .king-msg small { font-size: 0.7rem; line-height: 1.45; }
.cards-board .k-card .king-count { font-size: 1.3rem; }

/* 모바일 오늘 카드: 단계가 오르면 테두리가 은빛으로 (입장 후 LIVE 테두리는 사이트 그대로) */
.tcard.k-s2 { border-color: var(--k-edge-lo); }
.tcard.k-s3 { border-color: var(--k-edge); }
.tcard.k-live, .tcard.k-arrive { border-color: var(--color-live); }

/* ───────── PC 타임테이블 블록: 아바타가 주인공이라 작고 약하게 ───────── */
.k-blk .tt-blk__th { position: relative; }
.k-blk .tt-blk__th.tt-ph { place-items: end center; padding-bottom: 2px; }
.tt-blk.k-s1 { border-color: var(--k-edge-lo); }
.tt-blk.k-s2 { border-color: var(--k-edge); animation: kb-pulse 2.4s ease-in-out infinite; }
.tt-blk.k-live, .tt-blk.k-arrive { animation: none; }
.tt-blk.tt-blk--live.k-on { border-color: var(--color-live); }          /* 입장 후에도 LIVE 테두리는 사이트 그대로 */
@keyframes kb-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(200, 210, 230, 0); } 50% { box-shadow: 0 0 10px 1px rgba(200, 210, 230, .3); } }
.kb-crown { position: absolute; left: 50%; top: 1px; width: 24px; height: 20px; margin-left: -12px; z-index: 2; --R: 16px; }
.kb-crown .kg-crown-in { display: block; width: 100%; height: 100%; }
.kb-crown .kg-halo { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.k-s1 .kb-crown { opacity: 1; transform: none; }
.k-arrive .kb-crown { animation: kb-strike 1.8s both; }
.k-live .kb-crown { opacity: 1; transform: scale(1.12); animation: kb-glow 3.2s ease-in-out infinite; }
@keyframes kb-strike {
  0%   { transform: scale(1); animation-timing-function: cubic-bezier(.05, .7, .1, 1); }
  20%  { transform: translateY(3px) scale(.92); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  40%  { transform: scale(1.2); filter: drop-shadow(0 0 3px rgba(255, 232, 160, .55)); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  64%  { transform: scale(1.12); filter: drop-shadow(0 0 2px rgba(255, 214, 120, .4)); }
  100% { transform: scale(1.12); filter: drop-shadow(0 0 2px rgba(255, 214, 120, .4)); }
}
@keyframes kb-glow { 0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 214, 120, .4)); } 50% { filter: drop-shadow(0 0 4px rgba(255, 226, 150, .55)); } }
/* 후광 · 별은 아바타를 가리지 않게 아주 약하게 */
.k-arrive .kb-crown .kg-halo { animation: kb-halo-in 1.2s var(--k-out) .7s both; }
.k-live .kb-crown .kg-halo { animation: kb-halo-pulse 3.2s ease-in-out infinite; }
@keyframes kb-halo-in { 0% { opacity: 0; transform: scale(.4); } 100% { opacity: .22; transform: scale(1); } }
@keyframes kb-halo-pulse { 0%, 100% { opacity: .22; transform: scale(1); } 50% { opacity: .3; transform: scale(1.06); } }
.k-arrive .kb-crown .kg-orbit, .k-live .kb-crown .kg-orbit { opacity: .45; }

.kb-zz { position: absolute; right: 10px; top: 6px; font-size: 0.75rem; font-weight: 800; color: var(--k-silver-hi); opacity: 0; }
.k-s5 .kb-zz { animation: kg-zfloat 3.2s ease-out calc(var(--k) * 1s) infinite; }
.k-arrive .kb-zz, .k-live .kb-zz { animation: none; opacity: 0; }
.kb-carpet { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-linear-gradient(90deg, #a3223f 0 10px, #8d1c37 10px 20px); border-top: 2px solid var(--k-silver); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.4s var(--k-out); z-index: 3; }
.k-s3 .kb-carpet { transform: scaleX(1); }
.k-arrive .kb-carpet, .k-live .kb-carpet { transform: scaleX(1); border-top-color: var(--k-gold); }
.kb-flare { position: absolute; left: 50%; top: 40%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; z-index: 3; background: radial-gradient(circle, #fff6d0 0, rgba(255, 214, 120, .6) 35%, transparent 70%); opacity: 0; pointer-events: none; }
.k-arrive .kb-flare { animation: kb-flare 1s var(--k-out) .72s both; }
@keyframes kb-flare { 0% { opacity: 0; transform: scale(.2); } 20% { opacity: .3; } 100% { opacity: 0; transform: scale(2.6); } }
.kb-sparks i { position: absolute; left: 50%; top: 40%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: var(--k-gold-hi); box-shadow: 0 0 4px var(--k-gold); opacity: 0; z-index: 3; pointer-events: none; }
.k-arrive .kb-sparks i { animation: kg-burst .9s var(--k-out) calc(.74s + var(--j) * 25ms) both; }

/* ───────── 복귀 연출: 입장 연출이 끝나면(v4.5.8, 전엔 입장 후 1분) king.js leave() 가 .k-leave 를 붙인다 ─────────
   무대는 썸네일 위에 겹쳐 있어, 투명해지면 아래의 평소 썸네일(LIVE 표시 포함)이 드러난다(교차 전환).
   대신의 말은 먼저 옅어지고 칸이 접힌다 — max-height 시작값은 king.js 가 현재 높이(px)로 인라인 지정한다.
   접힐 때 아래 여백도 같이 없애야 마지막에 튀지 않는다: 카드 .tcard__main · 팝업 .tt-pop__body 의 gap 은 둘 다 4px 이라 margin-top 을 −4px 로.
   카드 오른쪽 도넛(.tcard__ring)은 body 세로 중앙에 있어, 칸이 접히는 동안 제자리로 부드럽게 올라온다. */
.k-leave .kg-scene { opacity: 0; }
.k-leave .king-msg { opacity: 0; max-height: 0 !important; min-height: 0; margin-top: -4px; padding-top: 0; border-top-width: 0; overflow: hidden; }
.k-leave .kb-crown { opacity: 0; transition: opacity var(--k-leave) var(--k-ease), transform var(--k-slow) var(--k-out), filter var(--k-slow) var(--k-ease); }
.k-leave .kb-carpet { opacity: 0; transition: opacity var(--k-leave) var(--k-ease), transform 1.4s var(--k-out); }

/* 모션 줄이기: 연출 없이 최종 모습만 (king.js 도 입장 연출을 건너뛰고 바로 「입장 후」 모습으로) */
@media (prefers-reduced-motion: reduce) {
  .k-on *, .k-on *::before, .k-on *::after, .k-on.tt-blk { animation: none !important; transition: none !important; }
}