/* ═══════════════════════════════════════════════════
   ウマ娘ガチャラボ v2 — 白ベース・姉妹サイト調整
   gachalabo_v2.css の上に読み込む
   ═══════════════════════════════════════════════════ */

body.umako-v2 {
  --gl-accent: #f06292;
  --gl-accent-hover: #e91e63;
  --gl-accent-soft: rgba(240, 98, 146, 0.12);
  --gl-accent-bar: #f06292;
  --gl-bg: #ffffff;
  --gl-bg-sub: #f7f8fc;
  --gl-bg-card: #ffffff;
  --gl-border: #e2e8f0;
  --gl-text: #1e293b;
  --gl-text-muted: #64748b;
  --gl-header-bg: #ffffff;
  --gl-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
}

body.umako-v2.gacha-sup {
  --gl-accent: #2196f3;
  --gl-accent-hover: #1976d2;
  --gl-accent-soft: rgba(33, 150, 243, 0.12);
  --gl-accent-bar: #2196f3;
}

body.umako-v2 {
  background-color: var(--gl-bg);
  color: var(--gl-text);
  overflow-x: hidden;
}
/* umako_v2 を読むページ全体の横揺れ防止 */
html {
  overflow-x: hidden;
}

/* スマホ: ページ横揺れ防止 + ヘッダー検索ボタン切れ対策 */
@media (max-width: 767px) {
  body.umako-v2 #gl-header .gl-header-inner {
    gap: 8px;
    padding: 8px 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  body.umako-v2 .gl-logo {
    flex: 0 1 auto;
    min-width: 0;
  }
  body.umako-v2 .gl-logo img {
    height: 40px;
    max-width: min(148px, 42vw);
    width: auto;
  }
  body.umako-v2 .gl-search-form {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }
  body.umako-v2 .gl-search-input {
    min-width: 0;
    width: 100%;
  }
  body.umako-v2 .gl-search-btn {
    flex-shrink: 0;
    padding: 8px 12px;
  }
  body.umako-v2 .gl-gacha-type-wrap {
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
  }
  body.umako-v2 #gl-hero,
  body.umako-v2 .gl-prob-card,
  body.umako-v2 .gl-section {
    max-width: 100%;
    box-sizing: border-box;
  }
  body.umako-v2 #chart_10,
  body.umako-v2 #chart_60,
  body.umako-v2 #chart_24 {
    max-width: 100%;
    overflow: hidden;
  }
}

/* ── ガチャ種別タブ（ウマ娘固有） ── */
.gl-gacha-type-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 10px 12px 0;
}
.gl-gacha-type-nav {
  display: flex;
  gap: 8px;
  border-bottom: 3px solid var(--gl-accent);
}
.gl-gacha-type-nav a {
  flex: 1;
  display: block;
  text-align: center;
  padding: 12px 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gl-text-muted);
  background: #eceff4;
  border-radius: 8px 8px 0 0;
  text-decoration: none;
  line-height: 1.35;
  transition: background 0.2s, color 0.2s;
}
@media (min-width: 480px) {
  .gl-gacha-type-nav a { font-size: 0.92rem; padding: 13px 12px; }
}
.gl-gacha-type-nav a:hover {
  color: var(--gl-text);
  background: #e2e8f0;
}
.gl-gacha-type-nav a.is-active {
  color: #fff;
  background: var(--gl-accent);
}

/* ── ヘッダー・ナビ ── */
body.umako-v2 #gl-header,
body.umako-v2 #all_info,
body.umako-v2 .gl-time-tabs-wrap,
body.umako-v2 #gl-hero,
body.umako-v2 .gl-monster-section,
body.umako-v2 .gl-ranking-section,
body.umako-v2 .gl-about-section,
body.umako-v2 .gl-sister-section,
body.umako-v2 .gl-twitter-section,
body.umako-v2 #gl-footer,
body.umako-v2 .gl-pagetop {
  background: var(--gl-bg);
  color: var(--gl-text);
}

body.umako-v2 #gl-header {
  border-bottom: 1px solid var(--gl-border);
  box-shadow: var(--gl-shadow);
}

