:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --panel-header: #fafbfc;
  --border: #e2e4ea;
  --row-border: #edeef2;
  --hover: #f3f4f7;
  --input-bg: #ffffff;
  --text: #1a1b25;
  --text-dim: #6b7280;

  --red: #dc2626;
  --red-bg: #fee2e2;
  --green: #16a34a;
  --blue: #2563eb;
  --blue-bg: #dbeafe;
  --yellow: #b45309;
  --yellow-bg: #fef3c7;
  --orange-bg: #ffedd5;
  --orange-text: #c2410c;

  --selected-bg: #eff6ff;
}

* {
  box-sizing: border-box;
}

html, body {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Malgun Gothic", "Segoe UI", sans-serif;
  font-size: 13px;
}

/* ---- 로그인 화면 ---- */
.login-wrap {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 40px;
  width: 320px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.login-box h1 {
  font-size: 18px;
  margin: 0 0 24px;
  text-align: center;
  color: var(--text);
}

.login-box input {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
}

.login-box button {
  width: 100%;
  padding: 10px;
  background: var(--blue);
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 14px;
  cursor: pointer;
  margin-top: 8px;
}

.login-box button:hover {
  opacity: 0.9;
}

.login-error {
  color: var(--red);
  font-size: 12px;
  margin-top: 8px;
  min-height: 16px;
}

.login-toggle {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  margin-top: 4px;
}

.login-toggle a {
  color: var(--blue);
}

/* ---- 대시보드: 위에서 아래로 쌓이는 구조 (뉴스 → VI → [신호|차트] → 리포트) ---- */
.dashboard {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topbar {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  background: var(--panel-header);
  border-bottom: 1px solid var(--border);
  gap: 14px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar .title {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}

.topbar .meta {
  font-size: 12px;
  color: var(--text-dim);
}

.topbar .status {
  font-size: 12px;
  color: var(--text-dim);
}

/* Boss 요청으로 기준일/이메일·연결상태 텍스트는 숨기고, 그 대신 VI 발동 종목을
   상단바 가운데에 크게 보여준다(2026-09-10). */
.topbar .meta,
.topbar .status {
  display: none;
}

/* 상단바 코스피/코스닥/환율/나스닥/SOX/수급 요약 칩(Boss 요청, 2026-09-17 — "늘려서
   이쁘게, 가로 스크롤 없게"). 실제 여유 공간이 충분해서 max-width 제한을 없애고
   내용만큼 자연스럽게 넓어지게 두되, 정말 좁은 창일 때만의 안전장치로 overflow-x는
   남겨둔다. */
.market-overview {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  white-space: nowrap;
  font-size: 12.5px;
  scrollbar-width: none;
}

.market-overview::-webkit-scrollbar {
  display: none;
}

/* 박스 없이 세로 구분선(│)만으로 나열(Boss 요청, 2026-09-17 — "박스 없애, 안이쁘다").
   "ㅣ" 글자로 바꿔봤다가 Boss가 원래 이 얇은 선 스타일이 마음에 든다고 해서
   되돌림(2026-09-21 — "아니아니 이 칸막이로 하고싶다고"). */
.market-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  flex-shrink: 0;
  padding-right: 12px;
  border-right: 1px solid var(--border);
}

.market-chip:last-child {
  padding-right: 0;
  border-right: none;
}

.market-chip-name {
  color: var(--text-dim);
  font-size: 11.5px;
}

.market-chip-value {
  color: var(--text);
  font-weight: 700;
}

.market-chip-change.up {
  color: var(--red);
}

.market-chip-change.down {
  color: var(--blue);
}

/* 외국인/기관 칩만 클릭 가능(호버하면 매수/매도 상위 요약 툴팁, 클릭하면 전체 —
   Boss 요청, 2026-09-17). */
#investorTrendChip {
  cursor: pointer;
}

.topbar .spacer {
  flex: 1;
}

.topbar button {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
}

.topbar button:hover {
  color: var(--text);
  border-color: var(--text-dim);
}

.content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
}

/* 추천시그널 칸이 좁아지면 헤더 글자가 세로로 쪼개져 보였다(Boss 지적, 2026-09-17
   — "칸이 작아질수록 등락/률 이렇게 나와") — 칸 자체를 넓혀서 해결(Boss 요청 —
   "추천시그널 칸자체를 오른쪽으로 늘릴수있지"). */
.split-row {
  display: grid;
  /* 실시간조회순위 | 종베신호 | 차트 한 줄로(Boss 요청, 2026-09-21 — "칸 두칸으로
     나누지말고... 한줄로 넣어"). fr 비율로 맞추면 표 칸 폭(진입가/익절가/손절가 등)을
     바꿀 때마다 표보다 넓어서 남는 여백이 생기거나(Boss 지적 — "너무 늘렸잖아"),
     반대로 좁아서 가로 스크롤이 생기는(Boss 지적 — "왜 스크롤 생겨") 일이 반복됐다.
     종베신호 표의 실제 칸 폭 합(추천시간50+테마90+기법88+종목명90+진입가/익절가/
     손절가70×3+등락률55+리포트36+결과56 ≈ 675px) + 세로 스크롤바(~15px) + 패널
     테두리 기준으로 딱 맞는 고정폭을 주고, 차트가 나머지 전부(1fr)를 가져가게 한다.
     이후 표 칸 폭을 또 바꾸면 이 값도 같이 조정해야 함(진입가 등 110→90→80→70px로
     줄어서 820→760→730→700px로 같이 줄임, Boss 요청 2026-09-21). */
  grid-template-columns: 260px 700px 1fr;
  gap: 14px;
}

