/* ===== 요금표 여섯 장이 함께 쓰는 화면 규칙 (2026-09-10) =====
   plans.html 과 통신사별 다섯 장(plans-kt·sk·lg·sky·hello)이 이 파일 하나를 함께 쓴다.

   ★ 요금표 화면 모양을 바꿀 때는 이 파일만 고치면 된다. 여섯 장이 한꺼번에 바뀐다.
     전에는 같은 규칙이 여섯 장에 통째로 복사돼 있어 한 번 고치려면 여섯 번 고쳐야 했다.
     (여섯 장은 1,484줄 가운데 53줄만 달랐다 — 나머지는 전부 같은 껍데기였다)

   요금·사은품 같은 '자료'는 js/dh-plans.js 에 있다. 여기는 '모양'만 있다.
   페이지마다 다른 몇 줄은 각 페이지의 <style> 에 남아 있다. 이 파일 뒤에 놓여야 이긴다.

   ⚠ 이 파일을 고치면 이 파일을 부르는 모든 화면의 ?v= 숫자를 같이 올려야 한다.
     안 올리면 전에 와 본 손님의 브라우저가 옛 파일을 그대로 쓴다.
     처음 오는 손님만 새 것을 보게 돼서, 같은 화면을 둘이 다르게 보는 상태가 된다.
     (설명 글만 고쳤을 때는 안 올려도 된다 — 화면 동작이 그대로이기 때문이다)
     지금 부르는 곳: 6곳. 찾는 법(DangHH 폴더에서):  grep -l "dh-plans.css" *.html
   ============================================================ */

/* ===== 글꼴: Pretendard (2026-09-04, SUIT 에서 갈아탐) =====
   전에는 여기서 SUIT 6굵기를 통째로 받았다 — 약 1.0MB.
   지금은 위 <link> 한 줄로 '쓰는 글자만 골라 받는' 방식을 쓴다.
   화면에 실제로 나온 글자 조각만 내려받아 약 0.4MB 로 줄었다.
   Variable 판이라 400~900 굵기가 한 가족 안에 다 들어 있다.
   갈아탄 까닭: SUIT 는 숫자 폭 고정이 제대로 안 들어 계산기 금액이 바뀔 때
   옆 글자가 몇 px 씩 밀렸다. Pretendard 는 어긋남이 0 이다. */

* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --primary: #1257C9;
  --primary-dark: #0E45A0;
  --accent: #f59e0b;
  --dark: #0f172a;
  --gray: #5F6672;
  --light-gray: #F5F6F8;
  --white: #ffffff;
  --border: #EEEFF3;
  --ground: #F5F6F8;
  /* 통신사 고유색 — index.html 카드 로고에 쓰는 색과 같음 */
  --kt: #e60012;
  --sk: #E7630F;
  --lg: #DE0087;
  --sky: #0064B4;
  --hello: #B4192F;
}
body { font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif; color: var(--dark); line-height: 1.6; overflow-x: hidden; background: #ffffff; }
body.locked { overflow: hidden; }

/* ===== HEADER (index.html과 동일) ===== */
header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: white; box-shadow: 0 2px 12px rgba(15,42,90,0.09); }
.header-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; height: 64px; display: flex; align-items: center; justify-content: space-between; }
/* 로고를 오른쪽 전화 단추와 같은 높이로 (2026-08-25 다시 잼)
   ★ 글자 높이는 '줄상자'가 아니라 '글자가 실제로 칠해지는 범위'로 재야 한다.
     줄상자로 재면 글자 위아래 빈 공간까지 세어져 실제보다 크게 나온다(32px일 때 30px인데 40px로 나왔다).
   실측: 전화 단추 40px / 43px일 때 글자가 칠해지는 높이 40px -> 딱 맞음 */
.logo { font-size: 43px; font-weight: 900; color: var(--primary); text-decoration: none; letter-spacing: -0.5px;
        line-height: 1; }   /* 줄간격을 1로: 안 그러면 글자 줄상자(69px)가 머리띠(64px)보다 커진다 */
.logo span { color: var(--primary); }

/* ═════ 2026-08-28 로고·머리띠 개편 ═════
   1) 로고를 '파란 둥근 네모 + 흰 글자' 그림으로 바꾸고 이름 옆에 함께 쓴다.
      모양은 원본 logo.png 를 소수점까지 실측해 코드로 다시 그린 것이다(어긋난 점 35/90000).
   2) 머리띠에서 전화·카톡을 빼고, 오른쪽에 떠 있는 단추(좁을 때)와 상담 패널(넓을 때)로 옮겼다.
      까닭: 오른쪽 색 덩어리가 왼쪽 로고의 2.2배라 서로 눈길을 나눠 가졌다.
   3) 메뉴를 머리띠 한가운데로 옮겼다.
   ★ 되돌리려면 이 덩어리와 아래 '상담 패널' 덩어리를 지우고,
     머리띠·꼬리말 html 에서 <svg> 조각만 빼면 된다. */
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo-mark { flex: none; display: block; }
.footer-logo { display: flex; align-items: center; gap: 8px; }
.footer-mark { flex: none; display: block; }

/* 로고 그림이 보이는 넓은 화면에서만 '당현함' 글씨를 그림과 같은 높이(30)로 맞춘다.
   ★ 글자 높이는 줄상자가 아니라 '실제로 칠해지는 범위'로 재야 한다.
     실측: 32px 일 때 칠해지는 높이 30px (43px 일 때는 40px). */
@media (min-width: 931px) { .logo { font-size: 32px; } }
/* 창이 좁으면 그림을 감추고 글자만 남긴다 -> 좁은 화면은 예전과 똑같아진다.
   실측 근거: 머리띠 안쪽폭 = 창너비 - 40. 로고글자 111 + 메뉴 514 + (뺀)단추 자리.
   931 에서 양옆 틈이 33px 씩 남아 넉넉하다. */
@media (max-width: 930px) { .logo-mark { display: none !important; } }

/* 머리띠에서 전화·카톡을 뺀다. 되돌리려면 이 한 줄만 지운다. */
.header-cta { display: none !important; }

/* 메뉴를 머리띠의 '진짜 가운데'에 둔다.
   ★ 그냥 가운데 정렬하면 왼쪽 로고 때문에 오른쪽으로 밀린다.
     그래서 흐름에서 빼내어(absolute) 가운데에 고정하고 부모에 자리표(relative)를 준다. */
.header-inner { position: relative; }
/* ★ width: max-content 가 없으면 좁은 화면에서 메뉴 글자가 두 줄로 접힌다 (2026-08-28 실제로 겪음).
     까닭: 흐름에서 빼낸(absolute) 칸에 left 만 주면, 쓸 수 있는 너비가
          '왼쪽 끝(50%)부터 오른쪽 끝까지' 즉 화면의 절반뿐이 된다.
          메뉴가 그보다 넓어지는 순간 글자가 접힌다 (혜택안/내 처럼).
     max-content 는 '내용 만큼'이라 자리에 상관없이 한 줄을 지킨다. */
/* 가운데 맞춤은 자리가 넉넉한 931 이상에서만 한다.
   실측(2026-08-28): 창 785 에서 가운데로 맞추면 로고와 메뉴 사이가 10px 까지 붙었다.
     (메뉴 514 를 가운데 두면 양옆에 121 씩 남는데, 로고가 111 이라 10 만 남는다)
   930 이하는 로고 그림도 감춰지는 구간이므로, 손대기 전 모습(오른쪽 정렬) 그대로 둔다. */
