/* UX_PLAN.md — 담당자 검색 도구 */
:root {
  /* ===== 브랜드 (ACE Red) — 단일 소스. 한국 가맹점 색 확정 시 이 한 줄만 교체 ===== */
  --brand: #D40029;            /* ACE Red (acehardware.com theme-color · 공식몰 빨강 마크) */
  --brand-strong: #a80020;     /* hover/pressed */
  --brand-ink: #8a001a;        /* 텍스트용 짙은 레드(대비 확보) */
  --brand-tint: #fff0f3;       /* 선택 행·추천 채우기 옅은 면 */
  --brand-tint-2: #ffe3e9;     /* 보조 옅은 면 */
  /* 하위호환 별칭(기존 규칙이 참조 — 절대 제거 금지) */
  --ace-red: var(--brand);
  --ace-red-dark: var(--brand-strong);
  --ace-red-tint: var(--brand-tint);
  /* 운영사 유진홈센터(EUGENE) 네이비 — EUGENE 로고 색 근사(추후 실제 로고 파일로 교체) */
  --eugene: #0c3f86;

  /* ===== 의미색 — 빨강 과부하 제거. 역할마다 다른 색 ===== */
  --info: #2f5fb0;             /* 추천 / 검색 동작 계열(차분한 스틸블루) */
  --info-strong: #244b8d;
  --info-tint: #eef2fb;
  --amber: #a4690e;            /* 거래건수 Top 강조(머스타드) */
  --amber-tint: #fbf3e3;
  --success: #1a7f37;          /* 정상 상태 */
  --success-tint: #e7f4ec;
  --danger: #c0182d;           /* 중복·오류(빨강과 구분되는 경고) */
  --danger-tint: #fdecee;
  --status-warning: #ff9800;   /* 하위호환 별칭 */
  --status-info: var(--info);  /* 하위호환 별칭 */

  /* ===== 중립 스케일 ===== */
  --bg: #ffffff;
  --surface: #f7f7f8;          /* 카드/패널 배경 */
  --surface-2: #f0f1f3;        /* 더 낮은 면 */
  --hover: #f2f3f5;            /* 행/항목 hover */
  --text-strong: #14161a;      /* 제목 */
  --text: #222;                /* 본문 */
  --muted: #666;               /* 보조 텍스트 */
  --muted-2: #8a8f98;          /* 더 흐린 보조 */
  --border: #e3e5e9;           /* 기본 경계 */
  --border-strong: #cfd3da;    /* 강조 경계 */

  /* ===== 타이포 스케일 ===== */
  --fs-h1: 1.75rem;            /* 페이지 제목 */
  --fs-h2: 1.25rem;
  --fs-h3: 1.0625rem;
  --fs-body: 0.9375rem;        /* 15px 본문 */
  --fs-sm: 0.8125rem;          /* 13px 보조 */
  --fs-xs: 0.75rem;            /* 12px 캡션/배지 */
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --font-mono: "SFMono-Regular", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace; /* 상품코드 */

  /* ===== 간격 (4px 그리드) ===== */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* ===== 형태 · 고도 · 포커스 ===== */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(20, 22, 30, 0.06), 0 1px 3px rgba(20, 22, 30, 0.04);
  --shadow-md: 0 2px 8px rgba(20, 22, 30, 0.08), 0 1px 3px rgba(20, 22, 30, 0.06);
  --shadow-lg: 0 8px 28px rgba(20, 22, 30, 0.16);
  --focus-ring: 0 0 0 3px rgba(212, 0, 41, 0.28); /* 키보드 포커스(브랜드) */
  --focus-ring-info: 0 0 0 3px rgba(47, 95, 176, 0.28);
  --dur: 0.15s; /* 전환 기본 시간 */

  /* ===== 레이아웃 ===== */
  --sidebar-w: 260px;
  --export-bar-h: 56px;

  /* ===== 로고 글씨체 ===== */
  --logo-font: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  /* 실제 ACE Hardware 로고풍 — 굵고 앞으로 기운 그로테스크 산세리프(이탤릭) */
  --logo-font-brand: "Archivo Black", "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --logo-font-eugene: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* 세로 스크롤바 유무로 본문 폭이 흔들려 우상단 로고 위치가 페이지마다 어긋나는 것 방지(항상 거터 확보) */
html { scrollbar-gutter: stable; }
/* 모든 스크롤바를 검색이력 사이드바처럼 얇고 흐리게 — 전역 통일(진하거나 크면 거슬림). */
* { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.1) transparent; }
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.1); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.2); }

/* hidden 속성은 display 지정(flex/grid 등)보다 항상 우선 — 토글 요소가 새기지 않게 */
[hidden] { display: none !important; }

/* 키보드 접근성 — 마우스 클릭엔 안 뜨고 Tab 이동 시에만 포커스 링(통일된 한 가지 스타일) */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

body {
  margin: 0;
  font-family: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  color: var(--text);
  background: #fff;
}

.layout {
  display: flex;
  min-height: 100vh;
}

.layout.sidebar-collapsed .sidebar {
  width: 0;
  padding: 0;
  overflow: hidden;
  border: none;
}

.main-content {
  flex: 1;
  min-width: 0;
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 28px 32px;
}

/* 랜딩: 본문은 전체 폭으로 펴서 상단바(좌측 토글/스텝퍼·우측 홈)가 양끝에 붙게.
   검색창·브랜드가 든 hero만 가운데로 좁게 유지(너비·글씨 그대로). */
.page-landing .main-content {
  max-width: none;
  width: auto;
  margin: 0;
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
  flex-direction: column;
}
.page-landing .search-hero {
  max-width: 1000px;
  width: 100%;
  margin: auto;
}

/* (구) body.page-intake-home(landing형 flex 세로 레이아웃)은 intake가 공통 관리 셸로
   통일되며 제거됨 — 콘텐츠가 다른 관리 페이지처럼 880 열 왼쪽 정렬되게. */

/* 결과 화면은 컬럼이 많아 본문을 넓게 — 양옆 여백 줄이고 표가 숨 쉬게.
   사이드바를 닫으면 그만큼 더 넓어진다(flex:1). */
/* 결과 페이지도 다른 페이지처럼 셸(상단바)은 전체폭 → 로고 위치가 모든 페이지에서 동일.
   넓어야 하는 표 등 내용만 .results-body로 가운데 정렬(최대 폭 유지). */
.page-results .main-content {
  max-width: none;
  width: auto;
  margin: 0;
  padding-left: 24px;
  padding-right: 24px;
}
.results-body { max-width: 1100px; margin: 0 auto; }
/* 칩 클릭 시 CSS order로 블록 순서 변경 → DOM/인덱스 불변 */
.results-form { display: flex; flex-direction: column; }

/* 내보내기 화면: 상단바(좌측 토글/스텝퍼·우측 홈)는 양끝에 붙이고(랜딩·결과와 동일),
   본문 내용만 가운데 좁게 유지. */
.page-output .main-content {
  max-width: none;
  width: auto;
  margin: 0;
  padding-left: 24px;
  padding-right: 24px;
}
.output-body {
  max-width: 960px;
  margin: 0 auto;
  padding-top: 32px;
}

.main-content--with-bar {
  padding-bottom: calc(var(--export-bar-h) + 32px);
}

/* ---------- 사이드바 ---------- */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  padding: 12px;
  transition: width 0.2s ease;
  /* 화면 높이에 고정 — 채팅 목록만 내부 스크롤, 사용법·보관함은 항상 보이게 */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.sidebar-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.sidebar-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 1.1rem;
}

.sidebar-new {
  flex: 1;
  display: block;
  text-align: center;
  background: var(--ace-red);
  color: #fff;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
}

.sidebar-new:hover { background: var(--ace-red-dark); }

.sidebar-list {
  flex: 1;
  overflow-y: auto;
}

.sidebar-row {
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin-bottom: 4px;
  border: 1px solid transparent;   /* active 행이 그릴 테두리 자리 — 모든 행 동일 크기 유지 */
  border-radius: 6px;
  padding-right: 6px;              /* 삭제 버튼과 우측 테두리 사이 여백 */
}

/* active 표시는 행 전체에 — 링크·액션 버튼(삭제 포함)까지 한 박스로 감싼다. */
.sidebar-row.active {
  background: var(--ace-red-tint);
  border-color: var(--ace-red);
}
/* active 행에선 링크 hover 회색 박스가 빨간 틴트를 덮지 않게 한다. */
.sidebar-row.active .sidebar-item:hover {
  background: transparent;
}

.sidebar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.sidebar-item:hover { background: #eee; }

.sidebar-item-top {
  display: flex; align-items: center; gap: 6px; min-width: 0;
}
/* 점 인디케이터 */
.sidebar-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: #d0d5db;
  transition: background .15s;
}
.sidebar-row.active .sidebar-dot { background: var(--ace-red); }

.sidebar-q {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-time {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  padding-left: 13px; /* dot(7px) + gap(6px) 맞춤 들여쓰기 */
}

.sidebar-empty {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  padding: 8px;
}

.sidebar-footer {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  flex-shrink: 0;
  display: flex;
  gap: 16px;
  font-size: 13px;
}

.sidebar-footer a {
  color: var(--ace-red);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.sidebar-footer a:hover { text-decoration: underline; }
.sidebar-footer svg { display: block; }

/* ---------- 방 행 인라인 액션(이름변경·보관·고정·삭제) ---------- */
.sidebar-row-actions {
  display: flex;
  align-items: center;
  gap: 1px;
}
.sidebar-row-actions form { margin: 0; display: flex; }

.row-act {
  display: none;              /* 평소 숨김 + 레이아웃에서 제외 → 제목이 행 폭을 거의 다 쓰게 */
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: none;
  border-radius: 6px;
  color: var(--muted-2);
  cursor: pointer;
}
.sidebar-row:hover .row-act,
.sidebar-row.active .row-act { display: inline-flex; }
/* 고정된 행은 핀만 항상 보이게(나머지 아이콘은 hover 때만). */
.row-act-pin.is-pinned { display: inline-flex; color: var(--ace-red); }
.row-act:hover { background: var(--hover); color: var(--text); }
.row-act-danger:hover { color: var(--danger); }

/* 고정된 방은 드래그로 순서 변경 가능 — 잡을 수 있음을 커서로 알린다. */
.sidebar-row.is-pinned-row { cursor: grab; }
.sidebar-row.is-dragging { opacity: .5; cursor: grabbing; }

/* 이름 인라인 편집 — 연필 클릭 시 입력칸이 행 자리에 나타난다(Enter 저장·Esc/포커스아웃 취소) */
.sidebar-rename-form { display: none; flex: 1; align-items: center; min-width: 0; }
.sidebar-row.is-renaming .sidebar-item,
.sidebar-row.is-renaming .sidebar-row-actions { display: none; }
.sidebar-row.is-renaming .sidebar-rename-form { display: flex; }
.sidebar-rename-input {
  width: 100%;
  font: inherit;
  font-size: 13px;
  padding: 7px 9px;
  border: 1px solid var(--ace-red);
  border-radius: 6px;
  outline: none;
}

/* ---------- 상단바 환경설정(톱니바퀴) 드롭다운 — 방 메뉴와 동일한 details 패턴 ---------- */
.settings-menu { position: relative; display: inline-flex; }
.settings-toggle {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 6px;
  color: var(--muted);
  border-radius: 6px;
}
.settings-toggle::-webkit-details-marker { display: none; }
.settings-toggle:hover { background: var(--surface); color: var(--ace-red); }
.topbar-icon-link {
  display: inline-flex; align-items: center;
  padding: 6px; color: var(--muted); border-radius: 6px; text-decoration: none;
}
.topbar-icon-link:hover { background: var(--surface); color: var(--ace-red); }
.settings-menu[open] .settings-toggle { color: var(--ace-red); }
.settings-panel {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 50;
  margin-top: 4px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  padding: 6px;
  min-width: 168px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-panel a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap;
}
.settings-panel a:hover { background: var(--surface); }
.settings-panel svg { display: block; flex-shrink: 0; }

/* (구) .dict-pagehead(사전 페이지 헤더)는 관리·사전 탭이 공통 _admin_header로 통일되며 제거됨. */

/* ---------- 로고 · 검색창 ---------- */
.site-header {
  text-align: center;
  margin-bottom: 20px;
}

/* ACE Hardware 가로 로고 — 홈(랜딩) 화면 중앙 */
.brand-logo {
  display: block;
  height: 60px;          /* 결과 화면 로고와 동일 크기로 통일 */
  width: auto;
  margin: 0 auto 8px;   /* 유진홈센터와 간격: 26px → 8px */
}

/* ACE Hardware 가로 로고 — 결과·내보내기 화면 헤더(유진홈센터 부제 동반). */
.brand-lockup-logo {
  display: block;
  height: 60px;          /* 입구(landing) 로고와 동일 크기로 통일 */
  width: auto;
  margin: 0 auto 4px;
}

/* 결과 화면 중앙 로고 — 이미지 기반, 링크 스타일 초기화 */
.site-header--results {
  display: block;
  text-decoration: none;
  color: inherit;
  margin: 8px 0 20px;
}
.brand-operator-logo { display: block; height: 30px; width: auto; margin: 12px auto 0; }

.brand-ace {
  font-family: var(--logo-font-brand);
  /* 좁은 화면에서 'ACE Hardware'가 잘리지 않게 유동 크기 — 데스크톱은 2.7rem 그대로, 좁으면 자동 축소. */
  font-size: clamp(1.5rem, 8vw, 2.7rem);
  font-weight: 900;
  font-style: italic;
  margin: 0;
  white-space: nowrap;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.brand-ace .b-ace { color: var(--ace-red); }
.brand-ace .b-hw { color: #111; }

/* 결과 화면 등 컴팩트 텍스트 브랜드(로고 넣기 전 원래 크기) */
.site-header--compact { margin: 6px 0 12px; }
.site-header--compact .brand-ace { font-size: 22px; }

.search-bar {
  display: flex;
  align-items: stretch;
  border: 2px solid var(--border);
  border-radius: 28px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.search-bar:focus-within { border-color: var(--ace-red); }
.search-bar.is-drag { border-color: var(--ace-red); background: var(--brand-tint); }

.search-input {
  flex: 1;
  border: none;
  padding: 14px 18px;
  font-size: 16px;
  resize: none;
  font-family: inherit;
  min-height: 52px;
}

/* 검색바는 :focus-within 빨간 테두리로 포커스를 표시하므로, textarea 자체의 포커스 링(box-shadow)은
   제거한다 — 안 그러면 overflow:hidden에 잘려 사진 버튼 왼쪽에 세로 빨간 줄로 보인다. */
.search-input:focus, .search-input:focus-visible { outline: none; box-shadow: none; }

.search-bar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 8px;
}

.gallery-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  height: 40px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--muted);
  border: none;
  background: none;
}
.gallery-btn:hover { background: var(--surface); color: var(--ace-red); }

.gallery-btn__label {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

/* 사진 버튼 자리를 그대로 쓰는 파일 메뉴 팝오버(사진으로 검색 / 파일첨부) */
.file-menu { position: relative; }
.file-menu__list {
  position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 20;
  min-width: 168px; padding: 6px;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.file-menu__item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 10px; border: none; background: none; border-radius: 6px;
  font-size: 14px; color: var(--text); cursor: pointer; text-align: left;
}
.file-menu__item:hover { background: var(--surface); color: var(--ace-red); }

.mic-btn {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: none; border: none; cursor: pointer; color: var(--muted);
}
.mic-btn:hover { background: var(--surface); color: var(--ace-red); }
.mic-btn.is-recording {
  color: #fff; background: var(--ace-red);
  animation: mic-pulse 1.1s ease-in-out infinite;
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,0,41,0.45); }
  50% { box-shadow: 0 0 0 6px rgba(212,0,41,0); }
}

/* 예시 칩 — 기본 숨김, 포커스 시 등장 */
.search-examples {
  display: none;
  flex-wrap: wrap; justify-content: center; gap: 6px;
  margin: 10px 0 0;
}
.search-bar-form:focus-within .search-examples { display: flex; }
.search-example-chip {
  border: 1px solid var(--border); background: #fff; border-radius: 20px;
  padding: 5px 14px; font-size: 12.5px; color: var(--text);
  cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s;
}
.search-example-chip:hover { border-color: var(--ace-red); color: var(--ace-red); background: var(--ace-red-tint); }

.search-hint {
  margin: 8px 0 0; font-size: 11.5px; color: #b0b8c1; line-height: 1.6; text-align: center;
  transition: font-size .15s;
}
/* 포커스 시 힌트 한 줄로 축소 */
.search-bar-form:focus-within .search-hint { font-size: 10.5px; color: #c5cdd6; }
/* 음성 입력 상태·에러 안내 */
.voice-status {
  margin: 8px 2px 0; font-size: 12.5px; line-height: 1.5; color: var(--ace-red);
}
.voice-status--error { font-weight: 700; }
.search-hint kbd {
  font-family: inherit; font-size: 11px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
  padding: 1px 5px;
}

.gallery-input { display: none; }

.search-submit {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--ace-red);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-submit:hover { background: var(--ace-red-dark); }

.search-submit:disabled { opacity: 0.6; cursor: wait; }

.ocr-upload-form { display: none; }

/* ---------- OCR 전사 검토 (사진 좌 · 텍스트 우) ---------- */
.ocr-review {
  margin-bottom: 24px;
}

.ocr-review-layout {
  display: grid;
  grid-template-columns: minmax(220px, 42%) 1fr;
  gap: 20px;
  align-items: start;
}

.ocr-review-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ocr-review-image img {
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fafafa;
}

.ocr-review-image .ocr-repick-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  margin: 10px 0 0;
  width: 100%;
  justify-content: center;
  padding: 9px 16px;
  box-sizing: border-box;
}

/* 파일첨부(PDF·엑셀·CSV) 검토 화면 — 사진 대신 파일명 카드로 보여준다 */
.ocr-review-file-card {
  display: flex; align-items: center; gap: 10px;
  padding: 24px 16px; border: 1px solid var(--border); border-radius: 8px;
  background: #fafafa; color: var(--text); font-size: 14px; font-weight: 600;
}
.ocr-review-file-name { word-break: break-all; }

.ocr-review-textarea {
  width: 100%;
  min-height: 480px;
  padding: 14px 16px;
  font-size: 16px;
  line-height: 1.55;
  font-family: inherit;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  resize: vertical;
  outline: none;
  transition: border-color .15s;
  box-sizing: border-box;
}

.ocr-review-textarea:focus {
  border-color: var(--ace-red);
}

.ocr-review-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.ocr-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  padding: 10px 24px;
  margin: 0;
  border-radius: 6px;
  font-weight: 700;
  font-size: 15px;
}