/* 실시간 뉴스·공시 | 강한호재 | 상한가시그널 | 수급테마. VI종목 패널을 없앴다가
   (Boss 요청, 2026-09-18 — "Vi없애자 의미없는거같아") 그 자리에 강한호재 패널을
   테스트로 다시 넣음(Boss 요청 — "그걸 강한호재로 넣어보자") — 폭은 원래 VI종목
   자리 그대로 재사용. 테마 칸은 순위 목록 + 선택한 테마의 종목 상세를 옆으로
   나란히 보여줘야 해서 폭을 넉넉히 고정으로 잡고, 나머지는 뉴스에 몰아준다. */
.theme-news-row {
  display: grid;
  /* 뉴스 줄이고 상한가시그널 늘려달라는 요청(Boss, 2026-09-21) — 뉴스는 1fr이라
     자동으로 줄어들고, 상한가시그널(세 번째 칸) 고정폭만 260→340으로 늘림. 이어서
     강한호재(두 번째 칸)도 줄여달라는 요청(2026-09-21)으로 260→220. */
  grid-template-columns: 1fr 220px 340px 560px;
  gap: 14px;
  align-items: start;
}

/* 수급테마 패널 안: 왼쪽 순위 목록 | 오른쪽 선택한 테마 상세 (아래로 쌓지 않고 옆으로).
   높이는 app.js의 applyNewsHeight()가 실시간 뉴스 줄 수와 항상 맞춰서 정해준다 —
   테마를 클릭해도 이 높이는 그대로 고정, 종목이 많으면 안쪽에서만 스크롤. */
.theme-panel-flex {
  display: flex;
  align-items: stretch;
}

/* 상한가시그널 패널 — 단계/종목명/등락율/사유를 별도 칸으로 나눈 표(Boss 요청,
   2026-09-15 — 뉴스 패널에 끼워넣지 말고 아예 칸을 나눠달라고 함). table.signals와
   같은 형식. */
/* table-layout: fixed + 칸별 고정 width — 내용이 없어서 "없음" 한 줄만 있을 때도
   칸 너비가 줄어들지 않게(Boss 요청, 2026-09-15 — "칸 크기는 고정값으로 냅둬",
   auto 레이아웃이었을 땐 빈 표일 때 너비가 내용 기준으로 다시 잡혀서 문제였음). */
table.vi-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 12px;
}

table.vi-table th:nth-child(1) {
  width: 40px;
}

table.vi-table th:nth-child(2) {
  width: 96px;
}

/* 상한가시그널은 "대장" 배지까지 같이 들어가서 96px로는 이름이 2~3자만에 잘렸다
   (Boss 지적, 2026-09-21 — "종목명이 너무 안보여 3~5글자는 보여야해"). 이후 결과
   칸이 추가되면서 다시 좁힌다(Boss 요청, 2026-09-21 — "사유 옆에 종목명 가로길이
   좀 줄이고"). */
#limitUpPanelBody table.vi-table th:nth-child(2) {
  width: 100px;
}

/* 결과(상근접/이탈) 칸 — "▲상근접"/"▼이탈" 기준으로 고정폭(Boss 요청,
   2026-09-21 — "상한가시그널 결과 좀 늘려"로 56px→76px, 이후 단어 "상승중"→"상근접",
   "하락"→"이탈"로 수정). */
#limitUpPanelBody table.vi-table th:nth-child(5),
#limitUpPanelBody table.vi-table td:nth-child(5) {
  width: 76px;
}

table.vi-table th:nth-child(3) {
  width: 64px;
}

/* 사유 칸은 나머지 폭을 그대로 채운다(4번째 칸만 width 미지정 — table-layout:fixed가
   남은 폭을 자동으로 준다). 클릭해서 팝업으로 보던 걸 그냥 바로 보이게 해서(Boss
   요청, 2026-09-18 — "사유를... 그냥 보이게해줘") 길면 줄바꿈되게 nowrap을 뺀다. */
table.vi-table td.vi-col-reason {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

/* 등급 배지 위에 마우스 올리면 기준표 팝업 — 지금 이 배지랑 같은 등급 줄만 빨갛게
   표시해달라는 요청(Boss, 2026-09-20). 팝업이 td의 overflow:hidden에 안 잘리게
   이 칸만 overflow:visible로 푼다(vi-col-reason과 같은 패턴). */
table.vi-table td.vi-col-grade {
  overflow: visible;
}
.limitup-tag-wrap {
  position: relative;
  display: inline-block;
}
/* 표가 스크롤 컨테이너(.panel-body, overflow) 안에 있어서 position:absolute로는
   부모 영역에 잘린다(Boss 지적 — "봐봐 또 짤리잖아") — 위 .signal-tag-filter-menu와
   같은 방식으로 position:fixed + JS에서 좌표 계산(document.body에 붙는 공용 엘리먼트
   하나를 mouseover마다 재사용, app.js 참고). display는 JS가 켜고 끈다. */
.limitup-grade-tooltip {
  display: none;
  position: fixed;
  z-index: 200;
  width: max-content;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-dim);
}
.limitup-grade-tooltip .grade-row {
  white-space: nowrap;
}
.limitup-grade-tooltip .grade-row.current {
  color: var(--red);
  font-weight: 700;
}