@media (min-width: 931px) {
  .header-inner nav {
    position: absolute; left: 50%; transform: translateX(-50%);
    /* ★ width: max-content 가 없으면 메뉴 글자가 두 줄로 접힌다 (2026-08-28 실제로 겪음).
         까닭: 흐름에서 빼낸(absolute) 칸에 left 만 주면 쓸 수 있는 너비가
              '왼쪽 끝(50%)부터 오른쪽 끝까지' 곧 화면의 절반뿐이 된다.
              메뉴가 그보다 넓어지는 순간 '혜택안 / 내' 처럼 접힌다.
         max-content 는 '내용 만큼'이라 자리에 상관없이 한 줄을 지킨다. */
    width: max-content; max-width: none;
  }
}
.header-inner nav a { white-space: nowrap; }
nav { display: flex; gap: 4px; align-items: center; }
nav a { font-size: 14px; font-weight: 600; color: var(--gray); text-decoration: none; padding: 6px 10px; border-radius: 8px; transition: all 0.2s; }
nav a:hover { color: var(--primary); background: #eff6ff; }
nav a.on { color: var(--primary); background: #eff6ff; font-weight: 700; }
.header-phone { display: flex; align-items: center; gap: 6px; background: var(--primary); color: white; padding: 8px 16px; border-radius: 8px; font-size: 15px; font-weight: 700; text-decoration: none; transition: transform 0.12s ease, background 0.2s; }
.header-phone:hover { background: var(--primary-dark); }
/* ===== 머리띠 전화·카톡 단추 (2026-08-25) =====
   카톡은 전에 화면 아래 오른쪽에 동그랗게 떠다니던 것을 여기로 올렸다.
   전화 단추와 같은 크기·모양으로 맞춰 한 쌍처럼 보이게 한다. */
.header-cta { display: flex; align-items: center; gap: 8px; }
/* 좁은 컴퓨터 화면에서 전화번호가 두 줄로 접혀 단추가 64px로 부풀었다 (실측).
   min-height: 카톡 글씨를 뺀 화면에서 그림만 남아 33px로 낮아지는 것을 40px로 맞춘다. */
.header-cta > a { white-space: nowrap; flex: none; min-height: 40px; }
.header-kakao {
  display: flex; align-items: center; gap: 6px;
  background: #fee500; color: #3a1d00; padding: 8px 16px;
  border-radius: 8px; font-size: 15px; font-weight: 700; text-decoration: none; transition: background 0.2s;
}
/* 2026-09-07 카톡 단추: 남의 브랜드색(#FEE500)은 어둡게 만들지 않는다. 눌림은 움직임으로. */
.header-kakao{ transition:transform .08s ease, box-shadow .08s ease }
.header-kakao:hover { box-shadow:0 2px 6px rgba(0,0,0,.16); }
.header-kakao:active { transform:translateY(1px) scale(.985); box-shadow:none; }
/* 좁은 컴퓨터 화면(태블릿 가로 등)에서는 글씨를 빼고 그림만 남긴다.
   실측: 769px에서 글씨까지 두면 로고와 메뉴가 딱 붙어 숨이 막힌다 */
@media (min-width: 769px) and (max-width: 1024px) {
  .header-kakao { padding: 8px 12px; }
  .header-kakao .kakao-label { display: none; }
}
.header-phone:active { transform: translateY(1px) scale(0.985); }
.hamburger { display: none; cursor: pointer; flex-direction: column; gap: 5px; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--dark); border-radius: 4px; }
.mobile-menu { display: none; position: fixed; top: 64px; left: 0; right: 0; background: white; padding: 12px 20px; box-shadow: 0 8px 20px rgba(0,0,0,0.1); z-index: 999; }
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; padding: 13px 0; font-size: 15px; font-weight: 600; color: var(--dark); text-decoration: none; border-bottom: 1px solid var(--border); }
.mobile-menu a:last-child { border-bottom: none; }

/* 메뉴가 6개(요금·사은품 추가)가 되면서 좁은 컴퓨터 화면에서 전화번호 버튼과 거의 붙었다.
   769~880px 구간에서만 항목 사이 여백을 살짝 줄여 숨통을 틔운다 (2026-08-20)
   768px 이하는 어차피 햄버거 메뉴로 접히므로 영향 없음 */
