/* =============================================================
   세일즈넷 · 디자인 토큰 + 스타일 (토스풍)
   - 2층 토큰: primitive(원시 팔레트) → semantic(의미 토큰)
   - 기준점: 흰 배경+단일 강조블루(#3182f6), 금액 무채색, 그림자 최소,
     라운드 16, 그레이 스케일, 시맨틱 상태색, 접근성 AA/터치44, reduced-motion
   - 테마는 토스 1종 확정(2층 토큰 구조는 유지 → 다크모드 추후)
   ============================================================= */

/* Pretendard — font-display:swap + 시스템 폴백(FOIT/오프라인 대비) */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

/* ---------- primitive (원시 값) ---------- */
:root{
  /* 간격 스케일(4px 기준) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px;
  /* 반경 */
  --radius-sm:11px; --radius-md:14px; --radius-lg:16px; --radius-xl:20px; --radius-pill:999px;
  /* 타이포 스케일(본문 상향 — 토스풍 큰 글자) */
  --fs-2xs:11px; /* 초소형 배지/게이지 전용(그 외엔 fs-xs 이상) */
  --fs-xs:12px; --fs-sm:13px; --fs-md:15px; --fs-base:16px;
  --fs-lg:17px; --fs-xl:19px; --fs-2xl:24px; --fs-3xl:34px;
  /* 최소 터치 타깃 */
  --touch:44px;

  /* 그레이 스케일(토스풍 회색 단계) */
  --grey-50:#f9fafb; --grey-100:#f2f4f6; --grey-200:#e5e8eb; --grey-300:#d1d6db;
  --grey-400:#b0b8c1; --grey-500:#8b95a1; --grey-600:#6b7684; --grey-700:#4e5968;
  --grey-800:#333d4b; --grey-900:#191f28;

  /* 브랜드 강조색 — 2026-07-09 리브랜딩: 토스블루 → SalesNet 오렌지(#F15202). 토큰명 --blue-* 는 호환 위해 유지(값만 오렌지). --primary·--link·--pick-tint·--info 가 여기서 파생. */
  --blue-500:#f15202; --blue-600:#e04a00; --blue-700:#c24000; --blue-50:#fdeee6;
}

/* ---------- semantic ---------- */
:root{
  --bg:#ffffff; --surface:var(--grey-50); --line:var(--grey-200);
  --text:var(--grey-900); --sub:var(--grey-700); --muted:var(--grey-600);
  --primary:var(--blue-500); --primary-ink:#ffffff;
  --primary-hover:var(--blue-600); --primary-press:var(--blue-700);
  --link:var(--blue-500); /* 텍스트 링크 기본색(=primary). press는 hover/active 에만 */
  --pick-tint:var(--blue-50);
  /* 시맨틱 상태색 — 성공/경고/위험/정보 */
  --success:#15c47e; --warning:#ff9500; --danger:#f04452; --info:var(--primary); --yellow:#f7c948;
  /* 감사 수정(07-11): 코드 곳곳에서 참조하던 미정의 토큰 정식 정의(폴백 하드코딩 발동 방지) */
  --ok:var(--success); --fg:var(--text); --surface-2:var(--grey-100); --radius-xs:8px;
  /* 상태색 위 소형 텍스트용 잉크(옅은 틴트 배경에서 AA≥4.5:1 보장) + 위험 press */
  --success-ink:#087a4e; --warning-ink:#9a5b00; --danger-ink:#c8313c; --danger-press:#d63a45; --yellow-ink:#8a6a00;
  /* accent = 알림 배지 등 신호용만(금액 강조엔 쓰지 않음) */
  --accent:#ff9500;
  /* 그림자 elevation 3단(카드→팝오버/시트→토스트/모달). 토스풍 절제하되 흰 배경서 카드가 뜨도록. */
  --shadow-sm:0 1px 2px rgba(16,24,40,.05), 0 4px 12px rgba(16,24,40,.06);
  --shadow-md:0 6px 20px rgba(16,24,40,.10), 0 2px 6px rgba(16,24,40,.05);
  --shadow-lg:0 14px 36px rgba(16,24,40,.16), 0 4px 12px rgba(16,24,40,.07);
  --shadow:var(--shadow-sm); /* 하위호환 별칭 */
  --radius:var(--radius-lg);
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Pretendard',-apple-system,system-ui,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  background:var(--bg);color:var(--text);
  font-size:var(--fs-base); line-height:1.55;-webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;      /* 감사: keep-all 전역과 조합 — 공백 없는 장문(URL 등)만 안전하게 꺾음 */
  font-feature-settings:"tnum";  /* 숫자 폭 일정(금액 정렬) */
  word-break:keep-all;           /* 한글 단어 중간 줄바꿈 방지(띄어쓰기 단위로만) */
}
/* 모션 민감 사용자 존중 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
/* 키보드 포커스 표시(WCAG 2.4.7) — 마우스 클릭엔 안 뜨고 키보드 탐색 시만 */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:8px}

/* ===== 아이콘(Lucide 라인) ===== */
.ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;vertical-align:middle}
.ic-lg{width:24px;height:24px}
.ic-tab{width:24px;height:24px}
.ic-empty{width:30px;height:30px;stroke-width:1.5}
.app{max-width:440px;margin:0 auto;min-height:100vh;
  background:var(--bg);position:relative;padding-bottom:96px;
  border-left:1px solid var(--line);border-right:1px solid var(--line);}

/* ===== 헤더 ===== (모바일 전용 — 데스크탑은 사이드바. 스크롤 시 상단 고정 + 블러) */
.hdr{display:flex;align-items:center;justify-content:space-between;padding:16px var(--space-5) 13px;
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  -webkit-backdrop-filter:saturate(1.5) blur(10px);backdrop-filter:saturate(1.5) blur(10px);
  border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:0;font-weight:800;font-size:var(--fs-xl);letter-spacing:-.02em}
.logo .mark{width:36px;height:36px;margin-right:9px;
  color:var(--primary);display:grid;place-items:center;font-size:var(--fs-lg);font-weight:900}
.logo .mark:has(img){background:transparent}   /* 새 브랜드 마크는 투명(흰 타일 제거) */
.logo .mark img{object-fit:contain}            /* 마크 전체 표시(crop 안 함) */
.logo .accent{color:var(--primary)}            /* NET = 브랜드 오렌지 */
/* 브랜드 로고 이미지(있으면) — 마크 칸을 꽉 채움. 없으면(onerror) 파란 'S' 폴백 유지. */
.mark:has(img){background:#fff}
.mark img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.search-btn{width:var(--touch);height:var(--touch);border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--sub);font-size:var(--fs-lg)}

/* ===== 페이지 컨테이너 ===== */
.page{display:none;padding:4px var(--space-5) var(--space-5);animation:fade .3s ease}
.page.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ===== 홈: 내정보 카드 ===== */
.wallet{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;margin-top:6px;box-shadow:var(--shadow)}
.wallet .row{display:flex;justify-content:space-between;align-items:flex-end}
.wallet .k{font-size:var(--fs-sm);color:var(--sub);font-weight:600}
.wallet .pt{font-size:var(--fs-3xl);font-weight:800;letter-spacing:-.03em;margin-top:2px;font-variant-numeric:tabular-nums}
.wallet .pt small{font-size:var(--fs-base);font-weight:700;color:var(--sub)}
.wallet .div{height:1px;background:var(--line);margin:14px 0}
.wallet .sub2{display:flex;gap:10px}
.wallet .sub2 .box{flex:1}
.wallet .sub2 .v{font-size:var(--fs-lg);font-weight:800;margin-top:1px}
.badge{display:inline-block;background:var(--blue-50);color:var(--primary-press);font-size:var(--fs-xs);
  font-weight:700;padding:2px 8px;border-radius:var(--radius-pill);vertical-align:middle;margin-left:7px}

/* ===== 메인 2버튼 ===== */
.cta2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-top:14px}
.cta{border:none;border-radius:var(--radius);padding:20px var(--space-4);cursor:pointer;
  text-align:left;box-shadow:var(--shadow);transition:transform .12s;min-height:var(--touch)}
.cta:active{transform:scale(.97)}
.cta .ic{font-size:24px;display:block;margin-bottom:8px}
.cta .t{display:block;font-size:var(--fs-lg);font-weight:800;letter-spacing:-.02em}
.cta .d{display:block;font-size:var(--fs-xs);margin-top:2px;font-weight:500}
/* primary CTA 위 설명은 흰색 유지(파랑 대비 확보), ghost는 보조색 */
.cta.primary .d{color:var(--primary-ink)}
.cta.ghost .d{color:var(--sub)}
.cta.primary{background:var(--primary);color:var(--primary-ink)}
.cta.ghost{background:var(--surface);color:var(--text);border:1px solid var(--line)}

/* ===== 로그인 전: 가입 유도 히어로(부동산 사장님용 — 큰 글씨·원터치) ===== */
.hero{text-align:center;padding:28px 22px 26px;margin-top:8px;
  background:linear-gradient(180deg,var(--pick-tint),var(--surface));
  border:1px solid var(--line);border-radius:var(--radius-xl)}
.hero-ic{width:64px;height:64px;border-radius:18px;background:var(--primary);
  color:var(--primary-ink);display:grid;place-items:center;margin:0 auto 18px}
.hero-ic .ic{width:34px;height:34px;stroke-width:2}
.hero-eyebrow{font-size:var(--fs-xs);font-weight:800;color:var(--primary);letter-spacing:.01em;margin-bottom:9px}
.hero-t{font-size:var(--fs-3xl);font-weight:800;letter-spacing:-.03em;line-height:1.25;color:var(--text)}
.hero-d{font-size:var(--fs-md);color:var(--sub);margin-top:12px;line-height:1.6;font-weight:600}
.hero-bonus{display:inline-flex;align-items:center;gap:6px;margin-top:18px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:9px 16px;font-size:var(--fs-sm);font-weight:700;color:var(--sub)}
.hero-bonus b{color:var(--text)}
.hero-bonus .ic{width:18px;height:18px;color:var(--success);stroke-width:2.2}
.hero-cta{margin-top:22px;font-size:var(--fs-xl);padding:18px}
.hero-login{font-size:var(--fs-sm);color:var(--sub);margin-top:16px;font-weight:600}
.hero-login a{color:var(--primary-press);font-weight:700;text-decoration:underline;cursor:pointer;
  display:inline-block;padding:6px 4px;margin:-6px 0}
.hero-tagline{margin-top:16px;font-size:var(--fs-xs);font-weight:700;color:var(--muted);letter-spacing:.09em;text-transform:uppercase}

/* ===== 로그인 후 홈: 큰 숫자 3개 + 원터치 인출/소개 ===== */
.home-intro-cta{margin-top:8px;display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:var(--fs-xl);padding:18px}
.home-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.hs-box{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:14px 8px;text-align:center;min-width:0;box-shadow:var(--shadow-sm)}
.hs-box.pri{background:var(--pick-tint);border-color:color-mix(in srgb,var(--primary) 22%,transparent)}
.hs-l{font-size:var(--fs-xs);color:var(--sub);font-weight:700}
/* 큰 숫자지만 3열(좁은 폭)에서 6자리+원까지 안 잘리게 clamp로 유연하게 */
.hs-v{font-size:clamp(var(--fs-lg),5.4vw,var(--fs-2xl));font-weight:800;letter-spacing:-.03em;margin-top:5px;
  color:var(--text);font-variant-numeric:tabular-nums;line-height:1.15;white-space:nowrap}
.hs-v small{font-size:var(--fs-xs);font-weight:700;color:var(--sub);margin-left:1px}
/* 인출 가능 숫자도 무채색(디자인 기준) — 강조는 배경 틴트로만 */
.home-withdraw{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:var(--fs-xl);padding:18px}
.home-withdraw-note{margin-top:8px}
/* 자세히 진입(내 현황·정산 내역) — 보조 링크 2종 */
.home-more-links{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.home-more-links button{display:flex;align-items:center;justify-content:center;gap:7px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:13px;font-size:var(--fs-md);font-weight:700;color:var(--sub);cursor:pointer;
  font-family:inherit;min-height:var(--touch)}
.home-more-links button:hover{background:var(--grey-100);color:var(--text)}
.home-more-links .ic{width:18px;height:18px}

/* ===== 섹션 타이틀 ===== */
.muted{color:var(--muted)}   /* 감사 수정(07-11): 단독 .muted 미정의로 보조문구가 본문색으로 렌더되던 것 */
.sec-h{display:flex;align-items:center;justify-content:space-between;margin:26px 2px 12px}
.sec-h .ti{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.02em}
.sec-h .more{font-size:var(--fs-sm);color:var(--primary-press);font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:4px;padding:8px 6px;margin:-8px -6px;
  border:none;background:none;font-family:inherit;line-height:inherit;text-align:left}  /* 히트영역 확대(시각 변화 없이) + button 리셋 */

/* ===== 참여업체: 가로 직사각형 카드, 계단식(데이터 기반) ===== */
.firms{display:flex;flex-direction:column;gap:10px}
.firm{display:flex;align-items:center;gap:13px;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--radius-md);padding:13px 14px;
  box-shadow:var(--shadow);transition:transform .12s;cursor:pointer}
