/**
 * /css/top_application.css
 * ------------------------------------------------------------
 * Applications セクション用スタイル
 * - トップページの「APPLICATIONS」エリア全体（見出し・ローテーター・ボタン）
 * - カードのレイアウト、フェードローテーション、ガラス風メタパネル
 * - JS 無効時のフォールバック（グリッド表示）もカバー
 *
 * 主な要素構成（index.php 側想定）
 *   #application.top-application
 *     ├─ .top-application__header       … 見出し・リード
 *     ├─ .app-rotator                    … カードステージ
 *     │    └─ .app-list > .app-item > a.app-card.app-card__link
 *     │          ├─ .app-card__media / .app-card__noimg
 *     │          ├─ .app-card__meta     … タイトル／キャッチ／バージョン等
 *     │          └─ .app-card__overlay  … 視覚用オーバーレイ（イベントは拾わない）
 *     └─ .application-more               … 「VIEW ALL」ボタン
 *
 * JS 側との役割分担
 * - .app-rotator.is-rotator         … 1枚ずつクロスフェードで切り替え
 * - .app-item.is-active / .is-leaving
 * - .app-card.is-hover              … ホバー検知（mouse/keyboard）
 * - .app-card.is-inview             … 画面内に入ったときのフェードイン演出用
 * - .top-application.no-hover-ux    … ホバー演出を無効化したい端末で付与
 *
 * デザインの方針
 * - 16:9 のヒーロー画像と、その上にガラス風メタパネルを重ねて表示
 * - SP ではメタをカード下に通常フローで配置し、読みやすさを優先
 * - 小さなアイキャッチは「見た目の外寸」を変えずに中身だけ調整できるよう、
 *   calc と content-box を組み合わせて制御
 *
 * アクセシビリティ
 * - :focus-visible でカード全体にフォーカスリングを表示
 * - prefers-reduced-motion: reduce では主要なトランジションを無効化
 *
 * ------------------------------------------------------------
 * ★今回の改修（index.php Application セクション設定化との整合）
 * ------------------------------------------------------------
 * - PHP 側で .app-rotator に data-interval / data-duration を出力するようになったため、
 *   CSS では「固定値で決め打ちしない」方針を強化。
 *   - 既存の CSS 変数 --appFadeMs / --appIntervalMs は “フォールバック” として保持しつつ、
 *   - JS が data 属性から読んで style.setProperty('--appFadeMs', '...ms') などを行う前提でも破綻しない。
 *
 * 重要：
 * - “修正対象以外のコードは必ず維持” 方針に従い、
 *   既存の宣言・順序・セレクタは極力維持する。
 *
 * ------------------------------------------------------------
 * ★今回の改修（Application：フロント反映の受け皿追加）
 * ------------------------------------------------------------
 * - Theme Settings で設定化した「changelog枠の背景色/透明度/テキスト色」を
 *   フロント側（方式A：テンプレの style で CSS 変数注入）で反映できるようにする。
 *
 *   追加する CSS 変数（テンプレ側で section.style に注入する想定）：
 *   - --app-changelog-bg : changelog枠の背景（rgba）
 *   - --app-changelog-fg : changelog枠の文字色（hex/rgb）
 *
 *   重要：
 *   - 既存の見た目を壊さないため、CSS 側では var(..., <従来値>) の
 *     “フォールバック” を必ず保持する。
 * ------------------------------------------------------------
 */

/* ============================================================
 * 1. 共通トークン（アプリ用 CSS 変数）
 *    - カードの余白、角丸、影、ガラス風パネルなどの基準値
 * ============================================================ */
:root {
  --app-gap: 28px;
  --app-gap-tb: 24px;
  --app-gap-sp: 16px;

  --app-radius: 18px;
  --app-hero-ratio: 16/9;
  --app-hero-zoom: 1.06;

  --app-shadow: 0 8px 28px rgba(0,0,0,.18);
  --app-shadow-soft: 0 4px 16px rgba(0,0,0,.12);

  --app-overlay: #333;
  --app-text-strong: #111;
  --app-text-muted: #777;

  /* ローテーターのフェード時間・インターバル（JS からも参照想定） */
  --appFadeMs: 600ms;
  --appIntervalMs: 4000ms;

  /* ガラス風メタパネル共通 */
  --app-glass-bg: rgba(255,255,255,.10);
  --app-glass-border: rgba(255,255,255,.28);
  --app-glass-blur: 14px;
  --app-glass-shadow: 0 10px 30px rgba(0,0,0,.24);

  /* メタ文字色（Applications セクションで黒系に統一） */
  --app-meta-fg-sp: #111;
  --app-meta-muted-sp: #555;

  /* タイトル横アイキャッチ（小さな正方形）の寸法管理用 */
  --app-ec-inset: clamp(4px, 1vw, 8px);
  --app-ec-border: 1px;
  --app-ec-size: clamp(36px, 7vw, 56px);
}

