/* =========================================================
   REALTIME CHART PAGE
   ========================================================= */

.chart-page {
    width: 100%;

    min-height: calc(100vh - 60px);

    padding: 30px;

    background: var(--bg);
    color: var(--text);

    box-sizing: border-box;
}


/* =========================================================
   PAGE HEADER
   ========================================================= */

.chart-page-header {
    max-width: 1600px;

    margin:
        0 auto 10px;
}


.chart-page-title {
    font-size:
        calc(var(--font-size) * 1.85);

    font-weight: 750;

    letter-spacing: -0.6px;
}


.chart-page-description {
    margin-top: 7px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    color:
        var(--text-secondary);

    font-size:
        calc(var(--font-size) * 0.95);
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.chart-toolbar {
    max-width: 1600px;

    margin:
        0 auto 14px;

    padding:
        14px 16px 10px;

    background:
        var(--panel);

    border:
        1px solid var(--border-soft);

    border-radius:
        14px;

    box-shadow:
        var(--shadow);
}


.chart-toolbar-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}


.chart-toolbar-group {
    display: flex;

    align-items: flex-end;

    flex-wrap: wrap;

    gap: 10px;
}


.chart-toolbar-field {
    display: flex;

    flex-direction: column;

    gap: 6px;
}


.chart-toolbar-field label {
    color:
        var(--text-muted);

    font-size:
        calc(var(--font-size) * 0.82);

    font-weight: 600;
}


.chart-toolbar-field select,
.chart-toolbar-field input {
    height: 36px;

    padding:
        0 11px;

    border:
        1px solid var(--border);

    border-radius:
        8px;

    outline: none;

    background:
        var(--panel-soft);

    color:
        var(--text);

    font-size:
        var(--font-size);
}


.chart-toolbar-field select:focus,
.chart-toolbar-field input:focus {
    border-color:
        var(--accent);
}


#chartExchange {
    width: 120px;
}


#chartSymbol {
    width: 130px;

    text-transform:
        uppercase;
}


#chartTimeframe {
    width: 110px;
}


/* =========================================================
   RELOAD BUTTON
   ========================================================= */

/* =========================================================
   RELOAD BUTTON
   ========================================================= */

.chart-reload-button {
    width: 36px;
    height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid var(--border);

    border-radius:
        8px;

    background:
        var(--panel-soft);

    color:
        var(--text-secondary);

    font-size:
        20px;

    font-weight:
        500;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}


.chart-reload-button:hover {
    border-color:
        var(--accent);

    background:
        var(--accent-soft);

    color:
        var(--accent);
}


.chart-reload-button:active {
    transform:
        rotate(90deg);
}


/* =========================================================
   STATUS
   ========================================================= */

.chart-status {
    display: flex;

    align-items: center;

    gap: 7px;

    padding-bottom: 8px;

    color:
        var(--text-secondary);

    font-size:
        calc(var(--font-size) * 0.86);

    white-space:
        nowrap;
}


.chart-status-dot {
    width: 8px;
    height: 8px;

    border-radius:
        50%;

    background:
        var(--text-muted);
}


.chart-status-dot.connected {
    background:
        var(--success);
}


.chart-status-dot.error {
    background:
        var(--danger);
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.chart-main {
    max-width: 1600px;

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr) 230px 300px;

    gap: 14px;
}


/* =========================================================
   CHART PANEL
   ========================================================= */

.chart-panel {
    min-width: 0;

    overflow: hidden;

    background:
        var(--panel);

    border:
        1px solid var(--border-soft);

    border-radius:
        14px;

    box-shadow:
        var(--shadow);
}


.chart-panel-header {
    min-height: 66px;

    padding:
        13px 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border-bottom:
        1px solid var(--border-soft);
}


.chart-panel-title {
    font-size:
        calc(var(--font-size) * 1.15);

    font-weight: 700;
}


.chart-panel-subtitle {
    margin-top: 3px;

    color:
        var(--text-muted);

    font-size:
        calc(var(--font-size) * 0.82);
}


.chart-last-price {
    font-size:
        calc(var(--font-size) * 1.28);

    font-weight: 700;

    font-variant-numeric:
        tabular-nums;
}


