/* ===================================================================
   푸터 — 3단 균형 레이아웃
   =================================================================== */
.db-footer { background: #1e293b; color: rgba(255,255,255,.62); font-size: 13px; padding: 48px 0 34px; margin-top: 60px; }
.db-footer-grid { display: grid; grid-template-columns: 1.1fr 1.5fr 0.8fr; gap: 40px; }
.db-foot-h { font-size: 13px; color: rgba(255,255,255,.5); margin-bottom: 10px; letter-spacing: .02em; }
.db-foot-tel { font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -.02em; margin-bottom: 12px; }
.db-foot-brand { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.db-foot-list { list-style: none; margin: 0; padding: 0; line-height: 1.95; }
.db-foot-nav { list-style: none; margin: 0; padding: 0; line-height: 2.1; }
.db-foot-nav a { color: rgba(255,255,255,.62); }
.db-footer a:hover { color: #14b8a6; }
.db-foot-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.4); }
.db-foot-policy a { color: rgba(255,255,255,.55); }
@media (max-width: 900px) { .db-footer-grid { grid-template-columns: 1fr 1fr; } .db-footer-grid .db-foot-col:last-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .db-footer-grid { grid-template-columns: 1fr; } }

/* 서브페이지 브레드크럼 — 본문 폭(base-container)에 정렬 (기존 좌측끝 이탈 수정) */
.bc-breadcrumb { max-width: var(--site-max-width); margin: 0 auto; padding: 18px 1rem 0; font-size: 13px; color: #94a3b8; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
@media (min-width: 640px) { .bc-breadcrumb { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .bc-breadcrumb { padding-left: 2rem; padding-right: 2rem; } }
.bc-breadcrumb .bc-item { color: #94a3b8; }
.bc-breadcrumb a.bc-item:hover { color: #334155; }
.bc-breadcrumb .bc-item--current { color: #334155; font-weight: 500; }
.bc-breadcrumb .bc-separator { color: #cbd5e1; }

/* 약관·개인정보 등 모달을 고정 헤더(z-1000) 위로 */
.au-modal { z-index: 9999 !important; }

/* ===================================================================
   2줄 헤더 (로고줄 + 카테고리줄) — 참고 스킨 스타일. 전 페이지 공통.
   =================================================================== */
.db-header--2row { background: #fff; border-bottom: 1px solid #e5e7eb; }
/* 헤더가 2줄이 되어 높이 증가 → body 상단 여백 재설정(기존 100px 대체) */
body { padding-top: 132px; }

/* 로고 — 기존 대비 약 70% 크기로 축소 */
.db-header--2row .db-header-logo img { height: 24px; }

/* 1줄: 로고 + 상단 유틸 */
.db-hd-top-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.db-hd-top-right { display: flex; align-items: center; gap: 18px; }
.db-hd-promo { display: flex; align-items: center; gap: 16px; }
.db-hd-promo a { font-size: 0.9rem; font-weight: 700; color: #14b8a6; }
.db-hd-promo a:hover { color: #0e9384; }
.db-hd-util { display: flex; align-items: center; gap: 12px; font-size: 0.8rem; }
.db-hd-util a { color: #64748b !important; font-weight: 500; }
.db-hd-util a:hover { color: #2563eb !important; }
.db-hd-search-wrap { display: inline-flex; align-items: center; }

/* 2줄: 카테고리 네비 */
.db-hd-nav { border-top: 1px solid #eef2f6; }
.db-hd-nav-inner { display: flex; align-items: stretch; height: 65px; position: relative; }
/* 전체카테고리 (버튼 + 메가 패널) */
.db-hd-allcate-wrap { display: flex; align-items: stretch; margin-right: 10px; padding-right: 22px; border-right: 1px solid #eef2f6; flex-shrink: 0; }
.db-hd-allcate { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #0f172a; font-size: 1rem; background: none; border: none; padding: 0; cursor: pointer; }
.db-hd-allcate:hover { color: #14b8a6; }
.db-hd-allcate-ico { display: inline-flex; color: #14b8a6; }
.db-allcate-panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 1002; background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 14px 30px rgba(0,0,0,0.12); padding: 28px 34px; display: none; }
.db-allcate-panel.open { display: block; }
.db-allcate-panel .db-aside-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 24px 30px; list-style: none; margin: 0; padding: 0; }
.db-allcate-panel .db-aside-menu > li { border: none; padding: 0; }
.db-allcate-panel .aside-title { margin-bottom: 9px; padding-bottom: 7px; border-bottom: 1px solid #f1f5f9; }
.db-allcate-panel .db-aside-menu > li > .aside-title > a { font-weight: 700 !important; font-size: 0.95rem; color: #14b8a6 !important; }
.db-allcate-panel .db-aside-menu > li > .aside-title > a:hover { color: #14b8a6 !important; }
.db-allcate-panel .db-aside-sub { display: block !important; width: auto; padding: 0; gap: 0; }
.db-allcate-panel .db-aside-sub li { width: 100%; }
.db-allcate-panel .db-aside-sub a { display: block; font-size: 0.85rem !important; color: #64748b !important; font-weight: 400; padding: 3px 0; }
.db-allcate-panel .db-aside-sub a:hover { color: #2563eb !important; }
.db-hd-menu { display: flex; flex: 1; justify-content: center; height: 100%; min-width: 0; }
/* 카테고리 메뉴는 기존 .db-menu / .db-submenu(드롭다운) 재사용 — 간격/폰트만 조정 */
.db-hd-menu .db-menu { gap: 0; }
/* 메뉴 글씨: 두께값 제거(기본) + 크게 + 좌우 여백 넉넉히 */
.db-hd-menu .db-menu > li > a { padding: 0 26px; font-size: 1.08rem; font-weight: 400; }
/* 드롭다운 — 테마의 clip-path 방식 대신 확실한 visibility/opacity hover 노출 + 흰색 배경 */
.db-hd-menu .db-submenu { clip-path: none !important; opacity: 0; visibility: hidden; transition: none !important; background: #fff !important; border: 1px solid #e5e7eb; box-shadow: 0 10px 24px rgba(0,0,0,.1); padding: 8px 0; }
.db-hd-menu .db-submenu a { color: #475569 !important; }
.db-hd-menu .db-submenu a:hover { color: #14b8a6 !important; background: #f8fafc; }
.db-hd-menu .db-menu-has-sub:hover > .db-submenu { opacity: 1 !important; visibility: visible !important; }

/* 모바일: 카테고리 줄은 숨김(전체카테고리 링크로 대체), 로고줄만 고정 */
@media (max-width: 1023px) {
    .db-hd-nav { display: none; }
    body { padding-top: 64px; }
    .db-hd-top-inner { height: 60px; }
    .db-hd-promo { display: none; }
}

/* ===== 메인 페이지 전용 (서브페이지 pf-* 톤 계승, 최소 추가) =====
   상품카드/그리드는 _grid.php(.pf-*) 재사용이라 별도 CSS 불필요.
   여기서는 숏코드 고정출력(배너그룹/후기)과 카테고리 숏컷·섹션 제목만 보강한다. */
/* 세로 여백만 — base-container 의 좌우 패딩(서브페이지와 동일)을 덮지 않도록 shorthand 금지 */
/* 히어로 — 둥근 모서리(4곳 radius 100) + 상단메뉴와의 여백 */
.db-main-hero { margin-top: 26px; }
.db-main-hero .db-slider-wrap { border-radius: 20px; }

.db-main-section { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.db-main-section--tight { padding-top: 0; }
.db-main-title { font-size: 1.5rem; font-weight: 700; color: #0f172a; margin-bottom: 1.25rem; letter-spacing: -0.01em; }
.db-main-title small { display: block; font-size: 0.85rem; font-weight: 400; color: #64748b; margin-top: 0.3rem; }

/* 배너그룹 캡션(라벨) — 기본 숨김. 라벨이 필요한 곳(카테고리)에서만 노출 */
.db-banner-caption { display: none; }

/* 카테고리 숏컷 (배너관리 '메인 카테고리' 그룹 → {{BANNER_GROUP}}, 라벨은 CSS) */
.db-main-cate .db-banner-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem 2rem; }
.db-main-cate .db-banner-item { width: 88px; text-align: center; }
.db-main-cate .db-banner-link { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.db-main-cate .db-banner-item img { width: 72px; height: 72px; object-fit: contain; border-radius: 50%; background: #f1f5f9; padding: 14px; transition: background 0.2s; }
.db-main-cate .db-banner-item:hover img { background: #e2e8f0; }
.db-main-cate .db-banner-caption { display: block; font-size: 0.8rem; color: #334155; font-weight: 500; }

/* 이벤트 배너 그룹 → 2단 */
.db-main-event .db-banner-group { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.db-main-event .db-banner-item img { width: 100%; height: auto; border-radius: 8px; }
.db-main-wide .db-banner-item img { width: 100%; height: auto; border-radius: 8px; }
@media (max-width: 640px) { .db-main-event .db-banner-group { grid-template-columns: 1fr; } }

/* 와이드 배너 위 텍스트 오버레이 (배너 이미지는 배너관리, 문구는 페이지 본문) */
.db-main-wide .db-wide-wrap { position: relative; }
.db-wide-txt { position: absolute; top: 50%; left: clamp(1.5rem, 5%, 4rem); transform: translateY(-50%); pointer-events: none; }
.db-wide-sub { font-size: clamp(0.8rem, 1.4vw, 1rem); color: #6b7280; font-weight: 500; margin-bottom: 0.45rem; }
.db-wide-title { font-size: clamp(1.1rem, 2.6vw, 1.9rem); font-weight: 800; color: #1f2937; letter-spacing: -0.02em; line-height: 1.2; }
@media (max-width: 640px) { .db-wide-sub { font-size: 0.72rem; } .db-wide-title { font-size: 1.05rem; } }

/* 이용후기 카드 */
.db-reviews-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.db-review-card { display: block; border: 1px solid #f1f5f9; border-radius: 8px; overflow: hidden; background: #fff; transition: background 0.2s; }
.db-review-card:hover { background: #f8fafc; }
.db-review-thumb { display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #f1f5f9; }
.db-review-thumb img { width: 100%; height: 100%; object-fit: cover; }
.db-review-body { display: block; padding: 0.85rem; }
.db-review-stars { display: block; color: #f59e0b; font-size: 0.82rem; letter-spacing: 1px; }
.db-review-text { display: block; font-size: 0.8rem; color: #475569; margin-top: 0.35rem; line-height: 1.5; min-height: 2.4em; }
.db-review-product { display: block; font-size: 0.72rem; color: #94a3b8; margin-top: 0.5rem; }
@media (max-width: 1023px) { .db-reviews-grid { grid-template-columns: repeat(2, 1fr); } }