/* ============================================================
   동네방네 — 리디자인 디자인 시스템 (PHP 이식판)
   동네방네(boxim) 본진 톤 정렬 · 화이트 베이스 · 쿨 그레이 뉴트럴
   브랜드 블루 #64B2FF · 헤어라인 중심 · 최소 그림자
   원본: algeumpon/styles.css (React 프로토타입)
   변경점: .viewport.mobile/.desktop → 실제 @media, 디바이스토글 → 큰글씨토글
   ============================================================ */

/* ---------- 토큰: light (기본) — 본진(boxim) 톤 정렬 ---------- */
.app {
  --paper:      #FFFFFF;
  --paper-2:    #F3F4F6;
  --surface:    #FFFFFF;
  --ink:        #030712;
  --ink-2:      #6B7280;
  --ink-3:      #9CA3AF;
  --line:       #E5E7EB;
  --line-2:     #D1D5DB;
  --accent:     #1F2937;
  --accent-ink: #FFFFFF;
  /* 동네방네 로고 블루 — 포인트색 단일 원천. 아래 강조 토큰들이 전부 이 값을 가리키므로
     포인트색을 바꾸려면 여기 한 줄만 고치면 된다. 흰 배경 5.5:1 · 하늘색(#EAF4FF) 위 4.9:1로
     본문 크기 글씨·아이콘에 그대로 써도 대비가 맞는다. */
  --dnbn:       #0159FB;
  /* 테두리가 이미 로고 블루인 카드의 hover/선택 신호 — 같은 색이 부드럽게 번지는 글로우.
     본진 배너(1105_main_banner_test.html)의 `0 0 11px 2px #8aceff` 를 로고 블루로 옮기고
     운영자 요청대로 한 단계 옅게(투명도 .20, 퍼짐 1px) 잡았다. */
  --dnbn-glow:  0 0 12px 1px rgba(1, 89, 251, .20);
  --brand:      #64B2FF;    /* 연한 테두리·틴트 짝 (면적 넓은 곳) */
  --brand-strong:var(--dnbn); /* 점·별·포커스 링 같은 작은 강조 */
  --brand-soft: #EAF4FF;    /* 하늘색 배경 — 고객후기 밴드·진단 선택 카드 */
  --brand-ink:  var(--dnbn); /* 강조 텍스트·아이콘 */
  /* 절약·할인 강조 — 같은 로고 블루. 클래스명(.pill-save 등)은 그대로 두고 토큰만 가리켜
     사용처(사은품 태그·월 절약 pill·구간 라벨) 전체를 한 지점에서 전환한다. */
  --save:       var(--dnbn);
  --save-soft:  #EAF4FF;
  --save-ink:   var(--dnbn);
  /* 비교표 최적값 전용(범용 틴트 아님 — 회의 판정 3). --brand-soft보다 한 단계 짙어
     흰 셀 사이에서 배경만으로도 갈리고, 의미 전달 1차 신호는 ✓ 아이콘·굵기가 담당한다. */
  --best-soft:  #D6E9FB;
  --best-ink:   #0F5497;
  --warn:       #DC2626;
  --warn-soft:  #FCEAEA;
  --tint:       #F3F4F6;
  --hi:         #111827;
  --hi-ink:     #F9FAFB;
  --hi-line:    #374151;

  /* 섹션 밴드 — 흰 배경 위 흰 카드라 영역이 안 갈리던 문제를 배경 교대로 푼다.
     --paper-2(#F3F4F6)는 흰색과 차이가 카드 테두리보다도 작아 밴드로 쓸 수 없다. */
  --band:       #EDEFF2;
  --band-brand: #EAF4FF;

  /* 통신망 대표색 — 각 사 CI 실측값(사용자 지정). 배지·탭·필터·망별 CTA가 전부 이 토큰만 본다.
     -bg는 같은 색상(hue)의 가장 연한 틴트로, 배지 배경 전용. */
  --skt:#3617CE; --skt-bg:#ECEAFB;
  /* KT는 로고의 검정(#332B29)을 포인트색으로 쓴다 — 운영자 지정.
     같이 받은 KT 레드(#E92126)로 바꾸려면 아래 두 값만 #E92126 / #FDECEC 로 교체. */
  --kt:#332B29;  --kt-bg:#EDEAE8;
  --lgu:#FF2E98; --lgu-bg:#FFE9F3;

  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px;
  --sh-soft: 0 1px 0 rgba(3,7,18,.04);
  --sh-pop: 0 12px 28px -16px rgba(3,7,18,.28);
  --maxw: 1120px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 리셋/베이스 ---------- */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body.app {
  font-family:"Pretendard Variable","Pretendard","Apple SD Gothic Neo",system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01","cv01";
  letter-spacing:-0.011em;
  word-break:keep-all;
  text-wrap:pretty;
}
.app *::selection { background:var(--ink); color:var(--paper); }
.num { font-variant-numeric:tabular-nums; }
/* 폼 컨트롤은 기본이 OS 폰트라 명시하지 않으면 이 영역만 프리텐다드가 아니게 된다 */
button, input, select, textarea, optgroup, option { font-family:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
svg { display:block; }
.icn { width:1em; height:1em; stroke:currentColor; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* ---------- 앱 셸 ---------- */
.stage {
  min-height:100%;
  display:flex; flex-direction:column; align-items:center;
  overflow-x:clip;
  background:radial-gradient(120% 80% at 50% -10%, var(--paper-2), var(--paper) 60%);
  transition:background .4s var(--ease);
}
.stage > * { width:100%; }

/* ---------- 공통 레이아웃 ---------- */
.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px; }
.section { padding:clamp(36px,5vw,72px) 0; }
/* 섹션 라벨 — uppercase와 넓은 자간은 한글에 효과가 없어(오히려 자간만 풀려 본문처럼 읽힘) 뺐다.
   점 대신 좌측 세로 바로 바꿔 "여기서 새 섹션이 시작한다"를 눈에 띄게 한다. */
.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:800; letter-spacing:0;
  color:var(--brand-ink); white-space:nowrap;
}
.eyebrow .dot { width:3px; height:13px; border-radius:2px; background:var(--brand-strong); flex:none; }
.eyebrow + .h2, .eyebrow + h1, .eyebrow + h2 { margin-top:12px; }
.muted { color:var(--ink-2); }
.faint { color:var(--ink-3); }

/* 섹션 밴드 — 풀폭 배경 교대. 안쪽 .wrap이 1120px 중앙정렬을 그대로 하므로
   100vw를 쓰지 않아 스크롤바 폭 때문에 가로가 넘칠 일이 없다. */
.band { background:var(--band); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.band.band-brand { background:var(--band-brand); border-color:#D6E9FB; }
.band + .band { border-top:0; } /* 밴드가 연달아 오면 경계선이 겹쳐 두꺼워지는 것 방지 */
/* 밴드와 맞닿는 흰 섹션은 마주보는 여백을 줄인다 — 색이 바뀌는 지점이라 여백이 두 번 들어가면 뜬다 */
.section.to-band { padding-bottom:clamp(24px,3vw,40px); }
.section.from-band { padding-top:clamp(24px,3vw,40px); }
.band > .section { padding-top:clamp(32px,4.4vw,60px); padding-bottom:clamp(32px,4.4vw,60px); }

h1,h2,h3 { letter-spacing:-0.025em; line-height:1.08; font-weight:800; }
.display { font-size:clamp(35.5px,6vw,69.5px); font-weight:850; letter-spacing:-0.035em; line-height:0.98; }
.h2 { font-size:clamp(23.5px,3vw,31.5px); font-weight:800; }
.lead { font-size:clamp(17.5px,1.6vw,20.5px); color:var(--ink-2); line-height:1.55; }

/* 등장 애니메이션 — 프로젝트 내 다른 페이지(/lg/chmmvno 등)와 동일하게 OS 모션 감소 설정을 보지 않는다.
   예전엔 @media (prefers-reduced-motion: no-preference)로 감싸여 있어서, 그 설정을 켜둔 환경에서는
   허브만 등장 효과가 통째로 사라져 "여기만 죽어 있는" 화면이 됐다(2026-08-05 확인). */
.fade-up { animation:fadeUp .5s var(--ease) both; }
@keyframes fadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* ---------- 헤더 ---------- */
.hdr {
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line);
}
.hdr-in { display:flex; align-items:center; justify-content:space-between; height:60px; }
.brand { display:flex; align-items:center; gap:9px; min-width:0; }
.logo { display:flex; align-items:center; cursor:pointer; flex:none; }
.lt { font-weight:850; font-size:19.5px; letter-spacing:-0.03em; white-space:nowrap; cursor:pointer; }
.logo-img { height:30px; width:auto; display:block; flex:none; }
.ftr .logo-img { height:26px; }
.gnb { display:flex; align-items:center; gap:4px; }
.gnb a {
  font-size:15.5px; font-weight:600; color:var(--ink-2); padding:8px 12px; border-radius:var(--r-sm);
  transition:color .15s, background .15s; white-space:nowrap; cursor:pointer;
}
.gnb a:hover { color:var(--ink); background:var(--tint); }
.gnb a.active { color:var(--ink); }
.gnb .cmp { display:inline-flex; align-items:center; gap:6px; }
.gnb .cmp .cnt {
  min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--ink); color:var(--paper);
  font-size:12.5px; font-weight:700; display:inline-grid; place-items:center;
}

/* ---------- 버튼 ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:16.5px; border:1px solid transparent; border-radius:var(--r-md);
  padding:12px 20px; transition:transform .12s var(--ease), background .15s, border-color .15s, color .15s;
  white-space:nowrap;
}
.btn:active { transform:translateY(1px); }
.btn-pri { background:var(--accent); color:var(--accent-ink); }
.btn-pri:hover { background:color-mix(in srgb,var(--accent) 88%, var(--ink-2)); }
.btn-line { background:var(--surface); border-color:var(--line-2); color:var(--ink); }
.btn-line:hover { border-color:var(--dnbn); }
.btn-ghost { background:transparent; color:var(--ink-2); }
.btn-ghost:hover { color:var(--ink); background:var(--tint); }
.btn-lg { padding:16px 26px; font-size:18px; border-radius:var(--r-md); }
.btn-sm { padding:9px 14px; font-size:15px; border-radius:var(--r-sm); }
.btn-block { display:flex; width:100%; }
.btn .sub { font-weight:500; opacity:.7; font-size:.85em; }
/* a·button 어디에 붙어도 같은 모양이어야 한다 — button은 UA 기본 배경/테두리/글자크기를
   물려받아 리셋을 빼면 이 클래스만 회색 상자로 보인다(진단 건너뛰기·요금 다시 입력이 그랬다) */
.linkish {
  font-weight:600; color:var(--ink-2); display:inline-flex; align-items:center; gap:5px;
  white-space:nowrap; cursor:pointer;
  background:none; border:0; padding:0; font-size:inherit; line-height:inherit;
}
.linkish:hover { color:var(--ink); }
.linkish .icn { width:15px; height:15px; }

/* ---------- 칩/배지 ---------- */
.chip {
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:700; padding:6px 11px; border-radius:var(--r-pill);
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); white-space:nowrap;
}
/* 지금 걸려 있는 필터를 알리는 칩(목록 헤더) — 포인트색 + 해제 링크를 한 덩어리로 */
.chip.chip-on {
  gap:9px; border-color:var(--dnbn); background:var(--brand-soft);
  color:var(--dnbn); font-weight:800;
}
.chip.chip-on .linkish { color:var(--dnbn); font-weight:700; gap:3px; padding-left:9px; border-left:1px solid #C7DDFB; }
.chip.chip-on .linkish:hover { color:var(--ink); }
.chip.chip-on .linkish .icn { width:12px; height:12px; stroke-width:2.4; }
.net { font-size:12.5px; font-weight:800; padding:3px 8px; border-radius:6px; letter-spacing:-0.01em; }
.net-SKT { background:var(--skt-bg); color:var(--skt); }
.net-KT  { background:var(--kt-bg);  color:var(--kt); }
.net-LGU { background:var(--lgu-bg); color:var(--lgu); }
.pill-save {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--save-soft); color:var(--save-ink); font-weight:800; font-size:14.5px;
  padding:5px 10px; border-radius:var(--r-pill); white-space:nowrap;
}
.pill-save .icn { width:13px; height:13px; stroke-width:2; }

