/* ============================================
   솔루션 페이지 — 공통 + 페이지별 컬러 토큰
   - common-design.md / responsive.md 기준
   - 마케팅 / 공공·HR·복지 / 리서치 / API 연동 4종 페이지 공통 사용
   - 시안: Figma node 2103:5443 (마케팅) / 2103:4368 (복지) / 2103:3092 (리서치) / 2103:2786 (API)

   페이지 wrapper 에 .s-solution 와 페이지 변종(--marketing/--welfare/--research/--apiPlan) 부여하면
   --sol-* CSS variable 이 페이지별 컬러로 자동 치환되어 공통 컴포넌트가 그대로 동작.
   ============================================ */

/* ---- 페이지 wrapper 토큰 (디폴트: 마케팅 = blue) ---- */
.s-solution {
  --sol-primary:           #2D6BFF;
  --sol-primary-dark:      #2156D8;
  --sol-primary-tint-1:    #F5F8FF;   /* eyebrow chip bg, hero bg */
  --sol-primary-tint-2:    #EAF1FF;   /* badge bg, icon bg */
  --sol-primary-tint-3:    #DCE7FF;   /* hero chat card border */
  --sol-primary-on-dark:   #8AB2FF;   /* stats eyebrow/label */
  --sol-dark-1:            #0E1A3F;   /* stats grad start, cta grad start */
  --sol-dark-2:            #1B3A8C;   /* stats grad end */
  --sol-cta-grad-end:      #2D6BFF;
  --sol-hero-grad-end:     #FFFFFF;

  --sol-text-strong:       #0E1116;
  --sol-text-strong-2:     #2A2F3A;
  --sol-text-body:         #4B5260;
  --sol-text-muted:        #6B7280;
  --sol-text-faint:        #9AA1AC;
  --sol-border-1:          #E7E9EE;
  --sol-border-2:          #F0F2F5;
  --sol-surface-1:         #F4F5F7;
  --sol-surface-2:         #F7F8FA;
  --sol-white:             #FFFFFF;

  display: block;
  background: var(--sol-white);
  color: var(--sol-text-strong);
  font-family: "Pretendard Variable", Pretendard, Inter, "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.01em;
}
.s-solution--welfare {
  --sol-primary:           #E07A1A;
  --sol-primary-dark:      #B86012;
  --sol-primary-tint-1:    #FFF8F0;
  --sol-primary-tint-2:    #FFF1DF;
  --sol-primary-tint-3:    #FFE0BB;
  --sol-primary-on-dark:   #FFC084;
  --sol-dark-1:            #2A1605;
  --sol-dark-2:            #5B2E0A;
  --sol-cta-grad-end:      #E07A1A;
  --sol-hero-grad-end:     #FFFFFF;
}
.s-solution--research {
  --sol-primary:           #1E7D52;
  --sol-primary-dark:      #1F5E3D;
  --sol-primary-tint-1:    #E6F4ED;
  --sol-primary-tint-2:    #BFE4CF;
  --sol-primary-tint-3:    #D9EFE3;
  --sol-primary-on-dark:   #6BD49A;
  --sol-dark-1:            #0B2418;
  --sol-dark-2:            #14422A;
  --sol-cta-grad-end:      #2D9D70;
  --sol-hero-grad-end:     #FFFFFF;
}
.s-solution--apiPlan {
  --sol-primary:           #2D6BFF;
  --sol-primary-dark:      #2156D8;
  --sol-primary-tint-1:    #F5F8FF;
  --sol-primary-tint-2:    #EAF1FF;
  --sol-primary-tint-3:    #E0EAFF;
  --sol-primary-on-dark:   #8AB2FF;
  --sol-dark-1:            #06102E;
  --sol-dark-2:            #1B3A8C;
  --sol-cta-grad-end:      #2D6BFF;
}

/* ---- 솔루션 페이지 안 글로벌 reset ----
   :where() 로 감싸서 specificity 를 0 으로 만든다.
   그러지 않으면 `.s-solution ul` 등이 (0,1,1) 로 `.c-sol-hero__kpis { padding-top: 29 }` (0,1,0) 보다 높아
   padding 이 0 으로 reset 되어 사라진다. 마찬가지로 `.s-solution a { color: inherit }` 도 (0,1,1) 라
   `.c-sol-btn--dark { color: #fff }` (0,1,0) 보다 높아 버튼 글자색이 inherit 됨. */
:where(.s-solution) h1,
:where(.s-solution) h2,
:where(.s-solution) h3,
:where(.s-solution) h4,
:where(.s-solution) p,
:where(.s-solution) ul,
:where(.s-solution) ol,
:where(.s-solution) li {
  margin: 0; padding: 0;
}
:where(.s-solution) ul,
:where(.s-solution) ol { list-style: none; }
:where(.s-solution) a { color: inherit; text-decoration: none; }
:where(.s-solution) img,
:where(.s-solution) svg { display: block; max-width: 100%; }
:where(.s-solution) * { box-sizing: border-box; }

/* ---- 섹션 공통 inner (시안: viewport 1905 - px 360.5 * 2 = 1184 콘텐츠) ---- */
.s-solution__inner {
  width: 100%;
  max-width: calc(1184px + 48px);
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

/* ============================================
   공통 부품 — eyebrow chip, kicker, pill button
   ============================================ */
.c-sol-eyebrow-chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;       /* flex column 부모의 stretch 무력화 — chip 이 글자 폭만 차지하도록 */
  gap: 6px;
  padding: 8px 16px;
  background: var(--sol-primary-tint-2);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--sol-primary);
  line-height: 1.4;
  width: auto;
}
.c-sol-eyebrow-chip::before {
  /* 시안: 사각형 6×6, radius 3 (원 아님) */
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 3px;
  background: var(--sol-primary);
}
.c-sol-kicker {
  font-size: 12px;
  font-weight: 700;
  color: var(--sol-primary);
  letter-spacing: 2.16px;
  text-transform: uppercase;
  line-height: 1.5;
}

/* 시안 정확값 (마케팅 보고서 § 1 / § 7 인용):
   padding 15/25, radius 999, line-height 14
   weight 700, font-size 13.5~13.8 (변종별), border 1px (기본 transparent) */
.c-sol-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 25px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 14px;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease;
}
.c-sol-btn:hover { transform: translateY(-1px); }

/* 시안: Hero 1차 CTA "시작하기" — 검정 pill, 텍스트 13.8px white */
.c-sol-btn--dark {
  background: #0E1116;
  border-color: transparent;
  color: #FFFFFF;
  font-size: 13.8px;
}
/* 시안: Hero 2차 CTA "소개서 받기" — 흰 pill, border #E7E9EE, 텍스트 13.6px #0E1116 */
.c-sol-btn--outline {
  background: #FFFFFF;
  border-color: #E7E9EE;
  color: #0E1116;
  font-size: 13.6px;
}
/* 시안: CTA 박스 1차 "서비스 소개서 받기" — 반투명, border rgba32, 텍스트 13.5px white */
.c-sol-btn--ghost-light {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.32);
  color: #FFFFFF;
  font-size: 13.5px;
}
/* 시안: CTA 박스 2차 "상담 신청" — 흰 pill, 텍스트 13.7px #0E1116 */
.c-sol-btn--white {
  background: #FFFFFF;
  border-color: transparent;
  color: #0E1116;
  font-size: 13.7px;
}
/* API Hero 2차 CTA — bg primary, border primary-dark, color white */
.c-sol-btn--primary {
  background: var(--sol-primary);
  border-color: var(--sol-primary-dark);
  color: var(--sol-white);
  font-size: 13.7px;
}

/* ============================================
   § 1. HERO — 좌측 카피 + CTA + KPI(3종) / 우측 슬롯(채팅카드 등)
   ============================================ */
/* 시안: pt 96 / pb 120 / px 360.5 (max-w 1232 + 좌우 자동) */
.c-sol-hero {
  position: relative;
  padding: 96px 24px 120px;
  background:
    radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--sol-primary) 14%, transparent) 0%, transparent 50%),
    linear-gradient(180deg, var(--sol-primary-tint-1) 0%, var(--sol-hero-grad-end) 100%);
  overflow: hidden;
}
/* 시안: grid 1.05fr : 1fr, gap-x 48, h 494.03 */
.c-sol-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  min-height: 494.03px;
}
/* 시안: 좌측 컬럼 자식 사이 균등 gap 21.4 */
.c-sol-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 21.4px;
}
/* 시안: 56.4 / lh 69 / ls -2.28 / weight 800 */
.c-sol-hero__title {
  font-size: 56.4px;
  font-weight: 800;
  line-height: 69px;
  letter-spacing: -2.28px;
  color: var(--sol-text-strong);
  margin: 0;
}
.c-sol-hero__title em {
  font-style: normal;
  color: var(--sol-primary);
}
/* 시안: 15.9 / lh 28.9 / weight 400 / color #4B5260 / max-w 540 */
.c-sol-hero__subtitle {
  font-size: 15.9px;
  font-weight: 400;
  line-height: 28.9px;
  color: var(--sol-text-body);
  max-width: 540px;
  margin: 0;
}
/* 시안: CTA 그룹 h 93.2 (h 44 padding 위/아래 24.6 포함), gap 12 */
.c-sol-hero__ctas {
  display: flex;
  gap: 12px;
}

/* 시안 정확값 (design_context 코드):
   border-t 1px #E7E9EE, pt 29, gap 36 (item 사이 column gap),
   각 item self-stretch (cross-axis), 내부 column gap 3 (value-label) */
