/* ==============================================================
 * インスタンス5: paso.tools 共通デザイン
 * --------------------------------------------------------------
 * 4資料で色の持ち方が割れていた（生の色名 --cyan 等 / 役割名 primary 等 / RGB表記）ため、
 * 「生パレット」＋「役割別エイリアス」の2層構成に統合した。
 * 【決定事項4/TODO.md】具体色は既存資料の10色をそのまま維持（変更なし）。
 * 質感（余白・角丸・フォントウェイト）だけ調整余地あり、という前提でトークン化してある。
 * ============================================================== */

:root {
  /* ---- 生パレット（既存サービスのCSSが --cyan 等を直接参照していても壊れないように維持） ---- */
  --cyan: #00A9E0;
  --gray: #2D2D2D;
  --light-gray: #F4F4F4;
  --white: #FFFFFF;
  --magenta: #DA1884;
  --purple: #8031A7;
  --turquoise: #00B2A9;
  --green: #78BE20;
  --yellow: #EEDC00;
  --orange: #FF6A13;

  /* ---- 役割別エイリアス（PasoTodoで決めた命名。新規サービスはこちらを推奨） ----
     状態の意味づけ運用ルール（PasoFlow実績）:
     未処理/要対応=orange, 処理中/報告あり=cyan, 完了/確定=green,
     キャンセル/無効=gray, 注意喚起=yellow, 二次的な強調=magenta/purple/turquoise */
  --color-primary: var(--cyan);
  --color-secondary: var(--purple);
  --color-tertiary: var(--turquoise);
  --color-accent: var(--orange);
  --color-neutral: var(--gray);
  --color-neutral-light: var(--light-gray);
  --color-white: var(--white);
  --color-success: var(--green);
  --color-warning: var(--yellow);
  --color-danger: var(--magenta);

  /* ---- フォント（確定）----
     「全OSに標準搭載、かつ軽い」という要望に対応：Webフォントを一切読み込まず、
     OSごとのシステムフォントに委ねるスタック。Windowsでは実際にMeiryo(またはYu Gothic UI)、
     Macでは游ゴシック相当のヒラギノ角ゴ、Android/ChromeOSではNoto/Robotoが自動的に使われる。
     転送量ゼロ・読み込み待ちゼロで、見た目もMeiryoに近い読みやすさになる。 */
  --font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, system-ui, sans-serif;

  /* ---- インスタンス5b: カラースケール（濃淡） ----
     決定事項11: primary等の役割色に、濃いめ・薄めを数段階持たせる。
     方式: CSS標準の color-mix() で「役割色を何%残しつつ白/黒と混ぜるか」を指定するだけで、
     元の色(--color-primary等)を変えれば自動的に全段階が追従する（手動で色を作り直す必要がない）。
     命名はTailwind等でおなじみの 50(最も薄い)〜900(最も濃い)。500=元の色そのもの。
     メール本文などcolor-mix()が使えない場所では、同じ配合比をPHPで再現した
     hiddens/common/lib/color_scale.php の generate_color_scale() を使うこと。
     ブラウザ対応: color-mix()は主要ブラウザで広くサポート済み。 */
  --color-primary-50:    color-mix(in srgb, var(--color-primary) 8%,  white);
  --color-primary-100:   color-mix(in srgb, var(--color-primary) 16%, white);
  --color-primary-200:   color-mix(in srgb, var(--color-primary) 30%, white);
  --color-primary-300:   color-mix(in srgb, var(--color-primary) 46%, white);
  --color-primary-400:   color-mix(in srgb, var(--color-primary) 66%, white);
  --color-primary-500:   var(--color-primary);
  --color-primary-600:   color-mix(in srgb, var(--color-primary) 88%, black);
  --color-primary-700:   color-mix(in srgb, var(--color-primary) 72%, black);
  --color-primary-800:   color-mix(in srgb, var(--color-primary) 56%, black);
  --color-primary-900:   color-mix(in srgb, var(--color-primary) 40%, black);

  --color-secondary-50:  color-mix(in srgb, var(--color-secondary) 8%,  white);
  --color-secondary-100: color-mix(in srgb, var(--color-secondary) 16%, white);
  --color-secondary-200: color-mix(in srgb, var(--color-secondary) 30%, white);
  --color-secondary-300: color-mix(in srgb, var(--color-secondary) 46%, white);
  --color-secondary-400: color-mix(in srgb, var(--color-secondary) 66%, white);
  --color-secondary-500: var(--color-secondary);
  --color-secondary-600: color-mix(in srgb, var(--color-secondary) 88%, black);
  --color-secondary-700: color-mix(in srgb, var(--color-secondary) 72%, black);
  --color-secondary-800: color-mix(in srgb, var(--color-secondary) 56%, black);
  --color-secondary-900: color-mix(in srgb, var(--color-secondary) 40%, black);

  --color-success-50:    color-mix(in srgb, var(--color-success) 8%,  white);
  --color-success-100:   color-mix(in srgb, var(--color-success) 16%, white);
  --color-success-200:   color-mix(in srgb, var(--color-success) 30%, white);
  --color-success-300:   color-mix(in srgb, var(--color-success) 46%, white);
  --color-success-400:   color-mix(in srgb, var(--color-success) 66%, white);
  --color-success-500:   var(--color-success);
  --color-success-600:   color-mix(in srgb, var(--color-success) 88%, black);
  --color-success-700:   color-mix(in srgb, var(--color-success) 72%, black);
  --color-success-800:   color-mix(in srgb, var(--color-success) 56%, black);
  --color-success-900:   color-mix(in srgb, var(--color-success) 40%, black);

  --color-warning-50:    color-mix(in srgb, var(--color-warning) 8%,  white);
  --color-warning-100:   color-mix(in srgb, var(--color-warning) 16%, white);
  --color-warning-200:   color-mix(in srgb, var(--color-warning) 30%, white);
  --color-warning-300:   color-mix(in srgb, var(--color-warning) 46%, white);
  --color-warning-400:   color-mix(in srgb, var(--color-warning) 66%, white);
  --color-warning-500:   var(--color-warning);
  --color-warning-600:   color-mix(in srgb, var(--color-warning) 88%, black);
  --color-warning-700:   color-mix(in srgb, var(--color-warning) 72%, black);
  --color-warning-800:   color-mix(in srgb, var(--color-warning) 56%, black);
  --color-warning-900:   color-mix(in srgb, var(--color-warning) 40%, black);

  --color-danger-50:     color-mix(in srgb, var(--color-danger) 8%,  white);
  --color-danger-100:    color-mix(in srgb, var(--color-danger) 16%, white);
  --color-danger-200:    color-mix(in srgb, var(--color-danger) 30%, white);
  --color-danger-300:    color-mix(in srgb, var(--color-danger) 46%, white);
  --color-danger-400:    color-mix(in srgb, var(--color-danger) 66%, white);
  --color-danger-500:    var(--color-danger);
  --color-danger-600:    color-mix(in srgb, var(--color-danger) 88%, black);
  --color-danger-700:    color-mix(in srgb, var(--color-danger) 72%, black);
  --color-danger-800:    color-mix(in srgb, var(--color-danger) 56%, black);
  --color-danger-900:    color-mix(in srgb, var(--color-danger) 40%, black);

  --color-neutral-50:    color-mix(in srgb, var(--color-neutral) 8%,  white);
  --color-neutral-100:   color-mix(in srgb, var(--color-neutral) 16%, white);
  --color-neutral-200:   color-mix(in srgb, var(--color-neutral) 30%, white);
  --color-neutral-300:   color-mix(in srgb, var(--color-neutral) 46%, white);
  --color-neutral-400:   color-mix(in srgb, var(--color-neutral) 66%, white);
  --color-neutral-500:   var(--color-neutral);
  --color-neutral-600:   color-mix(in srgb, var(--color-neutral) 88%, black);
  --color-neutral-700:   color-mix(in srgb, var(--color-neutral) 72%, black);
  --color-neutral-800:   color-mix(in srgb, var(--color-neutral) 56%, black);
  --color-neutral-900:   color-mix(in srgb, var(--color-neutral) 40%, black);

  /* ---- 角丸・影 ---- */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 16px;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

  /* ---- レイアウト幅 ----
     PasoFlow実績(480/760)とPasoTodo仕様(600)が不一致。【TODO.md】要すり合わせ。
     ひとまずPasoFlow実績を採用しつつ変数化。 */
  --container-width: 480px;
  --container-width-wide: 760px;

  /* ---- インスタンス5c: ダークモード用セマンティックトークン ----
     「ページ背景」「カード等の面」「文字」「枠線」は、生パレット(--cyan等)や
     役割エイリアス(--color-primary等)とは別に、この4種類のトークンだけを
     テーマ(ライト/ダーク)で切り替える。コンポーネント側は必ずこちらを参照すること
     （var(--color-white)やハードコードした#eee等を直接使わない）。
     こうしておくと、ダークモード対応は下の @media / [data-theme] ブロックで
     このトークンだけを再定義すれば済み、コンポーネントのCSSは一切変更不要になる。 */
  --bg: var(--light-gray);
  --surface: var(--white);
  --text: var(--gray);
  --text-muted: #666666;
  --text-faint: #8A8A8A;
  --border: #E5E5E5;

  /* バナー等「薄い背景+濃い文字」のペア。ライトモードは50番+800番、
     ダークモードは900番+100番に丸ごと入れ替える（下記参照）。
     color-mix()は白/黒との混色なので、単に元の役割色を変えるだけでは
     ライト用の配色がそのまま暗い画面に浮いてしまうため、この中間層で吸収する。 */
  --surface-info-bg:    var(--color-primary-50);
  --surface-info-text:  var(--color-primary-800);
  --surface-success-bg:   var(--color-success-50);
  --surface-success-text: var(--color-success-800);
  --surface-warning-bg:     var(--color-warning-50);
  --surface-warning-text:   var(--color-warning-800);
  --surface-danger-bg:        var(--color-danger-50);
  --surface-danger-text:      var(--color-danger-800);
}