/* 종목명 앞 "대장" 마크 — 오늘 테마 대장주인 종목을 눈에 띄게(Boss 요청, 2026-09-20). */
.theme-leader-mark {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: 3px;
  padding: 0 3px;
  line-height: 1.4;
}

/* 대장/2등/3등 마크가 없는 행은 종목명이 있는 행보다 왼쪽으로 당겨져 보였다(Boss
   지적, 2026-09-21 — "대장이 아니더라도 종목명은 라인 맞춰줘"). 마크 배지(글자+테두리)를
   흉내내지 말고 그냥 같은 너비만큼 빈 칸으로 둔다(Boss 요청 — "대장 아니면 칸 비워"). */
.theme-leader-mark-placeholder {
  display: inline-block;
  width: 28px;
}

table.vi-table th {
  text-align: left;
  padding: 6px 10px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--panel);
  font-weight: 500;
  white-space: nowrap;
}

/* 세로 칸 구분선은 없애고 가로줄만(Boss 요청, 2026-09-15) — 스크롤바 옆 세로선은
   #viPanelBody/#limitUpPanelBody의 border-right로 따로 유지(수급테마 .theme-list-col과
   같은 패턴). */
table.vi-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--row-border);
  overflow: hidden;
  text-overflow: ellipsis;
}

table.vi-table th:last-child,
table.vi-table td:last-child {
  text-align: center;
}

table.vi-table th:first-child,
table.vi-table td:first-child,
table.vi-table th:nth-child(3),
table.vi-table td:nth-child(3) {
  text-align: center;
}

table.vi-table tr {
  cursor: pointer;
}

table.vi-table tr:hover {
  background: var(--hover);
}

table.vi-table td.vi-col-nowrap {
  white-space: nowrap;
}

.theme-list-col {
  flex: 0 0 220px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.theme-detail {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.panel-header {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: var(--panel-header);
  border-bottom: 1px solid var(--border);
  gap: 8px;
  flex-shrink: 0;
  /* 검색창/드롭셀이 없는 헤더(VI종목)가 있는 헤더(뉴스/수급테마)보다 낮아서, 패널
     본문 높이를 다 똑같이 맞춰도 패널 전체 밑선이 안 맞았다(Boss 지적, 2026-09-15 —
     "끝 라인 안맞지"). input/select가 있는 헤더 기준(41px)으로 다 고정. */
  min-height: 41px;
  box-sizing: border-box;
}

.panel-header .panel-title {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
}

/* 시장현황 바(market-chip)와 같은 얇은 세로선 구분자(Boss 요청, 2026-09-21 —
   "추천시그널에 ㅣ 이걸 교체해줘", 텍스트 "ㅣ" 글자 대신 이 스타일로). */
.title-divider {
  display: inline-block;
  width: 1px;
  height: 11px;
  background: var(--border);
  margin: 0 6px;
  vertical-align: middle;
}

.panel-header .hint {
  font-size: 10.5px;
  color: var(--text-dim);
  margin-left: auto;
}

/* 상한가시그널 패널 — 오늘 울린 전체 목록 보기 버튼(Boss 요청, 2026-09-18). */
.panel-header-icon-btn {
  margin-left: auto;
  background: transparent;
  border: none;
  font-size: 15px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  opacity: 0.75;
}

.panel-header-icon-btn:hover {
  opacity: 1;
}

.panel-header input[type="text"] {
  flex: 1;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  padding: 4px 8px;
  font-size: 12px;
}

.panel-header select {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-dim);
  padding: 3px 6px;
  font-size: 11px;
}

/* 기법(매매법) 필터 — "테마"/"종목명"처럼 칸엔 글자만 두고, 옆에 작은 세모만
   눌러서 여러 개 고르는 팝오버를 연다(Boss 요청, 2026-09-16 — "테마 종목명같이
   글자만쓰고 그 옆에 드롭셀 아래세모 넣으면 안되"). 팝오버는 position:fixed로
   화면 좌표에 직접 배치(JS에서 세모 위치 기준으로 top/left 계산) — 표가 스크롤
   컨테이너(.panel-body, overflow-y:auto) 안 sticky 헤더에 있어서 position:absolute면
   부모 스크롤 영역에 잘려 안 보이거나 클릭이 씹히는 문제가 있었다(Boss 지적 —
   "드롭셀 안눌려"). */
.signal-tag-filter-th {
  position: static;
}

.signal-tag-filter-arrow {
  display: inline-block;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 10px;
  padding: 2px 3px;
  user-select: none;
}

.signal-tag-filter-arrow.active {
  color: var(--blue);
  font-weight: 700;
}

.signal-tag-filter-menu {
  position: fixed;
  z-index: 200;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  white-space: nowrap;
}

.signal-tag-filter-menu label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: normal;
  color: var(--text);
  cursor: pointer;
}

