/* =========================================================
   UI Polish (scoped)
   - 全ページ共通の“土台”はこれに統一（body.ui-polish でのみ有効）
   - 既存デザインは変えず、レイアウト/可読性の土台を揃える
========================================================= */

.ui-polish{
  --ink: rgba(11,18,32,.92);
  --muted: rgba(11,18,32,.66);
  --muted2: rgba(11,18,32,.52);
  --line: rgba(11,18,32,.10);

  --glass: rgba(255,255,255,.62);
  --glass2: rgba(255,255,255,.46);

  --shadow: 0 18px 54px rgba(11,18,32,.10);
  --inset: 0 1px 0 rgba(255,255,255,.70) inset;

  /* HERO: 全ページ統一（高さ/背景/余白） */
  --hero-min-h: 140px;   /* ← これで強制的に下がる */
  --hero-pad-t: 28px;
  --hero-pad-b: 28px;
  --hero-line: rgba(11,18,32,.10);
  --hero-ink: #0b1220;
  --hero-muted: rgba(11,18,32,.70);
}

/* ---- Text hierarchy ---- */
.ui-polish .page-title{
  color: var(--ink);
  letter-spacing: -0.03em;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.ui-polish .page-lead,
.ui-polish .muted{
  color: var(--muted);
}
.ui-polish .breadcrumbs{
  font-size: 12.5px;
  color: rgba(11,18,32,.60);
}
.ui-polish .breadcrumbs a{
  color: rgba(11,18,32,.72);
  text-decoration: none;
  border-bottom: 1px solid rgba(11,18,32,.18);
}
.ui-polish .breadcrumbs a:hover{
  border-bottom-color: rgba(11,18,32,.38);
}

/* ---- Buttons / pills ---- */
.ui-polish .btn,
.ui-polish .btn-ghost,
.ui-polish .pill,
.ui-polish .jump-btn{
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}

.ui-polish .btn{
  border-radius: 999px;
  border: 1px solid rgba(11,18,32,.14);
  background: linear-gradient(180deg, rgba(11,18,32,.88), rgba(11,18,32,.78));
  color: rgba(255,255,255,.96);
  box-shadow: 0 14px 34px rgba(11,18,32,.18);
}
.ui-polish .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 46px rgba(11,18,32,.22);
}

.ui-polish .btn-ghost{
  border-radius: 999px;
  border: 1px solid rgba(11,18,32,.12);
  background: rgba(255,255,255,.58);
  color: rgba(11,18,32,.84);
  box-shadow: var(--inset), 0 12px 30px rgba(11,18,32,.08);
}
.ui-polish .btn-ghost:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.72);
  border-color: rgba(11,18,32,.16);
}

.ui-polish .pill,
.ui-polish .jump-btn{
  border-radius: 999px;
  border: 1px solid rgba(11,18,32,.12);
  background: rgba(255,255,255,.62);
  box-shadow: var(--inset), 0 12px 28px rgba(11,18,32,.07);
  text-decoration: none;
  color: rgba(11,18,32,.80);
}
.ui-polish .pill:hover,
.ui-polish .jump-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.76);
  border-color: rgba(11,18,32,.16);
}
.ui-polish .pill.is-active{
  background: rgba(255,255,255,.84);
  border-color: rgba(11,18,32,.18);
  font-weight: 900;
}

/* ---- Form controls ---- */
.ui-polish input,
.ui-polish select,
.ui-polish textarea{
  border-radius: 12px;
  border: 1px solid rgba(11,18,32,.10);
  background: rgba(255,255,255,.78);
  box-shadow: 0 1px 0 rgba(255,255,255,.65) inset;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.ui-polish input:focus,
.ui-polish select:focus,
.ui-polish textarea:focus{
  outline: none;
  border-color: rgba(43,179,255,.45);
  box-shadow: 0 0 0 4px rgba(43,179,255,.14);
}

/* ---- Cards depth ---- */
.ui-polish .card{
  border-radius: 20px;
  background: linear-gradient(180deg, var(--glass), var(--glass2));
  box-shadow: var(--shadow), var(--inset);
  border: 1px solid rgba(11,18,32,.10);
}

/* =========================
   HERO: 全ページ統一
========================= */
.ui-polish .page-hero{
  position: relative;
  min-height: var(--hero-min-h);
  padding: var(--hero-pad-t) 0 var(--hero-pad-b);
  border-bottom: 1px solid var(--hero-line);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(900px 520px at 18% 30%, rgba(43,179,255,.22), transparent 65%),
    radial-gradient(820px 520px at 52% 28%, rgba(57,215,179,.18), transparent 68%),
    radial-gradient(860px 560px at 86% 32%, rgba(255,179,58,.16), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.35));
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

.ui-polish .page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background: linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,.20));
  opacity:.9;
}

