/* ===== 코바 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: 1px; }
.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; } }