/* =========================================
   TABLE.CSS — 분양가 / 일정표 / 비교표 테이블 스타일
   ========================================= */

/* ── 테이블 래퍼 (가로 스크롤) ───────────── */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* 스크롤 힌트 (모바일) */
.table-wrap::after {
  content: '';
  display: none;
}

@media (max-width: 640px) {
  .table-wrap {
    position: relative;
  }
}

/* ── 기본 테이블 ─────────────────────────── */
.table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  background: var(--color-bg);
}

/* ── 헤더 ────────────────────────────────── */
.table thead th {
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  padding: 14px 16px;
  text-align: center;
  letter-spacing: 0.03em;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.table thead th:first-child {
  border-radius: var(--radius-md) 0 0 0;
}

.table thead th:last-child {
  border-radius: 0 var(--radius-md) 0 0;
}

/* ── 바디 셀 ─────────────────────────────── */
.table tbody td {
  padding: 13px 16px;
  text-align: center;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  line-height: var(--lh-base);
  vertical-align: middle;
}

.table tbody td:first-child {
  text-align: left;
  font-weight: var(--fw-medium);
  background: var(--color-bg-soft);
  color: var(--color-primary);
}

/* ── 줄무늬 (짝수행) ─────────────────────── */
.table--striped tbody tr:nth-child(even) td {
  background: var(--color-bg-soft);
}

.table--striped tbody tr:nth-child(even) td:first-child {
  background: #eef2f8;
}

/* ── 호버 ────────────────────────────────── */
.table--hover tbody tr:hover td {
  background: #eef2f8;
}

/* ── 분양가 테이블 특화 ──────────────────── */
.table .price {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  font-size: var(--fs-base);
}

.table .price--accent {
  color: var(--color-accent);
}

.table .area {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  display: block;
  margin-top: 2px;
}

/* ── 강조 행 ─────────────────────────────── */
.table tbody tr.tr--highlight td {
  background: #fff8ee;
  border-color: #f0d898;
}

.table tbody tr.tr--highlight td:first-child {
  background: #fff0d0;
}

/* ── 분양 일정 타임라인 테이블 ───────────── */
.table .status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.table .status-badge--open {
  background: #e8f5e9;
  color: #2e7d32;
}
.table .status-badge--closed {
  background: #f5f5f5;
  color: #9e9e9e;
}
.table .status-badge--soon {
  background: #fff3e0;
  color: #e65100;
}
.table .status-badge--soldout {
  background: #fce4ec;
  color: #c62828;
}

/* ── 비교 테이블 (타입 비교) ─────────────── */
.table--compare thead th {
  background: var(--color-primary-dark);
}

.table--compare thead th.th--accent {
  background: var(--color-accent);
  color: var(--color-white);
}

.table--compare tbody td.td--accent {
  background: #fffbf0;
  font-weight: var(--fw-medium);
}

/* ── 푸터 행 (합계 등) ───────────────────── */
.table tfoot td {
  padding: 13px 16px;
  text-align: center;
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: var(--fw-semibold);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ── 반응형 ──────────────────────────────── */
@media (max-width: 480px) {
  .table {
    font-size: var(--fs-xs);
  }
  .table thead th,
  .table tbody td {
    padding: 10px 10px;
  }
}