/* 검색 레이어 (shop.head.php #hm-search, 동작 js/hm_search.js) — 레퍼런스 ref/261023_search/search01·02.png */
.hm-srch {
    position: fixed;
    inset: 0;
    max-width: 550px; /* 사이트 폭 (default.css #bg-main) */
    margin: 0 auto;
    z-index: 1000001; /* 맨 위로 버튼(.btn-gotop 1000000)보다 위 */
    background: #f4f4f4;
    color: #111;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.hm-srch[hidden] { display: none; }
/* PC에서 내용이 화면보다 길어도 스크롤바는 숨김 (휠·트랙패드·터치 스크롤은 그대로) */
.hm-srch { scrollbar-width: none; -ms-overflow-style: none; }
.hm-srch::-webkit-scrollbar { display: none; }
.hm-srch-inner { padding-bottom: 40px; }
/* 화면이 사이트 폭보다 넓으면 사이트와 같은 좌우 경계선 (default.css #bg-main::before) */
@media (min-width: 552px) {
    .hm-srch { box-shadow: -1px 0 0 #dcdcdc, 1px 0 0 #dcdcdc; }
}

/* 상단 검색줄 */
.hm-srch-bar {
    position: sticky;
    top: 0;
    z-index: 10; /* 아래 칩 영역(Swiper .swiper는 z-index 1)·말풍선(2)이 스크롤될 때 위로 지나가지 않게 */
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px 8px 6px;
    background: #f4f4f4;
}
.hm-srch-back {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 40px;
    padding: 0;
    border: 0;
    background: none;
    color: #111;
}
.hm-srch-box {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-width: 0;
    height: 40px;
    background: #fff;
    border-radius: 3px;
}
.hm-srch-box input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0 4px 0 12px;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 16px; /* 16px 미만이면 iOS가 화면을 확대함 */
    color: #111;
}
.hm-srch-box input::placeholder { color: #9a9a9a; }
.hm-srch-clear,
.hm-srch-submit {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 40px;
    padding: 0;
    border: 0;
    background: none;
    color: #9a9a9a;
}
.hm-srch-clear[hidden] { display: none; }
.hm-srch-submit { margin-right: 4px; }

/* 입력 전: 구역 */
.hm-srch-body { padding: 0 16px; }
.hm-srch-sec { padding: 16px 0 10px; }
.hm-srch-sec[hidden] { display: none; }
.hm-srch-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}
.hm-srch-head h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #111;
}
.hm-srch-head h2 small {
    margin-left: 4px;
    font-size: 13px;
    font-weight: 400;
    color: #777;
}
.hm-srch-clearall,
.hm-srch-more {
    padding: 0;
    border: 0;
    background: none;
    font-size: 13px;
    color: #666;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.hm-srch-more[hidden] { display: none; }

/* 최근 검색어·최근 방문 브랜드·추천 검색어 칩 — 최대 2줄, 넘치면 좌우로 넘김 (Swiper, js/hm_search.js chipRows) */
/* 넘길 때 화면 양끝까지 보이게 본문 좌우 여백(16px, .hm-srch-body)만큼 넓히고, 처음·끝 여백은 Swiper slidesOffsetBefore/After로 */
.hm-srch-chips { overflow: hidden; margin: 0 -16px; }
.hm-srch-chips-slide { width: auto !important; } /* 두 줄을 담은 슬라이드 하나 — 폭은 긴 줄만큼 */
.hm-srch-chips-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px; /* js CHIP_GAP과 같게 */
}
.hm-srch-chips-row + .hm-srch-chips-row { margin-top: 8px; }
.hm-srch-chips-row > * { flex: 0 0 auto; }
.hm-srch-chip {
    display: inline-flex;
    align-items: center;
    height: 32px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #fff;
}
.hm-srch-chip a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    height: 100%;
    padding: 0 2px 0 9px;
    font-size: 13px;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
}
.hm-srch-chip a span { overflow: hidden; text-overflow: ellipsis; }
.hm-srch-chip img {
    display: block;
    width: auto;
    max-width: 44px;
    max-height: 12px;
    object-fit: contain;
    filter: brightness(0); /* img/brand/*.png는 검은 헤더용 흰 글씨 로고 → 검게 */
}
.hm-srch-chip button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: #888;
    font-size: 15px;
    line-height: 1;
}