/* =========================================================
   CHART
   ========================================================= */

.chart-container-wrap {
    position: relative;

    width: 100%;

    height: 560px;

    background:
        var(--panel);
}


.realtime-chart {
    width: 100%;

    height: 100%;
}


/* =========================================================
   CHART LOADING
   ========================================================= */

.chart-loading {
    position: absolute;

    inset: 0;

    z-index: 10;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 12px;

    background:
        var(--panel);

    color:
        var(--text-secondary);
}


.chart-loading-spinner {
    width: 28px;
    height: 28px;

    border:
        3px solid var(--border);

    border-top-color:
        var(--accent);

    border-radius:
        50%;

    animation:
        chart-spin 0.8s linear infinite;
}


@keyframes chart-spin {

    to {
        transform:
            rotate(360deg);
    }

}


/* =========================================================
   SIGNAL PANEL
   ========================================================= */

.signal-panel {
    min-width: 0;

    height: 628px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    background:
        var(--panel);

    border:
        1px solid var(--border-soft);

    border-radius:
        14px;

    box-shadow:
        var(--shadow);
}


.signal-panel-header {
    flex-shrink: 0;

    min-height: 66px;

    padding:
        14px 16px;

    border-bottom:
        1px solid var(--border-soft);
}


.signal-panel-title {
    font-size:
        calc(var(--font-size) * 1.05);

    font-weight: 700;
}


.signal-panel-description {
    margin-top: 3px;

    color:
        var(--text-muted);

    font-size:
        calc(var(--font-size) * 0.8);
}


.signal-list {
    flex: 1;

    min-height: 0;

    overflow-y: auto;
}


.signal-empty {
    height: 100%;

    min-height: 250px;

    padding: 30px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}


.signal-empty-icon {
    margin-bottom: 12px;

    color:
        var(--text-muted);

    font-size:
        calc(var(--font-size) * 2);
}


.signal-empty-title {
    font-weight: 650;

    color:
        var(--text-secondary);
}


.signal-empty-description {
    max-width: 230px;

    margin-top: 6px;

    color:
        var(--text-muted);

    font-size:
        calc(var(--font-size) * 0.82);

    line-height: 1.5;
}


/* =========================================================
   STRATEGY PANEL
   ========================================================= */

.chart-strategy-panel {
    max-width: 1600px;

    margin:
        14px auto 0;

    overflow: hidden;

    background:
        var(--panel);

    border:
        1px solid var(--border-soft);

    border-radius:
        14px;

    box-shadow:
        var(--shadow);
}


.chart-strategy-header {
    padding:
        17px 18px 14px;

    border-bottom:
        1px solid var(--border-soft);
}


.chart-strategy-title {
    font-size:
        calc(var(--font-size) * 1.05);

    font-weight: 700;
}


.chart-strategy-description {
    margin-top: 4px;

    color:
        var(--text-muted);

    font-size:
        calc(var(--font-size) * 0.82);
}

.chart-setting-notice {
    display: inline-block;

    margin-left: 6px;
    padding: 4px 8px;

    font-weight: 600;

    color: #b45309;
    background: rgba(245, 158, 11, 0.10);

    border: 1px solid rgba(245, 158, 11, 0.22);
    border-radius: 6px;
}

body.dark .chart-setting-notice {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.20);
}


.chart-strategy-grid {
    padding:
        16px 18px 18px;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;
}


.chart-strategy-field {
    display: flex;

    flex-direction: column;

    gap: 6px;
}


.chart-strategy-field label {
    color:
        var(--text-secondary);

    font-size:
        calc(var(--font-size) * 0.85);

    font-weight: 600;
}


