/* 집팔고 매물 광고(광고매물 · 광고 신청 부품 · 손님 「문의 가능한 중개사」) — 2026-10-26 집팔고-003
   색은 tokens.css 값만 쓴다. 광고중 = 빨강(primary) · 대기 = 주황(warning) · 종료 = 회색. */

.ad-badge{ display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 8px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:700; white-space:nowrap; }
.ad-badge--active{ background:var(--color-primary-light); color:var(--color-primary-dark); }
.ad-badge--waiting{ background:var(--color-warning-bg); color:#9A5A12; }
.ad-badge--ended{ background:var(--ink-100); color:var(--ink-600); }
.ad-badge--paid{ background:var(--color-secondary-bg); color:var(--color-secondary-ink); }
.ad-badge--ok{ background:var(--color-info-bg); color:var(--color-info); }
.ad-badge--no{ background:var(--ink-100); color:var(--ink-500); }
.ad-badge--re{ background:var(--ink-900); color:var(--white); }
.ad-badgerow{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }

.ad-sec{ margin-top:18px; }
.ad-sec__title{ display:flex; align-items:center; gap:8px; font-size:15px; font-weight:800; color:var(--ink-900); }
.ad-sec__num{ width:22px; height:22px; border-radius:50%; background:var(--ink-900); color:var(--white); font-size:12px;
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.ad-sec__desc{ font-size:12px; color:var(--ink-500); margin-top:4px; }

.ad-kv{ border-top:1px solid var(--ink-150); margin-top:10px; font-size:13px; }
.ad-kv__row{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 2px; border-bottom:1px solid var(--ink-150); }
.ad-kv__row > span:first-child{ color:var(--ink-500); flex-shrink:0; }
.ad-kv__row > b{ text-align:right; word-break:keep-all; font-weight:700; }

.ad-part{ margin-top:12px; padding:14px; border:1px solid var(--ink-150); border-radius:var(--radius-md); background:var(--white); }
.ad-part__head{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:13px; }
.ad-part__head b{ font-size:18px; font-weight:800; }
.ad-part__head b em{ font-style:normal; color:var(--color-primary); }
.ad-part .progress-bar{ margin-top:8px; }
.ad-dots{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.ad-dot{ width:14px; height:14px; border-radius:50%; border:2px solid var(--ink-300); background:var(--white); }
.ad-dot.is-on{ background:var(--color-primary); border-color:var(--color-primary); }
.ad-dot.is-me{ background:var(--ink-900); border-color:var(--ink-900); }
.ad-next{ margin-top:12px; padding:10px 12px; border-radius:var(--radius-sm); font-size:13px; font-weight:700;
  background:var(--color-secondary-bg); color:var(--color-secondary-ink); border:1px solid var(--color-secondary-border); }
.ad-next--wait{ background:var(--color-warning-bg); color:#9A5A12; border-color:#F2C892; }
.ad-note{ font-size:12px; color:var(--ink-500); margin-top:8px; line-height:1.55; }

.ad-checks{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.ad-check{ position:relative; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px;
  border:1px solid var(--ink-300); border-radius:var(--radius-md); background:var(--white); font-size:14px; font-weight:700; cursor:pointer; }
.ad-check input{ width:18px; height:18px; accent-color:var(--color-primary); margin:0; }
.ad-check.is-on{ border-color:var(--color-primary); background:var(--color-primary-lighter); color:var(--color-primary-dark); }
.ad-check.is-off{ color:var(--ink-400); background:var(--ink-50); cursor:not-allowed; }
.ad-check small{ font-size:11px; font-weight:600; color:var(--ink-400); }

.ad-office{ margin-top:10px; padding:14px; border-radius:var(--radius-md); background:var(--ink-50); border:1px solid var(--ink-150); }
.ad-office__top{ display:flex; gap:10px; align-items:center; }
.ad-office__logo{ width:44px; height:44px; border-radius:50%; background:var(--white); border:1px solid var(--ink-150);
  display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.ad-office__logo img{ width:100%; height:100%; object-fit:cover; }
.ad-office__name{ font-weight:800; font-size:15px; }
.ad-office__sub{ font-size:12px; color:var(--ink-500); margin-top:2px; }
.ad-office__legal{ margin-top:10px; font-size:12px; color:var(--ink-600); line-height:1.6; word-break:keep-all; }
.ad-office__legal b{ font-weight:600; color:var(--ink-700); }

.ad-agree{ margin-top:18px; padding:12px 14px; border-radius:var(--radius-md); border:1px solid var(--ink-200); background:var(--white); }
.ad-agree .check-row{ font-size:14px; font-weight:700; color:var(--ink-900); align-items:center; min-height:28px; }
.ad-actions{ display:flex; gap:8px; margin-top:16px; }
.ad-actions .btn{ flex:1; min-height:48px; }
.ad-actions .btn-primary{ flex:2; }

.ad-mini{ display:flex; gap:12px; align-items:center; padding:12px; border-radius:var(--radius-md); border:1px solid var(--ink-150); margin-top:14px; }
.ad-mini__thumb{ width:56px; height:56px; border-radius:var(--radius-sm); background:var(--ink-100); display:flex; align-items:center;
  justify-content:center; font-size:26px; flex-shrink:0; overflow:hidden; }
.ad-mini__thumb img{ width:100%; height:100%; object-fit:cover; }
.ad-mini__name{ font-weight:800; font-size:14px; }
.ad-mini__meta{ font-size:12px; color:var(--ink-500); margin-top:2px; }
.ad-mini__price{ font-size:14px; font-weight:800; color:var(--color-primary); margin-top:2px; }

.ad-done{ text-align:center; padding:12px 0 4px; }
.ad-done__icon{ width:56px; height:56px; margin:0 auto; border-radius:50%; background:var(--color-primary-light); color:var(--color-primary);
  display:flex; align-items:center; justify-content:center; font-size:28px; }
.ad-done__icon--wait{ background:var(--color-warning-bg); color:var(--color-warning); }
.ad-done h3{ font-size:18px; font-weight:800; margin-top:12px; }
.ad-done p{ font-size:13px; color:var(--ink-500); margin-top:6px; line-height:1.55; }

/* 성과 */
.ad-cells{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; margin-top:10px; }
.ad-cell{ padding:12px 6px; border-radius:var(--radius-md); background:var(--ink-50); text-align:center; min-width:0; }
.ad-cell b{ display:block; font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; }
.ad-cell span{ display:block; font-size:11px; color:var(--ink-500); margin-top:2px; }
.ad-cell--hl b{ color:var(--color-primary); }
.ad-kinds{ display:flex; gap:8px; margin-top:8px; }
.ad-kinds > div{ flex:1; display:flex; justify-content:space-between; align-items:center; padding:8px 10px; border-radius:var(--radius-sm);
  border:1px solid var(--ink-150); font-size:12px; color:var(--ink-600); min-width:0; }
.ad-kinds b{ font-size:14px; color:var(--ink-900); }
.ad-flow{ display:flex; align-items:center; gap:4px; margin-top:10px; font-size:12px; }
.ad-flow > div{ flex:1; text-align:center; padding:10px 4px; border-radius:var(--radius-sm); background:var(--ink-50); min-width:0; }
.ad-flow > div b{ display:block; font-size:16px; font-weight:800; }
.ad-flow > i{ font-style:normal; color:var(--color-primary); font-weight:800; font-size:12px; white-space:nowrap; }
.ad-chart{ margin-top:10px; padding:12px; border:1px solid var(--ink-150); border-radius:var(--radius-md); }
.ad-chart svg{ display:block; width:100%; height:auto; }
.ad-legend{ display:flex; gap:12px; font-size:11px; color:var(--ink-500); margin-top:6px; }
.ad-legend i{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:4px; vertical-align:-1px; }
.ad-hbar{ display:flex; align-items:center; gap:8px; font-size:12px; margin-top:6px; }
.ad-hbar > span:first-child{ width:34px; color:var(--ink-600); flex-shrink:0; }
.ad-hbar__track{ flex:1; height:10px; background:var(--ink-100); border-radius:var(--radius-pill); overflow:hidden; }
.ad-hbar__fill{ height:100%; background:var(--color-primary); border-radius:var(--radius-pill); }
.ad-hbar > b{ width:28px; text-align:right; font-variant-numeric:tabular-nums; }
.ad-recent{ margin-top:8px; font-size:13px; }
.ad-recent > div{ display:flex; justify-content:space-between; padding:9px 2px; border-bottom:1px solid var(--ink-150); }
.ad-recent > div span{ color:var(--ink-500); }
.ad-compare{ width:100%; border-collapse:collapse; margin-top:10px; font-size:13px; }
.ad-compare th, .ad-compare td{ padding:9px 6px; border-bottom:1px solid var(--ink-150); text-align:right; }
.ad-compare th:first-child, .ad-compare td:first-child{ text-align:left; color:var(--ink-500); font-weight:600; }
.ad-compare thead th{ font-size:12px; color:var(--ink-500); font-weight:700; }

/* 광고매물 목록 */
.ad-tabs{ display:flex; gap:6px; margin-top:14px; overflow-x:auto; }
.ad-tabs .seg-btn{ flex:0 0 auto; min-width:0; height:40px; padding:0 14px; font-size:13px; white-space:nowrap; }
.ad-listbar{ display:flex; justify-content:space-between; align-items:center; margin-top:12px; font-size:13px; color:var(--ink-600); }
.ad-listbar select{ height:36px; border:1px solid var(--ink-200); border-radius:var(--radius-sm); padding:0 8px; font-size:13px; background:var(--white); }
.ad-card{ width:100%; text-align:left; display:flex; gap:12px; padding:12px; margin-top:8px; border:1px solid var(--ink-150);
  border-radius:var(--radius-md); background:var(--white); cursor:pointer; font:inherit; color:inherit; }
.ad-card.is-active{ border-color:var(--color-primary); background:var(--color-primary-lighter); }
.ad-card__thumb{ width:84px; height:84px; border-radius:var(--radius-sm); background:var(--ink-100); flex-shrink:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-size:30px; }
.ad-card__thumb img{ width:100%; height:100%; object-fit:cover; }
.ad-card__body{ flex:1; min-width:0; }
.ad-card__type{ font-size:12px; color:var(--ink-500); }
.ad-card__name{ font-size:15px; font-weight:800; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ad-card__price{ font-size:14px; font-weight:800; color:var(--color-primary); margin-top:1px; }
.ad-card__meta{ font-size:12px; color:var(--ink-500); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ad-card__perf{ display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--ink-600); margin-top:6px; }
.ad-card__perf b{ color:var(--ink-900); }
.ad-card__go{ color:var(--color-primary); font-weight:700; white-space:nowrap; }
.ad-legendbar{ display:flex; gap:14px; font-size:12px; color:var(--ink-600); margin-top:10px; }
.ad-legendbar span{ display:inline-flex; align-items:center; gap:5px; }
.ad-pin{ width:12px; height:12px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); border:2px solid var(--color-primary); background:var(--white); }
.ad-pin.is-fill{ background:var(--color-primary); }

.ad-reasons{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.ad-reasons label{ display:flex; align-items:center; gap:10px; min-height:44px; padding:0 12px; border:1px solid var(--ink-200);
  border-radius:var(--radius-md); font-size:14px; cursor:pointer; }
.ad-reasons label.is-on{ border-color:var(--color-primary); background:var(--color-primary-lighter); font-weight:700; }
.ad-reasons input{ width:18px; height:18px; accent-color:var(--color-primary); margin:0; }
.ad-ul{ margin:10px 0 0; padding-left:0; list-style:none; font-size:13px; color:var(--ink-700); display:flex; flex-direction:column; gap:6px; }
.ad-ul li{ display:flex; gap:6px; align-items:flex-start; }
.ad-ul li::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--ink-400); margin-top:8px; flex-shrink:0; }

/* 손님 「문의 가능한 중개사」 */
.ad-agent{ margin-bottom:14px; }
.ad-agent__btns{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.ad-agent__btns .btn{ flex:1 1 30%; min-height:44px; }
.ad-agent__num{ font-size:13px; font-weight:700; color:var(--ink-800); margin-top:8px; }

@media (max-width: 420px){
  .ad-cells{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ad-flow{ flex-wrap:wrap; }
  .ad-flow > div{ flex:1 1 26%; }
}

/* 집팔고 .notice 는 가로 정렬(flex) — 글 + 굵은 글 + 단추가 섞이면 칸이 갈라진다. 광고 화면의 안내 상자는 글 흐름대로. */
.notice.ad-n{ display:block; }