/* KOBIS 전체 검색·한줄평·재개봉 목록. 색과 글꼴은 style.css의 토큰을 따른다. */
.kobis-results{margin-top:28px}
.kobis-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.kobis-row h3{font-size:15px;font-weight:600;line-height:1.4}
.kobis-row small{display:block;font-size:11px;color:var(--muted);margin-top:4px}
.kobis-row b{font-size:12px;color:var(--yellow);white-space:nowrap}
.kobis-row svg{width:18px;flex-shrink:0;color:var(--muted)}
.review-form{display:grid;gap:8px;margin-top:10px}
.review-form label{font-size:11px;color:var(--muted)}
.review-form textarea{width:100%;min-height:64px;resize:vertical;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:10px 12px;font-size:14px;line-height:1.5}
.review-form div{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:var(--muted)}
.review-form button{padding:8px 14px;border-radius:25px;background:var(--yellow);color:var(--bg);font-size:12px;font-weight:600}
.reopen-line{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;font-size:12px;color:var(--muted)}
.reopen-line strong{color:var(--ink);font-weight:600}
.saved-list .my-review{font-size:12px;color:var(--ink);line-height:1.5;margin-top:8px}
.rerelease-status{display:inline-block;font-size:10px;padding:2px 7px;border:1px solid currentColor;border-radius:20px;margin-right:6px}
.rerelease-status.upcoming{color:var(--yellow)}
.reopen-line span{display:flex;align-items:center;gap:6px}
.reopen-line span svg{width:16px;flex-shrink:0}

