/* ============================================================
   meat-asia 프론트 디자인 토큰 / 전역 테마 (2026 개편)
   시안: 크림(#FBF8F4) + 다크(#211C1A) + 블루 포인트(#1565AD)
   - 모든 사이트 하위 페이지에 동일 스타일 적용되도록 공용 토큰/오버라이드
   - style.css 다음에 로드되어 기존 코랄(#ff6b6b)/브라운(#872520) 톤을 덮어씀
   ============================================================ */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

:root {
  --ma-bg:        #FBF8F4;  /* 페이지 배경 (크림) */
  --ma-paper:     #ffffff;  /* 카드/패널 */
  --ma-ink:       #211C1A;  /* 본문 진한 텍스트 */
  --ma-ink-2:     #514941;  /* 보조 텍스트 */
  --ma-muted:     #A89C8E;  /* 흐린 라벨 */
  --ma-line:      #ECE3D9;  /* 경계선 */
  --ma-line-2:    #E4D9CD;  /* 진한 경계선 */
  --ma-accent:    #1565AD;  /* 포인트 (블루) */
  --ma-accent-d:  #103F73;  /* 진한 포인트 */
  --ma-accent-l:  #5BA6E8;  /* 밝은 포인트 */
  --ma-accent-bg: #E9F1FA;  /* 포인트 연한 배경 */
  --ma-radius:    16px;
  --ma-radius-sm: 10px;
  --ma-shadow:    0 10px 30px -16px rgba(33,28,26,0.22);
  --ma-font: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
             "Malgun Gothic", "맑은 고딕", sans-serif;
}

/* ---------- 베이스 ---------- */
html, body { background-color: var(--ma-bg) !important; }
body, h1, h2, h3, h4, h5, input, select, button, textarea, p, span, a, div, li, td, th, label {
  font-family: var(--ma-font);
}
body { color: var(--ma-ink); -webkit-font-smoothing: antialiased; word-break: keep-all; }
#wrap { background-color: var(--ma-bg) !important; }
::selection { background: var(--ma-accent); color: #fff; }
.layout_inner { max-width: 1280px; }

a { transition: color .18s ease; }

/* 공용 컨테이너 (하위 페이지에서 활용 가능) */
.ma-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }

/* ---------- 공용 페이지 타이틀 / 섹션 헤더 ---------- */
.ma-eyebrow {
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--ma-accent);
}
.ma-section-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom: 22px; gap: 16px; }
.ma-section-head h2 {
  margin: 8px 0 0; font-size: 28px; font-weight: 800; letter-spacing: -.03em; color: var(--ma-ink);
}
.ma-more { color: var(--ma-ink-2); text-decoration: none; font-size: 14px; font-weight: 600; }
.ma-more:hover { color: var(--ma-accent); }

/* 하위 페이지 공용 제목 (board page_title 등) */
.page_title, .cusinfor .page_title {
  font-size: 24px !important; font-weight: 800 !important; color: var(--ma-ink) !important;
  letter-spacing: -.02em; padding-bottom: 14px; margin-bottom: 20px;
  border-bottom: 2px solid var(--ma-ink) !important;
}

