:root {
  color-scheme: light;
  --bg: #f4f7f8;
  --panel: #ffffff;
  --row: #fbfcfc;
  --text: #1d2528;
  --muted: #68767c;
  --line: #dbe4e7;
  --chip: #eef4f6;
  --green: #18864b;
  --red: #FF3535;
  --red-soft: #E03535;
  --blue: #2768a8;
  --blue-down: #1f8fff;
  --chart-bg: #808080;
}

body[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101416;
  --panel: #171d20;
  --row: #20272b;
  --text: #ffffff;
  --muted: #e8eef1;
  --line: #344047;
  --chip: #2b363c;
  --green: #7ee2a8;
  --red: #FF6666;
  --red-soft: #FF5050;
  --chart-bg: #808080;
  --blue: #9ed8ff;
  --blue-down: #4cb3ff;
}

html {
  background: #f4f7f8; /* 라이트 모드 기본 배경 (다크모드는 JS에서 갱신) */
}
html[data-theme="dark"] {
  background: #101416;
}

/* [테스트] 매매후보 탭별 메인창 배경색 - 3일선 분홍/5일선 초록/10일선 파랑/20일선 노랑 */
body.tab-bg-ma3 { --bg: #fbe3f0; }
body.tab-bg-pullback { --bg: #e3f5ea; }
body.tab-bg-ma10 { --bg: #e0edf9; }
body.tab-bg-ma20 { --bg: #fbf3d0; }
body.tab-bg-weekly { --bg: #ece2fb; }
body.tab-bg-gap { --bg: #fdeede; }

body[data-theme="dark"].tab-bg-ma3 { --bg: #3a1a2e; }
body[data-theme="dark"].tab-bg-pullback { --bg: #123322; }
body[data-theme="dark"].tab-bg-ma10 { --bg: #122a44; }
body[data-theme="dark"].tab-bg-ma20 { --bg: #3a3210; }
body[data-theme="dark"].tab-bg-weekly { --bg: #2a1f42; }
body[data-theme="dark"].tab-bg-gap { --bg: #40290f; }

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", "Malgun Gothic", Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0;
  touch-action: pan-y manipulation;
  -webkit-text-size-adjust: 100%;
}

.hidden {
  display: none !important;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(10px);
}

.title-block {
  min-width: 0;
}

.title-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.casino-title {
  background: linear-gradient(90deg, #f9c74f, #f94144, #f8961e, #ff6bff, #f9c74f, #fffde7, #f9c74f);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: casino-shimmer 2.5s linear infinite;
}

@keyframes casino-shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 300% center; }
}

.market-label {
  font-size: 21px;
  font-weight: 760;
  line-height: 1.25;
}

.market-label.aggressive {
  color: #f9c74f;
}

.market-label.conservative {
  color: #42a5f5;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 21px;
  font-weight: 760;
}

h2 {
  font-size: 17px;
  font-weight: 740;
}

.clickable-heading {
  cursor: pointer;
  user-select: none;
}

.clickable-heading:hover {
  color: var(--blue);
  text-decoration: underline;
}

.clickable-heading.list-collapsed::after {
  content: " ▸";
  opacity: 0.6;
}
.clickable-heading:not(.list-collapsed)::after {
  content: " ▾";
  opacity: 0.6;
}

.chart-title-btn {
  min-width: 0;
  height: auto;
  max-width: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 17px;
  font-weight: 740;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-align: left;
}

.chart-title-btn:hover {
  color: var(--blue);
  text-decoration: underline;
}

.topbar p,
.panel-head span {
  color: var(--muted);
  font-size: 12px;
}

.metrics {
  color: var(--muted);
  font-size: 14px;
}

.actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

/* [2026-07-31 유저 요청] 헤더 버튼 3개(새로고침 / 테마지도 / 매매 채점)를 같은 크기로 3등분.
   매매 채점은 <a>라서 인라인 스타일을 index.html에서 걷어내고 여기서 버튼과 똑같이 맞춘다. */
.actions > #refreshBtn,
.actions > #themeMapHeaderBtn,
.actions > .journal-link,
.actions > #marketBriefBtn {
  flex: 1 1 0;
  min-width: 0;
  height: 36px;
  padding: 0 6px;
  font-size: 14px;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  text-align: center;
}
.actions > .journal-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
/* [2026-07-31 유저 요청] 헤더 버튼 3개 색상을 테마지도 버튼 색으로 통일
   [2026-09-10 유저] 시황도 여기 합류. 넷이 같은 색·같은 크기다. */
.actions > #refreshBtn,
.actions > #themeMapHeaderBtn,
.actions > .journal-link,
.actions > #marketBriefBtn {
  background: #1f2f3a;
  border: 1px solid #2b4250;
  color: #ffffff;
}

/* [2026-07-31 유저 요청] 보유종목은 헤드 없이 목록만 보여준다.
   되돌리려면 이 줄만 지우면 된다(요소는 DOM에 그대로 있어 JS는 영향 없음). */
#holdingsPanel > .panel-head { display: none; }

button {
  min-width: 76px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #17343d;
  border-radius: 6px;
  background: #17343d;
  color: white;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}

button:disabled {
  cursor: wait;
  opacity: 0.65;
}

button.secondary {
  border-color: var(--line);
  background: var(--panel);
  color: var(--text);
}

.stack {
  display: grid;
  gap: 14px;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 14px 10px 40px;
}

/* [2026-08-26 유저 요청] 윈도우 웹에서 가운데만 쓰고 양옆이 비어 어중간했다.
   유저 확정: 가로로 퍼뜨리지 말고(2단 X) 세로 한 줄 그대로 두되 폭만 늘린다.
   아이폰은 min(1180px, 100%) 그대로라 영향이 없다.
   패널 순서(CSS order)는 CASINO 설정이 정하므로 건드리지 않는다.
   차트는 오버레이(position: fixed)라 이 레이아웃과 무관하다. */
@media (min-width: 1280px) {
  .stack {
    width: min(1600px, 100%);
    padding: 16px 24px 48px;
  }
}
@media (min-width: 1800px) {
  .stack {
    width: min(2000px, 100%);
  }
}


.panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.panel-head {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.panel-head span {
  overflow-wrap: anywhere;
  text-align: right;
}

.holdings-summary {
  display: none;
}

/* 2026-07-12: 보유종목 패널 헤더(제목+업데이트 날짜) 숨겨 공간 절약 - 실계좌/모의투자 탭부터 시작.
   요소는 DOM에 남겨둠(JS가 holdingsUpdated/holdingsSummary에 값 세팅). 되살리려면 이 블록 제거. */
#holdingsPanel > .panel-head {
  display: none;
}
.holdings-summary span {
  font-size: 17px;
  font-weight: 740;
}
.holdings-summary .change-up,
.holdings-summary .change-down {
  font-size: 1.05em !important;
  font-weight: 300 !important;
  white-space: nowrap;
}
.holdings-table .change-up,
.holdings-table .change-down {
  font-size: 0.95em;
  font-weight: 300;
}

.holding-detail {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  padding-left: 2px;
}

.holdings-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* [2026-09-03 Qwen 요청] 맨 위 '오늘의 주의' 띠.
   평소엔 안 뜬다. 뜰 때는 매매후보보다 먼저 눈에 들어와야 해서 색을 채운다. */
/* [2026-09-09 Qwen 요청] 장중 경고 배너. 공지 띠 바로 위.
   색은 주식 색 기준이다 - 한국 증시에서 빨강은 상승·호재라 나쁜 소식이 파랑이다.
   공지 띠를 파랑으로 통일한 것과 같은 이유(아래 .notice-danger 주석).
     danger 진한 파랑 / warn 연한 파랑 / good 빨강
   expires_min 이 지나면 app.js 가 스스로 내린다 - 급락 경고가 다음날까지 붙어 있으면
   그 자체가 잘못된 지시가 된다(Qwen 요청서). */
/* [2026-09-16 유저] "주덕 시황만 주의 블럭처럼 상단에 기본으로" / "파란색 블럭 있잖아"
   아래 .qwen-alert-warn 과 같은 파랑을 쓴다 - 같은 자리에 나란히 서는 블럭이라
   색이 갈리면 둘이 다른 종류로 읽힌다. 여러 건이 와도 한 박스 안에 쌓는다. */
.judeok-brief {
  border-radius: 12px;
  padding: 11px 14px;
  background: #28528c;
  border: 1px solid #28528c;
  color: #fff;
}
.judeok-brief.hidden { display: none; }
.judeok-brief-head {
  font-size: 13px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 6px;
}
.judeok-item + .judeok-item {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
/* [2026-09-16 유저] "내용이 기니깐 상단 제목을 보여주고 터치하면 펼침, 다시 터치하면 접힘" */
.judeok-title {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.judeok-title.judeok-tap { cursor: pointer; }
.judeok-arrow {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 12px;
  opacity: 0.75;
}
.judeok-more { margin-top: 7px; }
.judeok-more.hidden { display: none; }
.judeok-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  white-space: pre-wrap;      /* Qwen 이 넣은 줄바꿈을 살린다 */
}
.judeok-tags {
  font-size: 12px;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.82);
}
.judeok-ev {
  font-size: 12.5px;
  margin-top: 4px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

.qwen-alert {
  border-radius: 12px;
  padding: 11px 14px;
  border: 1px solid transparent;
  color: #fff;
}
.qwen-alert.hidden { display: none; }
.qwen-alert-danger { background: #163d68; border-color: #163d68; }
.qwen-alert-warn   { background: #28528c; border-color: #28528c; }
.qwen-alert-good   { background: #b3261e; border-color: #b3261e; }
.qwen-alert-main {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}
.qwen-alert-note {
  font-size: 13px;
  line-height: 1.45;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.88);
}
.qwen-alert-at {
  font-size: 11px;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.6);
}

/* [2026-09-09 유저] "근거를 뉴스처럼 보여줘. alert 창 아래 박스로, 웹 열자마자
   오늘 어떤 테마를 매매해도 될지 볼 수 있게."
   읽는 순서대로 글자가 작아진다: 테마 이름 → 무슨 일 → 발언 → 근거 → 종목.
   종목이 제일 아래인 게 요점이다 - 근거를 먼저 읽고 종목으로 내려와야 판단이 선다. */
.fire-box { display: block; }
.fire-box.hidden { display: none; }
.fire-card {
  border-radius: 12px;
  padding: 14px 16px 12px;
  background: var(--card, #1a1f26);
  border: 1px solid rgba(139, 195, 74, 0.45);
  border-left: 4px solid #8bc34a;      /* 주도테마 머리띠와 같은 연두 */
}
.fire-card + .fire-card { margin-top: 10px; }
/* [2026-09-09 유저] 공지 띠처럼 접힌다. 접혀 있어도 제목과 '무슨 일'은 보인다 -
   그 둘이 "오늘 뭘 매매해도 되나"의 답이라 감추면 박스를 만든 뜻이 없다.
   전역 button 규칙(height:36px 등)이 머리줄을 눌러 자르므로 여기서 되돌린다. */
.fire-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  text-align: left;
  white-space: normal;
  cursor: pointer;
  color: inherit;
}
.fire-text { flex: 1 1 auto; min-width: 0; }
.fire-toggle {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--muted);
  padding-top: 2px;
}
.fire-body.hidden { display: none; }
.fire-body { margin-top: 10px; }

.fire-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #8bc34a;
  margin-bottom: 6px;
}
.fire-title {
  display: block;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text, #fff);
}
.fire-trigger {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text, #e8eaed);
}
.fire-remark {
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 4px;
  color: var(--muted);
}
.fire-when { opacity: 0.75; font-size: 11.5px; }
.fire-ev {
  font-size: 13px;
  line-height: 1.55;
  margin-top: 3px;
  color: var(--text, #d7dbe0);
}
.fire-entries {
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.fire-entries-head {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 5px;
}
.fire-entry {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  line-height: 1.75;
  font-variant-numeric: tabular-nums;
}
.fire-rank {
  flex: 0 0 auto;
  width: 17px;
  text-align: center;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.08);
}
.fire-name { flex: 1 1 auto; min-width: 0; font-weight: 700; }
.fire-num { flex: 0 0 auto; color: var(--muted); font-size: 12.5px; }
.fire-lead .fire-rank { background: #8bc34a; color: #14300a; }
.fire-warn {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}
/* [2026-09-09 유저] 카드는 3개까지만 그린다(FIRE_MAX_CARDS). 잘린 게 있으면
   몇 개인지는 밝힌다 - 조용히 감추면 없는 줄 안다. */
.fire-more {
  margin-top: 8px;
  padding: 6px 2px 0;
  font-size: 12px;
  color: var(--muted);
}

.notice-banner {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid transparent;
}
.notice-banner.hidden { display: none; }
/* [2026-09-03 유저] "안 좋은 건 파랑" - 한국 증시에서 빨강은 상승·호재로 읽힌다.
   [2026-09-09 유저] "등급으로 위험도를 색으로 나누는 것도 좋겠다. 근데 안 좋은 건 파랑으로."
   전에는 위험=파랑 / 주의=빨강이었는데, 이 띠에 뜨는 건 주의든 위험이든 전부 나쁜
   소식이다. 그런데 주의가 빨강이라 '호재'로 읽혔다(실측 09-09: 선물옵션 만기 +
   오버나잇 금지 경고가 빨강으로 떴다).
   이제 둘 다 파랑이고, 진하기로 위험도를 나눈다. 띠와 점은 늘 같은 색이다. */
/* [2026-09-09 유저] "배경색이 달라, 지금 올린 이미지 색상으로 수정해".
   올린 화면에서 실제 픽셀을 뽑으니 #28528C 였다(다섯 군데 동일). 안쪽 '뭘 해야 하나'
   상자가 #1E3F6C 인데 이게 #28528C 에 검정 22%(.notice-todo)를 덮은 값과 맞아떨어져
   진짜 렌더값임을 확인했다. 앞서 넣었던 #2a6a9a 는 청록 쪽이라 달라 보였다.
   위험은 한 단계 더 진하게 내려 등급 차이가 계속 읽히게 둔다. */
.notice-danger { background: #163d68; border-color: #163d68; }  /* 위험 - 더 진한 남색 */
.notice-warn   { background: #28528c; border-color: #28528c; }  /* 주의 - 유저 지정 색 */

/* 전역 button 규칙에 height:36px / white-space:nowrap 이 있어서(238행) 그냥 두면
   두 줄짜리 머리글이 36px 안으로 눌려 잘린다. 실측 - 안쪽 내용 55px, 상자 36px.
   여기서 되돌린다. */
.notice-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  height: auto;
  min-width: 0;
  white-space: normal;
  border-radius: 0;
  padding: 12px 14px;
  background: none;
  border: 0;
  color: #fff;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.notice-emoji { font-size: 20px; line-height: 1.2; flex: 0 0 auto; }
.notice-text { flex: 1 1 auto; min-width: 0; }
.notice-headline {
  display: block;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
}
/* [2026-09-09 유저] "위험 주의 글자 포함시켜봐".
   띠가 둘 다 파랑이 되면서 등급이 진하기로만 갈렸다 - 하나만 보면 어느 쪽인지 모른다.
   주의는 조용한 반투명 칩, 위험은 흰 바탕으로 뒤집어 확 띈다. 색과 글자가 같은 말을 한다. */
.notice-grade {
  display: inline-block;
  margin-right: 7px;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.5;
  vertical-align: 2px;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.notice-grade-danger {
  background: rgba(255, 255, 255, 0.94);
  color: #163d68;
}
/* [2026-09-10 유저] "오늘 날짜하고 내일 날짜 색을 구분지어서 한눈에 보기 편하게".
   일정 둘이 한 줄에 이어 붙으면서(오늘 만기 · 내일 CPI) 어디까지가 오늘인지
   글자로만 갈렸다. 오늘은 앰버로 띄우고 내일은 한 단계 물러난 흰색으로 둔다.
   빨강을 안 쓰는 이유는 이 띠 전체와 같다 - 한국 증시에서 빨강은 호재로 읽힌다.
   앰버는 상승/하락 어느 쪽 뜻도 없어서 '지금 급한 것' 표시로만 읽힌다. */
.notice-when { color: rgba(255, 255, 255, 0.88); }
.notice-when-today { color: #ffd166; }
.notice-when-tomorrow { color: rgba(255, 255, 255, 0.8); font-weight: 700; }
.notice-when-sep { color: rgba(255, 255, 255, 0.4); font-weight: 400; }
.notice-sub {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.88);
}
.notice-more {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  padding-top: 3px;
  color: rgba(255, 255, 255, 0.9);
}

.notice-body {
  padding: 0 14px 12px 44px;
  color: rgba(255, 255, 255, 0.95);
}
.notice-body.hidden { display: none; }
.notice-sec { margin-top: 10px; }
.notice-sec b {
  display: block;
  font-size: 13px;
  margin-bottom: 5px;
  color: #fff;
}
.notice-sec ul { margin: 0; padding-left: 16px; }
.notice-sec li {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 5px;
}
/* '뭘 해야 하나'가 이 띠의 결론이다 - 왜 위험한지보다 이게 먼저 읽혀야 한다. */
.notice-todo {
  background: rgba(0, 0, 0, 0.22);
  border-radius: 8px;
  padding: 8px 10px 8px 4px;
}
.notice-ahead-row {
  display: flex;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.7;
  flex-wrap: wrap;
}
.notice-ahead-date { flex: 0 0 auto; font-weight: 700; }
.notice-ahead-label { flex: 0 0 auto; }
.notice-ahead-one { color: rgba(255, 255, 255, 0.8); }
/* [2026-09-09 Qwen 요청서 / 유저] "정말 팁이라 중요한 게 아닌데 너무 중간쯤 있네".
   계절성 같은 참고 한 줄이라 위험 근거와 같은 크기로 보이면 안 된다.
   맨 아래, 작고 흐리게. 값이 없으면 app.js 가 줄 자체를 안 그린다. */
/* [2026-09-09 유저] "팁 부분 너무 흐려 진하게 보여줘".
   흰색 55% 로 뒀는데 띠가 파랑으로 바뀌면서 더 묻혔다. 0.88 로 올린다 -
   '맨 아래 작게'는 크기와 위치로 이미 드러나므로, 흐리기까지 할 필요는 없다. */
.notice-tip {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.notice-at {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 10px;
}

/* 텔레그램 뉴스 패널 - 최대 높이 제한, 넘치면 세로 스크롤 (페이지 전체를 뉴스가 뒤덮지 않게) */
#telegramNewsList {
  max-height: 360px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.news-row-linked {
  cursor: pointer;
}

/* 아직 안 본(카드로 넘어가지 않은) 뉴스에 파란 테두리 표시 - 그 카드를 보면 해제됨 */
.news-row-new {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 1px var(--blue);
}

.news-card-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 4px 0 8px;
  color: var(--muted);
  font-size: 13px;
  user-select: none;
}

.news-card-arrow {
  opacity: 0.6;
}

.news-card-arrow.disabled {
  opacity: 0.2;
}

/* 패널 헤더로 올린 페이지 네비 (공간 절약) */
.panel-head .news-head-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 13px;
  user-select: none;
  white-space: nowrap;
  text-align: center;
}
.panel-head .news-head-nav .news-card-arrow {
  cursor: pointer;
  padding: 2px 5px;
}
.panel-head .news-head-nav .news-card-arrow.disabled {
  cursor: default;
}

.news-card {
  min-height: 90px;
}

/* 뉴스 본문에서 찾은 종목명 배지 - 누르면 차트 열림(stockLink 재사용) */
.news-stock-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0;
}

.news-stock-badge {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--blue);
  border-radius: 10px;
  font-size: 12px;
}

.news-stock-badge .stock-link {
  color: var(--blue);
}

/* Qwen 이벤트 일정 카드 (다가오는 재료+관련주) */
.event-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line);
}

.event-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.event-date {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.event-tier {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 9px;
  background: var(--blue);
  color: #fff;
}

.event-title {
  font-weight: 600;
}

.event-sectors {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.event-sector {
  font-size: 11px;
  color: var(--muted);
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.holding-theme {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 2px;
}

/* [2026-09-03 유저] "뱃지를 좀 더 크게 하고 클릭할 수 있게" -
   11px 맨글자라 무시하고 사게 된다는 지적. 알약 모양으로 키운다. */
.pullback-match-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  margin: 3px 0 0 0;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.5;
}

/* 일별손익 줄은 종목명·금액이 한 줄에 있어 큰 배지가 안 들어간다 - 옛 크기 그대로. */
.pullback-match-badge--sm {
  font-size: 11px;
  margin-left: 4px;
  padding: 0;
  border: none !important;
  background: none !important;
  border-radius: 0;
}

.pullback-match-o {
  color: var(--green);
  border: 1px solid var(--green);
}

.pullback-match-badge--sm.pullback-match-x {
  color: var(--red) !important;
}

/* X 는 버튼이다 - 눌러서 이유를 볼 수 있다는 게 보이게 채워서 그린다. */
button.pullback-match-x {
  color: #fff;
  background: var(--red);
  border: 1px solid var(--red);
  cursor: pointer;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
button.pullback-match-x:active {
  filter: brightness(0.85);
}

/* 미부합 사유 모달 */
.miss-box {
  max-width: 460px;
  text-align: left;
}
.miss-head {
  font-size: 15px;
  font-weight: 800;
  color: var(--red);
  margin: 4px 0 12px;
}
.miss-bar {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.miss-bar-bad {
  border-color: var(--red);
  background: rgba(200, 40, 40, 0.08);
}
.miss-bar-none {
  color: #8a939a;
}
.miss-bar b {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
}
.miss-bar-nums {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 14px;
}
.miss-bar-nums .miss-pct.up { color: var(--red); font-weight: 700; }
.miss-bar-nums .miss-pct.down { color: var(--blue-down); font-weight: 700; }
.miss-bar-nums .miss-date { color: #8a939a; }
.miss-mat {
  font-size: 13px;
  color: var(--blue-down);
  margin-top: 5px;
}
.miss-mat i { color: #8a939a; font-style: normal; }
.miss-here {
  font-size: 13px;
  font-weight: 700;
  color: var(--red);
  margin-top: 5px;
}
/* [2026-09-03] +1양봉의 '어디서 터졌나'. 배수만으론 안 갈리고 종가 위치가 갈랐다. */
.miss-sub {
  font-size: 12px;
  color: #8a939a;
  margin-top: 4px;
}
.miss-warn {
  font-size: 13px;
  line-height: 1.55;
  color: #b3261e;
  background: rgba(179, 38, 30, 0.1);
  border-radius: 6px;
  padding: 6px 8px;
  margin-top: 6px;
}
.miss-line {
  font-size: 13px;
  line-height: 1.6;
  margin: 3px 0;
}
.miss-at {
  font-size: 12px;
  color: #8a939a;
  margin-top: 10px;
}

.holding-theme-block {
  font-size: 13px;
  color: var(--blue-down);
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  border-top: none !important;
}

.holding-theme-row td {
  border-top: none !important;
}

.holding-issue {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
  padding-top: 5px !important;
  padding-bottom: 7px !important;
  border-top: none !important;
}

.holding-issue-row td {
  border-top: none !important;
}

/* 보유종목 매수 당시 눌림 단계 배경색: 3일선 분홍 / 5일선 초록 / 10일선 파랑 / 20일선 노랑 */
.holding-fill-pink td { background-color: rgba(255, 110, 199, 0.16); }
.holding-fill-green td { background-color: rgba(24, 134, 75, 0.16); }
.holding-fill-blue td { background-color: rgba(39, 104, 168, 0.16); }
.holding-fill-yellow td { background-color: rgba(255, 215, 0, 0.16); }

.pnl-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 10px;
}

.pnl-amount {
  flex: 1;
  font-size: 28px !important;
  font-weight: 300 !important;
  text-align: center;
  padding: 8px 0;
  letter-spacing: -0.5px;
  color: var(--red);
}

.panel-head .pnl-month-head {
  font-size: 17px;
  font-weight: 300;
}
.change-down-blue { color: var(--blue); }

/* 보유종목·상한가·주도테마·일별익절: 노안 대비 어둡고 차분한 빨강 */
.holdings-table .change-up,
.holdings-summary .change-up,
#baseList .change-up,
#themeList .change-up,
#dailyPnlList .change-up { color: var(--red-soft) !important; }

/* 평가손익만 예외: 차분한 빨강+얇은 굵기 조합이 번져 보인다는 피드백 - 더 밝은 빨강+더 얇게+더 크게(셀 크기는 그대로) */
.holdings-table td:nth-child(2).change-up,
.holdings-table td:nth-child(2).change-down,
.holdings-table td:nth-child(3).change-up,
.holdings-table td:nth-child(3).change-down,
.holdings-table td:nth-child(4).change-up,
.holdings-table td:nth-child(4).change-down {
  font-size: 1.25em !important;
  font-weight: 200 !important;
}

.holdings-table td:nth-child(2).change-up {
  color: var(--red) !important;
}

.list {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.section-note {
  padding: 10px 14px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.chart-toolbar {
  display: flex;
  align-items: center;
  gap: 7px;               /* 2026-08-17: 8px -> 7px */
  padding: 4px 10px 10px;
}

/* 최근/즐겨찾기 종목 선택 바 */
.chart-stock-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px 0;
}

.chart-stock-select {
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--row);
  color: var(--text);
  font: inherit;
}

.chart-fav-btn {
  flex: 0 0 auto;
  min-width: 0;
  width: 40px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--row);
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
}

.chart-fav-btn.active {
  color: #f2c200;
  border-color: #f2c200;
}

/* 카드뷰 즐겨찾기 별 (2026-07-17) - .chart-fav-btn(40x34)은 카드 안에 넣기엔 커서 별도.
   골드(#f2c200) 컨벤션은 차트 쪽과 동일하게 맞춘다. */
.card-fav-btn {
  display: inline-block;
  vertical-align: middle;
  /* 전역 button{min-width:76px}(위쪽 221줄)를 반드시 풀어야 한다. min-width가 width를
     이기기 때문에 이게 없으면 별 하나가 76px로 벌어진다(.chart-fav-btn도 같은 이유로
     min-width:0을 명시하고 있음). 2026-07-17 */
  min-width: 0;
  width: auto;
  height: auto;
  margin-left: 12px;   /* 거래대금 텍스트와 공백 3칸 정도 간격 (2026-07-17 유저 요청) */
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.card-fav-btn.active {
  color: #f2c200;
}

/* 즐겨찾기 별 - 기준봉 거래대금 바로 뒤에 인라인으로 붙임 (2026-07-17 유저 요청) */

.chart-toolbar select {
  min-width: 0;
  flex: 1 1 auto;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--row);
  color: var(--text);
  font: inherit;
}

/* [2026-08-23 유저 요청] 방향키 자리에 지표 버튼(볼린저·구름대)을 넣었다.
   글자 버튼이라 36px 고정이면 넘친다 - 툴바에서 겪은 것과 같은 문제(커밋 154d7d8).
   글자 길이만큼 늘어나게 min-width + padding 으로 바꾼다. */
.chart-nav-btn {
  flex: 0 0 auto;
  min-width: 36px;
  height: 34px;
  padding: 0 8px;
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--row);
  color: var(--text);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
/* 지표 버튼: 켜지면 선 색과 같은 색으로 표시해 무엇이 켜졌는지 바로 보이게 */
.chart-ind-btn { font-size: 13px; font-weight: 700; color: var(--muted); }
/* [2026-09-10 유저] "볼린저밴드 버튼 또 사라졌어" - 일봉이 아닐 때 감췄더니 사라지는
   것 자체가 고장으로 읽혔다. 이제 자리는 지키고 흐리게만 한다. 눌러도 안 그려지는
   건 app.js 의 bbAllowed 가 막는다(여기서 pointer-events 로 막지 않는 이유:
   눌렀을 때 켜짐 상태는 남겨야 일봉으로 돌아왔을 때 그대로 켜져 있다). */
.chart-ind-btn.ind-na { opacity: 0.38; }
/* [2026-08-23 유저] 활성 색은 15분봉/일봉/주봉 토글과 같은 노랑(#f4c542)으로 통일.
   지표마다 선 색을 따라가게 했더니 화면에서 '켜짐'이 제각각으로 보였다. */
#chartBollingerBtn.active,
#chartIchimokuBtn.active { background: #f4c542; border-color: #f4c542; color: #000; }
/* [2026-08-28] 매물벽 버튼. 켜면 회색 계열 - 차트에 그려지는 띠와 같은 색감으로 맞춘다. */
#chartWallBtn.active { background: #9aa5ad; border-color: #9aa5ad; color: #000; }
.chart-mode-toggle {
  flex: 0 0 auto;
  display: flex;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  margin-right: 8px;      /* 2026-08-17: 12px -> 8px, 오른쪽 버튼들 자리 확보 */
}

.chart-mode-toggle button {
  min-width: 0;
  height: 32px;           /* 2026-08-17: 오른쪽 버튼들과 높이를 맞춘다 */
  padding: 0 10px;
  border: none;
  border-radius: 0;
  background: var(--row);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.chart-mode-toggle button.active {
  background: #f4c542;
  color: #000;
}

.chart-rotate-btn {
  flex: 0 0 auto;
  width: 34px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--row);
  color: var(--muted);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-rotate-icon {
  display: inline-block;
  transform: rotate(90deg);
  line-height: 1;
}

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

/* [2026-08-17 유저 요청] 버튼이 밀려서 맨 끝 "-1"(캔들 삭제)이 화면 밖으로 나갔다.
   "현재가" 를 추가하면서 넘친 것이다. 원인은 width 가 34px 로 고정이라
   "NXT"·"현재가" 같은 글자 버튼이 상자 밖으로 삐져나와 옆을 밀어낸 것.
   글자 길이에 맞춰 늘어나게 바꾸고(min-width + padding) 폭을 조금씩 줄였다. */
.chart-line-btn {
  flex: 0 0 auto;
  min-width: 36px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--row);
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 수평선 버튼은 글자가 아니라 글리프(━)라 작아지면 안 보인다 - 원래 크기 유지 */
#chartLineBtn { font-size: 16px; }

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

.chart-line-btn.active {
  background: #FFD700;
  color: #ffffff;
  border-color: #FFD700;
}


.chart-link {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 12px;
  font-weight: 720;
  text-decoration: none;
}

.chart-zoom-hint {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 10px 10px 6px;
  /* [2026-08-27 실측] 차트를 열 때 패널이 32px 커졌다. 이평선 버튼이 그려지기 전에는
     이 줄이 padding 만 남은 16px 이었다가 버튼이 들어오면서 48px 이 되기 때문.
     한 줄 자리를 미리 잡아두면 열자마자 뛰지 않는다. 버튼이 두 줄로 접히면
     그때는 자연히 더 커지므로 이 값이 상한을 막지는 않는다. */
  min-height: 48px;
  font-size: 12px;
  color: var(--muted);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  user-select: none;
  touch-action: none;
}

/* 범례에서 숨긴 이평선 */
.legend-item.legend-off {
  opacity: 0.4;
  text-decoration: line-through;
}

/* "다음타점▶" 버튼 - 이평선 온오프 줄 맨 오른쪽에 붙임 */
.legend-item.legend-next-entry {
  margin-left: auto;
  border-color: #ff4dd8;
  color: #ff4dd8;
  font-weight: 700;
}

.legend-item i {
  width: 13px;
  height: 13px;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}

.chart-area {
  display: flex;
  align-items: flex-start;
}

/* 세로 모드: 슬라이더 숨김, 차트가 전체 너비 사용 */
#chartPanel:not(.landscape) .chart-zoom-control {
  display: none !important;
}
#chartPanel:not(.landscape) .chart-zoom-hint {
  display: none !important;
}

/* [2026-08-17 유저 요청] 세로 모드에서 툴바 오른쪽에 여백이 남아 있었다.
   확대/축소 안내문이 위에서 숨겨지는데 그 자리를 아무도 안 채워서다.
   남는 폭을 버튼들이 자기 크기 비율대로 나눠 갖게 해서 오른쪽 끝까지 채운다
   (위의 종목 선택줄과 오른쪽 끝이 맞는다).
   flex-basis 는 auto 라 글자 길이에 맞는 자연 크기에서 '늘어나기만' 한다 -
   0 으로 두면 "-1" 이 모드토글과 같은 폭이 돼서 이상해진다.
   가로 모드는 안내문이 보이므로 그대로 둔다. */
#chartPanel:not(.landscape) .chart-toolbar > * {
  flex: 1 1 auto;
}
#chartPanel:not(.landscape) .chart-mode-toggle button {
  flex: 1 1 auto;
}

#chartPanel.landscape .chart-area {
  flex: 1;
  height: 100%;
  gap: 8px;
  padding: 8px 0;
}

/* 주가 + 거래량 차트를 한 컬럼으로 묶어 슬라이더와 분리.
   두 차트가 같은 컨테이너 너비를 공유하므로 정렬이 구조적으로 보장됨. */
.chart-main {
  flex: 1;
  min-width: 0;
}

#chartPanel.landscape .chart-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#chartPanel.landscape .chart-canvas-wrap {
  flex: 3;
  overflow: hidden;
}

#chartPanel.landscape .volume-chart:not(.hidden) {
  flex: 1;
  display: block !important;
}

.chart-canvas-wrap {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  background: var(--chart-bg); /* 슬라이드 애니메이션 중 검은 배경 방지 */
}

/* 차트 왼쪽 상단 - 1차/2차 매수타점 온오프 */
.entry-line-toggle-bar {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;  /* 바 자체는 클릭 통과, 안의 토글만 클릭 가능 */
}

.entry-line-toggle {
  pointer-events: auto;
  padding: 6px 14px;
  border: 1px solid #2ecc71;
  border-radius: 999px;
  background: #2ecc71;
  color: #06210f;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.entry-line-toggle.entry-line-toggle-off {
  border-color: rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.45);
  color: rgba(255,255,255,0.5);
  text-decoration: line-through;
  box-shadow: none;
}

.minute-chart {
  display: block;
  width: 100%;
  height: auto;
  min-height: 280px;
  /* [2026-08-26 유저] 현재가 태그가 좌우 끝에 안 붙고 떠 보이던 원인.
     캔버스에 좌우 4px 패딩이 있어 그리는 영역이 그만큼 안쪽이었다.
     위 여백만 남기고 좌우는 0 - 태그도 캔들도 화면 끝까지 쓴다.
     [2026-09-01 유저 제보] "제일 상단에 색이 채우다 만거 같고".
     캔버스의 padding 은 비트맵 '바깥'이라 JS 로는 칠할 수 없는 자리다. 위 4px 이
     그래서 오른쪽 칸 색이 안 닿는 띠로 남았다. 0 으로 없앤다 - 위 여백은 그리는
     쪽 pad.top(세로 18px)이 이미 갖고 있어서 잃는 게 없다. */
  padding: 0;
  transform: translateX(0);
  will-change: transform, opacity;
  background: var(--chart-bg);
}

/* 회전 상태에서 캔버스 높이 자동 조정 */
.chart-overlay #chartPanel.landscape .minute-chart {
  height: auto;
  flex: 1;
  max-height: 520px;
}

.minute-chart.chart-sliding {
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.34s ease;
}

.chart-slide-ghost {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  object-fit: fill;
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.34s ease;
  will-change: transform, opacity;
}

.chart-zoom-control {
  flex: 0 0 auto;
  display: grid;
  place-items: stretch center;
  width: 52px;
  height: 360px; /* 주가 차트 높이에 맞춤 (거래량 캔들 위까지) */
  margin-right: 4px;
  padding: 8px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

/* 세로 슬라이더: 최신 브라우저는 writing-mode 로 네이티브 세로 렌더링.
   direction: rtl 로 위=최대(확대), 아래=최소(축소) 방향을 맞춤. */
.chart-zoom-slider {
  width: 34px;
  height: 100%;
  margin: 0;
  padding: 0;
  writing-mode: vertical-lr;
  direction: rtl;
  accent-color: var(--blue);
  cursor: pointer;
  touch-action: none;
}

/* 슬라이더 잡을 때 시각적 피드백 */
.chart-zoom-control.slider-active {
  border-color: #f2c200;
  background: color-mix(in srgb, #f2c200 12%, var(--panel));
}

.chart-zoom-slider.slider-active,
.chart-zoom-control.slider-active .chart-zoom-slider {
  accent-color: #f2c200;
}

/* writing-mode 미지원 구형 브라우저용 폴백: 가로 슬라이더를 회전 */
@supports not (writing-mode: vertical-lr) {
  .chart-zoom-slider {
    width: 170px;
    height: 22px;
    writing-mode: horizontal-tb;
    direction: ltr;
    transform: rotate(-90deg);
  }
}

.volume-chart {
  display: block;
  width: 100%;
  height: 110px;
  /* [2026-09-01 유저 제보] "거래대금쪽엔 왜 위치가 틀어져?"
     좌우 4px 패딩 때문에 이 캔버스만 그리는 면이 안쪽으로 밀려 있었다. 가격 차트는
     08-26 에 같은 이유로 좌우를 0 으로 바꿨는데(위 .minute-chart 주석) 여기는 그때
     같이 안 고쳐서, 두 캔버스가 같은 x 에 그려도 화면에서는 4px 어긋났다.
     오른쪽 칸이 위아래로 이어지려면 두 캔버스의 그리는 면이 정확히 같아야 한다. */
  padding: 0;
  background: var(--chart-bg);
}

.chart-message {
  /* [2026-08-27 실측] 차트를 열거나 종목을 넘길 때마다 패널이 16px 늘었다 줄었다 했다.
     loadChart 가 여기에 "일봉 불러오는 중..." 을 넣었다가(app.js) 데이터가 오면 지우는데,
     min-height 가 0 이라 글자가 없으면 줄 자체가 사라져 패널 아래가 그만큼 접혔다.
     캔버스는 전혀 안 움직였고(측정: 가격/거래량 높이 고정), 범례도 제자리였다.
     한 줄 자리를 늘 비워두면 글자가 들어오고 나가도 높이가 안 변한다. */
  min-height: 18px;
  padding: 0 10px 2px;
  color: var(--muted);
  font-size: 12px;
}

.row {
  display: grid;
  min-width: 0;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--row);
  cursor: pointer;
  transition: border-color 0.15s;
}

/* 날짜 탭 이동 등으로 목록이 다시 그려질 때 카드가 위에서 살짝 슬라이드다운되며 나타남 */
@keyframes listEnterSlideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.list-enter-animate > * {
  animation: listEnterSlideDown 0.22s ease-out both;
}

/* 단계별 눌림 후보 카드 프레임: 3일선 분홍 / 5일선 초록 / 10일선 파랑 / 20일선 노랑 */
.row.candidate-frame-pink {
  border: 2px solid #ff6ec7;
}

.row.candidate-frame-green {
  border: 2px solid var(--green);
}

.row.candidate-frame-blue {
  border: 2px solid var(--blue);
}

.row.candidate-frame-yellow {
  border: 2px solid #ffd700;
}

/* iOS 2탭 방지: 카드가 클릭 요소(cursor:pointer)라 .row:hover가 있으면
   터치 첫 탭이 hover로 먹히고 둘째 탭에야 열린다. 진짜 hover 되는(마우스)
   기기에서만 적용. */
@media (hover: hover) {
  .row:hover {
    border-color: var(--blue);
  }
}

#themeList .row {
  cursor: default;
  gap: 3px;
}

#themeList .row:hover {
  border-color: var(--line);
}

/* 상한가 2종목 이상 — 빨강 */
#themeList .row.theme-bg-red {
  background-color: transparent;
  border-color: #ff6b6b;
}
body[data-theme="dark"] #themeList .row.theme-bg-red {
  background-color: transparent;
  border-color: #ff6b6b;
}

/* 상한가 1종목 + 거래대금 500억 이상 — 노랑 */
#themeList .row.theme-bg-yellow {
  background-color: transparent;
  border-color: #e6c800;
}
body[data-theme="dark"] #themeList .row.theme-bg-yellow {
  background-color: transparent;
  border-color: #998000;
}

