/* ============================================
   ゆうき銀行 - UI Mockup v1
   Bank App / PayPay inspired design
   ============================================ */

/* ============================================
   カラートークン
   light-dark() で1箇所にライト/ダークの値をまとめる。
   （以前は :root と @media(prefers-color-scheme) に同じ値を二重定義していた / issue #019）

   data-theme="dark"  → 強制ダーク
   data-theme="light" → 強制ライト
   属性なし           → OS設定に従う（auto）
   ============================================ */

:root {
  color-scheme: light dark;

  /* Brand colors */
  --primary: light-dark(#1a1a2e, #0a0a15);
  --primary-light: light-dark(#16213e, #12121f);
  --accent: #0f3460;
  --accent-bright: #4361ee;

  /* アクセントの淡い色。--accent-bright を変えると全部追従する
     （以前は rgba(67,97,238,...) が各所に直書きで、色を変えても青が残っていた） */
  --accent-soft: color-mix(in srgb, var(--accent-bright) 8%, transparent);
  --accent-soft-strong: color-mix(in srgb, var(--accent-bright) 14%, transparent);
  --accent-ring: color-mix(in srgb, var(--accent-bright) 22%, transparent);
  --accent-gradient: linear-gradient(135deg,
      var(--accent-bright) 0%,
      color-mix(in srgb, var(--accent-bright) 55%, #2a0a6e) 100%);

  /* Semantic colors */
  --color-plus: light-dark(#00b894, #1ec99f);
  --color-plus-bg: color-mix(in srgb, var(--color-plus) 12%, transparent);
  --color-minus: light-dark(#e17055, #f08a6d);
  --color-minus-bg: color-mix(in srgb, var(--color-minus) 12%, transparent);
  --color-pending: light-dark(#d68910, #fdcb6e);
  --color-pending-bg: color-mix(in srgb, var(--color-pending) 16%, transparent);

  /* Surfaces */
  --bg-body: light-dark(#f5f6fa, #0d0d1a);
  --bg-card: light-dark(#ffffff, #1a1a2e);
  --bg-bottom-nav: light-dark(#ffffff, #1a1a2e);
  --bg-sidebar: light-dark(#1a1a2e, #0a0a15);

  /* ヒーローのグラデーション（gradient は light-dark() を直接使えないので色ごとに定義する） */
  --hero-1: light-dark(#1a1a2e, #0d0d1a);
  --hero-2: light-dark(#16213e, #1a1a2e);
  --hero-3: light-dark(#0f3460, #16213e);
  --bg-hero: linear-gradient(135deg, var(--hero-1) 0%, var(--hero-2) 50%, var(--hero-3) 100%);

  /* Text */
  --text-primary: light-dark(#2d3436, #e4e4f0);
  --text-secondary: light-dark(#636e72, #9a9ab8);
  --text-on-dark: #ffffff;
  --text-on-dark-muted: rgba(255, 255, 255, 0.65);

  /* Borders / interactions */
  --border-subtle: light-dark(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.08));
  --border-input: light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.15));
  --hover-bg: light-dark(rgba(0, 0, 0, 0.025), rgba(255, 255, 255, 0.04));
  --placeholder-color: light-dark(rgba(0, 0, 0, 0.28), rgba(255, 255, 255, 0.3));

  /* Spacing */
  --bottom-nav-height: 64px;
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-top: env(safe-area-inset-top, 0px);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-sm: 0 1px 3px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.4));
  --shadow-md: 0 4px 12px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
  --shadow-lg: 0 8px 24px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.6));
  --shadow-card: 0 2px 8px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.35));
}

/* テーマの強制切り替え（ThemeManager が data-theme を付け外しする） */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* ---- Reset & Base ---- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*
 * hidden 属性を必ず効かせる
 *
 * ブラウザ標準の [hidden] { display: none } は、クラスに書いた display: flex 等に負ける。
 * 作成シートの背景（.create-sheet-overlay）が hidden のまま透明な膜として画面全体を覆い、
 * ログイン後の画面が一切クリックできなくなっていた（2026-09-16）。
 * JS は「hidden を外す → 次のフレームで .show」の順で開くので、フェードは壊れない。
 */
[hidden] {
  display: none !important;
}

/* ---- Icons (絵文字の代替。テキストと同じ感覚でサイズ・色が追従する) ---- */
.icon {
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
  position: relative;
  top: 2px;
}

/* 丸・角丸の枠の中で中央寄せする場合は、行内テキスト用の 2px 補正を打ち消す
   （以前は全アイコン一律で 2px 下がり、丸の中心からズレていた / issue #019） */
.icon-box .icon,
.nav-icon .icon,
.quick-action-icon .icon,
.tx-icon .icon,
.menu-item-icon .icon,
.tool-item-icon .icon,
.detail-icon .icon,
.create-sheet-icon .icon,
.pc-sidebar-icon .icon,
.dash-card .icon,
.view-tab .icon {
  top: 0;
}

/* ---- フォーカス表示（キーボード操作時に現在位置が分かるように） ---- */
:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- モーション設定を尊重する ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans',
    'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  background: var(--bg-body);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---- Layout ---- */
.app-container {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  padding-bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 8px);
}

/* PC: wider layout */
@media (min-width: 768px) {
  .app-container {
    max-width: 960px;
    padding-bottom: 0;
  }
}

@media (min-width: 1200px) {
  .app-container {
    max-width: 1100px;
  }
}

/* ---- Hero / Balance Area ---- */
/* standalone（ホーム画面から起動）ではアドレスバーが無く、
   上端がステータスバーに潜り込むため safe-area 分を足す（issue #014） */
.hero {
  background: var(--bg-hero);
  color: var(--text-on-dark);
  padding: calc(20px + var(--safe-area-top)) 20px 28px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  position: relative;
}

.hero-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.hero-app-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.hero-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}

.hero-user-name {
  font-size: 13px;
  color: var(--text-on-dark-muted);
}

.balance-main {
  text-align: center;
  margin-bottom: 8px;
}

.balance-label {
  font-size: 13px;
  color: var(--text-on-dark-muted);
  margin-bottom: 4px;
}

.balance-amount {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.balance-amount .currency {
  font-size: 20px;
  font-weight: 400;
  margin-right: 2px;
}

/* ---- Quick Actions ---- */
.quick-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}

.quick-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text-on-dark);
  cursor: pointer;
  padding: 4px 8px;
  transition: opacity 0.2s;
}

.quick-action-btn:hover {
  opacity: 0.8;
}

.quick-action-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  backdrop-filter: blur(4px);
}

.quick-action-label {
  font-size: 11px;
  color: var(--text-on-dark-muted);
}

/* ---- メイン残高に NISA 等を含めた額（hero の下の補足 / issue #028） ---- */
.balance-combined {
  margin: 12px 16px 0;
  padding: 12px 16px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.balance-combined-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.balance-combined-label {
  font-size: 13px;
  color: var(--text-secondary);
}

.balance-combined-amount {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.balance-combined-detail {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* ---- ウォレットの合計（タブ・月ごと / issue #028） ---- */
.wallet-totals {
  display: flex;
  gap: 8px;
  margin: 0 16px 4px;
}

.wallet-total {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.wallet-total-label {
  font-size: 11px;
  color: var(--text-secondary);
}

.wallet-total-amount {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wallet-total-amount.plus { color: var(--color-plus); }
.wallet-total-amount.minus { color: var(--color-minus); }

.wallet-totals-note {
  margin: 4px 16px 0;
  font-size: 11px;
  color: var(--text-secondary);
}

/* ---- Taxonomy Cards (Points, Coins, NISA) ---- */
.taxonomy-section {
  padding: 16px 16px 0;
}

.taxonomy-cards {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

.taxonomy-cards::-webkit-scrollbar {
  display: none;
}

.taxonomy-card {
  flex: 0 0 auto;
  width: calc(33.33% - 7px);
  min-width: 120px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 14px;
  box-shadow: var(--shadow-card);
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  border: 1px solid var(--border-subtle);
}

.taxonomy-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.taxonomy-card-name {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.taxonomy-card-amount {
  font-size: 18px;
  font-weight: 700;
}

.taxonomy-card-unit {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 400;
}

.taxonomy-card-arrow {
  float: right;
  color: var(--text-secondary);
  font-size: 14px;
  margin-top: 2px;
}

/* PC: taxonomy cards in a row */
@media (min-width: 768px) {
  .taxonomy-card {
    flex: 1;
    min-width: 0;
  }
}

/* ---- Section ---- */
.section {
  padding: 20px 16px 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.section-title {
  font-size: 16px;
  font-weight: 700;
}

.section-link {
  font-size: 13px;
  color: var(--accent-bright);
  text-decoration: none;
  font-weight: 500;
}

.section-link:hover {
  text-decoration: underline;
}

/* ---- Pending Badge ---- */
.pending-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-pending-bg);
  color: var(--color-minus);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
}

.pending-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-minus);
}

/* ---- Transaction List ---- */
.tx-list {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}

.tx-item {
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
  color: inherit;
}

a.tx-item { text-decoration: none; color: inherit; }

.tx-item:last-child {
  border-bottom: none;
}

.tx-item:hover {
  background: var(--hover-bg);
}

.tx-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-right: 12px;
  flex-shrink: 0;
}

.tx-icon.plus {
  background: var(--color-plus-bg);
  color: var(--color-plus);
}

.tx-icon.minus {
  background: var(--color-minus-bg);
  color: var(--color-minus);
}

.tx-info {
  display: block;
  flex: 1;
  min-width: 0;
}

/* 2行までは折り返して読めるようにする（1行省略で内容が読めなかった / 監査 #54） */
.tx-label {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.tx-meta {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.tx-amount {
  font-size: 15px;
  font-weight: 600;
  text-align: right;
  flex-shrink: 0;
  margin-left: 12px;
}

.tx-amount.plus {
  color: var(--color-plus);
}

.tx-amount.minus {
  color: var(--color-minus);
}

.tx-status-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  font-weight: 600;
  margin-left: 8px;
}

.tx-status-badge.pending {
  background: var(--color-pending-bg);
  color: var(--color-pending);
}

.tx-status-badge.approved {
  background: var(--color-plus-bg);
  color: var(--color-plus);
}

/* ---- Bottom Navigation (Mobile) ---- */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--bottom-nav-height) + var(--safe-area-bottom));
  background: var(--bg-bottom-nav);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding-top: 6px;
  padding-bottom: var(--safe-area-bottom);
  z-index: 1000;
  box-shadow: 0 -2px 10px var(--border-subtle);
}

.bottom-nav-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  min-width: 0;
  min-height: 48px;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 2px;
  font-size: 10px;
  transition: color 0.15s;
  text-decoration: none;
  position: relative;
}

.bottom-nav-item.active {
  color: var(--accent-bright);
}

.bottom-nav-item .nav-icon {
  font-size: 22px;
  line-height: 1;
}

.bottom-nav-item .nav-label {
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}

.bottom-nav-item .nav-badge {
  position: absolute;
  top: 0;
  right: 50%;
  transform: translateX(22px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  background: var(--color-minus);
  color: white;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 中央の作成ボタン（どの画面からも1タップで申請を始められるようにする） */
.bottom-nav-item.is-create {
  color: var(--text-secondary);
}

.bottom-nav-item.is-create .nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: -18px;
  margin-bottom: 2px;
  border-radius: 50%;
  background: var(--accent-bright);
  color: #fff;
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.bottom-nav-item.is-create .icon {
  top: 0; /* 丸の中では .icon の縦位置補正を打ち消す */
}

.bottom-nav-item.is-create.active .nav-icon {
  transform: scale(0.94);
}

/* ---- 作成シート（中央ボタンのメニュー） ---- */
.create-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 2500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease-out;
}

.create-sheet-overlay.show { opacity: 1; }

.create-sheet {
  background: var(--bg-card);
  width: 100%;
  max-width: 480px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 8px 16px calc(16px + var(--safe-area-bottom));
  transform: translateY(20px);
  transition: transform 0.2s ease-out;
  max-height: 85vh;
  overflow-y: auto;
}

.create-sheet-overlay.show .create-sheet { transform: translateY(0); }

.create-sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--border-input);
  margin: 4px auto 12px;
}

.create-sheet-title {
  font-size: 15px;
  font-weight: 700;
  padding: 0 4px 10px;
}

.create-sheet-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border-subtle);
  text-decoration: none;
  color: inherit;
}