.firm:active{transform:scale(.99)}
.firm .fl{width:46px;height:46px;border-radius:var(--radius-sm);flex:0 0 auto;
  display:grid;place-items:center;font-weight:900;font-size:var(--fs-xl);color:#fff;overflow:hidden}
.firm .fl img{width:100%;height:100%;object-fit:cover;display:block}
/* 로고 미등록 기본 아바타 — 카톡식 사람 아이콘(대표 07-11, 색글자 폴백 대체) */
.fl.fl-default{background:var(--grey-50,#eef0f4);color:var(--sub);display:grid;place-items:center}
.fl.fl-default .ic{width:55%;height:55%}
.firm .fc{flex:1;min-width:0}
.firm .fn{font-size:var(--fs-base);font-weight:800;letter-spacing:-.02em}
.firm .fm{font-size:var(--fs-xs);color:var(--sub);margin-top:1px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.firm .ft{font-size:var(--fs-xs);color:var(--muted);font-weight:700;white-space:nowrap}
/* 참여업체 카드 즐겨찾기 별표(⑥ 이름 옆 바로가기) — 2026-07-06 */
.firm .fn{display:flex;align-items:center;gap:6px}
.firm .fn .fn-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.firm-fav{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:var(--bg);display:grid;place-items:center;cursor:pointer;padding:0;transition:background .12s,border-color .12s;position:relative}
.firm-fav::after{content:'';position:absolute;inset:-9px}   /* 감사: 시각 26px 유지 + 히트영역 44px 확장 */
.firm-fav .ic{width:15px;height:15px;color:var(--muted)}
.firm-fav:hover{border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}
.firm-fav.on{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 7%,transparent)}
.firm-fav.on .ic{color:var(--danger);fill:var(--danger)}
/* 날짜 그룹 헤더(데이터 증가 대응 — nth-child 하드코딩 폐기) */
.firm-day{font-size:var(--fs-xs);color:var(--muted);font-weight:700;margin:14px 2px 2px;
  letter-spacing:.02em}

/* ===== 소개하기 플로우 ===== */
.step{margin-top:8px}
.step-label{font-size:var(--fs-sm);color:var(--sub);font-weight:700;margin:18px 2px 9px;letter-spacing:.01em}
.lead{font-size:var(--fs-sm);color:var(--sub);margin:2px 2px 0;font-weight:600}
.seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px}
.opt{border:1.5px solid var(--line);background:var(--bg);border-radius:var(--radius-md);
  padding:15px;text-align:center;cursor:pointer;transition:all .15s;font-weight:700;
  font-size:var(--fs-md);min-height:var(--touch);
  font-family:inherit;color:inherit;width:100%;display:block}  /* button 태그 리셋(키보드 접근) */
.opt .oi{font-size:22px;display:block;margin-bottom:5px}
.opt.sel{border-color:var(--primary);background:var(--pick-tint);color:var(--primary-press)}
/* 좁은 화면(≤400px): 4열 seg 에서 .opt 가 70px대로 줄면 '주거공간' 같은 4글자 라벨이
   좌우 패딩(15px)에 밀려 오른쪽으로 넘쳐 보임(keep-all 이라 줄바꿈도 안 됨) —
   패딩·글자 축소로 수용. 2026-07-11 대표 폰(참여업체 공간유형) 제보. */
@media (max-width:440px){   /* 400→440(감사): 412px 주 폼팩터에서 '주거공간' 스필 재발하던 밴드 커버 */
  .seg .opt{padding:13px 4px;font-size:var(--fs-sm)}
}
.chips{display:flex;flex-wrap:wrap;gap:8px}
/* 체크박스/라디오 브랜드색 통일(대표 07-11: 파랑 네이티브 → 오렌지) */
input[type="checkbox"],input[type="radio"]{accent-color:var(--primary)}
/* 칩형 체크(취급업종 등): 네이티브 박스 숨김 — 칩 배경색이 곧 선택 표시 */
.mf-checks .chip{position:relative}
.mf-checks .chip .chip-cb{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;margin:0}
.chip{border:1.5px solid var(--line);background:var(--bg);border-radius:var(--radius-pill);
  padding:10px 16px;font-size:var(--fs-sm);font-weight:700;cursor:pointer;transition:all .15s;
  min-height:var(--touch);display:inline-flex;align-items:center;justify-content:center;gap:6px}
.chip .ic{width:17px;height:17px;opacity:.85}
.chip.sel .ic{opacity:1}
.chip.sel{border-color:var(--primary);background:var(--primary);color:var(--primary-ink)}
/* 내 업체 취급 업종·커버 지역 체크칩 그룹 — 칩이 너무 촘촘히 붙던 문제 해소(가로·행 간격 확보) */
.mf-checks{display:flex;flex-wrap:wrap;gap:8px}
.region{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}

/* ===== ④ 담당 업체 지정(선택) — 지역+업종 후보 목록 ===== */
.sl-opt{font-weight:700;color:var(--primary-press);font-size:var(--fs-xs);background:var(--blue-50);
  border-radius:var(--radius-pill);padding:2px 9px;margin-left:2px;vertical-align:middle}
.step-desc{font-size:var(--fs-sm);color:var(--sub);margin:-4px 2px 12px;line-height:1.55}
.if-lead{font-size:var(--fs-sm);color:var(--sub);margin:0 2px 10px;line-height:1.5}
.if-lead b{color:var(--text)}
.intro-firm-list{display:flex;flex-direction:column;gap:9px}
.intro-firm{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);
  border-radius:var(--radius-md);padding:12px 14px;background:var(--bg);transition:border-color .15s,background .15s}
.intro-firm.sel{border-color:var(--primary);background:var(--pick-tint)}
.intro-firm .if-main{flex:1 1 auto;min-width:0}
.intro-firm .if-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.intro-firm .if-name{font-size:var(--fs-md);font-weight:800;letter-spacing:-.01em}
.intro-firm .if-meta{font-size:var(--fs-xs);color:var(--muted);font-weight:600}
/* 후보 업체 신뢰도(신뢰 배지·성사율·후기) — intro 카드/피커 공용 */
.if-trust{display:inline-block;font-size:var(--fs-xs);font-weight:800;color:var(--success);
  background:color-mix(in srgb,var(--success) 13%,transparent);border-radius:var(--radius-pill);
  padding:1px 7px;margin-left:6px;vertical-align:middle}
.if-stat{font-size:var(--fs-xs);color:var(--muted);font-weight:600;margin-left:6px}
.rq-ttl .if-trust,.rq-ttl .if-stat{margin-left:6px}
.intro-firm .if-covers{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.if-cv{font-size:var(--fs-xs);font-weight:700;color:var(--primary-press);background:var(--blue-50);
  border-radius:var(--radius-pill);padding:3px 9px}
.if-cv.taken{color:var(--muted);background:var(--grey-100);text-decoration:line-through}
.if-pick{flex:0 0 auto;border:1.5px solid var(--primary);background:var(--bg);color:var(--primary);
  border-radius:var(--radius-sm);padding:9px 14px;font-size:var(--fs-sm);font-weight:800;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;transition:all .15s;white-space:nowrap}
.if-pick .ic{width:15px;height:15px}
.if-pick.on{background:var(--primary);color:var(--primary-ink)}
.intro-firm-sum{margin-top:12px;border-top:1px dashed var(--line);padding-top:11px;
  display:flex;flex-direction:column;gap:7px}
.ifs-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ifs-item{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:700;color:var(--sub)}
.ifs-item .ic{width:15px;height:15px;color:var(--muted)}
.ifs-firm{font-size:var(--fs-sm);font-weight:700;color:var(--muted)}
.ifs-firm.on{color:var(--primary)}
.sheet-firms{background:var(--blue-50);border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:12px;
  font-size:var(--fs-sm);color:var(--primary-press);font-weight:600;line-height:1.5;display:flex;align-items:flex-start;gap:7px}
.sheet-firms .ic{width:16px;height:16px;flex:0 0 auto;margin-top:2px}
.sheet-firms b{font-weight:800}
/* 라인 진행표시: 수임요청 보낸(수락 대기) 라인 */
.rfl-firm.req,.lh-firm.req{color:var(--primary-press);font-weight:700}

/* ===== 업체 가입: 업종 검색 + 칩(다중선택) + '찾는 업종이 없어요' 요청 ===== */
.cat-search{position:relative;margin-bottom:10px}
.cat-search .cat-search-ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--muted);pointer-events:none}
.cat-search input{width:100%;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  padding:13px 14px 13px 40px;font-size:var(--fs-md);font-family:inherit;background:var(--bg);
  color:var(--text);outline:none}
.cat-search input:focus{border-color:var(--primary)}
/* 칩 그리드 — 넓게 감싸기. 목록 길면 스크롤(최대 높이 제한). */
.cat-chips{max-height:236px;overflow-y:auto;padding:2px;-webkit-overflow-scrolling:touch}
.cat-chips .chip[hidden]{display:none}
.cat-chips .chip .ic{width:16px;height:16px}
/* '찾는 업종이 없어요' 링크 */
.cat-req-link{font-size:var(--fs-sm);color:var(--primary-press);font-weight:700;
  text-decoration:underline;cursor:pointer;display:inline-block;padding:8px 4px;margin:-8px -4px}
.cat-req-link:hover{color:var(--primary)}
.cat-req-box{margin-top:10px;background:var(--surface);border:1px dashed var(--line);
  border-radius:var(--radius-md);padding:14px}
.cat-req-box input{width:100%;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  padding:13px 14px;font-size:var(--fs-md);font-family:inherit;background:var(--bg);
  color:var(--text);outline:none}
.cat-req-box input:focus{border-color:var(--primary)}
.cat-req-note{color:var(--sub);font-weight:600}
/* 검증 실패 인라인 안내 — 크게·눈에 띄게(aria-live) */
.cat-req-hint{margin-top:8px;font-size:var(--fs-md);font-weight:700;color:var(--danger-ink);
  background:color-mix(in srgb,var(--danger) 10%,transparent);border-radius:var(--radius-sm);
  padding:10px 12px;line-height:1.5}
/* '기타: OOO (확인 중)' 미리보기 칩 */
.cat-req-preview{margin-top:10px}
.cat-req-chip{cursor:default}
.cat-req-chip .ic{width:16px;height:16px}
.cat-req-pending{font-weight:700;opacity:.9;margin-left:2px}
/* 검색 결과 없음 안내 */
.cat-empty{color:var(--warning-ink);font-weight:600}

/* 정산 예정 표시 */
.estimate{margin-top:22px;background:var(--surface);border:1px dashed var(--line);
  border-radius:var(--radius-md);padding:16px 18px}
