/* =============================================
 *  검색 스타일
 *  =============================================
 *  상단 검색바와 Ctrl+K 커맨드 팔레트(명령 검색 팝업)의
 *  모든 스타일을 정의합니다.
 */

/* === 상단 검색바 === */
/* 검색 입력 영역 컨테이너 */
.search-container {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 400px;
  width: 100%;
}

/* 검색 아이콘 (돋보기) */
.search-icon {
  position: absolute;
  left: var(--space-3);
  font-size: 18px;
  color: var(--color-text-tertiary);
  pointer-events: none; /* 클릭이 아이콘을 통과하여 인풋에 전달되도록 */
}

/* 검색 입력 필드 */
.search-input {
  width: 100%;
  padding: var(--space-2) var(--space-3) var(--space-2) 40px; /* 왼쪽에 아이콘 공간 확보 */
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  transition: all var(--transition-fast);
}

.search-input:focus {
  background-color: var(--color-bg-primary);
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(232, 145, 58, 0.08);
}

.search-input::placeholder {
  color: var(--color-text-tertiary);
}

/* 키보드 단축키 표시 (Ctrl+K) */
.search-shortcut {
  position: absolute;
  right: var(--space-3);
  padding: 2px 6px;
  background-color: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  font-family: inherit;
  pointer-events: none;
  line-height: 1.4;
}

/* 검색 결과 드롭다운 (인라인) */
.search-results {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  right: 0;
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  max-height: 320px;
  overflow-y: auto;
  animation: slideDown var(--transition-base) ease;
}

/* 검색 결과 개별 항목 */
.search-result-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.search-result-item:hover,
.search-result-item--focused {
  background-color: var(--color-bg-hover);
}

.search-result-item:first-child {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.search-result-item:last-child {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* 검색 결과 아이콘 */
.search-result-item__icon {
  font-size: 18px;
  color: var(--color-text-tertiary);
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 검색 결과 텍스트 */
.search-result-item__text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.search-result-item__name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.search-result-item__desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

/* 검색 결과 없음 메시지 */
.search-results__empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-base);
}


/* === 커맨드 팔레트 (Ctrl+K 팝업) === */
/* 커맨드 팔레트: Ctrl+K로 열리는 전체화면 검색 오버레이 */
.command-palette {
  position: fixed;
  inset: 0;                /* 화면 전체를 덮음 (top/right/bottom/left: 0) */
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 20vh;       /* 화면 상단 20%에 위치 */
}

/* 반투명 배경 (팝업 뒤) */
.command-palette__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--color-bg-overlay);
  animation: fadeIn 150ms ease;
}

/* 팝업 대화상자 */
.command-palette__dialog {
  position: relative;
  width: 100%;
  max-width: 560px;
  background-color: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  animation: scaleIn var(--transition-base) ease;
}

/* 팝업 검색 입력 영역 */
.command-palette__search {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-light);
}

.command-palette__search .material-icons-outlined {
  font-size: 20px;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

.command-palette__search input {
  flex: 1;
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
  background: none;
}

.command-palette__search input::placeholder {
  color: var(--color-text-tertiary);
}

/* 팝업 검색 결과 목록 */
.command-palette__results {
  max-height: 360px;
  overflow-y: auto;
  padding: var(--space-2);
}

/* 팝업 검색 결과 개별 항목 */
.command-result-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.command-result-item:hover,
.command-result-item--focused {
  background-color: var(--color-primary-bg);
}

/* 팝업 결과 아이콘 */
.command-result-item__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.command-result-item:hover .command-result-item__icon,
.command-result-item--focused .command-result-item__icon {
  background-color: var(--color-primary-bg-hover);
}

.command-result-item__icon .material-icons-outlined {
  font-size: 18px;
  color: var(--color-text-secondary);
}

.command-result-item:hover .command-result-item__icon .material-icons-outlined,
.command-result-item--focused .command-result-item__icon .material-icons-outlined {
  color: var(--color-primary);
}

/* 팝업 결과 텍스트 */
.command-result-item__info {
  flex: 1;
}

.command-result-item__name {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.command-result-item__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  margin-top: 1px;
}

/* 팝업 결과 단축키 표시 */
.command-result-item__shortcut {
  display: flex;
  gap: var(--space-1);
}

.command-result-item__shortcut kbd {
  padding: 2px 6px;
  background-color: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  font-family: inherit;
}

/* 팝업 결과 없음 */
.command-palette__empty {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-text-tertiary);
}

.command-palette__empty-icon {
  font-size: 2rem;
  margin-bottom: var(--space-3);
  opacity: 0.4;
}

.command-palette__empty-text {
  font-size: var(--font-size-md);
}