:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f4f4;
  --text: #111111;
  --text-dim: #9a9a9a;
  --border: #e6e6e6;
  --danger: #c0392b;
  --accent: #e8730f;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

#app {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-top);
}

#screens {
  flex: 1;
  min-height: 0;
  position: relative;
}

.screen {
  height: 100%;
  overflow-y: auto;
}

.screen[hidden] {
  display: none;
}

/* ---------- Calculator screen ---------- */
.calc-screen {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  gap: 14px;
}

/* 割引後の金額（上部・大きく列で並べる。余った縦のスペースを埋めるように伸びる） */
/* グロッサリー／日配／パンで高さがぶれないよう、段階数に関わらず常に grid で統一する */
.calc-results {
  flex: 1;
  min-height: 0;
  margin-bottom: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 8px;
}

.result-tile {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--surface-2);
  border-radius: 14px;
  padding: 16px 4px;
}

.result-pct {
  font-size: 16px;
  color: var(--text-dim);
  font-weight: 600;
  margin-bottom: 8px;
}

.result-price {
  font-size: 36px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* 強調は文字色だけで表現し、サイズは他の段階とそろえる */
.result-tile--primary .result-pct,
.result-tile--primary .result-price {
  color: var(--accent);
}

/* パン（3段階）は左半分に1段階目を固定、右半分を上下2段に分ける */
.calc-results[data-stage-count="3"] {
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "a b" "a c";
}

.calc-results[data-stage-count="3"] .result-tile:nth-child(1) {
  grid-area: a;
}

.calc-results[data-stage-count="3"] .result-tile:nth-child(2) {
  grid-area: b;
}

.calc-results[data-stage-count="3"] .result-tile:nth-child(3) {
  grid-area: c;
}

/* 定価（テンキーのすぐ上の細いバー） */
.calc-display {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 4px 4px 10px;
  border-bottom: 1px solid var(--border);
}

.calc-display-label {
  font-size: 12px;
  color: var(--text-dim);
}

.calc-input {
  font-size: 40px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

/* テンキー（押しやすいサイズ、横に広いキー） */
.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 72px);
  gap: 8px;
}

.key {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-size: 26px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
  user-select: none;
}

.key:active {
  background: #e9e9e9;
}

/* C・バックスペースは背景を白にし、枠線と記号の色をオレンジにして区別する */
.key-sub {
  background: #ffffff;
  border-color: var(--accent);
  color: var(--accent);
  font-size: 20px;
}

.key-sub:active {
  background: #fdf1e6;
}

/* ---------- Tab bar ---------- */
.tabbar {
  display: flex;
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding-bottom: var(--safe-bottom);
}

.tab {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-dim);
  padding: 8px 4px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-family: inherit;
}

.tab-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-icon svg {
  width: 100%;
  height: 100%;
}

.tab-label {
  font-size: 11px;
}

.tab.active {
  color: var(--text);
}

/* ---------- Settings screen ---------- */
.settings-screen {
  padding: 20px 16px calc(24px + var(--safe-bottom));
}

.settings-title {
  font-size: 22px;
  margin: 4px 0 16px;
}

.settings-note {
  color: var(--text-dim);
  font-size: 12px;
  margin-top: 20px;
}

.settings-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.settings-group h2 {
  font-size: 15px;
  margin: 0 0 12px;
  color: var(--text);
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}

.settings-row:last-child {
  border-bottom: none;
}

.settings-row label {
  font-size: 14px;
  color: var(--text-dim);
  flex-shrink: 0;
}

.settings-row input[type="number"] {
  width: 84px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 16px;
  padding: 6px 8px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.settings-row select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  padding: 6px 8px;
  flex-shrink: 0;
}

.settings-row .unit {
  color: var(--text-dim);
  font-size: 14px;
}