/* 상한가 없지만 주도테마 (등락률·거래대금 충족) — 초록 */
#themeList .row.theme-bg-green {
  background-color: transparent;
  border-color: #88cc00;
}
body[data-theme="dark"] #themeList .row.theme-bg-green {
  background-color: transparent;
  border-color: #7aaa00;
}

.theme-tv {
  margin-left: 8px;
  font-size: 13px;
  font-weight: normal;
  white-space: nowrap;
}

.row-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  font-weight: 720;
}

/* 2차상승/반등완료 배지 - 종목명 줄 아래 별도 줄 */
.candidate-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.name-line,
.row-title span,
.row-title a,
.row p {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.row-title small {
  display: inline-block;
  color: var(--blue);
  font-size: 12px;
  font-weight: 720;
  white-space: nowrap;
}

.row-title strong {
  align-self: start;
  max-width: 160px;
  color: var(--blue);
  font-size: 12px;
  overflow-wrap: anywhere;
  text-align: right;
}

/* 눌림 대기 상태 라벨: 3~5일선=초록, 10일선=파랑, 20일선=노랑 */
.row-title strong.ok {
  color: var(--green);
}

.row-title strong.wait-blue {
  color: #2f9bff;
}

.row-title strong.wait-yellow {
  color: #f2c200;
}

.row-title strong.wait-purple {
  color: #9575ff;
}

.row-title strong.danger {
  color: var(--red);
}

.row p {
  color: var(--text);
  line-height: 1.45;
}

.metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 11px;
}

.metrics span {
  overflow-wrap: anywhere;
}

.metrics .metric-up {
  color: var(--red);
  font-weight: 720;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.chip-link {
  display: inline-block;
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--chip);
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.chip-text {
  display: inline-block;
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--chip);
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.compact {
  gap: 5px;
}

.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.45);
}

/* 차트 오버레이 열림: 배경 요소 포인터 이벤트 차단 */
body.chart-open {
  touch-action: none;
  overflow: hidden;
}

body.chart-open .topbar,
body.chart-open main {
  pointer-events: none !important;
  touch-action: none;
}

/* 차트 오버레이: 종목 클릭 시 화면 위에 레이어로 표시, 바깥 클릭 시 닫힘 */
.chart-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: start center;
  padding: 0 4px 0;
  background: rgba(0, 0, 0, 0.55);
  overflow-y: auto;
  transition: background-color 0.35s ease;
  pointer-events: auto;
  touch-action: pan-y;
}

.chart-overlay.hidden {
  display: none !important;
}

.chart-overlay #chartPanel.landscape ~ * {
  display: none;
}

.chart-overlay #chartPanel {
  width: min(1100px, 100%);
  max-height: auto;
  height: auto;
  margin: 0 auto;
  overflow-y: auto;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  transition: transform 1.65s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  /* [2026-08-04 유저 요청] 남색(#1a2744) -> 중성 회색.
     차트 캔버스가 회색(--chart-bg: #808080)인데 위아래 크롬이 진한 남색이라
     경계에서 명도차가 너무 커 눈이 아팠다(밝기 약 15% vs 54%).
     같은 무채색 계열로 맞춰 단차를 줄인다(33% vs 54%) - 색상 대비가 사라지고
     명도 차이만 남아서 차트가 '떠 보이지' 않는다. */
  background: #52575a;
}

/* [2026-08-26 유저 요청] 넓은 화면에서 차트 폭을 푼다 - 넓으면 캔들이 더 많이 보인다.
   ★ 이 블록은 반드시 위 .chart-overlay #chartPanel 규칙 '뒤'에 있어야 한다.
     특이도가 같으면 나중에 나온 것이 이기는데, 처음엔 파일 앞쪽(283줄)에 넣어서
     뒤(1308줄)의 width: min(1100px, 100%) 에 밀려 아무 효과가 없었다(실측 08/26).
   아이패드(가로 1024~1366)도 이 구간에 들어와 지금보다 넓게 본다.
   가로 모드(.landscape)는 vh 기준이라 안 건드린다. */
@media (min-width: 1280px) {
  .chart-overlay #chartPanel:not(.landscape) {
    width: min(1500px, 96%);
  }
}
@media (min-width: 1800px) {
  .chart-overlay #chartPanel:not(.landscape) {
    width: min(1850px, 96%);
  }
}

.chart-overlay #chartPanel .panel-head {
  border-bottom-color: rgba(0, 0, 0, 0.45);
  background: #52575a;
  padding-top: calc(env(safe-area-inset-top, 0px) + 6px);
  padding-bottom: 7px;
}

/* 차트뷰어 버튼·셀렉트: 패널보다 어둡게 해서 눌리는 것임을 구분 */
.chart-overlay #chartPanel button:not(.active),
.chart-overlay #chartPanel select {
  background: #3e4346;
  border-color: rgba(255, 255, 255, 0.16);
}

.chart-overlay #chartPanel.nob-dragging {
  box-shadow: 0 0 0 2px #f5c518, 0 0 12px rgba(245, 197, 24, 0.6), 0 0 24px rgba(245, 197, 24, 0.3), 0 18px 60px rgba(0, 0, 0, 0.45);
}

.chart-nob {
  flex-shrink: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #f5c518 20%, #f5c518 80%, transparent);
  position: sticky;
  bottom: 0;
  cursor: grab;
  transition: background 0.2s ease, box-shadow 0.2s ease;
  z-index: 5;
}

.chart-nob:active {
  cursor: grabbing;
  background: linear-gradient(90deg, transparent, #ffd700 20%, #ffd700 80%, transparent);
  box-shadow: 0 -2px 8px rgba(245, 197, 24, 0.4);
}

.chart-overlay #chartPanel.landscape {
  width: 89vh;
  height: calc(92vw - env(safe-area-inset-bottom, 0px));
  max-height: none;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%) rotate(90deg);
  z-index: 100;
}

.chart-overlay #chartPanel.landscape .panel-head {
  flex: 0 0 auto;
  padding: 4px 10px;
  padding-top: 4px;
  gap: 8px;
  min-height: 0;
}

.chart-overlay #chartPanel.landscape .chart-toolbar {
  flex: 0 0 auto;
  padding: 4px 8px;
}

/* 가로 모드: toolbar 전체 숨김 (버튼들이 panel-head로 이동) */
.chart-overlay #chartPanel.landscape .chart-toolbar {
  display: none;
}

#chartUpdated {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

/* 가로 모드 panel-head: 15분봉 타이틀·업데이트 시간 숨김 */
.chart-overlay #chartPanel.landscape .panel-head #chartTitle,
.chart-overlay #chartPanel.landscape .panel-head #chartUpdated {
  display: none;
}

/* 가로 모드 panel-head: 모드토글 여백 제거 */
.chart-overlay #chartPanel.landscape .panel-head .chart-mode-toggle {
  flex: 0 0 auto;
}

/* 가로 모드 panel-head: 회전버튼 여백 */
.chart-overlay #chartPanel.landscape .panel-head .chart-rotate-btn {
  flex: 0 0 auto;
  margin-right: 0;
}

/* 가로 모드 panel-head: 즐겨찾기·종목드롭다운 */
.chart-overlay #chartPanel.landscape .panel-head .chart-fav-btn {
  flex: 0 0 auto;
}

.chart-overlay #chartPanel.landscape .panel-head .chart-stock-select {
  flex: 0 1 auto;
  max-width: 130px;
  min-width: 60px;
  font-size: 11px;
  height: 26px;
  padding: 0 4px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  color: var(--text);
}

/* 가로 모드 종목 선택 트리거 버튼 */
.chart-stock-bar .landscape-stock-btn {
  display: none;
}
.chart-overlay #chartPanel.landscape .panel-head .landscape-stock-btn {
  flex: 0 1 auto;
  max-width: 130px;
  min-width: 60px;
  font-size: 11px;
  height: 26px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

/* [2026-08-26 유저 요청] 차트 제일 위 종목 검색창. 아래 드롭다운은 그대로 둔다. */
.chart-search-bar {
  position: relative;
  /* [2026-08-26] 이 줄이 차지하는 만큼 아래 차트가 줄어든다(calcChartHeight 가 빼간다).
     그래서 여백을 넉넉히 두지 않는다 - 6+32 = 38px. */
  padding: 6px 10px 0;
}
.chart-search-input {
  width: 100%;
  box-sizing: border-box;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--row);
  color: var(--text);
  font: inherit;
  /* iOS 는 16px 미만이면 입력할 때 화면을 확대한다 - 15 가 확대 없이 가장 큰 값 */
  font-size: 15px;
}
.chart-search-input:focus {
  outline: none;
  border-color: var(--blue);
}
/* 결과 목록 - 입력창 바로 아래에 떠서 차트를 덮는다 */
.chart-search-results {
  position: absolute;
  left: 10px;
  right: 10px;
  top: calc(100% + 2px);
  z-index: 60;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.chart-search-results li {
  padding: 10px 12px;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--row);
}
.chart-search-results li:last-child { border-bottom: none; }
.chart-search-results li:active,
.chart-search-results li:hover { background: var(--row); }
.chart-search-code { color: var(--muted); font-size: 12px; }
.chart-search-empty { color: var(--muted); cursor: default; }
/* 가로 모드에선 자리가 없다 - 원래 있던 종목▾ 버튼을 쓴다 */
.chart-overlay #chartPanel.landscape .chart-search-bar { display: none; }

/* 가로 모드 종목 선택 패널 (내부에 위치하므로 90도 회전 자동 적용) */
.landscape-stock-panel {
  display: none;
}
.chart-overlay #chartPanel.landscape .landscape-stock-panel:not(.hidden) {
  display: flex;
  flex-direction: column;
  position: absolute;
  inset: 0;
  background: var(--panel);
  z-index: 50;
  overflow: hidden;
}
.landscape-stock-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  font-size: 14px;
  flex: 0 0 auto;
}
.landscape-stock-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--muted);
  padding: 0 4px;
  line-height: 1;
}
.landscape-stock-list {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  -webkit-overflow-scrolling: touch;
}
.landscape-stock-list li {
  padding: 11px 16px;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--row);
}
.landscape-stock-list li:active {
  background: var(--row);
}
.landscape-stock-list li.active-stock {
  color: var(--blue);
  font-weight: 600;
}

/* 거래량 토글 버튼 — landscape에서만 표시 */
.vol-toggle-btn {
  display: none;
  height: 26px;
  padding: 0 8px;
  font-size: 11px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  flex: 0 0 auto;
}

.vol-toggle-btn.active {
  border-color: var(--blue);
  color: var(--blue);
}

.chart-overlay #chartPanel.landscape .vol-toggle-btn {
  display: inline-flex;
  align-items: center;
}

/* 종목명 중앙 표시 */
.chart-landscape-name {
  display: none;
  flex: 1;
  text-align: right;
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 8px;
}

