/* ============================================================================
   lino-autocomplete.css — 자동완성 검색 드롭다운 공용 스타일 (`.lac-*`)
   Shared styles for the project-standard autocomplete dropdown.

   짝이 되는 스크립트: /js/lino-autocomplete.js (`LinoAutocomplete.create`)
   둘은 **반드시 함께** 로드된다(index.html 전역). 이 파일을 빼먹으면 눈에 보이는 깨짐뿐
   아니라 **동작 하나가 조용히 사라진다** — 아래 `.lac-dd.stale .lac-row { pointer-events:none }`
   가 "무효(stale) 목록은 마우스로도 못 고른다"는 안전장치의 절반을 담당하기 때문이다
   (나머지 절반은 JS 의 isLive() 검사). 그래서 CSS 를 페이지마다 복사하지 않고 여기 하나만 둔다.
   / Ships with the JS: the stale-guard is half CSS (pointer-events) and half JS (isLive),
     so duplicating this file per page would risk silently losing one half of a safety check.

   출처 / Provenance: 991메뉴(입력테스트)에서 처음 설계·검증한 드롭다운을 그대로 승격한 것.
   설계 의도 주석은 원본의 것을 유지한다(왜 이렇게 생겼는지가 곧 재발 방지 기록이므로).
   ========================================================================== */

/* ── 래퍼 — 드롭다운의 위치 기준(position:relative)만 담당한다 ─────────────────
   폭·정렬은 페이지가 정한다(모달 안 260px, 검색바 안 140px 등 상황마다 다름).
   / Positioning context only; width/alignment belong to the host page. */
.lac-ac { position: relative; }

/* 입력창 표준 스타일 — 선택 적용(페이지 고유 폼 디자인이 있으면 안 붙여도 된다).
   / Optional: pages with their own form skin can skip this class. */
