/* 브랜드 순위 — 내 취향 · 대결 · 퀴즈 · 라이더 투표 · 배지 (2026-09-30). 라이트 기준, 다크는 아래 */
.rank-sort button.alt{border-style:dashed}
.rank-sort button.alt.on{border-style:solid}
.rank-list .rank-row{position:relative}
.rr-badges{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 5px}
.rr-badges em{font-style:normal;font-size:11px;font-weight:800;line-height:1;padding:4px 8px;border-radius:99px;letter-spacing:-.02em}
.rr-badges .champ{background:#f3ecd8;color:#7a5c14}
.rr-badges .gem{background:#1f1c18;color:#fff}
.rr-stars{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:12px;line-height:1}
.rr-stars .stars{position:relative;display:inline-block;color:#e2d9c6;font-size:13px;letter-spacing:1px;white-space:nowrap}
.rr-stars .stars::before{content:"★★★★★";position:absolute;left:0;top:0;width:var(--p,0%);overflow:hidden;white-space:nowrap;color:#f0a91e}
.rr-stars b{font-size:13px;font-weight:800;color:#1f1c18;font-variant-numeric:tabular-nums}
.rr-stars small{font-size:11px;color:#a0947f;font-weight:600}
.rr-stars.off .stars{color:#eee6d5}

/* 도구 줄 */
.rank-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0 12px}
.rank-tools .rt-label{font-size:12px;font-weight:700;color:#a0947f;margin-right:2px}
.rank-tools button{height:36px;padding:0 15px;border:1px solid #e0d6c5;border-radius:99px;background:#fff;color:#4a4439;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;transition:border-color .15s}
.rank-tools button:hover{border-color:#1f1c18}
.rank-tools button.on{background:#faf0d6;border-color:#c9a13b;color:#5c4510}

/* 패널 공통 */
.fun-panel{position:relative;margin:0 0 18px;padding:20px 22px 18px;border:1px solid #e6dccb;border-radius:20px;background:#fffaf1}
.fun-panel[hidden]{display:none}
.fp-head{display:flex;justify-content:space-between;gap:14px;margin-bottom:14px}
.fp-head b{display:block;font-size:18px;letter-spacing:-.03em;color:#1f1c18}
.fp-head span{display:block;margin-top:3px;font-size:12.5px;color:#8a7f6e;line-height:1.5}
.fp-close{flex:none;width:32px;height:32px;border:0;border-radius:50%;background:#f0e8d8;color:#6f6456;font-size:20px;line-height:1;cursor:pointer}
.fp-close:hover{background:#e6dcc8}
.fp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.fp-actions button,.fp-presets button{height:36px;padding:0 15px;border:1px solid #d9cdb9;border-radius:99px;background:#fff;color:#3d3a34;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.fp-actions button:hover,.fp-presets button:hover{border-color:#1f1c18}
.fp-actions button.pri{background:#1f1c18;border-color:#1f1c18;color:#fff}
.fp-note{font-size:12px;color:#a0947f}
.fp-presets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}

/* 내 취향 슬라이더 */
.fp-sliders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 26px}
.fp-sl{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center}
.fp-sn{font-size:14px;font-weight:800;color:#2a2620}
.fp-sl output{font-size:14px;font-weight:800;color:#b0671b;font-variant-numeric:tabular-nums;min-width:26px;text-align:right}
.fp-sl input[type=range]{grid-column:1/-1;width:100%;accent-color:#c9761a;height:28px;margin:0}
.fp-sl small{grid-column:1/-1;font-size:11.5px;color:#a0947f;margin-top:-4px}

/* 브랜드 대결 */
.vs-pick{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.vs-pick select{height:40px;min-width:0;flex:1 1 180px;border:1px solid #d9cdb9;border-radius:12px;background:#fff;color:#1f1c18;padding:0 10px;font:inherit;font-size:14px}
.vs-x{font-weight:900;color:#a0947f;letter-spacing:.05em}
.vs-pick button{height:40px;padding:0 16px;border:1px solid #1f1c18;border-radius:99px;background:#1f1c18;color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.vs-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:center}
.vs-radar{width:100%;height:auto;max-height:360px}
.vs-radar .rg{fill:none;stroke:#e3d9c8}.vs-radar .rs{stroke:#e3d9c8}.vs-radar .rl{font-size:12.5px;font-weight:700;fill:#5c5344}
.vs-radar .vs-a{fill:rgba(224,102,26,.22);stroke:#e0661a;stroke-width:2.4}
.vs-radar .vs-b{fill:rgba(61,123,255,.2);stroke:#3d7bff;stroke-width:2.4}
.vs-score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;text-align:center}
.vs-score b{font-size:16px;letter-spacing:-.03em;overflow-wrap:anywhere}.vs-score b.a{color:#c9561a}.vs-score b.b{color:#2c5fd6}
.vs-score strong{font-size:34px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.vs-score i{font-style:normal}
.vs-verdict{margin:6px 0 12px;text-align:center;font-size:16px;font-weight:900}.vs-verdict small{font-weight:600;color:#a0947f}
.vs-row{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;padding:7px 0;border-top:1px solid #efe6d6;font-size:13.5px}
.vs-row .vs-ax{font-weight:700;color:#5c5344;text-align:center}
.vs-v{font-variant-numeric:tabular-nums;color:#8a7f6e}.vs-v.a{text-align:right}.vs-v.b{text-align:left}
.vs-v.win{font-weight:900;color:#1f1c18;font-size:15px}
.vs-v.a.win{color:#c9561a}.vs-v.b.win{color:#2c5fd6}

/* 퀴즈 */
.qz{min-height:200px}
.qz-step{height:5px;border-radius:9px;background:#eadfca;overflow:hidden}.qz-step i{display:block;height:100%;background:#c9761a;border-radius:9px;transition:width .3s}
.qz-n{margin:10px 0 2px;font-size:12px;font-weight:800;color:#a0947f;letter-spacing:.08em}
.qz-q{margin:0 0 14px;font-size:19px;letter-spacing:-.03em;line-height:1.4}
.qz-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.qz-opts button{padding:14px 16px;border:1px solid #d9cdb9;border-radius:14px;background:#fff;color:#2a2620;font:inherit;font-size:14.5px;font-weight:700;text-align:left;cursor:pointer;line-height:1.4;transition:border-color .15s,transform .15s}
.qz-opts button:hover{border-color:#1f1c18;transform:translateY(-1px)}
.qz-type{margin:4px 0 2px;font-size:26px;letter-spacing:-.04em}
.qz-desc{margin:0 0 14px;color:#6f6456;font-size:14px}
.qz-bars{display:grid;gap:6px;margin-bottom:14px}
.qz-bar{display:grid;grid-template-columns:110px 1fr 32px;gap:10px;align-items:center;font-size:12.5px}
.qz-bar span{font-weight:700;color:#5c5344}.qz-bar i{height:8px;border-radius:9px;background:#efe6d6;overflow:hidden}.qz-bar s{display:block;height:100%;background:#c9761a;border-radius:9px}.qz-bar b{text-align:right;font-variant-numeric:tabular-nums;color:#8a7f6e}
.qz-h{margin:0 0 8px;font-size:14px}
.qz-top{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.qz-top button{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;width:100%;padding:11px 14px;border:1px solid #e0d6c5;border-radius:14px;background:#fff;font:inherit;text-align:left;cursor:pointer}
.qz-top button:hover{border-color:#1f1c18}
.qz-top em{font-style:normal;font-weight:900;font-size:18px;color:#c9761a}.qz-top strong{font-size:15px}.qz-top span{font-size:12px;color:#8a7f6e}

/* 라이더 투표(브랜드 상세 창) */
.vote-box{margin:0 0 6px;padding:16px 18px;border:1px solid #e6dccb;border-radius:16px;background:#fffaf1}
.vt-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.vt-stars{display:flex;gap:2px}
.vt-star{width:38px;height:38px;border:0;background:none;font-size:30px;line-height:1;color:#d8ccb4;cursor:pointer;padding:0;transition:transform .12s,color .12s}
.vt-star.on,.vt-star.hov{color:#f0a91e}.vt-star:hover{transform:scale(1.15)}
.vt-msg{flex:1 1 220px;font-size:12.5px;color:#8a7f6e;line-height:1.55}.vt-msg a{color:#b0671b;font-weight:800;text-decoration:underline}
.vt-del{border:0;background:none;padding:0;color:#b0671b;font:inherit;font-weight:800;text-decoration:underline;cursor:pointer}
.vt-sum{display:flex;align-items:baseline;gap:10px;margin-top:10px;font-size:13px;color:#6f6456}.vt-avg{font-size:26px;letter-spacing:-.03em;color:#1f1c18}
.vt-cmp{margin:6px 0 0;font-size:13px;color:#5c5344}.vt-cmp b{color:#1f1c18}
.vt-dist{display:grid;gap:4px;margin-top:10px;max-width:420px}
.vt-dist div{display:grid;grid-template-columns:34px 1fr 30px;gap:8px;align-items:center;font-size:12px;color:#8a7f6e}
.vt-dist i{height:7px;border-radius:9px;background:#efe6d6;overflow:hidden}.vt-dist s{display:block;height:100%;background:#f0a91e;border-radius:9px}.vt-dist b{text-align:right;font-weight:700}
.vt-err{margin:8px 0 0;font-size:12.5px;font-weight:700;color:#c0392b}.vt-err[hidden]{display:none}

@media (max-width:760px){
  .fp-sliders{grid-template-columns:1fr}.vs-body{grid-template-columns:1fr}.qz-opts{grid-template-columns:1fr}
  .fun-panel{padding:16px 14px 14px;border-radius:16px}.qz-bar{grid-template-columns:96px 1fr 28px}
  .rank-tools .rt-label{flex:1 0 100%}
}

/* 다크 */
:root[data-theme="dark"] .rank-tools button,:root[data-theme="dark"] .fp-actions button,:root[data-theme="dark"] .fp-presets button,:root[data-theme="dark"] .qz-opts button,:root[data-theme="dark"] .qz-top button,:root[data-theme="dark"] .vs-pick select{background:#1f2620;border-color:#333b32;color:#e6dfd3}
:root[data-theme="dark"] .rank-tools button.on{background:#3a3222;border-color:#c9a13b;color:#f0d78a}
:root[data-theme="dark"] .fun-panel,:root[data-theme="dark"] .vote-box{background:#1a201b;border-color:#2c332c}
:root[data-theme="dark"] .fp-head b,:root[data-theme="dark"] .fp-sn,:root[data-theme="dark"] .qz-q,:root[data-theme="dark"] .qz-type,:root[data-theme="dark"] .vt-avg,:root[data-theme="dark"] .vt-cmp b,:root[data-theme="dark"] .vs-score strong,:root[data-theme="dark"] .vs-verdict{color:#f1ebdf}
:root[data-theme="dark"] .fp-head span,:root[data-theme="dark"] .fp-note,:root[data-theme="dark"] .fp-sl small,:root[data-theme="dark"] .qz-desc,:root[data-theme="dark"] .vt-msg,:root[data-theme="dark"] .vt-sum,:root[data-theme="dark"] .vt-cmp{color:#b3ab9a}
:root[data-theme="dark"] .fp-close{background:#2a312b;color:#d6cebe}
:root[data-theme="dark"] .fp-actions button.pri{background:#e9ede7;border-color:#e9ede7;color:#12160f}
:root[data-theme="dark"] .vs-pick button{background:#e9ede7;border-color:#e9ede7;color:#12160f}
:root[data-theme="dark"] .vs-radar .rg,:root[data-theme="dark"] .vs-radar .rs{stroke:#3a443a}:root[data-theme="dark"] .vs-radar .rl{fill:#d6cebe}
:root[data-theme="dark"] .vs-row{border-color:#2c332c}:root[data-theme="dark"] .vs-row .vs-ax{color:#d6cebe}:root[data-theme="dark"] .vs-v{color:#a99f8d}:root[data-theme="dark"] .vs-v.win{color:#f1ebdf}
:root[data-theme="dark"] .vs-v.a.win,:root[data-theme="dark"] .vs-score b.a{color:#ff9a5c}:root[data-theme="dark"] .vs-v.b.win,:root[data-theme="dark"] .vs-score b.b{color:#7fa8ff}
:root[data-theme="dark"] .qz-step,:root[data-theme="dark"] .qz-bar i,:root[data-theme="dark"] .vt-dist i{background:#2a312b}
:root[data-theme="dark"] .qz-bar span{color:#d6cebe}
:root[data-theme="dark"] .rr-badges .champ{background:#3a3222;color:#f0d78a}:root[data-theme="dark"] .rr-badges .gem{background:#e9ede7;color:#12160f}
:root[data-theme="dark"] .rr-stars .stars{color:#3a423a}:root[data-theme="dark"] .rr-stars.off .stars{color:#2f372f}:root[data-theme="dark"] .rr-stars b{color:#f1ebdf}:root[data-theme="dark"] .rr-stars small{color:#9a9184}
:root[data-theme="dark"] .vt-star{color:#4a5147}:root[data-theme="dark"] .vt-star.on,:root[data-theme="dark"] .vt-star.hov{color:#f0a91e}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .rank-tools button,:root:not([data-theme="light"]) .fp-actions button,:root:not([data-theme="light"]) .fp-presets button,:root:not([data-theme="light"]) .qz-opts button,:root:not([data-theme="light"]) .qz-top button,:root:not([data-theme="light"]) .vs-pick select{background:#1f2620;border-color:#333b32;color:#e6dfd3}
:root:not([data-theme="light"]) .fun-panel,:root:not([data-theme="light"]) .vote-box{background:#1a201b;border-color:#2c332c}
:root:not([data-theme="light"]) .fp-head b,:root:not([data-theme="light"]) .fp-sn,:root:not([data-theme="light"]) .qz-q,:root:not([data-theme="light"]) .qz-type,:root:not([data-theme="light"]) .vt-avg,:root:not([data-theme="light"]) .vs-score strong{color:#f1ebdf}
:root:not([data-theme="light"]) .vs-radar .rl{fill:#d6cebe}
:root:not([data-theme="light"]) .rr-badges .gem{background:#e9ede7;color:#12160f}
}

/* 라이더 평가 말풍선 */
.rank-bubble{position:absolute;z-index:3;left:0;top:0;padding:9px 14px;border-radius:14px;background:#1f1c18;color:#fff;font-size:13px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;pointer-events:none;box-shadow:0 6px 18px rgba(31,28,24,.22)}
.rank-bubble[hidden]{display:none}
.rank-bubble i{position:absolute;left:var(--tail,50%);top:100%;width:12px;height:12px;margin:-6px 0 0 -6px;background:#1f1c18;transform:rotate(45deg);border-radius:0 0 3px 0}
:root[data-theme="dark"] .rank-bubble{background:#f0c35a;color:#1f1c18}:root[data-theme="dark"] .rank-bubble i{background:#f0c35a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rank-bubble{background:#f0c35a;color:#1f1c18}:root:not([data-theme="light"]) .rank-bubble i{background:#f0c35a}}