/**
 * costume-gallery-enhance.css
 * 衣装ギャラリー(page-coordinate.php)向けの見た目のみの進行的強化。
 * 既存クラスへのスタイル追加のみで、grid-template-columns等の並び順に影響する値は
 * 変更しない(スタッフがiPadの画面順とクローゼットの実物を突き合わせて運用しているため、
 * 表示順・列数を変えると現場運用に影響が出る可能性があるので触らない)。
 */

/* --------------------------------------------------------
 * 1) ギャラリーの余白調整(広い画面で少し余裕を持たせる)
 *    列数(grid-template-columns)は既存のまま。gapのみ調整。
 * ------------------------------------------------------ */
@media (min-width: 1200px) {
  .coordinate-gallery {
    gap: 22px;
  }
}

/* 極小幅スマホでの詰まり対策(既存は480px以下で一律8pxのため、360px以下は少し余裕を持たせる) */
@media (max-width: 360px) {
  .coordinate-gallery {
    gap: 6px;
    padding: 0 10px;
  }
}

/* --------------------------------------------------------
 * 2) カード出現時のフェードイン(純粋にCSSのみ。JS側の
 *    innerHTML再構築で毎回新しい要素が生成されるため、
 *    アニメーションは追加のJSなしで絞り込みの度に自動的に再生される)
 * ------------------------------------------------------ */
.coordinate-card {
  animation: lbcostume-card-in 0.3s ease both;
}
@keyframes lbcostume-card-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------
 * 3) スマホでのタップ領域拡大(見やすさ・操作しやすさの向上)
 *    絞り込みチップとモーダルの前後/閉じるボタンのpaddingのみ増やす。
 * ------------------------------------------------------ */
@media (max-width: 480px) {
  .coordinate-filter-item span {
    padding: 12px 16px; /* 2026-07-16: 8px→12pxへ再調整。8pxでは実測43pxで44px目標に届いていなかった(VA-017) */
  }
}
@media (max-width: 600px) {
  .coordinate-modal-prev,
  .coordinate-modal-next {
    padding: 10px 20px;
  }
  .coordinate-modal-close {
    /* top/right は既存(style.css)の10px/14pxのまま変更しない。
       paddingだけ増やすことで「×」の視覚位置をずらさずにタップ領域だけ広げる。
       box-sizing: border-box は将来テーマ側で width/height が明示された場合に備えた保険。 */
    padding: 10px 12px;
    box-sizing: border-box;
  }
}

/* --------------------------------------------------------
 * 4) キーボード操作対応(見た目のみの対応)
 *    テーマ側CSSは絞り込みチェックボックスを display:none にしており、
 *    その結果Tabキーでフォーカスできず、キーボードのみでは絞り込み操作ができない。
 *    「視覚的に隠すが操作は可能」という一般的な手法に置き換えることで、
 *    HTML/JSは一切変えずにキーボード操作を可能にする。
 *    (このCSSは theme-style の後に読み込まれるため、同じセレクタで安全に上書きできる)
 * ------------------------------------------------------ */
.coordinate-filter-item input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.coordinate-filter-item input[type="checkbox"]:focus-visible + span,
.coordinate-filter-item input[type="checkbox"]:focus + span {
  outline: 2px solid #407efd;
  outline-offset: 2px;
}
.coordinate-modal-close:focus-visible,
.coordinate-modal-prev:focus-visible,
.coordinate-modal-next:focus-visible {
  outline: 2px solid #407efd;
  outline-offset: 2px;
}

/* --------------------------------------------------------
 * 5) モーダル内画像のズーム表示(要件1の追加分)
 *    既存のライトボックス(モーダル)自体はテーマ側で実装済みのため、
 *    ここでは「モーダルを開いた後、画像をさらに拡大して質感を確認できる」
 *    機能の見た目のみを用意する(トグルはJS側で行う)。
 *
 *    [レビュー指摘を受けて追記] .coordinate-modal-img-wrap は banana-custom.css
 *    (2026-06-16付『画像表示修正』)で overflow: visible / display:flex に
 *    上書きされており、これがstyle.css(overflow:hidden)より優先して効いている。
 *    このままscale(1.8)すると拡大後の画像が下の.coordinate-modal-info
 *    (タイトル・タグ)や.coordinate-modal-navに視覚的にはみ出す恐れがあるため、
 *    「ズーム中(.lbcostume-zoom-active)だけ」ラップ自体をoverflow:hiddenで
 *    再クリップする。非ズーム時はbanana-custom.css側のoverflow:visibleの
 *    挙動をそのまま尊重し、通常表示に影響を与えない。
 *    (読み込み順はPHP側でbanana-customへの依存指定により保証済みだが、
 *    念のため!importantでも安全側に倒している)
 * ------------------------------------------------------ */
.coordinate-modal-img-wrap {
  position: relative; /* ズーム時のヒントアイコン配置用。レイアウトへの影響はなし */
}
.coordinate-modal-img-wrap.lbcostume-zoom-active {
  overflow: hidden !important;
}
#coordModalImg {
  cursor: zoom-in;
}
#coordModalImg.lbcostume-zoomed {
  cursor: zoom-out;
  transform: scale(1.8);
}
#coordModalImg:focus-visible {
  outline: 2px solid #407efd;
  outline-offset: 2px;
}
.coordinate-modal-img-wrap img {
  transition: transform 0.25s ease;
}
.coordinate-modal-img-wrap::after {
  content: "🔍";
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none; /* 画像の長押し保存・タップ操作を邪魔しない */
}
/* ズーム中はヒントアイコンを隠す(常時表示だと冗長なため) */
.coordinate-modal-img-wrap.lbcostume-zoom-active::after {
  display: none;
}

/* --------------------------------------------------------
 * 6) 動きを抑えたい利用者への配慮
 * ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .coordinate-card {
    animation: none;
  }
  .coordinate-modal-img-wrap img {
    transition: none;
  }
}