/* shared/base.css — 토큰 · 타이포 · 뒤로가기 · 접근성.
   게임은 이 파일을 불러온 뒤 자기 <style>에서 토큰 값만 덮어쓴다.
   구조를 공유하고 색은 각자 가진다. */

:root {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);

  --paper: #DCDFD9;
  --face:  #F2F3EF;
  --ink:   #1B1F1D;
  --muted: #6E736E;
  --line:  #B4BAB3;
  --mark:  #B3392C;

  /* 눌림은 즉시, 복귀는 여유있게 — 이 비대칭이 손맛을 만든다 */
  --press:  .1s;
  --settle: .45s;
  --ease:   cubic-bezier(.2, .7, .3, 1);
}

:root:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {
    --paper: #151816;
    --face:  #1F2422;
    --ink:   #E7EAE5;
    --muted: #8D938C;
    --line:  #39403B;
    --mark:  #E4574A;
  }
}
:root[data-theme="dark"] {
  --paper: #151816;
  --face:  #1F2422;
  --ink:   #E7EAE5;
  --muted: #8D938C;
  --line:  #39403B;
  --mark:  #E4574A;
}

*, *::before, *::after { box-sizing: inherit; }

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  /* 시스템 폰트만. 웹폰트는 쓰지 않는다 — 애플 기기에서 SF Pro + 애플 SD 산돌고딕Neo */
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               system-ui, "Segoe UI", "Malgun Gothic", sans-serif;
  line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

/* ── 뒤로가기: 모든 게임 좌상단 ── */
.back {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + .75rem);
  left: .9rem;
  z-index: 20;
  padding: .35rem .5rem;
  border-radius: 8px;
  color: var(--muted);
  font-size: .875rem;
  letter-spacing: .012em;   /* 작은 글자는 살짝 벌림 */
  text-decoration: none;
  transform: scale(1);
  transition: transform var(--settle) var(--ease), color var(--settle) var(--ease);
}
.back:hover { color: var(--ink); }
.back:active {
  transform: scale(.96);
  transition-duration: var(--press);
}
.back:focus-visible { outline: 2px solid var(--mark); outline-offset: 1px; }

/* ── 접근성 3종 ── */
@media (prefers-reduced-motion: reduce) {
  .back { transition: color .2s ease; }
  .back:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .back { background: var(--face); }
}
@media (prefers-contrast: more) {
  .back { color: var(--ink); border: 1px solid currentColor; }
}

/* ── 크레딧: 뒤로가기 맞은편. 오락실 캐비닛의 남은 코인 표시 ── */
.credit {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + .75rem);
  right: .9rem;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .5rem;
  font-size: .875rem;
  letter-spacing: .012em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.credit img { display: block; }
.credit b { font-weight: 650; color: var(--ink); letter-spacing: -.01em; }

@media (prefers-reduced-transparency: reduce) {
  .credit { background: var(--face); }
}