/* ============================================================
   집테리어 — 우리집 시공사례 (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(--green-soft, #edf5f2);
  border-bottom: 1px solid var(--line, #e6e9e7);
  font-size: 13px; font-weight: 700; color: var(--green-2, #2f5c4e);
}
/* 결과가 있을 때는 상자 테두리도 초록 — 아래 평형·타입 칸(회색 테두리)과 구별되게.
   2026-10-15 직원 점검 제안(2bef1b)·부대표 「바꿔」 */
.zp-ac:has(.zp-ac__item){ border: 2px solid var(--green-3, #447466); }
.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); }
}

/* 🔴 09-17 실측 수정 — 모바일에서 아래 고정바와 탭바 사이에 24px 틈이 생겨 내용이 비쳤다.
   원인: 탭바 자리를 **두 번** 뺐다. `.zp-pane` 의 padding-bottom(24px + 탭바)에 고정바가 sticky 로 얹히는데,
   고정바 자신도 padding-bottom 에 탭바를 또 넣었다. 고정바가 그 패딩만큼 내려가도록 margin 을 맞춘다.
   (1단계부터 있던 문제 — 견적 화면을 폰에서 끝까지 스크롤하다 드러났다) */
@media (max-width: 768px){
  .zp-stickycta{
    /* sticky 의 bottom:0 은 스크롤 칸의 **패딩 안쪽**을 기준으로 잡는다 → margin 만으로는 안 내려간다.
       실측(375): bottom 을 패딩만큼 음수로 주면 바가 화면 맨 아래에 붙고, 바 자신의 padding-bottom(14+탭바)이
       버튼을 탭바 위 14px 에 놓는다. 틈 0. */
    bottom: calc((24px + var(--z360-tabbar-space, 0px)) * -1);
    margin-bottom: calc((24px + var(--z360-tabbar-space, 0px)) * -1);
  }
}

/* 10-19 2차 점검 직원 의견 0e24c6·9025c7(점검-060): PC 에서 아래 고정 바(인테리어업체·시공사례의 「무료 견적요청」, 무료견적신청의 「다음 · 업체 선택」·「N곳에 견적 요청」) 밑으로 32px 틈이 생겨 뒤 내용이 비쳤다.
   원인은 위 09-17 휴대폰 고침과 같다 — sticky 의 bottom:0 은 스크롤 칸(.zp-pane)의 패딩 안쪽 기준이라 패널 padding-bottom(32px)만큼 떠 있다.
   실측(1440×900): 인테리어업체 목록·무료견적신청 둘 다 틈 32 → bottom:-32px 이면 맨 위·중간·맨 끝 모두 틈 0, 마지막 카드는 바 위에서 끝남.
   .zp-bottombar 는 zp-flow.css 에 있어 읽는 순서와 상관없게 .zp-pane 를 앞에 붙인다(휴대폰 768 이하 규칙은 그대로). */
@media (min-width: 769px){
  .zp-pane .zp-stickycta,
  .zp-pane .zp-bottombar{ bottom: -32px; }
}

/* 디자인-027 10-23(📮 김정훈-72 · 김정훈 팀장 업체 카드 ② · 김정훈 팀장 14:20 「포폴 상세 · 시공사례 포폴 카드 단추도 똑같이」): 연락 단추 한 꼴 — 이 덩어리 한 곳이 세 곳을 같이 정함
   ㉠ 업체 카드 .zp-card[data-cid](우리집시공사례 아래 업체 · 인테리어업체 우리집 · 우리지역 · 전국 · MY 관심 업체)
   ㉡ 시공사례 카드 .zp-card[data-pid](우리집시공사례 목록 · MY 관심 시공사례)
   ㉢ 포폴 상세 업체 칸 #designerCard .designer-actions(전화 · 문자 · 「채팅」)
   = 작은 채운 둥근 단추 · 전화 · 문자 진한 초록 · 채팅 빨강 · 그림 없이 글만 · 높이 32px(휴대폰 · 360 도) · 오른쪽으로 모음.
   옛 규칙(이 파일 「연락 3버튼」 · style.css .portfolio-contact · 휴대폰 두 칸 · app.js zt-pfc-1015 44px · zp-touch-target 44px)보다 앞서게 #id · 속성 선택자로 */