.c-sol-hero__kpis {
  display: flex;
  gap: 36px;
  padding-top: 29px;
  border-top: 1px solid #E7E9EE;
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.c-sol-hero__kpi {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
/* 시안: 18 / lh 27 / ls -0.36 / weight 800 (Extra Bold) */
.c-sol-hero__kpi-value {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.36px;
  line-height: 27px;
  color: var(--sol-text-strong);
}
/* 시안: 11.9 / lh 18.75 / weight 400 / color #6B7280 */
.c-sol-hero__kpi-label {
  font-size: 11.9px;
  font-weight: 400;
  line-height: 18.75px;
  color: var(--sol-text-muted);
}

/* Hero 우측 슬롯 (카드 placement) */
.c-sol-hero__visual {
  position: relative;
  height: 480px;
}

/* 채팅 카드 (마케팅 hero) */
.c-sol-chat-card {
  position: absolute;
  width: 320px;
  padding: 18px;
  background: var(--sol-white);
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(14, 17, 22, 0.04),
    0 30px 60px -28px rgba(14, 17, 22, 0.18);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.c-sol-chat-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--sol-border-2);
}
.c-sol-chat-card__app-icon {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
}
.c-sol-chat-card__app-icon--kakao { background: #FEE500; color: #0E1116; }
.c-sol-chat-card__app-icon--insta {
  background: linear-gradient(135deg, #FBC400 0%, #DD2A7B 50%, #515BD4 100%);
  color: #fff;
}
.c-sol-chat-card__meta { display: flex; flex-direction: column; gap: 2px; }
.c-sol-chat-card__title {
  font-size: 13px;
  font-weight: 800;
  color: var(--sol-text-strong);
  line-height: 1.5;
}
.c-sol-chat-card__channel {
  font-size: 11px;
  font-weight: 400;
  color: var(--sol-text-muted);
  line-height: 1.3;
}
.c-sol-chat-card__highlight {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  background: var(--sol-primary-tint-1);
  border: 1px solid var(--sol-primary-tint-3);
  border-radius: 12px;
  color: var(--sol-primary);
  font-size: 12px;
  font-weight: 700;
}
.c-sol-chat-card__highlight-icon { font-size: 14px; }
.c-sol-chat-card__body {
  font-size: 12.3px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--sol-text-strong);
}
.c-sol-chat-card__cta {
  padding: 10px;
  background: var(--sol-primary);
  border-radius: 10px;
  color: var(--sol-white);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

/* 시안 좌표 (visual 영역 h 480 기준):
   카드 A: left -10, top 11 (top 2.29%), rotate -3
   카드 B: right -10, top 148 (top 30.84%), rotate +2
   카드 C: inset 65.99% 34.04% 3.42% 7.78% → top 317, right 약 95, bottom 16, left 약 22, rotate -1 */
.c-sol-hero__visual .c-sol-chat-card--a {
  left: -10px;
  top: 11px;
  transform: rotate(-3deg);
}
.c-sol-hero__visual .c-sol-chat-card--b {
  right: -10px;
  top: 148px;
  transform: rotate(2deg);
}
.c-sol-hero__visual .c-sol-chat-card--c {
  left: 22px;
  top: 317px;
  transform: rotate(-1deg);
  width: 280px;
}

/* ============================================
   Hero 우측 카드 변종 — 복지 페이지 전용
   - B Choice 옵션 카드 (4종 그리드, 1개 선택됨)
   - 진행바 카드 (장기 근속 / 성과 상여)
   ============================================ */
.c-sol-option-card,
.c-sol-progress-card {
  position: absolute;
  background: var(--sol-white);
  border-radius: 22px;
  box-shadow:
    0 0 0 1px rgba(14, 17, 22, 0.04),
    0 30px 60px -28px rgba(14, 17, 22, 0.18);
  padding: 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 옵션 카드 (4종 선택) */
.c-sol-option-card { width: 360px; }
.c-sol-option-card__kicker {
  font-size: 10px;
  font-weight: 800;
  color: var(--sol-primary);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.c-sol-option-card__title {
  font-size: 14px;
  font-weight: 800;
  color: var(--sol-text-strong);
  line-height: 1.45;
}
.c-sol-option-card__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.c-sol-option-card__item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--sol-text-strong);
  background: var(--sol-surface-1);
}
.c-sol-option-card__item--chicken { background: #FFD7B5; }
.c-sol-option-card__item--bakery  { background: #FFB5C5; }
.c-sol-option-card__item--coffee  {
  background: #A8C5FF;
  border: 2px solid var(--sol-primary);
}
.c-sol-option-card__item--voucher { background: #B8E8C8; }
.c-sol-option-card__check {
  position: absolute;
  top: 6px; right: 6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--sol-primary);
  color: var(--sol-white);
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 진행바 카드 */
.c-sol-progress-card { width: 280px; padding: 21px 22px; }
.c-sol-progress-card__kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.c-sol-progress-card__kicker--purple { color: #7B5CFF; }
.c-sol-progress-card__kicker--green  { color: #1E7D52; }
.c-sol-progress-card__bar {
  position: relative;
  height: 14px;
  border-radius: 7px;
  background: var(--sol-surface-1);
  overflow: hidden;
}
.c-sol-progress-card__bar-fill {
  position: absolute;
  inset: 0;
  border-radius: 7px;
}
.c-sol-progress-card__bar-fill--purple {
  background: linear-gradient(90deg, #C9A2FF 0%, #7B5CFF 100%);
}
.c-sol-progress-card__bar-fill--green {
  background: linear-gradient(90deg, #BFE4CF 0%, #1E7D52 100%);
}
.c-sol-progress-card__bar-knob {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 14px;
  border-radius: 7px;
  background: var(--sol-primary);
}
.c-sol-progress-card__title {
  font-size: 14px;
  font-weight: 800;
  color: var(--sol-text-strong);
  line-height: 1.4;
}
.c-sol-progress-card__caption {
  font-size: 11px;
  font-weight: 400;
  color: var(--sol-text-muted);
  line-height: 1.45;
}

/* Hero 우측 카드 — 복지 위치 변종 */
.c-sol-hero__visual--welfare .c-sol-option-card--main {
  left: 0; top: 0;
  transform: rotate(-2deg);
}
.c-sol-hero__visual--welfare .c-sol-progress-card--anniv {
  right: 0; top: 220px;
  transform: rotate(3deg);
}
.c-sol-hero__visual--welfare .c-sol-progress-card--perf {
  left: 32px; bottom: 0;
  transform: rotate(-2deg);
}

/* ============================================
   Hero 우측 카드 변종 — 리서치 페이지 전용
   - 설문 답례 (별 5개)
   - B Choice 작은
   - PIN 코드 (다크박스)
   ============================================ */
.c-sol-survey-card,
.c-sol-bchoice-mini,
.c-sol-pin-card {
  position: absolute;
  width: 280px;
  padding: 20px;
  background: var(--sol-white);
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(14, 17, 22, 0.04),
    0 30px 60px -28px rgba(14, 17, 22, 0.18);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.c-sol-survey-card__kicker,
.c-sol-bchoice-mini__kicker,
.c-sol-pin-card__kicker {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--sol-primary);
}
.c-sol-survey-card__title,
.c-sol-bchoice-mini__title,
.c-sol-pin-card__title {
  font-size: 14px;
  font-weight: 800;
  color: var(--sol-text-strong);
  line-height: 1.5;
}

/* 설문 답례 카드 */
.c-sol-survey-card__stars {
  display: flex;
  gap: 6px;
}
.c-sol-survey-card__star {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}
.c-sol-survey-card__star--on {
  background: var(--sol-primary);
  color: var(--sol-white);
}
.c-sol-survey-card__star--off {
  background: var(--sol-primary-tint-1);
  color: var(--sol-primary);
}
.c-sol-survey-card__scale {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.c-sol-survey-card__scale-item {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 11.8px;
  font-weight: 700;
  background: var(--sol-surface-1);
  color: var(--sol-text-muted);
}
.c-sol-survey-card__scale-item--active {
  background: var(--sol-primary-tint-1);
  color: var(--sol-primary);
}

/* B Choice 작은 카드 */
.c-sol-bchoice-mini__sub {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--sol-text-muted);
  line-height: 1.5;
}

/* PIN 코드 카드 */
.c-sol-pin-card__pin-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: #0E1A3F;
  border-radius: 8px;
}
.c-sol-pin-card__pin-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--sol-primary-on-dark);
  text-transform: uppercase;
}
.c-sol-pin-card__pin-value {
  font-family: "GulimChe", monospace;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--sol-white);
}
.c-sol-pin-card__caption {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--sol-text-muted);
}

/* Hero 우측 카드 위치 — 리서치 */
.c-sol-hero__visual--research .c-sol-survey-card  { left: 0;   top: 0;   transform: rotate(-2deg); }
.c-sol-hero__visual--research .c-sol-bchoice-mini { left: 32px; bottom: 0; transform: rotate(-3deg); }
.c-sol-hero__visual--research .c-sol-pin-card    { right: 0;  top: 180px; transform: rotate(3deg); }

/* ============================================
   § 2. USE CASES — EDITORIAL (좌측 헤더 + 우측 numbered article 3종)
   ============================================ */
/* 시안: bg white, py 96 / px 360.5 */
.c-sol-usecases {
  background: var(--sol-white);
  padding: 96px 24px;
}
/* 시안: grid 0.85fr : 1.15fr, gap 80, h 550, 좌측 self-start */
.c-sol-usecases__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 80px;
  align-items: start;   /* 시안: 좌측 헤더가 self-start (위 정렬). default stretch 면 헤더가 우측 article 전체 높이만큼 늘어남 */
}
/* 시안: 좌측 컬럼 gap 15.5, self-start */
.c-sol-usecases__head {
  display: flex;
  flex-direction: column;
  gap: 15.5px;
  align-self: start;
}
/* 시안: 41.6 / lh 51.92 / ls -1.1 / weight 800 */
.c-sol-usecases__title {
  font-size: 41.6px;
  font-weight: 800;
  letter-spacing: -1.1px;
  line-height: 51.92px;
  color: var(--sol-text-strong);
  margin: 0;
}
/* 시안: 15.1 / lh 24 / weight 400 / max-w 360 */
.c-sol-usecases__desc {
  font-size: 15.1px;
  font-weight: 400;
  line-height: 24px;
  color: var(--sol-text-body);
  max-width: 360px;
  margin: 0;
}
.c-sol-usecases__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 시안: 각 article h 183 (마지막 184), grid 48px : 1fr, gap 28, pt 37 pb 36, border-top */
.c-sol-usecases__item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 28px;
  padding: 37px 0 36px;
  border-top: 1px solid #E7E9EE;
}
.c-sol-usecases__item:last-child {
  border-bottom: 1px solid #E7E9EE;
}
/* 시안 design_context: 번호 자체 pt 4 (baseline 정렬용) — 16 / lh 24 / ls 0.64 / weight 800 */
.c-sol-usecases__number {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.64px;
  color: var(--sol-primary);
  line-height: 24px;
  padding-top: 4px;
}
/* 시안 design_context: gap 9.4 통일 (h3 → desc → badge 모두 9.4) + desc 자체에 pb 6.6 추가
   → desc-badge 시각 spacing = 9.4 + 6.6 = 16 으로 자연 보임 */
.c-sol-usecases__article-body {
  display: flex;
  flex-direction: column;
  gap: 9.4px;
  align-self: start;
}
/* 시안: 22.5 / lh 28.32 / ls -0.48 / weight 800 */
.c-sol-usecases__article-title {
  font-size: 22.5px;
  font-weight: 800;
  letter-spacing: -0.48px;
  line-height: 28.32px;
  color: var(--sol-text-strong);
  margin: 0;
}
/* 시안: 13.9 / lh 24.75 / weight 400 / max-w 460 / pb 6.6 (자체) */
.c-sol-usecases__article-desc {
  font-size: 13.9px;
  font-weight: 400;
  line-height: 24.75px;
  color: var(--sol-text-body);
  max-width: 460px;
  margin: 0;
  padding-bottom: 6.6px;
}
/* 시안: pill bg #F5F8FF, px 12 py 6, radius 999, 11.9 / lh 18.75 / weight 700 / #2156D8 */
.c-sol-usecases__article-badge {
  align-self: flex-start;
  padding: 6px 12px;
  background: var(--sol-primary-tint-1);
  border-radius: 999px;
  font-size: 11.9px;
  font-weight: 700;
  line-height: 18.75px;
  color: var(--sol-primary-dark);
}

/* ============================================
   § 3. STATS — DARK BAND (4컬럼 통계)
   ============================================ */
/* 시안: py 96 / px 336.5, max-w 1232, gradient + radial overlay */
.c-sol-stats {
  padding: 96px 24px;
  background:
    radial-gradient(ellipse at 80% 20%, color-mix(in srgb, var(--sol-primary-on-dark) 18%, transparent) 0%, transparent 50%),
    linear-gradient(180deg, var(--sol-dark-1) 0%, var(--sol-dark-2) 100%);
  color: var(--sol-white);
}
/* 시안: 컨테이너 gap 80 (헤더 ~ grid 사이) */
.c-sol-stats__inner {
  display: flex;
  flex-direction: column;
  gap: 80px;
}
/* 시안: 헤더 그룹 items-center gap 15.3 */
.c-sol-stats__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 15.3px;
}
.c-sol-stats__kicker {
  color: var(--sol-primary-on-dark);
}
/* 시안: 45.2 (마케팅) ~ 46 / lh 56.64 / ls -1.2 / weight 800 / white */
.c-sol-stats__title {
  font-size: 45.2px;
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 56.64px;
  color: var(--sol-white);
  margin: 0;
}
/* 시안: 15.9 / lh 28.9 / weight 400 / rgba(255,255,255,0.7) / max-w 560 */
.c-sol-stats__desc {
  font-size: 15.9px;
  font-weight: 400;
  line-height: 28.9px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 560px;
  margin: 0;
}
/* 시안: 4컬럼 grid, h 268.44, top/bottom border rgba 0.12 */
.c-sol-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  min-height: 268.44px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 시안 screenshot 측정: 셀 pt 44 / pb 68.2, 좌측 큰 숫자가 셀 좌측 시작에 거의 붙음 → pl 0 (첫 셀)
   2~4번째 셀은 vertical border 다음 32px 들여쓰기로 콘텐츠 시작 */
/* 시안 design_context 정확값:
   pr 33, py 44 (위/아래 동일 — pb 68.2는 잘못 측정한 값이었음),
   자식 gap 7.5 (이전 16.5 잘못), label 자체 pt 16.5 로 시각 spacing 분리 */
.c-sol-stats__cell {
  position: relative;
  padding: 44px 33px 44px 0;
  display: flex;
  flex-direction: column;
  gap: 7.5px;
}
.c-sol-stats__cell + .c-sol-stats__cell {
  padding-left: 32px;
}
.c-sol-stats__cell + .c-sol-stats__cell::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.1);
}
/* 시안: items-baseline, gap 4, pb 1.59 (Paragraph 자체) */
.c-sol-stats__value-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding-bottom: 1.59px;
}
/* 시안: 88 / lh 83.6 / ls -3.52 / weight 800 / white */
.c-sol-stats__value {
  font-size: 88px;
  font-weight: 800;
  letter-spacing: -3.52px;
  line-height: 83.6px;
  color: var(--sol-white);
}
/* 시안: 32 / lh 30.4 / weight 700 / primary-on-dark */
.c-sol-stats__unit {
  font-size: 32px;
  font-weight: 700;
  line-height: 30.4px;
  color: var(--sol-primary-on-dark);
}
/* 시안: 13.2 / lh 21 / weight 700 / primary-on-dark, 자체 pt 16.5 (위 spacing 확보) */
.c-sol-stats__label {
  font-size: 13.2px;
  font-weight: 700;
  line-height: 21px;
  color: var(--sol-primary-on-dark);
  padding-top: 16.5px;
}
/* 시안: 12.6 / lh 20.93 / weight 400 / rgba(255,255,255,0.62) / max-w 240 / w 240 */
.c-sol-stats__detail {
  font-size: 12.6px;
  font-weight: 400;
  line-height: 20.93px;
  color: rgba(255, 255, 255, 0.62);
  max-width: 240px;
  width: 240px;
  margin: 0;
}

