/* 클래식 리스트 — 정사각 사진 + 비교 버튼 + 성분 오버플로우. system.css/cards.css 아톰 재사용 */
.stage{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:#E7E7EC; padding:28px 16px; }
.phone{ width:414px; background:var(--surface); border:1px solid var(--line2); border-radius:40px; overflow:hidden;
  box-shadow:0 30px 70px -26px rgba(20,20,26,.42), 0 3px 10px rgba(20,20,26,.06); }

/* 정렬 바 */
.csort{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); }
.csort .lb{ font-size:12.5px; font-weight:800; color:var(--ink2); flex:none; }
.csort .scroll{ display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; }
.csort .scroll::-webkit-scrollbar{ display:none; }
.csort .chip{ flex:none; height:32px; padding:0 13px; border-radius:999px; border:1.5px solid var(--line2); background:var(--surface);
  font-size:12.5px; font-weight:700; color:var(--ink2); display:inline-flex; align-items:center; gap:5px; cursor:pointer; white-space:nowrap; }
.csort .chip.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.csort .chip .ar{ font-size:11px; opacity:.85; font-weight:800; }

.lhd{ display:flex; align-items:baseline; justify-content:space-between; padding:13px 16px 8px; }
.lhd .n{ font-size:13.5px; font-weight:800; } .lhd .n b{ color:var(--accent-ink); }
.lhd .n small{ font-size:12px; font-weight:600; color:var(--ink4); margin-left:5px; }
.lhd .hint{ font-size:11px; color:var(--ink4); font-weight:700; }

/* 카드 — 정사각 사진(중앙) · 본문 · 지표 */
.clcard{ display:grid; grid-template-columns:76px 1fr auto; gap:14px; align-items:center; padding:15px 16px; border-bottom:1px solid var(--hair); }
.clcard image-slot{ width:76px; height:76px; }
.cl-body{ min-width:0; display:flex; flex-direction:column; gap:8px; }
.cl-igline{ display:flex; flex-wrap:wrap; align-items:baseline; row-gap:3px; }
.cl-igline .ig{ font-size:12px; color:var(--ink2); font-weight:600; white-space:nowrap; }
.cl-igline .ig .in{ color:var(--ink3); } .cl-igline .ig.f .in{ color:var(--ink2); }
.cl-igline .ig b{ font-weight:800; color:var(--ink); margin-left:3px; }
.cl-igline .ig .iu{ font-size:10px; color:var(--ink4); margin-left:1px; }
.cl-igline .sep{ color:var(--line2); margin:0 7px; font-weight:700; }
.cl-igline .more{ font-size:11px; font-weight:700; color:var(--accent-ink); background:var(--accent-weak); border-radius:6px; padding:2px 8px; margin-left:7px; }
.cl-effs{ display:flex; flex-wrap:wrap; gap:4px; }
.cl-effs .ef{ font-size:11px; font-weight:600; color:var(--ink3); background:var(--raise); border-radius:6px; padding:3px 8px; }
.cl-effs .ef.hot{ color:var(--accent-ink); background:var(--accent-weak); font-weight:700; }

/* 지표 존 */
.cl-metric{ display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:5px; min-width:100px;
  padding-left:13px; border-left:1px solid var(--hair); align-self:stretch; }
.cl-metric .mtop{ display:flex; align-items:center; gap:6px; }
.cl-metric .mlab{ font-size:10px; font-weight:800; color:var(--accent); letter-spacing:.01em; }
.cl-metric .mrank{ font-size:10px; font-weight:800; padding:2px 6px; border-radius:6px; background:var(--accent); color:#fff; }
.cl-metric .mrank.lo{ background:var(--surface); color:var(--ink3); border:1px solid var(--line2); }
.cl-metric .mval{ font-size:19px; font-weight:800; color:var(--accent-ink); letter-spacing:-.03em; white-space:nowrap; line-height:1.05; }
.cl-metric .mval .mu{ font-size:11px; font-weight:700; color:var(--accent); margin-left:1px; }
.cl-metric .mbar{ width:100%; height:5px; background:#fff; border:1px solid var(--accent-line); border-radius:3px; overflow:hidden; }
.cl-metric .mbar i{ display:block; height:100%; background:linear-gradient(90deg,var(--accent-line),var(--accent)); border-radius:3px; }
.cl-metric .msec{ font-size:11px; font-weight:700; color:var(--ink3); }
.cmp{ margin-top:3px; height:30px; padding:0 13px; border-radius:9px; border:1.5px solid var(--line2); background:#fff;
  font-size:12px; font-weight:800; color:var(--ink2); display:inline-flex; align-items:center; gap:5px; cursor:pointer; transition:.12s; }
.cmp:hover{ border-color:var(--accent-line); color:var(--accent-ink); }
.cmp.on{ background:var(--accent); border-color:var(--accent); color:#fff; }