/* 당신의사수 1:1 커피챗 전용 랜딩 */

.cc-page {
  --cc-purple: #5f5df9;
  --cc-purple-soft: #ebefff;
  /* 가격 카드 등 큰 블록 모서리 (본문 카드와 통일) */
  --cc-radius-card: 16px;
  /* 본문 섹션 h2 공통 크기 (스토리 훅 등 큰 타이틀 기준 통일) */
  --cc-section-title-size: clamp(1.35rem, 4.2vw, 1.95rem);
  /* 카드·패널 공통: 그림자·모서리 (이직 컨설팅 페이지와 동일 토큰) */
  --cc-surface-radius: 16px;
  --cc-surface-shadow: 0 5px 22px rgba(15, 23, 42, 0.06);
  --cc-surface-shadow-hover: 0 10px 32px rgba(15, 23, 42, 0.1);
  overflow-x: hidden;
}

.cc-hero {
  padding: 48px 24px 72px;
  text-align: center;
  background: linear-gradient(180deg, var(--cc-purple-soft) 0%, #fff 55%);
}

.cc-hero-inner {
  max-width: 720px;
  margin: 0 auto;
}

/* 페이지 메인 타이틀: 브랜드·서비스명 강조 */
.cc-hero-brand {
  font-size: clamp(2rem, 6.5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.04em;
  margin: 0 0 20px;
  color: var(--color-text);
}

.cc-hero-brand-em {
  display: inline-block;
  color: var(--cc-purple);
  font-weight: 800;
}

/* 서브 헤드라인: 긴급·혜택 메시지 */
.cc-hero-headline {
  font-size: clamp(1.2rem, 3.2vw, 1.65rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
  color: var(--color-text);
}

.cc-hero-sub {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin: 0 0 28px;
}

.cc-hero-cta {
  margin-bottom: 0;
}

.cc-section {
  padding: 64px 24px;
}

.cc-section--alt {
  background: var(--color-bg-subtle);
}

.cc-section-inner {
  max-width: 720px;
  margin: 0 auto;
}

.cc-section-inner--wide {
  max-width: 960px;
}

.cc-h2 {
  font-size: var(--cc-section-title-size);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
  color: var(--color-text);
}

.cc-h2--center {
  text-align: center;
}

/* Section 02 Pain: 2×3 카드 그리드 */
.cc-pain-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.cc-pain-section .cc-section-inner--wide {
  max-width: 920px;
}

.cc-pain-header {
  text-align: center;
  margin-bottom: 28px;
}

.cc-pain-grid {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.cc-pain-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--cc-surface-radius);
  box-shadow: var(--cc-surface-shadow);
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}

.cc-pain-card:hover {
  box-shadow: var(--cc-surface-shadow-hover);
  border-color: rgba(95, 93, 249, 0.28);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .cc-pain-card {
    transition: box-shadow var(--transition), border-color var(--transition);
  }

  .cc-pain-card:hover {
    transform: none;
  }
}

.cc-pain-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cc-purple-soft);
  color: var(--cc-purple);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cc-pain-card-text {
  margin: 0;
  padding-top: 2px;
  font-size: 0.9375rem;
  line-height: 1.55;
  font-weight: 500;
  color: var(--color-text);
  text-align: left;
}

/* Pain 섹션 하단 카피: 가운데·한 줄(넓은 화면)·강조 */
.cc-text.cc-pain-footer {
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--color-text);
  max-width: none;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .cc-text.cc-pain-footer {
    font-size: 1.2rem;
    white-space: nowrap;
  }
}

.cc-pain-footer-accent {
  color: var(--cc-purple);
  font-weight: 700;
}

@media (max-width: 640px) {
  .cc-pain-grid {
    grid-template-columns: 1fr;
  }
}

/* Section 03 Problem: 중앙 헤드라인 + 회색 패널 + X 리스트 + 하단 강조 */
.cc-problem-section .cc-section-inner--wide {
  max-width: 720px;
}

