/* 집사고 전용 컴포넌트 스타일
   근거: 집팔고360H_메인_포털_HTML_개발지침_2026-09-03 4장 — 신규 서비스는 공통 헤더/토큰(tokens.css, common.css)을
   그대로 적용하고, 서비스 본문(집사고 고유 화면)만 이 파일에서 별도 스타일을 추가한다.
   색상은 tokens.css 확정값만 사용(core/primary/secondary 새로 정의하지 않음). */
@import url('tokens.css');
@import url('common.css');

/* ============ 홈 인사말 ============ */
.zs-greet{ font-size:19px; font-weight:800; line-height:1.5; margin-bottom:var(--sp-6); color:var(--ink-900); }
.zs-greet .zs-buyer-code{ color:var(--color-primary); }

.zs-section-title{ font-size:14px; font-weight:800; color:var(--ink-900); margin-bottom:var(--sp-3); }

/* ============ 현황 카드 2개(내 매수요청 / 받은 제안) ============ */
.zs-status-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.zs-status-card{ border:1px solid var(--ink-200); border-radius:var(--radius-lg); padding:var(--sp-4); }
.zs-status-card.is-accent{ border-color:var(--color-primary-light); background:var(--color-primary-lighter); }
.zs-status-card__icon{ width:36px; height:36px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:17px; margin-bottom:10px; background:var(--white); border:1px solid var(--ink-150); }
.zs-status-card__title{ font-size:13px; font-weight:700; color:var(--ink-700); margin-bottom:12px; }
.zs-status-card__nums{ display:flex; gap:var(--sp-4); }
.zs-status-card__num b{ display:block; font-size:19px; font-weight:800; color:var(--ink-900); }
.zs-status-card__num.is-primary b{ color:var(--color-primary); }
.zs-status-card__num span{ font-size:11px; color:var(--ink-500); }

/* ============ 지금 확인할 내용 ============ */
.zs-alert-list{ display:flex; flex-direction:column; gap:8px; }
.zs-alert-item{ display:flex; align-items:center; gap:10px; padding:var(--sp-3); border:1px solid var(--ink-150); border-radius:var(--radius-md); }
.zs-alert-item__body{ flex:1; min-width:0; font-size:13px; font-weight:600; color:var(--ink-800); }
.zs-alert-item .badge{ flex-shrink:0; }

/* ============ 진행 중인 매수요청 카드 / 제안 상세 카드 ============ */
.zs-req-card{ border:1px solid var(--ink-200); border-radius:var(--radius-lg); padding:var(--sp-5); }
.zs-req-card__id{ font-size:12px; color:var(--ink-500); font-weight:600; }
.zs-req-card__title{ font-size:16px; font-weight:800; margin-top:2px; }
.zs-req-card__meta{ font-size:13px; color:var(--ink-600); margin-top:4px; }
.zs-req-card__foot{ display:flex; align-items:center; gap:var(--sp-5); margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--ink-150); font-size:13px; color:var(--ink-600); }
.zs-req-card__foot b{ color:var(--ink-900); }

/* ============ 요청 리스트 아이템(내 매수요청 좌측 목록) ============ */
.zs-req-item{ display:block; width:100%; text-align:left; border:1px solid var(--ink-200); border-radius:var(--radius-lg); padding:var(--sp-4); background:var(--white); margin-bottom:var(--sp-3); }
.zs-req-item.is-active{ border-color:var(--color-primary); background:var(--color-primary-lighter); }
.zs-req-item__top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.zs-req-item__id{ font-size:12px; font-weight:700; color:var(--ink-500); }
.zs-req-item__name{ font-size:15px; font-weight:800; margin-top:8px; }
.zs-req-item__meta{ font-size:12px; color:var(--ink-500); margin-top:4px; }
.zs-req-item__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; font-size:12px; color:var(--ink-600); }
.zs-req-item__foot b{ color:var(--color-primary); }

/* ============ 필터 탭(전체/진행중/일시중지/종료 등) ============ */
.zs-filter-tabs{ display:flex; gap:6px; margin-bottom:var(--sp-4); }
.zs-filter-tab{ flex:1; height:36px; border:1px solid var(--ink-200); border-radius:var(--radius-sm); background:var(--white); font-size:12px; font-weight:700; color:var(--ink-600); white-space:nowrap; }
.zs-filter-tab.is-active{ background:var(--ink-900); border-color:var(--ink-900); color:var(--white); }

/* ============ 개인정보 비공개 안내 ============ */
.zs-privacy-notice{ display:flex; gap:8px; align-items:flex-start; background:var(--color-info-bg); color:var(--ink-700); border-radius:var(--radius-md); padding:var(--sp-3) var(--sp-4); font-size:12px; line-height:1.6; margin-bottom:var(--sp-4); }