.signal-tag-filter-all {
  padding-bottom: 4px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}

.panel-body {
  overflow-y: auto;
}

/* 뉴스/공시 리스트 */
.news-row {
  display: flex;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--row-border);
  font-size: 12px;
  align-items: baseline;
  border-left: 3px solid transparent;
  cursor: pointer;
}

.news-row:hover {
  background: var(--hover);
}

.news-row.tag-strong {
  border-left-color: var(--red);
  background: rgba(220, 38, 38, 0.05);
}

.news-row.tag-bad {
  border-left-color: var(--blue);
  background: rgba(37, 99, 235, 0.05);
}

.news-row.tag-medium {
  border-left-color: var(--orange-text);
}

.news-time {
  color: var(--text-dim);
  width: 68px;
  flex-shrink: 0;
  font-size: 11px;
}

/* 날짜 칸을 고정폭으로 둬서, 날짜가 있을 때(09/18)와 없을 때 시간(18:28) 숫자
   위치가 안 밀리게 한다(Boss 요청, 2026-09-19). */
.news-date-part {
  display: inline-block;
  width: 30px;
}

/* 태그 자리 자체는 항상 고정폭 — 있든없든 뒤에 오는 종목명/출처 위치가 안 밀리게 */
.news-tag-slot {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}

.news-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  width: 15px;
  height: 15px;
  line-height: 15px;
  border-radius: 3px;
  text-align: center;
}

.news-tag.strong {
  background: var(--red-bg);
  color: var(--red);
}

.news-tag.bad {
  background: var(--blue-bg);
  color: var(--blue);
}

.news-tag.medium {
  background: var(--orange-bg);
  color: var(--orange-text);
}

/* 상한가시그널 패널 등급 배지(S급/A급/B급) — 토스트와 같은 3단계 색 강도를
   작은 뱃지로(Boss 요청, 2026-09-17, 패널 분리 겸). 글자가 2자라 news-tag의 고정
   15px 정사각형 대신 내용만큼 넓어지는 별도 클래스로 뺐다. */
.limitup-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
}

.limitup-tag.toast-limitup-watch {
  background: var(--red-bg);
  color: var(--red);
}

.limitup-tag.toast-limitup-approach {
  background: var(--orange-text);
  color: #fff;
}

.limitup-tag.toast-limitup-imminent {
  background: var(--red);
  color: #fff;
}

.news-source {
  color: var(--blue);
  width: 58px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-stock {
  color: var(--yellow);
  width: 84px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-title {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.tag-strong .news-title {
  color: var(--red);
}

.tag-bad .news-title {
  color: var(--blue);
}

/* 종베신호 테이블 */
#signalsPanelBody {
  max-height: 420px; /* 종목이 아주 많아지면 이 칸 안에서만 스크롤, 페이지 전체는 안 늘어남 */
}

/* 실시간조회순위 — 종베신호/차트와 한 줄, 왼쪽 고정폭 칸(Boss 요청, 2026-09-21 —
   "칸 두칸으로 나누지말고... 한줄로 넣어"). 종베신호(#signalsPanelBody)와 높이를 맞춘다. */
#realtimeRankPanelBody {
  max-height: 420px;
  overflow-y: auto;
}
#realtimeRankPanelBody table.vi-table th:nth-child(4) {
  width: 56px;
}

#viPanelBody,
#limitUpPanelBody {
  /* 수급테마(.theme-list-col)와 같은 패턴 — 스크롤바 바로 앞에 세로 경계선
     (Boss 요청, 2026-09-15, 수급테마 예시 스크린샷으로 확인). */
  border-right: 1px solid var(--border);
}

/* 실시간 뉴스·공시(1번 패널)에도 같은 패턴 적용(Boss 요청, 2026-09-15 —
   "세로줄을 1번에 넣어봐", VI종목/수급테마엔 이미 있는데 뉴스만 없었음). */
#newsList {
  border-right: 1px solid var(--border);
}

#signalsPanelBody .stock-name {
  font-weight: 600;
}

/* 차트 칸은 비어있을 때(placeholder)도 실제 차트 높이만큼 자리를 차지하게 —
   그래야 옆 종베신호 칸도 처음부터 그 높이만큼 커 보임(그리드가 같은 줄의 두 칸 높이를 맞춰줌) */
.chart-container {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  flex: 1;
}

.chart-ma-legend {
  position: absolute;
  top: 6px;
  left: 10px;
  z-index: 2;
  display: flex;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
}

/* B/손절/익절 마커 글자를 굵게 해달라는 요청(Boss, 2026-09-18) — 차트 라이브러리가
   마커별 글자 굵기를 지원하지 않아서, 마커 글자는 비우고 이 오버레이에 직접 굵게
   그린다. 라이브러리 내부 캔버스가 z-index 2까지 쓰는 걸 확인해서 그 위로 둠. */
.chart-marker-labels {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  font-family: "Malgun Gothic", "Segoe UI", sans-serif;
}

#chartBody {
  height: 100%;
}

