/**
 * Client feedback fixes (오바라 다이키 2026-05-13)
 * 1. 하단 footer 메뉴 텍스트 색상 대비 보강 (HOME / ABOUT / 料金 / 実例 등)
 * 2. Hero CTA 영역 텍스트 가독성 보강
 * 3. News 슬라이더 일시정지 표시(필요시)
 */

/* ===== 1) Footer 메뉴 가독성 - 모바일(흰 배경)만 ===== */
@media only screen and (max-width: 959px) {
    .foot_list.menu a,
    .foot_list.menu li a,
    .foot_list.menu a span,
    #under .under_nav a,
    #under .under_nav a span {
        color: #2a2a2a !important;
        opacity: 1 !important;
    }
    .foot_list.menu a:hover,
    .foot_list.menu a:hover span,
    #under .under_nav a:hover,
    #under .under_nav a:hover span {
        color: #000 !important;
        opacity: 1 !important;
    }
    .foot_list.menu li {
        border-bottom: 1px solid rgba(0,0,0,0.08);
    }
    .foot_list.menu li.current a,
    .foot_list.menu li.current a span {
        color: #000 !important;
        font-weight: inherit !important;
    }
    /* 모든 항목 폰트 굵기 통일 */
    .foot_list.menu a,
    .foot_list.menu a span,
    #under .under_nav a,
    #under .under_nav a span {
        font-weight: 400 !important;
    }
}
/* 데스크탑(짙은 배경)에서는 부모 테마 흰색을 그대로 사용 - 강제 색 적용 없음 */

/* ===== 1-2) 데스크탑 footer 통일: BLOG&INFO 하위 sub-menu도 메인 항목과 동일한 밑선/높이 ===== */
@media only screen and (min-width: 960px) {
    /* sub-menu 자체는 보이게 (기본값 사용), 들여쓰기 제거 */
    #under .foot_list.menu .sub-menu {
        display: block !important;
        padding-left: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
    /* sub-menu li 항목도 메인 li와 동일한 높이/밑선/패딩 */
    #under .foot_list.menu .sub-menu li {
        list-style: none !important;
    }
    #under .foot_list.menu .sub-menu li a {
        display: block !important;
        padding: 18px 0 !important;
        border-bottom: 1px solid rgb(198,198,198) !important;
        color: #fff !important;
        font-size: 1.6rem !important;
        text-decoration: none !important;
    }
    #under .foot_list.menu .sub-menu li a:hover {
        color: rgb(252,222,90) !important;
    }
}

/* ===== 2) Hero CTA 영역 텍스트 대비 ===== */
.ppb-hero-cta__note {
    color: #fff !important;
    text-shadow: 0 1px 6px rgba(0,0,0,0.85), 0 0 12px rgba(0,0,0,0.6) !important;
    font-weight: 500 !important;
}

.ppb-hero-cta__usp span {
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7) !important;
}

.ppb-hero-cta__badge {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6) !important;
}

/* secondary 버튼(料金を見る) 명확히 흰 배경 + 짙은 글씨 */
.ppb-hero-cta__btn--secondary {
    background: #fff !important;
    color: #1a1a1a !important;
    border: 2px solid #fff !important;
    font-weight: 700 !important;
}

/* primary 버튼(LINE) 가독성 */
.ppb-hero-cta__btn--primary {
    color: #fff !important;
    font-weight: 700 !important;
}

/* ===== 4) 여름톤 (하늘색 + 화이트) — 사진은 손대지 않음 ===== */

/* 컬러 토큰 — 하늘색 베이스 */
:root {
    --mr-navy: #1e7fc8;         /* 짙은 하늘 → 텍스트/주요 컬러 */
    --mr-navy-2: #4faae5;       /* 중간 하늘 */
    --mr-cyan: #3da9ff;         /* 메인 하늘색 (mens-rize 스타일 배경) */
    --mr-cyan-dark: #1e7fc8;
    --mr-cyan-light: #a5d8ff;
    --mr-red: #ff5252;
    --ppb-gold: #3da9ff !important;
    --ppb-gold-dark: #1e7fc8 !important;
    --ppb-gold-light: #a5d8ff !important;
    --ppb-accent: #3da9ff !important;
}

/* 노란 카테고리 배지 → 시안 블루 */
.wp-block-jb-nw-002__content_category,
.wp-block-jb-nw-002__content_category[style] {
    background: var(--mr-cyan) !important;
    color: #fff !important;
    border-radius: 2px !important;
    padding: 4px 12px !important;
    letter-spacing: 0.05em !important;
    font-weight: 600 !important;
}

/* 모든 노란색 배경 → 시안 */
[style*="background: rgb(252, 222, 90)"],
[style*="background:rgb(252, 222, 90)"],
[style*="background: rgb(252,222,90)"],
[style*="background:rgb(252,222,90)"] {
    background-color: var(--mr-cyan) !important;
}

/* 노란색 텍스트 → 네이비 */
[style*="color: rgb(252, 222, 90)"],
[style*="color:rgb(252, 222, 90)"],
[style*="color: rgb(252,222,90)"],
[style*="color:rgb(252,222,90)"] {
    color: var(--mr-navy) !important;
}

/* 슬라이드 prev/next 화살표 → 네이비 */
.wp-block-jb-tks-001__slide_arrows,
.wp-block-jb-nw-002__slide_arrows {
    background: var(--mr-navy) !important;
    color: #fff !important;
}

/* 모바일 sticky CTA — 전화 버튼 골드 → 네이비, 예약 → 시안 */
.ppb-mobile-cta__btn--phone {
    background: var(--mr-navy) !important;
    color: #fff !important;
}
.ppb-mobile-cta__btn--book {
    background: var(--mr-cyan) !important;
    color: #fff !important;
}

/* Hero CTA primary 버튼 (LINE으로 예약) — 시안 */
.ppb-hero-cta__btn--primary {
    background: var(--mr-cyan) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(0,170,200,0.4) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
}
.ppb-hero-cta__btn--primary:hover {
    background: var(--mr-cyan-dark) !important;
    box-shadow: 0 8px 24px rgba(0,170,200,0.5) !important;
}

/* Hero CTA secondary 버튼 (료킨을 보기) — 흰배경 + 네이비 글씨 */
.ppb-hero-cta__btn--secondary {
    background: #fff !important;
    color: var(--mr-navy) !important;
    border: 2px solid #fff !important;
    font-weight: 700 !important;
}
.ppb-hero-cta__btn--secondary:hover {
    background: var(--mr-cyan) !important;
    color: #fff !important;
    border-color: var(--mr-cyan) !important;
}

/* Hero CTA badge (初回特別価格) → 레드 */
.ppb-hero-cta__badge {
    background: var(--mr-red) !important;
    color: #fff !important;
    border-radius: 4px !important;
    padding: 4px 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-shadow: none !important;
}

/* 호버 컬러 → 시안 */
a:hover,
.foot_list.menu a:hover,
.foot_list.menu a:hover span,
#under .under_nav a:hover,
#under .under_nav a:hover span {
    color: var(--mr-cyan) !important;
}