body.umako-v2 .gl-search-input {
  background: #fff;
  border-color: var(--gl-border);
  color: var(--gl-text);
}
body.umako-v2 .gl-search-input:focus { border-color: var(--gl-accent); }
body.umako-v2 .gl-search-btn {
  background: var(--gl-accent);
}
body.umako-v2 .gl-search-btn:hover { background: var(--gl-accent-hover); }

body.umako-v2 #all_info {
  color: var(--gl-text-muted);
  border-bottom: 1px solid var(--gl-border);
}
body.umako-v2 #all_info .today_con,
body.umako-v2 #all_info .today_ssr {
  color: var(--gl-accent);
  font-weight: 700;
}

body.umako-v2 .gl-page-h1 {
  color: var(--gl-text);
}

body.umako-v2 .gl-time-nav li a {
  color: var(--gl-text-muted);
  border-bottom-color: transparent;
}
body.umako-v2 .gl-time-nav li a:hover {
  color: var(--gl-text);
  border-bottom-color: #cbd5e1;
}
body.umako-v2 .gl-time-nav li.select a {
  color: var(--gl-accent);
  border-bottom-color: var(--gl-accent);
}

body.umako-v2 #gl-hero .gl-hero-inner {
  background: transparent;
}

body.umako-v2 .gl-prob-card {
  background: var(--gl-bg-card);
  border: 1px solid var(--gl-border);
  box-shadow: var(--gl-shadow);
}

body.umako-v2 .gl-card-title,
body.umako-v2 .gl-prob-label,
body.umako-v2 .gl-stat-label {
  color: var(--gl-text-muted);
}
body.umako-v2 .gl-prob-value,
body.umako-v2 .gl-stat-value {
  color: var(--gl-text);
}
body.umako-v2 .gl-stat-card {
  background: var(--gl-bg-sub);
  border: 1px solid var(--gl-border);
}

body.umako-v2 .gl-reload-btn {
  border-color: var(--gl-border);
  color: var(--gl-text-muted);
  background: #fff;
}
body.umako-v2 .gl-reload-btn:hover {
  border-color: var(--gl-accent);
  color: var(--gl-accent);
  background: var(--gl-accent-soft);
}

body.umako-v2 .period-badge {
  background: var(--gl-accent-soft);
  color: var(--gl-accent);
}

body.umako-v2 .live-dot {
  background: #22c55e;
}

body.umako-v2 .gl-section-title {
  color: var(--gl-text);
}
body.umako-v2 .gl-section-title-bar {
  background: var(--gl-accent-bar) !important;
}

body.umako-v2 .gl-about-box {
  background: var(--gl-bg-sub);
  border: 1px solid var(--gl-border);
  color: var(--gl-text);
  border-left: 4px solid var(--gl-accent);
  box-shadow: var(--gl-shadow);
}
body.umako-v2 .gl-about-box p {
  color: #1e293b;
  font-size: 0.95rem;
  line-height: 1.9;
  margin: 0;
}

body.umako-v2 #gl-time-tabs {
  background: var(--gl-bg);
  border-bottom: 1px solid var(--gl-border);
}

body.umako-v2 .gl-sister-link {
  display: block;
  max-width: 600px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--gl-border);
  transition: border-color 0.2s, box-shadow 0.2s;
}
body.umako-v2 .gl-sister-link:hover {
  border-color: var(--gl-accent);
  box-shadow: var(--gl-shadow);
}
body.umako-v2 .gl-sister-link img {
  display: block;
  width: 100%;
  height: auto;
}

body.umako-v2 .gl-monster-slide a {
  color: var(--gl-text-muted);
}
body.umako-v2 .gl-monster-slide .gl-slide-name {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--gl-text);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.umako-v2 .gl-monster-slide a:hover img {
  border-color: var(--gl-accent);
}
body.umako-v2 .gl-monster-arrow {
  background: var(--gl-accent);
}
body.umako-v2 .gl-action-btn {
  border-color: var(--gl-border);
  color: var(--gl-text);
  background: #fff;
}
body.umako-v2 .gl-action-btn:hover {
  border-color: var(--gl-accent);
  color: var(--gl-accent);
  background: var(--gl-accent-soft);
}

