/* =========================================================
   landing-port.css — 히어로 하단 전체 (Review-source 파란 디자인 이식)
   스코프: .rp 래퍼. 재사용 lp- 섹션(요금제·문의·FAQ)은
   .rp 안에서 --accent override 로 파랑 상속.
   ========================================================= */

.rp {
  /* ── source 토큰 (oklch 원본) ── */
  --rp-bg:            #ffffff;
  --rp-fg:           oklch(0.18 0.02 250);
  --rp-card:          #ffffff;
  --rp-primary:      oklch(0.58 0.22 260);
  --rp-primary-fg:   oklch(0.99 0 0);
  --rp-primary-soft: oklch(0.965 0.025 255);
  --rp-muted:        oklch(0.97 0.008 255);
  --rp-muted-fg:     oklch(0.50 0.025 255);
  --rp-coral:        oklch(0.70 0.18 25);
  --rp-success:      oklch(0.68 0.16 165);
  --rp-warning:      oklch(0.78 0.14 70);
  --rp-warning-tx:   oklch(0.52 0.16 70);
  --rp-border:       oklch(0.93 0.012 255);
  --rp-surface:      oklch(0.975 0.015 255);
  --rp-surface-mut:  oklch(0.96 0.018 255);

  /* ── translucent helpers ── */
  --rp-pr-5:   color-mix(in oklab, var(--rp-primary) 5%,  transparent);
  --rp-pr-10:  color-mix(in oklab, var(--rp-primary) 10%, transparent);
  --rp-pr-15:  color-mix(in oklab, var(--rp-primary) 15%, transparent);
  --rp-pr-20:  color-mix(in oklab, var(--rp-primary) 20%, transparent);
  --rp-pr-25:  color-mix(in oklab, var(--rp-primary) 25%, transparent);
  --rp-pr-30:  color-mix(in oklab, var(--rp-primary) 30%, transparent);
  --rp-pr-40:  color-mix(in oklab, var(--rp-primary) 40%, transparent);
  --rp-pr-50:  color-mix(in oklab, var(--rp-primary) 50%, transparent);
  --rp-co-5:   color-mix(in oklab, var(--rp-coral) 5%,  transparent);
  --rp-co-10:  color-mix(in oklab, var(--rp-coral) 10%, transparent);
  --rp-co-15:  color-mix(in oklab, var(--rp-coral) 15%, transparent);
  --rp-co-30:  color-mix(in oklab, var(--rp-coral) 30%, transparent);
  --rp-wa-15:  color-mix(in oklab, var(--rp-warning) 15%, transparent);
  --rp-su-15:  color-mix(in oklab, var(--rp-success) 15%, transparent);
  --rp-fg-5:   color-mix(in oklab, var(--rp-fg) 5%,  transparent);
  --rp-fg-10:  color-mix(in oklab, var(--rp-fg) 10%, transparent);
  --rp-fg-70:  color-mix(in oklab, var(--rp-fg) 70%, transparent);

  /* ── shadows ── */
  --rp-sh-soft: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -8px rgba(15,23,42,.08);
  --rp-sh-card: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px -12px rgba(15,23,42,.12);
  --rp-sh-glow: 0 20px 60px -20px color-mix(in oklab, var(--rp-primary) 35%, transparent);

  /* ── 재사용 lp- 섹션용 글로벌 accent override → 파랑 ── */
  --accent:        var(--rp-primary);
  --accent-hover:  oklch(0.52 0.22 260);
  --accent-active: oklch(0.46 0.20 260);
  --accent-light:  oklch(0.72 0.15 255);
  --accent-pale:   var(--rp-primary-soft);
  --accent-pale-2: oklch(0.985 0.012 255);
  --accent-pale-3: oklch(0.92 0.05 255);

  background: var(--rp-bg);
  color: var(--rp-fg);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
  word-break: keep-all;       /* 한글 어절 단위 줄바꿈(잘림 방지) — 자식 상속 */
  overflow-wrap: break-word;  /* 공백 없는 긴 토큰(이메일·숫자)만 강제 줄바꿈 */
}

.rp *,
.rp *::before,
.rp *::after { box-sizing: border-box; }

.rp h2, .rp h3, .rp h4 { letter-spacing: -0.025em; }
:where(.rp h2, .rp h3, .rp h4) { margin: 0; }
:where(.rp p) { margin: 0; }

