/* ============================================================
   PROJECT ODIN — 공용 디자인 시스템 (v1)
   모든 화면이 공유하는 토큰 + 레이아웃 + 컴포넌트.
   Pretendard 폰트 · 무채색 + 의미색(등락·온도) + 샴페인 골드.
   ============================================================ */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

/* ── 디자인 토큰 ─────────────────────────────────────────── */
:root {
  /* 포인트 (샴페인 골드 · 브랜드 강조 전용) */
  --accent:        #e0c486;
  --accent-dark:   #efe0b0;

  /* 중립 / 표면 */
  --bg:      #f3f4f6;
  --surface: #ffffff;
  --ink:     #17191e;
  --ink-2:   #3a3f48;
  --muted:   #8b909a;
  --faint:   #aab1bd;
  --border:  #e6e8ec;
  --line:    #f1f2f4;
  --dark:    #17191e;
  --dark-2:  #23262c;
  --cream:   #f3f1ec;

  /* 등락 (상승=웜레드 / 하락=코발트) */
  --up:         #cf5638;
  --up-strong:  #e05038;
  --up-bg:      #f8efe9;
  --down:       #3358d4;
  --down-strong:#3f7fe0;
  --down-bg:    #eaeefb;

  /* 시장온도 */
  --t-hot:     #cf5638;
  --t-warm:    #bd6a45;
  --t-neutral: #8b95a1;
  --t-cold:    #3358d4;

  /* 섹션 태그 — 리포트 6개 카테고리 색상(전부 정의해 통일) */
  --hdl: #8a6d1f; --hdl-bg: #f6efda;  /* 헤드라인(골드) */
  --eco: #b0492c; --eco-bg: #f8efe9;  /* 경제(웜레드) */
  --sci: #1f7a5a; --sci-bg: #e6f4ee;  /* 과학기술(그린) */
  --mkt: #7a4ab0; --mkt-bg: #f1eafb;  /* 증시(퍼플) */
  --wld: #5a6472; --wld-bg: #eef0f3;  /* 세계(그레이) */
  --ntb: #b03a6a; --ntb-bg: #fbeaf1;  /* 주목 종목(마젠타) */
  --soc: #5a6472; --soc-bg: #eef0f3;
  --us:  #2a6ab0; --us-bg:  #e8f0f9;  /* 미국(블루) */
  --link:#2a6ab0;

  /* 별칭/보강 — 화면들이 쓰던 미정의 변수 표준화 */
  --text:    #17191e;   /* = --ink (본문) */
  --bg-sub:  #f6f7f9;   /* 빈 상태·보조 배경(데이터 없음 배너 등) */

  /* 시맨틱(상태/대비) — 하드코딩 색 정리용 */
  --ok:      #137333;   /* 성공·완료(초록) */
  --warn:    #9a6700;   /* 경고 텍스트(앰버) */
  --warn-bg: #fff3d6;   /* 경고 배경 */
  --on-accent:     #3a2f12;  /* 골드(--accent) 위 어두운 글씨 */
  --on-dark-muted: #9a9ca3;  /* 다크 히어로 위 보조 글씨 */
  --on-dark-line:  #3a3c42;  /* 다크 히어로 위 구분선 */

  /* 라운드 */
  --r-sm:    8px;
  --r-card:  14px;
  --r-block: 18px;
  --r-pill:  100px;

  /* 그림자 */
  --shadow-card: 0 1px 2px rgba(20,22,28,.04);
  --shadow-pop:  0 10px 28px rgba(20,22,28,.18);
}

/* ── 리셋 ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; }

/* ── 레이아웃: 사이드바 + 메인 ────────────────────────────── */
.layout { display: flex; height: 100vh; }

