:root {
  /* Brand Base */
  --clr-white: #FFFFFF;
  --clr-fontFamily: 'Nunito', sans-serif;
  /* Neutrals */
  --clr-fontT01: rgba(78,89,104,0.1);
  --clr-fontT03: rgba(78,89,104,0.3);
  --clr-fontT05: rgba(78,89,104,0.5);
  --clr-fontT07: rgba(78,89,104,0.7);
  --clr-fontT10: rgba(78,89,104,1);
  /* 👇 많이 쓰는 본문색 단일 별칭 */
  --clr-font: var(--clr-fontT10);
  /* Surfaces */
  --clr-background00: transparent;
  --clr-background05: rgba(224,227,235,0.5);
  --clr-background10: rgba(224,227,235,1);
  /* 기본 배경 한 줄로 고정 */
  --clr-background: var(--clr-background10);
  --clr-tabBackground05: rgba(244,245,248,0.5);
  --clr-tabBackground10: rgba(244,245,248,1);
  --clr-tabBackground: rgba(244, 245, 248, 1); /* 색상 코드: #F4F5F8 */
  --clr-border: 1px solid rgba(224, 227, 235, 0.8); /* 색상 코드: #E9ECF0  */
  /* Accent */
  --clr-run: rgba(56,143,255,1);
  --clr-runHover01: rgba(56,143,255,0.1);
  --clr-runHover02: rgba(56,143,255,0.2);
  --clr-runHover05: rgba(56,143,255,0.5);
  --clr-buy: rgba(0,178,156,1);
  --clr-buyBg05: rgba(0,178,156,0.05);
  --clr-sell: rgba(243,79,92,1);
  --clr-sellBg05: rgba(243,79,92,0.05);
  --clr-ready01: rgba(106,0,255,0.1);
  --clr-ready10: rgba(106,0,255,1);
  /* Lines / Effects */

  --clr-border00: 0.5px solid rgba(224,227,235,0);
  --clr-outline: 3px solid rgba(56,143,255,0.2);
  --clr-shadow: 0 4px 20px rgba(78,89,104,0.2);
  --clr-shadowToggle: 0 1px 3px rgba(0,0,0,0.08);
  /* Misc */
  --clr-whiteButtonHover: rgba(78,89,104,0.1);
  --clr-border08: 1px solid rgba(224,227,235,0.8);

}


.market-price {
  font-size: 18px;
  font-weight: 800;

}

.market-change {
  font-size: 14px;
  color: var(--clr-buy);
  display: flex;

  margin-top: 3px;
}

.bid_ps {
  display: flex;
  white-space: nowrap;
  font-size: 13px;
  background-color: rgba(0, 178, 156, 0.2);
  color: var(--clr-buy);
  border-radius: 8px;
  padding: 0px 7px;

}

.ask_ps {
  display: flex;
  white-space: nowrap;
  font-size: 13px;
  background-color: rgba(243, 79, 92, 0.2);
  color: var(--clr-sell);
  border-radius: 8px;
  padding: 0px 7px;
}

.item {
  font-size: 14px;
  display: flex; /* 버튼이 가로로 정렬됨 */
  align-items: center;
  white-space: nowrap; /* 줄바꿈 방지 */
  padding: 0px;
  gap: 7px;
}

.delete {
  background-color: var(--clr-fontT03);
  border: none;
  width: 21px;
  justify-content: center; /* 아이콘 안의 내용 중앙 정렬 */
}

.separator {
  width: 1px; /* 구분선의 너비 */
  height: 22px; /* 구분선의 높이 */
  margin: 0 10px; /* 구분선과 아이콘 간의 여유 공간 */
  background-color: var(--clr-separator);
}

.sell-bid,
.sell-price,
.sell-alert {
  font-family: 'Nunito', sans-serif; /* 폰트 설정 */
  font-size: 13px; /* 제목 폰트 크기 */
  font-weight: 800;
  border: none; /* 경계 제거 */
  background-color: rgba(243, 79, 92, 0.1); /* 버튼 배경 색상 (10% 불투명도) */
  color: rgba(243, 79, 92, 1);; /* 버튼 글자 색상 */
  width: 60px;
  height: 22px;
  border-radius: 8px; /* 버튼 경계 반경 */
  cursor: pointer; /* 클릭 커서 */
}

