@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root {
  /* 미니멀·모던 톤 — 화이트 베이스, 여백 중심. 변수 이름은 기존 그대로 유지해서
     (다른 페이지들이 var(--mute) 등을 인라인으로도 참조하고 있음) 값만 손봤다. */
  --dark: #18171a;        /* 잉크(본문 강조/제목/토스트) */
  --terra: #b1502f;       /* 단일 포인트 컬러 (가격, 주요 CTA) */
  --terra-deep: #8a3a22;
  --sage: #6e8f78;
  --card: #f7f6f3;        /* 아주 옅은 뉴트럴 (placeholder, 패널 배경 없이 hairline만) */
  --mute: #8c887f;
  --text: #1c1a17;
  --white: #ffffff;
  --border: #ebe9e5;      /* hairline */
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  font-family: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.5;
}

a { color: inherit; }

/* ---------- 헤더 ---------- */
header.topbar {
  background: var(--white);
  color: var(--text);
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  row-gap: 10px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(6px);
}

/* 메인 페이지 — 헤더와 대카테고리 탭을 하나로 묶어서 스크롤해도 로고·검색창·카테고리가
   같이 계속 보이게 한다. 안쪽 header 자체의 sticky는 이 바깥 래퍼가 대신 맡으므로 꺼둔다. */
.sticky-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--white);
}
.sticky-nav header.topbar { position: static; border-bottom: none; }
.sticky-nav #categoryTabs { border-bottom: 1px solid var(--border); }
/* 중분류 탭도 sticky-nav 안에 들어와 대분류와 함께 고정된다 — 위 대분류 탭의 border-bottom이
   두 줄 사이 구분선 역할을 하고, 중분류 아래에도 선을 그어 고정 블록의 끝을 표시한다.
   (중분류가 없는 카테고리에서는 display:none이라 대분류 선이 그대로 블록의 끝이 됨) */
.sticky-nav #subcategoryTabs { border-bottom: 1px solid var(--border); padding-top: 4px; padding-bottom: 4px; }

/* 브랜드 로고: 한글(메인, 굵게) 위/영문(서브, 작게) 아래로 쌓은 2줄 구성, 가운데 정렬.
   .accent 클래스가 붙은 부분만 포인트 컬러(terra)를 준다. */
header.topbar .brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  line-height: 1.2;
}
header.topbar .brand .brand-kr {
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--dark);
}
header.topbar .brand .brand-kr .accent { color: var(--terra); }
header.topbar .brand .brand-en {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--mute);
  margin-top: 1px;
}

/* 메인 페이지에서만 쓰는 헤더 안 검색창 + 인기검색어 — 로고와 같은 줄에 둔다. 폭이 부족하면
   flex-wrap으로 다음 줄로 자연스럽게 떨어진다. */
.header-center {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 320px;
  min-width: 220px;
}
.header-center .search-row { flex: 1; min-width: 140px; margin-bottom: 0; }
.header-center .popular-search-bar { flex-shrink: 0; margin-bottom: 0; }

header.topbar nav { display: flex; align-items: center; flex-shrink: 0; }

header.topbar nav a {
  color: var(--mute);
  text-decoration: none;
  font-size: 13px;
  margin-left: 22px;
  transition: color .15s ease;
}
header.topbar nav a:hover { color: var(--dark); }

/* ---------- 레이아웃 ---------- */
main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* 넓은 화면에서는 본문 좌우로 광고 레일을 둘 수 있는 3단 구성.
   main 자체는 그대로 두고(다른 페이지 영향 없음), .page-shell로 감싼 페이지에서만 적용된다. */
.page-shell {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  max-width: 1520px;
  margin: 0 auto;
}
/* flex 컨테이너 안에서는 flex-grow가 없으면 block처럼 자동으로 폭을 채우지 않고
   내용물 크기(shrink-to-fit)로 줄어든다 — 그래서 카드가 4개가 아니라 3개씩만 뜨는 문제가 있었음.
   flex: 1 1 auto로 다시 1120px까지 채우도록(넓을 땐 성장, 레일 광고가 뜨면 축소) 고정. */
.page-shell > main { margin: 0; flex: 1 1 auto; min-width: 0; }
.rail-ad {
  position: sticky;
  top: 92px;
  flex: 0 0 160px;
  align-self: flex-start;
  margin-top: 40px;
}
@media (max-width: 1400px) {
  /* .ad-slot의 display:flex(파일 뒤쪽에서 선언됨)와 클래스 특정도가 같아서 소스 순서상 밀리므로,
     반응형 숨김은 !important로 확실히 이긴다. */
  .rail-ad { display: none !important; }
}

.hero {
  margin-bottom: 40px;
  padding: 28px 0 8px;
}

.hero h1 {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  line-height: 1.2;
}

.hero p {
  color: var(--mute);
  margin: 0;
  font-size: 15.5px;
}

/* ---------- 메인 페이지 대형 비주얼 히어로 (오늘의집/스마트스토어 참고 — 큰 이미지 중심 배너) ----------
   실제 촬영 사진 대신, 브랜드 컬러(테라코타/세이지)를 쓴 인테리어 일러스트 SVG를 배경으로 넣어
   외부 이미지 의존 없이도 화면을 크게 채운다. 좌측 큰 카드는 헤드카피, 우측 작은 카드는 실제로
   클릭하면 해당 카테고리로 필터링되는 기능성 배너다. */
