@charset "utf-8";
/* ═══════════════════════════════════════════════
   21 글로우랩 GLOWLAB — 스킨케어 뷰티몰
   컨셉: 에디토리얼 — 비대칭 오버랩 히어로 / 세로 장식 텍스트 / 성분 % 바 / 스태거 그리드
   (17~20 과 완전히 다른 구도 — 여백 많은 매거진 톤)
   ═══════════════════════════════════════════════ */
:root{
  --rose:#c96b85;
  --rose-deep:#a94f6a;
  --nude:#f6eee9;
  --nude-2:#efe2da;
  --ink:#2e2226;
  --ink-2:#8a767d;
  --line:#e9dcd5;
  --white:#fff;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Pretendard Variable',Pretendard,'Noto Sans KR',sans-serif;color:var(--ink);background:var(--nude);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
input,select{font-family:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}

html.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .85s ease,transform .85s ease}
html.js .reveal.on{opacity:1;transform:none}

/* ── 헤더: 미니멀 한 줄 ── */
.hd{position:sticky;top:0;z-index:100;background:rgba(246,238,233,.94);border-bottom:1px solid var(--line)}
.hd-in{max-width:1340px;margin:0 auto;padding:20px 28px;display:flex;align-items:center;gap:40px}
.logo{font-size:21px;font-weight:800;letter-spacing:.26em;flex-shrink:0}
.logo b{color:var(--rose);font-weight:800}
.gnb{display:flex;gap:30px;margin-left:auto;align-items:center}
.gnb a{font-size:13.5px;font-weight:600;letter-spacing:.1em;color:var(--ink-2);padding:4px 0;position:relative}
.gnb a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1.5px;background:var(--rose);transition:width .25s}
.gnb a:hover{color:var(--ink)}
.gnb a:hover::after{width:100%}
.gnb a.active{color:var(--rose)}
.gnb a.active::after{width:100%}
.gnb .bag{font-size:13.5px;font-weight:700;color:var(--ink)}
.gnb .bag i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--rose);color:#fff;font-size:10.5px;font-weight:800;margin-left:5px;vertical-align:1px}
.m-burger{display:none}

#mNav{position:fixed;inset:0 0 0 auto;width:min(80vw,320px);background:var(--white);z-index:300;padding:64px 30px 30px;transform:translateX(100%);transition:transform .3s ease;box-shadow:-12px 0 44px rgba(46,34,38,.16)}
#mNav.open{transform:none}
#mNav a{display:block;padding:15px 4px;font-size:16px;font-weight:600;letter-spacing:.06em;border-bottom:1px solid var(--line)}
#mNav .m-close{position:absolute;top:16px;right:18px;font-size:26px;color:var(--ink-2)}
#mNav .m-tel{margin-top:24px;display:block;text-align:center;background:var(--rose);color:#fff;border-radius:4px;padding:14px;font-weight:700;letter-spacing:.08em;border-bottom:0}

