/* FIREVEST 홈 — 색·카드·배지는 SEPA 원래 토큰과 클래스(.card .vbadge .idx .chip)를 쓰고, 여기는 배치만 */
#fvh { min-height: 60vh; }
.fvh-pageh .kicker { margin-left: auto; }
.fvh-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
/* 폰: 시간대 시장 → 다른 시장(줄여서) → 심리 → 옵션 */
.fvh-first { order: 1; } .fvh-second { order: 2; } .fvh-mood { order: 3; } .fvh-optc { order: 4; }
@media (max-width: 899px) {
  .fvh-second .fvh-more, .fvh-second .fvh-spark, .fvh-second .fvh-dots { display: none; }
  .fvh-second .fvh-title { font-size: 16px; margin: 6px 0 2px; }
  .fvh-second .fvh-idxrow { margin-top: 8px; }
}
/* 넓은 화면: 2칸 × 2줄, 같은 줄은 같은 높이 */
@media (min-width: 900px) {
  .fvh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
}
/* 더 넓은 화면: 국장 | 미장 | 심리 위·옵션 아래 — 한 화면에 다 들어오게 */
@media (min-width: 1200px) {
  .fvh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "a b c" "a b d"; grid-template-rows: auto 1fr; }
  .fvh-first { grid-area: a; } .fvh-second { grid-area: b; } .fvh-mood { grid-area: c; } .fvh-optc { grid-area: d; }
  .fvh-opt .l2 { display: none; }
}

.fvh-card { display: flex; flex-direction: column; gap: 0; }
.fvh-h { display: flex; align-items: baseline; gap: 8px; color: inherit; text-decoration: none; margin: -4px -4px 8px; padding: 4px; border-radius: 10px; min-height: 32px; }
.fvh-h .t { font-size: 17px; font-weight: 800; letter-spacing: -.3px; }
.fvh-h .s { font-size: 12px; color: var(--dim); }
.fvh-h .go { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; font-weight: 700; color: var(--accent); white-space: nowrap; align-self: center; }
.fvh-h .go svg { width: 15px; height: 15px; }
.fvh-h:active { background: var(--surface2); }
.fvh-title { font-size: 20px; line-height: 1.35; font-weight: 800; letter-spacing: -.5px; margin: 8px 0 4px; }
.fvh-idxrow { margin-top: 10px; }
.fvh-idx .px { font-size: 15px; }
.fvh-spark { width: 100%; height: 26px; margin: 4px 0 2px; }
.fvh-dots { font-size: 11px; color: var(--dim); }
.fvh-dots span { display: inline-flex; align-items: center; gap: 4px; }
.fvh-dots i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.fvh-more { margin-top: 4px; }
.fvh-sub { margin-top: 8px; font-size: 13.5px; }
.fvh-sec { margin-top: 14px; }
.fvh-k { font-size: 12.5px; font-weight: 800; color: var(--dim); margin-bottom: 6px; }
.fvh-k .dim { font-weight: 600; color: var(--faint); margin-left: 4px; }
.fvh-meter { display: grid; grid-template-columns: 76px minmax(0, 1fr) 40px; align-items: center; gap: 8px; font-size: 12.5px; color: var(--dim); margin: 4px 0; }
.fvh-meter .bar { height: 8px; border-radius: 999px; background: var(--surface2); overflow: hidden; }
.fvh-meter .bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.fvh-meter b { text-align: right; color: var(--text); }
.fvh-flow { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--dim); }
.fvh-flow b { font-weight: 800; }
.fvh-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fvh-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 10px; border-radius: 999px; background: var(--surface2); color: var(--text); font-size: 12.5px; font-weight: 700; text-decoration: none; }
.fvh-rows { display: grid; gap: 2px; }
.fvh-row { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto 78px; grid-template-areas: "no nm rs px pv"; align-items: center; column-gap: 8px; min-height: 40px; padding: 2px 6px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 13.5px; }
.fvh-row:active { background: var(--surface2); }
.fvh-row .no { grid-area: no; color: var(--faint); font-weight: 800; font-size: 12px; }
.fvh-row .nm { grid-area: nm; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fvh-row .rs { grid-area: rs; font-size: 12px; color: var(--dim); font-weight: 700; }
.fvh-row .px { grid-area: px; font-weight: 700; text-align: right; }
.fvh-row .pv { grid-area: pv; font-size: 12px; font-weight: 700; text-align: right; }

/* 심리: 반원 게이지 3개 */
.fvh-dials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fvh-dial { display: grid; justify-items: center; text-align: center; padding: 8px 4px 10px; border-radius: 12px; background: var(--surface2); color: var(--text); text-decoration: none; min-width: 0; }
.fvh-dial svg { width: 100%; max-width: 120px; height: auto; }
.fvh-dial .val { font-size: 24px; font-weight: 800; margin-top: -26px; line-height: 1; }
.fvh-dial .zn { font-size: 12px; font-weight: 800; margin-top: 4px; }
.fvh-dial .lb { font-size: 13px; font-weight: 800; margin-top: 6px; }
.fvh-dial .wk { font-size: 11px; color: var(--dim); margin-top: 2px; }
.fvh-mood .src { margin-top: 10px; }

/* 옵션: 종목마다 한 줄 + 가격 지도 */
.fvh-opts { display: grid; gap: 8px; }
.fvh-opt { display: block; padding: 10px 12px; border-radius: 12px; background: var(--surface2); color: var(--text); text-decoration: none; }
.fvh-opt .l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 700; }
.fvh-opt .l1 .sym { font-size: 15px; font-weight: 800; }
.fvh-opt .l1 .vbadge { margin-left: auto; }
.fvh-opt .l2 { font-size: 13px; color: var(--dim); line-height: 1.5; margin-top: 4px; }
.fvh-opt .l3 { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; margin-top: 2px; color: var(--dim); }
.fvh-pmap { position: relative; height: 18px; margin: 8px 4px 2px; }
.fvh-pmap i { position: absolute; display: block; }
.fvh-pmap .rail { left: 0; right: 0; top: 8px; height: 2px; background: var(--line); border-radius: 2px; }
.fvh-pmap .band { top: 5px; height: 8px; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 4px; }
.fvh-pmap .wall { top: 1px; width: 3px; height: 16px; margin-left: -1.5px; border-radius: 2px; }
.fvh-pmap .wall.put { background: var(--down); } .fvh-pmap .wall.call { background: var(--up); }
.fvh-pmap .spot { top: 3px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--text); border: 2px solid var(--surface2); }

/* 장중 시세(20분 지연)·비트코인(실시간) 표시 */
.fvh-dots { display: flex; justify-content: space-between; }
.fvh-dots .cap { color: var(--faint); }
.fvh-live { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--dim); }
.fvh-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.fvh-live i.on { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.fvh-row .px small { font-size: 12px; font-weight: 700; margin-left: 2px; }
.fvh-btc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 10px; font-size: 13px; }
.fvh-btc .fvh-live { margin-top: 0; width: 100%; }
.fvh-btc b { font-weight: 800; }
.fvh-btc .dim { color: var(--dim); }