/* =========================================================
   ✅ APP SHELL LAYOUT RULES（AI/量産向け：最重要）
   ---------------------------------------------------------
   【重要】このファイルは他のCSSより先に読み込むこと
   正しい読み込み順:
   1. app-shell.css（基盤・構造・変数定義）
   2. ad.css（広告制御 - shellの変数を利用）
   3. app-screens.css（UIコンポーネント）
   
   ---------------------------------------------------------
   このテンプレは「固定エリア + 残り全部 + 中だけスクロール」
   という構造で成立しています。

   Flutter化時も Scaffold / AppBar / Body / BottomBar に
   ほぼそのまま対応できる構成です。

   ---------------------------------------------------------
   ■ 画面の縦構造（基本構造）
   ---------------------------------------------------------
   - .app-scaffold : 画面全体（100dvh）。縦flexで積む親コンテナ
   - .app-header   : 固定高さ（中身は .app-header-inner に集約）
   - .app-stage    : 残りすべて（flex: 1）。メインコンテンツ領域
   - .app-nav      : 固定高さ（ボトムナビ）
   - #random-ad-container.fixed-ad : 固定高さ（広告 50px + safe-area）
     ※広告仕様の詳細は ad.css 側に集約する

   ---------------------------------------------------------
   ■ スクロールの責務（最重要ルール）
   ---------------------------------------------------------
   - スクロールさせるのは .app-stage-inner のみ
   - body / .app-scaffold / .app-stage に overflow:auto を足さない
   - スクロール画面：
     - .app-stage-inner（fitなし）を使用
     - コンテンツが長い場合のみ縦スクロールさせる
   - 収まる画面（fit）：
     - .app-stage-inner.fit を使用
     - 基本はスクロールさせず中央寄せで表示する
     - ただし横向きなどで高さ不足の場合のみ、
       .app-stage-inner 内スクロールを許可する

   ---------------------------------------------------------
   ■ コンテンツ側の高さ設計（推奨）
   ---------------------------------------------------------
   - 「全画面に広げたい」場合でも height:100% 連鎖は避け、
     min-height を基本に設計する
   - 典型レイアウトは「上 / 中 / 下」の3分割が安全：

     .screen {
       height: 100%;
       display: grid;
       grid-template-rows: auto 1fr auto;  // 上:固定 / 中:伸縮 / 下:固定
       gap: 12px;
     }

   ---------------------------------------------------------
   ■ 禁止事項（事故防止ルール）
   ---------------------------------------------------------
   - コンテンツ内で position: fixed を多用しない
     （ヘッダー / ナビ / 広告と衝突する）
   - 外側レイアウト幅は変更しない
     （背景は100% / 中身は max-width で中央寄せ）
   - vh を使う場合は 100vh ではなく 100dvh を基本とする

   ========================================================= */


:root {
  /*――――――――――――――――――――――
    1. 環境・SafeArea (iPhone対策)
  ――――――――――――――――――――――*/
  --safe-area-top:    env(safe-area-inset-top);
  --safe-area-bottom: env(safe-area-inset-bottom);
  --safe-area-left:   env(safe-area-inset-left);
  --safe-area-right:  env(safe-area-inset-right);

  /* 広告の基本高さ（広告の責務なので ad.css で上書き可） */
  --ad-height: 50px;

  /*――――――――――――――――――――――
    2. レイアウト設定（レスポンシブ）
  ――――――――――――――――――――――*/
  /* コンテンツの最大幅（これ以上は広がらない） */
  --app-max-width: 500px; 
  /* コンテンツエリアの境界線（PC表示時の視認性向上） */
  --app-content-shadow: 0 0 40px rgba(0,0,0,0.05);

  /*――――――――――――――――――――――
    3. Flutter準拠 基盤トークン
  ――――――――――――――――――――――*/
  /* Flutter論理ピクセル（dp）単位 */
  --dp-unit: 0.0625rem; /* 1dp = 1px at 16px base font */

  /*――――――――――――――――――――――
    4. スペーシングシステム
  ――――――――――――――――――――――*/
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-8: 32px; --sp-10: 40px;

  /*――――――――――――――――――――――
    5. タイポグラフィ（基本）
  ――――――――――――――――――――――*/
  --font-family-base: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
  --ts-adaptive-body: clamp(14px, 4.5vw, 18px);
  --ts-adaptive-title: clamp(18px, 5vw, 24px);

  /*――――――――――――――――――――――
    6. シェイプトークン
  ――――――――――――――――――――――*/
  --shape-corner-extra-small: 4px;
  --shape-corner-small:       8px;
  --shape-corner-medium:      12px;
  --shape-corner-large:       16px;
  --shape-corner-extra-large: 28px;
  --shape-corner-full:        50%;

  /*――――――――――――――――――――――
    7. コンポーネントサイズ（基本）
  ――――――――――――――――――――――*/
  --comp-header-h: 64px;
  --comp-nav-h:    80px;

  /*――――――――――――――――――――――
    8. 基本カラー（最小限）
  ――――――――――――――――――――――*/
  --md-primary: #4a6741;
  --md-on-primary: #ffffff;
  --md-surface: #fef9f6;
  --md-on-surface: #1b1c18;
}