/* ============================================
   § B Choice (마케팅) — 좌측 USP 리스트 / 우측 채널 4카드 2x2
   ============================================ */
/* 시안: bg white, py 96 / px 360.5 */
.c-sol-channels {
  padding: 96px 24px;
  background: var(--sol-white);
}
/* 시안: grid 1fr : 1fr, gap 80, h 600 */
.c-sol-channels__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.c-sol-channels__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* 시안: 39.7 / lh 49.56 / ls -1.05 / weight 800 */
.c-sol-channels__title {
  font-size: 39.7px;
  font-weight: 800;
  letter-spacing: -1.05px;
  line-height: 49.56px;
  color: var(--sol-text-strong);
  margin: 0;
}
/* 시안: 15.8 / lh 28.9 / weight 400 */
.c-sol-channels__desc {
  font-size: 15.8px;
  font-weight: 400;
  line-height: 28.9px;
  color: var(--sol-text-body);
  margin: 0;
}
/* 시안: list pt 17.2 */
.c-sol-channels__list {
  display: flex;
  flex-direction: column;
  padding-top: 17.2px;
  padding-left: 0;
  margin: 0;
  list-style: none;
}
/* 시안 design_context 정확값: pt 17 pb 16, h 73, gap-x 12 gap-y 12, grid 24px 1fr, row 22.5 */
.c-sol-channels__list-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  grid-template-rows: 22.5px;
  gap: 12px;
  padding: 17px 0 16px;
  border-top: 1px solid #E7E9EE;
  height: 73px;
  box-sizing: border-box;
}
/* 시안: 번호 self-start, 자체 pb 1.5 (baseline 정렬용) — 14 / lh 21 / weight 800 / primary */
.c-sol-channels__list-num {
  align-self: start;
  font-size: 14px;
  font-weight: 800;
  line-height: 21px;
  color: var(--sol-primary);
  padding-bottom: 1.5px;
}
/* 시안: content 자체 gap 0 (title + desc 직접 stack) — text 14.2 / lh 22.5 */
.c-sol-channels__list-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-self: start;
}
.c-sol-channels__list-title {
  font-size: 14.2px;
  font-weight: 600;
  line-height: 22.5px;
  color: var(--sol-text-strong);
}
.c-sol-channels__list-desc {
  font-size: 14.2px;
  font-weight: 400;
  line-height: 22.5px;
  color: var(--sol-text-strong);
}

/* 시안: 우측 2x2 grid, gap 16, rows 238.78 (각 카드 h 238.78), 총 h 493.78 */
.c-sol-channels__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 시안: bg white, border 1px #E7E9EE, radius 18, padding 29/25, gap 14, h 238.78 */
.c-sol-channel-card {
  background: var(--sol-white);
  border: 1px solid #E7E9EE;
  border-radius: 18px;
  padding: 29px 25px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  min-height: 238.78px;
}
/* 시안: 52x52 radius 14, font 24 lh normal */
.c-sol-channel-card__icon {
  width: 52px; height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 24px;
  line-height: normal;
}
.c-sol-channel-card__icon--peach { background: #FFF4DA; color: #B4831E; }
.c-sol-channel-card__icon--kakao { background: #FEE500; color: #000000; font-weight: 800; }
.c-sol-channel-card__icon--pink  { background: #FCE7F3; color: #BE185D; }
.c-sol-channel-card__icon--blue  { background: #EAF1FF; color: #2D6BFF; }
/* 시안: 15.9 ~ 16.2 / weight 800 / text-strong */
.c-sol-channel-card__title {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--sol-text-strong);
  margin: 0;
}
/* 시안: 13.1 / lh 22.4 / weight 400 / text-body */
.c-sol-channel-card__desc {
  font-size: 13.1px;
  font-weight: 400;
  line-height: 22.4px;
  color: var(--sol-text-body);
  margin: 0;
}
.c-sol-channel-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 auto 0;
  margin-top: auto;
  padding: 0;
  list-style: none;
}
/* 시안: bg #EAF1FF, padding 4/10, radius 999, font 11.4 / weight 600 / #2D6BFF */
.c-sol-channel-card__tag {
  padding: 4px 10px;
  background: #EAF1FF;
  border-radius: 999px;
  font-size: 11.4px;
  font-weight: 600;
  line-height: 1.5;
  color: #2D6BFF;
}

/* ============================================
   § B Choice (복지) — 좌측 카피·리스트 / 우측 폰 mockup (4종 옵션)
   ============================================ */
.c-sol-bchoice {
  padding: 96px 24px;
  background: var(--sol-primary-tint-1);
}
.c-sol-bchoice__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.c-sol-bchoice__head { display: flex; flex-direction: column; gap: 16px; }
.c-sol-bchoice__title {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1.05px;
  line-height: 1.25;
  color: var(--sol-text-strong);
  margin-top: 8px;
}
.c-sol-bchoice__desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.82;
  color: var(--sol-text-body);
}
.c-sol-bchoice__list {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}
.c-sol-bchoice__list-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--sol-border-1);
  align-items: center;
}
.c-sol-bchoice__list-num {
  font-size: 14px;
  font-weight: 800;
  color: var(--sol-primary);
}
.c-sol-bchoice__list-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--sol-text-strong);
  line-height: 1.6;
}

/* 폰 mockup */
.c-sol-phone {
  width: 320px;
  margin: 0 auto;
  background: var(--sol-text-strong);
  border-radius: 44px;
  padding: 14px;
  box-shadow: 0 40px 80px -40px rgba(14, 17, 22, 0.4);
  position: relative;
}
.c-sol-phone__notch {
  position: absolute;
  left: 50%; top: 18px;
  transform: translateX(-50%);
  width: 110px; height: 28px;
  background: var(--sol-text-strong);
  border-radius: 14px;
  z-index: 2;
}
.c-sol-phone__screen {
  background: var(--sol-white);
  border-radius: 32px;
  padding: 50px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.c-sol-phone__title {
  font-size: 12.3px;
  font-weight: 800;
  text-align: center;
  color: var(--sol-text-strong);
}
.c-sol-phone__sub {
  font-size: 10.3px;
  font-weight: 400;
  text-align: center;
  color: var(--sol-text-muted);
  margin-bottom: 8px;
}
.c-sol-phone__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.c-sol-phone__item {
  position: relative;
  padding: 13px;
  border-radius: 14px;
  background: linear-gradient(130deg, #FFFFFF, #FAFAFA);
  border: 1px solid var(--sol-border-1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.c-sol-phone__item--selected {
  border-color: var(--sol-primary);
  border-width: 1px;
}
.c-sol-phone__item-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background: var(--sol-surface-1);
  object-fit: cover;
  display: block;
}
.c-sol-phone__item-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--sol-text-strong);
  text-align: center;
}
.c-sol-phone__check {
  position: absolute;
  top: 8px; right: 8px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--sol-primary);
  color: var(--sol-white);
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.c-sol-phone__cta {
  margin-top: 8px;
  padding: 12px;
  background: var(--sol-text-strong);
  border-radius: 12px;
  color: var(--sol-white);
  font-size: 12.7px;
  font-weight: 700;
  text-align: center;
}

/* ============================================
   § Date-based Auto Send (복지) — 좌측 캘린더 / 우측 카피 + 체크리스트 4종
   ============================================ */
.c-sol-calendar {
  padding: 96px 24px;
  background: var(--sol-white);
}
.c-sol-calendar__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}
.c-sol-calendar__card {
  background: linear-gradient(180deg, var(--sol-primary-tint-1) 0%, var(--sol-white) 100%);
  border: 1px solid var(--sol-border-1);
  border-radius: 22px;
  padding: 29px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.c-sol-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.c-sol-calendar__month {
  font-size: 18px;
  font-weight: 800;
  color: var(--sol-text-strong);
}
.c-sol-calendar__nav { display: flex; gap: 6px; }
.c-sol-calendar__nav-btn {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid var(--sol-border-1);
  background: var(--sol-white);
  color: var(--sol-text-muted);
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.c-sol-calendar__img {
  width: 100%;
  border-radius: 8px;
  display: block;
}

.c-sol-calendar__copy { display: flex; flex-direction: column; gap: 16px; }
.c-sol-calendar__title {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1.05px;
  line-height: 1.25;
  color: var(--sol-text-strong);
  margin-top: 8px;
}
.c-sol-calendar__desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.82;
  color: var(--sol-text-body);
}
.c-sol-calendar__checks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
  margin-top: 8px;
}
.c-sol-calendar__check-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.c-sol-calendar__check-mark {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--sol-primary-tint-2);
  color: var(--sol-primary);
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.c-sol-calendar__check-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--sol-text-strong);
}