.hero-visual {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 16px;
  margin: 22px 0 44px;
}
.hero-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 420px;
  border-radius: 20px;
  overflow: hidden;
  background: #f6ece0;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.hero-card .hero-illustration {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* 히어로 사이드카드에 실제 업체 제품 사진을 보여줄 때 쓰는 레이어 — 업체마다 원본 이미지 크기가
   제각각이라(세로/가로/정사각 다 섞여 있음), object-fit:cover로 잘라서 항상 박스를 꽉 채운다.
   업체가 별도로 배너용 규격 이미지를 만들어 줄 필요가 없게 하려는 의도. */
.hero-side-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 히어로 배너에 유튜브 영상을 등록했을 때 배경으로 꽉 채워 보여주는 트릭 — iframe 자체는
   16:9로 고정되므로, 컨테이너 비율과 안 맞아도 잘리지 않게 넉넉히 키운 뒤 중앙 정렬한다.
   장식용 배경이라 pointer-events:none으로 클릭/조작이 카드 자체(링크)로만 가게 한다. */
.hero-video-wrap { overflow: hidden; }
.hero-video-wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  border: 0;
  transform: translate(-50%, -50%) scale(1.6);
  pointer-events: none;
}
.hero-card-overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 30px 32px 28px;
  background: linear-gradient(180deg, rgba(24,23,26,0) 0%, rgba(24,23,26,0.5) 62%, rgba(24,23,26,0.78) 100%);
  color: var(--white);
}
.hero-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.16);
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.hero-card-overlay h1 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 10px;
  color: var(--white);
}
.hero-card-overlay p {
  margin: 0;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  max-width: 420px;
}
.hero-card-side .hero-card-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.32) 65%, rgba(0,0,0,0.5) 100%);
}
.hero-side-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.88;
  margin-bottom: 8px;
}
.hero-side-title {
  font-size: 23px;
  font-weight: 800;
  margin-bottom: 6px;
}
.hero-side-cta {
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
}
/* 오늘의집 광고 캐러셀의 "1/17" 같은 페이지 카운터 — 여러 장을 몇 초마다 자동으로 넘기는
   히어로 사이드 카드가 지금 몇 번째/전체 몇 장인지 알려준다. */
.hero-side-counter {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 1;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--white);
  background: rgba(0,0,0,0.38);
  padding: 4px 9px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
/* 자동 회전을 기다리지 않고 바로 좌우로 넘길 수 있는 화살표 버튼. */
.hero-side-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: rgba(0,0,0,0.32);
  color: var(--white);
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}
.hero-side-arrow:hover { background: rgba(0,0,0,0.55); }
.hero-side-arrow-prev { left: 12px; }
.hero-side-arrow-next { right: 12px; }
@media (max-width: 780px) {
  .hero-visual { grid-template-columns: 1fr; }
  .hero-card { min-height: 300px; }
}

/* ---------- 카테고리 탭 (밑줄형, 미니멀) ---------- */
.toolbar {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}

.chip {
  border: none;
  background: transparent;
  padding: 10px 14px;
  border-radius: 0;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  color: var(--mute);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s ease, border-color .15s ease;
}
.chip:hover { color: var(--text); }

.chip.active {
  background: transparent;
  border-color: var(--dark);
  color: var(--dark);
  font-weight: 700;
}

.chip.sub {
  font-size: 12.5px;
  padding: 7px 12px;
  color: var(--mute);
  border-bottom-width: 1px;
}
.chip.sub.active {
  background: transparent;
  border-color: var(--terra);
  color: var(--terra-deep);
  font-weight: 600;
}
#subcategoryTabs { margin-top: 2px; border-bottom: 1px solid var(--border); margin-bottom: 28px; }

/* 대카테고리 탭 — 가로 스크롤은 쓰기 불편해서 안 쓰고, 폰트·패딩을 줄여서 마지막 두 개
   '부분시공'·'인테리어 업체'만 둘째 줄로 자연스럽게 떨어지는 2줄 레이아웃으로 유지한다. */
#categoryTabs { flex-wrap: wrap; gap: 2px; row-gap: 4px; }
#categoryTabs .chip {
  font-size: 12px;
  /* 패브릭+데코·식물을 '데코·패브릭'으로 합친 뒤에도 첫 줄 전체 폭이 컨테이너와 1px 차이로
     아슬아슬해서(1071/1072px) 렌더링 반올림에 따라 줄바꿈되는 경우가 있었음 — 좌우 여백을
     1px씩 줄여 확실하게 한 줄에 들어가도록 여유를 확보. */
  padding: 7px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
/* 보이지 않는 "줄바꿈 강제" 스페이서 — flex-basis:100%인 빈 아이템을 두면 그 뒤로 오는
   요소들(부분시공, 인테리어 업체)만 폭에 상관없이 무조건 다음 줄로 떨어진다. */
.tab-break { flex-basis: 100%; width: 0; height: 0; margin: 0; padding: 0; }

/* ---------- 랭킹 탭 (무신사 '랭킹'처럼 대카테고리 탭 바로 옆에 붙는 강조 탭) ---------- */
.chip.rank-chip {
  color: var(--terra-deep);
  font-weight: 700;
  order: -1;
}
.chip.rank-chip.active {
  border-color: var(--terra);
  color: var(--terra-deep);
}
.rank-chip-divider {
  align-self: center;
  width: 1px;
  height: 16px;
  background: var(--border);
  margin: 0 4px 0 2px;
  order: -1;
}
.ranking-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -6px 0 20px;
  font-size: 12.5px;
  color: var(--mute);
}
.ranking-caption strong { color: var(--terra-deep); font-weight: 700; }
.ranking-caption a { color: var(--mute); text-decoration: underline; }

