/* /cx 페이지 고유 패턴 — 공용 어휘는 css/pages/detail.css 가 갖는다(먼저 링크된다). */

/* ---------- #synergy · 그룹 연계 순환 ---------- */
/* 검수안 2026-09-09 CX-02. .detail-rail 을 재사용하지 않는 이유: 레일은 gap: 0 + 칸 사이 헤어라인이
   구획을 담당하므로 화살표를 놓을 빈 자리가 없고, 축이 번호 태그(.detail-rail__tag)라 여기서 축이 되는
   역할명(CX·MSO·SaaS·IT)을 제목 무게로 읽히게 할 수 없다. 그래서 gap 을 가진 카드 격자를 따로 둔다.
   카드 채움은 .detail-cards li 와 같은 흰 면 — #synergy 는 짝수 번째 섹션이라 바닥이 surface 다. */
.cx-synergy {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-8);
}

.cx-synergy li {
  position: relative;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

/* 흐름 화살표는 CSS 가 그린다 — 마크업에 문자로 넣으면 스크린 리더가 "아래쪽 화살표"를 읽어
   흐름이 아니라 소음이 된다. content 의 대체 텍스트를 빈 문자열로 두는 것이 사이트 관행이다
   (css/pages/cinematic.css 의 .cine-book__item strong::after). 호버 전용으로 만들지 않는다 —
   터치 기기에는 호버가 없어 흐름 자체가 사라진다. */
.cx-synergy li:not(:last-child)::after {
  content: '\2193' / '';
  position: absolute;
  left: 50%; /* translateX(-50%) 와 짝인 가운데 정렬 — 방향과 무관해 물리값으로 둔다(RTL 검토 2026-10-13) */
  bottom: calc(-1 * var(--space-8));
  height: var(--space-8);
  display: flex;
  align-items: center;
  transform: translateX(-50%);
  font-size: var(--font-size-lg);
  line-height: 1;
  /* 딥 그린 — 브랜드 그린 #3cc676 은 surface 바닥 위 2.2:1 로 WCAG 1.4.11(비텍스트 3:1) 미달이다.
     .detail-eyebrow·.detail-rail__tag 가 같은 이유로 --color-primary-deep 을 쓴다. */
  color: var(--color-primary-deep);
}

.cx-synergy__role {
  font-size: var(--font-size-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
}

/* MSO·SaaS 는 실제 페이지가 있어 내부 링크를 건다. 전역 a 는 text-decoration: none 이므로
   링크임을 알리는 밑줄을 여기서 되돌린다(CX 는 현재 페이지라 링크가 없다 — 그 차이가 그대로 보인다). */
.cx-synergy__role a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.cx-synergy__role a:hover {
  text-decoration-thickness: 2px;
}

.cx-synergy p {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.65;
  color: var(--color-text-muted);
  word-break: keep-all;
  text-wrap: pretty;
}

/* 순환을 닫는 줄 — 목록 밖의 한 문장이므로 카드를 만들지 않는다. 표식은 방향이 없는 순환 기호라
   세로·가로 흐름 어느 쪽에서도 어긋나지 않는다. */
.cx-synergy__loop {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-8) 0 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  word-break: keep-all;
}

.cx-synergy__loop::before {
  content: '\21BA' / '';
  flex: none;
  font-size: var(--font-size-xl);
  line-height: 1;
  color: var(--color-primary-deep);
}

/* 720px 이상 — 3열 가로 흐름. 화살표 방향도 함께 돌린다.
   경계를 900px 이 아니라 720px 로 잡은 이유: 3열이면 칸 폭이 720px 에서도 ≈200px 로,
   같은 h3 + .detail-sub 급 본문을 담는 .detail-rail 이 601px 까지 minmax(170px) 로 버티는
   폭보다 넓다. 900px 로 두면 768px 태블릿 세로가 1열로 접혀 3단 흐름이 화면을 다 쓴다. */
@media (min-width: 720px) {
  .cx-synergy {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cx-synergy li:not(:last-child)::after {
    content: '\2192' / '';
    inset-inline-start: auto;
    inset-inline-end: calc(-1 * var(--space-8));
    bottom: auto;
    top: 50%;
    width: var(--space-8);
    height: auto;
    justify-content: center;
    transform: translateY(-50%);
  }

  /* RTL: 열이 오른쪽에서 왼쪽으로 흐르므로 화살표도 ← 로(inset-inline-end 가 자리를 왼쪽으로 옮긴다) */
  [dir='rtl'] .cx-synergy li:not(:last-child)::after {
    content: '\2190' / '';
  }

  .cx-synergy__loop {
    justify-content: center;
  }
}