/* =========================================================================
   BP+ FUSION SKIN — 골격=MEDIBELLA 롱스크롤 · 카피=RETURNITY 마스트헤드
   컬러·타이포는 bp-pop.css(POP SYSTEM v1.0 — 키컬러 PDF 확정)가 최후 로드로 오버라이드:
   타일 화이트 #F5F5F3 75% · 글로우 블루 #5BC8E4 포인트(마침표·넘버링·할인율) · 그리드 블랙 #26282A 10%
   아래 --bp 값은 블루 톤 스케일 어두운 톤(텍스트 대비 전용)으로 치환됨. 면(面) 사용 금지 원칙 유지
   ========================================================================= */

:root{
  --bp:#2A7A94; --bp-d:#1F5D71;            /* 점 액센트(CTA호버·active·가격·구분자). 면 금지 */
  --silver:#C7CBD0; --silver-d:#8A9099;    /* 금속 하드웨어 */
  --ink:#0A0A0A; --paper:#fff; --mist:#F5F5F5;
  --m55:#555; --m66:#666; --m99:#999; --mA6:#A6A6A6;
  --b06:rgba(10,10,10,.06); --b10:rgba(10,10,10,.10); --b14:rgba(10,10,10,.14);
  --b20:rgba(10,10,10,.20); --b40:rgba(10,10,10,.40); --b55:rgba(10,10,10,.55);
  --w70:rgba(255,255,255,.70); --w82:rgba(255,255,255,.82);
  --scrim:var(--b55);
  --scrim-grad:linear-gradient(180deg,transparent 28%,rgba(10,10,10,.62) 100%);
  --bp10:rgba(91,200,228,.10); --bp16:rgba(91,200,228,.16); --bp40:rgba(91,200,228,.40);
  --red:#E53935;
  --disp:'Albert Sans','Pretendard',sans-serif;
  --body:'Pretendard',-apple-system,'Apple SD Gothic Neo',sans-serif;
  --lat:'Albert Sans','Helvetica Neue',Arial,sans-serif;
  --t-h2:clamp(26px,3.2vw,44px);
  --t-disp:clamp(46px,8vw,104px);
  --t-disp-sm:clamp(38px,5.4vw,68px);
  --ls-cap:.22em;
  --s8:8px;--s16:16px;--s24:24px;--s40:40px;--s64:64px;--s96:96px;--s120:120px;
  --gut:46px; --maxw:1280px; --radius:0px; --r-chip:999px;
  --ease:cubic-bezier(.22,.61,.36,1); --dur:.8s;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--paper);
  line-height:1.6;font-size:15px;-webkit-font-smoothing:antialiased;word-break:keep-all;letter-spacing:-.01em}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s40)}
.lat{font-family:var(--lat)}

/* eyebrow / museum kicker */
.ey{font-family:var(--lat);font-size:11px;font-weight:600;letter-spacing:var(--ls-cap);
  text-transform:uppercase;color:var(--m99)}
.ey .dot{color:var(--bp)}
/* section heading (3-row pairing) */
.sh{font-family:var(--body);font-weight:800;font-size:var(--t-h2);line-height:1.18;letter-spacing:-.02em;margin:10px 0 0}
.sh em{font-style:normal;color:var(--bp)}
.sub{color:var(--m66);font-size:14px;margin-top:12px;max-width:560px}

/* ---------- marquee ---------- */
.marquee{background:var(--ink);color:#fff;overflow:hidden;white-space:nowrap;height:38px;display:flex;align-items:center}
.marquee .track{display:inline-flex;gap:34px;padding-left:34px;animation:mq 26s linear infinite;will-change:transform}
.marquee span{font-family:var(--lat);font-size:12px;letter-spacing:.16em;font-weight:500}
.marquee b{color:var(--bp);font-weight:700}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- header ---------- */
.gnb{position:sticky;top:0;z-index:60;background:var(--w82);backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--b06)}
.gnb .row{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font-family:var(--lat);font-weight:800;font-size:23px;letter-spacing:-.02em}
.logo .p{color:var(--bp)}
.nav{display:flex;gap:30px}
.nav a{font-size:14px;font-weight:600;color:var(--ink);position:relative;padding:6px 0;opacity:.86}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--bp);transition:width .35s var(--ease)}
.nav a:hover{opacity:1}.nav a:hover::after{width:100%}
.util{display:flex;gap:18px;align-items:center}
.util button{font-size:13px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:6px;opacity:.8}
.util button:hover{opacity:1;color:var(--bp-d)}
.cartnum{font-family:var(--lat);font-size:11px;color:var(--bp)}
.burger{display:none}

