/*
 * gl/305 진단 화면 (index.php). 디자인 원본 500px 기준 — 1rem = 10px@500, 뷰포트 폭에 비례해 축소(최대 500px).
 * 모든 치수는 rem (피그마 px ÷ 10). 피그마 좌표는 상태바(60) 아래가 0. 헤더(60)는 배경 위에 겹친다.
 */
html { font-size: calc(min(100vw, 500px) / 50); } /* 공용 game-styles.css의 vw 지정을 덮는다 */
:root {
  --green: #8ec282;
  --ink: #1a1a1a;
  --container-max: 500px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  word-break: keep-all;
}

body {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  background: #2b2a28;
  display: flex;
  justify-content: center;
  touch-action: manipulation;
}

#app {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  height: 100dvh;
  background: #2b2a28;
  color: var(--ink);
}

/* ---------- 헤더 ---------- */
#app-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none; /* 헤더 띠는 통이미지에 포함 — 헤더 자체엔 배경 없음 (2026-09-02 사용자 지시) */
  transition: background-color 0.2s ease;
}
/* 스크롤을 내리면 콘텐츠가 헤더 밑으로 지나간다 — 로고/뒤로가기가 묻히지 않게 어두운 띠 (src/header.js) */
#app-header.is-scrolled { background: rgba(43, 42, 40, 0.92); }
#app-header .hd-logo { width: 11rem; height: auto; }
#app-header .hd-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 5.6rem;
  height: 100%;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#app-header .hd-back img { width: 0.9rem; height: auto; }

/* ---------- 스테이지 / 씬 ---------- */
#stage {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body[data-scene="home"] #stage,
body[data-scene="agree"] #stage { background: var(--green); }
body[data-scene="enter"] #stage { background: #89837f; }
body[data-scene="question"] #stage { background: #fff; }
body[data-scene="loading"] #stage { background: #666460; }

.scene {
  position: relative;
  display: none;
  min-height: 100%;
}
.scene.is-active { display: block; }
.scene-bg {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
}

/* ---------- 공용 버튼 ---------- */
.btn-primary {
  display: block;
  width: 40rem;
  height: 8.4rem;
  margin: 0 auto;
  border: 0;
  border-radius: 1.2rem;
  background: #1f1f1f;
  color: #fff;
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: opacity 0.1s;
}
.btn-primary:active { opacity: 0.7; } /* 피그마: pressed = 투명도 70% */

.disclaimer {
  margin: 1.5rem auto 0;
  font-size: 1.4rem;
  line-height: 2rem;
  letter-spacing: -0.05rem;
  color: rgba(31, 31, 31, 0.6);
  text-align: center;
}

/* ---------- 1) 인트로 ---------- */
.home-body {
  position: absolute;
  top: 68.1rem;
  left: 0;
  right: 0;
  text-align: center;
}
.share-title {
  margin-top: 4rem;
  font-size: 2.2rem;
  line-height: 1.55;
  font-weight: 600;
  letter-spacing: -0.022rem;
}
.share-btns {
  display: flex;
  justify-content: center;
  gap: 1.6rem;
  margin-top: 1.6rem;
  padding-bottom: 4rem;
}
.share-btns button,
.share-btns a {
  display: block;
  width: 6rem;
  height: 6rem;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}
.share-btns img { width: 100%; height: 100%; }
.share-btns :active { opacity: 0.7; }