/* ============================================================
 * 2. セクション全体（背景・下マージン）
 * ============================================================ */
.top-application {
  position: relative;
  width: 100%;
  margin-block-end: clamp(56px, 8vw, 120px);
  background: var(--applicationBg, var(--pageBg, #f7f7f7));

  /* Applications では小アイキャッチの内側余白をデフォルト 0 に */
  --app-ec-inset: 0px;
}

/* 初期状態の見出しブロック（位置上書きは後半で実施） */
.top-application__header {
  position: relative;
  z-index: 2;
  margin: 0 auto 1.5rem;
  max-width: min(92vw, 1280px);
  padding-inline: 2vw;
}
.top-application__title {
  font-size: clamp(28px, 6vw, 56px);
  letter-spacing: .06em;
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}
.top-application__lead {
  margin-top: .25rem;
  color: var(--app-text-muted);
  font-size: clamp(12px, 2.2vw, 14px);
}

/* ============================================================
 * 3. ローテーターのステージとフォールバックグリッド
 *    - JS 無効時：グリッドで複数カードを一覧表示
 *    - JS 有効時：.is-rotator を付与して 1枚ずつフェード切り替え
 * ============================================================ */
.app-rotator {
  position: relative;
  width: min(96vw, 1440px);
  max-width: min(96vw, 1440px);
  margin-inline: auto;
  padding-inline: 2vw;
  padding-bottom: 2px; /* ドロップシャドウが切れないよう下に余白を確保 */
}

/* JS 無効時：シンプルなグリッド表示 */
.app-rotator .app-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(280px, 40vw, 420px), 1fr));
  gap: var(--app-gap);
  width: 100%;
}

/* JS 有効＋ローテーター有効時：同じ位置にカードを重ねておく */
.app-rotator.is-rotator .app-list {
  position: relative;
  min-height: 320px; /* LCP 安定のために最低高を確保 */
}

/* 各スライド：デフォルトは非表示 */
.app-rotator.is-rotator .app-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;

  /**
   * ★設定化ポイント
   * - フェード時間は CSS 変数 --appFadeMs を参照（既存維持）
   * - JS が data-duration を読んで上書きしても、そのまま反映される
   */
  transition: opacity var(--appFadeMs) ease;

  will-change: opacity;
}
.app-rotator.is-rotator .app-item.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}
.app-rotator.is-rotator .app-item.is-leaving { z-index: 1; }

/* .is-active が付かないトラブル時でも、先頭カードだけは見せる保険 */
.app-rotator.is-rotator:not(:has(.app-item.is-active)) .app-item:first-child {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
 * 4. カード本体（共通枠・影・inview 演出）
 * ============================================================ */
.app-card {
  position: relative;
  display: block;
  border-radius: var(--app-radius);
  overflow: clip; /* 画像拡大時に角丸をはみ出させない */
  box-shadow: var(--app-shadow-soft);
  background: #fff;
  transition: box-shadow .35s ease, transform .35s ease, opacity .4s ease;
  opacity: 0;
  transform: translateY(12px);
}

/* JS が .is-inview を付けたらフェードイン（後半で Safety override もあり） */
.app-card.is-inview {
  opacity: 1;
  transform: none;
}

/* カード全面をリンクにし、キーボードフォーカスにも対応 */
.app-card__link {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(88px, 1fr); /* [画像] + [メタ]（PC フォールバック用） */
  min-height: 100%;
  outline: none;
}
.app-card__link:focus-visible {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px #111;
  border-radius: var(--app-radius);
}

/* ============================================================
 * 4-1. ヒーロー画像（16:9）とその上の軽いグラデーション
 * ============================================================ */
.app-card__media {
  position: relative;
  aspect-ratio: var(--app-hero-ratio);
  overflow: hidden;
  isolation: isolate;
  background: #f4f4f4;
  margin: 0;
}
.app-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .5s cubic-bezier(.2,.6,.2,1);
  will-change: transform;
}

