/* 관심 지수 카드 - navbar 바로 아래 고정 바.
 * 폭은 .main-layout과 동일한 max-width(1380px)로 맞춰서 뷰포트 전체를 쓰지 않는다
 * (2026-07-16 피드백: "화면을 너무 full로 쓴다"). 높이는 --qi-height(style.css :root,
 * js/quick-indices.js가 접힘/펼침에 따라 40px/180px로 setProperty)를 그대로 쓴다 -
 * 아래 콘텐츠 시작 좌표(.page-wrap, .sidebar-left/right)도 같은 변수를 참조하므로
 * 접었다 펼쳐도 항상 정확히 맞물린다.
 * 2026-07-17(6차): 토스증권 위젯 참고해 "큰 카드 1개 + 작은 카드 그리드(4x2)"로 재구성
 * (사용자 요청). 그리드 2줄이 들어가야 해서 높이를 180px로 늘렸다.
 * 2026-07-17(9차): 원래 이 바 위에 별도로 떠 있던 KRX 공시 티커(disc-ticker)를 이 바
 * 오른쪽 "긴급속보" 패널(.qi-news)로 흡수 - 별도 바가 없어지면서 top이 navbar 바로
 * 아래(56px)로 올라왔다(이전엔 disc-ticker 높이(38px)만큼 아래인 94px). */

/* 2026-07-17(5차): 페이지 배경이 흰색으로 바뀌면서 테두리(border)가 유독 도드라져
   보여서(사용자 피드백: "토스처럼", 큰 테두리 없애자) 제거 - 나머지 사이트 카드(.card,
   .post-card)와 동일하게 테두리 없이 그림자만으로 떠 있는 느낌을 낸다. */
.qi-wrap {
  /* 13차: fixed -> absolute (사용자 피드백: "스크롤 내리면 시세창도 올라가야지 고정이
     되면 안 된다") - 문서 좌표에 놓여 페이지와 함께 스크롤되어 사라진다. 이에 맞춰
     style.css의 사이드바 sticky top도 리본 높이를 빼고 navbar 기준(72px)으로 되돌림 */
  position: absolute;
  /* 11차: navbar(56px)에 딱 붙어 있던 걸 6px 띄움(사용자 피드백) - style.css의 콘텐츠
     오프셋 상수(page-wrap 58)에도 이 6px이 반영돼 있으니 같이 바꿀 것.
     2026-07-27: 상단 메뉴바(--topbar-height, style.css :root)가 navbar와 이 바 사이에
     끼어들면서 그 높이만큼 더 내려감(9Pay 증권 개편). */
  top: calc(62px + var(--topbar-height));
  left: 0;
  right: 0;
  z-index: 96;
  height: var(--qi-height);
  max-width: 1380px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  gap: 8px;
  background: #fff;
  border-radius: 14px; /* 11차: navbar에서 떨어지면서 위쪽도 둥글게 */
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
  padding: 4px 12px;
  box-sizing: border-box;
}

/* 2026-07-17: 가로 스크롤(드래그/휠) 방식을 없애고 화살표 페이징으로 교체. 화면에 안
   들어가는 카드는 스크롤 대신 다음 페이지로 넘어간다.
   2026-07-17(6차): 안을 다시 "큰 카드(qiFeatured) + 그리드(qiGrid, 4x2)"로 나눔(토스
   스타일). overflow:hidden은 순수 안전망일 뿐 - 큰 카드 1 + 그리드 8 = 9개로 고정 렌더링
   되므로 평소엔 넘칠 일이 없다. */
.qi-scroll {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: stretch;
  gap: 8px;
  /* 14차(모바일 반응형 검토): overflow:hidden -> 가로 스크롤 허용. 1380px 데스크톱에선
     전부 들어가서 스크롤바가 아예 안 생기고, 모바일/좁은 창에서만 스와이프로 나머지
     카드에 접근할 수 있다(이전엔 넘친 카드를 볼 방법이 없었음 - 375px 실측 확인). */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.qi-scroll::-webkit-scrollbar { height: 4px; }
.qi-scroll::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }
.qi-scroll::-webkit-scrollbar-track { background: transparent; }
.qi-wrap.qi-collapsed .qi-scroll { display: none; }

.qi-featured {
  flex: 0 0 auto;
  height: 100%;
  display: flex;
  margin-right: 4px; /* 13차: 큰 카드와 그리드 사이를 살짝 더 띄움(.qi-scroll gap 8px + 4px) */
}

