/* 첫 화면 오른쪽 무대 (assets/js/vision-stage.js) — SEE 누리집 첫 화면과 같은 구성: 파스텔 하늘 판 + 아래 작은 로그인 안내 */

/* 판 전체. 친구들 영상이 판을 채우고, 비전 영상 때는 영상 배경(종이색)으로 바뀐다 */
.lv { --cap-h: 126px; position: relative; overflow: hidden; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: linear-gradient(180deg, #d6e9f2 0%, #c8e0ee 55%, #b9d5e8 100%); transition: background .6s; }
.lv.mode-video { background: #ebe9e3; }
.lv-media { position: absolute; inset: 0; }

/* 선생님 친구들 */
.lv-scene { position: absolute; inset: 0; cursor: pointer; transition: opacity .5s; -webkit-tap-highlight-color: transparent; }
.lv.mode-video .lv-scene { opacity: 0; pointer-events: none; }
.lv-loop { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.lv-say { position: absolute; left: 6%; top: 37%; max-width: 62%; padding: 6px 12px; font-size: 13px; white-space: nowrap; animation-delay: 1s; }
.lv-say.swap { animation-delay: 0s; animation-name: lv-say-swap; }
/* 4번째 친구(여우) 말풍선 */
.lv-thanks { left: auto; right: 6%; top: 35%; max-width: 186px; white-space: normal; line-height: 1.35; background: #fff7ee; border-color: #f7cd9c; animation-delay: 1.5s; }
@keyframes lv-say-swap { 0% { opacity: 0; transform: translateY(6px) scale(.7); } 100% { opacity: 1; transform: none; } }
html:not(.lm-loop) .lv-say { animation: none; }

/* 비전 영상: 로그인 안내 위쪽 자리에서 */
.vv { position: absolute; inset: 0 0 var(--cap-h); display: grid; place-items: center; animation: vv-in .6s ease both; }
.vv[hidden] { display: none; }
@keyframes vv-in { from { opacity: 0; } to { opacity: 1; } }
.vv video { display: block; width: 100%; height: 100%; object-fit: contain; cursor: pointer; }
.vv-bar { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(15, 42, 95, .15); }
.vv-bar i { display: block; width: 0; height: 100%; background: var(--navy); transition: width .25s linear; }
.vv-ctrl { position: absolute; right: 12px; top: 12px; display: flex; gap: 6px; }
.vv-ctrl button, .vv-replay { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 0; border-radius: 999px; background: rgba(15, 42, 95, .72); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.vv-ctrl button:hover, .vv-ctrl button:focus-visible, .vv-replay:hover, .vv-replay:focus-visible { background: var(--navy); }
.vv-ctrl svg, .vv-replay svg { flex: none; width: 16px; height: 16px; }
.vv-replay { position: absolute; right: 12px; top: 12px; z-index: 2; }
.vv-replay[hidden] { display: none; }
.vv-paused { position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; text-align: center; background: rgba(15, 42, 95, .62); color: #fff; animation: vv-in .25s ease both; }
.vv-paused[hidden] { display: none; }
.vv-paused p { margin: 0; font-size: 17px; font-weight: 800; }
.vv-choice { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.vv-choice .btn svg { width: 15px; height: 15px; }
.vv-choice .btn-line { background: #fff; color: var(--navy); }
.vv.is-paused .vv-ctrl { display: none; }
/* 소리 없이 시작된 경우 「소리 켜기」를 빨갛게 반짝 */
.vv-ctrl button.need { background: #e03131; animation: vv-need 1.2s ease-in-out infinite; }
@keyframes vv-need { 0%, 100% { box-shadow: 0 0 0 0 rgba(224, 49, 49, .5); } 60% { box-shadow: 0 0 0 8px rgba(224, 49, 49, 0); } }
/* 전체화면: 영상 배경색 그대로, 단추는 조금 크게 */
.vv:fullscreen { background: #ebe9e3; inset: 0; }
.vv:-webkit-full-screen { background: #ebe9e3; inset: 0; }
.vv:fullscreen .vv-ctrl { top: 20px; right: 20px; }
.vv:fullscreen .vv-ctrl button { padding: 10px 16px; font-size: 15px; }
.vv:fullscreen .vv-bar { left: 24px; right: 24px; bottom: 14px; height: 4px; }

/* 로그인 안내: SEE의 「AI 상담」 칸과 같은 자리·크기 */
.lv-cap { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, .95); box-shadow: 0 6px 22px rgba(15, 42, 95, .1); }
.lv-cap-t { flex: 1 1 0; min-width: 0; }
.lv-cap-t > b { display: block; color: var(--navy); font-size: 16px; line-height: 1.35; letter-spacing: -0.02em; }
.lv-cap-t > span { display: block; margin-top: 1px; color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.lc-help { flex: 1 1 100%; margin-top: 1px; color: var(--ink-3); font-size: 11.5px; line-height: 1.35; }
.lc-help b { color: var(--ink-2); font-weight: 800; }
.lc-help span { white-space: nowrap; }
.lv-cap .gbtn-box { flex: none; min-height: 40px; display: flex; align-items: center; justify-content: center; }
.lv-cap .inapp { flex: 1 1 100%; margin-top: 6px; }
/* 메뉴·질문을 누르면 로그인 안내로 눈길을 보낸다 */
.lv-cap.attn { animation: lv-attn 1.1s ease-in-out 2 !important; }
@keyframes lv-attn { 0%, 100% { box-shadow: 0 6px 22px rgba(15, 42, 95, .1); } 45% { box-shadow: 0 0 0 4px rgba(36, 121, 247, .55), 0 8px 26px rgba(36, 121, 247, .28); } }

/* 아래 빠른 메뉴: SEE와 같은 칸 */
.lq-wrap { margin-bottom: 40px; }
.lq { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: -30px; }
.lq button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 18px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--navy); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.lq button:hover, .lq button:focus-visible { border-color: var(--navy); }
.lq .ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--bg, var(--blue-soft)); color: var(--fg, var(--blue)); }
.lq .ico .ic { width: 26px; height: 26px; }
.lq-side { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; }
.lq-side button { flex-direction: row; gap: 10px; padding: 8px 6px; font-size: 14.5px; }
.lq-side .ico { width: 34px; height: 34px; }
.lq-side .ico .ic { width: 18px; height: 18px; }
.lq-side .green { border-color: #cfe5b4; background: #f2f9e6; }
.lq-side .green:hover, .lq-side .green:focus-visible { border-color: #4c8a2b; }
/* 담당자와 소통 창: 안내하는 선생님 + 연락처 */
.lq-guide { display: flex; align-items: center; gap: 18px; }
.lq-guide .msc-card { flex: none; width: 150px; gap: 8px; }
.lq-guide .msc-bubble { max-width: 150px; padding: 7px 10px; font-size: 13px; }
.lq-contact { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 15px; color: var(--ink-2); }
.lq-contact b { display: block; color: var(--navy); }
.lq-contact span { white-space: nowrap; }

/* 태블릿·휴대폰: 제목 → 영상·로그인 안내 → 설명·질문칸 차례(로그인 단추가 위쪽에 오게) */
@media (max-width: 1024px) {
  .hero .wrap, .lq-wrap { max-width: 720px; }
  .hero .wrap { gap: 14px; padding-top: 22px; }
  .hero-copy { display: contents; }
  .hero .vmw { order: 1; }
  .hero h1 { order: 2; }
  .lv { order: 3; }
  .hero .lead { order: 4; }
  .hero .ask-form { order: 5; }
  .ask-chips { order: 6; margin-top: 0; }
  .dev-login { order: 7; }
  .lq { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: -26px; }
}
@media (max-width: 760px) {
  .lv { display: flex; flex-direction: column; aspect-ratio: auto; overflow: hidden; }
  .lv-media { position: relative; inset: auto; aspect-ratio: 16 / 10; }
  .lv-loop { object-position: 50% 8%; }
  .vv { inset: 0; }
  .lv-say { top: 33%; font-size: 12px; padding: 5px 10px; }
  /* 좁은 화면: 로그인 안내가 바로 아래 있으니 첫 친구 말풍선은 줄이고, 글자를 가리지 않게 단추는 그림만 */
  .lv-say:not(.lv-thanks) { display: none; }
  .lv-thanks { top: 31%; right: 3%; max-width: 150px; font-size: 11px; padding: 4px 8px; }
  .vv-ctrl button, .vv-replay { padding: 7px; }
  .vv-ctrl button span { display: none; }
  .vv-ctrl button.need span { display: inline; }
  .vv-replay span { display: none; }
  .lv-cap { position: relative; left: auto; right: auto; bottom: auto; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px 16px; border-radius: 0; background: #fff; box-shadow: none; }
  .lv-cap-t { flex: none; }
  .lq-side button { padding: 6px 4px; font-size: 13px; letter-spacing: -0.03em; }
  .lq-side .ico { display: none; }
  .lq-guide { flex-direction: column; gap: 14px; }
  .lq-guide .msc-card { width: auto; }
  .lq-guide .msc-bubble { max-width: 240px; }
}
@media print { .lv-media { display: none; } }