.chart-overlay #chartPanel.landscape .chart-landscape-name {
  display: block;
}

.chart-overlay #chartPanel.landscape .chart-area {
  flex: 1;
  overflow: hidden;
  padding: 0;
  margin: 0;
  align-items: stretch;
}

.chart-overlay #chartPanel.landscape .chart-main {
  flex: 1;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  height: 100%;
}

.chart-overlay #chartPanel.landscape .chart-canvas-wrap {
  flex: 4 4 0;
  min-height: 0;
  overflow: hidden;
}

.chart-overlay #chartPanel.landscape .volume-chart:not(.hidden) {
  flex: 1 1 0;
  display: block !important;
  height: auto;
  min-height: 0;
}

/* 드래그 핸들 — landscape에서만 표시 */
.chart-splitter {
  display: none;
}

.chart-overlay #chartPanel.landscape .chart-splitter {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  min-height: 0;
  touch-action: none;
  cursor: ns-resize;
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  user-select: none;
  -webkit-user-select: none;
  position: relative;
}

.chart-overlay #chartPanel.landscape .chart-splitter::after {
  content: '';
  width: 32px;
  height: 3px;
  background: var(--muted);
  border-radius: 2px;
  opacity: 0.6;
  transition: background 0.15s, opacity 0.15s;
}

.chart-overlay #chartPanel.landscape .chart-splitter.active {
  background: rgba(255, 210, 0, 0.15);
  border-color: rgba(255, 210, 0, 0.4);
}

.chart-overlay #chartPanel.landscape .chart-splitter.active::after {
  background: rgba(255, 210, 0, 0.9);
  opacity: 1;
}

.chart-overlay #chartPanel.landscape .chart-zoom-control,
.chart-overlay #chartPanel.landscape .chart-stock-bar,
.chart-overlay #chartPanel.landscape .chart-legend,
.chart-overlay #chartPanel.landscape .chart-message {
  display: none;
}

.chart-overlay #chartPanel.landscape .chart-zoom-slider {
  width: 100%;
  height: 20px;
  writing-mode: horizontal-tb;
  direction: ltr;
}

/* [2026-08-28] 닫기(✕) 자리에 들어온 가상 상한가 버튼. 크기·모양은 예전 닫기 버튼과
   같게 두되 글자가 들어가므로 폭만 넓힌다. 켜면 상한가 색(빨강)으로 눌린 티를 낸다. */
.chart-limitup-btn {
  flex: 0 0 auto;
  min-width: 0;
  height: 36px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--row);
  color: var(--text);
  font-size: 14px;
  line-height: 1;
}

/* ===== 호가창 (2026-08-28 chart_plus 이식) =====
   ★ 이 창을 만든 이유는 '금액' 칸 하나다. 주식 수량만 보면 지금 얼마가 걸려 있는지
     순간적으로 안 계산된다. 금액 = 호가 x 잔량.
   ★ 막대는 잔량 칸 안에서만 자란다. 금액 칸을 넘으면 금액이 막대에 묻히는데,
     금액을 읽으라고 만든 창에서 그러면 창이 없느니만 못하다.
   ★ 막대 색은 매도에만. 양쪽에 칠하면 '매도벽'이라는 구분이 사라진다. */
/* [2026-08-28 유저] 전체화면으로 띄웠더니 "아이폰 화면이 너무 쌩뚱맞고" - 게다가
   맨 위가 아이폰 상태바(시각·배터리)에 겹쳤다. 차트 패널 안으로 넣는다.
   머리줄·검색창·툴바는 그대로 있고 캔들 자리만 바뀌므로 맥락이 안 끊긴다. */
.hoga-inline.hidden {
  display: none !important;
}

/* 좁은 화면(아이폰)에서는 캔들 자리를 호가가 대신 쓴다. 둘을 나란히 놓기엔 폭이 없다.
   머리줄·검색창·툴바는 그대로 남으므로 "어느 종목을 보고 있나"가 안 끊긴다. */
@media (max-width: 899px) {
  body.hoga-side .chart-area,
  body.hoga-side #chartLegend,
  /* [2026-08-28 유저] "호가창을 조금 위로 올려줘봐"
     사다리 위가 174px 이었다(머리줄 + 검색창 + 종목줄 + 봉 전환줄).
     그중 검색창만 접는다 - 차트에서 종목을 찾을 때 쓰는 칸이고, 바로 아래 종목
     드롭다운이 같은 일을 하므로 호가를 보는 동안에는 없어도 된다.
     [2026-08-28 추가] "15분봉 일봉 주봉 버튼 위치까지 올려서 버튼을 가릴정도로 올려봐"
     봉 전환줄(.chart-toolbar)도 접는다. 둘을 합쳐 84px 이 올라온다.
     남는 건 머리줄과 종목 드롭다운줄뿐이라 "무슨 종목인가"는 계속 보인다.
     봉 전환은 호가에서 쓸 일이 없다 - 닫으면 그대로 돌아온다. */
  body.hoga-side .chart-search-bar,
  body.hoga-side .chart-toolbar {
    display: none !important;
  }
  /* [2026-08-28 유저 제보] 호가창을 만지면 뒤가 같이 잡혔다.
     좁은 화면에서는 20단이 다 들어오므로 이 안에서 스크롤할 게 없다. 브라우저가
     스크롤을 시작하지 못하게 막아야 위로 끄는 손짓이 온전히 우리 것이 된다.
     넓은 화면(옆에 붙는 경우)에는 적용하지 않는다 - 거기선 패널 자체가 스크롤된다. */
  body.hoga-side .hoga-inline {
    touch-action: none;
  }
  body.hoga-side .chart-overlay {
    overscroll-behavior: contain;
  }
  /* [2026-08-28] 검색창·봉 전환 줄도 감춰 자리를 만들어봤지만 유저가 "맘에 들었던
     크기가 아니다" - 되돌린다. 총액 줄은 화면 끝에 걸치므로 살짝 스크롤해서 본다.
     행 크기를 줄여 억지로 넣는 쪽이 더 나쁘다("너무 좁아졌어"). */
}

/* 칸 순서: 금액 | 잔량 | 호가 | 등락률
   [2026-08-28 유저] "호가창에 걸려 있는 금액 합계는 왼쪽으로 이동 시켜주고" */
/* [2026-08-28 유저가 영웅문 화면을 보여주며] 호가를 가운데 한 줄로 세우고
   매도 잔량은 왼쪽, 매수 잔량은 오른쪽. 다섯 칸이고 좌우가 대칭이다.
     [금액][매도잔량][호가·등락률][매수잔량][금액]
   가격이 한 줄에 모여 있어야 사다리로 읽힌다 - 좌우로 흩으면 눈이 따라가지 못한다. */
.hoga-ladder {
  display: grid;
  grid-template-columns: 0.7fr 1fr 1.15fr 1fr 0.7fr;
  font-size: 13px;
}

/* 반대편 빈 칸. 배경·테두리는 유지해야 사다리 줄이 이어져 보인다.
   높이는 같은 행의 호가 칸이 만든다. */
.hoga-blank {
  padding: 0;
}

/* [2026-08-28 유저] 두 줄로 했더니 20단이 화면을 50px 넘겼다(실측: 사다리 174~846,
   화면 796). "가격이랑 등락률을 한줄로 하면 되자나" - 한 줄로 붙인다. */
.hoga-price {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  line-height: 1.2;
}

.hoga-price-v { font-size: 16px; font-weight: 700; }

.hoga-row {
  display: contents;
}

/* 20단이 한 화면에 들어오되 너무 눌리지 않게. 2px 로 조였더니 "너무 좁다" -
   아래에 210px 이 남아 있었다(실측: 사다리 174~586, 화면 796).
   남는 만큼 행을 키운다. 20단 x 약 28px = 560 이라 총액 줄까지 넣어도 화면 안이다. */
.hoga-cell {
  /* 여백을 줄여 총액 줄을 넣으려 했더니 "너무 좁아졌어" - 반대로 간다.
     행은 넉넉히 두고, 자리는 차트 전용 줄(검색창·봉 버튼)을 감춰서 만든다(아래 미디어쿼리). */
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 잔량 칸. 막대는 이 칸 안에서만 자란다. */
.hoga-qty {
  position: relative;
  text-align: right;
}

.hoga-bar {
  position: absolute;
  top: 2px;
  bottom: 2px;
  right: 0;
  border-radius: 2px;
  pointer-events: none;
}

.hoga-qty span {
  position: relative;   /* 막대 위로 */
}

.hoga-price {
  text-align: center;
  font-weight: 700;
}

/* 금액은 잔량과 다른 계열로 - 두 숫자가 섞여 보이면 안 된다. */
.hoga-money {
  text-align: left;
  color: #4db6ac;
}

/* 호가별 등락률. 기준가(전일 종가) 대비다 - 화면의 다른 등락률과 같은 기준. */
.hoga-rate {
  font-size: 11px;
  opacity: 0.9;
}

.hoga-ask .hoga-cell { background: #16202b; }   /* 매도 - 파랑 계열 */
.hoga-bid .hoga-cell { background: #241a1c; }   /* 매수 - 빨강 계열 */

/* 매수는 오른쪽 편이므로 정렬과 막대 방향을 뒤집는다.
   막대는 양쪽 다 가운데(호가 칸) 쪽에서 바깥으로 자란다 - 벽이 클수록 밖으로 뻗는다. */
.hoga-bid .hoga-bar { left: 0; right: auto; }
.hoga-bid .hoga-qty { text-align: left; }
.hoga-bid .hoga-money { text-align: right; }
.hoga-ask .hoga-bar { background: rgba(21, 101, 192, 0.55); }
.hoga-bid .hoga-bar { background: rgba(198, 40, 40, 0.45); }

/* 금액이 큰 매도벽일수록 진하게. 큰 규칙이 이긴다. */
.hoga-ask.wall-1 .hoga-bar { background: rgba(21, 101, 192, 0.8); }
.hoga-ask.wall-2 .hoga-bar { background: rgba(126, 87, 194, 0.85); }
.hoga-ask.wall-3 .hoga-bar { background: rgba(216, 67, 21, 0.85); }

/* 현재가 행 */
.hoga-row.now .hoga-cell {
  box-shadow: inset 0 0 0 1px #e03131;
}

.hoga-up { color: #ff6b6b; }
.hoga-down { color: #6ab7ff; }
.hoga-flat { color: var(--text); }

/* [2026-08-28 유저] 아래는 양쪽에 걸린 총액만. 왼쪽 매도 / 오른쪽 매수.
   사다리의 매도(왼쪽 위)·매수 색과 같은 계열로 묶어 어느 쪽인지 색으로도 읽히게 한다. */
/* [2026-08-28 유저 제보] "하단 합계 총금액이 잘린다 왜 그런거지 너무 크게 했나?"
   글자가 큰 게 아니라 20단이 화면보다 길어서 총액 줄이 아래로 밀려난 것이다.
   글자를 줄이는 건 이미 두 번 퇴짜맞았으니(너무 좁다/가독성) 총액을 바닥에 고정한다.
   사다리를 훑는 동안에도 양쪽 총액은 늘 보인다. */
.hoga-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: sticky;
  bottom: 0;
  z-index: 2;
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 14px rgba(0, 0, 0, 0.45);
}

.hoga-total {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 12px 10px;
  font-size: 12px;
  color: var(--muted);
}

.hoga-total.ask { background: #16202b; }
.hoga-total.bid { background: #241a1c; text-align: right; }

.hoga-total b {
  font-size: 17px;
  font-weight: 700;
}

/* 두 배 이상 차이날 때만 붙는다(app.js). 그 아래는 양쪽이 같은 크기다.
   큰 쪽은 키우고 작은 쪽은 줄여서 차이를 더 벌린다 - 숫자를 읽기 전에 크기로 먼저 보이게. */
.hoga-total.bigger b {
  font-size: 26px;
  line-height: 1.1;
}

/* 작은 쪽은 줄이되 읽히는 선까지만 - "그렇다고 가독성이 떨어질정도는 아니고" */
.hoga-total.smaller b {
  font-size: 15px;
  opacity: 0.85;
}

.hoga-total.ask b { color: #6ab7ff; }
.hoga-total.bid b { color: #ff6b6b; }

.hoga-total-qty {
  font-size: 11px;
  opacity: 0.8;
}

@media (min-width: 560px) {
  .hoga-ladder { font-size: 14px; }
}

/* [2026-08-28 유저] "아이폰은 가로모드 안쓸거야. 아이패드는 호가창을 옆에 붙여줘."
   폰(세로)에서는 위처럼 차트를 덮는다 - 폭이 좁아 나란히 놓으면 둘 다 못 읽는다.
   아이패드 정도부터는 오른쪽에 붙이고 차트를 그만큼 왼쪽으로 밀어 둘 다 보이게 한다.
   덮개(어두운 배경)도 없앤다 - 옆에 붙는 창이 뒤를 가릴 이유가 없다. */
@media (min-width: 900px) {
  /* 패널 안에 있던 호가를 오른쪽 고정 칸으로 꺼낸다. 차트는 그대로 두고 나란히. */
  #hogaInline {
    position: fixed;
    top: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 96;
    width: min(430px, 42vw);
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  }
  /* 호가창이 열려 있는 동안 차트를 왼쪽으로 밀어준다.
     ★ 폭도 같이 줄여야 한다. margin 만 주면 패널 폭(min(1100px,100%))은 그대로라
       오른쪽이 호가창 밑으로 들어가 잘린다(실측: 툴바 버튼이 잘림). */
  body.hoga-side .chart-overlay #chartPanel {
    margin-right: min(430px, 42vw);
    width: min(1100px, calc(100% - min(430px, 42vw)));
    transition: margin-right 0.2s ease, width 0.2s ease;
  }
}

/* [2026-08-28] 차트 머리줄 시가총액. 구간은 CLAUDE.md 의 실측 백테스트를 따른다
   (app.js marketCapToneClass 주석에 표 그대로 옮겨 뒀다).
   표시일 뿐이고 후보 판정에는 쓰지 않는다 - CLAUDE.md 가 못박은 규칙이다. */
/* [2026-08-29 유저 요청] 글자는 등급 색을 쓰지 않는다. 어느 구간이든 기본색.
   색으로 말하는 건 머리띠 배경 하나뿐 - 글자와 배경이 같이 색을 내면 서로 싸운다.
   클래스는 남긴다(머리띠 판단과 무관하게 다른 곳에서 쓸 수 있다). */
#chartUpdated.cap-bad,
#chartUpdated.cap-weak,
#chartUpdated.cap-mid,
#chartUpdated.cap-good { color: var(--muted); font-weight: 400; }

/* [2026-08-28 유저 요청] 전고점·상한가 버튼 묶음. panel-head 는 space-between 이라
   따로 두면 사이가 벌어진다. 한 묶음으로 싸서 붙이고, 손가락으로 누르기 좋게 키웠다. */
.chart-head-btns {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.chart-prevhigh-btn {
  flex: 0 0 auto;
  min-width: 0;
  height: 36px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--row);
  color: var(--text);
  font-size: 14px;
  line-height: 1;
}

/* 켜면 차트에 그려지는 전 고점 선과 같은 호박색으로 눌린 티를 낸다. */
.chart-prevhigh-btn.active {
  border-color: #ffb300;
  background: #ffb300;
  color: #221a00;
}

.chart-limitup-btn.active {
  border-color: #e03131;
  background: #e03131;
  color: #fff;
}

.confirm-overlay.hidden {
  display: none;
}

.confirm-box {
  width: min(360px, 100%);
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
}

/* 주도테마 카드 안 종목별 자기 테마 표시 (관련주 펼쳤을 때 특히 유용). 누르면 테마 지정 팝업 */
.theme-stock-owntheme {
  font-size: 11px;
  color: var(--blue);
  margin-top: 2px;
  cursor: pointer;
}

.theme-assign-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
  max-height: 240px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 테마 지정 팝업 떠 있는 동안 뒤 페이지 스크롤 잠금 */
body.modal-open {
  overflow: hidden;
}

.theme-assign-chip-empty {
  color: var(--muted);
  font-size: 13px;
}

.theme-assign-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  background: var(--row);
}

.theme-assign-chip.excluded {
  opacity: 0.5;
  text-decoration: line-through;
}

.theme-assign-chip-x {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}

.confirm-box p {
  color: var(--muted);
  line-height: 1.5;
}

.panel-toggle-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--row);
}

.panel-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  background: var(--row);
  position: relative;
}

.panel-toggle-row.dragging {
  opacity: 0.55;
  z-index: 5;
  border-radius: 6px;
  background: var(--bg);
}

.panel-toggle-handle {
  flex: 0 0 auto;
  padding: 4px 6px;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.panel-toggle-row label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

/* CASINO 팝업의 기타 옵션 토글 (패널 목록과 별개, 드래그 없음) */
.option-toggle-row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.option-toggle-row label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

/* CASINO 팝업 - 기준봉 최소 거래대금 가로형 선택 컨트롤.
   라벨(9글자)과 버튼 5개를 한 줄에 억지로 같이 넣으면 좁은 팝업 폭에서 라벨이
   짓눌려 세로로 쪼개져 보이는 문제가 있어서, 라벨은 위에 한 줄로 두고 버튼 5개가
   그 아래에서 폭 전체를 가로로 균등하게 채우도록 분리함. */
.option-select-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.option-select-row > span {
  white-space: nowrap;
}
.base-tv-select-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  width: 100%;
}
.base-tv-select-btn {
  padding: 5px 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
}
.base-tv-select-btn.active {
  border-color: var(--blue-down);
  background: var(--blue-down);
  color: #fff;
  font-weight: 600;
}

/* 헤더 팝업의 패널 온오프 체크박스 - 실계좌/모의투자 공통 적용 */
body.panel-holdings-off #holdingsPanel,
body.panel-candidates-off #candidatesPanel,
body.panel-dailypnl-off #dailyPnlPanel,
body.panel-theme-off #themePanel,
body.panel-news-off #telegramNewsPanel,
body.panel-disclosure-off #disclosurePanel,
body.panel-remark-off #remarkPanel,
body.panel-ma20break-off #ma20BreakPanel,
body.panel-themelife-off #themeLifePanel {
  display: none;
}

.confirm-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.restart-btn {
  padding: 6px 14px;
  border: 1px solid var(--red);
  border-radius: 6px;
  background: transparent;
  color: var(--red);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* [2026-08-06 유저 요청] CASINO 팝업 스크롤. 옵션 줄이 계속 늘어 화면 밖으로 나갔다.
   #confirmOverlay 로 좁혀서 손절 확인 팝업(.confirm-box 공유)은 안 건드린다.
   grid 대신 flex 인 이유: grid 의 auto 행은 내용보다 작아지지 않아서 max-height 를 줘도
   가운데가 안 줄고 박스가 통째로 넘친다. flex + min-height:0 이라야 실제로 줄어든다. */
#confirmOverlay .confirm-box {
  display: flex;
  flex-direction: column;
  /* [2026-08-06 유저 요청] 세로 길이.
     처음엔 화면 끝까지 자랐고(스크롤이 없어서 어쩔 수 없었다), 스크롤을 붙인 뒤 560px 로
     줄였는데 이번엔 너무 짧다는 지적. '화면을 넘기지 않을 정도로 길게'가 요청이라
     상한을 없애고 뷰포트에서 여백만 뺀다.
     120px = 위아래 60px씩. 처음 72px(36px씩)로 잡았다가 유저 요청으로 조금 줄였다.
     여백을 두는 이유는 뒤 화면이 비쳐야 전체화면이 아니라 '팝업'으로 읽히기 때문이다.
     dvh 는 아이폰 주소창이 접혔다 펴질 때까지 따라간다(미지원이면 위 vh 줄이 쓰인다). */
  max-height: calc(100vh - 120px);
  max-height: calc(100dvh - 120px);
  min-height: 0;
  /* 같은 화면에 더 담기게 안쪽 여백도 조금 줄인다(.confirm-box 기본 18px/12px). */
  gap: 10px;
  padding: 14px;
}
#confirmOverlay .confirm-scroll {
  flex: 1 1 auto;
  min-height: 0;                    /* 이게 없으면 flex 자식이 내용 높이로 버텨 스크롤이 안 생긴다 */
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;     /* 끝까지 굴렸을 때 뒤 화면이 같이 밀리지 않게 */
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;               /* 스크롤바가 내용을 가리지 않게 */
}

.stock-link {
  color: var(--text);
  font-weight: 720;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* iOS 롱프레스 시 선택/콜아웃 방지 */
}

/* 매매후보/주도테마/상한가 카드뷰 종목명은 등락률만큼 크게, 세 군데 크기 통일 */
:is(#candidateList, #gapRestList, .candidate-cards) .stock-link,
#themeList .stock-link,
#baseList .stock-link {
  font-size: 17px;
}

.stock-link:hover,
.chip-link:hover {
  color: var(--blue);
  text-decoration: underline;
}

.theme-tag {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.theme-tag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin: 2px 0 0;
}

.theme-tag-empty {
  font-size: 13px;
  color: var(--blue-down);
  text-decoration: underline;
  cursor: pointer;
}

.theme-tag-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

/* 주도테마 동반상승 배지 - 오늘 주도테마와 일치하면 몇 종목이 같이 오르는지, 아니면 개별호재 */
.theme-momentum-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.theme-momentum-hot {
  background: #ff6b35;
  color: #fff;
}

.theme-momentum-solo {
  background: var(--line);
  color: var(--muted);
}

/* 신생 테마 클러스터 배지 (정적 테마 DB로 못 잡은 이슈 기반 묶음) */
.theme-momentum-cluster {
  background: #7b4dff;
  color: #fff;
}

/* 뉴스 DB 이슈 배지 (실제 재료 기사 확인 + 주가반응 추적된 이슈) - 가장 신뢰도 높은 신호 */
.theme-momentum-news {
  background: #0f9d8c;
  color: #fff;
}

/* 동반상승 종목 확장 줄 */
.momentum-expand {
  margin: 2px 0 0;
}

.momentum-badge-toggle {
  cursor: pointer;
  user-select: none;
}

