/* =========================================================================
   BP POP SYSTEM v1.0 — 키컬러 확정 테마 (최후 로드 오버라이드)
   원천: 뷰티파마시 피오피 키컬러 5안.pdf (BRAND GUIDELINES · POP SYSTEM v1.0 · 2026.07)
   ─ 타일 화이트 #F5F5F3 · 바탕 75% (탑퍼·행택·배경면)
   ─ 글로우 블루 #5BC8E4 · 15% — 로고·마침표·스텝 넘버링·할인율 "포인트만"
   ─ 그리드 블랙 #26282A · 10% — 그리드 줄눈·괘선·본문 텍스트
   ─ 블루 톤 스케일: 밝은 톤 = 배경 워시 전용 / 어두운 톤(#2A7A94) = 텍스트 대비 전용
   ─ 금지: 그린 / 레드·옐로 대면적 / 블루 대면적 배경 / 한 제작물에 블루 두 위계
   ─ 타이포: DISPLAY = Marcellus · BODY = Noto Sans KR
   ─ 모티프: 타일 그리드(줄눈=면의 1/40) · 화이트 명판(그리드 위 직접 타이핑 금지)
             · 블루 마침표(헤드라인은 마침표로 끝나고 마침표만 블루) · 페이퍼 행택(4줄)
   ========================================================================= */

/* ---------- 1. 토큰 오버라이드 ---------- */
:root {
  /* 점 액센트 — 텍스트·소면적 전용이므로 톤 스케일 '어두운 톤'을 쓴다 (대비 확보) */
  --bp: #2a7a94;
  --bp-d: #1f5d71;
  /* 글로우 블루 원색 — 마침표·넘버링·장식 전용 */
  --glow: #5bc8e4;
  --tile: #f5f5f3;
  --grout: rgba(38, 40, 42, 0.13);
  --ink: #26282a;
  --paper: #ffffff;
  --mist: #f5f5f3; /* 기존 mist 면 = 타일 화이트로 통일 */
  --bp10: rgba(91, 200, 228, 0.14);
  --bp16: rgba(91, 200, 228, 0.22);
  --bp40: rgba(91, 200, 228, 0.48);
  --wash: #e9f6fa; /* 밝은 톤 — 배경 워시 전용 */
  --disp: 'Marcellus', 'Noto Sans KR', serif;
  --lat: 'Marcellus', 'Noto Sans KR', serif;
  --body: 'Noto Sans KR', -apple-system, 'Apple SD Gothic Neo', sans-serif;
}

/* Marcellus는 400 단일 웨이트 — 디스플레이 요소의 가짜 볼드 방지 */
.hero .en,
.split .txt .en,
.mani .en,
.axis .a .en,
.fusion-word,
.word,
.numbers .v,
.main_title_txt01 {
  font-weight: 400 !important;
  letter-spacing: 0.01em;
}

/* ---------- 2. 타일 그리드 유틸 (텍스트는 반드시 명판 안에) ---------- */
.bp-tiles,
.split,
.sec.mist,
.gnbov {
  background-image: linear-gradient(var(--grout) 1.5px, transparent 1.5px),
    linear-gradient(90deg, var(--grout) 1.5px, transparent 1.5px);
  background-size: 64px 64px;
  background-position: center top;
  background-color: var(--tile);
}

/* ---------- 3. 마퀴 — 조용한 화이트 띠 + 괘선 ---------- */
.marquee {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--ink);
}
.marquee b {
  color: var(--glow) !important;
  font-weight: 400;
}

/* ---------- 4. 로고 = 화이트 명판 (블랙 테두리 + 블루 로고타입 + 블랙 서브라인) ---------- */
.logo {
  display: inline-block;
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: 6px 14px 5px;
  text-align: center;
  line-height: 1;
  letter-spacing: 0;
}
.logo .lt {
  display: block;
  font-family: 'Marcellus', serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--glow);
}
.logo .sb {
  display: block;
  font-family: var(--body);
  font-size: 6.5px;
  letter-spacing: 0.28em;
  color: var(--ink);
  margin-top: 3px;
  font-weight: 500;
}
/* 명판은 어두운 배경 위에서도 항상 화이트 (로고 규칙: 색 변경 금지) */
.logo.dark,
.gnbov .logo.ov {
  background: var(--paper);
  border-color: var(--ink);
}
.gnbov .logo.ov .lt { color: var(--glow); }
.gnbov .logo.ov .sb { color: var(--ink); }

