/* ============================================================
   components.css — 여러 페이지가 함께 쓰는 부품
   (매물 카드·배지·사진 placeholder·가로 슬라이더·칩·언어칩)
   ============================================================ */

/* ---------- 언어 선택 드롭다운 (지구본 버튼, ④ 다국어에서 전 페이지 활성화) ---------- */
.language-picker {
  display: flex;
  justify-content: flex-end;
  padding: 14px 0 0;
}

/* 메뉴의 위치 기준 상자 — 행 전체가 아니라 버튼 크기로 줄여서 메뉴가 버튼 밑에 떨어지게 */
.language-picker-anchor {
  position: relative;
  display: inline-flex;
}

.language-picker-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card-background);
  color: var(--navy);
  cursor: pointer;
}

.language-picker-globe {
  width: 16px;
  height: 16px;
}

.language-picker-caret {
  font-size: 10px;
  color: var(--muted);
}

/* select처럼 버튼 아래로 펼쳐진다 — 버튼보다 20px 왼쪽에서 시작해 버튼이 메뉴 위에 얹힌 모양 */
.language-picker-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: -20px;
  z-index: 30;
  min-width: 150px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-background);
  box-shadow: 0 8px 24px rgba(15, 40, 70, 0.14);
}

/* 모바일·태블릿: 메뉴가 컬럼 우측 밖 15px를 쓰는 좌측 정렬은 뷰포트를 넘칠 수 있음 → PC(≥1024)에서만 좌측 정렬 */
@media (max-width: 1023px) {
  .language-picker-menu {
    left: auto;
    right: 0;
  }
}

.language-picker-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--text);
}

/* 드롭다운 항목은 각자 자기 언어 서체로 — 페이지 언어와 무관하게 항목별 lang 속성이 기준 */
.language-picker-item[lang="vi"] {
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;   /* Tiếng의 ế까지 한 서체로 */
}

.language-picker-item[lang="zh"] {
  font-family: 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', sans-serif;
}

.language-picker-item[lang="zh-tw"] {
  font-family: 'Microsoft JhengHei', 'PingFang TC', 'Noto Sans TC', sans-serif;
}

.language-picker-item[lang="ja"] {
  font-family: 'Yu Gothic UI', 'Meiryo', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
}

.language-picker-flag {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.12);   /* 흰 바탕 국기(태극기·일장기)의 윤곽 확보 */
  object-fit: cover;
  flex-shrink: 0;
}

.language-picker-item:hover {
  background: #eef2f7;
}

.language-picker-item.on {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
}

/* ---------- 언어 제안 배너 (첫 방문, 브라우저 언어 감지) ---------- */
.language-banner {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 92vw;
  background: var(--navy);
  color: #fff;
  font-size: 13.5px;
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.language-banner-accept {
  background: #fff;
  color: var(--navy);
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 8px;
  white-space: nowrap;
}

.language-banner-dismiss {
  border: none;
  background: none;
  color: #cdd8e4;
  font-size: 14px;
  cursor: pointer;
}

/* ---------- 매물 카드 (그리드·슬라이더 공용) ---------- */
.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* 거래완료 아카이브 — 흐리게 */
.card-grid.completed .card {
  opacity: 0.55;
}

.card {
  background: var(--card-background);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  transition: transform 0.15s;
}

.card:active {
  transform: scale(0.98);
}

/* 썸네일은 전 계층 4:3 고정 비율 — 실사진 파생본(card 640×480)과 같은 규격이라 잘림 없이 꽉 찬다 */
.card-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background-size: cover;      /* 실사진일 때 꽉 채움 */
  background-position: center;
}

.badge {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 3px 9px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}

.badge-monthly {
  background: var(--navy);
}

.badge-jeonse {
  background: var(--green);
}

.badge-sale {
  background: var(--gold);
}


.foreigner-badge {
  position: absolute;
  right: 8px;
  top: 8px;
  font-size: 14px;
}

.featured-star {
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-size: 13px;
}

.card-body {
  padding: 10px 12px 12px;
}

.card-price {
  font-size: 16px;
  font-weight: 900;
  color: var(--navy);
}

