/* 메인 페이지 "투자자별 매매 동향" 위젯(js/investor-trend-widget.js) - 작업지시서 #4
 * (2026-07-20) 공지사항(#pinnedNotice) 카드 대체. .card는 style.css의 공통 카드 스타일을
 * 그대로 쓰고 이 파일은 내부 헤더/탭/표만 추가한다.
 * 2026-07-21: 원래 일(日) 탭 전용이던 투자자별 3행 분리 레이아웃을 사용자 요청으로 주/월
 * 탭에도 그대로 적용해 유일한 렌더링 모드였음(기존 그룹 막대/테이블은 이때 제거).
 * 2026-07-22: 그 3행 분리 막대 레이아웃을 diverging bar 표(.itw-table*)로 교체(작업지시서
 * "투자자별 매매동향 표 UI 개선") - 상승=빨강(#d24f45)/하락=파랑(#1261c4) 사이트 공통색을
 * 그대로 씀(작업지시서 3-3의 개인/외국인/기관 구분색 팔레트는 표 형태에서는 투자자별 색상
 * 구분이 필요 없어져 미사용, git history 참고).
 * 다크모드: html.dark #investor-trend-widget ... !important (9bolt 스킨 블랑켓 규칙 대응). */

#investor-trend-widget .itw-card {
  height: 298px;
  box-sizing: border-box;
  overflow: hidden;
  padding: 14px 20px 10px;
  display: flex;
  flex-direction: column;
}

#investor-trend-widget .itw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
#investor-trend-widget .itw-heading-copy {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
#investor-trend-widget .itw-title {
  font-size: 14px;
  font-weight: 500;
  color: #222;
}
#investor-trend-widget .itw-asof {
  font-size: 11px;
  color: #9ca3af;
  white-space: nowrap;
}
#investor-trend-widget .itw-subtext {
  margin-top: 0;
  font-size: 11px;
  color: #9ca3af;
  white-space: nowrap;
}

/* ---- 탭(기간 + 시장) ---- */
#investor-trend-widget .itw-tabrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
#investor-trend-widget .itw-tabs,
#investor-trend-widget .itw-market-tabs {
  display: flex;
  gap: 6px;
}
#investor-trend-widget .itw-tab,
#investor-trend-widget .itw-market-tab {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #666;
  background: #f1f2f5;
  border: none;
  border-radius: 999px;
  padding: 3px 11px;
  cursor: pointer;
}
#investor-trend-widget .itw-tab:hover,
#investor-trend-widget .itw-market-tab:hover { color: #222; }
#investor-trend-widget .itw-tab.active,
#investor-trend-widget .itw-market-tab.active {
  background: #e2e5ea;
  color: #111;
}
/* 시장 탭은 기간 탭보다 한 단계 낮은 시각적 위계(보조 선택) - 살짝 작고 옅게 */
#investor-trend-widget .itw-market-tab {
  font-size: 11.5px;
  padding: 3px 11px;
  background: transparent;
  border: 1px solid #e2e5ea;
}
#investor-trend-widget .itw-market-tab.active {
  background: #eef0f3;
  border-color: #eef0f3;
}

/* ---- 스켈레톤 / 에러 ---- */
#investor-trend-widget .itw-skeleton {
  height: 96px;
  margin-top: 10px;
  border-radius: 10px;
  background: linear-gradient(90deg, #f2f3f5 25%, #e9eaed 37%, #f2f3f5 63%);
  background-size: 400% 100%;
  animation: itw-shimmer 1.4s ease infinite;
}
@keyframes itw-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
#investor-trend-widget .itw-error {
  margin-top: 10px;
  padding: 16px 0 8px;
  text-align: center;
  font-size: 12.5px;
  color: #9ca3af;
}
#investor-trend-widget .itw-error small { display: block; margin-top: 4px; }
#investor-trend-widget .itw-retry {
  margin-top: 9px;
  padding: 6px 12px;
  border: 1px solid #d8dedb;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  cursor: pointer;
}

#investor-trend-widget .itw-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ---- diverging bar 표(2026-07-22) - 날짜 | 개인 | 외국인 | 기관 ----
 * 가로 스크롤 래퍼 + table-layout:fixed - 날짜 열만 고정폭, 나머지 3개 투자자 열은 남는
 * 폭을 균등분배(브라우저 기본 동작, 헤더 행 폭이 기준). 좁은 화면에서 찌그러지는 대신
 * min-width로 가로 스크롤 유도(기존 3행 분리 레이아웃과 동일한 방침 - 값 레이블 잘림 방지). */
#investor-trend-widget .itw-table-wrap {
  margin-top: 10px;
  overflow-x: auto;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
#investor-trend-widget .itw-table {
  width: 100%;
  height: 100%;
  min-width: 460px;
  border-collapse: collapse;
  table-layout: fixed;
}
#investor-trend-widget .itw-table th {
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  text-align: center;
  padding: 0 4px 3px;
  border-bottom: 1px solid #eceff2;
}
#investor-trend-widget .itw-th-date {
  width: 68px;
  text-align: left;
  padding-left: 2px;
}
#investor-trend-widget .itw-row td {
  padding: 3px 4px;
  border-bottom: 1px solid #f4f5f7;
}
#investor-trend-widget .itw-td-date {
  width: 68px;
  font-size: 11.5px;
  color: #666;
  white-space: nowrap;
  padding-left: 2px;
}

/* 셀 하나 = diverging bar 트랙. 가운데 세로선이 0 기준(가운데 = 50%) - 오른쪽으로 뻗으면
   매수(+, 빨강 옅은 배경), 왼쪽으로 뻗으면 매도(-, 파랑 옅은 배경). 막대 길이는 JS가 열별
   최대 절댓값 대비 %로 계산해 인라인 style width로 넣는다(최대 50% = 기준선에서 트랙 끝까지). */
