/* =========================================================================
   BPS4 · 모바일 전용 스킨 스타일 (fusion-m.css)
   ※ 모바일 스킨에서만 로드(@css). fusion.css·fusion2.css 뒤에 로드되어 모바일 구조를 재정의.
   레퍼런스(메디벨라/포뮬러/CARBX 모바일) 관례 채택:
   햄버거 헤더 · 상품 1열 풀카드 · 가로스크롤 카테고리 · 상세 하단 고정 구매바 · 세로 랭킹.
========================================================================= */

/* ---- 공통 모바일 여백(GUTTER) — 좌우 22px로 통일하여 가장자리 안정감 확보 ---- */
.m-skin .wrap{padding:0 22px}

/* ---- 모바일 헤더: 햄버거(좌) · 로고(중앙) · 장바구니(우), sticky ---- */
.gnb.mo{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--b10);height:54px}
.gnb.mo .wrap.row{height:54px;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:0 14px}
.gnb.mo .burger{display:flex;order:0;justify-self:start}
.gnb.mo .logo{order:1;justify-self:center;font-size:1.15rem}
.gnb.mo .util{order:2;justify-self:end;gap:0}
.gnb.mo .util a[aria-label="장바구니"]{font-size:0;position:relative;width:26px;height:26px;display:inline-block}
.gnb.mo .util a[aria-label="장바구니"]::before{content:"";position:absolute;inset:2px;border:1.6px solid var(--ink);border-radius:5px;border-top:none;width:20px;height:16px;top:6px}
.gnb.mo .util .cartnum{font-size:10px;position:absolute;top:-4px;right:-6px;background:var(--bp);color:#fff;border-radius:999px;min-width:15px;height:15px;line-height:15px;text-align:center;padding:0 3px}

/* ---- 모바일 히어로: 풀폭·세로형·하단 카피 ----
   ※ pharma1·2·3은 landscape 인물 사진. portrait 컨테이너로 cover하면 가로 crop이 큼.
      각 슬라이드 마크업의 inline style="object-position:X% Y%"로 face 위치를 명시(우선 채택),
      누락 시 아래 디폴트(40% center: 화면 중앙에 face가 오도록)가 폴백.
   ※ seal=top-right / slide-no=숨김(dots와 중복) / dots=bottom-left. */
.gnb.mo ~ .hero, body[data-skin=m] .hero, .m-skin .hero{height:72vh;min-height:480px;max-height:640px}
.m-skin .hero .slide .bg{object-position:40% center}
.m-skin .hero-cap{left:0;bottom:11%;padding:0 22px;max-width:none}
.m-skin .hero-cap .en{font-size:clamp(38px,12vw,58px);line-height:.96}
.m-skin .hero-cap h1{font-size:17px;margin-top:8px}
.m-skin .hero-cap p{font-size:13px;max-width:280px;margin-bottom:0}
.m-skin .hero-cap .btn{margin-top:14px;padding:12px 22px;font-size:12.5px}
.m-skin .hero .seal{width:60px;height:60px;top:16px;bottom:auto;right:16px}
.m-skin .hero .slide-no{display:none}                              /* B: dots와 중복 → 숨김 */
.m-skin .hero .dots{left:22px;bottom:22px}

/* ---- 섹션 여백 모바일 압축 ---- */
.m-skin .sec{padding:46px 0}
.m-skin .sechead{flex-direction:column;align-items:flex-start;gap:6px}
.m-skin .sh,.m-skin .sh.rv{font-size:clamp(22px,6.4vw,30px)}
.m-skin .sub{font-size:13.5px}

/* ---- 가로스크롤 카테고리 레일(원형 칩) — 좌우 22px 거터 ---- */
.m-catrail{display:flex;gap:16px;overflow-x:auto;padding:6px 22px 14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.m-catrail::-webkit-scrollbar{display:none}
.m-catrail .c{flex:0 0 auto;width:78px;text-align:center;scroll-snap-align:start;text-decoration:none}
.m-catrail .c .im{width:78px;height:78px;border-radius:50%;overflow:hidden;background:var(--mist);border:1px solid var(--b10)}
.m-catrail .c .im img{width:100%;height:100%;object-fit:cover}
.m-catrail .c .en{display:block;margin-top:8px;font:800 12px/1 var(--lat);letter-spacing:.02em;color:var(--ink)}
.m-catrail .c .ko{display:block;margin-top:3px;font-size:10.5px;color:var(--m66)}

/* ---- 가로스크롤 BEST 레일(상품 카드) — F: 한 번에 카드 1개만, 다음 카드는 보이지 않음 ----
   ※ scroll-snap-align:start + padding-left 조합은 snap이 padding을 무시해 첫 카드가 좌측 가장자리로 붙는 버그.
      해결: scroll-padding-left 동기 + 카드 폭 = viewport - 좌우 거터, peek 제거. */
.m-bestrail{display:flex;gap:14px;overflow-x:auto;padding:4px 22px 22px;scroll-snap-type:x mandatory;scroll-padding-left:22px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.m-bestrail::-webkit-scrollbar{display:none}
.m-bestrail .pcard{flex:0 0 calc(100vw - 44px);max-width:380px;scroll-snap-align:start;scroll-snap-stop:always;margin:0}
.m-bestrail .pcard .ph{aspect-ratio:1/1;background:var(--mist);border-radius:10px;overflow:hidden}
/* E: 카드 안 텍스트 좌우 여백 확보(가장자리 들러붙음 방지) */
.m-bestrail .pcard .info{padding:14px 8px 0}
.m-bestrail .pcard .hook{font-size:12px;line-height:1.4}
.m-bestrail .pcard .nm{font-size:14px;margin-top:4px}
.m-bestrail .pcard .pr{font-size:15px;margin-top:8px}
.m-bestrail .pcard .badge{left:10px;top:10px}

/* ---- 상품 2열 그리드(목록) — 좌우 22px 거터 ---- */
.m-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;padding:0 22px}
.m-grid .pcard{margin:0}
.m-grid .pcard .ph{aspect-ratio:1/1.08}
.m-grid .pcard .nm{font-size:13px;line-height:1.35}
.m-grid .pcard .brand{font-size:11px}
.m-grid .pcard .hook{font-size:11px}
.m-grid .pcard .pr{font-size:14px}
.m-grid .pcard .bl{display:none}                 /* 모바일 카드: 부가설명 숨김(밀도) */

/* ---- 모바일 정렬바(sticky) ---- */
.m-listhead{padding:18px 22px 10px}
.m-listhead .ttl{font-size:20px;font-weight:800;letter-spacing:-.02em}
.m-listhead .cnt{font-size:12px;color:var(--m66);margin-top:4px}
.m-sort{position:sticky;top:54px;z-index:30;background:#fff;display:flex;gap:14px;overflow-x:auto;padding:10px 22px;border-bottom:1px solid var(--b10);scrollbar-width:none}
.m-sort::-webkit-scrollbar{display:none}
.m-sort a{flex:0 0 auto;font-size:13px;color:var(--m66);text-decoration:none}
.m-sort a.on{color:var(--ink);font-weight:700}

/* ---- 모바일 상품상세 ---- */
.m-detail{padding:0 0 92px}                        /* 하단 구매바 높이만큼 여백 */
.m-detail .pd-gallery img{width:100%;display:block}
.m-detail .pd-head{padding:20px 22px 10px}
.m-detail .pd-head .brand{color:var(--bp);font-weight:700;font-size:13px}
.m-detail .pd-head h1{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:6px 0 10px;line-height:1.3}
.m-detail .pd-head .pd-price{font-size:22px;font-weight:800}
.m-detail .pd-meta{padding:0 22px;font-size:13px;color:var(--m66)}
.m-detail .pd-meta div{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--b10)}
.m-detail .pd-desc{padding:24px 0 0}
.m-detail .pd-desc img{max-width:100%;display:block;margin:0 auto}
/* 하단 고정 구매바 */
.m-buybar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--b10);box-shadow:0 -6px 20px rgba(0,0,0,.06)}
.m-buybar .like{flex:0 0 50px;border:1.5px solid var(--b10);border-radius:12px;background:#fff;font-size:20px;color:var(--bp)}
.m-buybar .cart{flex:1;border:1.5px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink);font-weight:700;font-size:15px;padding:15px 0}
.m-buybar .buy{flex:1.3;border:none;border-radius:12px;background:var(--bp);color:#fff;font-weight:700;font-size:15px;padding:15px 0}

/* ---- 모바일 랭킹: 세로 넘버드 리스트 ---- */
.m-rank{padding:0 22px;display:flex;flex-direction:column;gap:12px;counter-reset:rk}
.m-rank .row{display:grid;grid-template-columns:34px 76px 1fr;gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--b10);text-decoration:none;counter-increment:rk}
.m-rank .row .no{font:800 22px/1 var(--lat);color:var(--bp);text-align:center}
.m-rank .row .no::before{content:counter(rk)}     /* 서버 렌더 행에 순위번호 자동 부여 */
.m-rank .row:nth-child(n+4) .no{color:var(--m99)}
.m-rank .row .th{width:76px;height:76px;border-radius:10px;overflow:hidden;background:var(--mist)}
.m-rank .row .th img{width:100%;height:100%;object-fit:cover}
.m-rank .row .meta .bd{font-size:11px;color:var(--bp);font-weight:700}
.m-rank .row .meta .nm{font-size:14px;color:var(--ink);font-weight:600;margin:2px 0 4px;line-height:1.3}
.m-rank .row .meta .pr{font-size:14px;font-weight:800}
.m-rank .row .meta .sc{font-size:11px;color:var(--m66)}