/* ── 오버랩 히어로 ── */
.hero-ed{position:relative;padding:90px 0 110px;overflow:hidden}
.he-grid{max-width:1340px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:1fr 1fr;align-items:center}
.he-grid>*{min-width:0}
.he-photo{grid-column:2;grid-row:1;position:relative}
.he-photo img{width:100%;aspect-ratio:4/4.6;object-fit:cover}
.he-copy{grid-column:1/3;grid-row:1;max-width:520px;background:var(--white);padding:54px 56px;position:relative;z-index:2;margin-right:-120px;justify-self:start;margin-left:6%}
.he-copy .lb{font-size:11.5px;font-weight:700;letter-spacing:.34em;color:var(--rose)}
.he-copy h1{font-size:clamp(32px,3.8vw,50px);font-weight:300;letter-spacing:-.02em;line-height:1.3;margin:20px 0 18px}
.he-copy h1 b{font-weight:800}
.he-copy p{font-size:15.5px;color:var(--ink-2);max-width:360px}
.he-copy .cta{display:flex;gap:22px;margin-top:34px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:16px 34px;font-size:13.5px;font-weight:700;letter-spacing:.14em;transition:.25s}
.btn-rose{background:var(--ink);color:#fff}
.btn-rose:hover{background:var(--rose)}
.lnk{font-size:13.5px;font-weight:700;letter-spacing:.1em;border-bottom:1.5px solid var(--ink);padding-bottom:3px}
.lnk:hover{color:var(--rose);border-color:var(--rose)}
.he-vert{position:absolute;right:34px;top:50%;transform:translateY(-50%) rotate(90deg);transform-origin:center;font-size:11px;font-weight:700;letter-spacing:.5em;color:var(--ink-2);white-space:nowrap}
.he-stamp{position:absolute;left:6%;bottom:34px;font-size:12px;letter-spacing:.22em;color:var(--ink-2)}

/* ── 섹션 헤드 ── */
.sec-head{margin-bottom:44px}
.sec-head .lb{font-size:11.5px;font-weight:700;letter-spacing:.34em;color:var(--rose)}
.sec-head h2{font-size:clamp(26px,3vw,38px);font-weight:300;letter-spacing:-.015em;margin-top:12px;line-height:1.35}
.sec-head h2 b{font-weight:800}
.sec-head.center{text-align:center}

/* ── 베스트: 스태거 3열 ── */
.best{padding:30px 0 80px}
.stagger{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 28px}
.stagger>*:nth-child(3n+2){margin-top:54px}
.stagger>*:nth-child(3n+3){margin-top:108px}
.bp{display:block;transition:.25s}
.bp:hover{transform:translateY(-5px)}
.bp .ph{overflow:hidden;background:var(--white)}
.bp .ph img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .6s ease}
.bp:hover .ph img{transform:scale(1.04)}
.bp .no{font-size:11px;font-weight:700;letter-spacing:.3em;color:var(--ink-2);margin-top:16px;display:block}
.bp .nm{font-size:16.5px;font-weight:700;margin-top:5px;letter-spacing:.01em}
.bp .ds{font-size:13px;color:var(--ink-2);margin-top:3px}
.bp .pr{font-size:15.5px;font-weight:800;margin-top:8px}
.bp .pr del{color:var(--ink-2);font-weight:400;font-size:13px;margin-right:7px}
.bp .pr .dc{color:var(--rose);margin-right:5px}
.bp .tag{display:inline-block;margin-top:8px;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--rose);border:1px solid var(--rose);padding:3px 10px;border-radius:999px}

/* ── 성분 밴드 ── */
.ingr{background:var(--ink);color:#efe3da;padding:90px 0}
.ingr-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.ingr-grid>*{min-width:0}
.ingr .lb{font-size:11.5px;font-weight:700;letter-spacing:.34em;color:var(--rose)}
.ingr h2{font-size:clamp(26px,3vw,38px);font-weight:300;margin:14px 0 16px;line-height:1.4}
.ingr h2 b{font-weight:800;color:#fff}
.ingr p{font-size:14.5px;color:rgba(239,227,218,.66);max-width:420px}
.bars{margin-top:36px;display:grid;gap:22px}
.bar-it .t{display:flex;justify-content:space-between;font-size:13px;font-weight:600;letter-spacing:.06em}
.bar-it .t b{color:var(--rose);font-weight:800}
.bar-it .bar{margin-top:9px;height:3px;background:rgba(239,227,218,.16)}
.bar-it .bar i{display:block;height:100%;background:var(--rose)}
.ingr .ph{position:relative}
.ingr .ph img{width:100%;aspect-ratio:4/4.7;object-fit:cover}
.ingr .ph .cap{margin-top:14px;font-size:12px;letter-spacing:.18em;color:rgba(239,227,218,.5)}

/* ── 피부 고민 큐레이션 ── */
.concern{padding:86px 0}
.cn-chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:46px}
.cn-chips button{border:1px solid var(--line);background:var(--white);border-radius:999px;padding:11px 24px;font-size:14px;font-weight:600;color:var(--ink-2);transition:.2s}
.cn-chips button.on,.cn-chips button:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.cn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cn{background:var(--white);padding:14px 14px 22px;text-align:center;transition:.25s;display:block}
.cn:hover{transform:translateY(-5px);box-shadow:0 22px 48px rgba(46,34,38,.12)}
.cn img{width:100%;aspect-ratio:1/1.1;object-fit:cover}
.cn b{display:block;font-size:14.5px;font-weight:700;margin-top:14px}
.cn span{display:block;font-size:12px;color:var(--ink-2);margin-top:2px}
.cn .pr{display:block;font-size:14.5px;font-weight:800;margin-top:7px;color:var(--ink)}

/* ── 리추얼 스텝 ── */
.ritual-band{background:var(--nude-2);padding:86px 0}
.rt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;counter-reset:step}
.rt{background:var(--white);padding:38px 34px}
.rt .n{font-size:40px;font-weight:200;color:var(--rose);letter-spacing:-.02em}
.rt h3{font-size:17px;font-weight:800;margin:14px 0 8px;letter-spacing:.02em}
.rt p{font-size:13.5px;color:var(--ink-2)}
.rt .with{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-2)}
.rt .with b{color:var(--rose)}

