/* ══════════════════════════════════════════════════════════════
   LGM System — 공통 컴포넌트 (디자인 시스템)

   표준 페이지 셸 (위→아래):
     ① .page-title                    (style.css)
     ② details.lgm-help               ⓘ 접이식 안내 (기본 접힘, 상세 규칙)
     ③ .lgm-search-panel              라벨+입력+조회버튼 (검색만, 필터 넣지 않음)
     ④ .lgm-filter-bar > .lgm-seg     필터 세그 — 자체 행, 왼쪽 (검색 유무와 무관히 항상 같은 자리)
     ⑤ .lgm-actions                   왼쪽 메타(총 N건) / 오른쪽 버튼들 (primary 1개)
     ⑥ 결과 테이블 wrap
   ※ 필터 세그는 절대 검색 패널·액션 바 안에 넣지 말 것 — 반드시 .lgm-filter-bar 단독 행.
     검색창 없는 화면(품절·재고차감 등)도 같은 자리(도움말 바로 아래)에 필터가 오도록 통일.

   로드 순서 규칙: style.css → components.css → 페이지.css
   (페이지 CSS가 항상 나중 — 페이지별 오버라이드가 이김)

   전환 완료: 구 클래스(sync-help·product-master-*·toggle-*·invlist 패널/액션)는
   전 화면 마크업이 lgm-*로 교체된 뒤 셀렉터에서 제거됨 (디자인 시스템 PR 1~6).
   새 화면은 CLAUDE.md "디자인 시스템 컴포넌트" 섹션의 사용법을 따른다.
   ══════════════════════════════════════════════════════════════ */

/* ── ② ⓘ 접이식 안내 패널 (원본: helper.css .sync-help 1388–1481) ──
   <details class="lgm-help">
       <summary><span class="lgm-help-ic">ⓘ</span> <b>제목</b> 설명</summary>
       <div class="lgm-help-body">
           <ol class="lgm-help-list"><li>…</li></ol>
           <p class="lgm-help-foot">💡 팁</p>
       </div>
   </details>                                                      */
.lgm-help {
    margin: 0 0 14px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--sans);
}
.lgm-help > summary {
    list-style: none;
    cursor: pointer;
    padding: 11px 14px;
    font-size: 13px;
    color: var(--text-mid);
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}
.lgm-help > summary::-webkit-details-marker { display: none; }
.lgm-help > summary::after {
    content: "펼치기 ▾";
    margin-left: auto;
    font-size: 11px;
    color: var(--text-dim);
    font-family: var(--mono);
}
.lgm-help[open] > summary::after { content: "접기 ▴"; }
.lgm-help > summary b { color: var(--text); font-weight: 500; }
.lgm-help > summary:hover { color: var(--text); }
.lgm-help-ic { color: var(--accent); font-size: 14px; }
.lgm-help-body {
    padding: 2px 14px 14px;
    border-top: 1px solid var(--border);
}
.lgm-help-list {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: synchelp;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lgm-help-list li {
    counter-increment: synchelp;
    position: relative;
    padding-left: 26px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text);
}
.lgm-help-list li::before {
    content: counter(synchelp);
    position: absolute;
    left: 0;
    top: 1px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent-dim);
    color: var(--accent);
    font-family: var(--mono);
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lgm-help-ch {
    display: inline-block;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    padding: 1px 7px;
    border-radius: 5px;
    margin-right: 6px;
    vertical-align: 1px;
}
.lgm-help-ch.ch-cafe24 { background: var(--blue-bg); color: var(--blue); }
.lgm-help-ch.ch-toss { background: var(--accent-dim); color: var(--accent); }
.lgm-help-ch.ch-db { background: var(--surface); color: var(--text-mid); border: 1px solid var(--border); }
.lgm-help-ch.ch-code { background: var(--ok-bg); color: var(--ok); }
.lgm-help-ch.ch-translate { background: var(--warn-bg); color: var(--warn); }
/* 신규 뱃지: 계산 규칙 / 주의 */
.lgm-help-ch.ch-rule { background: var(--surface); color: var(--accent); border: 1px solid rgba(0, 100, 255, 0.25); }
.lgm-help-ch.ch-warn { background: var(--error-bg); color: var(--error); }
.lgm-help-list em { color: var(--text-dim); font-style: normal; }
/* 본문 강조도 실제 굵기 500으로 (700은 faux-bold라 번져 보임 — summary·foot과 통일) */
.lgm-help-list b { color: var(--text); font-weight: 500; }
.lgm-help-foot {
    margin: 13px 0 0;
    padding: 10px 12px;
    background: var(--surface);
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-mid);
}
.lgm-help-foot b { color: var(--text); font-weight: 500; }