/* ---------- 5. 블루 마침표 — 헤드라인은 마침표로 끝나고 마침표만 블루 ---------- */
.sh::after,
.main_title_txt01::after,
.contact-h::after {
  content: '.';
  color: var(--glow);
}
.bp-dot {
  color: var(--glow);
}
.mani .en em { color: inherit; }

/* ---------- 6. 히어로 — 캡션을 반투명 명판으로 (뒤 사진이 비치게) ---------- */
.hero .hero-cap {
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--ink);
  padding: 34px 40px;
  backdrop-filter: blur(7px) saturate(1.05);
  -webkit-backdrop-filter: blur(7px) saturate(1.05);
}
.hero .hero-cap h1,
.hero .hero-cap p,
.hero .hero-cap .en, /* fusion2 기본값이 #fff — 명판 위에서 흰 글자가 사라지는 것 방지 */
.hero .ey {
  color: var(--ink);
}
.hero .hero-cap h1::after {
  content: '.';
  color: var(--glow);
}
.hero .btn {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--paper);
}
.hero .btn:hover {
  background: var(--ink);
  color: #fff;
}

/* ---------- 7. 에디토리얼 스플릿 — 잉크 대면적 → 타일 그리드 + 명판 ---------- */
.split {
  color: var(--ink);
}
.split .txt {
  background: var(--paper);
  border: 1px solid var(--ink);
  margin: clamp(24px, 4vw, 56px);
}
.split .txt .ko {
  color: var(--ink);
}
.split .txt .ko em {
  color: var(--bp);
}
.split .txt .cta {
  border-color: var(--ink);
  color: var(--ink);
}
.split .txt .cta:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.split .vis.photo {
  background: var(--tile);
}

/* ---------- 8. 풀스크린 GNB 오버레이 — 잉크 → 타일 화이트 ---------- */
.gnbov {
  color: var(--ink);
}
.gnbov .x {
  color: var(--ink);
}
.gnbov .x:hover {
  color: var(--bp);
}
.gnbov nav a,
.gnbov-mid a,
.gnbov-foot a,
.gnbov-foot span {
  color: var(--ink);
}
.gnbov-mid a {
  background: rgba(255, 255, 255, 0.9);
  border-left: 2px solid transparent;
  padding-left: 10px;
}
.gnbov-mid a:hover {
  color: var(--bp);
  border-left-color: var(--glow);
}
.gnbov-mid a small,
.gnbov nav a .n {
  color: #8e9194;
}
.gnbov-foot {
  opacity: 0.8;
}

/* ---------- 9. 상품 카드 — 페이퍼 행택 규격 (좌측 정렬 4줄 · 할인율만 블루) ---------- */
.pcard .info {
  background: var(--paper);
  border: 1px solid #dedeDA;
  padding: 12px 14px 14px;
  margin-top: 10px;
  position: relative;
}
.pcard .info::before {
  content: '';
  position: absolute;
  top: 8px;
  right: 10px;
  width: 8px;
  height: 8px;
  border: 1px solid #dedeDA;
  border-radius: 50%;
}
.pcard .badge.best {
  background: var(--ink);
}
.pcard .pr b,
.pcard .pr strong {
  color: var(--ink);
}
.pcard .pr .dc,
.pcard .sale,
.discount_rate,
.sale_rate {
  color: var(--bp) !important;
  font-weight: 700;
}

/* ---------- 10. 공통 다듬기 ---------- */
body {
  background: var(--tile);
}
#contents,
#wrap {
  background: transparent;
}
.ey .dot,
.sechead .ey .dot {
  color: var(--glow);
}
/* 넘버링(스텝·순위·매니페스토 카드)은 Marcellus + 글로우 블루 */
.mani .cards .c .i,
.slide-no,
.rank-no {
  font-family: 'Marcellus', serif;
  color: var(--bp);
  font-weight: 400;
}
/* 버튼 위계: 프라이머리 = 잉크 면, 블루는 면으로 쓰지 않는다 */
.btn-ac,
.btnMore:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.btn-ac:hover {
  background: var(--bp-d);
  border-color: var(--bp-d);
}
/* 폼 포커스 */
input:focus,
select:focus,
textarea:focus {
  outline-color: var(--ink);
}
/* 별점·데이터 값은 잉크 유지 (블루 위계 침범 금지) */
.pcard .stars,
.review-stars {
  color: var(--ink);
}
/* 약사회원 게이트 — 버튼은 잉크 면 (블루 면 금지) */
.bps-lock-btn {
  background: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  color: #fff !important;
}
.bps-lock-btn:hover {
  background: var(--paper) !important;
  color: var(--ink) !important;
}
.bps-lock-btn.ghost {
  background: var(--paper) !important;
  color: var(--ink) !important;
}
.bps-lock-btn.ghost:hover {
  background: var(--ink) !important;
  color: #fff !important;
}
/* 매니페스토·타일 면 위 보조 텍스트는 명판 처리 (그리드 위 직접 타이핑 금지) */
.sec.mist .ey,
.sec.mist .sub {
  background: rgba(255, 255, 255, 0.88);
  padding: 4px 12px;
  display: inline-block;
}
.mani .cards .c {
  border: 1px solid var(--ink);
}

