/* フリマProカラーパレット - グレージュテーマ */

:root {
  /* 薄いコーラル テーマカラー（クロスポストボタン固定色） */
  --frima-pro-coral-button: #ffc2a3;           /* 薄いコーラル - ボタン背景 */
  --frima-pro-coral-button-hover: #ff9f73;     /* 薄いコーラル - ボタンホバー */
  --frima-pro-coral-tab: #ffe0cc;              /* 薄いコーラル - タブ背景 */
  --frima-pro-coral-tab-active: #ffc2a3;       /* 薄いコーラル - アクティブタブ */
  --frima-pro-coral-tab-hover: #ffcfb3;        /* 薄いコーラル - タブホバー */
  --frima-pro-coral-text: #8b5a2b;             /* 薄いコーラル - テキスト色 */
  --frima-pro-coral-content: #fff9f5;          /* 薄いコーラル - コンテンツ背景 */
  
  /* プライマリコーラルカラー（統一テーマ） */
  --frima-pro-primary-dark: var(--frima-pro-coral-text);     /* コーラル系テキスト - メインテキスト・ブランドカラー */
  --frima-pro-primary-light: var(--frima-pro-coral-tab-active); /* コーラルアクティブ - アクティブ背景・プライマリボタン */
  
  /* セカンダリコーラルカラー */
  --frima-pro-background-light: var(--frima-pro-coral-button); /* 背景用コーラル */
  --frima-pro-hover: var(--frima-pro-coral-tab-hover);        /* ホバー用コーラル */
  --frima-pro-border: var(--frima-pro-coral-button);          /* ボーダー用コーラル */
  --frima-pro-border-dark: var(--frima-pro-coral-button-hover); /* ダークボーダー用コーラル */
  --frima-pro-accent-dark: var(--frima-pro-coral-button-hover);  /* アクセント用ダークコーラル */
  --frima-pro-text-dark: #333333;                 /* ダークテキスト */
  --frima-pro-text-secondary: var(--frima-pro-coral-text);  /* サブテキスト用コーラル */
  
  /* 機能別カラー */
  --frima-pro-success: #2ed573;                /* 成功・再開ボタン */
  --frima-pro-success-hover: #26de66;          /* 成功・再開ボタンホバー */
  --frima-pro-warning: #ffa502;                /* 警告・停止ボタン */
  --frima-pro-warning-hover: #ff9500;          /* 警告・停止ボタンホバー */
  --frima-pro-danger: #ff4757;                 /* 危険・削除ボタン */
  --frima-pro-danger-hover: #ff3742;           /* 危険・削除ボタンホバー */
  --frima-pro-info: #5f27cd;                   /* 情報・編集ボタン */
  --frima-pro-info-hover: #4a1f9f;             /* 情報・編集ボタンホバー */
  --frima-pro-neutral: #747d8c;                /* ニュートラル・出品削除ボタン */
  --frima-pro-neutral-hover: #57606f;          /* ニュートラル・出品削除ボタンホバー */
  
  /* 無効化状態 */
  --frima-pro-disabled-bg: #cccccc;            /* 無効化背景 */
  --frima-pro-disabled-text: #666666;          /* 無効化テキスト */
  
  /* 背景・ニュートラルカラー */
  --frima-pro-white: #ffffff;                  /* 背景白 */
  --frima-pro-bg-gray: var(--frima-pro-coral-content); /* 背景コーラル */
  --frima-pro-bg-light: var(--frima-pro-coral-tab);    /* 薄い背景コーラル */
  --frima-pro-header-hover: #f8f9fa;           /* ヘッダーメニューホバー用 */
  --frima-pro-bg-gradient: linear-gradient(135deg, #f5f5f5 0%, #ebebeb 25%, #e1e1e1 75%, #d6d6d6 100%); /* メイン背景グラデーション */
  
  /* ヘッダー専用カラー（グレー・黒系） */
  --frima-pro-header-bg: #ffffff;              /* ヘッダー背景 */
  --frima-pro-header-text: #2c3e50;            /* ヘッダーテキスト（濃いグレー） */
  --frima-pro-header-link: #34495e;            /* ヘッダーリンク（グレー） */
  --frima-pro-header-link-hover: #ecf0f1;      /* ヘッダーリンクホバー背景（薄いグレー） */
  --frima-pro-header-link-active: #2c3e50;     /* アクティブリンク背景（濃いグレー） */
  --frima-pro-header-link-active-text: #ffffff; /* アクティブリンクテキスト（白） */
  
  /* ボーダー */
  --frima-pro-border-light: #e5e5e5;           /* 薄いボーダー */
  --frima-pro-border-standard: 1px solid var(--frima-pro-border-light);
  --frima-pro-border-bottom: 2px solid var(--frima-pro-border-light);
  --frima-pro-border-section: 2px solid #f0f0f0; /* セクション区切り用 */
  
  /* シャドウ */
  --frima-pro-shadow-light: 0 2px 8px rgba(180, 170, 160, 0.10);
  --frima-pro-shadow-hover: 0 1px 4px 0 rgba(180, 170, 160, 0.08);
  --frima-pro-shadow-active: 0 -2px 8px 0 rgba(180, 170, 160, 0.10);
  
  /* レイアウト */
  --frima-pro-radius: 6px;                     /* 基本的な角丸 */
  --frima-pro-radius-small: 4px;               /* 小さい角丸 */
  --frima-pro-radius-large: 12px;              /* 大きい角丸 */
  --frima-pro-header-height: 72px;             /* ヘッダーの高さ */
  --frima-pro-spacing-large: 40px;             /* 大きなスペーシング */
  
  /* フォント */
  --frima-pro-font-family: inherit, 'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif;
  --frima-pro-font-weight-normal: 500;
  --frima-pro-font-weight-bold: 700;
  --frima-pro-font-size-button: 12px;
  --frima-pro-font-size-button-large: 14px;
  --frima-pro-font-size-base: 16px;
  --frima-pro-font-size-small: 15px;
  
  /* トランジション */
  --frima-pro-transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --frima-pro-transition-fast: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --frima-pro-transition-header: background-color 0.2s ease;
  --frima-pro-transition-full: background 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* トグルアニメーション用トランジション - 開く時と閉じる時両方で見やすいエフェクト */
  --frima-pro-toggle-expand: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  --frima-pro-toggle-collapse: 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --frima-pro-toggle-expand-full: max-height 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  --frima-pro-toggle-collapse-full: max-height 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  /* シャドウ - リッチなふわっとエフェクト用 */
  --frima-pro-shadow-soft: 0 2px 8px rgba(110, 98, 89, 0.1);
  --frima-pro-shadow-hover: 0 8px 32px rgba(110, 98, 89, 0.2), 0 4px 16px rgba(110, 98, 89, 0.15);
  --frima-pro-shadow-danger-hover: 0 8px 32px rgba(220, 38, 38, 0.3), 0 4px 16px rgba(220, 38, 38, 0.2);
}

/* 共通ボタンスタイル */
.frima-pro-button {
  background-color: var(--frima-pro-background-light);
  color: var(--frima-pro-primary-dark);
  border: 1.5px solid var(--frima-pro-border);
  border-radius: var(--frima-pro-radius);
  font-family: var(--frima-pro-font-family);
  font-weight: var(--frima-pro-font-weight-bold);
  box-shadow: none;
  transition: var(--frima-pro-transition-full);
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.frima-pro-button:hover {
  background-color: var(--frima-pro-border-dark);
  color: var(--frima-pro-white);
  border-color: var(--frima-pro-accent-dark);
  box-shadow: var(--frima-pro-shadow-hover);
}

/* ボタンサイズバリエーション */
.frima-pro-button--large {
  width: 100%;
  max-width: 260px;
  min-width: 140px;
  height: 80px;
  margin: 8px auto;
  padding: 0 48px;
  font-size: 16px;
}


.frima-pro-button--medium {
  min-width: 80px;
  height: 40px;
  padding: 8px 16px;
  font-size: var(--frima-pro-font-size-button-large);
}

.frima-pro-button--small {
  min-width: 48px;
  height: 36px;
  padding: 0 12px;
  font-size: var(--frima-pro-font-size-button);
  font-weight: var(--frima-pro-font-weight-normal);
}

/* 共通基本スタイル（旧common.cssから移行） */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--frima-pro-font-family);
  line-height: 1.6;
  color: var(--frima-pro-text-dark);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--frima-pro-primary-light);
  color: var(--frima-pro-text-dark);
  text-decoration: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: var(--frima-pro-transition);
}

.button:hover {
  background-color: var(--frima-pro-hover);
}

.card {
  background: var(--frima-pro-white);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}