/* ==========================================================
   pages/changes.css — 가격 변동 전용
   ========================================================== */

.cg-up { color: var(--exp); width: 12px !important; height: 12px !important; }
.cg-down { color: var(--aff); width: 12px !important; height: 12px !important; }
#cgKpis .kpi { background: #fff; border: 1px solid var(--line); }
#cgKpis .kpi:nth-child(1) .kpi-k .ico { width: 11px; height: 11px; color: var(--exp); }
#cgKpis .kpi:nth-child(2) .kpi-k .ico { width: 11px; height: 11px; color: var(--aff); }
#cgKpis .kpi-v .chg { font-size: 21px; }
#cgKpis .kpi-v .chg .ico { width: 13px; height: 13px; }
#cgKpis .kpi-v a:hover { text-decoration: underline; }

.cg-list { display: grid; gap: 2px; }
.cg-row {
  display: grid; grid-template-columns: 18px 34px minmax(0, 1fr) minmax(40px, 90px) 60px;
  align-items: center; gap: 10px; min-height: 56px; padding: 6px 8px; border-radius: 12px; transition: background .12s;
}
.cg-row:hover { background: var(--surface-2); }
.cg-rank { font-size: 13.5px; font-weight: 800; color: var(--ink-4); text-align: center; }
.cg-name { display: grid; min-width: 0; line-height: 1.35; }
.cg-name b { font-size: 15px; font-weight: 800; }
.cg-name span { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-bar { height: 8px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.cg-bar i { display: block; height: 100%; border-radius: 0 4px 4px 0; transform-origin: left; animation: grow-x .6s var(--ease) both; }
.cg-bar i.up { background: var(--exp); }
.cg-bar i.down { background: var(--aff); }
.cg-val { text-align: right; }
.cg-val .chg { font-size: 14px; }
.cg-empty { padding: 28px 8px; text-align: center; font-size: 14px; color: var(--ink-3); }
.cg-regions { padding: 16px 10px; }
.cg-regions .card-head { padding: 0 8px; }

@media (max-width: 420px) {
  .cg-row { grid-template-columns: 16px 34px minmax(0, 1fr) 58px; }
  .cg-bar { display: none; }
}