/* =========================================================================
   부가서비스 — addition/list.php
   머리(흰: 제목·검색·상황 키워드 / 통신망 밑줄 탭) → 목록(연회색 밴드: 툴바 · 분류 패널).
   컨트롤은 유형마다 하나 — 통신망 = 밑줄 탭, 무료만 = 스위치, 키워드 = 알약 링크.
   해상도 단계는 요금제 찾기(plan.css 카드)와 같은 사다리 — 기본 = 플립, 361·680·1024에서 키움.
     요금 18·20·22·24 / 서비스명 15·16·17·18 / 분류명 17·18·20·21 / 설명 14·15·15·16
     인기 태그 12·12·12·13 / 키워드 13·13·14·14 / 상세 시트 본문 15·16·16·16
     카드 좌우 여백 16·18·22·30 / 분류 사이 24·28·32·36
   본문 글자는 어느 구간에서도 14px 미만으로 내리지 않음(설명·태그는 시니어·야외에서도 읽혀야 함).
   굵기: 분류명 800 / 요금 700 / 서비스명 600 / 설명 400 — 분류명과 서비스명을 굵기로도 갈라 묶음 구분이 바로 보이게.
   분류명은 연회색 바탕 위, 서비스는 흰 카드 안 구분선 행. 요금은 고정 폭 우측 정렬 열.
   페이지 전용 클래스는 .addsvc-page 스코프 + addsvc- 프리픽스.
   ========================================================================= */

.addsvc-page { background: var(--color-white); }
.addsvc-page a:focus-visible,
.addsvc-page button:focus-visible { outline: 2px solid var(--color-main); outline-offset: 2px; }

/* ── 머리 ─────────────────────────────────────────── */
/* 대제목·상단 여백은 요금제 찾기(plan.css .hero-section/.v2-hero-title)와 같은 단계 — PC 30 / 폴드 22 / 모바일·플립 20px */
.addsvc-hero { padding-top: 1.375rem; background: var(--color-white); }
/* 제목·검색·탭을 한 그리드에 — 모바일은 위에서 아래로 쌓고, 폴드·PC는 영역만 재배치 */
.addsvc-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "find" "carrier"; row-gap: 1rem; }   /* minmax(0) — 한 줄 키워드가 칸을 화면 밖으로 늘리지 않게 */
.addsvc-hero .v2-hero-title { grid-area: title; margin-bottom: 0; }   /* 간격은 그리드 gap이 관리 */
.addsvc-find { grid-area: find; min-width: 0; }
.addsvc-carrier { grid-area: carrier; margin-top: 0.25rem; }
@media (max-width: 679px) {
    .addsvc-hero .v2-hero-title { font-size: 1.25rem; }
}
@media (min-width: 680px) and (max-width: 1023px) {
    .addsvc-hero .v2-hero-title { font-size: 1.375rem; }
}

/* 검색 — 48px 상자. 입력 그림자·포커스 링 없이 테두리 색으로 상태(4.8) */
.addsvc-search { display: flex; align-items: center; gap: 0.5rem; height: 3rem; padding: 0 0.375rem 0 1rem; border: 1px solid var(--border-dark); border-radius: var(--radius-md); background: var(--color-white); transition: border-color 0.15s; }
.addsvc-search:focus-within { border-color: var(--color-main); }
.addsvc-search-input { flex: 1; min-width: 0; padding: 0; border: none; background: transparent; font-family: inherit; font-size: 1rem; font-weight: 500; color: var(--text-main); outline: none; }   /* 16px — iOS 자동확대 방지 */
.addsvc-search-input::placeholder { color: var(--text-tertiary); }
.addsvc-search-input::-webkit-search-cancel-button { display: none; }
.addsvc-search-clear { 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; }
.addsvc-search.has-text .addsvc-search-clear { display: inline-flex; }
.addsvc-search-clear .v2-icon { width: 0.8125rem; height: 0.8125rem; }
.addsvc-search-ic { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); cursor: pointer; transition: background 0.15s; }
.addsvc-search-ic .v2-icon { width: 1.125rem; height: 1.125rem; }
.addsvc-search-ic:hover { background: var(--gray-100); }

