* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: 'Pretendard', system-ui, -apple-system, Segoe UI, Roboto, Noto Sans KR, sans-serif; color:#111; background:#fff; line-height:1.6; }

/* Layout helpers */
.wrap { width: 92%; max-width: 1100px; margin: 0 auto; }
.section { padding: 72px 0; }
.h2 { font-size: 28px; font-weight: 800; margin-bottom: 20px; }
.h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.h4 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.muted { color:#555; }
.note { margin-top: 14px; padding: 14px 16px; background:#fafafa; border:1px solid #eee; border-radius:12px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background:#fff; border-bottom:1px solid #eee; }
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; padding: 12px 0; }
.logo { font-weight:900; letter-spacing:-0.02em; }
.nav a { margin-left: 14px; text-decoration:none; color:#333; font-weight:600; }
.nav a:hover { text-decoration: underline; }
.nav .nav-cta { background:#F4C400; padding:8px 12px; border-radius:10px; color:#111; }

/* Hero */
.hero {
  position: relative;
  padding: 140px 0 120px;
  text-align: center;
  color: #fff;
  background: url("../img/hero-main.png") center/cover no-repeat;
}

/* 배경 이미지 톤다운 + 흐림 */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45); /* 어둡게 정도 조절 */
  backdrop-filter: blur(1.5px);
}

/* 텍스트를 어둡기 오버레이 위로 띄우기 */
.hero .wrap {
  position: relative;
  z-index: 2;
}

/* 텍스트 스타일 */
.title {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
}

.lead {
  margin: 12px 0;
  font-size: 18px;
  color: #f2f2f2;
}

.brand {
  font-size: 50px;
  font-weight: 900;
  color: #F4C400; /* 옐로우 포인트 유지 */
  margin-top: 16px;
}

/* CTA 버튼 */
.btn {
  display: inline-block;
  text-decoration: none;
  border-radius: 14px;
  font-weight: 900;
}

.btn-primary {
  background: #F4C400;
  color: #111;
  padding: 16px 28px;
  font-size: 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  transition: 0.25s;
}

.btn-primary:hover {
  background: #ffda32;
  transform: translateY(-2px);
}

/* 모바일 반응형 보정 */
@media (max-width: 480px) {
  .hero {
    padding: 100px 0 90px;
  }
  .title { font-size: 32px; }
  .brand { font-size: 38px; }
  .btn-primary { padding: 14px 22px; font-size: 16px; }
}

/* Grid helpers */
.grid { display:grid; gap:14px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-md-4 { }
.grid-lg-3 { }
.grid-lg-4 { }

/* Cards & pills */
.card { border:1px solid #eee; border-radius:14px; padding:16px; background:#fff; }
.badges { margin-top:16px; display:flex; flex-wrap:wrap; gap:8px; }
.badge { background:#111; color:#fff; border-radius:999px; padding:6px 10px; font-size:12px; }

.pill { border:1px solid #eee; padding:10px 12px; border-radius:999px; text-align:center; background:#fff; }

.channels { align-items: start; }

/* Flow list */
.flow { counter-reset: step; list-style:none; padding-left: 0; }
.flow li { position: relative; padding-left: 40px; margin: 10px 0; }
.flow li::before {
  counter-increment: step;
  content: counter(step);
  position:absolute; left:0; top:0;
  width:28px; height:28px; border-radius:999px;
  display:grid; place-items:center;
  background:#111; color:#fff; font-weight:800;
}

/* CTA section */
.cta-section { padding: 80px 0; text-align:center; background:#fff; border-top:1px solid #eee; border-bottom:1px solid #eee; }

/* Footer */
.site-footer { padding: 36px 0 60px; background:#fff; }
.site-footer .brandline { font-weight:800; margin-bottom:8px; }
.site-footer address { color:#555; font-style: normal; }
.copy { color:#777; margin-top: 12px; font-size: 14px; }

/* Responsive */
@media (min-width: 640px) {
  .h2 { font-size: 32px; }
  .title { font-size: 44px; }
  .brand { font-size: 48px; }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-md-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 960px) {
  .wrap { width: 90%; }
  .grid-lg-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-lg-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-lg-6 { grid-template-columns: repeat(6, 1fr); }
}

/* === 강점/신뢰 근거 섹션 배경 적용 === */
#strength {
  position: relative;
  padding: 100px 0;
  background: url("../img/strength-bg.png") center/cover no-repeat;
  color: #fff; /* 텍스트 색상 흰색 */
}

#strength::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35); /* 이미지 위에 어둡게 오버레이 (조절 가능) */
  backdrop-filter: blur(1px);
}

#strength .wrap {
  position: relative;
  z-index: 2; /* 오버레이 위로 내용 띄우기 */
}

/* 카드 스타일 대비 강화 */
#strength .card {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(6px);
  color: #fff;
}

/* 뱃지 */
#strength .badge {
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
}

/* === 강점 섹션 카드 스타일 흰색 박스 버전 === */
#strength .card {
  background: #ffffff !important;      /* 완전 흰색 카드 */
  border: 1px solid #e5e5e5 !important;
  border-radius: 14px;
  padding: 20px 22px;
  color: #111 !important;              /* 텍스트 검정 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* 카드 내부 텍스트 조정 */
#strength .card .h3 {
  color: #111 !important;
  font-weight: 800;
  margin-bottom: 8px;
}

#strength .card p {
  color: #444 !important;
  line-height: 1.55;
}

/* 뱃지는 그대로 강조 */
#strength .badge {
  background: #F4C400;
  color: #111;
  border: none;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
}
/* === 강점 Key 메시지 강조 섹션 === */
.strength-highlights {
  margin-top: 48px;
  display: grid;
  gap: 14px;
  text-align: center;
}

.strength-highlights .highlight-item {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #111; /* 검정 텍스트 명확하게 */
}

/* PC 기준 정렬 */
@media (min-width: 900px) {
  .strength-highlights {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 60px;
  }
  .strength-highlights .highlight-item {
    font-size: 30px;
  }
}
/* === 상품 카테고리 / 신뢰 근거 배경 적용 === */
#categories {
  position: relative;
  padding: 100px 0;
  background: url("../img/categories-bg.png") center/cover no-repeat;
  color: #111; /* 텍스트는 검정으로 유지 */
}

