/* ひとりいくら｜B案（そら）
   参考：outputs/260906 割り勘Webアプリ-企画/参考/98bf5bc4d160d0078ee22f181d1de7c5.jpg
   参考から読み取った作り：
     ・上部に青のグラデーションの面。白い文字を中央に置く
     ・その青に、白い面が大きな角丸で「重なって」始まる
     ・カードは枠線なし。白＋やわらかい影だけで浮かせる
     ・入力欄は下線だけ。小さな薄いラベルを上に添える
     ・ボタンは横長のピル。青の光をまとった影を落とす
     ・文字は細め。余白を大きく取る
   実測色：空色 #41b6fb → #40d4fa／ページ地 #f6f7fb／カード #fff

   参考は淡い空色に白文字（実測1.75〜2.26:1）で読めないため、
   **白文字を乗せる青だけ深く**した（#0f6bb5 → #127cb8。4.56〜5.54:1）。
   淡い空色は、文字を乗せない飾りと、濃紺の文字を乗せる面にだけ使う。 */
:root {
  --font: "Hiragino Sans", "Helvetica Neue", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;

  --bg: #f7fafc;
  --card: #ffffff;
  --field: #ffffff;
  --line: #e9f0f6;
  --fg: #12384f;
  --muted: #54707f;   /* 地に対して5.0:1。3.5:1では読めなかった */

  --sky-1: #41b6fb;      /* 参考から実測。飾りにだけ使う */
  --sky-2: #40d4fa;
  --tint: #eaf6fe;       /* 淡い面。濃紺の文字を乗せる */
  --deep-1: #0f6bb5;     /* 白文字が乗る青（5.54:1） */
  --deep-2: #127cb8;     /* 同（4.56:1） */

  --accent: #0f6bb5;
  --on-accent: #ffffff;
  --accent-soft: #d9edfb;
  --hero-bg: #41b6fb;
  --hero-fg: #06344f;
  --ink-on-sky: #06344f;   /* 淡い空色の上の文字。5.9:1 以上 */

  --ok: #0a7d55;
  --danger: #8c1d18;
  --radius: 18px;
  --shadow: 0 10px 28px rgba(16, 84, 140, .07);
  --glow: 0 10px 22px rgba(15, 107, 181, .28);
}

body { background: var(--bg); }
.app { padding: 0 0 72px; max-width: 480px; }

/* ── 上の青い面と、そこへ重なる白い紙 ───────────────── */
/* 帯は画面の端から端まで。中身は480pxのまま真ん中に置く。
   タブレットやパソコンで、青い柱が真ん中に立っているように見えるのを防ぐ */
header.top {
  display: block; text-align: center;
  margin: 0 calc(50% - 50vw); padding: 34px 24px 56px;
  background: linear-gradient(118deg, var(--sky-1) 0%, var(--sky-2) 100%);
  color: var(--ink-on-sky);
}
header.top > * { max-width: 480px; margin-left: auto; margin-right: auto; }
header.top h1.brand { margin: 0 auto; }
.app-logo { width: 252px; max-width: 78vw; margin: 0 auto; color: #fff; }  /* 支給されたロゴ（白のワードマーク） */
header.top .ver { display: block; margin-top: 8px; font-size: 12px; letter-spacing: .16em; color: var(--ink-on-sky); }

.app > section {
  position: relative; background: var(--bg); margin: 0; padding: 0 20px;
}
.app > section:first-of-type {
  margin-top: -34px; padding-top: 48px; border-radius: 26px 26px 0 0;
}
.app > section { padding-bottom: 26px; }

/* ── 見出し ───────────────────────────────── */
.block-title {
  font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--muted);
  opacity: 1; margin-bottom: 12px; gap: 10px;
}
.block-title .num {
  width: 20px; height: 20px; font-size: 11px; font-weight: 700;
  background: var(--tint); color: var(--deep-1);
}