/* 차트 헤더: 종목명 옆에 현재가·등락(%) — 상승 빨강/하락 파랑 */
.chart-header {
  flex-wrap: wrap;
  row-gap: 4px;
}

.chart-price-info {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}

.chart-price-info.up {
  color: var(--red);
}

.chart-price-info.down {
  color: var(--blue);
}

.chart-price-extra {
  color: var(--text);
  font-weight: 500;
}

/* 차트 툴바: 기간 탭(분/일/주/월/년) + 그리기 도구 */
.chart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: var(--panel-header);
  border-bottom: 1px solid var(--border);
  gap: 8px;
  flex-shrink: 0;
}

.chart-toolbar-left,
.chart-toolbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.chart-minute-select {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-dim);
  padding: 3px 4px;
  font-size: 11px;
  margin-right: 4px;
}

.chart-period-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 11.5px;
}

.chart-period-btn:hover {
  background: var(--hover);
  color: var(--text);
}

.chart-period-btn.active {
  background: var(--selected-bg);
  color: var(--blue);
  font-weight: 600;
}

.chart-tool-btn {
  background: transparent;
  border: 1px solid transparent;
  padding: 3px 6px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}

.chart-tool-btn:hover {
  background: var(--hover);
}

.chart-tool-btn.active {
  background: var(--selected-bg);
  border-color: var(--blue);
}

/* 이동평균선 설정 팝업 (톱니바퀴 클릭 시 차트 위에 떠서 나타남) */
.chart-ma-settings {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 10px;
  width: 210px;
  font-size: 12px;
}

.chart-ma-settings-title {
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text);
}

.chart-ma-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.chart-ma-row input[type="number"] {
  width: 48px;
  padding: 3px 5px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--input-bg);
  color: var(--text);
  font-size: 12px;
}

.chart-ma-row input[type="color"] {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: none;
  cursor: pointer;
}

.chart-ma-row .chart-ma-label {
  color: var(--text-dim);
  flex: 1;
}

.chart-ma-row .chart-ma-remove {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
}

.chart-ma-row .chart-ma-remove:hover {
  color: var(--red);
}

.chart-ma-add-btn {
  width: 100%;
  background: var(--hover);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-dim);
  padding: 5px;
  cursor: pointer;
  font-size: 11.5px;
}

.chart-ma-add-btn:hover {
  color: var(--text);
}

/* 수급테마 랭킹 테이블 */
/* 높이는 app.js의 applyNewsHeight()가 뉴스 줄 수 선택에 맞춰 인라인으로 설정함 */

table.theme-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

table.theme-table th {
  text-align: left;
  padding: 6px 8px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--panel);
  font-weight: 500;
  /* "순위"가 두 줄로 쪼개져서 보였다(Boss 지적, 2026-09-15) — 헤더는 항상 한 줄로. */
  white-space: nowrap;
}

table.theme-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--row-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
}

table.theme-table tr:hover {
  background: var(--hover);
  cursor: pointer;
}

table.theme-table .theme-rank {
  color: var(--text-dim);
  width: 32px;
}

table.theme-table .theme-change.up {
  color: var(--red);
  font-weight: 600;
}

table.theme-table .theme-change.down {
  color: var(--blue);
  font-weight: 600;
}

table.theme-table tr.theme-surge {
  background: var(--red-bg);
}

table.theme-table tr.theme-surge:hover {
  background: var(--red-bg);
  filter: brightness(0.97);
}

.theme-matched-stock {
  font-size: 10.5px;
  color: var(--text-dim);
  font-weight: 400;
}

.theme-search-status {
  text-align: center;
  color: var(--text-dim);
  padding: 14px 8px;
  font-size: 12px;
  white-space: normal;
}

/* 테마 클릭 시 아래로 펼쳐지는 상세(그 테마에 속한 종목 전체 + 편입 사유) */
.theme-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--panel-header);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

.theme-detail-header button {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 13px;
}

.theme-detail-header button:hover {
  color: var(--text);
}

.theme-detail-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.theme-stock-row {
  padding: 8px 12px;
  border-bottom: 1px solid var(--row-border);
  cursor: pointer;
}

.theme-stock-row:hover {
  background: var(--hover);
}

.theme-stock-row .theme-stock-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
}

.theme-stock-row .theme-stock-name {
  font-weight: 600;
  color: var(--text);
}

.theme-stock-row .theme-stock-price {
  margin-left: auto;
}

.theme-stock-row .theme-stock-change.up {
  color: var(--red);
}

.theme-stock-row .theme-stock-change.down {
  color: var(--blue);
}

.theme-stock-row .theme-stock-volume {
  color: var(--text-dim);
  font-size: 11px;
}

