:root {
  --bg: #F7F7F4;
  --card: #FFFFFF;
  --ink: #1C1C1A;
  --muted: #6B6B67;
  --faint: #71716D;
  --line-color: #7BA428;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* ノッチ・ホームバーを避ける（ホーム画面起動時） */
  padding: calc(28px + env(safe-area-inset-top)) 16px calc(36px + env(safe-area-inset-bottom));
  overscroll-behavior-y: none;
}
/* ダブルタップズームを無効化してタップの反応を速くする */
body, button, input { touch-action: manipulation; }
header { text-align: center; margin-bottom: 30px; }
header .en {
  font-size: 11px;
  letter-spacing: 0.42em;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
}
header h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--ink);
}
/* タイトルの下の一行。初めて来た人には「まず回す」の案内、
   一度でも回した人にはこのアプリの合言葉が出る（setTagline）。
   1st viewは回すボタンが見えることが大事なので、この行は小さく低く保つ。 */
header .tag {
  margin-top: 8px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
header .tag.hint { color: #5C7629; }
/* 狭い画面（320px級）で「行き先」だけが2行目に残るのを防ぐ。
   文のかたまりごとに inline-block にして、折り返しは文の切れ目だけで起こす */
header .tag span { display: inline-block; }