/* ============================================================
   랜딩
   ============================================================ */
.hero { padding-top:clamp(28px,4vw,56px); }
.bd-save .lbl { white-space:nowrap; }
.hero-context {
  display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-pill);
  padding:7px 14px 7px 8px; font-size:15px; font-weight:600; white-space:nowrap;
}
.hero-context .av { width:24px; height:24px; border-radius:50%; background:var(--paper-2); display:grid; place-items:center; }
.hero-context .av .icn { width:14px; height:14px; }

/* ---------- 히어로 배너 캐러셀 ----------
   기본 동작은 CSS 가로 스크롤(scroll-snap)이라 JS 없이도 전부 넘어간다.
   JS는 좌우 버튼·도트·중앙 강조·자동 넘김(5초)을 보탠다. 자동 넘김은 오클릭 우려로 한동안
   껐다가 운영 요청으로 다시 켰다(2026-08-05). 멈추는 수단은 마우스 올림·터치·포커스 진입이며,
   후기 캐러셀과 달리 별도 정지 버튼은 두지 않는다(같은 날 운영 판단).
   레일 없이 이미지가 풀폭으로 바로 노출된다(라운드·회색 프레임 제거 — 사용자 확정). */
.hero-banner {
  position:relative;
}
.hb-track {
  display:flex; flex-wrap:nowrap; gap:12px; overflow-x:auto;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
  padding-bottom:8px;
}
.hb-track::-webkit-scrollbar { height:6px; }
.hb-track::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:3px; }
.hb-track::-webkit-scrollbar-track { background:transparent; }
/* 슬라이드 = 업로드 이미지 한 장. 높이를 고정하지 않고 권장 규격의 비율을 박스에 그대로 준다.
   PC 16:5(권장 1920×600) — 본문 폭 안이라 데스크톱 노출 높이는 1080÷16×5 = 337px이다.
   이 값은 관리자 화면(inc/admin/tab_banners.php)의 권장 규격 문구와 한 쌍이라 한쪽만 바꾸면
   어긋난다. 고정 높이를 쓰던 때는 슬라이드 폭이 딱 한 값일 때만 비율이 맞아서 그보다 넓으면
   위아래가, 좁으면 좌우가 잘렸다(1120×280+252px 조합 기준 데스크톱에서 세로 18px 손실).
   원본이 1920인데 1080으로 그려지므로 고해상도 화면에서 오히려 더 선명하다.
   object-fit:cover는 규격을 벗어난 이미지가 올라왔을 때의 안전망으로 남긴다. */
.hb-slide {
  flex:none; width:100%; scroll-snap-align:center; box-sizing:border-box;
  aspect-ratio:16 / 5; border-radius:0; overflow:hidden;
  background:var(--surface);
  display:block; transition:border-color .25s var(--ease);
}
.hb-slide.hb-img picture { display:block; width:100%; height:100%; }
.hb-pic { width:100%; height:100%; object-fit:cover; display:block; }

.hb-nav {
  position:absolute; top:calc(50% - 12px); transform:translateY(-50%); z-index:2;
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink-2); display:grid; place-items:center;
  box-shadow:var(--sh-pop); transition:border-color .15s, color .15s;
}
.hb-nav:hover { border-color:var(--dnbn); color:var(--ink); }
.hb-nav .icn { width:16px; height:16px; }
.hb-nav[hidden] { display:none; } /* JS 미동작 시 미노출 — CSS 스크롤만으로 넘긴다 */
.hb-prev { left:-13px; }
.hb-next { right:-13px; }

.hb-dots { display:flex; justify-content:center; align-items:center; }
.hb-dots[hidden] { display:none; }
/* 투명 테두리로 히트영역만 24px까지 넓힌다 — 보이는 점은 8px, 누르는 범위는 손가락에 맞게 */
.hb-dot {
  width:24px; height:24px; padding:0; border:8px solid transparent; background-clip:padding-box;
  border-radius:var(--r-pill); background-color:var(--line-2);
  transition:width .2s var(--ease), background-color .2s;
}
/* 활성 표시는 색이 아니라 폭 — 색만으로 구분하면 저대비·색각 환경에서 안 보인다 */
.hb-dot[aria-current="true"] { width:36px; background-color:var(--brand-ink); }

/* ---------- 질문형 히어로 폴백 ----------
   배너 미등록 시 대체 히어로. 디자인 회의 확정 스펙: --r-xl 패널, --band-brand + radial 1개,
   무그림자·무JS. 칩을 누르면 진단 1단계 답이 저장된 채 2단계로 직행한다. */
