/* 2026-07-01: restore ranking detail board layout. */
html body.nav-theme-v2.is-ranking-page .ranking-page.ranking-page--detail {
  width: min(1200px, calc(100% - 48px)) !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 88px 0 48px !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 0 16px !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__breadcrumb a {
  color: #0f172a !important;
  text-decoration: none !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 330px !important;
  gap: 28px !important;
  align-items: start !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__main-card,
html body.nav-theme-v2.is-ranking-page .ranking-hot,
html body.nav-theme-v2.is-ranking-page .ranking-detail__note {
  overflow: hidden !important;
  border: 1px solid #e5edf4 !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05) !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 24px 28px 20px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__head h1 {
  margin: 0 0 10px !important;
  color: #111827 !important;
  font-size: 28px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__head p:not(.ranking-page__eyebrow) {
  max-width: 660px !important;
  margin: 0 !important;
  color: #64748b !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__head > a {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  background: #f3f4f6 !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  text-decoration: none !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__item {
  display: grid !important;
  grid-template-columns: 52px 56px minmax(0, 1fr) 86px 92px 54px !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 88px !important;
  padding: 14px 24px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background: #fff !important;
  color: #101828 !important;
  transition: background 0.16s ease, box-shadow 0.16s ease !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__item:hover {
  background: #fff7f8 !important;
  box-shadow: inset 3px 0 0 #e60023 !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__rank {
  display: grid !important;
  justify-items: center !important;
  gap: 6px !important;
  color: #94a3b8 !important;
  text-align: center !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__rank strong {
  color: #111827 !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__item:nth-child(1) .ranking-detail__rank strong {
  color: #e60023 !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__item:nth-child(2) .ranking-detail__rank strong {
  color: #ff8a00 !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__item:nth-child(3) .ranking-detail__rank strong {
  color: #ffc069 !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__rank span,
html body.nav-theme-v2.is-ranking-page .ranking-detail__delta span {
  color: #ef4444 !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__logo {
  display: grid !important;
  place-items: center !important;
  width: 56px !important;
  height: 56px !important;
  overflow: hidden !important;
  border: 1px solid #e5edf4 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__logo img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__main {
  display: grid !important;
  min-width: 0 !important;
  gap: 8px !important;
  color: inherit !important;
  text-decoration: none !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__main > span:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__main strong {
  overflow: hidden !important;
  color: #111827 !important;
  font-size: 18px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__main em {
  flex: 0 0 auto !important;
  color: #94a3b8 !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 650 !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__main small {
  display: block !important;
  overflow: hidden !important;
  color: #64748b !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__inline,
html body.nav-theme-v2.is-ranking-page .ranking-hot__inline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-top: 2px !important;
  min-width: 0 !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__detail-label,
html body.nav-theme-v2.is-ranking-page .ranking-detail__direct-label,
html body.nav-theme-v2.is-ranking-page .ranking-hot__detail-label {
  color: #2563eb !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__state-label {
  color: #94a3b8 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__divider {
  width: 3px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: #cbd5e1 !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__delta,
html body.nav-theme-v2.is-ranking-page .ranking-detail__metric {
  display: grid !important;
  justify-items: end !important;
  gap: 7px !important;
  color: #94a3b8 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__metric strong {
  color: #334155 !important;
  font-size: 17px !important;
  font-weight: 780 !important;
  line-height: 1 !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__delta small,
html body.nav-theme-v2.is-ranking-page .ranking-detail__metric small {
  color: #94a3b8 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__direct {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 32px !important;
  padding: 0 11px !important;
  border-radius: 8px !important;
  background: #f3f4f6 !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__direct:hover,
html body.nav-theme-v2.is-ranking-page .ranking-detail__head > a:hover {
  background: #eff6ff !important;
  color: #2563eb !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__pager {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 24px !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__aside {
  position: sticky !important;
  top: 86px !important;
  display: grid !important;
  gap: 16px !important;
  min-width: 0 !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-hot {
  padding: 18px 16px 0 !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-hot h2,
html body.nav-theme-v2.is-ranking-page .ranking-detail__note h2 {
  margin: 0 !important;
  padding: 0 0 16px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  color: #111827 !important;
  font-size: 20px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-hot__list {
  display: grid !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-hot__item {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 18px 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  color: inherit !important;
  text-decoration: none !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-hot__logo {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  overflow: hidden !important;
  border: 1px solid #e5edf4 !important;
  border-radius: 9px !important;
  background: #fff !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-hot__logo img {
  width: 36px !important;
  height: 36px !important;
  object-fit: contain !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-hot__copy {
  display: grid !important;
  min-width: 0 !important;
  gap: 6px !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-hot__copy strong,
html body.nav-theme-v2.is-ranking-page .ranking-hot__copy em {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-hot__copy strong {
  color: #111827 !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-hot__copy em {
  color: #64748b !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-hot__copy small {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__note {
  padding: 18px 16px !important;
}

html body.nav-theme-v2.is-ranking-page .ranking-detail__note p {
  margin: 14px 0 0 !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.75 !important;
}

@media (max-width: 1200px) {
  html body.nav-theme-v2.is-ranking-page .ranking-detail__layout {
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: 18px !important;
  }

  html body.nav-theme-v2.is-ranking-page .ranking-detail__item {
    grid-template-columns: 44px 50px minmax(0, 1fr) 78px 82px !important;
  }

  html body.nav-theme-v2.is-ranking-page .ranking-detail__direct {
    display: none !important;
  }
}

@media (max-width: 760px) {
  html body.nav-theme-v2.is-ranking-page .ranking-page.ranking-page--detail {
    width: 100% !important;
    max-width: 100% !important;
    padding: 76px 14px 24px !important;
  }

  html body.nav-theme-v2.is-ranking-page .ranking-detail__layout {
    grid-template-columns: 1fr !important;
  }

  html body.nav-theme-v2.is-ranking-page .ranking-detail__breadcrumb {
    margin-bottom: 12px !important;
    font-size: 12px !important;
  }

  html body.nav-theme-v2.is-ranking-page .ranking-detail__head {
    display: grid !important;
    padding: 18px 16px !important;
  }

  html body.nav-theme-v2.is-ranking-page .ranking-detail__head h1 {
    font-size: 24px !important;
  }

  html body.nav-theme-v2.is-ranking-page .ranking-detail__item {
    grid-template-columns: 34px 40px minmax(0, 1fr) 62px !important;
    min-height: 72px !important;
    padding: 11px 10px !important;
    gap: 8px !important;
  }

  html body.nav-theme-v2.is-ranking-page .ranking-detail__rank strong {
    font-size: 22px !important;
  }

  html body.nav-theme-v2.is-ranking-page .ranking-detail__logo {
    width: 40px !important;
    height: 40px !important;
  }

  html body.nav-theme-v2.is-ranking-page .ranking-detail__logo img {
    width: 34px !important;
    height: 34px !important;
  }

  html body.nav-theme-v2.is-ranking-page .ranking-detail__main strong {
    font-size: 14px !important;
  }

  html body.nav-theme-v2.is-ranking-page .ranking-detail__main em,
  html body.nav-theme-v2.is-ranking-page .ranking-detail__main small,
  html body.nav-theme-v2.is-ranking-page .ranking-detail__delta {
    display: none !important;
  }

  html body.nav-theme-v2.is-ranking-page .ranking-detail__metric strong {
    font-size: 13px !important;
  }

  html body.nav-theme-v2.is-ranking-page .ranking-detail__metric small,
  html body.nav-theme-v2.is-ranking-page .ranking-detail__detail-label,
  html body.nav-theme-v2.is-ranking-page .ranking-detail__direct-label,
  html body.nav-theme-v2.is-ranking-page .ranking-detail__state-label {
    font-size: 10px !important;
  }

html body.nav-theme-v2.is-ranking-page .ranking-detail__aside {
    position: static !important;
  }
}

/* 2026-07-01: tighten detail spacing and keep banner ads inside the live content rail. */
@media (min-width: 761px) {
  html body.nav-theme.nav-theme-v2.is-ranking-page .ranking-page.ranking-page--detail {
    padding-top: clamp(14px, 1.4vw, 24px) !important;
    padding-bottom: 38px !important;
  }

  html body.nav-theme.nav-theme-v2.is-ranking-page .ranking-page.ranking-page--detail > .wn-picture-ad--list {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 16px !important;
    overflow: hidden !important;
  }

  html body.nav-theme.nav-theme-v2.is-ranking-page .ranking-page.ranking-page--detail > .wn-picture-ad--list .wn-picture-ad__link,
  html body.nav-theme.nav-theme-v2.is-ranking-page .ranking-page.ranking-page--detail > .wn-picture-ad--list .wn-picture-ad__img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body.nav-theme.nav-theme-v2.is-ranking-page .ranking-page.ranking-page--detail > .wn-picture-ad--list .wn-picture-ad__img {
    height: auto !important;
    aspect-ratio: 1920 / 246 !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  html body.nav-theme.nav-theme-v2.is-ranking-page > .wn-picture-ad--footer,
  html body.nav-theme.nav-theme-v2.is-ranking-page .site-main + .wn-picture-ad--footer {
    box-sizing: border-box !important;
    width: calc(100vw - var(--sidebar-shell-width, 222px) - 48px) !important;
    max-width: none !important;
    margin: 14px 24px 8px calc(var(--sidebar-shell-width, 222px) + 24px) !important;
    overflow: hidden !important;
  }

  html body.nav-theme.nav-theme-v2.is-ranking-page > .wn-picture-ad--footer .wn-picture-ad__link,
  html body.nav-theme.nav-theme-v2.is-ranking-page > .wn-picture-ad--footer .wn-picture-ad__img,
  html body.nav-theme.nav-theme-v2.is-ranking-page .site-main + .wn-picture-ad--footer .wn-picture-ad__link,
  html body.nav-theme.nav-theme-v2.is-ranking-page .site-main + .wn-picture-ad--footer .wn-picture-ad__img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body.nav-theme.nav-theme-v2.is-ranking-page > .wn-picture-ad--footer .wn-picture-ad__img,
  html body.nav-theme.nav-theme-v2.is-ranking-page .site-main + .wn-picture-ad--footer .wn-picture-ad__img {
    height: auto !important;
    aspect-ratio: 1920 / 206 !important;
    object-fit: contain !important;
    object-position: center !important;
  }
}

html body.nav-theme.nav-theme-v2.is-ranking-page .ranking-detail__pager.pagebar.wf-pagebar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 86px !important;
  margin: 0 !important;
  padding: 22px 24px 28px !important;
  border-top: 1px solid #f1f5f9 !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

html body.nav-theme.nav-theme-v2.is-ranking-page .ranking-detail__pager.pagebar.wf-pagebar .pagination {
  margin: 0 !important;
}

html body.nav-theme.nav-theme-v2.is-ranking-page .ranking-detail__pager.pagebar.wf-pagebar .wf-page-jump {
  margin: 0 !important;
}

@media (max-width: 760px) {
  html body.nav-theme.nav-theme-v2.is-ranking-page .ranking-page.ranking-page--detail {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 0 14px !important;
  }

  html body.nav-theme.nav-theme-v2.is-ranking-page .ranking-detail__breadcrumb {
    margin-bottom: 8px !important;
  }

  html body.nav-theme.nav-theme-v2.is-ranking-page .ranking-page.ranking-page--detail > .wn-picture-ad--list {
    margin: 8px 0 12px !important;
  }

  html body.nav-theme.nav-theme-v2.is-ranking-page .ranking-detail__layout {
    gap: 14px !important;
  }

  html body.nav-theme.nav-theme-v2.is-ranking-page .ranking-detail__pager.pagebar.wf-pagebar {
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px 12px 22px !important;
  }

  html body.nav-theme.nav-theme-v2.is-ranking-page .ranking-detail__pager.pagebar.wf-pagebar .pagination {
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 3px !important;
  }

  html body.nav-theme.nav-theme-v2.is-ranking-page .ranking-detail__pager.pagebar.wf-pagebar .pagination a,
  html body.nav-theme.nav-theme-v2.is-ranking-page .ranking-detail__pager.pagebar.wf-pagebar .pagination span {
    flex: 0 0 auto !important;
  }

  html body.nav-theme.nav-theme-v2.is-ranking-page .ranking-detail__pager.pagebar.wf-pagebar .pagination a:nth-child(n+6):not(:last-child),
  html body.nav-theme.nav-theme-v2.is-ranking-page .ranking-detail__pager.pagebar.wf-pagebar .pagination span:nth-child(n+6):not(:last-child) {
    display: none !important;
  }

  html body.nav-theme.nav-theme-v2.is-ranking-page .ranking-detail__pager.pagebar.wf-pagebar .wf-page-jump {
    align-self: center !important;
  }

  html body.nav-theme.nav-theme-v2.is-ranking-page .ranking-hot__item:nth-child(n+7) {
    display: none !important;
  }
}