/*
  作業単位14：業者詳細 上部UI v2（参考サイト寄せ）
  - 機能フラグ kyu_ff_vendor_header_v2 がONの時のみ読み込み
  - 既存(v1)のCSSは一切崩さないため、.kyu-vendor-profile--v2 にスコープ
*/

.kyu-vendor-profile--v2 .kyu-vendor-profile__top--v2 {
  /* 既存の .kyu-vendor-profile__top を活かしつつ、細部だけ上書き */
}

.kyu-vendor-profile--v2 .kyu-vendor-profile-v2__rankline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  justify-content: center;
  width: 100%;
}

.kyu-vendor-profile--v2 .kyu-vendor-profile-v2__crown {
  font-size: 1.1em;
}

.kyu-vendor-profile--v2 .kyu-vendor-profile-v2__rank-current {
  font-size: 1.6em;
  font-weight: 800;
}

.kyu-vendor-profile--v2 .kyu-vendor-profile-v2__rank-prev {
  font-size: 0.9em;
  color: #666;
}

.kyu-vendor-profile--v2 .kyu-vendor-profile-v2__highlights-line {
  width: 100%;
  font-size: 0.95em;
  color: #333;
}

/*
  タイトル（ロゴ + サービス名）
  - ロゴが入った時にサービス名が埋もれやすいので、v2では見出しの視認性を強める。
  - 既存(v1)の見え方は一切触らないため、v2スコープでのみ上書き。
*/
.kyu-vendor-profile--v2 .kyu-vendor-profile__titleline {
  align-items: center;
}

.kyu-vendor-profile--v2 .kyu-vendor-profile__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(1.35rem, 3.2vw, 1.8rem);
  font-weight: 800;
  line-height: 1.25;
}

/* Stars */
.kyu-vendor-profile--v2 .kyu-vendor-profile-v2__stars {
  margin: 6px 0 10px;
}

.kyu-vendor-profile--v2 .kyu-stars {
  position: relative;
  display: inline-block;
  line-height: 1;
  letter-spacing: 2px;
  font-size: 1.05em;
}

.kyu-vendor-profile--v2 .kyu-stars__base {
  color: #ddd;
}

.kyu-vendor-profile--v2 .kyu-stars__fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #f5b400;
}

/* Metrics = 縦積み（参考サイト寄せ） */
.kyu-vendor-profile--v2 .kyu-vendor-profile-v2__metrics {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.kyu-vendor-profile--v2 .kyu-vendor-profile-v2__metric {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: 0.95em;
}

.kyu-vendor-profile--v2 .kyu-vendor-profile-v2__metric strong {
  font-weight: 800;
}

.kyu-vendor-profile--v2 .kyu-vendor-profile-v2__osusume {
  text-decoration: none;
  font-weight: 700;
}

/* Mobile: 左カラムは既存CSSで左寄せになるが、v2はranklineだけ左寄せに */
@media (max-width: 900px) {
  .kyu-vendor-profile--v2 .kyu-vendor-profile-v2__rankline {
    justify-content: flex-start;
  }
}