.hero-ask {
  border-radius:var(--r-xl);
  padding:clamp(32px,5vw,56px);
  background:var(--band-brand) radial-gradient(80% 100% at 80% 0%, #DFEEFE, transparent);
  border:1px solid #D6E9FB; /* .band.band-brand 경계색 관례와 동일 */
}
.hero-ask-head { max-width:18ch; }
.hero-ask-q { margin-top:clamp(20px,3vw,30px); font-size:clamp(18px,2vw,21.5px); font-weight:800; }
.hero-ask-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.hero-ask-chips .chip {
  font-size:15px; padding:10px 16px; gap:7px; color:var(--ink);
  cursor:pointer; transition:border-color .14s, transform .12s var(--ease);
}
.hero-ask-chips .chip:hover { border-color:var(--dnbn); transform:translateY(-1px); }
.hero-ask-chips .chip .icn { width:15px; height:15px; color:var(--brand-ink); }
.hero-ask-sub { margin-top:14px; font-size:14px; color:var(--ink-2); }

/* 티어 진입 그리드 */
.tier-head-row { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:26px; gap:16px; flex-wrap:wrap; }
.tier-head-row > div:first-child { flex:1 1 auto; min-width:0; }
.list-head > div:first-child { flex:1 1 auto; min-width:0; }
/* 2열 고정 — 3열이면 구간이 4개일 때 3+1로 떨어져 마지막 칸만 붕 뜬다(사용자 피드백).
   모바일까지 전 구간 2열이라 배열이 화면 크기에 따라 흔들리지 않는다. */
.tier-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.tier-card {
  background:var(--surface); border:1px solid var(--dnbn); border-radius:var(--r-lg);
  padding:20px; display:flex; flex-direction:column; gap:2px; min-height:148px;
  transition:box-shadow .15s, transform .15s var(--ease); position:relative; cursor:pointer;
}
/* 테두리가 이미 로고 블루라 hover는 같은 색 링으로 알린다(색을 또 바꾸면 신호가 안 됨) */
.tier-card:hover { box-shadow:var(--dnbn-glow); transform:translateY(-3px); }
/* 요금제 0개 구간 — 6칸 격자를 지키려고 자리는 남기되, 누를 수 없다는 걸 색으로 알린다 */
.tier-card.is-empty { border-color:var(--line); cursor:default; }
.tier-card.is-empty:hover { box-shadow:none; transform:none; }
.tier-card.is-empty .ic { opacity:.45; }
.tier-card.is-empty .lb { color:var(--ink-2); }
.tier-card.is-empty .rg { color:var(--ink-3); }
.tier-card .ic { width:34px; height:34px; border-radius:10px; background:var(--tint); display:grid; place-items:center; margin-bottom:auto; }
.tier-card .ic .icn { width:18px; height:18px; }
.tier-card .lb { font-weight:800; font-size:17px; margin-top:16px; }
.tier-card .rg { font-size:14px; color:var(--save-ink); font-weight:700; }
.tier-card .mt { font-size:14px; color:var(--ink-3); margin-top:8px; display:flex; align-items:center; gap:6px; }
.tier-card .arrow { position:absolute; top:20px; right:20px; color:var(--ink-3); transition:transform .15s, color .15s; }
.tier-card:hover .arrow { color:var(--ink); transform:translate(2px,-2px); }
.tier-card .arrow .icn { width:18px; height:18px; }

/* 용도 카드 (랜딩 "용도로 고르기") — 카드마다 대표 요금제 1개 미니 프리뷰.
   항상 한 줄(줄바꿈 없음): auto-flow:column 이라 카드가 몇 개든 가로로만 늘어선다.
   폭이 남으면 1fr로 벌어져 화면을 꽉 채우고, 모자라면 200px에서 멈추고 가로 스크롤로 넘어간다.
   (기존 auto-fill 그리드는 태블릿에서 3+2로 줄바꿈돼 어색하다는 피드백 — 모바일과 같은 1줄로 통일) */
.use-row {
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(200px, 1fr); gap:12px;
  overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;
  padding:6px 0 8px; /* hover 시 카드가 위로 3px 떠도 잘리지 않게 위아래 여백 */
}
.use-row::-webkit-scrollbar { display:none; }
.use-card {
  scroll-snap-align:start;
  display:flex; flex-direction:column; gap:10px;
  background:var(--surface); border:1px solid var(--dnbn); border-radius:var(--r-lg);
  padding:18px; text-decoration:none; color:var(--ink);
  transition:box-shadow .15s, transform .15s var(--ease);
}
.use-card:hover { box-shadow:var(--dnbn-glow); transform:translateY(-3px); }
.uc-top { display:flex; align-items:center; gap:9px; }
.uc-ic { width:34px; height:34px; border-radius:10px; background:var(--tint); display:grid; place-items:center; flex:none; }
.uc-ic .icn { width:18px; height:18px; }
.uc-lb { font-weight:800; font-size:16px; line-height:1.35; }
.uc-plan { padding-top:12px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:4px; }
.uc-prov { display:flex; align-items:center; gap:6px; }
.uc-prov .uc-nm { font-size:13.5px; color:var(--ink-2); font-weight:600; }
.uc-pnm { font-size:14px; color:var(--ink-2); }
.uc-pr { font-size:17.5px; font-weight:800; color:var(--ink); }
.uc-bottom { margin-top:auto; padding-top:10px; display:flex; align-items:center; justify-content:space-between; font-size:14px; font-weight:700; color:var(--ink-2); }
.use-card:hover .uc-bottom { color:var(--ink); }
.uc-arrow { display:inline-flex; color:var(--ink-3); transition:transform .15s, color .15s; }
.uc-arrow .icn { width:16px; height:16px; }
.use-card:hover .uc-arrow { color:var(--ink); transform:translate(2px,-2px); }

/* FAQ — 네이티브 <details> 기반 아코디언 */
.faq-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.faq-grid .faq-item:last-child:nth-child(odd) { grid-column:1 / -1; } /* 홀수 마지막 항목 전체폭 */
.faq-item { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.faq-q { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; text-align:left;
  padding:18px 20px; font-weight:700; font-size:16.5px; color:var(--ink); cursor:pointer; list-style:none; }
.faq-q::-webkit-details-marker { display:none; }
.faq-q .icn { width:18px; height:18px; color:var(--ink-3); transition:transform .2s var(--ease); }
.faq-item[open] .faq-q .icn { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .28s var(--ease); }
.faq-item[open] .faq-a { max-height:400px; }
.faq-a p { padding:0 20px 18px; color:var(--ink-2); font-size:16px; line-height:1.6; }

/* ============================================================
   요금제 카드
   ============================================================ */
.plan-grid { display:grid; gap:16px; grid-template-columns:1fr; }
.plan-grid.cols-2 { grid-template-columns:1fr 1fr; }

.pcard {
  background:var(--surface); border:1px solid var(--dnbn); border-radius:var(--r-lg);
  padding:20px; display:flex; flex-direction:column; position:relative;
  transition:box-shadow .15s, transform .15s var(--ease);
}
.pcard:hover { box-shadow:var(--dnbn-glow); transform:translateY(-2px); cursor:pointer; }
/* 카드 전체 클릭 → 상세(스트레치 링크, 무JS). 버튼류는 .pcard-actions가 위 레이어에서 가로챔 */
.pcard-stretch { position:absolute; inset:0; z-index:1; border-radius:inherit; }
.pcard-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.pcard .reason {
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  font-size:13.5px; font-weight:800; color:var(--save-ink); background:var(--save-soft);
  padding:5px 10px; border-radius:var(--r-pill); margin-bottom:12px; white-space:nowrap;
}
.pcard .reason .icn { width:13px; height:13px; stroke-width:2; }
.pcard .prov { font-size:14px; color:var(--ink-2); font-weight:600; display:flex; align-items:center; gap:7px; }
/* 카드 통신사 평점 배지 — 리뷰 MVNO_RATING_MIN건 이상일 때만(plan_card.php에서 판정) */
.pcard-rating { display:inline-flex; align-items:center; gap:3px; font-weight:800; color:var(--ink); }
.pcard-rating .icn { width:12px; height:12px; color:var(--brand-strong); fill:currentColor; }
.pcard .pname { font-size:19.5px; font-weight:800; letter-spacing:-0.02em; margin-top:5px; line-height:1.2; }

.pcard-price { margin:16px 0 14px; }
.pcard-price .rowp { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.pcard-price .big { font-size:31.5px; font-weight:850; letter-spacing:-0.03em; }
.pcard-price .big .u { font-size:16.5px; font-weight:600; color:var(--ink-2); margin-left:1px; }
.pcard-price .after { font-size:14px; color:var(--ink-2); margin-top:5px; display:flex; align-items:center; gap:6px; }
.pcard-price .after .warn-dot { color:var(--warn); }

.spec3 { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.spec3 .cell { padding:11px 8px; text-align:center; border-left:1px solid var(--line); }
.spec3 .cell:first-child { border-left:0; }
.spec3 .k { font-size:12.5px; color:var(--ink-3); display:flex; align-items:center; justify-content:center; gap:4px; }
.spec3 .k .icn { width:12px; height:12px; }
.spec3 .v { font-size:15px; font-weight:700; margin-top:4px; }
.pcard .note { font-size:13.5px; color:var(--ink-2); margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }
.pcard .note span { display:inline-flex; align-items:center; gap:4px; }
.pcard .note .icn { width:13px; height:13px; }
.pcard-actions { display:flex; gap:8px; margin-top:16px; position:relative; z-index:2; }
.pcard-actions .btn { flex:1; }
.pcard-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.pcard-tags .ptag {
  display:inline-flex; align-items:center; padding:3px 9px; border-radius:var(--r-pill);
  background:var(--brand-soft); color:var(--brand-ink); font-size:13px; font-weight:700;
}

/* best 강조 — 잉크 보더 + 상단 라벨 */
/* 좌상단 라운드 제거 = 탭 좌측면과 카드 좌측선이 한 줄로 이어진다(위 .crown 주석 참고).
   margin-top 은 카드 위로 올라간 탭 높이(패딩 18 + 글자 17 = 35 중 2px 겹침 → 33px)를 비워두는 자리. */
.pcard.best { border:1.5px solid var(--dnbn); margin-top:36px; border-top-left-radius:0; }
/* 추천 1위 라벨 — 카드 위에 얹힌 '탭' 모양(디자인 시안). 알약이 카드 테두리를 뚫고 떠 있던 걸
   카드 좌측선에 맞춰 앉히고 위쪽만 둥글게 깎아 카드와 한 덩어리로 읽히게 한다.
   bottom:100%로 카드 상단에 붙이므로 라벨 높이가 바뀌어도 위치 계산이 필요 없다.
   left:-1.5px는 .pcard.best의 테두리 두께 — 라벨 좌측면과 카드 좌측선을 정확히 맞춘다. */
/* 추천 1위 라벨 — 카드 위에 얹힌 탭. 카드 좌측선과 탭 좌측면을 정확히 맞추려고
   left 를 테두리 두께(-1.5px)만큼 당기고, 카드의 좌상단 라운드를 없앤다(.pcard.best).
   라운드를 남기면 카드 모서리가 안으로 파여 탭 왼쪽이 허공에 뜬 것처럼 보인다.
   ※ z-index로 탭을 카드 '뒤'에 보내는 방식은 쓰지 말 것 — 음수 z-index는 부모뿐 아니라
     상위 블록(.stage·body)의 배경 뒤로도 들어가 탭이 통째로 사라진다(2026-07-30 확인). */
.pcard .crown {
  position:absolute; bottom:calc(100% - 2px); left:-1.5px;
  background:var(--ink); color:var(--paper);
  font-size:13px; font-weight:800; padding:8px 15px 10px;
  border-radius:var(--r-md) var(--r-md) 0 0;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.pcard .crown .icn { width:13px; height:13px; stroke-width:2; }
.plan-grid.cols-2 .pcard.best { grid-column:1 / -1; }

/* ============================================================
   진단(퀴즈)
   ============================================================ */
.quiz-shell { max-width:600px; margin:0 auto; padding-top:24px; }
.quiz-bar { display:flex; align-items:center; gap:12px; margin-bottom:34px; }
.quiz-steps { display:flex; gap:6px; flex:1; }
.quiz-steps i { height:5px; flex:1; border-radius:3px; background:var(--line-2); transition:background .3s; }
.quiz-steps i.on { background:var(--brand); }
.quiz-count { font-size:14.5px; color:var(--ink-2); font-weight:700; white-space:nowrap; }
.quiz-q { margin-bottom:0; font-size:clamp(25.5px,3.4vw,35.5px); font-weight:850; letter-spacing:-0.03em; }
.quiz-help { color:var(--ink-2); font-size:16.5px; margin:12px 0 0; }
/* 질문(큰 제목) ↔ 선택 박스 사이 간격 — 1·2단계 모두 같은 간격이 되도록
   제목/보조문구는 아래 여백 0으로 두고 이 margin-top 하나가 간격을 책임진다. */
.quiz-opts { display:flex; flex-direction:column; gap:11px; margin-top:34px; }
.opt {
  display:flex; align-items:center; gap:16px; text-align:left; width:100%;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-md);
  padding:18px 18px; transition:border-color .14s, background .14s, transform .12s var(--ease);
}
.opt:hover { border-color:var(--dnbn); transform:translateY(-1px); }
/* 선택된 답 — 카드는 하늘색(랜딩 고객후기 밴드와 같은 --brand-soft),
   체크 동그라미는 동네방네 로고 블루에 흰 체크. 색만으로 전달하지 않도록 테두리도 함께 바뀐다. */
.opt.sel { border-color:var(--dnbn); background:var(--brand-soft); }
.opt .oic { width:42px; height:42px; border-radius:11px; background:var(--paper-2); display:grid; place-items:center; flex:none; }
.opt .oic .icn { width:21px; height:21px; }
.opt.sel .oic { background:#FFFFFF; } /* 하늘색 카드 위에선 회색 칩이 탁해 보여 흰색으로 */
.opt .ot { font-size:18px; font-weight:800; }
.opt .os { font-size:14.5px; color:var(--ink-2); margin-top:2px; }
.opt .ock { margin-left:auto; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line-2); display:grid; place-items:center; color:transparent; flex:none; }
.opt.sel .ock { background:var(--dnbn); border-color:var(--dnbn); color:#FFFFFF; }
.opt .ock .icn { width:13px; height:13px; stroke-width:2.6; }
/* 건너뛰기 — 답 고르는 흐름을 방해하지 않을 만큼만 보이는 보조 동작.
   1단계는 <a>, 2단계(마지막)는 submit <button>이라 .linkish 하나로 둘의 모양을 맞춘다.
   margin은 아래 패딩(9px)만큼 줄여 잡아 선택 박스와의 광학적 간격을 22px로 유지. */
.quiz-skip { text-align:center; margin-top:13px; }
.quiz-skip .linkish {
  font-size:15px; gap:6px; padding:9px 16px; border-radius:var(--r-pill);
  transition:color .14s, background .14s;
}
.quiz-skip .linkish:hover { color:var(--ink); background:var(--paper-2); }
.quiz-skip .linkish:focus-visible { border-radius:var(--r-pill); }
.quiz-skip .linkish .icn { width:14px; height:14px; transition:transform .16s var(--ease); }
.quiz-skip .linkish:hover .icn { transform:translateX(2px); }

/* ============================================================
   목록 / 필터
   ============================================================ */
.list-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
/* 빠른 필터 프리셋 칩(list-head 아래·툴바 위) — .chip 재사용 + 활성 상태만 브랜드 톤으로 구분 */
.quick-chips { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px; }
.quick-chips .chip { cursor:pointer; transition:border-color .14s, background .14s, color .14s; }
.quick-chips .chip:hover { border-color:var(--dnbn); }
.quick-chips .chip.on { border-color:var(--dnbn); background:var(--brand-soft); color:var(--brand-ink); }
.toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:22px; }
/* 툴바 1행(세그+셀렉트+체크필+초기화) — 데스크톱은 랩, 모바일(≤640px)은 한 줄 슬라이드로 전환 */
.toolbar-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; flex-basis:100%; min-width:0; }
.toolbar .seg, .toolbar .selct, .toolbar .checkpill { height:40px; } /* 컨트롤 높이 통일 — 한 줄 정렬 */
.toolbar-row > .linkish { margin-left:auto; } /* 초기화 우측 정렬 */
.seg { display:inline-flex; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px; }
.seg button, .seg a { border:0; background:transparent; color:var(--ink-2); font-weight:700; font-size:14.5px; padding:7px 14px; border-radius:var(--r-pill); transition:color .14s, background .14s; }
.seg button.on, .seg a.on { background:var(--surface); color:var(--ink); box-shadow:var(--sh-soft); }
/* 통신망 세그먼트 — 망 이름은 선택 여부와 무관하게 항상 그 망의 대표색.
   선택 상태는 위 .on 규칙의 흰 알약(배경+그림자)이 담당하므로 색 지정은 이 한 벌이면 된다.
   (.on과 특정도가 같고 뒤에 오므로 색만 이 규칙이 이긴다 — 순서를 바꾸지 말 것) */
.seg a.seg-net-SKT { color:var(--skt); }
.seg a.seg-net-KT  { color:var(--kt); }
.seg a.seg-net-LGU { color:var(--lgu); }
.selct {
  appearance:none; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-pill);
  padding:9px 34px 9px 14px; font-family:inherit; font-size:15px; font-weight:600; color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
}
.checkpill { display:inline-flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-pill); padding:8px 14px; font-size:15px; font-weight:600; cursor:pointer; user-select:none; transition:border-color .14s, background .14s; position:relative; }
.checkpill.on { border-color:var(--dnbn); background:var(--tint); }
/* 체크박스는 hidden 속성 대신 .sr-only — hidden이면 키보드 포커스 자체가 불가(WCAG 2.1.1) */
.checkpill input.sr-only:focus-visible + .bx { outline:2px solid var(--brand-strong); outline-offset:4px; border-radius:5px; }
.checkpill:has(input.sr-only:focus-visible) { outline:2px solid var(--brand-strong); outline-offset:2px; }
.checkpill:has(input.sr-only:focus-visible) input.sr-only:focus-visible + .bx { outline:none; } /* :has 지원 브라우저는 pill 외곽 링만 */
.checkpill .bx { width:16px; height:16px; border-radius:5px; border:1.5px solid var(--line-2); display:grid; place-items:center; color:transparent; }
.checkpill.on .bx { background:var(--brand); border-color:var(--brand); color:#fff; }
.checkpill .bx .icn { width:11px; height:11px; stroke-width:3; }

/* 상세 필터(무JS <details>) — 기본 툴바 아래 자체 줄. summary=토글 pill, 열리면 패널 노출 */
.more-filters { order:1; flex-basis:100%; }
.more-filters > summary {
  display:inline-flex; align-items:center; gap:7px; min-height:40px; box-sizing:border-box;
  padding:8px 14px; background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r-pill); font-size:15px; font-weight:600; color:var(--ink-2);
  cursor:pointer; user-select:none; list-style:none; white-space:nowrap; width:max-content;
  transition:border-color .14s, background .14s, color .14s;
}
.more-filters > summary::-webkit-details-marker { display:none; }
.more-filters > summary::after { content:"+"; font-weight:700; color:var(--ink-3); font-size:16.5px; line-height:1; }
.more-filters[open] > summary { border-color:var(--dnbn); background:var(--tint); color:var(--ink); }
.more-filters[open] > summary::after { content:"\2212"; } /* − (minus sign) */
.more-filters > summary .cnt {
  min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--brand); color:#fff;
  font-size:12.5px; font-weight:800; display:inline-grid; place-items:center;
}
.more-panel {
  display:flex; flex-wrap:wrap; gap:10px; margin-top:10px;
  padding:14px; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-md);
}
.more-panel .selct { background-color:var(--surface); }
/* 바텀시트 전용 UI(그랩바·제목·닫기·적용하기) — 데스크톱/태블릿 인라인 패널에선 숨김 */
.more-panel .sheet-head, .more-panel .sheet-apply { display:none; }

