feat(stock): 스크리너 모바일 카드 레이아웃 + 비교 적용

데스크탑은 기존 테이블 유지, <768px에서는 종목별 카드로 전환:
- 카드 헤더: #순위 | 종목명+코드 | 총점
- 비교 모드 ON 시: 순위Δ/점수Δ 두 줄
- 노드 칩 (가로 wrap)
- 진입/손절/익절/위험 2×2 그리드 (라벨 + 원 단위)
- 빠진 종목(OUT)도 카드로 회색 표시

CSS: .screener-mobile-list / .screener-mcard / .screener-result-head /
.screener-warn 추가. useIsMobile 훅으로 분기.

src/pages/stock/screener/Screener.css

@@ -80,3 +80,107 @@
 .screener-table th { text-align: left; padding: 8px; background: #0a0f1a; color: #9ca3af; font-weight: 500; border-bottom: 1px solid #1f2937; }
 .screener-table td { padding: 8px; border-bottom: 1px solid #1a2230; vertical-align: middle; }
 .screener-table tr:hover { background: #0a0f1a; }
+
+/* === 결과 표 헤더 === */
+.screener-result-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.screener-warn {
+  background: #7c2d12;
+  color: #fde68a;
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+/* === 모바일 카드 layout === */
+.screener-mobile-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 12px;
+}
+.screener-mcard {
+  background: #0a0f1a;
+  border: 1px solid #1f2937;
+  border-radius: 8px;
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.screener-mcard-head {
+  display: grid;
+  grid-template-columns: 36px 1fr auto;
+  align-items: center;
+  gap: 10px;
+}
+.screener-mcard-rank {
+  font-size: 16px;
+  font-weight: 700;
+  color: #fbbf24;
+  text-align: center;
+}
+.screener-mcard-name-main {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+.screener-mcard-name-sub {
+  font-size: 11px;
+  color: #9ca3af;
+  margin-top: 2px;
+  font-family: monospace;
+}
+.screener-mcard-score {
+  text-align: right;
+}
+.screener-mcard-score-val {
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1;
+}
+.screener-mcard-score-lbl {
+  font-size: 10px;
+  color: #6b7280;
+  margin-top: 2px;
+}
+.screener-mcard-delta {
+  display: flex;
+  justify-content: space-around;
+  font-size: 11px;
+  color: #9ca3af;
+  background: #0f1623;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+.screener-mcard-delta span { display: flex; gap: 4px; align-items: center; }
+.screener-mcard-chips { padding: 0; }
+.screener-mcard-prices {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4px 12px;
+  font-size: 12px;
+  padding-top: 6px;
+  border-top: 1px solid #1f2937;
+}
+.screener-mcard-prices > div {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+.screener-mcard-prices .lbl {
+  color: #6b7280;
+  font-size: 11px;
+}
+.screener-out-divider {
+  text-align: center;
+  color: #6b7280;
+  font-size: 11px;
+  padding: 12px 0 4px;
+}