/* 사이드바 — 다크 테마 */
.sb {
  width: 220px;
  background: var(--dark);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.sb-logo {
  padding: 20px 20px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #2e3138;
}
.sb-logo .mk {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--cream);
  color: var(--dark);
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 800;
}
.sb-logo b {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.sb-section {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6b7280;
  padding: 20px 20px 6px;
}
.sb-nav { flex: 1; padding: 8px 0; overflow-y: auto; }
.sb-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 500;
  color: #9a9ca3;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s;
}
.sb-nav a:hover {
  background: rgba(255,255,255,.05);
  color: var(--cream);
}
.sb-nav a.on {
  color: var(--accent-dark);
  font-weight: 700;
  background: rgba(255,255,255,.07);
  border-left-color: var(--accent);
}
.sb-nav a.disabled {
  color: #46505f;
  pointer-events: none;
}
.sb-foot {
  padding: 10px 10px;
  border-top: 1px solid #2e3138;
  font-size: 11px;
  color: #6b7280;
}
/* 좌하단 계정 버튼(한 줄): 닉네임 · 역할칩 · 톱니 → /settings */
.sb-acct {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  color: #9a9ca3; text-decoration: none;
  transition: background .15s, color .15s;
}
.sb-acct:hover { background: rgba(255,255,255,.06); color: var(--cream); }
.sb-acct.on { background: rgba(255,255,255,.08); color: var(--cream); }
.sb-acct-name {
  flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-acct-role {
  flex-shrink: 0; font-size: 9px; font-weight: 800; letter-spacing: .05em;
  padding: 2px 6px; border-radius: 8px;   /* bg/color는 sidebar.js applyRole이 지정 */
}
.sb-acct-gear { flex-shrink: 0; font-size: 14px; opacity: .85; }
.sb-report {
  display: block; padding: 8px 10px; margin-bottom: 4px; border-radius: 8px;
  font-size: 12px; color: #9a9ca3; text-decoration: none;
  transition: background .15s, color .15s;
}
.sb-report:hover { background: rgba(255,255,255,.06); color: var(--cream); }
.sb-ver { font-size: 10px; color: #6b7280; margin-top: 6px; padding: 0 10px; }

/* 메인 영역 */
.pg { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* 페이지 탑바 */
.pg-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.pg-top b { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.pg-top .status { font-size: 12px; color: var(--muted); }

/* 페이지 바디 */
.pg-body {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  background: var(--bg);
}

/* ── 버튼 ─────────────────────────────────────────────────── */
.btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.btn-pri { background: var(--dark); color: #fff; }
.btn-pri:hover { background: var(--dark-2); }
.btn-gold { background: var(--accent-dark); color: #2a2410; border-color: transparent; }
.btn-gold:hover { background: #e8d49e; }
.btn-ghost { background: var(--surface); border-color: var(--border); color: var(--ink); }
.btn-ghost:hover { background: var(--line); }

/* ── 카드 / 패널 ──────────────────────────────────────────── */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
.panel-h {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
}
.panel-h h3 {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.panel-h .more {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  color: var(--faint);
}
.panel-b { padding: 15px 18px; }

/* KPI 카드 */
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 13px 15px;
  box-shadow: var(--shadow-card);
}
.kpi .lb { font-size: 11px; color: var(--muted); font-weight: 600; }
.kpi .vl {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 4px 0 3px;
  font-variant-numeric: tabular-nums;
}
.kpi .sm { font-size: 11px; color: var(--faint); }

/* 카드 그리드 */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* ── 테이블 ───────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; }
th {
  font-size: 10.5px;
  color: var(--faint);
  font-weight: 600;
  text-align: left;
  padding: 4px 8px 8px;
  border-bottom: 1px solid var(--line);
}
td {
  font-size: 12.5px;
  padding: 8px;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
tr:last-child td { border-bottom: none; }
.r { text-align: right; }
.up { color: var(--up); }
.dn { color: var(--down); }
.rk { color: var(--faint); font-weight: 700; width: 20px; }

/* 더보기 토글 */
.toggle-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-top: 1px solid var(--line);
  background: transparent;
  border-left: none; border-right: none; border-bottom: none;
  font-family: inherit;
  transition: background .15s;
}
.toggle-btn:hover { background: var(--line); }

/* ── 탭 ───────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
  overflow-x: auto;            /* 탭 많으면 가로 스크롤(모바일 넘침 방지) */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;       /* 스크롤바 숨김(스와이프) */
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  flex-shrink: 0;              /* 좁아도 줄어들지 않고 스크롤 */
  white-space: nowrap;
}
.tab:hover { color: var(--ink-2); }
.tab.on {
  color: var(--ink);
  font-weight: 700;
  border-bottom-color: var(--ink);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── 온도 표시 ────────────────────────────────────────────── */
.temp { display: inline-flex; align-items: baseline; gap: 6px; }
.temp i { font-style: normal; font-size: 11px; color: var(--faint); }
.temp b {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.temp.hot b  { color: var(--t-hot); }
.temp.warm b { color: var(--t-warm); }
.temp.neu b  { color: var(--t-neutral); }
.temp.cold b { color: var(--t-cold); }

/* ── 섹션 태그 ────────────────────────────────────────────── */
.sec-tag {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 5px 13px;
  border-radius: var(--r-sm);
  display: inline-block;
}
.sec-tag.hdl { color: var(--hdl); background: var(--hdl-bg); }
.sec-tag.eco { color: var(--eco); background: var(--eco-bg); }
.sec-tag.sci { color: var(--sci); background: var(--sci-bg); }
.sec-tag.mkt { color: var(--mkt); background: var(--mkt-bg); }
.sec-tag.wld { color: var(--wld); background: var(--wld-bg); }
.sec-tag.ntb { color: var(--ntb); background: var(--ntb-bg); }
.sec-tag.soc { color: var(--soc); background: var(--soc-bg); }
.sec-tag.us  { color: var(--us);  background: var(--us-bg); }

/* ── 키워드 칩 ────────────────────────────────────────────── */
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.chip.pos { color: var(--eco); background: var(--eco-bg); }
.chip.neg { color: var(--down); background: var(--down-bg); }
.chip.neu { color: var(--ink-2); background: var(--line); }
.chip .cnt { font-size: 10px; opacity: .7; }

/* ── 테마 태그 (종목 그룹) ────────────────────────────────── */
.theme-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--line);
  color: var(--ink-2);
  cursor: pointer;
  margin: 2px;
  transition: background .15s, color .15s;
}
.theme-tag:hover { background: var(--dark); color: #fff; }
.theme-tag.on { background: var(--dark); color: var(--accent-dark); }

/* ── 섹터 바 차트 ─────────────────────────────────────────── */
.bar-row { display: flex; align-items: center; gap: 10px; width: 100%; }
.bar-row .nm { font-size: 12.5px; width: 52px; flex-shrink: 0; font-weight: 600; }
.bar-row .track { flex: 1; height: 8px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.bar-row .track i { display: block; height: 100%; border-radius: var(--r-pill); }
.bar-row .track i.up { background: var(--up); }
.bar-row .track i.dn { background: var(--down); }
.bar-row .vv {
  font-size: 12px;
  font-weight: 700;
  width: 56px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── 인덱스 보드 (다크 히어로) ────────────────────────────── */
.board {
  background: var(--dark);
  color: var(--cream);
  border-radius: var(--r-block);
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 30px;
  /* 폭이 좁아지면 한 줄에 다 못 담기므로 줄바꿈(외국인/기관/프로그램이 카드 밖으로 잘리던 문제 방지).
     넓은 화면에서는 그대로 한 줄로 유지됨. */
  flex-wrap: wrap;
}
.board .primary span {
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--accent-dark);
  font-weight: 700;
}
.board .primary b {
  display: block;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.board .primary em {
  font-style: normal;
  font-size: 14px;
  font-weight: 700;
}
.board .sub-group {
  display: flex;
  gap: 26px;
  padding-left: 28px;
  border-left: 1px solid #2e3138;
}
.board .sub-item span { font-size: 11px; color: #9a9ca3; }
.board .sub-item b {
  display: block;
  font-size: 18px;
  font-weight: 700;
  margin: 3px 0;
  font-variant-numeric: tabular-nums;
}
.board .sub-item em { font-style: normal; font-size: 12px; }
.board .up { color: var(--up-strong); }
.board .dn { color: var(--down-strong); }
.board .flow-group { display: flex; gap: 22px; margin-left: auto; }
.board .flow-item { text-align: right; }
.board .flow-item span { font-size: 11px; color: #9a9ca3; }
.board .flow-item b {
  display: block;
  font-size: 17px;
  font-weight: 700;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* ── 리포트 섹션 (뉴스 리포트용) ─────────────────────────── */
.rpt-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.rpt-section.featured { border-color: var(--ink); border-width: 2px; }
.rpt-h {
  font-size: 13px;
  font-weight: 800;
  padding: 12px 18px;
  margin: 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
}
.rpt-h .sec-tag { margin-right: 4px; }
.rpt-section.featured .rpt-h { background: var(--dark); color: var(--cream); border-bottom-color: #2e3138; }
.rpt-body {
  padding: 16px 20px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-2);
}
.rpt-body p { margin-bottom: 10px; }
.rpt-body p:last-child { margin-bottom: 0; }
.rpt-body strong { font-weight: 700; color: var(--ink); }
.rpt-body h4 {
  font-size: 13px;
  font-weight: 700;
  margin: 16px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.rpt-body blockquote {
  margin: 6px 0 12px;
  padding: 10px 14px;
  border-left: 3px solid var(--accent);
  background: var(--line);
  font-size: 12px;
  line-height: 1.7;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--ink-2);
}
.rpt-body a { color: var(--link); border-bottom: 1px dashed #9cbfe0; font-weight: 700; }

/* ── 접기/펼치기 ──────────────────────────────────────────── */
.collapse { margin-bottom: 8px; }
.collapse-head {
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background .15s;
}
.collapse-head:hover { background: var(--line); }
.collapse-body {
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  padding: 12px 14px;
  display: none;
}
.collapse.open .collapse-body { display: block; }
.collapse.open .collapse-head { border-radius: var(--r-sm) var(--r-sm) 0 0; }
.arrow { font-size: 10px; transition: transform .2s; color: var(--muted); }
.collapse.open .arrow { transform: rotate(180deg); }

/* ── 시나리오 (매매 전략용) ───────────────────────────────── */
.scenario {
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  margin-bottom: 14px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.scenario-head {
  padding: 12px 18px;
  background: var(--line);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.scenario-head h3 { font-size: 13px; font-weight: 800; margin: 0; }
.scenario-head .cond { font-size: 11px; color: var(--muted); }
.scenario-body { padding: 14px 18px; }
.scenario.active { border-color: var(--ink); border-width: 2px; }
.scenario.active .scenario-head { background: var(--dark); color: var(--cream); }
.scenario.active .scenario-head .cond { color: #9a9ca3; }

/* 신호 태그 */
.signal {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--line);
  color: var(--ink-2);
  margin: 1px;
}

/* 종목 선정 */
.pick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.pick:last-child { border-bottom: none; }
.pick-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--r-sm);
}
.pick-badge.high { background: var(--up-bg); color: var(--up); }
.pick-badge.medium { background: #fef3cd; color: #856404; }
.pick-name { font-weight: 700; min-width: 80px; }
.pick-reason { color: var(--muted); flex: 1; }
.pick-warn { font-size: 10px; color: var(--up); font-weight: 600; }

/* ── 상태 태그 ────────────────────────────────────────────── */
.tag-live {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  background: #e6f4ea;
  color: #137333;
}
.tag-wip {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  background: #fef3cd;
  color: #856404;
}
.tag-todo {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  background: var(--line);
  color: var(--muted);
}
.admin-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  background: var(--up);
  color: #fff;
  margin-left: 8px;
}

/* ── 에러 ─────────────────────────────────────────────────── */
.err { font-size: 11px; color: var(--up); font-weight: 600; }

/* ── 스켈레톤 로딩 ────────────────────────────────────────── */
@keyframes shim {
  0%   { background-position: -160px 0; }
  100% { background-position: calc(160px + 100%) 0; }
}
.shim {
  background: #eef0f3;
  background-image: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.65) 50%, rgba(255,255,255,0) 100%);
  background-size: 200px 100%;
  background-repeat: no-repeat;
  animation: shim 1.3s infinite;
  border-radius: 6px;
}
.loading { color: var(--muted); font-size: 12px; }

/* ── 공용: 섹션 라벨 · 빈 상태 (화면별 중복 정의 → 표준화) ── */
.section-label {
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin: 24px 0 12px;
}
.section-label:first-of-type { margin-top: 0; }
.empty-state { text-align: center; padding: 40px 20px; color: var(--muted); font-size: 13px; }

/* 입력 기본형 — 화면마다 인라인으로 반복하던 date/text/select 통일(인라인이 있으면 인라인 우선) */
input[type="date"], input[type="text"], input[type="number"], select {
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 5px 10px; font-size: 12px; font-family: inherit; color: var(--ink);
  background: var(--surface);
}

/* ── 모달 ─────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(20,22,28,.35);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-box {
  background: var(--surface);
  border-radius: var(--r-block);
  padding: 28px;
  max-width: 720px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow-pop);
}

/* ── 반응형 ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .layout { flex-direction: column; height: auto; }
  .sb {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
  }
  .sb-logo { border-bottom: none; padding: 12px 16px; }
  .sb-nav {
    display: flex;
    padding: 0;
    overflow-x: auto;
    flex: 1;
  }
  .sb-nav a {
    white-space: nowrap;
    border-left: none !important;
    border-bottom: 3px solid transparent;
    padding: 10px 14px;
  }
  .sb-nav a.on {
    border-left-color: transparent;
    border-bottom-color: var(--accent);
  }
  .sb-section { display: none; }
  /* 푸터: 모바일에선 상단바 오른쪽에 계정 버튼만 컴팩트하게(설정 접근 유지) */
  .sb-foot { display: flex; align-items: center; border-top: none; padding: 6px 8px; flex-shrink: 0; }
  .sb-foot .sb-report, .sb-foot .sb-ver { display: none; }
  .sb-acct { padding: 6px 8px; }
  .sb-acct-name { max-width: 80px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .board { flex-wrap: wrap; gap: 16px; }
  .board .flow-group { margin-left: 0; }
  /* 표가 많은 화면: 패널 안에서 가로 스크롤(화면 밖 넘침 방지) */
  .panel-b { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pg-body { padding: 14px; }
  .d-grid2 { grid-template-columns: 1fr; }
  /* 헤더 컨트롤(제목+날짜+슬롯버튼+로그아웃)이 한 줄에 안 들어가면 줄바꿈 → 가로 넘침 제거 */
  .pg-top { flex-wrap: wrap; row-gap: 8px; }
  /* 상태/기준시각 텍스트(.status=대시보드, .asof=시장환경)는 항상 맨 아래 줄로 보내고(order:3),
     빈 값일 땐 줄 자체를 숨김 → 1행은 [제목 … 컨트롤/로그아웃]만 깔끔히, 로드 전 빈 줄/깨짐 방지 */
  .pg-top .status, .pg-top .asof { order: 3; width: 100%; }
  .pg-top .status:empty, .pg-top .asof:empty { display: none; }
  /* 우측 컨트롤 묶음(날짜선택기·슬롯/새로고침 버튼 등)이 좁은 화면을 넘치지 않게 내부 줄바꿈 허용
     → 뉴스 리포트(오전/점심/오후)·시장 환경(오늘/날짜/새로고침) 상단바 가로 넘침 방지 */
  .pg-top > span { flex-wrap: wrap; row-gap: 6px; }
  .pg { overflow-x: hidden; }        /* 잔여 가로 스크롤 차단(표는 .panel-b가 자체 스크롤) */

  /* ── 매매 전략 시나리오 표 → 모바일 카드 변환 ──
     8열짜리 시나리오 표(종목/구분/현재가/진입가/목표가/손절가/비중/사유)는 폰에서 가로로
     넘쳐 읽기 힘들다. 좁은 화면에선 행(액션) 하나를 카드로 바꿔, 종목명은 카드 머리,
     나머지는 [항목명 … 값] 형태로 한 줄씩 세로로 쌓는다. data-label 값이 항목명이 된다. */
  .scenario-body { padding: 12px; }
  .scenario-body table,
  .scenario-body tbody,
  .scenario-body tr,
  .scenario-body td { display: block; width: auto; }
  .scenario-body thead { display: none; }              /* 헤더행 숨김(각 칸 앞 data-label로 대체) */
  .scenario-body tr {
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--surface);
  }
  .scenario-body tr:last-child { margin-bottom: 0; }
  .scenario-body td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 4px 0;
    text-align: right;
    border: none;
  }
  .scenario-body td::before {
    content: attr(data-label);
    color: var(--muted);
    font-weight: 600;
    font-size: 11px;
    text-align: left;
    white-space: nowrap;
  }
  /* 종목 칸: 라벨 없이 카드 머리처럼 크게(아래에 구분선) */
  .scenario-body td[data-label="종목"] {
    display: block;
    text-align: left;
    border-bottom: 1px solid var(--line);
    padding-bottom: 8px;
    margin-bottom: 4px;
  }
  .scenario-body td[data-label="종목"]::before { display: none; }
  /* 사유/신호 칸: 라벨을 위에 두고 본문은 아래로 전체폭 */
  .scenario-body td[data-label="사유 / 신호"] {
    display: block;
    text-align: left;
    padding-top: 6px;
  }
  .scenario-body td[data-label="사유 / 신호"]:empty { display: none; }
  .scenario-body td[data-label="사유 / 신호"]::before {
    display: block;
    margin-bottom: 2px;
  }
}