/* core/modules/display/rank-panel/style.css */
/* rank-panel/style.css — 라이브 CSS 원문 재구성(2026-09-08 fable2) · 재료 = _sandbox/모듈최종형식-20260907/_live-all.css(주석 제거본 = tcggrail·modoocard assets/css 7파일)
   규칙 = 계열 27종에 걸린 라이브 규칙 1448개(@media 안 292개) · 같은 선택자 여러 벌은 «전부 순서대로» · @media 껍데기 보존 · 페이지 문맥 조상(landing-page 계열 여섯 이름)만 떼고 규칙은 살림 · 값 창작 0
   계열 = module-rank-panel__denominator-labelled-row module-overall-score ranked-thumbnail-list-gap-row module-review-panel ranked-thumbnail-list-rank-panel-bar module-rank-panel__ranked-thumbnail-list denominator-labelled-bar-list module-rank-panel__dial-explanation module-rank-panel__standing module-rank-panel__dial rank-dial-ring module-rank-panel__gap-bar rank-dial-denominator rank-dial-label-box rank-dial-value rank-panel ranked-thumbnail-list-standout-compare holo-thumb-popup-thumb u-dv-tier-1 u-dv-tier-2 u-dv-tier-3 u-dv-tier-4 u-dv-tier-5 module-rate-bar dv-tier- u-tabular-number u-screen-reader-only-text */
.module-rank-panel__dial { display:grid; grid-template-columns:minmax(0,1fr); column-gap:12px; row-gap:8px; align-items:center; padding:12px; background:var(--surf); border:1px solid var(--line2); border-radius:var(--r-s); margin-top:12px; position:relative; cursor: auto; }

.module-rank-panel__dial-explanation { margin:0; grid-column:1/-1; font-size:13.5px; line-height:1.55; color:var(--ink2); flex:1 1 260px; min-width:0; }

.module-rank-panel__denominator-labelled-row--low { border-color: var(--buy); background: color-mix(in srgb,var(--buy) 7%,var(--surf)); border-width: 1px 1px 1px 4px; padding: 8px 10px; box-shadow: 0 1px 8px color-mix(in srgb,var(--buy) 14%,transparent); border: 1px solid var(--line2); border-left: 4px solid var(--buy); }
.module-rank-panel__denominator-labelled-row-meta { display:flex; align-items:center; gap:9px; min-width:0; flex-direction:row; }
.module-rank-panel__denominator-labelled-row-market-name { display:flex; flex-direction:column; gap:1px; min-width:0; font-size:14px; font-weight:800; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.module-rank-panel__denominator-labelled-row-title b { color:var(--ink); font-size:15px; font-weight:800; letter-spacing:-.02em; }
@media (max-width:1080px) {
}
@media (max-width:720px) {
}
.module-rank-panel__denominator-labelled-row-legend, .module-rank-panel__marketplace-offer-card-logo { width: 72px; height: 46px; border-radius: 8px; background: #fff; padding: 5px 8px; display: grid; place-items: center; overflow: visible; box-shadow: 0 1px 3px rgba(0,0,0,.16),inset 0 0 0 1px rgba(0,0,0,.07); aspect-ratio: auto; flex: 0 0 auto; min-width: 0; max-width: none; }
.module-rank-panel__denominator-labelled-row--low .module-rank-panel__denominator-labelled-row-legend, .module-rank-panel__marketplace-offer-card--best .module-rank-panel__marketplace-offer-card-logo { background: inherit; color: inherit; }
@media (max-width:1080px) {
}
@media (max-width:720px) {
.module-rank-panel__denominator-labelled-row-title { grid-column:2; align-items:flex-end; text-align:right; flex-direction:row; gap:6px; }
.module-rank-panel__denominator-labelled-row-legend, .module-rank-panel__marketplace-offer-card-logo { width: 62px; height: 40px; border-radius: 7px; max-width: 80px; padding: 4px 6px; }
}
@media (max-width:400px) {
.module-rank-panel__denominator-labelled-row-picture, .module-rank-panel__denominator-labelled-row-title {
    grid-column: 1;
    align-items: flex-start;
    text-align: left; display: block; font-size: 13px; font-weight: 700; color: var(--mut); margin-top: 1px;
  }
.module-rank-panel__denominator-labelled-row-title { flex-direction:row; gap:7px; grid-column:1; align-items:flex-start; text-align:left; }
}

.module-rank-panel__ranked-thumbnail-list-gap-row-value-text { display:flex; flex-direction:column; gap:1px; min-width:0; font-size:13px; font-weight:700; color:var(--mut); text-align:right; overflow-wrap:break-word; }
.module-rank-panel__ranked-thumbnail-list-gap-row-bar i { display:block; height:100%; width:var(--w); background:var(--c1); opacity:.75; border-radius:99px; transform-origin:left center; animation:none; animation-play-state:paused; }

@media (max-width:820px) {
}
@media (max-width:720px) {
}
@media (max-width:640px) {
}
@media (max-width:1100px) {
}
@media (max-width:720px) {
}
@media (max-width:720px) {
}

@media (min-width: 1081px) {
}
@media (min-width: 721px) and (max-width: 1080px) {
}
@media (prefers-reduced-motion:no-preference) {
}
@media (prefers-reduced-motion:no-preference) and (scripting:none) {
}


.module-rank-panel__ranked-thumbnail-list-standout-compare .module-rank-panel__review { margin:0; --rv-accent:#e43917; --rv-track:#ddd; }

.module-rank-panel__overall-score-delta { display:inline-block; margin-bottom:6px; font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; padding:3px 9px; border-radius:6px; }
.module-rank-panel__denominator-labelled-row { display: grid; grid-template-columns: minmax(0,1.5fr) 108px 104px 72px minmax(0,1.4fr) 104px; gap: 11px; align-items: center; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surf2); border-color:var(--line2); position:relative; }
.module-rank-panel__overall-score-seg-pin { animation:rv-anim-pos 1.5s linear .2s both; animation-play-state:paused; position:absolute; top:0; bottom:0; width:2px; transform:translateX(-50%); background:var(--color-text-primary,#1e293b); border-radius:1px; z-index:2; box-shadow:0 0 0 1px rgba(255,255,255,.6); }
.module-rank-panel__overall-score-seg-caption { font-size:12.5px; animation:rv-anim-cap-l 1.5s linear .2s both; animation-play-state:paused; max-width:100%; display:block; width:max-content; white-space:nowrap; margin-top:8px; padding:3px 10px; border-left:3px solid var(--color-text-primary,#1e293b); border-radius:2px 10px 10px 2px; background:color-mix(in srgb, var(--color-text-primary,#1e293b) 7%, #fff); font-weight:600; color:var(--color-text-body); word-break:keep-all; line-height:1.35; transform:translateX(-2px); }
.module-rank-panel__overall-score-seg-caption--r { animation:rv-anim-cap-r 1.5s linear .2s both; animation-play-state:paused; border-left:0; border-right:3px solid var(--color-text-primary,#1e293b); border-radius:10px 2px 2px 10px; transform:translateX(2px); }
.module-rank-panel__review>.module-rank-panel__overall-score--segment { margin:14px 0 0; padding:0; border:0; }








.module-rank-panel__overall-score--circle .module-rank-panel__overall-score-tile { animation:module-donut-fill 1.5s ease-out .2s both; width:100px; height:100px; min-width:0; max-width:none; padding:0; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:none; background:conic-gradient(var(--color-primary,#1d4ed8) calc(var(--dv-pct,100) * 1%), var(--rv-track,#ddd) 0); animation-play-state:paused; }
.module-rank-panel__print-variant-offer-row a:not(.module-rank-panel__denominator-labelled-row-hitarea) { color:#fff; font-weight:800; text-decoration:none; font-size:12.5px; border:0; padding:7px 14px; border-radius:999px; white-space:nowrap; background:var(--buy); pointer-events:auto; }


@media (max-width:1100px) {
}
@media (max-width:1080px) {
}
@media (max-width:820px) {
}
@media (max-width:720px) {
.module-rank-panel__denominator-labelled-row { grid-template-columns: 1fr auto; gap: 7px 10px; padding:11px; }
}
@media (max-width:640px) {
}
@media (max-width:520px) {
}
@media (max-width:400px) {
}
@media (prefers-reduced-motion:no-preference) {
}
@media (prefers-reduced-motion:reduce) {
}
@media (scripting:none) {
}

@media (max-width:640px) {
}

.module-rank-panel__dial { cursor: auto; display: grid; grid-template-columns: auto minmax(0,1fr); column-gap: 12px; row-gap: 8px; align-items: center; padding: 12px; background: var(--surf); border: 1px solid var(--line2); border-radius: var(--r-s); }

@media (max-width: 760px) {
}
@media (max-width:600px) {
}
@media (max-width:640px) {
}
@media (scripting: none) {
}
@media (scripting: none) and (prefers-reduced-motion: reduce) {
}
.module-rank-panel__review {
  margin:24px 0 32px; padding:26px 28px; border-radius:var(--color-radius-lg); background:#fff; box-shadow:0 2px 20px rgba(0,0,0,.08); --rv-accent:#e43917; --rv-track:#ddd;
}
@media (prefers-reduced-motion: reduce) {
}
.module-rank-panel__review > .module-rank-panel__overall-score--segment { margin:14px 0 18px; padding:0; border:0; }
@media (prefers-reduced-motion: reduce) {
}
@media (max-width:640px) {
}
@media (prefers-color-scheme: dark) {
}
.u-tabular-number {
  font-variant-numeric: tabular-nums;
}
.module-rank-panel__dial {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  column-gap: 12px;
  row-gap: 8px;
  align-items: center;
  padding: 12px;
  background: var(--surf);
  border: 1px solid var(--line2);
  border-radius: var(--r-s);
}

.module-rank-panel__dial-explanation {
  margin: 0;
  grid-column: 1/-1;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink2);
}
.module-rank-panel__dial-explanation b {
  color: var(--ink);
}
.module-rank-panel__denominator-labelled-row-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.module-rank-panel__denominator-labelled-row-reading-hint {
  font-size: 13px;
  color: var(--mut);
  font-weight: 600;
}
.module-rank-panel__denominator-labelled-row-label {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.module-rank-panel__denominator-labelled-row {
  display: grid;
  grid-template-columns: minmax(0,1.5fr) 108px 104px 72px minmax(0,1.4fr) 104px;
  gap: 11px;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--surf2);
}
.module-rank-panel__denominator-labelled-row--low {

  border-color: var(--buy);
  background: color-mix(in srgb,var(--buy) 9%,var(--surf2));
}
.module-rank-panel__denominator-labelled-row-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.module-rank-panel__denominator-labelled-row-legend {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: var(--acc-s);
  color: var(--acc-i);
  font-size: 13px;
  font-weight: 800;
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
}
.module-rank-panel__denominator-labelled-row-market-name {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}
.module-rank-panel__denominator-labelled-row-market-name em {
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  color: var(--mut);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.module-rank-panel__denominator-labelled-row-picture, .module-rank-panel__denominator-labelled-row-title {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.module-rank-panel__denominator-labelled-row-picture b, .module-rank-panel__denominator-labelled-row-title b {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.module-rank-panel__denominator-labelled-row-title b {
  color: var(--ink);
}
.module-rank-panel__denominator-labelled-row-picture em, .module-rank-panel__denominator-labelled-row-title em {
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  color: var(--mut);
}
.module-rank-panel__denominator-labelled-row-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;

  background: var(--buy);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.module-rank-panel__denominator-labelled-row-diff {
  font-size: 13px;
  font-weight: 700;
  color: var(--mut);
}
.module-rank-panel__denominator-labelled-row-name {
  font-size: 13px;
  color: var(--mut);
  font-weight: 600;
  line-height: 1.45;
}
.module-rank-panel__denominator-labelled-row-button {
  display: grid;
  place-items: center;
  padding: 9px 10px;
  border-radius: 8px;
  background: var(--surf);
  border: 1px solid var(--line2);
  color: var(--ink2);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background .13s,border-color .13s,color .13s;
}
.module-rank-panel__denominator-labelled-row--low .module-rank-panel__denominator-labelled-row-button {

  background: var(--buy);
  border-color: var(--buy);
  color: #fff;
}
.module-rank-panel__denominator-labelled-row-button:hover, .module-rank-panel__denominator-labelled-row-button:focus-visible {
  border-color: var(--acc);
  background: var(--acc);
  color: #fff;
}
.module-rank-panel__denominator-labelled-row-footnote {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--mut);
  line-height: 1.6;
}
@media (max-width:1080px) {
.module-rank-panel__denominator-labelled-row {
    grid-template-columns: minmax(0,1.4fr) 104px 100px 68px 104px;
  }
.module-rank-panel__denominator-labelled-row-name {
    display: none;
  }
}
@media (max-width:720px) {
.module-rank-panel__denominator-labelled-row {
    grid-template-columns: 1fr auto;
    gap: 7px 10px;
  }
.module-rank-panel__denominator-labelled-row-picture, .module-rank-panel__denominator-labelled-row-title {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
  }
.module-rank-panel__denominator-labelled-row-description {
    justify-self: end;
  }
.module-rank-panel__denominator-labelled-row-button {
    grid-column: 1/-1;
  }
}
.module-rank-panel__denominator-labelled-row {
  background: var(--surf);
  border-color: var(--line2);
}
.module-rank-panel__denominator-labelled-row--low {
  border-color: var(--buy);
  border-width: 2px;
  padding: 8px 10px;
  background: color-mix(in srgb,var(--buy) 14%,var(--surf));
  box-shadow: 0 2px 12px color-mix(in srgb,var(--buy) 22%,transparent);
}
.module-rank-panel__denominator-labelled-row--low .module-rank-panel__denominator-labelled-row-title b {
  color: var(--buy);
}
.module-rank-panel__denominator-labelled-row-badge {
  box-shadow: 0 2px 8px color-mix(in srgb,var(--buy) 40%,transparent);
}
.module-rank-panel__denominator-labelled-row-button {
  background: var(--surf2);
  color: var(--ink);
  border-color: var(--line2);
}
.module-rank-panel__denominator-labelled-row--low .module-rank-panel__denominator-labelled-row-button {

  box-shadow: 0 2px 10px color-mix(in srgb,var(--buy) 38%,transparent);
}
.module-rank-panel__denominator-labelled-row-group {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 2px 0 7px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink2);
  letter-spacing: -.01em;
}
.module-rank-panel__denominator-labelled-row-group span {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surf);
  border: 1px solid var(--line2);
  font-size: 13px;
  font-weight: 700;
  color: var(--mut);
}
.module-rank-panel__denominator-labelled-row-group--reference {
  margin-top: 12px;
  padding-top: 11px;
  color: var(--mut);
}
.module-rank-panel__denominator-labelled-row--low {
  border-color: var(--buy);
  border-width: 2px;
  background: color-mix(in srgb,var(--buy) 12%,var(--surf));
  box-shadow: 0 2px 12px color-mix(in srgb,var(--buy) 26%,transparent);
}
.module-rank-panel__denominator-labelled-row--low .module-rank-panel__denominator-labelled-row-title b {
  color: var(--ink);
}
.module-rank-panel__denominator-labelled-row-badge {
  background: var(--buy);
  color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb,var(--buy) 45%,transparent);
}
.module-rank-panel__denominator-labelled-row--low .module-rank-panel__denominator-labelled-row-button {
  background: var(--buy);
  border-color: var(--buy);
  color: #fff;
  box-shadow: 0 2px 10px color-mix(in srgb,var(--buy) 40%,transparent);
}
.module-rank-panel__denominator-labelled-row--low .module-rank-panel__denominator-labelled-row-button:hover, .module-rank-panel__denominator-labelled-row--low .module-rank-panel__denominator-labelled-row-button:focus-visible {
  background: var(--acc);
  border-color: var(--acc);
}
.module-rank-panel__denominator-labelled-row--low {
  border: 1px solid var(--line2);
  border-left: 4px solid var(--buy);
  border-width: 1px 1px 1px 4px;
  background: color-mix(in srgb,var(--buy) 7%,var(--surf));
  box-shadow: 0 1px 8px color-mix(in srgb,var(--buy) 14%,transparent);
}
.module-rank-panel__denominator-labelled-row--low .module-rank-panel__denominator-labelled-row-title b {
  color: var(--buy);
  font-size: 17px;
}
.module-rank-panel__denominator-labelled-row--low .module-rank-panel__denominator-labelled-row-legend {
  background: var(--buy);
  color: #fff;
}
.module-rank-panel__denominator-labelled-row-legend, .module-rank-panel__marketplace-offer-card-logo {
  width: 52px;
  height: 30px;
  border-radius: 6px;
  background: #fff;
  padding: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.22),inset 0 0 0 1px rgba(0,0,0,.06);
}
.module-rank-panel__denominator-labelled-row--low .module-rank-panel__denominator-labelled-row-legend, .module-rank-panel__marketplace-offer-card--best .module-rank-panel__marketplace-offer-card-logo {
  background: #fff;
  color: inherit;
}
.module-rank-panel__denominator-labelled-row {
  grid-template-columns: minmax(0,1.6fr) 108px 104px 72px minmax(0,1.3fr) 104px;
}
@media (max-width:1080px) {
.module-rank-panel__denominator-labelled-row {
    grid-template-columns: minmax(0,1.5fr) 104px 100px 68px 104px;
  }
}
@media (max-width:720px) {
.module-rank-panel__denominator-labelled-row {
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px 10px;
    padding: 11px;
  }
.module-rank-panel__denominator-labelled-row-meta {
    grid-column: 1/-1;
  }
.module-rank-panel__denominator-labelled-row-picture {
    grid-column: 1;
    flex-direction: row;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
  }
.module-rank-panel__denominator-labelled-row-title {
    grid-column: 2;
    align-items: flex-end;
    text-align: right;
  }
.module-rank-panel__denominator-labelled-row-title b {
    font-size: 16px;
  }
.module-rank-panel__denominator-labelled-row-description {
    grid-column: 1/-1;
    justify-self: start;
  }
.module-rank-panel__denominator-labelled-row-name {
    display: none;
  }
.module-rank-panel__denominator-labelled-row-button {
    grid-column: 1/-1;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 10px;
    font-size: 14px;
  }
.module-rank-panel__denominator-labelled-row-legend, .module-rank-panel__marketplace-offer-card-logo {
    width: 46px;
    height: 28px;
  }
.module-rank-panel__denominator-labelled-row-heading {
    gap: 4px;
  }
}
@media (max-width:400px) {
.module-rank-panel__denominator-labelled-row {
    grid-template-columns: 1fr;
  }
.module-rank-panel__denominator-labelled-row-picture, .module-rank-panel__denominator-labelled-row-title {
    grid-column: 1;
    align-items: flex-start;
    text-align: left;
  }
.module-rank-panel__denominator-labelled-row-title {
    flex-direction: row;
    gap: 7px;
  }
}

.module-rank-panel__ranked-thumbnail-list-gap-row {
  display: grid;
  grid-template-columns: minmax(0,1.5fr) minmax(90px,1.6fr) 92px minmax(0,1fr);
  gap: 11px;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid var(--line2);
  border-radius: var(--r-s);
  background: var(--surf);
}
.module-rank-panel__ranked-thumbnail-list-gap-row-value-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.module-rank-panel__ranked-thumbnail-list-gap-row-value-text b {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}
.module-rank-panel__ranked-thumbnail-list-gap-row-value-text em {
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  color: var(--mut);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.module-rank-panel__ranked-thumbnail-list-gap-row-bar {
  height: 9px;
  border-radius: 99px;
  background: var(--surf2);
  overflow: hidden;
}
.module-rank-panel__ranked-thumbnail-list-gap-row-bar i {
  display: block;
  height: 100%;
  width: var(--w);
  background: var(--c1);
  opacity: .75;
  border-radius: 99px;
}
.module-rank-panel__ranked-thumbnail-list-gap-row-bar--none {
  background: repeating-linear-gradient(115deg,var(--surf2) 0 5px,transparent 5px 10px);
  border: 1px dashed var(--line2);
  box-sizing: border-box;
}
.module-rank-panel__ranked-thumbnail-list-gap-row-picture {
  font-size: 15px;
  font-weight: 800;
  text-align: right;
  letter-spacing: -.02em;
  color: var(--ink);
}
.module-rank-panel__ranked-thumbnail-list-gap-row-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--mut);
}
.module-rank-panel__ranked-thumbnail-list-gap-row--current {
  border-color: var(--c1);
  background: color-mix(in srgb,var(--c1) 8%,var(--surf));
}
.module-rank-panel__ranked-thumbnail-list-gap-row--separator {
  border-top-width: 3px;
  border-top-color: var(--c5);
}
.module-rank-panel__ranked-thumbnail-list-gap-row--not-available {
  opacity: .62;
}

@media (max-width:820px) {
.module-rank-panel__ranked-thumbnail-list-gap-row {
    grid-template-columns: minmax(0,1fr) 78px;
    gap: 8px 10px;
    row-gap: 6px;
  }
.module-rank-panel__ranked-thumbnail-list-gap-row-bar {
    grid-column: 1/-1;
    order: 3;
  }
.module-rank-panel__ranked-thumbnail-list-gap-row-name {
    grid-column: 1/-1;
    order: 4;
  }
}
.module-rank-panel__denominator-labelled-row-legend, .module-rank-panel__marketplace-offer-card-logo {
  width: 36px;
  height: 36px;
  aspect-ratio: 1;
  border-radius: 9px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
}
.module-rank-panel__denominator-labelled-row-legend:has(.module-rank-panel__marketplace-logo--ebay), .module-rank-panel__marketplace-offer-card-logo:has(.module-rank-panel__marketplace-logo--ebay) {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.22),inset 0 0 0 1px rgba(0,0,0,.07);
}
.module-rank-panel__denominator-labelled-row-legend:has(.module-rank-panel__marketplace-logo--tcgplayer), .module-rank-panel__marketplace-offer-card-logo:has(.module-rank-panel__marketplace-logo--tcgplayer) {
  background: #122B44;
}
.module-rank-panel__denominator-labelled-row-legend:has(.module-rank-panel__marketplace-logo--cardmarket), .module-rank-panel__marketplace-offer-card-logo:has(.module-rank-panel__marketplace-logo--cardmarket) {
  background: #1F3B5B;
}
.module-rank-panel__denominator-labelled-row--low .module-rank-panel__denominator-labelled-row-legend:has(.module-rank-panel__marketplace-logo--ebay), .module-rank-panel__marketplace-offer-card--best .module-rank-panel__marketplace-offer-card-logo:has(.module-rank-panel__marketplace-logo--ebay) {
  background: #fff;
}
@media (max-width:720px) {
.module-rank-panel__denominator-labelled-row-legend, .module-rank-panel__marketplace-offer-card-logo {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }
}
.module-popup__thumb-grid-cell, .module-popup__thumb-grid-cell-image, .module-popup__thumb-grid-cell-picture, .module-popup__card-image-tile, .module-popup__card-image-tile-name, .module-popup__card-image-tile-rank, .module-popup__card-image-tile-value, .module-rank-panel__three-card-arc-display, .module-rank-panel__three-card-arc-display-picture, .module-popup__thumb-image, .module-popup__thumb-title, .module-popup__thumb-name, .module-rank-panel__chain-diagram-link-content, .module-rank-panel__chain-diagram-link-picture, .module-rank-panel__versus-compare-side, .module-rank-panel__versus-compare-side-picture, .module-rank-panel__sibling-axis-link-card-image, .module-rank-panel__ranked-thumbnail-list-artist-row-width, .module-rank-panel__marketplace-logo, .module-rank-panel__rail-p {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
@media (max-width:640px) {
.module-popup__thumb-grid {
    grid-template-columns: repeat(auto-fill,minmax(84px,1fr));
    gap: 8px;
  }
}
.module-popup__thumb {
  margin: 14px 0 0;
}
.module-popup__thumb-grid {
  display: grid;
  grid-template-columns: repeat(10,1fr);
  gap: 12px;
}
@media (max-width:1100px) {
.module-popup__thumb-grid {
    grid-template-columns: repeat(auto-fill,minmax(96px,1fr));
  }
}
.module-popup__thumb-image {
  position: relative;
  display: block;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surf2);
  aspect-ratio: 745/1040;
}
.module-popup__thumb-image {
  background-size: cover;
  background-position: center;
}
.module-popup__thumb-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3px 5px;
  font-size: 11px;
  font-weight: 700;
  background: linear-gradient(transparent,rgba(0,0,0,.78));
  color: #fff;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.module-popup__thumb-image:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
}
.module-popup__thumb-name {
  position: absolute;
  left: 5px;
  top: 5px;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 800;
  background: rgba(0,0,0,.62);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.module-popup__thumb-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 14px 0 0;
  padding: 13px;
  border-radius: var(--r-s);
  border: 1px solid var(--line2);
  background: var(--surf2);
  font-size: 15px;
  font-weight: 800;
  color: var(--acc-i);
  text-decoration: none;
}
.module-popup__thumb-more:hover {
  border-color: var(--acc);
}
.module-popup__thumb-caption {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--ink2);
}
.u-screen-reader-only-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.module-rank-panel__denominator-labelled-row, .module-rank-panel__print-variant-offer-row {
  position: relative;
}
.module-rank-panel__denominator-labelled-row .module-rank-panel__denominator-labelled-row-hitarea, .module-rank-panel__print-variant-offer-row .module-rank-panel__denominator-labelled-row-hitarea {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.module-rank-panel__denominator-labelled-row > *:not(.module-rank-panel__denominator-labelled-row-hitarea), .module-rank-panel__print-variant-offer-row > *:not(.module-rank-panel__denominator-labelled-row-hitarea) {
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.module-rank-panel__denominator-labelled-row a:not(.module-rank-panel__denominator-labelled-row-hitarea), .module-rank-panel__denominator-labelled-row button, .module-rank-panel__print-variant-offer-row a:not(.module-rank-panel__denominator-labelled-row-hitarea), .module-rank-panel__print-variant-offer-row button {
  pointer-events: auto;
}
.module-rank-panel__denominator-labelled-row:hover {
  border-color: var(--gold);
  background: color-mix(in srgb,var(--gold) 6%,transparent);
}
.module-rank-panel__denominator-labelled-row:focus-within {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.module-rank-panel__marketplace-offer-card--nolink, .module-rank-panel__table-inline-purchase-button--nolink, .module-rank-panel__denominator-labelled-row-button--nolink {
  cursor: default;
  opacity: .62;
}
.module-rank-panel__denominator-labelled-row-button--nolink:hover {
  background: var(--surf2);
  border-color: var(--line2);
  color: var(--ink);
}
.module-rank-panel__denominator-labelled-row:not(:has(.module-rank-panel__denominator-labelled-row-hitarea)):hover {
  border-color: var(--line);
  background: transparent;
}
.module-popup__thumb-image {
  touch-action: pan-y;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
.u-screen-reader-only-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.module-popup__thumb-image>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
.module-popup__thumb-title, .module-popup__thumb-name {
  z-index: 2;
  pointer-events: none;
}
.module-popup__thumb-image.module-popup__card-image-fallback::after {
  content: "No image";
  position: absolute;
  left: 0;
  right: 0;
  top: 36%;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--mut);
}
.module-rank-panel__denominator-labelled-row-legend, .module-rank-panel__marketplace-offer-card-logo {
  width: auto;
  height: 32px;
  aspect-ratio: auto;
  min-width: 32px;
  max-width: 92px;
  border-radius: 7px;
  padding: 3px 6px;
  display: grid;
  place-items: center;
}
@media (max-width:720px) {
.module-rank-panel__denominator-labelled-row-legend, .module-rank-panel__marketplace-offer-card-logo {
    height: 28px;
    max-width: 80px;
    padding: 2px 5px;
  }
}
.module-rank-panel__denominator-labelled-row-legend:has(.module-rank-panel__marketplace-logo--fanatics-collect), .module-rank-panel__marketplace-offer-card-logo:has(.module-rank-panel__marketplace-logo--fanatics-collect) {
  background: #111;
}
.module-rank-panel__denominator-labelled-row-legend, .module-rank-panel__marketplace-offer-card-logo {
  width: 72px;
  height: 46px;
  aspect-ratio: auto;
  min-width: 0;
  max-width: none;
  border-radius: 8px;
  padding: 5px 8px;
  display: grid;
  place-items: center;
  overflow: visible;
  box-shadow: 0 1px 3px rgba(0,0,0,.16),inset 0 0 0 1px rgba(0,0,0,.07);
}
@media (max-width:720px) {
.module-rank-panel__denominator-labelled-row-legend, .module-rank-panel__marketplace-offer-card-logo {
    width: 62px;
    height: 40px;
    border-radius: 7px;
    padding: 4px 6px;
  }
}
.module-rank-panel__denominator-labelled-row-legend:has(.module-rank-panel__marketplace-logo--ebay), .module-rank-panel__marketplace-offer-card-logo:has(.module-rank-panel__marketplace-logo--ebay), .module-rank-panel__denominator-labelled-row-legend:has(.module-rank-panel__marketplace-logo--tcgplayer), .module-rank-panel__marketplace-offer-card-logo:has(.module-rank-panel__marketplace-logo--tcgplayer), .module-rank-panel__denominator-labelled-row-legend:has(.module-rank-panel__marketplace-logo--cardmarket), .module-rank-panel__marketplace-offer-card-logo:has(.module-rank-panel__marketplace-logo--cardmarket) {
  background: #fff;
}
.module-rank-panel__denominator-labelled-row-legend:has(.module-rank-panel__marketplace-logo--fanatics-collect), .module-rank-panel__marketplace-offer-card-logo:has(.module-rank-panel__marketplace-logo--fanatics-collect) {
  background: #111;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.module-rank-panel__denominator-labelled-row--low .module-rank-panel__denominator-labelled-row-legend, .module-rank-panel__marketplace-offer-card--best .module-rank-panel__marketplace-offer-card-logo {
  background: inherit;
}

@media (min-width: 1081px) {
.module-rank-panel__denominator-labelled-row-meta { grid-column: 1 }
.module-rank-panel__denominator-labelled-row-picture { grid-column: 2 }
.module-rank-panel__denominator-labelled-row-title { grid-column: 3 }
.module-rank-panel__denominator-labelled-row-description { grid-column: 4 }
.module-rank-panel__denominator-labelled-row-name { grid-column: 5 }
.module-rank-panel__denominator-labelled-row-button { grid-column: 6 }
}
@media (min-width: 721px) and (max-width: 1080px) {
.module-rank-panel__denominator-labelled-row-meta { grid-column: 1 }
.module-rank-panel__denominator-labelled-row-picture { grid-column: 2 }
.module-rank-panel__denominator-labelled-row-title { grid-column: 3 }
.module-rank-panel__denominator-labelled-row-description { grid-column: 4 }
.module-rank-panel__denominator-labelled-row-button { grid-column: 5 }
}
.module-rank-panel__ranked-thumbnail-list-gap-row, .module-rank-panel__vvar .module-rank-panel__list-badge-bar-row-list > .module-rank-panel__badge-bar-row {
  transition: border-color .13s, background .13s;
}
.module-rank-panel__ranked-thumbnail-list-gap-row:hover, .module-rank-panel__vvar .module-rank-panel__list-badge-bar-row-list > .module-rank-panel__badge-bar-row:hover {
  border-color: var(--acc);
  background: var(--acc-s);
}
.module-rank-panel__card-grid-page, .module-popup__thumb-effect-layer, .module-rank-panel__sibling-axis-link-grid {
  margin-bottom: 14px;
}
a.module-rank-panel__primary-action-button .u-tabular-number, a.module-rank-panel__primary-action-button:hover .u-tabular-number { color: #fff }
a.module-rank-panel__primary-action-button.module-rank-panel__app-layer-primary-action-button--question .u-tabular-number { color: var(--ink) }
a.module-rank-panel__primary-action-button.module-rank-panel__app-layer-primary-action-button--question:hover .u-tabular-number { color: #fff }
@media (prefers-reduced-motion:no-preference) {
:is(.module-rank-panel__distribution-bar-row, .module-rank-panel__ranked-thumbnail-list-bar, .module-rank-panel__group-value-compare-cell, .module-rank-panel__badge-bar-row, .module-rank-panel__ranked-thumbnail-list-row, .module-rank-panel__attribute-distribution-list>li):nth-child(1) :is(.module-rank-panel__distribution-bar-fill, .module-rank-panel__ranked-thumbnail-list-bar-footnote, .module-rank-panel__attribute-distribution-bar-fill, .module-rank-panel__attribute-distribution-track>i, .module-rank-panel__bar-row-track>i, .module-rank-panel__group-value-compare-cell-bar>span), .module-rank-panel__data-story-tile-bars>i:nth-child(1), .module-rank-panel__data-story-tile>i:nth-child(1) {animation-delay:.20s}
:is(.module-rank-panel__distribution-bar-row, .module-rank-panel__ranked-thumbnail-list-bar, .module-rank-panel__group-value-compare-cell, .module-rank-panel__badge-bar-row, .module-rank-panel__ranked-thumbnail-list-row, .module-rank-panel__attribute-distribution-list>li):nth-child(2) :is(.module-rank-panel__distribution-bar-fill, .module-rank-panel__ranked-thumbnail-list-bar-footnote, .module-rank-panel__attribute-distribution-bar-fill, .module-rank-panel__attribute-distribution-track>i, .module-rank-panel__bar-row-track>i, .module-rank-panel__group-value-compare-cell-bar>span), .module-rank-panel__data-story-tile-bars>i:nth-child(2), .module-rank-panel__data-story-tile>i:nth-child(2) {animation-delay:.24s}
:is(.module-rank-panel__distribution-bar-row, .module-rank-panel__ranked-thumbnail-list-bar, .module-rank-panel__group-value-compare-cell, .module-rank-panel__badge-bar-row, .module-rank-panel__ranked-thumbnail-list-row, .module-rank-panel__attribute-distribution-list>li):nth-child(3) :is(.module-rank-panel__distribution-bar-fill, .module-rank-panel__ranked-thumbnail-list-bar-footnote, .module-rank-panel__attribute-distribution-bar-fill, .module-rank-panel__attribute-distribution-track>i, .module-rank-panel__bar-row-track>i, .module-rank-panel__group-value-compare-cell-bar>span), .module-rank-panel__data-story-tile-bars>i:nth-child(3), .module-rank-panel__data-story-tile>i:nth-child(3) {animation-delay:.28s}
:is(.module-rank-panel__distribution-bar-row, .module-rank-panel__ranked-thumbnail-list-bar, .module-rank-panel__group-value-compare-cell, .module-rank-panel__badge-bar-row, .module-rank-panel__ranked-thumbnail-list-row, .module-rank-panel__attribute-distribution-list>li):nth-child(4) :is(.module-rank-panel__distribution-bar-fill, .module-rank-panel__ranked-thumbnail-list-bar-footnote, .module-rank-panel__attribute-distribution-bar-fill, .module-rank-panel__attribute-distribution-track>i, .module-rank-panel__bar-row-track>i, .module-rank-panel__group-value-compare-cell-bar>span), .module-rank-panel__data-story-tile-bars>i:nth-child(4), .module-rank-panel__data-story-tile>i:nth-child(4) {animation-delay:.32s}
:is(.module-rank-panel__distribution-bar-row, .module-rank-panel__ranked-thumbnail-list-bar, .module-rank-panel__group-value-compare-cell, .module-rank-panel__badge-bar-row, .module-rank-panel__ranked-thumbnail-list-row, .module-rank-panel__attribute-distribution-list>li):nth-child(5) :is(.module-rank-panel__distribution-bar-fill, .module-rank-panel__ranked-thumbnail-list-bar-footnote, .module-rank-panel__attribute-distribution-bar-fill, .module-rank-panel__attribute-distribution-track>i, .module-rank-panel__bar-row-track>i, .module-rank-panel__group-value-compare-cell-bar>span), .module-rank-panel__data-story-tile-bars>i:nth-child(5), .module-rank-panel__data-story-tile>i:nth-child(5) {animation-delay:.36s}
:is(.module-rank-panel__distribution-bar-row, .module-rank-panel__ranked-thumbnail-list-bar, .module-rank-panel__group-value-compare-cell, .module-rank-panel__badge-bar-row, .module-rank-panel__ranked-thumbnail-list-row, .module-rank-panel__attribute-distribution-list>li):nth-child(6) :is(.module-rank-panel__distribution-bar-fill, .module-rank-panel__ranked-thumbnail-list-bar-footnote, .module-rank-panel__attribute-distribution-bar-fill, .module-rank-panel__attribute-distribution-track>i, .module-rank-panel__bar-row-track>i, .module-rank-panel__group-value-compare-cell-bar>span), .module-rank-panel__data-story-tile-bars>i:nth-child(6), .module-rank-panel__data-story-tile>i:nth-child(6) {animation-delay:.40s}
:is(.module-rank-panel__distribution-bar-row, .module-rank-panel__ranked-thumbnail-list-bar, .module-rank-panel__group-value-compare-cell, .module-rank-panel__badge-bar-row, .module-rank-panel__ranked-thumbnail-list-row, .module-rank-panel__attribute-distribution-list>li):nth-child(7) :is(.module-rank-panel__distribution-bar-fill, .module-rank-panel__ranked-thumbnail-list-bar-footnote, .module-rank-panel__attribute-distribution-bar-fill, .module-rank-panel__attribute-distribution-track>i, .module-rank-panel__bar-row-track>i, .module-rank-panel__group-value-compare-cell-bar>span), .module-rank-panel__data-story-tile-bars>i:nth-child(7), .module-rank-panel__data-story-tile>i:nth-child(7) {animation-delay:.44s}
:is(.module-rank-panel__distribution-bar-row, .module-rank-panel__ranked-thumbnail-list-bar, .module-rank-panel__group-value-compare-cell, .module-rank-panel__badge-bar-row, .module-rank-panel__ranked-thumbnail-list-row, .module-rank-panel__attribute-distribution-list>li):nth-child(8) :is(.module-rank-panel__distribution-bar-fill, .module-rank-panel__ranked-thumbnail-list-bar-footnote, .module-rank-panel__attribute-distribution-bar-fill, .module-rank-panel__attribute-distribution-track>i, .module-rank-panel__bar-row-track>i, .module-rank-panel__group-value-compare-cell-bar>span), .module-rank-panel__data-story-tile-bars>i:nth-child(8), .module-rank-panel__data-story-tile>i:nth-child(8) {animation-delay:.48s}
:is(.module-rank-panel__distribution-bar-row, .module-rank-panel__ranked-thumbnail-list-bar, .module-rank-panel__group-value-compare-cell, .module-rank-panel__badge-bar-row, .module-rank-panel__ranked-thumbnail-list-row, .module-rank-panel__attribute-distribution-list>li):nth-child(9) :is(.module-rank-panel__distribution-bar-fill, .module-rank-panel__ranked-thumbnail-list-bar-footnote, .module-rank-panel__attribute-distribution-bar-fill, .module-rank-panel__attribute-distribution-track>i, .module-rank-panel__bar-row-track>i, .module-rank-panel__group-value-compare-cell-bar>span), .module-rank-panel__data-story-tile-bars>i:nth-child(9), .module-rank-panel__data-story-tile>i:nth-child(9) {animation-delay:.52s}
:is(.module-rank-panel__distribution-bar-row, .module-rank-panel__ranked-thumbnail-list-bar, .module-rank-panel__group-value-compare-cell, .module-rank-panel__badge-bar-row, .module-rank-panel__ranked-thumbnail-list-row, .module-rank-panel__attribute-distribution-list>li):nth-child(10) :is(.module-rank-panel__distribution-bar-fill, .module-rank-panel__ranked-thumbnail-list-bar-footnote, .module-rank-panel__attribute-distribution-bar-fill, .module-rank-panel__attribute-distribution-track>i, .module-rank-panel__bar-row-track>i, .module-rank-panel__group-value-compare-cell-bar>span), .module-rank-panel__data-story-tile-bars>i:nth-child(10), .module-rank-panel__data-story-tile>i:nth-child(10) {animation-delay:.56s}
:is(.module-rank-panel__distribution-bar-row, .module-rank-panel__ranked-thumbnail-list-bar, .module-rank-panel__group-value-compare-cell, .module-rank-panel__badge-bar-row, .module-rank-panel__ranked-thumbnail-list-row, .module-rank-panel__attribute-distribution-list>li):nth-child(11) :is(.module-rank-panel__distribution-bar-fill, .module-rank-panel__ranked-thumbnail-list-bar-footnote, .module-rank-panel__attribute-distribution-bar-fill, .module-rank-panel__attribute-distribution-track>i, .module-rank-panel__bar-row-track>i, .module-rank-panel__group-value-compare-cell-bar>span), .module-rank-panel__data-story-tile-bars>i:nth-child(11), .module-rank-panel__data-story-tile>i:nth-child(11) {animation-delay:.60s}
:is(.module-rank-panel__distribution-bar-row, .module-rank-panel__ranked-thumbnail-list-bar, .module-rank-panel__group-value-compare-cell, .module-rank-panel__badge-bar-row, .module-rank-panel__ranked-thumbnail-list-row, .module-rank-panel__attribute-distribution-list>li):nth-child(n+12) :is(.module-rank-panel__distribution-bar-fill, .module-rank-panel__ranked-thumbnail-list-bar-footnote, .module-rank-panel__attribute-distribution-bar-fill, .module-rank-panel__attribute-distribution-track>i, .module-rank-panel__bar-row-track>i, .module-rank-panel__group-value-compare-cell-bar>span), .module-rank-panel__data-story-tile-bars>i:nth-child(n+12), .module-rank-panel__data-story-tile>i:nth-child(n+12) {animation-delay:.64s}
}
@media (prefers-reduced-motion:no-preference) and (scripting:none) {
.module-rank-panel__distribution-bar-fill, .module-rank-panel__ranked-thumbnail-list-bar-footnote, .module-rank-panel__attribute-distribution-bar-fill, .module-rank-panel__attribute-distribution-track>i, .module-rank-panel__bar-row-track>i, .module-rank-panel__group-value-compare-cell-bar>span, .module-rank-panel__data-story-tile-gauge>i, .module-rank-panel__data-story-tile-bars>i, .module-rank-panel__data-story-tile>i, .module-rank-panel__position-spread-gauge-needle {animation-play-state:running}
}
.module-rank-panel__ranked-thumbnail-list-bar-footnote {display:block;height:10px;border-radius:5px;background:var(--acc);max-width:100%}
.u-tabular-number { font-variant-numeric:tabular-nums; }
.module-rank-panel__ranked-thumbnail-list-gap-row-bar i { transform-origin:left center; animation:none; animation-play-state:paused; display:block; height:100%; width:var(--w); background:var(--c1); opacity:.75; border-radius:99px; }
.module-rank-panel__denominator-labelled-row-bar i { transform-origin:left center; animation:none; animation-play-state:paused; display:block; height:100%; width:var(--w); border-radius:99px; background:var(--mut); opacity:.8; }

.module-popup__thumb:not(.module-rank-panel__oppo-paged) .module-popup__thumb-grid .module-popup__thumb-image[data-page]:not([data-page="0"]) { display:none; }

.module-rank-panel__dial>* { min-width:0; }
.module-rank-panel__ranked-thumbnail-list-gap-row>* { min-width:0; }
.module-rank-panel__ranked-thumbnail-list-gap-row--current .module-rank-panel__ranked-thumbnail-list-gap-row-bar i { opacity:1; background:var(--acc-i); }
:is(.module-rank-panel__content-section-block, .module-rank-panel__app-layer, .module-rank-panel__page-summary-box)>.module-rank-panel__ranked-thumbnail-list-gap-rows+.module-rank-panel__ranked-thumbnail-list-gap-rows { margin-top:12px; }
.module-rank-panel__ranked-thumbnail-list-standout-compare .module-rank-panel__review { margin:0; }
.module-rank-panel__ranked-thumbnail-list-standout-compare .module-rank-panel__overall-score--withpic .module-rank-panel__overall-score-head { display:flex; flex-wrap:nowrap; align-items:flex-start; gap:16px; }
.module-rank-panel__ranked-thumbnail-list-standout-compare .module-rank-panel__overall-score-pic { flex:0 0 auto; width:114px; margin:0; }
.module-rank-panel__ranked-thumbnail-list-standout-compare .module-rank-panel__overall-score-pic>a { display:block; width:100%; aspect-ratio:745/1040; border-radius:7px; overflow:hidden; border:1px solid var(--color-border,#e2e8f0); background:#f1f5f9; box-shadow:0 6px 16px rgba(15,23,42,.14); transition:transform .2s cubic-bezier(.18,.75,.28,1),box-shadow .2s; }
.module-rank-panel__ranked-thumbnail-list-standout-compare .module-rank-panel__overall-score-pic>a:hover { transform:translateY(-4px); box-shadow:0 14px 26px -8px rgba(15,23,42,.32); }
.module-rank-panel__ranked-thumbnail-list-standout-compare .module-rank-panel__overall-score-pic img { width:100%; height:100%; object-fit:cover; display:block; }
.module-rank-panel__ranked-thumbnail-list-standout-compare .module-rank-panel__overall-score-pic figcaption { margin-top:7px; font-size:13px; line-height:1.35; font-weight:700; color:var(--color-text-body,#334155); word-break:keep-all; }
.module-rank-panel__ranked-thumbnail-list-standout-compare .module-rank-panel__overall-score-pic figcaption span { display:block; font-weight:600; color:var(--color-text-muted,#64748b); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.module-rank-panel__ranked-thumbnail-list-standout-compare .module-rank-panel__overall-score--withpic .module-rank-panel__overall-score-meta { flex:1 1 auto; min-width:0; }
.module-rank-panel__review>.module-rank-panel__overall-score { margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--color-border); }
.module-rank-panel__review>.module-rank-panel__rate-bar { margin-top:0; }
.module-rank-panel__review-cta-notice { font-size:16px; font-weight:700; color:var(--color-text-muted); } /* HBY 09-28 · 13px → 16px(안내 문장 = 내용 글자 · 뒤 벌과 같은 값) */
.module-rank-panel__review-attribution { margin:18px 0 0; font-size:13px; color:var(--color-text-muted); line-height:1.5; }
.module-rank-panel__denominator-labelled-row-heading { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px; }

.module-rank-panel__denominator-labelled-row-reading-hint { font-size:13px; color:var(--mut); font-weight:600; }
.module-rank-panel__denominator-labelled-row-label { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.module-rank-panel__denominator-labelled-row.module-rank-panel__denominator-labelled-row--low { border-style:solid; border-width:1px 1px 1px 4px; border-color:var(--line2) var(--line2) var(--line2) var(--buy); background:color-mix(in srgb,var(--buy)7%,var(--surf)); box-shadow:0 1px 8px color-mix(in srgb,var(--buy)14%,transparent); padding:8px 10px; }
.module-rank-panel__denominator-labelled-row-legend { flex:0 0 auto; width:72px; height:46px; border-radius:8px; display:grid; place-items:center; background:#fff; color:var(--acc-i); font-size:13px; font-weight:800; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; padding:5px 8px; overflow:visible; box-shadow:0 1px 3px rgba(0,0,0,.16),inset 0 0 0 1px rgba(0,0,0,.07); aspect-ratio:auto; min-width:0; max-width:none; }
.module-popup__thumb-image { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; -webkit-user-drag:none; position:relative; display:block; border-radius:9px; overflow:hidden; border:1px solid var(--line); background:var(--surf2); aspect-ratio:745/1040; cursor:pointer; background-size:cover; background-position:center; touch-action:pan-y; }
.module-popup__thumb-title { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; -webkit-user-drag:none; position:absolute; left:0; right:0; bottom:0; padding:2px 5px 3px; font-size:13px; line-height:1.35; font-weight:700; background:linear-gradient(transparent,rgba(0,0,0,.78)); color:#fff; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; z-index:2; pointer-events:none; }
.module-rank-panel__denominator-labelled-row-market-name em { font-style:normal; font-size:13px; font-weight:600; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.module-popup__thumb-name { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; -webkit-user-drag:none; position:absolute; left:5px; top:5px; padding:1px 6px; border-radius:5px; font-size:13px; font-weight:800; background:rgba(0,0,0,.62); color:#fff; font-variant-numeric:tabular-nums; z-index:2; pointer-events:none; }
.module-rank-panel__denominator-labelled-row-picture { display:flex; flex-direction:column; gap:1px; }
.module-rank-panel__denominator-labelled-row-title { display:flex; flex-direction:column; gap:1px; }
.module-rank-panel__denominator-labelled-row-picture b { font-size:15px; font-weight:800; letter-spacing:-.02em; }
.module-rank-panel__denominator-labelled-row-title b { font-size:15px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.module-rank-panel__denominator-labelled-row-picture em { font-style:normal; font-size:13px; font-weight:600; color:var(--mut); }
.module-rank-panel__denominator-labelled-row-title em { font-style:normal; font-size:13px; font-weight:600; color:var(--mut); }
.module-rank-panel__denominator-labelled-row-badge { display:inline-block; padding:3px 9px; border-radius:999px; background:var(--buy); color:#fff; font-size:13px; font-weight:800; letter-spacing:-.01em; box-shadow:0 2px 8px color-mix(in srgb,var(--buy)45%,transparent); }
.module-rank-panel__denominator-labelled-row-diff { font-size:13px; font-weight:700; color:var(--mut); }
.module-rank-panel__denominator-labelled-row-name { font-size:13px; color:var(--mut); font-weight:600; line-height:1.45; }
.module-rank-panel__denominator-labelled-row-button { display:grid; place-items:center; padding:9px 10px; border-radius:8px; background:var(--surf2); border:1px solid var(--line2); color:var(--ink); font-size:13px; font-weight:800; text-decoration:none; white-space:nowrap; transition:background .13s,border-color .13s,color .13s; border-color:var(--line2); }
.module-rank-panel__denominator-labelled-row--low .module-rank-panel__denominator-labelled-row-button { background:var(--buy); border-color:var(--buy); color:#fff; box-shadow:0 2px 10px color-mix(in srgb,var(--buy)40%,transparent); }
.module-rank-panel__denominator-labelled-row-button:hover { border-color:var(--acc); background:var(--acc); color:#fff; }
.module-rank-panel__denominator-labelled-row-button:focus-visible { border-color:var(--acc); background:var(--acc); color:#fff; }
.module-rank-panel__review { --rv-accent:#e43917; --rv-track:#ddd; margin:24px 0 32px; padding:26px 28px; border-radius:var(--color-radius-lg); background:#fff; box-shadow:0 2px 20px rgba(0,0,0,.08); }
.module-rank-panel__overall-score { --rv-accent:#e43917; --rv-track:#ddd; margin:0; }
.module-rank-panel__denominator-labelled-row--low .module-rank-panel__denominator-labelled-row-legend { background:inherit; color:inherit; }
.module-rank-panel__rate-bar { --rv-accent:#e43917; --rv-track:#ddd; list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
.module-rank-panel__denominator-labelled-row--low .module-rank-panel__denominator-labelled-row-title b { color:var(--buy); font-size:17px; }
.module-rank-panel__overall-score--tile .module-rank-panel__overall-score-tile { flex:0 0 110px; width:110px; min-width:0; max-width:110px; display:flex; flex-direction:column; float:left; margin:0 20px 10px 0; min-height:110px; }
.module-rank-panel__denominator-labelled-row-group { display:flex; align-items:center; gap:7px; margin:2px 0 7px; font-size:13px; font-weight:800; color:var(--ink2); letter-spacing:-.01em; }
.module-rank-panel__overall-score--tile .module-rank-panel__overall-score-value { font-size:clamp(40px,8vw,48px); padding:12px 2px 10px; flex:1 1 auto; display:flex; align-items:center; justify-content:center; }
.module-rank-panel__overall-score-value-suffix {   /* 점수 뒤 만점 표기(예 /5): 큰 숫자의 절반 이하 · 타일 바탕 위 흰색 반투명(회색 계열) · 숫자 아래 줄에 맞춤 */
  font-size: .4em;
  font-weight: 700;
  color: rgba(255, 255, 255, .85);
  margin-left: 3px;
  align-self: flex-end;
  padding-bottom: .22em;
}
.module-rank-panel__overall-score-value-prefix {
  font-size: 16px;
  font-weight: 700;
  opacity: .7;
  margin-right: 4px;
  align-self: center;
}
.module-rank-panel__denominator-labelled-row-group span { padding:2px 8px; border-radius:999px; background:var(--surf); border:1px solid var(--line2); font-size:13px; font-weight:700; color:var(--mut); }
.u-screen-reader-only-text { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.module-rank-panel__denominator-labelled-row-group--reference { margin-top:12px; padding-top:11px; color:var(--mut); }
.module-rank-panel__denominator-labelled-row--low .module-rank-panel__denominator-labelled-row-button:hover { background:var(--acc); border-color:var(--acc); }
.module-rank-panel__denominator-labelled-row--low .module-rank-panel__denominator-labelled-row-button:focus-visible { background:var(--acc); border-color:var(--acc); }
.module-rank-panel__overall-score-label { display:block; margin:0; padding:9px 10px; background:var(--color-text-primary,#1e293b); color:#fff; font-size:13px; font-weight:700; letter-spacing:.3px; line-height:1.35; word-break:keep-all; }
.module-rank-panel__overall-score-delta { display:inline-block; margin-bottom:6px; font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.module-rank-panel__overall-score-delta.module-rank-panel__chg-up { color:#d11507; }
.module-rank-panel__overall-score-delta.module-rank-panel__chg-down { color:#1554d1; }
.module-rank-panel__overall-score-attribution { margin:14px 0 0; font-size:13px; color:var(--color-text-muted); line-height:1.5; }
.module-rank-panel__rate-bar-fill { display:block; height:100%; border-radius:7px; background:var(--rv-accent,#e43917); transform-origin:left center; animation:none; animation-play-state:paused; }
.module-rank-panel__gap-bar { margin-top:12px; padding:14px 15px 12px; background:var(--surf); border:1px solid var(--line2); border-radius:var(--r-s); }
.module-rank-panel__gap-bar-heading { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.module-rank-panel__gap-bar-title { margin:0; font-size:16px; font-weight:800; color:var(--ink); }
.module-rank-panel__gap-bar-reading-hint { font-size:13px; color:var(--mut); font-weight:600; }
.module-rank-panel__rate-bar-fill.module-rank-panel__rv-anim-wait { animation-play-state:paused; }
.module-rank-panel__gap-bar-label { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.module-rank-panel__overall-score--circle .module-rank-panel__overall-score-tile.module-rank-panel__rv-anim-wait { animation-play-state:paused; }
.module-rank-panel__denominator-labelled-row { display:grid; grid-template-columns:minmax(0,1.6fr)108px 104px 72px minmax(0,1.3fr)104px; gap:11px; align-items:center; padding:9px 11px; border:1px solid var(--line); border-radius:var(--r-s); background:var(--surf); border-color:var(--line2); position:relative; }
.module-rank-panel__rate-bar-fill.is-rv-anim-go { animation-play-state:running; }
.module-rank-panel__denominator-labelled-row>* { min-width:0; }
.module-rank-panel__overall-score--circle .module-rank-panel__overall-score-tile.is-rv-anim-go { animation-play-state:running; }
.module-rank-panel__denominator-labelled-row--current { border-color:var(--acc); background:color-mix(in srgb,var(--acc)9%,var(--surf2)); }
.module-rank-panel__denominator-labelled-row-meta { display:flex; flex-direction:row; gap:9px; min-width:0; align-items:center; }
.module-rank-panel__denominator-labelled-row-market-name { font-size:14px; font-weight:800; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; flex-direction:column; gap:1px; min-width:0; }
.module-rank-panel__denominator-labelled-row-markets { font-size:13px; font-weight:600; color:var(--mut); }
.module-rank-panel__rate-bar--dist .module-rank-panel__rate-bar-value { font-size:13.5px; }
.module-rank-panel__denominator-labelled-row-bar { height:11px; border-radius:99px; background:var(--line2); overflow:hidden; }
.module-rank-panel__dial b { font-size:16px; font-weight:800; color:var(--acc-i); letter-spacing:-.03em; line-height:1; }
.module-rank-panel__dial small { font-size:13px; font-weight:700; color:var(--mut); line-height:1; }
.module-rank-panel__denominator-labelled-row--current .module-rank-panel__denominator-labelled-row-bar i { background:var(--acc); opacity:1; }
.module-rank-panel__denominator-labelled-row-value { text-align:right; font-size:15px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; overflow:visible; text-overflow:clip; white-space:nowrap; }
.module-rank-panel__denominator-labelled-row-value em { display:block; font-style:normal; font-size:13px; font-weight:600; color:var(--mut); white-space:normal; }
.module-rank-panel__denominator-labelled-row-footnote { margin:10px 0 0; font-size:13px; color:var(--mut); line-height:1.6; }
.module-rank-panel__denominator-labelled-row-footnote b { color:var(--ink2); font-weight:800; }
.module-rank-panel__overall-score-seg-cell:nth-child(1) { background:color-mix(in srgb,var(--rv-accent,#e43917)22%,#fff); }
.module-rank-panel__overall-score-seg-cell:nth-child(2) { background:color-mix(in srgb,var(--rv-accent,#e43917)40%,#fff); }
.module-rank-panel__overall-score-seg-cell:nth-child(3) { background:color-mix(in srgb,var(--rv-accent,#e43917)58%,#fff); }
.module-rank-panel__overall-score-seg-cell:nth-child(4) { background:color-mix(in srgb,var(--rv-accent,#e43917)78%,#fff); }
.module-rank-panel__ranked-thumbnail-list { margin:12px 0 0; }
.module-rank-panel__ranked-thumbnail-list-head { display:flex; flex-wrap:wrap; gap:12px 18px; align-items:flex-start; }
.module-rank-panel__ranked-thumbnail-list-tile { flex:0 0 auto; width:116px; display:flex; flex-direction:column; min-height:116px; border-radius:var(--r-s); background:var(--acc); color:#fff; text-align:center; overflow:hidden; }
.module-rank-panel__ranked-thumbnail-list-value { flex:1 1 auto; display:flex; align-items:center; justify-content:center; padding:12px 4px 8px; font-size:clamp(30px,7vw,40px); font-weight:800; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; }
.module-rank-panel__overall-score-seg-pin { animation:none; animation-play-state:paused; }
.module-rank-panel__ranked-thumbnail-list-label { padding:6px 6px 9px; font-size:13px; font-weight:700; line-height:1.35; background:rgba(0,0,0,.16); word-break:keep-all; }
.module-rank-panel__ranked-thumbnail-list-meta { flex:1 1 0; min-width:250px; }
.module-rank-panel__overall-score-seg-caption { font-size:13.5px; animation:none; animation-play-state:paused; }
.module-rank-panel__overall-score-seg-caption--r { animation:none; animation-play-state:paused; }
.module-rank-panel__ranked-thumbnail-list-subtitle { margin:0 0 6px; font-size:15px; line-height:1.6; color:var(--ink2); }
.module-rank-panel__overall-score-seg-caption { max-width:calc(100% - var(--seg-ml,0%)); }
.module-rank-panel__overall-score-seg-caption small { margin-left:4px; font-size:13px; font-weight:600; color:var(--mut); white-space:normal; }
.module-rank-panel__ranked-thumbnail-list-subtitle b { color:var(--ink); font-weight:800; }
.module-rank-panel__ranked-thumbnail-list-percent { display:inline-block; margin:0 0 8px; padding:2px 10px; border-radius:999px; font-size:13px; font-weight:800; background:var(--acc-s); color:var(--acc-i); border:1px solid color-mix(in srgb,var(--acc)38%,transparent); }
.module-rank-panel__ranked-thumbnail-list-gap { margin:0; font-size:13px; line-height:1.6; color:var(--ink2); }
.module-rank-panel__review>.module-rank-panel__overall-score--segment { margin:14px 0 18px; padding:0; border:0; }
.module-rank-panel__ranked-thumbnail-list-gap b { color:var(--ink); font-weight:800; }
.module-rank-panel__ranked-thumbnail-list-bars { list-style:none; margin:13px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.module-rank-panel__review>.module-rank-panel__rate-bar--bullet { margin-top:16px; }
.module-rank-panel__ranked-thumbnail-list-bar { display:grid; grid-template-columns:minmax(0,1fr)auto; gap:3px 10px; align-items:baseline; }
.module-rank-panel__rate-bar--bullet .module-rank-panel__rate-bar-track--bullet { position:relative; height:13px; border-radius:7px; overflow:hidden; background:linear-gradient(to right,color-mix(in srgb,var(--color-text-primary,#1e293b)6%,#fff)0 33.33%,color-mix(in srgb,var(--color-text-primary,#1e293b)11%,#fff)33.33% 66.66%,color-mix(in srgb,var(--color-text-primary,#1e293b)17%,#fff)66.66% 100%); }
.module-rank-panel__ranked-thumbnail-list-bar-key { min-width:0; font-size:13px; font-weight:700; color:var(--mut); line-height:1.45; word-break:keep-all; }
.module-rank-panel__ranked-thumbnail-list-bar-value { font-size:14px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:visible; text-overflow:clip; text-align:right; }
.module-rank-panel__rate-bar-marker { animation:none; animation-play-state:paused; }
.module-rank-panel__ranked-thumbnail-list-bar-title { grid-column:1/-1; display:flex; align-items:center; position:relative; width:100%; height:10px; border-radius:5px; background:var(--line2); overflow:visible; }
.module-rank-panel__ranked-thumbnail-list-bar-footnote { display:block; height:10px; border-radius:5px; background:var(--acc); max-width:100%; }
.module-rank-panel__rate-bar-marker-cap { font-size:13px; animation:none; animation-play-state:paused; }
.module-rank-panel__ranked-thumbnail-list-bar--current .module-rank-panel__ranked-thumbnail-list-bar-footnote { background:var(--acc-i); }
.module-rank-panel__rate-bar-marker-cap--r { animation:none; animation-play-state:paused; }
.module-rank-panel__ranked-thumbnail-list-bar-marker { position:absolute; top:-3px; width:2px; height:16px; border-radius:1px; background:var(--ink); }
.module-rank-panel__ranked-thumbnail-list-bar-marker-caption { grid-column:1/-1; font-size:13px; font-weight:700; color:var(--ink2); line-height:1.4; }
.module-rank-panel__denominator-labelled-row-bar>i.is-rv-anim-go { transform-origin:left center; animation:bar-fill-x 1.5s linear .2s both; }
.module-rank-panel__ranked-thumbnail-list-footnote { margin:11px 0 0; font-size:13px; color:var(--mut); line-height:1.55; }
.module-rank-panel__overall-score-seg-pin.module-rank-panel__rv-anim-wait { animation-play-state:paused; }
.module-rank-panel__rate-bar-marker.module-rank-panel__rv-anim-wait { animation-play-state:paused; }
.module-rank-panel__overall-score-seg-caption.module-rank-panel__rv-anim-wait { animation-play-state:paused; }
.module-rank-panel__rate-bar-marker-cap.module-rank-panel__rv-anim-wait { animation-play-state:paused; }
.module-rank-panel__overall-score-seg-pin.is-rv-anim-go { animation-play-state:running; }
.module-rank-panel__dial { display:grid; grid-template-columns:minmax(0,1fr); column-gap:12px; row-gap:8px; align-items:center; margin-top:12px; padding:12px; background:var(--surf); border:1px solid var(--line2); border-radius:var(--r-s); position:relative; cursor:help; }
.module-rank-panel__rate-bar-marker.is-rv-anim-go { animation-play-state:running; }

.module-rank-panel__overall-score-seg-caption.is-rv-anim-go { animation-play-state:running; }

.module-rank-panel__rate-bar-marker-cap.is-rv-anim-go { animation-play-state:running; }

.module-rank-panel__dial-explanation { margin:0; font-size:13.5px; line-height:1.55; color:var(--ink2); flex:1 1 260px; min-width:0; grid-column:1/-1; }
.module-rank-panel__dial-explanation b { color:var(--ink); font-weight:800; }
.module-rank-panel__ranked-thumbnail-list-standout-compare { --color-text-primary:#1e293b; --color-text-body:#334155; --color-text-muted:#64748b; --color-border:#e2e8f0; --color-primary-dark:#1e40af; --color-shadow-sm:0 1px 2px rgba(15,23,42,.08); margin:14px 0 0; --color-primary:#1d4ed8; --color-radius-lg:12px; }
.module-rank-panel__ranked-thumbnail-list-standout-compare-case { margin-bottom:14px; border:1px solid var(--line2); border-radius:var(--r-s); overflow:hidden; }
.module-rank-panel__ranked-thumbnail-list-standout-compare-case:last-child { margin-bottom:0; }
.module-rank-panel__ranked-thumbnail-list-standout-compare-host { padding:16px; background:#fff; color:#334155; display:flex; flex-direction:column; gap:14px; }
.module-rank-panel__ranked-thumbnail-list-standout-compare-row { display:grid; grid-template-columns:56px 300px minmax(180px,1fr); grid-template-areas:"pic body bar"; gap:6px 12px; align-items:center; min-height:78px; padding:10px 12px; border:1px solid #e2e8f0; border-radius:8px; background:#fff; text-decoration:none; color:inherit; }
.module-rank-panel__ranked-thumbnail-list-standout-compare-rowbar { grid-area:bar; min-width:0; display:flex; align-items:center; gap:8px; }
.module-rank-panel__ranked-thumbnail-list-gap-row-bar>i.is-rv-anim-go { transform-origin:left center; animation:bar-fill-x 1.5s linear .2s both; }
.module-rank-panel__ranked-thumbnail-list-standout-compare-rowbar .module-rank-panel__ranked-thumbnail-list-standout-compare-rowbh { flex:0 0 auto; margin:0; }
.module-rank-panel__ranked-thumbnail-list-standout-compare-row:hover { border-color:#94a3b8; background:#f8fafc; }
.module-rank-panel__ranked-thumbnail-list-standout-compare-rowpic { grid-area:pic; display:block; width:56px; aspect-ratio:745/1040; border-radius:5px; overflow:hidden; border:1px solid #e2e8f0; background:#f1f5f9; }
.module-rank-panel__ranked-thumbnail-list-standout-compare-rowpic img { width:100%; height:100%; object-fit:cover; display:block; }
.module-rank-panel__ranked-thumbnail-list-standout-compare-rowbody { grid-area:body; min-width:0; display:flex; flex-direction:column; gap:3px; }

.module-rank-panel__ranked-thumbnail-list-standout-compare-rowbh { margin-bottom:2px; min-height:0; }

.module-rank-panel__ranked-thumbnail-list-gap-row-value { font-size:14px; font-weight:800; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:visible; text-overflow:clip; }
.module-rank-panel__ranked-thumbnail-list-standout-compare-legend b { color:var(--color-text-body,#334155); font-weight:800; }
.module-rank-panel__ranked-thumbnail-list-gap-row-value-text { font-size:13px; font-weight:700; color:var(--mut); text-align:right; display:flex; flex-direction:column; gap:1px; min-width:0; overflow-wrap:break-word; }
.module-rank-panel__ranked-thumbnail-list-standout-compare-gap b { color:var(--color-text-primary,#1e293b); font-weight:800; }

.module-rank-panel__ranked-thumbnail-list-standout-compare-extra { display:flex; gap:18px; align-items:flex-start; }
.module-rank-panel__ranked-thumbnail-list-standout-compare-ethumb { flex:0 0 132px; display:block; border-radius:8px; overflow:hidden; border:1px solid #e2e8f0; background:#f8fafc; aspect-ratio:745/1040; }
.module-rank-panel__ranked-thumbnail-list-standout-compare-ethumb img { width:100%; height:100%; object-fit:cover; display:block; }
.module-rank-panel__content-section-block>.module-rank-panel__ranked-thumbnail-list:first-child { margin-top:0; }

.module-rank-panel__ranked-thumbnail-list-gap-row { display:grid; grid-template-columns:minmax(0,1.5fr)minmax(90px,1.6fr)92px minmax(0,1fr); gap:11px; align-items:center; padding:9px 12px; border:1px solid var(--line2); border-radius:var(--r-s); background:var(--surf); }
.module-rank-panel__ranked-thumbnail-list-gap-row-value-text b { font-size:14px; font-weight:800; color:var(--ink); }
.module-rank-panel__ranked-thumbnail-list-gap-row-value-text em { font-style:normal; font-size:13px; font-weight:600; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.module-rank-panel__ranked-thumbnail-list-gap-row-bar { height:9px; border-radius:99px; background:var(--surf2); overflow:hidden; }
.module-rank-panel__ranked-thumbnail-list-gap-row-bar--none { background:repeating-linear-gradient(115deg,var(--surf2)0 5px,transparent 5px 10px); border:1px dashed var(--line2); box-sizing:border-box; }
.module-rank-panel__ranked-thumbnail-list-gap-row-picture { font-size:15px; font-weight:800; text-align:right; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:visible; text-overflow:clip; }
.module-rank-panel__ranked-thumbnail-list-gap-row-name { font-size:13px; font-weight:600; color:var(--mut); white-space:normal; overflow-wrap:break-word; min-width:0; }
.module-rank-panel__ranked-thumbnail-list-gap-row--current { border-color:var(--c1); background:color-mix(in srgb,var(--c1)8%,var(--surf)); }
.module-rank-panel__ranked-thumbnail-list-gap-row--separator { border-top-width:3px; border-top-color:var(--c5); }
.module-rank-panel__ranked-thumbnail-list-gap-row--separator .module-rank-panel__ranked-thumbnail-list-gap-row-bar i { background:var(--c5); }
.module-rank-panel__ranked-thumbnail-list-gap-row--not-available { opacity:.62; }

table td .u-tabular-number { white-space:nowrap; }
table .u-tabular-number { white-space:nowrap; }
.module-rank-panel__denominator-labelled-row-legend:has(.module-rank-panel__marketplace-logo--ebay) { background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.22),inset 0 0 0 1px rgba(0,0,0,.07); }
.module-rank-panel__denominator-labelled-row-legend:has(.module-rank-panel__marketplace-logo--tcgplayer) { background:#fff; }
.module-rank-panel__denominator-labelled-row-legend:has(.module-rank-panel__marketplace-logo--cardmarket) { background:#fff; }
.module-rank-panel__denominator-labelled-row-legend:has(.module-rank-panel__marketplace-logo--fanatics-collect) { background:#111; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.module-rank-panel__denominator-labelled-row--low .module-rank-panel__denominator-labelled-row-legend:has(.module-rank-panel__marketplace-logo--ebay) { background:#fff; }
.module-rank-panel__overall-score--circle .module-rank-panel__overall-score-tile { animation:none; }
.module-popup__thumb { margin:14px 0 0; }
.module-popup__thumb-grid { display:grid; grid-template-columns:repeat(10,1fr); gap:12px; }
.module-popup__thumb-image:focus-visible { outline:2px solid var(--acc); outline-offset:3px; }
.module-popup__thumb-more { display:flex; align-items:center; justify-content:center; gap:9px; margin:14px 0 0; padding:13px; border-radius:var(--r-s); border:1px solid var(--line2); background:var(--surf2); font-size:15px; font-weight:800; color:var(--acc-i); text-decoration:none; }
.module-popup__thumb-more::after { content:none; }
.module-popup__thumb-more:hover { border-color:var(--acc); }
.module-popup__thumb-caption { margin:0 0 10px; font-size:14px; color:var(--ink2); }
.module-rank-panel__print-variant-offer-row a:not(.module-rank-panel__denominator-labelled-row-hitarea) { color:#fff; font-weight:800; text-decoration:none; font-size:13px; /* HBS 09-28 · 12.5px → 13px */ border:0; padding:7px 14px; border-radius:999px; white-space:nowrap; background:var(--buy); }
.module-rank-panel__print-variant-offer-row[data-priced="0"] a:not(.module-rank-panel__denominator-labelled-row-hitarea) { color:var(--ink2); background:var(--surf2); }
.module-rank-panel__denominator-labelled-row .module-rank-panel__denominator-labelled-row-hitarea { position:absolute; inset:0; z-index:1; border-radius:inherit; }
.module-rank-panel__print-variant-offer-row .module-rank-panel__denominator-labelled-row-hitarea { position:absolute; inset:0; z-index:1; border-radius:inherit; }
.module-rank-panel__denominator-labelled-row>*:not(.module-rank-panel__denominator-labelled-row-hitarea) { position:relative; z-index:2; pointer-events:none; }
.module-rank-panel__print-variant-offer-row>*:not(.module-rank-panel__denominator-labelled-row-hitarea) { position:relative; z-index:2; pointer-events:none; }
.module-rank-panel__denominator-labelled-row a:not(.module-rank-panel__denominator-labelled-row-hitarea) { pointer-events:auto; }
.module-rank-panel__denominator-labelled-row button { pointer-events:auto; }
.module-rank-panel__print-variant-offer-row a:not(.module-rank-panel__denominator-labelled-row-hitarea) { pointer-events:auto; }
.module-rank-panel__denominator-labelled-row:hover { border-color:var(--gold); background:color-mix(in srgb,var(--gold)6%,transparent); }
.module-rank-panel__denominator-labelled-row:focus-within { outline:2px solid var(--gold); outline-offset:2px; }
.module-rank-panel__denominator-labelled-row-button--nolink { cursor:default; opacity:.62; }
.module-rank-panel__denominator-labelled-row-button--nolink:hover { background:var(--surf2); border-color:var(--line2); color:var(--ink); }
.module-rank-panel__denominator-labelled-row:not(:has(.module-rank-panel__denominator-labelled-row-hitarea)):hover { border-color:var(--line); background:transparent; }
.module-rank-panel__overall-score--tile { position:relative; }
.module-rank-panel__overall-score--tile .module-rank-panel__overall-score-hitarea { position:absolute; inset:0; z-index:1; border-radius:inherit; }
.module-rank-panel__overall-score--tile>*:not(.module-rank-panel__overall-score-hitarea) { position:relative; z-index:2; pointer-events:none; }
.module-rank-panel__overall-score--tile a:not(.module-rank-panel__overall-score-hitarea) { pointer-events:auto; }
caption.u-screen-reader-only-text { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.module-popup__thumb-image>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; pointer-events:none; }
.module-popup__thumb-image.module-popup__card-image-fallback::after { content:"No image"; position:absolute; left:0; right:0; top:34%; text-align:center; font-size:13px; font-weight:600; letter-spacing:.03em; color:var(--mut); }
.module-rank-panel__denominator-labelled-row--low .module-rank-panel__denominator-labelled-row-legend:has(.module-rank-panel__marketplace-logo--fanatics-collect) { background:#111; }

.module-popup__thumb-grid>* { min-width:0; }
.module-rank-panel__app-layer-meta-tile-value.u-tabular-number { overflow:visible; text-overflow:clip; white-space:nowrap; }

@media (max-width:1100px) {
.module-popup__thumb-grid { grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); }
}
@media (max-width:1080px) {
.module-rank-panel__denominator-labelled-row { grid-template-columns:minmax(0,1.5fr)104px 100px 68px 104px; }
.module-rank-panel__denominator-labelled-row-name { display:none; }
}
@media (max-width:820px) {
.module-rank-panel__ranked-thumbnail-list-gap-row { grid-template-columns:minmax(0,1fr)78px; gap:8px 10px; row-gap:6px; }
.module-rank-panel__ranked-thumbnail-list-gap-row-bar { grid-column:1/-1; order:3; }
.module-rank-panel__ranked-thumbnail-list-gap-row-name { grid-column:1/-1; order:4; }
}
@media (max-width:720px) {
.module-rank-panel__denominator-labelled-row { grid-template-columns:minmax(0,1fr)auto; gap:8px 10px; padding:11px; }
.module-rank-panel__denominator-labelled-row-meta { grid-column:1/-1; }
.module-rank-panel__denominator-labelled-row-picture { flex-direction:row; align-items:baseline; gap:7px; grid-column:1; flex-wrap:wrap; }
.module-rank-panel__denominator-labelled-row-title { flex-direction:row; align-items:flex-end; gap:6px; grid-column:2; text-align:right; }
.module-rank-panel__denominator-labelled-row-description { justify-self:start; grid-column:1/-1; }
.module-rank-panel__denominator-labelled-row-button { grid-column:1/-1; width:100%; box-sizing:border-box; padding:11px 10px; font-size:14px; }
.module-rank-panel__denominator-labelled-row-title b { font-size:16px; }
.module-rank-panel__denominator-labelled-row-name { display:none; }
.module-rank-panel__denominator-labelled-row-legend { width:62px; height:40px; border-radius:7px; max-width:80px; padding:4px 6px; }
.module-rank-panel__denominator-labelled-row-heading { gap:4px; }
}
@media (max-width:640px) {
.module-rank-panel__ranked-thumbnail-list-standout-compare { padding:12px; }
.module-rank-panel__ranked-thumbnail-list-standout-compare .module-rank-panel__overall-score--withpic .module-rank-panel__overall-score-head { display:grid; grid-template-columns:auto auto; grid-template-areas:"pic tile" "meta meta"; justify-content:start; align-items:start; gap:12px 14px; }
.module-rank-panel__ranked-thumbnail-list-standout-compare .module-rank-panel__overall-score--withpic .module-rank-panel__overall-score-head::after { display:none; }
.module-rank-panel__ranked-thumbnail-list-standout-compare .module-rank-panel__overall-score-pic { grid-area:pic; width:114px; }
.module-rank-panel__ranked-thumbnail-list-standout-compare .module-rank-panel__overall-score-pic>a { width:84px; }
.module-rank-panel__ranked-thumbnail-list-standout-compare .module-rank-panel__overall-score--withpic .module-rank-panel__overall-score-tile { grid-area:tile; }
.module-rank-panel__ranked-thumbnail-list-standout-compare .module-rank-panel__overall-score--withpic .module-rank-panel__overall-score-meta { grid-area:meta; flex:none; width:100%; }
.module-rank-panel__denominator-labelled-row { grid-template-columns:minmax(0,1fr)auto; gap:6px 10px; }
.module-rank-panel__denominator-labelled-row-bar { grid-column:1/-1; order:3; }
.module-rank-panel__denominator-labelled-row-value { justify-self:end; }
.module-rank-panel__ranked-thumbnail-list-standout-compare-host { padding:12px; }
.module-rank-panel__ranked-thumbnail-list-standout-compare-extra { flex-direction:column; }
.module-rank-panel__ranked-thumbnail-list-standout-compare-ethumb { flex:0 0 auto; width:120px; align-self:center; }
.module-rank-panel__ranked-thumbnail-list-standout-compare-row { grid-template-columns:63px minmax(0,1fr); grid-template-areas:"pic body" "pic bar"; min-height:0; gap:4px 10px; align-items:stretch; }
.module-rank-panel__ranked-thumbnail-list-standout-compare-rowpic { width:63px; align-self:center; }
.module-rank-panel__ranked-thumbnail-list-standout-compare-rowbody { justify-content:center; }
.module-rank-panel__ranked-thumbnail-list-standout-compare-rowbar { align-self:stretch; }
.module-popup__thumb-grid { grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px; }
}
@media (max-width:520px) {
.module-rank-panel__ranked-thumbnail-list-meta { min-width:0; }
.module-rank-panel__dial { flex-direction:column; align-items:flex-start; }
}
@media (max-width:400px) {
.module-rank-panel__denominator-labelled-row { grid-template-columns:1fr; }
.module-rank-panel__denominator-labelled-row-picture { grid-column:1; align-items:flex-start; text-align:left; }
.module-rank-panel__denominator-labelled-row-title { grid-column:1; align-items:flex-start; text-align:left; flex-direction:row; gap:7px; }
}
@media (prefers-reduced-motion:no-preference) {
.module-rank-panel__ranked-thumbnail-list-bar-footnote.is-rv-anim-go { transform-origin:left center; animation:tg-bar-fill 1.5s linear .2s both; }
:is(.module-rank-panel__distribution-bar-row, .module-rank-panel__ranked-thumbnail-list-bar, .module-rank-panel__group-value-compare-cell, .module-rank-panel__badge-bar-row, .module-rank-panel__ranked-thumbnail-list-row, .module-rank-panel__attribute-distribution-list>li):nth-child(1) :is(.module-rank-panel__distribution-bar-fill, .module-rank-panel__ranked-thumbnail-list-bar-footnote, .module-rank-panel__attribute-distribution-bar-fill, .module-rank-panel__attribute-distribution-track>i, .module-rank-panel__bar-row-track>i, .module-rank-panel__group-value-compare-cell-bar>span) { animation-delay:.20s; }
:is(.module-rank-panel__distribution-bar-row, .module-rank-panel__ranked-thumbnail-list-bar, .module-rank-panel__group-value-compare-cell, .module-rank-panel__badge-bar-row, .module-rank-panel__ranked-thumbnail-list-row, .module-rank-panel__attribute-distribution-list>li):nth-child(2) :is(.module-rank-panel__distribution-bar-fill, .module-rank-panel__ranked-thumbnail-list-bar-footnote, .module-rank-panel__attribute-distribution-bar-fill, .module-rank-panel__attribute-distribution-track>i, .module-rank-panel__bar-row-track>i, .module-rank-panel__group-value-compare-cell-bar>span) { animation-delay:.24s; }
:is(.module-rank-panel__distribution-bar-row, .module-rank-panel__ranked-thumbnail-list-bar, .module-rank-panel__group-value-compare-cell, .module-rank-panel__badge-bar-row, .module-rank-panel__ranked-thumbnail-list-row, .module-rank-panel__attribute-distribution-list>li):nth-child(3) :is(.module-rank-panel__distribution-bar-fill, .module-rank-panel__ranked-thumbnail-list-bar-footnote, .module-rank-panel__attribute-distribution-bar-fill, .module-rank-panel__attribute-distribution-track>i, .module-rank-panel__bar-row-track>i, .module-rank-panel__group-value-compare-cell-bar>span) { animation-delay:.28s; }
:is(.module-rank-panel__distribution-bar-row, .module-rank-panel__ranked-thumbnail-list-bar, .module-rank-panel__group-value-compare-cell, .module-rank-panel__badge-bar-row, .module-rank-panel__ranked-thumbnail-list-row, .module-rank-panel__attribute-distribution-list>li):nth-child(4) :is(.module-rank-panel__distribution-bar-fill, .module-rank-panel__ranked-thumbnail-list-bar-footnote, .module-rank-panel__attribute-distribution-bar-fill, .module-rank-panel__attribute-distribution-track>i, .module-rank-panel__bar-row-track>i, .module-rank-panel__group-value-compare-cell-bar>span) { animation-delay:.32s; }
:is(.module-rank-panel__distribution-bar-row, .module-rank-panel__ranked-thumbnail-list-bar, .module-rank-panel__group-value-compare-cell, .module-rank-panel__badge-bar-row, .module-rank-panel__ranked-thumbnail-list-row, .module-rank-panel__attribute-distribution-list>li):nth-child(5) :is(.module-rank-panel__distribution-bar-fill, .module-rank-panel__ranked-thumbnail-list-bar-footnote, .module-rank-panel__attribute-distribution-bar-fill, .module-rank-panel__attribute-distribution-track>i, .module-rank-panel__bar-row-track>i, .module-rank-panel__group-value-compare-cell-bar>span) { animation-delay:.36s; }
:is(.module-rank-panel__distribution-bar-row, .module-rank-panel__ranked-thumbnail-list-bar, .module-rank-panel__group-value-compare-cell, .module-rank-panel__badge-bar-row, .module-rank-panel__ranked-thumbnail-list-row, .module-rank-panel__attribute-distribution-list>li):nth-child(6) :is(.module-rank-panel__distribution-bar-fill, .module-rank-panel__ranked-thumbnail-list-bar-footnote, .module-rank-panel__attribute-distribution-bar-fill, .module-rank-panel__attribute-distribution-track>i, .module-rank-panel__bar-row-track>i, .module-rank-panel__group-value-compare-cell-bar>span) { animation-delay:.40s; }
:is(.module-rank-panel__distribution-bar-row, .module-rank-panel__ranked-thumbnail-list-bar, .module-rank-panel__group-value-compare-cell, .module-rank-panel__badge-bar-row, .module-rank-panel__ranked-thumbnail-list-row, .module-rank-panel__attribute-distribution-list>li):nth-child(7) :is(.module-rank-panel__distribution-bar-fill, .module-rank-panel__ranked-thumbnail-list-bar-footnote, .module-rank-panel__attribute-distribution-bar-fill, .module-rank-panel__attribute-distribution-track>i, .module-rank-panel__bar-row-track>i, .module-rank-panel__group-value-compare-cell-bar>span) { animation-delay:.44s; }
:is(.module-rank-panel__distribution-bar-row, .module-rank-panel__ranked-thumbnail-list-bar, .module-rank-panel__group-value-compare-cell, .module-rank-panel__badge-bar-row, .module-rank-panel__ranked-thumbnail-list-row, .module-rank-panel__attribute-distribution-list>li):nth-child(8) :is(.module-rank-panel__distribution-bar-fill, .module-rank-panel__ranked-thumbnail-list-bar-footnote, .module-rank-panel__attribute-distribution-bar-fill, .module-rank-panel__attribute-distribution-track>i, .module-rank-panel__bar-row-track>i, .module-rank-panel__group-value-compare-cell-bar>span) { animation-delay:.48s; }
:is(.module-rank-panel__distribution-bar-row, .module-rank-panel__ranked-thumbnail-list-bar, .module-rank-panel__group-value-compare-cell, .module-rank-panel__badge-bar-row, .module-rank-panel__ranked-thumbnail-list-row, .module-rank-panel__attribute-distribution-list>li):nth-child(9) :is(.module-rank-panel__distribution-bar-fill, .module-rank-panel__ranked-thumbnail-list-bar-footnote, .module-rank-panel__attribute-distribution-bar-fill, .module-rank-panel__attribute-distribution-track>i, .module-rank-panel__bar-row-track>i, .module-rank-panel__group-value-compare-cell-bar>span) { animation-delay:.52s; }
:is(.module-rank-panel__distribution-bar-row, .module-rank-panel__ranked-thumbnail-list-bar, .module-rank-panel__group-value-compare-cell, .module-rank-panel__badge-bar-row, .module-rank-panel__ranked-thumbnail-list-row, .module-rank-panel__attribute-distribution-list>li):nth-child(10) :is(.module-rank-panel__distribution-bar-fill, .module-rank-panel__ranked-thumbnail-list-bar-footnote, .module-rank-panel__attribute-distribution-bar-fill, .module-rank-panel__attribute-distribution-track>i, .module-rank-panel__bar-row-track>i, .module-rank-panel__group-value-compare-cell-bar>span) { animation-delay:.56s; }
:is(.module-rank-panel__distribution-bar-row, .module-rank-panel__ranked-thumbnail-list-bar, .module-rank-panel__group-value-compare-cell, .module-rank-panel__badge-bar-row, .module-rank-panel__ranked-thumbnail-list-row, .module-rank-panel__attribute-distribution-list>li):nth-child(11) :is(.module-rank-panel__distribution-bar-fill, .module-rank-panel__ranked-thumbnail-list-bar-footnote, .module-rank-panel__attribute-distribution-bar-fill, .module-rank-panel__attribute-distribution-track>i, .module-rank-panel__bar-row-track>i, .module-rank-panel__group-value-compare-cell-bar>span) { animation-delay:.60s; }
:is(.module-rank-panel__distribution-bar-row, .module-rank-panel__ranked-thumbnail-list-bar, .module-rank-panel__group-value-compare-cell, .module-rank-panel__badge-bar-row, .module-rank-panel__ranked-thumbnail-list-row, .module-rank-panel__attribute-distribution-list>li):nth-child(n+12) :is(.module-rank-panel__distribution-bar-fill, .module-rank-panel__ranked-thumbnail-list-bar-footnote, .module-rank-panel__attribute-distribution-bar-fill, .module-rank-panel__attribute-distribution-track>i, .module-rank-panel__bar-row-track>i, .module-rank-panel__group-value-compare-cell-bar>span) { animation-delay:.64s; }
}
@media (prefers-reduced-motion:reduce) {
.module-rank-panel__ranked-thumbnail-list-gap-row-bar i { animation:none; }
.module-rank-panel__denominator-labelled-row-bar i { animation:none; }
.module-rank-panel__rate-bar-fill { animation:none; }
.module-rank-panel__overall-score--circle .module-rank-panel__overall-score-tile { animation:none; }
.module-rank-panel__overall-score-seg-pin { animation:none; }
.module-rank-panel__rate-bar-marker { animation:none; }
.module-rank-panel__overall-score-seg-caption { animation:none; }
.module-rank-panel__rate-bar-marker-cap { animation:none; }
.module-rank-panel__denominator-labelled-row-bar>i { animation:none; }
.module-rank-panel__ranked-thumbnail-list-gap-row-bar>i { animation:none; }
}
@media (scripting:none) {
.module-rank-panel__denominator-labelled-row-bar>i { animation:none; }
.module-rank-panel__ranked-thumbnail-list-gap-row-bar>i { animation:none; }
}

.module-popup__thumb-image--none { border:0; background:transparent; }
.module-popup__thumb-image--none .module-popup__thumb-title { z-index:2; }
.module-popup__thumb-title--value { white-space:normal; line-height:1.25; padding-bottom:4px; }
.module-popup__thumb-title--value>b { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-weight:700; white-space:normal; overflow:hidden; }
.module-popup__thumb-title--value>em { display:block; font-style:normal; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.module-rank-panel__ranked-thumbnail-list-gap-row--current .module-rank-panel__ranked-thumbnail-list-gap-row-content { background:var(--c1); color:#fff; }
.module-rank-panel__ranked-thumbnail-list-gap-row--separator .module-rank-panel__ranked-thumbnail-list-gap-row-content { background:color-mix(in srgb,var(--c5)22%,transparent); color:var(--c5); }
.module-popup__thumb-image img { -webkit-user-drag:none; pointer-events:none; }
.module-popup__thumb-image span { -webkit-user-drag:none; pointer-events:none; }
td.u-tabular-number { font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }
.module-popup__card-image-tile.module-popup__thumb-image { transition: border-color .15s; }
.module-popup__card-image-tile.module-popup__thumb-image:hover, .module-popup__card-image-tile.module-popup__thumb-image:focus-visible { transform: none; box-shadow: none; }
.module-rank-panel__versus-compare-side-picture.module-popup__thumb-image { transition: none; }
.module-rank-panel__versus-compare-side:hover .module-rank-panel__versus-compare-side-picture.module-popup__thumb-image, .module-rank-panel__versus-compare-side:focus-visible .module-rank-panel__versus-compare-side-picture.module-popup__thumb-image { transform: none; box-shadow: none; }
.module-rank-panel__box-whisker-chart-title > .module-rank-panel__rate-bar-marker-cap {
  position: absolute;
  top: 100%;
  margin-left: 0;
  margin-top: 6px;
  transform: translateX(0);
}
.module-rank-panel__box-whisker-chart-title > .module-rank-panel__rate-bar-marker-cap--r {
  margin-left: 0;
  transform: translateX(3px);
}
.module-rank-panel__box-whisker-chart-title:has(> .module-rank-panel__rate-bar-marker-cap) {
  margin-bottom: 27px;
}
@media (max-width:640px) {
.module-rank-panel__box-whisker-chart .module-rank-panel__rate-bar-marker-cap { display: none; }
.module-rank-panel__box-whisker-chart-title:has(> .module-rank-panel__rate-bar-marker-cap) { margin-bottom: 0; }
}

.module-rank-panel__dial { cursor: auto; }
.module-rank-panel__versus-compare-side-picture.module-popup__thumb-image img { transition: none; }
.module-rank-panel__versus-compare-side:hover .module-rank-panel__versus-compare-side-picture.module-popup__thumb-image img, .module-rank-panel__versus-compare-side:focus-visible .module-rank-panel__versus-compare-side-picture.module-popup__thumb-image img {
  transform: none;
  box-shadow: none;
}
.module-rank-panel__ranked-thumbnail-list-standout-compare-rowbh > .module-rank-panel__rate-bar-value {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

@media (max-width: 760px) {
.module-rank-panel__rate-bar-value { white-space: normal; min-width: 0; word-break: keep-all; }
.module-rank-panel__rate-bar-item { min-width: 0; }
}
.module-rank-panel__standing-self { display:block; width:100%; }
.module-rank-panel__standing-peer { display:flex; gap:14px; align-items:flex-start; margin-top:18px; padding-top:16px; border-top:1px solid var(--color-border,#e2e8f0); }
.module-rank-panel__standing-peer-thumb { flex:0 0 auto; display:block; width:64px; aspect-ratio:745/1040; border-radius:6px; overflow:hidden; border:1px solid var(--color-border,#e2e8f0); background:#f1f5f9; box-shadow:0 4px 12px rgba(15,23,42,.12); transition:transform .2s cubic-bezier(.18,.75,.28,1),box-shadow .2s; }
.module-rank-panel__standing-peer-thumb:hover { transform:translateY(-3px); box-shadow:0 12px 22px -8px rgba(15,23,42,.3); }
.module-rank-panel__standing-peer-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.module-rank-panel__standing-peer-body { flex:1 1 auto; min-width:0; }
.module-rank-panel__standing-peer-headline { margin:0; font-size:15px; font-weight:700; line-height:1.45; color:var(--color-text-body,#334155); word-break:keep-all; }
.module-rank-panel__standing-peer-headline b { color:var(--color-text-primary,#1e293b); font-weight:800; }
.module-rank-panel__standing-peer-note { margin:5px 0 0; font-size:13.5px; line-height:1.5; color:var(--color-text-muted,#64748b); word-break:keep-all; }
@media (max-width:600px) {
.module-rank-panel__standing-peer-thumb { width:52px; }
.module-rank-panel__standing-peer-headline { font-size:14px; }
}
.module-rank-panel__standing .module-rank-panel__overall-score--tile .module-rank-panel__overall-score-value { font-size:min(48px, calc(166px / var(--rank-standing-panel-len, 3))); }
.module-rank-panel__gap-bar .module-rank-panel__denominator-labelled-row {
  grid-template-columns: minmax(0,1fr) minmax(0,2.2fr);
  cursor: pointer;

  border: 0;
}
.module-rank-panel__gap-bar .module-rank-panel__denominator-labelled-row:not(:has(.module-rank-panel__denominator-labelled-row-hitarea)) { cursor: default; }
.module-rank-panel__gap-bar .module-rank-panel__denominator-labelled-row-bar {
  display: flex; align-items: center; gap: 8px;
  height: 22px; overflow: visible;

  padding-right: 78px;
  position: relative;
  z-index: 0;
  background: transparent;
}
.module-rank-panel__gap-bar .module-rank-panel__denominator-labelled-row-bar::before {
  content: "";
  position: absolute;
  inset: 0 78px 0 0;
  border-radius: 99px;
  background: var(--line2);
  z-index: -1;
  pointer-events: none;
}
.module-rank-panel__gap-bar .module-rank-panel__denominator-labelled-row-bar > i {
  flex: 0 0 var(--w); width: auto; height: 11px; border-radius: 99px;
}
.module-rank-panel__gap-bar .module-rank-panel__denominator-labelled-row-bar-value {
  flex: 0 0 auto; font-size: 15px; font-weight: 800; letter-spacing: -.02em;
  line-height: 1; white-space: nowrap; color: var(--ink);
}
.module-rank-panel__gap-bar .module-rank-panel__denominator-labelled-row--current .module-rank-panel__denominator-labelled-row-bar > i { background: var(--acc); opacity: 1; }
.module-rank-panel__gap-bar .module-rank-panel__denominator-labelled-row--current .module-rank-panel__denominator-labelled-row-bar-value { color: var(--acc-i); }
.module-rank-panel__gap-bar .module-rank-panel__denominator-labelled-row-value { white-space: nowrap; }
.module-rank-panel__gap-bar .module-rank-panel__denominator-labelled-row-value em { display: inline; }
.module-rank-panel__denominator-labelled-row-here { display:inline-block; margin-left:7px; font-size:13px; font-weight:700; color:var(--acc-i); background:var(--acc-s); border-radius:999px; padding:1px 8px; white-space:nowrap; }
.module-rank-panel__denominator-labelled-row--baseline .module-rank-panel__denominator-labelled-row-value em { color:var(--mut); }
@media (max-width:640px) {
.module-rank-panel__gap-bar .module-rank-panel__denominator-labelled-row { grid-template-columns: minmax(0,1fr); }
.module-rank-panel__gap-bar .module-rank-panel__denominator-labelled-row-bar { grid-column: 1; order: 3; }
}
.module-rank-panel__denominator-labelled-row-baseline-tag { display:inline-block; margin-left:7px; font-size:13px; font-weight:600; color:var(--mut); white-space:nowrap; }
.module-rank-panel__value-representative-card:hover .module-rank-panel__chain-diagram-link-picture.module-popup__thumb-image, .module-rank-panel__value-representative-card:focus-visible .module-rank-panel__chain-diagram-link-picture.module-popup__thumb-image {
  transform: none;
  box-shadow: none;
  filter: none;
}
@media (scripting: none) {
[data-fx-hover="tilt-shine"] .module-popup__thumb-image { transition: transform .16s cubic-bezier(.18,.75,.28,1); }
[data-fx-hover="tilt-shine"] .module-popup__thumb-image:hover, [data-fx-hover="tilt-shine"] .module-popup__thumb-image:focus-visible { transform: translateY(-6px) scale(1.03); }
}
@media (scripting: none) and (prefers-reduced-motion: reduce) {
[data-fx-hover="tilt-shine"] .module-popup__thumb-image { transition: none; }
[data-fx-hover="tilt-shine"] .module-popup__thumb-image:hover, [data-fx-hover="tilt-shine"] .module-popup__thumb-image:focus-visible { transform: none; }
}
.module-rank-panel__overall-score-seg-caption + .module-rank-panel__overall-score-seg-track { margin-top:6px; }
.module-rank-panel__overall-score-seg-caption + .module-rank-panel__overall-score-seg-head { margin-top:6px; }
.u-dv-tier-1 { --dv-accent:#b91c1c; --dv-bg:#fef2f2; --dv-fg:#b91c1c; }
.u-dv-tier-2 { --dv-accent:#ea580c; --dv-bg:#fff7ed; --dv-fg:#c2410c; }
.u-dv-tier-3 { --dv-accent:#ca8a04; --dv-bg:#fefce8; --dv-fg:#a16207; }
.u-dv-tier-4 { --dv-accent:#65a30d; --dv-bg:#f7fee7; --dv-fg:#4d7c0f; }
.u-dv-tier-5 { --dv-accent:#16a34a; --dv-bg:#f0fdf4; --dv-fg:#15803d; }
.module-rank-panel__review, .module-rank-panel__overall-score, .module-rank-panel__rate-bar { --rv-accent:#e43917; --rv-track:#ddd; }
.module-rank-panel__review {
  margin:24px 0 32px; padding:26px 28px;
  border-radius:var(--color-radius-lg); background:#fff;
  box-shadow:0 2px 20px rgba(0,0,0,.08);
}
.module-rank-panel__review > .module-rank-panel__overall-score {
  margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--color-border);
}
.module-rank-panel__review > .module-rank-panel__rate-bar { margin-top:0; }
.module-rank-panel__review-cta { margin-top:22px; display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.module-rank-panel__review-cta-btn {
  display:inline-block; padding:11px 22px; border-radius:10px;
  background:var(--color-primary,#1d4ed8); color:#fff; font-weight:800; font-size:15px;
  text-decoration:none; transition:background .15s;
}
.module-rank-panel__review-cta-btn:hover { background:var(--color-primary-dark,#1e40af); color:#fff; }
.module-rank-panel__review-cta-notice { font-size:16px; font-weight:700; color:var(--color-text-muted); } /* HBS 09-28 · 11.5px → 13px · HBY 09-28 · 13px → 16px(안내 문장 = 내용 글자 · 지휘자 판정) */
.module-rank-panel__review-attribution { margin:18px 0 0; font-size:13px; color:var(--color-text-muted); line-height:1.5; } /* HBS 09-28 · 12px → 13px(뒤쪽 이기는 선언 · 출처) */
.module-rank-panel__overall-score { margin:0; }
.module-rank-panel__overall-score-head { display:flex; flex-wrap:wrap; gap:10px 20px; align-items:flex-start; }
.module-rank-panel__overall-score-tile {
  flex:0 0 auto; min-width:100px; max-width:210px;
  border-radius:6px; overflow:hidden; text-align:center;
  background:var(--rv-accent,#e43917); box-shadow:var(--color-shadow-sm);
}
.module-rank-panel__overall-score--tile .module-rank-panel__overall-score-tile { flex:0 0 110px; width:110px; min-width:0; max-width:110px; }
.module-rank-panel__overall-score--tile .module-rank-panel__overall-score-value { font-size:clamp(40px,8vw,48px); padding:12px 2px 10px; }
.module-rank-panel__overall-score--tile .module-rank-panel__overall-score-tile { display:flex; flex-direction:column; }
.module-rank-panel__overall-score--tile .module-rank-panel__overall-score-head { display:block; }
.module-rank-panel__overall-score--tile .module-rank-panel__overall-score-head::after { content:""; display:block; clear:both; }
.module-rank-panel__overall-score--tile .module-rank-panel__overall-score-tile { float:left; margin:0 20px 10px 0; min-height:110px; }
.module-rank-panel__overall-score--tile .module-rank-panel__overall-score-value { flex:1 1 auto; display:flex; align-items:center; justify-content:center; }
.module-rank-panel__overall-score--tile .module-rank-panel__overall-score-label { margin-top:auto; width:100%; box-sizing:border-box; }
.module-rank-panel__overall-score--tiercolor .module-rank-panel__overall-score-tile { background:var(--dv-accent,#64748b); }
.module-rank-panel__overall-score-value {
  display:block; padding:8px 0; color:#fff; font-weight:400;
  font-size:clamp(40px,8vw,52px); line-height:1; letter-spacing:0; font-variant-numeric:tabular-nums;
}
.module-rank-panel__overall-score-label {
  display:block; margin:0; padding:9px 10px;
  background:var(--color-text-primary,#1e293b); color:#fff;
  font-size:13px; font-weight:700; letter-spacing:.3px; line-height:1.35; word-break:keep-all;
}
.module-rank-panel__overall-score-label a { color:#fff; text-decoration:underline; text-underline-offset:2px; }
.module-rank-panel__overall-score-meta { flex:1 1 240px; min-width:0; text-align:left; }
.module-rank-panel__overall-score-delta { display:inline-block; margin-bottom:6px; padding:0; border-radius:0; font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; }
.module-rank-panel__overall-score-delta.module-rank-panel__chg-up { color:#d11507; background:rgba(209,21,7,.09); }
.module-rank-panel__overall-score-delta.module-rank-panel__chg-down { color:#1554d1; background:rgba(21,84,209,.09); }
.module-rank-panel__overall-score-delta-basis { font-weight:inherit; opacity:.72; }
.module-rank-panel__overall-score-summary { margin:0; font-size:16px; font-weight:500; color:var(--color-text-body); line-height:1.65; word-break:keep-all; }
.module-rank-panel__overall-score-attribution { margin:14px 0 0; font-size:13px; color:var(--color-text-muted); line-height:1.5; }
.module-rank-panel__overall-score--circle .module-rank-panel__overall-score-tile {
  width:100px; height:100px; min-width:0; max-width:none; padding:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center; box-shadow:none;

  background:conic-gradient(var(--color-primary,#1d4ed8) calc(var(--dv-pct,100) * 1%), var(--rv-track,#ddd) 0);
}
.module-rank-panel__overall-score--tiercolor.module-rank-panel__overall-score--circle .module-rank-panel__overall-score-tile {
  background:conic-gradient(var(--dv-accent,#64748b) calc(var(--dv-pct,100) * 1%), var(--color-border,#e2e8f0) 0);
}
.module-rank-panel__overall-score--circle .module-rank-panel__overall-score-value {
  display:flex; align-items:center; justify-content:center; width:72px; height:72px; padding:0;
  border-radius:50%; background:#fff; color:var(--color-primary-dark,#1557b0); font-size:23px; letter-spacing:0;
}
.module-rank-panel__overall-score--tiercolor.module-rank-panel__overall-score--circle .module-rank-panel__overall-score-value { color:var(--dv-fg,#334155); }
.module-rank-panel__overall-score--circle .module-rank-panel__overall-score-tile { animation:module-donut-fill 1.5s ease-out .2s both; animation-play-state:paused; }
.module-rank-panel__overall-score--badge { display:inline-block; margin:0; }
.module-rank-panel__overall-score--badge .module-rank-panel__overall-score-head { display:inline-flex; }
.module-rank-panel__overall-score--badge .module-rank-panel__overall-score-tile {
  min-width:0; max-width:none; border-radius:999px; overflow:visible; box-shadow:none;
}
.module-rank-panel__overall-score--badge .module-rank-panel__overall-score-value { padding:4px 14px; font-size:15px; line-height:1.5; letter-spacing:0; }
.module-rank-panel__overall-score--badge .module-rank-panel__overall-score-label { display:none; }
.module-rank-panel__overall-score--circle .module-rank-panel__overall-score-head { flex-direction:column; align-items:center; gap:8px 0; }
.module-rank-panel__overall-score--circle .module-rank-panel__overall-score-label { display:block; margin:0; padding:0; background:none; color:var(--color-text-body); text-align:center; font-size:13px; /* HBS 09-28 · 12.5px → 13px */ font-weight:700; letter-spacing:0; line-height:1.35; word-break:keep-all; }
.module-rank-panel__overall-score--circle .module-rank-panel__overall-score-label a { color:var(--color-primary-dark,#1e40af); text-decoration:underline dotted 1px; text-underline-offset:2px; }
.module-rank-panel__overall-score--circle .module-rank-panel__overall-score-fraction { display:block; margin-top:2px; text-align:center; font-size:13px; /* HBS 09-28 · 11.5px → 13px */ font-weight:700; color:var(--color-text-muted); font-variant-numeric:tabular-nums; }
.module-rank-panel__rate-bar { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
.module-rank-panel__rate-bar-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:6px; min-height:20px; }
.module-rank-panel__rate-bar-label { font-size:13.5px; font-weight:600; color:var(--color-text-body); word-break:keep-all; }
.module-rank-panel__rate-bar-label a { color:var(--color-primary-dark,#1e40af); font-weight:700; text-decoration:underline dotted 1px; text-underline-offset:3px; }
.module-rank-panel__rate-bar-label a:hover { text-decoration:underline; }
.module-rank-panel__rate-bar-value { font-size:14px; font-weight:800; color:var(--color-text-primary); font-variant-numeric:tabular-nums; white-space:nowrap; }
.module-rank-panel__rate-bar-track { height:13px; border-radius:7px; background:var(--rv-track,#ddd); overflow:hidden; }
.module-rank-panel__rate-bar-fill {
  display:block; height:100%; border-radius:7px; background:var(--rv-accent,#e43917);
  transform-origin:left center; animation:module-rate-bar-fill 1.5s linear .2s both;
  animation-play-state:paused;
}
.module-rank-panel__rate-bar--tiercolor .module-rank-panel__rate-bar-fill { background:var(--dv-accent,#94a3b8); }
@media (prefers-reduced-motion: reduce) {
.module-rank-panel__rate-bar-fill, .module-rank-panel__overall-score--circle .module-rank-panel__overall-score-tile { animation:none; }
}
.module-rank-panel__rate-bar-fill.module-rank-panel__rv-anim-wait, .module-rank-panel__overall-score--circle .module-rank-panel__overall-score-tile.module-rank-panel__rv-anim-wait { animation-play-state:paused; }
.module-rank-panel__rate-bar-fill.is-rv-anim-go, .module-rank-panel__overall-score--circle .module-rank-panel__overall-score-tile.is-rv-anim-go { animation-play-state:running; }
.module-rank-panel__rate-bar-attribution { margin:14px 0 0; font-size:13px; color:var(--color-text-muted); line-height:1.5; }
.module-rank-panel__rate-bar--dist .module-rank-panel__rate-bar-item { display:flex; align-items:center; gap:10px; }
.module-rank-panel__rate-bar--dist .module-rank-panel__rate-bar-head { flex:0 0 92px; display:block; margin:0; }
.module-rank-panel__rate-bar--dist .module-rank-panel__rate-bar-value { font-size:13px; } /* HBS 09-28 · 12.5px → 13px */
.module-rank-panel__rate-bar--dist .module-rank-panel__rate-bar-track { flex:1 1 auto; height:10px; border-radius:5px; }
.module-rank-panel__rate-bar--dist .module-rank-panel__rate-bar-count { flex:0 0 auto; font-size:13px; font-weight:700; color:var(--color-text-muted); font-variant-numeric:tabular-nums; }
.module-rank-panel__overall-score--segment { margin:0; }
.module-rank-panel__overall-score--segment .module-rank-panel__overall-score-head { display:block; }
.module-rank-panel__overall-score-seg { display:block; }
.module-rank-panel__overall-score-seg-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:6px; min-height:20px; }
.module-rank-panel__overall-score-seg-label { font-size:13.5px; font-weight:600; color:var(--color-text-body); word-break:keep-all; }
.module-rank-panel__overall-score-seg-track { position:relative; display:flex; height:13px; border-radius:7px; overflow:hidden; box-shadow:var(--color-shadow-sm); }
.module-rank-panel__overall-score-seg-cell { flex:1 1 20%; height:100%; background:var(--rv-accent,#e43917); }
.module-rank-panel__overall-score-seg-cell:nth-child(1) { background:color-mix(in srgb, var(--rv-accent,#e43917) 22%, #fff); }
.module-rank-panel__overall-score-seg-cell:nth-child(2) { background:color-mix(in srgb, var(--rv-accent,#e43917) 40%, #fff); }
.module-rank-panel__overall-score-seg-cell:nth-child(3) { background:color-mix(in srgb, var(--rv-accent,#e43917) 58%, #fff); }
.module-rank-panel__overall-score-seg-cell:nth-child(4) { background:color-mix(in srgb, var(--rv-accent,#e43917) 78%, #fff); }
.module-rank-panel__overall-score-seg-cell:nth-child(5) { background:var(--rv-accent,#e43917); }
.module-rank-panel__overall-score--tiercolor .module-rank-panel__overall-score-seg-cell { background:var(--dv-accent,#94a3b8); }
.module-rank-panel__overall-score-seg-cell:first-child { border-radius:7px 0 0 7px; }
.module-rank-panel__overall-score-seg-cell:last-child { border-radius:0 7px 7px 0; }
.module-rank-panel__overall-score-seg-pin { position:absolute; top:0; bottom:0; width:2px; transform:translateX(-50%); background:var(--color-text-primary,#1e293b); border-radius:1px; z-index:2; box-shadow:0 0 0 1px rgba(255,255,255,.6); }
.module-rank-panel__overall-score-seg-pin { animation:rv-anim-pos 1.5s linear .2s both; animation-play-state:paused; }
.module-rank-panel__overall-score-seg-caption { display:block; width:max-content; max-width:100%; white-space:nowrap; margin-top:8px; padding:3px 10px; border-left:3px solid var(--color-text-primary,#1e293b); border-radius:2px 10px 10px 2px; background:color-mix(in srgb, var(--color-text-primary,#1e293b) 7%, #fff); font-size:13px; /* HBS 09-28 · 12.5px → 13px */ font-weight:600; color:var(--color-text-body); word-break:keep-all; line-height:1.35; transform:translateX(-2px); }
.module-rank-panel__overall-score-seg-caption--r { border-left:0; border-right:3px solid var(--color-text-primary,#1e293b); border-radius:10px 2px 2px 10px; transform:translateX(2px); }
.module-rank-panel__overall-score-seg-caption strong { color:var(--color-text-primary); font-weight:800; }
.module-rank-panel__overall-score-seg-caption { animation:rv-anim-cap-l 1.5s linear .2s both; animation-play-state:paused; }
.module-rank-panel__overall-score-seg-caption--r { animation:rv-anim-cap-r 1.5s linear .2s both; animation-play-state:paused; }
.module-rank-panel__review > .module-rank-panel__overall-score--segment { margin:14px 0 0; padding:0; border:0; }
.module-rank-panel__rate-bar--bullet { padding-bottom:0; }
.module-rank-panel__review > .module-rank-panel__rate-bar--bullet { margin-top:16px; }
.module-rank-panel__rate-bar--bullet .module-rank-panel__rate-bar-track--bullet {
  position:relative; height:13px; border-radius:7px; overflow:hidden;
  background:linear-gradient(to right,
    color-mix(in srgb, var(--color-text-primary,#1e293b) 6%, #fff) 0 33.33%,
    color-mix(in srgb, var(--color-text-primary,#1e293b) 11%, #fff) 33.33% 66.66%,
    color-mix(in srgb, var(--color-text-primary,#1e293b) 17%, #fff) 66.66% 100%);
}
.module-rank-panel__rate-bar--bullet .module-rank-panel__rate-bar-fill { height:100%; margin-top:0; border-radius:7px; }
.module-rank-panel__rate-bar-marker { position:absolute; top:0; bottom:0; width:2px; transform:translateX(-50%); background:var(--color-text-primary,#1e293b); border-radius:1px; z-index:2; box-shadow:0 0 0 1px rgba(255,255,255,.6); }
.module-rank-panel__rate-bar-marker { animation:rv-anim-pos 1.5s linear .2s both; animation-play-state:paused; }
.module-rank-panel__rate-bar-marker-cap { display:block; width:max-content; max-width:100%; white-space:nowrap; margin-top:6px; padding:2px 9px; border-left:3px solid var(--color-text-primary,#1e293b); border-radius:2px 10px 10px 2px; background:color-mix(in srgb, var(--color-text-primary,#1e293b) 7%, #fff); font-size:13px; /* HBS 09-28 · 11.5px → 13px */ font-weight:700; color:var(--color-text-primary,#1e293b); line-height:1.35; word-break:keep-all; font-variant-numeric:tabular-nums; transform:translateX(-2px); }
.module-rank-panel__rate-bar-marker-cap--r { border-left:0; border-right:3px solid var(--color-text-primary,#1e293b); border-radius:10px 2px 2px 10px; transform:translateX(2px); }
.module-rank-panel__rate-bar-marker-cap { animation:rv-anim-cap-l 1.5s linear .2s both; animation-play-state:paused; }
.module-rank-panel__rate-bar-marker-cap--r { animation:rv-anim-mcap-r 1.5s linear .2s both; animation-play-state:paused; }
@media (prefers-reduced-motion: reduce) {
.module-rank-panel__overall-score-seg-pin, .module-rank-panel__overall-score-seg-caption, .module-rank-panel__rate-bar-marker-cap { animation:none; }
}
.module-rank-panel__overall-score-seg-pin.module-rank-panel__rv-anim-wait, .module-rank-panel__overall-score-seg-caption.module-rank-panel__rv-anim-wait, .module-rank-panel__rate-bar-marker-cap.module-rank-panel__rv-anim-wait { animation-play-state:paused; }
.module-rank-panel__overall-score-seg-pin.is-rv-anim-go, .module-rank-panel__overall-score-seg-caption.is-rv-anim-go, .module-rank-panel__rate-bar-marker-cap.is-rv-anim-go { animation-play-state:running; }
.module-rank-panel__review-donuts { display:flex; flex-wrap:wrap; gap:18px 30px; margin-top:20px; padding-top:18px; border-top:1px solid var(--color-border); }
.module-rank-panel__review-donut { flex:0 0 auto; }
.module-rank-panel__review-donuts .module-rank-panel__overall-score { margin:0; }
.module-rank-panel__review-donuts .module-rank-panel__overall-score--circle .module-rank-panel__overall-score-tile { width:100px; height:100px; }
.module-rank-panel__review-donuts .module-rank-panel__overall-score--circle .module-rank-panel__overall-score-value { width:72px; height:72px; font-size:22px; }
.module-rank-panel__review-donuts .module-rank-panel__overall-score--circle .module-rank-panel__overall-score-label { max-width:130px; }
@media (max-width:640px) {
.module-rank-panel__review-donuts .module-rank-panel__overall-score--circle .module-rank-panel__overall-score-tile { width:80px; height:80px; }
.module-rank-panel__review-donuts .module-rank-panel__overall-score--circle .module-rank-panel__overall-score-value { width:58px; height:58px; font-size:18px; }
.module-rank-panel__review { padding:18px; }
.module-rank-panel__overall-score-head { flex-direction:column; align-items:stretch; }
.module-rank-panel__overall-score--tile .module-rank-panel__overall-score-tile { align-self:flex-start; }
.module-rank-panel__overall-score--segment .module-rank-panel__overall-score-head { flex-direction:column; }
.module-rank-panel__overall-score-value { font-size:36px; }
.module-rank-panel__overall-score-meta { flex:1 1 auto; }
}
.module-rank-panel__deposit-cond-chip.u-dv-tier-1, .module-rank-panel__deposit-cond-chip.u-dv-tier-2, .module-rank-panel__deposit-cond-chip.u-dv-tier-3, .module-rank-panel__deposit-cond-chip.u-dv-tier-4, .module-rank-panel__deposit-cond-chip.u-dv-tier-5 {
  border-color:var(--dv-accent); background:var(--dv-bg); }
.module-rank-panel__rate-bar-label > a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.module-rank-panel__rate-bar-item--self {
  position: relative;
  padding-left: 11px;
}
.module-rank-panel__rate-bar-item--self::before {
  content: ""; position: absolute; left: 0; top: 2px; bottom: 2px;
  width: 3px; border-radius: 2px; background: currentColor; opacity: .75;
}
.module-rank-panel__rate-bar-item--self .module-rank-panel__rate-bar-label, .module-rank-panel__rate-bar-item--self .module-rank-panel__rate-bar-value { font-weight: 800 }
.module-rank-panel__rate-bar-item--self .module-rank-panel__rate-bar-track {
  box-shadow: 0 0 0 1.5px rgba(15, 23, 42, .22);
}
.module-rank-panel__rate-bar-item--faced { display: flex; align-items: flex-start; gap: 11px }
.module-rank-panel__rate-bar-face { flex: 0 0 auto; width: 46px; align-self: center }
.module-rank-panel__rate-bar-face-body { flex: 1 1 0; min-width: 0 }
.module-rank-panel__rate-bar-item--faced .module-rank-panel__rate-bar-head { flex-wrap: wrap }
.module-rank-panel__rate-bar-item--faced .module-rank-panel__rate-bar-value { white-space: normal }
@media (prefers-color-scheme: dark) {
.module-rank-panel__rate-bar-item--self .module-rank-panel__rate-bar-track { box-shadow: 0 0 0 1.5px rgba(226, 232, 240, .3) }
}
@keyframes tg-bar-fill {from{transform:scaleX(0)}}
@keyframes bar-fill-x {from{transform:scaleX(0)}}
@keyframes cta-arrow-bob-hover {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(10px); }
}
@keyframes module-donut-fill { from { --dv-pct:0; } }
@keyframes module-rate-bar-fill { from { transform:scaleX(0); } }
@keyframes rv-anim-pos { from { left:0; } }
@keyframes rv-anim-cap-l { from { margin-left:0; } }
@keyframes rv-anim-cap-r { from { margin-right:calc(100% - 100px); } }
@keyframes rv-anim-mcap-r { from { margin-right:calc(100% - 175px); } }
/* 🔴 animation 이 쓰는 @keyframes 정의(라이브 원문) — 없으면 요소가 «시작 상태로 굳는다» */
@keyframes bar-fill-x{from{transform:scaleX(0)}}
@keyframes tg-bar-fill{from{transform:scaleX(0)}}
@keyframes cta-arrow-bob-hover {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(10px); }
}
@keyframes module-donut-fill { from { --dv-pct:0; } }
@keyframes module-rate-bar-fill { from { transform:scaleX(0); } }
@keyframes rv-anim-pos { from { left:0; } }
@keyframes rv-anim-cap-l { from { margin-left:0; } }
@keyframes rv-anim-cap-r { from { margin-right:calc(100% - 100px); } }
@keyframes rv-anim-mcap-r { from { margin-right:calc(100% - 175px); } }

/* ── 라이브 결손 규칙 동기화 (sync-live) ── */
/* ── 동기화 블록 끝 (sync-live) ── */

/* hand-fix:rank-panel:블록 사이 여백 고르게 */
/* ── 「막대 간격이 다르다」의 정체 (2026-09-08 사용자 지적) ──
 * 값은 라이브와 같다 — 항목 사이 gap:16px · 목록 위 margin-top:16px.
 * 다른 것은 «셈법»이다: gap 은 안쪽 간격이라 상쇄가 없고, margin 은 바깥 여백이라
 * 앞 블록의 아래 여백과 상쇄된다.  앞 블록(module-overall-score)은 margin:0 이라
 * 상쇄할 것이 없어, 블록 사이와 항목 사이가 서로 다른 셈법으로 정해진다.
 * → 바로 뒤에 올 때만 위 여백을 없애 «한 가지 셈법»으로 정리한다.
 * 🔴 라이브에도 같은 성격의 예외가 이미 있다: .module-review-panel > .module-rate-bar { margin-top:0 }
 */
/* 🔴 0 으로 두면 두 블록이 붙어 버린다(첫 수정의 과교정).
   블록 사이는 «항목 사이(16px)보다 커야» 경계로 읽힌다 — 24px 로 둔다.
   그러면 셈법도 하나다: 항목 사이 16 · 블록 사이 24. */
.module-rank-panel__overall-score + .module-rank-panel__rate-bar { margin-top: 24px; }


/* ── v2.4(modules-v2.4-20260909) 에만 있던 규칙 보충 — 이름만 지금 이름으로 · 값은 v2.4 그대로 (2026-09-11 창D) ── */
.module-rank-panel__ranked-thumbnail-list-standout-compare-legend {
  margin:0 0 8px;
  font-size:13px;
  line-height:1.5;
  color:var(--color-text-muted,#64748b);
}
.module-rank-panel__ranked-thumbnail-list-standout-compare-gap {
  margin:0;
  font-size:13.5px;
  line-height:1.55;
  color:var(--color-text-body,#334155);
}
.module-rank-panel__overall-score-seg-pin.module-rank-panel__rv-anim-wait, .module-rank-panel__rate-bar-marker.module-rank-panel__rv-anim-wait, .module-rank-panel__overall-score-seg-caption.module-rank-panel__rv-anim-wait, .module-rank-panel__rate-bar-marker-cap.module-rank-panel__rv-anim-wait {
  animation-play-state:paused;
}
@media (prefers-reduced-motion: reduce) {
.module-rank-panel__overall-score-seg-pin, .module-rank-panel__rate-bar-marker, .module-rank-panel__overall-score-seg-caption, .module-rank-panel__rate-bar-marker-cap {
  animation:none;
}
}


/* ── 페이지가 쓰는데 규칙이 없던 이름 보충 — 본문은 modules-v2.4-20260909 그대로 (2026-09-11 창D) ── */
.module-rank-panel__denominator-labelled-row--baseline .denominator-labelled-row__value em {
  color:var(--mut);
}
.module-rank-panel__dv-tier-2 {
  --dv-accent:#ea580c;
  --dv-bg:#fff7ed;
  --dv-fg:#c2410c;
}
.module-rank-panel__dv-tier-5 {
  --dv-accent:#16a34a;
  --dv-bg:#f0fdf4;
  --dv-fg:#15803d;
}

/* ── 조 AL2(11-04) 리뷰 묶음 변형(.module-pros-cons__review-panel--compact = rank-panel standing + pros-cons 를 한 상자로 · 점수 상자 앞 상품 그림) — 사이트가 자손 선택자로 덮어쓰던 규칙을 모듈 변형으로 옮김.
   막대 색 = 변수(--review-interest-track · --review-interest-fill · 값은 사이트가 :root 에 둠 · 없으면 아래 기본값). 새 클래스만 추가(기존 rank-panel 규칙 바이트 동일) */
.module-pros-cons__review-panel--compact { margin: 0 0 8px; }
.module-pros-cons__review-panel--compact .module-rank-panel__overall-score-pic { margin: 0; width: 132px; align-self: flex-start; }
.module-pros-cons__review-panel--compact .module-rank-panel__overall-score-pic a { display: block; height: auto; aspect-ratio: auto; border: 0; background: none; box-shadow: none; border-radius: 0; padding: 0; }
.module-pros-cons__review-panel--compact .module-rank-panel__overall-score-pic img { position: static; inset: auto; display: block; width: 132px; height: auto; aspect-ratio: auto; object-fit: contain; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; box-sizing: border-box; }
.module-pros-cons__review-panel--compact [aria-label^="구매 관심도"] { background: var(--review-interest-track, #f0f0f0); }
.module-pros-cons__review-panel--compact [aria-label^="구매 관심도"] > .module-rank-panel__rate-bar-fill { background: var(--review-interest-fill, linear-gradient(90deg, #e53e3e, #c53030)); }
/* 조 BI: 채움 = product-card/script.js 가 data-bar-wait 를 붙였다 떼는 방식(view() 시간선은 셸 스크롤 상자에 묶여 가득으로 굳음) */
.module-pros-cons__review-panel--compact [aria-label^="구매 관심도"] > .module-rank-panel__rate-bar-fill { transition: width .7s ease-out; }
.module-pros-cons__review-panel--compact [aria-label^="구매 관심도"] > .module-rank-panel__rate-bar-fill[data-bar-wait] { width: 0 !important; }
@media (prefers-reduced-motion: reduce) { .module-pros-cons__review-panel--compact [aria-label^="구매 관심도"] > .module-rank-panel__rate-bar-fill { transition: none; } }
/* 링크 덮개(hitarea)가 없는 점수 상자에도 위 줄 pointer-events:none 이 걸려 글자 선택이 막힘 → 덮개 없는 상자 안 요소만 되돌림 */
.module-pros-cons__review-panel--compact .module-rank-panel__overall-score--tile > *:not(.module-rank-panel__overall-score-hitarea) { pointer-events: auto; }
.module-pros-cons__review-panel--compact .module-rank-panel__overall-score-tile,
.module-pros-cons__review-panel--compact .module-rank-panel__overall-score-summary { user-select: text; }

/* core/modules/display/pros-cons/style.css */
/* module-pros-cons — 박스 가족(§6-7) 형제 모듈
   출처: TCGGrail generatepress_child/core/template/modules/module-pros-cons.php (module_pros_cons())
        + assets/css/modules.css
   개명: 원본 클래스 밑동 `module-pros-cons*` → §9-3(클래스 밑동=모듈명) 준수를 위해 `module-pros-cons*` 로 소거.
   이관 범위: 원본 PHP(module_pros_cons)가 실제로 찍는 마크업·클래스에 대응하는 규칙만 포함한다.
        제외한 원본 규칙과 사유는 module.jsonc 의 "coverage_gap" 참조(다른 모듈과 결합된 규칙 1건).
   색 토큰(§10-4·§15): 이 모듈이 참조하던 CSS 변수(--color-border·--color-text-body·
        --color-text-muted)의 해석값(#e5e7eb·#374151·#6b7280)과 강점/확인할점 색(#bbf7d0 등)은
        모두 sites/tcggrail/tokens.jsonc 28 원시 토큰 어느 것과도 값이 일치하지 않는다(전수 대조
        실측 0건 — 1호 info-box 와 같은 상태). 원본 값을 하드코딩 + 근거 주석으로 이관했다.
   ※ 원본은 각주 앞 "※" 글리프를 마크업 리터럴(<span aria-hidden>)로 찍었으나, 이 모듈은 문안을
     마크업에 직접 쓰지 않는 원칙(§3-2)에 맞춰 형제 글리프들(체크·경고·+/− 부호)과 같은 방식으로
     CSS ::before 로 옮겼다 — 사람이 읽는 데이터가 아니라 장식 기호이므로 언어층 슬롯화 대상이
     아니라고 판단(1호 info-box 의 아이콘은 데이터 슬롯이었던 것과 달리, 이 기호는 원본에서도
     고정 리터럴이었다는 점이 근거). */

.module-pros-cons { margin: 18px 0; /* 근거: 원본 modules.css L12367 */ }

.module-pros-cons__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  /* 근거: 원본 L12368 */
}

.module-pros-cons__col {
  border: 1px solid var(--color-border); /* 근거: 원본 L12369 */
  border-radius: 12px;
  padding: 16px 18px;
  background: #fff;
}

.module-pros-cons__col--pros {
  border-color: #bbf7d0; /* 근거: 원본 L12370 */
  background: #f0fdf4;
}
.module-pros-cons__col--cons {
  border-color: #fecaca; /* 근거: 원본 L12371 */
  background: #fef2f2;
}

.module-pros-cons__title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
  /* 근거: 원본 L12372 */
}
.module-pros-cons__col--pros .module-pros-cons__title {
  color: #15803d; /* 근거: 원본 L12373 */
}
.module-pros-cons__col--pros .module-pros-cons__title::before {
  content: "\2714"; /* ✔ 근거: 원본 L12374 */
  margin-right: 6px;
}
.module-pros-cons__col--cons .module-pros-cons__title {
  color: #b91c1c; /* 근거: 원본 L12375 */
}
.module-pros-cons__col--cons .module-pros-cons__title::before {
  content: "\26A0"; /* ⚠ 근거: 원본 L12376 */
  margin-right: 6px;
}

.module-pros-cons__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  /* 근거: 원본 L12377 */
}
.module-pros-cons__item {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-body); /* 근거: 원본 L12378 */
  word-break: keep-all;
}
.module-pros-cons__item::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  /* 근거: 원본 L12379 */
}
.module-pros-cons__col--pros .module-pros-cons__item::before {
  content: "\FF0B"; /* ＋ 근거: 원본 L12380 */
  color: #16a34a;
}
.module-pros-cons__col--cons .module-pros-cons__item::before {
  content: "\FF0D"; /* － 근거: 원본 L12381 */
  color: #dc2626;
}

.module-pros-cons__note {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--color-text-muted); /* 근거: 원본 L12382 */
}
.module-pros-cons__note::before {
  content: "\203B\0020"; /* ※(공백 포함) — 원본 마크업 리터럴(aria-hidden span)을 CSS 장식
    기호로 이관(위 파일머리 설명). pseudo-element content 는 별도 처리 없이도 대다수 스크린
    리더 조합에서 낭독되지 않는다 — 원본의 aria-hidden 의도와 실질적으로 동등하다. */
}

@media (max-width: 640px) {
  .module-pros-cons__grid { grid-template-columns: 1fr; /* 근거: 원본 L12383 */ }
}

/* ── 라이브 결손 규칙 동기화 (sync-live) ── */
/* 라이브 원문 순서 · 우리에 없던 선택자만 */
  .module-pros-cons__review-panel>.module-pros-cons { margin-top:22px; }
  .module-pros-cons { margin:18px 0; }
  .module-pros-cons__grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .module-pros-cons__col { border:1px solid var(--color-border); border-radius:12px; padding:16px 18px; background:#fff; }
  .module-pros-cons__col--pros { border-color:#bbf7d0; background:#f0fdf4; }
  .module-pros-cons__col--cons { border-color:#fecaca; background:#fef2f2; }
  .module-pros-cons__title { margin:0 0 10px; font-size:17px; font-weight:800; letter-spacing:-.01em; }
  .module-pros-cons__col--pros .module-pros-cons__title { color:#15803d; }
  .module-pros-cons__col--pros .module-pros-cons__title::before { content:"\2714"; margin-right:6px; }
  .module-pros-cons__col--cons .module-pros-cons__title { color:#b91c1c; }
  .module-pros-cons__col--cons .module-pros-cons__title::before { content:"\26A0"; margin-right:6px; }
  .module-pros-cons__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
  .module-pros-cons__item { position:relative; padding-left:22px; font-size:16px; line-height:1.6; color:var(--color-text-body); word-break:keep-all; }
  .module-pros-cons__item::before { position:absolute; left:0; top:0; font-weight:800; }
  .module-pros-cons__col--pros .module-pros-cons__item::before { content:"\FF0B"; color:#16a34a; }
  .module-pros-cons__col--cons .module-pros-cons__item::before { content:"\FF0D"; color:#dc2626; }
  .module-pros-cons__note { margin:12px 0 0; font-size:14px; color:var(--color-text-muted); }
@media (max-width:640px) {
  .module-pros-cons__grid { grid-template-columns:1fr; }
}
/* ── 동기화 블록 끝 (sync-live) ── */

.module-pros-cons__review-panel--compact .module-pros-cons { margin-top: 12px; }   /* 조 AL2: 리뷰 묶음 변형(rank-panel/style.css 끝 블록)의 pros-cons 위 간격 — 위 .module-pros-cons__review-panel>.module-pros-cons(22px)보다 뒤에 와야 함 */

/* 조 CT(11-06 · 사용자 «장점·단점 중 1개만 있으면 전체 너비로»): 카드가 1개뿐이면 데스크톱에서도 한 열(전체 폭). 2개일 때 규칙은 위 그대로(출력·치수 변화 0) */
.module-pros-cons__grid:has(> .module-pros-cons__col:only-child) { grid-template-columns: 1fr; }

/* core/modules/display/stat-card/style.css */

@media (max-width: 768px) {
}
@media (prefers-reduced-motion: reduce) {
}
@media (max-width: 768px) and (min-width: 481px) {
}
@media (max-width: 480px) {
}
.module-stat-card::after { content: "→"; position: absolute; right: 12px; bottom: 12px; font-size: 13px; font-weight: 800; line-height: 1; color: var(--acc-i); opacity: 1; transition: opacity .15s, transform .15s; pointer-events: none; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 999px; background: var(--acc-s); }
.module-stat-card:hover::after, .module-stat-card:focus-visible::after { opacity: 1; transform: translateX(2px); background: var(--acc); color: #fff; }
.module-stat-card::after {
  display: grid; place-items: center; width: 19px; height: 19px; border-radius: 999px; background: var(--acc-s); color: var(--acc-i); opacity: .55; content: "\2192"; position: absolute; right: 12px; bottom: 12px; font-size: 13px; font-weight: 800; line-height: 1; transition: opacity .15s, transform .15s; pointer-events: none;
}
.module-stat-card:hover::after, .module-stat-card:focus-visible::after { background: var(--acc); color: #fff; opacity: 1; transform: translateX(2px); }
.module-stat-card__value { display: block; font-size: 16px; font-weight: 800; margin-bottom: 8px; text-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 🔴 2026-09-23 color 제거 — 파일 끝 라이브 정본 블록과 중복(게이트 지시: 정본 쪽 값으로 맞춘다) */ }
.module-stat-card__icon { font-size: 36px; margin-bottom: 10px; line-height: 1; text-align: center; }
.module-stat-card__label { font-size: 1rem; font-weight: 700; color: #6c757d; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .3px; display: block; }
@media (prefers-reduced-motion: reduce) {
}

.module-stat-card__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin: 24px 0;
}
/* 🔴 2026-09-13 «화면 너비로 열 수를 정하던 규칙 제거»(사용자 승인 · card-grid 와 같은 사유)
   사이드바가 768px 에서 사라지므로 «창이 좁아질 때 본문 상자는 넓어진다»(실측 489px → 717px).
   화면 너비로 1열을 강제하면 가장 넓은 자리에서 카드 하나가 상자를 다 먹는다.
   최소폭 보장은 위 repeat(auto-fit, minmax(...)) 가 이미 한다. 되돌리기 = style.css.bak_20260913-열수 */
@media (prefers-reduced-motion: reduce) {
.module-stat-card, .module-stat-card::before, .module-stat-card::after {
        transition: none !important;
    }
.module-stat-card:hover, .module-stat-card__step:hover {
        transform: none !important;
    }
.module-stat-card.module-stat-card__shine::before {
        animation: none;
    }
}
@media (max-width: 768px) and (min-width: 481px) {
.module-stat-card__grid--stat:not(.module-stat-card__grid--cols-1) {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}
@media (max-width: 480px) {
.module-stat-card__grid--stat:not(.module-stat-card__grid--cols-1) {
        grid-template-columns: 1fr;
    }
}
.module-stat-card { position: relative; }
.module-stat-card::after {
  content: "\2192";
  position: absolute; right: 12px; bottom: 12px;
  font-size: 13px; font-weight: 800; line-height: 1;
  color: var(--acc-i); opacity: .55; transition: opacity .15s, transform .15s;
  pointer-events: none;
}
.module-stat-card:hover::after, .module-stat-card:focus-visible::after { opacity: 1; transform: translateX(2px); }
.module-stat-card::after { content: "→"; }
.module-stat-card::after {
  display: grid; place-items: center;
  width: 19px; height: 19px; border-radius: 999px;
  background: var(--acc-s); color: var(--acc-i); opacity: 1;
}
.module-stat-card--link::after { content: none; }
.module-stat-card:hover::after, .module-stat-card:focus-visible::after { background: var(--acc); color: #fff; opacity: 1; }
.module-stat-card__value {
  display: block;
  font-size: 2.5rem;
  font-weight: 900;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 🔴 2026-09-23 color 제거 — 파일 끝 라이브 정본 블록과 중복(게이트 지시: 정본 쪽 값으로 맞춘다) */ }
.module-stat-card__icon {
  font-size: 28px;
  margin-bottom: 8px;
  line-height: 1;
}
.module-stat-card__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.module-stat-card__value {
  font-size: 16px;
  font-weight: 800; /* 🔴 2026-09-23 color 제거 — 파일 끝 라이브 정본 블록과 중복(게이트 지시: 정본 쪽 값으로 맞춘다) */ }
.module-stat-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.12);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;

    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.module-stat-card__icon {
    font-size: 36px;
    line-height: 1;
    margin-bottom: 10px;
    text-align: center;
}
.module-stat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 30px rgba(79, 70, 229, 0.2);
}
.module-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(79, 70, 229, 0.1), transparent);
    transition: all 0.8s ease;
}
.module-stat-card:hover::before {
    left: 100%;
}
a.module-stat-card:focus-visible {
    outline: 2px solid var(--color-primary, #1a73e8);
    outline-offset: -2px;
}
a.module-stat-card, a.module-stat-card__result, a.module-stat-card__method, .module-stat-card--link, .module-stat-card__result--link, .module-stat-card__method--link {
    text-decoration: none;
    color: inherit;
}
a.module-stat-card:hover, a.module-stat-card__result:hover, a.module-stat-card__method:hover, .module-stat-card--link:hover, .module-stat-card__result--link:hover, .module-stat-card__method--link:hover {
    text-decoration: none;
    color: inherit;
}
.module-stat-card__title, .module-stat-card__result-title, .module-stat-card__method-title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 8px;
    color: #1a73e8;
}
.module-stat-card__number, .module-stat-card__value {
    display: block;
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 🔴 2026-09-23 color 제거 — 파일 끝 라이브 정본 블록과 중복(게이트 지시: 정본 쪽 값으로 맞춘다) */ }
.module-stat-card__label {
    font-size: 1rem;
    font-weight: 700;
    color: #6c757d;
    margin-bottom: 4px;
    display: block;
}
.module-stat-card__desc {
    font-size: 1rem;
    color: #4b5563;
    display: block;
}
.module-stat-card--red    .module-stat-card__value { color: #dc2626; }
.module-stat-card--blue   .module-stat-card__value { color: #2563eb; }
.module-stat-card--gold   .module-stat-card__value { color: #d97706; }
.module-stat-card--green  .module-stat-card__value { color: #059669; }
.module-stat-card--orange .module-stat-card__value { color: #ea580c; }
.module-stat-card--silver .module-stat-card__value { color: #475569; }
.module-stat-card--gray   .module-stat-card__value { color: #475569; }
.module-stat-card--purple .module-stat-card__value { color: #9333ea; }
.module-stat-card.module-stat-card__shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: stat-shine 3s ease-in-out infinite;
}
.module-stat-card__go, .module-stat-card__result-go, .module-stat-card__method-go {
    margin-top: 8px; text-align: right;
    font-size: 13px; /* HBS 09-28 · 12.5px → 13px */ font-weight: 700; color: var(--color-primary-dark);
}
.module-stat-card__go::after, .module-stat-card__result-go::after, .module-stat-card__method-go::after {
    content: ' →'; display: inline-block; transition: transform .18s ease;
}
.module-stat-card--link:hover .module-stat-card__go::after, .module-stat-card__result--link:hover .module-stat-card__result-go::after, .module-stat-card__method--link:hover .module-stat-card__method-go::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
.module-stat-card__go::after, .module-stat-card__result-go::after, .module-stat-card__method-go::after { transition: none; }
}
.module-stat-card--red-value .module-stat-card__value { color: #dc2626; }

/* ── 코너 링크 화살표 규칙(지휘자 일괄 · 2026-09-07) ── */
/* ① 링크가 아니면 코너 화살표 없음 */
.module-stat-card:not(a)::after,
.module-stat-card__app-layer-cross-axis-summary-link:not(a)::after,
.module-stat-card__affiliate-marketplace-offer:not(a)::after,
.module-stat-card__app-layer-meta-tile:not(a)::after,
.module-stat-card__versus-compare-panel:not(a)::after,
.module-stat-card__app-layer-data-story-tile:not(a)::after,
.module-stat-card__bento-grid-item:not(a)::after,
a.module-stat-card:not([href])::after,
a.module-stat-card__app-layer-cross-axis-summary-link:not([href])::after,
a.module-stat-card__affiliate-marketplace-offer:not([href])::after,
a.module-stat-card__app-layer-meta-tile:not([href])::after,
a.module-stat-card__versus-compare-panel:not([href])::after,
a.module-stat-card__app-layer-data-story-tile:not([href])::after,
a.module-stat-card__bento-grid-item:not([href])::after { content: none; }
/* ② 카드 안에 CTA 버튼이 있으면 코너 화살표 없음 — 버튼에 이미 화살표가 붙어 있다 */
.module-stat-card:has(.module-stat-card__affiliate-marketplace-offer-visit-button)::after,
.module-stat-card:has(.module-stat-card__cta)::after,
.module-stat-card:has(.module-stat-card__go)::after,
.module-stat-card:has(.module-stat-card__link-grid-cta)::after,
.module-stat-card__app-layer-cross-axis-summary-link:has(.module-stat-card__affiliate-marketplace-offer-visit-button)::after,
.module-stat-card__app-layer-cross-axis-summary-link:has(.module-stat-card__cta)::after,
.module-stat-card__app-layer-cross-axis-summary-link:has(.module-stat-card__go)::after,
.module-stat-card__app-layer-cross-axis-summary-link:has(.module-stat-card__link-grid-cta)::after,
.module-stat-card__affiliate-marketplace-offer:has(.module-stat-card__affiliate-marketplace-offer-visit-button)::after,
.module-stat-card__affiliate-marketplace-offer:has(.module-stat-card__cta)::after,
.module-stat-card__affiliate-marketplace-offer:has(.module-stat-card__go)::after,
.module-stat-card__affiliate-marketplace-offer:has(.module-stat-card__link-grid-cta)::after,
.module-stat-card__app-layer-meta-tile:has(.module-stat-card__affiliate-marketplace-offer-visit-button)::after,
.module-stat-card__app-layer-meta-tile:has(.module-stat-card__cta)::after,
.module-stat-card__app-layer-meta-tile:has(.module-stat-card__go)::after,
.module-stat-card__app-layer-meta-tile:has(.module-stat-card__link-grid-cta)::after,
.module-stat-card__versus-compare-panel:has(.module-stat-card__affiliate-marketplace-offer-visit-button)::after,
.module-stat-card__versus-compare-panel:has(.module-stat-card__cta)::after,
.module-stat-card__versus-compare-panel:has(.module-stat-card__go)::after,
.module-stat-card__versus-compare-panel:has(.module-stat-card__link-grid-cta)::after,
.module-stat-card__app-layer-data-story-tile:has(.module-stat-card__affiliate-marketplace-offer-visit-button)::after,
.module-stat-card__app-layer-data-story-tile:has(.module-stat-card__cta)::after,
.module-stat-card__app-layer-data-story-tile:has(.module-stat-card__go)::after,
.module-stat-card__app-layer-data-story-tile:has(.module-stat-card__link-grid-cta)::after,
.module-stat-card__bento-grid-item:has(.module-stat-card__affiliate-marketplace-offer-visit-button)::after,
.module-stat-card__bento-grid-item:has(.module-stat-card__cta)::after,
.module-stat-card__bento-grid-item:has(.module-stat-card__go)::after,
.module-stat-card__bento-grid-item:has(.module-stat-card__link-grid-cta)::after { content: none; }
/* ③ 같은 페이지 앵커는 4시 30분(↘) — 다른 페이지·외부는 3시(→) 그대로 */
a.module-stat-card[href^="#"]::after,
a.module-stat-card__app-layer-cross-axis-summary-link[href^="#"]::after,
a.module-stat-card__affiliate-marketplace-offer[href^="#"]::after,
a.module-stat-card__app-layer-meta-tile[href^="#"]::after,
a.module-stat-card__versus-compare-panel[href^="#"]::after,
a.module-stat-card__app-layer-data-story-tile[href^="#"]::after,
a.module-stat-card__bento-grid-item[href^="#"]::after { transform: rotate(45deg); }
a.module-stat-card[href^="#"]:hover::after,
a.module-stat-card__app-layer-cross-axis-summary-link[href^="#"]:hover::after,
a.module-stat-card__affiliate-marketplace-offer[href^="#"]:hover::after,
a.module-stat-card__app-layer-meta-tile[href^="#"]:hover::after,
a.module-stat-card__versus-compare-panel[href^="#"]:hover::after,
a.module-stat-card__app-layer-data-story-tile[href^="#"]:hover::after,
a.module-stat-card__bento-grid-item[href^="#"]:hover::after,
a.module-stat-card[href^="#"]:focus-visible::after,
a.module-stat-card__app-layer-cross-axis-summary-link[href^="#"]:focus-visible::after,
a.module-stat-card__affiliate-marketplace-offer[href^="#"]:focus-visible::after,
a.module-stat-card__app-layer-meta-tile[href^="#"]:focus-visible::after,
a.module-stat-card__versus-compare-panel[href^="#"]:focus-visible::after,
a.module-stat-card__app-layer-data-story-tile[href^="#"]:focus-visible::after,
a.module-stat-card__bento-grid-item[href^="#"]:focus-visible::after { transform: rotate(45deg) translateX(2px); }
/* 🔴 2026-09-07 사용자 지적 — 호버 시 화살표 원 배경이 보라로 바뀌는데 글리프가 검정이라 안 보였다. */
.module-stat-card:hover::after,.module-stat-card__versus-compare-panel:hover::after,
.module-stat-card:focus-visible::after,.module-stat-card__versus-compare-panel:focus-visible::after { color: #fff; }
/* 🔴 animation 이 쓰는 @keyframes 정의(라이브 원문) — 없으면 요소가 «시작 상태로 굳는다» */
@keyframes stat-shine {
    0% { left: -100%; }
    50%, 100% { left: 150%; }
}

/* ── 라이브 결손 규칙 동기화 (sync-live) ── */
/* 라이브 원문 순서 · 우리에 없던 선택자만 */
  .module-stat-card--quicks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
  .module-stat-card--quick { display: flex; flex-direction: column; align-items: center; text-align: center; background: #fff; border: 1px solid var(--color-border); border-radius: var(--color-radius-sm); padding: 16px 12px; transition: box-shadow .2s, border-color .2s; }
  .module-stat-card--quick:hover { border-color: var(--color-primary); box-shadow: var(--color-shadow-md); }
@media (max-width: 768px) {
  .module-stat-card--quicks { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .module-stat-card--quicks { grid-template-columns: 1fr; }
}
  .module-stat-card--top { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border-top: 4px solid #4F46E5; box-shadow: 0 4px 20px rgba(79, 70, 229, 0.12); }
  .module-stat-card--top:hover { box-shadow: 0 8px 30px rgba(79, 70, 229, 0.3); }
  .module-stat-card--gold { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border-top: 3px solid #d97706; }
  .module-stat-card--silver { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border-top: 3px solid #64748b; }
  .module-stat-card--gray { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border-top: 3px solid #64748b; }
  .module-stat-card--red { background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); border-top: 3px solid #dc2626; }
  .module-stat-card--orange { background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); border-top: 3px solid #ea580c; }
  .module-stat-card--blue { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); border-top: 3px solid #2563eb; }
  .module-stat-card--purple { background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%); border-top: 3px solid #9333ea; }
  .module-stat-card--green { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-top: 3px solid #059669; }
@media (max-width: 480px) {
  .module-stat-card__number { font-size: 2rem; }
}
  .module-stat-card--red-value { background: #fff; border-top: 3px solid #dc2626; }
/* ── 동기화 블록 끝 (sync-live) ── */


/* ── v2.4(modules-v2.4-20260909) 에만 있던 규칙 보충 — 이름만 지금 이름으로 · 값은 v2.4 그대로 (2026-09-11 창D) ── */
@media (prefers-reduced-motion: reduce) {
.module-stat-card, .module-stat-card::before, .module-stat-card::after, .module-stat-card__cta {
  transition: none !important;
}
.module-stat-card:hover, .module-stat-card__cta:hover, .module-stat-card__step:hover {
  transform: none !important;
}
}

/* 🔴🔴 2026-09-23 사용자 지적 「1열로 나와, 넓은 너비에서는 3열이어야하잖아」 — 라이브 규칙 이식.
   출처 = 시세 로컬 assets/css/components.css:974~988 «선언 그대로».
   🔴 이 파일은 그동안 `--cols-2`·`--cols-3` 규칙이 «아예 없어서»(실측 0건) 카드 수와 무관하게
   기본 `minmax(250px, 1fr)` 만 걸렸다. 본문 상자가 700px 안팎이면 250×3=750 이라 3열이 안 서고
   2열(좁으면 1열)로 접힌다. 라이브는 3열용으로 최소폭을 200px 로 낮춰 3열이 서게 한다.
   🔴 라이브의 `@media (max-width: 768px) { … 1fr }` 는 «옮기지 않는다» — 2026-09-13 사용자 승인으로
   「화면 너비로 열 수를 정하던 규칙」을 뺐고(사이드바가 768px 에서 사라져 본문 상자가 오히려 넓어진다),
   최소폭 보장은 auto-fit·minmax 가 이미 한다. 그 결정을 뒤집지 않는다. */
.module-stat-card__grid--cols-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.module-stat-card__grid--cols-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }


/* ══ 라이브 CSS 자동 이식(pull-live-module-css · 2026-09-22 · 트리=sise) ══
   우리에 «선택자 자체가 없던» 규칙만 떠 왔다. 값이 다른 것은 손대지 않는다(apply-live-css 소관).
   각 줄 끝 [파일:줄] 이 라이브 원본 자리다. @media 조건은 «감싼 채로» 옮긴다. */
@media (prefers-reduced-motion: reduce) {
  .module-stat-card.shine::before { animation: none; }   /* components.css:1034 */
}
.module-stat-card.shine::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); animation: stat-shine 3s ease-in-out infinite; }   /* modules.css:8876 */


/* ══ 라이브 CSS 자동 이식(pull-live-module-css · 2026-09-22 · 트리=sise) ══
   우리에 «선택자 자체가 없던» 규칙만 떠 왔다. 값이 다른 것은 손대지 않는다(apply-live-css 소관).
   각 줄 끝 [파일:줄] 이 라이브 원본 자리다. @media 조건은 «감싼 채로» 옮긴다. */
@media (prefers-reduced-motion: reduce) {
  .module-stat-card { transition: none !important; }   /* components.css:1023 */
  .module-stat-card::before { transition: none !important; }   /* components.css:1023 */
  .module-stat-card::after { transition: none !important; }   /* components.css:1023 */
  .module-stat-card:hover { transform: none !important; }   /* components.css:1029 */
  .module-stat-card.shine::before { animation: none; }   /* components.css:1034 */
  .module-stat-card__go::after { transition: none; }   /* modules.css:9369 */
}
@media (max-width: 768px) {
  .module-stat-card--quicks { grid-template-columns: 1fr; }   /* modules.css:6538 */
}
@media (max-width: 480px) {
  .module-stat-card--quicks { grid-template-columns: 1fr; }   /* modules.css:6571 */
  .module-stat-card__number { font-size: 2rem; }   /* modules.css:8894 */
}
.module-stat-card__value { display: block; margin-bottom: 8px; color: #4F46E5; text-shadow: 0 2px 4px rgba(0,0,0,0.1) }   /* modules.css:5719 */   /* 🔴 2026-09-23 — 라이브 유효값과 다른 칸을 뺐다 */
.module-stat-card--quicks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }   /* modules.css:5801 */
.module-stat-card--quick { display: flex; flex-direction: column; align-items: center; text-align: center; background: #fff; border: 1px solid var(--color-border); border-radius: var(--color-radius-sm); padding: 16px 12px; transition: box-shadow .2s, border-color .2s; }   /* modules.css:5811 */
.module-stat-card--quick:hover { border-color: var(--color-primary); box-shadow: var(--color-shadow-md); }   /* modules.css:5822 */
.module-stat-card__icon { font-size: 28px; margin-bottom: 8px; line-height: 1; }   /* modules.css:5826 */
.module-stat-card__label { font-size: 14px; font-weight: 600; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .3px }   /* modules.css:5831 */   /* 🔴 2026-09-23 — 라이브 유효값과 다른 칸을 뺐다 */
.module-stat-card__value { font-size: 16px; font-weight: 800; color: var(--color-primary-dark); }   /* modules.css:5839 */
.module-stat-card { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border-radius: 12px; padding: 24px; text-align: center; box-shadow: 0 4px 20px rgba(79, 70, 229, 0.12); transition: all 0.3s ease; position: relative; overflow: hidden; height: 100%; display: flex; flex-direction: column; justify-content: center; }   /* modules.css:8713 */
.module-stat-card__icon { font-size: 36px; line-height: 1; margin-bottom: 10px; text-align: center; }   /* modules.css:8730 */
.module-stat-card:hover { transform: translateY(-8px); box-shadow: 0 8px 30px rgba(79, 70, 229, 0.2); }   /* modules.css:8738 */
.module-stat-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(79, 70, 229, 0.1), transparent); transition: all 0.8s ease; }   /* modules.css:8743 */
.module-stat-card:hover::before { left: 100%; }   /* modules.css:8754 */
a.module-stat-card:focus-visible { outline: 2px solid var(--color-primary, #1a73e8); outline-offset: -2px; }   /* modules.css:8758 */
a.module-stat-card { text-decoration: none; color: inherit; }   /* modules.css:8763 */
.module-stat-card--link { text-decoration: none; color: inherit; }   /* modules.css:8763 */
a.module-stat-card:hover { text-decoration: none; color: inherit; }   /* modules.css:8770 */
.module-stat-card--link:hover { text-decoration: none; color: inherit; }   /* modules.css:8770 */
.module-stat-card__title { font-weight: 700; font-size: 16px; margin-bottom: 8px; color: #1a73e8; }   /* modules.css:8775 */
.module-stat-card__number { display: block; font-size: 2.5rem; font-weight: 900; margin-bottom: 8px; color: #4F46E5; text-shadow: 0 2px 4px rgba(0,0,0,0.1); }   /* modules.css:8781 */
.module-stat-card__value { display: block; font-size: 2.5rem; font-weight: 900; margin-bottom: 8px; color: #4F46E5; text-shadow: 0 2px 4px rgba(0,0,0,0.1) }   /* modules.css:8781 */   /* 🔴 2026-09-27 지휘자(사용자 「카드 매매가 숫자 폰트 css 작은데? 색상도 체크해봐」) — 09-23 에 뺀 font-size 2.5rem·font-weight 900 복구: 라이브 modules.css 는 이 규칙(:8781)이 «마지막» 값 규칙이라 최종 2.5rem · #4F46E5(라이브 GET 09-27 대조). 빼는 바람에 앞의 16px(:5839 사본)이 이겼다. 되돌리기 = .bak_20260927-지휘자-값크기 */
.module-stat-card__label { font-size: 1rem; font-weight: 700; color: #6c757d; margin-bottom: 4px; display: block; }   /* modules.css:8791 */
.module-stat-card__desc { font-size: 1rem; color: #4b5563; display: block; }   /* modules.css:8799 */
.module-stat-card--top { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border-top: 4px solid #4F46E5; box-shadow: 0 4px 20px rgba(79, 70, 229, 0.12); }   /* modules.css:8805 */
.module-stat-card--top:hover { box-shadow: 0 8px 30px rgba(79, 70, 229, 0.3); }   /* modules.css:8812 */
.module-stat-card--gold { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border-top: 3px solid #d97706; }   /* modules.css:8816 */
.module-stat-card--silver { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border-top: 3px solid #64748b; }   /* modules.css:8821 */
.module-stat-card--gray { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border-top: 3px solid #64748b; }   /* modules.css:8825 */
.module-stat-card--red { background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); border-top: 3px solid #dc2626; }   /* modules.css:8830 */
.module-stat-card--orange { background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); border-top: 3px solid #ea580c; }   /* modules.css:8834 */
.module-stat-card--blue { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); border-top: 3px solid #2563eb; }   /* modules.css:8838 */
.module-stat-card--purple { background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%); border-top: 3px solid #9333ea; }   /* modules.css:8842 */
.module-stat-card--green { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-top: 3px solid #059669; }   /* modules.css:8846 */
.module-stat-card--red .module-stat-card__value { color: #dc2626; }   /* modules.css:8850 */
.module-stat-card--blue .module-stat-card__value { color: #2563eb; }   /* modules.css:8853 */
.module-stat-card--gold .module-stat-card__value { color: #d97706; }   /* modules.css:8854 */
.module-stat-card--green .module-stat-card__value { color: #059669; }   /* modules.css:8855 */
.module-stat-card--orange .module-stat-card__value { color: #ea580c; }   /* modules.css:8856 */
.module-stat-card--silver .module-stat-card__value { color: #475569; }   /* modules.css:8857 */
.module-stat-card--gray .module-stat-card__value { color: #475569; }   /* modules.css:8858 */
.module-stat-card--purple .module-stat-card__value { color: #9333ea; }   /* modules.css:8859 */
.module-stat-card.shine::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); animation: stat-shine 3s ease-in-out infinite; }   /* modules.css:8876 */
.module-stat-card__go { margin-top: 8px; text-align: right; font-size: 13px; /* HBS 09-28 · 12.5px → 13px */ font-weight: 700; color: var(--color-primary-dark); }   /* modules.css:9350 */
.module-stat-card__go::after { content: ' →'; display: inline-block; transition: transform .18s ease; }   /* modules.css:9362 */
.module-stat-card--link:hover .module-stat-card__go::after { transform: translateX(4px); }   /* modules.css:9365 */
.module-stat-card--red-value { background: #fff; border-top: 3px solid #dc2626; }   /* modules.css:10097 */
.module-stat-card--red-value .module-stat-card__value { color: #dc2626; }   /* modules.css:10102 */

/* 🆕 2026-10-09 간격 보장(사용자 10-09 «글자 사이 간격») — 값·이름표 바로 아래 설명 글 위 간격 ≥ 6px(실측 0~4px 이던 자리) · PL-APP-MOD-01 · CO-05 */
.module-stat-card__desc { margin-top:6px; }

/* core/modules/display/badge/style.css */

.module-badge--red { background: #fee2e2; color: #991b1b; }
.module-badge--orange { background: #fed7aa; color: #9a3412; }
.module-badge--yellow { background: #fef9c3; color: #854d0e; }
.module-badge--silver { background: #f1f5f9; color: #475569; }
.module-badge--bronze { background: #fed7aa; color: #9a3412; }
.module-badge--gold { background: #fef3c7; color: #92400e; }
.module-badge--mint { background: #ccfbf1; color: #134e4a; }
.module-badge--info { background: #dbeafe; color: #1e40af; }
.module-badge--success { background: #d1fae5; color: #065f46; }
.module-badge--warning { background: #fed7aa; color: #9a3412; }
.module-badge--danger { background: #fee2e2; color: #991b1b; }
.module-badge--fact { background: #fef9c3; color: #854d0e; }
.module-badge--verified { background: #dcfce7; color: #14532d; }
.module-badge--green {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}
.module-badge--blue {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
}
.module-badge--purple {
  background: #e9d5ff;
  color: #6b21a8;
  border: 1px solid #d8b4fe;
}
.module-badge, .module-badge__highlight--badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 13px; /* HBS 09-28 · 11px → 13px */
  font-weight: 600;
  border-radius: 10px;
  vertical-align: middle;
  line-height: 1.5;
}
.module-badge--info, .module-badge__highlight--badge-info {
  background: #dbeafe;
  color: #1d4ed8;
}

/* 🔴 우리 kind 5종을 라이브 색에 대응시킨다(2026-09-08 사용자 지적 — 상황별로 색이 달라야 한다).
   값은 라이브 원문 그대로 쓰고, 대응만 정한다: freshness=info · rank=gold · reason=purple · source=silver · state=success */
.module-badge--freshness { background: #dbeafe; color: #1e40af; }
.module-badge--rank { background: #fef3c7; color: #92400e; }
.module-badge--reason { background: #ede9fe; color: #5b21b6; }
.module-badge--source { background: #f1f5f9; color: #475569; }
.module-badge--state { background: #d1fae5; color: #065f46; }
/* 🔴 우리 자체 규칙(라이브에 없음) — 변형 이식 때 잃지 않도록 함께 둔다 */
.module-badge__value { font: inherit; }
.module-badge__reason {
  font-weight: 500;
  opacity: 0.9;
}
.module-badge__reason::before { content: "· "; }
.module-badge__asof {
  font-weight: 500;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}

/* ── 라이브 결손 규칙 동기화 (sync-live) ── */
/* 라이브 원문 순서 · 우리에 없던 선택자만 */
  .module-badge { display: inline-block; padding: 5px 14px; border-radius: 20px; font-size: 13px; /* HBS 09-28 · 12px → 13px */ font-weight: 600; line-height: 1.5; background: #e2e8f0; color: #1e293b; text-transform: uppercase; letter-spacing: 0.3px; }
  .module-badge__landing-page .module-badge { display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:700; padding:4px 12px; border-radius:20px; }
  .module-badge__landing-page .module-badge--up { color:var(--lp-up); background:#fef2f2; }
  .module-badge__landing-page .module-badge--down { color:var(--lp-down); background:#eff6ff; }
  .module-badge__landing-page .module-badge small { font-size:13px; font-weight:400; opacity:.75; } /* HBS 09-28 · 11px → 13px */
  .module-badge__chart-panel .module-badge { display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:700; padding:4px 12px; border-radius:20px; }
  .module-badge__chart-panel .module-badge--up { color:#dc2626; background:#fef2f2; }
  .module-badge__chart-panel .module-badge--down { color:#2563eb; background:#eff6ff; }
  .module-badge__chart-panel .module-badge small { font-size:13px; font-weight:400; opacity:.75; } /* HBS 09-28 · 11px → 13px */
/* ── 동기화 블록 끝 (sync-live) ── */

/* 🆕 2026-10-09 앱층 흡수(T41) — «실시간» 상태 표시(live): 점 + 상태색 테두리. 새 클래스만. 근거(앱층): attribute-chip-link--live · chip-live-dot (app-layer/style.css:2108-2109 · 7px 점 · 내림 색(--dn) 글자·테두리). 토큰만 · 13px 미만 0 */
.module-badge--live { display:inline-flex; align-items:center; gap:6px; color:var(--dn); border:1px solid var(--dn); background:var(--surf, transparent); }
.module-badge__live-dot { display:inline-block; flex:none; width:8px; height:8px; border-radius:50%; background:currentColor; }

/* 🆕 2026-10-09 칩 아래 설명 글(note · PL-APP-MOD-01 · 사용자 «칩-상태 아래 괄호 내용이 바로 붙어 있는데?») — 칩 «뒤 형제»로 나와, 칩 줄이 flex-wrap 이면 한 줄을 통째로 차지해 아래로 내려간다. 흐린 글자 토큰, 위 간격 4px(칩 줄 gap 8px 과 합쳐 약 12px). */
.module-badge__note { display:block; flex:0 0 100%; margin:4px 0 0; font-size:14px; line-height:1.4; color:var(--mut); font-weight:400; }

/* core/modules/display/product-grid/style.css */

@media (max-width: 480px) {
}
.module-product-grid { margin: 24px 0 32px; }
.module-product-grid__radio { position: absolute; opacity: 0; pointer-events: none; }
.module-product-grid__filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
.module-product-grid__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; border: 1.5px solid var(--color-border);
  border-radius: 999px; background: #fff; cursor: pointer;
  font-size: 15px; font-weight: 600; color: var(--color-text-secondary);
  transition: all .15s ease; user-select: none;
}
.module-product-grid__chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.module-product-grid__chip-n { font-size: 13px; /* HBS 09-28 · 12.5px → 13px */ font-weight: 700; color: var(--color-text-muted); background: var(--color-border-light); border-radius: 999px; padding: 1px 8px; }
.module-product-grid__card-radio--all:checked ~ .module-product-grid__filters .module-product-grid__card-chip--all, .module-product-grid__card-radio--credit:checked ~ .module-product-grid__filters .module-product-grid__card-chip--credit, .module-product-grid__card-radio--check:checked ~ .module-product-grid__filters .module-product-grid__card-chip--check, .module-product-grid__card-radio--prepaid:checked ~ .module-product-grid__filters .module-product-grid__card-chip--prepaid, .module-product-grid__card-radio--mobile:checked ~ .module-product-grid__filters .module-product-grid__card-chip--mobile {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff;
}
.module-product-grid__card-radio--all:checked ~ .module-product-grid__filters .module-product-grid__card-chip--all .module-product-grid__chip-n, .module-product-grid__card-radio--credit:checked ~ .module-product-grid__filters .module-product-grid__card-chip--credit .module-product-grid__chip-n, .module-product-grid__card-radio--check:checked ~ .module-product-grid__filters .module-product-grid__card-chip--check .module-product-grid__chip-n, .module-product-grid__card-radio--prepaid:checked ~ .module-product-grid__filters .module-product-grid__card-chip--prepaid .module-product-grid__chip-n, .module-product-grid__card-radio--mobile:checked ~ .module-product-grid__filters .module-product-grid__card-chip--mobile .module-product-grid__chip-n {
  background: rgba(255,255,255,.25); color: #fff;
}
.module-product-grid__card-radio--credit:checked ~ .module-product-grid__grid .module-product-grid__item:not(.module-product-grid__card-item--credit), .module-product-grid__card-radio--check:checked ~ .module-product-grid__grid .module-product-grid__item:not(.module-product-grid__card-item--check), .module-product-grid__card-radio--prepaid:checked ~ .module-product-grid__grid .module-product-grid__item:not(.module-product-grid__card-item--prepaid), .module-product-grid__card-radio--mobile:checked ~ .module-product-grid__grid .module-product-grid__item:not(.module-product-grid__card-item--mobile) { display: none; }
.module-product-grid__card-radio--credit:checked ~ .module-product-grid__grid .module-product-grid__ad-row, .module-product-grid__card-radio--check:checked ~ .module-product-grid__grid .module-product-grid__ad-row, .module-product-grid__card-radio--prepaid:checked ~ .module-product-grid__grid .module-product-grid__ad-row, .module-product-grid__card-radio--mobile:checked ~ .module-product-grid__grid .module-product-grid__ad-row { display: none; }
.module-product-grid__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px;
}
.module-product-grid__item {
  display: flex; flex-direction: column;
  border: 1.5px solid var(--color-border); border-radius: var(--color-radius-lg);
  background: #fff; box-shadow: var(--color-shadow-sm); overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
}
.module-product-grid__item:hover { box-shadow: var(--color-shadow-md); transform: translateY(-2px); }
.module-product-grid__head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 18px 0; }
.module-product-grid__badge {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  font-size: 13px; /* HBS 09-28 · 12.5px → 13px */ font-weight: 700; letter-spacing: -.2px;
}
.module-product-grid__name { margin: 0; font-size: 18px; font-weight: 800; color: var(--color-text-primary); line-height: 1.35; }
.module-product-grid__body { display: flex; gap: 16px; padding: 14px 18px 0; align-items: flex-start; }
.module-product-grid__img {
  
  flex: 0 0 auto; width: 110px; height: 150px; object-fit: contain; border-radius: 8px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.18));
}
.module-product-grid__benefits { min-width: 0; }
.module-product-grid__benefits-title { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--color-text-primary); }
.module-product-grid__benefits-list { margin: 0; padding: 0; list-style: none; }
.module-product-grid__benefits-list li {
  position: relative; padding-left: 12px; margin: 0 0 4px;
  font-size: 14.5px; color: var(--color-text-body); line-height: 1.5;
}
.module-product-grid__benefits-list li::before { content: ''; position: absolute; left: 0; top: .62em; width: 4px; height: 4px; border-radius: 50%; background: var(--color-primary); }
.module-product-grid__hook {
  margin: 12px 18px 0; padding: 10px 14px; border-radius: var(--color-radius-sm);
  background: color-mix(in srgb, var(--color-primary) 6%, #fff);
  border-left: 3px solid var(--color-primary);
  font-size: 14px; font-weight: 600; color: var(--color-text-primary); line-height: 1.5;
}
.module-product-grid__cta {
  display: block; margin: 14px 18px 0; padding: 12px 16px;
  border: 1.5px solid var(--color-primary); border-radius: 999px;
  text-align: center; font-size: 15px; font-weight: 700;
  background: var(--color-primary); color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary) 35%, transparent);
  text-decoration: none; transition: all .15s ease;
}
.module-product-grid__cta:hover {
  background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 45%, transparent);
}
.module-product-grid__conds {
  display: flex; gap: 0; margin: 16px 0 0; padding: 14px 18px;
  background: var(--color-bg-subtle); border-top: 1px solid var(--color-border-light);
}
.module-product-grid__cond { flex: 1 1 0; min-width: 0; padding-right: 12px; }
.module-product-grid__cond dt { font-size: 13px; /* HBS 09-28 · 12.5px → 13px */ font-weight: 700; color: var(--color-text-muted); margin: 0 0 4px; }
.module-product-grid__cond dd { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--color-text-primary); line-height: 1.5; word-break: keep-all; }
.module-product-grid__fee {
  display: inline-block; padding: 1px 7px; margin-right: 4px; border-radius: 4px;
  font-size: 13px; /* HBS 09-28 · 11px → 13px */ font-weight: 700; vertical-align: 1px;
}
.module-product-grid__fee--local { background: #fde8e8; color: #c81e1e; }
.module-product-grid__fee--global { background: var(--color-primary-light); color: var(--color-primary-dark); }
@media (max-width: 480px) {
.module-product-grid__grid { grid-template-columns: 1fr; }
.module-product-grid__img { width: 92px; }
.module-product-grid__chip { padding: 9px 14px; font-size: 14px; }
}
.module-product-grid__card-item--featured .module-product-grid__conds {
  border-radius: 0 0 calc(var(--color-radius-lg) - 2px) calc(var(--color-radius-lg) - 2px);
}
.module-product-grid__ribbon {
  
  position: absolute; top: -12px; right: 14px; padding: 3px 12px; border-radius: 999px;
  background: var(--color-primary); color: #fff; font-size: 13px; /* HBS 09-28 · 12px → 13px */ font-weight: 800;
  letter-spacing: -.2px; white-space: nowrap; box-shadow: var(--color-shadow-sm);
}
.module-product-grid__item:not(.module-product-grid__card-item--featured):hover {
  border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
}

/* ── 라이브 결손 규칙 동기화 (sync-live) ── */
/* 라이브 원문 순서 · 우리에 없던 선택자만 */
  .module-product-grid__ad-row { grid-column: 1 / -1; list-style: none; margin: 0; min-width: 0; }
  .module-product-grid__card-badge--credit { background: var(--color-primary-light); color: var(--color-primary-dark); }
  .module-product-grid__card-badge--check { background: #fdeef3; color: #c2185b; }
  .module-product-grid__card-badge--prepaid { background: #e6f6ee; color: #0f7a4d; }
  .module-product-grid__card-badge--mobile { background: #f1e9fd; color: #6d28d9; }
  .module-product-grid__card-item--featured { position: relative; overflow: visible; border: 2px solid var(--color-primary); background: color-mix(in srgb, var(--color-primary) 5%, #fff); box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 22%, transparent); }
/* ── 동기화 블록 끝 (sync-live) ── */

/* ── 행 전체 링크(덮개) — 2026-09-09 rowlink · 새 선택자만 추가, 기존 선언 본문 변경 0 ──
   🔴 ribbon 은 제외 — ribbon 은 이미 position:absolute(라이브 배지 배치)라 flatten 하면 자리가 깨진다. */
.module-product-grid__item { position: relative; }
.module-product-grid__item .module-product-grid__hitarea { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.module-product-grid__item > *:not(.module-product-grid__hitarea):not(.module-product-grid__ribbon) { position: relative; z-index: 2; pointer-events: none; }
.module-product-grid__item a:not(.module-product-grid__hitarea) { pointer-events: auto; }

/* core/modules/display/filter-chips/style.css */
/* module-filter-chips — 목록·링크 가족(§6-5) 형제 모듈
   출처: TCGGrail generatepress_child/core/template/modules/review-links.php (module_review_links())
        + assets/css/modules.css (단순 칩 형태 규칙만)
   개명: 표준발주문 지시대로 도착 이름 module-filter-chips 로 review-links 계보 전체를 재명명(§9-3).
        module-table__link(원본이 재사용하던, 아직 이관되지 않은 table 모듈의 클래스)은 §10-1
        에 따라 faq 의 module-title 처리 선례와 같은 방식으로 module-filter-chips__link 로 복제
        분리했다 — 스타일 값은 원본 정의(modules.css L6569-6599)를 그대로 옮겼다.
   이관 범위: 원본은 항목마다 img/info/price/badge/fresh 유무로 '행 형태(카드)' 와 '단순 칩'
        두 구조를 분기한다. 도착 이름이 module-filter-chips 이므로 이번 회차는 단순 칩 형태만
        옮겼다 — 행 형태(카드) 전용 규칙 9종은 이관하지 않았다. 상세는 module.jsonc 의
        "coverage_gap" 참조.
   색 토큰(§10-4·§15): sites/tcggrail/tokens.jsonc 28토큰과 값이 일치하는 하드코딩은 주석에
        토큰명을 표기했다. */

.module-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #e5e7eb; /* 근거: 원본 --color-border 리터럴 치환(modules.css L12294) */
  /* 근거: 원본 L12294 */
}

.module-filter-chips__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* 근거: 원본 L12297 */
}

.module-filter-chips__ad {
  flex: 0 0 auto;
  font-size: 13px; /* §15-a-1 하한 준수(2026-08-15 정비2차 — 원본 10.5px, 소수점 재검) */
  font-weight: 800;
  letter-spacing: .02em;
  color: #6b7280; /* 근거: 원본 --color-text-muted 리터럴 치환 */
  padding: 2px 6px;
  border: 1px solid #e5e7eb; /* 근거: 원본 --color-border 리터럴 치환 */
  border-radius: 5px;
  background: #fff;
  /* 근거: 원본 L12298 */
}

/* module-filter-chips__link — 원본이 다른(아직 이관되지 않은) table 모듈의 .module-table__link 를
   재사용하던 자리를 §10-1 에 따라 이 모듈 전용 이름으로 복제했다(값은 원본과 동일). */
.module-filter-chips__link {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  color: #1557b0; /* 근거: 원본 --color-primary-dark 리터럴 치환(modules.css L6573) */
  background: #e8f0fe; /* 근거: 원본 --color-primary-light 리터럴 치환 */
  border: 1.5px solid rgba(26,115,232,.35); /* 근거: 원본 --color-primary 35% 리터럴 치환 */
  padding: 8px 16px;
  min-height: 44px;
  line-height: 26px;
  border-radius: 6px; /* 근거: 원본 --color-radius-sm 리터럴 치환 */
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  transition: background .2s, color .2s, transform .15s, box-shadow .15s;
  /* 근거 상세: 원본 modules.css L6569-6583(module-table__link 원 정의) */
}
.module-filter-chips__link:hover {
  background: #1557b0; /* 근거: 원본 --color-primary-dark 리터럴 치환 */
  color: #fff;
  border-color: #1557b0;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(26,115,232,.3);
  /* 근거: 원본 L6585-6591 */
}
.module-filter-chips__link:active {
  transform: translateY(0) scale(.97);
  background: #1557b0;
  border-color: #1557b0;
  color: #fff;
  box-shadow: none;
  /* 근거: 원본 L6593-6598 */
}
.module-filter-chips__link::after {
  content: ''; margin-left: 5px; width: .75em; height: .75em; display: inline-block; vertical-align: -0.08em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h17M14 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h17M14 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .6;
  transition: transform .18s ease, opacity .18s ease;
  /* 근거: 원본 modules.css L12295(.module-review-links .module-table__link::after) —
     module-filter-chips 소관 결합 규칙이라 자기 밑동(module-filter-chips__link)에 그대로 흡수 이관.
     §15-a-10 글자 화살표 → SVG 획 마스크 교체(2026-08-15 정비2차) */
}
.module-filter-chips__link:hover::after { opacity: 1; transform: translateX(2px); }
/* 근거: 원본 L12296 */

.module-filter-chips__attribution {
  font-size: 13px;
  color: #6b7280; /* 근거: --color-text-muted 리터럴 치환(원본 규칙에 색 선언은 없었으나 다른
     단품[faq 등]의 각주 색과 정합시켰다 — §13-1 변형 보완 아님, YMYL 각주는 원본 마크업에
     클래스만 있고 modules.css 에 대응 규칙이 없어 §13-1 소급 보완 사유로 신규 작성) */
  margin-top: 8px;
  line-height: 1.5;
}
/* supplemented: attribution — 원본 PHP 가 .module-review-links__attribution 클래스를 찍지만
   modules.css 전수 검색에 대응 정의가 없었다(§13-1 변형 보완 규칙 적용 — info-box 1호 선례와
   동일 처리). 값은 인접 각주(faq__a 계열) 색상 톤에 준해 신규 보완. */

@media (max-width: 640px) {
  .module-filter-chips__link { white-space: normal; }
  /* 근거: 원본 L12344-12345 */
}

/* ── 라이브 결손 규칙 동기화 (sync-live) ── */
/* 라이브 원문 순서 · 우리에 없던 선택자만 */
  .module-filter-chips__review-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; padding-top:18px; border-top:1px solid var(--color-border); }
  .module-filter-chips__review-links-item { display:inline-flex; align-items:center; gap:7px; }
  .module-filter-chips__review-links-ad { flex:0 0 auto; font-size:13px; /* HBS 09-28 · 10.5px → 13px */ font-weight:800; letter-spacing:.02em; color:var(--color-text-muted); padding:2px 6px; border:1px solid var(--color-border); border-radius:5px; background:#fff; }
  .module-filter-chips__review-links-row { flex:1 1 100%; display:flex; align-items:center; gap:14px; padding:12px 0; transition:box-shadow .18s ease; box-shadow:inset 0 -1px 0 var(--color-border); }
  .module-filter-chips__review-links-row + .module-filter-chips__review-links-row { margin-top:-10px; }
  .module-filter-chips__review-links-thumb { flex:0 0 auto; width:110px; height:110px; object-fit:cover; border-radius:10px; border:1px solid var(--color-border); background:#fff; }
  .module-filter-chips__review-links-vtile { flex:0 0 auto; width:110px; height:110px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; padding:8px; border-radius:10px; background:var(--color-primary-light); overflow:hidden; }
  .module-filter-chips__review-links-vname { font-size:14px; font-weight:800; line-height:1.3; color:var(--color-primary-dark); text-align:center; word-break:keep-all; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .module-filter-chips__review-links-body { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
  .module-filter-chips__review-links-name { font-size:16px; font-weight:800; color:var(--color-text-primary); line-height:1.4; word-break:keep-all; }
  .module-filter-chips__review-links-info { font-size:14px; font-weight:600; color:var(--color-text-muted); line-height:1.45; font-variant-numeric:tabular-nums; word-break:keep-all; }
  .module-filter-chips__review-links-act { flex:0 0 auto; display:flex; align-items:center; gap:8px; }
  .module-filter-chips__review-links-cta, .module-filter-chips__review-links a.module-filter-chips__table-link.module-filter-chips__review-links-cta { border-radius:999px; padding:10px 20px; background:linear-gradient(135deg, var(--color-primary,#1a73e8), var(--color-primary-dark,#1557b0)); color:#fff; border:1.5px solid transparent; font-weight:800; }
  .module-filter-chips__review-links a.module-filter-chips__table-link.module-filter-chips__review-links-cta:hover { background:var(--color-primary-dark,#1557b0); color:#fff; }
  .module-filter-chips__review-links-namerow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .module-filter-chips__review-links-fresh { flex:0 0 auto; font-size:13px; /* HBS 09-28 · 12.5px → 13px */ font-weight:700; letter-spacing:.01em; padding:3px 9px; border-radius:6px; background:var(--color-primary-light); color:var(--color-primary-dark); white-space:nowrap; }

  .module-filter-chips__review-links-price { font-size:19px; font-weight:800; line-height:1.2; color:var(--color-primary-dark); font-variant-numeric:tabular-nums; word-break:keep-all; }
  .module-filter-chips__review-links-price-sub { font-size:14px; font-weight:600; color:var(--color-text-muted); line-height:1.4; }
  .module-filter-chips__review-links-row:first-child { box-shadow:inset 0 1px 0 var(--color-border), inset 0 -1px 0 var(--color-border); }
  .module-filter-chips__review-links-row:hover { box-shadow:inset 0 -1px 0 var(--color-primary-dark,#1e40af); }
  .module-filter-chips__review-links-row:first-child:hover { box-shadow:inset 0 1px 0 var(--color-primary-dark,#1e40af), inset 0 -1px 0 var(--color-primary-dark,#1e40af); }
  .module-filter-chips__review-links-row:has(+ .module-filter-chips__review-links-row:hover) { box-shadow:inset 0 -1px 0 var(--color-primary-dark,#1e40af); }
  .module-filter-chips__review-links-row:first-child:has(+ .module-filter-chips__review-links-row:hover) { box-shadow:inset 0 1px 0 var(--color-border), inset 0 -1px 0 var(--color-primary-dark,#1e40af); }
@media (max-width:640px) {
  .module-filter-chips__review-links-row { flex-direction:row; flex-wrap:wrap; align-items:center; }
  .module-filter-chips__review-links-body { flex:1 1 0; min-width:0; }
  .module-filter-chips__review-links-act { flex:1 1 100%; justify-content:stretch; }
  .module-filter-chips__review-links-cta { display:block; width:100%; text-align:center; align-self:auto; box-sizing:border-box; }
}
/* ── 동기화 블록 끝 (sync-live) ── */

/* 조 AW 11-04: 거르기 칩이 눌린 상태(aria-pressed="true") — script.js 가 켜는 상태. 거르기·줄 세우기 칩을 쓰는 쪽에만 해당(칸 추가 · 기존 규칙 불변) */
.module-filter-chips__link[aria-pressed="true"] { background: #1557b0; color: #fff; }

/* core/modules/display/chart/style.css */
/* chart/style.css — 라이브 CSS 원문 재구성(2026-09-08 fable2) · 재료 = _sandbox/모듈최종형식-20260907/_live-all.css(주석 제거본 = tcggrail·modoocard assets/css 7파일)
   규칙 = 계열 41종에 걸린 라이브 규칙 1420개(@media 안 150개) · 같은 선택자 여러 벌은 «전부 순서대로» · @media 껍데기 보존 · 페이지 문맥 조상(landing-page 계열 여섯 이름)만 떼고 규칙은 살림 · 값 창작 0
   계열 = price-trend-line-tooltip module-chart module-rate-bar price-trend-line-tooltip-hitarea price-trend-line-chart price-trend-line-hover-layer module-calc-donut module-chart-panel price-trend-line-band box-whisker-chart price-trend-line-titled-box proportion-bar-track proportion-segment-strip price-trend-line-period-switch module-chart__type-sparkline-card module-chart__price-trend-line-figure position-spread-gauge-group module-chart__box-whisker-legend price-trend-line-delta-arrow position-spread-gauge-dial module-chart__position-spread-gauge-question module-chart__box-whisker-scale-axis position-spread-gauge-inline-tick-text module-calc-donut-wrap module-chart__price-trend-line-legend module-chart__position-spread-gauge-hand module-chart-wrap module-chart__position-spread-gauge-value position-spread-gauge-arc price-trend-line-point-marker position-spread-gauge-explanation position-spread-gauge-needle module-chart__type-sparkline-grid price-trend-line-sparkline module-chart__position-spread-gauge-endpoint-labels module-chart-ai-table u-visual-block-box u-tabular-number u-figure-caption-note value-direction- u-screen-reader-only-text */
.module-chart__proportion-bar-track > i { display:block; width:var(--w); min-width:3px; height:100%; border-radius:3px; background:var(--acc); opacity:.38; transform-origin:left center; animation:none; animation-play-state:paused; }
.module-chart__price-trend-line-hover-layer {
  position: relative; margin: 24px 0; padding: 20px; background: var(--color-bg-card, #fff); border-radius: var(--color-radius-sm, 8px); border: 1px solid var(--color-border, #e5e7eb);
}
.module-chart__price-trend-line-tooltip { position:absolute; left:50%; padding:9px 12px 10px; border-radius:9px; min-width:172px; max-width: 300px; background:var(--ink); color:var(--surf); z-index:6; box-shadow:0 10px 24px rgba(0,0,0,.3); display:flex; flex-direction:column; align-items: center; text-align:left; gap:3px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .13s ease,transform .13s ease; top:calc(var(--yp,0)*1%); transform:translate(-50%,4px); border:1px solid var(--line2); bottom:calc(100% + 9px); }
.module-chart__price-trend-line-hover-layer-hitarea>button>.module-chart__price-trend-line-tooltip { top:calc(var(--yp)*1%); left: calc(clamp(0px, (var(--i,0) + .5) * 100% - 86px, var(--n,1) * 100% - 172px)
             - (var(--i,0) + .5) * 100% + 50%); transform: translate(0,calc(-100% - 16px)); bottom:auto; }
.module-chart__price-trend-line-tooltip-footnote { margin-top:4px; padding-top:5px; font-size:13px; font-weight:600; opacity:.8; white-space:nowrap; border-top:1px solid color-mix(in srgb,var(--surf)18%,transparent); line-height:1.5; display:block; color:var(--ink); }
@media (prefers-reduced-motion:reduce) {
}



@media (max-width:820px) {
}
@media (max-width:520px) {
}
@media (max-width:820px) {
}

.module-chart__position-spread-gauge-hand { fill:var(--ink); transform-origin:var(--gnd-o); transform:rotate(calc(var(--gnd-a,0)*-1deg)); transform-box:view-box; animation:gnd-turn 1.5s linear .2s both; animation-play-state:paused; }
@media (prefers-reduced-motion:no-preference) {
}
@media (prefers-reduced-motion:no-preference) and (scripting:none) {
}

.module-chart__price-trend-line-tooltip-hitarea>.module-chart__price-trend-line-tooltip { top:calc(var(--yp,0)*1%); left:calc(clamp(0px, (var(--i,0) + .5) * 100% - 86px, var(--n,1) * 100% - 172px)
            - (var(--i,0) + .5) * 100% + 50%); transform:translate(-50%,4px); bottom:calc(100% + 9px); }

.module-chart__price-trend-line-hover-layer-points>i { position:absolute; left:calc(var(--x)*1%); top:calc(var(--yp)*1%); width:var(--d,7px); height:var(--d,7px); margin:calc(var(--d,7px)/ -2)0 0 calc(var(--d,7px)/ -2); display:block; border-radius:50%; background:var(--dc,var(--acc)); pointer-events:none; transition:transform .16s ease; }





@media (prefers-reduced-motion:reduce) {
}
.module-chart__price-trend-line-hover-layer-hitarea>button>.module-chart__price-trend-line-tooltip { top: calc(var(--yp)*1%); bottom:auto; left: calc(clamp(0px, (var(--i,0) + .5) * 100% - 86px, var(--n,1) * 100% - 172px)
             - (var(--i,0) + .5) * 100% + 50%); transform: translate(0,calc(-100% - 16px)); }





















.module-chart__rate-bar-marker { animation:rv-anim-pos 1.5s linear .2s both; animation-play-state:paused; position:absolute; top:0; bottom:0; width:2px; transform:translateX(-50%); background:var(--color-text-primary,#1e293b); border-radius:1px; z-index:2; box-shadow:0 0 0 1px rgba(255,255,255,.6); }
.module-chart__price-trend-line-tooltip-hitarea>.module-chart__price-trend-line-tooltip { bottom:calc(100% + 9px); transform:translate(0,calc(-100% - 16px)); top:calc(var(--yp,0)*1%); left:calc(clamp(0px, (var(--i,0) + .5) * 100% - 86px, var(--n,1) * 100% - 172px)
            - (var(--i,0) + .5) * 100% + 50%); }
.module-chart__rate-bar-marker-cap { font-size:11.5px; animation:rv-anim-cap-l 1.5s linear .2s both; animation-play-state:paused; display:block; width:max-content; max-width:100%; white-space:nowrap; margin-top:6px; padding:2px 9px; border-left:3px solid var(--color-text-primary,#1e293b); border-radius:2px 10px 10px 2px; background:color-mix(in srgb, var(--color-text-primary,#1e293b) 7%, #fff); font-weight:700; color:var(--color-text-primary,#1e293b); line-height:1.35; word-break:keep-all; font-variant-numeric:tabular-nums; transform:translateX(-2px); }
.module-chart__rate-bar-marker-cap--r { animation:rv-anim-mcap-r 1.5s linear .2s both; animation-play-state:paused; border-left:0; border-right:3px solid var(--color-text-primary,#1e293b); border-radius:10px 2px 2px 10px; transform:translateX(2px); }


.module-chart__position-spread-gauge-hand { transform-origin:var(--gnd-o); transform:rotate(calc(var(--gnd-a,0)*-1deg)); transform-box:view-box; animation:gnd-turn 1.5s linear .2s both; animation-play-state:paused; fill:var(--ink); }







.module-chart__price-trend-line-tooltip { position: absolute; left: 50%; padding: 9px 12px 10px; border-radius: 9px; min-width: 172px; background: var(--ink); color: var(--surf); z-index: 6; box-shadow: 0 10px 24px rgba(0,0,0,.3); display: flex; flex-direction: column; gap: 3px; text-align: left; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .13s ease,transform .13s ease; top:calc(var(--yp,0)*1%); transform:translate(-50%,4px); border:1px solid var(--line2); bottom:calc(100% + 9px); max-width: 300px; }








@media (max-width:1100px) {
}
@media (max-width:820px) {

}
@media (max-width:520px) {

}
@media (prefers-reduced-motion:no-preference) {
}
@media (prefers-reduced-motion:no-preference) and (scripting:none) {
}
@media (prefers-reduced-motion:reduce) {
}
@media (scripting:none) {
}


@media (max-width:640px) {
}
@media (max-width: 760px) {
}

@media (max-width: 640px) {

}
.module-chart { margin: 24px 0; padding: 20px; background: var(--color-bg-card, #fff); border-radius: var(--color-radius-sm, 8px); border: 1px solid var(--color-border, #e5e7eb); position: relative; }
@media (max-width: 640px) {
}
.module-chart__legend-item { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.4; padding: 2px 6px; margin: -2px -6px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
}
@media (prefers-reduced-motion: no-preference) {
}
@media (max-width: 640px) {
}

@media (max-width: 640px) {

}

@media (max-width: 640px) {

}



@media (max-width:640px) {
}



@media (max-width:640px) {

}

@media (max-width:640px) {
}
@media (prefers-reduced-motion: reduce) {
}
@media (prefers-reduced-motion: reduce) {
}
@media (prefers-color-scheme: dark) {
}
.u-tabular-number {
  font-variant-numeric: tabular-nums;
}
.u-value-direction-rising {
  color: var(--up);
}
.u-value-direction-falling {
  color: var(--dn);
}
.module-chart__print-variant-shine-map-diagram-key span.u-value-direction-rising {
  color: var(--acc-i);
  background: var(--acc-s);
}
.module-chart__data-story-tile-bars:has(.module-chart__proportion-bar-track) {
  align-items: stretch;
  height: auto;
  min-height: 58px;
}
.module-chart__data-story-tile-bars:has(.module-chart__proportion-bar-track) .module-chart__proportion-bar-track {
  flex: none;
  height: 9px;
}
.module-chart__proportion-bar-track > i {
  display: block;
  width: var(--w);

  min-width: 3px;
  height: 100%;
  border-radius: 3px;
  background: var(--acc);
  opacity: .38;
}
.module-chart__app-layer-proportion-bar-track--current > i {
  background: var(--acc-i);
  opacity: 1;
}
.module-chart__proportion-bar-track-more {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--mut);
  text-align: right;
}
.u-visual-block-box {
  margin: 0 0 14px;
}
.module-chart__price-trend-line-titled-box {
  padding: 15px;
  background: var(--surf2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.module-chart__price-trend-line-titled-box figcaption {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink2);
}
.module-chart__price-trend-line-titled-box svg {
  display: block;
  width: 100%;
  height: 170px;
}
.module-chart__price-trend-line-hover-layer {
  position: relative;
}
.module-chart__price-trend-line-hover-layer-hitarea {
  position: absolute;
  inset: 0;
  display: flex;
}
.module-chart__price-trend-line-hover-layer-hitarea>button {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  position: relative;
  border-radius: 3px;
}
.module-chart__price-trend-line-hover-layer-hitarea>button:hover, .module-chart__price-trend-line-hover-layer-hitarea>button:focus-visible {
  background: color-mix(in srgb,var(--acc) 9%,transparent);
  outline: 0;
}
.module-chart__price-trend-line-hover-layer-hitarea>button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--acc);
  opacity: 0;
  transition: opacity .12s;
}
.module-chart__price-trend-line-tooltip {
  position: absolute;
  left: 50%;
  padding: 9px 12px 10px;
  border-radius: 9px;
  min-width: 172px;

  max-width: 300px;
  background: var(--ink);
  color: var(--surf);
  z-index: 6;
  box-shadow: 0 10px 24px rgba(0,0,0,.3);
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .13s ease,transform .13s ease;
}
.module-chart__price-trend-line-hover-layer-hitarea>button>.module-chart__price-trend-line-tooltip {
  top: calc(var(--yp)*1%);

  left: calc(clamp(0px, (var(--i,0) + .5) * 100% - 86px, var(--n,1) * 100% - 172px)
             - (var(--i,0) + .5) * 100% + 50%);
  transform: translate(0,calc(-100% - 16px));
}
.module-chart__price-trend-line-tooltip-heading {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
  padding-bottom: 5px;
  border-bottom: 1px solid color-mix(in srgb,var(--surf) 22%,transparent);
  margin-bottom: 2px;
}
.module-chart__price-trend-line-tooltip-rank {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.module-chart__price-trend-line-tooltip-rank>i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.module-chart__price-trend-line-tooltip-rank>span {
  opacity: .78;
}
.module-chart__price-trend-line-tooltip-rank>b {
  margin-left: auto;
  font-weight: 800;
  letter-spacing: -.02em;
}
.module-chart__price-trend-line-tooltip-footnote {
  margin-top: 4px;
  padding-top: 5px;
  font-size: 13px;
  font-weight: 600;
  opacity: .8;
  white-space: nowrap;
  border-top: 1px solid color-mix(in srgb,var(--surf) 18%,transparent);
}
.module-chart__price-trend-line-tooltip-arrow, .module-chart__price-trend-line-tooltip .module-chart__price-trend-line-delta-arrow {
  font-style: normal;
  font-weight: 800;
  margin: 0 2px 0 1px;
}
.module-chart__price-trend-line-tooltip .module-chart__price-trend-line-delta-arrow.u-value-direction-rising {
  color: #6EE7A8;
}
.module-chart__price-trend-line-tooltip .module-chart__price-trend-line-delta-arrow.u-value-direction-falling {
  color: #FF9C8F;
}
.module-chart__price-trend-line-hover-layer button:hover>.module-chart__price-trend-line-tooltip, .module-chart__price-trend-line-hover-layer button:focus-visible>.module-chart__price-trend-line-tooltip, .module-chart__price-trend-line-hover-layer button.module-chart__entity-link-lit>.module-chart__price-trend-line-tooltip {
  opacity: 1;
  visibility: visible;
}
.module-chart__price-trend-line-hover-layer-hitarea>button:hover>.module-chart__price-trend-line-tooltip, .module-chart__price-trend-line-hover-layer-hitarea>button:focus-visible>.module-chart__price-trend-line-tooltip {

  transform: translate(0,calc(-100% - 12px));
}
.module-chart__price-trend-line-hover-layer-hitarea>button:hover::before, .module-chart__price-trend-line-hover-layer-hitarea>button:focus-visible::before {
  opacity: 1;
}
.module-chart__price-trend-line-hover-layer-hitarea>button:first-child>.module-chart__price-trend-line-tooltip {
  left: 0;
  transform: translate(0,calc(-100% - 16px));
}
.module-chart__price-trend-line-hover-layer-hitarea>button:first-child:hover>.module-chart__price-trend-line-tooltip, .module-chart__price-trend-line-hover-layer-hitarea>button:first-child:focus-visible>.module-chart__price-trend-line-tooltip {
  transform: translate(0,calc(-100% - 12px));
}
.module-chart__price-trend-line-hover-layer-hitarea>button:last-child>.module-chart__price-trend-line-tooltip {
  left: auto;
  right: 0;
  transform: translate(0,calc(-100% - 16px));
}
.module-chart__price-trend-line-hover-layer-hitarea>button:last-child:hover>.module-chart__price-trend-line-tooltip, .module-chart__price-trend-line-hover-layer-hitarea>button:last-child:focus-visible>.module-chart__price-trend-line-tooltip {
  transform: translate(0,calc(-100% - 12px));
}
@media (prefers-reduced-motion:reduce) {
.module-chart__price-trend-line-tooltip {
    transition: none;
  }
}
.module-chart__price-trend-line-legend {
  display: flex;
  gap: 14px;
  margin-top: 9px;
  font-size: 13px;
  color: var(--mut);
  flex-wrap: wrap;
}
.module-chart__price-trend-line-legend i {
  display: inline-block;
  width: 11px;
  height: 3px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: 3px;
}
.module-chart__position-spread-gauge-dial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 11px 10px;
  border: 1px solid var(--line2);
  border-radius: var(--r-s);
  background: var(--surf);
  text-align: center;
}
.module-chart__position-spread-gauge-dial svg {
  width: 100%;
  max-width: 104px;
  height: auto;
  margin: 2px 0 -4px;
}

.module-chart__position-spread-gauge-value {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
}
.module-chart__position-spread-gauge-question {
  font-size: 13px;
  font-weight: 700;
  color: var(--mut);
  letter-spacing: .03em;
}
.module-chart__position-spread-gauge-dial .module-chart__position-spread-gauge-question {
  align-self: stretch;
  text-align: left;
}

.module-chart__price-trend-line-heading .module-chart__visual-block-heading {
  margin: 0;
}

@media (max-width:820px) {
.module-chart__offer-compare-panel, .module-chart__price-trend-line-band {
    padding-left: 12px;
    padding-right: 12px;
  }
}
@media (max-width:520px) {
.module-chart__offer-compare-panel, .module-chart__price-trend-line-band {
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 10px;
  }
}
@media (max-width:820px) {
.module-chart__price-trend-line-titled-box, .u-visual-block-box.module-chart__key-facts-visual-box-table-scroll, .module-chart__card-grid-deep-dive-panel, .module-chart__footnote-block, .module-chart__cross-link-list-column {
    padding-left: 12px;
    padding-right: 12px;
  }
}
.module-chart__table-scroll-hint+.module-chart__prose-body-block, .module-chart__table-scroll-hint+.u-visual-block-box {
  margin-top: 2px;
}
.u-screen-reader-only-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.module-chart__price-trend-line-figure {
  margin: 0;
  padding: 0;
  border: 0;
}
.module-chart__price-trend-line-figure>figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--mut);
  line-height: 1.55;
}
.module-chart__price-trend-line-figure--flat {
  margin: 0;
}
.module-chart__price-trend-line-figure--flat>figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.u-screen-reader-only-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
figure.module-chart__price-trend-line-titled-box {
  margin: 0 0 14px;
}

.module-chart__card-grid-page, .module-popup__thumb-effect-layer, .module-chart__sibling-axis-link-grid {
  margin-bottom: 14px;
}
a.module-chart__primary-action-button .u-tabular-number, a.module-chart__primary-action-button:hover .u-tabular-number { color: #fff }
a.module-chart__primary-action-button.module-chart__app-layer-primary-action-button--question .u-tabular-number { color: var(--ink) }
a.module-chart__primary-action-button.module-chart__app-layer-primary-action-button--question:hover .u-tabular-number { color: #fff }
.module-chart__position-spread-gauge-needle {transform-box:view-box;transform-origin:var(--ox) var(--oy);
  transform:rotate(var(--rot,0deg))}
.module-chart__position-spread-gauge-hand {fill:var(--ink)}
@media (prefers-reduced-motion:no-preference) {
.module-chart__position-spread-gauge-needle {animation-duration:1.5s;animation-timing-function:cubic-bezier(.22,.68,.3,1);
    animation-delay:.2s;animation-fill-mode:both;animation-play-state:paused}
.module-chart__position-spread-gauge-needle {animation-name:tg-needle}
}
@media (prefers-reduced-motion:no-preference) and (scripting:none) {
.module-chart__distribution-bar-fill, .module-chart__ranked-thumbnail-list-rank-panel-bar-footnote, .module-chart__attribute-distribution-bar-fill, .module-chart__attribute-distribution-track>i, .module-chart__bar-row-track>i, .module-chart__group-value-compare-cell-bar>span, .module-chart__data-story-tile-gauge>i, .module-chart__data-story-tile-bars>i, .module-chart__data-story-tile-rank>i, .module-chart__position-spread-gauge-needle {animation-play-state:running}
}

.module-chart__price-trend-line-tooltip-hitarea>.module-chart__price-trend-line-tooltip {top:calc(var(--yp,0)*1%);
  left:calc(clamp(0px, (var(--i,0) + .5) * 100% - 86px, var(--n,1) * 100% - 172px)
            - (var(--i,0) + .5) * 100% + 50%);
  transform:translate(0,calc(-100% - 16px))}
.module-chart__price-trend-line-tooltip-hitarea:hover>.module-chart__price-trend-line-tooltip, .module-chart__price-trend-line-tooltip-hitarea:focus-visible>.module-chart__price-trend-line-tooltip, .module-chart__price-trend-line-tooltip-hitarea:active>.module-chart__price-trend-line-tooltip {
  opacity:1;visibility:visible;transform:translate(0,calc(-100% - 12px))}

.module-chart__price-trend-line-hover-layer--figure {position:relative;display:block;container-type:inline-size}
.module-chart__price-trend-line-hover-layer-points {position:absolute;inset:0}
.module-chart__price-trend-line-hover-layer-points>i {position:absolute;left:calc(var(--x)*1%);top:calc(var(--yp)*1%);
  width:var(--d,7px);height:var(--d,7px);
  margin:calc(var(--d,7px) / -2) 0 0 calc(var(--d,7px) / -2);
  display:block;border-radius:50%;background:var(--dc,var(--acc));pointer-events:none}

.module-chart__app-layer-panel--cell .module-chart__position-spread-gauge-dial svg {
  max-width: 132px;
}
.module-chart__app-layer-panel--cell .module-chart__position-spread-gauge-arc {
  stroke-dasharray: 100;
  --arc: 100;
}

.module-chart__position-spread-gauge-group > .module-chart__position-spread-gauge-dial { border: 0; background: transparent; padding: 0 }
.module-chart__position-spread-gauge-group > .module-chart__position-spread-gauge-dial svg { width: 100%; max-width: 168px; height: auto; margin: 2px 0 -6px }
.module-chart__position-spread-gauge-group > .module-chart__position-spread-gauge-dial .module-chart__position-spread-gauge-value {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.module-chart__position-spread-gauge-group > .module-chart__position-spread-gauge-dial .module-chart__position-spread-gauge-question {
  align-self: stretch;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--mut);
  line-height: 1.45;
  word-break: keep-all;
}
.u-tabular-number { font-variant-numeric:tabular-nums; }
.u-value-direction-rising { color:var(--up); }
.u-value-direction-falling { color:var(--dn); }
.module-chart__headline-stat-block-description.u-value-direction-rising { color:var(--up); }
.module-chart__headline-stat-block-description.u-value-direction-falling { color:var(--dn); }

.module-chart__price-trend-line-tooltip-hitarea:hover .module-chart__price-trend-line-tooltip { opacity:1; }
.module-chart__price-trend-line-tooltip-hitarea:focus-visible .module-chart__price-trend-line-tooltip { opacity:1; }
.module-chart__price-trend-line-tooltip-hitarea:first-child .module-chart__price-trend-line-tooltip { left:0; transform:translate(0,-118%); }
.module-chart__price-trend-line-tooltip-hitarea:last-child .module-chart__price-trend-line-tooltip { left:auto; right:0; transform:translate(0,-118%); }
.module-chart__price-trend-line-tooltip-rank i { width:9px; height:9px; border-radius:3px; flex:0 0 auto; }
.module-chart__price-trend-line-tooltip-rank b { margin-left:auto; font-variant-numeric:tabular-nums; }
.u-figure-caption-note { margin:8px 0 14px; font-size:14px; color:var(--mut); line-height:1.55; }
.u-visual-block-box { margin:0 0 14px; border:0; }
.module-chart__box-whisker { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.module-chart__box-whisker>li { min-width:0; }
.module-chart__box-whisker-heading { display:flex; align-items:center; gap:8px; font-size:14px; margin-bottom:5px; flex-wrap:wrap; }
.module-chart__box-whisker-heading b { font-weight:800; font-variant-numeric:tabular-nums; }
.module-chart__box-whisker-heading s { text-decoration:none; font-size:13px; color:var(--mut); font-weight:700; margin-left:auto; }
.module-chart__box-whisker-title { position:relative; height:22px; border-radius:5px; background:var(--surf2); border:1px solid var(--line); }
.module-chart__box-whisker-width { position:absolute; top:50%; height:2px; background:var(--line2); transform:translateY(-50%); }
.module-chart__box-whisker-box { position:absolute; top:3px; bottom:3px; border-radius:4px; background:var(--et,var(--acc)); opacity:.42; }
.module-chart__box-whisker-modal { position:absolute; top:1px; bottom:1px; width:3px; border-radius:2px; background:var(--et,var(--acc)); }
.module-chart__box-whisker-extra { position:absolute; top:6px; bottom:6px; width:2px; background:var(--line2); }
.module-chart__box-whisker-scale-axis { display:flex; justify-content:space-between; font-size:13px; color:var(--mut); margin-top:7px; font-variant-numeric:tabular-nums; }
.module-chart__type-sparkline-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(146px,1fr)); gap:10px; }
.module-chart__proportion-bar-track>i { transform-origin:left center; animation:none; animation-play-state:paused; display:block; width:var(--w); min-width:3px; height:100%; border-radius:3px; background:var(--acc); opacity:.38; }
.module-chart__type-sparkline-grid>* { min-width:0; }
.module-chart__type-sparkline-card { padding:9px 11px 8px; background:var(--surf); border:1px solid var(--line2); border-radius:var(--r-s); text-decoration:none; color:inherit; display:block; }
.module-chart__type-sparkline-card:hover { border-color:var(--acc); }
.module-chart__type-sparkline-card:focus-visible { border-color:var(--acc); }
.module-chart__type-sparkline-card-heading { display:flex; align-items:center; gap:6px; font-size:14px; font-weight:700; margin-bottom:3px; min-width:0; }
.module-chart__type-sparkline-card-heading span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.module-chart__type-sparkline-card svg { display:block; width:100%; height:34px; }
.module-chart__type-sparkline-card-footnote { display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:13px; margin-top:3px; }
.module-chart__type-sparkline-card-footnote b { font-variant-numeric:tabular-nums; font-weight:800; }
.module-chart__type-sparkline-card-footnote em { font-style:normal; font-weight:800; }
.module-chart__type-sparkline-card-footnote em.u-value-direction-rising { color:var(--up); }
.module-chart__type-sparkline-card-footnote em.u-value-direction-falling { color:var(--dn); }

.module-chart__rank-list-group-value-ladder-value.u-value-direction-rising { color:var(--up); }
.module-chart__rank-list-group-value-ladder-value.u-value-direction-falling { color:var(--dn); }
.module-chart__print-variant-shine-map-diagram-key span.u-value-direction-rising { color:var(--acc-i); background:var(--acc-s); }
.module-chart__proportion-bar-track { display:block; height:6px; border-radius:3px; background:var(--line2); overflow:hidden; }
.module-chart__app-layer-proportion-bar-track--current>i { background:var(--acc-i); opacity:1; }
.module-chart__proportion-bar-track-more { font-size:13px; font-weight:700; line-height:1; color:var(--mut); text-align:right; }
.module-chart__price-trend-line-titled-box { padding:15px; background:var(--surf2); border:1px solid var(--line); border-radius:var(--r); margin:0 0 12px; }
.module-chart__price-trend-line-titled-box figcaption { margin:0 0 10px; font-size:15px; font-weight:700; color:var(--ink2); }
.module-chart__price-trend-line-titled-box svg { display:block; width:100%; height:170px; }
.module-chart__price-trend-line-legend { display:flex; gap:14px; margin-top:9px; font-size:13px; color:var(--mut); flex-wrap:wrap; }
.module-chart__price-trend-line-legend i { display:inline-block; width:11px; height:3px; border-radius:2px; margin-right:5px; vertical-align:3px; }
.module-chart__price-trend-line-hover-layer--fit svg { height:auto; aspect-ratio:600/130; }
.module-chart__year-histogram-strip .module-chart__year-histogram-column .module-chart__price-trend-line-tooltip { left:50%; top:auto; bottom:calc(100% + 6px); transform:translate(-50%,4px); }
.module-chart__year-histogram-strip .module-chart__year-histogram-column:hover .module-chart__price-trend-line-tooltip { opacity:1; visibility:visible; transform:translate(-50%,0); }
.module-chart__year-histogram-strip .module-chart__year-histogram-column:focus-visible .module-chart__price-trend-line-tooltip { opacity:1; visibility:visible; transform:translate(-50%,0); }
.module-chart__year-histogram-strip .module-chart__year-histogram-column:active .module-chart__price-trend-line-tooltip { opacity:1; visibility:visible; transform:translate(-50%,0); }
.module-chart__year-histogram-strip .module-chart__year-histogram-column:first-child .module-chart__price-trend-line-tooltip { left:0; transform:translate(0,4px); }
.module-chart__year-histogram-strip .module-chart__year-histogram-column:first-child:hover .module-chart__price-trend-line-tooltip { transform:translate(0,0); }
.module-chart__year-histogram-strip .module-chart__year-histogram-column:first-child:focus-visible .module-chart__price-trend-line-tooltip { transform:translate(0,0); }
.module-chart__year-histogram-strip .module-chart__year-histogram-column:first-child:active .module-chart__price-trend-line-tooltip { transform:translate(0,0); }
.module-chart__year-histogram-strip .module-chart__year-histogram-column:last-child .module-chart__price-trend-line-tooltip { left:auto; right:0; transform:translate(0,4px); }
.module-chart__year-histogram-strip .module-chart__year-histogram-column:nth-last-child(-n+2) .module-chart__price-trend-line-tooltip { left:auto; right:0; transform:translate(0,4px); }
.module-chart__year-histogram-strip .module-chart__year-histogram-column:nth-last-child(-n+2):hover .module-chart__price-trend-line-tooltip, .module-chart__year-histogram-strip .module-chart__year-histogram-column:nth-last-child(-n+2):focus-visible .module-chart__price-trend-line-tooltip, .module-chart__year-histogram-strip .module-chart__year-histogram-column:nth-last-child(-n+2):active .module-chart__price-trend-line-tooltip { transform:translate(0,0); }
.module-chart__year-histogram-strip .module-chart__year-histogram-column:last-child:hover .module-chart__price-trend-line-tooltip { transform:translate(0,0); }
.module-chart__year-histogram-strip .module-chart__year-histogram-column:last-child:focus-visible .module-chart__price-trend-line-tooltip { transform:translate(0,0); }
.module-chart__year-histogram-strip .module-chart__year-histogram-column:last-child:active .module-chart__price-trend-line-tooltip { transform:translate(0,0); }
.module-chart__price-trend-line-tooltip-hitarea:focus-within>.module-chart__price-trend-line-tooltip { opacity:1; visibility:visible; transform:translate(-50%,0); }
.module-chart__proportion-segment-strip { display:flex; height:34px; border-radius:8px; overflow:hidden; border:1px solid var(--line2); }
.module-chart__proportion-segment-strip i { display:block; height:100%; background:var(--line2); border-right:1px solid var(--surf2); }
.module-chart__proportion-segment-strip i:last-child { border-right:0; }
.module-chart__proportion-segment-strip i.is-state-current-active { background:var(--acc); }
.module-chart__proportion-segment-strip-legend { display:flex; flex-wrap:wrap; gap:5px 16px; margin-top:10px; font-size:13px; color:var(--mut); }
.module-chart__proportion-segment-strip-legend span { display:inline-flex; align-items:center; gap:6px; }
.module-chart__proportion-segment-strip-legend i { width:10px; height:10px; border-radius:3px; background:var(--line2); display:inline-block; }
.module-chart__proportion-segment-strip-legend .is-state-current-active i { background:var(--acc); }
.module-chart__proportion-segment-strip-legend .is-state-current-active { color:var(--ink); }
.module-chart__proportion-segment-strip-legend b { color:var(--ink2); font-weight:800; font-variant-numeric:tabular-nums; }
.module-chart__visual-block-box--split { display:grid; grid-template-columns:minmax(300px,360px)minmax(0,1fr); gap:16px; align-items:center; }
.module-chart__visual-block-box--split>* { min-width:0; }
.module-chart__price-trend-line-titled-box-x-axis { display:flex; justify-content:space-between; gap:10px; margin-top:8px; font-size:13px; color:var(--mut); font-variant-numeric:tabular-nums; }
.module-chart__price-trend-line-titled-box-plot { line-height:0; }
.module-chart__position-spread-gauge-dial--bare { border:0; background:none; padding:0; }
.module-chart__price-trend-line-hover-layer-dots { position:absolute; inset:0; pointer-events:none; }
.module-chart__price-trend-line-hover-layer-dots>i { position:absolute; left:calc(var(--x)*1%); top:calc(var(--yp)*1%); width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%; background:var(--up); display:block; }

.module-chart__review-panel>.module-chart__rate-bar { margin-top:0; }
.module-chart__price-trend-line-hover-layer { position:relative; }
.module-chart__price-trend-line-hover-layer-hitarea { position:absolute; inset:0; display:flex; }
.module-chart__price-trend-line-hover-layer-hitarea>button { flex:1 1 0; min-width:0; height:100%; border:0; background:transparent; padding:0; cursor:pointer; position:relative; border-radius:3px; }
.module-chart__price-trend-line-hover-layer-hitarea>button:hover { background:color-mix(in srgb,var(--acc)9%,transparent); outline:0; }
.module-chart__price-trend-line-hover-layer-hitarea>button:focus-visible { background:color-mix(in srgb,var(--acc)9%,transparent); outline:0; }
.module-chart__price-trend-line-hover-layer-hitarea>button::before { content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--acc); opacity:0; transition:opacity .12s; }
.module-chart__price-trend-line-hover-layer-points>button { position:absolute; left:calc(var(--x)*1%); top:calc(var(--yp)*1%); width:26px; height:26px; margin:-13px 0 0 -13px; border:0; background:transparent; padding:0; cursor:pointer; border-radius:50%; }
.module-chart__price-trend-line-hover-layer-points>button:hover, .module-chart__price-trend-line-hover-layer-points>button.module-chart__entity-link-lit { background:color-mix(in srgb,var(--acc)18%,transparent); outline:0; }
.module-chart__price-trend-line-hover-layer-points>i { transition:transform .16s ease; }
.module-chart__price-trend-line-hover-layer-points>i.module-chart__entity-link-lit, .module-chart__price-trend-line-hover-layer-points>i.is-dot-hover-lit { transform:scale(1.15); }
@media (prefers-reduced-motion:reduce) {
.module-chart__price-trend-line-hover-layer-points>i { transition:none; }
}
.module-chart__price-trend-line-hover-layer-points>button:focus-visible { background:color-mix(in srgb,var(--acc)18%,transparent); outline:0; }
.module-chart__price-trend-line-hover-layer-hitarea>button>.module-chart__price-trend-line-tooltip { top:calc(var(--yp)*1%); bottom:auto; }
.module-chart__price-trend-line-hover-layer-points>button>.module-chart__price-trend-line-tooltip { top:50%; bottom:auto; transform:translate(-50%,calc(-100% - 14px));

  left: clamp(calc(163px - var(--x,50) * 1cqw), 13px, calc(100cqw - 163px - var(--x,50) * 1cqw));
}
.module-chart__price-trend-line-tooltip .module-chart__price-trend-line-delta-arrow { font-style:normal; font-weight:800; margin:0 2px 0 1px; }
.module-chart__price-trend-line-tooltip .module-chart__price-trend-line-delta-arrow.u-value-direction-rising { color:#6EE7A8; }
.module-chart__price-trend-line-tooltip .module-chart__price-trend-line-delta-arrow.u-value-direction-falling { color:#FF9C8F; }
.module-chart__price-trend-line-hover-layer button:hover>.module-chart__price-trend-line-tooltip { opacity:1; visibility:visible; }
.module-chart__price-trend-line-hover-layer button:focus-visible>.module-chart__price-trend-line-tooltip { opacity:1; visibility:visible; }
.module-chart__price-trend-line-hover-layer-points>button:hover>.module-chart__price-trend-line-tooltip { transform:translate(-50%,calc(-100% - 10px)); }
.module-chart__price-trend-line-hover-layer-points>button:focus-visible>.module-chart__price-trend-line-tooltip { transform:translate(-50%,calc(-100% - 10px)); }
.module-chart__price-trend-line-hover-layer-hitarea>button:hover::before { opacity:1; }
.module-chart__price-trend-line-hover-layer-hitarea>button:focus-visible::before { opacity:1; }

.module-chart__price-trend-line-heading .module-chart__visual-block-heading { margin:0; }

.module-chart__price-trend-line-tooltip-hitarea:hover>.module-chart__price-trend-line-tooltip { opacity:1; visibility:visible; transform:translate(-50%,0); }

.module-chart__price-trend-line-tooltip-hitarea:focus-visible>.module-chart__price-trend-line-tooltip { opacity:1; visibility:visible; transform:translate(-50%,0); }
.module-chart__price-trend-line-tooltip-hitarea:active>.module-chart__price-trend-line-tooltip { opacity:1; visibility:visible; transform:translate(-50%,calc(-100% - 12px)); }

.module-chart__price-trend-line-tooltip-arrow.u-value-direction-rising { color:#6EE7A8; }

.module-chart__price-trend-line-tooltip-arrow.u-value-direction-falling { color:#FF9C8F; }

.module-chart__price-trend-line-tooltip-hitarea:first-child>.module-chart__price-trend-line-tooltip { left:0; transform:translate(0,calc(-100% - 16px)); }

.module-chart__price-trend-line-tooltip-hitarea:first-child:hover>.module-chart__price-trend-line-tooltip { transform:translate(0,calc(-100% - 12px)); }

.module-chart__price-trend-line-tooltip-hitarea:first-child:focus-visible>.module-chart__price-trend-line-tooltip { transform:translate(0,calc(-100% - 12px)); }

.module-chart__price-trend-line-tooltip-hitarea:last-child>.module-chart__price-trend-line-tooltip { left:auto; right:0; transform:translate(0,calc(-100% - 16px)); }

.module-chart__price-trend-line-tooltip-hitarea:last-child:hover>.module-chart__price-trend-line-tooltip { transform:translate(0,calc(-100% - 12px)); }

.module-chart__price-trend-line-tooltip-hitarea:last-child:focus-visible>.module-chart__price-trend-line-tooltip { transform:translate(0,calc(-100% - 12px)); }

.module-chart__rate-bar { --rv-accent:#e43917; --rv-track:#ddd; list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
.u-screen-reader-only-text { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

.module-chart__app-layer-data-story-tile-value.u-value-direction-rising { color:var(--up); }

.module-chart__app-layer-data-story-tile-value.u-value-direction-falling { color:var(--dn); }







.module-chart__rate-bar-fill { display:block; height:100%; border-radius:7px; background:var(--rv-accent,#e43917); transform-origin:left center; animation:none; animation-play-state:paused; }
.module-chart__position-spread-gauge-endpoint-labels { display:flex; justify-content:space-between; align-self:stretch; font-size:13px; font-weight:700; color:var(--mut); margin-top:-2px; }
.module-chart__rate-bar-fill.module-chart__rv-anim-wait { animation-play-state:paused; }
.module-chart__rate-bar-fill.is-rv-anim-go { animation-play-state:running; }
.module-chart__rank-panel-dial>.module-chart__price-trend-line-tooltip { left:50%; bottom:calc(100% + 10px); transform:translate(-50%,4px); min-width:204px; cursor:default; }
.module-chart__rank-panel-dial:hover>.module-chart__price-trend-line-tooltip { opacity:1; visibility:visible; transform:translate(-50%,0); }
.module-chart__rate-bar--dist .module-chart__rate-bar-value { font-size:13.5px; }
.module-chart__rank-panel-dial:focus-visible>.module-chart__price-trend-line-tooltip { opacity:1; visibility:visible; transform:translate(-50%,0); }
.module-chart__review-panel>.module-chart__rate-bar--bullet { margin-top:16px; }
.module-chart__rate-bar--bullet .module-chart__rate-bar-track--bullet { position:relative; height:13px; border-radius:7px; overflow:hidden; background:linear-gradient(to right,color-mix(in srgb,var(--color-text-primary,#1e293b)6%,#fff)0 33.33%,color-mix(in srgb,var(--color-text-primary,#1e293b)11%,#fff)33.33% 66.66%,color-mix(in srgb,var(--color-text-primary,#1e293b)17%,#fff)66.66% 100%); }
.module-chart__rate-bar-marker { animation:none; animation-play-state:paused; }
.module-chart__price-trend-line-tooltip-hitarea>.module-chart__price-trend-line-tooltip { bottom:calc(100% + 9px); transform:translate(-50%,4px); }
.module-chart__rate-bar-marker-cap { font-size:13px; animation:none; animation-play-state:paused; }
.module-chart__rate-bar-marker-cap--r { animation:none; animation-play-state:paused; }
.module-chart__rate-bar-marker.module-chart__rv-anim-wait { animation-play-state:paused; }
.module-chart__rate-bar-marker-cap.module-chart__rv-anim-wait { animation-play-state:paused; }
.module-chart__rate-bar-marker.is-rv-anim-go { animation-play-state:running; }
.module-chart__rate-bar-marker-cap.is-rv-anim-go { animation-play-state:running; }
.module-chart__position-spread-gauge-dial { display:flex; flex-direction:column; align-items:center; gap:2px; padding:9px 11px 10px; border:1px solid var(--line2); border-radius:var(--r-s); background:var(--surf); text-align:center; }
.module-chart__position-spread-gauge-dial svg { width:100%; max-width:104px; height:auto; margin:2px 0 -4px; display:block; }

.module-chart__position-spread-gauge-value { font-size:17px; font-weight:800; letter-spacing:-.03em; line-height:1.15; color:var(--ink); }
.module-chart__position-spread-gauge-question { font-size:13px; font-weight:700; color:var(--mut); letter-spacing:.03em; align-self:stretch; text-align:left; }
.module-chart__position-spread-gauge-hand.is-rv-anim-go { animation-play-state:running; animation:gnd-sweep 1.5s linear .2s both; }

.module-chart__position-spread-gauge-hand { transform-origin:var(--gnd-o); transform:rotate(calc(var(--gnd-a,0)*-1deg)); transform-box:view-box; animation:gnd-turn 1.5s linear .2s both; animation-play-state:paused; }
.u-visual-block-box>.module-chart__position-spread-gauge-dial { border:0; background:transparent; padding:0; }
.module-chart__position-spread-gauge-arc { stroke-dashoffset:0; }
.module-chart__position-spread-gauge-group>.module-chart__position-spread-gauge-dial { border:0; background:transparent; padding:0; }
.module-chart__position-spread-gauge-hand.module-chart__sh-go { animation:gnd-sweep 1.5s linear var(--sh-d,.2s)both; }
.module-chart__position-spread-gauge-dial .module-chart__position-spread-gauge-value { font-size:22px; font-weight:800; letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums; white-space:nowrap; }
.module-chart__position-spread-gauge-dial .module-chart__position-spread-gauge-question { align-self:stretch; text-align:left; font-size:13px; font-weight:700; color:var(--mut); line-height:1.45; word-break:keep-all; }

.module-chart__step-cliff-column .module-chart__price-trend-line-tooltip { left:50%; bottom:calc(100% + 6px); transform:translate(-50%,4px); }
.module-chart__step-cliff-column-content:hover .module-chart__price-trend-line-tooltip { opacity:1; visibility:visible; transform:translate(-50%,0); }
.module-chart__step-cliff-column-content:focus-visible .module-chart__price-trend-line-tooltip { opacity:1; visibility:visible; transform:translate(-50%,0); }
.module-chart__step-cliff-column-content:active .module-chart__price-trend-line-tooltip { opacity:1; visibility:visible; transform:translate(-50%,0); }
.module-chart__step-cliff-column-content:first-child .module-chart__price-trend-line-tooltip { left:0; transform:translate(0,4px); }

.module-chart__step-cliff-column-content:first-child:hover .module-chart__price-trend-line-tooltip { transform:translate(0,0); }

.module-chart__step-cliff-column-content:first-child:focus-visible .module-chart__price-trend-line-tooltip { transform:translate(0,0); }
:is(.module-chart__trp, .module-chart__price-trend-line-dot):hover .module-chart__price-trend-line-tooltip { opacity:1; transform:translateX(-50%)translateY(0); }
.module-chart__step-cliff-column-content:first-child:active .module-chart__price-trend-line-tooltip { transform:translate(0,0); }
:is(.module-chart__trp, .module-chart__price-trend-line-dot):focus-visible .module-chart__price-trend-line-tooltip { opacity:1; transform:translateX(-50%)translateY(0); }
.module-chart__step-cliff-column-content:last-child .module-chart__price-trend-line-tooltip { left:auto; right:0; transform:translate(0,4px); }
.module-chart__step-cliff-column-content:last-child:hover .module-chart__price-trend-line-tooltip { transform:translate(0,0); }
.module-chart__step-cliff-column-content:last-child:focus-visible .module-chart__price-trend-line-tooltip { transform:translate(0,0); }
.module-chart__step-cliff-column-content:last-child:active .module-chart__price-trend-line-tooltip { transform:translate(0,0); }
.module-chart__yearly-print-bar .module-chart__price-trend-line-tooltip { left:50%; bottom:calc(100% + 6px); transform:translate(-50%,4px); min-width:150px; }
.module-chart__yearly-print-bar-content:hover .module-chart__price-trend-line-tooltip { opacity:1; visibility:visible; transform:translate(-50%,0); }
.module-chart__yearly-print-bar-content:focus-visible .module-chart__price-trend-line-tooltip { opacity:1; visibility:visible; transform:translate(-50%,0); }
.module-chart__yearly-print-bar-content:active .module-chart__price-trend-line-tooltip { opacity:1; visibility:visible; transform:translate(-50%,0); }

.module-chart__yearly-print-bar-content:first-child .module-chart__price-trend-line-tooltip { left:0; transform:translate(0,4px); }

.module-chart__yearly-print-bar-content:first-child:hover .module-chart__price-trend-line-tooltip { transform:translate(0,0); }

.module-chart__yearly-print-bar-content:first-child:focus-visible .module-chart__price-trend-line-tooltip { transform:translate(0,0); }

.module-chart__yearly-print-bar-content:first-child:active .module-chart__price-trend-line-tooltip { transform:translate(0,0); }
.module-chart__price-trend-line-band-hitarea>.module-chart__price-trend-line-tooltip-hitarea>.module-chart__price-trend-line-tooltip { left:50%; right:auto; bottom:auto; top:calc(var(--yp,0)*1%); transform:translate(-50%,calc(-100% - 16px)); }
.module-chart__yearly-print-bar-content:last-child .module-chart__price-trend-line-tooltip { left:auto; right:0; transform:translate(0,4px); }
.module-chart__price-trend-line-band-hitarea>.module-chart__price-trend-line-tooltip-hitarea:hover>.module-chart__price-trend-line-tooltip { opacity:1; visibility:visible; transform:translate(-50%,calc(-100% - 12px)); }
.module-chart__yearly-print-bar-content:last-child:hover .module-chart__price-trend-line-tooltip { transform:translate(0,0); }
.module-chart__price-trend-line-band-hitarea>.module-chart__price-trend-line-tooltip-hitarea:focus-visible>.module-chart__price-trend-line-tooltip { opacity:1; visibility:visible; transform:translate(-50%,calc(-100% - 12px)); }
.module-chart__yearly-print-bar-content:last-child:focus-visible .module-chart__price-trend-line-tooltip { transform:translate(0,0); }
.module-chart__price-trend-line-band-hitarea>.module-chart__price-trend-line-tooltip-hitarea:active>.module-chart__price-trend-line-tooltip { opacity:1; visibility:visible; transform:translate(-50%,calc(-100% - 12px)); }
.module-chart__yearly-print-bar-content:last-child:active .module-chart__price-trend-line-tooltip { transform:translate(0,0); }
.module-chart__price-trend-line-band-hitarea>.module-chart__price-trend-line-tooltip-hitarea:first-child>.module-chart__price-trend-line-tooltip { left:0; transform:translate(0,calc(-100% - 16px)); }
.module-chart__price-trend-line-band-hitarea>.module-chart__price-trend-line-tooltip-hitarea:first-child:hover>.module-chart__price-trend-line-tooltip { transform:translate(0,calc(-100% - 12px)); }
.module-chart__price-trend-line-band-hitarea>.module-chart__price-trend-line-tooltip-hitarea:first-child:focus-visible>.module-chart__price-trend-line-tooltip { transform:translate(0,calc(-100% - 12px)); }
.module-chart__price-trend-line-band-hitarea>.module-chart__price-trend-line-tooltip-hitarea:last-child>.module-chart__price-trend-line-tooltip { left:auto; right:0; transform:translate(0,calc(-100% - 16px)); }
.module-chart__price-trend-line-band-hitarea>.module-chart__price-trend-line-tooltip-hitarea:last-child:hover>.module-chart__price-trend-line-tooltip { transform:translate(0,calc(-100% - 12px)); }
.module-chart__price-trend-line-band-hitarea>.module-chart__price-trend-line-tooltip-hitarea:last-child:focus-visible>.module-chart__price-trend-line-tooltip { transform:translate(0,calc(-100% - 12px)); }
.module-chart__price-trend-line-tooltip { position:absolute; left:50%; padding:9px 12px 10px; border-radius:9px; min-width:172px; background:var(--ink); color:var(--surf); z-index:6; box-shadow:0 10px 24px rgba(0,0,0,.3); display:flex; flex-direction:column; gap:3px; text-align:left; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .13s ease,transform .13s ease; top:calc(var(--yp,0)*1%); transform:translate(-50%,4px); border:1px solid var(--line2); bottom:calc(100% + 9px); }
.module-chart__price-trend-line-tooltip-heading { font-size:13px; font-weight:800; letter-spacing:-.01em; padding-bottom:5px; border-bottom:1px solid color-mix(in srgb,var(--surf)22%,transparent); margin-bottom:2px; display:block; color:var(--ink); }
.module-chart__price-trend-line-tooltip-rank { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; white-space:nowrap; color:var(--ink); }
.module-chart__price-trend-line-tooltip-rank>i { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.module-chart__price-trend-line-tooltip-rank>span { opacity:.78; }
.module-chart__price-trend-line-tooltip-rank>b { margin-left:auto; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.module-chart__price-trend-line-tooltip-footnote { margin-top:4px; padding-top:5px; font-size:13px; font-weight:600; opacity:.8; border-top:1px solid color-mix(in srgb,var(--surf)18%,transparent); line-height:1.5; white-space:nowrap; display:block; color:var(--ink); }
.module-chart__price-trend-line-tooltip-footnote b { font-weight:800; opacity:1; }

.module-chart__price-trend-line-tooltip-arrow { font-style:normal; font-weight:800; margin:0 2px 0 1px; }

.module-chart__price-trend-line-tooltip-arrow--up { color:#6EE7A8; }

.module-chart__price-trend-line-tooltip-arrow--down { color:#FF9C8F; }

.module-chart__price-trend-line-hover-layer--figure { position:relative; display:block; container-type:inline-size; }
.module-chart__price-trend-line-hover-layer-points { position:absolute; inset:0; }
.module-chart__price-trend-line-hover-layer-points>i { position:absolute; left:calc(var(--x)*1%); top:calc(var(--yp)*1%); width:var(--d,7px); height:var(--d,7px); margin:calc(var(--d,7px)/ -2)0 0 calc(var(--d,7px)/ -2); display:block; border-radius:50%; background:var(--dc,var(--acc)); pointer-events:none; }

.module-chart__proportion-segment-strip.is-rv-anim-go { transform-origin:left center; animation:bar-fill-x 1.5s linear .2s both; }

.module-chart__price-trend-line-dot>.module-chart__price-trend-line-tooltip { left:50%; bottom:calc(100% + 9px); transform:translate(-50%,4px); }
table td .u-tabular-number { white-space:nowrap; }
.module-chart__price-trend-line-dot:hover>.module-chart__price-trend-line-tooltip { opacity:1; visibility:visible; transform:translate(-50%,0); }
table .u-tabular-number { white-space:nowrap; }
.module-chart__price-trend-line-dot:focus-visible>.module-chart__price-trend-line-tooltip { opacity:1; visibility:visible; transform:translate(-50%,0); }
.module-chart__price-trend-line-dot:first-of-type>.module-chart__price-trend-line-tooltip { left:0; transform:translate(0,4px); }
.module-chart__price-trend-line-dot:first-of-type:hover>.module-chart__price-trend-line-tooltip { transform:translate(0,0); }
.module-chart__price-trend-line-dot:first-of-type:focus-visible>.module-chart__price-trend-line-tooltip { transform:translate(0,0); }
.module-chart__price-trend-line-dot:last-of-type>.module-chart__price-trend-line-tooltip { left:auto; right:0; transform:translate(0,4px); }
.module-chart__price-trend-line-dot:last-of-type:hover>.module-chart__price-trend-line-tooltip { transform:translate(0,0); }
.module-chart__price-trend-line-dot:last-of-type:focus-visible>.module-chart__price-trend-line-tooltip { transform:translate(0,0); }

.module-chart__price-trend-line-content--stack .module-chart__price-trend-line-band-hitarea>.module-chart__price-trend-line-tooltip-hitarea>.module-chart__price-trend-line-tooltip { left:50%; right:auto; bottom:auto; top:calc(var(--yp)*1%); transform:translate(-50%,calc(-100% - 16px)); }
.module-chart__price-trend-line-content--stack .module-chart__price-trend-line-band-hitarea>.module-chart__price-trend-line-tooltip-hitarea:hover>.module-chart__price-trend-line-tooltip { opacity:1; visibility:visible; transform:translate(-50%,calc(-100% - 12px)); }
.module-chart__price-trend-line-content--stack .module-chart__price-trend-line-band-hitarea>.module-chart__price-trend-line-tooltip-hitarea:focus-visible>.module-chart__price-trend-line-tooltip { opacity:1; visibility:visible; transform:translate(-50%,calc(-100% - 12px)); }
.module-chart__price-trend-line-content--stack .module-chart__price-trend-line-band-hitarea>.module-chart__price-trend-line-tooltip-hitarea:active>.module-chart__price-trend-line-tooltip { opacity:1; visibility:visible; transform:translate(-50%,calc(-100% - 12px)); }
.module-chart__price-trend-line-content--stack .module-chart__price-trend-line-band-hitarea>.module-chart__price-trend-line-tooltip-hitarea:first-child>.module-chart__price-trend-line-tooltip { transform:translate(-50%,20px); }
.module-chart__position-spread-gauge-needle { transform-box:view-box; transform-origin:var(--ox)var(--oy); transform:rotate(var(--rot,0deg)); animation:none; }
.module-chart__price-trend-line-content--stack .module-chart__price-trend-line-band-hitarea>.module-chart__price-trend-line-tooltip-hitarea:first-child:hover>.module-chart__price-trend-line-tooltip { transform:translate(-50%,16px); }
.module-chart__price-trend-line-content--stack .module-chart__price-trend-line-band-hitarea>.module-chart__price-trend-line-tooltip-hitarea:first-child:focus-visible>.module-chart__price-trend-line-tooltip { transform:translate(-50%,16px); }
.module-chart__price-trend-line-content--stack .module-chart__price-trend-line-band-hitarea>.module-chart__price-trend-line-tooltip-hitarea:first-child:active>.module-chart__price-trend-line-tooltip { transform:translate(-50%,16px); }
.module-chart__table-scroll-hint+.u-visual-block-box { margin-top:2px; }
.module-chart__price-trend-line-figure { margin:0; padding:0; border:0; }
.module-chart__price-trend-line-figure>figcaption { margin-top:8px; font-size:13px; color:var(--mut); line-height:1.55; }
.module-chart__price-trend-line-figure--flat { margin:0; }
.module-chart__price-trend-line-figure--flat>figcaption { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
figure.module-chart__price-trend-line-titled-box { margin:0 0 14px; }
.module-chart__two figure.module-chart__price-trend-line-titled-box { margin-bottom:0; }
caption.u-screen-reader-only-text { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

.module-chart__app-layer-meta-tile-value.u-tabular-number { overflow:visible; text-overflow:clip; white-space:nowrap; }
@media (max-width:1100px) {
.module-chart__visual-block-box--split { grid-template-columns:1fr; gap:14px; }
}
@media (max-width:820px) {

.module-chart__price-trend-line-titled-box { padding-left:12px; padding-right:12px; }
.u-visual-block-box.module-chart__key-facts-visual-box-table-scroll { padding-left:12px; padding-right:12px; }
}
@media (max-width:520px) {

}
@media (prefers-reduced-motion:no-preference) {
.module-chart__position-spread-gauge-needle.module-chart__sh-go { animation-play-state:running; }
.module-chart__box-whisker-box.is-rv-anim-go { transform-origin:left center; animation:tg-bar-fill 1.5s linear .2s both; }
.module-chart__box-whisker-width.is-rv-anim-go { transform-origin:left center; animation:tg-bar-fill 1.5s linear .2s both; }
.module-chart__box-whisker>li:nth-child(1) .module-chart__box-whisker-box { animation-delay:.20s; }
.module-chart__box-whisker>li:nth-child(2) .module-chart__box-whisker-box { animation-delay:.24s; }
.module-chart__box-whisker>li:nth-child(3) .module-chart__box-whisker-box { animation-delay:.28s; }
.module-chart__box-whisker>li:nth-child(4) .module-chart__box-whisker-box { animation-delay:.32s; }
.module-chart__box-whisker>li:nth-child(5) .module-chart__box-whisker-box { animation-delay:.36s; }
.module-chart__box-whisker>li:nth-child(6) .module-chart__box-whisker-box { animation-delay:.40s; }
.module-chart__box-whisker>li:nth-child(7) .module-chart__box-whisker-box { animation-delay:.44s; }
.module-chart__box-whisker>li:nth-child(8) .module-chart__box-whisker-box { animation-delay:.48s; }
.module-chart__box-whisker>li:nth-child(9) .module-chart__box-whisker-box { animation-delay:.52s; }
.module-chart__box-whisker>li:nth-child(10) .module-chart__box-whisker-box { animation-delay:.56s; }
.module-chart__box-whisker>li:nth-child(n+11) .module-chart__box-whisker-box { animation-delay:.60s; }
.module-chart__proportion-bar-track>i.is-rv-anim-go { transform-origin:left center; animation:tg-bar-fill 1.5s linear .2s both; }
.module-chart__position-spread-gauge-needle { animation-duration:1.5s; animation-timing-function:cubic-bezier(.22,.68,.3,1); animation-delay:.2s; animation-fill-mode:both; animation-play-state:paused; animation-name:tg-needle; }
.module-chart__position-spread-gauge-needle.is-rv-anim-go { animation-play-state:running; }
}
@media (prefers-reduced-motion:no-preference) and (scripting:none) {
.module-chart__position-spread-gauge-needle { animation-play-state:running; }
}
@media (prefers-reduced-motion:reduce) {
.module-chart__proportion-bar-track>i { animation:none; }
.module-chart__rate-bar-fill { animation:none; }
.module-chart__rate-bar-marker { animation:none; }
.module-chart__rate-bar-marker-cap { animation:none; }
.module-chart__position-spread-gauge-hand { transform:none; animation:none; }
.module-chart__position-spread-gauge-hand.module-chart__sh-go { transform:none; animation:none; }
.module-chart__position-spread-gauge-arc { stroke-dashoffset:0; animation:none; }
.module-chart__position-spread-gauge-arc.module-chart__sh-go { stroke-dashoffset:0; animation:none; }
.module-chart__position-spread-gauge-hand.is-rv-anim-go { transform:none; animation:none; }
.module-chart__position-spread-gauge-arc.is-rv-anim-go { stroke-dashoffset:0; animation:none; }
.module-chart__price-trend-line-tooltip { transition:none; }
.module-chart__proportion-segment-strip { animation:none; }
}
@media (scripting:none) {
.module-chart__position-spread-gauge-hand { animation:none; }
.module-chart__position-spread-gauge-arc { animation:none; }
.module-chart__proportion-segment-strip { animation:none; }
}
.module-chart__year-histogram-column:hover .module-chart__price-trend-line-tooltip { opacity:1; visibility:visible; }
.module-chart__year-histogram-column:focus-visible .module-chart__price-trend-line-tooltip { opacity:1; visibility:visible; }
.module-chart__year-histogram-column:first-child .module-chart__price-trend-line-tooltip { left:0; transform:none; }
.module-chart__year-histogram-column:last-child .module-chart__price-trend-line-tooltip { left:auto; right:0; transform:none; }
.module-chart__price-trend-line-tooltip-delta { font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.module-chart__price-trend-line-tooltip-delta--up { color:#6EE7A8; }
.module-chart__price-trend-line-tooltip-delta--down { color:#FF9C8F; }
.module-chart__price-trend-line-tooltip-delta--flat { color:var(--surf); opacity:.68; }

.module-chart__price-trend-line-titled-box h4 { margin:0 0 10px; font-size:15px; font-weight:700; color:var(--ink2); }
td.u-tabular-number { font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }

.module-chart__price-trend-line-tooltip-heading, .module-chart__price-trend-line-tooltip-rank, .module-chart__price-trend-line-tooltip-footnote { color: inherit; }
.module-chart__box-whisker-legend {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin: 10px 0 0; padding: 0; list-style: none;
  font-size: 13px; color: var(--mut);
}
.module-chart__box-whisker-legend-item { display: flex; align-items: center; gap: 7px; }
.module-chart__box-whisker-legend-glyph { flex: 0 0 auto; display: block; }
.module-chart__box-whisker-legend-glyph--range { width: 22px; height: 2px;  background: var(--line2); }
.module-chart__box-whisker-legend-glyph--box { width: 22px; height: 14px; border-radius: 2px; background: var(--line2); }
.module-chart__box-whisker-legend-glyph--typical { width: 3px;  height: 18px; border-radius: 1px; background: var(--line2); }
.module-chart__box-whisker-legend-label { min-width: 0; }
.module-chart__box-whisker-title > .module-chart__rate-bar-marker-cap {
  position: absolute;
  top: 100%;
  margin-left: 0;
  margin-top: 6px;
  transform: translateX(0);
}
.module-chart__box-whisker-title > .module-chart__rate-bar-marker-cap--r {
  margin-left: 0;
  transform: translateX(3px);
}
.module-chart__box-whisker-title:has(> .module-chart__rate-bar-marker-cap) {
  margin-bottom: 27px;
}
@media (max-width:640px) {
.module-chart__box-whisker .module-chart__rate-bar-marker-cap { display: none; }
.module-chart__box-whisker-title:has(> .module-chart__rate-bar-marker-cap) { margin-bottom: 0; }
}
.module-chart__type-sparkline-card { position: relative; }
.module-chart__box-whisker-scale-axis--placed {
  display: block;
  position: relative;
  height: 18px;
}
.module-chart__box-whisker-scale-axis--placed > span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
.module-chart__box-whisker-scale-axis--placed > span:first-child { transform: translateX(0); }
.module-chart__box-whisker-scale-axis--placed > span:last-child { transform: translateX(-100%); }
.module-chart__box-whisker-scale-axis-note {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--mut);
}
.module-chart__ranked-thumbnail-list-standout-compare-rowbh > .module-chart__rate-bar-value {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}
@media (max-width: 760px) {
.module-chart__rate-bar-value { white-space: normal; min-width: 0; word-break: keep-all; }
.module-chart__rate-bar-item { min-width: 0; }
}
.module-chart__stat-radar-hover > .module-chart__price-trend-line-hover-layer-points { pointer-events:none; }
.module-chart__stat-radar-hover > .module-chart__price-trend-line-hover-layer-points > button { pointer-events:auto; }

@media (max-width: 640px) {

}
.module-chart {
  margin: 24px 0;
  padding: 20px;
  background: var(--color-bg-card, #fff);
  border-radius: var(--color-radius-sm, 8px);
  border: 1px solid var(--color-border, #e5e7eb);
}
.module-chart__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-primary, #111827);
  margin: 0 0 8px;
}
.module-chart__caption {
  font-size: 13px;
  color: var(--color-text-secondary, #6b7280);
  margin: 0 0 16px;
  line-height: 1.6;
}
.module-chart__bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: fit-content(160px) minmax(0, 1fr) max-content;
  align-items: center;
  gap: 10px 12px;
}
.module-chart__row {
  display: contents;
}
.module-chart__label {
  font-size: 14px;
  color: var(--color-text-primary, #111827);
  word-break: keep-all;
  line-height: 1.4;
}
.module-chart__track {
  flex: 1 1 auto;
  height: 22px;
  background: var(--color-bg-subtle, #eef2f7);
  border-radius: 4px;
  overflow: hidden;
}
.module-chart__bar {
  display: block;
  height: 100%;
  min-width: 2px;
  background: var(--color-accent, #3b82f6);
  border-radius: 4px;
  transition: width .3s ease;
}
.module-chart__value {
  flex: 0 0 auto;
  min-width: 44px;
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary, #111827);
  font-variant-numeric: tabular-nums;
}
.module-chart__note {
  font-size: 12px;
  color: var(--color-text-secondary, #6b7280);
  margin: 14px 0 0;
  line-height: 1.6;
}
@media (max-width: 640px) {
.module-chart {
    padding: 16px;
  }
.module-chart__label {
    font-size: 13px;
  }
}
.module-chart__svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 4px 0 2px;
  overflow: visible;
  font-variant-numeric: tabular-nums;
}
.module-chart--sparkline .module-chart__svg { max-width: 240px; }
.module-chart--donut .module-chart__svg { max-width: 280px; margin-inline: auto; }
.module-chart__legend {
  list-style: none;
  margin: 6px 0 2px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  justify-content: center;
}
.module-chart__legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 1.4;
}
.module-chart__legend-swatch {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 3px;
}
.module-chart__legend-label { color: var(--color-text, inherit); }
.module-chart__legend-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.module-chart__svg.is-donut-slice-lit .module-chart__seg { opacity: .42; }
.module-chart__svg.is-donut-slice-lit .module-chart__seg.is-donut-slice-on { opacity: 1; stroke-width: 38; }
.module-chart__legend-item.module-chart__donut-legend-lit {
  background: var(--color-bg-subtle, #eef2f7);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--color-border, #d5dce6);
  font-weight: 800;
}
.module-chart__legend-item { padding: 2px 6px; margin: -2px -6px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
.module-chart__seg { transition: none; }
}
.module-chart--range .module-chart__svg, .module-chart--heatmap .module-chart__svg { max-width: 100%; }
.module-chart__line {
  fill: none;
  stroke: var(--color-accent, #3b82f6);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.module-chart__area { fill: var(--color-accent, #3b82f6); opacity: .10; stroke: none; }
/* 🔴 2026-09-13 «점 테두리»(사용자 승인) — 사용자 지적: 「라이브는 포인트가 조금 크고,
   추이선과 붙어 있지 않아」. 그 «떨어져 보임»은 간격이 아니라 «흰 테두리»가 만든다.
   라이브 실측 원문: <circle … r="4" fill="#2563eb" stroke="#fff" stroke-width="2"/>
   흰색은 «선이 지나가는 자리를 가리는» 역할이라 배경색이 아니라 종이색으로 둔다. */
.module-chart__dot { fill: var(--color-accent, #3b82f6); stroke: #fff; stroke-width: 2; }
/* 🔴 2026-09-13 «둘째 계열»(사용자 승인 「정석으로 해. 라이브 참고해서」) ─────────────────────
   원본 chart.php 의 다계열 차트는 계열마다 «선 하나 + 옅은 면 하나»를 겹쳐 그린다(실측 원문):
       <polygon … fill="{색}" opacity="0.06"/>  <polyline … stroke="{색}" stroke-width="2"
                 stroke-linejoin="round" stroke-linecap="round"/>
   🔴 색은 리터럴로 박지 않는다 — 색을 정하는 곳은 ④ 사이트 층(토큰)이다.
      둘째 계열은 --gold 를 쓴다(추이 변형이 이미 쓰던 토큰과 같게 맞춘다 · 배포본 실측 #FBBF24).
   ── */
/* 🔴 2026-09-13 «2계열 색»(사용자 지시) — 원본 실측으로 규칙이 갈린다:
       1계열 차트  선 #2563eb (브랜드 파랑) 하나
       2계열 차트  첫째 #dc2626(빨강) · 둘째 #2563eb(파랑)
   즉 «계열이 둘일 때만» 색 규칙이 바뀐다. :has() 로 그 경우만 골라 1계열은 건드리지 않는다.
   🔴 색은 토큰 뒤에 둔다 — 정하는 곳은 ④ 사이트 층이다. 기본값만 원본 값으로 적는다. */
/* 🔴 :not(--2) 이 «반드시» 있어야 한다 — 둘째 계열 요소도 밑동 클래스(__line·__area·__dot)를
   함께 달고 있어서, 빼지 않으면 이 규칙이 둘째 계열까지 첫째 색으로 칠한다.
   실제로 그렇게 났다(2026-09-13: 두 선이 «둘 다 빨강»으로 나옴 — :has() 규칙이 명시도에서
   .module-chart__line--2 를 이겼다). */
.module-chart__svg:has(.module-chart__line--2) .module-chart__line:not(.module-chart__line--2) { stroke: var(--chart-series-1, #dc2626); }
.module-chart__svg:has(.module-chart__line--2) .module-chart__area:not(.module-chart__area--2) { fill: var(--chart-series-1, #dc2626); }
.module-chart__svg:has(.module-chart__line--2) .module-chart__dot:not(.module-chart__dot--2) { fill: var(--chart-series-1, #dc2626); }
.module-chart__svg:has(.module-chart__line--2) .module-chart__hoverdot:not(.module-chart__hoverdot--2) { fill: var(--chart-series-1, #dc2626); }
.module-chart__line--2 { stroke: var(--chart-series-2, #2563eb); }
.module-chart__area--2 { fill: var(--chart-series-2, #2563eb); }
.module-chart__dot--2 { fill: var(--chart-series-2, #2563eb); }
/* 🔴 2026-09-13 «선 굵기 조건»(사용자 승인) — 원본에 조건이 «있다»(chart.php:1956 실측):
       stroke-width = ($_has_sN ? 2 : 2.5)    다계열이면 2 · 단일 계열이면 2.5
   🔴 그 수를 그대로 쓰면 우리 쪽이 가늘어 보인다 — 그리는 «배율»이 다르기 때문이다:
       원본 viewBox 580 → 화면 약 700px = 1.21배 «확대»
       우리 viewBox 720 → 화면 약 700px = 0.97배 «축소»     ⇒ 같은 수가 약 22% 작게 그려진다
   그래서 720/580 = 1.24 를 곱해 «화면에서 같은 굵기»가 되게 한다(2.5→3 · 2→2.5).
   🔴 .module-chart__line 은 line·area·spark 세 변형이 함께 쓰는 이름이라 그냥 바꾸면 번진다.
      축선을 그리는 svg(= line 변형)만 고르도록 좁힌다. */
.module-chart__svg:has(.module-chart__axis-line) .module-chart__line { stroke-width: 3; }
.module-chart__svg:has(.module-chart__line--2) .module-chart__line { stroke-width: 2.5; }
/* 🔴 마지막 점만 크게 — 원본 r = ($is_last ? 5 : 4). 같은 배율 환산으로 5→6. */
.module-chart__dot--last { r: 6; }
/* 🔴 2026-09-13 «점 위 값 라벨»(지휘자 판정 후 이식) — 원본은 점마다 값을 «직접» 찍는다
   (chart.php:1993 실측: font-size 10 · fill #475569 / 마지막 점은 :1953 font-size 11 · 700 · 계열색).
   🔴 왜 필요한가 — 우리 차트는 «호버해야» 값이 보인다. 모바일에는 호버가 없어 그 값이 사실상
      안 보인다. 라이브는 호버 없이도 읽힌다.
   🔴 .module-chart__vlabel 은 range 변형이 쓰는 이름이라(13px/700) 그 자리를 건드리지 않도록
      «변형 클래스»로 얹는다. 크기는 우리 viewBox 배율(1.24) 환산: 10→12 · 11→14. */
/* 🔴 2026-09-13 «기준선 위/아래 분할»(사이트 전체 기준 이식) — 값은 원본 그대로다:
       면  above rgba(220,38,38,.08) · below rgba(37,99,235,.08)   (chart.php:271)
       선  above #dc2626 · below #2563eb · stroke-width 2.5        (chart.php:276)
   🔴 색을 리터럴로 박지 않고 토큰 뒤에 둔다 — 사이트가 바꿀 수 있어야 한다.
      기존 --up/--dn 에 붙이지 «않았다»: 우리 토큰은 --up 이 초록(서양 관례)인데 여기 필요한 것은
      「기준 위=빨강」(한국 시세 관례)이라 뜻이 어긋난다. 이름을 따로 둔다.
   선 굵기는 우리 viewBox 배율(1.24) 환산으로 2.5 → 3. */
.module-chart__split--above { fill: var(--chart-above-fill, rgba(220,38,38,.08)); stroke: none; }
.module-chart__split--below { fill: var(--chart-below-fill, rgba(37,99,235,.08)); stroke: none; }
.module-chart__seg-line { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.module-chart__seg-line--above { stroke: var(--chart-above, #dc2626); }
.module-chart__seg-line--below { stroke: var(--chart-below, #2563eb); }
.module-chart__baseline-label { font-size: 13px; } /* HBS 09-28 · 12px → 13px */
.module-chart__vlabel--point { fill: var(--color-text-secondary, #475569); font-size: 13px; font-weight: 400; } /* HBS 09-28 · 12px → 13px */
.module-chart__vlabel--point-last { fill: var(--color-accent, #3b82f6); font-size: 14px; font-weight: 700; }
.module-chart__grid { stroke: var(--color-border, #e5e7eb); stroke-width: 1; stroke-dasharray: 3 4; }
.module-chart__axis-line { stroke: var(--color-border, #e5e7eb); stroke-width: 1; }
.module-chart__axis { fill: var(--color-text-secondary, #6b7280); font-size: 13px; }
.module-chart__vlabel { fill: var(--color-text-primary, #111827); font-size: 13px; font-weight: 700; }
.module-chart__spark { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.module-chart__spark--up, .module-chart__spark-dot--up { stroke: #dc2626; }
.module-chart__spark--down, .module-chart__spark-dot--down { stroke: #2563eb; }
.module-chart__spark-dot--up { fill: #dc2626; }
.module-chart__spark-dot--down { fill: #2563eb; }
.module-chart__range-track { fill: var(--color-bg-subtle, #eef2f7); }
.module-chart__range-fill { fill: var(--color-accent, #3b82f6); opacity: .35; }
.module-chart__marker { fill: var(--color-accent, #3b82f6); stroke: #fff; stroke-width: 2; }
.module-chart__seg { transition: stroke-dasharray .6s ease, opacity .16s ease, stroke-width .16s ease; }
.module-chart__donut-center { fill: var(--color-text-primary, #111827); font-size: 30px; font-weight: 700; }
.module-chart__donut-sub { fill: var(--color-text-secondary, #6b7280); font-size: 13px; }
.module-chart__wick { stroke-width: 1.5; }
.module-chart__candle--up { fill: var(--chart-up, #dc2626); stroke: var(--chart-up, #dc2626); }   /* 2026-10-09 hex 고정 → 토큰(오름=빨강 · IV-027) */
.module-chart__candle--down { fill: var(--chart-down, #2563eb); stroke: var(--chart-down, #2563eb); }
.module-chart__cell { fill: var(--color-accent, #3b82f6); }
.module-chart__cell--empty { fill: var(--color-bg-subtle, #eef2f7); fill-opacity: 1; }
.module-chart__cell-val { fill: var(--color-text-primary, #111827); font-size: 12px; }
@media (prefers-reduced-motion: no-preference) {
.module-chart__line, .module-chart__spark {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: module-chart-draw 1s ease forwards;
  }
}
@media (max-width: 640px) {
.module-chart__axis { font-size: 13px; }
.module-chart__donut-center { font-size: 26px; }
}

@media (max-width: 640px) {

}
.module-chart__briefing h3, .module-chart__wrap h3, .module-chart__calc-results h3, .module-chart__calc-result h3 {
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
}

@media (max-width: 640px) {

}

.module-chart { position: relative; }
.module-chart__svg[data-points] { cursor: crosshair; }
.module-chart__crosshair { stroke: #94a3b8; stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
/* 🔴 2026-09-13 «호버 강조»(사용자 승인) — 사용자 지적: 「호버 시 해당 포인트의 크기가 더 커져서
   강조가 돼」. 원본 규칙(live modules.css 실측): .cp:hover circle { visibility:visible; r:7 }
   옛 값은 r="3.5" 라 «평소 점(4)보다 오히려 작아» 호버가 강조가 아니라 축소로 보였다.
   7 × 1.24(우리 viewBox 배율 환산) ≈ 9. 테두리도 원본 2 에 맞춘다.
   🔴 색은 리터럴 #1d4ed8 이었다 — 사이트가 토큰을 바꿔도 이 점만 파랗게 남는 자리였다. */
.module-chart__hoverdot { stroke: #fff; stroke-width: 2.5; pointer-events: none; }   /* 🔴 2026-09-23 fill 제거 — 파일 끝 라이브 정본 블록(:1568 modules.css:8865 fill:#1d4ed8)과 중복. 게이트 지시대로 정본 쪽 값을 남긴다. */
.module-chart__tip { position: absolute; top: 32px; transform: translateX(-50%); display: none; flex-direction: column; gap: 2px; min-width: 84px; background: rgba(17, 24, 39, .92); color: #fff; font-size: 13px; line-height: 1.5; padding: 7px 10px; border-radius: 7px; text-align: left; pointer-events: none; white-space: nowrap; z-index: 6; }
.module-chart__tip:not([hidden]) { display: flex; }
/* 🔴 2026-09-13 «말풍선 위계»(사용자 승인) — 옛 모습은 날짜·값·부가가 «전부 13px 같은 굵기»라
   무엇이 값인지 눈에 안 들어왔다. 원본은 위계가 뚜렷하다(실측 원문):
       날짜  font-size 10 · #64748b        값  font-size 13 · font-weight 700 · #1e293b
       「전일 대비 …」  font-size 10 · #64748b
   원본은 SVG 안이라 1.21배로 확대되어 화면에서는 값이 약 16px 이 된다 — 우리 말풍선은 HTML 이라
   그 «화면 크기»를 그대로 적는다(사용자: 「가격이 굵게 최소 16px」). */
/* 날짜 — 원본은 굵기를 주지 않는다(font-size 10 · fill #64748b). <strong> 이라 기본이 굵으므로
   명시로 되돌린다. 내가 600 을 준 것이 라이브보다 무거웠다. */
.module-chart__tip strong { color: #fbbf24; margin-bottom: 1px; font-size: 13px; font-weight: 400; opacity: .85; } /* HBS 09-28 · 12px → 13px */
.module-chart__tip-row { font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 700; line-height: 1.35; }
.module-chart__tip-row--sub { font-size: 13px; font-weight: 400; opacity: .8; } /* HBS 09-28 · 12px → 13px */
/* 🔴 2026-09-13 «계열이 둘이면 굵기를 통일한다»(원본 설계 원칙 · chart.php:2119 주석 원문:
   「2계열=대등 표기(굵기 통일·구분은 색점)」).
       1계열(:2132)  font-weight="700"      ← 값이 하나뿐이라 그 값을 굵게 강조한다
       2계열(:2119)  굵기 지정 «없음»        ← 굵기로 우열을 주지 않는다. 구분은 색점이 진다
   말풍선은 svg 밖(형제)이라 figure 에서 «둘째 계열이 있는가»를 보고 가른다. */
.module-chart:has(.module-chart__line--2) .module-chart__tip-row { font-weight: 400; }
/* 🔴 2026-09-13 «말풍선 계열 색 원»(사용자 지시) — 원본 <tspan fill="{계열색}">● </tspan> 에 해당.
   여러 계열이 한 말풍선에 들어갈 때 «어느 선의 값인지»를 색으로 가린다. */
/* 🔴 크기를 px 로 박지 않고 em 으로 둔다(사용자 지적 「원형 색상 포인트 사이즈 글크기와 맞춰」).
   줄마다 글자 크기가 다르므로(값 16px · 부가 12px) px 고정이면 한쪽에서 어긋난다.
   .55em = 값 줄에서 약 8.8px · 부가 줄에서 약 6.6px — 글자와 함께 커지고 함께 작아진다. */
.module-chart__tip-dot { display: inline-block; width: .55em; height: .55em; border-radius: 50%; margin-right: .38em; vertical-align: .04em; }
/* 둘째 계열 호버 점 — 선·면과 같은 토큰을 쓴다. */
.module-chart__hoverdot--2 { fill: var(--chart-series-2, #2563eb); }
/* 🔴 2026-09-13 «증감 화살표 색»(사용자 지시) — 원본은 «방향»으로 가른다(계열색과 무관):
       <tspan fill="#dc2626">▲</tspan>   오름 = 빨강 (한국 시세 관례)
       <tspan fill="#2563eb">▼</tspan>   내림 = 파랑
   보합은 화살표 자체를 안 쓰므로 색도 없다. */
/* 🔴 2026-09-13 «범례를 y축 자리에서 시작»(사용자 지시 「차트 전체 왼쪽 기준 말고」).
   원본은 범례가 SVG «안»에 있어 자연히 축 옆에서 시작한다(실측: 축 x=50 · 범례 circle cx=60).
   우리 범례는 SVG 밖 HTML 이라 상자 왼쪽 끝에 붙었다. 그래서 축 자리만큼 안으로 들인다.
   66 = line 변형의 y축 x 좌표 · 720 = viewBox 너비 → 9.1667%. svg 가 상자 너비를 꽉 채우고
   가로 비율이 유지되므로(실측 647×216 = 정확히 3:1) 이 비율이 곧 화면 위치와 같다.
   🔴 line 변형 전용 modifier 라 추이(trend) 변형 범례는 건드리지 않는다(회귀 0). */
.module-chart__price-trend-line-legend--plot { padding-left: calc(66 / 720 * 100%); }
/* 🔴 굵기를 «주지 않는다» — 줄의 굵기를 그대로 물려받는다(사용자 지적 「여전히 굵은 글자」).
   원본은 증감에 색만 준다: (<tspan fill="#2563eb">▼</tspan>-1달러) — font-weight 없음.
   내가 700 을 넣어 2계열에서 「굵기 통일」 원칙을 스스로 깨고 있었다. */
.module-chart__tip-chg { margin-left: 4px; }
.module-chart__tip-chg--up { color: var(--chart-up, #dc2626); }
.module-chart__tip-chg--down { color: var(--chart-down, #2563eb); }
/* 보합 — 방향이 «없으므로» 방향색을 주지 않는다. 흐리게 두어 등락과 한눈에 갈린다. */
.module-chart__tip-chg--flat { opacity: .65; }
.module-chart__band { cursor: crosshair; transition: fill .1s; }
.module-chart__band:hover { fill: rgba(99,102,241,.07); }
.module-chart__plabel { font-size: 10px; fill: #475569; }
.module-chart__baseline { stroke: #cbd5e1; stroke-width: 1; stroke-dasharray: 5,4; opacity: .8; }

.module-chart__panel .module-chart__badge small { font-size:13px;font-weight:400;opacity:.75; } /* HBS 09-28 · 11px → 13px */

.module-chart__panel .module-chart__chart-svg { display:block;width:100%;max-width:100%; }
.module-chart__panel .module-chart__svg--mob { display:none; }
@media (max-width:640px) {
.module-chart__panel .module-chart__svg--desk { display:none; }
.module-chart__panel .module-chart__svg--mob { display:block; }
}

.module-chart__panel .module-chart__cp { cursor:pointer; }
.module-chart__panel .module-chart__cp .module-chart__ct { visibility:hidden;pointer-events:none; }
.module-chart__panel .module-chart__cp:hover .module-chart__ct, .module-chart__panel .module-chart__cp:focus .module-chart__ct { visibility:visible; }

.module-chart__panel .module-chart__cp:hover .module-chart__cp-band, .module-chart__panel .module-chart__cp:focus .module-chart__cp-band { fill:rgba(99,102,241,.07); }
.module-chart__panel .module-chart__cp-guide { visibility:hidden; stroke:#94a3b8; stroke-width:1; stroke-dasharray:2,3; pointer-events:none; }
.module-chart__panel .module-chart__cp:hover .module-chart__cp-guide, .module-chart__panel .module-chart__cp:focus .module-chart__cp-guide { visibility:visible; }

@media (max-width:640px) {

}

.module-chart--rich .module-chart__chart-svg { display:block;width:100%;max-width:100%; }
.module-chart--rich .module-chart__svg--mob { display:none; }
@media (max-width:640px) {
.module-chart--rich .module-chart__svg--desk { display:none; }
.module-chart--rich .module-chart__svg--mob { display:block; }
}
.module-chart--rich .module-chart__cp { cursor:pointer; }
.module-chart--rich .module-chart__cp .module-chart__ct { visibility:hidden;pointer-events:none; }
.module-chart--rich .module-chart__cp:hover .module-chart__ct, .module-chart--rich .module-chart__cp:focus .module-chart__ct { visibility:visible; }
.module-chart--rich .module-chart__cp circle { visibility:hidden; }
.module-chart--rich .module-chart__cp:hover circle, .module-chart--rich .module-chart__cp:focus circle { visibility:visible; r:7; }
.module-chart--rich .module-chart__cp:hover .module-chart__cp-band, .module-chart--rich .module-chart__cp:focus .module-chart__cp-band { fill:rgba(99,102,241,.07); }
.module-chart--rich .module-chart__cp-guide { visibility:hidden; stroke:#94a3b8; stroke-width:1; stroke-dasharray:2,3; pointer-events:none; }
.module-chart--rich .module-chart__cp:hover .module-chart__cp-guide, .module-chart--rich .module-chart__cp:focus .module-chart__cp-guide { visibility:visible; }
.module-chart--scatter .module-chart__cp, .module-chart--range .module-chart__cp { cursor:pointer; }
.module-chart--scatter .module-chart__cp .module-chart__ct, .module-chart--range .module-chart__cp .module-chart__ct { visibility:hidden;pointer-events:none; }
.module-chart--scatter .module-chart__cp:hover .module-chart__ct, .module-chart--scatter .module-chart__cp:focus .module-chart__ct, .module-chart--range .module-chart__cp:hover .module-chart__ct, .module-chart--range .module-chart__cp:focus .module-chart__ct { visibility:visible; }
.module-chart--scatter .module-chart__cp:hover .module-chart__cp-band, .module-chart--scatter .module-chart__cp:focus .module-chart__cp-band, .module-chart--range .module-chart__cp:hover .module-chart__cp-band, .module-chart--range .module-chart__cp:focus .module-chart__cp-band { fill:rgba(99,102,241,.07); }
.module-chart--scatter .module-chart__cp-guide, .module-chart--range .module-chart__cp-guide { visibility:hidden; stroke:#94a3b8; stroke-width:1; stroke-dasharray:2,3; pointer-events:none; }
.module-chart--scatter .module-chart__cp:hover .module-chart__cp-guide, .module-chart--scatter .module-chart__cp:focus .module-chart__cp-guide, .module-chart--range .module-chart__cp:hover .module-chart__cp-guide, .module-chart--range .module-chart__cp:focus .module-chart__cp-guide { visibility:visible; }
.module-chart__overall-score, .module-chart__rate-bar { --rv-accent:#e43917; --rv-track:#ddd; }
.module-chart__review-panel > .module-chart__rate-bar { margin-top:0; }
.module-chart__rate-bar { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
.module-chart__rate-bar-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:6px; min-height:20px; }
.module-chart__rate-bar-label { font-size:13.5px; font-weight:600; color:var(--color-text-body); word-break:keep-all; }
.module-chart__rate-bar-label a { color:var(--color-primary-dark,#1e40af); font-weight:700; text-decoration:underline dotted 1px; text-underline-offset:3px; }
.module-chart__rate-bar-label a:hover { text-decoration:underline; }
.module-chart__rate-bar-value { font-size:14px; font-weight:800; color:var(--color-text-primary); font-variant-numeric:tabular-nums; white-space:nowrap; }
.module-chart__rate-bar-track { height:13px; border-radius:7px; background:var(--rv-track,#ddd); overflow:hidden; }
.module-chart__rate-bar-fill {
  display:block; height:100%; border-radius:7px; background:var(--rv-accent,#e43917);
  transform-origin:left center; animation:module-rate-bar-fill 1.5s linear .2s both;
  animation-play-state:paused;
}
.module-chart__rate-bar--tiercolor .module-chart__rate-bar-fill { background:var(--dv-accent,#94a3b8); }
@media (prefers-reduced-motion: reduce) {
.module-chart__rate-bar-fill, .module-chart__overall-score--circle .module-chart__overall-score-tile { animation:none; }
}
.module-chart__rate-bar-fill.module-chart__rv-anim-wait, .module-chart__overall-score--circle .module-chart__overall-score-tile.module-chart__rv-anim-wait { animation-play-state:paused; }
.module-chart__rate-bar-fill.is-rv-anim-go, .module-chart__overall-score--circle .module-chart__overall-score-tile.is-rv-anim-go { animation-play-state:running; }
.module-chart__rate-bar-attribution { margin:14px 0 0; font-size:13px; color:var(--color-text-muted); line-height:1.5; }
.module-chart__rate-bar--dist .module-chart__rate-bar-item { display:flex; align-items:center; gap:10px; }
.module-chart__rate-bar--dist .module-chart__rate-bar-head { flex:0 0 92px; display:block; margin:0; }
.module-chart__rate-bar--dist .module-chart__rate-bar-value { font-size:13px; } /* HBS 09-28 · 12.5px → 13px */
.module-chart__rate-bar--dist .module-chart__rate-bar-track { flex:1 1 auto; height:10px; border-radius:5px; }
.module-chart__rate-bar--dist .module-chart__rate-bar-count { flex:0 0 auto; font-size:13px; font-weight:700; color:var(--color-text-muted); font-variant-numeric:tabular-nums; }
.module-chart__rate-bar--bullet { padding-bottom:0; }
.module-chart__review-panel > .module-chart__rate-bar--bullet { margin-top:16px; }
.module-chart__rate-bar--bullet .module-chart__rate-bar-track--bullet {
  position:relative; height:13px; border-radius:7px; overflow:hidden;
  background:linear-gradient(to right,
    color-mix(in srgb, var(--color-text-primary,#1e293b) 6%, #fff) 0 33.33%,
    color-mix(in srgb, var(--color-text-primary,#1e293b) 11%, #fff) 33.33% 66.66%,
    color-mix(in srgb, var(--color-text-primary,#1e293b) 17%, #fff) 66.66% 100%);
}
.module-chart__rate-bar--bullet .module-chart__rate-bar-fill { height:100%; margin-top:0; border-radius:7px; }
.module-chart__rate-bar-marker { position:absolute; top:0; bottom:0; width:2px; transform:translateX(-50%); background:var(--color-text-primary,#1e293b); border-radius:1px; z-index:2; box-shadow:0 0 0 1px rgba(255,255,255,.6); }
.module-chart__rate-bar-marker { animation:rv-anim-pos 1.5s linear .2s both; animation-play-state:paused; }
.module-chart__rate-bar-marker-cap { display:block; width:max-content; max-width:100%; white-space:nowrap; margin-top:6px; padding:2px 9px; border-left:3px solid var(--color-text-primary,#1e293b); border-radius:2px 10px 10px 2px; background:color-mix(in srgb, var(--color-text-primary,#1e293b) 7%, #fff); font-size:13px; /* HBS 09-28 · 11.5px → 13px */ font-weight:700; color:var(--color-text-primary,#1e293b); line-height:1.35; word-break:keep-all; font-variant-numeric:tabular-nums; transform:translateX(-2px); }
.module-chart__rate-bar-marker-cap--r { border-left:0; border-right:3px solid var(--color-text-primary,#1e293b); border-radius:10px 2px 2px 10px; transform:translateX(2px); }
.module-chart__rate-bar-marker-cap { animation:rv-anim-cap-l 1.5s linear .2s both; animation-play-state:paused; }
.module-chart__rate-bar-marker-cap--r { animation:rv-anim-mcap-r 1.5s linear .2s both; animation-play-state:paused; }
@media (prefers-reduced-motion: reduce) {
.module-chart__rate-bar-marker-cap { animation:none; }
}
.module-chart__rate-bar-marker-cap.module-chart__rv-anim-wait { animation-play-state:paused; }
.module-chart__rate-bar-marker-cap.is-rv-anim-go { animation-play-state:running; }
.module-chart__rate-bar-label > a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.module-chart__rate-bar-item--self {
  position: relative;
  padding-left: 11px;
}
.module-chart__rate-bar-item--self::before {
  content: ""; position: absolute; left: 0; top: 2px; bottom: 2px;
  width: 3px; border-radius: 2px; background: currentColor; opacity: .75;
}
.module-chart__rate-bar-item--self .module-chart__rate-bar-label, .module-chart__rate-bar-item--self .module-chart__rate-bar-value { font-weight: 800 }
.module-chart__rate-bar-item--self .module-chart__rate-bar-track {
  box-shadow: 0 0 0 1.5px rgba(15, 23, 42, .22);
}
.module-chart__rate-bar-item--faced { display: flex; align-items: flex-start; gap: 11px }
.module-chart__rate-bar-face { flex: 0 0 auto; width: 46px; align-self: center }
.module-chart__rate-bar-face-body { flex: 1 1 0; min-width: 0 }
.module-chart__rate-bar-item--faced .module-chart__rate-bar-head { flex-wrap: wrap }
.module-chart__rate-bar-item--faced .module-chart__rate-bar-value { white-space: normal }
@media (prefers-color-scheme: dark) {
.module-chart__rate-bar-item--self .module-chart__rate-bar-track { box-shadow: 0 0 0 1.5px rgba(226, 232, 240, .3) }
}
@keyframes tg-needle {from{transform:rotate(calc(var(--rot,0deg) - var(--a,0deg)))}}
@keyframes tg-bar-fill {from{transform:scaleX(0)}}
@keyframes gnd-sweep {from{transform:rotate(calc(var(--gnd-a,0)*-1deg))}to{transform:rotate(0deg)}}
@keyframes bar-fill-x {from{transform:scaleX(0)}}
@keyframes gnd-turn {from{transform:rotate(var(--gnd-f))}}
@keyframes module-chart-draw { to { stroke-dashoffset: 0; } }
@keyframes module-rate-bar-fill { from { transform:scaleX(0); } }
@keyframes rv-anim-pos { from { left:0; } }
@keyframes rv-anim-cap-l { from { margin-left:0; } }
@keyframes rv-anim-mcap-r { from { margin-right:calc(100% - 175px); } }
/* 🔴 animation 이 쓰는 @keyframes 정의(라이브 원문) — 없으면 요소가 «시작 상태로 굳는다» */
@keyframes tg-needle{from{transform:rotate(calc(var(--rot,0deg) - var(--a,0deg)))}}
@keyframes gnd-sweep{from{transform:rotate(calc(var(--gnd-a,0)*-1deg))}to{transform:rotate(0deg)}}
@keyframes gnd-turn{from{transform:rotate(var(--gnd-f))}}
@keyframes bar-fill-x{from{transform:scaleX(0)}}
@keyframes tg-bar-fill{from{transform:scaleX(0)}}
@keyframes module-chart-draw { to { stroke-dashoffset: 0; } }
@keyframes module-rate-bar-fill { from { transform:scaleX(0); } }
@keyframes rv-anim-pos { from { left:0; } }
@keyframes rv-anim-cap-l { from { margin-left:0; } }
@keyframes rv-anim-mcap-r { from { margin-right:calc(100% - 175px); } }

/* ── 반원 게이지 = 너비에 따라 커진다 (2026-09-08 사용자 지시 · 반복 요청) ──
 * 라이브 규칙은 width:100%; max-width:104px 라 넓은 자리에서도 104px 에서 멈춘다.
 * 하한은 라이브 값 그대로 두고 상한만 «자리 비율»로 올린다.
 */

/* hand-fix:chart:반원 게이지 = 너비에 따라 커진다 */
/* ── 반원 게이지 = 너비에 따라 커진다 (2026-09-08 사용자 지시 · 반복 요청) ──
 * 라이브 규칙은 width:100%; max-width:104px 라 넓은 자리에서도 104px 에서 멈춘다.
 * 하한은 라이브 값 그대로 두고 상한만 «자리 비율»로 올린다.
 */
.module-chart__position-spread-gauge-dial svg { max-width: clamp(104px, 46%, 260px); }

/* hand-fix:chart:툴팁 고정 여백 */
/* ── 말풍선은 포인트 «위 일정 여백»에 뜬다 (2026-09-08 사용자 지시) ──
 * 라이브는 쉴 때 16px 띄우고 «손을 얹으면 12px 로 붙인다» — 그 4px 때문에 말풍선이
 * 그 포인트를 가린다(사용자: 「해당 포인트를 가리는 경우가 있어」).
 * 어느 포인트든 같은 여백(18px)을 두어 가리지 않게 한다 — 값은 점 반지름+강조 테두리보다 크다.
 */
.module-chart__price-trend-line-hover-layer-hitarea > button > .module-chart__price-trend-line-tooltip,
.module-chart__price-trend-line-hover-layer-hitarea > button:hover > .module-chart__price-trend-line-tooltip,
.module-chart__price-trend-line-hover-layer-hitarea > button:focus-visible > .module-chart__price-trend-line-tooltip,
.module-chart__price-trend-line-hover-layer-hitarea > button:first-child > .module-chart__price-trend-line-tooltip,
.module-chart__price-trend-line-hover-layer-hitarea > button:first-child:hover > .module-chart__price-trend-line-tooltip,
.module-chart__price-trend-line-hover-layer-hitarea > button:last-child > .module-chart__price-trend-line-tooltip,
.module-chart__price-trend-line-hover-layer-hitarea > button:last-child:hover > .module-chart__price-trend-line-tooltip {
  transform: translate(0, calc(-100% - 18px));
}

/* ── 썸네일 스파크에도 추이선 아래 음영 (2026-09-08 사용자 지시) ── */
.module-chart__type-sparkline-card svg .module-chart__area { fill: var(--acc); opacity: .14; stroke: none; }

/* hand-fix:chart:area 과녁을 그림에 맞춤 */
/* ── area 차트의 호버 과녁·말풍선 자리 (2026-09-08 사용자 실측 지적) ──
 * 증상: 왼쪽 포인트는 말풍선이 점을 «가리고», 오른쪽으로 갈수록 간격이 «벌어지고»,
 *       호버 세로선이 점과 어긋난다.
 * 원인 셋 —
 *   ㉮ 감싸개에 padding:20px·테두리·바깥여백이 있어 과녁(inset:0)이 «그림보다 큰 상자»를 덮는다.
 *      그러면 --yp(%)가 가리키는 자리와 실제 점 자리가 어긋나고, 그 오차가 yp 에 따라 달라진다.
 *   ㉯ 그림의 좌표계는 viewBox 720x240 인데 «그리는 자리»는 x 66~700 · y 28~210 이다.
 *      과녁이 전체 폭을 나누면 단추 가운데가 점과 맞지 않는다(세로선이 어긋난 이유).
 *   ㉰ 맨 끝 단추가 온폭이라 강조 띠가 차트 밖으로 삐져나온다.
 * 처분: 과녁을 «그리는 자리»에 맞추고, 양 끝 단추를 반폭으로 둔다.
 * 🔴 추이(trend) 변형은 좌표계가 달라(600x170 · 여백 없음) 건드리지 않는다 —
 *    module-chart__svg 를 직계로 가진 감싸개에만 건다.
 */
.module-chart__price-trend-line-hover-layer:has(> .module-chart__svg) {
  padding: 0; border: 0; background: none; margin: 0;
}
.module-chart__price-trend-line-hover-layer:has(> .module-chart__svg) > .module-chart__svg { margin: 0; }
.module-chart__price-trend-line-hover-layer:has(> .module-chart__svg) > .module-chart__price-trend-line-hover-layer-hitarea {
  /* x 66~700 / 720 · y 28~210 / 240 */
  inset: 11.667% 2.778% 12.5% 9.167%;
}
/* 양 끝 단추는 반폭 — 단추 가운데가 첫·끝 점에 붙고, 강조 띠가 차트 밖으로 나가지 않는다 */
.module-chart__price-trend-line-hover-layer:has(> .module-chart__svg) > .module-chart__price-trend-line-hover-layer-hitarea > button:first-child,
.module-chart__price-trend-line-hover-layer:has(> .module-chart__svg) > .module-chart__price-trend-line-hover-layer-hitarea > button:last-child {
  flex: 0.5 1 0;
}
/* 🔴 세로선은 «점 자리»에 선다 — 반폭 단추는 가운데가 점과 6.25% 어긋나므로
      첫 단추는 왼쪽 끝, 끝 단추는 오른쪽 끝에 세운다(그 자리가 곧 첫·끝 점이다). */
.module-chart__price-trend-line-hover-layer:has(> .module-chart__svg) > .module-chart__price-trend-line-hover-layer-hitarea > button:first-child::before { left: 0; }
.module-chart__price-trend-line-hover-layer:has(> .module-chart__svg) > .module-chart__price-trend-line-hover-layer-hitarea > button:last-child::before { left: 100%; }

/* hand-fix:chart:구성비 칸 색 */
/* ── 구성비 막대·범례 색 (2026-09-08 사용자 지적) ──
 * 라이브의 이 띠는 «내가 어느 구간에 있나»를 보이는 장치라 한 칸만 강조하고 나머지는 회색이다.
 * 우리 표본은 «가격 구간별 구성비»라 읽는 사람이 범례와 칸을 «짝지어야» 한다 — 색이 필요하다.
 * 그래서 자료가 색을 주면 그 색을 쓰고, 안 주면 라이브 기본(회색)을 그대로 쓴다.
 * 🔴 라이브 값은 지우지 않는다 — 기본값으로 남는다.
 */
.module-chart__proportion-segment-strip i[style*="--seg"] { background: var(--seg); }
.module-chart__proportion-segment-strip-legend i[style*="--seg"] { background: var(--seg); }

/* ── 라이브 결손 규칙 동기화 (sync-live) ── */
/* 라이브 원문 순서 · 우리에 없던 선택자만 */

/* ── 동기화 블록 끝 (sync-live) ── */

/* hand-fix:chart:구성비 강조 연동 */
/* ── 막대 조각 ↔ 범례 양방향 강조 (2026-09-08 사용자 요청 · 도넛과 같은 방식) ──
 * 손을 얹은 조각만 남기고 나머지는 흐리게, 짝이 되는 범례 줄은 굵게 선다.
 */
.module-chart__proportion-segment-strip.is-strip-slice-lit > i { opacity: .35; transition: opacity .12s; }
.module-chart__proportion-segment-strip.is-strip-slice-lit > i.is-strip-slice-on { opacity: 1; }
.module-chart__proportion-segment-strip-legend > li.is-strip-legend-lit { color: var(--ink, #1f2937); font-weight: 800; }
.module-chart__proportion-segment-strip-legend > li.is-strip-legend-lit i { box-shadow: 0 0 0 2px var(--acc, #3b82f6); }
.module-chart__proportion-segment-strip > i, .module-chart__proportion-segment-strip-legend > li { cursor: pointer; }


/* ── 짝 맞추기 — 마크업이 찍는데 규칙이 없던 이름 (2026-09-10 창D) ────────── */
/* 🔴 짝 맞추기(2026-09-10 창D) — 값을 담는 표 — 원본에 선언 없음.
   마크업이 이 이름을 찍는데 규칙이 없어 «자리»만 만든다. 생김새는 «창작하지 않는다»
   (선례 = display/pdf-embed/style.css .module-pdf-embed__title). */
.module-chart__data {
}


/* ── v2.4(modules-v2.4-20260909) 에만 있던 규칙 보충 — 이름만 지금 이름으로 · 값은 v2.4 그대로 (2026-09-11 창D) ── */
.module-chart__review-panel, .module-chart__overall-score, .module-chart__rate-bar {
  --rv-accent:#e43917;
  --rv-track:#ddd;
}


/* ══ 라이브 CSS 자동 이식(pull-live-module-css · 2026-09-22 · 트리=sise) ══
   우리에 «선택자 자체가 없던» 규칙만 떠 왔다. 값이 다른 것은 손대지 않는다(apply-live-css 소관).
   각 줄 끝 [파일:줄] 이 라이브 원본 자리다. @media 조건은 «감싼 채로» 옮긴다. */
@media (max-width: 640px) {
  .module-chart { padding: 16px; }   /* modules.css:5467 */
  .module-chart__label { font-size: 13px; }   /* modules.css:5470 */
  .module-chart__axis { font-size: 13px; }   /* modules.css:5534 · HBS 09-28 · 11px → 13px */
  .module-chart__donut-center { font-size: 26px; }   /* modules.css:5535 */
  .module-chart-wrap { max-width: 280px; padding: 12px; }   /* modules.css:6931 */
}
@media (prefers-reduced-motion: no-preference) {
  .module-chart__line { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: module-chart-draw 1s ease forwards; }   /* modules.css:5526 */
  .module-chart__spark { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: module-chart-draw 1s ease forwards; }   /* modules.css:5526 */
}
@media (max-width:640px) {
  .module-chart-panel .chart-svg--desk { display:none; }   /* modules.css:11165 */
  .module-chart-panel .chart-svg--mob { display:block; }   /* modules.css:11166 */
  .module-chart-panel .feature__top { flex-direction:column; }   /* modules.css:11181 */
  .module-chart-panel .fp-donut-wrap { margin-top:12px; }   /* modules.css:11182 */
  .module-chart--rich .chart-svg--desk { display:none; }   /* modules.css:11191 */
  .module-chart--rich .chart-svg--mob { display:block; }   /* modules.css:11192 */
}
.module-chart-wrap--narrow { max-width: 360px; margin: 16px auto; }   /* modules.css:2519 */
.module-chart { margin: 24px 0; padding: 20px; background: var(--color-bg-card, #fff); border-radius: var(--color-radius-sm, 8px); border: 1px solid var(--color-border, #e5e7eb); }   /* modules.css:5377 */
.module-chart__title { font-size: 20px; font-weight: 700; color: var(--color-text-primary, #111827); margin: 0 0 8px; }   /* modules.css:5406 */
.module-chart__caption { font-size: 14px; color: var(--color-text-secondary, #6b7280); margin: 0 0 16px; line-height: 1.6; }   /* modules.css:5412 */
.module-chart__bars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: fit-content(160px) minmax(0, 1fr) max-content; align-items: center; gap: 10px 12px; }   /* modules.css:5418 */
.module-chart__row { display: contents; }   /* modules.css:5427 */
.module-chart__label { font-size: 14px; color: var(--color-text-primary, #111827); word-break: keep-all; line-height: 1.4; }   /* modules.css:5430 */
.module-chart__track { flex: 1 1 auto; height: 22px; background: var(--color-bg-subtle, #eef2f7); border-radius: 4px; overflow: hidden; }   /* modules.css:5436 */
.module-chart__bar { display: block; height: 100%; min-width: 2px; background: var(--color-accent, #3b82f6); border-radius: 4px; transition: width .3s ease; }   /* modules.css:5443 */
.module-chart__value { flex: 0 0 auto; min-width: 44px; text-align: right; font-size: 14px; font-weight: 700; color: var(--color-text-primary, #111827); font-variant-numeric: tabular-nums; }   /* modules.css:5451 */
.module-chart__note { font-size: 16px; color: var(--color-text-secondary, #6b7280); margin: 14px 0 0; line-height: 1.6; }   /* modules.css:5460 · HBS 09-28 · 12px → 13px · HBY 09-28 · 13px → 16px(설명 문장 = 내용 글자 · 지휘자 판정) */
.module-chart__svg { display: block; width: 100%; height: auto; margin: 4px 0 2px; overflow: visible; font-variant-numeric: tabular-nums; }   /* modules.css:5466 */
.module-chart--sparkline .module-chart__svg { max-width: 240px; }   /* modules.css:5484 */
.module-chart--donut .module-chart__svg { max-width: 280px; margin-inline: auto; }   /* modules.css:5485 */
.module-chart--range .module-chart__svg { max-width: 100%; }   /* modules.css:5486 */
.module-chart--heatmap .module-chart__svg { max-width: 100%; }   /* modules.css:5486 */
.module-chart__line { fill: none; stroke: var(--color-accent, #3b82f6); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }   /* modules.css:5488 */
.module-chart__area { fill: var(--color-accent, #3b82f6); opacity: .10; stroke: none; }   /* modules.css:5496 */
.module-chart__dot { fill: var(--color-accent, #3b82f6); }   /* modules.css:5497 */
.module-chart__grid { stroke: var(--color-border, #e5e7eb); stroke-width: 1; stroke-dasharray: 3 4; }   /* modules.css:5498 */
.module-chart__axis-line { stroke: var(--color-border, #e5e7eb); stroke-width: 1; }   /* modules.css:5499 */
.module-chart__axis { fill: var(--color-text-secondary, #6b7280); font-size: 13px; }   /* modules.css:5500 · HBS 09-28 · 12px → 13px */
.module-chart__vlabel { fill: var(--color-text-primary, #111827); font-size: 13px; font-weight: 700; }   /* modules.css:5501 */
.module-chart__spark { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }   /* modules.css:5502 */
.module-chart__spark--up { stroke: #dc2626; }   /* modules.css:5504 */
.module-chart__spark-dot--up { stroke: #dc2626; }   /* modules.css:5504 */
.module-chart__spark--down { stroke: #2563eb; }   /* modules.css:5505 */
.module-chart__spark-dot--down { stroke: #2563eb; }   /* modules.css:5505 */
.module-chart__spark-dot--up { fill: #dc2626; }   /* modules.css:5506 */
.module-chart__spark-dot--down { fill: #2563eb; }   /* modules.css:5507 */
.module-chart__range-track { fill: var(--color-bg-subtle, #eef2f7); }   /* modules.css:5508 */
.module-chart__range-fill { fill: var(--color-accent, #3b82f6); opacity: .35; }   /* modules.css:5510 */
.module-chart__marker { fill: var(--color-accent, #3b82f6); stroke: #fff; stroke-width: 2; }   /* modules.css:5511 */
.module-chart__seg { transition: stroke-dasharray .6s ease; }   /* modules.css:5512 */
.module-chart__donut-center { fill: var(--color-text-primary, #111827); font-size: 30px; font-weight: 700; }   /* modules.css:5514 */
.module-chart__donut-sub { fill: var(--color-text-secondary, #6b7280); font-size: 13px; }   /* modules.css:5515 */
.module-chart__wick { stroke-width: 1.5; }   /* modules.css:5516 */
.module-chart__candle--up { fill: var(--chart-up, #dc2626); stroke: var(--chart-up, #dc2626); }   /* modules.css:5518 · 2026-10-09 토큰화 */
.module-chart__candle--down { fill: var(--chart-down, #2563eb); stroke: var(--chart-down, #2563eb); }   /* modules.css:5519 · 2026-10-09 토큰화 */
.module-chart__cell { fill: var(--color-accent, #3b82f6); }   /* modules.css:5520 */
.module-chart__cell--empty { fill: var(--color-bg-subtle, #eef2f7); fill-opacity: 1; }   /* modules.css:5522 */
.module-chart__cell-val { fill: var(--color-text-primary, #111827); font-size: 13px; }   /* modules.css:5523 · HBS 09-28 · 12px → 13px */
.module-chart-wrap { margin: 20px auto; padding: 16px; max-width: 360px; text-align: center; }   /* modules.css:6739 */
.module-chart-wrap canvas { max-width: 100%; height: auto !important; }   /* modules.css:6747 */
.module-chart-wrap h3 { font-size: 1.05rem !important; font-weight: 600 !important; color: #1e293b !important; margin: 0 0 8px 0 !important; line-height: 1.3 !important; text-transform: none !important; }   /* modules.css:7328 */
.module-chart { position: relative; }   /* modules.css:8860 */
.module-chart__svg[data-points] { cursor: crosshair; }   /* modules.css:8863 */
.module-chart__crosshair { stroke: #94a3b8; stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }   /* modules.css:8864 */
.module-chart__hoverdot { fill: #1d4ed8; stroke: #fff; stroke-width: 1.5; pointer-events: none; }   /* modules.css:8865 */
.module-chart__tip { position: absolute; top: 32px; transform: translateX(-50%); display: none; flex-direction: column; gap: 2px; min-width: 84px; background: rgba(17, 24, 39, .92); color: #fff; font-size: 13px; /* HBS 09-28 · 12px → 13px */ line-height: 1.5; padding: 7px 10px; border-radius: 7px; text-align: left; pointer-events: none; white-space: nowrap; z-index: 6; }   /* modules.css:8866 */
.module-chart__tip:not([hidden]) { display: flex; }   /* modules.css:8867 */
.module-chart__tip strong { color: #fbbf24; margin-bottom: 1px; }   /* modules.css:8868 */
.module-chart__tip-row { font-variant-numeric: tabular-nums; opacity: .95; }   /* modules.css:8869 */
.module-chart__band { cursor: crosshair; transition: fill .1s; }   /* modules.css:8870 */
.module-chart__band:hover { fill: rgba(99,102,241,.07); }   /* modules.css:8873 */
.module-chart__plabel { font-size: 13px; fill: #475569; }   /* modules.css:8874 · HBS 09-28 · 10px → 13px */
.module-chart__baseline { stroke: #cbd5e1; stroke-width: 1; stroke-dasharray: 5,4; opacity: .8; }   /* modules.css:8875 */
.module-chart-panel { padding:22px 24px;background:#ffffff;border-radius:8px;border:1px solid #e2e8f0;box-shadow:0 4px 12px rgba(0,0,0,.06);box-sizing:border-box;font-family:-apple-system,'Noto Sans KR',sans-serif;font-size:16px;color:#1e293b;line-height:1.5; }   /* modules.css:11021 */
.module-chart-panel * { box-sizing:border-box; }   /* modules.css:11027 */
.landing-page .card .module-chart-panel { padding:0;background:none;border:none;border-radius:0;box-shadow:none;font-size:inherit;color:inherit;line-height:inherit; }   /* modules.css:11028 */
.module-chart-panel .feature__top { display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:14px; }   /* modules.css:11149 */
.module-chart-panel .feature__label { font-size:13px;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px; }   /* modules.css:11153 */
.module-chart-panel .feature__price { font-size:34px;font-weight:800;color:#1e293b;line-height:1.05; }   /* modules.css:11154 */
.module-chart-panel .feature__price .u { font-size:14px;font-weight:400;color:#475569;margin-left:4px; }   /* modules.css:11155 */
.module-chart-panel .badges { display:flex;gap:8px;margin-top:10px;flex-wrap:wrap; }   /* modules.css:11156 */
.module-chart-panel .badge { display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;padding:4px 12px;border-radius:20px; }   /* modules.css:11157 */
.module-chart-panel .badge--up { color:#dc2626;background:#fef2f2; }   /* modules.css:11158 */
.module-chart-panel .badge--down { color:#2563eb;background:#eff6ff; }   /* modules.css:11159 */
.module-chart-panel .badge small { font-size:13px;font-weight:400;opacity:.75; }   /* modules.css:11160 · HBS 09-28 · 11px → 13px */
.module-chart-panel .chart-wrap { overflow-x:auto; }   /* modules.css:11161 */
.module-chart-panel .chart-svg { display:block;width:100%;max-width:100%; }   /* modules.css:11162 */
.module-chart-panel .chart-svg--mob { display:none; }   /* modules.css:11163 */
.module-chart-panel .legend { display:flex;gap:16px;flex-wrap:wrap;margin:12px 0 0; }   /* modules.css:11164 */
.module-chart-panel .legend span { display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#475569; }   /* modules.css:11169 */
.module-chart-panel .legend i { width:20px;height:0;border-top-width:2px;border-top-style:solid;display:inline-block; }   /* modules.css:11170 */
.module-chart-panel .cp { cursor:pointer; }   /* modules.css:11171 */
.module-chart-panel .cp .ct { visibility:hidden;pointer-events:none; }   /* modules.css:11172 */
.module-chart-panel .cp:hover .ct { visibility:visible; }   /* modules.css:11173 */
.module-chart-panel .cp:focus .ct { visibility:visible; }   /* modules.css:11173 */
.module-chart-panel .cp circle { visibility:hidden; }   /* modules.css:11174 */
.module-chart-panel .cp:hover circle { visibility:visible; r:7; }   /* modules.css:11175 */
.module-chart-panel .cp:focus circle { visibility:visible; r:7; }   /* modules.css:11175 */
.module-chart-panel .cp:hover .cp__band { fill:rgba(99,102,241,.07); }   /* modules.css:11176 */
.module-chart-panel .cp:focus .cp__band { fill:rgba(99,102,241,.07); }   /* modules.css:11176 */
.module-chart-panel .cp__guide { visibility:hidden; stroke:#94a3b8; stroke-width:1; stroke-dasharray:2,3; pointer-events:none; }   /* modules.css:11177 */
.module-chart-panel .cp:hover .cp__guide { visibility:visible; }   /* modules.css:11178 */
.module-chart-panel .cp:focus .cp__guide { visibility:visible; }   /* modules.css:11178 */
.module-chart-panel .fp-donut-wrap { flex-shrink:0; }   /* modules.css:11179 */
.module-chart-panel .chart-panel { display:none; }   /* modules.css:11180 */
.module-chart-panel .chart-panel.on { display:block; }   /* modules.css:11185 */
.module-chart--rich .chart-svg { display:block;width:100%;max-width:100%; }   /* modules.css:11186 */
.module-chart--rich .chart-svg--mob { display:none; }   /* modules.css:11189 */
.module-chart--rich .cp { cursor:pointer; }   /* modules.css:11190 */
.module-chart--rich .cp .ct { visibility:hidden;pointer-events:none; }   /* modules.css:11195 */
.module-chart--rich .cp:hover .ct { visibility:visible; }   /* modules.css:11196 */
.module-chart--rich .cp:focus .ct { visibility:visible; }   /* modules.css:11196 */
.module-chart--rich .cp circle { visibility:hidden; }   /* modules.css:11197 */
.module-chart--rich .cp:hover circle { visibility:visible; r:7; }   /* modules.css:11198 */
.module-chart--rich .cp:focus circle { visibility:visible; r:7; }   /* modules.css:11198 */
.module-chart--rich .cp:hover .cp__band { fill:rgba(99,102,241,.07); }   /* modules.css:11199 */
.module-chart--rich .cp:focus .cp__band { fill:rgba(99,102,241,.07); }   /* modules.css:11199 */
.module-chart--rich .cp__guide { visibility:hidden; stroke:#94a3b8; stroke-width:1; stroke-dasharray:2,3; pointer-events:none; }   /* modules.css:11200 */
.module-chart--rich .cp:hover .cp__guide { visibility:visible; }   /* modules.css:11201 */
.module-chart--rich .cp:focus .cp__guide { visibility:visible; }   /* modules.css:11201 */
.module-chart--scatter .cp { cursor:pointer; }   /* modules.css:11202 */
.module-chart--range .cp { cursor:pointer; }   /* modules.css:11202 */
.module-chart--scatter .cp .ct { visibility:hidden;pointer-events:none; }   /* modules.css:11205 */
.module-chart--range .cp .ct { visibility:hidden;pointer-events:none; }   /* modules.css:11205 */
.module-chart--scatter .cp:hover .ct { visibility:visible; }   /* modules.css:11206 */
.module-chart--scatter .cp:focus .ct { visibility:visible; }   /* modules.css:11206 */
.module-chart--range .cp:hover .ct { visibility:visible; }   /* modules.css:11206 */
.module-chart--range .cp:focus .ct { visibility:visible; }   /* modules.css:11206 */
.module-chart--scatter .cp:hover .cp__band { fill:rgba(99,102,241,.07); }   /* modules.css:11208 */
.module-chart--scatter .cp:focus .cp__band { fill:rgba(99,102,241,.07); }   /* modules.css:11208 */
.module-chart--range .cp:hover .cp__band { fill:rgba(99,102,241,.07); }   /* modules.css:11208 */
.module-chart--range .cp:focus .cp__band { fill:rgba(99,102,241,.07); }   /* modules.css:11208 */
.module-chart--scatter .cp__guide { visibility:hidden; stroke:#94a3b8; stroke-width:1; stroke-dasharray:2,3; pointer-events:none; }   /* modules.css:11210 */
.module-chart--range .cp__guide { visibility:hidden; stroke:#94a3b8; stroke-width:1; stroke-dasharray:2,3; pointer-events:none; }   /* modules.css:11210 */
.module-chart--scatter .cp:hover .cp__guide { visibility:visible; }   /* modules.css:11211 */
.module-chart--scatter .cp:focus .cp__guide { visibility:visible; }   /* modules.css:11211 */
.module-chart--range .cp:hover .cp__guide { visibility:visible; }   /* modules.css:11211 */
.module-chart--range .cp:focus .cp__guide { visibility:visible; }   /* modules.css:11211 */
/* 🔴 2026-09-27 지휘자(사용자 「도넛 차트 전체 너비로 나와서 너무 커」) — 도넛(정사각 viewBox 240)은 폭 상한 280px·가운데(라이브 .module-chart-wrap 280px 값) · 막대·선 차트는 그대로 */
.module-chart__svg--donut { display:block; width:100%; max-width:280px; height:auto; margin:0 auto; }

/* 🆕 2026-10-09 앱층 흡수(CO-05 · 범용 모듈 승격 · 지휘자 지시) — 앱층 그림의 정보 요소만 본문판에 가져온다.
   새 칸·새 변형 클래스만 더한다(기존 규칙 무접촉 · 기본값 그대로 = 칸을 안 주면 산출 같음).
   근거(앱층): headline-stat-value · layer-bars-fill--ok/--muted (app-layer/style.css:2536) · compact-value-bar-row--current (:2183-2185)
              · spark-line tone (:2515) · data-story-tile-ref (:1990) · tile-delta (:2221). 크기는 본문용(앱층보다 큼). 색은 토큰만. 13px 미만 0. */
.module-chart__lead { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin:0 0 14px; }
.module-chart__lead-value { font-size:34px; font-weight:800; line-height:1.1; letter-spacing:-.02em; color:var(--color-text-primary, #111827); }
.module-chart__lead-unit { font-size:15px; color:var(--color-text-secondary, #6b7280); }
.module-chart__lead-delta { font-size:15px; font-weight:700; }
/* 막대 행 톤 — current(지금 줄 진하게 · 나머지는 연하게) · ok(초록) · muted(회색 흐림) */
.module-chart__bars .module-chart__row--current .module-chart__bar { background:var(--acc-i, var(--color-accent, #3b82f6)); }
.module-chart__bars .module-chart__row--current .module-chart__label,
.module-chart__bars .module-chart__row--current .module-chart__value { color:var(--acc-i, var(--color-text-primary, #111827)); font-weight:800; }
.module-chart__bars:has(.module-chart__row--current) .module-chart__row:not(.module-chart__row--current):not(.module-chart__row--ok):not(.module-chart__row--muted) .module-chart__bar { background:color-mix(in srgb, var(--color-accent, #3b82f6) 45%, var(--color-bg-subtle, #eef2f7)); }
.module-chart__bars .module-chart__row--ok .module-chart__bar { background:var(--c2, #0E7E4D); }
.module-chart__bars .module-chart__row--muted .module-chart__bar { background:var(--line2, #cbd5e1); }
/* 도넛 범례 곳 수(legend_count_label) */
.module-chart__legend-count { color:var(--color-text-secondary, #6b7280); font-variant-numeric:tabular-nums; }
.module-chart__legend-count::before { content:"·"; margin-right:6px; }
/* 추이선 방향 색(line_tone = up·down) — 선·면·마지막 점이 등락 색(--up · --dn)을 따른다 */
.module-chart__svg--tone-up .module-chart__line { stroke:var(--up, #0E7E4D); }
.module-chart__svg--tone-up .module-chart__area { fill:var(--up, #0E7E4D); }
.module-chart__svg--tone-up .module-chart__dot { fill:var(--up, #0E7E4D); }
.module-chart__svg--tone-down .module-chart__line { stroke:var(--dn, #CE3137); }
.module-chart__svg--tone-down .module-chart__area { fill:var(--dn, #CE3137); }
.module-chart__svg--tone-down .module-chart__dot { fill:var(--dn, #CE3137); }
/* 범위 게이지 기준선(range_ref_x · range_ref_label) — 앱층 ref 와 같은 점선 + 글 */
.module-chart__range-ref { stroke:var(--ref-1, var(--color-text-secondary, #6b7280)); stroke-width:3; stroke-dasharray:4 3; }
.module-chart__range-ref-label { fill:var(--ref-1-ink, var(--color-text-secondary, #6b7280)); font-weight:700; }

/* 🆕 2026-10-09 SVG 글자 최소 보장 — script.js 가 줄어든 비율의 역수를 --text-k 로 단다(1 이상). 글자 기준 = 화면에서 13px 이상(문장형 14px 이상 규칙의 짧은 이름표 칸). 스크립트 없으면 1(변화 0) */
.module-chart__axis, .module-chart__vlabel, .module-chart__vlabel--point { font-size: calc(13px * var(--text-k, 1)); }
.module-chart__vlabel--point-last { font-size: calc(14px * var(--text-k, 1)); }

/* 🆕 2026-10-09 간격 보장(사용자 10-09 «글자 사이 간격») — 값·이름표 바로 아래 설명 글 위 간격 ≥ 6px(실측 0~4px 이던 자리) · PL-APP-MOD-01 · CO-05 */
.module-chart__position-spread-gauge-dial .module-chart__position-spread-gauge-value { margin-top:6px; }
.module-chart__legend { row-gap:10px; }
/* 구간 위치 그림(range · viewBox 높이 90·106)은 눈금 글자가 서로 붙어 있어 글자만 키우면 겹친다 → 좁은 화면에서는 그림 폭을 viewBox 폭(720)으로 지키고 좌우로 민다(글자 13px 유지) */
@media (max-width: 760px) {
  .module-chart:has(svg[viewBox="0 0 720 90"], svg[viewBox="0 0 720 106"]) { overflow-x: auto; }
  .module-chart__svg[viewBox="0 0 720 90"], .module-chart__svg[viewBox="0 0 720 106"] { min-width: 720px; max-width: none; }
}

/* core/modules/display/rating-stars/style.css */
/* rating-stars — 빈 별 5개 바탕 + 채운 별 덮개(너비 = 점수/만점). 그림 파일 0.
   사이트는 아래 변수만 바꾼다(부품 CSS 를 덮어쓰지 않는다). */
.module-rating-stars {
  --rating-stars-fill: #FF8A00;
  --rating-stars-empty: #d6d9de;
  --rating-stars-size: 1.15em;
  --rating-stars-text: inherit;
  --rating-stars-gap: .4em;
  display: inline-flex;
  align-items: center;
  gap: var(--rating-stars-gap);
  max-width: 100%;
  white-space: nowrap;
  vertical-align: middle;
}
.module-rating-stars__stars {
  position: relative;
  display: inline-block;
  flex: none;
  font-size: var(--rating-stars-size);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}
.module-rating-stars__stars-empty { color: var(--rating-stars-empty); }
.module-rating-stars__stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  color: var(--rating-stars-fill);
}
.module-rating-stars__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--rating-stars-text);
  line-height: 1.2;
}

/* core/modules/display/product-card/style.css */
/* product-card — 상품 카드 1장(그림 · 이름 · 별점 줄 · 구매 관심도 막대 · 할인가/원래 가격 · 할인 배지 · 구매 단추).
   사이트는 아래 변수만 바꾼다(부품 CSS 를 덮어쓰지 않는다). 별점 줄은 호출 쪽이 rating-stars 부품 HTML 을 stars_html 로 넘긴다. */
.module-product-card {
  --product-card-border: #e5e7eb;
  --product-card-accent: #b42318;
  --product-card-off-bg: #d92d20;
  --product-card-off-text: #fff;
  --product-card-bar-track: #f0f0f0;   /* 라이브 kimchimuseum.com 상품 카드 막대 색(11-04 실측) */
  --product-card-bar-fill: linear-gradient(90deg, #e53e3e, #c53030);
  --product-card-text: #111827;
  --product-card-muted: #6b7280;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid var(--product-card-border);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  transition: box-shadow .15s, border-color .15s;
}
.module-product-card:hover,
.module-product-card:focus-within { border-color: #94a3b8; box-shadow: 0 4px 14px rgba(15, 23, 42, .08); }
.module-product-card--best { border-color: #f3b4ad; }
.module-product-card__fig { position: relative; margin: 0; padding: 12px 12px 0; background: #fff; }
.module-product-card__fig img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 6px; }
.module-product-card__off {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  padding: 3px 7px; border-radius: 6px; font-size: .8rem; font-weight: 800; line-height: 1.2;
  background: var(--product-card-off-bg); color: var(--product-card-off-text);
}
.module-product-card__body { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 12px; flex: 1; min-width: 0; }
.module-product-card__name { margin: 0 !important; padding: 0; font-size: .92rem; line-height: 1.35; font-weight: 700; word-break: keep-all; overflow-wrap: anywhere; }
/* 일반 카드 이름 = 3줄까지(풀네임·모델 번호가 보여야 함 · 사용자 11-06 지휘자 결정) — 순위 카드(--lg·--md)는 줄 제한 없음 */
.module-product-card:not(.module-product-card--lg):not(.module-product-card--md) .module-product-card__name { max-height: 4.05em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.module-product-card__link { color: inherit; text-decoration: none; }
.module-product-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.module-product-card .module-rating-stars { font-size: .8rem; flex-wrap: wrap; --rating-stars-gap: .4em; }
/* 지표 블록 꼴 하나(사용자 11-06 «이것은 항상 일관성 가지고 유지»): ★★★★★ 전문 평가 4.9 / 구매 관심도 91% / 막대(전체 폭). 일반 카드 기본(사용자 11-06 «일반 상품 카드도 범용으로 현상태로») = 글자 .78rem · 줄 사이 6px · 글자와 막대 사이 3px(막대 위 -3px) · 막대 8px. 순위 카드 크기는 아래 변형 */
.module-product-card__interest { margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: .78rem; line-height: 1.3; color: var(--product-card-interest-text, var(--product-card-muted)); }
.module-product-card__interest-track { display: block; width: 100%; height: 8px; margin-top: -3px; border-radius: 4px; background: var(--product-card-bar-track, #f0f0f0); overflow: hidden; }   /* 표 칸처럼 카드 밖에서도 보이게 기본값을 var 안에 둔다(11-06) */
.module-product-card__interest-fill { display: block; height: 100%; border-radius: 4px; background: var(--product-card-bar-fill, linear-gradient(90deg, #e53e3e, #c53030)); }
/* 조 BI(11-05) 막대 수리: 옛 view() 시간선은 가장 가까운 스크롤 상자(카드·트랙·셸 .content-area 의 overflow)에 묶여 움직이지 않고 처음부터 가득이었음 → script.js 가 화면 밖 막대에 data-bar-wait 를 붙였다가 화면에 들어오면 떼어 너비가 transition 으로 채워짐. 스크립트·transition 미지원 = 값대로 가득(기존 동작) */
.module-product-card__interest-fill { transition: width .7s ease-out; }
.module-product-card__interest-fill[data-bar-wait] { width: 0 !important; }
@media (prefers-reduced-motion: reduce) { .module-product-card__interest-fill { transition: none; } }
.module-product-card__price { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; color: var(--product-card-muted); font-size: .85rem; }
.module-product-card__sale { font-size: 1.1rem; font-weight: 800; color: var(--product-card-accent); }   /* 판매가 = 할인 여부와 상관없이 늘 빨강 굵게 */
.module-product-card__regular { font-size: .8rem; font-weight: 400; color: var(--product-card-muted); text-decoration: line-through; }
.module-product-card__price--band { font-weight: 700; color: var(--product-card-text); }
/* 단추 크기 = 범용 기본(글자 13~16px 화면 폭 비례 · 높이 48px · 한 줄) — 모바일에서 글자·높이를 줄이지 않는다(사용자 11-06). 문구가 길면 «·혜택»을 뺀 짧은 문구(buy_label_short)를 호출 쪽이 주고, 모바일(767px 이하)에서만 짧은 문구를 보인다 */
.module-product-card__buy { position: relative; overflow: hidden; z-index: 2; margin-top: auto; align-self: stretch; display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 48px; text-align: center; font-size: clamp(13px, 3.9vw, 16px); line-height: 1.3; font-weight: 700; padding: 10px 6px; white-space: nowrap; border-radius: 6px; background: #fff1f0; color: var(--product-card-accent); text-decoration: none; }
.module-product-card__buy:hover { background: #ffe4e1; }
.module-product-card__buy [data-buy-long] { display: contents; }
.module-product-card__buy [data-buy-short] { display: none; }
@media (max-width: 767px) { .module-product-card__buy [data-buy-long] { display: none; } .module-product-card__buy [data-buy-short] { display: contents; } }
@media (max-width: 560px) {
  .module-product-card__fig { padding: 8px 8px 0; }
  .module-product-card__body { padding: 6px 8px 10px; }
  .module-product-card__name { font-size: .85rem; }
}
/* 폭이 모자란 모바일 일반 카드(2열): 별 크기를 먼저 줄인다(rating-stars 변수) — 라벨·값은 말줄임 없음 */
@media (max-width: 767px) {
  .module-product-card:not(.module-product-card--lg):not(.module-product-card--md) .module-rating-stars { --rating-stars-size: .92em; --rating-stars-gap: .3em; }
}

/* ── 조 AL2(11-04) 목록 감싸개 보강 — 카드 한 장(위)만 있고 격자 감싸개가 없어 사이트마다 따로 만들던 자리. 새 클래스만 추가(기존 카드 규칙 바이트 동일).
   ul.module-product-card__list > li.module-product-card__list-item > article.module-product-card · 열 수 변형 = --cols-4(가이드 4 → 3 → 2열) · --cols-4-loose(홈 4 → 2열 · 칸 간격 16) */
.module-product-card__list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
@media (max-width: 560px) { .module-product-card__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
.module-product-card__list-item { position: relative; display: flex; flex-direction: column; min-width: 0; }
.module-product-card__list-item > .module-product-card { flex: 1; }
.module-product-card__list.module-product-card__list--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 767px) { .module-product-card__list.module-product-card__list--cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .module-product-card__list.module-product-card__list--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.module-product-card__list.module-product-card__list--cols-4-loose { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .module-product-card__list.module-product-card__list--cols-4-loose { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .module-product-card__list.module-product-card__list--cols-4-loose { gap: 10px; } }
/* 변형 --cols-4-stack(11-06 사용자 «지금 스타일도 변형으로 기록»): 데스크톱 4열 · 768px 이하 2열 · 560px 이하 1열 가로 카드(그림 왼쪽 112px + 본문). 호출 슬롯 cols = «cols-4-stack». 기본 일반 카드 변형은 --cols-4(모바일 2열) */
.module-product-card__list.module-product-card__list--cols-4-stack { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 767px) { .module-product-card__list.module-product-card__list--cols-4-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .module-product-card__list.module-product-card__list--cols-4-stack { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .module-product-card__list--cols-4-stack .module-product-card { flex-direction: row; align-items: stretch; height: auto; }
  .module-product-card__list--cols-4-stack .module-product-card__fig { flex: 0 0 112px; padding: 8px; }
  .module-product-card__list--cols-4-stack .module-product-card__body { min-width: 0; padding: 8px 10px 10px 0; }
}

/* ── 순위 카드 변형(2026-11-06 조 CT → 조 DB 시안 안 A·B 재설계) — 슬롯(variant·rank·ribbon·badge·tags·reason)을 안 주면 위 규칙만 적용(기존 출력 바이트 동일).
   --lg = 1위(전체 폭 가로형: 띠 + 그림 왼쪽 + 세로 한 덩어리 [이름 → 지표 3줄 → 가격 → 이유 → 단추]) · --md = 2~4위.
   2~4위 목록 변형 세트(개수에 따라 호출 쪽 계산식이 고름): --cols-3 = 안 B 3열 세로형(2~4위가 3장일 때) · --cols-1 = 안 A 1열 가로형(그 밖의 개수).
   그림 폭 변수: --product-card-lg-fig-desktop(1위 260px) · --product-card-md-fig-desktop(2~4위 200px) · 휴대폰 --product-card-lg-fig(112px) · --product-card-md-fig(104px). 위계 1위 > 2~4위 > 일반(약 190px) */
.module-product-card__ribbon { margin: 0; padding: 8px 14px; background: var(--product-card-accent); color: #fff; font-size: 20px; font-weight: 800; line-height: 1.3; word-break: keep-all; text-wrap: balance; }
.module-product-card__rank { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #111827; color: #fff; font-size: 1.15rem; font-weight: 800; line-height: 1; }
.module-product-card__badge { position: absolute; left: 10px; bottom: 6px; z-index: 2; padding: 1px 7px; border-radius: 999px; background: #fff7ed; border: 1px solid #fdba74; color: #9a3412; font-size: .7rem; font-weight: 800; line-height: 1.4; }
.module-product-card__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 6px; }
.module-product-card__tag { color: var(--product-card-muted); font-size: .78rem; line-height: 1.5; white-space: nowrap; }
.module-product-card__reason { margin: 0; color: var(--product-card-text); font-size: .85rem; line-height: 1.45; word-break: keep-all; }
.module-product-card--lg, .module-product-card--md { height: auto; }
.module-product-card--lg { display: grid; grid-template-columns: calc(var(--product-card-lg-fig-desktop, 260px) + 12px) minmax(0, 1fr); grid-template-areas: "ribbon ribbon" "fig body"; border: 2px solid var(--product-card-accent); }
.module-product-card--lg > .module-product-card__ribbon { grid-area: ribbon; }
.module-product-card--lg > .module-product-card__fig { grid-area: fig; padding: 10px 0 10px 12px; }
.module-product-card--lg > .module-product-card__body { grid-area: body; padding: 10px 14px; gap: 7px; justify-content: space-between; }
.module-product-card--lg .module-product-card__name { font-size: 1.25rem; line-height: 1.3; }
.module-product-card--lg .module-product-card__sale { font-size: 1.25rem; }
.module-product-card--lg .module-product-card__rank { top: 18px; left: 18px; width: 44px; height: 44px; background: var(--product-card-accent); font-size: 1.4rem; }
.module-product-card--lg .module-product-card__off { top: 18px; right: 8px; }
.module-product-card--lg .module-product-card__buy, .module-product-card--md .module-product-card__buy { margin-top: 0; background: var(--product-card-accent); color: #fff; }   /* 1~4위 단추 = 빨강 단색 · 일반 카드는 연한 배경 */
.module-product-card--lg .module-product-card__buy:hover, .module-product-card--md .module-product-card__buy:hover { background: #912018; }
.module-product-card--md .module-product-card__name { font-size: 1rem; line-height: 1.3; }
.module-product-card--md .module-product-card__sale { font-size: 1.15rem; }
.module-product-card--lg > .module-product-card__body > *, .module-product-card--md > .module-product-card__body > * { min-width: 0; }
/* 지표 크기 — 1위 + 안 A 2~4위 = 글자·별 14px · 줄 사이 8px · 글자와 막대 사이 4px · 막대 10px / 안 B 2~4위 = 일반 카드와 같은 크기(줄 사이 6px · 글자와 막대 3px) */
.module-product-card--lg .module-product-card__interest, .module-product-card__list--cols-1 .module-product-card--md .module-product-card__interest { font-size: 14px; gap: 8px; }
.module-product-card--lg .module-rating-stars, .module-product-card__list--cols-1 .module-product-card--md .module-rating-stars { font-size: 14px; }
.module-product-card--lg .module-product-card__interest-track, .module-product-card__list--cols-1 .module-product-card--md .module-product-card__interest-track { height: 10px; margin-top: -4px; }
.module-product-card__list.module-product-card__list--cols-1 { grid-template-columns: minmax(0, 1fr); gap: 8px; }
/* 안 A — 2~4위 1열 가로형(그림 왼쪽) */
.module-product-card__list--cols-1 .module-product-card--md { display: grid; grid-template-columns: calc(var(--product-card-md-fig-desktop, 200px) + 10px) minmax(0, 1fr); }
.module-product-card__list--cols-1 .module-product-card--md > .module-product-card__fig { padding: 8px 0 8px 10px; align-self: center; }
.module-product-card__list--cols-1 .module-product-card--md > .module-product-card__body { padding: 8px 12px; gap: 5px; justify-content: space-between; }
.module-product-card__list--cols-1 .module-product-card--md .module-product-card__rank { top: 14px; left: 16px; }
/* 안 B — 2~4위 3열 세로형(한 줄에 세 장 · 1위 아래) */
.module-product-card__list.module-product-card__list--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.module-product-card__list--cols-3 .module-product-card--md > .module-product-card__fig { padding: 10px 12px 0; }
.module-product-card__list--cols-3 .module-product-card--md > .module-product-card__fig img { width: var(--product-card-md-fig-desktop, 200px); max-width: 100%; margin-inline: auto; }
.module-product-card__list--cols-3 .module-product-card--md .module-product-card__name { min-height: 2.6em; }
.module-product-card__list--cols-3 .module-product-card--md .module-product-card__buy { margin-top: auto; }
/* 모바일(767px 이하) — 그림 왼쪽 + 이름·가격, 지표는 카드 안쪽 전체 폭, 이유, 전체 폭 단추. 순위 카드 지표 글자 14px(1위·2~4위 공통) */
@media (max-width: 767px) {
  .module-product-card__list.module-product-card__list--cols-3 { grid-template-columns: minmax(0, 1fr); }
  .module-product-card__ribbon { font-size: 17px; padding: 7px 10px; }
  .module-product-card--lg, .module-product-card__list .module-product-card--md { display: grid; grid-template-rows: none; grid-template-columns: calc(var(--product-card-lg-fig, 112px) + 8px) minmax(0, 1fr); grid-template-areas: "ribbon ribbon" "fig name" "fig interest" "reason reason" "price price" "buy buy"; grid-template-rows: auto auto 1fr; row-gap: 5px; padding-bottom: 10px; }
  .module-product-card__list .module-product-card--md { grid-template-columns: calc(var(--product-card-md-fig, 104px) + 8px) minmax(0, 1fr); grid-template-areas: "fig name" "fig interest" "reason reason" "price price" "buy buy"; }
  .module-product-card--lg > .module-product-card__body, .module-product-card--md > .module-product-card__body { display: contents; }
  .module-product-card--lg > .module-product-card__fig, .module-product-card__list .module-product-card--md > .module-product-card__fig { grid-area: fig; padding: 6px 0 0 8px; align-self: center; }
  .module-product-card__list .module-product-card--md > .module-product-card__fig img { width: 100%; }
  .module-product-card--lg .module-product-card__name, .module-product-card__list .module-product-card--md .module-product-card__name { grid-area: name; margin: 6px 8px 0 !important; min-height: 0; }
  .module-product-card--lg .module-product-card__name { font-size: 1.05rem; }
  .module-product-card__list .module-product-card--md .module-product-card__name { font-size: .95rem; }
  .module-product-card--lg .module-product-card__price, .module-product-card__list .module-product-card--md .module-product-card__price { grid-area: price; margin: 0 10px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
  .module-product-card--lg .module-product-card__sale, .module-product-card__list .module-product-card--md .module-product-card__sale { font-size: 1.4rem; }
  .module-product-card--lg .module-product-card__interest, .module-product-card__list .module-product-card--md .module-product-card__interest { grid-area: interest; align-self: start; margin: 0 8px 0 0; font-size: 14px; gap: 8px; }
  .module-product-card--lg .module-rating-stars, .module-product-card__list .module-product-card--md .module-rating-stars { font-size: 14px; }
  .module-product-card--lg .module-product-card__interest-track, .module-product-card__list .module-product-card--md .module-product-card__interest-track { height: 10px; margin-top: -4px; }
  .module-product-card--lg .module-product-card__reason, .module-product-card__list .module-product-card--md .module-product-card__reason { grid-area: reason; margin: 0 10px; min-height: 0; }
  .module-product-card--lg .module-product-card__buy, .module-product-card__list .module-product-card--md .module-product-card__buy { grid-area: buy; margin: 0 10px; }
  .module-product-card--lg .module-product-card__rank { top: 10px; left: 12px; width: 34px; height: 34px; font-size: 1.1rem; }
  .module-product-card--lg .module-product-card__off { top: 10px; right: 2px; }
  .module-product-card__list .module-product-card--md .module-product-card__rank { top: 8px; left: 10px; width: 30px; height: 30px; font-size: 1rem; }
}

/* core/modules/display/highlight/style.css */

@media (prefers-reduced-motion: reduce) {
}
.module-highlight { position: relative; color: white; border-radius: 12px; padding: 1.5rem 2rem 2rem; margin: 2rem 0; text-align: center; overflow: hidden; background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); border-left: none !important; }
@media (max-width: 640px) {
}
@media (max-width: 768px) {
}
.module-highlight {
    position: relative; color: #ffffff; border-radius: 12px; padding: 1.5rem 2rem 2rem; margin: 2rem 0; text-align: center; overflow: hidden; border-left: none !important; background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}
@media (max-width: 768px) {
}
.u-width-100 { width: 100% !important; display: block; }
.module-highlight__entry-content .module-highlight__step-card ul, .module-highlight__entry-content .module-highlight__step-card ol, .module-highlight__entry-content .module-highlight ul, .module-highlight__entry-content .module-highlight ol, .module-highlight__entry-content .module-highlight__faq ul, .module-highlight__entry-content .module-highlight__faq ol {
    padding-left: 1.5em !important;
    margin-left: 0 !important;
    margin-bottom: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
.module-highlight__step-card:hover {
        transform: none !important;
    }
.module-highlight .module-highlight__cta:hover {
        transform: none !important;
    }
}
.module-highlight__page-header .module-highlight__cta {
    margin-top: 20px;
    min-width: 160px;
}
.module-highlight {
    position: relative;
    color: #ffffff;
    border-radius: 12px;
    padding: 1.5rem 2rem 2rem;
    margin: 2rem 0;
    text-align: center;
    overflow: hidden;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}
.module-highlight__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0.5rem 0 1rem 0;
    color: #ffffff;
    line-height: 1.3;
}
.module-highlight p { color: #ffffff; font-size: 1rem; line-height: 1.6; margin: 0 0 1.5em; }
.module-highlight ul { text-align: left; margin: 24px 0 0 0; padding-left: 0; list-style: none; }
.module-highlight ul li { color: #ffffff; margin-bottom: 8px; list-style: none; }
.module-highlight__briefing > *:last-child, .module-highlight__briefing-body > *:last-child, .module-highlight__info-box > *:last-child, .module-highlight__faq-a > *:last-child, .module-highlight__key-facts-core-text > *:last-child, .module-highlight__quick-answer-content > *:last-child, .module-highlight__answer-first > *:last-child, .module-highlight__answer-first-answer > *:last-child, .module-highlight > *:last-child, .module-highlight__page-header > *:last-child {
    margin-bottom: 0;
}
.u-width-100 { width: 100%; }
.module-highlight {
  border-radius: 10px;
  padding: 20px 24px;
  margin: 20px 0;
}
.module-highlight:has(.module-highlight__icon) {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
@media (max-width: 640px) {
.module-highlight { flex-direction: column; gap: 10px; padding: 16px; }
}
/* 2026-10-10 사용자 승인(「하이라이트 제목·설명·버튼 낱말 중간 끊김」) — 한글은 낱말 단위로 줄바꿈(keep-all) · 낱말이 칸보다 길 때만 끊음(anywhere · 선례 = app-layer/style.css:22 `word-break:keep-all; overflow-wrap:anywhere`) */
/* 2026-10-10 보강 — 상자 뿌리에 걸어 안쪽 모든 글자(제목·설명·부가 줄·버튼)가 물려받는다 */
.module-highlight { word-break: keep-all; overflow-wrap: anywhere; }
.module-highlight__cta {
    position: relative;
    overflow: hidden;
    display: inline-block;
    color: white;
    text-decoration: none;
    padding: 14px 30px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    
    margin-top: 28px;
    margin-bottom: 28px;
}
.module-highlight__cta--xl {
    padding: 18px 40px;
    font-size: 24px;
    font-weight: 700;
    min-height: 70px;
}
.module-highlight__cta + .module-highlight__cta, .module-highlight__cta--large + .module-highlight__cta--large, .module-highlight__cta--xl + .module-highlight__cta--xl, .module-highlight__cta--hero + .module-highlight__cta--hero {
    margin-top: 12px;
}
.module-highlight__cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(115deg, transparent 0%, rgba(30, 64, 175, 0.15) 50%, transparent 100%);
    transform: skewX(-20deg);
    transition: left 0.7s ease;
    pointer-events: none;
    z-index: 1;
}
.module-highlight__cta:hover::before { left: 120%; }
.module-highlight__cta > * { position: relative; z-index: 2; }
.module-highlight__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
.module-highlight__cta, .module-highlight__cta--large, .module-highlight__cta--xl, .module-highlight__cta--hero {
        width: 100%;
    }
.module-highlight__cta + .module-highlight__cta, .module-highlight__cta--large + .module-highlight__cta--large, .module-highlight__cta--xl + .module-highlight__cta--xl, .module-highlight__cta--hero + .module-highlight__cta--hero {
        margin-top: 12px;
    }
}
.module-highlight__cta--blue {
    background: linear-gradient(135deg, #3b82f6, #1e40af) !important;
    color: #fff !important;
    font-weight: 700 !important;
}
.module-highlight__cta--blue:hover {
    background: linear-gradient(135deg, #2563eb, #1e3a8a) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(30, 64, 175, 0.45);
}
.module-highlight .module-highlight__cta--red {
    background: #fff !important;
    color: #dc2626 !important;
    border: 2px solid #dc2626 !important;
}
.module-highlight .module-highlight__cta--red:hover {
    background: #fff !important;
    color: #dc2626 !important;
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.45),
        0 10px 28px rgba(220, 38, 38, 0.32);
}
.module-highlight .module-highlight__cta--blue {
    background: #fff !important;
    color: #1e40af !important;
    border: 2px solid #1e40af !important;
}
.module-highlight .module-highlight__cta--blue:hover {
    background: #fff !important;
    color: #1e40af !important;
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.45),
        0 10px 28px rgba(30, 64, 175, 0.32);
}
.module-highlight .module-highlight__cta--green {
    background: #fff !important;
    color: #166534 !important;
    border: 2px solid #166534 !important;
}
.module-highlight .module-highlight__cta--green:hover {
    background: #fff !important;
    color: #166534 !important;
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.45),
        0 10px 28px rgba(22, 101, 52, 0.32);
}
.module-highlight .module-highlight__cta--purple {
    background: #fff !important;
    color: #7c3aed !important;
    border: 2px solid #7c3aed !important;
}
.module-highlight .module-highlight__cta--purple:hover {
    background: #fff !important;
    color: #7c3aed !important;
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.45),
        0 10px 28px rgba(124, 58, 237, 0.32);
}
a.module-highlight__cta, a.module-highlight__cta:hover, .module-highlight__content-2 a.module-highlight__cta, .module-highlight__content-2 a.module-highlight__cta:hover, .module-highlight a.module-highlight__cta, .module-highlight a.module-highlight__cta:hover, .module-highlight__content-2 .module-highlight a.module-highlight__cta:hover {
    text-decoration: none !important;
}
.module-highlight .module-highlight__cta {
    display: block;
    width: 100%;
    background: #fff;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
    margin-top: 12px;
}
.module-highlight .module-highlight__cta:hover {
    background: white !important;
    opacity: 1 !important;
    transform: translateY(-2px);
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.55),
        0 12px 30px rgba(0, 0, 0, 0.35);
}
.module-highlight.module-highlight__bg-gradient-blue .module-highlight__cta { color: #2563eb !important; }
.module-highlight.module-highlight__bg-gradient-green .module-highlight__cta { color: #166534 !important; }
.module-highlight.module-highlight__bg-gradient-orange .module-highlight__cta { color: #92400e !important; }
.module-highlight.module-highlight__bg-gradient-purple .module-highlight__cta { color: #5b21b6 !important; }
.module-highlight.module-highlight__bg-gradient-red .module-highlight__cta { color: #991b1b !important; }
.module-highlight.module-highlight__bg-gradient-teal .module-highlight__cta { color: #0d9488 !important; }
.module-highlight.module-highlight__bg-gradient-gold .module-highlight__cta { color: #92400e !important; }
.module-highlight.module-highlight__bg-gradient-pink .module-highlight__cta { color: #db2777 !important; }
.module-highlight.module-highlight__bg-gradient-indigo .module-highlight__cta { color: #4338ca !important; }
.module-highlight.module-highlight__bg-gradient-violet .module-highlight__cta { color: #6d28d9 !important; }
.module-highlight.module-highlight__bg-gradient-cyan .module-highlight__cta { color: #0891b2 !important; }
.module-highlight.module-highlight__bg-gradient-brown .module-highlight__cta { color: #8b4513 !important; }
.module-highlight.module-highlight__bg-gradient-blue .module-highlight__cta:hover { color: #1d4ed8 !important; }
.module-highlight.module-highlight__bg-gradient-green .module-highlight__cta:hover { color: #059669 !important; }
.module-highlight.module-highlight__bg-gradient-orange .module-highlight__cta:hover { color: #78350f !important; }
.module-highlight.module-highlight__bg-gradient-purple .module-highlight__cta:hover { color: #4c1d95 !important; }
.module-highlight.module-highlight__bg-gradient-red .module-highlight__cta:hover { color: #dc2626 !important; }
.module-highlight.module-highlight__bg-gradient-teal .module-highlight__cta:hover { color: #0f766e !important; }
.module-highlight.module-highlight__bg-gradient-gold .module-highlight__cta:hover { color: #78350f !important; }
.module-highlight.module-highlight__bg-gradient-pink .module-highlight__cta:hover { color: #be185d !important; }
.module-highlight.module-highlight__bg-gradient-indigo .module-highlight__cta:hover { color: #3730a3 !important; }
.module-highlight.module-highlight__bg-gradient-violet .module-highlight__cta:hover { color: #5b21b6 !important; }
.module-highlight.module-highlight__bg-gradient-cyan .module-highlight__cta:hover { color: #0e7490 !important; }
.module-highlight.module-highlight__bg-gradient-brown .module-highlight__cta:hover { color: #6b3410 !important; }
.module-highlight {
    position: relative;
    color: white;
    border-radius: 12px;
    padding: 1.5rem 2rem 2rem;
    margin: 2rem 0;
    text-align: center;
    overflow: hidden;
    border-left: none !important;
}
.module-highlight .module-highlight__title, .module-highlight p.module-highlight__title, p.module-highlight__title {
    font-size: 1.5rem !important;
    font-weight: bold !important;
    margin: 0.5rem 0 1rem 0 !important;
    color: white !important;
    line-height: 1.3 !important;
}
.module-highlight p, .module-highlight__content-2 .module-highlight p, .module-highlight__entry-content .module-highlight p {
    color: white !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin: 0 0 1.5em !important;
}
.module-highlight ul, .module-highlight__entry-content .module-highlight ul, body .module-highlight ul {
    text-align: left !important;
    margin: 24px 0 0 0 !important;
    padding-left: 0 !important;
    list-style-type: none !important;
    list-style: none !important;
}
.module-highlight ul li, .module-highlight__entry-content .module-highlight ul li, body .module-highlight ul li {
    list-style: none !important;
    list-style-type: none !important;
}
.module-highlight li {
    margin-bottom: 8px;
    color: inherit;
}
.module-highlight li:last-child {
    margin-bottom: 0;
}
.module-highlight strong + ul, .module-highlight p + ul, .module-highlight__entry-content .module-highlight strong + ul, .module-highlight__entry-content .module-highlight p + ul {
    margin-top: 16px !important;
}
.module-highlight > strong, .module-highlight__entry-content .module-highlight > strong {
    display: block;
    margin-bottom: 12px;
}
.module-highlight[class*="bg-gradient-"] a {
    color: #fff !important;
}
.module-highlight[class*="bg-gradient-"] a:hover {
    color: #fff !important;
    opacity: 0.9;
}
@media (max-width: 768px) {
.module-highlight {
        padding: 1.5rem;
        margin: 1.5rem 0;
    }
.module-highlight p.module-highlight__title, p.module-highlight__title {
        font-size: 1.25rem !important;
    }
}
.module-highlight__calc-btn:hover, .module-highlight__calc-btn:focus {
  color: #fff;
}
/* 🔴 animation 이 쓰는 @keyframes 정의(라이브 원문) — 없으면 요소가 «시작 상태로 굳는다» */
@keyframes cta-arrow-bob-hover {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(10px); }
}

/* ── 코너 링크 화살표 규칙(지휘자 일괄 · 2026-09-07) ── */
/* 🔴 CTA 가 없으면 링크 자리의 아래 여백을 남기지 않는다(사용자 지적 · 재구성이 지워 재적용) */
/* 🔴 라이브에 규칙이 없어 «흰 단추 위 흰 글자»가 되던 5톤 */
.module-highlight .module-highlight__cta--yellow { background:#fff !important; color:#a16207 !important; border:2px solid #a16207 !important; }
.module-highlight .module-highlight__cta--rose { background:#fff !important; color:#be123c !important; border:2px solid #be123c !important; }
.module-highlight .module-highlight__cta--gray { background:#fff !important; color:#374151 !important; border:2px solid #374151 !important; }
.module-highlight .module-highlight__cta--mint { background:#fff !important; color:#0f766e !important; border:2px solid #0f766e !important; }
.module-highlight .module-highlight__cta--silver { background:#fff !important; color:#475569 !important; border:2px solid #475569 !important; }

/* ── 보완 톤 5종 + CTA 없는 상자의 아래 여백 (2026-09-08 사용자 지적) ──
 * 표본이 쓰는 mint·rose·gray·yellow·silver 에 규칙이 «하나도» 없어, 상자는 기본 배경에
 * 흰 글자만 걸리고 단추는 background:#fff + color:white 라 글자가 사라졌다.
 * 무늬는 기존 12톤과 동일하다(배경 gradient + 단추 글자색 + 단추 호버색).
 * 🔴 밝은 톤(yellow·silver)은 본문 글자를 어둡게 둔다 — 흰 글자는 읽히지 않는다.
 */
.module-highlight__bg-gradient-mint   { background: linear-gradient(135deg, #34d399, #10b981); color: #ffffff; }
.module-highlight__bg-gradient-mint   .module-highlight__cta { color: #059669 !important; }
.module-highlight__bg-gradient-mint   .module-highlight__cta:hover { color: #047857 !important; }
.module-highlight__bg-gradient-rose   .module-highlight__cta { color: #be123c !important; }
.module-highlight__bg-gradient-rose   .module-highlight__cta:hover { color: #9f1239 !important; }
.module-highlight__bg-gradient-gray   .module-highlight__cta { color: #374151 !important; }
.module-highlight__bg-gradient-gray   .module-highlight__cta:hover { color: #1f2937 !important; }
.module-highlight__bg-gradient-yellow .module-highlight__cta { color: #a16207 !important; }
.module-highlight__bg-gradient-yellow .module-highlight__cta:hover { color: #854d0e !important; }
.module-highlight__bg-gradient-silver .module-highlight__cta { color: #475569 !important; }
.module-highlight__bg-gradient-silver .module-highlight__cta:hover { color: #334155 !important; }

/* CTA 가 없으면 아래 여백을 위 여백과 같게 — 기본은 padding:1.5rem 2rem 2rem 이라 아래가 더 비어 있다 */

/* hand-fix:highlight:보완 톤 5종 */
/* ── 보완 톤 5종 + CTA 없는 상자의 아래 여백 (2026-09-08 사용자 반복 지적) ──
 * 🔴 굵기를 «이기게» 다시 썼다. 라이브에 이런 규칙이 있다:
 *      .module-highlight[class*="bg-gradient-"] a { color:#fff !important }   ← (0,2,1)
 *    앞서 내가 쓴 「.bg-gradient-mint .module-cta」 는 (0,2,0) 이라 «졌다».
 *    그런데 내 판정 도구가 속성 선택자를 세지 않아 「이긴다」고 잘못 읽었고,
 *    나는 사용자에게 「캐시 때문」이라고 «틀린 답»을 했다.
 *    그래서 「.module-highlight.bg-gradient-X a.module-cta」 (0,3,1) 로 올린다.
 */
.module-highlight.module-highlight__bg-gradient-mint { background: linear-gradient(135deg, #34d399, #10b981); color: #ffffff; }
.module-highlight.module-highlight__bg-gradient-mint a.module-highlight__cta { color: #059669 !important; }
.module-highlight.module-highlight__bg-gradient-mint a.module-highlight__cta:hover { color: #047857 !important; }
.module-highlight.module-highlight__bg-gradient-rose { background: linear-gradient(135deg, #fb7185, #e11d48); color: #ffffff; }
.module-highlight.module-highlight__bg-gradient-rose a.module-highlight__cta { color: #be123c !important; }
.module-highlight.module-highlight__bg-gradient-rose a.module-highlight__cta:hover { color: #9f1239 !important; }
.module-highlight.module-highlight__bg-gradient-gray { background: linear-gradient(135deg, #9ca3af, #6b7280); color: #ffffff; }
.module-highlight.module-highlight__bg-gradient-gray a.module-highlight__cta { color: #374151 !important; }
.module-highlight.module-highlight__bg-gradient-gray a.module-highlight__cta:hover { color: #1f2937 !important; }
.module-highlight.module-highlight__bg-gradient-yellow { background: linear-gradient(135deg, #fde047, #facc15); color: #1f2937; }
.module-highlight.module-highlight__bg-gradient-yellow a.module-highlight__cta { color: #a16207 !important; }
.module-highlight.module-highlight__bg-gradient-yellow a.module-highlight__cta:hover { color: #854d0e !important; }
.module-highlight.module-highlight__bg-gradient-silver { background: linear-gradient(135deg, #e5e7eb, #cbd5e1); color: #1f2937; }
.module-highlight.module-highlight__bg-gradient-silver a.module-highlight__cta { color: #475569 !important; }
.module-highlight.module-highlight__bg-gradient-silver a.module-highlight__cta:hover { color: #334155 !important; }

/* CTA 가 없으면 아래 여백이 «이중»이다 — 상자 padding 에 마지막 자식의 margin-bottom 이 더해진다
   (사용자: 「여기 하단 여백과 자체 하단 여백이 중첩돼서 그래」). 둘 다 잡는다. */
.module-highlight:not(:has(.module-highlight__cta)) { padding-bottom: 1.5rem; }
.module-highlight:not(:has(.module-highlight__cta)) > :last-child { margin-bottom: 0; }

/* ── 라이브 결손 규칙 동기화 (sync-live) ── */
/* 라이브 원문 순서 · 우리에 없던 선택자만 */
  .module-highlight__text { font-size: 1rem; line-height: 1.6; margin-bottom: 1.5rem; color: rgba(255, 255, 255, 0.9) !important; }
  .module-highlight__description { color: white !important; font-size: 1.05em; margin-bottom: 12px; font-weight: 600; }
  .module-highlight--blue { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
  .module-highlight--green { background: linear-gradient(135deg, #22c55e 0%, #15803d 100%); }
  .module-highlight--purple { background: linear-gradient(135deg, #a855f7 0%, #6b21a8 100%); }
  .module-highlight--orange { background: linear-gradient(135deg, #f97316 0%, #c2410c 100%); }
  .module-highlight--red { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); }
  .module-highlight--gold { background: linear-gradient(135deg, #eab308 0%, #a16207 100%); }
  .module-highlight--mint { background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%); }
  .module-highlight--gray { background: linear-gradient(135deg, #64748b 0%, #334155 100%); }
  .module-highlight__tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
  .module-highlight--tag { display: inline-block; padding: 6px 14px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 20px; color: #2563eb; font-size: 13px; text-decoration: none; transition: background 0.15s; }
  .module-highlight--tag:hover { background: #dbeafe; border-color: #93c5fd; }
  .module-highlight__badge, .module-highlight--badge { display: inline-block; padding: 2px 8px; font-size: 13px; /* HBS 09-28 · 11px → 13px */ font-weight: 600; border-radius: 10px; vertical-align: middle; line-height: 1.5; }
  .module-highlight__badge--info, .module-highlight--badge-info { background: #dbeafe; color: #1d4ed8; }
  .module-highlight--badge-current { background: #dbeafe; color: #1d4ed8; }
  .module-highlight--badge-notax { background: #dcfce7; color: #166534; }
  .module-highlight--savings { background: linear-gradient(135deg, #f0fdf4, #dcfce7); border: 1px solid #bbf7d0; }
  .module-highlight__icon { font-size: 28px; flex-shrink: 0; }
  .module-highlight__content { flex: 1; }
  .module-highlight__content strong { display: block; font-size: 18px; color: #166534; margin-bottom: 4px; }
  .module-highlight__content p { margin: 0; font-size: 15px; color: #374151; }
/* ── 동기화 블록 끝 (sync-live) ── */

/* 조 BQ(11-05 사용자 직접 지시 «모바일에서 하이라이트 모듈 좌우 패딩값 조금 줄여»): 좌우 안쪽 여백을 사이트가 바꿀 수 있게 CSS 변수로 열어 둠 · 기본값 = 지금 값 1.5rem(24px) → 다른 사이트 화면 변화 0 */
@media (max-width: 768px) { .module-highlight { padding-left: var(--module-highlight-pad-x, 1.5rem); padding-right: var(--module-highlight-pad-x, 1.5rem); } }

/* core/modules/display/dimension-outline/style.css */
/* dimension-outline — 가로·높이·깊이 상자 윤곽 그림(인라인 SVG) + 화면 글자 한 줄. 그림 파일 0.
   사이트는 아래 변수만 바꾼다(부품 CSS 를 덮어쓰지 않는다). */
.module-dimension-outline {
  --dimension-outline-front: #fff;
  --dimension-outline-top: #eef0f3;
  --dimension-outline-side: #dde1e6;
  --dimension-outline-stroke: #4b5563;
  --dimension-outline-dim: #e8590c;
  --dimension-outline-text: #1f2937;
  --dimension-outline-max-width: 420px;
  margin: 0;
  max-width: 100%;
  min-width: 0;
}
.module-dimension-outline__svg {
  display: block;
  width: 100%;
  max-width: var(--dimension-outline-max-width);
  height: auto;
  overflow: visible;
}
.module-dimension-outline__front { fill: var(--dimension-outline-front); stroke: var(--dimension-outline-stroke); stroke-width: 1.6; stroke-linejoin: round; }
.module-dimension-outline__top { fill: var(--dimension-outline-top); stroke: var(--dimension-outline-stroke); stroke-width: 1.6; stroke-linejoin: round; }
.module-dimension-outline__side { fill: var(--dimension-outline-side); stroke: var(--dimension-outline-stroke); stroke-width: 1.6; stroke-linejoin: round; }
.module-dimension-outline__dim line { stroke: var(--dimension-outline-dim); stroke-width: 1.4; stroke-linecap: round; }
.module-dimension-outline__num text { fill: var(--dimension-outline-dim); font-size: 12px; font-weight: 700; font-family: inherit; }
.module-dimension-outline__line {
  display: flex;
  flex-direction: column;
  gap: .15em;
  margin-top: .35em;
  color: var(--dimension-outline-text);
  overflow-wrap: anywhere;
}
.module-dimension-outline__values { font-weight: 700; }
.module-dimension-outline__caption { font-size: .92em; opacity: .85; }

/* core/modules/display/key-facts/style.css */

@media (max-width:820px) {
}
.module-key-facts__card-fact-table th { width:150px; font-size:13px; font-weight:700; color:var(--mut); background:var(--surf2); white-space:nowrap; padding:9px 12px; border:1px solid var(--line); vertical-align:top; text-align:left; }
.module-key-facts__card-fact-table td { color:var(--ink); font-weight:600; padding:9px 12px; border:1px solid var(--line); vertical-align:top; text-align:left; }
@media (max-width:720px) {
.module-key-facts__card-fact-table th { width:auto; white-space:normal; display:block; border-top:0; }
}


@media (max-width:820px) {

}
@media (max-width:720px) {
}
@media (max-width:600px) {
}
@media (max-width: 600px) {
}

.u-visual-block-box {
  margin: 0 0 14px;
}
.module-key-facts__visual-box-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surf2);
}
@media (max-width:820px) {
.module-key-facts__price-trend-line-titled-box, .u-visual-block-box.module-key-facts__visual-box-table-scroll, .module-key-facts__card-grid-deep-dive-panel, .module-key-facts__footnote-block, .module-key-facts__cross-link-list-column {
    padding-left: 12px;
    padding-right: 12px;
  }
}
.module-key-facts__visual-box-table-scroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  background: linear-gradient(to right, var(--surf2) 30%, transparent) left / 28px 100% no-repeat,
      linear-gradient(to left, var(--surf2) 30%, transparent) right / 28px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.22), transparent) left / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.22), transparent) right / 12px 100% no-repeat,
      var(--surf2);
  background-attachment: local,local,scroll,scroll,local;
}
.module-key-facts__visual-box-table-scroll::-webkit-scrollbar {
  height: 8px;
}
.module-key-facts__visual-box-table-scroll::-webkit-scrollbar-thumb {
  background: var(--line2);
  border-radius: 99px;
}
.module-key-facts__visual-box-table-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.module-key-facts__visual-box-table-scroll th:first-child, .module-key-facts__visual-box-table-scroll td:first-child {
  scroll-snap-align: start;
}
.module-key-facts__table-scroll-hint+.module-key-facts__prose-body-block, .module-key-facts__table-scroll-hint+.u-visual-block-box {
  margin-top: 2px;
}
.module-key-facts__card-fact-table { margin-top: 4px }
.module-key-facts__card-fact-table table { width: 100%; border-collapse: collapse; font-size: 15px }
.module-key-facts__card-fact-table caption {
  caption-side: top; text-align: left; padding: 0 0 8px;
  font-size: 13px; font-weight: 700; color: var(--mut);
}
.module-key-facts__card-fact-table th, .module-key-facts__card-fact-table td {
  padding: 9px 12px; border: 1px solid var(--line); vertical-align: top; text-align: left;
}
.module-key-facts__card-fact-table th {
  width: 150px; font-size: 13px; font-weight: 700; color: var(--mut);
  background: var(--surf2); white-space: nowrap;
}
.module-key-facts__card-fact-table td { color: var(--ink); font-weight: 600 }
.module-key-facts__card-fact-table-wide td { font-weight: 500; color: var(--ink2) }
.module-key-facts__card-fact-table-source { margin: 8px 0 0; font-size: 13px; color: var(--mut) }
@media (max-width:720px) {
.module-key-facts__card-fact-table table, .module-key-facts__card-fact-table tbody { display: block }
.module-key-facts__card-fact-table tr { display: grid; grid-template-columns: minmax(92px,36%) minmax(0,1fr) }
.module-key-facts__card-fact-table th, .module-key-facts__card-fact-table td { display: block; border-top: 0 }
.module-key-facts__card-fact-table tr:first-child th, .module-key-facts__card-fact-table tr:first-child td { border-top: 1px solid var(--line) }
.module-key-facts__card-fact-table th { width: auto; white-space: normal }
}
.u-visual-block-box { margin:0 0 14px; border:0; }
.module-key-facts__visual-box-table-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:linear-gradient(to right,var(--surf2)30%,transparent)left / 28px 100% no-repeat,linear-gradient(to left,var(--surf2)30%,transparent)right / 28px 100% no-repeat,radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.22),transparent)left / 12px 100% no-repeat,radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.22),transparent)right / 12px 100% no-repeat,var(--surf2); position:relative; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scroll-snap-type:x proximity; background-attachment:local,local,scroll,scroll,local; }
.module-key-facts__visual-box-table-scroll::-webkit-scrollbar { height:8px; }
.module-key-facts__visual-box-table-scroll::-webkit-scrollbar-thumb { background:var(--line2); border-radius:99px; }
.module-key-facts__visual-box-table-scroll::-webkit-scrollbar-track { background:transparent; }
.module-key-facts__visual-box-table-scroll th:first-child { scroll-snap-align:start; }
.module-key-facts__visual-box-table-scroll td:first-child { scroll-snap-align:start; }

.module-key-facts__table-scroll-hint+.u-visual-block-box { margin-top:2px; }
.module-key-facts__core-list { margin:28px 0; }
.module-key-facts__core-item { background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%); border:1px solid #e2e8f0; border-left:4px solid var(--color-primary); border-radius:var(--color-radius-md); padding:20px 24px; margin:16px 0; }
.module-key-facts__core-topic { font-size:17px; font-weight:700; color:var(--color-text-primary); margin:0 0 12px; }
.module-key-facts__core-text { font-size:16px; color:var(--color-text-body); line-height:1.75; }
.module-key-facts__core-text p { margin:0 0 8px; }
.module-key-facts__core-text p:last-child { margin-bottom:0; }
.module-key-facts__core-text ul { margin:8px 0 0; padding-left:20px; list-style:disc; }
.module-key-facts__core-text li { margin-bottom:6px; line-height:1.65; }
.module-key-facts__core-text li:last-child { margin-bottom:0; }
.module-key-facts__core-text strong { color:var(--color-text-primary); font-weight:600; }

.module-key-facts__card-fact-table table { width:100%; border-collapse:collapse; font-size:15px; }
.module-key-facts__card-fact-table caption { caption-side:top; text-align:left; padding:0 0 8px; font-size:13px; font-weight:700; color:var(--mut); }
.module-key-facts__card-fact-table th { padding:9px 12px; border:1px solid var(--line); vertical-align:top; text-align:left; width:150px; font-size:13px; font-weight:700; color:var(--mut); background:var(--surf2); white-space:nowrap; }
.module-key-facts__card-fact-table td { padding:9px 12px; border:1px solid var(--line); vertical-align:top; text-align:left; color:var(--ink); font-weight:600; }
.module-key-facts__card-fact-table-wide td { font-weight:500; color:var(--ink2); }
.module-key-facts__card-fact-table-source { margin:8px 0 0; font-size:13px; color:var(--mut); }
@media (max-width:820px) {
.u-visual-block-box.module-key-facts__visual-box-table-scroll { padding-left:12px; padding-right:12px; }

}
@media (max-width:720px) {
.module-key-facts__card-fact-table table { display:block; }
.module-key-facts__card-fact-table tbody { display:block; }
.module-key-facts__card-fact-table tr { display:grid; grid-template-columns:minmax(92px,36%)minmax(0,1fr); }
.module-key-facts__card-fact-table th { display:block; border-top:0; width:auto; white-space:normal; }
.module-key-facts__card-fact-table td { display:block; border-top:0; }
.module-key-facts__card-fact-table tr:first-child th { border-top:1px solid var(--line); }
.module-key-facts__card-fact-table tr:first-child td { border-top:1px solid var(--line); }
}
@media (max-width:600px) {
.module-key-facts__core-item { padding:16px 18px; }
}
.module-key-facts__briefing > *:last-child, .module-key-facts__briefing-body > *:last-child, .module-key-facts__info-box > *:last-child, .module-key-facts__faq-a > *:last-child, .module-key-facts__core-text > *:last-child, .module-key-facts__quick-answer-content > *:last-child, .module-key-facts__answer-first > *:last-child, .module-key-facts__answer-first-answer > *:last-child, .module-key-facts__highlight > *:last-child, .module-key-facts__page-header > *:last-child {
    margin-bottom: 0;
}
.module-key-facts__core-list {
  margin: 28px 0;
}
.module-key-facts__core-item {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-left: 4px solid var(--color-primary);
  border-radius: var(--color-radius-md);
  padding: 20px 24px;
  margin: 16px 0;
}
.module-key-facts__core-topic {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 12px;
}
.module-key-facts__core-text {
  font-size: 16px;
  color: var(--color-text-body);
  line-height: 1.75;
}
.module-key-facts__core-text p {
  margin: 0 0 8px;
}
.module-key-facts__core-text p:last-child {
  margin-bottom: 0;
}
.module-key-facts__core-text ul {
  margin: 8px 0 0;
  padding-left: 20px;
  list-style: disc;
}
.module-key-facts__core-text li {
  margin-bottom: 6px;
  line-height: 1.65;
}
.module-key-facts__core-text li:last-child {
  margin-bottom: 0;
}
.module-key-facts__core-text strong {
  color: var(--color-text-primary);
  font-weight: 600;
}
@media (max-width: 600px) {
.module-key-facts__core-item {
    padding: 16px 18px;
  }
}

/* ── 라이브 결손 규칙 동기화 (sync-live) ── */
/* 라이브 원문 순서 · 우리에 없던 선택자만 */
  .module-key-facts__visual-box-table-scroll--matrix td:first-child { border-right-color:var(--line2); }
  .module-key-facts__visual-box-table-scroll--matrix th:first-child { border-right-color:var(--line2); }
  .module-key-facts__core-source { display: block; margin-top: 12px; padding-top: 10px; border-top: 1px solid #e2e8f0; font-size: 13px; color: var(--color-text-muted); font-style: normal; }
/* ── 동기화 블록 끝 (sync-live) ── */


/* ── 짝 맞추기 — 마크업이 찍는데 규칙이 없던 이름 (2026-09-10 창D) ────────── */
/* 🔴 짝 맞추기(2026-09-10 창D) — 공용 module-section__title 계보 — pdf-embed 선례대로 창작하지 않는다.
   마크업이 이 이름을 찍는데 규칙이 없어 «자리»만 만든다. 생김새는 «창작하지 않는다»
   (선례 = display/pdf-embed/style.css .module-pdf-embed__title). */
/* 🔴 값 복원(2026-09-10 창D) — 창작이 아니라 복원이다.
   개명 «전»에 이 요소가 화면에서 받던 값 · 출처 = core/modules/_harvest/base.css:8317-8344 (.module-section__title 및 820/600px 변형) 선언 그대로 */
.module-key-facts__section-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.02em;
  margin: 70px 0 15px 0;
  padding-left: 15px;
  border-left: 4px solid var(--acc);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line2);
  color: var(--ink);
  text-transform: none;
  text-wrap: balance;
}
@media (max-width:820px) {
  .module-key-facts__section-title { font-size: 21px; margin: 50px 0 13px 0; padding-left: 12px; border-left-width: 3px; }
}
@media (max-width:600px) {
  .module-key-facts__section-title { font-size: 19px; margin: 40px 0 12px 0; }
}

/* 🔴 2026-09-23 사용자 지시 「테이블 자체 캡션 위치 동일하게 해야지」 — 표 모듈 .module-table__caption 과 «같은 값»(table/style.css). 값을 바꿀 때는 세 모듈을 함께. */
.module-key-facts__caption { caption-side: top; text-align: left; font-size: 16px; font-weight: 700; color: #0f172a; background: #f8fafc; padding: 10px 14px; margin-top: 24px; margin-bottom: 10px; border-radius: 4px; display: block; }

/* sites/kimchimuseum/static-root/assets/css/km-shop-site.css */
/* km-shop-site.css — 상품 쪽·목록 쪽·냉장고·가이드 쪽의 사이트 값(조 AL2 11-04: 모양 규칙은 전부 범용 모듈·프리셋으로 옮김 · 사이트 전용 클래스 0).
   조 AW 11-04: 옛 이름 규칙(목록 쪽 틀 몫)은 전부 걷음 — 쪽 번호 줄은 범용 page-number-list · 칩은 범용 filter-chips · 그 밖 옛 이름 규칙은 쓰는 마크업 0 이었음. 쪽 렌더 1,554쪽에 module- 클래스 없는 h2 가 0 이라 h2 위쪽 여백 사이트 규칙도 걷음(h2 여백은 범용 모듈·프리셋이 맡음). 지금 이 파일에 규칙은 없음 — 상품 쪽 사이트 값이 생기면 여기에 */
/* 조 AY 11-05(사용자 «할인가/판매가는 전부 빨강» · «테두리 회색 통일»): 상품 카드 최종 판매가 = 사이트 빨강 토큰(범용 모듈 변수는 건드리지 않고 판매가 글자색만) · 테두리 = 모듈 기본 회색 변수 한 값(최저가 한 장 빨강 테두리 규칙은 값에서 best 를 넘기지 않아 닿지 않음). 새 클래스 0 */
.module-product-card .module-product-card__sale { color: var(--fill-accent, #D2232A); }

/* V11(11-05 조 BO · 사용자 «스코어 박스 왼쪽 상품 이미지 라운드 없애»): 전문 평가 점수 상자(rank-panel CSS 가 km-shop.css 묶음이라 이 파일에 둠)의 그림·그림 틀 모서리 직각(부품 줄은 그대로 · 값만 덮음) */
.module-pros-cons__review-panel--compact .module-rank-panel__overall-score-pic, .module-pros-cons__review-panel--compact .module-rank-panel__overall-score-pic a, .module-pros-cons__review-panel--compact .module-rank-panel__overall-score-pic img { border-radius: 0; }

/* 조 BQ(11-05 V24): 모바일(766px 이하) 리뷰 묶음 점수 상자 상품 그림이 «반쪽»으로 잘리던 원인 = 위 1165줄 `.module-rank-panel__ranked-thumbnail-list-standout-compare … overall-score-pic>a { width:84px }` 가 그림(132px)을 가둠 → 이 상자(compact)의 그림 칸은 그림 폭 132px 그대로 · 라운드 0 유지(1623줄) · 데스크탑 변화 0(767px 이상은 원래 132px) */
.module-pros-cons__review-panel--compact .module-rank-panel__overall-score-pic a { width: 132px; max-width: 100%; overflow: visible; }

/* 조 BT B4(11-05 · 사용자 «이미지 감싸는 박스에서 이미지 하단 여백이 큰 게 있는데, 이것도 없애라고 지시했어»): 리뷰 묶음 점수 상자(그림 + 점수 타일)의 아래 안쪽 여백 18px → 0 — 그림 아래와 구분선 사이 빈 띠 0(부품 줄은 그대로 · 사이트 값만 덮음 · 새 클래스 0) */
.module-pros-cons__review-panel--compact .module-rank-panel__overall-score { padding-bottom: 0; }

/* 조 BT B13(11-05 · 사용자 «하이라이트 타이틀과 cta 버튼만 … 모바일에서는 더 길어질 것 같아서»): 휴대폰(767px 이하)에서 구매 하이라이트 단추를 글자 17px · 안 여백 12px 10px 로 줄여 360·320 에서 한 줄(부품 24px·18px 40px 는 데스크탑 그대로 · 범용 부품 파일 수정 0 · 새 클래스 0) */
@media (max-width: 767px) { .module-highlight .module-cta--xl { font-size: 17px; padding: 12px 10px; min-height: 52px; } }