/*
Theme Name:     Cheecle Child
Theme URI:      https://p.cheecle.kr
Description:    치클포토 디자인 시스템을 적용한 Kadence 자식 테마. v3.5 4색 시스템 (60% 아이보리 + 30% 잉크네이비 + 10% 오렌지 + 5% 올리브).
Author:         Cheecle Photo
Author URI:     https://p.cheecle.kr
Template:       kadence
Version:        1.0.0
License:        GNU General Public License v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:    cheecle-child
Tags:           photography, ecommerce, korean
*/

/* ==========================================================================
   치클포토 자식 테마
   spec: docs/p2-cheecle-design-spec.md (v3.5) + 마스터 브랜드 가이드 v3.5
   4색 시스템: 60% 아이보리 + 30% 잉크네이비 + 10% 오렌지 + 5% 올리브

   파일 구조:
   - assets/css/tokens.css       : CSS 변수 정의 (디자인 토큰)
   - assets/css/typography.css   : 한글 타이포그래피 (Pretendard)
   - assets/css/components.css   : 버튼, 폼, 카드 등 공통 컴포넌트
   - assets/css/main-page.css    : 메인 페이지 3분할 히어로 카드 등

   각 파일은 functions.php에서 enqueue 되며, 이 파일에서는
   순서 보장을 위한 최소한의 import만 수행한다.
   ========================================================================== */

/* 부모 테마(Kadence) 스타일이 먼저 로드된 후, 이 파일이 로드된다.
   functions.php에서 wp_enqueue_style 의존성 체인으로 보장. */


/* ==========================================================================
   Kadence Global Palette Override — 마스터 가이드 운영 기준 (#FCA80A)
   spec: docs/p2-cheecle-design-spec.md line 83, 357
   ========================================================================== */
:root {
  --global-palette1: #FCA80A;  /* 메인 오렌지 (실제 로고 본체색) */
  --global-palette2: #E8970A;  /* hover/dim */
  --global-palette3: #1A3A52;  /* 잉크 네이비 */
  --global-palette4: #5C4720;  /* honey brown */
  --global-palette5: #2C4A5C;  /* ink mid */
  --global-palette7: #FAF7F2;  /* subtle bg (이비) */
  --global-palette8: #FFFDF8;  /* card */
  --global-palette9: #FAF7F2;  /* bg ivory (순백 #FFFFFF 절대 금지) */
}


/* ==========================================================================
   페이지 본문 배경 — 60% 토대(이비) 강제 적용
   순백(#FFFFFF) 사용 절대 금지: v3.5 마스터 가이드
   ========================================================================== */
html,
body,
body.wp-singular,
.site,
.content-area,
.site-content,
main#main {
  background-color: #FAF7F2 !important;
}

/* WooCommerce/Kadence 페이지 컨테이너도 동일 처리 */
.entry-content-wrap,
.entry-hero-section-inner,
.wp-site-blocks,
.woocommerce-page .content-container,
.woocommerce-page .site-container {
  background-color: #FAF7F2 !important;
}


/* ==========================================================================
   헤더 — 마스터 가이드 60-30-10-5 규칙
   60% ivory bg + 30% 잉크네이비 텍스트 + 10% 오렌지 강조
   ========================================================================== */
.site-main-header-wrap,
.site-top-header-wrap,
.site-bottom-header-wrap,
header.site-header,
.site-header-row-layout-contained,
.site-header-row {
  background: #FAF7F2 !important;
  background-color: #FAF7F2 !important;
}

/* 헤더 메뉴 텍스트 — 잉크 네이비 */
.site-header .header-navigation a,
.site-header .menu-link,
.site-header-section a,
.site-main-header-inner-wrap a {
  color: #1A3A52 !important;
}

/* 헤더 메뉴 호버 — 오렌지 강조 (10%) */
.site-header .header-navigation a:hover,
.site-header .menu-link:hover,
.site-header-section a:hover {
  color: #FCA80A !important;
}

/* 카트 아이콘 / 배지 */
.site-header .header-cart-button .header-cart-total {
  background: #FCA80A !important;
  color: #1A3A52 !important;
}

/* 헤더 outer wrap (양 끝 풀-width 영역) — Kadence 가 inline 으로 palette1 박은 부분 override */
.site-main-header-wrap .site-header-row-container-inner,
#masthead .site-main-header-wrap .site-header-row-container-inner,
.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner,
.site-header-wrap,
.site-header-upper-wrap,
.site-header-upper-inner-wrap {
  background: #FAF7F2 !important;
  background-color: #FAF7F2 !important;
}


/* ==========================================================================
   폰트 강제 적용 (Kadence Customizer 의 Epilogue/Bebas Neue override)
   백서 §4 / tokens.css --font-body, --font-display
   ========================================================================== */
body, input, select, optgroup, textarea, button,
.site, .site-container, p, span, li, td, th, label, div {
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system,
               BlinkMacSystemFont, 'Apple SD Gothic Neo',
               'Noto Sans KR', sans-serif !important;
}

/* 위 전역 폰트 강제(div/span !important)가 WooCommerce 별점 아이콘 폰트까지
   Pretendard로 덮어써서 별이 네모(tofu)로 깨지는 문제 — 별점만 예외 처리 */
.star-rating, .star-rating span {
  font-family: star !important;
}

/* 상품평 목록의 날짜 숨김 */
.woocommerce-review__dash, .woocommerce-review__published-date {
  display: none;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.entry-title, .page-title, .site-title,
.site-header .header-navigation a, .menu-link,
.wp-block-heading {
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system,
               BlinkMacSystemFont, 'Apple SD Gothic Neo',
               'Noto Sans KR', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
}

/* Kadence 가 버튼에 박은 Bebas Neue + uppercase + letter-spacing 제거 */
button, .button, .wp-block-button__link,
input[type="button"], input[type="reset"], input[type="submit"],
.fl-button, .elementor-button-wrapper .elementor-button,
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit {
  font-family: 'Pretendard Variable', 'Pretendard',
               -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* 숫자·가격 — Inter (tabular nums) */
.numeric, .price, .woocommerce-Price-amount, .amount {
  font-family: 'Inter', 'Pretendard Variable', 'Pretendard',
               -apple-system, sans-serif !important;
  font-feature-settings: 'tnum' 1 !important;
}


/* ==========================================================================
   모바일 햄버거 버튼 색 강제 (ivory 헤더 배경 위)
   ========================================================================== */
.site-mobile-header-wrap .mobile-toggle-open-container,
.site-mobile-header-wrap .menu-toggle-open,
.site-mobile-header-wrap .drawer-toggle,
.site-mobile-header-wrap button#mobile-toggle,
button.menu-toggle-open,
.site-header .menu-toggle-open {
  color: #1A3A52 !important;
}

.site-mobile-header-wrap button#mobile-toggle svg,
.site-mobile-header-wrap .menu-toggle-icon svg,
button.menu-toggle-open svg,
button.menu-toggle-open path {
  fill: #1A3A52 !important;
  color: #1A3A52 !important;
}

/* 호버 시 오렌지 강조 */
.site-mobile-header-wrap button#mobile-toggle:hover svg,
button.menu-toggle-open:hover svg,
button.menu-toggle-open:hover path {
  fill: #FCA80A !important;
}

/* 모바일 드로어 메뉴 (펼쳐졌을 때) */
.popup-drawer .header-navigation a,
.popup-drawer .menu-link,
#mobile-drawer a {
  color: #1A3A52 !important;
}
.popup-drawer .header-navigation a:hover,
.popup-drawer .menu-link:hover,
#mobile-drawer a:hover {
  color: #FCA80A !important;
}


