/* 포트폴리오 상세 (detail_view = portfolio) */
.pf-view{max-width:1100px;margin:0 auto}

.pf-view__head{text-align:center;max-width:720px;margin:0 auto 48px}
.pf-view__cat{
  display:inline-block;
  padding:6px 14px;
  font-size:13px;font-weight:700;
  color:var(--c-primary);
  background:var(--c-primary-l);
  border-radius:999px;
}
.pf-view__title{margin-top:16px;font-size:var(--fs-h2);font-weight:800;letter-spacing:-.03em;line-height:1.3}
.pf-view__desc{margin-top:14px;font-size:17px;color:var(--c-text-sub);line-height:1.7}
.pf-view__body{margin-top:14px;font-size:16px;color:var(--c-text-sub);line-height:1.8}
.pf-view__body p{margin:0}
.pf-view__body p + p{margin-top:8px}
.pf-view__site{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:24px;
  padding:12px 22px;
  font-weight:700;font-size:15px;
  color:#fff;
  background:var(--c-text);
  border-radius:var(--btn-radius);
  transition:var(--tr);
}
.pf-view__site:hover{background:var(--c-primary)}

/* 브라우저 틀 */
.pf-view__browser{
  overflow:hidden;
  border:1px solid var(--c-line);
  border-radius:16px;
  background:#fff;
  box-shadow:0 30px 80px rgba(15,23,42,.12);
}
.pf-view__bar{
  display:flex;align-items:center;gap:7px;
  height:40px;padding:0 16px;
  background:#f3f4f6;
  border-bottom:1px solid var(--c-line);
}
.pf-view__bar i{width:11px;height:11px;border-radius:50%;background:#d1d5db}
.pf-view__bar i:nth-child(1){background:#ff5f57}
.pf-view__bar i:nth-child(2){background:#febc2e}
.pf-view__bar i:nth-child(3){background:#28c840}
.pf-view__url{
  flex:1;max-width:360px;margin:0 auto;
  padding:4px 12px;
  font-size:12px;text-align:center;color:var(--c-text-mute);
  background:#fff;border-radius:6px;
  transform:translateX(-24px);
}

/* 화면 — 높이를 고정하고 안에서 스크롤. 마우스를 올리면 끝까지 천천히 내려간다 */
.pf-view__screen{
  position:relative;
  height:min(70vh,680px);
  overflow:hidden;
}
.pf-view__screen img{
  display:block;width:100%;height:auto;
  transform:translateY(0);
  transition:transform 6s ease-in-out;
}
@media (hover:hover){
  .pf-view__screen:hover img{transform:translateY(calc(-100% + min(70vh,680px)))}
}
@media (hover:none){
  .pf-view__screen{overflow-y:auto;-webkit-overflow-scrolling:touch}
}

.pf-view__nav{
  display:flex;justify-content:space-between;gap:16px;
  margin-top:48px;padding-top:24px;
  border-top:1px solid var(--c-line);
}
.pf-view__nav a{display:flex;flex-direction:column;gap:4px;font-weight:700}
.pf-view__nav a:last-child{text-align:right;margin-left:auto}
.pf-view__nav span{font-size:13px;font-weight:500;color:var(--c-text-mute)}
.pf-view__nav a:hover{color:var(--c-primary)}

.pf-view__cta{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-top:40px;
  padding:28px 32px;
  background:var(--c-bg-alt);
  border-radius:var(--radius-lg);
}
.pf-view__cta strong{font-size:18px}
.pf-view__cta a{
  flex:none;
  padding:14px 26px;
  font-weight:700;
  color:#fff;
  background:var(--c-primary);
  border-radius:var(--btn-radius);
}

@media (max-width:768px){
  .pf-view__title{font-size:28px}
  .pf-view__screen{height:60vh}
  .pf-view__url{transform:none}
  .pf-view__cta{flex-direction:column;align-items:flex-start}
  .pf-view__cta a{width:100%;text-align:center}
}