/* ==============================================================
 * ダークモード
 * --------------------------------------------------------------
 * 3状態を明示的に扱う:
 *   1. OSがダーク設定 かつ サイト側の明示指定なし → @media(prefers-color-scheme)だけ発火
 *   2. サイト側で <html data-theme="dark"> を明示 → OS設定に関わらずダーク（下のブロックが上書き）
 *   3. サイト側で <html data-theme="light"> を明示 → OSがダークでもライトのまま
 * 色の実値はここでしか変えない。個々のコンポーネントのCSSはトークン参照のみで、
 * このブロックを触るだけで全ページに反映される。
 * トグルボタンの挙動は js/theme.js、初期反映（ちらつき防止）は header.php 参照。
 * ============================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cyan: #3FC1F2;
    --magenta: #F04FA6;
    --purple: #B07AD1;
    --turquoise: #2FD0C4;
    --green: #8ED15A;
    --yellow: #F0E27A;
    --orange: #FF8A42;

    --bg: #14171B;
    --surface: #1E2328;
    --text: #E8EAED;
    --text-muted: #A6ADB4;
    --text-faint: #7C8792;
    --border: #2E343B;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.35);

    --surface-info-bg:    var(--color-primary-900);
    --surface-info-text:  var(--color-primary-100);
    --surface-success-bg:   var(--color-success-900);
    --surface-success-text: var(--color-success-100);
    --surface-warning-bg:     var(--color-warning-900);
    --surface-warning-text:   var(--color-warning-100);
    --surface-danger-bg:        var(--color-danger-900);
    --surface-danger-text:      var(--color-danger-100);
  }
}
:root[data-theme="dark"] {
  --cyan: #3FC1F2;
  --magenta: #F04FA6;
  --purple: #B07AD1;
  --turquoise: #2FD0C4;
  --green: #8ED15A;
  --yellow: #F0E27A;
  --orange: #FF8A42;

  --bg: #14171B;
  --surface: #1E2328;
  --text: #E8EAED;
  --text-muted: #A6ADB4;
  --text-faint: #7C8792;
  --border: #2E343B;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.35);

  --surface-info-bg:    var(--color-primary-900);
  --surface-info-text:  var(--color-primary-100);
  --surface-success-bg:   var(--color-success-900);
  --surface-success-text: var(--color-success-100);
  --surface-warning-bg:     var(--color-warning-900);
  --surface-warning-text:   var(--color-warning-100);
  --surface-danger-bg:        var(--color-danger-900);
  --surface-danger-text:      var(--color-danger-100);
}

/* ==============================================================
 * クロスブラウザ正規化（リセット）
 * --------------------------------------------------------------
 * Chrome/Safari/Firefoxは既定のスタイル(User Agent Stylesheet)——余白・見出しの
 * フォントサイズ、フォーム部品の見た目、スクロールバーの太さや色——がそれぞれ
 * 微妙に(場合によっては大きく)違う。ここでできる限り打ち消して土台を揃え、
 * その上にこのファイルのコンポーネントを乗せることで「どのブラウザで見ても
 * ほぼ同じ」状態にする。checkbox/radio/rangeのような、下手に上書きすると
 * OSごとの操作感を損ねやすい入力系はあえて対象外にしてある。
 * ============================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%; /* iOS Safariが横向き時に文字サイズを自動で拡大するのを防ぐ */
  text-size-adjust: 100%;
  scrollbar-gutter: stable; /* スクロールバーの出現/消失で幅がガタつくのを防ぐ（対応ブラウザのみ） */
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}
/* 見出しはブラウザ既定のfont-size/font-weightに委ねない
   （h1〜h6の既定サイズはブラウザ間で微妙に違う）。サービス側で必要なサイズを指定する前提。 */
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: 700; }

