@charset "UTF-8";
/* ============================================================
   쇼핑몰 메인 "산지직송" 섹션 (2026-07-12 신설, 2026-07-16 표준 카드 문법 재디자인 v2.0)
   관리자 SM37 산지별 노출토글(USE_YN='Y') 산지를 생산자별 섹션으로 노출(예약 테마/바로가기 하단).
   구성: 섹션 헤더 1회(아이브로+세리프 제목+더보기+rule) → 산지(생산자)별 밴드 라벨 → 표준 A형 컴팩트 카드.
   상품수별 레이아웃(기획전 rail-solo/duo 재사용) : 1개=풀폭 가로카드 · 2개=2열 그리드 · 3개+=가로 스크롤 레일.
   카드 규격·온도 칩은 dure_card.css(.dcz 공용)에 위임 — 이 파일은 카드 골격(imwrap/뱃지/이름/가격/버튼)만.
   딥그린 #3D6041 · 주황 #F8A31E(할인뱃지만). 자립형(.msj-*, PC shop·모바일 rd 공용 — .mrdz 변수 미사용). v2.0

   v3.2 (2026-07-20 후속) 표준 카드 완전체 — metatop(별점, rvAvg/rvCnt 컨트롤러 병합) 신규 추가, 인증칩(gmbreedingNm)은
     매퍼 보강으로 API가 값을 내려주기 시작해 자동 노출(마크업 무변경). 여백만 소폭 보정(버튼 하단 고정은 기존 .body
     flex+.msj-addbtn margin-top:auto 구조로 이미 충족 — 추가 CSS 불필요, metatop 여백만 신규).
   v3.1 (2026-07-20) PC 카드 4열 고정(사전예약과 동일 사진 크기)
   v3.0 (2026-07-20) PC A안 전환(사용자 피드백 "PC에서 너무 큼" — PC>=1025px 한정, 모바일/태블릿 무변경):
     예약테마(rvtm) A안과 동일 형제 문법. 산지(그룹)별로 좌측 안내판(.msj-topline, 320px, rvtm-topline과
     동일 규격 - 크림배경+상단 딥그린 포인트보더 3px)을 노출하고, 기존 통합 헤더(.msj-shead)·그룹 라벨(.msj-band)은
     PC에서 숨김(안내판이 대체). 우측 카드는 기존 레일(scroll/solo/duo)을 PC에서만 auto-fit 그리드로 오버라이드
     (minmax(180px,1fr), 최대 4개만 노출·5번째+는 숨겨 "전체 보기" 유도 — 개수가 적으면 남은 폭을 카드가 나눠가져
     빈칸 없이 자연스럽게 채움). 모바일/태블릿(<=1024)은 무변경(레일/솔로/듀오 원래 규칙 그대로).
   ============================================================ */
.msj-sec { margin: 40px 0; }
.msj-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.msj-group + .msj-group { margin-top: 32px; }

