/* ============================================================
   product.css — 상품 상세(무선인터넷 등) 전용 스타일
   공통 토큰/리셋 = base.css, 헤더/드로어 = layout.css
   ============================================================ */
/* 상품 페이지 개별 override */
:root{--r:18px}           /* 상품 카드 라운드는 살짝 작게 */
body{padding-bottom:92px} /* 하단 sticky CTA 자리 */

/* 상단 배너 이미지 (무선인터넷 등 히어로 대체) */
.hero .hero-banner-img{display:block;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);margin-bottom:8px}
.hero .hero-banner-img img{display:block;width:100%;height:auto}

  .num{font-family:var(--latin)}
  :focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}
  /* 타이틀 형광펜 하이라이트 (index.html과 동일) — 화면에 들어오면 좌->우로 그어짐 */
  .mark{
    position:relative;padding:0 .1em;border-radius:3px;white-space:nowrap;
    background-image:linear-gradient(180deg,rgba(43,92,245,.22) 0,rgba(43,92,245,.22) 100%);
    background-repeat:no-repeat;background-position:0 88%;background-size:0% 42%;
    transition:background-size .7s cubic-bezier(.6,.02,.2,1) .2s;
  }
  .mk-in .mark{background-size:100% 42%}


  /* ---------- hero ---------- */
  .hero{padding:20px 0 0}
  .hero-card{
    position:relative;overflow:hidden;border-radius:22px;
    background:linear-gradient(150deg,#eaf0fe 0%,#dde6fc 55%,#cbd9f9 100%);
    padding:26px 22px;
  }
  .hero-grid{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}
  .eyebrow{
    font-family:var(--latin);font-weight:700;font-size:0.82rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--blue);display:inline-flex;align-items:center;gap:.5em;
  }
  .eyebrow::before{content:"";width:20px;height:2px;background:var(--violet)}
  .hero h1{
    font-size:clamp(1.9rem,5.2vw,2.3rem);font-weight:800;letter-spacing:-.035em;
    line-height:1.24;margin-top:12px;color:#0f1836;
  }
  .hero-router{width:min(190px,44%);justify-self:end;margin-top:0}
  .hero-router svg{width:100%;height:auto;animation:floatY 6s ease-in-out infinite}
  @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  .wave{transform-box:view-box;transform-origin:150px 92px;animation:sig 3s ease-out infinite}
  .wave.w2{animation-delay:1s}
  .wave.w3{animation-delay:2s}
  @keyframes sig{0%{opacity:0;transform:scale(.55)}25%{opacity:.5}100%{opacity:0;transform:scale(1.12)}}
  /* 휴대폰: 상단 히어로 배너 축소 (글자·이미지·패딩) */
  @media(max-width:600px){
    .hero{padding:12px 0 0}
    .hero-card{padding:16px 15px}
    .hero-grid{gap:12px}
    .hero-grid > div{min-width:0}          /* 텍스트 열이 넘치거나 찌그러지지 않게 */
    .hero h1{font-size:1.3rem;line-height:1.28;margin-top:0;word-break:keep-all}
    .hero-router{width:96px;margin-top:0}  /* 이미지는 고정 폭(화면 비율로 커지지 않게) */
  }

  /* ---------- 상품개요 3특징 ---------- */
  .points{display:grid;grid-template-columns:1fr;gap:12px;margin-top:16px}
  .point{
    background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;
    transition:transform .25s,box-shadow .25s,border-color .25s;
  }
  .point:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:transparent}
  .point .pi{
    width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
    background:var(--blue-100);color:var(--blue);margin-bottom:12px;
  }
  .point h3{font-size:1.08rem;font-weight:800;letter-spacing:-.02em;line-height:1.35}
  .point p{color:var(--muted);font-size:.92rem;margin-top:7px;line-height:1.6}

  /* ---------- 상품 타이틀 바 ---------- */
  .ptitle{border-bottom:1px solid var(--line);padding:22px 0 20px}
  .ptitle-in{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
  .ptitle h1{
    font-size:clamp(1.7rem,5.5vw,2.3rem);font-weight:800;letter-spacing:-.035em;line-height:1.2;
    display:flex;align-items:baseline;gap:2px;
  }
  .ptitle h1 .dot{color:var(--violet)}
  .ptitle .lead{color:var(--muted);font-size:.92rem;margin-top:8px;line-height:1.6}
  .ptitle .lead b{color:var(--blue);font-weight:700}
  .ptitle .acts{margin-left:auto;display:flex;gap:8px;align-items:center}
  .icobtn{
    display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
    border:1px solid var(--line);color:var(--ink-soft);transition:.2s;
  }
  .icobtn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-100)}
  /* 링크 복사 토스트 알림 */
  .app-toast{position:fixed;left:50%;bottom:104px;transform:translateX(-50%) translateY(10px);z-index:9999;
    background:rgba(20,22,34,.92);color:#fff;font-size:.92rem;font-weight:600;padding:11px 20px;border-radius:999px;
    box-shadow:0 12px 30px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease}
  .app-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  /* 모바일: 상품 타이틀 배너 높이 최대 압축 */
  @media(max-width:600px){
    .ptitle{padding:12px 0 12px}
    .ptitle-in{gap:10px}
    .ptitle h1{font-size:1.4rem;line-height:1.15}
    .ptitle .lead{margin-top:4px;font-size:.84rem;line-height:1.45}
    .icobtn{width:38px;height:38px;border-radius:10px}
  }

  /* ---------- 좌측 퀵메뉴 (데스크톱) / 상단 탭 (모바일) ---------- */
  .layout{display:grid;grid-template-columns:1fr;gap:0;align-items:start}
  .layout > *{min-width:0}
  .content{min-width:0}
  .side nav{display:flex;flex-direction:column;gap:2px}
  .side a{
    display:flex;align-items:center;gap:8px;padding:11px 14px;border-radius:10px;
    font-size:.95rem;font-weight:600;color:var(--muted);white-space:nowrap;
    transition:color .2s,background .2s;position:relative;
  }
  /* 메뉴 링크에만 적용 (하단 CTA 버튼까지 색이 덮이지 않도록 nav로 한정) */
  .side nav a:hover{color:var(--ink);background:var(--mist)}
  .side a.on{color:var(--blue);font-weight:700;background:var(--blue-100)}
  .side-cta{
    margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
    display:flex;flex-direction:column;gap:8px;
  }
  .side-cta a{
    display:flex;align-items:center;justify-content:center;gap:7px;
    padding:13px;border-radius:12px;font-size:.9rem;font-weight:700;transition:.2s;
  }
  .side-cta .p{background:var(--blue);color:#fff;box-shadow:0 6px 18px rgba(43,92,245,.28)}
  .side-cta .p:hover{background:var(--blue-deep);color:#fff}
  .side-cta .s{border:1px solid var(--line);color:var(--ink-soft);background:#fff}
  .side-cta .s:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-100)}

  /* 데스크톱: 왼쪽에 계속 붙어다니는 퀵메뉴 */
  @media(min-width:1000px){
    .layout{grid-template-columns:196px 1fr;gap:44px;padding-top:34px}
    .side{position:sticky;top:calc(var(--nav-h) + 34px)}
    .side .side-title{
      font-family:var(--latin);font-size:.68rem;font-weight:700;letter-spacing:.14em;
      text-transform:uppercase;color:var(--muted);padding:0 14px;margin-bottom:12px;
    }
    /* 콘텐츠 첫 섹션(히어로)은 위 여백 제거해 사이드바와 시작선 맞춤 */
    .content > .hero{padding-top:0}
  }
  /* 모바일/태블릿: 같은 메뉴가 상단 가로 sticky 탭으로 */
  @media(max-width:999px){
    /* 헤더 풀메뉴↔버거 전환은 layout.css(999px)에서 공통 처리 */
    .side{
      position:sticky;top:var(--nav-h);z-index:50;margin:0 -20px 8px;
      width:100vw;max-width:100vw;overflow:hidden;
      background:rgba(255,255,255,.95);backdrop-filter:blur(10px);
      border-bottom:1px solid var(--line);
    }
    .side .side-title,.side .side-cta{display:none}
    .side nav{
      flex-direction:row;gap:2px;height:var(--tab-h);padding:0 12px;
      overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    }
    .side nav::-webkit-scrollbar{display:none}
    .side a{
      flex:none;border-radius:0;padding:0 14px;height:100%;background:transparent!important;
    }
    .side a::after{
      content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;border-radius:3px 3px 0 0;
      background:var(--blue);transform:scaleX(0);transition:transform .25s;
    }
    .side a.on::after{transform:scaleX(1)}
  }

  /* ---------- 섹션 공통 ---------- */
  section.blk{
    padding:44px 0;
    scroll-margin-top:calc(var(--nav-h) + var(--tab-h) + 8px);
  }
  @media(min-width:1000px){
    section.blk{padding:52px 0;scroll-margin-top:calc(var(--nav-h) + 24px)}
  }
  .shead{margin-bottom:22px}
  .shead h2{font-size:clamp(1.45rem,4.6vw,2rem);font-weight:800;letter-spacing:-.03em;line-height:1.3}
  .shead h2 .dot{color:var(--violet)}
  .shead p{color:var(--muted);margin-top:8px;font-size:.95rem}

  /* ---------- 추천상품 2카드 ---------- */
  .plans2{display:grid;grid-template-columns:1fr;gap:16px}
  .pcard{
    position:relative;border:1.5px solid var(--line);border-radius:20px;padding:24px;background:#fff;
    display:flex;flex-direction:column;
    transition:border-color .25s,box-shadow .25s,transform .25s;
  }
  .pcard:hover{border-color:var(--blue);box-shadow:var(--shadow-md);transform:translateY(-3px)}
  /* U+ 카드: 추천 강조 */
  .pcard.reco{border-color:var(--blue);background:linear-gradient(180deg,#f7f9ff 0%,#fff 42%)}
  .pcard .tagtop{
    position:absolute;top:-11px;left:24px;background:var(--blue);color:#fff;
    font-size:0.82rem;font-weight:700;padding:4px 12px;border-radius:999px;letter-spacing:-.01em;
    white-space:nowrap;
  }
  .pcard h3{font-size:1.28rem;font-weight:800;letter-spacing:-.025em;line-height:1.3}
  .pcard .kind{font-size:0.91rem;color:var(--muted);margin-top:3px;font-weight:600}
  /* 요금 플랜 표기(예: 라우터 무상(3년 약정)) — 회색 텍스트 */
  .pcard .plan-badge{display:inline-block;margin-top:3px;font-size:0.91rem;color:var(--muted);font-weight:600}

  /* 가격 + 뱃지 */
  .price-row{display:flex;align-items:center;gap:10px;margin:16px 0 4px;flex-wrap:wrap}
  .price{
    font-family:var(--latin);font-weight:800;font-size:2.1rem;letter-spacing:-.025em;
    line-height:1;color:var(--blue-deep);display:inline-flex;align-items:baseline;
  }
  .price small{
    font-family:var(--display);font-size:0.93rem;font-weight:600;color:var(--muted);
    letter-spacing:0;margin-left:2px;
  }
  .badge-hot{
    background:linear-gradient(135deg,#ff5f6d,#ff8a3d);color:#fff;
    font-size:0.82rem;font-weight:800;line-height:1.3;
    padding:6px 10px;border-radius:9px;white-space:nowrap;text-align:center;
    box-shadow:0 4px 12px rgba(255,95,109,.3);
  }
  .badge-hot.violet{
    background:linear-gradient(135deg,#5b6ef5,#7c3aed);
    box-shadow:0 4px 12px rgba(92,110,245,.32);
  }

  /* 체크 리스트 */
  .plist{
    list-style:none;display:flex;flex-direction:column;gap:10px;
    margin-top:16px;padding-top:16px;border-top:1px dashed var(--line);
    flex:1;                 /* 남는 공간을 리스트가 흡수 -> 버튼 간격 균일 */
    align-content:flex-start;
  }
  .plist li{display:flex;gap:9px;font-size:.92rem;color:var(--ink-soft);line-height:1.55}
  .plist .ck{
    flex:none;width:18px;height:18px;border-radius:50%;
    background:var(--blue-100);color:var(--blue);
    display:grid;place-items:center;margin-top:2px;
  }
  .plist li b{font-weight:700;color:var(--ink);margin-left:2px}


  @media(min-width:640px){
    .plans2{grid-template-columns:1fr 1fr;gap:18px}
    .pcard{padding:26px}
  }

  /* ---------- 추천고객: 이미지 카드 ---------- */
  .who{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
  .wcard{
    position:relative;cursor:default;
    border-radius:16px;overflow:hidden;
    aspect-ratio:4/5;
    display:flex;flex-direction:column;justify-content:flex-end;
    background:linear-gradient(160deg,#eef2fb 0%,#e3ebfd 100%); /* 이미지 없을 때 플레이스홀더 */
  }
  .wcard img{
    position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;
    transition:transform .55s cubic-bezier(.2,.6,.2,1);
  }
  .wcard:hover img{transform:scale(1.05)}
  /* 하단 흰색 그라데이션 (글자 가독성) */
  .wcard::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:62%;
    background:linear-gradient(to top,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.92) 30%,
      rgba(255,255,255,.6) 62%,
      rgba(255,255,255,0) 100%);
    pointer-events:none;
  }
  .wc-text{
    position:relative;z-index:1;
    padding:0 16px 16px;color:var(--ink);
  }
  .wc-text h3{
    font-size:1.12rem;font-weight:800;letter-spacing:-.03em;line-height:1.3;color:var(--blue-deep);
  }
  .wc-text p{
    margin-top:6px;font-size:0.91rem;line-height:1.5;font-weight:600;
    color:var(--ink-soft);
  }

  @media(min-width:560px){
    .who{gap:16px}
    .wc-text h3{font-size:1.1rem}
    .wc-text p{font-size:.84rem}
  }
  @media(min-width:900px){
    .who{grid-template-columns:repeat(3,1fr);gap:20px}
    .wc-text{padding:0 18px 18px}
    .wc-text h3{font-size:1.15rem}
    .wc-text p{font-size:.86rem}
  }

  /* ---------- 주요기능: 구성도 ---------- */
  .diagram{
    background:var(--mist);
    border:1px solid var(--line);border-radius:20px;
    padding:24px 18px;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin;
  }
  .diagram svg{min-width:700px;width:100%;height:auto;display:block;margin:0 auto}

  /* 주요기능 4카드 (다크) */
  .feats{display:grid;grid-template-columns:1fr;gap:10px;margin-top:14px}
  .feat{
    background:linear-gradient(160deg,#1b2138,#151a2c);color:#fff;border-radius:16px;padding:20px;
    position:relative;overflow:hidden;transition:transform .25s;
  }
  .feat:hover{transform:translateY(-3px)}
  .feat::after{
    content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;
    background:radial-gradient(circle at 35% 35%,rgba(74,120,255,.5),transparent 70%);
  }
  .feat .fi{
    width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
    background:rgba(74,120,255,.18);color:#8ea6ff;margin-bottom:12px;position:relative;z-index:1;
  }
  .feat h4{font-size:1rem;font-weight:700;line-height:1.45;position:relative;z-index:1}
  .feat p{color:rgba(255,255,255,.62);font-size:0.92rem;margin-top:7px;line-height:1.6;position:relative;z-index:1}

  /* ---------- 기기안내 ---------- */
  .devwrap{position:relative}
  .devs{
    display:grid;grid-auto-flow:column;grid-auto-columns:74%;gap:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-top:14px;padding-bottom:6px;   /* 위 여백: 강조카드 배지·hover가 스크롤 영역에 잘리지 않도록 */
    margin-right:-20px;padding-right:20px;   /* 오른쪽은 화면 끝까지 이어지되, 끝까지 밀면 마지막 카드에 20px 여백 */
  }
  .devs::-webkit-scrollbar{display:none}
  .dev{
    scroll-snap-align:start;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--mist);
    display:flex;flex-direction:column;transition:box-shadow .25s,border-color .25s,transform .25s;
  }
  .dev:hover{box-shadow:var(--shadow-md);border-color:transparent;transform:translateY(-3px)}
  /* 흰 이미지 박스(연한 카드 안에 인셋) — 차량관제 기준 7:5 가로 박스 */
  .dev-img{
    position:relative;background:#fff;margin:10px 16px 0;
    border:1px solid var(--line);border-radius:14px;
    aspect-ratio:7/5;display:grid;place-items:center;padding:16px;
  }
  .dev-img .dev-photo{
    width:100%;height:100%;object-fit:contain;display:block;
    transition:transform .4s cubic-bezier(.2,.6,.2,1);
  }
  .dev:hover .dev-img .dev-photo{transform:scale(1.05)}
  .dev-img svg{width:70%;height:auto;max-height:100%}
  /* 태그: 차량관제 .dtag와 동일한 알약형 + 연한 톤 (네트워크=블루, 강조=청록) */
  .chip{
    font-family:var(--latin);font-size:0.82rem;font-weight:700;letter-spacing:.02em;
    padding:6px 13px;border-radius:999px;background:var(--blue-100);color:var(--blue);border:0;
  }
  .chip.new,.chip.best{background:var(--teal-100);color:var(--teal)}
  /* 카드 상단 태그 배지 (이미지 위, 오버레이 아님) */
  .dev-tag{padding:16px 16px 0;display:flex;gap:6px;flex-wrap:wrap}
  .dtag{display:inline-block;font-size:.82rem;font-weight:700;padding:6px 14px;border-radius:999px}
  .dtag.blue{background:var(--blue-100);color:var(--blue)}
  .dtag.teal{background:var(--teal-100);color:var(--teal)}
  .dev-body{padding:16px;display:flex;flex-direction:column;flex:1}
  .dev-body .cat{font-size:0.89rem;color:var(--muted);font-weight:600}
  .dev-body h4{font-family:var(--latin);font-size:1.14rem;font-weight:800;margin-top:2px;letter-spacing:-.01em}
  .specs{margin-top:12px;display:flex;flex-direction:column;gap:7px;font-size:0.89rem}
  /* 라벨 고정폭 + 값 왼쪽정렬 (값이 길어도 자연스럽게 줄바꿈) */
  .specs div{display:flex;gap:10px;color:var(--muted);align-items:baseline}
  .specs span{flex:none;min-width:52px}
  .specs b{flex:1;min-width:0;color:var(--ink-soft);font-weight:600;text-align:left;word-break:keep-all}
  .dev-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
  .dev-btns a,.dev-btns button{
    display:flex;align-items:center;justify-content:center;min-height:44px;line-height:1.25;
    text-align:center;padding:10px 0;border-radius:11px;font-size:.9rem;font-weight:700;
    font-family:inherit;cursor:pointer;transition:.2s;
  }
  .dev-btns .buy{background:var(--blue);color:#fff;border:1px solid var(--blue)}
  .dev-btns .buy:hover{background:var(--blue-deep);border-color:var(--blue-deep)}
  /* 상세보기: 카드 배경(--mist)과 묻히지 않게 흰 배경 + 블루 아웃라인 */
  .dev-btns .detail{background:#fff;color:var(--blue);border:1px solid #c9d8fb}
  .dev-btns .detail:hover{background:var(--blue-100);border-color:#b9ccf7}
  .dev-btns .detail:active{transform:translateY(1px)}
  /* 상세보기·구매하기 버튼 일단 숨김 (복구 시 이 한 줄만 삭제) */
  .dev-btns{display:none}
  /* 기기 카드 버튼(상세보기·구매/렌탈)을 노출하는 페이지: 그리드에 .show-btns 부여 */
  .devs.show-btns .dev-btns{display:grid}
  /* 렌탈 구성품 반납 안내 */
  .kit-note{
    margin-top:22px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;
  }
  .kit-head{display:flex;align-items:flex-start;gap:14px}
  .kit-ic{flex:none;width:46px;height:46px;border-radius:14px;background:var(--blue-100);color:var(--blue);display:grid;place-items:center}
  .kit-ic svg{width:24px;height:24px}
  .kit-head h4{font-size:1.06rem;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.35}
  .kit-head p{margin-top:4px;font-size:.88rem;color:var(--muted);line-height:1.5}
  .kit-body{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
  .kit-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
  .kit-label{flex:none;width:120px;font-size:.85rem;font-weight:700;color:var(--muted)}
  .kit-chips{display:flex;flex-wrap:wrap;gap:6px}
  .kit-chips span{font-size:.85rem;font-weight:700;color:var(--blue);background:var(--blue-100);padding:5px 12px;border-radius:999px}
  .kit-fees{display:flex;flex-wrap:wrap;gap:8px}
  .kit-fee{font-size:.85rem;color:var(--ink-soft);background:var(--mist);border:1px solid var(--line);padding:5px 12px;border-radius:10px}
  .kit-fee b{color:var(--blue);font-weight:800;margin-left:3px}
  @media(max-width:520px){ .kit-label{width:100%} }

  /* ---------- 기기 상세 이미지 모달 ---------- */
  .modal-photo .modal-panel{width:min(720px,100%)}
  .modal-photo .modal-body{padding:0 22px 22px;text-align:center}
  .modal-photo .modal-body img{max-width:100%;height:auto;border-radius:12px;display:block;margin:0 auto}
  .dev-modal-empty{color:var(--muted);font-size:.9rem;padding:40px 0}
  /* 안내 팝업(라우터 무상 등) */
  .modal-info .modal-panel{width:min(420px,100%)}
  .modal-info .modal-body{padding:4px 26px 26px;text-align:center}
  .modal-info .info-text{font-size:1.02rem;line-height:1.75;color:var(--ink-soft);padding:8px 0 4px}
  .modal-info .info-text b{color:var(--blue);font-weight:800}
  /* 이미지 끝 닫기 버튼 / 안내 팝업 확인 버튼 (동일 스타일) */
  .modal-photo .dev-modal-close,
  .modal-info .dev-modal-close{
    display:flex;align-items:center;justify-content:center;
    width:min(300px,100%);margin:26px auto 8px;min-height:54px;
    padding:15px 28px;border-radius:999px;border:0;
    background:var(--blue);color:#fff;
    font-family:inherit;font-size:1.02rem;font-weight:800;letter-spacing:-.01em;
    cursor:pointer;box-shadow:0 10px 24px rgba(43,92,245,.32);
    transition:background .2s,transform .18s,box-shadow .2s;
  }
  .modal-photo .dev-modal-close:hover,
  .modal-info .dev-modal-close:hover{
    background:var(--blue-deep);transform:translateY(-2px);box-shadow:0 14px 30px rgba(43,92,245,.4);
  }
  .modal-photo .dev-modal-close:active,
  .modal-info .dev-modal-close:active{transform:translateY(0)}

  /* ---------- 요금제 ---------- */
  /* 1차: 통신사 선택 탭 (세그먼트 컨트롤) */
  .ptabs{
    display:grid;grid-template-columns:1fr 1fr;gap:6px;
    background:var(--mist);border:1px solid var(--line);border-radius:16px;
    padding:6px;margin-bottom:14px;
  }
  .ptabs button{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:64px;padding:13px 12px;border-radius:11px;
    background:transparent;color:var(--muted);text-align:center;
    transition:background .22s,color .22s,box-shadow .22s;
  }
  .ptabs button:hover{color:var(--ink)}
  .ptabs button.on{
    background:#fff;color:var(--ink);
    box-shadow:0 1px 2px rgba(20,22,32,.05),0 6px 16px rgba(25,40,110,.10);
  }
  .pt-name{font-weight:800;font-size:1rem;letter-spacing:-.025em;line-height:1.25}
  .pt-sub{font-size:0.86rem;font-weight:600;line-height:1.3;color:var(--muted)}
  .ptabs button.on .pt-sub{color:var(--blue)}
  @media(min-width:640px){
    .ptabs button{min-height:70px}
    .pt-name{font-size:1.06rem}
    .pt-sub{font-size:.8rem}
  }

  .tabs{
    display:inline-flex;background:var(--mist);border-radius:999px;padding:4px;gap:2px;margin-bottom:18px;
    max-width:100%;overflow-x:auto;scrollbar-width:none;
  }
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{
    padding:12px 20px;border-radius:999px;font-weight:700;font-size:0.95rem;color:var(--muted);
    transition:.2s;white-space:nowrap;flex:none;min-height:44px;display:flex;align-items:center;
  }
  .tabs button.on{background:var(--ink);color:#fff}
  .fees{display:grid;grid-template-columns:1fr;gap:12px}
  /* 가로 리스트 행 */
  .fee{
    border:1.5px solid var(--line);border-radius:18px;padding:22px 20px;background:#fff;
    transition:border-color .25s,box-shadow .25s,transform .25s;position:relative;
    display:flex;flex-direction:column;
  }
  .fee:hover{border-color:var(--blue);box-shadow:var(--shadow-md);transform:translateY(-3px)}
  /* 데이터 배지 */
  .fee .fbadge{
    align-self:flex-start;font-family:var(--latin);font-size:0.87rem;font-weight:800;
    color:var(--blue);background:var(--blue-100);padding:6px 12px;border-radius:20px;
    margin-bottom:14px;letter-spacing:.01em;
  }
  .fee .fname{font-family:var(--latin);font-size:1.12rem;font-weight:800;color:var(--ink-soft);letter-spacing:-.01em}
  .fee .fdata{display:block;font-size:0.91rem;color:var(--muted);margin-top:6px;line-height:1.5}
  /* 큰 가격 강조 */
  .fee .fprice{
    font-family:var(--latin);font-weight:800;font-size:2.35rem;color:var(--blue-bright);
    margin-top:6px;line-height:1;letter-spacing:-.03em;
  }
  .fee .fprice span{font-family:var(--display);font-size:.9rem;color:var(--muted);font-weight:600;letter-spacing:0}
  .fee .fnote{
    font-size:0.87rem;color:var(--muted);margin-top:16px;line-height:1.6;
  }
  .fee-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
  .fee-cta a{
    text-align:center;padding:14px;border-radius:12px;font-weight:700;font-size:.92rem;
    border:1.5px solid var(--line);color:var(--ink-soft);transition:.2s;
  }
  .fee-cta a:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-100)}
  .fee-cta button{
    text-align:center;padding:14px;border-radius:12px;font-weight:700;font-size:.92rem;
    border:1.5px solid var(--line);color:var(--ink-soft);transition:.2s;
    display:flex;align-items:center;justify-content:center;gap:7px;
  }
  .fee-cta #openFeeCompare{gap:5px}
  .fee-cta #openFeeCompare svg{flex:none}
  .fee-cta button:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-100)}

  /* ---------- 전체 요금제 레이어(모달) ---------- */
  .modal{
    position:fixed;inset:0;z-index:100;display:none;
    align-items:center;justify-content:center;padding:20px;
  }
  .modal.open{display:flex}
  .modal-dim{
    position:absolute;inset:0;background:rgba(20,22,32,.55);
    backdrop-filter:blur(3px);animation:dimIn .2s ease-out;
  }
  @keyframes dimIn{from{opacity:0}to{opacity:1}}
  .modal-panel{
    position:relative;background:#fff;border-radius:20px;box-shadow:var(--shadow-md);
    width:min(860px,100%);max-height:min(86vh,900px);
    display:flex;flex-direction:column;overflow:hidden;
    animation:panelIn .28s cubic-bezier(.2,.7,.3,1);
  }
  @keyframes panelIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
  .modal-head{
    display:flex;align-items:center;gap:12px;
    padding:22px 22px 12px;flex:none;
  }
  .modal-head h3{font-size:1.25rem;font-weight:800;letter-spacing:-.03em;line-height:1.3}
  .modal-head h3 .dot{color:var(--violet)}
  .modal-head p{color:var(--muted);font-size:0.93rem;margin-top:6px;line-height:1.55}
  .modal-x{
    margin-left:auto;flex:none;display:grid;place-items:center;width:40px;height:40px;
    border-radius:12px;color:var(--muted);transition:.2s;
  }
  .modal-x:hover{background:var(--mist);color:var(--ink)}
  .modal-body{overflow:auto;-webkit-overflow-scrolling:touch;padding:0 22px}
  .ftable{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:.9rem}
  .ftable thead th{
    position:sticky;top:0;z-index:2;background:#fff;
    padding:14px 10px;text-align:center;font-weight:800;font-size:0.91rem;line-height:1.35;
    border-bottom:2px solid var(--line);color:var(--ink);
  }
  .ftable thead th small{display:block;font-weight:600;font-size:0.82rem;color:var(--muted);margin-top:2px}
  .ftable thead th.ft-hc{color:var(--blue);background:var(--blue-100)}
  .ftable thead th.ft-hc small{color:var(--blue-bright)}
  /* U+ 열 숨김 모드 (알뜰 단독) */
  /* U+ 열 셀 자체를 렌더에서 제거 */
  .modal.cheap-only .ft-ucol{display:none}
  /* 알뜰 단독(3열)은 콘텐츠 폭에 맞게 패널을 좁혀 허전함 제거 */
  .modal.cheap-only .modal-panel{width:min(560px,100%)}
  .modal.cheap-only .ftable{table-layout:fixed}
  .modal.cheap-only .ftable colgroup{display:none}
  .modal.cheap-only .ftable thead th:nth-child(1){width:16%}
  .modal.cheap-only .ftable thead th:nth-child(2){width:32%}
  .modal.cheap-only .ftable thead th:nth-child(3){width:26%}
  .modal.cheap-only .ftable thead th:nth-child(4){width:26%;text-align:right}
  .modal.cheap-only .ftable tbody td.ft-c{text-align:right}
  /* 알뜰 열 숨김 모드 (U+ 단독) — cheap-only 대칭 */
  .modal.uplus-only .ft-hc,
  .modal.uplus-only .ft-c{display:none}
  .modal.uplus-only .modal-panel{width:min(560px,100%)}
  .modal.uplus-only .ftable{table-layout:fixed}
  .modal.uplus-only .ftable colgroup{display:none}
  .modal.uplus-only .ftable thead th:nth-child(1){width:16%}
  .modal.uplus-only .ftable thead th:nth-child(2){width:32%}
  .modal.uplus-only .ftable thead th:nth-child(3){width:26%}
  .modal.uplus-only .ftable thead th:nth-child(5){width:26%;text-align:right}
  .modal.uplus-only .ftable tbody td.ft-u{text-align:right}
  /* U+ 단독일 때 U+ 열 강조 (알뜰 단독의 ft-hc/ft-c 대응) */
  .modal.uplus-only .ftable thead th.ft-ucol{color:var(--blue);background:var(--blue-100)}
  .modal.uplus-only .ftable thead th.ft-ucol small{color:var(--blue-bright)}
  .modal.uplus-only .ftable td.ft-u{color:var(--blue);background:rgba(43,92,245,.055)}
  .modal.uplus-only .ftable tbody tr:hover td.ft-u{background:rgba(43,92,245,.10)}
  .ftable tbody td{
    padding:12px 10px;border-bottom:1px solid var(--line);text-align:center;color:var(--ink-soft);
  }
  .ftable tbody tr:hover td{background:var(--mist)}
  .ftable tbody tr:hover td.ft-c{background:rgba(43,92,245,.10)}
  .ftable td.ft-plan{text-align:left;font-weight:700;color:var(--ink);white-space:nowrap}
  .ftable td.ft-data{color:var(--muted);font-size:0.93rem;line-height:1.4}
  .ftable td.ft-data i{display:block;font-style:normal;font-size:0.86rem;color:#9aa0b4;margin-top:1px}
  .ftable td.ft-price{font-family:var(--latin);font-weight:800;font-size:.95rem;white-space:nowrap}
  .ftable td.ft-c{color:var(--blue);background:rgba(43,92,245,.055)}
  .ftable td.ft-u{color:var(--ink)}
  /* 요금제 그룹: 왼쪽 라벨 열(세로 병합) */
  .ftable th.ft-gcorner{background:#fff;border-bottom:1px solid var(--line)}
  .ftable th.ft-glabel{
    background:var(--mist);border-bottom:1px solid var(--line);
    border-right:1px solid var(--line);
    vertical-align:middle;text-align:center;padding:10px 6px;
  }
  .ftable th.ft-glabel span{
    display:inline-block;font-size:0.93rem;font-weight:800;line-height:1.35;
    color:var(--ink);letter-spacing:-.02em;
  }
  /* 그룹 구분: 그룹별 색 + 시작 행 굵은 선 */
  .ftable th.ft-glabel.ft-g1{background:var(--mist)}
  .ftable th.ft-glabel.ft-g2{background:var(--blue-100)}
  .ftable th.ft-glabel.ft-g2 span{color:var(--blue-deep)}
  .ftable tbody tr.ft-gstart > *{border-top:2px solid #b9c4da}
  .ftable tbody tr.ft-gstart:first-child > *{border-top:0}
  .modal-foot{
    flex:none;padding:14px 22px 20px;border-top:1px solid var(--line);
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  }
  .modal-foot .note{color:var(--muted);font-size:0.87rem;line-height:1.6;flex:1;min-width:220px}
  .modal-foot .go{
    flex:none;background:var(--blue);color:#fff;padding:13px 22px;border-radius:12px;
    font-weight:700;font-size:.9rem;box-shadow:0 6px 18px rgba(43,92,245,.28);transition:.2s;
  }
  .modal-foot .go:hover{background:var(--blue-deep)}
  @media(max-width:600px){
    .modal{padding:0}
    .modal-panel{width:100%;max-height:100%;height:100%;border-radius:0}
    .modal-body{padding:0 14px}
    .modal-head,.modal-foot{padding-left:16px;padding-right:16px}
  }
  body.no-scroll{overflow:hidden}

  /* 렌탈 배너 */
  .rental{
    margin-top:20px;background:linear-gradient(135deg,#1f2f8a,var(--blue) 60%,var(--violet) 130%);
    border-radius:20px;padding:24px;color:#fff;position:relative;overflow:hidden;
  }
  .rental::after{
    content:"";position:absolute;right:-40px;bottom:-50px;width:180px;height:180px;border-radius:50%;
    background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.28),transparent 68%);
  }
  .rental h3{font-size:1.2rem;font-weight:800;letter-spacing:-.02em;position:relative;z-index:1;line-height:1.4}
  .rental p{color:rgba(255,255,255,.82);font-size:.9rem;margin-top:8px;position:relative;z-index:1}
  .rental a{
    display:inline-flex;align-items:center;gap:8px;margin-top:16px;background:#fff;color:var(--blue-deep);
    font-weight:800;padding:13px 22px;border-radius:999px;position:relative;z-index:1;transition:gap .2s,transform .2s;
  }
  .rental a:hover{gap:12px;transform:translateY(-2px)}
  /* 모바일: 렌탈 배너 전체 축소 (글자·패딩·버튼) */
  @media(max-width:600px){
    .rental{margin-top:16px;padding:18px 16px;border-radius:16px}
    .rental h3{font-size:1.05rem;line-height:1.35}
    .rental p{font-size:.82rem;margin-top:5px;line-height:1.5}
    .rental a{margin-top:12px;padding:10px 16px;font-size:.88rem}
    .rental::after{width:140px;height:140px;right:-50px;bottom:-60px}
  }

  /* ---------- 구비서류 ---------- */
  /* 섹션 인트로 배너 (알뜰 무선인터넷 소개) */
  /* 슬림 가로 바 배너 */
  .intro-banner{
    display:flex;align-items:center;gap:18px;
    background:linear-gradient(100deg,var(--mist) 0%,var(--blue-100) 100%);
    border:1px solid var(--line);border-radius:16px;
    padding:22px 26px;margin-bottom:40px;
  }
  .intro-banner .ib-visual{
    flex:none;width:54px;height:54px;border-radius:14px;background:#fff;
    display:grid;place-items:center;box-shadow:0 3px 10px rgba(43,92,245,.12);
  }
  .intro-banner .ib-visual svg{width:28px;height:28px}
  .intro-banner .ib-text h3{
    font-size:1.25rem;font-weight:800;letter-spacing:-.02em;line-height:1.3;color:var(--blue);
  }
  .intro-banner .ib-text p{
    margin-top:4px;font-size:.92rem;line-height:1.5;color:var(--ink-soft);
  }
  @media(max-width:600px){
    .intro-banner{padding:15px 16px;gap:12px;margin-bottom:24px}
    .intro-banner .ib-visual{width:44px;height:44px;border-radius:12px}
    .intro-banner .ib-visual svg{width:22px;height:22px}
    .intro-banner .ib-text h3{font-size:1.05rem}
    .intro-banner .ib-text p{font-size:.8rem}
  }

  /* 구비서류: 담백한 텍스트 리스트 */
  .docs{display:flex;flex-direction:column}
  .doc{
    display:grid;grid-template-columns:1fr;gap:6px;
    padding:18px 4px;border-bottom:1px solid var(--line);
  }
  .doc:first-child{padding-top:4px}
  .doc:last-child{border-bottom:0;padding-bottom:4px}
  .doc-h{
    display:flex;align-items:center;gap:9px;padding:0;background:none;
    font-weight:800;font-size:1rem;color:var(--ink);letter-spacing:-.01em;
  }
  .doc-h .n{
    width:22px;height:22px;border-radius:7px;background:var(--blue);color:#fff;
    display:grid;place-items:center;font-family:var(--latin);font-size:0.8rem;font-weight:800;flex:none;
  }
  .doc-b{
    padding:0;display:block;
    font-size:.9rem;color:var(--ink-soft);line-height:1.7;word-break:keep-all;
  }
  .doc-b span{
    background:none;border:0;padding:0;font-weight:500;
  }
  .doc-b span:not(:last-child)::after{
    content:"·";color:var(--muted);margin:0 8px;font-weight:600;
  }
  /* 모바일: '·' 나열 대신 항목별 한 줄씩(가독성) */
  @media(max-width:640px){
    .doc-b{line-height:1.5}
    .doc-b span{display:block;position:relative;padding-left:12px}
    .doc-b span:not(:last-child)::after{display:none}
    .doc-b span::before{
      content:"";position:absolute;left:2px;top:.62em;width:4px;height:4px;border-radius:50%;background:var(--muted);
    }
  }
  .dl{
    display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;
    padding:15px;border-radius:12px;border:1.5px dashed var(--blue);color:var(--blue);
    font-weight:700;font-size:.94rem;transition:.2s;
  }
  .dl:hover{background:var(--blue-100)}

  /* 접수처 */
  .recv{
    margin-top:16px;background:var(--mist);border-radius:16px;padding:18px 20px;
  }
  .recv h4{font-size:.95rem;font-weight:800;margin-bottom:10px}
  .recv ul{list-style:none;display:flex;flex-direction:column;gap:6px}
  .recv li{display:flex;align-items:center;gap:10px;font-size:.9rem}
  .recv li .lb{
    flex:none;width:62px;font-size:0.86rem;color:var(--muted);font-weight:600;
  }
  .recv li a,.recv li b{font-family:var(--latin);font-weight:700;color:var(--ink);letter-spacing:-.01em}
  .recv li a:hover{color:var(--blue)}
  .recv .note{
    margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
    font-size:0.89rem;color:var(--muted);line-height:1.6;
  }

  /* ---------- 주문진행절차 ---------- */
  .steps{
    display:grid;grid-template-columns:1fr;gap:0;position:relative;
    background:linear-gradient(180deg,#f5f8fe,#eaf0fe);border-radius:20px;padding:24px 20px;
  }
  .step{display:flex;gap:14px;padding:14px 0;position:relative}
  .step:not(:last-child)::before{
    content:"";position:absolute;left:19px;top:52px;bottom:-6px;width:2px;
    background:linear-gradient(180deg,var(--blue),rgba(43,92,245,.15));
  }
  .step .sn{
    flex:none;width:40px;height:40px;border-radius:12px;background:#fff;color:var(--blue);
    display:grid;place-items:center;font-family:var(--latin);font-weight:800;font-size:.92rem;
    box-shadow:0 4px 12px rgba(43,92,245,.18);position:relative;z-index:1;
  }
  .step-b h4{font-size:1rem;font-weight:700;letter-spacing:-.02em;margin-top:8px}
  .step-b p{font-size:0.92rem;color:var(--muted);margin-top:4px;line-height:1.55}

  /* ---------- 스크롤 시 나타나는 플로팅 통신사 탭 ---------- */
  .floatbar{
    position:fixed;left:0;right:0;z-index:55;
    top:calc(var(--nav-h) + var(--tab-h));   /* 모바일: 헤더 + 섹션탭 아래 */
    background:rgba(255,255,255,.92);backdrop-filter:saturate(160%) blur(14px);
    border-bottom:1px solid var(--line);
    box-shadow:0 6px 20px rgba(20,22,32,.06);
    padding:8px 0;
    transform:translateY(-120%);opacity:0;pointer-events:none;
    visibility:hidden;   /* 숨김 상태에선 탭 이동/스크린리더에서 제외 */
    transition:transform .32s cubic-bezier(.2,.7,.3,1),opacity .28s,visibility .32s;
  }
  .floatbar.show{transform:none;opacity:1;pointer-events:auto;visibility:visible}
  .floatbar-in{max-width:1200px;margin:0 auto;padding:0 20px}
  /* 컴팩트 탭: 가로로 눕히고 높이 축소 */
  .ptabs.compact{margin-bottom:0;padding:4px;border-radius:12px;gap:6px}
  /* 섹션 안에 놓이는 인라인 버전(추천상품 카드 아래) - 크게 */
  .ptabs.inline{margin-top:16px;margin-bottom:0}

  /* 카드가 2열이 되는 시점부터: 트레이를 없애고 각 카드 바로 아래에 붙임 */
  @media(min-width:640px){
    .ptabs.inline{
      background:transparent;border:none;padding:0;
      grid-template-columns:1fr 1fr;gap:18px;   /* .plans2 와 동일한 열/간격 */
      margin-top:12px;
    }
    .ptabs.inline button{
      position:relative;background:#fff;
      border:1.5px solid var(--line);border-radius:16px;
      min-height:66px;
      transition:border-color .25s,background .25s,box-shadow .25s;
    }
    .ptabs.inline button:hover{border-color:var(--blue-bright);color:var(--ink)}
    .ptabs.inline button.on{
      border-color:var(--blue);background:var(--blue-100);color:var(--ink);
      box-shadow:0 8px 24px rgba(43,92,245,.15);
    }
    /* 위 카드와 이어지는 연결 노치 */
    .ptabs.inline button.on::before{
      content:"";position:absolute;left:50%;top:-8px;
      width:14px;height:14px;transform:translateX(-50%) rotate(45deg);
      background:var(--blue-100);
      border-left:1.5px solid var(--blue);border-top:1.5px solid var(--blue);
      border-radius:4px 0 0 0;
    }
    .ptabs.inline button.on .pt-sub{color:var(--blue)}
  }
  .ptabs.compact button{
    flex-direction:row;gap:8px;padding:9px 12px;min-height:44px;border-radius:9px;flex-wrap:wrap;
  }
  .ptabs.compact .pt-name{font-size:.9rem}
  .ptabs.compact .pt-sub{font-size:0.82rem}
  /* 모바일: 상단 고정(플로팅) 탭에서는 부제 숨겨 컴팩트하게 */
  @media(max-width:999px){
    .ptabs.compact .pt-sub{display:none}
  }
  @media(min-width:1000px){
    /* 플로팅바를 콘텐츠 열(사이드바 오른쪽)에서만 시작해 왼쪽 메뉴를 가리지 않음 */
    .floatbar{
      top:var(--nav-h);
      left:max(20px, calc((100% - 1200px) / 2 + 20px));
      margin-left:240px;   /* 사이드바 196 + gap 44 */
      right:max(20px, calc((100% - 1200px) / 2 + 20px));
    }
    .floatbar-in{max-width:none;margin:0;padding:0}
    .ptabs.compact button{padding:8px 14px}
  }

  /* ================= 유선인터넷 전용 컴포넌트 ================= */
  /* 연결 구성도: 인터넷 → 광분배기 → 모뎀·L2 스위치 → 고객사 PC */
  .netmap{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px 18px}
  /* 흐름 */
  .nm-flow{list-style:none;display:grid;grid-template-columns:1fr;gap:6px;align-items:start}
  .nm-node{text-align:center}
  .nm-ics{display:flex;justify-content:center;gap:10px}
  .nm-ic{
    width:72px;height:72px;border-radius:20px;display:grid;place-items:center;
    background:var(--blue-100);color:var(--blue);
  }
  /* 인라인 SVG(24~26px)를 박스에 맞춰 크게 통일 + 선 굵기 얇게 */
  .nm-ic svg{width:36px;height:36px}
  .nm-ic svg,.nm-ic svg *{stroke-width:1.4}
  /* 와이파이 글리프는 viewBox 하단에 치우쳐 있어 시각적 중앙으로 보정 */
  .nm-ic.wifi svg{transform:translateY(-4px)}
  /* 포인트 컬러: 중간 장비 구간(광분배기 · 모뎀/L2)은 바이올렛으로 구분 */
  .nm-flow > .nm-node:nth-child(3) .nm-ic,
  .nm-flow > .nm-node:nth-child(5) .nm-ic{background:var(--violet-100);color:var(--violet)}
  .nm-lbl{display:flex;justify-content:center;gap:10px;margin-top:8px}
  .nm-lbl span{width:72px;font-size:0.87rem;font-weight:700;color:var(--violet)}
  .nm-node h4{margin-top:12px;font-size:1rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
  .nm-node h4.nm-strong{margin-top:10px;font-size:.92rem;line-height:1.5}
  .nm-node p{margin-top:6px;font-size:0.91rem;color:var(--muted);line-height:1.5}
  /* 단계 사이 화살표 (모바일: 아래 방향) */
  .nm-arrow{display:grid;place-items:center;color:var(--violet);padding:4px 0}
  .nm-arrow::before{
    content:"";width:10px;height:10px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg);
  }
  /* 하단 스펙 요약 */
  .nm-specs{
    display:grid;grid-template-columns:1fr;gap:10px;
    margin-top:22px;padding-top:22px;border-top:1px solid var(--line);
  }
  .nm-spec{background:var(--mist);border-radius:14px;padding:14px 16px;text-align:center}
  .nm-spec span{display:block;font-size:0.87rem;font-weight:600;color:var(--muted)}
  .nm-spec b{display:block;margin-top:6px;font-size:.98rem;font-weight:800;color:var(--ink)}

  /* 특장점 — 컬러 카드형 + 아이콘 (무선 페이지의 .feat와 충돌 없도록 전용 클래스) */
  /* 섹션 안의 부속 제목: 본 섹션 제목보다 한 단계 작게 */
  .sh-sub{margin-top:38px}
  .sh-sub h2{font-size:clamp(1.15rem,3vw,1.35rem)}
  .sh-sub p{font-size:.9rem;margin-top:6px}
  .usps{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px}
  .usp{
    background:linear-gradient(160deg,var(--mist) 0%,var(--blue-100) 100%);
    border:1px solid var(--line);border-radius:18px;padding:22px 20px;
    transition:transform .25s,box-shadow .25s,border-color .25s;
  }
  /* 카드 hover는 사이트 공통 규칙(.point/.dev)과 동일하게 */
  .usp:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:transparent}
  .usp-ic{
    width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
    background:#fff;color:var(--blue);margin-bottom:12px;
    box-shadow:0 4px 12px rgba(43,92,245,.14);
  }
  /* 포인트 컬러: 짝수 번째 카드는 바이올렛 아이콘으로 리듬 */
  .usp:nth-child(even) .usp-ic{color:var(--violet);box-shadow:0 4px 12px rgba(124,58,237,.16)}
  .usp h3{font-size:1.05rem;font-weight:800;letter-spacing:-.02em;color:var(--blue-deep)}
  .usp p{margin-top:8px;font-size:.9rem;color:#4d5570;line-height:1.6}

  /* 요금표 (섹션 내 인라인) */
  .ptable-box{margin-bottom:26px;border:1px solid var(--line);border-radius:18px;padding:18px 16px;background:#fff}
  .ptable-note{list-style:none;margin-bottom:14px;display:flex;flex-direction:column;gap:6px}
  .ptable-note li{font-size:0.87rem;color:var(--muted);line-height:1.6;padding-left:12px;position:relative}
  .ptable-note li::before{content:"·";position:absolute;left:2px;color:var(--blue)}
  .ptable-note b{color:var(--ink-soft);font-weight:700}
  /* 유의사항 안 하위 항목(요금·데이터 산식) */
  .ptable-subnote{list-style:none;margin:6px 0 2px;display:flex;flex-direction:column;gap:4px}
  .ptable-subnote li{font-size:0.85rem;padding-left:12px;position:relative}
  .ptable-subnote li::before{content:"-";position:absolute;left:2px;color:#9aa0b4}
  /* 주석이 표 아래에 올 때는 위 여백을 준다 (기본값은 표 위 배치 기준) */
  .ptable-scroll + .ptable-note{margin-top:18px;margin-bottom:0}
  /* 좁은 화면에서는 표를 가로 스크롤 */
  .ptable-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ptable-scroll .ftable{min-width:460px}
  /* 열이 많은 표(AI비즈콜 요금제 9열·렌탈 장기플랜 7열)는 460px에 눌려 헤더·가격이 틀어지므로 더 넓게 */
  .ptable-scroll .ftable.ft-wide{min-width:720px}
  /* 열은 적지만 라벨이 긴 표(부가서비스 '기본료(회선/월)')는 첫 칸을 넓혀 라벨이 눌려 넘치지 않게 */
  .ptable-scroll .ftable.ft-rate th.ft-gcorner,
  .ptable-scroll .ftable.ft-rate td.ft-plan{width:34%}
  /* rowspan(속도) 셀은 행 hover에서 제외 — 2행 높이 셀이 함께 칠해져 L자로 보이는 문제 방지 */
  .ptable-box .ftable tbody tr:hover td.ft-plan{background:#fff}
  /* rowspan이 없는 표(.hov-all): 구분 열도 행 전체와 같이 hover 강조 */
  .ptable-box.hov-all .ftable tbody tr:hover td.ft-plan{background:var(--mist)}
  /* 구분 열 중앙정렬(opt-in) */
  .ptable-box.ctr-plan .ftable td.ft-plan{text-align:center}
  /* 헤더: 연한 배경 + 하단 구분선 */
  .ptable-box .ftable thead th{background:var(--mist);border-bottom:1px solid var(--line)}
  .ptable-box .ftable thead th.ft-gcorner{background:var(--mist)}
  /* 모든 열 사이 세로선 (rowspan 헤더 사이 포함, 마지막 열 제외) */
  .ptable-box .ftable thead th:not(:last-child),
  .ptable-box .ftable tbody td:not(:last-child){border-right:1px solid var(--line)}
  /* 헤더 2번째 줄의 'IP'는 그 줄의 마지막 셀이라 위 규칙에 안 걸림 → 별도 지정 */
  .ptable-box .ftable thead th.ft-ipcol{border-right:1px solid var(--line)}

  /* 요금 유의사항 */
  .fee-guide{font-size:0.91rem;color:var(--muted);line-height:1.7}
  .fee-guide > ul{list-style:none;display:flex;flex-direction:column;gap:4px}
  .fee-guide > ul > li{padding-left:12px;position:relative}
  .fee-guide > ul > li::before{content:"·";position:absolute;left:2px;color:var(--blue)}
  .fg-box{margin-top:12px;background:var(--mist);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
  .fg-box h4{font-size:.9rem;font-weight:800;color:var(--ink-soft);margin-bottom:8px}
  .fg-box ul{list-style:none;display:flex;flex-direction:column;gap:6px}
  .fg-box li{padding-left:14px;position:relative;font-size:0.89rem}
  .fg-box li::before{content:"–";position:absolute;left:0;color:#9aa0b4}
  .fg-last{margin-top:12px;padding-left:12px;position:relative}
  .fg-last::before{content:"·";position:absolute;left:2px;color:var(--blue)}

  @media(min-width:640px){
    .netmap{padding:24px 22px}
    .nm-specs{grid-template-columns:repeat(2,1fr);gap:12px}
    .usps{grid-template-columns:repeat(2,1fr);gap:16px}
    .ptable-box{padding:22px 20px}
  }
  @media(min-width:900px){
    .netmap{padding:28px 26px}
    /* 가로 흐름: 노드 - 화살표 - 노드 … (모뎀·L2 노드는 넓게) */
    .nm-flow{grid-template-columns:1fr auto 1fr auto 1.35fr auto 1fr;gap:8px;align-items:start}
    .nm-arrow{padding:0;margin-top:24px}
    .nm-arrow::before{transform:rotate(-45deg)}   /* 오른쪽 방향 */
    .nm-specs{grid-template-columns:repeat(4,1fr);gap:14px}
  }

  /* ---------- sticky 하단 CTA ---------- */
  .cta-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
    border-top:1px solid var(--line);padding:12px 16px;
    display:flex;gap:10px;align-items:center;
    box-shadow:0 -6px 24px rgba(20,22,32,.07);
    padding-bottom:calc(12px + env(safe-area-inset-bottom));
  }
  .cta-bar .tel{
    flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;
    border:1.5px solid var(--line);color:var(--blue);transition:.2s;
  }
  .cta-bar .tel:hover{border-color:var(--blue);background:var(--blue-100)}
  .cta-bar .main{
    flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:52px;
    border-radius:14px;background:var(--blue);color:#fff;font-weight:800;font-size:1rem;
    box-shadow:0 8px 22px rgba(43,92,245,.35);transition:.2s;
  }
  .cta-bar .main:hover{background:var(--blue-deep)}
  /* 모바일 포함 전 구간 숨김 — 우하단 플로터가 상담 진입을 대신함 */
  .cta-bar{display:none}
  body{padding-bottom:0}   /* CTA바를 안 쓰므로 하단 여백 불필요 */

  /* ---------- footer ---------- */
  /* footer는 layout.css(공통)로 이동 */

  /* reveal */
  .rv{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.2,.6,.2,1),transform .6s cubic-bezier(.2,.6,.2,1)}
  .rv.in{opacity:1;transform:none}

  /* ---------- 태블릿 이상 ---------- */
  @media(min-width:640px){
    .points{grid-template-columns:repeat(3,1fr)}
    .plans2{grid-template-columns:1fr 1fr}
    .feats{grid-template-columns:repeat(2,1fr)}
    .fees{grid-template-columns:repeat(2,minmax(0,1fr))}
    /* 폴드 펼친 화면·태블릿(640~899): 아래로 쌓지 않고 2개씩 보이는 가로 슬라이더로 유지 */
    .devs{
      grid-auto-flow:column;grid-auto-columns:calc((100% - 12px)/2);
      overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;
      margin:0;padding:14px 0 6px;
    }
    .doc{grid-template-columns:200px 1fr;gap:16px;align-items:baseline}
    .doc-b{padding-top:0}
    .steps{grid-template-columns:repeat(5,1fr);gap:12px;padding:28px 24px}
    .step{flex-direction:column;padding:0;text-align:center;align-items:center}
    .step:not(:last-child)::before{
      left:auto;top:20px;right:-56%;bottom:auto;width:auto;height:2px;left:60%;
      background:linear-gradient(90deg,var(--blue),rgba(43,92,245,.15));
    }
    .step-b h4{margin-top:12px}
    .cta-bar{justify-content:center}
    .cta-bar .main{flex:none;padding:0 48px}
  }
  @media(min-width:900px){
    .hero-card{padding:32px 36px}
    .hero-grid{grid-template-columns:1.25fr .75fr;gap:24px}
    .hero-router{width:100%;max-width:200px;justify-self:end;margin-top:0}
    .devs{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(3,1fr);overflow:visible;scroll-snap-type:none;margin:0;padding:0}
    section.blk{padding:64px 0}
    body{padding-bottom:0}
    /* 데스크톱: 사이드바에 CTA가 있으므로 하단 바 숨김 */
    .cta-bar{display:none}
  }

  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    .rv{opacity:1;transform:none}
  }
  /* 태블릿(640~899px): 2열 중간 단계 (모바일 1열 → 데스크톱 3~4열 사이 완충) */
  @media(min-width:640px) and (max-width:899px){
    .fees{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  /* 요금 카드: 900px 이상에서 유형별 개수만큼 열 (정액/무제한 3, 고정IP 4) */
  @media(min-width:900px){
    .fees{grid-template-columns:repeat(var(--fee-cols,3),minmax(0,1fr))}
  }

  /* ---------- 독립 상담 페이지 ---------- */
  .contact-page{max-width:760px;margin:0 auto;padding:14px 0 8px}
  .contact-page .contact-intro{margin-bottom:20px}
  .contact-page .contact-intro p{margin-top:10px;color:var(--muted);font-size:1rem;line-height:1.6}
  .contact-page #contact-form{padding-top:0}

  /* ---------- 상담 예약 폼 ---------- */
  .cform{
    background:linear-gradient(180deg,var(--mist) 0%,#fff 60%);
    border:1px solid var(--line);border-radius:22px;padding:30px 26px;
  }
  .cform .frow{display:grid;grid-template-columns:1fr;gap:18px 20px;margin-bottom:18px}
  .cform .field{display:flex;flex-direction:column;gap:8px}
  .cform label{font-size:.9rem;font-weight:800;color:var(--ink);letter-spacing:-.01em}
  .cform label .req{color:var(--blue);margin-left:2px}
  .cform input,.cform select,.cform textarea{
    width:100%;font-family:inherit;font-size:.95rem;color:var(--ink);
    background:#fff;border:1.5px solid var(--line);border-radius:12px;
    padding:13px 15px;transition:border-color .2s,box-shadow .2s;
  }
  .cform input::placeholder,.cform textarea::placeholder{color:var(--muted)}
  .cform input:focus,.cform select:focus,.cform textarea:focus{
    outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(43,92,245,.12);
  }
  .cform select{
    appearance:none;-webkit-appearance:none;cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238790a3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center;padding-right:42px;
  }
  .cform textarea{resize:vertical;min-height:110px;line-height:1.55}
  .cform .agree{
    display:flex;align-items:center;gap:6px;flex-wrap:wrap;
    font-size:0.93rem;color:var(--ink-soft);margin:4px 0 0;
  }
  .cform .agree a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:2px}
  /* 필수 동의 체크박스 (커스텀) */
  .agree-label{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
  .agree-label input{position:absolute;opacity:0;width:1px;height:1px}
  .agree-box{flex:none;width:20px;height:20px;border:2px solid var(--line);border-radius:6px;
    display:grid;place-items:center;transition:background .15s,border-color .15s}
  /* 회전한 체크표시의 시각적 중심 보정 (translate는 rotate 앞에 둬 회전 후 좌표에서 이동) */
  .agree-box::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;
    transform:translateY(-1.5px) rotate(45deg) scale(0);transition:transform .15s}
  .agree-label input:checked + .agree-box{background:var(--blue);border-color:var(--blue)}
  .agree-label input:checked + .agree-box::after{transform:translateY(-1.5px) rotate(45deg) scale(1)}
  .agree-label input:focus-visible + .agree-box{outline:3px solid var(--blue-100);outline-offset:1px}
  .agree-label b{color:var(--blue);font-weight:700}
  /* 미동의(에러) 상태 */
  .agree.invalid .agree-box{border-color:#e5484d}
  .agree-err{display:none;margin:6px 0 0;font-size:0.89rem;font-weight:600;color:#e5484d}
  .agree-err.show{display:block}
  /* 자세히 보기 토글 */
  .agree-toggle{background:none;border:0;cursor:pointer;font-family:inherit;font-size:inherit;
    color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:2px;padding:0}
  /* 접이식 개인정보 상세 */
  .agree-detail{max-height:0;overflow:hidden;transition:max-height .32s ease}
  .agree-detail.open{max-height:460px}
  .agree-detail-in{margin:10px 0 18px;background:var(--mist);border:1px solid var(--line);
    border-radius:12px;padding:14px 16px;font-size:0.91rem;line-height:1.6}
  .agree-detail dl{display:flex;flex-direction:column;gap:8px}
  .agree-detail dl > div{display:flex;gap:10px}
  .agree-detail dt{flex:none;width:88px;font-weight:700;color:var(--ink-soft);white-space:nowrap}
  .agree-detail dd{color:var(--muted)}
  .agree-note{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);color:#8790a3;font-size:0.87rem}
  .cform .agree ~ .submit,.agree-detail + .submit{margin-top:18px}
  .cform .submit{
    width:100%;border:0;border-radius:14px;cursor:pointer;
    background:linear-gradient(100deg,var(--blue),var(--violet));
    color:#fff;font-family:inherit;font-size:1.05rem;font-weight:800;letter-spacing:-.01em;
    padding:16px;transition:transform .2s,box-shadow .2s,opacity .2s;
    box-shadow:0 8px 22px rgba(43,92,245,.25);
  }
  .cform .submit:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(43,92,245,.32)}
  .cform .submit:active{transform:translateY(0)}
  @media(min-width:640px){
    .cform{padding:34px 32px}
    .cform .frow.two{grid-template-columns:1fr 1fr}
  }

  /* ================= 차량관제 페이지 (공용 컴포넌트 확장) ================= */
  /* 요금제 3-플랜 그리드 */
  .plans3{display:grid;grid-template-columns:1fr;gap:16px}
  /* 주요기능 STEP 플로우 (단일 카드 + 세로 구분선 + STEP 배지) */
  .sflow{background:#fff;border:1px solid var(--line);border-radius:20px;display:grid;grid-template-columns:1fr}
  .sflow-col{padding:28px 22px;text-align:center;display:flex;flex-direction:column;align-items:center}
  .sflow-badge{
    font-family:var(--latin);font-size:.74rem;font-weight:800;letter-spacing:.06em;
    color:#fff;padding:5px 16px;border-radius:999px;margin-bottom:20px;
  }
  .sflow-badge.s1{background:linear-gradient(135deg,var(--blue-bright),var(--blue))}
  .sflow-badge.s2{background:linear-gradient(135deg,var(--teal),var(--blue))}
  .sflow-badge.s3{background:linear-gradient(135deg,var(--blue-bright),var(--violet))}
  .sflow-ic{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:var(--blue-100);color:var(--blue);margin-bottom:16px}
  .sflow-ic svg{width:30px;height:30px}
  .sflow-ic.wifi svg{transform:translateY(-1px)}
  .sflow-col:nth-child(3) .sflow-ic{background:var(--teal-100);color:var(--teal)}
  .sflow-col:nth-child(5) .sflow-ic{background:var(--violet-100);color:var(--violet)}
  .sflow-col h4{font-size:1.12rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
  .sflow-col p{margin-top:10px;font-size:.9rem;color:var(--muted);line-height:1.6}
  .sflow-arrow{display:grid;place-items:center;padding:2px 0}
  .sflow-arrow .chev{width:28px;height:28px;border-radius:50%;background:var(--mist);display:grid;place-items:center;color:#9aa7c2}
  .sflow-arrow .chev svg{width:16px;height:16px;transform:rotate(90deg)}
  /* 혜택 카드 3열(cols-3): 900px 미만은 1열 유지 */
  .usps.cols-3{grid-template-columns:1fr}
  /* 기기 설치 과정 안내 박스 */
  .steps-note{
    margin-top:18px;background:#fff9ea;border:1px solid #f1e2b6;
    border-radius:14px;padding:15px 18px;
  }
  .steps-note p{font-size:.87rem;color:#8a6d1f;line-height:1.7}
  .steps-note p + p{margin-top:4px}

  @media(min-width:640px){
    .steps.s4{grid-template-columns:repeat(4,1fr)}
  }
  /* 단기 플랜: 중간 화면에선 2열(여백 과다 방지), 더 작으면 1열 */
  @media(min-width:600px){
    .plans3{grid-template-columns:repeat(2,1fr)}
  }
  @media(min-width:900px){
    .plans3{grid-template-columns:repeat(3,1fr)}
    .usps.cols-3{grid-template-columns:repeat(3,1fr)}
    .who.cols-4{grid-template-columns:repeat(4,1fr)}
    .devs.two{grid-template-columns:repeat(2,calc((100% - 24px)/3));justify-content:center}
    /* 주요기능 플로우: 가로 3열 + 세로 구분선 + 꺾쇠 */
    .sflow{grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch}
    .sflow-col{padding:36px 26px;justify-content:flex-start}
    .sflow-arrow{position:relative;align-self:stretch;width:48px}
    .sflow-arrow::before{content:"";position:absolute;top:28px;bottom:28px;left:50%;width:1px;background:var(--line)}
    .sflow-arrow .chev{position:relative;z-index:1;background:#fff;border:1px solid var(--line)}
    .sflow-arrow .chev svg{transform:none}
  }

  /* ================= 기업 인터넷전화 페이지 ================= */
  /* 상품개요 4특징: 2x2 */
  .points.cols-2{grid-template-columns:1fr}

  /* 연결 구성도(센트릭스) */
  .cx-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--line)}
  .cx-brand{
    display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.92rem;
    color:var(--blue);background:var(--blue-100);border:1px solid #c9d8fb;padding:8px 16px;border-radius:999px;
  }
  .cx-brand svg{width:16px;height:16px}
  .cx-note{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;color:var(--muted)}
  .cx-note::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);flex:none}
  .cx-flow{display:grid;grid-template-columns:1fr;gap:18px;align-items:center;padding:26px 0 4px}
  .cx-col-title{font-size:.84rem;font-weight:700;color:var(--muted);text-align:center;margin-bottom:14px}
  /* 단말기 목록 */
  .cx-devs{list-style:none;display:flex;flex-direction:column;gap:12px;align-items:center}
  .cx-devs li{display:flex;align-items:center;gap:12px;font-size:.92rem;font-weight:600;color:var(--ink-soft);width:160px}
  .cx-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none;background:var(--blue-100);color:var(--blue)}
  .cx-ic svg{width:22px;height:22px}
  .cx-ic.violet{background:var(--violet-100);color:var(--violet)}
  .cx-ic.teal{background:var(--teal-100);color:var(--teal)}
  /* 화살표 (모바일: 아래, 데스크톱: 오른쪽) */
  .cx-arrow{display:grid;place-items:center;color:var(--blue);padding:2px 0}
  .cx-arrow::before{content:"";width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
  /* 교환기 */
  .cx-center{text-align:center}
  .cx-cloud{
    position:relative;width:112px;height:96px;margin:0 auto;border-radius:18px;
    background:linear-gradient(160deg,#eef3fe,#e0eafd);display:grid;place-items:center;
  }
  .cx-cloud svg{width:46px;height:46px;color:var(--blue)}
  .cx-ssw{
    position:absolute;top:-12px;right:-12px;width:38px;height:38px;border-radius:50%;
    background:var(--blue);color:#fff;font-family:var(--latin);font-size:.68rem;font-weight:800;
    display:grid;place-items:center;box-shadow:0 4px 12px rgba(43,92,245,.3);
  }
  .cx-center h4{margin-top:14px;font-size:1rem;font-weight:800;line-height:1.4;color:var(--ink)}
  .cx-center p{margin-top:6px;font-size:.84rem;color:var(--muted)}
  /* 본사 / 지점 */
  .cx-sites{display:flex;flex-direction:column;gap:14px}
  .cx-site{background:var(--mist);border-radius:16px;padding:14px 16px}
  .cx-site-h{display:flex;align-items:center;gap:7px;font-size:.92rem;font-weight:800;color:var(--ink);margin-bottom:12px}
  .cx-site-h i{width:8px;height:8px;border-radius:50%;background:var(--blue);flex:none}
  .cx-site.branch .cx-site-h i{background:var(--teal)}
  .cx-site-b{display:flex;align-items:center;gap:10px}
  .cx-dash{flex:none;width:26px;border-top:2px dashed #b9c4da}
  .cx-mini{display:grid;grid-template-columns:repeat(2,34px);gap:6px}
  .cx-mini span{width:34px;height:34px;border-radius:9px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:#8790a3}
  .cx-mini span svg{width:16px;height:16px}
  .nm-spec b.hl{color:var(--blue)}
  /* 전화기 카드(기기안내): 이미지 + 이름 + 설명 + 기능목록 + 가격 */
  .dev-desc{margin-top:4px;font-size:.86rem;color:var(--muted);line-height:1.5}
  .dev-feats{margin-top:12px;display:flex;flex-direction:column;gap:6px;list-style:none}
  .dev-feats li{position:relative;padding-left:14px;font-size:.86rem;color:var(--ink-soft);line-height:1.5}
  .dev-feats li::before{content:"";position:absolute;left:2px;top:.62em;width:4px;height:4px;border-radius:50%;background:var(--blue)}
  .dev-price{margin-top:auto;padding-top:14px}
  .dev-price .cap{display:block;font-size:.74rem;color:var(--muted);line-height:1.4}
  .dev-price .price{font-family:var(--latin);font-weight:800;font-size:1.3rem;color:var(--ink);margin-top:3px}
  .dev-price .price small{font-family:var(--display);font-size:.9rem;font-weight:700;color:var(--ink-soft);margin-left:1px}
  /* '가장 많은 선택' 강조 카드 + 리본 배지 (강조색은 다른 페이지와 동일하게 블루) */
  .dev.pick{position:relative;overflow:visible;border-color:var(--blue);box-shadow:0 10px 30px rgba(43,92,245,.14)}
  .pick-badge{
    position:absolute;top:-12px;left:50%;transform:translateX(-50%);z-index:3;
    background:var(--blue);color:#fff;font-size:.76rem;font-weight:700;letter-spacing:.02em;
    padding:5px 14px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 12px rgba(43,92,245,.3);
  }

  @media(min-width:640px){
    .points.cols-2{grid-template-columns:repeat(2,1fr)}
  }
  @media(min-width:900px){
    .nm-flow.f3{grid-template-columns:1fr auto 1fr auto 1fr}
    .devs.four{grid-template-columns:repeat(4,1fr)}
    /* 구성도: 단말기 - 화살표 - 교환기 - 화살표 - 본사/지점 */
    .cx-flow{grid-template-columns:1fr auto 1fr auto 1.15fr;gap:14px}
    .cx-arrow::before{transform:rotate(-45deg)}
  }