/* class付きのul/ol（コンポーネント用）はマーカーと既定余白を消す。
   class無しの素のul/ol（記事本文など）はマーカーを残す。 */
ul[class], ol[class] { list-style: none; padding: 0; margin: 0; }

img, picture, video, canvas, svg { display: block; max-width: 100%; }

table { border-collapse: collapse; border-spacing: 0; }

hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

button, input, select, textarea, optgroup {
  font-family: inherit; /* SafariやChromeはフォーム部品にフォントを継承しないため明示 */
  font-size: 100%;
  color: inherit;
  margin: 0;
}
button { cursor: pointer; }

code, kbd, pre, samp {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

/* フォーカスリングの統一（Chromeの太い青枠・Firefoxの点線・Safariの見た目がバラバラなため） */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---- スクロールバー ----
   OS標準の見た目（特にWindows上のChrome/Firefoxで太さ・色が目立って違う）を統一する。
   Firefoxはscrollbar-width/scrollbar-color（標準仕様）、Chrome/Safariは
   ::-webkit-scrollbar系。両方指定しておけば主要ブラウザでほぼ同じ見た目になる。 */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--text-faint) var(--bg);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background-color: var(--text-faint); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--text-muted); }
::-webkit-scrollbar-corner { background: var(--bg); }

/* カード内の一覧など、ページ全体より小さいスクロール領域に付けるユーティリティ（細め・透明トラック） */
.scroll-area {
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--text-faint) transparent;
}
.scroll-area::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-area::-webkit-scrollbar-track { background: transparent; }
.scroll-area::-webkit-scrollbar-thumb { background-color: var(--text-faint); border-radius: 999px; }

