/* ===== 정소장 요금 계산기 · 프리미엄 폰 + 설명 (반응형) 2026-07-25 =====
   세트: jeong-calc.html(마크업) + jeong-calc.css + jeong-calc.js
   요금 수정 = jeong-calc.js 상단 두 표만
   구조: .jeong-calc(래퍼) > .jcalc(폰: 계산기만) + .jcalc-info(설명: 폰 밖) */
.jeong-calc{--bezel:#0a1122;--navy:#0b1c4d;--blue:#1E40AF;--gold:#F2A81E;--ink:#15223f;--sub:#6b78a0;--line:#e7ecf7;--paper:#fff;--soft:#f5f8fd;--good:#0f8a55;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:34px;
  max-width:860px;margin:28px auto;padding:6px 16px;
  font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;color:var(--ink)}
.jeong-calc *{box-sizing:border-box;margin:0}

/* ===== 폰 본체 (계산기만) ===== */
.jcalc{position:relative;flex:none;width:330px;max-width:100%;background:var(--bezel);border-radius:50px;padding:13px;
  box-shadow:0 42px 72px -30px rgba(8,14,30,.6), inset 0 0 0 1.5px rgba(255,255,255,.07), inset 0 0 0 6px #060a15}
.jcalc-island{position:absolute;top:26px;left:50%;transform:translateX(-50%);width:98px;height:24px;background:#000;border-radius:999px;z-index:6}
.jcalc-island::after{content:"";position:absolute;right:13px;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:#18233c;box-shadow:inset 0 0 0 1px #2b3c61}
.jcalc-screen{position:relative;background:var(--paper);border-radius:38px;overflow:hidden}

.jcalc-status{display:flex;justify-content:space-between;align-items:center;padding:15px 24px 3px;font-size:11px;font-weight:800;color:var(--sub);letter-spacing:.01em}
.jcalc-status .r{display:flex;gap:6px;align-items:center;opacity:.7}
.jcalc-status .bars{width:15px;height:9px;background:
  linear-gradient(currentColor,currentColor) 0 100%/3px 4px no-repeat,
  linear-gradient(currentColor,currentColor) 5px 100%/3px 6px no-repeat,
  linear-gradient(currentColor,currentColor) 10px 100%/3px 9px no-repeat}
.jcalc-status .bat{width:17px;height:9px;border:1.3px solid currentColor;border-radius:2.5px;padding:1px}
.jcalc-status .bat::before{content:"";display:block;width:72%;height:100%;background:currentColor;border-radius:1px}

.jcalc-app{padding:6px 22px 24px}
.jcalc-brand{display:flex;align-items:center;gap:10px;padding:8px 0 16px;border-bottom:1px solid var(--line);margin-bottom:18px}
.jcalc-logo{width:40px;height:40px;border-radius:12px;background:var(--navy);color:var(--gold);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:20px;flex:none}
.jcalc-brand h3{font-size:15.5px;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.2}
.jcalc-brand p{font-size:10.5px;color:var(--sub);font-weight:600;margin-top:2px}

.jsc-step{margin-bottom:15px}
.jsc-lab{font-size:10.5px;font-weight:800;color:var(--sub);letter-spacing:.05em;text-transform:uppercase;margin-bottom:9px;display:flex;align-items:center;gap:7px}
.jsc-lab .n{background:var(--navy);color:#fff;width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;flex:none;letter-spacing:0}
.jsc-btns{display:flex;gap:8px}
.jsc-btns button{flex:1;padding:13px 4px;border:1.5px solid var(--line);background:var(--paper);border-radius:14px;cursor:pointer;
  font-family:inherit;font-weight:800;font-size:14px;color:var(--ink);transition:.16s cubic-bezier(.2,.7,.2,1);line-height:1.2}
.jsc-btns button small{display:block;font-size:10px;font-weight:600;color:var(--sub);margin-top:3px}
.jsc-btns button:hover{border-color:#b7c4e6}
.jsc-btns button.on{background:var(--navy);border-color:var(--navy);color:#fff;transform:translateY(-1px);box-shadow:0 8px 18px -6px rgba(11,28,77,.5)}
.jsc-btns button.on small{color:var(--gold)}

.jsc-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--soft);border-radius:14px;padding:12px 15px}
.jsc-toggle .jsc-lab{margin:0}
.jsc-tnote{margin-top:5px;font-size:10px;color:var(--sub);line-height:1.5;text-transform:none;letter-spacing:0;font-weight:600}
.jsc-tnote b{color:var(--blue)}
.jsc-sw{width:50px;height:29px;border-radius:999px;border:none;background:#cdd6ea;position:relative;cursor:pointer;flex:none;transition:.18s;padding:0}
.jsc-sw.on{background:var(--blue)}
.jsc-knob{position:absolute;top:3px;left:3px;width:23px;height:23px;border-radius:50%;background:#fff;transition:.18s cubic-bezier(.2,.7,.2,1);box-shadow:0 2px 5px rgba(0,0,0,.28)}
.jsc-sw.on .jsc-knob{left:24px}

.jsc-result{margin:20px 0 4px;background:var(--navy);border-radius:22px;padding:24px 12px 22px;text-align:center;position:relative;overflow:hidden;box-shadow:0 18px 40px -18px rgba(11,28,77,.6)}
.jsc-result::after{content:"";position:absolute;right:-34px;top:-34px;width:130px;height:130px;border-radius:50%;background:rgba(242,168,30,.09)}
.jsc-rlab{font-size:11px;color:#9db0dc;font-weight:700;letter-spacing:.04em;position:relative}
.jsc-amt{font-size:36px;font-weight:900;letter-spacing:-.03em;color:var(--gold);line-height:1.12;margin:8px 0 4px;font-variant-numeric:tabular-nums;position:relative;white-space:nowrap}
.jsc-amt .u{font-size:17px;font-weight:800;letter-spacing:-.01em;margin:0 1px}
.jsc-amt.wait{font-size:15.5px;color:#8394c1;font-weight:700;letter-spacing:0;padding:12px 0;white-space:normal}
.jsc-incl{font-size:10.5px;color:#c6d2ec;font-weight:600;position:relative}
.jsc-incl b{color:#fff}
.jsc-note{font-size:10.5px;color:#8394c1;line-height:1.6;margin-top:8px;position:relative;min-height:17px}
.jsc-rlab{min-height:14px}

/* ===== 설명 (폰 밖) ===== */
.jcalc-info{flex:1;min-width:280px;max-width:430px}
.jcalc-info .tag{position:relative;display:inline-block;font-size:11px;font-weight:800;color:var(--blue);letter-spacing:.09em;text-transform:uppercase;margin-bottom:15px;padding-left:16px}
.jcalc-info .tag::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:var(--gold)}
.jcalc-info h4{font-size:31px;font-weight:900;letter-spacing:-.04em;line-height:1.16;margin-bottom:12px;text-wrap:balance;word-break:keep-all;color:var(--ink)}
.jcalc-info h4 b{color:var(--blue);white-space:nowrap}
.jcalc-info h4 b:nth-of-type(2){color:var(--navy);box-shadow:inset 0 -11px 0 rgba(242,168,30,.38)}
.jcalc-info .sub{font-size:14px;color:#48557a;line-height:1.72;margin-bottom:24px;max-width:38ch;font-weight:500}
.jsc-perks{display:flex;flex-direction:column;gap:6px;margin-bottom:20px}
.jsc-perk{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.6;color:#414e73;font-weight:500;
  padding:9px 12px;margin:0 -12px;border-radius:13px;cursor:default;transition:background .2s,transform .2s,box-shadow .2s}
.jsc-perk .ic{width:24px;height:24px;border-radius:50%;background:rgba(15,138,85,.12);color:var(--good);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px;flex:none;margin-top:1px;transition:transform .22s cubic-bezier(.2,.7,.2,1),background .2s}
.jsc-perk b{color:var(--ink);font-weight:800;transition:color .18s}
.jsc-perk:hover{background:var(--paper);transform:translateX(5px);box-shadow:0 8px 22px -10px rgba(11,28,77,.2)}
.jsc-perk:hover .ic{transform:scale(1.2) rotate(-8deg);background:var(--good);color:#fff}
.jsc-perk:hover b{color:var(--blue)}
.jsc-cond{font-size:11.5px;color:var(--sub);line-height:1.8;background:var(--soft);border-radius:13px;padding:14px 16px;margin-bottom:18px;transition:box-shadow .2s,border-color .2s;border:1px solid transparent}
.jsc-cond:hover{box-shadow:0 8px 22px -12px rgba(11,28,77,.18);border-color:var(--line)}
.jsc-cond b{color:var(--ink);font-weight:800}
@media (prefers-reduced-motion:reduce){.jsc-perk,.jsc-perk .ic,.jsc-cond,.jsc-btns button,.jsc-cta a{transition:none}.jsc-perk:hover{transform:none}.jsc-perk:hover .ic{transform:none}}
/* ===== 계산값 그대로 상담 신청 미니폼 (→ 텔레그램) ===== */
.jsc-consult{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:15px 15px 16px;margin-bottom:11px}
.jsc-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.jsc-cf-head{display:flex;flex-direction:column;gap:3px;margin-bottom:12px}
.jsc-cf-lab{font-size:11px;font-weight:800;color:var(--blue);letter-spacing:.02em}
.jsc-cf-sum{font-size:12.5px;color:#48557a;font-weight:600;line-height:1.5;word-break:keep-all}
.jsc-cf-sum b{color:var(--navy);font-weight:900}
.jsc-cf-row{display:flex;gap:8px;margin-bottom:9px}
.jsc-cf-row input{flex:1;min-width:0;padding:12px 13px;border:1.5px solid var(--line);border-radius:11px;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink);background:var(--paper);transition:border-color .16s,box-shadow .16s}
.jsc-cf-row input::placeholder{color:#9aa6c4;font-weight:500}
.jsc-cf-row input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(30,64,175,.1)}
.jsc-cf-err{font-size:11px;color:#d1344b;font-weight:700;margin:-3px 0 9px;display:none;line-height:1.5}
.jsc-cf-err.show{display:block}
.jsc-cf-agree{display:flex;gap:8px;align-items:flex-start;font-size:11px;color:var(--sub);line-height:1.5;cursor:pointer;margin-bottom:12px;font-weight:500}
.jsc-cf-agree input{margin-top:1px;width:15px;height:15px;flex:none;accent-color:var(--blue);cursor:pointer}
.jsc-cf-agree b{color:var(--ink);font-weight:700}
.jsc-priv{margin:-4px 0 12px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.jsc-priv summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;font-size:11px;font-weight:700;color:var(--sub);background:var(--soft)}
.jsc-priv summary::-webkit-details-marker{display:none}
.jsc-priv summary .op{color:var(--blue);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.jsc-priv-body{padding:10px 12px;font-size:10.5px;color:var(--sub);line-height:1.75;background:var(--paper);border-top:1px solid var(--line)}
.jsc-priv-body b{color:var(--ink);font-weight:700}
.jsc-cf-submit{width:100%;padding:15px;border:none;border-radius:12px;background:var(--gold);color:var(--navy);font-family:inherit;font-weight:900;font-size:14.5px;letter-spacing:-.01em;cursor:pointer;transition:filter .16s,transform .16s;box-shadow:0 10px 24px -12px rgba(242,168,30,.7)}
.jsc-cf-submit:hover{filter:brightness(.97);transform:translateY(-1px)}
.jsc-cf-submit:active{transform:translateY(0)}

.jsc-cta{display:flex;gap:8px}
.jsc-cta a{flex:1;text-align:center;padding:12px 6px;border-radius:11px;font-weight:800;font-size:12.5px;text-decoration:none;transition:.16s;letter-spacing:-.01em}
.jsc-quote{background:var(--paper);color:var(--navy);border:1.5px solid var(--line)}
.jsc-quote:hover{border-color:#b7c4e6;transform:translateY(-1px)}
.jsc-call{background:var(--navy);color:#fff}
.jsc-call:hover{background:#132a63;transform:translateY(-1px)}
.jsc-fine{font-size:10.5px;color:var(--sub);text-align:left;margin-top:13px;line-height:1.6}

/* 스크롤 리빌 — 스크롤 내리면 하나씩 떠오름 */
.jsc-reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.jsc-reveal.jsc-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.jsc-reveal{opacity:1!important;transform:none!important;transition:none}}

/* 임베드 위젯: 항상 밝은(설계) 톤 고정 — 페이지 다크모드와 무관하게 일관 */
@media (max-width:720px){
  .jeong-calc{gap:26px}
  .jcalc-info{max-width:340px;text-align:center}
  .jsc-perk{text-align:left}
  .jcalc-info h4{text-align:center}
  .jsc-fine{text-align:center}
}

/* ===== 상담 팝업(모달) · 공용 (2026-07-27) =====
   상담신청=버튼1개(모달 열기) · 상세/전화=밑줄 텍스트 링크 · 전화번호는 라벨에 안 보이고 설명문에만 */
.jsc-open{width:100%;padding:15px;border:none;border-radius:12px;background:var(--gold);color:var(--navy);font-family:inherit;font-weight:900;font-size:14.5px;letter-spacing:-.01em;cursor:pointer;transition:filter .16s,transform .16s;box-shadow:0 10px 24px -12px rgba(242,168,30,.7)}
.jsc-open:hover{filter:brightness(.97);transform:translateY(-1px)}
.jsc-open:active{transform:translateY(0)}
.jsc-tlinks{display:flex;flex-wrap:wrap;gap:7px 18px;margin-top:14px;justify-content:center}
.jsc-tlink{font-size:12.5px;font-weight:700;color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;cursor:pointer;transition:color .16s;background:none;border:none;font-family:inherit;padding:0}
.jsc-tlink:hover{color:var(--blue)}
.jsc-legal{font-size:11px;color:var(--sub);line-height:1.65;margin-top:14px;text-align:center}
.jsc-legal b{color:var(--ink);font-weight:800}

.jsc-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:18px}
.jsc-modal.open{display:flex}
.jsc-modal__ov{position:absolute;inset:0;background:rgba(8,14,30,.55);animation:jscFade .2s ease}
.jsc-modal__panel{position:relative;width:100%;max-width:404px;max-height:92vh;overflow:auto;background:var(--paper);border-radius:24px;padding:28px 26px 22px;box-shadow:0 40px 80px -22px rgba(8,14,30,.62);animation:jscPop .26s cubic-bezier(.2,.8,.2,1);text-align:left}
.jsc-modal__x{position:absolute;top:14px;right:14px;width:34px;height:34px;border:none;background:var(--soft);border-radius:50%;color:var(--sub);font-size:22px;line-height:1;cursor:pointer;transition:.15s;z-index:2}
.jsc-modal__x:hover{background:#e7ecf7;color:var(--ink)}
/* 헤더: 공용 상담 모달과 동일한 프리미엄 톤 — 브랜드 배지 → 정소장 마스코트 → 타이틀 → 서브 (가운데 정렬) */
.jsc-modal__brand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;margin-bottom:16px;padding-right:0}
.jsc-modal__brand::before{content:"찐요금 연구소 · SK브로드밴드 공식인증대리점";font-size:11.5px;font-weight:800;color:var(--blue);letter-spacing:.01em;margin-bottom:9px}
.jsc-modal__brand .jsc-modal__logo{width:62px;height:62px;border-radius:0;background:url(/img/mascot-thumbsup.webp) center/contain no-repeat;color:transparent;font-size:0;flex:none;margin-bottom:8px}
.jsc-modal__brand b{display:block;font-size:1.3rem;font-weight:900;color:var(--navy);letter-spacing:-.02em;line-height:1.2}
.jsc-modal__brand span{display:block;font-size:12.5px;color:var(--sub);font-weight:600;margin-top:6px;line-height:1.5}
.jsc-modal__panel .jsc-consult{background:none;border:none;padding:0;margin:0}
/* 요금 요약 칩: 강조 박스 + 금액 크게 */
.jsc-modal__panel .jsc-cf-head{background:var(--soft);border:1.5px solid var(--line);border-radius:13px;padding:12px 14px;margin-bottom:14px;align-items:center;text-align:center;gap:4px}
.jsc-modal__panel .jsc-cf-sum{font-size:12.5px}
.jsc-modal__panel .jsc-cf-sum b{font-size:15.5px;color:var(--navy);white-space:nowrap}
.jsc-modal__fine{font-size:11px;color:var(--sub);text-align:center;margin-top:13px;line-height:1.65;background:var(--soft);border-radius:10px;padding:9px 12px}
.jsc-modal__fine::before{content:"🔒 "}
.jsc-modal__fine b{color:var(--navy);font-weight:800}
@keyframes jscFade{from{opacity:0}to{opacity:1}}
@keyframes jscPop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.jsc-modal__ov,.jsc-modal__panel{animation:none}}
body.jsc-noscroll{overflow:hidden}
.jsc-hide{display:none!important}
.jsc-lock{pointer-events:none}   /* 선택 잠금: 색·크기 변경 없이 클릭만 막음 */

/* ===== 요금 목업 슬라이더(검색 노출용) — 3장 모두 렌더(색인 유리) ===== */
.pop-slider{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;max-width:340px;margin:0 auto;padding:4px 0;scrollbar-width:none;-ms-overflow-style:none}
.pop-slider::-webkit-scrollbar{display:none}
.pop-slide{flex:0 0 100%;scroll-snap-align:center;display:flex;justify-content:center}
.pop-slide img{width:150px;max-width:100%;height:auto;filter:drop-shadow(0 16px 34px rgba(8,14,30,.22))}
.pop-dots{display:flex;gap:7px;justify-content:center;margin-top:14px}
.pop-dots button{width:8px;height:8px;border-radius:50%;border:none;background:#cdd6ea;cursor:pointer;padding:0;transition:.2s}
.pop-dots button.on{background:#1E40AF;width:20px;border-radius:4px}

/* 유형 단계 추가 보정 — 계산기 높이 원래대로 유지(세로 여백 압축) */
.jcalc-app{padding:4px 20px 18px}
.jcalc-brand{padding:6px 0 11px;margin-bottom:12px}
.jsc-step{margin-bottom:10px}
.jsc-btns button{padding:10px 4px}
.jsc-toggle{padding:10px 15px}
.jsc-result{margin:13px 0 4px;padding:19px 12px 18px}

/* ===== 히어로 임베드 변형 — 폰 계산기 + 상담버튼만 세로 스택(설명패널 없음) ===== */
.jeong-calc.jc-hero{flex-direction:column;gap:13px;max-width:330px;margin:0 auto;padding:0}
.jc-hero .jsc-open{max-width:330px;margin:0 auto}
/* 히어로 계산기 위 사용 안내 한 줄 (.jeong-calc 밖이라 색상은 명시값) */
.jc-hint{text-align:center;font-size:13px;line-height:1.55;color:#1E40AF;font-weight:700;max-width:330px;margin:12px auto 2px;word-break:keep-all;padding:0 10px}
.jc-hint b{color:#0b1c4d}

/* ===== 상담 폼 메모칸 (선택) — btvpop 상담폼과 동일 패턴 ===== */
.jsc-cf-memolab{display:block;font-size:11px;font-weight:800;color:var(--blue);margin-bottom:5px}
.jsc-cf-memolab small{font-weight:600;color:var(--sub)}
.jsc-cf-memo{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:11px;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink);background:var(--paper);resize:vertical;min-height:46px;margin-bottom:9px;transition:border-color .16s,box-shadow .16s}
.jsc-cf-memo::placeholder{color:#9aa6c4;font-weight:500}
.jsc-cf-memo:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(30,64,175,.1)}