/* 섹션 헤더(main_rd .shead / 두레추천 rvtm-head 문법 통일): 아이브로 + 세리프 제목 + 더 보기(우측) + rule */
.msj-shead { position: relative; margin: 0 0 20px; }
.msj-shl { display: flex; flex-direction: column; gap: 4px; }
.msj-eb { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #3D6041; }
.msj-stt {
  font-size: 24px; font-weight: 600; color: #1F241E; letter-spacing: -.01em; line-height: 1.32;
  padding-right: 64px; word-break: keep-all;
}
.msj-stt em { font-style: normal; color: #3D6041; }
.msj-more { position: absolute; right: 0; top: 3px; font-size: 14px; font-weight: 700; color: #5f6b5a; text-decoration: none; }
.msj-more:hover { color: #3D6041; }
.msj-rule { height: 3px; margin-top: 12px; background: linear-gradient(90deg, #3D6041 0 50px, #EAEAEA 50px); }

/* 산지(생산자) 밴드 라벨 — 그룹당 1줄, 헤더 재반복 없이 이름만 */
.msj-band { display: flex; align-items: center; margin: 0 0 12px; }
.msj-band-txt { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; color: #1F241E; letter-spacing: -.01em; }
.msj-band-txt::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3D6041; flex: 0 0 auto; }

/* PC A안(2026-07-20) 전용 좌측 안내판 — 기본(모바일/태블릿)은 숨김, 1025px+에서만 노출(아래 미디어쿼리) */
.msj-topline { display: none; }

/* 카드 컨테이너 : 기본 = 가로 스크롤 레일(3개+), 수식자로 solo/duo 전환(마크업 공통, 기획전 rail-solo/duo 문법 재사용) */
.msj-rail {
  display: flex; flex-wrap: nowrap; gap: 16px; margin: 0; padding: 2px 0 6px;
  list-style: none; align-items: stretch; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.msj-rail::-webkit-scrollbar { display: none; }
.msj-rail .msj-card { flex: 0 0 210px; }

/* 1개 = 풀폭 가로 카드(이미지 42%+본문) */
.msj-rail.msj-rail-solo { display: block; overflow: visible; }
.msj-rail.msj-rail-solo .msj-card { flex-direction: row; align-items: stretch; width: 100%; }
.msj-rail.msj-rail-solo .imwrap { flex: 0 0 42%; width: 42%; }
.msj-rail.msj-rail-solo .body { flex: 1 1 auto; min-width: 0; justify-content: center; }
.msj-rail.msj-rail-solo .msj-name { font-size: 17px; min-height: 0; }
.msj-rail.msj-rail-solo .msj-now { font-size: 23px; }

/* 2개 = 2열 그리드 */
.msj-rail.msj-rail-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; overflow: visible; }
.msj-rail.msj-rail-duo .msj-card { flex: none; width: 100%; }

/* 카드 골격 */
.msj-card { position: relative; display: flex; flex-direction: column; border: 1px solid #EAEAEA; border-radius: 14px; overflow: hidden; background: #fff; }
.msj-card .ilink, .msj-card .tlink { display: block; color: inherit; text-decoration: none; }

.imwrap { position: relative; width: 100%; aspect-ratio: 1 / 1; background: #f7f7f4; overflow: hidden; }
.imwrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.msj-card:hover .imwrap img { transform: scale(1.05); }

.msj-badge {
  position: absolute; top: 0; left: 0; z-index: 2;
  min-width: 46px; height: 27px; padding: 0 10px; line-height: 27px; text-align: center;
  background: #F8A31E; color: #fff; font-size: 15px; font-weight: 600;
  font-family: 'Roboto', sans-serif; border-radius: 0 0 12px 0;
}
.msj-tag {
  position: absolute; top: 0; right: 0; z-index: 2;
  height: 27px; padding: 0 11px; line-height: 27px;
  background: #3D6041; color: #fff; font-size: 13px; font-weight: 600; border-radius: 0 0 0 12px;
}
.msj-soldout {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45); color: #fff; font-size: 16px; font-weight: 600; text-align: center; padding: 0 10px;
}

.body { padding: 12px 12px 13px; display: flex; flex-direction: column; flex: 1; }
.msj-name {
  margin: 0 0 6px; font-size: 15px; line-height: 1.4; color: #1F241E; font-weight: 600; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 42px; word-break: keep-all;
}
/* specrow(칩)는 dure_card.css .dcz 공용 규칙을 그대로 사용 — 여기선 앞뒤 여백만 보정 */
.msj-card .specrow { margin: 0 0 8px; }
/* v3.2(2026-07-20) metatop(별점) 여백 보정 — 이름 위, rvAvg/rvCnt 없으면 마크업 자체가 미출력(공간 0) */
.msj-card .metatop { margin: 0 0 4px; min-height: 0; }

.msj-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.msj-old { font-size: 13px; color: #a7a7a7; text-decoration: line-through; font-family: 'Roboto', sans-serif; }
.msj-now { font-size: 20px; font-weight: 800; color: #1F241E; font-family: 'Roboto', sans-serif; }
.msj-won { font-size: 14px; font-weight: 600; color: #1F241E; }

/* 담기 버튼(딥그린 풀폭, 일반상품 addBasketV2) — 항상 카드 하단에 정렬 */
.msj-addbtn {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: auto;
  width: 100%; background: #3D6041; color: #fff; border: 1.5px solid #3D6041; border-radius: 12px;
  padding: 12px 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; cursor: pointer;
}
.msj-addbtn em { font-style: normal; font-size: 15px; line-height: 1; }
.msj-addbtn span { pointer-events: none; }
.msj-addbtn:active { background: #2F5233; border-color: #2F5233; }

.msj-card.soldout .imwrap img { opacity: .6; }
.msj-card.soldout .msj-name, .msj-card.soldout .msj-now { color: #9a9a9a; }

@media (min-width: 1025px) {
  .msj-rail .msj-card { flex: 0 0 240px; }
  .msj-rail { gap: 18px; }

  /* ==== A안(2026-07-20) PC 전용 좌측 안내판(320px)+우측 카드 auto-fit 그리드 ====
     예약테마(rvtm) A안과 동일 형제 문법 — 산지가 여러 산지·이면 이 구조가 그룹마다 반복된다.
     기존 통합 헤더(.msj-shead)·그룹 라벨(.msj-band)은 안내판(.msj-topline)이 대체하므로 PC에서 숨김. */
  .msj-shead { display: none; }
  .msj-group { display: flex; align-items: flex-start; gap: 24px; }
  .msj-group + .msj-group { margin-top: 40px; }
  .msj-band { display: none; }

  .msj-topline {
    display: flex; flex-direction: column;
    flex: 0 0 320px; width: 320px; box-sizing: border-box;
    padding: 28px 26px 26px; background: #faf7f0;
    border: 1px solid #ece2cc; border-top: 3px solid #3D6041; border-radius: 16px;
  }
  .msj-eb2 { display: block; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #3D6041; }
  .msj-htt {
    margin: 8px 0 0; font-family: "Noto Serif KR", "Maru Buri", "Nanum Myeongjo", serif;
    font-size: 22px; font-weight: 700; color: #141810; line-height: 1.35; letter-spacing: -.01em; word-break: keep-all;
  }
  .msj-rule2 { height: 2px; margin: 14px 0 16px; background: linear-gradient(90deg, #3D6041 0 40px, #e4dcc4 40px); }
  .msj-panel-viewall {
    display: block; margin-top: 4px; padding: 12px 0; text-align: center;
    background: #3D6041; border: 1px solid #3D6041; border-radius: 10px;
    color: #fff; font-size: 14px; font-weight: 700; text-decoration: none;
  }
  .msj-panel-viewall:hover { background: #2f4c33; }

  /* 우측 카드 : 레일/솔로/듀오 모두 4열 고정 그리드 — 사전예약(rvtm) 카드와 동일 규격.
     v3.1(2026-07-20) 사용자 지시: 상품이 적어도 카드가 늘어나지 않고 예약 카드와 같은 사진 크기 유지(남는 트랙은 여백). */
  .msj-rail,
  .msj-rail.msj-rail-solo,
  .msj-rail.msj-rail-duo {
    flex: 1 1 auto; min-width: 0; display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px; overflow: visible; padding: 0;
  }
  .msj-rail .msj-card,
  .msj-rail.msj-rail-solo .msj-card,
  .msj-rail.msj-rail-duo .msj-card {
    flex: none; width: auto; flex-direction: column; align-items: stretch;
  }
  .msj-rail.msj-rail-solo .imwrap,
  .msj-rail.msj-rail-duo .imwrap { flex: none; width: 100%; }
  .msj-rail.msj-rail-solo .body,
  .msj-rail.msj-rail-duo .body { justify-content: flex-start; }
  .msj-rail.msj-rail-solo .msj-name,
  .msj-rail.msj-rail-duo .msj-name { font-size: 15px; min-height: 42px; }
  .msj-rail.msj-rail-solo .msj-now,
  .msj-rail.msj-rail-duo .msj-now { font-size: 20px; }
  .msj-rail > .msj-card:nth-child(n+5) { display: none; }
}

@media (max-width: 1024px) {
  .msj-stt { font-size: 22px; }
}
@media (max-width: 720px) {
  .msj-sec { margin: 26px 0; }
  .msj-inner { padding: 0 14px; }
  .msj-group + .msj-group { margin-top: 26px; }
  .msj-stt { font-size: 20px; padding-right: 58px; }
  .msj-eb { font-size: 12.5px; }
  .msj-rail { gap: 12px; }
  .msj-rail .msj-card { flex: 0 0 168px; }
  .msj-name { font-size: 14px; min-height: 40px; }
  .msj-now { font-size: 18px; }
  .msj-badge { min-width: 40px; height: 25px; line-height: 25px; font-size: 14px; }
  .msj-tag { height: 25px; line-height: 25px; font-size: 12px; }
  .msj-addbtn { font-size: 14px; padding: 11px 0; }
  .msj-rail.msj-rail-solo .msj-name { font-size: 16px; }
  .msj-rail.msj-rail-solo .msj-now { font-size: 21px; }
}

/* 2026-07-23 산지직송 섹션 하단 전체보기 버튼 (PC+모바일 공통, .rvtm-viewall 톤 매칭) */
.msj-foot{ margin-top:20px; text-align:center; }
.msj-viewmore{ display:inline-block; min-width:240px; padding:13px 28px; text-align:center; border:1px solid #DCE7DA; border-radius:10px; background:#fff; color:#3D6041; font-size:15px; font-weight:700; text-decoration:none; }
.msj-viewmore:hover{ background:#EEF3EA; }
.msj-viewmore:active{ background:#EEF3EA; }
@media (max-width:720px){
  .msj-foot{ margin-top:16px; padding:0 14px; }
  .msj-viewmore{ display:block; min-width:0; width:100%; padding:12px 0; font-size:14px; }
}