@charset "utf-8";

/* ===========================================================================
   plans.css — 요금제 검색·비교 페이지 전용 스타일
   - 미니멀 스타일 디자인 시스템을 이야기모바일 토큰에 매핑
   - .plans-page 네임스페이스로 online.css와 격리
   - 헤더/푸터는 common/top.php·bottom.php·header.php 사용 (자체 헤더/푸터 미사용)

   구성
   [0]  헤더 햄버거 사이드 메뉴 격리   — all_menu_con
   [1]  디자인 토큰 매핑              — 블루·bg-*·text-* 별칭
   [2]  베이스                       — reset, container
   [3]  히어로 섹션                  — hero-section, hero-title
   [4]  검색 영역                    — search-bar, kw-popular(드롭다운)
   [5]  빠른 칩                      — quick-chips, quick-chip, qc-toggle(펼침/접힘)
   [6]  모달 — 공통 .modal 셸(basic/common.css). 여기엔 컨텐츠/모디파이어만(cmp-sheet, filter-sheet, sheet-*)
   [7]  필터 모달 내부               — filter-section, select-chip, btn-apply
   [9]  리스트 헤더                  — list-header, custom-select(통신사·정렬)
   [11] 통신사 태그 색상            — tag.skt/kt/lgt/combo (요금제 카드·비교모달 공용)
   [13] 상세필터 모달 컨텐츠         — filter-modal/filter-sheet(.modal 셸) + sheet-* filter-nav/sections
   [14] 통신망/속도 셀렉트 리스트    — select-list, term-pills
   [15] 슬라이더(데이터/요금)        — slider-box, ptrack, pknob, gb-*
   [16] QoS 카드                     — qosGrid, qcard
   [17] 할인기간 칩                  — term-pills
   [19] QoS 도움말 말풍선            — qos-help, qos-bubble
   [21] 비교 바 / 비교 모달          — cmp-bar, gc(가로 섹션 밴드 비교, 전 해상도 공통)
   [22] 요금제 카드                  — #planListContainer .plan-card, plan-col, plan-benefits
   [23] RESPONSIVE OVERRIDES         — 플립 ≤360 / 모바일 ≤679 / 폴드 680~767 / 태블릿 768~1023 / PC ≥1024
=========================================================================== */

/* =========================================
   [0] 헤더 햄버거 사이드 메뉴 격리
   - .all_menu_con: 평소 숨김, .on 클래스 있을 때만 노출 (햄버거 클릭 트리거)
   - new_header.css 의 기본 룰이 무력화되는 케이스 대비 강제 격리
========================================= */
.plans-page .all_menu_con {
  display: none !important;
}
.plans-page .all_menu_con.on {
  display: block !important;
}

/* =========================================
   [2] 베이스
========================================= */
.plans-page * {
  box-sizing: border-box;
  font-family:
    "Pretendard",
    -apple-system,
    BlinkMacSystemFont,
    "Apple SD Gothic Neo",
    "Segoe UI",
    Roboto,
    sans-serif;
}
.plans-page {
  background-color: var(--slate-100);
  color: var(--text-muted);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}
/* 텍스트형 베어 버튼 리셋 — 디자인 시스템 버튼은 제외.
   :where()로 제외해 명시도를 (0,1,1)로 유지(원래와 동일) → .pd-gift 등 2클래스 배경을 덮지 않음
   .btn(legacy) + .v2-btn(공통 컴포넌트) + .v2-state-sub(상태 보조 액션) 모두 제외 */
.plans-page button:not(:where(.btn, .v2-btn, .v2-state-sub)) {
  cursor: pointer;
  border: none;
  background: none;
  outline: none;
  font-family: inherit;
}
.plans-page ul,
.plans-page li {
  list-style: none;
}
.plans-page img {
  display: block;
}

/* .container → 공통 .v2-container (basic/common.css)로 이동 */

/* =========================================
   [3] 히어로 섹션 + 탭
========================================= */
/* 가로 넘침 차단 — 카드의 .qos-bubble(속도 도움말 말풍선)이 숨김 상태로도 절대배치로 뷰포트 밖까지 뻗어
   모바일에서 페이지 가로 스크롤(우측 빈 공백)을 만들던 문제 해결. clip은 세로(말풍선이 위로 뜸)·고정요소엔 영향 없음 */
.plans-page #wrapper {
  overflow-x: clip;
}

/* hero = 검색·필터 패널 — 기준축(개통)의 상단 블루 그라데이션 결을 옅게 이어 통일성 유지.
   상단 옅은 블루 → 흰색으로 풀려 본문(회색)과 경계로 역할 분리 */
.plans-page .hero-section {
  padding: 2.25rem 0 0.875rem; /* 하단 여백 압축(1.5rem→0.875rem) — 리스트와의 간격은 margin-bottom이 보강 */
  margin-bottom: 1rem;
  background: var(--color-white);
  border-bottom: 1px solid var(--border-light);
  box-shadow: 0 6px 16px -12px rgba(16, 24, 40, 0.12);
}
.plans-page .filter-open {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 2.875rem;
  padding: 0 1.0625rem;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 4px 16px -6px rgba(16, 24, 40, 0.1);
  transition:
    border-color 0.15s,
    color 0.15s,
    background 0.15s;
}
.plans-page .filter-open .v2-icon {
  width: 1.0625rem;
  height: 1.0625rem;
  flex-shrink: 0;
}
.plans-page .filter-open:hover {
  border-color: var(--text-tertiary);
}
.plans-page .filter-open.has-filter {
  color: var(--color-main);
  border-color: var(--color-main);
  background: var(--blue-soft);
}
.plans-page .filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-main);
  color: var(--color-white);
  font-size: 0.625rem;
  font-weight: 800;
  line-height: 1;
}

/* 상세필터 → 해시태그 칩 줄 첫 항목 (메인 블루 채움, 칩과 구분). 펼침=칩과 함께 wrap / 한 줄=sticky 왼쪽 고정 */
.plans-page .qc-wrap .filter-open {
  flex-shrink: 0;
  height: auto;
  padding: 0.4375rem 0.8125rem;
  gap: 0.3125rem;
  background: var(--color-main);
  border-color: var(--color-main);
  color: var(--color-white);
  box-shadow: 0 4px 12px -4px rgba(2, 103, 255, 0.45);
}
.plans-page .qc-wrap .filter-open:hover {
  background: var(--color-main-hover);
  border-color: var(--color-main-hover);
}
.plans-page .qc-wrap .filter-open .v2-icon {
  width: 0.9375rem;
  height: 0.9375rem;
  color: var(--color-white);
}
.plans-page .qc-wrap .filter-open.has-filter {
  background: var(--color-main);
  border-color: var(--color-main);
  color: var(--color-white);
}
.plans-page .qc-wrap .filter-open .filter-count {
  background: var(--color-white);
  color: var(--color-main);
}
/* 한 줄(가로 스크롤) 모드: 필터는 왼쪽 sticky 고정, 칩만 슬라이드 */
.plans-page .qc-wrap.one-line .quick-chips .filter-open {
  position: sticky;
  left: 0;
  z-index: 2;
}

.plans-page .search-bar {
  position: relative;
  flex: 1;
  min-width: 0;
  max-width: 30rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.875rem;
  padding: 0 0.375rem 0 1.125rem;
  background: var(--color-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 16px -6px rgba(16, 24, 40, 0.1);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.plans-page .search-bar:focus-within {
  border-color: var(--color-main);
  box-shadow: 0 0 0 3px rgba(2, 103, 255, 0.12);
}
.plans-page .search-bar .keyword-input {
  flex: 1;
  min-width: 0;
  font-size: 1rem;   /* 16px — 이 미만이면 iOS Safari가 포커스 시 페이지를 확대(auto-zoom)한다. input 확대 방지의 하한 */
  font-weight: 700;
}
/* 검색 버튼 — 입력칸 우측, 솔리드 메인블루 원형(단발 CTA). Enter·클릭으로 검색 */
.plans-page .search-ic {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;          /* 메인 블루 제거 — 검색은 보조 기능, 블루는 핵심 액션에만 */
  color: var(--text-secondary);     /* 심플한 중립 회색 아이콘 */
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    transform 0.12s;
}
.plans-page .search-ic .v2-icon {
  width: 1.0625rem;
  height: 1.0625rem;
}
.plans-page .search-ic:hover {
  background: var(--gray-150);
  color: var(--text-main);
}
.plans-page .search-ic:active {
  transform: scale(0.95);
}

/* === [C] 첫 진입=검색폼 노출(원복) / 스크롤 컴팩트=검색 접힘([필터][해시태그][돋보기]) === */
.plans-page .hero-bar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.3rem;
}
/* 첫 진입: 검색폼이 위(자기 줄), 칩행이 아래 */
.plans-page .hero-bar .search-bar {
  order: -1;
  align-self: flex-start;
  max-width: 30rem;
  width: 100%;
}
/* 스마트 헤더 — 컴팩트(is-stuck): 기본은 해시태그만(검색 숨김, 아래로 스크롤).
   위로 스크롤(search-reveal) 시 검색 입력이 칩 위로 노출(2줄). 칩 줄은 항상 유지 */
.plans-page .hero-section.is-stuck .search-bar {
  display: none;
}
.plans-page .hero-section.is-stuck.search-reveal .search-bar {
  display: flex;
  /* 폭은 초기 상태와 동일(.hero-bar .search-bar = 30rem, ≤1023은 미디어에서 full) — PC에서 과도하게 길어지지 않게 */
}
/* 닫기(✕) — 검색 입력 우측 */
/* 지우기(✕) — 기본 숨김, 입력값 있을 때만(has-text) 회색 원으로 노출 */
.plans-page .search-close {
  flex-shrink: 0;
  display: none;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--slate-300);
  color: var(--color-white);
  cursor: pointer;
  transition: background 0.15s;
}
.plans-page .search-bar.has-text .search-close {
  display: inline-flex;
}
.plans-page .search-close:hover {
  background: var(--text-tertiary);
}
.plans-page .search-close .v2-icon {
  width: 0.8125rem;
  height: 0.8125rem;
}

/* 모바일 최적화 — 검색바(아이콘+입력) / 필터·토글은 아이콘 원형으로 높이 통일 */
@media (max-width: 679px) {
  .plans-page .search-bar {
    height: 2.75rem;
    padding: 0 0.3125rem 0 1rem;
  }
  .plans-page .search-bar .keyword-input {
    font-size: 1rem;   /* 16px 유지 — 이 미만이면 iOS Safari가 포커스 시 페이지를 확대(auto-zoom). 모바일에서도 하한 지킴 */
  }
  /* 모바일·플립: 필터 = 아이콘만(라벨 숨김) → 좁은 화면에서 칩 노출 폭 확보. 블루는 유지(핵심 액션) */
  .plans-page .qc-wrap .filter-open {
    padding: 0.4375rem 0.5625rem;
    gap: 0.25rem;
  }
  .plans-page .qc-wrap .filter-open > span:not(.filter-count) {
    display: none;
  }
}
@media (max-width: 360px) {
  .plans-page .search-bar {
    padding: 0 0.25rem 0 0.75rem;
  }
}

.plans-page .keyword-input {
  border: none;
  background: transparent;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-main);
  width: 100%;
  outline: none;
  padding: 0;
  font-family: inherit;
  letter-spacing: -0.01em;
}
.plans-page .keyword-input::placeholder {
  color: var(--slate-400);
  font-weight: 500;
  font-size: 0.9375rem;
}
/* 검색 펼침 시 패널 — 인기 요금제 (PC=2열 / 모바일=단일 컬럼) */
.plans-page .kw-popular {
  display: none;
  width: 100%;
  background: var(--color-white);
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.05),
    0 22px 48px -16px rgba(16, 24, 40, 0.28);
  overflow: hidden;
}
.plans-page .searching .kw-popular {
  display: block;
  animation: kwPopIn 0.18s ease;
}
@keyframes kwPopIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes livePulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
/* 섹션 공통 헤더 */
.plans-page .kw-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}
.plans-page .kw-sec-title {
  font-size: 0.78125rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

/* 인기 요금제 1~10위 (PC=좌열 1~5 / 우열 6~10, column-major) */
.plans-page .kw-pop-list {
  padding: 0.875rem 0.9375rem 0.5rem;
}
.plans-page .kw-live {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.625rem;
  font-weight: 800;
  color: var(--color-red);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.plans-page .kw-live .live-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--color-red);
  animation: livePulse 1.4s ease-in-out infinite;
}
/* 세로 우선: 좌열 1~5위 / 우열 6~10위 (column-major) */
.plans-page .kw-rank-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  column-gap: 0.625rem;
}
.plans-page .pop-rank {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.375rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background 0.12s;
}
.plans-page .pop-rank:hover {
  background: var(--gray-50);
}
.plans-page .pop-num {
  flex-shrink: 0;
  width: 1.25rem;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 900;
  color: var(--slate-400);
  font-variant-numeric: tabular-nums;
}
.plans-page .pop-num.top {
  color: var(--color-main);
}
.plans-page .pop-name {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
/* 모바일 — 단일 컬럼(좁은 2열에서 이름 잘림 방지) + 터치 영역 확대.
   리스트는 화면 넘침 방지를 위해 최대 60vh로 제한하고 내부 스크롤(헤더·닫기는 고정) */
@media (max-width: 679px) {
  .plans-page .kw-rank-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .plans-page .pop-rank {
    padding: 0.5625rem 0.375rem;
  }
}

/* ③ 푸터 — 닫기 (우측) */
.plans-page .kw-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.625rem 0.9375rem;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.plans-page .kw-close {
  font-family: inherit;
  font-size: 0.71875rem;
  font-weight: 700;
  color: var(--text-tertiary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
  transition: color 0.14s;
}
.plans-page .kw-close:hover {
  color: var(--text-secondary);
}
.plans-page .kw-close .v2-icon {
  width: 0.8125rem;
  height: 0.8125rem;
}

/* =========================================
   [5] 빠른 칩 (가로 스크롤 + 화살표)
========================================= */
.plans-page .quick-chips {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.plans-page .quick-chips.qc-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}
.plans-page .quick-chips.qc-dragging .quick-chip {
  pointer-events: none;
}
.plans-page .quick-chips::-webkit-scrollbar {
  display: none;
}
.plans-page .quick-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  background-color: var(--color-white);
  border: 1px solid var(--border-light);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  transition: all 0.2s;
  cursor: pointer;
  white-space: nowrap;
}
/* 해시태그 칩 아이콘 — 이모지 대신 이미지. 관리자/DB가 data-tag별 src 주입(현재는 예시 플레이스홀더) */
.plans-page .qc-ico {
  width: 1.375rem;
  height: 1.375rem;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: var(--radius-pill);
}
.plans-page .quick-chip:hover {
  background-color: var(--gray-100);
}
.plans-page .qc-wrap {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.plans-page .qc-wrap .quick-chips {
  margin-bottom: 0;
}
.plans-page .qc-scroll {
  flex: 1;
  min-width: 0;
}
/* 한 줄(가로 슬라이드) / 펼침(wrap) — 해상도별 기본값은 JS가 설정 (PC=펼침 / 그 외=한 줄) */
.plans-page .qc-wrap.one-line .quick-chips {
  flex-wrap: nowrap;
  overflow-x: auto;
  cursor: grab;
}
.plans-page .qc-wrap.expanded .quick-chips {
  flex-wrap: wrap;
}
/* 한 줄=토글을 칩 줄 중앙에(높이 무관·견고) / 펼침=첫 줄 상단(기본 flex-start) */
.plans-page .qc-wrap.one-line {
  align-items: center;
}
/* 펼침 — .quick-chips의 상단 패딩(0.5rem)만큼 토글도 내려 첫 칩 줄과 기준선을 맞춘다.
   (flex-start라 토글만 패딩 없이 위로 붙어 정렬이 틀어지던 문제. 같은 값을 써 패딩이 바뀌어도 함께 따라감) */
.plans-page .qc-wrap:not(.one-line) .qc-toggle {
  margin-top: 0.5rem;
}
/* 칩 펼침 토글 — quick-chips 우측. 배경 없는 아웃라인 원형(그레이 테두리만). 크기는 해상도별(아래 미디어쿼리)로 칩에 맞춤 */
.plans-page .qc-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  padding: 0;
  border: 1px solid var(--border-light);
  border-radius: 50%;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s,
    transform 0.12s;
}
.plans-page .qc-toggle:hover {
  border-color: var(--text-tertiary);
  color: var(--text-secondary);
}
.plans-page .qc-toggle:active {
  transform: scale(0.94);
}
.plans-page .qc-toggle .qc-chev {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform 0.25s;
}
.plans-page .qc-toggle[aria-expanded="true"] .qc-chev {
  transform: rotate(180deg);
}
.plans-page .quick-chip[data-new] {
  position: relative;
  overflow: visible;
}
.plans-page .quick-chip[data-new]::after {
  content: "N";
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  min-width: 12px;
  height: 0.75rem;
  padding: 0 0.125rem;
  border-radius: var(--radius-pill);
  background: var(--color-red);
  color: var(--color-white);
  font-size: 0.46875rem;
  font-weight: 800;
  line-height: 12px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--color-white);
}
.plans-page .quick-chip.active {
  background-color: var(--blue-soft);
  border-color: var(--color-main);
  color: var(--color-main);
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(2, 103, 255, 0.12);
}

/* =========================================
   [6] 모달 / 바텀시트
========================================= */
/* 모달은 공통 .modal 셸(basic/common.css)로 통일 — 비교·필터 모두 .modal/.modal-sheet 사용 */
.plans-page .sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-shrink: 0;
}
.plans-page .sheet-header h2 {
  font-size: 1.375rem;
  font-weight: 900;
  color: var(--text-main);
  letter-spacing: -0.02em;
}
.plans-page .sheet-body {
  flex: 1;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  margin-bottom: 1.5rem;
}
.plans-page .sheet-body::-webkit-scrollbar {
  display: none;
}

/* 인라인 토스트 (alert 대체) */
.plans-toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%) translateY(1rem);
  background: var(--slate-900);
  color: var(--color-white);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(11, 15, 26, 0.25);
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s,
    transform 0.25s;
}
.plans-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =========================================
   [7] 필터 모달 내부
========================================= */
.plans-page .filter-section {
  margin-bottom: 2rem;
}
.plans-page .filter-section:last-child {
  margin-bottom: 0;
}
.plans-page .filter-section h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 0.75rem;
  display: flex;
  justify-content: space-between;
  letter-spacing: -0.01em;
}
.plans-page .filter-section h3 span {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-main);
}
.plans-page .filter-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.625rem;
}
.plans-page .select-chip {
  background-color: var(--gray-15);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 1rem;
  text-align: left;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.plans-page .select-chip strong {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-main);
}
.plans-page .select-chip span {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-tertiary);
}
.plans-page .select-chip.active {
  background-color: var(--blue-soft);
  border-color: var(--color-main);
}
.plans-page .select-chip.active strong,
.plans-page .select-chip.active span {
  color: var(--color-main);
}

.plans-page .sheet-footer {
  flex-shrink: 0;
}
.plans-page .btn-apply {
  width: 100%;
  color: var(--color-main);
  border: 1px solid var(--color-main);
  font-size: 1rem;
  font-weight: 800;
  padding: 1.0625rem;
  border-radius: var(--radius-md);
  transition: background 0.2s;
}
.plans-page .btn-apply:active {
  transform: scale(0.99);
}
.plans-page .btn-apply.cta-empty {
  background: var(--gray-200) !important;
  color: var(--text-tertiary) !important;
  box-shadow: none !important;
  cursor: default;
}
/* 필터 적용 CTA 라벨 — 상태 구분 없이 버튼 전체 동일 스케일. 화면 폭 단계로 축소(빈 결과 '조건에 맞는 요금제가 없어요'가 좁은 버튼서 넘치지 않게) */
@media (max-width: 1023px) { .plans-page .cta-text { font-size: 0.9375rem; } }   /* 폴드 15px */
@media (max-width: 679px)  { .plans-page .cta-text { font-size: 0.875rem; } }    /* 모바일 14px */
@media (max-width: 360px)  { .plans-page .cta-text { font-size: 0.8125rem; } }   /* 플립 13px */

/* =========================================
   [9] 리스트 헤더
========================================= */
.plans-page .list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.875rem;
}
.plans-page .list-header p {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.plans-page .list-header strong {
  color: var(--color-black);
  font-weight: 800;
}
/* footer 앞 하단 호흡 — 기준축 main-wrapper 끝맺음 리듬에 맞춰 확보(도구 페이지+스티키 비교바라 6rem→4rem 절충) */
.plans-page .plan-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding-bottom: 4rem;
}

/* 커스텀 셀렉트(텍스트형) — 통신사·정렬. 네이티브 select 대비 테두리 제거로 공간 절약 */
.plans-page .list-header .lh-right {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* 통신사·정렬 패널 모두 공통 기본(트리거 아래 좌측 정렬) 사용 → 동일 포지션으로 통일 */
/* 단, 모바일(≤679)은 폭이 좁아 좌측 정렬 시 우측 끝(정렬) 패널이 화면 밖으로 넘침 → 둘 다 우측 정렬로 통일 */
@media (max-width: 679px) {
  .plans-page .list-header .cs-panel {
    left: auto;
    right: 0;
  }
}
/* cs-chev를 마스크 아이콘(.v2-icon)으로 전환 — .v2-icon 기본 1.5rem를 페이지 스코프로 재정의(색·회전은 common .cs-chev 유지) */
.plans-page .cs-chev {
  width: 0.875rem;
  height: 0.875rem;
}

/* 적용된 필터 요약 (활성 필터 칩 + 개별 해제) */
/* 적용된 필터 — 결과존 맨 위(총 N개 바로 위). '걸린 조건=연블루 채움 칩'으로 입력존 퀵칩과 구분 */
/* 적용된 필터 = '결과 요약' — 배경 박스 없이 흰 보더 칩(블루빛 slate-100 위에 직접 떠 또렷).
   카테고리(연)·값(진) 위계로 선택값이 먼저 읽힘. 칩=상태 / 초기화=액션 */
.plans-page .applied-filters {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4375rem;
  margin-bottom: 0.875rem;
}
.plans-page .applied-filters.show {
  display: flex;
}
.plans-page .af-chip {   /* 흰 보더 칩(블루빛 배경 위에서 또렷) + 카테고리 연·값 진 위계 */
  display: inline-flex;
  align-items: center;
  gap: 0.0625rem;
  height: 2.125rem;
  padding: 0 0.3125rem 0 0.75rem;
  background: var(--color-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
}
.plans-page .af-chip .af-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1875rem;
  height: 1.1875rem;
  padding: 0;
  border: none;
  background: none;
  border-radius: 50%;
  color: var(--slate-400);
  cursor: pointer;
  transition:
    color 0.15s,
    background 0.15s;
}
.plans-page .af-chip .af-x .v2-icon {
  width: 0.75rem;
  height: 0.75rem;
}
.plans-page .af-chip .af-x:hover {
  color: var(--text-secondary);
  background: var(--gray-100);
}
/* 초기화 — 우측 끝, 흰색 아웃라인 pill(배경에 안 묻힘) */
.plans-page .af-reset {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 2.125rem;
  padding: 0 0.8125rem;
  background: var(--color-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 0.78125rem;
  font-weight: 800;
  color: var(--text-muted);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.plans-page .af-reset .v2-icon {
  width: 0.8125rem;
  height: 0.8125rem;
}
.plans-page .af-reset:hover {
  border-color: var(--text-tertiary);
  color: var(--text-secondary);
}

/* 폴드·모바일·플립(≤1023) — 적용된 필터 바: 줄바꿈 대신 가로 스크롤(높이 절약) + 초기화는 우측 고정 */
@media (max-width: 1023px) {
  .plans-page .applied-filters.show {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;               /* 가로 스크롤 시 상하 흔들림 방지(overflow-x:auto의 암묵적 overflow-y:auto 차단) */
    overscroll-behavior-x: contain;   /* 페이지로 스크롤 전파 방지 */
    touch-action: pan-x;              /* 터치 제스처 가로 팬 고정 → 세로 움직임 방지 */
    scrollbar-width: none;
  }
  .plans-page .applied-filters::-webkit-scrollbar {
    display: none;
  }
  .plans-page .af-reset,
  .plans-page .af-chip {
    flex-shrink: 0;
  }
  /* 초기화 — 가로 스크롤 행의 우측에 고정. 칩이 많아도 스크롤 없이 항상 누를 수 있게(마지막 자식이라 끝까지 밀리던 문제) */
  .plans-page .applied-filters.show .af-reset {
    position: sticky;
    right: 0;
    z-index: 2;
    margin-left: auto;   /* 칩이 적어 스크롤이 없을 땐 auto가 우측으로 밂 */
  }
  /* 뒤로 지나가는 칩이 버튼 좌측에 비쳐 보이지 않게 — 페이지 배경(slate-100)으로 페이드 가림막 */
  .plans-page .applied-filters.show .af-reset::before {
    content: "";
    position: absolute;
    top: -0.25rem;
    bottom: -0.25rem;
    right: -0.125rem;
    left: -1.25rem;
    z-index: -1;
    background: linear-gradient(90deg, transparent, var(--slate-100) 45%);
    pointer-events: none;
  }
}

/* 결과 상태 — 빈 / 에러 / 로딩 (평소 숨김, setListState로 전환) */
.plans-page .list-hidden {
  display: none !important;
}
.plans-page .list-state {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3.25rem 1.5rem;
}
.plans-page .list-state.show {
  display: flex;
}
.plans-page .state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--color-main);
  margin-bottom: 1rem;
}
.plans-page .state-icon .v2-icon {
  width: 1.75rem;
  height: 1.75rem;
}
.plans-page .state-icon-warn {
  background: var(--red-50);
  color: var(--color-red);
}
.plans-page .state-title {
  font-size: 1.0625rem;
  font-weight: 900;
  color: var(--text-main);
  letter-spacing: -0.02em;
}
.plans-page .state-sub {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-top: 0.375rem;
  line-height: 1.5;
}
.plans-page .state-btn {
  margin-top: 1.125rem;
  height: 2.625rem;
  padding: 0 1.375rem;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-main);
  color: var(--color-white);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s;
}
.plans-page .state-btn:hover {
  background: var(--color-main-hover);
}
/* 로딩 스켈레톤 — 실제 카드 골격을 흉내(레이아웃 점프 방지) */
.plans-page .list-skeleton {
  display: none;
  flex-direction: column;
  gap: 0.875rem;
  padding-bottom: 4rem;   /* 요금제 리스트(.plan-list)와 동일 — 로딩 중에도 푸터에 붙지 않게 */
}
.plans-page .list-skeleton.show {
  display: flex;
}
.plans-page .skel-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}
.plans-page .skel-line,
.plans-page .skel-bar,
.plans-page .skel-pill,
.plans-page .skel-cta {
  background: linear-gradient(
    90deg,
    var(--gray-100) 25%,
    var(--gray-200) 37%,
    var(--gray-100) 63%
  );
  background-size: 400% 100%;
  border-radius: var(--radius-sm);
  animation: skelShimmer 1.4s ease infinite;
}
.plans-page .skel-line {
  height: 0.875rem;
  width: 70%;
}
.plans-page .skel-line-lg {
  height: 1.25rem;
  width: 45%;
}
.plans-page .skel-bar {
  height: 2.5rem;
  width: 100%;
  border-radius: var(--radius-md);
}
.plans-page .skel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.plans-page .skel-pill {
  height: 1.5rem;
  width: 5rem;
  border-radius: var(--radius-pill);
}
.plans-page .skel-cta {
  height: 2.25rem;
  width: 7rem;
  border-radius: var(--radius-md);
}
@keyframes skelShimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

