/* Adapted from the user's components-dz.css dialog and tabs-demo--pills. */
.rank-dialog { width:min(460px,calc(100% - 24px)); max-height:calc(100dvh - 32px); margin:auto; padding:22px; border:1px solid #e5e5e5; border-radius:12px; background:#fff; color:#171717; box-shadow:0 20px 60px rgba(0,0,0,.2); overflow:auto; font-family:Pretendard,Arial,sans-serif; letter-spacing:0; }
.rank-dialog::backdrop { background:rgba(0,0,0,.35); }
.rank-dialog[open] { display:flex; flex-direction:column; height:min(740px,calc(100dvh - 32px)); overflow:hidden; }
.rank-dialog > * { flex-shrink:0; }
#rankPanel { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.rank-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; }
.rank-heading h2 { margin:0; font-size:17px; line-height:24px; font-weight:650; }
.rank-heading p { margin:6px 0 0; color:#6b6b6b; font-size:12px; line-height:20px; }
.rank-heading button { flex:0 0 36px; width:36px; height:36px; border-radius:6px; background:transparent; color:#666; font-size:20px; }
.rank-heading button:hover { background:#f4f4f5; }
.rank-tabs { display:flex; padding:4px; gap:3px; border-radius:8px; background:#f4f4f5; }
.rank-tabs button { flex:1; min-height:38px; padding:6px 12px; border-radius:6px; background:transparent; color:#6b6b6b; font-size:13px; }
.rank-tabs button[aria-selected="true"] { background:#fff; color:#111; font-weight:650; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.rank-dialog button:focus-visible { outline:2px solid #2563eb; outline-offset:2px; }
.rank-list { list-style:none; padding:0; margin:12px 0 0; }
.rank-list li + li { border-top:1px solid #f0f0f0; }
.rank-row { display:flex; align-items:center; gap:12px; width:100%; min-height:59px; padding:10px 4px; text-align:left; background:transparent; color:#171717; }
.rank-row:hover { background:#fafafa; }
.rank-number { flex:0 0 26px; text-align:center; color:#737373; font-size:15px; font-weight:650; font-variant-numeric:tabular-nums; }
.rank-list li:nth-child(-n+3) .rank-number { color:#2563eb; }
.rank-place { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.rank-place strong { font-size:13px; line-height:19px; font-weight:600; overflow-wrap:anywhere; }
.rank-place small { font-size:11px; line-height:16px; color:#737373; overflow-wrap:anywhere; }
.rank-count { flex:0 0 auto; font-size:11px; color:#737373; font-variant-numeric:tabular-nums; }
.rank-status { margin:24px 0; text-align:center; color:#737373; font-size:13px; line-height:22px; }
.rank-status:empty { display:none; }
.rank-footer { border-top:1px solid #e5e5e5; margin-top:12px; padding-top:14px; color:#737373; font-size:11px; line-height:18px; }
.rank-retry { display:block; margin:12px auto; padding:10px 16px; border-radius:6px; background:#f4f4f5; color:#171717; }
.rank-retry[hidden] { display:none; }
@media (max-width:480px) { .rank-dialog { padding:18px; } .rank-row { gap:8px; } }