/*――――――――――――――――――――――
  リセット & ベース
――――――――――――――――――――――*/
*, *::before, *::after {
  box-sizing: border-box;
}

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  /* 高さ単位のフォールバック（ブラウザ互換性） */
  height: 100vh;   /* 古いブラウザ用 */
  height: 100svh;  /* Small Viewport Height */
  height: 100dvh;  /* Dynamic Viewport Height（推奨） */

  /* アプリ全体の背景色（PCの余白部分になる色） */
  background-color: var(--md-surface);

  font-family: var(--font-family-base);
  color: var(--md-on-surface);
  overflow: hidden; /* アプリ外のスクロール禁止 */
  -webkit-text-size-adjust: none;
  overscroll-behavior: none;
  
  /* タッチデバイス最適化 */
  -webkit-tap-highlight-color: transparent;
}

/*――――――――――――――――――――――
  Flutter: Scaffold に相当
  画面全体（100%）を使用するコンテナ
――――――――――――――――――――――*/
.app-scaffold {
  width: 100%;
  height: 100%; /* bodyの100dvhに従う */

  background-color: var(--md-surface);
  position: relative;
  overflow: hidden;

  /* Column構造 */
  display: flex;
  flex-direction: column;
}

/*――――――――――――――――――――――
  共通: コンテンツ幅制限クラス
  ヘッダーやナビの「中身」に適用するためのユーティリティ
――――――――――――――――――――――*/
.layout-constrained {
  width: 100%;
  max-width: var(--app-max-width);
  margin: 0 auto; /* 中央寄せ */
  display: flex;
  align-items: center;
  /* 必要に応じて上書き */
}

/*――――――――――――――――――――――
  Flutter: AppBar に相当
  背景は画面幅100%に広がる
  SafeAreaは「min-height」で内包（固定height + paddingで太る事故を防ぐ）
――――――――――――――――――――――*/
.app-header {
  width: 100%;
  flex-shrink: 0;

  /* Flex配置: 中身を中央に寄せる */
  display: flex;
  justify-content: center;
  align-items: flex-start;

  background: #f0f0f0;
  z-index: 10;
  border-bottom: 1px solid rgba(0,0,0,0.05);

  /* SafeArea（ノッチ端末対策） */
  padding-top: var(--safe-area-top);

  /* ★SafeArea込みの最低高さを保証 */
  min-height: calc(var(--comp-header-h) + var(--safe-area-top));
}

/* ヘッダーの中身（HTML側でdivで囲うか、直接配置を想定） */
.app-header > * {
  max-width: var(--app-max-width);
  width: 100%;
  text-align: center;
}

/* 明示的にインナーラッパーを使う場合 */
.app-header-inner {
  width: 100%;
  max-width: var(--app-max-width);
  height: var(--comp-header-h);

  display: flex;
  align-items: center;
  justify-content: center;
}

.title-text {
  font-size: var(--ts-adaptive-title);
  font-weight: 800;
  color: var(--md-primary);
  margin: 0;
}

