/* Auto-generated from tokens.js — do not edit directly */
/* ── button ── */
.ka-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: -0.128px;
  transition: background 0.15s, border-color 0.15s;
  border: 1px solid transparent;
}

.ka-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.ka-btn--icon-only {
  padding: 0;
  aspect-ratio: 1;
}

.ka-btn--size-52 {
  height: 52px;
  padding: 0 20px;
  font-size: 16px;
  line-height: 24px;
}

.ka-btn--size-46 {
  height: 46px;
  padding: 0 16px;
  font-size: 15px;
  line-height: 24px;
}

.ka-btn--size-42 {
  height: 42px;
  padding: 0 16px;
  font-size: 15px;
  line-height: 21px;
}

.ka-btn--size-40 {
  height: 40px;
  padding: 0 16px;
  font-size: 15px;
}

.ka-btn--size-36 {
  height: 36px;
  padding: 0 16px;
  font-size: 14px;
}

.ka-btn--size-32 {
  height: 32px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
}

.ka-btn--size-36 svg,
.ka-btn--size-32 svg {
  width: 16px;
  height: 16px;
}

.ka-btn--solid-black {
  background: var(--ka-surface-default);
  color: var(--ka-text-white);
  border-color: transparent;
}

.ka-btn--solid-black:hover:not(:disabled):not(.ka-btn--disabled) {
  background: var(--ka-surface-gray-darker);
  color: var(--ka-text-white);
}

.ka-btn--solid-primary {
  background: var(--ka-surface-primary);
  color: var(--ka-text-white);
  border-color: var(--ka-surface-primary);
}

.ka-btn--solid-primary:hover:not(:disabled):not(.ka-btn--disabled) {
  background: linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06)), var(--ka-surface-primary);
}

.ka-btn--solid-secondary {
  background: var(--ka-surface-gray-light);
  color: var(--ka-text-gray-darker);
  border-color: transparent;
}

.ka-btn--solid-secondary:hover:not(:disabled):not(.ka-btn--disabled) {
  background: var(--ka-surface-gray);
}

.ka-btn--solid-white {
  background: var(--ka-surface-white);
  color: var(--ka-text-default);
  border-color: transparent;
}

.ka-btn--solid-white:hover:not(:disabled):not(.ka-btn--disabled) {
  background: var(--ka-surface-gray-lighter);
}

.ka-btn--border-secondary {
  background: var(--ka-surface-white);
  color: var(--ka-text-default);
  border-color: var(--ka-border-gray);
}

.ka-btn--border-secondary:hover:not(:disabled):not(.ka-btn--disabled) {
  border-color: var(--ka-border-gray-darker);
}

.ka-btn--solid-black:disabled,
.ka-btn--solid-black.ka-btn--disabled,
.ka-btn--solid-primary:disabled,
.ka-btn--solid-primary.ka-btn--disabled,
.ka-btn--solid-secondary:disabled,
.ka-btn--solid-secondary.ka-btn--disabled,
.ka-btn--solid-white:disabled,
.ka-btn--solid-white.ka-btn--disabled {
  background: var(--ka-surface-disabled);
  border-color: var(--ka-surface-disabled);
  color: var(--ka-text-white);
  cursor: default;
}

.ka-btn--border-secondary:disabled,
.ka-btn--border-secondary.ka-btn--disabled {
  background: var(--ka-surface-gray-lightest);
  border: 1px solid var(--ka-border-gray-lighter);
  color: var(--ka-text-disabled);
  cursor: default;
}

.ka-btn--solid-white:disabled,
.ka-btn--solid-white.ka-btn--disabled {
  background: transparent;
  border-color: transparent;
  color: var(--ka-text-disabled);
}

