/* 시절마디 · 서비스 화면의 마디 한마디 — .sjmg 안에서만 적용된다 */
.sjmg{display:flex;align-items:flex-end;gap:12px;max-width:560px;margin:0 auto 24px;text-align:left}
.sjmg-face{flex:0 0 auto;width:64px;height:78px;overflow:hidden;border-radius:32px 32px 14px 14px;background:#191c31;box-shadow:0 8px 20px rgba(25,28,49,.2)}
.sjmg-face img{display:block;width:100%;height:100%;object-fit:cover;transform-origin:50% 100%}
.sjmg-talk{position:relative;flex:1 1 auto;min-width:0;padding:11px 16px 13px;border:1px solid rgba(23,32,44,.13);border-radius:18px 18px 18px 6px;background:#fff;box-shadow:0 10px 24px rgba(23,32,44,.07)}
.sjmg-name{display:block;margin:0 0 3px;color:#a8455a;font-size:12px;font-weight:800;letter-spacing:.02em}
.sjmg-line{margin:0;color:#17202c;font-size:15px;font-weight:500;line-height:1.62;letter-spacing:-.01em;word-break:keep-all;overflow-wrap:break-word}
.sjmg-line:after{content:"";display:inline-block;width:2px;height:1em;margin-left:3px;vertical-align:-.14em;background:#a8455a;opacity:0}
section[id$="-screen"] > .sjmg{margin-top:4px}

/* 움직임 — 모두 시간으로 끝나며, 끝난 뒤에는 원래 모습 그대로 보인다 */
@keyframes sjmg-rise{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}
@keyframes sjmg-pop{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
@keyframes sjmg-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes sjmg-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px) scale(1.01)}}
.sjmg[data-sjmg-play] .sjmg-face{animation:sjmg-rise .52s cubic-bezier(.2,.7,.3,1) backwards}
.sjmg[data-sjmg-play] .sjmg-talk{animation:sjmg-pop .38s cubic-bezier(.2,.7,.3,1) .12s backwards}
.sjmg[data-sjmg-play] .sjmg-line:after{animation:sjmg-caret 1.1s steps(1) .5s 4}
.sjmg-face img{animation:sjmg-breathe 5.4s ease-in-out infinite}
@media(max-width:420px){.sjmg{gap:10px;margin-bottom:20px}.sjmg-face{width:56px;height:68px}.sjmg-line{font-size:14px}}
@media(prefers-reduced-motion:reduce){.sjmg *,.sjmg *:after{animation:none!important}}