/* 차트 그리기 도구(draw.js). 값은 style.css :root 것만 씀 */
.dw-box{display:flex;gap:8px;margin-top:12px;position:relative}
.dw-box>.chart{flex:1;min-width:0;margin-top:0}
.dw-bar{flex:none;width:40px;height:420px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:2px 0;border-right:1px solid var(--line);overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain}
.dw-bar::-webkit-scrollbar{display:none}
/* 도구가 차트보다 길면 끝을 흐리게(더 있다는 표시) */
.dw-bar.fade-b{-webkit-mask-image:linear-gradient(#000 calc(100% - 36px),transparent);mask-image:linear-gradient(#000 calc(100% - 36px),transparent)}
.dw-bar.fade-t{-webkit-mask-image:linear-gradient(transparent,#000 36px);mask-image:linear-gradient(transparent,#000 36px)}
.dw-bar.fade-t.fade-b{-webkit-mask-image:linear-gradient(transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(transparent,#000 36px,#000 calc(100% - 36px),transparent)}
.dw-b{position:relative;flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:var(--r-s);color:var(--tx3)}
.dw-b .ic,.dw-b svg{display:block}
.dw-b:hover{background:var(--hover);color:#fff}
.dw-b.on{color:var(--gold)}
.dw-b[data-t].on{background:var(--line2)}
.dw-more{position:absolute;right:0;bottom:0;width:12px;height:12px;border-radius:0 0 var(--r-s) 0}
.dw-more::after{content:'';position:absolute;right:3px;bottom:3px;border-style:solid;border-width:0 0 5px 5px;border-color:transparent transparent var(--line3) transparent}
.dw-b:hover .dw-more::after{border-bottom-color:var(--tx3)}
.dw-more:hover{background:var(--line2)}
.dw-sep{flex:none;width:24px;height:1px;margin:4px 0;background:var(--line2)}
.dw-fold{flex:none;width:36px;height:32px;margin-top:auto;display:grid;place-items:center;border-radius:var(--r-s);color:var(--mut)}
.dw-fold:hover{background:var(--hover);color:#fff}
.dw-unfold{display:none;position:absolute;left:0;top:50%;z-index:6;width:20px;height:44px;margin-top:-22px;place-items:center;border:1px solid var(--line2);border-left:0;border-radius:0 var(--r-s) var(--r-s) 0;background:var(--panel2);color:var(--tx3)}
.dw-unfold:hover{color:#fff}
.dw-box.fold .dw-bar{display:none}
.dw-box.fold .dw-unfold{display:grid}
.dw-box.fold{gap:0}

/* 묶음 펼침 */
.dw-fly{position:absolute;z-index:30;min-width:208px;max-width:calc(100% - 52px);padding:4px;background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r);box-shadow:0 12px 32px rgba(0,0,0,.5)}
.dw-fi{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:0 12px 0 8px;border-radius:var(--r-s);font-size:var(--t-md);color:var(--tx2);text-align:left;white-space:nowrap}
.dw-fi svg{flex:none;color:var(--tx3)}
.dw-fi:hover{background:var(--hover);color:#fff}
.dw-fi.on,.dw-fi.on svg{color:var(--gold)}
.dw-fi.danger:hover{color:var(--up)}
.dw-fi:disabled{opacity:.4;cursor:default;background:none}
.dw-fh{padding:6px 8px 4px;font-size:var(--t-xs);color:var(--mut)}
.dw-emo{display:grid;grid-template-columns:repeat(8,36px);gap:2px}
.dw-emo button{width:36px;height:36px;border-radius:var(--r-s);font-size:20px;line-height:1}
.dw-emo button:hover{background:var(--hover)}
.dw-emo button.on{background:var(--line2)}

/* 차트 위 그림 */
.dw-svg{position:absolute;left:0;top:0;z-index:3;pointer-events:none;overflow:hidden;font-family:inherit}
.dw-svg.hide .dw-s{display:none}
.dw-svg .dw-s *{pointer-events:visiblePainted;cursor:move}
.dw-svg .hit{stroke:transparent;stroke-width:14;fill:none;pointer-events:stroke!important}
.dw-svg text{-webkit-user-select:none;user-select:none}
.dw-svg.locked .dw-s *{pointer-events:none!important}
.dw-svg.erase .dw-s *{cursor:pointer}
.dw-svg.erase .dw-s:hover{opacity:.45}
.dw-svg .dw-d *{pointer-events:none}
.dw-h{fill:var(--bg);stroke-width:2;cursor:grab!important}
.dw-sel{fill:none;stroke:var(--tx3);stroke-dasharray:4 3;pointer-events:none!important}
.dw-cap{position:absolute;left:0;top:0;z-index:4;cursor:crosshair;touch-action:none}
.dw-cap[hidden]{display:none}
.chart.dw-dotcur tr *{cursor:none!important}
.chart.dw-arrcur tr *,.chart.dw-erscur tr *{cursor:default!important}

/* 고른 그림 띠 */
.dw-pop{position:absolute;top:8px;left:50%;z-index:8;transform:translateX(-50%);display:flex;align-items:center;gap:2px;max-width:calc(100% - 16px);padding:4px;background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r);box-shadow:0 8px 24px rgba(0,0,0,.45);flex-wrap:wrap;justify-content:center}
.dw-pop[hidden]{display:none}
.dw-pn{padding:0 8px 0 4px;font-size:var(--t-xs);color:var(--mut);white-space:nowrap}
.dw-sw{width:28px;height:28px;display:grid;place-items:center;border-radius:var(--r-s)}
.dw-sw i{display:block;width:16px;height:16px;border-radius:50%}
.dw-sw:hover{background:var(--hover)}
.dw-sw.on i{box-shadow:0 0 0 2px var(--panel2),0 0 0 3.5px #fff}
.dw-pb{min-width:28px;height:28px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-s);font-size:var(--t-xs);color:var(--tx2);white-space:nowrap}
.dw-pb:hover{background:var(--hover);color:#fff}
.dw-pb.del:hover{color:var(--up)}
.dw-in{position:absolute;z-index:9;width:180px;height:36px;padding:0 10px;background:var(--field);border:1px solid var(--gold);border-radius:var(--r-s);color:var(--tx);font:inherit;font-size:16px;outline:0}

@media (max-width:720px){
 .dw-box{gap:4px}
 .dw-bar{width:36px;height:320px}
 .dw-b{width:34px;height:34px}
 .dw-more{pointer-events:none}
 .dw-emo{grid-template-columns:repeat(6,36px)}
 .dw-fly{min-width:0}
}