/* =========================================
   [11] 통신사 태그 색상 (요금제 카드 · 비교 모달 공용)
========================================= */
.plans-page .tag {
  padding: 0.25rem 0.5625rem;
  border-radius: var(--radius-xs);
  font-size: 0.75rem;        /* 12px — 11px는 굵은 한글이 뭉개져 가독성 저하 */
  font-weight: 600;          /* 600 — 작은 한글 배지 선명도(초굵기서 획 붙음 방지) */
  letter-spacing: 0;         /* 음수 자간 제거(작은 한글 선명도 확보) */
}
.plans-page .tag.skt {
  background-color: var(--color-skt-bg);
  color: var(--color-skt);
}
.plans-page .tag.kt {
  background-color: var(--color-kt-bg);
  color: var(--color-kt);
}
.plans-page .tag.lgt {
  background-color: var(--color-lgt-bg);
  color: var(--color-lgt);
}
.plans-page .tag.combo {
  background-color: var(--color-main-bg);
  color: var(--color-main-active);
}
/* 할인기간 배지 — 핵심 셀링포인트. 파스텔 오렌지 채움으로 블루 계열 태그(combo)와 구분 + 따뜻한 '할인' 신호 */
.plans-page .tag.term {
  background-color: var(--label-orange-bg);
  color: var(--label-orange-text);
}
/* 통신 기술 배지(LTE·5G 공용) — 웜 그레이지(badge-net). 통신사·combo·프로모와 안 겹치는 온화 뉴트럴 (LTE/5G 구분 없이 .tag.net 하나로) */
.plans-page .tag.net {
  background-color: var(--badge-net-bg);
  color: var(--badge-net-text);
}
/* 선불(prepaid) 결제유형 배지 — 통신사 외 배지는 뉴트럴 원칙(색 절제) → 그레이 계열 */
.plans-page .tag.prepaid {
  background-color: var(--gray-200);
  color: var(--text-secondary);
}

/* 커스텀 해시태그 배지 — 관리자가 basic-custom01~05 클래스로 색 지정 (예: <span class="tag basic-custom01">인기</span>).
   01~04: 중립 그레이로 통일(알록달록 방지) — 연그레이 배경 + 진한 회색 텍스트로 저피로·AA 가독성 */
.plans-page .tag.basic-custom01,
.plans-page .tag.basic-custom02,
.plans-page .tag.basic-custom03,
.plans-page .tag.basic-custom04 {
  background-color: var(--gray-200);
  color: var(--text-secondary);
}
.plans-page .tag.basic-custom05 {
  background-color: var(--basic-custom05-bg);
  color: var(--basic-custom05-text);
  border: 1px solid var(--basic-custom05-bd);
}

/* =========================================
   [13] 필터 팝오버 (드롭다운식)
========================================= */
.plans-page .search-dropdown-wrap {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  z-index: 60;
}
/* 폴드 이하(≤1023) — 검색바 전체 폭. position:relative(기본) 유지 → 드롭다운이 검색바(입력) 밑에 붙음 */
@media (max-width: 1023px) {
  .plans-page .hero-bar .search-bar {
    max-width: none;
  }
}
/* (레거시 .filter-pop 드롭다운 규칙 제거 — 상세필터는 공통 .modal 셸 + .filter-sheet 사용) */

/* === 상세필터 모달 = 공통 .modal 셸 + .filter-sheet 모디파이어 (오버레이·박스·애니메이션은 셸이 처리) ===
   바디만 스크롤 + 헤더·푸터 고정 → 모바일에서도 하단 '요금제 보기' 버튼 항상 노출. 폭만 해상도별로 주입 */
.plans-page .filter-sheet {
  overflow: hidden;
  scrollbar-width: none;
}
.plans-page .filter-sheet::-webkit-scrollbar {
  display: none;
}
.plans-page #filterPop .sheet-header {
  position: static;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.plans-page #filterPop .sheet-title {
  font-size: 1.125rem;
  font-weight: 900;
  color: var(--text-main);
  letter-spacing: -0.02em;
}
.plans-page #filterPop .sheet-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-bottom: 1.25rem;
}
.plans-page #filterPop .filter-section {
  margin-bottom: 0;
}
.plans-page #filterPop .filter-section h3 {
  padding-right: 0;
}
.plans-page #filterPop .filter-section[hidden] {
  display: none;
}
.plans-page #filterPop .filter-section:first-child h3 {
  margin-top: 0;
}
.plans-page #filterPop .sheet-footer {
  display: flex;
  align-items: stretch;
  gap: 0.625rem;
  flex-shrink: 0;
}
.plans-page #filterPop .sheet-footer .btn-apply {
  flex: 1;
  width: auto;
}
.plans-page .btn-reset-filter {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0 1.125rem;
  border: 1px solid var(--border-light);
  background: var(--color-white);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.plans-page .btn-reset-filter:hover {
  border-color: var(--text-tertiary);
  color: var(--text-main);
}
.plans-page .btn-reset-filter .v2-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* 🅐 하이브리드 항목 네비 — 좁으면 상단 탭(밑줄), 넓으면 좌측 레일 */
.plans-page #filterPop .filter-nav {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 1.25rem;
}
.plans-page #filterPop .filter-nav::-webkit-scrollbar {
  display: none;
}
.plans-page #filterPop .fnav-btn {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-tertiary);
  background: none;
  border: none;
  padding: 0.5rem 0.625rem 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s;
}
.plans-page #filterPop .fnav-btn.active {
  color: var(--color-main);
}
.plans-page #filterPop .fnav-btn.active::after {
  content: "";
  position: absolute;
  left: 0.375rem;
  right: 0.375rem;
  bottom: -1px;
  height: 0.125rem;
  background: var(--color-main);
  border-radius: var(--radius-pill);
}
/* 선택됨 표시 — 제목 옆 체크 배지(✓). 미선택 시 아예 숨김(display:none), 선택 시에만 표시 */
/* 선택됨 표시 — V4식 작은 도트(•). 그룹에 선택값 있으면(.has) 노출 */
.plans-page #filterPop .fnav-dot {
  display: none;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: var(--color-main);
  margin-left: 0.25rem;
}
.plans-page #filterPop .fnav-btn.has .fnav-dot {
  display: inline-block;
}
.plans-page #filterPop .filter-panels {
  min-width: 0;
}

@media (min-width: 680px) {
  .plans-page .filter-sheet {
    --modal-max: 46rem;
    padding: 1.75rem;
  }
  .plans-page #filterPop .sheet-body {
    display: flex;
    flex-direction: row;
    align-items: stretch;   /* nav가 콘텐츠 높이까지 늘어 우측 구분선이 끊기지 않게 */
    gap: 1.5rem;
  }
  .plans-page #filterPop .filter-nav {
    flex: 0 0 7rem;   /* 폴드는 본문 폭이 빠듯 — 사이드 탭을 좁혀 필터 콘텐츠에 폭을 넘긴다(PC는 아래서 11rem) */
    flex-direction: column;
    gap: 0.25rem;
    overflow: visible;
    border-bottom: none;
    border-right: 1px solid var(--border-light);
    margin-bottom: 0;
    padding-right: 0.75rem;
    position: sticky;
    top: 0;
  }
  .plans-page #filterPop .fnav-btn {
    justify-content: flex-start;
    text-align: left;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-md);
  }
  .plans-page #filterPop .fnav-btn.active {
    background: var(--blue-soft);
  }
  .plans-page #filterPop .fnav-btn.active::after {
    display: none;
  }
  .plans-page #filterPop .fnav-dot {
    margin-left: auto;
  }
  .plans-page #filterPop .filter-panels {
    flex: 1;
  }
}

/* PC(≥1024) — 중앙 모달은 공통 셸이 처리. 필터는 폭·패딩만 주입 */
@media (min-width: 1024px) {
  .plans-page .filter-sheet {
    --modal-max: 54rem;
    padding: 1.875rem 2rem;
    max-height: 84vh;
  }
  .plans-page #filterPop .sheet-header {
    margin-bottom: 1.25rem;
  }
  .plans-page #filterPop .sheet-body {
    gap: 2rem;
  }
  .plans-page #filterPop .filter-nav {
    flex-basis: 11rem;
  }
  .plans-page #filterPop #gbGrid,
  .plans-page #filterPop #qosGrid,
  .plans-page #filterPop #callGrid,
  .plans-page #filterPop #priceGrid,
  .plans-page #filterPop #termGrid {
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)) !important;
  }
}

/* (모달 애니메이션은 공통 .modal 셸의 transform transition으로 통일 — 별도 keyframe 불필요) */

/* =========================================
   [14] 통신망 / 속도 셀렉트 리스트
========================================= */
.plans-page .select-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* =========================================
   [15] 슬라이더 (데이터 / 요금)
========================================= */
.plans-page .slider-box {
  padding: 0.25rem 0.125rem 0.125rem;
}
.plans-page .ptrack {
  position: relative;
  height: 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--gray-200);
  margin: 1rem 0.625rem 0.625rem;
  cursor: pointer;
}
.plans-page .ptrack .pfill {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--color-main);
  border-radius: var(--radius-pill);
}
.plans-page .ptrack .pknob {
  position: absolute;
  top: 50%;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--color-white);
  border: 3px solid var(--color-main);
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 6px rgba(2, 103, 255, 0.18);
  cursor: grab;
  touch-action: none;
  z-index: 2;
}
.plans-page .ptrack .pknob:active {
  cursor: grabbing;
}
.plans-page .ptrack .pknob:focus {
  outline: none;
}
.plans-page .ptrack .pknob:focus-visible {
  outline: none;
  box-shadow:
    0 2px 6px rgba(2, 103, 255, 0.18),
    0 0 0 4px rgba(2, 103, 255, 0.28);
}
.plans-page .pscale {
  display: flex;
  justify-content: space-between;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-tertiary);
  padding: 0 0.125rem;
}
.plans-page .pscale span {
  transition: color 0.15s;
}
.plans-page .pscale span:hover {
  color: var(--color-main);
}

.plans-page .preset-chips {
  display: flex;
  gap: 0.125rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.plans-page .preset-chips .pchip {
  padding: 0.4375rem 0.6875rem;
  font-size: 0.84375rem;
  font-weight: 700;
  color: var(--text-tertiary);
  background: none;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s;
}
.plans-page .preset-chips .pchip:hover {
  color: var(--text-secondary);
}
.plans-page .preset-chips .pchip.on {
  color: var(--color-main);
  font-weight: 800;
}
.plans-page #filterPop .price-pills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 0.875rem;
}
.plans-page .price-pills .pchip {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.8125rem 0.375rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--color-white);
  font-size: 0.84375rem;
  font-weight: 700;
  color: var(--text-tertiary);
}
.plans-page .price-pills .pchip.on {
  border-color: var(--color-main);
  background: var(--blue-soft);
  color: var(--color-main);
  font-weight: 800;
}

/* 슬라이더 툴팁 */
.plans-page #dataTrack .gb-tip {
  position: absolute;
  bottom: calc(100% + 0.625rem);
  transform: translateX(-50%);
  background: var(--color-main);
  color: var(--color-white);
  font-size: 0.6875rem;
  font-weight: 800;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--radius-xs);
  white-space: nowrap;
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 3px 8px rgba(2, 103, 255, 0.18);
}
.plans-page #dataTrack .gb-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-main);
}

/* 데이터 마커 + 프리셋 */
.plans-page #dataTrack {
  margin-bottom: 1.625rem;
}
.plans-page #dataTrack .gb-marker {
  position: absolute;
  top: 50%;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--gray-400);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}
.plans-page #dataTrack .gb-marker i {
  position: absolute;
  top: 0.8125rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.5625rem;
  font-weight: 700;
  font-style: normal;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.plans-page #dataTrack .gb-marker.gb-end i {
  color: var(--text-secondary);
  font-weight: 800;
}
.plans-page #dataTrack .pknob.anim,
.plans-page #dataFill {
  transition:
    left 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    right 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.plans-page .gb-scale {
  position: relative;
  height: 1rem;
}
.plans-page .gb-scale span {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}
.plans-page .gb-scale span:first-child {
  transform: none;
}
.plans-page .gb-scale span:last-child {
  transform: translateX(-100%);
}
.plans-page .gb-ends {
  margin-top: 0.8125rem;
  position: relative;
  height: 0.75rem;
}
.plans-page .gb-ends span {
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--text-tertiary);
}

.plans-page #filterPop .gb-preset {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-top: 0.375rem;
}
.plans-page .gbrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3125rem;
  width: 100%;
  padding: 0.8125rem 0.5rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--color-white);
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: 0.15s;
}
.plans-page .gbrow:hover {
  border-color: var(--blue-border);
}
.plans-page .gbrow.on {
  border-color: var(--color-main) !important;
  background: var(--blue-soft) !important;
}

/* =========================================
   [16] QoS 카드 (속도 그리드)
   → 속도 옵션 카드는 통합 ff-* 필터 시스템(아래 '[최종/하이브리드] 상세필터 옵션 카드')에서 처리.
     구버전 중앙정렬 카드 스타일은 #filterPop 통합 규칙에 완전히 덮여 미사용이라 제거함.
========================================= */

/* =========================================
   [17] 할인기간 칩 (탭식 클린 핀)
========================================= */
/* 할인 기간 — 다른 탭(속도·요금)과 동일한 테두리 버튼형. 다중 선택 유지(toggleMultiChip) */
.plans-page .term-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  grid-template-columns: none !important;
}
.plans-page .term-pills .select-chip {
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border-light);
  background: var(--color-white);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  transition: 0.15s;
}
.plans-page .term-pills .select-chip span {
  display: none;
}
.plans-page .term-pills .select-chip strong {
  font-size: 0.84375rem;
  font-weight: 700;
  color: var(--text-secondary);
}
.plans-page .term-pills .select-chip:hover {
  border-color: var(--blue-border);
}
.plans-page .term-pills .select-chip.active {
  border-color: var(--color-main);
  background: var(--blue-soft);
}
.plans-page .term-pills .select-chip.active strong {
  color: var(--color-main);
  font-weight: 800;
}

/* ============================================================
   [최종/하이브리드] 상세필터 옵션 카드 — 라디오/체크 + 매그니튜드 바 + 배지
   버튼 class·data·onclick·id 유지, 내부만 ff-* 구조로 통일. (#filterPop #grid 2-id로 레거시 오버라이드)
   ============================================================ */
.plans-page #filterPop #gbGrid,
.plans-page #filterPop #qosGrid,
.plans-page #filterPop #callGrid,
.plans-page #filterPop #priceGrid,
.plans-page #filterPop #termGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.5rem;
  margin-top: 0.5rem;
}
/* .term-pills{grid-template-columns:none !important} 무력화 — 통화·기간도 요금처럼 다열로 흐르게 */
.plans-page #filterPop #callGrid,
.plans-page #filterPop #termGrid {
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)) !important;
}
.plans-page #filterPop #gbGrid .gbrow,
.plans-page #filterPop #qosGrid .qcard,
.plans-page #filterPop #priceGrid .pchip,
.plans-page #filterPop #callGrid .select-chip,
.plans-page #filterPop #termGrid .select-chip {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6875rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.75rem 0.875rem;
  background: var(--color-white);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  box-shadow: none;
  transition:
    border-color 0.15s,
    background 0.15s,
    box-shadow 0.15s;
}
.plans-page #filterPop #gbGrid .gbrow:hover,
.plans-page #filterPop #qosGrid .qcard:hover,
.plans-page #filterPop #priceGrid .pchip:hover,
.plans-page #filterPop #callGrid .select-chip:hover,
.plans-page #filterPop #termGrid .select-chip:hover {
  border-color: var(--blue-border);
  background: var(--blue-pale);
}
.plans-page #filterPop #gbGrid .gbrow:focus-visible,
.plans-page #filterPop #qosGrid .qcard:focus-visible,
.plans-page #filterPop #priceGrid .pchip:focus-visible,
.plans-page #filterPop #callGrid .select-chip:focus-visible,
.plans-page #filterPop #termGrid .select-chip:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}
.plans-page #filterPop #gbGrid .gbrow.on,
.plans-page #filterPop #qosGrid .qcard.on,
.plans-page #filterPop #priceGrid .pchip.on,
.plans-page #filterPop #callGrid .select-chip.active,
.plans-page #filterPop #termGrid .select-chip.active {
  border-color: var(--color-main);
  background: var(--blue-soft);
}
/* 컨트롤 (라디오 = 데이터·요금·통화 / 체크 = 속도·기간) */
.plans-page #filterPop .ff-ctrl {
  display: block;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--slate-300);
  background: var(--color-white);
  position: relative;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.plans-page #filterPop #gbGrid .ff-ctrl,
.plans-page #filterPop #priceGrid .ff-ctrl,
.plans-page #filterPop #callGrid .ff-ctrl {
  border-radius: 50%;
}
.plans-page #filterPop #qosGrid .ff-ctrl,
.plans-page #filterPop #termGrid .ff-ctrl {
  border-radius: var(--radius-xs);
}
.plans-page #filterPop #gbGrid .gbrow.on .ff-ctrl,
.plans-page #filterPop #priceGrid .pchip.on .ff-ctrl,
.plans-page #filterPop #callGrid .select-chip.active .ff-ctrl,
.plans-page #filterPop #qosGrid .qcard.on .ff-ctrl,
.plans-page #filterPop #termGrid .select-chip.active .ff-ctrl {
  border-color: var(--color-main);
  background: var(--color-main);
}
.plans-page #filterPop #gbGrid .gbrow.on .ff-ctrl,
.plans-page #filterPop #priceGrid .pchip.on .ff-ctrl,
.plans-page #filterPop #callGrid .select-chip.active .ff-ctrl {
  background: var(--color-white);
}
.plans-page #filterPop #gbGrid .gbrow.on .ff-ctrl::after,
.plans-page #filterPop #priceGrid .pchip.on .ff-ctrl::after,
.plans-page #filterPop #callGrid .select-chip.active .ff-ctrl::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--color-main);
}
.plans-page #filterPop #qosGrid .qcard.on .ff-ctrl::after,
.plans-page #filterPop #termGrid .select-chip.active .ff-ctrl::after {
  content: "";
  position: absolute;
  left: 5.5px;
  top: 2px;
  width: 4.5px;
  height: 9px;
  border: solid var(--color-white);
  border-width: 0 2.2px 2.2px 0;
  transform: rotate(45deg);
}
/* 통신 기술 그리드(#networkGrid) — 기간(#termGrid)과 동일한 다중선택 카드 스타일.
   하이브리드 섹션이 그리드 ID로 스코프돼(레거시 .term-pills 오버라이드) #networkGrid도 같은 규칙을 매칭해야 요금·기간 탭과 외형 통일. */
.plans-page #filterPop #networkGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)) !important;   /* .term-pills{none !important} 무력화 */
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.plans-page #filterPop #networkGrid .select-chip {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6875rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.75rem 0.875rem;
  background: var(--color-white);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  box-shadow: none;
  transition: border-color 0.15s, background 0.15s;
}
.plans-page #filterPop #networkGrid .select-chip:hover { border-color: var(--blue-border); background: var(--blue-pale); }
.plans-page #filterPop #networkGrid .select-chip:focus-visible { outline: 2px solid var(--color-main); outline-offset: 2px; }
.plans-page #filterPop #networkGrid .select-chip.active { border-color: var(--color-main); background: var(--blue-soft); }
.plans-page #filterPop #networkGrid .ff-ctrl { border-radius: 50%; }   /* 단일선택 = 라디오형(원) */
.plans-page #filterPop #networkGrid .select-chip.active .ff-ctrl { border-color: var(--color-main); background: var(--color-white); }
.plans-page #filterPop #networkGrid .select-chip.active .ff-ctrl::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--color-main);
}
/* 텍스트 · 매그니튜드 바 · 배지 (term-pills의 span{display:none} 무력화 위해 display 명시) */
.plans-page #filterPop .ff-txt {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 0.1875rem;
}
.plans-page #filterPop .ff-m {
  display: block;
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
/* 옵션 라벨 — PC 15px / 폴드·모바일·플립 14px(base). 보조문구(ff-s)는 13px 공통. (base 뒤에 둬 소스순서로 우선) */
@media (min-width: 1024px) {
  .plans-page #filterPop .ff-m {
    font-size: 0.9375rem;
  }
}
.plans-page #filterPop .on .ff-m,
.plans-page #filterPop .active .ff-m {
  color: var(--color-main);
  font-weight: 800;
}
.plans-page #filterPop .ff-s {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.35;
}
.plans-page #filterPop .ff-badge {
  display: inline-block;
  font-size: 0.5625rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 0 0.3125rem;
  border-radius: var(--radius-xs);
  vertical-align: middle;
  margin-left: 0.125rem;
  transform: translateY(-1px);
}
.plans-page #filterPop .ff-badge.ff-hot {
  color: var(--badge-popular-text);
  background: var(--badge-popular-bg);
}
.plans-page #filterPop .ff-badge.ff-reco {
  color: var(--color-main);
  background: var(--blue-soft);
}
.plans-page #filterPop .ff-badge.ff-low {
  color: var(--label-orange-text);
  background: var(--label-orange-bg);
}
/* 데이터 탭 가이드 문구 + '직접 범위 설정' 접이식(프리셋 1차 / 슬라이더 2차, 값은 summary에 동기화) */
/* 인라인 힌트 — h3 안에서 제목 옆에 옅게(보조 프롬프트). 블록 여백 제거(인라인 span) */
.plans-page #filterPop .filter-hint {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.plans-page #filterPop .filter-custom {
  margin-top: 1.125rem;
  border-top: 1px solid var(--border-light);
  padding-top: 1rem;
}
.plans-page #filterPop .filter-custom summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-secondary);
}
.plans-page #filterPop .filter-custom summary::-webkit-details-marker {
  display: none;
}
.plans-page #filterPop .filter-custom .fc-v {
  margin-left: auto;
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-main);
  letter-spacing: -0.02em;
}
.plans-page #filterPop .filter-custom .fc-chev {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--text-tertiary);
  transition: transform 0.2s;
}
.plans-page #filterPop .filter-custom[open] .fc-chev {
  transform: rotate(180deg);
}
.plans-page #filterPop .filter-custom .slider-box {
  margin-top: 1rem;
  background: var(--gray-15);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem 0.75rem;
}
/* 닫힘(기본) 상태에선 슬라이더 숨김 — reset.css가 native <details> 접힘(UA display:none)을 덮어 항상 보이던 문제 보정 */
.plans-page #filterPop .filter-custom:not([open]) .slider-box {
  display: none;
}
/* 시안 슬라이더 — 노브 말풍선 노출(시작·끝 값 확인용, 블루 톤). 마커는 '도트 + 하단 라벨'로 위치 시인성 강화 */
.plans-page #filterPop .filter-custom #dataTrack .gb-tip {
  background: var(--color-main);
}
.plans-page #filterPop .filter-custom #dataTrack .gb-tip::after {
  border-top-color: var(--color-main);
}
.plans-page #filterPop .filter-custom #dataTrack .gb-marker {
  background: var(--slate-300);
  width: 0.4375rem;
  height: 0.4375rem;
}
.plans-page #filterPop .filter-custom #dataTrack .gb-marker.gb-end {
  background: transparent;   /* 끝점(0GB·무제한)은 도트 없이 라벨만(트랙 끝 = 노브 자리) */
}
.plans-page #filterPop .filter-custom #dataTrack .gb-marker i {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.plans-page #filterPop .filter-custom .ptrack .pfill {
  background: var(--color-main);
}
.plans-page #filterPop .filter-custom .ptrack {
  margin-top: 2.375rem;   /* 노브 말풍선 + 71GB '인기' 플래그가 트랙 위로 들어갈 자리 확보 */
}
/* 시안 A — 배지 마커(초저가·인기·추천): 컬러 도트 + 흰 링(파란 채움 위에서도 또렷) · 컬러 값 · 배지 필 */
.plans-page #filterPop .filter-custom #dataTrack .gb-marker.gb-low,
.plans-page #filterPop .filter-custom #dataTrack .gb-marker.gb-pop,
.plans-page #filterPop .filter-custom #dataTrack .gb-marker.gb-reco {
  width: 0.5625rem;
  height: 0.5625rem;
  box-shadow: 0 0 0 2.5px var(--color-white);
}
.plans-page #filterPop #dataTrack .gb-marker.gb-low  { background: var(--badge-deal); }
.plans-page #filterPop #dataTrack .gb-marker.gb-pop  { background: var(--badge-popular-text); }
.plans-page #filterPop #dataTrack .gb-marker.gb-reco { background: var(--badge-data-fresh); }
.plans-page #filterPop #dataTrack .gb-marker.gb-low  i { color: var(--label-orange-text);  font-weight: 800; }
.plans-page #filterPop #dataTrack .gb-marker.gb-pop  i { color: var(--badge-popular-text); font-weight: 800; }
.plans-page #filterPop #dataTrack .gb-marker.gb-reco i { color: var(--badge-data-text);    font-weight: 800; }
.plans-page #filterPop #dataTrack .gb-marker.gb-low b,
.plans-page #filterPop #dataTrack .gb-marker.gb-pop b,
.plans-page #filterPop #dataTrack .gb-marker.gb-reco b {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.5625rem;
  font-weight: 800;
  font-style: normal;
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  z-index: 2;
}
.plans-page #filterPop #dataTrack .gb-marker.gb-low b  { color: var(--label-orange-text);  background: var(--label-orange-bg); }
.plans-page #filterPop #dataTrack .gb-marker.gb-pop b  { color: var(--badge-popular-text); background: var(--badge-popular-bg); }
.plans-page #filterPop #dataTrack .gb-marker.gb-reco b { color: var(--badge-data-text);    background: var(--badge-data-bg); }
/* 시안 nav — 아이콘 없는 텍스트 리스트(활성 = 블루 박스 + 도트) */
.plans-page #filterPop .fnav-btn .nav-ic {
  display: none;
}
/* 속도 옵션 = 다른 옵션(데이터·요금·통화·기간)과 동일한 공통 ff-* 카드 사용.
   전용 오버라이드 제거 → 2줄 스택(ff-m 값 / ff-s 설명) + 멀티컬럼 그리드로 통일. */
@media (max-width: 679px) {
  /* 고용량 압축으로 100GB·무제한이 10% 간격 → 좁은 트랙에선 100GB 라벨만 숨김(도트는 유지) */
  .plans-page #filterPop .filter-custom #dataTrack .gb-marker:nth-child(8) i {
    display: none;
  }
}

