/* ----------------------------------------
   프로젝트 상세 페이지
---------------------------------------- */

/* 상단 요약 */
.detail-summary{max-width:720px; margin:0 auto; text-align:center; font-size:16px; line-height:1.7; color:#555;}
.detail-tags{display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:24px;}
.detail-tags > span{padding:6px 14px; border-radius:999px; background-color:#fff; border:1px solid #dbe4ec; font-size:14px; font-weight:500; color:#187ED1;}

/* 상단 대표 화면 */
.detail-hero{max-width:900px; margin:40px auto 0;}
.detail-hero .shot-frame{max-height:520px;}
.detail-hero.is-device{display:flex; justify-content:center; max-width:none;}

/* 세로형 디바이스 프레임 (phone / kiosk) */
.device-frame{
  position:relative;
  flex:0 0 auto;
  padding:10px;
  background:#1a1a1a;
  box-shadow:0 12px 40px rgba(0,0,0,0.18);
}
.device-frame.device-phone{
  width:min(280px, 72vw);
  border-radius:36px;
}
.device-frame.device-kiosk{
  width:min(260px, 70vw);
  border-radius:18px;
  padding:14px 12px;
  background:#2a2e33;
}
.device-screen{
  overflow:hidden;
  background:#fff;
  line-height:0;
}
.device-phone .device-screen{border-radius:26px;}
.device-kiosk .device-screen{border-radius:8px;}
.device-screen img{display:block; width:100%; height:auto;}

.detail-screens.is-device-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:28px;
  max-width:900px;
}

/* 개요 + 기여도 2단 */
.detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
.detail-grid h4{font-size:20px; font-weight:700; margin-bottom:20px;}
.detail-grid h4::after{content:''; display:inline-block; width:7px; height:7px; margin-left:6px; background-color:#187ED1; border-radius:2px;}

/* 프로젝트 정보 표 */
.detail-meta{width:100%; border-top:2px solid #333;}
.detail-meta th{width:110px; padding:14px 8px; text-align:left; font-size:15px; font-weight:600; border-bottom:1px solid #e5e5e5; vertical-align:top;}
.detail-meta td{padding:14px 8px; font-size:15px; color:#555; border-bottom:1px solid #e5e5e5;}
.detail-meta a{color:#187ED1; font-weight:500; text-decoration:underline; text-underline-offset:3px;}

/* 기여도 차트 */
.contrib-list{display:flex; flex-direction:column; gap:20px;}
.contrib-item .contrib-label{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px;}
.contrib-item .contrib-label > span{font-size:15px; font-weight:600;}
.contrib-item .contrib-label > em{font-style:normal; font-size:15px; font-weight:700; color:#187ED1;}
.contrib-bar{width:100%; height:10px; background-color:#EFF2F4; border-radius:999px; overflow:hidden;}
.contrib-bar > span{display:block; width:0; height:100%; background:linear-gradient(90deg, #3B91D7, #187ED1); border-radius:999px; transition:width 1.2s cubic-bezier(0.25, 1, 0.5, 1);}

/* 주요 작업 */
.detail-tasks{max-width:800px; margin:0 auto;}
.detail-tasks li{position:relative; padding:16px 8px 16px 36px; font-size:15px; line-height:1.6; color:#444; border-bottom:1px solid #e5e5e5;}
.detail-tasks li::before{content:''; position:absolute; left:8px; top:22px; width:14px; height:14px; background-color:#187ED1; border-radius:4px; opacity:0.15;}
.detail-tasks li::after{content:''; position:absolute; left:12px; top:26px; width:6px; height:6px; background-color:#187ED1; border-radius:2px;}

/* 화면 미리보기 (세로로 긴 캡처 → 스크롤 프레임) */
.detail-screens{display:grid; grid-template-columns:1fr; gap:24px; max-width:1000px; margin:0 auto;}
.detail-screens.cols2{grid-template-columns:1fr 1fr;}
.shot-frame{border:1px solid #e0e0e0; border-radius:12px; overflow-y:auto; max-height:640px; background-color:#fff; box-shadow:0 4px 20px rgba(0,0,0,0.06);}
.shot-frame img{display:block; width:100%;}
.shot-frame::-webkit-scrollbar{width:8px;}
.shot-frame::-webkit-scrollbar-thumb{background-color:#c9d4dd; border-radius:4px;}
.screens-hint{margin-top:16px; text-align:center; font-size:13px; color:#999;}

/* 목록으로 — footer 직전, 모션 없이 안정적으로 */
.detail-back-section{background-color:#fff; padding:48px 0 72px;}
.detail-back{display:flex; justify-content:center; margin:0;}

/* 추가 화면 섹션이 비면 통째로 숨김 (JS) */
.detail-screens-section.is-empty{display:none;}

@media screen and (max-width: 900px) {
    .detail-grid{grid-template-columns:1fr; gap:40px;}
    .detail-screens.cols2{grid-template-columns:1fr;}
    .detail-back-section{padding:40px 0 56px;}
}