/* 차캄 차마다 상품 페이지 (2026-11-15) — shop2.css·shop3.css 위에 얹는 것만 */
.c3-top { padding-top: 16px; }
.c3-crumb { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-bottom: 16px; font-size: var(--t-xs); color: var(--sub); }
.c3-crumb a { color: var(--sub); text-decoration: none; }
.c3-crumb a:hover { color: var(--ink); text-decoration: underline; }
.c3-crumb [aria-current] { color: var(--ink); font-weight: 600; }
.c3-pname { margin: 4px 0 8px; font-size: var(--t-xs); color: var(--sub); line-height: 1.5; }

.c3-group + .c3-group { margin-top: 32px; }
.c3-group-name { margin-bottom: 8px; font-size: var(--t-m); font-weight: 600; }
/* 트림 표: 휴대폰은 「트림·월 금액 / 차값·견적」 두 줄, 넓은 화면은 네 칸 */
.c3-row { grid-template-areas: "car month" "price act"; }
.c3-row .s2-board-carprice { display: block; grid-area: price; font-size: var(--t-xs); color: var(--sub); text-align: left; }
.c3-row:not(.s2-board-th) .s2-board-carprice::before { content: "차값 "; }
@media (min-width: 768px) {
  .c3-row { grid-template-columns: minmax(0, 2fr) 120px 160px 72px; grid-template-areas: none; }
  .c3-row .s2-board-carprice { grid-area: auto; font-size: var(--t-s); text-align: right; }
  .c3-row:not(.s2-board-th) .s2-board-carprice::before { content: none; }
}

.c3-more { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 768px) { .c3-more { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.c3-more a { display: grid; gap: 2px; padding: 10px 12px 14px; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); text-decoration: none; transition: border-color .15s, background-color .15s; }
.c3-more a:hover { border-color: var(--ink); background: var(--paper); }
.c3-back { margin-top: 24px; }

/* 휴대폰 아래 띠가 맨 아래 글을 가리지 않게 */
@media (max-width: 767px) { .s2-foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }