/* [palette: gold-deep] 이 파일은 _palette/green 원본에서 자동 생성되었습니다.
   직접 고치지 마세요 — 다음 빌드에서 덮어써집니다.
   색을 바꾸려면 /root/gm-theme/gold-deep.map 을 고치고 switch.sh build 를 돌리세요. */
@charset "utf-8";
/* ============================================================
   검색광고 · 모바일 검색 레이어 (2026-08-06)

   이 파일은 팔레트(_palette/)에 들어 있지 않다. 포인트 컬러는 반드시
   var(--point) / var(--point-dark) 로만 쓴다 — 그래야 switch.sh 로
   색을 바꿔도 이 화면이 따라온다. 색값을 직접 적지 말 것.
   ============================================================ */

/* ========== 검색창 안내문구 : 검색광고가 뜰 때는 진한 글씨 ========== */
.gm-search-input.is-ad::placeholder      { color:#3a3a3a; font-weight:800; opacity:1; }
.gm-search-input.is-ad::-webkit-input-placeholder { color:#3a3a3a; font-weight:800; }
.gm-search-input.is-ad::-moz-placeholder { color:#3a3a3a; font-weight:800; opacity:1; }

/* ========== 터치했을 때 생기는 사각 하이라이트 정리 ==========
   모바일 브라우저는 탭한 요소에 회색/파란 사각형을 씌우고, 헤더 검색창은
   레이어를 여는 버튼 역할이라 글자 선택 커서까지 떠서 지저분해 보인다.
   포커스 표시는 완전히 없애지 않고 키보드 사용자에게만 남긴다(:focus-visible). */
.gm-search-box,
.gm-search-box input,
.gm-search-btn,
.gm-adchip,
.gm-srch-modal,
.gm-srch-modal a,
.gm-srch-modal button,
/* 검색결과 페이지의 검색 UI (롤링 검색어·검색어 태그·필터·정렬) */
.gm-rank-roll,
.gm-rank-item,
.srch-tag,
.sorts a,
.gm-filter-q input,
.gm-filter-q button,
.gm-filter-cate a,
.gm-filter-apply{
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
}

/* 마우스·터치로 눌렀을 때는 사각 포커스 링을 띄우지 않는다 (키보드는 아래 :focus-visible 로 남긴다) */
.gm-filter-q input:focus,
.gm-filter-q button:focus,
.gm-filter-apply:focus,
.sorts a:focus{ outline:none; }

.sorts a:focus-visible,
.gm-filter-q button:focus-visible,
.gm-filter-apply:focus-visible{
  outline:2px solid var(--point-dark);
  outline-offset:2px;
}

/* ========== 검색창 안쪽에 사각 박스가 드러나는 것 막기 ==========
   둥근 검색창(.gm-search-box) 안의 input 은 배경·테두리가 없어야 하는데,
   ① 브라우저 자동완성이 걸리면 크롬이 input 영역만 파란/노란 배경으로 칠하고
   ② 일부 모바일 브라우저(삼성 인터넷 등)는 포커스 시 자체 하이라이트 박스를 그린다.
   둘 다 "둥근 박스 안에 사각 입력바" 로 보인다. */
.gm-search-box input{
  -webkit-appearance:none;
  appearance:none;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.gm-search-box input:focus,
.gm-search-box input:focus-visible,
.gm-search-box input:active{
  outline:0;
  background:transparent;
  box-shadow:none;
}
/* ③ 진짜 원인 — 코어 default_shop.css 36행이 이렇게 걸어 둔다 :
      input[type=text]:focus { box-shadow:0 0 5px #9ed4ff; border:1px solid #558ab7 !important; }
   테마 배포판 CSS 라 고치지 않고 여기서 되돌린다. border 쪽이 !important 라
   특이도를 아무리 올려도 이기지 못하므로 !important 로만 무를 수 있다.
   (input 에는 radius 가 없어서 둥근 검색창 안에 각진 파란 사각형으로 보인다) */
.gm-search-box input[type="text"]:focus{
  border:0 !important;
  box-shadow:none !important;
}
/* 자동완성 배경 : 색을 글자 영역으로 클립해 사실상 보이지 않게 한다
   (흰 배경을 inset box-shadow 로 덮는 흔한 방법은 모서리가 각져서 오히려 사각형이 남는다) */
.gm-search-box input:-webkit-autofill,
.gm-search-box input:-webkit-autofill:hover,
.gm-search-box input:-webkit-autofill:focus{
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:var(--txt);
  transition:background-color 9999s ease-out 0s;
}

/* 헤더의 모바일 검색창 : 눌러서 레이어를 여는 버튼이므로 글자 선택·커서를 없앤다 */
.gm-m-search .gm-search-input[readonly]{
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
}

/* 포커스 : 기본 사각 테두리 대신 검색창 테두리를 한 톤 진하게 (팔레트를 따라간다) */
.gm-search-box:focus-within{
  border-color:var(--point-dark);
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.gm-search-box input:focus,
.gm-search-btn:focus,
.gm-srch-close:focus,
.gm-adchip:focus{ outline:none; }

/* 키보드로 이동할 때는 보이게 (접근성) */
.gm-search-btn:focus-visible,
.gm-srch-close:focus-visible,
.gm-adchip:focus-visible,
.gm-recent-del:focus-visible{
  outline:2px solid var(--point-dark);
  outline-offset:2px;
}

/* ========== 검색광고 칩바 (가로 슬라이드) — 모바일 검색 레이어 안에서만 쓴다 ========== */
.gm-adbar{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;                 /* Firefox */
  scroll-snap-type:x proximity;
}
.gm-adbar::-webkit-scrollbar{ display:none; }
.gm-adbar.dragging{ cursor:grabbing; }
.gm-adbar.dragging .gm-adchip{ pointer-events:none; }

.gm-adbar-track{
  display:flex;
  gap:6px;
  width:max-content;
  padding:1px 0 2px;
}
.gm-adchip{
  display:inline-flex;
  align-items:center;
  height:28px;
  padding:0 13px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
  font-size:12.5px;
  font-weight:700;
  color:#555;
  white-space:nowrap;
  scroll-snap-align:start;
  transition:all .2s;
}
.gm-adchip:hover{
  border-color:var(--point);
  color:var(--point-dark);
  background:#fffdf5;
}

/* ========== 모바일 검색 레이어 ==========
   배경 스크롤 잠금·sticky GNB 무력화는 gm.css 의 .gm-modal-open 을 그대로 쓴다.
   (여기서 따로 만들면 두 벌이 되어 어긋난다) */
.gm-srch-modal{ position:fixed; inset:0; z-index:1200; }
.gm-srch-modal[hidden]{ display:none; }

.gm-srch-dim{
  position:absolute; inset:0;
  background:rgba(0,0,0,.45);
  animation:gmSrchFade .2s ease;
}
@keyframes gmSrchFade{ from{opacity:0} to{opacity:1} }

.gm-srch-sheet{
  position:absolute;
  left:0; right:0; bottom:0;
  max-height:82vh;
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:18px 18px 0 0;
  box-shadow:0 -6px 24px rgba(0,0,0,.18);
  animation:gmSrchUp .26s cubic-bezier(.22,.9,.3,1);
}
@keyframes gmSrchUp{ from{transform:translateY(100%)} to{transform:translateY(0)} }

/* ① 검색창 */
.gm-srch-top{
  display:flex;
  align-items:center;
  gap:8px;
  padding:18px 14px 12px;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.gm-srch-top::before{                    /* 시트 손잡이 */
  content:'';
  position:absolute;
  top:6px; left:50%;
  width:38px; height:4px;
  margin-left:-19px;
  border-radius:2px;
  background:#e0e0e0;
}
.gm-srch-form{ flex:1; max-width:none; height:44px; }
.gm-srch-close{
  width:38px; height:38px;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:0; background:none; color:#777; cursor:pointer;
}
.gm-srch-close svg{ width:20px; height:20px; }

.gm-srch-body{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:4px 16px 26px;
}
.gm-srch-sec{ margin-top:18px; }
.gm-srch-h{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
  font-weight:800;
  color:#333;
  margin-bottom:9px;
}
.gm-srch-clear{
  border:0; background:none;
  font-size:12px; color:#999;
  cursor:pointer; padding:2px 0;
}

/* ③ 최근 검색어 */
.gm-recent-list{ display:flex; flex-wrap:wrap; gap:6px; }
.gm-recent-item{
  display:inline-flex;
  align-items:center;
  height:30px;
  padding:0 4px 0 12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fafafa;
}
.gm-recent-item a{ font-size:13px; color:#444; }
.gm-recent-del{
  width:24px; height:24px;
  margin-left:2px;
  border:0; background:none;
  color:#aaa; font-size:16px; line-height:1;
  cursor:pointer;
}
.gm-recent-del:hover{ color:#666; }

/* ④ 인기 검색어 */
.gm-hot-list{ list-style:none; margin:0; padding:0; }
.gm-hot-list li{ border-bottom:1px solid #f2f2f2; }
.gm-hot-list li:last-child{ border-bottom:0; }
.gm-hot-list a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 2px;
  font-size:14px;
  color:#333;
}
.gm-hot-num{
  width:18px;
  flex-shrink:0;
  font-size:14px;
  font-weight:800;
  color:var(--point);
  text-align:center;
}
.gm-hot-list li:nth-child(-n+3) .gm-hot-num{ color:var(--point-dark); }

/* 검색광고 칩바는 좁은 화면에서 조금 더 크게 (손가락으로 누른다) */
@media (max-width:768px){
  .gm-adchip{ height:32px; padding:0 15px; font-size:13px; }
  .gm-srch-sheet{ max-height:88vh; }
}

@media (prefers-reduced-motion:reduce){
  .gm-srch-sheet, .gm-srch-dim{ animation:none !important; }
}