.ui-polish .page-hero .breadcrumbs{
  color: rgba(11,18,32,.62);
  font-size: 13px;
  margin-bottom: 10px;
}

.ui-polish .page-hero .page-title{
  margin: 0;
  color: var(--hero-ink);
  letter-spacing: -.02em;
  line-height: 1.15;
  font-size: clamp(28px, 3vw, 44px);
}

.ui-polish .page-hero .page-lead{
  margin: 12px 0 0;
  color: var(--hero-muted);
  line-height: 1.8;
  font-size: 15px;
}

@media (max-width: 820px){
  .ui-polish{
    --hero-min-h: 0px;
    --hero-pad-t: 8px;
    --hero-pad-b: 8px;
  }
}
/* =========================
   Container width (ui-polish unified)
   ========================= */
.ui-polish .container{
  width: min(1320px, calc(100% - 56px));
  margin-inline: auto;
}

/* 既存の about/results と同じ縮み方 */
@media (max-width: 1100px){
  .ui-polish .container{
    width: min(1180px, calc(100% - 42px));
  }
}
.ui-polish .section{
  padding: 22px 0 28px;
}
/* ロゴは画像だけ。背景（丸/グラデ/影）は使わない */
.site-header .brand-mark{
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;

  width: 134px;
  object-fit: contain;
  display: block;
}

/* brand の横並びだけ担保 */
.site-header .brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}


/* =========================================================
   HERO: DARK AI (no grid) / signal + particles + scan
   - グリッド無し
   - もっと暗い
========================================================= */

.ui-polish .page-hero{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(255,255,255,.10);

  background:
    /* 3色の光源（弱めに広く） */
    radial-gradient(1200px 680px at 16% 24%, rgba(79,125,255,.22), transparent 62%),
    radial-gradient(1100px 640px at 54% 18%, rgba(34,197,143,.18), transparent 64%),
    radial-gradient(1200px 720px at 88% 28%, rgba(183,132,255,.18), transparent 66%),

    /* ベースの暗さ */
    linear-gradient(180deg, #04060d 0%, #060a16 55%, #03040a 100%);
}

/* 信号の流れ（スキャン）＋干渉っぽい帯 */
.ui-polish .page-hero::before{
  content:"";
  position:absolute;
  inset:-80px;
  z-index:-2;
  pointer-events:none;

  background:
    /* 斜めスキャン（データフロー） */
    linear-gradient(120deg, transparent 30%, rgba(79,125,255,.20) 44%, transparent 58%),
    linear-gradient(120deg, transparent 46%, rgba(34,197,143,.16) 58%, transparent 72%),
    linear-gradient(120deg, transparent 58%, rgba(183,132,255,.16) 70%, transparent 86%),

    /* うっすら干渉（細い帯） */
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 32%, rgba(255,255,255,.04) 62%, transparent);

  filter: blur(10px);
  opacity:.85;
}

