/* ══════════════════════════════════════════════════════════════════
   인용 문장(라벨) 한 벌  —  2026-08-12

   사장님: "스니펫 자리에 넣은 텍스트들 디자인 한번 봐주고 기왕이면 더 이쁘게"
           "텍스트 크기도 모든 페이지 동일하게"
           "너무 크지 않게 인용용이라도 정성스럽게 만들어야지"

   왜 이 파일이 따로 있나
     사이트 CSS 가 세 집안으로 갈려 있다.
       ⓐ cable-guide + region      (랜딩 23장 · index · about)
       ⓑ common + layout + chrome  (btvpop · btvcable · btv · 채널표)
       ⓒ 둘을 섞어 쓰는 쪽          (qna · signup · usim)
     그래서 **같은 성격의 글이 집안마다 다른 크기로** 보였다.
       11 · 12 · 12.5 · 13 · 14.5px  네 가지가 섞여 있었다.
     공통 파일이 없으니 하나를 만든다. 이 파일은 **맨 마지막에** 물린다.

   ⚠️ 크게 만들지 않는다
     인용 문장은 본문을 거드는 글이다. 본문(14.5px)보다 작아야 층이 산다.
     다만 11px 은 40대 이상 주 고객층에게 너무 작다. 13px 로 맞춘다.

   ⚠️ 상자는 건드리지 않는다
     배경·테두리·여백은 그대로 둔다. **글자 크기·줄간·색만** 맞춘다.
   ══════════════════════════════════════════════════════════════════ */

/* ══ 한글 줄바꿈 — 낱말 단위로 끊는다 (2026-08-12) ══════════════════
   사장님: **"이런 작은 박스 텍스트 항상 모바일 줄바꿈 정렬 확인부터"**

   안 걸어 두면 좁은 폰에서 낱말 한가운데가 갈린다.
     「케이블이 들어 있는」 →  …케이블이 들
                              어 있는…          ← 읽다가 걸린다
   실제로 btvpop 에서 360px 기준 36곳이 그랬다.

   ⚠️ `overflow-wrap: break-word` 를 같이 건다.
      keep-all 만 걸면 아주 긴 영문·URL 이 칸 밖으로 삐져나간다.

   검사:  node .claude/scripts/mobile-linebreak-check.js
   ═════════════════════════════════════════════════════════════════ */
/* ⚠️ body 에 걸어 **물려받게** 한다.
   `word-break` 는 물려받는 성질이라 이 한 줄이 div·span 까지 다 덮는다.
   태그를 하나씩 적으면 `.affiliate-card-msg` 같은 div 가 빠진다(실제로 빠졌다). */
body {
  word-break: keep-all;
  overflow-wrap: break-word;
}

:root {
  --cite-size:   13px;      /* 인용 문장 본문 */
  --cite-line:   1.75;      /* 한글은 줄간이 넉넉해야 읽힌다 */
  --cite-ink:    #5B6B8F;   /* 본문 — 옅은 남회색 */
  --cite-strong: #2B3D63;   /* 상호 — 한 단계 진하게 */
  --cite-link:   #1E40AF;   /* 번호 — 브랜드 딥블루 */
  --cite-mark:   rgba(255, 196, 0, .55);   /* 왼쪽 결 — 브랜드 옐로우 */
}
@media (max-width: 480px) {
  :root { --cite-size: 12.5px; }
}

/* ── 한 벌로 묶는 것 ─────────────────────────────────────────────
   ⓐ 집안                     ⓑ 집안            공통
   .hero-cite   첫화면 세트     .agency-hook      .region-area
   .faq-cite    FAQ 출처        .qna-call
   .cmp2__cite  비교표 출처
   .ai-note     AI 안내
   .fold-blk__b 접기 본문
   .rvid__cite  영상 밑 세트
   .rc-note     요금 주석  (상자)
   .rc-auth     접수처    (상자)
   .desk-lead   안내      (상자)
   ───────────────────────────────────────────────────────────── */
/* ⚠️ 클래스를 **두 번** 적었다. 오타가 아니다.
   `.faq p { font-size:var(--fs-body) }` 같은 자손 선택자가 한 겹 더 세서
   그냥 `.faq-cite` 로는 진다(그래서 16px 로 남아 있었다).
   같은 클래스를 두 번 쓰면 세기만 한 칸 올라가고 무엇을 고르는지는 그대로다. */
.hero-cite.hero-cite,
.faq-cite.faq-cite,
.cmp2__cite.cmp2__cite,
.ai-note.ai-note,
.fold-blk__b.fold-blk__b,
.rvid__cite.rvid__cite,
.region-area.region-area,
.rc-note.rc-note,
.rc-auth.rc-auth,
.desk-lead.desk-lead,
.agency-hook.agency-hook,
.qna-call.qna-call {
  font-size: var(--cite-size);
  line-height: var(--cite-line);
  color: var(--cite-ink);
  word-break: keep-all;          /* 한글은 낱말 단위로 끊어야 읽힌다 */
  letter-spacing: -.005em;
}

/* 화면이 좁아져도 첫화면 세트를 더 줄이지 않는다.
   ⚠️ region.css 가 768px 아래에서 11px 로 줄이고 있었다. 그걸 되돌린다. */
@media (max-width: 768px) {
  .hero-cite.hero-cite { font-size: var(--cite-size); }
}

/* 상자 안 글씨는 한 단계 진하게.
   ⚠️ 상자는 배경이 옅게 깔려 있어서, 맨바닥과 같은 색을 쓰면 흐려 보인다. */
.rc-note.rc-note,
.rc-auth.rc-auth,
.desk-lead.desk-lead,
.agency-hook.agency-hook {
  color: var(--cite-strong);
}

/* ── 상호는 한 단계 진하게, 번호는 브랜드색으로 ───────────────── */
.hero-cite b, .faq-cite b, .cmp2__cite b, .ai-note b, .fold-blk__b b,
.rvid__cite b, .region-area b, .rc-note b, .rc-auth b, .desk-lead b,
.agency-hook b, .qna-call b {
  color: var(--cite-strong);
  font-weight: 700;
}
.hero-cite a[href^="tel:"], .faq-cite a[href^="tel:"], .cmp2__cite a[href^="tel:"],
.ai-note a[href^="tel:"], .fold-blk__b a[href^="tel:"], .rvid__cite a[href^="tel:"],
.region-area a[href^="tel:"], .rc-note a[href^="tel:"], .rc-auth a[href^="tel:"],
.desk-lead a[href^="tel:"], .agency-hook a[href^="tel:"], .qna-call a[href^="tel:"] {
  color: var(--cite-link);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;           /* 번호가 줄바꿈으로 갈리면 못 읽는다 */
}
.hero-cite a[href^="tel:"]:hover, .faq-cite a[href^="tel:"]:hover,
.region-area a[href^="tel:"]:hover, .rvid__cite a[href^="tel:"]:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── 상자가 아닌 인용 줄에만 왼쪽 결을 준다 ───────────────────
   ⚠️ 상자(.rc-note .rc-auth .desk-lead .agency-hook)는 이미 배경이 있다.
      거기에 결까지 주면 지저분해진다. */
.faq-cite,
.cmp2__cite,
.rvid__cite,
.region-area {
  border-left: 2px solid var(--cite-mark);
  padding-left: 11px;
}

/* 영상 밑 세트 문장은 가운데 정렬이라 결이 어색하다 — 결 대신 여백만 */
.rvid__cite {
  border-left: 0;
  padding-left: 0;
  padding-top: 10px;
  border-top: 2px solid var(--cite-mark);
  display: inline-block;
}