@charset "UTF-8";

/* 기본 버튼 스타일 */
.bnk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 0;
  border-radius: var(--radius-8);
  font-weight: 700;
  /* line-height: inherit; */
  padding: var(--space-5) var(--space-5);
  font-size: 1.4rem;
  text-decoration: none;
  text-align: center;
  gap: 4px;
}

.bnk-btn:active:not(:disabled):not(.disabled) {
  transform: translate(1px, 1px);
}

.bnk-btn.lt {
  justify-content:flex-start
}
/* Primary 버튼 - BNK Red 사용 */
.bnk-btn.primary {
  background-color: var(--foundation-primary-bnk-red);
  color: var(--foundation-global-white);
  box-shadow: 0 12px 20px -8px rgba(2, 12, 34, 0.12);
}

.bnk-btn.primary:active {
  background-color: var(--foundation-primary-bnk-dark-red);
}
/* 크기 변형 */
.bnk-btn.sm {
  padding: 7px var(--space-6);
  font-size: 1.4rem;
  border-radius: var(--radius-4);
}

.bnk-btn.md {
  padding:  0 var(--space-6);
  font-size: 1.4rem;
  border-radius: var(--radius-6);
  font-weight: 700;
  height:44px;
  line-height: 43px;
}

.bnk-btn.md .bnk-icon.icon-sz1 {margin: 0;}

.bnk-btn.lg {
  padding: 0 var(--space-8);
  font-size: 1.6rem;
  border-radius: var(--radius-8);
  height:56px;
  line-height:56px;
  font-weight:800
}


/* Secondary 버튼 스타일 */
.bnk-btn.secondary {
  background-color: var(--foundation-btn-2-btn);
  color: var(--foundation-font-black);
  /* border-radius: 16px; */
  /* background: var(--foundation-btn-2-btn, #DCE0E9); */

/* BOX/Shadow01 */
  box-shadow: 0 12px 20px -8px rgba(2, 12, 34, 0.12);
}
.bnk-btn.secondary.lg {font-weight:700;}



/* Contents type styles */
.bnk-btn.secondary.contents {
  box-shadow:none
}
.bnk-btn.secondary.contents.fill { 
  background: var(--foundation-btn-2-btn);
}
.bnk-btn.secondary.contents.fill2 { 
  background: var(--foundation-btn-red);
  color: var(--foundation-font-white);
}
.bnk-btn.secondary.contents.line { 
  border:1px solid var(--foundation-line-gray-2);
  background-color: var(--foundation-bg-bg-white);
}
.bnk-btn.secondary.contents.line.active, 
.bnk-btn.secondary.contents.line:active { 
  background: var(--foundation-btn-2-btn);

}
.bnk-btn.secondary.contents.fill.active, 
.bnk-btn.secondary.contents.fill:active { 
  background: var(--foundation-btn-2-btn-pressed);
}
.bnk-btn.secondary.contents.fill2.active, 
.bnk-btn.secondary.contents.fill2:active { 
  background: var(--foundation-btn-red-pressed);
}


.bnk-btn.secondary.input {
  background: var(--foundation-btn-2-btn);
  box-shadow: none;
}
.bnk-btn.secondary.input.active, 
.bnk-btn.secondary.input:active { 
  background: var(--foundation-btn-2-btn-pressed);
}

.bnk-btn.secondary.input.disabled {
  background: var(--foundation-btn-gray);
}

/* Common type styles */
.bnk-btn.secondary.common {
  color: var(--foundation-font-black);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 14px */
  letter-spacing: -0.07px;
  border-radius: 100px;
}
.bnk-btn.secondary.common.fill {
  background: var(--foundation-bg-bg-2);
  box-shadow: none;
}

.bnk-btn.secondary.common.fill.sm {
  /* padding-top: 7px; */
  /* padding-bottom: 7px; */
  /* padding: 7px 6px; */
}
.bnk-btnset.memo-chipset .bnk-btn.secondary.common.fill {
  padding:7px 12px;
  border-radius:16px;
}

.bnk-btn.secondary.common.fill.active, 
.bnk-btn.secondary.common.fill:active { 
  background: var(--foundation-btn-2-btn);
}
.bnk-btn.secondary.common.line { 
  border:1px solid var(--foundation-line-gray-2);
  background-color: var(--foundation-bg-bg-white);
}
.bnk-btn.secondary.common.line.active, 
.bnk-btn.secondary.common.line:active { 
  background: var(--foundation-btn-2-btn);
}


/* Chip / filter type styles - Select Control / Chip / filter */
.bnk-btn.chip.filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 32px;
  padding: 0 8px;
  gap: 4px;
  box-shadow: none;
  border-radius: var(--radius-4);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.07px;
  color: var(--foundation-font-gray-2);
  background: transparent;
}

.bnk-btn.chip.filter.fill {
  background: var(--foundation-bg-bg-2);
}

.bnk-btn.chip.filter.line {
  border: 1px solid var(--foundation-line-gray-2);
  background: transparent;
}

.bnk-btn.chip.filter.fill.on,
.bnk-btn.chip.filter.fill.active,
.bnk-btn.chip.filter.fill:active:not(:disabled):not(.disabled) {
  background: var(--foundation-primary-bnk-red);
  color: var(--foundation-font-white);
}

.bnk-btn.chip.filter.line.on,
.bnk-btn.chip.filter.line.active,
.bnk-btn.chip.filter.line:active:not(:disabled):not(.disabled) {
  border-color: var(--foundation-primary-bnk-red);
  color: var(--foundation-primary-bnk-red);
  background: transparent;
}

.bnk-btn.chip.filter .chip-logo {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  object-fit: contain;
}

