/* 레이팅 화면은 기존 공통 머리글과 독립된 카드 목록을 사용합니다. */
.rating-shell { max-width:1280px; margin:0 auto; padding:0 28px 28px; }
.rating-preview-note { margin:18px 0 0; color:#cbbb98; font-size:12px; }
.rating-loading { min-height:260px; display:grid; place-items:center; color:var(--muted); }
.rating-overview { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:32px; padding:28px 0 30px; border-bottom:1px solid var(--line); }
.rating-identity { min-width:0; }
.rating-identity h1 { margin:0; font-size:28px; font-weight:650; letter-spacing:-.7px; }
.rating-nickname { margin:0 0 8px; font-size:28px; font-weight:600; line-height:1.4; color:var(--text); overflow-wrap:anywhere; unicode-bidi:plaintext; }
.rating-identity:has(.rating-nickname:not([hidden])) h1 { font-size:18px; font-weight:500; color:var(--muted); }
.rating-total > span { display:block; margin-bottom:5px; color:var(--muted); font-size:13px; }
.rating-total .rating-number { --rating-unit:2.5px; }
#rating-value { line-height:1; }
.rating-averages { display:grid; margin:0; padding-left:28px; border-left:1px solid var(--line); gap:14px; }
.rating-averages > div { display:grid; grid-template-columns:auto 100px; align-items:baseline; gap:24px; }
.rating-averages dt { color:var(--muted); font-size:13px; text-align:right; white-space:nowrap; }
.rating-averages dd { margin:0; font-size:25px; font-weight:650; text-align:right; font-variant-numeric:tabular-nums; }
.rating-dot { display:inline-block; width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.best-dot { background:#c4a2ee; }
.new-dot { background:#85cbbd; }
.rating-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:23px 0 27px; }
.rating-filters { display:flex; gap:5px; }
.rating-filters button { background:transparent; color:var(--muted); border-radius:3px; padding:9px 14px; min-height:40px; font-size:14px; }
.rating-filters button[aria-pressed="true"] { background:#303236; color:var(--text); }
.rating-filters button:hover { color:var(--text); }
.rating-section { margin:0 0 38px; }
.rating-section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:13px; }
.rating-section-heading h2 { display:flex; gap:10px; align-items:center; margin:0; font-size:19px; font-weight:650; letter-spacing:-.3px; }
.rating-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0; padding:0; list-style:none; }
.rating-card { --difficulty-color:var(--master); display:grid; grid-template-columns:20px 60px minmax(0,1fr) 51px; gap:10px; align-items:center; width:100%; min-height:100px; padding:13px 12px 13px 10px; border-radius:3px; background:#212225; text-align:left; color:var(--text); }
.rating-card:hover { background:#292a2f; }
.rating-card.is-ultima { --difficulty-color:var(--ultima); }
.rating-card.is-expert { --difficulty-color:#ef9ca5; }
.rating-position { align-self:start; padding-top:2px; font-size:11px; color:#92949c; text-align:center; font-variant-numeric:tabular-nums; }
.rating-position.is-top { color:#dfc48e; }
.rating-jacket { width:60px; height:60px; display:block; object-fit:cover; border-bottom:3px solid var(--difficulty-color); background:#2b2d32; }
.rating-card-copy { min-width:0; }
.rating-card-title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:13px; font-weight:550; line-height:1.35; overflow-wrap:anywhere; }
.rating-chart-info { display:block; margin-top:5px; font-size:10px; color:var(--difficulty-color); letter-spacing:.3px; }
.rating-score-line { display:flex; align-items:center; gap:5px; margin-top:3px; }
.rating-score { font-size:12px; color:#c9cad0; font-variant-numeric:tabular-nums; }
.rating-card .clear-mark { font-size:9px; padding:0 3px; line-height:14px; }
.rating-chart-value { align-self:center; text-align:right; }
.rating-chart-value strong { display:block; font-size:19px; line-height:1.2; font-weight:650; font-variant-numeric:tabular-nums; letter-spacing:-.5px; }
.rating-chart-value small { display:block; color:#8f929b; font-size:10px; font-weight:400; margin-top:5px; }
.rating-footer { border-top:1px solid var(--line); padding-top:20px; color:var(--muted); font-size:12px; line-height:1.7; }
.rating-detail { width:min(460px,calc(100% - 32px)); max-height:calc(100vh - 48px); border:1px solid var(--line); border-radius:7px; padding:28px; background:var(--bg); color:var(--text); }
.rating-detail::backdrop { background:#0009; }
.rating-close { position:absolute; right:12px; top:10px; background:transparent; color:var(--muted); font-size:26px; width:40px; height:40px; }
.rating-detail-head { display:flex; align-items:center; gap:16px; padding-right:20px; }
.rating-detail-head img { width:76px; height:76px; object-fit:cover; }
.rating-detail-head h2 { font-size:19px; margin:6px 0 0; line-height:1.5; overflow-wrap:anywhere; }
.rating-detail-head p { margin:0; font-size:12px; color:var(--muted); }
.rating-detail-stats { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:26px 0 22px; padding:20px 0; border-block:1px solid var(--line); }
.rating-detail-stats dt { color:var(--muted); font-size:12px; }
.rating-detail-stats dd { margin:7px 0 0; font-size:24px; font-weight:600; font-variant-numeric:tabular-nums; }
.rating-detail-note { color:var(--muted); font-size:12px; margin:0; }
.rating-png-open { overflow:hidden; }
.rating-png-dialog { box-sizing:border-box; margin:auto; padding:0; width:min(720px,calc(100vw - 24px)); height:fit-content; max-width:none; max-height:min(880px,calc(100dvh - 32px)); overflow:hidden; background:#191b20; color:var(--text); border:1px solid var(--line); border-radius:6px; }
.rating-png-dialog[open] { display:flex; flex-direction:column; }
.rating-png-dialog::backdrop { background:#000b; }
.rating-png-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 14px; flex-shrink:0; }
.rating-png-heading h2 { margin:0; font-size:16px; font-weight:600; }
.rating-png-heading button { width:36px; height:36px; padding:0; background:transparent; color:var(--muted); font-size:25px; }
#rating-png-image { display:block; flex:none; margin:0 auto; max-width:100%; }
#rating-png-image[hidden],#rating-png-status[hidden] { display:none; }
#rating-png-status { min-height:140px; margin:0; display:grid; place-items:center; color:var(--muted); font-size:14px; }
.rating-png-actions { flex-shrink:0; padding:12px 14px 14px; }
#rating-png-save { display:flex; align-items:center; justify-content:center; width:100%; min-height:44px; padding:8px 12px; border:1px solid #41444c; border-radius:4px; background:#25272d; color:#ececf0; text-decoration:none; font-size:14px; }
#rating-png-save[aria-disabled="true"] { opacity:.5; cursor:default; }
@media(max-width:1100px) {
  .rating-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rating-card { grid-template-columns:22px 64px minmax(0,1fr) 58px; gap:12px; }
  .rating-jacket { width:64px; height:64px; }
}
@media(max-width:900px) {
  .rating-overview { grid-template-columns:minmax(0,1fr) auto; gap:24px; }
  .rating-identity { grid-column:1 / -1; }
}
@media(max-width:700px) {
  .rating-header { display:flex; flex-wrap:wrap; gap:8px 20px; padding-block:14px 7px; }
  .rating-header .brand { order:0; }
  .rating-header .edition { display:block; order:1; margin-left:auto; }
  .rating-header nav { order:2; flex-basis:100%; width:100%; gap:24px; overflow-x:auto; }
  .rating-overview { gap:22px; }
  .rating-total .rating-number { --rating-unit:2px; }
  .rating-averages { padding-left:20px; gap:12px; }
  .rating-averages > div { grid-template-columns:auto 88px; gap:16px; }
  .rating-averages dd { font-size:23px; }
  .rating-cards { grid-template-columns:minmax(0,1fr); }
  .rating-card { min-height:96px; grid-template-columns:24px 64px minmax(0,1fr) 64px; padding-inline:12px 18px; gap:13px; }
  .rating-card-title { font-size:14px; }
  .rating-chart-value strong { font-size:22px; }
}
@media(max-width:480px) {
  .rating-shell { padding-inline:16px; }
  .rating-header { padding-inline:16px; }
  .rating-preview-note { font-size:11px; }
  .rating-overview { column-gap:14px; padding-block:24px; }
  .rating-nickname { font-size:24px; }
  .rating-total .rating-number { --rating-unit:1.5px; }
  .rating-averages { border:0; padding:0; gap:10px; }
  .rating-averages > div { grid-template-columns:auto 73px; gap:10px; }
  .rating-averages dt { font-size:11px; }
  .rating-averages dd { font-size:20px; }
  .rating-toolbar { flex-wrap:wrap; gap:10px; padding-block:18px 23px; }
  .rating-filters button { font-size:13px; padding-inline:10px; }
  .rating-card { grid-template-columns:18px 56px minmax(0,1fr) 54px; gap:9px; padding:12px 10px 12px 8px; }
  .rating-jacket { width:56px; height:56px; }
  .rating-card-title { font-size:13px; }
  .rating-chart-value strong { font-size:20px; }
  .rating-score { font-size:11px; }
  .rating-detail { padding:24px 20px; }
}
@media(max-width:360px) {
  .rating-total .rating-number { --rating-unit:1.2px; }
  .rating-averages > div { grid-template-columns:auto 65px; gap:8px; }
  .rating-averages dd { font-size:18px; }
}

#rating-view {padding-inline:0}
.rating-sheet .sheet-header time {margin-left:auto}
.rating-card.is-basic,.score-card.is-basic {--difficulty-color:#66bc83}
.rating-card.is-advanced,.score-card.is-advanced {--difficulty-color:#ecb860}