/* [최종] 상세필터 크롬 — V4 매칭 (그래버·헤더·탭아이콘·섹션제목·풋터 CTA). 박스/오버레이는 공통 셸 */
.plans-page #filterPop .sheet-header {
  margin: 0 0 1rem;
}
.plans-page #filterPop .sheet-title {
  font-size: 1.1875rem;
  font-weight: 900;
  letter-spacing: -0.025em;
}
/* 탭 아이콘 */
.plans-page #filterPop .fnav-btn {
  gap: 0.3125rem;
}
.plans-page #filterPop .fnav-btn .nav-ic {
  width: 1rem;
  height: 1rem;
  opacity: 0.82;
  flex-shrink: 0;
}
.plans-page #filterPop .fnav-btn.active .nav-ic {
  opacity: 1;
}
.plans-page #filterPop .fnav-btn:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: -3px;
  border-radius: var(--radius-sm);
}
/* 섹션 제목 — 아이콘칩 + 타이틀 + 여러개 pill */
.plans-page #filterPop .filter-section h3 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;            /* 플립 등 좁으면 힌트가 다음 줄로 안전하게 내려감 */
  gap: 0.125rem 0.5rem;       /* 행 간격(줄바꿈 시) 작게 / 제목·힌트 사이 간격 */
  justify-content: flex-start;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.015em;
  margin-bottom: 0.875rem;
}
.plans-page #filterPop .filter-section h3 .multi {
  margin-left: auto;         /* 제목+힌트는 왼쪽, '여러 개' 배지는 우측 끝으로 */
  align-self: center;
  font-size: 0.625rem;
  font-weight: 800;
  color: var(--color-main);
  background: var(--blue-soft);
  border-radius: var(--radius-pill);
  padding: 0.1875rem 0.4375rem;
  letter-spacing: -0.01em;
}
/* 풋터 CTA — V4 그라데이션 + 라이브 닷 */
/* 단발 CTA(화면당 1개)는 기준축 .btn-primary와 동일한 솔리드 메인블루.
   ※ 카드 신청 버튼은 DB 연동 시 400개+ 반복 → 채도 피로 방지 위해 아웃라인 유지(의도적) */
.plans-page #filterPop .sheet-footer .btn-apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 3.25rem;
  border: none;
  background: var(--color-main);
  color: var(--color-white);
  border-radius: var(--radius-md);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  box-shadow: 0 2px 8px rgba(2, 103, 255, 0.2);
}
.plans-page #filterPop .sheet-footer .btn-apply:not(.cta-empty):hover {
  background: var(--blue-600);
}
.plans-page #filterPop .sheet-footer .btn-apply:not(.cta-empty):active {
  transform: scale(0.97);
}
.plans-page #filterPop .sheet-footer .btn-apply.cta-empty {
  background: var(--gray-200);
  color: var(--text-tertiary);
  box-shadow: none;
}
.plans-page #filterPop .btn-apply .cta-live {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--color-white);
  flex-shrink: 0;
  animation: ctaLiveDot 1.6s infinite;
}
.plans-page #filterPop .btn-apply.cta-empty .cta-live {
  display: none;
}
@keyframes ctaLiveDot {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
  }
  70% {
    box-shadow: 0 0 0 0.375rem rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
.plans-page #filterPop .btn-reset-filter {
  height: 3.25rem;
  border-radius: var(--radius-md);
}
/* [최종] 데이터 슬라이더 — 월드클래스 톤 통일 (쿨 트랙 · 그라데이션 필 · 정제 노브 · 다크 툴팁) */
.plans-page #filterPop .slider-box {
  padding: 0.125rem 0.375rem 0.125rem;
}
.plans-page #filterPop .ptrack {
  height: 0.375rem;
  background: var(--slate-100);
  margin: 2.125rem 0.6875rem 0.625rem;
}
.plans-page #filterPop .ptrack .pfill {
  background: linear-gradient(
    90deg,
    var(--color-main-focus),
    var(--color-main)
  );
}
.plans-page #filterPop .ptrack .pknob {
  width: 1.375rem;
  height: 1.375rem;
  border: 2.5px solid var(--color-main);
  box-shadow:
    0 2px 8px rgba(31, 95, 224, 0.32),
    0 1px 2px rgba(16, 24, 40, 0.12);
}
.plans-page #filterPop .ptrack .pknob:focus-visible {
  box-shadow:
    0 2px 8px rgba(31, 95, 224, 0.32),
    0 0 0 4px rgba(31, 95, 224, 0.22);
}
.plans-page #filterPop #dataTrack .gb-tip {
  background: var(--slate-850);
  border-radius: var(--radius-xs);
  padding: 0.1875rem 0.5rem;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(16, 24, 40, 0.22);
}
.plans-page #filterPop #dataTrack .gb-tip::after {
  border-top-color: var(--slate-850);
}
.plans-page #filterPop #dataTrack .gb-marker {
  background: var(--slate-300);
}
.plans-page #filterPop #dataTrack .gb-marker i {
  color: var(--text-tertiary);
  font-weight: 700;
}
.plans-page #filterPop #dataTrack .gb-marker.gb-end i {
  color: var(--text-muted);
  font-weight: 800;
}
@media (prefers-reduced-motion: reduce) {
  .plans-page #filterPop .btn-apply .cta-live {
    animation: none;
  }
}

/* =========================================
   [19] QoS 도움말 말풍선
========================================= */
.plans-page .qos-help {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.9375rem;
  height: 0.9375rem;
  border-radius: 50%;
  background: var(--gray-200);
  color: var(--text-tertiary);
  font-size: 0.625rem;
  font-weight: 800;
  cursor: help;
  margin-left: 0.25rem;
}
.plans-page .qos-bubble {
  position: absolute;
  bottom: calc(100% + 0.5625rem);
  left: 50%;
  transform: translateX(-50%);
  width: 14.375rem;
  max-width: 60vw;
  background: var(--slate-800);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -0.01em;
  padding: 0.6875rem 0.8125rem;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 28px rgba(11, 15, 26, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(4px);
  transition:
    opacity 0.15s,
    transform 0.15s;
  z-index: 40;
  text-align: left;
  white-space: normal;
}
.plans-page .qos-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--slate-800);
}
/* 말풍선 노출 — 폴드·모바일·플립(터치)은 .on(JS 클릭 토글)으로만. :hover를 전역에 두면 클릭으로 .on을 지워도
   마우스/스티키호버가 ? 위에 남는 한 계속 열려 재클릭 닫기가 안 됨. 키보드 접근성만 :focus-visible로 유지 */
.plans-page .qos-help:focus-visible .qos-bubble,
.plans-page .qos-help.on .qos-bubble {   /* .on = 클릭/터치 토글(카드 이동 방지와 함께 JS가 부여) */
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* PC(마우스 有)만 호버 노출 — 터치 기기(폴드 포함)엔 (hover:hover)가 거짓이라 미적용 → 클릭 토글 유지 */
@media (min-width: 1024px) and (hover: hover) {
  .plans-page .qos-help:hover .qos-bubble {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}
/* 요금제 카드(.plan-card) 안의 "?" 도움말도 말풍선 앵커로 동작 */
.plans-page #planListContainer .help.qos-help {
  position: relative;
  cursor: help;
}

/* 터치/좁은 화면(≤1023) — '?' 도움말 클릭 영역을 44px로 확장(리스트·상세, 작은 아이콘 탭 오류 방지, 시각 크기는 유지). 레이아웃 영향 없음 */
@media (max-width: 1023px) {
  .plans-page .qos-help::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2.75rem; height: 2.75rem; }
}

/* 플립·모바일 — '?'가 줄 오른쪽에 있어 중앙기준 말풍선이 우측으로 넘침.
   말풍선을 80% 왼쪽으로 밀고(80%가 '?' 왼쪽), 화살표를 80% 지점(='?' 위)으로 옮겨 화면 안에 머물게 한다. */
@media (max-width: 679px) {
  .plans-page .qos-bubble { transform: translateX(-80%) translateY(4px); }   /* resting — 가로 슬라이드 어긋남 방지 */
  .plans-page .qos-help:focus-visible .qos-bubble,
  .plans-page .qos-help.on .qos-bubble { transform: translateX(-80%) translateY(0); }
  .plans-page .qos-bubble::after { left: 80%; }
}

/* 상세 페이지(body: plans-page detail-page) — .on 토글 JS 없이 CSS만으로 처리.
   PC는 위 .plans-page :hover 규칙 공유. 터치는 :focus로 탭-열기('?'가 tabindex 보유 → 탭하면 포커스 → 노출, 탭 밖 → blur로 닫힘).
   .detail-page 스코프라 리스트(.plans-page 단독, JS 토글)엔 영향 없음 */
.detail-page .qos-help:focus .qos-bubble {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
@media (max-width: 679px) {
  .detail-page .qos-help:focus .qos-bubble { transform: translateX(-80%) translateY(0); }
}

/* =========================================
   [21] 비교 바 / 비교 모달
========================================= */
/* 하단 비교 툴바 — PC/폴드: 하단 중앙에 떠 있는 알약 아일랜드 / 모바일·플립: 바닥 고정 독(2단).
   슬라이드 인/아웃은 transform(translateY)로 공통 처리, 형태만 해상도별로 분기 */
.plans-page .cmp-bar {
  /* 비교 툴바 그라데이션 — 홈 메인 블루(#0267FF) 기반. 아일랜드 보더·CTA 채움이 공유 */
  --grad: linear-gradient(100deg, #0B5BD3 0%, #0267FF 46%, #4D9BFF 100%);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: center;   /* 섬(cmp-bar-in) + 초기화 pill을 한 줄에 세로 중앙 정렬 */
  gap: 0.5rem;
  padding: 0 1rem calc(1.125rem + env(safe-area-inset-bottom));   /* 탭바 숨김 모드 → 비교바가 직접 홈인디케이터(safe-area) 회피 */
  transform: translateY(180%);
  transition: transform 0.34s var(--smooth);
  pointer-events: none;
}
.plans-page .cmp-bar.show {
  transform: translateY(0);
}
/* 비교바 노출 시 본문 하단 여백 — 고정 바가 마지막 카드/푸터를 가리지 않게 (JS가 body.cmp-open 토글) */
.plans-page.cmp-open {
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));   /* PC·폴드(인라인) 기준. 모바일은 ≤679서 위 pill 높이만큼 +7rem */
}
/* ≤1023: 비교 담기 모드에선 전역 하단 탭바를 숨기고 비교바가 그 자리(bottom:0)를 대신 = 집중 과업(비교).
   비교바는 담을 때만 노출 → 항상 cmp-open과 동반되므로, 탭바를 감춰도 평상시 내비는 그대로 유지됨. */
@media (max-width: 1023px) {
  .plans-page.cmp-open .mobile-tabbar { display: none; }
}
.plans-page .cmp-bar-in {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.6875rem;
  min-width: 0;   /* 섬이 가용 폭까지 줄어들도록 — 넘치면 내부 칩(cmp-chips)이 가로 스크롤(초기화 버튼과 나란히 놔도 좌우 안 잘림) */
  max-width: 100%;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border: 1.4px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box;   /* 그라데이션 보더(흰 필) */
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 2px rgba(11, 15, 26, 0.04), 0 14px 36px -14px rgba(11, 15, 26, 0.18);   /* 중립 그레이 — 살짝 떠 있는 느낌 */
}
/* 담은 요금제 칩 — 카드와 동일한 통신사 파스텔 태그(.tag) 재사용. CTA 옆 남은 폭을 채움(가로 스크롤) */
.plans-page .cmp-chips {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;               /* 가로 스크롤 시 상하 흔들림 방지 — overflow-x:auto가 암묵적으로 만드는 overflow-y:auto 차단 */
  overscroll-behavior-x: contain;   /* 가로 스크롤이 페이지로 전파(바운스)되지 않게 */
  touch-action: pan-x;              /* 터치 제스처를 가로 팬으로 고정 → 세로 움직임 방지 */
  scrollbar-width: none;
}
.plans-page .cmp-chips::-webkit-scrollbar {
  display: none;
}
.plans-page .cmp-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--color-main-bg);   /* 옅은 블루 — 흰 아일랜드 위 명도로 분리(테두리·그림자 없음) */
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.3125rem 0.5rem 0.3125rem 0.4375rem;
  flex-shrink: 0;
  transition: background 0.16s var(--smooth), transform 0.16s var(--smooth);
}
.plans-page .cmp-chip:hover {
  transform: translateY(-1px);
  background: var(--blue-soft);
}
/* 통신사 배지 — 카드 .tag와 동일한 파스텔 색 */
.plans-page .cmp-cr-badge {
  font-size: 0.625rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  padding: 0.25rem 0.4375rem;
  border-radius: var(--radius-pill);
  background: var(--cmp-bdg-bg);
  color: var(--cmp-bdg-fg);
}
.plans-page .cmp-chip.skt { --cmp-bdg-bg: var(--color-skt-bg); --cmp-bdg-fg: var(--color-skt); }
.plans-page .cmp-chip.kt  { --cmp-bdg-bg: var(--color-kt-bg);  --cmp-bdg-fg: var(--color-kt); }
.plans-page .cmp-chip.lgt { --cmp-bdg-bg: var(--color-lgt-bg); --cmp-bdg-fg: var(--color-lgt); }
/* 데이터(GB) = 플립·모바일 / 요금제명 = 폴드·PC. 기본(≤679)은 GB 노출 */
.plans-page .cmp-gb {
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-main);
  white-space: nowrap;
}
.plans-page .cmp-gb .u {
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--color-main);   /* 단위 GB만 메인 블루로 가벼운 포인트 */
  margin-left: 1px;
}
.plans-page .cmp-chip-nm {
  display: none;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11rem;
}
.plans-page .cmp-x {
  flex-shrink: 0;
  position: relative;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition:
    background 0.15s,
    color 0.15s;
}
.plans-page .cmp-x:hover {
  background: rgba(2, 103, 255, 0.12);
  color: var(--color-main);
}
.plans-page .cmp-x .v2-icon {
  width: 0.6875rem;
  height: 0.6875rem;
}
/* 접근성 — 시각 크기는 두고 탭 영역만 44px 가까이 확대 */
.plans-page .cmp-x::before {
  content: "";
  position: absolute;
  inset: -0.625rem;
}
.plans-page .cmp-x:focus-visible,
.plans-page .cmp-go:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}
/* 빈 슬롯 — [+ 요금제 담기] 점선 가이드: "최대 3개" 담을 수 있음을 직관 학습 */
.plans-page .cmp-slot {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
  border: 1.5px dashed var(--blue-110);
  color: var(--color-main);
  background: none;
  border-radius: var(--radius-pill);
  padding: 0.375rem 0.75rem 0.375rem 0.5rem;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.plans-page .cmp-slot:hover {
  background: var(--blue-soft);
  border-color: var(--blue-border);
}
.plans-page .cmp-slot:active {
  transform: scale(0.97);
}
.plans-page .cmp-slot .plus {
  width: 1.0625rem;
  height: 1.0625rem;
  border-radius: 50%;
  background: var(--blue-soft);
  display: grid;
  place-items: center;
  font-size: 0.8125rem;
  line-height: 1;
}
/* 비교 전체 비우기(초기화) — 흰 섬(cmp-bar-in) '밖'의 원형 ✕ 버튼(형제). 표면=U1 글로시 솔리드(유리알 광택, 불투명). PC·폴드=섬 오른쪽 / 플립·모바일=섬 위(cmp-bar flex 방향이 제어). 크기: ≤1023(플립·모바일·폴드) 38px / PC(≥1024) 40px */
.plans-page .cmp-reset {
  pointer-events: auto;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--color-white) 0%, var(--blue-soft) 44%, var(--color-main-bg) 100%);   /* U1 글로시 솔리드 — 미세 그라데이션(토큰, 대비 완화) */
  border: 1px solid var(--color-main-disabled);   /* 소프트 블루 테두리(#AFCFFF) — 버튼색보다 한 톤 진해 가장자리를 잡되 톤 통일 */
  color: var(--color-main);
  box-shadow: 0 6px 14px -8px rgba(2, 103, 255, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -2px 3px rgba(2, 103, 255, 0.05);   /* 상단 유리알 하이라이트 + 하단 그늘 — 살짝 다운 */
  cursor: pointer;
  transition: background 0.14s, transform 0.12s;
}
.plans-page .cmp-reset:hover { background: linear-gradient(160deg, var(--color-white) 0%, var(--blue-soft) 54%, var(--color-main-bg) 100%); }   /* hover 시 상단 화이트 영역 소폭 확장 */
.plans-page .cmp-reset:active { transform: scale(0.94); }
.plans-page .cmp-reset:focus-visible { outline: 2px solid var(--color-main); outline-offset: 2px; }
.plans-page .cmp-reset .v2-icon { width: 1rem; height: 1rem; }
/* 플립·모바일(≤679) — 섬 위로 세로 스택(column-reverse: 초기화가 pill 위). 하단 여백 +위 pill 높이 */
@media (max-width: 679px) {
  .plans-page .cmp-bar { flex-direction: column-reverse; align-items: center; gap: 0.3rem; }
  .plans-page.cmp-open { padding-bottom: calc(6.25rem + env(safe-area-inset-bottom)); }
}
/* PC(≥1024) — 초기화 원형 40px (≤1023은 38px). 비교바 높이·여백 압축은 파일 하단 PC 블록 참고 */
@media (min-width: 1024px) {
  .plans-page .cmp-reset { width: 2.5rem; height: 2.5rem; }
  .plans-page .cmp-reset .v2-icon { width: 1rem; height: 1rem; }
}
.plans-page .cmp-go {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  height: 2.75rem;
  padding: 0 1.125rem;
  background: var(--grad);
  color: var(--color-white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 8px 22px -8px rgba(2, 103, 255, 0.55);   /* 글로우 + 상단 유리알 광택 */
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition:
    filter 0.18s,
    transform 0.1s;
}
.plans-page .cmp-go:hover {
  filter: brightness(1.04);
}
.plans-page .cmp-go:active {
  transform: scale(0.97);
}
.plans-page .cmp-go:disabled {
  background: var(--color-main-disabled);
  box-shadow: none;
  cursor: not-allowed;
}
.plans-page .cmp-go:disabled:active {
  transform: none;
}
.plans-page .cmp-go-cnt {
  min-width: 1.3125rem;
  height: 1.3125rem;
  padding: 0 0.4375rem;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-main);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  display: grid;
  place-items: center;
}
/* 개수 N/3 — '/3'(최대)은 옅은 블루로 보조 */
.plans-page .cmp-go-mx {
  color: rgba(2, 103, 255, 0.5);
  font-weight: 700;
}
.plans-page .cmp-go .v2-icon {
  width: 1rem;
  height: 1rem;
}

/* ───────── 플립·모바일 ≤679 — 하단 독 + 세로 컴팩트 칩(배지/데이터/닫기) ───────── */
@media (max-width: 679px) {
  .plans-page .cmp-bar {
    padding: 0;
  }
  .plans-page .cmp-bar-in {
    width: 100%;
    gap: 0.4375rem;
    padding: 0.375rem 0.625rem calc(0.375rem + env(safe-area-inset-bottom));   /* 높이·여백 압축. 비교 모드는 탭바 숨김 → 도크가 직접 홈인디케이터 회피 */
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: 0 -6px 24px -8px rgba(11, 15, 26, 0.12);
  }
  .plans-page .cmp-go { height: 2.5rem; }   /* CTA 44→40px (높이 압축) */
  /* 칩 세로 스택(배지↑ / 데이터↓) + 닫기(×) 우측 세로중앙 */
  .plans-page .cmp-chip {
    align-items: center;
    gap: 0.25rem;
    padding: 0.4375rem 1.5rem 0.4375rem 0.625rem;
  }
  .plans-page .cmp-x {
    position: absolute;
    top: 50%;
    right: 0.375rem;
    transform: translateY(-50%);
  }
}
/* ───────── 플립 ≤360 — 라벨 축소('비교하기'→'비교') ───────── */
@media (max-width: 360px) {
  .plans-page .cmp-bar-in {
    gap: 0.375rem;
  }
  .plans-page .cmp-cr-badge {
    font-size: 0.5625rem;
    padding: 0.1875rem 0.375rem;
  }
  .plans-page .cmp-gb {
    font-size: 0.75rem;
  }
  .plans-page .cmp-go {
    padding: 0 0.875rem;
    font-size: 0.8125rem;
    gap: 0.3125rem;
  }
}
/* ───────── 폴드·PC ≥680 — 가로 칩 + 요금제명 노출(데이터 숨김) ───────── */
@media (min-width: 680px) {
  .plans-page .cmp-gb {
    display: none;
  }
  .plans-page .cmp-chip-nm {
    display: inline-block;
  }
}
/* 폴드(680~1023) — 비교바 높이·여백 압축 */
@media (min-width: 680px) and (max-width: 1023px) {
  .plans-page .cmp-go { height: 2.5rem; }                                                       /* CTA 44→40px */
  .plans-page .cmp-bar { gap: 0.375rem; padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); }   /* 초기화↔섬 간격·바 하단 여백 압축 */
  .plans-page .cmp-bar-in { gap: 0.5rem; padding: 0.375rem 0.375rem 0.375rem 0.75rem; }          /* 섬 패딩 압축 */
  .plans-page.cmp-open { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom)); }           /* 본문 하단 여백 압축 */
}
/* PC(≥1024) — 비교바 높이·여백 압축(폴드와 동일 수준). ※ cmp-go 오버라이드는 base 규칙보다 뒤여야 해 여기 배치 */
@media (min-width: 1024px) {
  .plans-page .cmp-go { height: 2.5rem; }                                                       /* CTA 44→40px */
  .plans-page .cmp-bar { gap: 0.375rem; padding-bottom: calc(0.875rem + env(safe-area-inset-bottom)); }
  .plans-page .cmp-bar-in { gap: 0.5rem; padding: 0.375rem 0.375rem 0.375rem 0.75rem; }
  .plans-page.cmp-open { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom)); }
}
@media (min-width: 1024px) {
  .plans-page .cmp-bar-in {
    gap: 1.125rem;
    padding-left: 1.25rem;
  }
  .plans-page .cmp-chip-nm {
    max-width: 13rem;
  }
}

/* 비교 모달 = 공통 .modal 셸 + 컨텐츠 모디파이어. 폭만 주입(셸이 var로 읽음) */
.plans-page .cmp-sheet {
  --modal-max: 760px;
}
.plans-page .cmp-wrap {
  width: 100%;
}

/* ============================================================
   비교 모달 — 가로 섹션 밴드 레이아웃(전 해상도 공통). 왼쪽 라벨 열 없이 '밴드 + N열 값'.
   PC·폴드 = 폭 채움 / 모바일·플립 = 가로 스크롤(읽히는 열 폭 유지). 종합추천 열은 헤더~하단 테두리 프레임.
   ============================================================ */
.plans-page .gc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.plans-page .gc { position: relative; isolation: isolate; --gap: 0.625rem; --colw: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: calc(var(--cols) * 9.75rem); padding-top: 0.75rem; }   /* 열 최소폭 → 3개 등 좁으면 가로 스크롤 / isolate로 오버레이 z-index 통일 / --colw=한 열 폭 */
.plans-page .gc-heads { position: relative; display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: var(--gap); }
.plans-page .gc-band, .plans-page .gc-row { position: relative; z-index: 1; }
/* 요금제(열) 구분 — 헤더~하단까지 끊김 없는 연속 세로 실선(밴드 위로 통과). 열 경계(gap 중앙)마다 1px */
.plans-page .gc-cols { position: absolute; top: 0.75rem; bottom: 0; left: 0; right: 0; z-index: 2; pointer-events: none;
  background-image: repeating-linear-gradient(90deg,
    transparent 0,
    transparent calc(var(--colw) + var(--gap) / 2 - 0.5px),
    var(--border-light) calc(var(--colw) + var(--gap) / 2 - 0.5px),
    var(--border-light) calc(var(--colw) + var(--gap) / 2 + 0.5px),
    transparent calc(var(--colw) + var(--gap) / 2 + 0.5px),
    transparent calc(var(--colw) + var(--gap))); }
/* 종합추천 열 — 헤더부터 하단까지 감싸는 블루 테두리 프레임(연속, 섹션 밴드 위로 통과).
   안쪽(이웃 열 경계)은 gap 절반 넓혀 구분선에 겹치고, 바깥 끝(첫/마지막 열)은 0으로 클램프 → 컨테이너 밖 잘림 방지 */
.plans-page .gc-frame { position: absolute; top: 0.75rem; bottom: 0; z-index: 3; pointer-events: none;
  left: max(0px, calc(var(--rec) * (var(--colw) + var(--gap)) - var(--gap) / 2));
  right: max(0px, calc(100% - var(--rec) * (var(--colw) + var(--gap)) - var(--colw) - var(--gap) / 2));
  border: 2px solid var(--color-main); border-radius: var(--radius-lg); }

/* 헤더(요금제별) — 통신사 배지(리스트와 동일) + 요금제명 + 신청하기 (+ 종합추천 리본) */
.plans-page .gc-head { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.4375rem; padding: 0.9375rem 0.375rem 0.625rem; border-radius: var(--radius-lg); }   /* 상단 패딩↑ = 걸친 리본과 배지 행 사이 여백 확보(안정감) */
.plans-page .gc-ribbon { position: absolute; top: -0.6875rem; left: 50%; transform: translateX(-50%); z-index: 4; white-space: nowrap; font-size: 0.625rem; font-weight: 800; color: var(--color-white); background: var(--color-main); padding: 0.1875rem 0.625rem; border-radius: var(--radius-pill); box-shadow: 0 3px 8px rgba(2, 103, 255, 0.32); }   /* 떠 있는 탭 — 소프트 그림자로 안착 */
.plans-page .gc-head .tag { display: inline-block; }
/* 통신사 배지 + 인터넷 결합 칩 — 한 줄(좁으면 줄바꿈) */
.plans-page .gc-head-badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.25rem; }
.plans-page .gc-name { font-size: 0.8125rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text-main); }
.plans-page .gc-apply-btn { align-self: center; height: 2rem; padding: 0 1.125rem; border-radius: var(--radius-sm); border: 1.5px solid var(--color-main); background: var(--color-white); color: var(--color-main); font-family: inherit; font-size: 0.75rem; font-weight: 800; cursor: pointer; transition: background 0.15s; }
.plans-page .gc-apply-btn.solid { background: var(--color-main); color: var(--color-white); }
.plans-page .gc-apply-btn:hover { background: var(--color-main-bg); }
.plans-page .gc-apply-btn.solid:hover { background: var(--color-main-hover); }

/* 섹션 밴드(라벨) — 가로 풀폭. 가로 스크롤 시 라벨은 좌측 고정으로 항상 보이게 */
.plans-page .gc-band { display: flex; justify-content: flex-start; margin: 0.5rem 0 0.3125rem; padding: 0.1875rem 0; background: var(--gray-15); border-radius: var(--radius-xs); font-size: 0.75rem; font-weight: 800; color: var(--text-secondary); letter-spacing: -0.01em; }
.plans-page .gc-band span { position: sticky; left: 1rem; padding-left: 0.75rem; }
/* 값 행 — 헤더와 동일 N열 그리드(열 정렬 일치) */
.plans-page .gc-row { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: var(--gap); }
.plans-page .gc-cell { padding: 0 0.375rem; min-width: 0; text-align: center; }
.plans-page .gc-price { display: block; font-size: 1.375rem; font-weight: 800; letter-spacing: -0.03em; color: var(--color-main); line-height: 1.1; }   /* 숫자 권력화 */
.plans-page .gc-data { font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-main); }
.plans-page .gc-data.mute { color: var(--text-tertiary); }
.plans-page .gc-sub { font-size: 0.6875rem; font-weight: 500; color: var(--text-secondary); margin-top: 0.125rem; word-break: keep-all; }
.plans-page .gc-val { font-size: 0.8125rem; font-weight: 700; color: var(--text-main); line-height: 1.35; word-break: keep-all; }
.plans-page .gc-val.mute { color: var(--text-tertiary); font-weight: 600; }