/* ============================================
   § Catalog (리서치) — 좌측 헤더+가격슬라이더 / 우측 8장 카드 4x2 + 차트
   ============================================ */
.c-sol-catalog {
  padding: 96px 24px;
  background: var(--sol-surface-1);
}
.c-sol-catalog__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 80px;
  align-items: start;
}
.c-sol-catalog__head { display: flex; flex-direction: column; gap: 16px; }
.c-sol-catalog__title {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1.05px;
  line-height: 1.25;
  color: var(--sol-text-strong);
  margin-top: 8px;
}
.c-sol-catalog__desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.82;
  color: var(--sol-text-body);
  max-width: 420px;
}

.c-sol-catalog__slider {
  margin-top: 16px;
  padding: 21px 25px;
  background: var(--sol-surface-1);
  border: 1px solid var(--sol-primary-tint-3);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.c-sol-catalog__slider-track {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--sol-primary-tint-2) 0%, var(--sol-primary) 100%);
}
.c-sol-catalog__slider-handle {
  position: absolute;
  top: 50%;
  width: 16px; height: 16px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--sol-white);
  border: 2px solid var(--sol-primary);
}
.c-sol-catalog__slider-handle--start { left: 0; transform: translateX(-50%); }
.c-sol-catalog__slider-handle--end   { right: 0; transform: translateX(50%); }
.c-sol-catalog__slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: var(--sol-primary-dark);
}

.c-sol-catalog__right {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.c-sol-catalog__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.c-sol-catalog__card {
  background: var(--sol-white);
  border: 1px solid var(--sol-border-1);
  border-radius: 14px;
  padding: 17px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.c-sol-catalog__card-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--sol-surface-1);
  overflow: hidden;
  margin-bottom: 6px;
}
.c-sol-catalog__card-icon img { width: 100%; height: 100%; object-fit: cover; }
.c-sol-catalog__card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--sol-text-strong);
  line-height: 1.5;
}
.c-sol-catalog__card-price {
  font-size: 11px;
  font-weight: 400;
  color: var(--sol-text-muted);
}

/* 응답률 차트 */
.c-sol-catalog__chart {
  background: var(--sol-white);
  border: 1px solid var(--sol-border-1);
  border-radius: 18px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.c-sol-catalog__chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.c-sol-catalog__chart-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--sol-text-strong);
}
.c-sol-catalog__chart-meta {
  font-size: 11px;
  font-weight: 400;
  color: var(--sol-text-muted);
}
.c-sol-catalog__bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.c-sol-catalog__bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 48px;
  gap: 12px;
  align-items: center;
}
.c-sol-catalog__bar-label {
  font-size: 12px;
  font-weight: 400;
  color: var(--sol-text-strong-2);
}
.c-sol-catalog__bar-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: var(--sol-surface-1);
  overflow: hidden;
}
.c-sol-catalog__bar-fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--sol-primary) 80%, white) 0%, var(--sol-primary) 100%);
}
.c-sol-catalog__bar-fill--muted { background: #C7CCD4; }
.c-sol-catalog__bar-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--sol-text-strong);
  text-align: right;
}
.c-sol-catalog__chart-footer {
  padding-top: 12px;
  border-top: 1px dashed var(--sol-border-1);
  font-size: 11px;
  font-weight: 400;
  color: var(--sol-text-muted);
}

/* ============================================
   § Comparison (리서치) — 좌/우 비교 + 가운데 VS 뱃지
   ============================================ */
.c-sol-comparison {
  padding: 96px 24px;
  background: var(--sol-white);
}
.c-sol-comparison__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 11px;
  margin-bottom: 48px;
}
.c-sol-comparison__title {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1.05px;
  line-height: 1.25;
  color: var(--sol-text-strong);
}
.c-sol-comparison__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.c-sol-comparison__vs {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--sol-white);
  border: 1px solid var(--sol-border-1);
  box-shadow: 0 6px 9px rgba(14, 17, 22, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--sol-text-muted);
  z-index: 2;
}

.c-sol-comp-card {
  padding: 41px;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.c-sol-comp-card--old {
  background: var(--sol-white);
  border: 1px solid var(--sol-border-1);
}
.c-sol-comp-card--new {
  background: linear-gradient(135deg, var(--sol-dark-2) 0%, var(--sol-primary) 100%);
  border: 1px solid var(--sol-primary-dark);
  box-shadow: 0 20px 60px -20px color-mix(in srgb, var(--sol-primary) 40%, transparent);
  color: var(--sol-white);
}
.c-sol-comp-card__chip {
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.15px;
  text-transform: uppercase;
}
.c-sol-comp-card--old .c-sol-comp-card__chip {
  background: var(--sol-surface-1);
  color: var(--sol-text-muted);
}
.c-sol-comp-card--new .c-sol-comp-card__chip {
  background: rgba(255, 255, 255, 0.15);
  color: var(--sol-primary-tint-2);
}
.c-sol-comp-card__title {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.55px;
  line-height: 1.27;
  margin-top: 4px;
}
.c-sol-comp-card--old .c-sol-comp-card__title { color: var(--sol-text-strong); }
.c-sol-comp-card--new .c-sol-comp-card__title { color: var(--sol-white); }
.c-sol-comp-card__desc {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  margin-top: 4px;
}
.c-sol-comp-card--old .c-sol-comp-card__desc { color: var(--sol-text-muted); }
.c-sol-comp-card--new .c-sol-comp-card__desc { color: rgba(255, 255, 255, 0.7); }

.c-sol-comp-card__rows {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
}
.c-sol-comp-card__row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 16px 0;
}
.c-sol-comp-card--old .c-sol-comp-card__row {
  border-top: 1px solid var(--sol-border-2);
}
.c-sol-comp-card--new .c-sol-comp-card__row {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.c-sol-comp-card__row-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.6;
}
.c-sol-comp-card--old .c-sol-comp-card__row-label { color: var(--sol-text-muted); }
.c-sol-comp-card--new .c-sol-comp-card__row-label { color: var(--sol-primary-on-dark); }
.c-sol-comp-card__row-value {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
  display: flex;
  align-items: center;
  gap: 8px;
}
.c-sol-comp-card--old .c-sol-comp-card__row-value { color: var(--sol-text-strong-2); }
.c-sol-comp-card--new .c-sol-comp-card__row-value { color: var(--sol-white); }
.c-sol-comp-card__check {
  color: var(--sol-primary-on-dark);
  font-weight: 800;
  font-size: 14.5px;
}

/* ============================================
   § Features Timeline — 3-step 가로 (운영 업무)
   ============================================ */
/* 시안: py 140 / px 336.5, max-w 1232, bg primary-tint-1 */
.c-sol-timeline {
  padding: 140px 24px;
  background: var(--sol-primary-tint-1);
}
/* 시안: 컨테이너 gap 80 (헤더 → steps) */
.c-sol-timeline__inner {
  display: flex;
  flex-direction: column;
  gap: 80px;
}
/* 시안: 상단 헤더 자체가 2 컬럼 grid (좌측 카피, 우측 빈 max-w 460), gap 64, h 140.34, 좌측 self-end */
.c-sol-timeline__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
  min-height: 140.34px;
}
.c-sol-timeline__head-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: end;
}
/* 시안: 39.5 / lh 49.56 / ls -1.05 / weight 800 */
.c-sol-timeline__title {
  font-size: 39.5px;
  font-weight: 800;
  letter-spacing: -1.05px;
  line-height: 49.56px;
  color: var(--sol-text-strong);
  margin: 0;
}

/* 시안: 3컬럼 grid, h 247.8, gap 0 */
.c-sol-timeline__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 시안: 가로 라인 h 2px top 30 bg border-1 */
.c-sol-timeline__steps::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 30px;
  height: 2px;
  background: #E7E9EE;
  z-index: 0;
}
/* 시안: 오버레이 라인 — 좌 2/3 채우는 gradient primary → transparent */
.c-sol-timeline__steps::after {
  content: "";
  position: absolute;
  left: 0; top: 30px;
  width: 66.66%;
  height: 2px;
  background: linear-gradient(to right, var(--sol-primary) 0%, var(--sol-primary) 50%, color-mix(in srgb, var(--sol-primary) 0%, transparent) 100%);
  z-index: 1;
}

/* 시안: step1 pr 24, step2/3 pl 32 pr 24, 내부 gap 7 */
.c-sol-timeline__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0 24px 0 0;
  z-index: 2;
}
.c-sol-timeline__step + .c-sol-timeline__step {
  padding-left: 32px;
}