.estimate .top{display:flex;align-items:center;justify-content:space-between}
.estimate .el{font-size:var(--fs-sm);color:var(--sub);font-weight:600}
.estimate .ev{font-size:var(--fs-2xl);font-weight:800;color:var(--text);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.estimate .calc{font-size:var(--fs-xs);color:var(--sub);margin-top:8px;font-weight:600;white-space:pre-line;line-height:1.75}

/* 동의 체크(규제 자문 반영) */
.consent{display:flex;gap:9px;align-items:flex-start;margin-top:14px;font-size:var(--fs-sm);
  color:var(--sub);line-height:1.5}
.consent input{width:20px;height:20px;flex:0 0 auto;margin-top:1px;accent-color:var(--primary)}
.consent a{color:var(--primary-press);font-weight:600;text-decoration:underline}

/* ===== 동의 박스(전체 동의 + 하위 2종) — 가입 편의 ===== */
.consent-box{margin-top:18px;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden}
.consent-box .consent-all{margin:0;padding:14px 16px;background:var(--surface);
  border-bottom:1px solid var(--line);font-size:var(--fs-md);color:var(--text);align-items:center}
.consent-box .consent-all b{font-weight:800}
.consent-box .consent-sub{padding:6px 16px 14px}
.consent-box .consent-sub .consent{margin-top:10px}

/* 로그인 유지 체크(라벨 볼드) */
.keep-login{margin-top:14px;font-size:var(--fs-md);color:var(--text);align-items:center;font-weight:600}
.keep-login input{width:20px;height:20px}

/* 로그인 도움 링크(업체 토글 / 비번 찾기) */
.login-help{display:flex;justify-content:flex-end;gap:12px;margin-top:14px;flex-wrap:wrap}
.login-help a{font-size:var(--fs-sm);color:var(--sub);font-weight:600;text-decoration:underline;
  cursor:pointer;padding:6px 2px;margin:-6px 0}
.login-help a:hover{color:var(--primary-press)}

/* 역할 선택 접기(로그인 화면 — 기본 파트너) */
.role-pick.collapsed{display:none}

/* 업체 가입 보조 링크 */
.firm-signup-link{text-align:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.firm-signup-link a{font-size:var(--fs-sm);color:var(--sub);font-weight:600;text-decoration:underline;
  cursor:pointer;display:inline-block;padding:8px 6px;margin:-8px 0}
.firm-signup-link a:hover{color:var(--primary-press)}

/* ===== 가입 완료 축하 화면(파트너) ===== */
.signup-done{text-align:center;padding:36px 22px 24px}
.signup-done .sd-ic{width:72px;height:72px;border-radius:50%;margin:0 auto 18px;
  background:color-mix(in srgb,var(--success) 14%,transparent);color:var(--success);
  display:grid;place-items:center}
.signup-done .sd-ic .ic{width:40px;height:40px;stroke-width:2}
.signup-done .sd-t{font-size:var(--fs-3xl);font-weight:800;letter-spacing:-.03em}
.signup-done .sd-bonus{margin-top:10px;font-size:var(--fs-lg);color:var(--sub);font-weight:700}
.signup-done .sd-bonus b{color:var(--text);font-weight:800}
.signup-done .sd-d{font-size:var(--fs-md);color:var(--sub);margin-top:14px;line-height:1.6;font-weight:600}
.signup-done .sd-cta{margin-top:24px;display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:var(--fs-xl);padding:18px}
.signup-done .submit.ghost{margin-top:10px}

.hint{font-size:var(--fs-xs);color:var(--sub);margin-top:8px;text-align:center;font-weight:600}
.hint.err{color:var(--danger-ink);font-weight:700}  /* 로그인/가입 등 실패 안내 — 빨강+굵게(상태 구분) */
.submit{width:100%;margin-top:14px;border:none;background:var(--primary);
  color:var(--primary-ink);font-weight:800;font-size:var(--fs-lg);padding:16px;
  border-radius:var(--radius-md);cursor:pointer;box-shadow:var(--shadow);transition:transform .12s;min-height:var(--touch)}
.submit:hover:not(:disabled){background:var(--primary-hover)}
.submit:active{transform:scale(.98)}
.submit:disabled{opacity:.4;cursor:not-allowed}
/* 보조(닫기 등) — full-width 보조 버튼. 인라인 스타일 대체로 일관성 유지. */
.submit.ghost{background:var(--surface);color:var(--text);border:1px solid var(--line);box-shadow:none}
.submit.ghost:hover:not(:disabled){background:var(--grey-100)}
/* 가입 휴대폰 인증(§3) */
.verify-row{display:flex;gap:8px;align-items:center}
.verify-row .btn-ghost{flex:0 0 auto;white-space:nowrap;padding:0 14px;height:var(--touch);border-radius:var(--radius-sm)}
.verify-row #suVerifyCode{flex:1;min-width:0}
.verify-row .submit.vf-check{flex:0 0 auto;width:auto;margin-top:0;padding:0 18px;height:var(--touch)}
.verify-status{font-size:var(--fs-sm);color:var(--sub);margin-top:6px;min-height:1em}
.verify-status.ok{color:var(--success);font-weight:700}
.verify-status.err{color:var(--danger)}

/* ===== 정산확인 ===== */
.flow{display:flex;flex-direction:column;gap:0;margin-top:8px}
.fl-step{display:flex;gap:13px;padding:4px 0}
.fl-step .dot{width:26px;height:26px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;font-size:var(--fs-sm);font-weight:800;
  background:var(--surface);border:1.5px solid var(--line);color:var(--muted);position:relative}
.fl-step.done .dot{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.fl-step.cur .dot{border-color:var(--primary);color:var(--primary)}
.fl-step:not(:last-child) .dot::after{content:"";position:absolute;top:26px;left:50%;
  transform:translateX(-50%);width:2px;height:22px;background:var(--line)}
.fl-step.done:not(:last-child) .dot::after{background:var(--primary)}
.fl-step .ftx{padding-bottom:14px}
.fl-step .fname{font-size:var(--fs-md);font-weight:700}
.fl-step .fdesc{font-size:var(--fs-xs);color:var(--sub)}
.payout-note{margin-top:8px;background:var(--surface);border-radius:var(--radius-sm);padding:13px 15px;
  font-size:var(--fs-sm);color:var(--sub);border:1px solid var(--line)}
.payout-note b{color:var(--text)}

/* ===== 상태 배지(공용) ===== */
.bdg{display:inline-block;padding:3px 9px;border-radius:var(--radius-pill);
  font-size:var(--fs-xs);font-weight:700;white-space:nowrap}
.bdg.info{background:var(--blue-50);color:var(--primary-press)}
.bdg.success{background:color-mix(in srgb,var(--success) 15%,transparent);color:var(--success-ink)}
.bdg.warning{background:color-mix(in srgb,var(--warning) 18%,transparent);color:var(--warning-ink)}
.bdg.yellow{background:color-mix(in srgb,var(--yellow) 26%,transparent);color:var(--yellow-ink)}
.bdg.danger{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger-ink)}
.bdg.muted{background:var(--grey-100);color:var(--grey-600)}

/* ===== 정산: 인출 가능 카드 ===== */
.cashout{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;margin-top:8px;box-shadow:var(--shadow-sm)}
.cashout .k{font-size:var(--fs-sm);color:var(--sub);font-weight:600}
.cashout .amt{font-size:var(--fs-3xl);font-weight:800;color:var(--text);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:2px}
.cashout .note{font-size:var(--fs-xs);color:var(--sub);margin-top:4px;font-weight:600}
.cashout .submit{margin-top:14px}

/* ===== 정산: 내 소개 내역 리스트 ===== */
.ritem{display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:13px 14px;margin-bottom:8px}
.ritem .rc{flex:1;min-width:0}
.ritem .rn{font-size:var(--fs-md);font-weight:800;letter-spacing:-.02em}
.ritem .rm{font-size:var(--fs-xs);color:var(--sub);margin-top:2px}
.ritem .rr{text-align:right;flex:0 0 auto}
.ritem .ra{font-size:var(--fs-md);font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums}
/* 소개자: 개통 확인 대기 강조 + 확인 버튼 */
.ritem.need-confirm{border-color:color-mix(in srgb,var(--warning) 45%,transparent);
  background:color-mix(in srgb,var(--warning) 6%,transparent)}
.ritem .cf-btn{margin-top:10px;width:100%;max-width:220px;padding:11px 14px;min-height:var(--touch)}
/* 정산 목록 '후기 작성' 버튼(§8) */
.ritem .rv-btn{margin-top:10px;display:inline-flex;align-items:center;gap:6px;padding:9px 14px}
.ritem .rv-btn .ic{width:15px;height:15px}

/* ===== 내 소개 내역: 상태 필터 칩 + 날짜 그룹(§11) ===== */
.ref-filter{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 12px}
.rf-chip{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:7px 13px;min-height:36px;font-size:var(--fs-sm);font-weight:700;color:var(--sub);
  transition:background .15s,border-color .15s,color .15s}
.rf-chip:hover{background:var(--grey-100)}
.rf-chip.on{background:var(--pick-tint);border-color:color-mix(in srgb,var(--primary) 45%,transparent);color:var(--primary)}
.rf-chip .rf-cnt{font-size:var(--fs-xs);font-weight:800;background:var(--grey-100);color:var(--grey-600);
  border-radius:var(--radius-pill);padding:1px 7px;min-width:20px;text-align:center;font-variant-numeric:tabular-nums}
.rf-chip.on .rf-cnt{background:var(--bg);color:var(--primary)}
.ref-daygroup{margin-bottom:14px}
.ref-dayhead{display:flex;align-items:center;justify-content:space-between;
  font-size:var(--fs-xs);font-weight:800;color:var(--sub);letter-spacing:.01em;
  padding:0 3px 7px;position:sticky;top:0}
.ref-dayhead .ref-daycnt{font-weight:700;color:var(--muted)}

/* 소개 내역 통합 카드 — 소개건 헤더 + 업종(라인)별 진행 인라인('진행 중인 소개' 합침) */
.refcard{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:13px 14px;margin-bottom:8px;box-shadow:var(--shadow-sm)}
.refcard.need-confirm{border-color:color-mix(in srgb,var(--warning) 45%,transparent);
  background:color-mix(in srgb,var(--warning) 5%,var(--bg))}
.rf-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.rf-meta{font-size:var(--fs-xs);color:var(--sub);font-weight:600;min-width:0}
.rf-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.rf-amt{font-size:var(--fs-md);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.rf-lines{display:flex;flex-direction:column;gap:7px}
.rf-line{display:flex;align-items:center;flex-wrap:wrap;gap:7px;
  padding:9px 11px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm)}
.rfl-ic{width:18px;height:18px;color:var(--primary);flex:0 0 auto}
.rfl-t{font-size:var(--fs-sm);font-weight:800;letter-spacing:-.01em}
.rfl-firm{font-size:var(--fs-xs);color:var(--sub);font-weight:700;flex:1;min-width:50px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rfl-firm.wait{color:var(--warning-ink)}
.rf-line .bdg{flex:0 0 auto}
.rfl-acts{display:flex;gap:6px;flex-basis:100%;margin-top:2px}
.refcard .cf-btn{margin-top:12px;width:100%;max-width:240px;min-height:var(--touch)}
.refcard .rv-btn{margin-top:10px;display:inline-flex;align-items:center;gap:6px;padding:9px 14px}
.refcard .rv-btn .ic{width:15px;height:15px}

/* ===== 정산계좌 카드 + 인출 신청 ===== */
.acct-card{display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:13px 14px}
.acct-info{flex:1;min-width:0}
.acct-bank{font-size:var(--fs-md);font-weight:800;letter-spacing:-.02em}
.acct-no{font-weight:700;color:var(--sub);font-variant-numeric:tabular-nums;margin-left:4px}
.acct-sub{font-size:var(--fs-xs);color:var(--sub);margin-top:3px}
.acct-form{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px}
.acct-actions{display:flex;gap:8px;align-items:center;margin-top:6px}
.acct-actions .submit{margin-top:0;flex:1}
.btn-ghost{height:var(--touch);padding:0 16px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--surface);color:var(--text);font-weight:700;font-size:var(--fs-sm);cursor:pointer}
.btn-ghost:hover{background:var(--grey-100)}

/* ===== 정산방식 잠금 + 변경요청 ===== */
.req{color:var(--danger);font-weight:800}
.pa-lock-note{display:flex;align-items:flex-start;gap:8px;margin-top:12px;padding:11px 12px;
  border-radius:var(--radius-sm);background:var(--blue-50);color:var(--primary-press);
  font-size:var(--fs-xs);line-height:1.55}
.pa-lock-note .ic{width:16px;height:16px;flex:0 0 auto;margin-top:1px}
.pa-doc-name{margin-top:6px;font-size:var(--fs-xs);color:var(--sub);word-break:break-all}
/* 잠긴 계좌: 정산방식 행(현재값 + 잠김/변경요청 버튼 or 검토중 배지) */
.pa-tax-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:10px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg)}
.pa-tax-cur{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--sub)}
.pa-tax-cur b{color:var(--text);font-weight:800}
.pa-lock-ic{width:15px;height:15px;color:var(--muted)}
.pa-locked{font-size:var(--fs-xs);font-weight:700;color:var(--muted);background:var(--grey-100);
  padding:2px 8px;border-radius:var(--radius-pill)}
.pa-change-btn{height:auto;min-height:38px;padding:7px 14px}
/* 변경요청 시트: 정산방식 라디오 */
.tx-opts{display:flex;flex-direction:column;gap:8px}
.tx-opt{display:flex;align-items:flex-start;gap:10px;padding:12px 13px;border:1.5px solid var(--line);
  border-radius:var(--radius-sm);cursor:pointer;font-size:var(--fs-sm);line-height:1.5;min-height:var(--touch)}
.tx-opt:has(input:checked){border-color:var(--primary);background:var(--blue-50)}
.tx-opt input{margin-top:2px;flex:0 0 auto;width:18px;height:18px;accent-color:var(--primary)}
/* 참여업체 필터 바 */
.firm-filter{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:4px 0 14px}
.firm-filter select{flex:1;min-width:108px;height:var(--touch);padding:0 12px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-weight:600;font-size:var(--fs-sm)}
.firm-filter .ff-reset{flex:0 0 auto;height:var(--touch)}
@media (max-width:540px){.firm-filter select{min-width:0;flex:1 1 30%}}

.wd-amt-row{display:flex;gap:8px;align-items:stretch}
.wd-amt-row input{flex:1;min-width:0}
.wd-allbtn{flex:0 0 auto;padding:0 16px;border-radius:var(--radius-sm);border:1px solid var(--primary);
  background:var(--blue-50);color:var(--primary-press);font-weight:800;font-size:var(--fs-sm);cursor:pointer}
.wd-allbtn:hover{background:var(--primary);color:#fff}
.wd-preview{margin-top:4px}
.wd-row{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:9px 2px;font-size:var(--fs-sm);color:var(--sub);border-bottom:1px solid var(--grey-100)}
.wd-row b{color:var(--text);font-variant-numeric:tabular-nums}
.wd-row.total{border-bottom:none;font-size:var(--fs-md);color:var(--text);font-weight:800;padding-top:11px}
.wd-row.total b{color:var(--text)}

/* ===== 정산: 포인트 내역 ===== */
.lrow{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 2px;border-bottom:1px solid var(--grey-100)}
.lrow:last-child{border-bottom:none}
.lrow .ll{font-size:var(--fs-sm);font-weight:700}
.lrow .ld{font-size:var(--fs-xs);color:var(--muted);margin-top:1px}
.lrow .lv{font-size:var(--fs-md);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ===== 대시보드(역할별) ===== */
.dash-hello{font-size:var(--fs-md);font-weight:700;color:var(--sub);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-md);padding:14px 16px;margin-top:6px;line-height:1.5}
.dash-hello.pri{color:var(--primary-press);background:var(--pick-tint);
  border-color:color-mix(in srgb,var(--primary) 22%,transparent)}
.dash-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.dash-kpi{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md);padding:14px 15px;box-shadow:var(--shadow-sm)}
.dash-kpi .dk-l{font-size:var(--fs-xs);color:var(--sub);font-weight:600}
.dash-kpi .dk-v{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em;margin-top:3px;
  font-variant-numeric:tabular-nums;color:var(--text);display:flex;align-items:center;gap:6px}
@media (max-width:440px){ .dash-kpi .dk-v{font-size:clamp(17px,5.5vw,var(--fs-2xl))} }   /* 감사: 좁은 폰 7자리 금액 스필 방지 */
/* 금액은 무채색(디자인 기준) — 강조는 버튼/CTA에만. 보유 포인트도 본문색. */
.dash-kpi .dk-s{font-size:var(--fs-xs);color:var(--sub);font-weight:600;margin-top:2px}
.dash-kpi .dk-dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.dash-kpi .dk-dot.ok{background:var(--success)}

.dash-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:16px;margin-top:12px}
.dash-card .dc-h{font-size:var(--fs-md);font-weight:800;letter-spacing:-.01em;margin-bottom:12px;
  display:flex;align-items:center;gap:8px}
