/* ============================================================
   QQ Market Board — 전체뷰(헤드라인 띠 + 코인줄/뉴스줄 2영역)
   ============================================================ */

/* ---------- 상단 헤드라인 띠 (긴급 / 속보 / 이슈) ---------- */
.headline-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-3); }
.hl-lane { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; }
.hl-lane__head { display: flex; align-items: center; gap: 7px; padding: 9px var(--sp-3); border-bottom: 1px solid var(--border); font-weight: 800; font-size: var(--fs-sm); }
.hl-lane__head .cnt { margin-left: auto; font-size: var(--fs-2xs); font-weight: 700; color: var(--text-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 1px 8px; }
.hl-lane--urgent { border-color: var(--up); }
.hl-lane--urgent .hl-lane__head { color: var(--up); background: var(--up-soft); border-bottom-color: var(--up); }
.hl-lane--breaking .hl-lane__head { color: var(--qq-gold); background: rgba(232,185,35,.10); border-bottom-color: var(--qq-gold-dim); }
.hl-lane--issue .hl-lane__head { color: var(--down); background: var(--down-soft); }

.hl-list { display: flex; flex-direction: column; }
.hl-item { display: flex; gap: 8px; padding: 8px var(--sp-3); border-bottom: 1px solid var(--border-soft); align-items: baseline; }
.hl-item:last-child { border-bottom: none; }
.hl-item:hover { background: var(--row-hover); }
.hl-item .t { font-size: var(--fs-2xs); color: var(--text-3); font-family: var(--ff-num); white-space: nowrap; flex: none; width: 44px; padding-top: 1px; }
.hl-item .x { font-size: var(--fs-sm); color: var(--text); font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hl-item:hover .x { color: var(--qq-gold); }
.hl-item .x .s { display: block; font-style: normal; font-weight: 600; font-size: 10px; color: var(--text-3); margin-top: 2px; }
.hl-empty { padding: 14px var(--sp-3); color: var(--text-3); font-size: var(--fs-xs); }
.hl-band__meta { margin: 0 0 var(--sp-5); color: var(--text-3); font-size: var(--fs-2xs); }

/* ---------- 영역(zone) 구획 ---------- */
.zone { margin-bottom: var(--sp-8); }
.zone__head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 var(--sp-3); flex-wrap: wrap; }
.zone__head h2 { font-size: var(--fs-xl); font-weight: 800; margin: 0; letter-spacing: -.2px; }
.zone__head .sub { color: var(--text-3); font-size: var(--fs-xs); }
.zone__head .refresh { margin-left: auto; font-size: var(--fs-2xs); color: var(--text-3); }

/* ---------- 뉴스 줄(zone 2): 섹션 카드 그리드 ---------- */
.ov-news { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.ov-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; }
.ov-card--unv { border-color: var(--qq-gold-dim); }
.ov-card__head { display: flex; align-items: center; gap: 7px; padding: 10px var(--sp-3); border-bottom: 1px solid var(--border); font-weight: 800; font-size: var(--fs-sm); }
.ov-card__head .cnt { margin-left: auto; font-size: var(--fs-2xs); font-weight: 700; color: var(--text-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 1px 8px; }
.ov-card__head .unv { font-size: 9px; font-weight: 800; color: var(--qq-gold); border: 1px solid var(--qq-gold-dim); border-radius: 4px; padding: 1px 5px; }
.ov-row { display: block; padding: 9px var(--sp-3); border-bottom: 1px solid var(--border-soft); }
.ov-row:last-of-type { border-bottom: none; }
.ov-row:hover { background: var(--row-hover); }
.ov-row .x { font-size: var(--fs-sm); font-weight: 600; color: var(--text); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ov-row:hover .x { color: var(--qq-gold); }
.ov-row .m { display: flex; gap: 8px; margin-top: 4px; font-size: 10px; color: var(--text-3); font-family: var(--ff-num); }
.ov-card__more { display: block; text-align: center; padding: 9px; font-size: var(--fs-2xs); font-weight: 700; color: var(--text-3); border-top: 1px solid var(--border-soft); margin-top: auto; }
.ov-card__more:hover { color: var(--qq-gold); }

/* ---------- 반응형 ---------- */
@media (max-width: 1100px) { .ov-news { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .headline-band { grid-template-columns: 1fr; } }
@media (max-width: 760px)  { .ov-news { grid-template-columns: 1fr; } }