/* ==========================================================================
   모바일 우상단 — 로그인/회원가입 vs 햄버거 자리 충돌 해결
   .cheecle-header-account (fixed, right:0) 가 햄버거 가리는 문제
   ========================================================================== */
@media (max-width: 1024px) {
  /* 로그인/회원가입 박스를 햄버거 자리만큼 왼쪽으로 비킴 */
  .cheecle-header-account {
    right: 64px !important;
  }

  /* 햄버거 버튼을 우상단 fixed + 명확하게 박스 처리 */
  .site-mobile-header-wrap button#mobile-toggle,
  button.menu-toggle-open.drawer-toggle {
    position: fixed !important;
    top: 8px !important;
    right: 12px !important;
    z-index: 10000 !important;
    background: #FFFDF8 !important;
    border: 1px solid #E5DDD0 !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    box-shadow: 0 2px 8px rgba(26,58,82,.10) !important;
    width: 44px !important;
    height: 40px !important;
  }

  /* 햄버거 호버 — 오렌지 강조 */
  .site-mobile-header-wrap button#mobile-toggle:hover,
  button.menu-toggle-open:hover {
    background: #FCA80A !important;
    border-color: #FCA80A !important;
  }
  .site-mobile-header-wrap button#mobile-toggle:hover svg path {
    fill: #1A3A52 !important;
  }
}


/* ==========================================================================
   Hero-mini — 위아래 간격 축소 + eyebrow 가시성 보장
   ========================================================================== */
.hero-mini {
  padding: 32px 16px 24px !important;
}
@media (min-width: 1024px) {
  .hero-mini {
    padding: 40px 24px 28px !important;
  }
}

.hero-mini__eyebrow {
  color: #FCA80A !important;          /* 메인 오렌지 — 잘 보임 */
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.2em !important;
  margin-bottom: 14px !important;
  opacity: 1 !important;
  display: block !important;
}

