/* /m/search — 모바일 검색 결과 (PC .search_result_page 를 모바일 단일컬럼으로 재스코프).
   전역 style.css / custom.css 미덮어쓰기 — 모든 규칙은 .m-search-page 하위로 한정한다. */

/* ===== 레이아웃 (모바일 글로벌 .landing_wrap 센터링 오버라이드) ===== */
.m-search-page .landing_wrap {
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  margin-top: 16px;
}

/* ===== 검색 폼 ===== */
.m-search-page .m-search-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-bottom: 48px;
}
.m-search-page .search_main_container {
  position: relative;
  width: 100%;
}
/* 검색 input = 랜딩(.landing_wrap) 키워드 검색 input 과 동일 스타일(공통 CSS 상속).
   .m-search-page 도 .landing_wrap 안에 있으므로 box/아이콘/포커스/dropdown-active 모양은
   custom.css 의 .landing_wrap .search_main_*(2026-06-24 랜딩 Figma)를 그대로 따른다.
   여기서는 submit <button> 리셋과, 자동완성 목록이 결과에 가려지지 않게 하는 보정만 둔다. */
.m-search-page button.search_main_icon {
  padding: 0;
  border: 0;
  background-color: transparent;
  font-size: 0;
  appearance: none;
  -webkit-appearance: none;
}

/* 자동완성 드롭다운 보정: 컨테이너 overflow:hidden(.landing_wrap 상속)이 목록을 input 높이로
   잘라 "검색 결과가 가려져 안 보이던" 문제 → 활성 시 overflow 해제 + 목록 높이 제한/스크롤.
   (활성 시 .search_main_container 는 .landing_wrap 규칙으로 z-index:1200 → 결과 위에 표시) */
.m-search-page .search_main_container.dropdown-active {
  overflow: visible;
}
.m-search-page #mSearchRelatedBox.related_main_box.active {
  max-height: min(52vh, 420px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* 키워드 저장 버튼 — 확장검색 토글 제거 후 단독 풀폭(Figma 시안: 연회색 라운드 + 추가 아이콘) */
.m-search-page .m-search-controls {
  position: relative;
  display: flex;
  width: 100%;
}
.m-search-page .btn_normal.scrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  gap: 8px;
  height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: 40px;
  background: #f4f4f5;
  color: #353639;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.m-search-page .btn_normal.scrap::before {
  content: '';
  flex: none;
  width: 20px;
  height: 20px;
  background: url(/mobile/assets/images/common/ico_keyword_add.svg) no-repeat center center;
  background-size: contain;
}

/* 자동완성 강조(is-active / 매칭 하이라이트)는 components/keyword-autocomplete.css 로 공통화 — 마케팅 키워드창과 통일 */

/* ===== 빈/무결과 안내 (copy_area) ===== */
.m-search-page .copy_area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 40px 0;
  text-align: center;
}
.m-search-page .copy_area h3 {
  display: block;
  width: auto;
  height: auto;
  background: none;
  font-size: 18px;
  font-weight: 600;
  color: #111;
  line-height: 1.4;
}
.m-search-page .copy_area .h4_gap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.m-search-page .copy_area h4 {
  font-size: 14px;
  font-weight: 400;
  color: rgba(112, 115, 124, .95);
  line-height: 1.5;
}
.m-search-page .label_tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  margin: 12px auto 4px;
  padding: 0 22px;
  border-radius: 32px;
  background: #28cd41;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}

/* ===== 결과 루트 / 로딩 / 스피너 (PC .ll-search-* 미러) ===== */
.m-search-page .ll-search-result-root {
  position: relative;
  width: 100%;
  min-height: 120px;
}
.m-search-page .ll-search-result-root + .ll-search-result-root {
  margin-top: 56px;
}
.m-search-page .ll-search-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 8900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: rgba(255, 255, 255, .7);
}
.m-search-page .ll-search-page-loading {
  position: fixed;
  inset: 0;
  z-index: 8900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .82);
  opacity: 1;
  transition: opacity .18s ease;
}
.m-search-page .ll-search-page-loading.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.m-search-page .ll-search-error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: 24px;
  color: #c03434;
  font-size: 14px;
  text-align: center;
}
.m-search-page .ll-search-spinner {
  display: inline-block;
  width: 34px;
  height: 34px;
  border: 4px solid rgba(53, 54, 57, .16);
  border-top-color: #353639;
  border-radius: 50%;
  animation: llSearchSpin .75s linear infinite;
}
@keyframes llSearchSpin {
  to { transform: rotate(360deg); }
}

/* ===== 결과 리스트 ===== */
.m-search-page .list_wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 14px;
}
/* 섹션 헤드: 제목(좌) + 필터(우) 한 줄 정렬 (Figma 시안) */
.m-search-page .list_wrap .com_head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 10px;
  width: 100%;
}
.m-search-page .list_wrap .com_head h4 {
  margin: 0;
  font-size: 17px !important;
  font-weight: 600;
  color: #111 !important;
  text-align: left;
}
.m-search-page .list_wrap .com_head .button {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px 14px;
  width: auto;
  min-width: 0;
  margin-left: auto;
}
/* 필터: 테두리 없는 텍스트형 드롭다운 + 우측 정렬 + 동적 넓이.
   - field-sizing:content → 선택값 길이에 맞춰 폭이 동적으로 넓어짐(미지원 브라우저는 width:auto = 최장옵션 폭으로 폴백).
   - 전역 select{padding/background ... !important}(style.css:298) 를 이기려면 !important 필요. */
