main { display:flex; justify-content:center; padding:100px 0; }
main > .container { width:100%; max-width:1280px; }

main > .container > h1 { margin-top:60px; display:flex; justify-content:center; align-items:center; }
main > .container > h1 span { position:relative; font-size:40px; font-weight:500; }
main > .container > h1 span::after { content:""; position:absolute; right:10px; top:0; transform:translateX(100%) rotate( 20deg ); width:25px; height:25px; border:2px solid #FE8130; border-radius:5px; z-index:-1; }

.content { margin-top:40px; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "realtime daily" "strategy strategy" "history history"; gap:30px; }
#price-realtime-chart { width:100%; height:400px; touch-action: none; grid-area: realtime; }

#price-daily-chart { grid-area: daily; }

.strategy-designer-wrapper { position:relative; grid-area: strategy; height:400px; }
/*메뉴*/
.strategy-menu { position: absolute; left:10px; top:10px; display:flex; gap:10px; }
.strategy-btn { width:80px; height:25px; background:#7a7a7a; color:white; border-radius:5px; font-size:12px; display: flex; align-items: center; justify-content: center; cursor: grab; user-select: none; }
/*우측버튼*/
.controller { position: absolute; right:10px; top:10px; display:flex; gap:10px; }
.controller > button { width:80px; height:25px; background:#7a7a7a; color:white; border-radius:5px; font-size:12px; display: flex; align-items: center; justify-content: center; cursor: grab; user-select: none; }
.controller > button.on { background:#244DDB; color:#fff; }
/*팝업*/
.dialog-container .field { margin-top:20px; display:flex; align-items:center; gap:10px; }
.dialog-container .field > .field-name { width:100px; }
.dialog-container .field > .field-value { height:100%; display:flex; align-items:center; gap:10px; }
.dialog-container .field input { width:100%; height:30px;  border: 1px solid #ccc; border-radius:5px; }

.strategy-node-item { position: absolute; width: 140px; height: 50px; background:#FE8130; color: white; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: bold; cursor: grab; user-select: none; }

#strategy-line-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }

.strategy-designer { width:100%; height:100%; }

.history { grid-area: history; height:100px; }