/* QuantumTronix — 제품(Products). home.css + about.css 위에 제품 페이지 전용. 사진: 젬브로스 서울 */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pd h3{margin:0 0 10px;font:400 clamp(20px,1.6vw,24px)/1.3 var(--f-display);color:var(--fg);letter-spacing:-.01em;word-break:keep-all}
html[lang^="en"] .pd h3{font-weight:500}
.tc-proc-head{margin-bottom:clamp(40px,7vh,80px)}
.tc-note{font-size:13px!important;line-height:1.7!important;color:var(--fg40)!important;padding-left:14px;border-left:1px solid rgba(238,243,246,.15)}

/* ---------- 첫 화면: 금고 (스크롤 고정) ---------- */
.pd-vault{position:relative;height:360vh;background:#050404}
.pd-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#050404}
.pd-photo{position:absolute;inset:0;transform:scale(var(--z,1));transform-origin:36% 52%;opacity:var(--po,1);will-change:transform,opacity;visibility:var(--pv,visible)}
.pd-photo::after{content:"";position:absolute;inset:0;background:#fff3dc;mix-blend-mode:soft-light;opacity:calc(var(--zb,0) * .5);pointer-events:none}
.pd-photo picture,.pd-photo img{display:block;width:100%;height:100%}
.pd-photo img{object-fit:cover;object-position:36% 50%;filter:brightness(.8)}
.ab-js .pd-photo img{opacity:0;animation:pdIn 2s var(--ease) .05s forwards}
@keyframes pdIn{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
.pd-bloom{position:absolute;inset:0;pointer-events:none;opacity:var(--bo,0);will-change:opacity;background:radial-gradient(circle at 36% 52%,#fff6e6 0%,rgba(255,214,160,.85) 22%,rgba(255,180,94,.25) 48%,rgba(5,4,4,0) 75%)}
.pd-suit{position:absolute;left:63%;top:53%;height:min(80svh,780px);width:auto;max-width:none;transform:translate(-50%,-50%);opacity:var(--so,0);visibility:var(--sv,hidden);pointer-events:none;will-change:opacity}
.pd-fx{position:absolute;inset:0;width:100%;height:100%}
.pd-fade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(3,4,9,.45) 0%,rgba(3,4,9,0) 22%,rgba(3,4,9,0) 62%,rgba(3,4,9,.85) 100%),linear-gradient(to right,rgba(3,4,9,.6) 0%,rgba(3,4,9,0) 45%);opacity:calc(.35 + var(--po,1)*.65)}
.pd-copy{position:absolute;z-index:2;left:0;bottom:0;padding:0 var(--gx) max(14vh,90px);max-width:56rem;opacity:var(--co,1);transform:translateY(calc((1 - var(--co,1)) * -30px));pointer-events:var(--cp,auto)}
.pd-copy .ab-title{font-size:clamp(38px,5vw,80px)}
.pd-cap{position:absolute;z-index:2;left:var(--gx);top:50%;transform:translateY(calc(-50% + (1 - var(--cap,0)) * 18px));display:flex;flex-direction:column;gap:10px;max-width:22rem;opacity:var(--cap,0);pointer-events:none}
.pd-cap b{font:400 11.5px var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--warm)}
.pd-cap span{font:400 clamp(20px,1.8vw,26px)/1.45 var(--f-display);color:var(--fg);word-break:keep-all}
.pd-cap em{font:400 10.5px var(--f-mono)!important;font-style:normal!important;letter-spacing:.2em;text-transform:uppercase;color:var(--fg40)!important;margin-top:10px}
.pd-meter{position:absolute;z-index:2;left:var(--gx);right:var(--gx);bottom:calc(26px + env(safe-area-inset-bottom,0px));height:1px;background:rgba(238,243,246,.1)}
.pd-meter i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--pp,0) * 100%);background:linear-gradient(90deg,var(--accent),var(--warm))}

/* ---------- 01 제품 3종 ---------- */
.pd-list{position:relative;max-width:1280px;margin:0 auto;padding:clamp(90px,16vh,170px) var(--gx)}
.pd-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.pd-card a{display:flex;flex-direction:column;height:100%;padding:18px 18px 26px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,rgba(238,243,246,.03),rgba(238,243,246,0));color:inherit;text-decoration:none;transition:transform .6s var(--ease),border-color .5s,background .5s}
.pd-card a:hover{transform:translateY(-6px);border-color:rgba(255,190,110,.45);background:linear-gradient(180deg,rgba(255,190,110,.06),rgba(238,243,246,0))}
.pd-card p{font-size:15px!important;margin:0 0 22px!important}
.pd-cimg{position:relative;aspect-ratio:4/3;margin:0 0 22px;border-radius:9px;overflow:hidden;background:radial-gradient(ellipse 60% 70% at 50% 60%,rgba(255,190,110,.14),transparent 70%),#07080c;display:grid;place-items:center}
.pd-cimg img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pd-cimg-suit img{object-fit:contain;padding:14px 0 0;filter:drop-shadow(0 18px 30px rgba(0,0,0,.6))}
.pd-card a:hover .pd-cimg img{transform:scale(1.05)}
.pd-cimg-pet svg{width:72%;height:auto;overflow:visible}
.pp-strap{fill:none;stroke:rgba(214,196,172,.55);stroke-width:5;stroke-linecap:round}
.pp-ring{fill:none;stroke:var(--warm);stroke-width:1;opacity:.6;transform-box:fill-box;transform-origin:center;animation:ppRing 2.4s ease-out infinite}
@keyframes ppRing{0%{transform:scale(.8);opacity:.8}100%{transform:scale(1.6);opacity:0}}
.pp-core{fill:#ffb45e;filter:drop-shadow(0 0 6px #ffb45e);animation:ppCore 1.2s ease-in-out infinite}
@keyframes ppCore{50%{opacity:.35}}
.pp-step{stroke:rgba(159,247,230,.6);stroke-width:2;stroke-linecap:round;stroke-dasharray:22 14;animation:ppStep 1.2s linear infinite}
@keyframes ppStep{to{stroke-dashoffset:-36}}
.pd-tag{align-self:flex-start;margin-bottom:14px;padding:4px 10px;border-radius:99px;border:1px solid rgba(238,243,246,.2);font:400 10.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg60)}
.pd-tag.warm{border-color:rgba(255,190,110,.5);color:var(--warm)}
.pd-tag.cool{border-color:rgba(94,242,214,.45);color:var(--accent)}
.pd-more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font:400 11px var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--fg80)}
.pd-more svg{width:12px;height:12px;transition:transform .4s var(--ease)}
.pd-card a:hover .pd-more svg{transform:translate(2px,-2px)}