.momentum-expand-body {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.momentum-expand-body.hidden {
  display: none;
}

.momentum-member {
  font-size: 14px;
  padding: 3px 9px;
  border-radius: 4px;
  background: var(--chip);
  color: var(--text);
  border: 1px solid #17c2ab;  /* 관련 종목 칩 청록색 아웃라인 */
}

/* 코드가 있어 클릭 시 차트가 열리는 멤버 칩 */
.momentum-member-clickable {
  cursor: pointer;
}
.momentum-member-clickable:hover {
  background: var(--line);
}

.momentum-member .member-up { color: var(--red, #ff5b5b); font-weight: 700; }
.momentum-member .member-down { color: var(--blue-down, #4cb3ff); font-weight: 700; }
.momentum-member .member-lag { color: var(--muted, #8a95a3); margin-left: 2px; }

/* 동반상승 멤버 칩의 실시간 등락률(오늘, 펼칠 때 REST로 한 번 조회) - 과거 최대반응
   (member-up/down)과 별개로 추가 표시. className이 change-up/down/zero로 덮어써지므로
   마진은 절대 안 바뀌는 data 속성으로 건다. */
.momentum-member [data-live-pct]:not(:empty) { margin-left: 4px; }

#baseList .base-assign-text,
:is(#candidateList, #gapRestList, .candidate-cards) .base-assign-text {
  cursor: pointer;
}

.theme-assign-btn {
  background: none;
  border: none;
  padding: 0 2px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

/* [2026-08-12 유저 요청] 접기/펼치기 줄(2차상승·눌림없이지속·손절10%초과·거래대금500억이하)이
   폰에서 잘 안 눌린다. 글자 높이(약 16px)가 그대로 탭 영역이라 손가락으로는 너무 얇았다.
   글자를 키우고 위아래 여백을 탭 영역으로 확보한다 - 목록이 밀리지 않게 margin 에서
   padding 만큼 빼서 차지하는 자리는 그대로 둔다. */
.base-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  margin: 0;
  padding: 12px 4px 10px;
  min-height: 44px;          /* 손가락 기준 최소 탭 영역 */
  box-sizing: border-box;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;   /* 기본 회색 네모 대신 아래 :active 로 직접 그린다 */
  transition: background 0.12s;
}

/* 눌린 걸 눈으로 확인시켜 준다. 반응이 없으면 안 눌린 줄 알고 또 누르게 된다. */
.base-divider:active {
  background: color-mix(in srgb, var(--muted) 18%, transparent);
}

/* [2026-08-13] NXT(대체거래소) 캔들 토글. 켜져 있는 동안은 화면의 캔들이 정규장이 아니므로
   눈에 띄게 표시한다 - 켠 걸 잊고 정규장으로 착각하면 그게 제일 위험하다. */
/* [2026-08-13] NXT 토글 버튼 제거로 관련 스타일도 삭제.
   시간외를 흡수한 봉은 캔버스에서 속을 채워 그린다(app.js drawCandleChart). */

/* [2026-08-13 유저 요청] 차트 거래소 선택 버튼(KRX / NXT).
   NXT(통합)일 때만 빨강 - 화면의 캔들이 정규장만이 아니라는 표시다.
   KRX 일 때는 다른 툴바 버튼과 같은 회색으로 둔다. */
/* NXT 거래 종목이면 KRX 를 보고 있을 때도 빨간 글씨로 둔다 - "여기서 통합으로 바꿀 수
   있다"는 신호. 통합을 보고 있을 때는 배경까지 빨강으로 채워 확실히 구분한다. */
#chartExchangeBtn:not(:disabled) {
  color: #c62828;
  border-color: #c62828;
}
#chartExchangeBtn.active {
  background: #c62828;
  border-color: #c62828;
  color: #fff;
}
#chartExchangeBtn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* [2026-08-14 유저 요청] 공시 패널. 일정 패널(.event-row)의 골격을 그대로 쓰고
   공시 고유 부분만 여기서 더한다. */
/* 여러 건이면 패널 안에서 스크롤한다 - 페이지 전체가 길어지지 않게. */
#disclosureList {
  max-height: 320px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* [2026-08-16 유저 요청] 후보 카드 '재료' 줄 (Qwen theme-analysis / remarks 조인).
   차트에 안 나오는 정보 - 최소 반등에서 나올지 들고 갈지의 판단 재료다. */
.mat-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 2px 0;
  font-size: 12px;
  line-height: 1.45;
}
.mat-issue { color: #d8d8d8; font-weight: 700; }
.mat-theme { color: #9aa7b4; }
.mat-theme::before { content: "· "; color: #667; }
/* 이슈가 없어서 테마가 맨 앞이면 구분점을 안 찍는다 (아이비젼웍스 "· 유리 기판" 방지) */
.mat-theme:first-child::before { content: none; }
.mat-badge {
  padding: 0 5px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.mat-lead  { background: #1565c0; }  /* 주도 테마 - 무리를 지어 오름 */
.mat-keep  { background: #2e7d32; }  /* 실적·수주형 - 오래 가는 재료 */
.mat-short { background: #ef6c00; }  /* 수급·이벤트형 - 최소 반등에서 나올 자리 */
.mat-rot   { background: #6d4c41; }  /* 순환매 - 같은 테마에서 먼저 간 종목이 있다 */
.mat-chain { background: #455a64; }  /* 재료 사슬 - 발언에서 시작된 테마 */
.mat-old  { background: #78909c; }   /* 기준봉보다 오래된 분석 */
/* [2026-09-09 유저] 재료 나이. 며칠부터 위험한지 아직 근거가 없어 일부러 색을 안 준다 -
   색을 칠하면 '이 숫자는 나쁘다'로 읽히는데, 지금은 숫자를 모으는 중이다.
   테두리만 두고 속을 비워 다른 배지(판정)와 성격이 다름을 드러낸다. */
.mat-age {
  background: transparent;
  border: 1px solid rgba(120, 144, 156, 0.7);
  color: var(--muted);
  font-weight: 600;
}
/* [2026-09-02 Qwen 요청] 며칠 갈 재료인지 실측 판정. 값 세 가지(물량 늘어남/남의 재료/
   아직 안 정해짐)가 전부 '경고'라 색을 나누지 않고 한 가지로 쓴다 - 색이 갈리면
   그중에 나은 게 있는 것처럼 읽힌다. 손절선 파랑(mat-lead)과 헷갈리지 않게 붉은 계열. */
.mat-cont { background: #b3261e; }

/* [2026-09-02 유저] 갭눌림 모양 점수 배지. 색은 점수대로(85+ 초록 / 70+ 황토 / 그 아래 회색).
   근거 다섯 숫자는 title 툴팁에 넣는다 - 카드에 다 적으면 종목명보다 시끄럽다. */
.gap-shape-badge {
  color: #fff;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 12px;
  font-weight: 600;
}
.mat-remark { color: #ffcc66; }      /* 간밤 발언 연관 */


/* [2026-08-26 유저 요청] 2차상승 후보를 접지 않고 다 보여주되 카드로 구분한다.
   이미 한 번 올라갔다 눌린 자리라 재진입 우선순위가 낮다 - 색으로 '한 박자 늦은 자리'임을
   알리되, 배경을 넓게 칠하면 눈이 피로하므로(2026-08-26 상한가 패널에서 겪음)
   왼쪽 띠와 글자 톤만 손댄다. */
/* [2026-08-27 유저 요청] "2차 상승 없는 종목을 검은색으로 하고 2차 상승을 지금 1차 상승의
   색으로" - 위아래를 뒤집는다. 검은 카드가 '2차상승'이 아니라 '아직 2차가 아닌 자리',
   즉 지금 봐야 할 쪽을 가리키게 된다. 2차상승은 일반 카드색으로 물러나고, 구분은
   왼쪽 파란 띠가 계속 맡는다. */
:is(#candidateList, .candidate-cards) .row:not(.candidate-secondrise) {
  /* ★ 유저는 다크 테마를 쓴다. 밝은 테마 기준으로 색을 잡으면 안 된다.
       다크 테마 값:  --bg 19 / --panel 28 / --row 38(일반 카드)
       #37474f 는 밝기 68 이라 일반 카드보다 밝아서 "밝다"는 지적을 받았다.
     두 테마 모두에서 주변보다 어둡도록 거의 검정으로 둔다. */
  background: #0b0d0e;
  color: #e8eef1;
}
.row.candidate-secondrise {
  border-left: 3px solid #4cb3ff;   /* 2차상승 배지와 같은 파랑 */
  background: var(--row);           /* 일반 카드색으로 되돌림 */
  opacity: 1;
}
/* 어두운 배경 위에선 안쪽 글자도 밝게 - 안 그러면 검은 글씨가 묻힌다.
   등락률 빨강/파랑(change-up / change-down)은 의미 있는 색이라 건드리지 않는다. */
:is(#candidateList, .candidate-cards) .row:not(.candidate-secondrise) :is(
  .name-main, .name-price-block, .cap-text, .candidate-tv-line,
  .entry-line, .theme-tag, .mat-issue, .holding-detail) {
  color: #e8eef1;
}
:is(#candidateList, .candidate-cards) .row:not(.candidate-secondrise) :is(
  .theme-kind-label, .mat-theme, .theme-tag-empty) {
  color: #a7b6bf;
}
:is(#candidateList, .candidate-cards) .row:not(.candidate-secondrise) a {
  color: #cfe3ef;
}

/* [2026-08-27 유저 요청] 상한가 블럭은 항상 보이고, 제목을 눌러 내용을 펼친다.
   화살표는 제목 글자를 안 건드리려고 ::before 로 붙인다 - 렌더링 쪽에서
   baseHeading 의 textContent 를 갈아끼워도 화살표는 그대로 남는다. */
/* [2026-08-27 유저 요청] "블럭 말고 헤드부분만 밝은 빨강".
   처음엔 패널 전체를 어두운 적갈색으로 채웠는데 그게 아니라 제목줄만이었다.
   면적이 좁으니 밝은 빨강이어도 눈에 부담이 적다 - 넓게 칠하지 말라는 게 여태 지적의
   핵심이었다. 패널이 overflow: hidden + border-radius 라 위 모서리는 알아서 잘린다. */
/* [2026-08-30 유저 요청] 매매후보 탭 고름 색과 같은 빨강으로 맞춘다(#e03131 -> #ff0a24).
   두 곳이 같은 빨강이어야 "빨강 = 지금 이것" 이 한 가지 뜻으로 읽힌다. */
#basePanel > .panel-head {
  background: #ff0a24;
  border-bottom-color: #ff0a24;
}
#basePanel > .panel-head,
#basePanel > .panel-head h2,
#basePanel > .panel-head span {
  color: #fff;
}
#baseHeading {
  cursor: pointer;
  user-select: none;
}

/* [2026-09-03] 머리띠 색은 갭눌림에만 준다.
   초록 -> 파랑 -> 둘 다 원복("헤더에 색을 채우니까 정신 없다") -> 갭눌림만 다시 파랑.
   매매후보는 안 칠한다. 그 안에 3/5/10/20일선 탭이 있고 고른 탭이 빨강으로 켜지는데,
   머리띠까지 칠하면 그 색과 부딪혀 어디를 보는 중인지 흐려진다.
   갭눌림은 탭이 없어 그럴 일이 없고, 상한가(빨강)와 갈려 읽힌다.
   색 #1565c0 은 이 앱이 이미 쓰는 파랑이다(10일선 이평선, '주도' 배지). */
/* 접기 화살표도 머리띠 위라 회색(--muted)이면 안 보인다. */

/* [2026-09-03 유저 요청] 매매후보 머리띠도 채운다.
   위 주석(2026-09-02)에서 "매매후보는 안 칠한다"고 했던 걸 뒤집는 것인데, 그때 부딪힌
   이유는 파랑으로 칠했기 때문이다. 머리띠 바로 아래 탭 다섯이 각자 색을 갖고 있고
   (분홍/초록/파랑/노랑/보라) 고른 탭이 파란 지시선으로 켜져서, 머리띠까지 원색이면
   어디를 보는 중인지 흐려진다. 그래서 무채색(#37474f)으로 간다 -
   머리띠는 '묶음 제목'만 하고 색은 안쪽 탭이 담당한다.
   세 머리띠가 상한가 빨강 / 매매후보 청회색 / 갭눌림 파랑으로 갈려 읽힌다. */
#candidatesPanel > .panel-head {
  background: #37474f;
  border-bottom-color: #37474f;
}
#candidatesPanel > .panel-head,
#candidatesPanel > .panel-head h2,
#candidatesPanel > .panel-head span {
  color: #fff;
}
/* [2026-09-09] 접기 화살표를 뺐으므로 그 색 규칙도 지운다 - 이제 가리키는 게 없다. */
/* [2026-09-04 유저] "20일선 돌파 눌림 블럭에 보이는 아이콘 삭제해줘"
   기준봉 거래대금 앞에 붙는 캔들 아이콘(renderCandidateRow 가 모든 카드에 넣는다).
   이 블럭에서만 감춘다 - 다른 블럭(3/5/10/20일선·갭)에서는 그대로 쓴다. */
#ma20BreakList .tv-candle-icon {
  display: none;
}

/* [2026-09-04 유저] 살아 있는 테마 블럭 */
#themeLifePanel > .panel-head {
  background: #1b6b5a;
  border-bottom-color: #1b6b5a;
}
#themeLifePanel > .panel-head,
#themeLifePanel > .panel-head h2,
#themeLifePanel > .panel-head span {
  color: #fff;
}
#themeLifeHeading::before {
  color: rgba(255, 255, 255, 0.85);
}

/* [2026-09-09 유저] "주도테마 블럭 헤드를 눈에 띄는 색으로 채워줘, 연두색?"
   머리띠 색이 없던 유일한 블럭이라 눈에 안 들어왔다.
   상한가 빨강 / 매매후보 청회색 / 살아있는테마 청록 / 20일선돌파 보라 와 갈리는 연두.
   ★ 다른 머리띠는 글자가 흰색인데 여기만 검다 - 연두가 밝아서 흰 글자는 안 읽힌다. */
#themePanel > .panel-head {
  background: #8bc34a;
  border-bottom-color: #8bc34a;
}
#themePanel > .panel-head,
#themePanel > .panel-head h2,
#themePanel > .panel-head span {
  color: #14300a;
}

/* [2026-09-09 Qwen 요청] '오늘 붙은 불' 성적표 한 줄. 머리띠 바로 아래.
   요청서 지시대로 회색 작은 글씨다 - 아직 검증 안 된 판정의 성적이라,
   판정보다 성적이 먼저 그리고 조용히 보여야 한다. */
.theme-board-score {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.08));
}
.theme-board-score.hidden { display: none; }
.theme-board-tag {
  flex: 0 0 auto;
  padding: 0 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid rgba(150, 150, 150, 0.5);
}
.theme-board-line { min-width: 0; }

.theme-life-row { display: block; }
.theme-life-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.theme-life-badge {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  border-radius: 5px;
  padding: 2px 8px;
  flex: 0 0 auto;
}
.theme-life-name {
  font-size: 15px;
  font-weight: 700;
  min-width: 0;
}
.theme-life-cold {
  font-size: 11px;
  color: #8a939a;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
}
.theme-life-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.theme-life-names {
  font-size: 13px;
  color: var(--blue-down);
  margin-top: 3px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
/* [2026-09-05 유저] 눌러서 차트를 여는 종목. 누를 수 있다는 게 보이게 테두리를 준다.
   살아있음(20일선 위)은 초록, 죽음은 회색으로 눕힌다 - 죽은 테마가 한눈에 보이게. */
.theme-life-stock {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 8px;
  cursor: pointer;
}
.theme-life-stock.alive {
  border-color: #2e7d32;
  color: #2e7d32;
}
.theme-life-stock.dead {
  color: #8a939a;
  opacity: 0.7;
}
.theme-life-stock i {
  font-style: normal;
  font-size: 11px;
  opacity: 0.85;
}
/* 'N/M 살아있음' - 이게 주도테마인지 아닌지의 진짜 잣대다(날수가 아니라). */
.theme-life-alive {
  font-size: 11px;
  font-weight: 700;
  color: #2e7d32;
  border: 1px solid #2e7d32;
  border-radius: 4px;
  padding: 1px 5px;
}
.theme-life-alive.none {
  color: #8a939a;
  border-color: var(--line);
}
.theme-life-stock:active {
  filter: brightness(0.85);
}
/* 상한가가 난 날들. 한 줄로 훑어보면 '몰려서 터졌나 며칠에 걸쳤나'가 바로 보인다. */
.theme-life-days {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}
.theme-life-days span {
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
}
/* 카드에 붙는 '테마 N일째' 배지 - 갭눌림 점수 배지와 같은 모양 */
.theme-life-tag {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
  padding: 1px 6px;
}

/* [2026-09-04 유저] 20일선 돌파 눌림 머리띠. 갭눌림 파랑·상한가 빨강과 갈리게 보라. */
#ma20BreakPanel > .panel-head {
  background: #5b3a8e;
  border-bottom-color: #5b3a8e;
}
#ma20BreakPanel > .panel-head,
#ma20BreakPanel > .panel-head h2,
#ma20BreakPanel > .panel-head span {
  color: #fff;
}
#ma20BreakHeading::before {
  color: rgba(255, 255, 255, 0.85);
}

#candidateHeading {
  cursor: pointer;
  user-select: none;
}
/* 설정 목록에서 상한가 줄에만 붙는 안내 - 체크박스가 없는 이유를 알려준다. */
.panel-toggle-note {
  margin-left: 6px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}
#baseHeading::before {
  content: "▼ ";
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);   /* 빨강 제목줄 위라 회색(--muted)이면 안 보인다 */
}
#basePanel.panel-collapsed #baseHeading::before {
  content: "▶ ";
}
#basePanel.panel-collapsed #baseTabBar,
#basePanel.panel-collapsed #baseList {
  display: none;
}

/* [2026-09-02 유저 요청] "매매후보에도 접기 버튼 갭눌림 후보도 접기 버튼"
   상한가에만 있던 접기를 두 패널에도 준다. 제목줄 화살표와 '내용 숨김'이 한 벌이라
   둘 다 있어야 한다 - 화살표만 있으면 눌러도 안 접히는 것처럼 보인다.
   .panel-head 를 남기고 그 아래만 숨긴다(제목줄은 다시 펼치는 손잡이라 늘 보여야 함). */
/* [2026-09-08] 위 규칙이 셀렉터 목록만 남고 본문이 없는 채로 끝나 있었다.
   그래서 세 셀렉터가 아래 .base-divider--secondrise 규칙에 딸려 들어가,
   접기 화살표(content)도 '접으면 숨김'(display:none)도 아예 존재하지 않았다.
   매매후보·20일선돌파 패널은 제목을 눌러도 클래스만 바뀌고 아무 일도 안 일어났다.
   2026-09-02 유저 요청("매매후보에도 접기 버튼")대로 되살린다. */
/* [2026-09-09 유저] "매매후보 블럭에 접기 버튼 삭제하라니까".
   app.js 에서 setupPanelFold 호출만 뺐더니 화살표가 그대로 남아 있었다 - 화살표를
   그리는 건 JS 가 아니라 여기 content 다. 매매후보만 빼고 20일선돌파는 그대로 둔다.
   제목 클릭은 접기가 아니라 목록 새로고침(rebuildCandidatesAndLoad)이라 그대로 산다. */
#ma20BreakHeading::before {
  content: "▼ ";
  font-size: 11px;
}
#ma20BreakPanel.panel-collapsed #ma20BreakHeading::before {
  content: "▶ ";
}
#ma20BreakPanel.panel-collapsed > *:not(.panel-head) {
  display: none;
}

/* [2026-09-08 유저 요청] "시장발언 블럭에 접기 버튼 만들어주고"
   위 패널들과 같은 골격이다 - 제목줄은 다시 펼치는 손잡이라 늘 남기고 그 아래만 숨긴다. */
#remarkTitle {
  cursor: pointer;
  user-select: none;
}
#remarkTitle::before {
  content: "▼ ";
  font-size: 11px;
}
#remarkPanel.panel-collapsed #remarkTitle::before {
  content: "▶ ";
}
#remarkPanel.panel-collapsed > *:not(.panel-head) {
  display: none;
}
/* 접었을 때는 날짜 넘김 버튼도 쓸 일이 없다 - 제목줄에 있어 위 규칙으로는 안 숨는다. */
#remarkPanel.panel-collapsed .remark-nav,
#remarkPanel.panel-collapsed #remarkUpdated {
  display: none;
}

/* 2차상승 구분선 - 접히지 않으므로 화살표(▶) 없이 라벨만. 클릭 대상이 아니다. */
.base-divider--secondrise {
  color: #4cb3ff;
  border-color: #4cb3ff;
  cursor: pointer;   /* [2026-08-30] 이제 진짜로 접힌다 */
}
/* [2026-08-16 유저 요청] 눌림 지문 배지 (마름% · 3일선 방향 · 회차 · 횡보).
   악재로 빠지는 건지 거래 없이 눌리는 건지 색으로 바로 가른다. */
/* [2026-08-17 유저 요청] 마름 배지를 기준봉 거래대금 바로 앞으로 옮겼다.
   metrics-top 은 space-between 이라 그냥 넣으면 시총·마름·거래대금이 균등하게
   벌어진다. 마름+거래대금을 한 덩어리로 묶어 오른쪽 끝에 붙인다. */
.candidate-metrics-right {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.fp-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.fp-badge {
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.fp-dry  { background: #2e7d32; }   /* 매물 없음 · 추세 살아있음 */
.fp-wet  { background: #c62828; }   /* 거래 실림 · 추세 꺾임 */
/* [2026-09-08] 페이스 경고(전날 같은 시각의 120~200%). 빨강(=매매 금지)까진 아니고
   "붙는 중이니 보라"는 뜻이라 그 사이 색을 쓴다. */
.fp-warn { background: #ef6c00; }

/* [2026-09-10 유저] "이건 취소할께" - '최소반등 / 오버슈팅 여지' 배지를 걷어내며
   .rebound-room / .rr-* 도 같이 지웠다(2026-09-08 에 넣은 것). git 에 있다. */
/* [2026-08-17 유저 요청] 판단 보류(마름 100% 초과 = 아직 눌림 국면이 아님)는
   배경을 안 칠한다. 신호가 아니라 '아직 볼 게 없다'는 뜻이라 눈에 덜 띄어야 한다. */
.fp-idle {
  background: none;
  color: var(--muted);
  font-weight: 400;
  padding-left: 0;
  padding-right: 0;
}

/* [2026-08-19 유저 요청] 시장 발언 날짜 넘기기 (버튼 + 좌우 스와이프). */
.remark-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}
.remark-nav-btn {
  min-width: 26px;
  height: 24px;
  padding: 0 5px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--row);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.remark-nav-btn:disabled { opacity: 0.3; cursor: default; }
.remark-date-label {
  min-width: 44px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #d8d8d8;
}

/* [2026-08-15] 시장 발언 패널. 일정 패널 골격(.event-row)을 그대로 쓴다. */
.remark-badge {
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: 4px;
  background: #6a1b9a;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.remark-quote {
  margin: 4px 0 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  word-break: keep-all;
}
/* [2026-09-08 유저 요청] "뉴스를 다 보이게 해줘 지금은 스크롤로 보이는데"
   360px 안에서 따로 스크롤되던 것을 없앤다. 패널이 내용만큼 길어지고 페이지 스크롤
   하나로 읽는다 - 발언은 훑어보는 것이라 창 안에 가둘 이유가 없다.
   길어지는 게 부담이면 제목줄을 눌러 통째로 접는다(#remarkTitle 접기). */
#remarkList {
  overflow: visible;
}

.disclosure-badge {
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: 4px;
  background: #2e7d32;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.disclosure-title {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  word-break: keep-all;
}
.disclosure-note {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}
.disclosure-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* [2026-08-13 유저 요청] 종목명 옆 (NXT) - 대체거래소 매매 가능 종목에만 붙는다.
   거래소 라벨(코스피/코스닥)과 같은 크기로 두되 색으로만 구분한다. */
.market-label.nxt-label {
  color: #c62828;
  /* [2026-08-13 유저 제보] 너무 작아서 안 보인다.
     .market-label 은 아래쪽(2200줄대)에서 12px 로 다시 정의된다 - 크기를 여기서 못박는다. */
  font-size: 17px;
  font-weight: 800;
  margin-left: 2px;
}

/* 매매후보 정렬 버튼 - 탭당 하나만. 누르면 지금 이 순간 실시간가 기준으로 음봉/양봉 다시 정렬 */
.candidate-sort-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  margin: 6px 0 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.candidate-sort-divider::before,
.candidate-sort-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 0;
  border-top: 1px dashed var(--line);
}

.base-divider::before,
.base-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 0;
  border-top: 1px dashed var(--line);
}

.pnl-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  margin: 14px 0 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.pnl-divider::before,
.pnl-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 0;
  border-top: 1px dashed var(--line);
}

.pnl-stock-list.hidden {
  display: none;
}

.pnl-stock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line);
}

.pnl-stock-name {
  font-size: 14px;
}

.pnl-stock-amount {
  font-size: 14px;
  font-weight: 600;
}

