html { scrollbar-gutter: stable; overflow-y: scroll; }   /* 스크롤바 공간 항상 확보(펼침/접힘 때 좌우 밀림 방지) — overflow-y는 scrollbar-gutter 미지원 브라우저(구형 Safari) 폴백 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #f2f4f6;
  --card: #ffffff;
  --line: #e5e8eb;
  --text: #191f28;
  --sub: #8b95a1;
  --blue: #3182f6;
  --slate: #333b45; --slate-h: #434c58;   /* 뉴트럴 액션(버튼·활성토글) — 매수/매도 아닌 모든 것 */
  --gray: #4e5968;
  --red: #f04452;
  --redbg: #fdeef0;
  --bluebg: #eaf2fe;
  /* 카드 깊이(프리미엄 라이트) — 순백 카드가 배경에서 살짝 떠 보이게. 쿨톤(슬레이트) 그림자 */
  --shadow-card: 0 1px 2px rgba(20,30,55,.04), 0 8px 22px rgba(20,30,55,.05);
  --shadow-card-hov: 0 2px 6px rgba(20,30,55,.06), 0 14px 32px rgba(20,30,55,.09);   /* hover 시 살짝 더 깊게 */
  color-scheme: light;
}
/* 다크모드 — 토스 다크 느낌의 차분한 네이비-그레이 */
[data-theme="dark"] {
  --bg: #101418;
  --card: #1b2027;
  --line: #2a313a;
  --text: #e9edf2;
  --sub: #7d8590;
  --blue: #4593fc;
  --slate: #3a434f; --slate-h: #454f5c;
  --gray: #aab4c0;
  --red: #f45865;
  --redbg: #3a2226;
  --bluebg: #1d2c42;
  --shadow-card: none;   /* 다크는 테두리가 깊이를 담당(로그인 히어로와 동일 결) */
  --shadow-card-hov: 0 8px 22px rgba(0,0,0,.35);   /* 다크 hover는 은은한 검정 그림자로 리프트 표현 */
  color-scheme: dark;
}
[data-theme="dark"] body { background: var(--bg); color: var(--text); }
/* 폼 요소 UA 기본 흰 배경 차단 — :where()로 명시도 0 유지(클래스 규칙이 항상 이김) */
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"])),
textarea, select { background: var(--card); color: var(--text); }
[data-theme="dark"] .sort-tabs button.active { background: #3a434f; color: var(--text); }
[data-theme="dark"] .st-badge.warn { color: #e6b04a; background: #3d3014; }
[data-theme="dark"] .st-badge.hot { color: #ff9a66; background: #40261a; }
[data-theme="dark"] .chart-spinner { border-color: #2a313a; border-top-color: #7d8590; }
[data-theme="dark"] .ql .ob2-bar { background: #1d2c42; }
[data-theme="dark"] .qr .ob2-bar { background: #3a2226; }
[data-theme="dark"] .submit:disabled { background: #39414c !important; color: #7d8590; }
[data-theme="dark"] .tgl { background: #3a424d; }
[data-theme="dark"] .cal-kind.exdiv { background: #1d2c42; }
[data-theme="dark"] .cal-kind.div { background: #14332a; }
[data-theme="dark"] .auth-page { background: linear-gradient(160deg, #161c24 0%, #101418 60%); }
[data-theme="dark"] .pod-col.p1 .pod-bar { background: linear-gradient(180deg, #332b12, #1b2027);
  box-shadow: 0 12px 28px rgba(250,176,5,.10); }
[data-theme="dark"] .why-card { background: linear-gradient(180deg, #1e2733, var(--card)); }

/* ===== 코스피200 선물 모드 — body.deriv-mode 에서 주식 UI 숨기고 선물 UI 표시 ===== */
#derivView, #derivOrder, #derivList { display: none; }
body.deriv-mode .chart-panel > *:not(#derivView) { display: none !important; }
body.deriv-mode .order-panel > *:not(#derivOrder) { display: none !important; }
body.deriv-mode #derivView, body.deriv-mode #derivOrder, body.deriv-mode #derivList { display: block; }
/* 선물 목록(7행 고정)의 로드 완료 높이를 미리 예약 → "불러오는 중…" 동안 좌측이 줄었다 커지는 점프 방지.
   선물 모드에서만 — 옵션 모드는 내용이 짧아 예약하면 '지금 뜨는 산업'이 아래로 밀림(.deriv-opt 제외). */
body.deriv-mode:not(.deriv-opt) #derivList { min-height: 529px; }
/* 로딩/점검/실패 안내(#derivList 직속 .empty)는 예약 공간 중앙에 — 좌측 상단에 붙지 않게.
   min-height=로드 후 목록 영역(서브탭+7행+페이저)과 동일 → 아래 안내 문구가 로딩·로드 때 같은 위치에(안 밀림). */
body.deriv-mode #derivList > .empty { min-height: 485px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; line-height: 1.6; }
body.deriv-mode .sort-tabs, body.deriv-mode #scrPanel,
body.deriv-mode .stock-table, body.deriv-mode #listPager { display: none; }
/* 파생 모드: '다가오는 일정'은 항상 숨김. '모투 소식'은 옵션 서브탭(deriv-opt)에서만 노출
   — 선물 서브탭은 목록이 길어 여백이 없고, 옵션 서브탭 옆 빈 공간만 채움. */
body.deriv-mode .cal-h, body.deriv-mode #calendar { display: none; }
body.deriv-mode:not(.deriv-opt) .news-h, body.deriv-mode:not(.deriv-opt) #news { display: none; }
/* 좌측 월물 카드 */
.dv-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 10px; border-radius: 12px; cursor: default; }
.dv-row.on { background: var(--bluebg); }
.dv-row-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dv-row-l b { font-size: 13.5px; }
.dv-row-sub { font-size: 11.5px; color: var(--sub); }
.dv-row-r { text-align: right; display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }
.dv-row-r b { font-size: 14px; }
.dv-row-r span { font-size: 12px; font-weight: 700; }
.dv-row-note { font-size: 11.5px; color: var(--sub); line-height: 1.6; padding: 8px 10px 0; word-break: keep-all; overflow-wrap: break-word; }
.dv-stale { color: #b8860b; background: #fdf6e3; border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; }
[data-theme="dark"] .dv-stale { color: #e2b64d; background: #33301f; }

/* 시세 점검 전역 배너 — 헤더 바로 아래, 복구되면 자동으로 사라짐 */
.src-banner { background: #fdf6e3; color: #8a6d1a; font-size: 12.5px; font-weight: 600;
              text-align: center; padding: 8px 14px; line-height: 1.5;
              border-bottom: 1px solid #f0e6c8; }
[data-theme="dark"] .src-banner { background: #33301f; color: #e2b64d; border-bottom-color: #4a4429; }
/* 종목 헤더 세션 라벨 옆 "시세 점검중" 칩 + 차트 자리 점검 안내 */
.sess-maint { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 10px;
              font-size: 10.5px; font-weight: 700; background: #fdf6e3; color: #b8860b; }
[data-theme="dark"] .sess-maint { background: #33301f; color: #e2b64d; }
#chartMaint .skel-msg { text-align: center; line-height: 1.8; }
#chartMaint small { color: var(--sub); font-weight: 500; font-size: 12px; }
/* 중앙 선물 뷰 */
.dv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 2px 2px 10px; }
.dv-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dv-nm { font-size: 19px; font-weight: 800; }
.dv-sub { font-size: 12px; color: var(--sub); }
.dv-price-box { text-align: right; font-variant-numeric: tabular-nums; }
.dv-price { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
.dv-change { font-size: 13px; font-weight: 700; }
.dv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 10px; }
.dv-stats-left { grid-template-columns: repeat(2, 1fr); margin: 10px 0; min-height: 159px; }
/* 좌측 컬럼은 좁아서 2열. min-height=6개(3행) 채운 높이 예약 → 시세 채워지기 전에도 설명글이 최종 위치에(안 밀림) */
/* 스탯이 아직 안 채워졌으면(월물 전환 등) 그 빈 공간에 로딩 문구 — ::before는 :empty 판정에서 제외됨 */
.dv-stats-left:empty { display: flex; align-items: center; justify-content: center; }
.dv-stats-left:empty::before { content: "옵션 시세를 불러오는 중…"; color: var(--sub); font-size: 13px; }
/* 옵션 모드: 옵션판을 그래프 아래에 띄움 → 그래프와 구분되게 위 여백 */
body.deriv-opt #dvChain { margin-top: 14px; }
.dv-stat { background: var(--bg); border-radius: 10px; padding: 8px 11px; display: flex; flex-direction: column; gap: 2px; }
.dv-stat span { font-size: 11px; color: var(--sub); }
.dv-stat b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.dv-range { display: flex; gap: 5px; margin-bottom: 8px; }
.dv-range button { border: 1px solid var(--line); background: var(--card); color: var(--sub); font-size: 12.5px;
  font-weight: 700; border-radius: 8px; padding: 6px 11px; cursor: pointer; flex: 1; white-space: nowrap; }
.dv-range button.active { background: var(--slate); color: #fff; border-color: var(--slate); }
.dv-chart-box { position: relative; }   /* 로딩 스켈레톤(.chart-skel) 기준 컨테이너 */
.dv-chart { width: 100%; height: 420px; }
.dv-note { margin-top: 10px; font-size: 12px; color: var(--sub); line-height: 1.6;
  background: var(--bg); border-radius: 10px; padding: 10px 12px; white-space: pre-line; }
/* 우측 선물 주문 */
.do-h { margin-bottom: 12px; }
.do-info { font-size: 12px; color: var(--sub); line-height: 1.7; margin: -4px 0 10px; }
.do-info b { color: var(--text); font-variant-numeric: tabular-nums; }
.do-btns { display: flex; gap: 8px; margin-bottom: 8px; }
.do-btns button, .do-close { flex: 1; padding: 12px; border: none; border-radius: 12px; color: #fff;
  font-size: 14px; font-weight: 700; cursor: pointer; }
.do-long { background: var(--red); }
.do-short { background: var(--slate); }
.do-close { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line); }
.do-close:hover { background: var(--line); }
.dv-pos { border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; margin-bottom: 8px; }
.dv-pos.long { border-color: var(--red); }
.dv-pos.short { border-color: var(--blue); }
.dv-pos-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.dv-pos-head b { font-size: 14px; }
.dv-pos-head span { font-size: 12px; color: var(--sub); font-variant-numeric: tabular-nums; }
.dv-pos-row { display: flex; justify-content: space-between; font-size: 12.5px; line-height: 1.9; font-variant-numeric: tabular-nums; }
.dv-pos-row span { color: var(--sub); }
.dv-mc { margin-top: 7px; font-size: 12px; font-weight: 700; color: var(--red);
  background: var(--redbg); border-radius: 8px; padding: 7px 10px; line-height: 1.5; }
.dv-realized { font-size: 12px; color: var(--sub); padding: 2px 2px 0; }
.dv-realized b { font-variant-numeric: tabular-nums; }
.dv-pos { cursor: pointer; }
/* 포지션 없을 때 안내문구 — 위쪽으로 살짝 */
#dvPos .empty { padding: 0 0 6px; }
/* 선물 목록 페이지네이션 */
.dv-pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px 0 2px;
            font-variant-numeric: tabular-nums; }
.dv-pg { width: 28px; height: 28px; border: 1px solid var(--line); background: var(--card); border-radius: 8px;
         cursor: pointer; font-size: 15px; color: var(--text); }
.dv-pg:disabled { opacity: .35; cursor: default; }
.dv-pg:not(:disabled):hover { background: var(--bg); }
.dv-pg-ind { font-size: 13px; color: var(--sub); min-width: 40px; text-align: center; }
.dv-pos.opt { border-color: #b98900; }
.dv-need-sub { color: var(--red); font-weight: 700; }
/* 좌측 서브탭(선물/옵션) + 만기 칩 */
.dv-subtabs { display: flex; gap: 5px; margin-bottom: 10px; }
.dv-subtabs button { flex: 1; padding: 8px; border: 1px solid var(--line); background: var(--card);
  color: var(--sub); font-size: 13px; font-weight: 700; border-radius: 10px; cursor: pointer; }
.dv-subtabs button.active { border-color: var(--blue); color: var(--blue); background: var(--bluebg); }
.dv-ym { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.dv-ym button { padding: 6px 12px; border: 1px solid var(--line); background: var(--card); color: var(--sub);
  font-size: 12px; font-weight: 700; border-radius: 14px; cursor: pointer; }
.dv-ym button.active { border-color: var(--blue); color: var(--blue); background: var(--bluebg); }
/* 옵션판 */
#dvChain { display: none; margin-bottom: 12px; }
.oc-head { font-size: 14px; font-weight: 800; margin-bottom: 8px; }
.oc-sub { font-size: 11.5px; color: var(--sub); font-weight: 600; margin-left: 6px; }
.oc-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.oc-table th { font-size: 11.5px; color: var(--sub); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.oc-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: center; font-size: 13px; }
.oc-k { font-weight: 800; background: var(--bg); width: 90px; }
.oc-c { cursor: pointer; width: calc(50% - 45px); }
.oc-c:hover { background: var(--bg); }
.oc-c.on { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 6px; }
.oc-c b { margin-right: 7px; }
.oc-c span { font-size: 11.5px; font-weight: 700; }
.oc-atm .oc-k { background: var(--bluebg); color: var(--blue); }
.oc-c.call b { color: var(--red); }
.oc-c.put b { color: var(--blue); }
[data-theme="dark"] .draw-toolbar .dt-c[data-c="#191f28"] { background: #e9edf2 !important; color: #e9edf2 !important; }
[data-theme="dark"] .search-box input:focus { background: var(--card); }
[data-theme="dark"] .idx-feat, [data-theme="dark"] .idx-mini { border-color: var(--line); }
[data-theme="dark"] .hm-tile { border-color: var(--card); }
[data-theme="dark"] .tour-overlay .tour-spot { box-shadow: 0 0 0 9999px rgba(0,0,0,.72); }
body {
  font-family: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  min-height: 100vh; display: flex; flex-direction: column;   /* sticky footer: 콘텐츠 짧아도 푸터가 화면 바닥에 */
}
/* 메인 콘텐츠가 남는 높이를 차지해 푸터를 바닥으로 밀어냄 */
.layout, .rank-wrap, .my-layout, .policy-wrap { flex: 1 0 auto; }
.topbar {
  display: flex; align-items: center; justify-content: flex-start;
  padding: 12px 20px; background: var(--card); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.logo { font-size: 18px; font-weight: 800; }
.topbar { box-shadow: 0 1px 0 rgba(0,0,0,.02); }
/* 브랜드 로고 */
.brand { display: flex; align-items: center; gap: 6px; text-decoration: none; margin-right: 8px; }
.brand-mark { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, #3182f6, #12b886);
  color: #fff; font-weight: 800; font-size: 17px; display: flex; align-items: center; justify-content: center; }
img.brand-mark { background: none; object-fit: contain; display: block; }   /* SVG 로고일 때 */
.brand-mark.cube-mark { width: 60px; height: 60px; background: none; border-radius: 0; margin: -11px -2px -11px 0; }   /* 3D 큐브 로고(세로 음수마진=헤더 높이 유지, 우측 살짝 당김) */
.brand-mark.cube-mark canvas { width: 100% !important; height: 100% !important; display: block; }
/* 정적 클로버 로고: 빨강1.png 를 마스크로 모양만 따고, CSS 그라데이션으로 명암을 확 살림(코드로 튜닝 가능) */
.brand-mark.brand-clover { width: 34px; height: 34px; border-radius: 0; margin-left: 5px;
  background: linear-gradient(158deg, #FF7385 0%, #F0324F 34%, #C0173C 68%, #86082C 100%);
  -webkit-mask: url(/cube/clover-jx.png) center / contain no-repeat; mask: url(/cube/clover-jx.png) center / contain no-repeat; }
.brand-name { font-size: 22px; font-weight: 900; letter-spacing: -0.7px;
  background: linear-gradient(135deg, #F04E62, #C01F3A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav-link { color: var(--sub); font-size: 14px; font-weight: 600; text-decoration: none; padding: 6px 4px; }
.nav-link:hover { color: var(--text); }
/* 헤더 검색 */
.search-box { position: relative; margin-left: 60px; width: 380px; max-width: 34vw; }   /* 로고 옆, 살짝 우측. position:relative=결과 드롭다운(absolute)의 기준점(없으면 헤더 전체 폭으로 퍼짐) */
.search-box input { width: 100%; padding: 9px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: 13px; outline: none; }
.search-box input:focus { background: var(--card); border-color: var(--blue); }
.search-results { position: absolute; top: 116%; left: 0; right: 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.14); max-height: 348px; overflow-y: auto; z-index: 60; display: none; }
.search-results.open { display: block; }
.search-results::-webkit-scrollbar { width: 8px; }
.search-results::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 8px; }
.sr-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; font-size: 14px; }
.sr-row:hover { background: var(--bg); }
.sr-name { font-weight: 600; }
.sr-delisted { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 6px; font-size: 10.5px;
  font-weight: 700; vertical-align: middle; background: var(--redbg); color: var(--red); }
.sr-tag { font-size: 11px; color: var(--sub); margin-left: auto; font-variant-numeric: tabular-nums; }
/* 종목 아이콘 (로고 대체 아바타) */
.ticon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 50%; color: #fff; font-size: 11px; font-weight: 800; flex-shrink: 0; margin-right: 8px; vertical-align: middle; }
.ticon.lg { width: 40px; height: 40px; font-size: 17px; border-radius: 13px; margin-right: 12px; }
.ticon .ti-logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; border-radius: inherit; }
.ticon .ti-flag { position: absolute; right: -3px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%;
  object-fit: cover; border: 1.5px solid #fff; background: #fff; box-shadow: 0 0 1px rgba(0,0,0,.3); }
.ticon.lg .ti-flag { width: 17px; height: 17px; right: -3px; bottom: -3px; border-width: 2px; }
.top-right { display: flex; align-items: center; gap: 16px; margin-left: auto; }   /* 우측 끝으로 */
.acc-summary { font-size: 13px; color: var(--sub); }
.acc-summary b { color: var(--text); }
#authArea { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.auth-btn { padding: 7px 15px; background: #f4f5f7; color: #4e5968; border: 1px solid var(--line); border-radius: 9px; font-weight: 700; cursor: pointer; font-size: 13px; text-decoration: none; transition: background .15s, border-color .15s, color .15s, transform .08s; }
.auth-btn:hover { background: #eceef1; border-color: #d5dae1; color: #191f28; }
.auth-btn:active { transform: translateY(1px); }
[data-theme="dark"] .auth-btn { background: #232a33; color: #cdd3da; border-color: #333b45; }   /* 다크: 은은한 elevated pill(강렬한 흰색 반전 대신) */
[data-theme="dark"] .auth-btn:hover { background: #2c343f; border-color: #414b58; color: #eef2f7; }
.nick { font-weight: 700; }
.logout-btn { background: none; border: none; color: var(--sub); cursor: pointer; font-size: 13px; text-decoration: underline; }

/* 로그인/회원가입 페이지 */
.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh;
  background: linear-gradient(160deg, #eef3fb 0%, #f2f4f6 60%); padding: 20px; }
.auth-topbar { position: fixed; top: 18px; left: 20px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-size: 13px; font-weight: 600;
  text-decoration: none; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.back-link:hover { background: var(--bg); }
.auth-card { background: var(--card); border-radius: 24px; padding: 30px 36px; width: 400px; max-width: 92vw;
  box-shadow: 0 24px 70px rgba(49,130,246,.12), 0 2px 8px rgba(0,0,0,.04); }
.modal-logo { display: block; font-size: 26px; font-weight: 800; text-align: center; text-decoration: none; color: var(--text); }
.auth-subtitle { text-align: center; color: var(--sub); font-size: 13px; margin: 8px 0 26px; }
.auth-ok { color: var(--text); font-size: 14px; line-height: 1.7; margin-bottom: 8px; text-align: center; }
/* 게스트 진입(시장 구경): 인사담당자가 로그인 없이 들어오는 주 동선 → 브랜드 빨강 pill로 눈에 띄게 */
.auth-back { display: flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box;
  width: 100%; margin-top: 16px; padding: 11px 16px; border-radius: 12px;
  border: 1px solid rgba(240,68,82,.4); background: transparent;
  color: var(--red); font-size: 13.5px; font-weight: 600; text-decoration: none;
  transition: background .15s, border-color .15s; }
.auth-back:hover { background: var(--redbg); border-color: var(--red); }
.auth-back-arw { transition: transform .15s; }
.auth-back:hover .auth-back-arw { transform: translateX(3px); }
.modal-tabs { display: flex; gap: 6px; margin-bottom: 16px; background: var(--bg); padding: 4px; border-radius: 12px; }
.auth-error:empty, .auth-ok:empty { min-height: 0; margin: 0; }   /* 비었을 때 공간 차지 안 함 → 탭·입력칸 사이 여백 제거 */
/* 로그인 에러 슬롯: 체크박스↔버튼 사이에 미리 한 줄 예약 → 에러 떠도 레이아웃 안 튐 */
.auth-split .remember { margin-bottom: 8px; }
.login-err { min-height: 16px; margin: 0 2px 8px; font-size: 13px; font-weight: 600; color: var(--red);
  text-align: left; line-height: 1.3; }
.modal-tabs button { flex: 1; padding: 11px; border: none; background: transparent; border-radius: 9px; font-weight: 700; font-size: 14px; color: var(--sub); cursor: pointer; transition: all .15s; }
.modal-tabs button.active { background: #fff; color: var(--blue); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.auth-card input { display: block; width: 100%; height: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; font-size: 15px; background: #fff; transition: border-color .15s; }
.auth-card input::placeholder { color: #b0b8c1; }
.auth-card input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px var(--bluebg); }
.auth-card input[type="checkbox"] { width: 16px; height: 16px; padding: 0; margin: 0; border-radius: 4px; box-shadow: none; }
.remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sub); margin: 2px 0 16px; cursor: pointer; }
.remember input:focus { box-shadow: none; }
.auth-submit { display: flex; align-items: center; justify-content: center; width: 100%; height: 54px; background: var(--slate); color: #fff; border: none; border-radius: 14px; font-size: 16px; font-weight: 700; cursor: pointer; margin-top: 6px; text-decoration: none; transition: filter .15s; }
.auth-submit:hover { filter: brightness(1.05); }
/* 회원가입: 시작 시드머니 선택 */
.su-seed-label { font-size: 13px; color: var(--sub); font-weight: 600; margin: 4px 0 8px; }
.su-seed { display: flex; gap: 8px; margin-bottom: 4px; }
.su-seed-opt { flex: 1; padding: 12px 6px; border: 1.5px solid var(--line); border-radius: 12px;
  background: #fff; font-size: 14px; font-weight: 700; color: var(--sub); cursor: pointer; transition: all .15s; }
.su-seed-opt:hover { border-color: var(--blue); }
.su-seed-opt.active { border-color: var(--blue); background: var(--bluebg); color: var(--blue); }

/* ===== 로그인/회원가입 좌우 분할 (auth.html 전용) — 왼쪽 브랜드 히어로+큐브, 오른쪽 폼 ===== */
.auth-split { min-height: 100vh; display: flex; flex-direction: row; }   /* 전역 body flex-direction:column 오버라이드 */
/* 다크 브랜드 히어로: 근블랙 + 미세 그리드 + 우측 회전 빨간 큐브 */
.auth-hero { flex: 1.05; position: relative; display: flex; flex-direction: column; justify-content: center;
  padding: 56px clamp(40px, 6vw, 84px); overflow: hidden; color: #eef1f5; background: #0d0f14; }
.auth-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(125% 95% at 28% 42%, #000 52%, transparent 100%);
          mask-image: radial-gradient(125% 95% at 28% 42%, #000 52%, transparent 100%); }
.auth-hero-cube { position: absolute; right: -3%; top: 50%; transform: translateY(-50%);
  width: 48%; max-width: 480px; aspect-ratio: 1 / 1; z-index: 0; pointer-events: none; }
.auth-hero-cube canvas { width: 100% !important; height: 100% !important; display: block;
  animation: authCubeIn .55s ease both; }   /* 캔버스 삽입 시 부드럽게 등장(남는 미세 로딩 틈 완화) */
@keyframes authCubeIn { from { opacity: 0; } to { opacity: 1; } }
.auth-hero-body { position: relative; z-index: 1; max-width: 64%; }
.auth-hero:not(.hero-stack) .auth-hero-body { margin-left: -14px; }   /* A안: 텍스트 블록 살짝 왼쪽으로 */
.hero-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 800;
  letter-spacing: 2px; color: #cfd6de; text-transform: uppercase; }
.hero-dot { width: 8px; height: 8px; border-radius: 50%; background: #2fe08a;
  box-shadow: 0 0 0 4px rgba(47,224,138,.18); }
.auth-hero-h { font-size: clamp(34px, 3.9vw, 50px); font-weight: 800; line-height: 1.12; letter-spacing: -1.4px;
  color: #fff; margin: 22px 0 0; word-break: keep-all; }
.auth-hero-h b { background: linear-gradient(90deg, #FF7385, #F0324F);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-hero-sub { margin: 18px 0 0; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.6; color: #97a1ad; font-weight: 500; }
/* 하단 실시간 지수 (auth.js가 /api/indices로 채움) */
.hero-ticker { position: absolute; left: clamp(40px, 6vw, 84px); right: clamp(40px, 6vw, 84px); bottom: 62px;
  display: flex; gap: clamp(22px, 4vw, 58px); padding-top: 18px; z-index: 1;
  border-top: 1px solid rgba(255,255,255,.08); }
.hero-tk { display: flex; flex-direction: column; gap: 4px; }
.hero-tk-name { font-size: 11px; font-weight: 700; letter-spacing: .5px; color: #7c8794; }
.hero-tk-row { display: flex; align-items: baseline; gap: 9px; }
.hero-tk-lv { font-size: 16px; font-weight: 800; color: #f2f5f8; }
.hero-tk-ch { font-size: 12px; font-weight: 700; }
.hero-tk-ch.up { color: #ff6b7d; }
.hero-tk-ch.down { color: #5aa6ff; }
.auth-hero-foot { position: absolute; bottom: 24px; left: clamp(40px, 6vw, 84px); display: flex; gap: 16px;
  font-size: 12px; color: #6b7480; z-index: 1; }
.auth-hero-foot a { color: inherit; text-decoration: none; }
.auth-hero-foot a:hover { color: #aab2bd; }
.auth-panel { flex: 1; display: flex; align-items: safe center; justify-content: center; padding: 24px; background: var(--card); overflow-y: auto; }
/* 카드 세로 auto 마진: 화면에 들어가면 중앙정렬, 넘치면(긴 회원가입) 위 정렬+스크롤 */
.auth-split .auth-card { margin-block: auto; }
#forgotForm { min-height: 0; }   /* 비번찾기 폼이 짧은데 267px 강제라 하단에 큰 빈공간이 생기던 문제 → 자연 높이로(전환 시 카드 약간 줄지만 공백 제거 우선) */
.auth-split .auth-card { box-shadow: none; padding: 8px 12px; }   /* 오른쪽 배경이 이미 흰색 → 카드 그림자 제거 */
.auth-split .modal-logo { font-size: 30px; }
/* 로그인 페이지 로고: 빨간 클로버 + 빨강 워드마크 (헤더와 통일) */
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none;
  transform: translateX(-18px); cursor: default; }   /* 클로버가 왼쪽에 붙어 워드마크가 우측에 놓이는 착시 → 시각 중앙 보정 */
.auth-brand .brand-mark.brand-clover { margin-left: 0; width: 32px; height: 32px; }
.auth-brand .brand-name { font-size: 30px; }
.auth-eyebrow-sub { text-transform: uppercase; letter-spacing: 2px; font-size: 11px; font-weight: 700; }
/* 통일: 파랑 → 검정 (로그인 페이지 전용, 다크 히어로·빨강 브랜드와 톤 맞춤) */
.auth-split .auth-submit { background: #14161a; }
.auth-split .auth-submit:hover { background: #2a2f37; filter: none; }
.auth-split .modal-tabs button.active { color: #14161a; }
.auth-split .auth-card input:focus { border-color: #14161a; box-shadow: 0 0 0 3px rgba(20,22,26,.08); }
.auth-split .su-seed-opt:hover { border-color: #14161a; }
.auth-split .su-seed-opt.active { border-color: #14161a; background: #f2f3f5; color: #14161a; }
.auth-split .auth-link:hover { color: #14161a; }
.auth-split .auth-card input[type="checkbox"] { accent-color: #14161a; }
@media (max-width: 860px) {   /* 세로 스택: 히어로(축소) 위 → 폼 아래 */
  .auth-split { flex-direction: column; }
  .auth-hero { flex: none; padding: 40px 28px 30px; align-items: center; text-align: center; }
  .auth-hero::before { display: none; }
  .auth-hero-cube { position: static; transform: none; width: 100%; max-width: 300px; margin: 8px auto 0; order: 2; }
  .auth-hero-body { max-width: 100%; order: 1; }
  .hero-eyebrow { justify-content: center; }
  .hero-ticker { position: static; order: 3; margin-top: 24px; justify-content: center; flex-wrap: wrap; gap: 18px 30px; }
  .hero-tk { align-items: center; }
  .auth-hero-foot { position: static; order: 4; margin-top: 20px; justify-content: center; }
  .auth-panel { flex: none; padding: 28px 20px 44px; }
}
/* 비밀번호 찾기 링크 / 별명 중복 안내 / 라벨 */
.auth-link { display: block; width: 100%; margin-top: 12px; padding: 4px; background: none; border: none;
  color: var(--sub); font-size: 13px; cursor: pointer; text-decoration: underline; text-align: center; }
.auth-link:hover { color: var(--blue); }
.forgot-desc { font-size: 13px; color: var(--sub); margin-bottom: 12px; line-height: 1.5; }
.wc-label { display: block; font-size: 13px; color: var(--sub); font-weight: 600; margin-bottom: 6px; }
.nick-msg { font-size: 12px; font-weight: 600; min-height: 16px; margin: 4px 2px 0; }
#suNickMsg:empty { min-height: 0; margin: 0; }   /* 별명 확인 메시지 없을 땐 접힘 → 별명↔비밀번호 간격 통일 */
.nick-msg.ok { color: #12b886; }
.nick-msg.bad { color: var(--red); }
.auth-error { color: var(--red); font-size: 13px; min-height: 18px; margin-bottom: 8px; text-align: center; }
.hidden { display: none; }

/* 뉴스 배지 */
.news-badge { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; flex-shrink: 0; }
.badge-news { background: var(--redbg); color: var(--red); }
.badge-sys { background: var(--bg); color: var(--sub); }
.badge-notice { background: var(--bluebg); color: var(--blue); }
/* 모투 소식 공지 작성(관리자) */
.notice-write { display: flex; gap: 6px; margin: 4px 0 6px; }
.notice-write input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; outline: none; }
.notice-write input:focus { border-color: var(--blue); }
.notice-write button { flex-shrink: 0; border: none; background: var(--slate); color: #fff; border-radius: 8px; padding: 0 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.news-row .notice-del { margin-left: auto; color: var(--sub); cursor: pointer; font-size: 12px; flex-shrink: 0; padding: 0 2px; }
.news-row .notice-del:hover { color: var(--red); }

/* 상단 지수 — 코스피 특집(큰) + 코스닥/나스닥·환율/금리·VIX/S&P 세로 스택 (스크롤 없음) */
#indexBar.idx-grid { grid-area: indices; display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr;
  grid-auto-flow: column; gap: 7px; min-width: 0;
  min-height: 112px; }   /* 데이터 오기 전에도 자리 예약 — 첫 로딩 때 아래 블록이 밀려 커지는 점프 방지 */
/* 첫 로딩 스켈레톤 — 데이터 채워지기 전 빈 칸이 '뿅' 뜨던 깜빡임 완화(자리는 위 min-height로 예약됨).
   :empty 셀렉터라 JS가 innerHTML 채우는 순간 자동 사라짐. 로그인/비로그인 상태 가정 안 함. */
#indexBar.idx-grid:empty::after,
#authArea:empty::after {
  content: ""; border-radius: 12px;
  background: linear-gradient(100deg, var(--card) 38%, var(--line) 50%, var(--card) 62%);
  background-size: 220% 100%; animation: skelShimmer 1.3s ease-in-out infinite;
}
#indexBar.idx-grid:empty::after { grid-column: 1 / -1; grid-row: 1 / -1; }
#authArea:empty::after { display: inline-block; width: 116px; height: 34px; vertical-align: middle; }
@keyframes skelShimmer { from { background-position: 220% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { #indexBar.idx-grid:empty::after, #authArea:empty::after { animation: none; } }
/* 종목목록 스켈레톤 — 시세 목록 로딩 전. shimmer를 mask로 잘라 행 막대 ~9개(가짜 숫자 없이 로딩 뼈대만).
   tbody라 :empty일 때만 display:block(채워지면 자동으로 table-row-group 복귀). 파생 모드는 .stock-table가 숨어 안 뜸. */
#stockList:empty { display: block; }
#stockList:empty::after {
  content: ""; display: block; height: 468px;
  background: linear-gradient(100deg, var(--card) 38%, var(--line) 50%, var(--card) 62%);
  background-size: 220% 100%; animation: skelShimmer 1.3s ease-in-out infinite;
  -webkit-mask: repeating-linear-gradient(to bottom, transparent 0 8px, #000 8px 26px, transparent 26px 52px);
          mask: repeating-linear-gradient(to bottom, transparent 0 8px, #000 8px 26px, transparent 26px 52px);
}
@media (prefers-reduced-motion: reduce) { #stockList:empty::after { animation: none; } }
#indexBar.idx-grid > * { min-width: 0; }
/* 코스피 특집 카드(왼쪽, 2행 차지) — 세로 압축 */
.idx-feat { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 0;
  position: relative;   /* ff-row(수급) 오버레이 기준 — 데스크톱은 카드 하단에 절대배치 */
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 11px 16px 7px; min-width: 0;
  box-shadow: var(--shadow-card); }
.idx-feat .feat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.idx-feat .feat-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.idx-feat .feat-nm { font-size: 13px; font-weight: 700; color: var(--sub); }
.idx-feat .feat-lv { font-size: 23px; font-weight: 800; letter-spacing: -.4px; font-variant-numeric: tabular-nums; line-height: 1; }
.idx-feat .feat-chwrap { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.idx-feat .feat-ch { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.idx-feat .feat-unit { font-size: 11px; color: var(--sub); white-space: nowrap; }
/* 그래프 + 수급 오버레이(그래프 안에) */
.idx-feat .feat-spark { flex: 1 1 auto; min-height: 40px; position: relative; margin-top: -2px; }
.idx-feat .feat-spark .spark { width: 100%; height: 100%; display: block; }
.idx-feat .ff-row { position: absolute; left: 16px; right: 16px; bottom: 8px; display: flex; align-items: baseline;
  justify-content: space-between; gap: 8px; flex-wrap: nowrap; white-space: nowrap; }
  /* space-between: 세 항목을 카드 폭 안에서 분배 — 고정 gap 12px는 금액이 크면(-5,502억 3건) 카드를 삐져나감 */
.idx-feat .ff { display: flex; align-items: baseline; gap: 4px; white-space: nowrap;
  text-shadow: 0 0 3px var(--card), 0 0 3px var(--card), 0 0 3px var(--card); }
.idx-feat .ffk { font-size: 11px; color: var(--sub); }
.idx-feat .ffv { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }   /* 13→12px: 폭락/폭등장 4자리 억(±9,999억) 3건도 카드 안에 */
/* 미니 카드(세로 스택 — 글자·그래프 크게 해서 블럭 채움) */
.idx-mini { height: 100%; display: flex; align-items: center; gap: 13px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px 15px; min-width: 0;
  box-shadow: var(--shadow-card); }
/* hover: 은은한 tactile 리프트(클릭 착각 방지 위해 cursor:pointer는 안 붙임) */
.idx-feat, .idx-mini { transition: box-shadow .16s ease, transform .16s ease; }
.idx-feat:hover, .idx-mini:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hov); }
.idx-mini .mini-spark { flex: 0 0 66px; height: 36px; }
.idx-mini .mini-spark .spark { width: 100%; height: 100%; display: block; }
.idx-mini .mini-text { flex: 1 1 auto; min-width: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.idx-mini .mini-nm { font-size: 13.5px; color: var(--sub); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idx-mini .mini-row { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.idx-mini .mini-lv { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.idx-mini .mini-ch { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

.layout {
  display: grid; grid-template-columns: 400px 1fr 300px; gap: 14px;   /* 좌(이름칸) +40, 우(주문) -40 → 중앙 차트 너비 그대로 */
  grid-template-areas: "list indices indices" "list chart order";
  grid-template-rows: auto 1fr;   /* 지수 행은 내용만큼, 시세 초과분은 아래 행(차트행)으로 → 차트 안 밀림 */
  padding: 14px; max-width: 1540px; width: 100%; box-sizing: border-box; margin: 0 auto; align-items: stretch;   /* 좌·우 컬럼을 가운데(차트) 높이에 맞춤 · width:100%=body flex 자식 shrink-to-fit 방지 */
}
.left-col { grid-area: list; display: flex; flex-direction: column; gap: 14px; min-width: 0; align-self: stretch; }   /* 데스크톱: 왼쪽 컬럼 = 시세 + 부가블록 세로 흐름 */
.list-panel { grid-area: list; align-self: stretch; }
.aux-panel { grid-area: aux; }
.aux-panel > :first-child { margin-top: 0; }   /* 카드 첫 h2의 margin-top 제거 */
/* 왼쪽 컬럼 바닥 정렬: left-col은 stretch로 행 높이만큼인데 자식 패널이 안 늘어나 아래가 비었음
   → 마지막 카드(aux)가 남는 높이를 흡수하고, 내부에선 일정 목록이 여백을 먹어 카드 바닥이
   가운데(차트)·오른쪽(주문) 카드와 일치. (모바일은 left-col이 display:contents라 영향 없음) */
.left-col > .aux-panel { flex: 1 1 auto; display: flex; flex-direction: column; }
.left-col > .aux-panel #calendar { flex: 1 1 auto; min-height: 0; }
.chart-panel { grid-area: chart; }
.order-panel { grid-area: order; }
/* 우측(종목정보) 높이를 기준으로 JS가 좌·가운데 높이를 맞춤.
   가운데=체결/호가가, 좌측=시장소식이 남는/모자란 공간을 흡수(shrink/grow) */
.chart-panel { display: flex; flex-direction: column; }
.chart-panel .book-row { flex: 0 0 auto; height: 548px; }   /* 호가/체결 고정 높이 → 호가 단계 수 항상 일정 */
.book-row .trades, .book-row .ob-col { display: flex; flex-direction: column; min-height: 0; }
.list-panel { display: flex; flex-direction: column; }
.list-panel #news { flex: 1 1 auto; max-height: none; min-height: 140px; overflow-y: auto; }   /* 긴 기둥: 남는 높이 흡수 */
.acc-detail-link { display: block; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--blue); text-decoration: none; }
.acc-detail-link:hover { text-decoration: underline; }
/* 헤더 안 « 토글 버튼 */
.rail-toggle {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--card); color: var(--sub); font-size: 16px; font-weight: 700; cursor: pointer;
}
.rail-toggle:hover { background: var(--bg); color: var(--text); }
/* 탭 패널: 기본 숨김 → 헤더 « 누르면 오른쪽에서 떠서 나옴 (내용은 비어있음) */
.rail-panel {
  position: fixed; top: 64px; right: 14px; width: 320px;
  max-height: calc(100vh - 64px - 50px); overflow-y: auto; z-index: 25;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  transform: translateX(28px); opacity: 0; pointer-events: none;
  transition: transform .2s ease, opacity .2s ease;
}
.rail-panel.open { transform: translateX(0); opacity: 1; pointer-events: auto; }
.rail-panel:empty::before {
  content: "여기에 내용을 추가하세요"; display: block; padding: 40px 16px;
  text-align: center; color: var(--sub); font-size: 13px;
}
/* 레일 상단 허브 (내 자산 · 다크모드) — 마이페이지 진입 */
.rail-hub { display: flex; align-items: center; gap: 6px; padding: 12px 12px 0; }
.rail-my { display: inline-flex; align-items: center; padding: 8px 14px;
           background: var(--bg); border-radius: 10px; text-decoration: none; color: var(--text);
           font-weight: 700; font-size: 13px; transition: background .12s, color .12s; }
.rail-my:hover { background: var(--bluebg); color: var(--blue); }
.rail-theme { flex: 0 0 auto; margin-left: auto; width: 30px; height: 30px; font-size: 13px; }

/* 내 종목 레일 (보유/찜/최근) */
.rail-tabs { display: flex; gap: 4px; padding: 10px 12px 0; }
.rail-tabs button { flex: 1; padding: 7px 0; border: none; background: var(--bg); border-radius: 9px;
  font-size: 13px; font-weight: 700; color: var(--sub); cursor: pointer; }
.rail-tabs button.active { background: var(--slate); color: #fff; }
.rail-body { padding: 8px 12px 14px; }
.rl-sec-h { font-size: 11px; font-weight: 700; color: var(--sub); padding: 8px 6px 3px; }
.rl-sec-h:first-child { padding-top: 2px; }
.rl-pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 0 2px; font-size: 12.5px; color: var(--sub); font-variant-numeric: tabular-nums; }
.rl-pg-ind { min-width: 30px; text-align: center; }
.rl-row { display: flex; align-items: center; gap: 9px; padding: 9px 6px; border-radius: 10px; cursor: pointer; }
.rl-row:hover { background: var(--bg); }
.rl-row.sel { background: var(--bluebg); }
.rl-nm { flex: 1; min-width: 0; font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-sub { color: var(--sub); font-weight: 500; font-size: 11px; }
.rl-px { text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rl-ch { display: block; font-size: 11px; font-weight: 600; }
.rl-empty { text-align: center; color: var(--sub); font-size: 13px; padding: 36px 12px; }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: var(--shadow-card); }
.panel h2 { font-size: 15px; margin-bottom: 10px; }
.panel h2:not(:first-child) { margin-top: 20px; }
.hint { font-size: 11px; color: var(--sub); font-weight: 400; }

/* 종목 리스트 */
.market-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.market-tabs button { flex: 1; padding: 7px; border: 1px solid var(--line); background: var(--card); border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--sub); display: flex; align-items: center; justify-content: center; gap: 4px; line-height: 1; }
.market-tabs button.active { border-color: var(--blue); color: var(--blue); background: var(--bluebg); }
.market-tabs .tab-heart { color: var(--sub); }
.market-tabs button[data-mk="fav"].active .tab-heart { color: var(--red); }
/* 정렬 탭(거래대금/거래량/급상승/급하락/관심) */
.sort-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.sort-tabs button { flex: 1; padding: 6px 2px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--sub); display: flex; align-items: center; justify-content: center; gap: 3px; line-height: 1; white-space: nowrap; }
.sort-tabs button.active { background: var(--slate); color: #fff; }
.sort-tabs .tab-heart { color: inherit; }
.sort-tabs button[data-sort="fav"].active .tab-heart { color: var(--red); }
/* 장 시간 표시 */
.session-bar { display: flex; gap: 12px; margin: 2px 0 10px; align-items: flex-start; }  /* 왼쪽 열=국내 / 오른쪽 열=해외 */
.sess-col { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.sess { display: flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--sub); white-space: nowrap; }  /* 한 줄 고정(작은 글씨) */
.sess i { width: 6px; height: 6px; border-radius: 50%; background: #c4ccd4; flex-shrink: 0; }
.sess.on { color: var(--text); }
.sess.on i { background: #12b886; box-shadow: 0 0 0 2px rgba(18,184,134,.15); }
.sess em { font-style: normal; color: var(--sub); font-weight: 500; font-size: 10.5px; }
.stock-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
/* 고정폭: 긴 등락률(+1000.99%)이 와도 거래대금이 안 밀리게. 종목칸이 나머지 차지 */
.stock-table th:nth-child(2), .stock-table td:nth-child(2) { width: 90px; }   /* 현재가 */
.stock-table th:nth-child(3), .stock-table td:nth-child(3) { width: 76px; }   /* 등락률 */
.stock-table th:nth-child(4), .stock-table td:nth-child(4) { width: 58px; overflow: hidden; text-overflow: ellipsis; }   /* 거래대금 */
.stock-table th { text-align: right; font-size: 11px; color: var(--sub); padding: 6px 4px; font-weight: 500; }
.stock-table th:first-child { text-align: left; padding-left: 14px; }   /* '종목' 헤더를 좌측(하트·아이콘 쪽)으로 정렬 */
.stock-table td { padding: 9px 4px; border-top: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; }
.stock-table td:first-child { text-align: left; }
.stock-table tbody tr { cursor: pointer; }
.stock-table tbody tr:hover { background: var(--bg); }
.stock-table tbody tr.sel { background: var(--bluebg); }
/* 시세 변동 깜빡임 (토스식): 등락률 칸을 "현재 부호" 색으로 — +면 빨강, -면 파랑, 0이면 회색 */
.stock-table td.flash-up { animation: cellFlashUp .6s ease-out; border-radius: 6px; }
.stock-table td.flash-down { animation: cellFlashDown .6s ease-out; border-radius: 6px; }
.stock-table td.flash-flat { animation: cellFlashFlat .6s ease-out; border-radius: 6px; }
/* peak 불투명도 낮춤(0.45→0.22): 급변장엔 1초 스냅샷마다 전 종목이 동시에 flash → 색블록처럼 무거워지던 것을 은은한 펄스로 */
@keyframes cellFlashUp { 0% { background: rgba(240,68,82,.22); } 100% { background: transparent; } }
@keyframes cellFlashDown { 0% { background: rgba(49,130,246,.22); } 100% { background: transparent; } }
@keyframes cellFlashFlat { 0% { background: rgba(139,149,161,.2); } 100% { background: transparent; } }
/* 선택행은 배경이 파랑(bluebg)이라 하락 flash(파랑)가 겹쳐 안 보임 → 더 진한 파랑으로 대비 확보(상승=빨강은 대비돼 그대로) */
.stock-table tbody tr.sel td.flash-down { animation-name: cellFlashDownSel; }
@keyframes cellFlashDownSel { 0% { background: rgba(22,98,214,.5); } 100% { background: transparent; } }
/* 지정가(예약) 힌트 — 입력 가격이 만들 결과(돌파 매수/하락 매수/익절/손절)를 쉬운 말로 */
.limit-hint { font-size: 11.5px; color: var(--blue); margin: -4px 0 8px; line-height: 1.5; }
.list-pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 10px 0 2px; font-size: 13px; color: var(--sub); font-variant-numeric: tabular-nums; }
#listPager:empty { display: none; }   /* 페이지네이션 제거로 항상 비어있음 → 빈 채로 패딩만 차지하던 하단 공백 제거 */
.list-pager button { width: 28px; height: 28px; border: 1px solid var(--line); background: var(--card); border-radius: 8px; cursor: pointer; font-size: 15px; color: var(--text); }
.list-pager button:disabled { opacity: .35; cursor: default; }
.list-pager button:not(:disabled):hover { background: var(--bg); }
.fav { color: #c4ccd4; cursor: pointer; margin-right: 7px; font-size: 13px; }
.fav.on { color: var(--red); }
.fav:hover { color: var(--red); }
.s-name { font-weight: 600; margin-left: 16px; }   /* 아이콘에서 더 띄움(오른쪽으로) */
.s-tag { font-size: 10px; color: var(--sub); margin-left: 4px; }
.s-val { color: var(--sub); font-size: 12px; }
.stock-table td.num-sm { font-size: 10.5px; letter-spacing: -0.3px; }   /* 거래량/거래대금 4자리 등 길면 살짝 작게(잘림 방지) */
.empty-row td { height: 43px; border: none; }
.stock-table td, .stock-table th { font-size: 12.5px; white-space: nowrap; }
.stock-table td:first-child { max-width: 165px; overflow: hidden; }
.s-name { display: inline-block; vertical-align: middle; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }

/* 지금 뜨는 산업 */
.hot-h { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.hot-tabs { display: flex; gap: 4px; }
.hot-tabs button { padding: 4px 10px; border: 1px solid var(--line); background: var(--card); border-radius: 8px; font-size: 11px; font-weight: 600; color: var(--sub); cursor: pointer; }
.hot-tabs button.active { border-color: var(--blue); color: var(--blue); background: var(--bluebg); }
.hot-row { display: flex; align-items: center; gap: 9px; padding: 9px 4px; border-top: 1px solid var(--line); font-size: 13px; }
.hot-empty { cursor: default; }                       /* 높이 맞춤용 빈 행 — 아이콘 자리만 차지, 배경 없음 */
.hot-empty .hot-ic { background: transparent; }
.hot-rk { width: 16px; text-align: center; font-weight: 700; color: var(--sub); flex: 0 0 auto; }
.hot-ic { width: 30px; height: 30px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 17px; background: var(--bg); border-radius: 9px; }
.hot-ic .hot-ic-svg { width: 18px; height: 18px; color: var(--sub); }   /* 섹터 라인 아이콘(이모지 대신) */
/* 섹션 제목 라인 아이콘(지금 뜨는 산업·모투 소식·다가오는 일정) — flex 헤더에서 아이콘+텍스트 한 덩어리 */
.sec-title { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap; }   /* 제목은 아이콘과 붙어 절대 글자단위로 안 쪼개짐 */
.sec-title svg { width: 17px; height: 17px; color: var(--sub); flex-shrink: 0; }
.sec-title .ic-flame { color: #ff6b35; }   /* '지금 뜨는'=hot이라 불꽃만 따뜻한 색 강조 */
.hot-c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hot-nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hot-sub { font-size: 11px; color: var(--sub); font-weight: 500; }
.hot-ch { font-variant-numeric: tabular-nums; font-weight: 700; flex: 0 0 auto; }
.hot-pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 0 2px; border-top: 1px solid var(--line); font-size: 12px; color: var(--sub); font-variant-numeric: tabular-nums; }
.hot-src { font-size: 10.5px; color: var(--sub); opacity: .7; text-align: right; padding: 6px 2px 0; }
.hot-pg-btn { width: 24px; height: 24px; border: 1px solid var(--line); background: var(--card); border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--text); line-height: 1; }
.hot-pg-btn:disabled { opacity: .35; cursor: default; }
.hot-pg-btn:not(:disabled):hover { background: var(--bg); }
.halt { font-size: 10px; color: #fff; background: var(--sub); border-radius: 4px; padding: 1px 4px; margin-left: 4px; }
.up { color: var(--red); }
.down { color: var(--blue); }
.flat { color: var(--sub); }   /* 0.00% = 회색(토스식) */

/* 시장 소식 */
.news-h { margin-top: 18px; display: flex; align-items: center; gap: 6px; }
.notice-compose-btn { margin-left: auto; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 12px; font-weight: 700; border-radius: 8px; padding: 4px 12px; cursor: pointer; }
.notice-compose-btn:hover { background: var(--bg); border-color: var(--blue); color: var(--blue); }
.news { max-height: 260px; overflow-y: auto; padding-right: 4px; }
.news-row { display: flex; gap: 8px; padding: 7px 4px; border-top: 1px solid var(--line); font-size: 12px; align-items: baseline; }
.news-row .nt { color: var(--sub); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.news-row.clickable { cursor: pointer; border-radius: 6px; }
.news-row.clickable:hover { background: var(--bg); }
.news-row .ext { color: var(--sub); font-size: 11px; }
.news::-webkit-scrollbar { width: 6px; }
.news::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

/* 차트 영역 */
.stock-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.head-left { display: flex; align-items: center; min-width: 0; }
.head-left > div { display: flex; align-items: baseline; white-space: nowrap; min-width: 0; }
.head-left { align-items: flex-start; }   /* 로고·텍스트 위 기준 정렬(텍스트 위로) */
.head-left > .head-col { flex-direction: column; align-items: flex-start; gap: 2px; margin-top: -9px; }  /* 세션 배지 위 / 이름 아래 */
.head-col .head-nameline { margin-top: 5px; }   /* 배지행은 위로(-9), 이름은 상쇄로 제자리 → 라벨만 살짝 올림 */
.head-nameline { display: flex; align-items: baseline; white-space: nowrap; min-width: 0; }
.cur-name { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
.cur-fav { margin-left: 12px; font-size: 22px; line-height: 1; color: var(--sub); cursor: pointer; user-select: none; align-self: center; transition: transform .1s; }
.cur-fav:hover { transform: scale(1.15); }
.cur-fav.on { color: var(--red); }
/* 차트 호버 툴팁(OHLC) */
.chart-tip { position: absolute; z-index: 30; pointer-events: none; background: rgba(255,255,255,.97);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 10px 12px; font-size: 12px; min-width: 188px; font-variant-numeric: tabular-nums; }
[data-theme="dark"] .chart-tip { background: rgba(27,32,39,.97); box-shadow: 0 8px 24px rgba(0,0,0,.4); }   /* 다크: 흰 카드에 흰 글자로 안 보이던 문제 → 다크 카드색(--card=#1b2027) */
/* 세션 구분선 오버레이 (app-chart.js renderSessionLines) — 장 마감으로 압축된 하루/세션 경계 */
#sessLines { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.sess-div { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--line); }
.sess-div-lb { position: absolute; top: 3px; left: 4px; font-size: 10px; font-weight: 600; color: var(--sub); white-space: nowrap; background: var(--card); padding: 0 4px; border-radius: 4px; opacity: .9; }
.chart-tip .tip-d { font-weight: 700; color: var(--text); margin-bottom: 6px; }
.chart-tip .tip-r { display: flex; justify-content: space-between; gap: 16px; line-height: 1.7; }
.chart-tip .tip-l { color: var(--sub); }
.chart-tip .tip-v { font-weight: 700; color: var(--text); }
.chart-tip .tip-v.up { color: var(--red); }
.chart-tip .tip-v.down { color: var(--blue); }
.chart-tip .tip-v em { font-style: normal; font-weight: 600; font-size: 11px; color: var(--sub); }
.chart-tip .tip-v em.up { color: var(--red); }
.chart-tip .tip-v em.down { color: var(--blue); }
.chart-tip.up { border-color: var(--red); }
.chart-tip.down { border-color: var(--blue); }
.cur-symbol { font-size: 12px; color: var(--sub); margin-left: 6px; font-weight: 500; white-space: nowrap; }
/* 장 세션 배지 + 거래시간표 툴팁 */
.cur-sess { position: relative; display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 12px; font-weight: 700; color: var(--sub); background: var(--bg); border-radius: 12px; padding: 2px 9px; cursor: default; white-space: nowrap; }
.cur-sess .sess-dot { width: 6px; height: 6px; border-radius: 50%; background: #c4ccd4; }
.cur-sess.open { color: #15a06a; }
.cur-sess.open .sess-dot { background: #15a06a; }
.cur-sess.delisted { color: #f04452; background: var(--redbg); }   /* 상장폐지 */
.cur-sess.delisted .sess-dot { background: #f04452; }
.sess-line { display: inline-flex; align-items: center; gap: 5px; }
.status-badges { display: inline-flex; gap: 4px; }
.st-badge { font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.st-badge.warn { color: #b7791f; background: #fef3c7; }      /* 관리종목·투자주의(노랑) */
.st-badge.danger { color: #f04452; background: var(--redbg); }  /* 거래정지·경고·위험·상폐(빨강) */
.st-badge.hot { color: #d9480f; background: #ffe8cc; }       /* 단기과열(주황) */
.st-badge.info { color: #3182f6; background: var(--bluebg); }  /* 재상장 입고안내 등 정보성(파랑) */
.bd-wrap { position: relative; display: inline-flex; align-items: center; }
.st-badge:has(.bd-q) { display: inline-flex; align-items: center; gap: 4px; }   /* ? 들어간 배지 정렬 */
.bd-q { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px;
  border-radius: 50%; background: rgba(0,0,0,.16); color: #fff; font-size: 10px; font-weight: 800; }  /* 휴장 ?처럼 — 배지 안 반투명 원(커서 변경 없음) */
.bd-tip { display: none; position: absolute; top: 135%; left: 0; z-index: 60; width: 230px;
  background: #2b313a; color: #fff; border-radius: 12px; padding: 11px 14px; font-size: 12.5px;
  font-weight: 600; line-height: 1.55; white-space: normal; box-shadow: 0 8px 28px rgba(0,0,0,.28); cursor: default; }
.bd-tip b { font-size: 13px; }
.bd-wrap:hover .bd-tip { display: block; }   /* 휴장 팝오버처럼 hover 시 표시 */
.cur-sess .sess-q { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--line); color: var(--card); font-size: 10px; font-weight: 800; }
.sess-tip { display: none; position: absolute; top: 130%; left: 0; z-index: 60; width: 300px; background: #2b313a; color: #fff; border-radius: 12px; padding: 13px 15px; box-shadow: 0 8px 28px rgba(0,0,0,.28); white-space: normal; cursor: default; }
.cur-sess:hover .sess-tip { display: block; }
.sess-tip-h { font-size: 13px; font-weight: 800; margin-bottom: 9px; }
.sess-tip-t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sess-tip-t td { padding: 5px 4px; border-bottom: 1px solid rgba(255,255,255,.12); font-weight: 600; }
.sess-tip-t td:nth-child(2) { text-align: right; color: #cfd6df; font-weight: 500; }
.sess-tip-t .sess-ex { text-align: right; color: #9aa3ad; font-size: 11px; font-weight: 500; padding-left: 8px; }
.sess-tip-t .sess-cur td { color: #6fd3a6; }
.sess-nxt { margin-top: 9px; font-size: 11.5px; font-weight: 700; padding: 7px 9px; border-radius: 7px; }
.sess-nxt.ok { background: rgba(21,160,106,.22); color: #6fd3a6; }
.sess-nxt.no { background: rgba(255,255,255,.08); color: #cfd6df; }
.sess-tip-n { margin-top: 9px; font-size: 11px; line-height: 1.5; color: #9aa3ad; }
.cur-price-box { text-align: right; }
.cur-price { display: inline-block; font-size: 26px; font-weight: 800; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.cur-price { color: var(--text); line-height: 1; }  /* 현재가는 항상 검정 */
.cur-usd { font-size: 14px; color: var(--sub); font-weight: 700; margin-left: 8px; }
.cur-change { font-size: 13px; font-weight: 600; display: block; text-align: right; margin-top: 3px; font-variant-numeric: tabular-nums; }
.head-col .cur-sess { margin-left: 0; }   /* 종목명 위에 붙는 세션 배지 */
.range-bar { display: flex; gap: 4px; margin-bottom: 8px; align-items: center; }
.range-bar button { padding: 6px 12px; border: none; background: var(--bg); border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--sub); }
.range-bar button.active { background: var(--slate); color: #fff; }
.range-bar .mode-btn { margin-left: auto; border: 1px solid var(--line); background: var(--card); color: var(--sub); }
/* 관심 하트·알림 종 → range-bar(1일~전체) 오른쪽에 고정(종목명 길이와 무관하게 일관) */
.rb-actions { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; }
.rb-actions { gap: 8px; }
.rb-actions .cur-fav { margin-left: 0; font-size: 23px; }
/* 차트 종 버튼: .range-bar button의 회색 배경 박스를 무효화(하트처럼 아이콘만). 헤더 알림 종과 동일한 느낌. */
.rb-actions .cur-alarm { font-size: 16px; background: none; border: none; padding: 0 2px; border-radius: 0; color: var(--sub); }
.rb-actions .cur-alarm:focus { outline: none; }
.rb-actions .cur-alarm .ic-bell { width: 23px; height: 23px; }
.range-bar .mode-btn.active { background: var(--bluebg); color: var(--blue); border-color: var(--blue); }
/* 차트유형(캔들/라인/영역) */
.chart-type { margin-left: auto; display: inline-flex; gap: 4px; }
.range-bar .chart-type button { padding: 6px 10px; border: 1px solid var(--line); background: var(--card); color: var(--sub); }
.range-bar .chart-type button.active { background: var(--bluebg); color: var(--blue); border-color: var(--blue); }
.iv-sel { padding: 6px 8px; border: 1px solid var(--line); background: var(--card); border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer; margin-right: 4px; }
.iv-sel:disabled { opacity: .4; cursor: default; }

/* 하단 흐르는 시세 바 */
/* ===== 사이트 푸터 (깔끔 · plain 텍스트) ===== */
.site-footer { background: var(--card); border-top: 1px solid var(--line); margin-top: 18px; flex-shrink: 0; }
body:has(.ticker-bar) .site-footer { padding-bottom: 38px; }   /* 흰 패딩으로 티커 공간 확보(회색 틈 없이 티커에 붙음) */
/* 브랜드(좌) + 링크 2열 그리드(우) 푸터 */
.foot-inner { max-width: 1540px; margin: 0 auto; padding: 28px 28px 16px; text-align: left; }
.foot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.foot-brand { display: flex; align-items: center; justify-content: flex-start; gap: 9px; }
.foot-brand .brand-mark.brand-clover { margin-left: 0; width: 30px; height: 30px; }
.foot-brand .brand-name { font-size: 26px; }
.foot-tagline { color: var(--sub); font-size: 13px; font-weight: 600; margin: 10px 0 0; letter-spacing: -0.2px; }
/* 링크: 우측 2열 그리드(약관·개인정보 / 문의하기·이메일) */
/* 링크 4개: 우측 2x2 → 브랜드 아래 가로 한 줄 */
.foot-links { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: flex-start; align-items: center; margin: 16px 0 0; text-align: left; }
.foot-links a, .foot-contact-label { color: var(--sub); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.foot-links a:hover { color: var(--blue); }
.foot-disc { color: #aab2bd; font-size: 12px; line-height: 1.55; margin: 18px 0 0; text-align: left; }
.foot-bottom { border-top: 1px solid var(--line); text-align: center; color: #aab2bd;
  font-size: 12px; padding: 10px; margin-top: 10px; }
.foot-mail { color: inherit; text-decoration: none; }
.foot-mail:hover { text-decoration: underline; }
/* ===== 정책 페이지(약관/방침) ===== */
.policy-wrap { max-width: 860px; width: 100%; box-sizing: border-box; margin: 0 auto; padding: 28px 20px 60px; }  /* body flex 자식 shrink-to-fit 방지 */
.policy-wrap h1 { font-size: 24px; font-weight: 800; color: var(--text); margin: 14px 0 4px; }
.policy-upd { color: var(--sub); font-size: 13px; margin-bottom: 24px; }
.policy-wrap h2 { font-size: 16px; font-weight: 700; color: var(--text); margin: 26px 0 8px; }
.policy-wrap p, .policy-wrap li { color: var(--gray); font-size: 14px; line-height: 1.75; }
.policy-wrap ul { padding-left: 20px; margin: 6px 0; }
.policy-wrap .policy-note { background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; color: var(--sub); font-size: 13px; line-height: 1.7; margin: 14px 0; }

.ticker-bar { position: fixed; left: 0; right: 0; bottom: 0; height: 38px; background: var(--card);
  border-top: 1px solid var(--line); display: flex; align-items: center; overflow: hidden; z-index: 50; }
.ticker-label { flex-shrink: 0; background: var(--card); z-index: 2; padding: 0 14px; height: 100%;
  display: flex; align-items: center; font-size: 13px; font-weight: 700; color: var(--sub);
  border-right: 1px solid var(--line); }
.ticker-track { display: inline-flex; flex: 0 0 auto; width: max-content; gap: 0; white-space: nowrap;
  will-change: transform; animation: tickerScroll linear infinite; }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }   /* 두 벌 반복 → -50%(한 벌)이면 끊김 없음 */
.ticker-bar:hover .ticker-track { animation-play-state: paused; }   /* 마우스 올리면 정지 */
body.tour-active .ticker-bar { display: none; }   /* 온보딩 투어 중엔 하단 티커 숨김(주의 분산 방지) */
.tk-item { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text); display: inline-flex; align-items: center; }
.tk-item::before { content: "·"; color: var(--sub); opacity: .55; margin: 0 22px; font-weight: 700; }   /* 항목 구분 점(리듬) */
.tk-item b { font-weight: 600; margin-right: 5px; color: var(--sub); }   /* 지수명은 뮤트 → 숫자(값·등락) 강조 */
.tk-v { font-weight: 700; }
.tk-flag { width: 17px; height: 17px; border-radius: 50%; object-fit: cover; margin-right: 6px; box-shadow: 0 0 1px rgba(0,0,0,.3); }
.tk-gold { margin-right: 5px; font-size: 14px; }
.tk-c { font-weight: 600; }
.ma-legend { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 12px; }
.ma-legend .ma-title { color: var(--sub); font-weight: 600; }
.ma-tg { cursor: pointer; font-weight: 700; opacity: 0.35; user-select: none; }
.ma-tg.on { opacity: 1; }
.ma-sep { color: var(--line); }
/* 보조지표(거래량/ROC/RSI/MACD) 단일선택 */
.sub-tg { cursor: pointer; font-weight: 600; color: var(--sub); padding: 2px 7px; border-radius: 7px; user-select: none; }
.sub-tg.on { background: var(--slate); color: #fff; }
.roc-val { font-weight: 700; font-size: 12px; margin-left: -2px; }
.chart { width: 100%; height: 450px; }   /* 3컬럼 높이 균형: 가운데를 왼쪽에 맞춰 살짝 키움(JS chart.resize 높이와 일치) */
/* 차트 로딩 스켈레톤(비목록 종목 로드 대기 동안 억지 차트 대신) */
.chart-wrap { position: relative; }
.chart-skel { position: absolute; inset: 0; border-radius: 12px; z-index: 8;  /* 차트 캔버스(LWC)+그림판 오버레이(z5)보다 위 — 안 그러면 깔려서 안 보임 */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: var(--card); }
.chart-spinner { width: 52px; height: 52px; border-radius: 50%;
  border: 4px solid #e9edf2; border-top-color: #b0b8c1;   /* 회색 링 */
  animation: chartSpin 0.8s linear infinite; }
.chart-skel .skel-msg { color: var(--sub); font-size: 14px; font-weight: 500; }
@keyframes chartSpin { to { transform: rotate(360deg); } }
/* "왜 올랐을까" AI 추정 카드 */
.why-card { margin-top: 14px; background: linear-gradient(180deg, #f6f9ff, #fff); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.why-card h3 { font-size: 14px; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.why-badge { font-size: 10px; font-weight: 700; color: var(--blue); background: var(--bluebg); border-radius: 6px; padding: 2px 6px; }
.why-empty { color: var(--sub); font-size: 13px; padding: 6px 0; }
.why-points { list-style: none; padding: 0; margin: 0; }
.why-points li { font-size: 13.5px; line-height: 1.65; padding-left: 14px; position: relative; color: var(--text); }
.why-points li::before { content: "•"; position: absolute; left: 2px; color: var(--blue); }
.why-tags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.why-tag { font-size: 11px; font-weight: 600; color: var(--sub); background: var(--bg); border-radius: 8px; padding: 3px 9px; }
/* 차트 그리기 오버레이 */
.draw-canvas { position: absolute; inset: 0; z-index: 5; }
/* 그리기 툴바 — 차트 바깥(위)에 고정된 가로 막대 (캔들 안 가림) */
.draw-toolbar { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 3px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 4px 6px; margin-bottom: 8px; }
.draw-toolbar .dt-btn { width: 28px; height: 28px; border: none; background: transparent; border-radius: 7px;
  cursor: pointer; font-size: 14px; color: var(--text); display: flex; align-items: center; justify-content: center; }
.draw-toolbar .dt-btn:hover { background: var(--bg); }
.draw-toolbar .dt-btn.on { background: var(--slate); color: #fff; }
.draw-toolbar .dt-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.draw-toolbar .dt-colors { display: flex; gap: 4px; padding: 0 2px; }
.draw-toolbar .dt-c { width: 13px; height: 13px; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,.1); }
.draw-toolbar .dt-c.on { box-shadow: 0 0 0 2px var(--card), 0 0 0 3px currentColor; }
/* 즉시 툴팁 (버튼 아래) */
.draw-toolbar .dt-btn, .draw-toolbar .dt-colors { position: relative; }
.draw-toolbar [data-tip]:hover::after {
  content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%);
  background: #191f28; color: #fff; padding: 4px 9px; border-radius: 7px; font-size: 12px; font-weight: 600;
  white-space: nowrap; z-index: 50; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.draw-toolbar [data-tip]:hover::before {
  content: ""; position: absolute; left: 50%; top: calc(100% + 2px); transform: translateX(-50%);
  border: 4px solid transparent; border-bottom-color: #191f28; z-index: 50; pointer-events: none; }

.book-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; align-items: stretch; }
.book-row h3 { font-size: 13px; color: var(--sub); margin-bottom: 8px; font-weight: 700; }
#orderbook { flex: 1 1 0; min-height: 0; overflow: hidden; padding-right: 4px; }
#trades { flex: 1 1 0; min-height: 0; overflow: hidden; padding-right: 4px; }
#trades::-webkit-scrollbar, #orderbook::-webkit-scrollbar { width: 6px; }
#trades::-webkit-scrollbar-thumb, #orderbook::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
/* 호가 — 잔량 막대 */
.ob-strength { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--sub); font-weight: 600; padding: 2px 2px 8px; }
.ob-strength b { font-weight: 800; }
.ob-sess { font-size: 11px; font-weight: 700; color: var(--sub); margin-left: auto; }
/* 판매대기(파랑) vs 구매대기(빨강) 비율 막대 */
.ob-ratio { display: flex; gap: 3px; padding: 4px 2px; margin: 0 0 4px; cursor: default; }   /* hover 툴팁은 유지, 물음표 커서만 제거 */
.ob-ratio i { display: block; height: 4px; border-radius: 2px; min-width: 2px; transition: flex-grow .3s ease; }
.obr-sell { background: #3182f6; }   /* 판매대기(총 매도잔량) */
.obr-buy { background: #f04452; }    /* 구매대기(총 매수잔량) */
/* 비율막대 커스텀 툴팁(0.1초마다 숫자 갱신) */
.ob-tip { position: fixed; z-index: 300; display: none; pointer-events: none; white-space: nowrap;
  background: #191f28; color: #fff; font-size: 11px; font-weight: 600; padding: 7px 11px;
  border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.28); }
.ob-sess.on { color: #16a34a; }
.tr-empty { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 80px; color: var(--sub); font-size: 12.5px; text-align: center; }
/* 호가 사다리 (좌 매도잔량 · 중앙 가격+% · 우 매수잔량) */
.ob2 { font-variant-numeric: tabular-nums; }
.ob2-row { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: stretch; height: 33px; }
.ob2-q { position: relative; display: flex; align-items: center; overflow: hidden; }
.ob2-q.ql { justify-content: flex-end; padding-right: 9px; }
.ob2-q.qr { justify-content: flex-start; padding-left: 9px; }
.ob2-bar { position: absolute; top: 4px; bottom: 4px; z-index: 0; border-radius: 3px; }
.ql .ob2-bar { right: 0; background: #e7efff; }
.qr .ob2-bar { left: 0; background: #ffe7ea; }
.ob2-qn { position: relative; z-index: 1; font-size: 12px; font-weight: 600; }
.ql .ob2-qn { color: var(--blue); } .qr .ob2-qn { color: var(--red); }
.ob2-px { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15;
  border: 1.5px solid transparent; border-radius: 8px; margin: 1px; }
.ob2-px:not(.cur):hover { background: var(--bg); }
.ob2-px > :first-child, .ob2-px { font-weight: 700; font-size: 13px; }
.ob2-px em { font-style: normal; font-size: 10px; font-weight: 600; opacity: .9; }
.ob2-px.up { color: var(--red); } .ob2-px.down { color: var(--blue); } .ob2-px.flat { color: var(--sub); }
.ob2-px.cur { border-color: var(--text); }
.ob2-tot { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--line); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ob2-tot .ob-ta { color: var(--blue); } .ob2-tot .ob-tb { color: var(--red); text-align: right; }
.ob2-reg { text-align: center; color: var(--sub); font-weight: 600; }
/* 체결 */
.tr-row { display: grid; grid-template-columns: 1fr 1fr 42px; gap: 8px; padding: 5px 10px;
  font-size: 13px; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--bg); }
.tr-t { color: var(--sub); font-size: 12px; }
.tr-p { font-weight: 600; text-align: right; }
.tr-q { color: var(--sub); text-align: right; }
/* 종목 정보 */
.stock-info { background: var(--bg); border-radius: 12px; padding: 6px 14px; }
.si-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.si-row:last-child { border-bottom: none; }
.si-src { margin-top: 10px; font-size: 11px; color: var(--sub); opacity: .7; text-align: right; }
.si-k { color: var(--sub); }
.si-v { font-weight: 600; font-variant-numeric: tabular-nums; }
.si-note { margin-top: 10px; font-size: 12px; line-height: 1.55; color: var(--sub); }
.si-note b { color: var(--text); font-weight: 700; }
#dvValWrap { margin-top: 24px; }   /* 계약 정보 카드와 옵션 가치 블럭 사이 여백 */
.dv-guide .dg-term { color: var(--text); font-weight: 700; }
.dv-guide .dg-desc { font-weight: 500; color: var(--sub); font-variant-numeric: normal; }
/* 좌측 옵션 시장 분위기 카드 */
.dv-mood:empty { display: none; }
.dv-mood { margin: 14px 10px 0; padding: 12px 14px; background: var(--bg); border-radius: 12px; }
.dm-h { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.dm-row { display: flex; justify-content: space-between; align-items: baseline; }
.dm-k { font-size: 12.5px; color: var(--sub); }
.dm-v { font-size: 16px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.dm-sub { font-size: 11.5px; color: var(--sub); margin-top: 2px; }
.dm-oi { font-size: 12px; font-weight: 700; color: var(--text); margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); }
.dm-oirow { display: flex; justify-content: space-between; align-items: baseline; margin-top: 5px; }
.dm-oirow b { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.dm-oirow span { font-size: 11.5px; color: var(--sub); }
.dm-src { font-size: 10.5px; color: var(--sub); opacity: .7; margin-top: 9px; }
.flow-qty { font-size: 11px; color: var(--sub); font-weight: 500; margin-left: 5px; }

/* ===== 종목 상세 탭 ===== */
.detail-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 4px 0 12px; overflow: hidden; }
.detail-tabs::-webkit-scrollbar { display: none; }
.detail-tabs button { flex: 0 0 auto; border: none; background: none; padding: 9px 12px 11px; font-size: 14px;
  font-weight: 700; color: var(--sub); cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.detail-tabs button.active { color: var(--text); border-bottom-color: var(--text); }
.detail-body { padding: 2px 0 8px; min-height: 200px; }
/* 종목정보·뉴스·커뮤니티 탭: 좌·우 블록 높이만큼 꽉 채우고(빈공간 없이 바닥까지), 내용이 더 길면 그때 내부 스크롤 */
.chart-panel > .detail-pane[data-dpane="info"],
.chart-panel > .detail-pane[data-dpane="news"],
.chart-panel > .detail-pane[data-dpane="community"] { flex: 1 1 0; min-height: 0; }
.detail-pane[data-dpane="info"] .detail-body,
.detail-pane[data-dpane="news"] .detail-body,
.detail-pane[data-dpane="community"] .detail-body { height: 100%; overflow-y: auto; padding-right: 10px; box-sizing: border-box; }
.detail-pane .detail-body::-webkit-scrollbar { width: 8px; }
.detail-pane .detail-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.detail-soon { color: var(--sub); font-size: 13px; text-align: center; padding: 48px 12px; }
.dt-h { font-size: 14px; font-weight: 800; color: var(--text); margin: 28px 0 10px; }
.dt-h:first-child { margin-top: 4px; }
.dt-sub { font-size: 11px; font-weight: 600; color: var(--sub); }
.detail-body .stock-info { margin-bottom: 4px; }
.mbr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mbr-col { background: var(--bg); border-radius: 12px; padding: 8px 13px; }
.mbr-hd { font-size: 12px; font-weight: 800; margin-bottom: 6px; }
.mbr-hd.up { color: var(--red); } .mbr-hd.down { color: var(--blue); }
.mbr-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 12.5px; border-bottom: 1px solid var(--line); }
.mbr-row:last-child { border-bottom: none; }
.mbr-n { color: var(--text); } .mbr-q { color: var(--sub); font-variant-numeric: tabular-nums; }
/* 우측 사이드바 거래원(좁은 폭 컴팩트) */
.sb-mbr-h { font-size: 16px; font-weight: 800; color: var(--text); margin: 22px 0 10px; }
.sb-mbr-h .hint { font-size: 11px; font-weight: 600; color: var(--sub); }
#sidebarMembers .mbr-grid { gap: 8px; }
#sidebarMembers .mbr-col { padding: 8px 10px; }
#sidebarMembers .mbr-row { font-size: 11.5px; padding: 4px 0; gap: 4px; }
#sidebarMembers .mbr-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sidebarMembers .mbr-q { flex-shrink: 0; }
/* 재무안정성 | 투자자동향 2열(좁으면 1열, 한쪽만 있으면 꽉 채움) */
.dt-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 16px; align-items: start; margin-top: 26px; }
.dt-two .dt-h { margin-top: 0; }
/* 투자지표 카드 */
.dt-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dt-card { background: var(--bg); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.dt-card-t { font-size: 12px; font-weight: 800; color: var(--sub); margin-bottom: 8px; }
.dt-card-row { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; font-size: 13px; }
.dt-card-row span { color: var(--sub); } .dt-card-row b { font-weight: 700; font-variant-numeric: tabular-nums; }
/* 뉴스·공시 리스트 */
.nx-list { display: flex; flex-direction: column; }
.nx-item { display: block; padding: 11px 4px; border-bottom: 1px solid var(--line); text-decoration: none; cursor: pointer; }
.nx-item:hover { background: var(--bg); border-radius: 6px; }
.nx-item:last-child { border-bottom: none; }
.nx-tt { font-size: 13.5px; color: var(--text); font-weight: 600; line-height: 1.45; }
.nx-meta { font-size: 12px; color: var(--sub); margin-top: 4px; display: flex; gap: 5px; align-items: center; }
.nx-dot { color: var(--line); }
.nx-news { display: flex; align-items: center; gap: 12px; }
.nx-body { flex: 1 1 auto; min-width: 0; }
.nx-ic { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 9px; object-fit: contain; background: #fff; border: 1px solid var(--line); padding: 5px; }
.nx-ic-ph { background: var(--bg); border: 1px solid var(--line); padding: 0; }
.nx-pinned { background: rgba(240,68,82,.05); border-radius: 8px; }
.nx-tag { display: inline-block; background: #f04452; color: #fff; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 5px; margin-right: 7px; vertical-align: middle; }
/* 공시 AI 요약 카드 — 공시 목록 맨 위(app-disclosure.js) */
.disc-card { border: 1px solid var(--line); border-radius: 14px; padding: 15px 16px 13px; margin: 4px 0 14px;
  background: linear-gradient(180deg, rgba(49,130,246,0.05), transparent 62%); }
.dcard-head { display: flex; align-items: center; gap: 7px; }
.dcard-spark { display: inline-flex; color: #3182f6; }
.dcard-spark svg { width: 15px; height: 15px; }
.dcard-head b { font-size: 14px; font-weight: 800; color: var(--text); }
.dcard-badge { font-size: 10.5px; font-weight: 800; color: #3182f6; background: #eef4ff; border-radius: 5px; padding: 1px 6px; }
[data-theme="dark"] .dcard-badge { background: #16263f; color: #6fa8ff; }
.dcard-sub { font-size: 12.5px; font-weight: 700; color: var(--sub); margin: 7px 0 0; }
.dcard-summary { font-size: 14px; line-height: 1.72; color: var(--text); margin: 9px 0 11px; white-space: pre-line; }
.dcard-loading { font-size: 13px; color: var(--sub); margin: 11px 0; }
.dcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dcard-origin { font-size: 13px; font-weight: 700; color: var(--accent, #3182f6); text-decoration: none; }
.dcard-origin:hover { text-decoration: underline; }
.dcard-src { font-size: 11px; color: var(--sub); }
.dcard-note { font-size: 11px; color: var(--sub); line-height: 1.55; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); }
.co-head { display: flex; align-items: center; justify-content: space-between; }
.co-home { font-size: 12px; font-weight: 700; color: var(--accent, #3182f6); text-decoration: none; border: 1px solid var(--line); border-radius: 8px; padding: 5px 11px; white-space: nowrap; }
.co-home:hover { background: var(--bg); }
.co-desc { background: var(--bg); border-radius: 10px; padding: 13px 15px; font-size: 13.5px; line-height: 1.6; color: var(--text); margin: 4px 0 6px; }
.co-src { color: var(--sub); font-size: 11px; }
.co-delisted { display: inline-block; background: #f04452; color: #fff; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 5px; vertical-align: middle; }
.pe-nm { font-weight: 600; }
/* 커뮤니티 */
.cm-write { margin-bottom: 16px; }
.cm-write textarea { width: 100%; min-height: 72px; resize: vertical; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; font-size: 14px; font-family: inherit; box-sizing: border-box; background: var(--card); color: var(--text); }
.cm-write textarea:focus { outline: none; border-color: #3182f6; }
.cm-wfoot { display: flex; justify-content: flex-end; margin-top: 8px; }
.cm-submit { background: #3182f6; color: #fff; border: none; border-radius: 8px; padding: 8px 20px; font-size: 14px; font-weight: 700; cursor: pointer; }
.cm-submit:hover { background: #1b64da; }
.cm-login { background: var(--bg); border-radius: 10px; padding: 16px; text-align: center; color: var(--sub); font-size: 14px; margin-bottom: 16px; }
.cm-list { display: flex; flex-direction: column; }
.cm-post { padding: 14px 2px; border-bottom: 1px solid var(--line); }
.cm-top { display: flex; align-items: center; gap: 8px; }
.cm-nick { font-weight: 700; font-size: 13.5px; }
.cm-time { color: var(--sub); font-size: 12px; }
.cm-del { margin-left: auto; border: none; background: none; color: var(--sub); cursor: pointer; font-size: 13px; padding: 2px 4px; }
.cm-del:hover { color: #f04452; }
.cm-body { font-size: 14.5px; line-height: 1.6; margin: 7px 0 9px; white-space: pre-wrap; word-break: break-word; }
.cm-acts { display: flex; gap: 8px; }
.cm-act { border: 1px solid var(--line); background: var(--card); border-radius: 16px; padding: 4px 12px; font-size: 12.5px; color: var(--sub); cursor: pointer; }
.cm-act:hover { background: var(--bg); }
.cm-act.on { color: #f04452; border-color: #f0445244; background: rgba(240,68,82,.06); }
.cm-comments { margin-top: 12px; padding-left: 12px; border-left: 2px solid var(--line); }
.cm-cload, .cm-cempty { color: var(--sub); font-size: 13px; padding: 4px 0 8px; }
.cm-c { display: flex; align-items: baseline; gap: 7px; padding: 6px 0; font-size: 13.5px; }
.cm-cnick { font-weight: 700; flex: 0 0 auto; }
.cm-cbody { flex: 1 1 auto; word-break: break-word; white-space: pre-wrap; }
.cm-ctime { color: var(--sub); font-size: 11px; flex: 0 0 auto; }
.cm-cdel { border: none; background: none; color: var(--sub); cursor: pointer; font-size: 12px; flex: 0 0 auto; }
.cm-cdel:hover { color: #f04452; }
.cm-cwrite { display: flex; gap: 6px; margin-top: 8px; }
.cm-cwrite input { flex: 1 1 auto; border: 1px solid var(--line); border-radius: 8px; padding: 7px 11px; font-size: 13px; background: var(--card); color: var(--text); }
.cm-cwrite input:focus { outline: none; border-color: #3182f6; }
.cm-cwrite button { border: none; background: var(--bg); border-radius: 8px; padding: 0 14px; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--text); }
.cm-more-wrap { text-align: center; margin-top: 14px; }
.cm-more { border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 9px 18px; font-size: 13px; cursor: pointer; color: var(--sub); }
.cm-more:hover { background: var(--bg); }

/* 모투 소식 공지 상세(가운데 패널) */
.nd-back { margin-bottom: 12px; }
.nd-back button { border: 1px solid var(--line); background: var(--card); border-radius: 9px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
.nd-back button:hover { background: var(--bg); }
.nd-card { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 18px; }
.nd-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.nd-badge { font-size: 12px; font-weight: 700; color: var(--blue); background: var(--bluebg); border-radius: 7px; padding: 3px 9px; }
.nd-author { font-size: 13px; font-weight: 800; color: var(--text); }
.nd-time { font-size: 12px; color: var(--sub); margin-left: auto; font-variant-numeric: tabular-nums; }
.nd-body { font-size: 14.5px; line-height: 1.65; color: var(--text); word-break: break-word; white-space: pre-wrap; }
.nd-comments { border-top: 1px solid var(--line); padding-top: 14px; }
.nd-ctitle { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.nd-ctitle span { color: var(--blue); }
.nd-title { font-size: 18px; font-weight: 800; color: var(--text); margin: 12px 0 8px; word-break: break-word; }
.nd-gallery { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.nd-gimg { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); cursor: zoom-in; transition: filter .15s; }
.nd-gimg:hover { filter: brightness(.93); }
.nd-edit { border: 1px solid var(--line); background: var(--card); color: var(--sub); font-size: 12px; font-weight: 700;
  border-radius: 8px; padding: 4px 11px; cursor: pointer; }
.nd-edit:hover { background: var(--bg); border-color: var(--blue); color: var(--blue); }

/* 공지 작성 모달 — 본문 textarea + 이미지 미리보기 */
.set-sec textarea { display: block; width: 100%; padding: 11px 14px; border: 1px solid transparent; border-radius: 12px;
  font-size: 15px; font-family: inherit; background: var(--bg); color: var(--text); outline: none; resize: vertical; box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s, background .15s; }
.set-sec textarea::placeholder { color: #aeb6c0; }
.set-sec textarea:focus { background: var(--card); border-color: var(--blue); box-shadow: 0 0 0 3px var(--bluebg); }
.ov-card.nc-modal { width: 600px; }
.nc-addimg input[type="file"] { display: none; }   /* .set-sec input{display:block}가 hidden 덮어쓰는 것 차단 */
.nc-addimg { white-space: nowrap; align-self: flex-start; }
.nc-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.nc-thumbs:empty { display: none; }
.nc-thumb { position: relative; width: 72px; height: 72px; }
.nc-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.nc-thumb-x { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: none;
  background: var(--gray); color: #fff; font-size: 11px; cursor: pointer; line-height: 1; }
.nc-addimg { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px;
  border: 1px dashed var(--line); border-radius: 11px; font-size: 13px; font-weight: 600; color: var(--sub); cursor: pointer; }
.nc-addimg:hover { border-color: var(--blue); color: var(--blue); }

/* 사진 라이트박스 */
.nlb { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.86); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 40px 20px; }
.nlb-x { position: fixed; top: 18px; right: 22px; width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.15); color: #fff; font-size: 18px; cursor: pointer; }
.nlb-x:hover { background: rgba(255,255,255,.3); }
.nlb-main { max-width: 92vw; max-height: 76vh; object-fit: contain; border-radius: 8px; }
.nlb-strip { display: flex; gap: 8px; max-width: 92vw; overflow-x: auto; padding: 4px; }
.nlb-thumb { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; cursor: pointer; opacity: .5;
  border: 2px solid transparent; flex: 0 0 auto; }
.nlb-thumb.on { opacity: 1; border-color: #fff; }
.nlb-thumb:hover { opacity: 1; }

.pe-self { background: rgba(49,130,246,.08); }
.pe-self .pe-nm { color: var(--accent, #3182f6); font-weight: 800; }
.nx-pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 0 2px; }
.nx-arrow { width: 30px; height: 30px; border: 1px solid var(--line); background: var(--card); border-radius: 8px; color: var(--text); font-size: 16px; cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center; }
.nx-arrow:hover:not(:disabled) { background: var(--bg); }
.nx-arrow:disabled { color: var(--line); cursor: default; }
.nx-pg { font-size: 13px; color: var(--sub); min-width: 48px; text-align: center; }
/* 재무 표 */
.fin-scroll { overflow-x: auto; }
.fin-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.fin-table th { color: var(--sub); font-weight: 600; text-align: right; padding: 7px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.fin-table td { text-align: right; padding: 7px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.fin-table .fin-k { text-align: left; color: var(--sub); font-weight: 600; }
.fin-table th.fin-r, .fin-table td.fin-r { text-align: right; }
@media (max-width: 1100px) { .dt-cards { grid-template-columns: 1fr; } }

/* 주문 */
.seg { display: flex; gap: 6px; margin-bottom: 10px; }
.seg button { flex: 1; padding: 9px; border: 1px solid var(--line); background: var(--card); border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--sub); }
.seg button.active { border-color: var(--blue); color: var(--blue); background: var(--bluebg); }
#sideSeg button[data-side="sell"].active { border-color: var(--blue); color: var(--blue); background: var(--bluebg); }
#sideSeg button[data-side="buy"].active { border-color: var(--red); color: var(--red); background: var(--redbg); }
#typeSeg.buy button.active { border-color: var(--red); color: var(--red); background: var(--redbg); }   /* 매수 땐 시장가/지정가도 빨강 */
.field { display: block; margin-bottom: 10px; }
.field span { display: block; font-size: 12px; color: var(--sub); margin-bottom: 4px; }
.field input { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 15px; text-align: right; font-variant-numeric: tabular-nums; }
.ofield { display: block; margin-bottom: 14px; }
.ofield .ol { display: block; font-size: 12px; color: var(--sub); margin-bottom: 7px; }
.stepper { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.stepper input { flex: 1; min-width: 0; border: none; padding: 14px 12px; font-size: 15px; text-align: right; font-variant-numeric: tabular-nums; outline: none; }
.stepper input:read-only { background: var(--bg); }
/* 스테퍼(+/- 버튼) 안 숫자 입력은 네이티브 스피너(위아래 화살표) 제거 */
.stepper input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.stepper input[type="number"]::-webkit-inner-spin-button,
.stepper input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper .st { width: 40px; height: 48px; border: none; border-left: 1px solid var(--line); background: var(--card); cursor: pointer; font-size: 16px; color: var(--sub); }
.stepper .st:hover { background: var(--bg); }
.pct-row { display: flex; gap: 6px; margin-bottom: 12px; }
.pct-row button { flex: 1; padding: 8px 0; border: 1px solid var(--line); background: var(--card); border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--sub); cursor: pointer; }
.pct-row button:hover { background: var(--bg); }
.total-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.total-v { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.avail { font-size: 12px; color: var(--sub); margin: 4px 0 12px; }
.submit { width: 100%; padding: 13px; border: none; border-radius: 12px; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
.submit:disabled { background: #c4c9d0 !important; cursor: not-allowed; }
.submit.buy { background: var(--red); }
.submit.sell { background: var(--blue); }
.order-msg { margin-top: 8px; font-size: 13px; text-align: center; min-height: 18px; }
.order-msg.ok { color: var(--red); }
.order-msg.err { color: var(--sub); }

/* 포트폴리오 */
.pf-total { background: var(--bg); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.pf-total .row { display: flex; justify-content: space-between; padding: 2px 0; font-variant-numeric: tabular-nums; }
.pf-total .big { font-size: 18px; font-weight: 800; }
.pf-row { display: flex; justify-content: space-between; padding: 8px 4px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.pf-row .left .nm { font-weight: 600; }
.pf-row .left .qt { font-size: 11px; color: var(--sub); }
.pf-row .right { text-align: right; }
.empty { color: var(--sub); font-size: 13px; padding: 8px 0; }
.reset-link { width: 100%; margin-top: 10px; padding: 9px; background: var(--bg); border: none; border-radius: 10px; color: var(--sub); font-size: 12px; cursor: pointer; }
.reset-link:hover { background: var(--line); }
.reset-link.broke { background: var(--redbg); color: var(--red); font-weight: 600; }
.history .h-row { display: flex; justify-content: space-between; padding: 6px 4px; border-top: 1px solid var(--line); font-size: 12px; font-variant-numeric: tabular-nums; }
.pend-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px; border-top: 1px solid var(--line); font-size: 12px; font-variant-numeric: tabular-nums; }
.pend-l b { margin-right: 4px; }
.pend-r { color: var(--sub); display: flex; align-items: center; gap: 6px; }
.pend-x { border: none; background: var(--bg); color: var(--sub); width: 20px; height: 20px; border-radius: 6px; cursor: pointer; font-size: 11px; }
.pend-x:hover { background: var(--redbg); color: var(--red); }

/* 주문 탭 (일반/빠른/조건) */
.ord-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.ord-tabs button { flex: 1; border: none; background: none; padding: 10px 4px 11px; font-size: 14px; font-weight: 700; color: var(--sub); cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
.ord-tabs button.active { color: var(--text); border-bottom-color: var(--text); }
/* 빠른주문 */
.q-avail { display: flex; justify-content: space-between; font-size: 12px; color: var(--sub); margin: 10px 2px; }
.q-avail b { color: var(--text); font-variant-numeric: tabular-nums; }
.q-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.q-btn { border: 1.5px solid; border-radius: 12px; padding: 16px; font-size: 15px; font-weight: 700; cursor: pointer; transition: filter .15s; }
.q-btn.buy { border-color: var(--red); color: var(--red); background: var(--redbg); }
.q-btn.sell { border-color: var(--blue); color: var(--blue); background: var(--bluebg); }
.q-btn:hover { filter: brightness(.97); }

/* 내 주식(선택 종목 보유 현황) 카드 */
.holding-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.hd-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 5px 0; }
.hd-row span { color: var(--sub); }
.hd-row b { font-variant-numeric: tabular-nums; font-weight: 700; }
.hd-head { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; margin-bottom: 8px; }
/* 내 주식이 주문창 위(패널 첫 블럭)로 올라옴 — 위 여백 제거, 주문창은 원래 자리 근처 유지 */
.order-panel > .hd-head { margin-top: 0; }
.order-panel > .ord-tabs { margin-top: 20px; }
/* 선물 포지션도 동일 — #derivOrder 안에 있어 위 선택자가 안 먹으므로 첫 블럭 여백 제거 */
#derivOrder > .hd-head { margin-top: 0; }
.hd-head h2 { margin-bottom: 0 !important; }   /* 여백을 헤더로 옮겨 버튼이 제목과 같은 높이에 오게 */
.hd-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; min-height: 145px; color: var(--sub); font-size: 13px; text-align: center; }
.hd-empty-ic { width: 46px; height: 46px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--sub); }
.hd-empty-ic svg { width: 25px; height: 25px; display: block; }
.hd-empty-txt { line-height: 1.55; }
.hd-empty-btn { display: inline-block; margin-top: 1px; background: var(--slate); color: #fff; border-radius: 10px; padding: 8px 20px; font-size: 13px; font-weight: 700; text-decoration: none; transition: background .15s; }
.hd-empty-btn:hover { background: var(--slate-h); }
.hd-calc { border: 1px solid var(--line); background: var(--bg); border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--text); padding: 5px 10px; cursor: pointer; }
.hd-calc:hover { background: var(--card); border-color: var(--blue); color: var(--blue); }

/* 물타기 계산기 팝업 (버튼 아래 드롭다운) */
.ad-pop { position: fixed; z-index: 300; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; width: 340px; max-width: 92vw; box-shadow: 0 16px 44px rgba(0,0,0,.18); }
.modal-head { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 800; margin-bottom: 12px; }
.modal-head b { color: var(--blue); }
.modal-x { border: none; background: var(--bg); width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--gray); transition: background .15s, color .15s; }
.modal-x:hover { background: var(--line); color: var(--text); }
.ad-now { font-size: 13px; color: var(--sub); margin-bottom: 12px; }
.ad-now b { color: var(--text); }
.ad-field { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ad-field span { font-size: 13px; color: var(--sub); }
.ad-field input { width: 170px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; outline: none; }
.ad-field input:focus { border-color: var(--blue); }
.ad-quick { display: flex; gap: 6px; margin-bottom: 14px; }
.ad-quick button { flex: 1; border: 1px solid var(--line); background: var(--bg); border-radius: 8px; font-size: 11px; padding: 7px 2px; cursor: pointer; color: var(--text); }
.ad-quick button:hover { border-color: var(--blue); color: var(--blue); }
.ad-result { background: var(--bg); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.ad-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 4px 0; }
.ad-row span { color: var(--sub); }
.ad-row b { font-variant-numeric: tabular-nums; font-weight: 700; }
.ad-row.hi b { font-size: 15px; }
.ad-row.hi em { font-style: normal; font-size: 11px; font-weight: 600; }
.ad-warn { font-size: 12px; color: var(--red); margin-top: 6px; }
.ad-apply { width: 100%; padding: 13px; border: none; border-radius: 12px; background: var(--red); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
.ad-apply:disabled { background: var(--line); color: var(--sub); cursor: default; }

/* 자동 주문 · 알림 */
.auto-h { margin-top: 18px; }
.auto-box { display: flex; flex-direction: column; gap: 10px; }
.auto-form { background: var(--bg); border-radius: 12px; padding: 10px 12px; }
.af-title { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 7px; display: flex; align-items: center; gap: 6px; }
.af-sub { font-size: 10px; font-weight: 500; color: var(--sub); background: var(--card); border-radius: 5px; padding: 1px 5px; }
.af-row { display: flex; gap: 6px; align-items: stretch; margin-top: 5px; }   /* stretch → 이상/이하·설정·입력 높이 정렬 */
.af-row input { flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; background: var(--card); outline: none; }
.af-row input:focus { border-color: var(--blue); }
.af-sel { padding: 7px 6px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; background: var(--card); }
/* 미니멀: 손절·익절·시작·설정 모두 뉴트럴 슬레이트(매수=빨강/매도=파랑은 실제 주문 버튼에만).
   기존 var(--text)는 다크에서 near-white로 튀고, 초록(#12b886)·검정이 제각각이라 통일 */
.af-btn { border: none; border-radius: 8px; padding: 7px 11px; font-size: 12px; font-weight: 700; cursor: pointer; background: var(--slate); color: #fff; flex-shrink: 0; transition: background .15s; }
.af-btn:hover { background: var(--slate-h); }
.seg.sm { display: flex; flex-shrink: 0; margin-bottom: 0; }   /* .seg의 margin-bottom 상속 제거 → af-row에서 위로 안 뜸 */
.seg.sm button { border: 1px solid var(--line); background: var(--card); font-size: 11px; padding: 6px 9px; cursor: pointer; color: var(--sub); }
.seg.sm button:first-child { border-radius: 8px 0 0 8px; } .seg.sm button:last-child { border-radius: 0 8px 8px 0; border-left: none; }
/* 알림 이상/이하 토글: 뉴트럴 슬레이트(빨강/파랑 제거 — 방향은 라벨로 구분) */
.seg.sm button.active { background: var(--slate); color: #fff; border-color: var(--slate); }
.auto-list { display: flex; flex-direction: column; }
.auto-empty { color: var(--sub); font-size: 12px; text-align: center; padding: 4px 0; }
#autoMsg:empty { min-height: 0; margin-top: 0; }   /* 메시지 없을 땐 빈 줄 안 차지 → 안내문 위로 */
.auto-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px; border-top: 1px solid var(--line); }
.ar-t { font-size: 12.5px; font-weight: 600; }
.ar-s { font-size: 11px; color: var(--sub); font-variant-numeric: tabular-nums; margin-top: 1px; }
.auto-x { border: none; background: var(--bg); color: var(--sub); width: 22px; height: 22px; border-radius: 6px; cursor: pointer; font-size: 11px; flex-shrink: 0; }
.auto-x:hover { background: var(--redbg); color: var(--red); }

/* 알림 종 + 토스트 */
.bell-wrap { position: relative; }
.bell-btn { position: relative; border: none; background: none; cursor: pointer; padding: 2px 4px; color: var(--sub); display: inline-flex; }
.bell-btn:hover { color: var(--text); }
.ic-bell { width: 21px; height: 21px; vertical-align: middle; display: block; }
.cur-alarm .ic-bell { width: 18px; height: 18px; }
.bell-badge { position: absolute; top: 0; right: 1px; background: var(--red); width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #fff; font-size: 0; padding: 0; }  /* 빨간 점(숫자 X) */
.bell-pop { position: absolute; top: 130%; right: 0; width: 300px; max-height: 380px; overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.14); z-index: 70; padding: 6px; }
.bell-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 6px; font-size: 13px; font-weight: 800; }
.bell-acts { display: inline-flex; gap: 8px; }
.bell-readall { border: none; background: none; color: var(--blue, #3182f6); font-size: 11.5px; font-weight: 700; cursor: pointer; padding: 2px 4px; }
.bell-clearall { border: none; background: none; color: #f04452; font-size: 11.5px; font-weight: 700; cursor: pointer; padding: 2px 4px; }
.bell-item { position: relative; padding: 9px 26px 9px 10px; font-size: 12.5px; line-height: 1.5; border-radius: 8px; }
.bell-x { position: absolute; top: 6px; right: 6px; border: none; background: none; color: #b0b8c1; font-size: 11px; cursor: pointer; padding: 2px 4px; line-height: 1; border-radius: 4px; }
.bell-x:hover { color: #f04452; background: rgba(240,68,82,.08); }
.bell-item.unread { background: var(--bluebg); }
.bell-item b { margin-right: 4px; }
.bell-item.clickable { cursor: pointer; transition: background .12s; }   /* 종목·파생 차트로 이동 가능한 알림 */
.bell-item.clickable:hover { background: rgba(49,130,246,.10); }
.bell-t { display: block; font-size: 10px; color: var(--sub); margin-top: 2px; }
.bell-empty { color: var(--sub); font-size: 12px; text-align: center; padding: 16px 0; }

/* 종목 알림 설정 (토스 스타일 팝업) */
.alarm-wrap { position: relative; display: inline-flex; }
.cur-alarm { background: none; border: none; cursor: pointer; font-size: 15px; opacity: .45; padding: 0 2px; line-height: 1; }
.cur-alarm:hover, .cur-alarm.on { opacity: 1; }
.alarm-pop { position: absolute; top: 140%; left: 0; width: 330px; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: 0 14px 36px rgba(0,0,0,.16); z-index: 80; padding: 18px; max-height: 78vh; overflow-y: auto; }
.alarm-pop h4 { font-size: 16px; font-weight: 800; margin: 0 0 3px; }
.alarm-sub { font-size: 12px; color: var(--sub); margin-bottom: 10px; }
.al-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--line); }
.al-row:first-of-type { border-top: none; }
.al-lab .al-px { font-size: 15px; font-weight: 700; }
.al-lab .al-d { font-size: 12px; color: var(--sub); margin-top: 1px; }
.al-d.up { color: var(--red); } .al-d.down { color: var(--blue); }
.tgl { width: 46px; height: 27px; border-radius: 14px; background: #d4d8de; border: none; position: relative; cursor: pointer; transition: background .15s; flex: none; }
.tgl.on { background: var(--slate); }
.tgl::after { content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.tgl.on::after { left: 22px; }
.al-add { display: flex; align-items: center; gap: 9px; color: var(--sub); font-size: 13px; font-weight: 600; cursor: pointer; padding: 10px 0 2px; }
.al-add .plus { width: 24px; height: 24px; border-radius: 50%; background: var(--bg); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; color: var(--text); }
.al-custom { display: none; margin: 8px 0 2px; }
.al-custom.open { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.al-pxin { position: relative; }
.al-pxin input { width: 100%; box-sizing: border-box; padding: 9px 30px 9px 11px; border: 1px solid var(--line); border-radius: 9px; font-size: 14px; }
.al-won { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--sub); font-size: 13px; pointer-events: none; }
.al-custom .al-autorow { border-top: none; padding: 2px 0; }
.al-cset { width: 100%; padding: 11px; border: none; border-radius: 10px; background: var(--slate); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; transition: background .15s, color .15s; }
.al-cset:disabled { background: var(--bg); color: var(--sub); cursor: default; }   /* 입력 유효할 때만 파랗게 */
.al-sec { background: var(--bg); border-radius: 12px; padding: 4px 12px; margin-top: 14px; }
.al-sec .al-row { border-top-color: var(--line); }
.al-mtitle { font-size: 13px; font-weight: 800; }
.al-mt-sub { font-size: 11px; color: var(--sub); margin-top: 1px; }
.al-pct-sel { border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; font-size: 12px; margin-left: 8px; }
.al-login { font-size: 12.5px; color: var(--sub); text-align: center; padding: 18px 0; }
.toasts { position: fixed; top: 70px; right: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { background: #191f28; color: #fff; border-radius: 12px; padding: 11px 15px; box-shadow: 0 8px 24px rgba(0,0,0,.25); min-width: 220px; max-width: 320px; display: flex; flex-direction: column; gap: 2px; animation: toastIn .3s ease-out; }
.toast b { font-size: 13px; } .toast span { font-size: 12px; color: #cbd5e1; }
.toast.hide { animation: toastOut .4s ease-in forwards; }
@keyframes toastIn { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { to { transform: translateX(40px); opacity: 0; } }

/* 랭킹 페이지 */
.rank-wrap { max-width: 680px; width: 100%; box-sizing: border-box; margin: 16px auto 40px; padding: 0 16px; }  /* body flex 자식 shrink-to-fit 방지 */
.rank-title { font-size: 24px; font-weight: 800; }
.rank-sub { color: var(--sub); font-size: 13px; margin: 6px 0 18px; }
.my-rank { background: var(--bluebg); border-radius: 12px; padding: 12px 16px; font-size: 14px; margin-bottom: 14px; }
.my-rank a { color: var(--blue); font-weight: 700; text-decoration: none; }
.rank-table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card); }
.rank-table th { text-align: right; font-size: 12px; color: var(--sub); font-weight: 600; padding: 12px 14px; background: var(--bg); }
.rank-table th:nth-child(2) { text-align: left; }
.rank-table td { padding: 12px 14px; border-top: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; }
.rank-table td.rk { text-align: center; width: 56px; font-weight: 700; }
.rank-table td.nk { text-align: left; font-weight: 600; }
.rank-table tr.me { background: var(--bluebg); }
.metag { font-size: 10px; background: var(--blue); color: #fff; border-radius: 4px; padding: 1px 5px; margin-left: 4px; }

/* ===== 월별 랭킹 시즌 UI ===== */
.rank-wrap { text-align: center; }
.rank-title { font-size: 26px; font-weight: 800;
  background: linear-gradient(135deg, #3182f6, #12b886); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* 제목이 그라디언트 텍스트(color:transparent)라 아이콘엔 명시 색 필요(currentColor면 안 보임) */
.rank-title .title-ic { width: 25px; height: 25px; vertical-align: -4px; margin-right: 8px; color: #3182f6; }
.my-rank { text-align: left; }

/* 월 네비게이터 */
.rank-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0 22px; }
.rnav-btn { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line); background: var(--card);
  font-size: 20px; color: var(--text); cursor: pointer; line-height: 1; transition: all .12s; }
.rnav-btn:hover:not(:disabled) { background: var(--bluebg); border-color: var(--blue); color: var(--blue); }
.rnav-btn:disabled { opacity: .3; cursor: default; }
.rank-month { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800;
  min-width: 160px; justify-content: center; }
.rank-live { font-size: 10px; font-weight: 800; letter-spacing: .5px; color: #fff; background: var(--red);
  border-radius: 5px; padding: 2px 6px; animation: livepulse 1.6s infinite; }
@keyframes livepulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* 시상대(top 3) */
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 12px; margin-bottom: 22px; }
.pod-col { flex: 1; max-width: 200px; display: flex; flex-direction: column; align-items: center; }
.pod-col.empty { visibility: hidden; }
.pod-medal { font-size: 30px; margin-bottom: 6px; line-height: 1; }
.pod-col.p1 .pod-medal { font-size: 42px; }
.pod-bar { width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px 10px; box-shadow: 0 6px 18px rgba(0,0,0,.05); }
.pod-col.p1 .pod-bar { padding: 30px 10px; border-color: #ffd43b;
  background: linear-gradient(180deg, #fffbe6, #fff); box-shadow: 0 12px 28px rgba(250,176,5,.20); }
.pod-col.p2 .pod-bar { padding: 22px 10px; }
.pod-nick { font-weight: 800; font-size: 14px; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod-pct { font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }
.pod-total { font-size: 12px; color: var(--sub); margin-top: 3px; font-variant-numeric: tabular-nums; }
.pod-col.me .pod-bar { outline: 2px solid var(--blue); }
.rank-empty { color: var(--sub); font-size: 14px; padding: 30px 0; }

/* 4위 이하 표 꾸미기 */
.rank-table { border-radius: 18px; }
.rank-table td { padding: 12px 16px; vertical-align: middle; }
.rank-table tbody tr { transition: background .12s; }
.rank-table tbody tr:hover { background: var(--bg); }
.rank-table td.rk { display: flex; align-items: center; gap: 6px; justify-content: center; }
.rk-no { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px;
  padding: 0 6px; border-radius: 9px; background: var(--bg); font-weight: 800; font-size: 13px; color: var(--text); }
.rk-ava { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 50%; background: linear-gradient(135deg, #5C7CFA, #38D9A9); color: #fff;
  font-weight: 800; font-size: 13px; margin-right: 10px; flex-shrink: 0; }
.rank-table td.nk { display: flex; align-items: center; }
.rk-name { font-weight: 700; }
.rk-pct { display: inline-block; padding: 4px 9px; border-radius: 8px; font-weight: 800;
  font-variant-numeric: tabular-nums; background: var(--bg); color: var(--sub); }
.rk-pct.up { background: var(--redbg); color: var(--red); }
.rk-pct.down { background: var(--bluebg); color: var(--blue); }
/* 순위 변동 화살표 */
.mv { font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mv-up { color: #12b886; }
.mv-down { color: var(--red); }
.mv-same { color: var(--sub); }
.mv-new { font-size: 9px; background: #12b886; color: #fff; border-radius: 4px; padding: 1px 4px; }
/* 본인 행 강조 */
.rank-table tr.me { background: var(--bluebg); box-shadow: inset 3px 0 0 var(--blue); }
.rank-table tr.me:hover { background: var(--bluebg); }

/* 마이페이지 */
.my-wrap { max-width: 560px; width: 100%; box-sizing: border-box; margin: 30px auto; padding: 0 16px; }  /* body flex 자식 shrink-to-fit 방지 */
.my-label { color: var(--sub); font-size: 14px; }
.my-total { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 4px; }
.my-pnl { font-size: 15px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }
.donut-box { display: flex; justify-content: center; padding: 26px 0; }
.my-tabs { display: flex; gap: 6px; justify-content: center; background: var(--bg); padding: 4px; border-radius: 12px; width: fit-content; margin: 0 auto 16px; }
.my-tabs button { padding: 8px 18px; border: none; background: transparent; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--sub); cursor: pointer; }
.my-tabs button.active { background: var(--card); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.my-tab-sep { align-self: center; width: 1px; height: 16px; background: var(--line); margin: 0 4px; }   /* 주식 탭 ↔ 파생 탭 구분(성격이 다름) */
.my-list { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.my-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.my-row:last-child { border-bottom: none; }
.my-dot { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.my-nm { flex: 1; }
.my-nm .nm { font-weight: 700; font-size: 15px; }
.my-nm .vl { color: var(--sub); font-size: 13px; font-variant-numeric: tabular-nums; }
.my-pct { font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; }
.my-row.clickable { cursor: pointer; }
.my-row.clickable:hover { background: var(--bg); }
.my-row.sel { background: var(--bluebg); }
/* 파생 포지션(선물·옵션) — 도넛/보유목록엔 안 잡혀 별도 카드로 표시 */
.my-deriv:empty { display: none; }
.my-deriv { margin-top: 14px; }
.myd-h { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.myd-h .hint { font-weight: 500; font-size: 12px; color: var(--sub); margin-left: 6px; }
.my-deriv .myd-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 13px 16px; margin-bottom: 8px; }
.my-deriv .myd-row:last-child { margin-bottom: 0; }
.myd-nm { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 7px; }
.myd-tag { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.myd-tag.fut { background: var(--bluebg); color: var(--blue); }
.myd-tag.opt { background: var(--redbg); color: var(--red); }
.myd-sub { color: var(--sub); font-size: 12.5px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.myd-r { text-align: right; }
.myd-val { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.myd-pnl { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }
.myd-pnl-l { color: var(--sub); font-weight: 500; margin-right: 3px; }   /* '손익' 라벨 — 손익값 색과 무관하게 회색 */
.my-deriv .myd-row.clickable { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.my-deriv .myd-row.clickable:hover { border-color: var(--sub); }
.my-deriv .myd-row.dv-sel { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }   /* 손익그래프에 뜬 포지션 */
/* 파생 손익 다이어그램(파생 탭 상단 — 도넛 대신). 카드 박스 없이 배경 위에, 차트만 흰 패널 */
.dv-payoff:empty { display: none; }
.dv-payoff { margin: 22px auto 6px; max-width: 620px; }
.pf-head { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.pf-tag.fut { background: var(--bluebg); color: var(--blue); }
.pf-tag.opt { background: var(--redbg); color: var(--red); }
.pf-desc { font-size: 12.5px; color: var(--sub); margin: 6px 0 12px; line-height: 1.5; }
.pf-svg { width: 100%; height: auto; display: block; color: var(--text); }
.pf-svg text { fill: currentColor; }
.pf-panel { fill: var(--card); }
/* 이익=빨강 / 손실=파랑 (앱 전체 손익 색과 통일). 0선에서 멀수록 진해지는 그라데이션 */
.pf-gain0 { stop-color: var(--red); stop-opacity: .26; }
.pf-gain1 { stop-color: var(--red); stop-opacity: .03; }
.pf-loss0 { stop-color: var(--blue); stop-opacity: .03; }
.pf-loss1 { stop-color: var(--blue); stop-opacity: .22; }
.pf-zero { stroke: var(--sub); stroke-width: 1.1; opacity: .4; }
.pf-line { fill: none; stroke-width: 2.8; stroke-linejoin: round; stroke-linecap: round; }
.pf-line-up { stroke: var(--red); }
.pf-line-down { stroke: var(--blue); }
.pf-mk { stroke: var(--sub); stroke-width: 1; stroke-dasharray: 3 3; opacity: .4; }
.pf-ylbl { font-size: 10.5px; fill: var(--sub); font-variant-numeric: tabular-nums; }
.pf-pill { fill: var(--card); stroke: var(--line); stroke-width: 1; }
.pf-plbl { font-size: 11px; font-weight: 600; fill: var(--sub); }
.pf-axcap { font-size: 10.5px; fill: var(--sub); opacity: .75; }
.pf-dot { stroke: var(--card); stroke-width: 2; }
.pf-dot-up { fill: var(--red); }
.pf-dot-down { fill: var(--blue); }
.pf-dot-zero { fill: var(--sub); }
.pf-foot { font-size: 12.5px; color: var(--sub); margin-top: 10px; text-align: center; }
#dvTrades:empty { display: none; }
#dvTrades { margin-top: 30px; }   /* 위 파생 포지션 표와 붙지 않게 여유 */
/* 마이페이지 종목별 거래내역 */
#myTrades { margin-top: 30px; }   /* 위 보유목록/파생과 확실히 띄움 */
.mt-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 15px; margin-bottom: 8px; }
/* 섹션 헤더 라인 아이콘(이모지 대신 모노톤) — AI·성과·업적·히스토리 제목 앞 */
.sec-ic { width: 17px; height: 17px; vertical-align: -3px; margin-right: 7px; color: var(--sub); }
.btn-ic { width: 14px; height: 14px; vertical-align: -2.5px; margin-right: 5px; }   /* 버튼 내 라인 아이콘(색=버튼 글자색 상속) */
.mt-close { border: none; background: var(--bg); color: var(--sub); border-radius: 8px; padding: 5px 10px; cursor: pointer; font-size: 12px; }
.mt-table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.mt-table th { text-align: right; font-size: 12px; color: var(--sub); font-weight: 600; padding: 10px 14px; background: var(--bg); }
.mt-table th:first-child { text-align: left; }
.mt-table td { padding: 10px 14px; border-top: 1px solid var(--line); text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
.mt-table td:first-child { text-align: left; }
.mt-table td.mt-t { color: var(--sub); font-size: 12px; }

/* 헤더 내비 */
.nav { display: flex; align-items: center; gap: 18px; }
.nav a { color: var(--sub); font-size: 14px; font-weight: 600; text-decoration: none; }
.nav a:hover { color: var(--text); }

/* 구글 로그인 버튼 */
.google-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; font-size: 15px; font-weight: 600;
  color: var(--text); cursor: pointer; text-decoration: none; margin-top: 4px; }
.google-btn:hover { background: var(--bg); }
.auth-divider { display: flex; align-items: center; gap: 10px; color: var(--sub); font-size: 12px; margin: 16px 0; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

@media (max-width: 1100px) {
  /* 스택 순서: 지수 → 실시간 시세 → 차트(호가·AI) → 주문. 1fr 행 제거(지수 카드가 남는 높이 다 먹던 문제) */
  .layout { grid-template-columns: 1fr; grid-template-rows: auto; grid-auto-rows: auto;
    grid-template-areas: "indices" "list" "chart" "order" "aux";   /* 부가블록(지금뜨는산업·소식·일정)을 맨 아래로 → 종목 누르면 차트 먼저 */
    max-width: 800px; }
  .left-col { display: contents; }   /* 래퍼 해제 → list-panel·aux-panel이 layout 그리드 직속으로 재배치됨 */
  .list-panel { align-self: start; }
  /* 단일 컬럼에선 팝오버가 화면 밖으로 나가지 않게 다시 흐름 배치로 */
  .scr-panel { position: static; right: auto; width: auto; margin: 8px 0 4px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
  #indexBar.idx-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-auto-flow: row; min-height: 230px; }
  /* 코스피 특집 카드 → 미니 카드와 같은 높이의 가로형(그래프 왼쪽 · 수급 오른쪽) */
  /* 한 줄 배치: [스파크] 이름·지수  개인·외국인·기관  등락률·KIS. feat-head를 풀어 순서 재배치 */
  /* 두 줄 배치: 1줄=[스파크] 이름·지수 등락률·KIS(미니카드처럼 숫자 바로 옆), 2줄=수급 우측정렬 */
  .idx-feat { grid-column: 1 / -1; grid-row: auto; flex-flow: row wrap; align-items: center; column-gap: 10px; row-gap: 2px; padding: 8px 15px; }
  .idx-feat .feat-head { display: contents; }         /* 이름·등락률을 idx-feat 직속 아이템으로 풀어 순서 재배치 */
  .idx-feat .feat-spark { order: 1; flex: 0 0 66px; height: 36px; min-height: 0; margin-top: 0; }
  .idx-feat .feat-title { order: 2; align-items: baseline; }
  .idx-feat .feat-lv { font-size: 17px; }
  .idx-feat .feat-chwrap { order: 3; flex-direction: row; align-items: baseline; gap: 4px; }   /* 등락률: 지수 바로 옆(미니카드 일관성) */
  .idx-feat .feat-unit { display: inline; }           /* KIS·억원 라벨 복구 */
  .idx-feat .ff-row { order: 4; position: static; flex: 0 0 100%; margin: 2px 0 0;
    justify-content: flex-end; gap: 16px; overflow: visible; }   /* 수급 3종: 2줄 우측정렬 */
}

/* 뒤로가기: 로고(헤더) 아래 줄 */
.subnav { max-width: 1000px; width: 100%; box-sizing: border-box; margin: 16px auto 0; padding: 0 16px; }  /* body flex 자식 shrink-to-fit 방지 */
.subnav-rank { max-width: 680px; }   /* 랭킹 콘텐츠(680px) 왼쪽에 맞춤 */

/* 마이페이지 2단: 왼쪽 자산 / 오른쪽 거래내역 */
.my-layout { display: flex; gap: 24px; align-items: flex-start; width: 100%;
  max-width: none; margin: 16px auto 40px; padding: 0 32px; }   /* 좌우 꽉 채움(고정폭 해제) */
.my-main { flex: 1 1 0; min-width: 0; }
.my-main .my-tabs { margin: 0 auto 16px; }
.my-side { flex: 1 1 0; min-width: 0; }   /* 좌우 1:1 */
/* AI 포트폴리오 분석 카드 */
.ai-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin-bottom: 16px; box-shadow: var(--shadow-card); }
.ai-head { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 15px; }
.ai-btn { padding: 7px 14px; border: none; border-radius: 9px; background: linear-gradient(135deg, #3182f6, #12b886); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; }
.ai-btn:disabled { opacity: .6; cursor: default; }
.ai-body { margin-top: 12px; }
.ai-empty { color: var(--sub); font-size: 13px; padding: 14px 0; text-align: center; }
.ai-score { display: flex; align-items: baseline; gap: 6px; }
.ai-score-n { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ai-score-s { color: var(--sub); font-size: 13px; }
.ai-bd-toggle { margin-left: auto; border: 1px solid var(--line); background: var(--bg); border-radius: 7px; font-size: 11px; color: var(--sub); padding: 3px 8px; cursor: pointer; align-self: center; }
.ai-bd { margin: 8px 0 4px; background: var(--bg); border-radius: 10px; padding: 8px 10px; }
.ai-bd-row { display: flex; justify-content: space-between; font-size: 12px; line-height: 1.9; }
.ai-bd-row b { font-variant-numeric: tabular-nums; }
.ai-summary { margin: 8px 0 12px; font-size: 14px; line-height: 1.6; font-weight: 600; }
.ai-sec { margin-top: 10px; }
.ai-sec h4 { font-size: 13px; margin-bottom: 4px; }
.ai-sec ul { list-style: none; padding: 0; margin: 0; }
.ai-sec li { font-size: 13px; color: var(--text); line-height: 1.6; padding-left: 12px; position: relative; }
.ai-sec li::before { content: "·"; position: absolute; left: 2px; color: var(--sub); }
.ai-note { margin-top: 12px; font-size: 11px; color: var(--sub); border-top: 1px solid var(--line); padding-top: 8px; }
.mt-empty { background: var(--card); border: 1px dashed var(--line); border-radius: 16px;
  color: var(--sub); text-align: center; padding: 40px 20px; font-size: 14px; line-height: 1.7; }

/* 거래내역 구분 태그 */
.mt-tag { font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.mt-tag.cancel { background: var(--bg); color: var(--sub); }
.mt-tag.wait { background: var(--bluebg); color: var(--blue); }
.mt-cancel td { opacity: .65; }
.mt-table td:nth-child(2) { text-align: left; }
.mt-table th:nth-child(2) { text-align: left; }

@media (max-width: 900px) {
  .my-layout { flex-direction: column; align-items: stretch; }   /* flex-start면 my-main이 폭에 안 맞고 콘텐츠 크기로 삐져나감 */
  .my-side { width: 100%; position: static; }
}

/* 도넛 + 우측 고정 팝업 */
.donut-box { position: relative; display: flex; align-items: center; justify-content: center;
  gap: 18px; flex-wrap: wrap; padding: 20px 0; }
/* 그래프 있든 없든 같은 크기(아래 목록 위치 고정) */
#donut { width: 210px; height: 210px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#donut .empty { padding: 0 !important; }
.dseg { cursor: pointer; transition: opacity .15s; }
.dseg.dim { opacity: .3; }
#donutCenter text { pointer-events: none; }
.dc-lbl { fill: var(--sub); font-size: 12px; }
.dc-val { fill: var(--text); font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* 그래프 오른쪽에 고정으로 뜨는 상세 팝업 */
.donut-pop { width: 240px; min-height: 156px; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 16px 18px; box-shadow: 0 6px 18px rgba(0,0,0,.05);
  display: flex; flex-direction: column; justify-content: center; transition: box-shadow .15s; }
.donut-pop.show { box-shadow: 0 12px 30px rgba(0,0,0,.10); }
.donut-pop.pinned { border-color: var(--blue); }
.dp-hint { color: var(--sub); font-size: 13px; text-align: center; line-height: 1.7; }
.dp-sub2 { font-size: 12px; color: var(--blue); }
.dp-pin { font-size: 11px; color: var(--blue); text-align: center; margin-top: 10px; }
.dp-nm { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; margin-bottom: 10px; }
.dp-dot { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.dp-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 5px 0; font-size: 13px; }
.dp-row > span { color: var(--sub); white-space: nowrap; flex-shrink: 0; }
.dp-row > b { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.dp-row.pnl { border-top: 1px solid var(--line); margin-top: 5px; padding-top: 9px; }
.dp-row.pnl > b { white-space: nowrap; }

/* 마이페이지: 홈으로(자산 위) + 인생 N회차 바 */
.my-back { margin-bottom: 12px; }   /* 랭킹 홈버튼과 동일 간격 */
.life-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.life-badge { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px;
  background: var(--bluebg); color: var(--blue); font-size: 13px; font-weight: 800; }
.life-btn { padding: 7px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer; transition: all .15s; }
.life-btn:hover { background: var(--bg); }
.life-btn.danger { color: var(--red); border-color: var(--redbg); background: var(--redbg); }
.life-btn.danger:hover { background: #fbdde1; }
.life-btn:disabled { opacity: .55; cursor: default; }

/* 공용 오버레이(파산/히스토리 모달) */
.ov { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.ov-card { background: var(--card); border-radius: 18px; padding: 22px; width: 520px; max-width: 94vw;
  max-height: 86vh; overflow-y: auto; box-shadow: 0 24px 70px rgba(0,0,0,.25); }
.ov-warn { color: var(--sub); font-size: 13px; line-height: 1.6; margin: 4px 0 16px; }
.ov-warn b { color: var(--text); }

/* 계정 설정 모달 */
.ov-card.set-modal { width: 400px; padding: 24px 24px 26px; }
.set-modal .modal-head { font-size: 16px; margin-bottom: 3px; }
.set-sub { font-size: 12.5px; color: var(--sub); margin: 0 0 22px; }
.set-sec { display: flex; flex-direction: column; gap: 8px; }
.set-sec + .set-sec { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.set-label { font-size: 11.5px; font-weight: 700; color: var(--sub); letter-spacing: .3px; text-transform: uppercase; }
.set-sec input { display: block; width: 100%; height: 46px; padding: 0 14px; border: 1px solid transparent;
  border-radius: 12px; font-size: 15px; background: var(--bg); color: var(--text); outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s; }
.set-sec input::placeholder { color: #aeb6c0; }
.set-sec input:focus { background: var(--card); border-color: var(--blue); box-shadow: 0 0 0 3px var(--bluebg); }
.set-foot { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.set-foot .set-msg, .set-foot .nick-msg { flex: 1; min-height: 0; margin: 0; font-size: 12px; font-weight: 600; line-height: 1.4; }
.set-msg.ok, .nick-msg.ok { color: #12b886; }
.set-msg.bad, .nick-msg.bad { color: var(--red); }
.set-btn { width: auto; min-width: 76px; height: 40px; padding: 0 20px; font-size: 14px;
  border-radius: 11px; margin-top: 0; flex-shrink: 0; background: var(--gray); }
.set-btn:hover { filter: none; background: #3d4754; }
.set-note { color: var(--sub); font-size: 13px; line-height: 1.6; background: var(--bg);
  border-radius: 12px; padding: 13px 15px; }

/* 시드머니 고르기 카드 */
.seed-grid { display: flex; flex-direction: column; gap: 10px; }
.seed-card { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; border: 1.5px solid var(--line);
  border-radius: 14px; background: var(--card); cursor: pointer; text-align: left; transition: all .15s; }
.seed-card:hover { border-color: var(--blue); background: var(--bluebg); }
.seed-card:disabled { opacity: .55; cursor: default; }
.seed-amt { font-size: 19px; font-weight: 800; }
.seed-desc { font-size: 12px; color: var(--sub); }

/* 히스토리 모달 */
.hist-body { display: flex; flex-direction: column; gap: 18px; }
.hist-life { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.hist-life-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.hist-meta { font-size: 12px; color: var(--sub); }
.hist-cash { font-size: 13px; color: var(--sub); margin-bottom: 10px; }
.hist-cash b { color: var(--text); font-weight: 700; }
.hist-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hist-table th { text-align: left; color: var(--sub); font-weight: 600; font-size: 12px;
  padding: 6px 8px; border-bottom: 1px solid var(--line); }
.hist-table td { padding: 8px; border-bottom: 1px solid var(--bg); vertical-align: top;
  font-variant-numeric: tabular-nums; }
.hist-table tr:last-child td { border-bottom: none; }
.hist-nm { font-weight: 700; white-space: nowrap; }
.hist-usd { display: block; color: var(--sub); font-size: 11px; margin-top: 2px; }
.hist-none { color: var(--sub); }
.hist-rt-h, .hist-rt { text-align: right; white-space: nowrap; }
.hist-rt b { font-weight: 700; }

/* 랭킹: 시드머니별 3단(천만/1억/10억) */
.rank-wrap-wide { width: 100%; max-width: 1240px; padding: 0 24px; display: flex; flex-direction: column; }   /* 너비 줄임 */
/* 위쪽 정렬: 홈으로·제목·카드가 헤더 바로 아래부터 시작(세로 중앙정렬 안 함 — 짧아도 안 붕 뜨게).
   빈 공간은 카드 아래 한 곳으로 모이고, 푸터는 스티키로 바닥 고정. */
.rank-back-row { text-align: left; margin-bottom: 12px; }   /* 홈으로: 좌측 상단(흐름 안) */
.tiers { display: flex; gap: 18px; align-items: stretch; margin-bottom: 18px; }   /* stretch=세 열 높이 통일 */
.tier-col { flex: 1; min-width: 0; min-height: 460px; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 16px 16px; text-align: left; }   /* min-height: 참가자 적어도 카드가 충분히 커 푸터가 위로 안 뜸 */
.tier-col.mine { border-color: #ffd43b; box-shadow: 0 8px 28px rgba(255,201,71,.20); }   /* 내가 속한 시드 카드만 금색 강조 */
.tier-head { display: flex; flex-direction: column; align-items: center; margin-bottom: 4px; }
.tier-eyebrow { font-size: 11px; font-weight: 600; color: var(--sub); letter-spacing: .06em; margin-bottom: 4px; }
.tier-amtrow { display: flex; align-items: center; justify-content: center; gap: 8px; }
/* 금액 글자가 '정확히' 카드 중앙에 오도록 — 아이콘(20px)과 같은 폭의 투명 스페이서를 오른쪽에 둬
   좌우 대칭을 만든다(아이콘+글자 덩어리 중앙정렬이면 글자만 보면 오른쪽으로 밀려 보임) */
.tier-amtrow::after { content: ""; width: 20px; flex: none; }
.tier-money { display: inline-flex; color: var(--sub); }   /* 시드별 돈 아이콘 — 모노톤 */
.tier-money svg { width: 20px; height: 20px; }
.tier-amt { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }   /* 두께 800→700 완화 */
.tier-col.mine .tier-money { color: #d3a72a; }   /* 내 시드 카드 아이콘엔 살짝 금색 힌트 */
[data-theme="dark"] .tier-col.mine .tier-money { color: #e0b83a; }
.tier-headrow { display: flex; justify-content: space-between; font-size: 11px; color: var(--sub);
  padding: 0 6px 8px; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.tr-list { list-style: none; margin: 0; padding: 0; }
.tr { display: flex; align-items: center; gap: 9px; padding: 10px 6px; border-bottom: 1px solid var(--bg); }
.tr:last-child { border-bottom: none; }
.tr-rank { flex-shrink: 0; width: 26px; text-align: center; font-weight: 800; font-size: 13px; color: var(--sub); }
.tr-rank.medal { font-size: 17px; }
.tr-id { flex: 1; min-width: 0; }
.tr-nick { display: block; font-weight: 700; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-life { display: inline-block; margin-top: 3px; font-size: 10px; font-weight: 700; color: var(--blue);
  background: var(--bluebg); border-radius: 999px; padding: 2px 7px; }
.tr-stat { flex-shrink: 0; text-align: right; line-height: 1.25; }
.tr-pct { display: block; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tr-won { display: block; font-size: 11px; font-variant-numeric: tabular-nums; margin-top: 1px; }
.tr.me { background: var(--bluebg); border-radius: 10px; box-shadow: inset 4px 0 0 var(--blue); }
.tier-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--sub); font-size: 13px; text-align: center; }   /* flex:1+center=키 큰 카드 안에서 세로 중앙 */
.tier-empty-ic { color: var(--sub); opacity: .45; }   /* 얇은 라인 포디움(이모지 대신 담백하게) */
.tier-empty-ic svg { width: 30px; height: 30px; display: block; }

@media (max-width: 760px) {
  .rank-wrap-wide { padding: 0 16px; }
  .tiers { flex-direction: column; gap: 14px; }
  .tier-col:nth-child(2) { order: -1; }   /* 모바일: 1억(가운데)을 맨 위로 */
  .tier-col { min-height: 0; }   /* 세로 스택이라 3열 높이 통일 불필요 → 빈 카드 460px 낭비 제거 */
}

/* ===== 성과 분석 (마이페이지) ===== */
.perf-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin-top: 16px; box-shadow: var(--shadow-card); }
.perf-head { display: flex; align-items: baseline; gap: 10px; font-weight: 700; font-size: 15px; margin-bottom: 12px; }
.perf-sub { font-size: 11.5px; color: var(--sub); font-weight: 400; }
.perf-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 14px; }
.pf-stat { background: var(--bg); border-radius: 10px; padding: 9px 11px; display: flex; flex-direction: column; gap: 3px; }
.pf-stat .pf-l { font-size: 11px; color: var(--sub); }
.pf-stat b { font-size: 14px; }
.pf-stat .pf-s { font-size: 11px; color: var(--sub); font-weight: 400; }
#perfChart { width: 100%; height: 200px; display: block; }
.perf-legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--sub); margin-top: 8px; }
.perf-legend .pl-me { color: #5C7CFA; }
.perf-legend .pl-bm { color: #adb5bd; }
.perf-legend .pl-note { margin-left: auto; }
@media (max-width: 720px) { .perf-stats { grid-template-columns: repeat(2, 1fr); } }

/* AI 리포트 — 섹터 분포 바 + 종목별 코멘트 */
.ai-sector-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 12px; }
.ai-sector-nm { width: 72px; color: var(--sub); flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-sector-bar { flex: 1; height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.ai-sector-bar i { display: block; height: 100%; border-radius: 4px; }
.ai-sector-v { width: 44px; text-align: right; font-weight: 600; font-size: 11.5px; }
.ai-stock-row { display: flex; gap: 8px; align-items: baseline; margin-bottom: 5px; font-size: 12px; line-height: 1.5; }
.ai-stock-row b { flex-shrink: 0; }
.ai-stock-row span { color: var(--sub); }

/* 전체 거래 히스토리 */
.mt-sub { font-size: 11px; color: var(--sub); font-weight: 400; margin-left: 6px; }
.mt-scroll { max-height: 430px; overflow-y: auto; }
.mt-nm { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 주문 패널 예상 수수료 */
.order-fee { font-size: 11px; color: var(--sub); margin: -2px 0 6px; min-height: 14px; }
.order-fee b { color: var(--text); font-weight: 600; }

/* ===== 온보딩 투어 ===== */
.tour-overlay { position: fixed; inset: 0; z-index: 9000; }
.tour-spot { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(15, 20, 30, .62);
             transition: all .35s ease; pointer-events: none; }
.tour-tip { position: fixed; width: 300px; background: var(--card); border-radius: 14px;
            padding: 14px 16px; box-shadow: 0 8px 30px rgba(0,0,0,.25); transition: all .35s ease; }
.tour-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.tour-title { font-weight: 800; font-size: 15px; }
.tour-step { font-size: 11px; color: var(--sub); }
.tour-body { font-size: 12.5px; line-height: 1.6; color: var(--text); margin-bottom: 12px; }
.tour-btns { display: flex; justify-content: space-between; }
.tour-skip { background: none; border: none; color: var(--sub); font-size: 12px; cursor: pointer; padding: 6px 4px; }
.tour-next { background: var(--slate); color: #fff; border: none; border-radius: 9px;
             padding: 7px 16px; font-size: 13px; font-weight: 700; cursor: pointer; }
.tour-next:hover { filter: brightness(1.08); }
/* 선물/옵션 첫 진입 개념 설명 카드 */
.dintro-overlay { position: fixed; inset: 0; z-index: 9100; background: rgba(15,20,30,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px; animation: dintroFade .2s ease; }
@keyframes dintroFade { from { opacity: 0; } to { opacity: 1; } }
.dintro-card { background: var(--card); color: var(--text); border-radius: 20px; width: 100%; max-width: 400px;
  padding: 28px 26px 20px; box-shadow: 0 24px 60px rgba(0,0,0,.30); animation: dintroPop .25s ease; }
@keyframes dintroPop { from { transform: translateY(10px) scale(.98); opacity: .5; } to { transform: none; opacity: 1; } }
.dintro-icon { color: var(--red); margin-bottom: 14px; }
.dintro-icon svg { width: 38px; height: 38px; display: block; }
.dintro-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 2px 0 12px; }
.dintro-title { font-size: 19px; font-weight: 800; }
.dintro-step { font-size: 12px; color: var(--sub); font-weight: 600; flex-shrink: 0; }
.dintro-body { font-size: 14px; line-height: 1.65; color: var(--text); min-height: 132px; }
.dintro-body b { font-weight: 700; }
.dintro-body .di-up { color: var(--red); }
.dintro-body .di-dn { color: var(--blue); }
.dintro-dots { display: flex; gap: 6px; justify-content: center; margin: 18px 0 16px; }
.dintro-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: all .2s ease; }
.dintro-dot.on { background: var(--red); width: 20px; border-radius: 4px; }
.dintro-btns { display: flex; align-items: center; justify-content: space-between; }
.dintro-skip { background: none; border: none; color: var(--sub); font-size: 13px; cursor: pointer; padding: 6px 4px; }
.dintro-nav { display: flex; gap: 8px; }
.dintro-prev { background: var(--bg); color: var(--sub); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 15px; font-size: 13px; font-weight: 600; cursor: pointer; }
.dintro-next { background: var(--slate); color: #fff; border: none; border-radius: 10px;
  padding: 9px 18px; font-size: 14px; font-weight: 700; cursor: pointer; }
.dintro-next:hover, .dintro-prev:hover { filter: brightness(1.06); }
@media (prefers-reduced-motion: reduce) { .dintro-overlay, .dintro-card { animation: none; } }

/* 전체 거래 히스토리 — 메인 컬럼(넓게) 배치 */
.trades-wide { margin-top: 16px; }
.mt-table th, .mt-table td { white-space: nowrap; }   /* "2,152,000\n원" 같은 줄바꿈 방지 */
.trades-wide .mt-nm { max-width: 220px; }             /* 넓어졌으니 종목명 넉넉히 */
.trades-wide .mt-scroll { max-height: 480px; }

/* 성과 분석이 우측 칼럼에 있을 때 — 지표 3열(좁아도 라벨 안 깨짐) */
.my-side .perf-card { margin-top: 16px; }
.my-side .perf-stats { grid-template-columns: repeat(5, 1fr); }

/* 홈으로 + (인생/히스토리/설정/파산) 한 줄, 왼쪽부터 나란히 */
.my-toprow { display: flex; justify-content: flex-start; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.my-toprow .back-link { margin: 0; }
.my-toprow .life-bar { margin: 0; }

/* 산업 구성 종목 모달 */
.hot-row.clickable { cursor: pointer; }
.hot-row.clickable:hover { background: var(--bg); border-radius: 10px; }
.sec-modal-back { position: fixed; inset: 0; background: rgba(15,20,30,.45); z-index: 8000;
                  display: flex; align-items: center; justify-content: center; }
.sec-modal { width: 380px; max-width: 94vw; max-height: 76vh; background: var(--card); border-radius: 16px;
             box-shadow: 0 12px 40px rgba(0,0,0,.22); display: flex; flex-direction: column; overflow: hidden; }
.sec-m-head { display: flex; justify-content: space-between; align-items: center;
              font-weight: 800; font-size: 15px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.sec-m-head .hot-ic-svg { width: 18px; height: 18px; vertical-align: -4px; margin-right: 3px; color: var(--sub); }
.sec-m-x { background: none; border: none; font-size: 14px; color: var(--sub); cursor: pointer; padding: 4px; }
/* VS 비교 방식 토글(가격/등락률%) */
.cmp-kind { display: flex; gap: 6px; padding: 12px 14px 0; }
.cmp-kind button { flex: 1; padding: 8px 0; border: 1px solid var(--line); background: var(--card); color: var(--sub);
                   border-radius: 9px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .12s; }
.cmp-kind button:hover { color: var(--text); }
.cmp-kind button.active { background: var(--text); color: var(--card); border-color: var(--text); }
/* 개수 따라 가로 여러 열(auto-fill) — 모달 폭을 JS가 넓히면 열이 자동으로 늘어 한눈에 보임 */
.sec-m-body { overflow-y: auto; padding: 6px 8px 10px; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0 6px; align-content: start; }
.sec-m-body .sec-m-loading { grid-column: 1 / -1; }   /* 안내문은 전체 폭 차지 */
.sec-m-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer; }
.sec-m-row:hover { background: var(--bg); }
.sec-m-nm { flex: 1; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-m-px { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
.sec-m-px b { display: block; font-size: 11.5px; }
.sec-m-loading { text-align: center; color: var(--sub); font-size: 13px; padding: 26px 0; }

/* ===== 배움터 (주식 기초 Q&A) ===== */
/* width:100% 필수 — body가 flex 컬럼이라 margin:auto만 주면 내용 폭만큼 줄어들어(shrink-to-fit)
   아코디언을 펼칠 때마다 페이지 폭이 늘었다 줄었다 함. 항상 860px로 고정 */
/* 홈으로: 랭킹과 동일하게 넓은(1240px) 행에서 좌측 정렬 → 좌측 위치 일치 */
.learn-back-row { max-width: 1010px; width: 100%; margin: 16px auto 0; padding: 0 24px; box-sizing: border-box; text-align: left; }
.learn-wrap { max-width: 1010px; width: 100%; margin: 10px auto 48px; padding: 0 24px; box-sizing: border-box; flex: 1 0 auto; }
.learn-title { font-size: 26px; font-weight: 800; margin: 0 0 6px; }   /* 위 여백 제거 → 제목 살짝 위로 */
.learn-desc { color: var(--sub); font-size: 14px; margin-bottom: 18px; }
.lq-search { width: 100%; padding: 13px 16px 13px 42px; border: 1.5px solid var(--line); border-radius: 12px;
             font-size: 14px; color: var(--text); margin-bottom: 18px; outline: none;
             background: var(--card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238b95a1' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.2-3.2'/></svg>") no-repeat 15px center; }
.lq-search:focus { border-color: var(--blue); }
/* 좌측 카테고리 사이드바 + 우측 질문 리스트 (help-center 레이아웃) */
.lq-split { display: grid; grid-template-columns: 210px 1fr; gap: 22px; align-items: start; }
.lq-main { min-width: 0; }   /* wrap(1010)이 사이드바+카드에 딱 맞아 중앙정렬 — 카드는 남은 폭(~730) 채움 */
.lq-cats { display: flex; flex-direction: column; gap: 2px; background: var(--card); border: 1px solid var(--line);
           border-radius: 14px; box-shadow: var(--shadow-card); padding: 8px; position: sticky; top: 16px; }
.lq-cat { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 12px; border: none; background: none;
          border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--sub); cursor: pointer; text-align: left;
          transition: color .14s, background .14s; }
.lq-cat .lq-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); flex-shrink: 0; }
.lq-cat .lq-cn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lq-cat .lq-cnt { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--sub);
                  font-variant-numeric: tabular-nums; padding-left: 8px; }
.lq-cat:hover { background: var(--bg); color: var(--text); }
.lq-cat.active { background: var(--bluebg); color: var(--blue); font-weight: 700; }
.lq-cat.active .lq-dot { background: var(--blue); }
.lq-cat.active .lq-cnt { color: var(--blue); }
@media (max-width: 720px) {   /* 좁으면 사이드바를 위로 접어 가로 스크롤 칩처럼 */
  .lq-split { grid-template-columns: 1fr; gap: 14px; }
  .lq-cats { position: static; flex-direction: row; flex-wrap: wrap; box-shadow: none; padding: 0; border: none; background: none; }
  .lq-cat { width: auto; border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; }
  .lq-cat .lq-cnt { display: none; }
}
.lq-item { background: var(--card); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 10px; overflow: hidden; box-shadow: var(--shadow-card); }
.lq-q { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none;
        border: none; padding: 15px 18px; cursor: pointer; font-size: 14.5px; font-weight: 700; color: var(--text); }
.lq-badge { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--blue);
            background: color-mix(in srgb, var(--blue) 10%, transparent); padding: 3px 9px; border-radius: 12px; }
.lq-qt { flex: 1; }
.lq-arrow { color: var(--sub); transition: transform .2s; }
.lq-item.open .lq-arrow { transform: rotate(180deg); }
.lq-a { display: none; padding: 0 18px 16px 18px; font-size: 13.5px; line-height: 1.75; color: var(--text); }
.lq-item.open .lq-a { display: block; }
.lq-empty { text-align: center; color: var(--sub); padding: 40px 0; font-size: 14px; }

/* ===== 중간 폭(≤1150px): 상단바 겹침 방지 — 검색창(absolute 중앙)이 네비·우측 메뉴와 충돌 ===== */
@media (max-width: 1150px) {
  .topbar { flex-wrap: wrap; row-gap: 8px; }
  .search-box { position: static; transform: none; order: 3; flex-basis: 100%; width: 100%; max-width: none; margin: 0; }
  .search-box input { width: 100%; }
  .nav { flex-shrink: 0; }
  .nav-link { white-space: nowrap; }
}
@media (max-width: 900px) {
  /* 자산 요약: 숨기지 않고 검색창 아래 전체폭 독립 줄로(길면 줄바꿈). top-right를 풀어 자산요약만 아래 줄, 아이콘은 로고 줄 우측 유지 */
  .topbar { column-gap: 12px; }
  .top-right { display: contents; }
  .acc-summary { display: block; order: 4; flex-basis: 100%; width: 100%;
    font-size: 12px; line-height: 1.55; color: var(--sub); }
  .bell-wrap { margin-left: auto; }   /* 로고 줄: 알림·프로필·토글 클러스터를 우측 정렬 */
}

/* ===== 모바일 최적화 (≤640px) ===== */
@media (max-width: 640px) {
  /* 상단바: 자산 요약 숨김(공간), 검색 축소, 네비 유지 */
  .topbar { padding: 8px 12px; flex-wrap: wrap; row-gap: 8px; }
  .search-box { position: static; transform: none; width: 100%; max-width: none;
                order: 3; flex-basis: 100%; min-width: 0; margin: 0; }   /* 검색창은 둘째 줄 전체(기본은 absolute 중앙) */
  .search-box input { width: 100%; font-size: 16px; padding: 7px 13px; }   /* 16px 유지(iOS 탭 확대 방지) · 패딩 줄여 박스 컴팩트 */
  .nav { gap: 12px; flex-shrink: 0; }
  .nav-link { font-size: 13px; white-space: nowrap; }
  .brand-name { font-size: 18px; }            /* 로고 텍스트 유지(모바일에서도 MoToo 표시) */

  /* 메인 레이아웃: 여백·패널 축소 (1100px에서 이미 1열) */
  .layout { padding: 8px; gap: 10px; grid-template-columns: minmax(0, 1fr); }
  .layout > * { min-width: 0; }
  body { overflow-x: hidden; }
  .panel { padding: 12px; border-radius: 14px; }

  /* 지수 그리드: 1열 */
  #indexBar.idx-grid { grid-template-columns: 1fr 1fr; }
  .idx-feat { grid-column: 1 / -1; }

  /* 차트: 높이 축소 + 그리기 도구 스크롤 */
  #chart { height: 300px !important; }
  .draw-bar { overflow-x: auto; }
  .detail-price { font-size: 22px; }

  /* 주문 패널: 터치 크기 */
  .order-panel .submit { height: 50px; font-size: 15px; }
  .ofield input, .stepper input { font-size: 16px; }   /* iOS 확대 방지(16px 미만이면 자동 줌) */

  /* 우측 레일: 화면 폭 오버레이 (base의 right:14px가 남아 왼쪽이 -14px로 잘리던 버그 → left/right 명시) */
  .rail-panel { left: 8px; right: 8px; width: auto; max-width: none; top: 58px; }

  /* 종목명: 모바일은 칸이 넓으니 이름 넉넉히(데스크톱용 165/150px 캡 해제, ellipsis만 유지) */
  .stock-table td:first-child { max-width: none; }
  .s-name { max-width: 58vw; }

  /* 차트 툴바: 개행 시 버튼이 글자 단위로 쪼개지던 문제 → 버튼은 통째로 nowrap, 줄바꿈은 버튼 단위로 */
  .range-bar { flex-wrap: wrap; gap: 5px 4px; }
  .range-bar button { white-space: nowrap; padding: 6px 10px; }
  .chart-type button { white-space: nowrap; }
  /* 지표 줄(이평·볼린저·보조지표): 눌리며 글자 쪼개지던 것 → 가로 스크롤 한 줄 */
  .ma-legend { flex-wrap: nowrap; overflow-x: auto; }
  .ma-legend > * { flex-shrink: 0; white-space: nowrap; }

  /* 주문 버튼: 위아래로 넓적하던 것 축소(터치 최소치는 유지) */
  .ord-tabs button { padding: 8px 4px 9px; font-size: 13px; }
  .seg button { padding: 7px; font-size: 12.5px; }
  .q-btn { padding: 11px; font-size: 14px; }

  /* 리스트 테이블 압축: 거래대금 열 숨김(폭 부족) — 종목/현재가/등락률만 */
  .list-panel table { font-size: 12.5px; }
  .list-panel td, .list-panel th { padding: 8px 4px; }
  .list-panel th:last-child, .list-panel td:last-child { display: none; }   /* 거래대금 열만 숨김 */
  .nav-link { white-space: nowrap; }

  /* 마이페이지 */
  .my-layout { padding: 0 14px; }
  .my-total { font-size: 26px; }
  .my-toprow { gap: 8px; }
  .life-btn { font-size: 12px; padding: 7px 10px; }
  .mt-table { font-size: 12px; }
  .mt-scroll { overflow-x: auto; }
  .perf-stats { grid-template-columns: repeat(2, 1fr) !important; }

  /* 배움터/랭킹/정책 */
  .learn-wrap, .learn-back-row, .subnav { padding: 0 14px; }
  .learn-title { font-size: 22px; }

  /* 모달·투어 */
  .sec-modal { width: 92vw; }
  .tour-tip { width: 86vw; }
  .donut-pop { width: 200px; }
}

/* ===== 시장 히트맵 (지금 뜨는 산업 · 지도 보기) ===== */
.hot-view { display: inline-flex; gap: 3px; margin-left: 8px; background: var(--bg); border-radius: 8px; padding: 2px; }
.hot-view button { border: none; background: none; font-size: 11.5px; font-weight: 700; color: var(--sub);
                   padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.hot-view button.active { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.hm-wrap { position: relative; border-radius: 12px; overflow: hidden; }
.hm-tile { position: absolute; box-sizing: border-box; border: 1.5px solid var(--card); border-radius: 4px;
           display: flex; flex-direction: column; align-items: center; justify-content: center;
           cursor: pointer; overflow: hidden; transition: filter .12s; }
.hm-tile:hover { filter: brightness(1.06); z-index: 2; }
.hm-nm { font-size: 11.5px; font-weight: 700; color: #333d4b; max-width: 94%; max-height: 92%; overflow: hidden;
         white-space: normal; word-break: break-all; text-align: center; line-height: 1.25; }
.hm-ch { font-size: 10.5px; font-weight: 700; color: #4a5468; }
.hm-tile.dk .hm-nm, .hm-tile.dk .hm-ch { color: #fff; }
.hm-legend { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 11px; color: var(--sub); }
.hm-lg { padding-left: 14px; position: relative; }
.hm-lg::before { content: ''; position: absolute; left: 0; top: 2px; width: 10px; height: 10px; border-radius: 3px; }
.hm-lg.up::before { background: rgb(240,68,82); }
.hm-lg.flat::before { background: rgb(237,240,244); border: 1px solid #dfe3e8; }
.hm-lg.down::before { background: rgb(49,130,246); }
.hm-note { margin-left: auto; }
.hm-empty { text-align: center; color: var(--sub); padding: 30px 0; font-size: 13px; }

/* 스크리너 */
.scr-btn { margin-left: auto; border: 1px solid var(--line); background: var(--card); border-radius: 8px;
           padding: 5px 12px; font-size: 12px; font-weight: 700; color: var(--sub); cursor: pointer; }
.scr-btn.on { background: var(--slate); border-color: var(--slate); color: #fff; }
/* 필터 팝오버: 목록을 아래로 밀지 않고 정렬탭 바로 아래·우측(코스피쪽)으로 떠서 나옴 */
.sort-tabs { position: relative; }
.scr-panel { position: absolute; z-index: 60; top: 100%; right: -150px; left: auto; width: 366px;
             margin-top: 8px; display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center;
             background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
             font-size: 13px; color: var(--text); box-shadow: 0 14px 34px rgba(0,0,0,.16); }
.scr-field { display: flex; align-items: center; gap: 8px; }
.scr-label { font-weight: 700; color: var(--sub); letter-spacing: -.2px; }
.scr-tilde { color: var(--sub); font-weight: 600; }
.scr-suffix { color: var(--sub); font-size: 12.5px; }
/* 입력칸: 단위(%,억)를 칸 안에 붙여 한 덩어리로 */
.scr-input { display: inline-flex; align-items: center; gap: 2px; background: var(--bg);
             border: 1px solid var(--line); border-radius: 9px; padding: 0 9px 0 10px;
             transition: border-color .12s, box-shadow .12s; }
.scr-input:focus-within { border-color: var(--blue); background: var(--card);
                          box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent); }
.scr-input input { width: 46px; padding: 7px 0; border: none; background: transparent;
                   font-size: 13px; font-weight: 600; color: var(--text); outline: none; text-align: right;
                   -moz-appearance: textfield; }
.scr-input input::-webkit-outer-spin-button,
.scr-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.scr-input input::placeholder { color: var(--sub); font-weight: 500; }
.scr-input i { font-style: normal; color: var(--sub); font-size: 12.5px; }
.scr-actions { display: flex; gap: 8px; margin-left: auto; }
.scr-actions button { border: none; border-radius: 9px; padding: 8px 16px; font-size: 12.5px;
                      font-weight: 700; cursor: pointer; transition: filter .12s, background .12s; }
.scr-actions button:hover { filter: brightness(.97); }
#scrApply { background: var(--slate); color: #fff; }
#scrReset { background: var(--bg); color: var(--sub); border: 1px solid var(--line); }

/* 실적·배당 캘린더 */
.cal-h { margin-top: 18px; display: flex; align-items: center; }
.cal-h .hint { margin-left: 6px; }   /* flex라 제목과 '실적·배당'이 딱 붙던 것 → 간격 */
.cal-src { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--sub); opacity: .7; }   /* 출처: 헤더 우측(방침=정상출처 벤더명 표기) */
.calendar { display: flex; flex-direction: column; gap: 2px; }
.cal-row { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 10px;
           cursor: pointer; font-size: 13px; }
.cal-row:hover { background: var(--bg); }
.cal-d { color: var(--sub); font-size: 12px; width: 64px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.cal-nm { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-kind { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 12px; flex-shrink: 0; }
.cal-kind.earn { background: #fff0f0; color: #e8544e; }
.cal-kind.exdiv { background: #eef4ff; color: #3182f6; }
.cal-kind.div { background: #ecfaf3; color: #12b886; }
.cal-empty { color: var(--sub); font-size: 12.5px; padding: 12px 8px; }

/* 모투 주주 통계 배지 */
.st-badge.holders { background: var(--bg); color: var(--sub); font-weight: 600; }
.st-badge.holders b { font-weight: 700; }
.lq-a a { color: var(--blue); font-weight: 600; }
.hm-nm.sm { font-size: 10px; font-weight: 600; }

/* Q&A 페이지네이션 + 목록 최소 높이(마지막 페이지가 짧아도 푸터가 위로 안 올라옴) */
/* 내부 스크롤 제거 — 페이지 흐름대로. (좌우 움찔은 html scrollbar-gutter+overflow-y가 전역에서 막음) */
.lq-list { min-height: 482px; }   /* 기초 용어 탭(8문항) 높이 기준 — 짧은 카테고리로 바꿔도 푸터가 위로 안 튐(아코디언 열면 자연히 늘어남) */
/* ↑ auto가 아니라 scroll 고정: 스크롤바 공간이 '항상' 확보돼 답변을 펼쳐도 블럭 폭이 변하지 않음
   (Safari가 scrollbar-gutter 미지원이라 auto+gutter 방식은 펼칠 때마다 블럭이 좁아졌다 넓어졌다 했음) */
.lq-pager-fixed { display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 14px; }
.lq-pg { width: 34px; height: 34px; border: 1px solid var(--line); background: var(--card); border-radius: 10px;
         font-size: 15px; color: var(--text); cursor: pointer; }
.lq-pg:disabled { opacity: .35; cursor: default; }
.lq-pg-ind { font-size: 13px; color: var(--sub); min-width: 46px; text-align: center; }

/* 주문 메모(선택) + 히스토리 메모 아이콘 */
.order-memo { width: 100%; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px;
              font-size: 12px; background: var(--bg); outline: none; margin-bottom: 6px; }
.order-memo:focus { background: var(--card); border-color: var(--blue); }
.mt-memo { cursor: help; color: var(--sub); }
.mt-memo svg { width: 12px; height: 12px; vertical-align: -2px; }

/* 업적 뱃지 */
.ach-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin-top: 16px; box-shadow: var(--shadow-card); }
.ach-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
/* opacity를 .ach 전체에 걸면 자식 툴팁까지 흐려짐 → 잠금은 아이콘/이름만 흐리게(툴팁은 또렷) */
.ach { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 4px;
       background: var(--bg); border: 1px solid transparent; border-radius: 13px; cursor: default;
       transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.ach.on { background: var(--card); border-color: var(--line); box-shadow: 0 1px 3px rgba(0,0,0,.05); cursor: pointer; }
.ach.on:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.10); }
.ach.eq { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 9%, var(--card)); box-shadow: 0 0 0 1px var(--blue); }
.ach-ic { font-size: 23px; line-height: 1; }
.ach:not(.on) .ach-ic { opacity: .5; }   /* 잠긴 업적: 아이콘만 흐림 */
.ach-ic .ach-lock { width: 22px; height: 22px; display: block; color: var(--sub); }   /* 잠금: 이모지 🔒 대신 라인 자물쇠 */
.ach-nm { font-size: 10.5px; font-weight: 600; color: var(--sub); text-align: center; }
.ach.on .ach-nm { color: var(--text); }
@media (max-width: 640px) { .ach-grid { grid-template-columns: repeat(3, 1fr); } }

/* 성과 지표 6개 → 3열 2줄 */
.my-side .perf-stats { grid-template-columns: repeat(3, 1fr) !important; }


/* 다크모드 토글 */
.theme-btn { border: 1px solid var(--line); background: var(--card); color: var(--text);
             width: 34px; height: 34px; border-radius: 10px; cursor: pointer; font-size: 15px; }
.theme-btn:hover { background: var(--bg); }
.nav-theme { width: 30px; height: 30px; font-size: 13px; border-radius: 9px; margin-left: 2px; }

/* 업적 v2: 설명 툴팁 + 장착 (.ach/.ach.on/.ach.eq 스타일은 위 블록으로 통합) */
.ach-tip { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
           width: 172px; background: #262b33; color: #f0f2f5; font-size: 11.5px; line-height: 1.55;
           padding: 9px 11px; border-radius: 10px; z-index: 30; text-align: left; pointer-events: none;
           box-shadow: 0 6px 18px rgba(0,0,0,.25); opacity: 1; }
.ach-tip b { font-size: 12px; }
.ach-tip-s { display: block; margin-top: 5px; color: #9fb6ff; font-weight: 600; }
.ach:hover .ach-tip { display: block; }
.nick-badge { font-size: 15px; margin-right: 3px; }

/* 업적: 상단 진입 버튼 + 모달 팝업 (마이페이지) */
.ach-btn { display: inline-flex; align-items: center; gap: 5px; }   /* 아이콘·텍스트 세로 중앙정렬(혼합 글꼴크기로 글자 내려가던 것 수정) */
.ach-btn .btn-ic { margin-right: 0; }
.ach-btn .ach-cnt { color: var(--sub); font-variant-numeric: tabular-nums; }   /* 진행도는 은은하게(중립 버튼) */
.ach-btn .ach-go { color: var(--sub); font-size: 14px; }
.ach-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; overflow: hidden; }   /* overflow:hidden = 화면 밖으로 삐져나가는 툴팁이 페이지 스크롤 안 만들게 */
.ach-modal[hidden] { display: none; }
.ach-backdrop { position: absolute; inset: 0; background: rgba(15,20,30,.42); }
/* 다이얼로그엔 overflow 안 검(툴팁이 잘리거나 가로 스크롤바 생기던 문제) — 24개 6×4는 스크롤 없이 다 들어감 */
.ach-dialog { position: relative; background: var(--card); border-radius: 18px; box-shadow: 0 20px 50px rgba(20,30,50,.28); width: 100%; max-width: 720px; padding: 18px 20px 22px; }
.ach-dialog-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ach-dialog-title { display: flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 750; }
.ach-dialog-title .sec-ic { width: 17px; height: 17px; }
.ach-x { border: 0; background: var(--bg); color: var(--sub); width: 30px; height: 30px; border-radius: 9px; font-size: 15px; line-height: 1; cursor: pointer; }
.ach-dialog-sub { margin: 6px 0 14px; }
.ach-modal .ach-grid { grid-template-columns: repeat(6,1fr); }
.ach-modal .ach-r1 .ach-tip { top: calc(100% + 8px); bottom: auto; }   /* 첫 줄 툴팁은 아래로 — 제목 위로 겹치지 않게 */
/* 툴팁 기본이 중앙정렬(left:50%)이라 첫/끝 열은 모달 경계 밖으로 삐져나가 잘림 → 열 방향에 맞춰 정렬 */
.ach-modal .ach-c1 .ach-tip { left: 0; transform: none; }
.ach-modal .ach-c6 .ach-tip { left: auto; right: 0; transform: none; }
@media (max-width:600px) {
  .ach-modal { align-items: flex-start; overflow-y: auto; }   /* 4열이라 세로로 길어지면 모달 자체가 스크롤 */
  .ach-dialog { max-height: none; }
  .ach-modal .ach-grid { grid-template-columns: repeat(4,1fr); }
}

/* 종목 비교 */
.cmp-btn { border: 1px solid var(--line); background: var(--card); color: var(--sub); font-size: 11px;
           font-weight: 800; border-radius: 8px; padding: 6px 9px; cursor: pointer; }
.cmp-btn:hover { color: var(--text); }
.cmp-chip { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; font-size: 12px;
            background: #fff7e6; color: #b8860b; border-radius: 14px; padding: 4px 10px; font-weight: 700; }
[data-theme="dark"] .cmp-chip { background: #3a2f14; color: #f59f00; }
.cmp-chip i { width: 10px; height: 3px; background: #f59f00; border-radius: 2px; }
.cmp-chip b { cursor: pointer; font-weight: 800; margin-left: 2px; }

[data-theme="dark"] .cal-kind.earn { background: #3a2226; }
[data-theme="dark"] .life-btn.danger:hover { background: #4a272c; }

/* 자산곡선 기간 필터 */
.perf-range { margin-left: auto; display: inline-flex; gap: 3px; background: var(--bg); border-radius: 8px; padding: 2px; }
.perf-range button { border: none; background: none; font-size: 11.5px; font-weight: 700; color: var(--sub);
                     padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.perf-range button.active { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.06); }

/* 휴장 배지 + 사유 툴팁 */
.list-h { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; }  /* flex는 아이템 사이 공백문자를 지움 → 제목·정렬힌트 간격은 gap으로. wrap: 좁으면 배지가 다음 줄로(제목은 안 깨짐) */
.holiday-badge { position: relative; margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
                 font-size: 10px; font-weight: 700; color: #e0455a; background: #fdf0f2;
                 padding: 3px 8px; border-radius: 999px; cursor: help; white-space: nowrap; }
.holiday-badge b { font-weight: 600; }
.holiday-badge .hb-dot { width: 5px; height: 5px; border-radius: 50%; background: #e0455a; }
[data-theme="dark"] .holiday-badge { background: #3a2226; color: #f47585; }
[data-theme="dark"] .holiday-badge .hb-dot { background: #f47585; }
.hol-tip { display: none; position: absolute; left: calc(100% + 10px); top: -6px; width: max-content; max-width: 300px;
           background: #262b33; color: #f0f2f5; font-size: 12px; line-height: 1.7; font-weight: 500;
           padding: 10px 13px; border-radius: 10px; z-index: 40; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.hol-tip b { color: #ffd08a; }
.hol-sub { display: block; margin-top: 5px; font-size: 10.5px; color: #9aa2b3; }
.holiday-badge:hover .hol-tip { display: block; }

.nd-close { margin-left: 8px; border: 1px solid var(--line); background: var(--card); color: var(--sub);
            width: 30px; height: 30px; border-radius: 9px; font-size: 13px; cursor: pointer; }
.nd-close:hover { color: var(--text); background: var(--bg); }

/* ===== 모바일 최적화 v377: 상세헤더 · 호가/체결 · 알림 팝업 ===== */
/* 가격 문자열("12,400원")의 숫자와 '원'이 CJK 줄바꿈으로 갈라지지 않게 (전 화면 공통, 데스크톱 영향 없음) */
.cur-price, .cur-change, .ob2-px, .tr-p, .tr-t, .ob2-tot > * { white-space: nowrap; }

@media (max-width: 640px) {
  /* 상세 헤더: 모바일은 세로 스택(종목명 위 → 가격 아래) — 긴 종목명이 가격과 겹치던 문제 해결 */
  .stock-head { flex-direction: column; align-items: stretch; gap: 3px; }
  .head-left { min-width: 0; }
  .head-col { min-width: 0; overflow: hidden; }
  .head-nameline { min-width: 0; max-width: 100%; overflow: hidden; }
  .cur-name { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .cur-price-box { text-align: left; }
  .cur-price { font-size: 22px; }
  .cur-usd { font-size: 12px; margin-left: 5px; }
  .cur-change { font-size: 12px; text-align: left; }

  /* 체결·호가: 고정높이는 유지(레이아웃 지탱값) + 폰트/여백만 축소 → 2컬럼 유지하면서 안 깨지게 */
  .book-row { gap: 8px; }
  .ob2-row { height: 30px; grid-template-columns: 1fr 1.1fr 1fr; }
  .ob2-px { font-size: 12px; }
  .ob2-px em { font-size: 9px; }
  .ob2-qn { font-size: 11px; }
  .ob2-q.ql { padding-right: 5px; }
  .ob2-q.qr { padding-left: 5px; }
  .ob2-tot { font-size: 9.5px; letter-spacing: -0.2px; gap: 2px; }
  .tr-row { grid-template-columns: 1fr 1fr 34px; gap: 4px; padding: 5px 6px; font-size: 12px; }
  .tr-t { font-size: 11px; }

  /* 알림 팝업: 뷰포트 기준 고정폭으로 → 화면 왼쪽 밖으로 안 잘리게 (레일 패널과 동일 방식) */
  .bell-pop { position: fixed; top: 54px; left: 8px; right: 8px; width: auto; max-height: 70vh; }
}