/* 下側の文字が読みやすくなるよう、薄いグラデーションを追加 */
.app-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,.06));
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}

/* ============================================================
 * 4-2. メタ情報エリア（ガラス風パネル）
 *      - 初期定義では下に隠しておき、ホバーでスライドアップ
 *      - Applications 内では後半で「常時表示」に上書き
 * ============================================================ */
.app-card__meta {
  position: absolute;
  inset: auto 0 0 0;
  background: var(--app-glass-bg);
  color: #fff;
  padding: clamp(12px, 2.6vw, 16px) clamp(14px, 3vw, 18px);
  transform: translateY(100%);
  transition: transform .38s cubic-bezier(.2,.6,.2,1);
  display: grid;
  gap: .35rem;
  -webkit-backdrop-filter: saturate(1.1) blur(var(--app-glass-blur));
  backdrop-filter: saturate(1.1) blur(var(--app-glass-blur));
  border: 1px solid var(--app-glass-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-glass-shadow);
}

/* メタ内のテキスト基本スタイル */
.app-card__title {
  font-size: clamp(16px, 3.2vw, 20px);
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: .02em;
}
.app-card__catch {
  font-size: clamp(12px, 2.6vw, 14px);
  color: rgba(255,255,255,.92);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.app-card__info {
  display: flex;
  align-items: center;
  gap: .75rem;
  opacity: .95;
  font-size: 12px;
  letter-spacing: .02em;
}
.app-card__ver { white-space: nowrap; }
.app-card__dot { opacity: .7; }
.app-card__upd { white-space: nowrap; }

/* ============================================================
 * 4-3. タイトル横アイキャッチ（小さな正方形サムネ）
 *      - 外から見えるサイズを --app-ec-size で統一しつつ、中身だけ調整可能
 * ============================================================ */
.app-card__header{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(8px, 2vw, 12px);
  min-height: var(--app-ec-size);
}
.app-card__eyecatch{
  /* 内側の内容寸法を calc で算出し、外寸が常に --app-ec-size になるよう調整 */
  width: calc(var(--app-ec-size) - (calc(var(--app-ec-inset) * 2) + calc(var(--app-ec-border) * 2)));
  height: calc(var(--app-ec-size) - (calc(var(--app-ec-inset) * 2) + calc(var(--app-ec-border) * 2)));

  box-sizing: content-box;
  padding: var(--app-ec-inset);
  border: var(--app-ec-border) solid rgba(255,255,255,.35);

  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  display: block;
  background: rgba(255,255,255,.05);
  align-self: center;
}
/* アイキャッチ内の画像は枠内に収まるよう contain で内接配置 */
.app-card__eyecatch img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  min-width: 0;
  min-height: 0;
}
/* 微妙な沈み込みが気になる環境向けの補正用クラス */
.app-card__eyecatch.app-ec--optical-lift{
  transform: translateY(-0.5px);
  will-change: transform;
}

/* アイキャッチ画像が無い場合に使うモノグラムバッジ */
.app-ec-noimg{
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-weight: 800; letter-spacing: .04em;
  color: #fff;
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.05));
  -webkit-backdrop-filter: blur(calc(var(--app-glass-blur) * .7));
  backdrop-filter: blur(calc(var(--app-glass-blur) * .7));
}

/* チェンジログ枠（メタ内の小さなボックス） */
.app-card__changelog{
  margin-top: .35rem;
  border: 1px solid var(--app-glass-border);
  border-radius: calc(var(--app-radius) - 6px);
  padding: .5rem .75rem;

  /**
   * ★今回の改修（フロント反映：受け皿）
   * - Theme Settings（方式A：テンプレの style 注入）で設定された値を反映できるよう、
   *   直書きの rgba(...) を CSS 変数参照へ置き換える。
   *
   * - --app-changelog-bg : changelog枠の背景（rgba）
   * - --app-changelog-fg : changelog枠の文字色（hex/rgb）
   *
   * 重要：
   * - 既存デザイン維持のため、必ずフォールバックに従来値を残す。
   */
  background: var(--app-changelog-bg, rgba(0,0,0,.10));
  color: var(--app-changelog-fg, inherit);
}
.app-card__changelog.is-empty{
  opacity: .85;
}
.app-changelog{
  list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem;
}
.app-changelog__item{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .75rem;
  font-size: 12px; line-height: 1.5;
}
.app-changelog__ver{
  padding: 2px 6px; border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28);
}
.app-changelog__date{
  opacity: .9;
}
.app-changelog__summary{
  opacity: .95;
}

