/* 상품검색 -- product/search.asp; mockup 7_bizfactory_search_responsive(검색페이지).html
   NO LANE GATE: the page re-links include/css/search.css and two <style> blocks from its own
   <body>, so they cascade AFTER this file; every selector carries #search_wrap to out-rank them. */

/* #search_wrap is never closed, so the footer, quick bar and layer popups parse as its
   children. Each rule therefore also names a page band, and no box property is ever set
   on the id itself. */

@media (max-width: 1023px) {

#search_wrap > .search_keyword_wrap, #search_wrap > .search_keyword_wrap *,
#search_wrap > .option_area, #search_wrap > .option_area *,
#search_wrap > .search_main_wrap, #search_wrap > .search_main_wrap * { box-sizing: border-box; }

/* 검색창: the grey band keeps its 120px, the field becomes a centred pill. */
#search_wrap > .search_keyword_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  padding: 0;
}

#search_wrap .search_keyword_wrap .search_keyword {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: calc(100% - 32px);
  max-width: 640px;
  height: 52px;
  padding: 0 48px 0 18px;
  border: 2px solid #159fda;
  border-radius: 26px;
  background: #fff;
}

#search_wrap .search_keyword .search_box {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  font-size: 15px;
  color: #222;
}

/* right:376px anchors the icon to the old 1200px box; re-anchor it inside the pill. */
#search_wrap .search_keyword .icon_search_keyword {
  top: 50%;
  right: 14px;
  width: 26px;
  height: 26px;
  transform: translateY(-50%);
  background-size: contain;
  background-position: center;
}

/* 옵션: count on the left; the 3/4 chooser has nothing to choose against a fixed
   two-column grid, so it is hidden here. */
#search_wrap > .option_area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: auto;
  padding: 12px 16px 10px;
}

#search_wrap .option_area .left span { margin-top: 0; }

#search_wrap .option_area .left { float: none; }

#search_wrap .option_area .right { display: none; }

/* Body: the two columns stack. 100px of legacy bottom padding becomes 40px. */
#search_wrap > .search_main_wrap {
  display: block;
  width: auto;
  padding: 0 16px 40px;
}

#search_wrap .search_main_wrap > .search_left_area,
#search_wrap .search_main_wrap > .search_right_area {
  width: 100%;
}

#search_wrap .search_left_area .h2 {
  margin-bottom: 10px;
  font-size: 15px;
}

/* search.js turns each heading into a button below 1024 and carries the state in
   aria-expanded, so these only apply once it has run -- the page is never left with a
   chevron that does nothing if the script fails to load. */
#search_wrap .search_left_area .h2[aria-expanded] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  padding: 8px 0;
  cursor: pointer;
}

/* This ::after is a deliberate third flex item, unlike the clearfix that became one by
   accident on 가입완료; it is the chevron, and space-between parks it on the right. */
#search_wrap .search_left_area .h2[aria-expanded]::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 3px;
  border-right: 2px solid #999;
  border-bottom: 2px solid #999;
  transform: translateY(-2px) rotate(45deg);
}

#search_wrap .search_left_area .h2[aria-expanded="true"]::after {
  transform: translateY(2px) rotate(-135deg);
}

#search_wrap .search_left_area .h2[aria-expanded]:focus-visible {
  outline: 2px solid #0f7ba9;
  outline-offset: 2px;
}

#search_wrap .search_left_area .h2[aria-expanded="true"] + ul { margin-top: 8px; }

/* 상품분류 wraps, and never scrolls on either axis: the accordion bounds it now.
   flex-start is load-bearing -- legacy keeps justify-content:center, and a centred flex line
   puts half its overflow before the start edge, which scrollLeft cannot reach. */
#search_wrap .search_left_area ul.classify {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px;
  margin: 0 0 12px;
}

/* Three declarations here are arithmetic, not taste, and all three feed the 126px cap above:
   margin:0 cancels search.css's margin-bottom:14px, line-height pins the chip at 22+7+7+1+1=38px
   against a sheet that already inherits 22px, and the span rule below stops it growing. */