.chart-strategy-value {
    width: 100%;
    min-height: 38px;

    padding: 0 10px;

    display: flex;
    align-items: center;

    box-sizing: border-box;

    border:
        1px solid var(--border);

    border-radius:
        8px;

    background:
        var(--panel-soft);

    color:
        var(--text);

    font-size:
        var(--font-size);

    font-weight:
        600;

    overflow:
        hidden;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .chart-main {
        grid-template-columns:
            1fr;
    }


    /*
     * 모바일 / 태블릿에서는
     * TOP50이 페이지 전체를 너무 길게 차지하지 않도록
     * 내부 스크롤 사용
     */

    .market-panel {
        height:
            300px;
    }


    .signal-panel {
        height:
            320px;
    }


    .chart-strategy-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 700px) {

    .chart-page {
        padding:
            20px 14px 50px;
    }


    .chart-toolbar {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .chart-status {
        padding-bottom: 0;
    }


    .chart-container-wrap {
        height: 440px;
    }


    .chart-strategy-grid {
        grid-template-columns:
            1fr;
    }



    .chart-toolbar-top {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .chart-toolbar-group {
        width: 100%;

        display: grid;

        grid-template-columns:
            max-content max-content;

        justify-content: start;
        align-items: end;

        gap: 10px;
    }

    .chart-realtime-control {
        width: 100%;
        align-items: flex-end;
    }
    
    .chart-realtime-control .chart-status {
        width: auto;
        justify-content: flex-end;
    }
    
    .chart-realtime-toggle-button {
        width: auto;
    }

    /* 페이지 상단 안내 + 전략 상태 */
    .chart-page-description {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }


    /* 안내문 */
    .chart-setting-notice {
        width: 100%;
        margin-left: 0;
        box-sizing: border-box;

        line-height: 1.45;
    }


    /* 전략 상태 */
    .chart-strategy-status {
        width: 100%;

        justify-content: flex-start;

        flex-wrap: wrap;

        gap: 5px 10px;
    }


    .chart-watch-area {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .chart-watch-label {
        width: 100%;
    }
    
    .chart-watch-symbols {
        width: 100%;
    }



    .chart-toolbar-field {
        min-width: 0;
    }
    
    .chart-toolbar-field select {
        width: 100%;
        box-sizing: border-box;
    }
    
    .chart-symbol-input-row {
        width: 100%;
    }
    
    .chart-symbol-input-row input {
        flex: 1;
        width: 0;
    }
    
    .chart-symbol-field {
        min-width: 0;
    }
}






/* =========================================================
   SIGNAL ITEMS
   ========================================================= */

.signal-item {
    cursor: pointer;

    padding: 13px 14px;

    border-bottom:
        1px solid var(--border-soft);

    background:
        var(--panel);

    transition:
        background 0.15s ease;
}


.signal-item:last-child {
    border-bottom: none;
}


.signal-item:hover {
    background:
        var(--panel-soft);
}


.signal-item-top {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 7px;
}


.signal-item-badge {
    padding: 3px 7px;

    border-radius: 6px;

    font-size:
        calc(var(--font-size) * 0.72);

    font-weight: 750;
}


.signal-item-time {
    color:
        var(--text-muted);

    font-size:
        calc(var(--font-size) * 0.75);
}


.signal-item-title {
    color:
        var(--text);

    font-size:
        calc(var(--font-size) * 0.9);

    font-weight: 650;
}


.signal-item-price {
    margin-top: 5px;

    color:
        var(--text-secondary);

    font-size:
        calc(var(--font-size) * 0.78);
}



/* =========================================================
   신호 알림 상태
   ========================================================= */

.signal-item-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}


.signal-item-alerts {
    display: flex;
    align-items: center;
    gap: 4px;
}


.signal-alert-badge {
    padding: 2px 5px;

    border:
        1px solid var(--border);

    border-radius: 5px;

    background:
        var(--panel-soft);

    color:
        var(--text-muted);

    font-size:
        calc(var(--font-size) * 0.65);

    font-weight: 650;

    line-height: 1.2;

    white-space: nowrap;
}


/* ON */

.signal-alert-badge.active {
    border-color:
        rgba(34, 171, 148, 0.35);

    background:
        rgba(34, 171, 148, 0.12);

    color:
        #22ab94;
}


/* LONG 진입 */

.signal-long-entry .signal-item-badge {

    background: #dcfce7;

    color: #15803d;

    border:
        1px solid #86efac;
}


/* LONG 청산 */

.signal-long-exit .signal-item-badge {

    background: #dbeafe;

    color: #1d4ed8;

    border:
        1px solid #93c5fd;
}


/* SHORT 진입 */

.signal-short-entry .signal-item-badge {

    background: #fee2e2;

    color: #dc2626;

    border:
        1px solid #fca5a5;
}


/* SHORT 청산 */

.signal-short-exit .signal-item-badge {

    background: #ffedd5;

    color: #c2410c;

    border:
        1px solid #fdba74;
}

/* LONG 추가 진입 */

.signal-long-pyramiding .signal-item-badge {
    background: #ecfdf5;
    color: #16a34a;

    border:
        1px solid #bbf7d0;
}


/* SHORT 추가 진입 */

.signal-short-pyramiding .signal-item-badge {
    background: #fff1f2;
    color: #ef4444;

    border:
        1px solid #fecaca;
}

/* LONG 추가 진입 */

.signal-item.signal-long-pyramiding.signal-new {
    background: #16a34a !important;
}


/* SHORT 추가 진입 */

.signal-item.signal-short-pyramiding.signal-new {
    background: #ef4444 !important;
}


.signal-long-pyramiding .signal-item-title {
    color: #16a34a;
}


.signal-short-pyramiding .signal-item-title {
    color: #ef4444;
}

.signal-long-entry .signal-item-title {
    color: #15803d;
}

.signal-long-exit .signal-item-title {
    color: #2563eb;
}

.signal-short-entry .signal-item-title {
    color: #dc2626;
}

.signal-short-exit .signal-item-title {
    color: #ea580c;
}


/* 방금 발생한 신호 */
/* =========================================================
   방금 발생한 신호
   ========================================================= */

.signal-item.signal-new {
    transition:
        background 0.5s ease,
        color 0.5s ease;
}


/* LONG 진입 */

.signal-item.signal-long-entry.signal-new {
    background: #15803d !important;
}


/* LONG 청산 */

.signal-item.signal-long-exit.signal-new {
    background: #2563eb !important;
}


/* SHORT 진입 */

.signal-item.signal-short-entry.signal-new {
    background: #dc2626 !important;
}


/* SHORT 청산 */

.signal-item.signal-short-exit.signal-new {
    background: #ea580c !important;
}


/* 새 신호의 일반 텍스트 */

.signal-item.signal-new .signal-item-time,
.signal-item.signal-new .signal-item-title,
.signal-item.signal-new .signal-item-price {
    color: #ffffff !important;
}

.signal-item.signal-new .signal-item-badge {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.92) !important;
}




/* =========================================================
   FREE PLAN - SIGNAL
   ========================================================= */


/*
 * FREE 신호 상세내용 블러
 */
.signal-item.signal-free .signal-item-badge,

.signal-item.signal-free .signal-item-title,

.signal-item.signal-free .signal-item-price {

    filter: blur(5px);

    user-select: none;
}


/*
  * FREE에서는 신호 종류별 색상 제거
  */
.signal-item.signal-free .signal-item-badge {

    background: #fee2e2 !important;

    color: #dc2626 !important;

    border:
        1px solid #fca5a5 !important;
}


.signal-item.signal-free .signal-item-title {

    color:
        var(--text) !important;
}


/*
  * FREE - 최근 60초 신호
  *
  * LONG / SHORT 관계없이
  * 모두 동일한 빨간색
  */
.signal-item.signal-free.signal-new {

    background:
        #dc2626 !important;
}


/*
  * 최근 신호 안의 글자
  */
.signal-item.signal-free.signal-new .signal-item-time,

.signal-item.signal-free.signal-new .signal-item-title,

.signal-item.signal-free.signal-new .signal-item-price {

    color:
        #ffffff !important;
}




/* =========================================================
   감시 종목
   ========================================================= */

.chart-symbol-input-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chart-symbol-input-row input {
    min-width: 0;
}

.chart-symbol-add-button {
    height: 36px;
    padding: 0 13px;

    border:
        1px solid var(--border);

    border-radius: 8px;

    background:
        var(--panel-soft);

    color:
        var(--text);

    font-size:
        var(--font-size);

    font-weight: 600;

    cursor: pointer;

    white-space: nowrap;
}

.chart-symbol-add-button:hover {
    border-color:
        var(--accent);

    color:
        var(--accent);
}


/* 감시 종목 영역 */

.chart-watch-area {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 10px;
    padding-top: 9px;

    border-top:
        1px solid var(--border-soft);
}

.chart-watch-label {
    flex-shrink: 0;

    color:
        var(--text-secondary);

    font-size:
        12px;

    font-weight: 600;
}

.chart-watch-symbols {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;
}


/* 종목 칩 */

.chart-watch-chip {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    height: 30px;

    padding:
        0 8px 0 11px;

    border:
        1px solid var(--border);

    border-radius:
        999px;

    background:
        var(--panel-soft);

    color:
        var(--text);

    font-size:
        12px;

    font-weight:
        600;

    cursor:
        pointer;

    transition:
        0.15s ease;
}

.chart-watch-chip:hover {
    border-color:
        var(--accent);
}

.chart-watch-chip.selected {
    border-color:
        var(--accent);

    color:
        var(--accent);
}


/* X */

.chart-watch-chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    border-radius:
        50%;

    font-size:
        16px;

    font-weight:
        400;

    line-height:
        1;

    opacity:
        0.55;
}