/* ── layout primitives ── */
.rp-container { max-width: 1152px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 1024px) { .rp-container { padding: 0 32px; } }

.rp-section      { padding: 96px 0; }
.rp-section--lg  { padding: 80px 0; }
.rp-section--surface { background: var(--rp-surface); border-top: 1px solid var(--rp-border); border-bottom: 1px solid var(--rp-border); }
@media (min-width: 640px) {
  .rp-section     { padding: 128px 0; }
  .rp-section--lg { padding: 112px 0; }
}

.rp-eyebrow {
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--rp-primary);
}
.rp-h2 {
  margin-top: 12px; font-size: 34px; font-weight: 800; line-height: 1.22;
}
.rp-h3 { font-size: 26px; font-weight: 800; line-height: 1.28; }
.rp-lead { font-size: 15px; line-height: 1.7; color: var(--rp-muted-fg); }
.rp-accent { color: var(--rp-primary); }
.rp-accent-coral { color: var(--rp-coral); }
@media (min-width: 640px) {
  .rp-h2 { font-size: 48px; line-height: 1.18; }
  .rp-h3 { font-size: 40px; line-height: 1.2; }
  .rp-lead { font-size: 16px; }
}
@media (min-width: 1024px) { .rp-h2 { font-size: 52px; } }

.rp-ic { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.rp-center { text-align: center; }
.rp-mx-auto { margin-left: auto; margin-right: auto; }

/* badge / pill */
.rp-badge {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 6px 12px;
  font-size: 12px; font-weight: 700; line-height: 1;
}
.rp-badge--soft  { background: var(--rp-primary-soft); color: var(--rp-primary); }
.rp-badge--coral { background: var(--rp-co-10); color: var(--rp-coral); }

/* generic card */
.rp-card {
  border: 1px solid var(--rp-border); background: var(--rp-card);
  border-radius: 24px; box-shadow: var(--rp-sh-card);
}
.rp-glow {
  position: absolute; inset: -32px; z-index: -1; border-radius: 36px;
  filter: blur(32px);
}
.rp-glow--pr { background: linear-gradient(135deg, var(--rp-pr-15), transparent); }
.rp-glow--co { background: linear-gradient(135deg, var(--rp-co-15), transparent); }

/* star rating */
.rp-stars { display: inline-flex; align-items: center; gap: 2px; }
.rp-star-on  { color: var(--rp-warning); }
.rp-star-off { color: var(--rp-border); }

/* =========================================================
   1. PROBLEM
   ========================================================= */
.rp-problem-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) {
  .rp-problem-grid { grid-template-columns: 1fr 1.05fr; gap: 64px; }
}
.rp-problem-visual { position: relative; order: 2; }
.rp-problem-text   { order: 1; }
@media (min-width: 1024px) {
  .rp-problem-visual { order: 1; }
  .rp-problem-text   { order: 2; }
}
.rp-problem-text .rp-h2 { margin-top: 12px; }
.rp-problem-text .rp-lead { margin-top: 24px; max-width: 36rem; }

.rp-pills { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.rp-pill {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--rp-border); background: var(--rp-bg);
  border-radius: 999px; padding: 8px 14px;
  font-size: 14px; font-weight: 600; color: var(--rp-muted-fg);
}
.rp-pill .rp-ic { color: var(--rp-coral); }

.rp-callout {
  margin-top: 32px; border-left: 4px solid var(--rp-primary);
  background: var(--rp-bg); border-radius: 16px; padding: 20px;
  box-shadow: var(--rp-sh-soft);
  font-size: 16px; font-weight: 700; line-height: 1.4;
}