/* ===== 6) SNS Follow 섹션 (mens-rize 스타일, 하늘색 배경) ===== */
.ppb-sns-follow-section {
    background: var(--mr-cyan) !important;
    padding: 80px 24px !important;
    text-align: center !important;
    position: relative !important;
}
.ppb-sns-inner {
    max-width: 1200px;
    margin: 0 auto;
}
.ppb-sns-title {
    color: #fff !important;
    font-size: 2.4rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    margin: 0 0 8px !important;
}
.ppb-sns-sub {
    color: rgba(255,255,255,0.92) !important;
    font-size: 1rem !important;
    margin: 0 0 40px !important;
    letter-spacing: 0.05em !important;
}
.ppb-sns-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
}
.ppb-sns-card {
    background: #fff !important;
    border-radius: 12px !important;
    padding: 24px 20px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.ppb-sns-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 36px rgba(0,0,0,0.14) !important;
}
.ppb-sns-card-head {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
.ppb-sns-icon {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
    color: #111 !important;
}
.ppb-sns-name {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #111 !important;
}
.ppb-sns-name small {
    font-size: 0.7em !important;
    font-weight: 500 !important;
    color: #666 !important;
    margin-left: 4px !important;
}
.ppb-sns-card-body {
    flex: 1 !important;
    aspect-ratio: 4/3 !important;
    background: #f4f4f4 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.ppb-sns-card-body img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.ppb-sns-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #111 !important;
    color: #fff !important;
    text-decoration: none !important;
    padding: 14px 16px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    font-size: 0.95rem !important;
    gap: 8px !important;
    transition: background 0.2s ease !important;
}
.ppb-sns-cta:hover {
    background: #333 !important;
    color: #fff !important;
}
.ppb-sns-cta span {
    font-size: 1.2em !important;
}

/* 모바일 — 1열로 */
@media (max-width: 768px) {
    .ppb-sns-follow-section {
        padding: 56px 16px !important;
    }
    .ppb-sns-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .ppb-sns-title {
        font-size: 1.8rem !important;
    }
}

/* relocate_sections JS에 ppb-sns-follow-section도 포함되도록 ↓ */

/* ===== 5) FAQ 섹션 가독성 (검은 배경 위 라벨/텍스트) ===== */

/* "FREQUENTLY ASKED QUESTIONS" 라벨이 검은 배경에 묻힘 → 시안으로 보이게 */
.ppb-faq-section .ppb-section-label,
.ppb-faq-section span[class*="label"],
section[class*="faq"] .ppb-section-label {
    color: var(--mr-cyan) !important;
    opacity: 1 !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
}

/* FAQ 카드 안 답변 텍스트가 흐릿 → 짙은 글씨 */
.ppb-faq-item p,
.ppb-faq-item .ppb-faq-a,
.ppb-faq-a,
.ppb-faq-answer {
    color: #2a2a2a !important;
    opacity: 1 !important;
    line-height: 1.7 !important;
}

/* FAQ 질문 글씨 가독성 */
.ppb-faq-q,
.ppb-faq-question {
    color: #0a1a2f !important;
    font-weight: 600 !important;
}

/* Q 마커 (네이비 원) */
.ppb-faq-q::before,
.ppb-faq-mark-q {
    color: var(--mr-cyan) !important;
    font-weight: 800 !important;
}

/* +/− 아이콘 — 시안 */
.ppb-faq-toggle,
.ppb-faq-item .toggle-icon {
    color: var(--mr-cyan) !important;
}

/* ===== 3) News 슬라이더 (자동스크롤 중지 시 cursor 표시) ===== */
.wp-block-jb-nw-002__swiper {
    cursor: grab;
}
.wp-block-jb-nw-002__swiper:active {
    cursor: grabbing;
}

/* === Hero(MV) 화면 비율 보정 — 원본 1920x800(2.4:1)에 맞춰 세로 늘어남/과확대 방지 === */
@media (min-width: 768px) {
    .wp-block-jb-mv-001__list_item,
    .wp-block-jb-mv-001__list_item.style1,
    .WPC .wp-block-jb-mv-001__list_item,
    .WTT .wp-block-jb-mv-001__list_item,
    .WT .wp-block-jb-mv-001__list_item {
        height: 41.67vw !important;   /* 800 / 1920 = 41.67% → 원본 비율 2.4:1 */
        max-height: 820px !important;
    }
}
.wp-block-jb-mv-001__content_image {
    object-fit: cover !important;     /* 늘어남 없이 비율 유지 */
    object-position: center 30% !important;
}

/* === 모바일(iPhone 등) hero 보정 — PC 가로이미지가 세로 프레임에 과확대되던 문제 수정 === */
@media (max-width: 767px) {
    /* 가로 MV_PC → 세로 전용 MV_SP 이미지로 교체 (박스 비율 122.5vw와 일치) */
    .wp-block-jb-mv-001__content_image {
        content: url("https://ppbeautylabo.com/ppbeautylabo/wp-content/uploads/2025/12/MV_SP_.webp") !important;
        object-fit: cover !important;
        object-position: center top !important;
    }
    /* 밝은 배경 위 흰 글씨 가독성용 상단 그라데이션 스크림 */
    .wp-block-jb-mv-001::before {
        content: "" !important;
        position: absolute !important;
        top: 0; left: 0; right: 0;
        height: 46%;
        background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.28) 55%, rgba(0,0,0,0) 100%) !important;
        z-index: 4;
        pointer-events: none;
    }
}

