/* 共通CSS変数とベーススタイル */

/* 統一CSS変数定義 */
:root { 
  /* 基本カラーパレット（ランディング・結果画面用） */
  --primary-base: #77C93C;
  --primary-base-light: #A2E044;
  --primary-base-dark: #69A730;
  
  /* アンケート・プロフィール画面用カラー */
  --primary-survey: #5D9534;
  --primary-survey-light: #7FB069;
  --primary-survey-dark: #4A7A2A;
  
  /* 後方互換性のため、デフォルトはランディング用 */
  --primary: var(--primary-base);
  --primary-light: var(--primary-base-light);
  --primary-dark: var(--primary-base-dark);
  
  /* 共通カラー */
  --secondary: #8B4513;
  --accent: #F4C223;
  --accent-dark: #9C7B13;
  --gold: #F4C223;
  --gold-shadow: #9C7B13;
  
  /* 背景色 */
  --background: #F8F9FA;
  --surface: #FFFFFF;
  --bg-green-tint: #FAFDEA;
  
  /* ボーダーとシャドウ */
  --border: #E9ECEF;
  
  /* 基本シャドウ（ランディング・結果画面用） */
  --shadow-base: 0 2px 8px rgba(119, 201, 60, 0.1);
  --shadow-base-hover: 0 4px 16px rgba(119, 201, 60, 0.2);
  
  /* アンケート・プロフィール画面用シャドウ */
  --shadow-survey: 0 2px 8px rgba(93, 149, 52, 0.1);
  --shadow-survey-hover: 0 4px 16px rgba(93, 149, 52, 0.2);
  
  /* 後方互換性のため、デフォルトはランディング用 */
  --shadow: var(--shadow-base);
  --shadow-hover: var(--shadow-base-hover);
  
  /* テキスト色 */
  --text-primary-base: #070E07;        /* ランディング・結果画面用 */
  --text-primary-survey: #212529;      /* アンケート・プロフィール画面用 */
  --text-secondary: #6C757D;           /* 共通 */
  --text-black: #1A1A1A;               /* 共通 */
  
  /* 後方互換性のため、デフォルトはランディング用 */
  --text-primary: var(--text-primary-base);
  
  /* ステータス色 */
  --success: #28A745;
  --warning: #FFC107;
  --error: #DC3545;
  
  /* レスポンシブブレークポイント */
  --mobile-max: 768px;
  --tablet-min: 769px;
  --tablet-max: 1199px;
  --desktop-min: 1200px;
  --large-desktop-min: 1440px;
  
  /* 統一コンテナサイズ */
  --container-mobile: 393px;
  --container-tablet: 800px;
  --container-desktop: 1200px;
  --container-large: 1440px;
  
  /* デスクトップビューポート高さ（Figma準拠） */
  --desktop-viewport-height: 1024px; /* Figma標準デスクトップサイズ 1440x1024 */
  --desktop-content-height: 900px; /* ヘッダー・余白を考慮したコンテンツエリア */
  --desktop-frame-width: 1440px; /* Figmaデスクトップフレーム幅 */
}

/* 基本設定 */
* { 
  box-sizing: border-box; 
}

/* iOS Safari対応: 100vhの代替 */
html {
  height: -webkit-fill-available;
}