/* ============ 요청↔제안 상세 비교 테이블 ============ */
.zs-compare{ margin-top:var(--sp-2); border-top:1px solid var(--ink-150); }
.zs-compare-row{ display:grid; grid-template-columns:64px 1fr 1fr 18px; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid var(--ink-150); font-size:13px; }
.zs-compare-row__label{ color:var(--ink-500); font-weight:600; }
.zs-compare-row__mine{ color:var(--ink-600); }
.zs-compare-row__offer{ font-weight:700; }
.zs-compare-row__ok{ color:#2FAE66; font-weight:800; text-align:center; }

/* ============ 진행 스텝(제안→비교상담→방문→계약 등 좁은 버전) ============ */
.zs-mini-stepper{ display:flex; align-items:center; gap:0; margin-top:var(--sp-4); }

/* ============ 지도: 내 희망지역 원 / 핀 라벨 / 제안 콜아웃 ============ */
.zs-my-area-circle{
  position:absolute; border-radius:50%; border:2px dashed var(--color-primary);
  background:rgba(214,59,59,.07); display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; z-index:2;
}
.zs-my-area-circle b{ font-size:12px; color:var(--color-primary-dark); font-weight:800; }
.zs-my-area-circle span{ font-size:10px; color:var(--ink-600); margin-top:2px; }

.zs-map-pin-dot{ position:absolute; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; z-index:4; }
.zs-map-pin-dot__label{ background:var(--white); border:1px solid var(--ink-200); box-shadow:var(--shadow-sm); border-radius:var(--radius-sm); padding:5px 9px; font-size:11px; font-weight:800; white-space:nowrap; display:flex; align-items:center; gap:4px; }
.zs-map-pin-dot__label.is-primary{ background:var(--color-primary); color:var(--white); border-color:var(--color-primary); }

.zs-map-callout{ position:absolute; width:250px; background:var(--white); border:1px solid var(--ink-200); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:var(--sp-4); z-index:6; }
.zs-map-callout__name{ font-size:14px; font-weight:800; margin-top:6px; }
.zs-map-callout__meta{ font-size:12px; color:var(--ink-500); margin-top:2px; }
.zs-map-callout__match{ font-size:12px; color:#2FAE66; font-weight:700; margin-top:6px; }
.zs-map-callout .btn{ width:100%; margin-top:10px; }

.zs-map-footbar{
  position:absolute; left:0; right:0; bottom:0; background:var(--white); border-top:1px solid var(--ink-150);
  padding:10px var(--sp-5); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  font-size:12px; color:var(--ink-600); flex-wrap:wrap; z-index:5;
}
.zs-map-footbar b{ color:var(--ink-900); }
.zs-legend{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.zs-legend span{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.zs-legend i{ width:10px; height:10px; border-radius:50%; display:inline-block; flex-shrink:0; }

@media (max-width: 720px){
  .zs-status-grid{ grid-template-columns:1fr; }
  .zs-map-footbar{ flex-direction:column; align-items:flex-start; gap:6px; }
}

/* ============ 세로형 위저드 스텝바(좌측 레일) — 매수요청 등록·매물 제안 등 다단계 플로우 ============ */
.zs-wizard-progress{ height:4px; background:var(--ink-150); border-radius:var(--radius-pill); margin:10px 0 var(--sp-5); overflow:hidden; }
.zs-wizard-progress__fill{ height:100%; background:var(--color-primary); }
.zs-wizard-steps{ display:flex; flex-direction:column; gap:0; }
.zs-wizard-step{ display:flex; align-items:flex-start; gap:10px; padding-bottom:22px; position:relative; }
.zs-wizard-step::before{ content:''; position:absolute; left:13px; top:28px; bottom:0; width:2px; background:var(--ink-150); }
.zs-wizard-step:last-child::before{ display:none; }
.zs-wizard-step__dot{ width:28px; height:28px; border-radius:50%; background:var(--ink-150); color:var(--ink-500); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; flex-shrink:0; z-index:1; }
.zs-wizard-step.is-done .zs-wizard-step__dot{ background:var(--color-primary); color:#fff; }
.zs-wizard-step.is-active .zs-wizard-step__dot{ background:var(--color-primary); color:#fff; box-shadow:0 0 0 4px var(--color-primary-light); }
.zs-wizard-step__label{ font-weight:700; font-size:14px; color:var(--ink-500); padding-top:4px; }
.zs-wizard-step.is-active .zs-wizard-step__label, .zs-wizard-step.is-done .zs-wizard-step__label{ color:var(--ink-900); }
.zs-wizard-step__value{ font-size:12px; color:var(--ink-500); margin-top:2px; }

.zs-wizard-card{ max-width:640px; }
.zs-wizard-eyebrow{ font-size:12px; font-weight:800; color:var(--color-primary); margin-bottom:6px; }
.zs-wizard-title{ font-size:22px; font-weight:800; margin-bottom:6px; }
.zs-wizard-desc{ font-size:13px; color:var(--ink-500); margin-bottom:var(--sp-5); }
.zs-wizard-nav{ display:flex; gap:8px; margin-top:var(--sp-6); }
.zs-wizard-nav .btn{ flex:1; }

/* 주택유형 아이콘 그리드(STEP1) */
.zs-type-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); margin-bottom:var(--sp-5); }
.zs-type-card{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:var(--sp-5) var(--sp-3); border:1px solid var(--ink-200); border-radius:var(--radius-lg); font-weight:700; font-size:14px; position:relative; background:#fff; }
.zs-type-card.is-active{ border-color:var(--color-primary); background:var(--color-primary-lighter); color:var(--color-primary-dark); }
.zs-type-card__icon{ font-size:28px; }
.zs-type-card__check{ position:absolute; top:10px; right:10px; width:20px; height:20px; border-radius:50%; background:var(--color-primary); color:#fff; display:none; align-items:center; justify-content:center; font-size:12px; }
.zs-type-card.is-active .zs-type-card__check{ display:flex; }

/* 우선순위 지역 리스트(STEP2) */
.zs-rank-item{ display:flex; align-items:center; gap:10px; padding:var(--sp-3); border:1px solid var(--ink-200); border-radius:var(--radius-md); margin-bottom:8px; }
.zs-rank-badge{ flex-shrink:0; font-size:11px; font-weight:800; color:var(--color-primary); background:var(--color-primary-light); padding:3px 8px; border-radius:var(--radius-sm); white-space:nowrap; }
.zs-rank-item__name{ flex:1; font-size:14px; font-weight:700; }
.zs-rank-item__remove{ background:none; border:none; color:var(--ink-400); font-size:16px; cursor:pointer; flex-shrink:0; }

/* 희망지역 실시간 검색 드롭다운(STEP2, 2026-09-04 추가)
   집테리어의 "단지명 검색 → 입력할 때마다 드롭다운(이름+주소)" 패턴을 재현.
   부모(.zs-region-search)를 relative로 두고 입력창 바로 아래 절대배치. */
.zs-region-search{ position:relative; }
.zs-region-search-results{ position:absolute; left:0; right:0; top:calc(100% + 4px); background:var(--white); border:1px solid var(--ink-200); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); z-index:20; max-height:280px; overflow-y:auto; }
.zs-region-search-row{ display:block; width:100%; text-align:left; padding:10px 14px; background:none; border:none; border-bottom:1px solid var(--ink-100); cursor:pointer; }
.zs-region-search-row:last-child{ border-bottom:none; }
.zs-region-search-row:hover, .zs-region-search-row:focus{ background:var(--ink-50); outline:none; }
.zs-region-search-row__name{ font-size:14px; font-weight:700; color:var(--ink-900); }
.zs-region-search-row__addr{ font-size:12px; color:var(--ink-500); margin-top:2px; }
.zs-region-search-empty{ padding:14px; font-size:13px; color:var(--ink-500); text-align:center; }

/* 별점(방문 평가, contract.html starsHtml()) — icon-star는 기본 아웃라인,
   is-filled만 채운 별로 표시(디자인지침 2-2, 2026-09-04) */
.zs-star{ color:var(--ink-300); }
.zs-star .icon{ width:26px; height:26px; }
.zs-star.is-filled{ color:#F5A623; }
.zs-star.is-filled .icon{ fill:currentColor; }

/* 제거 가능한 조건 칩(STEP4) */
.zs-chip{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 8px 0 12px; border-radius:var(--radius-pill); font-size:13px; font-weight:600; }
.zs-chip button{ background:none; border:none; color:inherit; opacity:.6; font-size:14px; cursor:pointer; line-height:1; padding:2px; }
.zs-chip.is-must{ background:var(--color-primary-light); color:var(--color-primary-dark); }
.zs-chip.is-flex{ background:var(--color-info-bg); color:#2454A8; }
.zs-chip.is-nice{ background:var(--color-secondary-bg); color:var(--color-secondary-ink); }
.zs-chip-add{ height:34px; padding:0 14px; border-radius:var(--radius-pill); border:1px dashed var(--ink-300); background:#fff; color:var(--ink-500); font-size:13px; font-weight:700; }

/* 슬라이더 */
.zs-slider{ width:100%; accent-color:var(--color-primary); height:4px; }
.zs-slider-labels{ display:flex; justify-content:space-between; font-size:11px; color:var(--ink-400); margin-top:4px; }

/* 확인 카드(요청확인·최종확인 등 요약 섹션) */
.zs-review-card{ border:1px solid var(--ink-200); border-radius:var(--radius-lg); padding:var(--sp-4) var(--sp-5); margin-bottom:var(--sp-4); }
.zs-review-card__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-weight:800; font-size:14px; }
.zs-review-card__head a, .zs-review-card__head button{ font-size:12px; font-weight:700; color:var(--color-primary); background:none; border:none; padding:0; }
.zs-review-row{ display:flex; justify-content:space-between; gap:10px; padding:7px 0; font-size:13px; border-bottom:1px dashed var(--ink-150); }
.zs-review-row:last-child{ border-bottom:none; }
.zs-review-row span:first-child{ color:var(--ink-500); flex-shrink:0; }
.zs-review-row span:last-child{ font-weight:700; text-align:right; }

/* 완료·성공·진행상태 화면 공통 */
.zs-success-icon{ width:52px; height:52px; border-radius:50%; background:var(--color-secondary-bg); color:#2FAE66; display:flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:var(--sp-4); }
.zs-flow-icons{ display:flex; align-items:center; justify-content:center; gap:14px; margin:var(--sp-4) 0; }
.zs-flow-icons span.arrow{ color:var(--ink-300); }
.zs-flow-icons .ic{ width:44px; height:44px; border-radius:50%; background:var(--ink-100); display:flex; align-items:center; justify-content:center; font-size:19px; }

/* 채팅(상담) UI */
.zs-chat{ display:flex; flex-direction:column; gap:12px; }
.zs-chat-bubble{ max-width:78%; padding:10px 14px; border-radius:14px; font-size:13px; line-height:1.5; }
.zs-chat-bubble.from-agent{ align-self:flex-start; background:var(--ink-100); border-bottom-left-radius:4px; }
.zs-chat-bubble.from-me{ align-self:flex-end; background:var(--color-primary-lighter); border-bottom-right-radius:4px; }
.zs-chat-time{ font-size:10px; color:var(--ink-400); margin-top:3px; }
.zs-chat-options{ display:flex; flex-wrap:wrap; gap:8px; align-self:flex-start; max-width:90%; }
.zs-chat-option{ padding:8px 12px; border:1px solid var(--ink-200); border-radius:var(--radius-sm); font-size:12px; font-weight:700; background:#fff; }
.zs-chat-option.is-selected{ border-color:var(--color-primary); color:var(--color-primary); background:var(--color-primary-lighter); }

/* 파트너(중개사) 대시보드 퀵메뉴 */
.zs-quick-list{ display:flex; flex-direction:column; gap:2px; }
.zs-quick-item{ display:flex; align-items:center; gap:10px; padding:10px 4px; border-bottom:1px solid var(--ink-150); font-size:14px; font-weight:600; background:none; border-left:none; border-right:none; border-top:none; width:100%; text-align:left; }
.zs-quick-item__icon{ width:32px; height:32px; border-radius:var(--radius-sm); background:var(--ink-100); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.zs-quick-item__label{ flex:1; }
.zs-quick-item__count{ font-weight:800; }
.zs-quick-item__count.is-new{ color:var(--color-primary); }

.zs-mini-stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; text-align:center; }
.zs-mini-stat-grid div b{ display:block; font-size:17px; font-weight:800; }
.zs-mini-stat-grid div span{ font-size:11px; color:var(--ink-500); }

@media (max-width:720px){
  .zs-type-grid{ grid-template-columns:1fr 1fr; }
}

/* 모바일 가로스크롤 방지(메인지침 8-3) — 콜아웃/희망지역 원은 위치·폭을 JS 인라인 style로 지정하므로
   좁은 화면에서는 미디어쿼리로 재정렬한다(인라인 스타일보다 우선시키기 위해 !important 사용,
   overflow-x:hidden으로 증상만 가리지 않고 실제 튀어나오는 요소 크기·위치 자체를 고친 것). */
@media (max-width: 640px){
  .zp-map-pane .zs-map-callout{ left:50% !important; width:calc(100% - 32px) !important; max-width:280px; transform:translateX(-50%); }
  .zp-map-pane .zs-my-area-circle{ width:150px !important; height:150px !important; left:50% !important; transform:translateX(-50%); }
}