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

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

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

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: var(--font-md);
  line-height: var(--line-body);
}

/* --- ヘッダー --- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--header-h);
  /* 帯は窓いっぱい、中身は本文（.app-main の幅＋左右 sp-4）と同じ幅に揃える＝広い画面で名前だけ窓の端に離れない */
  padding: 0 var(--sp-4);
  padding-left: max(var(--sp-4), env(safe-area-inset-left), calc((100% - var(--reading-max)) / 2 + var(--sp-4)));
  padding-right: max(var(--sp-4), env(safe-area-inset-right), calc((100% - var(--reading-max)) / 2 + var(--sp-4)));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  background: var(--bg-surface);
  border-bottom: var(--line-w) solid var(--border-subtle);
}

.app-title {
  margin: 0;
  font-size: var(--font-lg);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* アプリ名とその下の版（.ui-ver＝部品 ui-update.js が書く・スキル ui-kit §2-6）。min-width: 0＝狭い画面で名前が … で切れる
   align-items: flex-start＝版の札（新しい版あり）を名前の幅まで伸ばさない */
.app-brand {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* --- 本文の器 --- */
.app-main {
  max-width: var(--reading-max);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4) var(--sp-8);
}

/* --- 空の表示（準備中） --- */
.empty-state {
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  background: var(--bg-surface);
  border: var(--line-w) solid var(--border-subtle);
  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 で SE の幅に「並びま／す。」と 1 文字落ちた） */
  word-break: keep-all;
  overflow-wrap: anywhere;
}