.bnk-btn.chip.filter .chip-label {
  white-space: nowrap;
}

.bnk-btnset.chip-filterset {
  flex-wrap: wrap;
  gap: 4px;
}


/* Table type styles */
.bnk-btn.secondary.table {
  color: var(--foundation-font-black);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 14px */
  letter-spacing: -0.07px;
  border-radius: var(--radius-4);
  box-shadow: none;
  width: auto;
}
.bnk-btn.secondary.table.fill { 
  background: var(--foundation-btn-red);
  color: var(--foundation-font-white);
}
.bnk-btn.secondary.table.fill.active, 
.bnk-btn.secondary.table.fill:active { 
  background: var(--foundation-btn-red-pressed);
}
.bnk-btn.secondary.table.line { 
  border:1px solid var(--foundation-line-gray-2);
  background-color: var(--foundation-bg-bg-white);
}
.bnk-btn.secondary.table.line.active, 
.bnk-btn.secondary.table.line:active { 
  background: var(--foundation-btn-2-btn);
}

.bnk-btn.secondary.table.sm {
  padding: 5px 7px;
}


.bnk-icon {
  vertical-align: middle;
  margin:0 0 0 0;
}

.bnk-btn.etc {
  display: inline-flex;
  height: 32px;
  padding: 0 12px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  border-radius: var(--radius-8);
  border: 1px solid var(--foundation-line-gray-2);
  background: var(--foundation-bg-bg-white);
  color: var(--foundation-font-black);
}



.bnk-btn.txt { 
  color: var(--foundation-font-black);
font-size: 1.4rem;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 14px */
letter-spacing: -0.07px;
}

.bnk-btn.txt.sm { 
  color: var(--foundation-font-gray-2);
font-size: 1.2rem;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 18px */
letter-spacing: -0.06px;
}

.bnk-btn.txt.underline {
  text-decoration: underline;
  text-underline-position: from-font;
}

.bnk-btn.txt:active {
  color: var(--foundation-icon-red);
}

.bnk-btn.txt.ty1 {
  padding:0;
  display: flex;
  align-items: center;
}

/* .bnk-btn.txt.link:active::after {
  background-image: url('../image/icon/custom/chevron-right-active.svg');
}
.bnk-btn.txt.link.disabled::after {
  background-image: url('../image/icon/custom/chevron-right-disabled.svg');
} */
.bnk-btn.txt.link::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('../image/icon/custom/chevron-right.svg');
  background-size: contain;
  background-repeat: no-repeat;
  margin:0 0 3px 4px;
  vertical-align: middle;
}



/* Line 버튼 스타일 */
.bnk-btn.line {
  border: 1px solid var(--foundation-line-gray-2);
  background-color: var(--foundation-bg-bg-white);
  color: var(--foundation-font-black);
}

.bnk-btn.line:active {
  background-color: var(--foundation-line-gray-3);
}


/* 버튼 조합 스타일 */
.bnk-btnset {
  display: flex;
  gap: 8px;
  align-items: center;
}

.bnk-btnset.amount-presets {padding:0}

.bnk-btnset.fixed {

}

.bnk-btnset.full .bnk-btn { 
  flex:1
}

.bnk-btnset.full.rate .bnk-btn:nth-child(2) {  
  flex:1.51613
}

.bnk-btnset.ct {
  text-align: center;
  justify-content: center;
}

.bnk-btnset.lt {
  text-align: left;
  justify-content: flex-start;
}

.bnk-btnset.rt {
  text-align: right;
  justify-content: flex-end;
}

.bnk-btnset.both {
  justify-content: space-between;
}

.bnk-btnset.both .dir {
  display: flex;
  gap: 8px;
  align-items: center;
}

.bnk-btnset.full .bnk-btn { 
  flex:1
}

.bnk-btnset.column {
  flex-direction: column;
  gap:6px
}

.bnk-btnset.column.full {
  align-items: stretch;
  gap: var(--space-8);
}

.bnk-btnset.column.full .bnk-btn {
  flex: none;
  width: 100%;
}

.bnk-btn.shadow-0 { 
  box-shadow: none;
}

.bnk-btnset.memo-chipset {
  flex-wrap: wrap;
  gap: 4px;
}

.bnk-btnset.collapse .bnk-icon.collapse.on { 
  background-image: url('../image/icon/custom/chevron-up.svg');
}
.bnk-btnset.collapse .bnk-icon.collapse { 
  background-image: url('../image/icon/custom/chevron-down.svg');
}


/* Disabled 버튼 스타일 - 마지막에 위치하여 우선순위 보장 */
.bnk-btn.secondary.common.fill.disabled,
.bnk-btn.chip.filter.disabled,
.bnk-btn.chip.filter:disabled,
.bnk-btn.disabled {
  cursor: not-allowed;
  background-color: var(--foundation-btn-gray);
  color: var(--foundation-font-gray-2);
  pointer-events: none;
}

/* 기존 Storybook 버튼 스타일 (호환성을 위해 유지) */
.storybook-button {
  display: inline-block;
  cursor: pointer;
  border: 0;
  border-radius: 3em;
  font-weight: 700;
  line-height: 1;
  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.storybook-button--primary {
  background-color: #555ab9;
  color: white;
}
.storybook-button--secondary {
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
  background-color: transparent;
  color: var(--foundation-font-gray-1);
}
.storybook-button--small {
  padding: 10px 16px;
  font-size: 1.2rem;
}
.storybook-button--medium {
  padding: var(--space-5) var(--space-5);
  font-size: 1.4rem;
}
.storybook-button--large {
  padding: 12px 24px;
  font-size: 1.6rem;
}