/* ===== 色と文字の大きさ（ここを変えると全体の雰囲気が変わります） ===== */
:root {
  --color-main: #b0c43d;      /* メインの色（ボタン・見出し） */
  --color-bg: #fdf8f3;        /* 背景の色 */
  --color-card: #ffffff;      /* 白い箱の色 */
  --color-text: #3b2a20;      /* 文字の色 */
  --color-sub: #8a7566;       /* 補足の文字の色 */
  --font-size: 16px;          /* 基本の文字の大きさ */
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: var(--font-size);
  line-height: 1.6;
}

.site-header,
main {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 16px;
}

.site-header {
  padding-top: 24px;
}

h1 {
  margin: 0;
  color: var(--color-main);
  font-size: 1.6em;
}

h2 {
  margin: 0 0 12px;
  font-size: 1.1em;
}

.lead,
.note {
  color: var(--color-sub);
  font-size: 0.85em;
}

.card {
  background: var(--color-card);
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

input {
  width: 100%;
  padding: 8px;
  border: 1px solid #d9cfc6;
  border-radius: 8px;
  font-size: 16px; /* 16px未満だとiPhoneで入力時に画面が拡大される */
}

/* 出来上がり量 */
.yield-row {
  display: flex;
  align-items: end;
  gap: 8px;
}

.yield-row label {
  flex: 1;
  font-size: 0.85em;
}

.arrow {
  padding-bottom: 8px;
  color: var(--color-sub);
}

.ratio {
  margin: 12px 0 0;
}

/* 材料の表 */
.ingredients {
  width: 100%;
  border-collapse: collapse;
}

.ingredients th {
  text-align: left;
  font-size: 0.8em;
  color: var(--color-sub);
  font-weight: normal;
  padding: 4px;
}

.ingredients td {
  padding: 4px;
}

.ingredients td:nth-child(2) {
  width: 26%;
}

.ingredients .result {
  width: 22%;
  font-weight: bold;
  color: var(--color-main);
  white-space: nowrap;
}

.ingredients td:last-child {
  width: 36px;
}

/* ボタン */
.btn {
  padding: 8px 14px;
  border: 1px solid var(--color-main);
  border-radius: 8px;
  background: transparent;
  color: var(--color-main);
  font-size: 0.95em;
  cursor: pointer;
}

.btn-main {
  background: var(--color-main);
  color: #fff;
  white-space: nowrap;
}

.btn-delete {
  border: none;
  background: transparent;
  color: var(--color-sub);
  font-size: 1.2em;
  cursor: pointer;
}

#add-row {
  margin-top: 8px;
}

/* 保存 */
.save-row {
  display: flex;
  gap: 8px;
}

.saved-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}

.saved-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid #eee4da;
}

.saved-list .recipe-name {
  flex: 1;
}