/* =====================================================================
   화면별 배치 — 1080×1920 기준 절대 좌표 (골격. 9/22 시안 확정 후 실측값으로 교체)
   세종 캐릭터 위치표: #app[data-screen] 가 --sj-s(배율)·--sj-y(아랫변 이동)를 정하고 #sejong 이 트윈한다
     아랫변 = 화면 바닥(대기·언어·답변·마무리) 또는 하단 시트 윗변(추천 질문·입력) — 잘린 허리가 떠 보이지 않게
   ===================================================================== */

#app[data-screen="attract"] { --sj-s: 1;    --sj-y: 0px; }     /* 머리 위 670 */
#app[data-screen="lang"]    { --sj-s: .86;  --sj-y: 0px; }     /* 845 */
#app[data-screen="ask"]     { --sj-s: .6;   --sj-y: -840px; }  /* 330 ~ 1080 (시트 1060) */
#app[data-screen="type"]    { --sj-s: .56;  --sj-y: -900px; }  /* 320 ~ 1020 (시트 1000) */
#app[data-screen="answer"]  { --sj-s: .78;  --sj-y: 0px; }     /* 945 */
#app[data-screen="bye"]     { --sj-s: .9;   --sj-y: 0px; }     /* 795 */
#app[data-screen="paused"]  { --sj-s: .9;   --sj-y: 0px; }

/* 추천 질문·직접 입력 진입: 캐릭터가 아래 질문 시트와 한 호흡으로 —
   급출발(expo) 대신 가속-감속으로 함께 떠올라 시트(640ms) 안착 직후 사뿐히 자리 잡는다 (9/30 사장) */
#app[data-screen="ask"] #sejong,
#app[data-screen="type"] #sejong {
  transition: transform 860ms var(--ease-inout), opacity var(--dur-med) var(--ease-soft);
}

/* ── S0 대기(어트랙트) ── */
.page--attract { cursor: inherit; }
.attract__badge {
  position: absolute; left: 0; right: 0; top: 110px; text-align: center;
  font-size: 30px; font-weight: 700; letter-spacing: .12em; color: var(--c-ink-soft);
}
.attract__badge b { color: var(--c-red); }
.attract__title {
  position: absolute; left: 0; right: 0; top: 178px; text-align: center; white-space: nowrap;
  font-family: var(--font-serif); font-size: 100px; line-height: 150px; font-weight: 700; letter-spacing: -.03em;
}
.attract__title span { color: var(--c-blue); }
.attract__sub { position: absolute; left: 0; right: 0; top: 360px; text-align: center; font-size: 40px; line-height: 54px; font-weight: 700; color: var(--c-ink-soft); }
.attract__bubble { left: 130px; right: 130px; top: 450px; text-align: center; font-family: var(--font-ui); font-weight: 700; font-size: 44px; line-height: 60px; padding: 30px 40px; }
.attract__bubble .bubble__en { font-size: 32px; }
.attract__cta {
  position: absolute; left: 220px; right: 220px; bottom: 90px;
  display: flex; align-items: center; justify-content: center; height: 110px; padding: 0 56px; border-radius: var(--r-pill);
  background: var(--c-red); color: var(--c-white); font-size: 38px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 12px 30px rgba(239, 63, 55, .35);
}