.cc-problem-title {
  text-align: center;
  font-size: var(--cc-section-title-size);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.025em;
  margin: 0 auto 24px;
  color: var(--color-text);
  max-width: 36em;
}

.cc-problem-title-accent {
  color: var(--cc-purple);
}

.cc-problem-panel {
  /* 패널 안 경고·✕ 표시는 레드 톤 (제목의 진짜 이유 강조는 보라 유지) */
  --cc-problem-x: #dc2626;
  --cc-problem-callout-bg: #fef2f2;
  --cc-problem-callout-text: #991b1b;
  --cc-problem-callout-border: rgba(220, 38, 38, 0.28);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--cc-surface-radius);
  padding: 26px 26px 22px;
  box-shadow: var(--cc-surface-shadow);
}

.cc-problem-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cc-problem-list > li:not(.cc-problem-list-callout) {
  position: relative;
  padding-left: 28px;
  margin-bottom: 16px;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
  text-align: left;
}

.cc-problem-list > li:not(.cc-problem-list-callout)::before {
  content: "✕";
  position: absolute;
  left: 0;
  top: 0.2em;
  color: var(--cc-problem-x);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
}

.cc-problem-list-callout {
  margin: 20px 0 0;
  padding: 16px 18px;
  list-style: none;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--cc-problem-callout-text);
  background: var(--cc-problem-callout-bg);
  border: 1px solid var(--cc-problem-callout-border);
  border-radius: 10px;
}

@media (max-width: 480px) {
  .cc-problem-panel {
    padding: 20px 18px 18px;
  }
}

/* Section 04 Story: 다크 내비 톤 스토리텔링 (레퍼런스: 훅·인용 박스·After) */
.cc-story-section {
  padding: 72px 24px 80px;
  background: linear-gradient(165deg, #0a0f1a 0%, #121c30 50%, #0f172a 100%);
  color: #f4f4f5;
}

/* 다른 본문 섹션(.cc-section-inner)과 동일한 가로 폭 */
.cc-story-inner {
  max-width: 720px;
  margin: 0 auto;
}

.cc-story-byline {
  margin: 0 0 28px;
  text-align: center;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88);
}

.cc-story-hook {
  margin: 0 0 28px;
  text-align: center;
  font-size: var(--cc-section-title-size);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.025em;
  color: #fff;
}

/* 스토리 포인트: 브랜드 보라 계열 (페이지 컬러톤 통일) */
.cc-story-hook-accent {
  color: #b8b5ff;
}

.cc-story-body {
  margin: 0;
}

.cc-story-body p {
  margin: 0 0 16px;
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.88);
  text-align: left;
}

.cc-story-body p:last-child {
  margin-bottom: 0;
}

.cc-story-quote {
  margin: 28px 0;
  margin-inline: 0;
  padding: 22px 24px;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  background: rgba(95, 93, 249, 0.12);
  border: 1px solid rgba(184, 181, 255, 0.38);
  border-radius: var(--cc-surface-radius);
  font-size: 1.02rem;
  line-height: 1.7;
  font-style: italic;
  font-weight: 500;
  color: #f1f5f9;
  text-align: left;
}

.cc-story-phase {
  margin: 36px 0 12px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(184, 181, 255, 0.95);
}

@media (max-width: 480px) {
  .cc-story-section {
    padding: 56px 20px 64px;
  }

  .cc-story-quote {
    padding: 18px 18px;
  }
}

/* Section 05 Solution: 해결책 헤더 + 좌/우 스플릿 카드 */
.cc-solution-section {
  padding: 64px 24px 72px;
  background: linear-gradient(180deg, var(--cc-purple-soft) 0%, #f8f9fc 48%, #fff 100%);
}

.cc-solution-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 40px;
}

.cc-solution-badge {
  display: inline-block;
  margin: 0 0 16px;
  padding: 6px 14px;
  background: var(--cc-purple-soft);
  color: var(--cc-purple);
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: 999px;
}

.cc-solution-title {
  margin: 0 0 16px;
  font-size: var(--cc-section-title-size);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.025em;
}

