@charset "UTF-8";
/* region.css — 지역 랜딩 23개 공통 스타일
   2026-07-23: 각 HTML 인라인 <style>(4,838자 x 23벌)을 이 파일로 분리.
   ⚠️ 로드 순서: cable-guide.css -> region.css
      (.receipt / .rc-note / .hero-r 등은 cable-guide.css 규칙을 보완하는 관계라
       순서가 바뀌면 카드 레이아웃이 깨진다) */

html{scroll-behavior:smooth}
/* ── 밝기 조정 (이 페이지 전용 override) ── */
/* 교차 섹션: 기본(#081437)보다 어두웠던 것을 밝은 방향으로 역전 */
.sec.alt{background:#f5f8fd}
/* 히어로 B 워터마크 은은하게 강화 */
.hero::after{opacity:.09}
/* 히어로 목업 뒤 밝은 단색 원판 (그라데이션 아님) */
.hero-r{position:relative}
.hero-r::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:330px;height:330px;border-radius:50%;background:#e3eaf7;z-index:0}
.hero-r a,.hero-r img{position:relative;z-index:1}
/* 섹션 헤더 3D 아이콘 (텍스트 섹션 밝기 포인트) */
.sec-ic{width:56px;height:56px;object-fit:contain;display:block;margin:0 auto 10px}
/* 케이블 랜딩 전용 — 영수증 카드 */
.rc-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:18px}
@media(max-width:760px){.rc-grid{grid-template-columns:1fr}}
.receipt{background:var(--navy2);border:1px solid var(--line);border-radius:16px;padding:22px 20px}
.receipt h4{font-size:var(--fs-subtitle);margin:0 0 4px;color:#0b1c4d}
.receipt .rc-badge{display:inline-block;background:var(--yellow);color:#081437;font-size:var(--fs-xs);font-weight:800;padding:3px 10px;border-radius:999px;margin-bottom:12px}
.rc-row{display:flex;justify-content:space-between;font-size:var(--fs-body);padding:6px 0;color:var(--lav)}
.rc-row.dis{color:#d63a3a}
.rc-row b{color:#0b1c4d;font-weight:600}
.rc-line{border-top:1px dashed var(--line);margin:10px 0}
.rc-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px}
.rc-total .lbl{font-size:var(--fs-body);color:#0b1c4d;font-weight:700}
.rc-total .amt{font-size:var(--fs-num-lg,32px);font-weight:900;color:var(--blue)}
.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}
/* 데스크탑: 표 아래 note를 표와 같은 축(가운데)으로 — 영수증카드 안·경고박스는 예외 */
@media(min-width:701px){
  .rc-note{text-align:center}
  .receipt .rc-note{text-align:left;max-width:none}
}
.ptable{width:100%;max-width:820px;margin:16px auto 0;border-collapse:collapse;font-size:var(--fs-sm)}
.ptable th,.ptable td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.ptable th{background:#1E40AF;color:#fff}
.ptable td{color:var(--lav)}
.ptable td b{color:var(--blue)}
/* 숫자 열은 우측 정렬(데스크탑) + 값 줄바꿈 방지 */
.ptable td:not(:first-child),.ptable th:not(:first-child){text-align:right;white-space:nowrap}
/* 채널·속도(2번째 열)는 가운데 정렬 — 순수표(카드변환 아님)만 */
.ptable:not(.rtable) td:nth-child(2),.ptable:not(.rtable) th:nth-child(2){text-align:center}
/* 상품명(1번째 열)은 줄바꿈 허용하되 폭 절약 */
.ptable:not(.rtable) td:first-child{line-height:1.35}
/* 모바일: 순수표를 양옆으로 넓게 (히어로 wrap 미닫힘으로 생긴 이중 패딩 상쇄) */
@media(max-width:600px){
  .ptable:not(.rtable){width:calc(100% + 48px);max-width:none;margin-left:-24px;margin-right:-24px}
}
/* ── B안: 모바일에서 표를 행별 카드로 변환 (AI는 table 구조 그대로 읽음) ── */
@media(max-width:600px){
  .rtable,.rtable tbody,.rtable tr,.rtable td{display:block;width:100%}
  .rtable thead{position:absolute;left:-9999px}
  .rtable tr{background:var(--navy2);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:12px}
  .rtable tr td{border:none;padding:6px 0;text-align:right;display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-body)}
  .rtable tr td::before{content:attr(data-label);color:var(--mut);font-size:var(--fs-sm);font-weight:600;text-align:left}
  /* 첫 칸(구성/속도) = 카드 제목 */
  .rtable tr td:first-child{color:#0b1c4d;font-weight:800;font-size:var(--fs-subtitle);border-bottom:1px dashed var(--line);padding-bottom:8px;margin-bottom:4px;display:block;text-align:left}
  .rtable tr td:first-child::before{display:none}
  /* 최종금액(마지막 칸) 강조 */
  .rtable tr td:last-child{padding-top:8px;border-top:1px dashed var(--line);margin-top:4px}
  .rtable tr td:last-child b{color:var(--blue);font-size:var(--fs-title)}
}
.chan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:960px;margin:16px auto 0}
@media(max-width:700px){.chan-grid{grid-template-columns:1fr}}
.chan-genre{background:var(--navy2);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.chan-genre h4{margin:0 0 6px;color:var(--blue);font-size:var(--fs-body)}
.chan-genre p{margin:0;color:var(--lav);font-size:var(--fs-sm);line-height:1.7}
.alias-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.alias-tags span{background:var(--navy3);border:1px solid var(--line);color:var(--mut);font-size:var(--fs-xs);padding:5px 12px;border-radius:999px}
.hist-box{background:var(--navy2);border:1px solid var(--line);border-radius:12px;padding:16px 18px;color:var(--mut);font-size:var(--fs-sm);line-height:1.7;margin-top:12px}
.near-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.near-links a{color:var(--lav);font-size:var(--fs-sm);text-decoration:none;border:1px solid var(--line);padding:6px 14px;border-radius:8px}
.sub{color:var(--mut);font-size:var(--fs-body);margin:0 0 6px}

/* ── 요금표 가로 슬라이드 (.swipe 옵트인) ─────────────────────
   600px 이하에서 .rtable 은 각 행이 카드가 된다. 결합 요금표는 7행이라
   카드 7개가 세로로 쌓여 화면이 한없이 길어졌다.
   .swipe 를 붙인 표만 카드를 가로로 넘기게 한다.
   ⚠️ AI 인용(AEO) 안전: HTML 은 그대로 두고 CSS 로만 가로 배치.
      display:none 이나 JS 캐러셀은 검색엔진·AI 가 못 읽으므로 쓰지 않는다. */
.swipe-hint{display:none}
@media(max-width:600px){
  .rtable.swipe tbody{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:8px}
  .rtable.swipe tr{flex:0 0 84%;margin-bottom:0;scroll-snap-align:start}
  .rtable.swipe tbody::-webkit-scrollbar{height:4px}
  .rtable.swipe tbody::-webkit-scrollbar-thumb{background:#c9d3e8;border-radius:4px}
  .swipe-hint{display:block;margin:10px 0 -6px;font-size:var(--fs-sm);color:var(--mut)}
  .swipe-hint i{color:var(--blue)}
}