.chart-watch-chip-remove:hover {
    background:
        rgba(0, 0, 0, 0.08);

    opacity:
        1;
}



/* =========================================================
   MARKET TOP 50
   ========================================================= */

.market-panel {
    min-width: 0;

    height: 628px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background:
        var(--panel);

    border:
        1px solid var(--border-soft);

    border-radius:
        14px;

    box-shadow:
        var(--shadow);
}


/* 헤더 */

.market-panel-header {
    flex-shrink: 0;

    min-height: 66px;

    padding:
        14px 14px;

    box-sizing:
        border-box;

    border-bottom:
        1px solid var(--border-soft);
}


.market-panel-title {
    font-size:
        calc(var(--font-size) * 1.0);

    font-weight:
        700;
}


.market-panel-description {
    margin-top:
        3px;

    color:
        var(--text-muted);

    font-size:
        calc(var(--font-size) * 0.75);

    white-space:
        nowrap;
}


/* 목록 */

.market-top-list {
    flex:
        1;

    min-height:
        0;

    overflow-y:
        auto;

    scrollbar-width:
        thin;
}


/* 로딩 */

.market-top-loading {
    padding:
        30px 12px;

    color:
        var(--text-muted);

    font-size:
        calc(var(--font-size) * 0.82);

    text-align:
        center;
}