.cc-solution-title-line {
  display: block;
  color: var(--color-text);
}

.cc-solution-title-accent {
  display: block;
  margin-top: 6px;
  color: var(--cc-purple);
}

.cc-solution-sub {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.cc-solution-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 960px;
  margin: 0 auto;
  border-radius: var(--cc-surface-radius);
  overflow: hidden;
  box-shadow: var(--cc-surface-shadow);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.cc-solution-split-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--cc-purple);
  padding: 32px 28px 36px;
  color: #fff;
}

.cc-solution-split-right {
  background: #fff;
  padding: 32px 28px 36px;
}

.cc-solution-split-heading {
  margin: 0 0 22px;
  font-size: calc(1.125rem * 1.3);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.cc-solution-split-left .cc-solution-split-heading {
  color: #fff;
}

.cc-solution-split-right .cc-solution-split-heading {
  color: var(--color-text);
}

.cc-solution-rec-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cc-solution-rec-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
  font-size: 0.95rem;
  line-height: 1.55;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.96);
}

.cc-solution-rec-list li:last-child {
  margin-bottom: 0;
}

.cc-solution-rec-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.cc-solution-gain-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: gain;
}

.cc-solution-gain-list > li {
  margin-bottom: 22px;
}

.cc-solution-gain-list > li:last-child {
  margin-bottom: 0;
}

.cc-solution-gain-title {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cc-purple);
  letter-spacing: -0.02em;
}

.cc-solution-gain-desc {
  margin: 8px 0 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

@media (max-width: 800px) {
  .cc-solution-split {
    grid-template-columns: 1fr;
  }

  .cc-solution-split-left,
  .cc-solution-split-right {
    padding: 26px 22px 28px;
  }
}

@media (max-width: 480px) {
  .cc-solution-section {
    padding: 48px 20px 56px;
  }

  .cc-solution-header {
    margin-bottom: 28px;
  }
}

.cc-lead {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 16px;
  line-height: 1.55;
}

.cc-text {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text-secondary);
  margin: 0 0 16px;
}

.cc-text:last-child {
  margin-bottom: 0;
}

.cc-list {
  margin: 0 0 16px;
  padding-left: 1.25rem;
  color: var(--color-text-secondary);
  line-height: 1.75;
}

.cc-list li {
  margin-bottom: 8px;
}

.cc-list--check {
  list-style: none;
  padding-left: 0;
}

.cc-list--check li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 10px;
}

.cc-list--check li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--cc-purple);
}

.cc-quote-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-quote-list li {
  position: relative;
  padding-left: 1.1em;
  margin-bottom: 12px;
  font-size: 0.98rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
}

.cc-quote-list li::before {
  content: "“";
  position: absolute;
  left: 0;
  color: var(--cc-purple);
  font-weight: 700;
}

/* Section 06 진행 방식: 3단 카드 + 연결선 (포인트 컬러: 보라) */
.cc-howflow-section {
  background: #fff;
  padding: 72px 24px 80px;
}

.cc-howflow-header {
  text-align: center;
  margin-bottom: 48px;
}

.cc-howflow-title {
  margin: 0 0 12px;
  font-size: var(--cc-section-title-size);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.025em;
  color: var(--color-text);
}

.cc-howflow-sub {
  margin: 0;
  font-size: 1.05rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

.cc-howflow-track {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

.cc-howflow-line {
  display: block;
  position: absolute;
  left: 14%;
  right: 14%;
  /* 카드 상단 패딩 + 번호 원 세로 중앙에 맞춤 */
  top: 54px;
  height: 2px;
  background: var(--color-border);
  z-index: 0;
  pointer-events: none;
}

.cc-howflow-cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 18px;
  align-items: stretch;
}

.cc-howflow-card {
  text-align: center;
  padding: 28px 20px 26px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--cc-surface-radius);
  box-shadow: var(--cc-surface-shadow);
}