/* === Hero 글씨 수직 중앙 정렬 — '너무 위에' 보정 (PC·모바일) === */
.ppb-hero-heading {
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
}
@media (max-width: 767px) {
    .ppb-hero-heading {
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 88% !important;
    }
    /* 중앙 흰 글씨 가독성: 스크림을 더 길게 + 가운데까지 어둡게 */
    .wp-block-jb-mv-001::before {
        height: 74% !important;
        background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.4) 42%, rgba(0,0,0,0.14) 74%, rgba(0,0,0,0) 100%) !important;
    }
}

/* === Hero 점(dot) 위치 — 사진 경계선에 붙던 것 안쪽으로 올림 === */
.ppb-hero-dots { bottom: 7% !important; }
@media (max-width: 767px) {
    .ppb-hero-dots { bottom: 8% !important; }
}

/* === Hero 글씨 크게 (너무 작다 피드백) === */
.ppb-hero-heading__title {
    font-size: clamp(1.8rem, 4.4vw, 3.4rem) !important;
}
.ppb-hero-heading__text {
    font-size: clamp(0.95rem, 1.6vw, 1.25rem) !important;
}
@media (max-width: 767px) {
    .ppb-hero-heading__title {
        font-size: clamp(1.5rem, 6.6vw, 2.2rem) !important;
        line-height: 1.45 !important;
    }
    .ppb-hero-heading__text {
        font-size: clamp(0.88rem, 3.9vw, 1.1rem) !important;
        line-height: 1.85 !important;
    }
}

/* === Hero 글씨 더 크게 (재요청) === */
.ppb-hero-heading__title {
    font-size: clamp(2.2rem, 5.2vw, 4.2rem) !important;
}
.ppb-hero-heading__text {
    font-size: clamp(1.05rem, 1.9vw, 1.45rem) !important;
}
@media (max-width: 767px) {
    .ppb-hero-heading__title {
        font-size: clamp(1.8rem, 7.8vw, 2.7rem) !important;
        line-height: 1.4 !important;
    }
    .ppb-hero-heading__text {
        font-size: clamp(0.98rem, 4.4vw, 1.3rem) !important;
        line-height: 1.8 !important;
    }
}

/* ============================================================
   [client feedback 2026-07-04] 데스크탑 네비 짤림 방지
   메모: タブボタンをはめ込む (화면 작으면 CONTACT 짤리던 문제)
   → 원본 넓은 디자인 유지 + HOME·FAQ 2개만 데스크탑 네비에서 숨김
   → HOME=로고로 대체, FAQ=페이지 내 접근. 모바일 햄버거엔 그대로 유지.
   * 테마 PC네비 전환점(1280px)과 동일 구간에만 적용
   ============================================================ */
@media (min-width: 1280px) {
    #Gnav > ul > li:first-child,
    #Gnav > ul > li:has(> a[href="/#faq"]) {
        display: none !important;
    }
}