.create-sheet-item:last-of-type { border-bottom: none; }
.create-sheet-item:hover { background: var(--hover-bg); }

.create-sheet-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--hover-bg);
  color: var(--accent-bright);
  font-size: 18px;
  flex-shrink: 0;
}

.create-sheet-text { flex: 1; min-width: 0; }
.create-sheet-label { display: block; font-size: 15px; font-weight: 600; }
.create-sheet-desc { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
.create-sheet-arrow { color: var(--text-secondary); font-size: 18px; }

.create-sheet-close {
  width: 100%;
  min-height: 46px;
  margin-top: 12px;
  padding: 12px;
  border: 1.5px solid var(--border-input);
  border-radius: var(--radius-md);
  background: none;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

@media (min-width: 768px) {
  .create-sheet-overlay { align-items: center; padding: 16px; }
  .create-sheet { border-radius: var(--radius-lg); max-width: 420px; padding-bottom: 16px; }
  .create-sheet-handle { display: none; }
}

/* Hide bottom nav on PC */
@media (min-width: 768px) {
  .bottom-nav {
    display: none;
  }
}

/* ============================================
   PC Sidebar Layout (768px+)
   ============================================ */

/* Hide sidebar on mobile */
.pc-sidebar { display: none; }

@media (min-width: 768px) {
  /* ---- Layout wrapper ---- */
  .pc-layout {
    display: flex;
    min-height: 100vh;
  }

  .pc-content {
    flex: 1;
    min-width: 0;
  }

  /* ---- Sidebar ---- */
  .pc-sidebar {
    display: flex;
    flex-direction: column;
    width: 220px;
    flex-shrink: 0;
    background: var(--bg-sidebar);
    height: 100vh;
    position: sticky;
    top: 0;
    overflow-y: auto;
    z-index: 100;
  }

  .pc-sidebar-brand {
    padding: 24px 20px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .pc-sidebar-brand a {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-on-dark);
    text-decoration: none;
    letter-spacing: 0.3px;
  }

  .pc-sidebar-admin-badge {
    font-size: 10px;
    padding: 2px 6px;
    background: rgba(255,255,255,0.15);
    color: var(--text-on-dark);
    border-radius: var(--radius-full);
    font-weight: 700;
    letter-spacing: 0.5px;
  }

  .pc-sidebar-links {
    flex: 1;
    padding: 4px 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .pc-sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-on-dark-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    position: relative;
  }

  .pc-sidebar-link:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-on-dark);
  }

  .pc-sidebar-link.active {
    background: rgba(255,255,255,0.15);
    color: var(--text-on-dark);
  }

  .pc-sidebar-icon {
    font-size: 16px;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
  }

  .pc-sidebar-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-full);
    background: var(--color-minus);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pc-sidebar-divider {
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 8px 12px;
  }

  .pc-sidebar-section-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.35);
    padding: 8px 12px 4px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
  }

  .pc-sidebar-user {
    padding: 14px 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: background 0.15s;
  }

  .pc-sidebar-user:hover {
    background: rgba(255,255,255,0.05);
  }

  .pc-sidebar-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-on-dark);
    flex-shrink: 0;
  }

  .pc-sidebar-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-on-dark);
    line-height: 1.2;
  }

  .pc-sidebar-user-role {
    font-size: 11px;
    color: var(--text-on-dark-muted);
    margin-top: 1px;
  }

  /* ---- Content area adjustments ---- */
  .app-container {
    max-width: 800px;
    padding-bottom: 40px;
  }

  .hero {
    margin: 20px 24px;
    border-radius: var(--radius-lg);
  }

  .taxonomy-section {
    padding-left: 24px;
    padding-right: 24px;
  }

  .section {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* ---- PC 2-column sections grid ---- */
  .pc-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
    padding: 0 24px;
  }

  .pc-2col > .section {
    padding-left: 0;
    padding-right: 0;
  }

  /* ---- Dashboard cards grid (admin) ---- */
  .pc-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 24px;
  }
}

