/* 홈의 묶음 부품: 뉴스 포털의 「언론사별」 묶음처럼 머리줄 + 큰 제목 한 줄 + 한 줄 목록. 통신사 카드와 통신꿀팁 자리에 쓴다. */

.nb{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:16px 18px;min-width:0}
.nb-h{display:flex;align-items:center;gap:8px;min-height:26px;margin-bottom:10px}
.nb-h > b{font-size:15.5px;font-weight:700;letter-spacing:-.02em}
.nb-h > b.mk{font-size:18px;font-weight:800;letter-spacing:-.03em}
.nb-h > span{font-size:13px;color:#8A9099;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.nb-sub{margin-left:auto;flex:none;border:1px solid var(--btn);color:var(--btn);border-radius:999px;font-size:12.5px;font-weight:600;padding:2px 10px;line-height:1.5}

/* 큰 제목 한 줄: 왼쪽 그림 + 굵은 제목 */
.nb-lead{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;align-items:center;padding-bottom:12px}
.nb-lead.noimg{grid-template-columns:minmax(0,1fr)}
.nb-lead img{width:84px;height:58px;object-fit:cover;border-radius:4px;display:block;background:#F2F4F6}
.nb-lead b{font-size:16.5px;font-weight:700;line-height:1.4;letter-spacing:-.025em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nb-lead small{display:block;font-size:13.5px;color:var(--sub);margin-top:3px}
.nb-lead:hover b,.nb-list a:hover{text-decoration:underline}

/* 한 줄 목록 */
.nb-list{margin:0;padding:0;list-style:none}
.nb-list > li{border-top:1px solid var(--line)}
.nb-list > li > a{display:block;padding:10px 0;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nb-list.wrap > li > a{white-space:normal;font-weight:600;font-size:15px;line-height:1.45}
.nb-list small{display:block;font-size:12.5px;color:#8A9099;font-weight:400}
.nb-list.plain > li{padding:11px 0}
.nb-list.plain b{display:block;font-size:15px;font-weight:600;line-height:1.45}
.nb-list.plain p{font-size:13.5px;color:var(--sub);margin-top:3px;line-height:1.55}
.nb-list.rate > li > a{display:flex;justify-content:space-between;gap:10px}
.nb-list.rate span{overflow:hidden;text-overflow:ellipsis;color:#30343A}
.nb-list.rate b{font-weight:600;flex:none}
.nb-list.steps{counter-reset:st}
.nb-list.steps > li{counter-increment:st;padding-left:26px;position:relative}
.nb-list.steps > li::before{content:counter(st);position:absolute;left:0;top:11px;font-weight:700;color:var(--green-deep);font-size:15px}
.nb-list.rvl p{font-size:14px;color:var(--ink);margin:0}
.nb-list.rvl small{margin-top:4px}
.nb-cap{font-size:12.5px;color:#8A9099;margin:-4px 0 10px}

/* 묶음을 같은 높이로 줄 맞춰 깐다 */
.nb-grid{display:grid;gap:12px;align-items:stretch}
.nb-grid .nb{display:flex;flex-direction:column}
.nb-grid .nb-lead b{min-height:2.8em}
.nb-grid .nb-car .nb-lead b{min-height:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.nb-hub{margin-bottom:12px}
.nb-hub .nb-lead{padding-bottom:0;grid-template-columns:96px minmax(0,1fr)}
.nb-hub .nb-lead img{width:96px;height:66px}
.nb-hub .nb-lead b{font-size:18px;min-height:0}
.nb-hub .nb-lead small:first-child{color:var(--green-deep);font-weight:600;margin:0 0 2px}
.carwrap{padding-block:14px}
@media (min-width:601px){.nb-grid.g4,.nb-grid.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1001px){.nb-grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.nb-grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.nb-grid .nb-car .nb-lead b{font-size:15px;letter-spacing:-.035em}

/* 첫 화면 바로 아래 신뢰 띠: 문구 세 줄 + 실제 서류 사진 */
.trust{padding-block:22px 4px}
.trust .w{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 28px;align-items:center}
.trust-l{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.trust-l li{padding-left:26px;position:relative;min-width:0}
.trust-l li::before{content:"✓";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;background:var(--btn);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.trust-l b{display:block;font-size:15px;font-weight:700;letter-spacing:-.02em;line-height:1.4}
.trust-l span{display:block;font-size:13px;color:var(--sub);margin-top:2px}
.trust-d{display:flex;align-items:flex-end;gap:10px}
.trust-d figure{margin:0;text-align:center}
.trust-d img{width:62px;height:84px;object-fit:cover;object-position:top;border:1px solid var(--line);border-radius:4px;display:block;background:#F2F4F6}
.trust-d figcaption{font-size:11px;color:#8A9099;margin-top:4px;white-space:nowrap}
.trust-d img{margin-inline:auto}
.trust-more{display:grid;gap:8px;font-size:13px;color:var(--btn);font-weight:600;white-space:nowrap;padding-bottom:18px}
.trust-more a:hover{text-decoration:underline}
@media (max-width:900px){
  .trust{padding-block:16px 0}
  .trust .w{grid-template-columns:minmax(0,1fr);gap:14px}
  .trust-l{grid-template-columns:minmax(0,1fr);gap:9px}
  .trust-l li{display:flex;flex-wrap:wrap;gap:0 8px;align-items:baseline}
  .trust-l b{font-size:14.5px}.trust-l span{margin:0;font-size:12.5px}
  .trust-d img{width:56px;height:76px}

  /* 휴대폰 첫 화면: 큰 제목 → 통신사 → 명세서 합계·버튼이 먼저, 내역은 그 아래 */
  .hero .w{padding-block:22px 0;gap:16px}
  .hero-l{gap:12px;padding-bottom:0}
  .hero .lead{display:none}
  .hero h1{line-height:1.22}
  .hero .pills{margin-top:2px}
  .bill{padding:20px;gap:12px}
  .bill .who span{display:none}
  .bill .rows{order:5}
  .bill .fine{order:6}
}

/* 첫 화면 왼쪽 빈 곳의 캐릭터(오른쪽 명세서를 가리킨다). PC 에서만 보인다. */
.hero-l{position:relative}
.hchar{display:block;position:absolute;right:0;bottom:64px;height:118px;width:auto;pointer-events:none}
.hchecks{flex-direction:column;align-items:flex-start}
@media (min-width:601px){.hchecks{flex-direction:row}}
@media (min-width:1001px){
  .hero-l{position:relative}
  .hchar{display:block;position:absolute;right:8px;bottom:0;height:clamp(220px,24vw,300px);width:auto;pointer-events:none}
}

/* 첫 화면 문구(10-10): 랜딩과 같은 내용. 확인 표시 세 개 + 바깥 링크 두 개 */
.hchecks{display:flex;gap:6px;flex-wrap:wrap;margin:0;padding:0}
.hchecks li{list-style:none;background:rgba(255,255,255,.18);border-radius:6px;padding:6px 12px;font-size:13.5px;font-weight:600}
.hchecks li::before{content:"✓ "}
.hout{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:13.5px;color:var(--hero-lead)}
.hout a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){.hout{display:none}.hchecks li{font-size:12.5px;padding:5px 9px}}
@media (min-width:1001px){.hchecks,.hout{max-width:calc(100% - 270px)}}

/* 「지금 이런 상황이신가요?」: 네 칸을 두 줄(2×2)로. 휴대폰에서는 상황 한 줄만 보인다(10-10) */
.situ{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:0}
.situ a{padding:16px 22px;border-bottom:1px solid var(--line)}
.situ a:nth-child(odd){border-right:1px solid var(--line)}
.situ a:nth-last-child(-n+2){border-bottom:0}
@media (max-width:700px){
  .situ a{grid-template-columns:36px minmax(0,1fr);gap:10px;padding:13px 12px}
  .situ .ic{width:36px;height:36px;border-radius:8px;font-size:11.5px}
  .situ b,.situ .ar{display:none}
  .situ small{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.4}
}

/* 맨 아래 숫자 띠 안의 상담 입력폼(10-10) */
.band .bl{display:flex;flex-direction:column;gap:26px;min-width:0}
.band .stats{gap:16px}
.band .stats b{font-size:clamp(28px,3.4vw,38px)}
.band .consult{grid-template-columns:minmax(0,1fr);gap:16px;padding:26px;color:var(--ink);border:0}
.band .consult h3{font-size:22px;margin-top:6px}
@media (max-width:900px){.band .consult{padding:20px 18px}}
.band .stats b{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--hero-em);min-width:4.6em}
.band .stats span{color:var(--hero-lead)}

/* 지식iN·밴드·G마켓 카드: 로고 바로 옆에 글을 나란히 둔다(10-11) */
.rvband .tcard{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:16px;row-gap:2px;align-content:center;align-items:center}
.rvband .tcard .tlogo{grid-column:1;grid-row:1 / span 3;margin-bottom:0;align-self:center}
.rvband .tcard > :not(.tlogo){grid-column:2}
.rvband .tcard a{margin-top:2px}

/* 신뢰 띠를 통신사 묶음 바로 위로 옮긴 뒤의 위 간격(10-12) */
main .trust{padding-block:48px 0}
@media (max-width:900px){main .trust{padding-block:36px 0}}

/* 자주 묻는 질문(10-12): 흰 띠 위에 접었다 펴는 줄 */
.faqsec{background:#fff;margin-top:72px;padding-block:64px 72px}
.faq{max-width:860px;margin-inline:auto;display:grid;gap:8px}
.faq details{background:#F3F4F6;border-radius:16px;padding:0 22px}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 0;font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.45}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:26px;height:26px;border-radius:50%;background:#111;color:#fff;font-size:18px;font-weight:500;display:grid;place-items:center;line-height:1}
.faq details[open] summary::after{content:"−";background:var(--green)}
.faq summary span::before{content:"Q. ";color:var(--green-deep);font-weight:700}
.faq p{padding:0 0 20px;font-size:15.5px;line-height:1.75;color:#30343A;max-width:46em}
@media (max-width:900px){.faqsec{margin-top:52px;padding-block:44px 52px}.faq details{padding:0 16px}.faq summary{font-size:15.5px;padding:15px 0}.faq p{font-size:14.5px}}
/* FAQ 흰 띠와 검은 상담 띠 사이에 회색 틈이 생기지 않게 붙인다(10-12) */
.faqsec + .band,body.np-cb .faqsec + .band{margin-top:0}
body.np-cb .sec.faqsec{padding-block:64px 72px}
@media (max-width:900px){body.np-cb .sec.faqsec{padding-block:44px 52px}}