.theme-list,
.issue-text {
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.row .entry-line {
  margin: 2px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dim, #9aa);
}
.entry-dist { color: #d4a017; font-weight: 700; }
body[data-theme="dark"] .entry-dist { color: #ffd700; }
.entry-reached { color: #4caf7d; font-weight: 700; }

/* 매수타점 표시. 예전엔 눌러서 모의투자 지정가 예약을 걸었는데 모의투자를 없애면서
   클릭 동작은 사라졌다(아래 pointer-events: none). 지금은 표시 전용이다. */
.entry-target {
  display: inline-block;
  cursor: pointer;
  font-size: 0.95em;
  font-weight: 700;
  padding: 1px 8px;
  border: 1px solid #2ecc71;
  border-radius: 6px;
  color: #2ecc71;
}
.entry-price { font-size: 1.3em; font-weight: 800; }
.entry-price.entry-price-near { color: #fff; }
/* 현재가가 타점 근처(±0.5%)까지 오면 가격 글자를 흰색으로 강조 */
.entry-target.entry-target-near {
  color: #fff;
}
.entry-target.entry-target-confirm {
  background: #ffd700;
  color: #1d2528;
  border-radius: 4px;
  padding: 2px 6px;
  text-decoration: none;
}
/* 표시 전용이므로 클릭을 막는다. body 의 account-tab-real 클래스는 계좌가 하나뿐이라
   항상 붙어 있다(index.html). 카드 안에서의 색은 아래쪽 candidate-cards 규칙이 덮는다. */
body.account-tab-real .entry-target {
  cursor: default;
  text-decoration: none;
  opacity: 0.5;
  pointer-events: none;
}


.row .reason-text {
  border-left: 3px solid var(--line);
  padding-left: 8px;
  margin: 0;
  color: #888;
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.theme-list {
  color: var(--blue);
}

.issue-text {
  color: var(--text);
  margin: 0;
}

.issue-bar {
  color: var(--blue-down);
  font-weight: 700;
  margin-right: 2px;
}

.candidate-tv-line {
  font-size: 14px;
  margin: 0;
}

.candidate-tv-inline {
  display: inline-block;
  margin-left: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.market-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.topbar .market-label {
  font-size: 19px;
  font-weight: 760;
  color: inherit;
}

.topbar .market-label.conservative {
  color: #42a5f5;
}

.topbar .market-label.aggressive {
  color: #f9c74f;
}

.cap-text {
  color: var(--muted);
  /* [2026-08-01 유저 요청] 시총만 12px로 작아 옆의 거래대금(.candidate-tv-line 14px)과
     눈높이가 안 맞았다. 같은 14px로 맞춘다. */
  font-size: 14px;
  font-weight: 400;
}

#baseList .cap-text {
  color: var(--text) !important;
}

/* 상한가 행 우측: 시총 + 당일 거래대금 (오른쪽 정렬) */
.base-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

/* 상한가 카드: 테마 태그 영역과 분리된 클릭 영역(종목명+사유+이슈) - 안쪽 간격은 촘촘하게 */
.base-chart-target {
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
}

/* 종목명 줄: 시총을 오른쪽에 붙임 */
.base-chart-target.base-name-row {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.base-tv {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.base-tv .highlight-red-underline {
  color: #ffd700;
  text-decoration: none;
}

/* 거래대금 500억 이하 상한가 종목: 텍스트 회색 처리 */
.row.base-dim .stock-link,
.row.base-dim .name-line,
.row.base-dim .change-up,
.row.base-dim .change-down,
.row.base-dim .cap-text,
.row.base-dim .base-tv,
.row.base-dim .theme-tag,
.row.base-dim .reason-text,
.row.base-dim .issue-text,
.row.base-dim .market-label,
.row.base-dim .highlight-red-underline {
  color: #8a939a;
}

.row.base-dim .highlight-red-underline {
  text-decoration-color: #8a939a;
}

.row.base-dim .base-tv .highlight-red-underline {
  color: #ffd700;
  text-decoration: none;
}

/* 상한가 거래대금 500억 이상 — 밝은 핑크색 배경 */
.row.base-above-threshold {
  background-color: transparent;
  border-color: #ff6b6b;
}

body[data-theme="dark"] .row.base-above-threshold {
  background-color: transparent;
  border-color: #ff6b6b;
}



/* 최상단 보유종목 탭이 "실계좌"일 때는 매매후보 카드의 모의매수/모의매도 버튼을 숨김 */

/* 매매후보 - 단계별 매수타점 알림 온/오프 스위치 */
.entry-alert-toggle-bar {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding: 6px 14px;
  font-size: 11px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.entry-alert-toggle-bar .entry-alert-toggle {
  flex: 1 1 0;
  justify-content: center;
}

.entry-alert-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.entry-alert-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.entry-alert-toggle-slider {
  position: relative;
  width: 24px;
  height: 14px;
  background: var(--line);
  border-radius: 999px;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

.entry-alert-toggle-slider::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s ease;
}

.entry-alert-toggle input[type="checkbox"]:checked + .entry-alert-toggle-slider {
  background: #ffd700;
}

.entry-alert-toggle input[type="checkbox"]:checked + .entry-alert-toggle-slider::before {
  transform: translateX(10px);
}









/* 손절 매도 확인 팝업 */

/* 주도테마 탭 */
.theme-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 0 14px;
  overflow-x: hidden;
  overflow-y: visible;
  cursor: grab;
  user-select: none;
  touch-action: pan-x;
  position: relative;
  height: 42px;
}

/* 중앙 고정 기준선 (하늘색) - ID 선택자만 적용 */

/* id 선택자용 중앙 고정 기준선 */
#themeTabBar,
#baseTabBar,
#pnlTabBar {
  position: relative;
  overflow: visible !important;
}

#themeTabBar::before,
#baseTabBar::before,
#pnlTabBar::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 1px;
  background-color: var(--blue);
  z-index: 1;
  pointer-events: none;
}

.theme-tab-bar:active {
  cursor: grabbing;
}

.theme-tabs-container {
  display: flex;
  gap: 0;
  width: 100%;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.theme-tab {
  min-width: 0;
  height: 42px;
  padding: 0 20px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  margin-bottom: -1px;
}

/* 요일(월~금) 탭은 5개가 한 줄에 들어오도록 간격을 좁힌다 */
#baseTabBar .theme-tab,
#themeTabBar .theme-tab,
#pnlTabBar .theme-tab {
  flex: 1 1 0;
  padding: 0 4px;
  font-size: 12px;
  text-align: center;
}

.theme-tab.active {
  color: var(--text);
  border-bottom-color: transparent;
}

/* 매매후보 탭: 활성 탭 아래 파란 지시선 */
.panel:has(> .panel-head > #candidateHeading) .theme-tab-bar {
  position: relative;
  overflow: visible !important;
}

.panel:has(> .panel-head > #candidateHeading) .theme-tab-bar .theme-tab {
  position: relative;
  border-bottom: none !important;
  margin-bottom: 0 !important;
  font-size: 19.5px;
}

.panel:has(> .panel-head > #candidateHeading) .theme-tab-bar .theme-tab.active {
  color: var(--text);
  font-weight: 800;
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  border-radius: 8px 8px 0 0;
}

/* 활성 탭 아래 파란 선 – 탭 버튼 내부에 위치시켜 overflow 이탈 방지. 헷갈린다는 피드백으로
   두께/색을 눈에 띄게 키움 (기존 1px 얇은 선 -> 3px + 배경 하이라이트 같이 적용) */
.panel:has(> .panel-head > #candidateHeading) .theme-tab-bar .theme-tab.active::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 2px;
  background-color: var(--blue);
  pointer-events: none;
}

.panel:has(> .panel-head > #candidateHeading) .theme-tab-bar .theme-tab[data-candidate-tab="ma3"]::after {
  color: #ec407a;
  font-weight: 700;
}
.panel:has(> .panel-head > #candidateHeading) .theme-tab-bar .theme-tab[data-candidate-tab="pullback"]::after {
  color: #43a047;
  font-weight: 700;
}
.panel:has(> .panel-head > #candidateHeading) .theme-tab-bar .theme-tab[data-candidate-tab="ma10"]::after {
  color: #1e88e5;
  font-weight: 700;
}
.panel:has(> .panel-head > #candidateHeading) .theme-tab-bar .theme-tab[data-candidate-tab="ma20"]::after {
  color: #fbc02d;
  font-weight: 700;
}

/* 매매후보 탭바: 기본은 3/5일선 2개만 보이고, 스와이프해야 10/20일선 페이지로 넘어감
   (.theme-tab-bar 자체는 건드리지 않고 안쪽에 별도 클리핑 뷰포트를 둬야 활성 탭 밑줄 지시선이 안 잘림) */
.panel:has(> .panel-head > #candidateHeading) .candidate-tab-viewport {
  overflow: hidden;
  width: 100%;
  height: 42px;
  position: relative;
}

/* [2026-07-30 유저 요청] 한 화면에 3개(3일선/5일선/10일선)가 보이게.
   탭 4개 기준 컨테이너 = 4/3 = 133.3333%, 각 탭 = 컨테이너의 25% = 화면의 33.33%.
   20일선을 다시 켜면 4번째 탭이 두 번째 페이지가 되어 스와이프로 넘어간다. */
/* [2026-09-03 유저 요청] "3,5,10,20,주봉 모두 한 화면에 넣어봐바".
   폭을 100% 로 두고 각 탭을 20% 씩 = 다섯이 한 줄에 다 들어온다.
   (같은 날 잠깐 셋씩 두 페이지로 뒀다가 되돌린 것 - 2026-08-30 의 넷 배치와 같은 방식.)
   한 칸이 좁아지니 글자 크기와 여백을 같이 줄인다. 안 줄이면 '10일선'이 잘린다. */
.panel:has(> .panel-head > #candidateHeading) .candidate-tab-viewport .theme-tabs-container {
  display: flex;
  width: 100%;
  flex-shrink: 0;
  transform: none !important;   /* 페이지가 하나뿐이라 밀 이유가 없다 */
}

/* [2026-09-04 유저] '갭' 탭이 붙어 여섯이 됐다. 한 칸이 화면의 1/6 이라
   360px 폰에서 약 51px - '10일선' 네 글자가 겨우 들어간다. 글자를 한 단계 더 줄인다. */
.panel:has(> .panel-head > #candidateHeading) .candidate-tab-viewport .theme-tabs-container .theme-tab {
  flex: 0 0 16.6667% !important;
  text-align: center;
  padding: 0 1px;
  min-width: 0;
  font-size: 13px;
  letter-spacing: -0.6px;
  white-space: nowrap;
}

#themeTabBar .theme-tab.today,
#baseTabBar .theme-tab.today,
#pnlTabBar .theme-tab.today,
#themeTabBar .theme-tab.today.active,
#baseTabBar .theme-tab.today.active,
#pnlTabBar .theme-tab.today.active {
  color: #ffd700 !important;
  font-weight: bold;
}

/* 하락 종목이 있는 탭은 파란색 강조 */

.theme-tab:hover:not(.active) {
  color: var(--text);
}

.candidate-divider {
  margin: 12px 0 8px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.candidate-info-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

/* 2026-07-20: 매매후보 카드 종목명 줄을 2단으로. 위=종목명(+시장), 아래=등락률·주가.
   .name-line 자체엔 규칙이 없어 수식 클래스로만 적용 -> 기준봉/테마 카드는 그대로 한 줄. */
.name-line--stacked {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

/* flex 컨테이너에선 공백 텍스트노드가 사라지므로 간격을 gap 으로 준다 */
.name-main,
.name-quote-line {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.name-quote-line { gap: 6px; }

/* 2026-07-20: 시총 / 기준봉 거래대금을 두 줄로 분리 (위=시총, 아래=거래대금).
   부모가 이미 column flex 라 줄만 나누면 되고, 즐겨찾기 별은 시총 줄 오른쪽에 붙인다. */
.candidate-cap-line {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

:is(#candidateList, #gapRestList, .candidate-cards) .cap-text {
  color: #ff9f1c !important;
  font-size: 13px;
}

:is(#candidateList, #gapRestList, .candidate-cards) .cap-text.cap-text-empty {
  color: #fff !important;
}

:is(#candidateList, #gapRestList, .candidate-cards) .candidate-tv-line {
  color: #ffffff;
  font-size: 13px;
}

:is(#candidateList, #gapRestList, .candidate-cards) .candidate-tv-line .highlight-yellow-underline {
  color: #d4a017;
  text-decoration: none;
}

body[data-theme="dark"] :is(#candidateList, #gapRestList, .candidate-cards) .candidate-tv-line .highlight-yellow-underline {
  color: #ffd700;
}

:is(#candidateList, #gapRestList, .candidate-cards) .candidate-tv-line .highlight-gray-underline,
#baseList .highlight-gray-underline {
  color: #888888;
  text-decoration: underline;
  text-decoration-color: #888888;
}

#themeList .highlight-red-underline {
  color: #ffd700;
  text-decoration: none;
}

.row.dimmed {
  opacity: 0.5;
  background: color-mix(in srgb, var(--row) 70%, transparent);
}

/* 등락률 색상 */
.change-up {
  color: var(--red);
  font-weight: 300;
  font-size: 0.95em;
}

.change-down {
  color: #1f8fff;
  font-weight: 300;
  font-size: 0.95em;
}

body[data-theme="dark"] .change-down {
  color: #4cb3ff;
}

/* [2026-09-11 유저] 0.00% 는 흰색으로. 전엔 app.js 판정이 0 을 change-up 으로 보내 이
   규칙에 오는 일이 없었다. 이제 보합이 여기로 온다 - 회색이 아니라 본문색(흰색)으로,
   크기·굵기는 change-up/down 과 같게 해서 색이 바뀔 때 글자가 튀지 않게 한다. */
.change-zero {
  color: var(--text);
  font-weight: 300;
  font-size: 0.95em;
}
/* panel-head 안의 change-up/down이 .panel-head span 룰에 묻히지 않도록 */
.panel-head .change-up {
  color: var(--red);
  font-weight: 700;
}

.panel-head .change-down {
  color: #1f8fff;
  font-weight: 700;
}

body[data-theme="dark"] .panel-head .change-down {
  color: #4cb3ff;
}

/* dimmed 상태에서도 등락률은 명확하게 표시 */
.row.dimmed .change-up,
.row.dimmed .change-down {
  opacity: 1;
  font-weight: 900;
}

/* 흰 글씨 + 빨간 밑줄 */
.highlight-red-underline {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  font-weight: 700;
}

body:not([data-theme="dark"]) .highlight-red-underline {
  color: var(--text);
}

/* 후보 그룹 제목 */
.candidate-group-title {
  margin: 4px 0 2px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 700;
  color: #1a1a00;
  background: #f2c200;
  border-radius: 5px;
  border-bottom: none;
}

body[data-theme="dark"] .candidate-group-title {
  color: #1a1a00;
  background: #f2c200;
}

/* 매매후보 그룹 제목 색상: 3~5일선=초록, 10일선=파랑, 20일선=노랑 */
.candidate-group-title.title-green,
body[data-theme="dark"] .candidate-group-title.title-green {
  color: #fff;
  background: #2e7d32;
}

.candidate-group-title.title-blue,
body[data-theme="dark"] .candidate-group-title.title-blue {
  color: #fff;
  background: #1565c0;
}

.candidate-group-title.title-yellow,
body[data-theme="dark"] .candidate-group-title.title-yellow {
  color: #1a1a00;
  background: #f2c200;
}

.candidate-group-title.title-pink,
body[data-theme="dark"] .candidate-group-title.title-pink {
  color: #880e4f;
  background: #f8bbd0;
}

/* 갭눌림 탭 제목. 카드 프레임(#ff9f1c)과 같은 주황 계열로 맞춘다. */
.candidate-group-title.title-orange,
body[data-theme="dark"] .candidate-group-title.title-orange {
  color: #fff;
  background: #c9741a;
}

/* [2026-09-03 유저] 주봉 눌림. 나머지 색이 다 쓰여 있어 보라를 준다. */
.candidate-group-title.title-purple,
body[data-theme="dark"] .candidate-group-title.title-purple {
  color: #fff;
  background: #6a3dbf;
}

/* 접기/펼치기 */
.collapsible-header {
  cursor: pointer;
  user-select: none;
}

.candidate-group-title.collapsible-header::before { content: "▾ "; }
.candidate-group-title.collapsible-header.collapsed::before { content: "▸ "; }
.row-title.collapsible-header .name-line::before { content: "▾ "; }
.row-title.collapsible-header.collapsed .name-line::before { content: "▸ "; }

.collapsible-body.collapsed { display: none; }

.collapsible-body > .row {
  margin-top: 0;
}

/* 테마 종목 테이블 */
.theme-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 6px;
}

.theme-stock-list {
  margin-top: 2px;
}

.theme-stock-card {
  padding: 3px 0 4px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.theme-stock-card:last-child {
  border-bottom: none;
}

.theme-stock-card:hover {
  background: rgba(255,255,255,0.04);
}

.theme-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
}

.theme-stock-reason {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  color: var(--muted);
  margin-top: 3px;
}

.theme-tv-row {
  display: flex;
  justify-content: flex-end;
}

.theme-reason-text {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 카드 하단 인포스탁 이슈 사유 줄 가림 스위치 (app.js의 SHOW_CARD_ISSUE_REASON=false 시 적용).
   매수타점(entryLine)·거래대금은 그대로 두고 "|" 이슈 사유 텍스트만 숨김. 되살리려면 플래그만 true. */
.hide-card-issue-reason .issue-text,
.hide-card-issue-reason .theme-reason-text {
  display: none;
}

.theme-reason-bar {
  color: var(--blue-down);
  font-weight: 700;
  flex-shrink: 0;
}

#baseList .theme-tag,
:is(#candidateList, #gapRestList, .candidate-cards) .theme-tag,
#themeList .theme-tag {
  color: var(--blue-down);
  font-weight: 300;
}

.theme-table th,
.theme-table td {
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
}

.theme-table th {
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

.theme-table td:first-child,
.theme-table td:nth-child(2),
.theme-table td:nth-child(3) {
  white-space: nowrap;
}

/* 평가손익/수익률/당일등락률(2~4번째 컬럼)은 화면 안에 항상 넉넉하게 보이게 최소폭을
   보장하고, 수량/매입가(5~6번째, 모의투자는 매도버튼까지 7번째)는 폭을 안 정해서
   화면 밖으로 밀려나도 되게 둔다 - .holdings-scroll의 가로 스크롤로 보면 됨. */
.holdings-table th:first-child,
.holdings-table td:first-child {
  white-space: normal;
  word-break: break-word;
}

.holdings-table td:nth-child(2):not([colspan]),
.holdings-table th:nth-child(2) {
  white-space: nowrap;
  min-width: 96px;
  text-align: right;
}

.holdings-table td:nth-child(3):not([colspan]),
.holdings-table th:nth-child(3) {
  white-space: nowrap;
  min-width: 80px;
  text-align: right;
}

.holdings-table td:nth-child(4):not([colspan]),
.holdings-table th:nth-child(4) {
  white-space: nowrap;
  min-width: 80px;
  text-align: right;
}

.theme-reason-cell {
  white-space: normal;
  color: var(--text);
  width: 100%;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.theme-expand-btn {
  display: block;
  position: relative;
  width: 100%;
  background: #f9c74f;
  border: none;
  cursor: pointer;
  padding: 0;
  height: 4px;
  margin: 10px 0 0;
  overflow: visible;
}

.theme-expand-btn::before {
  content: "";
  position: absolute;
  top: -14px;
  bottom: -14px;
  left: 0;
  right: 0;
}

.theme-expand-btn::after {
  content: "▼";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: 900;
  color: #f9c74f;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

#themeList article.theme-expanded .theme-expand-btn::after {
  content: "▲";
}


.theme-expand-btn:active {
  background: #e0b030;
}

#themeList .row.theme-bg-red .theme-expand-btn { background: #ff6b6b; }
#themeList .row.theme-bg-red .theme-expand-btn::after { color: #ff6b6b; }

#themeList .row.theme-bg-yellow .theme-expand-btn { background: #e6c800; }
#themeList .row.theme-bg-yellow .theme-expand-btn::after { color: #e6c800; }

#themeList .row.theme-bg-green .theme-expand-btn { background: #88cc00; }
#themeList .row.theme-bg-green .theme-expand-btn::after { color: #88cc00; }

#themeList .row-title {
  cursor: pointer;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.leader-label {
  font-size: 11px;
  font-weight: normal;
  color: #888;
  white-space: nowrap;
  flex: 1 1 auto;
}
body[data-theme="dark"] .leader-label {
  color: #aaa;
}

.leader-label-highlight {
  color: #ffd700;
  font-weight: 700;
}


.theme-related-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0;
}

.theme-related-table.hidden {
  display: none;
}

.theme-related-table td {
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
  font-size: 13px;
}


.confirmed-row td:first-child {
  border-left: 3px solid var(--green);
}

.candle-pattern {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--chip);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.candle-bull-label {
  color: var(--red);
  font-weight: 800;
}

.theme-table tr[data-chart-code] {
  cursor: pointer;
}

.theme-table tr[data-chart-code] td {
  border-top: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.theme-table tr[data-chart-code]:hover td {
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  border-top-color: var(--blue);
  border-bottom-color: var(--blue);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--blue) 45%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--blue) 45%, transparent);
}

.theme-table tr[data-chart-code]:hover td:first-child {
  border-left: 1px solid var(--blue);
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--blue) 55%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--blue) 45%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--blue) 45%, transparent);
}

.theme-table tr[data-chart-code]:hover td:last-child {
  border-right: 1px solid var(--blue);
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--blue) 55%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--blue) 45%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--blue) 45%, transparent);
}

@media (max-width: 720px) {
  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .actions {
    width: 100%;
  }

  .actions button {
    flex: 1 1 0;
  }

  .panel-head {
    position: static;
  }

  .row-title {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .row-title strong {
    max-width: none;
    text-align: left;
  }
}

/* 연결 상태 표시기 */
.connection-status {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

/* 데이터 경고 배너 */
/* 일일 서킷브레이커 - 오늘 실현손실이 임계값 도달 시 최상단에 크게 표시(심리 경고용) */
.circuit-breaker-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  width: min(1180px, 100%);
  margin: 10px auto 0;
  padding: 14px 16px;
  background: #b3001b;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(179, 0, 27, 0.5);
  animation: circuit-breaker-pulse 1.4s ease-in-out infinite;
}

.circuit-breaker-banner.hidden {
  display: none;
}

.circuit-breaker-stop-btn {
  padding: 5px 12px;
  border: 1px solid #fff;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.circuit-breaker-stop-btn.circuit-breaker-stop-confirm {
  background: #fff;
  color: #b3001b;
}

.circuit-breaker-banner.alerts-stopped {
  animation: none;
  opacity: 0.85;
}

@keyframes circuit-breaker-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

/* ===== 텔레그램 알림 배너 - 2026-08-03 유저 요청 =====
   알림이 나가는 중이라는 걸 크게 알리고 그 자리에서 바로 끄게 한다.
   서킷브레이커(빨강 #b3001b)와 헷갈리지 않게 주황 계열을 쓴다.
   정지되면 얇은 회색 줄로 줄어든다 - 꺼둔 걸 잊고 손절 경고를 놓치면 안 되므로 없애진 않는다.
   [2026-09-03 유저 요청] "제일 상단으로 올려줘" - 보유종목 패널 안에서 main 위로 옮겼다.
   폭·여백은 바로 위 서킷브레이커 배너와 같은 값으로 맞춘다(둘이 같이 뜰 때 어긋나 보인다). */
.telegram-alert-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(1180px, 100%);
  margin: 10px auto 0;
  padding: 14px 16px;
  background: #d35400;
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(211, 84, 0, 0.45);
  animation: telegram-alert-pulse 1.4s ease-in-out infinite;
}

.telegram-alert-banner.hidden {
  display: none;
}

.telegram-alert-body {
  flex: 1;
  min-width: 0;
}

.telegram-alert-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 800;
}

.telegram-alert-count {
  padding: 1px 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
  font-size: 12px;
  font-weight: 700;
}

.telegram-alert-text {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  opacity: 0.95;
  overflow-wrap: anywhere;
}

.telegram-alert-meta {
  margin-top: 3px;
  font-size: 11px;
  opacity: 0.8;
}

.telegram-alert-stop-btn {
  flex: none;
  padding: 10px 16px;
  border: 2px solid #fff;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.telegram-alert-stop-btn:active {
  background: rgba(255, 255, 255, 0.2);
}

.telegram-alert-stop-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.telegram-alert-banner.alerts-stopped {
  padding: 8px 12px;
  background: #5a5a5a;
  box-shadow: none;
  animation: none;
}

.telegram-alert-banner.alerts-stopped .telegram-alert-title {
  font-size: 13px;
  font-weight: 700;
}

.telegram-alert-banner.alerts-stopped .telegram-alert-text {
  display: none;
}

.telegram-alert-banner.alerts-stopped .telegram-alert-stop-btn {
  padding: 5px 12px;
  border-width: 1px;
  font-size: 12px;
  font-weight: 700;
}

@keyframes telegram-alert-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.78; }
}

@media (prefers-reduced-motion: reduce) {
  .telegram-alert-banner { animation: none; }
}

/* 폰에서는 정지 버튼을 한 줄 전체로 - 급할 때 오탭 없이 누르게 */
@media (max-width: 520px) {
  .telegram-alert-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .telegram-alert-stop-btn {
    width: 100%;
    padding: 12px;
  }
  .telegram-alert-banner.alerts-stopped {
    flex-direction: row;
    align-items: center;
  }
  .telegram-alert-banner.alerts-stopped .telegram-alert-stop-btn {
    width: auto;
    padding: 5px 12px;
  }
}

.data-warning-banner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  padding: 8px 12px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 6px;
  color: #7d5a00;
  font-size: 0.82rem;
  line-height: 1.5;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.status-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ccc;
  transition: background 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}

.status-indicator.connected {
  background: #18864b;
  box-shadow: 0 0 6px rgba(24, 134, 75, 0.8);
}

.status-indicator.disconnected {
  background: #b72f2a;
  box-shadow: 0 0 6px rgba(183, 47, 42, 0.8);
}

.status-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}

body[data-theme="dark"] .status-indicator.connected {
  background: #7ee2a8;
  box-shadow: 0 0 4px #7ee2a8;
}

body[data-theme="dark"] .status-indicator.disconnected {
  background: #ff8a80;
  box-shadow: 0 0 4px #ff8a80;
}

