/*
 * 렌탈마켓 공개 — 인터넷 요금제 고르기 (PUBLIC-INTERNET-PLANS-001)
 *
 * namespace 는 .ip- 하나만 쓴다.
 * .sh-(GLOBAL SHELL) · .rm-(상담 바·모달) 은 소유자가 따로 있어 건드리지 않는다.
 *
 * 공통 토큰만 쓴다. 새 색·새 breakpoint 를 만들지 않는다.
 * 모든 규칙은 .pub-root 아래로 스코프한다.
 */

.pub-root .ip__head{max-width:var(--content-max);margin:0 0 var(--s6);}
.pub-root .ip__t{margin:0 0 var(--s2);}
.pub-root .ip__d{margin:0;color:var(--pub-ink-2);font-size:var(--fs-body);line-height:var(--lh-body);}

/* ── 2단 구성 ───────────────────────────────────────────────── */
.pub-root .ip__cols{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6);}
/*
 * grid 자식의 기본 최소폭(auto)은 안쪽 내용 길이를 따라간다.
 * track 을 minmax(0,1fr) 로 잡아도 **자식이** 그 밖으로 삐져나올 수 있다.
 * 두 칸 모두 0 까지 줄어들 수 있게 못 박는다.
 */
.pub-root .ip__pick,
.pub-root .ip__panel{min-width:0;}

@media (min-width:1024px){
  .pub-root .ip__cols{
    /*
     * 패널 폭은 이 화면만의 값이다 (PUBLIC-DOCK-UNIFY-001 · 사용자 결정 2026-10-12).
     *
     * 전에는 공용 --detail-panel(520px) 을 썼다. 제품 상세의 사진 영역도 같은 값이다.
     * 고르는 영역을 더 넓게 쓰자는 요청인데, 공용 값을 줄이면 제품 상세까지 함께 바뀐다.
     * «인터넷만 바꾼다» 로 정해져서 여기서만 끊어 쓴다.
     *
     * 그래서 두 화면의 패널 폭이 달라진다 — 의도한 것이다.
     * 나중에 둘을 다시 맞추기로 하면 이 값을 지우고 --detail-panel 로 되돌리면 된다.
     */
    --ip-panel:420px;
    grid-template-columns:minmax(0,1fr) var(--ip-panel);
    gap:var(--s8);
    align-items:start;
  }
}

/* ── 선택 묶음 ──────────────────────────────────────────────── */
.pub-root .ip__set{border:0;margin:0 0 var(--s6);padding:0;min-width:0;}
.pub-root .ip__set[hidden]{display:none;}
.pub-root .ip__legend{display:block;padding:0;margin:0 0 var(--s2);color:var(--pub-ink-2);}

.pub-root .ip__opts{display:grid;gap:var(--s2);min-width:0;}
.pub-root .ip__opts[hidden]{display:none;}
.pub-root .ip__opts--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.pub-root .ip__opts--speed{grid-template-columns:minmax(0,1fr);}

