/* ============================================================
   AIM GEAR UI SYSTEM v2 — Competitive Device Analysis OS
   Global final layer. Existing content/assets remain authoritative.
   ============================================================ */

:root {
  --aim-ink: #05080d;
  --aim-panel: #0b1119;
  --aim-panel-2: #101923;
  --aim-panel-3: #162331;
  --aim-line: rgba(139, 174, 201, .22);
  --aim-line-hot: rgba(77, 225, 241, .62);
  --aim-cyan: #4de1f1;
  --aim-cyan-soft: #a5f3fc;
  --aim-amber: #f0b44d;
  --aim-amber-hot: #ffd17a;
  --aim-violet: #9b87f5;
  --aim-green: #45d39b;
  --aim-danger: #ff765e;
  --aim-white: #f4f8fb;
  --aim-muted: #9aacbd;
  --aim-cut: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  --aim-cut-lg: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
  --aim-ease: cubic-bezier(.2, .8, .2, 1);
}

html { scroll-padding-top: 88px; }

body {
  color: var(--aim-white);
  background:
    radial-gradient(circle at 12% 0, rgba(77, 225, 241, .065), transparent 28rem),
    radial-gradient(circle at 92% 18%, rgba(240, 180, 77, .045), transparent 26rem),
    linear-gradient(180deg, #060a10, #05080d 52%, #06090e);
}

body::before {
  opacity: .28 !important;
  filter: saturate(.65);
}

/* ---------- Header: solid command band ---------- */
header {
  min-height: 72px;
  padding: .62rem clamp(1rem, 3.2vw, 3.4rem) !important;
  background: rgba(5, 8, 13, .96) !important;
  border-bottom: 1px solid rgba(77, 225, 241, .24) !important;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .32) !important;
  backdrop-filter: blur(14px) !important;
}

header::after {
  height: 2px !important;
  background: linear-gradient(90deg, var(--aim-cyan) 0 16%, transparent 16% 82%, var(--aim-amber) 82% 100%) !important;
  opacity: .72 !important;
}

header .logo,
header > a:first-child {
  letter-spacing: .035em;
  font-weight: 900 !important;
}

header .logo-icon {
  width: 34px;
  height: 38px;
  border-radius: 0 !important;
  clip-path: var(--aim-cut);
  border: 1px solid rgba(77, 225, 241, .52);
  background: linear-gradient(145deg, rgba(77, 225, 241, .16), rgba(155, 135, 245, .14)) !important;
}

header nav a {
  min-height: 38px;
  border-radius: 0 !important;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  color: #aab8c8;
  font-weight: 750;
}

header nav a:hover {
  color: var(--aim-white);
  background: rgba(77, 225, 241, .08) !important;
}

header nav a.is-active {
  color: var(--aim-white) !important;
  background: linear-gradient(180deg, rgba(77, 225, 241, .18), rgba(77, 225, 241, .055)) !important;
  box-shadow: inset 0 -2px 0 var(--aim-cyan), inset 0 0 0 1px rgba(77, 225, 241, .2) !important;
}

header nav li.nav-gstart::after {
  background: rgba(77, 225, 241, .22) !important;
}

header nav li.nav-gstart::before { color: rgba(77, 225, 241, .72) !important; }

header nav li.nav-iconitem a {
  width: 38px;
  height: 38px;
  border-radius: 0 !important;
  clip-path: var(--aim-cut);
  border-color: var(--aim-line) !important;
  background: var(--aim-panel) !important;
}

/* ---------- Shared layout and hierarchy ---------- */
.container { width: auto; max-width: 1240px; }

.section-title {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-height: 54px;
  margin-bottom: clamp(1.1rem, 2vw, 1.8rem);
  padding: .35rem 1rem .35rem 1.2rem;
  border-left: 4px solid var(--aim-cyan);
  color: var(--aim-white);
  font-size: clamp(1.65rem, 2.55vw, 2.5rem) !important;
  line-height: 1.08;
  background: linear-gradient(90deg, rgba(77, 225, 241, .095), transparent 68%);
}

