.table-responsive {overflow: hidden!important;}

.chart-container {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    margin-bottom: 30px;
    min-height: 550px;
}

.btn-container {
    margin-bottom: 15px;
}

button:hover {
    background-color: #3867d6;
}
#loading {
    text-align: center;
    padding: 20px;
    font-size: 16px;
    color: #666;
}
.custom-legend {
    margin-top: 10px;
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    color: #333;
}
.legend-item {
    display: inline-flex;
    align-items: center;
    margin-right: 15px;
}
.legend-color {
    width: 15px;
    height: 15px;
    display: inline-block;
    margin-right: 5px;
}
.legend-arrow {
    width: 0;
    height: 0;
    display: inline-block;
    margin-right: 5px;
}
.legend-arrow.yellow {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 10px solid gold;
}
.legend-arrow.purple {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 10px solid #9370DB;
}


.chart-container {
    background-color: #000;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    color: #333;
}
h2 {
    margin-top: 0;
}

.up {
    color: #26a69a;
}
.down {
    color: #ef5350;
}
.yellow-arrow {
    color: gold;
    font-size: 18px;
}
.purple-arrow {
    color: #9370DB;
    font-size: 18px;
}
.legend {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
    background-color: #f5f5f5;
    padding: 10px;
    border-radius: 5px;
}
.legend-item {
    display: flex;
    align-items: center;
    margin-right: 20px;
    margin-bottom: 5px;
}
.legend-box {
    width: 15px;
    height: 15px;
    margin-right: 5px;
}
.controls {
    margin: 15px 0;
}
button {
    background-color: #4b7bec;
    color: white;
    border: none;
    padding: 8px 12px;
    margin-right: 10px;
    border-radius: 4px;
    cursor: pointer;
}
button:hover {
    background-color: #3867d6;
}
.chart-visual {
    overflow-x: auto;
    margin-top: 20px;
    max-height: 400px;
    overflow-y: auto;
}
.candle-cell {
    position: relative;
    height: 60px;
    min-width: 40px;
    padding: 0 !important;
}
.candle {
    position: absolute;
    width: 10px;
    left: 50%;
    transform: translateX(-50%);
}
.candle-body {
    position: absolute;
    width: 10px;
    left: 0;
}
.candle-wick {
    position: absolute;
    width: 2px;
    background-color: #000;
    left: 4px;
}
.ma-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #871c1c;
    left: 50%;
    transform: translateX(-50%);
}
.ma-line {
    position: absolute;
    height: 2px;
    background-color: #871c1c;
    left: -50%;
    width: 100%;
    z-index: 1;
}


<style>
 #chartcontrols { height:auto; padding:5px 5px 0 16px; max-width:100%; }
#chartdiv      { width:100%; height:500px; max-width:100%; }
.control-row   { display:flex; gap:8px; padding:8px 16px;  margin-bottom:15px;align-items:center; }
#chartcontrols {color:#fff !important}
#chartcontrols a {color:#fff !important}
.am5stock-control-label {color:#fff !important}
#chartcontrols i {color:#fff !important}
.am5stock-control-icon svg {color:#fff !important}
.am5stock-control-icon svg {fill:#ffffff !important}
.am5-modal-content h1 {color:#000 !important;}

/* 공통(컨트롤 박스) */
#chartcontrols {
    background: transparent; /* 컨테이너 배경은 투명 유지 */
}

/* 각 컨트롤(Indicator, DateRange, Period, Draw, Reset, Settings) 박스 */
#chartcontrols .am5stock-control {
    background: #000000;
    border: 1px solid #3b4048;
    border-radius: 8px;
    color: #e6e8eb;
}

/* 버튼류(기간 버튼, 토글 등) */
#chartcontrols .am5stock-control button {
    background: #2a3038;
    border: 1px solid #3b4048;
    color: #e6e8eb;
    border-radius: 6px;
}
#chartcontrols .am5stock-control button:hover {
    background: #36404a;
}
/* 활성화된 기간 버튼 강조 */
#chartcontrols .am5stock-period-selector .am5stock-button.is-active {
    background: #475569;
    border-color: #64748b;
    color: #ffffff;
}

/* 입력류(DateRange 달력/입력박스 등) */
#chartcontrols .am5stock-control input,
#chartcontrols .am5stock-control select {
    background: #1e232a;
    border: 1px solid #3b4048;
    color: #e6e8eb;
    border-radius: 6px;
}

/* DatePicker(달력 팝업)가 있다면 */
#chartcontrols .am5-datepicker,
#chartcontrols .am5-datepicker * {
    background: #1e232a !important;
    color: #e6e8eb !important;
    border-color: #3b4048 !important;
}

/* 작은 아이콘 버튼(연필/톱니/휴지통 등)이 있을 때 대비 강화 */
#chartcontrols .am5-icon,
#chartcontrols svg {
    color: #e6e8eb;
    fill: currentColor;
}

/* 컨트롤 전체 컨테이너 */
#chartcontrols {
    background: transparent;
    padding: 5px 5px 0 16px !important;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* amCharts Stock Toolbar 공통 박스 */
#chartcontrols .am5stock-control {
    background: #2a3038;
    border: 1px solid #3b4048;
    border-radius: 8px;
    color: #e6e8eb;
}

/* 버튼류 (기간 버튼/툴 버튼) */
#chartcontrols .am5stock-control button {
    background: #2a3038;
    border: 1px solid #3b4048;
    color: #e6e8eb;
    border-radius: 6px;
}
#chartcontrols .am5stock-control button:hover {
    background: #36404a;
}
/* 활성화된 기간 버튼 강조 */
#chartcontrols .am5stock-period-selector .am5stock-button.is-active {
    background: #475569;
    border-color: #64748b;
    color: #ffffff;
}

/* 입력류(DateRange 등) */
#chartcontrols .am5stock-control input,
#chartcontrols .am5stock-control select {
    background: #1e232a;
    border: 1px solid #3b4048;
    color: #e6e8eb;
    border-radius: 6px;
}

/* DatePicker 팝업 */
#chartcontrols .am5-datepicker,
#chartcontrols .am5-datepicker * {
    background: #1e232a !important;
    color: #e6e8eb !important;
    border-color: #3b4048 !important;
}

/* 아이콘 대비 */
#chartcontrols .am5-icon,
#chartcontrols svg {
    color: #e6e8eb;
    fill: currentColor;
}
#chartdivzxc {
  width: 100%;
  height: 300px;
}
#chartcontrols { height:auto; padding:5px 5px 0 16px; max-width:100%; }
#chartdiv { width:100%; height:500px; max-width:100%; }
#chartcontrols > div >div.am5stock-control-icon > svg > path {stroke:rgb(255,255,255) !important}
#chartcontrols > div.am5stock-control-drawing-tools > div > div.am5stock-control-icon > svg > path {stroke:rgb(255,255,255) !important}

#chartcontrols > div {max-height:30px; margin-top:12px;}
#chartcontrols > div.am5stock-control-drawing-tools {margin-bottom:20px !important; margin-top:-5px;}