/* 한 종목 */

.market-top-item {
    min-height:
        42px;

    padding:
        0 10px;

    display:
        grid;

    grid-template-columns:
        26px minmax(0, 1fr) 58px 28px;

    align-items:
        center;

    gap:
        5px;

    box-sizing:
        border-box;

    border-bottom:
        1px solid var(--border-soft);

    transition:
        background 0.15s ease;
}


.market-top-item:hover {
    background:
        var(--panel-soft);
}


/* 순위 */

.market-top-rank {
    color:
        var(--text-muted);

    font-size:
        11px;

    font-variant-numeric:
        tabular-nums;
}


/* 종목 */

.market-top-symbol {
    min-width:
        0;

    overflow:
        hidden;

    color:
        var(--text);

    font-size:
        12px;

    font-weight:
        650;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

    cursor: pointer;
}


/* 등락률 */

.market-top-change {
    text-align:
        right;

    font-size:
        12px;

    font-weight:
        650;

    font-variant-numeric:
        tabular-nums;

    white-space:
        nowrap;
}


.market-top-change.positive {
    color:
        var(--success);
}


.market-top-change.negative {
    color:
        var(--danger);
}


.market-top-change.neutral {
    color:
        var(--text-muted);
}


/* 감시 종목 추가 */

.market-top-add {
    width:
        26px;

    height:
        26px;

    padding:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid var(--border);

    border-radius:
        6px;

    background:
        var(--panel-soft);

    color:
        var(--text-secondary);

    font-size:
        17px;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        0.15s ease;
}


.market-top-add:hover {
    border-color:
        var(--accent);

    color:
        var(--accent);

    background:
        var(--accent-soft);
}