/* 인기 검색어·인기 상품 순위 (왼쪽 1~5, 오른쪽 6~10) */
.hm-srch-rank {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(var(--rows, 5), auto);
    grid-auto-flow: column;
    column-gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.hm-srch-rank li { min-width: 0; }
.hm-srch-rank .hm-srch-rank-item {
    display: flex;
    align-items: center;
    height: 30px;
    font-size: 14px;
    color: #111;
    text-decoration: none;
}
.hm-srch-rank .no {
    flex: 0 0 22px;
    color: #111;
}
.hm-srch-rank .no.top { color: #2a5ef0; }
.hm-srch-rank .kw {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hm-srch-rank .mv {
    flex: 0 0 auto;
    margin-left: 6px;
    font-size: 9px;
    color: #c4c4c4;
}
.hm-srch-rank .mv.up { color: #ec1c24; }
.hm-srch-rank .mv.down { color: #2a5ef0; }
.hm-srch-rank .mv.new { color: #ec1c24; font-size: 10px; font-weight: 700; }

/* 인기 검색어 제목 옆 [여성][남성] 탭 (인기 검색어·인기 상품·추천 검색어 모두 바뀜) */
.hm-srch-head { gap: 8px; }
.hm-srch-sec[data-sec="popular"] .hm-srch-head { align-items: center; }
.hm-srch-tabs {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 2px;
    border-radius: 15px;
    background: #e6e6e6;
}
.hm-srch-tabs button {
    min-width: 46px;
    height: 26px;
    padding: 0 10px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    font-size: 13px;
    color: #777;
}
.hm-srch-tabs button[aria-selected="true"] {
    background: #fff;
    font-weight: 600;
    color: #111;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
/* 요즘 인기 상품: 상품명이 길어 한 줄에 하나 */
.hm-srch-sec[data-sec="best"] .hm-srch-rank {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
}
/* 요즘 인기 상품 ⓘ 버튼 + 선정 기준 말풍선 */
.hm-srch-sec[data-sec="best"] .hm-srch-head { position: relative; }
.hm-srch-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: 0 0 0 -2px;
    padding: 0;
    border: 0;
    background: none;
    color: #999;
    vertical-align: -4px;
}
.hm-srch-info[aria-expanded="true"] { color: #111; }
.hm-srch-tip {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 2;
    max-width: 300px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #222;
    font-size: 13px;
    line-height: 1.5;
    color: #fff;
    word-break: keep-all; /* 한글을 단어 단위로 줄바꿈 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
.hm-srch-tip[hidden] { display: none; }
.hm-srch-tip strong { color: #ffd84d; font-weight: 600; }
.hm-srch-tip::before { /* 말풍선 꼬리 (ⓘ 아래) */
    content: '';
    position: absolute;
    top: -5px;
    left: var(--tail, 112px); /* js/hm_search.js setTip()이 ⓘ 위치로 맞춤 */
    border: 5px solid transparent;
    border-top: 0;
    border-bottom-color: #222;
}
/* 추천 검색어 칩 */
.hm-srch-pick {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #ddd;
    border-radius: 16px;
    background: #fff;
    font-size: 13px;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
}
.hm-srch-more-wrap { text-align: right; }
.hm-srch-more-wrap .hm-srch-more { margin-top: 4px; }
.hm-srch-rank .hm-srch-empty {
    grid-column: 1 / -1;
    padding: 6px 0;
    font-size: 13px;
    color: #888;
}

/* 인기 검색어·인기 상품 불러오는 중 */
.hm-srch-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 0;
    font-size: 13px;
    color: #999;
}
.hm-srch-loading[hidden] { display: none; }
.hm-srch-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #ddd;
    border-top-color: #888;
    border-radius: 50%;
    animation: hm-srch-spin .7s linear infinite;
}
.hm-srch-loading.is-failed .hm-srch-spinner { display: none; }
@keyframes hm-srch-spin { to { transform: rotate(360deg); } }

/* 비회원: 인기 검색어·인기 상품을 흐린 자리표시로 + 가운데 로그인 안내 (js/hm_search.js renderRanks) */
.hm-srch-ranks { position: relative; }
.hm-srch-ranks.is-locked .hm-srch-rank {
    filter: blur(5px);
    opacity: .7;
    user-select: none;
    pointer-events: none;
}
.hm-srch-lock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 32px);
    max-width: 280px;
    padding: 20px 16px 18px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .1);
    text-align: center;
}
.hm-srch-lock[hidden] { display: none; }
.hm-srch-lock p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
}
.hm-srch-lock-btn {
    display: inline-block;
    margin-top: 16px; /* 안내 문구와 간격 (p 여백은 다른 스타일에 덮여서 버튼 쪽에 줌) */
    min-width: 140px;
    padding: 10px 16px;
    border-radius: 6px;
    background: #111;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
}

/* 입력 중: 추천 검색어 */
.hm-srch-suggest[hidden] { display: none; }
.hm-srch-kw,
.hm-srch-links {
    margin: 0;
    padding: 0;
    list-style: none;
}
.hm-srch-kw { padding-top: 6px; }
.hm-srch-kw a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 4px 0;
    font-size: 15px;
    color: #111;
    text-decoration: none;
}
.hm-srch-kw .ic {
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: #777;
}
.hm-srch-kw .kw {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hm-srch-kw .dt {
    flex: 0 0 auto;
    font-size: 13px;
    color: #888;
}
.hm-srch-hl { color: #2a5ef0; }

/* 입력 중: 브랜드·분류 바로가기 */
.hm-srch-links { padding: 18px 0 0; }
.hm-srch-links:empty { display: none; }
/* 브랜드 바로가기는 추천 검색어 위 (가는 줄로 구분) */
.hm-srch-links.hm-srch-brand-links {
    padding: 8px 0 6px;
    border-bottom: 1px solid #e4e4e4;
}
.hm-srch-links a {
    display: block;
    padding: 9px 0;
    text-decoration: none;
}
.hm-srch-links .t {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #111;
}
.hm-srch-links .s {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    color: #888;
}

/* 열려 있는 동안 뒤 화면 스크롤 잠금 */
body.hm-srch-open { overflow: hidden; }

/* 검색 결과 화면 위 검색창 (skin/shop/basic/search.skin.php) — 누르면 지금 검색어를 채워 레이어를 엶 */
.search-form-wrap form[name="frmdetailsearch"] { flex: 1 1 auto; min-width: 0; }
.hm-srch-fake {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    padding: 0 10px 0 12px;
    border-radius: 3px;
    background: #fff;
    color: #9a9a9a;
    text-decoration: none;
}
.hm-srch-fake-q {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    color: #111;
}