#investor-trend-widget .itw-tcell-track {
  position: relative;
  height: 20px;
}
#investor-trend-widget .itw-tcell-mid {
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 1px;
  background: #d7dae0;
}
#investor-trend-widget .itw-tcell-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  overflow: visible;
}
/* 값 텍스트는 막대의 바깥쪽 끝(기준선 반대쪽)에 겹쳐서 표시(지시서 1항) - flex justify로
   막대 끝단에 고정, 막대가 아주 짧아도 overflow:visible이라 텍스트가 잘리지 않는다. */
#investor-trend-widget .itw-bar-pos {
  left: 50%;
  justify-content: flex-end;
  padding-right: 4px;
  background: rgba(210, 79, 69, .14);
  border-radius: 0 3px 3px 0;
}
#investor-trend-widget .itw-bar-neg {
  right: 50%;
  justify-content: flex-start;
  padding-left: 4px;
  background: rgba(18, 97, 196, .14);
  border-radius: 3px 0 0 3px;
}
#investor-trend-widget .itw-tcell-value {
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
#investor-trend-widget .itw-val-pos { color: #d24f45; }
#investor-trend-widget .itw-val-neg { color: #1261c4; }

/* ---- 합계 행(지시서 4항) - 굵은 글씨 + 상단 굵은 구분선 + 옅은 회색 배경 ---- */
#investor-trend-widget .itw-row-sum td {
  border-top: 2px solid #cfd3da;
  border-bottom: none;
  background: #f4f5f7;
  padding-top: 3px;
  padding-bottom: 3px;
}
#investor-trend-widget .itw-row-sum .itw-td-date {
  font-weight: 700;
  color: #333;
}
#investor-trend-widget .itw-td-sum { text-align: center; }
#investor-trend-widget .itw-sum-value {
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 720px) {
  #investor-trend-widget .itw-card { height: auto; overflow: visible; padding: 12px 14px 10px; }
  #investor-trend-widget .itw-heading-copy { align-items: flex-start; flex-direction: column; gap: 1px; }
  #investor-trend-widget .itw-skeleton { height: 80px; }
  #investor-trend-widget .itw-table { min-width: 400px; }
  #investor-trend-widget .itw-tcell-track { height: 22px; }
  #investor-trend-widget .itw-tcell-value { font-size: 10.5px; }
  #investor-trend-widget .itw-th-date,
  #investor-trend-widget .itw-td-date { width: 56px; font-size: 10.5px; }
}

/* ---- 다크모드 ----
   2026-07-28: 사이트 다크모드 전체 재통일(style.css 기타 규칙 참고)에 맞춰 #1A1A1A
   배경 + #F5EFE0 글자로 교체. 순매수/순매도 막대·수치(itw-bar-pos/neg, itw-val-pos/neg)는
   의미가 있는 색이라 그대로 유지. */
html.dark #investor-trend-widget .itw-title { color: #F5EFE0 !important; }
html.dark #investor-trend-widget .itw-retry { background: transparent !important; color: #F5EFE0 !important; border-color: rgba(245,239,224,.25) !important; }
html.dark #investor-trend-widget .itw-asof,
html.dark #investor-trend-widget .itw-subtext,
html.dark #investor-trend-widget .itw-error { color: rgba(245, 239, 224, 0.55) !important; }
html.dark #investor-trend-widget .itw-tab,
html.dark #investor-trend-widget .itw-market-tab { background: rgba(245, 239, 224, 0.08) !important; color: rgba(245, 239, 224, 0.65) !important; }
html.dark #investor-trend-widget .itw-market-tab { border-color: rgba(245, 239, 224, 0.2) !important; }
html.dark #investor-trend-widget .itw-tab:hover,
html.dark #investor-trend-widget .itw-market-tab:hover { color: #F5EFE0 !important; }
html.dark #investor-trend-widget .itw-tab.active,
html.dark #investor-trend-widget .itw-market-tab.active { background: rgba(245, 239, 224, 0.22) !important; color: #F5EFE0 !important; }
html.dark #investor-trend-widget .itw-skeleton {
  background: linear-gradient(90deg, #1A1A1A 25%, rgba(245, 239, 224, 0.08) 37%, #1A1A1A 63%) !important;
  background-size: 400% 100% !important;
}
html.dark #investor-trend-widget .itw-table th { color: rgba(245, 239, 224, 0.55) !important; border-color: rgba(245, 239, 224, 0.18) !important; }
html.dark #investor-trend-widget .itw-td-date { color: rgba(245, 239, 224, 0.8) !important; }
html.dark #investor-trend-widget .itw-row td { border-color: rgba(245, 239, 224, 0.1) !important; }
html.dark #investor-trend-widget .itw-tcell-mid { background: rgba(245, 239, 224, 0.16) !important; }
html.dark #investor-trend-widget .itw-bar-pos { background: rgba(232, 119, 109, .18) !important; }
html.dark #investor-trend-widget .itw-bar-neg { background: rgba(110, 168, 232, .18) !important; }
html.dark #investor-trend-widget .itw-val-pos { color: #e8776d !important; }
html.dark #investor-trend-widget .itw-val-neg { color: #6ea8e8 !important; }
html.dark #investor-trend-widget .itw-row-sum td { background: rgba(245, 239, 224, 0.08) !important; border-color: rgba(245, 239, 224, 0.25) !important; }
html.dark #investor-trend-widget .itw-row-sum .itw-td-date { color: #F5EFE0 !important; }