/* ==========================================================================
   MAG Components CSS
   ========================================================================== */

/* 作品カード */
.mag-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.mag-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.mag-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.mag-card__badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.03em;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.mag-card__badge--sale  { background: var(--color-sale); color: #fff; }
.mag-card__badge--ended { background: var(--color-bg-elevated); color: var(--color-text-sub); }

.mag-card__image-link {
  display: block;
  aspect-ratio: 1 / 1.5;
  overflow: hidden;
  background: var(--color-bg-elevated);
  flex-shrink: 0;
}

.mag-card__image {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform var(--transition-base);
}

.mag-card:hover .mag-card__image { transform: scale(1.03); }

.mag-card__image-placeholder {
  width: 100%; height: 100%;
  background: var(--color-bg-elevated);
}

.mag-card__body {
  padding: 6px 8px 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mag-card__title {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.mag-card__title a { color: var(--color-text); }
.mag-card__title a:hover { color: var(--color-accent); }

.mag-card__actress { font-size: var(--text-xs); color: var(--color-text-sub); }

.mag-card__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.mag-card__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
}
.mag-card__price-original {
  color: var(--color-text-sub);
  text-decoration: line-through;
  font-size: 11px;
}
.mag-card__price-current {
  font-weight: 600;
}
.mag-card__price-current.is-sale {
  color: var(--color-sale);
}

.mag-card__cta {
  font-size: var(--text-xs);
  color: var(--color-text-sub);
  border: 1px solid var(--color-border);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.mag-card__cta:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* グリッド */
.mag-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

@media (max-width: 768px) {
  .mag-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
}
.mag-grid--products { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.mag-grid--related  { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.mag-grid--actresses { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

@media (max-width: 480px) {
  .mag-grid--products  { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .mag-grid--related   { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .mag-grid--actresses { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
}

/* CTA */
.mag-cta {
  padding: var(--space-5);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
}

.mag-cta--top   { border-color: var(--color-cta); }
.mag-cta--bottom { margin-top: var(--space-6); }

.mag-cta__sale-badge {
  display: inline-block;
  background: var(--color-sale);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
  letter-spacing: 0.05em;
}

.mag-cta__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.mag-cta__price-label { font-size: var(--text-sm); color: var(--color-text-sub); }
.mag-cta__price-value { font-size: var(--text-xl); font-weight: 700; }
.mag-cta__price-value.is-sale { color: var(--color-sale); }
.mag-cta__price-tax   { font-size: var(--text-xs); color: var(--color-text-sub); }

.mag-btn--cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-cta);
  color: #fff;
  padding: var(--space-4) var(--space-7);
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: 0.03em;
  transition: background-color var(--transition-fast);
}

.mag-btn--cta:hover { background: var(--color-cta-hover); color: #fff; }

.mag-cta__notice {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-sub);
}

/* Sticky CTA */
.mag-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: var(--z-sticky);
  background: rgba(17, 17, 17, 0.97);
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-5);
}

.mag-sticky-cta__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background: var(--color-cta);
  color: #fff;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: var(--text-base);
}

.mag-sticky-cta__link:hover { background: var(--color-cta-hover); color: #fff; }

/* フィルターバー */
.mag-filter { margin-block: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }

.mag-filter__toggle {
  display: none;
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-card);
  color: var(--color-text);
  font-size: var(--text-sm);
  justify-content: space-between;
  align-items: center;
}

.mag-filter__body {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--color-bg-card);
}

.mag-filter__section { flex: 1 1 200px; }

.mag-filter__label {
  font-size: var(--text-xs);
  color: var(--color-text-sub);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.mag-filter__sort-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.mag-filter__sort-tab {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-sub);
  transition: all var(--transition-fast);
}

.mag-filter__sort-tab.is-active,
.mag-filter__sort-tab:hover { border-color: var(--color-accent); color: var(--color-accent); }

.mag-filter__genre-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.mag-filter__genre-item,
.mag-filter__year-item {
  font-size: var(--text-xs);
  padding: 2px var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  color: var(--color-text-sub);
  transition: all var(--transition-fast);
}

.mag-filter__genre-item.is-active,
.mag-filter__year-item.is-active {
  border-color: var(--color-accent);
  background: rgba(200, 169, 106, 0.1);
  color: var(--color-accent);
}

.mag-filter__toggle-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-sub);
  transition: all var(--transition-fast);
}

.mag-filter__toggle-item.is-active {
  border-color: var(--color-sale);
  color: var(--color-sale);
  background: rgba(192, 57, 43, 0.1);
}

.mag-filter__year-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mag-filter__clear-all { font-size: var(--text-xs); color: var(--color-text-sub); text-decoration: underline; }

@media (max-width: 768px) {
  .mag-filter__toggle { display: flex; }
  .mag-filter__body { display: none; flex-direction: column; }
  .mag-filter__body.is-open { display: flex; }
}

/* パンくず */
.mag-breadcrumb { margin-bottom: var(--space-5); }

.mag-breadcrumb__list {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  align-items: center; font-size: var(--text-xs); color: var(--color-text-sub);
}

.mag-breadcrumb__item { display: flex; align-items: center; gap: var(--space-2); }
.mag-breadcrumb__item:not(:last-child)::after { content: '›'; color: var(--color-border); }
.mag-breadcrumb__item a { color: var(--color-text-sub); }
.mag-breadcrumb__item a:hover { color: var(--color-text); }

/* ページネーション */
.mag-pagination { margin-top: var(--space-7); }

.mag-pagination .page-numbers {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: var(--space-2); list-style: none;
}

.mag-pagination .page-numbers li a,
.mag-pagination .page-numbers li span {
  display: flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding-inline: var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font-size: var(--text-sm); color: var(--color-text-sub);
  transition: all var(--transition-fast);
}

.mag-pagination .page-numbers li a:hover { border-color: var(--color-accent); color: var(--color-accent); }

.mag-pagination .page-numbers li .current {
  background: var(--color-accent); border-color: var(--color-accent);
  color: var(--color-bg); font-weight: 700;
}

/* タグ */
.mag-tag {
  display: inline-block; font-size: var(--text-xs);
  padding: 2px var(--space-3); border: 1px solid var(--color-border);
  border-radius: 100px; color: var(--color-text-sub);
  transition: all var(--transition-fast);
}

.mag-tag:hover { border-color: var(--color-accent); color: var(--color-accent); }
.mag-tag__count { font-size: var(--text-xs); color: var(--color-text-sub); margin-left: var(--space-1); }

/* アーカイブヘッダー */
.mag-archive-header { margin-bottom: var(--space-6); }
.mag-archive-title { font-size: var(--text-2xl); font-weight: 500; line-height: var(--leading-tight); margin-bottom: var(--space-3); }
.mag-archive-desc { line-height: var(--leading-base); margin-bottom: var(--space-3); }

/* 空状態 */
.mag-empty { text-align: center; padding: var(--space-9) var(--space-5); color: var(--color-text-sub); }
.mag-empty p { margin-bottom: var(--space-5); }

/* 女優カード */
.mag-actress-card {
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--transition-base);
}