.m-search-page select.text {
  flex: none;
  width: auto;
  field-sizing: content;
  min-width: 0;
  height: 30px;
  padding: 0 20px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url(/mobile/assets/images/common/ico_filter_arrow.svg) no-repeat right center !important;
  background-size: 12px auto !important;
  color: rgba(46, 47, 51, .88);
  font-size: 13px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

/* 카드 — 모바일 단일컬럼 (상품/포스팅 공통) */
.m-search-page .list_flex {
  position: relative;
  display: flex;
  width: 100%;
}
.m-search-page .list_flex ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.m-search-page .list_flex ul li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 10px;
  background: #fff;
}
.m-search-page .list_flex ul li .img_box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 64px;
  height: 64px;
}
.m-search-page .list_flex ul li .img_box img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
}
.m-search-page .ll-search-image-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: #f4f4f5;
  color: rgba(46, 47, 51, .7);
  font-size: 20px;
  font-weight: 700;
}
/* 상품 카드: 칩(상단) + 상품명, ↗ 우상단(li align-items:flex-start) — Figma */
.m-search-page .list_flex ul li .title_box {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.m-search-page .list_flex ul li .title_box .keyword {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 26px;
  padding: 0 12px;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 20px;
  background: #fff;
  color: rgba(46, 47, 51, .88);
  font-size: 12px;
  font-weight: 500;
}
.m-search-page .list_flex ul li .title_box h4 {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #353639;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.m-search-page .ll-search-brand,
.m-search-page .list_flex ul li .title_box p {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
  color: rgba(112, 115, 124, .9);
  font-size: 12px;
  line-height: 1.4;
}
.m-search-page .list_flex ul li .title_box p.hesy span {
  color: rgba(112, 115, 124, .9);
  font-size: 12px;
}
.m-search-page .ll-search-brand.has-brand-image {
  align-items: center;
  min-height: 22px;
}
.m-search-page .ll-search-brand.has-brand-image img {
  display: block;
  max-width: 96px;
  max-height: 22px;
  object-fit: contain;
}
.m-search-page .ll-search-brand.has-brand-image .ll-search-brand-text {
  display: none;
}
/* 원본 링크 버튼 */
.m-search-page .btn_link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 10px;
  background: #f4f4f5 url(/assets/images/common/ico_link.svg) no-repeat center center;
  background-size: 14px auto;
  cursor: pointer;
  text-decoration: none;
}
.m-search-page .btn_link.ll-search-denied {
  opacity: .55;
}
.m-search-page .ll-search-empty-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 88px;
  padding: 14px;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 10px;
  background: #fff;
  color: rgba(112, 115, 124, .9);
  font-size: 13px;
}

/* ===== 비Pro 스켈레톤 + 업그레이드 오버레이 (PC b_floating frosted blur) ===== */
.m-search-page .ll-search-skeleton {
  pointer-events: none;
}
.m-search-page .ll-search-skeleton .img_box {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: #ececed;
}
.m-search-page .ll-search-skeleton .ll-skel-bar {
  display: block;
  background: #ececed;
  border-radius: 6px;
}
.m-search-page .ll-search-skeleton .ll-skel-chip {
  width: 54px;
  height: 18px;
  border-radius: 18px;
}
.m-search-page .ll-search-skeleton .ll-skel-line {
  width: 90%;
  height: 13px;
}
.m-search-page .ll-search-skeleton .ll-skel-line.short {
  width: 55%;
}
.m-search-page .ll-search-skeleton .ll-skel-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
}
.m-search-page .list_flex .page_button_wrap.b_floating {
  position: absolute;
  top: 53%;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, .1);
  backdrop-filter: blur(4px) saturate(180%);
  -webkit-backdrop-filter: blur(4px) saturate(180%);
}

/* 업그레이드 CTA */
.m-search-page .page_button_wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 8px;
}
.m-search-page .btn_special.upgrade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  border-radius: 30px;
  background: #d0fd6b;
  color: #000;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.m-search-page .btn_special.upgrade::before {
  content: '+';
  margin-right: 6px;
  font-weight: 700;
}

/* ===== 페이지네이션 ===== */
.m-search-page .paginate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 12px;
}
.m-search-page .paginate a,
.m-search-page .paginate strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #fff;
  border-radius: 6px;
  color: rgba(46, 47, 51, .88);
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
}
.m-search-page .paginate strong {
  background: #d0fd6b;
  color: #000;
  border-color: #d0fd6b;
}

/* ===== 추천 키워드 (keyword_wrap.row) ===== */
.m-search-page .keyword_wrap.row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-top: 30px;
  padding: 24px 18px;
  border: 0;
  border-radius: 20px;
  background: #f4f4f5;
}
.m-search-page .keyword_wrap.row .com_head {
  justify-content: center;
  width: 100%;
}
.m-search-page .keyword_wrap.row .com_head h4 {
  margin: 0;
  font-size: 18px !important;
  font-weight: 600;
  color: #111;
  text-align: center;
}
.m-search-page .keyword_wrap.row .keyword_item {
  width: 100%;
  padding: 0;
}
.m-search-page .keyword_wrap.row .keyword_item ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.m-search-page .keyword_wrap.row .keyword_item li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 20px;
  background: #fff;
  color: #353639;
  font-size: 13px;
}
.m-search-page .keyword_wrap.row .keyword_item li a {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  text-decoration: none;
}

.m-search-page .footer,
.m-search-page .footer_menu {
  width: 100%;
}

.m-search-page .footer_menu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

.m-search-page .footer_menu li {
  margin: 0;
}