/* =========================================================
   Resale Theme — Chrono24 스타일 토큰 기반 (2026-09-25 추출)
   사용법: 기존 CSS보다 먼저 로드 → 컴포넌트 클래스 적용 또는 기존 클래스에 변수 매핑
   ========================================================= */

/* 폰트: 영문 Wix Madefor Text + 한글 Pretendard

   2026-09-26 클라이언트 지시로 **자체 서버에서 내준다.** 원래는 여기서
   fonts.googleapis.com 과 cdn.jsdelivr.net 을 @import 했다. 그 방식은
   ① 남의 CDN 이 느리거나 막히면 우리 글자가 안 나오고,
   ② @import 라 CSS 를 다 받은 뒤에야 폰트 요청이 시작되며,
   ③ 방문자의 IP 와 User-Agent 가 제3자에게 그대로 간다.

   Pretendard 는 전체판이 weight 당 750KB 라 **subset**(한글 2350자 + 라틴,
   264KB)을 쓴다. 중고 거래 화면에 쓰이는 글자는 이 범위를 벗어나지 않는다.
   Wix Madefor Text 는 가변 폰트라 라틴 두 조각이면 400~800 을 모두 덮는다.
   파일은 www/assets/fonts/, 라이선스는 같은 폴더의 OFL-*.txt 다. */

@font-face {
  font-family: 'Wix Madefor Text';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/WixMadeforText-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Wix Madefor Text';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/WixMadeforText-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                 U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Pretendard Regular'), url('../fonts/Pretendard-Regular.subset.woff2') format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Pretendard Medium'), url('../fonts/Pretendard-Medium.subset.woff2') format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Pretendard SemiBold'), url('../fonts/Pretendard-SemiBold.subset.woff2') format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Pretendard Bold'), url('../fonts/Pretendard-Bold.subset.woff2') format('woff2');
}

:root {
  /* ---------- Typography ---------- */
  --font-base: "Wix Madefor Text", "Pretendard", Arial, Helvetica, sans-serif;
  --fs-body: 14px;   --lh-body: 21px;
  --fs-h1: 32px;     --lh-h1: 40px;     /* 원본에 h1 없음 → h2 비율로 보정 */
  --fs-h2: 26px;     --lh-h2: 32.5px;
  --fs-h3: 16px;     --lh-h3: 20px;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* ---------- Colors : 리세일 기존 컬러로 교체하는 슬롯 ----------
     아래 값은 임시 기본값(무채색)이다. 리세일 기존 컬러 hex로 바꾸면
     버튼/칩/카드/폼 전체에 반영된다. 이 파일은 body·제목·링크의 글자색과
     배경색을 건드리지 않으므로, 기존 사이트 CSS의 색이 그대로 유지된다. */
  --c-text: inherit;          /* 기존 본문색 그대로 */
  --c-text-sub: #666666;      /* 기존 보조 텍스트색으로 교체 */
  --c-text-muted: #888888;
  --c-bg-soft: #F5F5F5;       /* 기존 섹션/썸네일 배경색으로 교체 */
  --c-bg-accent: #F5F5F5;     /* 기존 프로모 배경색으로 교체 */
  --c-primary: #222222;       /* ★ 기존 메인 브랜드 컬러로 교체 (CTA 버튼) */
  --c-primary-hover: #444444; /* ★ 기존 hover 컬러로 교체 */
  --c-on-primary: #FFFFFF;    /* 메인 버튼 글자색 */
  --c-link: inherit;          /* 기존 링크색 그대로 */
  --c-gray-btn: #EEEEEE;
  --c-border: #DDDDDD;
  --c-border-light: #EAEAEA;

  /* ---------- Shape & Space ---------- */
  --radius-btn: 6px;
  --radius-box: 8px;
  --radius-pill: 1000px;
  --space-1: 5px; --space-2: 10px; --space-3: 15px; --space-4: 20px; --space-6: 30px; --space-8: 40px;
  --container: 1280px;        /* 원본은 max-width none(풀폭) → 운영 편의상 제한 */
  --shadow-card: 0 2px 8px rgba(0,0,0,.08);
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  /* color / background 미지정 → 기존 사이트 컬러 유지 */
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-medium); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-medium); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-medium); }
h1, h2, h3 { margin: 0 0 var(--space-3); }
a.link:hover, .text-link:hover { text-decoration: underline; }

.rs-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-4); }

/* ---------- Buttons ---------- */
.rs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: var(--fw-bold) 14px/21px var(--font-base);
  padding: 10px 20px;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.rs-btn--primary   { background: var(--c-primary); color: var(--c-on-primary); border-color: var(--c-primary); }
.rs-btn--primary:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); }
.rs-btn--secondary { background: #fff; color: var(--c-text); border-color: var(--c-text); }
.rs-btn--secondary:hover { background: var(--c-bg-soft); }
.rs-btn--gray      { background: var(--c-gray-btn); color: var(--c-text); padding: 17px; }
.rs-btn--gray:hover { background: var(--c-border); }
.rs-btn--block     { width: 100%; }

/* 필터 칩 / 태그 (pill) */
.rs-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px; font-size: 14px;
  background: #fff; color: var(--c-text);
  border: 1px solid var(--c-border); border-radius: var(--radius-pill);
  cursor: pointer;
}
.rs-chip.is-active { background: var(--c-primary); color: var(--c-on-primary); border-color: var(--c-primary); }

/* ---------- Header ---------- */
.rs-header { background: #fff; border-bottom: 1px solid var(--c-border-light); }
.rs-header__inner { display: flex; align-items: center; gap: var(--space-4); height: 72px; }
.rs-search {
  flex: 1; display: flex; align-items: center;
  height: 44px; padding: 0 var(--space-3);
  background: var(--c-bg-soft); border: 1px solid transparent; border-radius: var(--radius-box);
}
.rs-search:focus-within { background: #fff; border-color: var(--c-primary); }
.rs-search input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font: 14px/21px var(--font-base); color: var(--c-text);
}

/* ---------- Product Grid & Card ---------- */
.rs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4) 10px; }
@media (max-width: 1024px) { .rs-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .rs-grid { grid-template-columns: repeat(2, 1fr); } }

.rs-card { padding: 0 5px; color: var(--c-text); }
.rs-card__thumb {
  aspect-ratio: 1/1; background: var(--c-bg-soft); border-radius: var(--radius-box);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.rs-card__thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .2s; }
.rs-card:hover .rs-card__thumb img { transform: scale(1.03); }
.rs-card__brand { margin-top: var(--space-2); font-weight: var(--fw-bold); font-size: 14px; }
.rs-card__title { color: var(--c-text-sub); font-size: 14px; line-height: 20px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rs-card__price { margin-top: var(--space-1); font-weight: var(--fw-bold); font-size: 16px; }
.rs-card__meta  { color: var(--c-text-muted); font-size: 12px; }

/* ---------- Sections ---------- */
.rs-section       { padding: var(--space-8) 0; }
.rs-section--soft { background: var(--c-bg-soft); }
.rs-section--beige{ background: var(--c-bg-accent); }
.rs-box { background: #fff; border: 1px solid var(--c-border-light); border-radius: var(--radius-box); padding: var(--space-4); }

/* ---------- Form ---------- */
.rs-input, .rs-select {
  width: 100%; height: 44px; padding: 0 var(--space-3);
  font: 14px/21px var(--font-base); color: var(--c-text);
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-btn);
}
.rs-input:focus, .rs-select:focus { outline: 0; border-color: var(--c-primary); }