.theme-stock-row .theme-stock-desc {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.theme-tag {
  display: inline-block;
  font-size: 10px;
  color: var(--text-dim);
  background: var(--hover);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  margin-right: 4px;
  /* 테마명이 길면("바이오인식(생체인식)" 등) 칸 전체가 그 길이에 맞춰 넓어져서
     대부분 "-"인 다른 행까지 다 넓어졌다(Boss 지적, 2026-09-15) — 말줄임표로
     잘라서 칸 너비를 좁게 유지한다. 전체 이름은 title 툴팁으로 확인 가능. */
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.signal-pair-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: var(--red);
  background: var(--red-bg);
  border-radius: 3px;
  padding: 1px 5px;
  margin-right: 4px;
}

table.signals {
  /* width:auto인데도 패널이 넓어질 때마다 칸들이 같이 늘어났다(Boss 지적, 2026-09-21
     — "오잉 왜 전체 늘어났어") — auto-layout 표는 컨테이너가 표 내용보다 넓으면
     그 여유 폭을 칸들에 비례 배분해버린다(각 칸에 px를 지정해도 auto 레이아웃에선
     "힌트"일 뿐이라 소용없음). max-content로 표 자체 폭은 고쳤지만, table-layout이
     여전히 auto라 긴 종목명이 들어오면 그 칸(4번)이 지정폭(90px)을 무시하고 계속
     넓어졌다(Boss 지적 — "종목명이 진입가보다 더 길어") — table-layout: fixed를
     같이 줘야 칸 폭이 내용과 무관하게 지정한 px 그대로 강제된다(vi-table이 이미
     쓰는 방식과 동일). */
  width: max-content;
  table-layout: fixed;
  max-width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

table.signals th {
  text-align: center;
  padding: 6px 10px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--panel);
  font-weight: 500;
  white-space: nowrap;
}

table.signals td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--row-border);
  border-right: 1px solid var(--row-border);
}

table.signals th:last-child,
table.signals td:last-child {
  border-right: none;
}

/* 테마/매매법/종목명이 칸마다 줄바꿈되면 행 높이가 들쭉날쭉해진다(Boss 지적,
   2026-09-15) — 각 칸을 한 줄로 붙여서 표 줄이 가지런히 보이게 한다. */
table.signals td.signal-col-nowrap {
  white-space: nowrap;
}

/* 테마 배지(.theme-tag, max-width 68px)만큼만 칸을 차지하게(Boss 요청, 2026-09-21 —
   "테마를 안에 박스에 맞게 가로길이 수정"). */
table.signals th:nth-child(2),
table.signals td:nth-child(2) {
  width: 90px;
  max-width: 90px;
  padding-left: 6px;
  padding-right: 6px;
}

/* 매매법/종목명은 좁게, 숫자 칸(진입가~손절가)은 오른쪽 정렬하며 넓게, 등락률/리포트는
   가운데 정렬하며 넓게(Boss 요청, 2026-09-15). 열 순서가 고정이라 nth-child로 지정. */
table.signals th:nth-child(3),
table.signals td:nth-child(3) {
  /* 가장 긴 기법("🔊 거래량폭증")이 안 잘리고 딱 맞는 폭(Boss 요청, 2026-09-21 —
     "기법은 제일 긴 기법을 대상으로 가로 길이 맞추고"). 다른 기법이 뜰 때마다
     칸 폭이 들쭉날쭉하지 않게 이 폭으로 고정. */
  width: 88px;
  max-width: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
  /* "테마"와 사이 세로선이 빠져 보이는 문제(Boss 지적, 2026-09-16) — sticky 헤더 +
     border-collapse 조합에서 이 칸(팝오버 자식 있는 th)만 병합된 경계선이 간혹 안
     그려져서, 왼쪽 경계를 이 칸 쪽에서도 직접 그어 확실히 보이게 한다. */
  border-left: 1px solid var(--border);
}

table.signals th:nth-child(3),
table.signals td:nth-child(3),
table.signals th:nth-child(4),
table.signals td:nth-child(4) {
  padding-left: 6px;
  padding-right: 6px;
}

/* 종목명 칸이 표 너비만큼 제멋대로 늘어졌다(Boss 지적, 2026-09-21 — "종목명은
   줄여야지") — 종베신호 칸이 넓어진 만큼 다른 칸(폭 지정 없음)이 그 여유를 다
   가져가버린 것. 적당한 폭으로 고정하고 넘치면 말줄임표. */
