/* ============================================================
   marketing-funnel.css — 콘텐츠 페이지(marketing-funnel.html) 전용 스타일.
   공통 색·크기는 style.css의 디자인 토큰을 사용하며,
   모델 구분용 강조색은 marketing-funnel-data.js의 승인된 값을 사용합니다.
   ============================================================ */

.funnel-lead { margin-top: 26px; max-width: 720px; display: flex; flex-direction: column; gap: 14px; }
.funnel-lead p { color: var(--ink-soft); font-size: 16px; line-height: 1.75; }
.funnel-footnote { font-size: 13px !important; color: var(--ink-soft); opacity: 0.85; }

.funnel-badge { margin-top: 18px; display: inline-block; }

/* ---------- 히어로 하단 통계 ---------- */
.funnel-stat-grid { margin-top: 36px; }

#funnelUsage { margin-top: 32px; max-width: 640px; }
#funnelUsage strong { display: block; margin-bottom: 10px; font-size: 14px; }
#funnelUsage ol { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
#funnelUsage li { font-size: 14.5px; line-height: 1.6; }

/* ---------- 비즈니스 모델별 한눈에 보기 표 ---------- */
.funnel-overview-table {
  margin-top: 40px;
  overflow-x: auto;
  border-radius: var(--radius);
  /* 가로 스크롤이 가능할 때 오른쪽(왼쪽)에 옅은 그림자를 넣어 "더 있다"는
     걸 알 수 있게 합니다. 표가 잘린 게 아니라 스크롤해서 보는 표라는 힌트. */
  background:
    linear-gradient(to right, var(--bg) 0%, rgba(255,255,255,0) 24px) 0 0,
    linear-gradient(to left, var(--bg) 0%, rgba(255,255,255,0) 24px) 100% 0,
    linear-gradient(to right, rgba(25,31,31,0.12), rgba(25,31,31,0)) 0 0,
    linear-gradient(to left, rgba(25,31,31,0.12), rgba(25,31,31,0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 24px 100%, 24px 100%, 10px 100%, 10px 100%;
  background-attachment: local, local, scroll, scroll;
}
.overview-grid {
  display: grid;
  grid-template-columns: 150px repeat(var(--stage-count), minmax(118px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  min-width: 680px;
}
.overview-cell { background: var(--bg); padding: 14px 14px; font-size: 13px; line-height: 1.5; }
.overview-cell.overview-head { background: var(--paper); font-weight: 800; font-size: 13px; }
.overview-cell.overview-model { background: var(--mint-tint); display: flex; flex-direction: column; gap: 3px; }
.overview-cell.overview-model strong { font-size: 15px; }
.overview-cell.overview-model span { color: var(--mint-deep); font-size: 12px; font-weight: 700; }

/* ---------- 공통 진단 원칙 ---------- */
.principle-group { margin-top: 40px; }
.principle-group:first-child { margin-top: 36px; }
.principle-group > h3 { font-size: 14px; font-weight: 800; color: var(--mint-deep); margin-bottom: 16px; }
.principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.principle-card { border: 1px solid var(--line); border-radius: 18px; padding: 24px; }
.principle-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.principle-num {
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--paper); color: var(--ink-soft);
  font-size: 12.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.principle-card h4 { margin-top: 14px; font-size: 15.5px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.4; }
.principle-card p { margin-top: 8px; font-size: 14px; color: var(--ink-soft); line-height: 1.65; }
.principle-card ul { margin-top: 8px; padding-left: 18px; }
.principle-card li { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }

/* ---------- 비즈니스 모델 섹션 헤더 ---------- */
section.model-section { border-top: 3px solid var(--model-accent); }
.model-section-head { display: flex; align-items: flex-start; gap: 18px; }
.model-section-num {
  flex: none; width: 48px; height: 48px; border-radius: 14px;
  background: var(--model-accent-soft); color: var(--model-accent);
  font-size: 20px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.model-badge {
  display: inline-block; margin-top: 12px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--model-accent-soft); color: var(--model-accent);
  font-size: 12.5px; font-weight: 700;
}
.model-kpi-stat {
  margin-top: 24px; padding: 18px 22px; border-radius: 14px;
  background: var(--model-accent-soft);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.model-kpi-stat span { font-size: 12px; font-weight: 800; color: var(--model-accent); }
.model-kpi-stat strong { font-size: 16.5px; font-weight: 800; color: var(--ink); }

/* ---------- 퍼널 다이어그램 ---------- */
.funnel-diagram {
  margin-top: 36px;
  display: flex;
  align-items: stretch;
  gap: 2px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.funnel-diagram-col { flex: 1 1 0; min-width: 168px; display: flex; flex-direction: column; }
.funnel-diagram-label {
  background: var(--model-accent); color: #fff;
  font-size: 13px; font-weight: 800; text-align: center;
  padding: 10px 8px; border-radius: 12px 12px 0 0;
}
.funnel-diagram-card { flex: 1; background: var(--paper); border-radius: 0 0 12px 12px; padding: 16px 14px; }
.funnel-diagram-card h5 { font-size: 13.5px; font-weight: 800; line-height: 1.4; }
.funnel-diagram-card ul { margin-top: 10px; padding-left: 16px; display: flex; flex-direction: column; gap: 5px; }
.funnel-diagram-card li { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.funnel-diagram-arrow { flex: none; display: flex; align-items: center; color: var(--line); font-size: 18px; padding: 0 2px; align-self: center; }

/* ---------- 채널·도구 ---------- */
.funnel-channels { margin-top: 24px; padding: 20px 24px; border-radius: 16px; background: var(--paper); }
.funnel-channels strong { display: block; font-size: 13px; margin-bottom: 10px; }
.funnel-channels ul { padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.funnel-channels li { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }

/* ---------- 단계 상세(상황 + 활동 카드) ---------- */
.stage-list { margin-top: 28px; display: flex; flex-direction: column; gap: 20px; }
.stage-card {
  border: 1px solid var(--line); border-left: 4px solid var(--model-accent);
  border-radius: 20px; padding: 30px; scroll-margin-top: 90px;
}
.stage-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.stage-head h4 { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.btn-sm { padding: 9px 18px; font-size: 13px; }
.stage-situation { margin-top: 12px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.65; }
.stage-situation strong { color: var(--ink); }

.activity-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.activity-card { background: var(--paper); border-radius: 14px; padding: 18px 20px; }
.activity-card h5 { font-size: 14.5px; font-weight: 800; }
.activity-card > p { margin-top: 6px; font-size: 13px; color: var(--ink-soft); line-height: 1.55; }
.activity-meta { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.activity-meta span { font-size: 11.5px; font-weight: 800; color: var(--mint-deep); }
.activity-meta p { margin-top: 2px; font-size: 13px; line-height: 1.55; }

/* ---------- 부록 비교표 ---------- */
.funnel-appendix-scroll {
  margin-top: 36px;
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--bg) 0%, rgba(255,255,255,0) 24px) 0 0,
    linear-gradient(to left, var(--bg) 0%, rgba(255,255,255,0) 24px) 100% 0,
    linear-gradient(to right, rgba(25,31,31,0.12), rgba(25,31,31,0)) 0 0,
    linear-gradient(to left, rgba(25,31,31,0.12), rgba(25,31,31,0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 24px 100%, 24px 100%, 10px 100%, 10px 100%;
  background-attachment: local, local, scroll, scroll;
}
.funnel-appendix-table { width: 100%; min-width: 680px; border-collapse: collapse; }
.funnel-appendix-table th, .funnel-appendix-table td {
  border: 1px solid var(--line); padding: 14px 16px; font-size: 13.5px; text-align: left; line-height: 1.55;
}
.funnel-appendix-table thead th { background: var(--paper); font-weight: 800; }
.funnel-appendix-table tbody th { background: var(--bg); font-weight: 700; color: var(--ink-soft); white-space: nowrap; }

@media (max-width: 860px) {
  .principle-grid { grid-template-columns: 1fr; }
  .activity-grid { grid-template-columns: 1fr; }
  .funnel-diagram { flex-direction: column; }
  .funnel-diagram-col { min-width: 0; }
  .funnel-diagram-arrow { align-self: center; transform: rotate(90deg); padding: 4px 0; }
  .stage-card { padding: 24px 20px; }
}


/* ---------- 공통 진단 빠른 이동 · 모바일 표 안내 ---------- */
.funnel-common-nav {
  position: sticky;
  top: 72px;
  z-index: 5;
  margin-top: 24px;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.funnel-common-nav a { padding: 8px 12px; border-radius: 999px; background: var(--paper); color: var(--ink-soft); font-size: 12.5px; font-weight: 700; }
.funnel-common-nav a:hover { background: var(--mint-tint); color: var(--mint-deep); }
.principle-group { scroll-margin-top: 150px; }
.principle-back-link { display: inline-block; margin-top: 14px; color: var(--mint-deep); font-size: 12.5px; font-weight: 700; }
.funnel-scroll-hint { display: none; }
.funnel-overview-table, .funnel-appendix-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.funnel-overview-table::-webkit-scrollbar, .funnel-appendix-scroll::-webkit-scrollbar { display: none; }
@media (max-width: 720px) {
  .funnel-common-nav { top: 64px; }
  .funnel-scroll-hint { display: block; margin-top: 22px; color: var(--ink-soft); font-size: 12.5px; }
  .funnel-scroll-hint + .funnel-overview-table, .funnel-scroll-hint + .funnel-appendix-scroll { margin-top: 10px; }
}