/**
 * /css/application/single-application.css
 * ------------------------------------------------------------
 * “WP プラグイン詳細ページ風”レイアウト用のスタイル。
 * 余白 → パンくず → ヒーロー → 見出し帯 → タブ → 2カラム の順で構成。
 *
 * 変数:
 *  --stickyTop : 固定ヘッダーの実高さ。common.js 等で上書き想定（未設定時は --nav-h を参照）
 *  --nav-h     : 固定ヘッダー高のデフォルト（フォールバック用 / 64px）。
 *  --wrap      : コンテンツ最大幅。
 *
 *  直近の変更点
 *    1) ヒーロー画像の縦横比を変数化（--hero-ratio-sp / --hero-ratio-pc）
 *       → モバイルは 16:9、PC は 21:9 を既定に。値を入れ替えるだけで高さ調整が可能。
 *    2) タブだけを見出しタイトルの開始位置に揃えるためのインデント変数を導入。
 *       ※ 前回は本文（左カラム）にもインデントを付けたため横幅が狭く見えましたが、
 *          今回は “タブだけ” に適用し、本文は元の幅に戻しています（★）。
 *    3) --tabs-offset を導入（初期 300px）。必要に応じて 0/16/24…px に調整可能。
 *    4) ★今回：全体幅の上限を少し広げる（A）＋ 右カラム情報表のラベル幅を可変・改行抑止（B）
 *    5) ★今回追加（編集リンク・配置A／リンク見た目の統一）：
 *       - 見出しカード（.app-head__inner）の右上に “編集” リンクを固定配置（配置A）
 *       - リンクのデザインは「点線下線（dotted）」＋「文字色＝本文色（var(--ink)）」に統一
 *       - UA の visited（紫）を確実に無効化するため :link / :visited でも色を固定
 *
 *    6) ★今回改修（スクショ拡大表示：テーマ共通ライトボックスへ統一）：
 *       - 独自実装（.app-overlay 等）は廃止し、共通 lightbox.css / lightbox.js を利用する。
 *       - クリック対象は data-lightbox-root 配下の画像（lightbox.js の規約）に統一。
 *       - JS 無効時は、リンク（<a target="_blank"> 等）による従来挙動へ自然にフォールバック。
 *
 * ★今回の改修（動画対応：ヒーロー）：
 *    - single-application.php で <video class="app-hero__img"> を描画する場合があるため、
 *      既存の .app-hero__img（画像）と同じ枠・比率で動画も表示できるように調整。
 *    - 既存の画像表示は完全維持し、video だけに副作用が出ないように最小変更で追加する。
 *
 * ★今回の改修（Xシェアボタン追加）：
 *    - single-application.php に追加した `.app-head__tools` / `.app-xshare` に対応。
 *    - NEWS詳細ページのXボタンと同じ思想で、黒い正円ボタン＋白いXロゴにする。
 *    - 既存の編集リンクは `.app-head__tools` 内に移動するため、
 *      位置決めは `.app-head__tools` が担当し、`.app-head__edit` は通常フローへ戻す。
 *    - Xボタン追加により右上ツール幅が増えるため、タイトル右側余白を拡張する。
 * ------------------------------------------------------------
 */

:root{
  --nav-h: 64px;
  /* Gallery 詳細と同じ思想：JS が実測値をここへ代入。未設定時は nav-h にフォールバック */
  --stickyTop: var(--nav-h);

  /* ★A: 全体幅をわずかに拡張（以前: clamp(960px, 86vw, 1120px)） */
  --wrap: clamp(1040px, 90vw, 1280px);

  --radius: 12px;
  --shadow: 0 6px 18px rgba(0,0,0,.08);
  --bd: 1px solid #e6e6e6;
  --ink: #111;
  --muted: #666;
  --bg: #fff;
  --chip: #f4f5f7;
  --tone: #0b6cff;
  --alert: #b00020;

  /* ヒーロー比率（端末別）— ここを書き換えるだけで高さ調整が可能 */
  --hero-ratio-sp: 16 / 9;  /* スマホ既定 */
  --hero-ratio-pc: 21 / 9;  /* PC既定（薄め）。24/9, 32/9 等にしてもOK */

  /* 見出しカードの“タイトル開始位置”を算出するためのパーツ */
  --head-pad-x: 16px;  /* 見出しカードの左右パディング（padding: 14px 16px の 16 部分） */
  --head-icon:  88px;  /* 左のアイコンの幅 */
  --head-gap:   14px;  /* アイコン列と本文列のギャップ */
  --head-indent: calc(var(--head-pad-x) + var(--head-icon) + var(--head-gap)); /* 16 + 88 + 14 = 118px */

  /* タブだけの追加オフセット（右へ寄せたい時に + の値にする） */
  --tabs-offset: 200px;

  /* ★B: 右カラム情報表のラベル最小幅（可変にして改行を抑止） */
  --info-label-min: 128px;
}