.dash-card .dc-cnt{font-size:var(--fs-xs);color:var(--muted);font-weight:700}
/* 들어온 소개건 정렬 토글(⑬ 2026-07-06) */
.offer-sort{display:inline-flex;gap:4px;margin-left:auto}
.offer-sort .os-chip{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:8px 12px;font-size:var(--fs-xs);font-weight:700;color:var(--sub);cursor:pointer;transition:background .12s,border-color .12s,color .12s}   /* 감사: 터치타깃 25→35px대 */
.offer-sort .os-chip.on{background:var(--primary);border-color:var(--primary);color:#fff}

/* 매니저 퍼널 */
.funnel-bar{display:flex;gap:3px;height:12px;border-radius:6px;overflow:hidden;margin-bottom:12px}
.fb-seg{display:block;border-radius:3px;min-width:5px}
/* 진행 퍼널 신호등(2026-07-06): 접수=회색 · 매칭=노랑 · 상담중=주황 · 개통=파랑 · 정산완료=초록 (배지 톤과 일치) */
.fb-0{background:var(--grey-400)}.fb-1{background:var(--yellow)}.fb-2{background:var(--warning)}
.fb-3{background:var(--primary)}.fb-4{background:var(--success)}
.funnel-chips{display:flex;flex-wrap:wrap;gap:7px}
.funnel-chips .fc{font-size:var(--fs-xs);color:var(--sub);font-weight:600;display:inline-flex;align-items:center;gap:5px}
.funnel-chips .fc b{color:var(--text);font-weight:800}
.funnel-chips .fc-dot{width:9px;height:9px;border-radius:3px;display:inline-block}
/* 퍼널 칩을 클릭 필터 버튼으로(④) — 기본 버튼 리셋 + 탭 느낌 */
.funnel-chips .fc-btn{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:8px 12px;cursor:pointer;transition:background .12s,border-color .12s}   /* 감사: 터치타깃 29→36px대 */
.funnel-chips .fc-btn:hover{background:var(--grey-50);border-color:var(--grey-300)}
.funnel-chips .fc-btn:active{transform:scale(.97)}
.funnel-note{font-size:var(--fs-xs);color:var(--sub);font-weight:600;margin-top:10px}

/* 다음 액션/인출 카드 */
.dash-card.next{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dash-card.next .dc-h{margin-bottom:6px}
.dash-card.next .nx-v{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dash-card.next .nx-s{font-size:var(--fs-xs);color:var(--muted);font-weight:600;margin-top:2px}
.btn-cta{border:none;background:var(--primary);color:#fff;font-weight:800;font-size:var(--fs-sm);
  padding:11px 16px;border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;flex:0 0 auto}
.btn-cta:hover{background:var(--primary-hover)}
.btn-cta.full{width:100%;margin-top:10px;padding:13px}

/* 등급 트랙 */
.grade-track{display:flex;align-items:center;gap:6px;margin:4px 0 10px}
.grade-track .gb{font-size:var(--fs-xs);font-weight:700;color:var(--muted);padding:5px 12px;
  border-radius:var(--radius-pill);background:var(--grey-100);border:1px solid transparent}
.grade-track .gb.on.success{background:color-mix(in srgb,var(--success) 15%,transparent);color:var(--success-ink)}
.grade-track .gb.on.info{background:var(--blue-50);color:var(--primary-press)}
.grade-track .gb.on.warning{background:color-mix(in srgb,var(--warning) 18%,transparent);color:var(--warning-ink)}
.grade-track .gb-sep{color:var(--grey-300);font-weight:700}
.grade-sub{font-size:var(--fs-xs);color:var(--sub);font-weight:600}
.dash-link{margin-top:12px;border:none;background:none;color:var(--primary-press);font-weight:700;
  font-size:var(--fs-sm);cursor:pointer;padding:4px 0}

/* 업체: 들어온 소개건 카드 */
.lead{border:1px solid var(--line);border-radius:var(--radius-md);padding:13px 14px;margin-bottom:10px}
.lead-grid{display:grid;grid-template-columns:1fr;gap:10px}
.lead-grid .lead{margin-bottom:0}
.lead:last-child{margin-bottom:0}
.lead-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.lead-ttl{font-size:var(--fs-md);font-weight:800;letter-spacing:-.01em}
.lead-amt{font-size:var(--fs-md);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.lead-meta{display:flex;align-items:center;gap:8px;margin-top:6px}
.lead-chip{font-size:var(--fs-xs);font-weight:700;color:var(--sub);background:var(--grey-100);
  border-radius:var(--radius-pill);padding:3px 10px}
.lead-mask{font-size:var(--fs-xs);color:var(--muted);font-weight:600}
.lead-reason{font-size:var(--fs-sm);color:var(--sub);margin-top:8px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* 업체: 성과 게이지 */
.gauge-wrap{display:flex;align-items:center;gap:20px}
.gauge{--p:0;width:104px;height:104px;border-radius:50%;flex:0 0 auto;position:relative;
  background:conic-gradient(var(--success) calc(var(--p)*3.6deg), var(--grey-200) 0)}
.gauge::before{content:"";position:absolute;inset:13px;background:var(--bg);border-radius:50%}
.gauge-c{position:absolute;inset:0;display:grid;place-items:center;font-size:var(--fs-xl);
  font-weight:800;font-variant-numeric:tabular-nums}
.gauge-legend{display:flex;gap:22px}
.gauge-legend b{display:block;font-size:var(--fs-xl);font-weight:800;font-variant-numeric:tabular-nums}
.gauge-legend span{font-size:var(--fs-xs);color:var(--sub);font-weight:600}

/* ===== 업체: 수락한 소개건(개통완료 흐름) — 오픈 오퍼와 별도 ===== */
.claimed-grid{display:grid;grid-template-columns:1fr;gap:10px;align-items:start}   /* start: 한 카드 펼쳐도 옆 카드 안 늘어남 */
.claimed{border:1px solid var(--line);border-radius:var(--radius-md);padding:13px 14px;background:var(--bg)}
.claimed .lead-meta{justify-content:flex-start;flex-wrap:wrap;margin-top:8px}
.cl-cust{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.cl-cust .cl-name{font-size:var(--fs-md);font-weight:800;letter-spacing:-.01em}
.cl-cust .cl-tel{font-size:var(--fs-sm);font-weight:700;color:var(--primary-press);text-decoration:none;display:inline-flex;align-items:center;min-height:36px;
  padding:4px 8px;border-radius:var(--radius-sm);background:var(--blue-50)}
.cl-cust .cl-tel:hover{background:color-mix(in srgb,var(--primary) 16%,transparent)}
/* 업체 수락 소개건 — 내 업종(라인) 목록 (§6 라인매칭) */
.cl-lines{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.cl-line{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:var(--fs-sm);font-weight:700}
.cl-line .bdg{font-size:var(--fs-xs)}
.cl-act{margin-top:12px}
/* 수락한 소개건 카드 — 기본 접힘/클릭 펼침(라인카드 아코디언 재사용). 패딩은 head/body-in 담당. */
.claimed.line-card{padding:0}
/* 헤더 2행 — 제목행(제목·펼침캐럿) + 태그행(수임요청·상태배지·금액). 한 줄 경쟁으로 제목이 잘리던 문제 해소.
   .line-head 기본(align-items:center·gap)이 소스상 뒤에 있어 컴파운드 셀렉터로 우선순위 확보. */
.line-head.claimed-head{flex-direction:column;align-items:stretch;gap:7px}
.claimed-head .ch-top{display:flex;align-items:center;gap:8px;min-width:0}
.claimed-head .ch-ttl{flex:1 1 auto;min-width:0;text-align:left;font-size:var(--fs-md);font-weight:800;
  letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.claimed-head .ch-top .line-caret{flex:0 0 auto}
.claimed-head .ch-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.claimed-head .ch-amt{flex:0 0 auto;margin-left:auto;font-size:var(--fs-sm);font-weight:800;color:var(--text);white-space:nowrap}
.claimed-head .bdg{flex:0 0 auto}
/* 수임요청(파트너 지목)으로 받은 수락 건 — 헤더 배지 + 카드 강조 + 본문 안내 */
.claimed.line-card.viareq{border-color:color-mix(in srgb,var(--primary) 42%,var(--line))}
.claimed-head .ch-req{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;font-size:var(--fs-xs);font-weight:800;
  color:var(--primary);background:var(--blue-50);border-radius:var(--radius-pill);padding:2px 8px;white-space:nowrap}
.claimed-head .ch-req .ic{width:12px;height:12px}
.cl-reqnote{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:var(--fs-xs);font-weight:700;
  color:var(--primary-press);background:var(--blue-50);border-radius:var(--radius-sm);padding:7px 10px}
.cl-reqnote .ic{width:15px;height:15px;flex:0 0 auto;color:var(--primary)}
.claimed .line-body-in .cl-cust{margin-top:2px}
/* 대기/완료 안내(버튼 대신) — 큰 터치 영역 대신 명확한 상태 문구 */
.cl-wait,.cl-done{display:flex;align-items:center;gap:7px;justify-content:center;min-height:var(--touch);
  border-radius:var(--radius-sm);font-size:var(--fs-sm);font-weight:700;padding:0 12px}
.cl-wait{color:var(--primary-press);background:var(--blue-50)}
.cl-wait .ic{width:18px;height:18px}
.cl-done{color:var(--success-ink);background:color-mix(in srgb,var(--success) 12%,transparent)}
.cl-done b{color:var(--success)}
@media (min-width:600px){ .claimed-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ===== ③ 업체 청구뷰(예치금 · 청구 내역) — 요약/명세 (6·7자리 원화 안전 + 토스풍) ===== */
/* 요약: 총 청구=전폭 큰숫자 + 정산완료/정산대기 2열. 홈 .home-stats(3열)는 카드패딩+6자리서 '원'이 박스 밖으로 스필해 전용 레이아웃. */
.fb-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
.fb-stats .hs-box{overflow:hidden}                    /* ★ 초과 글자('원')를 박스 경계서 clip — 스필 차단 핵심 방어 */
.fb-stats .hs-total{grid-column:1 / -1}               /* 총 청구 = 전폭(최대 금액이라 폭 무제한 → 7·8자리도 안전) */
.fb-stats .hs-total .hs-v{font-size:clamp(var(--fs-xl),7vw,var(--fs-3xl))}
/* 딜 명세(소개료/중개수수료/부담 합계) — 인라인 style 대신 클래스화 */
.fb-breakdown{display:flex;flex-direction:column;gap:5px;font-size:var(--fs-sm);margin-top:2px}
.fb-breakdown .fb-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.fb-breakdown .fb-row b{white-space:nowrap;font-variant-numeric:tabular-nums}
.fb-breakdown .fb-total{border-top:1px solid var(--line);margin-top:5px;padding-top:7px}
.fb-breakdown .fb-total b{font-size:var(--fs-md)}     /* 부담 합계 값 한 급 크게(소계와 위계) */
/* 라인칩 — 업종명(신축·말줄임) / 금액(우측 고정) / 상태배지 3분할(run-on·미정렬 해소) */
.cl-line .cll-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-line .cll-amt{flex:0 0 auto;color:var(--sub);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ===== 약관/정책 뷰어 시트 ===== */
.doc-sheet{max-width:560px}
.doc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:6px 2px 10px}
.doc-head h3{margin:0}
.doc-updated{font-size:var(--fs-xs);color:var(--muted);font-weight:600;margin-top:3px}
.doc-x{border:none;background:none;cursor:pointer;color:var(--muted);padding:4px;display:grid;
  place-items:center;border-radius:8px;flex:0 0 auto}
.doc-x:hover{background:var(--grey-100);color:var(--text)}
.doc-x .ic{width:20px;height:20px}
.doc-body{font-size:var(--fs-sm);color:var(--sub);line-height:1.7;white-space:pre-wrap;
  word-break:keep-all;max-height:58vh;overflow-y:auto;padding:14px 15px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-md)}

/* ===== 폼(가입/로그인) ===== */
.field{margin-top:14px}
.field label{display:block;font-size:var(--fs-sm);color:var(--sub);font-weight:700;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;border:1.5px solid var(--line);
  border-radius:var(--radius-sm);padding:13px 14px;font-size:var(--fs-md);font-family:inherit;
  background:var(--bg);color:var(--text);outline:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary)}
.field textarea{resize:vertical;min-height:72px}
.role-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.role-pick .opt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 12px}
.role-pick .opt .ic{width:28px;height:28px}
.auth-switch{text-align:center;font-size:var(--fs-sm);color:var(--sub);margin-top:16px}
.auth-switch a{color:var(--primary-press);font-weight:700;text-decoration:underline;cursor:pointer;
  display:inline-block;padding:6px 4px;margin:-6px -2px}

/* ===== 바텀시트(모달) ===== */
.sheet-dim{position:fixed;inset:0;background:rgba(16,24,40,.42);opacity:0;pointer-events:none;
  transition:opacity .25s;z-index:80}
.sheet-dim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%) translateY(100%);
  width:100%;max-width:440px;background:var(--bg);border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  z-index:81;transition:transform .28s cubic-bezier(.2,.8,.2,1);max-height:92vh;overflow-y:auto;overscroll-behavior:contain;
  padding:8px 20px calc(20px + env(safe-area-inset-bottom));
  pointer-events:none}  /* 닫힘 상태(특히 데스크탑 opacity:0)에서 본문 클릭 가로채기 방지 */
.sheet.on{transform:translateX(-50%) translateY(0);pointer-events:auto}
.sheet .handle{width:40px;height:4px;border-radius:2px;background:var(--grey-300);margin:8px auto 6px}
.sheet h3{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.02em;margin:8px 2px 4px}
.sheet .sub{font-size:var(--fs-sm);color:var(--sub);margin:0 2px 6px}
.sheet .sum{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.sheet-ok{text-align:center;padding:18px 10px}
/* 회원정보 수정 시트(§3) — 구분선/소제목/로그아웃 */
.sheet .ac-sep{height:1px;background:var(--line);margin:16px 0 12px}
.sheet .ac-subt{font-size:var(--fs-md);font-weight:800;margin:0 2px 8px}
.submit.ac-logout{background:var(--surface);color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 40%,var(--line));box-shadow:none}
.submit.ac-logout:hover:not(:disabled){background:color-mix(in srgb,var(--danger) 8%,transparent);border-color:var(--danger)}
.sheet-ok .ic{width:54px;height:54px;color:var(--success);margin-bottom:8px}
.sheet-ok .t{font-size:var(--fs-lg);font-weight:800}
.sheet-ok .d{font-size:var(--fs-sm);color:var(--sub);margin-top:4px}
@media (min-width:760px){
  .sheet{bottom:auto;top:50%;transform:translate(-50%,-46%) scale(.98);border-radius:var(--radius-lg);
    max-width:420px;opacity:0;transition:transform .25s ease,opacity .25s ease}   /* 감사: opacity 전환 누락(뚝 끊김) */
  .sheet.on{transform:translate(-50%,-50%);opacity:1}
  .sheet.doc-sheet{max-width:560px}   /* 감사: 약관 뷰어 의도폭 560이 420 규칙에 패배하던 것 복구 */
}

/* 로그인/가입 게이트 헤더 우측 계정 버튼 */
.acct-btn{height:var(--touch);padding:0 12px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--surface);font-size:var(--fs-sm);font-weight:700;color:var(--sub);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px}

/* ===== 알림 벨(§7) ===== */
.hdr-right{display:flex;align-items:center;gap:8px}
.bell-btn{position:relative;width:40px;height:40px;border:none;background:transparent;border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text)}
.bell-btn:hover{background:var(--grey-100)}
.bell-btn .ic{width:22px;height:22px}
.bell-badge{position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--danger);color:#fff;font-size:11px;font-weight:800;line-height:16px;text-align:center}
/* 데스크톱 사이드바 벨(탭 행) — 뱃지를 벨 아이콘 우상단에 */
.sb-bell{position:relative}
.sb-bell .bell-badge{top:5px;left:28px;right:auto}
.notif-head{display:flex;align-items:center;justify-content:space-between;margin:8px 2px 2px}
.notif-head h3{margin:0}
.notif-readall{border:none;background:transparent;color:var(--primary);font-weight:700;font-size:var(--fs-sm);cursor:pointer;padding:4px 6px}
.notif-list{display:flex;flex-direction:column;gap:6px;margin-top:8px;max-height:60vh;overflow-y:auto}
.notif-item{display:flex;gap:10px;align-items:flex-start;text-align:left;width:100%;padding:12px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface);cursor:pointer}
.notif-item:hover{background:var(--grey-100)}
.notif-item.unread{border-color:color-mix(in srgb,var(--primary) 35%,var(--line));background:color-mix(in srgb,var(--primary) 4%,transparent)}
.notif-item .ni-ic{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--grey-100);color:var(--muted)}
.notif-item .ni-ic .ic{width:18px;height:18px}
.notif-item .ni-ic.success{color:var(--success)}
.notif-item .ni-ic.info{color:var(--primary)}
.notif-item .ni-ic.warning{color:var(--warning)}
.notif-item .ni-ic.danger{color:var(--danger)}
.ni-body{min-width:0;flex:1}
.ni-title{font-weight:700;font-size:var(--fs-sm)}
/* unread 표시는 카드 테두리+옅은 배경 틴트로 통일(제목 뒤 점 제거 — 삼중 표시 정리) */
.ni-go{flex:0 0 auto;align-self:center;color:var(--muted)}
.ni-go .ic{width:16px;height:16px;transform:rotate(-90deg)}
.ni-desc{font-size:var(--fs-xs);color:var(--sub);margin-top:2px;line-height:1.4;white-space:normal}
.ni-time{font-size:var(--fs-xs);color:var(--muted);margin-top:4px}
.notif-empty{text-align:center;color:var(--muted);padding:30px 0}
.notif-empty .ic{width:32px;height:32px;opacity:.5;margin-bottom:8px}

/* ===== 업체: 디스패치 오퍼 카드 ===== */
.offer{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:14px 15px;margin-bottom:10px;box-shadow:var(--shadow)}
#offerList{display:grid;grid-template-columns:1fr;gap:10px}
#offerList .offer{margin-bottom:0}
.offer .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.offer .ttl{font-size:var(--fs-md);font-weight:800}
.offer .meta{font-size:var(--fs-xs);color:var(--sub);margin-top:3px}
.offer .amt{font-size:var(--fs-md);font-weight:800;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}
.offer .reason{font-size:var(--fs-sm);color:var(--sub);margin-top:8px}
.offer .act{margin-top:12px}
.offer .act .submit{margin-top:0}
.offer.claimed{border-color:var(--success);background:color-mix(in srgb,var(--success) 6%,transparent)}
/* 수임 요청(§6) — 파트너 지목 오퍼 강조 + 수락/거절 2버튼 */
.offer.offer-req{border-color:color-mix(in srgb,var(--primary) 40%,var(--line));background:color-mix(in srgb,var(--primary) 4%,transparent)}
.offer-tag.req{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:800;color:var(--primary);
  background:var(--blue-50);border-radius:var(--radius-pill);padding:2px 9px;margin-top:3px}
