/* ============================================================
   SHOP «이 카테고리 안에서 검색» 입력 (2026-09-06 신규)

   왜 별도 파일인가
     필터 줄 규칙은 shop-final.min.css 에 !important 로 박혀 있고,
     그 위에 shop-seller-cta.css 가 래퍼(.v2live-filter-row)를 덧대 놨다.
     기존 두 파일을 1바이트도 고치지 않고 «맨 마지막» 에 로드해서만 덧댄다.

   레이아웃 (기존 두 요소 사이에 끼워 넣는다)
     PC(≥1024)      : [필터 3개] [검색창] ......... [전체 셀러 보기]
     태블릿(601~1023): [필터 3개] [검색창] ......... [전체 셀러 보기]  (좁으면 자동 줄바꿈)
     모바일(≤600)    : [필터 3개]
                       [검색창 (100%)]
                       [전체 셀러 보기 (100%)]

   ★ .v2live-filter-buttons «내부» 와 .v2-filter-seller 규칙은 건드리지 않는다.
     줄바꿈은 래퍼의 flex-wrap 이 알아서 처리한다(셀러 버튼과 같은 기법).
   ============================================================ */

.v2-catsearch {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 190px;
    min-width: 0;
    max-width: 320px;
    min-height: 40px;
    margin: 0;
    padding: 0 8px 0 11px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #f3f3f2;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.v2-catsearch:focus-within {
    border-color: #111;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, .07);
}

.v2-catsearch__i {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    color: #8d8d8d;
    transition: color .18s ease;
}
.v2-catsearch:focus-within .v2-catsearch__i { color: #111; }

/* 입력 — 폰트/색은 필터 버튼과 같은 계열. 폭은 남는 공간 전부. */
.v2-catsearch__in {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 38px;
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #111;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 38px;
    -webkit-appearance: none;
    appearance: none;
}
.v2-catsearch__in::placeholder {
    color: #9a9a9a;
    font-weight: 500;
}
/* type=search 의 브라우저 기본 지우기 버튼 제거 — 우리 × 버튼과 겹친다 */
.v2-catsearch__in::-webkit-search-cancel-button,
.v2-catsearch__in::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* 지우기 × — 검색어가 있을 때만 보인다(.has-q 는 JS 가 붙인다) */
.v2-catsearch__x {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d9d9d6;
    color: #fff;
    cursor: pointer;
    transition: background-color .18s ease;
}
.v2-catsearch.has-q .v2-catsearch__x { display: inline-flex; }
.v2-catsearch__x svg { width: 12px; height: 12px; }
.v2-catsearch__x:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .v2-catsearch__x:hover { background: #111; }
}

/* 제출 버튼 — 화면에는 없지만 존재해야 한다.
   JS 가 꺼져 있어도 Enter 로 폼이 제출되고(=현재 조건 유지 검색),
   스크린리더에는 «검색» 버튼으로 읽힌다. */
.v2-catsearch__go {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── 태블릿 이상 : 필터 줄과 같은 높이(44) ───────────────────── */
@media (min-width: 1024px) {
    .v2-catsearch {
        flex: 1 1 260px;
        max-width: 380px;
        min-height: 44px;
        padding: 0 10px 0 13px;
    }
    .v2-catsearch__in { height: 42px; line-height: 42px; font-size: 14px; }
    .v2-catsearch__i  { flex-basis: 17px; width: 17px; height: 17px; }
}

/* ── 모바일 : 필터 3개 아래 한 줄, 가로 100% ─────────────────
   basis 를 100% 로 두면 좌우 margin(28px)이 «더해져» 화면 밖으로 나간다.
   셀러 버튼과 동일하게 calc 로 여백을 basis 에서 뺀다. */
@media (max-width: 600px) {
    .v2-catsearch {
        flex: 1 0 calc(100% - 28px);
        max-width: none;
        min-height: 42px;
        margin: 2px 14px 10px;
    }
    .v2-catsearch__in { height: 40px; line-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .v2-catsearch, .v2-catsearch__i, .v2-catsearch__x { transition: none; }
}