/* GNB overlay */
.gnbov{position:fixed;inset:0;z-index:100;background:var(--ink);color:#fff;transform:translateY(-100%);
  transition:transform .6s var(--ease);display:flex;flex-direction:column;padding:var(--s64) var(--s40)}
.gnbov.on{transform:none}
.gnbov .x{position:absolute;top:26px;right:32px;font-family:var(--lat);font-size:13px;letter-spacing:.1em;color:#fff}
.gnbov nav{margin:auto 0;display:flex;flex-direction:column;gap:6px}
.gnbov nav a{font-family:var(--disp);font-weight:700;font-size:clamp(34px,6vw,72px);line-height:1.04;color:#fff;
  display:flex;align-items:baseline;gap:16px;transition:color .3s,transform .4s var(--ease)}
.gnbov nav a .n{font-family:var(--lat);font-size:13px;color:var(--silver);font-weight:500}
.gnbov nav a:hover{color:var(--bp);transform:translateX(14px)}

/* ---------- hero ---------- */
.hero{position:relative;border-bottom:1px solid var(--b06);overflow:hidden}
.hero .slide{display:none;grid-template-columns:1.05fr .95fr;min-height:min(86vh,760px)}
.hero .slide.on{display:grid}
.hero .cap{display:flex;flex-direction:column;justify-content:center;padding:var(--s64) var(--s96);gap:6px}
.hero .lead{font-size:15px;color:var(--m66);font-weight:600;overflow:hidden}
.hero .punch{font-size:clamp(24px,3vw,40px);font-weight:800;line-height:1.22;letter-spacing:-.02em;margin:6px 0 4px;overflow:hidden}
.hero .en{font-family:var(--disp);font-weight:800;font-size:var(--t-disp);line-height:.86;letter-spacing:-.01em;color:var(--ink);overflow:hidden}
.hero .en .ln{display:block;overflow:hidden}
.hero .en .ln i{display:inline-block;font-style:normal;transform:translateY(110%);transition:transform .9s var(--ease)}
.hero .slide.on .en .ln i{transform:none}
.hero .desc{color:var(--m66);font-size:14px;margin-top:18px;max-width:380px}
.hero .cta{margin-top:30px;display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  border:1.5px solid var(--ink);padding:13px 26px;font-size:13px;font-weight:700;letter-spacing:.02em;
  transition:.35s var(--ease)}
.hero .cta:hover{background:var(--bp);border-color:var(--bp);color:#fff;gap:16px}
.hero .vis{background:var(--mist);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.hero .vis img{width:74%;max-height:78%;object-fit:contain;filter:drop-shadow(0 30px 60px rgba(10,10,10,.12));
  transform:scale(1.04);opacity:0;transition:opacity 1s var(--ease),transform 1.4s var(--ease)}
.hero .slide.on .vis img{opacity:1;transform:none}
.hero .vis .seal{position:absolute;right:40px;top:40px;width:78px;height:78px;border-radius:50%;
  border:1px solid var(--silver);display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--lat);font-size:10px;letter-spacing:.12em;color:var(--silver-d);background:var(--w70)}
.hero .dots{position:absolute;left:var(--s96);bottom:34px;display:flex;gap:10px;z-index:5}
.hero .dots button{width:30px;height:2px;background:var(--b14)}
.hero .dots button.on{background:var(--bp)}
.hero .pager{position:absolute;right:32px;bottom:30px;font-family:var(--lat);font-size:12px;color:var(--m99);letter-spacing:.1em}

/* ---------- generic section ---------- */
.sec{padding:var(--s120) 0}
.sec.tight{padding:var(--s96) 0}
.sec.mist{background:var(--mist)}
.sechead{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:var(--s40);gap:24px;flex-wrap:wrap}
.tabs{display:flex;gap:20px}
.tabs button{font-size:14px;font-weight:600;color:var(--m99);position:relative;padding-bottom:8px;letter-spacing:-.01em}
.tabs button.on{color:var(--ink)}
.tabs button.on::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:var(--bp)}

/* ---------- line band (category lines) ---------- */
.lineband{border-top:1px solid var(--b10)}
.lineband .ln{display:flex;align-items:center;gap:28px;padding:26px 0;border-bottom:1px solid var(--b10);
  transition:.4s var(--ease);position:relative}
.lineband .ln .en{font-family:var(--disp);font-weight:800;font-size:var(--t-disp-sm);line-height:1;letter-spacing:-.01em;
  transition:.4s var(--ease)}
.lineband .ln .ko{font-size:15px;color:var(--m66);font-weight:600}
.lineband .ln .idx{font-family:var(--lat);font-size:12px;color:var(--mA6);width:38px}
.lineband .ln .go{margin-left:auto;font-family:var(--lat);font-size:12px;letter-spacing:.12em;color:var(--m99);transition:.4s var(--ease)}
.lineband .ln:hover{padding-left:18px}
.lineband .ln:hover .en{color:var(--bp)}
.lineband .ln:hover .go{color:var(--bp);transform:translateX(8px)}

/* ---------- product grid ---------- */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut) 30px}
.pcard{position:relative;display:flex;flex-direction:column}
.pcard .ph{position:relative;aspect-ratio:3/4;background:var(--mist);overflow:hidden}
.pcard .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:14%;
  transition:transform .7s var(--ease)}