/* '실 체감가' 등 가격 라벨(mno-lgt 대행 요금제) — 가격보다 50% 작게(em 기준 → 반응형 자동 비례) */
.plans-page .cmp-price-label { display: block; font-size: 0.5em; font-weight: 600; letter-spacing: 0; line-height: 1.2; color: var(--text-tertiary); }
/* 사은품 — 혜택가 · 썸네일 요약 · 자세히(상세 목록). 요금제 리스트/기존 토글(toggleGiftDetail)과 동일 마크업 재사용 */
.plans-page .cmp-gtot { display: block; font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; color: var(--color-main); }
.plans-page .cmp-gtot.cmp-mute { color: var(--text-tertiary); font-weight: 700; }
.plans-page .cmp-gifts { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.375rem; }
.plans-page .cmp-gic { width: 1.5rem; height: 1.5rem; flex-shrink: 0; border-radius: var(--radius-sm); background: var(--gray-15); border: 1px solid var(--border-light); overflow: hidden; }
.plans-page .cmp-gic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plans-page .cmp-gd-sum[hidden] { display: none; }
.plans-page .cmp-gd-btn { margin-top: 0.375rem; padding: 0.125rem 0; font-size: 0.6875rem; font-weight: 700; color: var(--color-main); background: none; border: none; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.plans-page .cmp-gd-btn:hover { color: var(--color-main-hover); }
.plans-page .cmp-gd-list { margin-top: 0.375rem; }
.plans-page .cmp-gd-list[hidden] { display: none; }
.plans-page .cmp-gd-list .plan-benefits-grid { display: flex; flex-direction: column; gap: 0.3125rem; }
.plans-page .cmp-gd-list .plan-benefit { display: flex; align-items: center; gap: 0.375rem; text-align: left; }
.plans-page .cmp-gd-list .plan-benefit-icon { width: 1.375rem; height: 1.375rem; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden; }
.plans-page .cmp-gd-list .plan-benefit-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plans-page .cmp-gd-list .plan-benefit-text { font-size: 0.6875rem; font-weight: 600; color: var(--text-secondary); line-height: 1.3; word-break: keep-all; }

/* 모바일·플립 — 시트 좌우 여백만 보정(레이아웃은 전 해상도 공통, 가로 스크롤은 .gc-scroll이 처리) */
@media (max-width: 679px) {
  .plans-page .cmp-sheet { padding-left: 1rem; padding-right: 1rem; }
}
@media (max-width: 360px) {
  .plans-page .cmp-sheet { padding-left: 0.75rem; padding-right: 0.75rem; }
  .plans-page .gc { min-width: calc(var(--cols) * 9rem); }   /* 플립 — 열 최소폭 살짝 축소 */
}

/* =========================================================================
   [25] 요금제 상세 (detail.php) — Crisp Bento (요금제 리스트와 통일)
   라이트그레이 위 흰 캡슐 카드 · 숫자 권력화(요금/데이터) · 단일 메인블루 CTA
   ========================================================================= */
.detail-page { background: var(--gray-15); }
.detail-page #wrapper { background: var(--gray-15); min-height: 100vh; }
.detail-page .pd-main { padding: 1rem 0 0; }
/* 콘텐츠 폭은 공통 .v2-container(--content-max 1200px)를 따른다 — 페이지에서 별도 폭 오버라이드하지 않음(4.2.1) */
.detail-page .v2-clean-card { padding: 1.25rem; }   /* 모바일 기본 — 리스트 카드처럼 폴드↑에서 키움(아래 미디어쿼리) */
.detail-page .pd-grid { display: flex; flex-direction: column; gap: 0.875rem; }      /* 모바일·플립 — 단일 컬럼 흐름(히어로 → 가격 → 본문) */
.detail-page .pd-content { display: flex; flex-direction: column; gap: 0.875rem; }   /* 본문 섹션(사은품·혜택·초과요금) 래퍼 */

/* 뒤로가기 */
.detail-page .pd-back { display: inline-flex; align-items: center; gap: 0.125rem; min-height: 2.75rem; margin-bottom: 0.375rem; padding: 0.25rem 0; font-size: 0.875rem; font-weight: 700; color: var(--text-secondary); }   /* min-height 44px: 터치타겟 확보(좌측 flush 유지 위해 가로 padding 0) */
.detail-page .pd-back:hover { color: var(--color-main); }
.detail-page .pd-back .v2-icon { width: 1.125rem; height: 1.125rem; transform: rotate(180deg); }

/* ── 1. 요금제 헤더 ─────────────────────────── */
.detail-page .pd-hero { display: flex; flex-direction: column; }   /* gap 제거 → 자식 margin으로 의도된 여백 리듬 */
.detail-page .pd-hero .plan-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.detail-page .pd-name { font-size: 1rem; font-weight: 500; letter-spacing: -0.03em; line-height: 1.32; color: var(--text-main); margin: 0.25rem 0 0; }
.detail-page .pd-name small { font-size: 1rem; font-weight: 700; color: var(--text-tertiary); }

/* 가격 카드(.pd-cost = 독립 clean-card) — 숫자 권력화(대형 블루 요금). 파스텔 배지 · 좌측 위계.
   카드는 단일 소스 1개. .pd-grid의 CSS Grid가 해상도별로 위치 재배치(모바일=본문 흐름 / 폴드·PC=우측 sticky) → 중복 제거 */
/* 가격 — 세로 1열 히어로: 정상가·할인(맥락, 좌) + [월 요금(대형 주인공)·이후가격(보조)] 우측 정렬(.pd-price-top) */
.detail-page .pd-price-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; column-gap: 0.75rem; row-gap: 0.25rem; }
.detail-page .pd-price-top .pd-price-head { margin-bottom: 0; }
.detail-page .pd-price-body { text-align: right; }
.detail-page .pd-price-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.25rem; }
.detail-page .pd-price-was { font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary); }
.detail-page .pd-price-was del { color: var(--text-tertiary); text-decoration: line-through; }
.detail-page .pd-price-rate { font-size: 0.6875rem; font-weight: 800; color: var(--badge-popular-text); background: var(--badge-popular-bg); padding: 0.1875rem 0.4375rem; border-radius: var(--radius-xs); white-space: nowrap; }
.detail-page .pd-price-now { display: block; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em; color: var(--color-main); line-height: 1; }
.detail-page .pd-price-now em { font-size: 1.5rem; font-style: normal; font-weight: 700; color: var(--color-main); }
.detail-page .pd-price-cta { width: 100%; min-height: 3.25rem; margin-top: 1.125rem; gap: 0.375rem; font-size: 1.0625rem; }
.detail-page .pd-price-cta .v2-icon { width: 1.125rem; height: 1.125rem; }
.detail-page .pd-price-fine { text-align: center; font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary); line-height: 1.5; }   /* 버튼↔안내 간격은 pd-price-cta의 margin-bottom이 담당(버튼 숨김 시 문구 위 공백 없게) */
.detail-page .pd-price-fine .v2-icon { width: 0.875rem; height: 0.875rem; vertical-align: -0.1875rem; margin-right: 0.1875rem; }   /* 안내 느낌표 — 텍스트 색(secondary) 따라감 */

/* ── [단계별·너겟47형] 통신요금 — 실 체감가(주인공) + 구간별 월 납부 + 정가.
   리스트 카드(하이브리드)의 가격 구조를 상세 가격 카드로 확대. 사이드바(폴드·PC) 폭에 맞춰 스케일 ── */
.detail-page .pd-felt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4375rem; }
.detail-page .pd-felt-k { font-size: 0.875rem; font-weight: 700; color: var(--text-tertiary); letter-spacing: -0.01em; }
/* 실 체감가 숫자 = 표준 할인형과 동일 스타일 → .pd-price-now 클래스 재사용(월 16,000원, 반응형 포함) */
/* 구간별 실제 월 납부 — 라이트그레이 그룹 카드(명도 분리). 기간 ↔ 금액 행 */
.detail-page .pd-tier-list { margin-top: 1rem; background: var(--gray-15); border-radius: var(--radius-md); padding: 0.25rem 0.875rem; }
.detail-page .pd-tier-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.625rem 0; }
.detail-page .pd-tier-list li + li { border-top: 1px solid var(--border-light); }
.detail-page .pd-tier-p { font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); }
.detail-page .pd-tier-a { font-size: 0.9375rem; color: var(--text-main); letter-spacing: -0.01em; }
.detail-page .pd-tier-base { margin-top: 0.625rem; font-size: 0.8125rem; font-weight: 500; color: var(--text-tertiary); }
/* 폴드·PC 사이드바(좁음) — 구간 표 폰트 압축. 체감가 숫자는 .pd-price-now가 반응형 처리 */
@media (min-width: 680px) {
  .detail-page .pd-tier-list { margin-top: 0.875rem; padding: 0.125rem 0.75rem; }
  .detail-page .pd-tier-list li { padding: 0.5rem 0; gap: 0.25rem; }
  .detail-page .pd-tier-p { font-size: 0.75rem; }
  .detail-page .pd-tier-a { font-size: 0.813rem; }
}
/* 요금 상세(영수증) — 제목 옆 ⓘ 팝오버로 표시. 떠 있는 라이트 패널이라 레이아웃 안 밀림.
   CSS-only: hover/focus/focus-within으로 노출(키보드·터치 모두 동작, 포커스 해제 시 닫힘) */
.detail-page .pd-bill-pop { position: relative; display: inline-flex; align-items: center; cursor: pointer; margin-left: 0.375rem; vertical-align: middle; }
/* 특정도↑(.pd-section-title .v2-icon 블루 규칙을 덮어 기본 회색·호버 블루로) */
.detail-page .pd-section-title .pd-bill-pop .v2-icon { width: 1.125rem; height: 1.125rem; color: var(--text-tertiary); transition: color 0.15s; }
.detail-page .pd-section-title .pd-bill-pop:hover .v2-icon { color: var(--color-main); }
.detail-page .pd-bill-pop:focus-visible { outline: 2px solid var(--color-main); outline-offset: 2px; border-radius: var(--radius-xs); }
.detail-page .pd-bill-pop-panel { position: absolute; top: calc(100% + 0.5rem); left: 0; width: 15rem; max-width: 72vw; background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-md); box-shadow: 0 10px 28px rgba(11, 15, 26, 0.16); padding: 0.5rem 0.875rem; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.15s, transform 0.15s; z-index: 40; cursor: default; }
.detail-page .pd-bill-pop:hover .pd-bill-pop-panel,
.detail-page .pd-bill-pop:focus .pd-bill-pop-panel,
.detail-page .pd-bill-pop:focus-within .pd-bill-pop-panel { opacity: 1; visibility: visible; transform: translateY(0); }
/* 영수증 계산식: 정상가 → 할인 → 월 납부액(합계 강조) */
.detail-page .pd-bill { display: flex; flex-direction: column; }
.detail-page .pd-bill li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.3125rem 0; font-size: 0.8125rem; }
.detail-page .pd-bill li span { color: var(--text-secondary); font-weight: 600; }
.detail-page .pd-bill li b { color: var(--text-main); font-weight: 700; }
.detail-page .pd-bill .dc b { color: var(--color-red); }   /* 할인(차감) 금액은 빨강으로 강조 */
/* 하위 할인 내역 — 들여쓰기 + ㄴ 마커, 옅게(총 요금할인의 세부) */
.detail-page .pd-bill .sub span { position: relative; padding-left: 0.875rem; font-weight: 500; color: var(--text-tertiary); }
.detail-page .pd-bill .sub span::before { content: "ㄴ"; position: absolute; left: 0; }
.detail-page .pd-bill .sub b { color: var(--text-tertiary); font-weight: 600; }
.detail-page .pd-bill .total { margin-top: 0.25rem; padding-top: 0.5rem; border-top: 1px solid var(--border-light); }
.detail-page .pd-bill .total span { font-size: 0.875rem; color: var(--text-main); font-weight: 800; }
.detail-page .pd-bill .total b { font-size: 1.0625rem; color: var(--color-main); font-weight: 700; letter-spacing: -0.02em; }
/* 7개월 이후 납부액 — 보조(회색), 구분선 없음 */
.detail-page .pd-bill .after span { color: var(--text-secondary); font-weight: 700; }
.detail-page .pd-bill .after b { color: var(--text-secondary); font-weight: 700; }

/* 요금 상세 팝오버 — 미니멀 컨셉: 여백·소프트 컬러, 최종 납부액은 블루 캡슐 박스로 강조 */
.detail-page .pd-bill-pop-panel.v-min { width: 16.5rem; padding: 0.875rem 1rem; }
.detail-page .v-min .pd-bill li { padding: 0.3125rem 0; }
.detail-page .v-min .pd-bill li span { color: var(--text-secondary); font-weight: 500; }
.detail-page .v-min .pd-bill .dc b { color: var(--rose-500); }
.detail-page .v-min .pd-bill .total { margin-top: 0.5rem; padding: 0.625rem 0.75rem; border-top: none; background: var(--blue-soft); border-radius: var(--radius-md); }
.detail-page .v-min .pd-bill .total span { color: var(--color-main-active); font-weight: 700; }
.detail-page .v-min .pd-bill .total b { color: var(--color-main); font-size: 1.125rem; }
.detail-page .v-min .pd-bill .after { padding: 0.5rem 0.75rem 0; }