/* 랭킹 카드용 순위 배지 — 1~3위는 강조 색으로 구분 */
.rank-num {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 6px;
  background: rgba(24,23,26,0.82);
  color: var(--white);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: italic;
}
.rank-num.top3 { background: var(--terra-deep); }
.card-quote-count { font-size: 11.5px; color: var(--terra-deep); font-weight: 600; margin-top: -2px; margin-bottom: 6px; }

/* 랭킹 카드 썸네일 위 작은 카테고리 태그 — 누르면 그 카테고리로 좁힌 랭킹으로 드릴다운 */
.rank-cat-tag {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 2;
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: var(--text);
  border: 1px solid var(--border);
  backdrop-filter: blur(2px);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.rank-cat-tag:hover { background: var(--terra-deep); color: var(--white); border-color: var(--terra-deep); }

/* 랭킹 화면 — 히어로와 광고 배너 사이, 지금 파는 대분류 전체를 한 번에 골라 들어갈 수 있는 행 */
.ranking-category-row {
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 22px 0;
  padding: 16px 18px;
  background: var(--card);
  border-radius: 12px;
}
.ranking-category-row-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--mute);
  margin-right: 6px;
  flex-shrink: 0;
}
.ranking-category-pill {
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  font-family: inherit;
}
.ranking-category-pill:hover { border-color: var(--terra-deep); }
.ranking-category-pill.active {
  background: var(--terra-deep);
  color: var(--white);
  border-color: var(--terra-deep);
}

/* ---------- 폼 요소 ---------- */
input[type="text"], input[type="tel"], input[type="number"], select, textarea {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 13px;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  background: var(--white);
  color: var(--text);
  transition: border-color .15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--dark);
}

/* ---------- 인기 검색어 (오늘의집 벤치마킹) ---------- */
/* 문의(견적요청)가 많은 제품명을 몇 초마다 순위대로 자동으로 돌려 보여준다 — 눌러보면 그
   검색어로 바로 검색되고, 화살표를 누르면 전체 순위를 펼쳐볼 수 있다. */
.popular-search-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--card);
  border-radius: 10px;
  width: fit-content;
  max-width: 100%;
}
.popular-search-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--terra-deep);
  flex-shrink: 0;
}
.popular-search-current {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.popular-search-current:hover { text-decoration: underline; }
.popular-search-toggle {
  border: none;
  background: transparent;
  color: var(--mute);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
  flex-shrink: 0;
}
.popular-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 5;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(24,23,26,0.1);
  min-width: 240px;
  padding: 6px 0;
}
.popular-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 13.5px;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.popular-search-item:hover { background: var(--card); }
.popular-search-item .rank {
  font-weight: 800;
  color: var(--terra-deep);
  width: 16px;
  flex-shrink: 0;
}

.search-row {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
}
.search-row input { flex: 1; }
.search-row button, .btn {
  background: var(--dark);
  color: var(--white);
  border: none;
  padding: 11px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s ease;
  letter-spacing: -0.01em;
}
.search-row button:hover, .btn:hover { opacity: 0.82; }
.btn.secondary {
  background: var(--white);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn.secondary:hover { opacity: 1; border-color: var(--dark); }

/* ---------- 지역 필터 / 정렬 / 가까운 지역 찾기 ---------- */
.filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.filter-row select {
  width: auto;
  min-width: 128px;
  padding: 9px 12px;
  font-size: 13px;
}
.filter-row .btn.secondary {
  padding: 9px 16px;
  font-size: 13px;
  white-space: nowrap;
}
.nearby-status {
  font-size: 12.5px;
  color: var(--sage);
  font-weight: 600;
}
.nearby-status a { color: var(--terra-deep); text-decoration: underline; margin-left: 4px; }

/* ---------- 지역 선택 커스텀 드롭다운 ----------
   네이티브 <select><optgroup>은 브라우저가 그려서 여백·글자 크기를 못 건드리고, 특히 모바일
   피커에서는 그룹 제목이 잘 안 보인다. 그래서 인기검색어 드롭다운과 같은 패턴(버튼 + 카드형
   패널)으로 직접 그려서, 광역시/도 제목은 굵게, 도시는 칩 버튼으로 훑어보기 쉽게 만든다. */
.region-picker { position: relative; }
.region-picker-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 128px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  background: var(--white);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s ease;
}
.region-picker-btn:hover { border-color: var(--dark); }
.region-picker-caret { color: var(--mute); font-size: 11px; }
.region-picker-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 10;
  width: 300px;
  max-width: calc(100vw - 32px);
  max-height: 360px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(24,23,26,0.12);
  padding: 10px;
}
.region-picker-panel > .region-picker-item {
  width: 100%;
  text-align: left;
  margin-bottom: 6px;
  font-weight: 700;
}
.region-picker-group + .region-picker-group { margin-top: 10px; }
.region-picker-group-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--mute);
  letter-spacing: 0.02em;
  padding: 6px 4px 4px;
}
.region-picker-group-items { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px; }
.region-picker-item {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--text);
  font-size: 12.5px;
  font-family: inherit;
  padding: 7px 12px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.region-picker-item:hover { border-color: var(--dark); }
.region-picker-item.active {
  background: var(--terra-deep);
  border-color: var(--terra-deep);
  color: var(--white);
}