/* 이미 감시 중 */

.market-top-add.active {
    border-color:
        var(--accent);

    color:
        var(--accent);

    background:
        var(--accent-soft);

    cursor:
        default;
}





/* 잠긴 감시 종목 */

.chart-watch-chip.locked {
    color:
        var(--text-muted);

    border-color:
        var(--border-soft);

    background:
        var(--panel-soft);
}


.chart-watch-chip.locked:hover {
    color:
        var(--text-secondary);

    border-color:
        var(--border);
}


.chart-watch-chip-lock {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        11px;

    line-height:
        1;

    opacity:
        0.65;
}


.strategy-disabled {
    color: #dc2626 !important;
}



.chart-realtime-toggle-button {
    width: auto;
    height: 36px;

    padding: 0 14px;

    border: 1px solid #22c55e;
    border-radius: 8px;

    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;

    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;
    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.chart-realtime-toggle-button:hover {
    background: rgba(34, 197, 94, 0.20);
}

.chart-realtime-toggle-button.active {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.chart-realtime-toggle-button.active:hover {
    background: rgba(239, 68, 68, 0.20);
}


.chart-realtime-control {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.chart-realtime-control .chart-status {
    padding-bottom: 0;
}




/* =========================================================
   전략 설정 상태
   ========================================================= */

.chart-strategy-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;

    gap:
        4px 12px;

    flex-shrink: 0;

    color:
        var(--text-secondary);

    font-size:
        calc(var(--font-size) * 0.78);
}


.chart-strategy-status-item {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    white-space: nowrap;
}


.chart-strategy-status-dot {
    width: 7px;
    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--border);
}


.chart-strategy-status-dot.active {
    background:
        var(--success);
}



.signal-item-time-blur {
    filter: blur(4px);
    user-select: none;
}


.market-panel-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.market-rank-refresh-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;
    padding: 0;

    border: 0;
    background: transparent;

    color: var(--text-muted);
    font-size: 17px;
    line-height: 1;

    cursor: pointer;

    border-radius: 5px;

    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}

.market-rank-refresh-button:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.market-rank-refresh-button:active {
    transform: rotate(90deg);
}




.chart-axis-controls {
    position: absolute;

    right: 4px;
    bottom: 4px;

    z-index: 20;

    display: flex;
    gap: 3px;
}


.chart-axis-button {
    width: 25px;
    height: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid var(--border);
    border-radius: 5px;

    background: var(--panel-soft);
    color: var(--text-secondary);

    font-size: 12px;
    font-weight: 650;

    cursor: pointer;
}


.chart-axis-button:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}


.signal-item-delay-warning {
    margin-top: 6px;
    color: #dc2626;
    font-size: 12px;
    font-weight: 600;
}
/* ===== Chart indicator chips / modal ===== */
.chart-indicator-heading { min-width:0; flex:1; }
.chart-indicator-row { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:9px; }
.chart-indicator-chips { display:flex; flex-wrap:wrap; gap:6px; }
.chart-indicator-chip, .chart-indicator-add { display:inline-flex; align-items:center; gap:7px; min-height:26px; padding:3px 9px; border-radius:999px; border:1px solid var(--border-soft); background:var(--panel-soft); color:var(--text); font-size:calc(var(--font-size)*.83); cursor:pointer; }
.chart-indicator-chip-dot { width:8px; height:8px; border-radius:50%; flex:none; }
.chart-indicator-chip-remove { border:0; background:none; color:var(--text-muted); cursor:pointer; padding:0 2px; font-size:15px; }
.chart-indicator-add { border-style:dashed; color:var(--accent); }
.chart-indicator-modal[hidden] { display:none !important; }
.chart-indicator-modal { position:fixed; inset:0; z-index:11000; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:16px; }
.chart-indicator-dialog { width:min(100%,390px); max-height:min(85dvh,700px); overflow-y:auto; background:var(--panel); color:var(--text); border:1px solid var(--border-soft); border-radius:14px; padding:18px; box-shadow:0 16px 60px rgba(0,0,0,.2); }
.chart-indicator-dialog-head, .chart-indicator-dialog-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.chart-indicator-dialog-head button { background:none; border:0; color:var(--text); cursor:pointer; font-size:18px; }
.chart-indicator-form { display:flex; flex-direction:column; gap:9px; margin:18px 0; }
.chart-indicator-form label { display:block; font-size:calc(var(--font-size)*.87); color:var(--text-secondary); margin-bottom:5px; }
.chart-indicator-form select, .chart-indicator-form input[type=number] { width:100%; min-height:36px; padding:6px 10px; border:1px solid var(--border); border-radius:8px; color:var(--text); background:var(--panel-soft); }
.chart-indicator-form input[type=color] { width:56px; height:34px; border:1px solid var(--border); border-radius:6px; background:var(--panel-soft); cursor:pointer; }
.chart-indicator-param { margin-top:10px; }
.chart-indicator-dialog-actions { justify-content:flex-end; }
.chart-indicator-dialog-actions button { padding:8px 14px; border:1px solid var(--border); border-radius:8px; background:var(--panel-soft); color:var(--text); cursor:pointer; }
#chartIndicatorSaveButton { background:var(--accent); color:var(--panel); border-color:var(--accent); }
@media (max-width:650px) { .chart-panel-header { align-items:flex-start; gap:8px; } .chart-last-price { white-space:nowrap; } }


