/* 시안 3종 공통 — 스크롤 등장·라이트박스·토스트·파티클·접힘 */
*{box-sizing:border-box}
body{margin:0;word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer}
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.lb{position:fixed;inset:0;z-index:50;background:rgba(30,20,20,.84);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.lb.open{opacity:1;pointer-events:auto}
.lb img{max-width:92vw;max-height:84vh;border-radius:12px;transform:scale(.82);transition:transform .38s cubic-bezier(.2,.8,.2,1);box-shadow:0 20px 50px rgba(0,0,0,.4)}
.lb.open img{transform:scale(1)}
.lb::after{content:"탭하면 닫혀요";position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#fff;font-size:13px;opacity:.8}
.toast{position:fixed;left:50%;bottom:30px;z-index:60;transform:translate(-50%,20px);background:rgba(55,38,38,.9);color:#fff;padding:11px 20px;border-radius:999px;font-size:14px;opacity:0;transition:.3s;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}
.particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.particles>*{position:absolute;bottom:-70px;animation:rise linear infinite}
@keyframes rise{0%{transform:translate(0,0) rotate(-4deg)}50%{transform:translate(16px,-55vh) rotate(6deg)}100%{transform:translate(-10px,-118vh) rotate(-4deg)}}
.balloon{width:26px;height:32px;border-radius:50% 50% 47% 47%;opacity:.8;box-shadow:inset -5px -6px 0 rgba(0,0,0,.06),inset 5px 5px 0 rgba(255,255,255,.45)}
.balloon::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:30px;background:rgba(150,110,100,.45)}
.particles>.petal{top:-30px;bottom:auto;width:13px;height:16px;border-radius:13px 0 13px 0;opacity:.85;animation-name:fall}
@keyframes fall{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(50px,115vh) rotate(560deg)}}
.particles>.emo{opacity:.85}
.fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
.fold.open{grid-template-rows:1fr}
.fold>div{overflow:hidden}
[data-toggle] .chev{display:inline-block;transition:transform .3s}
[data-toggle].on .chev{transform:rotate(180deg)}
.gb-item.new{animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{0%{opacity:0;transform:scale(.7)}100%{opacity:1}}
.demo-note{font-size:12px;opacity:.65;margin-top:8px}
.ico{width:18px;height:18px;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.playtag{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;font:600 12px/1 "Malgun Gothic",sans-serif;backdrop-filter:blur(6px)}
.playtag i{width:7px;height:7px;border-radius:50%;background:#ff5a6a;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.25}}

/* 키보드 포커스 표시 — 템플릿의 all:unset 버튼도 보이게(DS 검토 R1) */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #2f6fd6!important;outline-offset:2px!important}
.lb:focus{outline:none}