.cc-howflow-circle {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--cc-purple);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.cc-howflow-step-label {
  display: block;
  margin-bottom: 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cc-purple);
}

.cc-howflow-card-title {
  margin: 0 0 10px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.cc-howflow-card-desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

@media (max-width: 860px) {
  .cc-howflow-line {
    display: none;
  }

  .cc-howflow-cards {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
  }

  .cc-howflow-section {
    padding: 56px 20px 64px;
  }

  .cc-howflow-header {
    margin-bottom: 32px;
  }
}

/* Section 07 후기: 타이틀 유지 + 별점 + 2×2 카드 */
.cc-review-section .cc-review-section-title {
  text-align: center;
  margin-bottom: 16px;
}

.cc-review-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 36px;
}

.cc-review-stars {
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: 4px;
  /* 별점은 읽기 관례상 금색 유지, 채도만 살짝 낮춰 보라 히어로와 충돌 완화 */
  color: #e8b86d;
}

.cc-review-rating-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.cc-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 920px;
  margin: 0 auto;
}

.cc-review-card {
  background: #fff;
  border-radius: var(--cc-surface-radius);
  padding: 26px 24px 28px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: var(--cc-surface-shadow);
  text-align: left;
  transition: box-shadow var(--transition), transform var(--transition);
}

.cc-review-card:hover {
  box-shadow: var(--cc-surface-shadow-hover);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .cc-review-card {
    transition: box-shadow var(--transition);
  }

  .cc-review-card:hover {
    transform: none;
  }
}

.cc-review-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cc-review-num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  background: var(--cc-purple-soft);
  color: var(--cc-purple);
}

.cc-review-role {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.35;
}

.cc-review-name {
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-left: 0.2em;
  white-space: nowrap;
}

.cc-review-dashes {
  width: 52px;
  height: 3px;
  margin: 14px 0 16px;
  background: repeating-linear-gradient(
    90deg,
    var(--cc-purple) 0,
    var(--cc-purple) 5px,
    transparent 5px,
    transparent 9px
  );
  border-radius: 2px;
  opacity: 0.85;
}

.cc-review-quote {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  font-weight: 400;
  font-style: normal;
  color: var(--color-text);
}

@media (max-width: 700px) {
  .cc-review-grid {
    grid-template-columns: 1fr;
  }

  .cc-review-rating {
    margin-bottom: 28px;
  }
}

/* 멘토진 섹션: 배경 흰색(cc-section--alt 연회색 덮어씀) */
#authority {
  background: var(--color-bg);
}

/* 멘토진 섹션: 카드 위 제목·본문·체크 리스트 가운데 정렬 */
#authority .cc-authority-intro {
  text-align: center;
}

#authority .cc-authority-intro .cc-text {
  margin-left: auto;
  margin-right: auto;
  max-width: 640px;
}

#authority .cc-authority-intro .cc-list.cc-list--check {
  display: table;
  margin: 12px auto 0;
  text-align: left;
}

/* 멘토진 섹션: index와 동일 카드 영역 */
.cc-authority-mentors {
  margin-top: 40px;
  padding-bottom: 8px;
}

/* 멘토 3명: 공통 4열 그리드면 빈 열이 생겨 왼쪽으로 쏠려 보임 → 데스크톱만 3열 */
@media (min-width: 901px) {
  #authority .cc-authority-mentors .mentor-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.cc-faq details {
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}

.cc-faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--color-text);
  list-style: none;
}

.cc-faq summary::-webkit-details-marker {
  display: none;
}

.cc-faq details[open] summary {
  margin-bottom: 8px;
}

.cc-faq details p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
}

.cc-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}

@media (max-width: 600px) {
  .cc-compare {
    grid-template-columns: 1fr;
  }
}

.cc-compare-box {
  padding: 20px;
  border-radius: var(--cc-surface-radius);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  box-shadow: var(--cc-surface-shadow);
}

.cc-compare-box--neg {
  border-style: dashed;
}

.cc-compare-box--pos {
  border: 2px solid var(--cc-purple);
}