.zp-card[data-cid] > .zp-card__actions,
.zp-card[data-pid] > .zp-card__actions{ display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; padding: 0 12px 12px; }
#designerCard .designer-actions{ display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.zp-card[data-cid] .zp-act,
.zp-card[data-pid] .zp-act,
#designerCard .designer-actions .portfolio-contact:not([hidden]),
#designerCard .designer-actions .portfolio-chat-button:not([hidden]){
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  width: auto; min-height: 32px; margin: 0; padding: 0 14px;
  border: 0; border-radius: 9px;
  background: var(--green, #21463b); color: #fff;
  font-size: 13px; font-weight: 800; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.zp-card[data-cid] .zp-act[data-chat], .zp-card[data-cid] .zp-act[data-my-chat],
.zp-card[data-pid] .zp-act[data-chat], .zp-card[data-pid] .zp-act[data-my-chat],
#designerCard .designer-actions .portfolio-chat-button:not([hidden]){ background: var(--red, #bb1730); }
.zp-card[data-cid] .zp-act:hover, .zp-card[data-pid] .zp-act:hover,
#designerCard .designer-actions .portfolio-contact:not([hidden]):hover,
#designerCard .designer-actions .portfolio-chat-button:not([hidden]):hover{ filter: brightness(1.15); }
.zp-card[data-cid] .zp-act svg, .zp-card[data-pid] .zp-act svg{ display: none; }
/* 폭마다 따로 줄이지 않음 — 360 폭에서도 세 단추가 한 줄에 들어감(카드 · 포폴 상세 업체 칸 실측) · 안 들어가면 다음 줄로(flex-wrap) */

/* 디자인-035 10-26(📮 김정훈-87 · 팀장님 09:24 「②」): 업체 소개 화면(#companyProfileLocation) 연락 단추 = 위 「디자인-027 10-23」 카드 단추와 같은 꼴 · PC · 휴대폰 같게
   휴대폰에서 오른쪽 아래 떠 있던 둥근 단추(style.css 「mobile floating contact buttons」 · 연락하기 띠)를 없애고 주소 칸 아래 한 줄로.
   옛 규칙(style.css .company-contact · .company-contact-actions a/.company-chat-button 의 58px 원 · padding:0!important · font-size:0 · ::after 「채팅문의」)보다 앞서게 #id 로 */
#companyProfileLocation .company-contact{
  position: static; inset: auto; z-index: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: auto; min-height: 0; margin: 10px 0 0; padding: 10px 0 0;
  border: 0; border-top: 1px solid #dce7e1; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
#companyProfileLocation .company-contact > b{
  display: block; flex: none; align-self: auto; padding: 0; border-radius: 0; background: none; color: inherit; font-size: 14px; line-height: 1.3; text-align: left;
}
#companyProfileLocation .company-contact > b::before,
#companyProfileLocation .company-contact > b::after{ content: none; display: none; }
#companyProfileLocation .company-contact-actions{
  display: flex; flex: 1 1 auto; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; width: auto; max-width: none; min-width: 0;
}
#companyProfileLocation .company-contact-actions .zt-co-contact,
#companyProfileLocation .company-contact-actions .company-chat-button{
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; order: 0; flex: none;
  width: auto; height: auto; min-height: 32px; margin: 0; padding: 0 14px !important;
  border: 0; border-radius: 9px; box-shadow: none;
  background: var(--green, #21463b); color: #fff;
  font-size: 13px; font-weight: 800; line-height: 1 !important; text-decoration: none; white-space: nowrap; cursor: pointer;
}
#companyProfileLocation .company-contact-actions .company-chat-button{ background: var(--red, #bb1730); }
#companyProfileLocation .company-contact-actions .company-chat-button::after,
#companyProfileLocation .company-contact-actions .zt-co-contact::before{ content: none; display: none; }
#companyProfileLocation .company-contact-actions .zt-co-contact:hover,
#companyProfileLocation .company-contact-actions .company-chat-button:hover{ filter: brightness(1.15); }
/* 집테-060 10-28 아파트 사진(부대표 15:03): 아파트 목록 — 왼쪽 아이콘 대신 아파트 사진 · 검색된 단지 전부를 상자 안에서 스크롤 */
.zp-ac__mark--img{ background: none; overflow: hidden; padding: 0; }
.zp-ac__mark--img img{ display: block; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
/* 집테-060 10-28 페이지로 내려 보기(부대표 15:18): 목록 안 스크롤(상하 · 좌우) 없음 — 다 펼치고 페이지를 내려서 봄 */
.zp-ac__list{ max-height: none; overflow: visible; }
.zp-ac__item{ min-width: 0; max-width: 100%; }
/* 집테-060 10-28 긴 이름(부대표 15:51 · 갈래 1): 이름 · 주소 한 줄 + 말줄임 — 모든 줄 같은 높이 · 전체 이름은 마우스 올림(title) · 고른 아파트 칸 */
.zp-ac__item > span:nth-child(2){ min-width: 0; }   /* 가운데 칸이 grid 칸 너비를 넘지 않게(이게 빠져 긴 이름이 칸 밖으로 나갔음) */
.zp-ac__item .zp-ac__name, .zp-ac__item .zp-ac__addr{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zp-ac__item{ height: 64px; }