/* ---------- 02 AXMAN (매장 사진 배경) ---------- */
.pd-axman{position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center;border-top:1px solid rgba(238,243,246,.06)}
.pd-show{position:absolute;inset:-8% 0;transform:translate3d(0,var(--sy,0px),0)}
.pd-show picture,.pd-show img{display:block;width:100%;height:100%}
.pd-show img{object-fit:cover;filter:brightness(.55) saturate(.9)}
.pd-show::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(3,4,9,.92) 0%,rgba(3,4,9,.7) 40%,rgba(3,4,9,.25) 70%,rgba(3,4,9,.55) 100%),linear-gradient(to bottom,#030409 0%,rgba(3,4,9,0) 18%,rgba(3,4,9,0) 82%,#030409 100%)}
.pd-axman-in{position:relative;z-index:1;width:100%;max-width:1280px;margin:0 auto;padding:clamp(90px,14vh,150px) var(--gx);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:center}
.pd-items{list-style:none;margin:6px 0 30px;padding:0;display:flex;gap:10px;flex-wrap:wrap}
.pd-items li{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border:1px solid rgba(255,190,110,.35);border-radius:99px;background:rgba(3,4,9,.45);font-size:14px;color:var(--fg)}
.pd-items b{font:400 10.5px var(--f-mono);color:var(--warm)}
.pd-suit2{position:relative;margin:0;justify-self:center;width:100%;max-width:440px}
.pd-suit2 img{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.7))}
.pd-glint{position:absolute;inset:0;pointer-events:none;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:linear-gradient(112deg,transparent 42%,rgba(255,246,225,.55) 50%,transparent 58%);background-size:300% 100%;background-position:120% 0;mix-blend-mode:screen;animation:pdGlint 6.5s ease-in-out 1s infinite}
@keyframes pdGlint{0%{background-position:120% 0}45%,100%{background-position:-20% 0}}

/* ---------- 03 협력사 ---------- */
.pd-partner{grid-template-columns:minmax(0,6fr) minmax(0,6fr);border-top:1px solid rgba(238,243,246,.06)}
.pd-duo{position:relative;min-height:clamp(320px,38vw,520px)}
.pd-ph{position:absolute;margin:0;overflow:hidden;border-radius:8px;box-shadow:0 40px 70px rgba(0,0,0,.6),0 0 0 1px rgba(238,243,246,.08)}
.pd-ph img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.9)}
.pd-duo .pd-ph:first-child{left:0;top:0;width:72%;aspect-ratio:1600/1144}
.pd-duo .pd-ph2{right:0;bottom:0;width:56%;aspect-ratio:1600/1144}

/* ---------- 휴대폰·태블릿 ---------- */
@media (max-width:1000px){
  .pd-cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pd-cards li:last-child{grid-column:1/-1}
  .pd-cards li:last-child .pd-cimg{aspect-ratio:16/7}
}
@media (max-width:900px){
  .pd-vault{height:270vh}
  .pd-suit{left:50%;top:45%;height:auto;width:min(94vw,calc(60svh * .838),480px)}
  .pd-cap{top:auto;bottom:calc(52px + env(safe-area-inset-bottom,0px));left:var(--gx);right:var(--gx);max-width:none;transform:translateY(calc((1 - var(--cap,0)) * 18px));gap:6px;text-align:center;align-items:center}
  .pd-cap span{font-size:17px}
  .pd-cap em{margin-top:2px}
  .pd-axman-in{grid-template-columns:minmax(0,1fr)}
  .pd-suit2{max-width:320px}
  .pd-show::after{background:linear-gradient(to bottom,#030409 0%,rgba(3,4,9,.65) 25%,rgba(3,4,9,.8) 100%)}
  .pd-partner{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .qth-prod .grain{display:none}
  .pd-cards{grid-template-columns:minmax(0,1fr)}
  .pd-cards li:last-child .pd-cimg{aspect-ratio:4/3}
  .pd-copy .ab-title{font-size:clamp(34px,9.6vw,48px)}
  .pd .ab-k{display:block;white-space:normal;line-height:1.8}
  .pd .ab-k b{margin-right:12px}
  .pd-duo{min-height:78vw}
}
@media (prefers-reduced-motion:reduce){
  .pd-glint,.pp-ring,.pp-core,.pp-step{animation:none!important}
  .ab-js .pd-photo img{opacity:1;animation:none}
}