/* DEV SEARCH TEST - PC ONLY */
/* 0원구독 페이지 검색창 테스트 */

@media (min-width: 601px) {
  :is(body.detail-page.card-detail-page.promotion-page, body.oje-search-enabled) .header-search {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 44px !important;
    padding: 0 48px 0 0 !important;
    border: 1.5px solid #d0d5dd !important;
    border-radius: 9999px !important;
    background: #fff !important;
    overflow: visible !important;
  }

  :is(body.detail-page.card-detail-page.promotion-page, body.oje-search-enabled) .header-search input {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 0 10px 0 18px !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    font-size: 14px !important;
  }

  :is(body.detail-page.card-detail-page.promotion-page, body.oje-search-enabled) #clearSearch {
    position: absolute !important;
    top: 50% !important;
    right: 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 54px !important;
    height: 34px !important;
    padding: 0 14px !important;
    transform: translateY(-50%) !important;
    border: 0 !important;
    border-radius: 9999px !important;
    background: #2189ff !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
  }

  :is(body.detail-page.card-detail-page.promotion-page, body.oje-search-enabled) .top-header {
    gap: 14px !important;
    overflow: visible !important;
  }
}

/* DEV PC SEARCH WIDTH ALIGNMENT */
@media (min-width: 601px) {
  :is(body.detail-page.card-detail-page.promotion-page, body.oje-search-enabled) .top-header > .brand {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  :is(body.detail-page.card-detail-page.promotion-page, body.oje-search-enabled) .top-header > .header-search {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
}

/* DEV ZERO SUBSCRIPTION MOBILE SEARCH */
@media (max-width: 600px) {
  :is(body.detail-page.card-detail-page.promotion-page, body.oje-search-enabled) .top-header {
    height: 116px !important;
    min-height: 116px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px 0 !important;
    padding: 10px 16px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  :is(body.detail-page.card-detail-page.promotion-page, body.oje-search-enabled) .top-header > .brand {
    flex: 0 0 auto !important;
    width: 183px !important;
    height: 38px !important;
    min-width: 0 !important;
  }

  :is(body.detail-page.card-detail-page.promotion-page, body.oje-search-enabled) .header-search {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 44px !important;
    padding: 0 48px 0 0 !important;
    border: 1.5px solid #d0d5dd !important;
    border-radius: 9999px !important;
    background: #fff !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  :is(body.detail-page.card-detail-page.promotion-page, body.oje-search-enabled) .header-search input {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 0 10px 0 18px !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    font-size: 14px !important;
  }

  :is(body.detail-page.card-detail-page.promotion-page, body.oje-search-enabled) #clearSearch {
    position: absolute !important;
    top: 50% !important;
    right: 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 54px !important;
    height: 34px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 9999px !important;
    background: #2189ff !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    transform: translateY(-50%) !important;
    box-sizing: border-box !important;
  }

  :is(body.detail-page.card-detail-page.promotion-page, body.oje-search-enabled) .nav-header {
    height: 45px !important;
    min-height: 45px !important;
  }
}


/* ===== OJE DEV SEARCH DROPDOWN UNIFY FINAL ===== */
/* Main page remains the design reference */

body.oje-search-enabled .top-header,
body.detail-page.card-detail-page.promotion-page .top-header {
  position: relative !important;
  z-index: 2000 !important;
  overflow: visible !important;
}

body.oje-search-enabled .header-search,
body.detail-page.card-detail-page.promotion-page .header-search {
  z-index: 2100 !important;
  overflow: visible !important;
}

body.oje-search-enabled .search-suggestions,
body.detail-page.card-detail-page.promotion-page .search-suggestions {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;

  width: 100% !important;
  min-width: 100% !important;

  z-index: 9999 !important;

  padding: 6px 0 !important;
  border: 1px solid #e4e7ec !important;
  border-radius: 14px !important;

  background: #fff !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body.oje-search-enabled .search-suggestions[hidden],
body.detail-page.card-detail-page.promotion-page .search-suggestions[hidden] {
  display: none !important;
}

body.oje-search-enabled .search-suggestion-item,
body.detail-page.card-detail-page.promotion-page .search-suggestion-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  width: 100% !important;
  min-height: 44px !important;
  height: auto !important;

  padding: 8px 14px !important;

  border: 0 !important;
  background: #fff !important;

  text-align: left !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

body.oje-search-enabled .search-suggestion-item:hover,
body.oje-search-enabled .search-suggestion-item:focus,
body.detail-page.card-detail-page.promotion-page .search-suggestion-item:hover,
body.detail-page.card-detail-page.promotion-page .search-suggestion-item:focus {
  background: #f8fafc !important;
}

body.oje-search-enabled .search-suggestion-icon,
body.detail-page.card-detail-page.promotion-page .search-suggestion-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 26px !important;
  width: 26px !important;
  height: 26px !important;

  border-radius: 50% !important;
  background: #f2f4f7 !important;
  color: #98a2b3 !important;
  font-size: 14px !important;
}

body.oje-search-enabled .search-suggestion-item strong,
body.detail-page.card-detail-page.promotion-page .search-suggestion-item strong {
  display: block !important;
  min-width: 0 !important;

  color: #101828 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.oje-search-enabled .search-suggestion-item small,
body.detail-page.card-detail-page.promotion-page .search-suggestion-item small {
  display: block !important;
  margin-top: 3px !important;

  color: #98a2b3 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

/* SEARCH DROPDOWN SAME AS 0원구독 */
.header-search {
  position: relative !important;
  overflow: visible !important;
}

.search-suggestions {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 6px) !important;
  z-index: 9999 !important;
  margin-top: 0 !important;
}

.nav-header,
.desktop-nav,
.site-header {
  overflow: visible !important;
}


/* ===== OJE SEARCH DROPDOWN LAYER UNIFY ===== */
/* DEV: search dropdown above navigation */

:is(
  body.detail-page.card-detail-page.promotion-page,
  body.oje-search-enabled
) .top-header {
  position: relative !important;
  z-index: 5000 !important;
  overflow: visible !important;
}

:is(
  body.detail-page.card-detail-page.promotion-page,
  body.oje-search-enabled
) .header-search {
  position: relative !important;
  z-index: 5100 !important;
  overflow: visible !important;
}

:is(
  body.detail-page.card-detail-page.promotion-page,
  body.oje-search-enabled
) .search-suggestions {
  position: absolute !important;
  z-index: 9999 !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
}


/* ===== DEV SEARCH BUTTON NOWRAP ===== */
:is(
  body.detail-page.card-detail-page.promotion-page,
  body.oje-search-enabled
) #clearSearch {
  white-space: nowrap !important;
  word-break: keep-all !important;
  flex-shrink: 0 !important;
}


/* ===== OJE DETAIL SEARCH DROPDOWN STACK FIX ===== */
/* DEV product detail page only */

body.detail-page:not(.card-detail-page) .top-header {
  position: relative !important;
  z-index: 6000 !important;
  overflow: visible !important;
}

body.detail-page:not(.card-detail-page) .header-search {
  position: relative !important;
  z-index: 6100 !important;
  overflow: visible !important;
}

body.detail-page:not(.card-detail-page) .search-suggestions {
  position: absolute !important;
  z-index: 9999 !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
}


/* ===== OJE DETAIL SEARCH STACK FINAL 20261022 ===== */
/* 상품 상세페이지 검색창을 메뉴보다 위에 표시 */

@media (min-width: 601px) {
  body.detail-page.oje-search-enabled .site-header {
    position: relative !important;
    z-index: 7000 !important;
    overflow: visible !important;
  }

  body.detail-page.oje-search-enabled .site-header .top-header {
    position: relative !important;
    z-index: 8000 !important;
    overflow: visible !important;
  }

  body.detail-page.oje-search-enabled .site-header .header-search {
    position: relative !important;
    z-index: 8100 !important;
    overflow: visible !important;
  }

  body.detail-page.oje-search-enabled .site-header .search-suggestions {
    position: absolute !important;
    z-index: 9999 !important;
    overflow: hidden !important;
  }
}

@media (max-width: 600px) {
  body.detail-page.oje-search-enabled .site-header {
    position: relative !important;
    z-index: 7000 !important;
    overflow: visible !important;
  }

  body.detail-page.oje-search-enabled .site-header .top-header {
    position: relative !important;
    z-index: 8000 !important;
    overflow: visible !important;
  }

  body.detail-page.oje-search-enabled .site-header .header-search {
    position: relative !important;
    z-index: 8100 !important;
    overflow: visible !important;
  }

  body.detail-page.oje-search-enabled .site-header .search-suggestions {
    position: absolute !important;
    z-index: 9999 !important;
    overflow: hidden !important;
  }
}


/* ===== OJE CATEGORY SEARCH BUTTON FIX 20261022 ===== */
/* 0원구독 검색 버튼 규격 */

body.oje-search-enabled.mobile-test-page #clearSearch {
  position: absolute !important;
  top: 50% !important;
  right: 5px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 34px !important;

  padding: 0 14px !important;
  margin: 0 !important;

  transform: translateY(-50%) !important;

  border: 0 !important;
  border-radius: 9999px !important;

  background: #2189ff !important;
  color: #fff !important;

  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  white-space: nowrap !important;
  word-break: keep-all !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}


/* ===== OJE CATEGORY SEARCH VISUAL ALIGN FIX ===== */
/* DEV: category, monitor, moving-style */

body.oje-search-enabled.mobile-test-page:not(.home-page) #clearSearch {
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
}

