/* 생활 메뉴 한 줄 · 장보기 한 줄 · 추천 글 카드 — 생활 목록과 장보기가 함께 쓴다 (2026-09-23)
   PHP = inc/community/class-life-nav.php · 거르기 = js/life-nav.js */
.lifenav,
.shopnav,
.pickchips { scrollbar-width: none; -ms-overflow-style: none; }
.lifenav::-webkit-scrollbar,
.shopnav::-webkit-scrollbar,
.pickchips::-webkit-scrollbar { display: none; }

/* 생활 메뉴 5 */
.lifenav { display: flex; gap: 28px; overflow-x: auto; border-bottom: 1px solid var(--t2w-line, #E5E7EB); margin: 0 0 16px; }
.lifenav__item { flex: none; display: inline-flex; align-items: center; min-height: 44px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 16px; font-weight: 600; color: var(--t2w-ink-3, #6B7280); text-decoration: none; }
.lifenav__item:hover { color: var(--t2w-ink, #152A47); }
.lifenav__item.is-on { color: var(--t2w-ink, #152A47); font-weight: 800; border-bottom-color: var(--t2w-ink, #152A47); }

/* 장보기 안 한 줄 */
.shopnav { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 14px; }
.shopnav__item { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border: 1px solid var(--t2w-line, #E5E7EB); border-radius: var(--t2w-r-pill,999px); background: #fff; font-size: 16px; font-weight: 700; color: var(--t2w-ink, #152A47); text-decoration: none; }
.shopnav__item b { font-weight: 600; font-size: 15px; color: var(--t2w-ink-3, #6B7280); }
.shopnav__item.is-on { background: var(--t2w-ink, #152A47); border-color: var(--t2w-ink, #152A47); color: #fff; }
.shopnav__item.is-on b { color: #c9d4e0; }

/* 묶음 머리 */
.lifesec { margin: 0 0 36px; }
.lifesec__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.lifesec__head h2 { margin: 0; font-size: 22px; font-weight: 800; color: var(--t2w-ink, #152A47); letter-spacing: -.01em; }
.lifesec__head p { margin: 0; font-size: 15px; color: var(--t2w-ink-3, #6B7280); }
.lifesec__head a { margin-left: auto; font-size: 15px; font-weight: 700; color: var(--t2w-ink, #152A47); text-decoration: none; }

/* 추천 글 카드 */
.pickcard { display: flex; flex-direction: column; border: 1px solid var(--t2w-line, #E5E7EB); border-radius: var(--t2w-r,12px); overflow: hidden; background: #fff; color: var(--t2w-ink, #152A47); text-decoration: none; transition: box-shadow .15s; }
.pickcard:hover { box-shadow: 0 6px 20px rgba(20, 30, 40, .08); }
.pickcard__img { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: #fffbeb; overflow: hidden; }
.pickcard__fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--t2w-ink-3, #6B7280); font-size: 13px; }
.pickcard__img:has(> img:not([hidden])) .pickcard__fallback { display: none; }
.pickcard__img img[hidden] { display: none; }
.pickcard__img img { position: relative; z-index: 1; width: 72%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
.pickcard__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.pickcard__tag { font-size: 13px; font-weight: 700; color: #b88a2e; }
.pickcard strong { display: block; font-size: var(--t2w-fs-card, 16px); line-height: 1.45; font-weight: 700; letter-spacing: -.01em; -webkit-line-clamp: unset; -webkit-box-orient: initial; overflow: visible; overflow-wrap: anywhere; }
.pickcard__angle { font-size: 15px; line-height: 1.55; color: var(--t2w-ink-3, #6B7280); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pickcard[hidden] { display: none; }

/* 띠 4장(장보기 첫 화면) */
.pickstrip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

/* 목록(추천·비교 판) */
.pickchips { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 20px; }
.pickchips button { flex: none; min-height: 40px; padding: 0 14px; border: 1px solid var(--t2w-line, #E5E7EB); border-radius: var(--t2w-r-pill,999px); background: #fff; font: inherit; font-size: 15px; font-weight: 600; color: var(--t2w-ink, #152A47); cursor: pointer; }
.pickchips button b { font-weight: 600; font-size: 13px; color: var(--t2w-ink-3, #6B7280); margin-left: 2px; }
.pickchips button.is-on { background: var(--t2w-ink, #152A47); border-color: var(--t2w-ink, #152A47); color: #fff; }
.pickchips button.is-on b { color: #cfd6de; }
.pickgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

@media (max-width: 1279px) { .pickgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .pickgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  /* 2026-09-30 ②: 폰에서 다섯째(자유게시판)가 오른쪽에서 잘렸다 — 다섯이 한 줄에 다 들어오게 사이를 좁힌다. */
  .lifenav { gap: 14px; justify-content: space-between; }
  .lifenav__item { font-size: 15px; }
  /* 2026-09-30 마스터 「한 줄로」: 넷이 한 줄에 다 들어가게. 360·375·414 에서 잘림 0 으로 실측한 설정 —
     개수(3,563·20)는 폰에서만 감춘다. 개수가 있으면 어떤 조합으로도 한 줄에 못 들어간다. */
  .shopnav { flex-wrap: nowrap; gap: 6px; overflow-x: visible; }
  .shopnav__item { flex: 1 1 auto; min-width: 0; justify-content: center; white-space: nowrap; padding: 0 6px; font-size: 15px; }
  .shopnav__item b { display: none; }
  .pickstrip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -16px; padding: 0 16px 4px; }
  .pickstrip .pickcard { flex: 0 0 72%; scroll-snap-align: start; }
  .pickgrid { grid-template-columns: 1fr; gap: 0; }
  .pickgrid .pickcard { flex-direction: row; gap: 14px; border: 0; border-bottom: 1px solid var(--t2w-line, #E5E7EB); border-radius: 0; padding: 14px 0; }
  .pickgrid .pickcard__img { flex: 0 0 96px; aspect-ratio: 1; border-radius: var(--t2w-r,12px); }
  .pickgrid .pickcard__body { padding: 0; }
  .pickgrid .pickcard strong { font-size: 16px; }
  .pickgrid .pickcard__angle { font-size: 15px; }
}

/* 2026-10-03 마스터 「설명은 다른 칸과 가로로, 짧게」: 장보기 메뉴 줄 오른쪽에 한 줄. 폰은 메뉴 아래 한 줄. */
.shoprow { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; }
.shoprow .shopnav { margin: 0; }
.shoprow__note { margin: 0 0 0 auto; font-size: 15px; color: var(--t2w-ink-3, #6B7280); white-space: nowrap; }
@media (max-width: 767px) {
  .shoprow { flex-direction: column; align-items: stretch; gap: 8px; }
  .shoprow__note { margin: 0; font-size: 14px; white-space: normal; }
}