body {
  margin: 0;
  font-family: var(--font-family);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6; /* 行間の既定値もブラウザ間で違うため明示 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; /* Mac版Firefoxのアンチエイリアスをwebkit系に近づける */
}

a { color: var(--color-primary); }

/* ---- レイアウト骨格 ---- */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 16px;
}
.container--wide {
  max-width: var(--container-width-wide);
}

/* スクロール検知用のセンチネル(高さだけ持つ透明な要素)。
   これが画面内に見えている間＝ページ最上部にいる、とjs/header.jsが判定する。
   この高さを変えると「どれだけスクロールしたらコンパクト化するか」の閾値が変わる。 */
.page-header__sentinel { height: 0px; }

.page-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--surface);
  border-bottom: 4px solid;
  border-image: linear-gradient(90deg, var(--cyan), var(--magenta), var(--green), var(--orange)) 1;
  padding: 16px;
  transition: padding 0.2s ease;
}
.page-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--container-width-wide);
  margin: 0 auto;
}
.page-header__brand { position: relative; display: flex; align-items: center; gap: 16px; }
.page-header__service-name { font-weight: 700; text-decoration: none; color: var(--text); }
.page-header__nav a { margin-right: 12px; text-decoration: none; color: var(--text); }
.page-header__nav a.is-active { color: var(--color-primary); font-weight: 700; }
.page-header__account { display: flex; align-items: center; gap: 8px; }
.page-header__avatar { width: 28px; height: 28px; border-radius: 50%; }
.page-header__title,
.page-header__subtitle {
  max-width: var(--container-width-wide);
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  transition: max-height 0.2s ease, opacity 0.2s ease, margin-top 0.2s ease;
}
.page-header__title { max-height: 60px; margin-top: 12px; font-size: 1.25rem; }
.page-header__subtitle { max-height: 40px; margin-top: 4px; color: var(--text-muted); font-size: 0.9rem; }

