@charset "UTF-8";

/* Ranking: explicit, single-owner component styles. Store palette is in theme.css. */

:where(body[data-page="ranking"]) .ui-main #girls_in {
  --_rk-surface: var(--ui-sp-ranking-surface, var(--ui-sp-price-bg-variant-16));
  --_rk-ink: var(--ui-sp-ranking-ink, var(--ui-sp-price-text-variant-12));
  --_rk-muted: var(--ui-sp-ranking-muted, var(--ui-sp-price-text-variant-13));
  --_rk-border: var(--ui-sp-ranking-border, var(--ui-sp-price-border-variant-19));
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 14px 7px 20px;
  background: var(--ui-sp-ranking-page, var(--ui-sp-price-bg-variant-32));
  color: var(--_rk-ink);
}

:where(body[data-page="ranking"]) .ui-main #girls_in * {
  box-sizing: border-box;
}

:where(body[data-page="ranking"]) .ui-main .ranking-intro {
  margin: 0 0 16px;
  padding: 13px 12px;
  border-radius: 4px;
  background: var(--ui-sp-ranking-intro, var(--ui-sp-price-bg-variant-33));
  color: var(--ui-sp-ranking-intro-ink, var(--ui-sp-price-text));
}

:where(body[data-page="ranking"]) .ui-main .ranking-intro-en {
  display: block;
  font: 800 15px/1.3 Arial,Helvetica,sans-serif;
  letter-spacing: 1px;
  color: inherit;
}

:where(body[data-page="ranking"]) .ui-main .ranking-intro p {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: inherit;
}

:where(body[data-page="ranking"]) .ui-main .ranking-group {
  margin: 0 0 22px;
}

:where(body[data-page="ranking"]) .ui-main .ranking-group:last-of-type {
  margin-bottom: 0;
}

:where(body[data-page="ranking"]) .ui-main .rankbar {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  padding: 10px;
  border-radius: 3px;
  background: var(--ui-sp-ranking-title, var(--ui-sp-price-bg-variant-34));
  color: var(--ui-sp-ranking-title-ink, var(--ui-sp-price-text));
}

:where(body[data-page="ranking"]) .ui-main .rankbar-kicker {
  flex: 0 0 auto;
  font: 700 9px/1.4 Arial,Helvetica,sans-serif;
  letter-spacing: .5px;
  color: inherit;
}

:where(body[data-page="ranking"]) .ui-main .rankbar h2 {
  flex: 1;
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

:where(body[data-page="ranking"]) .ui-main .rank-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  align-items: stretch;
  gap: 7px;
}

:where(body[data-page="ranking"]) .ui-main .item {
  position: relative;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0 0 9px;
  border: 1px solid var(--_rk-border);
  border-top: 4px solid var(--_rk-medal);
  border-radius: 4px;
  background: var(--_rk-surface);
  color: var(--_rk-ink);
  overflow: hidden;
  box-shadow: var(--ui-sp-ranking-shadow, none);
}

:where(body[data-page="ranking"]) .ui-main .rank-1 {
  --_rk-medal: var(--ui-sp-ranking-gold, var(--ui-sp-price-bg-variant-2));
}

:where(body[data-page="ranking"]) .ui-main .rank-2 {
  --_rk-medal: var(--ui-sp-ranking-silver, var(--ui-sp-price-bg-variant-4));
}

:where(body[data-page="ranking"]) .ui-main .rank-3 {
  --_rk-medal: var(--ui-sp-ranking-bronze, var(--ui-sp-price-bg-variant-6));
}

:where(body[data-page="ranking"]) .ui-main .rank-number {
  position: absolute;
  z-index: 2;
  top: 42px;
  left: 5px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  width: 31px;
  height: 31px;
  padding: 4px 0;
  border: 1px solid var(--_rk-border);
  border-radius: 50%;
  background: var(--_rk-medal);
  color: var(--ui-sp-ranking-medal-ink, var(--_rk-ink));
}

:where(body[data-page="ranking"]) .ui-main .rank-number strong {
  font: 800 19px/1 Arial,Helvetica,sans-serif;
}

:where(body[data-page="ranking"]) .ui-main .rank-number small {
  font-size: 8px;
  line-height: 1;
  font-weight: 700;
}

:where(body[data-page="ranking"]) .ui-main .new_day {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  height: 36px;
  width: 100%;
  margin: 0;
  padding: 3px;
  overflow: hidden;
  background: var(--ui-sp-ranking-comment-background, var(--ui-sp-price-bg-variant-30));
  color: var(--ui-sp-ranking-comment-ink, var(--_rk-ink));
  font-size: clamp(10px,2.9vw,12px);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

:where(body[data-page="ranking"]) .ui-main .new_day span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: inherit;
}

:where(body[data-page="ranking"]) .ui-main .photo {
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
  overflow: hidden;
  background: var(--_rk-surface);
}

:where(body[data-page="ranking"]) .ui-main .rank-photo-link {
  display: block;
  width: 100%;
  line-height: 0;
}

:where(body[data-page="ranking"]) .ui-main .rank-girl-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  aspect-ratio: 125/182;
  object-fit: cover;
}

:where(body[data-page="ranking"]) .ui-main .name {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px;
  min-height: 36px;
  margin: 0;
  padding: 7px 3px 5px;
  text-align: center;
  font-size: clamp(11px,3.1vw,13px);
  line-height: 1.25;
  font-weight: 700;
  color: var(--_rk-ink);
}

:where(body[data-page="ranking"]) .ui-main .rank-name-main {
  min-width: 0;
  overflow-wrap: anywhere;
  color: inherit;
}

:where(body[data-page="ranking"]) .ui-main .rank-age {
  color: var(--_rk-muted);
  font-size: 10px;
  line-height: 1.25;
}

:where(body[data-page="ranking"]) .ui-main .bline {
  height: 1px;
  width: calc(100% - 10px);
  margin: 0 5px;
  background: var(--_rk-border);
}

:where(body[data-page="ranking"]) .ui-main .size {
  margin: 0;
  padding: 5px 3px 0;
  color: var(--_rk-ink);
  font-size: clamp(9px,2.7vw,11px);
  line-height: 1.5;
  font-weight: 600;
  text-align: center;
  overflow-wrap: anywhere;
}

:where(body[data-page="ranking"]) .ui-main .ranking-empty {
  padding: 22px 12px;
  margin: 0;
  color: var(--_rk-ink);
  background: var(--_rk-surface);
  border: 1px solid var(--_rk-border);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

:where(body[data-page="ranking"]) .ui-main .rank-photo-link:focus-visible {
  outline: 3px solid var(--ui-sp-ranking-title, var(--_rk-border));
  outline-offset: -3px;
}