/* 色・文字・余白の土台。個別の見た目は layout.css と card.css に分ける */

:root {
  --bg: #ffffff;          /* 背景。モックアップは白 */
  --ink: #1a1a1a;         /* 文字色。真っ黒にせず少し和らげる */
  --blue: #1b5cff;        /* ロゴの青。Task 4 で 02_デザイン のロゴから採色して差し替える */
  --pink: #ff3d88;        /* ロゴのピンク。同上 */
  --pill: #f1f2f7;        /* 名前ピルなどの薄い灰色 */
  --shadow: 0 8px 24px rgba(0,0,0,.12);   /* カードの影 */
  /* iPhone のホームバーの高さ。端末が値を教えてくれる。非対応なら0 */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* 幅の計算に padding を含める。含めないと指定した幅より大きくなって崩れる */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  /* iPhone と Windows の両方で読める順に並べる */
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  /* 横向きにしたとき iOS が勝手に文字を拡大するのを止める */
  -webkit-text-size-adjust: 100%;
  /* 画面の端まで引っ張ったときの跳ね返りを止める。
     カードの左右スワイプ（Task 7）と衝突して誤作動するため */
  overscroll-behavior: none;
}

/* 上段の3分割。左右を 1fr にして中央のロゴを真ん中に固定する */
.app-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px 16px;
}

.storage-badge {
  justify-self: start;              /* 左端に寄せる */
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  border: 1px solid var(--pink);    /* モックアップは赤枠の囲み */
  color: var(--pink);
  border-radius: 8px;
  padding: 4px 8px;
}

.logo {
  margin: 0;
  font-size: 22px;
  letter-spacing: .02em;
  /* 青とピンクの2色。Task 4 でロゴ画像に差し替える予定の暫定表示 */
  background: linear-gradient(90deg, var(--blue) 60%, var(--pink) 60%);
  -webkit-background-clip: text;    /* 背景を文字の形で切り抜く */
  background-clip: text;
  color: transparent;               /* 文字自体は透明にして背景を見せる */
}

.avatar-btn {
  justify-self: end;                /* 右端に寄せる */
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid #d8d8e0;
  background: #fff;
}

/* 起動確認用。Task 4 で中身を作るときに消す */
.boot-check {
  margin: 40px 16px;
  padding: 16px;
  border-radius: 12px;
  background: var(--pill);
  font-size: 14px;
  line-height: 1.7;
}

/* ===== Safari のタブで開いたときの案内（T2） ===== */
.install-guide {
  position: fixed;           /* スクロールしても画面に貼り付ける */
  inset: 0;                  /* 上下左右いっぱいに広げる */
  z-index: 100;              /* どの画面よりも手前に出す */
  display: flex;             /* 中身を並べる */
  flex-direction: column;    /* 上から下へ並べる */
  justify-content: safe center; /* 縦の真ん中に寄せる。収まらないときは上から並べて切れないようにする */
  overflow-y: auto;          /* 画面より高くなったら（文字の拡大・横向き）スクロールできるように */
  gap: 16px;                 /* 段落どうしの間 */
  padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); /* 画面の端との余白。iPhone の丸い角やホームバーの分も空ける */
  background: #f3f6fd;       /* TOP の地と同じ淡い青 */
  color: var(--ink);         /* 文字色 */
  font-size: 15px;           /* 読みやすい大きさ */
  line-height: 1.7;          /* 行の間 */
}
.install-guide[hidden] { display: none; }            /* hidden で消す（上の display:flex が hidden を打ち消すため） */
.install-guide h2 { margin: 0; font-size: 20px; }    /* 見出し */
.install-guide ol { margin: 0; padding-left: 1.4em; } /* 手順の番号の字下げ */
.install-guide .note { margin: 0; font-size: 13px; color: #636a79; } /* 補足は小さく薄く（top.html の --sub） */
.install-guide button {      /* 「このまま見る」のボタン */
  align-self: center;        /* 横の真ん中に置く */
  padding: 10px 16px;        /* 押しやすい大きさ */
  border: 1px solid #d1d8e6; /* 淡い枠線（top.html の --line） */
  border-radius: 999px;      /* 丸い端 */
  background: #fff;          /* 白いボタン */
  color: inherit;            /* 文字色は親と同じ */
  font: inherit;             /* 書体は親と同じ */
  font-size: 13px;           /* 控えめな大きさ */
}