/* chart */
.main-panel {
  display: flex;
  flex-direction: column;
  border-top: var(--clr-border);
  height: calc(100vh - 536px);
  min-height: 343px;
  overflow-y: auto; /* 세로 스크롤 생성 */
  overflow-x: hidden; /* 가로 스크롤 숨기기 (원하는 경우) */
  gap: 10px;
}

.main-panel-lg {
  display: flex;
  flex-direction: column;
  border-top: var(--clr-border);
  height: calc(100vh - 288px);
  min-height: 343px;
  overflow-y: auto; /* 세로 스크롤 생성 */
  overflow-x: hidden; /* 가로 스크롤 숨기기 (원하는 경우) */
  gap: 10px;
}
.result-chart{
  height: 100%; /* 또는 댓글에서 설정한 대로 동적으로 조정 할 수 있음 */
}

.delete-icon {
  width: 9px;
  height: auto;
  margin-bottom: 2px;
}

/*지표 전략 css*/
.condition-container {
  display: flex; /* 버튼이 가로로 정렬됨 */
  flex-direction: column; /* 세로 방향으로 정렬 */
  white-space: nowrap; /* 줄바꿈 방지 */
  background-color: var(--clr-white);
  border: var(--clr-border08);
  border-radius: 10px;
  padding: 8px;
  margin-top: 8px;
  gap: 8px;
  height: 100%;
}

.add-accordion {
  margin-top: 10px;
}

.condition-wrapper {
  display: flex; /* 버튼이 세로로 정렬되게 변경 */
  flex-direction: column; /* 세로 방향으로 정렬 */
  /*gap: 3px;*/
  border-radius: 10px; /* 둥글게 설정 */
  display: flex; /* 플렉스 박스를 사용하여 버튼을 나란히 배치 */
  /*width: 100%; !* 가로길이 전체 차지 *!*/
  position: relative; /* 슬라이더가 컨테이너에 상대적으로 위치하도록 설정 */
  height: 100%; /*추가*/
}

.condition-wrapper.sub {
  background-color: var(--cir-white);
  border-radius: 8px;
  padding: 18px 10px;
}

/*새 코드 7b*/
.toggle-content.strategyIndicator {
  width: 100%;
}

.condition-wrapper.horizontal {
  width: 100%;
  flex-direction: row;
  /*gap: 8px;*/
}

.condition-wrapper.sub-st2-inequality {
  /*width: 30px;*/
}

.condition-wrapper.sub-st2 .data-id {
  max-width: 50px;
}

.condition-wrapper.sub-st2 .slider {
  opacity: 0;
}

.condition-wrapper.sub-st2 .selectBox {
  /*width: 95px;*/
}


.condition-button {
  gap: 0px;
  align-items: center;
  cursor: pointer; /* 포인터를 커서로 변경하여 클릭 가능성을 암시 */
}

.condition-button.add {
  background-color: var(--cir-white);
  border: var(--clr-border08);
  border-radius: 8px;
  font-weight: 800;
  font-size: 18px;
  padding: 0.5px;
}

.condition-button.add:hover {
  border: 1px solid var(--clr-runHover05);
  color: var(--clr-run);
}

