:root {
  --colorY_CST1: #3170fa;
  --colorY_CST2: #37b1ff;
  --colorY_CST3: #f7ac1a;
  --colorY_CST4: #f93d40;
  --colorY_CST5: #5fd4e4;
  --colorY_ETC: #666666;
  --colorY_Good: #008ff8;
  --colorY_Bad: #f93d40;
  --colorY_Beneficial: #008ff8;
  --colorY_Harmful: #f93d40;
  --colorY_Opportunity: #f7ac1a;
  --colorY_Other: #a9a9a9;
  --colorY_Highlight: #eb7ca4;
  --colorY_Gray: #a9a9a9;
  --colorY_Black: #000000;
  --colorY_Gray0: #ffffff;
  --colorY_Gray100: #f6f6f8;
  --colorY_Gray200: #f4f6f8;
  --colorY_Gray300: #dddddd;
  --colorY_Gray400: #aaaaaa;
  --colorY_Gray500: #888888;
  --colorY_Gray600: #637381;
  --colorY_Gray700: #454f5b;
  --colorY_Gray800: #202123;
  --colorY_Gray900: #161c24;
  --backgroundY_CST1: rgba(49, 112, 250, 0.1);
  --backgroundY_CST2: rgba(55, 177, 255, 0.1);
  --backgroundY_CST3: rgba(247, 172, 26, 0.1);
  --backgroundY_CST4: rgba(249, 61, 64, 0.1);
  --backgroundY_CST5: rgba(95, 212, 228, 0.1);
  --backgroundY_ETC: rgba(102, 102, 102, 0.1);
}

.styleY_CST1_Title {
  color: var(--colorY_CST1);
  font-weight: bold;
}
.styleY_CST2_Title {
  color: var(--colorY_CST2);
  font-weight: bold;
}
.styleY_CST3_Title {
  color: var(--colorY_CST3);
  font-weight: bold;
}
.styleY_CST4_Title {
  color: var(--colorY_CST4);
  font-weight: bold;
}
.styleY_CST5_Title {
  color: var(--colorY_CST5);
  font-weight: bold;
}
.styleY_ETC_Title {
  color: var(--colorY_ETC);
  font-weight: bold;
}

.styleY_CST1_Bgcolor {
  color: var(--colorY_CST1);
  background-color: var(--backgroundY_CST1);
  font-weight: 600;
  border-radius: 6px;
  padding: 8px;
  font-size: 13px;
  line-height: 13px;
}
.styleY_CST2_Bgcolor {
  color: var(--colorY_CST2);
  background-color: var(--backgroundY_CST2);
  font-weight: 600;
  border-radius: 6px;
  padding: 8px;
  font-size: 13px;
  line-height: 13px;
}
.styleY_CST3_Bgcolor {
  color: var(--colorY_CST3);
  background-color: var(--backgroundY_CST3);
  font-weight: 600;
  border-radius: 6px;
  padding: 8px;
  font-size: 13px;
  line-height: 13px;
}
.styleY_CST4_Bgcolor {
  color: var(--colorY_CST4);
  background-color: var(--backgroundY_CST4);
  font-weight: 600;
  border-radius: 6px;
  padding: 8px;
  font-size: 13px;
  line-height: 13px;
}
.styleY_CST5_Bgcolor {
  color: var(--colorY_CST5);
  background-color: var(--backgroundY_CST5);
  font-weight: 600;
  border-radius: 6px;
  padding: 8px;
  font-size: 13px;
  line-height: 13px;
}
.styleY_ETC_Bgcolor {
  color: var(--colorY_ETC);
  background-color: var(--backgroundY_ETC);
  font-weight: 600;
  border-radius: 6px;
  padding: 8px;
  font-size: 13px;
  line-height: 13px;
}

.styleY_CST_Description {
  color: var(--colorY_Gray500);
  line-height: 24px;
}

.styleY_CST1_Value,
.styleY_CST1_Color {
  color: var(--colorY_CST1);
}
.styleY_CST2_Value,
.styleY_CST2_Color {
  color: var(--colorY_CST2);
}
.styleY_CST3_Value,
.styleY_CST3_Color {
  color: var(--colorY_CST3);
}
.styleY_CST4_Value,
.styleY_CST4_Color {
  color: var(--colorY_CST4);
}
.styleY_CST5_Value,
.styleY_CST5_Color {
  color: var(--colorY_CST5);
}
.styleY_ETC_Value,
.styleY_ETC_Color {
  color: var(--colorY_ETC);
}

.styleY_CST1_Color::before {
  content: '◼︎';
  width: 6px;
  height: 6px;
  color: var(--colorY_CST1);
  margin-right: 5px;
}
.styleY_CST2_Color::before {
  content: '◼︎';
  width: 6px;
  height: 6px;
  color: var(--colorY_CST2);
  margin-right: 5px;
}
.styleY_CST3_Color::before {
  content: '◼︎';
  width: 6px;
  height: 6px;
  color: var(--colorY_CST3);
  margin-right: 5px;
}
.styleY_CST4_Color::before {
  content: '◼︎';
  width: 6px;
  height: 6px;
  color: var(--colorY_CST4);
  margin-right: 5px;
}
.styleY_CST5_Color::before {
  content: '◼︎';
  width: 6px;
  height: 6px;
  color: var(--colorY_CST5);
  margin-right: 5px;
}
.styleY_ETC_Color::before {
  content: '◼︎';
  width: 6px;
  height: 6px;
  color: var(--colorY_ETC);
  margin-right: 5px;
}

