:root {
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

/* フォーム UI 側も body の font-family/font-weight を明示的に継承する:
   button/input/select/textarea はブラウザの既定UAスタイルシートでは body の
   font-family/font-weight を継承しない（実機検証で確認済み: Chromeの既定では
   button/input は "Arial"、textarea は "monospace" になる）。明示的に inherit
   させることで、注文番号・メールアドレス欄や各ボタンも画面表示の他の文字と
   同じフォントで統一する。 */
button,
input,
select,
textarea {
  font-family: inherit;
  font-weight: inherit;
}

body {
  margin: 0;
  /* フォントスタック（確定仕様 2026-07-23 第7弾: PDF埋め込みフォントを
     IBM Plex Sans JP に切り替えたが、画面表示（フォームUI）はカスタムWebフォント
     を採用せず、システムフォントスタックのままにする。自前配信のWebフォント
     取得・@font-face 定義は不要）。OS標準の日本語ゴシック体を優先し、
     見つからない場合は sans-serif にフォールバックする。 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 400;
  background: #f4f5f7;
  color: #1a1a1a;
}

.app {
  max-width: 480px;
  margin: 0 auto;
  padding: 48px 20px 80px;
}

.app__title {
  font-size: 22px;
  margin: 0 0 8px;
}

.app__lead {
  font-size: 14px;
  color: #555;
  margin: 0 0 24px;
}

.card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  /* 余白圧縮（確定仕様 2026-07-23・実機フィードバック「余白が広すぎる」対応。
     PDF/印刷CSSの余白圧縮に合わせ、画面表示のカード内余白も軽く詰める）。 */
  padding: 20px;
  margin-bottom: 16px;
}

.field {
  display: block;
  margin-bottom: 16px;
}

.field__label {
  display: block;
  font-size: 13px;
  color: #333;
  margin-bottom: 6px;
}

.field input {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.field input:focus {
  outline: 2px solid #2a6df4;
  outline-offset: 1px;
}

/* 注文番号入力欄（確定仕様 2026-07-23）: 「#」を装飾として入力欄の外側左に
   固定表示する input group。「#」自体は入力値に含まれない（数字のみを
   input#order-number の value として扱う。app.js 側で数字以外を入力段階で
   除去する）。 */
.input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.input-group:focus-within {
  outline: 2px solid #2a6df4;
  outline-offset: 1px;
}

.input-group__prefix {
  display: flex;
  align-items: center;
  padding: 10px 0 10px 12px;
  font-size: 15px;
  font-weight: 500;
  color: #555;
  user-select: none;
}

.input-group input {
  flex: 1;
  width: auto;
  min-width: 0;
  border: none;
  border-radius: 0;
  padding: 10px 12px 10px 4px;
}

.input-group input:focus {
  outline: none;
}

.field--honorific {
  border: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 8px;
}

.field--honorific legend {
  font-size: 13px;
  color: #333;
  margin-bottom: 6px;
  padding: 0;
  /* legend は fieldset 内で独立したブロックとして扱われるよう、選択肢の
     flex行とは別の行に強制改行する（幅100%を確保）。 */
  width: 100%;
}

.radio-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 20px;
  font-size: 14px;
  cursor: pointer;
  /* 選択肢間の間隔・横幅を十分確保した上で、ラベル文字列自体は必ず1行で
     表示する（確定仕様 2026-07-23・実機フィードバック: 「御中」「なし」の
     ラベルが2文字の途中で2行に折り返っていた不具合の修正）。日本語は
     ブラウザの既定 line-break で任意の文字間に改行が入りうるため、
     white-space: nowrap で明示的に禁止する。選択肢同士が収まりきらない
     場合は .field--honorific 側の flex-wrap により選択肢単位で次の行へ
     折り返す（1つのラベルの中で折り返されることはない）。 */
  white-space: nowrap;
}

.radio-option span {
  white-space: nowrap;
}

/* レイアウトシフト禁止（CLAUDE.md UI ルール）: エラー/ヒントは常時同じ高さの箱を確保し、
   出現時に周囲の要素を押し下げない。文言・色だけを差し替える。
   最長の実メッセージ（GENERIC_FAILURE_MESSAGE / ORDER_UNAVAILABLE_MESSAGE、
   共に約45〜50文字）は、幅375pxのモバイル1カラムカード内では最大3行に折り返しうる
   ため、常時3行分（line-height 1.4 × 3 = 56px）を確保し、1行のプレースホルダ表示時と
   3行のエラー表示時とで箱の高さが変わらないようにする。 */
.form-message {
  min-height: 56px;
  line-height: 1.4;
  font-size: 13px;
  margin: 0 0 12px;
  color: #666;
}

.form-message--error {
  color: #c0392b;
}

.form-message--info {
  color: #2a6df4;
}

.addressee-amount {
  min-height: 1.4em;
  font-size: 15px;
  margin: 0 0 16px;
  color: #333;
}

.btn {
  display: inline-block;
  font-size: 15px;
  padding: 10px 18px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn--primary {
  background: #1a1a1a;
  color: #fff;
  width: 100%;
}

.btn--primary:disabled {
  background: #999;
  cursor: not-allowed;
}

.btn--text {
  background: none;
  border: none;
  color: #555;
  width: 100%;
  margin-top: 8px;
  text-decoration: underline;
}