/* ========================================
   バドミントン会費計算アプリ スタイルシート
   モバイルファースト / タッチ操作最適化

   結果ブロックは、そのまま画像として全体チャットへ投げる前提で作る。
   ======================================== */

:root {
  --teal-dark:  #004D40;
  --teal:       #00695C;
  --teal-light: #26A69A;
  --teal-pale:  #E0F2F1;
  --teal-mid:   #B2DFDB;
  --orange:     #E65100;
  --red:        #C62828;
  --text:       #212121;
  --text-sub:   #5F6368;   /* 白背景で 4.6:1 */
  --bg:         #F1F3F4;
  --card:       #FFFFFF;
  --border:     #E0E0E0;
  --border-str: #8C8C8C;   /* UI部品の枠線 3.3:1 */
  --shadow:     0 2px 8px rgba(0, 0, 0, 0.10);
  --radius:     14px;
  --tap:        48px;      /* 最小タップターゲット */
}

/* ---- Reset ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }

body {
  font-family:
    -apple-system, BlinkMacSystemFont,
    'Hiragino Kaku Gothic ProN', 'Hiragino Sans',
    'Noto Sans JP', 'Yu Gothic UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  padding-bottom: 40px;
  -webkit-font-smoothing: antialiased;
}

/* ---- Header ---- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--teal);
  color: white;
  padding: 12px 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.app-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* 更新が届いたかどうかを見て分かるようにする */
.app-version {
  display: block;
  font-size: 11px;
  opacity: 0.85;
  margin-top: 2px;
}

/* ---- Layout ---- */
.app-main {
  max-width: 480px;
  margin: 0 auto;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 14px;
}

.card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--teal-dark);
}

/* ---- 使い方・改修履歴 ----
   既定は閉じていて、閉じているときは1行だけ。画面を長くしないため。 */
.guide-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  color: var(--teal-dark);
  list-style: none;
  user-select: none;
}

.guide-summary::-webkit-details-marker { display: none; }

.guide-summary::before {
  content: '\25B6';
  font-size: 10px;
  color: var(--text-sub);
}

.guide[open] .guide-summary::before { content: '\25BC'; }

.guide[open] .guide-summary {
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}

.guide-h {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-top: 18px;
  margin-bottom: 4px;
}

.guide-list {
  margin: 4px 0 0 1.4em;
  padding: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text);
}

.guide-list li { margin-bottom: 4px; }

.guide-note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-sub);
  margin-top: 12px;
}

/* ---- 改修履歴の一覧 ---- */
.log-list { list-style: none; margin: 8px 0 0; padding: 0; }

.log-item { border-bottom: 1px solid var(--border); }
.log-item:last-child { border-bottom: none; }

.log-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--tap);
  padding: 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.log-arrow { font-size: 10px; color: var(--text-sub); }
.log-version { font-weight: 700; }
.log-count { margin-left: auto; font-size: 12px; color: var(--text-sub); }

.log-notes {
  margin: 0 0 12px 2.1em;
  padding: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

.log-notes li { margin-bottom: 3px; }

.card-note {
  font-size: 12px;
  color: var(--text-sub);
  margin-top: 2px;
}

.sub-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-sub);
  margin-top: 16px;
  margin-bottom: 6px;
}

/* 保存に失敗したときだけ出す */
.storage-warning {
  background: #FFF3E0;
  border: 1px solid var(--orange);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
  color: #8A3A00;
}

/* ---- 入力 ---- */
.field { margin-top: 12px; }
.field-title { margin-top: 0; }

.field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sub);
  margin-bottom: 4px;
}

.field-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.input-unit {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

input.num,
input.text,
textarea.note {
  font-family: inherit;
  font-size: 16px;         /* iOS で自動ズームさせないため 16px 以上 */
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border-str);
  border-radius: 10px;
  padding: 0 10px;
  min-height: var(--tap);
}

input.num {
  width: 96px;
  text-align: right;
  /* 数字の増減ボタンは指では押しにくく、誤操作のもとになるので消す */
  -moz-appearance: textfield;
}
input.num::-webkit-outer-spin-button,
input.num::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 375px幅の端末で「時間 × 人数 ＋ 人時 ＋ 削除」が1行に収まる幅。
   広げると横スクロールが出る */
.num-short { width: 56px; }
.num-money { width: 120px; }

input.text {
  flex: 1;
  min-width: 0;
  text-align: left;
}

input:focus, textarea:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  border-color: var(--teal);
}