.card-desc {
  font-size: 12.5px;
  color: var(--text);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-location {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 4px;
}

/* 사진 placeholder — ③ 실사진 업로드 전까지 (클래스명은 서버 ListingService가 생성) */
.placeholder-1 {
  background: linear-gradient(135deg, #b9d1c8, #8fb5a5);
}

.placeholder-2 {
  background: linear-gradient(135deg, #c3cfe0, #9db2cc);
}

.placeholder-3 {
  background: linear-gradient(135deg, #dcc9c0, #c0a294);
}

.placeholder-4 {
  background: linear-gradient(135deg, #cfd8c9, #a8bb9a);
}

/* ---------- 가로 슬라이더 ---------- */
.slider-wrap {
  position: relative;
}

.slider-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  scrollbar-width: none;
}

.slider-track::-webkit-scrollbar {
  display: none;
}

.slider-track .card {
  /* 그리드(card-grid 2열, gap 12px)와 같은 폭 — 슬라이더·그리드 어디서든 카드/썸네일 규격 동일.
     (폭이 다르면 4:3 썸네일 크기가 섹션마다 달라져 사진 크롭이 다르게 보인다) */
  width: calc(50% - 6px);
  flex-shrink: 0;
  scroll-snap-align: start;
}

/* PC 계층: 큐레이션은 전 계층 슬라이더 유지 — 그리드로 펼치면 바로 아래 '전체 매물'
   그리드와 구분이 사라져 큐레이션 정체성이 죽는다. PC는 카드 폭만 3열 규격으로 맞춰
   (전체 매물 그리드와 카드 크기 동일) 한 화면 3장 + 화살표 탐색.
   ⚠️ 이 규칙은 여기(공통) 한 곳에서만 정의한다 — 페이지별 CSS 중복 정의 금지(실사고). */
@media (min-width: 1024px) {
  .slider-track .card {
    width: calc((100% - 24px) / 3);   /* gap 12px × 2 — card-grid 3열과 동일 폭 */
  }
}

.slider-arrow {
  display: none;
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  z-index: 2;
}

.slider-arrow-left {
  left: -10px;
}

.slider-arrow-right {
  right: -10px;
}

/* 화살표는 태블릿부터 — 모바일은 스와이프가 자연스럽고 화살표는 폭만 차지한다.
   ⚠️ 미디어 구간이 겹치는 규칙은 나중에 정의된 쪽이 이긴다(같은 구체도) — 겹침이 생기면 max-width로 구간을 닫을 것 */
@media (min-width: 768px) {
  .slider-arrow {
    display: block;
  }
}

/* ---------- 필터 칩 ---------- */
.chip-row {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 4px 0;
  scrollbar-width: none;
}

.chip-row::-webkit-scrollbar {
  display: none;
}

.chip {
  flex-shrink: 0;
  padding: 7px 13px;
  border-radius: 20px;
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text);
}

.chip.on {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  font-weight: 700;
}

/* ---------- 금액 표기 안내 (비한국어 전용) — 상시 한 줄 대신 버튼, 누르면 모달 ----------
   ₩1M 같은 압축 표기를 표·예시로 풀이 (한국어판은 '만 원' 표기라 버튼 자체가 없다) */
.price-legend {
  margin: 2px 0 10px;
}

.price-legend-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--card-background);
  color: var(--muted);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}

.price-legend-button:hover {
  border-color: var(--navy);
  color: var(--navy);
}

.price-legend-icon {
  display: inline-flex;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
}

.price-legend-hint {
  color: var(--muted);
}

.price-legend-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 41, 63, .55);   /* --navy-dark 반투명 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}

.price-legend-modal {
  background: var(--card-background);
  border-radius: 16px;
  max-width: 440px;
  width: 100%;
  max-height: min(84vh, 600px);
  overflow-y: auto;
  box-shadow: 0 18px 50px rgba(18, 41, 63, .35);
}

.price-legend-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--line);
}

.price-legend-head h2 {
  font-size: 17px;
  margin: 0;
  flex: 1;
}

.price-legend-close {
  border: 0;
  background: var(--background);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  color: var(--muted);
}

.price-legend-close:hover {
  background: var(--line);
  color: var(--text);
}

.price-legend-body {
  padding: 12px 18px 18px;
  font-size: 14px;
}

.price-legend-rows {
  margin: 8px 0 12px;
  padding-left: 18px;
}

.price-legend-rows li {
  margin: 4px 0;
  font-weight: 600;
}

.price-legend-example {
  background: var(--background);
  border-radius: 10px;
  padding: 8px 12px;
  margin: 8px 0;
}

.price-legend-approx {
  font-weight: 600;
  margin: 10px 0 4px;
}

.price-legend-note {
  font-size: 12.5px;
  color: var(--muted);
  border-top: 1px dashed var(--line);
  padding-top: 8px;
  margin: 8px 0 0;
}