/* ============================================================
 * scm-filter-popover — 필터 옵션 popover (4 modes)
 * ------------------------------------------------------------
 * scm-filter-select 클릭 시 뜨는 popover. 필터 종류별로 4가지
 * 시각/구조 mode 지원.
 *
 * Marker:
 *   <div class="scm-filter-popover-root" data-pop-mode="list">
 *     <div class="scm-filter-popover scm-filter-popover--list">
 *       <div class="scm-filter-popover__search">...</div>
 *       <div class="scm-filter-popover__list-body">...</div>
 *       <div class="scm-filter-popover__footer">...</div>
 *     </div>
 *   </div>
 *
 * Modes:
 *   --codeinput        textarea 입력 + counter (UID/SKU/바코드 등 코드 입력 — 다중)
 *   --list             검색 + 체크박스 리스트 (다중 선택, 옵션 많을 때)
 *   --list-single      체크 표시 단일 선택
 *   --multi            코드입력 + 리스트 혼합
 * ============================================================ */

.scm-filter-popover-root {
  position: fixed;
  z-index: 200;
  display: none;
}
.scm-filter-popover-root.is-open { display: block; }

.scm-filter-popover {
  width: 280px;
  background: #fff;
  border: 1px solid #EBEBEB;
  border-radius: 4px;
  box-shadow: 0 10px 15px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: inherit;
}

/* ===== Mode-specific size/padding ===== */
.scm-filter-popover--codeinput {
  padding: 12px 0;
  height: 292px;
}

.scm-filter-popover--list {
  padding: 6px 0;
  width: 260px;
  max-height: 300px;
}

.scm-filter-popover--list-single {
  padding: 6px 0;
  width: auto;
  min-width: 120px;
  max-width: 280px;
  max-height: 300px;
}

.scm-filter-popover--multi {
  padding: 12px 0;          /* list/code 모드 전환 시 라디오 toggle 의 top 위치 흔들리지 않도록 통일.
                                buton 하단 마진 = 우측 마진 (12px) 도 동시에 일치. */
  width: auto;
  max-height: none;
}

.scm-filter-popover-root[data-pop-mode="code"] .scm-filter-popover--multi {
  width: 280px;
  height: 292px;            /* codeinput 과 동일한 총 높이 */
}

/* ===== Body / common ===== */
.scm-filter-popover__body {
  align-self: stretch;
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 0;
}