/* ── ③ 검색 패널 (원본: helper.css .product-master-* 134–158 + inventory.css .invlist-search-panel 96–118) ──
   <div class="lgm-search-panel">
       <div class="lgm-search-toolbar">
           <div class="lgm-search-field">
               <div class="input-label">상품 검색</div>
               <input type="text" placeholder="…" onkeydown="if(event.key==='Enter')fn()">
           </div>
           <button class="lgm-search-btn" onclick="fn()">조회</button>
           <div class="lgm-seg">…필터…</div>
       </div>
   </div>                                                          */
.lgm-search-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}
.lgm-search-toolbar {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}
.lgm-search-field {
    flex: 1;
    min-width: 0;
}
.lgm-search-field input {
    height: 42px;
    padding: 0 14px;
    border-radius: 8px;
    background: var(--surface2);
    font-family: var(--mono);
    font-size: 12px;
    line-height: 42px;
}
/* X 지우기 버튼이 있는 입력(search-input-wrap)을 툴바 안에서 쓸 때 — 아래 여백 제거 */
.lgm-search-toolbar .search-input-wrap { min-width: 0; margin-bottom: 0; }
.lgm-search-field .input-label { margin-bottom: 10px; }
/* 조회 버튼 — 표준: 모든 검색 패널에 상시 표시 (Enter와 동일 동작) */
.lgm-search-btn {
    width: auto;
    height: 42px;
    min-height: 42px;
    min-width: 62px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}
.lgm-search-btn:hover { background: var(--accent-dk); }

/* ── ③ 필터 세그먼트 (원본: helper.css .toggle-group/.toggle-btn 637–672) ──
   <div class="lgm-seg">
       <button class="lgm-seg-btn active" onclick="filter('all',this)">전체</button>
       <button class="lgm-seg-btn" onclick="filter('x',this)">…</button>
   </div>                                                          */
.lgm-seg {
    display: inline-flex;
    height: 42px;
    padding: 4px;
    gap: 2px;
    align-items: center;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    flex-shrink: 0;
}
.lgm-seg-btn {
    height: 32px;
    min-width: 64px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    background: transparent;
    color: var(--text-dim);
    border: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-family: var(--mono);
    white-space: nowrap;
    line-height: 1;
}
.lgm-seg-btn.active {
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--shadow);
}
.lgm-seg-btn:hover:not(.active) {
    background: var(--surface2);
    color: var(--text);
}

/* ── 필터 행 (표준) ── 필터 세그는 검색 패널/액션 바가 아니라 항상 이 단독 행에.
   검색창 유무와 무관하게 모든 화면에서 같은 위치(도움말 아래, 액션 바 위)·왼쪽 정렬 */
.lgm-filter-bar { display: flex; margin-bottom: 12px; }

/* ── ④ 액션 바 (원본: inventory.css .invlist-actions 119–127 — 사용자 확정 표준 위치) ──
   <div class="lgm-actions">
       <div class="lgm-actions-meta">총 N건</div>
       <div class="lgm-actions-btns">
           <button class="lgm-action-btn">보조 액션</button>
           <button class="lgm-action-btn lgm-action-primary">주 액션 (화면당 1개)</button>
       </div>
   </div>                                                          */
.lgm-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 10px; }
.lgm-actions-btns { display: flex; gap: 8px; flex-shrink: 0; margin-left: auto; }
.lgm-action-btn { height: 34px; min-height: 34px; padding: 0 14px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; font-family: var(--mono); font-size: 11px; background: var(--surface); color: var(--text-mid); border: 1px solid var(--border); cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; }
.lgm-action-btn:hover { border-color: var(--border-hover); color: var(--text); }
/* ★ 버튼 테두리 표준 규칙 (전 서비스 공통):
   모든 버튼은 1px 테두리 자리를 예약한다 (* { box-sizing: border-box } 라 크기 불변, 나란히 둔 버튼끼리 시각 높이 일치).
   - 채움(solid) 버튼(accent/ok/warn 등 컬러 배경): border = 자기 배경색 (호버 시 호버 배경색 따라감)
   - 중립(outline) 버튼(흰/회색 배경): border = var(--border)
   - 토글·고스트·아이콘 버튼(.lgm-seg-btn/.btn-ghost/닫기·핀·햄버거): border: none 유지 (프레임 개념 없음)
   primary는 보더를 따로 두지 않고 base(.lgm-action-btn)의 var(--border)를 공유 — 채움(파랑)만 다름 */