/* 배경 패턴을 너무 세지 않게 은은한 필터 */
#categories::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.5); /* 밝기 조절 (선명: 0.2 / 부드럽게: 0.6) */
  backdrop-filter: blur(1px);
}

#categories .wrap {
  position: relative;
  z-index: 2;
}
/* 히어로 타이틀 줄간격 압축 */
.hero .title {
  line-height: 1.12 !important; /* 기본 약 1.3~1.4 → 1.12로 줄여서 이미지처럼 타이트하게 */
}
/* 히어로 서브 문구 폰트 크게 */
.hero .lead {
  font-size: 22px !important;   /* 기존 16~18px → 22px */
  line-height: 1.55 !important; /* 줄 간격도 맞춰서 자연스럽게 */
  color: #f5f5f5 !important;    /* 대비 조금 더 깨끗하게 */
}
/* Hero 하단 서브 카피 줄바꿈 + 크기 키움 */
.hero .sub {
  font-size: 22px !important;   /* 기존 16~18px → 22px */
  line-height: 1.6 !important;
  color: #f5f5f5 !important;    /* 너무 회색이면 밝게 조정 */
  margin-top: 14px;
  text-align: left;             /* 만약 중앙 정렬 원하면 center */
}
/* Hero 하단 서브 카피: 중앙 정렬 + 크기 키움 */
.hero .sub {
  font-size: 22px !important;      /* 2포인트 크게 */
  line-height: 1.6 !important;     
  color: #f5f5f5 !important;       
  text-align: center !important;   /* ✅ 가운데 정렬 */
  margin-top: 18px;
}
/* 강점 섹션 제목 가운데 정렬 */
#strength .h2 {
  text-align: center !important;
}