/* 시안: 60x60 border 2px primary bg white padding 2 radius 30 */
.c-sol-timeline__node {
  position: relative;
  width: 60px; height: 60px;
  padding: 2px;
  border: 2px solid var(--sol-primary);
  background: var(--sol-white);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.c-sol-timeline__node img {
  width: 24px;
  height: 24px;
}
/* 시안: 24x24 radius 12 bg primary, font 11 / lh 16.5 / weight 800 / white, right -8 top -8 */
.c-sol-timeline__badge {
  position: absolute;
  right: -8px; top: -8px;
  width: 24px; height: 24px;
  background: var(--sol-primary);
  color: var(--sol-white);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  line-height: 16.5px;
}

/* 시안: 12 / lh 18 / ls 1.2 / weight 700 / primary uppercase, pt 21 */
.c-sol-timeline__step-kicker {
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 1.2px;
  color: var(--sol-primary);
  text-transform: uppercase;
  padding-top: 14px;
}
/* 시안: 20.6 / lh 25.96 / ls -0.44 / weight 800 */
.c-sol-timeline__step-title {
  font-size: 20.6px;
  font-weight: 800;
  letter-spacing: -0.44px;
  line-height: 25.96px;
  color: var(--sol-text-strong);
  margin: 0;
}
/* 시안: 13.6 / lh 23.93 / weight 400 / text-body / max-w 320 / white-space pre-line */
.c-sol-timeline__step-desc {
  font-size: 13.6px;
  font-weight: 400;
  line-height: 23.93px;
  color: var(--sol-text-body);
  max-width: 320px;
  white-space: pre-line;
  margin: 0;
}
/* 시안: bg surface-1, padding 6/12, radius 999, font 11.4 / lh 18 / weight 700 / text-strong-2 */
.c-sol-timeline__step-tag {
  align-self: flex-start;
  padding: 6px 12px;
  background: #F4F5F7;
  border-radius: 999px;
  font-size: 11.4px;
  font-weight: 700;
  line-height: 18px;
  color: #2A2F3A;
  margin-top: 4px;
}

/* ============================================
   § Testimonials — 비대칭 (좌 대형 1 + 우 소형 2)
   ============================================ */
/* 시안: py 96 / px 336.5 (마케팅) — 일부 페이지 py 140, primary-tint-1 배경 */
.c-sol-testi {
  padding: 96px 24px;
  background: var(--sol-primary-tint-1);
}
/* 시안: 컨테이너 gap 63.99 */
.c-sol-testi__inner {
  display: flex;
  flex-direction: column;
  gap: 63.99px;
}
/* 시안: 헤더 center, gap 11 */
.c-sol-testi__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 11px;
}
/* 시안: 40 / lh 49.56 / ls -1.05 / weight 800 */
.c-sol-testi__title {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1.05px;
  line-height: 49.56px;
  color: var(--sol-text-strong);
  margin: 0;
}

/* 시안: grid 1.4fr : 1fr, gap 24, h 511 */
.c-sol-testi__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}
/* 시안: 우측 컬럼 2행, gap 24, 각 행 243.5 */
.c-sol-testi__col-right {
  display: grid;
  grid-template-rows: 243.5px 243.5px;
  gap: 24px;
}

/* 시안 좌측 큰 카드: bg white, border 1px #E7E9EE, radius 28, padding 56.19 57 131.94 57, gap 36 */
.c-sol-testi-card {
  position: relative;
  background: var(--sol-white);
  border: 1px solid #E7E9EE;
  border-radius: 28px;
  padding: 56.19px 57px 131.94px 57px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  overflow: hidden;
}
/* 시안: 장식 큰 따옴표 — 180 / lh 180 / 700 / #F4F5F7, abs left 541.22 top 114 translate-y -50% */
.c-sol-testi-card::before {
  content: "\201C";
  position: absolute;
  left: 541px;
  top: 114px;
  transform: translateY(-50%);
  font-family: "Inter", "Pretendard Variable", serif;
  font-size: 180px;
  line-height: 180px;
  color: #F4F5F7;
  font-weight: 700;
  pointer-events: none;
  user-select: none;
}
/* 시안: 24.7 / lh 37.7 / ls -0.468 / weight 800 / text-strong / max-w 540 */
.c-sol-testi-card__quote {
  position: relative;
  z-index: 1;
  font-size: 24.7px;
  font-weight: 800;
  letter-spacing: -0.468px;
  line-height: 37.7px;
  color: var(--sol-text-strong);
  max-width: 540px;
  margin: 0;
}
/* 시안: pt 4, gap 14 */
.c-sol-testi-card__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 4px;
}
/* 시안: 48x48 radius 12, gradient 135deg #F4F5F7 → primary */
.c-sol-testi-card__logo {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #F4F5F7 0%, var(--sol-primary) 100%);
  color: var(--sol-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  line-height: 27px;
  flex-shrink: 0;
}
.c-sol-testi-card__brand-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* 시안: 14.4 / lh 22.5 / weight 700 / text-strong */
.c-sol-testi-card__brand-name {
  font-size: 14.4px;
  font-weight: 700;
  line-height: 22.5px;
  color: var(--sol-text-strong);
}
/* 시안: 11.7 / lh 18.75 / weight 400 / text-muted */
.c-sol-testi-card__brand-sub {
  font-size: 11.7px;
  font-weight: 400;
  line-height: 18.75px;
  color: var(--sol-text-muted);
}
/* 시안: border-top 1px #E7E9EE, pt 29, gap 36 */
.c-sol-testi-card__metrics {
  display: flex;
  gap: 36px;
  padding-top: 29px;
  border-top: 1px solid #E7E9EE;
  margin: 0;
  padding-left: 0;
  list-style: none;
}
/* 시안 design_context: metric 안 value-label gap 6 (이전 4 잘못) */
.c-sol-testi-card__metric {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* 시안: 32 / lh 32 / ls -0.64 / weight 800 / primary */
.c-sol-testi-card__metric-value {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.64px;
  line-height: 32px;
  color: var(--sol-primary);
}
/* 시안: 11.6 / lh 18 / weight 400 / text-muted */
.c-sol-testi-card__metric-label {
  font-size: 11.6px;
  font-weight: 400;
  line-height: 18px;
  color: var(--sol-text-muted);
}

/* 시안: 소형 카드 — h 243.5, 내부 모든 요소가 absolute 좌표 배치 */
.c-sol-testi-card--sm {
  position: relative;
  display: block;        /* flex 해제 — 자식이 absolute 라 부모 flex 무의미 */
  padding: 0;
  border-radius: 22px;
  height: 243.5px;
  overflow: hidden;
  gap: 0;
}
.c-sol-testi-card--sm::before { display: none; }
/* 시안: brand 영역 left 28 right 28 top 28 */
.c-sol-testi-card--sm .c-sol-testi-card__brand {
  position: absolute;
  left: 28px; right: 28px; top: 28px;
  padding-top: 0;
}
/* 시안: quote 영역 left 28 right 28 top 84.63 */
.c-sol-testi-card--sm .c-sol-testi-card__quote {
  position: absolute;
  left: 28px; right: 28px; top: 84.63px;
  font-size: 14.1px;
  font-weight: 700;
  letter-spacing: -0.18px;
  line-height: 23.25px;
  max-width: none;
}
/* 시안: 36x36 radius 9, font 13 / lh 19.5 / weight 800 */
.c-sol-testi-card--sm .c-sol-testi-card__logo {
  width: 36px; height: 36px;
  border-radius: 9px;
  font-size: 13px;
  line-height: 19.5px;
}
/* 시안: 12.8 / lh 20.25 / weight 700 (소형) */
.c-sol-testi-card--sm .c-sol-testi-card__brand-name {
  font-size: 12.9px;
  line-height: 20.25px;
}
/* 시안: 11.1 / lh 17.25 (소형) */
.c-sol-testi-card--sm .c-sol-testi-card__brand-sub {
  font-size: 11.1px;
  line-height: 17.25px;
}
/* 시안: pt 19, gap 23.99, abs 하단 위치 */
.c-sol-testi-card--sm .c-sol-testi-card__metrics {
  position: absolute;
  left: 28px; right: 28px; bottom: 28px;
  gap: 23.99px;
  padding-top: 19px;
  margin: 0;
}
/* 시안: 22 / lh 22 / weight 800 (소형, value) */
.c-sol-testi-card--sm .c-sol-testi-card__metric-value {
  font-size: 22px;
  letter-spacing: 0;
  line-height: 22px;
}
/* 시안: 10.8 / lh 16.5 (소형, label) */
.c-sol-testi-card--sm .c-sol-testi-card__metric-label {
  font-size: 10.8px;
  line-height: 16.5px;
}

/* ============================================
   § API 페이지 — Hero (다크 그라데이션 풀-스크린 + 배경 이미지)
   ============================================ */
.c-sol-api-hero {
  position: relative;
  padding: 96px 24px 120px;
  background:
    radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--sol-primary) 35%, transparent) 0%, transparent 60%),
    linear-gradient(135deg, var(--sol-dark-1) 0%, var(--sol-dark-2) 60%, var(--sol-primary) 100%);
  color: var(--sol-white);
  text-align: center;
  overflow: hidden;
  min-height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-sol-api-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1232px;
  width: 100%;
}
.c-sol-api-hero__kicker {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 8.4px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  margin-bottom: 40px;
}
.c-sol-api-hero__title {
  font-size: 120px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -5.4px;
  background: linear-gradient(180deg, #FFFFFF 0%, #B9CDFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 auto;
}
.c-sol-api-hero__desc {
  margin-top: 44px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}
.c-sol-api-hero__ctas {
  display: inline-flex;
  gap: 12px;
  margin-top: 48px;
  justify-content: center;
}
.c-sol-api-hero__cta--primary {
  background: var(--sol-white);
  color: #0E1A3F;
  border-color: transparent;
}
.c-sol-api-hero__cta--secondary {
  background: var(--sol-primary);
  color: var(--sol-white);
  border-color: var(--sol-primary-dark);
}

/* ============================================
   § API 주요 기능 — 4카드 2x2
   ============================================ */
.c-sol-api-feat {
  padding: 96px 24px;
  background: var(--sol-surface-2);
}
.c-sol-api-feat__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 48px;
}
.c-sol-api-feat__title {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -1.05px;
  line-height: 1.25;
  color: var(--sol-text-strong);
  margin-top: 8px;
}
.c-sol-api-feat__desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.78;
  color: var(--sol-text-strong-2);
}
.c-sol-api-feat__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.c-sol-api-feat__card {
  background: var(--sol-white);
  border: 1px solid var(--sol-border-1);
  border-radius: 22px;
  padding: 32px;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: start;
}
.c-sol-api-feat__icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--sol-primary-tint-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.c-sol-api-feat__icon img { width: 26px; height: 26px; }
.c-sol-api-feat__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.c-sol-api-feat__num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.72px;
  color: var(--sol-primary);
  text-transform: uppercase;
}
.c-sol-api-feat__name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--sol-text-strong);
  line-height: 1.4;
}
.c-sol-api-feat__detail {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--sol-text-body);
}
.c-sol-api-feat__endpoint {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--sol-surface-2);
  border: 1px solid var(--sol-border-1);
  border-radius: 8px;
  font-family: "JetBrains Mono", "Courier New", monospace;
}
.c-sol-api-feat__method {
  padding: 3px 8px;
  background: var(--sol-primary);
  color: var(--sol-white);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
}
.c-sol-api-feat__path {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--sol-text-strong);
}

/* ============================================
   § API 활용 방법 — CASE 01/02/03 (좌/우 교차 + 모바일 목업)
   ============================================ */
.c-sol-api-cases {
  padding: 96px 24px;
  background: var(--sol-white);
}
.c-sol-api-cases__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 48px;
}
.c-sol-api-cases__title {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -1.05px;
  line-height: 1.25;
  color: var(--sol-text-strong);
  margin-top: 8px;
}
.c-sol-api-cases__sub {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--sol-text-body);
}