.condition-button.buy-condition,
.condition-button.sell-condition,
.condition-button.stopLoss-condition,
.condition-button.takeProfit-condition {
  display: flex;
  background-color: var(--cir-white);
  border-radius: 8px;
  border: var(--clr-border08);
  padding: 5px;
  display: flex;
  align-items: center;

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

.condition-button.buy-condition:hover,
.condition-button.sell-condition:hover,
.condition-button.stopLoss-condition:hover,
.condition-button.takeProfit-condition:hover {
  border: 1px solid var(--clr-runHover05);
}

.condition-delete {
  background-color: var(--clr-white);
  border: none;
  width: 18px;
  height: 20px;
  border-radius: 6px;

  display: flex;
  justify-content: center;
}

.condition-delete:hover {
  background-color: rgba(78, 89, 104, 1);
  color: var(--cir-white);
}

.filled.option-1,
.filled.option-2 {
  flex: 1 1 auto; /* 남은 공간을 모두 차지하면서 자동으로 조정 */
  display: flex;
  flex-direction: column;
  justify-content: auto;

  border-radius: 8px;
  background-color: var(--clr-tabBackground);
  padding: 2px;
  top: 0;
}


.filled.inequality {
  flex: 1 1 auto; /* 남은 공간을 모두 차지하면서 자동으로 조정 */
  display: flex;
  justify-content: center; /* 자식 요소를 가로 중앙에 정렬 */
  align-items: center; /* 자식 요소를 세로 중앙에 정렬 */

}

.filled {
  display: flex;
  flex-direction: row;
  border-radius: 6px;
  padding: 1px 3px;
  font-size: 12px;
}

.filled.option-1:hover,
.filled.option-2:hover {
  background-color: var(--clr-tabBackground);
}


.filled.inequality {
  font-size: 14px;
  font-weight: 800;
}

.filled.inequality.option-icon {
  max-width: 14px;
  height: auto;
}

.option-icon {
  max-width: 12px;
  max-height: 12px; /* 최대 세로 길이 설정 */
  width: auto;
  height: auto; /* 원본 비율을 유지 */
  display: inline-block; /* inline-block으로 설정하여 정렬 조정 */
  vertical-align: middle; /* 수직 정렬 조정 */
}

.option-icon.td {
  width: 9px;
  height: 9px; /* 최대 세로 길이 설정 */
}

.optionItem.inequality {

  display: flex;
  flex-direction: row;
  align-items: center;

  gap: 10px;
  width: auto; /* 원본 비율 유지 */
  height: auto; /* 원본 비율 유지 */
}

.indicator-type {
  font-weight: 800;
}

.indicator-type.td {
  font-size: 12px;
  font-weight: 400;
}

.condition-cell {
  width: 190px;
  background-color: var(--clr-tabBackground);
}

td .condition-cell {
  display: flex;
  white-space: nowrap !important; /* 줄바꿈 방지 */
  gap: 0px;
  border-radius: 8px;
}


.filled-td {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.indicator-value-td {
  display: flex;
  flex-direction: row;
}

.created-icon {
  display: flex;
  align-items: center;
  width: 15px;
  height: auto;
}
.buy-indicator-conditions-1,
.buy-price-conditions-1,
.buy-indicator-conditions-2,
.buy-price-conditions-2,
.sell-indicator-conditions-1,
.sell-price-conditions-1,
.sell-indicator-conditions-2,
.sell-price-conditions-2,
.stopLoss-indicator-conditions-1,
.stopLoss-price-conditions-1,
.stopLoss-indicator-conditions-2,
.stopLoss-price-conditions-2,
.takeProfit-indicator-conditions-1,
.takeProfit-price-conditions-1,
.takeProfit-indicator-conditions-2,
.takeProfit-price-conditions-2 {
  display: flex;
  flex-direction: column; /* 세로 방향으로 정렬 */
  gap: 8px;
}

.params {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.confirm-condition {
  margin-left: auto;
  width: 155px;
}

.text-center {
  text-align: center !important;
}

.filled.td {
  display: flex;
  justify-content: center;
  gap: 5px;
}

.news-icon,
.news-new-icon {
  width: 16px;
  width: 16px;
}

/* strategy-setup 구현 */
/* 아코디언 버튼 */
.strategy-setup {
  display: flex;
  flex-direction: column; /* 세로 방향으로 배치 */
  gap: 10px;
  width: 100%;
}

.step-accordion {
  display: flex; /* 플렉스 박스를 사용하여 아이콘과 텍스트 정렬 */
  align-items: center; /* 수직 가운데 정렬 */
  justify-content: flex-start; /* 기본적으로 왼쪽 정렬 */
  position: relative; /* 자식 요소(텍스트)를 중앙에 배치하기 위해 상대적으로 설정 */
  text-align: center;
  width: 100%;
  font-weight: 800;
  border: var(--clr-border);
  border-radius: 8px; /* 둥글게 설정 */

  font-family: 'Nunito', sans-serif; /* 폰트 설정 */
  font-size: 14px; /* 글자 크기 */

  background: var(--clr-tabBackground10);
  outline: none; /* 포커스 시 아웃라인 제거 */

  padding: 3px 10px;
}

.step-accordion.active {
  background-color: var(--clr-runHover01);
  border: var(--clr-borderHover02);
}

.step-accordion:hover {
  background-color: var(--clr-runHover01);
  border: var(--clr-borderHover02);
}

.data-count {
  font-weight: 400;
}

/* 체크 버튼 */
.step-icon {
  margin-right: 8px; /* 텍스트와 아이콘 사이에 여백 추가 */
  height: 15px; /* 아이콘의 높이 조정 */
  width: auto; /* 너비는 자동 조정 */
}

/* 조건별 설정 컨텐츠 */
.step-content {
  display: none; /* 기본적으로 숨겨짐 */
  width: 100%;
  border-radius: 8px;
}

#condition-group-buy,
#condition-group-sell,
#condition-group-stopLoss,
#condition-group-takeProfit {
  margin-top: 10px;
}

/* margin-right: 5px; */
.option-type,
.indicatorSet {
  width: 100%;
  margin-right: 10px;
  color: var(--clr-fontT07);
}

.indicator-type {
  font-weight: 800;
}

.indicator-type.td {
  font-size: 12px;
  font-weight: 400;
}


.indicator-value.td,
.price-value.td {
  font-size: 12px;
  color: var(--clr-fontT07);
}

.selected-interval {
  margin-right: 3px;
}

.filled.inequality {
  width: 13px;
}

.selected-indicator {
  color: var(--clr-run);
}

.buy-indicator-conditions-1,
.buy-price-conditions-1,
.buy-indicator-conditions-2,
.buy-price-conditions-2,
.sell-indicator-conditions-1,
.sell-price-conditions-1,
.sell-indicator-conditions-2,
.sell-price-conditions-2,
.stopLoss-indicator-conditions-1,
.stopLoss-price-conditions-1,
.stopLoss-indicator-conditions-2,
.stopLoss-price-conditions-2,
.takeProfit-indicator-conditions-1,
.takeProfit-price-conditions-1,
.takeProfit-indicator-conditions-2,
.takeProfit-price-conditions-2 {
  display: flex;
  flex-direction: column; /* 세로 방향으로 정렬 */
  gap: 8px;
}

.params {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.confirm-condition {
  margin-left: auto;
  width: 155px;
}


/* Select 버튼 구현 */
.selectBox {
  position: relative;
  z-index: 100;
  font-size: 14px;
  font-weight: 400;
  background-color: var(--cir-white);
  padding: 3px;
  border: var(--clr-border08);
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  height: 30px;
  text-align: left;
  display: flex;
  align-items: center;
  z-index: 999999;
}

.selectBox:hover {
  border: 1px solid var(--clr-runHover05);
}

.selectBox .label {
  border: 0 none;
  background: transparent;
  text-align: left; /* 텍스트 왼쪽 정렬 */
  cursor: pointer;
  width: 100%;
  display: flex; /* 플렉스 적용 */
  align-items: center;
  justify-content: space-between; /* 텍스트 및 화살표 간격 유지 */
  font-size: 13px;
}

.dropdown-arrow {
  width: 9px;
  height: auto;
  opacity: 0.5;
  transition: transform 0.3s;
  z-index: 101;
}

.selectBox .optionList {
  position: absolute;
  top: 50%;
  left: 0;
  min-width: 100%;
  max-width: none;
  background: var(--cir-white);
  box-shadow: var(--clr-shadow);
  color: var(--clr-font);
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  max-height: 200px;
  transition: max-height 0.2s ease-in;
  display: none;
  z-index: 99999999999;
}

.optionList.active {
  max-height: 500px;
  display: block; /* 드롭다운을 보이게 함 */
}

.selectBox .optionItem {
  align-items: left;
  padding: 5px 10px 5px;
  transition: .1s;
  display: flex;
  flex-direction: row;
  left: 0;
}

.selectBox .optionItem:hover {
  background-color: var(--clr-runHober);
  color: var(--clr-font)
}

/* 2 Stats 토글 버튼 */
.toggle-container {
  background-color: var(--clr-tabBackground);
  border-radius: 8px; /* 둥글게 설정 */
  border: var(--clr-border08);

  display: flex; /* 플렉스 박스를 사용하여 버튼을 나란히 배치 */
  width: 100%; /* 가로길이 전체 차지 */

  padding: 3px;
  position: relative; /* 슬라이더가 컨테이너에 상대적으로 위치하도록 설정 */
}

.toggle-container:hover {
  border: 1px solid var(--clr-runHover05);
}

.toggle-button {
  background-color: transparent; /* 기본 배경색을 투명하게 설정 */
  border: none; /* 기본 테두리 제거 */
  color: var(--clr-fontT03);

  font-family: 'Nunito', sans-serif; /* 폰트 설정 */
  font-weight: 800;
  font-size: 14px; /* 버튼 폰트 크기 */

  flex: 1; /* 각 버튼이 동일한 비율로 공간을 차지하도록 설정 */
  height: 100%; /* 버튼의 높이를 꽉 차게 설정 */
  border-radius: 6px; /* 둥글게 설정 */
  cursor: pointer; /* 클릭 가능한 커서 */
  transition: background-color 0.3s, box-shadow 0.3s; /* 부드러운 효과 */

  pointer-events: auto; /* 클릭 가능하도록 설정 */
  position: relative; /* z-index 설정을 위한 상대적 위치 */
  z-index: 1; /* 버튼을 슬라이더 위에 위치시키기 위해 z-index 설정 */
}

.toggle-button.active {
  background-color: var(--cir-white);
  color: var(--clr-font);
  box-shadow: var(--clr-shadowToggle);
}

.toggle-button:hover {
  opacity: 0.9; /* 호버 시 투명도 조정 */
}


.slider {
  position: absolute; /* 절대 위치로 설정 */
  bottom: 0; /* 버튼 하단에 배치 */
  height: calc(100% - 7px); /* 버튼의 전체 높이 사용 */
  width: calc(50% - 3px); /* 슬라이더 초기 너비 (한 버튼의 너비) */
  background-color: var(--clr-background);
  transition: transform 0.3s ease, background-color 0.1s ease; /* 위치와 색상 변경 시 부드러운 전환 */
  z-index: 0; /* 버튼 위에 위치하도록 설정 */
  border-radius: 8px; /* 슬라이더의 모서리를 둥글게 설정 */
  box-shadow: var(--clr-shadowToggle);
  top: 3px;
}

.data-id {
  display: flex;
  font-size: 13px;
  color: var(--clr-font);
  width: 120px;
  white-space: nowrap; /* 텍스트 줄바꿈 없음 */
}

.count {
  padding: 5px 0px; /* 필요없으나 control-panel 높이 맞추기 */
  margin-left: auto;
  border: var(--clr-borderTransparent); /* 필요없으나 control-panel 높이 맞추기 */
}

.data-count {
  white-space: nowrap; /* 텍스트 줄바꿈 없음 */
  color: var(--clr-fontT07);
  font-size: 12px;
}







.indicator-detail-settings {
  display: inline-block;      /* 내용에 맞게 크기 조절 가능 */
  width: 100%;           /* 내부 내용 크기에 따라 조절 */
  max-width: 250px;
  border: transparent;
  background-color: transparent;
  padding: 14px 18px;
  margin-top: 0;
  border-left: var(--clr-border08);
}

.indicator-details {
  overflow-y: auto; /* 내용이 max-height 넘어가면 스크롤 생김 */
  min-height: 251px;
}

.indicator-detail-settings .data-id.params-id {
  width: 100%;
}

.indicator-detail-settings .input input[type="text"],
.indicator-detail-settings .input input[type="number"] {
  min-width: 100px;
}

.indicator-detail-settings .params-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.indicator-detail-settings .indicator-details[data-category="Oscillators / Auxiliary Indicators"] .params-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 간격 조절 */
}

.indicator-detail-settings .button.smallIcon {
  background-color: var(--clr-fontT015);
  border: none;
  width: 21px;
  height: 21px;
}

.indicator-detail-settings .button.smallIcon:hover {
  background-color: var(--clr-fontT10);
  color: var(--cir-white);
}

.indicator-detail-settings .label {
  width: 100px;
}

.indicator-detail-settings .selectBox {
  width: 100px !important;
  border: var(--clr-border08) !important;
}


#tab-content-7a .input input[type="text"],
#tab-content-7a .input input[type="number"] {
  width: 100%;   /* 부모 내부 공간 채우기 */
  height: 31px;
  font-size: 14px;
}




/* 🔹 기본 상태 (활성 시) — 확실히 진하게 강조 */
#refresh-button:not(:disabled) img {
  opacity: 1;
  filter: brightness(0.6) contrast(1.8) saturate(1.8);
  transition: filter 0.3s ease, opacity 0.3s ease;
}

/* 🔹 hover 시 — 눌림 느낌 (조금 더 어둡고 강하게) */
#refresh-button:not(:disabled):hover img {
  filter: brightness(0.4) contrast(2) saturate(2);
}

/* 🔹 disabled 상태 — 기존 스타일 그대로 유지 */
#refresh-button:disabled img {
  opacity: 0.4;
  filter: brightness(2);
}

/* 클릭 불가 시 커서 변경 */
#refresh-button:disabled {
  cursor: not-allowed;
}