@media (max-width: 768px) {
  .ocr-review-layout {
    grid-template-columns: 1fr;
  }
  .ocr-review-image img {
    max-height: 360px;
  }
}

/* 검색창 아래 조용한 안내(회색 카드 폐기 — 박스 없이 가운데 정렬 텍스트로) */
.search-guide { margin-top: 18px; text-align: center; }
.search-hero__title { margin: 0 0 66px; text-align: center; font-size: 36.975px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; word-break: keep-all; line-height: 1.35; }
.search-hero__accent { color: var(--ace-red); }
.search-guide__sub { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }

/* 데스크탑(≥641px)에선 한 줄로 — <br> 숨김, 인라인 빨간 강조. */
@media (min-width: 641px) {
  .search-hero__title br { display: none; }
}
/* 모바일(≤640px)에선 두 줄로 줄바꿈 유지 + 글자 크기 축소. */
@media (max-width: 640px) {
  .search-hero__title { font-size: 24px; }
}
/* 갤럭시 폴드(접은 ~280px) 등 초협폭에선 한 단계 더 줄여 외톨이 음절('다.')을 줄인다. */
@media (max-width: 360px) {
  .search-hero__title { font-size: 21px; }
}

/* ---------- 알림 ---------- */
.alert {
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 14px;
}
.alert-error { background: var(--danger-tint); color: var(--danger); border: 1px solid #f3c2c8; }
.alert-warn { background: var(--amber-tint); color: var(--amber); border: 1px solid #ecdca6; }
.alert-info { background: var(--info-tint); color: var(--info-strong); border: 1px solid #cdd9f0; }

.loading-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--muted);
  font-size: 14px;
  margin-top: 8px;
}
.loading-hint::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #e8e8e8;
  border-top-color: var(--ace-red);
  border-radius: 50%;
  flex-shrink: 0;
  animation: page-loading-spin 0.75s linear infinite;
}

.is-loading .loading-hint { display: flex !important; }
.is-loading .search-submit { opacity: 0.6; }

.page-loading {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.88);
}

.page-loading[hidden] { display: none !important; }

.page-loading__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px 32px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.page-loading__spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #f0f0f0;
  border-top-color: var(--ace-red);
  border-radius: 50%;
  animation: page-loading-spin 0.75s linear infinite;
}

@keyframes page-loading-spin {
  to { transform: rotate(360deg); }
}

.page-loading__text {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

/* ---------- 결과 품목 ---------- */
.page-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 16px;
}
/* 내보내기 검토 제목 — 다른 관리 화면 제목(.page-title 공용)보다 눈에 띄게 키운다 */
.page-output .page-title { font-size: 1.75rem; margin: 4px 0 20px; letter-spacing: -0.01em; }

.section-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ace-red);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
}

.query-echo {
  margin-bottom: 16px;
  padding: 12px;
  background: var(--surface);
  border-radius: 8px;
}

.query-line {
  margin: 4px 0;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}

.item-block {
  border: 1px solid var(--border);
  border-left: 4px solid var(--ace-red);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  scroll-margin-top: 12px;   /* 점프칩으로 스크롤할 때 상단에 약간 여백 */
  background: #fff;
}

/* 품목 삭제 버튼 — 헤더 우측에 작게(오타·잘못된 검색 제외용) */
.btn-delete-item {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 7px;
  cursor: pointer;
}
.btn-delete-item svg { display: block; }
.btn-delete-item:hover { color: var(--ace-red); border-color: var(--ace-red); background: var(--ace-red-tint); }

.item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}

.item-title {
  margin: 0;
  font-size: 1rem;
  flex: 1;
}

.item-name { font-weight: 700; }

.quantity {
  color: var(--muted);
  font-weight: normal;
  margin-left: 8px;
}

.badge-added, .badge-count {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
}

.badge-added { background: #e8f4ff; color: #0066aa; }

/* 표가 컨테이너보다 넓어지면 가로 스크롤(좁은 화면에서 깨지지 않게) */
.table-scroll { overflow-x: auto; overflow-y: clip; -webkit-overflow-scrolling: touch; width: 100%; margin-bottom: 10px; }
.table-scroll table { margin-bottom: 0; min-width: max-content; }

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
  font-size: 14px;
}

th, td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid #eee;
}