/* ---------- 상품 그리드 ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 28px 20px;
}

.card {
  border: none;
  border-radius: 4px;
  overflow: hidden;
  background: var(--white);
  text-decoration: none;
  color: inherit;
  display: block;
}
.card .swatch { transition: transform .35s ease; }
.card:hover .swatch.has-image img { transform: scale(1.035); }

.swatch {
  height: 240px;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 700;
  color: var(--mute);
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}

.trust-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: var(--text);
  border: 1px solid var(--border);
  backdrop-filter: blur(2px);
}
.trust-badge.new {
  background: var(--sage);
  color: var(--white);
  border-color: var(--sage);
}
.trust-badge + .trust-badge { margin-left: 4px; }

.badge-stack {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  z-index: 1;
}
.badge-stack .trust-badge + .trust-badge { margin-left: 0; }

/* ---------- 관심상품(하트) ---------- */
/* 카드 이미지 위 오버레이형 — 신뢰 배지(좌상단)와 겹치지 않도록 우상단에 둔다. */
.fav-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.92);
  color: var(--mute);
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: color .15s ease, border-color .15s ease, transform .1s ease;
}
.fav-btn:hover { border-color: var(--terra); color: var(--terra); transform: scale(1.06); }
.fav-btn.active { color: var(--terra); border-color: var(--terra); }

/* 상세페이지 견적요청 패널 제목 옆 — 텍스트 라벨이 붙는 인라인형 */
.fav-btn-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: 999px;
  padding: 6px 14px 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mute);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.fav-btn-inline:hover { border-color: var(--terra); }
.fav-btn-inline.active { border-color: var(--terra); color: var(--terra-deep); }

/* ---------- 제품 링크 공유 ---------- */
/* 카드 이미지 위 오버레이형 — 하트(.fav-btn) 바로 아래 같은 우측 열에 쌓는다. */
.share-btn {
  position: absolute;
  top: 48px;
  right: 10px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.92);
  color: var(--mute);
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.share-btn:hover { border-color: var(--terra); color: var(--terra); transform: scale(1.06); }

/* 상세페이지 관심상품 버튼 옆 — 텍스트 라벨이 붙는 인라인형 */
.share-btn-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: 999px;
  padding: 6px 14px 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mute);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
  margin-left: 8px;
}
.share-btn-inline:hover { border-color: var(--terra); color: var(--terra-deep); }