/* neglected reviews mock */
.rp-nrm { overflow: hidden; border-radius: 24px; border: 1px solid var(--rp-border); background: var(--rp-card); box-shadow: var(--rp-sh-card); }
.rp-nrm-head, .rp-nrm-foot {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--rp-surface); padding: 12px 16px;
}
.rp-nrm-head { border-bottom: 1px solid var(--rp-border); }
.rp-nrm-foot { border-top: 1px solid var(--rp-border); }
.rp-nrm-head > span:first-child { font-size: 12px; font-weight: 600; color: var(--rp-muted-fg); }
.rp-tag-coral { border-radius: 999px; background: var(--rp-co-10); padding: 2px 10px; font-size: 11px; font-weight: 700; color: var(--rp-coral); }
.rp-nrm-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--rp-border); }
.rp-nrm-row:last-child { border-bottom: 0; }
.rp-nrm-stars { width: 48px; flex-shrink: 0; }
.rp-nrm-body { min-width: 0; flex: 1; }
.rp-nrm-body p:first-child { font-size: 13px; color: var(--rp-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-nrm-days { margin-top: 2px; font-size: 10.5px; color: var(--rp-muted-fg); }
.rp-tag-mut { flex-shrink: 0; border-radius: 6px; background: var(--rp-muted); padding: 4px 8px; font-size: 10px; font-weight: 600; color: var(--rp-muted-fg); }
.rp-nrm-foot-line { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--rp-muted-fg); }
.rp-nrm-foot-line b { font-weight: 700; color: var(--rp-coral); }

/* =========================================================
   2. SELLING POINTS
   ========================================================= */
.rp-sp-head { max-width: 48rem; margin: 0 auto; text-align: center; }
.rp-sp-head .rp-lead { margin: 20px auto 0; max-width: 42rem; }
.rp-sig-list { margin-top: 80px; display: flex; flex-direction: column; gap: 112px; }

.rp-sig { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .rp-sig { grid-template-columns: 1fr 1fr; gap: 64px; } }
.rp-sig-text .rp-h3 { margin-top: 20px; }
.rp-sig-text .rp-lead { margin-top: 20px; }
.rp-sig-visual { position: relative; }
/* reversed (tone block: text right, visual left at lg) */
.rp-sig--rev .rp-sig-text   { order: 1; }
.rp-sig--rev .rp-sig-visual { order: 2; }
@media (min-width: 1024px) {
  .rp-sig--rev .rp-sig-text   { order: 2; }
  .rp-sig--rev .rp-sig-visual { order: 1; }
}

/* repurchase card */
.rp-rp-card { border-radius: 24px; border: 1px solid var(--rp-border); background: var(--rp-card); padding: 24px; box-shadow: var(--rp-sh-card); }
.rp-rp-top { display: flex; align-items: center; justify-content: space-between; }
.rp-rp-top > span:first-child { font-size: 12px; font-weight: 600; color: var(--rp-muted-fg); }
.rp-badge--success { background: var(--rp-su-15); color: var(--rp-success); border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 11px; font-weight: 700; }
.rp-rp-stat { margin-top: 8px; display: flex; align-items: flex-end; gap: 8px; }
.rp-rp-big { font-size: 48px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.rp-rp-big span { font-size: 24px; }
.rp-rp-sub { margin-bottom: 4px; font-size: 12px; color: var(--rp-muted-fg); }
.rp-bars { margin-top: 24px; display: flex; height: 112px; align-items: flex-end; gap: 10px; }
.rp-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rp-bar { width: 100%; border-radius: 6px; background: var(--rp-pr-25); }
.rp-bar--hi { background: var(--rp-primary); }
.rp-bar-lbl { font-size: 9px; color: var(--rp-muted-fg); }
.rp-rp-foot { margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid var(--rp-border); padding-top: 16px; }
.rp-rp-foot dt { font-size: 10.5px; color: var(--rp-muted-fg); }
.rp-rp-foot dd { margin: 2px 0 0; font-size: 14px; font-weight: 700; }
.rp-rp-foot dd.is-pr { color: var(--rp-primary); }

/* tone card */
.rp-tone-card { border-radius: 24px; border: 1px solid var(--rp-border); background: var(--rp-card); padding: 20px; box-shadow: var(--rp-sh-card); }
@media (min-width: 640px) { .rp-tone-card { padding: 24px; } }
.rp-tone-review { border-radius: 12px; background: var(--rp-surface); padding: 12px 16px; }
.rp-tone-review-h { display: flex; align-items: center; gap: 8px; }
.rp-tone-review-h .rp-ic { color: var(--rp-warning); }
.rp-tone-review-h span { font-size: 11px; font-weight: 600; color: var(--rp-muted-fg); }
.rp-tone-review p { margin-top: 4px; font-size: 14px; color: var(--rp-fg); }
.rp-tone-div { margin: 12px 0; display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 600; color: var(--rp-muted-fg); }
.rp-tone-div .rp-line { height: 1px; flex: 1; background: var(--rp-border); }
.rp-tone-rows { display: flex; flex-direction: column; gap: 10px; }
.rp-tone-row { overflow: hidden; border-radius: 16px; border: 1px solid var(--rp-border); }
.rp-tone-row-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--rp-border); background: var(--rp-surface-mut); padding: 8px 12px; }
.rp-tone-name { border-radius: 999px; padding: 2px 10px; font-size: 10.5px; font-weight: 700; }
.rp-tone-name--prem { background: var(--rp-fg); color: var(--rp-bg); }
.rp-tone-name--warm { background: var(--rp-primary); color: var(--rp-primary-fg); }
.rp-tone-name--pro  { background: var(--rp-success); color: #fff; }
.rp-tone-desc { font-size: 10.5px; color: var(--rp-muted-fg); }
.rp-tone-row p { padding: 10px 12px; font-size: 12.5px; line-height: 1.6; color: var(--rp-fg); }

/* negative card */
.rp-neg-card { border-radius: 24px; border: 1px solid var(--rp-border); background: var(--rp-card); padding: 24px; box-shadow: var(--rp-sh-card); }
.rp-neg-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--rp-border); padding-bottom: 12px; }
.rp-neg-head-l { display: flex; align-items: center; gap: 8px; }
.rp-neg-ic { display: grid; place-items: center; height: 28px; width: 28px; border-radius: 8px; background: var(--rp-co-15); color: var(--rp-coral); }
.rp-neg-head-l span:last-child { font-size: 14px; font-weight: 700; }
.rp-neg-live { border-radius: 999px; background: var(--rp-co-10); padding: 2px 8px; font-size: 10px; font-weight: 700; color: var(--rp-coral); }
.rp-neg-list { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.rp-alert { border-radius: 16px; border: 1px solid var(--rp-border); background: var(--rp-surface); padding: 12px 14px; }
.rp-alert-top { display: flex; align-items: center; justify-content: space-between; }
.rp-alert-tag { border-radius: 999px; padding: 2px 8px; font-size: 10px; font-weight: 700; }
.rp-alert-tag--coral { background: var(--rp-co-10); color: var(--rp-coral); }
.rp-alert-tag--warn  { background: var(--rp-wa-15); color: var(--rp-warning-tx); }
.rp-alert-tag--fg    { background: var(--rp-fg-10); color: var(--rp-fg); }
.rp-alert-time { font-size: 10px; color: var(--rp-muted-fg); }
.rp-alert p { margin-top: 8px; font-size: 12.5px; line-height: 1.6; color: var(--rp-fg); }
.rp-neg-btn { margin-top: 16px; display: flex; width: 100%; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 12px; background: var(--rp-fg); padding: 10px; font-size: 12px; font-weight: 600; color: var(--rp-bg); cursor: pointer; }

/* compact 4 */
.rp-compact { margin-top: 96px; border-radius: 24px; border: 1px solid var(--rp-border); background: var(--rp-surface); padding: 24px; }
@media (min-width: 640px) { .rp-compact { padding: 40px; } }
.rp-compact-h { text-align: center; font-size: 18px; font-weight: 700; }
@media (min-width: 640px) { .rp-compact-h { font-size: 20px; } }
.rp-compact-grid { margin-top: 32px; display: grid; gap: 16px; }
@media (min-width: 640px) { .rp-compact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rp-compact-grid { grid-template-columns: repeat(4, 1fr); } }
.rp-compact-card { border-radius: 16px; border: 1px solid var(--rp-border); background: var(--rp-bg); padding: 20px; }
.rp-compact-ic { display: grid; place-items: center; height: 36px; width: 36px; border-radius: 8px; background: var(--rp-primary); color: var(--rp-primary-fg); }
.rp-compact-card h4 { margin-top: 16px; font-size: 15px; font-weight: 700; line-height: 1.4; }
.rp-compact-card p { margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--rp-muted-fg); }