.pcard:hover .ph img{transform:scale(1.05)}
.pcard .badge{position:absolute;left:12px;top:12px;z-index:3;font-family:var(--lat);font-size:10px;font-weight:700;
  letter-spacing:.08em;padding:4px 9px;background:var(--ink);color:#fff}
.pcard .badge.best{background:var(--bp)}
.pcard .badge.soon{background:var(--silver-d)}
.pcard .add{position:absolute;left:0;right:0;bottom:0;z-index:3;background:var(--ink);color:#fff;
  font-size:13px;font-weight:700;letter-spacing:.04em;height:46px;display:flex;align-items:center;justify-content:center;gap:8px;
  transform:translateY(100%);transition:transform .4s var(--ease)}
.pcard .add:hover{background:var(--bp)}
.pcard:hover .add{transform:none}
.pcard .info{padding:16px 2px 0}
.pcard .brand{font-family:var(--lat);font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--silver-d);text-transform:uppercase}
.pcard .brand .ln{color:var(--m99)}
.pcard .nm{font-size:15px;font-weight:700;margin:7px 0 5px;line-height:1.32;letter-spacing:-.01em}
.pcard .bl{font-size:13px;color:var(--m99);line-height:1.45;min-height:19px}
.pcard .pr{font-size:15px;font-weight:700;margin-top:10px;font-family:var(--body)}
.pcard .pr.soon{color:var(--mA6);font-weight:600;font-size:13px}
.gridfoot{margin-top:var(--s64);text-align:center}
.btn-line{display:inline-flex;align-items:center;gap:10px;border:1.5px solid var(--ink);padding:14px 34px;
  font-size:13px;font-weight:700;letter-spacing:.04em;transition:.35s var(--ease)}
