/* ============================================================ 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: #ffffff; /* 페이지 배경 (흰색) */ --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; } /* 카드 이미지 영역은 색을 깔지 않는다 — 상품사진 자체가 흰 배경이라 베이지(#F4EFE8)를 깔면 사진 밖 여백만 누렇게 떠서 사진에 색이 입혀진 것처럼 보였다. (2026-08-31 요청) */ .campaign-image, .campaign-image img, .no-image { background: var(--ma-paper) !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; } /* ══════════════════════════════════════════════════════════════════════════ 상품 카드 (공용) — 2026-08-29 고객검토 1항 "상품노출 목록 통일 및 노출 내용 수정" 예전엔 메인/상품목록/오늘의상품이 각자 카드 CSS 사본을 갖고 있어서 화면마다 열 수(5열 vs auto-fill 280px)와 노출 항목이 달랐다. → 마크업은 good/_card.php, 스타일은 이 블록 하나로 통일한다. 크기: 227 × 379 (5열). 1280 폭 기준 안쪽 1232px = 227×5 + 24×4. 높이를 379 로 고정하는 이유는 "항상 두 행이 온전히 보이게" 하기 위함(고객 의도). 그래서 값이 없는 줄도 자리를 지킨다(_card.php 가 빈 칸으로 렌더). ══════════════════════════════════════════════════════════════════════════ */ .campaign-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; } .campaign-card { border: 1px solid var(--ma-line); border-radius: var(--ma-radius-sm); background: var(--ma-paper); overflow: hidden; transition: transform .2s, box-shadow .2s, border-color .2s; } .campaign-card:hover { transform: translateY(-4px); box-shadow: var(--ma-shadow); border-color: var(--ma-line-2); } .campaign-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; } /* 카드 높이 고정은 5열이 실제로 227px 로 떨어지는 폭에서만. 좁아지면 자동높이로 둔다. */ @media (min-width: 1280px) { .campaign-card { height: 379px; } } /* ── 이미지 (227 × 209) ── */ .campaign-image { position: relative; padding-top: 92%; flex: 0 0 auto; background: var(--ma-paper); } .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: 13px; } .campaign-image .badge { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 800; line-height: 1.3; } .campaign-image .badge.new { background: var(--ma-accent); color: #fff; } /* 브랜드칩 — 사진 위에 **항상** 검정으로 표기 (고객요청) */ .campaign-brand { position: absolute; top: 8px; right: 8px; max-width: calc(100% - 60px); padding: 3px 8px; border-radius: 6px; background: #14110F; color: #fff; font-size: 11px; font-weight: 800; line-height: 1.3; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── 정보 영역 (227 × 170) ── */ .campaign-info { flex: 1 1 auto; min-height: 0; padding: 9px 11px 10px; display: flex; flex-direction: column; } /* 각 줄은 높이가 고정이다(카드 379px 안에서 줄 수가 상품마다 달라지면 안 된다) */ .campaign-info > * { flex: none; } /* 1줄: 보관방법(냉장/냉동) + 재고수량 */ .campaign-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 15px; margin-bottom: 3px; } .campaign-storage { font-size: 11.5px; font-weight: 700; color: var(--ma-ink-2); letter-spacing: -.02em; } .campaign-stock { font-size: 11px; color: var(--ma-muted); font-weight: 600; white-space: nowrap; } /* 2줄: 상품명 (항상 2줄) */ .campaign-title { margin: 0 0 4px; font-size: 12.5px; font-weight: 700; color: var(--ma-ink); line-height: 16.5px; height: 33px; letter-spacing: -.02em; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 3줄: 가격 — 카드 가운데에 오도록 배치 (고객요청) */ .campaign-price { font-size: 18px; font-weight: 800; color: var(--ma-accent); line-height: 22px; letter-spacing: -.03em; margin-bottom: 3px; } .campaign-price small { font-size: 12px; font-weight: 700; margin-left: 1px; } .campaign-price small.is-empty { color: var(--ma-muted); font-size: 13px; margin-left: 0; } /* 4줄: 소비기한 — 예전엔 보관방법 옆이었는데 가격 아래로 내렸다 (고객요청) */ .campaign-expire { font-size: 11px; color: var(--ma-muted); font-weight: 600; line-height: 15px; height: 15px; margin-bottom: 4px; } /* 5줄: 좌 배송유형 배지 / 우 도착예정 (고객요청) */ /* margin-top:auto — 남는 여백은 위쪽이 먹고 배송 2줄은 카드 바닥에 붙는다(=가격이 가운데) */ .campaign-ship { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 18px; margin: auto 0 3px; } .campaign-ship-badge { padding: 2px 7px; border-radius: 3px; font-size: 10.5px; font-weight: 800; line-height: 1.35; color: #fff; white-space: nowrap; } .campaign-ship-badge:empty { display: none; } .campaign-ship-badge.is-fresh { background: #1f9d55; } /* 신선차량 */ .campaign-ship-badge.is-parcel { background: #55606b; } /* 택배발송 */ .campaign-arrive { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--ma-ink-2); letter-spacing: -.02em; white-space: nowrap; } /* 6줄: 결제마감 시간 (고객요청) */ .campaign-deadline { font-size: 11px; font-weight: 600; color: #B0562A; line-height: 15px; height: 15px; letter-spacing: -.02em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } @media (max-width: 1279px) { .campaign-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } } @media (max-width: 1024px) { .campaign-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } } @media (max-width: 640px) { .campaign-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .campaign-title { font-size: 12px; } .campaign-price { font-size: 16px; } } /* ══════════════════════════════════════════════════════════════════════════ 전체카테고리 줄(GNB) 상단 고정 — 2026-08-29 고객검토 2항 "상품 목록을 볼 때 화면 상단으로 움직일 경우 최종 전체카테고리 줄은 고정" .ma-nav 에는 원래도 position:sticky 가 걸려 있었지만 style.css 의 `html, body { height:100% }` 때문에 스티키가 첫 화면 높이 안에 갇혀 스크롤을 내리면 같이 밀려 올라가 버렸다. 높이 제한을 풀어 준다. (height:100% 를 실제로 쓰는 레이아웃은 없다 — #wrap 은 auto 높이다) ══════════════════════════════════════════════════════════════════════════ */ html, body { height: auto; min-height: 100%; } /* ※ .ma-nav 의 position/z-index 는 _header.php 안쪽