.market-box{
 font-family: 'Noto Sans KR', sans-serif;
    margin:15px 0 15px 0;
}

.market-title{
    font-size:18px;
    font-weight:700;
    margin-bottom:12px;
}

.market-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:10px;
}

.market-card{
    background:#fafafa;
    border-radius:8px;
    padding:13px;
}

.market-name{
    font-size:13px;
    color:#555;
    margin-bottom:6px;
}

.market-price{
    font-size:20px;
    font-weight:800;
    color:#111;
}

.market-change{
    font-size:13px;
    margin-top:5px;
    font-weight:600;
}

.market-up{
    color:#fff;
}

.market-down{
    color:#fff;
}

.market-flat{
    color:#666;
}

.market-card{
    cursor:pointer;
}

.stock-detail-box{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:8px;
    padding:16px;
    margin:15px 0;
}

.stock-detail-title{
    font-size:17px;
    font-weight:700;
    margin-bottom:12px;
}

.stock-table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
}

.stock-table th,
.stock-table td{
    padding:10px 8px;
    border-bottom:1px solid #eee;
    text-align:right;
}

.stock-table th:first-child,
.stock-table td:first-child{
    text-align:left;
}

.stock-table th{
    background:#f8f9fa;
    color:#555;
    font-weight:700;
}

.stock-loading{
    padding:15px;
    color:#777;
}

.stock-detail-box{
    display:none;
}


.stock-list{
 font-family: 'Noto Sans KR', sans-serif;
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:12px;
}


.stock-item{
    background:#fff;
    border-radius:8px;
    padding:14px;
    transition:.15s;
}

.stock-item.market-up{
    background:linear-gradient(
        90deg,
        #b40c2f 0%,
        #8a0a24 35%,
        #4d0614 70%,
        #111111 100%
    );


}

.stock-item.market-up,
.stock-item.market-down{
    color:#fff;
}

.stock-item.market-up .stock-name,
.stock-item.market-up .stock-price,
.stock-item.market-up .stock-info strong,
.stock-item.market-down .stock-name,
.stock-item.market-down .stock-price,
.stock-item.market-down .stock-info strong{
    color:#fff;
}

.stock-item.market-up .stock-code,
.stock-item.market-up .stock-info,
.stock-item.market-down .stock-code,
.stock-item.market-down .stock-info{
    color:rgba(255,255,255,.75);
}

.stock-item.market-down{
    background:linear-gradient(
        90deg,
        #0c5ab4 0%,
        #09428a 35%,
        #06254d 70%,
        #111111 100%
    );


}

.stock-item.market-flat{
    background:linear-gradient(
        90deg,
        #222222 0%,
        #111111 40%,
        #000000 100%
    );

}

.stock-item.market-flat .stock-name,
.stock-item.market-flat .stock-price,
.stock-item.market-flat .stock-info strong{
    color:#fff;
}

.stock-item.market-flat .stock-code,
.stock-item.market-flat .stock-info{
    color:rgba(255,255,255,.75);
}

.stock-item.market-flat .stock-rate{
    color:#ccc;
}

.stock-item:hover{
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}

.stock-name{
    font-size:15px;
    font-weight:700;
    color:#111;
}

.stock-code{
    font-size:12px;
    color:#999;
    margin-top:2px;
    margin-bottom:12px;
}

.stock-price{
    font-size:24px;
    font-weight:800;
    margin-bottom:6px;
    color:#111;
}

.stock-rate{
    font-size:14px;
    font-weight:700;
    margin-bottom:12px;
}

.stock-volume-label{
    font-size:11px;
    color:#999;
}

.stock-volume{
    font-size:13px;
    font-weight:600;
    color:#333;
}