@media (min-width: 1200px) {
  .pc-sidebar {
    width: 240px;
  }

  .app-container {
    max-width: 960px;
  }
}

/* ---- Taxonomy Detail Overlay ---- */
.taxonomy-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 2000;
  align-items: flex-end;
  justify-content: center;
}

.taxonomy-overlay.show {
  display: flex;
}

.taxonomy-sheet {
  background: var(--bg-card);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 20px;
  animation: slideUp 0.25s ease-out;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@media (min-width: 768px) {
  .taxonomy-overlay {
    align-items: center;
  }

  .taxonomy-sheet {
    border-radius: var(--radius-lg);
    max-width: 500px;
    max-height: 60vh;
  }
}

.taxonomy-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.taxonomy-sheet-title {
  font-size: 18px;
  font-weight: 700;
}

.taxonomy-sheet-close {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
}

/* ============================================
   確認ダイアログ / 入力ダイアログ（ui.js）
   ============================================ */
.ui-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 3000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease-out;
  padding: 0;
}

.ui-modal-overlay.show { opacity: 1; }

.ui-modal {
  background: var(--bg-card);
  color: var(--text-primary);
  width: 100%;
  max-width: 480px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 20px 20px calc(16px + var(--safe-area-bottom));
  box-shadow: var(--shadow-lg);
  transform: translateY(16px);
  transition: transform 0.18s ease-out;
}

