/* ========================================
   style.css - BODY LOG 健康管理アプリ スタイルシート
   
   このファイルの構成：
   1. CSS変数（テーマカラー・共通値）
   2. リセット・基本設定
   3. 共通コンポーネント（ボタン、入力欄など）
   4. 初回設定画面
   5. 記録入力画面
   6. グラフ確認画面
   7. 設定画面
   8. モーダル・トースト
   9. アニメーション
======================================== */


/* ========================================
   1. CSS変数（テーマカラーと共通の値）
   --accent: テーマカラー（JavaScriptで動的に変更される）
   --bg-dark: メイン背景色（ダーク）
   --bg-card: カード・入力行の背景色
   CSS変数を使うと、1か所変えるだけで全体に反映できる
======================================== */
:root {
  --accent: #FF6B35;          /* テーマのアクセントカラー（デフォルト：オレンジ） */
  --bg-dark: #0D0D0D;         /* 最も暗い背景（ほぼ黒） */
  --bg-mid: #1A1A1A;          /* 少し明るい背景（カード背景など） */
  --bg-card: #222222;         /* 入力行・カードの背景 */
  --bg-row: #1E1E1E;          /* フォーム行の背景 */
  --text-primary: #F0F0F0;    /* メインのテキスト色 */
  --text-secondary: #888888;  /* サブのテキスト色（説明文など） */
  --text-muted: #555555;      /* さらに薄いテキスト（プレースホルダーなど） */
  --border: #2E2E2E;          /* 区切り線の色 */
  --border-light: #333333;    /* 少し明るい区切り線 */
  --danger: #FF4444;          /* 危険操作（削除など）の赤色 */
  --radius: 12px;             /* ボタンや入力欄の角丸サイズ */
  --radius-sm: 8px;           /* 小さい角丸 */
  --nav-height: 70px;         /* 下部ナビゲーションの高さ */
  --font-main: 'Noto Sans JP', sans-serif;   /* メインの日本語フォント */
  --font-mono: 'DM Mono', monospace;         /* 数値表示用のモノスペースフォント */
}


/* ========================================
   2. リセット・基本設定
   ブラウザのデフォルトスタイルを統一するためのリセット
======================================== */

/* すべての要素の余白をゼロにし、box-sizingをborder-boxにする */
/* border-box にすると padding を含めた幅を指定できるので計算しやすい */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* body全体の基本設定 */
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden; /* 画面切り替えで横スクロールが出ないよう隠す */
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-dark);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  /* iPhoneのセーフエリア（ノッチ・ホームバー）に対応 */
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-font-smoothing: antialiased; /* フォントを滑らかに表示 */
}

/* スクロールバーのデザインをシンプルにする（Webkit系ブラウザ用） */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: var(--bg-mid);
}
::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: 2px;
}

/* input の数値スピナー（上下矢印）を非表示にする */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ボタンのデフォルトスタイルをリセット */
button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* テキストエリアのリサイズを縦方向のみに制限 */
textarea {
  resize: vertical;
}


/* ========================================
   3. 画面（スクリーン）の基本設定
   各画面は position:fixed で重ね合わせ、
   .active クラスで表示・非表示を切り替える
======================================== */

/* 全画面共通：画面いっぱいに広がる固定レイアウト */
.screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;          /* 縦スクロールを許可 */
  background-color: var(--bg-dark);

  /* デフォルトは非表示 */
  opacity: 0;
  pointer-events: none;      /* 非表示のときはタップを無効に */
  transform: translateY(16px); /* 少し下にずらして表示時にスライドアップ */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* .active クラスが付いている画面だけ表示する */
.screen.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}


/* ========================================
   4. 初回設定画面（#screen-setup）
   黒基調・ミニマルデザイン
======================================== */

/* 設定画面の内側コンテナ：縦中央寄せ */
.setup-inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 28px 40px;
  background-color: var(--bg-dark);
}

/* ロゴ・タイトル部分 */
.setup-header {
  text-align: center;
  margin-bottom: 48px;
}

/* アプリロゴ：モノスペースフォントで大きく表示 */
.setup-logo {
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--text-primary);
  margin-bottom: 10px;
}

/* ロゴ下の説明テキスト */
.setup-tagline {
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
}

/* 設定フォーム全体：幅を最大に広げる */
.setup-form {
  width: 100%;
  max-width: 360px;
}

/* 各入力行：上下に区切り線を引いたフラットなデザイン */
.setup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

