@charset "UTF-8";
/* ========================================
   カラー定義（CSS変数）
   ======================================== */
:root {
  /* メインカラー */
  --color-primary: #4a90e2;
  --color-success: #7ed321;
  --color-warning: #f5a623;
  --color-danger: #d0021b;
  --color-info: #9013fe;

  /* メインカラー */
  --color-u-base: #f4f7fc;
  --color-u-primary: #4a5567;
  --color-u-secondary: #8a8f9a;
  --color-u-line-gray: #e5e5e5;
  --color-u-gray: #f5f5f5;
  --color-u-category-pink: #fba5a5;
  --color-u-category-blue: #4cb2da;
  --color-u-category-yellow: #e9eb56;
  --color-u-category-green: #53da75;
  --color-u-amount-bg: #f6f7f9;

  /* グレースケール */
  --color-white: #ffffff;
  --color-light-gray: #f5f5f5;
  --color-gray: #cccccc;
  --color-dark-gray: #666666;
  --color-black: #333333;

  /* BANKカラー */
  --color-bank-y: #31bbe5;
  --color-bank-l: #e5319d;
  --color-bank-l-business: #e58e31;
  --color-bank-k: #d6e531;

  /* 状態カラー */
  --color-active: #2e7d32;
  --color-disabled: #bdbdbd;

  /* 余白（8px基準） */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;

  /* フォントサイズ */
  --font-ss: 10px;
  --font-xs: 12px;
  --font-sm: 14px;
  --font-base: 16px;
  --font-lg: 20px;
  --font-xl: 24px;
  --font-xxl: 32px;

  /* フォントウェイト */
  --font-thin: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-bold: 700;
}

/* ========================================
   リセット
   ======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial,
    sans-serif;
  font-size: var(--font-base);
  color: var(--color-black);
  background-color: var(--color-light-gray);
  line-height: 1.6;
}

/* ========================================
   Margin ユーティリティ
   ======================================== */
.u-mt-xs {
  margin-top: var(--space-xs);
}
.u-mt-sm {
  margin-top: var(--space-sm);
}
.u-mt-md {
  margin-top: var(--space-md);
}
.u-mt-lg {
  margin-top: var(--space-lg);
}
.u-mt-xl {
  margin-top: var(--space-xl);
}
.u-mt-xxl {
  margin-top: var(--space-xxl);
}

.u-mb-xs {
  margin-bottom: var(--space-xs);
}
.u-mb-sm {
  margin-bottom: var(--space-sm);
}
.u-mb-md {
  margin-bottom: var(--space-md);
}
.u-mb-lg {
  margin-bottom: var(--space-lg);
}
.u-mb-xl {
  margin-bottom: var(--space-xl);
}
.u-mb-xxl {
  margin-bottom: var(--space-xxl);
}

.u-ml-xs {
  margin-left: var(--space-xs);
}
.u-ml-sm {
  margin-left: var(--space-sm);
}
.u-ml-md {
  margin-left: var(--space-md);
}
.u-ml-lg {
  margin-left: var(--space-lg);
}

.u-mr-xs {
  margin-right: var(--space-xs);
}
.u-mr-sm {
  margin-right: var(--space-sm);
}
.u-mr-md {
  margin-right: var(--space-md);
}
.u-mr-lg {
  margin-right: var(--space-lg);
}

.u-m-xs {
  margin: var(--space-xs);
}
.u-m-sm {
  margin: var(--space-sm);
}
.u-m-md {
  margin: var(--space-md);
}
.u-m-lg {
  margin: var(--space-lg);
}

/* ========================================
   Padding ユーティリティ
   ======================================== */
.u-pt-xs {
  padding-top: var(--space-xs);
}
.u-pt-sm {
  padding-top: var(--space-sm);
}
.u-pt-md {
  padding-top: var(--space-md);
}
.u-pt-lg {
  padding-top: var(--space-lg);
}

.u-pb-xs {
  padding-bottom: var(--space-xs);
}
.u-pb-sm {
  padding-bottom: var(--space-sm);
}
.u-pb-md {
  padding-bottom: var(--space-md);
}
.u-pb-lg {
  padding-bottom: var(--space-lg);
}

.u-pl-xs {
  padding-left: var(--space-xs);
}
.u-pl-sm {
  padding-left: var(--space-sm);
}
.u-pl-md {
  padding-left: var(--space-md);
}
.u-pl-lg {
  padding-left: var(--space-lg);
}

.u-pr-xs {
  padding-right: var(--space-xs);
}
.u-pr-sm {
  padding-right: var(--space-sm);
}
.u-pr-md {
  padding-right: var(--space-md);
}
.u-pr-lg {
  padding-right: var(--space-lg);
}

.u-p-xs {
  padding: var(--space-xs);
}
.u-p-sm {
  padding: var(--space-sm);
}
.u-p-md {
  padding: var(--space-md);
}
.u-p-lg {
  padding: var(--space-lg);
}
.u-p-xl {
  padding: var(--space-xl);
}

/* ========================================
   カラー ユーティリティ
   ======================================== */
.u-color-primary {
  color: var(--color-primary);
}
.u-color-success {
  color: var(--color-success);
}
.u-color-warning {
  color: var(--color-warning);
}
.u-color-danger {
  color: var(--color-danger);
}
.u-color-gray {
  color: var(--color-dark-gray);
}

.u-bg-primary {
  background-color: var(--color-primary);
}
.u-bg-success {
  background-color: var(--color-success);
}
.u-bg-warning {
  background-color: var(--color-warning);
}
.u-bg-light-gray {
  background-color: var(--color-light-gray);
}
.u-bg-white {
  background-color: var(--color-white);
}

/* ========================================
   テキスト ユーティリティ
   ======================================== */
.u-text-center {
  text-align: center;
}
.u-text-left {
  text-align: left;
}
.u-text-right {
  text-align: right;
}
.u-text-bold {
  font-weight: var(--font-bold);
}
.u-text-medium {
  font-weight: var(--font-medium);
}

.u-text-ss {
  font-size: var(--font-ss);
}

.u-text-xs {
  font-size: var(--font-xs);
}
.u-text-sm {
  font-size: var(--font-sm);
}
.u-text-base {
  font-size: var(--font-base);
}
.u-text-lg {
  font-size: var(--font-lg);
}
.u-text-xl {
  font-size: var(--font-xl);
}
.u-text-xxl {
  font-size: var(--font-xxl);
}

/* ========================================
   Display / Flexbox ユーティリティ
   ======================================== */
.u-flex {
  display: flex;
}
.u-flex-column {
  flex-direction: column;
}
.u-flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.u-flex-between {
  display: flex;
  justify-content: space-between;
}
.u-flex-wrap {
  flex-wrap: wrap;
}

.u-hidden {
  display: none;
}
.u-block {
  display: block;
}

/* ========================================
   その他 ユーティリティ
   ======================================== */
.u-shadow-sm {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.u-shadow-md {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.u-rounded {
  border-radius: 8px;
}
.u-rounded-lg {
  border-radius: 16px;
}

.u-border {
  border: 1px solid var(--color-gray);
}