/* 강점 섹션 전체 레이아웃 가운데 정렬 */
#strength .wrap {
  text-align: center;
}

/* 카드 내용은 다시 왼쪽 정렬 유지 */
#strength .card {
  text-align: left;
}
/* 강점 질문형 라벨 */
.strength-label {
  display: inline-block;
  background: #2b1b12;
  color: #fff;
  font-size: 19px; /* ⬆ 기존 17px → 19px (2포인트 증가) */
  font-weight: 700;
  padding: 10px 22px; /* 균형 맞게 약간만 키움 */
  border-radius: 24px;
  margin-bottom: 2px; /* ⬇ 기존 12px → 두 섹션 간격 1/2로 줄임 */
}

.strength-label span {
  color: #F4C400;
}

/* 강점 큰 제목 */
#strength .h2 {
  text-align: center;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.25; /* ⬆ 자간 단단하게 묶기 효과 */
  margin-bottom: 40px; /* 조금 더 가까워 보이도록 */
  color: #fff;
}

#strength .h2 span {
  color: #F4C400;
}


.strength-label span {
  color: #F4C400; /* 옐로우 웨일 포인트 색 */
}

/* 강점 큰 제목 강조 */
#strength .h2 {
  text-align: center;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.3;
  margin-bottom: 48px;
  color: #fff;
}

#strength .h2 span {
  color: #F4C400;
}
.strength-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.strength-icon {
  width: 120px;
  height: auto;
}

.strength-text {
  text-align: left;
}

.strength-label {
  display: inline-block;
  background: #2b1b12;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 24px;
  margin-bottom: 6px;
}

.strength-label span {
  color: #F4C400;
}

#strength .h2 {
  font-size: 32px;
  font-weight: 900;
  line-height: 1.25;
  color: #fff;
  margin: 0;
}

#strength .h2 span {
  color: #F4C400;
}
/* 제목 전체 박스 (기준점 역할) */
.strength-title-box {
  position: relative;
  text-align: center;
  margin-bottom: 48px;
}

/* 제목 왼쪽에 이미지를 독립 배치 */
.strength-icon-left {
  position: absolute;
  width: 120px; /* 크기 조정 가능 */
  left: 50%;
  transform: translateX(-260px); /* ← 이 숫자만 조절하면 위치 완벽해짐 */
  top: -10px;
  pointer-events: none;
  z-index: 1;
}

/* 라벨 */
.strength-label {
  display: inline-block;
  background: #2b1b12;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 24px;
  margin-bottom: 6px;
}

.strength-label span {
  color: #F4C400;
}

/* 제목 */
.title-strength {
  font-size: 32px;
  font-weight: 900;
  line-height: 1.25;
  color: #fff;
}
.title-strength span {
  color: #F4C400;
}
/* 제목 박스는 앞으로 */
.strength-title-box {
  position: relative;
  text-align: center;
  margin-bottom: 48px;
  z-index: 2; /* ✅ 글씨가 위에 오도록 */
}

/* 화살표 이미지는 뒤로 */
.strength-icon-left {
  position: absolute;
  width: 120px;
  left: 40%;
  transform: translateX(-260px);
  top: -10px;
  z-index: 1; /* ✅ 글씨 뒤로 */
  opacity: 0.9; /* 필요하면 1.0 로 변경 가능 */
  pointer-events: none;
}
/* 강점 섹션 하단 메시지 */
.strength-message {
  text-align: center;
  margin-top: 1px;
  line-height: 1.6;
}

