/* 体重記録アプリ。寸法と色は DESIGN.md 4 章（390×844 基準、スマホ縦のみ）。 */

@font-face {
  font-family: 'Anton';
  src: url('../fonts/Anton-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  --yellow: #FFD400;
  --black: #111111;
  --white: #FFFFFF;
  --sub: #555555;
  --line: #D9D9D9;
  --panel: #F1F1F1;
  --near: #0B5E78;
  --far: #A33A08;
  --tab-off: #C9C9C9;
  --tex: none; /* 起動時に JS がテクスチャ画像を入れる */
  --font: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  --num: 'Anton', 'Arial Narrow', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden; /* ページ自体はスクロールさせない。スクロールは各画面の .body だけ */
}

body {
  background: var(--white);
  color: var(--black);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

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

button { cursor: pointer; touch-action: manipulation; }

:focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 3px;
}

[hidden] { display: none !important; }

/* 画面に固定して、見えている範囲にぴったり合わせる。
   100vh / 100dvh は、アドレスバーやツールバーの分だけ実際より高くなる端末があり、
   下部タブが画面の外に出てしまう。 */
#app {
  position: fixed;
  inset: 0;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---- 画面の枠 ---- */

.view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* スワイプでタブを切り替えたとき、払った向きから入ってくる */
.view.slide-next { animation: slide-next 0.18s ease-out; }
.view.slide-prev { animation: slide-prev 0.18s ease-out; }

@keyframes slide-next {
  from { transform: translateX(32px); opacity: 0; }
}

@keyframes slide-prev {
  from { transform: translateX(-32px); opacity: 0; }
}

.head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  padding: calc(28px + env(safe-area-inset-top)) 20px 12px;
}

.head h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 900;
}

.head-note {
  font-size: 14px;
  font-weight: 700;
  color: var(--sub);
}

button.head-note {
  min-height: 44px;
  margin: -10px -8px -12px 0;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 20px 16px;
}

.body > * { flex-shrink: 0; }

.spacer { flex: 1 0 0; }

h2 {
  margin: 8px 0 0;
  font-size: 18px;
  font-weight: 900;
}

.label {
  font-size: 14px;
  font-weight: 900;
}

.note {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--sub);
}

.text {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--sub);
}

.group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.row {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

/* ---- 下部タブ ---- */

.tabs {
  display: flex;
  gap: 4px;
  background: var(--black);
  padding: 8px 8px calc(14px + env(safe-area-inset-bottom));
}

.tabs a {
  flex: 1;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--tab-off);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  border-radius: 10px;
}

.tabs a[aria-current='page'] { color: var(--yellow); }
.tabs a:focus-visible { outline-color: var(--yellow); outline-offset: -3px; }

/* ---- ボタン ---- */

.btn {
  flex: 1;
  min-height: 56px;
  border: 2px solid var(--black);
  border-radius: 14px;
  background: var(--white);
  color: var(--black);
  font-size: 16px;
  font-weight: 700;
  padding: 0 16px;
}

.btn:active { transform: translateY(1px); }

.btn.primary {
  background: var(--yellow) var(--tex) center / cover no-repeat;
  font-size: 18px;
  font-weight: 900;
}

.btn.wide { flex: 2; }

.btn.danger { color: var(--far); border-color: var(--far); }

.btn:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
}