/* height:100%을 명시적으로 줘야 한다 - align-items:stretch(부모 flex)만 믿으면
   크롬에서 이 높이가 grid-template-rows: 1fr 트랙 계산에 "definite height"로 인정되지
   않아 그리드 카드가 내용 크기(약 71px)에서 안 늘어나는 버그가 있었음(2026-07-17 실측
   확인 - --qi-height를 80~150px로 바꿔도 카드가 그대로였다가 180px에서야 갑자기
   커짐). */
/* 2026-07-17(8차): 4열x2줄 -> 2열x3줄로 변경(사용자가 직접 그린 스케치 반영) - 카드가
   더 넓고 긴 모양이 되어 왼쪽 차트 썸네일도 좀 더 여유있게 보인다.
   2026-07-17(10차): flex:1로 남는 폭을 그리드가 전부 먹어 카드 2열이 바 전체에 넓게
   벌어지던 문제 수정(사용자 피드백: "넓게 벌려 놓으면 직관성이 떨어짐" - 토스처럼
   촘촘하게). 열 폭을 고정하고, 남는 폭은 긴급속보 패널(.qi-news)이 가져간다.
   페이징도 같이 제거 - 카드가 밀집되니 최대 선택(11종)도 한 화면에 들어가서, 그리드는
   3줄을 세로로 채우고 넘치면 오른쪽으로 168px 열이 자동으로 늘어난다(auto-flow). */
/* 13차: 열 폭 168 -> 200px(사용자 요청 - "코스피 야간..." 같은 말줄임 없이 풀네임 표시),
   열 사이 간격도 5 -> 12px로 살짝 벌림("너무 확 띄우진 말고")
   15차: 열과 열 사이에 회색 구분선 추가(사용자 요청) - DOM을 열 단위로 감싸지 않고도
   (드래그 정렬 로직이 #qiGrid 직속 자식이 전부 .qi-card라고 가정하고 있어서, 감싸면
   깨진다) repeating-linear-gradient 배경으로 그린다. 반복 단위(212px = 열폭200+간격12)
   안에서 간격 한가운데(205~206px)에 1px 선을 긋는 트릭 - 열이 몇 개든 실제 간격 위치에
   정확히 맞아떨어지고, 마지막 열 뒤에는 실제 간격이 없어 그 자리의 선은 그리드 폭
   밖으로 밀려나 안 보인다(계산상 항상 폭을 넘어감 - 별도 처리 불필요). */
.qi-grid {
  flex: 1 1 auto;
  height: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
  grid-template-rows: repeat(3, 1fr);
  row-gap: 5px;
  column-gap: 12px;
  background-image: repeating-linear-gradient(to right,
    transparent 0, transparent 205px, #e2e8f0 205px, #e2e8f0 206px, transparent 206px, transparent 212px);
}

/* 상단 뉴스 패널을 제거한 뒤, 대표 지수 1개 + 나머지 7개가 전체 폭을 고르게 사용한다. */
@media (min-width: 901px) {
  .qi-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: 1fr;
    grid-auto-flow: row;
    grid-auto-columns: 0;
    background-image: none;
  }
  html.dark .qi-grid { background-image: none !important; }
}

/* 2026-07-17(9차): KRX 공시 티커를 흡수한 "긴급속보" 패널 - 원래 disc-track의 가로
   스크롤(discScroll)을 세로 스크롤로 옮긴 버전. 목록을 2번 이어붙이고 translateY로
   절반만큼 움직여서 끊김 없이 순환하는 건 원본과 동일한 트릭. */
