/* =========================================================
   Brightcove Training – FINAL CLEAN (2025-09)
   目的:
   - 重複/競合の撤去
   - どのテンプレートでも黒フッターを常に最下段へ
   - 既存UI(カード/ヘッダー/パネル/サポPill/各コース装飾)は維持
   ========================================================= */

/* ========= 0) 基盤: “フッターは必ず最下段” を保証 ========= */
/* 画面高を満たす縦フレックス + 旧スペーサーの完全停止 */
html, body, #root, .App { min-height: 100dvh; height: auto; }
body, #root, .App { display: flex; flex-direction: column; }

/* main がある/ない両テンプレで本文を伸ばす */
main.App__main { flex: 1 0 auto; }
.PageLayout.CustomPage, .PageLayout, .CustomPage { flex: 1 0 auto; }

/* body::after スペーサーの亡霊対策（両コロン対応） */
body::after, body:after {
  content: none !important;
  display: none !important;
  height: 0 !important; margin: 0 !important; padding: 0 !important;
}

/* 黒フッターは“最後の要素”として下に押し下げ、固定化はしない */
.bcx-legalbar {
  position: relative !important;
  margin-top: auto !important;
  order: 9999 !important;
  flex: 0 0 auto !important;
}

/* サポートPillは最前面のまま */
.bcx-dock { position: fixed; right: 24px; bottom: 24px; z-index: 2147483000; }

/* テンプレ側の footer 固定/sticky 指定を念のため打ち消し */
footer.bcx-legalbar { position: relative !important; bottom: auto !important; top: auto !important; }

/* 旧・固定フッター用の下余白は常に0に */
body { padding-bottom: 0 !important; }

/* ========= 1) Tokens ========= */
:root{
  --bcx-text:#0f172a; --bcx-muted:#475569;
  --bcx-panel:#f6f8fb; --bcx-card:#fff;
  --bcx-cta:#1e40af; --bcx-cta-hover:#1b4ed8;
  --bcx-border:#e5e7eb;
  --bcx-ring-ambient:rgba(59,130,246,.35);
  --bcx-shadow:0 10px 30px rgba(2,6,23,.08);
  --bcx-radius:14px; --bcx-gap:20px;

  /* gradient highlight */
  --bcx-grad-1:#ff2d55; --bcx-grad-2:#ff8a00; --bcx-grad-3:#ffd600; --bcx-grad-w:6px;

  /* hero rhythm */
  --hero-gap:22px; --hero-row-top:14px; --hero-row-wrap-gap:8px;

  /* card rhythm */
  --card-pad:18px; --thumb-h:160px;
  --media-gap:12px; --meta-gap:6px; --desc-gap:10px; --cta-gap:14px;
  --desc-lines:3; --desc-lh:1.55;
}

/* ========= 2) Base ========= */
.bcx{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans JP",Meiryo,sans-serif;
  color:var(--bcx-text);
}
.bcx a{ color:inherit; text-decoration:none; }
.mt-16{ margin-top:1rem; }
.bcx .container{ width:100%; max-width:1100px; margin-inline:auto; padding-inline:clamp(16px,4vw,32px); }
.bcx-block{ margin-top:32px; }

/* Grid */
.bcx .grid{ display:grid; gap:var(--bcx-gap); grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; }
@media (max-width:960px){ .bcx .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .bcx .grid{ grid-template-columns:1fr; } }

