:root {
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --surface-alt: #F8F9FB;
  --border: #E5E7EC;
  --border-strong: #CDD2DA;
  --ink: #0F1420;
  --ink-soft: #3B4254;
  --ink-mute: #6B7388;
  --ink-faint: #9AA1B2;
  --blue: #2D6CDF;
  --blue-dark: #1F4FB0;
  --blue-soft: #E8F0FE;
  --blue-tint: #F4F8FF;
  --green: #1F9D55;
  --green-soft: #E4F5EB;
  --amber: #C77700;
  --amber-soft: #FFF4DD;
  --red: #D03B3B;
  --red-soft: #FCE7E7;
  --violet: #6B47C9;
  --violet-soft: #EFEAFC;
  --pending-soft: #EEF0F4;
  --font-sans: "Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",Roboto,sans-serif;
  --font-mono: "JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #11151F; color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; font-size: 15px; letter-spacing: -0.01em; }
#root { min-height: 100vh; }
.frame {
  max-width: 420px;
  margin: 0 auto;
  height: 100vh;              /* 폴백 */
  height: 100dvh;             /* iOS Safari의 동적 뷰포트 (주소창 빼고) */
  background: var(--bg);
  position: relative;
  overflow: hidden;           /* 프레임 자체는 스크롤 안 함 */
  display: flex;
  flex-direction: column;
}

/* 탭이 있는 화면(home/history/me)의 스크롤 영역 */
.scroll-area {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}
button { font-family: var(--font-sans); }
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; border: none; cursor: pointer; font-weight: 700; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 4px 14px rgba(45,108,223,0.32); }
.btn-ghost { background: #fff; border: 1px solid var(--border); color: var(--ink); }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; height: 22px; }
.pill-green { background: var(--green-soft); color: var(--green); }
.pill-blue  { background: var(--blue-soft); color: var(--blue-dark); }
.pill-amber { background: var(--amber-soft); color: var(--amber); }
.pill-red   { background: var(--red-soft); color: var(--red); }
.pill-neutral { background: var(--pending-soft); color: var(--ink-soft); }
@keyframes scanline { 0%,100% { top: 12px; } 50% { top: calc(100% - 14px); } }
@keyframes pulse { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.9s linear infinite; }
.qr-box { position: relative; width: 260px; height: 260px; border-radius: 24px; overflow: hidden; background: linear-gradient(135deg, #1a2334, #0f1420); }
#qr-reader { width: 100% !important; }
#qr-reader video { border-radius: 18px; }