/* 縦並びレイアウトの行（テーマカラー選択用） */
.setup-row--column {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* 入力ラベルテキスト */
.setup-label {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 300;
  min-width: 80px;
}

/* 入力欄と単位を横並びにするラッパー */
.setup-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 入力欄の共通スタイル */
.setup-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  width: 100px;
  text-align: right;
  padding: 4px 4px;
  outline: none;
  transition: border-color 0.2s;
}

/* 入力欄にフォーカスしたときのスタイル（アクセントカラーで下線が光る） */
.setup-input:focus {
  border-bottom-color: var(--accent);
}

/* 入力欄のプレースホルダー色 */
.setup-input::placeholder {
  color: var(--text-muted);
  font-size: 14px;
}

/* 単位テキスト（cm, kg など） */
.setup-unit {
  font-size: 13px;
  color: var(--text-muted);
}

/* 性別切り替えボタン：2つを横並びにしたトグル */
.gender-toggle {
  display: flex;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}

/* 性別ボタン各個（男性 / 女性） */
.gender-btn {
  padding: 8px 20px;
  font-size: 13px;
  color: var(--text-secondary);
  background: transparent;
  transition: all 0.2s;
  font-family: var(--font-main);
}

/* 選択中の性別ボタン：アクセントカラーで強調 */
.gender-btn.active {
  background: var(--accent);
  color: #fff;
  font-weight: 500;
}

/* テーマカラー選択のボタン群 */
.color-picker {
  display: flex;
  gap: 12px;
  padding: 4px 0;
}

/* カラー選択の丸ボタン */
.color-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid transparent;
  transition: transform 0.2s, border-color 0.2s;
}

/* 選択中のカラードット：白い枠線で強調 */
.color-dot.active {
  border-color: #ffffff;
  transform: scale(1.2);
}

/* 「GO!」ボタン：大きくて目立つ黒いボタン */
.btn-go {
  margin-top: 48px;
  width: 100%;
  max-width: 360px;
  padding: 18px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.2em;
  border-radius: var(--radius);
  transition: transform 0.15s, opacity 0.15s;
}

/* ボタンを押したときに少し縮んで見える効果 */
.btn-go:active {
  transform: scale(0.97);
  opacity: 0.85;
}


/* ========================================
   5. 記録入力画面（#screen-record）
   ダークテーマ・フラットな入力行デザイン
======================================== */

/* 記録画面の上部ヘッダー：日付と前後ナビ */
.record-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 56px 20px 16px;
  background: var(--bg-dark);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* 前日/翌日の矢印ボタン */
.date-nav-btn {
  font-size: 24px;
  color: var(--text-secondary);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}
.date-nav-btn:active {
  background: var(--bg-card);
}

/* 日付表示部分 */
.date-display {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 曜日テキスト（Mon, Tue... などの小さいテキスト） */
.date-weekday {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--font-mono);
}

/* 日付の大きなテキスト */
.date-main {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: 0.05em;
}

/* BMI・体重・体脂肪のサマリーカード */
.record-summary {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 16px 20px;
  margin: 0 16px 8px;
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

/* サマリー各項目 */
.summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* サマリーの大きな数値 */
.summary-val {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
  color: var(--accent);
}

/* サマリーの小さなラベル */
.summary-lbl {
  font-size: 10px;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
}

/* サマリー項目の縦区切り線 */
.summary-divider {
  width: 1px;
  height: 36px;
  background: var(--border);
}

/* 記録フォーム全体 */
.record-form {
  padding: 0 16px;
  margin-bottom: 12px;
}

/* 各入力行：アイコン・ラベル・入力欄を横並び */
.record-row {
  display: flex;
  align-items: center;
  padding: 14px 12px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  gap: 12px;
}

/* 最初の行：上角丸 */
.record-row:first-child {
  border-radius: var(--radius) var(--radius) 0 0;
}

/* 最後の行：下角丸、下ボーダーなし */
.record-row:last-child {
  border-radius: 0 0 var(--radius) var(--radius);
  border-bottom: none;
}

/* スタンプ行はflex-wrapで折り返せるように */
.record-row--stamp {
  flex-wrap: wrap;
}

/* メモ行は縦並びにする */
.record-row--memo {
  flex-wrap: wrap;
  align-items: flex-start;
}

/* 入力行のアイコン */
.record-icon {
  font-size: 18px;
  width: 26px;
  text-align: center;
}

/* 入力行のラベル */
.record-label {
  font-size: 13px;
  color: var(--text-secondary);
  min-width: 60px;
}

/* 入力欄と単位のラッパー：右端に寄せる */
.record-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* 数値入力欄 */
.record-input {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 500;
  width: 90px;
  text-align: right;
  outline: none;
}
.record-input::placeholder {
  color: var(--text-muted);
  font-size: 16px;
}

/* 単位テキスト */
.record-unit {
  font-size: 12px;
  color: var(--text-muted);
}

/* スタンプ選択エリア */
.stamp-picker {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* スタンプボタン（絵文字） */
.stamp-btn {
  font-size: 22px;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.1s;
  background: var(--bg-row);
}

/* 選択中のスタンプ：アクセントカラーの背景 */
.stamp-btn.active {
  background: var(--accent);
  transform: scale(1.1);
}

/* メモ入力欄 */
.record-memo {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: 14px;
  min-height: 80px;
  padding: 8px 0;
  outline: none;
  margin-left: 38px;  /* アイコン分のインデント */
}
.record-memo::placeholder {
  color: var(--text-muted);
}

/* 保存ボタン */
.btn-save {
  display: block;
  width: calc(100% - 32px);
  margin: 0 16px 12px;
  padding: 16px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.15em;
  border-radius: var(--radius);
  transition: transform 0.15s, opacity 0.15s;
}
.btn-save:active {
  transform: scale(0.97);
  opacity: 0.85;
}

/* 広告バナー風ダミー領域 */
.ad-banner-dummy {
  margin: 0 16px 8px;
  padding: 10px;
  background: var(--bg-mid);
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}


/* ========================================
   6. 下部ナビゲーション（全画面共通）
   画面下部に固定表示されるタブバー
======================================== */

.bottom-nav {
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height);
  display: flex;
  background: var(--bg-mid);
  border-top: 1px solid var(--border);
  /* iPhoneのホームバーの高さ分パディングを追加 */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 100;
}

/* 各タブボタン */
.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text-muted);
  transition: color 0.2s;
}

