/* ==========================================
   なごやポイント 共通デザインシステム
   ==========================================
   方針:
   - フォントは Zen Maru Gothic（丸みがあり親しみやすいが、幼稚になりすぎない）
   - 配色は indigo=基本操作／emerald=入金・成功／rose=出金・危険／amber=注意 に統一
   - Tailwind CDNのユーティリティ（flex/grid/spacing等）はそのまま併用し、
     ここでは Tailwind だけでは表現しづらい「質感」（影・余白の呼吸・グラデーション・
     フォーカスリング・スクロールバー等）だけを補う
*/

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&display=swap');

:root {
  --brand-indigo-50: #EEF0FF;
  --brand-indigo-600: #4F46E5;
  --brand-indigo-700: #3F37C9;
  --brand-ink: #211F3D;
}

html, body {
  font-family: 'Zen Maru Gothic', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', sans-serif;
}

body {
  background: linear-gradient(180deg, #F8F7FC 0%, #F3F2FA 100%);
  color: var(--brand-ink);
}

/* 見出し・強調文字にわずかに字間を足して、丸ゴシックが間延びしないようにする */
h1, h2, h3, .brand-mark { letter-spacing: 0.02em; }

/* ブランドの「なごやポイント」ロゴ的な見せ方 */
.brand-mark {
  background: linear-gradient(120deg, #FFFFFF 0%, #E0E7FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Tailwindの shadow-* より柔らかく、色味に少し藍色を混ぜた「上質な」影 */
.shadow-soft {
  box-shadow: 0 1px 2px rgba(33, 31, 61, 0.04), 0 8px 24px -4px rgba(33, 31, 61, 0.10);
}
.shadow-soft-lg {
  box-shadow: 0 4px 8px rgba(33, 31, 61, 0.06), 0 24px 48px -12px rgba(33, 31, 61, 0.18);
}

/* ヘッダー用の落ち着いたグラデーション（ページごとに色相だけ変えて使う） */
.header-indigo {
  background: linear-gradient(135deg, #3F37C9 0%, #4F46E5 55%, #6366F1 100%);
}
.header-slate {
  background: linear-gradient(135deg, #1E1B3A 0%, #302C5C 100%);
}

/* カードのホバー時のわずかな浮き上がり（PC操作時の質感向上） */
.card-lift {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card-lift:hover {
  transform: translateY(-2px);
}

/* フォーカスリングをブランドカラーに統一（デフォルトの太い青リングより上品に） */
:focus-visible {
  outline: 2px solid var(--brand-indigo-600);
  outline-offset: 2px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
}

/* スクロールバーの質感（対応ブラウザのみ・非対応でも害はない） */
* {
  scrollbar-width: thin;
  scrollbar-color: #C7C4E8 transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #C7C4E8; border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ボタン共通のプレス感（active:scale-95 と併用してさらに滑らかに） */
button {
  font-family: inherit;
  transition-property: transform, background-color, box-shadow, opacity, border-color;
}

/* アイコンを丸いバッジの中に収めて「絵文字の羅列」感を減らす */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.icon-badge-lg { width: 3rem; height: 3rem; font-size: 1.5rem; }

/* ==========================================
   スマホ（iPhone）向けの土台調整
   ==========================================
   - iOSのSafariはinputのfont-sizeが16px未満だとフォーカス時に
     画面が勝手にズームインしてしまうため、フォーム部品は最低16pxに固定する
     （見た目の大きさはpaddingで調整すればよく、文字サイズ自体は縮めない）
*/
input, select, textarea {
  font-size: 16px !important;
}

/* Dynamic Island・ノッチ・ホームインジケータの領域にコンテンツが被らないようにする
   ヘルパー。使う側で `padding-top: calc(1rem + env(...))` のように既存の余白に足して使う */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* タップ時の灰色フラッシュを消し、代わりに active:scale-95 等の自前の押下感に統一する */
button, a {
  -webkit-tap-highlight-color: transparent;
}

/* iOSでのタップ操作時に文字列が意図せず選択されるのを防ぐ（ボタン・ラベル類） */
button, .no-select {
  -webkit-user-select: none;
  user-select: none;
}