/* =====================================================================
   커맨드 팔레트

   화면 한가운데가 아니라 위쪽(15vh)에 띄운다.
   눈은 화면 상단에 있고, 아래에서 올라오는 것보다 위에서 내려오는 쪽이
   "덮어쓴다"는 느낌이 약하다. 뒤 화면을 계속 참고할 수 있어야 한다.
   ===================================================================== */

.pal-back {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(15, 15, 14, .38);
  backdrop-filter: blur(3px);
  display: flex; justify-content: center; align-items: flex-start;
  padding: 15vh 20px 20px;
  animation: pal-fade .1s ease;
}
@keyframes pal-fade { from { opacity: 0 } to { opacity: 1 } }

.pal {
  width: min(620px, 100%);
  background: var(--ux-surface);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 70px rgba(16, 24, 40, .28);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 62vh;
  animation: pal-in .14s cubic-bezier(.2, .9, .3, 1.02);
}
@keyframes pal-in { from { transform: translateY(-8px) scale(.995); opacity: 0 } to { transform: none; opacity: 1 } }

.pal__inputrow {
  display: flex; align-items: center; gap: 11px;
  padding: 0 16px;
  height: 56px;
  border-bottom: 1px solid var(--ux-line);
  color: var(--ux-ink-400);
  flex: 0 0 auto;
}
.pal__input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: none;
  font-family: var(--font);
  font-size: 16px; font-weight: 700; letter-spacing: -.02em;
  color: var(--ux-ink-900);
}
.pal__input::placeholder { color: var(--ux-ink-400); font-weight: 650; }
.pal__esc {
  font-family: var(--font); font-size: 10px; font-weight: 800;
  color: var(--ux-ink-400);
  border: 1px solid var(--ux-line); border-radius: 5px;
  padding: 2px 6px;
}

.pal__list { overflow-y: auto; padding: 6px; flex: 1 1 auto; }

.pal__group {
  padding: 9px 10px 5px;
  font-size: 10px; font-weight: 850; letter-spacing: .06em;
  color: var(--ux-ink-400);
}

.pal__row {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
}
/* 선택은 파랑으로 채운다. 팔레트에서 파랑은 "지금 여기" 하나만 뜻한다. */
.pal__row.is-on { background: var(--ux-blue); }
.pal__row.is-on .pal__t { color: #fff; }
.pal__row.is-on .pal__s { color: rgba(255,255,255,.72); }
.pal__row.is-on .pal__thumb--icon { background: rgba(255,255,255,.18); color: #fff; border-color: transparent; }
.pal__row.is-on .pal__qty { color: #fff; }
.pal__row.is-on .badge { background: rgba(255,255,255,.18); color: #fff; border-color: transparent; }

.pal__thumb {
  width: 32px; height: 32px; flex: 0 0 auto;
  padding: 3px;
  border-radius: var(--r-xs);
  border: 1px solid var(--ux-line);
  background: var(--ux-canvas) center/contain no-repeat;
}
.pal__thumb--icon { display: grid; place-items: center; color: var(--ux-ink-400); }

.pal__t {
  font-size: 13.5px; font-weight: 750; letter-spacing: -.015em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pal__s {
  font-size: 11px; font-weight: 650; color: var(--ux-ink-400);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pal__qty {
  font-size: 14px; font-weight: 850; font-variant-numeric: tabular-nums;
  color: var(--ux-ink-700);
}

.pal__empty {
  padding: 34px 20px; text-align: center;
  color: var(--ux-ink-400); font-size: 13px; font-weight: 650;
}

.pal__foot {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 14px;
  border-top: 1px solid var(--ux-line);
  background: var(--ux-surface-soft);
  font-size: 10.5px; font-weight: 700; color: var(--ux-ink-500);
  flex: 0 0 auto;
}
.pal__foot kbd {
  font-family: var(--font); font-size: 9.5px; font-weight: 800;
  border: 1px solid var(--ux-line-strong); border-radius: 4px;
  padding: 1px 5px; margin: 0 1px;
  background: var(--ux-surface);
}

/* 상단바의 검색 힌트 — 팔레트가 있다는 걸 알려야 쓴다.
   단축키는 존재를 모르면 없는 기능이다. */
.searchhint {
  display: flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 10px 0 11px;
  border: 1px solid var(--ux-line-strong);
  border-radius: var(--r-sm);
  background: var(--ux-canvas);
  color: var(--ux-ink-400);
  font-size: 12px; font-weight: 650;
  cursor: pointer; min-width: 210px;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.searchhint:hover { border-color: var(--ux-blue); background: var(--ux-blue-soft); color: var(--ux-blue); }
.searchhint kbd {
  margin-left: auto;
  font-family: var(--font); font-size: 9.5px; font-weight: 800;
  border: 1px solid var(--ux-line-strong); border-radius: 4px;
  padding: 1px 5px; background: var(--ux-surface); color: var(--ux-ink-500);
}


/* 이름과 규격을 같은 무게로 두면 여전히 구분이 안 된다.
   이름은 진하게, 규격은 물러나되 읽히게. */
.pal__spec { font-weight: 650; color: var(--ux-ink-500); margin-left: 6px; }
.pal__row.is-on .pal__spec { color: rgba(255,255,255,.8); }