/**
 * /css/application/archive-application.css
 * ------------------------------------------------------------
 * Applications アーカイブ（WPプラグインディレクトリ風）
 * - 変数・余白は共通トークン（--stickyTop / --pageSide）に準拠
 * - PC: 2列（>=1440px では 3列も可）、Tab: 2列、SP: 1列
 * - カードは「左：正方形アイコン / 右：本文」レイアウト
 * - CLS回避：画像に明示的なサイズ/枠
 *
 * ★改修内容（方針A・第3段）：
 * - 一覧カードのアイコンは「縦長/横長でも枠にぴったり入る」を優先し、
 *   画像の見切れ（トリミング）は許容する要件に変更。
 * - そのため object-fit を contain → cover に統一。
 * - Application 詳細ページと同じ原理：
 *     “枠(.app-card__thumb)を固定 → その直下 img を 100% で受ける”
 *   の当て方を維持し、imgにクラスが付いていなくても必ず効くようにする。
 * - 具体的には、従来の .app-card__thumb-img に加えて
 *     .app-card__thumb img（直下/子孫）へ同等の指定を維持し、常に cover を効かせる。
 * - 修正対象以外のコードは維持。
 */

:root {
  --app-gap: 20px;            /* グリッド間隔 */
  --app-card-radius: 10px;
  --app-card-border: 1px solid #e6e6e6;
  --app-card-shadow: 0 1px 2px rgba(0,0,0,0.04);
  --app-muted: #666;
  --app-accent: #333;
  --app-chip-bg: #f3f3f3;
  --app-chip-fg: #333;
  --app-badge-bg: #ffeb3b;
  --app-badge-fg: #111;
}

/* ------------------------------------------------------------
 * ▼ ページ限定の右端余白対策（Gallery と同手法）
 *   グローバルで scrollbar-gutter: stable; を指定しているサイトで
 *   右側に常時ガターが確保され “空白” に見える問題の緩和。
 *   Applications 一覧があるページだけ auto に戻す。
 *   ※ :has() はモダンブラウザ対応。既存ページには副作用なし。
 * ------------------------------------------------------------ */
html:has(.app-archive){
  scrollbar-gutter: auto !important;
}

.app-archive {
  padding: calc(var(--stickyTop, 0px) + 24px) var(--pageSide, 24px) 60px;
}

.app-archive__head {
  max-width: var(--wrap, 1200px);
  margin: 0 auto 28px;
}

.app-archive__title {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  letter-spacing: .02em;
}

.app-archive__subtitle {
  margin-top: 6px;
  color: var(--app-muted);
  line-height: 1.6;
}

/* 検索バー */
.app-archive__search {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  max-width: 520px;
}
.app-archive__search input[type="search"]{
  border: 1px solid #ddd;
  border-radius: 999px;
  padding: 10px 14px;
  outline: none;
}
.app-archive__search button{
  border: 1px solid #ddd;
  border-radius: 999px;
  padding: 8px 12px;
  background: #fff;
  line-height: 0;
}