.strength-message p {
  font-size: 22px; /* Hero .sub 와 동일 */
  font-weight: 700;
  color: #fff; /* ✅ 기본은 흰색 */
  margin: 1px 0;
}
/* 강점 타이틀 아래 여백 줄이기 */
.title-strength {
  margin-bottom: 14px !important;   /* 기존 28px ~ 48px → 14px 정도가 딱 자연스러움 */
  line-height: 1.15 !important;     /* (이미 적용한 줄간격은 유지) */
}
/* 강점 카드 레이아웃 */
#strength .grid.grid-2 {
  gap: 24px;
}

/* 카드 스타일 개선 + 왼쪽 강조 바 */
#strength .card {
  background: #fff;
  border-radius: 18px;
  padding: 28px 32px;
  position: relative;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* ✅ 강조 컬러 바 */
#strength .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;          /* 강조 바 두께 */
  height: 100%;
  border-radius: 18px 0 0 18px;
  background: #F4C400; /* 옐로우 웨일 포인트 컬러 */
  opacity: 1;
}

/* Hover 시 카드 살짝 떠오르게 */
#strength .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
}

/* 카드 제목 */
#strength .card h3.h3 {
  font-size: 20px;
  font-weight: 800;
  color: #2A1B12;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}

/* 카드 본문 */
#strength .card p {
  font-size: 15px;
  line-height: 1.65;
  color: #4A3A2F;
}
/* 유통/판매 채널 상단 스타일 */
.channels-header {
  text-align: center;
  margin-bottom: 60px;
}

.channels-header .label {
  display: inline-block;
  background: #000;
  color: #fff;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 20px;
  margin-bottom: 14px;
}

.channels-header .title-strong {
  font-size: 36px;
  font-weight: 900;
  color: #111; /* ← 기존 #fff 에서 #111 (블랙톤) 로 수정 */
  line-height: 1.28;
  margin-bottom: 16px;
}

.channels-header .desc {
  color: #fff;
  font-size: 17px;
  line-height: 1.6;
  opacity: .95;
}

.channels-header strong {
  color: #F4C400; /* 옐로우 웨일 시그니처 컬러 */
}
.channels-desc {
  color: #111; /* 전체 문장 블랙 */
  font-size: 16px;
  line-height: 1.6;
  margin-top: 6px;
  text-align: center; 
}

.channels-desc .highlight {
  color: #F4C400; /* 노란색 키워드 강조 */
  font-weight: 700;
}
/* 유통/판매 채널 섹션 배경에 그리드 패턴 적용 */
#channels {
  position: relative;
  background: #f9f7f2; /* PDF 느낌의 따뜻한 아이보리 톤 */
  padding: 100px 0;
}

/* 격자 패턴 레이어 */
#channels::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 28px 28px; /* 격자 크기 (PDF 느낌과 거의 동일) */
  pointer-events: none;
  opacity: 0.5; /* 격자 진하기 (0.3~0.6 조절 가능) */
  z-index: 0;
}

/* 기존 콘텐츠가 격자 위로 오도록 */
#channels > .wrap,
.channels-header,
.channels {
  position: relative;
  z-index: 2;
}
#channels {
  padding: 50px 0;
}
/* 유통/판매 채널 설명 크기 상향 */
.channels-desc {
  font-size: 22px !important; /* ✅ 강점 하단 문구와 동일 크기 */
  line-height: 1.6;
  color: #111; /* 기존 블랙 유지 */
  text-align: center;
  margin-top: 8px;
}

/* 강조 단어 유지 */
.channels-desc .highlight {
  color: #F4C400;
  font-weight: 700;
}
#channels .channels-header {
  margin-bottom: 1px !important;
}