.ui-modal-overlay.show .ui-modal { transform: translateY(0); }

@media (min-width: 640px) {
  .ui-modal-overlay { align-items: center; padding: 16px; }
  .ui-modal { border-radius: var(--radius-lg); max-width: 420px; padding-bottom: 20px; }
}

.ui-modal-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.ui-modal-body { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.ui-modal-message { margin-bottom: 10px; }

.ui-modal-input {
  width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1.5px solid var(--border-input);
  border-radius: var(--radius-sm);
  background: var(--bg-body);
  color: var(--text-primary);
  font-size: 15px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}

.ui-modal-input:focus {
  outline: none;
  border-color: var(--accent-bright);
}

.ui-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.ui-modal-btn {
  flex: 1;
  min-height: 46px;
  padding: 12px;
  border: none;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.ui-modal-btn.cancel {
  background: var(--hover-bg);
  border: 1.5px solid var(--border-input);
  color: var(--text-secondary);
}

.ui-modal-btn.ok { background: var(--accent-bright); color: #fff; }
.ui-modal-btn.ok.danger { background: var(--color-minus); color: #fff; }
.ui-modal-btn:hover { opacity: 0.88; }

/* 送信中のフォーム */
form.is-submitting button[type="submit"],
form.is-submitting button:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* ---- フォームのエラー表示 ---- */
.form-error {
  color: var(--color-minus);
  font-size: 12px;
  font-weight: 500;
  margin-top: 6px;
}

.is-invalid {
  border-color: var(--color-minus) !important;
}

/* ---- 汎用アラート（警告・注意書き） ---- */
.alert {
  margin: 0 16px 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
}

.alert-warn { background: var(--color-pending-bg); color: #b9770e; }
.alert-error { background: var(--color-minus-bg); color: var(--color-minus); }
.alert-info { background: var(--color-plus-bg); color: var(--color-plus); }

/* ---- ビュー切り替えタブ（ウォレット内の 取引履歴 / 統計） ---- */
.view-tabs {
  display: flex;
  gap: 8px;
  padding: 16px 16px 4px;
}

.view-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-input);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.view-tab:hover { border-color: var(--accent-bright); }

.view-tab.active {
  background: var(--accent-bright);
  color: #fff;
  border-color: var(--accent-bright);
}

/* ---- ステータスタブ（申請の状況） ---- */
.status-tabs {
  display: flex;
  gap: 6px;
  padding: 0 16px 12px;
  overflow-x: auto;
}

.status-tabs::-webkit-scrollbar { display: none; }

.status-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border-input);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}

.status-tab.active {
  background: var(--accent-bright);
  color: #fff;
  border-color: var(--accent-bright);
}

.status-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--hover-bg);
  font-size: 11px;
  font-weight: 700;
}