/* 粒子（ノード）＋ビネットで締める */
.ui-polish .page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;

  background:
    /* 小粒（ノード） */
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,255,255,.22), transparent 70%),
    radial-gradient(1.6px 1.6px at 20% 62%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(1.6px 1.6px at 44% 34%, rgba(255,255,255,.14), transparent 70%),
    radial-gradient(1.6px 1.6px at 66% 54%, rgba(255,255,255,.14), transparent 70%),
    radial-gradient(1.6px 1.6px at 84% 30%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(1.6px 1.6px at 90% 68%, rgba(255,255,255,.18), transparent 70%),

    /* ビネット */
    radial-gradient(1400px 520px at 50% 10%, transparent 45%, rgba(0,0,0,.68) 92%);

  opacity:.9;
}

/* HUDコーナーは“残すが控えめ” */
.ui-polish .page-hero .container{ position: relative; }

.ui-polish .page-hero .container::before{
  content:"";
  position:absolute;
  inset:-16px -10px;
  pointer-events:none;
  border-radius: 18px;
  opacity:.80;

  background:
    /* TL */
    linear-gradient(to right, rgba(79,125,255,.40), transparent 42%) top left/200px 2px no-repeat,
    linear-gradient(to bottom, rgba(79,125,255,.40), transparent 42%) top left/2px 120px no-repeat,

    /* TR */
    linear-gradient(to left, rgba(34,197,143,.34), transparent 42%) top right/200px 2px no-repeat,
    linear-gradient(to bottom, rgba(34,197,143,.34), transparent 42%) top right/2px 120px no-repeat,

    /* BL */
    linear-gradient(to right, rgba(183,132,255,.34), transparent 42%) bottom left/200px 2px no-repeat,
    linear-gradient(to top, rgba(183,132,255,.34), transparent 42%) bottom left/2px 120px no-repeat,

    /* BR */
    linear-gradient(to left, rgba(255,179,58,.24), transparent 42%) bottom right/200px 2px no-repeat,
    linear-gradient(to top, rgba(255,179,58,.24), transparent 42%) bottom right/2px 120px no-repeat;
}

/* テキストは白寄りに（暗背景で読めるように） */
.ui-polish .page-hero .breadcrumbs{ color: rgba(255,255,255,.72); }
.ui-polish .page-hero .breadcrumbs a{ color: rgba(255,255,255,.82); border-bottom-color: rgba(255,255,255,.22); }
.ui-polish .page-hero .page-title{
  color: rgba(255,255,255,.96);
  text-shadow: 0 16px 40px rgba(0,0,0,.55);
}
.ui-polish .page-hero .page-lead{ color: rgba(255,255,255,.78); }

@media (max-width: 820px){
  .ui-polish .page-hero::before{ opacity:.75; }
  .ui-polish .page-hero .container::before{ inset:-12px -8px; opacity:.70; }
}
/* =========================================
   Subtle AI background (very light)
   - 既存デザインは変えず、背景だけ“AIっぽい気配”を足す
========================================= */

/* ① 全ページ共通：薄いAIレイヤー */
.ui-polish{
  position: relative;
}

/* 背景レイヤー（固定・超薄） */
.ui-polish::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .22;                 /* ← 全体の強さ（0.12〜0.28で調整） */

  /* 1) 超薄グリッド 2) 斜めのスキャン帯 3) 微ノイズ風 */
  background:
    /* 細グリッド（大） */
    repeating-linear-gradient(
      to right,
      rgba(11,18,32,.07) 0 1px,
      transparent 1px 180px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(11,18,32,.07) 0 1px,
      transparent 1px 180px
    ),
    /* 細グリッド（小） */
    repeating-linear-gradient(
      to right,
      rgba(11,18,32,.04) 0 1px,
      transparent 1px 48px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(11,18,32,.04) 0 1px,
      transparent 1px 48px
    ),
    /* 斜めスキャン帯（かなり薄い） */
    linear-gradient(
      135deg,
      transparent 0%,
      rgba(43,179,255,.10) 22%,
      transparent 45%,
      rgba(183,132,255,.10) 62%,
      transparent 82%,
      transparent 100%
    );
  filter: blur(.2px);
}

/* 中身は前面に（背景に負けない） */
.ui-polish header,
.ui-polish main,
.ui-polish footer{
  position: relative;
  z-index: 1;
}

/* ② 動き（任意・超ゆっくり／酔わない） */
@media (prefers-reduced-motion: no-preference){
  .ui-polish::before{
    animation: aiBgDrift 18s linear infinite;
  }
  @keyframes aiBgDrift{
    0%   { transform: translate3d(-1.2%, 0, 0); }
    100% { transform: translate3d( 1.2%, 0, 0); }
  }
}


/* =========================================================
   MAIN背景：SVGなし（薄いグラデ＋光のにじみ）
   - heroは含めない（topで開始位置を下げる）
   - nav/footerはmain外なので影響なし
========================================================= */

.ui-polish{
  --pattern-start: 260px; /* hero下端に合わせて調整 */
}

/* mainにだけベースの薄い水色グラデ */
body.ui-polish main{
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg,
      rgba(214,242,255,.45) 0%,
      rgba(238,251,255,.28) 45%,
      rgba(255,255,255,.90) 100%);
}

/* heroの下から、うっすら“AIっぽい光”だけ足す */
body.ui-polish main::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top: var(--pattern-start);
  bottom: 0;
  z-index: 0;
  pointer-events:none;

  background:
    radial-gradient(900px 520px at 18% 14%, rgba(43,179,255,.10), transparent 65%),
    radial-gradient(860px 560px at 52% 22%, rgba(57,215,179,.08), transparent 68%),
    radial-gradient(920px 620px at 86% 18%, rgba(183,132,255,.08), transparent 70%),
    radial-gradient(1100px 520px at 50% 90%, rgba(255,179,58,.06), transparent 72%);

  opacity: .90;          /* ←全体の強さ（0.7〜1.0） */
  filter: blur(18px);    /* ←“にじみ”の質感 */
}

/* main内の実コンテンツを前へ */
body.ui-polish main > *{
  position: relative;
  z-index: 1;
}
/* 「ポータルに戻る」ボタン（旧 .to-top） */
.to-top{
  z-index: 999;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);

  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);

  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  color: #111;
  text-decoration: none;

  box-shadow: 0 10px 25px rgba(0,0,0,.10);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.to-top:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.14);
  background: rgba(255,255,255,.98);
  text-decoration: none;
}

.to-top:active{
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
}

.to-top:focus-visible{
  outline: 3px solid rgba(0,0,0,.25);
  outline-offset: 3px;
}

/* 画面が狭い時は少し小さめ */
@media (max-width: 640px){
  .to-top{
    right: 12px;
    bottom: 12px;
    padding: 10px 14px;
    font-size: 13px;
  }
}