/* ============================================================
   P&W International — 2026 리뉴얼 공통 (About · Process · 이후 리뉴얼 페이지)
   - body.renewal 에서 사용. 시안 1920px 좌표를 --u(= 시안 1px)로: calc(N * var(--u))
   - 폰트: 고딕 Pretendard / 명조 산돌 명조네오(라이선스 확인 전 — 미로드 시 --serif 대체)
   - 블록 접두사 ab- : 리뉴얼 공통 블록(섹션·타이포·이미지+텍스트 피처)
   ============================================================ */
.renewal{
  --u: min(1px, calc(100vw / 1920));
  /* 261015: 와이드(>1920) 가운데 정렬 — 1920 판을 화면 중앙에. 전폭 요소 안에서 left/margin/padding 에 더해 사용 (% = 컨테이닝 블록 폭) */
  --gx: max(0px, calc((100% - 1920px) / 2));
  --ab-ink:  #212221;
  --ab-ink-2: #1E1A15;
  --ab-dark:  #1E1A15;
  --ab-light: #F2EFEC;
  --ab-paper: #F8F5EF;
  --ab-card:  #3D352E;
  --ab-rule:  #756B65;
  --ab-sans:  'Pretendard Variable', Pretendard, var(--sans);
  --ab-serif: 'Sandoll MyeongjoNeo1', var(--serif);
}
 /* 헤더 높이(실측 공식): 시안 SVG는 헤더 바로 아래부터 그려져 있으므로 첫 섹션 = --hdr-h + 시안 상단 여백 */