.offer-tag.req .ic{width:13px;height:13px}
.offer-tag.req + .meta{margin-left:6px;display:inline}
/* 대시보드 '들어온 소개건' — 수임요청(파트너 지목) 카드 강조 + 요청자 표시 */
.lead.req{border-color:color-mix(in srgb,var(--primary) 42%,var(--line));background:color-mix(in srgb,var(--primary) 5%,transparent)}
.lead-reqrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.lead-reqby{font-size:var(--fs-xs);font-weight:700;color:var(--primary-press)}
/* 라인(업종) 단위 오퍼 배지 — '이 업종만' 요청/수락 (§6 라인매칭) */
.offer-tag.line{display:inline-block;font-size:var(--fs-xs);font-weight:800;color:var(--success-ink);
  background:color-mix(in srgb,var(--success) 12%,transparent);border-radius:var(--radius-pill);padding:2px 9px;margin-left:6px}
.offer .act.act-req{display:flex;gap:8px}
.offer .act.act-req .submit{flex:1}
/* 업체 partial 수락(§6) — 통짜/브로드캐스트 오퍼를 취급 업종별로 개별 수락 */
.offer-lines-hint{display:flex;align-items:center;gap:6px;margin:10px 0 8px;font-size:var(--fs-xs);font-weight:800;color:var(--success-ink)}
.offer-lines-hint .ic{width:16px;height:16px}
.offer-lines{display:flex;flex-direction:column;gap:8px}
.offer-line{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface,var(--bg))}
.ol-t{font-size:var(--fs-sm);font-weight:800;display:flex;align-items:baseline;gap:8px}
.ol-amt{font-size:var(--fs-xs);font-weight:700;color:var(--muted)}
.offer-line .submit.sm{flex:0 0 auto;width:auto;min-height:38px;padding:0 18px;font-size:var(--fs-sm)}
.btn-ghost.full{width:100%;margin-top:10px}
.offer .act.act-req .btn-ghost.danger{flex:0 0 auto;color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,var(--line))}
.offer .act.act-req .btn-ghost.danger:hover{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 8%,transparent)}
/* 파트너: 업체 상세 '수임 요청' 버튼 */
.dd-request{margin-top:14px;width:100%;height:var(--touch);border-radius:var(--radius-sm);
  border:none;background:var(--primary);color:var(--primary-ink);font-weight:800;font-size:var(--fs-md);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:7px}
.dd-request:hover{background:var(--primary-hover);color:#fff}
.dd-request .ic{width:18px;height:18px}
.dd-request + .dd-ban{margin-top:8px}
/* 소개하기(새 소개 접수 → go('intro')) — 수임 요청 위에 배치, 아웃라인으로 주 CTA와 구분(2026-07-06) */
.dd-refer{margin-top:14px;width:100%;height:var(--touch);border-radius:var(--radius-sm);
  border:1px solid var(--primary);background:var(--bg);color:var(--primary);font-weight:800;font-size:var(--fs-md);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:background .12s,color .12s}
.dd-refer:hover{background:color-mix(in srgb,var(--primary) 8%,transparent)}
.dd-refer .ic{width:18px;height:18px}
.dd-refer + .dd-request{margin-top:8px}
/* 수임 요청 대상 소개건 선택 시트(§6) */
.rq-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.rq-pick{width:100%;text-align:left;padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface);cursor:pointer;display:block}
.rq-pick:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--line));
  background:color-mix(in srgb,var(--primary) 4%,transparent)}
.rq-pick .rq-ttl{font-weight:700;font-size:var(--fs-md)}
.rq-pick .rq-meta{margin-top:3px;font-size:var(--fs-sm);color:var(--muted)}

/* ===== 업체 상세 시트: 통계 ===== */
.firm-head{display:flex;align-items:center;gap:13px;margin:8px 2px 4px}
.firm-head .fl{width:52px;height:52px;border-radius:var(--radius-md);display:grid;place-items:center;
  color:#fff;font-weight:900;font-size:var(--fs-xl);flex:0 0 auto}
.firm-head .fn{font-size:var(--fs-lg);font-weight:800}
.firm-kpi{display:flex;gap:10px;margin:14px 0}
.firm-kpi .box{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:14px;text-align:center}
.firm-kpi .v{font-size:var(--fs-2xl);font-weight:800;font-variant-numeric:tabular-nums}
.firm-kpi .v.blue{color:var(--primary)}
.firm-kpi .k{font-size:var(--fs-xs);color:var(--sub);font-weight:600;margin-top:2px}
.firm-info{font-size:var(--fs-sm);color:var(--sub);line-height:1.8;margin-top:6px}
.firm-info b{color:var(--text);font-weight:700}

/* ===== 업체 상세(남동비즈식) — .dd 컨테이너의 --accent=업체 로고색 ===== */
.dd-head{display:flex;align-items:center;gap:13px;margin:6px 2px 12px}
.dd-head .fl{width:52px;height:52px;border-radius:var(--radius-md);display:grid;place-items:center;
  color:#fff;font-weight:900;font-size:var(--fs-xl);flex:0 0 auto}
.dd-name{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* 배경은 업체 로고색(--accent)의 옅은 틴트를 유지하되, 글자는 진한 무채색으로
   — 어떤 로고색이 와도 소형 텍스트 대비 AA(≥4.5:1)를 보장 */
.dd-badge{font-size:var(--fs-xs);font-weight:700;color:var(--grey-800);
  background:color-mix(in srgb,var(--accent) 14%,var(--grey-50));border-radius:var(--radius-pill);padding:3px 10px}
.dd-spec{display:inline-block;margin-top:6px;font-size:var(--fs-sm);font-weight:700;color:var(--grey-800);
  background:color-mix(in srgb,var(--accent) 10%,var(--grey-50));border-radius:var(--radius-sm);padding:5px 11px}
.dd-addr{display:flex;align-items:flex-start;gap:6px;font-size:var(--fs-sm);color:var(--sub);margin:2px 2px 10px}
.dd-addr .ic{width:16px;height:16px;color:var(--accent);flex:0 0 auto;margin-top:1px}
.dd-desc{font-size:var(--fs-base);color:var(--text);line-height:1.8;margin:0 2px 4px}
.dd-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.dd-links a{font-size:var(--fs-sm);font-weight:700;color:var(--primary-press);text-decoration:none;
  border:1px solid var(--line);border-radius:var(--radius-pill);padding:8px 14px}
.dd-links a:hover{border-color:var(--primary);background:var(--pick-tint)}
/* 로고 이미지(있을 때) — .fl 안에 채움 */
.dd-head .fl{overflow:hidden}
.dd-head .fl img{width:100%;height:100%;object-fit:cover;display:block}
/* 업체 사진 갤러리(가로 스크롤) */
.dd-gallery{display:flex;gap:8px;overflow-x:auto;margin:2px 0 8px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.dd-gallery img{height:124px;width:auto;max-width:200px;border-radius:var(--radius-md);
  object-fit:cover;flex:0 0 auto;border:1px solid var(--line);background:var(--grey-100)}

/* ===== 빈 상태(empty state) ===== */
.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.empty .ei{font-size:34px;display:block;margin-bottom:10px}
.empty .et{font-size:var(--fs-md);font-weight:700;color:var(--sub)}
.empty .ed{font-size:var(--fs-sm);margin-top:4px}
.empty .submit{max-width:220px;margin:16px auto 0}

/* ===== 푸터(규제 자문: 사업자정보·약관 자리) ===== */
.foot{padding:20px;border-top:1px solid var(--line);margin-top:10px;
  font-size:var(--fs-xs);color:var(--sub);line-height:1.7}
.foot a{color:var(--sub);font-weight:600;text-decoration:underline;
  display:inline-block;padding:6px 3px;margin:-4px 0}
.foot .links{margin-bottom:6px}
.foot-motto{font-size:var(--fs-sm);font-weight:700;color:var(--sub);letter-spacing:.02em;margin-bottom:12px}
.foot-motto b{color:var(--primary);letter-spacing:0}

/* ===== 하단 탭바 ===== */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:440px;display:flex;
  background:var(--bg);border-top:1px solid var(--line);padding:6px 0 12px;z-index:40}
.tab{flex:1 1 0;min-width:0;background:none;border:none;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;gap:3px;color:var(--muted);font-size:var(--fs-xs);font-weight:700;
  transition:color .15s;min-height:var(--touch);justify-content:center}
.tab .ti{font-size:20px}
.tab.on{color:var(--primary)}

.toast{position:fixed;bottom:90px;left:16px;right:16px;margin:0 auto;width:max-content;transform:translateY(20px);
  max-width:min(92vw,420px);background:var(--grey-900);color:#fff;padding:13px 20px;border-radius:var(--radius-lg);
  font-size:var(--fs-md);font-weight:700;line-height:1.45;word-break:keep-all;text-align:center;
  box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:all .3s;z-index:130}
  /* 감사 수정(07-11): z 60→130(시트80·confirm91·라이트박스120 위 — 시트 위 피드백 전멸 해소),
     translateX 센터링→left/right+margin(shrink-to-fit 가용폭이 뷰포트 절반으로 제한되던 것 해소) */
.toast.show{opacity:1;transform:translateY(0)}
body.sn-chat-room .toast{bottom:150px}   /* 채팅 입력바 안 가리게(전송 실패/429 토스트) */

/* ===== 확인 다이얼로그(파괴적 액션 — 네이티브 confirm 대체) ===== */
.confirm-dim{position:fixed;inset:0;background:rgba(16,24,40,.42);z-index:90;opacity:0;transition:opacity .2s}
.confirm-dim.on{opacity:1}
.confirm-box{position:fixed;left:50%;top:50%;transform:translate(-50%,-46%) scale(.96);
  width:calc(100% - 44px);max-width:340px;background:var(--bg);border-radius:var(--radius-xl);
  padding:24px 22px 18px;z-index:91;box-shadow:var(--shadow-lg);opacity:0;text-align:center;
  transition:opacity .2s,transform .2s}
.confirm-box.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.confirm-t{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.02em;color:var(--text)}
.confirm-m{font-size:var(--fs-md);color:var(--sub);margin-top:9px;line-height:1.55;font-weight:500;word-break:keep-all}
.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.confirm-btn{min-height:48px;border-radius:var(--radius-md);font-size:var(--fs-md);font-weight:800;
  cursor:pointer;border:1px solid transparent;transition:transform .1s}
.confirm-btn:active{transform:scale(.97)}
.confirm-cancel{background:var(--surface);color:var(--text);border-color:var(--line)}
.confirm-ok{background:var(--primary);color:var(--primary-ink)}
.confirm-ok.danger{background:var(--danger)}
/* 시맨틱 톤 — 다크 알약을 상태색으로 살짝 물들여 성공/실패 구분(무채색 기본, 시맨틱 강조) */
.toast.ok{background:color-mix(in srgb,var(--success) 20%,var(--grey-900))}
.toast.err{background:color-mix(in srgb,var(--danger) 28%,var(--grey-900))}
.toast.warn{background:color-mix(in srgb,var(--warning) 24%,var(--grey-900))}

/* ===== 이미지 라이트박스(첨부 사진 크게 보기) ===== */
.lb-open{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:120;background:rgba(10,14,20,.92);
  display:none;align-items:center;justify-content:center;padding:24px;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.lightbox.on{display:flex}
.lightbox #lbImg{max-width:92vw;max-height:86vh;width:auto;height:auto;object-fit:contain;
  border-radius:var(--radius-md);box-shadow:0 12px 40px rgba(0,0,0,.5);cursor:default}
.lb-btn{position:absolute;border:none;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;
  display:grid;place-items:center;backdrop-filter:blur(4px)}
.lb-btn:hover{background:rgba(255,255,255,.26)}
.lb-close{top:16px;right:16px;width:44px;height:44px;border-radius:50%}
.lb-close .ic{width:22px;height:22px}
.lb-nav{top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;
  font-size:30px;line-height:1;font-weight:400;padding-bottom:4px}
.lb-prev{left:14px}.lb-next{right:14px}
.lb-count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:#fff;
  font-size:var(--fs-sm);font-weight:700;background:rgba(0,0,0,.4);padding:5px 13px;border-radius:var(--radius-pill)}
@media (max-width:480px){.lb-nav{width:40px;height:40px;font-size:26px}.lb-prev{left:8px}.lb-next{right:8px}}


/* ===== 태블릿 구간(760~1023): 모바일 폭 컬럼을 중앙에 단정하게 ===== */
@media (min-width:760px){
  body{background:var(--surface)}
  .app{box-shadow:0 0 0 1px var(--line), 0 24px 60px rgba(16,24,40,.12)}
}
/* 태블릿(760~1023): 440px 모바일 컬럼이 너무 좁음 → 컨테이너·그리드 확장(사각지대 해소) */
@media (min-width:760px) and (max-width:1023px){
  .app{max-width:720px}
  .tabbar{max-width:720px}
  .dash-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lead-grid,#offerList{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ===== 데스크톱 전용 요소 기본 숨김(모바일/태블릿) ===== */
.tab-desk-only{display:none}
/* 데스크톱 레이아웃 래퍼: 모바일은 투명(display:contents)으로 기존 평면 흐름 100% 보존 */
.intro-grid,.intro-main,.intro-aside{display:contents}
.firms-layout,.firms-master{display:contents}
.settle-layout,.settle-main,.settle-aside{display:contents}
.firm-detail{display:none}   /* 우측 상세 패널은 데스크톱에서만(모바일=바텀시트) */

/* ===== 데스크탑(≥1024): 좌측 고정 사이드바 + 우측 콘텐츠 =====
   모바일 마크업/동작 무변경 — 전부 미디어쿼리/매처로 재배치(회귀 0). */
@media (min-width:1024px){
  body{background:var(--surface)}

  /* 화면 꽉 채움(가로 풀폭). 콘텐츠는 내부에서 적정 폭으로 정렬. */
  .app{max-width:none; min-height:100vh; margin:0; padding:0; border-radius:0;
    display:grid; grid-template-columns:248px minmax(0,1fr); grid-template-rows:auto 1fr auto;
    grid-template-areas:"sidebar header" "sidebar main" "sidebar footer";
    background:var(--bg)}

  /* ---- 좌측 사이드바(= tabbar 재배치) ---- */
  .tabbar{grid-area:sidebar; position:sticky; top:0; align-self:start;
    height:100vh; max-height:100vh; overflow-y:auto;
    width:auto; max-width:none; transform:none; left:auto; bottom:auto;
    display:flex; flex-direction:column; gap:var(--space-1);
    padding:var(--space-5) var(--space-3);
    background:var(--bg); border-top:none; border-right:1px solid var(--line); z-index:30}
  .tab-desk-only{display:flex}
  .tab-mobile-only{display:none}   /* 홈 메뉴: 데스크톱은 로고가 홈 역할 → 숨김(중복 제거) */

  .sb-brand{display:flex; align-items:center; gap:9px; padding:6px 12px var(--space-5);
    font-weight:800; font-size:var(--fs-lg); letter-spacing:-.02em;
    cursor:pointer; border-radius:var(--radius-md); transition:background .15s}
  .sb-brand:hover{background:var(--grey-100)}
  .sb-brand:focus-visible{outline:2px solid var(--primary); outline-offset:2px}
  .sb-brand .mark{width:36px;height:36px;color:var(--primary);
    display:grid;place-items:center;font-size:var(--fs-lg);font-weight:900;flex:0 0 auto}
  .sb-brand .mark:has(img){background:transparent}   /* 새 브랜드 마크 투명(오렌지 타일 제거·마크 묻힘 해결) */
  .sb-brand .mark img{object-fit:contain}            /* 마크 전체 표시·crop 안 함 */
  .sb-brand .accent{color:var(--primary)}            /* NET = 오렌지(헤더와 통일) */

  .tab{flex:0 0 auto; flex-direction:row; justify-content:flex-start; gap:11px;
    width:100%; min-height:46px; padding:11px 12px; border-radius:var(--radius-md);
    color:var(--sub); font-size:var(--fs-md); font-weight:700; text-align:left}
  .tab .ic-tab{width:20px;height:20px;flex:0 0 auto}
  .tab .tab-t{flex:1;min-width:0}
  .tab:hover{background:var(--grey-100); color:var(--text)}
  .tab.on{background:var(--pick-tint); color:var(--primary)}
  .sb-foot{margin-top:auto; padding-top:var(--space-3); border-top:1px solid var(--line);
    display:flex; flex-direction:column; gap:var(--space-1)}
  .sb-logout{color:var(--sub)}
  .sb-logout:hover{background:var(--danger-tint, var(--grey-100)); color:var(--danger, var(--text))}
  .sb-acct{color:var(--sub)}

  /* ---- 헤더: 데스크탑은 로고·계정이 모두 사이드바에 있으므로 헤더 자체를 숨김 ---- */
  .hdr{display:none}

  /* ---- 메인(콘텐츠) — 모든 page가 main 영역에 배치되나 .on 하나만 display ---- */
  .page{grid-area:main; align-self:start; padding:28px 40px; width:100%;
    max-width:1120px; margin:0 auto}
  #page-firms,#page-intro,#page-dashboard{max-width:none}
  #page-login,#page-signup{max-width:480px}
  #page-dashboard{max-width:1040px}
  .lead-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #page-offers{max-width:1040px}
  #offerList{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot{grid-area:footer; margin:0; padding:24px 32px; border-top:1px solid var(--line)}

  #homeFirms{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .firm{margin-left:0 !important}
  .firm:hover{border-color:var(--primary)}
  .cta:hover{transform:translateY(-1px)}
  .chip:hover{border-color:var(--primary)}
  .sheet .handle{display:none}

  /* ===== 소개하기 2존: 좌 컨트롤 / 우 sticky 견적 ===== */
  .intro-grid{display:grid; grid-template-columns:minmax(0,1fr) 360px;
    gap:var(--space-8); align-items:start; max-width:1320px; margin:0 auto}
  .intro-main{display:block; min-width:0}
  .intro-aside{display:block; position:sticky; top:28px; align-self:start}
  .intro-main>.step-label:first-child{margin-top:0}
  #page-intro .estimate{margin-top:0; background:var(--surface); border:1px solid var(--line);
    border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow)}
  #page-intro .estimate .top{flex-direction:column; align-items:flex-start; gap:6px}
  #page-intro .estimate .ev{font-size:var(--fs-3xl)}
  #page-intro #introSubmit{margin-top:14px}
  #page-intro #introHint{text-align:left}

  /* ===== 참여업체 마스터-디테일: 좌 목록 / 우 상세 패널 ===== */
  .firms-layout{display:grid; grid-template-columns:minmax(360px,440px) minmax(0,1fr);
    gap:var(--space-6); align-items:start}
  .firms-master{display:block; min-width:0}
  #allFirms{display:flex; flex-direction:column; gap:10px}
  #allFirms .firm-day{margin-top:14px}
  #allFirms .firm.sel{border-color:var(--primary); background:var(--pick-tint)}
  .firm-detail{display:block; position:sticky; top:28px; align-self:start;
    max-height:calc(100vh - 112px); overflow-y:auto;
    background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:20px; box-shadow:var(--shadow)}
  .firm-detail .fd-empty{text-align:center; padding:48px 20px; color:var(--muted)}
  .firm-detail .fd-empty .ei{display:block; margin-bottom:10px; color:var(--grey-400)}
  .firm-detail .fd-empty .et{font-size:var(--fs-md); font-weight:700; color:var(--sub)}
  .firm-detail .fd-empty .ed{font-size:var(--fs-sm); margin-top:4px}
  .firm-detail.on .fd-empty{display:none}

  /* ===== 디자인 개선 A (2026-07-05) — 데스크탑 빈 여백 채우기 ===== */
  /* 홈: 단순 액션 화면 → 집중형 컬럼(1120 과폭 버튼 방지). 통계 숫자 상향. */
  #page-home{max-width:680px}
  #page-home .hs-v{font-size:var(--fs-3xl)}
  /* 대시보드 KPI: 데스크탑은 4열로 채움(모바일 2열 유지) */
  .dash-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}

  /* 정산: 좌(진행/내역/원장) + 우(sticky 인출·계좌). DOM은 aside 먼저지만 그리드로 좌우 배치. */
  .settle-layout{display:grid; grid-template-columns:minmax(0,1fr) 340px;
    gap:var(--space-8); align-items:start}
  .settle-main{display:block; grid-column:1; grid-row:1; min-width:0}
  .settle-aside{display:block; grid-column:2; grid-row:1; position:sticky; top:28px; align-self:start}
  .settle-main>.step-label:first-child{margin-top:0}
  .settle-aside>.cashout{margin-top:0}
}