/* =========================================================
   3. BEFORE & AFTER
   ========================================================= */
.rp-ba-grid { margin-top: 56px; display: grid; gap: 24px; align-items: stretch; }
@media (min-width: 1024px) { .rp-ba-grid { grid-template-columns: 1fr auto 1fr; gap: 16px; } }
.rp-ba-head { margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.rp-ba-tag { border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; }
.rp-ba-tag--before { background: var(--rp-muted); color: var(--rp-muted-fg); }
.rp-ba-tag--after  { background: var(--rp-primary); color: var(--rp-primary-fg); }
.rp-ba-head > span:last-child { font-size: 14px; font-weight: 600; }
.rp-ba-head--before > span:last-child { color: var(--rp-muted-fg); }
.rp-ba-head--after  > span:last-child { color: var(--rp-fg); }
.rp-ba-pills { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.rp-ba-pills li { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 4px 12px; font-size: 12px; }
.rp-ba-pills--before li { background: var(--rp-muted); color: var(--rp-muted-fg); }
.rp-ba-pills--after  li { background: var(--rp-primary-soft); color: var(--rp-primary); font-weight: 600; }
.rp-ba-arrow { display: grid; place-items: center; align-self: center; }
.rp-ba-arrow > div { display: grid; place-items: center; height: 56px; width: 56px; border-radius: 999px; background: var(--rp-fg); color: var(--rp-bg); box-shadow: var(--rp-sh-card); }
@media (max-width: 1023px) { .rp-ba-arrow > div { transform: rotate(90deg); } }

/* before excel mock */
.rp-bm { overflow: hidden; border-radius: 24px; border: 1px solid var(--rp-border); background: #fafafa; box-shadow: var(--rp-sh-soft); }
.rp-bm-bar { display: flex; align-items: center; justify-content: space-between; background: #f0f0f0; padding: 10px 16px; }
.rp-bm-bar--top { border-bottom: 1px solid var(--rp-border); }
.rp-bm-bar--bot { border-top: 1px solid var(--rp-border); font-size: 10.5px; color: var(--rp-muted-fg); }
.rp-bm-file { font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--rp-muted-fg); }
.rp-bm-pill { border-radius: 999px; background: var(--rp-muted); padding: 2px 8px; font-size: 10px; font-weight: 600; color: var(--rp-muted-fg); }
.rp-bm table { width: 100%; text-align: left; font-size: 11.5px; border-collapse: collapse; }
.rp-bm thead tr { border-bottom: 1px solid var(--rp-border); background: #f5f5f5; color: var(--rp-muted-fg); }
.rp-bm th { padding: 8px 12px; font-weight: 600; }
.rp-bm td { padding: 8px 12px; }
.rp-bm tbody tr { border-bottom: 1px solid var(--rp-border); }
.rp-bm tbody tr:last-child { border-bottom: 0; }
.rp-bm .c-name { color: var(--rp-muted-fg); }
.rp-bm .c-text { color: var(--rp-fg-70); }
.rp-bm .c-reply { color: var(--rp-muted-fg); }
.rp-bm .c-reply.is-none { font-weight: 600; color: var(--rp-coral); }

/* after dashboard mock */
.rp-am { overflow: hidden; border-radius: 24px; border: 1px solid var(--rp-pr-30); background: var(--rp-card); box-shadow: var(--rp-sh-card); }
.rp-am-bar { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--rp-border); background: linear-gradient(to right, var(--rp-primary-soft), var(--rp-bg)); padding: 10px 16px; }
.rp-am-brand { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--rp-primary); }
.rp-am-live { display: flex; align-items: center; gap: 4px; border-radius: 999px; background: var(--rp-pr-15); padding: 2px 8px; font-size: 10px; font-weight: 700; color: var(--rp-primary); }
.rp-am-dot { height: 6px; width: 6px; border-radius: 999px; background: var(--rp-primary); animation: rp-pulse 1.6s ease-in-out infinite; }
@keyframes rp-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.rp-am-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; }
.rp-am-tile { border-radius: 8px; padding: 10px; }
.rp-am-tile dt { font-size: 9.5px; }
.rp-am-tile dd { margin: 2px 0 0; font-size: 14px; font-weight: 800; }
.rp-am-tile--n  { background: var(--rp-surface); }
.rp-am-tile--n dt { color: var(--rp-muted-fg); } .rp-am-tile--n dd { color: var(--rp-fg); }
.rp-am-tile--c  { background: var(--rp-co-10); }
.rp-am-tile--c dt, .rp-am-tile--c dd { color: var(--rp-coral); }
.rp-am-tile--p  { background: var(--rp-primary-soft); }
.rp-am-tile--p dt, .rp-am-tile--p dd { color: var(--rp-primary); }
.rp-am-list { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; }
.rp-am-item { display: flex; align-items: flex-start; gap: 8px; border-radius: 12px; border: 1px solid var(--rp-border); background: var(--rp-surface); padding: 10px 12px; }
.rp-am-item-ic { margin-top: 2px; display: grid; place-items: center; height: 20px; width: 20px; flex-shrink: 0; border-radius: 6px; }
.rp-am-item-body { flex: 1; }
.rp-am-item-tag { display: inline-block; border-radius: 999px; padding: 2px 6px; font-size: 9px; font-weight: 700; }
.rp-am-item-body p { margin-top: 4px; font-size: 11.5px; line-height: 1.6; color: var(--rp-fg); }
.rp-tone-pr { background: var(--rp-pr-15); color: var(--rp-primary); }
.rp-tone-co { background: var(--rp-co-15); color: var(--rp-coral); }
.rp-tone-wa { background: var(--rp-wa-15); color: var(--rp-warning-tx); }
.rp-am-foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--rp-border); background: var(--rp-fg); padding: 10px 16px; color: var(--rp-bg); }
.rp-am-foot-l { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; }
.rp-am-foot-l .rp-ic { color: var(--rp-primary); }
.rp-am-foot-r { font-size: 10px; color: color-mix(in oklab, #fff 60%, transparent); }

/* =========================================================
   4. FEATURES
   ========================================================= */
.rp-feat-head { max-width: 48rem; margin: 0 auto; text-align: center; }
.rp-feat-grid { margin-top: 64px; display: grid; gap: 20px; }
@media (min-width: 640px)  { .rp-feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rp-feat-grid { grid-template-columns: repeat(3, 1fr); } }
.rp-feat-card { display: flex; flex-direction: column; border-radius: 24px; border: 1px solid var(--rp-border); background: var(--rp-card); padding: 24px; transition: transform .2s, border-color .2s, box-shadow .2s; }
.rp-feat-card:hover { transform: translateY(-4px); border-color: var(--rp-pr-40); box-shadow: var(--rp-sh-card); }
.rp-feat-top { display: flex; align-items: center; gap: 12px; }
.rp-feat-ic { display: grid; place-items: center; height: 40px; width: 40px; border-radius: 12px; background: var(--rp-primary); color: var(--rp-primary-fg); box-shadow: var(--rp-sh-soft); }
.rp-feat-top h3 { font-size: 17px; font-weight: 700; }
.rp-feat-card > p { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--rp-muted-fg); }
.rp-feat-preview { margin-top: 20px; }

/* preview sub-cards */
.rp-pv { border-radius: 12px; border: 1px solid var(--rp-border); background: var(--rp-surface); padding: 12px; }
.rp-pv-h { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; color: var(--rp-muted-fg); }
.rp-pv-h .rp-ic { color: var(--rp-warning); }
.rp-pv-rev { margin-top: 4px; font-size: 11px; color: var(--rp-fg); }
.rp-pv-ans { margin-top: 8px; border-radius: 8px; border: 1px solid var(--rp-pr-30); background: var(--rp-primary-soft); padding: 6px 8px; font-size: 11px; line-height: 1.6; }
.rp-pv-ans b { font-weight: 600; color: var(--rp-primary); }
.rp-pv-tone { display: flex; flex-direction: column; gap: 6px; }
.rp-pv-tone-row { display: flex; align-items: center; justify-content: space-between; border-radius: 8px; background: var(--rp-bg); padding: 6px 8px; }
.rp-pv-tone-row .rp-ic { color: var(--rp-primary); }
.rp-pv-tone-name { border-radius: 999px; padding: 2px 8px; font-size: 9.5px; font-weight: 700; }
.rp-pv--alert { border-color: var(--rp-co-30); background: var(--rp-co-5); }
.rp-pv-alert-h { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; color: var(--rp-coral); }
.rp-pv-alert-t { margin-top: 6px; font-size: 11px; line-height: 1.6; color: var(--rp-fg); }
.rp-pv-bar { margin-top: 8px; height: 4px; width: 100%; border-radius: 4px; background: var(--rp-co-15); }
.rp-pv-bar > div { height: 100%; width: 75%; border-radius: 4px; background: var(--rp-coral); }
.rp-pv-hist-h { font-size: 10px; font-weight: 600; color: var(--rp-muted-fg); }
.rp-pv-thumbs { margin-top: 8px; display: flex; gap: 4px; }
.rp-pv-thumb { height: 28px; width: 28px; border-radius: 6px; background: var(--rp-pr-15); box-shadow: inset 0 0 0 1px var(--rp-pr-20); }
.rp-pv-hist-p { margin-top: 8px; font-size: 11px; color: var(--rp-fg); }
.rp-pv-best-h { display: flex; align-items: center; justify-content: space-between; }
.rp-pv-best-badge { border-radius: 999px; background: var(--rp-primary); padding: 2px 8px; font-size: 9px; font-weight: 700; color: var(--rp-primary-fg); }
.rp-pv-best-q { margin-top: 6px; font-size: 11px; line-height: 1.6; color: var(--rp-fg); }
.rp-pv-best-tags { margin-top: 8px; display: flex; gap: 4px; }
.rp-pv-best-tags span { border-radius: 4px; background: var(--rp-fg-5); padding: 2px 6px; font-size: 9px; }
.rp-pv-stores-row { display: flex; gap: 6px; }
.rp-pv-store { display: grid; place-items: center; height: 28px; width: 28px; border-radius: 8px; font-size: 10px; font-weight: 700; }
.rp-pv-store--on { background: var(--rp-primary); color: var(--rp-primary-fg); }
.rp-pv-store--off { background: var(--rp-bg); color: var(--rp-muted-fg); box-shadow: inset 0 0 0 1px var(--rp-border); }
.rp-pv-stores-stats { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.rp-pv-stores-stats div { display: flex; align-items: center; justify-content: space-between; font-size: 10px; }
.rp-pv-stores-stats span:first-child { color: var(--rp-muted-fg); }
.rp-pv-stores-stats b { font-weight: 700; }

/* =========================================================
   5. TARGET
   ========================================================= */
.rp-target-head { max-width: 48rem; }
.rp-target-grid { margin-top: 48px; display: grid; gap: 20px; }
@media (min-width: 640px) { .rp-target-grid { grid-template-columns: repeat(2, 1fr); } }
.rp-target-card { border-radius: 24px; border: 1px solid var(--rp-border); background: var(--rp-bg); padding: 28px; box-shadow: var(--rp-sh-soft); }
@media (min-width: 640px) { .rp-target-card { padding: 32px; } }
.rp-target-ic { display: grid; place-items: center; height: 44px; width: 44px; border-radius: 12px; background: var(--rp-primary-soft); color: oklch(0.32 0.15 260); }
.rp-target-card h3 { margin-top: 20px; font-size: 18px; font-weight: 700; line-height: 1.4; }
.rp-target-card p { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--rp-muted-fg); }

/* =========================================================
   6. AEO (dark)
   ========================================================= */
.rp-aeo-wrap { padding: 80px 0; }
@media (min-width: 640px) { .rp-aeo-wrap { padding: 112px 0; } }
.rp-aeo {
  overflow: hidden; border-radius: 32px; border: 1px solid var(--rp-border);
  background: linear-gradient(135deg, var(--rp-fg) 0%, var(--rp-fg) 55%, #0b1f1d 100%);
  color: var(--rp-bg); padding: 32px;
}
@media (min-width: 640px)  { .rp-aeo { padding: 48px; } }
@media (min-width: 1024px) { .rp-aeo { padding: 64px; } }
.rp-aeo-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .rp-aeo-grid { grid-template-columns: 1.1fr 1fr; } }
.rp-aeo-eyebrow { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.1); padding: 6px 12px; font-size: 12px; font-weight: 600; backdrop-filter: blur(8px); }
.rp-aeo h2 { margin-top: 20px; font-size: 28px; font-weight: 800; line-height: 1.2; }
@media (min-width: 640px)  { .rp-aeo h2 { font-size: 36px; } }
@media (min-width: 1024px) { .rp-aeo h2 { font-size: 44px; } }
.rp-aeo-grad { background: linear-gradient(to right, var(--rp-primary), #a8e6dc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rp-aeo-lead { margin-top: 24px; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.75); }
@media (min-width: 640px) { .rp-aeo-lead { font-size: 16px; } }
.rp-aeo-callout { margin-top: 28px; border-radius: 16px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.05); padding: 20px; font-size: 15px; font-weight: 600; line-height: 1.6; }
@media (min-width: 640px) { .rp-aeo-callout { font-size: 16px; } }
.rp-aeo-callout .rp-aeo-pr { color: var(--rp-primary); }
.rp-aeo-btn { margin-top: 28px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: var(--rp-primary); padding: 14px 24px; font-size: 14px; font-weight: 600; color: var(--rp-primary-fg); text-decoration: none; transition: transform .2s; }
.rp-aeo-btn:hover { transform: translateY(-2px); }
.rp-aeo-reco { border-radius: 24px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); padding: 20px; backdrop-filter: blur(8px); }
@media (min-width: 640px) { .rp-aeo-reco { padding: 24px; } }
.rp-aeo-reco-h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.7); }
.rp-aeo-reco-p { margin-top: 12px; font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.9); }
.rp-aeo-reco-p span { color: var(--rp-primary); }
.rp-aeo-brands { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.rp-aeo-brand { display: flex; align-items: center; justify-content: space-between; border-radius: 12px; border: 1px solid; padding: 12px 16px; font-size: 12px; }
.rp-aeo-brand b { font-weight: 600; }
.rp-aeo-brand--win  { border-color: var(--rp-pr-50); background: var(--rp-pr-15); color: var(--rp-bg); }
.rp-aeo-brand--lose { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.05); color: rgba(255,255,255,.6); }
.rp-aeo-cap { margin-top: 14px; font-size: 11px; color: rgba(255,255,255,.55); text-align: center; }