.btn-line:hover{background:var(--ink);color:#fff;gap:16px}

/* ---------- editorial split promo ---------- */
.split{position:relative;min-height:560px;display:grid;grid-template-columns:1fr 1fr;background:var(--ink);color:#fff;overflow:hidden}
.split .txt{display:flex;flex-direction:column;justify-content:center;padding:var(--s96);gap:8px}
.split .txt .en{font-family:var(--disp);font-weight:800;font-size:var(--t-disp-sm);line-height:.94}
.split .txt .ko{font-size:clamp(20px,2.4vw,32px);font-weight:700;line-height:1.4;margin-top:14px;color:#fff}
.split .txt .ko em{font-style:normal;color:var(--bp)}
.split .txt .cta{margin-top:30px;align-self:flex-start;border:1.5px solid #fff;padding:13px 28px;font-size:13px;font-weight:700;letter-spacing:.04em;transition:.35s var(--ease)}
.split .txt .cta:hover{background:var(--bp);border-color:var(--bp)}
.split .vis{background:var(--silver) center/cover;position:relative}
.split .vis img{width:100%;height:100%;object-fit:contain;padding:8%;background:var(--mist)}
/* 실사진(매장 전경 등): 제품 컷아웃과 달리 여백·mist 없이 full-bleed cover */
.split .vis.photo{background:var(--ink)}
.split .vis.photo img{object-fit:cover;padding:0;background:transparent}

/* ---------- 3-axis band ---------- */
.axis{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--b10);border-block:1px solid var(--b10)}
.axis .a{background:var(--paper);padding:var(--s64) var(--s40);transition:.4s var(--ease);min-height:300px;display:flex;flex-direction:column}
.axis .a:hover{background:var(--mist)}
.axis .a .en{font-family:var(--disp);font-weight:800;font-size:clamp(28px,2.8vw,40px);line-height:1;letter-spacing:-.01em}
.axis .a .ko{font-size:15px;color:var(--m66);margin-top:16px;line-height:1.6;flex:1}
.axis .a .go{font-family:var(--lat);font-size:12px;letter-spacing:.12em;color:var(--m99);margin-top:20px}
.axis .a:hover .en{color:var(--bp)}
.axis .a:hover .go{color:var(--bp)}

/* ---------- numbers ---------- */
.numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.numbers .n{text-align:center}
.numbers .n .v{font-family:var(--disp);font-weight:800;font-size:var(--t-disp-sm);line-height:1;letter-spacing:-.02em}
.numbers .n .v sup{color:var(--bp);font-size:.5em;vertical-align:super}
.numbers .n .l{font-size:13px;color:var(--m66);margin-top:14px;letter-spacing:.02em}

/* ---------- manifesto ---------- */
.mani{text-align:center}
.mani .en{font-family:var(--disp);font-weight:800;font-size:var(--t-disp);line-height:1.08;letter-spacing:-.01em}
.mani .en em{font-style:normal;color:var(--bp)}
.mani .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--b10);margin-top:var(--s64);border:1px solid var(--b10);text-align:left}
.mani .cards .c{background:var(--paper);padding:var(--s40) var(--s24)}
.mani .cards .c .i{font-family:var(--lat);font-size:13px;color:var(--bp);font-weight:700}
.mani .cards .c h4{font-size:16px;margin:14px 0 8px;font-weight:700}
.mani .cards .c p{font-size:13px;color:var(--m99);line-height:1.55}

/* ---------- insight 3-up ---------- */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.g3 .card .ph{aspect-ratio:4/3;background:var(--mist);overflow:hidden}
.g3 .card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.g3 .card:hover .ph img{transform:scale(1.05)}
.g3 .card .k{font-family:var(--lat);font-size:11px;letter-spacing:.12em;color:var(--silver-d);margin-top:16px;font-weight:600}
.g3 .card h4{font-size:17px;font-weight:700;margin:10px 0 8px;line-height:1.4;transition:color .3s}
.g3 .card:hover h4{color:var(--bp-d)}
.g3 .card .date{font-size:13px;color:var(--m99)}

/* ---------- museum label ---------- */
.museum{background:var(--mist);text-align:center;padding:var(--s120) 0}
.museum .ey{display:block;margin-bottom:22px}
.museum .word{font-family:var(--disp);font-weight:700;font-size:clamp(28px,3.4vw,46px);letter-spacing:-.01em}
.museum .by{color:var(--m66);font-size:14px;margin-top:18px}

/* ---------- footer ---------- */
footer{background:var(--paper);border-top:1px solid var(--b10);padding:var(--s64) 0 var(--s40)}
footer .top{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start}
footer .mark{font-family:var(--disp);font-weight:800;font-size:40px;letter-spacing:-.02em}
footer .mark .p{color:var(--bp)}
footer .mark .tag{font-family:var(--lat);font-size:12px;letter-spacing:.12em;color:var(--m99);font-weight:600;margin-top:10px}
footer .cs h3{font-family:var(--disp);font-size:30px;font-weight:800;letter-spacing:-.02em}
footer .cs p{font-size:13px;color:var(--m66);margin-top:6px}
footer .info{margin-top:var(--s40);padding-top:var(--s24);border-top:1px solid var(--b06);
  font-size:12.5px;color:var(--m99);line-height:1.8}
footer .pol{display:flex;gap:18px;margin-bottom:14px;flex-wrap:wrap}
footer .pol a{font-size:13px;color:var(--m66);font-weight:600}
footer .pol a:hover{color:var(--bp-d)}
footer .sns{display:flex;gap:14px;margin-top:18px}
footer .sns a{width:34px;height:34px;border:1px solid var(--b14);border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--lat);font-size:11px;color:var(--m66);transition:.3s}
footer .sns a:hover{border-color:var(--bp);color:var(--bp)}

