/**
 * サイト共通コンポーネント（Tailwind チャンクに含まれないユーティリティの補完）
 * Next.js: src/app/globals.css と同期
 */

/* 記事・トラブル詳細の関連カード（本文カラム幅に応じて 1〜3 列） */
.osoushiki-related-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

/* AI 診断モーダル — 入力の地を少し透かして下端グローを見せる */
.ai-wizard-field {
  background-color: rgb(255 255 255 / 0.85);
}

/* sticky ヘッダー下のアンカー飛び（Tailwind 未生成時の補完） */
.scroll-mt-6 {
  scroll-margin-top: 1.5rem;
}

.scroll-mt-20 {
  scroll-margin-top: 5rem;
}

/* トップ PR バナー: 画像の軽いズーム + カードの影 */
.osoushiki-sponsored-grid {
  display: none;
}

.osoushiki-sponsored-carousel {
  display: block;
}

.osoushiki-sponsored-carousel__viewport {
  position: relative;
}

.osoushiki-sponsored-carousel__slide {
  display: none;
  overflow: hidden;
  border: 1px solid var(--color-rule, #f1e6da);
  border-radius: 0.5rem;
  background: var(--color-surface, #fff);
  box-shadow: 0 1px 2px rgb(28 28 26 / 0.05);
  outline: none;
}

.osoushiki-sponsored-carousel__slide.is-active {
  display: block;
}

.osoushiki-sponsored-carousel__nav {
  position: absolute;
  top: 50%;
  display: flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  border: 1px solid rgb(255 255 255 / 0.7);
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.8);
  color: var(--color-ink, #1c1c1a);
  box-shadow: 0 1px 2px rgb(28 28 26 / 0.12);
  backdrop-filter: blur(8px);
}

.osoushiki-sponsored-carousel__nav--prev {
  left: 0.5rem;
}

.osoushiki-sponsored-carousel__nav--next {
  right: 0.5rem;
}

.osoushiki-sponsored-carousel__nav .material-symbols-rounded {
  font-size: 1.5rem;
  line-height: 1;
}

.osoushiki-sponsored-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.osoushiki-sponsored-carousel__dot {
  width: 0.625rem;
  height: 0.625rem;
  border: 0;
  border-radius: 9999px;
  background: var(--color-rule-primary, #e8d7c4);
  transition: width 200ms ease, background-color 200ms ease;
}

.osoushiki-sponsored-carousel__dot.is-active {
  width: 1.5rem;
  background: var(--color-accent, #ea6a12);
}

.osoushiki-sponsored-banner__media {
  display: block;
  height: auto;
  width: 100%;
  transition: transform 200ms ease;
}

@media (min-width: 640px) {
  .osoushiki-sponsored-carousel {
    display: none;
  }

  .osoushiki-sponsored-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (hover: hover) {
  .osoushiki-sponsored-banner {
    transition: box-shadow 200ms ease;
  }

  .osoushiki-sponsored-banner:hover {
    box-shadow:
      0 4px 6px -1px rgb(28 28 26 / 0.1),
      0 2px 4px -2px rgb(28 28 26 / 0.1);
  }

  .osoushiki-sponsored-banner:hover .osoushiki-sponsored-banner__media {
    transform: scale(1.01);
  }
}

@media (prefers-reduced-motion: reduce) {
  .osoushiki-sponsored-banner__media {
    transition: none;
  }

  @media (hover: hover) {
    .osoushiki-sponsored-banner:hover .osoushiki-sponsored-banner__media {
      transform: none;
    }
  }
}