/* ============================================================
 * 4-4. ホバー／フォーカス時の動き
 *      - 画像のズームと、メタパネルのスライドアップ
 * ============================================================ */
.app-card.is-hover .app-card__img,
.app-card:has(.app-card__link:focus-visible) .app-card__img {
  transform: scale(var(--app-hero-zoom));
}
.app-card.is-hover .app-card__meta,
.app-card:has(.app-card__link:focus-visible) .app-card__meta {
  transform: translateY(0);
}
.app-card.is-hover .app-card__media::after,
.app-card:has(.app-card__link:focus-visible) .app-card__media::after {
  opacity: 1;
}

/* マウスホバー可能な環境のみ影の変化を追加 */
@media (hover:hover) {
  .app-card.is-hover { box-shadow: var(--app-shadow); }
}

/* 視覚用オーバーレイ（スクロールやクリックをブロックしない） */
.app-card__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* JS 側で pointer-events:none を強制したいとき用の補助クラス */
.app-card__overlay--pe-none {
  pointer-events: none !important;
}

/* ============================================================
 * 5. NO IMAGE 用のメインビジュアル（画像なしカード）
 * ============================================================ */
.app-card__noimg {
  position: relative;
  width: 100%;
  aspect-ratio: var(--app-hero-ratio);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.app-card__noimg__monogram {
  color: #fff;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: clamp(22px, 6vw, 30px);
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.app-card__noimg__tagline {
  margin-top: .25rem;
  color: rgba(255,255,255,.92);
  font-size: clamp(12px, 3.2vw, 14px);
  text-shadow: 0 1px 8px rgba(0,0,0,.28);
}

/* ============================================================
 * 6. レスポンシブ（タブレット・スマホ向けグリッド調整）
 * ============================================================ */
@media (max-width: 1279px) {
  .app-rotator .app-list { gap: var(--app-gap-tb); }
}
@media (max-width: 767px) {
  .app-rotator { padding-inline: 4vw; }
  .app-rotator .app-list { gap: var(--app-gap-sp); }
  .app-card__title { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

  /* SP では小アイキャッチをカード枠いっぱいに配置するため、インセットを 0 に固定 */
  .top-application{ --app-ec-inset: 0px; }
}

/* ============================================================
 * 7. 動画・canvas をヒーロー領域に使う場合のスタイル
 * ============================================================ */
.app-card__media video,
.app-card__media canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
}

/* ============================================================
 * 8. 小さなユーティリティ（モノスペースフォント）
 * ============================================================ */
.app-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ============================================================
 * 9. OS 設定が「動きを減らす」のときにアニメーションを抑制
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .app-rotator.is-rotator .app-item,
  .app-card,
  .app-card__img,
  .app-card__meta {
    transition: none !important;
  }
}

/* ============================================================
 * 10. メタパネルの角丸を上下とも統一
 * ============================================================ */
.app-card__meta {
  border-bottom-left-radius: var(--app-radius);
  border-bottom-right-radius: var(--app-radius);
  border-top-left-radius: var(--app-radius);
  border-top-right-radius: var(--app-radius);
}

/* ============================================================
 * 11. セクション下部余白と Blog セクションとの境界調整
 * ============================================================ */
.application-more {
  margin-top: clamp(16px, 3vw, 28px);
}

/* Applications セクション自体の下側バッファ */
#application.top-application {
  padding-block-end: clamp(72px, 10vw, 160px);
}

/* Blog セクションの上余白は Blog 側で管理するため marginal リセット */
#application + #blog { margin-top: 0 !important; }

/* ============================================================
 * 12. FULLSCREEN モード
 *     - Applications セクションを画面高にフィットさせるバリエーション
 * ============================================================ */
