/* 차트 탭 — 상단 한 줄 도구막대 · 왼쪽 세로 그리기 막대 · 접히는 종목 목록 (2026-10-14 정리) */
.wrap.wide{max-width:1680px}
.chart-page .site{margin-bottom:0}
.cw{display:grid; grid-template-columns:232px minmax(0,1fr); gap:10px; align-items:stretch; margin-top:12px; height:calc(100vh - 92px); min-height:560px}
.cw.noside{grid-template-columns:minmax(0,1fr)} .cw.noside .side{display:none}
/* 종목 목록 */
.side{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); display:flex; flex-direction:column; min-height:0}
.side .q{padding:8px 8px 6px} .side .q input{width:100%; padding:7px 10px; border:1px solid var(--line-2); border-radius:var(--r); font:inherit; font-size:13px; background:var(--bg)}
.side .q input:focus{outline:none; border-color:var(--ink); background:var(--card)}
.srcbar{display:flex; gap:6px; align-items:center; padding:0 8px 6px}
.src{flex:1; min-width:0; font:inherit; font-size:12px; padding:5px 8px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--card); color:var(--ink); -webkit-appearance:menulist; appearance:menulist}
.pager{display:inline-flex; align-items:center; gap:2px} .pager button{width:22px; height:24px; border:1px solid var(--line-2); border-radius:4px; background:var(--card); font-size:13px; cursor:pointer; color:var(--ink-2)} .pager button:hover{border-color:var(--ink)} .pager small{font-size:11px; color:var(--ink-3); white-space:nowrap; padding:0 2px}
.side .hint{display:block; padding:0 10px 4px; font-size:11px; color:var(--blue); min-height:14px}
.symlist{overflow:auto; flex:1; min-height:0; border-top:1px solid var(--line-soft)}
.symlist button{display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:6px 10px; border-bottom:1px solid var(--line-soft); font-size:13px; background:none; cursor:pointer}
.symlist button:hover{background:var(--hover)} .symlist button.on{background:var(--blue-soft)}
.symlist .ci{display:inline-flex; width:20px; height:20px; border-radius:50%; background:var(--blue-soft); color:var(--blue); align-items:center; justify-content:center; font-size:7px; font-weight:800; overflow:hidden; flex:none}
.symlist .ci img{width:100%; height:100%; object-fit:contain; background:var(--card)}
.symlist .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .symlist .nm small{color:var(--ink-3); margin-left:4px; font-size:11px}
.symlist .chg{font-size:11.5px; font-variant-numeric:tabular-nums; white-space:nowrap}
.symlist .rk{width:18px; flex:none; text-align:right; font-size:10.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.sortbar{padding-top:0}
/* 본체 */
.main{display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; position:relative}
.bar{display:flex; align-items:center; gap:4px; padding:6px 8px; border-bottom:1px solid var(--line); flex-wrap:wrap; min-height:42px}
.bar .sep{width:1px; height:20px; background:var(--line); margin:0 4px} .bar .sp{flex:1}
.tb,.ib{font:inherit; font-size:12.5px; font-weight:600; color:var(--ink-2); padding:5px 9px; border:1px solid transparent; border-radius:var(--r); background:none; cursor:pointer; white-space:nowrap; line-height:1.3}
.tb:hover,.ib:hover{background:var(--hover); color:var(--ink)} .tb.on{background:var(--ink); color:#fff} .tb b{font-weight:800}
.ib{padding:5px 8px; font-size:15px; color:var(--ink-3)}
.grp{display:inline-flex; gap:1px} .grp .tb{padding:5px 8px}
#auto.on{background:var(--ok-soft); color:var(--ok)}
/* 펼침 메뉴 */
.menu{position:relative} .menu .dd{position:absolute; top:100%; left:0; z-index:30; margin-top:4px; background:var(--card); border:1px solid var(--line-2); border-radius:var(--r); box-shadow:var(--shadow); min-width:170px; padding:5px; display:none; max-height:70vh; overflow:auto}
.menu.right .dd{left:auto; right:0} .menu.open .dd{display:block}
.menu .dd button{display:flex; justify-content:space-between; gap:12px; width:100%; text-align:left; padding:7px 10px; font:inherit; font-size:13px; border-radius:4px; background:none; cursor:pointer; color:var(--ink)}
.menu .dd button:hover{background:var(--hover)} .menu .dd button.on{background:var(--blue-soft); color:var(--blue)} .menu .dd button small{color:var(--ink-3); font-size:11px; white-space:nowrap}
.menu .dd .gh{font-size:11px; font-weight:700; color:var(--ink-3); padding:8px 10px 3px} .menu .dd .gh:first-child{padding-top:3px}
.menu .dd .cols{display:grid; grid-template-columns:1fr 1fr; gap:0 6px; min-width:420px}
.menu .dd hr{border:0; border-top:1px solid var(--line-soft); margin:5px 0}
.menu .dd button.danger{color:var(--up)}
/* 지표 칩 */
.chips{display:flex; gap:6px; flex-wrap:wrap; padding:6px 10px; border-bottom:1px solid var(--line-soft); background:var(--bg)}
.chip{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; border:1px solid var(--line-2); border-radius:999px; padding:3px 6px 3px 9px; background:var(--card); cursor:pointer; color:var(--ink-2)}
.chip:hover{border-color:var(--ink); color:var(--ink)} .chip.on{border-color:var(--blue); color:var(--blue)}
.chip .sw{display:inline-flex; gap:2px} .chip .sw i{display:inline-block; width:8px; height:8px; border-radius:50%}
.chip .x{font-size:13px; line-height:1; color:var(--ink-3); padding:0 2px} .chip .x:hover{color:var(--up)}
/* 설정 팝오버 */
.popover{position:absolute; z-index:40; background:var(--card); border:1px solid var(--line-2); border-radius:var(--r); box-shadow:var(--shadow); padding:10px 12px; min-width:230px; font-size:12.5px}
.popover h4{margin:0 0 8px; font-size:13px; font-weight:800; display:flex; justify-content:space-between; align-items:center} .popover h4 button{font-size:14px; color:var(--ink-3); background:none; cursor:pointer}
.popover .row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 0} .popover .row label{color:var(--ink-2)}
.popover input[type=number],.popover input[type=text]{width:84px; font:inherit; font-size:12.5px; padding:3px 6px; border:1px solid var(--line-2); border-radius:4px; text-align:right} .popover input[type=text]{width:120px}
.popover input[type=color]{width:22px; height:18px; padding:0; border:1px solid var(--line-2); border-radius:3px; background:none; cursor:pointer}
.popover .lcolors{display:flex; gap:6px; flex-wrap:wrap} .popover .lcolors label{display:inline-flex; flex-direction:column; align-items:center; font-size:10px; color:var(--ink-3)}
.popover .acts{display:flex; justify-content:flex-end; gap:6px; margin-top:8px; padding-top:8px; border-top:1px solid var(--line-soft)}
.popover .acts button{font:inherit; font-size:12px; font-weight:600; padding:4px 10px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--card); cursor:pointer} .popover .acts .danger{color:var(--up); border-color:var(--up-soft)}
.popover .note{font-size:11px; color:var(--ink-3); margin:4px 0 0}
[hidden]{display:none !important}
/* 차트 영역 + 세로 그리기 막대 */
.stage{display:flex; flex:1; min-height:0; position:relative} .stage.has-drawer #grid{margin-right:380px}
.dtools{display:flex; flex-direction:column; gap:2px; padding:6px 4px; border-right:1px solid var(--line); background:var(--card); width:38px; flex:none; align-items:center}
.dtools button{width:30px; height:30px; border:1px solid transparent; border-radius:6px; background:none; font-size:15px; color:var(--ink-2); cursor:pointer; line-height:1} .dtools button:hover{background:var(--hover); color:var(--ink)} .dtools button.on{background:var(--ink); color:#fff}
.dtools button[data-act]{color:var(--ink-3)} .dtools button[data-act]:hover{color:var(--up)} .dtools i{width:22px; height:1px; background:var(--line); margin:4px 0}
.dtools input[type=color]{width:22px; height:22px; padding:0; border:1px solid var(--line-2); border-radius:4px; background:none; cursor:pointer; margin:2px 0}
#grid{display:grid; gap:1px; background:var(--line); flex:1; min-height:0; min-width:0}
#grid[data-n="2"]{grid-template-columns:1fr 1fr} #grid[data-n="4"]{grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr} #grid[data-n="6"]{grid-template-columns:repeat(3,1fr); grid-template-rows:1fr 1fr}
#grid[data-n="9"]{grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr)} #grid[data-n="12"]{grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(3,1fr)} #grid[data-n="16"]{grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr)}
.cell{display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--card); position:relative}
#grid[data-n]:not([data-n="1"]) .cell.on{box-shadow:inset 0 0 0 2px var(--blue)}
.cell .chd{display:flex; align-items:center; gap:8px; padding:5px 10px; font-size:13px; min-height:30px}
.cell .chd .ttl{font-weight:800; display:flex; align-items:baseline; gap:5px; min-width:0} .cell .chd .ttl small{font-weight:500; color:var(--ink-3); font-size:11.5px; white-space:nowrap}
.cell .chd .px{font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap} .cell .chd .px small{font-weight:600; margin-left:5px; font-size:11.5px}
.cell .chd .sp{flex:1} .cell .chd [data-pick]{font-size:11.5px; color:var(--ink-3); background:none; border:1px solid var(--line-2); border-radius:4px; padding:2px 7px; cursor:pointer} .cell .chd [data-pick]:hover{color:var(--ink); border-color:var(--ink)}
.cell .cv{position:relative; flex:1; min-height:0; display:flex; flex-direction:column} .cell .cc{flex:1; min-height:0; position:relative}
.cell .legend{position:absolute; left:8px; top:4px; z-index:5; font-size:11.5px; line-height:1.5; color:var(--ink-2); pointer-events:none; font-variant-numeric:tabular-nums; max-width:calc(100% - 70px)}
.cell .legend b{color:var(--ink)} .cell .legend .row{display:flex; gap:8px; flex-wrap:wrap} .cell .legend i{display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:3px}
.cell .foot{margin:0; padding:2px 10px 3px; font-size:10.5px; color:var(--ink-3); border-top:1px solid var(--line-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#grid[data-compact="1"] .cell .legend .row:nth-child(2), #grid[data-compact="1"] .cell .foot, #grid[data-compact="1"] .cell .chd [data-pick], #grid[data-compact="1"] .cell .chd .ttl small{display:none}
#grid[data-compact="1"] .cell .legend .row:first-child span:not(:first-child):not(:nth-child(5)):not(:last-child){display:none}
#grid[data-compact="1"] .cell .chd{padding:3px 8px; min-height:24px; font-size:12px; gap:6px} #grid[data-compact="1"] .cell .chd .px{font-size:12px} #grid[data-compact="1"] .cell .legend{font-size:10.5px}
.draw-layer{position:absolute; left:0; top:0; z-index:6; pointer-events:none}
.main > .foot{margin:0; padding:5px 12px; font-size:11px; color:var(--ink-3); border-top:1px solid var(--line-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.toast{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:8px 14px; border-radius:var(--r); font-size:13px; z-index:50; opacity:0; transition:opacity .2s; pointer-events:none} .toast.on{opacity:1}
@media (max-width:900px){ .cw{grid-template-columns:1fr; height:auto} .side{max-height:240px} #grid{min-height:60vh} #grid[data-n]{grid-template-columns:1fr 1fr; grid-template-rows:none} #grid[data-n] .cell{height:240px} #grid[data-n="1"]{grid-template-columns:1fr} #grid[data-n="1"] .cell{height:60vh} .bar{gap:2px} .menu .dd .cols{min-width:0; grid-template-columns:1fr} }

/* 부가 패널: 서랍·리플레이·조건 편집기·백테스트 결과 (2026-10-14) */
.tb .badge{display:inline-block; min-width:16px; padding:0 5px; border-radius:9px; background:var(--up); color:#fff; font-size:10.5px; line-height:16px; text-align:center; margin-left:3px}
.drawer{position:absolute; top:0; right:0; bottom:0; width:380px; max-width:100%; background:var(--card); border-left:1px solid var(--line); z-index:35; display:flex; flex-direction:column}
.drawer > div{display:flex; flex-direction:column; min-height:0; height:100%}
.drawer .dh{display:flex; align-items:center; justify-content:space-between; padding:8px 8px 8px 14px; border-bottom:1px solid var(--line)} .drawer .dh h3{margin:0; font-size:14px; font-weight:800}
.drawer .db{overflow:auto; padding:10px 14px 16px; font-size:12.5px; flex:1}
.drawer .row{display:flex; gap:6px; align-items:center; margin:6px 0} .drawer .row input[type=text],.drawer .row input[type=number]{flex:1; min-width:0; font:inherit; font-size:12.5px; padding:5px 8px; border:1px solid var(--line-2); border-radius:var(--r)}
.drawer .chk{display:inline-flex; align-items:center; gap:4px; white-space:nowrap; color:var(--ink-2)}
.sec-s{margin:10px 0} .sec-s .sh{font-size:11.5px; font-weight:700; color:var(--ink-3); margin:0 0 5px; display:flex; justify-content:space-between} .sec-s .sh small{font-weight:600; color:var(--blue)}
.conds .empty{font-size:12px; color:var(--ink-3); padding:6px 0}
.cond{display:flex; flex-wrap:wrap; gap:4px; align-items:center; padding:6px; border:1px solid var(--line-soft); border-radius:var(--r); background:var(--bg); margin-bottom:5px}
.cond select,.cond input{font:inherit; font-size:12px; padding:3px 5px; border:1px solid var(--line-2); border-radius:4px; background:var(--card)} .cond input[type=number]{width:58px}
.cond .ser{display:inline-flex; gap:3px; align-items:center} .cond > select{font-weight:700; color:var(--blue)} .cond .x{margin-left:auto; font-size:14px; color:var(--ink-3); background:none; cursor:pointer} .cond .x:hover{color:var(--up)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:6px} .grid2 label{display:flex; flex-direction:column; gap:3px; font-size:11.5px; color:var(--ink-3)} .grid2 input{font:inherit; font-size:12.5px; padding:4px 7px; border:1px solid var(--line-2); border-radius:4px; width:100%}
.drawer .acts{display:flex; gap:6px; margin:8px 0}
.bt-head{font-size:12px; color:var(--ink-2); margin:8px 0 6px; font-weight:600}
.tiles-s{display:grid; grid-template-columns:repeat(3,1fr); gap:5px} .tile-s{background:var(--bg); border:1px solid var(--line-soft); border-radius:var(--r); padding:6px 8px} .tile-s small{display:block; font-size:10.5px; color:var(--ink-3)} .tile-s b{display:block; font-size:13.5px; font-variant-numeric:tabular-nums; margin-top:2px} .tile-s b.up{color:var(--up)} .tile-s b.down{color:var(--down)}
.eq{display:block; width:100%; margin:10px 0 2px; background:var(--bg); border-radius:var(--r)} .legend-s{font-size:10.5px; color:var(--ink-3); margin-bottom:8px} .legend-s i{display:inline-block; width:10px; height:3px; vertical-align:middle; margin:0 3px 0 6px; border-radius:2px}
.trades{max-height:320px; overflow:auto; border-top:1px solid var(--line)} .trades table{width:100%; border-collapse:collapse; font-size:11.5px} .trades th{font-weight:700; color:var(--ink-3); text-align:left; padding:4px 4px; position:sticky; top:0; background:var(--card); border-bottom:1px solid var(--line-soft)} .trades td{padding:4px; border-bottom:1px solid var(--line-soft); vertical-align:top; font-variant-numeric:tabular-nums} .trades td.up{color:var(--up)} .trades td.down{color:var(--down)} .trades small{color:var(--ink-3)}
.al{display:flex; gap:8px; align-items:flex-start; padding:7px 0; border-bottom:1px solid var(--line-soft)} .al .t{flex:1; min-width:0} .al .t b{display:block; font-size:12.5px} .al .t small{display:block; color:var(--ink-3); font-size:11px; margin-top:1px} .al.fired .t b{color:var(--up)} .al.off .t b{color:var(--ink-3)} .al .x{font-size:14px; color:var(--ink-3); background:none; cursor:pointer} .al .x:hover{color:var(--up)}
.replaybar{display:flex; gap:6px; align-items:center; flex-wrap:wrap; padding:5px 10px; border-bottom:1px solid var(--line-soft); background:var(--warn-soft); font-size:12px} .replaybar label{display:inline-flex; align-items:center; gap:4px; color:var(--ink-2)} .replaybar input{font:inherit; font-size:12px; padding:3px 5px; border:1px solid var(--line-2); border-radius:4px} .replaybar .info{font-variant-numeric:tabular-nums; color:var(--ink); font-weight:700} .replaybar .sp{flex:1} .replaybar .sep{width:1px; height:18px; background:var(--line-2)}
.vp-layer{position:absolute; left:0; top:0; z-index:4; pointer-events:none}
@media (max-width:900px){ .drawer{width:100%} .stage.has-drawer #grid{margin-right:0} }

/* 텔링·사건 층 */
.evbox{position:absolute; right:70px; top:6px; z-index:7; max-width:360px; background:var(--card); border:1px solid var(--line-2); border-radius:var(--r); box-shadow:var(--shadow); padding:6px 8px; font-size:11.5px; pointer-events:none}
.evbox .ev{display:flex; gap:6px; padding:3px 0; border-bottom:1px solid var(--line-soft); line-height:1.4} .evbox .ev:last-child{border-bottom:0} .evbox .ev i{flex:none; width:8px; height:8px; border-radius:50%; margin-top:4px} .evbox .ev small{color:var(--ink-3)} .evbox .ev.more{color:var(--ink-3); justify-content:center}
.kinds{display:flex; flex-wrap:wrap; gap:4px 10px; margin:4px 0 8px} .kinds .chk{font-size:12px} .kinds i{display:inline-block; width:8px; height:8px; border-radius:50%; margin:0 3px 0 2px}
.evrow{cursor:pointer} .evrow:hover{background:var(--hover)} .evrow .dot{flex:none; width:8px; height:8px; border-radius:50%; margin-top:6px} .evrow .lk{font-size:13px; color:var(--ink-3); padding:0 4px} .evrow .lk:hover{color:var(--blue)}

.ev-layer{position:absolute; left:0; top:0; z-index:5; pointer-events:none}
.evcard{position:absolute; z-index:45; width:340px; max-width:calc(100% - 12px); background:var(--card); border:1px solid var(--line-2); border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.14); padding:4px 0; font-size:13px}
.xpost{padding:10px 14px; border-bottom:1px solid var(--line-soft)} .xpost:last-child{border-bottom:0}
.xpost .xh{display:flex; gap:9px; align-items:center; margin-bottom:6px} .xpost .xh img,.xpost .xh .xi{width:38px; height:38px; border-radius:50%; flex:none; object-fit:cover; background:var(--blue-soft)} .xpost .xh .xi{display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:800; background:#8e24aa}
.xpost .xh b{display:block; font-size:13.5px} .xpost .xh small{display:block; color:var(--ink-3); font-size:11.5px}
.xpost .xt{white-space:pre-wrap; word-break:break-word; line-height:1.5; color:var(--ink)} .xpost .xl{display:inline-block; margin-top:6px; font-size:12px; color:var(--blue); font-weight:600}
.evcard .xmore{padding:6px 14px 8px; font-size:11.5px; color:var(--ink-3)}
.evrow .av{width:26px; height:26px; border-radius:50%; flex:none; object-fit:cover; margin-top:1px}
.chip.cmp{border-style:dashed}
.hits{display:flex; flex-wrap:wrap; gap:5px; margin:6px 0} .hit{display:inline-flex; align-items:center; gap:5px; font:inherit; font-size:12px; padding:4px 8px; border:1px solid var(--line-2); border-radius:999px; background:var(--card); cursor:pointer} .hit:hover{border-color:var(--ink)} .hit small{color:var(--ink-3)} .hit .up{color:var(--up)} .hit .down{color:var(--down)}
.drawer .acts .sp{flex:1}

.cell.why .cc{cursor:help}
.why-verdict{font-size:13.5px; font-weight:700; margin:10px 0; padding:8px 10px; background:var(--warn-soft); border-radius:var(--r); line-height:1.45}
.why{display:flex; gap:8px; padding:7px 0; border-bottom:1px solid var(--line-soft); font-size:12.5px} .why .sc{flex:none; width:30px; height:22px; border-radius:6px; background:var(--bg-2); color:var(--ink-2); font-weight:800; font-size:11px; display:inline-flex; align-items:center; justify-content:center} .why .t{min-width:0} .why .t small{color:var(--ink-3)} .why .t a{font-size:12px; color:var(--blue)}

.tools-dd{min-width:230px} .tools-dd .tb{display:flex; justify-content:space-between; width:100%; text-align:left} .tools-dd .tb small{color:var(--ink-3); font-weight:500} .tools-dd .tb.on{background:var(--blue-soft); color:var(--blue)} .tools-dd .keys{font-size:11px; color:var(--ink-3); padding:4px 8px; line-height:1.6} .tools-dd .keys b{font-weight:700; color:var(--ink-2)}
#morebtn.on{background:var(--blue-soft); color:var(--blue)}

.al.sig .t b{color:var(--ink)} .al .t small .up{color:var(--up)} .al .t small .down{color:var(--down)}
/* 2026-10-15 격자·워크포워드 */
.heat{overflow:auto;margin:6px 0} .heat table{border-collapse:collapse;font-size:11px} .heat th{font-weight:600;color:var(--ink-3);padding:2px 5px;text-align:center} .heat td{padding:3px 6px;text-align:center;color:#111;cursor:pointer;min-width:34px;font-variant-numeric:tabular-nums} .heat td:hover{outline:2px solid var(--ink)}
.grid2.sw label{font-size:11px} .grid2.sw input{width:100%}

/* 2026-10-27: 모바일 — 종목 리스트는 짧게, 툴바는 한 줄 가로 스크롤, 범례는 작게 */
@media (max-width:900px){ .side{max-height:none} .side .symlist{max-height:132px} .bar{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch} .bar > *{flex:none} .legend{font-size:10px; line-height:1.35; max-width:calc(100% - 60px)} }

@media (max-width:900px){ .legend{position:static; max-width:none; padding:4px 8px 0; font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .legend > div{overflow:hidden; text-overflow:ellipsis} .side .symlist{max-height:96px} }

@media (max-width:900px){ .legend{position:absolute; left:6px; top:4px; right:60px; max-width:none; padding:3px 6px; font-size:10px; line-height:1.3; background:rgba(255,255,255,.78); border-radius:6px; backdrop-filter:blur(2px)} :root[data-theme="dark"] .legend{background:rgba(22,27,35,.8)} .legend > div{white-space:nowrap; overflow:hidden; text-overflow:ellipsis} }