.status-select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 12px;
  font-family: inherit;
}
.status-select.done { color: var(--sage); font-weight: 700; }
.status-select.new { color: var(--mute); }
.status-select.rejected { color: #a35; }

.card-body { padding: 14px 2px 0; }
.card-cat { font-size: 11px; color: var(--mute); margin-bottom: 6px; letter-spacing: 0.01em; }
.card-name { font-size: 14.5px; font-weight: 600; margin-bottom: 6px; line-height: 1.4; }
.card-vendor { font-size: 12px; color: var(--mute); margin-bottom: 8px; }
.card-price { font-size: 16px; font-weight: 800; color: var(--terra-deep); }
.card-price .unit { font-size: 12px; color: var(--mute); font-weight: 400; margin-left: 4px; }
/* 낱개 크기·박스 단위 수량 — 둘 다 선택 입력이라 값이 있을 때만 카드에 작게 노출된다 */
.card-spec { font-size: 11px; color: var(--mute); margin-top: 4px; }

.empty { color: var(--mute); padding: 60px 0; text-align: center; font-size: 14px; }
.load-more-row { display: flex; justify-content: center; margin: 8px 0 12px; }
.load-more-row .btn.secondary { padding: 12px 32px; }

/* 최상단(대표 이미지+상품정보) — 네이버·오늘의집 둘 다 실제로 다시 확인해보니, 스크롤한다고
   이 영역 자체의 폭 비율이 바뀌는 게 아니었다. 5:5 그대로 유지하고, 아래 상세페이지 구간에는
   "같은 기능을 하는 작은 위젯"이 별도로 하나 더 있는 구조였음 (.detail-wrap-secondary 참고). */
.detail-wrap {
  display: grid;
  /* 네이버·오늘의집 스크린샷 다시 비교해보니 반반(1fr 1fr, 512px 정사각형)보다 이미지 쪽이 눈에
     띄게 더 크게 보임 — 이미지가 정보 칸보다 넓은 3:2 비율로 조정(칸 폭 기준 약 512px→614px). */
  grid-template-columns: 3fr 2fr;
  gap: 48px;
  /* 그리드 아이템은 기본으로 같은 행 안의 더 큰 쪽 높이만큼 늘어난다(align-items:stretch 기본값).
     오른쪽 정보+견적폼 칸이 왼쪽 이미지 칸보다 훨씬 길다 보니, 왼쪽 이미지 칸도 억지로 그 높이만큼
     늘어나서 이미지 아래에 불필요한 빈 공간이 크게 생겼었다(실제로 확인: 이미지 512px인데 칸
     자체는 717px로 늘어나 약 200px 공백). align-items:start로 각 칸이 자기 내용 높이만큼만
     차지하게 함. */
  align-items: start;
}
.detail-wrap > div {
  min-width: 0;
}
.detail-info-col {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 상세페이지(후기·상세이미지·비슷한 상품·Q&A) 구간 — 왼쪽 콘텐츠가 넓고(7fr) 오른쪽은 작은
   견적요청 미니 위젯(3fr)이 이 구간 안에서만 sticky로 따라온다. 최상단의 큰 견적 패널과는
   별개의 독립된 위젯 — 버튼을 누르면 위쪽 진짜 폼으로 스크롤 이동한다(scrollToQuoteForm). */
.detail-wrap-secondary {
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 48px;
}
.detail-wrap-secondary > div {
  min-width: 0;
}
.detail-mini-cta {
  position: sticky;
  top: 92px;
  align-self: start;
  margin-top: 20px;
  word-break: keep-all;
  overflow-wrap: break-word;
}
@media (max-width: 720px) {
  .detail-wrap { grid-template-columns: 1fr; }
  .detail-wrap-secondary { grid-template-columns: 1fr; }
  /* 처음엔 위쪽 큰 폼과 기능이 겹친다고 보고 모바일에서 미니 위젯을 숨겼었는데, 미니 위젯이
     스크롤 이동 없이 그 자리에서 바로 수량 입력+제출까지 되는 독립 폼(quoteForm2)을 갖게 되면서
     오히려 후기·상세페이지·Q&A까지 다 읽은 다음 다시 맨 위로 스크롤할 필요 없이 바로 요청할 수
     있는 유용한 기능이 됐다 — 이제 숨기지 않는다. 1단 레이아웃에서는 sticky도 굳이 필요 없으니
     (자기 행 높이만큼만 있어서 붙어있을 공간이 없음) static으로 명시.*/
  .detail-mini-cta { position: static; }
}

/* 대표 이미지 — 원래 height:320px 고정이라, 데스크톱에서 칸 폭(500px대)에 비해 납작하고
   작아 보였음(네이버 스마트스토어·오늘의집 둘 다 실제로 열어보니 대표 이미지가 칸 폭만큼
   큼직한 정사각형에 가깝게 꽉 채워 보여줌). aspect-ratio:1/1로 바꿔서 칸 폭에 맞춰 정사각형
   높이가 같이 늘어나게 함 — 데스크톱 2단 레이아웃(칸 폭 ~500px대)에서도, 모바일 1단
   레이아웃(칸 폭 = 화면 폭)에서도 항상 큼직하게 보임. */
.detail-swatch {
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  font-weight: 700;
  color: var(--mute);
}

.badge {
  display: inline-block;
  background: var(--card);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 12px;
  letter-spacing: 0.01em;
}

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; }
.field .hint { font-size: 12px; color: var(--mute); margin-top: 5px; line-height: 1.5; }

/* 회원가입 약관/개인정보/마케팅 동의 블록 */
.consent-block { margin: 18px 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: #faf8f4; }
.consent-all { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.consent-all input { width: 16px; height: 16px; }
.consent-block hr { border: none; border-top: 1px solid var(--border); margin: 10px 0; }
.consent-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.consent-row label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.consent-row input { width: 15px; height: 15px; flex-shrink: 0; }
.consent-row .req { color: var(--terra-deep, #b5502f); font-weight: 700; }
.consent-toggle { font-size: 12px; color: var(--mute); text-decoration: underline; white-space: nowrap; flex-shrink: 0; }
.consent-text { display: none; font-size: 11.5px; color: var(--mute); line-height: 1.6; max-height: 130px; overflow-y: auto; background: var(--white); border: 1px solid var(--border); border-radius: 6px; padding: 10px; margin-bottom: 10px; white-space: pre-line; }

.panel {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  background: var(--white);
}

/* vendor.html 제품 등록 폼이 '수정 모드'일 때 — 새 상품 등록으로 착각해 기존 상품을
   실수로 덮어쓰는 걸 막기 위해, 패널 전체를 눈에 띄게 다른 색으로 감싼다. */
.panel.editing-mode {
  border: 2px solid #b1502f;
  box-shadow: 0 0 0 3px rgba(177, 80, 47, 0.12);
}

.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--border); }
.table th { color: var(--mute); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; }
.table tbody tr:hover { background: var(--card); }

.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--dark);
  color: var(--white);
  padding: 13px 22px;
  border-radius: 10px;
  font-size: 13px;
  display: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.toast.show { display: block; }

/* ---- 견적요청 메시지 스레드(구매자<->업체 인앱 메시징) 모달 ---- */
.qt-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(28, 26, 23, 0.45);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.qt-overlay.show { display: flex; }
.qt-panel {
  background: var(--white);
  width: 100%;
  max-width: 440px;
  max-height: 72vh;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  overflow: hidden;
}
.qt-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.qt-title { font-size: 15px; font-weight: 700; }
.qt-sub { font-size: 12px; color: var(--mute); margin-top: 2px; }
.qt-close {
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--mute);
  cursor: pointer;
  padding: 2px 4px;
}
.qt-close:hover { color: var(--text); }
.qt-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.qt-empty { color: var(--mute); font-size: 13px; text-align: center; padding: 30px 0; }
.qt-msg { display: flex; flex-direction: column; align-items: flex-start; }
.qt-msg.mine { align-items: flex-end; }
.qt-msg-meta { font-size: 11px; color: var(--mute); margin-bottom: 3px; }
.qt-msg-bubble {
  max-width: 80%;
  background: var(--card);
  color: var(--text);
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.qt-msg.mine .qt-msg-bubble { background: var(--terra); color: var(--white); }
.qt-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
}
.qt-form textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13.5px;
  font-family: inherit;
}
.qt-form .btn { padding: 10px 16px; font-size: 13px; }

/* 목록 테이블/카드에서 메시지 버튼 옆에 붙는 미읽음 뱃지 */
.qt-unread-badge {
  display: inline-block;
  min-width: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--terra);
  color: var(--white);
  font-size: 10.5px;
  line-height: 16px;
  text-align: center;
  margin-left: 4px;
}

.back-link {
  display: inline-block;
  margin-bottom: 20px;
  color: var(--mute);
  text-decoration: none;
  font-size: 13px;
}
.back-link:hover { color: var(--text); }

.section-title { font-size: 17px; font-weight: 700; margin: 40px 0 16px; letter-spacing: -0.01em; }

