/* 콜브릿지 결(10-11 사장님이 고름): 검은 첫 화면 · 초록 강조 · 옅은 회색 바탕 · 큰 둥근 흰 패널 · 그라데이션 그림 칸 · 점 달린 라벨 · 검은 버튼.
   body.np-cb 가 붙은 화면(홈 + netpublic_plan_cb() 가 고른 요금제 화면)에만 먹는다. functions.php 에서 np-cb 를 붙이는 줄과 이 파일을 거는 줄을 빼면 남색 뉴스 포털식으로 돌아간다. (toss.css 는 body.home 기준 그대로다.) 구성과 문구는 건드리지 않는다. */
body.np-cb{
  --page:#F3F4F6; --paper:#fff; --ink:#111214; --sub:#5B616B; --line:#E5E7EB;
  --green:#22C55E; --green-deep:#15803D; --green-soft:#F0FDF4; --btn:#111214;
  --hero-bg:#0A0A0A; --hero-glow:radial-gradient(60% 70% at 38% 55%,rgba(34,197,94,.20),transparent 70%); --hero-sub:#A7B0A9; --hero-lead:#D7D9DD; --hero-em:#22C55E; --hero-chip:#232323;
  --pill-on-bg:#fff; --pill-on-fg:#111;
  --bill-bg:linear-gradient(180deg,#1E2A22,#101311); --bill-fg:#fff; --bill-fg2:#D7D9DD; --bill-sub:#A7B0A9; --bill-line:#26332B; --bill-line2:#33443A;
  --seg-on-bg:#fff; --seg-on-fg:#111; --tot-grad:linear-gradient(#fff,#fff); --bill-btn-bg:#fff; --bill-btn-fg:#111; --bill-shadow:none;
  --grad:linear-gradient(#22C55E,#22C55E); --band-bg:#0A0A0A; --rv-bg:#EAF2E4; --accent-line:#C6F26B; --accent-chip:#22C55E; --accent-chip-fg:#111;
  background:var(--page);
}

/* 머리: 검은 띠 안에 메뉴까지 */
body.np-cb .dark,body.np-cb .top{background:var(--hero-bg);border-bottom:0}
body.np-cb .top .w{flex-wrap:nowrap;padding-block:14px;row-gap:0}
body.np-cb .logo{flex:none}
body.np-cb .menu{order:0;flex:1;flex-basis:auto;justify-content:center;gap:24px;background:none;box-shadow:none;clip-path:none;font-size:15px}
body.np-cb .menu a,body.np-cb .menu a:first-child{color:var(--hero-lead);padding:6px 0;margin-left:0;border-bottom:0}
body.np-cb .menu a[aria-current]{color:#fff;font-weight:600}
body.np-cb .acts .cta{background:var(--hero-chip);border-radius:10px}
@media (max-width:900px){
  body.np-cb .top .w{flex-wrap:wrap;row-gap:8px}
  body.np-cb .logo{flex:1}
  body.np-cb .menu{order:3;flex-basis:100%;justify-content:flex-start;gap:20px}
}

/* 첫 화면 */
body.np-cb .hero h1{font-weight:600}
body.np-cb .hchecks li{background:rgba(255,255,255,.10);border-radius:999px;color:#E5E7EB;font-weight:500}
body.np-cb .hchecks li::before{color:var(--green)}
body.np-cb .pills{border-radius:999px;background:rgba(255,255,255,.10)}
body.np-cb .pills button{border-radius:999px}
body.np-cb .bill{border-radius:28px 28px 0 0}
body.np-cb .seg button{border-radius:999px}
body.np-cb .white-btn{border-radius:12px}
body.np-cb .tot strong{font-size:clamp(34px,5vw,46px)}

/* 신뢰 띠 */
body.np-cb .trust-l li::before{background:var(--green)}
body.np-cb .trust-more{color:var(--green-deep)}

/* 구역 제목: 가운데 큰 글씨 */
body.np-cb .sec{padding-block:72px 0}
body.np-cb .sec-h{text-align:center;font-size:clamp(24px,3.4vw,36px);font-weight:600;line-height:1.35;margin-bottom:30px}
body.np-cb .sec-row{margin-bottom:22px}
body.np-cb .sec-row .sec-h{text-align:left;margin-bottom:0}
body.np-cb .more{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 16px;font-size:14px}

/* 큰 둥근 패널과 흰 카드 */
body.np-cb .panel{border:0;border-radius:22px}
body.np-cb .panel.a{background:linear-gradient(120deg,#E4E8D0,#D9EDB6)}
body.np-cb .panel.b{background:linear-gradient(120deg,#C5DEDC,#DDE7E2)}
body.np-cb .card{border:0;border-radius:18px}
body.np-cb .mini{box-shadow:0 18px 40px rgba(0,0,0,.18)}
body.np-cb .bubbles span{border:0;box-shadow:0 8px 22px rgba(0,0,0,.08)}
body.np-cb .bubbles span:nth-child(2){background:#111;color:#fff}

/* 점 달린 라벨 */
body.np-cb .tag,body.np-cb .tag.t2,body.np-cb .tag.t3,body.np-cb .tag.t4{border:1px solid var(--line);border-radius:8px;padding:3px 9px;font-size:13px;font-weight:500}
body.np-cb .tag::before,body.np-cb .tag.t2::before,body.np-cb .tag.t3::before,body.np-cb .tag.t4::before{display:block}
body.np-cb .tag{color:var(--green-deep);background:var(--green-soft)}
body.np-cb .tag.t2{color:#0E7490;background:#EEF9FB}
body.np-cb .tag.t3{color:#1D4ED8;background:#EFF4FF}
body.np-cb .tag.t4{color:#C2410C;background:#FFF4EC}

/* 묶음 상자 · 상황 · 근거 카드 · 상품평 · 가입 절차 */
body.np-cb .nb{border:0;border-radius:18px;padding:20px}
body.np-cb .nb-lead img{border-radius:10px}
body.np-cb .situ{border:0;border-radius:22px;overflow:hidden}
body.np-cb .situ .ic{border-radius:15px}
body.np-cb .tcard{border:0;background:#fff;border-radius:24px}
body.np-cb .rv{border:0;background:#fff;border-radius:18px}
body.np-cb .rvband{border-block:0;margin-top:72px;padding-block:56px}
body.np-cb .rvband > .sec-h{text-align:center}
body.np-cb .rvband .cap{text-align:center}
body.np-cb .flow{border:0;border-radius:22px}

/* 맨 아래 검은 띠와 입력폼 */
body.np-cb .band{margin-top:72px;border-bottom:0}
body.np-cb .band .stats b{color:var(--green)}
body.np-cb .band .consult{border-radius:22px}
body.np-cb .grp{border:2px solid #111;border-radius:14px}
body.np-cb .go{border-radius:999px}
body.np-cb .done{border-radius:12px}
body.np-cb .dock .ap{border-radius:14px}

@media (max-width:900px){
  body.np-cb .sec{padding-block:52px 0}
  body.np-cb .sec-h{margin-bottom:22px}
  body.np-cb .rvband,body.np-cb .band{margin-top:52px}
  body.np-cb .rvband{padding-block:40px}
  body.np-cb .band{padding-block:48px}
  body.np-cb .bill{border-radius:22px 22px 0 0}
}
body.np-cb .carwrap{background:none;padding-block:24px 0}

/* 홈 밖의 화면(통신꿀팁·계산기·유심·렌탈·회사소개·랜딩·Q&A, 10-12): 모서리를 홈과 같은 결로 둥글게, 제목 옆에 그림이 있는 줄은 왼쪽 정렬 */
body.np-cb .phero,body.np-cb .thero{border-radius:22px}
body.np-cb .step,body.np-cb .sum,body.np-cb .rtable,body.np-cb .chk,body.np-cb .consult,body.np-cb .rankbox,body.np-cb .np-doc,body.np-cb .hub,body.np-cb .npanel,body.np-cb .nhs-card,body.np-cb .art,body.np-cb .car,body.np-cb .post,body.np-cb .qa,body.np-cb .good,body.np-cb .adocs li,body.np-cb .anum li,body.np-cb .rempty,body.np-cb .lpb,body.np-cb .lpchg li,body.np-cb .lpstep li,body.np-cb .lpcta{border-radius:18px}
body.np-cb .opt,body.np-cb .pillbtn,body.np-cb .qact button,body.np-cb .lpans{border-radius:12px}
body.np-cb .lph .sec-h{text-align:left;margin-bottom:4px;font-size:clamp(22px,2.8vw,30px)}
body.np-cb .lpq li{border-radius:0 14px 14px 0}

/* 홈 구역 구분(10-12 사장님 «칸이나 구분이 되게»): 회색 바탕과 흰 띠를 번갈아 깔고, 신뢰 줄은 칸막이 상자로, 통신사 카드는 통신사 색 윗줄로 가른다.
   이 묶음만 지우면 구분 넣기 전으로 돌아간다. */
body.home.np-cb main .trust{background:#fff;margin-top:84px;padding-block:60px 0}
body.home.np-cb .carwrap{background:#fff;padding-block:18px 68px}
body.home.np-cb .carwrap .nb-car{background:#F3F4F6;border-top:4px solid #111;border-radius:6px 6px 18px 18px;padding-top:18px}
body.home.np-cb .carwrap .nb-car:nth-child(1){border-top-color:var(--kt)}
body.home.np-cb .carwrap .nb-car:nth-child(2){border-top-color:var(--sk2)}
body.home.np-cb .carwrap .nb-car:nth-child(3){border-top-color:var(--lg)}
body.home.np-cb .carwrap .nb-car:nth-child(4){border-top-color:var(--sky)}
body.home.np-cb .carwrap .nb-list > li{border-top-color:#DFE2E7}
body.home.np-cb .carwrap .nb-sub{background:#fff}
@media (max-width:900px){
  body.home.np-cb main .trust{margin-top:56px;padding-block:40px 0}
  body.home.np-cb .carwrap{padding-block:14px 48px}
}
/* 아래쪽도 번갈아: 연두(상품평) → 흰 띠(가입 절차) → 회색(통신꿀팁) → 검정(상담) */
body.home.np-cb .rvband + .sec{background:#fff;padding-block:72px 76px}
body.home.np-cb .rvband + .sec .flow{background:#F3F4F6}
body.home.np-cb .rvband + .sec .flow > div{background:#fff;border-radius:6px 16px 16px 6px;padding:16px 18px}
@media (max-width:900px){body.home.np-cb .rvband + .sec{padding-block:52px 56px}}
/* 첫 화면과 「약정 확인부터…」 제목 사이 공백 줄임(10-12) */
body.home.np-cb main > .sec:first-child{padding-top:40px}
body.home.np-cb main > .sec:first-child .sec-h{margin-bottom:22px}
@media (max-width:900px){body.home.np-cb main > .sec:first-child{padding-top:30px}body.home.np-cb main > .sec:first-child .sec-h{margin-bottom:18px}}

/* 약속 카드 세 장(10-12): 번호 달린 큰 제목 + 가는 줄 + 설명. 사장님이 준 예시 그림의 틀을 사이트 색(검정·짙은 초록·초록)으로 옮겼다 */
body.home.np-cb .trust .w{display:block}
body.home.np-cb .trust .sec-h{margin-bottom:28px}
body.home.np-cb .trust-c{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
body.home.np-cb .trust-c li{background:linear-gradient(180deg,#141a16 0%,#22362B 100%);color:#fff;border-radius:22px;padding:34px 30px 38px;border-bottom:4px solid var(--green)}
body.home.np-cb .trust-c b{display:block;font-size:24px;font-weight:700;letter-spacing:-.035em;line-height:1.3;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.22)}
body.home.np-cb .trust-c b i{font-style:normal;color:var(--green);margin-right:8px}
body.home.np-cb .trust-c p{margin-top:20px;font-size:16.5px;line-height:1.7;color:#E3E6EA;word-break:keep-all}
body.home.np-cb .trust-d{margin-top:18px;justify-content:flex-end;align-items:center}
@media (max-width:900px){
  body.home.np-cb .trust-c{grid-template-columns:minmax(0,1fr);gap:10px}
  body.home.np-cb .trust-c li{padding:26px 22px 28px;border-radius:18px}
  body.home.np-cb .trust-c b{font-size:21px;padding-bottom:16px}
  body.home.np-cb .trust-c p{margin-top:16px;font-size:15.5px}
  body.home.np-cb .trust-d{justify-content:flex-start}
}
/* 약속 구역: 가로 폭은 통신사 카드와 같게 두고 세로 높이만 2/3 로(10-12 사장님 정정). 이 묶음을 지우면 원래 높이 */
body.home.np-cb main .trust{margin-top:56px;padding-block:44px 0}
body.home.np-cb .trust .sec-h{font-size:clamp(21px,2.8vw,30px);margin-bottom:20px}
body.home.np-cb .trust-c li{padding:22px 26px 24px;border-radius:18px;border-bottom-width:3px}
body.home.np-cb .trust-c b{font-size:20px;padding-bottom:12px}
body.home.np-cb .trust-c p{margin-top:12px;font-size:15px;line-height:1.6}
@media (max-width:900px){
  body.home.np-cb main .trust{margin-top:40px;padding-block:30px 0}
  body.home.np-cb .trust-c{gap:8px}
  body.home.np-cb .trust-c li{padding:17px 18px 18px;border-radius:14px}
  body.home.np-cb .trust-c b{font-size:17.5px;padding-bottom:10px}
  body.home.np-cb .trust-c p{margin-top:10px;font-size:14.5px}
}
/* 통신사 묶음 위 제목 「추천요금제」(10-12) */
body.home.np-cb .carwrap{padding-top:44px}
body.home.np-cb .carwrap .sec-h{font-size:clamp(21px,2.8vw,30px);margin-bottom:20px}
@media (max-width:900px){body.home.np-cb .carwrap{padding-top:34px}}