.lac-input { width: 100%; box-sizing: border-box; padding: 9px 11px;
             border: 1px solid var(--gray-300, #cbd2dc); border-radius: var(--radius-sm, 4px);
             font-size: .9rem; color: var(--gray-800, #1f242e); background: #fff; }
.lac-input:focus { outline: none; border-color: var(--brand-cyan, #0090d3);
                   box-shadow: 0 0 0 3px rgba(0, 144, 211, .14); }

/* ── 드롭다운 본체 ───────────────────────────────────────────────────────────
   열 구성은 CSS 변수 하나(--lac-cols)로만 정해지고, 머리행과 데이터행이 같은 변수를 쓴다.
   → 엔티티마다 열 수가 달라도(품목 4열 / 거래처 3열 / 매출처 2열) 정렬이 어긋날 수 없다.
   변수 값은 보통 JS 가 cfg.gridCols 로 넣어 준다(페이지가 CSS 를 안 써도 되게).
   / Head and rows share one column template variable, normally injected by JS (cfg.gridCols),
     so the two can never drift apart and a new page needs no CSS at all.

   【폭 — 입력창 폭에 묶지 않는다 / Not bound to the input width】
     left/right 를 둘 다 0 으로 묶으면 드롭다운이 입력창만큼만 넓어져 긴 품명이 상시 잘린다.
     min-width 로 "최소한 입력창만큼"만 보장하고 실제 폭은 내용(max-content)이 정하게 두되,
     화면을 덮지 않도록 상한만 건다. 좁은 컨테이너(모달 등)에서는 페이지가 max-width 를 덮어쓴다.

   【하이라이트 색 토큰】 common.css 공용 토큰에는 "검색 매칭" 의미를 가진 값이 없다
     (가장 가까운 --warning-soft 는 경고 배경용이라 흰 바탕 대비가 부족). 드롭다운 스코프에
     지역 토큰으로 둬서, 필요하면 페이지가 이 네 값만 덮어쓸 수 있게 한다.
     / No shared token carries "search match" meaning; scoped here and overridable. */
.lac-dd      { --lac-cols: 64px minmax(200px, 1fr);
               --lac-hl-bg: #ffe98a;    --lac-hl-fg: #6b4300;      /* 일반 행 */
               --lac-hl-on-bg: #ffd54a; --lac-hl-on-fg: #3d2500;   /* 선택 행 위 */
               display: none; position: absolute; top: calc(100% + 3px); left: 0;
               min-width: 100%; width: max-content; max-width: min(760px, 92vw);
               z-index: 300; background: #fff; border: 1px solid var(--gray-300, #cbd2dc);
               border-radius: var(--radius-sm, 4px); box-shadow: 0 8px 22px rgba(17, 20, 26, .14);
               max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }
.lac-dd.open { display: block; }

/* 머리행을 스크롤 컨테이너 **안에** sticky 로 두는 이유:
   바깥에 따로 두면 스크롤바 두께만큼 열이 어긋난다. 같은 컨테이너 안이면 항상 정렬된다.
   / Keeping the header inside the scroller (sticky) guarantees column alignment. */
.lac-dd-head { position: sticky; top: 0; z-index: 1; display: grid;
               grid-template-columns: var(--lac-cols); gap: 10px; align-items: center;
               padding: 6px 11px; background: var(--gray-50, #f7f8fa);
               border-bottom: 1px solid var(--gray-200, #e1e5ec);
               font-size: .72rem; font-weight: 700; letter-spacing: .02em;
               color: var(--gray-500, #6b7384); }

/* 행 높이 34px 고정 — 목록형 UI 는 한 번에 보이는 행 수가 곧 속도다. 여백을 줄여
   같은 높이에서 더 많이 노출한다. / Fixed 34px rows: more candidates per screenful.
   선택 행은 배경 하나만으로는 시야 주변에서 놓치기 쉬워 **세 겹**으로 표시한다:
     ① 좌측 3px 컬러바  ② 배경  ③ 이름 볼드(+ 코드 색 승격)
   컬러바를 border 가 아니라 inset box-shadow 로 그리는 이유: border 는 폭을 차지해
   머리행까지 같이 3px 보정해야 하는데, 그림자는 레이아웃에 전혀 영향을 주지 않는다.
   / The bar is an inset shadow, so it costs no layout and needs no header compensation. */
.lac-row     { display: grid; grid-template-columns: var(--lac-cols); gap: 10px;
               align-items: center; height: 34px; padding: 0 11px;
               font-size: .84rem; color: var(--gray-800, #1f242e);
               cursor: pointer; border-bottom: 1px solid var(--gray-100, #eef0f4); }
.lac-row:last-child { border-bottom: none; }
.lac-row.active     { background: var(--primary-soft, #e6eff8);
                      box-shadow: inset 3px 0 0 var(--brand-cyan, #0090d3); }
.lac-row.active .lac-nm { font-weight: 700; }

/* 코드 열 — 사용자가 실제로 훑는 것은 이름이다. 코드가 파란 볼드면 링크처럼 읽혀 시선을
   먼저 붙잡으므로 회색 보조 정보로 낮추고, 선택된 행에서만 다시 올린다.
   / Code demoted to supporting gray; only the active row promotes it. */
.lac-row .lac-cd        { font-family: Consolas, 'JetBrains Mono', monospace;
                          color: var(--gray-500, #6b7384); font-weight: 500; }
.lac-row.active .lac-cd { color: var(--brand-navy, #04367b); font-weight: 700; }
/* 이름 열 — 주인공. 넘치면 말줄임(단, 매칭이 잘릴 상황은 JS fitHighlights 가 따로 처리) */
.lac-row .lac-nm        { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 보조 열(규격·단위 등) */
.lac-row .lac-sub       { color: var(--gray-500, #6b7384); overflow: hidden;
                          text-overflow: ellipsis; white-space: nowrap; }
/* 숫자를 자릿수로 훑어 확인하는 열(사업자번호 등) — 고정폭 글꼴 */
.lac-row .lac-mono      { font-family: Consolas, 'JetBrains Mono', monospace;
                          color: var(--gray-500, #6b7384); overflow: hidden;
                          text-overflow: ellipsis; white-space: nowrap; }

/* 하이라이트 — 연한 배경 하나로는 흰 바탕에서 잘 안 보인다(특히 괄호 안 두 글자).
   배경·글자색·굵기 세 축을 같이 쓴다. 선택 행은 배경이 파랗게 바뀌어 연노랑이 묻히므로
   그 위에서는 한 단계 더 진한 값으로 갈아탄다.
   / Background alone is too weak; color and weight carry it too, with a stronger pair
     reserved for when the row background turns blue. */
.lac-row mark        { background: var(--lac-hl-bg); color: var(--lac-hl-fg);
                       font-weight: 700; padding: 0 1px; border-radius: 2px; }
.lac-row.active mark { background: var(--lac-hl-on-bg); color: var(--lac-hl-on-fg); }

/* stale(무효) 상태 — 목록을 지우지 않고 흐리게 두되 **선택은 막는다**.
   지워 버리면 화면이 깜빡이고, 그대로 두면 엉뚱한 항목이 선택된다. 그 사이를 택했다.
   ⚠ pointer-events:none 은 장식이 아니라 안전장치다(JS isLive() 검사와 한 쌍).
   / Dimmed instead of cleared (no flicker) but non-interactive (no mis-selection).
     The pointer-events rule is a guard, not decoration. */
.lac-dd.stale .lac-row        { opacity: .38; cursor: default; pointer-events: none; }
.lac-dd.stale .lac-row.active { background: transparent; box-shadow: none; }

/* 안내문을 목록 **하단에 고정(sticky)** 한다. 커서를 따라다니는 툴팁과 달리 결과 행을
   가리지 않으면서, 건수·진행 상태를 늘 같은 자리에서 읽게 한다.
   / A pinned footer instead of an overlay: it never covers the rows it describes. */
.lac-dd-note       { position: sticky; bottom: 0; padding: 6px 11px; font-size: .76rem;
                     color: var(--gray-500, #6b7384); background: var(--gray-50, #f7f8fa);
                     border-top: 1px solid var(--gray-100, #eef0f4); }
.lac-dd-note.busy  { color: var(--brand-cyan, #0090d3); }
.lac-dd-note.err   { color: var(--danger, #ef4444); }
.lac-dd-note.count { color: var(--gray-400, #9aa3b2); font-size: .72rem; }
/* 빈 결과는 한 줄짜리 회색 문장이 아니라, 무엇으로 찾았는지 되짚어 주는 넓은 영역으로 */
.lac-dd-note.empty { padding: 18px 14px; text-align: center; line-height: 1.75;
                     white-space: pre-line; background: #fff; border-top: none;
                     color: var(--gray-400, #9aa3b2); }