.channels-desc {
  margin-bottom: 1px !important;
}
/* 채널 라벨을 강점 라벨과 동일 스타일로 */
.channels-label {
  display: inline-block;
  background: #2b1b12; /* 동일한 진브라운 배경 */
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 24px;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

/* ✅ "공동구매" 색을 강점 섹션과 동일하게 맞춤 */
.channels-label .yellow {
  color: #F4C400 !important;  /* ← 옐로우 웨일 강조색과 동일 */
}
#channels .muted {
  text-align: center !important;
  font-size: 20px !important;   /* 기존 16px → +2~4pt 정도 상승 */
  font-weight: 700 !important;  /* 진하게 */
  line-height: 1.5;
  margin-top: 6px;              /* 위 문장과 간격 조정 */
  color: #111          /* 흰색 유지 (검정 배경 대비) */
  letter-spacing: -0.01em;      /* 미세 자간 ↓ 더 단단하게 */
}
.channel-groups {
  text-align: center;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.channel-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.group-title {
  font-size: 20px;
  font-weight: 800;
  color: #F4C400; /* ✅ 옐로우 웨일 브랜드 강조색 */
  letter-spacing: -0.02em;
}

.group-items {
  font-size: 18px;
  font-weight: 600;
  color: #111;
  letter-spacing: -0.01em;
  line-height: 1.55;
}
/* 채널 상단 블럭과 아래 컨텐츠 간 간격 강제 축소 */
#channels .channels-header {
  margin-bottom: 3px !important; /* 기존 60~120px → 딱 붙임 */
}

/* wrap 기본 padding 으로 인해 떨어지는 현상 제거 */
#channels .wrap {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
#products {
  background: #f9f7f2; /* 격자 섹션과 어울리는 아이보리 */
  padding: 80px 0;
}

/* 상단 라벨 */
#products .label-box {
  display: inline-block;
  background: #2b1b12;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 24px;
  margin-bottom: 18px;
}

/* 메인 타이틀 */
#products .h2 {
  text-align: center;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

.yellow-strong {
  color: #F4C400;
}

/* 설명문 */
.products-desc {
  text-align: center;
  font-size: 18px;
  color: #333;
  margin-bottom: 18px;
}

.products-desc .highlight {
  color: #F4C400;
  font-weight: 700;
}

/* 포인트 리스트 */
.product-points {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 32px;
  font-size: 16px;
  font-weight: 600;
  color: #111;
}

/* 썸네일 그리드 */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  text-align: center;
}

.product-grid img {
  width: 100%;
  border-radius: 10px;
}
/* 상품구성 라벨 중앙정렬 */
#products .label-box {
  display: inline-block;
  background: #2b1b12; /* 기존 브라운 유지 */
  color: #F4C400 !important; /* ✅ 노란 포인트 색상 적용 */
  font-size: 17px;
  font-weight: 700;
  padding: 9px 22px;
  border-radius: 24px;
  margin: 0 auto 22px; /* ✅ 중앙 + 아래 여백 */
  text-align: center;
  letter-spacing: -0.02em;
}

/* 섹션 내 텍스트 컨테이너 자체를 중앙정렬 */
#products .wrap {
  text-align: center;
}
/* 라벨 박스 유지 */
#products .label-box {
  display: inline-block;
  background: #2b1b12;
  font-size: 17px;
  font-weight: 700;
  padding: 9px 22px;
  border-radius: 24px;
  margin: 0 auto 22px;
  text-align: center;
  letter-spacing: -0.02em;
}

/* ✅ 노란색 강조 단어 */
#products .label-box .strong {
  color: #F4C400; /* 진열이 풍성해집니다 와 동일 색 */
}

/* ✅ 흰색 단어 */
#products .label-box .light {
  color: #FFFFFF;
}
/* ✅ 상품구성(#products) 섹션 배경에 고래 이미지 추가 */
#products {
  position: relative;
  background: #f9f7f2; /* 기존 배경 유지 */
  padding: 80px 0;
  overflow: hidden;
}

#products::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -120px;  /* 좌측 정렬 느낌 */
  transform: translateY(-50%);
  width: 750px;   /* 고래 크기 */
  height: 750px;
  background: url("../img/whale.png") no-repeat left center;
  background-size: contain;
  opacity: 0.15;  /* 은은하게 */
  pointer-events: none;
  z-index: 0;
}