/* 정렬 안내 문구(투명성 — 할인 종료 후 낮은 순의 의미) */
.filter-note { font-size:14px; color:var(--ink-2); margin:-12px 0 20px; line-height:1.6; }
.filter-note b { font-weight:700; color:var(--ink); }

.tsec { margin-bottom:40px; scroll-margin-top:78px; }
/* 구간 제목은 위아래 같은 선으로 감싼다 — 제목 줄이 한 덩어리로 잡혀 구간 시작점이 분명해진다.
   선은 제목에 바짝 붙이고(padding 5px), 색은 동네방네 로고 블루(--dnbn) — eyebrow 세로바·포인트색과 한 계열 */
.tsec-head {
  display:flex; align-items:center; gap:12px;
  padding:5px 0;
  border-top:1.5px solid var(--dnbn);
  border-bottom:1.5px solid var(--dnbn);
  margin-bottom:18px;
}
.tsec-head .ic { width:34px; height:34px; border-radius:10px; background:var(--tint); display:grid; place-items:center; }
.tsec-head .ic .icn { width:18px; height:18px; }
.tsec-head .tt { font-size:20.5px; font-weight:850; letter-spacing:-0.02em; }
.tsec-head .rg { font-size:14px; font-weight:700; color:var(--save-ink); }
.tsec-head .ds { margin-left:auto; font-size:14.5px; color:var(--ink-3); }

/* ============================================================
   상세
   ============================================================ */
.detail { max-width:760px; margin:0 auto; padding-top:8px; }
.dt-head { padding:14px 0 24px; }
.dt-head .pname { font-size:clamp(27.5px,4vw,39.5px); font-weight:850; letter-spacing:-0.03em; margin-top:10px; line-height:1.06; }
.dt-head .prov { font-size:15.5px; color:var(--ink-2); font-weight:600; display:flex; align-items:center; gap:8px; margin-top:10px; }
.dt-rating { display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-weight:800; font-size:16.5px; }
.dt-rating .icn { width:15px; height:15px; color:var(--brand-strong); fill:currentColor; }
.dt-rating .cnt { font-size:14px; font-weight:600; color:var(--ink-3); }
.dt-chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.dt-chips .chip { font-size:13.5px; padding:6px 11px; border-color:transparent; background:var(--tint); color:var(--ink-2); }
.dt-chips .chip .icn { width:13px; height:13px; }

