/* ===========================================================
   KINOJO Ranking Character Card - 20260821 Compact Rows
   역할: 독립 스크롤 목록과 컴팩트 캐릭터 카드만 관리합니다.
=========================================================== */
.ranking-card-list{
  box-sizing:border-box;
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:8px 8px 46px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:none;
  -ms-overflow-style:none;
  scroll-behavior:smooth;
}
.ranking-card-list::-webkit-scrollbar{display:none;width:0;height:0}
.ranking-card-list:focus-visible{outline:3px solid rgba(37,99,235,.13);outline-offset:-3px}
.ranking-card{
  --card-accent:var(--ranking-pve);
  position:relative;
  flex:0 0 auto;
  box-sizing:border-box;
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(120,145,180,.22);
  border-radius:14px;
  background:linear-gradient(105deg,#fff 0%,#fff 69%,#f4f8ff 100%);
  box-shadow:0 4px 12px rgba(31,47,79,.045);
  isolation:isolate;
}
.ranking-card.pvp{
  --card-accent:var(--ranking-pvp);
  background:linear-gradient(105deg,#fff 0%,#fff 69%,#faf6ff 100%);
}
.ranking-detail-card{
  cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.ranking-detail-card:hover,.ranking-detail-card:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(56,101,176,.40);
  box-shadow:0 8px 20px rgba(31,47,79,.10);
  outline:none;
}
.ranking-detail-card:active{transform:scale(.994)}
.ranking-detail-card.is-my-character{border-color:rgba(37,99,235,.38)}
.ranking-detail-card.is-my-rank-target{
  border-color:var(--card-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--card-accent) 18%,transparent),0 10px 26px rgba(31,47,79,.14);
}
.ranking-card-main{
  box-sizing:border-box;
  display:grid;
  grid-template-columns:44px 44px minmax(0,1fr) 100px 100px;
  gap:7px;
  align-items:center;
  height:84px;
  min-height:84px;
  padding:6px 0 6px 6px;
}
.ranking-rank{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-width:0;
  border-right:1px solid rgba(120,145,180,.16);
  color:#53627a;
  text-align:center;
}
.ranking-rank-crown{height:12px;color:#d29a19;font-size:14px;line-height:1}
.ranking-rank-current{display:block;color:#314158;font-size:20px;line-height:1;font-variant-numeric:tabular-nums}
.ranking-card.top-one .ranking-rank-current{color:#c38b10}
.ranking-card.top-two .ranking-rank-current{color:#718096}
.ranking-card.top-three .ranking-rank-current{color:#a26540}
.ranking-rank-change{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:15px;
  padding:0 4px;
  border-radius:5px;
  font-size:8px;
  font-weight:1000;
  line-height:1;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.ranking-rank-change.is-up{color:#14835d;background:rgba(16,185,129,.11)}
.ranking-rank-change.is-down{color:#d23e58;background:rgba(244,63,94,.10)}
.ranking-rank-change.is-same{color:#94a3b8;background:rgba(148,163,184,.1)}
.ranking-rank-change.is-new{color:#9a6700;background:rgba(245,158,11,.13);letter-spacing:.02em}
.ranking-class-area{display:grid;place-items:center;min-width:0}
.ranking-class-emblem{
  position:relative;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  overflow:hidden;
  border:1px solid rgba(120,145,180,.22);
  border-radius:50%;
  background:linear-gradient(145deg,#fff,#edf4ff);
  box-shadow:0 3px 9px rgba(31,47,79,.08);
}
.ranking-class-emblem img{position:relative;z-index:2;width:31px;height:31px;object-fit:contain}
.ranking-class-fallback{position:absolute;z-index:1;color:var(--card-accent);font-size:16px;font-weight:1000}
.ranking-class-emblem:not(.is-fallback) .ranking-class-fallback{opacity:0}
.ranking-class-emblem.is-fallback .ranking-class-fallback{opacity:1}
.ranking-character-meta{position:relative;z-index:3;min-width:0;padding:2px 0}
.ranking-legion-line{display:flex;align-items:center;gap:5px;min-width:0;margin-bottom:5px}
.ranking-legion{
  max-width:45%;
  overflow:hidden;
  color:#2563eb;
  font-size:9px;
  font-weight:1000;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ranking-card.pvp .ranking-legion{color:#7f46c2}
.ranking-server-tag{
  flex:0 0 auto;
  color:#a16207;
  font-size:9px;
  font-weight:950;
  white-space:nowrap;
}
.ranking-actual-legion{
  min-width:0;
  overflow:hidden;
  color:#94a3b8;
  font-size:8px;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ranking-name-line{display:flex;align-items:center;gap:5px;min-width:0}
.ranking-name-line strong{
  min-width:0;
  overflow:hidden;
  color:#16243a;
  font-size:15px;
  line-height:1.15;
  letter-spacing:-.035em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ranking-owner-note,.ranking-main-badge{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  min-height:17px;
  padding:0 5px;
  border:1px solid rgba(37,99,235,.18);
  border-radius:999px;
  background:#eef4ff;
  color:#475569;
  font-size:8px;
  font-weight:900;
  white-space:nowrap;
}
.ranking-main-badge{color:#1d4ed8}
.ranking-metrics{
  display:grid;
  grid-template-rows:1fr 1fr;
  align-items:center;
  gap:3px;
  min-width:0;
  padding:2px 0;
}
.ranking-metric{
  display:grid;
  align-items:end;
  min-width:0;
  color:#475569;
  font-variant-numeric:tabular-nums;
}
.ranking-metric.power{grid-template-columns:17px minmax(0,1fr);gap:4px}
.ranking-metric.item{grid-template-columns:12px minmax(0,1fr);gap:4px;color:#b66a18}
.ranking-metric.power.pve{color:var(--ranking-pve)}
.ranking-metric.power.pvp{color:var(--ranking-pvp)}
.ranking-metric-icon{display:block;align-self:end;object-fit:contain;object-position:center}
.ranking-metric.power .ranking-metric-icon{width:17px;height:17px;margin-bottom:1px}
.ranking-metric.item .ranking-metric-icon{width:10px;height:15px;justify-self:center;margin-bottom:1px}
.ranking-metric-content{display:grid;grid-template-rows:12px auto;align-items:end;min-width:0}
.ranking-metric strong{
  min-width:0;
  overflow:hidden;
  font-size:11px;
  font-weight:1000;
  line-height:1.05;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ranking-metric-delta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  justify-self:start;
  max-width:100%;
  height:11px;
  padding:0 3px;
  overflow:hidden;
  border:1px solid transparent;
  border-radius:999px;
  font-size:6px;
  font-weight:1000;
  line-height:1;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ranking-metric-delta.is-positive{color:#166534;background:#f0fdf4;border-color:rgba(34,197,94,.22)}
.ranking-metric-delta.is-negative{color:#9f3a3a;background:#fff1f2;border-color:rgba(239,68,68,.20)}
.ranking-metric-delta.is-empty{visibility:hidden}
.ranking-portrait{
  position:relative;
  align-self:center;
  height:72px;
  min-width:0;
  overflow:hidden;
  border-radius:0 13px 0 0;
  background:linear-gradient(145deg,#eef4ff,#dfe9f8);
}
.ranking-card.pvp .ranking-portrait{background:linear-gradient(145deg,#f2eaff,#e6dcf8)}
.ranking-portrait::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:0 auto 0 0;
  width:34%;
  pointer-events:none;
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.70) 28%,transparent 100%);
}
.ranking-portrait img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 16%}
.ranking-portrait.is-empty{display:grid;place-items:center;color:var(--card-accent);font-size:28px;font-weight:1000}
.ranking-card-footer{
  position:relative;
  z-index:3;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:6px;
  height:28px;
  min-height:28px;
  padding:3px 7px;
  border-top:1px solid rgba(120,145,180,.14);
  background:rgba(248,251,255,.94);
}
.ranking-card.pvp .ranking-card-footer{background:rgba(251,248,255,.94)}
.ranking-review-badge{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  height:17px;
  padding:0 5px;
  border:1px solid transparent;
  border-radius:999px;
  font-size:8px;
  font-weight:1000;
  white-space:nowrap;
}
.ranking-review-badge.is-growth{color:#166534;background:#ecfdf3;border-color:rgba(34,197,94,.22)}
.ranking-review-badge.is-down{color:#9f3a3a;background:#fff1f2;border-color:rgba(239,68,68,.20)}
.ranking-review-badge.is-new{color:#9a6700;background:#fffbeb;border-color:rgba(245,158,11,.22)}
.ranking-review-badge.is-same{color:#334155;background:#eef2f7;border-color:rgba(100,116,139,.18)}
.ranking-card-footer p{
  min-width:0;
  margin:0;
  overflow:hidden;
  color:#64748b;
  font-size:9px;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* TOP3 flowing border: card outline only */
.ranking-card.top-one,.ranking-card.top-two,.ranking-card.top-three{--flow-radius:14px;border-color:rgba(120,145,180,.18)}
.ranking-card.top-one::after,.ranking-card.top-two::after,.ranking-card.top-three::after{
  content:"";
  position:absolute;
  z-index:6;
  inset:0;
  border-radius:var(--flow-radius);
  pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--flow-color),transparent) top left/42% 2px no-repeat,
             linear-gradient(180deg,transparent,var(--flow-color),transparent) top right/2px 42% no-repeat,
             linear-gradient(270deg,transparent,var(--flow-color),transparent) bottom right/42% 2px no-repeat,
             linear-gradient(0deg,transparent,var(--flow-color),transparent) bottom left/2px 42% no-repeat;
  opacity:var(--flow-opacity,.85);
  animation:kinojoRankingBorderFlow var(--flow-speed,3.2s) linear infinite;
}
.ranking-card.top-one{--flow-color:rgba(37,99,235,.95);--flow-opacity:.95;--flow-speed:3.6s}
.ranking-card.top-two{--flow-color:rgba(96,165,250,.86);--flow-opacity:.78;--flow-speed:3.9s}
.ranking-card.top-three{--flow-color:rgba(124,58,237,.82);--flow-opacity:.72;--flow-speed:4.2s}
@keyframes kinojoRankingBorderFlow{0%{background-position:-42% 0,100% -42%,142% 100%,0 142%}100%{background-position:142% 0,100% 142%,-42% 100%,0 -42%}}

@media (prefers-reduced-motion:reduce){
  .ranking-card-list{scroll-behavior:auto}
  .ranking-card.top-one::after,.ranking-card.top-two::after,.ranking-card.top-three::after{animation:none;background-position:0 0,100% 0,100% 100%,0 100%}
  .ranking-detail-card{transition:none}
}