/* app/index.php のインライン <style>（2つ。続けて並んでいた）から、値を変えずに切り出した。
   読み込みは同じファイルの、もと <style> があった位置 */
  /* ── ランキング ──────────────────────────────── */
  .app-rank-row { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin:1.25rem 0 0; }
  @media (max-width:560px) { .app-rank-row { grid-template-columns:1fr; } }
  .app-rank-tile {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(70,162,218,.18);
    border-radius: 10px;
    overflow: hidden;
  }
  .app-rank-tile__hd {
    display:flex; align-items:center; gap:7px;
    padding:8px 14px;
    background: rgba(255,255,255,.05);
    border-bottom: 1px solid rgba(70,162,218,.15);
    font-family: "Space Mono", monospace;
    font-size: 0.78rem; color: #00e5ff;
  }
  .app-rank-tile__link {
    margin-left:auto; font-size:0.75rem; color:var(--sky-500, #46A2DA);
    text-decoration:none; white-space:nowrap;
  }
  .app-rank-tile__link:hover { text-decoration:underline; }
  .app-rank-tbl { width:100%; border-collapse:collapse; font-size:0.78rem; }
  .app-rank-tbl td { padding:5px 12px; border-bottom:1px solid rgba(255,255,255,.05); vertical-align:middle; color:#c8d8e8; }
  .app-rank-tbl tr:last-child td { border-bottom:none; }
  .app-rank-tbl tr:hover td { background:rgba(255,255,255,.04); }
  .app-rank-n { font-family:monospace; font-size:0.65rem; color:#556; min-width:1.4rem; display:inline-block; }
  .app-rank-n--1 { color:#ffc400; font-weight:800; }
  .app-rank-n--2 { color:#8fb0c8; font-weight:800; }
  .app-rank-n--3 { color:#c8855a; font-weight:800; }
  .app-rank-initials { font-family:monospace; font-weight:700; color:#e0ecf6; }
  .app-rank-score { font-family:monospace; font-weight:700; color:#00e5ff; }
  .app-rank-sub { font-size:0.62rem; color:#556; }
  .app-rank-empty { font-size:0.82rem; color:#445; padding:12px 14px; font-family:monospace; }
  .app-rank-you { font-size:.6rem; font-weight:700; color:#00e5ff; font-family:monospace; }

/* ============================================================================
   一覧（2026-10-01 刷新）。「カタログ」から「ホーム」へ
   ----------------------------------------------------------------------------
   上から順に
     1. 検索窓（名前・説明でその場で絞り込む。見つからなければ AI に相談）
     2. 目的の入口（6つ。app_catalog_goals()）
     3. アプリの1行リスト（目的ごとにまとまる。技能チップで2段目の絞り込み）
     4. ランキング・プランと料金（#plans）
   選ぶ前に出すのは「名前＋補足・ひとこと・所要時間などの印」だけ。
   「できること」「進め方」は、押したあとの説明シート（#axs）で出す。
   ========================================================================= */

/* ── 上の1行（未ログイン・無料会員だけ）──────────────────────────── */
.axh-notice {
  margin: 0 0 0.9rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--ui-line, #e1e8ef);
  border-radius: var(--ui-r-ctl, 6px);
  background: var(--ui-surface-sunken, #f7f9fb);
  color: var(--ui-ink, #3d4b59);
  font-size: 0.82rem;
  line-height: 1.7;
}
.axh-notice a { color: var(--ui-action, #1b5aa0); font-weight: 700; margin-left: 0.3em; }

/* お知らせ（× で閉じられる） */
.axh-news { display: flex; align-items: center; gap: 0.6rem; }
.axh-news a, .axh-news span { flex: 1; min-width: 0; margin-left: 0; }
.axh-news__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: -0.2rem -0.4rem -0.2rem 0;
  padding: 0;
  border: 0;
  border-radius: var(--ui-r-ctl, 6px);
  background: none;
  color: var(--ui-ink-muted, #6b7885);
  cursor: pointer;
}
.axh-news__close:hover { background: var(--ui-line, #e1e8ef); }

/* ── 検索窓 ───────────────────────────────────────────────────── */
/* 検索の欄は一番上の帯（.a-hero）の題の下に出す（2026-10-07。app/common/header.php の $app_hero_extra） */
.axh-find { display: flex; align-items: stretch; gap: 0.6rem; flex-wrap: wrap; max-width: 44rem; margin-top: 1rem; }
.axh-find .axh-search { flex: 1 1 16rem; }
.axh-find__note { margin: 0.55rem 0 0; font-size: 0.78rem; line-height: 1.6; color: rgba(255, 255, 255, .82); }
/* 紺の帯の上なので白いボタン（公開ページの .btn--inverse-solid と同じ考え方） */
.a-hero .axq__btn { background: var(--neutral-0, #fff); border-color: var(--neutral-0, #fff); color: var(--ui-primary, #043f6d); }
.axh-search {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0 0.85rem;
  border: 1px solid var(--ui-line-strong, #cbd6e0);
  border-radius: var(--ui-r-card, 12px);
  background: var(--ui-surface, #fff);
  color: var(--ui-ink-muted, #6e8093);
}
.axh-search:focus-within {
  border-color: var(--ui-action, #1b5aa0);
  box-shadow: 0 0 0 3px rgba(27, 90, 160, 0.12);
}
.axh-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0.7rem 0;
  font: inherit;
  font-size: 0.92rem;
  color: var(--ui-ink, #3d4b59);
}
.axh-search input::-webkit-search-cancel-button { cursor: pointer; }
/* 紺の帯の上では塗らず、細い白枠＋白い字（2026-10-07 夜・ユーザー判断 案C）。
   記事一覧（articles/css/category-index.css の .si-search__input）と同じ形。変えるときは両方 */
.a-hero .axh-search { border-color: rgba(255, 255, 255, .45); background: transparent; color: rgba(255, 255, 255, .8); }
.a-hero .axh-search:focus-within { border-color: var(--neutral-0, #fff); box-shadow: 0 0 0 3px rgba(255, 255, 255, .28); }
.a-hero .axh-search input { color: var(--neutral-0, #fff); }
.a-hero .axh-search input::placeholder { color: rgba(255, 255, 255, .7); }

/* AI に相談（検索語があるときだけ出る） */
.axq {
  margin: 0.6rem 0 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--ui-line, #e1e8ef);
  border-radius: var(--ui-r-card, 12px);
  background: var(--ui-surface-sunken, #f7f9fb);
}
/* ボタンは帯の中へ移した（2026-10-07）。中身（状況の文・結果・リクエストの案内）が無いあいだは枠を出さない */
.axq:not(:has(.axq__status:not(:empty), .axq__results:not([hidden]), .axq__none:not([hidden]))) { display: none; }
.axq__btn {
  flex: 0 0 auto;
  padding: 0.45rem 1rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--neutral-0, #fff);
  background: var(--ui-primary, #043f6d);
  border: 1.5px solid var(--ui-primary, #043f6d);
  border-radius: var(--ui-r-ctl, 6px);
  cursor: pointer;
}
.axq__btn:disabled { opacity: 0.45; cursor: progress; }

/* ── 見出し ───────────────────────────────────────────────────── */
.axh-h {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ui-ink-head, #043f6d);
}
.axh-sec { margin-top: 1.75rem; }
.axh-sec[hidden] { display: none; }
.axh-sec__hd {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  margin-bottom: 0.7rem;
}
.axh-count {
  font-size: 0.75rem;
  color: var(--ui-ink-muted, #6e8093);
  font-variant-numeric: tabular-nums;
}
.axh-reset {
  margin-left: auto;
  font: inherit;
  font-size: 0.75rem;
  color: var(--ui-link, #46a2da);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.axh-reset[hidden] { display: none; }

/* ── 目的の入口 ─────────────────────────────────────────────── */
.axh-goal-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ui-action, #1b5aa0);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.axh-goal-link:hover { text-decoration: underline; }
.axh-goal-link[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 3px; }
.axh-goals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* マスは6つ（3＋3／スマホ 2＋2＋2）。ランキングは見出しの横（2026-10-17） */
  gap: 0.6rem;
}
@media (max-width: 640px) {
  .axh-goals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.axh-goal {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  text-align: left;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--ui-material-line, #bedcf2);
  border-radius: var(--ui-r-card, 12px);
  background: var(--ui-material-bg, #f2f8fc);
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.axh-goal:hover { border-color: var(--ui-action, #1b5aa0); }
.axh-goal[aria-pressed="true"] {
  border-color: var(--ui-action, #1b5aa0);
  background: var(--sky-100, #e1eff9);
  box-shadow: inset 0 0 0 1px var(--ui-action, #1b5aa0);
}
.axh-goal__icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 12px;
  background: var(--ui-surface, #fff);
  color: var(--ui-action, #1b5aa0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}
.axh-goal__body { display: grid; gap: 0.15rem; min-width: 0; }
/* 2列になる幅では、文字の幅を残すためにアイコンを上に置く */
@media (max-width: 640px) {
  .axh-goal { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .axh-goal__icon { width: 2.2rem; height: 2.2rem; font-size: 1rem; }
}
.axh-goal__name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ui-ink-head, #043f6d);
  line-height: 1.4;
}
.axh-goal__desc {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--ui-ink-muted, #6e8093);
}

/* ── 技能チップ ─────────────────────────────────────────────── */
.axf {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.9rem;
}
.axf__btn[hidden] { display: none; }
.axf__btn {
  font: inherit;
  font-size: 0.78rem;
  padding: 0.25rem 0.85rem;
  border: 1px solid var(--ui-line, #e1e8ef);
  border-radius: 999px;
  background: var(--ui-surface, #fff);
  color: var(--ui-ink-muted, #6e8093);
  cursor: pointer;
}
.axf__btn[aria-pressed="true"] {
  border-color: var(--ui-ink-head, #043f6d);
  background: var(--ui-ink-head, #043f6d);
  color: var(--neutral-0, #fff);
}

/* ── アプリの1行リスト ──────────────────────────────────────── */
.axh-group + .axh-group { margin-top: 1.1rem; }
.axh-group[hidden] { display: none; }
.axh-group__title {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ui-ink-muted, #6e8093);
  letter-spacing: 0.04em;
}
.axh-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
@media (max-width: 760px) {
  .axh-rows { grid-template-columns: minmax(0, 1fr); }
}
a.axh-row {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--ui-line, #e1e8ef);
  border-radius: var(--ui-r-card, 12px);
  background: var(--ui-surface, #fff);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease;
}
a.axh-row[hidden] { display: none; }
a.axh-row:hover { border-color: var(--ui-action, #1b5aa0); }
a.axh-row:focus-visible,
.axh-goal:focus-visible,
.axf__btn:focus-visible { outline: 2px solid var(--ui-action, #1b5aa0); outline-offset: 2px; }
.axh-row__icon {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 16px;
  background: var(--ui-action-bg, #eaf3fb);
  color: var(--ui-action, #1b5aa0);
  display: flex;
  align-items: center;
  justify-content: center;
}
.axh-row__icon > i { width: 1.9rem; height: 1.9rem; }
.axh-row__body { min-width: 0; display: grid; gap: 0.1rem; }
.axh-row__name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ui-ink-head, #043f6d);
  line-height: 1.45;
}
.axh-row__sub {
  margin-left: 0.4em;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--ui-ink-muted, #6e8093);
}
.axh-row__short {
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--ui-ink, #3d4b59);
}
.axh-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.2rem;
}
.axh-tag {
  font-size: 0.64rem;
  line-height: 1.7;
  padding: 0 0.45rem;
  border-radius: 4px;
  background: var(--ui-surface-sunken, #f7f9fb);
  color: var(--ui-ink-muted, #6e8093);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.axh-tag--new { background: var(--sky-100, #e1eff9); color: var(--sky-800, #15467e); font-weight: 700; }
.axh-tag--limited { background: var(--ui-action-bg, #f2f8fc); color: var(--ui-action, #1b5aa0); }
.axh-tag--count { background: var(--sky-100, #e1eff9); color: var(--sky-800, #15467e); font-weight: 700; }
/* 自分の登録数も収録数と同じ青（2026-10-17 ユーザー指示。黄は「注意」の色なので使わない） */
.axh-tag--mine { background: var(--sky-100, #e1eff9); color: var(--sky-800, #15467e); font-weight: 700; }
.axh-tag--due { background: var(--ui-warn-bg, #fff4e5); color: var(--ui-warn-ink, #b45309); font-weight: 700; }
/* 学習アプリ（モバイル）でも使える（2026-10-21）。ウェブもアプリと呼んでいるので、スマホの印で見分ける */
.axh-tag--mobile { display: inline-flex; align-items: center; gap: 4px; }
.axh-tag--mobile i { font-size: 0.95em; }
.axh-row__arr { color: var(--ui-ink-muted, #6e8093); font-size: 1.1rem; line-height: 1; }
.axh-empty {
  margin: 0;
  padding: 1.1rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ui-ink-muted, #6e8093);
  border: 1px dashed var(--ui-line-strong, #cbd6e0);
  border-radius: var(--ui-r-card, 12px);
}
.axh-empty[hidden] { display: none; }

.axh-cont__go {
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
/* 続きからの行は、ほかの行と同じ白地・青（2026-10-11。橙は規約で「注意」の色なので外した） */
.axh-cont__go { color: var(--ui-action, #1b5aa0); }

/* 続きからは「何をしますか？」と同じ並び・同じ薄い青のマス（2026-10-17）。
   3列（スマホ2列）。スマホでは3つ目を出さず2つにそろえる */
#axh-cont .axh-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
#axh-cont a.axh-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  border-color: var(--ui-material-line, #bedcf2);
  border-radius: var(--ui-r-card, 12px);
  background: var(--ui-material-bg, #f2f8fc);
}
#axh-cont a.axh-row:hover { border-color: var(--ui-action, #1b5aa0); }
#axh-cont .axh-row__icon { width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--ui-surface, #fff); }
#axh-cont .axh-row__icon > i { width: 1.4rem; height: 1.4rem; }
@media (max-width: 640px) {
  #axh-cont .axh-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #axh-cont a.axh-row:nth-child(n+3) { display: none; }
  #axh-cont a.axh-row { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
  #axh-cont .axh-row__icon { width: 2.2rem; height: 2.2rem; }
}

.axh-rec__lead {
  margin: 0 0 0.8rem;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--ui-ink, #3d4b59);
}
.axh-rec__q + .axh-rec__q { margin-top: 0.6rem; }
.axh-rec__label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ui-ink-muted, #6e8093);
}
.axh-rec__opts { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.axh-rec__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.9rem; }
.axh-rec__status { font-size: 0.78rem; color: var(--ui-ink-muted, #6e8093); }
.axh-rec__redo {
  margin-left: 0.6rem;
  font: inherit;
  font-size: 0.75rem;
  color: var(--ui-link, #46a2da);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* ── 説明シート（押したあとに「できること」「進め方」を出す）────── */
/* サイト共通のリセットが dialog の margin を 0 にしていて左上に寄ったので、位置を明示する（2026-10-01） */
.axs,
.axr {
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
}
.axs {
  width: min(32rem, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid var(--ui-line, #e1e8ef);
  border-radius: var(--ui-r-card, 12px);
  background: var(--ui-surface, #fff);
  color: var(--ui-ink, #3d4b59);
}
.axs::backdrop { background: rgba(10, 25, 40, 0.45); }
@media (max-width: 600px) {
  .axs {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
    max-height: 85dvh;
  }
}
.axs__inner { padding: 1.2rem 1.25rem calc(1.1rem + env(safe-area-inset-bottom, 0px)); }
.axs__hd { display: flex; align-items: center; gap: 0.75rem; }
.axs__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ui-ink-head, #043f6d);
  line-height: 1.4;
}
.axs__sub { display: block; font-size: 0.72rem; font-weight: 400; color: var(--ui-ink-muted, #6e8093); }
.axs__what { margin: 0.8rem 0 0; font-size: 0.86rem; line-height: 1.75; }
.axs__label {
  margin: 1rem 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ui-ink-muted, #6e8093);
  letter-spacing: 0.04em;
}
.axs__how { margin: 0; padding-left: 1.3em; font-size: 0.84rem; line-height: 1.7; }
.axs__how li + li { margin-top: 0.2rem; }
.axs__meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.25rem 1rem;
  margin: 0;
  font-size: 0.8rem;
}
.axs__meta dt { color: var(--ui-ink-muted, #6e8093); }
.axs__meta dd { margin: 0; font-variant-numeric: tabular-nums; }
.axs__dots { display: inline-flex; gap: 0.2rem; vertical-align: middle; margin-right: 0.4rem; }
.axs__dot { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--ui-ink-muted, #6e8093); opacity: 0.35; }
.axs__dot--fill { background: var(--ui-action, #1b5aa0); border-color: var(--ui-action, #1b5aa0); opacity: 0.8; }
.axs__actions { display: flex; gap: 0.5rem; margin-top: 1.25rem; }
.axs__start {
  flex: 1 1 auto;
  text-align: center;
  padding: 0.7rem 1rem;
  border-radius: var(--ui-r-ctl, 6px);
  background: var(--ui-primary, #043f6d);
  color: var(--neutral-0, #fff);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
}
.axs__start:hover { background: var(--ui-primary-hover, #03314f); }
.axs__close {
  flex: none;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--ui-line-strong, #cbd6e0);
  border-radius: var(--ui-r-ctl, 6px);
  background: var(--ui-surface, #fff);
  color: var(--ui-ink, #3d4b59);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

/* ── 下のまとまり（ランキング・プランと料金）──────────────────── */
.axh-bottom { margin-top: 2.5rem; }
.axh-bottom .apl { scroll-margin-top: 5rem; }

@media (prefers-reduced-motion: reduce) {
  .axh-goal, a.axh-row { transition: none; }
}

  .axq__status {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--ui-ink-muted, #5a6b7a);
  }
  .axq__status:not(:empty) { margin-top: 0.55rem; }
  .axq__results { margin-top: 0.75rem; display: grid; gap: 0.5rem; }
  .axq__card {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--ui-line, #d8e0e8);
    border-radius: 8px;
    background: var(--ui-surface-sunken, #f5f8fa);
    color: inherit;
    text-decoration: none;
  }
  .axq__card:hover { border-color: var(--ui-action, #1a7ac4); }
  .axq__card-body { min-width: 0; }
  .axq__card-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ui-ink-head, #16324a);
  }
  .axq__card-reason {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--ui-ink, #22394c);
  }
  .axq__card-tags { margin-top: 0.3rem; display: flex; flex-wrap: wrap; gap: 0.3rem; }
  .axq__tag {
    font-size: 0.68rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--ui-line, #d8e0e8);
    background: var(--ui-surface, #fff);
    color: var(--ui-ink-muted, #5a6b7a);
  }

  /* 合うアプリが無かったとき（2026-09-23） */
  .axq__none {
    margin-top: 0.75rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--ui-line, #d8e0e8);
    border-radius: 8px;
    background: var(--ui-surface-sunken, #f5f8fa);
  }
  .axq__none[hidden] { display: none; }
  .axq__none-text {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--ui-ink, #22394c);
  }
  .axq__none-btn,
  .axr__submit {
    padding: 0.5rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--neutral-0, #fff);
    background: var(--ui-primary, #043f6d);
    border: 1.5px solid var(--ui-primary, #043f6d);
    border-radius: 8px;
    cursor: pointer;
  }
  .axr__submit:disabled { opacity: 0.45; cursor: progress; }

  /* アプリのリクエスト（モーダル） */
  .axr {
    width: min(34rem, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    padding: 0;
    border: 1px solid var(--ui-line, #d8e0e8);
    border-radius: 12px;
    background: var(--ui-surface, #fff);
    color: var(--ui-ink, #22394c);
  }
  .axr::backdrop { background: rgba(10, 25, 40, 0.45); }
  .axr__form { padding: 1.2rem 1.25rem 1.1rem; }
  .axr__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ui-ink-head, #16324a);
  }
  .axr__lead {
    margin: 0.3rem 0 0.9rem;
    font-size: 0.8rem;
    color: var(--ui-ink-muted, #5a6b7a);
  }
  .axr__label {
    display: block;
    margin: 0.75rem 0 0.35rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ui-ink-head, #16324a);
  }
  .axr__req {
    margin-left: 0.4rem;
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--ui-ink-muted, #5a6b7a);
  }
  .axr__text {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.7rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--ui-ink, #22394c);
    background: var(--ui-surface, #fff);
    border: 1px solid var(--ui-line-strong, #c3ced8);
    border-radius: 8px;
    resize: vertical;
  }
  .axr__text:focus {
    outline: none;
    border-color: var(--ui-action, #1a7ac4);
    box-shadow: 0 0 0 3px rgba(26, 122, 196, 0.15);
  }
  .axr__status {
    margin: 0.6rem 0 0;
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--ui-ink-muted, #5a6b7a);
  }
  .axr__status:empty { display: none; }
  .axr__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
  }
  .axr__cancel {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    color: var(--ui-ink, #22394c);
    background: var(--ui-surface, #fff);
    border: 1px solid var(--ui-line-strong, #c3ced8);
    border-radius: 8px;
    cursor: pointer;
  }

  /* ── プランと料金（ログイン中。2026-09-28）──────────────────── */
  .apl {
    margin: 1.25rem 0 0;
    border: 1px solid var(--ui-line, #d8e0e8);
    border-radius: var(--ui-r-card, 12px);
    background: var(--ui-surface-head, #f0f5f9);
    padding: 1rem 1.1rem;
  }
  .apl__status-main { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
  .apl__status-label { font-size: var(--ui-fs-meta, 0.75rem); color: var(--ui-ink-muted, #5a6b7a); }
  .apl__status-plan { font-size: var(--ui-fs-lead, 1.0625rem); font-weight: 700; color: var(--ui-ink-head, #16324a); }
  .apl__status-note {
    margin: 0.3rem 0 0;
    font-size: var(--ui-fs-body, 0.875rem);
    line-height: 1.7;
    color: var(--ui-ink, #22394c);
  }
  .apl__status-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.5rem; }
  .apl__link {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.82rem; color: var(--ui-action, #1a7ac4); text-decoration: none;
  }
  .apl__link:hover { text-decoration: underline; }
  .apl__link > i { width: 14px; height: 14px; }

  .apl__plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    margin-top: 0.9rem;
  }
  @media (max-width: 720px) { .apl__plans { grid-template-columns: 1fr; } }
  .apl__plan {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ui-line, #d8e0e8);
    border-radius: var(--ui-r-ctl, 6px);
    background: var(--ui-surface, #fff);
    padding: 0.75rem 0.85rem;
    min-width: 0;
  }
  .apl__plan.is-current {
    border-color: var(--ui-action, #1a7ac4);
    background: var(--ui-action-bg, #eef6fd);
  }
  .apl__plan-hd { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
  .apl__plan-name { font-size: var(--ui-fs-card, 0.9375rem); font-weight: 700; color: var(--ui-ink-head, #16324a); }
  .apl__current {
    font-size: var(--ui-fs-micro, 0.6875rem);
    font-weight: 700;
    color: var(--ui-ink-on-fill, #fff);
    background: var(--ui-action, #1a7ac4);
    border-radius: var(--ui-r-pill, 999px);
    padding: 0.1rem 0.55rem;
    white-space: nowrap;
  }
  .apl__price { margin-top: 0.3rem; display: flex; align-items: baseline; gap: 0.25rem; }
  .apl__price-num { font-size: 1.25rem; font-weight: 700; color: var(--ui-ink-head, #16324a); font-variant-numeric: tabular-nums; line-height: 1.9rem; }
  .apl__price-num--text { font-size: 1rem; }
  .apl__price-unit { font-size: var(--ui-fs-meta, 0.75rem); color: var(--ui-ink-muted, #5a6b7a); }
  .apl__plan-sum {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    line-height: 1.65;
    color: var(--ui-ink, #22394c);
    flex: 1;
  }
  .apl__btn {
    display: block;
    margin-top: 0.7rem;
    padding: 0.5rem 0.8rem;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: var(--ui-r-ctl, 6px);
    text-decoration: none;
  }
  /* ピンクは目立ちすぎたので青に（2026-09-30 ユーザー判断） */
  .apl__btn--buy {
    color: var(--neutral-0, #fff);
    background: var(--ui-action, #1a7ac4);
    border: 1.5px solid var(--ui-action, #1a7ac4);
  }
  .apl__btn--buy:hover { filter: brightness(0.9); }
  .apl__btn--sub {
    color: var(--ui-secondary-ink, #043f6d);
    background: var(--ui-surface, #fff);
    border: 1px solid var(--ui-secondary-line, #c3ced8);
  }
  .apl__btn--sub:hover { border-color: var(--ui-action, #1a7ac4); }
  .apl__plan-note {
    margin: 0.45rem 0 0;
    font-size: var(--ui-fs-micro, 0.6875rem);
    line-height: 1.6;
    color: var(--ui-ink-muted, #5a6b7a);
  }
  .apl__done {
    display: inline-flex; align-items: center; gap: 0.35rem;
    margin-top: 0.7rem;
    font-size: 0.8rem; font-weight: 700;
    color: var(--ui-ok-ink, #2d6a4a);
  }
  .apl__done > i { width: 14px; height: 14px; }

  .apl__more { margin-top: 0.8rem; }
  .apl__more-sum {
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ui-action, #1a7ac4);
    padding: 0.25rem 0;
  }
  .apl__tbl-wrap {
    overflow-x: auto;
    margin-top: 0.5rem;
    background: var(--ui-surface, #fff);
    border: 1px solid var(--ui-line, #d8e0e8);
    border-radius: var(--ui-r-ctl, 6px);
  }
  .apl__tbl tbody tr:last-child th,
  .apl__tbl tbody tr:last-child td { border-bottom: none; }
  .apl__tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    color: var(--ui-ink, #22394c);
  }
  .apl__tbl th,
  .apl__tbl td {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--ui-line, #e8eef3);
    text-align: center;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
  }
  .apl__tbl thead th {
    font-size: var(--ui-fs-meta, 0.75rem);
    font-weight: 700;
    color: var(--ui-ink-head, #16324a);
    background: var(--ui-surface-head, #f0f5f9);
    white-space: nowrap;
  }
  .apl__tbl tbody th {
    text-align: left;
    font-weight: 400;
    color: var(--ui-ink, #22394c);
    min-width: 11rem;
  }
  .apl__tbl .is-current { background: var(--ui-action-bg, #eef6fd); }
  .apl__tbl thead th.is-current { color: var(--ui-action, #1a7ac4); }
  .apl__tbl td.is-none { color: var(--ui-ink-muted, #5a6b7a); }
  .apl__tbl .apl__tbl-group th {
    font-size: var(--ui-fs-meta, 0.75rem);
    font-weight: 700;
    color: var(--ui-ink-head, #16324a);
    background: var(--ui-surface-head, #f0f5f9);
    border-top: 1px solid var(--ui-line, #d8e0e8);
  }
  .apl__tbl td { white-space: nowrap; }
  /* スマホでは横スクロールさせない（2026-10-01）。項目名を1行目に全幅で出し、3プランの値をその下に3列で並べる */
  @media (max-width: 600px) {
    .apl__tbl,
    .apl__tbl thead,
    .apl__tbl tbody { display: block; }
    .apl__tbl tr {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .apl__tbl thead th:first-child { display: none; }
    .apl__tbl thead th { white-space: normal; padding: 0.45rem 0.3rem; }
    .apl__tbl tbody th,
    .apl__tbl .apl__tbl-group th {
      grid-column: 1 / -1;
      min-width: 0;
    }
    .apl__tbl tbody tr:not(.apl__tbl-group) th {
      border-bottom: 0;
      padding: 0.5rem 0.6rem 0.1rem;
      font-weight: 700;
      color: var(--ui-ink-head, #16324a);
    }
    .apl__tbl td {
      white-space: normal;
      padding: 0.15rem 0.3rem 0.5rem;
      font-size: 0.74rem;
      line-height: 1.5;
    }
  }
  .apl__tbl-note {
    margin: 0.5rem 0 0;
    font-size: var(--ui-fs-meta, 0.75rem);
    line-height: 1.7;
    color: var(--ui-ink-muted, #5a6b7a);
  }
  .apl__notes {
    margin: 0.6rem 0 0;
    padding: 0.6rem 0.9rem 0.6rem 1.9rem;
    background: var(--ui-surface, #fff);
    border-radius: var(--ui-r-ctl, 6px);
    font-size: var(--ui-fs-meta, 0.75rem);
    line-height: 1.7;
    color: var(--ui-ink-muted, #5a6b7a);
  }
  .apl__notes a { color: var(--ui-link, #1a7ac4); }