/* 한국 주식 팩터 전략 대시보드 — EMP Manager 문법(좌측 레일·1px 보더·그림자 없음)을 따르되 손익색은 한국식(빨강▲ 파랑▼) */
/* file:// 에서는 브라우저가 폰트 파일 읽기를 막는다(CORS) → 설치된 Pretendard 가 있으면 쓰고, 없으면 맑은 고딕 */
@font-face { font-family: 'Pretendard Variable'; src: local('Pretendard Variable'), local('Pretendard'), local('Pretendard Regular'); font-weight: 45 920; font-display: swap; }

:root {
  --bg: #f9f9f7; --panel: #ffffff; --panel2: #f3f3f0; --line: #e1e0d9; --line2: #c3c2b7;
  --ink: #0b0b0b; --ink2: #52514e; --muted: #77756f;
  --acc: #1c5cab; --accq: #e8f0fb;
  --up: #c62f2f; --down: #1c5cab;            /* 손익: 한국식 */
  --upq: #fbe9e9; --downq: #e8f0fb;
  --warn: #9a6400; --warnq: #fff4dc; --bad: #b42323; --badq: #fbe9e9; --ok: #1d6b1d; --okq: #e6f4e6;
  --grid: #e9e8e2; --axis: #c3c2b7; --bm: #6f6d67;
  --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #eda100; --c5: #e87ba4; --c6: #008300;
  --hneg: #2a78d6; --hpos: #e34948;          /* 상관 히트맵(부호), 손익 아님 */
  --navw: 232px; --fs: 13px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0d0d0d; --panel: #1a1a19; --panel2: #222220; --line: #2c2c2a; --line2: #383835;
  --ink: #ffffff; --ink2: #c3c2b7; --muted: #9a988f;
  --acc: #6da7ec; --accq: #16263b;
  --up: #ff6b6b; --down: #6da7ec; --upq: #3a1c1c; --downq: #16263b;
  --warn: #f0b84a; --warnq: #3a2d10; --bad: #ff7b7b; --badq: #3a1c1c; --ok: #4fc44f; --okq: #14301a;
  --grid: #2c2c2a; --axis: #383835; --bm: #a9a79e;
  --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181; --c6: #008300;
  --hneg: #3987e5; --hpos: #e66767;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0d0d; --panel: #1a1a19; --panel2: #222220; --line: #2c2c2a; --line2: #383835;
    --ink: #ffffff; --ink2: #c3c2b7; --muted: #9a988f;
    --acc: #6da7ec; --accq: #16263b;
    --up: #ff6b6b; --down: #6da7ec; --upq: #3a1c1c; --downq: #16263b;
    --warn: #f0b84a; --warnq: #3a2d10; --bad: #ff7b7b; --badq: #3a1c1c; --ok: #4fc44f; --okq: #14301a;
    --grid: #2c2c2a; --axis: #383835; --bm: #a9a79e;
    --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181; --c6: #008300;
    --hneg: #3987e5; --hpos: #e66767;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 400 var(--fs)/1.55 'Pretendard Variable', 'Malgun Gothic', system-ui, sans-serif; word-break: keep-all; }
a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }

/* 셸 */
#nav { position: fixed; inset: 0 auto 0 0; width: var(--navw); background: var(--panel); border-right: 1px solid var(--line); padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
#nav .brand { font-weight: 700; font-size: 14px; padding: 2px 8px 2px; }
#nav .brandsub { color: var(--muted); font-size: 11.5px; padding: 0 8px 10px; }
#nav .unibox { display: flex; flex-direction: column; gap: 4px; padding: 0 8px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
#nav .unibox .seg { width: 100%; display: flex; }
#nav .unibox .seg button { flex: 1; padding: 4px 6px; }
#nav .unibox .seg button:disabled { opacity: .5; cursor: wait; }
#nav a.nv { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 6px; color: var(--ink2); font-weight: 500; }
#nav a.nv:hover { background: var(--panel2); text-decoration: none; }
#nav a.nv.on { background: var(--accq); color: var(--acc); font-weight: 650; }
#nav .nvi { width: 18px; text-align: center; font-size: 14px; }
#nav .navfoot { margin-top: auto; padding: 10px 8px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 11.5px; display: flex; flex-direction: column; gap: 6px; }
#themeBtn { background: none; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; cursor: pointer; text-align: left; }
main { margin-left: var(--navw); padding: 20px 28px 48px; max-width: 1360px; }
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.pagehead h1 { font-size: 20px; margin: 0; font-weight: 700; }
.pagehead .sub { color: var(--muted); font-size: 12px; }