/* ── 리뷰 인용 ── */
.quotes{padding:86px 0}
.qt-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.qt{background:var(--white);padding:40px 42px;position:relative}
.qt::before{content:"“";position:absolute;top:18px;left:26px;font-size:64px;font-weight:800;color:var(--nude-2);line-height:1}
.qt p{font-size:16.5px;font-weight:300;line-height:1.8;position:relative}
.qt p b{font-weight:700}
.qt .who{margin-top:18px;font-size:12px;letter-spacing:.14em;color:var(--ink-2)}

/* ── 푸터 ── */
.footer{background:var(--ink);color:#b5a3aa;padding:60px 0 40px;font-size:14px}
.ft-in{max-width:1160px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}
.ft-in .lg{font-size:19px;font-weight:800;letter-spacing:.26em;color:#fff}
.ft-in .lg b{color:var(--rose)}
.ft-in p{margin-top:14px;line-height:1.85;font-size:13px;color:#8d7a82}
.ft-in h4{color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.2em;margin-bottom:14px}
.ft-in li{margin-bottom:9px;font-size:13.5px}
.ft-in li a:hover{color:#fff}
.ft-in .tel{font-size:23px;font-weight:800;color:#fff;letter-spacing:.04em}
.ft-bot{max-width:1160px;margin:40px auto 0;padding:22px 28px 0;border-top:1px solid rgba(255,255,255,.1);font-size:12px;color:#776069;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;letter-spacing:.04em}

/* ── 서브 헤드 ── */
.sub-head{padding:64px 0 50px;text-align:center}
.sub-head .lb{font-size:11.5px;font-weight:700;letter-spacing:.34em;color:var(--rose)}
.sub-head h1{font-size:clamp(28px,3.4vw,42px);font-weight:300;letter-spacing:-.01em;margin-top:12px}
.sub-head h1 b{font-weight:800}
.sub-head .sub{margin-top:10px;font-size:14.5px;color:var(--ink-2)}

/* ── LIST ── */
.shop{padding:6px 0 90px}
.shop-top{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:46px;flex-wrap:wrap}
.shop-top button{border:1px solid var(--line);background:var(--white);border-radius:999px;padding:10px 22px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.shop-top button.on,.shop-top button:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.plist{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 28px}
.pl{display:block;transition:.25s;position:relative}
.pl:hover{transform:translateY(-5px)}
.pl .ph{overflow:hidden;background:var(--white);position:relative}
.pl .ph img{width:100%;aspect-ratio:4/4.8;object-fit:cover;transition:transform .6s}
.pl:hover .ph img{transform:scale(1.04)}
.pl .flag{position:absolute;top:14px;left:14px;z-index:2;background:var(--ink);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.12em;padding:5px 12px}
.pl .flag.sale{background:var(--rose)}
.pl .ings{position:absolute;left:0;right:0;bottom:0;background:var(--white);padding:10px 14px;font-size:11.5px;letter-spacing:.06em;color:var(--ink-2);opacity:0;transform:translateY(8px);transition:.3s}
.pl:hover .ings{opacity:1;transform:none}
.pl .ings b{color:var(--rose)}
.pl .nm{font-size:16px;font-weight:700;margin-top:15px}
.pl .ds{font-size:12.5px;color:var(--ink-2);margin-top:2px}
.pl .pr{font-size:15px;font-weight:800;margin-top:7px}
.pl .pr del{color:var(--ink-2);font-weight:400;font-size:12.5px;margin-right:6px}
.pl .pr .dc{color:var(--rose);margin-right:4px}

/* ── VIEW ── */
.view{padding:20px 0 90px}
.view-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:start}
.view-grid>*{min-width:0}
.vw-photo{position:sticky;top:110px}
.vw-photo img{width:100%;aspect-ratio:4/4.8;object-fit:cover}
.vw-photo .cap{margin-top:12px;font-size:11.5px;letter-spacing:.2em;color:var(--ink-2);text-align:center}
.vw .lb{font-size:11.5px;font-weight:700;letter-spacing:.3em;color:var(--rose)}
.vw h1{font-size:clamp(26px,2.8vw,36px);font-weight:300;letter-spacing:-.01em;margin-top:10px}
.vw h1 b{font-weight:800}
.vw .vsub{font-size:14.5px;color:var(--ink-2);margin-top:8px}
.vw-price{display:flex;align-items:baseline;gap:12px;margin:24px 0;padding:22px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.vw-price .now{font-size:30px;font-weight:800}
.vw-price .was{font-size:15px;color:var(--ink-2);text-decoration:line-through}
.vw-price .dc{font-size:13px;font-weight:800;color:var(--rose);letter-spacing:.06em}
.vw-bars{display:grid;gap:16px;margin-bottom:8px}
.vw-bars .bar-it .t{color:var(--ink)}
.vw-bars .bar-it .t b{color:var(--rose)}
.vw-bars .bar-it .bar{background:var(--nude-2)}
.opt-lbl{font-size:12.5px;font-weight:700;letter-spacing:.18em;margin:24px 0 11px;color:var(--ink)}
.opt-lbl span{color:var(--ink-2);font-weight:500;letter-spacing:.02em;margin-left:8px;font-size:12px}
.opt-row{display:flex;gap:9px;flex-wrap:wrap}
.opt-row button{border:1px solid var(--line);background:var(--white);padding:12px 20px;font-size:13.5px;font-weight:600;transition:.2s}
.opt-row button.on{border-color:var(--ink);background:var(--ink);color:#fff}
.opt-row button.soldout{opacity:.4;text-decoration:line-through;pointer-events:none}
.qty-row{display:flex;align-items:center;gap:14px;margin-top:24px}
.qty-row .lb{font-size:12.5px;font-weight:700;letter-spacing:.18em}
.qty{display:flex;border:1px solid var(--ink)}
.qty button{width:42px;height:44px;font-size:17px;color:var(--ink);background:var(--white)}
.qty input{width:52px;text-align:center;border:0;outline:0;font-size:15px;font-weight:700;background:var(--white)}
.sum-row{display:flex;justify-content:space-between;align-items:baseline;background:var(--white);padding:18px 22px;margin-top:22px}
.sum-row .lb{font-size:12.5px;font-weight:700;letter-spacing:.18em;color:var(--ink-2)}
.sum-row .sum{font-size:25px;font-weight:800;color:var(--rose)}
.vw-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.vw-cta .btn{padding:17px}
.btn-line{border:1px solid var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.vw-note{margin-top:14px;font-size:12px;color:var(--ink-2)}
.vw-secs{margin-top:80px;display:grid;gap:54px}
.vw-secs h2{font-size:13px;font-weight:700;letter-spacing:.3em;color:var(--rose);margin-bottom:16px}
.vw-secs .txt{font-size:15px;color:var(--ink-2);line-height:1.95;max-width:760px}
.vw-secs .txt b{color:var(--ink)}
.howto{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.howto li{background:var(--white);padding:26px 26px 28px}
.howto .n{font-size:28px;font-weight:200;color:var(--rose)}
.howto b{display:block;font-size:15px;font-weight:700;margin-top:10px}
.howto span{font-size:13px;color:var(--ink-2);margin-top:4px;display:block}

/* ── CART ── */
.cart{padding:10px 0 90px}
.ct-list{max-width:860px;margin:0 auto}
.ct-it{display:grid;grid-template-columns:110px 1fr auto;gap:24px;background:var(--white);padding:22px;align-items:center;margin-bottom:14px}
.ct-it img{width:110px;height:128px;object-fit:cover}
.ct-it .nm{font-size:16px;font-weight:700}
.ct-it .op{font-size:12.5px;color:var(--ink-2);margin-top:4px;letter-spacing:.04em}
.ct-it .unit{font-size:13.5px;color:var(--ink-2);margin-top:10px}
.ct-it .rt{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.ct-it .line-sum{font-size:17px;font-weight:800}
.ct-it .rm{font-size:11.5px;color:var(--ink-2);letter-spacing:.14em;text-decoration:underline}
.ct-foot{max-width:860px;margin:26px auto 0;background:var(--ink);color:#efe3da;padding:30px 36px}
.ct-foot .row{display:flex;justify-content:space-between;font-size:13.5px;padding:5px 0;color:rgba(239,227,218,.7)}
.ct-foot .row b{color:#fff;font-weight:700}
.ct-foot .tot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid rgba(255,255,255,.16);margin-top:12px;padding-top:16px}
.ct-foot .tot .lb{font-size:12.5px;font-weight:700;letter-spacing:.22em}
.ct-foot .tot .v{font-size:27px;font-weight:800;color:#ffb9cb}
.ct-foot .btn{width:100%;margin-top:20px;background:var(--rose);color:#fff}
.ct-foot .btn:hover{background:#fff;color:var(--ink)}
.ct-foot .ship-tx{margin-top:12px;font-size:12px;color:rgba(239,227,218,.55);text-align:center;letter-spacing:.04em}

/* ── RITUAL 페이지 ── */
.ritual-pg{padding:10px 0 90px}
.rp-hero{display:grid;grid-template-columns:1fr 1fr;background:var(--white);margin-bottom:60px}
.rp-hero>*{min-width:0}
.rp-hero .ph{min-height:380px;position:relative}
.rp-hero .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rp-hero .bd{padding:54px 56px;display:flex;flex-direction:column;justify-content:center}
.rp-hero .lb{font-size:11.5px;font-weight:700;letter-spacing:.34em;color:var(--rose)}
.rp-hero h2{font-size:clamp(24px,2.8vw,34px);font-weight:300;margin:14px 0 12px;line-height:1.4}
.rp-hero h2 b{font-weight:800}
.rp-hero p{font-size:14.5px;color:var(--ink-2)}

/* ── ABOUT ── */
.about{padding:10px 0 90px}
.ab-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.ab{background:var(--white);padding:36px 38px}
.ab .em{font-size:24px}
.ab h3{font-size:15px;font-weight:800;letter-spacing:.06em;margin:12px 0 9px}
.ab p{font-size:13.5px;color:var(--ink-2);line-height:1.85}
.ab b{color:var(--rose-deep)}

/* ── 반응형 ── */
@media (max-width:1024px){
  .gnb{display:none}
  .m-burger{display:block;font-size:22px;margin-left:auto}
  .hero-ed{padding:48px 0 70px}
  .he-grid{grid-template-columns:1fr}
  .he-photo{grid-column:1;grid-row:1}
  .he-copy{grid-column:1;grid-row:2;margin:-70px 5% 0;max-width:none;padding:36px 32px}
  .he-vert,.he-stamp{display:none}
  .stagger{grid-template-columns:1fr 1fr;gap:26px 18px}
  .stagger>*:nth-child(3n+2),.stagger>*:nth-child(3n+3){margin-top:0}
  .stagger>*:nth-child(2n+2){margin-top:42px}
  .ingr-grid{grid-template-columns:1fr;gap:40px}
  .cn-grid{grid-template-columns:1fr 1fr}
  .rt-grid,.howto{grid-template-columns:1fr}
  .qt-grid{grid-template-columns:1fr}
  .plist{grid-template-columns:1fr 1fr;gap:30px 18px}
  .view-grid{grid-template-columns:1fr;gap:36px}
  .vw-photo{position:static}
  .rp-hero{grid-template-columns:1fr}
  .ab-grid{grid-template-columns:1fr}
  .ft-in{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .wrap{padding:0 18px}
  .he-copy{padding:28px 22px;margin:-50px 4% 0}
  .he-copy .cta{flex-direction:column;align-items:flex-start;gap:16px}
  .stagger{grid-template-columns:1fr}
  .stagger>*:nth-child(2n+2){margin-top:0}
  .cn-grid{grid-template-columns:1fr 1fr;gap:12px}
  .plist{grid-template-columns:1fr 1fr;gap:22px 12px}
  .opt-row{flex-direction:column}
  .opt-row button{width:100%}
  .vw-cta{grid-template-columns:1fr}
  .ct-it{grid-template-columns:84px 1fr}
  .ct-it img{width:84px;height:98px}
  .ct-it .rt{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
  .ft-in{grid-template-columns:1fr}
  .ft-bot{flex-direction:column}
}