/* タブ */
.app-archive__tabs {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.app-archive__tabs .app-tab{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #ddd;
  color: var(--app-accent);
  background: #fff;
  text-decoration: none;
  transition: .2s ease;
}
.app-archive__tabs .app-tab:hover{
  border-color: #bbb;
}
.app-archive__tabs .app-tab.is-current{
  background: #111;
  color: #fff;
  border-color: #111;
}

/* フィルタ行 */
.app-archive__filters {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
}
.app-filters__group {
  border: 0;
  padding: 0;
  margin: 0;
}
.app-filters__group > legend{
  font-size: 12px;
  color: var(--app-muted);
  margin-bottom: 6px;
}
.app-filters__chips{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.chip input{
  appearance: none;
  width: 0;
  height: 0;
  position: absolute;
}
.chip span{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--app-chip-bg);
  color: var(--app-chip-fg);
  font-size: 13px;
  border: 1px solid #e8e8e8;
}
.chip input:checked + span{
  background: #111;
  color: #fff;
  border-color: #111;
}

/* 並び替え */
.app-filters__sort{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.app-filters__sort select{
  border: 1px solid #ddd;
  padding: 7px 10px;
  border-radius: 6px;
  background: #fff;
}
.app-filters__sort-label{
  font-size: 12px;
  color: var(--app-muted);
}

/* セクション共通 */
.app-section{
  max-width: var(--wrap, 1200px);
  margin: 24px auto 0;
}
.app-section__head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.app-section__title{
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 700;
}
.app-section__count{
  color: var(--app-muted);
  font-size: 13px;
}
.app-section__more{
  font-size: 13px;
  color: var(--app-accent);
  text-decoration: none;
}

/* グリッド */
.app-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--app-gap);
}
@media (min-width: 1440px){
  .app-grid{ grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 880px){
  .app-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .app-grid{ grid-template-columns: 1fr; }
}

/* カード */
.app-card{
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  border: var(--app-card-border);
  border-radius: var(--app-card-radius);
  background: #fff;
  box-shadow: var(--app-card-shadow);
  padding: 14px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  will-change: transform;
  opacity: 0; transform: translateY(6px);
}
.app-card.is-in{ opacity: 1; transform: none; transition-duration: .35s; }
.app-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 5px 16px rgba(0,0,0,.06);
  border-color: #ddd;
}

.app-card__badge{
  position: absolute;
  top: 10px; right: 10px;
  z-index: 1;
  background: var(--app-badge-bg);
  color: var(--app-badge-fg);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 6px;
  border-radius: 4px;
}

.app-card__thumb{
  display: block;
  width: 96px; height: 96px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #eee;
  background: #fafafa;
}

/**
 * ★ここが今回の主改修ポイント（第3段）
 * - 要件：縦長/横長でも「枠にぴったり入る」を優先し、見切れは許容。
 * - 対応：object-fit を cover に統一（中心基準でトリミング）。
 *
 * - 当て方（原理）は維持：
 *   “枠(.app-card__thumb)を固定 → その中の img を 100% で受ける”
 *   → img にクラスが無い場合でも必ず効くように .app-card__thumb img を残す。
 */

/* （互換維持）クラスが付いている場合も従来どおり効かせる */
.app-card__thumb-img{
  width: 100%;
  height: 100%;
  object-fit: cover;         /* ★枠いっぱい（見切れOK） */
  object-position: center;   /* ★中央寄せ（トリミング基準） */
  display: block;
  max-width: 100%;
  max-height: 100%;
}

/* （本命）クラス無しでも必ず効く：枠→img直指定 */
.app-card__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;         /* ★枠いっぱい（見切れOK） */
  object-position: center;   /* ★中央寄せ */
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.app-card__noimg{
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-size: 11px; color: #999;
}

.app-card__body{ min-width: 0; } /* 省略記号を効かせる */
.app-card__title{
  font-size: 16px; font-weight: 700; line-height: 1.35;
  margin: 2px 0 6px;
}
.app-card__title a{ color: var(--app-accent); text-decoration: none; }
.app-card__summary{
  color: #444; line-height: 1.6; margin: 0 0 8px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* メタ行 */
.app-card__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  color: var(--app-muted);
  font-size: 12px;
}
.app-card__author{ white-space: nowrap; }