.lgm-action-primary { background: var(--accent); color: #fff; }
.lgm-action-primary:hover { background: var(--accent-dk); color: #fff; }
.lgm-action-primary:disabled { opacity: 0.6; cursor: default; }
.lgm-actions-meta { font-family: var(--mono); font-size: 0.72rem; color: var(--text-dim); min-height: 18px; padding-left: 2px; }

/* ── 컴팩트 버튼 (원본: helper.css 169–198 + style.css .btn-primary 224–230)
   대시보드·헬퍼에서 이미 표준으로 쓰던 42px 버튼. 다른 페이지에서도 사용 가능하게 공통화 ── */
.btn-primary.btn-compact,
.btn-secondary.btn-compact {
    width: auto;
    height: 42px;
    min-height: 42px;
    margin-bottom: 0;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
}
.btn-secondary.btn-compact {
    background: var(--surface2);
    color: var(--text);
    border-color: var(--border);
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.btn-secondary.btn-compact:hover {
    background: var(--surface);
    border-color: var(--border-hover);
}
/* 채움 compact primary: 테두리 = 자기 배경색 (표준 규칙) */
.btn-primary.btn-compact { border-color: var(--accent); transition: border-color 0.15s, background 0.15s; }
.btn-primary.btn-compact:hover { border-color: var(--accent-dk); }

/* ── 열 너비 드래그 핸들 (원본: helper.css 410–437 = inventory.css 152–155 중복 → 단일본) ── */
.col-resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    cursor: col-resize;
    z-index: 2;
    user-select: none;
}
.col-resizer::before {
    content: "";
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 13px;
    background: var(--border-hover);
    border-radius: 1px;
    transition: background 0.12s, height 0.12s;
}
.col-resizer:hover::before,
.col-resizer.dragging::before { background: var(--accent); height: 70%; }

/* ── 위치 보드 (원본: scanner.css 5–24 = inventory.css 36–51·72–76 완전 중복 → 단일본.
       페이지 CSS 쪽 사본은 PR 4에서 삭제) ── */
.loc-section { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 10px; }
.loc-section-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--surface2); border-bottom: 1px solid var(--border); }
.loc-section-title { font-size: 0.95rem; font-weight: 500; }
.loc-section-count { font-family: var(--mono); font-size: 0.75rem; color: var(--text-mid); }
.loc-item { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); gap: 12px; }
.loc-item:last-child { border-bottom: none; }
.loc-item-info { flex: 1; min-width: 0; }
.loc-item-name { font-size: 1rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loc-item-sub { font-size: 0.875rem; color: var(--text-mid); margin-top: 3px; }
.loc-item-bc { font-family: var(--mono); font-size: 0.72rem; color: var(--text-dim); margin-top: 3px; }
.loc-move-btn { font-family: var(--mono); font-size: 0.78rem; font-weight: 500; padding: 6px 12px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--surface2); color: var(--text-mid); cursor: pointer; flex-shrink: 0; transition: all 0.15s; }
.loc-move-btn:hover { border-color: var(--border-hover); color: var(--text); }
.loc-rack-btn { padding: 8px 12px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text-mid); font-family: var(--mono); font-size: 0.78rem; cursor: pointer; transition: all 0.15s; }
.loc-rack-btn:hover { border-color: var(--border-hover); color: var(--text); }
.loc-rack-btn.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.location-toolbar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.location-search { margin-bottom: 12px; }
.btn-subtle { padding: 8px 14px; border: 1px solid rgba(0, 100, 255, 0.18); background: var(--accent-dim); color: var(--accent); font-family: var(--mono); font-size: 0.78rem; }
.btn-subtle:hover { border-color: rgba(0, 100, 255, 0.34); background: var(--accent-glow); }

/* ── 검색 입력 (원본: inventory.css 56–70 — X 지우기 버튼 포함 입력. 공통 승격) ── */
.search-input-wrap { position: relative; margin-bottom: 12px; }
.search-input {
    height: 42px;
    margin-bottom: 0;
    padding: 0 40px 0 14px;
    border-radius: 8px;
    background: var(--surface2);
    font-family: var(--mono);
    font-size: 12px;
    line-height: 42px;
}
.clear-input-btn, .icon-close-btn { background: none; border: none; color: var(--text-dim); cursor: pointer; line-height: 1; }
.clear-input-btn { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); padding: 4px 6px; font-size: 1rem; }
.clear-input-btn:hover, .icon-close-btn:hover { color: var(--text); }

/* ── 모바일 ── */
@media (max-width: 520px) {
    .lgm-search-toolbar { flex-direction: column; align-items: stretch; }
    .lgm-search-btn { width: 100%; }
    .lgm-seg { width: 100%; justify-content: stretch; }
    .lgm-seg-btn { flex: 1; }
}