/* ---- コンパクト表示（js/header.jsがスクロール位置に応じて付け外しする） ----
   タイトル/サブタイトルを高さ0に折りたたみ、上下の余白も縮めて「1行だけ」の
   見た目にする。ロゴ・ハンバーガー・テーマ切替・ログイン状態は常に見えたまま。 */
.page-header.is-compact { padding-top: 8px; padding-bottom: 8px; }
.page-header.is-compact .page-header__title,
.page-header.is-compact .page-header__subtitle {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}

/* ---- ハンバーガーメニュー（js/header.jsと対） ----
   広い画面では常に非表示、狭い画面（下のメディアクエリ）でのみ表示される。 */
.page-header__hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-s);
  color: var(--text);
  align-items: center;
}
.page-header__hamburger:hover { background: var(--border); }

@media (max-width: 640px) {
  .page-header__hamburger { display: inline-flex; }
  .page-header__nav {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    min-width: 200px;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow);
    padding: 8px;
    z-index: 901;
  }
  .page-header__nav.is-open { display: flex; }
  .page-header__nav a {
    margin-right: 0;
    padding: 10px 8px;
    border-radius: var(--radius-s);
  }
  .page-header__nav a:hover { background: var(--border); }
  .page-header__username { display: none; } /* 幅が狭い時はアバター/ボタンだけ残し、名前の文字列は隠す */
}

/* ---- テーマ切り替えボタン（js/theme.js と対） ---- */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-s);
  color: var(--text);
  display: inline-flex;
  align-items: center;
}
.theme-toggle:hover { background: var(--border); }
.theme-toggle__icon--moon { display: inline-flex; }
.theme-toggle__icon--sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__icon--moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle__icon--sun { display: inline-flex; }
}
:root[data-theme="dark"] .theme-toggle__icon--moon { display: none; }
:root[data-theme="dark"] .theme-toggle__icon--sun { display: inline-flex; }
:root[data-theme="light"] .theme-toggle__icon--moon { display: inline-flex; }
:root[data-theme="light"] .theme-toggle__icon--sun { display: none; }

.page-footer {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-faint);
  font-size: 0.85rem;
}
.page-footer__inner > * + * { margin-left: 12px; }