/* ── radio ── */
.ka-radio {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ka-surface-white);
  border: 2px solid var(--ka-border-gray-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ka-radio--checked {
  border: 6.5px solid var(--ka-border-primary);
}

.ka-radio:disabled,
.ka-radio--disabled {
  border: 2px solid var(--ka-border-gray-light);
  background: var(--ka-surface-gray-lighter);
}

/* ── toast ── */
.ka-toast {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 560px;
  padding: 12.5px 20px;
  border-radius: 500px;
  background: rgba(106, 106, 106, 0.9);
  pointer-events: none;
}

.ka-toast--wrap {
  border-radius: 16px;
}

.ka-toast__message {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  font-size: 15px;
  line-height: 21px;
  font-weight: 600;
  letter-spacing: -0.12px;
  color: var(--ka-text-white);
  text-align: center;
  word-break: break-word;
}

@keyframes ka-toast-enter {
  from {
    opacity: 0;
    transform: translateY(var(--ka-motion-toast-distance));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ka-toast-leave {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(var(--ka-motion-toast-distance));
  }
}

.ka-toast--enter {
  animation: ka-toast-enter var(--ka-motion-toast-enter-duration) var(--ka-motion-toast-enter-easing) forwards;
}

.ka-toast--leave {
  animation: ka-toast-leave var(--ka-motion-toast-leave-duration) var(--ka-motion-toast-leave-easing) forwards;
}

/* ── modal:bootstrap ── */
/* 출처: K-Auction.Design / designSystem/css/code/ka.design-system.css 의 "Modal" 섹션(267~704행) 원본 복사.
   위 `modal` 블록(tokens.js 생성분)은 .ka-modal__panel 기반 자체 구현이고, 이 블록은 부트스트랩
   (.ka-modal + .modal-dialog + .modal-content) 기반이다. 두 체계가 한 파일에 공존한다.

   ★ 이 블록은 tokens.js 에서 생성되지 않는다. designSystem/js/generate.js 를 다시 돌리면
     components.css 가 통째로 새로 써지면서 이 블록이 사라진다. 재생성 후엔 다시 붙여야 한다.
     (그래서 원본 들여쓰기 2칸을 그대로 유지했다 — 원본과 diff 를 떠서 재이관하기 위함)

   ★ 위 `modal` 블록과 겹치는 셀렉터
       .ka-modal            — 두 블록의 선언이 동일(무해한 중복)
       .ka-modal__close / __title / __body
                            — 위 블록은 `.ka-modal__panel` 하위로 스코프돼 있어(명시도 0,2,0)
                              여기 무프리픽스 규칙(0,1,0)보다 강하다. __panel 마크업은 영향 없음.

   ★ .modal-backdrop / .modal-backdrop.show 는 .ka-* 프리픽스가 없다.
     이 파일을 로드하는 지면의 "모든" 부트스트랩 모달 백드롭을 덮는다
     (현재 ka.fe.css 는 #2d343a, 여기는 --ka-color-basic-black). */
/* Modal */
.ka-dimmed {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.ka-dimmed.is-open {
  opacity: 1;
  visibility: visible;
}

.ka-modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: none;
  align-items: center;
  justify-content: center;
  /* padding: 20px; */
  overflow-y: auto;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: var(--ka-color-basic-black);
  opacity: 0;
  transition: opacity 0.15s linear;
}

.modal-backdrop.show {
  opacity: 0.5;
}

.ka-modal .modal-dialog {
  position: relative;
  width: 100%;
  min-width: 280px;
  max-width: 320px;
  background: var(--ka-surface-white);
  border-radius: 8px;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.08);

  border: 1px solid var(--ka-color-gray-200);
  background: #fff;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.08);
}

.ka-modal--s .modal-dialog {
  max-width: 340px;
  width: calc(100% - 80px) !important;
}

.ka-modal--r .modal-dialog {
  max-width: 440px;
}

.ka-modal--m .modal-dialog {
  max-width: 568px;
}

.ka-modal--l .modal-dialog {
  max-width: 880px;
}

.ka-modal--xl .modal-dialog {
  max-width: 960px;
}

.ka-modal--xxl .modal-dialog {
  max-width: 1200px;
}

.ka-modal.show .modal-dialog {
  /* height: 100%; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0
}

.ka-modal.show {
  display: flex;
}

.ka-dimmed.is-open .ka-modal {
  transform: none;
}

.ka-modal .modal-content {
  width: 100%;
  box-sizing: border-box;
}

.ka-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ka-text-secondary);
  cursor: pointer;
  line-height: 0;
}

.ka-modal__close:hover {
  color: var(--ka-surface-default);
}

.ka-modal__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
}

.ka-modal__icon--alert {
  background: var(--ka-color-orange-600);
  border-radius: 50%;
  color: var(--ka-surface-white);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

.ka-modal__appbar-close {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ka-surface-default);
  cursor: pointer;
  line-height: 0;
}

.ka-modal__title {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--ka-surface-default);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ka-surface-white);
}

.ka-modal--m .ka-modal__title {
  font-size: 16px;
  line-height: 20px;
}

/* 본문 — Figma 모달 본문: 15px / 23 / Regular / tracking -0.12px(=-0.008em) */
.ka-modal:not(.bid-confirmation-modal) .ka-modal__body {
  color: var(--ka-color-gray-1000);
  font-size: 15px;
  font-weight: 400;
  line-height: 23px;
  margin: 0;
  padding: 40px 20px;
}

.ka-modal.ka-modal__message .ka-modal__body {
  padding: 32px 20px;
}

.ka-modal__body p {
  margin: 8px 0 0;
}

/* 좌측 정렬 변형(헤더에 X 쓰는 경우 등) */
.ka-modal--left .ka-modal__title,
.ka-modal--left .ka-modal__body {
  text-align: left;
}

.ka-modal__appbar {
  padding: 0;
}

.ka-modal__appbar .ka-modal__title {
  height: 56px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
}

.ka-modal.ka-modal__appbar .ka-modal__body {
  padding: 22px 20px 40px 20px;
}

.ka-modal.ka-modal__warning .ka-modal__body {
  padding: 0;
}

/* 푸터(버튼 영역) — 기본 2버튼 균등 분할 */
.ka-modal__footer {
  display: flex;
  gap: 8px;
  padding: 0 20px 16px 20px;
}

.ka-modal__footer .ka-btn {
  flex: 1;
}

.ka-modal__footer .ka-btn.ka-btn--size-52 {
  height: 52px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.128px;
}

.ka-modal--r .ka-modal__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}

.ka-modal--r:not(.bid-confirmation-modal) .ka-modal__body,
.ka-modal--m .ka-modal__body {
  padding: 0 20px 20px 20px;
}

.ka-modal--r .ka-modal__footer,
.ka-modal--m .ka-modal__footer {
  padding: 20px;
}

/* 선택 리스트(Decision Modal) */
.ka-modal__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.ka-modal__list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 52px;
  padding: 0 16px;
  box-sizing: border-box;
  border: 1px solid var(--ka-border-gray-lighter);
  border-radius: 8px;
  background: var(--ka-surface-white);
  font-size: 15px;
  color: var(--ka-surface-default);
  text-align: left;
  cursor: pointer;
  transition:
    background 0.12s,
    border-color 0.12s;
}

