/* iPhoneとAndroidで背景色を完全統一 */
html,
body {
  background-color: #ffffff !important;
  -webkit-background-color: #ffffff !important;
  background: #ffffff !important;
}

#root {
  background-color: #ffffff !important;
  -webkit-background-color: #ffffff !important;
  background: #ffffff !important;
}

/* iPhoneとAndroidでグレー背景を完全統一 */
.bg-\[#F7F7F7\] {
  background-color: #f2f2f7 !important; /* iPhone標準グレー */
  -webkit-background-color: #f2f2f7 !important;
  background: #f2f2f7 !important;
}

.bg-gray-100 {
  background-color: #f3f4f6 !important;
  -webkit-background-color: #f3f4f6 !important;
  background: #f3f4f6 !important;
}

/* iPhoneとAndroidでAndroid Chrome 特有の修正を完全統一 */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  html,
  body,
  #root {
    background-color: #ffffff !important;
    background: #ffffff !important;
  }

  .bg-\[#F7F7F7\] {
    background-color: #f2f2f7 !important; /* iPhone標準グレー */
    background: #f2f2f7 !important;
  }

  .bg-gray-100 {
    background-color: #f3f4f6 !important;
    background: #f3f4f6 !important;
  }
}

/* iPhoneとAndroidでiOS Safari 特有の修正を完全統一 */
@supports (-webkit-touch-callout: none) {
  html,
  body,
  #root {
    background-color: #ffffff !important;
    background: #ffffff !important;
  }

  .bg-\[#F7F7F7\] {
    background-color: #f2f2f7 !important; /* iPhone標準グレー */
    background: #f2f2f7 !important;
  }

  .bg-gray-100 {
    background-color: #f3f4f6 !important;
    background: #f3f4f6 !important;
  }
}

/* iPhoneとAndroidでモバイル背景色を完全統一 */
@media screen and (max-width: 768px) {
  html,
  body,
  #root {
    background-color: #ffffff !important;
    background: #ffffff !important;
  }

  .bg-\[#F7F7F7\] {
    background-color: #f2f2f7 !important; /* iPhone標準グレー */
    background: #f2f2f7 !important;
  }

  .bg-gray-100 {
    background-color: #f3f4f6 !important;
    background: #f3f4f6 !important;
  }
}