/* ============================================================
   집테리어 — 우리집 시공사례 (view=cases)   2026-09-16 디자인 총괄
   ------------------------------------------------------------
   시안 SC01~SC18 의 왼쪽 칸에 해당한다. 공통 부품(.zp-cta·.zp-select 등)은
   zp-view.css 에 있고, 여기에는 이 탭에만 쓰는 것만 둔다.

   색 규칙(시안에서 읽은 것)
     · 빨강(--red)  = **누르는 큰 버튼**(시공사례 검색 / 무료 견적요청)
     · 초록(--green)= **지금 고른 것**(두 갈래 선택, 연락 버튼 테두리)
     둘을 섞으면 "고른 것"과 "누를 것"이 같은 색이 되어 구분이 사라진다.
   ============================================================ */

/* ---------- 아파트명 자동완성 (SC02) ---------- */
.zp-ac{
  margin-top: 8px;
  border: 1px solid var(--line, #e6e9e7); border-radius: var(--r-lg);
  background: #fff; overflow: hidden;
}
.zp-ac__head{
  padding: 10px 14px;
  background: var(--soft, #f5f6f5);
  border-bottom: 1px solid var(--line, #e6e9e7);
  font-size: 13px; font-weight: 700; color: var(--muted, #777e79);
}
.zp-ac__item{
  display: grid; grid-template-columns: 44px minmax(0,1fr) 16px;
  gap: 12px; align-items: center;
  width: 100%; min-height: 64px; padding: 10px 14px;
  border: 0; border-top: 1px solid var(--line, #e6e9e7); background: #fff;
  font: inherit; text-align: left; color: var(--ink, #202421); cursor: pointer;
}
.zp-ac__item:first-of-type{ border-top: 0; }
.zp-ac__item:hover,
.zp-ac__item:focus-visible{ background: var(--green-soft, #edf5f2); outline: none; }
.zp-ac__mark{
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 10px; background: var(--soft, #f5f6f5); color: var(--green-3, #447466);
}
.zp-ac__name{ display: block; font-size: 15px; font-weight: 700; }
.zp-ac__addr{ display: block; margin-top: 3px; font-size: 13px; color: var(--muted, #777e79); }
.zp-ac__go{ color: var(--muted, #777e79); }
/* 결과가 없을 때 — 빈 상자만 보여주지 않는다. 무엇을 하라는지 적는다. */
.zp-ac__none{ padding: 18px 14px; font-size: 14px; color: var(--muted, #777e79); }

/* ---------- 고른 아파트 (SC03) ---------- */
.zp-picked{
  display: grid; grid-template-columns: 44px minmax(0,1fr) 16px;
  gap: 12px; align-items: center;
  width: 100%; min-height: 64px; padding: 10px 14px;
  border: 1px solid var(--line, #e6e9e7); border-radius: var(--r-lg);
  background: var(--soft, #f5f6f5);
  font: inherit; text-align: left; color: var(--ink, #202421); cursor: pointer;
}

/* 평형·타입을 모를 때 안내 — 막다른 길처럼 보이지 않게 빠져나갈 길을 적어 둔다 */
.zp-hint{
  display: flex; align-items: flex-start; gap: 8px;
  margin: -4px 0 0;
  font-size: 13px; line-height: 1.5; color: var(--muted, #777e79);
  word-break: keep-all;
}
.zp-hint svg{ flex: none; margin-top: 2px; color: var(--green-3, #447466); }

/* ---------- 조건 요약 줄 (SC04 이후) ---------- */
.zp-crumb{
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--soft, #f5f6f5); border-radius: var(--r-lg);
}
.zp-crumb__text{
  flex: 1 1 auto; min-width: 0;
  font-size: 15px; font-weight: 700; color: var(--ink, #202421);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zp-crumb__btn{
  flex: none; min-height: var(--h-sm); padding: 0 12px;
  border: 1px solid var(--line, #e6e9e7); border-radius: var(--r-sm);
  background: #fff; color: var(--ink, #202421);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.zp-crumb__btn:hover{ border-color: var(--green-3, #447466); color: var(--green, #21463b); }

/* ---------- 결과 머리줄 ---------- */
.zp-resulthead{
  display: flex; align-items: center; gap: 10px;
  padding: 2px 2px 0;
}
.zp-resulthead__count{ flex: 1 1 auto; font-size: 16px; font-weight: 800; color: var(--ink, #202421); }
.zp-resulthead__count b{ color: var(--red, #bb1730); }
.zp-resulthead__sort{
  flex: none; min-height: var(--h-sm); padding: 0 26px 0 10px;
  border: 0; background: transparent;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--muted, #777e79);
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23777e79' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}

/* ---------- 시공사례 카드 ---------- */
.zp-cards{ display: flex; flex-direction: column; gap: 12px; }

.zp-card{
  border: 1px solid var(--line, #e6e9e7); border-radius: var(--r-lg);
  background: #fff; overflow: hidden;
}
/* 지금 보고 있는 사례 — 목록에서 어디를 열었는지 잃지 않게 테두리로 표시(SC08) */
.zp-card.is-open{ border-color: var(--green-3, #447466); box-shadow: 0 0 0 1px var(--green-3, #447466) inset; }

.zp-card__body{
  display: grid; grid-template-columns: 124px minmax(0,1fr) 24px;
  gap: 12px; padding: 12px;
}
.zp-card__thumb{
  position: relative;
  width: 124px; aspect-ratio: 4 / 3;
  border-radius: 8px; background: var(--soft, #f5f6f5);
  overflow: hidden;
}
.zp-card__thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
/* 사진이 아직 없을 때 — 깨진 이미지 대신 글자로 알린다 */
.zp-card__thumb--none{ display: grid; place-items: center; color: #a7aeaa; font-size: 12px; }

.zp-card__main{ min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.zp-card__company{ display: flex; align-items: center; gap: 8px; min-width: 0; }
.zp-card__logo{
  flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--soft, #f5f6f5); color: var(--muted, #777e79); overflow: hidden;
}
.zp-card__logo img{ width: 100%; height: 100%; object-fit: cover; }
.zp-card__name{
  min-width: 0; font-size: 15px; font-weight: 800; color: var(--ink, #202421);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zp-card__title{
  font-size: 14px; color: var(--ink, #202421);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zp-card__meta{ font-size: 13px; color: var(--muted, #777e79); }
.zp-card__more{
  align-self: flex-end; margin-top: auto;
  display: inline-flex; align-items: center; gap: 3px;
  min-height: 32px;
  font-size: 13px; font-weight: 700; color: var(--green, #21463b);
  text-decoration: none; background: none; border: 0; cursor: pointer;
}
.zp-card__more:hover{ text-decoration: underline; }

/* 관심(하트) — 누르는 자리는 44, 보이는 상자는 24 */
.zp-card__like{
  position: relative; align-self: start;
  width: 24px; height: 24px; padding: 0;
  border: 0; background: none; color: #c3c9c5; cursor: pointer;
}
.zp-card__like::before{ content: ""; position: absolute; inset: -10px; }
.zp-card__like[aria-pressed="true"]{ color: var(--red, #bb1730); }
.zp-card__like[aria-pressed="true"] svg{ fill: currentColor; }

/* 연락 3버튼 */
.zp-card__actions{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 0 12px 12px;
}
.zp-act{
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--h-tap); padding: 0 6px;
  border: 1px solid var(--green-3, #447466); border-radius: var(--r-sm);
  transition: background .12s ease;
  background: #fff; color: var(--green, #21463b);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.zp-act:hover{ background: var(--green-soft, #edf5f2); }
.zp-act svg{ flex: none; }
/* 🔴 번호가 없으면 그 버튼을 아예 만들지 않는다(프로젝트 규칙: 자리표시 번호 금지).
   비활성으로 남겨 두면 눌러 보고 나서야 없다는 걸 알게 된다. */
.zp-card__actions[data-count="2"]{ grid-template-columns: repeat(2, 1fr); }
.zp-card__actions[data-count="1"]{ grid-template-columns: 1fr; }

.zp-listend{ padding: 6px 0 2px; font-size: 13px; color: var(--muted, #777e79); text-align: center; }

/* ---------- 아래 고정 요청 버튼 ---------- */
.zp-stickycta{
  position: sticky; bottom: 0; z-index: 5;
  /* 패널 좌우 여백만큼 바깥으로 나가 끝까지 채운다. 숫자를 다시 적지 않고
     패널이 쓰는 변수 그대로 쓴다 — 따로 적으면 폭에 따라 어긋난다. */
  margin: 8px calc(var(--zp-pane-px, 28px) * -1) -32px;
  padding: 12px var(--zp-pane-px, 28px) calc(16px + var(--z360-tabbar-space, 0px));
  background: #fff;
  border-top: 1px solid var(--line, #e6e9e7);
}
.zp-stickycta__note{
  margin: 8px 0 0; font-size: 13px; color: var(--muted, #777e79);
  text-align: center; word-break: keep-all;
}

/* ============================================================
   🔵 사례가 없을 때 — 부대표 확정 3단 (2026-09-16)
     ① 내 타입 사례
     ② 없으면 같은 단지 비슷한 평형대(±N평)를 시공한 업체를 추천
     ③ 같은 단지에도 없으면 단지 기본정보 + 지역/전국 업체
   막다른 화면을 만들지 않는다. **왜 없는지 + 대신 무엇을 보여주는지**를 함께 적는다.
   ============================================================ */
.zp-empty{
  padding: 20px 16px;
  border: 1px solid var(--line, #e6e9e7); border-radius: var(--r-lg);
  background: var(--green-soft, #edf5f2);
  word-break: keep-all;
}
.zp-empty__title{
  margin: 0; font-size: 15px; font-weight: 800; color: var(--green, #21463b);
  line-height: 1.5;
}
.zp-empty__desc{
  margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--green-2, #2f5c4e);
}
.zp-empty__desc b{ color: var(--green, #21463b); }
.zp-empty + .zp-resulthead{ margin-top: 4px; }

/* ---------- 모바일 ---------- */
@media (max-width: 768px){
  /* 모바일은 패널 좌우 여백이 16px 고정이라 변수도 그 값으로 내려온다 — 따로 적을 필요 없음 */
  .zp-card__body{ grid-template-columns: 104px minmax(0,1fr) 24px; }
  .zp-card__thumb{ width: 104px; }
  .zp-act{ font-size: 13px; gap: 4px; }
}
@media (max-width: 360px){
  .zp-card__body{ grid-template-columns: 88px minmax(0,1fr) 24px; gap: 10px; }
  .zp-card__thumb{ width: 88px; }
  /* 세 버튼이 한 줄에 들어가면 글자가 뭉개진다 — 아이콘만 남기지 말고 줄을 바꾼다 */
  .zp-card__actions{ grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .zp-act{ font-size: 12px; padding: 0 2px; }
}

/* ============================================================
   누르는 자리 넓히기 — 보이는 상자는 그대로 두고 ::before 로만 넓힌다
   ------------------------------------------------------------
   시안대로 그리면 '조건 변경'(36) · 정렬(36) · '포트폴리오 보기'(34) ·
   하트(24) 가 모두 44 보다 작다. 모양을 키우면 시안이 무너지므로
   **누르는 영역만** 키운다(공용 GNB 탭·탭바에서 쓰는 방식과 같다).
   ⚠️ 44 는 모바일 기준이다 — PC(마우스)에서는 시안 그대로 둔다.
   ============================================================ */
@media (max-width: 768px){
  .zp-crumb__btn,
  .zp-resulthead__sort,
  .zp-card__more{ position: relative; }
  /* 36 → 44 는 위아래 4px 씩, 34 → 44 는 5px 씩 */
  .zp-crumb__btn::before,
  .zp-resulthead__sort::before{ content: ""; position: absolute; inset: -2px -6px; }
  .zp-card__more::before{ content: ""; position: absolute; inset: -5px -8px; }
  /* select 는 ::before 를 만들 수 없다 — 높이를 직접 44 로 준다.
     글자 크기는 그대로라 시안과 차이가 거의 없다. */
  .zp-resulthead__sort{ min-height: var(--h-tap); }
}