.top-application.is-fullscreen {
  min-height: calc(100svh - var(--stickyTop, 0px));
  display: grid;
  grid-template-rows: auto 1fr auto;  /* [見出し][ローテーター][VIEW ALL] */
  row-gap: clamp(12px, 3vh, 24px);
  padding-block: clamp(12px, 3vh, 24px);
  margin-block-end: 0;
  background: var(--applicationBg, var(--pageBg, #f7f7f7));
}

/* FULLSCREEN 時は下バッファを抑え、純粋な 1画面構成にする */
.top-application.is-fullscreen#application {
  padding-block-end: 0;
}

/* FULLSCREEN 時のステージは高さいっぱい & 中央寄せ */
.top-application.is-fullscreen .app-rotator {
  width: min(96vw, 1440px);
  height: 100%;
  display: grid;
  place-items: center;
}

/* リストも親と同じ高さにし、絶対配置されたカードを安定させる */
.top-application.is-fullscreen .app-rotator .app-list {
  height: 100%;
}

/* FULLSCREEN＋ローテーター時もカードを画面中央に配置 */
.top-application.is-fullscreen .app-rotator.is-rotator .app-item {
  display: grid;
  place-items: center;
}

/* FULLSCREEN 時にカードが確実に画面内に収まるよう、縦→横比で最大幅を算出 */
.top-application.is-fullscreen .app-card {
  --app_fs_outer_chrome: clamp(140px, 20vh, 260px);
  --app_fs_card_chrome: clamp(110px, 14vh, 200px);
  max-width:
    min(
      92vw,
      1200px,
      max(280px,
        calc((100svh - var(--stickyTop, 0px) - var(--app_fs_outer_chrome) - var(--app_fs_card_chrome)) * 16 / 9)
      )
    );
  width: 100%;
  margin-inline: auto;
}

/* FULLSCREEN 時はカードを [メディア][メタ] の 2行構成に固定 */
.top-application.is-fullscreen .app-card__link {
  grid-template-rows: auto auto;
}

/* Blog セクションとの境界調整（FULLSCREEN 版） */
.top-application.is-fullscreen + #blog { margin-top: 0 !important; }

/* ============================================================
 * 13. Safety override
 *     - JS が動かない環境でもカードが常に表示されるようにする
 * ============================================================ */
.app-card {
  opacity: 1;
  transform: none;
}
.app-card.is-inview {
  opacity: 1;
  transform: none;
}

/* ============================================================
 * 14. Applications 見出しの最終位置調整
 *     - Gallery / About セクションと揃えた絶対配置
 *     - SP での文字はみ出し防止
 * ============================================================ */
.top-application__header{
  position: absolute;
  top:  var(--aboutPadTop, 50px);
  left: var(--aboutPadX, 40px);
  z-index: 2;
  padding: 0; margin: 0;
  pointer-events: none;
  max-width: calc(100vw - var(--aboutPadX, 40px) * 2);
}
.top-application__title{
  font-size: 5.5rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.2;
  margin: -10px 0 5px;
  color: #333;
  text-align: left;
}
.top-application__lead{
  display: block;
  font-size: 1rem;
  font-weight: 400;
  color: #666;
  margin-top: 5px;
  letter-spacing: .03em;
}
.top-application.is-fullscreen.is-offset .top-application__header{
  position: relative;
  top: auto;
  left: auto;
  z-index: 2;
  padding: var(--aboutPadTop, 50px) var(--aboutPadX, 40px) 0 var(--aboutPadX, 40px);
  pointer-events: auto;
}
/* SP ではフォントサイズを自動調整しつつ、1行に収める */
@media (max-width: 768px){
  .top-application__header{
    max-width: calc(100vw - var(--aboutPadX, 40px) * 2);
  }
  .top-application__title{
    font-size: clamp(20px, 9.5vw, 40px);
    letter-spacing: .06em;
    line-height: 1.08;
    white-space: nowrap;
  }
}
/* 非常に幅の狭い端末向けの保険 */
@media (max-width: 360px){
  .top-application__title{
    font-size: clamp(18px, 10.2vw, 34px);
  }
}

/* ============================================================
 * 15. 「VIEW ALL」ボタン（NEWS セクションと共通の演出）
 *     - 下から塗りつぶしアニメーション
 *     - 矢印アイコンのスワップ
 * ============================================================ */
.top-application .application-more{
  margin-top: 22px;
  display: flex;
  justify-content: center;
}
.top-application .application-more a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 56px 14px 42px;
  border: 1px solid #333;
  border-radius: 30px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
  color: #333;
  text-decoration: none;
  cursor: pointer;

  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;

  background-image: linear-gradient(#333, #333);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 0%;
  transition:
    background-size 320ms ease,
    color           320ms ease,
    border-color    320ms ease;
}
.top-application .application-more a::after{
  content: "➡";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%) translateX(0);
  opacity: 1;
  color: currentColor;
  transition:
    transform 320ms ease,
    opacity   320ms ease;
}
.top-application .application-more a::before{
  content: "➡";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%) translateX(-0.7em);
  opacity: 0;
  color: currentColor;
  transition:
    transform 320ms ease,
    opacity   320ms ease;
}
.top-application .application-more a:hover,
.top-application .application-more a:focus-visible{
  color: #fff;
  border-color: #333;
  background-size: 100% calc(100% + 5px);
}