/* 단계별(너겟) 영수증 — 미니멀 계층: ① 실제 납부 금액(기준) → ② 구간별(소프트 그레이 그룹) → ③ 실 체감가(블루 캡슐 결과) */
/* 기준값(실제 납부 금액) — 헤더처럼: 아래 여백·구분선으로 분리, 잉크색 굵게로 또렷이 */
.detail-page .v-min .pd-bill-tier > li:first-child { padding-bottom: 0.625rem; margin-bottom: 0.125rem; }
.detail-page .v-min .pd-bill-tier > li:first-child span { color: var(--text-main); font-weight: 700; }
.detail-page .v-min .pd-bill-tier > li:first-child b { color: var(--text-main); font-weight: 800; font-size: 0.9375rem; }
.detail-page .v-min .pd-bill-tier .tier { padding: 0.4375rem 0.625rem; background: var(--gray-15); }
.detail-page .v-min .pd-bill-tier .tier:first-of-type { margin-top: 0.4375rem; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.detail-page .v-min .pd-bill-tier .tier:last-of-type { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.detail-page .v-min .pd-bill-tier .tier + .tier { border-top: 1px solid var(--border-light); }
.detail-page .v-min .pd-bill-tier .tier span { color: var(--text-tertiary); }
.detail-page .v-min .pd-bill-tier .tier b { color: var(--text-secondary); font-weight: 700; }

/* ── 4. 기본 제공량 초과 시 요율 — 참고/규제 정보라 기본 접힘(details)으로 비중↓ ─────────────────
   접힌 상태=탭 가능한 한 줄 바, 펼치면 그룹별(데이터/음성/문자) 라벨·값 카드. 요율 값은 블루 강조 */
.detail-page .v2-clean-card.spec-info { padding: 0; }   /* clean-card 패딩 해제(특정도↑ — 반응형 clean-card 패딩 오버라이드보다 우선). summary/body가 자체 패딩 */
.detail-page .spec-fold > summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 0.75rem; min-height: 3.25rem; padding: 1.25rem 1.5rem; list-style: none; cursor: pointer; }
.detail-page .spec-fold > summary::-webkit-details-marker { display: none; }
.detail-page .spec-fold > summary:focus-visible { outline: 2px solid var(--color-main); outline-offset: -3px; border-radius: var(--radius-lg); }
.detail-page .spec-fold > summary .pd-section-title { margin-bottom: 0; flex: 1 1 auto; min-width: 0; }   /* 1행 좌측(자세히보기와 한 줄) */
/* 과금 주의 문구 — 2행 풀폭(자세히보기 아래로 안 갇히게 → 전 해상도 너비 꽉 참). 접혀도 항상 노출(민원 방지) */
.detail-page .spec-info-warn { flex: 0 0 100%; margin-top: 0.5rem; font-size: 0.8125rem; font-weight: 400; line-height: 1.5; color: var(--text-secondary); word-break: keep-all; }
.detail-page .spec-info-warn b { font-weight: 700; color: var(--color-red); }
.detail-page .spec-info-more { display: inline-flex; align-items: center; gap: 0.1875rem; font-size: 0.8125rem; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.detail-page .spec-info-more .v2-icon { width: 1.0625rem; height: 1.0625rem; color: var(--text-tertiary); transition: transform 0.2s; }
.detail-page .spec-fold[open] .spec-info-more .v2-icon { transform: rotate(180deg); }
.detail-page .spec-info-more-t::after { content: "자세히보기"; }
.detail-page .spec-fold[open] .spec-info-more-t::after { content: "접기"; }
.detail-page .spec-info-body { padding: 0.25rem 1.5rem 1.5rem; }
.detail-page .spec-group + .spec-group { margin-top: 1.375rem; }
.detail-page .spec-group-head { font-size: 0.9375rem; font-weight: 800; color: var(--text-secondary); margin-bottom: 0.625rem; }
.detail-page .spec-grid { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
.detail-page .spec-item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.875rem 1rem; background: var(--gray-15); border-radius: var(--radius-md); }
.detail-page .spec-item span { font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); }
.detail-page .spec-item b { font-size: 0.9375rem; font-weight: 800; color: var(--text-main); text-align: right; }
.detail-page .spec-item b.rate { color: var(--color-main); }
@media (min-width: 460px) { .detail-page .spec-grid { grid-template-columns: 1fr 1fr; } }

/* ── 공통 섹션 ──────────────────────────────── */
.detail-page .pd-section-title { display: flex; align-items: center; gap: 0.375rem; font-size: 1rem; font-weight: 800; color: var(--text-main); margin-bottom: 1rem; }
.detail-page .pd-section-title .v2-icon { width: 1.125rem; height: 1.125rem; color: var(--color-main); }


/* 4. 혜택 (결합·제휴카드) */
.detail-page .pd-benefit-grid { display: flex; flex-direction: column; gap: 0.625rem; }
.detail-page .pd-benefit { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.875rem; background: var(--gray-15); border-radius: var(--radius-md); color: inherit; cursor: pointer; transition: background 0.16s, color 0.16s; }
.detail-page .pd-benefit:hover { background: var(--blue-soft); }   /* 탭 가능 어포던스 — 배경 틴트 + 화살표 블루(§4.8: 호버는 그림자 대신 배경 변화) */
.detail-page .pd-benefit:hover .pd-benefit-arrow { color: var(--color-main); }
.detail-page .pd-benefit:active { background: var(--blue-110); }
.detail-page .pd-benefit:focus-visible { outline: 2px solid var(--color-main); outline-offset: 2px; }
.detail-page .pd-benefit-tag { flex-shrink: 0; font-size: 0.6875rem; font-weight: 800; padding: 0.1875rem 0.5rem; border-radius: var(--radius-sm); }
.detail-page .pd-tag-amber { color: var(--badge-recommend-text); background: var(--badge-recommend-bg); }   /* 앰버 골드 — 블루는 CTA 전용, 혜택 배지는 '이득'의 따뜻한 파스텔로 분리(§4.2 트러스트블루&파스텔) */
.detail-page .pd-benefit-name { flex: 1; min-width: 0; font-size: 0.875rem; font-weight: 600; color: var(--text-main); line-height: 1.45; }
.detail-page .pd-benefit-arrow { flex-shrink: 0; align-self: center; width: 1.125rem; height: 1.125rem; color: var(--text-tertiary); }
.detail-page .pd-benefit-name b { color: var(--color-main); }
.detail-page .pd-benefit-name i { display: block; margin-top: 0.1875rem; font-style: normal; font-size: 0.75rem; font-weight: 500; color: var(--text-tertiary); line-height: 1.5; }

/* 플립·모바일(≤679) — 좁은 폭에선 배지가 이름을 밀어 오른쪽에서 들쭉날쭉 감김.
   배지를 이름 위로 스택 → 이름이 풀폭 사용, 좌측 정렬 정돈. 화살표는 우측 세로 중앙 고정 */
@media (max-width: 679px) {
  .detail-page .pd-benefit {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "tag  arrow"
      "name arrow";
    column-gap: 0.625rem;
    row-gap: 0.375rem;
    align-items: center;
  }
  .detail-page .pd-benefit-tag  { grid-area: tag; justify-self: start; }
  .detail-page .pd-benefit-name { grid-area: name; }
  .detail-page .pd-benefit-arrow { grid-area: arrow; }
}
/* 플립(≤360) — 패딩 한 단계 더 축소 */
@media (max-width: 360px) {
  .detail-page .pd-benefit { padding: 0.75rem; }
}

/* 5. 사은품 — 클릭 가능한 캡슐 행(썸네일+텍스트+화살표) → 상세 모달. 요금제 리스트 사은품 UI 참고 */
/* 기본=플립(≤360): 좁은 폭 → 패딩·썸네일 콤팩트(터치타겟은 유지) */
.detail-page .pd-gift-grid { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
.detail-page .pd-gift-grid > li { display: flex; }   /* li는 그리드 stretch로 같은 행 높이 동일 → li를 flex로 만들어 자식 버튼이 li 높이를 채움(이름 2줄인 카드와 같은 행 카드 높이 일치) */
.detail-page .pd-gift { display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.75rem; text-align: left; background: var(--gray-15); border: none; border-radius: var(--radius-md); cursor: pointer; font-family: inherit; transition: background 0.16s, color 0.16s; }
.detail-page .pd-gift:hover { background: var(--blue-soft); }   /* 탭 가능 어포던스 — 배경 틴트 + 화살표 블루(§4.8: 호버는 그림자 대신 배경 변화) */
.detail-page .pd-gift:hover .pd-gift-arrow { color: var(--color-main); }
.detail-page .pd-gift:active { background: var(--blue-110); }
.detail-page .pd-gift:focus-visible { outline: 2px solid var(--color-main); outline-offset: 2px; }
.detail-page .pd-gift-thumb { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); overflow: hidden; background: var(--color-white); }
.detail-page .pd-gift-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-page .pd-gift-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.detail-page .pd-gift-name { font-size: 0.875rem; font-weight: 600; color: var(--text-main); line-height: 1.4; }
.detail-page .pd-gift-period { font-size: 0.8125rem; font-weight: 400; color: var(--text-secondary); }   /* 13px · 한 톤 낮춤 secondary(#666) */
.detail-page .pd-gift-arrow { flex-shrink: 0; width: 1.125rem; height: 1.125rem; color: var(--text-tertiary); }
/* 모바일(≥361): 표준 여백 */
@media (min-width: 361px) {
  .detail-page .pd-gift-grid { gap: 0.625rem; }
  .detail-page .pd-gift { gap: 0.75rem; padding: 0.875rem; }
  .detail-page .pd-gift-thumb { width: 2.75rem; height: 2.75rem; }
  .detail-page .pd-gift-info { gap: 0.1875rem; }
}
/* 폴드·PC(≥680): 2열 카드 → 여백·썸네일 확대로 여유 있게 */
@media (min-width: 680px) {
  .detail-page .pd-gift-grid { gap: 0.75rem; }
  .detail-page .pd-gift { gap: 0.875rem; padding: 1rem 1.125rem; }
  .detail-page .pd-gift-thumb { width: 3rem; height: 3rem; }
}

/* ── 무료 쿠폰 선택(선불 특화/야그) — 1종 선택 라디오 카드. 표 대신 pd-gift 시각 언어 + 선택 상태(:has).
   카드 = 단일 행(라디오·썸네일·쿠폰명 + '안내' 칩). 안내사항은 인라인 대신 공통 팝오버(pd-bill-pop)로 표시.
   접기 아코디언(spec-fold) 없이 항상 펼침 — 정적 헤더(pd-coupon-head)가 summary 여백을 대신 */
.detail-page .pd-coupon-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 0.75rem; padding: 1.25rem 1.5rem; }
.detail-page .pd-coupon-head .pd-section-title { margin-bottom: 0; }
.detail-page .pd-coupon-list { display: grid; grid-template-columns: 1fr; gap: 0.625rem; }   /* 사은품(pd-gift-grid)과 동일: 1열 → 폴드·PC 2열 */
.detail-page .pd-coupon { position: relative; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0.875rem; border-radius: var(--radius-md); background: var(--gray-15); border: 1.5px solid transparent; transition: background 0.16s, border-color 0.16s; }
.detail-page .pd-coupon:hover { background: var(--blue-soft); }   /* 탭 가능 어포던스 — 사은품(pd-gift)과 동일 호버 배경 틴트(§4.8: 그림자 대신 배경 변화) */
.detail-page .pd-coupon:active { background: var(--blue-110); }
.detail-page .pd-coupon:has(.pd-coupon-input:checked) { border-color: var(--color-main); background: var(--color-main-bg); }   /* 선택 = 블루 테두리 + 온화 파스텔 배경(:hover보다 명시도 높아 선택 카드는 파스텔 유지) */
.detail-page .pd-coupon:has(.pd-coupon-input:focus-visible) { outline: 2px solid var(--color-main); outline-offset: 2px; }
/* 선택 영역(라벨) — 썸네일 + 쿠폰명. 클릭 시 라디오 선택(선택 표시는 썸네일 코너 체크) */
.detail-page .pd-coupon-select { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.75rem; cursor: pointer; }
.detail-page .pd-coupon-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }   /* 시각 숨김·접근성(포커스) 유지 */
.detail-page .pd-coupon-thumb { position: relative; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); background: var(--color-white); }   /* overflow:hidden 제거 — 코너 체크 뱃지가 잘리지 않게(로고는 img border-radius로 라운딩) */
.detail-page .pd-coupon-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: inherit; }
.detail-page .pd-coupon-name { flex: 1; min-width: 0; font-size: 0.875rem; font-weight: 600; color: var(--text-main); line-height: 1.35; }
/* 선택 표시 — 썸네일 좌상단 코너 체크(옵션 C). 미선택=무표시 / 선택=메인블루 원+흰 체크. 로고는 항상 그대로 노출 + 카드 전체 강조와 병행 */
.detail-page .pd-coupon-thumb::after { content: ""; position: absolute; top: -0.375rem; left: -0.375rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; box-shadow: 0 1px 3px rgba(11, 15, 26, 0.22); opacity: 0; transform: scale(0.6); transition: opacity 0.15s, transform 0.15s; pointer-events: none; }
.detail-page .pd-coupon:has(.pd-coupon-input:checked) .pd-coupon-thumb::after { opacity: 1; transform: scale(1); background: var(--color-main) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.625rem no-repeat; }
/* 안내 트리거 — 쿠폰명 옆 인라인 ⓘ 아이콘(쿠폰명 span 안). <button>이라 라벨 안이어도 클릭 시 라디오 미선택(HTML 예외). 버튼 기본 스타일 리셋 */
.detail-page .pd-coupon-info { flex-shrink: 0; display: inline-flex; align-items: center; margin-left: auto; padding: 0; border: none; background: none; cursor: pointer; }   /* margin-left:auto + 이름 flex:1 → 전 해상도 카드 우측 끝 고정 */
/* 안내 아이콘 — info 라인 아이콘(공유 mask). 미선택=진회색 / 선택=메인블루로 카드 상태와 연동 */
.detail-page .pd-coupon-info-ic { width: 1.125rem; height: 1.125rem; color: var(--text-tertiary); transition: color 0.15s; }
.detail-page .pd-coupon-info:hover .pd-coupon-info-ic { color: var(--color-main); }
.detail-page .pd-coupon:has(.pd-coupon-input:checked) .pd-coupon-info-ic { color: var(--color-main); }
/* 팝오버 미사용 — 안내는 전 기기 팝업(couponNoteModal: ≤1023 바텀시트·≥1024 중앙 모달)으로 통일해 관리 단순화. 이 패널은 JS가 내용을 읽는 숨김 데이터 소스로만 유지 */
.detail-page .pd-coupon-info .pd-bill-pop-panel { display: none; }
.detail-page .pd-coupon-pop-head { display: block; margin-bottom: 0.5rem; font-size: 0.8125rem; font-weight: 800; color: var(--text-main); }
/* 안내사항 — 유의사항 팝업(pd-terms-notes)과 동일 스타일: 15px·고대비(primary)·행간 1.6·파란 도트 불릿. 팝오버·바텀시트 양쪽 동일 렌더 위해 ul 리셋 명시 */
.detail-page .pd-coupon-notes { margin: 0; padding: 0; list-style: none; }
.detail-page .pd-coupon-notes li { position: relative; padding-left: 0.9375rem; font-size: 0.9375rem; color: var(--text-primary); line-height: 1.6; }
.detail-page .pd-coupon-notes li + li { margin-top: 0.6875rem; }
.detail-page .pd-coupon-notes li::before { content: ""; position: absolute; left: 0.0625rem; top: 0.625rem; width: 0.25rem; height: 0.25rem; border-radius: 50%; background: var(--color-main); }
.detail-page .pd-coupon-hint { margin-top: 0.75rem; font-size: 0.75rem; color: var(--text-tertiary); line-height: 1.5; }
@media (min-width: 680px) {   /* 폴드 — 사이드바로 본문이 좁아 1열 유지(2열은 PC부터). 카드 스케일만 확대 */
  .detail-page .pd-coupon { gap: 0.625rem; padding: 0.875rem 1.125rem; }
  .detail-page .pd-coupon-select { gap: 0.875rem; }
  .detail-page .pd-coupon-thumb { width: 2.75rem; height: 2.75rem; }
  .detail-page .pd-coupon-name { font-size: 0.9375rem; }
}
/* 상품지급조건 버튼 — 섹션 헤더 우측 아웃라인 칩(모달 트리거). 쿠폰 선택 전 발견성↑ */
.detail-page .pd-coupon-terms { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.125rem; padding: 0.5rem 0.625rem 0.5rem 0.8125rem; border: 1px solid var(--border-light); border-radius: var(--radius-pill); background: var(--color-white); font-family: inherit; font-size: 0.8125rem; font-weight: 700; color: var(--text-secondary); cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.detail-page .pd-coupon-terms:hover { border-color: var(--color-main); color: var(--color-main); }
.detail-page .pd-coupon-terms .v2-icon { width: 0.9375rem; height: 0.9375rem; }

/* 야그 무료쿠폰 미선택 경고 팝업 → 공통 경고 템플릿 .v2-alert 사용(basic/common.css). 페이지 전용 스타일 없음. */

/* ── 상품지급조건 모달 — 이미지 퍼블리싱: 3스텝 카드(번호 배지) + 블루 그라데이션 예시 흐름 바 ── */
.detail-page .pd-terms-sheet { --modal-max: 40rem; }
/* 스텝 — 세로 타임라인(B): 좌측 번호 원 + 연결선, 우측 라벨·설명. 모달(세로 폭)에 최적 */
.detail-page .pd-terms-steps { position: relative; padding: 0.25rem 0 0.25rem 0.25rem; }
.detail-page .pd-terms-step { position: relative; display: flex; align-items: center; gap: 0.875rem; padding-bottom: 1.125rem; }   /* 메인 문구 한 줄 → 번호 원과 세로 가운데 정렬 */
.detail-page .pd-terms-step:last-child { padding-bottom: 0; }
.detail-page .pd-terms-step::before { content: ""; position: absolute; left: 0.9375rem; top: 2rem; bottom: 0; width: 2px; background: var(--blue-border); }   /* 스텝 연결선 */
.detail-page .pd-terms-step:last-child::before { display: none; }
.detail-page .pd-terms-num { flex-shrink: 0; z-index: 1; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-main); color: var(--color-white); font-size: 0.8125rem; font-weight: 800; }
/* 메인 문구 = 프로세스 키워드(서브 설명 제거 — 중복). 이것만으로 가입→즉시 지급→매월 지급이 스캔됨 */
.detail-page .pd-terms-key { flex: 1; min-width: 0; font-size: 0.9375rem; font-weight: 800; color: var(--text-main); letter-spacing: -0.01em; line-height: 1.4; }
.detail-page .pd-terms-key small { font-size: 0.8125rem; font-weight: 600; color: var(--color-main); }   /* '(1시간 이내 문자)' 강조 — 메인 블루 */
/* 예시 — 라이트(G): 회색 박스·테두리 없음, 배지만 #FDE68A. 스텝(주인공)을 안 가리는 저주목 보조 설명 */
.detail-page .pd-terms-example { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.75rem; margin-top: 1.5rem; padding: 0.875rem 1rem; border-radius: var(--radius-md); background: var(--gray-15); }
.detail-page .pd-terms-ex-badge { flex-shrink: 0; padding: 0.1875rem 0.5rem; border-radius: var(--radius-xs); background: #FDE68A; color: var(--text-main); font-size: 0.6875rem; font-weight: 800; }
.detail-page .pd-terms-ex-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.detail-page .pd-terms-ex-item { font-size: 0.8125rem; font-weight: 700; color: var(--text-primary); line-height: 1.4; }
.detail-page .pd-terms-ex-item small { font-weight: 500; color: var(--text-secondary); }
.detail-page .pd-terms-example .pd-terms-ex-hl { color: var(--color-main); font-weight: 700; }   /* '지급' 결과 강조 — 메인 블루 */
.detail-page .pd-terms-ex-arrow { font-style: normal; font-weight: 700; color: var(--text-tertiary); }
/* 모달 내 서브 섹션 제목(상품지급조건 / 유의사항) */
.detail-page .pd-terms-subhead { font-size: 0.9375rem; font-weight: 800; color: var(--text-main); margin-bottom: 1.5rem; }   /* 하단 여백 = 첫 스텝 번호 배지(위로 걸침) 공간 확보 */
.detail-page .pd-terms-subhead-notes { margin-top: 2rem; margin-bottom: 0.75rem; }
/* 유의사항 — 도트 불릿. 폰트·대비 키워 가독성↑(고객 인지). pd-acc-list와 동일 고대비(primary #444) */
.detail-page .pd-terms-notes li { position: relative; padding-left: 0.9375rem; font-size: 0.9375rem; color: var(--text-primary); line-height: 1.6; }
.detail-page .pd-terms-notes li + li { margin-top: 0.6875rem; }
.detail-page .pd-terms-notes li::before { content: ""; position: absolute; left: 0.0625rem; top: 0.625rem; width: 0.25rem; height: 0.25rem; border-radius: 50%; background: var(--color-main); }
.detail-page .pd-terms-notes b { color: var(--text-main); font-weight: 700; }
.detail-page .pd-terms-notes a { color: var(--color-main); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.detail-page .pd-terms-contact { display: block; margin-top: 0.3125rem; font-size: 0.875rem; color: var(--text-secondary); line-height: 1.55; }

/* 사은품 상세 모달 — 미니멀 스타일: 센터 히어로 · 라벨↔값 메타 · 유의사항 아코디언 · 큰 풀폭 CTA.
   반응형: 플립·모바일·PC=세로 1열(메타 회색 카드 + 유의사항 아코디언) / 폴드(680~1023)만 본문 2열(메타 | 유의사항 펼침)로 스크롤 최소화 */
.detail-page .gift-sheet { --modal-max: 26rem; position: relative; }

/* 헤더 = 센터 히어로(큰 썸네일·이름 가운데). 닫기(X)는 우상단 절대배치 */
.gift-sheet .gift-head { flex-direction: column; align-items: stretch; gap: 0; margin-bottom: 1.375rem; }
.gift-sheet .gift-head .modal-close { position: absolute; top: 0.75rem; right: 0.875rem; align-self: auto; z-index: 2; }
.gift-sheet .gift-head-title { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; }
.gift-sheet .gift-head-thumb { flex-shrink: 0; width: 4.5rem; height: 4.5rem; border-radius: var(--radius-lg); overflow: hidden; background: var(--gray-15); }
.gift-sheet .gift-head-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gift-sheet .gift-head-text { min-width: 0; }
.gift-sheet .gift-head-name { font-size: 1.125rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }   /* 베이스=모바일 18px (폴드·PC는 아래서 확대) */
.gift-sheet .gift-head-summary { display: block; margin-top: 0.3125rem; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); line-height: 1.45; }   /* 14px */

/* 메타 = 라이트그레이 캡슐 카드(명도로 '정보' 묶음 분리, Crisp Bento). 전 해상도 공통.
   좁은 화면(단일 컬럼)=라벨↔값 가로 한 줄 / 폴드·PC(2열 좁은 칸)=세로 스택(아래 ≥680에서 전환) */
.gift-sheet .gift-detail-meta { background: var(--gray-15); border-radius: var(--radius-lg); padding: 0.25rem 1.125rem; }
.gift-sheet .gift-meta-row { display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.8125rem 0; }
.gift-sheet .gift-meta-row + .gift-meta-row { border-top: 1px solid var(--border-light); }
.gift-sheet .gift-meta-row dt { font-size: 0.875rem; font-weight: 500; color: var(--text-tertiary); flex-shrink: 0; }   /* 14px (PC만 15px) */
.gift-sheet .gift-meta-row dd { font-size: 0.875rem; font-weight: 700; color: var(--text-main); text-align: right; line-height: 1.4; }

/* 유의사항 = 흰 본문(회색 메타 카드와 명도 대비). 좁은 화면=기본 펼침 아코디언 / 폴드·PC=상시 펼침 2열(아래 ≥680)
   reset가 native 접힘을 덮어 :not([open])로 명시 숨김 */
.gift-sheet .gift-terms { margin-top: 0.875rem; }
.gift-sheet .gift-terms-sum { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 0.9375rem 0; font-size: 0.9375rem; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.gift-sheet .gift-terms-sum::-webkit-details-marker { display: none; }
.gift-sheet .gift-terms-chev { width: 1.125rem; height: 1.125rem; color: var(--text-tertiary); transition: transform 0.2s; }
.gift-sheet .gift-terms[open] .gift-terms-chev { transform: rotate(180deg); }
.gift-sheet .gift-terms:not([open]) .gift-detail-notes { display: none; }
/* 관리자 에디터가 li 대신 p로 등록 → li·p 양쪽 지원(p는 기본 마진 리셋) */
.gift-sheet .gift-detail-notes { list-style: none; padding: 0 0 0.625rem; }
.gift-sheet .gift-detail-notes li,
.gift-sheet .gift-detail-notes p { margin: 0; font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; }
.gift-sheet .gift-detail-notes li + li,
.gift-sheet .gift-detail-notes p + p { margin-top: 0.375rem; }

/* 푸터 = 이벤트 바로가기(메인블루 CTA) · 응모·다운로드(회색 보조) 순. 세로 풀폭 스택. .modal-foot가 하단 고정 */
.gift-sheet .gift-foot { display: flex; flex-direction: column; gap: 0.5rem; }
.gift-sheet .gift-foot .v2-btn { min-height: 3rem; font-size: 0.9375rem; }
/* 응모·다운로드 2열(폴드 제외) — flex:1이라 버튼 1개만 있어도 가로 풀폭, 2개면 반반 */
.gift-sheet .gift-foot-row { display: flex; gap: 0.5rem; }
.gift-sheet .gift-foot-row .v2-btn { flex: 1 1 0; min-width: 0; }
/* 이벤트 바로가기 = 메인블루 CTA */
.gift-sheet .gift-btn-event { background: var(--color-main); color: var(--color-white); box-shadow: none; }
.gift-sheet .gift-btn-event:hover { background: var(--color-main-hover); }
.gift-sheet .gift-btn-event .v2-icon { width: 1rem; height: 1rem; }   /* 바로가기 어포던스 화살표 */
/* 응모 = 블루 아웃라인(보조 CTA) — 이벤트(솔리드블루)보다 한 단계 아래, 다운로드(회색)보다 위 */
.gift-sheet .gift-btn-apply { background: var(--color-white); color: var(--color-main); border: 1.5px solid var(--color-main); box-shadow: none; }
.gift-sheet .gift-btn-apply:hover { background: var(--blue-soft); }
/* 다운로드 = 회색 보조 */
.gift-sheet .gift-btn-download { background: var(--gray-200); color: var(--text-primary); box-shadow: none; }
.gift-sheet .gift-btn-download:hover { background: var(--gray-300); }

/* 모바일·플립·PC = 단일 컬럼(히어로 → 메타 → 유의사항 아코디언 → 세로 버튼). 유의사항 20줄+는 공통 셸 본문 스크롤로 흡수. */

/* 폴드(680~1023) 전용 — 가로 공간 활용 2열(4.5): 회색 메타 카드(좌) | 유의사항 상시 펼침(우).
   폴드는 펼침 시 가로가 넓어 2열로 짧은 메타(좌)와 긴 유의사항(우)을 나란히 둬 세로 스크롤을 줄인다.
   PC(≥1024)는 단일 컬럼(모바일과 동일) 유지 — 중앙 26rem 모달에 1단 세로. 폴드만 2열.
   히어로는 상단 풀폭(가로 정렬), 버튼은 하단 풀폭 가로. 본문이 넘치면 공통 .modal-body가 스크롤(헤더·푸터 고정). */
@media (min-width: 680px) and (max-width: 1023px) {
  .detail-page .gift-sheet { --modal-max: 46rem; }   /* 비교·필터 모달과 같은 결의 넓은 폭 — 2열을 담을 가로 공간 확보 */
  .gift-sheet .gift-head-title { flex-direction: row; align-items: center; text-align: left; gap: 1rem; }   /* 히어로 = 썸네일 좌 + 텍스트 우 */
  .gift-sheet .gift-head-name { font-size: 1.25rem; }       /* 폴드 20px */
  .gift-sheet .gift-head-summary { font-size: 0.9375rem; }  /* 폴드 15px */
  .gift-sheet .modal-body { display: grid; grid-template-columns: 15rem 1fr; gap: 0 1.75rem; align-items: start; }
  /* 좌측 메타 — 유의사항(우)이 길어 modal-body가 스크롤될 때 왼쪽에 고정(sticky). 그리드 sticky 조건인 align-self:start 유지 */
  .gift-sheet .gift-detail-meta { align-self: start; position: sticky; top: 0; }
  /* 좁은 사이드 칸(15rem) — 라벨↔값 가로 한 줄은 긴 날짜값이 카드 밖으로 넘침 → 라벨(위)/값(아래) 세로 스택 */
  .gift-sheet .gift-meta-row { flex-direction: column; align-items: stretch; gap: 0.1875rem; padding: 0.6875rem 0; }
  .gift-sheet .gift-meta-row dd { text-align: left; }
  .gift-sheet .gift-terms { margin-top: 0; }   /* 우측 컬럼 — 긴 유의사항을 세로로 흡수(좌측 회색 카드와 명도로 구분) */
  .gift-sheet .gift-terms-sum { padding: 0 0 0.625rem; cursor: default; pointer-events: none; font-size: 0.9375rem; font-weight: 800; color: var(--text-main); }
  .gift-sheet .gift-terms-chev { display: none; }
  .gift-sheet .gift-terms .gift-detail-notes { display: block !important; }   /* 2열에선 항상 펼침(아코디언 비활성) */
  /* 폴드(넓은 모달) — 3버튼 가로 1행 균등. 이벤트(1) + 응모·다운로드 행(2, 내부 flex:1) = 3열 */
  .gift-sheet .gift-foot { flex-direction: row; gap: 0.625rem; }
  .gift-sheet .gift-foot > .v2-btn { flex: 1 1 0; min-width: 0; }
  .gift-sheet .gift-foot-row { flex: 2; gap: 0.625rem; }
  .gift-sheet .gift-foot .v2-btn { min-height: 3.25rem; }
}

/* 플립(≤360) — 히어로만 한 단계 압축. 메타는 모바일·PC와 동일(비폴드 전 해상도 통일) */
@media (max-width: 360px) {
  .gift-sheet .gift-head-thumb { width: 3.75rem; height: 3.75rem; }
  .gift-sheet .gift-head-name { font-size: 1.0625rem; }     /* 플립 17px */
  .gift-sheet .gift-head-summary { font-size: 0.8125rem; }  /* 플립 13px */
}

/* PC(≥1024) — 중앙 모달: 히어로·메타 한 단계 확대(숫자 권력화) */
@media (min-width: 1024px) {
  .gift-sheet .gift-head-name { font-size: 1.375rem; }      /* PC 22px */
  .gift-sheet .gift-head-summary { font-size: 0.9375rem; }  /* PC 15px */
  .gift-sheet .gift-meta-row dt,
  .gift-sheet .gift-meta-row dd { font-size: 0.9375rem; }   /* PC 15px */
}

/* 6. 꼭 확인해주세요! — 풀폭 흰 밴드(약관). 컨테이너 밖 main 직계라 화면 폭 100%(100vw 불필요).
   콘텐츠는 .v2-container(--content-max 1200px) 중앙 정렬. 회색 페이지 → 흰 밴드 명도 전환으로 영역 분리 */
.detail-page .pd-terms-band { margin-top: 1.75rem; padding: 2rem 0 2.5rem; background: var(--color-white); }

/* 꼭 확인해주세요! — 심플·가독성 헤더: 잉크색 제목(주의 아이콘만 포인트) + 전체보기 아웃라인 버튼 */
.detail-page .pd-terms-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }   /* 플립·모바일 12px (폴드·PC는 아래서 확대) */
.detail-page .pd-terms-title { display: flex; align-items: center; gap: 0.4375rem; font-size: 1.125rem; font-weight: 800; color: var(--text-main); }
.detail-page .pd-terms-title .v2-icon { width: 1.25rem; height: 1.25rem; color: var(--label-orange-text); }
.detail-page .pd-terms-toggle { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.4375rem 0.875rem; background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-pill); font-family: inherit; font-size: 0.8125rem; font-weight: 700; color: var(--text-secondary); cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.detail-page .pd-terms-toggle:hover { border-color: var(--text-tertiary); color: var(--text-main); }
.detail-page .pd-terms-toggle .v2-icon { width: 1rem; height: 1rem; color: var(--text-tertiary); transition: transform 0.2s; }
.detail-page .pd-terms-toggle.open .v2-icon { transform: rotate(180deg); }

/* 유의사항 아코디언 — 가로 테두리형: 항목은 가로 구분선으로만 분리, 열리면 바디만 옅은 회색 밴드로 헤더(흰)↔바디(회색)·형제를 명도로 구분 */
.detail-page .pd-acc { border-top: 1px solid var(--border-light); }
.detail-page .pd-acc:first-of-type { border-top: none; }
.detail-page .pd-acc summary { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 0; font-size: 0.9375rem; font-weight: 700; color: var(--text-main); cursor: pointer; list-style: none; }
.detail-page .pd-acc summary::-webkit-details-marker { display: none; }
.detail-page .pd-acc summary::after { content: ""; width: 1rem; height: 1rem; flex-shrink: 0; background: var(--text-tertiary); -webkit-mask: url(/shop/assets/images/svg/chevron-down.svg) center/contain no-repeat; mask: url(/shop/assets/images/svg/chevron-down.svg) center/contain no-repeat; transition: transform 0.2s; }
.detail-page .pd-acc[open] summary::after { transform: rotate(180deg); }
/* 활성(열림) 상태 — 타이틀 한 단계 더 굵게 + 바디 명도 밴드로 헤더/바디·형제 구분 */
.detail-page .pd-acc[open] summary { font-weight: 700; }
/* 관리자 에디터가 li 대신 p로 등록 → li·p 양쪽 지원(p는 기본 마진 리셋) */
.detail-page .pd-acc-list { background: var(--gray-15); border-radius: var(--radius-md); padding: 0.875rem; margin-bottom: 0.875rem; }
.detail-page .pd-acc-list li { position: relative; margin: 0; padding-left: 0.75rem; font-size: 0.8125rem; color: var(--text-primary); line-height: 1.6; }   /* 고대비 — primary(#444)로 유의사항 가독성↑ */
.detail-page .pd-acc-list li + li { margin-top: 0.5rem; }   /* 줄간격(1.6)보다 크게 — 여러 줄짜리 항목이 이어질 때 항목 경계가 보이게 */
.detail-page .pd-acc-list li::before { content: ""; position: absolute; left: 0; top: 0.5rem; width: 0.1875rem; height: 0.1875rem; border-radius: 50%; background: var(--text-tertiary); }
.detail-page .pd-acc-list li b { color: var(--text-main); font-weight: 800; }
/* 순서목록(<ol>) — 브라우저 기본 번호 사용(11·12… 다자리 수도 자동 정렬). 도트 마커 제거.
   ★ list-style은 li에 직접 걸어야 함 — reset의 `li { list-style:none }`이 li에 직접 적용돼 ol에만 주면 계승값을 덮어 번호가 안 나옴 */
.detail-page .pd-acc-list ol { padding-left: 1rem; }
.detail-page .pd-acc-list ol > li { list-style: decimal; padding-left: 0; }
.detail-page .pd-acc-list ol > li::before { content: none; }
/* 유의사항 서브 제목 — 에디터가 넣는 h2~h4. 본문(li, ~16px)보다 크고 굵게 + 위아래 여백으로 구획 */
.detail-page .pd-acc-list h2,
.detail-page .pd-acc-list h3,
.detail-page .pd-acc-list h4 { margin: 0.875rem 0 0.5rem; color: var(--color-black); line-height: 1.4; }
.detail-page .pd-acc-list h2 { font-size: 1rem; font-weight: 800; }        /* 16px (모바일·플립) — 폴드 17·PC 18 */
.detail-page .pd-acc-list h3 { font-size: 0.9375rem; font-weight: 700; }   /* 15px — 폴드 16·PC 17 */
.detail-page .pd-acc-list h4 { font-size: 0.875rem; font-weight: 700; }    /* 14px — 폴드 15·PC 16 */
.detail-page .pd-acc-list h2:first-child,
.detail-page .pd-acc-list h3:first-child,
.detail-page .pd-acc-list h4:first-child { margin-top: 0; }   /* 맨 위 제목은 상단 여백 제거 */

/* 유의사항 내 표 — 웹에디터(CKEditor) 출력: <figure class="table"><table>…</table></figure>, 헤더셀은 <th>.
   gray-15 박스 안에서 흰 셀 + 옅은 테두리로 명도 분리. 좁은 화면의 넓은 표는 표만 가로 스크롤(레이아웃 보호) */
.detail-page .pd-acc-list figure.table { margin: 0.75rem 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.detail-page .pd-acc-list table { width: 100%; border-collapse: collapse; background: var(--color-white); font-size: 0.8125rem; line-height: 1.5; }
.detail-page .pd-acc-list th,
.detail-page .pd-acc-list td { padding: 0.5rem 0.625rem; border: 1px solid var(--border-light); text-align: left; vertical-align: top; color: var(--text-primary); word-break: keep-all; }
.detail-page .pd-acc-list th { background: var(--gray-100); font-weight: 700; color: var(--text-main); }   /* 헤더행 — 흰 셀보다 한 톤 진하게(gray-100) */
.detail-page .pd-acc-list figure.table figcaption { margin-top: 0.375rem; font-size: 0.75rem; color: var(--text-tertiary); text-align: center; }
/* 셀 안 문단(에디터가 표 셀에 감싸는 <p>) — 브라우저 기본 마진만 정리(목록 도트는 li 전용이라 셀엔 안 붙음) */
.detail-page .pd-acc-list td p,
.detail-page .pd-acc-list th p { margin: 0; }
.detail-page .pd-acc-list td p + p,
.detail-page .pd-acc-list th p + p { margin-top: 0.25rem; }

/* ── 7. 하단 고정 CTA ───────────────────────── */
.detail-page .pd-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--color-white); border-top: 1px solid var(--border-light); padding: 0.75rem 0; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06); }
.detail-page .pd-cta-inner { display: flex; align-items: center; gap: 1rem; }
.detail-page .pd-cta-price { display: flex; flex-direction: column; flex-shrink: 0; }
.detail-page .pd-cta-name { font-size: 0.75rem; font-weight: 700; color: var(--text-tertiary); }
.detail-page .pd-cta-price strong { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.03em; color: var(--color-main); }
.detail-page .pd-cta-price strong em { font-size: 0.875rem; font-style: normal; }
.detail-page .pd-cta-price strong i { font-size: 0.75rem; font-style: normal; font-weight: 600; color: var(--text-tertiary); margin-left: 0.25rem; }
.detail-page .pd-cta-btn { flex: 1; max-width: 22rem; margin-left: auto; gap: 0.25rem; }
.detail-page .pd-cta-btn .v2-icon { width: 1.125rem; height: 1.125rem; }

/* ─────────────── 반응형 (플립 ≤360 / 모바일 ≤679 / 폴드 680~1023 / PC ≥1024) ─────────────── */
/* 폴드·PC: 상세 안내 3열 + 할인·혜택 2열 + 사은품 2열 (가로 공간 활용) */
@media (min-width: 680px) {
  .detail-page .v2-clean-card { padding: 1.5rem; }   /* 폴드↑ 카드 패딩 확대(리스트 plan-card-body와 동일 결) */
}
/* 사은품·쿠폰 2열 — PC(≥1024)부터. 폴드(680~1023)는 사이드바로 본문이 좁아 긴 이름 줄바꿈·답답함 방지를 위해 1열 유지 */
@media (min-width: 1024px) {
  .detail-page .pd-gift-grid { grid-template-columns: 1fr 1fr; }
  .detail-page .pd-coupon-list { grid-template-columns: 1fr 1fr; }
}

/* 폴드·PC(≥680): 본문 + 우측 sticky 가격·CTA 사이드바 2단.
   폴드에서도 가격·CTA가 사이드바에 담겨 본문이 풀폭으로 늘어나지 않게(과넓은 CTA·휑한 여백 제거, §4.5 가로공간 활용)
   폴드 저구간(680~767)도 동일 구조 + 압축 사이즈로 사이드바 노출 */