/* ---- コンパクトなフッター固定バー（js/footer.jsと対） ----
   本物のフッター(.page-footer)が画面内に入っていない間だけ、画面下部に
   固定で表示される最小限のバー。本物のフッターが見えたら自動的に隠れる。 */
.page-footer-compact {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  font-size: 0.8rem;
  transform: translateY(100%);
  transition: transform 0.2s ease;
}
.page-footer-compact.is-visible { transform: translateY(0); }
.page-footer-compact__link { color: var(--text-faint); text-decoration: none; }
.page-footer-compact__top {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  font-size: 0.9rem;
  padding: 4px 10px;
  border-radius: var(--radius-s);
  line-height: 1;
}
.page-footer-compact__top:hover { background: var(--border); }

/* ---- キラキラ演出のトグル（js/sparkle.js と対、footer.php内） ----
   完全にお遊び機能なので、あえて主張しないよう薄く小さく置く。ONの時だけ色が付く。 */
.page-footer__sparkle-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-s);
  font-size: 0.9rem;
  line-height: 1;
  opacity: 0.45;
  filter: grayscale(1);
}
.page-footer__sparkle-toggle:hover { opacity: 0.8; background: var(--border); }
.page-footer__sparkle-toggle.is-active { opacity: 1; filter: none; }

/* ==============================================================
 * インスタンス6j: マウスキラキラ演出（js/sparkle.js と対）
 * ============================================================== */
.paso-sparkle-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}
.paso-sparkle-particle {
  position: fixed;
  transform: translate(-50%, -50%);
  line-height: 1;
  will-change: transform, opacity;
  animation: paso-sparkle-trail 0.7s ease-out forwards;
}
.paso-sparkle-particle.is-burst { animation: paso-sparkle-burst 0.6s ease-out forwards; }
@keyframes paso-sparkle-trail {
  0% { transform: translate(-50%, -50%) scale(0.4) rotate(0deg); opacity: 1; }
  40% { transform: translate(-50%, -50%) scale(1) rotate(45deg); opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2) rotate(90deg);
    opacity: 0;
  }
}
@keyframes paso-sparkle-burst {
  0% { transform: translate(-50%, -50%) scale(0.3) rotate(0deg); opacity: 1; }
  30% { transform: translate(-50%, -50%) scale(1.1) rotate(60deg); opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0) rotate(180deg);
    opacity: 0;
  }
}

/* ---- 共通コンポーネント（PasoFlowで確立したクラス群） ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 12px;
}

.btn {
  display: inline-block;
  border: none;
  border-radius: var(--radius-s);
  padding: 10px 16px;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.btn-primary   { background: var(--color-primary); color: var(--color-white); }
.btn-secondary { background: var(--color-secondary); color: var(--color-white); }
.btn-success   { background: var(--color-success); color: var(--color-white); }
.btn-danger    { background: var(--color-danger); color: var(--color-white); }
.btn-ghost     { background: transparent; color: var(--text); border: 1px solid var(--border); }
/* hoverは各役割の600番(少し濃い)を使う例。カラースケールの主な使いどころは
   「背景は薄い色(50/100)＋文字は濃い色(700/800)」のバナー・タグ類。 */
.btn-primary:hover   { background: var(--color-primary-600); }
.btn-secondary:hover { background: var(--color-secondary-600); }
.btn-success:hover   { background: var(--color-success-600); }
.btn-danger:hover    { background: var(--color-danger-600); }
.btn-small     { padding: 6px 10px; font-size: 0.85rem; }

/* ---- フォームコントロール ----
   input/textarea/selectはOS・ブラウザごとに高さ・角丸・枠線がバラバラなため、
   共通の外観を明示的に与えて揃える。checkbox/radio/range/file等はOS標準のまま
   （操作感を損ねやすいためあえて上書きしない）。 */
