._preview_panel_detail {
  /* flex-grow: 1; */
  width: 768px;
  padding: 9px;
}

#_preview_code_guide {
  font-family: "SUIT";
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  line-height: 19px;

  margin-top: 9px;
  margin-bottom: 12px;
  color: #6e7283;
}

/*  TAB Style start -------------------------------------- */

#_preview_code_viewer .tab-wrapper {
  white-space: initial;
  margin: 0;
}

/* Style the tab */
#_preview_code_viewer .tab {
  display: flex;
  /* align-items: stretch; */
  height: 50px;
  /* background-color: rgb(244, 255, 231); */

  align-items: center;
  /* justify-content: left; */
}

/* Style the buttons inside the tab */
#_preview_code_viewer .tab div {
  /* background-color: inherit; */
  /* float: left; */
  border: none;
  outline: none;
  cursor: pointer;
  /* padding: 14px 16px; */
  transition: 0.3s;

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

  margin-right: 7px;
  margin-left: 7px;
}
._preview_code_icon {
}
#_preview_code_icon_js {
  margin-left: 12px !important;
}
#coderun {
  width: 105px;
  height: 35px;
  background: #3f5dff;
  border-radius: 2px;

  font-family: "SUIT";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 17px;
  color: #fafbff;

  /* margin-right: 7px;
  margin-left: 7px; */
}
#_preview_code_viewer .tablinks {
  width: 24px;
  height: 24px;
}

#_preview_code_icon_js {
  background: url("/lib/img/_icon/icon_web.svg") center center / cover;
}
#_preview_code_icon_js.active {
  background: url("/lib/img/_icon/icon_web_f.svg") center center / cover;
}

#_preview_code_icon_ios {
  background: url("/lib/img/_icon/icon_ios.svg") center center / cover;
}
#_preview_code_icon_ios.active {
  background: url("/lib/img/_icon/icon_ios_f.svg") center center / cover;
}

#_preview_code_icon_android {
  background: url("/lib/img/_icon/icon_android.svg") center center / cover;
}
#_preview_code_icon_android.active {
  background: url("/lib/img/_icon/icon_android_f.svg") center center / cover;
}

/* Change background color of buttons on hover */
#_preview_code_viewer .tab div:hover {
  /* background-color: #ddd;
  color: #030409de; */
}

/* Create an active/current tablink class */
#_preview_code_viewer .tab div.active {
  /* background-color: #ccc; */
}

/* Style the tab content */
#_preview_code_viewer .tabcontent {
  display: none;
  /*padding: 24px;*/
  /* border: 1px solid #ccc;
  border-top: none; */
}
.tabcontent code {
  padding: 0px !important;
  overflow-y: hidden;
  padding-bottom: 30px !important;
}

._preview_draw_guide {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 5px;
  margin: 15px;
  margin-left: 50px;
  padding: 13px;
  width: 644px !important;

  font-family: "SUIT";
  font-style: normal;
  font-weight: 500;
  font-size: 15px !important;
  line-height: 22px;
  /* or 147% */

  text-align: center;

  color: #ffffff !important;
}

._preview_draw_guide > span {
  font-family: "SUIT";
  font-style: normal;
  font-weight: 500;
  font-size: 15px !important;
  color: #ffffff !important;
}

._preview_draw_button {
  top: 107px !important;
  left: 35px !important;
}

.map_act_btn_wrap button {
  width: 90px;
  height: 35px;
  margin-left: 5px;
  margin-right: 5px;

  background: #fafbff !important;
  /* PRIMARY/BLUE 00 */

  border: 1px solid #3f5dff;
  border-radius: 2px;

  font-family: "SUIT";
  font-style: normal;
  font-weight: 500 !important;
  font-size: 14px;
  line-height: 17px;

  /* PRIMARY/BLUE 00 */

  color: #3f5dff !important;
}

/*#searchAddress {
  width: 584px !important;
  height: 45px;
  margin-bottom: 15px;
  background: #ffffff;

  !* GRAY SCALE / GRAY 05 *!
  border: 1px solid #aeb2c1;
  border-radius: 75px;

  padding-left: 20px;
  padding-right: 20px;

  font-family: "SUIT";
  font-style: normal;
  font-weight: 500 !important;
  font-size: 15px;
  line-height: 19px;

  !* GRAY SCALE / GRAY 05 *!
  color: #aeb2c1;
}*/

#searchAddress + button {
  background: transparent !important;
  border: none;
  outline: none;
  width: 17px;
  height: 17px;
  padding: 0 !important;
  margin-left: -39px;
  vertical-align: text-bottom !important;
}

#searchAddress + button img {
  background: transparent !important;

  object-fit: contain;
}

/*
#apiResult {
  width: 584px !important;
  height: 150px !important;
  padding: 20px !important;

  background: #ffffff;

  !* GRAY SCALE / GRAY 05 *!
  border: 1px solid #aeb2c1;
  border-radius: 10px;
}

#apiResult p {
  font-family: "SUIT";
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  line-height: 19px;

  !* GRAY SCALE / GRAY 05 *!
  color: #474b5a;
}
#apiResult p[disabled] {
  font-family: "SUIT";
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  line-height: 19px;

  !* GRAY SCALE / GRAY 05 *!
  color: #aeb2c1;
}
*/

#searchCategory,
#_previewMapExtensionInfo {
  height: 45px;

  display: flex;

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

#_previewMapExtensionInfo {
  margin-left: 45px;
  top: 75px;
}
#searchCategory div,
#_previewMapExtensionInfo button {
  height: 45px;
  width: 95px;
  background: #ffffff !important;

  /* GRAY SCALE / GRAY 05 */
  border: 1px solid #aeb2c1;
  border-radius: 75px;
  margin-left: 5px;
  margin-right: 5px;

  display: flex;

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