/* 블록 */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; margin-bottom: 14px; }
.panel h2 { font-size: 14.5px; margin: 0 0 10px; font-weight: 700; }
.panel h3 { font-size: 13px; margin: 14px 0 6px; font-weight: 650; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.grid2 > .panel { margin-bottom: 0; }
.panel, .verdict { min-width: 0; }
.muted { color: var(--muted); }
.small { font-size: 11.5px; }
.note { color: var(--ink2); font-size: 12px; }
.hidden { display: none !important; }

/* 판단 제안 블록 */
.verdict { border: 1px solid var(--acc); border-left-width: 4px; background: var(--panel); border-radius: 8px; padding: 16px 18px; margin-bottom: 14px; }
.verdict .vlabel { font-size: 11.5px; font-weight: 700; color: var(--acc); letter-spacing: .02em; }
.verdict .vhead { font-size: 17px; font-weight: 700; margin: 4px 0 8px; }
.verdict ul { margin: 6px 0 0; padding-left: 18px; }
.verdict li { margin: 2px 0; }

/* KPI */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin: 10px 0; }
.card { padding: 10px 14px; border-right: 1px solid var(--line); background: var(--panel); }
.card:last-child { border-right: 0; }
.card .lb { color: var(--muted); font-size: 11.5px; }
.card .vl { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.card .sm { color: var(--muted); font-size: 11px; }

/* 배지 */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; border: 1px solid var(--line2); color: var(--ink2); background: var(--panel); white-space: nowrap; }
.pill.ok { border-color: transparent; background: var(--okq); color: var(--ok); }
.pill.warn { border-color: transparent; background: var(--warnq); color: var(--warn); }
.pill.bad { border-color: transparent; background: var(--badq); color: var(--bad); }
.pill.acc { border-color: transparent; background: var(--accq); color: var(--acc); }
.pill::before { content: ''; }
.pill.ok::before { content: '●'; font-size: 8px; }
.pill.warn::before { content: '▲'; font-size: 8px; }
.pill.bad::before { content: '■'; font-size: 8px; }
.notice { border: 1px solid var(--line); background: var(--panel2); border-radius: 8px; padding: 10px 14px; font-size: 12.5px; margin-bottom: 14px; }
.notice.warn { background: var(--warnq); border-color: transparent; }
.notice b { font-weight: 700; }