.mag-actress-card:hover { border-color: var(--color-accent); }
.mag-actress-card__link { display: block; text-decoration: none; }

.mag-actress-card__image-wrap {
  aspect-ratio: 5 / 7; overflow: hidden; background: var(--color-bg-elevated);
}

.mag-actress-card__image {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--transition-base);
}

.mag-actress-card:hover .mag-actress-card__image { transform: scale(1.03); }

.mag-actress-card__placeholder {
  width: 100%; height: 100%; background: var(--color-bg-elevated);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-sub); font-size: var(--text-xs);
}

.mag-actress-card__body { padding: var(--space-3); }
.mag-actress-card__name { font-size: var(--text-sm); font-weight: 500; color: var(--color-text); margin-bottom: var(--space-1); }
.mag-actress-card__kana { font-size: var(--text-xs); color: var(--color-text-sub); margin-bottom: var(--space-1); }
.mag-actress-card__count { font-size: var(--text-xs); color: var(--color-text-sub); }

/* 五十音インデックス */
.mag-kana-index { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }

.mag-kana-index__item {
  font-size: var(--text-sm); padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  color: var(--color-text-sub); transition: all var(--transition-fast);
}

.mag-kana-index__item.is-active,
.mag-kana-index__item:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* シリーズチップ */
.mag-series-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }

.mag-series-chip {
  font-size: var(--text-sm); padding: var(--space-2) var(--space-4);
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); color: var(--color-text-sub);
  transition: all var(--transition-fast);
}

.mag-series-chip:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* タグリスト */
.mag-tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* エンティティリスト */
.mag-entity-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }

.mag-entity-list__item {
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); transition: border-color var(--transition-fast);
}

.mag-entity-list__item:hover { border-color: var(--color-accent); }

.mag-entity-list__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-5); gap: var(--space-3);
}

.mag-entity-list__name { font-size: var(--text-sm); color: var(--color-text); }

/* 女優ヒーロー */
.mag-actress-hero { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-7); margin-bottom: var(--space-7); align-items: start; }

.mag-actress-hero__image-wrap { aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-md); background: var(--color-bg-elevated); }
.mag-actress-hero__image { width: 100%; height: 100%; object-fit: cover; }
.mag-actress-hero__placeholder { width: 100%; height: 100%; background: var(--color-bg-elevated); }

.mag-actress-hero__name { font-size: var(--text-2xl); font-weight: 500; line-height: var(--leading-tight); margin-bottom: var(--space-3); }

.mag-actress-hero__kana { display: block; font-size: var(--text-sm); color: var(--color-text-sub); font-weight: 400; margin-top: var(--space-1); }

.mag-actress-hero__works-count { font-size: var(--text-base); margin-bottom: var(--space-4); }

.mag-actress-hero__profile { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }

.mag-actress-hero__profile-row { display: grid; grid-template-columns: 100px 1fr; font-size: var(--text-sm); }
.mag-actress-hero__profile-row dt { color: var(--color-text-sub); }

.mag-actress-hero__intro { margin-bottom: var(--space-4); }
.mag-actress-hero__genres { margin-top: var(--space-3); }

.mag-actress-section { margin-bottom: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }

.mag-actress-works-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); }

/* ランキングアイテム */
.mag-ranked-item { position: relative; }

.mag-ranked-item__rank {
  position: absolute; top: var(--space-2); right: var(--space-2); z-index: 2;
  min-width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  background: rgba(17, 17, 17, 0.85); color: var(--color-text-sub);
  font-size: var(--text-xs); font-weight: 700; border-radius: var(--radius-sm);
  font-family: var(--font-mono);
}

.mag-ranked-item__rank--top3 { background: var(--color-accent); color: var(--color-bg); }

/* 特集カード */
.mag-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }

.mag-feature-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--transition-base); }
.mag-feature-card:hover { border-color: var(--color-accent); }

.mag-feature-card__image-wrap { aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-bg-elevated); }
.mag-feature-card__image { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-base); }
.mag-feature-card:hover .mag-feature-card__image { transform: scale(1.03); }

.mag-feature-card__body { padding: var(--space-4); }
.mag-feature-card__date { display: block; margin-bottom: var(--space-2); }
.mag-feature-card__title { font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-tight); margin-bottom: var(--space-2); }
.mag-feature-card__title a { color: var(--color-text); }
.mag-feature-card__title a:hover { color: var(--color-accent); }
.mag-feature-card__excerpt { line-height: var(--leading-base); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 特集アーカイブ */
.mag-feature-archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-5); }
.mag-feature-archive-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--transition-base); }
.mag-feature-archive-card:hover { border-color: var(--color-accent); }