/* 상황 키워드 — 연회색 알약(탭·스위치와 다른 모양) */
/* 한 줄 고정 — 넘치면 가로 스크롤(두 줄로 꺾여 검색 묶음 높이가 들쭉날쭉해지지 않게) */
.addsvc-keywords { display: flex; align-items: center; gap: 0.375rem; margin-top: 0.625rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.addsvc-keywords::-webkit-scrollbar { display: none; }
.addsvc-keywords-label { flex-shrink: 0; margin-right: 0.125rem; font-size: 0.8125rem; font-weight: 600; color: var(--text-tertiary); }
.addsvc-kw { flex-shrink: 0; white-space: nowrap; display: inline-flex; align-items: center; min-height: 2rem; padding: 0 0.75rem; border: 0; border-radius: var(--radius-pill); background: var(--gray-100); font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); cursor: pointer; transition: background 0.15s, color 0.15s; }
.addsvc-kw:hover { background: var(--blue-soft); color: var(--color-main-hover); }

/* 통신망 — 전폭 밑줄 탭(페이지 범위). 선택은 진한 밑줄 + 굵게 */
.addsvc-carrier { display: flex; border-bottom: 1px solid var(--slate-150); }
.addsvc-carrier-tab { flex: 1; height: 3rem; margin-bottom: -1px; padding: 0; border: 0; border-bottom: 2px solid transparent; background: none; font-family: inherit; font-size: 1rem; font-weight: 600; color: var(--text-tertiary); cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.addsvc-carrier-tab:hover { color: var(--text-primary); }
.addsvc-carrier-tab.active { border-bottom-color: var(--text-main); font-weight: 800; color: var(--text-main); }

/* ── 목록 밴드 ────────────────────────────────────── */
.addsvc-body { padding: 1rem 0 2.5rem; background: var(--gray-100); }
.addsvc-results { scroll-margin-top: calc(var(--header-h) + 1rem); }   /* 검색 → 결과 이동 시 고정 헤더에 가리지 않게 */

/* 툴바 — 결과 수 + 무료만 보기 스위치 */
.addsvc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.875rem; }
.addsvc-count { font-size: 0.875rem; font-weight: 700; color: var(--text-primary); }
.addsvc-count b { font-weight: 800; color: var(--color-main); }
.addsvc-count-sub { font-weight: 500; color: var(--text-tertiary); }
.addsvc-switch { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0; border: 0; background: none; font-family: inherit; font-size: 0.875rem; font-weight: 700; color: var(--text-primary); cursor: pointer; }
.addsvc-switch-track { position: relative; width: 2.5rem; height: 1.5rem; border-radius: var(--radius-pill); background: var(--slate-300); transition: background 0.2s; }
.addsvc-switch-track::after { content: ""; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--color-white); transition: transform 0.2s; }
.addsvc-switch[aria-checked="true"] .addsvc-switch-track { background: var(--color-main); }
.addsvc-switch[aria-checked="true"] .addsvc-switch-track::after { transform: translateX(1rem); }

/* 분류 — 제목은 연회색 바탕 위, 서비스 목록만 흰 카드(clean-card 그림자) */
.addsvc-group { margin-bottom: 1.5rem; }
.addsvc-group[hidden] { display: none; }
.addsvc-group-head { padding: 0 0.25rem 0.625rem; }
.addsvc-group-title { font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.35; color: var(--text-main); }

/* 행 — 줄마다 -1px로 끌어올려 첫 행 윗선은 카드 밖으로 밀려 잘림(필터로 행이 숨어도 선 중복 없음) */
.addsvc-rows { --rows-pad: 1rem; overflow: hidden; padding: 0 var(--rows-pad); border-radius: var(--radius-xl); background: var(--color-white); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); }
.addsvc-item { margin-top: -1px; border-top: 1px solid var(--gray-200); }
.addsvc-item[hidden] { display: none; }