/* ---------- 11. 이벤트>랭킹 — 모듈 B (세 신호 병렬 보드) ---------- */
.bp-rank-hero {
  min-height: auto !important;
  padding: 96px 24px 40px !important;
}
.bp-rank-hero .ten em {
  color: var(--bp);
}
.bp-rank-hero .opendate {
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--bp);
  border: 1px solid #dedeDA;
  background: var(--paper);
  padding: 6px 14px;
  display: inline-block;
}
.bp-rankb {
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px 24px 110px;
}
.bp-rankb .board {
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 0 22px;
}
.bp-rankb .rb-legend,
.bp-rankb .rb-row {
  display: grid;
  grid-template-columns: 84px 1fr 190px 190px 80px;
  gap: 16px;
  align-items: center;
}
.bp-rankb .rb-legend {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: #8e9194;
  text-transform: uppercase;
  font-weight: 500;
  border-bottom: 1.5px solid var(--ink);
  padding: 12px 4px;
}
.bp-rankb .rb-row {
  border-bottom: 1px solid #dedeDA;
  padding: 18px 4px;
}
.bp-rankb .rb-row:last-child {
  border-bottom: 0;
}
.bp-rankb .rb-row:hover {
  background: var(--tile);
}
.bp-rankb .rb-no {
  font-family: 'Marcellus', serif;
  font-size: 22px;
  color: var(--bp);
}
.bp-rankb .rb-nm .rb-cat {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #5a5d60;
  font-weight: 500;
}
.bp-rankb .rb-nm h4 {
  font-size: 15px;
  font-weight: 700;
  margin: 3px 0 0;
}
.bp-rankb .rb-gd .rb-score {
  font-family: 'Marcellus', serif;
  font-size: 21px;
}
.bp-rankb .rb-gd small {
  font-size: 10px;
  color: #8e9194;
}
.bp-rankb .rb-gd .rb-bars {
  display: flex;
  gap: 3px;
  margin-top: 6px;
}
.bp-rankb .rb-gd .rb-bars i {
  width: 30px;
  height: 5px;
  background: var(--tile);
  border: 1px solid #dedeDA;
  position: relative;
  overflow: hidden;
}
.bp-rankb .rb-gd .rb-bars i::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--f, 0%);
  background: var(--glow);
}
.bp-rankb .rb-st {
  font-size: 12.5px;
  color: #5a5d60;
  font-weight: 700;
}
.bp-rankb .rb-st .rb-meta {
  display: block;
  font-size: 10.5px;
  color: #8e9194;
  margin-top: 3px;
  font-weight: 400;
}
.bp-rankb .rb-dt {
  font-size: 13px;
  color: #8e9194;
  text-align: center;
}
.bp-rankb .rb-dt small {
  display: block;
  font-size: 9px;
  letter-spacing: 0.1em;
}
.bp-rankb .ranknote {
  margin: 24px 0 0;
  font-size: 13px;
  color: #5a5d60;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bp-rankb .ranknote::before {
  content: '';
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  flex: none;
}
.bp-rankb .criteria {
  margin-top: 56px;
  border-top: 2px solid var(--ink);
  padding-top: 26px;
}
.bp-rankb .criteria .ey {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #5a5d60;
  font-weight: 500;
}
.bp-rankb .cgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 18px;
}
.bp-rankb .cx {
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 16px 18px;
}
.bp-rankb .cx .k {
  font-family: 'Marcellus', serif;
  font-size: 14px;
  color: var(--glow);
}
.bp-rankb .cx h5 {
  font-size: 14px;
  font-weight: 700;
  margin: 6px 0 4px;
}
.bp-rankb .cx p {
  font-size: 12px;
  color: #5a5d60;
  line-height: 1.55;
}
.bp-rankb .limitbox,
.bp-rankb .gatebox {
  margin-top: 14px;
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: 15px 20px;
  font-size: 13.5px;
}
.bp-rankb .backrow {
  text-align: center;
  margin-top: 44px;
}
.bp-rankb .back {
  display: inline-flex;
  gap: 8px;
  border: 1.5px solid var(--ink);
  padding: 13px 30px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  transition: 0.3s;
  background: var(--paper);
}
.bp-rankb .back:hover {
  background: var(--ink);
  color: #fff;
}
@media (max-width: 860px) {
  .bp-rankb .rb-legend {
    display: none;
  }
  .bp-rankb .rb-row {
    grid-template-columns: 64px 1fr;
    grid-auto-rows: auto;
  }
  .bp-rankb .rb-gd,
  .bp-rankb .rb-st,
  .bp-rankb .rb-dt {
    grid-column: 2;
    text-align: left;
  }
  .bp-rankb .cgrid {
    grid-template-columns: 1fr 1fr;
  }
}