.status-tab.active .status-tab-count {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* 修飾子に .alert を使うと、画面共通のお知らせ（.alert）の余白・背景まで付いてしまう */
.status-tab-count.count-alert { background: var(--color-minus); color: #fff; }

/* ============================================
   共通コンポーネント
   これまで各ページの <style> に別々に書かれていたものを集約した（issue #019）。
   ページ側で再定義しないこと。
   ============================================ */

/* ---- ページヘッダー（戻る＋タイトル） ---- */
.page-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: calc(20px + var(--safe-area-top)) 16px 12px;
}

.page-header .page-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin-left: -10px;
  font-size: 22px;
  color: var(--accent-bright);
  text-decoration: none;
  line-height: 1;
}

.page-title-h {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.page-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---- 戻るリンク（申請フォーム・詳細ページ共通） ---- */
.page-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  margin-top: calc(8px + var(--safe-area-top));
  color: var(--accent-bright);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.page-back:hover { text-decoration: underline; }

.page-header-bar {
  padding: 4px 16px 8px;
}

.page-header-bar .page-title {
  font-size: 20px;
  font-weight: 700;
}

/* ---- カード（メニュー・詳細などの土台） ---- */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}

/* ---- メニューリスト（アカウント・管理メニュー・ツール） ---- */
.menu-section {
  padding: 0 16px 8px;
}

.menu-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
  padding: 10px 0 6px;
}

.menu-list {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}