/* ---- 모바일 awards: 세로 등급 사다리 ---- */
.m-awards{padding:0 22px}
.m-awards .grade{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--b10)}
.m-awards .grade .em{flex:0 0 auto;display:flex;gap:3px}
.m-awards .grade .em img{width:30px;height:30px}
.m-awards .grade .tx b{display:block;font-size:14px}
.m-awards .grade .tx b span{color:var(--bp);font-size:11px;margin-left:4px}
.m-awards .grade .tx .d{font-size:12px;color:var(--m66);margin-top:4px;line-height:1.5}
.m-awards .grade.faded .em{opacity:.4}

/* 모바일 탭 레일(가로 스크롤) 공통 */
.m-tabs{display:flex;gap:18px;overflow-x:auto;padding:0 22px 4px;scrollbar-width:none}
.m-tabs::-webkit-scrollbar{display:none}
.m-tabs a{flex:0 0 auto;font-size:13.5px;color:var(--m66);text-decoration:none;padding-bottom:7px;border-bottom:2px solid transparent}
.m-tabs a.on{color:var(--ink)!important;font-weight:700;border-color:var(--bp)}

/* 모바일에선 PC 전용 가로 카테고리/그리드 잔재 숨김(안전) */
.m-skin .catwrap{display:none}

/* ---- D: 푸터 로고 — BP+ morph 잔재로 인한 글자 사이즈 점프 방지 ----
   PC는 hover/click으로 BEAUTY PHARMACY ↔ BP+ morph가 의도된 모션이지만,
   모바일 footer에선 morph가 stuck되면 .rest(EAUTY/HARMACY)가 0이 되며
   .b/.p만 거대하게 남아 "따로 노는" 인상을 줌. 모바일 footer 한정으로 morph 비활성화. */