/* 星評価（背景5つの上に幅可変の塗り） */
.app-card__rating{
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--app-accent);
}
.app-card__rating .stars{
  position: relative; display: inline-block;
  width: 80px; height: 14px;
  background:
    linear-gradient(90deg, #ddd 0 100%);
  -webkit-mask:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='20' viewBox='0 0 100 20'><defs/><g fill='%23000'><path d='M10 1.5l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L10 16.6 4.2 19.4l1.1-6.5L.6 8.3l6.5-.9z'/></g></svg>") left/16px 16px repeat-x;
          mask:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='20' viewBox='0 0 100 20'><defs/><g fill='%23000'><path d='M10 1.5l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L10 16.6 4.2 19.4l1.1-6.5L.6 8.3l6.5-.9z'/></g></svg>") left/16px 16px repeat-x;
}
.app-card__rating .stars .fill{
  position: absolute; inset: 0;
  background: #ffb703;
  width: 0%;
}
.app-card__rating .avg{ font-weight: 700; }
.app-card__rating .count{ color: #888; }

/* プラットフォーム・状態・外部リンク */
.chip-small{
  display: inline-flex; align-items: center; padding: 2px 6px;
  border-radius: 6px; background: #f1f1f1; color: #333; font-size: 11px;
}
.app-card__status{
  background: #eef6ff; color: #1967d2; padding: 2px 6px; border-radius: 6px; font-size: 11px;
}
.app-card__links{ display: inline-flex; gap: 8px; margin-left: auto; }
.app-card__links .ext{ color: #666; text-decoration: none; }
.app-card__links .ext:hover{ color: #111; }

/* 空状態 */
.app-empty{
  padding: 40px 0;
  color: var(--app-muted);
}

/* ページネーション（テーマ統一に寄せた簡易版） */
.app-pagination{ margin: 22px auto 0; max-width: var(--wrap, 1200px); }
.app-pagination ul{ display:flex; gap:6px; align-items:center; justify-content:center; flex-wrap:wrap; }
.app-pagination a, .app-pagination span{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:8px; border:1px solid #ddd; background:#fff; text-decoration:none; color:#333;
}
.app-pagination li.is-current span{
  background:#111; color:#fff; border-color:#111;
}

/* 視覚的に非表示（スクリーンリーダー用ラベル） */
.visually-hidden{
  position:absolute!important; clip:rect(0 0 0 0)!important; width:1px!important; height:1px!important; overflow:hidden!important; white-space:nowrap!important; border:0!important; padding:0!important; margin:-1px!important;
}

/* ------------------------------------------------------------------
 * 追加の上書き（常に1行2件＋カード拡大）
 * 目的：
 *  - 1440px以上で3列になっていたのを「常に2列」に固定
 *  - 横幅はそのまま、カード内部（サムネ/余白/文字）を拡大
 * 実装：
 *  - 詳細度を .app-archive .app-grid として既存 .app-grid を確実に上書き
 *  - 既存ルールは残し、ここで“後勝ち”にすることで影響範囲を限定
 * ------------------------------------------------------------------ */

/* PC/タブレット：常に 2 カラム固定（1440px 以上でも 3 にならない） */
.app-archive .app-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1440px){
  .app-archive .app-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 3列化を明示的に打ち消す */
  }
}

/* カードを“少し大きく”（横幅は変えず内容を拡大） */
.app-archive .app-card{
  grid-template-columns: 140px 1fr;  /* サムネ 96→140 */
  gap: 18px;                          /* 余白を拡大 */
  padding: 18px;
}
.app-archive .app-card__thumb{
  width: 140px; height: 140px;
  border-radius: 14px;
}

/**
 * ★ここも “方針A（第3段）” の改修対象
 * - 大きいカード（140px）でも「枠→img直指定」で確実に cover を効かせる。
 * - クラス有無どちらでも同じ結果になるよう、両方のセレクタを維持。
 */
.app-archive .app-card__thumb-img{
  object-fit: cover;         /* ★枠いっぱい（見切れOK） */
  object-position: center;   /* ★中央寄せ */
  max-width: 100%;
  max-height: 100%;
}
.app-archive .app-card__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;         /* ★枠いっぱい（見切れOK） */
  object-position: center;
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.app-archive .app-card__title{
  font-size: 18px;
}
.app-archive .app-card__summary{
  font-size: 14px;
  -webkit-line-clamp: 4;  /* 情報量を少し増やす */
}
.app-archive .app-card__meta{
  gap: 10px 14px;
}

/* スマホでは従来の密度に戻す（縦スクロール量を抑制） */
@media (max-width: 640px){
  .app-archive .app-grid{ grid-template-columns: 1fr; }
  .app-archive .app-card{
    grid-template-columns: 96px 1fr;
    gap: 14px;
    padding: 14px;
  }
  .app-archive .app-card__thumb{ width: 96px; height: 96px; border-radius: 12px; }
  .app-archive .app-card__title{ font-size: 16px; }
  .app-archive .app-card__summary{ font-size: 13px; -webkit-line-clamp: 3; }
}

/* =========================================================
 * ▼▼▼ BLOG準拠のページネーションに“上書き”適用 ▼▼▼
 *   目的：
 *     - BLOG / NEWS と同じ体験に統一
 *       ・未選択は「文字だけ」（枠なし・背景なし）
 *       ・hover で“黒丸が下からスライド”→文字は白に
 *       ・現在ページは“常に黒丸＋白文字”（hoverで変化しない）
 *       ・＜ / ＞ も文字だけで同じ挙動
 *   実装：
 *     - 既存の簡易版（上の .app-pagination ...）は残し、ここで後勝ち上書き
 *     - 擬似要素 ::after を“背面レイヤー”として使用（isolation で積層安定）
 *     - アクセシビリティ：:focus-visible のアウトラインを明示
 * ========================================================= */

/* サイズや色のトークン。必要に応じて数値を調整してください */
.app-pagination{
  --app-pager-size: 44px;        /* 円形ヒットエリアの直径（BLOG/NEWSに合わせて 44px） */
  --app-pager-gap: 8px;          /* ボタン間隔 */
}
.app-pagination ul{
  gap: var(--app-pager-gap);
}

/* ▼ 基本スタイル：初期は“文字だけ”に見せる（枠・背景なし）
   - 円形のヒットエリアは維持（操作性を落とさない）
   - 背面の黒丸レイヤーは ::after で用意（初期は下に隠す） */
.app-pagination a.page-numbers,
.app-pagination .page-numbers{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--app-pager-size);
  height: var(--app-pager-size);
  border-radius: 999px;

  /* 既存（簡易版）の枠・背景を打ち消す */
  background: none !important;
  border: none !important;

  color: var(--app-accent);
  text-decoration: none;
  line-height: 1;

  isolation: isolate;            /* 擬似要素の積層を安定化（-1 を背面に閉じ込める） */
  overflow: hidden;              /* 円形の内側に塗りをクリップ */
  transition: color .35s ease, transform .06s ease;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/* ▼ 下から黒丸がスライドインする背面レイヤー */
.app-pagination a.page-numbers::after,
.app-pagination .page-numbers::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--app-accent);

  /* 初期は“下に隠す” → hover で 0 に */
  transform: translateY(100%);
  transition: transform .35s ease;

  z-index: -1;                  /* テキストより背面（isolation により安全） */
}

/* ▼ hover：黒丸スライド＋文字は白に反転（リンクのみ） */
.app-pagination a.page-numbers:hover{
  color: #fff;
}
.app-pagination a.page-numbers:hover::after{
  transform: translateY(0);
}

/* ▼ 現在ページ：常に黒丸＋白文字（hoverしても変化しない） */
.app-pagination .page-numbers.current{
  color: #fff !important;
}
.app-pagination .page-numbers.current::after{
  transform: translateY(0);
}

/* ▼ prev / next（＜ / ＞）も数字と同じ寸法・同じ挙動 */
.app-pagination .page-numbers.prev,
.app-pagination .page-numbers.next{
  width: var(--app-pager-size);
  height: var(--app-pager-size);
}

/* ▼ キーボード操作の見失い防止（フォーカスリング） */
.app-pagination .page-numbers:focus-visible{
  outline: 2px solid var(--app-accent);
  outline-offset: 2px;
}

/* ▼ 動きに弱い環境配慮（即時表示） */
@media (prefers-reduced-motion: reduce){
  .app-pagination a.page-numbers::after,
  .app-pagination .page-numbers::after{
    transition: none !important;
  }
}