.qi-news {
  /* 10차: 고정 168px -> 남는 폭 전체. 카드들이 왼쪽에 촘촘히 모이면서 생긴 여백을
     속보 헤드라인이 가져가 제목이 잘리지 않고 읽힌다(사용자 시안 반영).
     14차: min-width 0 -> 170px. 좁은 창에서 속보 패널이 0으로 짜부라진 뒤에야 가로
     스크롤이 생기던 것을, 최소 폭을 지키고 그 밑으론 스크롤로 넘기게 함. */
  flex: 1;
  min-width: 170px;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-left: 10px;
  border-left: 1px solid #f0f0f0;
  overflow: hidden;
}
.qi-news-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px; /* 2026-07-18: 10px -> 12px, 폰트가 너무 작다는 피드백 */
  font-weight: 700;
  color: #d24f45;
  letter-spacing: 0.3px;
  padding-bottom: 3px;
}
/* 11차: 빨간 점 -> 확성기 SVG(currentColor라 헤더 글자색을 그대로 따라감) */
.qi-news-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}
.qi-news-wrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
@keyframes qiNewsScroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
.qi-news-track {
  display: flex;
  flex-direction: column;
  animation: qiNewsScroll 30s linear infinite;
}
.qi-news-track:hover { animation-play-state: paused; }
.qi-news-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0; /* 폰트가 커진 만큼 줄간격도 살짝 늘림 */
  font-size: 13px; /* 2026-07-18: 10.5px -> 13px, 폰트가 너무 작다는 피드백 */
  font-weight: 500;
  color: #333;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qi-news-item:hover { color: #6366f1; }
.qi-news-market-kospi {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 700;
  color: #2563eb; background: #eff6ff;
  padding: 1px 5px; border-radius: 7px;
}
.qi-news-market-kosdaq {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 700;
  color: #16a34a; background: #f0fdf4;
  padding: 1px 5px; border-radius: 7px;
}
/* 10차: 공시가 비어 네이버 뉴스 헤드라인으로 폴백했을 때 붙는 회색 "뉴스" 뱃지 */
.qi-news-market-news {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 700;
  color: #64748b; background: #f1f5f9;
  padding: 1px 5px; border-radius: 7px;
}
.qi-news-corp {
  flex: 0 0 auto;
  font-size: 11.5px; font-weight: 700; color: #555;
}
.qi-news-loading {
  color: #999; font-size: 13px;
}

/* (10차: 좌우 화살표 페이징 버튼(.qi-page-btn)은 전체가 한 화면에 들어가게 되면서 제거) */

/* 2026-07-17(6차): 큰 카드(qi-card-featured)/그리드 카드(qi-card-grid) 공통 베이스 -
   국기/원자재 아이콘 + 라벨 + 장중·장마감 표시를 맨 위 한 줄에 놓고, 그 아래 가격/등락,
   맨 아래 차트를 카드 폭 전체로 깔아 세로로 쌓는 구조는 두 크기가 동일하고 글자/차트
   크기만 다르다. */
.qi-card {
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}
.qi-card-group {
  flex: 0 0 auto;
  padding: 1px 4px;
  border-radius: 5px;
  background: #eef2ef;
  color: #607067;
  font-size: 8.5px;
  line-height: 1.4;
  white-space: nowrap;
}
html.dark .qi-card-group {
  background: rgba(245, 239, 224, .1) !important;
  color: rgba(245, 239, 224, .65) !important;
}
.qi-card.qi-dragging { opacity: 0.4; }

.qi-card-featured {
  width: 160px;
  height: 100%;
  padding: 6px 8px;
  cursor: default;
}

/* min-height:0이 핵심 - 그리드 아이템의 기본 자동 최소 크기(내용물의 min-content 높이,
   여기선 체결/미니차트 캔버스의 내재 높이 때문에 약 71px)가 1fr 트랙이 그보다 작게
   줄어드는 걸 막아서, 바 높이를 줄여도 그리드 카드가 71px 밑으로 안 줄어드는 버그가
   있었다(2026-07-17 실측 확인) - 명시적으로 0으로 풀어줘야 1fr이 실제로 작동한다.
   2026-07-17(7차): 차트가 카드 전체 폭을 차지하던 걸 왼쪽 작은 썸네일로 축소(사용자
   피드백 - 토스 참고 이미지에서 그리드 카드는 차트가 좁고 텍스트가 오른쪽에 있음).
   .qi-card 기본(flex-column)을 grid로 오버라이드하고 자식들을 2열로 재배치한다. */
/* 11차: 등락률이 가격 옆(.qi-card-priceline 한 줄)으로 합쳐지면서 3행 -> 2행. */
.qi-card-grid {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 3px 6px;
  cursor: grab;
  display: grid;
  /* 12차: 차트 썸네일 34 -> 68px (사용자 요청: 지금의 2배) */
  grid-template-columns: 68px 1fr;
  grid-template-rows: auto auto;
  column-gap: 6px;
  align-items: center;
}
.qi-card-grid .qi-card-top { grid-column: 2; grid-row: 1; }
.qi-card-grid .qi-card-priceline { grid-column: 2; grid-row: 2; }
.qi-card-grid .qi-card-chart { grid-column: 1; grid-row: 1 / span 2; align-self: stretch; margin-top: 0; }