.stock-search-menu {
  position: fixed;
  z-index: 5000;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  padding: 15px 20px;
  font-size: 19px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

body[data-theme="dark"] .stock-search-menu {
  background: #2a2a2a;
  border-color: #444;
}







/* 매매후보 카드뷰 등락률: 노안 대비 크게 표시.
   실시간 갱신(updateLiveQuoteBadges)이 span의 className을 통째로 덮어쓰므로
   클래스가 아닌 속성 선택자[data-live-pct]로 지정해야 틱마다 안 지워진다. */
:is(#candidateList, #gapRestList, .candidate-cards) [data-live-pct] {
  font-size: 1.5em;
  font-weight: 700;
}

/* iOS Safari: <tr>/<div> 등 비네이티브 요소는 cursor:pointer가 있어야 탭 시 click이 합성됨.
   보유종목·테마관련주·손익 행에서 종목을 한 번에 못 열던(여러 번 눌러야 열리던) 문제 해결.
   cursor는 상속 속성이라 내부 셀까지 클릭 요소로 인식된다. */
[data-chart-code] { cursor: pointer; }

/* iOS Safari: 매매후보 카드 전체를 탭 가능하게. 등락률을 크게 키운 뒤
   숫자(비네이티브 span)를 터치하면 차트가 안 열리던 문제 해결 —
   .row에 cursor:pointer를 줘 카드 어디를 눌러도 click이 합성되게 한다. */
:is(#candidateList, #gapRestList, .candidate-cards) .row { cursor: pointer; }

/* Qwen(상한가 테마분석) 카드 줄 - 시장 테마 아래에 Qwen 테마+이유 표시 */
/* 2026-07-20: 카드 이슈 줄이 안 띈다는 지적 -> 콜아웃 블록으로 분리.
   기존엔 본문과 같은 14px 인데다 .qwen-reason 이 opacity:.85 라 오히려 더 흐렸다.
   폰트는 그대로 두고 좌측바+배경 틴트로 대비를 만든다(카드 높이 손해 최소).
   틴트를 var(--row) 에 섞어 테마 4종(라이트/다크/블루라이트/블루다크)과
   탭별 배경(핑크/그린/블루/옐로우)에 자동 대응. */
.qwen-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:3px 6px;margin:4px 0 6px;font-size:14px;line-height:1.45;
  border-left:3px solid var(--blue-down);
  background:color-mix(in srgb, var(--blue-down) 10%, var(--row));
  border-radius:4px;padding:6px 9px;}
.qwen-mark{font-size:12px;font-weight:700;color:var(--blue-down);opacity:1;}
.qwen-theme{font-weight:600;background:rgba(128,128,128,.18);border-radius:4px;padding:0 5px;}
/* 콜아웃 안에선 회색 배지가 파란 틴트와 섞여 탁해져서 같은 파란 계열로 맞춘다 */
.qwen-line .qwen-theme{background:color-mix(in srgb, var(--blue-down) 22%, transparent);}
.qwen-reason{opacity:1;font-weight:600;}
.qwen-strength{font-size:15px;margin-right:2px;vertical-align:middle;line-height:1;}
/* API 장애(토큰 무효 등) 경고 배너 - 평소 경고보다 확실히 눈에 띄게 */
.data-warning-banner.critical{
  background:rgba(255,59,48,.15); border:1px solid #ff3b30; color:#ff6b6b;
  font-weight:700; animation:criticalPulse 1.6s ease-in-out infinite;
}
@keyframes criticalPulse{0%,100%{opacity:1}50%{opacity:.62}}

/* 후보 카드: 지금 사면 손절까지 몇 % (5% 이내 초록 / 10% 이내 노랑 / 초과 빨강) */
.stop-dist-line{margin:2px 0 4px;}
/* [2026-07-30 유저 요청] 손절까지 배지 키움 (13px -> 18px, 여백도 비례) */
/* [2026-08-05 유저 확정] 게이지 + 대비 강화.
   카드에 숫자가 다섯 개(등락률·현재가·시총·기준봉거래대금·손절)라 손절이 묻혔다.
   틴트가 .18 이라 어두운 배경에서 배지 자체가 거의 안 보이던 것도 같이 올린다. */
.stop-dist{
  display:inline-flex;align-items:center;gap:8px;
  font-size:18px;font-weight:700;padding:4px 12px;border-radius:6px;
  border:1px solid transparent;
}
/* 게이지 막대. 자식 엘리먼트가 아니라 ::before 인 이유:
   실시간 갱신이 el.textContent 로 내용을 갈아치우므로(updateLiveQuoteBadges)
   자식으로 만들면 첫 틱에서 지워진다. 채움 길이는 --stop-fill 변수로만 바꾼다.
   currentColor 를 쓰므로 안전/경고/위험 색이 막대에 그대로 따라온다. */
.stop-dist::before{
  content:"";
  flex:0 0 auto;
  width:38px;height:8px;border-radius:4px;
  background-color:rgba(255,255,255,.16);
  background-image:linear-gradient(to right,
    currentColor 0 var(--stop-fill,0%),
    transparent var(--stop-fill,0%) 100%);
  background-repeat:no-repeat;
}
.stop-dist-safe{background:rgba(76,175,125,.32);border-color:rgba(76,175,125,.55);color:#4caf7d;}
.stop-dist-warn{background:rgba(242,194,0,.32);border-color:rgba(242,194,0,.55);color:#d6a900;}
/* [2026-07-30 유저 요청] 위험(10% 초과)을 빨강 -> 파랑(--blue-down)으로. 손실 방향 색과 통일 */
.stop-dist-danger{background:rgba(76,179,255,.32);border-color:rgba(76,179,255,.55);color:var(--blue-down,#4cb3ff);}
body[data-theme="dark"] .stop-dist-warn{color:#f2c200;}
/* 흐린 카드에선 파란 틴트도 같이 중화 */
.row.base-dim .qwen-line{border-left-color:#8a939a;background:color-mix(in srgb, #8a939a 8%, var(--row));}
.row.base-dim .qwen-mark{color:#8a939a;}
.qwen-row .qwen-cell{font-size:14px;opacity:.9;padding:1px 8px 3px;}
.qwen-row .qwen-theme{margin-right:4px;}

/* 주도테마 카드 대장주 라벨 - 제목 아래 오른쪽정렬 별도 줄 */
.theme-leader-line{text-align:right;width:100%;font-size:12px;margin:0 0 2px;line-height:1.3;}

/* Qwen 이슈 배지 (청록 뉴스이슈 배지 대체) */
.theme-momentum-qwen{background:#0f9d8c;color:#fff;}

/* 매매후보 등락률 옆 현재가 */
.name-price-block{font-size:1.5em;color:var(--muted);font-weight:700;margin-left:4px;}


/* ===== [2026-07-31] 테마지도 패널 + 그래프 뷰 ===== */
.theme-map-view-info { font-size: 12px; color: var(--muted); margin-left: auto; }

/* 그래프 캔버스 - 오버레이 안을 꽉 채운다 */
/* position:relative - 하단 '차트 열기' 액션바를 캔버스 위에 띄우기 위한 기준 */
/* [2026-07-31] height:100% 였는데 부모 .chart-overlay가 place-items:start 그리드라
   항목이 늘어나지 않아 퍼센트가 auto로 풀렸다. 그 결과 canvas가 기본 150px로 잡혀
   아이폰에서 지도가 화면 맨 위 좁은 띠 안에만 그려졌다. 뷰포트 높이로 못박는다.
   dvh는 사파리 주소창이 접혔다 펴질 때까지 반영한다(미지원 브라우저는 위 vh 사용). */
#themeMapViewPanel {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
}

.theme-map-canvas {
  width: 100%;
  flex: 1 1 auto;
  display: block;
  touch-action: none;      /* 드래그/핀치를 우리가 직접 처리 */
  /* [2026-07-31 유저 요청] 그래프 배경은 차트(회색)와 달리 어둡게 — 흰 종목명/빨간 테마원 대비 */
  background: #0d1117;
  border-radius: 0;                 /* 아래는 닫기 막대가 막는다 */
  min-height: 0;      /* flex 컬럼에서 캔버스가 줄어들 수 있어야 헤드 아래를 정확히 채운다 */
}

/* [2026-07-31] 아이폰에서 '닫기' 버튼이 사라지던 문제.
   포커스하면 헤드의 정보 텍스트가 길어지는데(테마명 + 관련주 수), 그게 늘어나며
   버튼을 옆으로 밀어냈고 .panel{overflow:hidden}에 잘려 화면 밖으로 나갔다.
   텍스트만 줄어들게(min-width:0 + ellipsis) 하고 버튼은 절대 안 줄어들게 고정한다. */
/* [2026-07-31] 아이폰 PWA(black-translucent)라 헤드가 상태바/노치 아래로 들어간다.
   #chartPanel에만 있던 safe-area 보정을 테마지도 헤드에도 준다. */
#themeMapViewPanel > .panel-head {
  flex: 0 0 auto;
  gap: 8px;
  padding: 8px 10px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
}
#themeMapViewPanel > .panel-head h2 { flex: 0 0 auto; font-size: 15px; }

/* [2026-07-31] '닫기' 버튼이 안 보이던 진짜 원인:
   .vol-toggle-btn 은 기본이 display:none 이고, 이를 되살리는 규칙은
   `.chart-overlay #chartPanel.landscape .vol-toggle-btn` 하나뿐이었다.
   테마지도가 같은 클래스를 재사용해서 재배치/닫기 버튼이 아예 렌더되지 않았다.
   여기서 명시적으로 되살리고, 손가락으로 누를 수 있게 키운다. */
#themeMapViewPanel > .panel-head .vol-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--text);
}
/* [2026-08-01 유저 요청] 닫기를 헤드에서 화면 하단 가로 막대로 옮겼다.
   아이폰에서 헤드에 버튼 3개가 붙어 좁았고, 한 손으로 쥐었을 때 위쪽 모서리보다
   아래가 훨씬 누르기 쉽다. 홈 인디케이터에 가리지 않게 safe-area 만큼 띄운다. */
.theme-map-close-bar {
  flex: 0 0 auto;
  width: 100%;
  border: 0;
  background: #e0332f;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.theme-map-close-bar:active { background: #b92825; }

/* [2026-08-01] 예전엔 'Qwen 켜짐/꺼짐' 토글이라 꺼진 쪽을 흐리게+취소선으로 눌렀는데,
   이제는 소스를 고르는 2모드 전환이다. 키움 모드는 '꺼진 상태'가 아니므로 둘 다
   동등하게 또렷하게 두고 색으로만 구분한다.
   Qwen = 호박(지도의 이슈 색) / 키움 = 기본 텍스트색 */
#themeMapQwenBtn.qwen-on {
  border-color: #ffb020;
  color: #ffb020;
}
#themeMapQwenBtn.qwen-mix {
  border-color: #7fd1a6;
  color: #7fd1a6;
}
#themeMapQwenBtn.qwen-off {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--text);
}
#themeMapViewPanel > .panel-head .theme-map-view-info {
  flex: 1 1 auto;
  min-width: 0;
  /* [2026-08-06 유저 제보] 한 줄 고정이라 거래대금 같은 뒤쪽 항목이 통째로 잘렸다.
     두 줄까지 허용하고 그 뒤부터 자른다. 헤더 높이가 한 줄 늘 수 있지만, 값이 있는데
     못 보는 것보다 낫다. 세 줄 이상은 지도가 좁아져서 막는다(-webkit-line-clamp). */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
  text-align: right;
  word-break: keep-all;
}
#themeMapViewPanel > .panel-head button { flex: 0 0 auto; }

/* ============================================================================
   매매후보 탭별 배경색 - 켜짐 (정의는 파일 앞쪽 body.tab-bg-* 참고)
   - 2026-07-31: 배경을 패널색과 통일해달라는 요청으로 tab-bg-* 를 !important 로 덮어
     껐었다. 그때 쓰던 값은 라이트 #fbfcfd / 다크 #151a1d.
   - 2026-08-08: "3일선인지 10일선인지 한눈에 구분이 안 간다"는 요청으로 다시 켰다.
     탭을 바꾸면 화면 전체 배경이 그 단계 색으로 바뀐다(app.js 의 tab-bg-* 클래스 토글).
   - 다시 끄려면 아래 네 줄의 주석을 풀면 된다.
   ============================================================================ */
/* body { --bg: #fbfcfd !important; } */
/* body[data-theme="dark"] { --bg: #151a1d !important; } */
/* html { background: #fbfcfd !important; } */
/* html[data-theme="dark"] { background: #151a1d !important; } */

/* [2026-07-31] 주도테마 패널을 켜는 순간 화면이 멈추던 문제.
   원인 1: 패널을 `.panel:has(> .panel-head > #themeHeading)` 로 숨기고 있었다.
   body 클래스가 바뀔 때마다 WebKit이 문서의 모든 .panel에 대해 :has()를 다시 평가한다.
   -> #themePanel / #basePanel 아이디 선택자로 교체.
   원인 2: 테마 98개 · 종목행 416개가 한 번에 레이아웃된다.
   -> 화면 밖 행은 레이아웃을 건너뛴다. 미지원 브라우저에서는 그냥 무시되는 속성이라 안전하고,
      되돌리려면 이 블록만 지우면 된다. */
#themeList article.row,
#baseList article.row {
  content-visibility: auto;
  contain-intrinsic-size: auto 72px;
}

/* [2026-08-01 유저 요청] 매매후보 카드의 Qwen 이슈 배지(🧵 …·N종목 ▾)를
   테마 태그 옆에서 이슈 줄 아래로 내렸다. 상한가 카드(renderBaseRow)는 그대로.
   글자 크기도 펼침 목록의 관련 종목 칩(.momentum-member, 14px)과 맞춘다.
   테마 태그 옆에 있을 땐 11px로 작아야 했지만, 이제 한 줄을 차지하므로 읽기 편한 게 낫다. */
/* [2026-08-01] .momentum-below 컨테이너가 .momentum-row-wrap 으로 바뀌면서 이 규칙이
   안 먹어 뱃지가 기본 11px 로 되돌아갔다. 선택자를 새 컨테이너로 옮기고,
   관련종목 칩(.momentum-member)과 크기·여백·모서리를 완전히 동일하게 맞춘다. */
:is(#candidateList, #gapRestList, .candidate-cards) .momentum-row-wrap .theme-momentum-badge {
  font-size: 14px;
  padding: 3px 9px;
  border-radius: 4px;
  line-height: normal;
}

/* [2026-08-01 유저 요청] 타점이 4% 안쪽으로 들어오면 (1차)/(2차) 버튼을 채우고,
   초록 <-> 흰색으로 펄스시킨다. 화면을 훑을 때 진입 사정권 카드가 먼저 눈에 걸리게 하는 게 목적.
   .entry-target 정의가 파일에 두 번 있어 이 규칙은 맨 끝에 둬서 우선하게 한다. */
/* [2026-08-01 유저 요청] 펄스를 초록<->흰색에서 회색<->투명으로.
   버튼 기본색이 흰색이 된 뒤로 초록 채움이 카드에서 혼자 튀었다.
   테두리·글자는 고정하고 '채움'만 들어왔다 나가게 해서 존재감은 유지하되 조용하게. */
/* [2026-08-01] 펄스는 슬롯 전체(.entry-slot-hot)가 담당한다.
   버튼은 채움만 유지 - 둘 다 깜빡이면 겹쳐서 지저분하다. */
.entry-target.entry-target-hot {
  background: rgba(255, 255, 255, 0.24);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.75);
}

@keyframes entryHotPulse {
  0%, 100% { background: rgba(255, 255, 255, 0.24); }
  50%      { background: transparent; }
}

/* 애니메이션을 줄이도록 설정한 기기에서는 채움만 유지하고 깜빡이지 않는다 */
@media (prefers-reduced-motion: reduce) {
  .entry-target.entry-target-hot { animation: none; }
}

/* ============================================================================
   [2026-08-01 유저 요청] 매매후보/갭눌림 카드 가독성 정리
   되돌리려면 이 블록만 통째로 지우면 된다 (git tag card-ui-before-20260801 로도 복원 가능).
   원칙: 글자를 더 키우기보다 '간격과 위계'를 정리한다. 지금 카드는 요소마다 마진이
   제각각(p 기본 마진 + 개별 margin)이라 줄 간격이 들쭉날쭉하고, 색과 크기가 동시에
   여러 곳에서 강조돼 무엇을 먼저 볼지가 흐려져 있었다.
   ============================================================================ */

/* 1) 세로 리듬 통일 - 요소별 마진을 없애고 .row 의 gap 하나로만 간격을 준다 */
:is(#candidateList, #gapRestList, .candidate-cards) .row { gap: 9px; }
:is(#candidateList, #gapRestList, .candidate-cards) .row > * { margin-top: 0; margin-bottom: 0; }

/* 2) 종목명 / 등락률·가격 두 줄 사이를 살짝 띄운다 */
:is(#candidateList, #gapRestList, .candidate-cards) .name-line--stacked { gap: 4px; }

/* 3) 오른쪽 지표(시총 / 기준봉 거래대금) 두 줄도 같은 간격으로 */
:is(#candidateList, #gapRestList, .candidate-cards) .candidate-info-right { gap: 4px; }

/* 4) 손절 배지: 글자 크기(18px)는 유지하되 덩어리감을 줄여 카드를 덜 압도하게 */
:is(#candidateList, #gapRestList, .candidate-cards) .stop-dist { padding: 2px 10px; border-radius: 5px; gap: 7px; }
/* 카드뷰는 종목명 줄 오른쪽 끝이라 폭이 빠듯하다. 막대만 조금 줄인다(38 -> 32). */
:is(#candidateList, #gapRestList, .candidate-cards) .stop-dist::before { width: 32px; height: 7px; }

/* 5) 타점 줄: 가격이 먼저 읽히도록 괄호 안 %를 한 단계 작게.
      색(노랑)은 그대로 둬서 '얼마나 남았나'는 여전히 눈에 들어온다. */
:is(#candidateList, #gapRestList, .candidate-cards) .entry-dist { font-size: 0.82em; font-weight: 600; }

/* 6) 타점 가격과 버튼 사이 여백 - 붙어 보이던 것을 띄운다 */
:is(#candidateList, #gapRestList, .candidate-cards) .entry-target { margin-right: 2px; }

/* [2026-08-01 유저 요청] 시총 / 기준봉 거래대금을 카드 맨 윗줄로 올려 오른쪽 정렬 + 확대.
   기존엔 종목명과 좌우로 폭을 나눠 써서, 글자를 키우면 긴 종목명이 밀려 줄바꿈됐다.
   전용 줄로 빼면 폭 경쟁이 없어져 크기를 자유롭게 정할 수 있다. */
:is(#candidateList, #gapRestList, .candidate-cards) .candidate-metrics-top {
  display: flex;
  /* [2026-08-01 유저 요청] 시총은 왼쪽 끝, 기준봉 거래대금은 오른쪽 끝 */
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 16px;
  line-height: 1.25;
}
/* [2026-08-01 유저 요청] 시총 타이포를 기준봉 거래대금과 완전히 동일하게.
   시총은 <strong> + inline-flex(gap:4px), 거래대금은 일반 span이라 굵기·자간·간격이
   미묘하게 달랐다. 크기/두께/자간/행높이를 한 규칙으로 묶고 gap도 0으로 맞춘다.
   색은 그대로 둔다 - 시총 주황(#ff9f1c) / 거래대금 흰색은 의도된 구분이다. */
:is(#candidateList, #gapRestList, .candidate-cards) .candidate-metrics-top .cap-text,
:is(#candidateList, #gapRestList, .candidate-cards) .candidate-metrics-top .candidate-tv-line {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.25;
}
:is(#candidateList, #gapRestList, .candidate-cards) .candidate-metrics-top .candidate-cap-line { gap: 0; }

/* [2026-08-01 유저 요청] 손절까지 배지를 종목명 줄 오른쪽 끝으로.
   손절거리는 '이 종목을 볼지 말지'를 가르는 값이라 종목명과 같은 눈높이에 두는 게 낫다.
   왼쪽은 가변(1fr), 오른쪽 배지는 내용만큼(auto). 이름이 길어 줄바꿈돼도 배지는 안 밀린다. */
:is(#candidateList, #gapRestList, .candidate-cards) .row-title {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
}
:is(#candidateList, #gapRestList, .candidate-cards) .stop-dist-slot { justify-self: end; }

/* [2026-08-01 유저 요청] 종목명 · 등락률 · 현재가를 한 줄로.
   지표를 윗줄로 뺀 덕에 폭이 남아서 세 개를 나란히 놓을 수 있다.
   좁은 화면에서 넘치면 자연스럽게 다음 줄로 흐르게 wrap 은 켜 둔다. */
:is(#candidateList, #gapRestList, .candidate-cards) .name-line--stacked {
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

/* [2026-08-01 유저 요청] 종목명은 등락률과 같은 크기로, 현재가는 30% 축소.
   기존: 종목명 17px / 등락률 21px(1.5em) / 현재가 21px(1.5em)
   변경: 종목명 21px / 등락률 21px 유지 / 현재가 1.05em = 14.7px (21px의 70%)
   종목명이 등락률보다 작아 카드에서 이름이 먼저 안 읽히던 문제. 현재가는 진입 판단에
   직접 쓰는 값이 아니라(타점·손절이 그 역할) 한 단계 낮춘다.
   .row-title 안으로 한정해 관련주 칩 등 다른 곳의 .stock-link 는 건드리지 않는다. */
:is(#candidateList, #gapRestList, .candidate-cards) .row-title .stock-link { font-size: 21px; }
:is(#candidateList, #gapRestList, .candidate-cards) .name-price-block { font-size: 1.05em; }

/* [2026-08-01 유저 요청] 시총 1,000억 미만이면 회색.
   기본 주황(#ff9f1c)은 '볼 만한 크기'라는 신호였는데, 소형주까지 같은 색이라
   구분이 안 됐다. 실시간 환산으로 경계를 넘나들면 클래스도 같이 토글된다. */
:is(#candidateList, #gapRestList, .candidate-cards) .cap-text.cap-text-low { color: #8a939a !important; }

/* [2026-08-01 유저 요청] 기준봉 거래대금 500억 이하면 줄 전체를 회색.
   숫자에는 이미 highlight-gray-underline(#888)이 붙지만 라벨은 흰색이라 튀었다.
   시총 1,000억 미만 회색과 같은 색(#8a939a)으로 맞춘다. */
:is(#candidateList, #gapRestList, .candidate-cards) .candidate-tv-line.tv-text-low,
:is(#candidateList, #gapRestList, .candidate-cards) .candidate-tv-line.tv-text-low .highlight-gray-underline {
  color: #8a939a !important;
  text-decoration-color: #8a939a;
}

/* [2026-08-01 유저 요청] 지표 줄 정리
   1) 거래대금 숫자의 밑줄 제거 - 색(노랑/회색)만으로 이미 구분되고,
      밑줄이 링크처럼 보여 눌러도 되는 줄로 오해된다.
   2) 지표 줄 아래에 구분선 - 카드 상단(종목 식별 정보)과 아래(매매 판단 영역)를 분리. */
:is(#candidateList, #gapRestList, .candidate-cards) .candidate-metrics-top .highlight-yellow-underline,
:is(#candidateList, #gapRestList, .candidate-cards) .candidate-metrics-top .highlight-gray-underline {
  text-decoration: none;
}

:is(#candidateList, #gapRestList, .candidate-cards) .candidate-metrics-top {
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}

/* [2026-08-01 유저 요청] 테마 줄 위에도 구분선.
   카드가 세 영역으로 나뉜다:
     ① 시총·거래대금        - 종목 규모
     ② 종목명·손절·타점      - 매매 판단
     ③ 테마·이슈            - 왜 움직이는가
   .row 의 gap(9px)이 이미 있으므로 위쪽 여백만 조금 더 주고 선을 얹는다. */
:is(#candidateList, #gapRestList, .candidate-cards) .theme-tag-row {
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

/* [2026-08-01 유저 요청] 1차/2차 타점 줄 정리.
   차수별로 [버튼][가격][거리] 를 한 묶음(.entry-slot)으로 만들고 좌우 두 칸에 나눈다.
   화면이 좁으면 auto-fit 이 한 칸으로 접어 세로로 쌓인다.
   괄호는 템플릿에서 이미 뺐다 - 버튼이 박스라 괄호가 중복이었고, 거리 %도 괄호가 있었다. */
:is(#candidateList, #gapRestList, .candidate-cards) .entry-line {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px 12px;
  align-items: baseline;
}
:is(#candidateList, #gapRestList, .candidate-cards) .entry-slot {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}
/* [2026-08-01 유저 요청] 거리 %를 가격 바로 옆에 붙인다.
   가격이 남는 폭을 먹게 했더니(flex:1) %가 칸 끝까지 밀려 가격과 따로 노는 것처럼 보였다.
   전부 내용 크기만 차지하게 두고 왼쪽부터 붙여 쓴다. */
:is(#candidateList, #gapRestList, .candidate-cards) .entry-slot > * { flex: 0 0 auto; }
:is(#candidateList, #gapRestList, .candidate-cards) .entry-slot .entry-target { margin-right: 0; }
:is(#candidateList, #gapRestList, .candidate-cards) .entry-slot .entry-dist { margin-left: -2px; }

/* [2026-08-01 유저 지적: "지저분해 보인다"] 타점 줄 색 위계 정리.
   문제: 가장 중요한 '타점 가격'은 색 지정이 없어 회색으로 흐렸고,
        보조 정보인 '거리 %'가 밝은 노랑(#ffd700) + bold 로 가장 셌다.
        눈이 노란색부터 잡으니 정보 순서가 뒤집혀 어수선해 보였다.
   해결: 색을 2개로 줄이고 순서를 바로잡는다.
        초록 버튼(어느 차수·사정권인가) -> 흰 숫자(얼마에 사나) -> 회색 %(얼마나 남았나) */
:is(#candidateList, #gapRestList, .candidate-cards) .entry-slot .entry-price {
  color: var(--text);
}
:is(#candidateList, #gapRestList, .candidate-cards) .entry-slot .entry-dist {
  color: var(--muted);
  font-weight: 500;
}
/* '도달✓'만은 초록으로 남긴다 - 지금 사도 되는 상태라 눈에 띄어야 한다 */
:is(#candidateList, #gapRestList, .candidate-cards) .entry-slot .entry-reached {
  color: #4caf7d;
  font-weight: 700;
}

/* [2026-08-01 유저 요청] 테마 앞에 "업종 :" 라벨.
   라벨은 클릭 대상(base-assign-text = 테마 지정) 밖에 둬서, 라벨을 눌러도
   테마 지정 팝업이 뜨지 않는다. 값이 주인공이므로 라벨은 뮤트 처리. */
:is(#candidateList, #gapRestList, .candidate-cards) .theme-kind-label {
  color: var(--muted);
  font-size: 13px;
  flex: 0 0 auto;
}

/* [2026-08-01 유저 요청] 타점 가격을 제일 가는 두께로 (기존 800).
   100을 주면 브라우저가 그 글꼴에서 쓸 수 있는 가장 가는 굵기로 맞춘다
   (Segoe UI는 Light, Malgun Gothic처럼 굵기가 둘뿐인 글꼴은 Regular로 떨어진다).
   크기(1.3em)는 그대로라 가늘어져도 숫자는 여전히 가장 크다. */
:is(#candidateList, #gapRestList, .candidate-cards) .entry-slot .entry-price {
  font-weight: 100;
}

/* [2026-08-01 유저 요청] 1차/2차 버튼 기본색을 초록 -> 흰색.
   진입 사정권일 때만 초록으로 채워지고 펄스가 도니, 평소 상태까지 초록이면
   '켜짐'과 '꺼짐'이 같은 색 계열이라 구분이 약했다.
   평소 = 흰 테두리(중립) / 사정권 = 초록 채움+펄스(신호) 로 갈라놓는다. */
:is(#candidateList, #gapRestList, .candidate-cards) .entry-target {
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
}

/* [2026-08-01 유저 요청] 종목명 옆 등락률도 제일 가는 두께로 (기존 700).
   타점 가격(100)과 맞춰, 카드의 큰 숫자들은 굵기가 아니라 크기로만 위계를 잡는다.
   .name-pct-block 은 [data-live-pct] 규칙(700)이 잡고 있으므로 뒤에서 덮어쓴다. */
:is(#candidateList, #gapRestList, .candidate-cards) .name-pct-block {
  font-weight: 100;
}

/* [2026-08-01 유저 요청] 카드의 숫자 굵기를 전부 제일 가늘게 통일.
   앞서 타점 가격(100)·등락률(100)을 가늘게 했고, 나머지 둘도 맞춘다.
   1) 종목명 옆 현재가 (.name-price-block, 기존 700)
   2) 이슈 뱃지 아래 관련종목 칩의 등락률 (기존 .change-up/down 의 300)
      - 이 요소는 값이 채워질 때 className 이 change-up/down/zero 로 통째로 바뀌므로
        클래스가 아니라 data 속성으로 잡아야 안 날아간다. */
:is(#candidateList, #gapRestList, .candidate-cards) .name-price-block {
  font-weight: 100;
  /* [2026-08-01 유저 지적: "원만 회색으로 보인다"]
     실제로는 "6,500원" 전체가 한 색(--muted = #e8eef1, 살짝 회색기 있는 흰색)이다.
     숫자는 Segoe UI(Light 굵기 있음), 한글 "원"은 Malgun Gothic(Light 없어 Regular)로
     그려져서 획 굵기가 달라 밝기가 다르게 보였다.
     색을 순백으로 올려 차이를 없앤다. */
  color: #ffffff;
}
:is(#candidateList, #gapRestList, .candidate-cards) .momentum-member [data-live-pct] {
  font-weight: 100;
  /* [2026-08-01 유저 지적] 칩 이름은 14px인데 등락률만 21px로 튀었다.
     원인: 카드 등락률용 규칙 `:is(#candidateList,#gapRestList) [data-live-pct]{font-size:1.5em}`
     이 관련주 칩 안의 등락률까지 잡고 있었다(둘 다 data-live-pct 를 쓴다).
     칩 안에서는 이름과 같은 크기로 되돌린다. */
  font-size: 1em;
}

/* [2026-08-01 유저 요청] 1차/2차 각각을 통째로 박스에 담는다.
   예전엔 "1차" 라벨만 박스라, 박스가 라벨을 감싸는 건지 묶음을 감싸는 건지 애매했다.
   이제 박스 = 하나의 타점(라벨+가격+거리), 박스 두 개 = 타점 두 개로 읽힌다.
   안쪽 라벨은 박스를 벗고 글자만 남긴다 - 박스 안에 박스가 들어가면 지저분하다. */
:is(#candidateList, #gapRestList, .candidate-cards) .entry-slot {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  gap: 8px;
}
:is(#candidateList, #gapRestList, .candidate-cards) .entry-slot .entry-target {
  border: 0;
  background: none;
  padding: 0;
  border-radius: 0;
  color: var(--muted);
  font-weight: 700;
  /* [2026-08-01 유저 요청] 라벨도 가격·거리와 같은 크기로.
     .entry-target 기본값이 0.95em 이라 박스 안에서 혼자 작았다.
     이제 박스 안 세 요소가 전부 1.3em - 크기는 통일, 위계는 색으로만. */
  font-size: 1.3em;
}
/* 진입 사정권: 테두리는 그대로 두고 배경만 펄스 */
:is(#candidateList, #gapRestList, .candidate-cards) .entry-slot-hot {
  animation: entryHotPulse 1.4s ease-in-out infinite;
}
:is(#candidateList, #gapRestList, .candidate-cards) .entry-slot-hot .entry-target {
  color: #ffffff;
}

/* [2026-08-01 유저 요청] 타점 박스 안 거리 %를 가격과 같은 크기로.
   앞서 "가격이 먼저 읽히게" 0.82em으로 줄였는데, 박스로 묶이고 나니
   한 덩어리 안에서 글자 크기만 들쭉날쭉해 보였다.
   크기는 맞추고 색(회색)으로만 위계를 남긴다 - 가격 흰색 / 거리 회색. */
:is(#candidateList, #gapRestList, .candidate-cards) .entry-slot .entry-dist,
:is(#candidateList, #gapRestList, .candidate-cards) .entry-slot .entry-reached {
  font-size: 1.3em;
}

/* [2026-08-01 유저 요청] 1차/2차 라벨(과 거리 %)을 진짜 회색으로.
   var(--muted) 는 다크 테마에서 #e8eef1 - 거의 흰색이라 "회색"으로 보이지 않았다.
   평소 = 회색(#8a939a) / 진입 사정권(-2% 이내) = 흰색 + 박스 펄스.
   흰색 전환과 펄스는 이미 .entry-slot-hot 이 처리하고 있어 여기선 평소 색만 내린다. */
:is(#candidateList, #gapRestList, .candidate-cards) .entry-slot .entry-target,
:is(#candidateList, #gapRestList, .candidate-cards) .entry-slot .entry-price,
:is(#candidateList, #gapRestList, .candidate-cards) .entry-slot .entry-dist {
  color: #8a939a;
}
/* 사정권이면 박스 안 글자가 통째로 흰색으로 올라온다 */
:is(#candidateList, #gapRestList, .candidate-cards) .entry-slot-hot .entry-target,
:is(#candidateList, #gapRestList, .candidate-cards) .entry-slot-hot .entry-price,
:is(#candidateList, #gapRestList, .candidate-cards) .entry-slot-hot .entry-dist {
  color: #ffffff;
}

/* [2026-08-01 유저 지적: "1차 색이랑 나머지 색이 다르다"]
   색은 셋 다 #8a939a 로 같았고, 다른 건 굵기였다 - 라벨 700 / 가격 100 / 거리 500.
   같은 색이라도 획이 굵으면 더 밝고 진해 보인다("원"만 회색으로 보이던 것과 같은 현상).
   굵기를 400으로 통일한다. 100으로 맞추지 않는 이유: 한글 "1차"는 Malgun Gothic 에
   Light 굵기가 없어 어차피 Regular(400)로 떨어지므로, 숫자만 더 가늘어져 차이가 남는다.
   400이면 숫자(Segoe UI Regular)와 한글(Malgun Regular)이 같은 굵기로 그려진다. */
/* [2026-08-01] 등락률 기준(1.5em/100)으로 맞췄다가 유저 요청으로 원복.
   1.3em / 400 - 굵기 400은 한글 "1차"(Malgun Gothic에 Light 없음)와 숫자의
   굵기를 맞춰 같은 색으로 보이게 하기 위한 값이다. 100으로 내리면 라벨만 진해 보인다. */
:is(#candidateList, #gapRestList, .candidate-cards) .entry-slot .entry-target,
:is(#candidateList, #gapRestList, .candidate-cards) .entry-slot .entry-price,
:is(#candidateList, #gapRestList, .candidate-cards) .entry-slot .entry-dist,
:is(#candidateList, #gapRestList, .candidate-cards) .entry-slot .entry-reached {
  font-weight: 400;
}

/* [2026-08-01 유저 요청] "1차"만 색이 흐려 보인다 -> 라벨만 굵게.
   한글은 Malgun Gothic 에 Regular(400)/Bold(700) 둘뿐이라 500·600을 줘도
   중간 굵기가 없다. 실제로 굵어지는 값은 700 뿐이라 700으로 올린다.
   가격·거리는 400 그대로 - 라벨만 또렷해진다. */
:is(#candidateList, #gapRestList, .candidate-cards) .entry-slot .entry-target {
  font-weight: 700;
}

/* 박스 테두리 고정 회색 - .entry-slot 의 var(--line) 보다 또렷하게 */
:is(#candidateList, #gapRestList, .candidate-cards) .entry-slot,
:is(#candidateList, #gapRestList, .candidate-cards) .entry-slot-hot {
  border-color: rgba(255, 255, 255, 0.32);
}

/* [2026-08-04 유저 요청] 타점 가격이 백만원대로 올라가면 박스를 넘어갔다(예: 1,125,000).
   박스 안 세 요소가 전부 1.3em 이라, 슬롯의 font-size 만 내리면 1차·가격·거리가
   같은 비율로 함께 줄어든다 - 크기 통일 원칙을 유지한 채 폭만 확보한다.
   padding 은 px 라 같이 줄지 않는다(박스가 답답해지지 않게 의도한 것).
   클래스는 app.js entryText() 의 sizeClass() 가 표시 길이를 보고 붙인다. */
/* gap(8px)·padding(10px)은 px 라 글자만 줄이면 같이 안 줄어든다. 좁은 단계에서는
   gap 도 같이 좁혀야 실제로 폭이 확보된다(글자를 더 줄이는 것보다 이쪽이 덜 답답하다). */
:is(#candidateList, #gapRestList, .candidate-cards) .entry-slot.entry-slot-sm {
  font-size: 0.86em;
  gap: 6px;
}
:is(#candidateList, #gapRestList, .candidate-cards) .entry-slot.entry-slot-xs {
  font-size: 0.76em;
  gap: 5px;
  padding: 6px 8px;
}
:is(#candidateList, #gapRestList, .candidate-cards) .entry-slot.entry-slot-xxs {
  font-size: 0.68em;
  gap: 4px;
  padding: 6px 7px;
}

/* [2026-08-01 유저 요청] 시총 1,000억 이상이면 초록색.
   보유종목의 "[5일선 눌림매매 O]" 배지(.pullback-match-o)와 같은 var(--green) 을 쓴다.
   기존 주황(#ff9f1c)은 '큰 종목' 신호였는데, 대시보드 안에서 초록 = 좋은 조건이라는
   의미가 이미 정착돼 있어 거기에 맞춘다.
   1,000억 미만은 앞서 넣은 회색 유지 - 이 규칙 뒤에 둬야 덮이지 않는다. */
:is(#candidateList, #gapRestList, .candidate-cards) .cap-text {
  color: var(--green) !important;
}
:is(#candidateList, #gapRestList, .candidate-cards) .cap-text.cap-text-low,
/* [2026-09-10 유저] "시총이 4천억 넘어가면 그것도 중간에 줄 그어줘. 시총이 너무 커도
   부담스럽네 매매하기". 아래로만 걸러왔는데 위쪽도 자리가 아니다 - 덩치가 크면
   같은 돈이 들어와도 안 움직인다. 작은 쪽과 같은 회색·같은 줄로 둔다. */
:is(#candidateList, #gapRestList, .candidate-cards) .cap-text.cap-text-high {
  color: #8a939a !important;
}

/* [2026-08-01 유저 요청] 이슈 뱃지와 관련종목 칩을 한 줄에 이어 붙이고, 넘치면 아래로.
   예전엔 뱃지(.momentum-below)와 칩 목록(.momentum-expand)이 각자 블록이라
   항상 줄이 갈렸다. 둘을 한 flex-wrap 컨테이너에 넣고, 중간 래퍼는 display:contents 로
   투명하게 만들어 칩이 상위 flex 에 직접 참여하게 한다.
   :not(.hidden) 을 붙여야 접었을 때 display:none 이 살아남는다. */
:is(#candidateList, #gapRestList, .candidate-cards) .momentum-row-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
:is(#candidateList, #gapRestList, .candidate-cards) .momentum-row-wrap .momentum-expand {
  display: contents;
}
:is(#candidateList, #gapRestList, .candidate-cards) .momentum-row-wrap .momentum-expand-body:not(.hidden) {
  display: contents;
}

/* [2026-08-01 유저 요청] 보유종목 평가손익 칸을 눌러 수량·매입가 상세 줄 펼치기.
   표가 6칸이라 아이폰에서 수량·매입가가 가로 스크롤 밖으로 밀려 안 보였다.
   두 칸을 빼서 4칸으로 줄이고, 상세는 접이식 줄로 내렸다. */
.holdings-table tr.holding-detail-row.hidden { display: none; }
/* [2026-08-01 유저 요청] 상세 줄을 평가손익 열 아래에 맞추고 글자 크기도 윗줄과 비슷하게.
   첫 칸을 빈 셀로 두고 2~4열을 합쳐, 왼쪽 끝이 평가손익 열 시작점과 맞는다.
   크기·굵기는 평가손익 숫자(1.25em/200)와 동일하게 맞추되 색만 뮤트로 남겨
   주 정보(손익)와 보조 정보(수량·매입가)를 구분한다. */
.holdings-table .holding-detail {
  font-size: 1.25em;
  font-weight: 200;
  color: var(--muted);
  /* [2026-08-01] td 에 display:flex 를 걸면 그 요소는 더 이상 table-cell 이 아니게 되고
     colspan 이 무시돼 행 전체 폭을 못 쓴다(왼쪽 일부만 차지하던 원인).
     td 는 셀로 두고 안쪽 div 에서 flex 를 쓴다. */
  text-align: left;
  padding-top: 12px;
  padding-bottom: 10px;
}
/* [2026-08-01 유저 요청] 라벨 줄 / 값 줄 두 줄 배치.
     수량   매입가   비중   평가금액
     136주  6,360   100%   884,000원
   4열 그리드라 라벨과 값이 세로로 정확히 맞는다. */
.holdings-table .holding-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 10px;
  row-gap: 2px;
  width: 100%;
}
/* [2026-08-01 유저 요청] 라벨/값 둘 다 맨 윗줄(종목·평가손익)과 같은 글자 크기로.
   부모 .holding-detail 이 이미 1.25em(=평가손익 셀과 동일)이라 여기서는 1em 이면 된다.
   앞서 0.62em 로 줄였다가 너무 작다는 지적을 받아 되돌린 것. */
.holdings-table .hd-label {
  font-size: 1em;
  color: var(--muted);
  opacity: 0.75;
  /* [2026-08-01 유저 요청] 라벨은 각 칸 가운데 정렬 */
  text-align: center;
}
.holdings-table .hd-val {
  /* 라벨만 가운데였으면 값과 세로로 어긋나 보인다. 두 줄이 한 덩어리로 읽히게 맞춘다. */
  font-size: 1em;
  text-align: center;
  white-space: nowrap;
}
/* [2026-08-01 유저 요청] 평가금액은 수익 중이면 빨강, 손실 중이면 파랑.
   기준은 평가금액 자체가 아니라 평가손익(eval_pl) 부호다. --blue-down 은
   라이트/다크 각각 #1f8fff / #4cb3ff 로 이미 정의돼 있어 테마를 따라간다. */
.holdings-table .hd-val.hd-val-up { color: var(--red); }
.holdings-table .hd-val.hd-val-down { color: var(--blue-down); }
/* [2026-08-01 유저 요청] 평가손익 칸만이 아니라 행 전체를 눌러도 펼쳐진다.
   종목명 링크만 차트로 빠지고 나머지는 전부 토글. */
.holdings-table tr.holding-main-row { cursor: pointer; }
.holdings-table .holding-arrow {
  font-size: 11px;
  color: var(--muted);
  margin-left: 2px;
}


/* [2026-08-01 유저 요청] 매매후보 카드 '기준봉 거래대금' 앞 패턴 아이콘.
   장대양봉(기준봉) + 그 다음날 살짝 위에 뜬 도지. 글자 크기를 따라가게 em 단위. */
:is(#candidateList, #gapRestList, .candidate-cards) .tv-candle-icon {
  width: 1.05em;
  /* [2026-08-01 유저 요청] 기준봉을 더 길게 -> viewBox 22x20.
     표시 높이도 같은 비율(1.05 * 20/22)로 올려야 몸통이 눌리지 않는다. */
  height: 0.95em;
  vertical-align: -0.16em;
  margin-right: 5px;
  /* [2026-08-01 유저 요청] 거래대금 500억 이하라 줄 전체가 회색이 돼도
     아이콘만은 항상 빨강. 패턴 표시라 금액 조건과 무관하다. */
  color: var(--red) !important;
  overflow: visible;
}


/* [2026-08-01 유저 요청] 타점 박스: 가격·거리를 1차/2차 라벨과 같은 밝기로.
   원인은 색이 아니라 투명도였다. 셋 다 #8a939a 인데 라벨만
   `body.account-tab-real .entry-target { opacity: .5 }` (예약매수 비활성 표시)에 걸려
   혼자 흐렸다. 실계좌가 기본 탭이라 사실상 항상 어긋나 보였다.
   라벨의 흐림을 걷어내는 대신 가격·거리를 같은 0.5로 내려 라벨에 맞춘다. */
body.account-tab-real :is(#candidateList, #gapRestList, .candidate-cards) .entry-slot .entry-price,
body.account-tab-real :is(#candidateList, #gapRestList, .candidate-cards) .entry-slot .entry-dist,
body.account-tab-real :is(#candidateList, #gapRestList, .candidate-cards) .entry-slot .entry-reached {
  opacity: 0.5;
}
/* 단 진입 사정권(-2% 이내)에서는 셋 다 완전 불투명으로 올린다.
   여기서까지 흐리면 흰색 전환·펄스라는 신호 자체가 죽는다. */
body.account-tab-real :is(#candidateList, #gapRestList, .candidate-cards) .entry-slot-hot .entry-target,
body.account-tab-real :is(#candidateList, #gapRestList, .candidate-cards) .entry-slot-hot .entry-price,
body.account-tab-real :is(#candidateList, #gapRestList, .candidate-cards) .entry-slot-hot .entry-dist,
body.account-tab-real :is(#candidateList, #gapRestList, .candidate-cards) .entry-slot-hot .entry-reached {
  opacity: 1;
}


/* [2026-08-01 유저 요청] 테마지도에서 길게 누르면 아이폰이 텍스트를 통째로 잡고
   '복사 / 전체 선택' 콜아웃을 띄웠다. 지도는 드래그·핀치로 조작하는 화면이라
   길게 누르는 동작이 흔한데, 그때마다 조작이 끊긴다.
   캔버스만 막으면 안 된다 - 실제로 선택되는 건 헤드의 테마명/정보 텍스트다.
   오버레이 전체(자손 포함)에서 선택과 콜아웃을 끈다. */
#themeMapOverlay,
#themeMapOverlay * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}


/* [2026-08-01 유저 요청] 갭눌림 아이콘의 두 번째 캔들은 음봉이라 파랑.
   .tv-candle-icon 의 color 는 !important 로 빨강 고정이라 currentColor 를 못 쓴다.
   몸통(fill)과 꼬리(stroke)를 각각 잡아야 한다 - rect 에 stroke 까지 주면
   테두리가 생겨 몸통이 굵어지므로 클래스를 분리했다. */
:is(#candidateList, #gapRestList, .candidate-cards) .tv-candle-icon .tv-bear-body { fill: var(--blue-down); }
:is(#candidateList, #gapRestList, .candidate-cards) .tv-candle-icon .tv-bear-wick { stroke: var(--blue-down); }


/* [2026-08-01 유저 요청] 패널 제목 '갭눌림 후보' 앞 패턴 아이콘.
   카드 안 아이콘 규칙은 :is(#candidateList, #gapRestList, .candidate-cards) 로 묶여 있어 제목엔 안 걸린다.
   제목용 규칙을 따로 둔다 - 카드 쪽 크기·색을 그대로 따라간다. */
.panel-head h2 .tv-candle-icon {
  width: 1.05em;
  height: 0.95em;
  vertical-align: -0.16em;
  margin-right: 6px;
  color: var(--red);
  overflow: visible;
}
.panel-head h2 .tv-candle-icon .tv-bear-body { fill: var(--blue-down); }
.panel-head h2 .tv-candle-icon .tv-bear-wick { stroke: var(--blue-down); }


/* [2026-08-01 유저 요청] 상세 펼침 트리거가 종목 줄 -> 표 제목줄로 이동.
   종목 줄은 이제 어디를 눌러도 차트가 열린다. */
.holdings-table tr.holdings-head-toggle { cursor: pointer; }
.holdings-table .holdings-arrow {
  font-size: 11px;
  color: var(--muted);
  margin-left: 2px;
}


/* [2026-08-01 유저 요청] 테마지도 버튼 아이콘을 🗺 이모지 -> SVG 노드 그래프로.
   지도 화면과 같은 구성(가운데 큰 원=테마, 주변 작은 원=종목, 선=소속)이라
   버튼만 보고도 무슨 화면인지 읽힌다. em 단위라 글자 크기·색을 따라간다. */
#themeMapHeaderBtn .theme-map-icon,
#themeMapQwenBtn .theme-map-icon {
  width: 1.15em;
  height: 1.05em;
  vertical-align: -0.18em;
  margin-right: 5px;
  overflow: visible;
}
/* 위성 하나만 후보 색(초록) - 지도에서 '후보 든 원'에 불이 들어오는 것과 같은 의미 */
#themeMapHeaderBtn .theme-map-icon .tm-icon-hit,
#themeMapQwenBtn .theme-map-icon .tm-icon-hit { fill: var(--green); }


/* [2026-08-02] 갭눌림 카드 프레임. 지도의 갭눌림 불(#ff9f1c)과 같은 색이라
   카드에서 주황 테두리를 본 종목이 지도에서도 주황불이다. */
.row.candidate-frame-orange {
  border: 2px solid #ff9f1c;
}

/* [2026-09-03 유저] 주봉 눌림 카드 프레임 */
.row.candidate-frame-purple {
  border: 2px solid #6a3dbf;
}


/* [2026-08-03 유저 요청] 정렬 구분선의 '정렬' 글자를 실제 버튼처럼.
   예전엔 점선 사이에 글자만 있어서 누를 수 있는 건지도, 뭘 하는 건지도 몰랐다.
   문구도 '정렬' -> '⇅ 손절 짧은순'으로 바꿔 눌렀을 때 무엇이 되는지 보이게 했다. */
.candidate-sort-divider .sort-btn {
  flex: 0 0 auto;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.candidate-sort-divider .sort-btn:active {
  background: rgba(255, 255, 255, 0.22);
}

/* [2026-08-06] 2차상승 구분선 라벨 스타일은 제거했다. 네 탭 모두 접힘(base-divider)으로
   통일하면서 펼친 구분선(.secondrise-divider-label)을 쓰는 곳이 없어졌다. */

/* [2026-08-06 유저 요청] 매매후보 탭 전환 슬라이드.
   탭 바(.theme-tabs-container)는 이미 0.3s 로 밀리는데 목록은 innerHTML 을 통째로
   갈아끼워서 툭 바뀌었다. 그 어긋남을 없앤다 - 차트 종목 넘김(beginChartSlide)과 같은 방식. */
.candidate-list-viewport {
  position: relative;
  overflow: hidden;
}

/* [2026-08-06 유저 요청] 테마지도 단계별 숨김 버튼. 왼쪽 하단, 닫기 바 바로 위.
   [수정] 처음엔 캔버스 위에 absolute 로 띄웠는데 닫기 바와 겹쳤다(유저 제보).
   닫기 바 높이는 padding + 글자 + safe-area 라 값이 기기마다 달라서, 그만큼을 계산해
   bottom 을 잡으면 어느 기기에선 또 겹친다. 그래서 흐름 안의 형제로 되돌렸다 -
   flex 열에서 닫기 바 바로 위 칸을 차지하므로 겹칠 수가 없다.
   높이는 26px 버튼 + 위아래 여백뿐이라 캔버스에서 가져가는 자리가 적다. */
.theme-map-stage-filter {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 9px;
  padding: 5px 0 5px 10px;
}
.theme-map-stage-filter .tm-stage-btn {
  position: relative;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.theme-map-stage-filter .tm-stage-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  display: block;
  border: 1px solid transparent;
}
/* 숨김 상태: 색을 죽이고 사선을 그어 '꺼짐'이 한눈에 보이게 한다.
   (투명도만 낮추면 노랑/초록은 원래 밝아서 켜짐/꺼짐 구분이 잘 안 된다) */
.theme-map-stage-filter .tm-stage-btn.off .tm-stage-dot {
  opacity: 0.25;
  border-color: rgba(255, 255, 255, 0.5);
}
/* [2026-08-07 유저 요청] 테마 원 쪽 이동. 색 버튼 위 자기 줄에, 크게.
   처음엔 색 버튼과 같은 줄 오른쪽에 붙였는데 좁은 화면에서 잘려 나갔다. */
.tm-pager {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 6px 0 2px;
}
.tm-pager.hidden { display: none; }
.tm-page-btn {
  width: 44px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.09);
  color: var(--text);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tm-page-btn:active { background: rgba(255, 255, 255, 0.2); }
.tm-page-btn:disabled { opacity: 0.25; cursor: default; }
.tm-page-label {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  min-width: 46px;
  text-align: center;
}

.theme-map-stage-filter .tm-stage-btn.off::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 2px;
  background: rgba(255, 255, 255, 0.8);
  transform: rotate(-45deg);
  border-radius: 2px;
}
/* 밀려나가는 옛 화면(과 드래그 중 따라 들어오는 미리보기). 절대배치라 새 목록의 흐름
   높이를 건드리지 않는다.
   [2026-08-06 버그수정] 카드 스타일이 전부 ':is(#candidateList, ...) .foo' 즉 #candidateList
   의 '자손' 선택자인데 이 요소는 형제라, 스타일이 하나도 안 걸려 아이콘이 기본 크기로
   거대하게 나왔다(유저 제보). 그래서 .candidate-cards 를 그 :is() 목록에 추가하고
   여기와 #candidateList 양쪽에 붙인다. :is() 특이도는 인자 중 최대값(=ID)이라
   클래스를 더해도 우선순위는 그대로다. */
.candidate-slide-ghost {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  will-change: transform, opacity;
}
/* 탭 바와 같은 0.3s. 다만 탭 바의 튕기는 이징(cubic-bezier ...1.56...)은 안 쓴다 -
   translateX(100%) -> 0 에서 0 을 지나쳐 되돌아오면 반대편에 빈 공간이 보인다. */
.candidate-sliding {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
/* 손가락 애니메이션을 줄이도록 설정한 기기에서는 슬라이드하지 않는다(즉시 전환). */
@media (prefers-reduced-motion: reduce) {
  .candidate-sliding { transition: none; }
}

/* [2026-08-08 유저 요청] 수평선을 일봉 이평선 끝으로 보내는 버튼 4개.
   수평선(━)이 켜진 상태에서 ━ 를 한 번 더 누르면 나타난다. */
.ma-snap-bar {
  position: absolute;
  /* [2026-08-30 유저 요청] 가운데에서 왼쪽으로. 가운데면 캔들 한복판을 가려서
     선을 옮기려다 정작 캔들이 안 보였다. 왼쪽은 대개 지나간 캔들이라 덜 가린다. */
  left: 10px;
  transform: none;
  top: 0;                 /* 실제 값은 positionMaSnapBar() 가 매 렌더마다 넣는다 */
  z-index: 6;             /* entry-line-toggle-bar(5) 위 */
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 4px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}
.ma-snap-bar.hidden { display: none; }
.ma-snap-btn {
  min-width: 0;
  /* [2026-08-30 유저 요청] 조금 작게. 손가락으로 누르는 버튼이라 너무 줄이지는 않는다
     (애플 권장 최소 44px 보다 낮지만, 네 개가 가로로 붙어 있어 세로만 줄였다). */
  height: 34px;
  padding: 0 11px;
  border: 2px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.ma-snap-btn:active { background: color-mix(in srgb, var(--blue) 22%, var(--panel)); }
/* 방금 누른 버튼 - 한 번 더 누르면 닫힌다는 걸 눈으로 알 수 있게 채운다. */
.ma-snap-btn.active {
  background: currentColor;
  color: var(--panel);
}
/* 이평선 색과 맞춘다(MA_SERIES_BY_MODE.day 와 동일) - 어느 선으로 보내는지 바로 보이게. */
.ma-snap-btn[data-ma-snap="3"]  { border-color: #ff2d78; color: #ff2d78; }
.ma-snap-btn[data-ma-snap="5"]  { border-color: #76ff03; color: #5cb800; }
.ma-snap-btn[data-ma-snap="10"] { border-color: #1565c0; color: #1565c0; }
.ma-snap-btn[data-ma-snap="20"] { border-color: #f2c200; color: #b18f00; }

/* [2026-08-08 유저 요청] 실시간 시세 신호등. 정상/이상을 색으로 바로 구분한다.
   지연 = 키움 체결시각 대비 도착까지 걸린 시간(중앙값).
   구독 = 등록 종목 중 최근 30초에 실제로 틱이 온 종목 수. */
.rt-lag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 2px solid var(--line);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
  cursor: default;
  white-space: nowrap;
}
.rt-lag.hidden { display: none; }
.rt-lag::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.rt-lag.rt-ok   { color: #2e7d32; border-color: color-mix(in srgb, #2e7d32 45%, transparent); }
.rt-lag.rt-warn { color: #ef6c00; border-color: color-mix(in srgb, #ef6c00 55%, transparent); }
.rt-lag.rt-bad  { color: #c62828; border-color: color-mix(in srgb, #c62828 55%, transparent); }
.rt-lag.rt-idle { color: var(--muted); }
.rt-lag[role="button"] { cursor: pointer; }

/* [2026-09-09 유저 요청] 실시간 배지 옆 '시황' 버튼.
   배지(.rt-lag)와 같은 알약 모양·같은 margin-top 이라 한 줄로 나란히 선다.
   전역 button 규칙이 height:36px 라 배지(패딩 6/14 + 16px 글자)와 높이가 맞는다. */
/* [2026-09-10 유저] "시황 버튼 너무 안 보여, 매매채점 버튼처럼 크고 잘 보이게".
   2026-09-09 에 실시간 배지 옆 작은 알약으로 만들었던 것을 헤더 버튼 줄로 옮겼다.
   크기·색은 위 `.actions > #marketBriefBtn` 이 나머지 셋과 함께 정한다. 여기는
   글자 굵기와 눌린 뒤 상태색만 남긴다 - 알약 시절의 여백·둥근모서리·초록 테두리를
   그대로 두면 줄에서 혼자 삐져나온다. */
.brief-btn {
  font-weight: 800;
}
.brief-btn:disabled { opacity: 0.55; }

/* [2026-09-10 유저] "시황 배경이랑 텍스트를 옛날 CGV 모니터처럼 초록색 테마로".
   옛 인광 단말기(green phosphor CRT) 흉내다. 이 시황 블럭에만 걸고 나머지 화면은
   건드리지 않는다 - 클래스 넷뿐이라 이 덩어리만 지우면 원래대로 돌아온다.

   숫자를 읽는 화면이라 멋보다 읽히는 게 먼저다. 그래서 세 가지를 지켰다.
     · 글자는 밝은 초록(#33ff66) 하나로만 - 빨강/파랑 섞으면 인광 느낌이 깨지고,
       이 블럭엔 등락 색이 원래 없다(글로 "3일 연속 내림"이라 쓴다).
     · 번짐(text-shadow)은 아주 약하게. 세게 주면 15px 고정폭이 뭉개진다.
     · 주사선(scanline)은 3px 주기에 8% - 폰 고해상도에서 무늬가 지지 않을 만큼만.
   본문 글꼴·크기·줄바꿈 규칙은 아래 원래 규칙 그대로 쓴다. 색만 갈아끼운다.

   아래 원래 규칙보다 앞에 적혀 있는데도 이게 이기는 이유: 선택자를 id(#marketBriefBox)
   로 잡았다. id 는 클래스보다 세서 !important 를 안 써도 된다 - 색만 갈아끼우는
   덧칠에 !important 를 뿌리면 나중에 손대기가 어려워진다. */
#marketBriefBox {
  background: #050b06;
  border-color: #1c5c2c;
  box-shadow: 0 0 0 1px rgba(51, 255, 102, 0.06) inset;
}
#marketBriefBox .brief-box-head {
  border-bottom-color: #1c5c2c;
  background: #081408;
}
#marketBriefBox .brief-box-title { color: #7dffa4; text-shadow: 0 0 6px rgba(51, 255, 102, 0.35); }
#marketBriefBox .brief-box-at { color: #3f8f57; }
#marketBriefBox .brief-del-btn {
  border-color: rgba(51, 255, 102, 0.4);
  color: #6ee88f;
}
/* [2026-09-10 유저] "눈 아프다 ㅋㅋㅋ 시황 초록색 그냥 흰색으로 해줘.
   나쁜 내용이 있는 줄만 파란색 텍스트로 보여줄수 있으면 보여주고"
   같은 날 넣었던 초록 인광(#33ff66) + 번짐 + 주사선을 뺐다. 오래 읽는 화면에
   글자마다 번짐이 깔리면 눈이 먼저 지친다. 어두운 바탕만 남긴다.
   나쁜 줄은 파랑 - 이 앱에서 '안 좋은 건 파랑'이다(공지 띠와 같은 규칙,
   styles.css:517 주석 참고. 한국 증시에서 빨강은 호재로 읽힌다). */
#marketBriefBox .brief-box-body {
  color: #e8eef1;
}
#marketBriefBox .brief-bad-line { color: #6fb3ff; }

/* [2026-09-09 유저 요청] 시황 블럭. 삭제하면 창까지 사라진다. */
.brief-box {
  margin: 10px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  overflow: hidden;
}
.brief-box.hidden { display: none; }
.brief-box-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.brief-box-title { font-weight: 800; font-size: 17px; }
.brief-box-at { color: var(--muted); font-size: 13px; flex: 1 1 auto; }
.brief-del-btn {
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, #c62828 45%, transparent);
  background: transparent;
  color: #c62828;
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 auto;
}
/* 조립한 글을 줄바꿈 그대로 보여준다. 표처럼 자리를 맞춘 줄이 있어 고정폭이어야 한다.
   긴 줄은 상자 안에서만 가로로 흐르게 둔다 - 본문이 옆으로 밀리면 안 된다. */
.brief-box-body {
  margin: 0;
  padding: 10px 12px;
  max-height: 60vh;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* [2026-09-09 유저] "폰트를 좀 크게 해줘봐" - 12.5px 는 폰에서 읽기 힘들었다. */
  font-size: 15px;
  line-height: 1.75;
  /* [2026-09-10] 줄 접기(pre-wrap)를 넣었다가 같은 날 되돌렸다.
     유저: "아 이렇게 뒤를 잘라먹으면 안되는데" / "줄 내림 기능은 그냥 취소해줘".
     폰에서 오른쪽이 잘려 보이는 걸 고치려 했는데, 접히면 자리를 맞춘 줄의 칸이
     어긋나고 낱말이 중간에서 끊긴다. 표로 읽는 화면이라 그게 더 나빴다.
     원래대로 한 줄은 한 줄로 두고, 긴 줄은 상자 안에서 가로로 흐르게 둔다
     (overflow:auto - 본문은 안 밀린다). 고정폭이라 숫자 표가 흐트러지지 않는다. */
  white-space: pre;
  color: var(--text);
}
/* 보내는 중·보냄 상태. 눌렀는데 아무 반응이 없으면 또 누르게 된다. */
/* 보낸 뒤 결과를 잠깐 알린다. 어두운 버튼 위라 진한 초록·빨강은 안 읽혀서 밝은 쪽으로
   올린다(테두리도 같이 바꿔야 상태가 눈에 들어온다). */
.actions > #marketBriefBtn.brief-done { color: #7ee2a0; border-color: #7ee2a0; }
.actions > #marketBriefBtn.brief-bad  { color: #ff8a80; border-color: #ff8a80; }

/* 느려진 순간의 기록. 배지를 누르면 펼쳐진다. */
.rt-lag-log {
  margin-top: 6px;
  max-width: 560px;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  font-size: 13px;
  line-height: 1.65;
}
.rt-lag-log.hidden { display: none; }
.rt-lag-log .rt-help {
  padding: 2px 0 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.rt-lag-log .rt-ev { padding: 5px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.rt-lag-log .rt-ev:last-child { border-bottom: none; }
.rt-lag-log .rt-ev-head { font-weight: 700; }
.rt-lag-log .rt-ev.bad  .rt-ev-head { color: #c62828; }
.rt-lag-log .rt-ev.warn .rt-ev-head { color: #ef6c00; }
.rt-lag-log .rt-ev-why { color: var(--text); }
.rt-lag-log .rt-ev-sub { color: var(--muted); font-size: 11px; }
.rt-lag-log .rt-empty { color: var(--muted); }

/* [2026-09-10 유저] 눌림 통계 - 타점 줄 바로 아래 붙는 참고 줄.
   판정에 쓰는 값이 아니라 "이 자리는 보통 어땠나"라서, 타점보다 한 단계 물러나 보이게
   작고 흐리게 둔다. 초록/빨강 같은 뜻 있는 색은 쓰지 않는다 - 여기 숫자는 좋고 나쁨이
   아니라 확률이고, 색을 주면 신호로 읽힌다. */
.pb-stat {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 3px 0 0;
  padding: 5px 8px;
  border-left: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 0 6px 6px 0;
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.pb-stat-head { font-weight: 700; color: rgba(255, 255, 255, 0.72); }
.pb-stat-item { white-space: nowrap; }
.pb-stat-item b { font-weight: 700; color: rgba(255, 255, 255, 0.86); }

/* [2026-08-28 유저 요청] 회색 = 기준 미달. 가운데 줄로 한눈에 걸러지게 한다.
   시총 회색(.cap-text-low)과 기준봉 거래대금 회색(.tv-text-low)에만 붙는다.
   거래대금 쪽은 원래 밑줄이 있어서 지우고 가운데 줄로 갈아 끼운다.
   [2026-09-10 유저] 시총 4,000억 초과(.cap-text-high)도 같은 줄을 긋는다. */
:is(#candidateList, #gapRestList, .candidate-cards) .cap-text.cap-text-low,
:is(#candidateList, #gapRestList, .candidate-cards) .cap-text.cap-text-high {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

:is(#candidateList, #gapRestList, .candidate-cards) .candidate-tv-line.tv-text-low .highlight-gray-underline {
  text-decoration: line-through !important;
  text-decoration-color: #8a939a !important;
  text-decoration-thickness: 1px;
}

/* [2026-08-28 유저 재요청] 줄이 안쪽 숫자에만 붙어서 '기준봉 거래대금' 글자는 멀쩡했다.
   줄 전체(라벨+숫자)에 긋는다. 시총은 이미 요소 전체에 붙어 있어 그대로 둔다. */
:is(#candidateList, #gapRestList, .candidate-cards) .candidate-tv-line.tv-text-low {
  text-decoration: line-through !important;
  text-decoration-color: #8a939a !important;
  text-decoration-thickness: 1px;
}


/* [2026-08-29 유저 요청] 매매 채점기를 대시보드 안에 띄우는 자리.
   차트 오버레이(z-index 90)보다 아래라 차트가 그 위에 뜬다. */
/* [2026-08-29 유저 제보] '대시보드' 버튼이 아이폰 시계에 가려 안 눌렸다.
   index.html 이 viewport-fit=cover 라 화면이 상태바 밑까지 뻗는데, iframe 이
   inset:0 으로 그 영역까지 채워서다. 상태바·홈바 높이만큼 비켜 앉힌다. */
.journal-panel { position: fixed; inset: 0; z-index: 60; background: #0b0d10;
                 box-sizing: border-box;
                 padding-top: env(safe-area-inset-top, 0px);
                 padding-bottom: env(safe-area-inset-bottom, 0px); }
.journal-panel.hidden { display: none; }
.journal-panel iframe { width: 100%; height: 100%; border: 0; display: block; }

/* [2026-08-29 유저 요청] 시총이 초록 구간(1,000억 이상)이면 차트 상단 머리띠 전체를 초록으로.
   기본 회색(#52575a)과 같은 밝기대의 초록이라 버튼·글자 대비는 그대로 간다. */
/* [2026-08-29 유저 요청] 600억 이하는 불쾌한 색으로. 그 구간 승률이 18~31% 라
   "여기 들어가지 마라"가 색으로 느껴져야 한다. 밝은 회색은 그냥 다른 색일 뿐
   아무 감정도 안 생겼다.
   Pantone 448 C (#4A412A) - 2012년 호주가 담뱃갑 색을 정하려고 벌인 조사에서
   가장 역겹다고 뽑힌 색. 탁한 올리브 갈색이라 썩은 것을 떠올리게 한다. */
/* [2026-08-29 유저 요청] 4,000억 이상은 빨강(검정에서 바꿈).
   기본 회색과 밝기가 비슷해 흰 글자·버튼 대비는 그대로 간다. */
.chart-overlay #chartPanel .panel-head.cap-head-big { background: #6e2323; }


/* [2026-08-29 유저 요청] 시총 500억 미만이면 차트 전체를 역겨운 색으로.
   머리띠만 바꾸면 스크롤 내리는 순간 잊힌다. 보는 내내 불편해야 한다.
   캔버스는 투명이고 회색(rgb 128)은 CSS 가 칠하므로 색만 갈면 된다.
   판 색은 원래 회색과 밝기를 비슷하게 잡았다 - 캔들·이평선이 묻히면 차트 구실을 못 한다. */
#chartPanel.cap-junk { background: #3d3722; }
#chartPanel.cap-junk .minute-chart,
#chartPanel.cap-junk #volumeChart { background: #7b7150; }
#chartPanel.cap-junk .panel-head { background: #4a412a; }

/* [2026-08-29 유저 요청] 시총 1,000~3,000억은 글자만 초록.
   위쪽의 '어느 구간이든 기본색' 규칙과 같은 우선순위라 뒤에 와야 이긴다. */
#chartUpdated.cap-text-green { color: #3ddc84; font-weight: 700; }

/* [2026-08-29 유저 요청] 600억 이하는 올리브보다 더 어둡고 진하게.
   .cap-junk 뒤에 와야 이긴다(같은 우선순위). 판은 어둡게 하되 캔들이 묻히지 않는 선까지만. */
#chartPanel.cap-junk.cap-junk-deep { background: #241f0f; }
#chartPanel.cap-junk.cap-junk-deep .minute-chart,
#chartPanel.cap-junk.cap-junk-deep #volumeChart { background: #3a3520; }
#chartPanel.cap-junk.cap-junk-deep .panel-head { background: #2e2813; }


/* [2026-08-29 유저 요청] 새로고침 버튼 숨김.
   /api/refresh 는 /api/summary 와 같은 값을 돌려준다 - 재조회 코드는 504 타임아웃
   때문에 예전에 빠졌다(web_app.py refresh() 주석). 게다가 화면은 60초마다
   autoRefreshLogic 이 같은 걸 부르고 있어서 이 버튼은 하는 일이 없었다.
   지우지 않고 숨기는 이유: app.js 여섯 군데가 이 요소를 만진다. 요소가 사라지면
   그 자리에서 예외가 나 화면이 통째로 안 뜬다(예전에 두 번 겪었다).
   되살리려면 이 줄만 지우면 된다. */
.actions > #refreshBtn { display: none; }

/* [2026-08-30 유저 요청] 탭 색을 빨강 하나로 통일(핑크·초록·파랑·노랑에서 바꿈).
   이평선 색을 그대로 쓰니 탭 줄이 알록달록해서 어느 게 고른 것인지가 오히려 덜 보였다.
   색은 한 가지로 두고, 고른 것만 꽉 채워 뒤집는다.
   (예전 주석) 매매후보 탭에 이평선 색. 차트 범례·매매채점 단계 배지와 같은 값이다.
   안 고른 탭은 흐리게(고른 것이 드러나야 한다), 고른 탭만 제 색을 다 낸다.
   활성 탭을 파랑으로 못 박은 기존 규칙이 있어 .active 에 속성까지 붙여 덮는다. */
.panel:has(> .panel-head > #candidateHeading) .theme-tab-bar .theme-tab[data-candidate-tab="ma3"] { color: #ffffff; opacity: 0.55; }   /* 3일선 */
.panel:has(> .panel-head > #candidateHeading) .theme-tab-bar .theme-tab[data-candidate-tab="pullback"] { color: #ffffff; opacity: 0.55; }   /* 5일선 */
.panel:has(> .panel-head > #candidateHeading) .theme-tab-bar .theme-tab[data-candidate-tab="ma10"] { color: #ffffff; opacity: 0.55; }   /* 10일선 */
.panel:has(> .panel-head > #candidateHeading) .theme-tab-bar .theme-tab[data-candidate-tab="ma20"] { color: #ffffff; opacity: 0.55; }   /* 20일선 */
.panel:has(> .panel-head > #candidateHeading) .theme-tab-bar .theme-tab.active[data-candidate-tab="ma3"] { color: #ffffff; opacity: 1;
  background: #ff0a24; }
.panel:has(> .panel-head > #candidateHeading) .theme-tab-bar .theme-tab.active[data-candidate-tab="pullback"] { color: #ffffff; opacity: 1;
  background: #ff0a24; }
.panel:has(> .panel-head > #candidateHeading) .theme-tab-bar .theme-tab.active[data-candidate-tab="ma10"] { color: #ffffff; opacity: 1;
  background: #ff0a24; }
.panel:has(> .panel-head > #candidateHeading) .theme-tab-bar .theme-tab.active[data-candidate-tab="ma20"] { color: #ffffff; opacity: 1;
  background: #ff0a24; }
.panel:has(> .panel-head > #candidateHeading) .theme-tab-bar .theme-tab.active[data-candidate-tab="ma3"]::before { background: #ff0a24; }
.panel:has(> .panel-head > #candidateHeading) .theme-tab-bar .theme-tab.active[data-candidate-tab="pullback"]::before { background: #ff0a24; }
.panel:has(> .panel-head > #candidateHeading) .theme-tab-bar .theme-tab.active[data-candidate-tab="ma10"]::before { background: #ff0a24; }
.panel:has(> .panel-head > #candidateHeading) .theme-tab-bar .theme-tab.active[data-candidate-tab="ma20"]::before { background: #ff0a24; }

/* [2026-08-30] 보유종목 이슈 날짜. 며칠 전 이슈일 수 있어 언제 것인지 밝힌다. */
.holding-issue .holding-issue-date { display: inline-block; margin-right: 6px;
  padding: 0 5px; border-radius: 4px; background: rgba(255,255,255,0.10);
  color: var(--muted); font-size: 11px; font-weight: 700; }

/* [2026-08-30 유저 요청] 고른 탭도 글자색은 제 색 그대로. 빨강 바탕에 핑크·노랑은
   대비가 약해서, 색은 안 건드리고 어두운 그림자로 테두리만 만들어 읽히게 한다. */
.panel:has(> .panel-head > #candidateHeading) .theme-tab-bar .theme-tab.active {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 1px rgba(0, 0, 0, 0.9);
}

/* [2026-08-30 유저 요청] 차트 오른쪽 여백 직접입력 칸. 옆 버튼들과 높이를 맞춘다. */
.chart-rightpad-input {
  width: 84px; height: 36px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--chip); color: var(--text);
  font: inherit; font-size: 15px; text-align: right;
}
.chart-rightpad-unit { margin-left: 6px; color: var(--muted); font-size: 14px; }

/* [2026-08-30 유저 요청] 이슈 날짜 옆 '며칠 전'. 날짜보다 흐리게 - 날짜가 먼저 읽히고
   경과일은 곁들이는 정보다. */
.holding-issue .holding-issue-date .issue-ago {
  margin-left: 5px; opacity: 0.7; font-weight: 400;
}

/* [2026-09-11 유저] "과거 비슷한 차트 종목의 15분봉 캔들을 볼수 있는 창을 만들어주던지"
   눌림 배지(.pb-badge)를 누르면 아래에서 올라오는 창. 사례마다 캔버스 하나에 세 날
   (기준봉·1양봉·눌림날)의 15분봉을 이어 그린다(app.js drawMiniCandles). */
.pb-badge { cursor: pointer; }
.similar-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0, 0, 0, 0.72);
  display: flex; align-items: flex-end; justify-content: center;
}
.similar-overlay.hidden { display: none; }
.similar-panel {
  width: 100%; max-width: 980px; max-height: 92vh; overflow-y: auto;
  background: var(--panel); border-radius: 14px 14px 0 0;
  padding: 8px 12px 20px; box-sizing: border-box;
}
.similar-head {
  display: flex; align-items: center; gap: 8px;
  position: sticky; top: 0; background: var(--panel); padding: 6px 0 8px;
  border-bottom: 1px solid var(--line);
}
.similar-head b { font-size: 16px; white-space: nowrap; }
.similar-sub { flex: 1 1 auto; color: var(--muted); font-size: 12px; line-height: 1.35; }
.similar-close {
  flex: 0 0 auto; min-width: 30px; height: 30px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--text);
}
.similar-case { margin: 10px 0 14px; }
.similar-case-head {
  display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline;
  font-size: 13px; margin-bottom: 4px;
}
.similar-code, .similar-meta { color: var(--muted); font-size: 12px; }
.similar-outcome { margin-left: auto; font-weight: 700; }
/* 한국식 - 오른 건 빨강, 못 간 건 파랑 (이 앱의 등락 색과 같다) */
.similar-outcome.sim-good { color: #ff6b6b; }
.similar-outcome.sim-bad { color: #6fb3ff; }
/* [2026-09-11 유저] "차트 이미지를 나열하라는 게 아니라 제일 비슷한 차트만 보여주면
   되는데" + "이렇게 눌려 있는 차트 말고 실제 차트처럼 볼 수 있으면 더 좋고"
   8건 × 130px 이던 것을 1건으로 줄이고 그만큼 키웠다. 눌려 있던 건 자리가 없어서였다. */
.similar-canvas {
  display: block; width: 100%; height: 52vh; min-height: 320px; max-height: 560px;
  background: rgba(255, 255, 255, 0.03); border-radius: 6px;
}
.similar-empty, .similar-note { color: var(--muted); font-size: 12px; line-height: 1.5; }

/* [2026-09-11 유저] "읽기 너무 헷갈려 … 2차상승 5일선반등 뱃지를 다른줄로 이동시키고
   구분을 짓던지". 배지줄을 시간축으로 둘로 나눴다(app.js badgeRowsHtml). 줄 앞 꼬리표는
   작고 흐리게 - 배지보다 눈에 띄면 안 된다. 색은 주봉=보라(주봉 카드 프레임색), 단계=초록. */
.candidate-badge-row { align-items: center; }
.badge-row-label {
  font-size: 11px; font-weight: 700; line-height: 1.4;
  padding: 0 6px; border-radius: 4px; white-space: nowrap;
  color: var(--muted); border: 1px solid var(--line);
}
.badge-row-weekly .badge-row-label { color: #c9a7ff; border-color: rgba(201, 167, 255, 0.45); }
.badge-row-daily  .badge-row-label { color: #9ad9a8; border-color: rgba(154, 217, 168, 0.45); }