/* ===== 코바 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; } }