/* Restory 디자인 토큰 — 따뜻한 앰버/크림 + 먼지 청록, 저녁 램프빛 (synopsis §8) */
:root {
  --cream: #f6ecdb;
  --paper: #efe2c9;
  --wood: #8a6748;
  --wood-dark: #6b4e35;
  --ink: #453724;
  --ink-soft: #7a6a52;
  --teal: #5f8a8b;
  --gold: #d4a531;
  --gold-soft: #e9cf8e;
  --danger: #b45a3c;
  --radius: 14px;
  --shadow: 0 3px 10px rgba(69, 55, 36, .18);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(120% 90% at 50% 0%, #fdf6e6 0%, var(--cream) 45%, #e8d7b8 100%);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
}

#app {
  height: 100dvh;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) 8px env(safe-area-inset-bottom);
}

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }

/* FTUE 코치 강조 — mergeHint(금빛, 빠른 펄스)와 구분되는 부드러운 청록 글로우.
   보드 셀·주문 버튼 등 어디에나 붙일 수 있는 범용 유틸리티 (M2c) */
@keyframes coachGlowPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(95, 138, 139, .5); }
  50% { box-shadow: 0 0 12px 3px rgba(95, 138, 139, .55); }
}
.coachGlow { animation: coachGlowPulse 1.6s ease-in-out infinite; }

/* 모달 시트 — energy/shop/inventory 전용 하단 패널 */
.modalVeil.modalSheet {
  align-items: flex-end;
  justify-content: center;
  padding: 12px 12px calc(env(safe-area-inset-bottom) + 12px);
}
.modalVeil.modalSheet .modalCard.modalSheet {
  width: min(100%, 520px);
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(165deg, #fbf2df, var(--paper));
  border: 2px solid var(--gold-soft);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .34);
  padding: calc(16px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
  text-align: center;
}
.modalVeil.modalSheet .modalCloseWrap {
  margin: 0 -6px 8px 0;
  padding-top: 0;
}
.modalVeil.modalSheet .modalClose {
  background: rgba(43, 32, 18, .1);
}
.modalVeil.modalSheet .modalClose:active {
  background: rgba(43, 32, 18, .2);
}
@media (min-width: 720px) {
  .modalVeil.modalSheet {
    padding: 18px;
  }
  .modalVeil.modalSheet .modalCard.modalSheet {
    width: min(420px, calc(100vw - 36px));
    max-height: calc(100dvh - 36px);
    border-radius: 18px;
    border-bottom: 2px solid var(--gold-soft);
    padding: 16px 18px 18px;
  }
}