/* =========================================================================
   BP POP SYSTEM v1.1 — 웹 확장 보강 (260813)
   실증 진단(shots_260813/before): 홈 하단 섹션이 그리드 위 직접 타이핑되어
   저대비·빈 화면처럼 보임 → v1.0 규칙 "텍스트는 명판 안에만"을 웹에 강제.
   근거 문서: E:\BPS\docs\design\pop-web-system_260813.html
   ========================================================================= */

/* ---------- v1.1-1. 홈 하단 섹션에도 타일 그리드 배경 ---------- */
.sec.about-anchor,
#insight,
.sec.contact {
  background-image: linear-gradient(var(--grout) 1.5px, transparent 1.5px),
    linear-gradient(90deg, var(--grout) 1.5px, transparent 1.5px);
  background-size: 64px 64px;
  background-position: center top;
  background-color: var(--tile);
}

/* ---------- v1.1-2. 화이트 명판 강제 — 그리드 위 콘텐츠 블록 ---------- */
.sechead,
.wrap.mani .i,
.numbers .n,
#insight .g3 .card,
#partner .axis .a,
.sec.contact form,
.sec.contact .ct-form {
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(38, 40, 42, 0.08);
  padding: 22px 26px;
}
.sechead {
  display: inline-block;
  padding: 16px 26px 14px;
  margin-bottom: 26px;
}
.numbers .n { text-align: center; padding: 26px 12px; }
#insight .g3 .card { padding: 0 0 18px; overflow: hidden; }
#insight .g3 .card .ph { border-bottom: 1px solid var(--ink); }
#insight .g3 .card .c,
#insight .g3 .card .date { padding-left: 18px; padding-right: 18px; }

/* ---------- v1.1-3. 상품 카드 = 타일 1칸 은유 ---------- */
.pcard {
  background: var(--paper);
  border: 1px solid var(--ink);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.pcard:hover {
  box-shadow: 4px 4px 0 rgba(38, 40, 42, 0.16);
  transform: translate(-1px, -1px);
}
.pcard .info { padding: 12px 14px 16px; }

/* ---------- v1.1-4. 버튼 3단 위계 (주=블랙 / 보조=화이트+블랙보더 / 수치=블루) ---------- */
.btnSubmitFix,
.btnSubmit,
a.bps-lock-btn:not(.ghost) {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: #fff !important;
  border-radius: 0 !important;
}
.btnNormalFix,
.btnNormal,
a.bps-lock-btn.ghost {
  background: var(--paper) !important;
  border: 1px solid var(--ink) !important;
  color: var(--ink) !important;
  border-radius: 0 !important;
}
.btnSubmitFix:hover,
.btnSubmit:hover { background: #000 !important; }

/* ---------- v1.1-5. 블루 텍스트 대비 고정 (base 원색은 비텍스트 전용) ---------- */
.fusion-store-head .em,
.breadcrumb a,
.xans-product-headcategory a { color: var(--bp) !important; }

/* ---------- v1.1-6. 핑크 토큰 잔재 제거 (fusion-shop2/onetouch2 의 --bp-soft/--bp-line) ----------
   개별 규칙이 아니라 토큰을 덮어 사용처 전부(마이쇼핑 회원배너 그라데이션 등)를 한 번에 정합시킨다. */
:root {
  --bp-soft: #eaf7fb;
  --bp-line: #bfe9f4;
}