/* ===== トップ専用：フィルタ（純CSS） ===== */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.filters {
  margin-top: 12px;
}

.seg {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: linear-gradient(145deg, #ffffff 0%, #f8f2f4 100%);
  box-shadow: 0 14px 34px rgba(81, 99, 124, 0.14);
}
.seg__ctrl {
  position: absolute;
  appearance: none;
}
.seg__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(81, 99, 124, 0.12);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-strong);
  background: linear-gradient(140deg, #fffdfd 0%, #f4e7ea 55%, #eef4f8 100%);
  box-shadow: 0 10px 20px rgba(81, 99, 124, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease,
    border-color 0.2s ease, color 0.2s ease;
}
.seg__btn::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: radial-gradient(
    120% 120% at 50% 10%,
    rgba(255, 255, 255, 0.75),
    transparent 60%
  );
  pointer-events: none;
  mix-blend-mode: screen;
}
.seg__btn:focus-visible {
  outline: none;
  border-color: rgba(81, 99, 124, 0.36);
  box-shadow: 0 14px 26px rgba(81, 99, 124, 0.22), 0 0 0 4px var(--focus-ring);
}
/* 現在のDOM構造に合わせ、.filters を起点に :has() で判定 */
.filters:has(#type-all:checked) ~ .top-gallery-wrap .gallery .card {
  display: block;
}
.filters:has(#type-color:checked) ~ .top-gallery-wrap .gallery .card {
  display: none;
}
.filters:has(#type-color:checked)
  ~ .top-gallery-wrap
  .gallery
  .card[data-type="color"] {
  display: block;
}
.filters:has(#type-pet:checked) ~ .top-gallery-wrap .gallery .card {
  display: none;
}
.filters:has(#type-pet:checked)
  ~ .top-gallery-wrap
  .gallery
  .card[data-type="pet"] {
  display: block;
}

/* JS連動（HTML要素に data-filter=... を付与） */
[data-filter="all"] .top-gallery-wrap .gallery .card {
  display: block;
}
[data-filter="color"] .top-gallery-wrap .gallery .card {
  display: none;
}
[data-filter="color"] .top-gallery-wrap .gallery .card[data-type="color"] {
  display: block;
}
[data-filter="pet"] .top-gallery-wrap .gallery .card {
  display: none;
}
[data-filter="pet"] .top-gallery-wrap .gallery .card[data-type="pet"] {
  display: block;
}

/* 選択中の見た目 */
.filters:has(#type-all:checked) .seg__btn[for="type-all"],
.filters:has(#type-color:checked) .seg__btn[for="type-color"],
.filters:has(#type-pet:checked) .seg__btn[for="type-pet"] {
  background: linear-gradient(145deg, var(--key-weak) 0%, #ffffff 90%);
  border-color: rgba(81, 99, 124, 0.28);
  color: var(--ink-strong);
  box-shadow: 0 18px 30px rgba(81, 99, 124, 0.24);
}

/* ===== ギャラリーまわりの微調整（既存の.card系を活かす前提） ===== */
.top-gallery-wrap {
  margin-top: 12px;
}
.card__text {
  margin: 6px 0 0;
  color: var(--muted);
}

/* モバイル余白 */
@media (max-width: 560px) {
  .filters {
    margin-top: 8px;
  }
  .seg__btn {
    padding: 7px 12px;
  }
}

.notice {
  background: #f6ecef;
  border-block: 1px solid #e3d4d8;
  padding: 0.6rem 1rem;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.6;
}
.notice a {
  text-decoration: underline;
}

/* ===== ヒーロー（画像なしのシンプル構成） ===== */
.hero--simple {
  padding: 22px 20px;
}
.hero--simple h2 {
  font-size: 22px;
  margin: 0 0 8px;
}
.hero--simple p {
  margin: 0;
}
.hero__note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(81, 99, 124, 0.12);
  font-size: 0.95rem;
  color: var(--ink);
}
.hero__note a {
  color: var(--key-strong);
  text-decoration: underline;
}
.hero__note-icon {
  width: 16px;
  height: 16px;
  color: var(--key-strong);
}

@media (max-width: 560px) {
  .hero--simple {
    padding: 18px 14px;
  }
  .hero--simple h2 {
    font-size: 20px;
  }
  .hero__note {
    line-height: 1.7;
    border-radius: 12px; /* 複数行になっても自然に見えるように */
    display: flex; /* 折り返し時の横幅を広げる */
  }
}

@media (max-width: 961px) {
  .appbar .detail-btn {
    display: none;
  }
}