.chart-toolbar-field label.candle-high-load {
    color: #f59e0b;
    font-weight: 700;
}

.chart-toolbar-field label.candle-very-high-load {
    color: #ef4444;
    font-weight: 700;
}

/* Chart warnings: one line, auto-hide, rotate messages in JS */
.chart-warning-bar[hidden] { display: none !important; }
.chart-warning-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-top: 10px;
    padding: 8px 11px;
    border: 1px solid rgba(239, 68, 68, .35);
    border-radius: 8px;
    background: rgba(239, 68, 68, .08);
    color: #dc2626;
    font-size: calc(var(--font-size) * .88);
    font-weight: 650;
}
body.dark .chart-warning-bar { color: #fca5a5; background: rgba(239,68,68,.12); }
.chart-warning-icon { flex-shrink: 0; }
.chart-warning-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =========================================================
   CHART HEADER: fixed two-row layout / fixed chart height
   ========================================================= */
.chart-panel {
    height: 628px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.chart-panel-header {
    min-height: 68px;
    height: auto;
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 7px 14px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 5px;
}
.chart-panel-first-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}
.chart-panel-identity {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 9px;
    min-width: 0;
}
.chart-panel-title { flex: 0 0 auto; white-space: nowrap; }
.chart-panel-subtitle {
    margin-top: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chart-panel-first-row .chart-last-price {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: calc(var(--font-size) * 1.12);
}
.chart-panel-header .chart-indicator-row {
    margin-top: 0;
    min-height: 26px;
    min-width: 0;
    flex-wrap: wrap;
    overflow: visible;
}
.chart-panel-header .chart-indicator-chips {
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: wrap;
}
.chart-panel-header .chart-indicator-chip,
.chart-panel-header .chart-indicator-add { flex: 0 0 auto; white-space: nowrap; }
.chart-panel .chart-container-wrap {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow: hidden;
}



/* 실시간 차트 하단 안내 */

.chart-disclaimer {
    max-width: 1600px;
    margin: 10px auto 0;
    padding: 12px 16px;

    box-sizing: border-box;

    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: 10px;

    color: var(--text-muted);
    font-size: calc(var(--font-size) * 0.78);
    line-height: 1.65;
}

.chart-disclaimer-title {
    margin-bottom: 5px;

    color: var(--text-secondary);
    font-weight: 650;
}

.chart-disclaimer-content p {
    margin: 2px 0;
}

@media (max-width: 1100px) {
    .chart-panel { height: 628px; }
}
@media (max-width: 700px) {
    .chart-panel { height: 508px; }
    .chart-panel-header { padding: 7px 10px; }
    .chart-panel-identity { gap: 6px; }
    .chart-panel-title { font-size: var(--font-size); }
    .chart-panel-subtitle { font-size: calc(var(--font-size) * .75); }
    .chart-panel-first-row .chart-last-price { font-size: var(--font-size); }
}