.m-skin .ft .ftlogo{margin-bottom:14px}
.m-skin .ft .ftlogo .logo{font-size:1.35rem;line-height:1;letter-spacing:-.01em;display:inline-flex;align-items:baseline;gap:0;cursor:default;transition:none}
.m-skin .ft .ftlogo .logo .ch{font-size:1em;display:inline-block}
.m-skin .ft .ftlogo .logo .rest{max-width:none;opacity:1;font-size:1em;overflow:visible;transition:none}
.m-skin .ft .ftlogo .logo .plus{max-width:none;opacity:1;color:var(--bp);transform:none;font-size:1em;transition:none}
.m-skin .ft .ftlogo .logo.morph{font-size:1.35rem}
.m-skin .ft .ftlogo .logo.morph .rest{max-width:none;opacity:1;font-size:1em}
.m-skin .ft .ftlogo .logo.morph .plus{max-width:none;opacity:1;transform:none}
.m-skin .ft .ftlogo .logo.dark .b,.m-skin .ft .ftlogo .logo.dark .p{color:var(--bp)}
.m-skin .ft .ftlogo .logo.dark .rest{color:#fff}

/* 모바일 푸터 전반 여백·라인 */
.m-skin .ft{padding:48px 0 0}
.m-skin .ft .wrap{padding:0 22px}
.m-skin .ft .ft-top{display:flex;flex-direction:column;gap:24px;padding-bottom:32px}
.m-skin .ft h4{margin:0 0 10px;font-size:12px}
.m-skin .ft a{padding:4px 0;font-size:13px}
.m-skin .ft .desc{font-size:13px;line-height:1.7}
.m-skin .ft .comp{font-size:11px;line-height:1.85;padding:20px 0 28px}
.m-skin .ft .word{font-size:clamp(40px,16vw,72px);padding-bottom:18px}

/* 모바일 contact 섹션 — 좁은 화면에서 텍스트 좌측 정렬 + 적정 여백 */
.m-skin .contact .contact-h{font-size:clamp(24px,6.4vw,32px);line-height:1.22}
.m-skin .contact .lede{font-size:13.5px}
.m-skin .contact .meta-line{font-size:13px;margin-top:8px}

/* 모바일 numbers — 2열 카운터 */
.m-skin .numbers{grid-template-columns:1fr 1fr;gap:24px 16px}
.m-skin .numbers .n .v{font-size:clamp(34px,11vw,52px)}
.m-skin .numbers .n .l{font-size:12px;margin-top:8px}

/* 모바일 split(에디토리얼) — 세로 스택 + 적정 padding */
.m-skin .split{grid-template-columns:1fr;min-height:auto}
.m-skin .split .txt{padding:36px 22px 28px;gap:6px}
.m-skin .split .txt .en{font-size:clamp(34px,10vw,52px)}
.m-skin .split .txt .ko{font-size:15px;margin-top:10px}
.m-skin .split .txt .cta{margin-top:22px;padding:12px 22px;font-size:12.5px}
.m-skin .split .vis{aspect-ratio:4/3}
.m-skin .split .vis img{padding:14%}
.m-skin .split .vis.photo img{padding:0}