/* ============================================================================
   PACT APP アプリ一覧（apps.html）専用スタイル — 2026-09-24 作成
   - pages.css（→ WordPressでは hybrid-pages.css）の後に読み込む。
   - 🔴 他ページに影響させないため、すべて body[data-page="apps"] の下に閉じ込める。
   - 色・部品は pages.css の変数（--navy / --orange / --warm / --line / --ink / --content）を使う。
   ========================================================================== */

/* --- ヒーロー ------------------------------------------------------------- */
[data-page="apps"] .apps-hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(70px,8vw,120px) 0 clamp(64px,7vw,104px);background:var(--warm);border-bottom:1px solid var(--navy)}
[data-page="apps"] .apps-hero .page-hero__mark{opacity:.9}
[data-page="apps"] .apps-hero__inner{width:var(--content);margin:auto;position:relative;z-index:2}
[data-page="apps"] .apps-hero h1{margin:0;font-size:clamp(36px,4.7vw,72px);line-height:1.12;letter-spacing:-.06em}
[data-page="apps"] .apps-hero h1>span,[data-page="apps"] .apps-hero h1 em{display:block}
[data-page="apps"] .apps-hero h1 em{font-style:normal;color:var(--orange)}
[data-page="apps"] .apps-hero__lead{max-width:640px;margin:26px 0 0;color:var(--ink);font-size:clamp(15px,1.3vw,18px);font-weight:600;line-height:1.9}

/* --- 見出し --------------------------------------------------------------- */
[data-page="apps"] .apps-head .section-label{display:flex;align-items:center;gap:12px}
[data-page="apps"] .apps-head .section-label::before{content:"";width:34px;height:4px;border-radius:9px;background:var(--orange)}
[data-page="apps"] .apps-head h2{margin:0;font-size:clamp(28px,3.6vw,50px);line-height:1.2;letter-spacing:-.04em}

/* --- アプリのカード ------------------------------------------------------- */
[data-page="apps"] .apps-grid{margin-top:40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
[data-page="apps"] .apps-card{display:flex;flex-direction:column;align-items:flex-start;padding:30px;border:1px solid var(--navy);border-radius:18px;background:#fff;color:var(--navy);text-decoration:none;transition:background .2s}
/* ホバーは色だけ変える（位置を動かさない。本人の確定指示） */
@media (hover:hover){[data-page="apps"] a.apps-card:hover{background:var(--warm)}}
[data-page="apps"] a.apps-card:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
[data-page="apps"] .apps-card__icon{display:grid;place-items:center;width:72px;height:72px;border:1px solid var(--line);border-radius:18px;background:#fff}
[data-page="apps"] .apps-card__icon img{display:block;width:48px;height:48px}
[data-page="apps"] .apps-card__meta{margin-top:22px;font-size:11px;font-weight:900;letter-spacing:.14em;color:#cc3a10}
[data-page="apps"] .apps-card__name{margin-top:6px;font-size:clamp(24px,2.4vw,32px);line-height:1.2;letter-spacing:-.03em}
[data-page="apps"] .apps-card__desc{margin-top:12px;color:var(--ink);font-size:14px;line-height:1.9}
[data-page="apps"] .apps-card__more{margin-top:auto;padding-top:22px;font-size:13px;font-weight:900;border-bottom:2px solid var(--orange)}
/* 準備中の枠は静かに（名前は出さない） */
[data-page="apps"] .apps-card--placeholder{border-style:dashed;border-color:rgba(7,27,60,.3);background:transparent}
[data-page="apps"] .apps-card--placeholder .apps-card__meta{color:rgba(7,27,60,.5)}
[data-page="apps"] .apps-card--placeholder .apps-card__name{font-size:clamp(20px,2vw,24px);color:rgba(7,27,60,.7)}
[data-page="apps"] .apps-card__icon--empty{border-style:dashed;border-color:rgba(7,27,60,.25);background:transparent}

@media(max-width:760px){
  [data-page="apps"] .apps-grid{grid-template-columns:1fr}
  [data-page="apps"] .apps-card{padding:24px}
}