.section-title::after {
  position: static !important;
  flex: 1;
  width: auto !important;
  height: 1px !important;
  margin-left: .5rem;
  background: linear-gradient(90deg, rgba(77, 225, 241, .5), transparent) !important;
  opacity: .75 !important;
}

.section-title i.text-accent,
.section-title .text-accent { color: var(--aim-cyan) !important; filter: none !important; }

.eyebrow,
.hero-eyebrow {
  color: var(--aim-cyan-soft) !important;
  letter-spacing: .16em !important;
}

.text-gradient,
.text-accent:not(.section-title .text-accent) {
  color: var(--aim-cyan-soft);
  background: none;
  -webkit-text-fill-color: currentColor;
}

:where(.glass-card, .feature-card, .watch-card, .goods-card, .featured-card, .category-card, .guide-card, .news-card, .gx-card) {
  border-radius: 0 !important;
  clip-path: var(--aim-cut);
  border-color: var(--aim-line) !important;
  background:
    linear-gradient(135deg, rgba(77, 225, 241, .04), transparent 38%),
    var(--aim-panel) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 16px 34px rgba(0,0,0,.18) !important;
}

:where(.glass-card, .feature-card, .watch-card, .goods-card, .featured-card, .category-card, .guide-card, .news-card, .gx-card):hover {
  transform: translateY(-3px) !important;
  border-color: var(--aim-line-hot) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 20px 46px rgba(0,0,0,.34) !important;
}

:where(.btn-primary, .ch-cta, .adv-start, .save-btn, .adv-btn, .daily-btn, #pf-go, .buy-btn, .b-buy, .rk-btn) {
  min-height: 46px;
  border-radius: 0 !important;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  font-weight: 900 !important;
  letter-spacing: .025em;
}

:where(.btn-primary, .ch-cta, .adv-start, .save-btn, .adv-btn, .daily-btn, #pf-go) {
  color: #111820 !important;
  background: var(--aim-amber) !important;
  border: 1px solid var(--aim-amber-hot) !important;
  box-shadow: 5px 5px 0 rgba(240, 180, 77, .16) !important;
}

:where(.btn-primary, .ch-cta, .adv-start, .save-btn, .adv-btn, .daily-btn, #pf-go):hover {
  background: var(--aim-amber-hot) !important;
  box-shadow: 3px 3px 0 rgba(240, 180, 77, .22), 0 14px 28px rgba(0,0,0,.24) !important;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--aim-cyan) !important;
  outline-offset: 3px;
}

/* ---------- Home: desktop mission deck and authored composition ---------- */
body.home .hero {
  min-height: min(660px, calc(100svh - 72px));
  justify-content: center;
  align-items: flex-start;
  padding: clamp(5.2rem, 10vh, 8rem) max(6%, calc((100vw - 1240px) / 2)) 4rem !important;
  text-align: left;
}

body.home .hero::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: max(6%, calc((100vw - 1240px) / 2));
  bottom: 2rem;
  width: min(620px, 55vw);
  height: 1px;
  background: linear-gradient(90deg, var(--aim-cyan), var(--aim-amber) 36%, transparent);
  pointer-events: none;
}

body.home .hero h1 {
  max-width: 820px;
  margin-inline: 0;
  font-size: clamp(3.25rem, 6vw, 6.4rem) !important;
  line-height: .98 !important;
  letter-spacing: -.045em !important;
  text-shadow: 0 18px 60px rgba(0,0,0,.55);
}

body.home .hero h1 .holo {
  color: var(--aim-cyan-soft) !important;
  -webkit-text-fill-color: currentColor !important;
  filter: none !important;
}

body.home .hero > p {
  max-width: 660px;
  margin: 1.5rem 0 0;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  color: #c5d0dc;
}

body.home .hero-cta,
body.home .search-container,
body.home .hero-trust { margin-left: 0; margin-right: 0; }