.c-sol-api-case {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  padding: 56px;
  background: linear-gradient(180deg, var(--sol-primary-tint-1) 0%, var(--sol-white) 100%);
  border: 1px solid var(--sol-primary-tint-3);
  border-radius: 32px;
  margin-bottom: 32px;
  align-items: center;
}
.c-sol-api-case--reverse { direction: rtl; }
.c-sol-api-case--reverse > * { direction: ltr; }

.c-sol-api-case__copy { display: flex; flex-direction: column; gap: 8px; }
.c-sol-api-case__kicker {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.3px;
  color: var(--sol-primary);
  text-transform: uppercase;
}
.c-sol-api-case__title {
  margin-top: 14px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.25;
  color: var(--sol-text-strong);
}
.c-sol-api-case__sub {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sol-text-muted);
}
.c-sol-api-case__desc {
  margin-top: 20px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.78;
  color: var(--sol-text-body);
  white-space: pre-line;
}
.c-sol-api-case__checks {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.c-sol-api-case__check {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sol-text-strong);
}
.c-sol-api-case__check::before {
  content: "✓";
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--sol-primary);
  color: var(--sol-white);
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 모바일 목업 (CASE 01/02/03 우측 비주얼) */
.c-sol-api-mock {
  width: 280px;
  margin: 0 auto;
  background: var(--sol-text-strong);
  border-radius: 40px;
  padding: 14px;
  box-shadow: 0 30px 60px -28px rgba(14, 17, 22, 0.4);
  position: relative;
}
.c-sol-api-mock__notch {
  position: absolute;
  left: 50%; top: 18px;
  transform: translateX(-50%);
  width: 100px; height: 26px;
  background: var(--sol-text-strong);
  border-radius: 999px;
  z-index: 2;
}
.c-sol-api-mock__screen {
  position: relative;
  background: var(--sol-white);
  border-radius: 28px;
  padding: 50px 0 22px;
  height: 540px;
  overflow: hidden;
}
.c-sol-api-mock__time {
  position: absolute;
  left: 22px; top: 25px;
  font-size: 12px;
  font-weight: 700;
  color: var(--sol-text-strong);
}
.c-sol-api-mock__head-title {
  padding: 11px 0;
  border-bottom: 1px solid var(--sol-border-1);
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  color: var(--sol-text-strong);
}
.c-sol-api-mock__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* CASE 01 — 쿠폰함 카드 3개 (브랜드 로고 좌측 + 텍스트 + 하단 바코드) */
.c-sol-api-mock__coupon {
  position: relative;
  padding: 10px;
  border-radius: 12px;
  background: var(--sol-surface-2);
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  gap: 4px 10px;
  min-height: 73px;
}
.c-sol-api-mock__coupon-icon {
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--sol-white);
  padding: 4px;
  object-fit: contain;
  align-self: start;
}
.c-sol-api-mock__coupon-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 4px;
}
.c-sol-api-mock__coupon-brand {
  font-size: 12px;
  font-weight: 800;
  color: var(--sol-text-strong);
  line-height: 1.4;
}
.c-sol-api-mock__coupon-item {
  font-size: 10px;
  font-weight: 400;
  color: var(--sol-text-muted);
  line-height: 1.4;
}
.c-sol-api-mock__coupon-barcode {
  width: 150px;
  height: 12px;
  object-fit: contain;
  object-position: left;
  align-self: end;
  grid-column: 2;
}

/* CASE 02 — 리워드 (상단 배너 + 아이템 3개) */
.c-sol-api-mock__banner {
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--sol-primary) 0%, #6A4FFF 100%);
  color: var(--sol-white);
}
.c-sol-api-mock__banner-label {
  font-size: 10px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
}
.c-sol-api-mock__banner-title {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 900;
  color: var(--sol-white);
  line-height: 1.3;
}
.c-sol-api-mock__reward {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  background: var(--sol-surface-2);
}
.c-sol-api-mock__reward-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--sol-surface-1);
}
.c-sol-api-mock__reward-icon img { width: 100%; height: 100%; object-fit: cover; }
.c-sol-api-mock__reward-meta { display: flex; flex-direction: column; gap: 2px; }
.c-sol-api-mock__reward-brand {
  font-size: 11px;
  font-weight: 800;
  color: var(--sol-text-strong);
}
.c-sol-api-mock__reward-item {
  font-size: 10px;
  font-weight: 400;
  color: var(--sol-text-muted);
}
.c-sol-api-mock__reward-points {
  font-size: 11px;
  font-weight: 800;
  color: var(--sol-primary);
}

/* CASE 03 — 알림톡 카드 */
.c-sol-api-mock__notalk {
  padding: 14px;
  border-radius: 12px;
  background: #FFEB33;
}
.c-sol-api-mock__notalk-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.c-sol-api-mock__notalk-dot {
  width: 12px; height: 12px;
  border-radius: 3px;
  background: #C9DAE4;
  flex-shrink: 0;
}
.c-sol-api-mock__notalk-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.6);
}
.c-sol-api-mock__notalk-title {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 800;
  color: var(--sol-text-strong);
  line-height: 1.5;
}
.c-sol-api-mock__notalk-body {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.78);
}
.c-sol-api-mock__notalk-cta {
  margin-top: 16px;
  padding: 10px;
  background: var(--sol-white);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  color: var(--sol-text-strong);
  text-align: center;
}

/* ============================================
   § API 플랜 요금 — 시안 정확값 (design_context 코드 인용)
   - Section: gap 48, max-w 1280, px 24
   - Header: gap 18, h2 35.8 / lh 47.5 / ls -1.14
   - Table: grid 240 1fr 1fr, row 334, max-w 980, w 980
   - basic/pro 컬럼: pl 12 (col 사이 spacing)
   - 베이직 헤더: bg #0e1116, p 18, items-center, text 18 Bold white
   - 프로   헤더: bg #2d6bff, p 18, items-center, text 18 Bold white
   - 베이직 본문: bg #f2f3f5, pt 36 pb 60.25 px 24, gap 42, items-start
   - 프로   본문: bg #e8f0ff, pt 36 pb 56.5  px 24, gap 42, items-start
   - 모서리 radius 24 (column wrapper overflow-clip)
   ============================================ */
.c-sol-api-plan {
  padding: 96px 24px;
  background: var(--sol-white);
}
.c-sol-api-plan__head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 48px;
}
.c-sol-api-plan__title {
  font-size: 35.8px;
  font-weight: 800;
  letter-spacing: -1.14px;
  line-height: 47.5px;
  color: var(--sol-text-strong);
  margin: 0;
}
.c-sol-api-plan__table {
  display: grid;
  grid-template-columns: 240px 1fr 1fr;
  min-height: 334px;
  max-width: 980px;
  width: 100%;
  margin: 0 auto 48px;
}
.c-sol-api-plan__col {
  display: flex;
  flex-direction: column;
  align-self: start;
}

/* ---- 좌측 카테고리 컬럼 ----
   시안 시각 측정 (image 980×336):
   - cat 1 center y ≈ 100, cat 2 center y ≈ 195, cat 3 center y ≈ 290 → cat 사이 spacing 95 (균등)
   - 첫 cat top y ≈ 80 → padding-top 80
   - cat pill height ≈ 40 → 라벨 사이 gap = 95 − 40 = 55
   이렇게 해야 cat 라벨이 베이직/프로 본문 셀(headerline 옆이 아니라)과 vertical 정렬됨 */
.c-sol-api-plan__col--cat {
  align-items: flex-start;
  gap: 55px;
  padding-top: 80px;
}
.c-sol-api-plan__cat {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 24px;
  background: #0E1116;
  color: var(--sol-white);
  border-radius: 999px;
  font-size: 14.9px;
  font-weight: 600;
  width: 135px;
  text-align: center;
  line-height: normal;
}

/* ---- basic / pro 컬럼 ----
   시안: 컬럼 자체에 pl 12, 안의 Container 가 overflow-clip rounded 24 */
.c-sol-api-plan__col--basic,
.c-sol-api-plan__col--pro {
  padding-left: 12px;
}
.c-sol-api-plan__col-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  border-radius: 24px;
  width: 100%;
}
/* 헤더 행 (시안: p 18, items-center, text 18 Bold white) */
.c-sol-api-plan__head-row {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  font-family: "Inter", "Pretendard Variable", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--sol-white);
  line-height: normal;
}
.c-sol-api-plan__col--basic .c-sol-api-plan__head-row { background: #0E1116; }
.c-sol-api-plan__col--pro   .c-sol-api-plan__head-row { background: #2D6BFF; }

/* 본문 셀 영역 — 시안: basic bg #f2f3f5 pb 60.25, pro bg #e8f0ff pb 56.5 */
.c-sol-api-plan__col--basic .c-sol-api-plan__cells { background: #F2F3F5; padding-bottom: 60.25px; }
.c-sol-api-plan__col--pro   .c-sol-api-plan__cells { background: #E8F0FF; padding-bottom: 56.5px; }
.c-sol-api-plan__cells {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 42px;
  padding-top: 36px;
  padding-left: 24px;
  padding-right: 24px;
}
.c-sol-api-plan__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
  font-family: "Inter", "Pretendard Variable", sans-serif;
  color: #0E1116;
  line-height: 23.25px;
  text-align: center;
}
.c-sol-api-plan__cell--measure {
  /* "최대 N" 행 — 시안: items-end justify-center inline 2 span */
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  line-height: normal;
}
.c-sol-api-plan__cell-prefix {
  font-size: 15.5px;
  font-weight: 500;
  color: #0E1116;
  line-height: 23.25px;
}
.c-sol-api-plan__cell-num {
  font-size: 18px;
  font-weight: 700;
  color: #0E1116;
  line-height: 27px;
  font-family: "Inter", "Pretendard Variable", sans-serif;
}
.c-sol-api-plan__col--pro .c-sol-api-plan__cell-num { color: #2D6BFF; }

.c-sol-api-plan__notice {
  max-width: 980px;
  margin: 0 auto;
  padding: 32px 36px;
  background: var(--sol-surface-1);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.c-sol-api-plan__notice-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--sol-text-strong);
}
.c-sol-api-plan__notice-list {
  display: flex;
  flex-direction: column;
  gap: 9.5px;
}
.c-sol-api-plan__notice-list li {
  display: flex;
  gap: 10px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--sol-text-body);
}
.c-sol-api-plan__notice-list li::before {
  content: "·";
  color: var(--sol-text-strong-2);
  font-weight: 700;
}

/* ============================================
   § CTA — 다크 그라데이션 마무리 박스
   ============================================ */
/* 시안: py 120 / px 360.5, bg white */
.c-sol-cta {
  padding: 120px 24px;
  background: var(--sol-white);
}
/* 시안: grid 1.3fr : 1fr, gap 48, h 305.59, p 80, radius 32, overflow clip */
.c-sol-cta__box {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding: 80px;
  border-radius: 32px;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--sol-primary-on-dark) 22%, transparent) 0%, transparent 60%),
    linear-gradient(135deg, var(--sol-dark-1) 0%, var(--sol-dark-2) 60%, var(--sol-cta-grad-end) 100%);
}
/* 시안: 데코 원 1 — 400x400, radius 200, rgba 0.06, right -100 top -100 */
.c-sol-cta__box::before {
  content: "";
  position: absolute;
  right: -100px; top: -100px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
}
/* 시안: 데코 원 2 — 300x300, radius 150, rgba 0.04, right 100 bottom -200.01 */
.c-sol-cta__box::after {
  content: "";
  position: absolute;
  right: 100px; bottom: -200.01px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
}
/* 시안: 좌측 gap 16.01, self-center */
.c-sol-cta__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16.01px;
}
/* 시안: 41.4 / lh 52.8 / ls -1.1 / weight 800 / white */
.c-sol-cta__title {
  font-size: 41.4px;
  font-weight: 800;
  letter-spacing: -1.1px;
  line-height: 52.8px;
  color: var(--sol-white);
  margin: 0;
}
/* 시안: 14.9 / lh 24 / weight 400 / rgba(255,255,255,0.75) */
.c-sol-cta__subtitle {
  font-size: 14.9px;
  font-weight: 400;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}
