Macbook
2613 lines
68 KiB
CSS
2613 lines
68 KiB
CSS
/* ── 전략편집기 (Strategy Builder) — app theme tokens (strategyEditorTheme.css) ── */
|
||
|
||
.se-page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
height: calc(100vh - 44px);
|
||
min-height: 0;
|
||
background: var(--se-bg);
|
||
color: var(--se-text);
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.se-save-toast {
|
||
position: absolute;
|
||
top: 56px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 200;
|
||
padding: 10px 20px;
|
||
border-radius: 8px;
|
||
background: rgba(0, 255, 136, 0.12);
|
||
border: 1px solid rgba(0, 255, 136, 0.45);
|
||
color: #00ff88;
|
||
font-size: 0.82rem;
|
||
font-weight: 600;
|
||
box-shadow: 0 0 24px rgba(0, 255, 136, 0.25);
|
||
animation: se-toast-in 0.3s ease;
|
||
}
|
||
|
||
@keyframes se-toast-in {
|
||
from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
|
||
to { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||
}
|
||
|
||
.se-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10px 18px;
|
||
border-bottom: 1px solid var(--se-header-border);
|
||
background: var(--se-header-bg);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.se-header-left { display: flex; align-items: baseline; gap: 10px; }
|
||
|
||
.se-title {
|
||
margin: 0;
|
||
font-size: 1.1rem;
|
||
font-weight: 800;
|
||
background: var(--se-title-gradient);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
}
|
||
|
||
.se-subtitle { font-size: 0.72rem; color: var(--se-text-muted); }
|
||
.se-subtitle-hint { color: var(--se-accent, #7aa2f7); font-weight: 500; }
|
||
|
||
/* ── 빠른 백테스팅 실행 툴바 (se-quick-run) ─────────────────────────────── */
|
||
.se-quick-run {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
flex: 1;
|
||
justify-content: center;
|
||
min-width: 0;
|
||
}
|
||
|
||
.se-qr-market-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
background: var(--se-btn-bg, var(--bg2));
|
||
border: 1px solid var(--se-border);
|
||
color: var(--se-text);
|
||
border-radius: 7px;
|
||
padding: 0 8px;
|
||
font-size: 0.76rem;
|
||
cursor: pointer;
|
||
height: 30px;
|
||
outline: none;
|
||
transition: border-color 0.15s, background 0.15s;
|
||
white-space: nowrap;
|
||
min-width: 88px;
|
||
max-width: 140px;
|
||
}
|
||
.se-qr-market-btn:hover:not(:disabled) {
|
||
border-color: var(--se-accent, #3d9be9);
|
||
background: color-mix(in srgb, var(--se-accent, #3d9be9) 8%, var(--se-btn-bg, var(--bg2)));
|
||
}
|
||
.se-qr-market-btn:disabled { opacity: 0.45; cursor: not-allowed; }
|
||
.se-qr-market-ko { font-weight: 600; font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
|
||
.se-qr-market-sym { font-size: 0.68rem; color: var(--se-text-muted); flex-shrink: 0; }
|
||
.se-qr-market-caret { flex-shrink: 0; opacity: 0.55; margin-left: 2px; }
|
||
|
||
.se-qr-select {
|
||
background: var(--se-btn-bg, var(--bg2));
|
||
border: 1px solid var(--se-border);
|
||
color: var(--se-text);
|
||
border-radius: 7px;
|
||
padding: 5px 8px;
|
||
font-size: 0.76rem;
|
||
cursor: pointer;
|
||
height: 30px;
|
||
outline: none;
|
||
transition: border-color 0.15s;
|
||
}
|
||
.se-qr-select:focus { border-color: var(--se-accent, #3d9be9); }
|
||
.se-qr-select:disabled { opacity: 0.45; cursor: not-allowed; }
|
||
.se-qr-select--strategy { flex: 1; min-width: 80px; max-width: 180px; }
|
||
|
||
.se-qr-run-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 50%;
|
||
border: 1px solid var(--se-accent, #3d9be9);
|
||
background: color-mix(in srgb, var(--se-accent, #3d9be9) 18%, transparent);
|
||
color: var(--se-accent, #3d9be9);
|
||
cursor: pointer;
|
||
transition: background 0.15s, transform 0.1s;
|
||
flex-shrink: 0;
|
||
}
|
||
.se-qr-run-btn:hover:not(:disabled) {
|
||
background: color-mix(in srgb, var(--se-accent, #3d9be9) 32%, transparent);
|
||
transform: scale(1.08);
|
||
}
|
||
.se-qr-run-btn:active:not(:disabled) { transform: scale(0.95); }
|
||
.se-qr-run-btn:disabled { opacity: 0.35; cursor: not-allowed; }
|
||
.se-qr-run-btn--loading { border-color: var(--se-text-muted); color: var(--se-text-muted); }
|
||
|
||
.se-qr-spinner {
|
||
display: inline-block;
|
||
width: 12px;
|
||
height: 12px;
|
||
border: 2px solid currentColor;
|
||
border-top-color: transparent;
|
||
border-radius: 50%;
|
||
animation: se-spin 0.7s linear infinite;
|
||
}
|
||
@keyframes se-spin { to { transform: rotate(360deg); } }
|
||
|
||
.se-qr-error {
|
||
font-size: 0.71rem;
|
||
color: var(--se-danger, #f23645);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
max-width: 200px;
|
||
}
|
||
/* ─────────────────────────────────────────────────────────────────────────── */
|
||
|
||
.se-header-actions { display: flex; align-items: center; gap: 8px; }
|
||
|
||
.se-editor-mode {
|
||
display: inline-flex;
|
||
border: 1px solid var(--se-border);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
background: var(--se-btn-bg);
|
||
}
|
||
|
||
.se-editor-mode-btn {
|
||
border: none;
|
||
background: transparent;
|
||
color: var(--se-text-muted);
|
||
padding: 7px 12px;
|
||
font-size: 0.78rem;
|
||
cursor: pointer;
|
||
transition: background 0.15s, color 0.15s;
|
||
}
|
||
|
||
.se-editor-mode-btn:hover {
|
||
color: var(--se-text);
|
||
background: color-mix(in srgb, var(--se-accent) 8%, transparent);
|
||
}
|
||
|
||
.se-editor-mode-btn--on {
|
||
color: var(--se-text);
|
||
background: color-mix(in srgb, var(--se-accent) 18%, transparent);
|
||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--se-accent) 35%, transparent);
|
||
}
|
||
|
||
.se-editor-mode--compact {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.se-editor-mode--compact .se-editor-mode-btn {
|
||
padding: 6px 10px;
|
||
font-size: 0.72rem;
|
||
}
|
||
|
||
.se-list-editor {
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
overscroll-behavior: contain;
|
||
-webkit-overflow-scrolling: touch;
|
||
margin: 8px 12px 12px;
|
||
padding: 12px;
|
||
padding-bottom: 28px;
|
||
border: 1px dashed var(--se-border);
|
||
border-radius: 10px;
|
||
background: color-mix(in srgb, var(--se-center-bg) 92%, var(--se-accent) 8%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14px;
|
||
align-items: stretch;
|
||
transition: border-color 0.15s, background 0.15s;
|
||
}
|
||
|
||
/* App.css .sp-dropzone 와 중복 flex/overflow 정리 */
|
||
.se-list-editor.sp-dropzone {
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
padding: 12px;
|
||
padding-bottom: 28px;
|
||
}
|
||
|
||
.se-list-editor--over {
|
||
border-color: var(--se-node-start-border, var(--se-gold));
|
||
background: color-mix(in srgb, var(--se-node-start-accent, var(--se-gold)) 8%, var(--se-center-bg));
|
||
}
|
||
|
||
.sp-start-section {
|
||
border: 1px solid var(--se-node-start-border);
|
||
border-radius: 10px;
|
||
background: var(--se-node-start-bg);
|
||
box-shadow: 0 0 14px color-mix(in srgb, var(--se-node-start-accent, var(--se-gold)) 14%, transparent);
|
||
flex-shrink: 0;
|
||
overflow: visible;
|
||
}
|
||
|
||
.sp-start-head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 8px 12px;
|
||
border-bottom: 1px solid color-mix(in srgb, var(--se-node-start-border) 70%, transparent);
|
||
background: color-mix(in srgb, var(--se-node-start-accent, var(--se-gold)) 8%, transparent);
|
||
}
|
||
|
||
.sp-start-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: var(--se-node-start-accent, var(--se-gold));
|
||
box-shadow: 0 0 6px color-mix(in srgb, var(--se-node-start-accent, var(--se-gold)) 50%, transparent);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.sp-start-label {
|
||
font-weight: 800;
|
||
font-size: 0.78rem;
|
||
letter-spacing: 0.05em;
|
||
color: var(--se-node-start-accent, var(--se-gold));
|
||
}
|
||
|
||
.sp-start-tf-checks {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.se-start-tf-checks {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 4px 8px;
|
||
align-items: center;
|
||
}
|
||
|
||
.se-start-tf-checks--compact {
|
||
gap: 2px 5px;
|
||
}
|
||
|
||
.se-start-tf-check {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 3px;
|
||
font-size: 0.62rem;
|
||
color: var(--se-text-muted);
|
||
cursor: pointer;
|
||
user-select: none;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.se-start-tf-checks--compact .se-start-tf-check {
|
||
font-size: 0.58rem;
|
||
}
|
||
|
||
.se-start-tf-check input {
|
||
margin: 0;
|
||
accent-color: var(--se-node-start-accent, var(--se-gold));
|
||
cursor: pointer;
|
||
}
|
||
|
||
.se-start-tf-check:has(input:checked) {
|
||
color: var(--se-text);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.se-flow-start-tf-checks-wrap {
|
||
width: 100%;
|
||
}
|
||
|
||
.se-start-tf-checks--graph {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||
column-gap: 2px;
|
||
row-gap: 4px;
|
||
width: 100%;
|
||
}
|
||
|
||
.se-start-tf-checks-row {
|
||
display: contents;
|
||
}
|
||
|
||
.se-start-tf-checks--graph .se-start-tf-check {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
gap: 3px;
|
||
font-size: 0.58rem;
|
||
min-width: 0;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.se-start-tf-checks--graph .se-start-tf-check input {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.se-flow-start-layout {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: 6px;
|
||
width: 100%;
|
||
}
|
||
|
||
.se-flow-start-title-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 6px;
|
||
width: 100%;
|
||
}
|
||
|
||
.se-flow-start-title-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.sp-start-del {
|
||
margin-left: auto;
|
||
width: 22px;
|
||
height: 22px;
|
||
border: none;
|
||
border-radius: 4px;
|
||
background: color-mix(in srgb, var(--se-danger) 15%, transparent);
|
||
color: var(--se-danger);
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
line-height: 1;
|
||
}
|
||
|
||
.sp-start-body {
|
||
padding: 10px 12px 12px;
|
||
min-height: 56px;
|
||
height: auto;
|
||
overflow: visible;
|
||
transition: background 0.15s;
|
||
}
|
||
|
||
/* 목록형: START 내부 조건 트리 전체 표시 */
|
||
.se-list-editor .sp-tree-node {
|
||
flex-shrink: 0;
|
||
overflow: visible;
|
||
}
|
||
|
||
.se-list-editor .sp-node-label {
|
||
white-space: normal;
|
||
overflow: visible;
|
||
text-overflow: unset;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.se-list-editor .sp-node-children {
|
||
overflow: visible;
|
||
}
|
||
|
||
.se-list-editor .sp-cond-editor {
|
||
overflow: visible;
|
||
}
|
||
|
||
.se-list-editor .sp-cond-row4 {
|
||
grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
|
||
}
|
||
|
||
.sp-start-body--over {
|
||
background: color-mix(in srgb, var(--se-accent) 10%, transparent);
|
||
}
|
||
|
||
.sp-drop-empty--section {
|
||
margin: 0;
|
||
padding: 16px 8px;
|
||
font-size: 0.78rem;
|
||
}
|
||
|
||
.se-btn {
|
||
border: 1px solid var(--se-border);
|
||
background: var(--se-btn-bg);
|
||
color: var(--se-text);
|
||
border-radius: 8px;
|
||
padding: 7px 14px;
|
||
font-size: 0.82rem;
|
||
cursor: pointer;
|
||
transition: box-shadow 0.15s, border-color 0.15s;
|
||
}
|
||
.se-btn:hover { border-color: color-mix(in srgb, var(--se-accent) 50%, transparent); }
|
||
.se-btn--ghost { background: transparent; }
|
||
.se-btn--icon {
|
||
min-width: 34px;
|
||
padding: 7px 10px;
|
||
font-size: 0.9rem;
|
||
line-height: 1;
|
||
}
|
||
.se-btn--icon:disabled {
|
||
opacity: 0.35;
|
||
cursor: not-allowed;
|
||
}
|
||
.se-btn--gold {
|
||
background: var(--se-btn-gold-bg);
|
||
border-color: var(--se-btn-gold-border);
|
||
color: var(--se-btn-gold-text);
|
||
font-weight: 700;
|
||
box-shadow: 0 0 16px color-mix(in srgb, var(--se-gold) 15%, transparent);
|
||
}
|
||
.se-btn--gold:hover { box-shadow: 0 0 24px color-mix(in srgb, var(--se-gold) 30%, transparent); }
|
||
.se-btn--danger { border-color: color-mix(in srgb, var(--se-danger) 50%, transparent); color: var(--se-danger); }
|
||
|
||
.se-body {
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
min-width: 0;
|
||
align-items: stretch;
|
||
padding-bottom: 10px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.se-main {
|
||
flex: 1;
|
||
min-width: 0;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 10px 10px 0 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.se-main-row {
|
||
flex: 1;
|
||
min-height: 0;
|
||
min-width: 0;
|
||
display: flex;
|
||
gap: 10px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.se-splitter {
|
||
flex-shrink: 0;
|
||
background: var(--se-splitter-bg);
|
||
transition: background 0.12s, box-shadow 0.12s;
|
||
touch-action: none;
|
||
z-index: 6;
|
||
}
|
||
.se-splitter:hover,
|
||
.se-splitter.se-splitter--active {
|
||
background: var(--se-splitter-active);
|
||
box-shadow: 0 0 10px color-mix(in srgb, var(--se-accent) 20%, transparent);
|
||
}
|
||
.se-splitter--v {
|
||
width: 5px;
|
||
cursor: col-resize;
|
||
}
|
||
.se-splitter--h {
|
||
height: 5px;
|
||
margin: 0 8px;
|
||
border-radius: 3px;
|
||
cursor: row-resize;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ── Left: strategy list card ── */
|
||
.se-left {
|
||
flex-shrink: 0;
|
||
border-right: none;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
align-self: stretch;
|
||
background: var(--se-panel-shell-bg);
|
||
padding: 10px 10px 0;
|
||
}
|
||
|
||
.se-strat-panel {
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 14px 12px 12px;
|
||
border-radius: 14px;
|
||
background: var(--se-panel-card-bg);
|
||
border: 1px solid var(--se-panel-card-border);
|
||
box-shadow: var(--se-panel-card-shadow), inset 0 1px 0 color-mix(in srgb, var(--se-text) 4%, transparent);
|
||
}
|
||
|
||
.se-strat-panel-head {
|
||
margin-bottom: 12px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid var(--se-border);
|
||
}
|
||
|
||
.se-panel-title {
|
||
margin: 0;
|
||
font-size: 0.88rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.02em;
|
||
color: var(--se-text);
|
||
}
|
||
|
||
.se-new-strat-btn {
|
||
flex-shrink: 0;
|
||
width: 100%;
|
||
margin: 0 0 12px;
|
||
padding: 11px 12px;
|
||
border-radius: 10px;
|
||
border: 1px solid var(--se-border);
|
||
background: var(--se-btn-bg);
|
||
color: var(--se-text-muted);
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: background 0.15s, border-color 0.15s, color 0.15s;
|
||
}
|
||
.se-new-strat-btn:hover {
|
||
background: var(--se-item-hover-bg);
|
||
border-color: color-mix(in srgb, var(--se-accent) 28%, transparent);
|
||
color: var(--se-accent);
|
||
}
|
||
|
||
.se-strat-list {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
padding: 2px 1px 4px;
|
||
}
|
||
|
||
.se-strat-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 12px 13px;
|
||
cursor: pointer;
|
||
border-radius: 12px;
|
||
border: 1px solid var(--se-strat-item-border);
|
||
background: var(--se-strat-item-bg);
|
||
box-shadow: var(--se-strat-item-shadow);
|
||
transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.12s;
|
||
outline: none;
|
||
}
|
||
.se-strat-item:hover {
|
||
background: var(--se-item-hover-bg);
|
||
border-color: color-mix(in srgb, var(--se-accent) 28%, transparent);
|
||
box-shadow: var(--se-strat-item-hover-shadow);
|
||
transform: translateY(-1px);
|
||
}
|
||
.se-strat-item--sel {
|
||
background: var(--se-item-selected-bg);
|
||
border-color: var(--se-item-selected-border);
|
||
box-shadow:
|
||
var(--se-strat-item-hover-shadow),
|
||
0 0 0 1px color-mix(in srgb, var(--se-item-selected-border) 45%, transparent),
|
||
inset 0 1px 0 color-mix(in srgb, var(--se-text) 6%, transparent);
|
||
transform: translateY(-1px);
|
||
}
|
||
.se-strat-item--sel:hover {
|
||
background: var(--se-item-selected-bg);
|
||
box-shadow:
|
||
var(--se-strat-item-hover-shadow),
|
||
0 0 0 1px color-mix(in srgb, var(--se-item-selected-border) 45%, transparent),
|
||
inset 0 1px 0 color-mix(in srgb, var(--se-text) 6%, transparent);
|
||
}
|
||
.se-strat-item:focus-visible {
|
||
outline: 2px solid color-mix(in srgb, var(--se-accent) 55%, transparent);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.se-strat-name {
|
||
flex: 1;
|
||
min-width: 0;
|
||
font-size: 0.92rem;
|
||
font-weight: 700;
|
||
color: var(--se-text);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.se-strat-item--sel .se-strat-name {
|
||
color: var(--se-item-selected-text);
|
||
}
|
||
|
||
.se-strat-item-actions {
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.se-strat-del {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 32px;
|
||
height: 32px;
|
||
padding: 0;
|
||
border: none;
|
||
border-radius: 7px;
|
||
background: transparent;
|
||
color: var(--se-text-dim);
|
||
cursor: pointer;
|
||
transition: color 0.12s, background 0.12s;
|
||
}
|
||
.se-strat-item--sel .se-strat-del {
|
||
color: color-mix(in srgb, var(--se-item-selected-text) 85%, transparent);
|
||
}
|
||
.se-strat-del:hover {
|
||
color: var(--se-danger);
|
||
background: color-mix(in srgb, var(--se-danger) 15%, transparent);
|
||
}
|
||
|
||
.se-strat-status {
|
||
flex-shrink: 0;
|
||
min-width: 36px;
|
||
text-align: center;
|
||
font-size: 0.65rem;
|
||
font-weight: 700;
|
||
padding: 3px 7px;
|
||
border-radius: 999px;
|
||
color: var(--se-text-muted);
|
||
background: color-mix(in srgb, var(--se-text-muted) 10%, transparent);
|
||
border: 1px solid var(--se-border);
|
||
}
|
||
.se-strat-status--on {
|
||
color: var(--se-status-on);
|
||
background: color-mix(in srgb, var(--se-status-on) 10%, transparent);
|
||
border-color: color-mix(in srgb, var(--se-status-on) 28%, transparent);
|
||
}
|
||
.se-strat-item--sel .se-strat-status--on {
|
||
color: var(--se-item-selected-text);
|
||
background: color-mix(in srgb, var(--se-gold) 15%, transparent);
|
||
border-color: color-mix(in srgb, var(--se-gold) 35%, transparent);
|
||
}
|
||
|
||
.se-empty {
|
||
font-size: 0.78rem;
|
||
color: var(--se-text-dim);
|
||
text-align: center;
|
||
padding: 20px 8px;
|
||
}
|
||
|
||
/* ── Center ── */
|
||
.se-center {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
align-self: stretch;
|
||
background: transparent;
|
||
}
|
||
|
||
.se-center-panel {
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
border-radius: 14px;
|
||
background: var(--se-panel-card-bg);
|
||
border: 1px solid var(--se-panel-card-border);
|
||
box-shadow: var(--se-panel-card-shadow), inset 0 1px 0 color-mix(in srgb, var(--se-text) 4%, transparent);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.se-center-work {
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.se-center-work--list .se-list-editor {
|
||
flex: 1;
|
||
min-height: 0;
|
||
}
|
||
|
||
.se-center-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
padding: 8px 12px 0;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.se-center-head-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
margin-left: auto;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.se-btn--sm {
|
||
padding: 6px 12px;
|
||
font-size: 0.74rem;
|
||
}
|
||
|
||
.se-start-combine {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.se-center-head .se-start-combine {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.se-start-combine-label {
|
||
font-size: 0.72rem;
|
||
font-weight: 600;
|
||
color: var(--se-text-muted);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.se-start-combine-toggle {
|
||
display: inline-flex;
|
||
border: 1px solid var(--se-border);
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
background: var(--se-btn-bg);
|
||
}
|
||
|
||
.se-start-combine-btn {
|
||
border: none;
|
||
background: transparent;
|
||
color: var(--se-text-muted);
|
||
font-size: 0.72rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.03em;
|
||
padding: 5px 12px;
|
||
cursor: pointer;
|
||
transition: background 0.15s, color 0.15s;
|
||
}
|
||
|
||
.se-start-combine-btn--and.se-start-combine-btn--on {
|
||
background: color-mix(in srgb, #4caf50 22%, transparent);
|
||
color: #4caf50;
|
||
}
|
||
|
||
.se-start-combine-btn--or.se-start-combine-btn--on {
|
||
background: color-mix(in srgb, #2196f3 22%, transparent);
|
||
color: #2196f3;
|
||
}
|
||
|
||
.se-start-combine-btn:hover:not(.se-start-combine-btn--on) {
|
||
background: color-mix(in srgb, var(--se-accent) 10%, transparent);
|
||
color: var(--se-text);
|
||
}
|
||
|
||
.se-signal-tabs { display: flex; gap: 6px; }
|
||
|
||
.se-signal-tab {
|
||
border: 1px solid var(--se-border);
|
||
background: var(--se-btn-bg);
|
||
color: var(--se-text-muted);
|
||
border-radius: 8px 8px 0 0;
|
||
padding: 7px 16px;
|
||
font-size: 0.76rem;
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
}
|
||
.se-signal-tab--buy-on {
|
||
color: var(--se-buy);
|
||
border-color: color-mix(in srgb, var(--se-buy) 50%, transparent);
|
||
background: color-mix(in srgb, var(--se-buy) 10%, transparent);
|
||
box-shadow: 0 0 16px color-mix(in srgb, var(--se-buy) 15%, transparent);
|
||
}
|
||
.se-signal-tab--sell-on {
|
||
color: var(--se-sell);
|
||
border-color: color-mix(in srgb, var(--se-sell) 50%, transparent);
|
||
background: color-mix(in srgb, var(--se-sell) 10%, transparent);
|
||
box-shadow: 0 0 16px color-mix(in srgb, var(--se-sell) 15%, transparent);
|
||
}
|
||
|
||
.se-editing-name {
|
||
font-size: 0.72rem;
|
||
color: color-mix(in srgb, var(--se-gold) 85%, transparent);
|
||
padding: 4px 10px;
|
||
border: 1px solid color-mix(in srgb, var(--se-gold) 25%, transparent);
|
||
border-radius: 999px;
|
||
}
|
||
|
||
.se-canvas-wrap {
|
||
flex: 1;
|
||
min-height: 0;
|
||
margin: 0 10px;
|
||
border: 1px solid var(--se-canvas-border);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
box-shadow: var(--se-canvas-inset);
|
||
}
|
||
.se-canvas-wrap--sell {
|
||
border-color: var(--se-canvas-sell-border);
|
||
box-shadow: var(--se-canvas-sell-inset);
|
||
}
|
||
|
||
.se-canvas-wrap .react-flow { background: transparent; }
|
||
|
||
.se-canvas-wrap .react-flow__selection {
|
||
background: var(--se-selection-bg);
|
||
border: 1px dashed var(--se-selection-border);
|
||
border-radius: 4px;
|
||
}
|
||
.se-flow-bg { opacity: 0.4; }
|
||
|
||
.se-canvas-toolbar {
|
||
background: var(--se-toolbar-bg);
|
||
border: 1px solid var(--se-border);
|
||
border-radius: 8px;
|
||
padding: 5px 12px;
|
||
display: flex;
|
||
gap: 10px;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
.se-canvas-toolbar-title { font-size: 0.72rem; font-weight: 700; color: var(--se-toolbar-title); }
|
||
.se-canvas-toolbar-hint { font-size: 0.65rem; color: var(--se-text-muted); }
|
||
|
||
.se-canvas-interaction {
|
||
display: inline-flex;
|
||
border: 1px solid var(--se-border);
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
flex-shrink: 0;
|
||
}
|
||
.se-canvas-interaction-btn {
|
||
border: none;
|
||
background: transparent;
|
||
color: var(--se-text-muted);
|
||
font-size: 0.65rem;
|
||
font-weight: 700;
|
||
padding: 4px 10px;
|
||
cursor: pointer;
|
||
transition: background 0.12s, color 0.12s;
|
||
}
|
||
.se-canvas-interaction-btn:hover {
|
||
background: color-mix(in srgb, var(--se-accent) 10%, transparent);
|
||
color: var(--se-text);
|
||
}
|
||
.se-canvas-interaction-btn--on {
|
||
background: color-mix(in srgb, var(--se-accent) 18%, transparent);
|
||
color: var(--se-tab-active);
|
||
box-shadow: inset 0 -2px 0 var(--se-tab-active);
|
||
}
|
||
|
||
.se-canvas-auto-layout {
|
||
margin: 8px 10px 0 0;
|
||
}
|
||
|
||
.se-canvas-auto-layout-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 34px;
|
||
height: 34px;
|
||
border: 1px solid var(--se-border);
|
||
border-radius: 8px;
|
||
background: var(--se-toolbar-bg);
|
||
color: var(--se-text-muted);
|
||
cursor: pointer;
|
||
transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
|
||
box-shadow: 0 2px 8px color-mix(in srgb, var(--se-bg) 40%, transparent);
|
||
}
|
||
|
||
.se-canvas-auto-layout-btn:hover {
|
||
background: color-mix(in srgb, var(--se-accent) 12%, var(--se-toolbar-bg));
|
||
color: var(--se-tab-active);
|
||
border-color: color-mix(in srgb, var(--se-accent) 35%, var(--se-border));
|
||
}
|
||
|
||
.se-canvas-auto-layout-btn:active {
|
||
transform: scale(0.96);
|
||
}
|
||
|
||
.se-canvas-wrap--pan .react-flow__pane {
|
||
cursor: grab;
|
||
}
|
||
.se-canvas-wrap--pan .react-flow__pane:active {
|
||
cursor: grabbing;
|
||
}
|
||
.se-canvas-wrap--select .react-flow__pane {
|
||
cursor: default;
|
||
}
|
||
|
||
.se-canvas-empty {
|
||
background: var(--se-toolbar-bg);
|
||
border: 1px dashed var(--se-border);
|
||
border-radius: 10px;
|
||
padding: 8px 16px;
|
||
font-size: 0.76rem;
|
||
color: var(--se-text-muted);
|
||
}
|
||
|
||
/* ── React Flow controls & minimap (editor theme) ── */
|
||
.se-flow-controls,
|
||
.se-flow-minimap {
|
||
background: var(--se-control-bg) !important;
|
||
border: 1px solid var(--se-control-border) !important;
|
||
border-radius: 10px !important;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 0 16px color-mix(in srgb, var(--se-accent) 6%, transparent) !important;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.se-canvas-wrap .se-flow-controls .react-flow__controls-button {
|
||
width: 28px !important;
|
||
height: 28px !important;
|
||
background: var(--se-control-bg) !important;
|
||
border: none !important;
|
||
border-bottom: 1px solid color-mix(in srgb, var(--se-accent) 12%, transparent) !important;
|
||
color: var(--se-control-icon) !important;
|
||
fill: var(--se-control-icon) !important;
|
||
transition: background 0.12s, color 0.12s;
|
||
}
|
||
.se-canvas-wrap .se-flow-controls .react-flow__controls-button:last-child {
|
||
border-bottom: none !important;
|
||
}
|
||
.se-canvas-wrap .se-flow-controls .react-flow__controls-button:hover {
|
||
background: var(--se-control-hover) !important;
|
||
color: var(--se-accent) !important;
|
||
fill: var(--se-accent) !important;
|
||
}
|
||
.se-canvas-wrap .se-flow-controls .react-flow__controls-button svg {
|
||
fill: currentColor !important;
|
||
max-width: 14px;
|
||
max-height: 14px;
|
||
}
|
||
|
||
.se-canvas-wrap--sell .se-flow-controls .react-flow__controls-button {
|
||
color: color-mix(in srgb, var(--se-sell) 88%, transparent) !important;
|
||
fill: color-mix(in srgb, var(--se-sell) 88%, transparent) !important;
|
||
border-bottom-color: color-mix(in srgb, var(--se-sell) 12%, transparent) !important;
|
||
}
|
||
.se-canvas-wrap--sell .se-flow-controls .react-flow__controls-button:hover {
|
||
background: color-mix(in srgb, var(--se-sell) 14%, transparent) !important;
|
||
color: var(--se-sell) !important;
|
||
fill: var(--se-sell) !important;
|
||
}
|
||
|
||
.se-canvas-wrap--sell .se-flow-minimap {
|
||
border-color: color-mix(in srgb, var(--se-sell) 22%, transparent) !important;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 0 16px color-mix(in srgb, var(--se-sell) 6%, transparent) !important;
|
||
}
|
||
|
||
.se-flow-edge {
|
||
stroke: var(--se-edge);
|
||
filter: drop-shadow(0 0 4px color-mix(in srgb, var(--se-accent) 50%, transparent));
|
||
}
|
||
.se-flow-edge--selected {
|
||
stroke: var(--se-accent);
|
||
filter: drop-shadow(0 0 8px color-mix(in srgb, var(--se-accent) 85%, transparent));
|
||
}
|
||
.se-canvas-wrap--sell .se-flow-edge {
|
||
stroke: color-mix(in srgb, var(--se-sell) 65%, transparent);
|
||
filter: drop-shadow(0 0 4px color-mix(in srgb, var(--se-sell) 40%, transparent));
|
||
}
|
||
.se-canvas-wrap--sell .se-flow-edge--selected {
|
||
stroke: var(--se-sell);
|
||
filter: drop-shadow(0 0 8px color-mix(in srgb, var(--se-sell) 75%, transparent));
|
||
}
|
||
|
||
.se-flow-edge-del {
|
||
z-index: 10;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 22px;
|
||
height: 22px;
|
||
padding: 0;
|
||
border: 1px solid rgba(248, 113, 113, 0.6);
|
||
border-radius: 50%;
|
||
background: rgba(15, 23, 42, 0.95);
|
||
color: #f87171;
|
||
font-size: 16px;
|
||
line-height: 1;
|
||
cursor: pointer;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
|
||
transition: background 0.15s, transform 0.15s;
|
||
}
|
||
.se-flow-edge-del:hover {
|
||
background: rgba(248, 113, 113, 0.25);
|
||
scale: 1.1;
|
||
}
|
||
|
||
.se-flow-edge-hit {
|
||
pointer-events: stroke;
|
||
}
|
||
.se-flow-edge-hit--source { cursor: grab; }
|
||
.se-flow-edge-hit--middle { cursor: move; }
|
||
.se-flow-edge-hit--target { cursor: grab; }
|
||
|
||
.se-selection-delete {
|
||
z-index: 12;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 24px;
|
||
height: 24px;
|
||
padding: 0;
|
||
border: 1px solid rgba(248, 113, 113, 0.65);
|
||
border-radius: 50%;
|
||
background: rgba(15, 23, 42, 0.96);
|
||
color: #f87171;
|
||
font-size: 17px;
|
||
line-height: 1;
|
||
cursor: pointer;
|
||
pointer-events: all;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55), 0 0 12px rgba(248, 113, 113, 0.35);
|
||
transition: background 0.15s, scale 0.15s;
|
||
}
|
||
.se-selection-delete:hover {
|
||
background: rgba(248, 113, 113, 0.28);
|
||
scale: 1.08;
|
||
}
|
||
|
||
/* ── Flow nodes ── */
|
||
.se-flow-node {
|
||
position: relative;
|
||
min-width: 130px;
|
||
border-radius: 10px;
|
||
font-size: 0.75rem;
|
||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
|
||
.se-flow-node--start {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: 6px;
|
||
padding: 8px 10px;
|
||
min-width: 150px;
|
||
background: var(--se-node-start-bg);
|
||
border: 1px solid var(--se-node-start-border);
|
||
color: var(--se-text-muted);
|
||
box-shadow: 0 0 18px color-mix(in srgb, var(--se-node-start-accent, var(--se-gold)) 20%, transparent);
|
||
}
|
||
.se-flow-node--start.se-flow-node--sell-mode {
|
||
background: linear-gradient(145deg, color-mix(in srgb, var(--se-sell) 18%, transparent), color-mix(in srgb, var(--bg) 92%, transparent));
|
||
border-color: color-mix(in srgb, var(--se-sell) 42%, transparent);
|
||
box-shadow: 0 0 18px color-mix(in srgb, var(--se-sell) 16%, transparent);
|
||
}
|
||
.se-flow-start-label {
|
||
font-weight: 700;
|
||
font-size: 0.72rem;
|
||
letter-spacing: 0.04em;
|
||
flex-shrink: 0;
|
||
color: var(--se-node-start-accent, var(--se-gold));
|
||
}
|
||
.se-flow-del--start {
|
||
position: static;
|
||
flex-shrink: 0;
|
||
width: 18px;
|
||
height: 18px;
|
||
line-height: 16px;
|
||
font-size: 14px;
|
||
}
|
||
.se-flow-start-dot {
|
||
width: 8px; height: 8px; border-radius: 50%;
|
||
background: var(--se-node-start-accent, var(--se-gold));
|
||
box-shadow: 0 0 8px color-mix(in srgb, var(--se-node-start-accent, var(--se-gold)) 55%, transparent);
|
||
}
|
||
|
||
.se-flow-node--logic {
|
||
background: var(--se-node-logic-bg);
|
||
border: 1px solid var(--se-gate-color, var(--se-accent));
|
||
padding: 12px 16px;
|
||
min-width: 110px;
|
||
box-shadow: 0 0 20px color-mix(in srgb, var(--se-accent) 20%, transparent);
|
||
}
|
||
.se-flow-node--logic.se-flow-node--sell-mode {
|
||
background: linear-gradient(145deg, color-mix(in srgb, var(--se-sell) 18%, transparent), color-mix(in srgb, var(--se-bg) 92%, transparent));
|
||
box-shadow: 0 0 20px color-mix(in srgb, var(--se-sell) 15%, transparent);
|
||
}
|
||
|
||
.se-flow-gate-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.se-logic-gate-toggle {
|
||
display: inline-flex;
|
||
}
|
||
.se-logic-gate-toggle--compact .se-start-combine-btn {
|
||
padding: 3px 9px;
|
||
font-size: 0.68rem;
|
||
min-width: 0;
|
||
}
|
||
.se-flow-gate-badge {
|
||
font-weight: 800;
|
||
font-size: 0.88rem;
|
||
color: var(--se-accent);
|
||
letter-spacing: 0.06em;
|
||
}
|
||
.se-flow-gate-hint { font-size: 0.62rem; color: var(--se-text-dim); display: block; margin-top: 4px; }
|
||
|
||
.se-flow-node--cond {
|
||
padding: 10px 14px;
|
||
border: 1px solid var(--se-node-cond-border);
|
||
background: var(--se-node-cond-bg);
|
||
min-width: 170px;
|
||
box-shadow: 0 0 16px color-mix(in srgb, var(--se-success) 12%, transparent);
|
||
}
|
||
.se-flow-node--cross {
|
||
border-color: color-mix(in srgb, var(--se-gold) 50%, transparent);
|
||
background: linear-gradient(145deg, color-mix(in srgb, var(--se-gold) 14%, transparent), color-mix(in srgb, var(--se-bg) 92%, transparent));
|
||
box-shadow: 0 0 16px color-mix(in srgb, var(--se-gold) 12%, transparent);
|
||
}
|
||
.se-flow-node--cond.se-flow-node--sell-mode {
|
||
border-color: color-mix(in srgb, var(--se-sell) 45%, transparent);
|
||
box-shadow: 0 0 16px color-mix(in srgb, var(--se-sell) 12%, transparent);
|
||
}
|
||
|
||
.se-flow-cond-badge { font-size: 0.65rem; font-weight: 800; color: var(--se-success); margin-bottom: 0; }
|
||
.se-flow-cond-top {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 6px;
|
||
margin-bottom: 4px;
|
||
}
|
||
.se-flow-cond-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 2px;
|
||
flex-shrink: 0;
|
||
}
|
||
.se-flow-node--cond { position: relative; }
|
||
.se-flow-node--cross .se-flow-cond-badge { color: var(--se-gold); }
|
||
.se-flow-node--sell-mode .se-flow-cond-badge { color: var(--se-sell); }
|
||
.se-flow-cond-text { font-size: 0.7rem; line-height: 1.35; color: var(--se-node-text); word-break: break-word; }
|
||
|
||
.se-flow-node--selected {
|
||
outline: 2px solid color-mix(in srgb, var(--se-gold) 70%, transparent);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.se-flow-node--orphan {
|
||
border-style: dashed !important;
|
||
opacity: 0.88;
|
||
box-shadow: 0 0 12px rgba(148, 163, 184, 0.2) !important;
|
||
}
|
||
.se-flow-node--orphan .se-flow-cond-badge,
|
||
.se-flow-node--orphan .se-flow-gate-badge {
|
||
opacity: 0.75;
|
||
}
|
||
.se-flow-node--drop {
|
||
box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.55), 0 0 28px rgba(0, 212, 255, 0.25);
|
||
}
|
||
|
||
.se-flow-del {
|
||
position: static;
|
||
border: none; background: rgba(0, 0, 0, 0.4);
|
||
color: rgba(255, 77, 109, 0.9);
|
||
width: 18px; height: 18px; border-radius: 4px;
|
||
cursor: pointer; font-size: 0.85rem; line-height: 1;
|
||
opacity: 0;
|
||
transition: opacity 0.12s;
|
||
flex-shrink: 0;
|
||
}
|
||
.se-flow-settings {
|
||
border: none;
|
||
background: rgba(0, 0, 0, 0.35);
|
||
color: var(--se-gold);
|
||
width: 18px; height: 18px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0;
|
||
opacity: 0;
|
||
transition: opacity 0.12s, background 0.12s;
|
||
flex-shrink: 0;
|
||
}
|
||
.se-flow-preset {
|
||
border: none;
|
||
background: rgba(167, 139, 250, 0.2);
|
||
color: #a78bfa;
|
||
width: 18px; height: 18px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0;
|
||
opacity: 0;
|
||
transition: opacity 0.12s, background 0.12s;
|
||
flex-shrink: 0;
|
||
}
|
||
.se-flow-preset:hover {
|
||
background: rgba(167, 139, 250, 0.35);
|
||
}
|
||
.se-flow-settings:hover {
|
||
background: rgba(230, 194, 0, 0.2);
|
||
}
|
||
.se-flow-node:hover .se-flow-del,
|
||
.se-flow-node:hover .se-flow-settings,
|
||
.se-flow-node:hover .se-flow-preset,
|
||
.se-flow-node--selected .se-flow-del,
|
||
.se-flow-node--selected .se-flow-settings,
|
||
.se-flow-node--selected .se-flow-preset,
|
||
.se-flow-node--settings-open .se-flow-del,
|
||
.se-flow-node--settings-open .se-flow-settings,
|
||
.se-flow-node--settings-open .se-flow-preset,
|
||
.se-flow-node--preset-open .se-flow-del,
|
||
.se-flow-node--preset-open .se-flow-settings,
|
||
.se-flow-node--preset-open .se-flow-preset {
|
||
opacity: 1;
|
||
}
|
||
|
||
.se-flow-preset-pop {
|
||
position: absolute;
|
||
top: 6px;
|
||
right: 6px;
|
||
z-index: 40;
|
||
width: min(320px, calc(100vw - 24px));
|
||
max-height: min(420px, 60vh);
|
||
overflow: auto;
|
||
padding: 8px 10px;
|
||
border-radius: 8px;
|
||
border: 1px solid color-mix(in srgb, #a78bfa 45%, transparent);
|
||
background: var(--se-bg-elevated);
|
||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
|
||
}
|
||
|
||
.se-flow-settings-pop {
|
||
position: absolute;
|
||
top: 6px;
|
||
right: 6px;
|
||
z-index: 30;
|
||
min-width: 148px;
|
||
padding: 8px 10px;
|
||
border-radius: 8px;
|
||
border: 1px solid color-mix(in srgb, var(--se-gold) 45%, transparent);
|
||
background: var(--se-bg-elevated);
|
||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
|
||
}
|
||
.se-flow-settings-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 6px;
|
||
font-size: 0.62rem;
|
||
font-weight: 700;
|
||
color: var(--se-gold);
|
||
margin-bottom: 6px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
}
|
||
.se-flow-settings-close {
|
||
border: none;
|
||
background: transparent;
|
||
color: var(--se-text-muted);
|
||
cursor: pointer;
|
||
font-size: 1rem;
|
||
line-height: 1;
|
||
padding: 0 2px;
|
||
flex-shrink: 0;
|
||
}
|
||
.se-flow-settings-close:hover {
|
||
color: var(--se-gold);
|
||
}
|
||
.se-flow-settings-field {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 3px;
|
||
margin-bottom: 6px;
|
||
font-size: 0.62rem;
|
||
color: var(--se-text-muted);
|
||
}
|
||
.se-flow-settings-field input,
|
||
.se-flow-settings-field .se-combo-num-input {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 4px 6px;
|
||
border-radius: 4px;
|
||
border: 1px solid var(--se-input-border);
|
||
background: var(--se-input-bg);
|
||
color: var(--se-text);
|
||
font-size: 0.72rem;
|
||
}
|
||
.se-combo-num { width: 100%; display: flex; flex-direction: column; gap: 6px; }
|
||
.se-combo-num--always-input .se-combo-num-input { order: -1; }
|
||
.se-combo-num-select { width: 100%; }
|
||
|
||
.se-combo-field {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
.se-combo-field--custom-only {
|
||
gap: 6px;
|
||
}
|
||
.se-combo-field-select { width: 100%; }
|
||
.se-combo-field-custom-input {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 4px 6px;
|
||
border-radius: 4px;
|
||
border: 1px solid var(--se-input-border);
|
||
background: var(--se-input-bg);
|
||
color: var(--se-text);
|
||
font-size: 0.72rem;
|
||
}
|
||
.se-combo-field-custom-input:focus {
|
||
outline: none;
|
||
border-color: var(--se-input-focus);
|
||
}
|
||
.sp-cond-field .se-combo-field { margin-top: 0; }
|
||
.se-combo-num-input:focus {
|
||
outline: none;
|
||
border-color: var(--se-input-focus);
|
||
}
|
||
.se-flow-settings-hint {
|
||
margin: 4px 0 0;
|
||
font-size: 0.58rem;
|
||
color: var(--se-text-dim);
|
||
}
|
||
.se-flow-settings-hint--muted {
|
||
opacity: 0.85;
|
||
}
|
||
.se-field-readout {
|
||
display: block;
|
||
padding: 8px 10px;
|
||
border-radius: 8px;
|
||
background: color-mix(in srgb, var(--se-text) 4%, transparent);
|
||
color: var(--se-text-muted);
|
||
font-size: 0.82rem;
|
||
}
|
||
.se-flow-gate-stoch-pair {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 6px;
|
||
margin-top: 6px;
|
||
padding-top: 6px;
|
||
border-top: 1px solid color-mix(in srgb, var(--se-border) 70%, transparent);
|
||
}
|
||
.se-flow-gate-stoch-pair-title {
|
||
font-size: 0.62rem;
|
||
font-weight: 700;
|
||
color: var(--se-palette-composite-accent, #a78bfa);
|
||
line-height: 1.3;
|
||
text-align: left;
|
||
}
|
||
.se-flow-node--stoch-pair {
|
||
min-height: 88px;
|
||
}
|
||
|
||
.se-flow-handle {
|
||
width: 9px !important; height: 9px !important;
|
||
background: var(--se-handle) !important;
|
||
border: 2px solid color-mix(in srgb, var(--se-bg) 80%, var(--se-accent)) !important;
|
||
box-shadow: 0 0 8px color-mix(in srgb, var(--se-accent) 60%, transparent);
|
||
opacity: 0.35;
|
||
transition: opacity 0.12s, transform 0.12s;
|
||
}
|
||
.se-flow-node:hover .se-flow-handle,
|
||
.se-flow-node.se-flow-node--selected .se-flow-handle,
|
||
.se-flow-node.se-flow-node--drop .se-flow-handle {
|
||
opacity: 1;
|
||
}
|
||
.se-flow-handle:hover {
|
||
opacity: 1 !important;
|
||
transform: scale(1.25);
|
||
}
|
||
.se-flow-handle--active {
|
||
opacity: 1 !important;
|
||
transform: scale(1.45);
|
||
background: var(--se-gold) !important;
|
||
border-color: color-mix(in srgb, var(--se-gold) 40%, var(--se-bg)) !important;
|
||
box-shadow: 0 0 14px color-mix(in srgb, var(--se-gold) 95%, transparent);
|
||
z-index: 2;
|
||
}
|
||
.se-flow-handle--valid-hover {
|
||
opacity: 1 !important;
|
||
transform: scale(1.35);
|
||
background: #34d399 !important;
|
||
border-color: #065f46 !important;
|
||
box-shadow: 0 0 12px rgba(52, 211, 153, 0.85);
|
||
z-index: 2;
|
||
}
|
||
.se-flow-handle--invalid {
|
||
opacity: 1 !important;
|
||
width: 16px !important;
|
||
height: 16px !important;
|
||
transform: scale(1.35);
|
||
background: rgba(15, 23, 42, 0.95) !important;
|
||
border-color: #f87171 !important;
|
||
box-shadow: 0 0 14px rgba(248, 113, 113, 0.85);
|
||
z-index: 3;
|
||
}
|
||
.se-flow-handle--invalid::after {
|
||
content: '×';
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 13px;
|
||
font-weight: 800;
|
||
line-height: 1;
|
||
color: #f87171;
|
||
pointer-events: none;
|
||
}
|
||
.se-flow-handle--disabled {
|
||
opacity: 0.08 !important;
|
||
pointer-events: none !important;
|
||
box-shadow: none !important;
|
||
}
|
||
.se-flow-handle--out { opacity: 0.35; }
|
||
|
||
/* ── Node config bar ── */
|
||
.se-node-config-bar {
|
||
flex-shrink: 0;
|
||
margin: 6px 10px 0;
|
||
padding: 10px 12px;
|
||
border-radius: 10px;
|
||
border: 1px solid color-mix(in srgb, var(--se-accent) 25%, transparent);
|
||
background: var(--se-toolbar-bg);
|
||
box-shadow: 0 0 24px color-mix(in srgb, var(--se-accent) 8%, transparent);
|
||
}
|
||
.se-node-config-label {
|
||
display: inline-block;
|
||
font-size: 0.68rem;
|
||
font-weight: 800;
|
||
color: var(--se-accent);
|
||
padding: 2px 8px;
|
||
border: 1px solid color-mix(in srgb, var(--se-accent) 35%, transparent);
|
||
border-radius: 999px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.se-sync-tip {
|
||
display: block;
|
||
margin-top: 6px;
|
||
font-size: 0.65rem;
|
||
color: color-mix(in srgb, var(--se-success) 75%, transparent);
|
||
}
|
||
.se-node-config-bar .sp-cond-editor { margin: 0; }
|
||
|
||
.sp-cond-readout {
|
||
display: block;
|
||
width: 100%;
|
||
padding: 6px 8px;
|
||
border-radius: 6px;
|
||
border: 1px solid var(--se-input-border);
|
||
background: color-mix(in srgb, var(--se-text) 4%, transparent);
|
||
color: var(--se-text-muted);
|
||
font-size: 0.72rem;
|
||
}
|
||
|
||
.se-node-config-bar--stoch-pair {
|
||
flex-wrap: wrap;
|
||
align-items: flex-start;
|
||
gap: 8px 12px;
|
||
}
|
||
.se-stoch-pair-inline-settings {
|
||
display: flex;
|
||
flex: 1;
|
||
flex-wrap: wrap;
|
||
gap: 8px 12px;
|
||
align-items: flex-end;
|
||
min-width: 0;
|
||
}
|
||
.se-stoch-pair-inline-settings .se-flow-settings-field {
|
||
min-width: 140px;
|
||
margin: 0;
|
||
}
|
||
.se-stoch-pair-inline-settings .se-flow-settings-hint {
|
||
flex: 1 1 100%;
|
||
margin: 0;
|
||
}
|
||
|
||
.sp-cond-row-composite-tf {
|
||
background: var(--se-input-bg);
|
||
border-color: var(--se-input-border);
|
||
color: var(--se-text);
|
||
font-size: 0.72rem;
|
||
}
|
||
|
||
/* ── Terminal ── */
|
||
.se-terminal {
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin: 0;
|
||
border: none;
|
||
border-top: 1px solid var(--se-terminal-border);
|
||
border-radius: 0;
|
||
background: var(--se-terminal-bg);
|
||
overflow: hidden;
|
||
min-height: 88px;
|
||
}
|
||
.se-terminal-label {
|
||
flex-shrink: 0;
|
||
font-size: 0.62rem;
|
||
font-weight: 800;
|
||
letter-spacing: 0.14em;
|
||
color: var(--se-terminal-label);
|
||
padding: 6px 12px;
|
||
border-bottom: 1px solid var(--se-border);
|
||
}
|
||
.se-terminal-text {
|
||
flex: 1;
|
||
min-height: 0;
|
||
margin: 0;
|
||
padding: 10px 14px;
|
||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||
font-size: 0.78rem;
|
||
line-height: 1.55;
|
||
color: var(--se-terminal-code);
|
||
white-space: pre-wrap;
|
||
overflow-y: auto;
|
||
}
|
||
.se-terminal-text--rich {
|
||
display: block;
|
||
}
|
||
.se-formula-line + .se-formula-line {
|
||
margin-top: 0.35em;
|
||
}
|
||
.se-formula-punc {
|
||
color: var(--se-text-dim);
|
||
}
|
||
.se-formula-detail {
|
||
color: var(--se-text-muted);
|
||
}
|
||
.se-formula-empty,
|
||
.se-formula-comment {
|
||
color: var(--se-text-dim);
|
||
font-style: italic;
|
||
}
|
||
.se-formula-signal--buy {
|
||
color: var(--se-buy);
|
||
font-weight: 700;
|
||
}
|
||
.se-formula-signal--sell {
|
||
color: var(--se-sell);
|
||
font-weight: 700;
|
||
}
|
||
.se-formula-tf {
|
||
color: var(--se-accent);
|
||
font-weight: 700;
|
||
font-size: 0.85em;
|
||
}
|
||
.se-formula-logic {
|
||
font-weight: 800;
|
||
letter-spacing: 0.03em;
|
||
}
|
||
.se-formula-logic--and { color: var(--se-palette-logic-and-accent); }
|
||
.se-formula-logic--or { color: var(--se-palette-logic-or-accent); }
|
||
.se-formula-logic--not { color: var(--se-palette-logic-not-accent); }
|
||
.se-formula-ind {
|
||
font-weight: 800;
|
||
}
|
||
.se-formula-ind--band { color: var(--se-palette-band-accent); }
|
||
.se-formula-ind--ind { color: var(--se-palette-ind-accent); }
|
||
|
||
/* ── Right palette ── */
|
||
.se-side-wrap {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: stretch;
|
||
align-self: stretch;
|
||
flex-shrink: 0;
|
||
min-height: 0;
|
||
height: 100%;
|
||
position: relative;
|
||
z-index: 8;
|
||
}
|
||
|
||
.se-side-wrap--right {
|
||
flex-direction: row;
|
||
min-width: 16px;
|
||
}
|
||
|
||
.se-panel-handle {
|
||
align-self: center;
|
||
flex-shrink: 0;
|
||
position: relative;
|
||
z-index: 20;
|
||
width: 16px;
|
||
height: 56px;
|
||
border: 1px solid var(--se-border);
|
||
color: var(--se-text-muted);
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: background 0.15s, color 0.15s, box-shadow 0.15s, border-color 0.15s;
|
||
padding: 0;
|
||
background: transparent;
|
||
}
|
||
|
||
.se-panel-handle--right {
|
||
margin-right: -1px;
|
||
background: var(--se-palette-bg);
|
||
border-right: none;
|
||
border-radius: 8px 0 0 8px;
|
||
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.se-panel-handle--right:hover {
|
||
color: var(--se-text);
|
||
background: color-mix(in srgb, var(--se-bg-muted) 70%, var(--se-palette-bg));
|
||
box-shadow: -3px 0 14px rgba(0, 0, 0, 0.45);
|
||
}
|
||
|
||
.se-side-wrap--right.se-side-wrap--open .se-panel-handle--right,
|
||
.se-panel-handle--right.se-panel-handle--open {
|
||
border-color: color-mix(in srgb, var(--se-accent) 35%, var(--se-border));
|
||
}
|
||
|
||
.se-right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
align-self: stretch;
|
||
background: transparent;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.se-right--collapsible {
|
||
width: 0;
|
||
flex: 0 0 0;
|
||
min-width: 0;
|
||
max-width: 0;
|
||
transition:
|
||
width 0.22s cubic-bezier(0.4, 0, 0.2, 1),
|
||
flex-basis 0.22s cubic-bezier(0.4, 0, 0.2, 1),
|
||
max-width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
.se-right--collapsible.se-right--collapsible--open,
|
||
.se-side-wrap--right.se-side-wrap--open .se-right--collapsible {
|
||
width: var(--se-right-width, 380px);
|
||
flex: 0 0 var(--se-right-width, 380px);
|
||
max-width: var(--se-right-width, 380px);
|
||
min-width: var(--se-right-width, 380px);
|
||
}
|
||
|
||
.se-side-wrap--right .se-right--collapsible .se-palette-panel {
|
||
flex: 1;
|
||
min-height: 0;
|
||
width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
.se-side-wrap--right.se-side-wrap--open .se-right-tabs,
|
||
.se-side-wrap--right.se-side-wrap--open .se-right-body,
|
||
.se-right--collapsible--open .se-right-tabs,
|
||
.se-right--collapsible--open .se-right-body {
|
||
min-width: var(--se-right-width, 380px);
|
||
}
|
||
|
||
.se-palette-panel {
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
border-radius: 14px;
|
||
background: var(--se-panel-card-bg);
|
||
border: 1px solid var(--se-panel-card-border);
|
||
box-shadow: var(--se-panel-card-shadow), inset 0 1px 0 color-mix(in srgb, var(--se-text) 4%, transparent);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.se-right-tabs {
|
||
display: flex;
|
||
border-bottom: 1px solid var(--se-border);
|
||
}
|
||
.se-right-tab {
|
||
flex: 1;
|
||
padding: 10px 6px;
|
||
border: none;
|
||
background: transparent;
|
||
color: var(--se-text-muted);
|
||
font-size: 0.76rem;
|
||
cursor: pointer;
|
||
}
|
||
.se-right-tab--on {
|
||
color: var(--se-tab-active);
|
||
box-shadow: inset 0 -2px 0 var(--se-tab-active);
|
||
}
|
||
|
||
.se-right-body {
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.se-palette-search {
|
||
margin: 10px 10px 6px;
|
||
padding: 8px 10px;
|
||
border-radius: 8px;
|
||
border: 1px solid var(--se-input-border);
|
||
background: var(--se-input-bg);
|
||
color: var(--se-text);
|
||
font-size: 0.78rem;
|
||
}
|
||
.se-palette-search:focus {
|
||
outline: none;
|
||
border-color: var(--se-input-focus);
|
||
box-shadow: 0 0 12px color-mix(in srgb, var(--se-accent) 12%, transparent);
|
||
}
|
||
|
||
.se-palette-subtabs {
|
||
display: flex;
|
||
margin: 4px 10px 0;
|
||
border-bottom: 1px solid var(--se-border);
|
||
flex-shrink: 0;
|
||
}
|
||
.se-palette-subtab {
|
||
flex: 1;
|
||
padding: 8px 6px;
|
||
border: none;
|
||
background: transparent;
|
||
color: var(--se-text-muted);
|
||
font-size: 0.72rem;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
}
|
||
.se-palette-subtab--on {
|
||
color: var(--se-tab-active);
|
||
box-shadow: inset 0 -2px 0 var(--se-tab-active);
|
||
}
|
||
.se-palette-subtab--aux.se-palette-subtab--on {
|
||
color: var(--se-palette-section-ind, #2dd4bf);
|
||
box-shadow: inset 0 -2px 0 var(--se-palette-section-ind, #2dd4bf);
|
||
}
|
||
.se-palette-subtab--composite.se-palette-subtab--on {
|
||
color: var(--se-palette-section-composite, #c084fc);
|
||
box-shadow: inset 0 -2px 0 var(--se-palette-section-composite, #c084fc);
|
||
}
|
||
.se-palette-subtab--range.se-palette-subtab--on {
|
||
color: var(--se-palette-section-range, #f59e0b);
|
||
box-shadow: inset 0 -2px 0 var(--se-palette-section-range, #f59e0b);
|
||
}
|
||
|
||
.se-palette-section--range .se-palette-toolbar-title {
|
||
color: var(--se-palette-section-range, #f59e0b);
|
||
}
|
||
|
||
.se-palette-mode-input {
|
||
width: auto;
|
||
min-width: 34px;
|
||
flex: 1;
|
||
max-width: 52px;
|
||
}
|
||
.se-palette-mode-mark {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 4px;
|
||
font-size: 0.62rem;
|
||
line-height: 1;
|
||
flex-shrink: 0;
|
||
}
|
||
.se-palette-mode-mark--include {
|
||
background: color-mix(in srgb, #38bdf8 18%, transparent);
|
||
color: #38bdf8;
|
||
}
|
||
.se-palette-mode-mark--exclude {
|
||
background: color-mix(in srgb, var(--se-palette-range-exclude-accent) 18%, transparent);
|
||
color: var(--se-palette-range-exclude-accent);
|
||
}
|
||
|
||
.se-range-count {
|
||
font-size: 0.65rem;
|
||
color: var(--se-text-dim);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.se-range-mode-tabs {
|
||
display: flex;
|
||
gap: 4px;
|
||
margin: 4px 10px 8px;
|
||
flex-shrink: 0;
|
||
}
|
||
.se-range-mode-tab {
|
||
flex: 1;
|
||
padding: 6px 4px;
|
||
border-radius: 6px;
|
||
border: 1px solid color-mix(in srgb, var(--se-palette-range-accent) 28%, var(--se-border));
|
||
background: color-mix(in srgb, var(--se-palette-range-accent) 6%, var(--se-btn-bg));
|
||
color: var(--se-text-muted);
|
||
font-size: 0.68rem;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--se-text) 6%, transparent);
|
||
transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
|
||
}
|
||
.se-range-mode-tab--on {
|
||
border-color: color-mix(in srgb, var(--se-palette-section-range, #f59e0b) 50%, transparent);
|
||
color: var(--se-palette-section-range, #f59e0b);
|
||
background: color-mix(in srgb, var(--se-palette-section-range, #f59e0b) 10%, var(--se-btn-bg));
|
||
}
|
||
.se-range-mode-tab--include.se-range-mode-tab--on {
|
||
border-color: color-mix(in srgb, #38bdf8 50%, transparent);
|
||
color: #38bdf8;
|
||
background: color-mix(in srgb, #38bdf8 10%, var(--se-btn-bg));
|
||
}
|
||
.se-range-mode-tab--exclude.se-range-mode-tab--on {
|
||
border-color: color-mix(in srgb, #f87171 50%, transparent);
|
||
color: #f87171;
|
||
background: color-mix(in srgb, #f87171 10%, var(--se-btn-bg));
|
||
}
|
||
|
||
.se-range-hint {
|
||
margin: 4px 10px 8px;
|
||
font-size: 0.65rem;
|
||
line-height: 1.45;
|
||
color: var(--se-text-dim);
|
||
}
|
||
|
||
.se-range-selected-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
margin: 0 10px 8px;
|
||
padding: 8px 10px;
|
||
border-radius: 8px;
|
||
border: 1px solid color-mix(in srgb, var(--se-palette-section-range, #f59e0b) 35%, var(--se-border));
|
||
background: color-mix(in srgb, var(--se-palette-section-range, #f59e0b) 6%, var(--se-panel-card-bg));
|
||
}
|
||
.se-range-selected-label {
|
||
font-size: 0.72rem;
|
||
font-weight: 600;
|
||
color: var(--se-text);
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.se-range-category {
|
||
margin: 0 10px 12px;
|
||
}
|
||
.se-range-category-title {
|
||
margin: 0 0 6px;
|
||
font-size: 0.68rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
color: var(--se-text-dim);
|
||
}
|
||
|
||
.se-range-badge {
|
||
flex-shrink: 0;
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
font-size: 0.58rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
.se-range-badge--include {
|
||
background: color-mix(in srgb, #38bdf8 18%, transparent);
|
||
color: #38bdf8;
|
||
}
|
||
.se-range-badge--exclude {
|
||
background: color-mix(in srgb, #f87171 18%, transparent);
|
||
color: #f87171;
|
||
}
|
||
|
||
.se-range-hint-tooltip {
|
||
position: fixed;
|
||
z-index: 10050;
|
||
max-width: min(280px, calc(100vw - 24px));
|
||
padding: 9px 11px;
|
||
border-radius: 8px;
|
||
/* body 포털 — :root(--text/--bg2) 사용 (.se-page 토큰 미상속) */
|
||
color: var(--text, #c0caf5);
|
||
background: color-mix(in srgb, var(--bg2, #24283b) 94%, var(--bg, #1a1b26));
|
||
border: 1px solid color-mix(in srgb, #f59e0b 52%, var(--border, rgba(122, 162, 247, 0.22)));
|
||
box-shadow:
|
||
var(--popup-shadow, 0 8px 32px rgba(0, 0, 0, 0.55)),
|
||
0 0 0 1px color-mix(in srgb, #f59e0b 12%, transparent),
|
||
inset 0 1px 0 color-mix(in srgb, var(--text, #c0caf5) 8%, transparent);
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
pointer-events: none;
|
||
transform: translate(-50%, calc(-100% - 10px));
|
||
}
|
||
|
||
.se-range-hint-tooltip::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: -5px;
|
||
width: 10px;
|
||
height: 10px;
|
||
background: color-mix(in srgb, var(--bg2, #24283b) 94%, var(--bg, #1a1b26));
|
||
border-right: 1px solid color-mix(in srgb, #f59e0b 52%, var(--border, rgba(122, 162, 247, 0.22)));
|
||
border-bottom: 1px solid color-mix(in srgb, #f59e0b 52%, var(--border, rgba(122, 162, 247, 0.22)));
|
||
transform: translateX(-50%) rotate(45deg);
|
||
}
|
||
|
||
.se-range-hint-tooltip-title {
|
||
font-size: 0.74rem;
|
||
font-weight: 700;
|
||
color: color-mix(in srgb, #f59e0b 72%, var(--text, #c0caf5));
|
||
margin-bottom: 4px;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.se-range-hint-tooltip-desc {
|
||
font-size: 0.68rem;
|
||
line-height: 1.5;
|
||
color: var(--text2, #9aa5ce);
|
||
}
|
||
|
||
.se-palette-grid--2 {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
|
||
.se-palette-toolbar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
margin: 8px 0 8px;
|
||
padding: 0 2px;
|
||
}
|
||
.se-palette-toolbar-title {
|
||
font-size: 0.65rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
color: var(--se-text-dim);
|
||
font-weight: 700;
|
||
}
|
||
.se-palette-section--aux .se-palette-toolbar-title { color: var(--se-palette-section-ind); }
|
||
.se-palette-section--composite .se-palette-toolbar-title { color: var(--se-palette-section-composite, #c084fc); }
|
||
.se-palette-section--range .se-palette-toolbar-title { color: var(--se-palette-section-range, #f59e0b); }
|
||
|
||
.se-range-grid {
|
||
margin: 0 10px 10px;
|
||
}
|
||
|
||
.se-palette-toolbar-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
.se-palette-tool-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 28px;
|
||
height: 28px;
|
||
padding: 0;
|
||
border-radius: 6px;
|
||
border: 1px solid var(--se-border);
|
||
background: var(--se-btn-bg);
|
||
color: var(--se-text-muted);
|
||
cursor: pointer;
|
||
transition: border-color 0.15s, color 0.15s, background 0.15s;
|
||
}
|
||
.se-palette-tool-btn:hover:not(:disabled) {
|
||
border-color: color-mix(in srgb, var(--se-accent) 45%, transparent);
|
||
color: var(--se-text);
|
||
background: var(--se-bg-elevated);
|
||
}
|
||
.se-palette-tool-btn:disabled {
|
||
opacity: 0.35;
|
||
cursor: not-allowed;
|
||
}
|
||
.se-palette-tool-btn--danger:hover:not(:disabled) {
|
||
border-color: color-mix(in srgb, var(--se-danger) 50%, transparent);
|
||
color: var(--se-danger);
|
||
}
|
||
|
||
.se-palette-empty {
|
||
margin: 12px 0 0;
|
||
font-size: 0.72rem;
|
||
color: var(--se-text-muted);
|
||
text-align: center;
|
||
}
|
||
|
||
.se-palette-item-modal .se-field-lbl {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.se-palette-section { padding: 0 10px 10px; }
|
||
.se-palette-section--scroll { flex: 1; overflow-y: auto; min-height: 0; }
|
||
.se-palette-section h3 {
|
||
margin: 0 0 8px;
|
||
font-size: 0.65rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
color: var(--se-text-dim);
|
||
}
|
||
.se-palette-section--logic h3 { color: var(--se-palette-section-logic); }
|
||
.se-palette-section--band h3 { color: var(--se-palette-section-band); }
|
||
.se-palette-section--aux h3 { color: var(--se-palette-section-ind); }
|
||
.se-palette-section--composite h3 { color: var(--se-palette-section-composite, #c084fc); }
|
||
|
||
.se-palette-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 6px;
|
||
}
|
||
.se-palette-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||
|
||
.se-palette-card {
|
||
border-radius: 8px;
|
||
padding: 8px;
|
||
cursor: grab;
|
||
touch-action: none;
|
||
-webkit-user-drag: element;
|
||
border: 1px solid var(--se-border);
|
||
background: var(--se-palette-card-bg);
|
||
transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s, background 0.12s;
|
||
}
|
||
.desktop-client .se-palette-card {
|
||
cursor: grab;
|
||
}
|
||
.desktop-client .se-palette-card:active {
|
||
cursor: grabbing;
|
||
}
|
||
.se-palette-card--pointer {
|
||
touch-action: none;
|
||
-webkit-user-drag: none;
|
||
user-select: none;
|
||
}
|
||
.se-palette-card:hover {
|
||
transform: translateY(-2px);
|
||
}
|
||
.se-palette-card:active {
|
||
cursor: grabbing;
|
||
}
|
||
|
||
body.se-palette-drag-active {
|
||
cursor: grabbing !important;
|
||
user-select: none;
|
||
}
|
||
|
||
body.se-palette-drag-armed .se-right-body,
|
||
body.se-palette-drag-armed .se-palette-section--scroll {
|
||
overflow: hidden !important;
|
||
overscroll-behavior: none;
|
||
touch-action: none;
|
||
}
|
||
|
||
.se-palette-card .se-palette-period-input[readonly] {
|
||
pointer-events: none;
|
||
cursor: inherit;
|
||
}
|
||
|
||
.se-palette-drag-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 20040;
|
||
touch-action: none;
|
||
cursor: grabbing;
|
||
background: transparent;
|
||
}
|
||
|
||
.se-palette-drag-overlay-ghost {
|
||
position: fixed;
|
||
z-index: 20041;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* body portal — .se-page 테마 토큰(scope)만 카드 클론에 전달 */
|
||
.se-palette-drag-overlay-theme.se-page {
|
||
display: inline-block;
|
||
flex: none;
|
||
width: auto;
|
||
height: auto;
|
||
min-height: 0;
|
||
overflow: visible;
|
||
position: static;
|
||
background: transparent;
|
||
color: var(--se-text);
|
||
}
|
||
|
||
.se-palette-drag-overlay-ghost .se-palette-card {
|
||
cursor: grabbing;
|
||
transform: none;
|
||
margin: 0;
|
||
opacity: 1;
|
||
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
|
||
}
|
||
|
||
.se-palette-drag-overlay-ghost .se-palette-card--dragging:hover {
|
||
transform: none;
|
||
}
|
||
|
||
.se-palette-drag-overlay-label {
|
||
position: fixed;
|
||
z-index: 20041;
|
||
pointer-events: none;
|
||
transform: translate(-50%, -100%);
|
||
padding: 6px 12px;
|
||
border-radius: 8px;
|
||
font-size: 0.72rem;
|
||
font-weight: 700;
|
||
color: var(--se-text, #e2e8f0);
|
||
background: color-mix(in srgb, var(--se-accent, #4dabf7) 22%, var(--se-panel-card-bg, #1e293b));
|
||
border: 1px solid color-mix(in srgb, var(--se-accent, #4dabf7) 55%, transparent);
|
||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
|
||
white-space: nowrap;
|
||
max-width: min(240px, 90vw);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.se-palette-drag-ghost {
|
||
position: fixed;
|
||
z-index: 20050;
|
||
pointer-events: none;
|
||
transform: translate(-50%, -50%);
|
||
padding: 6px 12px;
|
||
border-radius: 8px;
|
||
font-size: 0.72rem;
|
||
font-weight: 700;
|
||
color: var(--se-text, #e2e8f0);
|
||
background: color-mix(in srgb, var(--se-accent, #4dabf7) 22%, var(--se-panel-card-bg, #1e293b));
|
||
border: 1px solid color-mix(in srgb, var(--se-accent, #4dabf7) 55%, transparent);
|
||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
|
||
white-space: nowrap;
|
||
max-width: min(240px, 90vw);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.se-palette-card--selected {
|
||
outline: 2px solid var(--se-accent);
|
||
outline-offset: 1px;
|
||
}
|
||
|
||
/* ── 논리 연산: AND / OR / NOT ── */
|
||
.se-palette-card--logic-and {
|
||
border-color: color-mix(in srgb, var(--se-palette-logic-and-accent) 42%, transparent);
|
||
background: var(--se-palette-logic-and-bg);
|
||
box-shadow: inset 3px 0 0 var(--se-palette-logic-and-accent);
|
||
}
|
||
.se-palette-card--selected.se-palette-card--logic-and {
|
||
outline-color: var(--se-palette-logic-and-accent);
|
||
}
|
||
.se-palette-card--logic-and .se-palette-card-icon {
|
||
background: color-mix(in srgb, var(--se-palette-logic-and-accent) 22%, transparent);
|
||
color: var(--se-palette-logic-and-accent);
|
||
}
|
||
.se-palette-card--logic-and:hover {
|
||
border-color: color-mix(in srgb, var(--se-palette-logic-and-accent) 65%, transparent);
|
||
box-shadow: inset 3px 0 0 var(--se-palette-logic-and-accent), 0 4px 14px color-mix(in srgb, var(--se-palette-logic-and-accent) 22%, transparent);
|
||
}
|
||
|
||
.se-palette-card--logic-or {
|
||
border-color: color-mix(in srgb, var(--se-palette-logic-or-accent) 42%, transparent);
|
||
background: var(--se-palette-logic-or-bg);
|
||
box-shadow: inset 3px 0 0 var(--se-palette-logic-or-accent);
|
||
}
|
||
.se-palette-card--logic-or .se-palette-card-icon {
|
||
background: color-mix(in srgb, var(--se-palette-logic-or-accent) 22%, transparent);
|
||
color: var(--se-palette-logic-or-accent);
|
||
}
|
||
.se-palette-card--logic-or:hover {
|
||
border-color: color-mix(in srgb, var(--se-palette-logic-or-accent) 65%, transparent);
|
||
box-shadow: inset 3px 0 0 var(--se-palette-logic-or-accent), 0 4px 14px color-mix(in srgb, var(--se-palette-logic-or-accent) 22%, transparent);
|
||
}
|
||
|
||
.se-palette-card--logic-not {
|
||
border-color: color-mix(in srgb, var(--se-palette-logic-not-accent) 42%, transparent);
|
||
background: var(--se-palette-logic-not-bg);
|
||
box-shadow: inset 3px 0 0 var(--se-palette-logic-not-accent);
|
||
}
|
||
.se-palette-card--logic-not .se-palette-card-icon {
|
||
background: color-mix(in srgb, var(--se-palette-logic-not-accent) 22%, transparent);
|
||
color: var(--se-palette-logic-not-accent);
|
||
}
|
||
.se-palette-card--logic-not:hover {
|
||
border-color: color-mix(in srgb, var(--se-palette-logic-not-accent) 65%, transparent);
|
||
box-shadow: inset 3px 0 0 var(--se-palette-logic-not-accent), 0 4px 14px color-mix(in srgb, var(--se-palette-logic-not-accent) 22%, transparent);
|
||
}
|
||
|
||
/* ── START (시간봉 시작점) ── */
|
||
.se-palette-card--logic-start {
|
||
border-color: color-mix(in srgb, var(--se-palette-logic-start-accent) 52%, transparent);
|
||
background: var(--se-palette-logic-start-bg);
|
||
box-shadow: inset 3px 0 0 var(--se-palette-logic-start-accent);
|
||
}
|
||
.se-palette-card--selected.se-palette-card--logic-start {
|
||
outline-color: var(--se-palette-logic-start-accent);
|
||
}
|
||
.se-palette-card--logic-start .se-palette-card-icon {
|
||
background: color-mix(in srgb, var(--se-palette-logic-start-accent) 28%, transparent);
|
||
color: var(--se-palette-logic-start-accent);
|
||
font-weight: 900;
|
||
}
|
||
.se-palette-card--logic-start .se-palette-card-name {
|
||
color: var(--se-palette-logic-start-accent);
|
||
}
|
||
.se-palette-card--logic-start:hover {
|
||
border-color: color-mix(in srgb, var(--se-palette-logic-start-accent) 72%, transparent);
|
||
box-shadow: inset 3px 0 0 var(--se-palette-logic-start-accent), 0 4px 14px color-mix(in srgb, var(--se-palette-logic-start-accent) 28%, transparent);
|
||
}
|
||
|
||
/* ── 밴드 · 추세 ── */
|
||
.se-palette-card--band {
|
||
border-color: color-mix(in srgb, var(--se-palette-band-accent) 42%, transparent);
|
||
background: var(--se-palette-band-bg);
|
||
box-shadow: inset 3px 0 0 var(--se-palette-band-accent);
|
||
}
|
||
.se-palette-card--band .se-palette-card-icon {
|
||
background: color-mix(in srgb, var(--se-palette-band-accent) 22%, transparent);
|
||
color: var(--se-palette-band-accent);
|
||
}
|
||
.se-palette-card--band:hover {
|
||
border-color: color-mix(in srgb, var(--se-palette-band-accent) 65%, transparent);
|
||
box-shadow: inset 3px 0 0 var(--se-palette-band-accent), 0 4px 14px color-mix(in srgb, var(--se-palette-band-accent) 22%, transparent);
|
||
}
|
||
|
||
/* ── 보조지표 ── */
|
||
.se-palette-card--ind {
|
||
border-color: color-mix(in srgb, var(--se-palette-ind-accent) 42%, transparent);
|
||
background: var(--se-palette-ind-bg);
|
||
box-shadow:
|
||
inset 3px 0 0 var(--se-palette-ind-accent),
|
||
inset 0 1px 0 color-mix(in srgb, var(--se-text) 6%, transparent);
|
||
}
|
||
.se-palette-card--ind .se-palette-card-icon {
|
||
background: color-mix(in srgb, var(--se-palette-ind-accent) 22%, transparent);
|
||
color: var(--se-palette-ind-accent);
|
||
}
|
||
.se-palette-card--ind:hover {
|
||
border-color: color-mix(in srgb, var(--se-palette-ind-accent) 65%, transparent);
|
||
box-shadow:
|
||
inset 3px 0 0 var(--se-palette-ind-accent),
|
||
inset 0 1px 0 color-mix(in srgb, var(--se-text) 6%, transparent),
|
||
0 4px 14px color-mix(in srgb, var(--se-palette-ind-accent) 22%, transparent);
|
||
}
|
||
|
||
/* ── 복합지표 ── */
|
||
.se-palette-card--composite {
|
||
border-color: color-mix(in srgb, #c084fc 42%, transparent);
|
||
background: linear-gradient(145deg, color-mix(in srgb, #c084fc 22%, var(--bg2)), color-mix(in srgb, #c084fc 10%, var(--bg2)));
|
||
box-shadow:
|
||
inset 3px 0 0 #c084fc,
|
||
inset 0 1px 0 color-mix(in srgb, var(--se-text) 6%, transparent);
|
||
}
|
||
.se-palette-card--composite .se-palette-card-icon {
|
||
background: color-mix(in srgb, #c084fc 22%, transparent);
|
||
color: #c084fc;
|
||
}
|
||
.se-palette-card--composite:hover {
|
||
border-color: color-mix(in srgb, #c084fc 65%, transparent);
|
||
box-shadow:
|
||
inset 3px 0 0 #c084fc,
|
||
inset 0 1px 0 color-mix(in srgb, var(--se-text) 6%, transparent),
|
||
0 4px 14px color-mix(in srgb, #c084fc 22%, transparent);
|
||
}
|
||
.se-palette-card--selected.se-palette-card--composite {
|
||
outline-color: #c084fc;
|
||
}
|
||
|
||
/* ── 횡보 필터 (base .se-palette-card 뒤에 배치 — 배경 덮어쓰기 방지) ── */
|
||
.se-palette-card.se-palette-card--range,
|
||
.se-palette-card.se-palette-card--range-include {
|
||
border-color: color-mix(in srgb, var(--se-palette-range-accent) 42%, transparent);
|
||
background: var(--se-palette-range-bg);
|
||
box-shadow:
|
||
inset 3px 0 0 var(--se-palette-range-accent),
|
||
inset 0 1px 0 color-mix(in srgb, var(--se-text) 6%, transparent);
|
||
}
|
||
.se-palette-card.se-palette-card--range .se-palette-card-icon,
|
||
.se-palette-card.se-palette-card--range-include .se-palette-card-icon {
|
||
background: color-mix(in srgb, var(--se-palette-range-accent) 22%, transparent);
|
||
color: var(--se-palette-range-accent);
|
||
}
|
||
.se-palette-card.se-palette-card--range:hover,
|
||
.se-palette-card.se-palette-card--range-include:hover {
|
||
border-color: color-mix(in srgb, var(--se-palette-range-accent) 65%, transparent);
|
||
box-shadow:
|
||
inset 3px 0 0 var(--se-palette-range-accent),
|
||
inset 0 1px 0 color-mix(in srgb, var(--se-text) 6%, transparent),
|
||
0 4px 14px color-mix(in srgb, var(--se-palette-range-accent) 22%, transparent);
|
||
}
|
||
.se-palette-card--selected.se-palette-card.se-palette-card--range,
|
||
.se-palette-card--selected.se-palette-card.se-palette-card--range-include {
|
||
outline-color: var(--se-palette-range-accent);
|
||
}
|
||
.se-palette-card.se-palette-card--range-exclude {
|
||
border-color: color-mix(in srgb, var(--se-palette-range-exclude-accent) 42%, transparent);
|
||
background: var(--se-palette-range-exclude-bg);
|
||
box-shadow:
|
||
inset 3px 0 0 var(--se-palette-range-exclude-accent),
|
||
inset 0 1px 0 color-mix(in srgb, var(--se-text) 6%, transparent);
|
||
}
|
||
.se-palette-card.se-palette-card--range-exclude .se-palette-card-icon {
|
||
background: color-mix(in srgb, var(--se-palette-range-exclude-accent) 22%, transparent);
|
||
color: var(--se-palette-range-exclude-accent);
|
||
}
|
||
.se-palette-card.se-palette-card--range-exclude:hover {
|
||
border-color: color-mix(in srgb, var(--se-palette-range-exclude-accent) 65%, transparent);
|
||
box-shadow:
|
||
inset 3px 0 0 var(--se-palette-range-exclude-accent),
|
||
inset 0 1px 0 color-mix(in srgb, var(--se-text) 6%, transparent),
|
||
0 4px 14px color-mix(in srgb, var(--se-palette-range-exclude-accent) 22%, transparent);
|
||
}
|
||
.se-palette-card--selected.se-palette-card.se-palette-card--range-exclude {
|
||
outline-color: var(--se-palette-range-exclude-accent);
|
||
}
|
||
.se-palette-card.se-palette-card--range .se-palette-card-desc {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
line-height: 1.25;
|
||
}
|
||
|
||
.se-palette-card-head { display: flex; align-items: flex-start; gap: 6px; }
|
||
.se-palette-card-icon {
|
||
width: 24px; height: 24px; border-radius: 6px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 0.72rem; font-weight: 800;
|
||
flex-shrink: 0;
|
||
transition: background 0.12s, color 0.12s;
|
||
}
|
||
.se-palette-card-meta { min-width: 0; }
|
||
.se-palette-card-name { font-size: 0.68rem; font-weight: 700; line-height: 1.2; display: block; }
|
||
.se-palette-card-desc { font-size: 0.58rem; color: var(--se-text-dim); display: block; }
|
||
|
||
.se-palette-card-period {
|
||
display: flex; align-items: center; gap: 4px;
|
||
margin-top: 6px; font-size: 0.58rem; color: var(--se-text-dim);
|
||
}
|
||
.se-palette-period-input {
|
||
width: 36px; text-align: center;
|
||
border: 1px solid var(--se-input-border);
|
||
border-radius: 4px;
|
||
background: var(--se-input-bg);
|
||
color: var(--se-text); font-size: 0.58rem; padding: 2px;
|
||
}
|
||
.se-palette-sync { color: var(--se-success); font-size: 0.65rem; }
|
||
|
||
.se-template-list { padding: 0 10px 10px; overflow-y: auto; flex: 1; min-height: 0; }
|
||
.se-template-empty {
|
||
padding: 24px 12px;
|
||
text-align: center;
|
||
color: var(--se-text-muted);
|
||
font-size: 0.76rem;
|
||
}
|
||
.se-template-row {
|
||
display: flex;
|
||
align-items: stretch;
|
||
margin-bottom: 6px;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: border-color 0.12s, box-shadow 0.12s;
|
||
}
|
||
.se-template-row--selected .se-template-item {
|
||
border-color: var(--se-gold);
|
||
box-shadow: 0 0 0 1px color-mix(in srgb, var(--se-gold) 35%, transparent);
|
||
}
|
||
.se-template-item {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 6px 8px;
|
||
flex: 1;
|
||
min-width: 0;
|
||
width: 100%;
|
||
padding: 10px 12px;
|
||
border-radius: 8px;
|
||
border: 1px solid var(--se-border);
|
||
background: var(--se-palette-card-bg);
|
||
color: var(--se-text);
|
||
text-align: left;
|
||
transition: border-color 0.12s, box-shadow 0.12s;
|
||
}
|
||
.se-template-row:hover .se-template-item {
|
||
border-color: var(--se-palette-hover-border);
|
||
box-shadow: 0 0 12px color-mix(in srgb, var(--se-gold) 10%, transparent);
|
||
}
|
||
.se-palette-section--templates {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
min-height: 0;
|
||
}
|
||
.se-palette-section--templates .se-palette-search {
|
||
flex-shrink: 0;
|
||
}
|
||
.se-template-label {
|
||
font-size: 0.76rem;
|
||
flex: 1 1 auto;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
min-width: 0;
|
||
}
|
||
.se-template-user-badge,
|
||
.se-template-source-badge {
|
||
flex-shrink: 0;
|
||
font-size: 0.58rem;
|
||
font-weight: 700;
|
||
padding: 2px 5px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.se-template-user-badge,
|
||
.se-template-source-badge--user {
|
||
color: var(--se-gold);
|
||
background: color-mix(in srgb, var(--se-gold) 14%, transparent);
|
||
}
|
||
|
||
.se-template-source-badge--composite-palette {
|
||
color: #82b1ff;
|
||
background: color-mix(in srgb, #82b1ff 14%, transparent);
|
||
}
|
||
|
||
.se-template-source-badge--sideways-palette {
|
||
color: #ffb74d;
|
||
background: color-mix(in srgb, #ffb74d 14%, transparent);
|
||
}
|
||
.se-template-save-hint {
|
||
margin: 0 0 8px;
|
||
font-size: 0.76rem;
|
||
color: var(--se-text-muted);
|
||
line-height: 1.45;
|
||
}
|
||
.se-template-save-update {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
margin-top: 12px;
|
||
font-size: 0.76rem;
|
||
color: var(--se-text-muted);
|
||
cursor: pointer;
|
||
}
|
||
.se-template-save-update input {
|
||
margin-top: 2px;
|
||
}
|
||
.se-template-desc {
|
||
flex: 1 1 100%;
|
||
font-size: 0.66rem;
|
||
line-height: 1.35;
|
||
color: var(--se-text-muted);
|
||
}
|
||
.se-template-signal { font-size: 0.62rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; margin-left: auto; }
|
||
.se-template-signal--buy { color: var(--se-buy); background: color-mix(in srgb, var(--se-buy) 12%, transparent); }
|
||
.se-template-signal--sell { color: var(--se-sell); background: color-mix(in srgb, var(--se-sell) 12%, transparent); }
|
||
|
||
/* ── Modal / snack ── */
|
||
.se-field-lbl { display: block; font-size: 0.72rem; color: var(--se-text-muted); margin: 8px 0 4px; }
|
||
.se-field-inp, .se-field-ta {
|
||
width: 100%; box-sizing: border-box;
|
||
border: 1px solid var(--se-input-border);
|
||
border-radius: 8px;
|
||
background: var(--se-input-bg);
|
||
color: var(--se-text); padding: 7px 10px; font-size: 0.8rem;
|
||
}
|
||
.se-field-inp--error {
|
||
border-color: var(--se-danger);
|
||
box-shadow: 0 0 0 1px color-mix(in srgb, var(--se-danger) 35%, transparent);
|
||
}
|
||
.se-field-error {
|
||
margin: 4px 0 0;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
color: var(--se-danger);
|
||
}
|
||
.se-modal-body { padding: 4px 0; }
|
||
.se-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
|
||
|
||
.se-snack {
|
||
position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
|
||
padding: 10px 20px; border-radius: 10px; font-size: 0.82rem; font-weight: 600;
|
||
z-index: 10001;
|
||
color: #fff;
|
||
background: #2e7d32;
|
||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
|
||
pointer-events: none;
|
||
}
|
||
.se-snack--err {
|
||
background: #c62828;
|
||
border-color: rgba(255, 255, 255, 0.12);
|
||
}
|
||
|
||
/* ── 전략 설명 팝업 ── */
|
||
.se-btn--desc .se-desc-icon {
|
||
display: block;
|
||
opacity: 0.9;
|
||
}
|
||
.se-btn--desc:hover .se-desc-icon {
|
||
opacity: 1;
|
||
color: var(--se-accent, #3f7ef5);
|
||
}
|
||
|
||
.se-desc-overlay {
|
||
z-index: 10999;
|
||
}
|
||
.se-desc-modal {
|
||
max-height: min(88vh, 720px);
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.se-desc-body {
|
||
overflow: auto;
|
||
max-height: min(72vh, 600px);
|
||
padding: 12px 16px 16px !important;
|
||
}
|
||
.se-desc-content {
|
||
font-size: 0.84rem;
|
||
line-height: 1.65;
|
||
color: var(--se-text);
|
||
}
|
||
.se-desc-intro {
|
||
margin: 0 0 12px;
|
||
color: var(--se-text-muted);
|
||
}
|
||
.se-desc-section {
|
||
margin-bottom: 18px;
|
||
padding-bottom: 14px;
|
||
border-bottom: 1px solid var(--se-border, rgba(255, 255, 255, 0.08));
|
||
}
|
||
.se-desc-section:last-of-type {
|
||
border-bottom: none;
|
||
margin-bottom: 8px;
|
||
}
|
||
.se-desc-section-title {
|
||
margin: 0 0 8px;
|
||
font-size: 0.92rem;
|
||
font-weight: 700;
|
||
color: var(--se-text);
|
||
}
|
||
.se-desc-section-title:first-child {
|
||
margin-top: 0;
|
||
}
|
||
.se-desc-para {
|
||
margin: 0 0 8px;
|
||
}
|
||
.se-desc-list {
|
||
margin: 6px 0 0;
|
||
padding-left: 0;
|
||
list-style: none;
|
||
}
|
||
.se-desc-list-item {
|
||
margin: 4px 0;
|
||
padding-left: 4px;
|
||
white-space: pre-wrap;
|
||
word-break: keep-all;
|
||
}
|
||
.se-desc-footnotes {
|
||
margin-top: 12px;
|
||
padding-top: 10px;
|
||
border-top: 1px dashed var(--se-border, rgba(255, 255, 255, 0.1));
|
||
}
|
||
.se-desc-footnote {
|
||
margin: 4px 0 0;
|
||
font-size: 0.75rem;
|
||
color: var(--se-text-muted);
|
||
line-height: 1.5;
|
||
}
|