body.umako-v2 #haishutu_top10 .top10-item a {
  background: var(--gl-bg-sub);
  border: 1px solid var(--gl-border);
  color: var(--gl-text);
  box-shadow: none;
}
body.umako-v2 #haishutu_top10 .top10-item a:hover {
  box-shadow: var(--gl-shadow);
  transform: translateX(3px);
}
body.umako-v2 #haishutu_top10 .top10-item a:hover {
  border-color: var(--gl-accent);
}
body.umako-v2 .top10-name { color: var(--gl-text); }
body.umako-v2 .top10-title { color: var(--gl-text-muted); }
body.umako-v2 .top10-rate { color: var(--gl-accent); }
body.umako-v2 .rank-num {
  background: var(--gl-accent);
  color: #fff;
}

/* サポートTOP20: 縦長カードを大きく・全体が見えるように */
body.umako-v2.gacha-sup .top10-item a {
  gap: 12px;
  padding: 10px 12px;
}
body.umako-v2.gacha-sup .top10-item .trimming {
  width: 84px;
  height: 110px;
  border-radius: 8px;
  background: #fff;
}
body.umako-v2.gacha-sup .top10-item .trimming img {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
@media (max-width: 480px) {
  body.umako-v2.gacha-sup .top10-item .trimming {
    width: 72px;
    height: 94px;
  }
}

/* プリティーTOP20: 縦長カードを大きく・全体が見えるように */
body.umako-v2.gacha-cha .top10-item a {
  gap: 12px;
  padding: 10px 12px;
}
body.umako-v2.gacha-cha .top10-item .trimming {
  width: 80px;
  height: 105px;
  border-radius: 8px;
  background: #fff;
}
body.umako-v2.gacha-cha .top10-item .trimming img {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
@media (max-width: 480px) {
  body.umako-v2.gacha-cha .top10-item .trimming {
    width: 68px;
    height: 90px;
  }
}

body.umako-v2 .gl-pagetop a {
  background: #fff;
  border-color: var(--gl-border);
  color: var(--gl-text-muted);
}
body.umako-v2 .gl-pagetop a:hover {
  border-color: var(--gl-accent);
  color: var(--gl-accent);
}

body.umako-v2 #gl-footer {
  border-top: 1px solid var(--gl-border);
}
body.umako-v2 .gl-footer-nav li a {
  color: var(--gl-text-muted);
  border-color: var(--gl-border);
}
body.umako-v2 .gl-footer-nav li a:hover {
  color: var(--gl-accent);
  border-color: var(--gl-accent);
}
body.umako-v2 .gl-footer-copy {
  color: var(--gl-text-muted);
}

/* gachalabo_v2 のダークテーマ色を一括上書き */
body.umako-v2 .gl-time-tabs-wrap,
body.umako-v2 .gl-sister-section {
  background: var(--gl-bg-sub);
}

body.umako-v2 a { color: var(--gl-accent); }
body.umako-v2 a:hover { color: var(--gl-accent-hover); }

/* モンスト版バナーセクション */
body.umako-v2 .gl-other-gl-section {
  background: var(--gl-bg-sub);
  padding: 24px 12px;
  text-align: center;
}
body.umako-v2 .gl-other-gl-section p {
  margin: 0 0 12px;
  font-weight: 700;
  color: var(--gl-text);
}

/* タイミング画像セクション */
body.umako-v2 .gl-timing-section {
  background: var(--gl-bg-sub);
  padding: 28px 12px 36px;
}
body.umako-v2 .gl-timing-section img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 16px;
}
body.umako-v2 .gl-timing-section p {
  max-width: 640px;
  margin: 0 auto;
  color: var(--gl-text-muted);
  line-height: 1.7;
}

/* Twitter */
body.umako-v2 .gl-twitter-section {
  padding: 24px 12px 40px;
  text-align: center;
}

/* アクセント一括（オレンジ → テーマ色） */
body.umako-v2 .gl-time-nav li.select a,
body.umako-v2 .gl-article-arrow,
body.umako-v2 .gl-monster-arrow {
  /* already handled */
}