.qi-card-top {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.qi-card-flag {
  line-height: 1;
  flex: 0 0 auto;
}
.qi-card-featured .qi-card-flag { font-size: 13px; }
.qi-card-grid .qi-card-flag { font-size: 10px; }

.qi-card-label {
  font-weight: 700;
  color: #222; /* 13차: #888 -> 검정 계열(사용자 요청) */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.qi-card-featured .qi-card-label { font-size: 13px; }
.qi-card-grid .qi-card-label { font-size: 10px; }

.qi-card-status {
  font-weight: 600;
  color: #aaa;
  white-space: nowrap;
  flex: 0 0 auto;
}
.qi-card-featured .qi-card-status { font-size: 11px; }
.qi-card-grid .qi-card-status { display: none; }

/* 11차: 가격+등락률을 한 줄로(사용자 요청 - 그만큼 카드 높이가 한 줄 줄었다) */
.qi-card-priceline {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}
.qi-card-featured .qi-card-priceline { margin-top: 2px; }

.qi-card-price {
  /* 10차: 700 -> 500 (사용자 피드백: "숫자를 저렇게 굵게 할 필요 없어") */
  font-weight: 500;
  color: #222;
  line-height: 1.1;
  white-space: nowrap;
}
.qi-card-featured .qi-card-price { font-size: 22px; }
.qi-card-grid .qi-card-price { font-size: 13px; }

.qi-card-change {
  font-weight: 600;
  color: #888;
  white-space: nowrap;
}
.qi-card-featured .qi-card-change { font-size: 12px; }
.qi-card-grid .qi-card-change { font-size: 10px; }

.qi-card-chart {
  flex: 1;
  min-height: 0;
}
.qi-card-featured .qi-card-chart { margin-top: 6px; }

.qi-pos { color: #d24f45; }
.qi-neg { color: #1261c4; }
.qi-zero { color: #888; }

/* 스크롤 영역 밖 컨트롤 - 카드가 몇 개든, 얼마나 스크롤됐든 항상 같은 자리(오른쪽 끝).
   margin-left:auto가 없으면 접혔을 때(.qi-scroll이 display:none) 남은 flex 아이템이
   왼쪽으로 붙어버려서(2026-07-16 피드백) 항상 오른쪽에 고정되게 강제한다.
   2026-07-17(4차): "전체 지수보기" 링크와 접기/추가 버튼이 한 줄에 나란히 있던 걸
   위/아래 2단으로 분리(사용자 요청 - 나란히 두지 말라고 함). */
.qi-controls {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  padding-left: 6px; /* 2026-07-18: 10px -> 6px, 버튼 영역이 너무 넓다는 피드백 */
  border-left: 1px solid #f0f0f0;
}

/* (12차: "전체 지수보기" 링크(.qi-all-link) 삭제 - 사용자 요청) */

.qi-controls-icons {
  display: flex;
  align-items: center;
  gap: 4px; /* 2026-07-18: 6px -> 4px */
}

/* 15차: 11차에서 붙였던 "리본 접기/펼치기" 한글 라벨 제거(사용자 요청) - 아이콘 전용
   원형 버튼으로 되돌리고, 옆 "+" 버튼과 크기를 맞춰서(26px vs 32px, 둘 다 원형) 가지런히
   정렬되게 정리했다.
   2026-07-18: "리본 버튼이랑 + 버튼이 중앙에 너무 많은 부분을 차지한다"는 피드백 - 둘 다
   더 작게(26->20px, 32->24px) 줄임. */
.qi-collapse-btn {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  background: #fff;
  color: #888;
  font-size: 10px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.qi-collapse-btn:hover { background: #f2f2f2; }

.qi-add-wrap { position: relative; }
.qi-add-btn {
  width: 24px;
  height: 24px;
  border: 1px dashed #ccc;
  border-radius: 50%;
  background: transparent;
  color: #888;
  font-size: 13px;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
}
.qi-add-btn:hover { background: #f7f7f8; color: #555; }

/* .qi-popover에 display:grid를 무조건 걸어두면 hidden 속성으로는 실제로 안 숨겨진다(작성자
   스타일이 UA [hidden] 규칙보다 우선순위가 높음) - class 토글(open) 방식으로만 표시한다.
   .qi-add-wrap(position:relative)에 바로 앵커해서 카드 스크롤 위치와 무관하게 버튼
   바로 아래에 뜬다(2026-07-16 버그 수정 - 예전엔 .qi-wrap 기준 right:16px라 스크롤과
   무관하게 화면 오른쪽 끝에 떠서 "이상한 위치"로 보였음). */
.qi-popover {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 2px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}
.qi-popover.open { display: grid; }

.qi-pop-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
}
.qi-pop-item:hover { background: #f2f2f2; }
.qi-pop-item input { cursor: pointer; }

@media (max-width: 900px) {
  .qi-popover { grid-template-columns: 1fr; right: -8px; }
}
/* 참고: 그리드는 JS에서 항상 8칸(4x2)을 채워 넣는데, 여기서 2칸(2x2=4칸)으로 줄이면
   나머지 4칸은 화면 밖으로 넘쳐 overflow:hidden에 가려진다(에러는 아니지만 일부 지수가
   안 보임) - 모바일에서 페이지당 개수를 다르게 하려면 JS의 GRID_SIZE도 반응형으로
   바꿔야 하는데, 이번 요청 범위 밖이라 일단 보류. */
@media (max-width: 640px) {
  /* 14차: 모바일에선 리본이 화면 양끝에 붙으므로 라운드 제거, 컨트롤도 좀 더 컴팩트하게 */
  .qi-wrap { padding: 6px 8px; gap: 6px; border-radius: 0; }
  .qi-controls { padding-left: 6px; }
  .qi-card-featured { width: 150px; }
  /* 14차: 좁은 화면에선 열 폭을 150px로 고정하고 넘치는 만큼 .qi-scroll의 가로
     스와이프로 넘긴다(이전 minmax(140px,1fr)+overflow:hidden 조합은 넘친 카드를
     볼 방법이 없었음). 속보 패널은 계속 숨김. */
  /* 150(열폭)+8(간격)=158px 반복 단위, 선은 간격 한가운데(153.5~154.5px).
     html.dark .qi-grid(다음 다크모드 섹션)가 두 클래스라 특이도가 더 높아서 이 규칙을
     그냥 덮어써버리므로, 다크모드용 158px 패턴도 이 media 블록 안에서 별도로 정의. */
  .qi-grid {
    grid-auto-columns: 150px;
    column-gap: 8px;
    background-image: repeating-linear-gradient(to right,
      transparent 0, transparent 153.5px, #e2e8f0 153.5px, #e2e8f0 154.5px, transparent 154.5px, transparent 158px);
  }
  html.dark .qi-grid {
    background-image: repeating-linear-gradient(to right,
      transparent 0, transparent 153.5px, rgba(245, 239, 224, 0.14) 153.5px, rgba(245, 239, 224, 0.14) 154.5px, transparent 154.5px, transparent 158px) !important;
  }
  .qi-news { display: none; } /* 좁은 화면에서는 카드만으로도 이미 빠듯해서 속보 패널은 숨김 */
}

body.iframe-mode .qi-wrap { display: none !important; }

/* ---- 다크모드 ----
   2026-07-17(5차): 기존엔 무채색 회색(#1a1a1a/#262626 등)을 썼는데 당시 사이트 다크모드가
   전부 남색 톤이라 붕 떠 보여서 남색으로 맞췄었음. **2026-07-28**: 사이트 다크모드 전체가
   #1A1A1A 배경 + #F5EFE0 글자 2색 체계로 재통일되면서(style.css 기타 규칙 참고) 이 위젯도
   같은 팔레트로 다시 맞춘다 - 상승/하락(qi-pos/qi-neg)과 코스피/코스닥 구분 배지 색은
   의미가 있는 색이라 그대로 유지. */
html.dark .qi-wrap { background: #1A1A1A !important; border: 1px solid rgba(245, 239, 224, 0.12) !important; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.45) !important; }
html.dark .qi-scroll::-webkit-scrollbar-thumb { background: rgba(245, 239, 224, 0.25) !important; }
html.dark .qi-controls { border-color: rgba(245, 239, 224, 0.14) !important; }
html.dark .qi-card-label { color: #F5EFE0 !important; }
html.dark .qi-card-status { color: rgba(245, 239, 224, 0.5) !important; }
html.dark .qi-card-price { color: #F5EFE0 !important; }
html.dark .qi-card-change { color: rgba(245, 239, 224, 0.65) !important; }
html.dark .qi-pos { color: #ff6b5b !important; }
html.dark .qi-neg { color: #4d9fff !important; }
html.dark .qi-zero { color: rgba(245, 239, 224, 0.65) !important; }
html.dark .qi-collapse-btn { background: rgba(245, 239, 224, 0.08) !important; border-color: rgba(245, 239, 224, 0.2) !important; color: rgba(245, 239, 224, 0.65) !important; }
html.dark .qi-collapse-btn:hover { background: rgba(245, 239, 224, 0.16) !important; }
html.dark .qi-grid {
  background-image: repeating-linear-gradient(to right,
    transparent 0, transparent 205px, rgba(245, 239, 224, 0.14) 205px, rgba(245, 239, 224, 0.14) 206px, transparent 206px, transparent 212px) !important;
}
html.dark .qi-add-btn { border-color: rgba(245, 239, 224, 0.3) !important; color: rgba(245, 239, 224, 0.65) !important; }
html.dark .qi-add-btn:hover { background: rgba(245, 239, 224, 0.08) !important; color: #F5EFE0 !important; }
html.dark .qi-popover { background: #1A1A1A !important; border-color: rgba(245, 239, 224, 0.2) !important; }
html.dark .qi-pop-item { color: #F5EFE0 !important; }
html.dark .qi-pop-item:hover { background: rgba(245, 239, 224, 0.1) !important; }

html.dark .qi-news { border-color: rgba(245, 239, 224, 0.14) !important; }
html.dark .qi-news-item { color: #F5EFE0 !important; }
html.dark .qi-news-item:hover { color: rgba(245, 239, 224, 0.7) !important; }
html.dark .qi-news-corp { color: rgba(245, 239, 224, 0.55) !important; }
html.dark .qi-news-market-kospi { background: #1c2c4d !important; }
html.dark .qi-news-market-kosdaq { background: rgba(255,255,255,0.07) !important; }
html.dark .qi-news-market-news { color: rgba(245, 239, 224, 0.65) !important; background: rgba(255,255,255,0.07) !important; }
html.dark .qi-news-loading { color: rgba(245, 239, 224, 0.5) !important; }

/* 2026-07 홈 개편: 시장지표 8개를 같은 폭의 한 줄 미니 티커로 고정한다.
   뉴스·공시·사용자 추가 컨트롤은 렌더링하지 않으며 좁은 화면에서만 가로 스크롤한다. */
.qi-wrap {
  gap: 0;
  padding: 8px 10px;
}
.qi-scroll {
  width: 100%;
  gap: 0;
  overflow-x: auto;
}
.qi-grid {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: 1fr;
  grid-auto-flow: row;
  grid-auto-columns: 0;
  gap: 0;
  background-image: none;
}
html.dark .qi-grid { background-image: none !important; }
.qi-card-grid {
  width: auto;
  height: 100%;
  min-width: 0;
  padding: 7px 10px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 5px;
  align-content: center;
  border-left: 1px solid #eceeed;
  border-radius: 0;
  cursor: default;
}
.qi-card-grid:first-child { border-left: 0; }
.qi-card-grid .qi-card-top {
  grid-column: 1;
  grid-row: 1;
}
.qi-card-grid .qi-card-priceline {
  grid-column: 1;
  grid-row: 2;
}
.qi-card-grid .qi-card-chart { display: none; }
.qi-card-grid .qi-card-flag { font-size: 12px; }
.qi-card-grid .qi-card-label {
  overflow: hidden;
  font-size: 11.5px;
  text-overflow: ellipsis;
}
.qi-card-grid .qi-card-price { font-size: 13px; }
.qi-card-grid .qi-card-change { font-size: 10.5px; }
.qi-card-group,
.qi-card-status,
.qi-controls { display: none !important; }
html.dark .qi-card-grid { border-left-color: rgba(245, 239, 224, .12) !important; }

@media (max-width: 900px) {
  .qi-grid {
    min-width: 1040px;
    grid-template-columns: repeat(8, 130px);
    grid-template-rows: 1fr;
    grid-auto-columns: 0;
    background-image: none;
  }
  html.dark .qi-grid { background-image: none !important; }
}
@media (max-width: 640px) {
  .qi-wrap { padding: 7px 8px; border-radius: 0; }
}