/* ============================================================
   P&W International — Portfolio · Product (2026 리뉴얼 · 08_포트폴리오)
   좌표: 시안 1920px, 원점 = 헤더 하단. 텍스트 top = baseline − 0.952em (line-height 1.2)
   ============================================================ */

/* ---- HERO ---- */
.pf-hero{ position:relative; z-index:5; height:calc(var(--hdr-h) + 921.93 * var(--u)); padding-top:var(--hdr-h); overflow:visible; color:#1e1a15; }
.pf-hero__bg{ position:absolute; left:0; top:var(--hdr-h); width:100%; height:calc(921.93 * var(--u)); object-fit:cover; }
.pf-hero__text{ position:absolute; left:0; right:0; top:var(--hdr-h); height:calc(700 * var(--u)); text-align:center; }
.pf-hero__text > *{ position:absolute; left:0; right:0; }
.pf-hero__en{ top:calc(121.5 * var(--u)); font-weight:100; font-size:max(34px, calc(82.45 * var(--u))); line-height:1.2; letter-spacing:.01em; }
.pf-hero__ko{ top:calc(237 * var(--u)); font-weight:600; font-size:max(22px, calc(51.53 * var(--u))); line-height:1.2; }
.pf-hero__line{ left:50% !important; right:auto !important; top:calc(313 * var(--u)); width:1px; height:calc(103 * var(--u)); background:#1e1a15; }
.pf-hero__eyebrow{ top:calc(461.3 * var(--u)); font-family:var(--ab-serif); font-weight:500; font-size:max(15px, calc(28 * var(--u))); line-height:1.2; }
.pf-hero__lead{ top:calc(511 * var(--u)); font-weight:600; font-size:max(18px, calc(42 * var(--u))); line-height:1.2; }
.pf-hero__desc{ top:calc(593 * var(--u)); font-size:max(13.5px, calc(28 * var(--u))); line-height:calc(38 / 28); }

.pf-menu{ position:absolute; left:calc(680 * var(--u)); margin-left:var(--gx); top:calc(var(--hdr-h) + 726 * var(--u)); display:flex; gap:calc(32 * var(--u)); z-index:6; }
.pf-drop{ position:relative; }
.pf-drop__btn{
  display:flex; align-items:center; justify-content:center; width:calc(263 * var(--u)); min-width:150px; height:calc(56 * var(--u)); min-height:40px;
  border:1px solid #D6D7C5; background:#BFB2B8; color:#000; font-family:var(--ab-sans); font-size:max(15px, calc(32 * var(--u))); line-height:1;
  transition:background-color .3s var(--ease);
}
.pf-drop__btn--project{ background:#D6CED2; }
.pf-drop__btn:hover{ background:#B3A4AB; }
.pf-drop__btn--project:hover{ background:#CABFC4; }
.pf-drop__list{
  position:absolute; left:0; top:100%; width:100%; z-index:7;
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.pf-drop.is-open .pf-drop__list{ opacity:1; visibility:visible; transform:none; }
.pf-drop__list button{
  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), color .25s var(--ease);
}
.pf-drop__list button:hover, .pf-drop__list button[aria-pressed="true"]{ background:rgba(217,208,207,.95); }
.pf-drop__list button.is-idol{ background:#1e1a15; color:#F5FF00; font-weight:500; border-color:#1e1a15; }
.pf-drop__list button.is-idol:hover, .pf-drop__list button.is-idol[aria-pressed="true"]{ background:#000; }

/* ---- PRODUCT GRID ---- */
.pf-list{ background:#fff; padding:calc(88 * var(--u)) calc(52 * var(--u) + var(--gx)) calc(290 * var(--u)); color:#000; scroll-margin-top:80px; }
.pf-list__title{ text-align:center; font-weight:600; font-size:max(22px, calc(42 * var(--u))); line-height:1.2; color:#1e1a15; }
.pf-grid{ display:grid; grid-template-columns:repeat(3, 1fr); column-gap:calc(41 * var(--u)); row-gap:calc(45 * var(--u)); margin-top:calc(57 * var(--u)); }
.pf-card[hidden]{ display:none; }
.pf-card figure{ margin:0; aspect-ratio:1; overflow:hidden; background:#EFEFEF; }
.pf-card img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.pf-card:not(.is-mood) img{ mix-blend-mode:multiply; }
.pf-card:hover img{ transform:scale(1.03); }
/* 261013: 롤오버 컷 — 카드에 <img class="pf-card__hover">(배경 있는 컷)를 2번째로 넣으면 마우스 오버 시 교체 */
.pf-card figure{ position:relative; }
.pf-card .pf-card__hover{ position:absolute; inset:0; opacity:0; mix-blend-mode:normal; transition:opacity .5s var(--ease), transform .8s var(--ease); }
.pf-card:hover .pf-card__hover{ opacity:1; }
.pf-card h3{ margin-top:calc(24 * var(--u)); font-weight:600; font-size:max(14px, calc(20 * var(--u))); line-height:1.4; letter-spacing:-.03em; }
.pf-card p{ font-weight:300; font-size:max(13px, calc(20 * var(--u))); line-height:1.6; }
.pf-empty{ margin-top:60px; text-align:center; color:#76523B; }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:900px){
  .pf-hero{ height:auto; padding:var(--hdr-h) 0 0; }
  .pf-hero__bg{ top:0; height:100%; }
  .pf-hero__text{ position:relative; top:auto; height:auto; padding:48px var(--pad-x) 0; }
  .pf-hero__text > *{ position:static; }
  .pf-hero__line{ display:block; height:40px; margin:14px auto; }
  .pf-hero__lead{ margin-top:8px; } .pf-hero__desc{ margin-top:12px; }
  .pf-hero__desc br{ display:none; }
  .pf-menu{ position:relative; left:auto; top:auto; justify-content:center; gap:10px; padding:28px var(--pad-x) 40px; }
  .pf-drop, .pf-drop__btn{ flex:1; width:auto; min-width:0; }
  .pf-drop .pf-drop__btn{ width:100%; }
  .pf-list{ padding:48px var(--pad-x) 72px; }
  .pf-grid{ grid-template-columns:repeat(2, 1fr); column-gap:12px; row-gap:28px; margin-top:28px; }
  .pf-card h3{ margin-top:10px; }
}