@media (min-width: 680px) {
  .detail-page .pd-main { padding: 1.25rem 0 0; }
  /* 본문(좌) + 가격 카드(우) 2단. 가격은 우측 열 전체(두 행)를 차지해 본문 길이와 높이가 분리됨 → sticky 자연 동작 */
  .detail-page .pd-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 11.5rem;   /* 폴드 저구간 압축 사이드바 — .pd-save column 전환으로 1rem 추가 축소 */
    grid-template-areas: "hero sidebar" "content sidebar";
    grid-template-rows: auto 1fr;   /* content 행 1fr — 사이드바(2행 span)가 좌측보다 길 때 남는 높이가 hero↔content 사이가 아닌 content '아래'로 가게(접힘 시 중간 공백 제거) */
    align-items: start;
    column-gap: 0.75rem;
    row-gap: 0.75rem;
  }

  .detail-page .pd-hero { grid-area: hero; }
  .detail-page .pd-content { grid-area: content; }
  /* 사이드바 wrapper — sidebar 영역에 3 카드(가격·절약·CTA) 세로 스택 + 함께 sticky */
  .detail-page .pd-sidebar { grid-area: sidebar; position: sticky; top: calc(var(--header-h) + 1rem); z-index: 5; align-self: start; display: flex; flex-direction: column; gap: 0.5rem; }   /* top: 고정 헤더 높이(--header-h) + 1rem 여백 — 헤더에 안 가리게(폴드 4rem·PC 4.5rem 자동 반영). z-index: sticky 스태킹으로 '자세히' 팝업 노출, 고정 CTA(40)·비교바(200)보단 아래 */
  .detail-page .pd-cost { padding: 1rem; }
  .detail-page .pd-cta { display: none; }   /* 하단 고정 CTA는 사이드바 가격 카드 CTA로 대체 */
  .detail-page .pd-terms-band { margin-top: calc(1.5rem - 2px); }

  /* 폴드 저구간 — 본문 카드 패딩 압축 (사이드바 도입으로 본문 폭 좁아짐, ≈412px) */
  .detail-page .v2-clean-card { padding: 1.125rem; }

  /* 폴드↑ 사이드바 — 모바일은 head/body 가로 분리(우측 정렬)지만, 사이드바는 세로 쌓임이라 왼쪽 정렬이 자연스러움 */
  .detail-page .pd-price-body { text-align: left; }
  /* 폴드 저구간 — 사이드바 가격 카드 폰트·CTA 압축 (사이드바 폭 13rem ≈208px) */
  .detail-page .pd-price-now { font-size: 1.5rem; }
  .detail-page .pd-price-now em { font-size: 1.25rem; }
  .detail-page .pd-price-cta { min-height: 2.75rem; font-size: 0.9375rem; gap: 0.25rem; margin-top: 0.875rem; }
  .detail-page .pd-price-cta .v2-icon { width: 1rem; height: 1rem; }
  .detail-page .pd-after-note { font-size: 0.6875rem; }
  .detail-page .pd-price-fine { font-size: 0.6875rem; }
  .detail-page .pd-bill-pop-panel { width: 12rem; max-width: 80vw; left: auto; right: 0; }   /* 폴드↑ 사이드바가 우측 → 패널 왼쪽으로 펼침(viewport 잘림 방지) */

  /* 폴드 저구간 — 본문 섹션 제목 1단계 축소 (좁은 본문 폭에 맞춤) */
  .detail-page .pd-section-title { font-size: 1rem; margin-bottom: 0.75rem; }
  .detail-page .pd-section-title .v2-icon { width: 1.125rem; height: 1.125rem; }
}
/* 폴드 중간·고구간(≥768): 본문 여유 → 사이드바·여백·폰트 약간 확대 */
@media (min-width: 768px) {
  .detail-page .pd-main { padding: 1.5rem 0 0; }
  .detail-page .pd-grid { grid-template-columns: minmax(0, 1fr) 14rem; column-gap: 1rem; row-gap: 0.875rem; }
  .detail-page .pd-cost { padding: 1.25rem; }
  .detail-page .pd-terms-band { margin-top: calc(1.75rem - 2px); }

  /* 폴드 고구간 — 본문 카드 패딩 보통 */
  .detail-page .v2-clean-card { padding: 1.375rem; }

  /* 폴드 고구간 — 사이드바 가격 카드 폰트 보통 (사이드바 폭 16rem ≈256px) */
  .detail-page .pd-price-now { font-size: 1.625rem; }
  .detail-page .pd-price-now em { font-size: 1.375rem; }
  .detail-page .pd-price-cta { min-height: 3rem; font-size: 1rem; gap: 0.375rem; margin-top: 1rem; }
  .detail-page .pd-price-cta .v2-icon { width: 1.125rem; height: 1.125rem; }
  .detail-page .pd-after-note { font-size: 0.75rem; }
  .detail-page .pd-price-fine { font-size: 0.75rem; }
  .detail-page .pd-bill-pop-panel { width: 14rem; left: auto; right: 0; }   /* 폴드 고구간도 동일 — 우측 anchor */

  /* 폴드 고구간 — 본문 섹션 제목 보통 */
  .detail-page .pd-section-title { font-size: 1.0625rem; margin-bottom: 0.875rem; }
  .detail-page .pd-section-title .v2-icon { width: 1.1875rem; height: 1.1875rem; }
}
/* PC(≥1024): 본문 여유 → 사이드바 폭·간격 확대 */
@media (min-width: 1024px) {
  .detail-page .pd-grid { grid-template-columns: minmax(0, 1fr) 15rem; column-gap: 1.5rem; }
}

/* 플립(≤360): 레이아웃 패딩 축소 (글씨·가격 스케일은 아래 [26]에서 일괄 관리) */
@media (max-width: 360px) {
  .detail-page .v2-clean-card { padding: 1.125rem; }
  .detail-page .pd-cost { padding: 1rem; }
  .detail-page .pd-cta-btn { max-width: 11rem; }
}

/* =========================================================================
   [25b] 요금제 상세 — 가독성·UX 개선 레이어 (정식 반영, [25] 기본 뒤에 와서 우선)
   본문/라벨 글씨 확대 · tertiary→secondary 대비↑ · 줄간격·터치타겟↑
   히어로 핵심 데이터(소진 후 속도)·절약 강조·사은품 배너·상세 카드형 등 포함
   ========================================================================= */
/* 섹션 제목 — PC·폴드 지배 크기(17px) */
.detail-page .pd-section-title { font-size: 1.0625rem; }
.detail-page .pd-section-title .v2-icon { width: 1.25rem; height: 1.25rem; }
/* 폴드(680~1023) — 좁은 본문 대비 제목 무게만 한 단계 낮춤(800→700). 크기 17px는 유지 */
@media (min-width: 680px) and (max-width: 1023px) {
  .detail-page .pd-section-title { font-weight: 700; }
}

/* 요금 상세(영수증) 계산 영역 — 콤팩트(작은 글씨·좁은 패딩) */
.detail-page .pd-bill li { font-size: 0.75rem; padding: 0.1875rem 0; }
.detail-page .pd-bill .total span { font-size: 0.8125rem; }
.detail-page .pd-bill .total b { font-size: 1rem; }

/* 혜택 — 본문 확대, 부가설명 secondary로 가독 */
.detail-page .pd-benefit-name { font-size: 0.9375rem; line-height: 1.5; }
.detail-page .pd-benefit-name i { font-size: 0.8125rem; color: var(--text-secondary); }

/* 사은품 — 이름 확대 (기간은 base 13px 유지) */
.detail-page .pd-gift-name { font-size: 0.9375rem; }

/* 유의사항(꼭 확인해주세요!) — 해상도별 단계적 크기. summary는 본문(list)과 동일 크기(굵기 600으로 구분) */
.detail-page .pd-acc summary { min-height: 3rem; font-size: 0.9375rem; }
.detail-page .pd-acc-list li { font-size: 0.875rem; line-height: 1.7; }
.detail-page .pd-acc-list li::before { top: 0.5625rem; }
/* 폴드(≥680): 한 단계 확대 */
@media (min-width: 680px) {
  .detail-page .pd-terms-title { font-size: 1.25rem; }
  .detail-page .pd-terms-bar { margin-bottom: 0.875rem; }   /* 폴드 14px */
  .detail-page .pd-terms-toggle { font-size: 0.875rem; }
  .detail-page .pd-acc summary { min-height: 3.25rem; font-size: 1rem; }
  .detail-page .pd-acc-list li { font-size: 0.9375rem; }
  .detail-page .pd-acc-list li::before { top: 0.625rem; }
  .detail-page .pd-acc-list h2 { font-size: 1.0625rem; }   /* 폴드 17px */
  .detail-page .pd-acc-list h3 { font-size: 1rem; }        /* 폴드 16px */
  .detail-page .pd-acc-list h4 { font-size: 0.9375rem; }   /* 폴드 15px */
  .detail-page .pd-acc-list { padding: 1rem; }   /* 폴드 — 박스 여백 확대(폰트 15px와 균형) */
}
/* PC(≥1024): 가장 크게 — 본문 가독성 우선 */
@media (min-width: 1024px) {
  .detail-page .pd-terms-title { font-size: 1.375rem; }
  .detail-page .pd-terms-bar { margin-bottom: 1rem; }   /* PC 16px */
  .detail-page .pd-terms-toggle { font-size: 0.9375rem; }
  .detail-page .pd-acc summary { font-size: 1.125rem; }
  .detail-page .pd-acc-list li { font-size: 1rem; }
  .detail-page .pd-acc-list li::before { top: 0.6875rem; }
  .detail-page .pd-acc-list h2 { font-size: 1.125rem; }    /* PC 18px */
  .detail-page .pd-acc-list h3 { font-size: 1.0625rem; }   /* PC 17px */
  .detail-page .pd-acc-list h4 { font-size: 1rem; }        /* PC 16px */
  .detail-page .pd-acc-list { padding: 1.125rem; }   /* PC — 박스 여백 최대(폰트 16px와 균형) */
}

/* ── 깔끔 히어로 — 박스·칩 최소, 타이포·정렬·여백으로 위계. 블루는 데이터·월요금·CTA에만 ── */
/* 데이터 + QoS — 요금제 리스트(plan-data/plan-quality)와 동일: 한 줄 인라인, QoS는 ·파란텍스트+? 동그라미(칩 아님) */
.detail-page .ch-data { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 0.625rem; row-gap: 0.375rem; margin-top: 1.125rem; }   /* 상단 여백 base=18px(폴드 고). 해상도별 축소: 플립12·모바일14·폴드저16·PC20 */
.detail-page .ch-gb { display: inline-flex; align-items: baseline; gap: 0.4375rem; }
.detail-page .ch-data .num { font-size: 1.625rem; font-weight: 700; letter-spacing: -0.03em; color: var(--text-main); line-height: 1; }   /* 데이터 권력화(히어로). 폴드 768~1023=26px(base, 좁은 본문 편의), 그 외 해상도별 오버라이드 */
.detail-page .ch-data .plus { font-size: 0.9375rem; font-weight: 800; letter-spacing: -0.02em; color: var(--color-main); }   /* 베이스=폴드 15px, ch-qos와 통일 */
.detail-page .ch-qos { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em; color: var(--color-main); }
.detail-page .ch-qos::before { content: "·"; color: var(--gray-300); font-weight: 400; }
/* 스펙 — 라벨/값 카드 스트립(2열·폴드↑ 4열). |인라인보다 스캔성↑(가독성).
   박스·선이 아닌 라이트그레이 명도 분리(Crisp Bento) — 같은 페이지 spec-item과 동일 결 */
/* ch-specs — 스펙 그리드 (통화/문자/부가통화/테더링)
   해상도별 grid·폰트 단계화: 라벨(ch-k)은 sub-role(13px 이하 허용), 값(ch-v)은 본문(14px+ 유지) */
.detail-page .ch-specs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.125rem; }   /* 항목 수(3·4개)에 맞춰 가로 균등 분배 — 고정 열이 아니라 flex로 빈칸 없이 채움 */
.detail-page .ch-specs li { flex: 1 1 44%; display: flex; flex-direction: column; gap: 0.1875rem; padding: 0.75rem 0.875rem; background: var(--gray-15); border-radius: var(--radius-md); }   /* 모바일: 44% 기준 → 2개씩(3개면 2+1 전폭) */
/* 폴드↑ — 한 줄에 균등 분배(3개면 3분할, 4개면 4분할로 가로를 자연스럽게 채움) */
@media (min-width: 680px) { .detail-page .ch-specs li { flex-basis: 0; } }
.detail-page .ch-k { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); }   /* 모바일 13px */
.detail-page .ch-v { font-size: 1.0625rem; font-weight: 700; color: var(--text-main); letter-spacing: -0.01em; line-height: 1.2; }   /* 모바일 17px */
/* 특정 요금제 전용 안내(1회선 망내무한 → 고객센터 신청) — 배경 없는 캡션. 톤 한 단계↑(secondary) + 상단 여백 확보 */
.detail-page .ch-note { display: flex; align-items: flex-start; gap: 0.3125rem; margin-top: 1rem; font-size: 0.8125rem; font-weight: 400; line-height: 1.45; color: var(--text-secondary); word-break: keep-all; }
.detail-page .ch-note .v2-icon { flex-shrink: 0; width: 0.875rem; height: 0.875rem; margin-top: 0.125rem; color: var(--text-secondary); }
.detail-page .ch-note b { font-weight: 700; color: var(--text-main); }

/* 폴드 저구간 (680~767) — 4열 전환, 카드 폭 ≈ 87px로 좁아짐 → 폰트 1단계 압축 */
@media (min-width: 680px) and (max-width: 767px) {
  .detail-page .ch-specs    { gap: 0.4375rem; }
  .detail-page .ch-specs li { padding: 0.625rem 0.625rem; }
  .detail-page .ch-k        { font-size: 0.75rem; }      /* 12px (라벨 sub) */
  .detail-page .ch-v        { font-size: 0.9375rem; }    /* 15px (좁은 카드에 맞춤) */
}

/* 폴드 고구간 (768~1023) — 4열, 카드 폭 ≈ 110~165px */
@media (min-width: 768px) and (max-width: 1023px) {
  .detail-page .ch-specs    { gap: 0.5rem; }
  .detail-page .ch-specs li { padding: 0.6875rem 0.75rem; }
  .detail-page .ch-k        { font-size: 0.8125rem; }    /* 13px */
  .detail-page .ch-v        { font-size: 1rem; }         /* 16px */
}

/* PC (≥1024) — 4열, 본문 폭 넉넉 → 숫자 권력화 강화(§4 Crisp Bento) */
@media (min-width: 1024px) {
  .detail-page .ch-specs    { gap: 0.625rem; }
  .detail-page .ch-specs li { padding: 0.75rem 0.875rem; gap: 0.25rem; }
  .detail-page .ch-k        { font-size: 0.875rem; }     /* 14px */
  .detail-page .ch-v        { font-size: 1.125rem; }     /* 18px — 권력화 */
}
/* 플립(≤360): 스펙 카드 패딩·값 축소 — 베이스 뒤에 와야 우선(소스 순서) */
/* 플립 (≤360) — 2열, 카드 폭 가장 좁음 → 라벨·padding 압축, ch-v는 가독 최소(16px) 유지 */
@media (max-width: 360px) {
  .detail-page .ch-specs    { gap: 0.4375rem; margin-top: 0.875rem; }
  .detail-page .ch-specs li { padding: 0.5625rem 0.6875rem; }
  .detail-page .ch-k        { font-size: 0.75rem; }      /* 12px */
  .detail-page .ch-v        { font-size: 1rem; }         /* 16px (본문 가독 최소) */
}

/* 종료 후 금액 — muted 라인 */
.detail-page .pd-after-note { margin-top: 0.325rem; font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary); }
.detail-page .pd-after-note b { font-weight: 700; color: var(--text-main); }

/* ── 개선 4: 섹션 부제(혜택=지속 할인 vs 사은품=즉시 증정 구분) ── */
.detail-page .v2-sec-sub { margin-left: 0.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); }

/* ── 개선 6: 모바일 하단 CTA 강화(큰 버튼·또렷한 가격) ── */
.detail-page .pd-cta { padding: 0.875rem 0; }
.detail-page .pd-cta-price strong { font-size: 1.375rem; }
.detail-page .pd-cta-btn { min-height: 3.25rem; font-size: 1.0625rem; max-width: 16rem; }

/* ── 모바일·플립(≤679) — 하단 고정 신청 CTA vs 전역 하단 탭바 충돌 해결.
   둘 다 bottom:0(탭바 z600 > CTA z40)이라 탭바가 CTA를 덮음. 상세는 '이 요금제 신청' 집중 전환 페이지이므로
   탭바를 숨기고 신청 CTA가 하단을 온전히 차지(탈출은 상단 .pd-back). 폴드↑(≥680)는 CTA가 display:none(사이드바 대체)이라 무관. ── */
@media (max-width: 679px) {
  .detail-page .mobile-tabbar { display: none; }
  .detail-page .pd-cta { padding-bottom: calc(0.875rem + env(safe-area-inset-bottom)); }   /* 탭바가 처리하던 홈인디케이터(safe-area) 회피를 CTA가 직접 */
  .detail-page { padding-bottom: calc(5.75rem + env(safe-area-inset-bottom)); }   /* body 하단 여백: 탭바(3.5rem) → 신청 CTA 높이로. 사이트 푸터가 고정 CTA에 안 가리게 */
}

/* =========================================================================
   [26] 해상도별 글씨·패딩 스케일 — base(미디어 없음) = PC/폴드 기준점.
   해상도가 줄면 점진 축소: 폴드(680~1023)는 base 유지(공간 활용), 모바일(≤679)·플립(≤360)에서 단계적 축소.
   (모든 detail base·[25b] 규칙 뒤에 위치 → 우선. 카드 패딩은 이미 단계 적용돼 여기선 제외)
   ========================================================================= */
/* 모바일(≤679): PC 기준에서 한 단계 축소 */
@media (max-width: 679px) {
  .detail-page .pd-grid,
  .detail-page .pd-content { gap: 0.75rem; }
  .detail-page .pd-name { font-size: 0.9375rem; }
  .detail-page .ch-v { font-size: 1rem; }                 /* 16px — 스펙값(모바일) */
  .detail-page .ch-data { margin-top: 0.875rem; }
  .detail-page .ch-data .num { font-size: 1.5rem; }       /* 24px — GB 과대 방지(형제 균형: 스펙 16px·속도 15px) */
  .detail-page .ch-data .plus,
  .detail-page .ch-qos { font-size: 0.875rem; }
  .detail-page .pd-section-title { font-size: 1.0625rem; margin-bottom: 0.875rem; }
}
/* 플립(≤360): 한 단계 더 축소 (모바일 규칙 위에 누적) */
@media (max-width: 360px) {
  .detail-page .pd-grid,
  .detail-page .pd-content { gap: 0.6875rem; }
  .detail-page .pd-name { font-size: 0.875rem; }
  .detail-page .ch-data { margin-top: 0.75rem; }
  .detail-page .ch-data .num { font-size: 1.375rem; }     /* 22px — GB 과대 방지(형제 균형) */
  .detail-page .ch-data .plus,
  .detail-page .ch-qos { font-size: 0.8125rem; }
  .detail-page .pd-section-title { font-size: 1rem; margin-bottom: 0.75rem; }
}

/* 폴드 저구간(680~767): 사이드바 12rem 도입으로 본문 ≈400px 좁음 → 모바일 가까운 사이즈 (PC 베이스 34px 다운) */
@media (min-width: 680px) and (max-width: 767px) {
  .detail-page .ch-data        { margin-top: 1rem; }
  .detail-page .ch-data .num   { font-size: 1.5rem; }      /* 24px (폴드 저구간 — 본문 ≈400px, 모바일 근접) */
  .detail-page .ch-data .plus  { font-size: 0.9375rem; }   /* 15px — 폴드 통일 */
  .detail-page .ch-qos         { font-size: 0.9375rem; }   /* 15px */
}

/* PC(≥1024): 본문 폭 넉넉(720px+) → 숫자 권력화 강화(§4 Crisp Bento) */
@media (min-width: 1024px) {
  .detail-page .ch-data        { margin-top: 1.25rem; }
  .detail-page .ch-data .num   { font-size: 1.875rem; }    /* 30px */
  .detail-page .ch-data .plus  { font-size: 1rem; }   /* 16px (PC) — ch-qos와 통일 */
  .detail-page .ch-qos         { font-size: 1rem; }   /* 16px (PC) */
}

/* 폴드(680~1023) — 요금제명은 base(=PC 16px)를 그대로 물려받아 좁은 본문에 커 보임 → 한 단계 축소(모바일과 동일 15px) */
@media (min-width: 680px) and (max-width: 1023px) {
  .detail-page .pd-name { font-size: 0.9375rem; }   /* 15px (PC 16px보다 작게) */
}

/* =========================================
   [22] 요금제 카드 (.plan-card)
   구조: .plan-card > .plan-card-body > .plan-col(-info/-spec/-price/-action)
        펼침 영역: .plan-benefits
========================================= */
.plans-page #planListContainer {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
/* 카드 elevation — 기준축 .clean-card와 동일한 resting shadow로 '떠 있는' 결 통일 */
.plans-page #planListContainer .plan-card {
  background: var(--color-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  /* 성능 — blur 20px는 알파 0.03이라 거의 안 보이는데 카드가 수백 개면 스크롤 페인트 비용이 크다.
     같은 인상을 유지하면서 blur를 대폭 줄임(4.8 그림자 절제와도 부합) */
  box-shadow: 0 1px 3px rgba(11, 15, 26, 0.04);
  overflow: visible;   /* qos '?' 말풍선이 카드 밖으로 나갈 수 있게 — content-visibility를 쓰지 않는 이유 */
  cursor: pointer; /* 카드 전체 클릭 → 상세(detail.php). 내부 버튼은 자체 커서 유지 */
  /* 성능 — 카드 내부의 레이아웃·스타일 재계산을 카드 단위로 격리. 수백 개일 때 리사이즈 리레이아웃 비용을 크게 줄임.
     paint는 포함하지 않음(포함하면 위 말풍선이 잘림) */
  contain: layout style;
  transition:
    border-color 0.2s var(--smooth),
    box-shadow 0.3s var(--smooth);
}
/* hover — 중성(슬레이트/잉크) 톤으로 현재 디자인과 일체감 */
.plans-page #planListContainer .plan-card:hover {
  border-color: var(--text-tertiary);
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.1);
}

/* 카드 본문 — 모바일 기본: 세로 스택 (플립 ≤360 기준). 폴드↑에서 그리드로 확장 */
.plans-page #planListContainer .plan-card-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.8125rem;
  padding: 1rem;
}
/* 좌(정보+스펙)·우(가격+버튼) 그룹 래퍼 — 폴드에서만 실제 컬럼, 그 외엔 투명(기존 레이아웃 유지) */
.plans-page #planListContainer .plan-main,
.plans-page #planListContainer .plan-side {
  display: contents;
}
.plans-page #planListContainer .plan-col {
  padding: 0;
}

/* 정보 컬럼 */
.plans-page #planListContainer .plan-tags {
  display: flex;
  align-items: center;   /* 채움 태그 + 아웃라인 term(테두리로 2px 높음)을 가운데로 정렬 */
  gap: 0.375rem;
  margin-bottom: 0.6875rem;
  flex-wrap: wrap;
}
.plans-page #planListContainer .tag {
  font-size: 0.75rem;        /* 12px — base .tag와 동일 배지 표준 */
  font-weight: 600;          /* 600 — 작은 한글 배지 선명도(ID 특이도로 base 덮던 800 교체) */
  letter-spacing: 0;
  padding: 0.25rem 0.5625rem;
  border-radius: var(--radius-xs);
}
.plans-page #planListContainer .tag.combo {
  background: var(--color-main-bg);
  color: var(--color-main-active);
}
.plans-page #planListContainer .plan-name {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-primary);   /* main(#111827)에서 한 단계 down — 주인공은 데이터·요금 숫자, 이름은 식별용 보조 */
  line-height: 1.4;
}

/* 스펙 컬럼 — 데이터 + QoS 인라인(한 줄), 상세는 아래 줄로 */
.plans-page #planListContainer .plan-col-spec {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.375rem;
}
.plans-page #planListContainer .plan-data {
  display: flex;
  align-items: baseline;
  gap: 0.4375rem;
  line-height: 1;
  flex-wrap: wrap;
}
.plans-page #planListContainer .plan-data-num {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-main);
}
.plans-page #planListContainer .plan-data-plus {
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-main);
}
.plans-page #planListContainer .plan-quality {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-main);
  margin-top: 0;
  letter-spacing: -0.01em;
}
.plans-page #planListContainer .plan-quality::before {
  content: "·";
  color: var(--gray-300);
  font-weight: 400;
}
.plans-page #planListContainer .help {
  width: 0.9375rem;
  height: 0.9375rem;
  border-radius: 50%;
  background: var(--gray-200);
  color: var(--text-tertiary);
  font-size: 0.625rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.plans-page #planListContainer .plan-detail {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.4375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 0.25rem;
  line-height: 1.55;
}
.plans-page #planListContainer .dt-item {
  white-space: nowrap;
}
.plans-page #planListContainer .dt-item b {
  color: var(--text-main);
  font-weight: 500;
}
/* 항목 사이 세로 구분선(|) — 마지막 항목 뒤에는 없음 */
.plans-page #planListContainer .dt-item:not(:last-child)::after {
  content: "|";
  color: var(--gray-300);
  font-weight: 400;
  margin-left: 0.4375rem;
}

/* 가격 컬럼 */
.plans-page #planListContainer .plan-price-top {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  flex-wrap: wrap;
  margin-bottom: 0.375rem;
}
.plans-page #planListContainer .plan-price-base {
  font-size: 0.78125rem;
  font-weight: 500;
  color: var(--text-tertiary);
}
.plans-page #planListContainer .plan-price-base del {
  text-decoration: line-through;
}
/* 세일 배지 — 전 요금제 노출이라 파스텔(연핑크 배경+차분한 글씨)로 저자극.
   글씨는 저자극 유지하되 대비 5.1:1로 WCAG AA 확보(--badge-save-text) */
.plans-page #planListContainer .badge-save {
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--badge-save-text);
  background: var(--badge-popular-bg);
  border-radius: var(--radius-xs);
  padding: 0.1875rem 0.4375rem;
  white-space: nowrap;
}
.plans-page #planListContainer .plan-price {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-main);
  line-height: 1.2;
}
.plans-page #planListContainer .plan-price-after {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 0.125rem;
}

/* ── 단계별 할인 요금제(예: 너겟) — 기본 카드와 가격 표기 방식이 다름 ──
   '실 체감가' 라벨 + 큰 블루 체감가 + 개월 구간별 실제 월 납부액 + 총액 주석 */
/* '실 체감가' 라벨 — 큰 체감가(블루) 앞 인라인 캡션(A안: 한 줄로 압축) */
.plans-page #planListContainer .plan-price .label {
  margin-right: 0.3125rem;
  font-size: 1rem;   /* 모바일·플립 가격 18px - 2px = 16px */
  font-weight: 500;
  letter-spacing: -0.01em;
}
/* '실 체감가'는 plan-price 가격보다 2px 작게 — 가격이 해상도별로 달라(폴드 20px·PC 24px) 맞춰 조정 */
@media (min-width: 680px) and (max-width: 1023px) {
  .plans-page #planListContainer .plan-price .label { font-size: 1.125rem; }   /* 20 - 2 = 18px */
}
/* 폴드(680~1023) — 신청 CTA를 사이드바 버튼(pd-cta-card) 대신 하단 고정 바(pd-cta)로 전환.
   폴드는 손에 든 터치 기기 → 하단 중앙 CTA가 도달성·전환↑ + 모바일과 인터랙션 통일. 사이드바 가격 카드 sticky는 유지 */