/* 検索ページ */
.mag-search-page-form { max-width: 640px; margin-bottom: var(--space-6); }
.mag-search-form { display: flex; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-card); transition: border-color var(--transition-fast); }
.mag-search-form:focus-within { border-color: var(--color-accent); }
.mag-search-form__input { flex: 1; padding: var(--space-4) var(--space-5); background: transparent; color: var(--color-text); font-size: var(--text-base); border: none; outline: none; }
.mag-search-form__input::placeholder { color: var(--color-text-sub); }
.mag-search-form--large .mag-search-form__input { padding: var(--space-5); font-size: var(--text-md); }
.mag-search-form__btn { padding: var(--space-3) var(--space-5); background: var(--color-cta); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; transition: background-color var(--transition-fast); }
.mag-search-form__btn:hover { background: var(--color-cta-hover); }

.mag-search-type-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); flex-wrap: wrap; }
.mag-search-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 4px; background: var(--color-cta); color: #fff; border-radius: 100px; font-size: 10px; font-weight: 700; margin-left: 4px; }

.mag-search-zero { padding: var(--space-8) 0; text-align: center; }
.mag-search-zero__msg { font-size: var(--text-lg); margin-bottom: var(--space-4); }
.mag-search-empty { padding: var(--space-7) 0; }
.mag-search-suggestions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.mag-search-suggest-tag { font-size: var(--text-sm); padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border); border-radius: 100px; color: var(--color-text-sub); transition: all var(--transition-fast); }
.mag-search-suggest-tag:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* 特集詳細 */
.mag-feature-header { margin-bottom: var(--space-6); }
.mag-feature-header__meta { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.mag-feature-header__title { font-size: var(--text-2xl); font-weight: 500; line-height: var(--leading-tight); margin-bottom: var(--space-4); }
.mag-feature-thumbnail { margin-bottom: var(--space-7); border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 16 / 9; background: var(--color-bg-elevated); }
.mag-feature-thumbnail__img { width: 100%; height: 100%; object-fit: cover; }
.mag-feature-footer { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }

.mag-prose-rich { font-size: var(--text-base); line-height: var(--leading-base); color: var(--color-text); }
.mag-prose-rich h2 { font-size: var(--text-xl); font-weight: 500; margin-top: var(--space-8); margin-bottom: var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.mag-prose-rich h3 { font-size: var(--text-lg); font-weight: 500; margin-top: var(--space-6); margin-bottom: var(--space-3); }
.mag-prose-rich p { margin-bottom: var(--space-5); color: var(--color-text-sub); }
.mag-prose-rich a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.mag-prose-rich ul, .mag-prose-rich ol { margin-bottom: var(--space-5); padding-left: var(--space-6); color: var(--color-text-sub); }
.mag-prose-rich ul { list-style: disc; }
.mag-prose-rich ol { list-style: decimal; }
.mag-prose-rich li + li { margin-top: var(--space-2); }
.mag-prose-rich blockquote { border-left: 3px solid var(--color-accent); padding: var(--space-4) var(--space-5); background: var(--color-bg-card); margin-bottom: var(--space-5); color: var(--color-text-sub); }
.mag-prose-rich strong { color: var(--color-text); }

@media (max-width: 768px) {
  .mag-actress-hero { grid-template-columns: 120px 1fr; gap: var(--space-4); }
  .mag-actress-hero__name { font-size: var(--text-lg); }
  .mag-actress-works-header { flex-direction: column; align-items: flex-start; }
  .mag-feature-grid { grid-template-columns: 1fr; }
  .mag-feature-header__title { font-size: var(--text-xl); }
}

@media (max-width: 480px) {
  .mag-actress-hero { grid-template-columns: 1fr; }
  .mag-actress-hero__image-wrap { max-width: 180px; margin-inline: auto; }
}