th {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

/* 상품상태 — 알약(pill). 정상=그린·발주중단=중립 그레이(중단을 불리하게 다루지 않음, 색은 신호만) */
.status-pill {
  display: inline-block; font-size: var(--fs-xs); font-weight: 700; line-height: 1.5;
  padding: 1px 9px; border-radius: var(--radius-pill); border: 1px solid transparent; white-space: nowrap;
}
.status-pill--ok { color: var(--success); background: var(--success-tint); border-color: #bfe3cb; }
.status-pill--stop { color: var(--muted); background: var(--surface-2); border-color: var(--border-strong); }
/* 하위호환: 혹시 남은 셀 클래스 */
td.status-ok, td.status-stop { color: var(--text); }

/* ===== 후보 표: A 강조형 + E 상품명 고정 + 행 전체 클릭(라디오·품목당 1개) ===== */
.cand-table { font-size: 14px; width: 100%; min-width: max-content; }
.cand-row { cursor: pointer; }
/* 라디오는 행 클릭으로만 제어(직접 클릭 막아 토글 일관) */
.cand-table .pick-cb { pointer-events: none; width: 17px; height: 17px; accent-color: var(--ace-red); margin: 0; }
.col-sel, th.col-sel { width: 52px; text-align: center; }
.cand-name { font-weight: 700; }   /* 상품명 굵게 */
.col-code { width: 120px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }  /* 상품코드 굵게·고정폭 */
.col-name { min-width: 220px; }
.col-2nd { color: var(--muted); font-size: 12.5px; }  /* 브랜드·업체코드·업체명 회색 */
.col-num, th.col-num { text-align: left; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 컬럼 정렬·너비 통일 — 선택만 중앙, 나머지는 모두 좌측 정렬. 너비가 없던 컬럼에 고정폭을 줘
   내용 길이에 따라 들쭉날쭉 늘어나던 문제를 없앤다. (열 순서 고정이라 nth-child로 지정) */
.cand-table td:nth-child(n+4), .cand-table th:nth-child(n+4) { white-space: nowrap; }
.cand-table th:nth-child(4), .cand-table td:nth-child(4) { width: 92px; }    /* 상품상태 */
.cand-table th:nth-child(5), .cand-table td:nth-child(5) { width: 88px; }    /* 거래건수 */
.col-price, th.col-price { width: 100px; }   /* 매입원가 — 클래스로 지정(show_price 숨김 시 nth-child(6)이 판매가로 새는 것 방지) */
/* 7열=판매가(.col-sell). 브랜드·업체명·업체코드는 지점재고 뒤(지점 수만큼 가변 위치)로
   옮겨 nth-child로는 못 잡으므로 클래스로 폭 지정. */
.col-brand { width: 96px; }
.col-supplier { width: 160px; }
.col-suppliercode { width: 120px; }
/* 판매가·판매기준가·지점재고 — 열 위치가 가변(지점 수)이라 클래스로 폭 지정 */
.col-sell, th.col-sell { width: 80px; }
.col-std, th.col-std { width: 80px; }   /* 판매가와 동일 폭 */
.col-inv, th.col-inv { width: 64px; }
th.col-inv { font-size: 12px; color: var(--muted); }  /* 지점명 헤더는 작게·회색 */
td.col-inv.inv-zero { color: var(--muted); opacity: 0.4; }  /* 재고 0은 흐리게 */

/* 판매기준가 유효일 툴팁 — 표(.table-scroll)가 overflow를 clip해서 셀 안 ::after로는 잘린다.
   그래서 body에 붙는 position:fixed 요소(script.js)로 띄운다. 기본 title은 표시 지연(≈1초)을
   못 바꾸므로 커스텀으로 대체해 0.2초에 나오게 한다. */
.cell-tooltip {
  position: fixed;
  z-index: 50;
  transform: translate(0, 2px);   /* 셀 바로 아래, 왼쪽변을 숫자 시작점에 맞춤 */
  background: #333;
  color: #fff;
  font-size: 12px;
  line-height: 1.3;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.cell-tooltip.is-visible { opacity: 1; }

/* 선택 행 강조(연한 빨강) */
tr.is-selected td { background: var(--ace-red-tint); }
/* 거래건수 Top 3 — 점수 셀만 앰버(머스타드). 빨강 아님 */
td.tx-top { color: var(--amber); font-weight: 600; }

/* 필터로 가려진 후보 숨김 */
.cand-row.filtered-out { display: none; }

/* 표 헤더 고정(세로 스크롤 시 칼럼명 유지). overflow-y:clip로 .table-scroll이 세로 스크롤 컨테이너가 되지 않게 함 */
.cand-table thead th { position: sticky; top: 0; z-index: 3; }
.cand-table thead th.col-sel, .cand-table thead th.col-code, .cand-table thead th.col-name { z-index: 4; }

/* 선택 + 상품코드 + 상품명 세 칼럼 고정, 나머지 가로 스크롤(오른쪽 잘림=더 있음 신호) */
.cand-table td.col-sel, .cand-table th.col-sel { position: sticky; left: 0; z-index: 2; background: #fff; }
.cand-table td.col-code, .cand-table th.col-code { position: sticky; left: 52px; z-index: 2; background: #fff; }
.cand-table td.col-name, .cand-table th.col-name { position: sticky; left: 172px; z-index: 2; background: #fff; box-shadow: inset -1px 0 0 var(--border); }
.cand-table thead th.col-sel, .cand-table thead th.col-code, .cand-table thead th.col-name { background: var(--surface); }
tr.is-selected td.col-sel, tr.is-selected td.col-code, tr.is-selected td.col-name { background: var(--ace-red-tint); }

/* 모바일 — 표 방식(고정칼럼+가로스크롤) 유지하되 손가락·좁은 폭에 맞게 다듬기 */
.table-scroll-hint { display: none; }
@media (max-width: 640px) {
  .table-scroll-hint {
    display: block; margin: 0 0 4px; font-size: 11px;
    color: var(--muted-2); text-align: right; letter-spacing: 0.02em;
  }
  .cand-table { font-size: 13px; }
  .cand-table td { padding-top: 11px; padding-bottom: 11px; }   /* 탭 영역 확대 */
  /* 고정 3칼럼 폭 축소(기본 52+120+220=392px → 44+92+128=264px) — 좁은 폰서 스크롤 여유 확보 */
  .col-sel, th.col-sel { width: 44px; }
  .col-code { width: 92px; }
  .col-name { min-width: 128px; }
  .cand-table td.col-code, .cand-table th.col-code { left: 44px; }
  .cand-table td.col-name, .cand-table th.col-name { left: 136px; }
}

/* ===== 블록 접기/펼치기 ===== */
.block-toggle {
  flex-shrink: 0; width: 24px; height: 24px; padding: 0; margin-right: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--muted); cursor: pointer;
}
.block-toggle svg { transition: transform 0.18s ease; }
.item-block.collapsed .block-toggle svg { transform: rotate(-90deg); }
.item-block.collapsed .item-body { display: none; }
.block-summary { font-size: 12px; color: var(--muted); }
.item-block:not(.collapsed) .block-summary { display: none; }
.item-block.collapsed .badge-required { display: none; }

.noresult-block { margin-top: 10px; }

.noresult-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--ace-red);
  cursor: pointer;
}

.manual-panel {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.manual-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.manual-panel input:not(.ks-input),
.manual-panel textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
}

.noresult-hint {
  font-weight: normal;
  color: var(--muted);
  font-size: 12px;
}

/* + 상품코드 추가: 넓은 화면에선 안 벌어지고(최대 220px), 좁은 컨테이너(사이드바 열림 등)에선
   뷰포트가 아니라 '담는 칸'에 맞춰 줄어들어 패널 밖으로 넘치지 않게 한다. */
.extra-add-table { width: 100%; }
.extra-add-table th,
.extra-add-table td { padding: 6px 8px; }
.extra-add-table input {
  width: 100%;
  max-width: 220px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
}
.extra-del-cell { text-align: center; }
.extra-del {
  background: none; border: none; color: var(--muted);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 4px 8px;
}
.extra-del:hover { color: var(--ace-red); }

/* 질의 echo — 품목별 한 줄 */
.query-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border);
}
.query-line:last-child { border-bottom: none; }
.query-line-name { font-weight: 600; }
.query-line-qty { color: var(--muted); font-size: 13px; flex-shrink: 0; }

/* 사이드바 재펼침 버튼 — 접혔을 때만 본문 좌상단에 노출 */
.sidebar-reopen {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.sidebar-reopen:hover { background: var(--surface); }
.layout.sidebar-collapsed .sidebar-reopen { display: inline-flex; }

/* 상단 진행 스텝퍼 */
.stepper {
  display: flex;
  flex-wrap: nowrap;          /* 줄바꿈 금지 — 상단바가 세로로 길어져 로고가 처지는 것 방지 */
  align-items: center;
  gap: 8px;
  margin-bottom: 0;           /* 상단바 안에선 자체 하단여백 불필요(로고와 높이 어긋남의 원인이었음) */
  font-size: 13px;
  color: var(--muted);
  min-width: 0;
  overflow-x: auto;           /* 좁으면 줄바꿈 대신 가로 스크롤 */
  scrollbar-width: none;
}
.stepper::-webkit-scrollbar { display: none; }

/* 스테퍼 스텝 — 배지(번호/아이콘) + 라벨 */
.stepper-step {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  text-decoration: none; border-radius: 20px;
  padding: 4px 10px 4px 4px;
  transition: opacity .15s;
}
.stepper-badge {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
/* current: 빨간 pill 전체 */
.stepper-step.current {
  background: var(--ace-red); color: #fff;
}
.stepper-step.current .stepper-badge {
  background: rgba(255,255,255,0.22); color: #fff;
}
/* done: 배경 없음 + 체크아이콘 — 클릭 가능하면 링크처럼 보임 */
.stepper-step.done {
  background: transparent; color: #6b7280;
  padding: 4px 6px 4px 4px;
}
.stepper-step.done .stepper-badge { background: transparent; width: 18px; height: 18px; }
a.stepper-step.done:hover { color: var(--ace-red); text-decoration: none; }
/* todo: 회색 */
.stepper-step.todo { color: #c0c4cc; padding-left: 4px; }
.stepper-step.todo .stepper-badge { background: #e5e7eb; color: #c0c4cc; }
/* todo가 button으로 렌더링될 때 (내보내기 — results-form submit) */
button.stepper-step { background: none; border: none; font: inherit; cursor: pointer; }
button.stepper-step.todo:hover { color: var(--ace-red); }
button.stepper-step.todo:hover .stepper-badge { background: var(--ace-red-tint); color: var(--ace-red); }

/* 구분선 — › 문자 */
.stepper-sep {
  display: inline-block; font-size: 14px; color: #d1d5db; flex-shrink: 0; line-height: 1;
}

.manual-add-block {
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 16px;
}

.btn-add-row, .btn-secondary {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  margin-top: 8px;
}

.btn-add-row:hover, .btn-secondary:hover {
  border-color: var(--ace-red);
  color: var(--ace-red);
}

.inline-actions { margin: 12px 0; }

.search-add-panel {
  background: var(--surface);
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.search-add-panel textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
}

.search-add-panel button {
  margin-top: 8px;
  padding: 8px 16px;
  background: var(--ace-red);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.hint { font-size: 13px; color: var(--muted); }

/* ---------- 하단 확정 바 ---------- */
.export-bar {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-w);
  right: 0;
  height: var(--export-bar-h);
  background: #fff;
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 50;
  cursor: pointer;  /* 바 어디를 눌러도 내보낼 목록 토글 */
}
/* 내보내기 버튼 위에서는 기본 커서 유지(별도 동작) */
.export-bar .export-bar-btn { cursor: pointer; }

.layout.sidebar-collapsed .export-bar { left: 0; }

.export-bar-count {
  font-size: 15px; background: none; border: none; cursor: pointer; color: var(--text);
  display: inline-flex; align-items: center; gap: 4px;
}
.peek-caret svg { width: 16px; height: 16px; transition: transform 0.18s; }
.export-bar.peek-open .peek-caret svg { transform: rotate(180deg); }

/* 내보낼 목록 미리보기(하단 바 위로 펼쳐짐) */
.export-peek {
  position: fixed; bottom: var(--export-bar-h); left: var(--sidebar-w); right: 0;
  max-height: 45vh; overflow-y: auto; background: #fff;
  border-top: 1px solid var(--border); box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
  padding: 12px 24px; z-index: 49;
}
.layout.sidebar-collapsed .export-peek { left: 0; }
.peek-title { font-size: 12px; font-weight: 700; color: var(--muted); margin: 0 0 6px; }
.peek-list { list-style: none; margin: 0; padding: 0; }
.peek-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid #eee; font-size: 14px; }
.peek-list li:last-child { border-bottom: none; }
.peek-q { color: var(--text); }
.peek-p { font-weight: 600; }
.peek-none { color: var(--ace-red); font-weight: 400; }
.peek-miss { color: var(--muted); font-weight: 400; }

/* 삭제 되돌리기 토스트 */
.undo-toast {
  position: fixed; bottom: calc(var(--export-bar-h) + 12px); left: 50%; transform: translateX(-50%);
  background: var(--text); color: #fff; font-size: 14px; padding: 10px 16px;
  border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.2); z-index: 60; margin: 0;
}
.undo-btn { background: none; border: none; color: #fff; font-weight: 700; text-decoration: underline; cursor: pointer; font-size: 14px; }

/* 블록 숨김(삭제 대기) */
.item-block.soft-deleted { display: none; }

/* 헤더 클릭으로 접기/펼치기 */
.item-head { cursor: pointer; }

.export-bar-btn {
  padding: 10px 24px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background var(--dur);
}

.export-bar-btn:hover { background: var(--brand-strong); }

/* ---------- output · help ---------- */
.review-list { margin-bottom: 20px; }

.review-row {
  display: grid;
  grid-template-columns: 100px 1fr 60px;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

.tsv-block { margin-bottom: 16px; }

.tsv-block textarea {
  width: 100%;
  font-family: monospace;
  font-size: 13px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--ace-red);
  background: #fff;
  color: var(--ace-red);
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 8px;
}

.toast {
  color: var(--ace-red);
  font-size: 13px;
  font-weight: 600;
}

/* ===== 사용법 · 보관함 공통 ===== */
/* 상단바(토글·홈)는 양끝 밀착, 본문 내용만 가운데 좁게 — 검색·내보내기와 동일 스타일 */
.page-help .main-content,
.page-archive .main-content {
  max-width: none;
  width: auto;
  margin: 0;
  padding-left: 24px;
  padding-right: 24px;
}
.page-body { max-width: 1200px; margin: 0 auto; }
.big-page-title { font-size: 1.9rem; font-weight: 800; margin: 6px 0 6px; }
.page-subtitle { color: var(--muted); margin: 0 0 24px; font-size: 15px; line-height: 1.6; }
.back-link { margin-top: 20px; }
.back-link a { color: var(--ace-red); text-decoration: none; font-weight: 600; }
.back-link a:hover { text-decoration: underline; }

/* 사용법 카드 */
.help-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.help-card h2 {
  font-size: 1.15rem; margin: 0 0 14px; padding-bottom: 10px;
  border-bottom: 2px solid var(--ace-red-tint);
  display: flex; align-items: baseline; gap: 10px;
}
/* 데이터 최신화 — 소제목 + 양식 다운로드 버튼 한 줄 */
.import-page-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
}
.import-page-head .intake-page-sub { margin: 0; }
.import-template-download {
  flex-shrink: 0; white-space: nowrap; text-decoration: none;
}

/* 데이터 최신화 — 5종 업로드 카드 그리드 */
.import-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; margin-top: 20px;
}
.import-card {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--border); border-radius: 12px; background: #fff;
  padding: 18px 20px;
}
.import-card-full { grid-column: 1 / -1; }
.import-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 2px;
}
.import-card-title { font-size: 15px; font-weight: 700; color: var(--text); }
.import-card-updated { font-size: 12px; color: var(--muted); margin: 0; }
.import-card-updated strong { font-weight: 600; color: var(--text); }
.import-card-cols { font-size: 13px; color: var(--text); margin: 0; }
.import-card-cols strong { font-weight: 600; }
.import-card-desc { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin: 0; }
.import-card .dropzone { margin-top: auto; }
/* 업데이트 버튼 */
.import-card-head .rc-chip.is-active { background: #e62a11; border-color: #e62a11; }
.import-card-head .rc-chip.is-active:hover { border-color: #b8220e; color: #fff; background: #b8220e; }
/* 거래건수 대상 기간 입력 — 달력 아이콘 얹은 텍스트 입력(범위는 자유 서술) */
.import-period-row { display: flex; align-items: center; gap: 8px; }
.import-period-field { position: relative; flex: 1; }
.import-period-save { flex-shrink: 0; white-space: nowrap; }
.import-period-input {
  width: 100%; box-sizing: border-box;
  padding: 9px 34px 9px 12px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 14px; background: #fff;
}
.import-period-cal {
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  pointer-events: none; opacity: .5; font-size: 14px;
}
.help-card p { font-size: 15px; line-height: 1.75; margin: 0 0 8px; }
.help-card p:last-child { margin-bottom: 0; }
.help-card ol, .help-card ul { margin: 4px 0 0; padding-left: 4px; list-style: none; }
.help-card li { font-size: 15px; line-height: 1.7; margin-bottom: 10px; padding-left: 26px; position: relative; }
.help-card li:last-child { margin-bottom: 0; }
.help-card ul li::before {
  content: ""; position: absolute; left: 8px; top: 11px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--ace-red);
}
.help-card ol { counter-reset: step; }
.help-card ol li { counter-increment: step; }
.help-card ol li::before {
  content: counter(step); position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--ace-red); color: #fff;
  font-size: 12px; font-weight: 700; text-align: center; line-height: 20px;
}
.help-card code {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 6px; font-size: 0.9em;
}
.help-red { color: var(--ace-red); font-weight: 600; }

/* 보관함 카드 */
.archive-cards { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.archive-card {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 18px; background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.archive-card:hover { border-color: var(--ace-red); box-shadow: 0 2px 8px rgba(212,0,41,0.08); }
.archive-card__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--text); }
.archive-card__title { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archive-card__date { font-size: 12px; color: var(--muted); }
.btn-restore {
  flex-shrink: 0; padding: 8px 18px;
  border: 1px solid var(--ace-red); background: #fff; color: var(--ace-red);
  border-radius: 8px; font-weight: 700; font-size: 14px; cursor: pointer;
}
.btn-restore:hover { background: var(--ace-red); color: #fff; }
.empty-state { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty-state__hint { font-size: 13px; margin-top: 6px; }

.inline-form { margin: 0; }

.correction-notice--placeholder {
  font-size: 12px;
  color: var(--muted);
  padding: 8px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  margin-bottom: 12px;
}

/* ===== 반응형: 좁은 화면에서 사이드바 오프캔버스(클로드식) ===== */
@media (max-width: 960px) {
  /* 사이드바는 화면 위로 떠서 슬라이드 — 본문은 항상 전체 폭 */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 280px;
    max-width: 85vw;
    z-index: 100;
    transform: translateX(0);
    transition: transform 0.22s ease;
    box-shadow: 2px 0 16px rgba(0,0,0,0.18);
  }
  .layout.sidebar-collapsed .sidebar {
    width: 280px;
    padding: 12px;
    border: none;
    overflow: hidden;
    transform: translateX(-100%);
  }
  /* 열렸을 때 뒤를 덮는 반투명 배경 */
  .layout:not(.sidebar-collapsed)::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 99;
  }
  .export-bar { left: 0; }
  .main-content { padding: 16px; }
  .page-results .main-content,
  .page-output .main-content,
  .page-landing .main-content { padding-left: 16px; padding-right: 16px; }
}

/* ===== 휴대폰(좁은 화면) — 글씨·위치·구성이 깨지지 않게 세로 재배치 =====
   표 가로 스크롤(.table-scroll) 등 기존 동작은 그대로 유지. */
@media (max-width: 640px) {
  /* 페이지 자체가 가로로 넘쳐 깨지지 않게(표 내부 .table-scroll 가로 스크롤은 그대로 유지) */
  html, body { overflow-x: hidden; }

  .main-content,
  .page-results .main-content,
  .page-output .main-content,
  .page-landing .main-content,
  .page-help .main-content,
  .page-archive .main-content { padding: 12px; }

  /* 로고·제목 축소 — 입구·결과 로고 동일 크기 */
  .brand-logo { height: 36px; margin-bottom: 10px; }
  .brand-lockup-logo { height: 36px; }
  .big-page-title { font-size: 1.5rem; }

  /* 상품코드 직접 추가 / 검색 추가 — 좌우 5:5 → 세로 1열 */
  .add-grid { grid-template-columns: 1fr; }

  /* 상품없음 입력칸 — 스페이서 빼고 풀폭 세로(컬럼 정렬 기본 규칙보다 우선) */
  .manual-panel .manual-grid { grid-template-columns: 1fr; }

  /* 상품코드 직접 추가 입력칸 풀폭 */
  .extra-add-table { width: 100%; }
  .extra-add-table input { width: 100%; }

  /* 검색 추가 줄 — 버튼이 찌그러지지 않게 줄바꿈 */
  .search-add-row { flex-wrap: wrap; }
  .search-add-row textarea { flex: 1 1 100%; }
  .search-add-row button { width: 100%; padding: 10px; }

  /* 기타의견 풀폭 */
  .feedback-input { max-width: none; }

  /* 내보내기 검토 — 표는 가로 스크롤, 액션은 세로 정렬 */
  .review-box { overflow-x: auto; }
  .review-table { min-width: 460px; }
  .review-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .review-actions .quote-form { flex-wrap: wrap; justify-content: flex-start; }

  /* 품목 카드 여백 축소 */
  .item-block { padding: 12px; }

  /* OCR 검토 — 위(사진)/아래(텍스트) 세로 스택은 768 규칙에서 처리됨 */

  /* 상단바: 모바일에선 진행 스텝퍼를 숨긴다 — 토글+로고+우측 아이콘과 한 줄에 다 못 들어가
     단어 중간이 아이콘 밑으로 잘려 보였다(가로 스크롤 affordance도 없었음). 현재 화면 자체로
     단계가 분명하고, 로고(→홈=새 검색)·사이드바로 뒤로 가기가 되므로 브레드크럼은 데스크톱/태블릿 전용. */
  .topbar { gap: 8px; align-items: center; }
  .topbar-left { flex-wrap: nowrap; gap: 10px; min-width: 0; }
  .stepper { display: none; }
  /* 모바일에선 상단 브랜드 텍스트 숨김(히어로 로고로 충분) → 스텝퍼 정렬 공간 확보 */
  .topbar-brand-text { display: none; }
}

/* ===== 상단바(토글 + 스텝퍼 + 홈) ===== */
.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* 좌/우 그룹은 폭에 맞게, 가운데 스텝퍼는 항상 정중앙 */
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  min-height: 40px;           /* 모든 페이지 동일 높이 → 우상단 로고 수직 위치 고정 */
  position: sticky;           /* 스크롤해도 로고·스텝퍼 행은 화면 위에 고정 */
  top: 0;
  z-index: 30;
  background: var(--bg);
}
.topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; flex-wrap: nowrap; justify-self: start; }
.topbar-center { display: flex; align-items: center; justify-self: center; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; justify-self: end; }
/* 데이터 업로드 시각 — 상단바와 분리된 둘째 줄(눈에 띄게 굵은 빨강 유지). 결과 화면 전용(내보내기 화면엔 안 씀).
   왼쪽 정렬 시작선을 .results-body(가운데 정렬된 본문)와 맞춘다. */
.topbar-databar { display: flex; align-items: center; gap: 20px; padding-top: 32px; margin-bottom: 4px; border-top: 1px solid var(--border); }
.topbar-databar .tf-row { margin: 0; font-size: 14px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.topbar-databar .tf-row strong { color: var(--ace-red); font-weight: 800; font-size: 17px; }
.page-results .topbar-databar { max-width: 1100px; margin-left: auto; margin-right: auto; }
/* 홈 버튼 옆 작은 로고(홈 화면 제외 모든 페이지) */
.topbar-logo { height: 39px; width: auto; display: block; }
/* 홈 버튼 옆 브랜드 텍스트(홈 화면) — 검정·두 줄·기울임체(이탤릭) */
.topbar-brand-text { text-align: right; line-height: 1.08; }
.topbar-brand-text span {
  display: block;
  font-family: var(--logo-font-eugene);
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  color: #1a1a1a;
}
.topbar-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 34px; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: 8px;
  background: #fff; color: var(--text); cursor: pointer;
}
.topbar-toggle:hover { background: var(--surface); }
/* 로고 = 홈 링크. 로고 자체가 홈으로 가는 표준 관례 → 별도 홈 버튼 폐기 */
.topbar-home-link {
  flex-shrink: 0; display: inline-flex; align-items: center;
  padding: 4px 8px; border-radius: var(--radius-md);
  text-decoration: none; transition: background var(--dur);
}
.topbar-home-link:hover { background: var(--surface); }

/* 스텝퍼: 클릭 가능 + todo 색 */
.stepper-step { text-decoration: none; }
a.stepper-step:hover { text-decoration: underline; }
.stepper-step.todo { color: #bbb; }

/* + 새 검색 전체폭 */
.sidebar-new { width: 100%; }

/* 데이터 기준일 — 요약 위, 우측 정렬 */
.data-freshness {
  text-align: right; margin: 0 0 10px;
}
.data-freshness .df-row {
  display: block; font-size: 14px; color: #6b7280; font-weight: 500; line-height: 1.7; margin: 0;
}
.data-freshness .df-row strong { color: var(--ace-red); font-weight: 800; font-size: 15px; }
.data-freshness strong { color: var(--ace-red); font-weight: 700; }

/* ===== 질의 요약 ( / 구분 ) ===== */
.query-summary {
  margin: 0 0 16px; padding: 12px 14px;
  background: var(--surface); border-radius: 8px;
}
.qqty { color: var(--muted); }
.qsep { color: #ccc; margin: 0 2px; }

/* 요약 패널 머리 — 품목 N개 + 동작 버튼 */
.summary-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
}
.summary-count {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 700; color: var(--text);
}
.summary-count svg { color: var(--ace-red); }
.summary-count strong { color: var(--ace-red); }
/* 후보 합계는 품목보다 비중 낮게 — 작게·회색 */
.summary-candidates { font-size: 12px; color: var(--muted); font-weight: 500; margin-left: 10px; }
.summary-candidates strong { font-weight: 700; color: var(--muted); }
.summary-progress { font-size: 12px; color: var(--muted); margin-left: 10px; }
.summary-progress strong { font-weight: 700; color: var(--text); }
.summary-progress.is-complete strong { color: #1a8a4a; }
.summary-actions {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
/* 추천 채우기 버튼 */
.summary-action-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--muted);
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 4px 11px; cursor: pointer;
}
.summary-action-btn:hover { border-color: var(--ace-red); color: var(--ace-red); }
.summary-action-btn[aria-pressed="true"] {
  background: var(--ace-red); border-color: var(--ace-red); color: #fff;
}
.summary-trash-toggle, .summary-fold-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--muted);
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 4px 11px; cursor: pointer;
}
.summary-trash-toggle:hover, .summary-fold-toggle:hover {
  border-color: var(--ace-red); color: var(--ace-red);
}
.summary-trash-toggle strong { color: var(--ace-red); }
/* 토글 상태에 따라 펼치기/접기 아이콘 하나만 노출 */
.summary-fold-toggle .unfold-ico { display: none; }
.summary-fold-toggle.is-folded .fold-ico { display: none; }
.summary-fold-toggle.is-folded .unfold-ico { display: inline-flex; }
.summary-fold-toggle svg { display: block; }