/* ---- 관리자센터(vendor.html) 좌측 메뉴 + 섹션 전환 ---- */
.seller-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  align-items: start;
}
.seller-sidebar {
  position: sticky;
  top: 92px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  background: var(--white);
  flex-shrink: 0;
}
.seller-nav-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 13px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  line-height: 1.35;
}
.seller-nav-item:hover { background: var(--card); }
.seller-nav-item.active { background: var(--terra-deep, #8a3a22); color: var(--white); }
.seller-content { min-width: 0; }
.seller-section:first-child > .section-title,
.seller-section:first-child > .panel { margin-top: 0; }

@media (max-width: 720px) {
  .seller-layout { display: block; }
  .seller-sidebar {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
    margin-bottom: 20px;
    -webkit-overflow-scrolling: touch;
  }
  .seller-nav-item { white-space: nowrap; flex-shrink: 0; }
}

/* ---- 이미지 업로드 / 노출 ---- */
.swatch.has-image, .detail-swatch.has-image {
  padding: 0;
  overflow: hidden;
}
.swatch.has-image img, .detail-swatch.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.gallery-thumb {
  width: 108px;
  height: 108px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color .15s ease;
}
.gallery-thumb:hover { border-color: var(--dark); }
.gallery-thumb.active { border-color: var(--terra-deep); border-width: 2px; }

/* 상품 상세 대표 이미지 캐러셀 좌우 화살표 — PC(마우스 환경)에서만 보이고, 터치 위주인
   모바일에서는 숨겨서 스와이프 동작과 겹치지 않게 한다(아래 미디어쿼리에서 숨김). */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(28, 26, 23, 0.55);
  color: var(--white);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.carousel-arrow:hover { background: rgba(28, 26, 23, 0.8); }
.carousel-arrow-prev { left: 10px; }
.carousel-arrow-next { right: 10px; }
@media (max-width: 720px) {
  .carousel-arrow { display: none; }
}

/* 제품 소개 유튜브 임베드 — 링크만 저장하고 파일은 올리지 않으므로, 16:9 비율을 유지하는
   반응형 박스(padding-bottom 트릭) 안에 iframe을 꽉 채운다. */
.youtube-embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  margin-top: 12px;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
}
.youtube-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 상세페이지(제품 설명용 긴 이미지) — 네이버 스마트스토어 방식으로 위에서 아래로 쭉 이어붙여 보여준다.
   갤러리(.gallery)와 별개이며, 상품 상세의 2단 레이아웃(.detail-wrap) 아래에 전체 너비로 노출한다. */
.detail-page-images {
  margin-top: 48px;
}
.detail-page-images img {
  width: 100%;
  display: block;
}
.detail-page-images img + img { margin-top: 0; }

.image-preview-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.preview-thumb {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
}

/* 제품 이미지 미리보기 — 마우스로 끌어서 순서를 바꿀 수 있는 카드.
   맨 처음 올라가는 순서가 대표이미지(product images) 또는 상세페이지 노출 순서가 된다. */
.draggable-thumb {
  position: relative;
  width: 84px;
  cursor: grab;
  user-select: none;
}
.draggable-thumb img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  display: block;
  pointer-events: none;
}
.draggable-thumb-caption {
  margin-top: 4px;
  font-size: 11px;
  color: var(--mute);
  text-align: center;
  line-height: 1.3;
  pointer-events: none;
}
.draggable-thumb.dragging { opacity: 0.4; }
.draggable-thumb.drag-over img { border-color: var(--terra-deep, #8a3a22); box-shadow: 0 0 0 2px var(--terra-deep, #8a3a22); }
.draggable-thumb-order {
  position: absolute;
  top: 3px;
  left: 3px;
  background: rgba(24, 23, 26, 0.72);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 4px;
  pointer-events: none;
}
.draggable-thumb-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: #18171a;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumb {
  width: 68px;
  height: 68px;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}

/* 견적요청 목록처럼 텍스트 옆에 작게 곁들이는 용도 — .thumb 크기를 줄인 변형 */
.thumb-sm {
  width: 34px;
  height: 34px;
  border-radius: 5px;
  flex-shrink: 0;
}
.thumb-sm.thumb-placeholder {
  font-size: 13px;
}

.find-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--white);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 40px;
  text-decoration: none;
  transition: border-color .15s ease;
}
.find-banner:hover { border-color: var(--dark); }
.find-banner-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.find-banner-sub { font-size: 12.5px; color: var(--mute); }
.find-banner-arrow {
  flex-shrink: 0;
  background: var(--dark);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  white-space: nowrap;
}

.thumb-placeholder {
  background: var(--card);
  color: var(--mute);
  font-weight: 700;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trust-line {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 14px;
}
.trust-line strong { color: var(--terra-deep); }
.trust-line .new-tag {
  color: var(--sage);
  font-weight: 600;
  font-size: 12.5px;
}

/* ---------- 광고 배너 자리 (placeholder) ---------- */
/* 실제 광고 연동 전까지는 점선 박스로 자리만 잡아둔다. 실제 소재를 넣을 때는
   renderAdSlot() 안의 innerHTML만 광고 스크립트/이미지로 바꾸면 된다. */
.ad-slot {
  border: 1px dashed var(--border);
  background: var(--card);
  color: var(--mute);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  border-radius: 8px;
  font-size: 11.5px;
  text-align: center;
  margin: 32px 0;
}
.ad-slot .ad-slot-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--mute);
  opacity: 0.65;
}
.ad-slot.leaderboard { height: 96px; }
.ad-slot.rectangle { height: 250px; max-width: 300px; }
.ad-slot.skyscraper { height: 600px; padding: 0 10px; }
@media (max-width: 640px) {
  .ad-slot.leaderboard { height: 76px; }
}

