/* =====================================================================
   index_custom.css  —  알공딜(www.aldeal.kr) 라이트모드 헤더 override
   ---------------------------------------------------------------------
   출처: 2026-05-19 라이트 OS 헤더 톤 fix (6차 패치 누적, 당시 index.html
         본문 inline <style> 안에 있던 @media(prefers-color-scheme:light) 블록).
   분리: 2026-05-28 — 대표님의 본문 통째 deploy(0527 18:58)가 우리 fix를
         4번째로 덮어쓴 사고 방지를 위해 별도 파일로 추출.
         index.html <head>의 inline <style> 뒤에 <link>로 로드 → source order
         로 일반 클래스 규칙을 이김(!important 불필요).
   주의: 돋보기 버튼(.header-search-btn)은 inline style color(흰색)가 있어
         외부 CSS가 못 이기므로 그 selector에만 !important 사용.
   ===================================================================== */

@media (prefers-color-scheme: light) {

  /* --- 헤더 컨테이너 --- */
  .header        { background:#FFFFFF; border-bottom-color:rgba(0,0,0,.06) }
  .header-inner  { background:#FFFFFF }
  .tabs          { background:#FFFFFF }

  /* --- 브랜드(매장 선택) --- */
  .brand               { color:var(--text); background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.10) }
  .brand:hover,
  .brand:active        { background:rgba(0,0,0,.08); border-color:rgba(251,146,60,.5) }
  .brand-sub           { color:rgba(0,0,0,.6) }
  #brandName           { color:var(--text) }

  /* --- 우측 아이콘 버튼(장바구니/유저) --- */
  .header .cart-icon-btn,
  .header .user-btn              { color:rgba(0,0,0,.78) }
  .header .cart-icon-btn:hover,
  .header .user-btn:hover        { background:rgba(0,0,0,.05) }

  /* --- 돋보기/검색 버튼 ---
     라이브(0527 deploy)에서 버튼에 inline style "color:rgba(255,255,255,.92)"
     (흰색)이 추가됨 → 라이트 흰배경에서 아이콘이 안 보임.
     inline 속성은 외부 CSS보다 우선하므로 !important 필수. svg는
     stroke="currentColor" 라 부모 color만 바꾸면 됨. */
  .header .header-search-btn     { color:rgba(0,0,0,.78) !important }
  .header .header-search-btn:hover { background:rgba(0,0,0,.05) !important }

  /* --- 탭 --- */
  .tab          { color:rgba(0,0,0,.55) }
  .tab:hover    { color:rgba(0,0,0,.80) }
  .tab.active   { color:var(--text) }

  /* --- 검색바 --- */
  .searchbar    { background:#FFFFFF; border-bottom-color:rgba(0,0,0,.06) }

  /* --- 정렬바 --- */
  .sort-bar-wrap             { background:#FFFFFF; border-bottom-color:rgba(0,0,0,.05) }
  .sort-bar .sort-label      { color:rgba(0,0,0,.55) }
  .sort-bar .sort-chip       { color:rgba(0,0,0,.78); border-color:rgba(0,0,0,.18) }
  .sort-bar .sort-chip:hover { color:var(--text) }
}