.round {
  width: 44px;
  height: 44px;
  flex: none;
  border: 2px solid var(--black);
  border-radius: 999px;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.round:disabled { opacity: 0.3; cursor: default; }

.chips {
  display: flex;
  gap: 6px;
}

.chip {
  flex: 1;
  min-height: 44px;
  border: 2px solid var(--black);
  border-radius: 999px;
  background: var(--white);
  color: var(--black);
  font-size: 14px;
  font-weight: 700;
  padding: 0 6px;
}

.chip[aria-pressed='true'] {
  background: var(--black);
  color: var(--white);
}

/* ---- 入力 ---- */

.input {
  min-height: 48px;
  width: 100%;
  border: 2px solid var(--black);
  border-radius: 14px;
  padding: 0 14px;
  font-size: 16px;
  font-weight: 700;
  background: var(--white);
  -webkit-appearance: none;
  appearance: none;
}

.input::placeholder { color: #8A8A8A; font-weight: 500; }

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-size: 14px;
  font-weight: 700;
}

/* ---- 記録 ---- */

.daynav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.daybtn {
  position: relative;
  flex: 1;
  min-height: 44px;
  border: 0;
  background: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.25;
}

.daybtn strong { font-size: 18px; font-weight: 900; }
.daybtn small { font-size: 12px; font-weight: 500; color: var(--sub); }

/* 日付ラベルに重ねた透明な date 入力。タップで OS の日付選択が開く。 */
.daybtn input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.card {
  border: 2px solid var(--black);
  border-radius: 18px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.card-top label { font-size: 16px; font-weight: 900; }
.card-top span { font-size: 13px; font-weight: 500; color: var(--sub); }

.card-num {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.card-num input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 6px;
  padding: 0;
  background: transparent;
  font-family: var(--num);
  font-size: 68px;
  font-weight: 400;
  line-height: 1.1;
}

.card-num input::placeholder { color: var(--line); }
.card-num span { font-size: 20px; font-weight: 900; }

/* ---- 履歴 ---- */

.chart {
  border: 2px solid var(--black);
  border-radius: 18px;
  padding: 12px;
}

.chart canvas {
  display: block;
  width: 100%;
  aspect-ratio: 346 / 170;
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.list li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  border-bottom: 1px solid var(--line);
}

.list .day {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.list .day small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list .val {
  width: 72px;
  text-align: right;
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
}

.list .val.empty { color: var(--line); }

.icon-btn {
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.empty-note {
  margin: 12px 0;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--sub);
}

/* ---- 画像を作る ---- */

/* 390×844 で 1 画面に収めつつ、区切りの間は広く取る。
   プレビューを少し小さくし、「載せる項目」は 1 行にまとめて高さを稼ぐ。
   余った高さは区切りの間に均等に配る。共有と保存のボタンは下に固定する。 */
#view-image .body {
  gap: 20px;
  justify-content: space-between;
  padding-bottom: 16px;
}

#view-image .preview { width: min(184px, 48vw); }
#view-image .schemes { gap: 8px; }
#view-image .scheme { min-height: 44px; }

#view-image .group { gap: 12px; }

#view-image .group.inline {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

#view-image .chips { gap: 8px; }
#view-image .dates { gap: 8px; }
#view-image .dates label:not(:first-child) { margin-left: 6px; }
#view-image .checks { gap: 0 28px; }
#view-image .verdicts { padding: 16px 18px; gap: 12px; }
#view-image .verdict { gap: 4px; }

.actions {
  display: flex;
  gap: 10px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--line);
  background: var(--white);
}

.maker {
  display: flex;
  gap: 14px;
  align-items: stretch;
}

.preview {
  width: min(220px, 56vw);
  aspect-ratio: 4 / 5;
  flex: none;
  border: 2px solid var(--black);
  background: var(--panel);
}

.preview canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.schemes {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scheme {
  flex: 1;
  min-height: 48px;
  border: 2px solid var(--black);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 900;
  padding: 0 8px;
}

.scheme[data-scheme='yellow'] { background: var(--yellow); color: var(--black); }
.scheme[data-scheme='black'] { background: var(--black); color: var(--yellow); }
.scheme[aria-pressed='true'] { box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--black); }

.btn.small {
  flex: none;
  min-height: 44px;
  border-radius: 12px;
  font-size: 14px;
  padding: 0 8px;
}

.dates {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dates label { font-size: 13px; font-weight: 700; flex: none; }

.dates input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  border: 2px solid var(--black);
  border-radius: 12px;
  padding: 0 6px;
  font-size: 16px;
  font-weight: 700;
  background: var(--white);
  -webkit-appearance: none;
  appearance: none;
}

.checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}

.checks label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
}

.checks input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--black);
}

.verdicts {
  background: var(--panel);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.verdicts-row {
  display: flex;
  gap: 12px;
}

.verdict {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.verdict span { font-size: 12px; font-weight: 700; color: var(--sub); }
.verdict strong { font-size: 15px; font-weight: 900; }
.verdict strong[data-kind='near'] { color: var(--near); }
.verdict strong[data-kind='far'] { color: var(--far); }
.verdict strong[data-kind='none'] { color: var(--sub); }

/* ---- 設定 ---- */

.rows {
  display: flex;
  flex-direction: column;
}

.goal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  border-bottom: 1px solid var(--line);
}

.goal-row label { flex: 1; font-size: 16px; font-weight: 700; }

.goal-row input {
  width: 96px;
  min-height: 44px;
  border: 2px solid var(--black);
  border-radius: 12px;
  padding: 0 10px;
  text-align: right;
  font-family: var(--num);
  font-size: 24px;
  font-weight: 400;
  background: var(--white);
}

.goal-row input::placeholder { color: var(--line); }
.goal-row .unit { width: 24px; font-size: 15px; font-weight: 900; }

.info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
}

/* ---- 編集ダイアログ ---- */

dialog {
  width: min(350px, calc(100vw - 40px));
  border: 2px solid var(--black);
  border-radius: 18px;
  padding: 20px;
  color: var(--black);
  background: var(--white);
}

dialog::backdrop { background: rgba(17, 17, 17, 0.55); }

dialog form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

dialog h2 { margin: 0; }

/* ---- トースト ---- */

#toast {
  position: fixed;
  left: 50%;
  top: calc(12px + env(safe-area-inset-top)); /* 下に置くと保存ボタンに重なる */
  transform: translate(-50%, -8px);
  max-width: calc(100vw - 40px);
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--black);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 10;
}

#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  #toast { transition: none; }
  .view.slide-next, .view.slide-prev { animation: none; }
  .btn:active { transform: none; }
}