/* ── キャラ個別ページ ── */
body.umako-v2 .gl-breadcrumb {
  background: var(--gl-bg);
  color: var(--gl-text-muted);
  border-bottom: 1px solid var(--gl-border);
}
body.umako-v2 .gl-breadcrumb a { color: var(--gl-accent); }
body.umako-v2 .gl-breadcrumb-sep { color: #94a3b8; }

body.umako-v2 .gl-monster-detail-section,
body.umako-v2 .gl-bbs-section {
  background: var(--gl-bg);
}
body.umako-v2 .gl-monster-detail-img {
  border: 1px solid var(--gl-border);
  box-shadow: var(--gl-shadow);
}
body.umako-v2 .gl-monster-detail-label { color: var(--gl-text-muted); }
body.umako-v2 .gl-monster-detail-title { color: var(--gl-text); }
body.umako-v2 .gl-monster-gacha-type { color: var(--gl-text-muted); }
body.umako-v2 .gl-monster-gacha-type strong { color: var(--gl-accent); }

body.umako-v2 .gl-badge-type {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 10px;
  border-radius: 12px;
  background: var(--gl-accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: bold;
}

body.umako-v2 .gl-ninki-card { padding: 16px; }
body.umako-v2 .gl-ninki-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 700;
  color: var(--gl-text);
}
body.umako-v2 .gl-ninki-label {
  min-width: 3.5rem;
  color: var(--gl-text-muted);
  font-weight: 600;
}
body.umako-v2 .gl-ninki-pt { color: var(--gl-accent); margin-right: 4px; }
body.umako-v2 .gl-ninki-pos.pos1 { color: #ffab00; }
body.umako-v2 .gl-ninki-pos.pos2 { color: #94a3b8; }
body.umako-v2 .gl-ninki-pos.pos3 { color: #f97316; }

body.umako-v2 .gl-article-list li a {
  background: var(--gl-bg-sub);
  border: 1px solid var(--gl-border);
  color: var(--gl-text);
}
body.umako-v2 .gl-article-list li a:hover {
  border-color: var(--gl-accent);
  color: var(--gl-accent);
  background: var(--gl-accent-soft);
}
body.umako-v2 .gl-article-arrow { color: var(--gl-accent); }

body.umako-v2 .gl-bbs-note { color: var(--gl-text-muted); }
body.umako-v2 .gl-bbs-error {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 0.9rem;
  font-weight: 600;
}
body.umako-v2 .gl-bbs-form-toggle {
  background: #fff;
  border: 1px solid var(--gl-border);
  color: var(--gl-text);
  box-shadow: var(--gl-shadow);
}
body.umako-v2 .gl-bbs-form-toggle:hover {
  border-color: var(--gl-accent);
  color: var(--gl-accent);
}
body.umako-v2 .gl-bbs-form {
  background: var(--gl-bg-sub);
  border: 1px solid var(--gl-border);
}
body.umako-v2 .gl-bbs-label { color: var(--gl-text-muted); }
body.umako-v2 .gl-bbs-field input,
body.umako-v2 .gl-bbs-field textarea {
  background: #fff;
  border: 1px solid var(--gl-border);
  color: var(--gl-text);
}
body.umako-v2 .gl-bbs-item {
  background: var(--gl-bg-sub);
  border: 1px solid var(--gl-border);
}
body.umako-v2 .gl-bbs-no { color: var(--gl-accent); font-weight: 700; }
body.umako-v2 .gl-bbs-name { color: var(--gl-text); font-weight: 700; }
body.umako-v2 .gl-bbs-time { color: var(--gl-text-muted); font-size: 0.8rem; }
body.umako-v2 .gl-bbs-body,
body.umako-v2 .gl-bbs-body p {
  color: #1e293b;
}

/* ── ランキング / 排出一覧 ── */
body.umako-v2 .gl-page-lead {
  margin: 0 0 16px;
  color: var(--gl-text-muted);
  line-height: 1.7;
}
body.umako-v2 .gl-ranking-section,
body.umako-v2 .gl-itiran-section {
  max-width: 900px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
body.umako-v2 .gl-ranking-inner {
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
body.umako-v2 .gl-ranking-section .gl-time-tabs-wrap {
  max-width: 100%;
  margin: 0 auto 8px;
}
body.umako-v2 .gl-ranking-section .gl-time-nav {
  max-width: 100%;
}
body.umako-v2 .gl-rank-list {
  list-style: none;
  margin: 12px auto 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 640px;
  box-sizing: border-box;
}
body.umako-v2 .gl-rank-list .top10-item a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--gl-bg-sub);
  border: 1px solid var(--gl-border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--gl-text);
}
body.umako-v2 .gl-rank-list .trimming {
  flex-shrink: 0;
  width: 64px;
  height: 84px;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--gl-border);
}
body.umako-v2 .gl-rank-list .trimming img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
body.umako-v2.gacha-sup .gl-rank-list .trimming {
  width: 72px;
  height: 94px;
}
body.umako-v2 .gl-itiran-section {
  background: var(--gl-bg);
}
body.umako-v2 .gl-itiran-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
body.umako-v2 .gl-itiran-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 140px;
  padding: 10px 8px;
  background: var(--gl-bg-sub);
  border: 1px solid var(--gl-border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--gl-text);
  text-align: center;
  box-sizing: border-box;
}
body.umako-v2 .gl-itiran-card:hover {
  border-color: var(--gl-accent);
  box-shadow: var(--gl-shadow);
}
body.umako-v2 .gl-itiran-time {
  font-size: 0.75rem;
  color: var(--gl-text-muted);
  font-weight: 700;
}
body.umako-v2 .gl-itiran-card img {
  width: 100%;
  max-width: 120px;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--gl-border);
  background: #fff;
}
body.umako-v2 .gl-itiran-name {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--gl-text);
}
body.umako-v2 .gl-itiran-hours {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 420px;
}
body.umako-v2 .gl-empty {
  color: var(--gl-text-muted);
  padding: 20px 0;
}
body.umako-v2 .gl-itiran-grid > .gl-empty {
  width: 100%;
  text-align: center;
}
body.umako-v2 .gl-pager {
  margin: 14px 0;
}
body.umako-v2 .gl-pager .page {
  display: inline-block;
  margin: 2px 3px;
  padding: 6px 10px;
  border: 1px solid var(--gl-border);
  border-radius: 8px;
  color: var(--gl-text);
  text-decoration: none;
  font-size: 0.85rem;
}
body.umako-v2 .gl-pager .page:hover,
body.umako-v2 .gl-pager b,
body.umako-v2 .gl-pager strong {
  border-color: var(--gl-accent);
  color: var(--gl-accent);
}