/* 서비스 행 = 버튼(누르면 상세). 이름·설명 / 고정 폭 요금 열 / ›
   열 위치는 전부 명시 — 행만 지정한 요소(요금·›)가 자동 배치에서 먼저 앞 열을 차지하는 것 방지 */
/* 가독성 — 이름·설명 사이 6px, 자간은 본문 기준(-0.01em, 촘촘한 -0.02em은 작은 글자에서 뭉개짐).
   요금·›는 이름 줄에 맞춤 — 설명이 2줄이 돼도 '이름 → 요금' 시선이 한 줄로 이어지게 */
/* 행은 카드 좌우 여백(--rows-pad)까지 넓혀 — 터치·호버 배경이 카드 끝까지 깔려 이름→요금이 한 줄로 읽힘 */
.addsvc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 1rem; column-gap: 1rem; align-items: start; width: calc(100% + var(--rows-pad) * 2); min-height: 3.5rem; margin: 0 calc(var(--rows-pad) * -1); padding: 0.875rem var(--rows-pad); border: 0; background: none; text-align: left; cursor: pointer; transition: background 0.14s; }
.addsvc-row:active { background: var(--gray-15); }   /* 터치 피드백 */
.addsvc-row:hover .addsvc-name { color: var(--color-main-hover); }
@media (hover: hover) {
    .addsvc-row:hover { background: var(--gray-15); }
}
.addsvc-page .addsvc-row:focus-visible { outline-offset: -2px; }   /* 패널 overflow에 잘리지 않게 안쪽으로 */
.addsvc-title { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 0.375rem; min-width: 0; }
.addsvc-name { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.5; color: var(--text-main); word-break: keep-all; transition: color 0.14s; }
.addsvc-tag { flex-shrink: 0; padding: 0.0625rem 0.375rem; border-radius: var(--radius-xs); background: var(--label-orange-bg); font-size: 0.75rem; font-weight: 700; color: var(--label-orange-text); }
/* 설명 — 2줄까지 끝까지 읽히게(1줄 말줄임은 문장이 끊겨 뜻을 못 읽음). 색은 흰 바탕 대비 5.7:1 보조색.
   요금은 이름 줄에만 있으니 설명은 줄 전체 폭 — 좁은 칸에 갇혀 짧게 꺾이지 않게 */
.addsvc-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; grid-column: 1 / -1; grid-row: 2; margin-top: 0.375rem; overflow: hidden; font-size: 0.875rem; letter-spacing: -0.005em; line-height: 1.6; color: var(--text-secondary); word-break: keep-all; }
.addsvc-row-arrow { grid-column: 3; grid-row: 1; align-self: center; width: 1rem; height: 1rem; color: var(--slate-400); }

/* 요금 = 행에서 가장 큰 글자. 숫자만 키우고 단위·원은 작게 둬 금액이 먼저 읽히게 */
.addsvc-price { grid-column: 2; grid-row: 1; align-self: center; min-width: 4.75rem; line-height: 1.2; white-space: nowrap; text-align: right; }   /* 이름 줄 가운데. 최소 폭으로 열을 맞추되 긴 요금은 늘어남(우측 끝은 항상 정렬) */
.addsvc-unit { margin-right: 0.25rem; font-size: 1rem; font-weight: 500; color: var(--color-main); }
.addsvc-num { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.03em; color: var(--color-main); font-variant-numeric: tabular-nums; }
.addsvc-won { margin-left: 0.0625rem; font-size: 1rem; font-weight: 700; color: var(--color-main); }
.addsvc-free { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.03em; color: var(--color-main); }

/* ── 결과 없음 — 흰 패널 1장. 제목 한 줄 → 다른 통신망 수 → 인기 서비스. 설명 문구는 두지 않음.
   폴드·PC는 좌(제목·통신망) / 우(인기)로 나눠 세로 길이를 줄임 ── */
