/* ============================================================
   P&W International — Home (2026 리뉴얼 메인)
   시안 기준 1920px → vw 비율로 변환 (px/19.2 = vw)
   섹션: rh(히어로) · rp(파트너) · rw(Why/올인원) · rs(브랜드 스토리) · qbar(하단 고정 퀵메뉴)
   ============================================================ */
.home-renewal{
  --h-brown:   #453127;   /* 본문/제목 브라운 */
  --h-brown-2: #654D45;   /* 퀵메뉴 텍스트 */
  --h-beige:   #E7E1DB;   /* 섹션 배경 */
  --h-beige-2: #F2EFEC;   /* 퀵메뉴 배경 · 다크 섹션 텍스트 */
  --h-ink:     #212221;   /* 히어로 카피 */
  --qbar-h:    clamp(54px, 3.9vw, 75px);
  background:var(--h-beige);
  padding-bottom:var(--qbar-h);      /* 하단 고정 퀵메뉴가 푸터를 가리지 않도록 */
}
.home-renewal main, .qbar{ word-break:keep-all; }

/* ---- Header on home: 히어로 위 투명, 영상의 어두운 장면에서는 흰색 ---- */
body.home-renewal .header:not(.is-solid):not(.mega-open){ background:transparent; box-shadow:none; }
body.home-renewal.scene-dark .header:not(.is-solid):not(.mega-open) .nav,
body.home-renewal.scene-dark .header:not(.is-solid):not(.mega-open) .header__util{ color:#fff; }
body.home-renewal.scene-dark .header:not(.is-solid):not(.mega-open) .logo img{ filter:brightness(0) invert(1); }
body.home-renewal.scene-dark .header:not(.is-solid):not(.mega-open) .burger span{ background:#fff; }

/* ============================================================
   HERO
   ============================================================ */
.rh{
  position:relative; overflow:hidden;
  height:calc(100svh - var(--qbar-h)); min-height:560px;
  display:flex; align-items:center;
  padding:clamp(110px, 8vw, 150px) 0 0 12vw;
  color:var(--h-ink);
  background:#E8C9BC;
}
.rh__media{ position:absolute; inset:0; z-index:0; }
.rh__video{ width:100%; height:100%; object-fit:cover; object-position:70% center; display:block; }
.rh__content{ position:relative; z-index:1; transition:color .8s var(--ease); }
.rh__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(38px, 5.15vw, 99px); line-height:1.1; letter-spacing:.01em;
}
.rh__sub{
  font-family:var(--serif);
  margin-top:clamp(18px, 2.8vw, 54px);
  font-size:clamp(14px, 1.34vw, 26px); line-height:1.5;
}
.rh__btn{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:clamp(28px, 4vw, 77px);
  min-width:clamp(140px, 10.6vw, 204px); height:clamp(36px, 2.15vw, 41px); padding-inline:1.2em;
  background:rgba(33,34,33,.5); color:#fff;
  font-size:clamp(13.5px, 1.34vw, 26px); letter-spacing:.02em;
  transition:background-color .35s var(--ease);
}
.rh__btn:hover{ background:rgba(33,34,33,.78); }
.rh.is-dark .rh__content{ color:#fff; }

/* ============================================================
   PARTNERS
   ============================================================ */
.rp{
  display:grid; grid-template-columns:29.3vw minmax(0,1fr);
  padding:6vw 9.7vw 6.5vw;
  background:var(--h-beige); color:var(--h-brown);
}
.rp__intro{ display:flex; flex-direction:column; justify-content:space-between; padding-right:2vw; }
.rp__title{
  display:flex; flex-direction:column; gap:.4em;
  font-size:clamp(26px, 2.68vw, 52px); font-weight:700; line-height:1.4; letter-spacing:-.01em;
}
.rp__more{
  display:flex; flex-direction:column; align-items:flex-start; gap:.5em;
  width:min(100%, 22.7vw); padding:0; text-align:left;
  font-size:clamp(13px, 1.34vw, 26px); color:var(--h-brown);
}
.rp__more i{ position:relative; display:block; width:100%; height:1px; background:rgba(69,49,39,.35); }
.rp__more i::after{
  content:""; position:absolute; right:0; bottom:0; width:clamp(9px,.7vw,13px); height:1px;
  background:inherit; transform-origin:right center; transform:rotate(45deg);
}
.rp__more:hover i{ background:rgba(69,49,39,.7); }

.rp__viewport{ overflow:hidden; min-width:0; }
.rp__track{
  display:flex; gap:1.05vw;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; cursor:grab;
}
.rp__track::-webkit-scrollbar{ display:none; }
.rp__track.is-dragging{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }
.pcard{ flex:0 0 19.17vw; scroll-snap-align:start; }
.pcard__thumb{ aspect-ratio:368/514; overflow:hidden; background:#231815; }
.pcard__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); pointer-events:none; user-select:none; }
.pcard:hover .pcard__thumb img{ transform:scale(1.04); }
.pcard__label{ display:block; margin-top:1.9vw; font-size:clamp(12px, 1.34vw, 26px); letter-spacing:.01em; }
.pcard__title{ margin-top:1.9vw; font-size:clamp(22px, 2.68vw, 52px); font-weight:700; line-height:1.2; }
.pcard__desc{ margin-top:.5vw; font-size:clamp(12.5px, 1.07vw, 21px); line-height:1.2; max-width:18.4vw; }

/* ============================================================
   WHY / ALL-IN-ONE
   ============================================================ */
.rw{ padding:8.2vw 0 8.5vw; background:var(--h-beige); color:var(--h-brown); text-align:center; overflow:hidden; }
.rw__why{ font-size:clamp(44px, 4.3vw, 83px); font-weight:300; line-height:1.2; letter-spacing:-.01em; }
.rw__why-sub{ margin-top:.3vw; font-size:clamp(18px, 2.15vw, 41px); font-weight:700; line-height:1.25; }
.rw__line{
  position:relative; display:block; width:1px; height:clamp(70px, 8.2vw, 157px);
  margin:2.4vw auto 3.6vw; background:rgba(69,49,39,.35);
}
.rw__line::after{
  content:""; position:absolute; left:50%; top:calc(100% + .9vw);
  width:clamp(8px,.84vw,16px); height:clamp(8px,.84vw,16px); border-radius:50%;
  background:var(--h-brown); transform:translateX(-50%);
}
.rw__en{ margin-top:2.6vw; font-size:clamp(22px, 2.68vw, 52px); font-weight:300; line-height:1.3; }
.rw__ko{ margin-top:.9vw; font-size:clamp(22px, 2.68vw, 52px); font-weight:700; line-height:1.3; }

.rw__slider{ position:relative; margin:3.9vw 7.55vw 0; overflow:hidden; }
.rw__track{
  --per:3; --gap:2.4vw;
  display:flex; gap:var(--gap);
  transition:transform .8s var(--ease);
}
.scard{
  position:relative; flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  aspect-ratio:512/510; overflow:hidden;
  display:flex; flex-direction:column; align-items:flex-start;
  padding:2.5vw 2.2vw 3.3vw; background:#fff; text-align:left;
}
.scard__picto{
  position:absolute; left:50%; top:56%; width:68%; height:72%; object-fit:contain;
  transform:translate(-50%,-50%); pointer-events:none;
}
.scard > *:not(.scard__picto){ position:relative; }
.scard__label{ font-size:clamp(12px, 1.34vw, 26px); line-height:1.2; }
.scard__title{ margin-top:1.1vw; font-size:clamp(18px, 2.15vw, 41px); font-weight:700; line-height:1.2; letter-spacing:-.015em; }
.scard__list{ margin-top:auto; min-height:4.2em; padding-left:.45vw; font-size:clamp(12.5px, 1.34vw, 26px); line-height:1.4; }

.rw__dots{ display:flex; justify-content:center; gap:clamp(8px,.85vw,16px); margin-top:2.6vw; }
.rw__dots button{
  width:clamp(7px,.6vw,11px); height:clamp(7px,.6vw,11px); border-radius:50%; padding:0;
  background:var(--h-brown); opacity:.28; transition:opacity .3s var(--ease);
}
.rw__dots button[aria-selected="true"]{ opacity:1; }

.rw__closing{
  margin-top:7.4vw; padding-inline:var(--pad-x);
  font-size:clamp(18px, 2.68vw, 52px); line-height:1.4; letter-spacing:-.01em;
}
.rw__closing strong{ display:inline-block; margin-top:.45em; font-weight:700; }

/* ============================================================
   BRAND STORY (dark video)
   ============================================================ */
.rs{ position:relative; overflow:hidden; color:var(--h-beige-2); background:#1d1813; text-align:center; }
.rs__media{ position:absolute; inset:0; z-index:0; }
.rs__media::after{ content:""; position:absolute; inset:0; background:rgba(20,15,10,.35); }
.rs__video{ width:100%; height:100%; object-fit:cover; display:block; }
.rs__inner{ position:relative; z-index:1; padding:9.8vw 7.55vw 8.3vw; }
.rs__title{ font-family:var(--serif); font-weight:400; font-size:clamp(24px, 3.22vw, 62px); line-height:1.25; }
.rs__lead{ margin-top:3.3vw; font-family:var(--serif); font-size:clamp(14px, 1.34vw, 26px); line-height:1.25; }
.rs__lead span{ display:inline-block; margin-top:1.25em; }
.rs__insta{
  display:inline-flex; align-items:center; gap:1.1vw; margin-top:5.6vw;
  font-size:clamp(16px, 1.6vw, 31px); font-weight:700;
}
.rs__insta img{ width:clamp(28px, 2.3vw, 44px); height:auto; }
.rs__insta:hover span{ text-decoration:underline; text-underline-offset:.2em; }
.rs__values{
  display:grid; grid-template-columns:repeat(3,1fr);
  margin-top:5.5vw; padding-top:1.8vw; border-top:1px solid rgba(242,239,236,.35);
}
.rs__value{ padding:1.1vw 1.5vw .8vw; }
.rs__value + .rs__value{ border-left:1px solid rgba(242,239,236,.35); }
.rs__value h3{ font-size:clamp(17px, 1.6vw, 31px); font-weight:700; line-height:1.2; }
.rs__value p{ font-size:clamp(12.5px, 1.07vw, 21px); line-height:1.2; }
.rs__value .rs__value-ko{ margin-top:2vw; margin-bottom:1.3vw; }

/* ============================================================
   QUICK MENU (하단 고정)
   ============================================================ */
.qbar{
  position:fixed; left:0; right:0; bottom:0; z-index:95;
  height:var(--qbar-h); background:var(--h-beige-2);
  box-shadow:0 -1px 0 rgba(101,77,69,.08);
}
.qbar__list{ display:flex; justify-content:center; height:100%; }
.qbar__list li{ position:relative; display:flex; justify-content:center; width:14.62vw; min-width:max-content; }
.qbar__list li + li::before{
  content:""; position:absolute; left:0; top:50%; width:1px; height:41.7%;
  background:var(--h-brown-2); opacity:.25; transform:translateY(-50%);
}
.qbar__item{
  position:relative; display:inline-flex; align-items:center; height:100%; padding-inline:.4em;
  font-size:clamp(12.5px, 1.07vw, 20.6px); color:var(--h-brown-2); white-space:nowrap;
  transition:color .3s var(--ease);
}
.qbar__item::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:clamp(3px,.24vw,4.6px);
  background:var(--h-brown-2); transform:scaleX(0); transition:transform .4s var(--ease);
}
.qbar__item:hover{ color:var(--h-brown); }
.qbar__item.is-active{ font-weight:700; }
.qbar__item.is-active::after{ transform:scaleX(1); }
.is-menu-open .qbar{ display:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .rh{ padding:calc(var(--nav-h) + 20px) var(--pad-x) 0; align-items:center; }
  .rh__video{ object-position:72% center; }
  .rh__content{ max-width:100%; }

  .rp{ grid-template-columns:1fr; gap:36px; padding:72px var(--pad-x) 80px; }
  .rp__intro{ flex-direction:row; align-items:flex-end; gap:24px; padding-right:0; }
  .rp__more{ width:auto; min-width:150px; }
  .rp__viewport{ margin-right:calc(var(--pad-x) * -1); }
  .rp__track{ gap:14px; padding-right:var(--pad-x); }
  .pcard{ flex-basis:58vw; }
  .pcard__label, .pcard__title{ margin-top:14px; }
  .pcard__desc{ margin-top:6px; max-width:none; }

  .rw{ padding:80px 0; }
  .rw__line{ margin:20px auto 36px; }
  .rw__line::after{ top:calc(100% + 8px); }
  .rw__en{ margin-top:30px; } .rw__ko{ margin-top:6px; }
  .rw__slider{ margin:36px var(--pad-x) 0; }
  .rw__track{ --per:1.15; --gap:14px; }
  .scard{ aspect-ratio:auto; min-height:clamp(320px, 88vw, 420px); padding:26px 24px 30px; }
  .scard__title{ margin-top:10px; }
  .rw__dots{ margin-top:22px; }
  .rw__closing{ margin-top:64px; }

  .rs__inner{ padding:96px var(--pad-x) 72px; }
  .rs__lead{ margin-top:28px; } .rs__insta{ margin-top:40px; gap:10px; }
  .rs__values{ grid-template-columns:1fr; margin-top:48px; padding-top:8px; }
  .rs__value{ padding:24px 0; }
  .rs__value + .rs__value{ border-left:0; border-top:1px solid rgba(242,239,236,.25); }
  .rs__value .rs__value-ko{ margin:10px 0 8px; }

  .qbar__list{ justify-content:flex-start; overflow-x:auto; scrollbar-width:none; }
  .qbar__list::-webkit-scrollbar{ display:none; }
  .qbar__list li{ width:auto; padding-inline:14px; }
}
@media (max-width:600px){
  .rh{ min-height:520px; }
  .rp__intro{ flex-direction:column; align-items:flex-start; }
  .pcard{ flex-basis:72vw; }
  .rw__closing br{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .rw__track, .pcard__thumb img{ transition:none; }
}