body.umako-v2 .gl-pager .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 8px 0 14px;
}
body.umako-v2 .gl-pager .page {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--gl-border);
  background: #fff;
  color: var(--gl-text-muted);
  text-decoration: none;
  font-size: 0.85rem;
}
body.umako-v2 .gl-pager .page.active,
body.umako-v2 .gl-pager .page:hover {
  border-color: var(--gl-accent);
  color: var(--gl-accent);
  background: var(--gl-accent-soft);
}
body.umako-v2 .gl-pager section { margin: 0; }
body.umako-v2 .gl-pager #containers { margin: 0; }

/* ═══════════════════════════════════════════════════
   フッター操作性: AdSense自動広告のアンカー広告(画面下部固定)が
   フッターのリンクに重なってタップできなくなる問題への対策。
   フッター下部に余白を確保し、最下部でもナビが広告の上に来るようにする。
   併せてタップ領域を拡大。
   ═══════════════════════════════════════════════════ */
body.umako-v2 #gl-footer {
  padding-bottom: 100px; /* アンカー広告(約50〜90px)の分の逃がし */
}
body.umako-v2 .gl-footer-nav li a {
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  body.umako-v2 #gl-footer {
    padding-bottom: 120px;
  }
  /* タップ領域を広げて押し間違い/取りこぼしを軽減 */
  body.umako-v2 .gl-footer-nav {
    gap: 8px;
  }
  body.umako-v2 .gl-footer-nav li a {
    padding: 11px 15px;
    line-height: 1.2;
  }
}