.unit, .times, .equals {
  font-size: 14px;
  color: var(--text-sub);
}
.times { font-size: 16px; padding: 0 2px; }
.equals { font-weight: 600; color: var(--text); margin-left: auto; }

/* ---- 行 ---- */
.row-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.row {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  background: #FAFAFA;
}

.row-main {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.row-other {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.input-unit { flex: none; }

.manhours {
  flex: 1;
  min-width: 0;
  text-align: right;
  font-size: 12px;
  color: var(--text-sub);
  white-space: nowrap;
  overflow: hidden;
}

textarea.note {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 12px 10px;
  line-height: 1.5;
  resize: none;
  overflow: hidden;
}

/* 削除は誤って押されると困るので、色は控えめにして端へ置く。
   ただしタップ領域は 48px を下回らせない（押しにくいボタンは連打され、かえって危ない）。
   絵はゴミ箱。以前の「×」は同じ行の掛け算記号と見分けがつかなかった */
.btn-del {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--border-str);
  border-radius: 8px;
  background: var(--card);
  color: var(--text-sub);
  cursor: pointer;
}

.btn-del .icon { display: block; }

.btn-add {
  width: 100%;
  min-height: var(--tap);
  margin-top: 10px;
  border: 1px dashed var(--border-str);
  border-radius: 10px;
  background: var(--card);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--teal-dark);
  cursor: pointer;
}

.totals {
  margin-top: 10px;
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  color: var(--teal-dark);
}

/* 同じ時間の行が2つあるときだけ出す。勝手にまとめず、選ばせる */
.notice {
  margin-top: 10px;
  padding: 10px 12px;
  background: #FFF8E1;
  border: 1px solid #B26A00;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: #6A3A00;
}

.btn-inline {
  display: inline-block;
  margin-left: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #B26A00;
  border-radius: 8px;
  background: var(--card);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #6A3A00;
  cursor: pointer;
}

/* ---- 結果 ---- */
/* 画像として共有される前提。1画面に収め、金額と名前を近くに置く */
.card-result {
  background: var(--card);
  border: 2px solid var(--teal-mid);
  padding: 16px 14px 14px;
}

.result-empty {
  font-size: 14px;
  color: var(--text-sub);
  text-align: center;
  padding: 12px 0;
}

.result-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--teal-dark);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--teal-pale);
}

.result-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.result-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.result-hours {
  flex: none;
  width: 62px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-sub);
}

.result-amount {
  font-size: 24px;
  font-weight: 700;
  color: var(--teal-dark);
  letter-spacing: -0.5px;
}

.result-people {
  font-size: 13px;
  color: var(--text-sub);
}

/* 名前は金額のすぐ下。離すと画像で見たとき対応が読み取れない */
.result-note {
  margin-top: 2px;
  margin-left: 70px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  word-break: break-word;
}

.breakdown {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bd-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-sub);
}

.bd-line small { font-size: 11px; }

.bd-line span:last-child { text-align: right; }

.bd-sub {
  color: var(--teal-dark);
  font-weight: 600;
}

/* 入れ忘れを 0円 と区別する。0と出すと気づけない */
.bd-missing {
  color: var(--red);
  font-weight: 700;
}

/* 集金額と実費は一致しない。一致しないことを隠さず出す */
.summary {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12px;
  color: var(--text-sub);
}

.summary .surplus {
  font-weight: 700;
  color: var(--teal-dark);
}

/* ---- 操作 ---- */
.actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 画像と文字。どちらも主役なので同じ大きさで横に並べる */
.copy-row {
  display: flex;
  gap: 8px;
}

.copy-row .btn-main {
  flex: 1;
  min-width: 0;
  font-size: 16px;
}

.btn-main {
  width: 100%;
  min-height: 56px;
  border: none;
  border-radius: 12px;
  background: var(--teal);
  color: white;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  box-shadow: var(--shadow);
  cursor: pointer;
}

/* 押す頻度と押しやすさを一致させる。全消しは小さく、控えめに */
.btn-sub {
  width: 100%;
  min-height: var(--tap);
  border: 1px solid var(--border-str);
  border-radius: 10px;
  background: var(--card);
  font-family: inherit;
  font-size: 14px;
  color: var(--text-sub);
  cursor: pointer;
}

.copy-msg {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--teal-dark);
}

.copy-msg.copy-ng { color: var(--red); }

/* 全消しは他の補助ボタンと役割が違うので、少し離して置く */
.btn-reset { margin-top: 14px; }

/* 共有もコピーもできない端末向け。長押しで保存してもらう */
.image-fallback {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}

.fallback-note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-sub);
  margin-bottom: 10px;
}

.image-fallback img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}