/* Codeinput mode — textarea */
.scm-filter-popover__textarea {
  align-self: stretch;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.scm-filter-popover__textarea textarea {
  width: 100%;
  height: 100%;
  flex: 1;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 20.4px;
  color: #000;
}
.scm-filter-popover__textarea textarea::placeholder {
  color: #8A8A8A;
  font-weight: 500;
}

.scm-filter-popover__counter {
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 18px;
  color: #000;
}
.scm-filter-popover__counter .total { color: #666; font-weight: 400; }

/* Codeinput tabs (한 칩 안에서 입력 종류 라디오 전환 — SKU번호 / SKU명 등)
 * Multi mode 의 목록 선택 / 직접 입력 라디오 row 도 동일 스타일 사용.
 * Spec (legacy mp-af-mode-row): padding 12 16, gap 24, font 15/400, radio 16×16 검정 border. */
.scm-filter-popover__tabs {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 16px;
}
.scm-filter-popover__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 400;
  line-height: 20.4px;
  color: #000;
  cursor: pointer;
  user-select: none;
}
.scm-filter-popover__tab input[type="radio"] {
  width: 16px;
  height: 16px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #E0E0E0;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
  display: inline-block;
  box-sizing: border-box;
}
.scm-filter-popover__tab input[type="radio"]:checked {
  border-color: #000;
  background:
    radial-gradient(circle, #fff 0 3.5px, transparent 4px) center/100% 100% no-repeat,
    #000;
}
/* 선택된 탭의 텍스트 강조 (legacy 는 별도 active 스타일 없음 — 텍스트 두께 변화 X) */
.scm-filter-popover__tab.is-active { font-weight: 400; color: #000; }

/* ===== Multi 2-col 레이아웃 (검색결과 + 선택됨) — 어제 legacy mp-af-2col 이식 ===== */
.scm-filter-popover__multi-search {
  padding: 0 12px;
}
.scm-filter-popover__multi-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  border-bottom: 1px solid #EBEBEB;
}
.scm-filter-popover__multi-search-row svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.scm-filter-popover__multi-search-row svg.ic-search { color: #8A8A8A; }
.scm-filter-popover__multi-search-row svg.ic-clear  { color: #000; cursor: pointer; }
.scm-filter-popover__multi-search-row input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  line-height: 20.4px;
  color: #000;
  font-family: inherit;
}
.scm-filter-popover__multi-search-row input::placeholder { color: #8A8A8A; }

.scm-filter-popover__multi-2col {
  display: flex;
  align-items: flex-start;
  padding: 0 4px;
}
.scm-filter-popover__multi-2col .col {
  width: 260px;
  min-width: 120px;
  max-height: 380px;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.scm-filter-popover__multi-2col .col-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(138, 138, 138, 0.10);
  margin: 16px 0 4px;
}
.scm-filter-popover__multi-2col .col-inner {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.scm-filter-popover__multi-2col .col-label {
  padding: 6px 6px 4px;
  font-size: 13px;
  font-weight: 500;
  line-height: 19.5px;
  color: #8A8A8A;
}
.scm-filter-popover__multi-2col .opt-row {
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  padding: 8px 8px 8px 12px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  box-sizing: border-box;
  flex: 0 0 auto;       /* col-inner flex column 에서 stretch 방지 */
}
.scm-filter-popover__multi-2col .opt-row:hover { background: #FAFAFA; }
.scm-filter-popover__multi-2col .opt-row[data-selected="true"] { background: #F5F5F5; }
.scm-filter-popover__multi-2col .opt-row .pop-cb {
  width: 16px;
  height: 16px;
  border: 1px solid #CCCCCC;
  border-radius: 2px;
  background: #fff;
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative;
}
.scm-filter-popover__multi-2col .opt-row[data-selected="true"] .pop-cb {
  border: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V2Z' fill='black'/><path d='M3.4502 7.3001L6.73154 10.5814C6.85121 10.7011 7.04613 10.6982 7.16213 10.5749L12.5502 4.8501' stroke='white'/></svg>") center/16px no-repeat;
}
.scm-filter-popover__multi-2col .opt-row .label {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 19.6px;
  color: #000;
}
/* 선택됨 컬럼: 체크박스 없이 라벨 + 우측 체크 아이콘, 매우 연한 블루 bg.
 * 높이는 검색결과 컬럼 (.opt-row) 과 동일 — 36px box-sizing border-box. */
.scm-filter-popover__multi-2col .opt-row--sel {
  background: #F0F7FF;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  padding: 8px 8px 8px 12px;
  box-sizing: border-box;
  flex: 0 0 auto;
}
.scm-filter-popover__multi-2col .opt-row--sel:hover { background: #E2F1FF; }
.scm-filter-popover__multi-2col .opt-row--sel .ic-check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #000;
}
.scm-filter-popover__multi-2col .col-empty {
  padding: 24px 12px;
  text-align: center;
  color: #8A8A8A;
  font-size: 13px;
}

/* Multi mode 의 직접입력 pane — legacy mp-af-codeinput-pane spec */
.scm-filter-popover--multi .scm-filter-popover__body {
  padding: 12px 16px;
  gap: 6px;
}
.scm-filter-popover--multi .scm-filter-popover__textarea {
  padding: 12px 16px;
  border: 1px solid #000;
  border-radius: 4px;
  height: 200px;
  flex: 0 0 auto;
}

/* Multi 직접입력 일 때 — codeinput popover 과 동일한 컴팩트 사이즈로 통일 */
.scm-filter-popover-root[data-pop-mode="code"] .scm-filter-popover--multi [data-pop-content] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.scm-filter-popover-root[data-pop-mode="code"] .scm-filter-popover--multi .scm-filter-popover__body {
  padding: 0 12px;
  gap: 6px;
}
.scm-filter-popover-root[data-pop-mode="code"] .scm-filter-popover--multi .scm-filter-popover__textarea {
  padding: 12px 16px;
  height: auto;
  flex: 1;
  min-height: 0;
}

/* ===== Search row (list / list-single) ===== */
.scm-filter-popover__search {
  align-self: stretch;
  border-bottom: 1px solid #EBEBEB;
}
.scm-filter-popover__search-row {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
}
.scm-filter-popover__search-row svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.scm-filter-popover__search-row svg.ic-search { color: #8A8A8A; }
.scm-filter-popover__search-row svg.ic-clear  { color: #000; cursor: pointer; }
.scm-filter-popover__search-row input {
  flex: 1;
  min-width: 0;
  height: 20px;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  line-height: 20.4px;
  color: #000;
  font-family: inherit;
}
.scm-filter-popover__search-row input::placeholder {
  color: #8A8A8A;
  font-weight: 500;
}

/* ===== List body ===== */
.scm-filter-popover__list-body {
  align-self: stretch;
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
}

.scm-filter-popover__section-label {
  padding: 8px 8px 4px;
  font-size: 13px;
  font-weight: 400;
  line-height: 19.5px;
  color: #8A8A8A;
}

.scm-filter-popover__item-row {
  padding: 2px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.scm-filter-popover__item {
  flex: 1;
  min-width: 0;
  padding: 10px 8px;
  background: #fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 400;
  line-height: 20.4px;
  color: #000;
  cursor: pointer;
}
.scm-filter-popover__item:hover { background: var(--ld-bg-low, #FAFBFC); }
.scm-filter-popover__item[data-selected="true"] { background: #F5F5F5; }

.scm-filter-popover__item .label {
  flex: 1;
  min-width: 0;
}

/* 체크박스 (다중 선택) */
.scm-filter-popover__item .pop-cb {
  width: 16px;
  height: 16px;
  border: 1px solid #CCCCCC;
  border-radius: 2px;
  background: #fff;
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative;
}
.scm-filter-popover__item[data-selected="true"] .pop-cb {
  border: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V2Z' fill='black'/><path d='M3.4502 7.3001L6.73154 10.5814C6.85121 10.7011 7.04613 10.6982 7.16213 10.5749L12.5502 4.8501' stroke='white'/></svg>") center/16px no-repeat;
}
.scm-filter-popover__item[data-selected="true"] .pop-cb::after { content: none; }

/* 단일 선택 (체크 SVG 우측) */
.scm-filter-popover__item--single {
  justify-content: space-between;
  gap: 12px;
  white-space: nowrap;
}
.scm-filter-popover__item--single .label {
  white-space: nowrap;
  overflow: visible;
}
.scm-filter-popover__item--single .check {
  width: 16px;
  height: 16px;
  color: #000;
  flex-shrink: 0;
}
/* 단일 선택 disabled 옵션 (예: 위탁일 때 자체제작) */
.scm-filter-popover__item.is-disabled,
.scm-filter-popover__item[aria-disabled="true"] {
  color: rgba(0, 0, 0, 0.30);
  cursor: not-allowed;
  pointer-events: none;
}
.scm-filter-popover__item.is-disabled .label,
.scm-filter-popover__item[aria-disabled="true"] .label {
  color: rgba(0, 0, 0, 0.30);
}

/* ===== Footer =====
 * 초기화 버튼 위 line / 마진 모두 제거 — 콘텐츠 영역 바로 다음에 부착. */
.scm-filter-popover__footer {
  align-self: stretch;
  padding: 0 12px;            /* 위/아래 0 — popover 자체 padding 으로만 여백 확보해 우측 margin 과 동일하게 맞춤 */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.scm-filter-popover__reset {
  height: 36px;
  min-width: 48px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #E0E0E0;
  border-radius: 4px;
  color: #000;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.scm-filter-popover__reset:hover { background: var(--ld-bg-low, #FAFBFC); }

.scm-filter-popover__apply {
  height: 36px;
  min-width: 60px;
  padding: 8px 14px;
  background: #000;
  border: 1px solid #000;
  border-radius: 4px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
  cursor: pointer;
}
.scm-filter-popover__apply:hover { background: #1A1A1A; }
.scm-filter-popover__apply:disabled {
  background: rgba(138, 138, 138, 0.10);
  border-color: #EBEBEB;
  color: rgba(0, 0, 0, 0.20);
  cursor: not-allowed;
}