/* 불러오는 중: 걷는 티켓 캐릭터(ui.js walker). 다리는 엉덩이 관절을 축으로 번갈아 흔들고, 몸통은 걸음마다 들썩인다. */
.loading{padding:56px 20px 52px;text-align:center;color:var(--muted);font-size:13px}
.walker{display:block;width:92px;height:71px;margin:0 auto 18px;overflow:visible}
.walker .w-ticket{fill:var(--yellow);filter:url(#ink)}
.walker .w-eye{fill:var(--bg)}
.walker .w-leg{fill:none;stroke:var(--yellow);stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;transform-box:view-box;animation:w-step .56s ease-in-out infinite}
.walker .w-leg-l{transform-origin:50px 79px}
.walker .w-leg-r{transform-origin:88px 83px;animation-delay:-.28s}
.walker .w-body{transform-box:view-box;transform-origin:70px 84px;animation:w-bob .56s ease-in-out infinite}
.walker .w-eye{transform-box:fill-box;transform-origin:center;animation:w-blink 3.4s ease-in-out infinite}
.walker .w-shadow{fill:var(--yellow);opacity:.24;transform-box:fill-box;transform-origin:center;animation:w-shadow .28s ease-in-out infinite}
@keyframes w-step{0%,100%{transform:rotate(20deg)}50%{transform:rotate(-20deg)}}
@keyframes w-bob{0%,50%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-3.5px) rotate(-2.5deg)}75%{transform:translateY(-3.5px) rotate(2.5deg)}}
@keyframes w-blink{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.12)}}
@keyframes w-shadow{0%,100%{transform:scaleX(1);opacity:.26}50%{transform:scaleX(.8);opacity:.16}}
/* 동작(data-move). 걷기(위)가 기본이고, 나머지는 몸 전체(.w-all)·몸통·다리 관절을 따로 움직인다. 순서는 ui.js MOVES. */
.walker .w-all{transform-box:view-box;transform-origin:70px 98px}
.walker:not([data-move=walk]) .w-leg{animation:none;transition:transform .25s ease}
/* 점프: 웅크렸다 뛰어올라 다리를 접고, 내려앉으며 찌그러진다 */
.walker[data-move=hop] .w-all{animation:w-hop .8s cubic-bezier(.3,.6,.4,1) infinite}
.walker[data-move=hop] .w-leg-l{transform:rotate(38deg)}
.walker[data-move=hop] .w-leg-r{transform:rotate(-38deg)}
.walker[data-move=hop] .w-body{animation:none}
.walker[data-move=hop] .w-shadow{animation:w-hop-shadow .8s cubic-bezier(.3,.6,.4,1) infinite}
@keyframes w-hop{0%,100%{transform:translateY(0) scale(1.08,.9)}30%{transform:translateY(-26px) scale(.95,1.08)}50%{transform:translateY(-32px) rotate(-8deg)}78%{transform:translateY(0) scale(1.1,.88)}88%{transform:translateY(-3px) scale(.98,1.03)}}
@keyframes w-hop-shadow{0%,78%,100%{transform:scaleX(1);opacity:.26}50%{transform:scaleX(.55);opacity:.1}}
/* 피루엣: 한 다리를 접어 올리고 발끝으로 서서 한 바퀴 */
.walker[data-move=pirouette] .w-all{animation:w-spin 1.2s cubic-bezier(.45,0,.3,1) infinite}
.walker[data-move=pirouette] .w-leg-l{transform:rotate(58deg) scale(.75)}
.walker[data-move=pirouette] .w-leg-r{transform:rotate(-4deg) scale(1.35)}
.walker[data-move=pirouette] .w-body{animation:none}
@keyframes w-spin{0%,100%{transform:translateY(-6px) scaleX(1)}25%{transform:translateY(-9px) scaleX(.08)}50%{transform:translateY(-6px) scaleX(-1)}75%{transform:translateY(-9px) scaleX(-.08)}}
/* 아라베스크: 몸을 앞으로 기울이고 뒷다리를 길게 뻗어 떠 있듯 머문다 */
.walker[data-move=arabesque] .w-all{animation:w-float 1.6s ease-in-out infinite}
.walker[data-move=arabesque] .w-body{animation:none;transform:rotate(-8deg)}
.walker[data-move=arabesque] .w-leg-r{transform:rotate(-78deg) scale(1.7)}
.walker[data-move=arabesque] .w-leg-l{transform:rotate(6deg) scale(1.3)}
@keyframes w-float{0%,100%{transform:translateY(-5px) rotate(-10deg)}50%{transform:translateY(-9px) rotate(-6deg)}}
/* 인사: 다리를 모으고 몸통을 숙였다 편다 */
.walker[data-move=bow] .w-body{animation:w-bow 1.2s ease-in-out infinite}
.walker[data-move=bow] .w-leg-l{transform:rotate(-8deg)}
.walker[data-move=bow] .w-leg-r{transform:rotate(8deg)}
@keyframes w-bow{0%,100%{transform:rotate(0)}40%,60%{transform:rotate(28deg) translateY(3px)}}
.loading.compact{padding:28px 20px 24px}
.loading.compact .walker{width:72px;height:56px;margin-bottom:12px}
.loading>span::after{content:'...';display:inline-block;width:0;overflow:hidden;vertical-align:bottom;animation:loader-dots 1.2s steps(4) infinite}
.loading-late{display:block;margin-top:10px;font-size:11px;opacity:0;animation:loader-late .4s 6s forwards}
@keyframes loader-dots{to{width:1.2em}}
@keyframes loader-late{to{opacity:1}}
.skeleton-list{display:grid;gap:14px;margin:4px 0 20px}
.skeleton-list i{display:block;height:46px;border-radius:6px;background:linear-gradient(100deg,var(--panel) 30%,#2c3029 50%,var(--panel) 70%) 0 0/300% 100%;animation:skeleton 1.4s linear infinite}
.skeleton-list i:nth-child(2){width:86%}
.skeleton-list i:nth-child(3){width:68%}
@keyframes skeleton{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){
  .walker *,.loading>span::after,.skeleton-list i,.reveal{animation:none!important}
  .poster img{transition:none}
  .loading>span::after{width:auto}}
.follow-button[disabled]{opacity:.55}

/* 검색 결과는 먼저 온 줄부터 흐릿하게 떠올라 선명해진다(main.js revealed). 포스터도 다 받은 뒤 같은 방식으로 나타난다. */
.reveal{animation:reveal .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--d,0)*60ms)}
@keyframes reveal{from{opacity:0;filter:blur(8px);transform:translateY(8px)}to{opacity:1;filter:blur(0);transform:none}}
.poster img{transition:opacity .5s ease,filter .5s ease}
.poster img[onload]:not(.is-loaded){opacity:0;filter:blur(10px)}