.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
textarea,
select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 10px 12px;
  font-size: 1rem;
  line-height: 1.4;
}
textarea { resize: vertical; min-height: 5.5em; }
select {
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
input::placeholder, textarea::placeholder { color: var(--text-faint); opacity: 1; }
.input:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: var(--color-primary);
  outline: 2px solid var(--color-primary);
  outline-offset: 0;
}
.input:disabled, input:disabled, textarea:disabled, select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
label { display: inline-block; margin-bottom: 4px; font-size: 0.9rem; color: var(--text-muted); }

.pill {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-white);
}
.pill-todo    { background: var(--color-accent); }   /* 未処理・要対応 */
.pill-doing   { background: var(--color-primary); }  /* 処理中・報告あり */
.pill-done    { background: var(--color-success); }  /* 完了・確定 */
.pill-cancel  { background: var(--color-neutral); }  /* キャンセル・無効 */
.pill-warning { background: var(--color-warning); color: var(--color-neutral); } /* 注意喚起 */

.list-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

/* バナー類：薄い背景+濃い文字の組み合わせ。実際の段階(50+800 / 900+100)は
   テーマごとに --surface-*-bg / --surface-*-text 側で切り替わる（上部参照） */
.banner { padding: 12px 16px; border-radius: var(--radius-m); margin-bottom: 12px; }
.banner-info    { background: var(--surface-info-bg);    color: var(--surface-info-text); }
.banner-success { background: var(--surface-success-bg); color: var(--surface-success-text); }
.banner-warning { background: var(--surface-warning-bg); color: var(--surface-warning-text); }
.banner-danger,
.alert-error    { background: var(--surface-danger-bg); color: var(--surface-danger-text); padding: 12px 16px; border-radius: var(--radius-m); }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.tab-btn {
  border: none; background: none; padding: 8px 12px; cursor: pointer;
  border-bottom: 2px solid transparent; font-size: 0.95rem; color: var(--text);
}
.tab-btn.is-active { border-bottom-color: var(--color-primary); color: var(--color-primary); font-weight: 700; }

.detail-box { border: 1px solid var(--border); border-radius: var(--radius-m); }
.detail-box summary { cursor: pointer; padding: 12px; font-weight: 700; color: var(--text); }
.detail-box__body { padding: 0 12px 12px; color: var(--text); }

.total-amount { font-size: 1.5rem; font-weight: 700; color: var(--text); }

/* ==============================================================
 * インスタンス6c: カスタムダイアログ（js/dialog.js と対）
 * ============================================================== */
.paso-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.paso-dialog-overlay.is-open { opacity: 1; }
.paso-dialog-overlay.is-closing { opacity: 0; }

.paso-dialog {
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow);
  padding: 20px;
  width: 100%;
  max-width: 360px;
  transform: translateY(8px) scale(0.98);
  transition: transform 0.15s ease;
}
.paso-dialog-overlay.is-open .paso-dialog { transform: translateY(0) scale(1); }

.paso-dialog--danger .paso-dialog__title { color: var(--color-danger); }

.paso-dialog__title {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 8px;
}
.paso-dialog__body {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  white-space: pre-wrap;
}
.paso-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

/* ==============================================================
 * インスタンス6d: トースト通知（js/toast.js と対）
 * ============================================================== */
.paso-toast-container {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(340px, calc(100vw - 32px));
}

.paso-toast {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-left: 4px solid var(--color-neutral);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow);
  padding: 12px 14px;
  font-size: 0.9rem;
  line-height: 1.5;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.paso-toast.is-open { opacity: 1; transform: translateY(0); }
.paso-toast.is-closing { opacity: 0; transform: translateY(-4px); }

.paso-toast--info    { border-left-color: var(--color-primary); }
.paso-toast--success { border-left-color: var(--color-success); }
.paso-toast--warning { border-left-color: var(--color-warning); }
.paso-toast--danger   { border-left-color: var(--color-danger); }

@media (max-width: 480px) {
  .paso-toast-container {
    left: 16px;
    right: 16px;
    max-width: none;
  }
}

/* ==============================================================
 * インスタンス6e: 読み込みバー（js/progress.js と対）
 * ヘッダーのグラデーション枠と同じ配色にして「Paso Toolsらしさ」を統一 ---- */