/* ============================================================
   2026-07-02 추가 — 참여업체 개편(§2)·소개 라인카드(§3)·문의/차단(§4·5)·후기·친구초대(§8)
   토큰 재사용(토스풍 #3182f6·라운드16·그림자 최소·모바일 우선).
   ============================================================ */

/* --- 소개하기: 업종 검색 + 카테고리(파트)별 묶음(엑셀 기준) --- */
.intro-search{margin-bottom:12px}
.chip-groups{display:flex;flex-direction:column;gap:16px}
.chip-group-h{font-size:var(--fs-sm);font-weight:800;color:var(--sub);margin:0 2px 9px;letter-spacing:.01em}
.chip-group .chips{margin:0}
/* '기타' 접이식 그룹 — 헤더 탭으로 펼침/접힘, 검색 매칭 시 자동 펼침 */
.chip-fold-h{display:flex;align-items:center;gap:7px;width:100%;background:none;border:0;padding:2px 2px;margin:0 0 7px;cursor:pointer;
  font-size:var(--fs-sm);font-weight:800;color:var(--sub);letter-spacing:.01em;font-family:inherit;text-align:left}
.chip-fold-h .cf-n{font-size:12px;font-weight:700;color:var(--sub);background:var(--grey-50,#f5f6f8);border:1px solid var(--line);border-radius:999px;padding:0 8px;line-height:18px}
.chip-fold-h .cf-ic{width:15px;height:15px;margin-left:auto;transition:transform .15s}
.chip-fold.open .cf-ic{transform:rotate(90deg)}
.chip-fold-h:hover{color:var(--text)}
.chip-fold .chips[hidden]{display:none}   /* .chips{display:flex}가 hidden 속성을 이기는 것 차단 */

/* --- 참여업체: 검색 + 공간 세그 + 카테고리 아코디언(§2) --- */
.firm-search{margin-bottom:12px}
.firm-space-seg{margin-bottom:14px}
.firm-accordion{display:flex;flex-direction:column;gap:10px}
.fa-part{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg)}
.fa-head{width:100%;display:flex;align-items:center;gap:10px;padding:14px 16px;min-height:var(--touch);
  background:var(--bg);border:none;font-family:inherit;font-size:var(--fs-md);font-weight:800;color:var(--text);
  cursor:pointer;text-align:left}
.fa-head:hover{background:var(--grey-50)}
.fa-head .fa-ic{color:var(--primary);display:inline-flex}
.fa-head .fa-ic .ic{width:20px;height:20px}
.fa-t{flex:1}
.fa-count{font-size:var(--fs-xs);color:var(--muted);font-weight:700;background:var(--grey-100);
  border-radius:var(--radius-pill);padding:2px 9px}
.fa-caret{width:18px;height:18px;color:var(--muted);transition:transform .2s ease;flex:0 0 auto}
.fa-head[aria-expanded="false"] .fa-caret{transform:rotate(-90deg)}
.fa-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .24s ease}
.fa-body>.fa-clip{overflow:hidden;min-height:0}      /* 클리핑 전용(패딩 없음) → 완전 접힘(0px) */
.fa-head[aria-expanded="false"] + .fa-body{grid-template-rows:0fr}
/* 업체 카드는 가로형 전체폭 → 1칸(한 줄씩 주르륵). 좁은 셀에서 소개료·업체명 깨짐 방지. */
.firm-grid{display:flex;flex-direction:column;gap:10px;padding:4px 12px 14px}
#firmAccordion .firm{margin-left:0!important}
#firmAccordion .firm.sel{border-color:var(--primary);background:var(--pick-tint)}

/* --- 소개 진행: 업종(라인) 카드 아코디언(§3) --- */
.line-acc{display:flex;flex-direction:column;gap:10px}
.line-card{border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;background:var(--bg)}
.line-head{width:100%;display:flex;align-items:center;gap:9px;padding:13px 14px;min-height:var(--touch);
  background:var(--bg);border:none;font-family:inherit;color:var(--text);cursor:pointer;text-align:left}
.line-head:hover{background:var(--grey-50)}
.line-head .lh-ic{color:var(--primary);display:inline-flex}
.line-head .lh-ic .ic{width:18px;height:18px}
.lh-t{font-size:var(--fs-md);font-weight:800}
.lh-firm{font-size:var(--fs-xs);color:var(--sub);font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lh-firm.wait{color:var(--warning)}
.line-caret{width:16px;height:16px;color:var(--muted);transition:transform .2s ease;flex:0 0 auto}
.line-head[aria-expanded="false"] .line-caret{transform:rotate(-90deg)}
.line-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .24s ease}
.line-body>.line-clip{overflow:hidden;min-height:0}   /* 클리핑 전용(패딩 없음) → 완전 접힘(0px) */
.line-head[aria-expanded="false"] + .line-body{grid-template-rows:0fr}
.line-body-in{padding:2px 14px 14px}
.line-flow{display:flex;flex-direction:column;margin:2px 0 8px}
.ln-step{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:var(--fs-sm);color:var(--muted)}
.ln-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--grey-300);background:var(--bg);
  display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--bg);flex:0 0 auto}
.ln-step.done .ln-dot{background:var(--success);border-color:var(--success)}
.ln-step.cur .ln-dot{border-color:var(--primary);background:var(--primary)}
.ln-step.done,.ln-step.cur{color:var(--text);font-weight:700}
.ln-step.blocked{opacity:.4}
/* 단계 도달시각(대표 07-11 #4) — 단계명 오른쪽 끝 작은 회색(MM.DD HH:MM). done/cur 만 렌더됨. */
.ln-at{margin-left:auto;font-size:var(--fs-xs);font-weight:600;color:var(--muted);flex:0 0 auto;font-variant-numeric:tabular-nums}
/* 소개건 고유번호(대표 07-11 #1) — #A1B2C3 모노스페이스 회색 칩 톤. */
.rf-no,.lh-no,.ch-no,.ref-no{font-size:var(--fs-xs);font-weight:700;color:var(--muted);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.rf-no{margin-right:6px}
.lh-no{flex:0 0 auto;margin-right:2px}
.ch-no{flex:0 0 auto;margin-left:auto;margin-right:4px}
/* 파트너 라인 수임일(대표 07-11 #3) — 업체명 뒤 작은 회색. */
.rfl-at{font-size:var(--fs-xs);font-weight:600;color:var(--muted);margin-left:4px}
/* 고유번호 활용2차(대표 07-11): 번호 탭 복사 + 알림/원장 점프 하이라이트 */
.rf-no,.lh-no,.ch-no{cursor:pointer;-webkit-tap-highlight-color:transparent}
.tx-no{font-size:var(--fs-xs);font-weight:700;color:var(--primary);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-variant-numeric:tabular-nums}
@keyframes cardHit{0%,55%{box-shadow:0 0 0 2px var(--primary);background:var(--blue-50)}100%{box-shadow:none;background:transparent}}
.card-hit{animation:cardHit 2.6s ease}
.line-stall{font-size:var(--fs-sm);color:var(--sub);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:10px 12px;display:flex;align-items:center;gap:7px;margin-bottom:8px}
.line-stall .ic{width:16px;height:16px;color:var(--warning);flex:0 0 auto}
.line-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn-ghost.sm{height:36px;padding:0 12px;font-size:var(--fs-sm)}
.btn-ghost.sm .ic{width:15px;height:15px;vertical-align:-2px;margin-right:3px}
/* 수락 대기중 단계(업체 지정) — 소개자가 지정했고 업체 수락만 남음. 진행(파랑) 톤 + 속 빈 링. */
.ln-step.awaiting,.ln-step.awaiting .ln-name{color:var(--primary-press);font-weight:700}
.ln-step.awaiting .ln-dot{background:var(--bg);border-color:var(--primary)}
.line-stall.req{background:var(--blue-50);border-color:color-mix(in srgb,var(--primary) 22%,transparent);color:var(--primary-press)}
.line-stall.req .ic{color:var(--primary)}
.line-stall.req b{font-weight:800}
/* 대시보드 라인 카드 '업체 지정' 버튼(강조) */
.btn-ghost.pri{border-color:var(--primary);color:var(--primary);font-weight:800}
.btn-ghost.pri:hover{background:var(--blue-50)}
/* ===== 업체 진행 단계 타임라인(클릭형) — 단일 버튼 대체 ===== */
.cl-steps{margin-top:10px}
.cl-stepnow{font-size:var(--fs-sm);color:var(--sub);font-weight:700;margin-bottom:4px}
.cl-stepnow b{color:var(--primary)}
.cl-ok{color:var(--success);font-weight:900;margin-left:2px}
.firm-flow{display:flex;flex-direction:column;gap:0}
.firm-flow .ln-step{width:100%;box-sizing:border-box;padding:7px 8px;border-radius:var(--radius-sm)}
.firm-flow button.ln-step{border:none;background:none;font:inherit;text-align:left;cursor:pointer;
  transition:background .12s,border-color .12s}
.firm-flow button.ln-step.clickable:hover{background:var(--grey-100)}
.firm-flow .ln-step.next{background:var(--blue-50)}
.firm-flow .ln-step.next .ln-dot{border-color:var(--primary);background:var(--bg)}
.firm-flow .ln-step.next .ln-name{color:var(--primary-press);font-weight:700}
.firm-flow .ln-step.future{opacity:.45}
.firm-flow .ln-go{font-size:var(--fs-xs);font-weight:800;color:var(--primary);margin-left:8px;
  background:var(--bg);border:1px solid var(--primary);border-radius:var(--radius-pill);padding:1px 9px}
.firm-flow .ln-step.canback .ln-back{font-size:var(--fs-xs);font-weight:700;color:var(--warning);margin-left:8px}
.firm-flow .ln-step.canback:hover{background:color-mix(in srgb,var(--warning) 10%,transparent)}

/* --- 업체후기 플레이스홀더 + 업체 차단 버튼(§4) --- */
.dd-reviews{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.dd-sec-t{font-size:var(--fs-md);font-weight:800;margin-bottom:8px}
.dd-review-empty{display:flex;gap:8px;align-items:center;font-size:var(--fs-sm);color:var(--muted);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:14px}
.dd-review-empty .ic{width:18px;height:18px;flex:0 0 auto}
.dd-ban{margin-top:14px;width:100%;height:var(--touch);border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--bg);color:var(--muted);font-weight:700;font-size:var(--fs-sm);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:7px}
.dd-ban .ic{width:18px;height:18px}
.dd-ban:hover{border-color:var(--danger);color:var(--danger)}
.dd-ban.on{border-color:var(--danger);color:var(--danger);background:color-mix(in srgb,var(--danger) 7%,transparent)}
/* 차단됨: 기본 '차단됨', 데스크톱 호버 시 '차단 취소'로 전환(터치기기는 '차단됨' 유지) */
.dd-ban-t-hover{display:none}
@media (hover:hover){
  .dd-ban.on:hover{background:color-mix(in srgb,var(--danger) 12%,transparent)}
  .dd-ban.on:hover .dd-ban-t{display:none}
  .dd-ban.on:hover .dd-ban-t-hover{display:inline}
}
/* 즐겨찾기(§8) — 하트 토글 */
.dd-fav{margin-top:14px;width:100%;height:var(--touch);border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--surface);color:var(--text);font-weight:700;font-size:var(--fs-md);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:7px}
.dd-fav .ic{width:18px;height:18px}
.dd-fav:hover{border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}
.dd-fav.on{border-color:var(--danger);color:var(--danger);background:color-mix(in srgb,var(--danger) 6%,transparent)}
.dd-fav.on .ic{fill:var(--danger)}
/* 담은 상태: 기본은 '즐겨찾기 완료', 데스크톱 호버 시 '즐겨찾기 빼기'로 전환(터치기기는 hover 없어 안정적으로 '완료' 유지) */
.dd-fav-t-hover{display:none}
@media (hover:hover){
  .dd-fav.on:hover{background:color-mix(in srgb,var(--danger) 12%,transparent)}
  .dd-fav.on:hover .dd-fav-t{display:none}
  .dd-fav.on:hover .dd-fav-t-hover{display:inline}
}
.dd-fav + .dd-request,.dd-fav + .dd-ban{margin-top:8px}
/* 상세 헤더 우측 아이콘 액션(즐겨찾기·더보기) — 하단 큰 버튼에서 헤더 아이콘으로 이동(2026-07-06).
   차단은 더보기(⋯) 메뉴 진입 후 확인(2단계)으로 오클릭 방지(⑥). */
