/* Codex修正：外側を囲まず、ストーリーズのような円形画像を横へ並べる。 */
.cdx-simulator .sim-popularity {
  /* Codex修正：リングのベースに使う赤を定義する。 */
  --sim-popularity-accent: #ff0033;
  /* Codex追加：読込中と読込後で同じ寸法を共有し、サークル出現時の縦ずれを防ぐ。 */
  --sim-popularity-avatar-size: 80px;
  /* Codex追加：透明余白を除いた端末の長辺をリング内で大きく見せる。 */
  --sim-popularity-device-size: 90%;
  --sim-popularity-copy-height: 55px;
  --sim-popularity-item-gap: 8px;
  --sim-popularity-padding-top: 4px;
  --sim-popularity-padding-bottom: 0px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.cdx-simulator .sim-popularity[hidden] { display: none; }
/* Codex修正：見出し・タブとストーリーズの間に余白を取り、狭幅だけ折り返す。 */
.cdx-simulator .sim-popularity-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 24px; }
.cdx-simulator .sim-popularity-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
:is(#entry, body) .cdx-simulator .sim-popularity-title {
  margin: 0;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: .06em;
}
.cdx-simulator .sim-popularity-header .sim-help-button { width: 24px; height: 24px; min-width: 24px; }
.cdx-simulator .sim-popularity-tabs { display: flex; gap: 16px; margin: 0; overflow-x: auto; scrollbar-width: none; }
.cdx-simulator .sim-popularity-tabs::-webkit-scrollbar { display: none; }
.cdx-simulator .sim-popularity-tabs button {
  position: relative;
  flex: 0 0 auto;
  padding: 4px 0 6px;
  border: 0;
  border-radius: 0;
  color: var(--sim-muted);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
}
.cdx-simulator .sim-popularity-tabs button[aria-selected="true"] { color: var(--sim-ink); }
.cdx-simulator .sim-popularity-tabs button[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  border-radius: 2px;
  background: var(--sim-selection, var(--sim-accent));
}
/* Codex追加：両タブを同じ位置に保持し、切替時の画像・リングの再描画と寸法差をなくす。 */
.cdx-simulator [data-popularity-panel] {
  display: grid;
  min-height: calc(var(--sim-popularity-avatar-size) + var(--sim-popularity-item-gap) + var(--sim-popularity-copy-height) + var(--sim-popularity-padding-top) + var(--sim-popularity-padding-bottom));
}
/* Codex追加：待機中も本文の位置を保ち、架空の順位やカラーは表示しない。 */
.cdx-simulator .sim-popularity-loading { grid-area: 1 / 1; align-self: center; color: var(--sim-muted); font-size: 12px; text-align: center; }
.cdx-simulator .sim-popularity-list[inert] { visibility: hidden; pointer-events: none; }
/* Codex修正：位置や大きさを変えず、検証で確定した0.8秒の淡いフェードで一覧を表示する。 */
.cdx-simulator .sim-popularity-list:not([inert]) { animation: sim-popularity-tab-reveal 800ms ease-out; }
@keyframes sim-popularity-tab-reveal {
  from { opacity: .45; }
  to { opacity: 1; }
}
.cdx-simulator .sim-popularity-list {
  grid-area: 1 / 1;
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 112px;
  gap: 12px;
  padding: var(--sim-popularity-padding-top) 2px var(--sim-popularity-padding-bottom);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  /* Codex追加：先頭カードのスナップ位置を内側余白に合わせ、表示直後の横ずれを防ぐ。 */
  scroll-padding-inline: 2px;
  scrollbar-width: none;
}
.cdx-simulator .sim-popularity-list::-webkit-scrollbar { display: none; }
.cdx-simulator .sim-popularity-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sim-popularity-item-gap);
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  color: var(--sim-ink);
  background: transparent;
  text-align: center;
  scroll-snap-align: start;
}
/* Codex追加：上位3件は順位のメダル色を共有し、バッジからリングへ同じ色が広がるようにする。 */
.cdx-simulator .sim-popularity-item[data-popularity-index="0"] { --sim-popularity-medal: #c29937; --sim-popularity-medal-light: #e8d29b; --sim-popularity-medal-ink: #322303; }
.cdx-simulator .sim-popularity-item[data-popularity-index="1"] { --sim-popularity-medal: #96a3b4; --sim-popularity-medal-light: #ced6df; --sim-popularity-medal-ink: #263341; }
.cdx-simulator .sim-popularity-item[data-popularity-index="2"] { --sim-popularity-medal: #b67b52; --sim-popularity-medal-light: #dcb295; --sim-popularity-medal-ink: #30190b; }
.cdx-simulator .sim-popularity-item:is([data-popularity-index="0"], [data-popularity-index="1"], [data-popularity-index="2"]) {
  --sim-popularity-ring: conic-gradient(from 135deg, var(--sim-popularity-medal) 0deg, var(--sim-popularity-medal-light) 180deg, var(--sim-popularity-medal) 360deg);
}
/* Codex修正：上位3件は右下のバッジを起点に淡くし、4位以降は既存の赤いグラデーションを使う。 */
.cdx-simulator .sim-popularity-avatar { position: relative; flex: 0 0 auto; display: block; width: var(--sim-popularity-avatar-size); height: var(--sim-popularity-avatar-size); padding: 2px; border-radius: 50%; background: var(--sim-popularity-ring, conic-gradient(from 185deg, var(--sim-popularity-accent) 0deg 210deg, #b80025 310deg, var(--sim-popularity-accent) 360deg)); }
/* Codex追加：メダル色は固定したまま、上位3件の細いリングにだけ弱い反射光を一周させる。 */
.cdx-simulator .sim-popularity-item:is([data-popularity-index="0"], [data-popularity-index="1"], [data-popularity-index="2"]):not(:disabled) .sim-popularity-avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, transparent 0deg 276deg, rgb(255 255 255 / .12) 294deg, rgb(255 255 255 / .7) 312deg, rgb(255 255 255 / .18) 330deg, transparent 348deg 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: sim-popularity-ring-shimmer 6s linear infinite;
  animation-delay: var(--sim-popularity-shimmer-delay, 0s);
}
/* Codex追加：光の位置を順位ごとにずらし、3本が一斉に光る印象を抑える。 */
.cdx-simulator .sim-popularity-item[data-popularity-index="1"] { --sim-popularity-shimmer-delay: -2s; }
.cdx-simulator .sim-popularity-item[data-popularity-index="2"] { --sim-popularity-shimmer-delay: -4s; }
@keyframes sim-popularity-ring-shimmer {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* Codex修正：透明余白を補正した画像を共通サイズで置き、添付イメージに合わせて少し下へ寄せる。 */
.cdx-simulator .sim-popularity-image { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; border: 2px solid var(--sim-paper); border-radius: 50%; background: var(--sim-paper); color: var(--sim-muted); font-size: 10px; line-height: 1.3; overflow: hidden; }
.cdx-simulator .sim-popularity-image img { position: absolute; display: block; left: 50%; top: 56%; width: calc(var(--sim-popularity-device-size) * var(--sim-image-width, 1)); height: calc(var(--sim-popularity-device-size) * var(--sim-image-height, 1)); max-width: none; margin: 0; object-fit: contain; transform: translate(calc(-1 * var(--sim-image-x, 50%)), calc(-1 * var(--sim-image-y, 50%))); }
/* Codex修正：右下のバッジを内側へ寄せ、リングとの重なりを左右・上下で揃える。 */
.cdx-simulator .sim-popularity-rank {
  position: absolute;
  right: 1px;
  bottom: 1px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--sim-paper);
  border-radius: 50%;
  background: var(--sim-popularity-medal, var(--sim-ink));
  color: var(--sim-popularity-medal-ink, #fff);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Codex修正：通常表示に必要な3行分を確保し、読込・切替時の高さを揃えながら下の空きを詰める。 */
.cdx-simulator .sim-popularity-copy { display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; min-height: var(--sim-popularity-copy-height); gap: 3px; }
/* Codex修正：機種名は両タブで同じ1行の高さに揃え、文字の微細な上下動も防ぐ。 */
.cdx-simulator .sim-popularity-copy strong { width: 100%; font-size: 12px; line-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdx-simulator .sim-popularity-copy small { color: var(--sim-muted); font-size: 11px; line-height: 1.45; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Codex修正：組み合わせは機種・容量とキャリア・プランを各1行に揃え、Pro Maxも省略せず収める。 */
.cdx-simulator .sim-popularity-item--combination .sim-popularity-copy > * { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdx-simulator .sim-popularity-copy .sim-popularity-model--compact { font-size: 10.5px; letter-spacing: -.02em; }
.cdx-simulator .sim-popularity-item:disabled .sim-popularity-avatar { background: var(--sim-line); opacity: .55; }
.cdx-simulator .sim-popularity-empty { margin: 0; padding: 22px 0 8px; color: var(--sim-muted); font-size: 13px; line-height: 1.7; }
.cdx-simulator .sim-popularity-item:focus-visible { outline: 3px solid var(--sim-focus); outline-offset: -3px; }

/* Codex修正：ランキングのホバー演出は設けず、キーボード操作のフォーカス表示だけを維持する。 */
@media (max-width: 599px) {
  .cdx-simulator .sim-popularity { margin-bottom: 0; padding-inline: 0; }
  .cdx-simulator .sim-popularity-list { grid-auto-columns: 104px; gap: 10px; }
}
/* Codex追加：PC幅では本文全体へ均等に並べ、画像と文字を広い画面に合う大きさへ広げる。 */
@container simulator (min-width: 960px) {
  .cdx-simulator .sim-popularity {
    margin-bottom: 0;
    --sim-popularity-avatar-size: 104px;
    --sim-popularity-copy-height: 66px;
    --sim-popularity-item-gap: 12px;
    --sim-popularity-padding-top: 6px;
    --sim-popularity-padding-bottom: 0px;
  }
  .cdx-simulator .sim-popularity-toolbar { justify-content: flex-start; gap: 32px; }
  .cdx-simulator .sim-popularity-tabs { gap: 24px; }
  .cdx-simulator .sim-popularity-tabs button { padding: 6px 0 8px; font-size: 14px; }
  .cdx-simulator .sim-popularity-list { grid-auto-columns: minmax(128px, 1fr); gap: 20px; }
  .cdx-simulator .sim-popularity-rank { width: 26px; height: 26px; font-size: 12px; }
  .cdx-simulator .sim-popularity-copy { gap: 4px; }
  .cdx-simulator .sim-popularity-copy strong { font-size: 14px; line-height: 20px; }
  .cdx-simulator .sim-popularity-copy .sim-popularity-model--compact { font-size: 13px; }
  .cdx-simulator .sim-popularity-copy small { font-size: 13px; line-height: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .cdx-simulator .sim-popularity-list { scroll-behavior: auto; }
  .cdx-simulator .sim-popularity-list:not([inert]) { animation: none; }
  /* Codex追加：動きを抑える設定では光の巡回を止め、メダル色のリングだけを表示する。 */
  .cdx-simulator .sim-popularity-item:is([data-popularity-index="0"], [data-popularity-index="1"], [data-popularity-index="2"]):not(:disabled) .sim-popularity-avatar::before { animation: none; content: none; }
}

/* Codex修正：管理者項目の高さは予約せず、JSで追加された行の分だけ自然に広げる。 */
.cdx-simulator .sim-popularity-copy .sim-popularity-relative-score { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Codex修正：ランキングと次の端末表示で上下の余白を重ねず、表示中だけ製品枠の上余白を外す。 */
.cdx-simulator:is([data-design="c"], [data-design="d"]):has(.sim-popularity:not([hidden])) .sim-c-overview > .sim-c-product { padding-top: 0; }