.cc-compare-box h3 {
  font-size: 0.95rem;
  margin: 0 0 10px;
  font-weight: 700;
}

.cc-compare-box p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* 가격 카드 (Section 13) */
.cc-pricing {
  text-align: center;
}

.cc-pricing-title {
  font-size: var(--cc-section-title-size);
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 12px;
  letter-spacing: -0.025em;
}

.cc-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
  text-align: left;
}

.cc-price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 22px 22px;
  background: var(--color-bg);
  border: 2px solid var(--cc-purple);
  border-radius: var(--cc-radius-card);
  min-height: 100%;
  box-shadow: var(--cc-surface-shadow);
  transition: box-shadow var(--transition), transform var(--transition);
}

.cc-price-card:hover {
  box-shadow: var(--cc-surface-shadow-hover);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .cc-price-card {
    transition: box-shadow var(--transition);
  }

  .cc-price-card:hover {
    transform: none;
  }
}

.cc-price-card-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 14px;
  background: var(--cc-purple);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
}

.cc-price-card-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 8px 0 12px;
  color: var(--color-text);
}

.cc-price-card-price {
  margin: 0 0 8px;
  font-size: 1rem;
  color: var(--color-text-secondary);
}

.cc-price-card-price-num {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text);
}

.cc-price-card-note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

@media (min-width: 900px) {
  .cc-pricing-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.cc-final-tagline {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin: 0 auto 28px;
  max-width: 520px;
}

.cc-target-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 8px;
}

@media (max-width: 640px) {
  .cc-target-grid {
    grid-template-columns: 1fr;
  }
}

/* 타겟 섹션 제목: 가운데 + 하단 여백 */
.cc-target-section-h2 {
  margin-bottom: 20px;
}

.cc-target-box {
  padding: 20px 22px;
  border-radius: var(--cc-surface-radius);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  box-shadow: var(--cc-surface-shadow);
}

.cc-target-box h3 {
  font-size: 1rem;
  margin: 0 0 12px;
  font-weight: 700;
}

.cc-target-box--no {
  border-style: dashed;
  opacity: 0.95;
}

.cc-target-box ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
}

.cc-target-box li {
  margin-bottom: 8px;
}

.cc-section-cta {
  text-align: center;
  margin-top: 28px;
}

/* ---------- 모바일·좁은 화면 (.cc-page) ---------- */

/* 가격 카드: 좁은 화면에서 1열로 읽기·터치 영역 확보 */
@media (max-width: 540px) {
  .cc-pricing-grid,
  .cc-pricing-grid--4 {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 히어로·최종 CTA 버튼: 뷰포트 폭에 맞춤 */
@media (max-width: 480px) {
  .cc-hero {
    padding: 40px 16px 56px;
  }

  .cc-section {
    padding: 56px 16px;
  }

  .cc-story-section {
    padding: 56px 16px 64px;
  }

  .cc-solution-section {
    padding: 48px 16px 56px;
  }

  .cc-howflow-section {
    padding: 48px 16px 56px;
  }

  .cc-hero-cta .btn-lg,
  #cta .cc-pricing .btn-xl {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* 커피챗 페이지 헤더: safe-area·CTA 버튼만 소폭 조정 (레이아웃은 styles.css와 동일) */
@media (max-width: 768px) {
  .cc-page .header-inner {
    padding: 12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
  }

  .cc-page .header-cta .btn {
    padding: 10px 14px;
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .cc-page .header-inner {
    padding: 12px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left));
  }

  .cc-page .header-cta .btn {
    padding: 9px 12px;
    font-size: 0.8125rem;
  }
}

/* 매우 좁은 폭: 가격 숫자 살짝 축소 */
@media (max-width: 360px) {
  .cc-price-card-price-num {
    font-size: 1.5rem;
  }
}

/* 타겟 박스 등 본문 내 링크 */
.cc-inline-link {
  color: var(--cc-purple);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cc-inline-link:hover {
  text-decoration-thickness: 2px;
}