table.signals th:nth-child(4),
table.signals td:nth-child(4) {
  width: 90px;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 진입가/익절가/손절가는 999만원대까지("9,999,999") 들어갈 폭(Boss 요청, 2026-09-21 —
   "100만원단위에 맞게 가로길이 줄여", 이후 "9,999,999 길이에 맞게 늘려"로 76px→92px→70px).
   목차(th)는 가운데, 숫자(td)는 오른쪽 정렬로 분리(Boss 요청, 2026-09-21 — "목차는
   가운데정렬 내비두고, 숫자만 오른쪽정렬"). */
table.signals th:nth-child(5),
table.signals th:nth-child(6),
table.signals th:nth-child(7) {
  text-align: center;
}

table.signals th:nth-child(5),
table.signals td:nth-child(5),
table.signals th:nth-child(6),
table.signals td:nth-child(6),
table.signals th:nth-child(7),
table.signals td:nth-child(7) {
  width: 70px;
  padding-left: 8px;
  padding-right: 8px;
}

table.signals td:nth-child(5),
table.signals td:nth-child(6),
table.signals td:nth-child(7) {
  text-align: right;
}

table.signals th:nth-child(8),
table.signals td:nth-child(8),
table.signals th:nth-child(9),
table.signals td:nth-child(9),
table.signals th:nth-child(10),
table.signals td:nth-child(10) {
  text-align: center;
  padding-left: 16px;
  padding-right: 16px;
}

/* 결과(진/익절/손절/종가익절/종가손절)가 뭐가 뜨든 안 잘리게 가장 긴 값
   ("종가익절"/"종가손절", 4글자) 기준으로 넓힌다(Boss 요청, 2026-09-21 —
   "결과 진, 익절, 손절 에 맞게 가로길이 늘려"). */
table.signals th:nth-child(10),
table.signals td:nth-child(10) {
  width: 60px;
}

/* 결과 칸의 익/손만 진하게(Boss 요청, 2026-09-21) — tp-price/sl-price 자체를
   bold로 바꾸면 익절가/손절가 숫자 칸과 외·기·프 모달까지 같이 굵어지므로,
   이 칸(nth-child 10)에서만 굵게 적용. */
table.signals td:nth-child(10).tp-price,
table.signals td:nth-child(10).sl-price {
  font-weight: 700;
}

/* 추천시간/등락률/리포트/결과 칸은 내용(시:분 5글자, 아이콘 1개, "상한가 진입" 등)에
   비해 너무 넓었다(Boss 지적, 2026-09-18 — "글자크기에 맞게 가로세로 맞게 줄여줘").
   table-layout: fixed로 바꾸면서(2026-09-21) width:1%는 "표 폭의 1%"로 그대로
   강제돼 글자가 잘리므로, 내용에 맞는 실제 px로 바꿨다. */
table.signals th:nth-child(1),
table.signals td:nth-child(1) {
  width: 50px;
  white-space: nowrap;
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
}

table.signals th:nth-child(8),
table.signals td:nth-child(8) {
  width: 55px;
  white-space: nowrap;
  padding-left: 10px;
  padding-right: 10px;
}

table.signals th:nth-child(9),
table.signals td:nth-child(9) {
  width: 36px;
  white-space: nowrap;
  padding-left: 6px;
  padding-right: 6px;
}

table.signals th:nth-child(10),
table.signals td:nth-child(10) {
  width: 56px;
  white-space: nowrap;
  padding-left: 10px;
  padding-right: 10px;
}

table.signals tr:hover {
  background: var(--hover);
  cursor: pointer;
}

table.signals tr.selected {
  background: var(--selected-bg);
}

/* 익절=빨강(상승), 손절=파랑(하락) — 한국 증시 관례 */
.tp-price {
  color: var(--red);
}

.sl-price {
  color: var(--blue);
}

.report-icon-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 14px;
  padding: 2px 6px;
}

.report-icon-btn:hover {
  color: var(--text);
}

/* 리포트 패널 */
.report-empty {
  color: var(--text-dim);
  padding: 20px;
  text-align: center;
  font-size: 12px;
}

.report-body {
  padding: 14px;
}

.report-body h2 {
  font-size: 15px;
  margin: 0 0 4px;
}

.report-name-theme {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-dim);
}

.report-body .report-code {
  color: var(--text-dim);
  font-size: 12px;
  margin-bottom: 14px;
}

.report-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  margin-bottom: 16px;
}

.report-grid .label {
  color: var(--text-dim);
  font-size: 11.5px;
}

.report-grid .value {
  font-size: 13px;
}

/* VI/강력이슈 토스트 알림 — 우측 상단에 쌓임(Boss 요청, 2026-09-17 — "VI, 강력이슈
   우측 상단에 쌓이게"). 상단바(topbar)에 안 가리게 그 아래부터 시작. */
.toast-container {
  position: fixed;
  top: 56px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 999;
}

/* 상한가시그널 전용 — 상단 중앙에서 아래로 쌓임(Boss 요청, 2026-09-17 — "상한가시그널만
   상단 중앙 아래로 쌓이게"). */
.toast-container-limitup {
  top: 56px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  align-items: center;
}

.toast {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--red);
  border-left: 4px solid var(--red);
  border-radius: 6px;
  padding: 12px 16px;
  width: 280px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  animation: slide-in 0.25s ease-out;
}

.toast-close {
  position: absolute;
  top: 4px;
  right: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1;
  padding: 2px;
}
.toast-close:hover {
  color: var(--text);
}

@keyframes slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast .toast-title {
  font-weight: 600;
  color: var(--red);
  font-size: 12.5px;
  margin-bottom: 4px;
}

.toast .toast-body {
  font-size: 12px;
  color: var(--text-dim);
  white-space: pre-line;
}

.toast.toast-info {
  border-color: var(--blue);
  border-left-color: var(--blue);
}

.toast .toast-title-info {
  color: var(--blue);
}

/* 강한 호재 매칭이 아닌 VI 발동 알림 — 빨강(강한 매칭)보다 톤 낮춰서 구분 */
.toast.toast-vi-normal {
  border-color: var(--yellow);
  border-left-color: var(--yellow);
}

.toast .toast-title-vi-normal {
  color: var(--yellow);
}