/* 손익 */
.up { color: var(--up); }
.down { color: var(--down); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 표 */
.tblwrap { overflow: auto; max-height: 640px; border: 1px solid var(--line); border-radius: 8px; }
table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
th, td { padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { position: sticky; top: 0; background: var(--panel2); color: var(--ink2); font-weight: 600; text-align: left; z-index: 1; cursor: default; white-space: nowrap; }
th.sortable { cursor: pointer; }
th.sortable:hover { color: var(--ink); }
th.sorted::after { content: ' ▾'; }
th.sorted.asc::after { content: ' ▴'; }
tr.rowlink { cursor: pointer; }
tr.rowlink:hover td { background: var(--panel2); }
td .nm { font-weight: 600; white-space: nowrap; }
td.nw, td.nw a { white-space: nowrap; }
td .idt { color: var(--muted); font-size: 11px; }
input[type=checkbox] { accent-color: var(--acc); }

/* 컨트롤 */
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.toolbar label { color: var(--ink2); font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button { border: 0; background: var(--panel); padding: 4px 10px; cursor: pointer; color: var(--ink2); border-right: 1px solid var(--line); }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--accq); color: var(--acc); font-weight: 650; }
select, input[type=search], input[type=number] { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; color: var(--ink); font: inherit; }
select { max-width: 100%; text-overflow: ellipsis; }
.toolbar label { max-width: 100%; min-width: 0; }
input[type=range] { accent-color: var(--acc); }
.btn { border: 1px solid var(--line2); background: var(--panel); border-radius: 6px; padding: 5px 12px; cursor: pointer; }
.btn:hover { background: var(--panel2); }
.btn.primary { background: var(--acc); color: #fff; border-color: var(--acc); }
.btn.danger { border-color: var(--bad); color: var(--bad); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 12px; background: var(--panel); }
.chip .sw { width: 10px; height: 10px; border-radius: 2px; }
.chip button { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 0 4px; }

/* 차트 */
.chartwrap { position: relative; }
.chart { width: 100%; height: 300px; display: block; }
.chart.tall { height: 360px; }
.chart .gl { stroke: var(--grid); stroke-width: 1; }
.chart .ax { fill: var(--muted); font-size: 11px; }
.chart .ln { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart .ln.bm { stroke: var(--bm); stroke-dasharray: 5 4; stroke-width: 1.5; }
.chart .cross { stroke: var(--line2); stroke-width: 1; }
.chart .shade { fill: var(--panel2); }
.tip { position: absolute; pointer-events: none; background: var(--panel); border: 1px solid var(--line2); border-radius: 6px; padding: 8px 10px; font-size: 12px; min-width: 180px; z-index: 5; }
.tip .tr { display: flex; justify-content: space-between; gap: 14px; font-variant-numeric: tabular-nums; }
.tip .tr .k { display: inline-flex; align-items: center; gap: 6px; color: var(--ink2); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink2); margin-top: 6px; }
.legend .li { display: inline-flex; align-items: center; gap: 6px; }
.legend .sw { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.legend .sw.dash { background: repeating-linear-gradient(90deg, var(--bm) 0 5px, transparent 5px 8px) !important; }

/* 히트맵 */
.heat { border-collapse: separate; border-spacing: 1px; font-size: 10.5px; }
.heat td, .heat th { padding: 0; border: 0; }
.heat td.c { width: 14px; height: 14px; }
.heat th.r { text-align: right; padding-right: 6px; white-space: nowrap; font-weight: 500; position: static; background: none; color: var(--ink2); }
.heatbox { overflow: auto; max-height: 720px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; }

/* 상세 */
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 4px 12px; font-size: 12.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.hyp { border-left: 3px solid var(--acc); padding: 6px 12px; background: var(--panel2); border-radius: 0 6px 6px 0; margin: 8px 0; }
.hyp b { display: inline-block; min-width: 60px; color: var(--ink2); }

/* 연구 원장 */
.card .vl .u { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 2px; }
.funnel { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr); gap: 18px; }
.fgroup { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; align-content: start; }
.fgl { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.fstep { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--panel); }
.fstep .fl { font-size: 11.5px; color: var(--ink2); }
.fstep .fv { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fbar { height: 4px; background: var(--panel2); border-radius: 2px; margin: 4px 0 2px; overflow: hidden; }
.fbar span { display: block; height: 100%; background: var(--acc); }
table.ledger td .nm { white-space: normal; min-width: 140px; max-width: 200px; }
table.ledger th { white-space: normal; vertical-align: bottom; }
table.ledger th, table.ledger td { padding: 6px 8px; }
span.nw { white-space: nowrap; }
table.ledger td .lgsub { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill.hold2 { display: inline-block; white-space: nowrap; line-height: 1.3; padding: 2px 8px; border-radius: 6px; text-align: left; }
table.ledger th.nosort { cursor: not-allowed; color: var(--muted); }
.pcards { display: grid; gap: 10px; }
.pcard { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.pcard .ptitle { font-weight: 600; margin: 2px 0; }
.memo { margin: 0; padding-left: 18px; }
.memo li { margin: 3px 0; overflow-wrap: anywhere; }
#cyclePanel .pill { white-space: normal; }
#cyclePanel code, .pcard code, .kv dd code, .verdict code { overflow-wrap: anywhere; }
.chart .shade { fill: var(--panel2); stroke: var(--line2); stroke-dasharray: 3 3; }
.chart .shade.open { fill: var(--accq); stroke: none; }
.chart .ax.seal { fill: var(--ink2); font-weight: 600; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
option:disabled { color: var(--muted); }
/* 논문 등록부 (2026-10-22) */
table.papers td .nm { white-space: normal; min-width: 200px; max-width: 360px; word-break: keep-all; }
table.papers td .lgsub { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.papers td .pnote { max-width: 300px; font-size: 11.5px; color: var(--ink2); white-space: normal; word-break: keep-all; }
.pill.fam { white-space: nowrap; }
.pill.fam.muted { color: var(--muted); border-style: dashed; }
table.papers td .tags { max-width: 150px; white-space: normal; word-break: keep-all; }
table.papers th.nosort { cursor: not-allowed; color: var(--muted); }
table.papers th, table.papers td { padding: 6px 8px; }
.sbar { display: inline-block; width: 60px; height: 8px; border: 1px solid var(--line2); border-radius: 4px; vertical-align: middle; overflow: hidden; background: var(--panel2); }
.sbar span { display: block; height: 100%; background: var(--acc); }
td.lcell { white-space: normal; min-width: 160px; max-width: 280px; font-size: 12px; word-break: keep-all; overflow-wrap: anywhere; vertical-align: top; }
/* 마크다운 카드(결과·소개) */
.panel.md h3 { font-size: 14px; margin: 18px 0 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.panel.md h4 { font-size: 13px; margin: 12px 0 4px; }
.panel.md p, .panel.md li { font-size: 12.5px; line-height: 1.55; word-break: keep-all; overflow-wrap: anywhere; }
.panel.md p { margin: 6px 0; }
.panel.md ul, .panel.md ol { margin: 4px 0 6px; padding-left: 20px; }
.panel.md li { margin: 2px 0; }
.panel.md blockquote { margin: 6px 0; padding: 4px 12px; border-left: 3px solid var(--line2); color: var(--ink2); }
.panel.md pre { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font-size: 11.5px; overflow: auto; }
.panel.md .tblwrap { max-height: none; margin: 6px 0 10px; }
.panel.md table { font-size: 12px; }
.panel.md td, .panel.md th { white-space: nowrap; }
.panel.md td.num, .panel.md th.num { text-align: right; font-variant-numeric: tabular-nums; }
.panel.md hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }

@media (max-width: 960px) {
  .funnel { grid-template-columns: minmax(0, 1fr); }
  /* 모바일 원장 표: 이름·판정·표본 내 월%·봉인·사후 개월만 */
  table.ledger .col-kind, table.ledger .col-dsr_cum, table.ledger .col-hmean,
  table.ledger .col-reg, table.ledger .col-pls, table.ledger .col-dir { display: none; }
  table.ledger td .nm { white-space: normal; }
  table.ledger td .lgsub { max-width: 120px; }
  table.ledger th, table.ledger td { padding: 6px 6px; }
  #nav { position: sticky; top: 0; inset: auto; width: auto; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px 10px; z-index: 10; }
  #nav .brandsub, #nav .navfoot .meta { display: none; }
  #nav .unibox { flex-direction: row; align-items: center; border: 0; padding: 0 8px 0 0; margin: 0; order: 99; width: 100%; }
  #nav .unibox .seg { width: auto; }
  #nav .brand { padding: 0 8px 0 0; }
  #nav .navfoot { margin: 0 0 0 auto; border: 0; padding: 0; }
  #nav a.nv { padding: 5px 8px; }
  main { margin-left: 0; padding: 14px 16px 40px; }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .card { border-right: 0; border-bottom: 1px solid var(--line); }
  .kv { grid-template-columns: 96px 1fr; }
  .chart { height: 240px; }
  /* 모바일 전략 표: 이름·초과·IR·확장 판정만 */
  table.strat .col-family, table.strat .col-layer, table.strat .col-cagr, table.strat .col-mdd,
  table.strat .col-turn, table.strat .col-k200, table.strat .col-jkp { display: none; }
  table.strat td .nm { white-space: normal; }
  table.strat td.col-name { max-width: 118px; }
  table.strat .pill { padding: 1px 6px; }
  table.strat th, table.strat td { padding: 6px 6px; }
  /* 모바일 등록부 표: id·제목·총점·판정만 */
  table.papers .col-source, table.papers .col-status, table.papers .col-t, table.papers .col-doc, table.papers .col-note { display: none; }
  table.papers td .tags { display: none; }
  table.papers td .nm { min-width: 0; max-width: 180px; }
  table.papers td .lgsub { max-width: 180px; }
  .pagehead h1 .muted { display: block; font-size: 14px; }
}