@media (min-width: 680px) and (max-width: 1023px) {
  .detail-page .pd-cta { display: block; }        /* ≥680에서 숨겼던 하단 고정 CTA를 폴드에서 노출 */
  .detail-page .pd-cta-card .pd-price-cta { display: none; }   /* 신청 버튼만 숨김 — 안내 문구(pd-price-fine)는 노출 유지 */
  .detail-page .mobile-tabbar { display: none; }  /* 전역 하단 탭바가 CTA를 가리므로 숨김(모바일 ≤679와 동일 처리) */
  .detail-page { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }   /* 하단 고정 CTA 높이만큼 여백 확보 */
}
@media (min-width: 1024px) {
  .plans-page #planListContainer .plan-price .label { font-size: 1.375rem; }   /* 24 - 2 = 22px */
}
/* 개월 구간별 월 납부액 — 회색 칩(B안). 투명성: 실제 청구액을 그대로 노출.
   flex-wrap으로 좁은 폭에선 자연 줄바꿈, gap이 가로·세로 간격 처리 */
.plans-page #planListContainer .plan-price-tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem;
  margin-top: 0.375rem;
}
.plans-page #planListContainer .price-tier {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.plans-page #planListContainer .price-tier b {
  font-weight: 800;
  color: var(--text-main);
}
/* 칩 폰트 — 해상도별 최적화. 체감가(plan-price)의 보조 정보라 한 단계 작게.
   플립 10 / 모바일 11(base) / 폴드 12 / PC 13px */
@media (max-width: 360px) {
  .plans-page #planListContainer .price-tier { font-size: 0.625rem; padding: 0.1875rem 0.4375rem; }
}
@media (min-width: 680px) and (max-width: 1023px) {
  .plans-page #planListContainer .price-tier { font-size: 0.75rem; }
}
@media (min-width: 1024px) {
  .plans-page #planListContainer .price-tier { font-size: 0.8125rem; padding: 0.25rem 0.5625rem; }
}
/* 폴드·PC(≥680) — 칩 한 줄 고정(nowrap). 리스트형은 가격 컬럼 우측 정렬에 맞춰 칩도 우측(그리드형은 좌측 기본 유지).
   모바일·플립(≤679)은 base의 flex-wrap: wrap로 좁은 폭에서 자연 줄바꿈 */
@media (min-width: 680px) {
  .plans-page #planListContainer .plan-price-tiers { flex-wrap: nowrap; }
  .plans-page #planListContainer:not(.view-grid) .plan-price-tiers { justify-content: flex-end; }
}

/* 통신사 로고 — 텍스트 배지(.tag.skt 등) 대신 실제 로고 이미지를 CSS 배경으로 노출.
   이미지 태그를 반복하지 않고 클래스만 붙여 재사용(요금제 리스트 + 비교 팝업 공용).
   .tag와 함께 쓰면 배지의 배경색·패딩을 덮어 로고만 깔끔히 보인다. 새 통신사 로고는 .carrier-logo-* 만 추가. */
.plans-page .carrier-logo {
  display: inline-block;
  width: 3.75rem;
  height: 1.25rem;
  padding: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 0;
}
.plans-page .carrier-logo-lgt {
  background-image: url("/shop/assets/images/mno/logo_mno_lgt.png");
}
/* 리스트 카드 — #planListContainer .tag 패딩(id 특이도)을 덮어 로고를 flush 정렬 */
.plans-page #planListContainer .plan-tags .carrier-logo { padding: 0; }
/* .tag와 함께 쓴 로고 — 통신사 색 배지(.tag.lgt 등은 클래스 3개라 특이도 높음)를 덮어 배경색(핑크) 제거 */
.plans-page .tag.carrier-logo { background-color: transparent; }
/* 비교 하단 툴바 칩 안 로고 — 작은 칩에 맞춰 축소(60×20 → 48×16, 3:1 유지) */
.plans-page .cmp-cr-logo { width: 3rem; height: 1rem; flex-shrink: 0; }

/* 액션 컬럼 (비교 = 텍스트형 / 신청 = 라이트 프라이머리, 위계: 신청 > 비교) */
.plans-page #planListContainer .plan-buttons {
  display: flex;
  gap: 0.5625rem;
  align-items: stretch;
}
/* 한 세트(같은 잉크색·라운드·높이), 스타일만 차등: 신청=아웃라인(프라이머리) / 비교=소프트 그레이 채움(보조) */
/* 비교 — 신청하기와 같은 아웃라인 계열(흰 배경 + 테두리)로 통일. 비교는 연한 테두리·흐린 글자(보조), 담김=블루 */
.plans-page #planListContainer .btn-compare {
  flex: 0 0 auto;
  background: var(--color-white);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  min-height: var(--btn-xs-h);
  font-size: var(--btn-xs-fs);
  font-weight: 700;
  padding: 0 var(--btn-xs-px);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  white-space: nowrap;
  transition:
    background 0.16s,
    border-color 0.16s,
    color 0.16s,
    transform 0.12s;
}
/* 호버 = 담길 모습 미리보기(블루 틴트) — '누르면 비교에 담긴다'는 어포던스(회색 호버 대비 의도 전달↑) */
.plans-page #planListContainer .btn-compare:hover {
  background: var(--blue-soft);
  border-color: var(--blue-border);
  color: var(--color-main);
}
.plans-page #planListContainer .btn-compare:active {
  transform: scale(0.96);   /* 누름 피드백(촉각감) */
}
.plans-page #planListContainer .btn-compare:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}
/* 담김 = 또렷한 확정: 메인 테두리 + 볼드(+ JS가 라벨을 '✓ 비교'로 교체) */
.plans-page #planListContainer .btn-compare.on {
  background: var(--blue-soft);
  border-color: var(--color-main);
  color: var(--color-main);
  font-weight: 800;
}
.plans-page #planListContainer .btn-compare .cmp-icon {
  display: none;
} /* 데스크톱: 아이콘 숨김, 라벨만. 모바일/플립에서 반전 */
.plans-page #planListContainer .btn-apply {
  flex: 0 0 auto;
  width: auto;
  background: var(--color-white);
  color: var(--text-main);
  border: 1px solid var(--text-main);
  min-height: var(--btn-sm-h);
  font-size: var(--btn-sm-fs);
  font-weight: 800;
  padding: 0 var(--btn-sm-px);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  white-space: nowrap;
  transition: background 0.18s;
}
.plans-page #planListContainer .btn-apply:hover {
  background: var(--gray-100);
}
.plans-page #planListContainer .btn-apply .v2-icon {
  width: 0.9375rem;
  height: 0.9375rem;
  transition: transform 0.18s var(--smooth);
}
.plans-page #planListContainer .btn-apply:hover .v2-icon {
  transform: translateX(3px);
}

/* 사은품 트리거 */
/* 사은품 트리거 — 기본(모바일·폴드): 카드 하단 풀폭 footer + 구분선 / PC: 이름 밑(아래 override) */
.plans-page #planListContainer .plan-gift {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  margin-top: 0.875rem;
  padding: 0.625rem 0.125rem 0.125rem;   /* 상단 14→10px — 가격줄↔썸네일 간격 축소로 하단 띠가 헐렁해 보이는 문제 완화 */
  background: none;
  border: none;
  border-top: 1px solid var(--gray-100);
  cursor: pointer;
  transition: 0.16s;
  font-family: inherit;
}
/* PC(≥1024) 제외 — 플립·모바일·폴드에선 상단 여백 제거 */
@media (max-width: 1023px) {
  .plans-page #planListContainer .plan-gift { margin-top: 0; }
}
.plans-page #planListContainer .plan-gift-thumbs {
  display: flex;
  align-items: center;
}
.plans-page #planListContainer .plan-gift-thumbs i {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid var(--color-white);
  margin-left: -0.5625rem;
  background: linear-gradient(135deg, var(--indigo-200), var(--indigo-300));
}
.plans-page #planListContainer .plan-gift-thumbs i:first-child {
  margin-left: 0;
  background: linear-gradient(135deg, var(--pink-200), var(--pink-300));
}
.plans-page #planListContainer .plan-gift-thumbs i.plan-gift-thumb {
  background: var(--color-white);
  overflow: hidden;
}
.plans-page #planListContainer .plan-gift-thumbs i.plan-gift-thumb img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.plans-page #planListContainer .plan-gift .plan-gift-text {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-main);
}
.plans-page #planListContainer .plan-gift .plan-gift-text b {
  color: var(--color-main);
  font-weight: 800;
}
.plans-page #planListContainer .plan-gift-arrow {
  width: 0.9375rem;
  height: 0.9375rem;
  color: var(--text-tertiary);
  flex-shrink: 0;
  margin-left: auto;   /* 화살표를 사은품 행 끝(카드 오른쪽)으로 — 리스트형·이미지형 공통 */
  transition: transform 0.3s var(--smooth);
}
.plans-page #planListContainer .plan-gift.open .plan-gift-arrow {
  transform: rotate(90deg);
  color: var(--color-main);
}

/* 사은품 카드 하단 여백을 card-body가 아닌 plan-gift 버튼이 갖게 이관.
   card-body 하단에 빈 패딩 띠가 남으면, 그 띠(버튼이 아닌 card-body)를 클릭할 때 카드 전체 '클릭→상세'로 새는 문제
   (사은품 버튼 바로 아래 여백을 눌러도 상세로 이동). card-body 하단 패딩을 0으로 없애고 같은 크기를 plan-gift 버튼의
   padding-bottom으로 옮기면, 버튼이 카드 밑까지 채워 그 영역 클릭이 상세가 아니라 사은품 토글이 된다.
   값은 기존 하단 여백(버튼 2px + card-body 12/14/16/20)과 동일 → 카드 높이·여백 그대로 유지. :has 미지원 구형은 기존 유지(무해) */
.plans-page #planListContainer .plan-card:has(.plan-gift) .plan-card-body { padding-bottom: 0; }
.plans-page #planListContainer .plan-gift { padding-bottom: 0.875rem; }                                 /* 플립 14 (=2+12) */
@media (min-width: 361px) { .plans-page #planListContainer .plan-gift { padding-bottom: 1rem; } }       /* 모바일 16 */
@media (min-width: 680px) { .plans-page #planListContainer .plan-gift { padding-bottom: 1.125rem; } }   /* 폴드 18 */
@media (min-width: 1024px) { .plans-page #planListContainer .plan-gift { padding-bottom: 1.375rem; } }  /* PC 22 */
/* 사은품 없는 카드 — 하단 여백을 사은품 있는 카드(plan-gift 하단 여백)와 동일한 스케일로 맞춤(구간별 통일).
   있는 카드는 위 3710에서 card-body 하단 0 + gift 패딩이 담당하므로 값이 어긋나지 않게 같은 값 사용 */
.plans-page #planListContainer .plan-card:not(:has(.plan-gift)) .plan-card-body { padding-bottom: 0.875rem; }               /* 플립 14 */
@media (min-width: 361px)  { .plans-page #planListContainer .plan-card:not(:has(.plan-gift)) .plan-card-body { padding-bottom: 1rem; } }      /* 모바일 16 */
@media (min-width: 680px)  { .plans-page #planListContainer .plan-card:not(:has(.plan-gift)) .plan-card-body { padding-bottom: 1.125rem; } }  /* 폴드 18 */
@media (min-width: 1024px) { .plans-page #planListContainer .plan-card:not(:has(.plan-gift)) .plan-card-body { padding-bottom: 1.375rem; } }  /* PC 22 */

/* 사은품 펼침 패널 */
.plans-page #planListContainer .plan-benefits {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  /* 성능 — max-height·padding·margin은 '레이아웃 속성'이라 전환하면 0.35초 동안 매 프레임 카드 높이가 바뀌고,
     그때마다 아래 수백 개 카드가 전부 재배치된다(사은품 자세히보기 클릭 시 멈춤의 직접 원인).
     레이아웃 변화는 즉시 적용해 리플로우를 1회로 줄이고, 합성만 하는 opacity만 전환해 부드러움은 유지 */
  transition: opacity 0.2s;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  padding: 0 1rem;
  margin: 0 1rem;
}
.plans-page #planListContainer .plan-benefits.open {
  max-height: 420px;
  opacity: 1;
  padding: 0.875rem 1rem;
  /* margin-top 음수 — 패널은 card-body 밖 형제라 트리거와의 사이가 card-body 하단 패딩만큼 벌어진다.
     펼침 시 그 빈 패딩을 당겨 트리거↔확장목록을 한 덩어리로 붙인다(닫힘 상태 하단 여백은 유지) */
  margin: -0.5rem 1rem 1.125rem;
}
.plans-page #planListContainer .plan-benefits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.625rem 1rem;
}
/* 리스트형(기본 뷰): 사은품을 1열로 쌓지 말고 콘텐츠 크기대로 가로 배치(넘치면 줄바꿈).
   그리드형(.view-grid, 좁은 카드)은 1열 유지 */
.plans-page #planListContainer:not(.view-grid) .plan-benefits-grid {
  display: flex;
  flex-wrap: wrap;
}
.plans-page #planListContainer:not(.view-grid) .plan-benefit {
  flex: 0 0 auto;
  max-width: 100%;   /* 긴 문구 칩이 카드 폭을 넘지 않게 — 넘칠 땐 내부 텍스트가 줄바꿈되도록 상한만 고정 */
}
.plans-page #planListContainer .plan-benefit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;   /* 그리드형(1fr 셀)·플렉스에서 아이템이 내용보다 좁아질 수 있게 → 텍스트 줄바꿈 허용 */
}
.plans-page #planListContainer .plan-benefit-icon {
  width: 1.625rem;
  height: 1.625rem;
  border-radius: var(--radius-md);
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-main-hover);
}
.plans-page #planListContainer .plan-benefit-icon svg {
  width: 0.875rem;
  height: 0.875rem;
}
.plans-page #planListContainer .plan-benefit-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
.plans-page #planListContainer .plan-benefit-text {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-main);
  min-width: 0;              /* flex 아이템(텍스트)이 아이콘 옆에서 줄바꿈되도록 축소 허용 */
  word-break: keep-all;      /* 한글은 단어 단위 줄바꿈(어절 유지) */
  overflow-wrap: anywhere;   /* 공백 없는 긴 문자열도 넘치지 않게 강제 분리 */
}

/* ==========================================================================
   [23] RESPONSIVE OVERRIDES — 해상도별 UI/UX
   📱 모바일 우선 대응 / 데스크톱(≥1024px) = 기본(base) 스타일
   - PC          ≥1024
   - 폴드         680 ~ 1023  (폴더블 펼침 — 가로 공간 활용)
   - 일반모바일    361 ~ 679
   - 플립         ≤360        (폴더블 외부 / 초소형)
   ※ 요금제 카드(.plan-card)는 media query 기준(컨테이너 쿼리 → 뷰포트 통일)
   ========================================================================== */

/* ─────────────────────────────────────────
   [카드 반응형] 모바일 퍼스트 — base=세로 스택, min-width로 3열 확장
   모바일 ≥361 → 폴드/태블릿 ≥680(3열) → PC ≥1024(3열 여유)
   구조: 정보·혜택(사은품=이름 밑) │ 스펙 │ 가격↑버튼
   ───────────────────────────────────────── */
@media (min-width: 361px) {
  /* 칩 폰트·패딩은 base(13px)가 플립·모바일·폴드 공통으로 처리 */
  .plans-page .qc-toggle {
    width: 2rem;
    height: 2rem;
  }
  .plans-page #planListContainer .plan-card-body {
    gap: 0.9375rem;
    padding: 1.125rem;
  }
  .plans-page #planListContainer .plan-name {
    font-size: 0.875rem;   /* 모바일 14px — 부차 식별 정보, 히어로 숫자에 지배력 양보 (사다리 13·14·15·15) */
  }
  .plans-page #planListContainer .plan-data-num {
    font-size: 1.188rem;   /* 모바일 19px */
  }
  .plans-page #planListContainer .plan-data-plus {
    font-size: 1rem;
  }
  .plans-page #planListContainer .plan-quality {
    font-size: 0.875rem;
  }
  .plans-page #planListContainer .plan-detail {
    margin-top: 0.25rem;
    font-size: 0.84375rem;
  }
  .plans-page #planListContainer .plan-price {
    font-size: 1.25rem;   /* 모바일 20px — 데이터(19px)보다 반 단계 큼: 가격이 모바일 1순위 비교 숫자(크기+블루 이중 강조) */
  }
  /* 혜택 펼침 — 모바일 단계 */
  .plans-page #planListContainer .plan-benefits.open {
    padding: 1rem 1.125rem;
    margin-bottom: 1.25rem;
  }
  .plans-page #planListContainer .plan-benefits-grid {
    gap: 0.75rem 1.25rem;
  }
  .plans-page #planListContainer .plan-benefit {
    gap: 0.5625rem;
  }
  .plans-page #planListContainer .plan-benefit-icon {
    width: 1.75rem;
    height: 1.75rem;
  }
  .plans-page #planListContainer .plan-benefit-icon svg {
    width: 0.9375rem;
    height: 0.9375rem;
  }
  .plans-page #planListContainer .plan-benefit-text {
    font-size: 0.78125rem;
  }
}

/* 폴드 ≥680 — 3열 그리드 (정보 │ 스펙 │ 가격↑버튼) */
@media (min-width: 680px) {
  .plans-page #planListContainer .plan-card-body {
    display: grid;
    grid-template-columns: 1.15fr 1fr 200px;
    grid-template-areas: "info spec price" "info spec action" "gift gift gift";
    align-items: center;
    gap: 0;
    padding: 1.375rem;
  }
  .plans-page #planListContainer .plan-gift {
    grid-area: gift;
  }
  .plans-page #planListContainer .plan-col-info {
    grid-area: info;
  }
  .plans-page #planListContainer .plan-col-spec {
    grid-area: spec;
    padding-left: 1.25rem;
  }
  .plans-page #planListContainer .plan-col-price {
    grid-area: price;
    align-self: end;
    padding-left: 1.25rem;
    text-align: right;
  }
  .plans-page #planListContainer .plan-col-price .plan-price-top {
    justify-content: flex-end;
  }
  .plans-page #planListContainer .plan-col-action {
    grid-area: action;
    padding: 0.5rem 0 0 1.25rem;
  }
  .plans-page #planListContainer .plan-price {
    font-size: 1.4375rem;
  }
  .plans-page #planListContainer .plan-buttons {
    justify-content: flex-end;
  }
  .plans-page #planListContainer .btn-apply {
    flex: 0 0 auto;
  }
  .plans-page #planListContainer .plan-benefits,
  .plans-page #planListContainer .plan-benefits.open {
    margin-left: 1.625rem;
    margin-right: 1.625rem;
  }
}

/* PC ≥1024 — 3열 풀, 사은품은 하단 전체폭(전 해상도 통일) */
@media (min-width: 1024px) {
  /* 검색버튼·칩 PC 단계 (탭은 공통 seg 토큰이 처리) */
  .plans-page .quick-chip {
    padding: 0.4375rem 0.875rem;
    font-size: 0.875rem;
  }
  .plans-page .qc-toggle {
    width: 2.1875rem;
    height: 2.1875rem;
  }
  .plans-page #planListContainer .plan-card-body {
    grid-template-columns: 300px 1fr 240px;
    grid-template-areas: "info spec price" "info spec action" "gift gift gift";
    padding: 1.625rem 1.875rem;
  }
  .plans-page #planListContainer .plan-col-spec,
  .plans-page #planListContainer .plan-col-price,
  .plans-page #planListContainer .plan-col-action {
    padding-left: 1.75rem;
  }
  .plans-page #planListContainer .plan-data-num {
    font-size: 1.625rem;
  }
  .plans-page #planListContainer .plan-data-plus {
    font-size: 1.0625rem;
  }
  .plans-page #planListContainer .plan-price {
    font-size: 1.5rem;
  }
  .plans-page #planListContainer .plan-detail {
    margin-top: 0.25rem;
    font-size: 0.875rem;
  }
  .plans-page #planListContainer .plan-benefits-grid {
    gap: 0.875rem 1.5rem;
  }
  .plans-page #planListContainer .plan-benefits.open {
    padding: 1.125rem 1.25rem;
    margin-bottom: 1.5rem;
  }
  .plans-page #planListContainer .plan-benefit-icon {
    width: 1.875rem;
    height: 1.875rem;
  }
  .plans-page #planListContainer .plan-benefit-icon svg {
    width: 1rem;
    height: 1rem;
  }
  .plans-page #planListContainer .plan-benefit-text {
    font-size: 0.8125rem;
  }
  .plans-page #planListContainer .plan-benefits,
  .plans-page #planListContainer .plan-benefits.open {
    margin-left: 1.875rem;
    margin-right: 1.875rem;
  }

  /* 비교 모달 — PC: 폭 확대(매트릭스 3열 여유) */
  .plans-page .cmp-sheet {
    --modal-max: 820px;
  }
  /* 사은품 리스트 문구 — PC 가독성 최대 */
  .plans-page .cmp-gd-list .plan-benefit-text { font-size: 0.875rem; }
  .plans-page .cmp-gd-list .plan-benefit-icon { width: 2rem; height: 2rem; }
}

/* 모바일(361~679) 전용 — 속도(plan-quality) 13px(요청). 폴드·PC·플립엔 미적용 */
@media (min-width: 361px) and (max-width: 679px) {
  .plans-page #planListContainer .plan-quality { font-size: 0.8125rem; }   /* 13px */
}

/* 폴드(680~1023) 전용 — 배지+요금제명 한 줄 / 그 아래 스펙 / 우측 가격·버튼 (2열)
   ※ 위 ≥680 base 블록보다 뒤에 둬서 폴드 구간에서 우선 적용 */
@media (min-width: 680px) and (max-width: 1023px) {
  /* 폴드 폰트 압축 — base(=PC/폴드 기준점)가 실제 폴드 화면에선 커 보여, 히어로·카드 숫자를 한 단계 줄여 스크롤 감소.
     리스트형·이미지(그리드)형이 같은 숫자 클래스를 공유 → 두 보기 모두 적용 */
  .plans-page .hero-section { padding-top: 1.625rem; }                       /* 36→26px (하단 여백은 base 유지) */
  .plans-page .v2-hero-title { font-size: 1.375rem; }                        /* 26→22px */
  .plans-page #planListContainer .plan-name { font-size: 0.875rem; }         /* 폴드 14px */
  .plans-page #planListContainer .plan-data-num { font-size: 1.313rem; }      /* 폴드 22px */
  .plans-page #planListContainer .plan-data-plus { font-size: 0.875rem; }    /* 15→14px */
  .plans-page #planListContainer .plan-price { font-size: 1.313rem; }         /* 폴드 22px */
  .plans-page #planListContainer .plan-quality { font-size: 0.84375rem; }     /* 폴드 13.5px */

  /* 좌(main)·우(side)를 독립 플렉스 컬럼으로 — 한쪽이 길어도 반대쪽에 공백 안 생김 */
  .plans-page #planListContainer .plan-card-body {
    grid-template-columns: 1fr 200px;
    grid-template-areas: "main side" "gift gift";
    align-items: start;
    column-gap: 1.25rem;
    row-gap: 0.75rem;
  }
  /* 사은품 없는 카드 — gift 행 제거. 빈 gift 행이라도 그 앞 row-gap(0.75rem)이 하단에 남아 여백이 커지던 오류 수정 */
  .plans-page #planListContainer .plan-card:not(:has(.plan-gift)) .plan-card-body { grid-template-areas: "main side"; }
  .plans-page #planListContainer .plan-main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .plans-page #planListContainer .plan-side {
    grid-area: side;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }
  .plans-page #planListContainer .plan-gift {
    grid-area: gift;
  }
  /* 배지 + 요금제명 한 줄 */
  .plans-page #planListContainer .plan-col-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4375rem 0.5rem;
  }
  .plans-page #planListContainer .plan-tags {
    margin-bottom: 0;
  }
  /* 좌측 정렬 보정 */
  .plans-page #planListContainer .plan-col-spec {
    padding-left: 0;
  }
  .plans-page #planListContainer .plan-col-price {
    padding-left: 0;
  }
  .plans-page #planListContainer .plan-col-action {
    padding: 0;
  }
  /* 액션 버튼 높이 통일 — 비교(xs)·신청(sm)의 기본 높이가 달라 폴드에선 단차가 보인다 */
  .plans-page #planListContainer .btn-compare,
  .plans-page #planListContainer .btn-apply {
    min-height: 2.375rem;
  }

  /* 비교 모달 폴드 하단 고정은 공통 .modal 셸(≤1023 바텀시트 기본)이 처리 — 별도 오버라이드 불필요 */
}

/* ─────────────────────────────────────────
   [모바일·플립 narrow] ≤679 — 히어로/검색바/필터팝오버/칩
   (폴드 680~1023은 가로 공간 활용 → narrow 미적용)
   ───────────────────────────────────────── */
@media (max-width: 679px) {
  .plans-page .hero-section {
    padding: 1.375rem 0 0.625rem; /* 모바일·플립: 하단 여백 추가 압축 */
  }
  .plans-page .v2-hero-title { font-size: 1.25rem; }   /* 공통 22 → 20px. 폴드(22)와 위계 확보 (폴드 22 > 모바일 20 > 플립 18) */

  /* 칩 가로 스크롤 + 세그먼트 줄바꿈 */
  .plans-page .list-header {
    flex-wrap: wrap;
  }
  /* (필터·비교 모달 모바일 동작은 공통 .modal 셸이 처리) */
}

/* ─────────────────────────────────────────
   [일반모바일] ≤679 — 동적 카드 세로 스택 + QoS/프리셋 그리드 + 비교표 가로 스크롤
   ───────────────────────────────────────── */
@media (max-width: 679px) {

  /* 데이터 프리셋 그리드 */
  .plans-page #filterPop .gb-preset {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 카드 재배치 — 비교=우측 상단 아이콘 / 신청=가격과 같은 줄 우측 */
  .plans-page #planListContainer .plan-card-body {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "info info" "spec spec" "price action" "gift gift";
    align-items: center;
  }
  /* 사은품 없는 카드 — gift 행 제거(빈 gift 행 앞 row-gap이 하단에 남아 여백이 커지던 오류 수정, 폴드와 동일 원인) */
  .plans-page #planListContainer .plan-card:not(:has(.plan-gift)) .plan-card-body { grid-template-areas: "info info" "spec spec" "price action"; }
  .plans-page #planListContainer .plan-col-info {
    grid-area: info;
    padding-right: 3rem;
  } /* 우상단 아이콘 자리 확보 */
  .plans-page #planListContainer .plan-tags {
    margin-bottom: 0.5rem;   /* 11 → 8px. 세로로 쌓이는 레이아웃이라 배지↔이름 간격을 압축해 카드 높이 절감 */
  }
  .plans-page #planListContainer .plan-col-spec {
    grid-area: spec;
  }
  .plans-page #planListContainer .plan-col-price {
    grid-area: price;
  }
  .plans-page #planListContainer .plan-col-action {
    grid-area: action;
    justify-self: end;
  }
  .plans-page #planListContainer .plan-gift {
    grid-area: gift;
  }
  .plans-page #planListContainer .plan-buttons {
    justify-content: flex-end;
  }

  /* 비교 버튼 — 우상단 고스트(미니멀): 평소 배경·테두리 없는 흐린 아이콘 / 담김=연한 블루 배경 + 블루 아이콘 */
  .plans-page #planListContainer .btn-compare {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    z-index: 2;
    width: 2.25rem;
    height: 2.25rem;
    min-height: 0;
    padding: 0;
    gap: 0;
    border-radius: 50%;
    background: var(--gray-15);   /* 투명 → 옅은 칩: 탭 가능한 컨트롤임을 보여 발견성↑ */
    border: none;
    box-shadow: none;
    color: var(--text-tertiary);
    transition:
      background 0.16s,
      color 0.16s,
      transform 0.12s;
  }
  /* 시각 36px 유지하되 터치 영역 44px 확보(투명 히트존) */
  .plans-page #planListContainer .btn-compare::before {
    content: "";
    position: absolute;
    inset: -0.3125rem;
  }
  .plans-page #planListContainer .btn-compare:hover {
    background: var(--gray-100);
  }
  .plans-page #planListContainer .btn-compare:active {
    transform: scale(0.92);
  }
  .plans-page #planListContainer .btn-compare.on {
    background: var(--blue-soft);
    color: var(--color-main);
  }
  .plans-page #planListContainer .btn-compare .btn-compare-label {
    display: none;
  }
  .plans-page #planListContainer .btn-compare .cmp-icon {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
  }
  /* 선택(.on) 배경은 base의 PC 규칙(gray-400)을 그대로 사용 — 모바일도 PC와 동일 */
}