/* 상한가시그널 3단계 — 관심(연하게)/접근(조금 강조)/임박(눈에 확 띄게), Boss 요청
   2026-09-17. 접근·임박 단계만 꽉 찬 배경+흰 글씨, 관심은 옅은 톤. 사유 문장이 길어서
   기존 폭(280~320px)에선 두 줄로 꺾였다(Boss 지적, 2026-09-18 — "두줄말고 한줄로해.
   가로세로 더 길게") — 세 단계 다 넉넉한 폭 + 줄바꿈 금지로 통일. */
.toast.toast-limitup-watch,
.toast.toast-limitup-approach,
.toast.toast-limitup-imminent {
  width: 560px;
  padding: 16px 20px;
}
.toast.toast-limitup-watch .toast-title,
.toast.toast-limitup-approach .toast-title,
.toast.toast-limitup-imminent .toast-title,
.toast.toast-limitup-watch .toast-body,
.toast.toast-limitup-approach .toast-body,
.toast.toast-limitup-imminent .toast-body {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast.toast-limitup-watch {
  background: var(--red-bg);
  border: 1px solid var(--red);
}
.toast.toast-limitup-watch .toast-title {
  color: var(--red);
}

.toast.toast-limitup-approach {
  background: var(--orange-text);
  border: none;
}
.toast.toast-limitup-approach .toast-title {
  color: #fff;
}
.toast.toast-limitup-approach .toast-body {
  color: rgba(255, 255, 255, 0.92);
}
.toast.toast-limitup-approach .toast-close {
  color: rgba(255, 255, 255, 0.85);
}
.toast.toast-limitup-approach .toast-close:hover {
  color: #fff;
}

.toast.toast-limitup-imminent {
  background: var(--red);
  border: none;
  box-shadow: 0 4px 20px rgba(220, 38, 38, 0.4);
}
.toast.toast-limitup-imminent .toast-title {
  color: #fff;
}
.toast.toast-limitup-imminent .toast-body {
  color: rgba(255, 255, 255, 0.92);
}
.toast.toast-limitup-imminent .toast-close {
  color: rgba(255, 255, 255, 0.85);
}
.toast.toast-limitup-imminent .toast-close:hover {
  color: #fff;
}

/* 뉴스 클릭 시 뜨는 팝업 — 창처럼 보이게 (제목표시줄 + _ □ ✕), 바깥 클릭하면 닫힘 */
.news-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.news-modal {
  width: 520px;
  max-width: 92vw;
  max-height: 80vh;
  background: var(--panel);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
}

.news-modal.maximized {
  width: 92vw;
  height: 92vh;
  max-height: 92vh;
}

.news-modal-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--panel-header);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.news-modal-source {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
}

.news-modal-controls {
  display: flex;
  gap: 2px;
}

.news-modal-controls button {
  width: 26px;
  height: 22px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1;
}

.news-modal-controls button:hover {
  background: var(--hover);
  color: var(--text);
}

#newsModalCloseBtn:hover {
  background: var(--red);
  color: #fff;
}

.news-modal-body {
  padding: 16px 18px;
  overflow-y: auto;
}

.news-modal-body h2 {
  font-size: 16px;
  margin: 0 0 8px;
  line-height: 1.4;
}

.news-modal-meta {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 14px;
}

.news-modal-content {
  font-size: 13px;
  line-height: 1.6;
}

.news-modal-summary {
  background: var(--hover);
  border-radius: 6px;
  padding: 12px 14px;
}

.news-modal-summary-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.news-modal-summary p {
  margin: 0;
  color: var(--text);
}

/* 10개는 바로 보이고 더 많은 종목은 스크롤로(Boss 요청, 2026-09-20) — 행 높이
   기준 대략 10줄(헤더+10행)만큼만 높이를 주고 넘치면 세로 스크롤. */
.investor-rank-scroll {
  max-height: 320px;
  overflow-y: auto;
}

/* 외국인·기관 순매수 상위 모달 표(Boss 요청, 2026-09-17). */
table.investor-rank-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

table.investor-rank-table th {
  text-align: right;
  padding: 5px 10px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  font-weight: 500;
  white-space: nowrap;
}

table.investor-rank-table th:first-child,
table.investor-rank-table td:first-child {
  text-align: left;
}

table.investor-rank-table td {
  padding: 5px 10px;
  text-align: right;
  border-bottom: 1px solid var(--row-border);
  white-space: nowrap;
}

table.investor-rank-table td.up,
table.vi-table td.up {
  color: var(--red);
  font-weight: 600;
}

table.investor-rank-table td.down,
table.vi-table td.down {
  color: var(--blue);
  font-weight: 600;
}

.news-modal-related {
  margin-top: 10px;
  background: var(--hover);
  border-radius: 6px;
  padding: 12px 14px;
}

.news-modal-related ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text);
}

.news-modal-related li {
  margin-bottom: 4px;
  line-height: 1.4;
}

/* 안내문구/원문 링크는 본문보다 한두 단계 작게, 부가정보로 보이게 */
.news-modal-footer {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 11px;
}

.news-modal-footer .news-modal-link {
  display: inline-block;
  margin-bottom: 4px;
}

.news-modal-notice {
  color: var(--text-dim);
  margin: 0;
  font-size: 11px;
}

.news-modal-link {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}

.news-modal-link:hover {
  text-decoration: underline;
}

[hidden] {
  display: none !important;
}