/* ═══════ 제품 목록 · 상세 공통 ═══════ */
.series{position:relative;z-index:2;padding-top:var(--hd);background:#fff;border-bottom:1px solid var(--line)}
.series .wrap{display:flex;gap:6px;align-items:center;overflow-x:auto;scrollbar-width:none;padding-block:12px}
.series .wrap::-webkit-scrollbar{display:none}
.series .mono{color:var(--ink3);margin-right:10px;flex:none}
.series a{flex:none;padding:9px 14px;border-radius:999px;font:700 12px/1 Inter;letter-spacing:.04em;color:var(--ink2);transition:.3s}
.series a:hover{background:var(--bg2)} .series a.on{background:var(--navy);color:#fff}
.pd.home .series a.on{background:#A44D67}

.phero{padding-block:clamp(36px,5vw,70px) clamp(50px,6vw,90px);background:linear-gradient(180deg,#F6F8FC,#fff)}
.pd.home .phero{background:linear-gradient(180deg,#FAF3F5,#fff)}
.phero .in{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,5vw,80px);align-items:center}
.phero h1{font:800 clamp(56px,7.6vw,128px)/.9 Inter;letter-spacing:-.06em;margin-top:18px}
.phero .kr{margin-top:18px;font:700 clamp(22px,2vw,30px)/1.35 Pretendard;letter-spacing:-.02em}
.phero .lead{margin-top:14px;max-width:500px}
.phero .ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.pvis{border-radius:32px;overflow:hidden;aspect-ratio:4/5;max-height:78vh;background:var(--bg2)}
.pvis img{width:100%;height:100%;object-fit:cover}

.feat-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:14px;align-items:stretch}
.fbig{border-radius:26px;overflow:hidden;min-height:440px;position:relative}
.fbig img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover}

/* 모드 선택 */
.modes{display:grid;grid-template-columns:.8fr 1fr .9fr;gap:20px;align-items:stretch}
.mlist{display:flex;flex-direction:column;gap:8px}
.mlist button{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-radius:18px;background:#fff;border:1px solid var(--line);text-align:left;transition:.35s var(--ease)}
.mlist button b{font:800 15px/1 Inter;letter-spacing:.02em} .mlist button span{font:500 13px/1 Pretendard;color:var(--ink3)}
.mlist button.on{background:var(--ink);border-color:var(--ink);color:#fff} .mlist button.on span{color:#C9CCD3}
.pd.home .mlist button.on{background:#A44D67;border-color:#A44D67}
.mview{border-radius:26px;overflow:hidden;background:#EDEBE7;aspect-ratio:1/1}
.mview img{width:100%;height:100%;object-fit:cover;transition:opacity .25s}
.mdesc{border-radius:26px;background:#fff;border:1px solid var(--line);padding:30px;display:flex;flex-direction:column;justify-content:center}
.mdesc .mono{color:#A44D67} .mdesc h3{font:800 40px/1 Pretendard;letter-spacing:-.04em;margin:14px 0 24px}
.mdesc dl{display:grid;grid-template-columns:auto 1fr;gap:14px 20px;font:500 15px/1.4 Pretendard;border-top:1px solid var(--line);padding-top:20px}
.mdesc dt{color:var(--ink3)} .mdesc dd{font-weight:700}

/* 사용법 */
.howto{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.howto li{min-width:0}
.howto .m{border-radius:20px;overflow:hidden;aspect-ratio:4/3;background:var(--bg2)}
.howto .m img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)} .howto li:hover .m img{transform:scale(1.05)}
.howto b{display:block;margin-top:18px;font:700 12px/1 Inter;color:#A44D67}
.howto h3{margin:10px 0 6px;font:700 18px/1.35 Pretendard} .howto p{font:400 14px/1.6 Pretendard;color:var(--ink2)}
.pair{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;margin-top:40px;padding:22px 28px;border-radius:24px;background:linear-gradient(120deg,#FBEFF2,#F2F5FB)}
.pair img{height:120px;width:auto}
.pair h3{margin:10px 0 4px;font:700 20px/1.3 Pretendard} .pair p{font:400 14px/1.6 Pretendard;color:var(--ink2)}

.box-list{list-style:none;margin-top:26px;border-top:1px solid var(--ink)}
.box-list li{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid var(--line);font:400 15px/1.4 Pretendard}
.box-list b{font-weight:700} .box-list span{color:var(--ink2)}

.adbox{border-radius:20px;border:1px solid var(--line);padding:24px 28px;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;background:#FCFCFD}
.adbox b{font:700 14px/1.3 Pretendard} .adbox p{font:400 13px/1.7 Pretendard;color:var(--ink2)} .adbox span{font:600 12px/1.3 Pretendard;color:var(--ink3);white-space:nowrap}

/* 하단 고정 구매바 */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:80;padding-bottom:env(safe-area-inset-bottom,0px);background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .6s var(--ease)}
.buybar.on{transform:none}
.buybar .in{display:flex;align-items:center;gap:14px;height:76px}
.buybar img{height:52px;width:auto}
.buybar div{flex:1;min-width:0} .buybar b{display:block;font:800 16px/1.2 Inter} .buybar span{font:500 12px/1.3 Pretendard;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.buybar .btn{height:46px;padding:0 20px}
body.pd .badge-note{bottom:90px}

/* ULTIGHT 카트리지 깊이 탐색 */
.depth{display:grid;grid-template-columns:.7fr 1.3fr;gap:20px;align-items:stretch}
.depth .sel{display:flex;flex-direction:column;gap:8px}
.depth .sel button{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:center;padding:20px 22px;border-radius:18px;background:#fff;border:1px solid var(--line);text-align:left;transition:.35s var(--ease)}
.depth .sel button b{grid-row:span 2;font:300 34px/1 Inter;letter-spacing:-.04em;color:var(--navy)} .depth .sel button b small{font-size:.4em;font-weight:600;letter-spacing:0}
.depth .sel button strong{font:700 15px/1.2 Pretendard} .depth .sel button span{font:500 12.5px/1.3 Pretendard;color:var(--ink3)}
.depth .sel button.on{background:var(--navy);border-color:var(--navy)} .depth .sel button.on b,.depth .sel button.on strong{color:#fff} .depth .sel button.on span{color:#C9D4F0}
.dview{position:relative;border-radius:26px;overflow:hidden;min-height:440px;background:linear-gradient(180deg,#FCEDE5 0 9%,#F7D3C8 9% 48%,#F5E2BE 48% 64%,#ECB9AB 64% 74%,#D88E84 74% 100%)}
.dview::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(170deg,rgba(255,240,235,.0) 0 18px,rgba(255,240,235,.35) 18px 20px);mask:linear-gradient(180deg,transparent 9%,#000 9% 48%,transparent 48% 74%,#000 74%)}
.dview .lbl{position:absolute;left:18px;font:700 12px/1 Pretendard;color:rgba(80,40,30,.6)}
.dview .head{position:absolute;left:50%;top:-6px;transform:translateX(-50%);width:42%;height:44px;border-radius:0 0 22px 22px;background:linear-gradient(180deg,#e9edf3,#cfd6e1);box-shadow:0 10px 24px rgba(12,46,130,.18)}
.dview .beam{position:absolute;left:50%;top:38px;width:34%;transform:translateX(-50%);clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(180deg,rgba(62,107,230,.05),rgba(62,107,230,.35));transition:height .8s var(--ease)}
.dview .dots{position:absolute;left:24%;right:24%;display:flex;justify-content:space-between;transition:top .8s var(--ease)}
.dview .dots i{width:26px;height:14px;border-radius:50%;background:radial-gradient(closest-side,#fff 0 30%,#7F9BEF 60%,rgba(62,107,230,0));box-shadow:0 0 18px 4px rgba(255,255,255,.95);animation:dp 1.6s ease-in-out infinite}.dview .dots i:nth-child(2n){animation-delay:.4s}@keyframes dp{50%{transform:scale(1.25)}}
.dview .rule{position:absolute;right:18px;display:flex;align-items:center;gap:8px;font:700 12px/1 Inter;color:var(--navy);transition:top .8s var(--ease)}
.dview .rule::before{content:"";width:28px;height:1px;background:var(--navy)}
.supp{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.supp .card b{font:700 12px/1 Inter;color:var(--navy)}

/* 제품 목록 */
.plist{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pcard{position:relative;border-radius:26px;overflow:hidden;background:var(--bg2);display:flex;flex-direction:column;min-width:0;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.pcard:hover{transform:translateY(-6px);box-shadow:0 28px 50px rgba(12,46,130,.1)}
.pcard .im{aspect-ratio:4/5;overflow:hidden;position:relative}
.pcard .im img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)} .pcard:hover .im img{transform:scale(1.05)}
.pcard .tags{position:absolute;left:16px;top:16px;display:flex;gap:6px}
.pcard .tags span{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);font:700 11px/1 Inter;color:var(--navy)}
.pcard .bd{padding:22px 24px 24px;background:#fff;flex:1;display:flex;flex-direction:column}
.pcard .ln{font:600 11px/1 Inter;letter-spacing:.14em;color:var(--navy)} .pcard.home .ln{color:#A44D67}
.pcard h3{margin:10px 0 6px;font:800 28px/1 Inter;letter-spacing:-.04em}
.pcard p{font:400 14px/1.6 Pretendard;color:var(--ink2);flex:1}
.pcard .meta{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font:600 12.5px/1 Pretendard;color:var(--ink2)}
.pcard .meta em{font-style:normal;color:var(--navy)}
.pcard.dim{display:none}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{padding:9px 14px;border-radius:999px;border:1px solid var(--line);font:700 12px/1 Inter;color:var(--ink2);transition:.3s}
.chips button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.guide{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gcard{position:relative;border-radius:30px;overflow:hidden;min-height:380px;padding:clamp(28px,3vw,44px);display:flex;flex-direction:column;justify-content:flex-end;color:#fff;isolation:isolate}
.gcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.gcard::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(10,20,50,.72),rgba(10,20,50,.1) 70%)}
.gcard h3{font:700 clamp(26px,2.4vw,36px)/1.2 Pretendard;letter-spacing:-.03em} .gcard p{margin-top:10px;font:400 15px/1.6 Pretendard;color:#E6EBF7;max-width:420px}
.gcard ul{list-style:none;display:flex;gap:6px;flex-wrap:wrap;margin-top:18px} .gcard li{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);font:600 12px/1 Pretendard}
.qspec{display:none}

@media (max-width:1100px){
  .phero .in,.feat-grid,.modes,.depth,.guide{grid-template-columns:1fr} .pvis{aspect-ratio:4/3}
  .howto{grid-template-columns:1fr 1fr} .plist{grid-template-columns:1fr 1fr} .supp{grid-template-columns:1fr 1fr}
  .mlist{flex-direction:row;flex-wrap:wrap} .mlist button{flex:1 1 30%}
}
@media (max-width:720px){
  .howto,.plist,.supp{grid-template-columns:1fr} .pair{grid-template-columns:1fr;text-align:left} .pair img{height:90px}
  .adbox{grid-template-columns:1fr} .buybar span{display:none} .buybar .btn.ghost{display:none} .buybar img{height:40px}
  .mlist button{flex:1 1 45%}
}

/* ═══ 모바일 2단계 — 14. 하단 고정바 · 15. 상단 탭 1단 (10-07) ═══ */
.series-m{display:none}
.buybar.clinic .btn.navy{background:var(--navy)}
@media (max-width:720px){
  .buybar .in{height:64px;gap:12px}
  .buybar img{height:38px}
  .buybar b{font-size:15px}
  .buybar .btn.navy{flex:0 0 auto;min-width:52%;height:46px;justify-content:center}
  .buybar div{min-width:0}
  body.pd .badge-note{bottom:80px}
  .series{display:none}
  .phero{padding-top:calc(var(--hd) + 14px)}
  .series-m{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:10px -16px 6px;padding:0 16px}
  .series-m::-webkit-scrollbar{display:none}
  .series-m .mono{display:none}
  .series-m a{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font:700 12px/1 Inter;letter-spacing:.04em;color:var(--ink2)}
  .series-m a.on{background:var(--navy);border-color:var(--navy);color:#fff}
  .pd.home .series-m a.on{background:#A44D67;border-color:#A44D67}
  .lnav a{padding:0 14px;min-height:46px;display:inline-flex;align-items:center}
}