.renewal{ --hdr-h: calc(96.05px + clamp(34px, 2.6vw, 48px)); }
@media (max-width:900px){ .renewal{ --hdr-h: var(--nav-h); } }
.renewal main{ font-family:var(--ab-sans); word-break:keep-all; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.ab{ position:relative; overflow:hidden; scroll-margin-top:80px; }
.ab--light{ background:var(--ab-light); color:var(--ab-ink); }
.ab--paper{ background:var(--ab-paper); color:var(--ab-ink-2); }
.ab--dark{ background:var(--ab-dark); color:var(--ab-light); }
.ab figure{ margin:0; }
.ab img{ display:block; }

/* ---- 공통 타이포 ---- */
.ab-eyebrow{ font-family:var(--ab-serif); font-weight:500; font-size:max(17px, calc(28 * var(--u))); line-height:1.2; }
.ab-h2{ font-weight:600; font-size:max(24px, calc(42 * var(--u))); line-height:calc(58 / 42); letter-spacing:-.01em; }
.ab-num{ display:block; font-family:var(--ab-serif); font-weight:500; font-size:max(16px, calc(28 * var(--u))); line-height:1.2; }
.ab-title{ font-family:var(--ab-serif); font-weight:500; font-size:max(30px, calc(58 * var(--u))); line-height:1.2; letter-spacing:-.005em; }
.ab-sub{ font-weight:600; font-size:max(14.5px, calc(18 * var(--u))); line-height:calc(28 / 18); }
.ab-desc{ font-weight:300; font-size:max(14px, calc(18 * var(--u))); line-height:calc(28 / 18); }

/* ---- 이미지 + 텍스트 피처 ---- */
.ab-feat{ position:relative; display:grid; align-items:center; }
.ab-feat__media{ overflow:hidden; }
.ab-feat__media img{ width:100%; height:100%; object-fit:cover; }
.ab-feat__text{ position:relative; z-index:1; }
.ab-feat__text.is-center{ text-align:center; }
.ab-feat .ab-title{ margin-top:calc(28 * var(--u)); }
.ab-feat .ab-sub{ margin-top:calc(27 * var(--u)); }
.ab-feat .ab-desc{ margin-top:calc(28 * var(--u)); }

/* 261013: Business 페이지 상단 큰 타이틀 (고딕) — OEM.ODM.제조 / 향기마케팅 (공간 센팅) */
.biz-page-title{
  margin-bottom:calc(110 * var(--u));
  font-family:var(--ab-sans); font-weight:700; font-size:max(30px, calc(72 * var(--u)));
  line-height:1.2; letter-spacing:-.02em; text-align:center;
}
@media (max-width:900px){ .biz-page-title{ margin-bottom:40px; } }

/* 261013: 파트너 로고 월 (OEM · Project 공용, partials/logo-wall.html)
   하단배너 시안의 6×5 그리드를 줄 단위로 좌우 번갈아 흐르게 — 각 줄은 6개 + 복제 6개, -50% 이동으로 무한 루프 */
.logo-wall{ position:relative; width:100%; max-width:100vw; align-self:stretch; overflow:hidden; background:#1e1a15 url(/images/partners/bg.webp) center/cover no-repeat; }
.logo-wall__line{ overflow:hidden; border-bottom:1px solid rgba(242,239,236,.22); }
.logo-wall__line:last-child{ border-bottom:0; }
.logo-wall__row{
  display:flex; width:max-content; margin:0; padding:0; list-style:none;
  animation:logo-wall-left 48s linear infinite;
}
.logo-wall__row.is-reverse{ animation-name:logo-wall-right; }
.logo-wall__row li{
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:calc(100vw / 6); height:max(84px, calc(190 * var(--u)));
  border-right:1px solid rgba(242,239,236,.22);
}
.logo-wall__row img{ display:block; width:auto; height:auto; max-width:86%; max-height:74%; }
@keyframes logo-wall-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes logo-wall-right{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@media (max-width:900px){
  .logo-wall__row li{ width:calc(100vw / 3); }
  .logo-wall__row{ animation-duration:36s; }
  .logo-wall__row img{ max-width:80%; max-height:62%; }
}
@media (prefers-reduced-motion: reduce){ .logo-wall__row{ animation:none; } }

/* 261013: 맨 위로 버튼 (포트폴리오 Product · Project) — 하단 퀵메뉴 위 우측 */
.to-top{
  position:fixed; right:clamp(16px, 2.2vw, 40px); bottom:calc(var(--qbar-h, 0px) + 20px); z-index:94;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  width:clamp(50px, 3.4vw, 64px); height:clamp(50px, 3.4vw, 64px); padding:0; border-radius:50%;
  background:#1e1a15; color:#F2EFEC; box-shadow:0 10px 24px -12px rgba(30,26,21,.5);
  font-family:var(--ab-sans); font-size:10.5px; font-weight:600; letter-spacing:.08em; line-height:1;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background-color .3s var(--ease);
}
.to-top svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; }
.to-top.is-show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:#654D45; }

/* 261013: 큰 사진 등장 — 부드러운 그라데이션 커튼(가장자리가 흐릿하게 번지며 왼→오) + 페이드 + 살짝 줌아웃
   (About · 향기마케팅 · OEM · 굿즈 아코디언). 액자(figure)가 아닌 안쪽 img 에만 적용 — 액자를 가리면 스크롤 감지가 0이 됨.
   main.js 가 화면 근처에서 미리 이미지를 받아두고(.is-wait 해제 후) 시작 */
.ab-feat__media[data-reveal], .gd-field__media[data-reveal], .pr-perf__media[data-reveal]{ opacity:1; transform:none; }
.ab-feat__media[data-reveal] img, .gd-field__media[data-reveal] img, .pr-perf__media[data-reveal] img{
  opacity:0; transform:scale(1.08);
  -webkit-mask-image:linear-gradient(90deg, #000 40%, transparent 60%); mask-image:linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size:250% 100%; mask-size:250% 100%;
  -webkit-mask-position:100% 0; mask-position:100% 0;
  transition:opacity .9s ease-out, transform 1.6s cubic-bezier(.22,.61,.36,1),
             -webkit-mask-position 1.2s cubic-bezier(.33,.8,.4,1), mask-position 1.2s cubic-bezier(.33,.8,.4,1);
}
.ab-feat__media[data-reveal].is-in:not(.is-wait) img, .gd-field__media[data-reveal].is-in:not(.is-wait) img, .pr-perf__media[data-reveal].is-in:not(.is-wait) img{
  opacity:1; transform:none; -webkit-mask-position:0 0; mask-position:0 0;
}
.ab-feat__media[data-delay="1"] img, .gd-field__media[data-delay="1"] img{ transition-delay:.1s; }

/* 261013: 카운트업 옆 글자 수치(+PLUS · ↑UP) — 통 튀어나오는 팝 */
[data-count-pop]{ display:inline-block; }
[data-count-pop].is-pop{ animation:count-pop .9s cubic-bezier(.3,.9,.4,1) both; }
@keyframes count-pop{ 0%{ transform:scale(.4); opacity:0; } 55%{ transform:scale(1.18); opacity:1; } 75%{ transform:scale(.94); } 100%{ transform:none; opacity:1; } }

@media (prefers-reduced-motion: reduce){
  .ab-feat__media[data-reveal] img, .gd-field__media[data-reveal] img, .pr-perf__media[data-reveal] img{ opacity:1; transform:none; -webkit-mask-image:none; mask-image:none; }
}