/* ── S1 언어 선택 ── */
.lang__title { position: absolute; left: 60px; right: 60px; top: 250px; text-align: center; font-size: 56px; line-height: 72px; font-weight: 700; }
.lang__title small { display: block; margin-top: 10px; font-size: 36px; line-height: 48px; color: var(--c-ink-dim); }
.lang__choices { position: absolute; left: 80px; right: 80px; top: 470px; display: flex; gap: 40px; }
.lang__btn {
  flex: 1; height: 230px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border-radius: 36px; background: var(--c-white); box-shadow: var(--shadow-card); border: 4px solid transparent;
  transition: transform var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.lang__btn:active { transform: scale(.96); border-color: var(--c-blue); }
.lang__btn b { font-size: 64px; line-height: 76px; color: var(--c-blue); }
.lang__btn span { font-size: 30px; color: var(--c-ink-dim); font-weight: 700; }

/* ── S2 추천 질문 ── */
.ask__bubble, .type__bubble { left: 330px; right: 40px; top: 150px; font-size: 36px; line-height: 54px; padding: 28px 36px; --tail-x: 24%; }
.ask__sheet { top: 1060px; padding: 40px 40px 0; }
.ask__title { font-size: 30px; line-height: 44px; font-weight: 700; color: var(--c-ink-dim); letter-spacing: .04em; }
.ask__grid { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 128px; gap: 18px 20px; }
.chip {
  display: flex; align-items: center; gap: 18px; box-sizing: border-box; padding: 0 26px; text-align: left;
  border-radius: 28px; background: var(--c-white); border: 3px solid var(--c-silver-3);
  transition: transform var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.chip:active { transform: scale(.97); border-color: var(--c-blue); }
.chip__no { flex: none; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--c-blue-pale); color: var(--c-blue); font-size: 26px; font-weight: 700; }
.chip__label { flex: 1; font-size: 31px; line-height: 42px; font-weight: 700; word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ask__direct { position: absolute; left: 40px; right: 40px; bottom: 56px; height: 112px; }

/* ── S3 직접 입력 ── */
.back-pill {
  position: absolute; right: 40px; top: 140px; z-index: 4; height: 88px; padding: 0 30px; border-radius: var(--r-pill);
  background: var(--c-white); box-shadow: var(--shadow-card); font-size: 30px; font-weight: 700; color: var(--c-ink-soft);
}
.type__bubble { top: 250px; left: 300px; }
.type__sheet { top: 1000px; padding: 28px 24px 0; }

/* ── S4 답변 ── */
.answer__q {
  position: absolute; right: 50px; top: 150px; max-width: 800px; box-sizing: border-box; padding: 26px 36px;
  border-radius: 32px 32px 8px 32px; background: var(--c-blue); color: var(--c-white);
  font-size: 36px; line-height: 50px; font-weight: 700; word-break: keep-all;
}
.answer__card {
  position: absolute; left: 60px; right: 60px; top: 300px; height: 600px; box-sizing: border-box;
  padding: 44px 52px; border-radius: 40px; background: var(--c-white); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
}
.answer__who { flex: none; font-size: 28px; line-height: 40px; font-weight: 700; color: var(--c-red); letter-spacing: .06em; }
.answer__text { flex: 1; margin-top: 14px; overflow: hidden; font-family: var(--font-serif); font-size: 46px; line-height: 72px; word-break: keep-all; }
.answer__text.is-en { font-size: 42px; line-height: 64px; }
.answer__line { display: block; }
.answer__line + .answer__line { margin-top: 10px; }
.answer__dots { margin-top: 40px; font-size: 80px; line-height: 1; color: var(--c-blue-soft); letter-spacing: 12px; }
/* 버튼 가독성을 위한 옅은 바닥 — 캐릭터가 하얗게 바래지 않도록 60% 까지만 */
.answer__scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 300px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(245, 245, 246, 0), rgba(245, 245, 246, .6) 70%); }
.answer__actions { position: absolute; left: 60px; right: 60px; bottom: 64px; display: flex; gap: 24px; }
.answer__actions .btn { flex: 1; }

/* ── S5 마무리 안내 ── */
.bye__bubble { left: 80px; right: 80px; top: 170px; font-size: 42px; line-height: 66px; }
.bye__board {
  position: absolute; left: 80px; right: 80px; top: 540px; box-sizing: border-box; padding: 34px 40px;
  display: flex; align-items: center; gap: 30px; border-radius: 32px;
  background: var(--c-yellow); color: var(--c-ink); box-shadow: 0 14px 34px rgba(248, 192, 72, .38);
}
.bye__icon { flex: none; width: 96px; height: 96px; }
.bye__text { font-size: 38px; line-height: 54px; font-weight: 700; word-break: keep-all; }
.bye__text small { display: block; margin-top: 6px; font-size: 26px; line-height: 36px; font-weight: 700; opacity: .72; }
.bye__home { position: absolute; left: 280px; right: 280px; bottom: 80px; }
/* 캐릭터(붉은 곤룡포) 위에 얹히므로 흰 알약 바탕을 깔아 읽히게 한다 */
.bye__count { position: absolute; left: 280px; right: 280px; bottom: 224px; height: 62px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill); background: rgba(255, 255, 255, .88); font-size: 28px; color: var(--c-ink-soft); font-weight: 700; }
.bye__count:empty { display: none; }