/* 결과 필터·정렬 바(쿠팡식) — 모든 품목 블록 공통 적용 */
.results-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--border);
}
.rc-group { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rc-facets { gap: 10px; }
.rc-label { font-size: 12px; font-weight: 700; color: var(--muted); margin-right: 2px; }
.rc-chip {
  font-size: 13px; color: var(--text);
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 4px 12px; cursor: pointer; transition: border-color .12s, color .12s, background .12s;
}
.rc-chip:hover { border-color: var(--ace-red); color: var(--ace-red); }
.rc-chip.is-active { background: var(--ace-red); border-color: var(--ace-red); color: #fff; }
.rc-facet {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; color: var(--muted);
}
.rc-select {
  font-size: 13px; font-weight: 500; color: var(--text);
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 4px 8px; cursor: pointer; max-width: 180px;
}
.rc-select:hover { border-color: var(--ace-red); }
.rc-reset {
  font-size: 12px; color: var(--muted);
  background: none; border: none; cursor: pointer; text-decoration: underline;
}
.rc-reset:hover { color: var(--ace-red); }
/* 필터 결과가 빈 품목 안내 */
.cand-empty-hint {
  margin: 0 0 10px; padding: 10px 12px;
  font-size: 13px; color: var(--muted);
  background: var(--surface); border-radius: 8px;
}

/* 품목 점프 칩 */
.summary-chips {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--border);
}
.jump-chip {
  font-size: 13px; color: var(--text);
  background: #fff; border: 1px solid var(--border); border-radius: 4px;
  padding: 4px 12px; cursor: pointer; transition: border-color .12s, color .12s, background .12s;
}
.jump-chip:hover { border-color: var(--ace-red); color: var(--ace-red); background: var(--ace-red-tint); }
.jump-chip__num { color: var(--muted); margin-right: 2px; font-weight: 600; }
.jump-chip:hover .jump-chip__num { color: var(--ace-red); }
.jump-chip__qty { color: var(--muted); margin-left: 3px; }
.jump-chip:hover .jump-chip__qty { color: var(--ace-red); }

/* 최상단으로 올린 품목의 칩 — 지금 어떤 품목이 위로 올라가 있는지 표시 */
.jump-chip.is-raised { border-color: var(--ace-red); color: var(--ace-red); background: var(--ace-red-tint); font-weight: 600; }
.jump-chip.is-raised .jump-chip__qty { color: var(--ace-red); }

/* 휴지통(삭제된 품목) */
.trash-panel {
  margin-top: 11px; padding-top: 11px; border-top: 1px dashed var(--border);
}
.trash-hint { margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.trash-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.trash-item {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 10px;
}
.trash-item__name { font-size: 14px; flex: 1; }
.trash-item__qty { color: var(--muted); margin-left: 4px; }
.trash-restore-btn {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-size: 13px; color: var(--ace-red);
  background: var(--ace-red-tint); border: 1px solid var(--ace-red); border-radius: 6px;
  padding: 4px 10px; cursor: pointer;
}
.trash-restore-btn:hover { background: var(--ace-red); color: #fff; }
.trash-restore-btn:disabled { opacity: .5; cursor: default; }
.trash-empty { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

/* 맨 위로 / 맨 아래로 플로팅 버튼 */
.scroll-fab {
  position: fixed; right: 18px; bottom: calc(var(--export-bar-h) + 18px);
  z-index: 40; display: flex; flex-direction: column; gap: 8px;
}
.scroll-fab__btn {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--muted);
  border: 1px solid var(--border); border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,.12); cursor: pointer;
}
.scroll-fab__btn:hover { color: var(--ace-red); border-color: var(--ace-red); }

/* 내보내기 검토 — 총개수·중복 경고 (+ 표 우측 끝에 맞춘 복사 버튼) */
.rt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 10px; }
.rt-summary { margin: 0; font-size: 14px; color: var(--text); }
.rt-summary strong { color: var(--ace-red); }
.rt-dup-warning { margin: 0; font-size: 13px; color: var(--ace-red); font-weight: 600; }
.rt-dup-warning strong { color: var(--ace-red); }
.rt-meta .btn-copy { margin-left: auto; padding: 6px 14px; font-size: 13px; }
.review-table tbody tr.rt-dup td { background: var(--danger-tint); }
.review-table tbody tr.rt-dup .rt-cd { color: var(--danger); }

/* 내보내기 화면 — 읽기전용 잠금 안내(상단) */
.export-lock-note {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid #c8cdd3;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--muted);
}
.export-lock-note svg { flex-shrink: 0; margin-top: 1px; color: #9ca3af; }
.export-lock-note strong { color: var(--text-strong); }
.export-lock-note a { color: var(--ace-red); font-weight: 600; text-decoration: none; }
.export-lock-note a:hover { text-decoration: underline; }

/* ===== 인쇄 — 내보내기 검토 표만 깔끔히(주문서 출력용) ===== */
@media print {
  .sidebar, .topbar, .review-actions, .export-lock-note,
  .back-link, .toast, .undo-toast, .scroll-fab, .export-bar { display: none !important; }
  .layout { display: block; }
  .main-content { max-width: none; margin: 0; padding: 0; }
  .output-body, .results-body { max-width: none; }
  body { background: #fff; }
  .review-table { border: 1px solid #888; }
  .review-table th, .review-table td { border-bottom: 1px solid #ccc; }
}

/* ===== 선택 필수 ===== */
.select-warning {
  margin: 0 0 14px; padding: 10px 14px;
  background: var(--amber-tint); border: 1px solid #ecdca6;
  color: var(--amber); font-weight: 600; border-radius: 8px; font-size: 14px;
}
.badge-required { display: none; }
.badge-required.show {
  display: inline-block;
  font-size: 11px; padding: 2px 8px; border-radius: 10px;
  background: var(--ace-red); color: #fff; font-weight: 700;
}

/* ===== 상품없음 입력칸 — 바깥 끝은 기타의견 칸, 가운데 경계는 위 표 컬럼 =====
   바깥: 상품코드 왼쪽 끝·상품명 오른쪽 끝을 기타의견 칸(max-width 760px) 양끝에 맞춤.
   가운데: 상품코드/상품명 경계를 위 표의 [상품코드|상품명] 컬럼 경계
   (선택 52px + 상품코드 120px = 172px)에 맞춰, 상품코드 칸 폭을 172px로 고정. 상품명은 나머지.
   (§2.5: 코드·이름 나란히, 의견 아래 전체폭) */
.manual-grid {
  display: grid;
  grid-template-columns: 172px 1fr;
  gap: 8px;
  align-items: center;
  max-width: 760px;
}
.manual-cd, .manual-nm { grid-column: auto; }
.manual-grid input {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 4px;
  font-family: inherit; font-size: 14px;
}

/* 기타의견 — 상품없음과 무관하게 품목마다 항상 노출(들여쓰기 없이 왼쪽 끝에서 시작) */
.feedback-block { margin-top: 10px; }
.feedback-input {
  width: 100%; max-width: 760px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 4px;
  font-family: inherit; font-size: 14px;
}

/* ===== 상품코드 직접 추가 / 검색 추가 — 좌우 5:5 분할 =====
   각 컬럼: 버튼 위, 펼침 패널 아래. 왼쪽 버튼=왼쪽 50% 패널, 오른쪽 버튼=오른쪽 50% 패널. */
.add-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
  margin: 14px 0 80px;
}
.add-col { min-width: 0; }
/* 글씨는 가운데, 아이콘만 왼쪽에 고정 */
.add-toggle-btn {
  position: relative;
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 12px 16px;
  border: 2px dashed var(--border); background: #fff; color: var(--text);
  border-radius: 8px; font-weight: 700; font-size: 15px; cursor: pointer;
}
/* 검색 추가 = 핵심 검색 동작(브랜드 레드) / 상품코드 직접 추가 = 보조 수동 입력(중립 그레이) */
.add-toggle-btn--search { border-color: var(--ace-red); color: var(--ace-red); }
.add-toggle-btn--search:hover,
.add-toggle-btn--search.is-open { background: var(--ace-red-tint); }
.add-toggle-btn--manual { border-color: var(--info); color: var(--info-strong); }
.add-toggle-btn--manual:hover,
.add-toggle-btn--manual.is-open { background: var(--info-tint); border-color: var(--info-strong); }
.add-toggle-btn svg {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
}
.add-panel { margin-top: 10px; }

/* 상품코드 추가 패널 — 칸 붙이고 + 행 추가 작게 */
.manual-add-block {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 14px;
}
.btn-add-row {
  width: auto; padding: 7px 16px; margin-top: 6px;
  border: 1px dashed var(--border); background: #fff; color: var(--muted);
  border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.btn-add-row:hover { background: var(--surface); }

/* 검색 추가 패널 — 컬럼 폭에 맞춤 */
.search-add-panel {
  background: var(--surface);
  padding: 12px;
  border-radius: 8px;
}
.search-add-row { display: flex; gap: 8px; }
.search-add-row textarea {
  flex: 1; padding: 9px 12px; border: 1px solid var(--ace-red);
  border-radius: 8px; font-family: inherit; font-size: 14px; resize: vertical;
}
.search-add-row button {
  flex-shrink: 0; padding: 0 18px; background: var(--ace-red); color: #fff;
  border: none; border-radius: 8px; font-weight: 600; cursor: pointer;
}
.inline-loading {
  margin: 8px 0 0; color: var(--muted); font-size: 13px;
  display: flex; align-items: center; gap: 6px;
}
.spinner-dot {
  width: 12px; height: 12px; border: 2px solid #ccc; border-top-color: var(--muted);
  border-radius: 50%; display: inline-block; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== 내보내기 검토(output) ===== */
.review-box { margin-bottom: 14px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.review-edit {
  width: 100%; min-height: 220px; padding: 14px;
  border: 1px solid var(--border); border-radius: 10px;
  font-family: monospace; font-size: 13px; line-height: 1.8; resize: vertical;
  background: #fff;
}
.review-actions {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.btn-copy {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; border: 1px solid var(--ace-red); background: #fff;
  color: var(--ace-red); border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 14px;
}
.btn-copy:hover { background: var(--ace-red-tint); }
.btn-excel {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; border: none; background: #1e7f4f; color: #fff;
  border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 14px;
}
.btn-excel:hover { background: #166b41; }
/* 지점 선택 패널 — 카드 안에 지점 칩 + 다운로드 버튼(체크박스가 작아 안 보인다는 피드백으로 확대) */
.quote-panel { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; }
.quote-panel-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.quote-panel-title { font-size: 15px; font-weight: 700; color: var(--text); }
.quote-store-all { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; }
.quote-store-all input { width: 17px; height: 17px; accent-color: var(--ace-red); cursor: pointer; }
.quote-form { margin: 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.quote-store-grid { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; }
.quote-store-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border: 1.5px solid var(--border); border-radius: 999px;
  background: #fff; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.quote-store-chip:hover { border-color: var(--ace-red); }
.quote-store-chip:has(input:checked) { border-color: var(--ace-red); background: var(--ace-red-tint); color: var(--ace-red); }
.quote-store-chip input { width: 16px; height: 16px; accent-color: var(--ace-red); cursor: pointer; }
.back-link a { color: var(--muted); text-decoration: none; }
.back-link a:hover { text-decoration: underline; }

/* 내보내기 요약 카드(선택 상품·총 수량·총 금액) + 표 합계 행 */
.export-summary {
  display: flex; align-items: center; gap: 24px;
  width: 100%; box-sizing: border-box; padding: 18px 24px; margin: 0 0 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.summary-metric { display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 0; }
.summary-metric-label { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0.01em; white-space: nowrap; }
.summary-metric-value { font-size: 24px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.summary-metric-value small { margin-left: 2px; font-size: 13px; font-weight: 600; color: var(--muted); }
.summary-metric--accent .summary-metric-value { color: var(--ace-red); }
.summary-divider { width: 1px; height: 34px; background: var(--border); flex-shrink: 0; }
/* 복사 버튼 — 요약 지표와 묶이면 "저 숫자들을 복사하나" 헷갈려서, 바로 아래 표에 붙여 표를
   복사한다는 게 분명하게 표 바로 위 줄에 둔다. */
.review-toolbar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.rt-total-row td { background: var(--surface); font-weight: 700; border-top: 2px solid var(--border-strong); border-bottom: none; }
.rt-total-label { text-align: right; color: var(--muted); }
.rt-total-row .rt-amount { color: var(--ace-red); font-weight: 800; }

/* ===== 추가 UX 라운드 (§14) ===== */

/* #3 홈 버튼 — 아이콘 + 라벨 (빨강 배경 + 흰 글자, 액션 버튼과 톤 통일) */
/* #1 갤러리 버튼(이제 button) 리셋 */
button.gallery-btn { background: none; border: none; cursor: pointer; padding: 6px; color: var(--muted); display: inline-flex; align-items: center; }
button.gallery-btn:hover { color: var(--ace-red); }

/* #1 OCR 업로드 모달 */
.ocr-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; }
.ocr-modal[hidden] { display: none; }
.ocr-modal__backdrop { position: absolute; inset: 0; background: rgba(20, 22, 30, 0.45); }
.ocr-modal__panel {
  position: relative; width: min(560px, 92vw); background: #fff; border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25); padding: 20px; animation: ocrpop 0.12s ease-out;
}
@keyframes ocrpop { from { transform: scale(0.97); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ocr-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ocr-modal__title { font-weight: 700; font-size: 16px; }
.ocr-modal__close { background: none; border: none; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; }
.ocr-modal__close:hover { color: var(--ace-red); }
.ocr-dropzone {
  border: 2px dashed var(--border); border-radius: 12px; padding: 36px 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px; transition: border-color 0.12s, background 0.12s;
}
.ocr-dropzone.is-drag { border-color: var(--ace-red); background: var(--ace-red-tint); }
.ocr-dropzone__icon { color: var(--muted); }
.ocr-dropzone__icon svg { width: 40px; height: 40px; }
.ocr-dropzone__text { color: var(--muted); margin: 0; }
.ocr-dropzone__link { background: none; border: none; color: var(--ace-red); font-weight: 700; font-size: 15px; cursor: pointer; text-decoration: underline; padding: 0; }
.ocr-dropzone__hint { color: var(--muted); font-size: 12px; margin: 4px 0 0; }
.ocr-dropzone[hidden] { display: none; }

/* OCR 추출 전 사진 편집기 */
.ocr-modal__panel:has(#ocr-editor:not([hidden])) { width: min(880px, 94vw); }
.ocr-editor[hidden] { display: none; }
.ocr-editor { display: flex; flex-direction: column; gap: 12px; }
.ocr-editor__bar { display: flex; flex-direction: column; gap: 8px; }
.oe-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.oe-tool, .oe-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; color: var(--text);
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 12px; cursor: pointer;
}
.oe-tool svg, .oe-btn svg { display: block; }
.oe-tool:hover, .oe-btn:hover { border-color: var(--ace-red); color: var(--ace-red); }
.oe-tool.is-active { background: var(--ace-red); border-color: var(--ace-red); color: #fff; }
.oe-btn:disabled { opacity: .4; cursor: default; border-color: var(--border); color: var(--muted); }
.oe-icon-only { padding: 7px 9px; }   /* 되돌리기/다시실행 — 아이콘만 */
.oe-zoom { display: inline-flex; align-items: center; gap: 6px; margin-left: 2px; font-size: 13px; color: var(--muted); }
.oe-icon { padding: 3px 10px; font-size: 16px; line-height: 1; }
.oe-hint { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.oe-hint b { color: var(--ace-red); }
.oe-stage {
  position: relative; overflow: auto; height: 58vh; min-height: 260px;
  background: #eceef2; border: 1px solid var(--border); border-radius: 10px;
  display: flex; align-items: safe center; justify-content: safe center; padding: 6px;
}
#oe-canvas {
  display: block; touch-action: none; cursor: crosshair; background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.16), 0 4px 16px rgba(0,0,0,.10);
}
.oe-marquee {
  position: absolute; pointer-events: none; box-sizing: border-box;
  border: 2px dashed var(--ace-red); background: rgba(212,0,41,0.12);
}
.oe-marquee.is-redact { border-color: #111; background: rgba(0,0,0,0.55); }
.oe-marquee[hidden] { display: none; }
.oe-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.oe-apply {
  font-size: 14px; font-weight: 700; color: #fff; background: var(--ace-red);
  border: none; border-radius: 8px; padding: 9px 16px; cursor: pointer;
}
.oe-apply:hover { background: var(--ace-red-dark); }
.oe-extract { width: auto; height: auto; border-radius: 8px; padding: 9px 18px; gap: 6px; white-space: nowrap; flex-shrink: 0; }
.oe-extract svg { flex-shrink: 0; }
.oe-actions .btn-secondary { margin-right: auto; }

/* #5 검색 추가 버튼(빨간색) */
.btn-search-add {
  background: var(--ace-red); color: #fff; border: none; border-radius: 8px;
  padding: 9px 18px; font-weight: 700; cursor: pointer; font-size: 14px; white-space: nowrap;
}
.btn-search-add:hover { filter: brightness(0.94); }
.btn-search-add:disabled { opacity: 0.6; cursor: default; }

/* #9 검색어 요약 라벨 */
.query-summary__label { color: var(--muted); font-weight: 700; margin-right: 4px; }

/* #6 내보내기 검토 — .review-box가 카드 테두리·둥근 모서리를 맡고, 표는 안쪽 격자선만 그린다. */
/* table-layout:fixed + % 너비로 컬럼 비율을 고정한다(제품명이 남는 폭을 다 먹지 않게). */
.review-table { width: 100%; table-layout: fixed; border-collapse: collapse; background: #fff; }
.review-table thead th {
  text-align: center; font-size: 13px; color: var(--text); font-weight: 700;
  background: var(--surface); padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.review-table th.rt-h-tag { width: 7%; }
.review-table th.rt-h-nm { width: 32%; text-align: left; }
.review-table th.rt-h-price { width: 13%; text-align: right; }
.review-table th.rt-h-qty { width: 13%; text-align: center; }
.review-table th.rt-h-amount { width: 17%; text-align: right; }
.review-table th.rt-h-cd { width: 18%; text-align: center; }
.review-table th.rt-h-del { width: 36px; }
.review-table td.rt-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 셀 — 세로선 없이 가로 구분선만(격자보다 정돈된 느낌) */
.review-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text); vertical-align: middle; }
.review-table tbody tr:last-child td { border-bottom: none; }
.review-table tbody tr:hover td { background: var(--surface); }
.review-table .rt-nm { color: var(--text-strong); }
.review-table .rt-price { text-align: right; font-variant-numeric: tabular-nums; }
.review-table .rt-qty { text-align: center; white-space: nowrap; }
.review-table .rt-amount { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.review-table .rt-cd { font-family: var(--font-mono); font-size: 12px; color: var(--muted); text-align: center; white-space: nowrap; }

/* 수동 입력(상품없음·상품코드추가) 행 표시 */
.rt-tag-cell { text-align: center; }
.tag-manual {
  display: inline-block; font-size: 11px; font-weight: 700;
  color: var(--ace-red); background: var(--ace-red-tint);
  border: 1px solid var(--ace-red); border-radius: 10px; padding: 1px 7px;
}
/* 검색 추가로 들어온 항목 표시(파란 톤 — 결과 화면 '+ 검색 추가됨'과 통일) */
.tag-added {
  display: inline-block; font-size: 11px; font-weight: 700; white-space: nowrap;
  color: #0066aa; background: #e8f4ff;
  border: 1px solid #b9ddff; border-radius: 10px; padding: 1px 7px;
}

/* 기타 의견(검토 화면 노출) */
.feedback-review { margin: 16px 0; }
.feedback-list { margin: 8px 0; padding-left: 18px; line-height: 1.6; }
.feedback-list li { margin-bottom: 4px; }


/* ---------- data_intake 적재 화면 ---------- */
/* 관리 4페이지 본문 폭 통일 — 헤더바·탭·page-body와 같은 1200px 열. */
.intake { max-width: 1200px; padding-bottom: 76px; }

/* ── 새 헤더 ─────────────────────────────────────────── */
/* (구) .intake-header / .intake-nav 는 _admin_header.html 통합으로 제거됨.
   아래 .intake-brand* 는 그 이전부터 미사용(본 변경과 무관) — 보존. */
.intake-brand {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
}
.intake-brand-name {
  font-family: var(--logo-font-brand); font-style: italic;
  font-size: 19px; color: var(--ace-red); letter-spacing: -0.01em;
}
/* 헤더 로고 — 검색 사이트와 동일한 ACE 로고로 통일 */
.intake-brand-logo { height: 38px; width: auto; display: block; }
.intake-brand-sub {
  font-size: 20px; color: #1a1a1a; font-weight: 800; letter-spacing: -0.01em;
  padding-left: 14px; border-left: 1px solid var(--border);
}

/* ── 스텝퍼 ──────────────────────────────────────────── */
.intake-stepper {
  display: flex; align-items: center;
  padding: 14px 0; margin-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.intake-step { display: flex; align-items: center; gap: 8px; }
.step-dot {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.intake-step.is-done .step-dot  { background: #1a1a1a; color: #fff; }
.intake-step.is-current .step-dot { background: var(--ace-red); color: #fff; }
.intake-step.is-todo .step-dot  { background: #fff; color: #ccc; border: 2px solid #ddd; }
.step-label { font-size: 13px; font-weight: 600; }
.intake-step.is-done .step-label    { color: var(--text); }
.intake-step.is-current .step-label { color: var(--ace-red); }
.intake-step.is-todo .step-label    { color: #bbb; }
.step-sep { flex: 1; max-width: 48px; height: 1px; background: #e0e0e0; margin: 0 10px; }

/* ── 페이지 타이틀 ───────────────────────────────────── */
.intake-page-title { font-size: 24px; font-weight: 700; margin: 0 0 4px; color: var(--text); }
.intake-page-sub   { font-size: 14px; color: var(--muted); margin: 0 0 28px; line-height: 1.5; }

/* ── 홈 옵션 카드 ────────────────────────────────────── */
/* (구) 두 카드 1:1 그리드 — intake-home-grid로 교체됨. 레거시 참조 없으면 삭제 가능. */
.intake-option-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 32px;
}

/* ── 상품 추가 홈: 비대칭 2열(CSV 넓게 / 수기+도움말 좁게) ── */
.intake-home-grid {
  display: grid; grid-template-columns: 3fr 2fr; gap: 20px; align-items: start;
}
.intake-right-col { display: flex; flex-direction: column; gap: 16px; }

.intake-option-card {
  border: 1px solid var(--border); border-radius: 12px;
  background: #fff; padding: 28px 24px;
  display: flex; flex-direction: column; gap: 6px;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.intake-option-card--csv { gap: 20px; }
.intake-option-card--manual { gap: 12px; }

/* 카드 헤더: 아이콘 + 제목 + 뱃지 가로 정렬 */
.intake-csv-header {
  display: flex; align-items: center; gap: 12px;
}
.intake-option-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--surface); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.intake-option-icon svg { width: 20px; height: 20px; color: var(--ace-red); display: block; }
.intake-option-title { font-size: 17px; font-weight: 700; margin: 0; color: var(--text); flex: 1; }
.intake-option-desc { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0; }
.intake-option-card form { display: flex; flex-direction: column; gap: 10px; }

/* 추천 뱃지 */
.intake-badge {
  font-size: 11px; font-weight: 700; color: var(--ace-red);
  background: var(--ace-red-tint); border-radius: 20px;
  padding: 3px 9px; flex-shrink: 0;
}

/* CSV 컬럼 가이드 */
.csv-guide {
  background: var(--surface); border-radius: 10px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.csv-guide-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--muted);
}
.csv-guide-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.csv-guide-chip {
  font-size: 12px; padding: 3px 10px; border-radius: 20px;
  background: #fff; border: 1px solid var(--border); color: var(--text);
}
.csv-guide-chip--required {
  border-color: var(--ace-red); color: var(--ace-red); font-weight: 600;
}
.csv-guide-note { font-size: 12px; color: var(--ace-red); margin: 0; }

/* 드롭존 아이콘 */
.dropzone-icon { width: 36px; height: 36px; color: var(--muted); margin-bottom: 4px; }

/* ── 다중 파일 업로드 UI ── */
#upl-loaded { display: flex; flex-direction: column; gap: 16px; }
.upl-file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.upl-file-item {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; display: flex; align-items: center; gap: 12px;
  background: #fff;
}
.upl-file-item--error { border-color: var(--ace-red); background: var(--ace-red-tint); }
.upl-file-item--error .upl-file-stat { color: var(--ace-red); }
.upl-file-icon { flex-shrink: 0; width: 32px; height: 32px; color: var(--ace-red); }
.upl-file-icon svg { width: 100%; height: 100%; }
.upl-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.upl-file-name { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upl-file-stat { font-size: 12px; color: var(--muted); }
.upl-file-del { border: none; background: none; color: var(--muted-2); font-size: 13px; cursor: pointer; padding: 4px 6px; border-radius: 4px; flex-shrink: 0; opacity: 0.6; transition: opacity .12s, background .12s; }
.upl-file-del:hover { background: var(--surface); color: var(--muted); opacity: 1; }

/* 파일 추가 버튼 */
.upl-add-label {
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--muted); font-weight: 500;
  border: 1.5px dashed var(--border-strong); border-radius: 8px;
  padding: 14px; cursor: pointer; background: #fff;
  transition: border-color .12s, color .12s;
}
.upl-add-label:hover { border-color: var(--ace-red); color: var(--ace-red); }

/* 통합 컬럼 커버리지 */
.upl-coverage-wrap { display: flex; flex-direction: column; gap: 8px; }
.upl-coverage-header { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ace-red-dark, #7a1414); }
.upl-coverage-header svg { color: var(--ace-red-dark, #7a1414); flex-shrink: 0; }
#upl-coverage-title { font-weight: 700; }
.upl-coverage-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.upl-cov-chip { font-size: 11px; padding: 3px 9px; border-radius: 20px; border: 1px solid var(--border); }
.upl-cov-chip--hit  { background: #fff5f5; border-color: #d08080; color: #7a1414; }
.upl-cov-chip--req  { background: var(--ace-red-tint); border-color: var(--ace-red); color: var(--ace-red); font-weight: 600; }
.upl-cov-chip--miss { background: #fff; color: var(--muted-2); }

/* 구분선 + 제출 */
.upl-divider { border: none; border-top: 1px solid var(--border); margin: 0; }
.upl-submit-row { display: flex; justify-content: flex-end; }
#upl-loaded.is-dragover { outline: 2px dashed var(--ace-red); outline-offset: 4px; border-radius: 10px; }

/* 도움말 */
.intake-help {
  background: var(--surface); border-radius: 12px; padding: 18px 20px;
}
.intake-help-title { font-size: 13px; font-weight: 700; color: var(--text); margin: 0 0 10px; }
.intake-help-list {
  margin: 0; padding-left: 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.intake-help-list li { font-size: 13px; color: var(--muted); line-height: 1.5; }

@media (max-width: 680px) { .intake-home-grid { grid-template-columns: 1fr; } }

/* ── 파일 드래그&드롭 업로드 영역(CSV 등) ── */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 16px;
  border: 1.5px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  text-align: center;
  transition: border-color .12s, background .12s, color .12s;
}
.dropzone:hover { border-color: var(--brand); }
.dropzone.is-dragover { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-ink); }
.dropzone-cta { font-size: 14px; font-weight: 600; color: var(--text); }
.dropzone-cta strong { color: var(--brand); }
.dropzone-name { font-size: 12px; }
.dropzone.has-file .dropzone-name { color: var(--success); font-weight: 600; }

/* ── 기존 intake-topbar (레거시 — 삭제 예정) ────────── */
.intake-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px; margin-bottom: 22px; border-bottom: 2px solid var(--ace-red);
}
.intake-topbar .brand {
  font-family: var(--logo-font-brand); font-style: italic; letter-spacing: -0.01em;
  color: var(--ace-red); font-size: 19px;
}
.intake-topbar nav a { color: var(--muted); text-decoration: none; font-size: 14px; margin-left: 16px; }
.intake-topbar nav a:hover { color: var(--ace-red); }
.intake h1 { font-size: 22px; margin: 0 0 6px; }
.intake h2 { font-size: 16px; margin: 0 0 10px; }
.intake .lede { color: var(--muted); margin: 0 0 18px; }
.intake p { line-height: 1.5; }
.intake button, .intake .cta {
  font: inherit; font-weight: 700; cursor: pointer; border: none; border-radius: 8px;
  padding: 10px 20px; background: var(--ace-red); color: #fff; text-decoration: none;
  display: inline-block;
}
.intake button:hover, .intake .cta:hover { filter: brightness(0.9); }
.intake .cta-ghost { background: #fff; color: var(--ace-red); border: 1px solid var(--ace-red); }
.intake .cta-ghost:hover { background: var(--ace-red-tint); }
.intake .add-row {
  background: none; color: var(--muted); border: none; font-weight: 400;
  padding: 0; box-shadow: none; margin-left: 8px;
}
.intake .cta-prev {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong);
}
.intake .cta-prev:hover { background: #e5e7eb; }
.intake #grid thead th.th-col-excluded {
  color: var(--muted); font-weight: 400; font-style: italic; opacity: 0.5;
}
/* 헤더 1행: CSV 원본 컬럼명 / 2행: 필드 선택 — 왼쪽 라벨로 위/아래를 명확히 구분 */
.intake #grid thead th.th-csv-name {
  font-weight: 600; color: #1c1917; border-bottom: none; padding-bottom: 1px; text-align: center;
  background: var(--surface);
}
.intake #grid thead th.th-map { font-weight: 400; padding-top: 1px; }
.intake #grid thead th.grid-rowlabel {
  position: sticky; left: 0; z-index: 2; background: var(--surface);
  width: 66px; min-width: 66px; text-align: center; white-space: nowrap;
  font-size: 11px; font-weight: 700; color: var(--muted);
}
.intake #grid thead th.grid-rowlabel--field { border-bottom: 1px solid var(--border); text-align: center; }
.intake #grid select.map-field-select {
  width: 100%; min-width: 94px;
  background: var(--ace-red-tint); border: 1px solid var(--ace-red); color: var(--ace-red-dark);
}
/* 행 편집 그리드 — 표준 8개 컬럼은 스크롤 없이 보이고, 더 많으면 그 안에서 가로 스크롤 */
.grid-scroll { overflow-x: auto; }
.grid-scroll > table { width: max-content; min-width: 100%; }
.intake #grid th, .intake #grid td { white-space: nowrap; width: auto; padding: 6px 8px; }
.intake #grid input[type="text"], .intake #grid select { width: 94px; min-width: 94px; border-radius: 3px; }

/* 가로 스크롤 인식 — 넘칠 때만 우측 페이드 + 안내 문구 */
.grid-scroll-wrap { position: relative; }
.grid-scroll-wrap.is-scrollable::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 36px;
  background: linear-gradient(to left, #fff, rgba(255,255,255,0));
  pointer-events: none;
}
.grid-section-header {
  display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px;
}
.grid-section-header h2 { margin: 0; }
.grid-scroll-hint {
  display: none; font-size: 12px; color: var(--muted);
}
.grid-section-header .grid-scroll-hint { display: block; }
/* 행 제거 칸 — 왼쪽 고정, 회색 X(박스 없음) */
.intake #grid th.grid-remove-col,
.intake #grid td.grid-remove-cell {
  position: sticky; left: 0; z-index: 1; background: #fff;
  width: 66px; min-width: 66px; padding: 0; text-align: center;
}
.intake #manual-rows th.grid-remove-col,
.intake #manual-rows td.grid-remove-cell {
  width: 36px; min-width: 36px; padding: 0; text-align: center;
}
.intake .btn-row-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0;
  border: none; background: none; border-radius: 0;
  color: #bbb; cursor: pointer; font-size: 13px; line-height: 1;
  font-family: inherit; transition: color 0.1s;
}
.intake .btn-row-remove:hover { color: #888; background: none; }
.intake table input.cell-error {
  border-color: var(--ace-red); background: var(--ace-red-tint);
}
.intake table input.cell-error:focus {
  border-color: var(--ace-red-dark); outline: none;
}
.map-hard-errors {
  border-left: 3px solid var(--ace-red); background: var(--ace-red-tint);
  padding: 10px 16px; border-radius: 0 8px 8px 0; margin-bottom: 16px;
  list-style: none;
}
.map-hard-errors li { font-size: 13px; color: #7a0014; margin: 2px 0; }
.map-hard-errors__title { font-weight: 700; margin-bottom: 4px; color: var(--ace-red); }
.intake .add-row:hover { background: none; color: var(--text); }
.intake input[type="text"], .intake input[type="file"], .intake select {
  font: inherit; padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; max-width: 100%;
}
.intake input[type="text"]:focus, .intake select:focus { outline: none; border-color: var(--ace-red); }
.intake table input[type="text"], .intake table select { width: 100%; padding: 5px 7px; }
.intake .choice { display: block; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.intake .choice:hover { background: var(--surface); }
.intake .choice input { margin-right: 8px; }
.intake .choice small { color: var(--muted); }
.intake .meta { color: var(--muted); font-size: 13px; margin: 2px 0 12px; }
.intake .error {
  color: var(--ace-red-dark); font-weight: 600; background: var(--ace-red-tint);
  border: 1px solid var(--ace-red); border-radius: 8px; padding: 10px 14px; margin-bottom: 16px;
}
.intake .warning {
  color: var(--ace-red-dark); background: var(--ace-red-tint); border: 1px solid var(--ace-red);
  border-radius: 8px; padding: 10px 14px 10px 28px; margin-bottom: 16px;
}
/* 검토 화면 경고는 안내성(등록 예정 등) — 빨강 대신 옅은 회색 */
.intake--review .warning {
  color: #4b5563; background: #f3f4f6; border-color: #e5e7eb;
}
.intake .row-actions { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 14px; }
.intake details { margin: 6px 0; }
.intake details summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 4px 0; }
.intake details summary:hover { color: var(--ace-red); }
.intake .guide-content { background: var(--surface); border-radius: 6px; padding: 10px 14px; margin: 8px 0; font-size: 13px; }
.intake .guide-content p { margin: 0 0 6px; }
.intake .guide-table-wrap { margin-top: 8px; }
.intake .guide-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.intake .guide-table th, .intake .guide-table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--border); }
.intake .guide-table th { color: var(--muted); font-weight: 600; }

/* ── 그룹 배속 검토 ──────────────────────────────────────── */

.review-legend {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 24px; padding: 10px 16px;
  background: var(--surface); border-radius: 10px;
  font-size: 13px; color: var(--muted);
}
.review-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.review-legend-sep  { color: #ccc; }

.ctag {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 10px;
  letter-spacing: 0.01em; white-space: nowrap;
}
.ctag--auto      { background: #f3f4f6; color: #4b5563; border: 1px solid #e5e7eb; }
.ctag--review    { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; }

/* 검토 화면: 더 넓게 + 하단 고정 바에 가리지 않게 여백 */
.intake--review {
  padding-bottom: 88px;
  /* 카드 좌측 상품정보 폭·간격 — 펼침 패널 들여쓰기가 이 값에 맞춰 정렬된다(한 곳에서 관리) */
  --review-card-top-w: 210px;
  --review-card-gap: 20px;
}

/* 하단 고정 액션 바 — 검색 시스템 export-bar와 동일 패턴 */
.intake-action-bar {
  position: fixed; bottom: 0; left: 0; right: 0; height: 60px;
  background: #fff; border-top: 1px solid var(--border);
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; z-index: 50;
}
.intake-action-count { font-size: 15px; color: #1a1a1a; }
.intake-action-count strong { color: var(--ace-red); font-weight: 700; }
.intake-action-buttons { display: flex; gap: 10px; align-items: center; margin-left: auto; }

/* 1열 카드 — 한 줄씩 */
.review-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.review-card {
  position: relative;
  border: 1px solid var(--border);
  border-left: 4px solid transparent;
  border-radius: 10px;
  background: #fff;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.review-card--auto      { border-left-color: #9ca3af; }
.review-card--review    { border-left-color: #e11d48; }

/* 카드 본문: 좌 상품 정보 | 우 그룹 선택지 (가로 분할) */
.card-main { display: flex; align-items: flex-start; gap: var(--review-card-gap); }
.card-top { flex: 0 0 var(--review-card-top-w); display: flex; align-items: flex-start; gap: 8px; }
.card-product { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

/* 카드 제외 버튼 — 우상단 작은 회색 X, 박스 없음 */
.intake .btn-card-remove {
  position: absolute; top: 10px; right: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0;
  border: none; background: none; border-radius: 0;
  color: #bbb; cursor: pointer; font-size: 13px; line-height: 1;
  transition: color 0.1s; font-family: inherit;
}
.intake .btn-card-remove:hover { color: #888; background: none; }

/* 상품 정보 */
.product-name {
  font-weight: 600; font-size: 14px;
  line-height: 1.4; color: #1a1a1a;
}
.product-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* 카드 안 상태 배지 — 색 빼고 차분하게(범례 배지는 색 유지) */
.product-meta .ctag {
  background: #f3f4f6; color: #4b5563; border-color: #e5e7eb; font-weight: 600;
}
/* 검토 필요 카드 = 붉은(로즈) 테마: 배지·hover·선택 pill을 왼쪽 선 색과 맞춤 */
.product-meta .ctag--review {
  background: #fff1f2; color: #be123c; border-color: #fecdd3;
}
.review-card--review .choice-pill:hover {
  border-color: #fb7185; background: #fff1f2; color: #be123c;
}
.review-card--review .choice-pill:has(input:checked) {
  background: #fff1f2; border: 2px solid #e11d48; color: #9f1239;
}
.review-card--review .choice-pill:has(input:checked) small { color: #e11d48; }
/* AI 신규 제안 pill은 카드 테마와 무관하게 인디고 유지(hover/선택은 전역 .choice-pill--ai) */
.review-card--review .choice-pill--ai:hover {
  border-color: #a5b4fc; background: #f5f7ff; color: #1c1917;
}
.review-card--review .choice-pill--ai:has(input:checked) {
  background: #eef2ff; border: 2px solid #4338ca; color: #3730a3;
}
.review-card--review .choice-pill--ai:has(input:checked) small { color: #818cf8; }

/* 기존 그룹 없음 안내문 */
.ai-lead-note {
  width: 100%; font-size: 12px; font-weight: 600; color: #4338ca; margin-bottom: 2px;
}

/* AI 신규 그룹 영역(제안 pill + 재추천 박스) */
.ai-area { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.ai-body { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* 그룹 배속 불필요 안내 */
.no-group-note {
  width: 100%; font-size: 12px; line-height: 1.5; color: #57534e;
  background: #f5f4f2; border: 1px dashed var(--border); border-radius: 8px; padding: 8px 10px;
}

/* 설명 넣어 다시 추천 — AI 그룹 옆 무색 토글 버튼 */
.intake .resuggest-toggle {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 6px; border: none; background: none; border-radius: 0;
  color: #9ca3af; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 500;
  transition: color 0.1s;
}
.intake .resuggest-toggle:hover { color: #4338ca; background: none; }

/* 펼쳐지는 설명 입력 박스(평소 숨김) + 동그라미 체크 보내기 */
.resuggest-box { display: flex; gap: 6px; align-items: center; width: 100%; }
.intake .resuggest-input {
  flex: 1; min-width: 0; font-size: 12px; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 8px; font-family: inherit;
}
.intake .resuggest-input::placeholder { font-size: 11px; }
.intake .resuggest-input:focus { outline: none; border-color: #818cf8; }
.intake .resuggest-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 12px;
  border: 1.5px solid #c7d2fe; border-radius: 8px; background: #fff; color: #4338ca;
  cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; transition: all 0.12s ease;
}
.intake .resuggest-btn:hover { background: #eef2ff; border-color: #4338ca; }
.intake .resuggest-btn:disabled { opacity: 0.5; cursor: default; }
.resuggest-btn svg { display: block; }

/* ── 그룹 배정 검토: 표(다른 intake 화면과 통일, 평평·무채색) ── */
.rtable-wrap { overflow-x: auto; margin-bottom: 20px; }
.rtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.rtable thead th {
  text-align: left; font-size: 12px; color: var(--muted); font-weight: 600;
  padding: 6px 10px; background: var(--surface); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.rtable td { padding: 8px 10px; border-bottom: 1px solid #eee; vertical-align: top; }
.rtable .rc-code { width: 92px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--muted); white-space: nowrap; vertical-align: middle; }
.rtable .rc-name { width: 24%; min-width: 180px; font-weight: 600; color: var(--text); vertical-align: middle; line-height: 1.4; }
.rtable .rc-x { width: 28px; text-align: center; vertical-align: middle; }
/* 검토 필요 행 — 옅게 색칠 + 왼쪽 강조선으로 눈에 띄게 */
/* 검토 필요 행 — 붉은 연한색 배경 + 행 경계선·좌측 액센트도 붉은 계열로 또렷하게 */
.rrow--review > td { background: #fef2f2; border-bottom: 1px solid #f3bcbc; }
.rrow--review > .rc-code { box-shadow: inset 3px 0 0 #ef9a9a; }
.rrow.is-unassigned > td { background: var(--ace-red-tint); }

/* 그룹 지정 셀 — 선택(토큰)이 1차, 작업 툴바가 2차로 바로 아래 붙는다 */
.rc-assign { min-width: 300px; position: relative; padding-right: 28px; }
.assigned { display: flex; align-items: center; gap: 6px; }
.assigned-name { font-weight: 600; color: var(--text); }
/* 행마다 오른쪽 끝 연필(직접 그룹 추가/수정) */
.intake .edit-group-icon.row-edit { position: absolute; top: 6px; right: 6px; z-index: 1; }
.rc-assign:has(input[value="new"]:checked) .edit-group-icon.row-edit { color: var(--text); background: var(--surface); }
.assign-tokens, .rc-assign .ai-body { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rc-assign .ai-body:empty { display: none; }
.ai-hint { font-size: 12px; color: var(--muted); }

/* 규칙으로 뽑은 대표키워드 칩 → 그 키워드의 그룹 토큰 */
.assign-pick { display: flex; flex-direction: column; gap: 6px; }
/* 대표키워드 칩 + '배속 안 함' 토큰 + 안내문을 한 줄에 */
.assign-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.assign-head-hint { font-size: 11px; color: var(--muted); }
/* 전체 그룹 풀스캔으로 찾은 그룹 배지 */
.fullscan-badge {
  font-size: 11px; font-weight: 600; color: #3730a3;
  background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 4px; padding: 2px 7px;
}
/* 선례 노트 — '비슷한 상품이 이 그룹에 있어요' */
.precedent-note { font-size: 11px; color: var(--muted); margin: 6px 0 2px; display: block; clear: both; }
.gn-chips-label { font-size: 11px; color: var(--muted); margin-right: 2px; }
/* '배속 안 함' 토큰 — 대표키워드 옆. 선택되면 붉은 계열(아래 :has 규칙) */
.intake .nogroup-btn {
  padding: 3px 9px; border: 1px solid var(--border); border-radius: 4px; background: #fff;
  cursor: pointer; font-size: 12px; font-weight: 500; color: var(--muted); font-family: inherit;
}
.intake .nogroup-btn:hover { border-color: #f0a0a0; color: #be123c; }
.intake .gn-chip {
  padding: 3px 9px; border: 1px solid var(--border); border-radius: 4px; background: #fff;
  cursor: pointer; font-size: 12px; font-weight: 600; color: var(--muted); font-family: inherit;
}
.intake .gn-chip:hover { border-color: #999; color: var(--text); }
.intake .gn-chip.is-active { border-color: var(--text); color: var(--text); background: var(--surface); }
/* 대표키워드 안의 그룹들 — 박스로 묶어 위계가 보이게("「단열재」 안의 그룹") */
.gn-tokens {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 7px 9px; background: #fff; border: 1px solid var(--border); border-radius: 6px;
}
.gn-tokens-head { flex-basis: 100%; font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 1px; }

/* 보조 작업 툴바 — 토큰 바로 아래, 약하게(2차 동작) */
.assign-tools { display: flex; flex-wrap: wrap; gap: 2px 2px; margin-top: 6px; }
.intake .tool-btn {
  display: inline-flex; align-items: center; gap: 3px;
  border: none; background: none; padding: 2px 7px; border-radius: 4px;
  color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 500; font-family: inherit; white-space: nowrap;
}
.intake .tool-btn svg { display: block; }
.intake .tool-btn:hover, .intake .tool-btn.is-open { color: var(--text); background: var(--surface); }
/* '배속 안 함'이 선택되면 붉은 계열로 표시(숨은 skip 라디오 상태를 비춘다) */
.rc-assign:has(input[value="skip"]:checked) .nogroup-btn {
  color: #be123c; background: #fff1f2; border: 2px solid #f1a7a7; font-weight: 600;
}

/* 그룹 옆 작은 연필(직접 변경) */
.intake .edit-group-icon {
  border: none; background: none; padding: 2px; color: var(--muted);
  cursor: pointer; line-height: 1; font-family: inherit; vertical-align: -2px;
}
.intake .edit-group-icon:hover, .intake .edit-group-icon.is-open { color: var(--text); background: none; }
.edit-group-icon svg { display: block; }
.intake .btn-card-remove {
  border: none; background: none; padding: 2px 4px;
  color: #bbb; cursor: pointer; font-size: 13px; line-height: 1; font-family: inherit;
}
.intake .btn-card-remove:hover { color: #888; background: none; }

/* 설명 입력 / 직접 추가 입력 */
.resuggest-box { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; width: 100%; }
.direct-panel {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; width: 100%;
  background: #f4f6f8; border: 1px solid #dde3ea; border-radius: 6px; padding: 10px 12px;
}
/* 신규그룹 생성(AI) 영역 — 버튼 아래 펼쳐지는 결과 + 설명 재추천. 영역 전체 폭을 쓴다 */
.ai-newgroup { width: 100%; margin-top: 6px; display: flex; flex-direction: column; gap: 8px; }
.ai-newgroup .ai-body { width: 100%; }
/* 보라색 AI 제안 박스는 위 대표키워드 박스처럼 영역 전체 폭으로 (max-width:340px 규칙을 누른다) */
.rc-assign .ai-newgroup .choice-pill--ai,
.rc-assign .ai-newgroup .choice-pill--ai:has(.ai-reason) { flex: 1 1 100%; max-width: none; }
.ai-newgroup .resuggest-box { margin-top: 0; }
/* 직접 그룹 추가 패널 — 입력칸 위에 제목 한 줄 */
.direct-panel-head { flex-basis: 100%; font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 1px; }

/* 그룹 셀 안의 pill·버튼 — 평평·무채색 */
.rc-assign .choice-pill { border-radius: 4px; border-width: 1px; background: #fff; }
.rc-assign .choice-pill:hover { border-color: #999; background: var(--surface); color: var(--text); }
/* 선택 상태 — 그룹이 선택되면 붉은 계열로 또렷하게 */
.rc-assign .choice-pill:has(input:checked) { background: #fff; border: 2px solid #e11d48; color: #be123c; }
.rc-assign .choice-pill:has(input:checked) small { color: #e11d48; }
.rc-assign .choice-pill--ai { border-color: #c7d2fe; background: #fff; color: var(--text); }
.rc-assign .choice-pill--ai small { color: var(--muted); }
/* AI 신규 제안은 기존 그룹과 색으로 구분(선택 시 인디고) */
.rc-assign .choice-pill--ai:has(input:checked) { background: #eef2ff; border: 2px solid #4338ca; color: #3730a3; }
.rc-assign .choice-pill--ai:has(input:checked) small { color: #6366f1; }
.rc-assign .resuggest-btn { border-radius: 4px; border-color: var(--border); color: var(--text); }
.rc-assign .resuggest-btn:hover { background: var(--surface); border-color: #999; }

/* '가까운 기존 그룹' 라벨 */
.gn-section-label {
  width: 100%; margin: 4px 0 2px; font-size: 12px; font-weight: 600; color: #57534e;
}
.product-id {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 11px; color: var(--muted);
  background: rgba(0,0,0,0.06); border-radius: 4px;
  padding: 1px 6px; white-space: nowrap;
}

/* 인라인 선택지 */
.choices-inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.choices-inline--sub { margin-top: 8px; }

/* Pill 버튼 — 라디오를 숨기고 pill 채움으로 선택 표시 */
.choice-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 13px; border-radius: 20px;
  border: 1.5px solid var(--border);
  cursor: pointer; font-size: 13px; font-weight: 500;
  white-space: nowrap; line-height: 1.3;
  transition: all 0.12s ease;
  user-select: none;
}
.choice-pill input[type="radio"] {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.choice-pill small { font-size: 11px; font-weight: 400; color: var(--muted); }
.choice-pill small::before { content: "("; }
.choice-pill small::after  { content: ")"; }

/* 기본 pill: hover + 선택 */
.choice-pill:hover { border-color: var(--ace-red); background: var(--ace-red-tint); }
.choice-pill:has(input:checked) {
  background: #f5f4f2; border: 2px solid #44403c; color: #1c1917;
}
.choice-pill:has(input:checked) small { color: #78716c; }

/* 추천 그룹 — 색은 빼고, 선택 시 진한 테두리로만 강조 */
.choice-pill--recommended { border-color: var(--border); background: #fff; color: #1c1917; }
.choice-pill--recommended small { color: var(--muted); }
.choice-pill--recommended:hover { background: #f5f4f2; border-color: #c7c7c7; color: #1c1917; }
.choice-pill--recommended:has(input:checked) {
  background: #f5f4f2; border: 2px solid #44403c; color: #1c1917;
}
.choice-pill--recommended:has(input:checked) small { color: #78716c; }

/* AI 제안 */
/* AI 제안 — 평소엔 테두리만(채움 없음), 선택 시 인디고 채움 */
.choice-pill--ai { border-color: #c7d2fe; background: #fff; color: #1c1917; }
.choice-pill--ai small { color: var(--muted); }
.choice-pill--ai:hover { background: #f5f7ff; border-color: #a5b4fc; color: #1c1917; }
.choice-pill--ai:has(input:checked) {
  background: #eef2ff; border: 2px solid #4338ca; color: #3730a3;
}
.choice-pill--ai:has(input:checked) small { color: #818cf8; }

/* AI 신규 제안 — 생성 이유 한 줄(가까운 기존 그룹에 왜 안 들어가는지). pill을 줄바꿈 허용해 아래로 펼침 */
.choice-pill--ai:has(.ai-reason) {
  flex-wrap: wrap; white-space: normal;
  border-radius: 12px; max-width: 340px; row-gap: 2px;
}
.choice-pill .ai-reason {
  flex-basis: 100%; margin-top: 2px;
  font-size: 11px; font-weight: 400; line-height: 1.4; color: var(--muted);
}
.choice-pill .ai-reason::before,
.choice-pill .ai-reason::after { content: none; }

/* 나중에 */
.choice-pill--skip { color: var(--muted); }
.choice-pill--skip:hover { border-color: #9ca3af; background: #f9fafb; color: #374151; }
.choice-pill--skip:has(input:checked) {
  background: #f9fafb; border: 2px solid #9ca3af; color: #374151;
}

/* 접힘 패널 — 버튼처럼 */
.review-details { margin: 10px 0 0; }
.review-details > summary {
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer; list-style: none;
  font-size: 12px; font-weight: 500;
  color: #0369a1; background: #f0f9ff; border: 1px solid #bae6fd;
  padding: 3px 10px; border-radius: 12px;
  transition: all 0.1s; user-select: none;
}
.review-details > summary::-webkit-details-marker { display: none; }
.review-details > summary::marker { display: none; }
.review-details > summary:hover { color: var(--ace-red); border-color: var(--ace-red); background: var(--ace-red-tint); }

/* 카드: 선택지 영역 — 우측에서 넓게 */
.card-choices {
  flex: 1; min-width: 0;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}

/* 직접 그룹 추가 — '설명 넣어 다시 추천'과 같은 무색 아이콘+글자 토글 */
.intake .add-group-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 6px; border: none; background: none; border-radius: 0;
  color: #9ca3af; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 500;
  transition: color 0.1s;
}
.intake .add-group-toggle:hover,
.intake .add-group-toggle.is-open { color: #4338ca; background: none; }
.add-group-toggle svg { display: block; }

/* 미배정 카드 — 적용 시 비어 있으면 잠깐 강조 */
.review-card.is-unassigned {
  outline: 2px solid var(--ace-red); outline-offset: 2px;
  background: var(--ace-red-tint);
}

/* 자동 배정: 직접 수정 연필 — 회색 선 아이콘, 박스 없음 */
.intake .btn-edit-group {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 6px; border: none; background: none; border-radius: 0;
  color: #999; cursor: pointer; font-family: inherit;
  transition: color 0.1s;
}
.intake .btn-edit-group:hover,
.intake .btn-edit-group.is-open { color: #666; background: none; }
.btn-edit-group svg { display: block; }
.edit-label { display: none; font-size: 12px; font-weight: 500; }
.btn-edit-group.is-open .edit-label { display: inline; }

/* 펼침 패널 — 위 선택지(card-choices)와 왼쪽 줄을 맞춘다(card-top 폭 + gap) */
.expand-panel {
  padding: 10px 4px 4px;
  margin-top: 4px;
  margin-left: calc(var(--review-card-top-w) + var(--review-card-gap));
}
@media (max-width: 640px) {
  .expand-panel { margin-left: 0; }
}
.expand-panel .choices-inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* 그룹 추가 입력 줄 */
.direct-input-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px;
}

/* 직접 입력 텍스트박스 */
.inline-text {
  font-size: 13px; padding: 5px 10px;
  border: 1.5px solid var(--border); border-radius: 8px;
  outline: none; font-family: inherit; transition: border-color 0.12s;
}
.intake input.inline-text:focus { border-color: #4338ca; box-shadow: 0 0 0 3px rgba(67,56,202,0.12); outline: none; }
.inline-text::placeholder { font-size: 11px; }
.inline-text--wide { width: 180px; }

/* ── 네이밍 원칙 ──────────────────────────────────────────── */

.guide-section-label {
  margin: 0 0 8px; font-size: 12px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em;
}
.naming-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px;
}
.naming-col {
  background: #fff; border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px;
}
.naming-field {
  margin: 0 0 6px; font-size: 13px; font-weight: 700; color: #111;
}
.naming-field code {
  font-size: 12px; font-weight: 700; background: rgba(0,0,0,0.06);
  padding: 1px 5px; border-radius: 4px;
}
.naming-rules {
  margin: 0; padding-left: 16px; list-style: disc;
}
.naming-rules li {
  font-size: 12px; color: #374151; line-height: 1.6;
}
.naming-rules code {
  font-size: 11px; background: rgba(0,0,0,0.06); padding: 0 3px; border-radius: 3px;
}
.naming-rules em { font-style: normal; font-weight: 600; color: #111; }
.naming-example {
  margin: 0 0 10px; font-size: 12px; color: var(--muted); line-height: 1.6;
}
.naming-example em { font-style: normal; font-weight: 600; color: #374151; }

.intake .btn-ontology-modal {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 7px 14px; border-radius: 8px;
  border: 1.5px solid #cbd5e1; background: #f8fafc;
  color: #334155; transition: all 0.12s; font-family: inherit;
}
.intake .btn-ontology-modal:hover {
  border-color: #64748b; color: #1e293b; background: #eef2f6;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.btn-ontology-modal svg { display: block; }

/* ── 온톨로지 모달 ────────────────────────────────────────── */

.ontology-modal {
  position: fixed; inset: 0; margin: auto;
  width: min(780px, 92vw); max-height: 80vh;
  border: none; border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
  padding: 0; overflow: hidden;
}
.ontology-modal[open] { display: flex; flex-direction: column; }
.ontology-modal::backdrop {
  background: rgba(0,0,0,0.35);
}
.ontology-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  background: #fff; flex-shrink: 0;
}
.ontology-modal-title {
  margin: 0; font-size: 16px; font-weight: 700; color: #111;
}
.ontology-modal-close {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--border); background: #fff;
  cursor: pointer; font-size: 12px; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.1s; font-family: inherit;
}
.ontology-modal-close:hover { background: #f3f4f6; color: #111; }
.ontology-modal-search {
  padding: 12px 20px; border-bottom: 1px solid var(--border);
  background: var(--surface); flex-shrink: 0;
}
.ontology-modal-search input {
  width: 100%; font-size: 13px; padding: 7px 12px;
  border: 1.5px solid var(--border); border-radius: 8px;
  outline: none; font-family: inherit; transition: border-color 0.12s; box-sizing: border-box;
}
.ontology-modal-search input:focus { border-color: var(--ace-red); }
.ontology-modal-body {
  overflow-y: auto; flex: 1; padding: 0;
}
.ontology-modal-body .guide-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.ontology-modal-body .guide-table th {
  position: sticky; top: 0; background: var(--surface);
  padding: 10px 20px; text-align: left;
  font-size: 11px; font-weight: 700; color: var(--muted);
  border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: 0.04em;
}
.ontology-modal-body .guide-table td {
  padding: 8px 20px; border-bottom: 1px solid #f3f4f6; vertical-align: top;
}
.ontology-modal-body .guide-table td:first-child {
  font-weight: 600; white-space: nowrap; color: #111; width: 120px;
}
.ontology-modal-body .guide-table td:last-child { color: #4b5563; }
.ontology-modal-body .guide-table tbody tr:hover { background: #fafafa; }

/* ── 상품 관리(카탈로그) ── */
.catalog-reindex-note { color: var(--muted); font-size: 13px; margin: -4px 0 16px; }

.catalog-toolbar {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap;
}
.catalog-search {
  flex: 1; min-width: 220px; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 6px; font-size: 14px;
}
.catalog-count { color: var(--text); font-size: 13px; font-weight: 600; margin-left: auto; }
.catalog-history-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--muted); text-decoration: none;
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 12px; background: #fff; font-weight: 500;
  transition: color .12s, border-color .12s;
}
.catalog-history-link:hover { color: var(--text); border-color: var(--border-strong); }

.catalog-table td, .catalog-table th { font-size: 13px; white-space: nowrap; }
.catalog-group { color: var(--muted); }
.catalog-stock { text-align: right; color: var(--muted); }
.catalog-table th.catalog-stock { color: var(--muted); }
.catalog-empty { text-align: center; color: var(--muted); padding: 24px; }
/* 편집·삭제 전용 컬럼 */
.cc-edit-col, .cc-del-col { width: 1px; white-space: nowrap; }
.catalog-col-edit, .catalog-col-delete { padding: 6px 8px !important; }
.catalog-col-delete form { margin: 0; }
/* 편집·저장·취소·삭제 버튼 — 삭제보다는 크고 기존 버튼보다는 작은, 통일된 사이즈 */
.catalog-col-edit .catalog-btn,
.catalog-table .catalog-col-delete .catalog-btn-danger {
  font-size: 12px; padding: 4px 10px; border-radius: 5px;
}

.catalog-btn {
  display: inline-block; padding: 6px 12px; border-radius: 6px; font-size: 13px;
  font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: #fff;
  color: var(--text); text-decoration: none; white-space: nowrap;
  font-family: inherit; line-height: 1.4; box-sizing: border-box;
}
.catalog-btn:hover { filter: brightness(0.97); }
.catalog-btn-primary { background: var(--ace-red); border-color: var(--ace-red); color: #fff; }
.catalog-btn-edit { border-color: var(--border); }
.catalog-btn-danger { color: #b94a52; border-color: #f3c0c3; font-weight: 400; font-size: 11px; padding: 3px 8px; border-radius: 4px; }
.catalog-btn-danger:hover { background: #fff5f5; filter: none; }
.catalog-btn-cancel { color: var(--muted); }

/* .intake button 블리드 차단 — catalog 페이지도 .intake 클래스를 공유하므로 특이성으로 덮어씀 */
.intake .catalog-btn { background: #fff; color: var(--text); border: 1px solid var(--border); font-weight: 600; }
.intake .catalog-btn:hover { filter: brightness(0.97); background: #fff; }
.intake .catalog-btn-primary { background: var(--ace-red); border-color: var(--ace-red); color: #fff; }
.intake .catalog-btn-primary:hover { filter: brightness(0.93); background: var(--ace-red); }
.intake .catalog-btn-danger { background: #fff; color: #b94a52; border-color: #f3c0c3; font-size: 11px; padding: 3px 8px; font-weight: 400; }
.intake .catalog-btn-danger:hover { background: #fff5f5; filter: none; }
/* 검색·인라인 저장 버튼 */
.intake .catalog-btn-search,
.intake .catalog-save-btn { background: #e62a11; border-color: #e62a11; }
.intake .catalog-btn-search:hover,
.intake .catalog-save-btn:hover { filter: none; background: #b8220e; border-color: #b8220e; }

.catalog-pagination {
  display: flex; align-items: center; justify-content: center; gap: 4px; margin: 20px 0;
}
.catalog-page-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 8px;
  font-size: 13px; color: var(--text); text-decoration: none;
  border: 1px solid var(--border); border-radius: 6px; background: #fff;
  transition: background .1s; font-family: inherit; cursor: pointer;
}
.catalog-page-btn:hover { background: var(--surface); }
.catalog-page-btn.is-current { background: var(--ace-red); color: #fff; border-color: var(--ace-red); font-weight: 700; }
.catalog-page-btn.is-disabled { color: var(--muted); cursor: default; pointer-events: none; opacity: 0.4; }
.catalog-page-arrow { font-size: 16px; color: var(--muted); }
.catalog-page-ellipsis { font-size: 13px; color: var(--muted); padding: 0 4px; line-height: 32px; }

.catalog-error {
  max-width: 560px;
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px solid #f0c0c0;
  border-radius: 8px;
  background: #fdf2f2;
  color: #b42318;
  font-size: 14px;
}
.catalog-form { max-width: 560px; margin-top: 10px; }
.catalog-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.catalog-label { font-size: 13px; font-weight: 600; color: var(--text); }
.catalog-input {
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; background: #fff;
}
.catalog-field-readonly { background: var(--surface); padding: 10px 12px; border-radius: 6px; }
.catalog-readonly-value { font-size: 14px; color: var(--muted); }
.catalog-form-actions { display: flex; gap: 10px; margin-top: 4px; }
.catalog-form-danger {
  max-width: 560px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border);
}
.catalog-form-danger form { display: flex; align-items: center; gap: 12px; }
.catalog-danger-hint { color: var(--muted); font-size: 12px; }

/* 변경 이력 테이블 */
.catalog-table-wrap { overflow-x: auto; margin-top: 16px; }
.catalog-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.catalog-table th {
  text-align: left; padding: 8px 12px; font-size: 11px; font-weight: 700;
  color: var(--muted); border-bottom: 2px solid var(--border); white-space: nowrap;
}
.catalog-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.catalog-table tbody tr:hover { background: var(--surface); }
.catalog-row { cursor: pointer; }

/* 인라인 편집 모드 */
.catalog-row--editing { background: #fffbf0 !important; outline: 2px solid var(--ace-red); outline-offset: -1px; }
.catalog-row--editing td { vertical-align: middle; padding-top: 6px; padding-bottom: 6px; }
.catalog-cell-input {
  padding: 3px 6px;
  border: 1px solid #d1d5db; border-radius: 4px;
  font-size: 12px; font-family: inherit; background: #fff;
  box-sizing: border-box;
}
/* 숫자 입력(재고·가격·거래건수): 내용 너비에 맞게 */
.catalog-cell-input[type="number"] { width: 72px; }
/* 텍스트 입력(상품명·브랜드): 넓게 */
.catalog-cell-input[type="text"]   { min-width: 120px; }
.catalog-cell-input:focus { outline: none; border-color: var(--ace-red); box-shadow: 0 0 0 2px rgba(196,30,58,.12); }
.catalog-cell-select { min-width: 90px; }
.catalog-actions-edit { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.catalog-cancel-btn { color: var(--muted); }
.catalog-history-time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.catalog-history-code { font-family: monospace; font-size: 12px; }
.catalog-history-diff { font-size: 12px; color: var(--muted); }
.catalog-history-diff div { margin-bottom: 2px; }
.candidate-pool-chevron { transition: transform 0.15s; flex-shrink: 0; }
.add-group-toggle.is-open .candidate-pool-chevron { transform: rotate(90deg); }

.manual-log-table { table-layout: fixed; min-width: 860px; }
.manual-log-table th:nth-child(1), .manual-log-table td:nth-child(1) { width: 168px; }
.manual-log-table th:nth-child(2), .manual-log-table td:nth-child(2) { width: 160px; }
.manual-log-table th:nth-child(3), .manual-log-table td:nth-child(3) { width: 110px; }
.manual-log-table th:nth-child(5), .manual-log-table td:nth-child(5) { width: 84px; }
.manual-log-table th:nth-child(6), .manual-log-table td:nth-child(6) { width: 130px; }
.manual-log-pool-col { text-align: left; }

.candidate-pool-row td { background: var(--surface); padding: 10px 12px; white-space: normal; }
.candidate-pool-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.candidate-pool-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 14px;
  border: 1px solid var(--border); background: #fff;
  font-size: 12px; color: var(--text); white-space: nowrap;
}
.candidate-pool-chip-cd { font-family: monospace; font-size: 11px; color: var(--muted); }
.history-badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600;
}
.history-badge-insert  { background: #ede9fe; color: #5b21b6; }
.history-badge-edit    { background: #e8f0fe; color: #1a56cc; }
.history-badge-delete  { background: #fce8e8; color: #c0282e; }
.history-badge-restore { background: #e6f4ea; color: #1a7c3a; }
.history-badge-revert  { background: #fef3e0; color: #8a5a00; }
.history-badge-manual-typed  { background: #fef3e0; color: #8a5a00; }
.history-badge-manual-search { background: #e8f0fe; color: #1a56cc; }

/* ---------- 관리 4기능 공통 헤더 (_admin_header.html) ----------
   온톨로지 관리 · 신규상품 추가 · 상품정보 수정 · 재고 최신화 4페이지가 동일하게 입는다.
   상단: 로고+제목 좌측 / 메뉴 우측. 하단: 4-버튼바(현재 위치 강조). */
/* body 직속 헤더. 안쪽(로고·메뉴·4-버튼바)을 본문과 같은 열에 정렬 →
   로고가 탭·본문과 줄이 맞는다(혼자 왼쪽으로 튀지 않음). */
.admin-header { width: 100%; margin-bottom: 20px; }
.admin-header-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 40px; max-width: 1200px; margin: 0 auto; padding-top: 24px;
}
/* 로고를 열 왼쪽 끝에 정확히 맞춤(home-link 기본 좌패딩 8px 제거 — 관리 헤더에서만). */
.admin-header-bar .topbar-home-link { padding-left: 0; }
.admin-header-bar .big-page-title { margin: 0; }
.admin-header-left { display: inline-flex; align-items: center; gap: 14px; min-width: 0; }
.admin-header-actions { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* 4-버튼바는 본문과 같은 가운데 열로 정렬. */
.admin-tabs {
  display: flex; align-items: center; gap: 2px;
  max-width: 1200px; margin: 16px auto 0; border-bottom: 1px solid var(--border);
}
/* 헤더가 body 직속으로 올라가므로 관리 페이지의 .layout 전체높이(100vh)를 끈다(불필요한 스크롤 방지). */
body.page-admin .layout { min-height: 0; }
.admin-tab {
  padding: 10px 16px; font-size: 15px; font-weight: 600;
  color: var(--muted); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.1s;
}
.admin-tab:hover { color: var(--text); }
.admin-tab.is-active { color: var(--ace-red); border-bottom-color: var(--ace-red); }
/* 모바일: 4개 탭이 좁은 폭에서 단어가 줄바꿈돼 들쭉날쭉(예: '재고 최'/'신화')해지지 않게
   한 줄 유지 + 가로 스크롤. 글자·여백도 살짝 줄여 한 화면에 더 들어오게 한다. */
@media (max-width: 640px) {
  .admin-tabs { overflow-x: auto; scrollbar-width: none; }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-tab { white-space: nowrap; padding: 10px 12px; font-size: 14px; }
}

/* 상품없음 키워드 검색 — 드롭다운·선택된 행 모두 cand-table 스타일을 그대로 재사용한다 */
.ks-wrap { position: relative; margin-bottom: 8px; }
.ks-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  display: flex; color: var(--muted); pointer-events: none;
}
.ks-icon svg { display: block; width: 18px; height: 18px; }
.ks-input {
  width: 100%; padding: 8px 10px 8px 36px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 4px;
  font-family: inherit; font-size: 14px;
}
.ks-input:focus { outline: none; border-color: var(--info); box-shadow: 0 0 0 2px var(--info-tint); }
/* 드롭다운은 자기 안에서 세로로도 스크롤되는 표라 position:sticky 방식이 실기기에서
   먹지 않는 경우가 있어(위/옆 스크롤 모두 헤더만 사라짐 확인됨), 헤더용 표와 본문용
   표를 분리해 JS로 가로 스크롤 위치만 맞추는 방식으로 바꿨다. 헤더 표·본문 표가
   같은 폭으로 정렬되도록 table-layout:fixed + 각 컬럼 고정폭을 강제한다. */
.ks-results {
  margin-top: 4px; border: 1px solid var(--border); border-radius: 4px;
  overflow: hidden; background: #fff;
}
.ks-table-wrap { display: flex; flex-direction: column; max-height: 260px; }
.ks-thead-scroller { overflow: hidden; flex: none; border-bottom: 1px solid var(--border); }
.ks-tbody-scroller { overflow: auto; flex: 1 1 auto; }
.ks-table-wrap .cand-table { table-layout: fixed; margin-bottom: 0; }
.ks-table-wrap .col-name { width: 220px; }
.ks-no-results { padding: 12px; text-align: center; color: var(--muted); font-size: 13px; }
.ks-picked { margin-bottom: 8px; }
.ks-picked .cand-row { cursor: pointer; }

/* 페이지 전환을 흰 깜빡임 대신 부드러운 페이드로 — 지원 브라우저만(미지원은 평범 이동). */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}