/*
 * 제휴 상품 카드·카탈로그 (gear.php · tools.php 추천 러닝 용품 · 보급 플랜 추천 젤) — design.css 뒤에 싣는다. DEVELOPMENT_GUIDE §120
 * 마크업은 inc/affiliate.helper.php affiliate_card_html() · affiliate_catalog_html().
 * 플랫폼 색 — 잉크 규칙: 쿠팡 #E11D48 위 흰 글자 4.6:1 · 네이버 #03C75A 위 어두운 글자 9.4:1.
 */
/* 다음 단계 카드 — tools.css 의 .next 와 같다 (전용 페이지는 tools.css 를 싣지 않는다) */
.gear-page .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { .gear-page .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gear-page .next:last-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .gear-page .grid-3 { grid-template-columns: minmax(0, 1fr); } .gear-page .next:last-child { grid-column: auto; } }
.gear-page .next { display: flex; align-items: center; gap: 16px; padding: 24px; }
.gear-page .next > i { flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--tint); color: var(--primary); font-size: 26px; }
.gear-page .next div { flex: 1; min-width: 0; }
.gear-page .next strong { display: block; font-size: 18px; }
.gear-page .next p { font-size: 14px; color: var(--text-2); margin-top: 2px; }
.gear-page .next .go { font-size: 22px; color: var(--text-3); }
.gear-page a.next:hover .go { color: var(--primary); }

/* 계산기 안 섹션 */
.gear { padding-top: 88px; padding-bottom: 0; }
.gear-more { margin-top: 20px; }
/* 전용 페이지 머리 (tools.css .page-head 와 같은 규격) */
.gear-page .page-head { padding: calc(var(--header-h) + 40px) 0 0; }
.gear-page .crumb { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-3); margin-bottom: 12px; }
.gear-page .page-head h1 { font-size: 40px; line-height: 1.25; font-weight: 800; letter-spacing: -0.03em; }
.gear-page .page-head p { color: var(--text-2); margin-top: 8px; max-width: 720px; }
.gear-page .page-head .gear-partners { justify-content: flex-start; margin-top: 16px; }
.gear-page .gear-area { padding-block: 28px 0; }
.gear-page .gear-empty-page { text-align: center; padding: 56px 20px; }
.gear-page .gear-empty-page i { font-size: 40px; color: var(--text-3); }
.gear-page .gear-empty-page h2 { font-size: 20px; margin-top: 12px; }
.gear-page .gear-empty-page p { color: var(--text-2); margin-top: 6px; }
.gear-page .next-steps { padding: 88px 0 96px; }

.gear-partners { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.gear-filters { display: grid; gap: 12px; margin-bottom: 20px; }
.gear-filters .seg button i { font-size: 15px; vertical-align: -2px; }
.gear-filters .seg button b { font-weight: 700; opacity: .75; font-variant-numeric: tabular-nums; margin-left: 2px; }
.gear-filters .chip small { margin-left: 2px; }
.gear-auto { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; color: var(--text-2); }
.gear-auto i { color: var(--primary); font-size: 18px; }
.gear-auto b { color: var(--text); }
/* 한 줄 4장 (2026-11-03 사용자 요청, 3→4) — 1200px 컨테이너에서 카드 약 288px. 좁아질수록 3·2·1 로 */
.gear-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.gear-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.gear-card[hidden] { display: none; }
.gear-img { display: block; aspect-ratio: 4 / 3; background: var(--bg-2); }
.gear-img img { width: 100%; height: 100%; object-fit: cover; }
.gear-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 18px; flex: 1; }
.gear-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gear-card h3 { font-size: 15px; font-weight: 700; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gear-card p { font-size: 14px; color: var(--text-2); line-height: 1.6; }
.gear-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 10px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; }
.gear-price { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gear-foot .btn { margin-top: 0; margin-left: auto; }
/* 플랫폼 색 — 잉크 규칙: 쿠팡 빨강 위 흰 글자 4.6:1 · 네이버 초록 위 어두운 글자 9.4:1 */
.gear-btn.is-coupang { background: #E11D48; color: #fff; }
.gear-btn.is-coupang:hover { background: #C8163F; }
.gear-btn.is-naver { background: #03C75A; color: #121020; }
.gear-btn.is-naver:hover { background: #02B351; }
.gear-btn.is-other { border: 1px solid var(--border-heavy); color: var(--text); }
.gear-btn.is-other:hover { border-color: var(--text-2); }
.gear-btn i { font-size: 16px; }
.tag-coupang { background: rgba(225, 29, 72, 0.18); color: #FF8A9B; }
.tag-naver { background: rgba(3, 199, 90, 0.16); color: #4ADE80; }
.tag-other { background: var(--surface-2); color: var(--text-2); }
/* compact — 보급 플랜 안: 사진 없이 한 줄 */
.gear-card.is-compact { flex-direction: row; align-items: center; background: var(--bg-2); }
.gear-card.is-compact .gear-body { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 12px 14px; }
.gear-card.is-compact .gear-meta { order: 1; }
.gear-card.is-compact h3 { order: 2; font-size: 14px; flex: 1 1 160px; min-width: 0; }
.gear-card.is-compact .gear-foot { order: 3; margin: 0; padding: 0; flex: 0 0 auto; }
.gear-card.is-compact .gear-price { font-size: 13px; }
.gear-card.is-compact .btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.gear-empty { text-align: center; color: var(--text-2); font-size: 15px; padding: 32px 20px; }
.gear-notice { display: flex; gap: 10px; margin-top: 20px; padding: 16px 18px; border-radius: var(--radius-md); background: var(--bg-2); }
.gear-notice i { flex-shrink: 0; font-size: 20px; color: var(--text-3); }
.gear-notice p { font-size: 13px; color: var(--text-3); line-height: 1.65; }


@media (max-width: 1100px) {
  .gear-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .gear-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .gear-page .page-head { padding-top: calc(var(--header-h) + 28px); }
  .gear-page .page-head h1 { font-size: 30px; }
}
@media (max-width: 640px) {
  .gear-partners { justify-content: flex-start; }
}
@media (max-width: 520px) {
  .gear-grid { grid-template-columns: minmax(0, 1fr); }
}