/* ---------- 사이트 푸터 ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 72px;
  padding: 40px 24px 56px;
}
.site-footer .footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.site-footer .footer-brand {
  font-weight: 800;
  font-size: 15px;
  color: var(--dark);
  margin-bottom: 6px;
}
.site-footer .footer-brand span { color: var(--terra); }
.site-footer .footer-desc {
  font-size: 12.5px;
  color: var(--mute);
  max-width: 360px;
  line-height: 1.6;
}
.site-footer .footer-links {
  display: flex;
  flex-wrap: wrap; /* 모바일에서 좁아지면 줄바꿈 — 글자가 세로로 꺾이는 것 방지 */
  gap: 10px 20px;
  font-size: 12.5px;
  color: var(--mute);
}
.site-footer .footer-links a { text-decoration: none; color: var(--mute); white-space: nowrap; }
.site-footer .footer-links a:hover { color: var(--text); }
.site-footer .footer-biz {
  font-size: 11.5px;
  color: var(--mute);
  margin-top: 22px;
  line-height: 1.8;
}
.site-footer .footer-biz a { color: var(--mute); text-decoration: none; }
.site-footer .footer-biz a:hover { color: var(--text); }
.site-footer .footer-copy {
  font-size: 11.5px;
  color: var(--mute);
  margin-top: 10px;
  opacity: 0.75;
}

/* ---------- 모바일 전체 화면 검색 (오늘의집 벤치마킹) ---------- */
/* 헤더의 돋보기 버튼 — 데스크톱에서는 숨기고 모바일에서만 보인다(아래 미디어쿼리) */
.mobile-search-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  color: var(--text);
  align-items: center;
}
.search-overlay {
  position: fixed;
  inset: 0;
  background: var(--white);
  z-index: 200;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.search-overlay-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--white);
}
.search-overlay-head #soBack {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  padding: 2px 6px;
  color: var(--text);
}
.search-overlay-head #soInput { flex: 1; min-width: 0; }
.search-overlay-body { padding: 18px 16px 40px; max-width: 640px; margin: 0 auto; }
.so-section { margin-bottom: 26px; }
.so-title { font-size: 15px; font-weight: 700; }
.so-title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.so-title-actions { font-size: 12px; }
.so-title-actions a { color: var(--mute); text-decoration: none; }
.so-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.so-chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
}
.so-chip:active, .so-chip:hover { border-color: var(--terra-deep); color: var(--terra-deep); }
.so-popular-item {
  padding: 9px 2px;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.so-popular-item:last-child { border-bottom: none; }
.so-popular-rank {
  display: inline-block;
  width: 24px;
  font-weight: 800;
  color: var(--terra-deep);
}

/* ---------- 카테고리 전용 배너 + 중분류 아이콘 그리드 (오늘의집 벤치마킹) ---------- */
/* 특정 카테고리에 들어가면 공용 히어로 대신 표시되는 영역 — index.html renderCategoryHero() 참고 */
#categoryHero { margin: 16px 0 24px; }
.cat-hero-banner {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 18px;
}
.cat-hero-banner img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  display: block;
}
.cat-hero-counter {
  position: absolute;
  right: 12px;
  bottom: 12px;
  background: rgba(28, 26, 23, 0.55);
  color: #fff;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
}
.cat-subicon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 16px 8px;
}
.cat-subicon { text-align: center; cursor: pointer; }
.cat-subicon-img {
  width: 64px;
  height: 64px;
  margin: 0 auto 6px;
  border-radius: 18px;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 20px;
  font-weight: 700;
  color: var(--mute);
  border: 2px solid transparent;
  transition: border-color .15s ease;
}
.cat-subicon-img img { width: 100%; height: 100%; object-fit: cover; }
.cat-subicon:hover .cat-subicon-img { border-color: var(--sage); }
.cat-subicon.active .cat-subicon-img { border-color: var(--terra-deep); }
.cat-subicon-label { font-size: 12px; color: var(--text); word-break: keep-all; line-height: 1.3; }
.cat-subicon.active .cat-subicon-label { font-weight: 700; color: var(--terra-deep); }

/* ---------- 모바일 ---------- */
/* 이 파일 맨 끝에 둔다: 위쪽 .grid/.hero-visual/.header-center 같은 무조건 적용 규칙들과
   선택자 우선순위(specificity)가 같으면 "나중에 나오는 규칙이 이긴다"는 CSS 캐스케이드 규칙상,
   미디어쿼리를 파일 앞쪽에 두면 뒤에 나오는 무조건 규칙한테 그대로 덮여버린다(실제로 이 문제로
   그리드 2열 설정이 씹혔었음). 그래서 모바일 오버라이드는 항상 파일 맨 끝에 모아둔다.

   좁은 화면에서는 헤더가 로고/검색/로그인이 뒤엉켜 줄바꿈 순서가 꼬이기 쉬워서,
   순서를 명시적으로 고정한다: 1줄 = 로고+로그인, 2줄 = 검색+인기검색어(항상 전체 폭).

   카테고리 고정(sticky)은 오늘의집 모바일 방식: 헤더(로고+검색)까지 통째로 붙잡아두면 화면
   절반을 잡아먹으므로, .sticky-nav에 헤더 높이만큼 음수 top을 줘서(값은 index.html JS가
   헤더 실제 높이를 재서 넣어줌 — 인기검색어 로딩 등으로 높이가 변해서 고정값 불가) 헤더는
   스크롤과 함께 위로 사라지고 대분류+중분류 탭 두 줄만 상단에 남아 따라오게 한다.
   탭들은 여러 줄로 감싸는 대신 옆으로 스와이프하는 한 줄 가로 스크롤로 바꾼다(줄바꿈되면
   고정 영역이 너무 두꺼워짐 — 오늘의집·무신사 모바일과 같은 패턴).

   상품 그리드는 오늘의집처럼 1개씩 세로로 쌓지 않고 2열로 보이게 한다. */