body.home .hero-cta { justify-content: flex-start; }
body.home .search-container { width: min(590px, 100%); }
body.home .hero-trust { justify-content: flex-start; }

@media (min-width: 700px) {
  body.home .mobile-action-deck {
    display: block;
    order: 2;
    width: min(1240px, 92%);
    margin: -42px auto 56px;
    padding: 0;
    position: relative;
    z-index: 5;
  }
  body.home .mobile-action-deck::before {
    content: "START ROUTE";
    position: absolute;
    left: 0;
    top: -24px;
    color: rgba(77,225,241,.74);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .2em;
  }
  body.home .mad-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: .85rem;
  }
  body.home .mad-head h2 {
    margin: 0;
    font-size: clamp(1.55rem, 2.3vw, 2.25rem);
  }
  body.home .mad-kicker { display: none; }
  body.home .mad-nav { display: none; }
  body.home .mad-rail {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    gap: 1px;
    padding: 1px;
    overflow: visible;
    background: rgba(77,225,241,.24);
    clip-path: var(--aim-cut-lg);
  }
  body.home .mad-card {
    min-width: 0;
    min-height: 260px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto 1fr auto;
    gap: .7rem 1rem;
    padding: clamp(1.3rem, 2.4vw, 2rem);
    color: var(--aim-white);
    text-decoration: none;
    background: var(--aim-panel);
    transition: background .2s ease, transform .2s var(--aim-ease);
  }
  body.home .mad-card:hover { background: var(--aim-panel-2); transform: translateY(-3px); }
  body.home .mad-card.is-primary {
    background:
      radial-gradient(circle at 92% 8%, rgba(240,180,77,.14), transparent 34%),
      linear-gradient(140deg, rgba(77,225,241,.12), transparent 45%),
      var(--aim-panel-2);
  }
  body.home .mad-step {
    color: var(--aim-cyan);
    font-family: var(--font-hud, monospace);
    font-size: .72rem;
    letter-spacing: .14em;
  }
  body.home .mad-icon {
    grid-column: 2;
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    color: var(--aim-cyan-soft);
    border: 1px solid rgba(77,225,241,.35);
    clip-path: var(--aim-cut);
    background: rgba(77,225,241,.07);
  }
  body.home .mad-card strong { grid-column: 1; font-size: clamp(1.25rem, 1.8vw, 1.7rem); line-height: 1.15; }
  body.home .mad-card > span:not(.mad-step):not(.mad-icon) { grid-column: 1 / -1; color: var(--aim-muted); line-height: 1.65; }
  body.home .mad-card > b {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    padding: .7rem .9rem;
    color: var(--aim-cyan-soft);
    border-top: 1px solid var(--aim-line);
  }
  body.home .mad-card.is-primary > b { color: #111820; background: var(--aim-amber); border: 0; }
  body.home .mad-hint,
  body.home .mobile-route-library { display: none; }
}

body.home .char-hero {
  width: min(1240px, 92%);
  min-height: 430px;
  margin: 0 auto !important;
  border-radius: 0 !important;
  clip-path: var(--aim-cut-lg) !important;
  border: 1px solid rgba(77,225,241,.28) !important;
  background: #080d14 !important;
}

body.home .char-hero::before {
  content: "SCOUT ROOM // HUMAN GUIDANCE";
  position: absolute;
  z-index: 6;
  top: 18px;
  left: 22px;
  color: rgba(77,225,241,.72);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .18em;
}

body.home .ch-mid { max-width: 620px; }
body.home .ch-title { font-size: clamp(2rem, 3.4vw, 3.6rem) !important; line-height: 1.04; }
body.home .ch-talk { border-left: 2px solid var(--aim-cyan); padding-left: 1rem; }

body.home .hud-divider { display: none; }
body.home .lp-features,
body.home .home-watch,
body.home #categories,
body.home .lp-guides,
body.home .goods-sec { margin-top: 0 !important; }

