/* ── 라이트 테마 (기본) ────────────────────────────────────────────── */
:root {
    /* 배경 */
    --chart-bg:             #ffffff;

    /* 축 텍스트 & 선 */
    --chart-axis-text:      #333333;
    --chart-axis-line:      #555555;

    /* 그리드 */
    --chart-grid:           #e0e0e0;

    /* 캔들 */
    --chart-bullish:        #4caf50;
    --chart-bearish:        #f44336;

    /* 볼륨 바 */
    --chart-vol-bullish:    rgba(76,175,80,0.4);
    --chart-vol-bearish:    rgba(244,67,54,0.4);

    /* 볼린저 밴드 */
    --chart-bb-middle:      purple;
    --chart-bb-upper:       green;
    --chart-bb-lower:       red;
    --chart-bb-area:        rgba(128,0,128,0.1);

    /* 이동평균선 — 기간별 색상 */
    --chart-sma-20:         orange;
    --chart-sma-50:         blue;
    --chart-sma-120:        green;
    --chart-sma-200:        red;

    /* 크로스헤어 & 축 레이블 */
    --chart-crosshair:      #e53935;
    --chart-crosshair-text: #ffffff;
    --chart-axis-label-text: #ffffff;

    /* 드로잉 */
    --chart-drawing:        #e53935;

    /* RSI */
    --chart-rsi-line:       steelblue;
    --chart-rsi-ob-os:      #aaa;

    /* MACD */
    --chart-macd-line:      steelblue;
    --chart-macd-signal:    orange;
    --chart-macd-hist-bull: rgba(76,175,80,0.7);
    --chart-macd-hist-bear: rgba(244,67,54,0.7);
    --chart-macd-zero:      #aaa;

    /* Stochastic */
    --chart-stoch-k:        #e91e63;
    --chart-stoch-d:        #ff9800;
    --chart-stoch-ob-os:    #aaa;

    /* ATR */
    --chart-atr-line: #26a69a;

    /* 거래량 이동평균 */
    --chart-vol-ma-20: #ff9800;
    --chart-vol-ma-60: #ab47bc;
}

/* ── 다크 테마 ────────────────────────────────────────────────────── */
[data-theme="dark"] {
    --chart-bg:             #1e1e1e;
    --chart-axis-text:      #cccccc;
    --chart-axis-line:      #666666;
    --chart-grid:           #2e2e2e;

    --chart-bullish:        #66bb6a;
    --chart-bearish:        #ef5350;

    --chart-vol-bullish:    rgba(102,187,106,0.4);
    --chart-vol-bearish:    rgba(239,83,80,0.4);

    --chart-bb-middle:      #ce93d8;
    --chart-bb-upper:       #81c784;
    --chart-bb-lower:       #e57373;
    --chart-bb-area:        rgba(206,147,216,0.15);

    --chart-sma-20:         #ffb74d;
    --chart-sma-50:         #64b5f6;
    --chart-sma-120:        #81c784;
    --chart-sma-200:        #e57373;

    --chart-crosshair:      #ff7043;
    --chart-crosshair-text: #ffffff;

    --chart-drawing:        #ff7043;

    --chart-rsi-line:       #4fc3f7;
    --chart-rsi-ob-os:      #555;

    --chart-macd-line:      #4fc3f7;
    --chart-macd-signal:    #ffb74d;
    --chart-macd-hist-bull: rgba(102,187,106,0.7);
    --chart-macd-hist-bear: rgba(239,83,80,0.7);
    --chart-macd-zero:      #555;

    --chart-stoch-k:        #f06292;
    --chart-stoch-d:        #ffb74d;
    --chart-stoch-ob-os:    #555;

    /*ATR*/
    --chart-atr-line: #4db6ac;

    /* 거래량 이동평균 */
    --chart-vol-ma-20: #ffb74d;
    --chart-vol-ma-60: #ce93d8;
}

