@charset "utf-8";
/* =========================================================================
   pliki8 테마 — 풀스크린 검색 레이어 + 검색 결과 (M4 / FR-04)
   출처: design/pliki-canvas/Modules.dc.html "검색 레이어 (풀스크린)" · "빈 상태"
         docs/pliki8-analysis/04-search.md §A · §B
   이 파일은 헤더(검색 레이어)가 모든 페이지에 있으므로 전역 로드된다.
   결과 페이지 전용 규칙(.pk-searchpage)은 해당 페이지에서만 적용된다.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. 풀스크린 검색 레이어
   ------------------------------------------------------------------------- */
.pk-searchlayer {
    position: fixed;
    inset: 0;
    z-index: 1600;   /* 드로어(1500) 위 */
}
.pk-searchlayer[hidden] { display: none; }

.pk-searchlayer__dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
}
.pk-searchlayer__panel {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .16s ease, transform .16s ease;
}
.pk-searchlayer.is-open .pk-searchlayer__panel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .pk-searchlayer__panel { transition: none; transform: none; }
}

.pk-searchlayer__inner {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px var(--pad-mobile) 40px;
}

@media (min-width: 768px) {
    .pk-searchlayer__inner { padding: 40px 20px; }
}

/* 입력창 520×50 · bg #F4F4F4 · r8 + 닫기 X */
.pk-searchlayer__top {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pk-searchlayer__form { flex: 1 1 auto; min-width: 0; }
.pk-searchlayer__field {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 12px 0 3px;
    border-radius: var(--radius-btn);
    background: var(--c-field-bg);
    color: var(--c-text-gray);
}
.pk-searchlayer__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.pk-searchlayer__submit:focus-visible {
    border-radius: 50%;
    outline: 2px solid var(--c-text-strong);
    outline-offset: -4px;
}
.pk-searchlayer__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--c-text-strong);
    font-size: 15px;
    outline: none;
}
.pk-searchlayer__input::placeholder { color: var(--c-placeholder); }
.pk-searchlayer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px; height: 44px;
    color: var(--c-text);
    cursor: pointer;
}

@media (min-width: 768px) {
    .pk-searchlayer__top { gap: 16px; }
    .pk-searchlayer__input { font-size: 17px; }
    .pk-searchlayer__close { width: 50px; height: 50px; }
}

.pk-searchlayer__body {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-top: 30px;
}
.pk-searchlayer__title {
    margin-bottom: 14px;
    color: var(--c-text-strong);
    font-size: 14px;
    font-weight: 700;
}

@media (min-width: 768px) {
    .pk-searchlayer__body { flex-direction: row; gap: 60px; }
    .pk-hotkw { flex: 0 0 auto; }
    .pk-recent { flex: 1 1 auto; min-width: 0; }
}

/* 인기 검색어 — 2열 × 5행, 1~3위 레드 강조 */
.pk-hotkw__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: column;
    grid-template-rows: repeat(5, auto);
    column-gap: 32px;
    row-gap: 12px;
}
.pk-hotkw__list a {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
}
.pk-hotkw__n {
    flex-shrink: 0;
    width: 20px;
    color: var(--c-text-strong);
    font-size: 14px;
    font-weight: 700;
}
.pk-hotkw__n.is-top { color: var(--c-price-red); }
.pk-hotkw__w {
    overflow: hidden;
    color: var(--c-text);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .pk-hotkw__list { column-gap: 48px; }
}

/* 최근 본 상품 — 90×90 카드 가로 캐러셀 */
.pk-recent[hidden] { display: none; }
.pk-recent__track { display: flex; gap: 10px; }
.pk-recent__card { flex: 0 0 auto; width: 90px; }
.pk-recent__thumb {
    position: relative;
    display: block;
    width: 90px; height: 90px;
    overflow: hidden;
    border-radius: var(--radius-thumb);
    background: var(--c-thumb-bg);
}
.pk-recent__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pk-recent__name {
    display: block;
    max-height: 2.6em;
    margin-top: 6px;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.3;
}

/* -------------------------------------------------------------------------
   2. 검색 결과 페이지
   ------------------------------------------------------------------------- */
/* 코어가 출력하는 h1("상품 검색 결과")은 재검색 입력창이 대신하므로 화면에서 감춘다.
   (SEO/스크린리더용으로 DOM 에는 남긴다) */
.pk-page.is-search > .pk-inner > .pk-page__title {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* 재검색 — 밑줄형 대형 입력창 (500×60 · 24px/700 · 하단 3px #000) */
.pk-requery {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 500px;
    margin: 0 auto 20px;
    padding-bottom: 8px;
    border-bottom: 3px solid var(--c-text-strong);
}
.pk-requery__field { flex: 1 1 auto; min-width: 0; display: block; }
.pk-requery__field input {
    width: 100%;
    height: 44px;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--c-text-strong);
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    outline: none;
}
.pk-requery__field input::placeholder { color: var(--c-placeholder); font-weight: 400; }
.pk-requery__field input::-webkit-search-cancel-button { display: none; }

.pk-requery__clear,
.pk-requery__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px; height: 44px;
    color: var(--c-text);
    cursor: pointer;
}
.pk-requery__clear { color: var(--c-placeholder); }
.pk-requery__clear[hidden] { display: none; }

@media (min-width: 768px) {
    .pk-requery { margin-bottom: 24px; }
    .pk-requery__field input { height: 52px; font-size: 24px; }
}

/* 코어 search.php 가 관리자 설정(de_search_list_mod)의 5열 클래스를 붙여도
   목록·검색 공용 그리드 계약(태블릿 3열 / PC 4열)을 우선한다. */
@media (min-width: 768px) {
    .pk-searchpage .pk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .pk-searchpage .pk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 결과 없음 (Modules.dc.html "빈 상태") */
.pk-noresult {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 24px;
    border: 1px solid var(--c-border);
    border-radius: 16px;
    text-align: center;
}
.pk-noresult__title { color: var(--c-text-strong); font-size: 15px; font-weight: 600; }
.pk-noresult__desc { color: var(--c-placeholder); font-size: 13px; }
.pk-noresult .pk-btn { margin-top: 6px; height: 44px; border: 1px solid var(--c-text-strong); }