@media (min-width: 769px) and (max-width: 880px) {
  nav a { padding: 6px 7px; }
  .header-inner { padding: 0 14px; }
}
.mobile-menu a:active { background: #F5F6F8; }

/* ===== 페이지 머리띠 (gift.html과 동일한 틀) ===== */
.page-head {
  margin-top: 64px;
  /* 2026-08-28: 파란 그라데이션 -> 흰 바탕으로 바꿈 (사장님 지시).
     index.html 의 '설치 후기' 칸과 같은 규칙을 따른다 —
     흰 바탕 · 제목은 진한 남색 · 설명은 회색 · 강조할 낱말만 파랑.
     아래 칸이 연회색(#F5F6F8)이라 흰색과 맞닿으면 경계가 저절로 생긴다. */
  background: #ffffff;
  color: var(--dark); padding: 44px 20px 40px; text-align: center;
  border-bottom: 1px solid var(--border);
}
.page-head h1 { font-size: clamp(24px, 3.5vw, 34px); font-weight: 800; letter-spacing: -1px; margin-bottom: 8px; text-wrap: balance; }
.page-head h1 em { font-style: normal; color: var(--primary); }
.page-head p { font-size: 16px; color: var(--gray); word-break: keep-all; }
.page-head .badge {
  /* 흰 바탕에서는 반투명 흰 알약이 안 보인다. 연한 파란 알약으로 바꾼다. */
  display: inline-block; background: #eff6ff; border: 1px solid #dbeafe; color: var(--primary);
  font-size: 13px; font-weight: 700; padding: 4px 16px; border-radius: 12px; margin-bottom: 12px;
}

/* ===== 통신사 고르는 단추 (화면 위에 붙어서 따라옴) ===== */
.tabbar { position: sticky; top: 64px; z-index: 500; background: #ffffff; border-bottom: 1px solid var(--border); }
.tabs {
  max-width: 860px; margin: 0 auto; padding: 12px 20px;
  display: flex; gap: 8px; justify-content: center;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  font-family: inherit; font-size: 16px; font-weight: 800; letter-spacing: -0.3px;
  flex: 0 0 auto; white-space: nowrap;
  padding: 13px 16px; border-radius: 12px; cursor: pointer;
  /* 2026-09-11: 탭이 <a> 라 밑줄이 그어지고 있었다(통신사별 다섯 장에서 네 칸씩) */
  text-decoration: none;
  background: white; border: 1.5px solid var(--border); color: var(--gray);
  box-shadow: 0 2px 12px rgba(15,42,90,0.06);
  transition: transform 0.12s ease, background 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s;
}
.tab.kt { color: var(--kt); }
.tab.sk { color: var(--sk); }
.tab.lg { color: var(--lg); }
.tab.sky { color: var(--sky); }
.tab.hello { color: var(--hello); }
.tab:hover { border-color: currentColor; }
.tab:active { transform: translateY(1px) scale(0.985); }
.tab[aria-selected="true"] { color: white; box-shadow: 0 6px 18px rgba(15,42,90,0.16); }
.tab.kt[aria-selected="true"] { background: var(--kt); border-color: var(--kt); }
.tab.sk[aria-selected="true"] { background: var(--sk); border-color: var(--sk); }
.tab.lg[aria-selected="true"] { background: var(--lg); border-color: var(--lg); }
.tab.sky[aria-selected="true"] { background: var(--sky); border-color: var(--sky); }
.tab.hello[aria-selected="true"] { background: var(--hello); border-color: var(--hello); }

/* ===== 본문 ===== */
.wrap { max-width: 860px; margin: 0 auto; padding: 26px 20px 60px; }
.panel[hidden] { display: none; }
.sheet-name .co { font-weight: 800; }
.sheet-name.kt .co { color: var(--kt); }
.sheet-name.sk .co { color: var(--sk); }
.sheet-name.lg .co { color: var(--lg); }

.note { margin-top: 16px; padding: 15px 18px; background: white; border: 1px solid var(--border); border-radius: 12px; font-size: 13px; color: var(--gray); line-height: 1.8; word-break: keep-all; }
.zoom.open { display: block; }

/* ===== FOOTER (index.html과 동일) ===== */
footer { background: #0B2E5C; color: rgba(255,255,255,0.6); padding: 40px 20px; font-size: 13px; line-height: 1.9; }
.footer-inner { max-width: 1100px; margin: 0 auto; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 20px; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-logo { font-size: 20px; font-weight: 900; color: white; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 13px; }
.footer-links a:hover { color: white; }
.footer-disclaimer { margin-top: 16px; font-size: 12px; color: rgba(255,255,255,0.3); line-height: 1.7; }

/* 플로팅 */
.floating-btns { position: fixed; right: 30px; bottom: 24px; display: flex; flex-direction: column; gap: 12px; z-index: 900; }
/* 아래 카드가 24 여백 + 75 높이까지 차지한다. 좁은 컴퓨터 화면에서 카드 오른쪽 끝과
   동그란 단추가 겹치므로 위로 올린다 (index.html 과 같은 규칙) */
@media (min-width: 769px) { .floating-btns { bottom: 120px; } }
/* 컴퓨터에서는 떠다니는 동그란 단추를 없앤다 (2026-08-25)
   전화 단추는 삭제하고, 카톡 단추는 위 머리띠로 옮겼다. 폰에서는 그대로 둔다. */
/* 2026-08-25 에는 컴퓨터에서 이 단추를 없애고 카톡을 머리띠로 올렸었다.
   2026-08-28 되돌린다 — 머리띠에서 전화·카톡을 뺐으니 이 단추가 그 몫을 한다.
   1600 이상에서만 감춘다. 그 위는 오른쪽 상담 패널이 대신 뜬다. */
@media (min-width: 1600px) { .floating-btns { display: none; } }
/* ═════ 넓은 화면(1600 이상) 상담 패널 — 2026-08-28 ═════
   자리가 남는 화면에서만 펼쳐 두고, 좁아지면 위 동그란 단추가 그 몫을 한다.
   ★ 경계 1600 의 근거 — 브라우저에서 직접 재며 두 번 고친 값이다.
     첫 화면 오른쪽 빈자리 = (실제 폭 - 본문폭) / 2. 패널은 200 + 오른쪽여백 20 = 220 이 필요하다.
     1540 은 빈자리가 220뿐이라 4px 겹쳤고, 1580 은 그 바로 아래에서 또 겹칠 뻔했다
     (@media 는 스크롤막대 15px 까지 세지만 실제 자리는 그만큼 좁다).
     1600 이면 최악의 경우에도 22px 떨어진다. */
.consult-panel {
  display: none;
  /* 2026-08-28: 위쪽(120)에 붙어 있던 것을 화면 세로 한가운데로 옮겼다 (사장님 지시).
     ★ 낮은 창에서 머리띠(64)를 파고들지 않게 하는 방법 —
       처음엔 top 에 max(84px, 50%) 를 썼는데, 가운데맞춤(translateY -50%)이 그 뒤에
       다시 절반만큼 끌어올려서 창 280 에서 12px 겹쳤다 (실측).
       그래서 위치가 아니라 '키'를 묶는다: 위아래로 84 씩 비워 두면
       한가운데에 놓아도 위쪽 끝이 84 밑으로는 못 내려온다. 168 = 84 x 2.
       상자가 그보다 커지면 상자 안에서 굴려 볼 수 있다. */
  /* 2026-08-28 2차: 한가운데(50%)보다 조금 위인 42% 로 올렸다 (사장님 첨부 화면의 경계선 자리).
     ★ 낮은 창에서 머리띠(64) 밑으로 파고들지 않게 하는 방법은 '키 묶기'다.
       키를 (창높이 x 0.84 - 168) 로 묶으면, 42% 에 가운데를 맞춰도
       위쪽 끝이 항상 84 아래로는 못 내려온다. (실측으로 확인: 창 1000/400/280 모두 84 이상)
       상자가 그보다 커지면 상자 안에서 굴려 볼 수 있다. */
  position: fixed; right: 20px; top: 42%; transform: translateY(-50%); z-index: 900;
  max-height: calc(84vh - 168px); overflow-y: auto;
  width: 200px; padding: 16px 14px;
  background: white; border: 1px solid #EEEFF3; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15,23,42,0.13);
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
}
@media (min-width: 1600px) { .consult-panel { display: block; } }
/* 2026-08-28: 「상담하기」 제목 글자를 없앴다 (사장님 지시).
   까닭: 전화·카톡 단추만으로 무슨 상자인지 이미 읽힌다. 글자가 하나 줄어 조용해진다.
   대신 아래에 영업시간 한 줄을 두어 '언제 받을 수 있는지'를 알려 준다. */
.consult-hours {
  margin: 10px 0 0; padding-top: 10px; border-top: 1px solid #eef2f7;
  font-size: 12px; line-height: 1.6; color: #7b8b99; letter-spacing: -0.2px;
}
/* 영업시간 밖 안내. 바탕색 없이 글씨만 (사장님 지시) */
.consult-note {
  margin: 10px 0 0; padding-top: 10px; border-top: 1px solid #eef2f7;
  font-size: 12px; line-height: 1.6; color: #5F6672; letter-spacing: -0.2px;
}
.consult-note b { font-weight: 800; color: #465368; }
.cs-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; min-height: 42px; margin-bottom: 8px; padding: 0 10px;
  border: none; border-radius: 8px; cursor: pointer;
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  font-size: 15px; font-weight: 700; letter-spacing: -0.3px;
  text-decoration: none; transition: background 0.2s;
}
.cs-btn:last-child { margin-bottom: 0; }
.cs-phone { background: var(--primary); color: white; }
.cs-phone:hover { background: var(--primary-dark); }
.cs-kakao { background: #fee500; color: #3a1d00; }
.cs-kakao{ transition:transform .08s ease, box-shadow .08s ease }
.cs-kakao:hover { box-shadow:0 2px 6px rgba(0,0,0,.16); }
.cs-kakao:active { transform:translateY(1px) scale(.985); box-shadow:none; }
/* 2026-08-28: 패널의 '무료 상담 신청'(주황) 단추를 뺐다 (사장님 지시).
   까닭: 아래 남색 카드(또는 gift 의 주황 따라오는 단추)와 가는 곳이 똑같아 겹쳤다.
   이제 이 패널은 '지금 바로 연락하기'(전화·카톡) 한 가지 뜻만 갖는다.
   되살리려면 이 자리에 아래 두 줄을 넣고 html 에 단추를 다시 넣으면 된다.
     .cs-apply { background: #1257C9; color: white; }
     .cs-apply:hover { background: #0E45A0; } */
.float-btn { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 4px 16px rgba(0,0,0,0.15); transition: transform 0.2s; font-size: 22px; }
.float-btn:hover { transform: scale(1.1); }
.float-btn:active { transform: scale(1.02); }
.float-phone { background: var(--primary); color: white; border: 1px solid white; }
.float-kakao { background: #fee500; color: #3a1d00; }


/* ═════ 컴퓨터 화면 아래 '따라오는' 신청 카드 — 2026-08-28 ═════
   index.html 의 .desk-cta-bar 를 그대로 옮겨 온 것이다.
   까닭(index 에 적힌 그대로): 좌우로 꽉 찬 띠는 광고 배너와 모양이 같아서
     손님 눈이 자동으로 건너뛴다. 그래서 좌우를 잘라내고 내용만큼만 차지하는 카드로 띄운다.
   ★ 카드 전체가 하나의 누르는 곳이다.
   이 페이지에는 신청폼이 없으므로 index.html 의 신청 자리로 보낸다.
   폰(768 이하)에서는 아래 흰 띠가 그 몫을 하므로 이 카드는 뜨지 않는다. */
.desk-cta-bar {
  display: none;
  position: fixed; bottom: 24px; left: 0; right: 0; z-index: 940;
  justify-content: center;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.3s, transform 0.35s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}
.desk-cta-bar.visible { opacity: 1; transform: translateY(0); }
/* 바깥 칸은 화면을 가로지르므로 눌림을 꺼 두고, 보일 때만 카드에 눌림을 준다 */
.desk-cta-bar.visible .desk-cta-card { pointer-events: auto; }
.desk-cta-card {
  pointer-events: none;
  display: inline-flex; align-items: center; gap: 20px;
  max-width: calc(100vw - 48px);
  padding: 13px 16px 13px 28px;
  background: #12336E;
  border: 1.5px solid rgba(255,255,255,0.10); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(4,18,60,0.34), 0 2px 8px rgba(4,18,60,0.22);
  cursor: pointer; font-family: 'Pretendard Variable', Pretendard, sans-serif; text-align: left;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease, background 0.2s, box-shadow 0.2s;
}
.desk-cta-card:hover { background: #0B2E5C; }
.desk-cta-top { font-size: 18px; font-weight: 700; color: white; letter-spacing: -0.3px; }
.desk-cta-bar-btn {
  display: inline-flex; align-items: center;
  padding: 12px 28px; background: #1257C9; color: white;
  font-size: 22px; font-weight: 700; border: 1.5px solid transparent; border-radius: 8px;
  font-family: 'Pretendard Variable', Pretendard, sans-serif; transition: background 0.2s;
  white-space: nowrap; line-height: 1;
  pointer-events: none;   /* 주황 조각은 따로 반응하지 않는다 — 카드가 하나로 움직인다 */
}
/* 카드를 누르면 주황 조각도 함께 반응해야 '한 덩어리'로 읽힌다 */
.desk-cta-card:hover .desk-cta-bar-btn { background: #0E45A0; }
.desk-cta-card:active { transform: translateY(2px) scale(0.99); box-shadow: 0 6px 16px rgba(4,18,60,0.30); }
.desk-cta-card:active .desk-cta-bar-btn { background: #0E45A0; box-shadow: inset 0 2px 6px rgba(0,0,0,0.20); }
@media (min-width: 769px) { .desk-cta-bar { display: flex; } }

/* 휴대폰 아래 고정 신청 막대 — index.html의 .mobile-cta-bar와 같은 디자인.
   이 페이지에는 신청폼이 없어 숨길 조건 없이 항상 떠 있는다 (2026-08-21) */
.mobile-cta-bar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 950;
  padding: 10px 16px; background: white; box-shadow: 0 -3px 16px rgba(0,0,0,0.12);
}
.mobile-cta-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 48px; border-radius: 12px; text-decoration: none;
  color: white; font-size: 16px; font-weight: 700; letter-spacing: -0.3px;
  background-color: #1257C9;   /* 위아래 파랑의 한가운데 색 — 누를 때 깜빡임 방지용 받침 */
  background-image: linear-gradient(180deg, #1257C9 0%, #0E45A0 100%);
  box-shadow: 0 8px 20px rgba(18,87,201,0.45);
  transition: transform 0.08s ease, background 0.2s, box-shadow 0.2s;
}
.mobile-cta-btn:active {
  background: #0E45A0;
  transform: translateY(2px) scale(0.96);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.22);
}
/* 막대 양옆 상담 단추 (2026-09-10) — 왼쪽 전화, 오른쪽 카톡.
   화면 아래 오른쪽에 떠 있던 동그란 단추가 본문(표 오른쪽과 주석)을 가로 52 세로 116 만큼
   덮고 있어서 이 막대로 옮겼다. 48은 손가락으로 누르기에 권장되는 44보다 크다.
   가운데 신청 단추는 남은 자리를 다 쓴다 — 폭 344 폰에서 200 이고, 지금 문구가 156이라 한 줄에 들어간다. */
.mobile-cta-bar .mobile-cta-btn { flex: 1 1 0; min-width: 0; }
.bar-side { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  transition: transform 0.08s ease; }
.bar-phone { background: #E8F0FD; color: #1257C9; border: 1px solid #C7DBFA; }
.bar-kakao { background: #fee500; color: #3a1d00; }
.bar-side:active { transform: translateY(1px) scale(0.97); }

@media (max-width: 768px) {
  nav { display: none; }
  .hamburger { display: flex; }
  /* 폰에서는 머리띠의 전화·카톡 단추를 없앤다 (2026-08-25)
     화면 아래 오른쪽에 떠다니는 전화·카톡 단추가 이미 그 몫을 하고 있어 겹친다 */
  .header-cta { display: none; }
  /* 폰에서는 전화 단추가 작아진다(높이 35px). 로고도 그에 맞춘다
     실측: 37px일 때 글자가 칠해지는 높이 35px -> 딱 맞음 */
  .logo { font-size: 37px; }
  .page-head { padding: 34px 20px 30px; }
  .page-head h1 { font-size: 24px; }
  .page-head p { font-size: 13px; }
  .tabs { padding: 10px 14px; gap: 8px; }
  .tab { font-size: 15px; padding: 12px 14px; border-radius: 8px; }
  .wrap { padding: 22px 14px 50px; }
  .note { padding: 14px; font-size: 12px; }
  /* 2026-09-10: 떠 있던 동그란 전화·카톡을 없앤다. 같은 몫을 아래 막대가 한다.
     되돌리려면 아래 두 줄을 옛 모습으로 돌리면 된다.
       .floating-btns { bottom: 88px; right: 16px; }
       .mobile-cta-bar { display: block; } */
  .floating-btns { display: none; }
  .mobile-cta-bar { display: flex; align-items: center; gap: 8px; }
  body { padding-bottom: 68px; }
}
@media (hover: none) {
  .tab:hover { border-color: var(--border); }
  .tab[aria-selected="true"]:hover { border-color: currentColor; }
  .float-btn:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ===== 요금표 (2026-09-02: 그림 3장 → 글자 표 5개로 바꿈) ===== */
.rate-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 24px 0 8px; }
.rate-head h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; color: var(--dark); }
.scroll-hint { display: none; }   /* 컴퓨터 화면에서는 감춘다 */

/* 결합 방법 안내 (표 위) */
.join-guide { display: grid; gap: 8px; margin-bottom: 16px; }
.join-guide .row {
  display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: center;
  background: white; border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px;
}
.join-guide .row b {
  display: inline-block; text-align: center; font-size: 14px; font-weight: 800; color: var(--dark);
  background: var(--ground); border: 1px solid var(--border); border-radius: 8px; padding: 8px 4px;
}
.join-guide .row span { font-size: 14px; color: var(--dark); line-height: 1.6; word-break: keep-all; }
.join-guide .row span em { display: block; font-style: normal; font-size: 13px; color: var(--gray); margin-top: 4px; }
.join-guide .row span em:first-child { margin-top: 0; }   /* 위에 설명 줄이 없을 때 */

/* 표 몸통 */
.rate-wrap { background: white; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.rate { border-collapse: collapse; width: 100%; }
table.rate th, table.rate td {
  border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  padding: 12px 8px; text-align: center; font-size: 15px; font-weight: 400; color: var(--dark);
}
table.rate tr:last-child th, table.rate tr:last-child td { border-bottom: none; }
table.rate tbody tr.prod-start:not(:first-child) th,
table.rate tbody tr.prod-start:not(:first-child) td { border-top: 2px solid var(--border); }
table.rate th:last-child, table.rate td:last-child { border-right: none; }
table.rate thead th {
  background: var(--head-bg); color: #FFFFFF; font-size: 14px; font-weight: 800;
  white-space: nowrap; padding: 10px 8px;
}
table.rate thead th.speed-head { font-size: 15px; }
table.rate thead th.fee-head, table.rate thead th.gift-head { font-size: 13px; font-weight: 600; }
table.rate thead th.kind-head { width: 96px; min-width: 96px; }
table.rate td { min-width: 88px; }
table.rate td.gift { min-width: 86px; }   /* 2026-09-02: 76 -> 86, 아래 '+ 추가혜택' 이 벽에 붙지 않도록 */
table.rate thead th:last-child { border-right: none; }
table.rate th.prod {
  text-align: left; vertical-align: middle; background: white; font-weight: 700;
  width: 168px; min-width: 168px; padding: 12px 16px; word-break: keep-all;
}
table.rate th.prod .pname { display: block; font-size: 15px; font-weight: 700; line-height: 1.4; }
table.rate th.prod .ch { display: block; font-size: 13px; font-weight: 400; color: var(--dark); margin-top: 4px; }
table.rate th.prod .best {
  display: inline-block; font-size: 12px; font-weight: 800; color: var(--primary);
  background: #eff6ff; border-radius: 999px; padding: 4px 8px; margin-bottom: 8px;
}
table.rate th.kind { font-size: 14px; font-weight: 600; color: var(--dark); background: var(--ground); width: 104px; min-width: 104px; white-space: nowrap; }
table.rate td.gift { vertical-align: middle; background: #FDF3F2; }
/* 2026-09-02: 사은품 금액을 키웠다 (18->22, 만원 12->13).
   이 표에서 손님이 가장 먼저 찾는 숫자라 요금(15px)보다 확실히 커야 한다. */
table.rate td.gift b { font-size: 22px; font-weight: 800; color: #D92D20; letter-spacing: -0.5px; }
table.rate td.gift span { font-size: 13px; font-weight: 600; color: #D92D20; margin-left: 1px; }
/* 금액 아래 '+ 추가혜택' — 표에 적힌 숫자가 끝이 아니라는 표시를 칸마다 붙인다 (2026-09-02).
   광고 규정상 표에는 기본 사은품까지만 적을 수 있어, 실제 지급액이 더 크다는 점을
   손님이 어느 칸을 보든 알 수 있어야 한다. */
table.rate td.gift em.plus {
  display: block; font-style: normal; font-size: 12px; font-weight: 700;
  color: #D92D20; margin-top: 2px; white-space: nowrap; letter-spacing: -0.3px;
}


/* ===== TV 추가 줄을 요금표 안으로 (2026-09-03 시험본) ===== */
table.rate tr.addtv td.addtv-list {
  text-align: left; padding-left: 16px; font-size: 14px; color: var(--dark);
  white-space: normal; word-break: keep-all; line-height: 1.7;
}
table.rate tr.addtv td.addtv-list em {
  font-style: normal; font-weight: 700;
}
table.rate tr.addtv td.addtv-list i {
  font-style: normal; color: var(--gray); margin: 0 6px;
}
@media (max-width: 768px) {
  table.rate tr.addtv td.addtv-list { font-size: 13px; padding-left: 12px; }
}
.sub-box { background: white; border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.sub-box h3 { font-size: 15px; font-weight: 800; color: var(--dark); margin-bottom: 4px; }
.sub-box .sub-gift { font-size: 14px; font-weight: 700; color: #D92D20; margin-bottom: 8px; }
/* 2026-09-03: 금액을 위 요금표 사은품 칸과 같은 크기로 키운다 */
.sub-box .sub-gift b { font-size: 22px; font-weight: 800; color: #D92D20; letter-spacing: -0.5px; }
.sub-box .sub-gift span { font-size: 13px; font-weight: 600; color: #D92D20; margin-left: 1px; }
/* 요금표 사은품 칸과 같은 '+ 추가혜택' 표시 */
.sub-box .sub-gift em.plus { display: inline; font-style: normal; font-size: 12px; font-weight: 700;
  color: #D92D20; margin-left: 8px; letter-spacing: -0.3px; white-space: nowrap; }
@media (max-width: 768px) { .sub-box .sub-gift b { font-size: 19px; } }
.sub-box dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin-top: 8px; }
.sub-box dt { font-size: 14px; color: var(--dark); word-break: keep-all; }
.sub-box dd { font-size: 14px; font-weight: 700; color: var(--dark); text-align: right; white-space: nowrap; }

/* 회사별 주석 */
.rate-note { margin-top: 12px; padding: 16px; background: white; border: 1px solid var(--border); border-radius: 12px; }
.rate-note li { list-style: none; font-size: 13px; color: var(--gray); line-height: 1.8; word-break: keep-all; padding-left: 12px; position: relative; }
.rate-note li::before { content: '·'; position: absolute; left: 0; }

@media (max-width: 768px) {
  .rate-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .rate-head h2 { font-size: 22px; }
  .scroll-hint { display: block; font-size: 12px; font-weight: 600; color: var(--dark); margin: 0 0 8px; }
  .join-guide .row { grid-template-columns: 88px 1fr; gap: 8px; padding: 12px; }
  .join-guide .row b { font-size: 13px; padding: 8px 4px; }
  .join-guide .row span { font-size: 13px; }
  table.rate th.prod { width: 132px; min-width: 132px; padding: 12px; }
  table.rate th.prod .pname { font-size: 14px; }
  table.rate th, table.rate td { font-size: 14px; padding: 12px 4px; }
  table.rate th.kind { width: 88px; min-width: 88px; font-size: 13px; }
  table.rate td.gift b { font-size: 19px; }
}

/* 표 제목 안의 통신사 이름 색 */
.rate-head h2 .co { font-weight: 800; }
.co.kt { color: var(--kt); }
.co.sk { color: var(--sk); }
.co.lg { color: var(--lg); }
.co.sky { color: var(--sky); }
.co.hello { color: var(--hello); }

/* 옆으로 밀어도 상품 이름 칸은 왼쪽에 붙어 있게 (폰에서 어떤 상품인지 놓치지 않도록) */
/* 2026-09-15: '인터넷 상품 + 결합 여부' 두 칸을 함께 왼쪽에 고정한다.
   좁은 폭에서 표를 옆으로 밀어도 '어느 상품·어느 결합'이 늘 보이고 요금·사은품만 밀린다.
   ⚠ 상품 칸만 고정하면 결합 라벨이 밀려 사라져, 요금이 어느 결합 것인지 모르게 되는
      버그가 있었다(사장님 지적). 결합 칸도 함께 고정해 그 문제를 없앤다.
   ⚠ 머리글은 rowspan(상품·결합이 2줄을 차지) 탓에 아래 소제목(요금/사은품)이 비쳐 보이므로,
      고정된 머리칸의 z-index를 6으로 올려 확실히 덮는다.
   ⚠ 결합 칸의 left(왼쪽 시작점)는 상품 칸 너비와 같아야 한다 → PC 168px / 폰 132px. */
table.rate th.prod { position: sticky; left: 0; z-index: 2; background: #fff; box-shadow: 1px 0 0 var(--border); }
table.rate th.kind { position: sticky; left: 168px; z-index: 2; box-shadow: 2px 0 0 rgba(0,0,0,0.06); }
table.rate thead th.prod-head { position: sticky; left: 0; z-index: 6; }
table.rate thead th.kind-head { position: sticky; left: 168px; z-index: 6; }
@media (max-width: 768px) {
  table.rate th.kind, table.rate thead th.kind-head { left: 132px; }
}

/* 컴퓨터에서는 줄바꿈 자리가 없는 것처럼 둔다 (한 줄에 다섯 개가 다 들어간다) */
.tabs .tab-break { display: none; }

/* 폰에서는 통신사 단추를 두 줄로 접어 다섯 개가 한눈에 보이게 */
@media (max-width: 768px) {
  .tabs { flex-wrap: wrap; overflow-x: visible; }
}

/* 2026-09-02: 저절로 접히면 스카이라이프까지 첫 줄에 올라와 넉 대 하나로 갈라졌다.
   KT·SK·LG U+ 까지 첫 줄, 스카이라이프·헬로비전은 둘째 줄로 내린다 (사장님 지시).
   폭 100% 짜리 빈 칸을 끼워 넣어 그 자리에서 줄이 끊기게 한 것이다.
   560px 을 경계로 삼은 까닭: 다섯 개가 한 줄에 들어가려면 425px 이 필요하다.
   그보다 넓은 화면(태블릿 등)에서는 원래대로 한 줄이 깔끔하므로 건드리지 않는다. */
@media (max-width: 560px) {
  /* 2026-09-04 시험: 두 줄로 접지 않고 한 줄로 눕힌 뒤 좌우로 밀어 보게 한다.
     다섯 개를 한 줄에 다 넣으려면 437px 이 필요한데 폰은 375px 이라 62px 이 모자란다.
     일부러 살짝 잘리게 두고, 양쪽에 화살표와 흐림띠를 두어 '옆에 더 있다'를 알린다. */
  .tabs .tab-break { display: none; }
  .tabs {
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    padding-left: 34px; padding-right: 34px;
    /* scroll-behavior: smooth 는 넣지 않는다 — 이것이 켜져 있으면
       옛 브라우저용 안전장치(값을 그냥 대입해 옮기기)까지 애니메이션으로 가로채여 멈춘다.
       부드럽게 미는 일은 아래 밀기() 가 맡는다. */
  }
  .tabs-wrap.can-l::before, .tabs-wrap.can-r::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 44px;
    pointer-events: none; z-index: 1;
  }
  .tabs-wrap.can-l::before { left: 0; background: linear-gradient(to right, #fff 35%, rgba(255,255,255,0)); }
  .tabs-wrap.can-r::after { right: 0; background: linear-gradient(to left, #fff 35%, rgba(255,255,255,0)); }
  .tabs-wrap.can-l .tabnav-l, .tabs-wrap.can-r .tabnav-r { display: flex; }
}

/* 통신사 단추를 감싸는 자리 (화살표를 얹기 위해) */
.tabs-wrap { position: relative; }
.tabnav {
  display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 30px; height: 30px; padding: 0; border-radius: 50%;
  background: #fff; border: 1px solid var(--border); color: var(--gray);
  box-shadow: 0 2px 8px rgba(15,42,90,0.14);
  align-items: center; justify-content: center; cursor: pointer;
}
.tabnav:active { transform: translateY(-50%) scale(0.92); }
.tabnav-l { left: 4px; }
.tabnav-r { right: 4px; }

/* ===== 소제목 바로가기 줄 (2026-09-04 시험) ===== */
.jumpbar { border-top: 1px solid var(--border); background: #ffffff; }
.jumps {
  max-width: 860px; margin: 0 auto; padding: 8px 20px;
  display: flex; gap: 8px; justify-content: center; align-items: center;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.jumps::-webkit-scrollbar { display: none; }
.jump {
  font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: -0.3px;
  flex: 0 0 auto; white-space: nowrap; padding: 7px 14px; border-radius: 999px;
  cursor: pointer; background: var(--ground); border: 1px solid var(--border); color: var(--gray);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.jump:hover { border-color: var(--primary); color: var(--primary); }
.jump[aria-current="true"] { background: #eff6ff; border-color: #dbeafe; color: var(--primary); }
.jump[hidden] { display: none; }
/* 옆으로 밀어 보는 줄임을 알리려고, 화면 밖으로 잘리는 쪽 끝을 옅게 지운다 (2026-09-10).
   잘린 쪽에만 켜진다 — 오른쪽에 더 있으면 오른쪽 끝, 끝까지 밀면 왼쪽 끝이 옅어진다.
   켜고 끄는 일은 dh-plans.js 의 목차그늘() 이 맡는다.
   옛 브라우저가 mask 를 못 알아들으면 아무 일도 일어나지 않는다 — 지금처럼 그냥 잘려 보인다. */
.jumps.can-r {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 52px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 52px), transparent);
}
.jumps.can-l:not(.can-r) {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 52px), transparent);
          mask-image: linear-gradient(to left, #000 calc(100% - 52px), transparent);
}
.jumps.can-l.can-r {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 52px, #000 calc(100% - 52px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 52px, #000 calc(100% - 52px), transparent);
}
@media (max-width: 560px) {
  .jumps { justify-content: flex-start; padding: 8px 16px; }
}

/* 구분칸 아래 딸린 작은 설명 (예: 30% 할인 적용 → 사은품 변동) */
table.rate th.kind .kind-sub { display: block; font-size: 12px; font-weight: 400; color: var(--dark); margin-top: 4px; white-space: nowrap; }

/* 대부분 놓치고 있는 가족결합 할인 상자 */
.bundle { margin-top: 12px; background: white; border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.bundle h3 { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; color: var(--dark); margin-bottom: 16px; }
.bundle h4 { font-size: 14px; font-weight: 700; color: var(--dark); margin: 40px 0 8px; }
table.bundle-tbl { border-collapse: collapse; width: 100%; }
table.bundle-tbl th, table.bundle-tbl td {
  border: 1px solid var(--border); padding: 10px 12px;
  font-size: 13px; font-weight: 400; color: var(--dark);
  text-align: left; vertical-align: middle; line-height: 1.6; word-break: keep-all;
}
table.bundle-tbl thead th { background: var(--head-bg); color: #FFFFFF; font-weight: 700; text-align: center; white-space: nowrap; }
table.bundle-tbl td.b-first { font-weight: 700; background: var(--ground); white-space: nowrap; vertical-align: middle; }
.bundle-note { margin-top: 12px; }
.bundle-note li { list-style: none; font-size: 13px; color: var(--gray); line-height: 1.8; padding-left: 12px; position: relative; word-break: keep-all; }
.bundle-note li::before { content: '·'; position: absolute; left: 0; }

/* ===== 약정 글 (2026-09-02 신규) =====
   글 양식은 아정당 실측을 따랐다 — 본문 16px / 400 / 줄간격 1.5 /
   문단 아래 16px / 강조는 색 없이 굵기 700.
   ⚠ 디자인보드의 본문(15/400·줄간격 넓게)과 다르다. 사장님 지시로 아정당 쪽을 따른 것. */
.term { margin-top: 28px; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 24px; }
.gonext { margin-top: 40px; padding: 20px 16px; border: 1px solid var(--border);
  border-radius: 8px; background: #F5F6F8; text-align: center;
  font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--dark); word-break: keep-all; }
.gonext b { font-weight: 800; color: var(--dark); }
/* 결합 칸 맨 앞 도입 문단 — 약정 칸 본문과 같은 모양으로 */
.bundle-intro p { font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--dark);
  margin-bottom: 64px; word-break: keep-all; }
.bundle-intro p:last-child { margin-bottom: 32px; }
.bundle-intro b { font-weight: 700; color: #D92D20; }
@media (max-width: 768px) { .bundle-intro p { font-size: 15px; } }
/* 이음줄 첫 외침 — 대분류 제목과 같은 크기로 눈에 걸리게 한다 */
/* 요금표 제목 위에 놓이는 '잠깐!' 상자 — 맨 위라 위 여백이 필요 없다 */
.gonext.top { margin-top: 0; margin-bottom: 24px; }
.gonext strong.hook { display: block; font-size: 24px; font-weight: 800; letter-spacing: -0.5px;
  line-height: 1.2; color: var(--dark); margin-bottom: 12px; }
@media (max-width: 768px) { .gonext { padding: 16px 12px; font-size: 15px; }
  .gonext strong.hook { font-size: 22px; } }
.bignum { display: block; font-size: 22px; font-weight: 800; color: var(--dark);
  letter-spacing: -0.5px; line-height: 1; margin-bottom: 8px; }
.bignum .n { font-weight: 800; color: var(--dark); }
.bignum i { font-style: normal; font-size: 14px; font-weight: 800; color: var(--gray); margin-left: 4px; }
@media (max-width: 768px) { .bignum { font-size: 20px; } .bignum i { font-size: 13px; } }
.term h3 { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; color: var(--dark); line-height: 1.2; margin-bottom: 16px; }
.term h4 { font-size: 20px; font-weight: 800; letter-spacing: -0.4px; color: var(--dark); line-height: 1.2; margin: 144px 0 16px; }
.term p  { font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--dark); margin-bottom: 128px; word-break: keep-all; }
.term p:last-child { margin-bottom: 0; }
.term b  { font-weight: 700; color: #D92D20; }
.term i.q { font-style: normal; font-weight: 700; color: var(--dark); }
.term h4 .num { display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 4px; background: var(--dark); color: #fff;
  font-size: 16px; font-weight: 800; line-height: 1; margin-bottom: 8px; }

.term-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 64px; }
table.term-tbl { border-collapse: collapse; width: 100%; }
table.term-tbl th, table.term-tbl td {
  border: 1px solid var(--border); padding: 12px 8px; font-size: 15px; text-align: center;
  white-space: nowrap; vertical-align: middle;
}
table.term-tbl thead th { background: var(--head-bg); font-weight: 700; color: #FFFFFF; }
table.term-tbl th.rn { background: #F5F6F8; font-weight: 600; color: var(--dark); text-align: left; padding-left: 16px; }
table.term-tbl thead th.rn { background: var(--head-bg); color: #FFFFFF; font-weight: 700; }
table.term-tbl tr.pick th.rn { background: #FDF3F2; color: #D92D20; font-weight: 800; }
table.term-tbl tr.pick td { background: #FDF3F2; font-weight: 800; color: #D92D20; }
table.term-tbl tr.tot th.rn, table.term-tbl tr.tot td { background: #FDF3F2; font-weight: 800; color: var(--dark); }
table.term-tbl tr.tot td:last-child { color: #D92D20; }
/* 가운데 축 표 — 항목 이름이 가운데 칸에 온다 */
table.term-tbl.vs th.rn { text-align: center; padding-left: 8px; padding-right: 8px; }
/* 표에 적힌 사은품이 끝이 아니라는 표시 (요금표의 '+ 추가혜택'과 같은 몫) */
table.term-tbl em.plus { display: block; font-style: normal; font-size: 14px; font-weight: 800;
  color: #D92D20; margin-top: 4px; white-space: nowrap; letter-spacing: -0.3px; }

.term-res { border: 1px solid #D92D20; background: #FDF3F2; border-radius: 8px; padding: 16px; margin-bottom: 64px; }
.term-res p { margin-bottom: 0; }
.term-res p + p { margin-top: 8px; }
.term-res p.cav { font-size: 13px; font-weight: 600; color: var(--gray); line-height: 1.8; margin-top: 12px; }
.term-warn { border-left: 3px solid #D92D20; padding-left: 12px; margin-bottom: 64px; }
.term p.tight { margin-bottom: 64px; }
.term p.lead { margin-bottom: 64px; }
.term p.pre { margin-bottom: 64px; }
.term p.lead + h4 { margin-top: 72px; }
.term-warn p { margin-bottom: 0; color: var(--gray); }
.term-note { margin-top: 64px; }
.term-note li { list-style: none; font-size: 13px; font-weight: 600; color: var(--gray); line-height: 1.8; padding-left: 12px; position: relative; word-break: keep-all; }
.term-note li::before { content: '·'; position: absolute; left: 0; }
.term p.term-hint { display: none; font-size: 12px; color: var(--dark); margin-bottom: 8px; }
/* ⚠ '.term p' 의 문단 여백(128px)이 더 세서, 여기서도 'p' 를 붙여야 8px 가 먹는다 */

@media (max-width: 768px) {
  .term { padding: 16px; }
  .term h3 { font-size: 22px; }
  .term h4 { font-size: 18px; margin-top: 112px; }
  .term p { font-size: 15px; }
  .term p.term-hint { display: block; }
  table.term-tbl th, table.term-tbl td { font-size: 14px; padding: 12px 4px; }
  table.term-tbl th.rn { padding-left: 12px; font-size: 13px; width: 116px; min-width: 116px;
                         position: sticky; left: 0; z-index: 2; }
  table.term-tbl.vs th.rn { position: static; width: auto; min-width: auto;
                            padding-left: 4px; padding-right: 4px; }
  table.term-tbl thead th:first-child { position: sticky; left: 0; z-index: 3; }
  table.term-tbl.wide { min-width: 520px; }
  table.term-tbl em.plus { font-size: 13px; }
}

/* 모바일: '가입 전 알아 두면 좋은 것' 표의 좌우 여백을 줄여 내용 폭을 넓힌다 —
   특히 셋톱박스 표의 '특징' 칸이 오른쪽에서 잘리던 것을 막는다 (2026-09-15 사장님 지시) */
@media (max-width: 768px) {
  .wrap { padding-left: 10px; padding-right: 10px; }
  .know .term { padding-left: 8px; padding-right: 8px; }
  .know table.term-tbl th.rn { width: 84px; min-width: 84px; padding-left: 8px; }
  .know table.term-tbl th, .know table.term-tbl td { padding-left: 5px; padding-right: 5px; }
}

@media (max-width: 768px) {
  .bundle { padding: 12px; }
  table.bundle-tbl th, table.bundle-tbl td { padding: 8px; font-size: 12px; }
  table.bundle-tbl { min-width: 520px; }
}


/* ── 가입 전에 알아 두면 좋은 것 (2026-09-03) ──
   요금표 탭 아래에 두고, 탭을 누르면 그 통신사 몫으로 다시 그린다.
   속도 가이드·회선 방식처럼 어느 통신사나 같은 이야기는 한 벌만 두고,
   셋톱박스·집전화처럼 통신사마다 다른 것만 갈아 끼운다.
   글 모양은 '약정' 칸에서 쓰던 .term 을 그대로 물려 쓴다. */
.know { margin-top: 40px; }
/* 머리글 없이 큰제목 바로 아래 소제목이 오는 칸(03)은 간격을 좁힌다.
   .term h4 의 위 여백 144px 이 그대로 먹으면 제목과 첫 소제목이 너무 벌어진다. */
.term h3 + h4 { margin-top: 40px; }
/* 소제목 옆에 붙는 통신사별 상품 이름 — 제목보다 작지만 색은 그대로 진하게 둔다 */
.term h4 em.alias { font-style: normal; font-size: 16px; font-weight: 700;
  color: var(--dark); letter-spacing: -0.3px; }
.term h4 em.alias::before { content: '|'; margin: 0 10px; font-weight: 400; color: var(--border); }
.know-head { text-align: center; padding: 32px 20px; background: #F5F6F8;
  border: 1px solid var(--border); border-radius: 12px; }
.know-head h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.5px;
  color: var(--dark); line-height: 1.3; word-break: keep-all; }
.know-head p { margin-top: 12px; font-size: 15px; color: var(--dark);
  line-height: 1.6; word-break: keep-all; }
/* 글이 들어가는 표 — 기본 표는 한 줄로 붙여 두어서(white-space:nowrap)
   문장이 들어가면 옆으로 한없이 늘어난다. 여기서만 줄바꿈을 푼다. */
table.term-tbl.txt th, table.term-tbl.txt td { white-space: normal; word-break: keep-all; line-height: 1.6; }
/* 새로 나온 제품 딱지 */
table.term-tbl em.new { display: inline-block; margin-top: 4px; font-style: normal;
  font-size: 12px; font-weight: 700; color: #D92D20; letter-spacing: -0.3px; white-space: nowrap; }
/* 금액처럼 끊기면 안 되는 칸 — 이 칸 폭만큼은 표가 자리를 내준다 */
table.term-tbl .nw { white-space: nowrap; }
/* 표 바로 밑에 붙는 단서 — 아래 주석 목록과 같은 크기·색으로 담백하게 */
.term-scroll.has-note { margin-bottom: 12px; }
ul.tbl-note { margin-bottom: 64px; }
ul.tbl-note li { list-style: none; font-size: 13px; font-weight: 600; color: var(--gray);
  line-height: 1.8; padding-left: 12px; position: relative; word-break: keep-all; }
ul.tbl-note li::before { content: '·'; position: absolute; left: 0; }
table.term-tbl.txt td.L { text-align: left; padding-left: 12px; padding-right: 12px; }
/* 통신사 이름 칸은 좁게 잡아 오른쪽 설명이 넓게 퍼지도록 */
table.term-tbl.txt th.rn { width: 140px; }
/* 통신사 공홈에서 그대로 옮겨 온 문장 */
.term blockquote { margin: 0 0 128px; padding: 16px; background: #F5F6F8;
  border-left: 3px solid var(--border); border-radius: 0 8px 8px 0;
  font-size: 15px; line-height: 1.7; color: var(--dark); word-break: keep-all; }
.term blockquote cite { display: block; margin-top: 8px; font-style: normal;
  font-size: 13px; font-weight: 600; color: var(--gray); }
@media (max-width: 768px) {
  .know-head { padding: 24px 16px; }
  .know-head h2 { font-size: 22px; }
  .know-head p { font-size: 14px; }
  /* 글이 든 표는 이름 칸을 좁혀 설명 칸에 자리를 넘긴다.
     100px 로 두면 3칸짜리 표에서 설명 칸이 105px 밖에 안 남는다. */
  /* 폰에서는 제목이 길어지므로 곁이름을 아랫줄로 내린다 */
  .term h4 em.alias { display: block; margin-top: 6px; font-size: 14px; }
  .term h4 em.alias::before { display: none; }
  table.term-tbl.txt th.rn { width: 76px; min-width: 76px; padding-left: 8px; }
  table.term-tbl.txt th, table.term-tbl.txt td { padding-left: 6px; padding-right: 6px; }
  .term blockquote { font-size: 14px; padding: 12px; }
}

/* 컴퓨터 화면 아래에 따라다니는 신청 카드가 푸터 글을 가리지 않도록 자리를 비워 둔다
   (2026-09-02 실측: 카드 높이 77px + 아래 여백 24px) */
@media (min-width: 769px) {
  footer .footer-inner { padding-bottom: 104px; }
}

/* ══════════════════════════════════════════════════════════════
   ★ 디자인보드 적용 (2026-09-08) — 요금표 여섯 장이 똑같이 갖는 덩어리
     보드 원본: 안티그라비티\당현함 디자인보드\디자인보드.md

     ① 모서리는 4·8·12·16·999 눈금 위에서만 고른다
     ② 그림자는 기본이 없다. 예외는 화면 아래 고정 띠와 팝업 둘뿐이다
     ③ 손가락으로 누르는 것은 44px 이상
     ④ 금액과 표의 숫자에는 dh-num 을 붙인다
     ⑤ 표 머리줄은 그 통신사 색 + 흰 글씨 (아래 참고)
   ══════════════════════════════════════════════════════════════ */

/* ⑤ 표 머리줄 색 — 아래 잔손질 스크립트가 고른 통신사에 맞춰 --head-bg 를 바꾼다.
   2026-09-08 2차: 통신사 색은 위 :root 에 적힌 한 벌뿐이다.
   로고 · 탭 단추 · 제목 속 회사 이름 · 표 머리줄이 모두 같은 값을 쓴다.
   ⚠ SK·LG 는 그 회사 원색이 아니라 한 계단 내린 값이다 —
     원색은 흰 바탕 글씨로 대비가 2.80 · 4.43 이라 탭 글씨와 제목이 안 읽혔다. */
:root { --head-bg: #0B2E5C; }        /* 스크립트가 못 돌아도 글씨는 읽히게 하는 받침값 */
/* 칸마다 제 통신사 색을 미리 박아 둔다 — 잔손질 스크립트가 안 돌아도 표는 제 색으로 나온다.
   칸 밖에 있는 '가입 전에 알아 두면 좋은 것'만 스크립트가 칠한다. */
/* 2026-09-08 2차: 통신사 색을 한 벌로 통일했다. 로고·탭·머리줄이 모두 같은 값을 쓴다.
   그래서 여기서 색을 다시 적지 않고 :root 의 통신사 색을 그대로 가져다 쓴다. */
#panel-kt    { --head-bg: var(--kt); }
#panel-sk    { --head-bg: var(--sk); }
#panel-lg    { --head-bg: var(--lg); }
#panel-sky   { --head-bg: var(--sky); }
#panel-hello { --head-bg: var(--hello); }

/* ① 모서리 — 눈금 밖 값(6·9·14·50%)을 눈금 위로 올린다 */
nav a            { border-radius: 8px; }
.cs-btn          { border-radius: 8px; }
.consult-panel   { border-radius: 12px; }
.desk-cta-card   { border-radius: 12px; }
.mobile-cta-btn  { border-radius: 8px; }   /* 주 단추는 모서리 8 */
.float-btn, .zoom-close, .tabnav { border-radius: 999px; }

/* ② 그림자 — 기본 없음. 머리띠는 그림자 대신 아래 선으로 경계를 만든다 */
header        { box-shadow: none; border-bottom: 1px solid var(--border); }
.tab          { box-shadow: none; }
.tab[aria-selected="true"] { box-shadow: none; }
.tabnav       { box-shadow: none; }
.mobile-cta-btn   { box-shadow: none; }
.mobile-cta-btn:active { box-shadow: none; }
/* ⚠ 카톡 단추는 그림자를 없애면 안 된다 — 보드가 정한 '남의 브랜드색' 규칙이다.
   노랑을 어둡게 만들지 않는 대신 손 얹었을 때 그림자로 알린다. 그래서 여기서 건드리지 않는다. */
/* 떠 있는 동그란 단추는 팝업과 같은 '진짜 떠 있는 것'이라 보드의 팝업 그림자를 쓴다 */
.float-btn    { box-shadow: 0 8px 32px rgba(11,46,92,0.16); }
/* 예외 ㉠ 화면 아래에 고정돼 떠 있는 것 */
.mobile-cta-bar { box-shadow: 0 -3px 16px rgba(15,42,90,0.14); }
.desk-cta-card  { box-shadow: 0 8px 32px rgba(11,46,92,0.16); }
/* 예외 ㉡ 팝업처럼 화면 위로 뜨는 것 */
.mobile-menu    { box-shadow: 0 8px 32px rgba(11,46,92,0.16); }
.consult-panel  { box-shadow: 0 8px 32px rgba(11,46,92,0.16); }

/* ③ 누르는 것은 44px 이상 — 높이를 억지로 늘리는 대신
     누르는 자리(안쪽 여백)를 넓혀 머리띠 64px 안에 그대로 담는다 */
nav a { padding: 13px 10px; }
@media (min-width: 769px) and (max-width: 880px) { nav a { padding: 13px 7px; } }
.logo { min-height: 44px; }
.jump { min-height: 44px; display: inline-flex; align-items: center; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
.mobile-menu a  { min-height: 44px; display: flex; align-items: center; }

/* ④ 숫자 자릿수 맞춤 — 금액이 바뀔 때 옆 글자가 밀리지 않게 한다 */
.dh-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ⑥ 통신사 색 위 흰 글씨에 옅은 후광 (2026-09-08 · 사장님이 고르심)
   ─────────────────────────────────────────────────────────────────
   왜 두르나 — SK 색(#E7630F) 위 흰 글씨는 대비가 3.39 로 기준 4.5 에 못 미친다.
     글자 둘레에 옅은 어두운 기운을 깔면 배경과 무관하게 획의 윤곽이 잡힌다.

   ⚠ 이것은 기준을 통과시키는 방법이 아니다. 접근성 기준은 후광·테두리를 세어 주지 않으므로
     숫자상 대비는 3.39 그대로다. "눈에 또렷해지는 것"만 얻는다.
     숫자까지 통과시키려면 색 자체를 바꿔야 한다 (보드 2장 'SK 대안 색 다섯').

   ⚠ 글씨색은 건드리지 않았다 — 흰색 그대로다.
     보드 8장: 통신사 색 위 글씨는 흰색 하나이고, 대비가 모자란다고 검정·진한 글씨로 바꾸지 않는다.

   다섯 통신사 모두에 넣는다. SK 하나만 넣으면 그 표만 글씨가 달라 보여,
   "다섯이 고르게 보여야 한다"는 애초 까닭과 어긋난다.

   ── 함께 견주어 본 다른 방법들 (2026-09-08) ──
   ③ 아래 그림자  text-shadow: 0 1px 1px rgba(0,0,0,.5)
      한쪽에만 그늘이 져 글자가 살짝 떠 보인다. 보드의 '그림자는 기본 없음' 방향과 어긋난다.
   ④ 같은 색조 테두리  사방 0.6px #8F3200 (SK 기준. 통신사마다 그 색의 진한 판)
      ★ 클로드가 추천했던 것. 테두리 색조 50.8도가 SK 주황 53.3도와 사실상 같아
        새 색이 는 느낌이 없고, 흰 글씨와 테두리의 대비 8.00 으로 윤곽이 또렷해지는데
        바탕과의 대비는 2.36 이라 테두리 자체는 눈에 안 띈다.
      사장님이 ② 를 고르셨다. 되돌리거나 갈아탈 때 이 값을 그대로 쓰면 된다.
   ⑤ 두꺼운 테두리  -webkit-text-stroke: 0.8px
      12.5px 한글에서 ㅇ·ㅎ 속이 메워져 오히려 안 읽힌다. 쓰지 말 것.
   ─────────────────────────────────────────────────────────────────
   ── 번짐 값 (2026-09-08 2차) ──
   처음 0 0 2px 로 넣었더니 라이브 캡쳐에서 차이가 거의 안 보였다.
   1px 로 줄이면 어두운 기운이 글자에 바싹 붙어 윤곽이 더 또렷해진다 (사장님 지시).
   더 세게 하려면 진하기(.45)를 올리는 길이 남아 있는데, 글자 둘레가 탁해질 수 있다.
   되돌리려면 아래 두 줄만 지운다. */
table.rate thead th, table.bundle-tbl thead th, table.term-tbl thead th,
.tab[aria-selected="true"] { text-shadow: 0 0 1px rgba(0,0,0,.45); }


/* ===== 한글은 낱말 가운데를 끊지 않는다 (2026-09-11, 보드 규칙 9) =====
   ⚠ 표 안에 문장을 넣을 때는 white-space:normal 을 함께 줘야 표가 안 늘어난다. */
body, p, li, dd, dt, h1, h2, h3, h4, span, strong, em, b, a, div, label, button, td, th, figcaption, blockquote {
  word-break: keep-all;
}


/* ===== 누르는 자리 44 (2026-09-11, 보드 규칙 9) =====
   보이는 크기는 그대로 두고 위에 보이지 않는 44짜리 층만 덮는다. */
.logo, .hamburger, .footer-links a, .doc-back { position: relative; }
.logo::after, .hamburger::after, .footer-links a::after, .doc-back::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%); height: 44px;
}
.hamburger::after { left: 50%; right: auto; width: 44px; min-width: 100%; transform: translate(-50%, -50%); }

/* 셋톱박스 월 요금 표 — 제품 이름을 상세페이지로 잇는 링크 (새 창) 2026-09-14 */
.know .term-tbl .rn .settop-link{color:var(--primary,#1257C9);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.know .term-tbl .rn .settop-link:hover{opacity:.82;}