/* ============================================================
 * base.css
 * --------------------------------------------------------------
 * 役割: CSS変数（:root）・ベースリセット・ヘッダー静的スタイル
 * 依存: なし（最初に読み込む）
 * 変更時の注意:
 *   - カラーパレット・フォント変数はここで一元管理
 *   - ヘッダーロゴは静的（アニメ禁止・CLAUDE.md ルール #5）
 * 元: ui/index.html L19-64
 * ============================================================ */

@font-face {
  font-family: 'Comfortaa';
  src: url('/assets/fonts/Comfortaa-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --level-4: #37359a; /* 上位10%未満 */
  --level-3: #6c69b4; /* 上位30%未満 */
  --level-2: #c4c3d7; /* 上位60%未満 */
  --level-1: #e8e8e8; /* 上位60%以上 */
  --level-highlight: #fddc03;
  --header-h: 52px; /* padding:6px×2 + svg:40px（モバイルは mobile.css で上書き） */
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Hiragino Sans', 'BIZ UDPGothic', 'Yu Gothic UI', 'Meiryo', sans-serif; background: #f0f0f0; color: #222; line-height: 1.5; font-size: 13px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* クロスドキュメント View Transitions（Chrome 126+）*/
@view-transition { navigation: auto; }

/* ハンバーガーボタン共通（dashboard / account 両ページで使用） */
.btn-menu { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: transparent; border: 1px solid rgba(255,255,255,0.4); color: #fff; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; padding: 0; transition: background 0.15s, border-color 0.15s; }
.btn-menu:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); }
.btn-menu-bar { display: block; width: 16px; height: 1.5px; background: #fff; border-radius: 2px; transform-origin: center; transition: transform 0.25s cubic-bezier(0.23,1,0.32,1), opacity 0.2s ease; }

/* ヘッダー＋フィルタ を一体で固定（ラッパーでsticky） */
.top-stack { position: sticky; top: 0; z-index: 50; }
.header { background: #807e7c; color: #fff; padding: 6px 20px; display: flex; align-items: center; justify-content: space-between; gap: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.header .logo { height: 32px; display: block; }

/* ===== ヘッダーロゴ（固定・アニメなし） ===== */
.logo-animated { display: flex; align-items: center; gap: 10px; }
.logo-animated svg { width: 40px; height: 40px; overflow: visible; }
.logo-animated .logo-text { color: #fff; font-size: 20px; font-weight: 700; letter-spacing: 0.5px; font-family: 'Comfortaa', sans-serif; }