/* ✅ 안에 있는 내용이 배경보다 위로 보이도록 */
#products .wrap {
  position: relative;
  z-index: 2;
}
#categories .products-header {
  text-align: center;       /* ✅ 가운데 정렬 */
  max-width: 800px;         /* ✅ 너무 넓으면 정렬이 퍼지므로 폭 제한 */
  margin: 0 auto 60px;      /* ✅ 중앙 배치 + 아래 여백 */
}

#categories h2 {
  text-align: center;       /* ✅ 제목 센터 */
}

#categories .desc {
  text-align: center;       /* ✅ 서브 문구 센터 */
  margin-top: 8px;
}
#categories .desc {
  text-align: center !important;    /* ✅ 강제 가운데 정렬 */
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#categories .note {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 19px !important;
  font-weight: 700;
  line-height: 1.55;
  color: rgba(0,0,0,0.88);
  margin-top: 32px;
}

/* ✅ 강조 단어 노란 포인트 */
#categories .note .highlight {
  color: #F4C400;    /* 옐로우 웨일 강조색 */
  font-weight: 800;  /* 좀 더 강하게 */
}
#categories .note .highlight {
  color: #111 !important;   /* ✅ 검정으로 변경 */
  font-weight: 800;         /* ✅ 강조는 유지 */
}
#teams .h2 {
  text-align: center !important;
}
/* 협력 과정 섹션 전체 배경 적용 */
section#process {
  background-color: #f9f5ef !important;
  background-image:
    linear-gradient(#d9d9d9 1px, transparent 1px),
    linear-gradient(90deg, #d9d9d9 1px, transparent 1px) !important;
  background-size: 22px 22px;
  position: relative;
  z-index: 1;
}

/* ✅ 내부 컨테이너가 배경을 덮고 있어서 제거 */
section#process .wrap {
  background: none !important;
}
/* 푸터 배경을 강점 섹션과 동일 톤으로 변경 */
.site-footer {
  background-color: #6A3E27 !important;  /* 강점 섹션의 브라운값 그대로 */
  padding: 60px 0;
}

/* 푸터 텍스트를 모두 흰색으로 변경 */
.site-footer,
.site-footer p,
.site-footer address {
  color: #ffffff !important;
}

/* 불필요한 회색상 링크 색도 통일 */
.site-footer a {
  color: #ffffff !important;
}

/* 브랜드 라인과 카피 텍스트 간격 부드럽게 */
.site-footer .brandline {
  margin-bottom: 14px;
  font-weight: 600;
}
/* 히어로 섹션 상/하 여백 줄이기 */
#hero {
  padding-top: 70px !important;
  padding-bottom: 70px !important;
}

/* 내부 wrap 기본 여백도 줄이기 */
#hero .wrap {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* 판매 히트상품 구성 전체 정렬 */
#categories {
  text-align: center;
}

/* 이미지 카드 3개 정렬 */
.product-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 40px;
}

/* 카드 이미지 스타일 */
.product-card img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  transition: transform .3s ease;
}

/* Hover 효과 */
.product-card img:hover {
  transform: translateY(-8px);
}

/* 아래 설명 문구 스타일 */
.categories-note {
  margin-top: 40px;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
}

/* 반응형 처리 */
@media (max-width: 900px) {
  .product-cards {
    grid-template-columns: 1fr;
  }
}
#distribution {
  background: transparent; /* ✅ 격자 배경 그대로 노출 */
}

.distribution-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  align-items: stretch;
}

.dist-item img {
  width: 100%;
  height: auto;
  border-radius: 0; /* 둥근 모서리 유지 원하면 삭제 */
  display: block;
  box-shadow: none; /* ✅ 그림자 제거 */
  background: transparent; /* ✅ 내부 배경 제거 */
  padding: 0;
}

