/*
  Serply 共通スタイル
  - データ分析ダッシュボード風のUIを意識したカラーと余白
  - Bootstrapをベースに軽微なカスタム
*/
:root {
  --sp-primary-900: #0b2a4a;
  --sp-primary-700: #12497a;
  --sp-primary-500: #2d7fd3;
  --sp-accent: #22c8ff;
  --sp-muted: #6c7a89;
  --sp-bg: #f5f7fb;
  --sp-card: #ffffff;
  --sp-border: #e6e9f0;
}

body.bg-body { background: var(--sp-bg); }

/****************************
  ヘッダー/ヒーロー
****************************/
.bg-gradient-primary {
  background: linear-gradient(135deg, var(--sp-primary-700), var(--sp-primary-500));
}
.gradient-hero {
  background: linear-gradient(135deg, var(--sp-primary-700), var(--sp-primary-500));
}
.text-white-75 { color: rgba(255,255,255,0.85); }

/****************************
  カード/タイル
****************************/
.glass-card {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.25);
}
.feature-card {
  background: var(--sp-card);
  border: 1px solid var(--sp-border);
  border-radius: 12px;
}
.icon-wrap {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; font-size: 1.1rem;
}
.stat-tile {
  background: rgba(255,255,255,0.2);
  border-radius: 10px;
  padding: .75rem 1rem;
  color: #fff;
}
.stat-label { font-size: .8rem; opacity: .85; }
.stat-value { font-weight: 700; font-size: 1.2rem; }

/****************************
  リスト/テーブル
****************************/
.table-results thead th { white-space: nowrap; font-weight: 600; color: #334155; }
.table-results tbody tr { border-bottom: 1px dashed var(--sp-border); }
.table-results .rank { width: 64px; text-align: center; font-weight: 700; color: var(--sp-primary-700); }
.result-title { font-weight: 600; color: #0f172a; }
.result-url { color: #475569; font-size: .85rem; }

/****************************
  サイドバー/フィルタ
****************************/
.sidebar {
  position: sticky; top: 96px;
}
.filter-card { border-radius: 12px; border: 1px solid var(--sp-border); background: var(--sp-card); }

/****************************
  ユーティリティ
****************************/
.badge-soft { background: #e9f2ff; color: var(--sp-primary-700); }
.small-muted { color: var(--sp-muted); font-size: .9rem; }

/****************************
  レスポンシブ微調整
****************************/
@media (max-width: 991.98px) {
  .sidebar { position: static; top: auto; }
}



.how-step {
  background: var(--sp-card);
  border: 1px solid var(--sp-border);
  border-radius: 12px;
  padding: 1.25rem;
}
.how-step .step-number {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #e9f2ff; color: var(--sp-primary-700);
  font-weight: 700; margin-bottom: .5rem;
}
.how-step .step-title { font-weight: 700; }
.how-step .step-desc { color: var(--sp-muted); font-size: .95rem; }

.usecase-card {
  background: var(--sp-card);
  border: 1px solid var(--sp-border);
  border-radius: 12px;
}

/* light.htmlの雰囲気をBootstrapで再現するための軽い追加装飾 */
.badge-pulse {
    position: relative;
}
.badge-pulse::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 999px;
    border: 2px solid rgba(34,200,255,.35);
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%,100%{ opacity: 1 }
    50%{ opacity: .4 }
}
.hover-rise { transition: transform .2s ease, box-shadow .2s ease; }
.hover-rise:hover { transform: translateY(-4px); box-shadow: 0 1rem 2rem rgba(0,0,0,.08) !important; }
.section-muted { color: #475569 }

/* カード微調整 */
.feature-card {
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.06);
    transition: transform 180ms ease, box-shadow 180ms ease;
    overflow: hidden;
}
.feature-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(17,24,39,0.10); }

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.spin-icon {
    display: inline-block;
    animation: spin 2s linear infinite;
}
.icon-wrap {
    width: 48px;
    height: 48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    font-size:20px;
}
.badge-soft {
    background: rgba(0,0,0,0.04);
    color: #111827;
    font-weight:600;
    font-size: 12px;
    padding: 6px 8px;
    border-radius: 999px;
}
/* 小画面でアイコンとテキストの余白を調整 */
@media (max-width: 575.98px){
    .feature-card { padding: 1rem; }
    .icon-wrap { width:44px; height:44px; font-size:18px; }
}