.market-card-up{
    background:linear-gradient(90deg,#b40c2f 0%,#8a0a24 35%,#4d0614 70%,#111 100%);

}

.market-card-down{
    background:linear-gradient(90deg,#0c5ab4 0%,#09428a 35%,#06254d 70%,#111 100%);

}

.market-card-flat{
    background:linear-gradient(90deg,#222 0%,#111 40%,#000 100%);

}

.market-card-up,
.market-card-down,
.market-card-flat,
.market-card-up .market-name,
.market-card-down .market-name,
.market-card-flat .market-name,
.market-card-up .market-price,
.market-card-down .market-price,
.market-card-flat .market-price,
.market-card-up .market-change,
.market-card-down .market-change,
.market-card-flat .market-change{
    color:#fff;
}



/* =========================
   주요 지수 다크모드
========================= */

section.content.dark .market-box{

}

section.content.dark .market-title{
    color:#f1f1f1;
}

section.content.dark .market-card{
    border-color:#333;
}

section.content.dark .market-card-up{
    background:linear-gradient(
        90deg,
        #b40c2f 0%,
        #8a0a24 35%,
        #4d0614 70%,
        #111111 100%
    );
}

section.content.dark .market-card-down{
    background:linear-gradient(
        90deg,
        #0c5ab4 0%,
        #09428a 35%,
        #06254d 70%,
        #111111 100%
    );
}

section.content.dark .market-card-flat{
    background:linear-gradient(
        90deg,
        #333333 0%,
        #222222 40%,
        #111111 100%
    );
}

section.content.dark .market-name,
section.content.dark .market-price,
section.content.dark .market-change{
    color:#fff;
}


/* =========================
   종목 카드 다크모드
========================= */

section.content.dark .stock-detail-box{
    background:#1e1e1e;
    border:1px solid #333;
}

section.content.dark .stock-detail-title{
    color:#f1f1f1;
}

section.content.dark .stock-item{
    border-color:#333;
}

section.content.dark .stock-item.market-up{
    background:linear-gradient(
        90deg,
        #b40c2f 0%,
        #8a0a24 35%,
        #4d0614 70%,
        #111111 100%
    );
}

section.content.dark .stock-item.market-down{
    background:linear-gradient(
        90deg,
        #0c5ab4 0%,
        #09428a 35%,
        #06254d 70%,
        #111111 100%
    );
}

section.content.dark .stock-item.market-flat{
    background:linear-gradient(
        90deg,
        #333333 0%,
        #222222 40%,
        #111111 100%
    );
}

section.content.dark .stock-name,
section.content.dark .stock-price,
section.content.dark .stock-rate,
section.content.dark .stock-info strong{
    color:#fff;
}

section.content.dark .stock-code,
section.content.dark .stock-info{
    color:rgba(255,255,255,.75);
}

section.content.dark .stock-loading{
    color:#ccc;
}

section.content.dark .market-card:hover,
section.content.dark .stock-item:hover{
    box-shadow:0 4px 15px rgba(255,255,255,.08);
}


.exchange-box{
    margin-bottom:15px;
}

.exchange-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
}

@media(max-width:768px){

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

}

.market-chart-box{
 font-family: 'Noto Sans KR', sans-serif;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:8px;
    padding:15px;
    margin:15px 0;
}

.market-chart-title{
    font-size:17px;
    font-weight:700;
    margin-bottom:10px;
}

#marketChart{
    width:100%;
    height:260px;
}

.market-chart{
    width:100%;
    height:260px;
	 overflow:hidden;
}

.svg-chart{
    width:100%;
    height:260px;
    display:block;
}

.chart-label{
    fill:#777;
    font-size:12px;
}

.chart-price{
    fill:#999;
    font-size:12px;
}

section.content.dark .market-chart-box{
    background:#1e1e1e;
    border:1px solid #333;
}

section.content.dark .market-chart-title{
    color:#f1f1f1;
}

section.content.dark .chart-label,
section.content.dark .chart-price{
    fill:#aaa;
}



.chart-period{
    display:flex;
    gap:8px;
    margin-bottom:12px;
}

.chart-btn{
    border:none;
    background:#f1f3f5;
    color:#555;
    padding:6px 14px;
    border-radius:20px;
    cursor:pointer;
    font-size:12px;
    font-weight:600;
}

.chart-btn.active{
    background:#b40c2f;
    color:#fff;
}

section.content.dark .chart-btn{
    background:#2a2a2a;
    color:#ccc;
}

section.content.dark .chart-btn.active{
    background:#b40c2f;
    color:#fff;
}

.chart-period{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.chart-grid-line{
    stroke:rgba(255,255,255,.12);
    stroke-width:1;
}

.chart-axis-line{
    stroke:rgba(255,255,255,.25);
    stroke-width:1;
}

.chart-price{
    fill:#aaa;
    font-size:11px;
}

.chart-label{
    fill:#aaa;
    font-size:11px;
}

.market-scroll-box{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0px 0 10px 0;
	border-bottom: 1px solid #2f2f2f;
	border-top: 1px solid #2f2f2f;
}

.market-select-wrap{
    flex:0 0 90px;
}


.market-select{
    width:100%;
    height:30px;
    border:1px solid #ddd;
    border-radius:0px;
    padding:0 10px;
    font-size:13px;
    font-weight:700;
    background:#fff;
}

.market-stock-scroll{
    flex:1;
    overflow:hidden;
    white-space:nowrap;
    height:40px;
    line-height:40px;
}

.ticker-item{
    display:inline-block;
    margin-right:35px;
    font-size:14px;
    font-weight:600;
}

/* 기본 */
.ticker-name{
    color:#222;
    margin-right:6px;
}

.ticker-price{
    color:#222;
    margin-right:6px;
}

.ticker-up{
    color:#ff4d4f;
    font-weight:700;
}

.ticker-down{
    color:#4d8dff;
    font-weight:700;
}

.ticker-flat{
    color:#999;
    font-weight:700;
}


/* 다크모드 */

section.content.dark .ticker-name,
section.content.dark .ticker-price{
    color:#f1f1f1;
}

section.content.dark .ticker-item{
    color:#f1f1f1;
}

section.content.dark .market-select{
    background:#2a2a2a;
    color:#f1f1f1;
    border:1px solid #444;
}

section.content.dark .market-select:focus{
    border-color:#666;
    outline:none;
}

section.content.dark .market-select option{
    background:#2a2a2a;
    color:#f1f1f1;
}

section.content.dark .market-select{
    background:#2a2a2a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center;
    color:#f1f1f1;
    border:1px solid #444;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    padding-right:30px;
}


.stock-chart-period{
    display:flex;
    gap:6px;
    margin:12px 0;
    flex-wrap:wrap;
}

.stock-chart-btn{
   border: none;
    background: #f1f3f5;
    color: #555;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

.stock-chart-btn.active{
background: #b40c2f;
    color: #fff;
}


section.content.dark .stock-chart-btn{
    background:#2a2a2a;
    color:#ccc;
}

section.content.dark .stock-chart-btn.active{
    background:#b40c2f;
    color:#fff;
}




.exchange-chart-period{
    display:flex;
    gap:6px;
    margin-bottom:15px;
    flex-wrap:wrap;
}

.exchange-chart-btn{
    border: none;
    background: #f1f3f5;
    color: #555;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

.exchange-chart-btn:hover{
    background:#e5e7eb;
}

.exchange-chart-btn.active{
    background:#2563eb;
    color:#fff;
}