body { 
  font-family: 'Noto Sans JP', system-ui, -apple-system, sans-serif; 
  margin: 0; 
  background: var(--background);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

/* Safe Area対応（ノッチやダイナミックアイランド） */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* 共通レスポンシブユーティリティ */
.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

@media (max-width: 768px) {
  .container {
    max-width: var(--container-mobile);
    padding: 0 16px;
  }
}

@media (min-width: 769px) and (max-width: 1199px) {
  .container {
    max-width: var(--container-tablet);
    padding: 0 40px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: var(--container-desktop);
    padding: 0 60px;
  }
}

@media (min-width: 1440px) {
  .container {
    max-width: var(--container-large);
    padding: 0 80px;
  }
}

/* 共通ボタンスタイル */
.btn-base {
  appearance: none; 
  border: none;
  cursor: pointer; 
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
  line-height: 1.2;
  border-radius: 25px;
  padding: 14px 28px;
  box-shadow: var(--shadow);
}

.btn-primary {
  background: var(--primary); 
  color: white;
}

.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.btn-primary:active {
  transform: translateY(0) scale(0.98);
  transition: all 0.1s ease;
}

.btn-outline {
  background: transparent; 
  color: var(--primary); 
  border: 2px solid var(--primary);
}

.btn-outline:hover {
  background: var(--primary);
  color: white;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* 共通Figmaボタンコンポーネント */
.figma-button-container {
  position: relative;
  margin: 20px auto;
  width: 348px;
  height: 54px;
}

.figma-button {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.figma-button:hover {
  transform: translateY(-2px);
}

.figma-button:active {
  transform: translateY(0);
}

.figma-button-shadow {
  position: absolute;
  top: 5.29px;
  left: 0;
  width: 100%;
  height: 45.21px;
  background: var(--primary-dark);
  border-radius: 8px;
}

.figma-button-main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 45.21px;
  background: var(--primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.figma-button-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4479999542236328;
  color: #FFFFFF;
  text-align: center;
}

/* 共通カードスタイル */
.card-base { 
  background: var(--surface);
  border: 1px solid var(--border); 
  border-radius: 16px; 
  padding: 24px; 
  margin-bottom: 24px;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
}

.card-base:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* 共通アニメーション（ボタン位置問題解決のため無効化） */
.fade-in {
  /* animation: fadeIn 0.5s ease-in; */
  /* アニメーション無効化 */
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.slide-in {
  /* animation: slideIn 0.3s ease-out; */
  /* アニメーション無効化 */
}

@keyframes slideIn {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* 共通フォームスタイル */
.form-input-base {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--border);
  border-radius: 12px;
  font-size: 16px;
  transition: all 0.3s ease;
  background: var(--surface);
  font-family: inherit;
}

.form-input-base:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(119, 201, 60, 0.1);
}

.form-input-base::placeholder {
  color: var(--text-secondary);
}

/* 統一タイポグラフィスタイル */
.heading-xl {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 24px;
}

.heading-lg {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 20px;
}

.heading-md {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 16px;
}

.heading-sm {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 12px;
}

.text-lg {
  font-size: 18px;
  line-height: 1.6;
}

.text-base {
  font-size: 16px;
  line-height: 1.6;
}

.text-sm {
  font-size: 14px;
  line-height: 1.5;
}

.text-xs {
  font-size: 12px;
  line-height: 1.4;
}

/* デスクトップ版タイポグラフィ最適化 */
@media (min-width: 1200px) {
  .heading-xl {
    font-size: 40px;
    margin-bottom: 32px;
  }
  
  .heading-lg {
    font-size: 36px;
    margin-bottom: 28px;
  }
  
  .heading-md {
    font-size: 28px;
    margin-bottom: 20px;
  }
  
  .heading-sm {
    font-size: 24px;
    margin-bottom: 16px;
  }
  
  .text-lg {
    font-size: 20px;
  }
  
  .text-base {
    font-size: 18px;
  }
  
  .text-sm {
    font-size: 16px;
  }
}

/* 統一スペーシングユーティリティ */
.spacing-xs { margin-bottom: 8px; }
.spacing-sm { margin-bottom: 16px; }
.spacing-md { margin-bottom: 24px; }
.spacing-lg { margin-bottom: 32px; }
.spacing-xl { margin-bottom: 40px; }

/* デスクトップ版スペーシング */
@media (min-width: 1200px) {
  .spacing-xs { margin-bottom: 12px; }
  .spacing-sm { margin-bottom: 20px; }
  .spacing-md { margin-bottom: 32px; }
  .spacing-lg { margin-bottom: 40px; }
  .spacing-xl { margin-bottom: 48px; }
}

/* デバッグ用（開発時のみ使用） */
.debug-border {
  border: 1px solid red !important;
}

.debug-background {
  background: rgba(255, 0, 0, 0.1) !important;
}