/* 실시간 지수 바 (코스피·코스닥·다우·나스닥) — 2026-10-23
   PC: 검색창 양옆(왼쪽 국내, 오른쪽 미국) / 모바일·앱: 필터 상자 아래 한 줄 */
.mkt-card{display:flex;flex-direction:column;gap:2px;min-width:0;padding:10px 14px;background:rgba(255,255,255,.72);border:1px solid rgba(197,165,90,.35);border-radius:var(--radius-lg);box-shadow:0 1px 2px rgba(0,0,0,.04);backdrop-filter:blur(4px)}
.mkt-name{font-size:var(--font-size-xs);font-weight:600;color:var(--color-text-tertiary);letter-spacing:.2px;display:flex;align-items:center;gap:6px}
.mkt-name .mkt-live{width:6px;height:6px;border-radius:50%;background:#CFCFCF;flex:none}
.mkt-name .mkt-live.on{background:var(--color-positive);box-shadow:0 0 0 2px rgba(232,93,58,.18)}
.mkt-val{font-size:16px;font-weight:700;color:var(--color-text-primary);font-variant-numeric:tabular-nums;line-height:1.2}
.mkt-chg{font-size:var(--font-size-xs);font-weight:600;font-variant-numeric:tabular-nums;color:var(--color-text-tertiary);white-space:nowrap}
.mkt-chg.up{color:var(--color-positive-text)}
.mkt-chg.down{color:var(--color-negative-text)}
.mkt-card.flash{animation:mktFlash .9s ease-out}
@keyframes mktFlash{0%{background:#FFF4E8}100%{background:rgba(255,255,255,.72)}}

/* PC: 검색창 위에 네 지수를 한 줄로 (코스피·코스닥 | 다우·나스닥), 검색창과 아래 필터 상자 사이 간격은 절반으로 */
.mkt-side{display:none}
.mkt-strip{display:none}
@media (min-width:769px){
  .search-section{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:28px;row-gap:14px;padding-bottom:calc(var(--spacing-3xl) / 2)}
  .page1-hero{padding-bottom:calc(var(--spacing-xl) / 2)}
  .search-section .search-bar{order:2;flex:0 0 620px;max-width:620px;margin:0}
  .mkt-side{display:flex;flex-direction:row;gap:10px;order:1;flex:none}
  .mkt-side .mkt-card{width:150px;padding:8px 14px}
  .mkt-left{padding-right:14px;border-right:1px solid rgba(197,165,90,.45)}
  .mkt-right{padding-left:0}
  .search-section{column-gap:14px}
}

/* 모바일·앱: 검색창 바로 위 한 줄 4칸 (글자 작게) */
@media (max-width:768px){
  .search-section{padding-top:var(--spacing-lg)}
  /* 칸 사이는 선 대신 아주 얇은 빈 틈(3px)으로 — 각 칸이 작은 흰 카드 */
  .mkt-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin:0 0 12px;background:none;border:0;border-radius:0;overflow:visible}
  .mkt-strip .mkt-card{padding:7px 4px 6px;gap:1px;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:none;backdrop-filter:none;align-items:center;text-align:center}
  .mkt-strip .mkt-card+.mkt-card{border-left:1px solid var(--color-border)}
  .mkt-strip .mkt-name{font-size:10px;gap:4px}
  .mkt-strip .mkt-name .mkt-live{width:5px;height:5px}
  .mkt-strip .mkt-val{font-size:12px;letter-spacing:-.2px}
  .mkt-strip .mkt-chg{font-size:9.5px;letter-spacing:-.2px}
  .mkt-strip .mkt-card.flash{animation:mktFlashM .9s ease-out}
  @keyframes mktFlashM{0%{background:#FFF4E8}100%{background:none}}
}