.addsvc-empty { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 1.25rem 1rem 1rem; border-radius: var(--radius-xl); background: var(--color-white); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); }
.addsvc-empty[hidden],
.addsvc-empty-block[hidden] { display: none; }
.addsvc-empty-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 1rem; }
.addsvc-empty-title { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.4; color: var(--text-main); word-break: keep-all; }
.addsvc-empty-reset { min-height: 2.75rem; padding: 0; border: 0; background: none; font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.addsvc-empty-reset:hover { color: var(--color-main); }
.addsvc-empty-label { margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 700; color: var(--text-tertiary); }
/* 다른 통신망 — 한 줄 타일, 결과 수만 크게(숫자 권력화) */
.addsvc-empty-carriers { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.5rem; }
.addsvc-empty-carrier { display: flex; align-items: center; gap: 0.5rem; min-height: 3.5rem; padding: 0.5rem 0.75rem 0.5rem 1rem; border: 0; border-radius: var(--radius-md); background: var(--gray-100); text-align: left; cursor: pointer; transition: background 0.15s; }
.addsvc-empty-carrier:hover { background: var(--blue-soft); }
.addsvc-empty-carrier-name { flex: 1; font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); }
.addsvc-empty-carrier-count { font-size: 0.9375rem; font-weight: 600; color: var(--text-main); }
.addsvc-empty-carrier-count b { margin-right: 0.0625rem; font-size: 1.375rem; font-weight: 700; letter-spacing: -0.03em; color: var(--color-main); font-variant-numeric: tabular-nums; }
.addsvc-empty-carrier .v2-icon { width: 1rem; height: 1rem; color: var(--text-tertiary); }
/* 인기 서비스 — 목록 행과 같은 결(이름 왼쪽 · 요금 오른쪽 · 구분선) */
.addsvc-empty-popular li + li { border-top: 1px solid var(--gray-200); }
.addsvc-empty-pick { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 3.25rem; padding: 0.5rem 0; border: 0; background: none; text-align: left; cursor: pointer; }
.addsvc-empty-pick-name { font-size: 0.9375rem; font-weight: 600; color: var(--text-main); word-break: keep-all; transition: color 0.14s; }
.addsvc-empty-pick:hover .addsvc-empty-pick-name { color: var(--color-main); }
.addsvc-empty-pick .addsvc-price { min-width: 0; }