@media (max-width: 640px) {
  /* top(음수 오프셋)은 index.html의 updateMobileStickyOffset()이 채운다 */
  .sticky-nav { position: sticky; }
  /* 모바일에서는 중분류 선택을 본문의 중분류 아이콘 그리드(#categoryHero)가 담당하므로,
     고정 영역의 중분류 텍스트 탭 줄은 중복이라 아예 숨긴다 — 고정은 대분류 한 줄만.
     (renderSubTabs가 인라인 display:flex를 넣으므로 !important로 눌러야 함) */
  #subcategoryTabs { display: none !important; }
  #categoryTabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;       /* Firefox 스크롤바 숨김 */
  }
  #categoryTabs::-webkit-scrollbar { display: none; }
  #categoryTabs .chip { white-space: nowrap; flex-shrink: 0; }
  /* 데스크톱에서 부분시공/인테리어 업체를 둘째 줄로 내리던 강제 줄바꿈 스페이서 —
     모바일 한 줄 가로 스크롤에서는 전부 같은 줄에 이어 붙인다. */
  .tab-break { display: none; }
  header.topbar { padding: 12px 16px; gap: 8px; row-gap: 8px; justify-content: center; }
  header.topbar .brand { order: 1; font-size: 19px; }
  /* 모바일 메뉴 줄 — 링크 몇 개가 왼쪽에 뭉쳐 오른쪽이 비어 보이던 것을,
     nav를 전체 폭으로 늘리고 authNav 안의 링크들까지 꺼내(display:contents)
     양끝 정렬로 고르게 펼친다. 인라인 margin-left는 !important로 무력화. */
  header.topbar nav { order: 2; width: 100%; justify-content: space-between; }
  header.topbar nav #authNav { display: contents; }
  header.topbar nav a { margin-left: 0 !important; font-size: 12.5px; }
  /* 모바일에서는 헤더 검색창·인기검색어 위젯을 통째로 숨기고, 돋보기 아이콘 → 전체 화면
     검색(최근/인기 검색어 + 카테고리)으로 대체한다 — 헤더가 얇아져 고정 영역도 가벼워짐. */
  .header-center { display: none; }
  .mobile-search-btn { display: inline-flex; margin-right: 2px; }
  #categoryTabs, #subcategoryTabs { padding: 0 16px !important; }
  #categoryTabs { margin-top: 10px !important; }
  #categoryTabs .chip { font-size: 12.5px; padding: 7px 8px; }
  main { padding: 24px 16px 60px; }
  .hero-visual { margin: 16px 0 28px; gap: 10px; }
  .hero-card { min-height: 220px; }
  .hero-card-overlay { padding: 18px 18px 16px; }
  .hero-card-overlay h1 { font-size: 22px; }
  .hero-card-overlay p { font-size: 12.5px; max-width: none; }
  .hero-tag { font-size: 10px; padding: 4px 9px; margin-bottom: 8px; }
  .hero-side-label { font-size: 10.5px; }
  .hero-side-title { font-size: 18px; }
  .hero-side-counter { font-size: 10.5px; padding: 3px 8px; right: 10px; bottom: 10px; }
  .hero-side-arrow { width: 28px; height: 28px; font-size: 16px; }
  .hero-side-arrow-prev { left: 8px; }
  .hero-side-arrow-next { right: 8px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 20px 10px; }
  .swatch { height: 168px; font-size: 22px; }
  .card-body { padding: 10px 1px 0; }
  .card-cat { font-size: 10px; margin-bottom: 4px; }
  .card-name {
    font-size: 12.5px;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .card-vendor { font-size: 10.5px; margin-bottom: 5px; }
  .card-price { font-size: 13.5px; }
  .card-price .unit { font-size: 10.5px; }
  .card-spec { font-size: 9.5px; }
  .card-quote-count { font-size: 10px; }
  .trust-badge { font-size: 9px; padding: 3px 7px; }
  .badge-stack { top: 6px; left: 6px; gap: 3px; }
  .fav-btn { width: 26px; height: 26px; font-size: 13px; top: 6px; right: 6px; }
  .share-btn { width: 26px; height: 26px; font-size: 12px; top: 38px; right: 6px; }
  .rank-num { min-width: 22px; height: 22px; font-size: 11px; padding: 0 4px; top: 6px; left: 6px; }
  /* "찾는 제품이 카탈로그에 없나요?" 배너 — 좁은 화면에서 제목이 두 줄로 꺾이면서 버튼이
     아래로 밀려나고 그 옆에 빈 공간만 남는 문제. 부제는 굳이 없어도 되니 숨기고,
     제목 폰트를 줄여 버튼과 한 줄에 딱 붙게 만든다. */
  .find-banner { padding: 12px 14px; margin-bottom: 24px; gap: 10px; }
  .find-banner-sub { display: none; }
  .find-banner-title { font-size: 13px; margin-bottom: 0; }
  .find-banner-arrow { font-size: 11.5px; padding: 7px 12px; }
}

/* 브랜드 로고 이미지 (헤더/푸터) — 기존 텍스트 로고를 대체 */
.brand-logo { height: 44px; display: block; }
@media (max-width: 720px) { .brand-logo { height: 36px; } }
.footer-brand-logo { height: 30px; display: block; margin-bottom: 6px; opacity: 0.9; }