.dd-head-actions{margin-left:auto;align-self:flex-start;display:flex;align-items:center;gap:6px;flex:0 0 auto}
.dd-fav-ic{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--bg);display:grid;place-items:center;cursor:pointer;padding:0;transition:background .12s,border-color .12s}
.dd-fav-ic .ic{width:18px;height:18px;color:var(--muted)}
.dd-fav-ic:hover{border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}
.dd-fav-ic.on{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 7%,transparent)}
.dd-fav-ic.on .ic{color:var(--danger);fill:var(--danger)}
.dd-more{position:relative}
.dd-more>summary.dd-more-ic{list-style:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--bg);display:grid;place-items:center;cursor:pointer;font-size:20px;font-weight:800;color:var(--sub);line-height:1;user-select:none}
.dd-more>summary.dd-more-ic::-webkit-details-marker{display:none}
.dd-more>summary.dd-more-ic::marker{content:''}
.dd-more>summary.dd-more-ic:hover{background:var(--grey-50);color:var(--text)}
.dd-more.banned>summary.dd-more-ic{border-color:var(--danger);color:var(--danger)}
.dd-more-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:220px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:0 8px 24px rgba(17,24,39,.14);padding:6px}
.dd-more-item{width:100%;border:0;background:transparent;color:var(--text);font-weight:700;font-size:var(--fs-sm);display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:10px 10px;border-radius:var(--radius-xs,8px);transition:background .12s,color .12s}
.dd-more-item .ic{width:16px;height:16px}
.dd-more-item.danger{color:var(--danger)}
.dd-more-item.danger:hover{background:color-mix(in srgb,var(--danger) 8%,transparent)}