/* 태블릿 */
@media (max-width: 1024px) {
  .distribution-wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 모바일 */
@media (max-width: 600px) {
  .distribution-wrap {
    grid-template-columns: 1fr;
  }
}
/* ✅ 마우스 오버 개별 움직임 */
.dist-item img:hover {
  transform: translateY(-8px); /* 위로 살짝 띄움 */
  box-shadow: 0 12px 24px rgba(0,0,0,0.18); /* 조금 강한 그림자 */
}
/* 카드 컨테이너는 위치만 유지 */
.dist-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ✅ 흰색 라운드 박스만 카드로 지정 */
.dist-card {
  background: #fff;
  border-radius: 20px;
  padding: 0;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* 이미지는 카드 내부에서 100% 채우기 */
.dist-card img {
  display: block;
  width: 100%;
  border-radius: 20px;
}

/* ✅ hover는 오직 흰색 박스(dist-card)만 */
.dist-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.18);
}
.products-grid-full {
  width: 100%;
  max-width: 1400px;
  margin: 40px auto 0;
  text-align: center;
}

.products-grid-full img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.06);
}
/* 본사지원 섹션 기본 정렬 */
#support {
  padding: 100px 0;
  background: #fff; /* ✅ 격자 배경 완전 제거 */
}

/* 4장 카드 정렬 */
.support-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  justify-items: center;
  align-items: center;
}

/* 카드 스타일 */
.support-card {
  width: 100%;
  max-width: 260px;
  transition: transform .35s ease, box-shadow .35s ease;
}

/* 이미지 꽉 차게 */
.support-card img {
  width: 100%;
  display: block;
  border-radius: 20px;
}

/* ✅ 마우스 오버 효과 */
.support-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 18px 35px rgba(0,0,0,0.15);
}

/* ✅ 반응형 */
@media (max-width: 1024px) {
  .support-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}
@media (max-width: 600px) {
  .support-grid {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
   HEADER — 로고 중앙 + 메뉴 중앙 (줄바꿈 방지 완전 해결)
============================================================ */

/* 전체 헤더 영역 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid #eee;
  padding: 12px 0 6px;
}

/* header 내부를 column 형태로 — 로고 위, 메뉴 아래 */
.header-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* -------------------------------------------------------------
   로고 — 이미지 + 텍스트를 한 줄 고정
------------------------------------------------------------- */
.logo-center {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;   /* 줄바꿈 절대 금지 */
}

.logo-center img.logo-icon {
  width: 30px;
  height: auto;
  display: block;
}

.logo-center .logo-text {
  font-size: 20px;
  font-weight: 800;
  white-space: nowrap;
}

/* -------------------------------------------------------------
   NAV — 메뉴 줄바꿈 방지 + 가운데 정렬 + 모바일 스크롤
------------------------------------------------------------- */
.nav-center {
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;       /* 줄바꿈 금지 핵심 */
  white-space: nowrap;     /* 텍스트 줄바꿈 금지 */
  overflow-x: auto;        /* 모바일에서 넘치면 가로 스크롤 */
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.nav-center::-webkit-scrollbar {
  display: none; /* 모바일 스크롤바 숨김 */
}

.nav-center a {
  text-decoration: none;
  color: #333;
  font-weight: 600;
  font-size: 15px;
}

.nav-center a.nav-cta {
  background: #F4C400;
  color: #111;
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 800;
}
.nav-center {
    display: flex;
    flex-wrap: wrap;         /* ← 반드시 필요! */
    justify-content: center; /* 가운데 정렬 */
    gap: 14px;               /* 버튼들 사이 간격 */
    width: 100%;             /* 한 줄이 좁으면 자동 다음줄 */
}
@media (max-width: 580px) {
    .nav-center a {
        font-size: 16px;       /* 글씨 조금 축소 */
        padding: 4px 2px;      /* 간격 조금 줄임 */
    }

    .nav-center {
        gap: 10px;
    }
}
.header-inner {
    display: flex;
    flex-direction: column; /* 로고 위 — 메뉴 아래 */
    align-items: center;
    gap: 12px;
}