/* ==========================================================================
   MAG Home CSS
   ========================================================================== */

/* ヒーローカルーセル */
.mag-hero {
  padding-block: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.mag-hero-carousel {
  position: relative;
  margin-bottom: var(--space-4);
  margin-top: 0;
}

.mag-hero-carousel__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.mag-hero-carousel__track::-webkit-scrollbar {
  display: none;
}

.mag-hero-slide {
  flex: 0 0 auto;
  width: 380px;
  scroll-snap-align: start;
  transition: transform var(--transition-base), opacity var(--transition-base);
  text-decoration: none;
  opacity: 0.85;
}
.mag-hero-slide:hover {
  transform: translateY(-3px);
  opacity: 1;
}
.mag-hero-slide__img {
  width: 100%;
  aspect-ratio: 1 / 1.4;
  object-fit: contain;
  display: block;
}

.mag-hero-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--color-text);
  background: rgba(17, 17, 17, 0.85);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.mag-hero-carousel__nav:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}
.mag-hero-carousel__nav--prev { left: -8px; }
.mag-hero-carousel__nav--next { right: -8px; }

@media (max-width: 768px) {
  .mag-hero-slide { width: 220px; }
  .mag-hero-carousel__nav { display: none; }
}

/* ヒーロー */.mag-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.mag-hero__title { margin-bottom: var(--space-4); }
.mag-hero__title-en { display: block; font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-accent); letter-spacing: 0.05em; margin-bottom: var(--space-2); }
.mag-hero__title-ja { display: block; font-size: var(--text-lg); font-weight: 400; color: var(--color-text-sub); }
.mag-hero__sub { font-size: var(--text-sm); color: var(--color-text-sub); line-height: var(--leading-base); }

.mag-hero__quick-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.mag-hero__quick-link { font-size: var(--text-xs); color: var(--color-text-sub); padding: 2px var(--space-2); border: 1px solid var(--color-border); border-radius: 100px; transition: all var(--transition-fast); }
.mag-hero__quick-link:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ナビカード */
.mag-home-nav-section { padding-block: var(--space-3); }
.mag-home-nav-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }

.mag-home-nav-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-5); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-align: center; text-decoration: none; transition: border-color var(--transition-base), transform var(--transition-base); }
.mag-home-nav-card:hover { transform: translateY(-2px); }
.mag-home-nav-card--ranking:hover { border-color: #C8A96A; }
.mag-home-nav-card--sale:hover    { border-color: var(--color-sale); }
.mag-home-nav-card--new:hover     { border-color: var(--color-accent); }

.mag-home-nav-card__icon  { font-size: 28px; line-height: 1; }
.mag-home-nav-card__label { font-size: var(--text-base); font-weight: 500; color: var(--color-text); }
.mag-home-nav-card__sub   { font-size: var(--text-xs); color: var(--color-text-sub); }

/* ホームセクション */
.mag-home-section { padding-block: var(--space-4); border-top: 1px solid var(--color-border); }
.mag-home-section--sale { background: linear-gradient(to bottom, rgba(143, 29, 44, 0.04) 0%, transparent 100%); }

.mag-home-section__header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-5); gap: var(--space-4); }
.mag-home-section__title { font-size: var(--text-xl); font-weight: 500; display: flex; align-items: center; gap: var(--space-2); }
.mag-home-section__title-mark { font-size: var(--text-base); color: var(--color-accent); }
.mag-home-section__title-mark--sale { color: var(--color-sale); }
.mag-home-section__more { font-size: var(--text-sm); color: var(--color-text-sub); white-space: nowrap; flex-shrink: 0; }
.mag-home-section__more:hover { color: var(--color-accent); }

/* ジャンルグリッド */
.mag-genre-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-3); }
.mag-genre-card { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-decoration: none; transition: border-color var(--transition-fast), transform var(--transition-fast); }
.mag-genre-card:hover { border-color: var(--color-accent); transform: translateY(-1px); }
.mag-genre-card__name { font-size: var(--text-sm); font-weight: 500; color: var(--color-text); }

/* セール固有 */
.mag-sale-badge-heading { display: inline-block; background: var(--color-sale); color: #fff; font-size: var(--text-sm); font-weight: 700; padding: 2px var(--space-3); border-radius: var(--radius-sm); margin-right: var(--space-3); vertical-align: middle; letter-spacing: 0.1em; }

.mag-sale-summary { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: baseline; padding: var(--space-4) var(--space-5); background: rgba(143, 29, 44, 0.08); border: 1px solid rgba(143, 29, 44, 0.2); border-radius: var(--radius-md); margin-top: var(--space-4); }
.mag-sale-summary__value { font-size: var(--text-xl); font-weight: 700; }
.mag-text-sale { color: var(--color-sale); }
.mag-sale-summary__label { font-size: var(--text-sm); color: var(--color-text-sub); margin-left: var(--space-1); }
.mag-card-sale-end { padding: var(--space-1) var(--space-3) var(--space-2); background: var(--color-bg-card); text-align: right; }

@media (max-width: 768px) {
  .mag-hero__inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .mag-hero { padding-block: var(--space-3) var(--space-4); }
  .mag-home-nav-cards { grid-template-columns: 1fr; gap: var(--space-3); }
  .mag-home-nav-card { flex-direction: row; padding: var(--space-4); text-align: left; }
  .mag-home-nav-card__icon { font-size: 20px; }
  .mag-feature-grid { grid-template-columns: 1fr; }
  .mag-genre-grid { grid-template-columns: repeat(2, 1fr); }
  .mag-home-section__title { font-size: var(--text-lg); }
}


/* ナビカード・コンパクト版（フッター直前用） */
.mag-home-nav-section--compact {
  padding-block: var(--space-3);
}
.mag-home-nav-section--compact .mag-home-nav-card {
  padding: var(--space-2) var(--space-3);
  gap: 4px;
}
.mag-home-nav-section--compact .mag-home-nav-card__icon {
  font-size: 16px;
}
.mag-home-nav-section--compact .mag-home-nav-card__label {
  font-size: 13px;
}
.mag-home-nav-section--compact .mag-home-nav-card__sub {
  font-size: 11px;
  color: var(--color-text-sub);
}

.mag-hero__search { margin-bottom: var(--space-3); }