.styleY_CST1_Bar {
  background: linear-gradient(to top, #ffffff, var(--colorY_CST1));
}
.styleY_CST2_Bar {
  background: linear-gradient(to top, #ffffff, var(--colorY_CST2));
}
.styleY_CST3_Bar {
  background: linear-gradient(to top, #ffffff, var(--colorY_CST3));
}
.styleY_CST4_Bar {
  background: linear-gradient(to top, #ffffff, var(--colorY_CST4));
}
.styleY_CST5_Bar {
  background: linear-gradient(to top, #ffffff, var(--colorY_CST5));
}
.styleY_ETC_Bar {
  background: linear-gradient(to top, #ffffff, var(--colorY_ETC));
}

.styleY_CST_legend {
  color: var(--colorY_Gray500);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.styleY_Dominance_Description {
  color: var(--colorY_Gray500);
  font-size: 16px;
  line-height: 24px;
}

.styleY_Overview_Result_Good {
  color: var(--colorY_Good);
  background-color: rgba(0, 143, 248, 0.1);
  font-weight: 600;
  height: 28px;
  border-radius: 6px;
  padding: 6px;
  gap: 2px;
  font-size: 13px;
  line-height: 13px;
  align-items: center;
  text-wrap: nowrap;
}
.styleY_Overview_Result_Bad {
  color: var(--colorY_Bad);
  background-color: rgba(249, 61, 64, 0.1);
  font-weight: 600;
  height: 28px;
  border-radius: 6px;
  padding: 6px;
  gap: 2px;
  font-size: 13px;
  line-height: 13px;
  align-items: center;
  text-wrap: nowrap;
}

.styleY_Bacteria_Result_Good {
  color: var(--colorY_Good);
  font-weight: bold;
}
.styleY_Bacteria_Result_Bad {
  color: var(--colorY_Bad);
  font-weight: bold;
}

.styleY_Disease_Good {
  color: var(--colorY_Good);
  background-color: rgba(73, 156, 175, 0.5);
  font-weight: bold;
}
.styleY_Disease_Bad {
  color: var(--colorY_Bad);
  background-color: rgba(235, 163, 122, 0.5);
  font-weight: bold;
}

.styleY_Beneficial_Bacteria {
  color: var(--colorY_Beneficial);
  font-weight: bold;
}
.styleY_Harmful_Bacteria {
  color: var(--colorY_Harmful);
  font-weight: bold;
}
.styleY_Opportunity_Bacteria {
  color: var(--colorY_Opportunity);
  font-weight: bold;
}
.styleY_Other_Bacteria {
  color: var(--colorY_Other);
  font-weight: bold;
}

.styleY_Bacteria_Description {
  color: var(--colorY_Gray500);
}

.styleY_Notice_CST {
  color: var(--colorY_Gray500);
  font-size: 14px;
  line-height: 21px;
}
.styleY_Notice_Bacteria_Type {
  color: var(--colorY_Gray500);
  line-height: 24px;
}
.styleY_Good_Comment_1 {
  color: var(--colorY_Gray);
}
.styleY_Good_Comment_2 {
  color: var(--colorY_Good);
  background-color: rgba(0, 143, 248, 0.1);
}
.styleY_Bad_Comment_1 {
  color: var(--colorY_Gray);
}
.styleY_Bad_Comment_2 {
  color: var(--colorY_Bad);
  background-color: rgba(249, 61, 64, 0.1);
}

.styleY_Notice_Disease_Description {
  color: var(--colorY_Gray500);
}
.styleY_AI_Recommend {
  color: var(--colorY_Gray);
  font-weight: bold;
}

.styleY_Notice_Detail_List {
  color: var(--colorY_Gray500);
  list-style-type: disc;
}

.styleY_Notice_Treatment_List {
  color: var(--colorY_Gray500);
  list-style-type: disc;
}
.styleY_Notice_Treatment_Description {
  color: var(--colorY_Gray500);
  list-style-type: disc;
}

.styleY_Italic {
  font-style: italic;
}
.styleY_Bold,
.styleY_bold {
  font-weight: bold;
  line-height: 18px;
}
.styleY_List {
  list-style-type: circle;
}
.styleY_tooltip {
  color: var(--colorY_Gray);
}
.colorY_Highlight {
  color: var(--colorY_Highlight);
}

.colorY_Harmful {
  color: var(--colorY_Harmful);
}

.colorY_Beneficial {
  color: var(--colorY_Beneficial);
}

.colorY_Opportunity {
  color: var(--colorY_Opportunity);
}

.styleY_CST1_Box {
  display: flex;
  width: 135px;
  min-width: 135px;
  height: 200px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--colorY_CST1);
  gap: 6px;
  background-color: var(--backgroundY_CST1);
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.styleY_CST2_Box {
  display: flex;
  width: 135px;
  min-width: 135px;
  height: 200px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--colorY_CST2);
  gap: 6px;
  background-color: var(--backgroundY_CST2);
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.styleY_CST3_Box {
  display: flex;
  width: 135px;
  min-width: 135px;
  height: 200px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--colorY_CST3);
  gap: 6px;
  background-color: var(--backgroundY_CST3);
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.styleY_CST4_Box {
  display: flex;
  width: 135px;
  min-width: 135px;
  height: 200px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--colorY_CST4);
  gap: 6px;
  background-color: var(--backgroundY_CST4);
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.styleY_CST5_Box {
  display: flex;
  width: 135px;
  min-width: 135px;
  height: 200px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--colorY_CST5);
  gap: 6px;
  background-color: var(--backgroundY_CST5);
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.styleY_ETC_Box {
  display: flex;
  width: 135px;
  min-width: 135px;
  height: 200px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--colorY_ETC);
  gap: 6px;
  background-color: var(--backgroundY_ETC);
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.styleY_Title {
  color: var(--colorY_Black);
  font-weight: bold;
}