#searchCategory div.active {
  background: #3f5dff !important;
}

#searchCategory div.active label {
  color: #ffffff !important;
}
/*
#searchCategory div:nth-child(4),
#_previewMapExtensionInfo button:nth-child(2) {
  background: #3f5dff !important;
}
*/
#searchCategory label {
  font-family: "SUIT";
  font-style: normal;
  font-weight: 500;
  font-size: 15px !important;
  line-height: 19px;

  /* GRAY SCALE/GRAY 10 */
  color: #474b5a !important;
}

/*
#searchCategory div:nth-child(4) label,
#_previewMapExtensionInfo button:nth-child(2) {
  color: #ffffff !important;
}
*/
.map_type_btn button.active {
  background: #3f5dff !important;
  color: #fafbff !important;
}

#_previewMapExtensionInfo button.search_active {
  background: #3f5dff !important;
  color: #ffffff !important;
}

#searchAddressButton {
  width: 95px;
  height: 45px !important;

  background: #ffffff !important;

  /* GRAY SCALE / GRAY 05 */
  border: 1px solid #aeb2c1;
  border-radius: 5px;

  font-family: "SUIT";
  font-style: normal;
  font-weight: 500 !important;
  font-size: 15px !important;
  line-height: 19px;

  /* GRAY SCALE / GRAY 05 */
  color: #474b5a !important;
}

#searchAddressButton[disabled="disabled"],
#searchAddressButton:disabled {
  color: #aeb2c1 !important;
}

#multiInput input[type="text"] {
  width: 250px !important;
  height: 45px !important;
  margin-top: 10px;

  padding-left: 20px;
  padding-right: 35px;

  background: #ffffff;
  /* GRAY SCALE / GRAY 05 */
  border: 1px solid #aeb2c1;
  border-radius: 75px;

  font-family: "SUIT";
  font-style: normal;
  font-weight: 500;
  font-size: 15px !important;
  line-height: 19px;

  /* GRAY SCALE/GRAY 10 */
  color: #474b5a;
}

#multiInput input[type="text"]::placeholder {
  /* GRAY SCALE / GRAY 05 */
  color: #aeb2c1;
}

#multiInput li button {
  width: 24px;
  height: 24px;

  margin-left: -35px;

  padding: 0 !important;

  color: transparent;

  /*background: url("/lib/img/_icon/clear-circle.svg") center center / cover;*/
}

#multiInput li button.add {
  background: url("/lib/img/_icon/add-circle.svg") center center / cover;
}

#multiInput li button.clear {
  background: url("/lib/img/_icon/clear-circle.svg") center center / cover;
}

/*
#multiInput li:last-child button {
  background: url("/lib/img/_icon/add-circle.svg") center center / cover;
}
*/

#coderunModal {
  background: rgba(0, 0, 0, 0.5) !important;
  /*padding-top: 130px !important;*/
}
#_preview_run_code_popup {
  max-width: 1570px !important;
  /*min-width: 1100px !important;*/

  /*height: 943px;*/
  /* width: 1425px !important; */
  display: flex;
  flex-direction: column;
  padding: 30px 30px 50px 30px;
}

._preview_run_code_control_panel {
  display: flex;
  height: 35px;
  margin-bottom: 21px;
  /* background-color: rgb(244, 255, 231); */

  align-items: center;
}

._preview_run_code_main_panel {
  flex: 1;
  display: flex;

}

#codeEditorWrapper {
  width: 750px;
  margin-right: 10px;

  background: #fafbff;
  /* GRAY SCALE / GRAY 03 */

  /*border: 1px solid #d2d5e0;*/
  border-radius: 0px;
  overflow-y: hidden;
  /* 스크롤 부분 추가 정리 필요 */
  height: 750px;   
}

#resultIframeWrapper {
  width: 750px;
}

._preview_run_code_control_panel label {
  font-family: "SUIT";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 17px;

  /* GRAY SCALE / GRAY 00 */

  color: #fafbff;
}

/*
#autoRun {
  display: none;
}
#autoRun:checked + label {
  background: orange;
}

#autoRun + label {
  width: 105px;
  height: 35px;
  !* PRIMARY/BLUE 00 *!
  background: #3f5dff;
  !* PRIMARY/BLUE 00 *!
  border: 1px solid #3f5dff;
  border-radius: 2px;

  font-family: "SUIT";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 17px;
  color: #fafbff;

  display: flex;
  align-items: center;
  justify-content: center;
}
*/

#runScript {
  width: 105px;
  height: 35px;
  margin-left: 20px;

  /* GRAY SCALE / GRAY 05 */
  border: 1px solid #3f5dff;
  border-radius: 2px;

  font-family: "SUIT";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 17px;

  /* GRAY SCALE / GRAY 08 */
  color: #3f5dff;

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

#runScript:disabled{
  border: 1px solid #aeb2c1;
  color: #6e7283;
}

#resetCode {
  width: 105px;
  height: 35px;

  margin-right: 25px;
  /* PRIMARY/BLUE 00 */
  border: 1px solid #3f5dff;
  border-radius: 2px;

  font-family: "SUIT";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 17px;

  /* PRIMARY/BLUE 00 */

  color: #3f5dff;

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

._preview_run_code_control_panel .close {
  width: 16px;
  height: 16px;
  background: url("/lib/img/_icon/union.svg") center center / cover;
}

._preview_run_code_control_panel img {
  margin-bottom: 1px;
  width: 16px;
  height: 16px;
  margin-right: 5px;

  display: inline;
}