/* ── 리스트 헤더 ── */
.stock-list-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.stock-list-header h3 {
  margin: 0;
  font-size: 1.2em;
  font-weight: 500;
  color: #fff;
}

.stock-list-header .header-stats {
  display: flex;
  font-size: 1.2em;
  gap: 12px;
  align-items: baseline;
}

.stock-list-header .change {
  color: #f33;        /* 양수일 때 빨간색 */
  font-weight: 600;
}

.stock-list-header .volume {
  color: #ccc;
  font-size: 0.9em;
}

/* ── 카드 ── */
.stock-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px;
  padding: 10px;
  background: #2b2b3a;
  border-radius: 8px;
  margin-bottom: 8px;  /* 카드 간 간격 */
}

/* 1행: 이름 / 등락률 */
.stock-card .name {
  grid-column: 1;
  font-weight: 600;
  color: #fff;
}
.stock-card .change {
  grid-column: 2;
  text-align: right;
  font-weight: 600;
  color: #f33;        /* 양수일 때 빨간색 */
}

/* 2행: 현재가 / 거래대금 */
.stock-card .stock-close {
  grid-column: 1;
  font-size: 0.9em;
  color: #ccc;
}
.stock-card .stock-value {
  grid-column: 2;
  text-align: right;
  font-size: 0.9em;
  color: #ccc;
}