/*
  포트폴리오 작성 위젯 — resume-builder.css의 .rb-lightbox 변수·클래스를 그대로 재사용하고,
  시공 사례 카드(사진+텍스트) 레이아웃만 여기서 추가한다.
*/

.pf-case{
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid var(--rb-line); padding: 14px; margin-bottom: 14px;
  position: relative;
}

.pf-case-photo{
  flex: 0 0 auto; width: 140px; height: 140px;
  border: 1px solid var(--rb-line-strong);
  background: var(--rb-paper-2);
  display: flex; align-items: center; justify-content: center;
  text-align: center; cursor: pointer; position: relative; overflow: hidden;
}
.pf-case-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-case-photo:hover{ border-color: var(--rb-brass-500); }

.pf-case-fields{ flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; padding-right: 28px; }
.pf-case-title{
  border: 1px solid var(--rb-line-strong); padding: 8px 10px;
  font-family: inherit; font-size: 0.9rem; font-weight: 700; color: var(--rb-ink-900);
}
.pf-case-title:focus{ outline: 1.5px solid var(--rb-brass-500); }
.pf-case-desc{
  min-height: 90px; box-sizing: border-box; resize: vertical;
  border: 1px solid var(--rb-line-strong); border-radius: 2px;
  font-family: inherit; font-size: 0.84rem; line-height: 1.6; color: var(--rb-ink-900);
  padding: 8px 10px;
}
.pf-case-desc:focus{ outline: 1.5px solid var(--rb-brass-500); }

.pf-case-del{
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--rb-line-strong);
  background: var(--rb-paper); color: var(--rb-stone-500);
  cursor: pointer; font-size: 0.95rem; line-height: 1;
}
.pf-case-del:hover{ color: #b13d2f; border-color: #b13d2f; }

@media (max-width: 720px){
  .pf-case{ flex-direction: column; }
  .pf-case-photo{ width: 100%; height: 160px; }
  .pf-case-fields{ padding-right: 0; }
}

@media print{
  .pf-case{ break-inside: avoid; }
  .pf-case-del{ display: none !important; }
}