/* ── 상세 시트 — 공통 .modal 셸. 메타 → 요금 → 설명 → 신청 ── */
.addsvc-sheet { --modal-max: 480px; }
.addsvc-sheet .modal-head { margin-bottom: 0.5rem; }   /* 메타를 제목 바로 아래 붙임 — 음수 margin은 스크롤 영역에 잘려서 머리 여백을 줄임 */
.addsvc-sheet-meta { font-size: 0.875rem; font-weight: 500; color: var(--text-muted); }
.addsvc-sheet-price { margin-top: 1.125rem; padding: 1rem 1.125rem; border-radius: var(--radius-md); background: var(--gray-15); }
.addsvc-sheet-price .addsvc-unit { margin-right: 0.25rem; }
.addsvc-sheet-price .addsvc-num { font-size: 1.625rem; }
.addsvc-sheet-price .addsvc-unit,
.addsvc-sheet-price .addsvc-won,
.addsvc-sheet-price .addsvc-free { font-size: 1.125rem; }
.addsvc-sheet-price-title { margin-bottom: 0.25rem; font-size: 0.875rem; font-weight: 700; color: var(--text-primary); }
.addsvc-sheet-vat { margin-left: 0.25rem; font-weight: 500; color: var(--text-tertiary); }
.addsvc-sheet-vat[hidden] { display: none; }
.addsvc-sheet-desc { margin-top: 1rem; font-size: 1rem; font-weight: 400; line-height: 1.7; color: var(--text-primary); word-break: keep-all; }
/* 상세 안내 — 항목마다 소제목 + 본문. 원문 HTML(목록·소제목·강조)을 이 범위 안에서만 꾸민다 */
.addsvc-sheet-detail { margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.7; color: var(--text-primary); word-break: keep-all; overflow-wrap: anywhere; }   /* anywhere: 긴 URL이 시트 밖으로 넘치지 않게 */
.addsvc-detail-sec { padding: 1.25rem 0; border-top: 1px solid var(--gray-200); }
.addsvc-detail-sec:first-child { border-top: 0; }
.addsvc-detail-title { margin-bottom: 0.5rem; font-size: 1rem; font-weight: 700; color: var(--text-main); }
.addsvc-detail-sub { margin-top: 0.75rem; font-weight: 700; color: var(--text-main); }
.addsvc-detail-sub:first-child { margin-top: 0; }
.addsvc-detail-em { color: var(--color-main); }
.addsvc-sheet-detail ul { list-style: none; margin: 0; padding: 0; }
.addsvc-sheet-detail li { position: relative; padding-left: 0.75rem; }
.addsvc-sheet-detail li + li { margin-top: 0.375rem; }
.addsvc-sheet-detail li::before { content: ''; position: absolute; left: 0; top: 0.75em; width: 0.25rem; height: 0.25rem; border-radius: 50%; background: var(--text-tertiary); }
.addsvc-sheet-detail li ul { margin-top: 0.375rem; }
.addsvc-sheet-detail li li { padding-left: 0; color: var(--text-secondary); }   /* 등록 ①②③처럼 번호가 붙은 하위 단계 — 점 없이 */
.addsvc-sheet-detail li li::before { content: none; }
.addsvc-sheet-detail .addsvc-dash > li { padding-left: 0.75rem; color: var(--text-secondary); }
.addsvc-sheet-detail .addsvc-dash > li::before { content: '-'; top: 0; width: auto; height: auto; border-radius: 0; background: none; color: var(--text-tertiary); }
.addsvc-sheet-detail a { color: var(--color-main); text-decoration: underline; text-underline-offset: 0.15em; }
.addsvc-sheet-detail strong { font-weight: 700; color: var(--text-main); }
.addsvc-sheet-detail .addsvc-steps > li { padding-left: 0; }   /* 본문에 '1.' '2.'가 이미 있는 단계 목록 — 점 없이 */
.addsvc-sheet-detail .addsvc-steps > li::before { content: none; }
.addsvc-sheet-detail .addsvc-detail-btn { display: inline-flex; align-items: center; min-height: 2.75rem; margin: 0.5rem 0 0.25rem; padding: 0 1rem; border: 1px solid var(--border-dark); border-radius: var(--radius-md); background: var(--color-white); font-size: 0.875rem; font-weight: 700; color: var(--text-primary); text-decoration: none; }   /* 원문의 '앱 다운로드'·'바로가기' 버튼 — 본문 링크보다 눈에 띄게, 터치 44px */
.addsvc-sheet-detail .addsvc-detail-btn:hover { border-color: var(--color-main); color: var(--color-main); }
/* 고객센터 번호 — 누르면 전화. 버튼처럼 보이지 않게 문장 속 텍스트 링크(굵은 블루 + 점선 밑줄) */
.addsvc-sheet-detail .addsvc-tel { font-weight: 700; color: var(--color-main); text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 0.25em; white-space: nowrap; }
.addsvc-sheet-detail .addsvc-tel:hover { color: var(--color-main-hover); text-decoration-style: solid; }
.addsvc-detail-old { margin-right: 0.25rem; color: var(--text-tertiary); }   /* 프로모션 전 정가(취소선) */
/* 로밍 요금 표 — 4열이라 플립에선 가로 스크롤 */
.addsvc-table { margin-bottom: 0.75rem; overflow-x: auto; }
.addsvc-table table { width: 100%; min-width: 26rem; border-collapse: collapse; font-size: 0.8125rem; line-height: 1.5; word-break: keep-all; }
.addsvc-table th,
.addsvc-table td { padding: 0.5rem; border: 1px solid var(--gray-200); text-align: center; vertical-align: middle; overflow-wrap: normal; }   /* 시트의 anywhere를 끊어 '무제한'이 쪼개지지 않게 — 넘치면 표가 가로 스크롤 */
.addsvc-table th { background: var(--gray-100); font-weight: 700; color: var(--text-main); white-space: nowrap; }
.addsvc-apply { padding-top: 1rem; border-top: 1px solid var(--gray-200); }