/* ── ① 金額：下線だけの入力欄 ─────────────────── */
/* 白い枠は入力欄だけ。「×」は枠の外に置く（前川さんの指示 2026-09-06） */
.receipt-row { gap: 4px; margin-bottom: 4px; padding: 0; background: none; box-shadow: none; }
.receipt-field {
  gap: 10px; padding: 6px 18px 2px;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
}
.receipt-row .icon-btn { flex: 0 0 auto; color: var(--muted); }
.receipt-row + .receipt-row { margin-top: 10px; }
.receipt-row .yen { font-size: 20px; color: var(--muted); opacity: 1; }
.receipt-row input {
  height: 62px; font-size: 30px; font-weight: 600; letter-spacing: .01em;
  border: 0; border-radius: 0; background: transparent; padding: 0 2px;
}
.receipt-field .ph { color: #9db4c2; font-size: 20px; right: 18px; }
.receipt-row input:focus { outline: 0; box-shadow: none; }
.receipt-field:focus-within { box-shadow: 0 0 0 2px var(--deep-2), var(--shadow); }
.total-line { margin: 10px 0 0 4px; font-size: 14px; color: var(--muted); }
.text-btn { color: var(--deep-1); font-weight: 600; font-size: 15px; margin-top: 10px; padding-left: 4px; }

/* ── ② 人数 ──────────────────────────────── */
.stepper { gap: 18px; padding: 10px 18px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
.stepper .count { min-width: 2.4em; }
.stepper button {
  width: 52px; height: 52px; border: 0; border-radius: 16px;
  background: var(--tint); color: var(--deep-1); font-size: 18px;
}
.stepper .count { font-size: 30px; font-weight: 600; color: var(--fg); }
.stepper .unit-label { font-size: 14px; color: var(--muted); }

/* ── ③ 結果 ──────────────────────────────── */
/* 参考と同じ淡い空色のグラデーション。白文字は1.75〜2.26:1で読めないため、文字は濃紺にした */
.headline {
  display: block; text-align: center; padding: 26px 22px;
  background: linear-gradient(118deg, var(--sky-1) 0%, var(--sky-2) 100%);
  border-radius: 22px; box-shadow: 0 12px 26px rgba(64, 182, 251, .34); margin-bottom: 18px; min-height: 0;
}
.headline .lead { display: block; font-size: 13px; letter-spacing: .12em; color: var(--ink-on-sky); }
/* 金額は白（前川さんの指示 2026-09-06）。淡い空色に白は約1.9:1で、
   読みやすさの基準（4.5:1）には届かない。届かせるため、数字の後ろだけ少し濃くしている */
.headline .big { display: block; font-size: 46px; font-weight: 700; letter-spacing: .01em; margin-top: 2px; color: #fff; text-shadow: 0 2px 10px rgba(6, 52, 79, .38); }
.headline .note { display: block; margin-top: 6px; font-size: 12px; letter-spacing: .04em; color: var(--ink-on-sky); }
.headline .error { display: block; color: #3d0f0d; font-weight: 600; font-size: 15px; line-height: 1.7; }
.is-idle .headline { opacity: 1; background: linear-gradient(118deg, #cfe9f6, #d5f0f8); box-shadow: none; }

.hint {
  background: var(--tint); border: 0; color: #1b4a63; border-radius: 16px;
  padding: 14px 16px; font-size: 13px; line-height: 1.9; margin-bottom: 16px;
}
.hint-chip { background: #fff; border: 1px solid #cfe4f2; color: var(--deep-1); }

/* カード：枠線をなくし、影だけで浮かせる */
.card {
  border: 0; border-radius: var(--radius); background: var(--card);
  box-shadow: var(--shadow); margin-bottom: 12px; padding: 8px 16px;
}
.card.is-adjusted { box-shadow: 0 0 0 1.5px #bfe0f6, var(--shadow); }
.card.is-open { box-shadow: 0 0 0 1.5px var(--deep-2), 0 14px 30px rgba(16,84,140,.12); }
.card.is-paid { opacity: .72; }
.card-main { min-height: 56px; gap: 10px; }
.card .name { font-size: 16px; border-bottom: 1px solid var(--line); color: var(--fg); min-width: 4.5em; }
.card .amount { font-size: 21px; font-weight: 600; color: var(--fg); min-width: 4.2em; }
.card.is-adjusted .amount { color: var(--deep-1); }
.absorb { font-size: 13px; line-height: 1.8; color: #4d6b7a; opacity: 1; padding: 2px 0 8px 4px; }
.payer-mark { color: var(--deep-2); }
.paid-btn { color: #a8bfcd; }
.paid-btn[aria-pressed="true"] { color: var(--ok); }

/* ピル：選んでいないものは白、選んだものは青の光をまとう */
.chip, .label-btn {
  border-radius: 999px; border: 1px solid var(--line); background: #fff;
  color: var(--fg); font-weight: 500; box-shadow: 0 2px 6px rgba(16,84,140,.05);
}
.label-btn { height: 44px; font-size: 14px; padding: 0 10px 0 14px; }
.label-btn .ico { opacity: .5; }
.chip { height: 42px; font-size: 15px; }
.chip.is-on, .is-adjusted .label-btn {
  background: linear-gradient(118deg, var(--deep-1), var(--deep-2));
  color: #fff; border-color: transparent; box-shadow: var(--glow);
}
.is-adjusted .label-btn .ico { opacity: .85; }
.chips { border-top: 1px solid var(--line); padding: 12px 2px 10px; gap: 10px; }
.chip-remove { border-style: solid; color: var(--muted); box-shadow: none; }
.card .fixed { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; font-weight: 600; }

.units-wrap { margin-top: 22px; }
#units .chip { height: 44px; }
.summary { font-size: 14px; line-height: 1.9; color: var(--muted); margin-top: 14px; }
.collect { font-size: 16px; color: var(--fg); margin-top: 8px; }
.collect b { color: var(--deep-1); }
.collect .done { color: var(--ok); }

.actions { gap: 12px; margin-top: 24px; }
.actions button {
  height: 56px; border: 0; border-radius: 999px; font-weight: 600; font-size: 16px;
  background: linear-gradient(118deg, var(--deep-1), var(--deep-2)); color: #fff; box-shadow: var(--glow);
}
.actions #reset { background: #fff; color: var(--deep-1); box-shadow: var(--shadow); }
.toast { background: #12384f; color: #fff; }
footer.foot { font-size: 12px; line-height: 1.9; color: #54707f; opacity: 1; margin: 28px 20px 0; padding: 0; }

/* 320px幅の端末で、名前・金額・ボタンが収まるようにする */
@media (max-width: 360px) {
  .app > section { padding: 0 12px 24px; }
  .card { padding: 8px 10px; }
  .card-main { gap: 4px; }
  .label-btn { padding: 0 6px 0 10px; font-size: 13px; }
  .card .amount { font-size: 19px; min-width: 4em; }
  .slot, .paid-btn { width: 34px; }
  .receipt-row { padding: 6px 12px 2px; }
  .headline .big { font-size: 38px; }
  footer.foot { margin: 28px 12px 0; }
}

/* 音の入り切り */
header.top { position: relative; }
.sound-toggle {
  position: absolute; top: 18px; right: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.42); color: var(--ink-on-sky);
}
.sound-toggle .ico { width: 19px; height: 19px; }
.sound-toggle[aria-pressed="false"] { background: rgba(255,255,255,.28); opacity: .8; }

/* フッターと応援欄 */
/* margin を左右20pxで書くと、base.css の margin:0 auto を打ち消して左に寄る（2026-09-06に実際にやった）。
   幅の広い画面でも中央に置くため、左右は auto にして、端の余白は padding で作る */
.support { background: var(--card); border-left: 0; box-shadow: var(--shadow); border-radius: var(--radius); margin: 0 auto 20px; padding: 20px; }
/* 狭い画面では端に接しないよう左右に余白。base.css の同じ指定は、
   あとから読むこのファイルに打ち消されるため、ここにも書く */
@media (max-width: 519px) { .support { margin-left: 20px; margin-right: 20px; } }
.support__lead, .support__note { color: #3d5c6c; }
.support__lead b { color: var(--fg); }
.support__btn { background: linear-gradient(118deg, var(--deep-1), var(--deep-2)); box-shadow: var(--glow); }
.support__btn--sub { background: #fff; color: var(--deep-1); border: 1.5px solid #cfe3f2; box-shadow: var(--shadow); }
/* フッターは、上の帯と同じ空色で対にする（2026-09-06 前川さんの指摘で濃紺から変更）。
   淡い空色に白は読めないので、文字は上と同じ濃紺（5.8:1以上）にそろえる */
.sitefoot {
  background: linear-gradient(118deg, var(--sky-1) 0%, var(--sky-2) 100%);
  color: var(--ink-on-sky); border-radius: 26px 26px 0 0; padding: 32px 20px 40px;
}
.sitefoot > * { max-width: 480px; margin-left: auto; margin-right: auto; }
.sitefoot a { color: var(--ink-on-sky); }
.sitefoot__brand { color: var(--ink-on-sky); }
.sitefoot__brand a { color: var(--ink-on-sky); }
.sitefoot__version a { color: var(--ink-on-sky); }   /* 薄めると4.33:1に落ちるので、そのままの濃さで使う */
.btn-install {
  color: var(--ink-on-sky); border-color: rgba(6, 52, 79, .45);
  background: rgba(255, 255, 255, .45);
}

/* 支払い設定の行 */
.card-setting { padding: 0 0 8px 2px; }
.chips-title { color: var(--muted); font-weight: 600; }
.label-btn { max-width: 100%; }
.label-btn .lb-text { overflow: hidden; text-overflow: ellipsis; }

/* 2行目：支払い設定と支払確認 */
.card-setting .paid-btn { border: 1px solid var(--line); background: #fff; color: var(--muted); box-shadow: 0 2px 6px rgba(16,84,140,.05); }
.card-setting .paid-btn[aria-pressed="true"] { border-color: #bfe3d3; background: #eefaf4; color: var(--ok); }
.card-setting .paid-btn .ico { width: 18px; height: 18px; }