.ka-modal__list-item:hover {
  background: var(--ka-surface-gray-lighter);
  border-color: var(--ka-border-gray);
}

.ka-modal__list-item::after {
  /* chevron > */
  content: "";
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-top: 1.5px solid var(--ka-text-secondary);
  border-right: 1.5px solid var(--ka-text-secondary);
  transform: rotate(45deg);
}

/* =============================================================================
   Bottom Sheet (mobile)  — Figma node 7906-10327
   하단에서 올라오는 시트. 구조: 핸들 + 헤더(제목+X) + 콘텐츠 + 하단버튼
   딤에 .ka-dimmed--sheet 를 함께 준다.
   ============================================================================= */
.ka-dimmed--sheet {
  align-items: flex-end;
  padding: 0;
}

.ka-sheet {
  width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: var(--ka-surface-white);
  border-radius: 16px 16px 0 0;
  padding: 0 20px 20px;
  transform: translateY(100%);
  transition: transform 0.25s ease;
}

.ka-dimmed.is-open .ka-sheet {
  transform: none;
}

.ka-sheet__handle {
  width: 40px;
  height: 4px;
  margin: 10px auto 4px;
  border-radius: 2px;
  background: var(--ka-color-gray-300);
  flex-shrink: 0;
}

.ka-sheet__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 12px;
}

.ka-sheet__title {
  margin: 0;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  color: var(--ka-surface-default);
}

.ka-sheet__close {
  margin-left: auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ka-text-secondary);
  cursor: pointer;
  line-height: 0;
}

.ka-sheet__body {
  overflow-y: auto;
  padding: 4px 0;
}

.ka-sheet__footer {
  padding-top: 12px;
}

.ka-sheet__footer .ka-btn {
  width: 100%;
}

/* =============================================================================
   Responsive modal  — 데스크톱: 중앙 .ka-modal / 모바일(<48rem): 하단 시트로 도킹
   딤에 .ka-dimmed--responsive 를 함께 준다. 단일 .ka-modal 마크업으로 반응형 처리.
   (모바일 우선 화면에서 확인/안내 다이얼로그가 하단 시트로 올라오게 할 때 사용)
   ============================================================================= */
/* 모바일 기본: 하단에서 올라오는 풀폭 시트 */
.ka-dimmed--responsive {
  align-items: flex-end;
  padding: 0;
}

.ka-dimmed--responsive .ka-modal {
  max-width: 100%;
  min-width: 0;
  border-radius: 16px 16px 0 0;
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 20px);
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.16);
  transform: translateY(100%);
}

.ka-dimmed--responsive.is-open .ka-modal {
  transform: none;
}