/* ── 반응형 (모바일 퍼스트) ───────────────────────── */
@media (max-width: 679px) {   /* 플립·모바일 — 목록 행은 이름 → 설명 → 요금 세로 쌓기 */
    /* 좁은 폭에서 이름 옆에 요금을 두면 긴 이름("로밍 기간형 30일 (3GB+)")과 요금이 붙고 설명도 좁게 꺾임 →
       정보마다 자기 줄. 요금은 맨 아래 왼쪽(읽는 순서 끝), ›는 오른쪽 세로 가운데 */
    .addsvc-item .addsvc-row { grid-template-columns: minmax(0, 1fr) 1rem; }
    .addsvc-item .addsvc-desc { grid-column: 1; }
    .addsvc-item .addsvc-price { grid-column: 1; grid-row: 3; min-width: 0; margin-top: 0.625rem; text-align: left; }
    .addsvc-item .addsvc-row-arrow { grid-column: 2; grid-row: 1 / span 3; }
}
@media (max-width: 360px) {   /* 플립 — › 숨겨 글자 폭 확보 */
    .addsvc-item .addsvc-row { grid-template-columns: minmax(0, 1fr); }
    .addsvc-row { grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.5rem; }
    .addsvc-row-arrow { display: none; }
}
@media (min-width: 361px) {   /* 모바일 */
    .addsvc-body { padding-bottom: 3rem; }
    .addsvc-group { margin-bottom: 1.75rem; }
    .addsvc-group-title { font-size: 1.125rem; }
    .addsvc-rows { --rows-pad: 1.125rem; }
    .addsvc-row { padding-top: 1.125rem; padding-bottom: 1.125rem; }
    .addsvc-name { font-size: 1rem; }
    .addsvc-desc { font-size: 0.9375rem; }
    .addsvc-price { min-width: 5.5rem; }
    .addsvc-empty { padding: 1.5rem 1.125rem 1.125rem; }
    .addsvc-empty-pick-name { font-size: 1rem; }
    /* 바텀시트 — 화면 폭 전체를 쓰니 본문도 16px, 항목 사이 숨 쉴 간격 */
    .addsvc-sheet-detail { font-size: 1rem; }
    .addsvc-sheet-detail li + li { margin-top: 0.5rem; }
    .addsvc-table table { font-size: 0.875rem; }
    .addsvc-unit { font-size: 1.0625rem; }
    .addsvc-num,
    .addsvc-free { font-size: 1.25rem; }
    .addsvc-won { font-size: 1.0625rem; }
}
@media (min-width: 680px) {   /* 폴드 */
    .addsvc-hero { padding-top: 1.625rem; }
    .addsvc-body { padding: 1.25rem 0 3.5rem; }
    .addsvc-group { margin-bottom: 2rem; }
    .addsvc-group-head { padding-bottom: 0.75rem; }
    .addsvc-group-title { font-size: 1.25rem; }
    .addsvc-name { font-size: 1.0625rem; }
    .addsvc-rows { --rows-pad: 1.375rem; }
    .addsvc-row { padding-top: 1.25rem; padding-bottom: 1.25rem; column-gap: 1.5rem; }
    .addsvc-price { min-width: 6rem; }
    .addsvc-num,
    .addsvc-free { font-size: 1.375rem; }
    .addsvc-unit,
    .addsvc-won { font-size: 1.125rem; }
    /* 요금·›는 이름+설명 전체 높이의 가운데, 설명은 왼쪽 칸 안에서만 줄바꿈(요금과 겹치지 않게) */
    .addsvc-desc { grid-column: 1; max-width: 46em; line-height: 1.65; }   /* 한 줄 길이 제한 — 눈이 줄 끝에서 다음 줄로 잘 돌아오게 */
    .addsvc-price,
    .addsvc-row-arrow { grid-row: 1 / span 2; }
    .addsvc-keywords-label,
    .addsvc-kw { font-size: 0.875rem; }
    .addsvc-detail-title { font-size: 1.0625rem; }
    /* 결과 없음 — 좌 제목·통신망 / 우 인기. 두 열 사이 세로선 대신 간격으로 구분 */
    .addsvc-empty { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head hot" "other hot"; align-content: start; column-gap: 2.5rem; row-gap: 1rem; padding: 1.75rem 1.375rem 1.25rem; }
    .addsvc-empty-head { grid-area: head; align-self: start; }
    .addsvc-empty-other { grid-area: other; }
    .addsvc-empty-hot { grid-area: hot; }
    .addsvc-empty-title { font-size: 1.25rem; }
    /* 좌 제목+탭 / 우 검색+키워드 — 탭을 제목 아래로 올려 제목 밑 빈칸과 탭 전용 줄을 없앰.
       밑줄은 그리드 하단 선이 전폭으로 맡고, 탭 밑줄(-1px)이 그 위에 겹친다 */
    .addsvc-hero-grid { grid-template-columns: minmax(0, 1fr) 23.75rem; grid-template-areas: "title find" "carrier find"; column-gap: 1.5rem; row-gap: 0.5rem; border-bottom: 1px solid var(--slate-150); }
    .addsvc-find { padding-bottom: 1rem; }
    .addsvc-carrier { align-self: end; margin: 0 0 0 -1.25rem; border-bottom: 0; }   /* 첫 탭 글자를 제목 시작선에 맞춤 */
    .addsvc-carrier-tab { flex: 0 0 auto; padding: 0 1.25rem; }
}
@media (min-width: 1024px) {   /* PC */
    .addsvc-hero { padding-top: 2.25rem; }
    .addsvc-hero-grid { grid-template-columns: minmax(0, 1fr) 30rem; }   /* 키워드 5개가 한 줄에 다 보이는 폭 */
    .addsvc-body { padding: 1.75rem 0 4rem; }
    .addsvc-group { margin-bottom: 2.25rem; }
    .addsvc-group-head { padding-bottom: 0.875rem; }
    .addsvc-group-title { font-size: 1.3125rem; }
    .addsvc-rows { --rows-pad: 1.875rem; }
    .addsvc-row { padding-top: 1.375rem; padding-bottom: 1.375rem; column-gap: 2rem; }
    .addsvc-count,
    .addsvc-switch { font-size: 0.9375rem; }
    .addsvc-name { font-size: 1.125rem; }
    .addsvc-desc { font-size: 1rem; }
    .addsvc-tag { font-size: 0.8125rem; }
    .addsvc-price { min-width: 6.5rem; }
    .addsvc-num,
    .addsvc-free { font-size: 1.5rem; }
    .addsvc-unit,
    .addsvc-won { font-size: 1.1875rem; }
    /* 상세 창 — 긴 안내문이 좁게 꺾이지 않게 폭을 넓히고 항목 간격을 벌림 */
    .addsvc-sheet { --modal-max: 36rem; }
    .addsvc-empty { column-gap: 4rem; padding: 2.25rem 1.875rem 1.75rem; }
    .addsvc-empty-title { font-size: 1.375rem; }
    .addsvc-empty-label { font-size: 0.9375rem; }
    .addsvc-empty-pick-name { font-size: 1.0625rem; }
    .addsvc-detail-title { font-size: 1.125rem; }
}
@media (prefers-reduced-motion: reduce) {
    .addsvc-page * { transition: none !important; }   /* 움직임 최소화 설정 존중 */
}