body.oje-search-enabled.mobile-test-page:not(.home-page)
.search-suggestion-item {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  text-align: left !important;
  gap: 10px !important;
  padding: 8px 14px !important;
}

body.oje-search-enabled.mobile-test-page:not(.home-page)
.search-suggestion-icon {
  margin: 0 !important;
  flex: 0 0 26px !important;
}

body.oje-search-enabled.mobile-test-page:not(.home-page)
.search-suggestion-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}

body.oje-search-enabled.mobile-test-page:not(.home-page)
.search-suggestion-text strong,
body.oje-search-enabled.mobile-test-page:not(.home-page)
.search-suggestion-text small {
  text-align: left !important;
}


/* ===== OJE CATEGORY SEARCH ICON REMOVE FINAL ===== */
/* DEV category / monitor / moving-style only */

body.oje-search-enabled.mobile-test-page:not(.home-page)
.header-search #clearSearch::before,
body.oje-search-enabled.mobile-test-page:not(.home-page)
.header-search #clearSearch::after {
  content: none !important;
  display: none !important;
}

body.oje-search-enabled.mobile-test-page:not(.home-page)
.header-search #clearSearch {
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 34px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  font-family: Arial, sans-serif !important;
  white-space: nowrap !important;
  background-image: none !important;
}


