/* ============================================================
   P&W International — Portfolio · Project (2026 리뉴얼 · 08_프로젝트)
   히어로·드롭다운은 portfolio.css 공유. 블록 좌표: 시안 1920px,
   y0 = "01 OVERVIEW" 베이스라인. 텍스트 top = baseline − 0.952em − (line-height − 1.2em)/2
   ============================================================ */

/* 드롭다운 항목이 링크(a)인 경우 — portfolio.css 의 button 스타일과 동일 */
.pf-drop__list a{
  display:flex; align-items:center; justify-content:center; width:100%; height:calc(56 * var(--u)); min-height:38px; margin-top:-1px;
  border:1px solid rgba(145,127,126,.6); background:rgba(255,255,255,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-family:var(--ab-sans); font-weight:300; font-size:max(13px, calc(26 * var(--u))); color:#000;
  transition:background-color .25s var(--ease);
}
.pf-drop__list a:hover, .pf-drop__list a:focus-visible{ background:rgba(217,208,207,.95); }
.pf-drop__list a.is-idol{ background:#1e1a15; color:#F5FF00; font-weight:500; border-color:#1e1a15; }
.pf-drop__list a.is-idol:hover{ background:#000; }
.pf-drop__list{ z-index:30; }
.pf-menu{ z-index:30; }

/* ---- PROJECT BLOCK ---- */
.pj-list{ background:#fff; color:#000; }
.pj-block{
  --y0:172;
  position:relative; height:calc(1746 * var(--u)); border-top:1px solid #D9D9D9;
  scroll-margin-top:var(--hdr-h);
}
.pj-block:first-child{ --y0:119; height:calc(1693 * var(--u)); border-top:0; }
.pj-block > *{ position:absolute; margin:0; }
.pj-list .pj-block > *{ margin-left:var(--gx); } /* 261015: 와이드 중앙 (.ab figure{margin:0} 보다 우선) */

.pj-label{
  left:calc(137 * var(--u)); top:calc((var(--y0) + var(--b)) * var(--u) - .952em);
  font-weight:600; font-size:max(12px, calc(24 * var(--u))); line-height:1.2; color:#000; white-space:nowrap;
}
.pj-label::after{ /* 라벨 하단 라인 (x 118–633) */
  content:""; position:absolute; left:calc(-19 * var(--u)); top:calc(.952em + 15 * var(--u)); width:calc(515 * var(--u)); height:1px; background:#232d25; opacity:.5;
}
.pj-label--ov{ --b:0; }
.pj-label--req{ --b:873; }
.pj-label--app{ --b:1224; }

.pj-name{
  left:calc(137 * var(--u)); top:calc((var(--y0) + 119) * var(--u) - .952em);
  font-weight:600; font-size:max(28px, calc(68 * var(--u))); line-height:1.2; color:#1e1a15; white-space:nowrap;
}
.pj-name small{ font-size:calc(36 / 68 * 1em); font-weight:600; margin-left:.15em; }
.pj-sub{
  left:calc(137 * var(--u)); top:calc((var(--y0) + 171) * var(--u) - .952em);
  font-weight:200; font-size:max(15px, calc(34 * var(--u))); line-height:1.2; color:#1e1a15; white-space:nowrap;
}
.pj-tag, .pj-text{
  left:calc(137 * var(--u)); font-size:max(15px, calc(34 * var(--u))); line-height:calc(47.5 / 34); color:#1e1a15;
}
.pj-tag{ top:calc((var(--y0) + 247) * var(--u) - 1.0466em); }
.pj-text--req{ top:calc((var(--y0) + 968) * var(--u) - 1.0466em); }
.pj-text--app{ top:calc((var(--y0) + 1320) * var(--u) - 1.0466em); }
.pj-desc{
  left:calc(137 * var(--u)); top:calc((var(--y0) + 389) * var(--u));
  font-size:max(12px, calc(20 * var(--u))); line-height:1.7; white-space:nowrap;
}
.pj-desc::after{ /* 설명 하단 라인 (x 137–633) */
  content:""; position:absolute; left:0; top:calc((526 - 389) * var(--u)); width:calc(496 * var(--u)); height:1px; background:#232d25; opacity:.5;
}
.pj-info{ left:calc(137 * var(--u)); top:calc((var(--y0) + 586 - 24) * var(--u)); font-size:max(12px, calc(20 * var(--u))); }
.pj-info div{ display:flex; height:calc(48 * var(--u)); align-items:center; }
.pj-info dt{ width:calc(175 * var(--u)); font-weight:500; }
.pj-info dd{ margin:0; font-weight:300; white-space:nowrap; }

.pj-main{ left:calc(680 * var(--u)); top:calc((var(--y0) - 59) * var(--u)); width:calc(1166 * var(--u)); height:calc(852 * var(--u)); overflow:hidden; background:#eee; }
.pj-main img{ display:block; width:100%; height:100%; object-fit:cover; }

.pj-boxes{ left:calc(680 * var(--u)); top:calc((var(--y0) + 855) * var(--u)); width:calc(1166 * var(--u)); display:grid; grid-template-columns:1fr 1fr; gap:calc(30 * var(--u)); }
.pj-box{ height:calc(258 * var(--u)); border:1px solid #B3B3B3; padding:calc(43 * var(--u)) calc(47 * var(--u)) 0; font-size:max(12px, calc(20 * var(--u))); }
.pj-box h4{ font-weight:500; font-size:inherit; line-height:1.2; }
.pj-box p{ margin-top:calc(20 * var(--u)); font-weight:300; line-height:1.6; white-space:nowrap; }
.pj-box small{ font-size:inherit; margin-left:.8em; }

.pj-steps{ left:calc(680 * var(--u)); top:calc((var(--y0) + 1176) * var(--u)); width:calc(1166 * var(--u)); list-style:none; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:calc(19.6 * var(--u)); font-size:max(11px, calc(20 * var(--u))); }
.pj-steps figure{ margin:0; aspect-ratio:277/186; overflow:hidden; background:#eee; }
.pj-steps img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.pj-steps li:hover img{ transform:scale(1.04); }
.pj-steps h4{ margin-top:calc(18 * var(--u)); font-weight:500; font-size:inherit; line-height:1.2; white-space:nowrap; }
.pj-steps p{ margin-top:calc(9 * var(--u)); font-weight:300; line-height:1.2; letter-spacing:-.02em; }

/* ---- PARTNERS ---- */
.pj-partners{ background:#1e1a15; scroll-margin-top:var(--hdr-h); }

/* ============================================================
   MOBILE
   ============================================================ */
/* 261013: 프로젝트 스택 전환 (project.js가 .is-stack · --stick · --cover 설정, 261016: 모바일 포함) */
.pj-list.is-stack{ overflow:visible; overflow:clip; } /* .ab 의 overflow:hidden 은 sticky를 막음 */
.pj-list.is-stack .pj-block{
  position:sticky; top:var(--stick, 0px); background:#fff;
  box-shadow:0 -28px 56px -36px rgba(30,26,21,.45);
}
.pj-list.is-stack .pj-block::before{
  content:""; position:absolute; inset:0; z-index:50; pointer-events:none;
  background:#1e1a15; opacity:calc(var(--cover, 0) * .45);
}

@media (max-width:900px){
  .pj-block, .pj-block:first-child{ height:auto; padding:48px var(--pad-x) 56px; display:flex; flex-direction:column; }
  .pj-block > *{ position:static; }
  .pj-tag br, .pj-text br, .pj-desc br{ display:none; }
  .pj-label{ order:0; padding-bottom:10px; border-bottom:1px solid rgba(35,45,37,.5); font-size:14px; }
  .pj-label::after, .pj-desc::after{ display:none; }
  .pj-label--ov{ order:1; } .pj-name{ order:2; margin-top:22px; } .pj-sub{ order:3; margin-top:4px; white-space:normal; }
  .pj-tag{ order:4; margin-top:16px; font-size:18px; line-height:1.5; }
  .pj-main{ order:5; width:100%; height:auto; aspect-ratio:4/3; margin-top:24px; }
  .pj-desc{ order:6; margin-top:20px; padding-bottom:20px; border-bottom:1px solid rgba(35,45,37,.5); font-size:14px; white-space:normal; }
  .pj-info{ order:7; margin-top:12px; font-size:13px; }
  .pj-info div{ height:auto; padding:5px 0; align-items:flex-start; }
  .pj-info dt{ flex:0 0 92px; } .pj-info dd{ white-space:normal; }
  .pj-label--req{ order:8; margin-top:40px; }
  .pj-text--req{ order:9; margin-top:16px; }
  .pj-boxes{ order:10; width:100%; grid-template-columns:1fr; gap:10px; margin-top:20px; }
  .pj-label--app{ order:11; margin-top:40px; }
  .pj-text--app{ order:12; margin-top:16px; }
  .pj-steps{ order:13; width:100%; grid-template-columns:1fr 1fr; gap:20px 10px; margin-top:20px; font-size:13px; }
  .pj-text{ font-size:18px; line-height:1.5; }
  .pj-box{ height:auto; padding:20px; font-size:13px; }
  .pj-box p{ margin-top:10px; white-space:normal; }
  .pj-steps h4{ margin-top:8px; } .pj-steps p{ margin-top:4px; line-height:1.4; }
}