body.home .lp-features,
body.home #categories,
body.home .lp-guides,
body.home .goods-sec {
  padding-top: clamp(2rem, 3vw, 2.75rem) !important;
}

body.home .home-watch {
  padding-top: clamp(1.75rem, 2.6vw, 2.5rem) !important;
}

body.home .gx-bento { gap: 1px; padding: 1px; background: var(--aim-line); }
body.home .gx-card { min-height: 170px; }

/* ---------- Category / explore ---------- */
body.category-page > main > .hero {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: flex-start;
  padding: 5rem max(5%, calc((100vw - 1240px) / 2)) 2.4rem !important;
  text-align: left;
  border-bottom: 1px solid rgba(77,225,241,.18);
  background:
    linear-gradient(90deg, rgba(77,225,241,.10), transparent 42%),
    linear-gradient(180deg, #0b121b, #070b11) !important;
}

body.category-page > main > .hero h1 {
  margin: 0;
  font-size: clamp(2.8rem, 5vw, 5.6rem) !important;
  letter-spacing: -.045em;
}

body.category-page > main > .hero p { margin: .7rem 0 0; color: #b9c6d4; font-size: 1.05rem; }

body.category-page .date-badge {
  border-radius: 0 !important;
  clip-path: var(--aim-cut);
  color: var(--aim-green) !important;
  border-color: rgba(69,211,155,.46) !important;
  background: rgba(69,211,155,.08) !important;
}

body.category-page .category-grid,
body.category-page .item-grid { gap: clamp(.75rem, 1.4vw, 1.1rem) !important; padding: 0; background: transparent; }

body.category-page :where(.category-card, .item-card, .product-card) {
  border-radius: 0 !important;
  border-color: transparent !important;
  background-color: var(--aim-panel) !important;
  box-shadow: none !important;
}

body.category-page :where(.category-card, .item-card, .product-card):hover {
  z-index: 2;
  border-color: var(--aim-cyan) !important;
  background-color: var(--aim-panel-2) !important;
}

body.category-page .filter-bar,
body.category-page .filter-panel,
body.category-page .fb-panel {
  border-radius: 0 !important;
  clip-path: var(--aim-cut);
  border-color: var(--aim-line) !important;
  background: rgba(11,17,25,.97) !important;
}

/* ---------- Compare: make an analysis workspace ---------- */
body.compare-page main.container {
  width: min(1240px, 94%) !important;
  padding-top: clamp(2rem, 4vw, 4rem) !important;
}

body.compare-page .section-title { margin-bottom: 2rem; }

body.compare-page :where(.cmp-empty, .cmp-guide, .cmp-wrap, .compare-empty, [class*="purchase"]) {
  border-radius: 0 !important;
  clip-path: var(--aim-cut);
}

body.compare-page .cmp-wrap {
  border: 1px solid var(--aim-line);
  background: var(--aim-panel);
  box-shadow: 0 24px 64px rgba(0,0,0,.36);
}

body.compare-page .cmp-table { border-collapse: collapse; }
body.compare-page .cmp-table th,
body.compare-page .cmp-table td { border-color: var(--aim-line) !important; }
body.compare-page .cmp-table thead th { background: var(--aim-panel-2) !important; }
body.compare-page .cmp-rowlabel { color: var(--aim-cyan-soft); background: #091019 !important; }
body.compare-page .cmp-best { color: var(--aim-green) !important; }

/* ---------- Advisor: focused briefing room ---------- */
body.advisor-page > main > .hero {
  min-height: 190px;
  background:
    linear-gradient(90deg, transparent, rgba(77,225,241,.08) 50%, transparent),
    #070c12 !important;
  border-bottom-color: rgba(77,225,241,.2) !important;
}

body.advisor-page > main > .hero h1 {
  color: var(--aim-white);
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: clamp(2.3rem, 4vw, 4.4rem) !important;
}

body.advisor-page .adv-wrap {
  max-width: 820px;
  border-radius: 0 !important;
  clip-path: var(--aim-cut-lg);
  background:
    linear-gradient(135deg, rgba(77,225,241,.06), transparent 40%),
    var(--aim-panel) !important;
  border-color: rgba(77,225,241,.42) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.48) !important;
}

body.advisor-page :where(.adv-mode-card, .adv-choice, .adv-option) {
  border-radius: 0 !important;
  clip-path: var(--aim-cut);
  background: var(--aim-panel-2) !important;
}

/* ---------- Best picks: wider editorial ranking ---------- */
@media (min-width: 1180px) {
  body.best-page #best-body {
    width: min(1120px, calc(100vw - 390px)) !important;
    max-width: none !important;
  }
  body.best-page .best-section-nav { width: 100% !important; }
  body.best-page .best-sec { padding: 1.35rem !important; }
}

body.best-page .best-hero,
body.best-page .best-sec,
body.best-page .best-section-nav,
body.best-page .b-card {
  border-radius: 0 !important;
}

body.best-page .best-hero,
body.best-page .best-sec { clip-path: var(--aim-cut-lg) !important; }
body.best-page .best-sec { border-color: var(--aim-line) !important; background: var(--aim-panel) !important; }
body.best-page .best-top3 { gap: 1px !important; padding: 1px; background: var(--aim-line); }
body.best-page .b-card { border-color: transparent !important; background: var(--aim-panel-2) !important; box-shadow: none !important; }
body.best-page .b-buy { background: rgba(240,180,77,.12) !important; border-color: rgba(240,180,77,.4) !important; color: var(--aim-amber-hot) !important; }

/* ---------- AIM hub / ranking / wishlist utility surfaces ---------- */
body.aim-hub-page .aim-hero,
body.aim-hub-page .aim-brief,
body.ranking-page :where(.rk-hero, .rk-panel),
body.wishlist-page :where(.wishlist-hero, .wish-panel, .glass-card) {
  border-radius: 0 !important;
  clip-path: var(--aim-cut-lg);
  border-color: var(--aim-line) !important;
  background:
    linear-gradient(135deg, rgba(77,225,241,.055), transparent 42%),
    var(--aim-panel) !important;
}

body.wishlist-page { overflow-x: hidden; }

body.aim-hub-page .aim-hero h1,
body.ranking-page .rk-hero h1 { font-size: clamp(2.5rem, 5vw, 5rem) !important; letter-spacing: -.04em; }

body.ranking-page .rk-btn {
  color: #101820 !important;
  background: var(--aim-amber) !important;
  border-color: var(--aim-amber-hot) !important;
}

/* ---------- Footer: close the system cleanly ---------- */
footer {
  margin-top: 5rem !important;
  border-top: 1px solid rgba(77,225,241,.18) !important;
  background: #04070b !important;
}

.mega-footer,
footer .footer-grid { max-width: 1240px; margin-inline: auto; }

/* ---------- Phone/tablet safeguards ---------- */
@media (max-width: 1024px) {
  header { min-height: 64px; padding: .55rem 5% !important; }
  header nav a { clip-path: none; }
  header nav li.nav-iconitem a { width: auto; height: auto; clip-path: none; }
  .section-title { font-size: clamp(1.35rem, 5vw, 1.9rem) !important; padding-left: .8rem; }
  body.home .hero { align-items: center; text-align: center; }
  body.home .hero h1 { margin-inline: auto; }
  body.home .hero > p { margin-inline: auto; }
  body.home .hero-cta,
  body.home .hero-trust { justify-content: center; }
  body.home .search-container { margin-inline: auto; }
  body.home .char-hero { width: 94%; }
}

@media (min-width: 700px) and (max-width: 1024px) {
  body.home footer.site-footer .sf-inner {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  body.home footer.site-footer .sf-brand {
    width: 100% !important;
    min-height: 48px;
  }
  body.home footer.site-footer .sf-grid {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1rem 1.4rem !important;
  }
  body.home footer.site-footer .sf-col a,
  body.home footer.site-footer .sf-col h4 {
    overflow-wrap: normal;
    word-break: keep-all;
  }
}

@media (max-width: 699px) {
  body.home .hero {
    min-height: 0;
    padding: 2.8rem 5% 1.4rem !important;
  }
  body.home .hero::after { display: none; }
  body.home .hero h1 {
    font-size: clamp(2.05rem, 10.5vw, 3rem) !important;
    line-height: 1.03 !important;
    letter-spacing: -.035em !important;
  }
  body.home .mobile-action-deck { margin-top: 0; }
  body.home .char-hero { margin-bottom: 2rem !important; }
  body.home .char-hero::before { display: none; }
  body.category-page > main > .hero {
    min-height: 220px;
    padding: 3rem 5% 1.6rem !important;
  }
  body.category-page > main > .hero h1 { font-size: clamp(2.3rem, 12vw, 3.4rem) !important; }
  :where(.btn-primary, .ch-cta, .adv-start, .save-btn, .adv-btn, .daily-btn, #pf-go, .buy-btn) {
    min-height: 46px;
  }
}

@media (hover: none) {
  :where(.glass-card, .feature-card, .watch-card, .goods-card, .featured-card, .category-card, .guide-card, .news-card, .gx-card):hover {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ============================================================
   v2.1 — 独立レビュー(2026-07-25)対応の是正レイヤー
   目的: 「色に意味を戻す」「器を中身に合わせる」「端末ごとに別レイアウト」。
   新しい世界観は足さない。既存の hero 動画・キャラ・商品データ・購入導線は不変。
   ============================================================ */

/* ---- 1. 機能配色トークン（唯一の正） -------------------------------
   cyan  = 案内/情報/現在地   amber = 確定(購入・開始・適用)
   violet= ランク/メタ専用     green = 適合確定   red   = 警告
   バイオレットをボタンに、アンバーをランクに使わない。 */
:root {
  --fn-nav: var(--aim-cyan, #4de1f1);
  --fn-commit: var(--aim-amber, #f0b44d);
  --fn-commit-hot: var(--aim-amber-hot, #ffd17a);
  --fn-rank: #a855f7;
  --fn-fit: #10b981;
  --fn-warn: #f43f5e;
  --fn-commit-ink: #111820;
}

/* home hero の主CTAだけが cyan→violet→amber の3色グラデで残っていた
   (css/home_v2.css:37)。確定操作なのでアンバー単色に戻す。 */
body.home .hero-cta .btn-primary {
  background: var(--fn-commit) !important;
  color: var(--fn-commit-ink) !important;
  border: 1px solid var(--fn-commit-hot) !important;
  box-shadow: 5px 5px 0 rgba(240, 180, 77, .16) !important;
}
body.home .hero-cta .btn-primary:hover { background: var(--fn-commit-hot) !important; }
/* 二次CTAは案内色のアウトライン（確定色と競合させない） */
body.home .hero-cta .btn-ghost-lp {
  border-color: var(--fn-nav) !important;
  color: var(--fn-nav) !important;
}

/* 確定色をページ独自CTAにも適用（body 前置で inline <style> より強くする） */
body .aib-cta,
body .gc-cta,
body .wl-cta,
body .adv-btn:not(.is-ghost) {
  background: var(--fn-commit) !important;
  color: var(--fn-commit-ink) !important;
  border-color: var(--fn-commit) !important;
  box-shadow: 0 8px 20px rgba(251, 191, 36, .26) !important;
}
body .aib-cta:hover { box-shadow: 0 14px 30px rgba(251, 191, 36, .36) !important; }

/* ---- 2. ランクバッジ: GOD だけ金の細縁で最上位を示す（塗りは violet） ---- */
.tier-badge.tier-god {
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .85), 0 2px 8px rgba(0, 0, 0, .35);
}

/* ---- 6. タップターゲット 44px ------------------------------------- */
@media (max-width: 699px) {
  body.category-page .fb-panel .chip { min-height: 44px !important; }
  body.category-page .compare-tray .ct-x {
    width: 44px !important;
    height: 44px !important;
    font-size: .82rem !important;
  }
  /* 0×0 で潰れていたクリアを、アイコン付きの 44px 操作として復帰させる */
  body.category-page .compare-tray .ct-clear {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 .6rem;
    font-size: .74rem;
    line-height: 1;
    white-space: nowrap;
  }
  body.category-page .compare-tray .ct-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
  }
}

/* ---- 7. 日本語見出しの孤立文字を防ぐ ------------------------------ */
body.home .hero h1,
body.category-page #page-title,
.section-title,
.ch-title {
  text-wrap: pretty;
  line-break: strict;
}
/* 390px で「勝つための一台を選ぶ。」が1行に収まる大きさまで落とす */
@media (max-width: 480px) {
  body.home .hero h1 { font-size: clamp(1.95rem, 8.2vw, 2.35rem) !important; }
  body.category-page #page-title { font-size: clamp(1.7rem, 7.4vw, 2.1rem) !important; }
}
/* desktop は文字を小さくせず、行幅を広げて2行に収める（11文字 x 86px = 946px） */
@media (min-width: 1181px) {
  body.home .hero h1 { max-width: min(1040px, 100%) !important; }
}

/* ---- 8. カードの高さは中身が決める（固定高・最小高をやめる） ------ */
/* 主カードは中のアート分の高さが要るので残し、本文2行しかない小セルの
   固定高だけを外す。行の高さは中身の多い方が決める。 */
body.home .gx-card { min-height: 0 !important; }
body.home .gx-bento { grid-auto-rows: min-content; align-items: start; }
body.home .gx-bento > a { align-self: start; }

/* ---- 9. タブレット(700-1180px)は縮小コピーにしない ---------------- */
@media (min-width: 700px) and (max-width: 1180px) {
  /* 次の行動デッキ: 01 を全幅の主カード、02/03 を2列に */
  body.home .mad-rail {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: .85rem !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }
  body.home .mad-rail > *:first-child { grid-column: 1 / -1; }
  body.home .mad-rail > * {
    width: auto !important;
    flex: none !important;
    scroll-snap-align: none !important;
  }
  body.home .mad-nav,
  body.home .mad-hint { display: none !important; }
  /* bento も2列のまま高さは内容依存 */
  body.home .gx-bento { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---- 10. 端で切れるフルハイト立ち絵をやめる ----------------------- */
/* advisor は専用ステージがあるので対象外。best / wishlist などの装飾配置のみ。 */
@media (max-width: 1599px) {
  body:not(.advisor-page) .vn-char { display: none !important; }
}
@media (min-width: 1600px) {
  body:not(.advisor-page) .vn-char.vn-left {
    left: max(24px, calc(50vw - 590px - 24px - clamp(160px, 18vw, 340px))) !important;
  }
  body:not(.advisor-page) .vn-char.vn-right {
    right: max(24px, calc(50vw - 590px - 24px - clamp(160px, 18vw, 340px))) !important;
  }
  /* 額装: 角ティック付きのフレームにして「壁紙」ではなく「役割のある立ち絵」にする */
  body:not(.advisor-page) .vn-char .vn-art {
    position: relative;
    border: 1px solid var(--aim-line, rgba(139, 174, 201, .22));
    background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
    padding: 8px;
  }
  body:not(.advisor-page) .vn-char .vn-art::before,
  body:not(.advisor-page) .vn-char .vn-art::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid var(--fn-nav);
    pointer-events: none;
  }
  body:not(.advisor-page) .vn-char .vn-art::before {
    top: -1px; left: -1px; border-right: 0; border-bottom: 0;
  }
  body:not(.advisor-page) .vn-char .vn-art::after {
    bottom: -1px; right: -1px; border-left: 0; border-top: 0;
  }
}

/* ---- 2b. ランクバッジの最終上書き（ホロ調ルールが style.css 側に !important で
   点在しているため、ここで一元化する）。ランク＝バイオレット。 ---- */
.tier-badge.tier-god {
  background: linear-gradient(120deg, #e9d5ff, #c084fc 45%, #faf5ff 55%, #a855f7 70%) !important;
  color: #2e1065 !important;
}
.tier-badge.tier-s-plus {
  background: linear-gradient(120deg, #d8b4fe, #a855f7 50%, #7e22ce 100%) !important;
  color: #2e1065 !important;
}
.tier-badge.tier-s {
  background: linear-gradient(120deg, #c4b5fd, #8b5cf6 50%, #6d28d9 100%) !important;
  color: #f5f3ff !important;
  text-shadow: none !important;
}
.tier-badge.tier-a-plus {
  background: linear-gradient(120deg, #a5b4fc, #7c3aed 50%, #5b21b6 100%) !important;
  color: #f5f3ff !important;
}
.tier-badge.tier-a {
  background: linear-gradient(120deg, #c7d2fe, #6d28d9 50%, #4c1d95 100%) !important;
  color: #f5f3ff !important;
}
/* ランク由来のグローもアンバー/ピンクをやめてバイオレットに揃える */
.item-card.rarity-god:hover { box-shadow: 0 18px 44px rgba(0,0,0,.6), 0 0 30px rgba(168,85,247,.45) !important; }
.item-card.rarity-s-plus:hover { box-shadow: 0 18px 44px rgba(0,0,0,.6), 0 0 28px rgba(168,85,247,.38) !important; }
/* APEX META はメタ表示。確定色(アンバー)を使わない。 */
.apex-badge { box-shadow: 0 0 14px rgba(168,85,247,.45), inset 0 1px 0 rgba(255,255,255,.35) !important; }

/* ---- 6b. 残っていた小さすぎる操作 ---- */
.gax-sale-later {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center;
  padding: 0 .5rem !important;
}

/* ---- 2c. カード左のレア度アクセントもランク＝バイオレットのランプに統一 ----
   （css/style.css:2073- の --rar は金/ピンク/青/シアンが混在し、
     確定色・警告色・案内色とランク表示が衝突していた） */
.item-card.rarity-god     { --rar: 192, 132, 252; }
.item-card.rarity-s-plus  { --rar: 168, 85, 247; }
.item-card.rarity-s       { --rar: 139, 92, 246; }
.item-card.rarity-a-plus  { --rar: 124, 58, 237; }
.item-card.rarity-a       { --rar: 109, 40, 217; }
.item-card.rarity-god { border-color: rgba(192, 132, 252, .55) !important; }

/* キャラ行の遷移ボタンは「案内」なので確定色にもランク色にもしない */
body.category-page .cat-compare-hint .cch-go,
.ch-row .cch-go {
  background: transparent !important;
  border: 1px solid var(--fn-nav) !important;
  color: var(--fn-nav) !important;
  box-shadow: none !important;
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
}

/* ---- 4b. 横向きスマホ(844x390)で主CTAの下余白が 3px しか無い ----
   tools/responsive_qa.mjs の critical-action-below-fold ガードが要求する 12px を
   満たしていなかった（v2導入でヘッダが 80px→72px になり計算がずれた）。
   見出し・本文・CTA の縦リズムだけを詰めて、CTA の下に確実な余白を作る。 */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 920px) {
  body.home .hero {
    min-height: calc(100svh - 72px) !important;
    padding-top: max(44px, calc(env(safe-area-inset-top) + 34px)) !important;
    padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
  }
  body.home .hero h1 {
    font-size: clamp(1.9rem, 4.6vw, 2.5rem) !important;
    line-height: 1.02 !important;
  }
  body.home .hero > p { margin-top: .7rem !important; font-size: .88rem !important; }
  body.home .hero-cta { margin-top: .8rem !important; }
}