/*선형 차트 설정*/
.chart-line, .chart-area-line {
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ── 크로스헤어 ───────────────────────────────────────────────────── */
.chart-crosshair-line {
    stroke: var(--chart-crosshair);
}

.chart-crosshair-label {
    background: var(--chart-crosshair);
    color: var(--chart-axis-label-text);
    font-size: 12px;
}

/* ── 마지막 종가 고정 레이블 ────────────────────────────────────────── */
.chart-last-close-label {
    background: var(--chart-last-close, #2196f3);
    color: var(--chart-last-close-text, #ffffff);
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 2px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 10;
}
.chart-last-close-label.bullish {
    background: var(--chart-bullish);
}
.chart-last-close-label.bearish {
    background: var(--chart-bearish);
}
.chart-last-close-line {
    stroke: var(--chart-bullish);
    stroke-dasharray: 4,3;
    stroke-width: 1;
}
.chart-last-close-line.bearish {
    stroke: var(--chart-bearish);
}
.volume-label {
    font-size: 12px;
    font-family: monospace;
    color: var(--chart-axis-label-text, #fff);
    background: var(--chart-vol-label-bg, #000000cc);
    pointer-events: none;
    z-index: 10;
}

/* ── 축 & 그리드 (Observable Plot SVG 구조 기반) ─────────────────── */

/* 축선 */
[aria-label="x-axis"] line,
[aria-label="y-axis"] line {
    stroke: var(--chart-axis-line);
}

/* 눈금 텍스트 */
[aria-label="x-axis tick"] text,
[aria-label="y-axis tick"] text,
[aria-label="x-axis label"] text,
[aria-label="y-axis label"] text {
    fill: var(--chart-axis-text);
    font-size: medium;  
}
[aria-label="x-axis tick label"] text,
[aria-label="y-axis tick label"] text {
    fill: var(--chart-axis-text);
    font-size: 12px; 
}

/* 그리드 */
[aria-label="x-grid"] line,
[aria-label="y-grid"] line {
    stroke: var(--chart-grid);
}


/* ── 데이터 없음 / 오류 오버레이 ───────────────────────────────────── */
.cf-empty-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--chart-bg, #1a1a2e);
    color: var(--chart-axis-text, #888);
    font-size: 14px;
    gap: 8px;
    pointer-events: none;
    z-index: 10;
}
.cf-empty-overlay .cf-empty-icon { font-size: 32px; }
.cf-empty-overlay.cf-error { color: #e05c5c; }

.coForward-chart2-error {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--chart-bg, #1a1a2e);
    color: var(--chart-axis-text, #888);
    font-size: 14px;
    pointer-events: none;
    z-index: 10;
}
.coForward-chart2-error header { display: none; }
.coForward-chart2-error p { margin: 0; }
.coForward-chart2-error ul {
    margin: 4px 0 0;
    padding: 0 0 0 1.2em;
    color: #e05c5c;
    font-size: 12px;
}
.coForward-chart2-error [data-message-type="invalid"] p,
.coForward-chart2-error [data-message-type="invalid"] ul { color: #e05c5c; }


.coForward-chart2-price-info {
    top: 10px;
    left: 12px;
    z-index: 12;
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-width: calc(100% - 32px);
    color: var(--chart-axis-text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.2;
    pointer-events: none;
}
.coForward-chart2-price-info header,
.coForward-chart2-price-info h1,
.coForward-chart2-price-info ul,
.coForward-chart2-price-info li {
    margin: 0;
    padding: 0;
}
.coForward-chart2-price-info h1 {
    display: flex;
    align-items: baseline;
    gap: 6px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 650;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.coForward-chart2-price-info h1 .separator,
.coForward-chart2-price-info h1 .symbol {
    color: color-mix(in srgb, var(--chart-axis-text) 66%, transparent);
    font-size: 12px;
    font-weight: 550;
}
.coForward-chart2-price-info ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    list-style: none;
    font-size: 12px;
    white-space: nowrap;
}
.coForward-chart2-price-info li {
    display: inline-flex;
    gap: 4px;
}
.coForward-chart2-price-info .label {
    color: color-mix(in srgb, var(--chart-axis-text) 58%, transparent);
    font-weight: 500;
}
.coForward-chart2-price-info .value { font-variant-numeric: tabular-nums; }
.coForward-chart2-price-info.bullish ul,
.coForward-chart2-price-info.bullish .label {
    color: var(--chart-bullish);
}
.coForward-chart2-price-info.bearish ul,
.coForward-chart2-price-info.bearish .label {
    color: var(--chart-bearish);
}

.chart-legend {
    position: absolute;
    z-index: 13;
    top: 60px;
    left: 12px;
    max-width: calc(100% - 32px);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.coForward-chart2-legend ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.coForward-chart2-legend li {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 3px;
    border-radius: 4px;
    color: var(--chart-axis-text);
    font-size: 12px;
    line-height: 1;
}
.coForward-chart2-legend li:hover { background: color-mix(in srgb, var(--chart-axis-text) 6%, transparent); }
.coForward-chart2-legend [data-coforward-legend-swatch] { flex: 0 0 auto; }
.coForward-chart2-legend button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: 4px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: color-mix(in srgb, var(--chart-axis-text) 62%, transparent);
    cursor: pointer;
    opacity: 0;
}
.coForward-chart2-legend li:hover button,
.coForward-chart2-legend button:focus-visible { opacity: 1; }
.coForward-chart2-legend button:hover { color: #dc2626; background: rgba(220, 38, 38, .08); }


/* ── 레이아웃 ─────────────────────────────────────────────────────── */
.coForward-chart2-container {
    gap: 2px;
}

/* Observable Plot figure 요소의 기본 margin/inline gap 제거 */
.coForward-chart2-container figure {
    margin: 0;
    display: block;
    line-height: 0;
}

.coForward-chart2-container figure svg {
    display: block;
}



/* ── 서브패널 ───────────────────────────────────────────────────────────*/
.coForward-chart2-subPanelLabel {
    top: 8px;
    left: 12px;
    z-index: 12;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 24px);
    color: var(--chart-axis-text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1;
}
.coForward-chart2-subPanelLabel header {
    display: flex;
    align-items: center;
    gap: 4px;
}
.coForward-chart2-subPanelLabel h1 {
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}
.coForward-chart2-subPanelLabel .subPanel-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
}
.coForward-chart2-subPanelLabel:hover .subPanel-actions,
.coForward-chart2-subPanelLabel.is-settings-open .subPanel-actions,
.coForward-chart2-subPanelLabel .subPanel-actions:focus-within { opacity: 1; }
.coForward-chart2-subPanelLabel button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: color-mix(in srgb, var(--chart-axis-text) 65%, transparent);
    cursor: pointer;
}
.coForward-chart2-subPanelLabel button:hover { background: color-mix(in srgb, var(--chart-axis-text) 8%, transparent); }
.coForward-chart2-subPanelLabel button.close:hover { color: #dc2626; background: rgba(220, 38, 38, .08); }
.coForward-chart2-subPanelLabel ul {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
}
.coForward-chart2-subPanelLabel li { display: inline-flex; gap: 4px; }
.coForward-chart2-subPanelLabel .label { display: none; }
.coForward-chart2-subPanelLabel .value {
    color: #9c27b0;
    font-variant-numeric: tabular-nums;
}

.subPanel-setting-dialog {
    position: absolute;
    inset: auto;
    z-index: 40;
    width: max-content;
    min-width: 190px;
    max-width: min(280px, calc(100% - 16px));
    margin: 0;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--chart-axis-text) 18%, transparent);
    border-radius: 8px;
    background: var(--chart-bg);
    color: var(--chart-axis-text);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .16);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.subPanel-setting-dialog::backdrop { display: none; }
.subPanel-setting-dialog form,
.subPanel-setting-dialog h3,
.subPanel-setting-dialog ul { margin: 0; }
.subPanel-setting-dialog h3 { font-size: 13px; }
.subPanel-setting-dialog ul {
    display: grid;
    gap: 8px;
    margin-top: 10px;
    padding: 0;
    list-style: none;
}
.subPanel-setting-dialog label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
}
.subPanel-setting-dialog input {
    width: 72px;
    height: 28px;
    padding: 0 6px;
    border: 1px solid color-mix(in srgb, var(--chart-axis-text) 20%, transparent);
    border-radius: 5px;
    background: var(--chart-bg);
    color: var(--chart-axis-text);
}
.subPanel-setting-dialog .dialog-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 12px;
}
.subPanel-setting-dialog .dialog-buttons button {
    height: 28px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--chart-axis-text) 18%, transparent);
    border-radius: 5px;
    background: transparent;
    color: var(--chart-axis-text);
    cursor: pointer;
}
.subPanel-setting-dialog .dialog-buttons button:first-child {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
}

/* ── 드로잉 설정 팝오버 ───────────────────────────────────────────── */
.coForward-drawing-setting-dialog {
    position: fixed;
    inset: auto;
    z-index: 300;
    width: 300px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    margin: 0;
    padding: 0;
    overflow: hidden auto;
    border: 1px solid var(--demo-line, #d8dde4);
    border-radius: 10px;
    background: var(--demo-surface, #fff);
    color: var(--demo-text, #171a1f);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .18), 0 2px 8px rgba(15, 23, 42, .08);
    font-family: var(--demo-font, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
.coForward-drawing-setting-dialog::backdrop { display: none; }
.coForward-chart2-drawing-setting > header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    padding: 0 10px 0 14px;
    border-bottom: 1px solid var(--demo-line, #d8dde4);
    background: var(--demo-surface, #fff);
}
.coForward-chart2-drawing-setting h1,
.coForward-chart2-drawing-setting h2 { margin: 0; }
.coForward-chart2-drawing-setting h1 { font-size: 14px; font-weight: 700; }
.coForward-chart2-drawing-setting .dialog-close {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--demo-muted, #68717d);
    cursor: pointer;
}
.coForward-chart2-drawing-setting .dialog-close:hover {
    background: var(--demo-soft, #f7f8fa);
    color: var(--demo-text, #171a1f);
}
.coForward-chart2-drawing-setting form { margin: 0; }
.drawing-setting-preview {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 88px;
    margin: 12px 14px 4px;
    border: 1px solid var(--demo-line, #d8dde4);
    border-radius: 7px;
    background: var(--demo-soft, #f7f8fa);
}
.drawing-setting-preview svg { display: block; }
.drawing-setting-section-label {
    position: absolute;
    top: 7px;
    left: 9px;
    color: var(--demo-muted, #68717d);
    font-size: 10px;
    font-weight: 650;
}
.coForward-chart2-drawing-setting .body { padding: 2px 14px 4px; }
.drawing-setting-section {
    padding: 12px 0;
    border-bottom: 1px solid var(--demo-line, #d8dde4);
}
.drawing-setting-section:last-child { border-bottom: 0; }
.drawing-setting-section h2 {
    margin-bottom: 8px;
    color: var(--demo-muted, #68717d);
    font-size: 11px;
    font-weight: 700;
}
.coForward-chart2-drawing-setting .form-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    align-items: center;
    min-height: 38px;
    gap: 12px;
}
.coForward-chart2-drawing-setting .form-group label {
    font-size: 12px;
    font-weight: 550;
}
.coForward-chart2-drawing-setting input,
.coForward-chart2-drawing-setting select {
    box-sizing: border-box;
    width: 112px;
    height: 32px;
    padding: 0 9px;
    border: 1px solid var(--demo-line, #d8dde4);
    border-radius: 5px;
    outline: none;
    background: var(--demo-surface, #fff);
    color: var(--demo-text, #171a1f);
    font: inherit;
    font-size: 12px;
}
.coForward-chart2-drawing-setting input:focus,
.coForward-chart2-drawing-setting select:focus {
    border-color: var(--demo-accent, #0b72e7);
    box-shadow: 0 0 0 3px var(--demo-accent-soft, #e8f2ff);
}
.coForward-chart2-drawing-setting input[type="color"] {
    padding: 4px;
    cursor: pointer;
}
.coForward-chart2-drawing-setting input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.coForward-chart2-drawing-setting input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 3px;
}
.coForward-chart2-drawing-setting footer {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    padding: 11px 14px;
    border-top: 1px solid var(--demo-line, #d8dde4);
    background: var(--demo-surface, #fff);
}
.coForward-chart2-drawing-setting footer button {
    min-width: 58px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--demo-line, #d8dde4);
    border-radius: 5px;
    background: var(--demo-surface, #fff);
    color: var(--demo-text, #171a1f);
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
}
.coForward-chart2-drawing-setting footer button:hover { background: var(--demo-soft, #f7f8fa); }
.coForward-chart2-drawing-setting footer .btn-submit {
    border-color: var(--demo-accent, #0b72e7);
    background: var(--demo-accent, #0b72e7);
    color: #fff;
}
.coForward-chart2-drawing-setting footer .btn-submit:hover { filter: brightness(.94); }

.subPanel-resize-handle {
    position: absolute;
    height: 4px;
    width: 100%;
    left: 0;
    cursor: ns-resize;
    background: transparent;
    transition: background 0.15s;
}

.subPanel-resize-handle:hover {
    background: var(--chart-accent, #4a90e2);
    opacity: 0.5;
}



/* ── 볼륨 ─────────────────────────────────────────────────────────── */
.volume-bar.bullish {
    stroke: var(--chart-vol-bullish);
    stroke-width: 8px;
}

.volume-bar.bearish {
    stroke: var(--chart-vol-bearish);
    stroke-width: 8px;
}

/* ── 캔들 ─────────────────────────────────────────────────────────── */
.candle-wick.bullish,
.candle-body.bullish {
    stroke: var(--chart-bullish);
}

.candle-wick.bearish,
.candle-body.bearish {
    stroke: var(--chart-bearish);
}

.candle-wick {
    stroke-width: 1px;
}

.candle-body {
    stroke-width: 10px;
}

/* ── 이동평균선 ───────────────────────────────────────────────────── */
.sma-line {
    stroke-width: 1.5px;
    stroke: var(--chart-sma-20);
}

.sma-line.sma-20  { stroke: var(--chart-sma-20); }
.sma-line.sma-50  { stroke: var(--chart-sma-50); }
.sma-line.sma-120 { stroke: var(--chart-sma-120); }
.sma-line.sma-200 { stroke: var(--chart-sma-200); }

/* ── EMA ── */
.ema-line {
    stroke-width: 1.5px;
    stroke-dasharray: 6,3;   /* ← SMA와 구분: 점선 */
}
.ema-line.ema-20  { stroke: var(--chart-ema-20,  #ffd54f); }
.ema-line.ema-50  { stroke: var(--chart-ema-50,  #4fc3f7); }
.ema-line.ema-120 { stroke: var(--chart-ema-120, #a5d6a7); }
.ema-line.ema-200 { stroke: var(--chart-ema-200, #ef9a9a); }

/* ── 볼린저 밴드 ──────────────────────────────────────────────────── */
.bollinger-middle {
    stroke: var(--chart-bb-middle);
    stroke-width: 1.5px;
}

.bollinger-upper {
    stroke: var(--chart-bb-upper);
    stroke-width: 1.5px;
}

.bollinger-lower {
    stroke: var(--chart-bb-lower);
    stroke-width: 1.5px;
}

.bollinger-area {
    fill: var(--chart-bb-area);
}

/* ── 고가 / 저가 수평선 ── */
.high-low-line {
    stroke-width: 1px;
    stroke-dasharray: 4,3;
}
.high { stroke: var(--chart-high-line, var(--chart-bearish)); }
.low  { stroke: var(--chart-low-line,  var(--chart-bullish)); }

/* ── VWAP ── */
.vwap-session { stroke: var(--chart-vwap,       #ab47bc); }
.vwap-week    { stroke: var(--chart-vwap-week,   #42a5f5); stroke-dasharray: 4,3; }
.vwap-month   { stroke: var(--chart-vwap-month,  #66bb6a); stroke-dasharray: 8,4; }



/* ── RSI ──────────────────────────────────────────────────────────── */
.rsi-line {
    stroke: var(--chart-rsi-line);
    stroke-width: 2px;
}

.rsi-ob-os {
    stroke: var(--chart-rsi-ob-os);
    stroke-dasharray: 4, 4;
}

/* ── MACD ─────────────────────────────────────────────────────────── */
.macd-line {
    stroke: var(--chart-macd-line);
    stroke-width: 2px;
}

.macd-signal {
    stroke: var(--chart-macd-signal);
    stroke-width: 2px;
}

.macd-hist-bull {
    stroke: var(--chart-macd-hist-bull);
    stroke-width: 4px;
}

.macd-hist-bear {
    stroke: var(--chart-macd-hist-bear);
    stroke-width: 4px;
}

.macd-zero {
    stroke: var(--chart-macd-zero);
    stroke-dasharray: 4, 4;
}

/* ── Stochastic ─────────────────────────────────────────────────── */
.stochastic-k-line {
    stroke: var(--chart-stoch-k);
    stroke-width: 2px;
}

.stochastic-d-line {
    stroke: var(--chart-stoch-d);
    stroke-width: 1.5px;
    stroke-dasharray: 4, 3;
}

.stochastic-ob-os {
    stroke: var(--chart-stoch-ob-os);
    stroke-dasharray: 4, 4;
}

/* CCI */
.cci-line path { stroke: #e91e63; stroke-width: 1.5px; }
.cci-rule line { stroke: #888; stroke-width: 1px; stroke-dasharray: 3,3; }
.cci-rule line:nth-child(2) { stroke: #555; stroke-dasharray: none; } /* 0선 */

/*roc*/
.roc-line path { stroke: #00bcd4; stroke-width: 1.5px; }
.roc-zero line { stroke: #555; stroke-width: 1px; }

/* Williams %R */
.williamsr-line path  { stroke: #9c27b0; stroke-width: 1.5px; }
.williamsr-ob-os line { stroke: #888; stroke-width: 1px; stroke-dasharray: 3,3; }

/* MFI */
.mfi-line path  { stroke: #ff5722; stroke-width: 1.5px; }
.mfi-ob-os line { stroke: #888; stroke-width: 1px; stroke-dasharray: 3,3; }

/* OBV */
.obv-line path { stroke: #8bc34a; stroke-width: 1.5px; }

/* BB Width */
.bbwidth-line path { stroke: #ffc107; stroke-width: 1.5px; }

/* ── Ichimoku ────────────────────────────────────────────────────── */
.ichi-tenkan path { stroke: #e91e63; stroke-width: 1px; }
.ichi-kijun path, line.ichi-kijun { stroke: #2196f3; stroke-width: 1.5px; }
.ichi-span-a path { stroke: #4caf50; stroke-width: 1px; stroke-dasharray: 3,2; }
.ichi-span-b path { stroke: #f44336; stroke-width: 1px; stroke-dasharray: 3,2; }
.ichi-chikou path { stroke: #9c27b0; stroke-width: 1px; opacity: 0.8; }
.ichi-cloud-bull rect, .ichi-cloud-bull path { fill: color-mix(in srgb, var(--chart-bullish) 15%, transparent); }
.ichi-cloud-bear rect, .ichi-cloud-bear path { fill: color-mix(in srgb, var(--chart-bearish) 15%, transparent); }


.sar-dot circle { r: 2.5; }
.sar-up   circle { fill: var(--chart-bullish, #4caf50); }
.sar-down circle { fill: var(--chart-bearish, #f44336); }

/* ── ATR ─────────────────────────────────────────────────────────── */
.atr-line {
    stroke: var(--chart-atr-line);
    stroke-width: 2px;
}

/* ── Volume MA ──────────────────────────────────────────────────── */
.volume-ma-line {
    stroke-width: 1.5px;
}

.volume-ma-line.volume-ma-20  { stroke: var(--chart-vol-ma-20); }
.volume-ma-line.volume-ma-60  { stroke: var(--chart-vol-ma-60); }


/* ── 드로잉 (UI에서 색상·굵기 입력 전 기본값) ────────────────────── */
.drawing-horizontal,
.drawing-trendline {
    stroke: var(--chart-drawing);
    stroke-width: 1px;
}

.drawing-angle-label {
    fill: var(--chart-drawing);
    font-size: 11px;
}