/* ---------- 2) 서약서 ---------- */
.agree-body {
  position: absolute;
  top: 52rem;
  left: 0;
  right: 0;
  padding: 0 5rem;
  text-align: center;
}
.agree-date {
  font-size: 1.5rem;
  line-height: 2rem;
  color: rgba(31, 31, 31, 0.7);
}
.agree-name {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1.2rem 1rem;
  font-size: 2rem;
  line-height: 2.4rem;
  font-weight: 600;
  color: #1f1f1f;
}
.agree-name-field {
  width: 13rem;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 3rem;
  color: #1f1f1f;
  text-align: left;
  cursor: pointer;
}
/* 모달을 닫고 포커스를 돌려줄 때 링이 남는다 — 서약서 화면에선 테두리를 쓰지 않는다 */
.agree-name-field:focus,
.agree-name-field:focus-visible { outline: none; }
/* 값이 없으면 안내 문구를 대신 보여준다 */
.agree-name-field:empty::before {
  content: attr(data-placeholder);
  color: rgba(31, 31, 31, 0.4);
  font-weight: 400;
}
.stamp {
  position: absolute;
  top: -1.6rem;
  left: 33rem;
  width: 14rem;
  height: auto;
  pointer-events: none;
}
.stamp.is-in { animation: stamp-in 0.42s both; }
@keyframes stamp-in {
  /* 가속하며 내리꽂기 */
  0% { transform: scale(2.6) rotate(-14deg); opacity: 0; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  35% { opacity: 1; }
  55% { transform: scale(0.9) rotate(-1deg); opacity: 1; animation-timing-function: cubic-bezier(0.2, 0, 0.3, 1); }
  /* 눌린 뒤 살짝 되튀고 고정 */
  75% { transform: scale(1.05) rotate(0.5deg); }
  100% { transform: none; opacity: 1; }
}
#scene-agree .btn-primary { margin-top: 1.5rem; }
#scene-agree .disclaimer { padding-bottom: 6rem; }

/* ---------- 이름 입력 모달 (피그마 2856-435) ---------- */
.modal {
  position: absolute;
  inset: 0;
  z-index: 20; /* 헤더(10)보다 위 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2rem;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(0.4rem); /* iOS Safari는 접두사 필요 */
  backdrop-filter: blur(0.4rem);
  animation: fade-in 0.16s ease both;
}
.modal-box {
  width: 40rem;
  max-width: 100%;
  border-radius: 1rem;
  overflow: hidden;
  animation: modal-in 0.18s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
@keyframes modal-in {
  from { transform: scale(0.96); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.modal-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 3rem;
  background: #fff;
}
.modal-title {
  font-size: 2rem;
  line-height: 2.4rem;
  font-weight: 600;
  color: #1f1f1f;
}
.modal-input {
  width: 100%;
  height: 7.5rem;
  padding: 0 1.5rem;
  border: 0.2rem solid rgba(15, 15, 15, 0.1);
  border-radius: 1rem;
  background: #fff;
  font-family: inherit;
  font-size: 2.2rem;
  line-height: 2.5rem;
  font-weight: 500;
  color: #1f1f1f;
  text-align: center;
  outline: none;
}
.modal-input::placeholder { font-weight: 400; color: rgba(31, 31, 31, 0.4); }
.modal-input:focus { border-color: rgba(15, 15, 15, 0.35); }
.modal-confirm {
  display: block;
  width: 100%;
  height: 7rem;
  border: 0;
  border-radius: 0;
  background: #1f1f1f;
  color: #fff;
  font-family: inherit;
  font-size: 2.4rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
}
.modal-confirm:active { opacity: 0.8; }
@media (prefers-reduced-motion: reduce) {
  .modal, .modal-box { animation: none; }
}

/* ---------- 3) 입장 ---------- */
/* 이 씬은 스크롤 없이 한 화면 — 배경이 화면보다 길면 아래가 잘린다 */
#scene-enter {
  cursor: pointer;
  height: 100%;
  overflow: hidden;
}
/* 하단 고정(Next)의 기준선 = 배경 끝과 화면 끝 중 위쪽.
   배경은 500x1065이고 1rem = 폭/50이므로 배경 높이는 항상 106.5rem */
#enter-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: min(100%, 106.5rem);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
/* 노출 순서(피그마): 배경(JS 지연) -> 말풍선(텍스트 포함 한 번에) -> Next */
.enter-bubbles { animation: fade-in 0.3s both; }
.enter-next { animation: fade-in 0.3s 0.45s both; }
.enter-bubbles {
  position: absolute;
  top: 22.8rem;
  left: 2.5rem;
  width: 45rem;
}
.enter-bubbles img { display: block; width: 100%; height: auto; }
/* 이름 길이에 따라 박스가 늘어나면 기준점이 흔들린다 — 폭을 말풍선 내부에 맞춰 고정 */
.bubble {
  position: absolute;
  text-align: center;
  font-size: 2.6rem;
  font-weight: 700;
  color: #1a1a1a;
  white-space: nowrap;
}
.bubble-1 { left: 21.9%; top: 24%; width: 22rem; }
.bubble-2 { left: 42.9%; top: 63.5%; width: 18rem; }
.enter-next {
  position: absolute;
  bottom: 3rem;
  right: 3rem;
  font-size: 2.2rem;
  font-weight: 700;
  color: #fff;
}

/* ---------- 4~12) 문항 ---------- */
/* 헤더·진행바·QUESTION 번호·질문 문구는 전부 스텝별 배경(question/bg-N.webp, 500x940)에 들어 있다.
   코드가 그리는 건 "대상은 —" 라벨과 보기 버튼뿐. 좌표는 피그마 프레임 기준(상태바 60 제외) */
.q-subject {
  position: absolute;
  top: 43rem;
  left: 6.5rem;
  font-size: 2.4rem;
  letter-spacing: -0.05rem;
  color: rgba(31, 31, 31, 0.5);
}
.q-answers {
  position: absolute;
  top: 47.9rem;
  left: 6rem;
  right: 6rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.answer {
  display: flex;
  gap: 0.8rem;
  width: 100%;
  min-height: 8.2rem;
  padding: 2.6rem;
  border: 1px solid #1f1f1f;
  border-radius: 0;
  background: rgba(31, 31, 31, 0.05);
  font-size: 2.2rem;
  line-height: 3rem;
  text-align: left;
  color: #1f1f1f;
  cursor: pointer;
  transition: background-color 0.12s;
}
.answer b { flex: none; width: 3rem; font-weight: 400; }
.answer span { white-space: pre-line; }
.answer.is-picked { background: rgba(111, 163, 124, 0.3); } /* #6FA37C 30% */

/* ---------- 13) 로딩 ---------- */
/* 대기 화면이라 스크롤할 것이 없다 — 한 화면으로 고정하고 넘치는 배경은 자른다 */
#scene-loading { height: 100%; overflow: hidden; }
#loading-frames { position: relative; }
#loading-frames .scene-bg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
#loading-frames .scene-bg:first-child { position: relative; } /* 높이 확보 */
#loading-frames .scene-bg.is-on { opacity: 1; }
/* 피그마 2878:18033 — 상태바 아래부터 335px 높이 띠. 위가 검정 70%, 아래로 갈수록 투명 */
.loading-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 33.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
  padding: 13rem 3rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
  text-align: center;
  color: #fff;
  pointer-events: none;
}
.loading-title {
  font-size: 4rem;
  line-height: 3rem;
  font-weight: 600;
  letter-spacing: -0.05rem;
}
.loading-sub {
  font-size: 2.2rem;
  line-height: 3rem;
  font-weight: 500;
  letter-spacing: -0.05rem;
  color: rgba(255, 255, 255, 0.75);
}

/* ---------- 개발용 ---------- */
#debug-panel {
  position: fixed;
  right: 8px;
  bottom: 8px;
  z-index: 99;
  display: flex;
  gap: 6px;
}
#debug-panel button {
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: #e53935;
  color: #fff;
  font-size: 12px;
}