/* ---------- 버튼 공용 ---------- */
.ma-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px; font-size: 15px; font-weight: 700;
  text-decoration: none; cursor: pointer; border: none; transition: all .18s ease;
}
.ma-btn-primary { background: var(--ma-accent); color: #fff; }
.ma-btn-primary:hover { background: var(--ma-accent-d); }
.ma-btn-dark { background: var(--ma-ink); color: #fff; }
.ma-btn-dark:hover { background: #000; }
.ma-btn-ghost { background: #fff; color: var(--ma-ink); border: 1.5px solid var(--ma-line-2); }
.ma-btn-ghost:hover { border-color: var(--ma-ink); }

/* ============================================================
   하위 페이지 일괄 톤 전환 (기존 코랄/브라운/블루·그린 탭 → 새 팔레트)
   ============================================================ */

/* good/list · index 상품 카드 */
.campaign-card { border: 1px solid var(--ma-line) !important; border-radius: var(--ma-radius) !important; background: var(--ma-paper) !important; }
.campaign-card:hover { border-color: var(--ma-accent) !important; box-shadow: var(--ma-shadow) !important; }
.campaign-image, .campaign-image img, .no-image { background: #F4EFE8 !important; }
.badge.new { background: var(--ma-accent) !important; color:#fff !important; }
.campaign-title { color: var(--ma-ink) !important; }
.meta-item.price, .meta-item.price .value { color: var(--ma-accent) !important; }
.point_color6, .point_color4, .point_color5 { color: var(--ma-accent) !important; }

/* good/list 메인 타이틀 (기존 빨강 그라데이션 → 다크 솔리드) */
.main-title {
  background: none !important; -webkit-text-fill-color: var(--ma-ink) !important;
  color: var(--ma-ink) !important; font-weight: 800 !important; letter-spacing: -.03em !important;
}

/* 정렬/필터 활성 */
.sort-option.active { color: var(--ma-accent) !important; }
.filter-tab.active, .option-btn.active { background: var(--ma-accent) !important; border-color: var(--ma-accent) !important; color:#fff !important; }
.filter-select:focus { border-color: var(--ma-accent) !important; box-shadow: 0 0 0 2px var(--ma-accent-bg) !important; }
.checkbox-item:hover { border-color: var(--ma-accent) !important; }
.checkbox-item:has(input:checked) { background: var(--ma-accent-bg) !important; border-color: var(--ma-accent) !important; color: var(--ma-accent) !important; }
.checkbox-item input:checked + .checkbox-text { color: var(--ma-accent) !important; }

/* 카테고리/품목 탭 (인라인 #2196F3 / #28a745 → 통일) */
.sub-category-tabs .tab-item.active,
.item-tabs .tab-item.active,
.tab-item.active { background: var(--ma-accent) !important; color: #fff !important; }

/* 선택 태그칩 */
.tag-chip { background: var(--ma-accent-bg) !important; color: var(--ma-accent) !important; border-color: #BFD9F2 !important; }
.tag-chip .tag-remove { color: var(--ma-accent) !important; }

/* 페이지네이션 */
.page-link { border-radius: var(--ma-radius-sm) !important; }
.page-link:hover { border-color: var(--ma-accent) !important; color: var(--ma-accent) !important; }
.page-link.active { background: var(--ma-accent) !important; border-color: var(--ma-accent) !important; color:#fff !important; }

/* 카테고리 브레드크럼 */
.category-breadcrumb a:hover { color: var(--ma-accent) !important; }

/* board 좌측메뉴 (고객센터 등) 포인트색 */
.cus_leftmenu li a:hover { color: var(--ma-accent) !important; }
.cus_leftmenu li.on, .cus_leftmenu li.on a, .cus_leftmenu li.on .cus_num,
.cus_leftmenu li a:hover .cus_num { color: var(--ma-accent) !important; }
.cus_leftmenu .main_txt { color: var(--ma-ink); font-weight: 800; }

/* 일반 강조 텍스트가 기존 코랄이던 곳 */
b.point_color6 { color: var(--ma-accent) !important; }

/* 검색창 placeholder/active 등에서 코랄 버튼 → 액센트 */
.ser_btn, button[type="submit"].ser_btn { background: var(--ma-accent) !important; }

/* ---------- 상품 카드 기본 레이아웃 (공용)
   메인/리스트 등 .campaign-card 를 쓰는 모든 곳에서 동일 구조 보장 ---------- */
.campaign-card { overflow: hidden; transition: transform .2s, box-shadow .2s, border-color .2s; }
.campaign-card:hover { transform: translateY(-5px); }
.campaign-link { text-decoration: none; color: inherit; display: block; }
.campaign-image { position: relative; padding-top: 100%; }
.campaign-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }
.no-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #A89C8E; font-size: 14px; }
.campaign-image .badge { position: absolute; top: 10px; left: 12px; padding: 4px 9px; border-radius: 7px; font-size: 11px; font-weight: 800; }
.campaign-info { padding: 15px 15px 17px; }
.campaign-title { font-size: 14.5px; font-weight: 700; margin: 6px 0 8px; line-height: 1.35; letter-spacing: -.01em;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 39px; }
.campaign-meta { margin-bottom: 8px; }
.campaign-meta .meta-item { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 12.5px; }
.campaign-meta .meta-item .label { color: var(--ma-muted); font-weight: 500; }
.campaign-meta .meta-item .value { color: var(--ma-ink-2); font-weight: 600; }
.campaign-meta .meta-item.price .value { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.campaign-status { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--ma-line); font-size: 12px; }
.campaign-status .status-item { display: flex; flex-direction: column; gap: 2px; }
.campaign-status .status-item .label { color: var(--ma-muted); }
.campaign-status .status-item .value { color: var(--ma-ink-2); font-weight: 600; }