/* ---- 모바일(<48rem): 사이즈 무시하고 변형별로 동작 ---------------------------- */
@media (max-width: 47.99rem) {

  /* 변형(B): 바텀시트 — 아래서 슬라이드업, 상단만 radius */
  .ka-modal--sheet-mobile {
    align-items: flex-end;
  }

  .ka-modal--sheet-mobile .modal-dialog {
    margin: 0;
    max-width: none;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform 0.25s ease;
  }

  .ka-modal--sheet-mobile.show .modal-dialog {
    transform: none;
  }

  .ka-modal--sheet-mobile .ka-modal__grabber {
    display: block;
  }

  /* 변형(C): 풀스크린 — 화면 전체 */
  .ka-modal--full .modal-dialog {
    margin: 0;
    max-width: none;
    min-height: 100vh;
    border-radius: 0;
  }
}

/* 데스크톱(≥48rem): 중앙 카드 복원 (사이즈 클래스 폭 유지) — mobile-first 컨벤션 */
@media (min-width: 48rem) {
  .ka-dimmed--responsive {
    align-items: center;
    padding: 20px;
  }

  .ka-dimmed--responsive .ka-modal {
    border-radius: 8px;
    padding-bottom: 20px;
    box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.32);
    transform: translateY(8px) scale(0.98);
  }

  .ka-dimmed--responsive.is-open .ka-modal {
    transform: none;
  }

  .ka-dimmed--responsive .ka-modal--s {
    max-width: 320px;
  }

  .ka-dimmed--responsive .ka-modal--r {
    max-width: 440px;
  }

  .ka-dimmed--responsive .ka-modal--m {
    max-width: 568px;
  }
}

@media (max-width: 767px) {
  .ka-modal {
    justify-content: end;
  }

  .ka-modal__appbar .ka-modal__title {
    padding: 16px 20px 0 20px;
    height: auto;
  }

  .ka-modal:not(.ka-modal--s) .modal-dialog {
    max-width: 100%;
  }

  .ka-modal .modal-dialog {
    border-radius: 20px 20px 0 0;
    background: var(--ka-color-basic-white);
    box-shadow: 0 -2px 10px 0 rgba(0, 0, 0, 0.16);
  }

  .ka-modal:not(.ka-modal--s, .bid-confirmation-modal) .ka-modal__body {
    padding: 0 20px 24px 20px;
  }

  .ka-modal__footer {
    padding: 10px 20px;
  }
}

/* ── modal:bootstrap-compat ── */
/* DS 원본이 아니다 — 위 modal:bootstrap 블록을 실제 부트스트랩 위에서 쓰기 위한 보정층.
   원본 블록과 섞지 않게 따로 둔다(DS 가 바뀌면 위 블록만 통째로 교체하면 된다).

   DS 모달은 부트스트랩 클래스명을 쓰지만 부트스트랩 CSS 없이 동작하도록 짜여 있다
   (DS 데모 페이지 html/code/modal.html 은 bootstrap.css 를 로드하지 않는다).
   그래서 DS 는 카드(배경·보더·라운드·그림자)를 .modal-dialog 에 그리는데,
   진짜 부트스트랩에서 .modal-dialog 는 중앙정렬 컨테이너다
   (.modal-dialog-centered { min-height: calc(100% - 3.5rem) }) — 카드를 여기 그리면
   화면 높이만큼 늘어난 흰 기둥이 된다.
   따라서 카드를 .modal-content 로 옮긴다(이 프로젝트의 기존 모달들과도 같은 위치다).
   값은 DS 원본 .ka-modal .modal-dialog 의 것을 그대로 옮겼다. */
.ka-modal .modal-dialog {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.ka-modal .modal-content {
  background: var(--ka-surface-white);
  border: 1px solid var(--ka-color-gray-200);
  border-radius: 8px;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* 부트스트랩 4 의 .modal-dialog 는 576px 미만에서 `margin: .5rem` 이라 좌우 auto 가 없다
   (576px 이상에서만 `margin: 1.75rem auto` 로 가운데 정렬된다).
   DS 는 크기 변형마다 max-width 를 못 박으므로 — .ka-modal--s 는 340px — 그보다 좁은 화면이
   아니면 그 폭 그대로 왼쪽에 붙는다. 좌우 auto 를 되살려 폭과 무관하게 가운데로 둔다.
   우측 드로어(.slide-right)는 자기 규칙의 `margin: 0` 이 더 구체적이라 영향을 받지 않는다. */
.ka-modal .modal-dialog {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .modal.ka-modal--m .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 100%;
    margin: 0;
  }

  .modal.ka-modal--m .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}