.hero-mini__title {
  color: #1A3A52 !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}


/* ==========================================================================
   Hero-mini — transparent header 가 위를 덮는 문제 해결
   헤더 height(약 70-90px) 만큼 위쪽 padding 확보
   ========================================================================== */
.hero-mini {
  padding: 100px 16px 24px !important;
}
@media (min-width: 1024px) {
  .hero-mini {
    padding: 110px 24px 32px !important;
  }
}

/* eyebrow — 헤더 영역에 가려지지 않는 위치 + 강한 가시성 */
.hero-mini__eyebrow {
  color: #FCA80A !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.2em !important;
  margin-bottom: 12px !important;
  opacity: 1 !important;
  display: block !important;
  position: relative !important;
  z-index: 5 !important;
}

.hero-mini__title {
  color: #1A3A52 !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  position: relative !important;
  z-index: 5 !important;
}
@media (min-width: 1024px) {
  .hero-mini__title {
    font-size: 36px !important;
  }
}


/* ==========================================================================
   3분할 히어로 카드 — 사진 배경 (1600x800 Retina)
   ========================================================================== */
.hero-card.hero-card--ink .hero-card__image {
  background-image: url('https://p2.cheecle.kr/wp-content/uploads/2026/06/hero_photobook.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  position: relative;
}

.hero-card.hero-card--white .hero-card__image {
  background-image: url('https://p2.cheecle.kr/wp-content/uploads/2026/06/hero_print.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  position: relative;
}

.hero-card.hero-card--yellow .hero-card__image {
  background-image: url('https://p2.cheecle.kr/wp-content/uploads/2026/06/hero_calendar.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  position: relative;
}

/* 가격 라벨 가독성 — 좌하단 그라데이션 오버레이 */
.hero-card .hero-card__image::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to top, rgba(26,58,82,0.45) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.hero-card__price {
  position: relative;
  z-index: 2;
}

/* 카드 이미지 영역 높이 조금 키움 (사진이 더 잘 보이도록) */
.hero-card__image {
  height: 200px !important;
}
@media (min-width: 1024px) {
  .hero-card__image {
    height: 260px !important;
  }
}


/* ==========================================================================
   3분할 카드 — v2 보정 (ivory 배경 합성 사진, overlay 제거)
   ========================================================================== */
/* 어두운 그라데이션 오버레이 제거 (사진이 ivory 배경이라 가격 라벨이 자체로 보임) */
.hero-card .hero-card__image::after {
  display: none !important;
}

/* 카드 이미지 영역 height 다시 조정 (사진이 잘 보이도록) */
.hero-card__image {
  height: 180px !important;
  background-size: cover !important;
  background-position: center !important;
}
@media (min-width: 1024px) {
  .hero-card__image {
    height: 220px !important;
  }
}

/* ===== 사진인화 무료배송 배너 (메인페이지, 3카드 다음) ===== */
.ship-banner-wrap {
  /* hero-split section 과 동일한 좌우 padding 패턴 → 카드 그리드와 좌우 정렬 일치 */
  margin: -64px auto 0;          /* hero-split 의 padding-bottom(var(--space-9)) 상쇄 → 3카드 gap 만큼만 남김 */
  padding: 0 var(--space-4) 24px;
  position: relative;
  z-index: 1;
}
@media (min-width: 1024px) {
  .ship-banner-wrap { padding: 0 var(--space-7) 24px; }
}
.ship-banner {
  max-width: var(--container-max);  /* 카드 그리드 max-width 와 일치 */
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: stretch;
  background: linear-gradient(135deg, #FFF8E7 0%, #FEF3C7 100%);
  border-radius: 24px;
  overflow: hidden;
  min-height: 140px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 20px rgba(26,58,82,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ship-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(26,58,82,0.10);
  color: inherit;
  text-decoration: none;
}
.ship-banner__chip {
  position: absolute;
  top: 14px;
  left: 18px;
  background: #FCA80A;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 99px;
  letter-spacing: 0.06em;
  z-index: 2;
  font-family: monospace, -apple-system, sans-serif;
}
.ship-banner__photos {
  flex: 0 0 32%;
  background: url('/wp-content/uploads/2026/06/ship-banner-photos.jpg') center/cover no-repeat;
  position: relative;
}
.ship-banner__photos::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 35%;
  background: linear-gradient(to right, transparent, #FEF3C7);
  pointer-events: none;
}
.ship-banner__text {
  flex: 1;
  padding: 24px 36px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ship-banner__eyebrow {
  font-size: 13px;
  font-weight: 700;
  color: #FCA80A;
  margin: 0 0 4px;
  letter-spacing: 0.01em;
}
.ship-banner__title {
  font-size: 26px;
  font-weight: 800;
  color: #1A3A52 !important;
  line-height: 1.25;
  margin: 0 0 6px;
}
.ship-banner__sparkle {
  display: inline-block;
  margin-left: 4px;
  font-size: 22px;
}
.ship-banner__sub {
  font-size: 14px;
  color: #6B7280;
  margin: 0;
}
@media (max-width: 1023px) {
  .ship-banner-wrap { margin-top: -40px; }
}
@media (max-width: 768px) {
  .ship-banner-wrap { padding: 0 var(--space-4) 18px; margin-top: -28px; }
  .ship-banner { min-height: 110px; border-radius: 18px; }
  .ship-banner__photos { flex: 0 0 38%; }
  .ship-banner__text { padding: 16px 18px 14px; }
  .ship-banner__title { font-size: 18px; }
  .ship-banner__eyebrow { font-size: 11px; }
  .ship-banner__sub { font-size: 12px; }
  .ship-banner__chip { font-size: 10px; padding: 3px 9px; top: 10px; left: 12px; }
  .ship-banner__sparkle { font-size: 17px; }
}
@media (max-width: 480px) {
  .ship-banner__title { font-size: 16px; }
}

/* ===== 포토북 타입 3카드 (메인페이지, HOW IT WORKS 다음) ===== */
/* hero-split / ship-banner 와 동일한 padding 패턴 → 좌우 정렬 일치 */
.photobook-types-wrap {
  padding: var(--space-7) var(--space-4);
}
@media (min-width: 1024px) {
  .photobook-types-wrap { padding: var(--space-9) var(--space-7); }
}
.photobook-types {
  max-width: var(--container-max);      /* 카드 그리드 = 다른 섹션과 동일 max */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .photobook-types { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
}
@media (min-width: 1024px) {
  .photobook-types { gap: var(--space-5); }
}
.photobook-type__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #f3f3f3;
  margin-bottom: var(--space-4);
  display: block;
}
.photobook-type__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.photobook-type:hover .photobook-type__image img { transform: scale(1.04); }
.photobook-type__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
  line-height: 1.4;
}
@media (min-width: 1024px) { .photobook-type__title { font-size: 20px; } }
.photobook-type__desc {
  font-size: 14px;
  color: #6B7280;
  line-height: 1.65;
  margin: 0;
}
@media (min-width: 1024px) { .photobook-type__desc { font-size: 15px; } }

/* ============================================
   포토북 랜딩 페이지 (/photobook/) — ID 379454
   ============================================ */
/* Kadence default page hero(title + breadcrumb) 숨김 — 자체 hero 사용 */
.page-id-379454 .entry-hero.page-hero-section,
.page-id-379454 .entry-hero,
.page-id-379454 .entry-header,
.page-id-379459 .entry-hero.page-hero-section,
.page-id-379459 .entry-hero,
.page-id-379459 .entry-header { display: none !important; }
.page-id-379454 .content-area,
.page-id-379459 .content-area { margin-top: 0 !important; }

.pb-landing {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text-primary);
  background: var(--bg-primary);
}

/* === 공통 === */
.pb-section { padding: var(--space-8) 0; }
/* PC도 모바일과 동일한 64px 상하 padding 유지 — 이전 space-9(96px)는 섹션간 192px 과다 */
@media (min-width: 1024px) { .pb-section { padding: var(--space-8) 0; } }
.pb-section__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}
@media (min-width: 1024px) { .pb-section__inner { padding: 0 var(--space-7); } }

.pb-eyebrow {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--cheecle-yellow, #FCA80A);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.pb-eyebrow--inverse { color: var(--cheecle-yellow, #FCA80A); }

.pb-h2 {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.3;
  margin: 0 0 var(--space-4);
  text-align: center;
}
@media (min-width: 1024px) { .pb-h2 { font-size: 38px; margin-bottom: var(--space-5); } }
.pb-h2--inverse { color: var(--text-inverse); }

.pb-section__sub {
  font-size: 16px;
  color: #6B7280;
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-6);
  line-height: 1.65;
}
.pb-section__sub--inverse { color: rgba(250,247,242,0.75); }

.pb-section__cta { text-align: center; margin-top: var(--space-6); }

.pb-cta-btn {
  display: inline-block;
  background: var(--cheecle-yellow, #FCA80A);
  color: #fff !important;
  font-size: 17px;
  font-weight: 700;
  padding: 14px 32px;
  border-radius: 99px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(252,168,10,0.3);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  cursor: pointer;
}
.pb-cta-btn:hover {
  background: #E8970A;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(252,168,10,0.4);
  color: #fff !important;
  text-decoration: none;
}
.pb-cta-btn--secondary {
  background: var(--ink-blue);
  box-shadow: 0 4px 14px rgba(26,58,82,0.2);
}
.pb-cta-btn--secondary:hover { background: #122c3f; box-shadow: 0 8px 20px rgba(26,58,82,0.3); }

/* === 1. HERO === */
.pb-hero {
  background: var(--bg-secondary);
  padding: 130px 0 var(--space-8);            /* sticky header(110px) 아래 시작 */
}
@media (min-width: 1024px) { .pb-hero { padding: 140px 0 var(--space-8); } }

.pb-hero__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 1024px) {
  .pb-hero__inner {
    padding: 0 var(--space-7);
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-8);
    align-items: stretch;
  }
}
.pb-hero__slider { align-self: center; }
.pb-hero__text {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;              /* 슬라이더 height 안에서 콘텐츠 가운데 */
  gap: var(--space-2);                  /* 12px → 8px */
}
.pb-hero__text .pb-eyebrow { margin-bottom: 0; }

/* 슬라이더 */
.pb-hero__slider { position: relative; }
.pb-hero__slider {
  border-radius: var(--radius-lg);     /* 래퍼에 라운딩 + overflow hidden — 모서리 잘림 방지 */
  overflow: hidden;
  position: relative;
}
.pb-hero__slider-track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: #e5e5e0;
  aspect-ratio: 4 / 3;                 /* 원래 비율 */
}
.pb-hero__slider-track::-webkit-scrollbar { display: none; }
.pb-hero__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.pb-hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pb-hero__slider-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(0,0,0,0.25);
  border-radius: 99px;
  backdrop-filter: blur(6px);
}
.pb-hero__slider-dots button {
  width: 8px; height: 8px;
  padding: 0; border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: background 0.2s, width 0.2s;
}
.pb-hero__slider-dots button.is-active { background: #fff; width: 22px; border-radius: 4px; }

/* HERO 텍스트 */
.pb-hero__title {
  font-size: 30px;
  font-weight: 800;
  color: var(--ink-blue);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
@media (min-width: 1024px) { .pb-hero__title { font-size: 36px; line-height: 1.1; } }
/* !important 로 강제: 부모 테마(kadence)의 .single-content p 규칙(specificity 0,1,1 로
   .pb-hero__price 단독 클래스 0,1,0 보다 높음)이 margin-bottom:var(--global-md-spacing)(32px)를
   먹여서 가격 텍스트만 아래로 밀려 버튼이랑 수직 중앙이 안 맞던 진짜 원인 — margin 도 강제로 0 고정 */
.pb-hero__price-row { display: flex !important; align-items: center; gap: 12px; flex-wrap: nowrap !important; }
.pb-hero__price {
  font-size: 15px;
  font-weight: 700;
  color: #5C4720;
  margin: 0 !important;
  white-space: nowrap;
  width: auto !important; flex: 0 0 auto !important;
}
.pb-hero__detail-link {
  display: inline-flex !important; align-items: center; justify-content: center;
  flex: 0 0 auto !important; width: auto !important; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--ink-blue); text-align: center;
  border: 1px solid rgba(26,58,82,.25); border-radius: 999px; padding: 6px 16px;
  text-decoration: none; transition: border-color .15s, background .15s;
}
.pb-hero__detail-link:hover { border-color: var(--cheecle-yellow); background: rgba(252,168,10,.08); }
@media (max-width: 380px) {
  .pb-hero__price-row { gap: 8px; }
  .pb-hero__price { font-size: 13px; }
  .pb-hero__detail-link { font-size: 11px; padding: 5px 10px; }
}
.pb-hero__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 4px;
}
.pb-hero__features li {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.5;
}
@media (min-width: 1024px) { .pb-hero__features li { font-size: 17px; } }
.pb-hero__cta {
  display: block;
  width: 100%;
  text-align: center;
  align-self: stretch;            /* 텍스트 컬럼 전체 너비 */
  margin-top: 6px;
  padding: 14px 24px;
  font-size: 17px;
}

/* === 2. 3가지 핵심 가치 === */
.pb-three-features { background: var(--bg-primary); }
.pb-three-features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .pb-three-features__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}
@media (min-width: 1024px) {
  .pb-three-features__grid { grid-template-columns: repeat(4, 1fr); }
}
.pb-tf { text-align: center; padding: var(--space-4); }
.pb-tf__icon { font-size: 40px; margin-bottom: var(--space-3); }
.pb-tf h3 { font-size: 18px; font-weight: 700; color: var(--ink-blue); margin: 0 0 var(--space-2); }
.pb-tf p { font-size: 14px; color: #6B7280; margin: 0; line-height: 1.6; }
.pb-tf__link { display: inline-block; margin-top: var(--space-3); font-size: 14px; font-weight: 700; color: var(--cheecle-yellow, #FCA80A); text-decoration: none; }
.pb-tf__link:hover { text-decoration: underline; }

/* === 3. 5활용 카드 === */
.pb-types { background: var(--bg-secondary); }
.pb-types-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) { .pb-types-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pb-types-grid { grid-template-columns: repeat(5, 1fr); gap: var(--space-3); } }
.pb-type-card {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  text-align: left;
  box-shadow: 0 2px 12px rgba(26,58,82,0.04);
  transition: transform 0.2s, box-shadow 0.2s;
}
.pb-type-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(26,58,82,0.08); }
.pb-type-card__icon { font-size: 32px; margin-bottom: var(--space-3); }
.pb-type-card h3 { font-size: 16px; font-weight: 700; color: var(--ink-blue); margin: 0 0 var(--space-2); line-height: 1.3; }
.pb-type-card p { font-size: 13px; color: #6B7280; margin: 0; line-height: 1.55; }

/* === 4. 3가지 커버 카드 === */
.pb-covers { background: var(--bg-primary); }
.pb-covers-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 768px) { .pb-covers-grid { grid-template-columns: repeat(3, 1fr); } }
.pb-cover-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-4);
  background: #f3f3f3;
}
.pb-cover-card__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.pb-cover-card:hover .pb-cover-card__image img { transform: scale(1.05); }
.pb-cover-card h3 { font-size: 20px; font-weight: 700; color: var(--ink-blue); margin: 0 0 var(--space-2); }
.pb-cover-card p { font-size: 15px; color: #6B7280; margin: 0; line-height: 1.65; }

/* === 5. 가격 === */
.pb-pricing { background: var(--bg-secondary); }
.pb-pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) { .pb-pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pb-pricing-grid { grid-template-columns: repeat(4, 1fr); } }
.pb-pricing-card {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: 0 2px 12px rgba(26,58,82,0.04);
}
.pb-pricing-card h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--cheecle-yellow, #FCA80A);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid #e5e5e0;
}
.pb-pricing-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pb-pricing-card li {
  font-size: 14px;
  color: var(--text-primary);
  padding: var(--space-1) 0;
  line-height: 1.5;
}
.pb-pricing-card--accent {
  background: linear-gradient(135deg, var(--ink-blue) 0%, #2A4E68 100%);
  color: var(--text-inverse);
}
.pb-pricing-card--accent h4 { color: var(--cheecle-yellow, #FCA80A); border-color: rgba(252,168,10,0.3); }
.pb-pricing-card__price {
  font-size: 32px;
  font-weight: 800;
  color: var(--cheecle-yellow, #FCA80A);
  margin: var(--space-3) 0 var(--space-2);
}
.pb-pricing-card__note { font-size: 12px; color: rgba(250,247,242,0.6); margin: 0; }

/* === 5b. 사이즈 & 커버 픽커 (2026-08 개편) === */
/* 현재 선택 가격 — 옵션 섹션 안에서만 상단에 붙어 따라다니는 sticky 바.
   .pb-pricing 의 직계 자식이라 그 섹션을 벗어나면(다음 섹션 진입) 자동으로 스크롤을 따라 사라짐. */
.pb-price-sticky {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg-primary); border-bottom: 2px solid var(--cheecle-yellow);
  box-shadow: 0 4px 16px rgba(26,58,82,.08);
  margin-top: var(--space-6);
}
.pb-price-sticky__inner {
  max-width: var(--container-max); margin: 0 auto; padding: var(--space-4) var(--space-4);
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
}
/* sticky 바로 바로 아래 "01 사이즈 선택" 이 바짝 붙어보이지 않도록 여백 확보 */
.pb-pricing .pb-price-sticky + .pb-section__inner { padding-top: var(--space-8, 40px); }
@media (min-width: 1024px) { .pb-price-sticky__inner { padding: 18px var(--space-7); } }
.pb-price-sticky__label { display: flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #8C7651; font-weight: 700; }
.pb-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ADE80; animation: pb-live-pulse 1.6s ease-in-out infinite; }
@keyframes pb-live-pulse { 0%,100%{ opacity: 1; } 50%{ opacity: .25; } }
.pb-price-sticky__amount { font-size: 26px; font-weight: 800; color: var(--ink-blue); white-space: nowrap; font-variant-numeric: tabular-nums; transition: color .2s; }
.pb-price-sticky__amount span:last-child { font-size: 15px; font-weight: 600; margin-left: 3px; opacity: .7; }
.pb-price-sticky__amount.pb-flash { animation: pb-flash .5s ease; }
@keyframes pb-flash { 0%{ color: var(--cheecle-yellow); } 100%{ color: var(--ink-blue); } }
.pb-price-sticky__opts { font-size: 13px; color: #8C7651; flex: 1; min-width: 160px; }
.pb-price-sticky__cta {
  flex: 0 0 auto; margin-left: auto; background: var(--cheecle-yellow, #FCA80A); color: var(--ink-blue); font-weight: 700;
  padding: 12px 26px; border-radius: 999px; text-decoration: none; white-space: nowrap; transition: transform .15s, box-shadow .15s;
}
.pb-price-sticky__cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(252,168,10,.35); }
@media (max-width: 640px) {
  .pb-price-sticky__inner { padding: 12px 16px; gap: 8px 16px; }
  .pb-price-sticky__label { order: 1; flex: 1 0 auto; }
  .pb-price-sticky__amount { order: 2; font-size: 21px; }
  .pb-price-sticky__opts { order: 4; flex-basis: 100%; }
  .pb-price-sticky__cta { order: 3; margin-left: auto; padding: 10px 18px; font-size: 14px; }
}

.pb-opt-block { margin-top: var(--space-8, 56px); }
.pb-opt-block:first-child { margin-top: 0; }
.pb-opt-title {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 20px; font-weight: 700; color: var(--ink-blue);
  margin: 0 0 var(--space-5);
}
.pb-opt-title__num {
  font-size: 13px; font-weight: 700;
  color: var(--bg-primary); background: var(--ink-blue);
  border-radius: 999px; padding: 3px 10px;
}

.pb-size-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.pb-size-group {
  background: var(--bg-primary); border: 1px solid #E5DDD0; border-radius: var(--radius-lg);
  padding: 28px 24px 22px; box-shadow: 0 2px 12px rgba(26,58,82,0.04);
  display: flex; flex-direction: column; align-items: center;
}
.pb-stage { position: relative; margin: 0 auto; }
.pb-sizebox {
  position: absolute; left: 0; bottom: 0; border-radius: 3px; cursor: pointer; display: block;
  transition: border-color .15s, background .15s;
}
.pb-sizebox input { position: absolute; opacity: 0; pointer-events: none; }
.pb-sizebox__tag {
  position: absolute; top: 7px; right: 7px; font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; background: var(--bg-secondary); color: #6B7280;
  white-space: nowrap;
}
.pb-sizebox:hover { border-color: rgba(252,168,10,.65); background: rgba(252,168,10,.05); }
.pb-sizebox:has(input:checked) {
  border-color: var(--cheecle-yellow) !important; border-width: 2.5px !important;
  background: rgba(252,168,10,.10) !important;
}
.pb-sizebox:has(input:checked) .pb-sizebox__tag { background: var(--cheecle-yellow); color: var(--ink-blue); }
.pb-group-name { margin-top: 20px; font-size: 15px; font-weight: 700; color: var(--ink-blue); }
.pb-group-name__n { color: #8C7651; font-weight: 500; font-size: 13px; margin-left: 4px; }
@media (max-width: 860px) { .pb-size-groups { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; } }

.pb-cover-pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.pb-cover-pick {
  display: block; cursor: pointer; background: var(--bg-primary); border: 1.5px solid #E5DDD0;
  border-radius: var(--radius-lg); padding: 28px; box-shadow: 0 2px 12px rgba(26,58,82,0.04);
  transition: border-color .15s, transform .15s;
}
.pb-cover-pick input { position: absolute; opacity: 0; pointer-events: none; }
.pb-cover-pick:hover { border-color: rgba(252,168,10,.5); transform: translateY(-2px); }
.pb-cover-pick:has(input:checked) { border-color: var(--cheecle-yellow); transform: translateY(-3px); }
.pb-cover-pick__visual { aspect-ratio: 4 / 3; border-radius: 8px; margin-bottom: 20px; position: relative; overflow: hidden; background: #f3f3f3; }
.pb-cover-pick__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-cover-pick h4 { font-size: 19px; font-weight: 700; color: var(--ink-blue); margin: 0; }
.pb-cover-pick p { font-size: 14px; color: #5C4720; margin-top: 8px; }
@media (max-width: 640px) { .pb-cover-pick-grid { grid-template-columns: 1fr; } }

/* 03 페이지 수 픽커 */
.pb-pagepick { display: flex; align-items: center; gap: var(--space-5); max-width: 560px; }
.pb-pagepick__btn {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid #E5DDD0; background: var(--bg-primary); color: var(--ink-blue);
  font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, transform .1s;
}
.pb-pagepick__btn:hover { border-color: var(--cheecle-yellow); }
.pb-pagepick__btn:active { transform: scale(.92); }
.pb-pagepick__btn:disabled { opacity: .35; cursor: default; }
.pb-pagepick__mid { flex: 1; min-width: 0; }
.pb-pagepick__value { display: flex; align-items: baseline; gap: 6px; justify-content: center; margin-bottom: 10px; }
.pb-pagepick__value strong { font-size: 30px; font-weight: 800; color: var(--ink-blue); font-variant-numeric: tabular-nums; }
.pb-pagepick__value span { font-size: 14px; color: #8C7651; }
.pb-pagepick__slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px;
  background: linear-gradient(to right, var(--cheecle-yellow) 0%, var(--cheecle-yellow) var(--pb-pct, 15%), #E5DDD0 var(--pb-pct, 15%), #E5DDD0 100%);
  outline: none; cursor: pointer;
}
.pb-pagepick__slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg-primary); border: 3px solid var(--cheecle-yellow); box-shadow: 0 2px 6px rgba(26,58,82,.25);
  cursor: pointer; margin-top: -8px;
}
.pb-pagepick__slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--bg-primary);
  border: 3px solid var(--cheecle-yellow); box-shadow: 0 2px 6px rgba(26,58,82,.25); cursor: pointer;
}
.pb-pagepick__slider::-moz-range-track { height: 6px; border-radius: 999px; background: transparent; }
.pb-pagepick__hint { font-size: 13px; color: #8C7651; margin-top: 14px; }
@media (max-width: 560px) { .pb-pagepick { gap: var(--space-3); } .pb-pagepick__btn { width: 38px; height: 38px; font-size: 19px; } }

/* === 6. AI === */
.pb-ai { background: var(--bg-primary); }
.pb-ai__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 1024px) { .pb-ai__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
.pb-ai__text .pb-h2 { text-align: left; }
.pb-ai__text p { font-size: 16px; color: #4A5568; line-height: 1.7; margin: 0 0 var(--space-4); }
.pb-ai__list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0;
}
.pb-ai__list li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  line-height: 1.6;
}
.pb-ai__list li::before {
  content: '✓';
  position: absolute;
  left: 0; top: 0;
  color: var(--cheecle-yellow, #FCA80A);
  font-weight: 700;
  width: 20px; height: 20px;
  background: #FFF8E7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.pb-ai__image img {
  width: 100%;
  border-radius: var(--radius-lg);
  display: block;
  box-shadow: 0 8px 28px rgba(26,58,82,0.10);
}

/* === 7. 품질 === */
.pb-quality { background: var(--bg-secondary); text-align: center; }
.pb-quality__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-6);
}
@media (min-width: 768px) { .pb-quality__grid { grid-template-columns: repeat(3, 1fr); } }
.pb-quality__highlight { padding: var(--space-4); }
.pb-quality__flag { font-size: 44px; display: block; margin-bottom: var(--space-3); }
.pb-quality__highlight h4 { font-size: 18px; font-weight: 700; color: var(--ink-blue); margin: 0 0 var(--space-2); }
.pb-quality__highlight p { font-size: 14px; color: #6B7280; margin: 0; line-height: 1.6; }

/* === 8. 3단계 === */
.pb-steps {
  background: var(--ink-blue);
  text-align: center;
}
.pb-steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
@media (min-width: 768px) { .pb-steps-grid { grid-template-columns: repeat(3, 1fr); } }
.pb-step-card {
  background: rgba(250,247,242,0.05);
  border: 1px solid rgba(250,247,242,0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  text-align: left;
  transition: background 0.2s, border-color 0.2s;
}
.pb-step-card:hover { background: rgba(252,168,10,0.08); border-color: var(--cheecle-yellow, #FCA80A); }
.pb-step-card__num {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--cheecle-yellow, #FCA80A);
  margin-bottom: var(--space-3);
  letter-spacing: 0.06em;
}
.pb-step-card h4 { font-size: 18px; font-weight: 700; color: var(--text-inverse); margin: 0 0 var(--space-3); }
.pb-step-card p { font-size: 14px; color: rgba(250,247,242,0.75); margin: 0; line-height: 1.65; }

/* === 9. FAQ === */
.pb-faq { background: var(--bg-primary); }
.pb-faq__list {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: var(--space-3);
}
.pb-faq__item {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.pb-faq__item[open] { box-shadow: 0 4px 16px rgba(26,58,82,0.06); }
.pb-faq__item summary {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-blue);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 48px;
  line-height: 1.4;
}
.pb-faq__item summary::-webkit-details-marker { display: none; }
.pb-faq__item summary::after {
  content: '+';
  position: absolute;
  right: var(--space-5);
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: var(--cheecle-yellow, #FCA80A);
  font-weight: 700;
  transition: transform 0.2s;
}
.pb-faq__item[open] summary::after { content: '−'; }
.pb-faq__answer {
  padding: 0 var(--space-5) var(--space-5);
  font-size: 16px;
  color: #4A5568;
  line-height: 1.7;
}

/* === 사진인화 페이지 전용 추가 === */

/* 2열 cover grid (Matte / Glossy 비교) */
.pb-covers-grid--2 {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .pb-covers-grid--2 { grid-template-columns: 1fr 1fr; } }

/* 세로형 이미지 (Why print 섹션) */
.pb-ai__image--vertical img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* 리뷰 카드 그리드 */
.pb-reviews { background: var(--bg-secondary); }
.pb-reviews__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
@media (min-width: 768px) { .pb-reviews__grid { grid-template-columns: repeat(3, 1fr); } }
.pb-review-card {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: 0 2px 12px rgba(26,58,82,0.04);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.pb-review-card__stars { font-size: 18px; letter-spacing: 1px; }
.pb-review-card__text {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.65;
  margin: 0;
  font-style: italic;
  flex: 1;
}
.pb-review-card__author { display: flex; flex-direction: column; gap: 2px; }
.pb-review-card__author strong { font-size: 14px; color: var(--ink-blue); }
.pb-review-card__author span { font-size: 12px; color: #6B7280; }
.pb-reviews__rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid #e5e5e0;
}
.pb-reviews__rating-num { font-size: 22px; font-weight: 800; color: var(--ink-blue); }
.pb-reviews__rating-stars { color: #F59E0B; font-size: 18px; letter-spacing: 1px; }
.pb-reviews__rating-count { font-size: 14px; color: #6B7280; }

/* === 10. 최종 CTA === */
.pb-final-cta {
  background: linear-gradient(135deg, #FFF8E7 0%, #FEF3C7 100%);
}
.pb-final-cta__inner { text-align: center; }
.pb-final-cta h2 { font-size: 28px; }
@media (min-width: 1024px) { .pb-final-cta h2 { font-size: 36px; } }
.pb-final-cta p { font-size: 16px; color: #6B7280; margin: 0 0 var(--space-5); }

/* ===== 포토북 가이드 페이지 (/photobook-guide/) ===== */
.pb-guide {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.pb-guide section { padding: var(--space-8) var(--space-4); }
@media (min-width: 1024px) {
  .pb-guide section { padding: var(--space-9) var(--space-7); }
}

.pb-guide__eyebrow {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--cheecle-yellow, #FCA80A);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.pb-guide__eyebrow--inverse { color: var(--cheecle-yellow, #FCA80A); }

.pb-guide__section-title {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text-primary);
  margin: 0 0 var(--space-4);
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
}
.pb-guide__section-title--inverse { color: var(--text-inverse); }
@media (min-width: 1024px) { .pb-guide__section-title { font-size: 38px; } }

.pb-guide__section-sub {
  font-size: 16px;
  color: #6B7280;
  margin: 0 auto var(--space-6);
  max-width: 720px;
  line-height: 1.6;
}

/* === 1. HERO === */
.pb-guide__hero {
  background: linear-gradient(160deg, var(--ink-blue) 0%, #2A4E68 100%);
  color: var(--text-inverse);
  text-align: center;
  padding: var(--space-9) var(--space-4);
}
.pb-guide__hero .pb-guide__eyebrow { color: var(--cheecle-yellow, #FCA80A); }
.pb-guide__hero-title {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text-inverse);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.01em;
}
.pb-guide__hero-sub {
  font-size: 16px;
  color: rgba(250,247,242,0.85);
  margin: 0;
  line-height: 1.65;
}
@media (min-width: 1024px) {
  .pb-guide__hero { padding: 120px var(--space-7); }
  .pb-guide__hero-title { font-size: 48px; }
  .pb-guide__hero-sub { font-size: 18px; }
}

/* === 공통 섹션 === */
.pb-guide__section { text-align: center; background: var(--bg-secondary); }
.pb-guide__section--ink { background: var(--ink-blue); color: var(--text-inverse); }
.pb-guide__section--soft { background: var(--bg-primary); }

/* === 2. 특장점 4카드 === */
.pb-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: var(--container-max);
  margin: 0 auto;
}
@media (min-width: 640px) { .pb-features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pb-features { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } }

.pb-feature {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  text-align: left;
  box-shadow: 0 2px 12px rgba(26,58,82,0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pb-feature:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(26,58,82,0.08); }
.pb-feature__icon {
  width: 48px;
  height: 48px;
  background: #FFF8E7;
  color: var(--cheecle-yellow, #FCA80A);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.pb-feature__icon svg { width: 24px; height: 24px; }
.pb-feature__title {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
  line-height: 1.3;
}
.pb-feature__desc {
  font-size: 14px;
  color: #6B7280;
  margin: 0;
  line-height: 1.6;
}

/* === 3. 프로세스 5단계 === */
/* NOTE: 가이드 페이지(.pb-guide__section) 안으로 스코프를 한정한다.
   랜딩 페이지(/photobook/)도 <section class="pb-section pb-steps">로 같은
   .pb-steps 클래스를 쓰기 때문에, 스코프 없이 두면 랜딩의 3단계 섹션이
   이 grid 규칙(2/5열)을 받아 깨진다. (클래스명 충돌 방지) */
.pb-guide__section .pb-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: var(--container-max);
  margin: 0 auto;
  position: relative;
}
@media (min-width: 640px) { .pb-guide__section .pb-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pb-guide__section .pb-steps { grid-template-columns: repeat(5, 1fr); gap: var(--space-3); } }

.pb-step {
  background: rgba(250,247,242,0.06);
  border: 1px solid rgba(250,247,242,0.12);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-4);
  text-align: left;
  transition: background 0.2s, border-color 0.2s;
}
.pb-step:hover {
  background: rgba(252,168,10,0.08);
  border-color: var(--cheecle-yellow, #FCA80A);
}
.pb-step__num {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--cheecle-yellow, #FCA80A);
  margin-bottom: var(--space-3);
  letter-spacing: 0.06em;
}
.pb-step__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-inverse);
  margin: 0 0 var(--space-2);
  line-height: 1.3;
}
.pb-step__desc {
  font-size: 13px;
  color: rgba(250,247,242,0.7);
  margin: 0;
  line-height: 1.6;
}

/* === 4. 통계 === */
.pb-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  max-width: 900px;
  margin: var(--space-7) auto 0;
}
@media (min-width: 768px) { .pb-stats { grid-template-columns: repeat(3, 1fr); } }

.pb-stat {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 12px rgba(26,58,82,0.04);
}
.pb-stat__num {
  display: block;
  font-size: 44px;
  font-weight: 800;
  color: var(--ink-blue);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.pb-stat__plus {
  font-size: 28px;
  color: var(--cheecle-yellow, #FCA80A);
  margin-left: 2px;
}
.pb-stat__label {
  display: block;
  margin-top: var(--space-2);
  font-size: 13px;
  color: #6B7280;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

/* === 5. 동영상 === */
.pb-videos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  max-width: var(--container-max);
  margin: 0 auto;
}
@media (min-width: 900px) { .pb-videos { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }

.pb-video__frame {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;     /* 16:9 */
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(26,58,82,0.10);
}
.pb-video__frame iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}
.pb-video__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: var(--space-4) 0 var(--space-1);
  text-align: left;
}
.pb-video__desc {
  font-size: 14px;
  color: #6B7280;
  margin: 0;
  text-align: left;
}

/* === 6. CTA === */
.pb-guide__cta {
  background: linear-gradient(135deg, #FFF8E7 0%, #FEF3C7 100%);
  text-align: center;
}
.pb-guide__cta-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--ink-blue);
  margin: 0 0 var(--space-3);
}
@media (min-width: 1024px) { .pb-guide__cta-title { font-size: 36px; } }
.pb-guide__cta-sub {
  font-size: 16px;
  color: #6B7280;
  margin: 0 0 var(--space-6);
}
.pb-guide__cta-btn {
  display: inline-block;
  background: var(--cheecle-yellow, #FCA80A);
  color: #fff !important;
  font-size: 16px;
  font-weight: 700;
  padding: 16px 36px;
  border-radius: 99px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(252,168,10,0.3);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.pb-guide__cta-btn:hover {
  background: #E8970A;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(252,168,10,0.4);
  color: #fff !important;
  text-decoration: none;
}


/* ==========================================================================
   타이포 가독성 재정비 v3.6 (2026-06-12)
   - Kadence 전역 인라인(body 15px)이 디자인 토큰(본문)을 덮는 문제 해결
   - 카드/설명 텍스트 크기·굵기·대비 상향 (daum 수준 가독성 확보)
   원복: 이 블록 삭제 + assets/css/tokens.css --fs-body 17px→18px
   ========================================================================== */

/* 1) 본문 = 디자인 토큰(17px) 단일 소스. html 접두(0,0,2)로 Kadence body 인라인(0,0,1) 무력화 */
html body {
  font-size: var(--fs-body) !important;   /* 17px */
  line-height: var(--lh-relaxed);
  color: var(--text-primary);
}

/* 2) 히어로 카드 — 가장 작게 보이던 부제/라벨 크기·굵기 상향 */
.hero-card__label { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; }
.hero-card__title { font-size: 20px; font-weight: 700; }
.hero-card__sub   { font-size: 17px; font-weight: 500; line-height: 1.55; }
@media (min-width: 1024px) {
  .hero-card__title { font-size: 26px; }
  .hero-card__sub   { font-size: 18px; }
}

/* 3) 설명/캡션 텍스트 — 회색 저대비 13~14px → 15px, 색 진하게 */
.pb-tf p,
.pb-type-card p,
.pb-cover-card p,
.pb-quality__highlight p,
.pb-step-card p { font-size: 15px; line-height: 1.65; }
.pb-tf p,
.pb-type-card p,
.pb-cover-card p,
.pb-quality__highlight p { color: #4A5568; }

/* 4) 리뷰/메타 — 12px 가독 하한 보정 */
.pb-review-card__author strong { font-size: 15px; }
.pb-review-card__author span,
.pb-reviews__rating-count,
.pb-pricing-card__note { font-size: 13px; }

/* 5) 가격 뱃지 — 약 2배 확대 (텍스트 'N원 부터'는 본문 post-2063에서 수정) */
.hero-card__price { font-size: 16px; font-weight: 700; padding: 6px 14px; letter-spacing: 0; }
@media (min-width: 1024px) { .hero-card__price { font-size: 18px; } }

/* ==========================================================================
   마이페이지(my-account) — WooCommerce '고객 계정' 블록 아이콘 크기 보정
   본문에 삽입된 customer-account 블록의 SVG 아이콘이 컨테이너 폭(816px)까지
   늘어나 거대한 사람 아이콘으로 표시되던 문제. 64px 아바타로 고정 + 중앙 정렬.
   ========================================================================== */
.woocommerce-account .wp-block-woocommerce-customer-account {
  display: flex;
  justify-content: center;
  margin: 0 0 1.5rem;
}
.woocommerce-account .wp-block-woocommerce-customer-account .wc-block-customer-account__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  font-weight: 600;
}
.woocommerce-account .wp-block-woocommerce-customer-account .wc-block-customer-account__link .icon {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
}

/* ==========================================================================
   마이페이지(my-account) 대시보드 — 우측 네비 위젯 제거 후 레이아웃 + 빠른 링크 카드
   네비 제거: functions.php / 콘텐츠 템플릿: woocommerce/myaccount/dashboard.php
   ========================================================================== */

/* 1) 우측 계정 네비 위젯 자리 제거 → 콘텐츠 전체 폭 */
.woocommerce-account .account-navigation-wrap,
.woocommerce-account .woocommerce-MyAccount-navigation {
  display: none !important;
}
.woocommerce-account .woocommerce-MyAccount-content {
  float: none !important;
  width: 100% !important;
  max-width: 720px;
  padding-right: 0 !important;
  margin: 0 auto;
}

/* 2) 인사말 */
.cheecle-account__greet {
  font-size: 17px;
  color: #1A3A52;
  margin: 0 0 1.5rem;
}
.cheecle-account__greet strong {
  color: #FCA80A;
  font-weight: 700;
}

/* 3) 빠른 링크 카드 리스트 */
.cheecle-account__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cheecle-account__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid #ECE4D6;
  border-radius: 14px;
  background: #FFFDF8;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.cheecle-account__link:hover {
  border-color: #FCA80A;
  box-shadow: 0 4px 16px rgba(26, 58, 82, .08);
  transform: translateY(-1px);
}
.cheecle-account__ico {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #FFF3DC;
  color: #FCA80A;
}
.cheecle-account__ico svg {
  width: 22px;
  height: 22px;
}
.cheecle-account__txt {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
.cheecle-account__title {
  font-weight: 700;
  font-size: 16px;
  color: #1A3A52;
  line-height: 1.3;
}
.cheecle-account__desc {
  font-size: 13px;
  color: #7A6A52;
  margin-top: 3px;
  line-height: 1.4;
}
.cheecle-account__arrow {
  flex: 0 0 auto;
  color: #C9BCA6;
  display: grid;
  place-items: center;
  transition: color .15s ease, transform .15s ease;
}
.cheecle-account__arrow svg {
  width: 18px;
  height: 18px;
}
.cheecle-account__link:hover .cheecle-account__arrow {
  color: #FCA80A;
  transform: translateX(2px);
}

/* 4) 로그아웃 */
.cheecle-account__logout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 11px 20px;
  border: 1px solid #E5DDD0;
  border-radius: 10px;
  background: transparent;
  color: #1A3A52;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cheecle-account__logout svg {
  width: 18px;
  height: 18px;
}
.cheecle-account__logout:hover {
  background: #1A3A52;
  color: #FFFDF8;
  border-color: #1A3A52;
}

/* 마이페이지 — 로그아웃 버튼과 푸터 사이 간격 확보 */
.woocommerce-account .woocommerce-MyAccount-content {
  padding-bottom: 3.5rem;
}

/* 마이페이지 — customer-account 블록(사람아이콘+라벨) 숨김 / 주소폼 중복 h2 제거 */
.woocommerce-account .wp-block-woocommerce-customer-account { display: none !important; }
.woocommerce-account .woocommerce-MyAccount-content form > h2:empty { display: none !important; }

/* ==========================================================================
   마이페이지 > 주문 목록(orders) — 넓은 폭 + 카드형 테이블 + 상태 뱃지 + 버튼 정리
   body.cheecle-ep-orders (functions.php body_class 로 부여)
   ========================================================================== */
.cheecle-ep-orders .content-container.site-container { max-width: 1100px; }
.cheecle-ep-orders .woocommerce-MyAccount-content { max-width: 100%; }

.woocommerce-account .woocommerce-orders-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  background: #FFFDF8;
  border: 1px solid #ECE4D6;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(26, 58, 82, .05);
}
.woocommerce-account .woocommerce-orders-table thead th {
  background: #F4EDE1;
  color: #1A3A52;
  font-weight: 700;
  font-size: 14px;
  text-align: left;
  padding: 15px 18px;
  border: 0;
  white-space: nowrap;
}
.woocommerce-account .woocommerce-orders-table tbody td,
.woocommerce-account .woocommerce-orders-table tbody th {
  padding: 16px 18px;
  border: 0;
  border-top: 1px solid #F0E8DA;
  font-size: 15px;
  color: #2C4A5C;
  vertical-align: middle;
  background: transparent;
}
.woocommerce-account .woocommerce-orders-table tbody tr:hover td,
.woocommerce-account .woocommerce-orders-table tbody tr:hover th {
  background: #FBF6EC;
}
.woocommerce-orders-table__cell-order-number a {
  color: #1A3A52;
  font-weight: 700;
  text-decoration: none;
}
.woocommerce-orders-table__cell-order-number a:hover { color: #FCA80A; }
.woocommerce-orders-table__cell-order-date { color: #6B5C45; white-space: nowrap; }
.woocommerce-orders-table__cell-order-total { font-weight: 700; color: #1A3A52; white-space: nowrap; }
.woocommerce-orders-table__cell-order-total .woocommerce-Price-amount { font-weight: 700; }
.cheecle-ostatus {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.cheecle-ostatus--completed  { background: #E3F3E8; color: #1E7A45; }
.cheecle-ostatus--processing { background: #FFF1D6; color: #A66A00; }
.cheecle-ostatus--on-hold    { background: #FCEBCE; color: #8A6212; }
.cheecle-ostatus--pending    { background: #ECE5D8; color: #5C4720; }
.cheecle-ostatus--cancelled,
.cheecle-ostatus--failed     { background: #F6E1DE; color: #9B2C2C; }
.cheecle-ostatus--refunded   { background: #E8E3DB; color: #5A5246; }
.woocommerce-orders-table__cell-order-actions { white-space: nowrap; }
.woocommerce-orders-table__cell-order-actions .woocommerce-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  padding: 8px 16px;
  margin: 3px 8px 3px 0;
  border-radius: 9px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.woocommerce-orders-table__cell-order-actions .woocommerce-button.view {
  background: #FCA80A; color: #1A3A52; border-color: #FCA80A;
}
.woocommerce-orders-table__cell-order-actions .woocommerce-button.view:hover {
  background: #E8970A; border-color: #E8970A;
}
.woocommerce-orders-table__cell-order-actions .woocommerce-button.pay {
  background: #1A3A52; color: #FFFDF8; border-color: #1A3A52;
}
.woocommerce-orders-table__cell-order-actions .woocommerce-button.pay:hover { background: #0F2436; }
.woocommerce-orders-table__cell-order-actions .woocommerce-button.cancel {
  background: transparent; color: #8A5A2B; border-color: #E0D5C2;
}
.woocommerce-orders-table__cell-order-actions .woocommerce-button.cancel:hover {
  background: #F6EEE0; border-color: #D8C9B0;
}
.cheecle-ep-orders .woocommerce-pagination .button { border-radius: 9px; }

@media (max-width: 768px) {
  .woocommerce-account .woocommerce-orders-table {
    border: 0; background: transparent; box-shadow: none; border-radius: 0;
  }
  .woocommerce-account .woocommerce-orders-table thead { display: none; }
  .woocommerce-account .woocommerce-orders-table tbody tr {
    display: block;
    background: #FFFDF8;
    border: 1px solid #ECE4D6;
    border-radius: 14px;
    margin-bottom: 14px;
    box-shadow: 0 2px 10px rgba(26, 58, 82, .05);
    overflow: hidden;
  }
  .woocommerce-account .woocommerce-orders-table tbody td,
  .woocommerce-account .woocommerce-orders-table tbody th {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border: 0;
    border-top: 1px solid #F4EEE2;
    padding: 12px 16px;
    text-align: right;
  }
  .woocommerce-account .woocommerce-orders-table tbody tr td:first-child,
  .woocommerce-account .woocommerce-orders-table tbody tr th:first-child { border-top: 0; }
  .woocommerce-account .woocommerce-orders-table tbody td::before,
  .woocommerce-account .woocommerce-orders-table tbody th::before {
    content: attr(data-title);
    font-weight: 700;
    color: #6B5C45;
    font-size: 13px;
    text-align: left;
  }
  .woocommerce-orders-table__cell-order-actions .woocommerce-button { margin: 3px 0 3px 8px; }
}

/* 주문 금액 — 한국식 "10,000원" + 오른쪽 정렬 */
.woocommerce-account .woocommerce-orders-table thead th.woocommerce-orders-table__header-order-total,
.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-total {
  text-align: right;
}

/* ==========================================================================
   상품 상세 — 타이틀/탭 소제목/관련상품 제목을 상품평 제목 크기(24px)에 맞춤
   (#reviews #comments h2 와 동일 사이즈, 2026-08-23)
   ========================================================================== */
.single-product .product_title.entry-title,
.woocommerce-Tabs-panel > h2,
.related.products > h2 {
  font-size: 24px !important;
  line-height: 1.5 !important;
}

/* ==========================================================================
   모바일 — 카카오톡 상담/채널추가 플로팅 버튼을 우측 구석으로 밀착 (2026-08-23)
   ========================================================================== */
@media (max-width: 768px) {
  .parent .child {
    right: 12px !important;
  }
}

/* ==========================================================================
   모바일 — 장바구니 아이콘을 고정 햄버거(≡) 바로 아래에 (2026-09-06)
   햄버거는 위에서 position:fixed(top 8px / 44x40)로 띄워놨는데, 헤더 안에 있는
   장바구니 아이콘은 스크롤하면 같이 올라가 사라진다. 같은 규격·스타일로 그 아래에 고정.
   ========================================================================== */
@media (max-width: 1024px) {
  #mobile-header .header-mobile-cart-wrap,
  .site-mobile-header-wrap .header-mobile-cart-wrap {
    position: fixed !important;
    top: 56px !important;      /* 햄버거 top 8px + 높이 40px + 여백 8px */
    right: 12px !important;
    z-index: 9999 !important;  /* 햄버거(10000)보다 한 단계 아래 */
  }
  #mobile-header .header-mobile-cart-wrap .header-cart-button,
  .site-mobile-header-wrap .header-mobile-cart-wrap .header-cart-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 40px !important;
    padding: 0 !important;
    background: #FFFDF8 !important;
    border: 1px solid #E5DDD0 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(26,58,82,.10) !important;
  }
  #mobile-header .header-mobile-cart-wrap .header-cart-button svg,
  #mobile-header .header-mobile-cart-wrap .header-cart-button svg path {
    fill: #1A3A52 !important;
    color: #1A3A52 !important;
  }
  #mobile-header .header-mobile-cart-wrap .header-cart-button:hover {
    background: #FCA80A !important;
    border-color: #FCA80A !important;
  }
  /* 드로어(메뉴)가 열려 있을 땐 숨김 — 메뉴 위에 떠 있으면 거슬린다 */
  body[class*="showing-popup-drawer"] .header-mobile-cart-wrap {
    display: none !important;
  }
}

/* ── 사진인화 드롭다운: 규격 구분 (2026-09-16) ──────────────────────
   .pp-size    미니·일반·중형·대형   = 일반 사이즈 라인 (노란 배경 그대로)
   .pp-special 증명·정사각형·파노라마 = 특수 규격 (크림색 배경으로 묶어 구분)
   클래스는 [외모 > 메뉴] 각 항목의 "CSS 클래스" 칸에 들어 있다
   (칸이 안 보이면 화면 오른쪽 위 "화면 옵션"에서 체크).
   글자색만 바꾸는 방식은 버렸다 — 드롭다운 배경이 노랑이라 남색/갈색/초록이 전부
   "흐린 남색"으로 보여 구분이 안 된다(2026-09-16 세 가지 실제로 비교함).
   호버(남색 배경 + 노란 글씨)는 a 에 걸려 있어 그대로 살아 있다. */
.sub-menu li.pp-special {
  background: #FEF8E0 !important; /* cheecle-cream */
}
.sub-menu li.pp-size > a:not(:hover):not(:focus),
.sub-menu li.pp-special > a:not(:hover):not(:focus) {
  color: #1A3A52 !important; /* ink-blue */
}