/* Buttons */
.bcx .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.7rem 1rem; font-size:14px; font-weight:700; line-height:1;
  border-radius:12px; border:1px solid transparent; cursor:pointer;
  transition:transform .06s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color:transparent; color:var(--bcx-text);
}
.bcx .btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--bcx-ring-ambient); }
.bcx .btn--primary{ background:var(--bcx-cta); color:#fff; box-shadow:var(--bcx-shadow); }
.bcx .btn--primary:hover{ background:var(--bcx-cta-hover); transform:translateY(-1px); }
.bcx .btn--ghost{ background:#fff; color:var(--bcx-cta); border-color:#e5e7eb; }
.bcx .btn--ghost:hover{ border-color:#cbd5e1; transform:translateY(-1px); }

/* Panels (recommend/next steps) */
.bcx .panel{ background:var(--bcx-panel); border-radius:var(--bcx-radius); box-shadow:var(--bcx-shadow); padding:28px; display:flex; flex-direction:column; height:100%; }
.bcx .panel p{ color:var(--bcx-muted); }
.bcx .panel > .btn, .bcx .panel > div:last-child{ margin-top:auto; }
#recommend{ margin-top:clamp(28px,5vw,44px); margin-bottom:clamp(32px,6vw,56px); }
#recommend .grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr); gap:var(--bcx-gap); align-items:start; }
#recommend .grid > *{ min-width:0; }

/* ========= 3) Header ========= */
.bcx-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(8px);
  background:rgba(255,255,255,.85);
  border-bottom:1px solid var(--bcx-border);
}
.bcx-header__bar{
  height:56px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px;
  max-width:1100px; margin:0 auto; padding:0 clamp(16px,4vw,32px);
}
.bcx-header__brand img{ height:28px; width:auto; display:block; }
.bcx-nav__list{ display:flex; gap:20px; list-style:none; margin:0; padding:0; align-items:center; }
.bcx-nav__list a{
  display:inline-block; padding:8px 2px; font-weight:600;
  background-image:linear-gradient(90deg,var(--bcx-grad-1),var(--bcx-grad-2),var(--bcx-grad-3));
  background-repeat:no-repeat; background-size:0% 2px; background-position:0 100%;
  transition:background-size .25s ease, color .2s ease;
}
.bcx-nav__list a:hover,.bcx-nav__list a:focus-visible,.bcx-nav__list a[aria-current="page"]{ background-size:100% 2px; }
.bcx-header__actions{ display:flex; align-items:center; gap:12px; }
.bcx-header__actions a{ font-size:14px; font-weight:600; padding:.55rem .8rem; border-radius:12px; }
.bcx-header__actions .bcx-header__support,.bcx-header__actions .bcx-header__cta{ background:#fff; color:var(--bcx-cta); border:1px solid #e5e7eb; }

/* ========= 4) Cards ========= */
.bcx .card{
  position:relative; background:var(--bcx-card); border-radius:var(--bcx-radius);
  box-shadow:var(--bcx-shadow); padding:var(--card-pad); display:flex; flex-direction:column; transition:transform .2s;
}
.bcx .card:hover{ transform:translateY(-3px); }
.bcx .card > .card__media,
.bcx .card > .card__thumb,
.bcx .card > img.card__logo{ display:block; margin-bottom:var(--media-gap) !important; }
.bcx .card__media{ height:var(--thumb-h); border-radius:12px; overflow:hidden; }
.bcx .card__thumb{ width:100%; height:var(--thumb-h); object-fit:cover; object-position:center; border-radius:12px; }

/* “黒プレート”を行共通で敷く（courses / 分割行にも対応） */
#courses .grid > .card::before,
#courses-row1 .grid > .card::before,
#courses-row2 .grid > .card::before{
  content:""; position:absolute; left:var(--card-pad); right:var(--card-pad); top:var(--card-pad);
  height:var(--thumb-h); border-radius:12px; background:#0d0d0d; z-index:0; pointer-events:none;
}
#courses .grid > .card .card__thumb,
#courses .grid > .card .card__logo,
#courses-row1 .grid > .card .card__thumb,
#courses-row1 .grid > .card .card__logo,
#courses-row2 .grid > .card .card__thumb,
#courses-row2 .grid > .card .card__logo{
  position:relative; z-index:1; width:100%; height:var(--thumb-h); border-radius:12px; object-position:center;
}

/* Essentials（1行目の2枚目）だけ青プレート */
#courses-row1 .grid > .card:nth-child(2){ background:var(--bcx-card) !important; color:var(--bcx-text) !important; }
#courses-row1 .grid > .card:nth-child(2)::before{ background:#08078c; }
#courses-row1 .grid > .card:nth-child(2) .btn--ghost{ color:var(--bcx-cta) !important; background:#fff !important; border-color:#e5e7eb !important; }

/* Card typography */
.bcx h2{ margin:0 0 8px; font-size:clamp(22px,3.4vw,28px); }
.bcx .card h3{ margin:0 0 var(--meta-gap) !important; font-size:18px; line-height:1.35; font-weight:800; }
.bcx .card h3 + div{ margin:0 0 var(--desc-gap) !important; display:flex; gap:12px; align-items:center; flex-wrap:wrap; row-gap:4px; color:var(--bcx-muted); }
.bcx .card h3 + div + p{
  margin:0 !important; color:var(--bcx-muted); line-height:var(--desc-lh);
  display:-webkit-box; -webkit-line-clamp:var(--desc-lines); -webkit-box-orient:vertical; overflow:hidden;
  min-height:calc(1em * var(--desc-lh) * var(--desc-lines));
}
.bcx .card .btn{ margin-top:var(--cta-gap); align-self:flex-start; }

/* ========= 5) コンテンツブロックのスキン（必要分） ========= */
/* Interactivity */
.bcx-int{
  --r:12px; --bw:3px; --g1:#ffb600; --g2:#ff6a00; --g3:#ff0066;
  --py:14px; --px:24px; --gap:10px; --bal:8px;
  position:relative; border:var(--bw) solid transparent; border-radius:var(--r);
  background:linear-gradient(#000,#000) padding-box, linear-gradient(90deg,var(--g1),var(--g2),var(--g3)) border-box; color:#fff;
  padding:var(--py) var(--px) calc(var(--py) + var(--bal)) var(--px);
}
.bcx-int :where(p,ul,ol){ margin:0; } .bcx-int ul{ padding-left:1.25em; margin-top:var(--gap); } .bcx-int li{ margin:.25em 0; }

/* Video Editor */
.bcx-ve{
  --r:12px; --bw:3px; --g1:#ffb600; --g2:#ff6a00; --g3:#ff0066;
  --py:14px; --px:24px; --gap:10px; --bal:8px;
  position:relative; border-radius:var(--r); border:var(--bw) solid transparent;
  background-image:linear-gradient(#000,#000), linear-gradient(90deg,var(--g1),var(--g2),var(--g3));
  background-origin:border-box; background-clip:padding-box, border-box; color:#fff;
  padding:var(--py) var(--px) calc(var(--py)+var(--bal)) var(--px);
}
.bcx-ve :where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,blockquote,pre){ margin:0; color:#fff; line-height:1.7; }

/* Essentials */
.bcx-ess{
  --r:12px; --bw:3px; --bg:#06088f; --bd:#42eae4;
  --py:14px; --px:24px; --gap:10px; --bal:10px;
  position:relative; box-sizing:border-box; border-radius:var(--r);
  border:var(--bw) solid var(--bd); background:var(--bg); color:#fff;
  padding:var(--py) var(--px) calc(var(--py)+var(--bal)) var(--px);
  display:flex; flex-direction:column; row-gap:var(--gap);
}
.bcx-ess :where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,blockquote,pre){ margin:0; color:#fff; line-height:1.7; }

/* Ads & Monetization */
.bcx-ad{
  --r:12px; --bw:3px; --g1:#ffb600; --g2:#ff6a00; --g3:#ff0066;
  --py:14px; --px:24px; --gap:10px; --bal:8px;
  position:relative; box-sizing:border-box; overflow:hidden; border-radius:var(--r);
  border:var(--bw) solid transparent;
  background-image:linear-gradient(#000,#000), linear-gradient(90deg,var(--g1),var(--g2),var(--g3));
  background-clip:padding-box, border-box; color:#fff;
  padding:var(--py) var(--px) calc(var(--py) + var(--bal));
}
.bcx-ad *{ color:#fff; margin:0; }

/* ========= 6) Support Dock（現状維持・軽量化） ========= */
.bcx-dock{ right:clamp(12px,3vw,24px); bottom:calc(12px + env(safe-area-inset-bottom,0px)); }
.bcx-dock--combo{ --pill-h:44px; --pill-px:14px; --pill-fs:14px; }
.bcx-dock--combo .bcx-dock__pill{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--pill-h); padding:0 var(--pill-px);
  font-size:var(--pill-fs); font-weight:700; border-radius:9999px;
  background:#0b0b0b; color:#ff8a00; border:1px solid #1f2937; box-shadow:0 8px 18px rgba(2,6,23,.1);
  text-decoration:none; transition:transform .12s ease, border-color .2s ease, box-shadow .2s ease;
}
.bcx-dock--combo .bcx-dock__pill:hover{ border-color:#334155; transform:translateY(-1px) scale(1.01); }
.bcx-dock--combo .bcx-dock__pill .bcx-gradtext{
  background:linear-gradient(90deg,var(--bcx-grad-1),var(--bcx-grad-2),var(--bcx-grad-3));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}

/* ========= 7) Legal bar（黒フッター本体） ========= */
.bcx-legalbar{
  background:#0b172a; color:#e2e8f0; border-top:1px solid #1f2937; box-shadow:0 -6px 16px rgba(2,6,23,.12);
}
.bcx-legalbar__inner{
  max-width:1100px; margin:0 auto;
  padding:12px clamp(16px,4vw,32px);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.bcx-legalbar .copy{ margin:0; font-size:14px; color:#cbd5e1; }
.bcx-legalbar .links{ display:flex; align-items:center; gap:28px; }
.bcx-legalbar .links a{ color:#94a3b8; text-decoration:none; white-space:nowrap; }
.bcx-legalbar .links a:hover{ color:#fff; text-decoration:underline; }
.bcx-legalbar .social{ display:flex; align-items:center; gap:16px; }
.bcx-legalbar .social a{ display:inline-flex; width:24px; height:24px; color:#94a3b8; transition:transform .06s ease, color .2s ease; }
.bcx-legalbar .social a:hover{ color:#fff; transform:translateY(-1px); }
.bcx-legalbar .social svg{ width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:640px){ .bcx-legalbar .links{ gap:18px; } .bcx-legalbar .social{ gap:12px; } }



/* =========================
   Support Pill (simple, stable)
   ========================= */

   .sp-dock {
    position: fixed;
    inset-block-end: 20px;            /* bottom */
    inset-inline-end: 24px;           /* right */
    z-index: 2147483000;
    isolation: isolate;               /* 自身のスタッキング文脈 */
  }
  
  /* ピル本体 */
  .sp-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    height: 48px;
    padding: 0 20px;
    border-radius: 999px;
    background:#0B1220;               /* 黒基調 */
    color:#fff;
    font-weight: 700;
    letter-spacing:.25px;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    text-decoration: none;
    border:1px solid rgba(255,255,255,.06);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    position: relative;
    z-index: 2;                        /* パネルより前に */
  }
  .sp-pill:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,0,0,.28); }
  
  /* パネル（左に出す） */
  .sp-panel {
    position: absolute;
    inset-block-end: 0;                /* ピルの下端に合わせる */
    inset-inline-end: calc(100% + 10px); /* ピルの左に10px空けて配置（隙間はブリッジでカバー） */
    min-width: 260px;
    display: flex;
    gap: 16px;
    padding: 14px 16px;
    background: #fff;
    color:#111;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,.22);
    border: 1px solid rgba(13,18,32,.08);
  
    opacity: 0;
    visibility: hidden;
    transform: translateX(8px) scale(.98);
    transition: opacity .14s ease, transform .14s ease, visibility .14s step-end;
    pointer-events: none;             /* 閉じている時はクリックを無効 */
    z-index: 1;
  }
  
  /* 旧ホバー切れ対策：不可視ブリッジ（ピルとパネルの間の隙間を埋める） */
  .sp-dock::before {
    content:"";
    position: absolute;
    inset-block-end: 0;
    /* ピルの左～パネルの右端の“隙間”に被せる幅（環境により微調整OK） */
    inset-inline-end: calc(100% - 6px);
    width: 20px;                      /* 20pxの橋をかける */
    height: 56px;
    background: transparent;
    z-index: 1;
  }
  
  /* 開く条件：コンテナに hover または focus が入っている間 */
  .sp-dock:hover .sp-panel,
  .sp-dock:focus-within .sp-panel {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1);
    pointer-events: auto;             /* 開いている間はクリック可 */
    transition: opacity .16s ease, transform .16s ease, visibility 0s;
  }
  
  /* パネル内リンク */
  .sp-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    text-decoration: none;
    color: #0B1220;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid rgba(13,18,32,.08);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
  .sp-link:hover {
    background: #F3F6FF;
    border-color: rgba(13,18,32,.16);
  }
  
  /* ダーク背景上でも色が沈まないように */
  @media (prefers-color-scheme: dark) {
    .sp-panel { background:#0F1424; color:#E6E9F5; border-color: rgba(255,255,255,.06); }
    .sp-link { color:#E6E9F5; border-color: rgba(255,255,255,.08); }
    .sp-link:hover { background:#1B2240; border-color: rgba(255,255,255,.18); }
  }
  
  /* 念のため：旧 .bcx-dock を無効化（残骸対策）— 1〜2リリース後に削除OK */
  .bcx-dock, .bcx-dock-simple { display:none !important; }

  /* アクション行の整列と隙間 */
.bcx-header__actions{
  display:flex; align-items:center; gap:12px;
}

/* デスクトップのJPフラグ */
.bcx-lang{
  display:inline-flex; inline-size:32px; block-size:24px;
  border-radius:6px; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.18);
  border:1px solid rgba(0,0,0,.06);
  outline-offset:2px;
}
.bcx-lang svg{ inline-size:100%; block-size:100%; display:block; }
.bcx-lang:focus-visible{ box-shadow:0 0 0 3px rgba(78,169,209,.55) }

/* モバイルではヘッダーの旗を隠して、メニュー側に表示 */
@media (max-width: 900px){
  .bcx-lang{ display:none; }
  .bcx-nav--mobile .bcx-lang-mobile{ margin-top:4px; }
  .bcx-nav--mobile .bcx-lang-link{
    display:flex; align-items:center; gap:10px; padding:10px 0;
    font-weight:600;
  }
  .bcx-nav--mobile .bcx-lang-flag{
    inline-size:24px; block-size:18px;
    border-radius:4px; overflow:hidden;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 1px 2px rgba(0,0,0,.12);
    display:inline-flex;
  }
  .bcx-nav--mobile .bcx-lang-flag svg{ inline-size:100%; block-size:100%; display:block; }
}

/* 並びの余白（既にあればそのままでOK） */
.bcx-header__actions{ display:flex; align-items:center; gap:12px; }

/* 言語リンク（デスクトップ） */
.bcx-lang{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:10px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  text-decoration:none; color:#0B1220; font-weight:600; line-height:1;
}
.bcx-lang:hover{ background:#F7F8FC; }
.bcx-lang:focus-visible{ outline: none; box-shadow:0 0 0 3px rgba(78,169,209,.45); }

/* 小さめフラグ（約20x14） */
.bcx-lang-flag{
  inline-size:20px; block-size:14px;
  border-radius:3px; overflow:hidden;
  border:1px solid rgba(0,0,0,.12);
  display:inline-flex;
}
.bcx-lang-flag svg{ inline-size:100%; block-size:100%; display:block; }

/* ラベル */
.bcx-lang-label{ font-size:14px; }

/* モバイルはヘッダー側非表示（メニュー内に既に表示あり） */
@media (max-width: 900px){
  .bcx-lang{ display:none; }
}

/* ダークモード */
@media (prefers-color-scheme: dark){
  .bcx-lang{ color:#E6E9F5; border-color:rgba(255,255,255,.08); box-shadow:none; }
  .bcx-lang:hover{ background:#141B2E; }
  .bcx-lang-flag{ border-color:rgba(255,255,255,.22); }
}

/* Lang pill: flag bigger, label smaller, no wrap */
.bcx-lang{
  gap: 6px;
  padding: 5px 8px;
}

.bcx-lang-flag{
  inline-size: 24px;   /* ← ここを 22〜26px で好みに調整可 */
  block-size: 16px;    /* 3:2 比率キープ（16pxならOK） */
  border-radius: 3px;
}

.bcx-lang-label{
  font-size: 12px;     /* ← 10〜13pxで微調整OK */
  line-height: 1;
  white-space: nowrap; /* CJKの縦積み回避（折り返し防止） */
}

/* 言語チップ（デスクトップ） */
.bcx-langchip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff; color:#0B1220;
  font-weight:600; line-height:1; text-decoration:none;
  white-space:nowrap; outline-offset:2px;
}
.bcx-langchip:hover{ background:#F7F8FC; }
.bcx-langchip:focus-visible{ box-shadow:0 0 0 3px rgba(78,169,209,.45); }

/* 純CSSで描く“日の丸フラグ” 3:2 / 白地＋赤丸 */
.bcx-langchip__icon{
  inline-size:24px; block-size:16px;           /* ←旗サイズ。22〜26pxなどで調整可 */
  background:#fff; border:1px solid rgba(0,0,0,.16);
  border-radius:3px; position:relative; flex:0 0 auto;
}
.bcx-langchip__icon::after{
  content:""; position:absolute; inset:50% auto auto 50%;
  inline-size:8px; block-size:8px;              /* ←赤丸サイズ。6〜9pxで調整可 */
  background:#BC002D; border-radius:50%;
  transform:translate(-50%,-50%);
}

/* ラベルは小さめにして主役は旗 */
.bcx-langchip__label{ font-size:12px; }

/* 幅が狭いときはアイコンのみ（アクセシビリティはaria-labelで担保） */
@media (max-width: 1100px){ .bcx-langchip__label{ display:none; } }

/* モバイルではヘッダー側を隠し、メニュー内の言語リンクを使用 */
@media (max-width: 900px){ .bcx-langchip{ display:none; } }

/* ダークモード */
@media (prefers-color-scheme: dark){
  .bcx-langchip{ background:#0F1424; color:#E6E9F5; border-color:rgba(255,255,255,.12); }
  .bcx-langchip:hover{ background:#141B2E; }
  .bcx-langchip__icon{ background:#fff; border-color:rgba(255,255,255,.28); }
}

/* ===== Support Pill hover styling ===== */
:root{
  /* 調整用トークン（好みで変えてOK） */
  --sp-pill-bg: #0B1220;
  --sp-pill-bg-hover: #111936;
  --sp-link-hover-bg: #F3F6FF;            /* ライト */
  --sp-link-hover-border: rgba(13,18,32,.22);
  --sp-link-deemph: .65;                  /* 非ホバーの薄さ */
}

.sp-pill{
  background: var(--sp-pill-bg);
}
.sp-pill:hover,
.sp-dock:hover .sp-pill{
  background: var(--sp-pill-bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
}

/* パネル内：ホバーしてない項目は薄く、ホバー中だけハイライト */
.sp-panel:hover .sp-link{ opacity: var(--sp-link-deemph); }
.sp-link:hover,
.sp-link:focus-visible{
  opacity: 1;
  background: var(--sp-link-hover-bg);
  border-color: var(--sp-link-hover-border);
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
}

/* 左にブランド色のアクセント（お好みでON） */
.sp-link{ position: relative; }
.sp-link::before{
  content:""; position:absolute; inset-block:8px; inset-inline-start:-1px;
  inline-size:0; border-radius:2px; background:#4EA9D1; transition:inline-size .16s;
}
.sp-link:hover::before,
.sp-link:focus-visible::before{ inline-size:3px; }

/* ダークモード配慮 */
@media (prefers-color-scheme: dark){
  :root{
    --sp-link-hover-bg: #1B2240;
    --sp-link-hover-border: rgba(255,255,255,.22);
  }
  .sp-pill{ background:#0B1220; }
  .sp-pill:hover,
  .sp-dock:hover .sp-pill{ background:#141C33; }
}