/* ===== OJE MOBILE DROPDOWN ABOVE NAV FIX 20261022 ===== */
/* DEV mobile search suggestions above navigation */

@media (max-width: 600px) {
  body.detail-page.card-detail-page.promotion-page .top-header,
  body.ai-subscription-guide-page .top-header {
    position: relative !important;
    z-index: 8000 !important;
    overflow: visible !important;
  }

  body.detail-page.card-detail-page.promotion-page .header-search,
  body.ai-subscription-guide-page .header-search {
    position: relative !important;
    z-index: 8100 !important;
    overflow: visible !important;
  }
}


/* ===== OJE DETAIL PC HEADER STICKY RESTORE 20261022 ===== */
@media (min-width: 601px) {

  body.detail-page.oje-search-enabled:not(.card-detail-page)
  .site-header {
    position: sticky !important;
    top: 0 !important;
  }

}


/* ===== OJE DETAIL PC SEARCH BUTTON TEXT ALIGN 20261022 ===== */
@media (min-width: 601px) {

  body.detail-page.oje-search-enabled:not(.card-detail-page)
  .header-search #clearSearch {
    line-height: 13px !important;
  }

}


/* ===== OJE DETAIL MOBILE HEADER STICKY RESTORE 20261022 ===== */
@media (max-width: 600px) {

  body.detail-page.oje-search-enabled:not(.card-detail-page)
  .site-header {
    position: sticky !important;
    top: 0 !important;
  }

}


/* ===== OJE DETAIL MOBILE SEARCH BUTTON TEXT ALIGN 20261022 ===== */
@media (max-width: 600px) {

  body.detail-page.oje-search-enabled:not(.card-detail-page)
  .header-search #clearSearch {
    line-height: 13px !important;
  }

}