/* 업체 후기 — 상세 노출 + 작성 시트 */
.dd-review-sum{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.dd-stars{color:var(--warning);letter-spacing:1px;font-size:var(--fs-md)}
.dd-stars.sm{font-size:var(--fs-sm)}
.dd-review-sum b{font-weight:800}
.dd-rv-cnt{font-size:var(--fs-sm);color:var(--muted);font-weight:600}
.dd-badge.new{font-size:var(--fs-xs);font-weight:800;color:var(--primary-press);background:var(--pick-tint);border-radius:var(--radius-pill);padding:1px 8px;margin-left:2px}
.dd-review{border-top:1px solid var(--line);padding:10px 0}
.dd-rv-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dd-rv-vf{font-size:var(--fs-xs);color:var(--success);font-weight:700;display:inline-flex;align-items:center;gap:3px}
.dd-rv-vf .ic{width:13px;height:13px}
.dd-rv-item{font-size:var(--fs-xs);color:var(--muted);font-weight:700;background:var(--grey-100);border-radius:var(--radius-pill);padding:1px 8px}
.dd-rv-txt{font-size:var(--fs-sm);color:var(--text);margin:5px 0 3px;line-height:1.5}
.dd-rv-by{font-size:var(--fs-xs);color:var(--muted)}
.rv-stars{display:flex;gap:6px;justify-content:center;margin:8px 0 16px}
.rv-star{background:none;border:none;font-size:34px;line-height:1;color:var(--grey-300);cursor:pointer;padding:2px}
.rv-star.on{color:var(--warning)}

/* 수임뷰: 연락처 미동의 + 소개자 차단 */
.cl-cust.muted{color:var(--muted);font-size:var(--fs-sm);font-weight:600}
.cl-ban{margin-top:8px}
.lk-ban{background:none;border:none;color:var(--muted);font-size:var(--fs-xs);font-weight:700;
  cursor:pointer;text-decoration:underline;padding:2px}
.lk-ban:hover{color:var(--danger)}
/* 소개자 정보 확인하기 → 팝업 여는 버튼 */
.cl-introinfo{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.lk-introinfo{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;min-height:40px;
  background:none;border:none;cursor:pointer;color:var(--sub);font-size:var(--fs-sm);font-weight:700;padding:4px 2px}   /* 감사: 주 진입점 27→40px */
.lk-introinfo:hover{color:var(--text)}
.lk-introinfo .ii-caret{width:15px;height:15px;color:var(--muted);transform:rotate(-90deg)}   /* 팝업 오픈 표시(우향 ›) */
/* 소개자 정보 팝업(모달) — confirm-box 재사용 + 전용 본문 */
.pi-box .pi-body{margin-top:6px}
.pi-name{font-size:var(--fs-lg);font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pi-type{font-size:var(--fs-xs);font-weight:800;color:var(--primary);background:var(--blue-50);border-radius:var(--radius-pill);padding:2px 9px}
.pi-tel{display:inline-flex;align-items:center;margin-top:10px;font-size:var(--fs-lg);font-weight:800;color:var(--primary);text-decoration:none;letter-spacing:.01em}
.pi-tel.muted{color:var(--muted);font-weight:700;font-size:var(--fs-sm)}
.pi-hint{margin-top:5px;font-size:var(--fs-xs);color:var(--muted);font-weight:600;line-height:1.5}
.pi-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
.pi-stat{background:var(--grey-50);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.pi-stat-l{font-size:var(--fs-xs);color:var(--sub);font-weight:700}
.pi-stat b{font-size:var(--fs-xl);font-weight:800;color:var(--text)}
.pi-stat-s{font-size:var(--fs-xs);color:var(--muted);font-weight:600}
.pi-actions{margin-top:16px}
.pi-box .pi-more{position:absolute;top:14px;right:14px;text-align:left}
/* Phase3: 팝업 내 받은 후기 요약 + 후기작성/차단/닫기 액션 */
.pi-review{margin-top:12px;font-size:var(--fs-sm);font-weight:800;color:var(--text)}
.pi-review.muted{color:var(--muted);font-weight:600;font-size:var(--fs-xs)}
.pi-rv-star{color:#f5a623}
.pi-rv-c{color:var(--sub);font-weight:600;font-size:var(--fs-xs)}
.pi-box .pi-actions{display:flex;flex-direction:column;gap:9px;align-items:stretch}
.pi-btnrow{display:flex;gap:8px}
.pi-btnrow .confirm-btn{flex:1}
.pi-reviewed{text-align:center;font-size:var(--fs-xs);color:var(--success-ink,#12924e);font-weight:700;padding:2px}
.lk-undo{display:block;margin:7px auto 0;background:none;border:none;color:var(--muted);
  font-size:var(--fs-xs);font-weight:700;cursor:pointer;text-decoration:underline;padding:2px}
.lk-undo:hover{color:var(--primary-press)}

/* 참여업체 지역 필터 칩(§2) */
.firm-region-seg{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;margin:-2px 0 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.firm-region-seg::-webkit-scrollbar{display:none}
.rchip{flex:0 0 auto;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface,var(--bg));
  font-size:var(--fs-sm);font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap}
.rchip.sel{background:var(--blue-50);border-color:var(--primary);color:var(--primary-press)}
/* 정렬 필터(대표 07-15) — 소개하기 후보(전역형) + 분야별 미니 칩(.fa-sort). 카드 별점·수임 실적 줄 */
.firm-sort-seg{margin-top:0}
.fa-sort{display:flex;gap:6px;overflow-x:auto;padding:10px 12px 2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}   /* 좌우 12px = .firm-grid 카드와 정렬(대표 07-15: 왼쪽 쏠림 수정) */
.fa-sort::-webkit-scrollbar{display:none}
.fa-sort .rchip{padding:5px 12px;font-size:var(--fs-xs)}
.firm .fm.fstat{color:var(--primary);font-weight:700}

/* ===== 쇼핑(폐쇄몰 샘플, 대표 07-15) ===== */
.shop-sample-tag{display:inline-flex;align-items:center;margin-left:8px;padding:3px 10px;border-radius:999px;
  background:var(--blue-50);color:var(--primary-press);font-size:var(--fs-xs);font-weight:800;vertical-align:middle}
.shop-head{margin-bottom:14px}
.shop-lead{font-size:var(--fs-sm);color:var(--sub);line-height:1.55;margin:0 0 10px}
.shop-lead b{color:var(--fg,#111)}
.shop-pt{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;
  background:var(--surface,var(--bg));border:1px solid var(--line);font-size:var(--fs-sm);color:var(--sub)}
.shop-pt b{color:var(--primary)}
.shop-pt .ic{width:16px;height:16px;color:var(--primary)}
.shop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.shop-card{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface,var(--bg));
  overflow:hidden;cursor:pointer;transition:transform .15s, box-shadow .15s}
.shop-card:active{transform:scale(.98)}
.shop-img{position:relative;aspect-ratio:1/1;background:#f4f6f9}
.shop-img img{width:100%;height:100%;object-fit:cover;display:block}
.shop-low{position:absolute;top:8px;left:8px;padding:3px 9px;border-radius:999px;background:var(--primary);
  color:#fff;font-size:var(--fs-xs);font-weight:800}
.shop-name{padding:10px 12px 2px;font-size:var(--fs-sm);font-weight:700;color:var(--fg,#111);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 가격(대표 07-15 2차): 한 줄 = %+포인트가(줄바꿈 없음), 아래 줄 = 취소선 시중가 — 카드 높이 일정 */
.shop-price{padding:2px 12px 0;display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.shop-price b{font-size:var(--fs-md);color:var(--fg,#111)}
.shop-off{font-size:var(--fs-sm);font-weight:800;color:var(--primary)}
.shop-market{padding:0 12px 12px;font-size:var(--fs-xs);color:var(--muted);text-decoration:line-through}
.shop-notice{display:flex;gap:10px;align-items:flex-start;margin:18px 0 4px;padding:14px 16px;
  border-radius:var(--radius-md);background:#FFF6F0;border:1px solid #FFE1D0;color:var(--sub);
  font-size:var(--fs-xs);line-height:1.6;word-break:keep-all}
.shop-notice .ic{width:17px;height:17px;flex:0 0 auto;margin-top:2px;color:var(--primary)}
.shop-notice b{color:var(--primary-press,#c94502)}
@media (min-width:1024px){ .shop-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* 내가 차단한 업체 목록(§4) */
.firm-blocked-wrap{margin-top:12px}
.blk-box{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface,var(--bg));overflow:hidden}
.blk-head{display:flex;align-items:center;gap:8px;padding:12px 14px;cursor:pointer;font-size:var(--fs-sm);
  font-weight:800;color:var(--fg,#111);list-style:none}
.blk-head::-webkit-details-marker{display:none}
.blk-head .ic{width:18px;height:18px;color:var(--muted)}
.blk-cnt{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:999px;background:var(--line);color:var(--muted);font-size:var(--fs-xs);font-weight:800}
.blk-caret{width:16px;height:16px;margin-left:auto;color:var(--muted);transition:transform .2s}
.blk-box[open] .blk-caret{transform:rotate(180deg)}
.blk-list{border-top:1px solid var(--line)}
.blk-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line)}
.blk-row:last-child{border-bottom:none}
.blk-name{font-size:var(--fs-sm);font-weight:700;color:var(--fg,#111)}
.blk-unban{flex:0 0 auto;padding:7px 13px;border:1px solid var(--primary);border-radius:999px;background:var(--blue-50);
  color:var(--primary-press);font-size:var(--fs-xs);font-weight:800;cursor:pointer}

/* --- 마이페이지(파트너/업체) — dash-card 재사용 + 행/고객 --- */
#page-mypage .dash-card + .dash-card{margin-top:14px}
.mp-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 2px;border-bottom:1px solid var(--line)}
.mp-row:last-child{border-bottom:none}
.mp-row[onclick]{cursor:pointer}
.mp-row-t{min-width:0;display:flex;flex-direction:column;gap:2px}
.mp-row-t b{font-size:var(--fs-sm);font-weight:700}
.mp-sub{font-size:var(--fs-xs);color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-cust{padding:11px 2px;border-bottom:1px solid var(--line)}
.mp-cust:last-child{border-bottom:none}
.mp-cust-top{display:flex;align-items:center;gap:8px}
.mp-cust-top b{font-size:var(--fs-sm);font-weight:700}
.mp-mask{font-size:var(--fs-xs);color:var(--muted);font-weight:600}
.mp-cust-sub{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--sub);margin-top:4px}
.mp-date{color:var(--muted);margin-left:auto}
.mp-empty{font-size:var(--fs-sm);color:var(--muted);padding:10px 2px;text-align:center}

/* --- 친구 초대 카드(§8) --- */
.invite-card{margin-top:14px;border:1px solid color-mix(in srgb,var(--primary) 30%,var(--line));
  background:linear-gradient(180deg,var(--pick-tint),var(--bg));border-radius:var(--radius-lg);padding:16px}
.inv-h{display:flex;align-items:center;gap:8px;font-size:var(--fs-md);font-weight:800;margin-bottom:10px}
.inv-h .ic{color:var(--primary)}
.inv-reward{font-size:var(--fs-sm);color:var(--sub);font-weight:600;line-height:1.6}
.inv-reward b{color:var(--primary-press);font-weight:800}
.inv-note{display:block;font-size:var(--fs-xs);color:var(--muted);font-weight:600;margin-top:2px}
.inv-code{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0;
  background:var(--bg);border:1px dashed var(--grey-300);border-radius:var(--radius-sm);padding:11px 14px}
.inv-code-l{font-size:var(--fs-xs);color:var(--sub);font-weight:700}
.inv-code-v{font-size:var(--fs-md);font-weight:900;letter-spacing:.08em;color:var(--text)}
.inv-count{font-size:var(--fs-sm);color:var(--sub);font-weight:700;margin-top:10px;text-align:center}

/* 중계수수료 안내(업체 대시보드) */
.fee-note{display:flex;align-items:flex-start;gap:7px;font-size:var(--fs-sm);color:var(--sub);font-weight:600;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:11px 13px;margin:10px 0}
.fee-note .ic{width:16px;height:16px;color:var(--muted);flex:0 0 auto;margin-top:1px}
.fee-note .fn-t{flex:1 1 auto;min-width:0;line-height:1.5}
.fee-note b{color:var(--text);font-weight:800;white-space:nowrap}

/* 입력 보조 라벨/추천인 배지 */
.fld-note{font-weight:500;color:var(--sub);font-size:var(--fs-xs)}
.ref-badge{margin-top:6px;font-size:var(--fs-xs);font-weight:700;color:var(--primary-press);
  background:var(--pick-tint);border-radius:var(--radius-pill);padding:4px 10px;display:inline-block}

/* ============================================================
   1:1 채팅(파트너↔업체) — 카카오톡 스타일(§채팅 2026-07-10)
   ============================================================ */
/* 탭 미읽음 배지 — 모바일(하단바): 아이콘 우상단 플로팅 / 데스크톱(사이드바 행): 우측 끝(아래 미디어쿼리) */
.tab{position:relative}
.tab-badge{position:absolute;top:2px;left:calc(50% + 5px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--danger);color:#fff;font-size:11px;font-weight:800;line-height:16px;text-align:center;pointer-events:none}
/* 모바일 탭 최대 6개(업체: 대시보드·소개건·내업체·채팅·예치금·마이) — 라벨 줄바꿈/넘침 방지 */
@media (max-width:640px){
  .tab{padding-left:2px;padding-right:2px}
  .tab .tab-t{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:374px){ .tab{font-size:var(--fs-2xs)} }

/* ---- 목록/새 채팅 ---- */
.chat-new{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--bg);
  color:var(--primary);font-weight:700;font-size:var(--fs-sm);border-radius:var(--radius-pill);
  padding:8px 14px;cursor:pointer;font-family:inherit;min-height:38px}
.chat-new:hover{background:var(--pick-tint);border-color:color-mix(in srgb,var(--primary) 35%,var(--line))}
.chat-new .ic{width:15px;height:15px}
.sec-h.chat-sub-h{justify-content:flex-start;gap:4px}
.chat-list{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.chat-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--radius-md);padding:12px 14px;cursor:pointer;
  box-shadow:var(--shadow-sm);font-family:inherit;font-size:inherit;color:inherit;transition:transform .12s}
.chat-item:hover{background:var(--grey-50)}
.chat-item:active{transform:scale(.99)}
.chat-avatar{width:46px;height:46px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-weight:800;font-size:var(--fs-lg);color:#fff;background:var(--grey-500)}
.chat-avatar.partner{background:var(--primary)}          /* 파트너 = 브랜드 오렌지 */
.chat-avatar.firm{background:var(--grey-700)}            /* 업체 = 진회색(역할 구분 톤) */
.chat-item .cc{flex:1;min-width:0}
.chat-item .cn{display:flex;align-items:center;gap:6px;font-weight:800;font-size:var(--fs-md);
  letter-spacing:-.01em;min-width:0}
.chat-item .cn-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-role{flex:0 0 auto;font-size:var(--fs-2xs);font-weight:700;color:var(--sub);background:var(--grey-100);
  border-radius:var(--radius-pill);padding:1px 7px}
.chat-item .cl{display:block;font-size:var(--fs-sm);color:var(--sub);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-item .cr{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px;
  align-self:flex-start;padding-top:2px}
.chat-time{font-size:var(--fs-2xs);color:var(--muted);font-weight:600}
.chat-go{width:16px;height:16px;transform:rotate(-90deg);color:var(--muted)}
.chat-unread{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--primary);color:#fff;
  font-size:11px;font-weight:800;line-height:18px;text-align:center}
.chat-loading{text-align:center;color:var(--muted);font-size:var(--fs-sm);padding:28px 0}

/* ---- 대화방(상단 고정 헤더 + 내부 스크롤 메시지 + 하단 입력바) ----
   높이 = 뷰포트 − (모바일 헤더≈66 + 하단 탭바≈63 + 페이지 상단 여백) → 입력바가 탭바 바로 위에 고정된 것처럼 동작.
   dvh: 모바일 키보드/주소창 변화에 자동 대응(미지원 브라우저는 vh 폴백). */
#chatRoomView{display:flex;flex-direction:column;height:calc(100vh - 138px);height:calc(100dvh - 138px);height:calc(var(--sn-vvh,100dvh) - 138px);min-height:320px}   /* --sn-vvh: 앱 WebView 키보드 보정(visualViewport) */
body.sn-chat-room .foot{display:none}                    /* 대화 중 풋터 숨김 — 불필요한 창 스크롤 제거 */
body.sn-chat-room .app{padding-bottom:0}
/* ===== 앱 키보드 대응(대표 확정 07-11, 앱 로그로 원인 검증) =====
   WebView(adjustResize)가 키보드만큼 뷰포트를 줄여도 vh/dvh 는 '키보드 무시 전체높이'로
   고정되는 기기가 있어 입력바가 키보드 뒤로 밀림 → 대화방에서는 뷰포트 단위 대신
   html 100% 체인(=실제 줄어든 뷰포트)을 채우는 플렉스 레이아웃으로 전환.
   모바일 한정(데스크톱은 키보드 이슈 없음 — 기존 계산 유지, 회귀 방지). */
html{height:100%}
@media (max-width:1023px){
  body.sn-chat-room{height:100%;overflow:hidden}
  body.sn-chat-room .app{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  body.sn-chat-room .hdr{flex:0 0 auto}
  body.sn-chat-room #page-chat{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding-bottom:66px}  /* 66px=하단 탭바 */
  body.sn-chat-room #chatRoomView{height:auto;flex:1 1 auto;min-height:0}
}
.chat-head{display:flex;align-items:center;gap:6px;padding:6px 0 10px;border-bottom:1px solid var(--line);flex:0 0 auto}
.chat-back{width:40px;height:40px;flex:0 0 auto;border:none;background:transparent;border-radius:var(--radius-sm);
  cursor:pointer;display:grid;place-items:center;color:var(--text)}
.chat-back:hover{background:var(--grey-100)}
.chat-back .ic{width:22px;height:22px;transform:rotate(90deg)}   /* ic-chevron(아래) → 왼쪽 화살표 */
.chat-peer{min-width:0}
.chat-peer-name{font-weight:800;font-size:var(--fs-lg);letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-peer-role{font-size:var(--fs-xs);color:var(--sub);font-weight:600}
.chat-msgs{flex:1;overflow-y:auto;padding:14px 2px 10px;display:flex;flex-direction:column;gap:3px;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.chat-day{align-self:center;font-size:var(--fs-2xs);font-weight:700;color:var(--muted);
  background:var(--grey-100);border-radius:var(--radius-pill);padding:4px 12px;margin:10px 0 6px}
.chat-row{display:flex;align-items:flex-end;gap:6px;margin-top:2px}
.chat-row.mine{flex-direction:row-reverse}
.chat-bubble{max-width:76%;padding:10px 14px;font-size:var(--fs-md);line-height:1.5;
  white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;border-radius:18px}
.chat-row.mine .chat-bubble{background:var(--primary);color:#fff;border-bottom-right-radius:6px}
.chat-row.peer .chat-bubble{background:var(--grey-100);color:var(--text);border-bottom-left-radius:6px}
.chat-meta{flex:0 0 auto;display:flex;flex-direction:column;font-size:var(--fs-2xs);color:var(--muted);
  font-weight:600;padding-bottom:2px;line-height:1.35}
.chat-row.mine .chat-meta{align-items:flex-end}
.chat-un1{display:block;text-align:inherit;color:var(--primary);font-weight:800;font-size:11.5px;line-height:1.2}   /* 카톡식 안읽음 '1' */
/* 마이/설정/고객센터 — 토스식 행 목록(대표 07-11) */
.set-row{display:flex;align-items:center;gap:11px;width:100%;background:none;border:0;border-top:1px solid var(--line);
  padding:13px 4px;cursor:pointer;font-family:inherit;font-size:var(--fs-md);font-weight:700;color:var(--text);text-align:left;text-decoration:none}
.set-row:first-child,.dc-h+.set-row{border-top:0}
.set-row .set-i{width:20px;height:20px;color:var(--sub);flex:none}
.set-row .set-l{flex:1;min-width:0}
.set-row .set-v{font-size:var(--fs-sm);font-weight:600;color:var(--sub);word-break:break-all;text-align:right}
.set-row .set-c{width:16px;height:16px;color:var(--sub);flex:none}
.set-row.set-danger .set-l{color:var(--danger)}
.sup-ask{margin:12px 0}
@media (hover:hover){   /* 감사: 데스크톱 hover 상태 누락 */
  .set-row:hover{background:var(--grey-50)}
  .mp-row[onclick]:hover{background:var(--grey-50)}
}
.chat-un1[hidden]{display:none}   /* display:block 이 [hidden] UA 규칙을 이겨 '1'이 안 사라지던 버그 수정(2026-07-11) */
.chat-empty-hint{margin:auto;font-size:var(--fs-sm);color:var(--muted);background:var(--grey-50);
  border:1px solid var(--line);border-radius:var(--radius-pill);padding:8px 16px}
.chat-inputbar{flex:0 0 auto;display:flex;align-items:flex-end;gap:8px;padding:10px 0 4px;
  border-top:1px solid var(--line);background:var(--bg)}
.chat-inputbar textarea{flex:1;min-width:0;resize:none;border:1.5px solid var(--line);border-radius:22px;
  padding:11px 16px;font-size:var(--fs-md);font-family:inherit;line-height:1.45;background:var(--surface);
  color:var(--text);outline:none;max-height:112px;overflow-y:auto}
.chat-inputbar textarea:focus{border-color:var(--primary);background:var(--bg)}
.chat-send{width:44px;height:44px;flex:0 0 auto;border:none;border-radius:50%;background:var(--primary);color:#fff;
  cursor:pointer;display:grid;place-items:center;transition:background .15s,opacity .15s}
.chat-send:hover:not(:disabled){background:var(--primary-hover)}
.chat-send:disabled{opacity:.35;cursor:default}
.chat-send .ic{width:19px;height:19px;margin:2px 2px 0 0}

/* ---- 카톡식 기능 5종(§채팅 2026-07-11): 방 메뉴·무음 표시·삭제 말풍선·사진 말풍선·클립·액션시트 ---- */
.chat-head .chat-more{margin-left:auto}                  /* ⋯ 메뉴는 헤더 우측 끝 */
.chat-head .chat-more>summary.dd-more-ic{width:36px;height:36px}
.chat-mute-ic{width:13px;height:13px;flex:0 0 auto;color:var(--muted)}   /* 목록: 이름 옆 무음(bell-off) */
.chat-unread.muted{background:var(--grey-400)}           /* 무음 방 미읽음 배지 = 회색톤(유지하되 톤다운) */
.chat-bubble.deleted{font-style:italic;color:var(--muted);background:var(--grey-50);border:1px dashed var(--line)}
.chat-row.mine .chat-bubble.deleted{background:var(--grey-50);color:var(--muted)}   /* 내 오렌지 말풍선도 중립톤으로 */
.chat-bubble.img{max-width:70%;padding:3px;background:transparent}
.chat-row.mine .chat-bubble.img,.chat-row.peer .chat-bubble.img{background:transparent}
.chat-img{display:block;max-width:100%;max-height:320px;border-radius:14px;border:1px solid var(--line);
  cursor:zoom-in;-webkit-touch-callout:none}             /* iOS 이미지 길게누르기 기본 시트 억제(액션시트와 충돌 방지) */
@media (hover:none){ .chat-bubble{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none} }  /* 터치: 길게누르기=메뉴(텍스트 선택과 충돌 방지). 데스크톱은 선택 유지 */
.chat-attach{width:44px;height:44px;flex:0 0 auto;border:1px solid var(--line);border-radius:50%;background:var(--bg);
  color:var(--sub);cursor:pointer;display:grid;place-items:center;transition:background .15s,color .15s}
.chat-attach:hover:not(:disabled){background:var(--grey-50);color:var(--text)}
.chat-attach:disabled{cursor:default}
.chat-attach .ic{width:19px;height:19px}
.chat-attach.busy .ic{display:none}                      /* 업로드 중: 아이콘 → 스피너 */
.chat-attach.busy::after{content:'';width:16px;height:16px;border-radius:50%;
  border:2px solid var(--grey-300);border-top-color:var(--primary);animation:chatspin .8s linear infinite}
@keyframes chatspin{to{transform:rotate(360deg)}}
/* 말풍선 액션시트(복사/삭제) — 하단 고정 미니 시트. 항목은 dd-more-item 재사용(톤 통일) */
.chat-ctx-dim{position:fixed;inset:0;z-index:84;background:rgba(16,24,40,.28)}
.chat-ctx{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));
  z-index:85;width:min(92vw,340px);background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md);
  box-shadow:0 12px 32px rgba(17,24,39,.22);padding:6px;display:flex;flex-direction:column;animation:fade .18s ease}
.chat-ctx .dd-more-item{justify-content:center;padding:12px 10px;font-size:var(--fs-md)}
.chat-ctx .chat-ctx-cancel{color:var(--sub);border-top:1px solid var(--line);border-radius:0 0 var(--radius-xs,8px) var(--radius-xs,8px);margin-top:4px}

/* 파트너 정보 팝업 '채팅하기' — 주 CTA(후기 작성)와 구분되는 오렌지 아웃라인 */
.pi-actions .pi-chat{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--bg);color:var(--primary);border:1px solid var(--primary)}
.pi-actions .pi-chat:hover{background:color-mix(in srgb,var(--primary) 8%,transparent)}
.pi-actions .pi-chat .ic{width:17px;height:17px}

/* 데스크톱(≥1024): 채팅 페이지 폭 제한 + 대화방 높이(헤더 없음·사이드바 레이아웃) + 배지 행 우측 정렬 */
@media (min-width:1024px){
  #page-chat{max-width:760px}
  #chatRoomView{height:calc(100vh - 116px);height:calc(100dvh - 116px);height:calc(var(--sn-vvh,100dvh) - 116px)}
  .tab-badge{position:static;margin-left:auto;flex:0 0 auto}
}