@media (min-width:768px){
  .pub-root .ip__opts--speed{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/*
 * 통신사(5개) · TV 등급(최대 5개) — 마지막 줄이 폭을 꽉 채운다.
 *
 * grid 로 두면 개수가 열 수로 나눠떨어지지 않을 때 마지막 한 칸이
 * 왼쪽에 외톨이로 붙는다. 통신사 5개를 2열로 깔면 2·2·1 이 되어
 * 다섯 번째 버튼만 왼쪽 끝에 혼자 남았다(실측).
 *
 * flex-wrap 으로 바꾸고 **마지막 줄을 늘려 채운다**(사용자 결정).
 *   flex-basis 가 한 줄에 몇 개가 들어갈지를 정하고
 *   max-width 를 두지 않으므로 남은 줄의 항목들이 자라 빈칸을 없앤다.
 *   3-2 로 나뉘면 뒤의 2개가 좌우 여백 없이 줄을 채운다.
 *
 * 한 줄에 들어가는 개수는 종전과 같다.
 *   <768 2개 · >=768 3개 · >=1024 통신사만 5개
 */
.pub-root .ip__opts--carrier,
.pub-root .ip__opts--tv{
  display:flex;flex-wrap:wrap;gap:var(--s2);min-width:0;
}
.pub-root .ip__opts--carrier > .ip__opt,
.pub-root .ip__opts--tv > .ip__opt{
  flex:1 1 calc((100% - var(--s2)) / 2);
}

@media (min-width:768px){
  .pub-root .ip__opts--carrier > .ip__opt,
  .pub-root .ip__opts--tv > .ip__opt{
    flex-basis:calc((100% - var(--s2) * 2) / 3);
  }
}

@media (min-width:1024px){
  .pub-root .ip__opts--carrier > .ip__opt{
    flex-basis:calc((100% - var(--s2) * 4) / 5);
  }
}

/* ── 선택지 ─────────────────────────────────────────────────── */
.pub-root .ip__opt{display:block;min-width:0;}

/*
 * 네이티브 radio 를 숨기되 접근성 트리에서 지우지 않는다.
 * display:none 이면 키보드로 고를 수 없고 스크린리더가 읽지 못한다.
 */
.pub-root .ip__opt input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

.pub-root .ip__btn{
  display:flex;align-items:center;justify-content:center;
  min-height:var(--h-lg);padding:var(--s2) var(--s3);
  border:1px solid var(--pub-line);border-radius:var(--r1);
  background:var(--pub-bg);color:var(--pub-ink);
  font-size:var(--fs-control);font-weight:var(--fw-m);
  text-align:center;line-height:var(--lh-snug);
  cursor:pointer;transition:border-color var(--tr-1),background var(--tr-1);
  min-width:0;word-break:keep-all;
}

.pub-root .ip__opt input:hover + .ip__btn{border-color:var(--pub-ink-3);}

/*
 * 고른 것 (PUBLIC-SHELL-POLISH-001 에서 면 제거).
 *
 * 전에는 연한 파란 면(--pub-accent-bg)을 깔았다. 카드가 여러 줄이라 면이 여러 개 생기고
 * 화면이 어수선했다(사용자 판단). 면만 빼고 테두리·글자색·굵기는 그대로 둔다.
 * 선택 상태가 색 하나에만 기대지 않으므로 알아보는 데 문제가 없다.
 */
.pub-root .ip__opt input:checked + .ip__btn{
  border-color:var(--pub-accent);
  color:var(--pub-accent);
  font-weight:var(--fw-sb);
  box-shadow:inset 0 0 0 1px var(--pub-accent);
}

/*
 * 고를 수 없는 조합.
 *
 * 숨기지 않고 흐리게 둔다. 그 통신사·구성에 그 속도가 없다는 사실이
 * 화면에서 읽혀야 방문자가 다른 조합으로 옮겨 간다.
 */
.pub-root .ip__opt input:disabled + .ip__btn{
  border-color:var(--pub-line-2);background:var(--pub-bg-2);
  color:var(--pub-ink-4);cursor:not-allowed;box-shadow:none;
}

/* 포커스는 반드시 보이게 둔다(고대비 모드 포함). */
.pub-root .ip__opt input:focus-visible + .ip__btn{
  outline:2px solid transparent;outline-offset:0;
  box-shadow:inset 0 0 0 2px var(--pub-ink);
}

/* ── 통신사 로고 ────────────────────────────────────────────── */
/*
 * 다섯 파일 모두 900x200 투명 PNG 이고 글자가 높이를 꽉 채운다
 * (사용자가 높이를 맞춰 모아 줬다). 그래서 높이만 고정하면
 * 다섯 로고의 글자 높이가 저절로 같아진다. 너비는 로고마다 다르다.
 *
 * width:auto 로 비율을 지키고 max-width 로 버튼 밖으로 나가지 않게 한다.
 * object-fit:contain 은 max-width 가 걸렸을 때 찌그러지지 않게 하는 보험이다.
 */
.pub-root .ip__btn--carrier{
  flex-direction:column;gap:var(--s2);padding:var(--s3) var(--s2);
}
.pub-root .ip__logo{
  display:block;height:26px;width:auto;max-width:100%;
  object-fit:contain;object-position:center;
}
@media (max-width:359px){
  /* 아주 좁은 단말에서만 한 단계 줄인다. 글자가 아니라 로고라 더 줄이면 못 읽는다. */
  .pub-root .ip__logo{height:22px;}
}

/*
 * 로고 아래 통신사 이름.
 *
 * 로고보다 작고 흐리게 둔다. 로고가 주인공이고 이름은 확인용이다.
 * 고르면 또렷해진다 — 선택 상태가 이름에서도 읽혀야 한다.
 * 이름이 길어도(KT스카이라이프) 줄을 바꾸지 않고 한 줄로 둔다.
 */
.pub-root .ip__cname{
  display:block;font-size:var(--fs-caption);font-weight:var(--fw-m);
  line-height:var(--lh-snug);color:var(--pub-ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.pub-root .ip__opt input:checked + .ip__btn .ip__cname{color:var(--pub-accent);}
.pub-root .ip__opt input:disabled + .ip__btn .ip__cname{color:var(--pub-ink-4);}

/*
 * 고를 수 없을 때만 로고를 흐리게 한다.
 * 고르지 않은 상태에서 흐리게 두면 다섯 통신사가 모두 바래 보여
 * 어느 것이 선택 가능한지 읽히지 않는다.
 */
.pub-root .ip__opt input:disabled + .ip__btn .ip__logo{opacity:.45;}

/* ── TV 등급 ────────────────────────────────────────────────── */
/*
 * 등급 이름 아래 채널 수를 한 줄 더 둔다.
 * 확인된 등급만 숫자이고, 나머지는 '상담원 안내' 다(--ask).
 * 숫자가 아니라는 것이 한눈에 보이도록 글자를 더 흐리게 둔다.
 */
.pub-root .ip__tier{display:block;text-align:center;padding:var(--s2) var(--s2);}
.pub-root .ip__tier-n{display:block;}
.pub-root .ip__tier-c{display:block;margin-top:2px;
  font-size:var(--fs-caption);font-weight:var(--fw-r);color:var(--pub-ink-3);
  white-space:nowrap;}
.pub-root .ip__tier-c--ask{color:var(--pub-ink-4);}
/* 고른 등급은 본문 색까지 또렷하게. 흐린 보조색이 강조 안에서 떠 보인다. */
.pub-root .ip__opt input:checked + .ip__btn .ip__tier-c{color:var(--pub-accent);}
.pub-root .ip__opt input:disabled + .ip__btn .ip__tier-c{color:var(--pub-ink-4);}

/* ── 속도 카드 ──────────────────────────────────────────────── */
.pub-root .ip__opt--speed .ip__btn{
  display:block;text-align:left;padding:var(--s3);min-height:0;
}
.pub-root .ip__speed{display:block;}
.pub-root .ip__speed-n{display:block;font-size:var(--fs-title);font-weight:var(--fw-b);
  line-height:var(--lh-tight);}
.pub-root .ip__speed-u{display:inline;margin-left:2px;font-size:var(--fs-caption);
  font-weight:var(--fw-m);font-style:normal;}
.pub-root .ip__speed-d{display:block;margin-top:2px;color:var(--pub-ink-3);
  font-size:var(--fs-caption);font-weight:var(--fw-r);}
/*
 * 속도 카드의 요금.
 *
 * 같은 금액이 요금 카드에도 크게 찍혀 둘 중 어느 것이 «내 요금» 인지 흐렸다.
 * 여기 숫자의 쓸모는 100M·500M·1G 를 눈으로 견주는 것이다.
 * 그래서 보조 글자로 내리고, 요금 카드의 숫자를 확실한 주인공으로 둔다.
 * 지우지는 않는다. 지우면 세 속도의 가격 차를 알 수 없다.
 */
.pub-root .ip__speed-p{display:block;margin-top:var(--s2);
  font-size:var(--fs-label);font-weight:var(--fw-m);color:var(--pub-ink-2);}
.pub-root .ip__opt--speed input:checked + .ip__btn .ip__speed-p{
  color:var(--pub-accent);font-weight:var(--fw-sb);}
.pub-root .ip__opt--speed input:checked + .ip__btn .ip__speed-d{color:var(--pub-ink-2);}
.pub-root .ip__opt--speed input:disabled + .ip__btn .ip__speed-d,
.pub-root .ip__opt--speed input:disabled + .ip__btn .ip__speed-p{color:var(--pub-ink-4);}

.pub-root .ip__hint{margin:var(--s2) 0 0;color:var(--pub-ink-3);font-size:var(--fs-caption);}

/* ── 요금 카드 ──────────────────────────────────────────────── */
.pub-root .ip__card{
  border:1px solid var(--pub-line);border-radius:var(--r2);
  background:var(--pub-bg);padding:var(--s5);box-shadow:var(--sh);
}
.pub-root .ip__card-h{margin:0 0 var(--s3);font-size:var(--fs-subtitle);
  font-weight:var(--fw-sb);line-height:var(--lh-snug);word-break:keep-all;}

/*
 * 위아래 구분선을 두지 않는다(사용자 결정).
 * 금액 자체가 충분히 크고 굵어 선 없이도 영역이 읽힌다.
 * 선을 빼면서 위아래 여백으로 간격을 유지한다 — 선만 지우면 윗줄과 붙는다.
 */
.pub-root .ip__fee{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s3);padding:var(--s2) 0 var(--s3);}
.pub-root .ip__fee-l{color:var(--pub-ink-2);font-size:var(--fs-body);}
/*
 * 이 숫자가 화면의 주인공이다.
 * 속도 카드에도 같은 금액이 있으므로, 크기로 «고른 요금» 임을 분명히 한다.
 */
.pub-root .ip__fee-v{font-size:var(--fs-price-hero);font-weight:var(--fw-eb);
  line-height:var(--lh-tight);white-space:nowrap;}

.pub-root .ip__fee-n{margin:var(--s2) 0 0;color:var(--pub-ink-3);font-size:var(--fs-caption);}

/* ── 상담 진입 ──────────────────────────────────────────────── */
/*
 * min-width:0 을 반드시 둔다.
 *
 * grid·flex 의 자식은 기본 최소폭이 auto 라 «줄바꿈 없는 글자» 길이만큼
 * 부모를 밀어낸다. 아래 버튼 줄에 그것이 없어 카드가 320px 화면에서
 * 337px 로 불어나 페이지에 가로 스크롤이 생겼다(실측). 흔히 놓치는 자리다.
 */
.pub-root .ip__act{display:grid;gap:var(--s2);margin-top:var(--s4);min-width:0;}
.pub-root .ip__act > *{min-width:0;}
/*
 * 상담 신청이 한 줄 전체, 카카오·전화가 아래 한 줄을 반씩 나눈다.
 * 셋을 세로로 쌓으면 카드가 길어져 PC sticky 패널이 화면 밖으로 밀린다.
 *
 * 좁아서 둘이 나란히 못 들어가면 글자를 자르지 않고 **줄을 바꾼다**.
 * «카카오톡 상…» 처럼 잘린 버튼을 남기지 않는다.
 * 모바일에는 공통 하단바에도 같은 진입이 있어 세로로 쌓여도 손해가 없다.
 *
 * 하나만 있으면 그 줄 전체를 쓰고, 둘 다 없으면 줄이 접힌다.
 */
.pub-root .ip__act-row{display:flex;flex-wrap:wrap;gap:var(--s2);min-width:0;}
.pub-root .ip__act-row > *{min-width:0;flex:1 1 10rem;}
.pub-root .ip__act-row:empty{display:none;}
.pub-root .ip__kakao,
.pub-root .ip__tel{display:inline-flex;align-items:center;justify-content:center;
  gap:var(--s2);text-decoration:none;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
/* 카카오 브랜드색은 제품 상세(.sum__kakao)와 같은 값을 쓴다. */
.pub-root .ip__kakao{background:#FEE500;color:#181600;box-shadow:none;}
.pub-root .ip__kakao:hover{filter:brightness(.95);text-decoration:none;}

/*
 * 전화 버튼은 PC 에서 감춘다(사용자 결정).
 *
 * tel: 링크는 PC 에서 눌러도 전화가 걸리지 않는다. 누를 수 없는 버튼을 남기지 않는다.
 * 번호가 사라지는 것은 아니다 — PC 하단 빠른 상담바와 푸터에 **글자로** 그대로 있다.
 * 모바일 공통 하단바의 전화 버튼(.rm-fbtn--call)도 같은 1024px 에서 꺼진다. 기준을 맞춘다.
 */
@media (min-width:1024px){
  .pub-root .ip__tel{display:none;}
}

.pub-root .ip__card-f{margin:var(--s3) 0 0;color:var(--pub-ink-3);
  font-size:var(--fs-caption);line-height:var(--lh-body);}

@media (min-width:1024px){
  .pub-root .ip__panel{position:sticky;top:var(--s12);}
}

/* ── 모바일 하단 바 (PUBLIC-DOCK-UNIFY-001) ──────────────────── */
/*
 * PC 는 요금 카드가 sticky 라 늘 보인다. 모바일은 카드가 한참 아래에 있어
 * 통신사를 바꿔도 금액이 보이지 않았다. 그래서 좁은 화면에서만 띄운다.
 *
 * ── 전에는 어땠나 ────────────────────────────────────────────
 *   금액 한 줄을 공통 하단바(.rm-cbar) **위에 얹어** 두 덩어리로 두었다.
 *   끄는 규칙이 남의 파일(public-counsel-cta.css · KAKAO-CTA 소유)에 있어야 해서
 *   그 파일을 고치는 대신 위로 띄운 것이다.
 *
 *   결과: 경계선과 그림자가 두 번 생기고, 제품 상세의 한 덩어리 바와 모양이 달랐다.
 *   사용자 지적(2026-10-12)으로 통일한다. 00 결정으로 끄는 규칙은 소유자 파일에 둔다
 *   (제품 상세의 [data-pd-page] 선례와 같은 자리 · 같은 방식).
 *
 * ── 모양은 제품 상세(.pd-dock)와 맞춘다 ───────────────────────
 *   그 클래스를 그대로 쓰지 않는다. public-product.css 는 이 화면에 로드되지 않고,
 *   남의 namespace 를 빌려 쓰면 저쪽이 바뀔 때 이쪽이 조용히 따라 바뀐다.
 *   글자 크기·색 같은 공용 조각(.price / .price__per / .price__num)은 그대로 쓴다 —
 *   그것이 두 화면을 같아 보이게 하는 **단일 소스**다.
 *
 * z-index 는 공통바와 같은 --z-sticky 다. 상담 모달보다 반드시 낮아야 한다.
 */
.pub-root .ip__bar{display:none;}
.pub-root .ip__bar-space{display:none;}

@media (max-width:1023px){
  .pub-root .ip__bar{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);
    background:var(--pub-bg);
    box-shadow:0 -4px 18px rgba(30,23,35,.08);
    /* 아이폰 홈 인디케이터 영역만큼 여백을 더한다.
       없으면 버튼이 화면 맨 끝선에 붙어 누르기 어렵다. */
    padding:var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom));
  }

  .pub-root .ip__bar-price{max-width:520px;margin:0 auto var(--s3);}
  .pub-root .ip__bar-row{display:flex;align-items:baseline;
    justify-content:space-between;gap:var(--s3);}
  /*
   * 라벨은 길면 줄인다(통신사 + TV 등급 + 속도까지 들어간다).
   * 금액은 줄이지 않는다 — 손님이 보고 누르는 값이다.
   */
  .pub-root .ip__bar-lb{flex:0 1 auto;min-width:0;
    font-size:var(--fs-caption);color:var(--pub-ink-3);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pub-root .ip__bar-row .price{flex:0 0 auto;white-space:nowrap;}

  .pub-root .ip__bar-act{display:flex;align-items:stretch;gap:var(--s2);
    width:100%;max-width:520px;margin:0 auto;}

  /* 바가 가린 만큼 문서 끝에 자리를 비워 둔다. 높이는 --rm-dock-h 한 곳에서 온다. */
  .pub-root .ip__bar-space{display:block;height:var(--rm-dock-h);}

  /*
   * 메뉴·필터 시트가 열리면 숨긴다.
   * 고정 요소가 자기 stacking context 를 만들어 패널 위로 올라온다.
   * 공통 하단바도 같은 이유로 같은 표식을 본다.
   */
  .pub-root[data-menu-open] .ip__bar,
  .pub-root[data-sheet-open] .ip__bar{display:none;}
}

/* ── 유의사항 ───────────────────────────────────────────────── */
/*
 * 읽히게 고친다.
 *   13px + 줄간격 1.65 + 항목 간격 4px 이라 여섯 줄이 한 덩어리로 뭉쳤다.
 *   글자를 15px 로, 항목 간격을 12px 로, 글머리는 흐린 점으로 바꾼다.
 */
.pub-root .ip__notes{margin-top:var(--s8);padding-top:var(--s5);
  border-top:1px solid var(--pub-line-2);max-width:var(--content-max);}
.pub-root .ip__notes-h{margin:0 0 var(--s3);color:var(--pub-ink-2);}
/*
 * 글머리 점을 되살린다.
 *
 * public-base.css 가 .pub-root ul 전체에 list-style:none 을 건다(의도된 리셋).
 * 그래서 이 목록도 점 없이 들여쓰기만 된 글덩어리였다.
 * 리셋을 건드리지 않고 **이 목록 하나만** 되살린다. 다른 목록에 영향이 없다.
 */
.pub-root .ip__notes-l{margin:0;padding-left:1.2em;display:grid;gap:var(--s3);
  list-style:disc outside;}
.pub-root .ip__notes-l li{color:var(--pub-ink-2);font-size:var(--fs-label);
  line-height:1.7;word-break:keep-all;}
.pub-root .ip__notes-l li::marker{color:var(--pub-ink-4);}
.pub-root .ip__notes-f{margin:var(--s4) 0 0;color:var(--pub-ink-3);
  font-size:var(--fs-caption);line-height:var(--lh-body);word-break:keep-all;}
.pub-root .ip__notes-f + .ip__notes-f{margin-top:var(--s2);}