/**
 * 重要：
 * - 下のセレクタは “元コードどおり” 全角読点（、）が含まれている。
 * - これは CSS としては無効になり得るが、「修正対象以外は維持」方針のため
 *   ここでは変更しない（＝現状の挙動を勝手に変えない）。
 * - 実際に hover の矢印スワップが効かない場合、後続タスクで“明示的に修正対象”として直す。
 */
.top-application .application-more a:hover::after、 /* ← 全角読点は元コードどおり維持 */
.top-application .application-more a:focus-visible::after{
  transform: translateY(-50%) translateX(0.7em);
  opacity: 0;
}
.top-application .application-more a:hover::before,
.top-application .application-more a:focus-visible::before{
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}
.top-application .application-more a:focus-visible{
  outline: 2px solid #333;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  .top-application .application-more a{
    transition: none;
    background-image: none;
    background-color: transparent;
  }
  .top-application .application-more a:hover,
  .top-application .application-more a:focus-visible{
    background-color: #333;
    color: #fff;
  }
  .top-application .application-more a::before,
  .top-application .application-more a::after{
    transition: none;
    transform: translateY(-50%) translateX(0);
    opacity: 1;
  }
}

/* ============================================================
 * 16. Applications 専用：メタパネルの再設計
 *     - 常時ガラスパネル表示＋黒系文字
 *     - PC / TB ではカード下部に重ねて配置
 * ============================================================ */
.top-application .app-card__meta{
  position: absolute !important;
  left: clamp(12px, 2.2vw, 24px) !important;
  right: clamp(12px, 2.2vw, 24px) !important;
  bottom: clamp(12px, 2.2vw, 18px) !important;
  top: auto !important;

  background: var(--app-glass-bg) !important;
  color: var(--app-meta-fg-sp) !important;
  -webkit-backdrop-filter: saturate(1.1) blur(var(--app-glass-blur)) !important;
  backdrop-filter: saturate(1.1) blur(var(--app-glass-blur)) !important;
  border: 1px solid var(--app-glass-border) !important;
  border-radius: var(--app-radius) !important;
  box-shadow: var(--app-glass-shadow) !important;

  transform: none !important;
}

/* メタ内テキストを黒系トーンに統一（Applications セクション限定） */
.top-application .app-card__title{
  color: var(--app-meta-fg-sp) !important;
}
.top-application .app-card__catch,
.top-application .app-card__info,
.top-application .app-card__ver,
.top-application .app-card__upd,
.top-application .app-card__dot{
  color: var(--app-meta-muted-sp) !important;
}
.top-application .app-card__meta a{
  color: inherit !important;
}

/* Applications ではホバー時もメタパネルの位置を動かさない */
.top-application .app-card.is-hover .app-card__meta,
.top-application .app-card:has(.app-card__link:focus-visible) .app-card__meta{
  transform: none !important;
}

/* 画像下グラデーションはガラスと併用しても邪魔にならない程度に常時表示 */
.top-application .app-card__media::after{ opacity: .25; }

/* ローテーター使用時のリンク高さ調整（構造はそのまま維持） */
.top-application .app-rotator.is-rotator .app-card__link{
  min-height: auto !important;
}
.top-application .app-card__link{
  grid-template-rows: auto !important;
}

/* ============================================================
 * 17. スマホ最適化（メタパネルを通常フローに戻し、読みやすさ優先）
 * ============================================================ */
