/* =========================================================
   BACKTEST PAGE
   ========================================================= */

   .backtest-page {
    height: calc(100vh - 60px);
    overflow-y: auto;

    padding: 28px;

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


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

.backtest-header {
    max-width: 1500px;

    margin: 0 auto 22px;
}

.backtest-title {
    font-size: calc(var(--font-size) * 1.65);
    font-weight: 750;

    letter-spacing: -0.6px;
}

.backtest-description {
    margin-top: 6px;

    color: var(--text-secondary);

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


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

   .backtest-layout {
    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(420px, 520px)
        minmax(500px, 1fr);

    gap: 20px;

    align-items: stretch;
}


/* =========================================================
   LEFT SETTINGS
   ========================================================= */

.backtest-settings {
    display: flex;
    flex-direction: column;

    gap: 14px;
    align-self: stretch;
}


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

.backtest-panel {
    padding: 18px;

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

    background: var(--panel);

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

.backtest-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 16px;
}

.backtest-panel-title {
    font-size: calc(var(--font-size) * 1.08);
    font-weight: 700;

    color: var(--text);
}

.backtest-panel-description {
    margin-top: 4px;

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

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


/* =========================================================
   FORM
   ========================================================= */

.backtest-form-grid {
    display: grid;

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

    gap: 13px;
}

.backtest-form-group {
    display: flex;
    flex-direction: column;

    gap: 6px;
}

.backtest-form-group label {
    color: var(--text-secondary);

    font-size: calc(var(--font-size) * 0.9);
    font-weight: 600;
}

.backtest-form-group input,
.backtest-form-group select {
    width: 100%;
    height: 38px;

    padding: 0 10px;

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

    outline: none;

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

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

.backtest-form-group input:focus,
.backtest-form-group select:focus {
    border-color: var(--accent);

    box-shadow:
        0 0 0 3px var(--accent-soft);

    background: var(--panel);
}


/* =========================================================
   STRATEGY LIST
   ========================================================= */

.backtest-strategy-list {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.backtest-strategy-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    min-height: 66px;

    padding: 10px 12px;

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

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

.backtest-strategy-info {
    width: 125px;
    flex-shrink: 0;

    display: flex;
    align-items: center;

    gap: 10px;
}

.backtest-strategy-name {
    font-size: var(--font-size);
    font-weight: 650;

    color: var(--text);
}

.backtest-strategy-help {
    margin-top: 3px;

    color: var(--text-muted);

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


/* 전략 선택박스 */

.backtest-strategy-row select {
    flex: 1;
    min-width: 0;
    height: 38px;

    padding: 0 10px;

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

    outline: none;

    background: var(--panel);
    color: var(--text);
}

.backtest-strategy-row select:focus {
    border-color: var(--accent);
}


/* 종목 대문자 */

#backtestSymbol {
    text-transform: uppercase;
}

/* =========================================================
   LONG / SHORT BADGE
   ========================================================= */

.strategy-direction {
    min-width: 52px;

    padding: 4px 7px;

    border-radius: 7px;

    text-align: center;

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

    letter-spacing: 0.2px;
}


/* LONG - 기존 파스텔 블루 */

.strategy-direction.long {
    background: var(--card-blue-bg);

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

    color: var(--card-blue-accent);
}


/* SHORT - 기존 파스텔 레드 */

.strategy-direction.short {
    background: var(--card-red-bg);

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

    color: var(--card-red-accent);
}


/* =========================================================
   RUN BUTTON
   ========================================================= */

.backtest-run-area {
    padding-top: 2px;
}

.backtest-run-button {
    width: 100%;
    height: 46px;

    border: 1px solid var(--card-blue-border);
    border-radius: 11px;

    background: var(--card-blue-bg);
    color: var(--card-blue-accent);

    font-size: calc(var(--font-size) * 1.02);
    font-weight: 700;

    cursor: pointer;

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

.backtest-run-button:hover {
    border-color: var(--card-blue-accent);

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

.backtest-run-button:active {
    transform: scale(0.99);
}


/* =========================================================
   RIGHT RESULT AREA
   ========================================================= */

.backtest-results {
    min-height: 600px;

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

    background: var(--panel);

    box-shadow: var(--shadow);

    overflow: hidden;
}


/* =========================================================
   EMPTY RESULT
   ========================================================= */

.backtest-empty-result {
    min-height: 600px;

    display: flex;
    flex-direction: column;

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

    padding: 40px;

    text-align: center;
}

.backtest-empty-icon {
    display: flex;

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

    width: 66px;
    height: 66px;

    margin-bottom: 16px;

    border-radius: 18px;

    background: var(--card-blue-bg);

    font-size: 28px;
}

.backtest-empty-title {
    font-size: calc(var(--font-size) * 1.15);
    font-weight: 700;

    color: var(--text);
}

.backtest-empty-description {
    margin-top: 7px;

    color: var(--text-muted);

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

    line-height: 1.6;
}


/* =========================================================
   RESULT CONTENT
   ========================================================= */

.backtest-result-content {
    padding: 18px;
}


/* =========================================================
   RESULT SUMMARY
   ========================================================= */

.backtest-result-summary {
    display: grid;

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

    gap: 10px;

    margin-bottom: 14px;
}

.backtest-stat-card {
    padding: 14px;

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

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

.backtest-stat-label {
    color: var(--text-muted);

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

.backtest-stat-value {
    margin-top: 6px;

    color: var(--text);

    font-size: calc(var(--font-size) * 1.3);
    font-weight: 750;
}


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

.backtest-chart-panel,
.backtest-trades-panel {
    padding: 16px;

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

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

.backtest-trades-panel {
    margin-top: 14px;
}

.backtest-result-title {
    margin-bottom: 12px;

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

    color: var(--text);
}



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

@media (max-width: 1100px) {

    .backtest-layout {
        grid-template-columns: 1fr;
    }

    .backtest-results {
        min-height: 450px;
    }

    .backtest-empty-result {
        min-height: 450px;
    }
}


@media (max-width: 700px) {

    .backtest-page {
        padding: 18px;
    }

    .backtest-form-grid {
        grid-template-columns: 1fr;
    }

    .backtest-result-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .backtest-strategy-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .backtest-strategy-row select {
        width: 100%;
    }


    .backtest-analysis-panel {
        padding: 14px;
    }

    .backtest-analysis-card {
        padding: 15px;
    }

    .backtest-analysis-chart {
        height: 220px;
    }

    #backtestEquityChart {
        height: 280px;
    }
    
}



.backtest-candle-estimate {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;

    margin-top: 12px;

    color: var(--text-muted);
    font-size: calc(var(--font-size) * 0.88);
}

.backtest-candle-estimate strong {
    color: var(--text);
    font-size: calc(var(--font-size) * 1.05);
    font-weight: 750;
}



.backtest-option-input {
    display: flex;
    align-items: center;
    gap: 10px;
}

.backtest-option-input > input[type="number"] {
    flex: 1;
    min-width: 0;
}


/* ON / OFF 스위치 */

.backtest-switch {
    position: relative;

    width: 40px;
    height: 22px;

    flex-shrink: 0;

    cursor: pointer;
}

.backtest-switch input {
    display: none;
}

.backtest-switch-slider {
    position: absolute;
    inset: 0;

    border-radius: 20px;

    background: var(--border);

    transition: 0.18s ease;
}

.backtest-switch-slider::before {
    content: "";

    position: absolute;

    width: 16px;
    height: 16px;

    left: 3px;
    top: 3px;

    border-radius: 50%;

    background: var(--panel);

    transition: 0.18s ease;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.backtest-switch input:checked
+ .backtest-switch-slider {
    background: var(--accent);
}

.backtest-switch input:checked
+ .backtest-switch-slider::before {
    transform: translateX(18px);
}

.backtest-option-input input:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}




/* =========================================================
   거래내역 테이블
   ========================================================= */

   .backtest-trade-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin-top: 14px;
}

.backtest-trade-table {
    width: 100%;

    border-collapse: collapse;

    font-size: 13px;

    table-layout: auto;
}


.backtest-trade-table th,
.backtest-trade-table td {
    white-space: normal;

    overflow-wrap: anywhere;

    word-break: keep-all;
}

.backtest-trade-table th {
    padding: 9px 10px;
    text-align: center;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
}

.backtest-trade-table td {
    padding: 8px 10px;
    text-align: center;
    border-bottom: 1px solid var(--border);
}
/* =========================================================
   거래내역 - 진입가격 자동 줄바꿈
   ========================================================= */

   .backtest-trade-table th:nth-child(3),
.backtest-trade-table td:nth-child(3) {
    min-width: 100px;
    max-width: 160px;

    white-space: normal;
    line-height: 1.55;

    overflow-wrap: anywhere;
}

/* =========================================================
   수익 거래 - 핑크
   ========================================================= */

   .backtest-trade-table tr.trade-profit td {
    background: #ffe4ec;
    color: #1d1d1f;
}


/* =========================================================
   손실 거래 - 하늘색
   ========================================================= */

.backtest-trade-table tr.trade-loss td {
    background: #e1f3ff;
    color: #1d1d1f;
}


/* =========================================================
   본전 거래
   ========================================================= */

.backtest-trade-table tr.trade-even td {
    background: #f5f5f5;
    color: #1d1d1f;
}


/* =========================================================
   LONG / SHORT는 행 색상을 무시
   ========================================================= */

.backtest-trade-table td.trade-side-long {
    background: #dff5d2 !important;
    color: #327a2c;
    font-weight: 700;
}


.backtest-trade-table td.trade-side-short {
    background: #ffd9d9 !important;
    color: #b42323;
    font-weight: 700;
}


/* 수익률 조금 강조 */
.backtest-trade-table .trade-return {
    font-weight: 700;
}


/* 거래 없음 */
.backtest-no-trades {
    padding: 30px !important;
    text-align: center !important;
}




/* =========================================================
   날짜 변경 버튼
   ========================================================= */
.backtest-period-quick {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.backtest-period-quick button {
    padding: 6px 12px;

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

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

    font-size: 13px;
    cursor: pointer;
}

.backtest-period-quick button:hover {
    border-color: #3b82f6;
    color: #2563eb;
}




/* =========================================================
   백테스트 로딩
   ========================================================= */

   .backtest-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 24px 16px;

    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}

.backtest-loading-spinner {
    width: 18px;
    height: 18px;

    border: 3px solid var(--border);
    border-top-color: #3b82f6;

    border-radius: 50%;

    animation:
        backtest-spin 0.8s linear infinite;
}

@keyframes backtest-spin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}



.trade-holding-time {
    margin-top: 3px;

    font-size: 11px;
    font-weight: 600;

    color: #6b7280;
}




/* =========================================================
   백테스트 분석
   ========================================================= */



.backtest-analysis-panel {
    margin-top: 14px;
    padding: 16px;

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

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


.backtest-analysis-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}


.backtest-analysis-card {
    padding: 18px;

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

    background: var(--panel);
}


.backtest-analysis-title {
    font-size: calc(var(--font-size) * 1);
    font-weight: 700;

    color: var(--text);
}


.backtest-analysis-description {
    margin-top: 5px;
    margin-bottom: 18px;

    font-size: calc(var(--font-size) * 0.82);
    line-height: 1.5;

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


.backtest-analysis-chart {
    position: relative;

    width: 100%;
    height: 260px;
}


/* 누적 자산 변화만 크게 */
#backtestEquityChart {
    height: 340px;
}




/* =========================================================
   백테스트 전략 분석
   ========================================================= */

   .backtest-analysis-panel {
    margin-top: 18px;
    padding: 18px;

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

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


/* 전략 분석 메인 제목 */
.backtest-analysis-panel > .backtest-result-title {
    position: relative;

    margin-bottom: 18px;
    padding-left: 12px;

    font-size: calc(var(--font-size) * 1.08);
    font-weight: 750;

    color: var(--text);

    letter-spacing: -0.2px;
}


/* 제목 왼쪽 포인트 바 */
.backtest-analysis-panel > .backtest-result-title::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 3px;
    height: 18px;

    border-radius: 3px;

    background: var(--accent);

    transform: translateY(-50%);
}


/* 그래프 목록 */
.backtest-analysis-grid {
    display: grid;
    grid-template-columns: 1fr;

    gap: 16px;
}


/* 개별 그래프 카드 */
.backtest-analysis-card {
    padding: 18px 20px 20px;

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

    background: var(--panel);

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}


/* 그래프 제목 */
.backtest-analysis-title {
    font-size: calc(var(--font-size) * 0.98);
    font-weight: 700;

    line-height: 1.4;

    color: var(--text);

    letter-spacing: -0.15px;
}


/* 그래프 설명 */
.backtest-analysis-description {
    margin-top: 5px;
    margin-bottom: 18px;

    font-size: calc(var(--font-size) * 0.80);
    font-weight: 400;

    line-height: 1.5;

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


/* 실제 그래프 영역 */
.backtest-analysis-chart {
    position: relative;

    width: 100%;
    height: 260px;

    padding-top: 4px;
}




.backtest-results,
.backtest-result-content,
.backtest-analysis-panel,
.backtest-analysis-grid,
.backtest-analysis-card,
.backtest-analysis-chart {
    min-width: 0;
}


.backtest-analysis-chart canvas {
    display: block;

    width: 100% !important;
    max-width: 100% !important;

    height: 100% !important;
}

/* 누적 자산 변화만 크게 */
#backtestEquityChart {
    height: 340px;
}



.trade-index {
    width: 38px;
    min-width: 38px;

    text-align: center;

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

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





.backtest-score-badge {
    display: inline-flex;
    align-items: center;

    margin-left: 5px;
    padding: 2px 6px;

    border-radius: 5px;

    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;

    letter-spacing: 0.4px;

    vertical-align: middle;
}


/* GOOD */
.backtest-score-badge.good {
    color: #ffffff;
    background: #22ab94;
}


/* GREAT */
.backtest-score-badge.great {
    color: #ffffff;
    background: #e58a45;
}


/* AMAZING */
.backtest-score-badge.amazing {
    color: #ffffff;
    background: #e2557d;
}


.backtest-score-badge[hidden] {
    display: none;
}

.backtest-stat-label {
    display: flex;
    align-items: center;
    gap: 5px;
}





.backtest-analysis-lock {
    position: relative;
}





/* 잠금 안내 */
.backtest-analysis-locked {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(
        -50%,
        -50%
    );

    z-index: 10;

    padding: 14px 20px;

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

    background: var(--panel);

    text-align: center;

    box-shadow:
        0 6px 20px
        rgba(0, 0, 0, 0.12);
}


.backtest-analysis-locked-title {
    font-size: 14px;
    font-weight: 700;

    color: var(--text);
}


.backtest-analysis-locked-description {
    margin-top: 4px;

    font-size: 12px;

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



.backtest-stat-previous {
    margin-top: 6px;
    font-size: 12px;
    opacity: 0.7;
    min-height: 18px;
}



.backtest-strategy-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px 12px;

    margin-top: 4px;

    font-size: 11px;
    color: var(--text-secondary);
}


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

    gap: 5px;
}


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

    border-radius: 50%;

    background: var(--border);
}


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



/* =========================================================
   날짜 INPUT - 달력 아이콘
   ========================================================= */

/* 라이트 모드 */
.backtest-form-group input[type="date"] {
    color-scheme: light;
}


/* 다크 모드 */
body.dark
.backtest-form-group input[type="date"] {
    color-scheme: dark;
}




/* =========================================================
   세부 거래 내역
   ========================================================= */
   .backtest-trades-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 12px;
}

.backtest-trades-header
.backtest-result-title {
    margin-bottom: 0;
}

.backtest-detail-button {
    flex-shrink: 0;

    padding: 6px 12px;

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

    border-radius: 7px;

    background:
        var(--panel);

    color:
        var(--text-secondary);

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

    font-weight: 600;

    cursor: pointer;
}

.backtest-detail-button:hover {
    border-color:
        var(--accent);

    color:
        var(--accent);
}



/* =========================================================
   버튼용 스피너
   ========================================================= */
.backtest-run-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.backtest-run-spinner {
    width: 16px;
    height: 16px;

    border: 2px solid currentColor;
    border-right-color: transparent;

    border-radius: 50%;

    animation:
        backtest-run-spin 0.7s linear infinite;
}

@keyframes backtest-run-spin {
    to {
        transform: rotate(360deg);
    }
}












/* =========================================================================================
   개인 백테스트 기록 경신 배너
   ======================================================================================= */

   .backtest-record-break-banner {

    position: fixed;

    top: 18px;
    left: 50%;

    width: min(
        430px,
        calc(100vw - 32px)
    );

    transform:
        translate(
            -50%,
            -140%
        );

    opacity: 0;

    z-index: 10000;

    pointer-events: none;

    transition:
        transform 0.5s
            cubic-bezier(
                0.22,
                1,
                0.36,
                1
            ),
        opacity 0.35s ease;
}


/* 표시 */

.backtest-record-break-banner.show {

    transform:
        translate(
            -50%,
            0
        );

    opacity: 1;
}


/* 퇴장 */

.backtest-record-break-banner.hide {

    transform:
        translate(
            -50%,
            -130%
        );

    opacity: 0;
}


/* 본체 */

.record-break-content {

    position: relative;

    overflow: hidden;

    padding:
        18px
        22px
        17px;

    border:
        1px solid
        rgba(
            245,
            158,
            11,
            0.35
        );

    border-radius: 16px;

    background:
        rgba(
            255,
            255,
            255,
            0.97
        );

    box-shadow:
        0 14px 40px
        rgba(
            15,
            23,
            42,
            0.18
        );

    backdrop-filter:
        blur(12px);

    text-align: center;
}


/* 은은한 배경 효과 */

.record-break-glow {

    position: absolute;

    left: 50%;
    top: -80px;

    width: 260px;
    height: 150px;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(
                245,
                158,
                11,
                0.22
            ),
            transparent 70%
        );

    filter:
        blur(18px);

    pointer-events: none;
}


/* NEW RECORD */

.record-break-header {

    display: flex;

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

    gap: 7px;

    margin-bottom: 5px;
}


.record-break-trophy {

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

    line-height: 1;
}


.record-break-label {

    color: #d97706;

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

    font-weight: 800;

    letter-spacing: 1.4px;
}


/* 제목 */

.record-break-title {

    color: #111827;

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

    font-weight: 800;

    line-height: 1.4;
}


/* 점수 */

.record-break-score {

    margin-top: 13px;
}


.record-break-score-label {

    display: block;

    margin-bottom: 4px;

    color: #6b7280;

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

    font-weight: 600;
}


.record-break-score-values {

    display: flex;

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

    gap: 10px;

    line-height: 1;
}


.record-break-previous {

    color: #9ca3af;

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

    font-weight: 700;
}


.record-break-arrow {

    color: #9ca3af;

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


.record-break-new {

    color: #d97706;

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

    font-weight: 900;

    letter-spacing: -0.8px;
}


/* 상세 */

.record-break-details {

    margin-top: 12px;

    padding-top: 11px;

    border-top:
        1px solid #f1f5f9;

    color: #64748b;

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

    font-weight: 500;
}


/* 숫자 강조 순간 */

.record-break-new.pop {

    animation:
        recordBreakScorePop
        0.42s ease;
}


@keyframes recordBreakScorePop {

    0% {
        transform: scale(0.85);
    }

    55% {
        transform: scale(1.14);
    }

    100% {
        transform: scale(1);
    }
}





/* =========================================================
   BACKTEST TOKEN INFO
   ========================================================= */

   .backtest-token-info {
    margin-top: 8px;

    text-align: center;

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

    line-height: 1.55;
}


.backtest-token-estimate {
    min-height: 20px;

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


.backtest-free-period {
    display: block;

    min-height: 20px;

    margin: 0 auto;
    padding: 0;

    border: 0;

    background: transparent;

    color: var(--text-muted);

    font: inherit;

    cursor: pointer;
}


.backtest-free-period:hover {
    color: var(--accent);

    text-decoration: underline;
}


.backtest-free-period[hidden] {
    display: none;
}



/* ==========================================
   백테스트 이용 안내
   ========================================== */

   .backtest-disclaimer {
    margin-top: 14px;
    padding: 12px 16px;

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

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

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

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

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

.backtest-disclaimer-content p {
    margin: 3px 0;
}



/* 모바일 */

@media (
    max-width: 600px
) {

    .backtest-record-break-banner {

        top: 10px;

        width:
            calc(
                100vw - 20px
            );
    }


    .record-break-content {

        padding:
            16px
            18px
            15px;
    }


    .record-break-new {

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


/* ==========================================
   모바일
   ========================================== */

@media (max-width: 768px) {

    .backtest-record-panel.open {
        padding:
            14px;
    }


    .backtest-record-table {
        min-width: 520px;
    }

}



@media (max-width: 700px) {

    /* 거래내역:
       진입일시 / 청산일시 / 수익률 / 총자산만 표시 */

    .backtest-trade-table th:nth-child(1),
    .backtest-trade-table td:nth-child(1),

    .backtest-trade-table th:nth-child(3),
    .backtest-trade-table td:nth-child(3),

    .backtest-trade-table th:nth-child(5),
    .backtest-trade-table td:nth-child(5),

    .backtest-trade-table th:nth-child(8),
    .backtest-trade-table td:nth-child(8) {
        display: none;
    }


    .backtest-trade-table {
        width: 100%;

        table-layout: fixed;

        font-size: 12px;
    }


    .backtest-trade-table th,
    .backtest-trade-table td {
        padding: 8px 5px;

        white-space: normal;

        overflow-wrap: anywhere;
    }


    /* 진입일시 */
    .backtest-trade-table th:nth-child(2),
    .backtest-trade-table td:nth-child(2) {
        width: 30%;
    }


    /* 청산일시 */
    .backtest-trade-table th:nth-child(4),
    .backtest-trade-table td:nth-child(4) {
        width: 30%;
    }


    /* 수익률 */
    .backtest-trade-table th:nth-child(6),
    .backtest-trade-table td:nth-child(6) {
        width: 20%;
    }


    /* 총자산 */
    .backtest-trade-table th:nth-child(7),
    .backtest-trade-table td:nth-child(7) {
        width: 20%;
    }
}