/* ---------- floating quick ---------- */
.quick{position:fixed;right:24px;bottom:24px;z-index:70;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.quick .inq{background:var(--ink);color:#fff;border-radius:var(--r-chip);padding:13px 20px;font-size:13px;font-weight:700;
  display:flex;align-items:center;gap:8px;box-shadow:0 8px 24px rgba(10,10,10,.18);transition:.3s var(--ease)}
.quick .inq:hover{background:var(--bp)}
.quick .top{width:44px;height:44px;border-radius:50%;background:var(--paper);border:1px solid var(--b14);
  display:flex;align-items:center;justify-content:center;font-family:var(--lat);font-size:11px;color:var(--m66);transition:.3s}
.quick .top:hover{border-color:var(--bp);color:var(--bp)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:1023px){
  .nav{display:none}.burger{display:flex}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .hero .slide{grid-template-columns:1fr}
  .hero .cap{padding:var(--s64) var(--s40)}
  .hero .vis{min-height:360px}
  .split{grid-template-columns:1fr}.split .txt{padding:var(--s64) var(--s40)}
  .axis{grid-template-columns:1fr}
  .numbers{grid-template-columns:repeat(2,1fr);gap:40px 20px}
  .mani .cards{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:1fr}
  footer .top{grid-template-columns:1fr;gap:30px}
  .pcard .add{transform:none;position:static;height:auto;padding:11px;margin-top:12px} /* touch: always show */
}
@media(max-width:560px){
  .wrap{padding:0 22px}
  .pgrid{grid-template-columns:1fr 1fr;gap:30px 16px}
  .sec{padding:var(--s64) 0}
  .lineband .ln .ko{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important}
  .rv{opacity:1;transform:none}
}

/* ========== BPS4 TONE OVERRIDES — Cafe24 표준 페이지에 BPS4 색·폰트 적용 ========== */

/* 전역 폰트·색 */
body { 
  font-family: 'Pretendard', 'Apple SD Gothic Neo', -apple-system, sans-serif !important;
  color: var(--ink, #0A0A0A) !important;
}

/* 헤더 영역 — 흰 배경 + sticky 효과는 reference 살리되 색만 BPS4 */
#header { background: var(--w82, rgba(255,255,255,.82)) !important; backdrop-filter: saturate(160%) blur(14px); }
#header .top_logo a { font-family: 'Albert Sans','Helvetica Neue',Arial,sans-serif !important; font-weight: 800; letter-spacing: -0.02em; }

/* 푸터 색감 */
#footer { background: var(--ink, #0A0A0A) !important; color: rgba(255,255,255,.55) !important; padding: 78px 0 0 !important; }
#footer a, #footer .title { color: rgba(255,255,255,.72) !important; }
#footer a:hover { color: var(--bp, #2A7A94) !important; }

/* 표준 버튼 — BPS4 핑크 */
.ec-base-button .btnSubmit, 
.ec-base-button .btnSubmitFix,
.btnNormal,
button.btnSubmit {
  background: var(--bp, #2A7A94) !important;
  border-color: var(--bp, #2A7A94) !important;
  color: #fff !important;
}

/* 표준 link 색 */
a { color: var(--ink, #0A0A0A); }
a:hover { color: var(--bp-d, #1F5D71); }

/* 표준 product 카드 — BPS4 톤 */
.prdList .prdInfo .name a,
.prdList .prdInfo .description a { font-family: 'Pretendard', sans-serif; letter-spacing: -0.01em; }
.prdList .prdInfo .price strong { color: var(--ink, #0A0A0A) !important; font-weight: 700; }
.prdList .prdInfo .icon { color: var(--bp, #2A7A94); }

/* 표준 페이지네이션 */
.ec-base-paginate a.this,
.xans-product-normalpaging .this strong { 
  background: var(--bp, #2A7A94) !important; 
  border-color: var(--bp, #2A7A94) !important; 
  color: #fff !important;
}

/* 상품 분류 페이지 — section path / titleArea 톤 */
.section.path { background: transparent; padding: 14px 0; font-size: 12px; }
.section.titleArea h2 { font-family: 'Albert Sans', sans-serif; font-weight: 800; font-size: clamp(28px, 3vw, 44px); letter-spacing: -0.02em; }

/* 상품 상세 — 가격 영역 */
.detail .pd-price, .detail .price strong { font-size: 28px; font-weight: 800; color: var(--ink, #0A0A0A); }

/* 장바구니 / 주문 — 표준 ec-base-table */
.ec-base-table.gShop th { background: var(--mist, #F5F5F5); color: var(--ink, #0A0A0A); }

/* 회원 페이지 — input focus */
.member input:focus, .member select:focus, .member textarea:focus,
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus { 
  outline: none; 
  border-color: var(--bp, #2A7A94) !important; 
}

/* 모바일 톱바·하단 네비 — BPS4 핑크 강조 */
.bottom-nav .count { background: var(--bp, #2A7A94); color: #fff; }

/* ========== BPS4 TONE — ROUND 2 (헤더/로고/Nav/Contact/장바구니) ========== */

/* 로고 morph — reference의 .top_logo > a.logo (display-none 제거됨, 실제 보임) */
.top_logo { padding: 16px 0; }
.top_logo .logo {
  display: inline-flex !important;
  align-items: center;
  font-family: 'Albert Sans','Helvetica Neue',Arial,sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink, #0A0A0A);
  white-space: nowrap;
  cursor: pointer;
  transition: font-size 0.45s cubic-bezier(0.22,0.61,0.36,1);
  overflow: visible;
  text-decoration: none;
}
.top_logo .logo .ch { display: inline-block; }
.top_logo .logo .b,
.top_logo .logo .p { color: var(--bp, #2A7A94); }
.top_logo .logo .rest {
  overflow: hidden;
  max-width: 6em;
  opacity: 1;
  transition: max-width 0.4s cubic-bezier(0.22,0.61,0.36,1),
              opacity 0.26s cubic-bezier(0.22,0.61,0.36,1),
              font-size 0.4s cubic-bezier(0.22,0.61,0.36,1);
}
.top_logo .logo .plus {
  --pS: 0.2;
  --pr: 0deg;
  color: var(--bp, #2A7A94);
  font-weight: 800;
  max-width: 0;
  opacity: 0;
  transform: scale(var(--pS)) rotate(var(--pr));
  transform-origin: center 58%;
  transition: max-width 0.4s cubic-bezier(0.22,0.61,0.36,1),
              opacity 0.3s cubic-bezier(0.22,0.61,0.36,1),
              transform 0.6s cubic-bezier(0.22,0.61,0.36,1);
}
/* morph 활성 (JS가 클래스 추가/제거) */
.top_logo .logo.morph { font-size: 2.7rem; }
.top_logo .logo.morph .rest { max-width: 0; opacity: 0; font-size: 0; }
.top_logo .logo.morph .plus { --pS: 1; max-width: 0.7em; opacity: 1; }
.top_logo .logo.morph .b,
.top_logo .logo.morph .p { color: var(--ink, #0A0A0A); }

/* BPS4 GNB Nav 메뉴 — Awards/Ranking/Clinic/Store/About/Community */
.nav.bps-nav {
  display: flex !important;
  gap: 30px;
  align-items: center;
  justify-content: center;
  padding: 14px 0;
}
.nav.bps-nav a {
  font-family: 'Albert Sans','Helvetica Neue',Arial,sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #0A0A0A);
  position: relative;
  padding: 6px 0;
  opacity: 0.86;
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: opacity 0.3s, color 0.3s;
}
.nav.bps-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1.5px;
  background: var(--bp, #2A7A94);
  transition: width 0.35s cubic-bezier(0.22,0.61,0.36,1);
}
.nav.bps-nav a:hover { opacity: 1; color: var(--ink, #0A0A0A); }
.nav.bps-nav a:hover::after { width: 100%; }
@media (max-width: 1023px) { .nav.bps-nav { display: none !important; } }

/* Contact ribbon — SVG path 애니메이션 (fusion.js initRibbon이 사용) */
.cf-wrap { position: relative; padding: 36px 40px 40px; background: var(--paper, #fff); border-radius: 16px; }
.cf-wrap .ribbon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.cf-wrap .ribbon .rb {
  fill: none;
  stroke: var(--bp, #2A7A94);
  stroke-width: 3.5;
  stroke-linecap: round;
}
.cf .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.cf .fld { margin-bottom: 24px; }
.cf label {
  display: block;
  font-family: 'Albert Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--m66, #666);
  margin-bottom: 8px;
}
.cf input, .cf select, .cf textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--b14, rgba(10,10,10,0.14));
  padding: 10px 0;
  font-family: 'Pretendard', sans-serif;
  font-size: 15px;
  background: none;
  color: var(--ink, #0A0A0A);
  transition: border-color 0.25s;
}
.cf input:focus, .cf select:focus, .cf textarea:focus {
  outline: 0;
  border-color: var(--bp, #2A7A94);
}
.cf textarea { min-height: 84px; resize: vertical; }
.cf .done { display: none; background: var(--ink, #0A0A0A); color: #fff; padding: 15px; text-align: center; font-size: 14px; margin-bottom: 18px; }
.btn-ac {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bp, #2A7A94);
  color: #fff !important;
  border: 0;
  cursor: pointer;
  padding: 16px 40px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background 0.3s, gap 0.3s;
  text-decoration: none;
  font-family: 'Pretendard', sans-serif;
}
.btn-ac:hover { background: var(--bp-d, #1F5D71); gap: 16px; }

/* 장바구니 (order/basket.html) — BPS4 톤 */
#order-basket .basket_top_message,
.basket_top_message { color: var(--ink, #0A0A0A); font-weight: 700; }
.ec-base-table.gType th { background: var(--mist, #F5F5F5) !important; font-family: 'Pretendard', sans-serif; }
.basket_btn_area .btnSubmit,
.basket_btn_area .btnNormal,
button.btnSubmit, a.btnSubmit {
  background: var(--bp, #2A7A94) !important;
  border-color: var(--bp, #2A7A94) !important;
  color: #fff !important;
}
.totalprice strong, .total .price strong { color: var(--bp, #2A7A94) !important; font-size: 22px; }
.btnSubmitFix, .btn_inquire, .btnOrder {
  background: var(--bp, #2A7A94) !important;
  border-color: var(--bp, #2A7A94) !important;
  color: #fff !important;
}

/* 마퀴 색 - 검정 배경 + 핑크 강조 */
.marquee { background: var(--ink, #0A0A0A); color: #fff; }
.marquee b { color: var(--bp, #2A7A94); }

/* main_text (Special Event 등 Cafe24 텍스트 배너) 통째로 숨김 */
.section.main_text { display: none !important; }

/* mall_name(비피플러스 주식회사) 텍스트 강제 숨김 — BPS4 로고만 보이게 */
.top_logo a.notranslate {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.top_logo a.logo { position: relative; z-index: 2; }

/* ========== BPS4 TONE — ROUND 3 (사용자 10대 지적 반영) ========== */

/* 1) 헤더 3분할: 좌(햄버거+로고) / 중(GNB) / 우(util) */
#header .top_nav_box.bps-row {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 28px !important;
}
.bps-left { display: flex; align-items: center; gap: 18px; justify-self: start; }
.bps-nav { justify-self: center; }
.bps-right { display: flex; align-items: center; gap: 18px; justify-self: end; }

/* 햄버거 버튼 (좌측 상단) */
.bps-burger {
  display: flex; flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 6px 2px;
  width: 32px; height: 32px; justify-content: center;
}
.bps-burger span { width: 22px; height: 1.5px; background: var(--ink, #0A0A0A); transition: .3s; display:block }
.bps-burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.bps-burger.is-open span:nth-child(2) { opacity: 0; }
.bps-burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* 우측 유틸 아이콘 */
.bps-util {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; color: var(--ink, #0A0A0A);
  text-decoration: none; transition: color .3s;
}
.bps-util:hover { color: var(--bp, #2A7A94); }
.bps-util svg { width: 20px; height: 20px; }
.bps-util .count {
  position: absolute; top: -2px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--bp, #2A7A94); color: #fff;
  border-radius: 999px; font-size: 10px; line-height: 16px; text-align: center;
  font-family: 'Albert Sans', sans-serif; font-weight: 700;
}

/* 2) Cafe24 자동 카테고리 메뉴 (Product/BEST) 숨김 — BPS4 .bps-nav 만 사용 */
#moduleCate, .top_category, .top_logo + .top_nav,
.xans-layout-category.top_category { display: none !important; }

/* 3) sidebar(aside) 제거됨 — .gnbov 풀스크린 오버레이만 사용 */

/* 4) .gnbov 풀스크린 오버레이 GNB — 햄버거 클릭 시 .on으로 활성 */
.gnbov {
  position: fixed !important; inset: 0 !important; z-index: 9999 !important;
  background: var(--ink, #0A0A0A) !important; color: #fff !important;
  display: flex !important; flex-direction: column !important;
  padding: 40px 44px !important;
  transform: translateY(-100%); visibility: hidden;
  transition: transform .62s cubic-bezier(.76,0,.24,1), visibility 0s linear .62s;
}
.gnbov.on {
  transform: translateY(0) !important;
  visibility: visible !important;
  transition: transform .62s cubic-bezier(.76,0,.24,1) !important;
}
.gnbov-top { display: flex; justify-content: space-between; align-items: center; }
.gnbov .x { background: none; border: 0; color: #fff; font-family: 'Albert Sans', sans-serif; font-size: 13px; letter-spacing: .12em; cursor: pointer; opacity: .8; }
.gnbov .x:hover { opacity: 1; color: var(--bp, #2A7A94); }
.gnbov-mid { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.gnbov-mid a {
  font-family: 'Albert Sans', sans-serif; font-size: clamp(34px, 5.8vw, 72px); font-weight: 800;
  line-height: 1.06; letter-spacing: -.02em; color: #fff; text-decoration: none;
  transition: color .3s, padding .3s;
  display: block;
}
.gnbov-mid a:hover { color: var(--bp, #2A7A94); padding-left: 20px; }
.gnbov-mid a small {
  font-family: 'Albert Sans', sans-serif; font-size: 12px; letter-spacing: .16em;
  opacity: .45; vertical-align: super; margin-left: 14px; text-transform: uppercase;
}
.gnbov-foot { display: flex; gap: 28px; font-size: 12px; letter-spacing: .06em; opacity: .55; flex-wrap: wrap; }
.gnbov-foot a { color: #fff; text-decoration: none; }
.gnbov .logo.ov { color: #fff; font-size: 19px; }
.gnbov .logo.ov .b, .gnbov .logo.ov .p { color: var(--bp, #2A7A94); }
.gnbov .logo.ov .plus { display: none; }

/* 5) split 의 .cta 버튼 글씨 색 (검은 배경에서 흰색 보이게) */
.split { background: var(--ink, #0A0A0A); color: #fff; }
.split .txt .ko, .split .txt .en { color: #fff; }
.split .txt .ko em { color: var(--bp, #2A7A94); font-style: normal; }
.split .txt .cta {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1.5px solid #fff !important;
  color: #fff !important;
  padding: 13px 28px;
  font-family: 'Albert Sans', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-decoration: none !important;
  margin-top: 30px;
  background: transparent !important;
  transition: background .35s, gap .35s, border-color .35s;
}
.split .txt .cta:hover {
  background: var(--bp, #2A7A94) !important;
  border-color: var(--bp, #2A7A94) !important;
  color: #fff !important;
  gap: 16px;
}

/* 6) NEW ARRIVAL section의 split 다음 margin 보강 */
.split.rv + .global_sub_banner_pc + .global_sub_banner_mo + section.section.main_product_list,
.split + section.main_product_list,
.split ~ section.main_product_list { margin-top: 96px !important; }
section.main_product_list { padding-top: 64px; }

/* 7) 베스트 4개로 grid 조정 (grid4 → 4열 그대로지만 padding 조정) */
.section.main_product_list { padding-left: 28px; padding-right: 28px; max-width: 1280px; margin-left: auto; margin-right: auto; }
.main_title { text-align: center; margin-bottom: 36px; }
.main_title_txt01 { font-family: 'Albert Sans', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--m99, #999); }
.main_title_txt02 { font-family: 'Pretendard', sans-serif; font-weight: 800; font-size: clamp(22px, 2.8vw, 36px); letter-spacing: -.02em; margin-top: 10px; }

/* 8) 로고 좌측 정렬 (.bps-left 안) */
.bps-left .top_logo { padding: 0; margin: 0; }
.bps-left .top_logo .logo { font-size: 1.5rem; }

/* 9) (bps-right는 위 .bps-right로 처리됨) */

/* 외부 위젯(alphapush, channel.io 등) 마케팅 팝업 차단 */
[id*="alphapush"], [class*="alphapush"],
[id*="alpha-onsite"], [class*="alpha-onsite"],
iframe[src*="alphwidget"], iframe[src*="alphapush"],
[class*="alpha_main"], [class*="alpha-main"],
.alpha-popup, #alpha-popup, .alphapush-frame {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ========== END BPS4 TONE — ROUND 2 ========== */
/* 260911 — 모션 축소 환경에서는 마퀴 무한 반복을 멈춘다(길이만 줄이면 iterations:Infinity 가 남는다) */
@media (prefers-reduced-motion:reduce){.marquee .track{animation:none!important;transform:none}}