#search_wrap .search_left_area ul.classify > li {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 7px 12px;
  border: 1px solid #e4e5ec;
  border-radius: 9999px;
  font-size: 12px;
  line-height: 22px;
  white-space: nowrap;
}

/* search.css gives the (N) count vertical-align:middle, which lifts it off the baseline and
   makes the line box 0.81px taller -- only on chips that have a count, so rows cut unevenly. */
#search_wrap .search_left_area ul.classify input + label > span {
  vertical-align: baseline;
}

/* The chip itself carries the checked state, so legacy's 17px box inside it goes away. */
#search_wrap .search_left_area ul.classify input + label:before,
#search_wrap .search_left_area ul.classify input:checked + label:before { content: none; }

/* Not the brand #159fda: white on it is 3.00:1 and 12px text needs 4.5:1. Same hue
   and saturation, darker value, 4.74:1. */
#search_wrap .search_left_area ul.classify > li:has(input:checked) {
  border-color: #0f7ba9;
  background: #0f7ba9;
}

#search_wrap .search_left_area ul.classify > li:has(input:checked) label { color: #fff; }

#search_wrap .search_left_area ul.best_keywords {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 14px;
  margin-bottom: 20px;
}

#search_wrap .search_left_area ul.best_keywords li { margin: 0; }

#search_wrap .search_left_area ul.best_keywords li a { line-height: 30px; }

/* Results: two columns whatever the JS put on the <ul>. The doubled .list_box and the
   html prefix are what beat search.asp's own in-body block, which is (1,3,2). */
html #search_wrap .search_right_area ul.list_box.list_box {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 12px;
  width: 100%;
}

/* search.css declares .show_evt width:1200px !important, so this answers it in kind. */
html #search_wrap .search_right_area ul.list_box.show_evt { width: 100% !important; }

html #search_wrap .search_right_area ul.list_box.list_box > li {
  width: 100%;
  min-width: 0;
  margin: 0;
}

/* The divider row the 수동정렬 tag layout emits spans both columns. */
html #search_wrap .search_right_area ul.list_box.list_box > li.linebreak {
  grid-column: 1 / -1;
}

/* search.asp pins margin-right:10px !important on every 4th event-tag card. */
html #search_wrap .search_right_area ul.list_box.show_evt > li:nth-child(4n) {
  margin-right: 0 !important;
}

#search_wrap .search_right_area ul.list_box li > a { display: block; }

/* The thumbnail img is absolutely positioned, so the box needs its own ratio or it
   collapses; contain keeps the 300x247 art from being cropped in a square cell. */
#search_wrap .search_right_area ul.list_box .cover {
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background: #f3f3f3;
}

#search_wrap .search_right_area ul.list_box .cover img {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  max-height: 100%;
  min-height: 0;
  margin: auto;
  transform: none;
  object-fit: contain;
}

/* overflow-wrap:anywhere is load-bearing, not cosmetic: display:flex makes the title an
   anonymous flex item sized to min-content, and a space-less Hangul run then pushes the
   text past the viewport with no box for any rect gate to catch. */
#search_wrap .search_right_area ul.list_box li h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  font-size: 13.5px;
  overflow-wrap: anywhere;
}

#search_wrap .search_right_area ul.list_box li h4 .gnb_label { flex: 0 0 auto; }

#search_wrap .search_right_area ul.list_box li p {
  font-size: 12px;
  line-height: 1.6;
}

/* 검색 결과 없음: 200px of padding on the sentence is a desktop hero, not a phone one. */
#search_wrap .search_right_area .no_result { padding: 40px 16px; }

#search_wrap .search_right_area .no_result p.no_result_info {
  padding: 0;
  font-size: 16px;
}

/* Tag banners: both are pinned to 1200px wide and one to 300px tall. */
#search_wrap .search_right_area .banner {
  min-height: 0;
  margin: 0;
}

#search_wrap .search_right_area .banner img {
  width: 100%;
  height: auto;
  padding: 0;
}

#search_wrap .search_bottom_wrap .bottom_banner { max-width: 100%; }

}