/* アクティブなタブ：アクセントカラーで強調 */
.nav-btn--active {
  color: var(--accent);
}

.nav-icon {
  font-size: 20px;
}

.nav-label {
  font-size: 10px;
  letter-spacing: 0.05em;
}


/* ========================================
   7. グラフ確認画面（#screen-graph）
======================================== */

/* グラフ画面のヘッダー */
.graph-header {
  padding: 56px 20px 16px;
  text-align: center;
}

.graph-title {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--text-primary);
}

/* DAY / WEEK / MONTH の切り替えタブ */
.graph-tabs {
  display: flex;
  margin: 0 16px 16px;
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 4px;
  gap: 4px;
}

.graph-tab {
  flex: 1;
  padding: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: all 0.2s;
}

/* 選択中のタブ */
.graph-tab.active {
  background: var(--accent);
  color: #fff;
}

/* グラフ統計サマリー */
.graph-stats {
  display: flex;
  justify-content: space-around;
  padding: 0 16px 16px;
}

.graph-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.graph-stat-val {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 500;
  color: var(--accent);
}

.graph-stat-lbl {
  font-size: 10px;
  color: var(--text-secondary);
}

/* canvasグラフのラッパー：タップ検出のため position:relative が必要 */
.graph-canvas-wrap {
  position: relative;
  margin: 0 16px 16px;
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
}

/* グラフcanvas自体 */
#weight-chart {
  width: 100%;
  display: block;
}

/* データ点タップ時の吹き出し */
.chart-tooltip {
  position: absolute;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  pointer-events: none;  /* タップイベントを通過させる */
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s, transform 0.2s;
  white-space: nowrap;
}

/* 吹き出しを表示するとき */
.chart-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

/* グラフ下の記録リスト */
.graph-records {
  padding: 0 16px;
  margin-bottom: 8px;
}

.graph-records-title {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 0 12px;
  font-family: var(--font-mono);
}

/* 記録リストの各行 */
.record-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.record-list-date {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
}

.record-list-values {
  display: flex;
  gap: 16px;
}

.record-list-weight {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--accent);
}

.record-list-fat {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
}

.record-list-stamp {
  font-size: 16px;
}

/* データなし表示 */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 13px;
}

.empty-state-emoji {
  font-size: 36px;
  display: block;
  margin-bottom: 12px;
}


/* ========================================
   8. 設定画面（#screen-settings）
======================================== */

/* 設定画面ヘッダー */
.settings-header {
  padding: 56px 20px 16px;
  border-bottom: 1px solid var(--border);
}

.settings-title {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text-primary);
}

/* 設定画面の本体：スクロール領域 */
.settings-body {
  padding: 16px 0;
  padding-bottom: calc(var(--nav-height) + 20px);
}

/* 設定セクションのグループ */
.settings-section {
  margin-bottom: 24px;
}

/* セクションのタイトル（小文字のラベル） */
.settings-section-title {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  padding: 0 20px 8px;
}