/* ─────────────────────────────────────────
   [플립] ≤360 — 초소형 최대 압축
   ───────────────────────────────────────── */
@media (max-width: 360px) {
  .plans-page #filterPop .gb-preset {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 빠른 칩 — 좁은 화면 밀도 최적화. 칩을 조인 만큼 gap도 같은 비율로 좁혀 리듬을 맞춘다.
     gap 6px는 터치 안전 하한(Material 칩셋 4~8px) — 이 이하로는 내리지 않는다 */
  .plans-page .quick-chips {
    gap: 0.375rem;   /* 8→6px (패딩 12→10과 동일 비율) */
  }
  .plans-page .quick-chip {
    padding: 0.375rem 0.625rem;   /* 좌우 12→10px */
  }
  .plans-page .qc-ico {
    width: 1.25rem;               /* 22→20px */
    height: 1.25rem;
  }
  /* 카드 폰트 — 플립도 모바일(361~679)과 동일 위계로(요청). quality는 base가 이미 13px라 동일 */
  /* 요금제명 — 폭 244px(거터+카드패딩+비교아이콘 자리 제외)에서 keep-all이 띄어쓰기 없는 긴 이름을
     아예 안 끊어 가로로 넘친다. 넘칠 때만 강제 개행하고, 자간·행간을 좁혀 줄당 글자 수를 늘린다 */
  .plans-page #planListContainer .plan-name {
    font-size: 0.8125rem;      /* 플립 13px — 가장 좁은 화면, 긴 이름 줄바꿈 최소화(사다리 최하단) */
    letter-spacing: -0.035em;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .plans-page #planListContainer .plan-col-info { padding-right: 2.75rem; }   /* 비교 아이콘 자리 소폭 축소 → 이름 폭 확보 */
  .plans-page #planListContainer .plan-tags { margin-bottom: 0.375rem; }      /* 6px — 이름이 2~3줄까지 늘어나므로 위 간격을 최대 압축 */
  .plans-page #planListContainer .plan-data-num { font-size: 1.125rem; }   /* 18px */
  .plans-page #planListContainer .plan-data-plus { font-size: 1rem; }      /* 16px */
  .plans-page #planListContainer .plan-price { font-size: 1.125rem; }      /* 18px */
}

/* ==========================================================================
   [25] 모션 줄이기 선호 — 애니메이션·부드러운 스크롤 최소화 (접근성)
   ※ 사용자 OS 설정 존중을 위한 의도적 !important
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .plans-page *,
  .plans-page *::before,
  .plans-page *::after,
  .plans-toast {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   [26] 스크롤 시 hero 상단 고정(컴팩트) — 별도 바 없이 hero 태그 그대로 재사용(스타일만 전환)
   센티넬이 화면 위로 나가면 JS가 .is-stuck 부여 → hero를 fixed로, 제목·서브·칩 숨겨 검색줄만 남김
   ========================================================================== */
.plans-page .hero-spacer {
  display: none;
}
.plans-page .hero-section.is-stuck + .hero-spacer {
  display: block;
}
.plans-page .hero-section.is-stuck {
  position: fixed;
  top: var(--header-h);   /* 고정 헤더 바로 아래 — top:0이면 sticky 헤더(z-index 500)에 가려짐 */
  left: 0;
  right: 0;
  z-index: 300; /* 비교바(200) 위 — hero 안 모달이 비교바보다 위에 그려지게(토스트 2000은 그대로 위) */
  padding: 0.375rem 0;
  margin-bottom: 0;
  background: var(--color-white);
  border-bottom: 1px solid var(--border-light);
  box-shadow: 0 6px 18px -10px rgba(16, 24, 40, 0.18);
  animation: heroStick 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  /* will-change/translateZ 레이어 승격 금지 — 텍스트가 서브픽셀 AA를 잃어 칩·버튼이 뿌옇게 렌더된다.
     position:fixed 만으로 스크롤 리페인트는 이미 없음 */
  contain: layout;   /* 내부 레이아웃을 문서와 격리 — 긴 리스트의 리플로우 전파 차단(paint는 미포함: 검색 드롭다운 잘림 방지) */
}
/* 컴팩트: 스크롤 시 제목 헤더(.v2-hero-head)를 숨기고 [필터][해시태그] 줄은 유지(항상 접근) */
.plans-page .hero-section.is-stuck .v2-hero-head {
  display: none;
}
/* 컴팩트 압축 — 칩 줄 아래 여백 제거(검색 노출 시에만 검색↔칩 gap 유지) */
.plans-page .hero-section.is-stuck .hero-bar {
  margin-bottom: 0;
}
@keyframes heroStick {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* 컴팩트(스크롤): 칩 기본 한 줄(가로 스크롤), ▾로 펼침 */
.plans-page .hero-section.is-stuck .qc-wrap {
  align-items: center;
}
.plans-page .hero-section.is-stuck .qc-wrap .quick-chips {
  flex-wrap: nowrap;
  overflow-x: auto;
}
/* ▾ 클릭(panel-open) → 칩 펼침(여러 줄) + 셰브론 회전 */
.plans-page .hero-section.is-stuck.panel-open .qc-wrap {
  align-items: flex-start;
}
.plans-page .hero-section.is-stuck.panel-open .qc-wrap .quick-chips {
  flex-wrap: wrap;
  overflow-x: visible;
}
.plans-page .hero-section.is-stuck.panel-open .qc-toggle .qc-chev {
  transform: rotate(180deg);
}
/* 패널 열림 시 칩을 줄바꿈 노출. qc-wrap은 flex 유지(align-items:flex-start) → 토글이 우측 상단(접힘 위치)에 그대로 고정,
   세로 스크롤은 칩 영역(qc-scroll)에만 줘 토글이 하단으로 밀리지 않게 함 */
.plans-page .hero-section.is-stuck.panel-open .qc-wrap {
  margin-top: 0.75rem;
}
.plans-page .hero-section.is-stuck.panel-open .qc-scroll {
  max-height: 50vh;
  overflow-y: auto;
}
.plans-page .hero-section.is-stuck.panel-open .quick-chips {
  flex-wrap: wrap;
  overflow: visible;
  cursor: default;
}

/* ==========================================================================
   [27] 보기 전환 — 리스트형(기본) ↔ 이미지(그리드)형
   • 토글 컨트롤은 공통 컴포넌트 .seg-tabs(.seg-sm) > .seg-tab 재사용(common.css)
   • JS가 #planListContainer에 .view-grid 부여 → 그리드 상태에서만 카드를 '세로 카탈로그'로 재배치
   ========================================================================== */
/* 공통 세그먼트 탭에 아이콘 전용 최소 조정만 (정사각 패딩 + 아이콘 크기) */
.plans-page .view-toggle {
  flex-shrink: 0;
}
.plans-page .view-toggle .seg-tab {
  padding: 0.375rem 0.5rem;
}
.plans-page .view-toggle .seg-tab .v2-icon {
  display: block;
  width: 1.0625rem;
  height: 1.0625rem;
}

/* 플립·모바일(≤679): 토글 숨김 — 이 구간은 무조건 리스트(아래 그리드 CSS가 ≥680부터라 .view-grid 무효) */
@media (max-width: 679px) {
  .plans-page .view-toggle {
    display: none;
  }
}

/* ── 이미지(그리드) 보기 — 폴드(≥680)부터만 적용. ≤679는 .view-grid가 있어도 base 리스트 유지 ── */
@media (min-width: 680px) {
  .plans-page #planListContainer.view-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    align-items: start;
  }
  .plans-page #planListContainer.view-grid .plan-card {
    margin: 0;
  }
  /* 카드 = 세로 스택(가로 그리드 무력화) */
  .plans-page #planListContainer.view-grid .plan-card .plan-card-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1.375rem 1.375rem 1.25rem;
    grid-template-columns: none;
    grid-template-areas: none;
  }
  /* 사은품 있는 카드 — 리스트 뷰와 동일하게 하단 여백을 card-body가 아닌 plan-gift가 갖게 이관.
     (그리드 card-body의 padding-bottom 1.25rem + plan-gift 자체 padding-bottom = 이중 여백으로 하단이 넓어지던 문제 수정) */
  .plans-page #planListContainer.view-grid .plan-card:has(.plan-gift) .plan-card-body { padding-bottom: 0; }
  /* 사은품 없을 때 하단 패딩을 있을 때(gift 하단 여백 — 폴드 1.125 / PC 1.375rem)와 동일하게 통일 */
  .plans-page #planListContainer.view-grid .plan-card:not(:has(.plan-gift)) .plan-card-body { padding-bottom: 1.125rem; }
  .plans-page #planListContainer.view-grid .plan-card .plan-main {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }
  .plans-page #planListContainer.view-grid .plan-card .plan-col-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .plans-page #planListContainer.view-grid .plan-card .plan-col-spec {
    padding-left: 0;
  }
  .plans-page #planListContainer.view-grid .plan-card .plan-side {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
  }
  .plans-page #planListContainer.view-grid .plan-card .plan-col-price,
  .plans-page #planListContainer.view-grid .plan-card .plan-col-action {
    padding-left: 0;
    text-align: left;
  }
  .plans-page #planListContainer.view-grid .plan-card .plan-col-price {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-self: flex-start;
    text-align: left;
  }
  .plans-page #planListContainer.view-grid .plan-card .plan-price-top {
    justify-content: flex-start;
  }
  .plans-page #planListContainer.view-grid .plan-card .plan-price {
    flex: 1;
    text-align: right;
    margin-left: auto;
  }
  /* 개월 티어 가격(너겟 등 tiered 카드만) — 좁은 그리드 카드에서 티어 칩을 전체 폭 별도 줄로 내려 깨짐 방지.
     .plan-price-tiers가 있는 카드에만 적용 → 티어 없는 일반 카드 레이아웃은 불변 */
  .plans-page #planListContainer.view-grid .plan-card .plan-price-tiers {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .plans-page #planListContainer.view-grid .plan-card .plan-price-after {
    width: 100%;
    text-align: right;
    margin-left: auto;
  }
  .plans-page #planListContainer.view-grid .plan-card .plan-buttons {
    display: flex;
    gap: 0.5rem;
  }
  .plans-page #planListContainer.view-grid .plan-card .btn-apply {
    flex: 1;
    justify-content: center;
  }
  /* 비교 버튼 — 그리드에선 아웃라인 + 라벨 */
  .plans-page #planListContainer.view-grid .plan-card .btn-compare {
    position: static;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    min-height: var(--btn-xs-h);
    padding: 0 var(--btn-xs-px);
    border-radius: var(--radius-md);
    background: var(--color-white);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    box-shadow: none;
  }
  .plans-page #planListContainer.view-grid .plan-card .btn-compare .btn-compare-label {
    display: inline;
  }
  .plans-page #planListContainer.view-grid .plan-card .btn-compare .cmp-icon {
    display: none;
  }
  .plans-page #planListContainer.view-grid .plan-card .btn-compare.on {
    background: var(--blue-soft);
    border-color: var(--color-main);
    color: var(--color-main);
    font-weight: 800;
  }
  .plans-page #planListContainer.view-grid .plan-card .plan-gift {
    margin-top: 1rem;
  }
  .plans-page #planListContainer.view-grid .plan-benefits,
  .plans-page #planListContainer.view-grid .plan-benefits.open {
    margin-left: 1.375rem;
    margin-right: 1.375rem;
  }
}
/* 이미지형 PC — 사은품 없을 때 하단 패딩을 있을 때(gift PC 여백 1.375rem)와 동일하게 */
@media (min-width: 1024px) {
  .plans-page #planListContainer.view-grid .plan-card:not(:has(.plan-gift)) .plan-card-body { padding-bottom: 1.375rem; }
}
@media (min-width: 1320px) {
  .plans-page #planListContainer.view-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===========================================================================
   [26] 보강 정의 — detail.php에서 사용되지만 누락된 셀렉터
   - HTML 사용 위치 추적 후 합리적 기본값 부여 (Crisp Bento + .detail-page 컨셉 유지)
=========================================================================== */
.detail-page .pd-hero-info       { display: flex; flex-direction: column; gap: 0.5rem; }
.detail-page .pd-terms-toggle-t  { display: inline-block; }/* .pd-section — 본문 섹션 wrapper (사은품·혜택·기본제공량 등) */.detail-page .pd-content > .pd-section + .pd-section,
/* index.php에서 사용되지만 누락된 셀렉터 보강 */.plans-page .af-cat           { color: var(--text-tertiary); font-weight: 600; margin-right: 0.25rem; }   /* 카테고리(데이터·통화 등) — 연하게 */
.plans-page .af-val           { color: var(--text-main); font-weight: 700; }                             /* 선택값 — 진하게(미니멀 칩, 카테고리와 위계) */.plans-page .fc-t             { font-weight: 700; color: var(--text-main); }   /* filter-card title */
.plans-page .lh-left          { display: flex; align-items: center; gap: 0.625rem; }/* =========================================================================
   [25c] 사이드바 3 카드 (시안 B Hierarchy++) — 가격·절약·CTA 분리
   - 모바일: 본문 흐름(자연 stack), 폴드↑: sticky 사이드바(위 ≥680 블록에서 처리)
   - 절약 카드: 메인블루 어울리는 파스텔 그라데이션 + SVG 아이콘 (Trust Blue & Pastel, §4)
   ========================================================================= */

/* 모바일 — 본문 흐름. 3 카드 자연 stack (gap은 .pd-grid가 처리) */
.detail-page .pd-sidebar { display: flex; flex-direction: column; gap: 0.625rem; }

/* ── 절약 하이라이트 카드 ───────────────────────────────────────────────
   온화한 파스텔 블루 그라데이션 + 흰 아이콘 박스 + 메인블루 zap 아이콘
   → "이만큼 이득" 메시지를 한 눈에 인지 (메인 CTA 위계 보호 위해 솔리드 블루 X)
   페이지 배경(#EEF0F4)·통합 카드 흰 wrapper 양쪽에서 명도 차이 확보 위해 한 단계 진한 톤 */
/* 절약 하이라이트 카드(원본) — 파스텔 블루 위 흰 아이콘 박스 + trending-down. 아이콘 좌측 + 라벨·"총 XX원" 우측 */
.detail-page .pd-save-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, #E3F1FF 0%, #BEDEFF 100%);   /* 프레시 스카이 — 원본보다 한 톤 맑은 블루(메인 #0267FF 색상 앵커) */
    border: 1px solid rgba(2, 103, 255, 0.22);
}
.detail-page .pd-save-icon-wrap {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;   /* 원형 — 해상도별 박스 크기가 달라져도 항상 정원 유지(고정 px 불필요) */
    background: var(--color-white);
    color: var(--color-main);
}
.detail-page .pd-save-icon-wrap .v2-icon { width: 1.25rem; height: 1.25rem; }
.detail-page .pd-save-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}
.detail-page .pd-save-k {
    font-size: 0.75rem;   /* 12px (모바일·플립 — 통합 카드 전폭). 폴드는 좁은 사이드바로 11px, PC 13px */
    font-weight: 600;
    color: var(--color-main-hover);
    letter-spacing: -0.01em;
}
.detail-page .pd-save-v {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--color-main);
    letter-spacing: -0.02em;
    line-height: 1;
}
.detail-page .pd-save-v em {
    font-style: normal;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-right: 0.1875rem;
}

/* ── 신청(CTA) 영역 — 배경·테두리 없는 단순 wrapper ─────────────────
   메인 CTA(브랜드 블루) 자체가 페이지 최대 시각 무게 → 감싸는 카드 효과는 위계 충돌
   사이드바 흐름에서 자연 호흡(margin)만 유지 */
.detail-page .pd-cta-card { padding: 0; background: none; border: none; box-shadow: none; margin-top: 0.25rem; }
.detail-page .pd-cta-card .pd-price-cta { margin-top: 0; margin-bottom: 0.625rem; }   /* 버튼↔안내 간격은 버튼 하단 마진으로 — 버튼 숨김(폴드) 시 문구 위 공백 없음 */

/* 모바일·플립 — 사이드바 통합 카드 (가격 + 절약 시각 한 덩어리)
   - 하단 고정 .pd-cta가 항상 노출되므로 사이드바 안 CTA 카드 숨김 (단일 CTA 명확화)
   - .pd-cost(흰) + .pd-save-card(파스텔 블루)를 자연 색 분리로 한 카드처럼 표현
     → box-shadow·radius를 wrapper(.pd-sidebar)에 통합 + 자식은 시각 분리 제거 */
@media (max-width: 679px) {
    .detail-page .pd-cta-card { display: none; }

    /* wrapper에 통합 시각 효과 — overflow visible 유지(툴팁 짤림 방지) */
    .detail-page .pd-sidebar {
        gap: 0;
        background: var(--color-white);
        border-radius: var(--radius-xl);
        box-shadow: 0 2px 12px rgba(17, 24, 39, 0.05);
        /* overflow: visible (기본값) — .pd-bill-pop-panel 같은 absolute 자식이 carrier 밖으로 자유롭게 노출되도록 */
    }
    /* 자식 카드 — 자체 그림자·border 제거(wrapper가 처리), radius는 첫·마지막에 부분 적용해 wrapper 둥근 모서리 일치 */
    .detail-page .pd-sidebar > .pd-cost,
    .detail-page .pd-sidebar > .pd-save-card {
        box-shadow: none;
        border: none;
    }
    .detail-page .pd-sidebar > .pd-cost {
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;   /* 위만 둥글게 */
        border-bottom: 1px solid var(--border-light);            /* 두 영역 옅은 구분선 */
    }
    /* 사은품(pd-save-card) 없는 요금제 — pd-cost가 마지막 카드 → 하단도 상단처럼 둥글게 + 구분선 제거 */
    .detail-page .pd-sidebar > .pd-cost:not(:has(~ .pd-save-card)) {
        border-radius: var(--radius-xl);
        border-bottom: none;
    }
    .detail-page .pd-sidebar > .pd-save-card {
        border-radius: 0 0 var(--radius-xl) var(--radius-xl);   /* 아래만 둥글게 */
    }
}

/* "자세히" affordance 라벨 — 전 해상도 노출 (호버 가능 PC/폴드에서도 어포던스 강화) */
.detail-page .pd-bill-pop {
    padding: 0.125rem 0.25rem;
    gap: 0.25rem;
    margin-left: 0.5rem;
    border-radius: var(--radius-sm);
}
/* 모바일 손가락 터치 영역 — 아이콘·라벨의 시각 크기는 작게 유지하되, 탭 히트 영역만 최소 44×44px로 확장
   (WCAG 2.5.5 · CLAUDE.md 4.6 터치 타겟). transform 중앙정렬 오버레이라 레이아웃엔 영향 없음. */
.detail-page .pd-bill-pop::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    min-width: 2.75rem;
    min-height: 2.75rem;
    transform: translate(-50%, -50%);
}
.detail-page .pd-bill-pop-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
    transition: color 0.15s;
}
/* 호버·포커스 — 라벨 색상도 아이콘과 동일하게 메인블루로 (시각 일체감) */
.detail-page .pd-bill-pop:hover .pd-bill-pop-label,
.detail-page .pd-bill-pop:focus .pd-bill-pop-label,
.detail-page .pd-bill-pop:focus-within .pd-bill-pop-label {
    color: var(--color-main);
}

/* ── 폴드↑ 사이드바 안 카드 압축 ─────────────────────────────────────
   사이드바 폭(12~15rem)에서 카드 패딩 약간 압축. 절약 카드 폰트 미세 조정 */
@media (min-width: 680px) {
    .detail-page .pd-save-card { padding: 0.75rem 0.875rem; gap: 0.625rem; }   /* 좁은 사이드바(12~15rem) — 아이콘·gap 압축 */
    .detail-page .pd-save-icon-wrap { width: 1.75rem; height: 1.75rem; }
    .detail-page .pd-save-icon-wrap .v2-icon { width: 1rem; height: 1rem; }
    .detail-page .pd-save-k { font-size: 0.6875rem; }   /* 11px — 최협 사이드바 */
    .detail-page .pd-save-v { font-size: 1.0625rem; }
    .detail-page .pd-save-v em { font-size: 0.75rem; }
}

/* PC(≥1024) — 사이드바 폭 15rem 여유 → 절약 카드 폰트·여백 확대 */
@media (min-width: 1024px) {
    .detail-page .pd-save-card { padding: 0.875rem 1rem; gap: 0.75rem; }
    .detail-page .pd-save-icon-wrap { width: 2.25rem; height: 2.25rem; }
    .detail-page .pd-save-icon-wrap .v2-icon { width: 1.25rem; height: 1.25rem; }
    .detail-page .pd-save-k { font-size: 0.8125rem; }   /* 13px — 사이드바 15rem */
    .detail-page .pd-save-v { font-size: 1.25rem; }
    .detail-page .pd-save-v em { font-size: 0.875rem; }
}

/* ===========================================================================
   [24] 요금제 선택 팝업 (plans/select.php)
   요금제 찾기 리스트 카드를 재사용하되, 카드 클릭으로 '선택(.selected)'하고
   하단 고정바(.select-bar)의 [선택하기]로 부모창에 전달한다.
   ※ 선택 상태·고정바는 팝업에서만 필요 → .plan-select 모디파이어로 본 리스트와 격리.
=========================================================================== */
.plans-page.plan-select main.v2-container {
    padding-top: 1.25rem;
    padding-bottom: 1.5rem;
}
/* 팝업은 사이트 헤더가 없음 — 스크롤 고정 시 --header-h 오프셋을 없애 필터+칩 바가 창 맨 위에 붙게(위 빈틈·콘텐츠 파고듦 방지) */
.plans-page.plan-select .hero-section.is-stuck {
    top: 0;
}
/* 팝업 창은 폭이 좁아, 우측(lh-right) 정렬 셀렉트 패널이 기본 좌측 정렬이면 창 밖으로 넘쳐 잘림 → 전 폭에서 우측 정렬
   (팝업 list-header엔 우측 정렬 셀렉트 1개뿐이라 좌측 넘침 위험 없음) */
.plans-page.plan-select .list-header .cs-panel {
    left: auto;
    right: 0;
}
/* 선택 카드 = 미니멀 스타일 — 좌측 리딩 라디오 + 테두리·배경 강조(그림자 없이 색·명도로).
   라디오는 ::before로 전 카드에 깔아, 미선택=회색 빈 링 / 선택=메인블루 채움+체크로 토글한다. */
.plans-page.plan-select #planListContainer .plan-card {
    position: relative;
}
/* 본문은 좌측 라디오 자리만큼 들여쓰기(라디오와 콘텐츠 겹침 방지).
   position:relative — 라디오(::before)를 '카드 전체'가 아닌 '이 본문' 기준으로 앵커.
   사은품 펼침(.plan-benefits)은 본문 밖 형제라, 펼쳐서 카드가 커져도 본문 높이는 그대로 → 라디오 위치 고정 */
.plans-page.plan-select #planListContainer .plan-card .plan-card-body {
    padding-left: 3.5rem;
    position: relative;
}
/* 리딩 라디오 — 기본(미선택): 회색 빈 링. 본문(.plan-card-body) 기준 세로 중앙이라 사은품 펼쳐도 안 움직임 */
.plans-page.plan-select #planListContainer .plan-card-body::before {
    content: "";
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    box-sizing: border-box;
    border: 2px solid var(--gray-300);
    background: var(--color-white);
    transition: border-color 0.18s var(--smooth), background-color 0.18s var(--smooth);
}
/* 선택 상태 — 카드 테두리·배경 강조 */
.plans-page.plan-select #planListContainer .plan-card.selected {
    border-color: var(--color-main);
    border-width: 2px;
    box-shadow: none;
}
/* 호버 시에도 선택 카드는 메인블루 유지(기본 카드 hover의 중성 테두리에 덮이지 않게) */
.plans-page.plan-select #planListContainer .plan-card.selected:hover {
    border-color: var(--color-main);
    box-shadow: none;
}
/* 선택 라디오 — 메인블루 채움 + 흰 체크(선택 완료를 강하게 표시) */
.plans-page.plan-select #planListContainer .plan-card.selected .plan-card-body::before {
    border-color: var(--color-main);
    background: var(--color-main) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.85rem no-repeat;
}

/* 하단 고정 선택바 — 카드 선택 시 슬라이드 업 */
.plans-page .select-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: var(--color-white);
    border-top: 1px solid var(--border-light);
    transform: translateY(110%);
    transition: transform 0.34s var(--smooth);
    pointer-events: none;   /* 숨김(오프스크린) 상태에서 하단 영역 클릭 가로채기 방지 */
}
.plans-page .select-bar.show {
    transform: translateY(0);
    pointer-events: auto;
}
.plans-page .select-bar-in {
    display: flex;
    justify-content: center;            /* 버튼을 바 가운데 정렬 */
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0.875rem var(--content-gutter) 1rem;
}
/* 단일 핵심 CTA(4.7) — 선택한 요금제명 + '선택하기'를 담은 솔리드 메인블루 버튼.
   풀폭이 아닌 콘텐츠 너비로 가운데 배치. 사이즈는 압축(컴팩트). */
.plans-page .select-bar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    max-width: 100%;
    padding: 0.8125rem 1.875rem;
    background: var(--color-main);
    color: var(--color-white);
    font-size: 0.9375rem;       /* 플립(≤360) 기준 15px */
    font-weight: 700;
    letter-spacing: -0.02em;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.18s var(--smooth);
}
.plans-page .select-bar-btn:hover {
    background: var(--color-main-hover);
}
.plans-page .select-bar-btn:active {
    background: var(--color-main-active);
}
.plans-page .select-bar-name {
    max-width: 56vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (min-width: 361px) {
    .plans-page .select-bar-btn { padding: 0.875rem 2rem; font-size: 1rem; }            /* 모바일 16px */
}
/* 고정바가 마지막 카드를 가리지 않도록 본문 하단 여백 확보(JS가 body.select-open 토글) */
.plans-page.select-open main.v2-container {
    padding-bottom: 5.75rem;
}