:root {
  --accent: #7B2E3F;
  --accent-dark: #5E2231;
  --accent-mid: #6C2634;
  --accent-grad: linear-gradient(120deg, #8E3A4C, #6E2838);

  --text-1: #2A2422;
  --text-2: #3A322E;
  --text-3: #5A514B;
  --text-4: #8A7F76;
  --text-5: #9B9188;
  --text-6: #A89E96;
  --text-7: #B3A99F;
  --text-8: #CBBFAE;
  --text-9: #C3B7A8;
  --text-10: #D8CFC4;

  --border-1: #E7DDD0;
  --border-2: #EBE2D5;
  --border-3: #EEE5DA;
  --border-4: #E4D9CB;
  --border-5: #E0D5C6;
  --border-6: #D5C9B9;
  --border-7: #D8CCBD;
  --border-8: #F0E8DD;
  --border-9: #F1E7D6;
  --border-10: #F4EDE3;
  --border-11: #F2EBE1;
  --border-12: #EAE0D4;
  --border-13: #E6DBCC;
  --border-14: #E7DCCC;

  --bg-ivory-1: #FBF7F1;
  --bg-ivory-2: #F6F1EA;
  --bg-ivory-3: #EDE7DE;
  --bg-ivory-4: #F7F0E6;
  --bg-ivory-5: #FAF5EC;
  --bg-page: #ded2c2;

  --gold: #B0956C;
  --gold-dark: #9A7B3E;
  --gold-border: #C9A96A;
  --gold-bg: #FBF6EC;
  --gold-bg-2: #FBF3E6;
  --gold-bg-3: #F6ECE0;
  --gold-bg-4: #FBF0DD;

  --green-text: #4A7A55;
  --green-bg: #E8F0E8;
  --green-bright: #6FD48A;
  --red-text: #B4485A;
  --red-border: #EED6D9;
  --line-green: #06C755;
  --pink-bg: #FBF0F2;

  --font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  color: var(--text-1);
}

button, input, select, textarea { font-family: inherit; }

button { cursor: pointer; }
button:disabled { cursor: default; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border-7); border-radius: 4px; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes overlayIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scanline { 0% { top: 14%; } 50% { top: 80%; } 100% { top: 14%; } }
@keyframes popIn { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes stampPress { 0% { transform: scale(1.9); opacity: 0; } 55% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

.fade-in { animation: fadeIn .25s ease; }
.fade-up { animation: fadeUp .3s ease; }

.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-1);
  color: #fff;
  padding: 13px 24px;
  border-radius: 11px;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .4);
  animation: toastIn .25s ease;
  display: flex;
  align-items: center;
  gap: 9px;
  z-index: 200;
  white-space: nowrap;
}