/* 設定の各行 */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-mid);
}

/* セクション最初の行：上ボーダーも追加 */
.settings-section > .settings-row:first-of-type {
  border-top: 1px solid var(--border);
}

/* カラーピッカー行 */
.settings-row--color {
  padding: 16px 20px;
}

/* 設定ラベル */
.settings-label {
  font-size: 14px;
  color: var(--text-primary);
}

/* 設定入力欄ラッパー */
.settings-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 設定入力欄 */
.settings-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-light);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  width: 80px;
  text-align: right;
  padding: 2px 4px;
  outline: none;
}
.settings-input:focus {
  border-bottom-color: var(--accent);
}
.settings-input::placeholder {
  color: var(--text-muted);
}

/* 設定単位テキスト */
.settings-unit {
  font-size: 12px;
  color: var(--text-muted);
}

/* 設定画面の性別トグル（小さめ） */
.gender-toggle--small .gender-btn {
  padding: 6px 14px;
  font-size: 12px;
}

/* ダミートグルスイッチ全体 */
.toggle {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
}

/* トグルの実際のチェックボックス（見えないが機能する） */
.toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* トグルの外観（灰色の楕円） */
.toggle-slider {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--border-light);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.2s;
}

/* トグルのつまみ（白い丸） */
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

/* チェックされているときのトグル：アクセントカラー＋つまみが右に移動 */
.toggle-input:checked + .toggle-slider {
  background: var(--accent);
}
.toggle-input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

/* 矢印アイコン付きの行（タップで遷移するもの） */
.settings-row--btn {
  cursor: pointer;
  transition: background 0.2s;
}
.settings-row--btn:active {
  background: var(--bg-card);
}

/* 矢印アイコン */
.settings-arrow {
  font-size: 18px;
  color: var(--text-muted);
}

/* 危険操作行（削除など）：赤いラベル */
.settings-row--danger .settings-label {
  color: var(--danger);
}

/* おすすめアプリカード */
.promo-card {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-mid);
  gap: 12px;
}
.settings-section--promo > .promo-card:first-of-type {
  border-top: 1px solid var(--border);
}

.promo-icon {
  font-size: 28px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
}

.promo-text {
  flex: 1;
}

.promo-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.promo-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* GET ボタン */
.promo-btn {
  padding: 6px 16px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-family: var(--font-mono);
  font-weight: 500;
  border-radius: 20px;
  letter-spacing: 0.05em;
}

/* 設定保存ボタン */
.btn-save--settings {
  margin: 16px;
  width: calc(100% - 32px);
}

/* アプリバージョン表示 */
.app-version {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  padding: 16px 0 8px;
  letter-spacing: 0.1em;
}


/* ========================================
   9. モーダル（グラフ説明ポップアップ）
======================================== */

/* 画面全体を覆う半透明の黒い背景 */
.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

/* モーダルを表示するクラス */
.modal-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

/* モーダルのコンテンツボックス */
.modal-box {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 32px 24px;
  width: 85%;
  max-width: 320px;
  text-align: center;
  border: 1px solid var(--border-light);
  transform: scale(0.95);
  transition: transform 0.3s;
}

.modal-overlay.visible .modal-box {
  transform: scale(1);
}

.modal-emoji {
  font-size: 40px;
  margin-bottom: 16px;
}

.modal-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.modal-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 24px;
}

/* モーダルのボタン */
.modal-btn {
  display: block;
  width: 100%;
  padding: 14px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  border-radius: var(--radius-sm);
}


/* ========================================
   10. トースト通知
   画面下部にふわっと現れ、自動で消える通知
======================================== */

.toast {
  position: fixed;
  bottom: calc(var(--nav-height) + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 13px;
  padding: 10px 20px;
  border-radius: 20px;
  border: 1px solid var(--border-light);
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 500;
  white-space: nowrap;
  pointer-events: none;
}

/* トーストを表示するクラス */
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* ========================================
   11. アニメーション
======================================== */

/* ページ読み込み時のフェードイン */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 点滅するカーソル効果（アクセントカラーの強調要素に使用） */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* グラフのデータ点が表示されるアニメーション */
@keyframes dotPop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

/* ========================================
   12. メディアクエリ（レスポンシブ対応）
   デスクトップで表示したときにスマホ風に見せる
======================================== */
@media (min-width: 480px) {
  /* 480px以上の幅の場合、中央にスマホ幅でレイアウト */
  body {
    display: flex;
    justify-content: center;
    background: #000;
  }

  .screen {
    max-width: 390px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
  }
  
  .screen.active {
    transform: translateX(-50%) translateY(0);
  }
}