/*
 * 왔니·이음 소개 화면의 움직이는 화면 설명 전용 CSS (wani-brand.css 에서 분리, 2026-11-04)
 * - 무대(wm-stage)·앱 화면 틀(wm-app)·장면 안 부품(wm-demo__*) 이 모두 여기 있다. 장면 마크업은 scripts/static_src/login/_partials/scene_*.html,
 *   움직임 엔진은 wani-brand-demo.js. 새 장면을 만들 때 필요한 부품은 이 파일에 더한다(장면 파일에 style 속성을 늘어놓지 않는다).
 * - wani-brand.css(토큰·기본 부품)를 먼저 싣는다.
 */

/* ───────── 15. 움직이는 화면 설명 (wani-brand-demo.js) ───────── */
.wm-demo { position: relative; font-size: .95rem; }
.wm-demo-js [data-at], .wm-stage-js [data-at] { opacity: 0; transform: translateY(10px); transition: opacity .35s var(--wm-ease), transform .35s var(--wm-ease), background .3s, box-shadow .3s; }
.wm-demo-js [data-at].is-on, .wm-stage-js [data-at].is-on { opacity: 1; transform: none; }
.wm-demo-js [data-type], .wm-stage-js [data-type] { opacity: 1; transform: none; }   /* 타자 글자는 자리를 먼저 잡아 둔다 */
.wm-demo [data-type]::after { content: ''; display: inline-block; width: 2px; height: 1.1em; background: var(--wm-navy-700); vertical-align: -.15em; margin-left: 2px; animation: wm-caret 1s steps(1) infinite; }
@keyframes wm-caret { 50% { opacity: 0; } }
.wm-hl { background: var(--wm-accent-soft) !important; box-shadow: inset 3px 0 0 var(--wm-accent); }
.wm-demo__bar { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border: 1.5px solid var(--wm-navy-700); border-radius: var(--wm-r-pill); background: #fff; margin-bottom: var(--wm-s2); min-height: 48px; }
.wm-demo__row { display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem; border-radius: var(--wm-r-md); border: 1px solid var(--wm-line); background: #fff; margin-bottom: .5rem; }
.wm-demo__avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--wm-navy-100); color: var(--wm-navy-700); display: grid; place-items: center; font-weight: 700; flex: none; }
.wm-demo__tag { margin-left: auto; font-size: .8rem; font-weight: 700; padding: .15rem .6rem; border-radius: var(--wm-r-pill); background: var(--wm-navy-100); color: var(--wm-navy-700); }
.wm-demo__tag--ok { background: #dff5e6; color: #1c8716; }
.wm-demo__toast { position: absolute; right: 0; bottom: 0; background: var(--wm-navy-900); color: #fff; padding: .7rem 1.1rem; border-radius: var(--wm-r-md); box-shadow: var(--wm-shadow-2); font-weight: 600; }
.wm-demo-ctrl { margin-top: var(--wm-s2); }
.wm-demo-ctrl button { border: 0; background: none; color: var(--wm-ink-3); font: inherit; font-size: var(--wm-fs-small); cursor: pointer; text-decoration: underline; }


/* ───────── 16. 장면이 차례로 바뀌는 무대 (슬랙 첫 화면 같은 모양) ───────── */
.wm-stage { max-width: 800px; margin: 0 auto; }
.wm-stage .wm-shot { border-radius: var(--wm-r-lg); }
.wm-stage__scenes { position: relative; height: 400px; background: var(--wm-bg-soft); }
.wm-scene { position: absolute; inset: 0; padding: var(--wm-s2) var(--wm-s4) 4.6rem;   /* 아래는 말풍선(toast) 자리 */ display: none; flex-direction: column; justify-content: center; }
.wm-scene:first-child { display: flex; }                       /* 스크립트가 없을 때는 첫 장면만 */
.wm-stage-js .wm-scene, .wm-stage-static .wm-scene { display: flex; opacity: 0; visibility: hidden; transition: opacity .45s var(--wm-ease), visibility .45s; }
.wm-stage-js .wm-scene.is-active, .wm-stage-static .wm-scene.is-active { opacity: 1; visibility: visible; }
.wm-scene__head { display: flex; align-items: center; gap: .6rem; margin-bottom: var(--wm-s2); font-weight: 700; color: var(--wm-ink); }
.wm-scene__head small { margin-left: auto; font-weight: 600; color: var(--wm-ink-3); }
.wm-stage__ctrl { display: flex; align-items: center; gap: .7rem; margin-top: var(--wm-s2); color: var(--wm-ink-2); font-size: var(--wm-fs-small); }
.wm-stage__ctrl button { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--wm-navy-700); background: #fff; color: var(--wm-navy-700); cursor: pointer; display: grid; place-items: center; }
.wm-stage__ctrl button::before { content: '❚❚'; font-size: .6rem; letter-spacing: -1px; }
.wm-stage__ctrl button.is-paused::before { content: '▶'; font-size: .75rem; letter-spacing: 0; margin-left: 2px; }
.wm-stage__tabs { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--wm-s3); }
.wm-stage__tab { display: inline-flex; align-items: center; gap: .55rem; padding: .55rem 1rem; border-radius: var(--wm-r-pill); border: 1px solid var(--wm-line); background: var(--wm-bg); color: var(--wm-ink); font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.wm-stage__tab:hover { border-color: var(--wm-navy-700); }
.wm-stage__tab.is-active { background: var(--wm-navy-900); color: #fff; border-color: var(--wm-navy-900); }
.wm-stage__tab:focus-visible, .wm-stage__ctrl button:focus-visible { outline: 3px solid var(--wm-accent); outline-offset: 2px; }
@media (max-width: 640px) { .wm-scene { padding: var(--wm-s2); } .wm-stage__tab { font-size: .95rem; padding: .55rem .95rem; } }

/* 장면 안 작은 부품 */
.wm-demo__count { position: relative; margin-left: auto; min-width: 5.5em; height: 1.4em; text-align: right; font-weight: 800; color: var(--wm-navy-700); }
.wm-demo__count span { position: absolute; right: 0; top: 0; }
.wm-demo__sheet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--wm-line); border: 1px solid var(--wm-line); border-radius: var(--wm-r-sm); overflow: hidden; font-size: .85rem; }
.wm-demo__sheet span { background: #fff; padding: .4rem .6rem; }
.wm-demo__sheet span.h { background: #e7f4ea; font-weight: 700; }
.wm-demo__post { background: #fff; border: 1px solid var(--wm-line); border-radius: var(--wm-r-md); padding: .9rem 1rem; margin-bottom: .6rem; }
.wm-demo__post small { color: var(--wm-ink-3); }
.wm-demo__bubble { display: inline-block; background: var(--wm-navy-100); color: var(--wm-navy-700); border-radius: var(--wm-r-md); padding: .5rem .9rem; font-weight: 600; margin-top: .4rem; }
.wm-scene .wm-demo__toast { right: var(--wm-s3); bottom: var(--wm-s3); }


/* 앱 화면 틀: 왼쪽 메뉴 + 위쪽 머리 + 본문(장면) - 실제 왔니·이음 화면 구성 */
.wm-app { display: grid; grid-template-columns: 148px 1fr; background: #fff; }
.wm-app__side { border-right: 1px solid var(--wm-line); padding: .6rem .5rem; background: #fff; }
.wm-app__nav { list-style: none; margin: 0; padding: 0; font-size: .76rem; }
.wm-app__nav li { display: flex; align-items: center; gap: .45rem; padding: .32rem .5rem; border-radius: 6px; color: var(--wm-ink-2); white-space: nowrap; transition: background .3s, color .3s; }
.wm-app__nav li.wm-app__sec { padding: .55rem .5rem .2rem; font-size: .62rem; font-weight: 700; letter-spacing: .06em; color: var(--wm-ink-3); }
.wm-app__nav li.is-active { background: var(--wm-navy-700); color: #fff; font-weight: 700; }
.wm-app__main { min-width: 0; display: flex; flex-direction: column; }
.wm-app__top { display: flex; align-items: center; gap: .6rem; height: 48px; padding: 0 .9rem; border-bottom: 1px solid var(--wm-line); background: #fff; font-size: .78rem; }
.wm-app__org { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .7rem; border: 1px solid var(--wm-line); border-radius: var(--wm-r-pill); font-weight: 600; }
.wm-app__sp { flex: 1; }
.wm-app__pill { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .8rem; border: 1px solid var(--wm-navy-700); border-radius: var(--wm-r-pill); color: var(--wm-navy-700); font-weight: 600; }
.wm-app__ic { width: 28px; height: 28px; border: 1px solid var(--wm-line); border-radius: 50%; display: grid; place-items: center; color: var(--wm-ink-2); }
@media (max-width: 640px) {
	.wm-app { grid-template-columns: 1fr; }
	.wm-app__side, .wm-app__org, .wm-app__ic { display: none; }
	.wm-stage__scenes { height: 420px; }
}
.wm-shot .wm-app__top img { width: auto; flex: none; }   /* .wm-shot img { width: 100% } 가 머리 로고를 늘리지 않게 */
.wm-app__top > span { white-space: nowrap; flex: none; }
.wm-app__top > .wm-app__sp { flex: 1; }

.wm-demo__sheet--4 { grid-template-columns: repeat(4, 1fr); }
.wm-demo__row > .bi { color: var(--wm-navy-700); font-size: 1.1rem; }

/* QR 출석: 왼쪽 QR 카드 + 오른쪽 사람 카드 격자 */
.wm-demo__qrwrap { display: grid; grid-template-columns: 170px 1fr; gap: var(--wm-s2); align-items: stretch; }
.wm-demo__qr { position: relative; background: #fff; border: 1px solid var(--wm-line); border-radius: var(--wm-r-lg); box-shadow: var(--wm-shadow-1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: var(--wm-s2); text-align: center; overflow: hidden; color: var(--wm-ink); }
.wm-demo__qr small { color: var(--wm-ink-3); font-size: .75rem; word-break: keep-all; }
.wm-demo__scanline { position: absolute; left: 10%; right: 10%; top: 22%; height: 3px; border-radius: 3px; background: var(--wm-accent); box-shadow: 0 0 10px var(--wm-accent); animation: wm-scan 1.4s ease-in-out infinite alternate; }
@keyframes wm-scan { to { transform: translateY(70px); } }
.wm-demo__cards { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.wm-demo__card { position: relative; background: #fff; border: 1px solid var(--wm-line); border-radius: var(--wm-r-lg); box-shadow: var(--wm-shadow-1); padding: .55rem .5rem; display: flex; flex-direction: column; align-items: center; gap: .15rem; text-align: center; overflow: hidden; }
.wm-demo__card small { color: var(--wm-ink-3); }
.wm-demo__avatar--lg { width: 38px; height: 38px; font-size: 1rem; margin-bottom: .1rem; }
.wm-demo__done { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .4rem; background: rgba(223, 245, 230, .94); border: 2px solid #28a745; border-radius: var(--wm-r-lg); color: #1c8716; font-weight: 800; font-size: 1.05rem; }
@media (max-width: 640px) { .wm-demo__qrwrap { grid-template-columns: 1fr; } .wm-demo__qr { flex-direction: row; justify-content: center; } .wm-demo__qr .bi { font-size: 2.4rem !important; } .wm-demo__scanline { display: none; } }

/* 증서·카드 종이 */
.wm-demo__paper { position: relative; background: #fff; border: 1px solid var(--wm-line); border-radius: var(--wm-r-md); box-shadow: var(--wm-shadow-2); padding: 1.1rem 1.4rem; text-align: center; max-width: 440px; margin: 0 auto; width: 100%; }
.wm-demo__paper--cert { border: 3px double var(--wm-navy-700); }
.wm-demo__paper-title { font-size: 1.35rem; font-weight: 800; letter-spacing: .3em; margin-bottom: .5rem; color: var(--wm-navy-900); }
.wm-demo__stamp { position: absolute; right: 1rem; bottom: .6rem; font-size: 2rem; color: #c8202f; }

/* 채팅 */
.wm-demo__msg { display: flex; align-items: flex-end; gap: .6rem; margin-bottom: .7rem; }
.wm-demo__msg--me { justify-content: flex-end; }
.wm-demo__bubble { max-width: 75%; }
.wm-demo__bubble--me { background: var(--wm-navy-700); color: #fff; padding: .55rem .9rem; border-radius: var(--wm-r-md); min-height: 2.2em; }
.wm-demo__bubble--me [data-type]::after { background: #fff; }
.wm-demo__msg .wm-demo__bubble:not(.wm-demo__bubble--me) { margin: 0; margin-top: 0; }

/* 소모임 소개 페이지 */
.wm-demo__page { background: #fff; border: 1px solid var(--wm-line); border-radius: var(--wm-r-lg); box-shadow: var(--wm-shadow-1); padding: .8rem; }
.wm-demo__cover { height: 84px; border-radius: var(--wm-r-md); background: linear-gradient(120deg, var(--wm-navy-100), var(--wm-accent-soft)); display: grid; place-items: center; font-size: 1.8rem; color: var(--wm-navy-700); }
.wm-demo__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.wm-demo__chips span { padding: .15rem .65rem; border-radius: var(--wm-r-pill); background: var(--wm-navy-100); color: var(--wm-navy-700); font-size: .8rem; font-weight: 700; }

/* 결재선 */
.wm-demo__steps { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: .8rem 0; justify-content: center; }
.wm-demo__step { position: relative; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; background: #fff; border: 1px solid var(--wm-line); border-radius: var(--wm-r-pill); font-weight: 700; font-size: .88rem; }
.wm-demo__step em { font-style: normal; color: #28a745; }
.wm-demo__steps > .bi { color: var(--wm-ink-3); }

/* 왔니앱: 휴대폰 화면 틀 안에서 시간표가 돈다 */
.wm-phone { position: relative; width: 300px; max-width: 100%; margin: 0 auto; border: 9px solid #05070d; border-radius: 42px; background: var(--wm-bg-soft); box-shadow: var(--wm-shadow-3); overflow: hidden; color: var(--wm-ink); }
.wm-phone::before { content: ''; position: absolute; top: 8px; left: 50%; width: 84px; height: 20px; margin-left: -42px; border-radius: 12px; background: #05070d; z-index: 3; }
.wm-phone__screen { position: relative; min-height: 540px; padding: 3rem 1.1rem 1.1rem; display: flex; flex-direction: column; }
.wm-phone__call { text-align: center; }
.wm-phone__call small { color: var(--wm-ink-3); }
.wm-phone .wm-demo__avatar--lg { width: 64px; height: 64px; font-size: 1.5rem; margin: .6rem auto .4rem; }
.wm-phone__memo { background: #fff; border: 1px solid var(--wm-line); border-radius: var(--wm-r-md); padding: .5rem .7rem; margin-top: .4rem; text-align: left; font-size: .85rem; }
.wm-phone__memo small { margin-right: .3rem; }
.wm-phone__btns { display: flex; gap: .6rem; margin-top: auto; padding-top: 1rem; }
.wm-phone__btns span { flex: 1; text-align: center; padding: .7rem; border-radius: var(--wm-r-pill); font-weight: 800; background: #e8e9ee; }
.wm-phone__btns span.ok { background: #28a745; color: #fff; }
.wm-phone .wm-demo__toast { left: .8rem; right: .8rem; bottom: 4.6rem; font-size: .85rem; text-align: center; }