:root{
  --bg:#ffffff;
  --ink:#111;
  --muted:#666;
  --line:#777777;

  --side:min(2.2vw,10px);
  --gap-x: clamp(40px, 5vw, 160px);   /* 기본을 넓게 */
  --gap-y: clamp(18px, 2.0vw, 32px); 
  
  --tile-min: 220px;
  --tile-max: 320px;

  /* 패션 카드 비율 */
  --media-ratio: 7/9;
}

html,body{ background:var(--bg); color:var(--ink); }
body{ margin:0; }

/* 컨테이너: 3000px까진 vw로 커지고 그 이후엔 중앙 고정 */
.shop{
  width: min(96vw, 3000px);
  margin-inline: auto;
  padding: calc(var(--header-h,46px) + 18px) var(--side) 20px; /* 위 아래 여백 포인트 */
}

/* 필터 바: 가운데 정렬 + 과확장 방지 */
.shop__bar{
  position: sticky;
  top: calc(var(--header-h,56px));
  z-index: 10;

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  gap: 10px;

  width: fit-content;
  max-width: min(1100px, 92vw);
  margin-inline: auto;

  background: transparent;    /* ← var(--bg) 지우기 */
  box-shadow: none;
  backdrop-filter: none;
  padding-block: 10px;
}

/* 검색창: 언더라인 스타일 */
.shop__search{
  width: clamp(200px, 40vw, 500px);
  height: 36px;
  padding: 8px 3px 8px;      /* 아래 여백 조금 */
  border: 0;
  border-bottom: 1.2px solid var(--line);
  border-radius: 0;
  background: transparent;
  font-size: 13px;
  color: var(--ink, #111);
  outline: none;
  appearance: none;          /* 표준 먼저 */
  -webkit-appearance: none;  /* iOS/Safari 보강 */
}
.shop__search::placeholder{ color:#111; }

/* 자동완성 흰배경 제거(사파리/크롬) */
.shop__search:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  -webkit-text-fill-color: var(--ink, #111);
}

/* 아이콘 리셋 버튼: 완전 초기화 후 재설정 */
.shop__btn.icon{
  all: unset;                    /* ← 기존 padding/테두리/라인하이트 등 전부 제거 */
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;     /* 버튼 박스 */
  cursor: pointer;
  color: var(--ink, #111);       /* 아이콘 색 */
  vertical-align: middle;
}

/* SVG 아이콘 */
.shop__btn.icon .ico{ width: 18px; height: 18px; display: block; }
.shop__btn.icon .ico .stroke{
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;             /* 여기 숫자로 두께 조절 */
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 효과(선택) */
.shop__btn.icon:hover{ opacity:.9; }
.shop__btn.icon:active .ico{ transform: rotate(-22deg); transition: transform .12s; }

/* 드롭다운: 폭/디스플레이를 전역 리셋보다 강하게 덮어쓰기 */
.shop__bar .shop__select{
  width: auto;                  /* ← 가장 중요! 100% 리셋 무력화 */
  max-width: none;
  display: inline-flex;         /* 인라인으로 흐르게 */
  align-items: center;

  -webkit-appearance: none;
  appearance: none;
  height: 36px;
  line-height: 36px;
  padding: 0 28px 2px 4px;
  min-width: 120px;

  border: 0;
  border-bottom: 1.2px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  white-space: nowrap;

  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'><path fill='%23111' d='M7 10l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
}

/* 아이콘 리셋 버튼 전용 */
.shop__btn--reset{
  appearance:none;
  border:0;
  background:transparent;
  display:inline-grid;
  place-items:center;
  width:33px; height:33px;    /* 필터 셀렉트와 높이 맞춤 */
  padding:0;
  color:var(--ink,#111);
  cursor:pointer;
  vertical-align:middle;
}

/* 아이콘 자체 */
.shop__btn--reset .ico{ width:14px; height:20px; display:block; }
.shop__btn--reset .stroke{
  fill:none;
  stroke:currentColor;
  stroke-width:2;           /* 굵기 여기서 조정(1.2~2 추천) */
  stroke-linecap:round;
  stroke-linejoin:round;
}

.shop__btn--reset:hover{ opacity:.9; }
.shop__btn--reset:active .ico{ transform:rotate(-22deg); transition:transform .12s; }
/* 가로 스크롤은 그대로 + 스크롤바만 숨김 */

.shop__bar{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;   /* iOS 부드러운 스크롤 */
  scrollbar-width: none;               /* Firefox 숨김 */
  -ms-overflow-style: none;            /* 구형 IE/Edge */
}
.shop__bar::-webkit-scrollbar{         /* WebKit(사파리/크롬) 숨김 */
  width: 0;
  height: 0;
  background: transparent;
}

/* 셀렉트: 기본 포커스 링 없애기 */
.shop__bar .shop__select:focus{
  outline: none;
  box-shadow: none;                 /* 크롬/사파리 기본 파란빛 제거 */
  border-bottom-color: var(--line); /* 언더라인 버전이면 본색 유지 */
}

/* 키보드 포커스까지 완전 제거하려면 */
.shop__bar .shop__select:focus-visible{
  outline: none;
  box-shadow: none;
  border-bottom-color: var(--line);
}

/* 파폭 내부 포커스 여백 제거 */
.shop__bar .shop__select::-moz-focus-inner{ border: 0; }

/* 혹시 이전에 남아있는 강조 규칙 무력화 */
.shop__bar .shop__select:hover,
.shop__bar .shop__select:active{
  border-bottom-color: var(--line) !important;
  box-shadow: none !important;
}


/* 그리드 */
.shop__grid{
  display: grid;
  column-gap: var(--gap-x);
  row-gap: var(--gap-y);
  margin-top: 12px;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile-min), var(--tile-max)));
  justify-content: center;
  justify-items: stretch;
}


/* 남는 공간이 많으면 좌정렬로 토글 (.grid-left는 JS가 붙임) */
.shop__grid.grid-left{ justify-content: start; }

.card{
  width: clamp(var(--tile-min), 100%, var(--tile-max));
  background:transparent;
  border:0;
}
.card__media{
  display:block;
  position:relative;
  aspect-ratio: var(--media-ratio); /* 8/9 */
  background:#f2f2f2;
}
.card__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* 제목/가격 쪽 간격을 Artworks 느낌으로 가볍게 */
.card__body{ 
  padding: 0px 4px 20px ; }

.card__title{ 
  font-size:12px; 
  font-weight: 400; 
  color: var(--ink);
  line-height:1; 
  white-space:nowrap; 
  overflow:hidden; 
  letter-spacing: .01em;
  text-overflow:ellipsis; 
  margin-top: -3px;
}

.card__title a{
  color: inherit;
  text-decoration: none;
  font-weight: inherit;          /* 앵커가 굵기 바꾸지 않게 */
}

.card__price{ 
  margin:-12px 0 0; 
  font-size:11px; 
  color:#111; 
  font-weight: 300; 
}

.card__head{ 
  display:flex; 
  align-items:center; 
  gap:10px; 
  min-width:0; }

/* 타이틀은 공간을 먹고 → */
.card__title{ flex: 1 1 auto; min-width:0; }

/* …하트는 오른쪽으로 밀착 고정 */
.card__head .heart-button{
  margin-left: auto;                  /* 핵심: 오른쪽 끝으로 */
  flex: 0 0 var(--heart-btn, 40px);   /* 너비 고정 */
  translate: 9px var(--heart-y, 0);     /* Y만 미세 보정, X 이동 금지 */
}

/* 빈 상태 */
.shop__empty{ padding:40px 0; text-align:center; color:#777; }

/* 모바일: 가로 스크롤, 시작은 항상 왼쪽(=검색창) */
@media (max-width: 900px){
  .shop__bar{
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling:touch;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    padding: 8px;
    gap: 8px;
    font-size: 16px; 
    scroll-snap-type: x proximity;
    justify-content:flex-start;   /* ← 추가! 항상 왼쪽부터 */
  }
  .shop__bar > *{
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

@media (max-width: 430px){
  .shop__search,
  .shop__bar .shop__select{
    font-size: 16px;               /* 줌 방지용 실제 폰트 크기 */
    transform: scale(.92);         /* 보이는 크기만 살짝 줄이기 */
    transform-origin: left center;
  }
}