.breakdown { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:26px; }
.bd-now { background:var(--hi); color:var(--hi-ink); border-radius:var(--r-lg); padding:24px; display:flex; flex-direction:column; justify-content:center; }
.bd-now .lbl { font-size:14.5px; opacity:.7; white-space:nowrap; }
.bd-now .amt { font-size:45.5px; font-weight:850; letter-spacing:-0.04em; line-height:1; margin-top:8px; }
.bd-now .amt small { font-size:18.5px; opacity:.7; font-weight:600; }
.bd-now .term { margin-top:12px; font-size:14px; opacity:.75; }
/* 통신망별 가격 박스 포인트색 — 배지·탭과 같은 대표색 토큰을 그대로 쓴다 */
.bd-now.bd-net-SKT { background:var(--skt); }
.bd-now.bd-net-KT  { background:var(--kt); }
.bd-now.bd-net-LGU { background:var(--lgu); }
/* 전환 퍼널 CTA(목록 카드 '신청'·상세 고정·브릿지 리드 제출)도 같은 망 색 — 배지·가격 박스와 시각적 연속 */
.btn-pri.btn-net-SKT { background:var(--skt); }
.btn-pri.btn-net-SKT:hover { background:color-mix(in srgb,var(--skt) 85%, #000); }
.btn-pri.btn-net-KT { background:var(--kt); }
.btn-pri.btn-net-KT:hover { background:color-mix(in srgb,var(--kt) 85%, #000); }
.btn-pri.btn-net-LGU { background:var(--lgu); }
.btn-pri.btn-net-LGU:hover { background:color-mix(in srgb,var(--lgu) 85%, #000); }
.bd-rows { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:8px 20px; display:flex; flex-direction:column; justify-content:center; }
.bd-rows .row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; border-top:1px dashed var(--line); }
.bd-rows .row:first-child { border-top:0; }
.bd-rows .k { display:inline-flex; align-items:center; gap:6px; font-size:14.5px; color:var(--ink-2); white-space:nowrap; }
.bd-rows .k .icn { width:14px; height:14px; }
.bd-rows .v { font-size:17px; font-weight:800; letter-spacing:-0.01em; text-align:right; }
.bd-rows .v.warn { color:var(--warn); }
.bd-rows .v.strike { text-decoration:line-through; color:var(--ink-3); font-weight:600; }
.bd-save { background:var(--save-soft); border:1px solid color-mix(in srgb,var(--save) 30%, var(--surface)); border-radius:var(--r-lg); padding:18px 20px; display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.bd-save .lbl { font-size:15px; color:var(--save-ink); font-weight:700; }
.bd-save .val { font-size:25.5px; font-weight:850; color:var(--save-ink); letter-spacing:-0.02em; white-space:nowrap; }

.sec-ttl { font-size:18.5px; font-weight:800; margin-bottom:12px; display:flex; align-items:center; gap:8px; white-space:nowrap; }
.sec-ttl .icn { width:18px; height:18px; color:var(--ink-2); }
.section-block { margin-bottom:34px; }
.sec-sub { font-size:14.5px; color:var(--ink-2); margin:-4px 0 14px; }

.spectable { width:100%; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); }
.spectable .r { display:grid; grid-template-columns:120px 1fr; border-top:1px solid var(--line); }
.spectable .r:first-child { border-top:0; }
.spectable .r .k { padding:13px 16px; background:var(--tint); font-size:15px; font-weight:700; color:var(--ink-2); }
.spectable .r .v { padding:13px 16px; font-size:15.5px; line-height:1.55; }
.spectable .r .v .hint { display:block; font-size:13.5px; color:var(--ink-2); margin-top:2px; }

/* sticky CTA */
.sticky-cta { position:sticky; bottom:0; z-index:30; margin-top:8px; }
.sticky-cta-in { background:color-mix(in srgb,var(--paper) 88%, transparent); backdrop-filter:blur(12px); border-top:1px solid var(--line); padding:14px 0; }

/* ============================================================
   비교
   ============================================================ */
.cmp-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; contain:paint; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); }
.cmp-table { border-collapse:collapse; width:100%; min-width:560px; }
.cmp-table th, .cmp-table td { padding:14px 12px; text-align:center; border-left:1px solid var(--line); border-top:1px solid var(--line); font-size:15px; }
.cmp-table thead th { border-top:0; }
.cmp-table th:first-child, .cmp-table td:first-child { border-left:0; }
.cmp-table tbody th { text-align:left; background:var(--tint); font-weight:700; color:var(--ink-2); position:sticky; left:0; z-index:1; width:120px; font-size:14px; }
.cmp-table thead th { vertical-align:top; }
.cmp-table thead .col { display:flex; flex-direction:column; gap:6px; align-items:center; position:relative; }
.cmp-table thead .col .x { position:absolute; top:-6px; right:-4px; color:var(--ink-3); }
.cmp-table thead .col .x .icn { width:15px; height:15px; }
.cmp-table thead .col .mv { font-weight:800; font-size:15.5px; }
.cmp-table thead .col .nm { font-size:13px; color:var(--ink-3); }
/* 최적값 셀 — 색만으로 구분하지 않는다: ✓ 아이콘 + 굵기(800)가 1차 신호, 틴트는 보조(색각 이상 ~8% 대응) */
.cmp-table td.best { background:var(--best-soft); color:var(--best-ink); font-weight:800; }
.cmp-table td.best .best-ck { display:inline-block; width:13px; height:13px; stroke-width:2.6; vertical-align:-2px; margin-right:3px; }
.cmp-table .tech-tag { font-size:12px; font-weight:700; color:var(--ink-2); letter-spacing:.02em; }
.cmp-cta { display:flex; flex-direction:column; gap:6px; }
.cmp-hint { text-align:center; font-size:14px; color:var(--ink-2); margin-bottom:10px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.cmp-summary { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:8px; padding:12px 14px; background:var(--tint); border-radius:12px; font-size:15px; }
.cmp-summary .cs-k { display:inline-flex; align-items:center; gap:5px; font-weight:700; color:var(--save-ink); flex:none; }
.cmp-summary .cs-v { color:var(--ink-2); }
.cmp-summary .cs-v strong { color:var(--ink); }
.cmp-legend { display:flex; align-items:center; gap:7px; font-size:13.5px; color:var(--ink-2); margin-bottom:10px; }
.cmp-legend .lg-swatch { width:16px; height:16px; border-radius:4px; background:var(--best-soft); color:var(--best-ink); display:grid; place-items:center; flex:none; }
.cmp-legend .lg-swatch .icn { width:11px; height:11px; stroke-width:2.8; }
.cmp-share { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; padding:10px 12px; border:1px dashed var(--line-2); border-radius:12px; }
.cmp-share .lbl { display:inline-flex; align-items:center; gap:5px; font-size:14px; font-weight:700; color:var(--ink-2); flex:none; }
.cmp-share .input { flex:1; min-width:180px; font-size:14px; padding:8px 10px; color:var(--ink-2); }
.cmp-share .btn { flex:none; }
/* 비교표: 헤더 코너 셀 sticky 정렬(본문 라벨과 동일 고정) */
.cmp-table thead td:first-child { position:sticky; left:0; z-index:2; background:var(--surface); }
.cmp-table tbody th, .cmp-table thead td:first-child { box-shadow:1px 0 0 var(--line); }
/* 스크롤 어포던스: 열 스냅 */
.cmp-scroll { scroll-snap-type:x proximity; }
.cmp-table thead th, .cmp-table tbody td { scroll-snap-align:start; }

/* 비교 트레이 */
.tray { position:sticky; bottom:0; z-index:35; margin-top:auto; }
.tray-in { background:var(--hi); color:var(--hi-ink); border-radius:var(--r-lg); padding:12px 16px; display:flex; align-items:center; gap:12px; box-shadow:var(--sh-pop); }
.tray-items { display:flex; gap:7px; flex:1; flex-wrap:wrap; }
.tray-item { display:inline-flex; align-items:center; gap:7px; background:color-mix(in srgb,var(--hi-ink) 12%, transparent); border-radius:var(--r-pill); padding:5px 6px 5px 11px; font-size:14px; font-weight:600; }
.tray-item .x { opacity:.6; display:grid; place-items:center; }
.tray-item .x:hover { opacity:1; }
.tray-item .x .icn { width:13px; height:13px; }
.tray-slot { border:1px dashed var(--hi-line); border-radius:var(--r-pill); padding:5px 12px; font-size:13.5px; color:color-mix(in srgb,var(--hi-ink) 50%, transparent); }

/* ============================================================
   브릿지
   ============================================================ */
.bridge { max-width:560px; margin:0 auto; padding-top:12px; }
.bridge h1 { font-size:clamp(25.5px,3.6vw,33.5px); text-align:center; }
.bridge-sub { text-align:center; color:var(--ink-2); margin:12px 0 26px; font-size:16.5px; }
.checklist { display:flex; flex-direction:column; gap:10px; margin-bottom:22px; }
.cl-item { display:flex; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px; align-items:flex-start; }
.cl-item .ck { width:26px; height:26px; border-radius:8px; background:var(--save-soft); color:var(--save-ink); display:grid; place-items:center; flex:none; }
.cl-item .ck .icn { width:15px; height:15px; stroke-width:2.4; }
.cl-item .ct { font-weight:800; font-size:16.5px; }
.cl-item .cs { font-size:14.5px; color:var(--ink-2); margin-top:2px; }
.plan-summary { background:var(--tint); border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px; margin-bottom:18px; text-align:center; }
.plan-summary .nm { font-weight:800; font-size:16.5px; }
.plan-summary .mt { font-size:14.5px; color:var(--ink-2); margin-top:5px; }
.outlink-note { text-align:center; font-size:14px; color:var(--ink-3); margin:10px 0 22px; display:flex; align-items:center; justify-content:center; gap:6px; }
.outlink-note .icn { width:14px; height:14px; }
.optin { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:18px; }
.optin h3 { font-size:17px; font-weight:800; }
.optin .sub { font-size:14.5px; color:var(--ink-2); margin:6px 0 14px; }
.optin-form { display:flex; gap:8px; }
.field { flex:1; min-width:0; }
.input { width:100%; padding:13px 14px; border:1.5px solid var(--line-2); border-radius:var(--r-md); font-family:inherit; font-size:16.5px; background:var(--surface); color:var(--ink); }
.input:focus,
.selct:focus,
.admin-login input:focus,
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus,
.admin-form input:focus, .admin-form select:focus {
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft);
}
/* 키보드 포커스 가시화 — 마우스 클릭엔 링 없음(:focus-visible 의미) */
:is(a, button, summary, [tabindex="0"]):focus-visible {
  outline:2px solid var(--brand-strong); outline-offset:2px; border-radius:4px;
}
.optin-done { text-align:center; padding:8px 0; }
.optin-done .ic { width:44px; height:44px; border-radius:50%; background:var(--save-soft); color:var(--save-ink); display:grid; place-items:center; margin:0 auto 10px; }
.optin-done .ic .icn { width:22px; height:22px; stroke-width:2.4; }
.optin-done strong { display:block; font-size:16.5px; }
.optin-done p { font-size:14.5px; color:var(--ink-2); margin-top:4px; }
.form-error { color:var(--warn); font-size:14.5px; margin-bottom:8px; }

/* ---------- 리드 캡처 모달 (무JS — :target + 에러 시 .open) ---------- */
.lead-modal {
  display:none; position:fixed; inset:0; z-index:200;
  background:rgba(3,7,18,.5); padding:20px; box-sizing:border-box;
  align-items:center; justify-content:center; overflow-y:auto;
}
.lead-modal:target,
.lead-modal.open { display:flex; }
.lead-modal-in {
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-pop);
  width:100%; max-width:420px; padding:26px 22px; box-sizing:border-box;
}
.lead-modal-in h3 { font-size:18px; font-weight:800; }
.lead-modal-in .sub { font-size:14.5px; color:var(--ink-2); margin:6px 0 16px; }
.lead-close {
  position:absolute; top:14px; right:16px; font-size:23.5px; line-height:1;
  color:var(--ink-3); text-decoration:none;
}
.lead-close:hover { color:var(--ink); }
.lead-form { display:flex; flex-direction:column; gap:10px; }
.lead-form .input { width:100%; box-sizing:border-box; }
.lead-agree { display:flex; align-items:flex-start; gap:8px; font-size:14px; color:var(--ink-2); cursor:pointer; line-height:1.4; }
.lead-agree-box { margin-top:2px; flex:none; accent-color:var(--brand); }
.lead-agree-detail { display:block; font-size:12.5px; color:var(--ink-3); margin-top:3px; }
/* 동의 전엔 제출 버튼 비활성(무JS; :has 미지원 브라우저는 checkbox required + 서버검증으로 차단) */
.lead-form:has(.lead-agree-box:not(:checked)) button[type="submit"] { opacity:.55; pointer-events:none; }

/* ---------- 푸터 ---------- */
.ftr { border-top:1px solid var(--line); padding:34px 0 60px; margin-top:40px; }
.ftr-in { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.ftr p { font-size:14px; color:var(--ink-3); line-height:1.7; max-width:60ch; }
.ftr .disc { font-size:13px; color:var(--ink-3); margin-top:14px; }
.ftr a { color:var(--ink-2); text-decoration:underline; text-underline-offset:2px; }
.ftr-biz { list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:4px 14px; font-size:13.5px; color:var(--ink-3); line-height:1.7; }
.ftr-links { font-size:14px; color:var(--ink-3); margin-top:10px; }
.ftr-links .muted { opacity:.65; }

/* dnbn 공식 푸터 (관리자 제외) — dnbn.co.kr 본사이트 푸터를 그대로 이식.
   PC 규칙 = public/pc/assets/css/basic.css, 모바일(≤640px) 규칙 = public/mobile/assets/css/basic.css 의 .footer 블록.
   본사이트 CSS를 링크하지 않고 값만 복사한다(허브는 self-contained). 본사이트 푸터가 바뀌면 여기도 같이 고칠 것.
   .wrap 폭/좌우 여백만 허브 값(--maxw)을 쓴다 — 푸터가 페이지 본문과 같은 열에 정렬되도록. */
.footer { background-color:#F3F4F6; border-top:1px solid #D1D5DB; padding:3rem 0 4.8125rem; }
.footer .wrap .qlink-social { display:flex; align-items:center; justify-content:space-between; }
.footer .wrap .qlink-social .logo img { display:block; width:83px; height:24px; }
.footer .wrap .qlink-social .sns { display:flex; align-items:center; }
.footer .wrap .qlink-social .sns a { display:flex; align-items:center; justify-content:center; font-size:0; line-height:0; text-indent:-9999px; overflow:hidden; width:1.5rem; height:1.5rem; background:no-repeat center center; }
.footer .wrap .qlink-social .sns a + a { margin-left:0.75rem; }
.footer .wrap .qlink-social .sns a.f-insta { background-image:url('f-social-insta.svg'); }
.footer .wrap .qlink-social .sns a.f-youtube { background-image:url('f-social-youtube.svg'); }
.footer .wrap .qlink-social .sns a.f-face { background-image:url('f-social-facebook.svg'); }
.footer .wrap .qlink-social .sns a.f-blog { background-image:url('f-social-blog.svg'); }
.footer .wrap .b-footer { margin-top:1.5rem; display:flex; justify-content:space-between; }
/* 본사이트 PC 마크업의 .l-ft(좌측 열) — 우측 r-ft가 주석 처리된 상태라 폭을 다 쓰게 둔다(모바일 전폭 버튼도 이게 있어야 산다) */
.footer .wrap .b-footer .l-ft { flex:1 1 auto; min-width:0; }
.footer .wrap .b-footer .cscenter { display:flex; align-items:center; }
.footer .wrap .b-footer .cscenter > a { display:flex; align-items:center; justify-content:center; border:1px solid rgba(209,213,219,1); border-radius:0.25rem; width:7rem; height:3rem; color:rgba(3,7,18,1); font-size:1rem; font-weight:600; text-decoration:none; }
.footer .wrap .b-footer .cscenter > a:after { content:''; background:url('footer-btn-arrow.svg') no-repeat; display:inline-block; width:1rem; height:1rem; margin-left:0.5rem; }
.footer .wrap .b-footer .cscenter > div { margin-left:1.5rem; }
.footer .wrap .b-footer .cscenter > div h4 { font-size:1.125rem; font-weight:700; color:rgba(3,7,18,1); }
.footer .wrap .b-footer .cscenter > div p { font-size:0.875rem; color:rgba(3,7,18,1); margin-top:0.3125rem; }
.footer .wrap .b-footer .quick { margin-top:1.5rem; }
.footer .wrap .b-footer .quick > ul { display:flex; list-style:none; margin:0; padding:0; }
.footer .wrap .b-footer .quick > ul > li { position:relative; }
.footer .wrap .b-footer .quick > ul > li + li { margin-left:0.5rem; padding-left:0.5rem; }
.footer .wrap .b-footer .quick > ul > li + li:before { content:''; background-color:rgba(3,7,18,1); position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:0.75rem; }
.footer .wrap .b-footer .quick > ul > li > a { color:rgba(3,7,18,1); font-size:0.875rem; text-decoration:underline; text-underline-offset:2px; }
.footer .wrap .b-footer .conts { margin-top:1.5rem; }
.footer .wrap .b-footer .conts p { margin:0; }
.footer .wrap .b-footer .conts p > span { font-size:0.875rem; color:rgba(107,114,128,1); font-style:normal; }
.footer .wrap .b-footer .conts p > span em { font-style:normal; font-weight:400; }
.footer .wrap .b-footer .conts p > span + span { margin-left:0.5rem; padding-left:0.5rem; position:relative; }
.footer .wrap .b-footer .conts p > span + span:before { content:''; background-color:rgba(107,114,128,1); width:1px; height:0.75rem; position:absolute; left:0; top:50%; transform:translateY(-50%); }
.footer .wrap .b-footer .conts span.name { font-size:0.875rem; font-weight:700; color:rgba(107,114,128,1); }
.footer .wrap .b-footer .conts p > span.underline { text-decoration:underline; text-underline-offset:2px; }
.footer .wrap .b-footer .copyright { margin-top:1.5rem; }
.footer .wrap .b-footer .copyright .t1 { font-size:0.875rem; color:rgba(107,114,128,1); }
.footer .wrap .b-footer .copyright .t2 { font-size:0.75rem; color:rgba(107,114,128,1); margin-top:0.25rem; }
/* 모바일 — 본사이트 모바일 푸터와 동일: 아이콘 1.25rem, 고객지원 버튼 전폭(연락처 아래), 주소·통신판매번호 줄바꿈(.noline) */
@media (max-width:640px){
  .footer { padding:1.5rem 0; }
  .footer .wrap .qlink-social .sns a { width:1.25rem; height:1.25rem; background-size:1.25rem 1.25rem; }
  .footer .wrap .b-footer { margin-top:0; } /* 모바일은 .cscenter 쪽 margin-top으로 간격을 준다(본사이트 동일) */
  .footer .wrap .b-footer .cscenter { display:flex; flex-direction:column-reverse; align-items:stretch; margin-top:1.5rem; }
  .footer .wrap .b-footer .cscenter > a { width:100%; margin-top:1.5rem; }
  .footer .wrap .b-footer .cscenter > a:after { flex:none; }
  .footer .wrap .b-footer .cscenter > div { margin-left:0; }
  .footer .wrap .b-footer .quick > ul { flex-wrap:wrap; }
  .footer .wrap .b-footer .conts p > span { position:relative; display:inline-block; }
  .footer .wrap .b-footer .conts p > span.noline { width:100%; display:block; padding-left:0; margin-left:0; }
  .footer .wrap .b-footer .conts p > span.noline:before { display:none; }
}

/* 사은품 / 혜택 */
.pcard .note .gift { color:var(--save-ink); font-weight:700; }
.gift-callout { display:flex; align-items:center; gap:8px; margin:-8px 0 26px; padding:11px 14px; background:var(--save-soft); color:var(--save-ink); border-radius:12px; font-size:15px; }
.gift-callout strong { font-weight:800; margin-right:2px; }
/* 상세 — 사은품 상세 박스 (사은품명 강조 + 지급 조건 등 항목 나열) */
.gift-box { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); overflow:hidden; }
.gift-name { display:flex; align-items:center; gap:8px; padding:13px 18px; background:var(--save-soft); color:var(--save-ink); font-weight:800; font-size:16px; }
.gift-name .icn { width:15px; height:15px; stroke-width:2; }
.gift-rows { list-style:none; margin:0; padding:5px 18px 9px; }
.gift-rows li { position:relative; padding:9px 0 9px 15px; font-size:15px; color:var(--ink-2); line-height:1.55; border-top:1px solid var(--line); }
.gift-rows li:first-child { border-top:0; }
.gift-rows li::before { content:""; position:absolute; left:2px; top:16px; width:5px; height:5px; border-radius:50%; background:var(--save); }
.gift-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.gift-card { display:flex; flex-direction:column; gap:6px; padding:16px; border:1px solid var(--dnbn); border-radius:var(--r-lg); background:var(--surface); text-decoration:none; transition:box-shadow .15s; }
.gift-card:hover { box-shadow:var(--dnbn-glow); }
.gift-card .gc-tag { display:inline-flex; align-items:center; gap:5px; align-self:flex-start; padding:3px 9px; border-radius:999px; background:var(--save-soft); color:var(--save-ink); font-size:13.5px; font-weight:700; }
.gift-card .gc-nm { color:var(--ink); font-weight:600; font-size:15.5px; }
.gift-card .gc-pr { color:var(--ink-2); font-size:14.5px; }

/* 후기 / 평점 (통신사 단위, 만족도 1~5) */
.review-form { display:flex; flex-direction:column; gap:10px; }
.score-pick { display:flex; gap:8px; }
.score-pick .sp { flex:1; position:relative; }
.score-pick input { position:absolute; opacity:0; width:1px; height:1px; }
.score-pick span { display:flex; align-items:center; justify-content:center; min-height:42px; border:1.5px solid var(--line-2); border-radius:var(--r-sm); font-weight:700; font-size:15px; color:var(--ink-2); cursor:pointer; transition:border-color .14s, background .14s, color .14s; }
.score-pick span:hover { border-color:var(--dnbn); }
.score-pick input:checked + span { border-color:var(--brand-strong); background:var(--brand-soft); color:var(--brand-ink); }
.score-pick input:focus-visible + span { outline:2px solid var(--brand-strong); outline-offset:2px; }
.rf-row { display:flex; gap:8px; }
.rf-row .input { flex:1; min-width:0; }
.rf-row .btn { flex:none; }
.review-list { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.review-list li { display:flex; align-items:center; gap:9px; font-size:14.5px; color:var(--ink-2); }
.review-list .rl-score { flex:none; min-width:34px; text-align:center; padding:2px 7px; border-radius:7px; background:var(--save-soft); color:var(--save-ink); font-weight:700; font-size:13.5px; }
/* 허니팟 미끼 필드 — 화면 밖으로 숨겨 사람에겐 보이지 않음(봇만 채움) */
.hp-field { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* 랜딩 고객리뷰 캐러셀 — 무JS 가로 스크롤(scroll-snap)이 기본,
   JS는 autoplay·좌우 버튼·중앙 카드 강조만 보강한다 */
.rv-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 16px; }
.rv-tabs .chip { cursor:pointer; transition:border-color .14s, background .14s, color .14s; }
.rv-tabs .chip:hover { border-color:var(--ink-2); }
.rv-tabs .chip.on { border-color:var(--dnbn); background:var(--brand-soft); color:var(--brand-ink); }
/* 통신망 탭은 이름 자체를 그 망의 대표색으로 쓰고, 선택되면 같은 색의 틴트·테두리가 더해진다.
   ('전체' 탭만 브랜드 블루 유지 — 특정 망에 속하지 않는 선택지) */
.rv-tabs .chip.net-tab-SKT { color:var(--skt); }
.rv-tabs .chip.net-tab-KT  { color:var(--kt); }
.rv-tabs .chip.net-tab-LGU { color:var(--lgu); }
.rv-tabs .chip.on.net-tab-SKT { border-color:var(--skt); background:var(--skt-bg); color:var(--skt); }
.rv-tabs .chip.on.net-tab-KT  { border-color:var(--kt);  background:var(--kt-bg);  color:var(--kt); }
.rv-tabs .chip.on.net-tab-LGU { border-color:var(--lgu); background:var(--lgu-bg); color:var(--lgu); }
.rv-shell { position:relative; }
.review-carousel {
  display:flex; flex-wrap:nowrap; gap:14px; overflow-x:auto;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;
  padding:6px 2px 10px;
}
.review-carousel::-webkit-scrollbar { display:none; }
.rv-card {
  flex:none; width:300px; scroll-snap-align:center;
  display:flex; flex-direction:column; gap:12px;
  background:var(--surface); border:1px solid var(--dnbn); border-radius:var(--r-lg);
  padding:20px; box-shadow:var(--sh-soft);
  transition:box-shadow .25s var(--ease), transform .25s var(--ease);
}
.rv-card.rv-on { box-shadow:var(--dnbn-glow); transform:translateY(-2px); } /* 중앙 강조(JS 부여) */
.rv-stars { display:flex; align-items:center; gap:2px; color:var(--brand-strong); }
.rv-stars .icn { width:15px; height:15px; fill:currentColor; }
.rv-stars .icn.off { color:var(--line-2); }
.rv-stars .num { margin-left:6px; font-size:15px; font-weight:800; color:var(--ink); }
.rv-txt { flex:1; font-size:16px; line-height:1.65; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.rv-meta { display:flex; align-items:center; gap:7px; padding-top:12px; border-top:1px solid var(--line);
  font-size:14.5px; font-weight:600; color:var(--ink-2); }
.rv-nav {
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink-2); display:grid; place-items:center;
  box-shadow:var(--sh-soft); transition:border-color .15s, color .15s;
}
.rv-nav:hover { border-color:var(--dnbn); color:var(--ink); }
.rv-nav .icn { width:16px; height:16px; }
.rv-nav[hidden] { display:none; } /* JS 미동작 시 버튼 미노출 — CSS 스크롤만으로 동작 */
.rv-prev { left:-12px; }
.rv-next { right:-12px; }
.rv-empty {
  margin-top:4px; padding:32px 20px; text-align:center;
  border:1px dashed var(--line-2); border-radius:var(--r-lg); background:var(--surface);
}
.rv-empty strong { display:block; font-size:16.5px; }
.rv-empty p { font-size:15px; color:var(--ink-2); margin-top:6px; }

/* 가이드 / 콘텐츠 허브 · 통신사 */
.h3 { font-size:clamp(18.5px,2.4vw,21.5px); font-weight:800; color:var(--ink); letter-spacing:-.01em; }
/* 가이드 허브 주제 탭 — 무JS(라디오 + :checked ~ 형제 선택자).
   탭을 누르면 (1) 위의 큰 제목 (2) 탭 활성 표기 (3) 아래 설명 패널이 한 번에 바뀐다.
   짝짓기는 순번 고정이다: N번째 .gt-i가 체크되면 각 영역의 N번째 자식이 켜진다.
   → 가이드가 8개를 넘으면 아래 :nth-of-type/:nth-child 줄도 그만큼 늘려야 한다. */
.gtabs { position:relative; }
.gt-t { display:none; font-size:clamp(21px,2.8vw,28px); font-weight:800; line-height:1.15; letter-spacing:-0.025em; color:var(--ink); }
.gt-row { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 18px; }
.gt-tab {
  display:inline-flex; align-items:center; cursor:pointer; white-space:nowrap;
  font-size:15px; font-weight:700; padding:10px 15px; border-radius:var(--r-pill);
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2);
  transition:border-color .14s, background .14s, color .14s;
}
.gt-tab:hover { border-color:var(--dnbn); color:var(--ink); }
.gt-p { display:none; padding:22px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); }
.gt-sm { font-size:16.5px; color:var(--ink-2); line-height:1.75; }
.gt-toc-lbl { margin-top:16px; font-size:13.5px; font-weight:700; color:var(--ink-3); }
.gt-toc { display:flex; flex-wrap:wrap; gap:7px; margin:8px 0 18px; list-style:none; }
.gt-toc li { font-size:14px; font-weight:600; color:var(--ink-2); background:var(--tint); border-radius:var(--r-pill); padding:6px 11px; }
/* 선택된 순번 → 큰 제목·패널 노출 */
.gt-i:nth-of-type(1):checked ~ :is(.gt-head,.gt-panels) > :nth-child(1),
.gt-i:nth-of-type(2):checked ~ :is(.gt-head,.gt-panels) > :nth-child(2),
.gt-i:nth-of-type(3):checked ~ :is(.gt-head,.gt-panels) > :nth-child(3),
.gt-i:nth-of-type(4):checked ~ :is(.gt-head,.gt-panels) > :nth-child(4),
.gt-i:nth-of-type(5):checked ~ :is(.gt-head,.gt-panels) > :nth-child(5),
.gt-i:nth-of-type(6):checked ~ :is(.gt-head,.gt-panels) > :nth-child(6),
.gt-i:nth-of-type(7):checked ~ :is(.gt-head,.gt-panels) > :nth-child(7),
.gt-i:nth-of-type(8):checked ~ :is(.gt-head,.gt-panels) > :nth-child(8) { display:block; }
/* 선택된 순번 → 탭 활성 표기(.quick-chips .chip.on과 같은 톤) */
.gt-i:nth-of-type(1):checked ~ .gt-row > :nth-child(1),
.gt-i:nth-of-type(2):checked ~ .gt-row > :nth-child(2),
.gt-i:nth-of-type(3):checked ~ .gt-row > :nth-child(3),
.gt-i:nth-of-type(4):checked ~ .gt-row > :nth-child(4),
.gt-i:nth-of-type(5):checked ~ .gt-row > :nth-child(5),
.gt-i:nth-of-type(6):checked ~ .gt-row > :nth-child(6),
.gt-i:nth-of-type(7):checked ~ .gt-row > :nth-child(7),
.gt-i:nth-of-type(8):checked ~ .gt-row > :nth-child(8) { border-color:var(--dnbn); background:var(--brand-soft); color:var(--brand-ink); font-weight:800; }
/* 포커스는 숨은 라디오가 받지만 눈에 보이는 건 라벨 — 링을 라벨로 옮긴다(WCAG 2.4.7).
   라디오는 hidden이 아니라 .sr-only라 키보드 포커스·좌우 화살표 이동이 그대로 산다(2.1.1). */
.gt-i:nth-of-type(1):focus-visible ~ .gt-row > :nth-child(1),
.gt-i:nth-of-type(2):focus-visible ~ .gt-row > :nth-child(2),
.gt-i:nth-of-type(3):focus-visible ~ .gt-row > :nth-child(3),
.gt-i:nth-of-type(4):focus-visible ~ .gt-row > :nth-child(4),
.gt-i:nth-of-type(5):focus-visible ~ .gt-row > :nth-child(5),
.gt-i:nth-of-type(6):focus-visible ~ .gt-row > :nth-child(6),
.gt-i:nth-of-type(7):focus-visible ~ .gt-row > :nth-child(7),
.gt-i:nth-of-type(8):focus-visible ~ .gt-row > :nth-child(8) { outline:2px solid var(--brand-strong); outline-offset:2px; }
/* display:none → block로 바뀌는 순간 애니메이션이 새로 돈다(전환 신호).
   위 .fade-up과 같은 이유로 모션 감소 설정 분기를 제거했다(2026-08-05). */
.gt-t, .gt-p { animation:gtIn .2s var(--ease) both; }
@keyframes gtIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.guide-article { max-width:720px; }
.guide-sec { margin-bottom:22px; }
.guide-sec h2 { font-size:18.5px; font-weight:700; color:var(--ink); margin-bottom:8px; }
.guide-sec p { font-size:16px; color:var(--ink-2); line-height:1.8; }
.guide-cta { display:flex; gap:10px; flex-wrap:wrap; margin:26px 0; padding:20px; background:var(--tint); border-radius:var(--r-lg); }
.guide-more { display:flex; flex-direction:column; gap:8px; padding-top:18px; border-top:1px solid var(--line); }
.carrier-row { display:flex; gap:10px; flex-wrap:wrap; }
.carrier-chip { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); text-decoration:none; font-weight:600; font-size:15.5px; transition:border-color .15s; }
.carrier-chip:hover { border-color:var(--dnbn); }

/* 전환 — 개통 소요시간 */
.activation-time { display:flex; gap:10px; flex-wrap:wrap; margin:16px 0; }
.activation-time .at-item { flex:1; min-width:140px; display:flex; flex-direction:column; gap:4px; padding:12px 14px; background:var(--tint); border-radius:12px; }
.activation-time .at-k { display:inline-flex; align-items:center; gap:5px; font-size:13.5px; color:var(--ink-3); }
.activation-time .at-v { font-size:15px; font-weight:700; color:var(--ink); }
.ttl-badge { display:inline-block; margin-left:8px; padding:2px 9px; border-radius:999px; background:var(--save-soft); color:var(--save-ink); font-size:13.5px; font-weight:700; vertical-align:middle; }

/* 통신비 절감 시뮬레이터 */
.sim-form { display:flex; flex-direction:column; gap:14px; }
.sim-form label { display:flex; flex-direction:column; gap:6px; font-size:14.5px; font-weight:600; color:var(--ink-2); }
.sim-form .input, .sim-form .selct { width:100%; }
.sim-result { margin-top:24px; padding:24px; border-radius:var(--r-lg); background:var(--save-soft); }
.sim-head { font-size:14.5px; color:var(--save-ink); font-weight:700; }
.sim-amt { font-size:39.5px; font-weight:800; color:var(--save-ink); line-height:1.1; margin:4px 0; }
.sim-amt small { font-size:17.5px; font-weight:600; margin-left:4px; }
.sim-sub { font-size:15.5px; color:var(--ink-2); }
.sim-sub strong { color:var(--ink); }
.sim-family { display:flex; flex-direction:column; gap:4px; margin-top:14px; padding:14px; border-radius:var(--r-md); background:var(--surface); }
.sim-family .lbl { display:inline-flex; align-items:center; gap:6px; font-size:14.5px; font-weight:700; color:var(--save-ink); }
.sim-family .val { font-size:20.5px; font-weight:800; color:var(--ink); }
.sim-family .val strong { color:var(--save-ink); }
.sim-family .sub { font-size:13.5px; color:var(--ink-3); }
.sim-plan { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; padding-top:16px; border-top:1px solid color-mix(in srgb,var(--save-ink) 22%,transparent); flex-wrap:wrap; }
.sim-plan .sp-info { display:flex; align-items:center; gap:8px; font-size:15.5px; color:var(--ink); font-weight:600; }

/* 추천 산정 기준(투명성) */
.reco-method { margin-top:24px; border:1px solid var(--line); border-radius:12px; background:var(--surface); overflow:hidden; }
.reco-method summary { display:flex; align-items:center; gap:8px; padding:14px 16px; cursor:pointer; font-weight:700; font-size:15.5px; color:var(--ink); list-style:none; }
.reco-method summary::-webkit-details-marker { display:none; }
.reco-method .rm-body { padding:0 16px 16px; }
.reco-method ol { margin:0 0 10px; padding-left:20px; color:var(--ink-2); font-size:15px; line-height:1.9; }
.reco-method .rm-body p { font-size:14px; color:var(--ink-3); line-height:1.7; }

/* 스크롤바 (데스크톱) */
.app ::-webkit-scrollbar { width:10px; height:10px; }
.app ::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:5px; border:3px solid var(--paper); }