.paso-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1200;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.paso-progress.is-active { opacity: 1; }
.paso-progress.is-done { opacity: 0; }
.paso-progress__bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--green), var(--orange));
  transition: width 0.2s ease;
}

/* ==============================================================
 * インスタンス6f/6g: 日付・時刻ピッカーの入力欄（js/datepicker.js, js/timepicker.js と対）
 * ============================================================== */
.paso-datepicker-input,
.paso-timepicker-input {
  cursor: pointer;
  caret-color: transparent; /* readonly入力なのでキャレット(テキストカーソル)を出さない */
  padding-right: 36px;
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.paso-datepicker-input:disabled,
.paso-timepicker-input:disabled { cursor: not-allowed; }
.paso-datepicker-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
}
.paso-timepicker-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E");
}

/* ---- ポップオーバー共通の入れ物 ---- */
.paso-datepicker,
.paso-timepicker {
  position: absolute;
  z-index: 1300;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow);
  padding: 12px;
}

/* ---- 日付ピッカー（カレンダーグリッド、週の始まりは日曜） ---- */
.paso-datepicker { width: 280px; }
.paso-datepicker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.paso-datepicker__label { font-weight: 700; font-size: 0.95rem; }
.paso-datepicker__nav {
  background: none;
  border: none;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-s);
  color: var(--text);
  font-size: 1.15rem;
  line-height: 1;
}
.paso-datepicker__nav:hover { background: var(--border); }
.paso-datepicker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-size: 0.72rem;
  color: var(--text-faint);
  text-align: center;
  margin-bottom: 4px;
}
.paso-datepicker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.paso-datepicker__day {
  aspect-ratio: 1;
  border: none;
  background: none;
  border-radius: var(--radius-s);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.paso-datepicker__day:hover:not(:disabled) { background: var(--border); }
.paso-datepicker__day.is-outside { color: var(--text-faint); }
.paso-datepicker__day.is-today { font-weight: 700; color: var(--color-primary); }
.paso-datepicker__day.is-selected { background: var(--color-primary); color: var(--color-white); }
.paso-datepicker__day.is-disabled { color: var(--text-faint); opacity: 0.4; cursor: not-allowed; }
.paso-datepicker__footer,
.paso-timepicker__footer {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

/* ---- 時刻ピッカー（スクロールホイール、24時間制 HH:MM） ---- */
.paso-timepicker { width: 200px; }
.paso-timepicker__wheels {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px; /* ITEM_HEIGHT(36px) × 5行分。js/timepicker.jsのITEM_HEIGHTと合わせること */
}
.paso-timepicker__col {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* ホイール自体の見た目なので、この領域のスクロールバーは非表示にする */
}
.paso-timepicker__col::-webkit-scrollbar { display: none; }
.paso-timepicker__track { display: flex; flex-direction: column; }
.paso-timepicker__pad { height: 72px; flex-shrink: 0; } /* (180px - 36px) / 2 */
.paso-timepicker__item {
  height: 36px;
  flex-shrink: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--text-faint);
  scroll-snap-align: center;
  font-variant-numeric: tabular-nums;
}
.paso-timepicker__item.is-active { color: var(--text); font-weight: 700; font-size: 1.15rem; }
.paso-timepicker__item.is-disabled { scroll-snap-align: none; opacity: 0.3; pointer-events: none; }
.paso-timepicker__sep { font-weight: 700; padding: 0 4px; color: var(--text); }
.paso-timepicker__highlight {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 36px;
  transform: translateY(-50%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .paso-dialog-overlay,
  .paso-dialog,
  .paso-toast,
  .paso-progress,
  .paso-progress__bar,
  .page-header,
  .page-header__title,
  .page-header__subtitle,
  .page-footer-compact {
    transition: none !important;
  }
  .paso-timepicker__col { scroll-behavior: auto; }
  .paso-sparkle-particle { animation: none !important; display: none !important; }
}