/* ============================================================
   집테리어 — 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; }
}