/* 놀이 고르기와 만들기 판 — 색·[hidden]·판 토큰은 `tokens.css` 가 든다
 *
 * 여기 색을 다시 적지 않는다. 26.08.31 에 화면 하나만 파스텔로 바꿔서 한 앱이 두
 * 디자인이 된 적이 있다. 이 파일에는 **이 두 화면에만 있는 것**만 둔다.
 *
 * 크기는 재설계 문서의 컴포넌트 사전을 따른다 —
 *   모드 카드 112px · 큰 버튼 72px · 버튼 사이 12px · 최소 탭 48px
 * 근거 → 07_프로덕션_통합/게임 네이티브 UI 전면 재설계 ver1.0.md §6
 */

body {
  margin: 0;
  color: var(--ink);
  font: 17px/1.5 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  user-select: none;
}

#app {
  position: relative;
  height: 100dvh;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-left)) env(safe-area-inset-bottom) max(16px, env(safe-area-inset-right));
}

.screen { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ── 머리 ─────────────────────────────────────────────────
   푸는 동안 HUD 를 줄인다. 진행 점과 단계 이름뿐이고 레벨·경험치·연속일은 감춘다 */

.mhud { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.mtitle { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.4px; }

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-left: -12px;
  border-radius: 16px;
  color: var(--ink);
  text-decoration: none;
}
.icon-btn:active { transform: scale(.94); }

.dots { flex: 1; display: flex; gap: 6px; justify-content: center; }
.dots .dot { width: 8px; height: 8px; border-radius: 50%; background: #d8e2ec; }
.dots .dot.done { background: var(--accent-2); }
.dots .dot.now { background: var(--accent-2); transform: scale(1.35); }

.stage-tag { font-size: 13px; font-weight: 700; color: var(--dim); white-space: nowrap; }

/* ── 모드 카드 ────────────────────────────────────────────
   **셋을 같은 무게로 둔다.** 하나를 크게 하거나 도트를 붙이면 그것이 추천이 되고,
   추천은 넛지다. 크기·색·순서가 같다 */

/* 머리는 위에 붙고 카드만 가운데 놓인다. `.list` 에 가운데 정렬을 걸었더니
   「놀기」 제목까지 같이 내려왔다 (26.09.01) */
.modes { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding-bottom: 24px; }

.mode {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 112px;
  padding: 0 18px;
  border: 1px solid var(--paper-edge);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: var(--shadow);
  color: var(--ink);
  text-decoration: none;
  transition: transform 120ms cubic-bezier(.2, .9, .3, 1.4);
}
.mode:active { transform: scale(.98); }

.mode-ico {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
}
.make-ico { background: #f2f7ff; border: 1px solid #d9e6fb; color: #7d94d8; }
.story-ico { background: #fff2f5; border: 1px solid #f6dbe1; color: #d4738b; }

.mode-body { flex: 1; min-width: 0; }
.mode-top { display: flex; align-items: baseline; gap: 8px; }
.mode-top b { font-size: 19px; font-weight: 800; }
.mode-top i { font-style: normal; font-size: 12px; color: var(--dim); }
.mode-sub { display: block; margin-top: 3px; font-size: 14px; color: var(--dim); }
.mode-foot { display: block; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--dim); }

/* ── 만들기 판 ────────────────────────────────────────────
   **시계가 없다.** 이 화면에 시간을 뜻하는 요소를 넣지 않는다 (§4-2) */

.make { gap: 10px; }

.ask {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  border: 1px solid var(--paper-edge);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.ask-label { font-size: 16px; font-weight: 700; color: var(--dim); }
.ask-n { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -1px; }
.ask-least { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--dim); white-space: nowrap; }

/* 판을 가운데 놓는 것은 «바깥 상자»가 한다. 판 자체를 늘리면 만지는 층만 남고
   배경 도형이 따로 놀아서 칸과 그림이 어긋난다 */
.make-boardwrap { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }

.say { margin: 0 2px; min-height: 24px; text-align: center; font-size: 16px; font-weight: 600; color: var(--dim); }

.foot-row { display: flex; align-items: center; gap: 12px; padding: 4px 0 12px; }
.moves { font-size: 15px; font-weight: 800; white-space: nowrap; }

/* 「다 만들었어」 — 이 화면에서 누를 곳은 여기 하나다 */
.big {
  flex: 1;
  min-height: 72px;
  border: 0;
  border-radius: 24px;
  background: var(--go, #6fd0a6);
  color: #10402c;
  font-family: inherit;
  font-size: 21px;
  font-weight: 800;
  box-shadow: 0 6px 0 #4fb98c;
  transition: transform 80ms ease, box-shadow 80ms ease, opacity 160ms ease;
}
.big:active { transform: translateY(4px); box-shadow: 0 2px 0 #4fb98c; }
/* 아직일 때는 «못 누른다»가 아니라 «조용하다». 벌이 아니라 상태다 */
.big[disabled] { opacity: .42; box-shadow: 0 6px 0 #cfd9e2; background: #dfe7ee; color: #7d8b99; }
.big.ready { animation: nudge 1.4s ease-in-out 2; }
@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-5px); }
}

.ghost.wide { flex: 1; min-height: 72px; border-radius: 24px; font-size: 17px; display: flex; align-items: center; justify-content: center; text-decoration: none; }

/* ── 정산 ─────────────────────────────────────────────────
   점수가 아니라 «어떻게 만들었나»다. 별조각은 이미 주머니에 들어갔고 여기서는 안 센다 */

.done-sheet { justify-content: center; text-align: center; gap: 6px; }
.done-sheet .title { margin: 0 0 18px; font-size: 26px; font-weight: 800; letter-spacing: -0.4px; }

.tally {
  padding: 6px 18px 12px;
  border: 1px solid var(--paper-edge);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.trow { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; }
.trow + .trow { border-top: 1px solid #f0e7dc; }
.trow span { flex: 1; text-align: left; font-size: 16px; color: var(--dim); }
.trow b { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.trow i { font-style: normal; font-size: 14px; font-weight: 700; color: var(--dim); }
/* 묶음으로 푼 판 — 이 숫자가 오르는 것이 곧 자릿값을 안다는 뜻이다 */
.trow.keep b { color: var(--open); }
.trow.earn { border-top-width: 2px; }
.trow.earn b { color: #c8912f; }

/* 「그만하기」는 조용하다. 나가는 문에 아무 문구도 안 붙인다 (§2-2) */
.quiet { display: block; margin: 14px auto 0; padding: 12px; min-height: 48px; color: var(--dim); font-size: 14px; text-decoration: none; }

.best { margin: 12px 0 0; min-height: 20px; font-size: 13px; color: var(--dim); }

@media (prefers-reduced-motion: reduce) {
  .big.ready { animation: none; }
  .mode, .big { transition: none; }
}

/* ── 상점 ─────────────────────────────────────────────────
   값이 고정이고 확률이 0곳이라 «흔들리는» 연출이 없다. 반짝이거나 커지는 값표를
   두면 그 자체가 재촉이 된다 (08_아동안전_게임설계 §5-1) */

.chip {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--paper-edge);
  border-radius: 999px;
  background: var(--paper);
  color: #c8912f;
  font-size: 15px;
  font-weight: 800;
}

.shelf { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0 24px; }
.sec { margin: 12px 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .06em; color: var(--dim); }
.note {
  margin: 18px 0 0;
  padding: 13px 15px;
  border-radius: 14px;
  background: #f2f7ff;
  border: 1px solid #d9e6fb;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 600;
}

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.buy {
  padding: 14px;
  border: 1px solid var(--paper-edge);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.buy .swatch {
  display: block;
  width: 46px;
  height: 46px;
  margin-bottom: 10px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 3px 8px rgba(90, 110, 130, .2);
}
.buy b { display: block; font-size: 15px; font-weight: 700; }
.buy-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }

.price { display: flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 800; color: #c8912f; }
/* 모자랄 때는 «흐릴» 뿐이다. 빨갛게 하거나 「못 삽니다」라고 쓰지 않는다 */
.price.short { color: #a8b4be; }

.has { font-size: 13px; font-weight: 700; color: var(--open); white-space: nowrap; }

/* 미리보기 — 고른 색이 별이 이름표에 곧바로 뜬다. 같은 이름표를 모험에서 다시 만난다 */
.preview {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 6px 0 18px;
}
.preview img { height: 150px; width: auto; display: block; filter: drop-shadow(0 10px 14px rgba(90, 110, 130, .24)); }
.preview .who {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  padding: 4px 15px;
  border-radius: 999px;
  background: var(--ribbon);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 3px 8px rgba(120, 110, 130, .3);
}

/* 「사기」는 이 화면의 초록이 아니다 — 판정 초록(--open)과 갈라 둔다 */
.pill {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--go, #6fd0a6);
  color: #10402c;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
}
.pill:active { transform: scale(.96); }
.ghost.small { min-height: 40px; padding: 0 14px; font-size: 13px; font-weight: 700; }

/* ── 내 것 (설정) ─────────────────────────────────────────
   아이가 자기 기록을 보고 끄고 지우는 자리. **문구가 짧고 크다** —
   법률 문장을 줄이는 것이 아니라 처음부터 아이 말로 쓴다 (표준 4) */

.card-plain {
  padding: 16px 18px;
  border: 1px solid var(--paper-edge);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.plain { margin: 0; font-size: 16px; line-height: 1.6; }
.plain + .plain { margin-top: 8px; }
.plain.dim { font-size: 14px; color: var(--dim); }

.switch-row { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.switch-row .plain { flex: 1; font-weight: 600; }

/* 스위치 — 켜짐이 기본이다. 끄는 쪽을 흐리게 그리지 않는다 */
.sw {
  flex: 0 0 auto;
  width: 62px;
  height: 36px;
  padding: 3px;
  border: 0;
  border-radius: 999px;
  background: #d8e2ec;
  transition: background 180ms ease;
}
.sw i {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(90, 110, 130, .3);
  transition: transform 180ms cubic-bezier(.2, .9, .3, 1.4);
}
.sw.on { background: var(--go); }
.sw.on i { transform: translateX(26px); }

/* 지우기 — 붉지 않다. 「위험」으로 칠하면 그것 자체가 되돌리기 유도다 */
.wipe {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--paper-edge);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
}
.wipe.armed { border-color: #f0a868; background: #fdf1e6; color: #a8763f; }
.wipe[disabled] { opacity: .6; }

/* ── 다시 보기 ────────────────────────────────────────────
   모드 둘째. 보기 규격은 만들기·웹툰과 같다 — 한 앱이 두 규격이 되면 안 된다 */

.ask-q { display: block; }
.qtext { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.55; }

.opts { display: grid; gap: 12px; margin: 14px 0 0; }
.opt {
  padding: 16px 14px;
  min-height: 64px;
  border: 1.5px solid var(--paper-edge);
  border-radius: var(--r-md);
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  text-align: left;
  transition: transform 120ms cubic-bezier(.2, .9, .3, 1.4), opacity 160ms ease;
}
.opt:active { transform: scale(.98); }

/* 고른 뒤 나머지는 물러난다. 시선이 답에 남는다 */
.opts.judged .opt { opacity: .45; }
.opts.judged .opt.hit, .opts.judged .opt.miss { opacity: 1; }
/* 빨강을 안 쓴다 — 못 연 것은 「다른 길을 찾았다」다 */
.opt.hit { background: #e8f8f0; border-color: var(--open); }
.opt.miss { background: #fdf1e6; border-color: var(--found); }

@media (prefers-reduced-motion: reduce) {
  .opt { transition: none; }
}

.review-ico { background: #fff8ea; border: 1px solid #f3dcc4; color: #c9963f; }
/* 볼 것이 없는 카드. **감추지 않는다** — 어디에 쌓이는지는 보여야 한다 */
.mode.dim { opacity: .55; }