/* =========================================================
   7. CTA (final, primary-soft)
   ========================================================= */
.rp-cta { background: var(--rp-primary-soft); padding: 80px 0; }
@media (min-width: 640px) { .rp-cta { padding: 112px 0; } }
.rp-cta-inner { max-width: 56rem; margin: 0 auto; padding: 0 20px; text-align: center; }
.rp-cta h2 { font-size: 28px; font-weight: 800; line-height: 1.2; }
@media (min-width: 640px)  { .rp-cta h2 { font-size: 36px; } }
@media (min-width: 1024px) { .rp-cta h2 { font-size: 48px; } }
.rp-cta-p { margin: 24px auto 0; max-width: 42rem; font-size: 15px; line-height: 1.7; color: var(--rp-muted-fg); }
@media (min-width: 640px) { .rp-cta-p { font-size: 16px; } }
.rp-cta-row { margin-top: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
@media (min-width: 640px) { .rp-cta-row { flex-direction: row; } }
.rp-cta-btn { display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 16px 28px; font-size: 15px; font-weight: 600; text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s; }
@media (min-width: 640px) { .rp-cta-btn { width: auto; } }
.rp-cta-btn--primary { background: var(--rp-fg); color: var(--rp-bg); box-shadow: var(--rp-sh-card); }
.rp-cta-btn--primary:hover { transform: translateY(-2px); box-shadow: var(--rp-sh-glow); }
.rp-cta-btn--ghost { border: 1px solid var(--rp-border); background: var(--rp-bg); color: var(--rp-fg); }
.rp-cta-btn--ghost:hover { background: var(--rp-muted); }
.rp-cta-note { margin-top: 24px; font-size: 12px; color: var(--rp-muted-fg); }

/* hidden-on-mobile br */
.rp-br-sm { display: none; }
@media (min-width: 640px) { .rp-br-sm { display: inline; } }

/* '예시 화면' 각주 — 목업/수치가 실측이 아님을 명시 */
.rp-example-note {
  margin-top: 128px; text-align: center;
  font-size: 12px; line-height: 1.6; color: var(--rp-muted-fg); opacity: .85;
}
/* 채워진 카드(.rp-compact / before·after 그리드) 바로 아래 각주는 더 띄움 */
.rp-compact + .rp-example-note,
.rp-ba-grid + .rp-example-note { margin-top: 120px; }
.rp-ex-chip {
  display: inline-flex; align-items: center; border-radius: 999px;
  background: var(--rp-fg-10); color: var(--rp-muted-fg);
  padding: 2px 8px; font-size: 10px; font-weight: 700; letter-spacing: .02em;
}

/* AOS 안전장치: JS/AOS 미동작 시에도 콘텐츠 노출(no-JS 폴백은 base의 noscript와 별개) */
.no-aos [data-aos] { opacity: 1 !important; transform: none !important; }