/*――――――――――――――――――――――
  Flutter: Body (Expanded) に相当
  背景は画面幅100%
――――――――――――――――――――――*/
.app-stage {
  flex: 1;
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* スクロール領域 */
.app-stage-inner {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* Flex Column */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 収まるモード */
.app-stage-inner.fit {
  overflow: hidden;
  justify-content: center;
}

/* スクロールバー */
.app-stage-inner::-webkit-scrollbar {
  width: 6px;
}
.app-stage-inner::-webkit-scrollbar-track {
  background: transparent;
}
.app-stage-inner::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 3px;
}

/*――――――――――――――――――――――
  コンテンツラッパー
――――――――――――――――――――――*/
.content-fit, .content-scroll {
  width: 100%;
  max-width: var(--app-max-width);
  background-color: var(--md-surface);
}

.content-fit {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  min-height: 100%;
  height: 100%; /* 追加: 親の高さいっぱいに広げる */
}

.content-scroll {
  display: none; /* JSで制御 */
  padding: var(--sp-4);
  flex-direction: column;
  align-items: center;
}

.scroll-item {
  margin-bottom: var(--sp-4);
  width: 100%;
  max-width: 100%;
}

/*――――――――――――――――――――――
  Flutter: BottomNavigationBar に相当
  SafeArea込みは min-height で内包
――――――――――――――――――――――*/
.app-nav {
  width: 100%;
  flex-shrink: 0;
  background: white;
  border-top: 1px solid #ddd;
  z-index: 100;

  display: flex;
  justify-content: center;
  align-items: flex-start;

  padding-bottom: var(--safe-area-bottom);
  min-height: calc(var(--comp-nav-h) + var(--safe-area-bottom));
}

.app-nav-inner {
  width: 100%;
  max-width: var(--app-max-width);
  height: var(--comp-nav-h);

  display: flex;
  align-items: center;
  justify-content: space-around;
}

.app-nav > .nav-item {
  flex: 0 1 80px;
}

.app-nav-inner > .nav-item {
  flex: auto;
}

/*――――――――――――――――――――――
  広告枠（最小責務）
  ※高さ/余白/固定/WordPress対策などは ad.css に集約
――――――――――――――――――――――*/
.fixed-ad {
  width: 100%;
  flex-shrink: 0;
  background: #eee;
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;

  /* SafeAreaや高さ固定は ad.css 側で上書き */
}

/*――――――――――――――――――――――
  状態管理クラス
――――――――――――――――――――――*/
.app-header.hidden,
.app-nav.hidden,
.fixed-ad.hidden {
  display: none;
}

/*――――――――――――――――――――――
  汎用コンポーネント（実際のプロジェクトでも使用可能）
  ※Material 3タイポグラフィスケールに準拠
――――――――――――――――――――――*/
.info-box {
  background: white;
  padding: var(--sp-6);
  border-radius: var(--shape-corner-large);
  width: 100%;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.info-box h3 {
  margin: 0 0 var(--sp-3) 0;
  color: var(--md-primary);
  font-size: clamp(1rem, 3.33vw, 1.125rem); /* 16px→18px (Material 3: title-large) */
  font-weight: 500;
  line-height: 1.5;
}
.info-box p {
  margin: 0;
  color: #555;
  line-height: 1.6;
  font-size: 1rem; /* 16px (Material 3: body-medium) */
}
.info-box ul {
  margin: var(--sp-3) 0 0 0;
  padding-left: 20px;
  color: #555;
  font-size: 1rem; /* 16px */
}
.info-box li {
  margin-bottom: var(--sp-2);
  line-height: 1.6;
}

.sample-visual {
  width: 200px;
  height: 120px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: var(--shape-corner-large);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: clamp(1.5rem, 5.33vw, 1.75rem); /* 24px→28px */
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
}

.pattern-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--sp-3);
  font-size: 0.875rem; /* 14px (Material 3: body-small) */
}
.pattern-table th,
.pattern-table td {
  padding: var(--sp-2);
  text-align: center;
  border: 1px solid #ddd;
}
.pattern-table th {
  background: #f5f5f5;
  font-weight: 500;
  color: var(--md-primary);
}
.pattern-table td {
  background: white;
}

/* ナビアイテム */
.nav-item {
  text-align: center;
  padding: var(--sp-2);
  cursor: pointer;
  min-width: 60px;
}
.nav-icon {
  width: 44px;
  height: 44px;
  background: #e8e8e8;
  border-radius: 50%;
  margin: 0 auto 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem; /* 22px */
}
.nav-item.active .nav-icon {
  background: var(--md-primary);
  color: white;
}
.nav-label {
  font-size: 0.75rem; /* 12px (Material 3: label-medium) */
  color: #666;
  font-weight: 500;
}

/*――――――――――――――――――――――
  共通ユーティリティ
――――――――――――――――――――――*/
.scroll-area {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.scroll-area::-webkit-scrollbar {
  display: none;
}

.app-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 2000;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--sp-4);
}
.app-overlay.active {
  display: flex;
}

.interactive-surface {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

/* Link Reset */
a {
  color: inherit;
  text-decoration: none;
}

/* Button Reset */
button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

/* =========================================================
   Fit: 通常はスクロールさせない（中央寄せ）
   ただし横向きなどで高さが不足する場合のみ
   app-stage-inner 内で縦スクロールを許可する
   ========================================================= */

/* 横向きで高さ不足の場合はスクロール可能にし、上詰めにする */
@media (orientation: landscape) and (max-height: 520px) {
  .app-stage-inner.fit {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
  }

  .content-fit {
    justify-content: flex-start;
    min-height: auto;
  }
}

/* =========================================================
   アクセシビリティ & レスポンシブ
   ========================================================= */

/* アニメーション軽減設定 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 高DPIディスプレイ対応 */
@media (min-resolution: 2dppx) {
  * {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
}