/* ============================================================
   [client feedback 2026-07-04] 헤더 스크롤 追従 해제
   메모: スクロール追従やめる (스크롤해도 헤더가 따라오지 않게)
   → 디자인/레이아웃은 그대로, position:fixed → static 만 변경
   → fixed용 예약여백(.padd_head padding-top:80px) 제거해 이중 여백 방지
   ============================================================ */
#upper {
    position: static !important;
}
.padd_head {
    padding-top: 0 !important;
}

/* ============================================================
   [client feedback 2026-07-04] 「私たちが大切にしていること」캐치카피
   메모: (もっと大きな、赤文字で強調) 一般的な脱毛サロンの形式を覆す。…
   ============================================================ */
.ppb-concept-catch {
    margin: 18px auto 0;
    max-width: 900px;
    color: #c8102e;               /* 강조 빨강 */
    font-weight: 700;
    font-size: clamp(1.35rem, 2.6vw, 2.1rem);
    line-height: 1.6;
    letter-spacing: 0.02em;
    text-align: center;
}
@media (max-width: 767px) {
    .ppb-concept-catch {
        font-size: clamp(1.15rem, 5.2vw, 1.6rem);
        line-height: 1.7;
        padding: 0 18px;
    }
}

/* [2026-07-05] concept-catch 폰트를 사이트 제목 톤(명조체)에 맞춤 - 형식 불일치 수정 */
.ppb-concept-catch {
    font-family: var(--ppb-serif) !important;   /* Noto Serif JP - 제목과 동일 */
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    line-height: 1.7 !important;
}

/* ============================================================
   [client feedback 2026-07-05] 料金表 - 「初回」명확화 + 안내문구
   메모: 「初回」の料金ということが分かるふうに / もっと文字大きく + ※안내문
   ============================================================ */
/* 初回特別価格 라벨 크고 명확하게 */
.ppb-price-first-label {
    font-size: clamp(1rem, 1.5vw, 1.25rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    padding: 6px 16px !important;
}
/* 가격 밑 "初回1回" 단위도 조금 크게 + 강조 */
.ppb-price-unit {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--ppb-gold-dark, #a98a47) !important;
}
/* 하단 안내문구 */
.ppb-pricing-note {
    margin: 32px auto 0;
    max-width: 760px;
    text-align: center;
    font-size: clamp(0.85rem, 1.4vw, 0.98rem);
    line-height: 1.9;
    color: #666;
    padding: 0 18px;
}

/* [2026-07-05] 初回特別価格 라벨 확대 - 더 구체적 셀렉터로 확실히 우선 */
.ppb-pricing-section .ppb-price-card .ppb-price-first-label {
    font-size: clamp(1rem, 1.6vw, 1.3rem) !important;
    font-weight: 700 !important;
    padding: 6px 18px !important;
    letter-spacing: 0.05em !important;
}

/* [2026-07-05] FIX: 테마 html font-size:62.5%(1rem=10px) → px로 재지정 */
.ppb-pricing-section .ppb-price-card .ppb-price-first-label {
    font-size: 17px !important;
    font-weight: 700 !important;
    padding: 7px 20px !important;
    letter-spacing: 0.05em !important;
}
.ppb-pricing-section .ppb-price-unit {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--ppb-gold-dark, #a98a47) !important;
}
.ppb-pricing-note {
    font-size: 14px !important;
    line-height: 1.9 !important;
    color: #666 !important;
}

/* [2026-07-05] 삭제된 섹션으로 가는 죽은 nav 링크 제거: 実例(#ba-section)·FAQ(#faq) - 전 화면 */
#Gnav > ul > li:has(> a[href="/#ba-section"]),
#Gnav > ul > li:has(> a[href="/#faq"]) {
    display: none !important;
}

/* [2026-07-05] 피처카드 설명 줄바꿈(\n) 반영 */
.ppb-feature-card-desc { white-space: pre-line; }

/* [2026-07-05] 예약 캘린더 안내문 */
.ppb-cal-note {
    text-align: center;
    font-size: 13px;
    color: #888;
    margin: 6px 0 0;
    line-height: 1.7;
}