/* 시안: gap 12, h 44, self-center, justify-end */
.c-sol-cta__ctas {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
}

/* ============================================
   반응형 — Tablet (768~1279)
   ============================================ */
@media (max-width: 1279px) {
  .c-sol-hero { padding: 80px 24px; }
  .c-sol-hero__grid { gap: 32px; min-height: auto; }
  .c-sol-hero__title { font-size: 44px; letter-spacing: -1.4px; }
  .c-sol-hero__visual { height: 420px; }
  .c-sol-usecases { padding: 80px 24px; }
  .c-sol-usecases__grid { grid-template-columns: 1fr; gap: 40px; }
  .c-sol-usecases__title { font-size: 32px; }
  .c-sol-stats { padding: 80px 24px; }
  .c-sol-stats__title { font-size: 36px; }
  .c-sol-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .c-sol-stats__cell + .c-sol-stats__cell:nth-child(3)::before { display: none; }
  .c-sol-stats__value { font-size: 64px; letter-spacing: -2px; }
  .c-sol-stats__unit { font-size: 24px; }
  .c-sol-channels { padding: 80px 24px; }
  .c-sol-channels__grid { grid-template-columns: 1fr; gap: 40px; }
  .c-sol-channels__title { font-size: 32px; }
  .c-sol-bchoice { padding: 80px 24px; }
  .c-sol-bchoice__grid { grid-template-columns: 1fr; gap: 40px; }
  .c-sol-bchoice__title { font-size: 32px; }
  .c-sol-calendar { padding: 80px 24px; }
  .c-sol-calendar__grid { grid-template-columns: 1fr; gap: 40px; }
  .c-sol-calendar__title { font-size: 32px; }
  .c-sol-catalog { padding: 80px 24px; }
  .c-sol-catalog__grid { grid-template-columns: 1fr; gap: 40px; }
  .c-sol-catalog__title { font-size: 32px; }
  .c-sol-comparison { padding: 80px 24px; }
  .c-sol-comparison__title { font-size: 32px; }
  .c-sol-comparison__grid { grid-template-columns: 1fr; gap: 40px; }
  .c-sol-comparison__vs { left: 50%; top: 50%; }
  .c-sol-api-hero { padding: 80px 24px; }
  .c-sol-api-hero__title { font-size: 64px; letter-spacing: -2.4px; }
  .c-sol-api-feat { padding: 80px 24px; }
  .c-sol-api-feat__title { font-size: 32px; }
  .c-sol-api-cases { padding: 80px 24px; }
  .c-sol-api-cases__title { font-size: 32px; }
  .c-sol-api-case { padding: 40px; gap: 40px; }
  .c-sol-api-case__title { font-size: 24px; }
  .c-sol-api-plan { padding: 80px 24px; }
  .c-sol-api-plan__title { font-size: 32px; }
  .c-sol-api-plan__table { grid-template-columns: 160px 1fr 1fr; }
  .c-sol-timeline { padding: 80px 24px; }
  .c-sol-timeline__title { font-size: 32px; }
  .c-sol-timeline__steps { grid-template-columns: 1fr; gap: 32px; }
  .c-sol-timeline__steps::before,
  .c-sol-timeline__steps::after { display: none; }
  .c-sol-timeline__step,
  .c-sol-timeline__step + .c-sol-timeline__step { padding: 0; }
  .c-sol-testi { padding: 80px 24px; }
  .c-sol-testi__title { font-size: 32px; }
  .c-sol-testi__grid { grid-template-columns: 1fr; }
  .c-sol-testi__col-right { grid-template-rows: auto; }
  .c-sol-testi-card { padding: 40px; border-radius: 20px; }
  .c-sol-testi-card__quote { font-size: 20px; }
  .c-sol-cta { padding: 80px 24px; }
  .c-sol-cta__box { padding: 56px; grid-template-columns: 1fr; gap: 32px; }
  .c-sol-cta__title { font-size: 32px; }
  .c-sol-cta__ctas { justify-content: flex-start; }
}

/* ---- Mobile (<768) ---- */
@media (max-width: 767px) {
  .c-sol-hero { padding: 56px 16px 64px; }
  .c-sol-hero__title { font-size: 32px; letter-spacing: -1px; line-height: 1.3; }
  .c-sol-hero__subtitle { font-size: 14px; }
  .c-sol-hero__visual { height: auto; min-height: 320px; }
  .c-sol-chat-card { width: calc(100% - 32px); position: relative !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: auto !important; transform: none !important; margin-bottom: 12px; }
  .c-sol-hero__kpis { flex-direction: column; gap: 16px; }
  .c-sol-usecases { padding: 56px 16px; }
  .c-sol-usecases__title { font-size: 26px; }
  .c-sol-stats { padding: 56px 16px; }
  .c-sol-stats__title { font-size: 26px; }
  .c-sol-stats__grid { grid-template-columns: 1fr; }
  .c-sol-stats__cell + .c-sol-stats__cell::before { display: none; }
  .c-sol-stats__cell + .c-sol-stats__cell { border-top: 1px solid rgba(255,255,255,0.1); }
  .c-sol-stats__value { font-size: 56px; }
  .c-sol-channels { padding: 56px 16px; }
  .c-sol-channels__title { font-size: 26px; }
  .c-sol-channels__cards { grid-template-columns: 1fr; }
  .c-sol-bchoice { padding: 56px 16px; }
  .c-sol-bchoice__title { font-size: 26px; }
  .c-sol-calendar { padding: 56px 16px; }
  .c-sol-calendar__title { font-size: 26px; }
  .c-sol-option-card,
  .c-sol-progress-card,
  .c-sol-survey-card,
  .c-sol-bchoice-mini,
  .c-sol-pin-card { position: relative !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: auto !important; transform: none !important; width: 100%; margin-bottom: 12px; }
  .c-sol-catalog { padding: 56px 16px; }
  .c-sol-catalog__title { font-size: 26px; }
  .c-sol-catalog__cards { grid-template-columns: repeat(2, 1fr); }
  .c-sol-comparison { padding: 56px 16px; }
  .c-sol-comparison__title { font-size: 26px; }
  .c-sol-comp-card { padding: 28px; }
  .c-sol-api-hero { padding: 56px 16px; }
  .c-sol-api-hero__title { font-size: 36px; letter-spacing: -1.2px; }
  .c-sol-api-hero__kicker { font-size: 11px; letter-spacing: 4px; }
  .c-sol-api-hero__ctas { flex-direction: column; width: 100%; }
  .c-sol-api-feat { padding: 56px 16px; }
  .c-sol-api-feat__title { font-size: 26px; }
  .c-sol-api-feat__grid { grid-template-columns: 1fr; }
  .c-sol-api-feat__card { padding: 24px; grid-template-columns: 1fr; }
  .c-sol-api-cases { padding: 56px 16px; }
  .c-sol-api-cases__title { font-size: 26px; }
  .c-sol-api-case { padding: 28px; grid-template-columns: 1fr; gap: 32px; }
  .c-sol-api-case__title { font-size: 22px; }
  .c-sol-api-plan { padding: 56px 16px; }
  .c-sol-api-plan__title { font-size: 26px; }
  .c-sol-api-plan__table { grid-template-columns: 1fr; }
  .c-sol-api-plan__col--cat { display: none; }
  .c-sol-timeline { padding: 56px 16px; }
  .c-sol-timeline__title { font-size: 26px; }
  .c-sol-testi { padding: 56px 16px; }
  .c-sol-testi__title { font-size: 26px; }
  .c-sol-testi-card { padding: 32px 24px; }
  .c-sol-testi-card__quote { font-size: 18px; line-height: 1.5; }
  .c-sol-testi-card__metrics { flex-wrap: wrap; gap: 16px 24px; }
  .c-sol-cta { padding: 56px 16px; }
  .c-sol-cta__box { padding: 40px 28px; }
  .c-sol-cta__title { font-size: 26px; }
  .c-sol-cta__ctas { flex-direction: column; }
  .c-sol-cta__ctas .c-sol-btn { width: 100%; }
}

/* ============================================
   "센드비가 뭔가요?" 페이지 — /whatIsSendbee
   Figma 2157:1709 (히어로 + 모자이크 + 솔루션 4섹션 + 고객사 + CTA)
   - .s-about wrapper 기준. 모자이크는 main.css 의 .s-mosaic 재사용
   - 4섹션(c-about-sol--a/b/c/d) 좌·우 텍스트/카드 토글은 --reverse 모디파이어
   ============================================ */
.s-about {
  display: block;
  background: #ffffff;
  color: #111111;
  font-family: "Pretendard Variable", Pretendard, Inter, "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.01em;
}

