/**
 * 02-base.css — 土台（ページ・ヘッダー・本文の器・空の表示・下の版の札）
 * 値はすべて 01-variables.css のトークン。直書きしない。
 */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--font-md);
  line-height: var(--line-body);
}

/* --- ヘッダー --- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--app-header-h);
  padding: 0 var(--sp-4);
  padding-left: max(var(--sp-4), env(safe-area-inset-left));
  padding-right: max(var(--sp-4), env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-header);
  border-bottom: var(--line-w) solid var(--gold-line);
}

.app-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--font-lg);
  font-weight: 600;  /* 公式サイトの決まり：太さは 400／600／700 だけ（esquina:css/text-look.css） */
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- 本文の器 --- */
.app-main {
  flex: 1;
  width: 100%;
  max-width: var(--reading-max);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4) var(--sp-8);
  padding-left: max(var(--sp-4), env(safe-area-inset-left));
  padding-right: max(var(--sp-4), env(safe-area-inset-right));
}

/* --- 空の表示（メニューがまだ無い） --- */
.empty-state {
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  background: var(--bg-surface);
  border: var(--line-w) solid var(--gold-line);
  border-radius: var(--radius-lg);
}

.empty-state-title {
  margin: 0 0 var(--sp-2);
  font-size: var(--font-lg);
  font-weight: 700;
}

.empty-state-text {
  margin: 0;
  color: var(--text-secondary);
  /* 句読点でだけ折る（guide-maker で「並びま／す。」と 1 文字落ちた作りを避ける） */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* --- 下の版の札 ---
   本番に出ている commit。PM が見ている画面が最新かを判断する（deploy-verify）。
   お客様の目に入らないよう、上ではなく最下部に小さく置く（段階 2 で紙と同じ「版の札」になる）。 */
.app-footer {
  padding: var(--sp-4);
  padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom));
  text-align: center;
}

.app-ver {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}