.menu-item {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.menu-item:last-child { border-bottom: none; }
.menu-item:hover { background: var(--hover-bg); }

.menu-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  font-size: 18px;
  margin-right: 12px;
  flex-shrink: 0;
  background: var(--hover-bg);
}

.menu-item-icon.blue   { background: var(--accent-soft-strong); color: var(--accent-bright); }
.menu-item-icon.green  { background: var(--color-plus-bg); color: var(--color-plus); }
.menu-item-icon.orange { background: var(--color-pending-bg); color: var(--color-pending); }
.menu-item-icon.purple { background: color-mix(in srgb, #6c5ce7 14%, transparent); color: #6c5ce7; }
.menu-item-icon.cyan   { background: color-mix(in srgb, #4cc9f0 16%, transparent); color: #2aa7cc; }
.menu-item-icon.gray   { background: var(--hover-bg); color: var(--text-secondary); }
.menu-item-icon.red    { background: var(--color-minus-bg); color: var(--color-minus); }

.menu-item-content { flex: 1; min-width: 0; }
.menu-item-title { font-size: 15px; font-weight: 500; }
.menu-item-desc { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
.menu-item-arrow { color: var(--text-secondary); font-size: 16px; margin-left: 8px; flex-shrink: 0; }
.menu-item.logout .menu-item-title { color: var(--color-minus); font-weight: 600; }

/* ---- 詳細カード（取引詳細・資料詳細） ---- */
.detail-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-subtle);
  margin: 0 16px 16px;
  overflow: hidden;
}

.detail-card-title {
  padding: 12px 16px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 14px;
}

.detail-row:last-child { border-bottom: none; }
.detail-row-label { color: var(--text-secondary); font-size: 13px; }
.detail-row-value { font-weight: 500; text-align: right; max-width: 60%; word-break: break-all; }

/* ---- 「すべて見る」行 ---- */
.see-all-btn {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 12px;
  background: none;
  border: none;
  border-top: 1px solid var(--border-subtle);
  color: var(--accent-bright);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}

.see-all-btn:hover { background: var(--accent-soft); }

/* ---- フィルタタブ ---- */
.filter-tabs {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  overflow-x: auto;
}

.filter-tabs::-webkit-scrollbar { display: none; }

.filter-tab {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border-input);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.filter-tab:hover { border-color: var(--accent-bright); }

.filter-tab.active {
  background: var(--accent-bright);
  color: #fff;
  border-color: var(--accent-bright);
}

/* ---- 空状態 ---- */
.empty-state {
  text-align: center;
  padding: 40px 16px;
  color: var(--text-secondary);
  font-size: 14px;
}

.empty-state-icon {
  font-size: 32px;
  color: var(--text-secondary);
  opacity: 0.4;
  margin-bottom: 10px;
}

.empty-state-cta {
  display: inline-block;
  min-height: 44px;
  margin-top: 14px;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  background: var(--accent-bright);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.empty-state-cta:hover { opacity: 0.88; }

/* ---- 月別グループの見出し ---- */
.history-date-group {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 14px 0 6px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

/* 月見出しの右に出す小計（ウォレット / issue #028） */
.history-date-subtotal {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ============================================
   PWA（インストール導線・更新通知）
   ============================================ */
.pwa-update-bar {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 12px);
  transform: translateX(-50%);
  z-index: 2600;
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% - 32px);
  max-width: 420px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--text-on-dark);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
}

.pwa-update-text { flex: 1; }

.pwa-update-btn {
  min-height: 36px;
  padding: 8px 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent-bright);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

@media (min-width: 768px) {
  .pwa-update-bar { bottom: 20px; }
}

.pwa-install-btn {
  width: 100%;
  min-height: 48px;
  padding: 14px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--accent-bright);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.pwa-install-btn:hover { opacity: 0.88; }
.pwa-install-btn:disabled { opacity: 0.5; cursor: default; }

.pwa-install-done {
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--color-plus-bg);
  color: var(--color-plus);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.pwa-install-steps {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.8;
}

.pwa-install-steps-title {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.pwa-install-steps ol {
  padding-left: 1.4em;
}

/* ---- Utility ---- */
.text-plus { color: var(--color-plus); }
.text-minus { color: var(--color-minus); }
.text-muted { color: var(--text-secondary); }
.text-center { text-align: center; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }

/* ---- Empty State ---- */
.empty-state {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-secondary);
  font-size: 14px;
}

/* ============================================
   ダークモードの個別パッチは廃止。
   色は :root の light-dark() トークンで一元管理する（issue #019）
   ============================================ */