/* 공통 색 토큰은 /tokens.css — index.html 에서 이 파일보다 먼저 불러온다 */
:root {
  /* 시세 색만 재테크 전용 — 나머지 팔레트는 /tokens.css */
  --stock-up: #f0616d;
  --stock-down: #4d8bff;
  --stock-flat: #a0a0b8;
  --bull-bg: rgba(240,97,109,.14);
  --bear-bg: rgba(77,139,255,.14);
}
[data-theme="light"] {
  --stock-up: #e0424f;
  --stock-down: #2f6fe0;
  --stock-flat: #999;
  --bull-bg: rgba(224,66,79,.10);
  --bear-bg: rgba(47,111,224,.10);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  background: var(--bg); color: var(--text); min-height: 100vh;
}
.container { max-width: 700px; margin: 0 auto; padding: 16px 16px 60px; }

/* 헤더 */
.header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.header h1 { font-size: 1.3rem; font-weight: 800; letter-spacing: -.3px; }
.back-btn {
  color: var(--primary-light); text-decoration: none; font-size: .9rem; font-weight: 600;
  padding: 6px 12px; background: var(--bg2); border: 1px solid var(--border);
}
.back-btn:hover { background: var(--primary); color: #fff; }
.theme-btn { background: var(--bg2); border: 1px solid var(--border); padding: 6px 10px; cursor: pointer; font-size: 1rem; }
/* 모의투자 모드 버튼 — 나머지 모의투자 스타일은 mock.css (모드를 켤 때 불러온다) */
.header-actions { display: flex; gap: 6px; align-items: center; }
.mock-btn {
  background: var(--bg2); border: 1px solid var(--border); color: var(--text2);
  padding: 6px 10px; cursor: pointer; font-size: .8rem; font-weight: 800; font-family: inherit;
  display: inline-flex; align-items: center; gap: 5px;
}
.mock-btn .dot { width: 7px; height: 7px; background: var(--text3); display: inline-block; }
.mock-btn.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.mock-btn.on .dot { background: #fff; }
.mock-btn:disabled { opacity: .6; cursor: progress; }

/* 회원 게이트 */
.gate {
  background: var(--bg2); border: 1px solid var(--border); border-top: 3px solid var(--primary);
  padding: 40px 24px; text-align: center; margin-top: 40px;
}
.gate-icon { font-size: 2.6rem; display: block; margin-bottom: 14px; }
.gate h2 { font-size: 1.1rem; font-weight: 800; margin-bottom: 10px; }
.gate p { font-size: .88rem; color: var(--text2); line-height: 1.7; margin-bottom: 20px; }
.gate a {
  display: inline-block; background: var(--primary); color: #fff; text-decoration: none;
  padding: 11px 26px; font-size: .9rem; font-weight: 700; border: none;
}
.gate a:hover { background: var(--primary-light); }

/* 서브 탭 */
.tab-bar { display: flex; gap: 4px; margin-bottom: 16px; background: var(--bg2); padding: 4px; border: 1px solid var(--border); }
.tab-btn {
  flex: 1; padding: 9px 4px; background: none; border: none; color: var(--text2);
  font-size: .84rem; font-weight: 600; cursor: pointer; transition: all .15s;
}
.tab-btn.active { background: var(--primary); color: #fff; }
.tab-btn:hover:not(.active) { color: var(--text); }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* 소개 */
.intro-card {
  background: linear-gradient(135deg, rgba(var(--primary-rgb),.1), rgba(var(--primary-rgb),.03));
  border: 1px solid var(--border); border-left: 3px solid var(--primary);
  padding: 14px 18px; margin-bottom: 16px; font-size: .86rem; color: var(--text2); line-height: 1.65;
}
.intro-card p { margin: 0 0 6px; }
.intro-card p:last-child { margin: 0; }
.intro-schedule { color: var(--primary-light); font-weight: 700; font-size: .84rem; margin-top: 8px !important; }

.loading { text-align: center; padding: 30px; color: var(--text3); font-size: .86rem; }
.empty { text-align: center; padding: 34px 20px; color: var(--text3); font-size: .86rem; line-height: 1.7; }

/* 브리핑 카드 */
.briefing-card {
  background: var(--bg2); border: 1px solid var(--border); border-top: 3px solid var(--primary);
  padding: 16px 18px; margin-bottom: 14px;
}
.briefing-card.pinned { border-top-color: var(--accent); }
.briefing-card-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.briefing-badge {
  background: var(--primary); color: #fff; font-size: .68rem; font-weight: 800;
  padding: 3px 8px; letter-spacing: .2px;
}
.briefing-badge.pin { background: var(--accent); }
.sentiment-badge { font-size: .68rem; font-weight: 800; padding: 3px 8px; }
.sentiment-bull { background: var(--bull-bg); color: var(--stock-up); }
.sentiment-bear { background: var(--bear-bg); color: var(--stock-down); }
.sentiment-neutral { background: var(--bg3); color: var(--text2); }
.briefing-date { margin-left: auto; font-size: .74rem; color: var(--text3); font-weight: 600; }
.briefing-title { font-size: 1.02rem; font-weight: 800; line-height: 1.45; margin-bottom: 8px; letter-spacing: -.2px; }
.briefing-preview, .briefing-body { font-size: .88rem; color: var(--text2); line-height: 1.75; white-space: pre-wrap; word-break: break-word; }
.briefing-toggle-btn {
  margin-top: 10px; background: none; border: 1px solid var(--border); color: var(--text2);
  padding: 5px 12px; font-size: .78rem; font-weight: 600; cursor: pointer;
}
.briefing-toggle-btn:hover { border-color: var(--primary); color: var(--text); }

/* 종목 칩 */
.ticker-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.ticker-chip {
  background: var(--bg3); border: 1px solid var(--border); padding: 4px 10px;
  font-size: .76rem; font-weight: 700; color: var(--text2); display: inline-flex; gap: 6px; align-items: center;
}
.ticker-chip .code { color: var(--text3); font-size: .7rem; font-weight: 600; }

/* 브리핑 푸터 */
.briefing-footer { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.comment-toggle {
  background: none; border: none; color: var(--primary-light); font-size: .8rem;
  font-weight: 700; cursor: pointer; padding: 0; margin-left: auto;
}
.mini-btn {
  background: var(--bg3); border: 1px solid var(--border); color: var(--text2);
  padding: 4px 10px; font-size: .74rem; font-weight: 600; cursor: pointer;
}
.mini-btn:hover { border-color: var(--primary); color: var(--text); }
.mini-btn.danger:hover { border-color: var(--accent); color: var(--accent); }

/* 댓글 */
.comment-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.comment-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.comment-input {
  width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text);
  padding: 10px 12px; font-size: .86rem; font-family: inherit; resize: vertical; min-height: 62px; outline: none;
}
.comment-input:focus { border-color: var(--primary); }
.comment-submit-row { display: flex; align-items: center; gap: 8px; }
.comment-count-hint { font-size: .72rem; color: var(--text3); margin-right: auto; }
.btn-submit {
  background: var(--primary); border: none; color: #fff; padding: 8px 18px;
  font-size: .82rem; font-weight: 700; cursor: pointer;
}
.btn-submit:hover:not(:disabled) { background: var(--primary-light); }
.btn-submit:disabled { opacity: .5; cursor: not-allowed; }
.btn-ghost {
  background: none; border: 1px solid var(--border); color: var(--text2);
  padding: 8px 14px; font-size: .82rem; font-weight: 600; cursor: pointer;
}

.comment-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.comment-item:last-child { border-bottom: none; }
.comment-item.reply { margin-left: 20px; padding-left: 12px; border-left: 2px solid var(--border); border-bottom: none; }
.comment-head { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; flex-wrap: wrap; }
.comment-author { font-size: .82rem; font-weight: 700; }
.comment-real { font-size: .68rem; font-weight: 600; color: var(--text3); margin-left: 4px; }
.comment-time { font-size: .72rem; color: var(--text3); margin-left: auto; }
.comment-body { font-size: .86rem; color: var(--text2); line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.comment-body.deleted { color: var(--text3); font-style: italic; }
.comment-actions { display: flex; gap: 16px; margin-top: 6px; }
.comment-action {
  background: none; border: none; color: var(--text3); font-size: .74rem;
  font-weight: 600; cursor: pointer; padding: 0;
}
.comment-action:hover { color: var(--primary-light); }
.comment-action.liked { color: var(--stock-up); }
.comment-action.danger:hover { color: var(--accent); }
.reply-form { margin: 8px 0 8px 20px; }

/* 준비 중 */
.soon-card {
  background: var(--bg2); border: 1px solid var(--border); border-left: 3px solid var(--primary);
  padding: 20px; margin-bottom: 14px;
}
.soon-card h3 { font-size: .96rem; font-weight: 800; margin-bottom: 10px; }
.soon-list { list-style: none; font-size: .86rem; color: var(--text2); line-height: 2; }
.soon-list li::before { content: '▸ '; color: var(--primary-light); font-weight: 800; }
.soon-note { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: .78rem; color: var(--text3); line-height: 1.7; }

/* 호가 프리뷰 (목업) */
.book-preview { margin-top: 14px; border: 1px solid var(--border); background: var(--bg); }
.book-row { display: grid; grid-template-columns: 1fr 88px 1fr; font-size: .76rem; font-weight: 600; }
.book-row > div { padding: 5px 10px; }
.book-head { background: var(--bg3); color: var(--text3); font-size: .7rem; text-align: center; }
.book-ask { text-align: right; color: var(--text2); background: var(--bear-bg); }
.book-bid { text-align: left; color: var(--text2); background: var(--bull-bg); }
.book-price { text-align: center; color: var(--text); border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.book-blank { background: transparent; }
.book-cur { color: var(--stock-up); font-weight: 800; }
.mock-tag { font-size: .68rem; color: var(--text3); text-align: center; padding: 6px; background: var(--bg3); }

/* 관리자 */
.admin-section {
  background: var(--bg2); border: 1px solid var(--border); padding: 16px 18px; margin-bottom: 14px;
}
.admin-section h3 { font-size: .94rem; font-weight: 800; margin-bottom: 12px; }
/* 모의투자 관리(시즌·휴장일·권리 변동) 묶음 — 마지막 칸이 아래 브리핑 작성 칸에 붙지 않게 */
#mkAdminMount > :last-child { margin-bottom: 14px; }
.form-grid { display: flex; flex-direction: column; gap: 9px; }
.form-row { display: flex; gap: 8px; flex-wrap: wrap; }
.form-row > * { flex: 1; min-width: 120px; }
.f-input, .f-select, .f-textarea {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  padding: 9px 12px; font-size: .86rem; font-family: inherit; outline: none; width: 100%;
}
.f-input:focus, .f-select:focus, .f-textarea:focus { border-color: var(--primary); }
.f-textarea { min-height: 200px; resize: vertical; line-height: 1.7; }
.f-label { font-size: .76rem; font-weight: 700; color: var(--text3); margin-bottom: -3px; }
.chip-input-row { display: flex; gap: 6px; }
.chip-input-row .f-input { flex: 1; }
.chip-list { display: flex; gap: 6px; flex-wrap: wrap; min-height: 4px; }
.chip-del {
  background: var(--bg3); border: 1px solid var(--border); color: var(--text2);
  padding: 4px 9px; font-size: .76rem; font-weight: 700; cursor: pointer;
}
.chip-del:hover { border-color: var(--accent); color: var(--accent); }
.radio-row { display: flex; gap: 8px; }
.radio-btn {
  flex: 1; padding: 8px; background: var(--bg); border: 1px solid var(--border);
  color: var(--text2); font-size: .8rem; font-weight: 700; cursor: pointer;
}
.radio-btn.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.check-row { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--text2); font-weight: 600; }
.status-msg { margin-top: 10px; font-size: .82rem; font-weight: 600; min-height: 18px; }
.ok { color: #4ade80; } .err { color: var(--accent); }

.admin-list-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border);
}
.admin-list-item:last-child { border-bottom: none; }
.admin-list-item .mini-btn { flex: 0 0 auto; white-space: nowrap; }
.admin-list-info { flex: 1; min-width: 0; }
.admin-list-title { font-size: .86rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-list-sub { font-size: .73rem; color: var(--text3); margin-top: 2px; }

/* 면책 */
.disclaimer {
  margin-top: 22px; padding: 14px 16px; background: var(--bg2);
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  font-size: .76rem; color: var(--text3); line-height: 1.8;
}
footer { text-align: center; padding: 22px 0 10px; font-size: .72rem; color: var(--text3); line-height: 1.7; }

@media (max-width: 480px) {
  .container { padding: 12px 12px 50px; }
  .header h1 { font-size: 1.15rem; }
  .briefing-card { padding: 14px; }
  .comment-item.reply { margin-left: 12px; }
}

/* ══════════════════════════════════════════════
   시세 (Phase 3)
   ══════════════════════════════════════════════ */

/* 지수 스트립 — 줄 머리(장 상태·기어) / 윗줄 국내·미국 지수 / 아랫줄 기타 칩 */
.index-strip {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg2); border: 1px solid var(--border); border-left: 3px solid var(--primary);
  padding: 10px 12px; margin-bottom: 12px;
}
/* 지수 5개 — 좁은 화면에서는 이 안에서만 가로로 밀린다. 오른쪽 끝을 흐려 더 있다는 걸 알린다 */
.idx-scroll {
  min-width: 0; display: flex; gap: 10px; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
}
.idx-scroll::-webkit-scrollbar, .idx-chips::-webkit-scrollbar { display: none; }
/* 마우스(PC) — 잡고 끌어 넘긴다. 스크롤바는 두지 않는다 (끌기 + 오른쪽 끝 흐림으로 충분, 2026-10-03) */
@media (hover: hover) and (pointer: fine) {
  .idx-scroll, .idx-chips { cursor: grab; }
  .idx-scroll.dragging, .idx-chips.dragging { cursor: grabbing; user-select: none; }
  .idx-chip.coin { cursor: pointer; }
}
.idx-scroll::after, .idx-chips::after { content: ''; flex: 0 0 20px; }   /* 끝까지 밀었을 때 마지막 지수가 흐려지지 않게 (마스크 18px 보다 넓게) */
.idx-cell { flex: 0 0 auto; min-width: 96px; max-width: 150px; }
/* 국내·미국 — 다른 묶음이라 선으로 가른다 */
.idx-cell.grp-first { border-left: 1px solid var(--border); padding-left: 10px; margin-left: 2px; }
/* 아랫줄 — 환율·VIX·원자재·금리·코인. 한 줄 칩이라 높이를 거의 먹지 않는다 */
.idx-chips {
  display: flex; gap: 6px; overflow-x: auto; min-width: 0;
  padding-top: 8px; border-top: 1px solid var(--border);
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
}
.idx-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  background: var(--bg3); border: 1px solid var(--border); padding: 4px 8px; font-size: .72rem;
}
.idx-chip .ix-ico { margin-right: 0; }
.idx-chip .idx-delay { margin-left: 0; }
.idx-cname { color: var(--text3); font-weight: 700; }
.idx-cprice { font-weight: 800; color: var(--text); }
.idx-cprice.up, .idx-cprice.down, .idx-cprice.flat { color: var(--text); }     /* 값은 흰 글씨, 방향은 등락률 색으로만 */
.idx-cchg { font-size: .68rem; font-weight: 700; }
.idx-chip.coin { cursor: pointer; }
.idx-chip.coin:hover { border-color: var(--primary); }
.idx-name { font-size: .7rem; color: var(--text3); font-weight: 700; white-space: nowrap; }
.ix-ico {
  width: 15px; height: 10px; vertical-align: -1px; margin-right: 4px;
  flex: 0 0 auto; display: inline-block;
}
.ix-pick .ix-ico { margin-right: 2px; }

.idx-delay {
  margin-left: 4px; font-size: .58rem; font-weight: 700; color: var(--text3);
  border: 1px solid var(--border); padding: 0 3px; vertical-align: 1px;
}
.idx-delay:empty { display: none; }     /* 야간선물 진행 중에는 태그가 비어 있다 */
.idx-price { font-size: 1rem; font-weight: 800; margin-top: 2px; letter-spacing: -.3px; }
.idx-chg { font-size: .72rem; font-weight: 700; margin-top: 1px; }
/* 폭을 고정한다 — 비워 두면 기기에 따라 셀 폭까지 늘어나 선이 길게 뭉개진다 */
.idx-spark { width: 96px; height: 22px; margin-top: 4px; }
.idx-spark.none { display: none; }     /* 분봉이 없는 해외 선물 — 숫자만 보여 준다 */

/* 줄 머리 — 윗줄 순서대로 국내·미국 장 상태, 오른쪽 끝에 항목 고르기 */
.idx-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.idx-clock { flex: 0 0 auto; font-size: .7rem; font-weight: 800; color: var(--text2); font-variant-numeric: tabular-nums; margin-right: 2px; }
.idx-clock:empty { display: none; }
/* 폭이 모자라면(폰) 배지 글자를 줄여서라도 ! · ⚙ 가 잘리지 않게 */
.idx-head .idx-state { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.idx-head .info-tip, .idx-head .ix-gear { flex: 0 0 auto; }
.idx-head .info-tip { margin-left: auto; }      /* ! 와 ⚙ 를 오른쪽 모서리에 붙여 둔다 */
.idx-head .ix-gear { height: 22px; }

/* ! 설명 버튼 · 팝업 (market.js InfoTip) */
.info-tip {
  flex: 0 0 auto; width: 22px; height: 22px; padding: 0; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg3); border: 1px solid var(--border); color: var(--primary-light);
  font-size: .78rem; font-weight: 900; font-family: inherit; cursor: pointer;
}
.info-tip:hover, .info-tip[aria-describedby] { border-color: var(--primary); color: var(--primary-light); }
.info-tip:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
/* 제목·라벨 옆에 붙는 작은 ! */
.info-tip.sm { width: 17px; height: 17px; font-size: .64rem; margin-left: 5px; vertical-align: 1px; }
/* 제목 바로 옆에 붙이면 제목의 일부처럼 보인다 — 머리 줄의 오른쪽 끝에 둔다 */
.m-head .info-tip.sm { order: 99; margin-left: 0; }
.m-head h3 + .info-tip:last-child { margin-left: auto; }          /* 힌트가 없는 머리 */
.pf-head .info-tip.sm { margin-left: 8px; align-self: center; }
.pf-head h4 + .info-tip { margin-left: auto; }
.sd-asof .info-tip.sm { float: right; margin-left: 8px; }
[data-tip-body]:not(.info-tip) { cursor: help; }
.info-pop {
  position: fixed; z-index: 1000; width: max-content; max-width: min(300px, calc(100vw - 16px));
  background: var(--bg2); border: 1px solid var(--primary); box-shadow: var(--shadow);
  padding: 10px 12px; color: var(--text); pointer-events: auto;
  overflow-y: auto; overscroll-behavior: contain;      /* 화면보다 길면 창 안에서 스크롤 (market.js InfoTip.show 가 max-height 를 준다) */
}
.info-pop[hidden] { display: none; }
.info-pop-t { font-size: .76rem; font-weight: 800; margin-bottom: 6px; color: var(--primary-light); }
.info-pop-b { font-size: .74rem; font-weight: 600; line-height: 1.6; color: var(--text2); white-space: pre-line; word-break: keep-all; }
.ix-gear {
  background: var(--bg3); border: 1px solid var(--border); color: var(--text2);
  font-size: .82rem; padding: 3px 7px; cursor: pointer; line-height: 1.3;
}
.ix-gear:hover { border-color: var(--primary); color: var(--text); }
.ix-panel {
  margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--border);
}
.ix-pick-head { font-size: .7rem; color: var(--text3); font-weight: 700; margin-bottom: 7px; }
.ix-pick-list { display: flex; flex-wrap: wrap; gap: 5px; }
.ix-pick-group + .ix-pick-group { margin-top: 10px; }
.ix-pick-glabel { font-size: .68rem; color: var(--text2); font-weight: 800; margin-bottom: 5px; }
.ix-pick-glabel span { color: var(--text3); font-weight: 700; margin-left: 3px; }
.ix-pick {
  display: flex; align-items: center; gap: 5px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text2);
  font-size: .74rem; font-weight: 700; padding: 5px 9px; cursor: pointer;
}
.ix-pick.on { border-color: var(--primary); color: var(--text); }
.ix-pick-box {
  width: 13px; height: 13px; flex: 0 0 auto; display: inline-flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--border); font-size: .6rem; line-height: 1;
}
.ix-pick.on .ix-pick-box { background: var(--primary); border-color: var(--primary); color: #fff; }

.idx-state {
  flex: 0 0 auto;
  font-size: .66rem; font-weight: 800; padding: 3px 8px; white-space: nowrap;
}
.idx-state:empty { display: none; }
.idx-state.live { background: rgba(74,222,128,.14); color: #4ade80; }
.idx-state.closed { background: var(--bg3); color: var(--text3); }
.idx-state.stale { background: rgba(251,191,36,.16); color: #fbbf24; }
.idx-err { font-size: .8rem; color: var(--text3); }

.up { color: var(--stock-up); }
.down { color: var(--stock-down); }
.flat { color: var(--stock-flat); }

/* 검색 */
.search-wrap { position: relative; margin-bottom: 14px; }
/* 배경(bg2)과 같은 색이라 묻혀 보였다 — 한 단계 밝은 칸 + 왼쪽 앰버 막대(지수 스트립과 같은 말) + 돋보기 */
.search-input {
  width: 100%; background: var(--bg3); color: var(--text);
  border: 1px solid var(--border); border-left: 3px solid var(--primary);
  padding: 12px 44px 12px 40px; font-size: .92rem; font-weight: 600; font-family: inherit; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
[data-theme="light"] .search-input { background: var(--bg2); }
.search-input::placeholder { color: var(--text2); font-weight: 500; opacity: 1; }
.search-input:hover { border-color: var(--text3); border-left-color: var(--primary); }
.search-input:focus { border-color: var(--primary); box-shadow: var(--shadow); }
.search-ico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--text2); pointer-events: none; transition: color .15s;
}
.search-input:focus ~ .search-ico { color: var(--primary-light); }
.search-clear {
  position: absolute; right: 0; top: 0; height: 100%; width: 44px;
  background: none; border: none; color: var(--text2); cursor: pointer; font-size: .95rem;
}
.search-clear:hover { color: var(--text); }
.search-clear:focus-visible { outline: 2px solid var(--primary); outline-offset: -6px; }
/* 비어 있으면 지울 게 없다 */
.search-input:placeholder-shown ~ .search-clear { display: none; }
.search-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
  background: var(--bg2); border: 1px solid var(--primary); border-top: none;
  max-height: 280px; overflow-y: auto;
}
.sr-item {
  display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left;
  background: none; border: none; border-bottom: 1px solid var(--border);
  padding: 10px 13px; cursor: pointer; color: var(--text);
}
.sr-item:last-child { border-bottom: none; }
.sr-item:hover { background: var(--bg3); }
.sr-name { font-size: .88rem; font-weight: 700; }
.sr-meta { font-size: .72rem; color: var(--text3); margin-left: auto; }
.sr-empty { padding: 14px; text-align: center; font-size: .82rem; color: var(--text3); }
.sr-empty.sr-more { padding: 8px 14px; font-size: .74rem; }

/* 섹션 */
.m-section { margin-bottom: 18px; }
.m-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.m-head h3 { font-size: .92rem; font-weight: 800; }
.m-head .mini-btn { margin-left: auto; }
.m-hint { margin-left: auto; font-size: .72rem; color: var(--text3); }

.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  background: var(--bg2); border: 1px solid var(--border); color: var(--text2);
  padding: 6px 11px; font-size: .8rem; font-weight: 700; cursor: pointer;
}
.chip:hover { border-color: var(--primary); color: var(--text); }
/* 로고가 들어가는 칩 (최근 본 종목) */
.chip-row .chip { display: inline-flex; align-items: center; gap: 6px; }
/* 최근 본 종목 — 늘 한 줄, 넘치면 옆으로 (스크롤바는 숨기고 가장자리 흐림으로 더 있음을 보인다) */
.recent-row { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.recent-row::-webkit-scrollbar { display: none; }
.recent-row .chip { flex: 0 0 auto; white-space: nowrap; }
.recent-row.more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.recent-row.more-l { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px); mask-image: linear-gradient(to right, transparent, #000 36px); }
.recent-row.more-l.more-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }

/* 접었다 펴는 섹션 머리 (지금 뜨는 테마) — 접혀 있을 때도 한 줄 막대로 보이게 */
.m-fold { width: 100%; margin-bottom: 0; padding: 11px 13px; background: var(--bg2); border: 1px solid var(--border);
  color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.m-fold:hover { background: var(--bg3); }
.m-fold[aria-expanded="true"] { border-bottom-color: transparent; }
.m-fold-title { font-size: .92rem; font-weight: 800; }
/* 펼치기/접기 표시 — 머리 크기는 그대로 두고 오른쪽 표시만 눈에 띄게 (글자는 aria-expanded 로 바꾼다) */
.m-fold-cta { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; flex-shrink: 0; padding: 4px 10px;
  border: 1px solid rgba(var(--primary-rgb),.6); background: rgba(var(--primary-rgb),.1); color: var(--primary-light);
  font-size: .76rem; font-weight: 800; white-space: nowrap; }
.m-fold-cta::before { content: '펼치기'; }
.m-fold[aria-expanded="true"] .m-fold-cta::before { content: '접기'; }
.m-fold:hover .m-fold-cta { background: rgba(var(--primary-rgb),.2); border-color: var(--primary); }
.m-fold-caret { display: inline-block; font-size: .7rem; transition: transform .15s; }
.m-fold[aria-expanded="true"] .m-fold-caret { transform: rotate(180deg); }
@media (max-width: 420px) { .m-fold .m-hint { display: none; } .m-fold .m-fold-cta { margin-left: auto; } }
.m-fold + #themeList .theme-row:first-child, .m-fold + #themeList .sector-head:first-child, .m-fold + #themeList > .list-note:first-child { border-top-color: var(--border); }

/* 종목 행 */
.q-row {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: var(--bg2); border: 1px solid var(--border); border-bottom: none;
  padding: 11px 13px; cursor: pointer; color: var(--text);
}
.q-row:last-child { border-bottom: 1px solid var(--border); }
.q-row:hover { background: var(--bg3); }
.q-rank { flex: 0 0 18px; font-size: .74rem; font-weight: 800; color: var(--text3); }
.q-name { flex: 1; font-size: .87rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-price { flex: 0 0 auto; font-size: .87rem; font-weight: 700; }
.q-chg { flex: 0 0 72px; text-align: right; font-size: .8rem; font-weight: 800; }

/* 테마 */
.theme-row {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: var(--bg2); border: 1px solid var(--border); border-bottom: none;
  padding: 11px 13px; cursor: pointer; color: var(--text);
}
.theme-row:last-child { border-bottom: 1px solid var(--border); }
.theme-row:hover { background: var(--bg3); }
.theme-name { flex: 1; font-size: .87rem; font-weight: 700; }
.theme-sub { font-size: .7rem; color: var(--text3); font-weight: 600; }
.theme-rate { flex: 0 0 64px; text-align: right; font-size: .84rem; font-weight: 800; }
.sector-head {
  display: flex; align-items: center; gap: 8px; padding: 9px 13px;
  background: var(--bg3); border: 1px solid var(--border); border-bottom: none; font-size: .86rem;
}
.sector-head .mini-btn { margin-left: auto; }

/* 세그먼트 */
.seg-row { display: flex; gap: 4px; margin-bottom: 6px; }
.seg-row.sub { margin-bottom: 10px; }
.seg {
  flex: 1; padding: 7px 4px; background: var(--bg2); border: 1px solid var(--border);
  color: var(--text2); font-size: .79rem; font-weight: 700; cursor: pointer;
}
.seg.on { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ── 종목 상세 ── */
.sd-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.sd-title { font-size: 1.05rem; font-weight: 800; letter-spacing: -.3px; }
/* 종목 상세 하트 — 랭킹·관심종목과 동일한 fav-btn 을 쓰되 테두리만 준다 */
.fav-btn.sd-fav {
  margin-left: auto; background: var(--bg2);
  border: 1px solid var(--border); border-left: 1px solid var(--border);
  padding: 5px 12px; font-size: 1.05rem;
}
.fav-btn.sd-fav.on { border-color: var(--stock-up); }
.sd-sub { font-size: .76rem; color: var(--text3); font-weight: 600; margin-bottom: 12px; }

.sd-price-block { margin-bottom: 14px; }
.sd-price { font-size: 1.9rem; font-weight: 800; letter-spacing: -1px; line-height: 1.15; }
.sd-price .won { font-size: 1rem; font-weight: 700; }
.sd-chg { font-size: .88rem; font-weight: 800; margin-top: 3px; }
.sd-chg .vs { color: var(--text3); font-weight: 600; font-size: .78rem; margin-left: 4px; }
.sd-asof { font-size: .72rem; color: var(--text3); margin-top: 6px; }
.sd-expect { font-size: .8rem; color: var(--text2); margin-top: 6px; padding: 6px 8px; border: 1px solid var(--border); background: var(--bg3); }
.sd-expect b { font-weight: 800; }
.sd-expect .info-tip.sm { float: right; margin-left: 8px; }
.sd-ex-tag { display: inline-block; font-size: .68rem; font-weight: 700; padding: 1px 5px; margin-right: 4px; color: var(--on-primary); background: var(--primary); }
.sd-ex-vol { color: var(--text3); }
.state-dot { font-weight: 800; padding: 1px 6px; margin-left: 3px; }
.state-dot.live { background: rgba(74,222,128,.14); color: #4ade80; }
.state-dot.closed { background: var(--bg3); color: var(--text3); }
/* 요청이 연달아 실패·오프라인 — 숫자가 멈춰 있음을 알린다 */
.state-dot.stale { background: rgba(251,191,36,.16); color: #fbbf24; }

/* 범위 바 */
.range-row { margin-bottom: 9px; }
.range-label { font-size: .72rem; color: var(--text3); font-weight: 700; margin-bottom: 3px; }
.range-bar-wrap { display: flex; align-items: center; gap: 8px; }
.range-lo, .range-hi { font-size: .72rem; color: var(--text2); font-weight: 700; flex: 0 0 auto; }
.range-bar { position: relative; flex: 1; height: 5px; background: var(--bg3); border: 1px solid var(--border); }
.range-bar i {
  position: absolute; top: -3px; width: 3px; height: 11px;
  background: var(--primary-light); transform: translateX(-1px);
}

/* 지표 */
.sd-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border); margin: 12px 0 14px;
}
.stat { display: flex; justify-content: space-between; background: var(--bg2); padding: 9px 12px; }
.stat-k { font-size: .76rem; color: var(--text3); font-weight: 600; }
.stat-v { font-size: .8rem; font-weight: 700; }

/* 상세 탭 */
.sd-tabs { display: flex; gap: 4px; background: var(--bg2); padding: 4px; border: 1px solid var(--border); margin-bottom: 12px; }
.sd-tab { flex: 1; padding: 8px 4px; background: none; border: none; color: var(--text2); font-size: .82rem; font-weight: 700; cursor: pointer; }
.sd-tab.on { background: var(--primary); color: #fff; }

.tf-row { display: flex; gap: 4px; margin-bottom: 8px; }
.tf-btn {
  flex: 1; padding: 6px 2px; background: var(--bg2); border: 1px solid var(--border);
  color: var(--text2); font-size: .76rem; font-weight: 700; cursor: pointer;
}
.tf-btn.on { background: var(--bg3); border-color: var(--primary); color: var(--text); }
.chart-box { width: 100%; min-height: 260px; background: var(--bg); border: 1px solid var(--border); }

/* 최고·최저 지점 표시 — 차트 그리는 영역(가격축·시간축 제외) 위에 얹는 레이어 */
.hilo-layer { position: absolute; left: 0; top: 0; overflow: hidden; pointer-events: none; z-index: 3; }
.hilo-dot {
  position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--bg);
}
.hilo-tag {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font-size: .7rem; font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 3px var(--bg), 0 0 3px var(--bg), 0 0 6px var(--bg);
}

.book-toggle {
  width: 100%; margin-top: 10px; background: var(--bg2); border: 1px solid var(--border);
  color: var(--text2); padding: 9px; font-size: .82rem; font-weight: 700; cursor: pointer;
}
.book-toggle:hover { border-color: var(--primary); color: var(--text); }

/* 호가 */
.book-wrap { margin-top: 8px; border: 1px solid var(--border); background: var(--bg); }
.bk-head, .bk-row {
  display: grid; grid-template-columns: 1fr 86px 1fr; align-items: center;
}
.bk-head { background: var(--bg3); font-size: .68rem; color: var(--text3); font-weight: 700; text-align: center; }
.bk-head span { padding: 5px 8px; }
.bk-row { border-top: 1px solid var(--border); font-size: .76rem; font-weight: 700; }
.bk-price { text-align: center; padding: 6px 4px; color: var(--text); border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.bk-qty { position: relative; padding: 6px 9px; min-height: 28px; overflow: hidden; }
.bk-qty b { position: relative; z-index: 1; font-weight: 700; color: var(--text2); }
.bk-qty.ask { text-align: right; }
.bk-qty.ask b { float: right; }
.bk-qty.ask i { position: absolute; right: 0; top: 0; bottom: 0; background: var(--bear-bg); }
.bk-qty.bid i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--bull-bg); }
.bk-mid { background: var(--bg3); text-align: center; font-size: .7rem; color: var(--text3); font-weight: 700; padding: 5px; border-top: 1px solid var(--border); }
.bk-ratio { padding: 8px 10px; border-top: 1px solid var(--border); }
.bk-ratio-bar { display: block; height: 6px; background: var(--bull-bg); position: relative; overflow: hidden; }
.bk-ratio-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--bear-bg); }
.bk-ratio-txt { display: block; font-size: .7rem; color: var(--text3); font-weight: 700; margin-top: 4px; text-align: center; }
.bk-note { font-size: .66rem; color: var(--text3); text-align: center; padding: 6px; border-top: 1px solid var(--border); }

.ext-link {
  display: block; text-align: center; margin-top: 12px; padding: 9px;
  background: var(--bg2); border: 1px solid var(--border); color: var(--text2);
  font-size: .82rem; font-weight: 700; text-decoration: none;
}
.ext-link:hover { border-color: var(--primary); color: var(--text); }

/* 뉴스 */
.news-item {
  display: block; background: var(--bg2); border: 1px solid var(--border); border-bottom: none;
  padding: 11px 13px; text-decoration: none; color: var(--text);
}
.news-item:last-child { border-bottom: 1px solid var(--border); }
.news-item:hover { background: var(--bg3); }
.news-title { font-size: .86rem; font-weight: 700; line-height: 1.45; }
.news-meta { font-size: .72rem; color: var(--text3); margin-top: 4px; }

@media (max-width: 480px) {
  .sd-price { font-size: 1.6rem; }
  .q-chg { flex-basis: 64px; }
}

/* ── 실시간 값 변동 플래시 ──
   innerHTML을 통째로 갈아끼우지 않고 텍스트만 바꾼 뒤 이 애니메이션을 준다. */
@keyframes dtFlashUp {
  0%   { background: var(--stock-up); color: #fff; }
  100% { background: transparent; }
}
@keyframes dtFlashDown {
  0%   { background: var(--stock-down); color: #fff; }
  100% { background: transparent; }
}
.flash-up { animation: dtFlashUp .55s ease-out; }
.flash-down { animation: dtFlashDown .55s ease-out; }

/* 숫자가 바뀔 때 폭이 흔들리지 않도록 */
.sd-price, .idx-price, .q-price, .bk-qty b { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .flash-up, .flash-down { animation: none; }
}

/* 관리자 — 종목 검색 선택기 */
.ticker-picker { position: relative; }
.ticker-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
  background: var(--bg2); border: 1px solid var(--primary); border-top: none;
  max-height: 220px; overflow-y: auto;
}
.tr-item {
  display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left;
  background: none; border: none; border-bottom: 1px solid var(--border);
  padding: 9px 12px; cursor: pointer; color: var(--text);
}
.tr-item:last-child { border-bottom: none; }
.tr-item:hover { background: var(--bg3); }
.tr-name { font-size: .86rem; font-weight: 700; }
.tr-meta { font-size: .72rem; color: var(--text3); margin-left: auto; }
.tr-empty { padding: 12px; text-align: center; font-size: .8rem; color: var(--text3); }
/* 언급 종목 일괄 추가 미리보기 */
.tr-bulk { padding: 10px 12px; }
.ticker-results:has(.tr-bulk) { max-height: 360px; }
.tr-bulk-k { font-size: .72rem; font-weight: 800; color: var(--text2); margin-bottom: 6px; }
.tr-bulk-k.miss { color: #fbbf24; margin-top: 10px; }
.tr-bulk-list { display: flex; flex-wrap: wrap; gap: 5px; }
.tr-bulk-chip {
  font-size: .76rem; font-weight: 700; padding: 3px 8px;
  background: var(--bg3); border: 1px solid var(--border); color: var(--text);
}
.tr-bulk-chip i { font-style: normal; font-weight: 600; color: var(--text3); margin-left: 2px; }
.tr-bulk-chip.dup { opacity: .5; text-decoration: line-through; }
.tr-bulk-chip.miss { border-style: dashed; color: var(--text2); }
.tr-bulk-cand {
  background: none; border: none; padding: 0; cursor: pointer; font: inherit;
  color: var(--primary-light); text-decoration: underline;
}
.tr-bulk-add { width: 100%; margin-top: 12px; }

/* 브리핑 카드의 종목 칩 — 탭하면 시세로 이동 */
.ticker-chip {
  background: var(--bg3); border: 1px solid var(--border); padding: 5px 11px;
  font-size: .78rem; font-weight: 700; color: var(--text2);
  display: inline-flex; gap: 6px; align-items: center; cursor: pointer;
}
.ticker-chip:hover { border-color: var(--primary); color: var(--text); }
.ticker-chip .code { color: var(--text3); font-size: .68rem; font-weight: 600; }

/* ── 관심종목 보기 토글 ── */
.view-toggle { margin-left: auto; display: flex; gap: 3px; }

/* 관심종목 그룹 탭 — 한 줄, 넘치면 옆으로 */
.wg-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
/* 관심종목이 비었을 때 안내를 박스로 — 바로 아래 '최근 본 종목'과 이어져 보이지 않게 */
#watchList > .empty { border: 1px dashed var(--border); padding: 22px 16px; }
/* 최근 본 종목은 위 관심종목과 선으로 나눈다 */
#recentSection { border-top: 1px solid var(--border); padding-top: 16px; }
.wg-row:empty { display: none; }
.wg-chips { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.wg-chips::-webkit-scrollbar { display: none; }
.wg-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; min-height: 36px;
  background: var(--bg2); border: 1px solid var(--border); color: var(--text2); font: inherit; font-size: .82rem; font-weight: 700;
  cursor: pointer; white-space: nowrap; }
.wg-chip em { font-style: normal; font-size: .7rem; font-weight: 800; color: var(--text3); font-variant-numeric: tabular-nums; }
.wg-chip:hover { border-color: var(--primary); color: var(--text); }
.wg-chip.on { border-color: var(--primary); background: rgba(var(--primary-rgb),.12); color: var(--text); }
.wg-chip.on em { color: var(--primary-light); }
.wg-chip.add { border-style: dashed; color: var(--primary-light); }
.wg-edit { flex-shrink: 0; background: none; border: none; padding: 6px 2px; font: inherit; font-size: .76rem; font-weight: 700;
  color: var(--primary-light); cursor: pointer; }
.wg-edit:hover { text-decoration: underline; text-underline-offset: 2px; }

/* 관심 그룹 창 (아래에서 올라오는 창 · 넓은 화면은 가운데) */
body.wg-noscroll { overflow: hidden; }
.wg-sheet-wrap { position: fixed; inset: 0; z-index: 55; display: flex; align-items: flex-end; justify-content: center; padding-bottom: var(--kb, 0px); }
.wg-dim { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.wg-sheet { position: relative; width: 100%; max-width: 440px; max-height: min(85vh, calc(var(--vvh, 100vh) - 12px - env(safe-area-inset-top, 0px))); overflow-y: auto; background: var(--bg2);
  border: 1px solid var(--border); border-top: 3px solid var(--primary); padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
@media (min-width: 600px) { .wg-sheet-wrap { align-items: center; } .wg-sheet { border-bottom: 1px solid var(--border); } }
.wg-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.wg-sheet-head b { font-size: 1rem; font-weight: 800; }
.wg-sheet-head .mini-btn { min-width: 40px; min-height: 40px; }
.wg-hint { font-size: .78rem; color: var(--primary-light); line-height: 1.55; margin-bottom: 12px; word-break: keep-all; }
.wg-msg { min-height: 1.2em; font-size: .76rem; font-weight: 700; color: var(--accent); margin-top: 8px; }
.wg-fav-list { display: flex; flex-direction: column; }
.wg-fav-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 2px; cursor: pointer; }
.wg-fav-row + .wg-fav-row { border-top: 1px solid var(--border); }
.wg-fav-row input { width: 20px; height: 20px; accent-color: var(--primary); flex-shrink: 0; }
.wg-fav-row span { flex: 1; font-size: .92rem; font-weight: 700; }
.wg-fav-row em { font-style: normal; font-size: .78rem; color: var(--text3); font-variant-numeric: tabular-nums; }
.wg-add-btn { display: block; width: 100%; margin-top: 12px; padding: 12px; background: none; border: 1px solid var(--border);
  color: var(--text); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; }
.wg-add-btn:hover { border-color: var(--primary); }
.wg-go { width: 100%; margin-top: 12px; padding: 12px; }
/* 그룹 이름 페이지 — 전체 화면. [추가]는 키보드 바로 위 (--kb = 키보드 높이, market-ui.js wgPageKb) */
/* top/bottom 을 --vvt 만큼 내린다 — 키보드가 뜰 때 아이폰이 화면을 끌어올려도 머리글(‹ 새 그룹 추가)이 보이게 */
.wg-page { position: fixed; inset: 0; top: var(--vvt, 0px); bottom: calc(0px - var(--vvt, 0px)); z-index: 60; background: var(--bg); display: flex; flex-direction: column;
  padding: calc(8px + env(safe-area-inset-top)) 20px 0; }
.wg-page-head { display: flex; align-items: center; gap: 6px; min-height: 56px; margin: 0 -8px 18px; }
.wg-page-head b { font-size: 1.15rem; font-weight: 800; }
.wg-back { width: 44px; height: 44px; background: none; border: none; color: var(--text); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.wg-page-lbl { font-size: .86rem; font-weight: 700; color: var(--primary-light); margin-bottom: 10px; }
/* 16px 이상 — iOS 가 입력칸을 누를 때 화면을 확대하지 않게 */
.wg-page-input { width: 100%; font-size: 16px; font-weight: 600; padding: 15px 14px; background: var(--bg2); color: var(--text);
  border: 1px solid var(--border); outline: none; font-family: inherit; }
.wg-page-input:focus { border-color: var(--primary); }
.wg-page-cnt { font-size: .72rem; color: var(--text3); text-align: right; margin-top: 6px; }
.wg-page .wg-msg { margin-top: 2px; }
.wg-page-go { position: fixed; left: 20px; right: 20px; bottom: calc(16px + env(safe-area-inset-bottom) + var(--kb, 0px));
  padding: 15px; font-size: .95rem; font-weight: 800; transition: bottom .12s; }
.wg-page-go:disabled { opacity: .45; cursor: default; }
@media (min-width: 600px) {
  .wg-page { left: 50%; right: auto; width: 480px; transform: translateX(-50%); border-left: 1px solid var(--border); border-right: 1px solid var(--border);
    box-shadow: 0 0 0 100vmax rgba(0,0,0,.55); }
  .wg-page-go { position: static; margin-top: 20px; }
}
/* 그룹 편집 — [⊖ 삭제] 이름 [✎] ……… [⋮⋮ 끌어서 순서] */
.wg-ed-list { display: flex; flex-direction: column; margin-bottom: 4px; }
.wg-ed-row { display: flex; align-items: center; gap: 6px; min-height: 56px; background: var(--bg2); }
.wg-ed-row.dragging { background: var(--bg3); outline: 1px solid var(--primary); box-shadow: 0 6px 18px rgba(0,0,0,.35); position: relative; z-index: 1; }
.wg-ed-del, .wg-ed-pen, .wg-ed-handle { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: none; border: none; padding: 0; cursor: pointer; }
.wg-ed-del { color: var(--accent); margin-left: -8px; }
.wg-ed-del:disabled { color: var(--text3); opacity: .6; cursor: default; }
.wg-ed-name { min-width: 0; font-size: 1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg-ed-pen { color: var(--text2); width: 40px; }
.wg-ed-pen:hover { color: var(--primary-light); }
.wg-ed-handle { margin-left: auto; margin-right: -8px; color: var(--text3); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.wg-ed-handle:active { cursor: grabbing; color: var(--primary-light); }

.vt-btn {
  background: var(--bg2); border: 1px solid var(--border); color: var(--text3);
  padding: 4px 9px; font-size: .82rem; cursor: pointer; line-height: 1.2;
}
.vt-btn.on { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ── 관심종목 카드 (스파크라인) ── */
.watch-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.w-card {
  background: var(--bg2); border: 1px solid var(--border);
  padding: 11px 12px 6px; text-align: left; cursor: pointer; color: var(--text);
  display: flex; flex-direction: column; gap: 5px;
}
.w-card:hover { border-color: var(--primary); }
.w-card-head { display: flex; align-items: baseline; gap: 6px; }
.w-card-name {
  font-size: .86rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.w-card-code { font-size: .66rem; color: var(--text3); font-weight: 600; margin-left: auto; }
.w-card-row { display: flex; align-items: baseline; gap: 6px; }
.w-card-row .q-price { font-size: .95rem; font-weight: 800; }
.w-card-row .q-chg { flex: 0 0 auto; margin-left: auto; font-size: .76rem; }
.w-card-spark { height: 46px; margin: 2px -4px -2px; }

.spark { width: 100%; height: 100%; display: block; }
.spark .spark-line { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.spark .spark-area { stroke: none; }
.spark.up .spark-line { stroke: var(--stock-up); }
.spark.up .spark-area { fill: var(--stock-up); opacity: .16; }
.spark.down .spark-line { stroke: var(--stock-down); }
.spark.down .spark-area { fill: var(--stock-down); opacity: .16; }

/* ── 차트 자세히 보기 토글 (체크 형식) ── */
.cm-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 2px 0 8px;
  color: var(--text3); font-size: .82rem; font-weight: 700; cursor: pointer;
}
.cm-toggle:hover { color: var(--text2); }
.cm-toggle .cm-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border: 1.5px solid var(--border);
  border-radius: 50%; font-size: .62rem; line-height: 1;
  color: transparent; transition: all .15s;
}
.cm-toggle.on { color: var(--primary-light); }
.cm-toggle.on .cm-check {
  background: var(--primary); border-color: var(--primary); color: #fff;
}

@media (max-width: 420px) {
  .watch-cards { grid-template-columns: 1fr 1fr; }
  .w-card-name { font-size: .8rem; }
  .w-card-row .q-price { font-size: .86rem; }
}

/* 이동평균 범례 (자세히 보기) */
.ma-legend { display: flex; gap: 8px; align-items: center; margin-bottom: 5px; }
.ma-label { font-size: .7rem; color: var(--text3); font-weight: 700; }
.ma-item { font-size: .72rem; font-weight: 800; }

/* 기간 최고/최저 (차트 상단) */
.chart-hilo { display: flex; gap: 10px; align-items: center; margin-bottom: 5px; font-size: .72rem; font-weight: 800; }
.chart-note { margin-bottom: 5px; font-size: .72rem; font-weight: 600; color: var(--text3); }
.hl-hi { color: var(--stock-up); }
.hl-lo { color: var(--stock-down); }

/* 댓글 수정 */
.edited-mark { font-size: .7rem; color: var(--text3); font-weight: 600; }
.comment-edit { margin-top: 6px; }

/* 재테크 공지 배너 */
.notice-banner {
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--bg2); border: 1px solid var(--border); border-left: 3px solid #fbbf24;
  padding: 12px 14px; margin-bottom: 12px;
  font-size: .86rem; line-height: 1.6; color: var(--text);
}
.notice-icon { flex: 0 0 auto; font-size: .95rem; line-height: 1.5; }
.notice-text { flex: 1; word-break: break-word; }

/* ── 종목 로고 ──
   원본이 원형 이미지라 여기만 예외적으로 둥글게 둔다.
   이미지가 없거나 404면 .s-logo-fb(종목명 첫 글자)가 그대로 보인다. */
.s-logo {
  position: relative; flex: 0 0 auto; width: 28px; height: 28px;
  border-radius: 50%; overflow: hidden;
  background: var(--bg3); border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
}
.s-logo.sm { width: 20px; height: 20px; align-self: center; }
.s-logo.lg { width: 32px; height: 32px; }
.s-logo-fb { font-size: .72rem; font-weight: 800; color: var(--text2); line-height: 1; }
.s-logo.sm .s-logo-fb { font-size: .6rem; }
.s-logo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: #fff; opacity: 0; transition: opacity .15s;
}
.s-logo.ok img { opacity: 1; }
.s-logo.ok { border-color: transparent; }
.s-logo.ok .s-logo-fb { visibility: hidden; }

/* 랭킹 행 — 거래대금 + 관심종목 하트 */
.rank-row { padding: 0; gap: 0; }
.rank-main {
  flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0;
  background: none; border: none; color: var(--text);
  padding: 10px 4px 10px 13px; cursor: pointer; text-align: left;
}
.rank-names { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rank-code { font-size: .66rem; color: var(--text3); font-weight: 600; }
.rank-nums { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; }
.rank-nums .q-price { font-size: .84rem; }
.rank-nums .q-chg { flex: none; font-size: .74rem; }
.rank-tv {
  flex: 0 0 auto; width: 84px; text-align: right;
  display: flex; flex-direction: column; gap: 1px;
  font-size: .68rem; color: var(--text2); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* 보조 지표 (거래대금 탭에선 거래량, 거래량 탭에선 거래대금) */
.rank-tv-sub { font-size: .62rem; color: var(--text3); font-weight: 600; }
.fav-btn {
  flex: 0 0 auto; background: none; border: none; border-left: 1px solid var(--border);
  color: var(--text3); font-size: 1.05rem; padding: 10px 13px; cursor: pointer; line-height: 1;
}
.fav-btn:hover { color: var(--stock-up); }
.fav-btn.on { color: var(--stock-up); }
.rank-note {
  padding: 8px 12px; font-size: .68rem; color: var(--text3); line-height: 1.5;
  background: var(--bg2); border: 1px solid var(--border); border-top: none;
}
/* 목록 마지막 행 바로 뒤에 안내가 오면 행은 :last-child 가 아니라 아래 선이 없다 — 안내 위에 선을 그어 나눈다
   (코인처럼 사이에 [더 보기] 버튼이 있으면 그 버튼 선이 대신한다) */
.q-row + .rank-note { border-top: 1px solid var(--border); }

@media (max-width: 420px) {
  .rank-tv { width: 68px; font-size: .64rem; }
  .rank-main { padding-left: 10px; gap: 6px; }
}

/* 관심종목 카드 — 본문 버튼 + 우상단 하트 */
/* min-width:0 — 긴 종목명(nowrap)이 그리드 칸을 밀어내지 않고 말줄임되게 */
.w-card { position: relative; padding: 0; min-width: 0; }
.w-card-head { min-width: 0; align-items: center; }
.w-card-name { min-width: 0; }
.w-card-main {
  width: 100%; background: none; border: none; color: var(--text);
  padding: 11px 12px 6px; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 5px;
}
.w-card .fav-btn {
  position: absolute; top: 4px; right: 4px;
  border: none; padding: 5px 7px; font-size: .95rem; line-height: 1;
  background: none;
}
/* 하트가 종목명을 가리지 않도록 코드 자리를 비워둔다 */
.w-card-code { margin-right: 22px; }

/* 투자자별 매매동향 */
.dt-head, .dt-row { display: grid; grid-template-columns: 46px 1fr 1fr 1fr; align-items: center; }
.dt-head {
  background: var(--bg3); font-size: .68rem; color: var(--text3); font-weight: 700;
  border: 1px solid var(--border); border-bottom: none;
}
.dt-head span { padding: 6px 8px; text-align: right; }
.dt-head span:first-child { text-align: left; }
.dt-row {
  border: 1px solid var(--border); border-bottom: none; background: var(--bg2);
}
.dt-row:last-of-type { border-bottom: 1px solid var(--border); }
.dt-date { padding: 8px; font-size: .72rem; color: var(--text3); font-weight: 700; }
.dt-cell { position: relative; padding: 8px; text-align: right; overflow: hidden; }
.dt-bar { position: absolute; right: 0; top: 4px; bottom: 4px; opacity: .18; }
.dt-bar.up { background: var(--stock-up); }
.dt-bar.down { background: var(--stock-down); }
.dt-v { position: relative; font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.dt-foot, .dt-note {
  background: var(--bg2); border: 1px solid var(--border); border-top: none;
  padding: 7px 10px; text-align: center;
}
.dt-foot { font-size: .74rem; color: var(--text2); font-weight: 700; }
.dt-note { font-size: .66rem; color: var(--text3); }

/* ── 종목 정보 탭 (투자지표 · 실적 · 목표가) ── */
.pf-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-left: 3px solid var(--primary); padding: 13px 14px 12px; margin-bottom: 12px;
}
.pf-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 11px; }
.pf-head h4 { font-size: .92rem; font-weight: 800; letter-spacing: -.2px; }
.pf-hint { margin-left: auto; font-size: .7rem; color: var(--text3); font-weight: 600; }
.pf-k { font-size: .72rem; color: var(--text3); font-weight: 700; }
/* 2열 고정 — 시가총액("1,650조 1,121억") 같은 긴 값이 3열에서는 줄바꿈된다 */
.pf-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
}
.pf-cell { background: var(--bg2); padding: 9px 10px; }
.pf-v { font-size: .88rem; font-weight: 800; margin-top: 3px; font-variant-numeric: tabular-nums; }
.pf-s { font-size: .68rem; color: var(--text3); font-weight: 600; margin-top: 2px; }
.pf-sub-head { font-size: .72rem; color: var(--text3); font-weight: 700; margin: 12px 0 6px; }
.pf-foot {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border);
  font-size: .76rem; color: var(--text2); font-weight: 700;
}
.pf-note { margin-top: 9px; font-size: .66rem; color: var(--text3); line-height: 1.6; }
.pf-summary { margin-top: -2px; padding-left: 15px; }
.pf-summary li { font-size: .8rem; color: var(--text2); line-height: 1.65; margin-bottom: 5px; }
.pf-summary li:last-child { margin-bottom: 0; }

/* 매출 추이 */
.rv-top { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 12px; }
.rv-now { font-size: 1.24rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.rv-q { display: block; font-size: .68rem; color: var(--text3); font-weight: 700; margin-top: 2px; }
.rv-yoy { margin-left: auto; font-size: .84rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.rv-chart { display: flex; gap: 5px; align-items: flex-end; }
.rv-col { flex: 1; min-width: 0; }
.rv-bar-wrap { height: 68px; display: flex; align-items: flex-end; }
.rv-bar { display: block; width: 100%; background: var(--bg3); border: 1px solid var(--border); }
.rv-col.on .rv-bar { background: var(--primary); border-color: var(--primary); }
.rv-col.est .rv-bar { background: transparent; border-style: dashed; border-color: var(--primary-light); }
.rv-col.none .rv-x { opacity: .45; }   /* 아직 발표되지 않은 분기 */
.rv-x {
  margin-top: 5px; font-size: .62rem; color: var(--text3); font-weight: 700;
  text-align: center; white-space: nowrap;
}
.rv-col.on .rv-x { color: var(--text2); }

/* 목표가 */
.tg-op { margin-bottom: 14px; }
.tg-op-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.tg-op-v { margin-left: auto; font-size: .88rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tg-op-v small { font-size: .7rem; color: var(--text3); font-weight: 700; }
.tg-badge { font-size: .7rem; font-weight: 800; padding: 2px 6px; background: var(--bg3); }
.tg-badge.up { background: var(--bull-bg); }
.tg-badge.down { background: var(--bear-bg); }
.tg-gauge { position: relative; height: 6px; background: var(--bg3); border: 1px solid var(--border); }
.tg-gauge i { display: block; height: 100%; background: var(--primary); }
.tg-gauge-x { display: flex; justify-content: space-between; margin-top: 3px; font-size: .62rem; color: var(--text3); font-weight: 700; }
.tg-main { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 8px; }
.tg-col { min-width: 0; }
.tg-col.right { margin-left: auto; text-align: right; }
.tg-target { font-size: 1.3rem; font-weight: 800; color: var(--primary-light); margin-top: 2px; font-variant-numeric: tabular-nums; }
.tg-now { font-size: 1.05rem; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
.tg-bar { position: relative; height: 7px; background: var(--bg3); border: 1px solid var(--border); overflow: hidden; }
.tg-bar i { display: block; height: 100%; background: var(--primary); opacity: .55; }
.tg-bar.over i { background: var(--stock-down); }
.tg-gap { margin-top: 8px; font-size: .78rem; font-weight: 700; color: var(--text2); }
.tg-gap b { font-weight: 800; font-variant-numeric: tabular-nums; }
.tg-gap.up b { color: var(--stock-up); }
.tg-gap.down b { color: var(--stock-down); }

.pf-source {
  margin: -4px 0 4px; padding: 10px 12px; background: var(--bg2);
  border: 1px solid var(--border); font-size: .66rem; color: var(--text3); line-height: 1.6;
}

/* ── 뉴스·공시 탭의 공시 목록 ── */
.nd-seg { margin-bottom: 10px; }
.dc-item { border: 1px solid var(--border); border-bottom: none; background: var(--bg2); }
.dc-item:last-of-type { border-bottom: 1px solid var(--border); }
.dc-head {
  width: 100%; display: grid; grid-template-columns: 1fr 16px; align-items: center;
  gap: 4px 8px; padding: 11px 12px; background: none; border: none;
  color: inherit; text-align: left; cursor: pointer;
}
.dc-head:hover { background: var(--bg3); }
.dc-title { grid-column: 1; font-size: .84rem; font-weight: 700; line-height: 1.45; min-width: 0; }
.dc-meta { grid-column: 1; font-size: .7rem; color: var(--text3); font-weight: 600; }
.dc-caret {
  grid-column: 2; grid-row: 1 / span 2;
  font-size: .8rem; color: var(--text3); text-align: center;
}
.dc-body { border-top: 1px solid var(--border); background: var(--bg); }
.dc-text {
  margin: 0; padding: 12px; max-height: 420px; overflow: auto;
  font-family: inherit; font-size: .78rem; line-height: 1.7; color: var(--text2);
  white-space: pre-wrap; word-break: break-word;
}
.dc-note {
  padding: 8px 12px; font-size: .66rem; color: var(--text3);
  background: var(--bg2); border: 1px solid var(--border); border-top: none;
}

/* 최근 리포트 */
.rs-item {
  display: block; padding: 10px 0; border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
}
.rs-item:first-of-type { border-top: 1px solid var(--border); }
.rs-item:hover { background: var(--bg3); }
.rs-title { font-size: .84rem; font-weight: 700; line-height: 1.45; }
.rs-meta { font-size: .7rem; color: var(--text3); font-weight: 600; margin-top: 3px; }

@media (max-width: 520px) {
  /* 배지·기어는 줄 머리로 올라가 지수 칸 폭을 먹지 않는다 — 글씨만 작게 */
  .index-strip { padding: 8px 10px; gap: 6px; }
  .idx-head { gap: 4px; }
  .idx-chips { padding-top: 6px; gap: 5px; }
  .idx-chip { font-size: .68rem; padding: 3px 7px; }
  .idx-state { font-size: .58rem; padding: 1px 5px; }
  .ix-gear { font-size: .72rem; padding: 1px 5px; }
  .idx-cell { min-width: 88px; }
  .idx-spark { width: 88px; height: 18px; margin-top: 3px; }
  .idx-price { font-size: .94rem; }
  .idx-name { font-size: .66rem; }
  .idx-chg { font-size: .68rem; }
}

@media (max-width: 380px) {
  .rv-x { font-size: .58rem; }
  .sd-tab { font-size: .76rem; padding: 8px 2px; }
}

/* AI 생성 브리핑 배지 */
.briefing-badge.ai { background: var(--primary-light); color: #0b1013; }

/* ── 터치 영역 ──
 * 보이는 크기는 그대로 두고 누르는 면적만 44px 이상으로 넓힌다 (투명한 ::before 가 버튼의 일부로 눌린다).
 * 옆 버튼과 겹치지 않도록 가로는 간격의 절반까지만 넓힌다. */
.comment-action, .sd-back, .vt-btn, .ix-gear, .share-btn { position: relative; }
.comment-action::before, .sd-back::before, .vt-btn::before, .ix-gear::before, .share-btn::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 100%; height: max(100%, 44px); transform: translate(-50%, -50%);
}
.comment-action::before { width: max(calc(100% + 16px), 44px); }   /* 간격 16px 를 반씩 — 짧은 버튼(수정·삭제)도 44px */
.sd-back::before, .ix-gear::before, .share-btn::before { width: max(100%, 44px); }
.view-toggle { gap: 6px; }
.vt-btn { min-width: 40px; }
.vt-btn::before { width: calc(100% + 6px); }                   /* 두 버튼 사이 6px 를 반씩 나눠 44px */
.sd-back { min-height: 32px; white-space: nowrap; }

/* ── 공유 ── */
.share-btn {
  background: none; border: 1px solid var(--border); color: var(--text2);
  font-size: .76rem; font-weight: 700; padding: 4px 10px; cursor: pointer; font-family: inherit;
}
.share-btn:hover { border-color: var(--primary); color: var(--text); }
.share-btn.sd-share { margin-left: auto; background: var(--bg2); font-size: .95rem; padding: 5px 11px; line-height: 1; }
.sd-share + .fav-btn.sd-fav { margin-left: 0; }
.app-toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 70; max-width: min(92vw, 560px); background: var(--bg3); color: var(--text);
  border: 1px solid var(--border); border-left: 4px solid var(--primary);
  padding: 11px 16px; font-size: .84rem; font-weight: 700; line-height: 1.5;
  box-shadow: 4px 4px 0 rgba(0,0,0,.35); transition: opacity .35s, transform .35s;
}
.app-toast.out { opacity: 0; transform: translate(-50%, 8px); }

/* 딥링크·"언급된 시황"으로 연 브리핑 — 잠깐 테두리로 짚어 준다 */
.briefing-card.focus { animation: bcFocus 1.8s ease-out; }
@keyframes bcFocus { 0%, 40% { box-shadow: 0 0 0 2px var(--primary-light); } 100% { box-shadow: 0 0 0 2px transparent; } }

/* ── 종목 상세: 이 종목이 언급된 시황 ── */
.sd-briefings { margin-top: 14px; border: 1px solid var(--border); border-left: 3px solid var(--primary); background: var(--bg2); }
.sb-head { padding: 9px 13px 6px; font-size: .78rem; font-weight: 800; color: var(--text2); }
.sb-item {
  display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; border-top: 1px solid var(--border); color: var(--text);
  padding: 11px 13px; cursor: pointer; font-family: inherit;
}
.sb-item:hover { background: var(--bg3); }
.sb-title { flex: 1; min-width: 0; font-size: .84rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-date { flex: 0 0 auto; font-size: .7rem; color: var(--text3); font-weight: 600; }

/* 목록 위 작은 안내 (일시적 갱신 실패 — 이전 목록은 그대로 둔다) */
.list-note {
  padding: 6px 12px; font-size: .7rem; color: var(--text3); font-weight: 600;
  background: var(--bg3); border: 1px solid var(--border); border-bottom: none;
}

@media (prefers-reduced-motion: reduce) {
  .briefing-card.focus { animation: none; box-shadow: 0 0 0 2px var(--primary-light); }
  .app-toast { transition: none; }
}

/* ── DT 회원 보유 현황 (모의투자 집계) ── */
/* 종목 상세: 가격·지표 바로 아래 한 장 */
.cw-card {
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--bg2); border: 1px solid var(--border); border-left: 3px solid var(--primary);
  padding: 10px 13px; margin: -2px 0 14px;
}
.cw-icon { flex: 0 0 auto; font-size: .95rem; line-height: 1.4; }
.cw-body { flex: 1; min-width: 0; }
.cw-main { font-size: .82rem; font-weight: 700; line-height: 1.5; color: var(--text); font-variant-numeric: tabular-nums; }
.cw-main b { font-weight: 800; }
.cw-sub { font-size: .74rem; font-weight: 600; line-height: 1.5; color: var(--text2); margin-top: 2px; font-variant-numeric: tabular-nums; }
/* 항목 단위로만 줄을 바꾼다 ("평균 수익률 +4.3%" 가 둘로 쪼개지지 않게) */
.cw-main > span:not(.cw-sep), .cw-sub > span:not(.cw-sep) { white-space: nowrap; }
.cw-sep { color: var(--text3); margin: 0 5px; }
/* 3명 미만 — 한 줄로 흐리게 */
.cw-card.few { border-left-color: var(--border); padding-top: 8px; padding-bottom: 8px; }
.cw-card.few .cw-main { color: var(--text3); font-weight: 600; font-size: .78rem; }

/* 시세 홈: 👥 DT 회원 픽 — 행은 랭킹(rank-row)을 그대로 쓰고 보유 인원 칸만 더한다 */
.cw-count {
  flex: 0 0 auto; min-width: 40px; text-align: right;
  font-size: .76rem; font-weight: 800; color: var(--primary-light);
  font-variant-numeric: tabular-nums;
}
.cw-seg { margin-bottom: 10px; }
/* 세그먼트는 보이는 높이 그대로, 누르는 면적만 44px (아래 목록과 겹치지 않게 margin 10px 안쪽까지만) */
.cw-seg .seg { position: relative; min-height: 34px; }
.cw-seg .seg::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: max(100%, 44px); transform: translateY(-50%);
}
@media (max-width: 420px) {
  .cw-count { min-width: 34px; font-size: .72rem; }
}

/* ── 코인 (업비트 원화 마켓) ── */
.cn-badge {
  display: inline-block; margin-left: 5px; padding: 0 4px; vertical-align: 1px;
  font-size: .6rem; font-weight: 800; line-height: 1.5; border: 1px solid currentColor;
}
.cn-badge.warn { color: var(--stock-up); }
.cn-badge.caution { color: #f59e0b; }
/* 전체 보기 — 목록에 붙여 두되 위에 선을 그어 마지막 행과 가른다 */
.cn-more {
  display: block; width: 100%; padding: 10px; cursor: pointer;
  background: var(--bg2); border: 1px solid var(--border);
  color: var(--text2); font-size: .8rem; font-weight: 700;
}
.cn-more:hover { color: var(--text); background: var(--bg3); }
.cn-empty-sub { font-size: .76rem; }
.cn-alert {
  margin: 8px 0 4px; padding: 8px 11px; font-size: .78rem; line-height: 1.55; color: var(--text2);
  background: rgba(245,158,11,.1); border-left: 3px solid #f59e0b;
}
.cn-chart-note { margin-top: 6px; font-size: .68rem; color: var(--text3); text-align: right; }
/* 차트 아래 안내 줄과 붙어 보이지 않게 */
.ux-info { margin-top: 18px; }

/* 미국 주식 — 프리·애프터마켓 가격 줄 (us.js) */
.us-over { margin-top: 4px; font-size: .78rem; font-weight: 700; color: var(--text2); }
.us-over-k { font-size: .66rem; font-weight: 800; color: var(--text3); border: 1px solid var(--border); padding: 0 4px; margin-right: 2px; }
.us-over-t { font-size: .68rem; font-weight: 600; color: var(--text3); }
.cn-tf { flex-wrap: wrap; }
.cn-tf .tf-btn { flex: 1 0 12%; }
.idx-cell.coin { cursor: pointer; }
.idx-cell.coin:hover .idx-name { color: var(--text2); }

/* 호가 — 코인 가격은 자릿수가 커서 가격 칸을 넓히고 등락률을 아래에 붙인다 */
#cxBook .bk-head, #cxBook .bk-row { grid-template-columns: 1fr 118px 1fr; }
#cxBook .bk-price { font-variant-numeric: tabular-nums; line-height: 1.25; }
#cxBook .bk-price.up { color: var(--stock-up); }
#cxBook .bk-price.down { color: var(--stock-down); }
#cxBook .bk-price em { display: block; font-style: normal; font-size: .62rem; font-weight: 600; opacity: .85; }
#cxBook .bk-price.cn-now { outline: 2px solid var(--text); outline-offset: -2px; }
#cxBook .bk-qty b { font-variant-numeric: tabular-nums; }

/* 체결 */
.cn-tr-head, .cn-tr-row {
  display: grid; grid-template-columns: 72px 1fr 1fr 64px; gap: 6px; align-items: center;
  padding: 6px 10px; font-variant-numeric: tabular-nums;
}
.cn-tr-head {
  background: var(--bg3); border: 1px solid var(--border);
  font-size: .68rem; color: var(--text3); font-weight: 700;
}
.cn-tr-head span:not(:first-child), .cn-tr-row span:not(:first-child) { text-align: right; }
.cn-tr-row {
  background: var(--bg2); border: 1px solid var(--border); border-top: none;
  font-size: .78rem; font-weight: 700;
}
.cn-tr-time { color: var(--text3); font-weight: 600; font-size: .72rem; }
.cn-tr-amt { color: var(--text2); font-size: .72rem; }
#cxTrades .bk-note { border: 1px solid var(--border); border-top: none; background: var(--bg2); }

/* 한글 제목은 어절 단위로 줄바꿈 (넘칠 때만 단어 안에서 끊는다) */
h1, h2, h3, h4 { word-break: keep-all; overflow-wrap: break-word; }

/* ===== 재테크 알림 설정 (🔔) ===== */
.nt-wrap { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-end; justify-content: center; }
.nt-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.nt-sheet { position: relative; width: min(520px, 100%); max-height: 88vh; overflow-y: auto; background: var(--bg2);
  border: 1px solid var(--border); border-top: 3px solid var(--primary); padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
@media (min-width: 600px) { .nt-wrap { align-items: center; } }
.nt-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.nt-head h3 { margin: 0; font-size: 1.02rem; font-weight: 800; }
.nt-loading { padding: 24px 0; text-align: center; color: var(--text3); font-size: .85rem; }
.nt-dev { display: flex; flex-direction: column; gap: 10px; padding: 12px; margin-bottom: 12px; background: var(--bg);
  border: 1px solid var(--border); font-size: .82rem; font-weight: 600; color: var(--text2); line-height: 1.5; }
.nt-dev.on { flex-direction: row; align-items: center; gap: 8px; color: var(--text); border-left: 3px solid var(--driver, #4ade80); }
.nt-dev.warn { border-left: 3px solid var(--warning, #fbbf24); }
.nt-dot { width: 7px; height: 7px; background: var(--driver, #4ade80); flex-shrink: 0; }
.nt-enable { width: 100%; }
.nt-list { border: 1px solid var(--border); }
.nt-row { display: flex; align-items: center; gap: 12px; padding: 12px; cursor: pointer; position: relative; }
.nt-row + .nt-row { border-top: 1px solid var(--border); }
.nt-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nt-txt b { font-size: .88rem; font-weight: 700; color: var(--text); }
.nt-txt em { font-style: normal; font-size: .74rem; color: var(--text3); font-weight: 600; }
/* 스위치 — 각진 토글 (실제 체크박스는 접근성용으로 겹쳐 둔다) */
.nt-sw { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nt-switch { flex-shrink: 0; width: 42px; height: 22px; background: var(--bg); border: 1px solid var(--border); position: relative; transition: background .15s; }
.nt-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--text3); transition: transform .15s, background .15s; }
.nt-sw:checked + .nt-switch { background: rgba(var(--primary-rgb), .18); border-color: var(--primary); }
.nt-sw:checked + .nt-switch::after { transform: translateX(20px); background: var(--primary); }
.nt-sw:focus-visible + .nt-switch { outline: 2px solid var(--primary); outline-offset: 2px; }
.nt-sw:disabled + .nt-switch { opacity: .5; }
.nt-note { margin: 10px 2px 0; font-size: .74rem; color: var(--text3); line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .nt-switch, .nt-switch::after { transition: none; } }
.nt-on-txt { flex: 1; }

/* 게스트(비회원)가 연 시세 탭 — 시세 화면을 숨기고 로그인 안내만 (app.js showMarketLock) */
#tab-market.guest-locked > :not(.guest-lock) { display: none !important; }
#tab-market .guest-lock { margin-top: 16px; }