/**
 * 共通CSS（お客様用・管理者用の両 LIFF で使う汎用スタイルのみを置く。
 * 管理画面固有のスタイルはここに置かない）。
 *
 * 画面設計の原則（docs/SPEC.md 5.2・5.4）をそのまま満たす。
 */

:root {
  /* 使う色は2色（緑・黒）まで（SPEC 5.2）。
     白は背景・反転色として、グレーは枠線としてのみ使う（配色そのものの数には数えない）。 */
  --green: #06c755;
  --black: #1a1a1a;
  --white: #ffffff;
  --gray: #dddddd;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  background: var(--white);
  color: var(--black);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  /* 本文は16px以上（SPEC 5.2） */
  font-size: 16px;
  line-height: 1.6;
}

/* 375px幅で崩れないよう、固定幅pxでレイアウトを組まず width:100% / flex を使う（SPEC 5.4） */
img,
button,
input,
select,
textarea {
  max-width: 100%;
}

/* 素の button 要素の共通見た目（サイズ・色・枠線など）。
   幅・flex 配置は強制しない（段階4の＋／−個数ボタン等、全幅にしたくない
   button でも上書き不要にするため）。
   装飾・アニメーション・影は使わない（SPEC 5.2）ため、
   border-radius・box-shadow・transition・animation は一切指定しないこと。 */
button {
  min-height: 48px;
  /* ボタン内の文字は18px以上（SPEC 5.2） */
  font-size: 18px;
  font-family: inherit;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--gray);
  padding: 8px 16px;
}

/* 全幅ボタン（.btn クラスを明示的に付けたときだけ全幅・flex中央寄せになる）。
   a 要素をボタンに見せる場合もこのクラスを使う想定のため、
   button 要素の見た目ルールをここにも重ねて指定し、a.btn でも同じ見た目になるようにする。 */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  font-size: 18px;
  font-family: inherit;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--gray);
  padding: 8px 16px;
  text-decoration: none;
}

/* プライマリボタン（緑背景＋白文字） */
.btn-primary {
  min-height: 56px;
  background: var(--green);
  color: var(--white);
  border: none;
  font-weight: bold;
}

/* 「次に何をすればよいか」を1行で示す領域（SPEC 5.2） */
.hint {
  width: 100%;
  font-size: 16px;
  font-weight: bold;
}