/* ============================================================================
   자동완성 드롭다운 — 호스트 독립 모듈 (메인 홈 전용 로드)
   ----------------------------------------------------------------------------
   ⚠️ SSOT 주의 — 이 파일은 css/search-portal.css:94~123 의 **의도적 사본**이다.
      검색 결과 페이지(.os-search 스코프)와 메인 홈(.mv3 스코프)이 같은 자동완성
      UI 를 공유하는데, 원본은 --os-* 토큰이 `.os-search` 선택자에 매달려 있어
      그 조상이 없는 홈에서는 토큰이 전부 undefined 가 된다(= 테두리·그림자·라운드가
      소멸하고 흰 박스로만 보이는 '침묵 실패'). 그래서 홈에는 원본을 싣지 못한다.
      → 자동완성 UI 를 고칠 때는 **반드시 두 벌을 함께** 고칠 것.
      → 통합(공용 모듈 단일화)은 홈 안정화 후 별도 커밋으로 예정.

   원본과의 유일한 차이:
     ① --os-* 토큰 20개를 `.os-ac` 자신에 셀프 스코프 (값은 search-portal.css:13~45 verbatim)
     ② 호스트 리셋 의존 차단 (.os-search 의 `* { margin:0; padding:0 }` 이 홈엔 없음)
     ③ 열림 훅을 중립화: `.os-hero-form.is-open .os-ac` → `.os-ac-host.is-open > .os-ac`
   ============================================================================ */

/* ── ① 셀프 스코프 토큰 + ② 로컬 리셋 ──
   반드시 아래 .os-ac-* 규칙보다 앞에 올 것 — 특이도가 동률(0,1,0)이라 순서로 승부한다. */
.os-ac {
  /* 토큰 (출처: css/search-portal.css:13~45 · DS v2.1 Deep Jade) */
  --os-primary-50:  #EEF9F6;
  --os-primary-600: #047E57;
  --os-primary-700: #036546;
  --os-amber-700: #95650A;
  --os-gray-50:  #F7F7F5;
  --os-gray-100: #F0F0ED;
  --os-gray-200: #E6E6E2;
  --os-gray-400: #B6B6B0;
  --os-gray-500: #8A8A85;
  --os-gray-700: #45453F;
  --os-gray-900: #1B1B18;
  --os-hairline: 1px solid var(--os-gray-200);
  --os-radius-sm: 2px;
  --os-radius-xl: 12px;
  --os-radius-pill: 9999px;
  --os-shadow-lg: 0 2px 8px rgba(17,17,16,.06), 0 18px 44px rgba(17,17,16,.09);
  --os-font-kr: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --os-font-en: "Pretendard Variable", Pretendard, "Inter", system-ui, sans-serif;
  --os-font-mono: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --os-tr: .15s ease;

  /* 로컬 리셋 — 홈(.mv3)엔 box-sizing 리셋만 있고 margin/padding 리셋이 없다.
     text-align 은 .mv3-hero 의 center 상속을 차단(검색 페이지는 좌측 정렬). */
  text-align: left;
  font-family: var(--os-font-kr);
  font-size: 14px;
  line-height: 1.6;
  color: var(--os-gray-700);
}
.os-ac, .os-ac * { margin: 0; padding: 0; box-sizing: border-box; }
/* GeneratePress 의 button{padding:10px 20px;background:#55555e;color:#fff} 누수 차단 */
.os-ac button { font-family: inherit; cursor: pointer; padding: 0; }

/* ── ③ search-portal.css:94~123 축자 사본 (@ac-copy:start) ── */
.os-ac {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  background: #fff; border-radius: var(--os-radius-xl);
  box-shadow: var(--os-shadow-lg); border: var(--os-hairline);
  padding: 8px 0 6px; display: none; overflow: hidden;
}
.os-ac-host.is-open > .os-ac { display: block; }   /* 원본: .os-hero-form.is-open .os-ac */
.os-ac:empty { display: none !important; }
.os-ac-group { padding: 4px 0 8px; }
.os-ac-group + .os-ac-group { border-top: var(--os-hairline); padding-top: 10px; }
.os-ac-label { display: flex; align-items: center; justify-content: space-between; padding: 2px 18px 6px; font-family: var(--os-font-en); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--os-gray-500); }
.os-ac-label button { border: none; background: none; font-family: var(--os-font-kr); font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--os-gray-500); }
.os-ac-label button:hover { color: var(--os-gray-700); }
.os-ac-row { display: flex; align-items: center; gap: 11px; padding: 8px 18px; font-size: 14px; color: var(--os-gray-700); cursor: pointer; transition: background var(--os-tr); }
.os-ac-row:hover, .os-ac-row.is-sel { background: var(--os-gray-50); }
.os-ac-row svg { flex: none; color: var(--os-gray-400); }
.os-ac-row b { font-weight: 700; color: var(--os-gray-900); }
.os-ac-row .os-ac-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-ac-kind { flex: none; font-size: 10.5px; font-weight: 600; color: var(--os-gray-500); background: var(--os-gray-100); padding: 3px 7px; border-radius: var(--os-radius-sm); font-family: var(--os-font-en); letter-spacing: .04em; }
.os-ac-kind--fn { font-family: var(--os-font-mono); background: var(--os-primary-50); color: var(--os-primary-700); text-transform: none; letter-spacing: 0; }
.os-ac-del { border: none; background: none; color: var(--os-gray-400); width: 24px; height: 24px; border-radius: var(--os-radius-pill); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.os-ac-del:hover { color: var(--os-gray-700); background: var(--os-gray-100); }
.os-ac-rank { flex: none; width: 16px; font-family: var(--os-font-en); font-size: 12.5px; font-weight: 700; color: var(--os-gray-900); text-align: center; }
.os-ac-rank.is-top { color: var(--os-primary-600); }
.os-ac-delta { flex: none; font-size: 10.5px; font-weight: 600; }
.os-ac-delta.up { color: var(--os-primary-600); }
.os-ac-delta.dn { color: var(--os-gray-400); }
.os-ac-delta.nw { color: var(--os-amber-700); }
.os-ac[data-mode="idle"] .os-ac-when-typed { display: none; }
.os-ac[data-mode="typed"] .os-ac-when-idle { display: none; }
/* ── (@ac-copy:end) ── */