/* 제품 리스트 카드 10안 — 공유 아톰 + 10개 레이아웃. system.css 토큰 재사용 */

/* ── 캔버스 가구 ── */
.cardcap{ position:absolute; width:412px; }
.cardcap .k{ font-size:11px; font-weight:800; letter-spacing:.1em; color:var(--accent); margin:0 0 5px; }
.cardcap .t{ font-size:16px; font-weight:800; letter-spacing:-.02em; margin:0 0 5px; }
.cardcap .d{ font-size:12px; color:var(--ink3); line-height:1.5; margin:0; }
.optframe{ position:absolute; width:412px; background:var(--surface); border:1px solid var(--line2);
  border-radius:22px; box-shadow:var(--shadow); overflow:hidden; }
.opt-ctx{ display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--hair); background:var(--bg); }
.opt-ctx .sb{ font-size:11px; font-weight:800; color:var(--ink3); }
.opt-ctx .sc{ display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 11px; border-radius:999px; background:var(--accent); color:#fff; font-size:11.5px; font-weight:800; }
.opt-ctx .sp{ flex:1; }
.opt-ctx .cnt{ font-size:11px; color:var(--ink4); font-weight:700; }

/* ── 공유 아톰 ── */
image-slot{ background:var(--raise2); }
.br{ font-size:11.5px; color:var(--ink3); font-weight:600; }
.nm{ font-size:15.5px; font-weight:700; letter-spacing:-.02em; line-height:1.28; color:var(--ink); }
.igline{ display:flex; flex-wrap:wrap; align-items:baseline; }
.igline .ig{ font-size:12px; color:var(--ink2); font-weight:600; white-space:nowrap; }
.igline .ig .in{ color:var(--ink3); }
.igline .ig b{ font-weight:800; color:var(--ink); margin-left:3px; }
.igline .ig .iu{ font-size:10px; color:var(--ink4); margin-left:1px; }
.igline .sep{ color:var(--line2); margin:0 7px; font-weight:700; }
.igrows{ display:flex; flex-direction:column; gap:2px; }
.igrows .ig{ display:grid; grid-template-columns:1fr auto 26px; gap:7px; align-items:baseline; padding:2px 0; border-top:1px dashed var(--line); }
.igrows .ig:first-child{ border-top:none; }
.igrows .ig .in{ font-size:12px; color:var(--ink2); font-weight:600; }
.igrows .ig .in.f::before{ content:"●"; color:var(--accent); font-size:7px; vertical-align:middle; margin-right:5px; }
.igrows .ig .a{ font-size:13px; font-weight:800; text-align:right; }
.igrows .ig .iu{ font-size:10px; color:var(--ink4); font-weight:600; }
.effrow{ display:flex; flex-wrap:wrap; gap:4px; }
.ef{ font-size:11px; font-weight:600; color:var(--ink3); background:var(--raise); border-radius:6px; padding:3px 8px; }
.ef.hot{ color:var(--accent-ink); background:var(--accent-weak); font-weight:700; }
.price{ font-size:11.5px; font-weight:700; color:var(--ink3); white-space:nowrap; }
.price b{ color:var(--ink); font-weight:800; }
.price .tot{ color:var(--ink2); }
.addb{ height:28px; padding:0 11px; border-radius:8px; border:1px solid var(--line2); background:#fff;
  font-size:11.5px; font-weight:800; color:var(--ink2); display:inline-flex; align-items:center; gap:3px; cursor:pointer; }
.addb:hover{ border-color:var(--accent-line); color:var(--accent-ink); }

/* 정렬 지표 아톰 (주입값 강조) */
.mlab{ font-size:10px; font-weight:800; color:var(--accent); letter-spacing:.01em; line-height:1.2; }
.mval{ font-size:19px; font-weight:800; color:var(--accent-ink); letter-spacing:-.03em; white-space:nowrap; line-height:1.05; }
.mval .mu{ font-size:11px; font-weight:700; color:var(--accent); margin-left:1px; }
.mbar{ height:5px; background:#fff; border:1px solid var(--accent-line); border-radius:3px; overflow:hidden; }
.mbar i{ display:block; height:100%; background:linear-gradient(90deg,var(--accent-line),var(--accent)); border-radius:3px; }
.mrank{ font-size:10px; font-weight:800; padding:2px 7px; border-radius:6px; background:var(--accent); color:#fff; white-space:nowrap; }
.mrank.lo{ background:var(--surface); color:var(--ink3); border:1px solid var(--line2); }

.card + .card{ border-top:1px solid var(--hair); }

/* ════ V1 클래식: 사진 좌(풀하이트) · 지표 우 ════ */
.v1{ display:grid; grid-template-columns:66px 1fr 118px; align-items:stretch; padding:14px; gap:13px; }
.v1 .body{ min-width:0; display:flex; flex-direction:column; gap:8px; justify-content:center; }
.v1 .metric{ display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:6px; text-align:right; padding-left:12px; border-left:1px solid var(--hair); }
.v1 .metric .mbar{ width:100%; }
.v1 .metric .price{ display:flex; flex-direction:column; gap:1px; }

/* ════ V2 사진 풀하이트 좌 + 하단 지표 바 ════ */
.v2{ display:grid; grid-template-columns:92px 1fr; }
.v2 .body{ padding:14px 14px 0; display:flex; flex-direction:column; gap:8px; }
.v2 .barrow{ grid-column:1 / -1; display:flex; align-items:center; gap:12px; padding:11px 14px; margin-top:12px; background:linear-gradient(180deg,#FBFAFF,#F6F4FE); border-top:1px solid var(--accent-line); }
.v2 .barrow .mblock{ display:flex; align-items:baseline; gap:7px; }
.v2 .barrow .price{ display:flex; gap:8px; }
.v2 .barrow .addb{ margin-left:auto; }

/* ════ V3 매거진: 상단(사진+이름+지표) / 하단(스펙) ════ */
.v3{ padding:14px; }
.v3 .top{ display:flex; align-items:center; gap:12px; }
.v3 .top .ti{ flex:1; min-width:0; }
.v3 .top .metric{ text-align:right; }
.v3 .top .metric .mval{ font-size:21px; }
.v3 .mid{ display:flex; align-items:center; gap:8px; margin:11px 0; }
.v3 .mid .mbar{ flex:1; } .v3 .mid .mrank{ flex:none; }
.v3 .bot{ display:flex; flex-direction:column; gap:9px; padding-top:11px; border-top:1px solid var(--hair); }

/* ════ V4 히어로 사진 패널 + 랭크 오버레이 ════ */
.v4{ display:grid; grid-template-columns:104px 1fr; align-items:stretch; }
.v4 .photo{ position:relative; }
.v4 .photo .rk{ position:absolute; top:8px; left:8px; z-index:2; width:24px; height:24px; border-radius:8px; background:var(--accent); color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.25); }
.v4 .body{ padding:13px 14px; display:flex; flex-direction:column; gap:8px; }
.v4 .body .foot{ display:flex; align-items:center; gap:8px; margin-top:2px; }
.v4 .body .foot .metric{ display:flex; align-items:baseline; gap:6px; background:var(--accent-weak); border:1px solid var(--accent-line); border-radius:9px; padding:6px 10px; }
.v4 .body .foot .price{ margin-left:auto; text-align:right; }

/* ════ V5 인셋 사진 + 데이터 덴스 ════ */
.v5{ padding:14px; position:relative; }
.v5 .head{ display:flex; gap:12px; }
.v5 .head .ti{ flex:1; min-width:0; }
.v5 .head .metric{ text-align:right; flex:none; }
.v5 .head .metric .mval{ font-size:18px; }
.v5 .head .metric .mbar{ width:84px; margin:5px 0 0 auto; }
.v5 .dense{ margin-top:11px; display:flex; flex-direction:column; gap:8px; }

/* ════ V6 랭크 레일 + 사진 + 지표 ════ */
.v6{ display:grid; grid-template-columns:34px 60px 1fr 104px; align-items:stretch; }
.v6 .rail{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; background:var(--raise); }
.v6 .rail.top{ background:var(--accent-weak); }
.v6 .rail .rk{ font-size:18px; font-weight:800; color:var(--ink3); } .v6 .rail.top .rk{ color:var(--accent-ink); }
.v6 .rail .g{ font-size:11px; color:var(--ink4); font-family:serif; }
.v6 .body{ padding:13px 13px; display:flex; flex-direction:column; gap:7px; justify-content:center; min-width:0; }
.v6 .metric{ display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:5px; text-align:right; padding:0 13px; border-left:1px solid var(--hair); background:linear-gradient(180deg,#FBFAFF,#F7F5FE); }
.v6 .metric .mbar{ width:100%; }

/* ════ V7 지표 상단우 + 사진 하단좌 ════ */
.v7{ padding:14px; display:flex; flex-direction:column; gap:11px; }
.v7 .top{ display:flex; align-items:flex-start; gap:10px; }
.v7 .top .ti{ flex:1; min-width:0; }
.v7 .top .metric{ text-align:right; flex:none; }
.v7 .top .metric .mval{ font-size:20px; }
.v7 .top .metric .mbar{ width:96px; margin:5px 0 0 auto; }
.v7 .row{ display:flex; gap:12px; align-items:center; }
.v7 .row .col{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.v7 .row .price{ }

/* ════ V8 스플릿: 좌(효능) / 우(원료표+지표) ════ */
.v8{ display:grid; grid-template-columns:62px 1fr; }
.v8 .body{ display:grid; grid-template-columns:1fr 150px; }
.v8 .left{ padding:13px 13px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.v8 .right{ padding:12px 13px; border-left:1px solid var(--hair); background:var(--bg); display:flex; flex-direction:column; gap:8px; }
.v8 .right .metric{ text-align:right; }
.v8 .right .metric .mval{ font-size:17px; }

/* ════ V9 리더보드: 랭크·사진·가로 스펙 · 지표 우 (에어리) ════ */
.v9{ display:flex; align-items:center; gap:13px; padding:15px 14px; }
.v9 .rk{ font-size:22px; font-weight:800; color:var(--ink4); width:22px; text-align:center; flex:none; }
.v9 .rk.top{ color:var(--accent); }
.v9 .mid{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.v9 .specbar{ display:flex; flex-wrap:wrap; gap:5px; }
.v9 .specbar .pchip{ font-size:11px; font-weight:700; color:var(--ink2); background:var(--raise); border-radius:7px; padding:3px 9px; }
.v9 .specbar .pchip b{ color:var(--ink); }
.v9 .metric{ text-align:right; flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.v9 .metric .medal{ font-size:12px; }

/* ════ V10 듀얼 스탯 ════ */
.v10{ display:grid; grid-template-columns:64px 1fr 132px; align-items:stretch; padding:14px; gap:13px; }
.v10 .body{ min-width:0; display:flex; flex-direction:column; gap:8px; justify-content:center; }
.v10 .stats{ display:flex; flex-direction:column; gap:7px; padding-left:13px; border-left:1px solid var(--hair); justify-content:center; }
.v10 .stat{ text-align:right; }
.v10 .stat.hero .v{ font-size:18px; font-weight:800; color:var(--accent-ink); }
.v10 .stat.hero .l{ font-size:10px; font-weight:800; color:var(--accent); }
.v10 .stat.sec .v{ font-size:14px; font-weight:800; color:var(--ink); }
.v10 .stat.sec .l{ font-size:10px; font-weight:700; color:var(--ink4); }
.v10 .stat .v .u{ font-size:10px; font-weight:700; color:var(--ink4); }