/* 펫핑 산책 퀴즈 — Figma 360x720 캔버스를 그대로 옮긴 절대 배치 스타일 */

:root {
  --navy: #201a47;
  --ink: #0e0e0e;
  --white: #fff;
}

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

/* 모바일 360px 기준 페이지라, 넓은 화면에서는 가운데 정렬하고
   양옆은 중립 배경으로 둡니다(화면 색을 따라가면 일러스트와 어긋나 보입니다). */
html { background: #15151f; overflow-x: hidden; }

body {
  min-height: 100%;
  display: flex;
  justify-content: center;
  /* 원본 폰트: Neo둥근모 Pro (Dalgona, SIL OFL 라이선스 — 웹폰트 임베드 가능).
     [TODO] assets/font 에 woff2 를 넣고 @font-face 로 연결하면 원본과 동일해집니다. */
  font-family: 'NeoDunggeunmo Pro', 'Neo둥근모 Pro', 'DungGeunMo',
               'Apple SD Gothic Neo', sans-serif;
  -webkit-font-smoothing: none;
}

.canvas {
  position: relative;
  width: 360px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 0 40px rgba(0, 0, 0, .45);
}

.abs { position: absolute; }

img { image-rendering: pixelated; display: block; }

/* ---------- 텍스트 ---------- */
.center { text-align: center; }
.t11 { font-size: 11px; line-height: 1.7; }
.t18 { font-size: 18px; line-height: 1.45; }
.t20 { font-size: 20px; line-height: 1.4; }
.t22 { font-size: 22px; line-height: 1.5; }
.t24 { font-size: 24px; line-height: 1.35; }
.t28 { font-size: 28px; line-height: 1.2; }
.t30 { font-size: 30px; line-height: 1.35; }

p, h1, .choice span { white-space: pre-line; }

.ink { color: var(--ink); }
.credit { color: #a3a3a3; }

/* ---------- 이름 입력 ---------- */
#nameInput {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 18px;
  text-align: center;
  color: var(--navy);
  outline: none;
}

/* ---------- 버튼 ---------- */
.img-btn {
  border: 0;
  padding: 0 0 3px;
  cursor: pointer;
  background: transparent no-repeat center / 100% 100%;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  color: var(--navy);
}
.img-btn:active { filter: brightness(.93); }
.img-btn.is-off { opacity: .45; cursor: default; }
.img-btn.is-off:active { filter: none; }

.hit { border: 0; background: transparent; cursor: pointer; }
.clickable { cursor: pointer; }

/* ---------- 선택지 ---------- */
.choice {
  border: 0;
  padding: 0 18px;
  cursor: pointer;
  font: inherit;
  font-size: 20px;
  line-height: 1.45;
  color: var(--navy);
  background: url(assets/ui-choice.png) no-repeat center / 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.choice:active, .choice.picked { filter: brightness(.94); }

/* ---------- 팝업 / 힌트 ---------- */
.popup-layer { background: rgba(0, 0, 0, .35); }

.hint-layer {
  background: rgba(0, 0, 0, .55);
  display: flex;
  align-items: center;
}
.hint-video { width: 100%; position: relative; padding-top: 56.25%; }
.hint-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- 결과 ---------- */
.page-img { background-repeat: no-repeat; image-rendering: pixelated; }
.name-line { background: var(--white); }

/* 배너는 원본 이미지 대신 CSS 로 구성 (등급별 문구가 달라서) */
.banner {
  background: #3a2a14;
  border: 4px solid #f5a623;
  box-shadow: 0 0 0 4px #201a47;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.banner .eyebrow { color: var(--white); font-size: 15px; }
.banner .title {
  color: #ffcc00;
  font-size: 30px;
  line-height: 1.35;
  text-align: center;
  white-space: pre-line;
}

/* ---------- 토스트 ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  background: var(--navy);
  color: var(--white);
  font-size: 13px;
  padding: 10px 18px;
  z-index: 20;
}