/* ★改修：他ページと同じ背景（common.css の --pageBg）に統一（未定義時は白へフォールバック） */
.app{ color: var(--ink); background: var(--pageBg, #fff); }

/* 1) ヘッダ分スペーサ（レガシー互換） */
.app__spacer{ height: var(--nav-h); }

/* 中央寄せの共通内枠 */
.app-breadcrumb__inner,
.app-head__inner,
.app-layout{ width: min(var(--wrap), 100%); margin-inline: auto; }

/* 2) パンくずバー */
.app-breadcrumb{
  border-block: var(--bd);
  background:#fafafa;
  /* 固定ヘッダーに“押しつぶされない”よう、外側の余白で押し下げる */
  margin-top: var(--stickyTop);
}
/* アンカーリンク時に見出しがヘッダーの裏へ隠れるのを避けたい場合は有効化
html{ scroll-padding-top: var(--stickyTop); } */

.app-breadcrumb__inner{ padding: 10px 16px; }
.app-breadcrumb__list{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0; padding:0; list-style:none; font-size:14px; color:var(--muted); }
.app-breadcrumb__item{ display:flex; align-items:center; gap:10px; }
.app-breadcrumb__item a{ color:inherit; text-decoration:none; }
.app-breadcrumb__item a:hover{ text-decoration:underline; }
.app-breadcrumb__item + .app-breadcrumb__item::before{ content: "›"; color:#aaa; }

/* 3) ヒーロー */
.app-hero{ position:relative; width:100%; }
.app-hero__img,
.app-hero__placeholder{
  display:block; width:100%;
  aspect-ratio: var(--hero-ratio-sp); /* 変数化（SP） */
  object-fit: cover;
  background:#eef1f5;
}
.app-hero__placeholder{ display:grid; place-items:center; font-size:48px; color:#9aa3ad; font-weight:700; letter-spacing:.02em; }
.app-hero__veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0) 36%, rgba(0,0,0,.22) 100%); pointer-events:none; }

/* ============================================================
   ★追加（動画対応）：<video class="app-hero__img"> の見た目を画像と統一
   ------------------------------------------------------------
   方針：
   - single-application.php で動画ヒーローを出す際、既存CSSは .app-hero__img に乗る。
   - ただし <video> は UA 既定で “inline / baseline” などが混ざる場合があるため、
     video 要素だけ最低限補強する（画像へ副作用は出さない）。
   ============================================================ */
.app-hero__img[type],
.app-hero__img{ /* 既存維持：このブロックは変更しない（念のための再掲ではない） */ }

/* video のみ対象（img には当たらない） */
.app-hero video.app-hero__img{
  /* 見た目を揃える：display:block は既に付いているが、UA差の保険として指定 */
  display:block;
  width:100%;

  /* “同じ枠内で切り抜き” の思想を維持：object-fit と同義に近い挙動へ */
  object-fit: cover;

  /* controls の色味はブラウザ依存。背景色を黒寄せにして読み込み時のチラつきを抑止 */
  background:#000;
}

/* 4) 見出しカード（ヒーローに重ねる） */
.app-head{ margin-top: -28px; }
.app-head__inner{
  display:grid; grid-template-columns: 88px 1fr; gap:14px;
  background:var(--bg); border:var(--bd); border-radius:var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px; translate: 0 0;
  /* 右上に絶対配置する “Xシェア + 編集” ツール群の基準 */
  position: relative;
}
.app-head__icon{ width:88px; height:88px; border-radius:14px; overflow:hidden; border:var(--bd); background:#fff; display:grid; place-items:center; }
.app-head__icon img{ display:block; width:100%; height:100%; object-fit:cover; }
.app-head__icon--ph{ width:100%; height:100%; display:grid; place-items:center; background:#f0f2f5; color:#9aa3ad; font-weight:700; font-size:28px; }

.app-head__title{ margin:2px 0 4px; font-size:24px; line-height:1.35; }
/* ★改修：Xボタン + 編集リンクが右上に来てもタイトルへ重ならないよう、右余白を拡張 */
.app-head__title{ padding-right: 128px; }

.app-head__lead{ margin:0 0 10px; color:var(--muted); }

.app-head__actions{ display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 8px; }
.app-btn{
  display:inline-block; padding:8px 12px; border-radius:10px; border:1px solid #dcdcdc;
  background:#fafafa; color:#111; text-decoration:none; font-size:14px;
}
.app-btn:hover{ background:#f0f0f0; }

.app-head__meta{ margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; }
.app-badge{
  display:inline-grid; place-items:center; padding:2px 8px; border-radius:999px; font-size:12px; background:#111; color:#fff;
}
.app-badge--muted{ background:#dfe3e8; color:#333; }
.app-badge--tone{ background:var(--tone); }
.app-badge--alert{ background:var(--alert); }

.app-chip{
  display:inline-grid; place-items:center; padding:4px 10px; border-radius:999px; font-size:12px;
  background:var(--chip); color:#333; text-decoration:none; border:1px solid #e6e6e6;
}
.app-chip:hover{ background:#eaecef; }
.app-chip--muted{ background:#f7f7f7; }
.app-chip--status{ background:#eef7ff; border-color:#d6e7ff; }

/* ============================================================
   ★今回の改修（Xシェアボタン追加）：見出しカード右上ツール
   ------------------------------------------------------------
   single-application.php 側の構造：
     .app-head__tools
       ├─ .app-xshare
       └─ .app-head__edit

   役割：
   - 右上配置はこの .app-head__tools が担当する。
   - 既存の .app-head__edit は編集リンクの入れ物として残し、
     絶対配置は解除する。
   - XボタンはNEWS詳細と同じ思想で「黒い正円 + 白いXロゴ」にする。
   ============================================================ */
.app-head__tools{
  position:absolute;
  top:12px;
  right:16px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

/* NEWS詳細のXボタンと同じ考え方の黒丸ボタン */
.app-xshare{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:999px;
  background:#222;
  color:#fff;
  text-decoration:none;
  box-shadow:0 4px 12px rgba(0,0,0,.16);
  transition:
    transform .18s ease,
    background-color .18s ease,
    box-shadow .18s ease;
}

/* UAのリンク色・visited色の影響を受けないよう、状態ごとに色を固定 */
.app-xshare:link,
.app-xshare:visited,
.app-xshare:hover,
.app-xshare:active{
  color:#fff;
  text-decoration:none;
}

/* ほんの少し浮かせて、NEWS詳細側と同系統の操作感にする */
.app-xshare:hover{
  background:#000;
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,.2);
}

.app-xshare:focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
}

/* XロゴSVG：色は currentColor で親の color を継承 */
.app-xshare__icon{
  display:block;
  width:15px;
  height:15px;
}

.app-xshare__icon path{
  fill:currentColor;
}

/* ★編集リンク：配置A（見た目は本文色リンク、UAの visited 紫を無効化）
   ポイント：
   - 右上の位置決めは .app-head__tools が担当する
   - .app-head__edit は通常フローに戻し、編集リンクの入れ物として維持
   - 子の a に色/下線を直接指定し、:link / :visited も含めて強制固定 */
.app-head__edit{
  position:static;
  z-index:auto;
  /* ← ここでは配置しない。色や下線は a に記述して UA を上書きする */
}
.app-head__edit a{
  display:inline-block;
  font-size:13px; line-height:1;
  padding:6px 6px 4px;
  border-radius:8px;

  /* 本文色を強制し、下線は “…” を想起させる dotted に */
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: currentColor; /* 下線色＝文字色 */
  text-underline-offset: 2px;
}
/* UA の a:link / a:visited より後勝ちにして、青/紫の上書きを保証 */
.app-head__edit a:link,
.app-head__edit a:visited,
.app-head__edit a:hover,
.app-head__edit a:active{
  color: var(--ink);
}
.app-head__edit a:hover{
  text-decoration-thickness: 2px;      /* さりげないホバー演出 */
  background: rgba(0,0,0,.03);
}
.app-head__edit a:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* 5) タブ（sticky） */
.app-tabs{
  position:sticky;
  top: var(--stickyTop); /* 固定ヘッダーの実高さに追従 */
  z-index:5; background:#fff; border-bottom:var(--bd); border-top:var(--bd);
  display:flex; gap:12px; padding:10px 16px; margin-top:16px;
}
.app-tabs__tab{
  appearance:none; background:none; border:none; padding:8px 6px; cursor:pointer; font-size:15px; color:#444; border-bottom:2px solid透明;
  border-bottom:2px solid transparent;
}
.app-tabs__tab[aria-selected="true"]{ color:#000; font-weight:600; border-color:#111; }

/* 6) 2カラム本体 */
.app-layout{ display:grid; grid-template-columns:1fr; gap:24px; padding:18px 16px 40px; }
.app-layout__aside{ order:2; } /* SPでは下に */
.app-layout__main{ order:1; }

/* 説明/履歴パネル共通 */
.app-tabs__panel{ padding-top:8px; }
.app-article{ font-size:16px; line-height:1.9; }
.app-article p{ margin:0 0 1.1em; }
.app-note{
  margin-top:16px; padding:12px 14px; background:#f8fafc; border:1px dashed #dfe4ea; border-radius:10px; color:#333;
}
.app-empty{
  padding:18px; border:1px dashed #d8d8d8; border-radius:10px; text-align:center; color:#666; background:#fafafa;
}

/* 右サイド：アプリ情報 */
.app-aside{
  position:sticky;
  top: calc(var(--stickyTop) + 56px); /* ヘッダー実高 + タブの高さ相当 */
}
.app-info{ border:var(--bd); border-radius:var(--radius); padding:14px; background:#fff; }
.app-info__title{ margin:0 0 10px; font-size:16px; }
.app-info__list{ margin:0; padding:0; }

/* ★B: ラベル列を可変にし、文字幅に応じて広がるようにする（折り返し抑止） */
/* 以前: grid-template-columns: 110px 1fr; */
.app-info__row{
  display:grid;
  grid-template-columns: minmax(var(--info-label-min), max-content) 1fr;
  gap:8px;
  padding:8px 0;
  border-bottom:1px dashed #eee;
}
.app-info__row:last-child{ border-bottom:none; }
/* 改行しない（単語の途中で折り返さない） */
.app-info__row dt{ color:#666; white-space: nowrap; }

.app-info__links{ display:flex; flex-wrap:wrap; gap:8px; }

/* 既存の汎用リンク（外部リンク等）はそのまま：テーマトーンのブルー */
.app-link{ color:#0b6cff; text-decoration:none; }
.app-link:hover{ text-decoration:underline; }

/* （補助）本文色リンクを使いたい場合のユーティリティ（dotted & currentColor） */
.app-link--textlike{
  color: currentColor;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: currentColor;
  text-underline-offset: 2px;
}
/* UA 既定色対策：:link / :visited でも色を固定（必要時に活用） */
.app-link--textlike:link,
.app-link--textlike:visited{
  color: currentColor;
}

/* スクリーンショット */
.app-screens{ margin-top:16px; }
.app-screens__title{ margin:0 0 10px; font-size:16px; }
.app-screens__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.app-screens__item{
  display:block; border:1px solid #eee; border-radius:8px; overflow:hidden; background:#fff;
  cursor: zoom-in; /* ★クリックで拡大することを示唆 */
}
.app-screens__item img{ display:block; width:100%; height:80px; object-fit:cover; }

/* 変更履歴 */
.app-changelog{ display:grid; gap:12px; }
.app-changelog__item{ border:var(--bd); border-radius:10px; padding:12px 14px; background:#fff; }
.app-changelog__head{ display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; margin-bottom:6px; }
.app-changelog__ver{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }
.app-changelog__date{ color:#666; font-size:14px; }
.app-changelog__summary{ margin:4px 0 8px; color:#333; }
.app-changelog__details{ color:#222; }
.app-changelog__details p{ margin:0 0 .9em; }
.app-changelog__badges, .app-changelog__plats{
  margin:8px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px;
}
.app-changelog__links{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }

/* レスポンシブ：幅が広い時は 2 カラム */
@media (min-width: 1024px){
  /* PC ではヒーロー比率を 21:9（可変）に */
  .app-hero__img,
  .app-hero__placeholder{
    aspect-ratio: var(--hero-ratio-pc);
  }

  .app-layout{ grid-template-columns:2fr 1fr; align-items:start; }
  .app-layout__aside{ order:1; }
  .app-layout__main{ order:0; }

  /* タブだけを見出しタイトルの開始位置に揃えつつ、
     必要に応じて --tabs-offset でさらに右へ寄せられるようにする。 */
  .app-tabs{ padding-left: calc(var(--head-indent) + var(--tabs-offset)); }

  .app-screens__grid{ grid-template-columns:repeat(2,1fr); }
  .app-screens__item img{ height:110px; }
}

/* さらに広い時はスクショ3列 */
@media (min-width: 1280px){
  .app-screens__grid{ grid-template-columns:repeat(3,1fr); }
  .app-screens__item img{ height:100px; }
}