/* ============================================================
   집테리어 — MY집테리어(view=my) · 파트너센터(view=partner)
   2026-09-16 디자인 총괄 · 시안 MY01~MY10 / PT01~PT19
   ------------------------------------------------------------
   둘 다 "내 요청/받은 요청을 줄줄이 본다"는 같은 모양이라 부품을 같이 둔다.
   손님 쪽(MY)과 업체 쪽(파트너센터)은 **보는 사람만 다르고 카드 구조는 같다.**
   ============================================================ */

/* ---------- 인사말 ---------- */
.zp-hello{
  display: grid; grid-template-columns: auto minmax(0,1fr); gap: 16px; align-items: start;
}
.zp-hello--plain{ grid-template-columns: minmax(0,1fr); }
.zp-hello__logo{
  display: grid; place-items: center; gap: 4px;
  width: 118px; padding: 14px 8px;
  border: 1px solid var(--line, #e6e9e7); border-radius: var(--r-md);
  background: #fff; text-align: center;
}
.zp-hello__logo img{ max-width: 100%; height: auto; }
.zp-hello__logo b{ font-size: 13px; font-weight: 800; color: var(--ink, #202421); }
.zp-hello__title{
  margin: 0; font-size: 25px; font-weight: 800; line-height: 1.35;
  letter-spacing: -.02em; color: var(--ink, #202421); word-break: keep-all;
}
.zp-hello__desc{
  margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted, #777e79);
  word-break: keep-all; text-wrap: pretty;
}

/* ---------- 밑줄 탭 (견적요청 / 상담 / 관심목록 / 임시저장) ---------- */
.zp-subtabs{
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--line, #e6e9e7);
  overflow-x: auto; scrollbar-width: none;
}
.zp-subtabs::-webkit-scrollbar{ display: none; }
.zp-subtab{
  position: relative; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--h-md); padding: 0 16px;
  border: 0; background: none;
  font: inherit; font-size: 15px; font-weight: 700; color: var(--muted, #777e79);
  white-space: nowrap; cursor: pointer;
}
.zp-subtab[aria-selected="true"]{ color: var(--green, #21463b); }
.zp-subtab[aria-selected="true"]::after{
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px;
  height: 3px; border-radius: 2px; background: var(--green, #21463b);
}

/* ---------- 상태 거르개 (새 요청 1 / 상담중 0 …) ---------- */
.zp-filters{ display: flex; flex-wrap: wrap; gap: 8px; }
.zp-filter{
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--h-md); padding: 0 16px;
  border: 1px solid var(--line, #e6e9e7); border-radius: var(--r-md);
  transition: background .12s ease, border-color .12s ease, color .12s ease;
  background: #fff; color: var(--ink, #202421);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.zp-filter__n{
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: var(--soft, #f5f6f5); color: var(--muted, #777e79);
  font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.zp-filter[aria-pressed="true"]{
  background: var(--green, #21463b); border-color: var(--green, #21463b); color: #fff;
}
.zp-filter[aria-pressed="true"] .zp-filter__n{ background: rgba(255,255,255,.22); color: #fff; }
/* 0 건인 거르개 — 숨기지 않는다. 없다는 것도 정보다. 대신 눌러도 빈 목록임을 알 수 있게 흐린다. */
.zp-filter[data-empty="true"]{ color: var(--muted, #777e79); }

/* ---------- 요청 카드 ---------- */
.zp-req{
  border: 1px solid var(--line, #e6e9e7); border-radius: var(--r-lg);
  background: #fff; padding: 18px;
}
.zp-req__top{ display: flex; align-items: center; gap: 8px; }
.zp-req__id{ font-size: 14px; font-weight: 700; color: var(--muted, #777e79); }
.zp-req__badge{
  padding: 3px 8px; border-radius: 999px;
  background: var(--red-soft, #fff2f4); color: var(--red, #bb1730);
  font-size: 12px; font-weight: 800;
}
.zp-req__date{ margin-left: auto; font-size: 13px; color: var(--muted, #777e79); font-variant-numeric: tabular-nums; }
.zp-req__name{ margin: 10px 0 0; font-size: 21px; font-weight: 800; color: var(--ink, #202421); word-break: keep-all; }
.zp-req__where{ margin: 4px 0 0; font-size: 15px; color: var(--muted, #777e79); }

.zp-req__hr{ height: 1px; margin: 16px 0; background: var(--line, #e6e9e7); border: 0; }

/* 정보 3열 (공사범위 / 예산 / 희망 공사일) — MY 쪽 */
.zp-req__cols{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; }
.zp-req__col{ padding: 0 14px; border-left: 1px solid var(--line, #e6e9e7); min-width: 0; }
.zp-req__col:first-child{ padding-left: 0; border-left: 0; }
.zp-req__col dt{ font-size: 13px; color: var(--muted, #777e79); }
.zp-req__col dd{ margin: 4px 0 0; font-size: 15px; font-weight: 800; color: var(--ink, #202421);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 정보 세로줄 (아이콘 + 라벨 + 값) — 파트너센터 쪽 */
.zp-req__rows{ display: flex; flex-direction: column; gap: 12px; margin: 0; }
.zp-req__row{ display: grid; grid-template-columns: 22px 104px minmax(0,1fr); gap: 10px; align-items: center; }
.zp-req__row > svg{ color: var(--green-3, #447466); }
.zp-req__row dt{ font-size: 14px; color: var(--muted, #777e79); }
.zp-req__row dd{ margin: 0; font-size: 14px; font-weight: 700; color: var(--ink, #202421); }
.zp-ways{ display: flex; flex-wrap: wrap; gap: 6px; }
.zp-way{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: 8px;
  background: var(--green-soft, #edf5f2); color: var(--green, #21463b);
  font-size: 13px; font-weight: 700;
}

/* 요청 업체 번호 칩 */
.zp-req__sub{ margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--ink, #202421); }
.zp-vendors{ display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.zp-vendor{
  padding: 10px 6px; border: 1px solid var(--line, #e6e9e7); border-radius: 10px;
  text-align: center; min-width: 0;
}
.zp-vendor b{ display: block; font-size: 14px; font-weight: 700; color: var(--muted, #777e79); font-variant-numeric: tabular-nums; }
.zp-vendor span{ display: block; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--ink, #202421);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 업체별 진행 현황 */
.zp-stats{ display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.zp-stat{
  padding: 12px 6px; border: 1px solid var(--line, #e6e9e7); border-radius: 10px;
  text-align: center; min-width: 0;
}
.zp-stat dt{ font-size: 12.5px; color: var(--muted, #777e79); word-break: keep-all; }
.zp-stat dd{ margin: 6px 0 0; font-size: 21px; font-weight: 800; color: var(--green, #21463b); font-variant-numeric: tabular-nums; }
/* 눌러서 열 수 있는 칸(견적서 N건)은 눌러 보이게 만든다 */
.zp-stat--link{
  display: grid; grid-template-columns: auto minmax(0,1fr) 12px; align-items: center; gap: 8px;
  text-align: left; background: var(--green-soft, #edf5f2); border-color: var(--green-soft, #edf5f2);
  color: var(--green, #21463b); text-decoration: none; cursor: pointer;
}
.zp-stat--link b{ font-size: 13px; font-weight: 700; }
.zp-stat--link strong{ font-size: 17px; font-weight: 800; }

/* 카드 안 큰 버튼 */
.zp-req .zp-cta{ margin-top: 16px; }

/* 보조 버튼(새 요청 만들기) */
.zp-ghost{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: var(--h-lg);
  border: 1px solid var(--green-3, #447466); border-radius: var(--r-md);
  transition: background .12s ease;
  background: #fff; color: var(--green, #21463b);
  font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
}
.zp-ghost:hover{ background: var(--green-soft, #edf5f2); }

.zp-total{ margin: 2px 0 0; font-size: 13.5px; color: var(--muted, #777e79); text-align: center; }

/* ---------- 모바일 ---------- */
@media (max-width: 768px){
  .zp-hello__title{ font-size: 22px; }
  .zp-req{ padding: 16px 14px; }
  .zp-req__name{ font-size: 19px; }
  .zp-req__row{ grid-template-columns: 22px 88px minmax(0,1fr); }
}
@media (max-width: 360px){
  /* 3열이 320 에서 글자를 자른다 — 2열로 흘린다 */
  .zp-req__cols{ grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 14px; }
  .zp-req__col:nth-child(3){ padding-left: 0; border-left: 0; }
  .zp-req__row{ grid-template-columns: 22px minmax(0,1fr); }
  .zp-req__row dt{ grid-column: 2; }
  .zp-req__row dd{ grid-column: 2; }
}

/* ============================================================
   🔴 아주 좁은 폰(≤360): 하위 탭을 **가로 스크롤로 숨기지 않는다**
   ------------------------------------------------------------
   320 실측에서 탭 4개가 칸을 넘어 옆으로 밀려났다. 이 프로젝트는 스크롤바를
   전역으로 감추기 때문에 **'옆에 더 있다'는 표시가 전혀 없다** —
   집팔고 지도 레일에서 똑같은 문제를 지적해 놓고 여기서 반복할 수 없다.
   탭은 네 개뿐이라 두 줄로 흘리면 전부 보인다.
   ============================================================ */
@media (max-width: 360px){
  .zp-subtabs{ flex-wrap: wrap; overflow: visible; }
  .zp-subtab{ flex: 1 0 auto; padding: 0 10px; font-size: 14px; }
  /* 두 줄이 되면 아래 테두리가 가운데를 지나가므로, 줄마다 밑줄이 붙도록
     선택 표시를 탭 자신의 아래쪽에 붙인다(원래도 그렇지만 위치만 보정). */
  .zp-subtab[aria-selected="true"]::after{ bottom: 0; }
}

/* ============================================================
   MY집테리어 새 화면(js/zp-my.js) — 2026-10-10 집테리어 세션
   ------------------------------------------------------------
   위쪽의 .zp-hello · .zp-subtab · .zp-req · .zp-stat · .zp-vendor · .zp-filter · .zp-ghost 는 09-16 시안 작업 때 만든 것을 그대로 쓰고,
   아래는 그 밖에 필요한 조각(.zpm-*)만 더한다. 색·높이·모서리는 기존 변수(--green·--line·--h-md·--r-md …)만 쓴다.
   상세·상담은 PC(≥1100)에서 **왼쪽 칸 하나를 두 갈래로 나눠** 보여 준다(시안 MY03·MY07의 가운데 칸).
   칸을 새로 만들어 3단이 되지 않는다 — 전 서비스 규칙(최대 2단: 왼쪽 칸 + 지도)을 지킨다.
   ============================================================ */
.zpm{ display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.zpm .zp-cta, .zpm .zp-ghost{ width: 100%; }
.zpm-linkcta{ display: flex; align-items: center; justify-content: center; text-decoration: none; margin-top: 8px; }
.zpm-note{ margin: 0; padding: 18px 8px; text-align: center; font-size: 14px; color: var(--muted, #777e79); }
.zpm-fine{ margin: -8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted, #777e79); text-align: center; }
.zpm-legacy{ margin: 4px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted, #777e79); text-align: center; }
.zpm-legacy a, .zpm-say__body a{ color: var(--green, #21463b); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.zpm-count{ margin: 2px 0 -6px; font-size: 16px; font-weight: 800; color: var(--ink, #202421); }
.zpm-count b{ color: var(--green, #21463b); }
.zpm-info{ display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--green-soft, #edf5f2); color: var(--green, #21463b); font-size: 14px; font-weight: 600; }
.zpm-info svg{ flex: none; }
.zpm-link{ display: block; margin: 12px auto 0; padding: 6px 10px; border: 0; background: none; color: var(--muted, #777e79); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.zpm-sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zpm-minititle{ display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.zpm-minititle small{ font-size: 16px; font-weight: 700; color: var(--muted, #777e79); }

/* 안 읽은 표시 */
.zpm-dot{ display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: var(--red, #bb1730); color: #fff; font-size: 11px; font-weight: 800; font-style: normal; font-variant-numeric: tabular-nums; vertical-align: 2px; }

/* 되돌아가는 줄 */
.zpm-back{ display: inline-flex; align-items: center; align-self: flex-start; gap: 4px; min-height: var(--h-sm); padding: 0 6px 0 0; border: 0; background: none; color: var(--muted, #777e79); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.zpm-back:hover{ color: var(--green, #21463b); }

/* 목록 카드 */
.zpm-reqs{ display: flex; flex-direction: column; gap: 14px; }
.zp-vendors{ margin: 0; padding: 0; list-style: none; }
.zpm-vendor-more b{ color: var(--green, #21463b); }

/* 요청 상세 위 요약 */
.zpm-sum{ display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; align-items: end; padding: 16px; border-radius: var(--r-lg); background: var(--green-soft, #edf5f2); }
.zpm-sum__id{ margin: 0; font-size: 13px; color: var(--muted, #777e79); font-weight: 600; }
.zpm-sum__name{ margin: 4px 0 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--ink, #202421); }
.zpm-sum__where{ margin: 4px 0 0; font-size: 14px; color: var(--ink, #202421); opacity: .75; }
.zpm-sum__cond{ display: inline-flex; align-items: center; gap: 4px; min-height: var(--h-sm); padding: 0 2px; border: 0; background: none; color: var(--green, #21463b); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.zpm-sum__cond[aria-expanded="true"] svg{ transform: rotate(90deg); }
.zpm-cond{ padding: 14px 16px; border: 1px solid var(--line, #e6e9e7); border-radius: var(--r-lg); background: #fff; }
.zpm-cond dl{ display: grid; gap: 10px; margin: 0; }
.zpm-cond dl > div{ display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 10px; }
.zpm-cond dt{ font-size: 14px; color: var(--muted, #777e79); }
.zpm-cond dd{ margin: 0; font-size: 14px; font-weight: 700; color: var(--ink, #202421); word-break: break-all; }
.zpm-cond__memo{ margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line, #e6e9e7); font-size: 14px; line-height: 1.6; color: var(--ink, #202421); }
.zpm-cond__memo b{ display: block; margin-bottom: 4px; font-size: 13px; color: var(--muted, #777e79); }

/* 응답 거르개 — 네 칸이 한 줄에 */
.zpm-filters{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
.zpm-filters .zp-filter{ justify-content: center; gap: 5px; padding: 0 4px; font-size: 14px; white-space: nowrap; }

/* 업체 카드 */
.zpm-cos{ display: flex; flex-direction: column; gap: 12px; }
.zpm-co{ border: 1px solid var(--line, #e6e9e7); border-radius: var(--r-lg); background: #fff; overflow: hidden; }
.zpm-co[aria-current="true"]{ border-color: var(--green-3, #447466); box-shadow: 0 0 0 1px var(--green-3, #447466) inset; }
.zpm-co__head{ display: grid; grid-template-columns: auto minmax(0,1fr); grid-template-areas: "logo main" "logo more"; column-gap: 12px; row-gap: 2px; align-items: center; padding: 14px 14px 10px; }
.zpm-co__logo{ grid-area: logo; display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid var(--line, #e6e9e7); border-radius: var(--r-md); background: #fff; overflow: hidden; color: var(--muted, #777e79); }
.zpm-co__logo--lg{ width: 72px; height: 72px; }
.zpm-co__logo .zp-card__logo{ display: grid; place-items: center; width: 100%; height: 100%; }
.zpm-co__logo img{ width: 100%; height: 100%; object-fit: contain; }
.zpm-co__logo svg{ width: 28px; height: 28px; }
.zpm-co__main{ grid-area: main; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.zpm-co__name{ font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--ink, #202421); }
.zpm-co__more{ grid-area: more; justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: var(--h-sm); padding: 0; border: 0; background: none; color: var(--green, #21463b); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.zpm-co .zp-card__actions{ padding-top: 2px; }
.zpm-chip{ display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.zpm-chip--in{ background: var(--green-soft, #edf5f2); color: var(--green, #21463b); }
.zpm-chip--no{ background: #e9ecea; color: #4d544f; }
.zpm-chip--none{ background: #fff; border: 1px solid var(--line, #e6e9e7); color: var(--muted, #777e79); }

/* 업체 응답 */
.zpm-resp{ display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.zpm-resp--empty{ justify-content: center; min-height: 40vh; }
.zpm-resp__head{ display: flex; align-items: center; gap: 14px; }
.zpm-resp__name{ margin: 0 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--ink, #202421); }
.zpm-resp__sec{ display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line, #e6e9e7); }
.zpm-resp__sec h3{ margin: 0; font-size: 17px; font-weight: 800; color: var(--ink, #202421); }
.zpm-resp__sec time{ font-size: 13px; color: var(--muted, #777e79); font-variant-numeric: tabular-nums; }
.zpm-say{ padding: 18px; border-radius: var(--r-lg); background: var(--green-soft, #edf5f2); }
.zpm-say--no{ background: #eceeed; }
.zpm-say--none{ background: var(--soft, #f5f6f5); }
.zpm-say__title{ margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--ink, #202421); }
.zpm-say__body{ margin: 10px 0 0; font-size: 15px; line-height: 1.65; color: var(--ink, #202421); }
.zpm-say__sub{ margin: 8px 0 0; font-size: 13px; color: var(--muted, #777e79); }
.zpm-resp__go{ display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }

/* PC: 왼쪽 칸을 두 갈래로 */
.zpm-split{ display: block; }
@media (min-width: 1100px){
  html[data-zp-view="my"][data-zpm-wide] .app > .zp-pane{ flex: 0 0 min(900px, 66vw); padding: 0; gap: 0; }
  .zpm-split{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); min-height: 100%; }
  .zpm-col{ display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 24px 22px 32px; }
  .zpm-col--b{ border-left: 1px solid var(--line, #e6e9e7); background: #fff; }
}

/* 상담 */
.zpm-listhead{ display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.zpm-listhead h2{ margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.zpm-listhead span{ font-size: 13px; color: var(--muted, #777e79); }
.zpm-ths{ display: flex; flex-direction: column; gap: 8px; }
.zpm-th{ display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 12px; border: 1px solid var(--line, #e6e9e7); border-radius: var(--r-lg); background: #fff; font: inherit; text-align: left; cursor: pointer; }
.zpm-th[aria-current="true"]{ border-color: var(--green-3, #447466); background: var(--green-soft, #edf5f2); }
.zpm-th .zpm-co__logo{ width: 48px; height: 48px; }
.zpm-th__main{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zpm-th__main b{ font-size: 16px; font-weight: 800; color: var(--ink, #202421); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zpm-th__pv{ font-size: 13.5px; color: var(--muted, #777e79); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zpm-th__meta{ display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.zpm-th__meta time{ font-size: 12.5px; color: var(--muted, #777e79); font-variant-numeric: tabular-nums; }
.zpm-conv{ display: flex; flex-direction: column; min-width: 0; height: calc(100vh - var(--z360-gnb-h, 80px) - var(--zp-viewtabs-h, 49px) - 24px); min-height: 360px; }
.zpm-conv--empty{ justify-content: center; }
.zpm-conv__head{ display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line, #e6e9e7); }
.zpm-conv__head .zpm-back{ align-self: center; }
.zpm-conv__title{ flex: 1; min-width: 0; }
.zpm-conv__title h2{ margin: 0; font-size: 18px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zpm-conv__btn{ display: inline-flex; align-items: center; gap: 5px; min-height: var(--h-sm); padding: 0 12px; border: 1px solid var(--green-3, #447466); border-radius: var(--r-sm); background: #fff; color: var(--green, #21463b); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.zpm-msgs{ flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px 4px; margin: 0 -4px; background: var(--soft, #f5f6f5); border-radius: var(--r-md); padding-inline: 12px; margin-top: 12px; overscroll-behavior: contain; }
.zpm-day{ align-self: center; margin: 6px 0; }
.zpm-day span{ display: inline-block; padding: 4px 14px; border-radius: 999px; background: #fff; font-size: 12.5px; color: var(--muted, #777e79); }
.zpm-sys{ align-self: center; font-size: 12.5px; color: var(--muted, #777e79); }
.zpm-msg{ display: flex; align-items: flex-end; gap: 6px; max-width: 86%; }
.zpm-msg time{ font-size: 11.5px; color: var(--muted, #777e79); font-variant-numeric: tabular-nums; white-space: nowrap; }
.zpm-msg--me{ align-self: flex-end; flex-direction: row-reverse; }
.zpm-bub{ display: flex; flex-direction: column; gap: 6px; padding: 10px 13px; border-radius: 14px; background: #fff; font-size: 15px; line-height: 1.55; color: var(--ink, #202421); word-break: break-word; white-space: normal; }
.zpm-msg--me .zpm-bub{ background: var(--green-3, #447466); color: #fff; border-bottom-right-radius: 4px; }
.zpm-msg--co .zpm-bub{ border-bottom-left-radius: 4px; }
.zpm-bub img{ max-width: 220px; width: 100%; border-radius: 10px; display: block; }
.zpm-send{ display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 8px; align-items: center; padding-top: 12px; }
.zpm-send__plus{ position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line, #e6e9e7); border-radius: var(--r-md); background: #fff; font-size: 24px; color: var(--green, #21463b); cursor: pointer; }
.zpm-send__in{ min-width: 0; min-height: 44px; padding: 0 14px; border: 1px solid var(--line, #e6e9e7); border-radius: var(--r-md); font: inherit; font-size: 15px; color: var(--ink, #202421); background: #fff; }
.zpm-send__in:focus{ outline: none; border-color: var(--green-3, #447466); box-shadow: var(--zp-focus); }
.zpm-send__go{ min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-md); background: var(--red, #bb1730); color: #fff; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.zpm-send__go:disabled{ background: #c9cfcb; cursor: not-allowed; }

/* 모바일 */
@media (max-width: 768px){
  .zpm-conv{ height: calc(100vh - var(--z360-gnb-h, 101px) - var(--z360-tabbar-space, 0px) - 44px); }
  .zpm-cond dl > div{ grid-template-columns: 96px minmax(0,1fr); }
  .zpm-co__name{ font-size: 16px; }
  .zpm-sum__name{ font-size: 18px; }
}
@media (max-width: 360px){
  .zpm-filters{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .zpm-sum{ grid-template-columns: 1fr; }
}

/* 폭이 좁은 왼쪽 칸(400)에서도 네 탭·3열 정보·업체 칩이 잘리지 않게 */
.zpm .zp-subtabs{ gap: 0; }
.zpm .zp-subtab{ flex: 1 1 0; min-width: 0; padding: 0 4px; font-size: 14.5px; }
.zpm .zp-vendors{ grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.zpm .zp-req__col{ padding: 0 10px; }
.zpm .zp-req__col dd{ font-size: 14px; white-space: normal; overflow: visible; text-overflow: clip; word-break: keep-all; }
.zpm-th .zpm-co__logo{ grid-area: auto; }
/* PC 에서는 목록이 바로 왼쪽에 있으니 응답 칸의 「업체 목록으로」는 감춘다(좁은 화면에서만 쓴다) */
@media (min-width: 1100px){ .zpm-resp > .zpm-back, .zpm-resp__go .zp-ghost{ display: none; } }
.zpm-resp .zp-card__actions{ padding: 0; }