/* === ベース === */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: 'Zen Maru Gothic', sans-serif;
  background: #FFF4E6;
  color: #5C3D2E;
}

/* === カラー変数 === */
:root {
  --orange:     #FF8C42;
  --peach:      #FFB088;
  --cream:      #FFF4E6;
  --terracotta: #E07A5F;
  --brown:      #5C3D2E;
  --muted:      #B8896A;
}

/* === ヘッダー === */
.header-gradient {
  background: linear-gradient(135deg, #FFD4A8 0%, #FFBA82 60%, #FF9F5A 100%);
}

/* === スクリーン切替 === */
.screen {
  display: none;
  min-height: 100dvh;
}
.screen.active {
  display: block;
}

/* === ボタン === */
.btn-primary {
  background: linear-gradient(135deg, #FFCDA0 0%, #FFAA72 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(160, 80, 20, 0.2);
  border: none;
  cursor: pointer;
}
.btn-primary:hover { background: linear-gradient(135deg, #FFBA8A 0%, #FF9A60 100%); }
.btn-primary:active { transform: scale(0.97); }

.btn-secondary {
  background: #fff;
  color: var(--orange);
  border: 2px solid var(--orange);
  cursor: pointer;
}
.btn-secondary:hover { background: #FFF4E6; }
.btn-secondary:active { transform: scale(0.97); }

/* === セクションラベル === */
.section-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.08em;
  display: block;
}

/* === ボトムナビゲーション === */
#bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #FFFAF5;
  border-top: 1px solid #F0D9C8;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 50;
}

.tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 0 12px;
  border: none;
  background: none;
  color: #C4A882;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s;
}
.tab-btn.active { color: var(--orange); }

/* === レコードカード === */
.record-card {
  background: #fff;
  border-radius: 14px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(180, 100, 50, 0.08);
  border: 1px solid #F0D9C8;
}
.record-card .shop {
  flex: 1;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--brown);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.record-card .amount {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--brown);
  white-space: nowrap;
}

/* === バッジ === */
.badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-unsettled { background: #FFF0E0; color: #c47a2e; }
.badge-settled   { background: #E8F5E9; color: #2e7d32; }

/* === 履歴グループヘッダ === */
.history-date-header {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  padding: 4px 2px;
  border-bottom: 1px solid #F0D9C8;
  margin-bottom: 8px;
}

/* === 精算サマリカード === */
.summary-card {
  border-radius: 18px;
  padding: 18px 16px;
  text-align: center;
}
.summary-card .label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.summary-card .value {
  font-size: 1.6rem;
  font-weight: 700;
}

/* === フォーム入力 === */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.input-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.05em;
}
.input-field {
  width: 100%;
  background: #fff;
  border: 1.5px solid #F0D9C8;
  border-radius: 12px;
  padding: 11px 14px;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 1rem;
  color: var(--brown);
  outline: none;
  transition: border-color 0.15s;
  -webkit-appearance: none;
}
.input-field:focus { border-color: var(--orange); }
.input-field::placeholder { color: #D4B5A0; }
textarea.input-field { resize: none; line-height: 1.5; }

/* === 内訳アイテム行 === */
.item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border: 1px solid #F0D9C8;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 0.875rem;
}
.item-row .item-name { color: var(--brown); }
.item-row .item-price { font-weight: 700; color: var(--brown); }

/* === ローディングスピナー === */
.spinner {
  width: 34px;
  height: 34px;
  border: 3px solid #F0D9C8;
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* === 削除ボタン === */
.delete-btn {
  background: none;
  border: none;
  color: #D4B5A0;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.delete-btn:hover {
  color: #C0392B;
  background: #FFF0F0;
}

/* === トースト通知 === */
#toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #5C3D2E;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 200;
  pointer-events: none;
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#toast.error { background: #C0392B; }