/* ===== 코바 UI 공통 규칙 (2026-10-27 디자인 점검 · 매니저 피드백) =====
   맨 마지막에 읽는다. 화면마다 제각각이던 같은 역할의 부품(보기 전환 탭 · 창 · 배지 · 패널 제목)을 한 규격으로.
   원칙: 코바 = 기준 · 객관 · 균형 — 강조색은 코바 파랑 하나, 형광 · 글로우 없이 남색 면과 글자 대비로 위계를 만든다.
   높이 28 / 32 / 36 · 모서리 4 / 6 / 10 / 999 · 간격 4 / 8 / 12 / 16 / 24 · 글자 최소 11px */

/* 로고: 이름 하나로 '코바 레이더' + 작은 영문 */
.logo { letter-spacing: 0; }
.logo .wm { display: inline-flex; align-items: baseline; gap: 6px; }
.logo .wm b { font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.logo .wm small { font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--text-3); letter-spacing: .06em; margin: 0; }
@media (max-width: 640px) { .logo .wm small { display: none; } .logo .wm b { font-size: 15px; } }
@media (max-width: 420px) { .logo .wm { display: none; } } /* 좁은 폰: 로고는 아이콘만 (글자가 '코바 레이더'로 길어져 위 줄이 넘치던 것) */

/* 패널 제목: 본문(14)보다 한 단계 크게 · 굵게, 아래 구분선 */
.p-head { min-height: 44px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.p-head h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }

/* 보기 전환 탭(.seg): 패널마다 19~29px 로 달랐던 높이를 하나로 — 바깥 32 · 단추 28 */
.seg { min-height: 32px; padding: 2px; border-radius: 8px; background: var(--win-2); gap: 2px; align-items: stretch; }
.seg button, .scn-list .p-head .seg button { min-height: 28px; padding: 0 12px; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.seg button:hover { color: var(--text); }
.seg button.on { background: color-mix(in srgb, var(--text) 10%, var(--win)); color: var(--text); box-shadow: none; }
.p-head .seg button { padding: 0 9px; }

/* 배지: 10px 이하 글자 없애고 한 규격 (신규 · 연습 · 무기한 · 회원) */
.tag, .new, .demo { font-size: 11px; line-height: 18px; height: 18px; padding: 0 6px; border-radius: 4px; font-weight: 600; display: inline-flex; align-items: center; vertical-align: middle; }
.new { border: 0; background: color-mix(in srgb, var(--up) 16%, transparent); color: var(--up); }
.demo { background: color-mix(in srgb, var(--brand) 22%, transparent); color: var(--brand-2); font-weight: 700; }

/* 창(모달): 뒤를 어둡게 깔고(집중), 창 경계를 테두리 · 모서리로 분명히 */
.overlay.on, .overlay[open] { background: rgba(4, 7, 14, .62) !important; }
.overlay .modal { border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 16px 48px rgba(0, 0, 0, .6); }
.overlay .modal .btn.primary, .pop .btn.primary, .ind-dlg .is-f .btn.primary { background: var(--brand); color: #fff; border: 1px solid var(--brand); border-radius: 6px; font-weight: 600; }
.overlay .modal .btn.primary:hover, .pop .btn.primary:hover { filter: brightness(1.12); }

/* 한글에 고정폭 글꼴 · 넓은 자간 쓰지 않기 (코바 글씨 규칙) */
.fd-who { font-family: var(--font); }
.cs-modal .cs-sub, .ind-dlg .cs-sub { letter-spacing: 0; }
.fd-imp { font-size: 9px; letter-spacing: 0; }

/* 설명 글은 줄간격 넉넉히 (한글 읽기) */
.howto, .inf-note, .evi-say, .ms-b, .ms-full, .fd-card p { line-height: 1.65; }
.evi-say { max-width: 68ch; }

/* 마켓 인사이트 아바타: 이모지 대신 코바 원형 */
.ms-av.ins { --c: var(--brand); color: #fff; font-weight: 800; font-size: 12px; }

/* 키보드 포커스는 보이게, 마우스 클릭 잔상은 없게 */
:focus:not(:focus-visible) { outline: none; }

/* 오른쪽 아이콘 줄: 성격별 세 묶음 사이 구분선 (시장 보기 · 데이터 · 내 도구) */
.rail .rail-sep { display: block; flex: none; width: 20px; height: 1px; margin: 6px auto; background: var(--line-2); }

/* 패널 제목 줄 통일: 선물 데이터의 자체 머리도 .p-head 와 같은 모양 */
.cd-head { min-height: 44px; padding: 8px 12px !important; border-bottom: 1px solid var(--line); align-items: center; }
.cd-head b { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
/* 모의 거래: 제목은 패널 머리에 있으니 주문 칸 안 제목 · 연습 배지는 숨김. 호가는 접어 둠 */
.panel[data-p="trade"] .tf-top > b, .panel[data-p="trade"] .tf-top > .demo { display: none; }
.trade-book { border-top: 1px solid var(--line); }
.trade-book > summary { list-style: none; cursor: pointer; padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.trade-book > summary::-webkit-details-marker { display: none; }
.trade-book > summary::before { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.trade-book[open] > summary::before { transform: rotate(45deg); }
.trade-book > summary:hover { color: var(--text); }

/* 즐겨찾기 별: 글자 ☆ 대신 아이콘 — 켜지면 채운 별 */
.istar { display: inline-grid; place-items: center; }
.istar .ico { fill: none; }
.istar.on .ico { fill: currentColor; }
/* 익절 · 손절 펼침 꺾쇠 */
.tpsl-car { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; vertical-align: 2px; }
.tpsl-car.on { transform: rotate(45deg); vertical-align: 4px; }
/* 빈 화면: 제목(무엇이 비었나) + 설명(어떻게 채우나) 두 줄, 가운데 */
.empty { padding: 36px 20px; line-height: 1.6; font-size: 13px; color: var(--text-3); }
.empty b { display: block; font-size: 14px; color: var(--text-2); font-weight: 600; margin-bottom: 4px; }

/* 상단 시세 줄: 라벨 12px, 값 13px 굵게, 항목 사이 가는 구분선 */
.quote-bar { gap: 0; }
.quote-bar > * + * { margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--line); }
.quote-bar > .qb-main + * { border-left: 0; padding-left: 4px; }
.qb-it small { font-size: 12px; color: var(--text-3); }
.qb-it b { font-size: 13px; font-weight: 600; }
/* 종목 단추 · 검색: 높이 36 / 32, 모서리 6 / 999 */
#chartWin .chart-head #symBtn, .chart-head .sym-btn { min-height: 36px; padding: 2px 8px 2px 4px; border-radius: 6px; }
.topbar .search { height: 32px; }
@media (max-width: 640px) { .search .s-long { display: none; } .chart-head .sym-btn .sub { display: none; } }

/* 레이더 결과 아래 요약 카드 (결과가 적을 때 빈 화면 대신) */
.res-about { margin: 4px 12px 16px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--win-2); }
.res-about > b { font-size: 13px; color: var(--text-2); }
.res-about p { margin: 6px 0 0; font-size: 13px; line-height: 1.65; color: var(--text-2); }
.ra-tfs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; }
.ra-tfs .dim { margin-right: 4px; }
.ra-tfs .chip { height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font-size: 13px; cursor: pointer; }
.ra-tfs .chip:hover { border-color: var(--brand); color: var(--text); }
.ra-tfs .chip b { margin-left: 4px; color: var(--text); }
/* 10px 대 글자 → 최소 11px */
.mbadge, .lock-tag, .kind, .srv-tag, .scr-table .sym .sub, .pop.fly .fly-sec.fly-sec-x, .vw-nm small { font-size: 11px; }
.fd-imp { font-size: 11px; }

/* 휴대폰 '더보기': 묶음 제목 사이 간격 */
.m-more-pop .plabel + button { margin-top: 0; }
.m-more-pop button + .plabel { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
@media (max-width: 640px) { #chartWin .chart-head #symBtn { max-width: 156px; } }

/* 새 버전 알림 줄 */
.upd-bar { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 9999; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; background: var(--win-2); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.5); font-size: 14px; color: var(--text); white-space: nowrap; }
.upd-bar .upd-x { background: none; border: 0; color: var(--text-3); font-size: 18px; cursor: pointer; padding: 0 4px; }
@media (max-width: 640px) { .upd-bar { bottom: 72px; } }

/* 좁은 휴대폰 · 글자 크게 설정한 휴대폰 (10/28): 위쪽 줄이 최소 400px 를 버텨서 화면 전체가 옆으로 밀리던 것.
   위쪽 줄은 어떤 폭에서도 줄어들게, 그 밖의 줄은 넘치면 다음 줄로 */
@media (max-width: 640px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .topbar { min-width: 0; }
  .topbar .search { min-width: 0; }
  .top-r { min-width: 0; gap: 6px; }
  .top-r .btn { flex-shrink: 0; }
  .mbar { grid-auto-columns: minmax(0, 1fr); }
  .mbar a { min-width: 0; white-space: nowrap; }
  .scn-list .p-head { row-gap: 8px; }
  .scn-list .p-head #uniSeg { flex-shrink: 0; }
  .scn-cards, .scn-res, .win { min-width: 0; }
}
@media (max-width: 420px) {
  .top-r .auth-btn .lbl { display: none; }
  .top-r .auth-btn, #themeBtn { width: 32px; padding: 0; justify-content: center; }
  .top-r .primary { padding: 0 9px; }
  .top-r .primary .t-ex { display: none; }
}
@media (max-width: 360px) {
  .topbar { gap: 6px; padding: 0 8px; }
  .topbar .search { padding: 0 9px; }
  .topbar .search > span { display: none; }
  .topbar .search { flex: 0 0 34px; justify-content: center; }
  .top-r { margin-left: auto; }
  .mbar a { font-size: 10.5px; }
}
/* 레이더 머리줄: 거래소 선택이 눌려 빈 칸이 되던 것 → 줄어들지 않게, 좁으면 100·200·전체를 아랫줄로 */
@media (max-width: 640px) {
  .scn-list .p-head .kd-btn { flex: 0 0 auto; min-width: 92px; }
  .scn-list .p-head .tool { flex: 0 0 auto; }
}
@media (max-width: 400px) {
  .scn-list .p-head #uniSeg { order: 9; flex: 1 1 100%; display: flex; }
  .scn-list .p-head #uniSeg > * { flex: 1 1 0; }
}
/* 차트 범례: 지표 값이 오른쪽 가격 축 밑으로 파고들던 것 */
@media (max-width: 640px) {
  #kc .lg { max-width: calc(100% - 64px); }
  #kc .lg-row, #kc .lg-inds { max-width: 100%; min-width: 0; overflow: hidden; }
  #kc .lg-vals { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 400px) { .scn-list .p-head { flex-wrap: wrap !important; } }

/* 투자 책임 첫 방문 고지 · 이용 안내 창 */
.legal-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 9998; width: min(560px, calc(100vw - 24px)); display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; background: var(--win-2); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.45); font-size: 13px; line-height: 1.5; color: var(--text-2); }
.legal-bar span { flex: 1; min-width: 0; }
.legal-bar a { color: var(--brand-2); }
.legal-bar .btn { flex: none; }
@media (max-width: 640px) { .legal-bar { bottom: calc(56px + 10px + env(safe-area-inset-bottom)); font-size: 12.5px; } }
#legalOv .lg-k { color: var(--text); font-weight: 700; margin-right: 6px; }
#legalOv p { line-height: 1.7; }
/* 레이더 머리줄 (모든 폭): 거래소 선택이 'Ε' 한 글자로 눌리던 것 → 첫 줄 제목·거래소·새로고침, 둘째 줄 100·200·전체 */
.scn-list .p-head { flex-wrap: wrap !important; row-gap: 8px; }
.scn-list .p-head .kd-btn { flex: 0 0 auto; min-width: 104px; }
.scn-list .p-head .tool { flex: 0 0 auto; }
.scn-list .p-head #uniSeg { order: 9; flex: 1 1 100%; display: flex; }
.scn-list .p-head #uniSeg > * { flex: 1 1 0; }

/* 근거 카드 (10/28): 숫자 칸을 없애고 문단으로. 문단 사이를 띄우고 가격만 굵게 */
.evi-say { display: grid; gap: 10px; max-width: 68ch; }
.evi-say p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--text); word-break: keep-all; overflow-wrap: anywhere; }
.evi-say p:last-child { color: var(--text); }
.evi-say .evi-px { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); margin-right: .25em; }
.evi { gap: 14px; }
.evi-leg { padding-top: 12px; border-top: 1px solid var(--line); }
.evi-say p.plan { padding: 10px 12px; border-left: 3px solid #f0a030; background: rgba(240,160,48,.07); border-radius: 0 6px 6px 0; }

/* ===== 10/28 AI 검수 반영 ===== */
/* 가로 폰 · 낮은 화면: 오른쪽 아이콘 줄 높이만큼 전체가 늘어나 차트 아래 '기간' 줄이 화면 밖으로 나가던 것 */
.shell { grid-template-rows: minmax(0, 1fr); }
.rail { min-height: 0; overflow-y: auto; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
/* 가로로 눕힌 폰(낮고 터치): 오른쪽 패널은 접어 두고 차트를 넓게 */
@media (max-height: 500px) and (pointer: coarse) and (min-width: 641px) {
  :root { --topbar-h: 44px; }
  .topbar { height: var(--topbar-h); }
}
/* 가로로 밀리는 탭 줄: 오른쪽 끝을 흐리게 해서 더 있다는 걸 보이게 */
.dock-tabs, .res-sort, .tvi-cats, .scn-tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
/* 641~860px: 로고 글자가 아이콘에 붙어 보이던 것 → 그 폭에선 아이콘만 */
@media (min-width: 641px) and (max-width: 860px) { .logo .wm { display: none; } }
/* 관심 목록 24시간 칸: +124.60% · +0.00%p 가 칸을 넘던 것 */
.panel[data-p="watch"] .wl-row .chg, .panel[data-p="watch"] .wl-cols > :nth-child(3) { white-space: nowrap; }
@media (hover: none) { .panel[data-p="watch"] .wl-cols, .panel[data-p="watch"] .wl-row { grid-template-columns: minmax(0, 1fr) 72px minmax(54px, max-content) 0; } }
/* 한국어가 '습니/다' 처럼 끊기던 곳 */
.legal-bar span, .cd-grid, .cd-cell, .calc-hint, .scn-res .dim, .res-note, .help-b p { word-break: keep-all; overflow-wrap: anywhere; }
/* 투자 고지 줄은 창(모달) 아래로 — 어두운 막 위에 밝게 떠 있던 것 */
.legal-bar { z-index: 70; }
/* 명령창 입력: 좁은 폰에서 '결과 N개' 가 안내 글을 가리던 것 */
@media (max-width: 420px) { .ck-cnt { display: none; } }

/* ===== 10/28 AI 검수 2차 (작은 폰 300~375) ===== */
/* 차트 머리줄 종목 이름: 말줄임 없이 'BT' 처럼 잘리던 것 */
@media (max-width: 640px) {
  #chartWin .chart-head #symBtn { min-width: 64px; }
  #chartWin .chart-head #symBtn > div { flex: 1 1 auto; min-width: 0; }
  #chartWin .chart-head #symBtn b { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 360px) { .chart-head #undoBtn, .chart-head #redoBtn { display: none !important; } }
/* 경제 일정 알약: 그리기 단추 밑으로 파고들던 것 */
.em-layer .em-next { max-width: calc(100% - 124px); overflow: hidden; text-overflow: ellipsis; }
/* 투자 고지 줄: 휴대폰은 짧은 글 한 줄 */
.legal-bar .lb-short { display: none; }
@media (max-width: 640px) { .legal-bar .lb-long { display: none; } .legal-bar .lb-short { display: inline; } .legal-bar { padding: 8px 8px 8px 12px; } }
/* 더보기 시트: 아래 메뉴를 덮고 '이용 안내' 줄이 화면 밖으로 가던 것 */
@media (max-width: 479px) {
  .pop.sheet.m-more-pop { bottom: calc(56px + env(safe-area-inset-bottom)) !important; max-height: calc(100dvh - 50px - 56px - 24px) !important; border-radius: 12px; }
}
@media (max-width: 340px) { .pop.m-more-pop button { min-height: 40px; } }
/* 24시간 칸: +110.92% · -0.03%p 가 칸을 넘던 것 */
.wl-cols, .wl-row { grid-template-columns: minmax(0, 1fr) auto minmax(60px, max-content); }
.panel[data-p="watch"] .wl-cols, .panel[data-p="watch"] .wl-row { grid-template-columns: minmax(0, 1fr) auto minmax(54px, max-content) 12px; }
@media (hover: none) { .panel[data-p="watch"] .wl-cols, .panel[data-p="watch"] .wl-row { grid-template-columns: minmax(0, 1fr) auto minmax(54px, max-content) 0; } }
/* 보기 설정 창: 아래 메뉴를 덮던 것 */
@media (max-width: 440px) { .vw-pop { max-height: calc(100dvh - 130px) !important; } }
/* 지표 창 분류 탭: 더 있다는 걸 오른쪽 흐림으로 */
.tvi-tabs, .tvi-nav { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
@media (min-width: 561px) { .tvi-nav { -webkit-mask-image: none; mask-image: none; } }
/* 포지션 계산기: 이름이 두 줄이 되면 칸 높이가 어긋나던 것 */
.calc-row, .calc .row { align-items: end; }
/* 고래 포지션 이름 줄바꿈 */
.fd-kv > span { white-space: nowrap; }
/* 한 글자만 다음 줄로 떨어지던 곳 */
.empty, .res-note, #resHead .dim, .al-empty, .note { word-break: keep-all; text-wrap: pretty; }
/* ===== 10/28 코드 검수 반영 ===== */
/* 아이폰 홈 막대: 아래 메뉴 글자가 가려지던 것 (viewport-fit=cover) */
@media (max-width: 640px) {
  .mbar { height: calc(56px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }
  .shell { height: calc(100% - var(--topbar-h) - 56px - env(safe-area-inset-bottom)); }
  .shell.m-side .side { bottom: calc(56px + env(safe-area-inset-bottom)); }
}
/* 새 버전 알림 줄: 좁은 폰에서 양옆으로 넘치던 것, 투자 고지 줄과 겹치지 않게 위로 */
.upd-bar { max-width: calc(100vw - 24px); white-space: normal; }
@media (max-width: 640px) { .upd-bar { bottom: calc(56px + 64px + env(safe-area-inset-bottom)); } }
/* 범례가 가격 축 밑으로 파고들던 것 (축이 72px 까지 넓어진다) */
@media (max-width: 640px) { #kc .lg { max-width: calc(100% - 80px); } }
/* 오른쪽 클릭 메뉴 · 띄움 창: 최소 폭이 화면보다 넓던 것 */
.pop .cu-cm { min-width: min(300px, calc(100vw - 16px)); }
.pop, .pop.fly, .ly-pop, .tree { max-width: calc(100vw - 16px); }
/* 차트 설정 창: 300px 이하에서 옆으로 넘치던 것 */
@media (max-width: 560px) {
  .cs-modal .cs-dd { min-width: 0 !important; }
  .cs-modal .cs-row { flex-wrap: wrap; }
  .cs-modal .cs-row:not(.cs-chk) > .cs-lab { width: 100% !important; }
}
/* 글자 키운 폰: 고정 높이에서 글자가 잘리던 것 */
@media (max-width: 640px) { .chart-foot { min-height: 34px; height: auto; } .mbar a { overflow: hidden; } }
/* ===== 10/28 2차 재검수 반영 ===== */
/* 투자 고지: 320 이하 · 가로 폰에서도 한 줄 */
@media (max-width: 360px) { .legal-bar { font-size: 12px; gap: 8px; } }
@media (max-height: 500px) and (pointer: coarse) { .legal-bar .lb-long { display: none; } .legal-bar .lb-short { display: inline; } .legal-bar { bottom: 8px; width: min(520px, calc(100vw - 120px)); } }
/* 종목 검색 결과: 320 에서 이름 칸이 'BT…' 로 눌리던 것 */
@media (max-width: 360px) { #searchOv .s-row { grid-template-columns: minmax(110px, 1fr) 84px 64px 26px; gap: 4px; padding: 0 10px; } }
/* 레이더 근거를 연 차트에선 경제 일정 알약을 숨긴다 (가격 이름표 · 구간 위에 겹치던 것) */
.chart-win:has(#eviBar) .em-next, #chartWin:has(.evi-card) .em-next { display: none; }

/* 투자 고지: 띄우는 줄 대신 레이더 조건 목록 맨 아래 작은 글씨 (대표 10/28) */
.legal-line { margin: 0; padding: 12px 14px 16px; font-size: 11.5px; line-height: 1.6; color: var(--text-3); word-break: keep-all; }
.legal-line a { color: var(--text-2); text-decoration: underline; }

/* 근거 설명 줄바꿈 (대표 10/28): 폭을 68자로 묶어 '보았습니다.' 만 혼자 떨어지던 것.
   PC 는 문장 하나가 한 줄에 들어가게 넓히고, 남는 줄바꿈은 고아 단어 없이 */
.evi-say { max-width: min(100%, 980px); gap: 12px; }
.evi-say p { text-wrap: pretty; line-height: 1.8; }
.evi-say .nw { white-space: nowrap; }
.evi-say p.plan { padding: 12px 16px; line-height: 1.85; }
@media (max-width: 640px) { .evi-say p { line-height: 1.75; } }

/* ===== 지표 고르기 창 개편 (10/28): 왼쪽 묶음 · 한 줄 목록(굵은 줄임말 + 한국어 이름) · 오른쪽 미리보기 (js/chartview.js openIndicators) ===== */
#indOv .modal.tvi-modal { width: min(1080px, calc(100vw - 32px)); height: min(680px, 84vh); }
.tvi-body { grid-template-columns: 200px minmax(0, 1fr) 312px; }
@media (min-width: 561px) {
  .tvi-nav { padding: 2px 8px 12px 12px; }
  .tvi-nav .grp { padding: 14px 10px 4px; font-size: 11.5px; }
  .tvi-nav .grp:first-child { padding-top: 6px; }
  .tvi-nav button { padding: 7px 10px; font-size: 14px; }
}
.tvi-list .tvi-h { padding: 8px 16px 6px; font-size: 12px; }
.tvi-list .tvi-h small { margin-left: 4px; color: var(--text-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.tvi-row { gap: 6px; min-height: 36px; padding: 0 10px 0 8px; }
.tvi-row .tvi-star { order: 0; width: 24px; height: 24px; visibility: hidden; }
.tvi-row .tvi-star svg { width: 15px; height: 15px; }
.tvi-row .tvi-star.on { visibility: visible; }
.tvi-nm { display: flex; align-items: baseline; gap: 8px; flex: 0 1 auto; }
.tvi-ab { font-weight: 600; color: var(--text); flex: none; white-space: nowrap; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.tvi-ko { color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tvi-nm .tvi-ko:first-child { color: var(--text); }
.tvi-row:hover .tvi-ko, .tvi-list.kb .tvi-row.act .tvi-ko { color: var(--text); }
.tvi-row .tvi-add { visibility: hidden; color: var(--text-2); width: 22px; height: 22px; font-size: 17px; }
.tvi-row:hover .tvi-add { visibility: visible; }
.tvi-list.kb .tvi-row.act { box-shadow: inset 2px 0 0 var(--brand-2); }
/* 미리보기 */
.tvi-pv { border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; padding: 14px 16px 14px; gap: 12px; }
.tvi-pv-cv { position: relative; flex: none; height: 168px; border: 1px solid var(--line); border-radius: 8px; background: var(--win-2); overflow: hidden; }
.tvi-pv-cv canvas { display: block; width: 100%; height: 100%; }
.tvi-pv-ph { position: absolute; left: 16px; right: 16px; top: 50%; transform: translateY(-50%); padding: 6px 8px; border-radius: 6px; background: color-mix(in srgb, var(--win) 82%, transparent); color: var(--text-3); font-size: 12px; line-height: 1.5; text-align: center; word-break: keep-all; }
.tvi-pv-ph[hidden] { display: none; }
.tvi-pv-b { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; }
.tvi-pv-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 16px; line-height: 1.35; color: var(--text); }
.tvi-pv-t b { font-weight: 700; }
.tvi-pv-t span { font-weight: 500; color: var(--text-2); word-break: keep-all; }
.tvi-pv-t span:first-child { color: var(--text); font-weight: 600; }
.tvi-pv-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tvi-pv-tags span { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 8px; border-radius: 11px; background: var(--hover); border: 1px solid var(--line); color: var(--text-2); font-size: 12px; }
.tvi-pv-tags span.lk { color: var(--warn); }
.tvi-pv-tags .ico { width: 11px; height: 11px; }
.tvi-pv-d { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.65; word-break: keep-all; text-wrap: pretty; }
.tvi-pv-n { margin: 0; padding: 8px 10px; border-radius: 6px; background: var(--hover); color: var(--text-3); font-size: 12px; line-height: 1.6; word-break: keep-all; }
.tvi-pv-f { flex: none; display: flex; align-items: center; gap: 10px; }
.tvi-pv-f .tvi-pv-add { height: 36px; padding: 0 18px; display: inline-flex; align-items: center; gap: 6px; }
.tvi-pv-on { color: var(--text-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tvi-pv-empty { margin: auto 0; padding: 24px 8px; text-align: center; color: var(--text-3); font-size: 13px; line-height: 1.6; word-break: keep-all; }
@media (max-width: 900px) { .tvi-body { grid-template-columns: 184px minmax(0, 1fr) 260px; } }
@media (max-width: 640px) {
  .tvi-pv { display: none; }
  .tvi-body { grid-template-columns: 184px minmax(0, 1fr); }
  .tvi-ab { max-width: 120px; }
}
@media (max-width: 560px) { .tvi-body { grid-template-columns: 1fr; } }
@media (hover: none) { .tvi-row .tvi-star { visibility: visible; } .tvi-row .tvi-add { visibility: visible; } }

/* QA 1회차 디자인 (10/28 밤): 한글 단어가 중간에서 끊기지 않게 · 잠금 해제 창 정리 */
.card .about p, .card .about details p, .res-about p { word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty; }
.lock-box div { min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.lock-box span { text-wrap: pretty; }
.lock-box .btn { flex: none; white-space: nowrap; }
.ul-why { background: var(--hover); border: 1px solid var(--line-2); text-align: center; word-break: keep-all; }
.ul-term { align-items: flex-start; }
.ul-term .ico { margin-top: 3px; }
.ul-term span, .ul-scans { text-wrap: balance; word-break: keep-all; }
.ul-warn { color: var(--text-3); word-break: keep-all; }
.ul-body { scroll-padding-top: 26px; }
#legalOv .modal-b p { word-break: keep-all; overflow-wrap: anywhere; }
.card .about .sk text { font-size: 11px; }
.tfc.lk.on i svg { fill: none; stroke: currentColor; }
/* 커뮤니티 목록: 설명 줄이 없는 방도 같은 높이로 */
.pop .cm-row { min-height: 40px; }

/* QA 3회차 (10/28 밤) */
/* 한글은 어디서든 단어 중간에서 끊지 않는다 (선택자마다 따로 붙이다 빠지는 곳이 생겨서 전체에) */
body { word-break: keep-all; overflow-wrap: break-word; }
/* 관심 목록: 한글 이름이 있으면 한글을 살리고 영어 기호를 줄인다 */
.wl-row .nm:has(.lbt.ko) b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wl-row .nm .lbt.ko { flex: none; }
/* 휴대폰: 아래 창 단추는 창을 눌렀을 때만 (값을 가리지 않게) */
@media (max-width: 767px) and (pointer: coarse) { .kc[data-panebtn="always"] .pane-ctl:not(.show) { opacity: 0; pointer-events: none; } }
@media (max-width: 380px) { .lg-vals { font-size: 11px; } }
/* 그린 선 설정 창: 탭을 바꿔도 창 높이가 출렁이지 않게 */
.ds-modal .modal-b { min-height: min(440px, 60vh); }
/* 레이더: 주식 포함 켜고 끄기 */
.scn-stk { height: 26px; padding: 0 9px; font-size: 12px; white-space: nowrap; border: 1px solid var(--line-2, var(--line)); border-radius: 6px; color: var(--text-2); flex: none; }
.scn-stk.on { color: var(--text); border-color: var(--brand-2); background: color-mix(in srgb, var(--brand-2) 14%, transparent); }
/* 넓은 화면(1600 아래)에서 워크스페이스 탭이 잘리지 않게 검색 단추를 줄인다 (QA 5회차) */
@media (min-width: 901px) and (max-width: 1600px) {
  .topbar .search { flex: 0 1 148px; min-width: 116px; }
  .topbar .search .s-long { display: none; }
}
/* 그래도 넘치면 오른쪽 끝을 흐리게 (옆으로 더 있다는 표시) */
.ws-tabs.ovf { mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }

/* QA 7회차 (10/28 밤) */
[hidden] { display: none !important; }
/* 901~1200: 검색은 글자 있는 작은 단추로 */
@media (min-width: 901px) and (max-width: 1200px) { .topbar > .search { flex: 0 0 34px; min-width: 0; width: 34px; padding: 0; justify-content: center; } .topbar > .search > span, .topbar > .search kbd { display: none; } }
/* 레이더 카드 설명: 잘라 내지 말고 두 줄까지 */
.card-h .brief { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all; }
:root[data-fsz="lg"] .card-h .brief { font-size: 13px; } :root[data-fsz="lg"] .card-h .ch-n b { font-size: 15px; }
/* 위쪽 막대도 키보드 초점 표시를 다른 곳과 같게 */
.topbar :is(a, button, [role="button"]):focus-visible { outline: 2px solid var(--brand-2); outline-offset: -2px; border-radius: 6px; }
.topbar .btn.primary:focus-visible { outline-offset: 2px; }
/* 종목 목록: 숫자 열 너비를 줄마다 다시 재지 않고 고정 (가격 오른쪽 끝이 줄마다 어긋나던 것) */
.panel[data-p="watch"] .wl-cols, .panel[data-p="watch"] .wl-row { grid-template-columns: minmax(0, 1fr) 84px 64px 12px; }
@media (hover: none) { .panel[data-p="watch"] .wl-cols, .panel[data-p="watch"] .wl-row { grid-template-columns: minmax(0, 1fr) 76px 60px 0; } }
/* 휴대폰 421~640: 로고 그림과 글자 사이 */
@media (min-width: 421px) and (max-width: 640px) { .logo { gap: 7px; } }
@media (max-width: 1180px) { .ws-tab:not(.on) .ws-n { max-width: 80px; } }
/* 태블릿: 오른쪽 패널을 줄여 차트 자리를 남긴다 */
@media (min-width: 641px) and (max-width: 900px) { .side { width: 280px !important; flex-basis: 280px !important; } }
/* 불러오는 중 표시: 테마 색을 따른다 */
#kcLoading:not(.err)::before { border-color: var(--line-2); border-top-color: var(--brand-2); }
:root[data-theme="light"] #kcLoading:not(.err)::before { border-color: var(--line-2); border-top-color: var(--brand-2); }
.tvi-pv-b { scrollbar-color: var(--line-2) transparent; }
/* 지표 창: 화면 밖 줄은 그리지 않는다 (처음 열 때 레이아웃 27→9ms, QA 8회차) */
.tvi-row { content-visibility: auto; contain-intrinsic-size: auto 36px; }
@media (min-width: 901px) and (max-width: 1100px) { .ws-tab:not(.on) .ws-n { max-width: 64px; } }

/* ---- 오른쪽 레일: 아이콘 아래 이름 (대표 10/28) ---- */
:root { --rail-w: 54px; }
.rail { gap: 2px; }
.rail button { width: 48px; height: auto; min-height: 44px; padding: 5px 0 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: none; }
.rail button .rl-t { font-size: 10.5px; line-height: 1.1; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; color: inherit; }
.rail button.on .rl-t { font-weight: 700; }
.rail .rail-sep { margin: 4px auto; }

/* ---- 지표 창 (js/indpanel.js) ---- */
.panel[data-p="ind"] .p-head .ip-n, .panel[data-p="short"] .p-head .sc-n { min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--brand-bg); color: var(--brand-2); font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.ip-seg { display: flex; gap: 6px; padding: 0 12px 8px; border-bottom: 1px solid var(--line); }
.ip-seg button { height: 28px; padding: 0 11px; border-radius: 14px; border: 1px solid var(--line-2); color: var(--text-2); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ip-seg button.on { border-color: var(--brand-2); color: var(--brand-2); background: var(--brand-bg); }
.ip-body { padding: 0; }
.ip-card { padding: 12px 12px 10px; border-bottom: 1px solid var(--line); }
.ip-card:not(.is-on) .ip-mk, .ip-card:not(.is-on) .ip-tt p { opacity: .7; }
.ip-top { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.ip-mk { width: 36px; height: 36px; border-radius: 9px; background: var(--win-2); border: 1px solid var(--line); display: grid; place-items: center; }
.ip-mk svg { width: 22px; height: 22px; }
.ip-tt { min-width: 0; }
.ip-tt b { font-size: 14px; font-weight: 700; color: var(--text); }
.ip-tt .lock-tag { margin-left: 6px; vertical-align: 1px; }
.ip-tt p { margin: 3px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-3); word-break: keep-all; }
.ip-ctl { display: flex; align-items: center; gap: 2px; }
.ip-ic { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; color: var(--text-3); }
.ip-ic:hover { background: var(--hover); color: var(--text); }
.ip-ic .ico { width: 16px; height: 16px; }
.ip-sw { position: relative; width: 36px; height: 20px; margin-left: 4px; border-radius: 10px; background: var(--line-2); transition: background .15s; flex: none; }
.ip-sw i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s; }
.ip-sw.on { background: var(--brand-2); }
.ip-sw.on i { transform: translateX(16px); }
.ip-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0 46px; }
.ip-tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 5px; background: var(--win-2); color: var(--text-2); font-size: 11.5px; }
.ip-tag .ico { width: 12px; height: 12px; }
.ip-tag.dim { color: var(--text-3); }
.ip-warn { display: flex; align-items: center; gap: 8px; margin: 8px 0 0 46px; padding: 7px 8px 7px 10px; border-radius: 7px; background: rgba(240, 185, 11, .09); color: var(--text-2); font-size: 12px; line-height: 1.4; word-break: keep-all; }
.ip-warn span { flex: 1; }
.ip-warn .btn { flex: none; }
.ip-cnt { margin: 10px 0 4px 46px; font-size: 12px; color: var(--text-3); }
.ip-cnt b { color: var(--text); font-variant-numeric: tabular-nums; }
.ip-sigs { margin-left: 46px; border-top: 1px solid var(--line); }
.ip-sig { width: 100%; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 8px; align-items: center; height: 30px; padding: 0 4px; border-bottom: 1px solid var(--line); text-align: left; font-size: 12.5px; color: var(--text); }
.ip-sig:hover { background: var(--hover); }
.ip-sig .ip-dot { width: 8px; height: 8px; border-radius: 50%; }
.ip-sig span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.ip-sig em { font-style: normal; font-weight: 400; color: var(--text-3); font-variant-numeric: tabular-nums; margin-left: 4px; }
.ip-sig time { color: var(--text-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.ip-more { margin: 4px 0 0 46px; height: 26px; padding: 0 4px; color: var(--brand-2); font-size: 12px; font-weight: 600; }
.ip-foot { padding: 12px; font-size: 11.5px; color: var(--text-3); line-height: 1.5; word-break: keep-all; }

/* ---- 숏 알람 창 (js/shortc.js) ---- */
#rail button.has-new { position: relative; }
#rail button.has-new::after { content: ''; position: absolute; top: 5px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--down); box-shadow: 0 0 0 2px var(--tv-panel, var(--win)); }
.panel[data-p="short"] .p-head .sc-n { margin-left: 6px; background: rgba(242, 54, 69, .14); color: var(--down); }
.sc-alarm { gap: 5px; color: var(--text-3); }
.sc-alarm .ico { width: 14px; height: 14px; }
.sc-alarm.on { color: var(--down); }
.sc-body { padding: 0 12px 12px; }
.sc-tp { padding: 2px 0 10px; font-size: 12.5px; color: var(--text-2); border-bottom: 1px solid var(--line); }
.sc-none { padding: 14px 0; font-size: 12.5px; color: var(--text-3); }
.sc-coins { display: grid; gap: 6px; padding: 10px 0 4px; }
.sc-coin { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-items: baseline; padding: 9px 11px; border-radius: 9px; border: 1px solid rgba(242, 54, 69, .28); background: rgba(242, 54, 69, .06); text-align: left; }
.sc-coin:hover { background: rgba(242, 54, 69, .11); }
.sc-coin b { font-size: 14px; font-weight: 700; color: var(--text); }
.sc-coin .num { font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }
.sc-coin > .num:nth-of-type(1) { color: var(--text); font-size: 13px; }
.sc-h { display: flex; align-items: baseline; justify-content: space-between; margin: 18px 0 6px; }
.sc-h b { font-size: 13.5px; }
.sc-h span { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.sc-log { border-top: 1px solid var(--line); }
.sc-row { width: 100%; display: grid; grid-template-columns: 74px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; height: 34px; border-bottom: 1px solid var(--line); text-align: left; font-size: 12.5px; }
.sc-row:hover { background: var(--hover); }
.sc-row time { color: var(--text-3); font-variant-numeric: tabular-nums; font-size: 11.5px; }
.sc-row b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-row .num { color: var(--text-2); font-variant-numeric: tabular-nums; }
.sc-r { padding: 2px 7px; border-radius: 10px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.sc-r.win { background: var(--up); color: #fff; }
.sc-r.loss { background: rgba(242, 54, 69, .15); color: var(--down); }
.sc-r.live { background: #f0b90b; color: #2a1f00; }
.sc-more { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.sc-foot { margin-top: 10px; font-size: 11px; color: var(--text-3); }

/* ---- 차트 아래 칸 접기 → 오른쪽 창으로 (대표 10/28) ---- */
#dock { display: none !important; }
.tr-scroll { display: flex; flex-direction: column; }
/* 자산 카드 */
.eq-card { margin: 0 12px 4px; padding: 12px 12px 10px; border-radius: 12px; border: 1px solid var(--line-2); background: linear-gradient(180deg, var(--win-2), transparent); display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 4px 10px; }
.eq-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.eq-k { font-size: 12px; color: var(--text-3); display: inline-flex; align-items: center; gap: 6px; }
.eq-k .demo { font-style: normal; }
.eq-v { font-size: 21px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.eq-v small { font-size: 12px; font-weight: 500; color: var(--text-3); }
.eq-d { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.eq-d em { font-style: normal; font-weight: 400; color: var(--text-3); margin-left: 2px; }
.eq-sp { width: 96px; height: 40px; align-self: center; }
.eq-cells { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.eq-cells div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.eq-cells span { font-size: 11px; color: var(--text-3); }
.eq-cells b { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 포지션 · 주문 · 기록 · 분석 */
.tr-side { border-top: 1px solid var(--line); margin-top: 4px; }
.ps-tabs { position: sticky; top: 0; z-index: 2; display: flex; gap: 2px; padding: 8px 12px; background: var(--tv-panel, var(--win)); border-bottom: 1px solid var(--line); }
.ps-tabs button { flex: 1; height: 30px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.ps-tabs button.on { background: var(--win-2); color: var(--text); }
.ps-tabs button i { font-style: normal; margin-left: 2px; padding: 0 5px; border-radius: 8px; background: var(--brand-bg); color: var(--brand-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.ps-body { padding: 8px 12px 4px; display: grid; gap: 8px; }
.ps-body .empty { padding: 18px 4px; }
.ps-card { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--win-2); cursor: pointer; }
.ps-h { display: flex; align-items: center; gap: 5px; }
.ps-h b { font-size: 13.5px; }
.ps-pl { display: flex; flex-direction: column; align-items: flex-end; font-weight: 700; font-size: 13.5px; line-height: 1.15; }
.ps-pl small { font-size: 11.5px; font-weight: 600; }
.ps-kv { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 4px 8px; margin-top: 8px; font-size: 12px; }
.ps-kv span { color: var(--text-3); }
.ps-kv b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.ps-kv b.liq { color: #f0a030; }
.ps-f { display: flex; gap: 6px; margin-top: 10px; }
.ps-f .btn { flex: 1; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: 13px; cursor: pointer; }
.ps-row > div { min-width: 0; }
.ps-row small { display: block; margin-top: 2px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-body .asset { padding: 0; }
.ps-body .asset .as-top, .ps-body .asset .as-mid { flex-direction: column; align-items: stretch; }
.ps-body .asset .as-cells { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ps-note { padding: 8px 12px 14px; font-size: 11px; color: var(--text-3); line-height: 1.5; word-break: keep-all; }
/* 포착 기록 (코바 레이더 창 아래) */
.hits-box { border-top: 1px solid var(--line); flex: none; max-height: 45%; display: flex; flex-direction: column; }
.hits-box summary { padding: 10px 12px; font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; display: flex; gap: 6px; align-items: center; }
.hits-box summary::-webkit-details-marker { display: none; }
.hits-box summary::after { content: ''; margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: rotate(-135deg); }
.hits-box:not([open]) summary::after { transform: rotate(45deg); }
.hits-side { overflow: auto; }
.hs-row { width: 100%; display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 12px; border-top: 1px solid var(--line); text-align: left; font-size: 12.5px; }
.hs-row:hover { background: var(--hover); }
.hs-t { color: var(--text-3); font-size: 11.5px; }
.hs-m { display: flex; flex-direction: column; min-width: 0; }
.hs-m small { color: var(--text-3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- 포지션 계산기 (js/calc.js) ---- */
#calcSide { overflow: auto; }
.cc { padding: 0 12px; display: grid; gap: 10px; }
.cc-sym { display: flex; align-items: center; gap: 8px; padding: 2px 0 2px; }
.cc-sym b { font-size: 14px; }
.cc-sym .num { color: var(--text-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.cc-sym .btn { margin-left: auto; }
.cc-sec { display: grid; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--win-2); }
.cc-f { display: grid; gap: 5px; }
.cc-f > span { font-size: 12px; color: var(--text-2); font-weight: 600; display: flex; gap: 6px; align-items: baseline; }
.cc-f em { font-style: normal; font-weight: 400; color: var(--text-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.cc-in { display: flex; align-items: center; height: 36px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--win); padding: 0 10px; }
.cc-in:focus-within { border-color: var(--brand-2); }
.cc-in input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; outline: none; }
.cc-in i { font-style: normal; font-size: 12px; color: var(--text-3); }
.cc-chips { display: flex; gap: 4px; margin-top: -2px; }
.cc-chips button { flex: 1; height: 26px; border-radius: 6px; border: 1px solid var(--line); font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cc-chips button.on { border-color: var(--brand-2); color: var(--brand-2); background: var(--brand-bg); font-weight: 700; }
.cc-out { padding: 12px; display: grid; gap: 10px; }
.cc-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-radius: 12px; overflow: hidden; background: var(--line); }
.cc-hero > div { background: var(--win-2); padding: 10px 12px; display: grid; gap: 3px; }
.cc-hero span { font-size: 11.5px; color: var(--text-3); }
.cc-hero b { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-hero b small { font-size: 11.5px; font-weight: 500; color: var(--text-3); }
.cc-hero.empty b { color: var(--text-3); }
.cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 0 2px; }
.cc-grid div { display: flex; justify-content: space-between; gap: 6px; font-size: 12.5px; }
.cc-grid span { color: var(--text-3); }
.cc-grid b { font-weight: 600; font-variant-numeric: tabular-nums; }
.cc-rr { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; }
.cc-rr .l { background: var(--down); }
.cc-rr .w { background: var(--up); }
.cc-rrl { display: flex; justify-content: space-between; font-size: 11.5px; margin-top: -4px; font-variant-numeric: tabular-nums; }
.cc-warn { padding: 8px 10px; border-radius: 8px; background: rgba(242, 54, 69, .1); color: var(--down); font-size: 12px; }
.cc-send { width: 100%; justify-content: center; height: 36px; }
.cc-hint { font-size: 12.5px; color: var(--text-3); text-align: center; padding: 4px 0; }
.cc-note { font-size: 11px; color: var(--text-3); line-height: 1.5; word-break: keep-all; }

/* ---- 휴대폰 확대 막기 (대표 10/28: 화면이 확대돼 오류처럼 보인다) ----
   ① 두 번 톡 확대 끔 ② 차트 위 두 손가락은 페이지 대신 차트가 받는다 ③ iOS 는 16px 보다 작은 입력칸을 누르면 화면을 키운다 → 휴대폰에서 입력칸 16px */
html, body { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
#kc, #kc canvas, #view-chart canvas, #view-scanner canvas, .lay-cell canvas { touch-action: none; }
@media (max-width: 900px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, [contenteditable="true"] { font-size: 16px !important; }
}

/* 위쪽 '코바 기법 무료로 열기' (js/auth.js paintBtn) */
.unl-cta { height: 32px; padding: 0 12px; gap: 6px; border-radius: 16px; border: 1px solid rgba(34, 197, 94, .45); background: rgba(34, 197, 94, .1); color: var(--text); font-size: 13px; white-space: nowrap; }
.unl-cta .ico { width: 15px; height: 15px; color: #22c55e; }
.unl-cta b { color: #22c55e; font-weight: 700; }
.unl-cta:hover { background: rgba(34, 197, 94, .18); }
.unl-cta[hidden] { display: none !important; }
@media (max-width: 1100px) { .unl-cta .lbl { font-size: 0; } .unl-cta .lbl b { font-size: 13px; } }
@media (max-width: 640px) { .unl-cta { height: 30px; padding: 0 9px; } }
/* 휴대폰: '무료로 열기'가 있으면 검색은 아이콘만 (검색창이 '검'만 남던 것) */
@media (max-width: 640px) {
  .topbar:has(#unlCta:not([hidden])) #openSearch { width: 36px; min-width: 36px; flex: none; padding: 0; justify-content: center; }
  .topbar:has(#unlCta:not([hidden])) #openSearch > span, .topbar:has(#unlCta:not([hidden])) #openSearch kbd { display: none; }
}
.ip-lock { margin: 10px 12px 4px; padding: 12px; border-radius: 12px; border: 1px solid rgba(34, 197, 94, .4); background: rgba(34, 197, 94, .07); display: grid; gap: 5px; }
.ip-lock b { font-size: 13.5px; }
.ip-lock span { font-size: 12px; color: var(--text-2); line-height: 1.5; word-break: keep-all; }
.ip-lock div { display: flex; gap: 6px; margin-top: 4px; }

#uniSeg .uni-l { align-self: center; padding: 0 6px 0 4px; font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
/* 차트 페이지 위쪽 검색이 '검.'으로 잘리던 것 (작업 공간 탭에 자리를 뺏김) */
@media (min-width: 641px) { #openSearch { min-width: 120px; flex-shrink: 0; } }
/* 시세 줄이 화면보다 길면 옆으로 넘겨 보게 + 오른쪽 끝을 흐리게 ('김프'가 말없이 잘리던 것) */
.quote-bar { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.quote-bar::-webkit-scrollbar { display: none; }
@media (max-width: 1280px) { .quote-bar { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); padding-right: 28px; } }
/* 휴대폰 손가락 닿는 크기 (점검: 24~30px 단추) */
@media (max-width: 640px) {
  .scn-list .p-head .tool, #scnRefresh { min-width: 40px; min-height: 40px; }
  .evi-back, #resBack { min-width: 40px; min-height: 40px; }
}
/* 패널이 접혀 있으면 레일 단추를 켜진 것처럼 보이지 않게 (점검: 열린 패널이 없는데 '종목' · '노트'가 켜져 보이던 것) */
.shell.side-off:not(.side-float) > .rail button.on, .shell.side-auto:not(.side-float) > .rail button.on { background: none; color: var(--text-2); }
.shell.side-off:not(.side-float) > .rail button.on .rl-t, .shell.side-auto:not(.side-float) > .rail button.on .rl-t { font-weight: 500; }

.unl-cta { background: #16a34a; border-color: #16a34a; color: #fff; }
.unl-cta .ico, .unl-cta b { color: #fff; }
.unl-cta:hover { background: #15803d; }
.unl-cta .uc-m { display: none; }
@media (max-width: 1100px) { .unl-cta .uc-d { display: none; } }
@media (max-width: 640px) { .unl-cta .lbl { display: none; } .unl-cta .uc-m { display: inline; font-size: 13px; font-weight: 700; } }
/* 작업 공간 탭: '+' 새 탭 단추는 넘쳐도 늘 오른쪽 끝에 보이게 */
#wsTabs .ws-add, #wsTabs #wsAdd { position: sticky; right: 0; z-index: 1; background: var(--tv-panel, var(--win)); box-shadow: -8px 0 8px -4px var(--tv-panel, var(--win)); }
/* 휴대폰: 창이 열려 있으면 알림 토스트가 창의 단추를 가리지 않게 (점검: 다음 알림의 '추가'가 눌리지 않던 것) */
@media (max-width: 640px) { body:has(.overlay.on) .toast-wrap .toast { pointer-events: none; opacity: .9; } }
/* 휴대폰 레이더 근거 화면: 아이콘만 있던 단추에 짧은 이름 (점검: 무슨 단추인지 모른다) */
@media (max-width: 640px) {
  .scn-chart #eyeBtn span, #eyeBtn span { display: inline; font-size: 12px; }
  #scnOpen { width: auto !important; padding: 0 10px !important; gap: 5px; }
  #scnOpen .so-t { display: inline; font-size: 12px; }
}

/* ---- 10/29 디자인 비평 반영 ---- */
/* 1) 위쪽 '무료로 열기': 더 진한 초록 (흰 글씨 대비 5:1) */
.unl-cta { background: #15803d; border-color: #15803d; }
.unl-cta:hover { background: #166534; }
/* 3) 자산 카드: 그라데이션 없이 · 기록이 적으면 그래프 숨김 */
.eq-card { background: var(--win-2); grid-template-columns: minmax(0, 1fr) auto; }
.eq-sp.off { display: none; }
.eq-d { margin-top: 4px; }
.eq-cells { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 5) 포지션 카드 머리: 손익은 한 줄 오른쪽 */
.ps-pl { white-space: nowrap; }
@media (max-width: 640px) { .toast-wrap { bottom: calc(56px + 16px + env(safe-area-inset-bottom)); } }
/* 7) 숏 알람 배지 대비 (수익은 꽉 찬 스타일 유지 · 진한 초록) */
.sc-r.win { background: #15803d; color: #fff; }
.sc-r.loss { background: rgba(229, 72, 77, .14); color: #e5484d; }
.sc-r.live { background: rgba(240, 185, 11, .16); color: #d4a106; }
/* 9) 밝은 테마 레일은 회색 · 켜진 이름 대비 */
:root[data-theme="light"] .rail button { color: var(--text-2); }
.rail button.on .rl-t { color: #7b93ff; }
:root[data-theme="light"] .rail button.on .rl-t { color: var(--brand-2); }
/* 10) 지표 창 위 칩 간격 */
.ip-seg { padding-top: 6px; }
/* 11) 잠긴 스위치 */
.ip-sw.lk { opacity: .45; }
/* 2) 밝은 테마 초록 글자 대비 */
:root[data-theme="light"] .up-c.coba b, :root[data-theme="light"] .up-c.coba .up-cn, :root[data-theme="light"] .up-hero h3 em, :root[data-theme="light"] .rl-real .why .rl-open { color: #15803d; }
:root[data-theme="light"] .ps-kv b.liq { color: #b45309; }
/* 밝은 테마 글자 대비 (10/29 회귀 점검) */
:root[data-theme="light"] .sc-r.live { background: rgba(180, 130, 0, .14); color: #7a5a00; }
:root[data-theme="light"] .logo .wm small { color: #6b7280; }
:root[data-theme="light"] .ws-x { color: #6b7280; }
:root[data-theme="light"] .res-row .new { color: #047857; }
:root[data-theme="light"] .ps-h .tag.up { color: #047857; }
:root[data-theme="light"] .ps-h .tag.down { color: #b91c1c; }

/* 10/29 모바일 점검: 손가락으로 누르기 작은 단추들 (모양은 그대로, 누르는 자리만 넓힌다) */
@media (max-width: 640px) {
  .hbtn { min-height: 36px; min-width: 36px; }
  .lg-tog, .ax-gear { min-width: 32px; min-height: 32px; }
  #rangeDd { min-height: 32px; }
  .pcts button, .ps-tabs button, #otSeg button, .cc-chips button, .scn-tabs button, #alTabs button, #scAlarm { min-height: 36px; }
  #mmBtn, #levBtn, #tpslT { min-height: 32px; display: inline-flex; align-items: center; }
  #wlAdd { min-width: 36px; min-height: 36px; }
  .wl-sec { min-height: 36px; }
  .fd-news > a { padding-top: 6px; padding-bottom: 6px; }
  .fd-tag, .fd-jump { min-height: 34px; }
  .legal-line a, details > summary { display: inline-block; padding: 6px 0; }
  .ip-sw { position: relative; }
  .ip-sw::before { content: ''; position: absolute; inset: -8px -6px; }
}

/* 잠금 해제 창: 비교 카드 아래 '0원으로 구독하기' → 누르면 인증 단계가 펼쳐진다 (10/29) */
.up-sub { display: grid; gap: 8px; justify-items: stretch; margin: 6px 0 4px; }
.up-sub-btn { display: flex; justify-content: center; align-items: center; height: 52px; font-size: 16px; font-weight: 700; border-radius: 12px; }
.up-sub small { text-align: center; font-size: 12px; color: var(--text-3); }
.ul-flow { animation: ulFlowIn .22s ease-out; scroll-margin-top: 12px; }
@keyframes ulFlowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ul-flow { animation: none; } }

/* 로그인 창 QR (PC → 휴대폰 텔레그램) */
.au-qr { display: flex; gap: 14px; align-items: center; margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.au-qr-img { flex: none; width: 112px; height: 112px; background: #fff; border-radius: 8px; padding: 4px; }
.au-qr-img svg { width: 100%; height: 100%; display: block; }
.au-qr span { font-size: 12.5px; line-height: 1.55; color: var(--text-3); }
.au-qr b { display: block; color: var(--text); font-size: 13px; margin-bottom: 2px; }
/* 무료 체험 표시 (지표 창) */
.ip-trial { display: flex; align-items: center; gap: 8px; margin: 10px 12px 4px; padding: 9px 12px; border-radius: 10px; background: rgba(34, 197, 94, .08); border: 1px solid rgba(34, 197, 94, .25); font-size: 13px; color: var(--text-2); }
.ip-trial .ico { width: 15px; height: 15px; color: #22c55e; }
.ip-trial b { color: var(--text); }
.ip-trial .ip-lk { margin-left: auto; background: none; border: 0; color: var(--brand-2); font-size: 12.5px; cursor: pointer; padding: 4px 0; }
.ip-lock.free { border-color: rgba(34, 197, 94, .35); }
.ip-cond { margin-top: 8px; font-size: 12px; color: var(--text-3); }
.ip-cond summary { cursor: pointer; }
.lock-tag.free { color: #22c55e; border-color: rgba(34, 197, 94, .4); background: rgba(34, 197, 94, .08); }

/* 종목 찾기 (10/29): 분류 개수 · 구역 머리글 · 아래 단축키 줄 */
.s-modal .s-pill i { font-style: normal; font-size: 12px; color: var(--text-3); margin-left: 3px; font-variant-numeric: tabular-nums; }
.s-modal .s-pill.on i { color: inherit; opacity: .75; }
.s-sec { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; font-size: 12.5px; color: var(--text-3); position: sticky; top: 0; background: var(--tv-panel, var(--win)); z-index: 1; }
.s-sec b { font-weight: 600; color: var(--text-2); }
.s-sec-x { background: none; border: 0; color: var(--brand-2); font-size: 12px; cursor: pointer; padding: 4px 0; }
.s-risk { font-style: normal; font-size: 10.5px; font-weight: 700; color: #f59e0b; border: 1px solid rgba(245, 158, 11, .5); border-radius: 4px; padding: 0 4px; margin-left: 4px; vertical-align: 1px; }
.s-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px; border-top: 1px solid var(--tv-line, var(--line)); font-size: 12px; color: var(--text-3); flex: none; }
.s-foot kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--line-2); border-radius: 4px; font: inherit; font-size: 11px; color: var(--text-2); margin-right: 3px; }
.s-keys { display: flex; align-items: center; gap: 2px; }
@media (max-width: 640px) { .s-keys { display: none; } .s-foot { justify-content: center; } }
.s-modal .ex-chips { overflow-x: auto; scrollbar-width: none; }

.sc-trial { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; background: rgba(34, 197, 94, .08); border: 1px solid rgba(34, 197, 94, .25); font-size: 13px; color: var(--text-2); }
.sc-trial .ico { width: 15px; height: 15px; color: #22c55e; flex: none; }
.sc-trial b { color: var(--text); }
.sc-trial button { margin-left: auto; background: none; border: 0; color: var(--brand-2); font-size: 12.5px; cursor: pointer; padding: 4px 0; }
.unl-cta.on-trial .ico { display: none; }

/* 잠금 해제 창 비교 카드 2 (10/29 대표 참고 이미지: 그림 + 값 표) */
.up-cmp2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 6px; }
.uc2 { border: 1px solid var(--line-2); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; background: var(--bg-2, rgba(255,255,255,.02)); }
.uc2.coba { border: 1.5px solid rgba(34, 197, 94, .6); background: rgba(34, 197, 94, .04); }
.uc2-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.uc2-h b { font-size: 15px; font-weight: 700; }
.uc2.coba .uc2-h b { color: #22c55e; }
.uc2-tag { font-size: 11px; color: #22c55e; background: rgba(34, 197, 94, .12); border-radius: 10px; padding: 2px 8px; }
.uc2-pic { border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 10; background: #0b0f17; border: 1px solid var(--line); }
.uc2-pic img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
.uc2-pic.tvp { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 16px 18px; background: linear-gradient(160deg, #141826, #0b0d14); }
.uc2-pic.tvp span { font-size: 13px; color: #c9cede; }
.uc2-pic.tvp b { font-size: 28px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.uc2-pic.tvp b small { font-size: 13px; font-weight: 500; color: #9aa3b8; }
.uc2-pic.tvp em { font-style: normal; font-size: 12px; color: #9aa3b8; }
.uc2-pic.tvp i { font-style: normal; font-size: 12.5px; color: #c9cede; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.1); }
.uc2-t { margin: 0; display: grid; }
.uc2-t > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.uc2-t > div:last-child { border-bottom: 0; }
.uc2-t dt { font-size: 12.5px; color: var(--text-3); }
.uc2-t dd { margin: 0; font-size: 14px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.uc2-t dd.ok { color: #22c55e; }
.uc2-t dd.big { font-size: 20px; }
.uc2-src { margin: 0; font-size: 11px; color: var(--text-3); line-height: 1.5; }
.uc2-cond { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 5px; }
.uc2-cond span { font-size: 11.5px; color: var(--text-3); }
.uc2-cond p { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; }
.uc2-cond p svg { width: 14px; height: 14px; flex: none; margin-top: 2px; stroke: #22c55e; fill: none; stroke-width: 2.4; }
@media (max-width: 560px) { .up-cmp2 { grid-template-columns: 1fr; } .uc2.tv .uc2-pic { display: none; } }
/* 계정 확인 화면 머리 (뒤로) */
.ul-top { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding-right: 36px; }
.ul-top h3 { margin: 0; font-size: 17px; }
.ul-back { display: inline-flex; align-items: center; gap: 2px; background: none; border: 1px solid var(--line-2); border-radius: 8px; color: var(--text-2); height: 32px; padding: 0 10px 0 6px; cursor: pointer; font-size: 13px; }
.ul-back .ico { width: 16px; height: 16px; }
.ul-back:hover { color: var(--text); background: var(--hover); }
/* 10/29 대표: 비교 카드 바로 아래 상자가 붙어 보임 → 카드 · 안내 · 구독하기 사이 띄움 */
.ul-body .up-cmp, .ul-body .up-cmp2 { margin-bottom: 16px; }
.ul-body .up-cmp + .ul-now, .ul-body .up-cmp2 + .ul-now { margin-top: 0; }
.ul-body .ul-now { margin-bottom: 16px; }
.ul-body .up-sub { margin-top: 4px; }
.cs-wmtxt { width: 200px; }

/* 다시 불러오기 가림막 (로그인 직후 계정 설정 적용) — 차트가 그려지면 걷힌다 */
#veil { position: fixed; inset: 0; z-index: 10000; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--bg, #0b0e14); color: var(--text-2); font-size: 14px; opacity: 1; transition: opacity .25s ease; }
html.veil #veil { display: flex; }
html.veil-out #veil { display: flex; opacity: 0; pointer-events: none; }
#veil i { width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid rgba(127, 140, 160, .25); border-top-color: var(--brand-2, #5b7cff); animation: veilSpin .8s linear infinite; }
@keyframes veilSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #veil i { animation: none; } #veil { transition: none; } }

/* ===== 파인스크립트 편집기 (js/pineeditor.js) ===== */
.modal.pe-modal { width: min(1180px, calc(100vw - 24px)); height: min(820px, calc(100vh - 24px)); max-height: none; display: flex; flex-direction: column; }
.pe-modal .modal-h { gap: 10px; }
.pe-sub { font-size: 12px; color: var(--text-3); }
.pe-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.pe-side { border-right: 1px solid var(--line); padding: 12px; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.pe-new { width: 100%; height: 34px; justify-content: center; margin-bottom: 6px; }
.pe-h { font-size: 12px; font-weight: 700; color: var(--text-3); margin: 10px 0 4px; display: flex; gap: 6px; align-items: baseline; }
.pe-h small { font-weight: 500; }
.pe-list, .pe-ex { display: grid; gap: 4px; }
.pe-it, .pe-x { display: grid; gap: 2px; text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--text); cursor: pointer; }
.pe-it:hover, .pe-x:hover { background: var(--hover); }
.pe-it.on { border-color: var(--brand-2); background: color-mix(in srgb, var(--brand-2) 10%, transparent); }
.pe-it b, .pe-x b { font-size: 13px; font-weight: 600; }
.pe-it small, .pe-x small { font-size: 11.5px; color: var(--text-3); line-height: 1.4; }
.pe-it i { font-style: normal; } .pe-it i.ok { color: var(--up); } .pe-it i.bad { color: var(--down); }
.pe-none { font-size: 12.5px; color: var(--text-3); margin: 2px 0; }
.pe-main { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(160px, 1fr) auto auto auto; gap: 8px; padding: 12px 14px; overflow: auto; }
.pe-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pe-name { width: min(320px, 100%); height: 34px; font-weight: 600; }
.pe-top kbd { font: inherit; font-size: 10.5px; opacity: .75; border: 1px solid rgba(255,255,255,.35); border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.pe-ed { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--win) 70%, #000); min-height: 0; }
.pe-ln, #peCode { margin: 0; padding: 10px 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 20px; }
.pe-ln { text-align: right; padding-right: 8px; color: var(--text-3); opacity: .7; overflow: hidden; user-select: none; border-right: 1px solid var(--line); }
/* 11/02: 코드 색칠 — 색칠한 글(.pe-hl) 위에 투명 글자 입력칸(#peCode)을 겹친다. 글꼴 · 줄 높이 · 여백이 같아야 커서가 맞는다 */
.pe-code { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.pe-hl, #peCode { position: absolute; inset: 0; margin: 0; padding: 10px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 20px; white-space: pre; tab-size: 4; letter-spacing: 0; }
.pe-hl { color: #d4d7de; overflow: hidden; pointer-events: none; }
#peCode { width: 100%; height: 100%; resize: none; border: 0; outline: none; background: transparent; color: transparent; caret-color: #e9ecf2; overflow: auto; z-index: 1; }
#peCode::selection { background: rgba(56, 132, 255, .35); color: transparent; }
#peCode::placeholder { color: var(--text-3); }
.pe-hl .hc { color: #6f7787; font-style: italic; }   /* 주석 */
.pe-hl .hs { color: #a8d991; }                       /* 글자 */
.pe-hl .hn { color: #f5a97f; }                       /* 숫자 · true · na */
.pe-hl .hk { color: #f7d06b; }                       /* #색 */
.pe-hl .hw { color: #c39bf2; }                       /* if · for · var */
.pe-hl .ht { color: #5fd3c4; }                       /* float · line · array */
.pe-hl .hf { color: #7fb2ff; }                       /* 함수 부르기 */
.pe-hl .hv { color: #8fd8f0; }                       /* color.red · shape.xxx */
.pe-errl { background: rgba(239, 68, 68, .16); box-shadow: -12px 0 0 rgba(239, 68, 68, .16), 4000px 0 0 rgba(239, 68, 68, .16); }
.pe-wavy { text-decoration: underline wavy #ff5c5c; text-decoration-skip-ink: none; text-underline-offset: 4px; }
.pe-ln .pe-lnerr { color: #ff5c5c; font-weight: 700; }
.pe-ver { font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--hover); color: var(--text-2); }
.pe-ver.v6 { color: #7fb2ff; background: rgba(127, 178, 255, .12); }
/* 아래 알림 칸 (트뷰 편집기 콘솔처럼) */
.pe-con { display: grid; gap: 6px; max-height: 190px; overflow: auto; }
.pe-msg { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.45; border: 1px solid transparent; }
.pe-msg b { font-weight: 700; }
.pe-msg p { margin: 2px 0 0; color: var(--text-2); }
.pe-msg .pe-fix { color: var(--text); }
.pe-msg.ok { background: color-mix(in srgb, var(--up) 9%, transparent); border-color: color-mix(in srgb, var(--up) 28%, transparent); }
.pe-msg.ok b, .pe-msg.ok .pe-ic { color: var(--up); }
.pe-msg.warn { background: rgba(250, 204, 21, .08); border-color: rgba(250, 204, 21, .3); }
.pe-msg.warn b, .pe-msg.warn .pe-ic { color: #facc15; }
.pe-msg.bad { background: color-mix(in srgb, var(--down) 10%, transparent); border-color: color-mix(in srgb, var(--down) 45%, transparent); }
.pe-msg.bad b, .pe-msg.bad .pe-ic { color: var(--down); }
.pe-ic { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; border: 1.5px solid currentColor; margin-top: 1px; }
.pe-go { margin-left: 4px; background: none; border: 1px solid currentColor; color: inherit; border-radius: 6px; padding: 0 7px; font-size: 11.5px; line-height: 18px; cursor: pointer; }
.pe-msg.bad .pe-go { color: var(--down); }
.pe-msg.warn .pe-go { color: #facc15; }
.pe-st { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 7px 10px; border-radius: 8px; }
.pe-st.ok { color: var(--up); background: color-mix(in srgb, var(--up) 10%, transparent); }
.pe-st.bad { color: var(--down); background: color-mix(in srgb, var(--down) 10%, transparent); }
.pe-st button { background: none; border: 1px solid currentColor; color: inherit; border-radius: 6px; padding: 1px 7px; font-size: 12px; cursor: pointer; }
.pe-set { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; align-content: start; }
.pe-set .pe-h { grid-column: 1 / -1; margin-top: 2px; }
.pe-g { grid-column: 1 / -1; font-size: 12px; color: var(--text-2); font-weight: 600; margin-top: 4px; }
.pe-in { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.pe-in .inp { width: 120px; height: 30px; }
.pe-in input[type=color] { width: 40px; height: 26px; border: 0; background: none; padding: 0; }
.pe-note { margin: 0; font-size: 11.5px; color: var(--text-3); }
.us-cta { display: grid; gap: 8px; justify-items: start; padding: 14px 16px; border-top: 1px solid var(--line); }
.us-cta > div, .us-cta { grid-auto-flow: row; }
.us-cta p { margin: 0; font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
@media (max-width: 760px) {
  .pe-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .pe-side { border-right: 0; border-bottom: 1px solid var(--line); max-height: 180px; }
  .pe-main { grid-template-rows: auto minmax(220px, 1fr) auto auto auto; }
}

/* 오늘 볼 종목 TOP 3 (레이더 맨 위 · js/scanner.js topHTML) */
.tp3 { border: 1px solid color-mix(in srgb, var(--brand-2) 35%, var(--line)); background: color-mix(in srgb, var(--brand-2) 5%, var(--win)); border-radius: 12px; padding: 12px; display: grid; gap: 6px; }
.tp3-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.tp3-h b { font-size: 14.5px; }
.tp3-h small { font-size: 11.5px; color: var(--text-3); }
.tp3-r { display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%; background: var(--win); border: 1px solid var(--line); border-radius: 10px; padding: 10px; cursor: pointer; color: var(--text); }
.tp3-r:hover { border-color: var(--brand-2); }
.tp3-n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--brand-2); color: #fff; }
.tp3-m { display: grid; gap: 5px; min-width: 0; flex: 1; }
.tp3-t { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; }
.tp3-t .ico { width: 14px; height: 14px; color: var(--text-3); }
.tp3-d { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.tp3-d.up { color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent); }
.tp3-d.down { color: var(--down); background: color-mix(in srgb, var(--down) 14%, transparent); }
.tp3-p { margin-left: auto; font-size: 12.5px; }
.tp3-t .up, .tp3-t .down { font-size: 12px; }
.tp3-c { display: flex; flex-wrap: wrap; gap: 4px; }
.tp3-c em { font-style: normal; font-size: 11.5px; color: var(--text-2); background: var(--hover); border-radius: 5px; padding: 2px 6px; }
.tp3-c em small { color: var(--text-3); margin-left: 4px; }
.tp3-w { font-size: 12px; color: var(--text-2); }
.tp3-lock { font-size: 12px; color: var(--text-3); text-align: center; }
.tp3-f { margin: 2px 0 0; font-size: 11px; color: var(--text-3); line-height: 1.5; }
.tp3-c em[data-tpick] { cursor: pointer; } .tp3-c em[data-tpick]:hover { color: var(--text); background: color-mix(in srgb, var(--brand-2) 18%, transparent); }

/* 모의 거래 (10/30): 수수료 안내 · 카드 안 익절/손절 편집 · 이번 달 초기화 남은 횟수 */
.fee-note { font-size: 11px; line-height: 1.55; color: var(--text-3); background: var(--bg-2, rgba(255,255,255,.03)); border-radius: 6px; padding: 7px 9px; }
.fee-note b { color: var(--text-2); font-weight: 600; }
.est > span { display: block; }
.est small { color: var(--text-3); }
.ps-edit { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 6px; align-items: end; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.ps-edit label { display: grid; gap: 3px; font-size: 11px; color: var(--text-3); }
.ps-edit input { height: 28px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; min-width: 0; }
.ps-edit input:focus { outline: none; border-color: var(--brand); }
.as-reset { display: grid; gap: 4px; justify-items: start; }
.as-reset small { font-size: 11px; }
@media (max-width: 420px) { .ps-edit { grid-template-columns: 1fr 1fr; } }

/* 고래 포지션 (10/30 대표: 뭘 말하는지 모르겠다 → 한 문장 요약 · 쏠림 막대 · 쉬운 말) */
.wh-sum { margin: 8px 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2, rgba(255,255,255,.02)); display: grid; gap: 8px; }
.wh-h { display: flex; align-items: center; gap: 8px; }
.wh-h b { font-size: 15px; }
.wh-h .dim { margin-left: auto; font-size: 11px; }
.wh-say { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); }
.wh-bar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: var(--line); }
.wh-bar b { display: flex; align-items: center; min-width: 0; font-weight: 600; font-size: 11px; color: #fff; overflow: hidden; white-space: nowrap; }
.wh-bar b.up { background: var(--up); justify-content: flex-start; padding-left: 8px; }
.wh-bar b.down { background: var(--down); justify-content: flex-end; padding-right: 8px; }
.wh-bar em { font-style: normal; }
.wh-sub { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.wh-li { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 12px; color: var(--text-2); }
.wh-lh { padding: 10px 12px 4px; font-size: 12px; font-weight: 600; color: var(--text); }
.wh-lh .dim { font-weight: 400; font-size: 11px; margin-left: 4px; }
.wh-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.wh-row:hover { background: var(--hover, rgba(255,255,255,.04)); }
.wh-tag { font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.wh-tag.up { background: color-mix(in srgb, var(--up) 18%, transparent); }
.wh-tag.down { background: color-mix(in srgb, var(--down) 18%, transparent); }
.wh-main { display: grid; min-width: 0; }
.wh-main b { font-size: 12px; font-weight: 600; }
.wh-main small { font-size: 11px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-pl { display: grid; justify-items: end; }
.wh-pl small { font-size: 10px; color: var(--text-3); }
.wh-help { margin: 10px 12px; font-size: 12px; color: var(--text-2); }
.wh-help summary { cursor: pointer; color: var(--brand-2, var(--brand)); font-weight: 600; }
.wh-help p { margin: 6px 0 0; line-height: 1.55; }
.wh-ev { grid-template-columns: auto 1fr !important; }
.wh-evs { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; line-height: 1.5; }
.wh-evs .ico, .wh-evs img { flex: none; margin-top: 2px; }

/* 종목 정보 소개 (10/30) */
.inf-about .inf-t { display: flex; align-items: center; gap: 6px; }
.inf-cat { font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 10px; background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand-2, var(--brand)); }
.inf-d { margin: 6px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--text); }
.inf-k { margin: 8px 0 0; padding: 7px 9px; border-radius: 6px; font-size: 11.5px; line-height: 1.55; color: var(--text-2); background: color-mix(in srgb, #f0a030 10%, transparent); border-left: 2px solid #f0a030; }
.inf-k b { color: #f0a030; margin-right: 4px; font-weight: 600; }
.inf-gl { margin-top: 8px; font-size: 11.5px; color: var(--text-2); }
.inf-gl summary { cursor: pointer; color: var(--brand-2, var(--brand)); font-weight: 600; }
.inf-gl p { margin: 6px 0 0; line-height: 1.55; }
.panel[data-p="whale"] .p-head h3 { white-space: nowrap; }
.panel[data-p="whale"] #whaleSeg button { padding-inline: 7px; white-space: nowrap; }
.srv-tag.late { color: #f0a030; }