/* ============================================================
   관리자 (admin) — 내부 도구. 기존 클래스명 유지 + 버튼 별칭
   ============================================================ */
/* 버튼 별칭: admin 전용 (btn 베이스 위에 색만 지정) */
.btn-primary { background:var(--accent); color:var(--accent-ink); }
.btn-primary:hover { background:color-mix(in srgb,var(--accent) 88%, var(--ink-2)); }
.btn-outline { background:var(--surface); border-color:var(--line-2); color:var(--ink); }
.btn-outline:hover { border-color:var(--ink); }
.btn-danger { background:var(--warn); color:#fff; }
.btn-danger:hover { background:color-mix(in srgb,var(--warn) 88%, #000); }

/* admin 본문은 main에 폭 제약 (개별 페이지가 .wrap을 쓰지 않으므로) */
.admin-page main { max-width:var(--maxw); margin:0 auto; padding:0 20px 40px; }
.admin-login { max-width:420px; margin:0 auto; padding-top:56px; text-align:center; }
.admin-login h1 { font-size:24px; margin-bottom:18px; }
.admin-login form { display:flex; gap:8px; justify-content:center; }
.admin-login input { flex:1; max-width:240px; padding:11px 14px; border:1.5px solid var(--line-2); border-radius:var(--r-md); font-family:inherit; font-size:15px; background:var(--surface); color:var(--ink); }

.admin-head { display:flex; align-items:center; justify-content:space-between; padding-top:28px; margin-bottom:6px; }
.admin-head h1 { font-size:24px; }
.admin-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:14px auto 20px; padding-bottom:0; }
.admin-tabs a { padding:10px 14px; font-size:14px; font-weight:700; color:var(--ink-2); border-bottom:2px solid transparent; margin-bottom:-1px; }
.admin-tabs a:hover { color:var(--ink); }
.admin-tabs a.active { color:var(--ink); border-bottom-color:var(--ink); }
.admin-msg { background:var(--save-soft); color:var(--save-ink); border-radius:var(--r-md); padding:10px 14px; font-size:13.5px; font-weight:700; margin-bottom:16px; }

.admin-form h2 { font-size:18px; margin-bottom:14px; }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:14px; }
.form-grid label { display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:700; color:var(--ink-2); }
.form-grid label small { font-weight:500; color:var(--ink-3); }
.form-grid input, .form-grid select, .form-grid textarea, .admin-form input, .admin-form select {
  padding:10px 12px; border:1.5px solid var(--line-2); border-radius:var(--r-sm);
  font-family:inherit; font-size:14px; background:var(--surface); color:var(--ink); font-weight:500;
}
.form-grid textarea { resize:vertical; min-height:74px; line-height:1.5; }
.form-grid .span2 { grid-column:1 / -1; }
.form-checks { display:flex; gap:18px; flex-wrap:wrap; margin-bottom:16px; font-size:14px; }
.form-checks label { display:inline-flex; align-items:center; gap:7px; cursor:pointer; }
.form-actions { display:flex; gap:8px; }

.admin-table-scroll { overflow-x:auto; }
.admin-table { width:100%; border-collapse:collapse; font-size:13.5px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.admin-table th, .admin-table td { padding:11px 12px; text-align:left; border-top:1px solid var(--line); vertical-align:middle; }
.admin-table thead th { background:var(--tint); font-size:12px; font-weight:800; color:var(--ink-2); border-top:0; white-space:nowrap; }
.admin-table tbody tr.row-off { opacity:.5; }
.admin-table .cell-actions { display:flex; gap:6px; align-items:center; white-space:nowrap; }
.inline-form { display:inline; margin:0; }
.toggle-btn { border:1px solid var(--line-2); border-radius:var(--r-pill); padding:4px 12px; font-size:12px; font-weight:800; background:var(--surface); }
.toggle-btn.on { background:var(--save-soft); color:var(--save-ink); border-color:transparent; }
.toggle-btn.off { color:var(--ink-3); }

.funnel-table .bar-cell { width:34%; }
.funnel-table .bar { display:block; height:10px; border-radius:5px; background:var(--ink); min-width:2px; }
.admin-page section h2 { font-size:18px; margin:26px auto 12px; }
.admin-section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:26px auto 12px; }
.admin-section-head h2 { margin:0; }
.outlink-warn { display:inline-flex; align-items:center; gap:6px; background:var(--warn-soft); color:var(--warn); font-size:12px; font-weight:800; padding:4px 10px; border-radius:var(--r-pill); white-space:nowrap; }

/* ============================================================
   반응형 — 태블릿 구간(641~1160px). 모바일(≤640)·데스크톱(>1160)은 그대로 두고
   그 사이만 채움. min-width 가드로 모바일 규칙과 완전 분리.
   ============================================================ */
/* 1단계(≤1160px): 태블릿 적응 시작 — 좌우 여백 복원.
   .wrap.section 조합에서 .section의 padding 쇼트핸드(상하 clamp, 좌우 0)가
   .wrap의 좌우 20px를 덮어써 641~1120px 구간에서 콘텐츠가 화면 모서리에
   붙던 문제를 이 계층이 바로잡는다. 데스크톱(>1160)은 maxw 중앙정렬 마진이
   여백을 만들어 주므로 기존 그대로, 모바일(≤640)은 아래 블록의 18px 유지. */
@media (min-width:641px) and (max-width:1160px) {
  .wrap { padding-left:24px; padding-right:24px; }
  /* 좌우 nav가 레일 밖으로 나가면 잘리므로 안쪽으로 당긴다 */
  .hb-prev { left:6px; }
  .hb-next { right:6px; }
}

/* 2단계(≤900px, 세로형 태블릿 768/810/834 등): 지금은 전용 규칙이 없다.
   티어 그리드는 전 구간 2열 고정이고, 배너 높이 오버라이드(216px)는 .hb-slide가
   비율(4:1)로 바뀌면서 필요 없어졌다(900px 폭에서 자동으로 213px). */

/* ============================================================
   반응형 — 원본의 .viewport.mobile 규칙을 실제 미디어쿼리로 변환
   ============================================================ */
@media (max-width:640px) {
  /* 좌우 여백만 지정한다. padding 쇼트핸드로 쓰면 .section의 상하 여백(같은 요소에 함께 걸림)까지
     0으로 덮어써서 모바일에서만 섹션이 서로 붙어 버린다 — 위 태블릿 블록이 longhand를 쓰는 이유와 같다. */
  .wrap { padding-left:18px; padding-right:18px; }
  .display { font-size:clamp(33.5px,9vw,41.5px); }
  .hdr-in { gap:6px; }
  .brand { gap:5px; }
  .lt { font-size:16.5px; }
  .logo-img { height:20px; }
  .gnb { gap:0; min-width:0; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
  .gnb::-webkit-scrollbar { display:none; }
  .gnb a { padding:10px 4px; font-size:14.5px; }
  /* 히어로 배너: 슬라이드가 화면 폭을 꽉 채운다(좌우 대칭). 넘김 힌트는 도트가 담당. */
  .hero-ask { padding:26px 20px 24px; }
  .hero-ask-chips .chip { flex:1 1 calc(50% - 4px); justify-content:flex-start; min-height:44px; }
  .hb-track { gap:10px; }
  /* 모바일 권장 규격(1080×810)의 비율 4:3 — 390px 기기에서 노출 높이 265px.
     <picture>가 640px에서 모바일 이미지로 갈아타는 지점과 이 비율 전환점이 같다.
     PC(16:5)와 비율이 크게 달라 이 경계에서 배너 높이가 뛰는 건 의도된 것이다
     — 가로로 긴 PC 소재와 세로로 넉넉한 모바일 소재를 따로 쓰기 때문. */
  .hb-slide { aspect-ratio:4 / 3; }
  .hb-nav { display:none; } /* 모바일은 스와이프 우선 */
  /* 점은 8px 그대로, 손가락 히트영역만 44×32로 — 세로는 배너 높이를 아끼려고 줄였다(최소 24px 상회) */
  .hb-dot { width:44px; height:32px; border-width:12px 18px; }
  .hb-dot[aria-current="true"] { width:56px; }
  /* 용도 카드 가로 스와이프는 이제 기본 규칙(.use-row)이 전 구간에서 담당 — 모바일 전용 오버라이드 제거 */
  /* 티어 카드: 모바일 2열 격자를 정사각형 타일로. 지금도 폭 170 × 높이 191(390px 기기)로
     거의 정사각형이었는데, 라벨이 2줄이냐 1줄이냐에 따라 세로만 들쭉날쭉했다.
     여백을 21px 덜어내(패딩 20→16, 자간 gap 제거, 글씨 한 단계 축소) 폭과 높이를 맞춘다.
     아이콘 위 / 글자 아래 배치는 .ic의 margin-bottom:auto가 그대로 유지한다.
     내용이 정사각형보다 커지는 소형 기기(≤360px)에서는 격자가 필요한 만큼만 세로로
     늘어난다 — 글자가 잘리는 것보다 낫고, 같은 행의 두 카드는 어차피 높이가 같다. */
  .tier-card { aspect-ratio:1; padding:16px; gap:0; }
  .tier-card .lb { font-size:16px; margin-top:12px; }
  .tier-card .rg, .tier-card .mt { font-size:13.5px; }
  .tier-card .mt { margin-top:4px; }
  .tier-card .arrow { top:16px; right:16px; }
  .faq-grid { grid-template-columns:1fr; }
  /* 가이드 주제 탭: 제목이 길어 줄바꿈하면 5줄이 된다 — 한 줄 가로 슬라이드로(.quick-chips 관례) */
  .gt-row { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; }
  .gt-row::-webkit-scrollbar { display:none; }
  .gt-tab { flex:none; min-height:44px; }
  .gt-p { padding:18px; }
  .plan-grid.cols-2 { grid-template-columns:1fr; }
  .breakdown { grid-template-columns:1fr; }
  .cmp-table tbody th, .cmp-table thead td:first-child { width:88px; font-size:13px; }
  .cmp-table th, .cmp-table td { padding:10px 8px; font-size:14px; }
  .cmp-table { min-width:0; }
  .cmp-table thead th, .cmp-table tbody td { min-width:118px; }
  .tray-item .x, .cmp-table thead .col .x { padding:8px; margin:-8px; }
  .seg button, .seg a { padding:10px 14px; }
  .pcard-actions .btn { min-height:44px; }
  .score-pick span { min-height:44px; }
  .bd-now .amt { font-size:41.5px; }
  .form-grid { grid-template-columns:1fr; }
  .form-grid input, .form-grid select, .admin-login input { min-height:44px; }
  .seg, .selct, .checkpill { min-height:42px; }
  /* 고객리뷰 캐러셀: 카드 폭 축소(다음 카드 살짝 보이게) + 버튼 대신 스와이프 */
  .rv-card { width:256px; }
  .rv-nav { display:none; }
  /* 목록 필터 A: 빠른칩·툴바 1행을 한 줄 가로 슬라이드로(.gnb/.use-row 관례).
     상세필터(.more-filters)는 슬라이드 행 밖(아래 자체 줄)이라 끌려들어가지 않는다 */
  .quick-chips { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; }
  .quick-chips::-webkit-scrollbar { display:none; }
  .quick-chips .chip { flex:none; }
  .toolbar-row { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; }
  .toolbar-row::-webkit-scrollbar { display:none; }
  .toolbar-row > * { flex:none; }
  .toolbar-row > .linkish { margin-left:0; } /* 슬라이드 행에선 자연 순서 유지 */
  /* 목록 필터 B: 상세필터 바텀시트(모요식) — details[open]만으로 열리고(무JS),
     백드롭은 summary::before(=summary 히트영역)라 JS 없이도 탭하면 닫힌다 */
  .more-filters[open] > summary::before { content:""; position:fixed; inset:0; z-index:58; background:rgba(3,7,18,.5); }
  .more-filters[open] > .more-panel {
    position:fixed; left:0; right:0; bottom:0; z-index:60; margin-top:0;
    background:var(--surface); border:0; border-radius:var(--r-xl) var(--r-xl) 0 0;
    box-shadow:0 -18px 44px -18px rgba(3,7,18,.45);
    max-height:70vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
    flex-direction:column; flex-wrap:nowrap; align-items:stretch;
    padding:12px 18px 16px;
    padding:12px 18px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .more-filters[open] > .more-panel .selct { width:100%; }
  .more-panel .sheet-head { display:grid; grid-template-columns:1fr auto; align-items:center; row-gap:12px; padding-bottom:2px; }
  .sheet-grab { grid-column:1 / -1; justify-self:center; width:44px; height:4px; border-radius:2px; background:var(--line-2); }
  .sheet-title { font-size:17px; font-weight:800; letter-spacing:-0.01em; }
  .sheet-close { background:transparent; border:0; color:var(--ink-2); padding:8px; margin:-8px; cursor:pointer; }
  .sheet-close .icn { width:18px; height:18px; }
  .more-panel .sheet-apply { display:flex; width:100%; margin-top:4px; min-height:46px; }
}