/* 상세 페이지 — Figma「상세 대개편(보충제)」Frame 33 구조를 중문판으로 옮김
   본문 폭 651px 기준의 세로형 상세(가운데 정렬, 보라 포인트)를 웹 반응형으로 재구성 */
.pdp{--purple:#7b5cff;--accent:#9aa3ad}
.center{text-align:center}
.tbd{color:#c0c4ca!important;font-style:normal}
.p-narrow{max-width:760px}
.p-head{text-align:center;margin-bottom:44px}
.p-head h2{font-size:clamp(26px,3.6vw,38px);line-height:1.35}
.p-head h2 em,.steps4__title em{font-style:normal;color:var(--purple)}
.p-head .section-sub{line-height:1.9}
.p-head .section-sub b,.p-quote b{color:var(--ink)}
.p-quote{margin-top:18px;color:var(--muted);font-size:16px;line-height:1.9}

/* ---------- ① 구매 영역 ---------- */
.buy{padding-top:24px;padding-bottom:96px}
.crumb{font-size:12px;color:var(--muted);display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.crumb b{color:var(--ink-2);font-weight:500}
.buy__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
.gallery{position:sticky;top:96px}
.gallery__main{position:relative;background:var(--tile);aspect-ratio:1;overflow:hidden}
.gallery__main img{width:100%;height:100%;object-fit:contain;transition:opacity .45s var(--ease),transform .8s var(--ease)}
.gallery__main img.swap{opacity:0;transform:scale(.97)}
.gallery__main:hover img{transform:scale(1.03)}
.gallery__flavor{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border-radius:10px;padding:8px 14px 8px 8px;box-shadow:0 6px 20px rgba(0,0,0,.08);border-left:3px solid var(--accent);transition:border-color .4s}
.gallery__flavor img{height:62px;width:auto}
.gallery__flavor span{font-size:14px;font-weight:700;color:var(--ink)}
.gallery__flavor.pop{animation:pop .5s var(--ease)}
@keyframes pop{from{transform:translateY(16px);opacity:0}}
.gallery__thumbs{display:flex;gap:10px;margin-top:12px}
.gallery__thumbs button{width:72px;aspect-ratio:1;background:var(--tile);border:1px solid transparent;overflow:hidden;transition:border-color .3s}
.gallery__thumbs button img{width:100%;height:100%;object-fit:cover}
.gallery__thumbs button.is-on{border-color:var(--ink)}

.info__tags{display:flex;gap:6px;flex-wrap:wrap}
.info__tags em{font-style:normal;font-size:12px;padding:3px 10px;border-radius:999px;border:1px solid var(--line)}
.info__title{font-size:clamp(26px,3vw,36px);margin-top:14px;line-height:1.3}
.info__en{font-size:12px;letter-spacing:.16em;color:var(--muted);margin-top:6px}
.info__desc{margin-top:16px;font-size:15px}
.opt{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.opt__label{font-size:13px;color:var(--muted)}
.opt__label b{color:var(--ink);margin-left:8px}
.flavor-chips{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:12px}
.chip{position:relative;background:var(--tile);border-radius:8px;padding:6px 0 4px;display:flex;flex-direction:column;align-items:center;border:1.5px solid transparent;transition:border-color .3s,transform .3s var(--ease),background .3s}
.chip img{height:64px;width:auto;transition:transform .45s var(--ease)}
.chip span{font-size:11px;color:var(--ink-2);margin-top:2px}
.chip::after{content:"";position:absolute;left:30%;right:30%;bottom:0;height:3px;border-radius:3px;background:var(--c);transform:scaleX(0);transition:transform .35s var(--ease)}
.chip:hover{transform:translateY(-2px)}
.chip:hover img{transform:translateY(-3px)}
.chip.is-on{border-color:var(--ink);background:#fff}
.chip.is-on::after{transform:scaleX(1)}
.spec-mini{display:grid;grid-template-columns:repeat(3,1fr);margin-top:24px;border:1px solid var(--line);border-radius:6px}
.spec-mini div{padding:14px 16px}
.spec-mini div+div{border-left:1px solid var(--line)}
.spec-mini dt{font-size:12px;color:var(--muted)}
.spec-mini dd{font-size:15px;font-weight:600;color:var(--ink);margin-top:2px}
.info__cta{display:grid;grid-template-columns:1.4fr 1fr;gap:10px;margin-top:24px}
.trust{list-style:none;display:flex;gap:18px;margin-top:18px;font-size:13px;flex-wrap:wrap}
.trust i{font-style:normal;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--ink);color:#fff;font-size:10px;margin-right:6px}

/* ---------- ② 섹션 탭 ---------- */
.subnav{position:sticky;top:60px;z-index:40;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.subnav__inner{position:relative;display:flex;justify-content:center;gap:8px;overflow-x:auto;scrollbar-width:none}
.subnav a{padding:16px 18px;font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap;transition:color .3s}
.subnav a.is-on{color:var(--ink)}
.subnav__ink{position:absolute;bottom:-1px;height:2px;background:var(--ink);transition:left .4s var(--ease),width .4s var(--ease)}

/* ---------- ③ 제품 히어로 ---------- */
.p-hero{padding:110px 0 90px;text-align:center}
.p-hero__en{font-size:clamp(24px,3.4vw,36px);letter-spacing:.02em;font-weight:800}
.p-hero__img{margin:36px auto 0;background:#eaecee;border-radius:4px;overflow:hidden}
.p-hero__img img{width:100%;transform:scale(1.08);transition:transform 2.4s var(--ease)}
.p-hero__img.in img{transform:none}
.p-hero__lead{margin-top:40px;font-size:clamp(17px,2vw,21px);font-weight:700;color:var(--ink);line-height:1.6}
.badges{display:flex;justify-content:center;gap:16px;margin-top:32px}
.badge{width:180px;padding:22px 0;border-radius:999px;border:1.5px solid var(--ink);display:flex;flex-direction:column}
.badge b{font-size:18px;color:var(--ink)}
.badge span{font-size:11px;letter-spacing:.14em;color:var(--muted)}

/* ---------- ④ 커뮤니티 ---------- */
.community{padding:100px 0 0}
.tri{position:relative;width:min(460px,100%);aspect-ratio:4/3.2;margin:0 auto}
.tri__lines{position:absolute;inset:0;width:100%;height:100%}
.tri__lines path{fill:none;stroke:#c9ccd2;stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--ease) .3s}
.tri.in .tri__lines path{stroke-dashoffset:0}
.tri__node{position:absolute;display:flex;flex-direction:column;align-items:center;text-align:center;transform:translate(-50%,-50%) scale(.6);opacity:0;transition:transform .8s cubic-bezier(.34,1.56,.64,1),opacity .6s}
.tri.in .tri__node{transform:translate(-50%,-50%);opacity:1}
.tri__node--top{left:50%;top:23%}
.tri__node--left{left:20%;top:73%;transition-delay:.25s}
.tri__node--right{left:80%;top:73%;transition-delay:.4s}
.tri__node>b{width:118px;height:118px;border-radius:50%;background:#fff;display:grid;place-items:center;grid-auto-flow:column;align-content:center;justify-content:center;font-size:42px;font-weight:800;color:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.08),0 0 0 8px #f4f5f7}
.tri__node>b small{font-size:16px;color:var(--muted);font-weight:600;align-self:end;margin:0 0 30px 2px}
.tri__node p{margin-top:16px;font-size:14px;font-weight:700;color:var(--ink);display:flex;flex-direction:column;align-items:center}
.tri__node p span{font-size:11px;font-weight:400;color:var(--muted)}
.ic{font-style:normal;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:4px;color:#fff;font-size:10px;margin-bottom:4px}
.ic--naver{background:#03c75a}.ic--ig{background:linear-gradient(45deg,#f9a825,#e91e63,#7b1fa2)}.ic--yt{background:#ff0000}
.real{margin-top:90px;background:#f4f5f7;padding-top:80px;padding-bottom:80px;max-width:none}
.real>*{max-width:680px;margin-left:auto;margin-right:auto}
.board{position:relative;border-radius:8px;overflow:hidden;background:#2a2a2e;color:#fff;text-align:center;padding:40px 20px 44px;isolation:isolate}
.board::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 90px,transparent 90px 100px),repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 60px,transparent 60px 68px);animation:boardDrift 30s linear infinite}
@keyframes boardDrift{to{background-position:400px 0,0 272px}}
.board>p{font-size:15px;opacity:.85}
.board__nums{display:flex;justify-content:center;gap:48px;margin-top:10px}
.board__nums div{display:flex;flex-direction:column;align-items:center}
.board__nums b{font-size:clamp(48px,7vw,76px);font-weight:800;color:#a993ff;line-height:1.1}
.board__nums b small{font-size:.42em;color:#fff;margin-left:4px}
.board__nums div>span{font-size:16px;font-weight:700}
.steps4{margin-top:56px;text-align:center}
.steps4__title{font-size:20px;font-weight:700;color:var(--ink)}
.steps4__list{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:24px;position:relative}
.steps4__list li{position:relative;background:#fff;border-radius:8px;padding:22px 12px;display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease),box-shadow .4s}
.steps4__list.in li{opacity:1;transform:none}
.steps4__list li:nth-child(2){transition-delay:.15s}.steps4__list li:nth-child(3){transition-delay:.3s}.steps4__list li:nth-child(4){transition-delay:.45s}
.steps4__list li:not(:last-child)::after{content:"→";position:absolute;right:-18px;top:50%;transform:translateY(-50%);color:#b8bcc4;font-size:14px}
.steps4__list li.is-active{box-shadow:0 0 0 2px var(--purple),0 12px 26px rgba(123,92,255,.18)}
.steps4__list i{font-style:normal;width:46px;height:46px;border-radius:50%;background:#efeaff;display:grid;place-items:center;font-size:20px}
.steps4__list b{font-size:14px;color:var(--ink)}
.steps4__list span{font-size:12px;line-height:1.5}

/* ---------- ⑤ 배합 ---------- */
.formula{padding:110px 0}
.formula__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fpoint{border-top:2px solid var(--ink);padding-top:18px}
.fpoint span{font-size:13px;color:var(--purple);font-weight:700}
.fpoint b{display:block;font-size:19px;color:var(--ink);margin:4px 0 8px}
.fpoint p{font-size:14px}

/* ---------- ⑥ 품질 ---------- */
.quality{padding:100px 0;background:#fafafb;border-top:1px solid var(--line)}
.report{position:relative;max-width:520px;margin:0 auto;text-align:center}
.report__paper{position:relative;background:#fff;border:1px solid var(--line);border-radius:4px;padding:36px 32px;display:flex;flex-direction:column;gap:14px;overflow:hidden;filter:blur(.4px)}
.report__paper i{display:block;height:10px;border-radius:2px;background:#eceef1}
.report__paper i:nth-child(odd){width:86%}.report__paper i:nth-child(3n){width:62%}
.report__scan{position:absolute;left:0;right:0;height:60px;top:-60px;background:linear-gradient(transparent,rgba(123,92,255,.18),transparent);animation:scan 3.2s ease-in-out infinite}
@keyframes scan{to{top:100%}}
.report__label{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);background:#fff;border:2px solid var(--ink);padding:10px 20px;font-size:20px;font-weight:800;color:var(--ink);box-shadow:0 6px 20px rgba(0,0,0,.1);white-space:nowrap}
.kq{margin-top:100px}
.kq__cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kq__card{background:#fff;border:1.5px solid #e2dcff;border-radius:12px;padding:26px 22px;display:flex;flex-direction:column;gap:6px;transition:transform .4s var(--ease),box-shadow .4s}
.kq__card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(123,92,255,.12)}
.kq__card i{font-style:normal;font-size:26px}
.kq__card em{font-style:normal;align-self:flex-start;font-size:12px;font-weight:700;color:#fff;background:var(--purple);padding:2px 10px;border-radius:999px}
.kq__card b{font-size:16px;color:var(--purple);line-height:1.5}
.kq__card span{font-size:13px}

/* ---------- ⑦ 공장·인증 ---------- */
.factory{padding:110px 0}
.certs{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.cert{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.cert__seal{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px;color:var(--purple);background:radial-gradient(circle,#fff 55%,#efeaff 56%);border:2px solid #d9d0ff;line-height:1.1;margin-bottom:8px;transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.cert__seal--sm{font-size:12px}
.cert:hover .cert__seal{transform:rotate(-8deg) scale(1.06)}
.cert b{font-size:14px;color:var(--ink)}
.cert p{font-size:12px;color:var(--muted)}

/* ---------- ⑧ 규격 ---------- */
.spec{padding:90px 0 130px;border-top:1px solid var(--line)}
.spec__table{width:100%;border-collapse:collapse;font-size:14px;border-top:2px solid var(--ink)}
.spec__table th,.spec__table td{padding:16px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.spec__table th{width:140px;color:var(--ink);font-weight:600;background:#fafafb}

/* ---------- 하단 구매 바 ---------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:55;background:#fff;border-top:1px solid var(--line);padding:10px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:12px;transform:translateY(110%);transition:transform .45s var(--ease)}
.buybar.is-show{transform:none}
.buybar__info{display:flex;align-items:center;gap:10px;min-width:0}
.buybar__info img{height:44px;width:auto}
.buybar__info p{display:flex;flex-direction:column;font-size:12px;line-height:1.4;min-width:0}
.buybar__info b{color:var(--ink);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar .btn{height:44px;flex-shrink:0}
.pdp .float-wx{bottom:84px}
.pdp .wx-pop{bottom:152px}

/* ---------- 반응형 ---------- */
@media (max-width:960px){
  .buy__grid{grid-template-columns:1fr;gap:32px}
  .gallery{position:static}
  .certs{grid-template-columns:repeat(3,1fr);row-gap:28px}
}
@media (max-width:640px){
  .subnav{top:60px}
  .subnav__inner{justify-content:flex-start}
  .subnav a{padding:14px 12px;font-size:13px}
  .flavor-chips{grid-template-columns:repeat(4,1fr)}
  .spec-mini{grid-template-columns:1fr 1fr}
  .spec-mini div:nth-child(3){grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}
  .badges{gap:10px}.badge{width:150px}
  .tri__node>b{width:86px;height:86px;font-size:30px}
  .tri__node>b small{margin-bottom:20px;font-size:13px}
  .tri__node p{font-size:12px}
  .board__nums{gap:24px}
  .steps4__list{grid-template-columns:1fr 1fr;gap:12px}
  .steps4__list li:not(:last-child)::after{display:none}
  .formula__grid,.kq__cards{grid-template-columns:1fr}
  .certs{grid-template-columns:repeat(2,1fr)}
  .spec__table th{width:96px}
  .report__label{font-size:16px}
  .info__cta{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .tri__node,.steps4__list li{opacity:1!important;transform:translate(-50%,-50%)!important}
  .steps4__list li{transform:none!important}
  .tri__lines path{stroke-dashoffset:0!important}
  .p-hero__img img{transform:none!important}
}

/* ---------- 옵션 칩 변형 ---------- */
.flavor-chips--photo{grid-template-columns:repeat(4,1fr)}
.flavor-chips--photo .chip{padding:8px 0 8px}
.flavor-chips--photo .chip img{height:auto;width:76%;aspect-ratio:1;object-fit:cover;border-radius:6px}
.flavor-chips--text{grid-template-columns:repeat(3,1fr)}
.flavor-chips--text .chip{padding:14px 0}
.flavor-chips--text .chip span{font-size:13px;font-weight:600}
.spec-mini dd.flash{animation:flash .6s var(--ease)}
@keyframes flash{from{opacity:0;transform:translateY(6px)}}

/* ---------- EAA 배합비 막대 ---------- */
.ratio{background:#fff;border:1.5px solid #e2dcff;border-radius:16px;padding:22px 24px 18px;box-shadow:0 14px 40px rgba(123,92,255,.08)}
.ratio__head,.ratio__row{display:grid;grid-template-columns:1.3fr 2fr 70px;align-items:center;gap:14px}
.ratio__head{font-size:12px;color:var(--muted);padding-bottom:8px;border-bottom:1px solid var(--line)}
.ratio__head span:last-child,.ratio__row>span{text-align:right}
.ratio__row{padding:9px 0;border-bottom:1px solid #f1f2f4}
.ratio__row p{display:flex;flex-direction:column;line-height:1.3}
.ratio__row b{font-size:14px;color:var(--ink)}
.ratio__row small{font-size:11px;color:var(--muted)}
.ratio__row>span{font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.ratio__bar{position:relative;height:10px;background:#f2effe;border-radius:10px}
.ratio__bar i{position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:10px;background:linear-gradient(90deg,#b7a6ff,var(--purple));transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease) calc(var(--i) * .08s + .2s)}
.ratio__bar em{position:absolute;left:calc(var(--w) + 8px);top:50%;transform:translateY(-50%);font-style:normal;font-size:12px;color:var(--purple);font-weight:700;opacity:0;transition:opacity .4s calc(var(--i) * .08s + .9s)}
.ratio.in .ratio__bar i{transform:none}
.ratio.in .ratio__bar em{opacity:1}
.ratio__cap{margin-top:14px;text-align:center;font-size:12px;color:var(--muted)}

/* ---------- 이미지 / 맛별 영양표 ---------- */
.fimg{margin:8px 0 28px;border-radius:12px;overflow:hidden;position:relative;background:#f4f5f7}
.fimg img{width:100%;transform:scale(1.06);transition:transform 2.2s var(--ease)}
.fimg.in img{transform:none}
.fimg figcaption{position:absolute;right:12px;bottom:8px;font-size:11px;color:var(--muted)}
.nut{margin-bottom:64px}
.nut table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.nut th{background:#fafafb;color:var(--muted);font-weight:500;padding:10px 8px;text-align:right}
.nut th:first-child,.nut td:first-child{text-align:left;padding-left:16px}
.nut td{padding:12px 8px;text-align:right;border-top:1px solid #f1f2f4;font-variant-numeric:tabular-nums;transition:background .35s}
.nut td i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px}
.nut tr.is-on td{background:color-mix(in srgb,var(--accent) 10%,#fff);font-weight:700;color:var(--ink)}

/* ---------- 종합비타민 영양소 게이지 ---------- */
.nutri__group{font-size:15px;font-weight:700;color:var(--ink);margin:8px 0 12px}
.nutri__group:not(:first-child){margin-top:28px}
.nutri__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.nutri__item{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 12px 10px;display:flex;flex-direction:column;gap:2px;opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease) calc(var(--i) * .04s),transform .5s var(--ease) calc(var(--i) * .04s)}
.nutri.in .nutri__item{opacity:1;transform:none}
.nutri__item b{font-size:13px;color:var(--ink)}
.nutri__item span{font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.nutri__bar{height:5px;background:#fdeceb;border-radius:5px;margin-top:6px;overflow:hidden}
.nutri__bar i{display:block;height:100%;width:var(--w);border-radius:5px;background:linear-gradient(90deg,#f6b2ac,#e8635a);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease) calc(var(--i) * .05s + .3s)}
.nutri.in .nutri__bar i{transform:none}
.nutri__item em{font-style:normal;font-size:12px;font-weight:700;color:#e8635a;align-self:flex-end}

/* ---------- 섭취 방법 ---------- */
.howto{margin-top:64px;text-align:center}
.howto__title{font-size:20px;font-weight:700;color:var(--ink);margin-bottom:20px}
.howto ol{list-style:none;display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.howto li{width:170px;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;transform:scale(.9);transition:opacity .5s var(--ease) calc(var(--i) * .15s),transform .6s cubic-bezier(.34,1.56,.64,1) calc(var(--i) * .15s)}
.howto.in li{opacity:1;transform:none}
.howto li b{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:#f2effe;color:var(--purple);font-size:18px}
.howto li span{font-size:13px}

/* ---------- 주의사항 / 다른 제품 ---------- */
.caution{list-style:none;margin-top:20px;font-size:13px;display:flex;flex-direction:column;gap:4px}
.caution li::before{content:"·";margin-right:6px}
.others{padding:0 0 120px}
.others__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.other{display:flex;align-items:center;gap:16px;border:1px solid var(--line);border-radius:12px;padding:12px;transition:transform .35s var(--ease),box-shadow .35s}
.other:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.06)}
.other span{width:72px;height:72px;background:var(--tile);border-radius:8px;overflow:hidden;flex-shrink:0}
.other img{width:100%;height:100%;object-fit:cover}
.other b{font-size:14px;color:var(--ink);flex:1}
.other em{font-style:normal;font-size:12px;color:var(--muted)}
.formula{padding:110px 0}
.formula .p-head:not(:first-child){margin-top:96px}

@media (max-width:640px){
  .ratio{padding:16px 14px}
  .ratio__head,.ratio__row{grid-template-columns:1.2fr 1.4fr 56px;gap:8px}
  .nutri__grid{grid-template-columns:repeat(2,1fr)}
  .nut table{font-size:12px}
  .nut th,.nut td{padding:10px 4px}
  .howto li{width:100px}
  .others__grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .ratio__bar i,.nutri__bar i{transform:none!important}
  .ratio__bar em,.nutri__item,.howto li{opacity:1!important;transform:none!important}
  .fimg img{transform:none!important}
}
.kq__cards + .report{margin-top:56px}
.gallery__flavor[hidden]{display:none}
.p-hero__img--narrow{max-width:420px;background:transparent}
.p-hero__img--narrow img{border-radius:12px}
.fimg img{width:auto;max-width:100%;margin:0 auto;display:block}

/* ===================== 상세 모바일 최적화 ===================== */
.nut{overflow-x:auto;-webkit-overflow-scrolling:touch}
.nut table{min-width:340px}
.subnav__inner{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.subnav a{scroll-snap-align:center}
.buybar{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
@media (hover:none){
  .chip:hover,.kq__card:hover,.other:hover{transform:none}
  .chip:hover img{transform:none}
  .gallery__main:hover img{transform:none}
}
@media (max-width:640px){
  .buy{padding-top:12px;padding-bottom:56px}
  .crumb{margin-bottom:14px}
  .info__title{font-size:26px}
  .info__en{letter-spacing:.08em;font-size:11px}
  .info__tags em,.chip span,.spec-mini dt,.ratio__row small,.nut th,.cert p,.note,.ratio__cap,.fimg figcaption,.badge span,.tri__node p span{font-size:12px}
  .opt{margin-top:22px;padding-top:18px}
  .chip{min-height:44px}
  .flavor-chips--text .chip{padding:12px 0}
  .info__cta .btn{height:50px}
  .trust{gap:10px 16px}
  .p-hero{padding:64px 0 56px}
  .p-hero__lead{margin-top:28px}
  .badges{flex-wrap:wrap}
  .badge{width:calc(50% - 5px);padding:16px 0}
  .badges .badge:nth-child(3):last-child{width:calc(50% - 5px)}
  .p-head{margin-bottom:30px}
  .p-head h2{font-size:24px}
  .formula,.factory{padding:72px 0}
  .formula .p-head:not(:first-child){margin-top:64px}
  .community{padding-top:72px}
  .real{margin-top:64px;padding-top:56px;padding-bottom:56px}
  .quality{padding:72px 0}
  .spec{padding:64px 0 96px}
  .spec__table th,.spec__table td{padding:12px 8px;font-size:13px}
  .howto{margin-top:44px}
  .howto ol{gap:10px}
  .howto li{width:calc(33.33% - 8px);min-width:96px}
  .howto li b{width:68px;height:68px;font-size:15px}
  .gallery__flavor{left:10px;bottom:10px;padding:6px 10px 6px 6px}
  .gallery__flavor img{height:48px}
  .pdp .float-wx{bottom:calc(84px + env(safe-area-inset-bottom))}
  .pdp .wx-pop{bottom:calc(144px + env(safe-area-inset-bottom))}
  .others{padding-bottom:96px}
}
.nut th small{display:block;font-size:11px;color:#b0b4ba;font-weight:400}
.nut td{white-space:nowrap}
@media (max-width:640px){
  .nut table{min-width:440px}
  .nut td:first-child{white-space:normal;min-width:108px}
  .nut::after{content:"← 左右滑动查看 →";display:block;text-align:center;font-size:11px;color:#b0b4ba;margin-top:6px}
}

/* ---------- 돋보기 성적서 (원본 위 렌즈 = 중국어 번역본 확대) ---------- */
.lens{margin:8px auto 48px;max-width:560px}
.lens__stage{position:relative;width:100%;background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 18px 50px rgba(40,30,90,.12),0 0 0 1px var(--line);cursor:none;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.lens__stage img{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.lens__full{clip-path:circle(0 at var(--x,50%) var(--y,50%));transition:clip-path .9s var(--ease)}
.lens__stage.is-full .lens__full{clip-path:circle(150% at var(--x,50%) var(--y,50%))}
.lens__stage.is-full .lens__glass{opacity:0}
.lens__glass{position:absolute;left:0;top:0;border-radius:50%;background-repeat:no-repeat;background-color:#fff;pointer-events:none;will-change:transform;
  box-shadow:0 0 0 3px #fff,0 0 0 5px var(--purple),0 14px 34px rgba(60,40,140,.35),inset 0 0 18px rgba(123,92,255,.18);transition:opacity .4s}
.lens__glass::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.55),transparent 38%)}
.lens__glass::after{content:"";position:absolute;right:-26px;bottom:-26px;width:34px;height:12px;border-radius:6px;background:linear-gradient(#5a43d6,var(--purple));transform:rotate(45deg);box-shadow:0 4px 10px rgba(60,40,140,.3)}
.lens__tag{position:absolute;left:50%;top:-12px;transform:translateX(-50%);background:var(--purple);color:#fff;font-size:11px;font-weight:700;line-height:1;padding:5px 8px;border-radius:999px;box-shadow:0 4px 10px rgba(123,92,255,.35)}
.lens figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;font-size:13px;color:var(--ink-2);line-height:1.6}
.lens__toggle{flex:none;font-size:12px;font-weight:700;color:var(--purple);border:1.5px solid var(--purple);border-radius:999px;padding:6px 14px;background:#fff;transition:background .3s,color .3s}
.lens__toggle:hover{background:var(--purple);color:#fff}
.lens__hint{margin-top:6px;font-size:12px;color:var(--muted)}
.lens__hint::before{content:"🔍 "}
.quality .lens{margin-top:56px}
.p-head--sub{margin:72px 0 0}

/* 인증 아이콘 */
.icons ul{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:8px}
.icons li{display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease) calc(var(--i) * .1s),transform .6s var(--ease) calc(var(--i) * .1s)}
.icons.in li{opacity:1;transform:none}
.icons img{width:96px;height:96px;object-fit:contain;mix-blend-mode:multiply}
.icons span{font-size:13px;font-weight:600;color:var(--ink)}
.icons{margin-bottom:56px}

/* 1회 영양 수치 */
.stats{margin-bottom:64px}
.stats__row{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.07);padding:30px 0}
.stats__row>div{display:flex;flex-direction:column;align-items:center;gap:6px}
.stats__row>div+div{border-left:1px solid var(--line)}
.stats__row b{font-size:clamp(30px,4.6vw,46px);font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1}
.stats__row b small{font-size:.4em;font-weight:500;margin-left:2px;color:var(--ink-2)}
.stats__row>div>span{font-size:14px;color:var(--muted)}

/* 아미노산 */
.amino{background:#fff;border-radius:16px;padding:28px 26px;box-shadow:0 0 0 1px var(--line);margin-bottom:24px}
.amino__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px}
.amino__head b{font-size:20px;color:var(--purple)}
.amino__head span{font-size:12px;color:var(--muted)}
.amino ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px}
.amino li{display:grid;grid-template-columns:70px 1fr 56px;align-items:center;gap:10px;font-size:13px}
.amino li b{font-weight:600;color:var(--ink)}
.amino li em{font-style:normal;text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums}
.amino__bar{height:8px;background:#f2effe;border-radius:8px;overflow:hidden}
.amino__bar i{display:block;height:100%;width:var(--w);border-radius:8px;background:linear-gradient(90deg,#b7a6ff,var(--purple));transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease) calc(var(--i) * .04s + .2s)}
.amino.in .amino__bar i{transform:none}
.amino__score{margin-top:22px;text-align:center;font-size:clamp(18px,2.4vw,24px);font-weight:800;color:var(--purple)}
.amino__score i{font-style:normal;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--purple);color:#fff;font-size:15px;margin-right:8px;vertical-align:2px}

/* 섭취 방법 (사진형) */
.howto--img ol{gap:20px}
.howto--img li img{width:120px;height:116px;object-fit:contain;mix-blend-mode:multiply}
.howto--img li b{width:auto;height:auto;background:none;font-size:20px;color:var(--ink)}

/* 스쿱 안내 */
.scoop{margin-top:56px;background:#fff;border-radius:18px;box-shadow:0 16px 46px rgba(0,0,0,.08);padding:34px 28px;text-align:center}
.scoop__title{font-size:clamp(19px,2.6vw,24px);font-weight:800;color:var(--ink)}
.scoop__sub{margin-top:6px;font-size:14px;color:var(--muted)}
.scoop__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}
.scoop__grid>div{display:flex;flex-direction:column;align-items:center;gap:8px}
.scoop__grid img{width:100%;max-width:220px;mix-blend-mode:multiply}
.scoop__grid em{font-style:normal;font-size:14px;font-weight:700;padding:5px 14px;border-radius:999px;background:#eef0f3;color:var(--ink)}
.scoop__grid em.is-hl{background:var(--purple);color:#fff}
.scoop__grid span{font-size:13px;color:var(--ink-2)}
.scoop__strong{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);font-size:16px;font-weight:800;color:var(--ink)}

/* 공장 인증서 모음 */
.certs-img{margin:0 auto 40px;max-width:700px;border-radius:12px;overflow:hidden;background:#f4f5f7}
.certs-img img{width:100%;display:block;transform:scale(1.04);transition:transform 2s var(--ease)}
.certs-img.in img{transform:none}

@media (max-width:640px){
  .icons ul{grid-template-columns:repeat(3,1fr);row-gap:20px}
  .icons img{width:72px;height:72px}
  .stats__row{grid-template-columns:repeat(2,1fr);row-gap:22px;padding:22px 0}
  .stats__row>div:nth-child(3){border-left:0}
  .amino{padding:22px 16px}
  .amino ul{grid-template-columns:1fr}
  .howto--img li img{width:96px;height:92px}
  .scoop{padding:26px 16px}
  .scoop__grid{gap:12px}
  .scoop__grid em{font-size:12px;padding:4px 10px;white-space:nowrap}
  .lens figcaption{flex-direction:column;align-items:flex-start}
}
@media (hover:none){ .lens__stage{cursor:auto} }
@media (prefers-reduced-motion:reduce){
  .icons li{opacity:1!important;transform:none!important}
  .amino__bar i,.certs-img img{transform:none!important}
  .lens__full{transition:none}
}