@media (max-width: 767px){
  .top-application .app-card__link{
    grid-template-rows: auto auto !important;
  }
  .top-application .app-card__meta{
    position: static !important;
    transform: none !important;
    transition: none !important;
    width: 100% !important;
    margin-top: 10px;
    max-height: none !important;
    overflow: visible !important;
    color: var(--app-meta-fg-sp) !important;
  }

  .top-application .app-card__title{
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    color: var(--app-meta-fg-sp) !important;
  }
  .top-application .app-card__catch,
  .top-application .app-card__info,
  .top-application .app-card__ver,
  .top-application .app-card__upd,
  .top-application .app-card__dot{
    color: var(--app-meta-muted-sp) !important;
    opacity: 1 !important;
  }

  .top-application .app-card__meta a{
    color: inherit !important;
  }

  .top-application .app-card.is-hover .app-card__img,
  .top-application .app-card:has(.app-card__link:focus-visible) .app-card__img{
    transform: none !important;
  }
  .top-application .app-card.is-hover .app-card__meta,
  .top-application .app-card:has(.app-card__link:focus-visible) .app-card__meta{
    transform: none !important;
    transition: none !important;
  }

  /* SP ではリンクの下線を全て無効化（親リンク・内側リンクともに） */
  .top-application .app-card__link,
  .top-application .app-card__link:link,
  .top-application .app-card__link:visited,
  .top-application .app-card__link:hover,
  .top-application .app-card__link:focus,
  .top-application .app-card__link:active,
  .top-application .app-card__meta a,
  .top-application .app-card__meta a:link,
  .top-application .app-card__meta a:visited,
  .top-application .app-card__meta a:hover,
  .top-application .app-card__meta a:focus,
  .top-application .app-card__meta a:active{
    text-decoration: none !important;
  }
}

/* ============================================================
 * 18. JS フラグによるホバー演出の一括停止（no-hover-ux）
 * ============================================================ */
.top-application.no-hover-ux .app-card.is-hover .app-card__img,
.top-application.no-hover-ux .app-card:has(.app-card__link:focus-visible) .app-card__img{
  transform: none !important;
}
.top-application.no-hover-ux .app-card.is-hover .app-card__meta,
.top-application.no-hover-ux .app-card:has(.app-card__link:focus-visible) .app-card__meta{
  transform: none !important;
  transition: none !important;
}
.top-application.no-hover-ux .app-card__media::after{ opacity: 0 !important; }
.top-application.no-hover-ux .app-card__link,
.top-application.no-hover-ux .app-card__meta a{
  text-decoration: none !important;
}

/* ============================================================
 * 19. hover: none 環境（主にタッチデバイス）の追加保護
 * ============================================================ */
@media (hover: none){
  .top-application .app-card.is-hover .app-card__img{ transform:none !important; transition: none !important; }
  .top-application .app-card.is-hover .app-card__meta{ transform:none !important; transition: none !important; }
  .top-application .app-card:has(.app-card__link:focus-visible) .app-card__meta{ transform:none !important; transition: none !important; }
  .top-application .app-card__media::after{ opacity: 0 !important; }
}

/* ============================================================
 * 20. Applications 専用 NO IMAGE 表現（ベース仕様を維持）
 * ============================================================ */
.top-application .app-card__noimg{
  background: #eee !important;
  position: relative;
  display: grid;
  place-items: center;
  user-select: none;
}
.top-application .app-card__noimg::before{
  content: "no-image";
  color: #b4b4b4;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: lowercase;
  font-size: clamp(14px, 3.6vw, 18px);
  line-height: 1;
}
.top-application .app-card__noimg__monogram,
.top-application .app-card__noimg__tagline{
  display: none !重要;
}

/* ============================================================
 * 21. Applications セクション内リンクの下線を完全に無効化
 * ============================================================ */
.top-application .app-card__link,
.top-application .app-card__link:link,
.top-application .app-card__link:visited,
.top-application .app-card__link:hover,
.top-application .app-card__link:focus,
.top-application .app-card__link:active,
.top-application .app-card__meta a,
.top-application .app-card__meta a:link,
.top-application .app-card__meta a:visited,
.top-application .app-card__meta a:hover,
.top-application .app-card__meta a:focus,
.top-application .app-card__meta a:active{
  text-decoration: none !important;
}
.top-application .app-card__noimg::before{
  text-decoration: none;
}