/* 栄養表示用人型グラフのスタイル定義 */

/* 栄養素ごとのカラーテーマ */
:root {
  /* カロリー（赤系） */
  --nutrition-calories-base: #EF4444;     /* red-500 */
  --nutrition-calories-medium: #DC2626;   /* red-600 */
  --nutrition-calories-dark: #991B1B;     /* red-800 */
  
  /* タンパク質（オレンジ系） */
  --nutrition-protein-base: #FB923C;      /* orange-400 */
  --nutrition-protein-medium: #EA580C;    /* orange-600 */
  --nutrition-protein-dark: #9A3412;      /* orange-800 */
  
  /* 脂質（緑系） */
  --nutrition-fat-base: #10B981;          /* green-500 */
  --nutrition-fat-medium: #059669;        /* green-600 */
  --nutrition-fat-dark: #064E3B;          /* green-800 */
  
  /* 炭水化物（青系） */
  --nutrition-carbohydrates-base: #3B82F6;    /* blue-500 */
  --nutrition-carbohydrates-medium: #2563EB;  /* blue-600 */
  --nutrition-carbohydrates-dark: #1E3A8A;    /* blue-800 */
  
  /* ビタミン（インディゴ系） */
  --nutrition-vitamins-base: #6366F1;     /* indigo-500 */
  --nutrition-vitamins-medium: #4F46E5;   /* indigo-600 */
  --nutrition-vitamins-dark: #312E81;     /* indigo-800 */
  
  /* ミネラル（紫系） */
  --nutrition-minerals-base: #8B5CF6;     /* purple-500 */
  --nutrition-minerals-medium: #7C3AED;   /* purple-600 */
  --nutrition-minerals-dark: #4C1D95;     /* purple-800 */
}

/* 人型グラフアイテム */
.nutrition-person-graph-item {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nutrition-person-graph-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ストライプパターン（100%超過時） */
.nutrition-striped {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(255, 255, 255, 0.2) 10px,
    rgba(255, 255, 255, 0.2) 20px
  );
  animation: nutrition-stripe-animation 2s linear infinite;
}

@keyframes nutrition-stripe-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 0;
  }
}

/* プログレスバーのアニメーション */
.nutrition-person-graph-item [data-nutrition-person-graph-target="progressBar"] {
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
}

/* 人型アイコンのアニメーション */
.nutrition-person-graph-item [data-nutrition-person-graph-target="personIcon"] {
  transition: color 0.3s ease;
}

/* Font Awesome版の塗りつぶしコンテナ */
.nutrition-person-graph-item [data-nutrition-person-graph-target="fillContainer"] {
  transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* SVGクリップパスのアニメーション */
.nutrition-person-graph-item svg rect[data-nutrition-person-graph-svg-target="clipRect"] {
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* レスポンシブ調整 */
@media (max-width: 640px) {
  .nutrition-person-graph-item {
    padding: 0.75rem;
  }
  
  /* モバイルでは1列表示 */
  .nutrition-person-graph-item .text-xl {
    font-size: 1.125rem;
  }
}

/* ホバー効果 */
.nutrition-person-graph-item:hover [data-nutrition-person-graph-target="progressBar"] {
  filter: brightness(1.05);
}

.nutrition-person-graph-item:hover [data-nutrition-person-graph-target="personIcon"] {
  filter: brightness(1.05);
}

/* 印刷時の調整 */
@media print {
  .nutrition-person-graph-item {
    break-inside: avoid;
    box-shadow: none;
  }
  
  .nutrition-striped {
    background-image: none;
    border: 1px solid currentColor;
  }
}