@charset "UTF-8";

/* 기본 라벨 스타일 */
.bnk-label {
  display: inline-block;
  font-size: var(--font-size-xs); /* 12px -> 1.2rem */
  font-style: normal;
  font-weight: var(--font-weight-bold); /* 700 */
  line-height: 100%; /* 12px */
  letter-spacing: -0.06rem; /* -0.06px -> rem */
  letter-spacing: -0.06px;
  height: 24px; /* 24px -> rem */
  line-height: 2.3rem; /* 24px -> rem */
  border-radius: var(--radius-4); /* 8px */
  padding: 0 7px; /* 패딩 추가 */
  text-align: center;
  vertical-align: middle;
  line-height: 25px;
  /* vertical-align: top; */
}

.bnk-labelset {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.bnk-title:not(.ct) .bnk-labelset {
  justify-content: flex-start;
}

/* Tint 스타일 - 면이 채워져있는 스타일 */
.bnk-label.tint { 
  background: var(--foundation-line-gray-3);
  color: var(--foundation-font-gray-2);
}

.bnk-label.tint.co1 { 
  background: var(--foundation-label-light-red);
  color: var(--foundation-global-red);
}

.bnk-label.tint.co2 { 
  background: #F2E8FF;
  color: #620AD5;
}

.bnk-label.tint.co3 { 
  background: #E8F7E8;
  color: #068112;
}

.bnk-label.tint.co4 { 
  background: var(--foundation-label-light-blue);
  color: var(--foundation-label-blue);
}

.bnk-label.tint.co5 { 
  background: var(--foundation-line-gray-3);
  color: var(--foundation-font-gray-1);
}

.bnk-label.tint.co6 { 
  background: #FFF3E6;
  color: #CB3F07;
}

.bnk-label.tint.co7 { 
  background: var(--foundation-icon-black);
  color: var(--foundation-icon-white);
}

.bnk-label.tint.co8 { 
  background: var(--foundation-bg-bg-2);
  color: var(--foundation-font-black);

}

/* Line 스타일 - 테두리만 있는 스타일 */
.bnk-label.line {
  background: var(--foundation-bg-bg-white);
  border-radius: var(--radius-4);
  /* border: 1px solid var(--foundation-line-gray-2, #DCE0E9);
  color: var(--foundation-font-gray-2, #656669); */
  line-height: 23px;
  }

.bnk-label.line.co01 { 
  color: var(--foundation-font-gray-2);
  border: 1px solid var(--foundation-font-gray-2);
  background: var(--foundation-bg-bg-white);
}

.bnk-label.line.co02 { 
  border: 1px solid #4E12CD;
  color: #4E12CD;
}

.bnk-label.line.co03 { 
  border: 1px solid #9816B8;
  color: #9816B8;
}

.bnk-label.line.co04 { 
  border: 1px solid #164AB9;
  color: #164AB9;
}

.bnk-label.line.co05 { 
  border: 1px solid #B52C00;
  color: #B52C00;
}

.bnk-label.line.co06 { 
  border: 1px solid #426B33;
  color: #426B33;
}

.bnk-label.line.co07 {
  border: 1px solid var(--foundation-line-gray-2);
  /* color: #426B33; */
  color: var(--foundation-font-gray-2);
}

.bnk-label.line.co08 {
  border: 1px solid var(--foundation-label-red);
  /* color: #426B33; */
  color: var(--foundation-label-red);
}


/* Fill 스타일 - 완전히 채워진 스타일 */
.bnk-label.fill { 
  background: var(--foundation-icon-black);
  color: var(--foundation-font-white);
}

.bnk-label.fill.co1 { 
  background: var(--foundation-primary-bnk-red);
  color: var(--foundation-font-white);
}