/* dc-body.css — 시안 공용 부품 (2026-08-17)
   구역 · 상품 카드 · 표 · 접기 · FAQ · 상담 폼.
   히어로와 계산기는 dc-hero.css 에 남겨 두었습니다(index·권역 랜딩 전용).
   ⚠️ 옛 시트를 고치지 않고 이 파일에서 덮습니다. */
/* ═══ 구역 공통 — 시안 (인덱스 모바일.dc.html) ═════════════════ */
.dc-sec{ padding:26px 16px 30px; scroll-margin-top:16px; text-align:left; }
.dc-sec--line{ border-top:1px solid #e4eaf5; }
.dc-sec__kick{ display:flex; align-items:center; gap:6px; margin-bottom:5px; }
.dc-sec__kick img{ width:20px; height:20px; object-fit:contain; flex:0 0 auto; }
/* 킥커는 B Blue. 전에는 #2B3D63 이라 인용 상호와 같은 색이어서
   "섹션 이름"과 "출처"가 한 색으로 섞여 보였다(2026-08-18). */
.dc-sec__kick span{ font-size:var(--fs-xs); font-weight:700; letter-spacing:.09em; color:var(--bblue); }
.dc-sec h2{ margin:0 0 4px; font-size:var(--fs-num-md); font-weight:800; letter-spacing:-.025em; color:#0b1c4d; }
.dc-sec__lead{ margin:0 0 16px; font-size:var(--fs-sm); line-height:1.6; color:#5b6b8f; }

/* ═══ 상품 카드 ═══════════════════════════════════════════════ */
.dc-cards{ display:flex; flex-direction:column; gap:12px; }
.dc-card{ background:#fff; border:1px solid #d8e0f0; border-radius:13px;
  box-shadow:0 2px 10px rgba(30,64,175,.06); padding:16px; }

/* 상품마다 색 하나 (2026-08-18) — 본사 파스텔에서만 고른다.
   띠와 아이콘 원판 **두 자리**에만 쓴다. 카드가 여섯이라 세 자리까지 칠하면
   무지개가 된다(지시서 §1-4 「한 화면에 파스텔 3종까지」).
   ⚠️ 금액(#1E40AF)·상품명(#0b1c4d)·조건(#5b6b8f)은 그대로 둔다 —
      금액이 파스텔을 타면 어느 숫자가 중요한지 알 수 없어진다. */
.dc-card[class*="dc-card--"]{ position:relative; overflow:hidden; }
.dc-card[class*="dc-card--"]::before{ content:""; position:absolute; inset:0 0 auto 0; height:5px; }
/* 아이콘 원판은 **흰 바탕 + 파스텔 테두리**.
   배경을 파스텔로 깔았더니 「인터넷 단독」 아이콘(초록)이 초록 바탕에 묻혔다(2026-08-18).
   본사 아이콘은 색이 제각각이라 어떤 파스텔과도 겹칠 수 있다. 테두리로 상품을 나타낸다. */
.dc-card[class*="dc-card--"] .dc-card__ico{
  border-radius:50%; padding:5px; box-sizing:content-box;
  background:#fff; border:2px solid transparent; }
.dc-card--pop::before{ background:var(--p-pop); }
.dc-card.dc-card--pop .dc-card__ico{ border-color:var(--p-pop); }
.dc-card--net::before{ background:var(--p-net); }
.dc-card.dc-card--net .dc-card__ico{ border-color:var(--p-net); }
.dc-card--cable::before{ background:var(--p-cable); }
.dc-card.dc-card--cable .dc-card__ico{ border-color:var(--p-cable); }
.dc-card--iptv::before{ background:var(--p-iptv); }
.dc-card.dc-card--iptv .dc-card__ico{ border-color:var(--p-iptv); }
.dc-card--student::before{ background:var(--p-student); }
.dc-card.dc-card--student .dc-card__ico{ border-color:var(--p-student); }
.dc-card__top{ display:flex; align-items:flex-start; justify-content:space-between;
  gap:10px; min-height:28px; margin-bottom:10px; }
.dc-card__badge{ display:inline-block; flex:0 0 auto; white-space:nowrap;
  background:#FFC400; color:#0b1c4d; font-size:var(--fs-xs); font-weight:700;
  padding:5px 10px; border-radius:6px; }
.dc-card__ico{ margin-left:auto; flex:0 0 auto; width:40px; height:40px; }
.dc-card__ico img{ width:40px; height:40px; object-fit:contain; display:block; }
.dc-card__name{ font-size:var(--fs-lead); font-weight:700; letter-spacing:-.01em; color:#0b1c4d; }
.dc-card__desc{ font-size:var(--fs-sm); color:#5b6b8f; margin-top:3px; }
.dc-card__price{ display:flex; align-items:baseline; gap:5px; margin-top:6px; }
.dc-card__amt{ font-size:var(--fs-title); font-weight:800; color:#1E40AF;
  letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.dc-card__from{ font-size:var(--fs-sm); color:#5b6b8f; }
.dc-card__cond{ font-size:var(--fs-micro); line-height:1.55; color:#5b6b8f; margin-top:6px; }
.dc-card__benes{ display:flex; flex-direction:column; gap:6px; margin-top:6px;
  font-size:var(--fs-sm); color:#374151; }
.dc-card__benes div{ display:flex; gap:7px; }
.dc-card__benes i{ color:#0f8a55; font-weight:700; flex:0 0 auto; font-style:normal; }
.dc-card__go{ margin-top:15px; display:flex; align-items:center; justify-content:center;
  height:50px; border:1.5px solid #1E40AF; border-radius:9px;
  color:#1E40AF; font-size:var(--fs-body); font-weight:700; text-decoration:none; }

/* ⚠️ 접기 안전망 (2026-08-19)
   details 는 닫히면 브라우저가 자식을 숨기는데, 그 자식에 display 를 지정하면
   그 지정이 이겨서 「닫혀 있는데 내용이 보이는」 상태가 됩니다.
   .dc-card__in 이 display:flex 라 index 의 요금표 접기가 806px 째 펼쳐져 있었습니다.
   특이도 (0,1,1) 이라 클래스 하나짜리 규칙(0,1,0)을 이깁니다. !important 는 쓰지 않습니다. */
details:not([open]) > :not(summary){ display:none; }

.dc-card__fold{ margin-top:2px; }
.dc-card__fold > summary{ list-style:none; width:100%; display:flex;
  align-items:center; justify-content:center; height:44px;
  font-size:var(--fs-sm); font-weight:600; color:#5b6b8f; cursor:pointer; }
.dc-card__fold > summary::-webkit-details-marker{ display:none; }
.dc-card__fold > summary::after{ content:""; width:6px; height:6px; margin-left:6px;
  border-right:1.5px solid #5b6b8f; border-bottom:1.5px solid #5b6b8f;
  transform:rotate(45deg) translateY(-2px); }
.dc-card__fold[open] > summary::after{ transform:rotate(-135deg) translateY(-2px); }
.dc-card__in{ background:#F5F8FD; border:1px solid #d8e0f0; border-radius:11px;
  padding:14px; margin-top:6px; display:flex; flex-direction:column; gap:11px; }
.dc-card__ttl{ font-size:var(--fs-sm); font-weight:700; letter-spacing:-.01em; color:#0b1c4d; }
.dc-card__tnote{ font-size:var(--fs-micro); line-height:1.5; color:#5b6b8f; margin-top:3px; }
.dc-tbl{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.dc-tbl th{ font-size:var(--fs-micro); font-weight:600; color:#5b6b8f; padding:7px 0;
  border-bottom:1.5px solid #0b1c4d; text-align:left; }
.dc-tbl th:last-child{ white-space:nowrap; }
/* 머리글은 가운데 · 안에 글은 왼쪽 (사장님 2026-08-19 「머리글 특히 중앙정렬」).
   금액이 든 마지막 칸의 값만 오른쪽을 지킨다 — 자릿수를 맞춰야 견주기 쉽다. */
.dc-tbl th{ text-align:center; }
.dc-tbl th, .dc-tbl td{ word-break:keep-all; }
.dc-tbl td{ font-size:var(--fs-sm); line-height:1.45; color:#374151;
  padding:11px 0; border-bottom:1px solid #e4eaf5; text-align:left; }
/* ⚠️ white-space:nowrap 은 걷었다 (2026-08-19).
   「100M 1,870원 · 500M 4,730원 · 1G 6,380원」처럼 여러 값이 든 칸을
   한 줄로 붙들어, 앞의 「인터넷+TV 결합」 칸이 폭 34px 로 눌리고
   글자가 세로로 쌓였다. 금액은 띄어쓰기가 없어 어차피 안 쪼개진다. */
.dc-tbl td:last-child{ text-align:right; font-size:var(--fs-sm); font-weight:700;
  color:#1E40AF; }
.dc-tbl .grp td{ font-size:var(--fs-micro); font-weight:700; color:#2B3D63;
  padding:14px 0 6px; border-bottom:1px solid #d8e0f0;
  /* 그룹 줄은 colspan 한 칸이라 td:last-child 로도 잡힌다. 그대로 두면
     「인터넷 + B tv POP 결합」 같은 머리말이 오른쪽으로 밀린다.
     (2026-08-19 전수: 랜딩 23장·index·상품에서 49곳) */
  text-align:left; white-space:normal; font-variant-numeric:normal; }
.dc-card__foot{ font-size:var(--fs-micro); line-height:1.65; color:#5b6b8f; }
.dc-card__calc{ display:flex; align-items:center; justify-content:center; height:48px;
  background:#1E40AF; border-radius:8px; color:#fff; font-size:var(--fs-body);
  font-weight:700; text-decoration:none; }
.dc-card__cite{ border-top:1px solid #d8e0f0; margin-top:11px; padding-top:10px;
  font-size:var(--fs-xs); line-height:1.65; color:#5b6b8f; }
.dc-card__cite b{ color:#2B3D63; font-weight:600; }
.dc-card__cite a{ color:#1E40AF; text-decoration:none; font-weight:700; }

@media (min-width:769px){
  .dc-sec{ padding:44px 24px 50px; max-width:1080px; margin:0 auto; }
  .dc-sec h2{ font-size:var(--fs-num-lg); }
  .dc-sec__lead{ font-size:var(--fs-body); }
  .dc-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start; }
}

/* region.css:379 의 모바일 `h2, h3 { text-align:center }` 예외.
   시안 구역은 왼쪽 정렬이다. 옛 절은 그대로 두려고 그 규칙을 지우지 않고
   더 좁은 선택자로 덮는다. */
.dc-sec h2, .dc-sec h3, .dc-sec__lead, .dc-card__name, .dc-card__ttl{ text-align:left; }

/* ═══ OTHER — 그 밖의 요금 안내 (시안) ════════════════════════ */
/* 섹션 배경을 셋으로 돌린다 — 흰 → 회 → 흰 → 청 (2026-08-18)
   사장님: 「이번에 만든 사이트 너무 단조로움」
   지금까지 흰색과 옅은 파랑(#F5F8FD) 둘뿐이라 스크롤이 한 색으로 흘렀다.
   본사 Sub Gray 7 · Sub Blue 6 를 쓴다 — 새 색을 만들지 않는다. */
.dc-sec--tint{ background:var(--sub-gray7); border-top:1px solid #e4eaf5; }
/* 2026-08-19 지시서 §4 — 흰색·연회색 둘만 번갈아 나와 스크롤이 한 색으로 흘렀다.
   셋으로 돌린다: 계산기·채널표는 회색, 통계·FAQ 는 연파랑, 나머지는 흰색. */
.dc-sec--tint.dc-faq,
/* ⚠️ .dc-stats 는 통계 격자(258행)라 섹션에 붙이면 섹션 전체가 2열이 된다.
   배경용은 이름을 갈라 쓴다 (2026-08-19 모바일에서 안내 문단이 폭 62px 로
   눌려 서너 글자씩 끊겼다). */
.dc-sec--tint.dc-sec--stats{ background:var(--sub-blue6); }
.dc-sec--blue{ background:var(--sub-blue6); border-top:1px solid #e4eaf5; }
.dc-sec__mas{ display:flex; align-items:center; gap:9px; margin-bottom:14px; }
.dc-sec__mas img{ width:42px; height:42px; object-fit:contain; flex:0 0 auto; }
.dc-sec__mas p{ margin:0; font-size:var(--fs-sm); line-height:1.55; color:#5b6b8f; text-align:left; }

.dc-look{ border-bottom:1px solid #d8e0f0; }
.dc-look details{ border-top:1px solid #d8e0f0; }
.dc-look summary{ display:flex; align-items:center; gap:8px; min-height:46px;
  font-size:var(--fs-sm); color:#374151; cursor:pointer; list-style:none; }
.dc-look summary::-webkit-details-marker{ display:none; }
.dc-look summary::before{ content:""; width:6px; height:6px; flex:0 0 auto;
  border-right:2px solid #5b6b8f; border-bottom:2px solid #5b6b8f;
  transform:rotate(-45deg); display:inline-block; }
.dc-look details[open] > summary::before{ transform:rotate(45deg); }
.dc-look__b{ padding:2px 0 14px; font-size:var(--fs-sm); line-height:1.75; color:#5b6b8f; }
.dc-look__b .dc-tbl{ margin:10px 0 4px; }
.dc-look__b .dc-tbl td:last-child{ color:#1E40AF; }
.dc-look__b b{ color:#2B3D63; font-weight:600; }
.dc-look__b a{ color:#1E40AF; text-decoration:none; font-weight:700; }

.dc-promo{ padding:0 0 16px; display:flex; flex-direction:column; gap:9px; }
.dc-promo a.k{ display:flex; align-items:center; gap:12px; background:#fff;
  border:1px solid #d8e0f0; border-radius:11px; padding:12px; text-decoration:none; }
.dc-promo a.k img{ flex:0 0 auto; width:56px; height:56px; object-fit:contain; }
.dc-promo__t{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.dc-promo__n{ font-size:var(--fs-sm); font-weight:700; color:#0b1c4d; }
.dc-promo__a{ font-size:var(--fs-sm); font-weight:800; color:#1E40AF; font-variant-numeric:tabular-nums; }
.dc-promo__c{ font-size:var(--fs-xs); line-height:1.5; color:#5b6b8f; }
/* 카드사로 넘어간다는 표시 — 줄 오른쪽 꺾쇠 */
.dc-promo__go2{ flex:0 0 auto; margin-left:auto; padding-left:8px;
  font-size:var(--fs-lead); line-height:1; color:#5b6b8f; }
.dc-promo a.k:hover{ border-color:#1E40AF; }
.dc-promo a.k:hover .dc-promo__go2{ color:#1E40AF; }

/* ═══ AREA — 전국 23개 케이블 권역 (시안) ═════════════════════ */
.dc-area summary{ font-weight:600; }
.dc-area__list{ padding:0 0 10px 14px; display:flex; flex-direction:column; }
.dc-area__list a{ display:flex; align-items:baseline; gap:7px; min-height:44px;
  padding:4px 0; border-bottom:1px solid #eef1f7;
  font-size:var(--fs-sm); color:#1E40AF; font-weight:600; text-decoration:none; }
.dc-area__list a span{ flex:0 0 auto; }
.dc-area__list a em{ font-style:normal; font-size:var(--fs-xs); font-weight:500; color:#5b6b8f; }
.dc-area__out{ display:flex; align-items:center; gap:9px; margin-top:14px;
  background:#F5F8FD; border:1px solid #d8e0f0; border-radius:11px; padding:12px; }
.dc-area__out img{ width:34px; height:34px; object-fit:contain; flex:0 0 auto; }
.dc-area__out div{ font-size:var(--fs-xs); line-height:1.7; color:#5b6b8f; }
.dc-area__out b{ color:#2B3D63; font-weight:600; }
.dc-area__out a{ color:#1E40AF; text-decoration:none; font-weight:700; }

/* ═══ FAQ (시안) ══════════════════════════════════════════════ */
.dc-faq{ display:flex; flex-direction:column; gap:20px; }
.dc-faq h2{ margin-bottom:16px; }
.dc-faq__g > b{ display:block; font-size:var(--fs-xs); font-weight:700;
  color:#2B3D63; margin-bottom:6px; }
.dc-faq__in{ border-bottom:1px solid #d8e0f0; }
/* 문답 — 얇은 선 하나뿐이라 눌러 볼 줄인지 모르고, 어느 답이 열렸는지도 안 보였습니다.
   화살표를 오른쪽 끝으로 보내고, 열린 문답에만 옅은 바탕을 깝니다.
   (사장님 2026-08-19 「문답 형식인데 잘 구분이 안되니 · 모바일에서 특히」) */
.dc-faq details{ border-top:1px solid #d8e0f0; }
.dc-faq details[open]{ background:#fff; }
.dc-faq summary{ display:flex; align-items:flex-start; gap:8px; min-height:46px;
  padding:12px 13px; font-size:var(--fs-sm); line-height:1.5; font-weight:600;
  color:#0b1c4d; cursor:pointer; list-style:none; }
.dc-faq summary:hover{ background:#eef2fb; }
.dc-faq details[open] > summary{ color:#1E40AF; }
.dc-faq summary::-webkit-details-marker{ display:none; }
.dc-faq summary::after{ content:""; width:7px; height:7px; margin:5px 0 0 auto; flex:0 0 auto;
  border-right:2px solid #5b6b8f; border-bottom:2px solid #5b6b8f;
  transform:rotate(45deg); display:inline-block; transition:transform .18s; }
.dc-faq details[open] > summary::after{ transform:rotate(-135deg); margin-top:8px; border-color:#1E40AF; }
.dc-faq__a{ padding:0 13px 14px; font-size:var(--fs-sm); line-height:1.75; color:#5b6b8f; }
.dc-faq__a p{ margin:0 0 8px; }
.dc-faq__a p:last-child{ margin-bottom:0; }
.dc-faq__a b{ color:#2B3D63; font-weight:600; }
.dc-faq__a a{ color:#1E40AF; text-decoration:none; font-weight:700; }

/* ═══ FREE — 상담 신청 (시안) ═════════════════════════════════ */
.dc-cta{ background:#0b1c4d; padding:28px 16px 32px; scroll-margin-top:16px; }
.dc-cta__top{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; }
.dc-cta__top img{ width:60px; height:60px; object-fit:contain; margin-bottom:2px; }
.dc-cta__kick{ font-size:var(--fs-micro); font-weight:700; letter-spacing:.09em; color:#FFC400; }
.dc-cta h2{ margin:0; font-size:var(--fs-num-md); font-weight:800; letter-spacing:-.025em;
  color:#fff; text-align:center; }
.dc-cta__lead{ margin:0; font-size:var(--fs-sm); line-height:1.7; color:rgba(255,255,255,.75); }
.dc-cta__box{ background:#fff; border-radius:13px; padding:18px; margin-top:18px; }
.dc-fg{ display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.dc-fg:first-child{ margin-top:0; }
.dc-fg label{ font-size:var(--fs-xs); font-weight:600; color:#5b6b8f; }
.dc-fg label i{ font-style:normal; color:#1E40AF; }
.dc-fg label small{ font-weight:500; color:#5b6b8f; font-size:var(--fs-xs); }
.dc-fg input{ height:50px; padding:0 13px; border:1px solid #d8e0f0; border-radius:8px;
  font-family:inherit; font-size:var(--fs-body); color:#0b1c4d; background:#fff; }
.dc-fg textarea{ padding:11px 12px; border:1px solid #d8e0f0; border-radius:8px;
  font-family:inherit; font-size:var(--fs-body); line-height:1.6; color:#0b1c4d;
  background:#fff; resize:vertical; min-height:78px; }
.dc-agree{ display:flex; align-items:flex-start; gap:8px; margin-top:14px;
  font-size:var(--fs-sm); line-height:1.6; color:#374151; }
.dc-agree input{ margin-top:2px; width:18px; height:18px; accent-color:#1E40AF; flex:0 0 auto; }
.dc-agree i{ font-style:normal; color:#1E40AF; }
.dc-terms{ margin-top:8px; border:1px solid #d8e0f0; border-radius:8px; }
.dc-terms > summary{ display:flex; align-items:center; gap:7px; min-height:44px;
  padding:0 12px; font-size:var(--fs-xs); color:#5b6b8f; cursor:pointer; list-style:none; }
.dc-terms > summary::-webkit-details-marker{ display:none; }
.dc-terms > summary::before{ content:""; width:6px; height:6px; flex:0 0 auto;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(-45deg); display:inline-block; }
.dc-terms[open] > summary::before{ transform:rotate(45deg); }
.dc-terms__b{ padding:2px 12px 14px; font-size:var(--fs-xs); line-height:1.75; color:#5b6b8f;
  display:flex; flex-direction:column; gap:8px; }
.dc-terms__b b{ color:#2B3D63; font-weight:600; }
.dc-terms__b a{ color:#1E40AF; font-weight:600; text-decoration:none; }
.dc-cta__btn{ width:100%; height:52px; margin-top:14px; background:#1E40AF;
  border:none; border-radius:9px; font-family:inherit; font-size:var(--fs-body);
  font-weight:700; color:#fff; cursor:pointer; }
.dc-cta__sign{ display:flex; flex-direction:column; align-items:flex-start; gap:9px;
  border-top:1px solid #d8e0f0; margin-top:14px; padding-top:12px; }
.dc-cta__sign img{ width:100px; height:auto; display:block; }
.dc-cta__sign div{ font-size:var(--fs-xs); line-height:1.75; color:#5b6b8f; text-align:left; }
.dc-cta__sign b{ color:#2B3D63; font-weight:600; }
.dc-cta__sign a{ color:#1E40AF; text-decoration:none; font-weight:700; }
@media (min-width:769px){
  .dc-cta{ padding:44px 24px 50px; }
  .dc-cta__box{ max-width:560px; margin:18px auto 0; }
  .dc-cta h2{ font-size:var(--fs-num-lg); }
}

/* 챗봇 빠른버튼 아이콘 — 이모지 자리에 우리 자산 (챗봇 동작은 그대로) */
.quick-buttons button img{ width:18px; height:18px; object-fit:contain;
  vertical-align:-4px; margin-right:2px; }

/* ═══ STATS — 실제 가입자들은 이렇게 골랐습니다 (시안) ════════ */
.dc-stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dc-stat{ background:#fff; border:1px solid #d8e0f0; border-radius:11px;
  padding:14px 13px; display:flex; flex-direction:column; gap:4px; }
.dc-stat__v{ font-size:var(--fs-title); font-weight:800; color:#1E40AF;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1.1; }
.dc-stat__k{ font-size:var(--fs-xs); line-height:1.45; color:#5b6b8f; }
.dc-stat__rail{ height:5px; border-radius:3px; background:#E9EEFF;
  overflow:hidden; margin-top:3px; }
.dc-stat__rail i{ display:block; height:100%; background:#1E40AF; border-radius:3px; }
.dc-stat__note{ margin:14px 0 0; font-size:var(--fs-xs); line-height:1.7; color:#5b6b8f; text-align:left; }
.dc-stat__note b{ color:#2B3D63; font-weight:600; }
@media (min-width:769px){ .dc-stats{ grid-template-columns:repeat(3,1fr); gap:14px; } }

/* ═══ 3-2 / 3-3 상품 카드 · 표 두 종류 ════════════════════════ */
.dc-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px; align-items:stretch; }
.dc-card{ display:flex; flex-direction:column; scroll-margin-top:80px; }
.dc-card__ico{ width:44px; height:44px; }
.dc-card__ico img{ width:44px; height:44px; }
/* ⚠️ benes 가 flex:1 0 auto 로 남는 자리를 다 먹으면 아래 .dc-card__go 의
   margin-top:auto 가 밀어낼 여백이 0 이 된다. 그래서 마지막 「✓ TV는 나중에
   추가 가능」 줄이 버튼에 붙어 있었다(2026-08-19 사장님 지적, 카드 6장 전부).
   auto 는 그대로 둔다 — 카드 높이가 달라도 버튼 줄을 맞춰 주기 때문이다.
   최소 틈만 여기서 준다. */
.dc-card__benes{ flex:1 0 auto; margin-bottom:14px; }
.dc-card__go{ margin-top:auto; }
.dc-card__fold > summary{ justify-content:center; }
/* 접은 것들의 소제목 굵기가 자리마다 500·600 으로 갈려 있었다(2026-08-19).
   dc-look·pa-more·dc-terms 쪽이 선언이 없어 본문 굵기를 그대로 받았다. 600 으로 맞춘다. */
.dc-look .dc-reveal > summary,
.phone-answer .pa-more > summary,
.dc-terms > summary{ font-weight:600; }

/* 정가부터 보기 토글 */
.dc-tgl{ display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%; min-height:44px; margin:0; padding:0 12px;
  background:#fff; border:1px solid #d8e0f0; border-radius:8px;
  font-family:inherit; font-size:var(--fs-xs); font-weight:600; color:#5b6b8f; cursor:pointer; }
.dc-tgl::after{ content:""; width:6px; height:6px; flex:0 0 auto;
  border-right:2px solid #5b6b8f; border-bottom:2px solid #5b6b8f;
  transform:rotate(45deg) translateY(-2px); }
.dc-tgl[aria-expanded="true"]::after{ transform:rotate(-135deg) translateY(-2px); }
/* 접힌 상태(기본)에서는 정가·더슬림 열을 감춥니다.
   ⚠️ 마크업에는 남아 있어 JSON-LD Offer 생성에 영향이 없습니다. */
.dc-tbl.tbl-compact .col-list, .dc-tbl.tbl-compact .col-slim{ display:none; }
/* 2026-08-19 사장님 「얇은것들은 특히 더 신경써서」 — 접은 요금표 안 금액이
   12.5px·400·#5b6b8f(대비 2.82)라 가장 안 보였다. 금액이 안 보이면 안 된다. */
.dc-tbl .col-list, .dc-tbl .col-slim{ color:#5b6b8f; font-weight:500; }
.dc-tbl.t4 td, .dc-tbl.t4 th{ font-size:var(--fs-xs); }
.dc-tbl.t4 td:first-child{ text-align:left; }
/* 머리글은 가운데, 값은 오른쪽 (사장님 2026-08-19 「머리글 특히 중앙정렬」) */
.dc-tbl.t4 td:not(:first-child){ text-align:right; white-space:nowrap; }
.dc-tbl.t4 th{ text-align:center; }
.dc-tbl caption{ caption-side:top; text-align:left; font-size:var(--fs-micro);
  line-height:1.5; color:#5b6b8f; padding-bottom:6px; }

/* 「전국 공식인증대리점 전화번호」 — 주변 시안 구역과 글자 크기 통일
   전: h2 18px · 본문 14.5px  →  후: h2 22px · 본문 13.5px
   (시안 구역은 h2 22px · 본문 13.5px 입니다) */
/* 인용 한 덩어리를 담은 절 — 좌우 여백이 없어 화면 끝에 붙어 있었습니다.
   다른 절(.dc-sec)과 같은 자리에 서게 합니다. (2026-08-19) */
.phone-answer{ max-width:1080px; margin:0 auto; padding:22px 24px; }
.phone-answer > h2{ font-size:var(--fs-num-md); font-weight:800; letter-spacing:-.025em; line-height:1.35; }
.phone-answer > p{ font-size:var(--fs-sm); line-height:1.75; }
/* 모바일에서 문단이 길어 접습니다. 전화번호가 든 첫 문장은 늘 보이고
   상담 시간·접수 방법만 접힙니다 — 인용 세트는 접히지 않습니다. (사장님 2026-08-19) */
.phone-answer .pa-more{ margin-top:8px; border:1px solid #d8e0f0; border-radius:8px; }
.phone-answer .pa-more > summary{
  display:flex; align-items:center; gap:7px; min-height:44px; padding:0 13px;
  font-size:var(--fs-sm); color:#5b6b8f; cursor:pointer; list-style:none;
}
.phone-answer .pa-more > summary::-webkit-details-marker{ display:none; }
.phone-answer .pa-more > summary::before{
  content:""; width:6px; height:6px; flex:0 0 auto;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(-45deg); display:inline-block; transition:transform .18s;
}
.phone-answer .pa-more[open] > summary::before{ transform:rotate(45deg); }
.phone-answer .pa-more > p{ margin:0; padding:2px 13px 14px; font-size:var(--fs-sm); line-height:1.75; color:#5b6b8f; }
@media (min-width:769px){
  /* 데스크탑은 자리가 넉넉하니 펼친 채로 두고 접기 테두리도 없앱니다 */
  .phone-answer .pa-more{ border:0; margin-top:0; }
  .phone-answer .pa-more > summary{ display:none; }
  .phone-answer .pa-more > p{ display:block; padding:0; font-size:var(--fs-body); margin-top:10px; }  /* 안전망보다 특이도가 높아 데스크탑에선 늘 보인다 */
}
@media (min-width:769px){
  .phone-answer > h2{ font-size:var(--fs-num-lg); }
  .phone-answer > p{ font-size:var(--fs-body); }
}

/* 지역 랜딩 — 서비스 지역 목록 (시안: 기남 랜딩 모바일.dc.html) */
.dc-area__row{ display:flex; align-items:baseline; gap:8px; min-height:44px;
  padding:4px 0; border-bottom:1px solid #eef1f7; }
.dc-area__row span{ flex:0 0 auto; font-size:var(--fs-sm); font-weight:600; color:#0b1c4d; }
.dc-area__row em{ font-style:normal; font-size:var(--fs-xs); color:#5b6b8f; }
.dc-hero__what{ font-size:var(--fs-body); font-weight:700; color:rgba(255,255,255,.82); }

/* 위 시안 구조로 통일한 절들 (2026-08-17) */
.dc-video{ position:relative; width:100%; aspect-ratio:16/9; border-radius:12px;
  overflow:hidden; background:#0b1c4d; }
.dc-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.dc-row{ display:flex; align-items:baseline; gap:8px; min-height:46px; padding:4px 0;
  border-top:1px solid #d8e0f0; text-decoration:none; }
.dc-row span{ flex:0 0 auto; font-size:var(--fs-sm); font-weight:600; color:#1E40AF; }
.dc-row em{ font-style:normal; font-size:var(--fs-xs); color:#5b6b8f; }

/* 모바일 세로 배치 — 제목 위 · 설명 아래 (2026-08-20 지시서) */
@media (max-width: 520px){
  .dc-row{
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
  .dc-row span{
    flex: 0 1 auto;
    line-height: 1.45;
  }
  .dc-row em{
    font-size:var(--fs-sm);
    line-height: 1.6;
    font-style: normal;
  }
}
.dc-sec .alias-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.dc-sec .alias-tags span{ display:inline-block; padding:6px 10px; background:#F5F8FD;
  border:1px solid #d8e0f0; border-radius:20px; font-size:var(--fs-xs); color:#2B3D63; }
.dc-sec .near-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.dc-sec .near-links a{ font-size:var(--fs-sm); font-weight:600; color:#1E40AF; text-decoration:none; }
/* 2026-08-21 링크 글이 길면 서로 붙어 보여 어디서 끊기는지 모른다.
   .is-chips 를 붙이면 alias-tags 와 같은 알약 모양이 된다 — 기존 near-links 는 그대로. */
.dc-sec .near-links.is-chips a{ display:inline-block; padding:7px 12px;
  background:#fff; border:1px solid #d8e0f0; border-radius:20px;
  font-size:var(--fs-sm); line-height:1.35; color:#1E40AF; }
.dc-sec .near-links.is-chips a:hover{ background:#eef2fb; border-color:#b9c9e6; }

/* ══ 4-2 결과 카드 — 시안 차례 ═══════════════════════════════ */
.dc-plan__lab{ font-size:var(--fs-micro); font-weight:700; color:#5b6b8f;
  margin:14px 0 6px; text-align:left; }
/* 「요금 내역 자세히」 — 12.5px 회색이라 눌러 볼 것이 있는 줄 몰랐습니다.
   상자로 감싸고 글자를 키워 눌러 보게 합니다. (사장님 2026-08-19 「강조해주면 좋겠어」) */
.dc-break{ margin:12px 0 0; border:1px solid #d8e0f0; border-radius:9px; background:#F5F8FD; }
.dc-break > summary{ list-style:none; display:flex; align-items:center; gap:7px;
  min-height:46px; padding:0 13px; font-size:var(--fs-sm); font-weight:700; color:#1E40AF; cursor:pointer; }
.dc-break > summary:hover{ background:#eef2fb; border-radius:9px; }
.dc-break[open] > summary{ border-bottom:1px solid #d8e0f0; border-radius:9px 9px 0 0; }
.dc-break > summary::-webkit-details-marker{ display:none; }
.dc-break > summary::after{ content:""; width:7px; height:7px; margin-left:auto;
  border-right:2px solid #1E40AF; border-bottom:2px solid #1E40AF;
  transform:rotate(45deg) translateY(-2px); }
.dc-break[open] > summary::after{ transform:rotate(-135deg) translateY(-2px); }
.price-card .dc-card__cite{ border-top:1px solid #d8e0f0; margin-top:12px;
  padding-top:10px; font-size:var(--fs-xs); line-height:1.65; color:#5b6b8f; text-align:left; }

/* ══ 탭바가 흐름 안으로 들어오며 남은 보정 걷기 (2026-08-17) ══
   chrome-white.css:64 `.breadcrumb{margin-top:54px}` 는
   옛 .top-tabs-wrapper 가 position:fixed 였을 때의 보정입니다.
   .dc-tabs 는 흐름 안에 있어 그만큼 빈 자리가 생깁니다. */
.dc-tabs + .breadcrumb{ margin-top:2px; }
.dc-tabs + .breadcrumb + .page-title-hidden + .section{ margin-top:0; }

/* AREA 접기 안 목록 (상품 페이지) */
.dc-area__list a{ display:flex; align-items:baseline; gap:7px; min-height:44px;
  padding:4px 0; border-bottom:1px solid #eef1f7;
  font-size:var(--fs-sm); color:#1E40AF; font-weight:600; text-decoration:none; }
.dc-area__list a span{ flex:0 0 auto; }
.dc-area__list a em{ font-style:normal; font-size:var(--fs-xs); font-weight:500; color:#5b6b8f; }
.dc-cta__box .dc-cta__btn{ margin-top:0; }

/* ══ 계산기 STEP 머리글 — 시안 (상품페이지 시안.dc.html) ══════
   STEP 01 (파란 11px) + 제목 (13.5px 700) 한 줄. */
/* 옛 .step-title 의 노란 막대·큰 글씨는 시안과 달라 여기서 지웁니다 */

/* ══ 계산기 진행 바 — 시안의 얇은 막대로 되살림 (2026-08-17) ══
   components.css:9 에서 `display:none` 로 꺼 둔 이유는
   「고정 바가 53px 을 세로로 먹어 화면만 길어진다」였습니다(사장님).
   시안 것은 고정이 아니라 흐름 안 5px 막대라 그 문제가 없습니다.
   JS(#stepProgressBar 의 .step-dot)는 그대로 두고 모양만 바꿉니다. */
.step-progress-bar{
  display:block; position:static;
  background:none; backdrop-filter:none;
  border:0; padding:0; margin:0 0 16px;
  opacity:1; transform:none; pointer-events:auto;
  z-index:auto;
}
/* 리드 바로 아래 (사이에 있던 「어디 기준인가요」 접기는 진행바 뒤로) */
.dc-sec__lead + .step-progress-bar{ margin:2px 0 12px; }
.step-progress-bar + .rate-fold{ margin-top:0; }
.step-progress-bar .step-progress-inner{ display:flex; gap:5px; align-items:center; }
.step-progress-bar .step-dot{
  flex:1 1 0; height:5px; border-radius:3px; background:#E9EEFF;
  font-size:0; line-height:0; padding:0; margin:0; border:0;
  text-decoration:none; transition:background .18s ease;
}
.step-progress-bar .step-dot.active,
.step-progress-bar .step-dot.completed{ background:#1E40AF; }
.step-progress-bar .step-dot.hidden-step{ display:none; }
.step-progress-bar .step-dot .dot,
.step-progress-bar .step-dot .dot-label{ display:none; }
.step-progress-bar .step-line{ display:none; }

/* ══ 계산기 선택 버튼 — 시안 인라인 스타일을 그대로 옮김 ══════
   시안(상품페이지 시안.dc.html) 값:
     구성   grid 1fr 1fr · gap 7px · min-height 52px · 반지름 10px
            테두리 1.5px · 글자 13.5px/600
     속도·채널  가로 한 줄 · flex 1 1 0 · min-height 56px
            제목 14px/700 + 잔글씨 10.5px
     고른 것  배경 #1E40AF · 테두리 #1E40AF · 글자 #fff
   ⚠️ .mobile-grid / .mobile-grid-card / data-sel 은 js/btvpop.js 가 씁니다. */

/* STEP 01(구성)은 2칸 격자 — 시안 grid 1fr 1fr */
/* 나머지 단계는 한 줄 — 시안 flex 1 1 0 */


/* 상품 박스 여백 — 시안: 단계끼리 15px, 안쪽 여백 없음 */

/* 모든 단계 그리드 — 시안 격자 */
/* 고른 칸 오른쪽 위 라디오 점도 시안엔 없습니다 */

/* ══ 박스 크기 고정 — 시안 값 (2026-08-17) ═══════════════════
   옛 시트가 칸마다 다른 높이·여백을 주고 있어 들쭉날쭉했습니다. */
/* 윙즈는 한 줄 전체 */
/* 단계 머리글 잔글씨·배지 */
/* 속도 미터기 자리 (그림을 뺐으니 여백도 뺍니다) */

/* 부가서비스는 두 칸씩 · 윙즈만 한 줄 전체 */

/* ══ 옛 CSS 를 뺀 뒤 필요한 밑바탕 (2026-08-17) ══════════════
   btvpop 은 common·layout·hero·components·install-area 를 부르지 않습니다.
   여기서 필요한 것만 새로 씁니다. */
.page-title-hidden{ position:absolute; width:1px; height:1px; padding:0;
  margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.main-content{ overflow-x:hidden; }
.container{ width:100%; max-width:1080px; margin:0 auto; padding:0 16px;
  box-sizing:border-box; }
.section.pricing{ padding:0 0 40px; }
.breadcrumb{ max-width:1080px; margin:2px auto 0; padding:6px 16px;
  font-size:var(--fs-xs); color:#8b96b8; }
.breadcrumb a{ color:#5b6b8f; text-decoration:none; }
.price-card{ background:#fff; border:1px solid #d8e0f0; border-radius:13px;
  box-shadow:0 2px 10px rgba(30,64,175,.06); padding:16px; margin-top:18px; }
.price-card-header{ font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em;
  color:#2B3D63; margin-bottom:10px; }
/* 금액은 이 카드의 결론이다. 그런데 할인 선택 박스 바로 밑에 놓여 선택지에
   딸린 것처럼 읽혔고, space-between 때문에 숫자가 오른쪽 구석에 떨어져 있었다.
   (사장님 2026-08-19 「밑으로 내려」 · 「위에 껑충하게 나두지 말고」 ·
    「왼쪽으로 좀더」 · 「숫자가 구석에」)
   → 순서를 바꿔 「요금 내역 자세히」 바로 위에 놓고 가운데로 모은다. */
.price-card-body{ display:flex; flex-direction:column; }
.price-vat-note{ order:3; }    /* 금액 박스 바깥 오른쪽 위 */
.price-total-row{ order:4; }   /* 「요금 내역 자세히」 바로 위 */
.dc-break{ order:5; }
.gift-info{ order:6; }
.discount-info{ order:7; }
.price-card-btns{ order:8; }
/* 금액을 박스로 감싸 위 할인형·사은품형 선택 박스와 경계를 만든다.
   조건 문구는 박스 바깥 오른쪽 위로 빼 금액 줄을 깨끗하게 둔다.
   (사장님 2026-08-19 「할인형 사은품형 박스와 경계를 만들어서 요금 출력 돋보이게」
    「3년약정 부가세포함 텍스트 박스 바깥 오른쪽 위로」) */
.price-total-row{ display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-top:0; padding:16px;
  background:#F5F8FD; border:1px solid #d8e0f0; border-radius:12px; }
.price-total-label{ font-size:var(--fs-sm); font-weight:700; color:#2B3D63; }
.estimated-price{ display:flex; align-items:baseline; gap:3px; }
/* 딥블루는 링크 색이라 금액과 역할이 겹쳤다. 네이비가 더 진하고(대비 16.1)
   브랜드에서 제목·상태에 쓰는 색이라 결론 숫자에 맞다 */
/* 옐로우는 글씨로 쓰면 흰 바탕에서 안 보이지만(대비 1.4), 형광펜처럼 밑에 깔면
   글자는 네이비 그대로면서 눈이 먼저 간다 (사장님 「밑줄을 긋든 여튼 금액 돋보이게」) */
.estimated-price .amount{ font-size:var(--fs-num-lg); font-weight:800; color:#0B1C4D;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  box-shadow:inset 0 -9px 0 rgba(255,196,0,.42); }
.price-unit{ font-size:var(--fs-sm); color:#5b6b8f; }
.price-vat-note{ display:block; font-size:var(--fs-micro); color:#5b6b8f;
  margin:16px 3px 5px 0; text-align:right; letter-spacing:-.01em; }
.price-card-btns{ display:flex; gap:8px; margin-top:12px; }
.price-card-btns .button{ flex:1; display:flex; align-items:center; justify-content:center;
  height:50px; border-radius:9px; font-size:var(--fs-body); font-weight:700;
  text-decoration:none; border:0; cursor:pointer; font-family:inherit; }
.price-card-btns .next-step-button{ background:#1E40AF; color:#fff; }
.price-card-btns .btn-consult{ background:#fff; color:#1E40AF; border:1.5px solid #1E40AF; }
.plan-option{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  min-height:44px; border:1.5px solid #d8e0f0; border-radius:9px;
  font-size:var(--fs-sm); font-weight:600; color:#2B3D63; cursor:pointer; background:#fff; }
.plan-option:has(input:checked){ background:#1E40AF; border-color:#1E40AF; color:#fff; }
.plan-option input{ accent-color:#fff; }
.price-breakdown{ font-size:var(--fs-xs); line-height:1.9; color:#5b6b8f; }

/* ══ 계산기 단계 — 시안 값 그대로 (덮개 없음) ═══════════════════ */



/* ══ 옛 시트를 걷어낸 뒤 새로 쓴 것 (CSS정리-지시서 §2-3) ══════
   btvpop 은 common·layout·hero·components·install-area 를 부르지 않습니다.
   아래는 그 시트들이 하던 일 중 본문에 꼭 필요한 것만 새로 쓴 것입니다. */

/* 상담 모달 — 평소 숨김. 옛 components.css 가 하던 일 */
/* ⚠️ align-items:center 였다. 상자(847px)가 화면(812px)보다 크면 위아래로
   삐져나가는데, scrollTop 은 음수가 될 수 없어 잘린 윗부분을 영영 못 본다.
   제목·상품 선택이 화면 밖에 갇히고 아래로도 67px 밖에 안 움직였다.
   flex-start 로 두어야 위에서부터 정상으로 스크롤된다.
   B 모달(.scm-ov)은 처음부터 flex-start 라 멀쩡했다 — 두 벌로 만든 대가다.
   (사장님 2026-08-19 「팝업 스크롤 안돼」 · 「인덱스 랜딩 팝업이 안돼」) */
.consult-modal-overlay{
  position:fixed; inset:0; z-index:1200;
  display:none; align-items: flex-start; justify-content:center;
  background:rgba(11,28,77,.55); padding:16px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.consult-modal-overlay.active{ display:flex; }
.consult-modal{
  width:100%; max-width:460px; margin:auto;
  background:#fff; border-radius:14px; padding:20px 18px;
  box-shadow:0 18px 48px rgba(11,28,77,.28); position:relative;
}
.modal-close-btn{
  position:absolute; top:10px; right:10px; width:36px; height:36px;
  background:none; border:0; font-size:var(--fs-lead); color:#5b6b8f; cursor:pointer;
}

/* 하단 고정 버튼 — 화면 아래 붙입니다 */
.mobile-fixed-buttons{
  position:fixed; left:0; right:0; bottom:0; z-index:900;
  display:flex; align-items:stretch;
}
.mobile-fixed-buttons .mobile-inquiry-btn,
.mobile-fixed-buttons .mobile-call-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  min-height:52px; border:0; border-radius:12px; cursor:pointer;
  font-family:inherit; font-size:var(--fs-body); font-weight:800; text-decoration:none;
}
@media (min-width:821px){ .mobile-fixed-buttons{ display:none; } }

/* ══ 부품 5 — 본문 밑바탕 (CSS정리-지시서 v2) ══════════════════
   btvpop 은 common · layout · hero · install-area · phone-tooltip 을
   부르지 않습니다. 그 시트들이 하던 일 중 필요한 것만 시안 값으로 씁니다.
     body 배경 #eef1f7 · 글꼴 Pretendard   ← 상품페이지 시안.dc.html
     금액 34px/800/-0.03em/#1E40AF          ← 같은 파일 결과 카드
   ⚠️ !important 를 쓰지 않습니다. */
body{
  margin: 0;
  background: #eef1f7;
  color: #15223f;
  font-family: "Pretendard Variable", Pretendard, -apple-system,
               "Malgun Gothic", sans-serif;
  font-weight: 500;          /* 2026-08-19 사장님 「너무 얇아」 — 선언이 없어 400 이었다 */
  -webkit-text-size-adjust: 100%;
}
*, *::before, *::after{ box-sizing: border-box; }
img{ max-width: 100%; }
a{ color: #1E40AF; }

/* 결과 카드 금액 — 시안 34px */
.estimated-price .amount{ font-size:var(--fs-heading); line-height: 1.05; }
.price-unit{ font-size:var(--fs-sm); }



/* 제휴카드 배너 — 옛 install-area.css 자리 */
.affiliate-card-link{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 48px; margin-top: 10px; padding: 0 14px;
  background: #F5F8FD; border: 1px solid #d8e0f0; border-radius: 10px;
  font-size:var(--fs-sm); font-weight: 600; color: #2B3D63; text-decoration: none;
}
.affiliate-card-msg{ display: flex; align-items: center; gap: 7px; }
.affiliate-card-cta{ color: #1E40AF; white-space: nowrap; }

/* 휴대폰 결합은 셋 칸 (결합함 · 복지 할인 · 안 함) — 통합지시서 4-4 */
/* 할인 방식 선택도 같은 버튼 꼴 — 라디오를 걷었습니다 */

/* ══ 박스 크기·정렬 — 시안 값으로 맞춤 (2026-08-18) ══════════
   시안: 구성 2칸 · 나머지 한 줄 · 칸 높이는 56px 하나로. */

/* 요금 내역 — 이름과 금액을 두 칸으로 (겹쳐 보이던 자리) */
.price-breakdown{ display: flex; flex-direction: column; gap: 4px; }
.price-breakdown > *{
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.price-breakdown .di-sub{
  display: block; width: 100%; font-size:var(--fs-micro); color: #5b6b8f;
}
.gift-info, .discount-info{
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: 6px; font-size:var(--fs-xs); color: #5b6b8f;
}
.gift-label{ display: flex; align-items: center; gap: 5px; }
.gift-value{ font-weight: 700; color: #1E40AF; white-space: nowrap; }
.gift-coin-icon{ width: 16px; height: 16px; }

/* ══════════════════════════════════════════════════════════════
   계산기 — 시안 값 한 벌 (상품페이지 시안.dc.html)
   ⚠️ 여기 말고 다른 데서 .select1 · .mobile-grid 를 건드리지 않습니다.
      규칙이 흩어지면 무엇이 이기는지 다시 헤매게 됩니다.
   ══════════════════════════════════════════════════════════════ */
.pricing-steps{ display:flex; flex-direction:column; gap:15px; margin-top:2px; }
.select1{ background:none; border:0; padding:0; margin:0; }

/* 단계 구분선 — 고른 칸이 전부 파랑이라 어디서 한 단계가 끝나는지 안 보였습니다.
   마지막 단계 아래에는 긋지 않습니다. (사장님 2026-08-19 「밑줄정도 라도」) */
.pricing-steps > .select1:not(:last-child){
  padding-bottom:15px; border-bottom:1px solid #e7ecf7;
}
/* 모바일은 화면이 좁아 단계가 더 붙어 보입니다. 선을 조금 더 또렷하게. */
@media (max-width:768px){
  .pricing-steps{ gap:13px; }
  .pricing-steps > .select1:not(:last-child){ padding-bottom:13px; border-bottom:1px solid #d8e0f0; }
}

.dc-step{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; margin:0 0 8px; }
.dc-step .step-number{ font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; color:#1E40AF; }
.dc-step__t{ font-size:var(--fs-sm); font-weight:700; color:#0b1c4d; letter-spacing:-.01em; }
.dc-step__n{ font-size:var(--fs-micro); font-weight:500; color:#5b6b8f; }

/* 격자 — 열 수는 마크업의 data-cols 가 정합니다.
   ⚠️ .select1.step1 처럼 단계 번호로 정하면 안 됩니다.
      btvpop 의 step1 은 4칸, btv 의 step1 은 3칸이라 같은 이름에 뜻이 달라
      한 장을 맞추면 다른 장이 깨집니다(2026-08-18 실제로 그랬습니다). */
.mobile-grid{ display:grid; gap:7px; grid-template-columns:repeat(3, minmax(0,1fr)); }
.mobile-grid[data-cols="2"]{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.mobile-grid[data-cols="3"]{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.mobile-grid[data-cols="4"]{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.mobile-grid-card.dc-wings{ grid-column:1 / -1; }

/* 칸 — 높이 하나로 */
.mobile-grid-card{
  min-height:56px; padding:9px 8px; box-sizing:border-box;
  background:#fff; border:1.5px solid #d8e0f0; border-radius:10px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
}
.select1.step1 .mobile-grid-card{ min-height:52px; }
.mobile-grid-card h3{
  margin:0; font-size:var(--fs-sm); font-weight:600; color:#2B3D63;
  line-height:1.3; text-align:center; letter-spacing:-.01em;
}
.mobile-grid-card p{
  margin:0; font-size:var(--fs-micro); color:#5b6b8f; line-height:1.35; text-align:center;
}
.mobile-grid-card img{ display:none; }

/* 할인 방식 — 같은 버튼 꼴, 두 칸 */
.plan-type-selector{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }

/* ══ 진행 바 — dc-legacy.css 에서 옮겨 옴 (!important 뗐습니다) ══
   옛 components.css:9 가 display:none 으로 꺼 두었던 것을 되살린 규칙입니다.
   그 시트를 안 부르니 무게가 필요 없습니다. 시안은 흐름 안 5px 막대입니다. */
.step-progress-bar{
  display: block; position: static;
  background: none; border: 0; padding: 0;
  margin: 2px 0 12px;
  opacity: 1; transform: none; pointer-events: auto;
}
.step-progress-bar .step-progress-inner{ display: flex; gap: 5px; align-items: center; }
.step-progress-bar .step-dot{
  flex: 1 1 0; height: 5px; border-radius: 3px; background: #E9EEFF;
  font-size: 0; line-height: 0; padding: 0; margin: 0; border: 0;
  text-decoration: none; transition: background .18s ease;
}
.step-progress-bar .step-dot.active,
.step-progress-bar .step-dot.completed{ background: #1E40AF; }
.step-progress-bar .step-dot.hidden-step{ display: none; }
.step-progress-bar .step-dot .dot,
.step-progress-bar .step-dot .dot-label,
.step-progress-bar .step-line{ display: none; }

/* SKT 추가할인 · 더슬림 알림 — 한 줄로 (글자가 서로 엉키던 자리)
   시안: 왼쪽 설명 / 오른쪽 금액, 잔글씨는 아래 줄 전체. */
.gift-info, .discount-info{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 8px;
  font-size:var(--fs-xs);
  line-height: 1.6;
  color: #5b6b8f;
}
.gift-info .gift-label,
.discount-info > strong{ min-width: 0; }
.gift-value{ justify-self: end; font-weight: 700; color: #1E40AF; white-space: nowrap; }
.di-sub{
  grid-column: 1 / -1;
  font-size:var(--fs-micro); line-height: 1.5; color: #5b6b8f;
}
.discount-info svg{ width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }

/* SKT 추가할인 — 설명 / 금액 / 잔글씨 */
.discount-info .di-t{ min-width:0; }
.discount-info .di-v{ justify-self:end; font-weight:700; color:#1E40AF; white-space:nowrap; }

/* 할인 방식 버튼 — 시안: 두 칸 같은 크기, 높이 56px */
.plan-type-selector{
  display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:6px 0 12px;
}
.plan-type-selector .mobile-grid-card{ min-height:56px; width:auto; }

/* 고른 칸 — 맨 뒤에 두어 다른 규칙에 눌리지 않게 합니다 */
.mobile-grid-card.selected{ background:#1E40AF; border-color:#1E40AF; }
.mobile-grid-card.selected h3{ color:#fff; }
.mobile-grid-card.selected p{ color:rgba(255,255,255,.78); }

/* 결과 카드 버튼 — 시안: 하나, 높이 52px, #1E40AF, 반지름 9px, 16px/700 */
.price-card-btns{ display:block; margin-top:12px; }
.price-card-btns .button{
  display:flex; align-items:center; justify-content:center;
  height:52px; width:100%;
  background:#1E40AF; border:0; border-radius:9px;
  color:#fff; font-family:inherit; font-size:var(--fs-body); font-weight:700;
  text-decoration:none; cursor:pointer;
}

/* ═══════════════════════════════════════════════════════════
   요금 내역 줄 — js/btvpop.js·btv.js·btvcable.js 가 만듭니다
   시안(상품페이지 시안.dc.html)은 <table> 로 그렸고, 값만 그대로 옮겼습니다.
   ⚠️ 할인 줄 색은 시안이 템플릿 변수({{ r.c }})라 값이 없어
      브랜드 2순위 행동색 #1E40AF 로 정했습니다.
   ═══════════════════════════════════════════════════════════ */
.price-row{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid #e4eaf5;
  font-variant-numeric: tabular-nums;
}
.price-row:last-child{ border-bottom: 0; }
.pr-label{
  display: flex; align-items: center; gap: 6px;
  font-size:var(--fs-xs); color: #374151;
}
.pr-value{
  font-size:var(--fs-xs); font-weight: 600; color: #0b1c4d; white-space: nowrap;
}
.price-row.is-discount .pr-value{ color: #1E40AF; }

/* FAQ 안 정리 한 줄 — 「👉 …」 */
.btvpop-faq-cta{
  margin: 10px 0 0; padding: 11px 13px;
  background: #f2f6fd; border-left: 3px solid #FFC400; border-radius: 0 8px 8px 0;
  font-size:var(--fs-sm); line-height: 1.7; color: #2B3D63;
}

/* 본문 링크 — 시안 본문 글자색 그대로, 밑줄로만 구분 */
.content-link, .tel-a{
  color: #1E40AF; font-weight: 600; text-decoration: underline;
  text-underline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════
   APPLY 접수 폼 — 시안 「상품페이지 시안.dc.html」 APPLY 절 값 그대로
   ═══════════════════════════════════════════════════════════ */
.dc-apply__hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.dc-apply__sum{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:11px 12px;
  background:#F5F8FD; border:1px solid #d8e0f0; border-radius:9px;
}
.dc-apply__sum-l{ font-size:var(--fs-xs); line-height:1.55; color:#5b6b8f; }
.dc-apply__sum-l span{ color:#2B3D63; font-weight:600; }
.dc-apply__sum-v{
  font-size:var(--fs-body); font-weight:800; color:#1E40AF;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

.dc-apply__fields{ display:flex; flex-direction:column; gap:12px; margin-top:14px; }
.dc-apply__f{ display:flex; flex-direction:column; gap:6px; }
.dc-apply__f label{ font-size:var(--fs-xs); font-weight:600; color:#5b6b8f; }
.dc-apply__req{ color:#1E40AF; }
.dc-apply__opt{ font-weight:500; color:#5b6b8f; }
.dc-apply__f input{
  height:50px; padding:0 13px;
  border:1px solid #d8e0f0; border-radius:8px;
  font-family:inherit; font-size:var(--fs-body); color:#0b1c4d; background:#fff;
  box-sizing:border-box; width:100%;
}
.dc-apply__f textarea{
  padding:11px 12px; min-height:78px; resize:vertical;
  border:1px solid #d8e0f0; border-radius:8px;
  font-family:inherit; font-size:var(--fs-body); line-height:1.6; color:#0b1c4d; background:#fff;
  box-sizing:border-box; width:100%;
}
.dc-apply__f input:focus, .dc-apply__f textarea:focus{ outline:2px solid #1E40AF; outline-offset:-2px; }

.dc-apply__agree{
  display:flex; align-items:flex-start; gap:8px; margin-top:14px;
  font-size:var(--fs-sm); line-height:1.6; color:#374151; cursor:pointer;
}
.dc-apply__agree input{ margin-top:2px; width:18px; height:18px; accent-color:#1E40AF; flex:0 0 auto; }

.dc-apply__priv{ margin-top:8px; border:1px solid #d8e0f0; border-radius:8px; }
.dc-apply__priv > summary{
  display:flex; align-items:center; gap:7px; min-height:44px; padding:0 12px;
  list-style:none; font-size:var(--fs-xs); color:#5b6b8f; cursor:pointer;
}
.dc-apply__priv > summary::-webkit-details-marker{ display:none; }
.dc-apply__priv > summary::before{
  content:""; width:6px; height:6px; flex:0 0 auto;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(-45deg);
}
.dc-apply__priv[open] > summary::before{ transform:rotate(45deg); }
.dc-apply__priv > div{
  display:flex; flex-direction:column; gap:8px;
  padding:2px 12px 14px; font-size:var(--fs-xs); line-height:1.75; color:#5b6b8f;
}
.dc-apply__priv b{ color:#2B3D63; font-weight:600; }
.dc-apply__priv a{ color:#1E40AF; font-weight:600; }

.dc-apply .dc-cta__btn{ margin-top:14px; }

/* ═══════════════════════════════════════════════════════════
   계산기 — 데스크탑 2단
   시안 pop-desktop.dc.html: 「왼쪽에서 조건을 고르면 오른쪽 금액이 바로 바뀝니다」
   값 그대로 — 격자 minmax(320px,1.05fr) minmax(300px,.95fr) · gap 28px ·
   align-items:start · 오른쪽 열 position:sticky top:16px
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 960px){
  .pricing-layout{
    display: grid;
    grid-template-columns: minmax(320px, 1.05fr) minmax(300px, .95fr);
    gap: 28px; align-items: start;
  }
  .pricing-layout > .price-card{ position: sticky; top: 16px; }
}



/* 계산기가 히어로 밖으로 나오면 흰 배경 위 흰 카드가 됩니다 — 테두리로 세웁니다 */
.dc-sec--tint .dc-calc{ border:1px solid #d8e0f0; margin-top:14px; }
/* 2026-08-19 지시서 「점검-index-데스크탑.md」 §1 — 계산기가 왼쪽 1/3만 쓰고
   오른쪽 2/3가 비어 있었다. 좌우 2열로 벌린다: 왼쪽 1·2·3 선택, 오른쪽 금액과 CTA.
   조건을 바꾸면 오른쪽 금액이 눈앞에서 바뀐다(상품 페이지 pop-desktop 과 같은 구조).
   ⚠️ 480px 은 예전에 카드 하나가 1,032px 로 퍼져 「너무 크고 폭이」 하셔서 줄인 값이다.
      이번은 한 카드를 넓히는 것이 아니라 두 칸으로 나누는 것이라 성격이 다르다. */
@media (min-width:769px){
  .dc-sec--tint .dc-calc{
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0,1.05fr) minmax(300px,.95fr);
    column-gap: 28px;
    align-items: start;
  }
  .dc-sec--tint .dc-calc__head,
  .dc-sec--tint .dc-calc__bars{ grid-column: 1 / -1; }
  .dc-sec--tint .dc-calc__lab,
  .dc-sec--tint .dc-calc__row{ grid-column: 1; }
  /* ⚠️ grid-row:3/-1 은 안 된다. 명시적 행(grid-template-rows)이 없으면 -1 이
     1행선이 되어 역방향으로 읽히고, 금액칸이 머리말보다 위로 튀어나온다.
     span 으로 적어야 첫 선택지와 나란히 선다. */
  .dc-sec--tint .dc-calc__out{ grid-column: 2; grid-row: 3 / span 6; align-self: start; margin-top: 0; }
}

/* 표 감싸개 — 좁은 화면에서 표만 옆으로 굴러가게 (본문은 안 밀립니다) */
.table-wrapper{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-wrapper > table{ min-width:100%; }
/* 2026-08-21 열이 다섯 이상인 표는 좁은 화면에서 숫자가 서로 붙는다.
   (「42,900원31,900원26,400원」처럼 읽힌다 — dc-tbl td 에 좌우 여백이 없어서다.)
   .is-wide 를 붙인 표만 최소 폭을 주어 .table-wrapper 안에서 옆으로 밀어 본다. */
/* 2026-08-21 칸이 여럿인 표는 세로선이 있어야 눈이 안 흐른다 (사장님 「바둑판 라인」).
   .is-grid 를 붙인 표에만 준다 — 기존 표 2,200여 개는 그대로 둔다. */
.dc-tbl.is-grid{ border:1px solid #d8e0f0; border-radius:8px; overflow:hidden; background:#fff; }
.dc-tbl.is-grid th, .dc-tbl.is-grid td{ border-right:1px solid #e4eaf5;
  padding-left:8px; padding-right:8px; }
.dc-tbl.is-grid th:last-child, .dc-tbl.is-grid td:last-child{ border-right:0; }
.dc-tbl.is-grid th{ background:#eef3fb; border-bottom:1.5px solid #0b1c4d; }
.dc-tbl.is-grid tbody tr:last-child td{ border-bottom:0; }

@media (max-width:768px){
  .table-wrapper > table.dc-tbl.is-wide{ min-width:540px; }
  .table-wrapper > table.dc-tbl.is-wide th,
  .table-wrapper > table.dc-tbl.is-wide td{ padding-left:6px; padding-right:6px; }
}

/* qna 본문 — 구역 제목 */
.section-title{
  margin:0 0 12px; font-size:var(--fs-subtitle); font-weight:800;
  letter-spacing:-.02em; color:#0b1c4d;
}
.crumb{
  max-width:1080px; margin:0 auto; padding:10px 16px;
  font-size:var(--fs-xs); color:#5b6b8f;
}
.crumb a{ color:#5b6b8f; text-decoration:none; }
/* 인라인 style 을 걷으면서 생긴 두 조각 — qna 처럼 흰 바탕에 쓰는 경우 */
.crumb .sep{ color:#c3cbe0; }
.crumb .here{ color:#3c4770; font-weight:600; }

/* ── 히어로에 얹히는 브레드크럼 (2026-08-21) ──────────────────
   랜딩 26장은 브레드크럼이 **인라인 style 로 박혀** 있어 CSS 로 손댈 수 없었다.
   그래서 상품 페이지(.breadcrumb max-width 1080)와 여백이 어긋났다(인라인은 1200).
   사장님: 「상품페이지와 폰트 크기 등이 틀려 · 히어로 바탕색과 동일하게 하고
            글자색만 바꾸는 것도 검토」

   이 랜딩들은 히어로가 **전체 폭**이라, 브레드크럼도 같은 네이비로 두면
   위쪽이 한 덩어리로 이어지고 어정쩡한 흰 띠가 사라진다.
   ⚠️ 상품 페이지는 히어로가 좌우 16px 들여쓰기(카드처럼)라 여기 해당하지 않는다.
   ⚠️ qna.html 의 .crumb 은 뒤가 히어로가 아니다 — 그래서 클래스를 따로 뒀다.

   대비 실측(#0b1c4d 바탕) — 링크 7.69 · 현재 위치 13.92 · 구분자 4.06 */
.crumb--hero{
  max-width:none; margin:0; padding:9px 18px 3px;
  background:#0b1c4d; color:rgba(255,255,255,.42);
  font-size:var(--fs-xs); line-height:1.6; word-break:keep-all;
}
.crumb--hero a{ color:rgba(255,255,255,.66); text-decoration:none; }
.crumb--hero .sep{ color:rgba(255,255,255,.46); }
.crumb--hero .here{ color:rgba(255,255,255,.92); font-weight:600; }
.crumb--hero + .dc-hero{ padding-top:10px; }

/* 어두운 히어로 안에 들어가는 브레드크럼 (news.html).
   .crumb--hero 와 달리 **배경을 칠하지 않는다** — 이미 히어로 안이라 부모 색을 그대로 쓴다.
   2026-08-21: news 히어로가 혼자 딥블루(#1E40AF)였다. 딥블루는 브랜드에서 2순위 행동 색이고
   히어로는 상태·제목 자리라 네이비(#0b1c4d)로 맞췄다. */
.crumb--ondark{
  margin:0 0 16px; padding:0;
  font-size:var(--fs-xs); line-height:1.6; color:rgba(255,255,255,.5); word-break:keep-all;
}
.crumb--ondark a{ color:rgba(255,255,255,.74); text-decoration:none; }
.crumb--ondark .sep{ color:rgba(255,255,255,.4); margin:0 2px; }
.crumb--ondark .here{ color:rgba(255,255,255,.95); font-weight:600; }

/* qna FAQ 절 — 히어로 바로 아래라 여백이 필요합니다.
   전에는 .signup-desk 문단이 여백 노릇을 했는데 그 문단을 걷었습니다(2026-08-18).
   값은 .dc-sec 와 같게 둡니다. */
.faq-section{ padding:26px 16px 30px; }
@media (min-width:769px){
  .faq-section{ padding:44px 24px 50px; }
}
/* FAQ 갈래 제목 옆 개수 — 시안 faq-about-mock.dc.html */
.dc-faq__g > b small{ margin-left:6px; font-size:var(--fs-xs); font-weight:500; color:#5b6b8f; }

/* ═══════════════════════════════════════════════════════════
   .fold-blk — 「⚠️ 가입 전 확인하세요」 류 접기. index·about·권역 25장 공용.
   껍데기 스타일이 어느 시트에도 없어 25장 모두 맨살(24px)로 나왔습니다.
   cite.css 는 .fold-blk__b(본문 글자)만 갖고 있습니다.
   값은 .dc-look 접기와 같게 둡니다.
   ═══════════════════════════════════════════════════════════ */
.fold-blk{
  max-width:1080px; margin:18px auto 0;
  border:1px solid #d8e0f0; border-radius:11px;
  background:#F5F8FD;
}
.fold-blk > summary{
  display:flex; align-items:center; gap:8px; min-height:46px; padding:0 14px;
  list-style:none; font-size:var(--fs-sm); font-weight:600; color:#2B3D63; cursor:pointer;
}
.fold-blk > summary::-webkit-details-marker{ display:none; }
.fold-blk > summary::after{
  content:""; width:6px; height:6px; margin-left:auto; flex:0 0 auto;
  border-right:2px solid #5b6b8f; border-bottom:2px solid #5b6b8f;
  transform:rotate(45deg);
}
.fold-blk[open] > summary::after{ transform:rotate(-135deg); }
.fold-blk > .fold-blk__b{ padding:2px 14px 14px; }

/* ABOUT 본문 상자 — 시안 faq-about-mock.dc.html 값 그대로 */
.dc-about__box{
  margin:0; padding:18px 20px;
  background:#F5F8FD;
  border:1px solid #d8e0f0; border-left:3px solid #1E40AF;
  border-radius:10px;
  font-size:var(--fs-body); line-height:1.85; color:#374151;
}
.dc-about__box b{ color:#2B3D63; font-weight:700; }
.dc-about__box p{ margin:0; }
.dc-about__box p + p, .dc-about__d p + p{ margin-top:10px; }
.dc-about__box > .dc-about__cite{ margin-top:12px; }
/* 세 축 접기 — 데스크탑은 펼친 채로 두고 요약줄을 감춥니다.
   모바일은 글이 길어 접습니다 (사장님 2026-08-18 「모바일은 길어」 「접어」).
   ⚠️ 글은 한 자도 바꾸지 않았습니다. HTML 에 그대로 남아 검색·AI 가 다 읽습니다. */
/* 데스크탑 — 접기를 쓰지 않습니다. 요약줄을 감추고 본문은 닫혀 있어도 펼쳐 둡니다 */
.dc-about__d > summary{ display:none; }
.dc-about__d > p{ display:block; }
.dc-about__d > p:first-of-type{ margin-top:10px; }
@media (max-width:768px){
  .dc-about__d > summary{
    display:inline-flex; align-items:center; gap:6px; margin-top:10px;
    list-style:none; cursor:pointer;
    font-size:var(--fs-sm); font-weight:700; color:#1E40AF;
  }
  .dc-about__d > summary::-webkit-details-marker{ display:none; }
  .dc-about__d > summary::after{
    content:""; width:6px; height:6px;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(45deg);
  }
  .dc-about__d[open] > summary::after{ transform:rotate(-135deg); }
  /* 모바일 — 닫혀 있으면 감춥니다 */
  .dc-about__d:not([open]) > p{ display:none; }
}
.dc-about__box a{ color:#1E40AF; text-decoration:none; font-weight:700; }

/* ═══════════════════════════════════════════════════════════
   COVERAGE 권역 목록 — 시안 faq-about-mock.dc.html 값 그대로
   ═══════════════════════════════════════════════════════════ */
.dc-cov{ display:flex; flex-direction:column; gap:18px; }
.dc-cov__t{
  margin-bottom:8px;
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em; color:#2B3D63;
}
.dc-cov__l{ display:flex; flex-wrap:wrap; gap:8px; }
.dc-cov__l a{
  display:inline-flex; align-items:baseline; gap:7px;
  min-height:44px; padding:0 14px;
  background:#fff; border:1px solid #d8e0f0; border-radius:9px;
  font-size:var(--fs-sm); font-weight:600; color:#1E40AF; text-decoration:none;
}
.dc-cov__l a:hover{ border-color:#1E40AF; }
.dc-cov__l em{ font-size:var(--fs-xs); font-weight:500; font-style:normal; color:#5b6b8f; }
.dc-cov__out{
  display:flex; align-items:center; gap:10px; margin-top:18px;
  padding:13px 15px;
  background:#F5F8FD; border:1px solid #d8e0f0; border-radius:11px;
  font-size:var(--fs-sm); line-height:1.7; color:#5b6b8f;
}
.dc-cov__out img{ width:34px; height:34px; object-fit:contain; flex:0 0 auto; }
.dc-cov__out a{ color:#1E40AF; font-weight:700; text-decoration:none; }

/* WHY 카드 — 시안 faq-about-mock.dc.html whys 값 그대로 */
.dc-why{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; }
.dc-why__c{
  padding:18px 20px;
  background:#fff; border:1px solid #d8e0f0; border-radius:13px;
}
.dc-why__c img{ width:34px; height:34px; object-fit:contain; display:block; margin-bottom:10px; }
.dc-why__c b{ display:block; margin-bottom:6px; font-size:var(--fs-body); font-weight:700; color:#0b1c4d; }
.dc-why__c span{ display:block; font-size:var(--fs-sm); line-height:1.7; color:#5b6b8f; }

/* ═══════════════════════════════════════════════════════════
   가입 가이드 히어로 — 두 상품 비교 카드
   시안 guide-mock.dc.html heroCompare 값 그대로
   ═══════════════════════════════════════════════════════════ */
.dc-gcmp{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:12px; margin-top:24px; max-width:720px;
}
.dc-gcmp__c{
  display:block; padding:16px 18px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.2);
  border-radius:12px; text-decoration:none;
}
.dc-gcmp__c:hover{ border-color:rgba(255,255,255,.45); }
.dc-gcmp__h{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dc-gcmp__h span{ font-size:var(--fs-body); font-weight:700; color:#fff; }
.dc-gcmp__h em{
  flex:0 0 auto; padding:4px 9px; border-radius:6px;
  background:#FFC400; color:#0b1c4d;
  font-size:var(--fs-micro); font-weight:700; font-style:normal; white-space:nowrap;
}
.dc-gcmp__p{ display:flex; align-items:baseline; gap:5px; margin-top:9px; }
.dc-gcmp__p b{
  font-size:var(--fs-title); font-weight:800; letter-spacing:-.03em; line-height:1.05;
  color:#FFC400; font-variant-numeric:tabular-nums;
}
.dc-gcmp__p span{ font-size:var(--fs-sm); color:rgba(255,255,255,.7); }
.dc-gcmp__cond{ margin-top:7px; font-size:var(--fs-micro); line-height:1.6; color:rgba(255,255,255,.62); }
.dc-gcmp__where{ margin-top:6px; font-size:var(--fs-xs); line-height:1.6; color:rgba(255,255,255,.78); }
.dc-gcmp__cta{ margin-top:10px; font-size:var(--fs-sm); font-weight:700; color:#FFC400; }
/* h1 안 노란 강조 — 시안 <span style="color:#FFC400"> */
.dc-hero h1 .yl{ color:#FFC400; }
/* 가입 가이드 — 절 안 주석 문단 */
.popdef{
  padding:16px 18px;
  background:#F5F8FD; border:1px solid #d8e0f0; border-left:3px solid #1E40AF;
  border-radius:10px; font-size:var(--fs-sm); line-height:1.8; color:#374151;
}
.setnote{ margin-top:14px; font-size:var(--fs-sm); line-height:1.7; color:#5b6b8f; }
/* 유심동판 — USIM 절 안 카드 2장 */
.dc-usim{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:14px; }
.dc-usim__c{ padding:18px 20px; background:#fff; border:1px solid #d8e0f0; border-radius:13px; }
/* 두 상자의 제목 줄 수가 달라(1줄 vs 2줄) 표 시작 높이가 36px 어긋나 있었습니다.
   두 줄 자리를 미리 잡아 표가 같은 자리에서 시작하게 합니다. (2026-08-19) */
.dc-usim__c > h2{ min-height:72px; display:flex; align-items:flex-start; }


/* ═══════════════════════════════════════════════════════════
   랜딩 접수 상자 · 등장 애니메이션 · 앵커 여백
   2026-08-18 cable-guide.css 에서 옮겨 왔습니다.
   그 시트를 걷으려면 이것들이 먼저 여기 있어야 합니다(26장 공용).
   ═══════════════════════════════════════════════════════════ */
.apply-box{background:var(--navy2);border:1px solid var(--line);border-radius:22px;padding:30px 26px;text-align:left;max-width:520px;margin:0 auto;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.apply-ok{display:none;padding:6px 2px 4px}
.apply-ok-top{text-align:center;padding:4px 0 18px;border-bottom:1px solid var(--line);margin-bottom:18px}
.apply-ok-mascot{width:88px;height:88px;object-fit:contain;margin-bottom:10px}
.apply-ok h3{font-size:var(--fs-title);font-weight:900;color:var(--ink);letter-spacing:-.6px;margin-bottom:6px}
.apply-ok-top p{color:var(--mut);font-size:var(--fs-sm);font-weight:700}
.apply-now{display:flex;align-items:flex-start;gap:9px;background:var(--navy2);border-radius:12px;
  padding:12px 14px;margin-bottom:18px;font-size:var(--fs-xs);font-weight:800;color:var(--ink);line-height:1.55;word-break:keep-all}
.apply-now i{color:var(--blue);flex:none;margin-top:2px}
.apply-now.off{background:#fff8e1}
.apply-now.off i{color:#b8860b}
.apply-lab{font-size:var(--fs-micro);font-weight:900;color:var(--blue);letter-spacing:.5px;margin-bottom:11px}
.apply-steps{list-style:none;counter-reset:s;margin:0;padding:0}
.apply-steps li{counter-increment:s;display:block;padding:0 0 16px 37px;position:relative}
.apply-steps li::before{content:counter(s);position:absolute;left:0;top:0;
  width:25px;height:25px;border-radius:50%;
  background:#fff;border:2px solid var(--line);color:#a8b2ca;font-size:var(--fs-xs);font-weight:900;
  display:flex;align-items:center;justify-content:center;z-index:1}
.apply-steps li.ok::before{content:'✓';background:var(--blue);border-color:var(--blue);color:#fff}
.apply-steps li.cur::before{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.apply-steps li:not(:last-child)::after{content:'';position:absolute;left:11.5px;top:25px;bottom:0;width:2px;background:var(--line)}
.apply-steps li.ok:not(:last-child)::after{background:var(--blue)}
.apply-steps li b{display:block;font-size:var(--fs-sm);font-weight:900;color:#8b96b8;margin-bottom:2px}
.apply-steps li.ok b,.apply-steps li.cur b{color:var(--ink)}
.apply-steps li.cur b::after{content:'지금';margin-left:7px;background:var(--yellow);color:var(--ink);
  font-size:var(--fs-micro);font-weight:900;padding:2px 7px;border-radius:999px;vertical-align:1px}
.apply-steps li span{display:block;font-size:var(--fs-xs);color:var(--mut);font-weight:700;line-height:1.55}
.apply-tel{margin-top:4px;background:var(--ink);border-radius:14px;padding:17px;text-align:center}
.apply-tel .k{font-size:var(--fs-xs);color:#9fb0da;font-weight:800;margin-bottom:6px}
.apply-tel a{display:block;font-size:var(--fs-num-lg);font-weight:900;color:var(--yellow);
  text-decoration:none;letter-spacing:-1px;white-space:nowrap}
.apply-tel a.sm{font-size:var(--fs-num-md)}
.apply-tel .c{margin-top:8px;font-size:var(--fs-micro);color:#c7d2fe;font-weight:800;line-height:1.5}
.apply-tel .c b{white-space:nowrap}
.apply-tel .ai{background:rgba(255,255,255,.09);border-radius:10px;padding:11px 13px;
  color:#c7d2fe;font-size:var(--fs-xs);font-weight:800;line-height:1.5;margin-bottom:11px}
.apply-tel .ai i{color:var(--yellow);margin-right:6px}
.apply-safe{margin-top:14px;font-size:var(--fs-micro);color:#8a94ac;line-height:1.6;
  background:#f4f6fb;border-radius:9px;padding:9px 12px;text-align:center}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
[id]{scroll-margin-top:80px}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important}}

/* 문서 공통 — cable-guide.css 에서 옮김 2026-08-18 */
*{margin:0;padding:0;box-sizing:border-box}
a{text-decoration:none;color:inherit}
img{max-width:100%}
h1,h2,h3,.sec-head h2,.slim-l h2,.cta h2,.sec-head p{text-wrap:balance}

/* cable-guide.css :root 에 있던 토큰 — 그 시트를 걷기 위해 옮겼습니다 2026-08-18 */
:root{
  --navy: #ffffff;
  --navy2: #eef2fa;
  --navy3: #e3eaf7;
  --blue: #1E40AF;
  --yellow: #FFC400;
  --ink: #0b1c4d;
  --white: #0b1c4d;
  --mut: #5b6b8f;
  --line: #d8e0f0;
  --soft: #2b3d63;
  --lav: #1E40AF;
  --b-orange: #F7CAB4;
  --b-pink: #F7DBE9;
  --b-yellow: #F9E8C0;
  --b-green: #BBEDD0;
  --b-cyan: #BCE2FF;
  --b-blue6: #E9EEFF;
  --b-gray7: #F5F5F6;
  --fs-display: 60px;
  --fs-heading: 38px;
  --fs-title: 25px;
  --fs-subtitle: 20px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12.5px;
  --fs-micro: 11px;
  --fs-num-xl: 40px;
  --fs-num-lg: 30px;
  --fs-num-md: 22px;
}

/* 화면 폭별 글꼴 토큰 — cable-guide.css 에서 옮김 2026-08-18
   빼먹어 usim·signup 히어로 글자가 20px 어긋났습니다. */
@media(max-width:860px){
  :root{ --fs-display:40px;--fs-heading:29px;--fs-title:22px;--fs-subtitle:19px; --fs-lead:16px;--fs-body:15px;--fs-num-xl:34px;--fs-num-lg:27px; }
}
@media(max-width:480px){
  /* 🚨 모바일 글자를 되올렸습니다 (2026-09-02 · 사장님 「모바일에서 작아졌어」)
     ⚠️ **이 값은 세 파일에 똑같이 있습니다** — `css/cable-guide.css` · `css/cite.css` · 여기.
        하나만 고치면 어느 파일이 뒤에 로드되느냐에 따라 **장마다 글자가 달라집니다.**
        2026-09-02 아침에 앞 둘만 고치고 여기를 빠뜨려, 권역 장에서 값이 어긋났습니다.
     ⚠️ **모바일 본문 16px 은 권장값입니다.** 더 내리지 마십시오.
        되올리기 전에는 lead·body 14.5 · sm 13 · xs 12 · subtitle 18 이었습니다. */
  :root{ --fs-display:31px;--fs-heading:24px;--fs-title:21px;--fs-subtitle:19px; --fs-lead:16px;--fs-body:16px;--fs-sm:14px;--fs-xs:12.5px; --fs-num-xl:30px;--fs-num-lg:25px;--fs-num-md:20px; }
}
@media(max-width:400px){
  :root{ --fs-display:27px;--fs-heading:21px;--fs-title:19px;--fs-subtitle:17px; --fs-num-xl:27px;--fs-num-lg:23px; }
}

/* 실시간 상담 패널 · 그 밖 — index.css · region.css 에서 옮김 2026-08-18 */
.live-panel{max-width:760px;margin:0 auto;border:1px solid #e3e8f2;border-radius:14px;background:#fff;box-shadow:0 10px 30px rgba(11,28,77,.06);overflow:hidden}
.live-top{display:flex;align-items:center;justify-content:space-between;padding:15px 22px;border-bottom:1px solid #eef1f7}
.live-ttl{font-weight:800;color:#0b1c4d;font-size:var(--fs-body)}
.live-badge{display:inline-flex;align-items:center;gap:6px;background:#fdecec;color:#e02424;font-weight:800;font-size:var(--fs-xs);padding:4px 11px;border-radius:999px}
.live-dot2{width:7px;height:7px;border-radius:50%;background:#e02424;animation:livepulse 1.4s infinite}
.live-list{padding:4px 0}
.live-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:14px 22px;border-bottom:1px solid #f4f6fb}
.live-row:last-child{border-bottom:0}
.live-list .live-row:first-child{animation:liverow .45s ease}
.live-name{font-weight:800;color:#0b1c4d;font-size:var(--fs-body);white-space:nowrap}
.live-loc{color:#5b6b8f;font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.live-prod{justify-self:end;background:#eef2fb;color:#1E40AF;font-weight:800;font-size:var(--fs-sm);padding:6px 12px;border-radius:999px;white-space:nowrap}
.live-note{text-align:center;color:#5b6b8f;font-size:var(--fs-sm);margin:12px 22px 16px;line-height:1.5}
.tel-a:hover{ text-decoration:underline; }
.rc-note{font-size:var(--fs-xs);color:var(--mut);margin-top:8px;line-height:1.5;max-width:820px;margin-left:auto;margin-right:auto}
.receipt .rc-note{text-align:left;max-width:none}
table  + .rc-note{ margin-top: var(--gap-sm); }
.rc-note + .rc-note{ margin-top: var(--gap-xs); }
.rc-note + .tfold{ margin-top: var(--gap-sm); }
.tfold + .rc-note{ margin-top: var(--gap-sm); }
.receipt, .tfold, .rtable, .em{ animation: riseIn .5s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 42%; }
.tfold .em{ text-align: left !important; }
.rc-note + .rc-grid{ margin-top: var(--gap-lg) !important; }
.sec-head + .rc-note{ margin-top: var(--gap-md) !important; }
.sum-fold .rc-note{ border:0 !important; border-radius:0 !important; margin:0 !important; }
.fold-blk > p.rc-note{ font-size:var(--fs-sm); color:#3c4770; }
@media(max-width:420px){
.live-prod{font-size:var(--fs-xs);padding:5px 9px}
.live-row{gap:8px;padding:13px 16px}
.live-name{font-size:var(--fs-sm)}
.live-loc{font-size:var(--fs-sm)}
}

/* 가입 신청서 진행 단계 — 시안 signup-mock.dc.html steps 값 그대로 */
.dc-steps{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.dc-steps__i{
  display:flex; align-items:center; gap:7px; padding:8px 13px;
  border:1px solid rgba(255,255,255,.28); border-radius:8px;
  font-size:var(--fs-sm); color:rgba(255,255,255,.9);
}
.dc-steps__i span{
  width:20px; height:20px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.18); border-radius:50%;
  font-size:var(--fs-micro); font-weight:800; color:rgba(255,255,255,.9);
}
.dc-steps__i.on span{ background:#FFC400; color:#0b1c4d; }
/* 가입 신청서 폼 머리 — 시안값 (h2 25px) */
.dc-form__h{ margin:0 0 18px; font-size:var(--fs-title); font-weight:800; letter-spacing:-.025em; color:#0b1c4d; }
/* 2026-08-18 걷음 — 가입 신청서 h1 을 34px 로 낮춘 예외.
   시안 signup-mock 은 34px 이지만 통합지시서 2-4 「히어로 전 페이지 공통」이
   데스크탑 38px 이고, 작업규칙 3 대로 지시서가 시안보다 위입니다.
   사장님 「지시서 대로해」(2026-08-18). */

/* ═══════════════════════════════════════════════════════════
   가입 신청서 2단 — 시안 signup-mock.dc.html
   왼쪽 폼 / 오른쪽 선택 상품 요약(따라옴)
   ═══════════════════════════════════════════════════════════ */
.dc-signup{ display:block; }
@media (min-width:960px){
  .dc-signup{
    display:grid;
    grid-template-columns:minmax(320px, 1.15fr) minmax(280px, .85fr);
    gap:26px; align-items:start;
  }
  .dc-signup__r{ position:sticky; top:16px; }
}
.dc-signup__r{ margin-top:18px; }
@media (min-width:960px){ .dc-signup__r{ margin-top:0; } }
/* 채널표 — 절 제목 (시안 channels-mock.dc.html h2 27px) */
.dc-ch__h{ margin:0 0 14px; font-size:var(--fs-title); font-weight:800; letter-spacing:-.025em; color:#0b1c4d; }

/* 채널표 PRICE 카드 — 시안 channels-mock.dc.html 값 그대로 */
.dc-price{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:16px; }
.dc-price__c{
  display:flex; flex-direction:column; padding:20px;
  background:#fff; border:1px solid #d8e0f0; border-radius:14px;
  box-shadow:0 2px 12px rgba(30,64,175,.07);
  text-decoration:none; color:inherit;
}
.dc-price__c:hover{ border-color:#1E40AF; }
.dc-price__top{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; min-height:30px; margin-bottom:12px;
}
.dc-price__badge{
  display:inline-block; flex:0 0 auto; white-space:nowrap;
  padding:5px 11px; background:#FFC400; color:#0b1c4d;
  font-size:var(--fs-xs); font-weight:700; border-radius:6px;
}
.dc-price__top img{ margin-left:auto; flex:0 0 auto; width:44px; height:44px; object-fit:contain; display:block; }
.dc-price__n{ font-size:var(--fs-body); font-weight:800; color:#0b1c4d; letter-spacing:-.02em; }
.dc-price__d{ margin-top:4px; font-size:var(--fs-sm); line-height:1.6; color:#5b6b8f; }
.dc-price__p{
  margin-top:12px; font-size:var(--fs-title); font-weight:800; letter-spacing:-.03em;
  color:#1E40AF; font-variant-numeric:tabular-nums;
}
.dc-price__cond{ margin-top:7px; font-size:var(--fs-xs); line-height:1.65; color:#5b6b8f; }
/* 2026-08-18 시안 channels-mock.dc.html — 카드 안 CTA·인용. 카드가 a 였는데 안에 링크가
   두 개(가입·tel) 들어가야 해서 카드를 div 로 바꿨다. dc-price 는 채널표 한 장만 쓴다. */
.dc-price__from{ margin-left:6px; font-size:var(--fs-body); font-weight:400; color:#5b6b8f; letter-spacing:0; }
.dc-price__go{
  margin-top:18px; display:flex; align-items:center; justify-content:center;
  height:50px; border:1.5px solid #1E40AF; border-radius:9px;
  color:#1E40AF; font-size:var(--fs-body); font-weight:700; text-decoration:none;
}
.dc-price__go:hover{ background:#1E40AF; color:#fff; }
.dc-price__cite{
  border-top:1px solid #d8e0f0; margin-top:12px; padding-top:11px;
  font-size:var(--fs-xs); line-height:1.65; color:#5b6b8f;
}
.dc-price__cite-n{ color:#2B3D63; font-weight:600; }
.dc-price__cite a{ color:#1E40AF; text-decoration:none; font-weight:700; }


/* ── 카드마다 접기 (.dc-cfold) ────────────────────────────────────
   사장님 2026-08-18 「내가보는 채널표 여기도 접는방식」 · 「각 각 접는건데」.
   카드 제목이 곧 summary 입니다. 통짜로 하나 접는 게 아니라 카드마다 접습니다.
   데스크탑 — 접지 않습니다. 제목은 그대로 보이고 내용도 늘 펼쳐 둡니다.
   모바일   — 제목만 보이고 누르면 그 카드만 펼쳐집니다.
   ⚠️ 글은 한 자도 지우지 않습니다. 닫혀 있어도 HTML 에 그대로 남아
      검색·AI 가 다 읽습니다(접힌 것도 DOM 에 있습니다).
   ⚠️ open 속성을 쓰지 않습니다. 데스크탑·모바일 기본값이 서로 달라야 해서
      마크업이 아니라 CSS 로 가릅니다. */
.dc-cfold > summary{ list-style:none; cursor:default; }
.dc-cfold > summary::-webkit-details-marker{ display:none; }
.dc-cfold > .dc-cfold__in{ display:block; }
@media (max-width:768px){
  .dc-cfold > summary{
    display:flex; align-items:center; gap:6px;
    min-height:44px; cursor:pointer;
  }
  .dc-cfold > summary::after{
    content:""; width:6px; height:6px; flex:0 0 auto; margin-left:auto;
    border-right:2px solid #1E40AF; border-bottom:2px solid #1E40AF;
    transform:rotate(45deg);
  }
  .dc-cfold[open] > summary::after{ transform:rotate(-135deg); }
  .dc-cfold:not([open]) > .dc-cfold__in{ display:none; }
}

/* 규칙이 안 걸린 h3 는 브라우저 기본 1.17em(=18.72px)으로 나온다 — 시안 눈금에 없는 값이다.
   따로 정한 곳은 그 규칙이 이기므로 여기서는 바닥만 깔아 둔다. (2026-08-19)
   ⚠️ small·button 의 기본 13.3333px 은 브라우저 기본이라 건드리지 않는다. */
h3{ font-size:var(--fs-body); }

/* ══ 팝업 한 벌 — 현 사이트 톤 (2026-08-19) ═══════════════════════════
   사장님 「팝업디자인도 다시 하기로 했어 현 사이트 톤으로 간결하고 심플하게」

   갈래가 셋이었습니다 — 값이 제각각이라 같은 사이트로 안 보였습니다.
     .modal-box        제휴카드 팝업(btv-guide)   어두운 남색 · r20 · 400px
     .jsc-modal__panel 계산기 상담(28장)          --paper  · r24 · 404px
     .consult-modal    상담 팝업(상품 3장)         흰색     · r14 · 460px

   값을 여기 한 곳에 두고 세 이름이 같이 가리키게 합니다.
   ⚠️ HTML 과 여닫는 JS 는 한 글자도 건드리지 않습니다 — 이름만 함께 겁니다.
   ⚠️ 시트 로드 순서에 지지 않게 조상까지 붙여 특이도를 (0,2,0) 으로 맞춥니다. */

/* 덮개 자리 — btv-guide 는 cable-guide.css 를 걷어내서 .modal 규칙이 아예 없었습니다.
   여닫는 것은 js/btv-guide.js 의 openM/closeM 이 .on 을 붙였다 떼는 방식 그대로입니다. */
.modal{
  display:none; position:fixed; inset:0; z-index:1200;
  align-items:center; justify-content:center; padding:16px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.modal.on{ display:flex; }

.modal .modal-box,
.jsc-modal .jsc-modal__panel,
.consult-modal-overlay .consult-modal{
  position:relative; width:100%; max-width:460px; margin:auto;
  background:#fff; border:1px solid #d8e0f0; border-radius:14px;
  padding:20px 18px; box-sizing:border-box; text-align:left;
  color:#15223f; font-size:var(--fs-body); line-height:1.7;
  box-shadow:0 18px 48px rgba(11,28,77,.28);
}
.modal .modal-bg,
.jsc-modal .jsc-modal__ov{ background:rgba(11,28,77,.55); }

/* 닫기 — 손가락 자리 40px */
.modal .modal-x,
.jsc-modal .jsc-modal__x,
.consult-modal-overlay .modal-close-btn{
  position:absolute; top:8px; right:8px; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; border-radius:9px;
  color:#5b6b8f; font-size:var(--fs-num-md); line-height:1; cursor:pointer;
}
.modal .modal-x:hover,
.jsc-modal .jsc-modal__x:hover,
.consult-modal-overlay .modal-close-btn:hover{ background:#eef2fb; color:#15223f; }

/* 제휴카드 팝업 속 — 어두운 판에 맞춰 있던 색을 흰 판에 맞춥니다 */
.modal .modal-box h3{ font-size:var(--fs-body); font-weight:800; color:#0b1c4d; margin:0 0 6px; }
.modal .modal-box .modal-amt{ color:#1E40AF; font-weight:800; font-size:var(--fs-body); margin:0 0 14px; }
.modal .modal-box .modal-cardimg{ width:120px; border-radius:9px; margin:0 0 12px; }
.modal .modal-box ul{ margin:0 0 14px; }
.modal .modal-box li{ color:#5b6b8f; font-size:var(--fs-sm); }
.modal .modal-box li::before{ color:#1E40AF; }
.modal .modal-box .modal-note{ color:#5b6b8f; font-size:var(--fs-xs); line-height:1.6; margin:0 0 14px; }
.modal .modal-box .modal-link{
  display:block; width:100%; height:52px; line-height:52px; text-align:center;
  background:#1E40AF; color:#fff; font-weight:700; font-size:var(--fs-body);
  border-radius:9px; text-decoration:none;
}
.modal .modal-box .modal-link:hover{ background:#17348f; }

/* 계산기 팝업 속 — 판만 맞추고 속은 옛 값이었습니다 (2026-08-19)
   입력칸 r11·13.5px·42px · 노란 제출 버튼 · 모서리 10·11·12 가 사이트 규격과 달랐습니다.
   가입 페이지 칸(15.5px/48px/r8)과 상담 버튼(.dc-cta__btn)에 맞춥니다. */
.jsc-modal .jsc-consult input[type="tel"],
.jsc-modal .jsc-consult input[type="text"],
.jsc-modal .jsc-consult .jsc-cf-memo{
  height:48px; padding:0 13px; border:1px solid #d8e0f0; border-radius:8px;
  font-family:inherit; font-size:var(--fs-body); color:#0b1c4d; background:#fff;
}
.jsc-modal .jsc-consult .jsc-cf-memo{ height:auto; min-height:78px; padding:11px 13px; font-size:var(--fs-body); line-height:1.6; }
.jsc-modal .jsc-consult .jsc-cf-submit{
  width:100%; height:52px; margin-top:14px;
  background:#1E40AF; border:none; border-radius:9px;
  font-family:inherit; font-size:var(--fs-body); font-weight:700; color:#fff; cursor:pointer;
}
.jsc-modal .jsc-consult .jsc-cf-submit:hover{ background:#17348f; }
.jsc-modal .jsc-consult .jsc-priv{ border-radius:8px; }
.jsc-modal .jsc-modal__fine{ border-radius:8px; font-size:var(--fs-xs); }
.jsc-modal .jsc-cf-head{ border-radius:13px; }
.jsc-modal .jsc-consult{ border-radius:13px; }   /* r16 이 눈금 밖이었습니다 */

/* 요금표 — 정가에서 실납부로 깎여 내려가는 과정에 색 (2026-08-18)
   「컬러적용-지시서」 §2-2. 열은 머리글 낱말로 정한다(table-step-color.py):
     「정가」→ is-list · 「더슬림」→ is-slim · 「실납부」→ is-net
   ⚠️ 본문 칸 배경은 머리 색의 35~40% 로 옅게 깐다. 진하면 숫자가 안 읽힌다.
   ⚠️ 흐린 글씨는 #5b6b8f — 지시서의 #8593b8 은 자산에 없는 색이라 바꿨다. */
.dc-tbl thead th{ background:var(--sub-gray7); color:var(--navy); }
.dc-tbl thead th.is-slim{ background:var(--b-yellow40); }
.dc-tbl thead th.is-net,  .ptbl thead th.is-net { background:var(--b-green40); }
.dc-tbl td.is-list{ color:#5b6b8f; }
.dc-tbl td.is-slim{ background:rgba(249,232,192,.35); }
.dc-tbl td.is-net,  .ptbl td.is-net { background:rgba(187,237,208,.40);
  color:var(--blue); font-weight:800; }

/* 채널 칩 — 접기를 열지 않아도 자주 찾는 번호가 보이게 (지시서 §5) */
.ch-chips{ display:flex; flex-wrap:wrap; gap:7px; margin:12px 0 16px; }
.ch-chips span{
  display:inline-flex; align-items:baseline; gap:5px;
  padding:7px 12px; border:1px solid #d8e0f0; border-radius:999px;
  background:#fff; font-size:var(--fs-sm); color:#5b6b8f; white-space:nowrap;
}
.ch-chips b{ font-size:var(--fs-sm); font-weight:800; color:#1E40AF;
  font-variant-numeric:tabular-nums; }

/* 「이 요금에 더 받을 수 있는 것」 — 셋이 같은 모양이라 무엇이 중요한지 안 보였다.
   알뜰폰 결합을 맨 위로 올리고 펼쳐 둔 뒤, 옐로우 띠와 옅은 바탕으로 세운다.
   (네이버 블로그 1위가 알뜰폰 결합 글이다 — 207회. 사장님 2026-08-19
    「이 요금에 더 받을 수 있는 것 여기는 눈에 더 들어왔으면 · 결합 가능 알뜰폰도」) */
.dc-look details.dc-look--hot{
  border-top: 0;
  border-left: 3px solid var(--yellow, #FFC400);
  background: #FFFBEF;
  border-radius: 0 8px 8px 0;
  padding: 0 12px;
  margin-bottom: 6px;
}
.dc-look details.dc-look--hot > summary{ font-weight: 700; color: #15223f; }
.dc-look details.dc-look--hot .dc-look__b{ color: #2b3d63; }
.dc-look details.dc-look--hot .dc-look__b p{ margin: 0; }

/* 상자 자체가 스크롤하게 — 오버레이만 스크롤시키면 터치가 상자 위에서 안 먹는
   기기가 있다 (2026-08-19). */
.consult-modal-overlay .consult-modal{
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* 스크롤 등장 모션 — btv-guide 에만 있던 것을 index·랜딩·상품으로 옮긴다.
   은은하게 22px 올라오며 나타난다. 한 번 보이면 그대로 둔다(다시 사라지지 않음).
   (사장님 2026-08-19 「btv가이드처럼 인덱스 랜딩 페이지 애니메이션은?
    스크롤 내리면 동작하는」) */
.dc-reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.dc-reveal.in{ opacity: 1; transform: none; }
/* 움직임을 줄이라고 설정한 분에게는 걸지 않는다 */
@media (prefers-reduced-motion: reduce){
  .dc-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}


/* 클래스가 없는 표 — qna·btvpop·usim. 머리글 가운데 · 안에 글 왼쪽.
   (2026-08-19 전수에서 15개가 규칙 밖에 있었다) */
.dc-sec table:not([class]) th, .blog-table-wrap table:not([class]) th{ text-align:center; }
.dc-sec table:not([class]) td, .blog-table-wrap table:not([class]) td{ text-align:left; }
table:not([class]) th{ text-align:center; }
table:not([class]) td{ text-align:left; }
/* ══ 지역 카드 슬롯 (2026-08-20 지시서 2단계) ═══════════════════
   이미지로 굽지 않는다. 동 이름이 바뀌어도 글자만 고치면 되고
   텍스트라 검색·AI 인용에 잡힌다. 23곳 색 통일. */
.rgn-card{
  margin: 28px 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

/* A·B·C — 머리 */
.rgn-card__head{
  display: flex; align-items: flex-start; gap: 16px;
  padding: 20px 22px 18px;
  background: var(--ink);
}
.rgn-card__meta{ flex: 1 1 auto; min-width: 0 }
.rgn-card__date{
  display: block; font-size: var(--fs-sm);
  color: var(--yellow); font-weight: 600;
}
.rgn-card__t{
  margin: 6px 0 0; font-size: var(--fs-title);
  font-weight: 800; line-height: 1.28;
  letter-spacing: -0.03em; color: #fff;
  text-wrap: balance;
}
.rgn-card__sub{
  margin: 6px 0 0; font-size: var(--fs-sm);
  line-height: 1.6; color: rgba(255,255,255,.78);
}
.rgn-card__ico{
  flex: 0 0 auto; width: 72px; height: 72px;
  object-fit: contain;
}

/* D — 도해 */
.rgn-card__flow{
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.rgn-card__from{ font-size: var(--fs-subtitle); font-weight: 600; color: var(--mut) }
.rgn-card__arrow{ font-size: var(--fs-subtitle); color: var(--ink) }
.rgn-card__to{ font-size: var(--fs-subtitle); font-weight: 800; color: var(--ink) }

/* 도해가 두 줄일 때 (서해방송처럼 「둘→하나」와 「하나→분리」가 같이 일어나는 권역) */
.rgn-card__flow--multi{ flex-direction: column; align-items: flex-start; gap: 11px }
.rgn-card__flowline{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap }

/* E — 칸 */
.rgn-card__cols{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  padding: 18px 22px;
}
.rgn-card__col{
  background: var(--sub-gray7);
  border-radius: 11px;
  padding: 15px 17px;
  border-top: 3px solid var(--line);
}
.rgn-card__col--a{ border-top-color: var(--yellow) }
.rgn-card__col--b{ border-top-color: var(--blue) }
/* 칸이 하나뿐일 때 — 넓은 화면에서 텅 비지 않게 */
.rgn-card__cols--one{ grid-template-columns: minmax(0, 1fr) }
.rgn-card__cols--one .rgn-card__col{ max-width: 480px }
.rgn-card__cn{
  font-size: var(--fs-subtitle); font-weight: 800;
  color: var(--ink); letter-spacing: -0.02em;
}
.rgn-card__ct{
  font-size: var(--fs-sm); color: #54648c;
  margin-top: 2px;
}
.rgn-card__list{
  list-style: none; margin: 10px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
}
.rgn-card__list li{
  font-size: var(--fs-body); color: #243b6b;
  line-height: 1.5;
}

/* F — 결론 */
.rgn-card__key{
  margin: 0 22px 18px;
  padding: 13px 16px;
  background: #FFFBEB;
  border-left: 3px solid var(--yellow);
  border-radius: 9px;
  font-size: var(--fs-body);
  line-height: 1.7; color: #243b6b;
}
.rgn-card__key b{ color: var(--ink); font-weight: 800 }
/* 「그럼 나는 어떻게 하나」에 답하는 줄 — 이게 카드의 진짜 결론이다 */
.rgn-card__key-sub{
  display: block; margin-top: 5px;
  font-size: var(--fs-sm); color: #54648c;
}
/* 목록에 없는 동에 사는 분을 위한 줄 — 「주요 N개 동」이라 적었으면 그 밖이 있다는 뜻이다 */
.rgn-card__note{
  margin: 0 22px 4px; font-size: var(--fs-sm);
  line-height: 1.7; color: #54648c;
}
.rgn-card__note a{ color: var(--blue); font-weight: 700; text-decoration: none;
  white-space: nowrap }
@media (max-width: 520px){ .rgn-card__note{ margin: 0 16px 4px } }

/* G — 꼬리 */
.rgn-card__cite{
  padding: 14px 22px 18px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  line-height: 1.75; color: #54648c;
}
/* 지시서의 var(--cite) = #2B3D63. cite.css 에 --cite-strong 으로 이미 있다
   (2026-08-20: 「없는 토큰」인 줄 알고 --ink 로 대신 넣었다가 바로잡음) */
.rgn-card__cite b{ color: var(--cite-strong, #2B3D63); font-weight: 600 }
.rgn-card__cite a{ color: var(--blue); font-weight: 700; text-decoration: none;
  white-space: nowrap }

/* 모바일 */
@media (max-width: 520px){
  .rgn-card__head{ padding: 16px 16px 15px; gap: 12px }
  .rgn-card__ico{ width: 56px; height: 56px }
  .rgn-card__flow{ padding: 14px 16px; gap: 10px }
  .rgn-card__cols{ padding: 14px 16px; gap: 10px }
  .rgn-card__key{ margin: 0 16px 14px }
  .rgn-card__cite{ padding: 12px 16px 15px }
}