/* ---- § 1. HERO ---- */
.c-about-hero {
  position: relative;
  background: #f8faff;
  padding: 109px 0 141px;
  overflow: hidden;
}
.c-about-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}
.c-about-hero__inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 95px;
}
.c-about-hero__copy {
  width: min(480px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.c-about-hero__title {
  margin: 0;
  font-weight: 800;
  font-size: 52px;
  line-height: 1.2;
  color: #111111;
  text-align: center;
}
.c-about-hero__subtitle {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: #6b7280;
  text-align: center;
}
.c-about-hero__ctas {
  display: flex;
  gap: 12px;
  align-items: center;
}
.c-about-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  letter-spacing: inherit;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  text-decoration: none;     /* a 태그로 사용되는 경우 underline 제거 */
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.c-about-btn--primary {
  background: var(--point-blue-1);
  color: #ffffff;
}
.c-about-btn--primary:hover { background: #3a64e0; }
.c-about-btn--outline {
  background: #ffffff;
  color: var(--point-blue-1);
  border: 1.5px solid #d1d9f7;
  font-weight: 600;
}
.c-about-btn--outline:hover { background: #f4f7ff; }

.c-about-hero__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  width: 100%;
  max-width: 1240px;
}
.c-about-hero-card {
  background: #ffffff;
  border-radius: 28px;
  padding: 40px 32px 44px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 12px 32px -16px rgba(45, 107, 255, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
  text-align: center;
}
.c-about-hero-card__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 46px;
  background: linear-gradient(144deg, #2d6bff 6%, #6e8cff 94%);
}
.c-about-hero-card__icon {
  width: 40px;
  height: 40px;
  filter: brightness(0) invert(1);   /* SVG 흰색 변환 */
}
.c-about-hero-card__title {
  margin: 0;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: #111111;
  letter-spacing: -0.22px;
}
.c-about-hero-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.c-about-hero-card__list li {
  font-weight: 500;
  font-size: 15px;
  line-height: 2.05;
  color: #6b6f8a;
}

/* ---- § 2. WHY SENDBEE 모자이크 — 메인 페이지와 동일 (배경: var(--color-mosaic-bg))
        위·아래 여백만 본 페이지용으로 조정 (메인은 .s-main > .s-mosaic { padding: 80px 0 } 룰에 의존) ---- */
.s-mosaic--about {
  padding-top: 96px;
  padding-bottom: 96px;
}

/* ---- § 3. 솔루션 4섹션 공통 ---- */
.c-about-sol {
  background: #ffffff;
  padding: 10px 0;
}
.c-about-sol--b,
.c-about-sol--d { background: #f4f7ff; }

.c-about-sol__inner {
  max-width: 1280px;
  height: 500px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  gap: 80px;
  align-items: center;
}

.c-about-sol__copy {
  width: 520px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.c-about-sol__label {
  margin: 0;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--point-blue-1);
}
.c-about-sol__heading {
  margin: 0;
  width: 460px;
  font-weight: 800;
  font-size: 36px;
  line-height: 1.25;
  color: #111111;
}
.c-about-sol__btn {
  display: inline-block;
  padding: 14px 28px;
  background: #ffffff;
  color: var(--point-blue-1);
  border: 1.5px solid #d1d9f7;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .15s ease, transform .1s ease;
}
.c-about-sol__btn:hover { background: #f4f7ff; }
.c-about-sol__body {
  margin: 0;
  width: 460px;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: #555555;
}
.c-about-sol__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.c-about-sol__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #333333;
}
.c-about-sol__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--point-blue-1);
  border-radius: 3px;
  flex-shrink: 0;
}

.c-about-sol__visual {
  flex: 1 1 0;
  min-width: 0;
  height: 380px;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c0ccef;
  background: #dde4fa;
}
.c-about-sol__visual--green { background: #e8f5e9; border-color: #c8e6c9; }
.c-about-sol__visual--lightblue { background: #d4e2fa; border-color: #b0c4ee; }
.c-about-sol__visual--image { background: #e8eeff; border-color: #c0ccef; padding: 0; }
.c-about-sol__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* ---- 솔루션 우측 데모 카드 공통 ---- */
.c-about-card {
  width: 360px;
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 28px -16px rgba(16, 24, 40, 0.12);
}
.c-about-card__hdr {
  padding: 16px 20px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.c-about-card__title {
  margin: 0;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.5;
  color: #111111;
}
.c-about-card__divider {
  height: 1px;
  background: #f0f2f5;
}
.c-about-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 10px;
  line-height: 1.5;
  white-space: nowrap;
}
.c-about-card__badge--green { background: #e8f5e9; color: #1e7d52; }
.c-about-card__badge--yellow { background: #fff9c4; color: #7b6000; }
.c-about-card__badge-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #34a853;
  border-radius: 50%;
}
.c-about-card__pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 10px;
  line-height: 1.5;
  white-space: nowrap;
}
.c-about-card__pill--blue { background: #f4f7ff; border: 1px solid #d1d9f7; color: var(--point-blue-1); }
.c-about-card__pill--orange { background: #fff3e0; color: #e07a1a; }

/* ---- 솔루션 A — 신규 가입 이벤트 통계 카드 ---- */
.c-about-card__stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
}
.c-about-card__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.c-about-card__stat-value {
  margin: 0;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.3;
  color: #111111;
}
.c-about-card__stat-value--blue { color: var(--point-blue-1); }
.c-about-card__stat-value--green { color: #34a853; }
.c-about-card__stat-label {
  margin: 0;
  font-weight: 400;
  font-size: 10px;
  line-height: 1.5;
  color: #999999;
}
.c-about-card__stat-sep {
  width: 1px;
  height: 40px;
  background: #f0f2f5;
  flex-shrink: 0;
}
.c-about-card__channels {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
}
.c-about-card__channels-label {
  margin: 0;
  font-weight: 400;
  font-size: 10px;
  line-height: 1.5;
  color: #888888;
}
.c-about-card__chip {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 10px;
  line-height: 1.5;
  white-space: nowrap;
}
.c-about-card__chip--insta { background: #fce4ec; color: #e1306c; }
.c-about-card__chip--kakao { background: #fff9c4; color: #7b6000; }
.c-about-card__chip--sms { background: #eef3ff; color: var(--point-blue-1); }

/* ---- 솔루션 B — 임직원 명단 카드 ---- */
.c-about-emp {
  list-style: none;
  margin: 0;
  padding: 0;
}
.c-about-emp__item {
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f7f8fa;
}
.c-about-emp__item:last-child { border-bottom: none; }
.c-about-emp__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.c-about-emp__name {
  margin: 0;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.5;
  color: #111111;
}
.c-about-emp__phone {
  margin: 0;
  font-weight: 400;
  font-size: 10px;
  line-height: 1.5;
  color: #999999;
}
.c-about-card__foot {
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  line-height: 1.5;
}
.c-about-card__foot-label {
  margin: 0;
  font-weight: 400;
  color: #999999;
}
.c-about-card__foot-value {
  margin: 0;
  font-weight: 600;
  color: #34a853;
}

/* ---- 솔루션 C — before/after 비교 카드 ---- */
.c-about-cmp {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 16px;
}
.c-about-cmp__box {
  flex: 1 1 0;
  min-width: 0;
  padding: 16px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.c-about-cmp__box--before { background: #f7f8fa; }
.c-about-cmp__box--after { background: #eef3ff; }
.c-about-cmp__label {
  margin: 0;
  font-weight: 600;
  font-size: 10px;
  line-height: 1.5;
  color: #999999;
}
.c-about-cmp__label--blue { color: var(--point-blue-1); }
.c-about-cmp__value {
  margin: 0;
  font-weight: 800;
  font-size: 28px;
  line-height: 1.2;
  color: #bbbbbb;
}
.c-about-cmp__value--blue { color: var(--point-blue-1); }
.c-about-cmp__bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #e7e9ee;
  overflow: hidden;
}
.c-about-cmp__bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
}
.c-about-cmp__bar-fill--before { width: 18%; background: #c7ccd4; }
.c-about-cmp__bar-fill--after { width: 96%; background: var(--point-blue-1); }
.c-about-cmp__caption {
  margin: 0;
  font-weight: 400;
  font-size: 9px;
  line-height: 1.5;
  color: #bbbbbb;
}
.c-about-cmp__caption--blue { color: var(--point-blue-1); }
.c-about-cmp__arrow {
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: var(--point-blue-1);
  flex-shrink: 0;
}
.c-about-card__note {
  margin: 0;
  padding: 10px 20px;
  font-weight: 400;
  font-size: 9px;
  line-height: 1.5;
  color: #bbbbbb;
  text-align: center;
}

/* ---- § 4. 고객사 로고 슬라이더 — 메인페이지의 .s-trust 그대로 사용.
        .s-trust / .s-trust__title / .c-logo-slider 는 main.css 정의에 의존.
        본 페이지에서는 .s-about > .s-trust 컨텍스트라 메인의 .s-main > section 패딩이 안 먹으므로 위·아래 여백만 명시 ---- */
.s-about > .s-trust { padding: 80px 0 40px; }

/* ---- § 5. 최종 CTA — 메인은 .s-main > section { padding: 20px 0 } + last-child padding-bottom 40 패턴.
        본 페이지(.s-about) 에서는 그 룰이 안 먹으므로 직접 위·아래 여백 부여 ---- */
.s-about > .s-cta { padding: 80px 0; }

/* ---- 반응형 (1280 미만 ~ 360) ---- */
@media (max-width: 1280px) {
  .c-about-hero { padding: 80px 0 100px; }
  .c-about-hero__title { font-size: 44px; }
  .c-about-hero__inner { gap: 64px; }
  .c-about-hero__cards { gap: 20px; }

  .c-about-sol__inner {
    height: auto;
    flex-direction: column;
    gap: 40px;
    padding: 80px 20px;
    align-items: stretch;
  }
  .c-about-sol__copy { width: 100%; }
  .c-about-sol__heading,
  .c-about-sol__body { width: 100%; }
  .c-about-sol__visual { width: 100%; height: 360px; }
}

@media (max-width: 768px) {
  .c-about-hero { padding: 56px 0 64px; }
  .c-about-hero__title { font-size: 32px; }
  .c-about-hero__subtitle { font-size: 14px; }
  .c-about-hero__inner { gap: 48px; padding: 0 16px; }
  .c-about-hero__cards { grid-template-columns: 1fr; gap: 16px; }
  .c-about-hero-card { padding: 32px 24px 36px; gap: 16px; }
  .c-about-hero-card__icon-wrap { width: 76px; height: 76px; border-radius: 38px; }
  .c-about-hero-card__icon { width: 32px; height: 32px; }
  .c-about-hero-card__title { font-size: 20px; }
  .c-about-hero-card__list li { font-size: 14px; line-height: 1.9; }

  .c-about-btn { padding: 12px 22px; font-size: 14px; }
  .c-about-hero__ctas { flex-direction: column; width: 100%; max-width: 280px; }
  .c-about-hero__ctas .c-about-btn { width: 100%; }

  .s-mosaic--about { padding-top: 56px; padding-bottom: 56px; }

  .c-about-sol__inner { padding: 56px 16px; gap: 28px; }
  .c-about-sol__heading { font-size: 28px; }
  .c-about-sol__body { font-size: 14px; }
  .c-about-sol__visual { height: auto; min-height: 280px; padding: 24px; }
  .c-about-sol__visual--image { padding: 0; min-height: 220px; }
  .c-about-card { width: 100%; max-width: 360px; }

  .s-about > .s-trust { padding: 56px 0 32px; }
  .s-about > .s-cta { padding: 56px 0; }
}

@media (max-width: 480px) {
  .c-about-hero__title { font-size: 28px; }
  .c-about-sol__heading { font-size: 24px; }
  .c-about-cmp { padding: 16px 12px 12px; gap: 8px; }
  .c-about-cmp__box { padding: 12px; }
  .c-about-cmp__value { font-size: 22px; }
}