@charset "UTF-8";
/* ============================================================
   쇼핑몰 메인 "바로가기" 밴드 (2026-07-12, 창A 핸드오프)
   관리자 SM37 노출토글(USE_YN='Y') 바로가기를 사전예약(예약 테마) 하단에 노출. 첫 항목=산지직송.
   딥그린 #3D6041 · 주황 #F8A31E(배지만). 자립형(mshc-*). 시니어 44px·14px 하한. v1.0
   ============================================================ */
.mshc-sec { margin: 30px 0; }
.mshc-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.mshc-list {
  display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none;
}
.mshc-item { flex: 1 1 260px; min-width: 240px; max-width: 380px; }

.mshc-link {
  display: flex; align-items: center; gap: 14px; min-height: 72px;
  padding: 14px 18px; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid #E4E7DF; border-radius: 14px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.mshc-link:hover { border-color: #3D6041; box-shadow: 0 6px 18px -10px rgba(61,96,65,.5); background: #FBFDFA; }
.mshc-link:focus-visible { outline: 3px solid #98c19d; outline-offset: 2px; }

/* 아이콘 = 딥그린 원 + 흰 › (범용 "바로가기" 마커) */
.mshc-ico {
  flex: 0 0 auto; position: relative; width: 44px; height: 44px; border-radius: 50%;
  background: #3D6041;
}
.mshc-ico::after {
  content: '\203A'; position: absolute; top: 50%; left: 50%; transform: translate(-45%,-52%);
  color: #fff; font-size: 24px; font-weight: 700; line-height: 1;
}

.mshc-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mshc-label { font-size: 17px; font-weight: 700; color: #1F241E; letter-spacing: -.02em; line-height: 1.3; }
.mshc-desc {
  font-size: 14px; color: #5F6B5A; letter-spacing: -.01em; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mshc-arrow { flex: 0 0 auto; margin-left: auto; font-size: 26px; color: #C4CBBF; font-weight: 400; line-height: 1; }
.mshc-link:hover .mshc-arrow { color: #3D6041; }

/* 모바일: 가로 스크롤(항목 다수 대비). 라벨/설명 크기 유지(14px 하한) */
@media (max-width: 720px) {
  .mshc-sec { margin: 22px 0; }
  .mshc-inner { padding: 0 14px; }
  .mshc-list {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; gap: 10px; padding-bottom: 2px;
  }
  .mshc-list::-webkit-scrollbar { display: none; }
  .mshc-item { flex: 0 0 78%; min-width: 0; max-width: none; }
  .mshc-link { min-height: 66px; padding: 13px 16px; border-radius: 12px; }
  .mshc-ico { width: 42px; height: 42px; }
  .mshc-label { font-size: 16px; }
}