/* ================================================================
   style-v2.css — 2단계 추가 스타일
   리뷰 페이지 · DBDBDEEP 랜딩 · SEO 강화 UI
   ================================================================ */

/* ── 리뷰 페이지 ───────────────────────────────────── */
.review-article { max-width: 820px; }
.review-hero-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 48px;
  align-items: start;
  padding: 40px 0;
}
.review-section { margin-bottom: 36px; }
.review-section h2 {
  font-size: 18px;
  font-weight: 900;
  color: var(--navy);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--gray-200);
  margin-bottom: 14px;
}
.review-section p {
  font-size: 15px;
  color: var(--gray-600);
  line-height: 1.9;
}
.pros-cons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 36px;
}
.pros-box {
  background: #DCFCE7;
  border-radius: var(--radius);
  padding: 20px;
}
.cons-box {
  background: #FEE2E2;
  border-radius: var(--radius);
  padding: 20px;
}
.pros-box h3 { font-size: 15px; font-weight: 900; color: #15803D; margin-bottom: 12px; }
.cons-box h3 { font-size: 15px; font-weight: 900; color: #DC2626; margin-bottom: 12px; }
.pros-item { font-size: 13px; color: #166534; display: flex; gap: 8px; margin-bottom: 8px; }
.cons-item { font-size: 13px; color: #991B1B; display: flex; gap: 8px; margin-bottom: 8px; }

.verdict-box {
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius);
  padding: 28px;
  margin: 32px 0;
}
.verdict-box h3 { font-size: 16px; font-weight: 900; margin-bottom: 10px; }
.verdict-box p  { font-size: 14px; color: #94A3B8; line-height: 1.8; }

/* 리뷰 사이드바 sticky 구매 박스 */
.review-buy-box {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  position: sticky;
  top: 80px;
}
.buy-box-price { font-size: 28px; font-weight: 900; color: var(--brand); }
.buy-box-btn {
  display: block;
  width: 100%;
  padding: 14px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 900;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  margin-top: 14px;
  transition: var(--transition);
}
.buy-box-btn:hover { background: var(--brand-dk); }
.buy-box-btn.coupang  { background: var(--coupang); }
.buy-box-btn.linkprice{ background: var(--linkprice); }
.buy-box-btn.dbdbdeep { background: var(--dbdbdeep); }

/* ── DBDBDEEP 랜딩 ─────────────────────────────────── */
.campaign-card {
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}
.campaign-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.campaign-header {
  padding: 20px;
  color: #fff;
}
.campaign-reward {
  background: var(--brand-lt);
  border-radius: var(--radius-sm);
  padding: 12px;
  text-align: center;
  margin-bottom: 14px;
}
.campaign-reward-amount {
  font-size: 26px;
  font-weight: 900;
  color: var(--brand);
}
.campaign-step {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.campaign-step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.campaign-cta {
  display: block;
  width: 100%;
  padding: 13px;
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  filter: brightness(1);
}
.campaign-cta:hover { filter: brightness(1.1); }

/* ── FAQ 아코디언 ──────────────────────────────────── */
.faq-item { border-bottom: 1px solid var(--gray-200); padding: 18px 0; }
.faq-q {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}
.faq-q .q-mark { color: var(--brand); margin-right: 8px; }
.faq-a {
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.8;
  padding-top: 10px;
  display: none;
}
.faq-a.open { display: block; }

/* ── 신뢰 지표 바 ──────────────────────────────────── */
.trust-bar {
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
  padding: 16px 0;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  gap: 0;
}
.trust-item {
  padding: 10px;
  border-right: 1px solid var(--gray-200);
}
.trust-item:last-child { border-right: none; }
.trust-num { font-size: 18px; font-weight: 900; color: var(--navy); }
.trust-lbl { font-size: 12px; color: var(--gray-400); margin-top: 2px; }

/* ── 네이버 블로그 연계 SEO 박스 ──────────────────── */
.naver-seo-tips {
  background: #03C75A;
  color: #fff;
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-top: 24px;
}
.naver-seo-tips h4 { font-size: 14px; font-weight: 900; margin-bottom: 10px; }
.naver-seo-tips li { font-size: 13px; line-height: 1.8; list-style: none; padding-left: 16px; position: relative; }
.naver-seo-tips li::before { content: '✓'; position: absolute; left: 0; }

/* ── 반응형 ────────────────────────────────────────── */
@media (max-width: 900px) {
  .review-hero-grid { grid-template-columns: 1fr; }
  .review-buy-box   { position: static; margin-top: 24px; }
  .pros-cons-grid   { grid-template-columns: 1fr; }
  .trust-grid       { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .trust-grid { grid-template-columns: 1fr 1fr; }
}