/* ===== Mirenetta カスタムCSS ===== */

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
}

/* スクロールバー非表示（カテゴリナビ等） */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* テキスト省略 */
.line-clamp-1,
.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-1 {
  -webkit-line-clamp: 1;
}
.line-clamp-2 {
  -webkit-line-clamp: 2;
}

/* ===== 画像プレースホルダ ===== */
/* 画像読み込み失敗時、親要素に .img-ph を付与してやさしいガーゼ風プレースホルダを表示 */
.img-ph,
.img-ph-dark {
  position: relative;
}
.img-ph > img,
.img-ph-dark > img {
  visibility: hidden;
}
.img-ph::after,
.img-ph-dark::after {
  content: '\f186'; /* moon */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.img-ph::after {
  background: repeating-linear-gradient(
    135deg,
    #f3ebe0,
    #f3ebe0 14px,
    #ede1d2 14px,
    #ede1d2 28px
  );
  color: #c9a86a;
}
.img-ph-dark::after {
  background: repeating-linear-gradient(
    135deg,
    #5a4b3c,
    #5a4b3c 14px,
    #51422f 14px,
    #51422f 28px
  );
  color: #c9a86a;
}

/* メイン画像単体のフォールバック（src差し替え時） */
img.img-fallback {
  object-fit: contain;
  padding: 1.5rem;
  opacity: 0.6;
}

/* お気に入りアクティブ時の微アニメ */
.fav-active i {
  animation: pop 0.3s ease;
}
@keyframes pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.35);
  }
  100% {
    transform: scale(1);
  }
}

/* セレクトのデフォルト矢印を控えめに */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E5C4B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.2rem;
}