*, *::before, *::after { box-sizing: border-box; }
    /* 2026-09-22(사용자 요청 — "전체 페이지 바탕색은 없는게 더 낫지않아?"): 은은한
       회색빛 배경(#f4f6fb)을 없애고 흰색으로 — 배너의 옅은 하늘색 톤과 카드
       테두리/그림자만으로 경계를 주는 쪽이 더 깔끔하다는 판단. */
    body { margin: 0; padding: 0; background: #fff; font-family: 'Noto Sans KR', sans-serif; }

    /* ── 좌측 사이드바 메뉴(매물종류/테마종류) — index.html처럼 문서 흐름 밖에 position:
       absolute로 "띄우던" 방식(2026-09-01)을 버리고, 진짜 문서 흐름 안의 flex 컬럼으로
       바꿨다(2026-09-02). 그렇게 안 하면 사이드바 항목이 많아 길어져도 페이지 전체 높이에는
       반영이 안 돼서, 매물이 적어 그리드가 짧을 때 사이드바가 안 끝났는데 그 아래 푸터가
       먼저 시작돼버리는 문제가 있었다("하단의 검은 정보창은 항상 사이드바 아래에 위치해야
       한다"는 요청). .ag-body-flex(agent.html에서 사이드바+그리드를 감싸는 wrapper)의
       기본 정렬(align-items: stretch, flex 기본값)이 두 컬럼 중 더 긴 쪽 높이에 맞춰 행
       전체 높이를 잡아주므로, 사이드바가 길든 짧든 그 아래엔 항상 푸터가 온다. */
    .ag-body-flex {
      display: flex;
      gap: 20px;
      max-width: 1440px; /* 사이드바(220) + gap(20) + 본문(1200, .ag-content와 동일) */
      margin: 0 auto;
    }
    /* ⚠ sidebar-menu.css(index.html/list.html 기준으로 처음 만들어진 공용 파일)에는
       아직도 "문서 흐름 밖에 position:absolute로 띄우고 1700px 미만이면 숨긴다"는 자기
       기본 규칙이 남아있다. agent.css가 파일 로드 순서상 나중이라도, 이 블록이 안 건드리는
       속성(position/height/display/top/right)은 sidebar-menu.css 값이 그대로 남아 사이드바가
       flex 행 밖으로 튀어나가거나(넓은 화면) 내용만 안 보이거나(좁은 화면) 하면서 결과적으로
       사이드바가 통째로 사라져 보이는 문제가 있었다 — 여기서 명시적으로 원래 문서 흐름 안의
       평범한 block으로 되돌려서 sidebar-menu.css 쪽 값을 완전히 무효화한다. */
    #sbm-mount-anchor {
      flex: 0 0 220px;
      width: 220px;
      position: static;
      height: auto;
    }
    /* 2026-09-22(사용자 요청 — "스크롤해도 사이드바가 화면에 계속 노출되도록"):
       position:static → sticky로 전환. 부모(#sbm-mount-anchor)가 위 flex stretch로
       이미 매물카드 그리드 높이만큼 늘어나 있으므로, 그 안에서 sticky가 "스크롤하는
       동안 상단에 붙어있다가 그리드가 끝나는 지점에서 같이 멈춤"으로 자연스럽게
       동작한다(부모 밖으로 튀어나가거나 푸터 위에 계속 떠있지 않음).
       top 값(76px)은 상단에 sticky로 고정되는 .ag-filter-bar(검색/필터줄, 실측
       높이 약 56px)에 가려지지 않도록 그 아래에서 시작하게 잡은 여유값이다. */
    #sbm-mount {
      position: sticky;
      top: 76px;
      display: block;
      right: auto;
      width: 220px;
    }
    .ag-body-flex .ag-content {
      flex: 1 1 auto;
      min-width: 0; /* 그리드 트랙 때문에 flex item이 안 줄어드는 것 방지 */
      max-width: none;
      margin: 0;
      /* 2026-09(사이드바를 매물카드 그리드 "높이"에만 맞추기 위한 분리): 예전엔 이 안에
         결과바(.ag-result-bar)+그리드+페이지네이션이 전부 들어있어서, flex stretch로
         맞춰지는 사이드바 높이도 그 전체(결과바+그리드+페이지네이션) 높이였다. 이제 이
         컨테이너엔 그리드만 남기고(아래 HTML 참고) 위/아래 padding을 0으로 비워서,
         사이드바 stretch 높이가 정확히 카드 그리드 높이가 되게 한다 — 결과바/페이지네이션
         용 위/아래 여백은 분리해낸 .ag-content-bar-top/-bottom이 대신 담당한다. */
      padding: 0 24px;
    }

    /* 결과 카운트 바 / 페이지네이션 — 2026-09: .ag-body-flex(사이드바+그리드 flex 행) 밖으로
       뺀 전체 폭 바. 사이드바 폭(220)+gap(20)만큼 왼쪽을 밀어서, 기존처럼 시각적으로는
       콘텐츠 컬럼(사이드바 오른쪽) 아래에 그대로 정렬되도록 맞춘다. */
    .ag-content-bar {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 24px 0 264px; /* 220(사이드바) + 20(gap) + 24(.ag-content 좌측 padding과 동일) */
    }
    .ag-content-bar-top { padding-top: 28px; }
    .ag-content-bar-bottom { padding-bottom: 60px; }

    /* 화면이 좁으면(태블릿/모바일) 사이드바를 숨기고 그리드가 .ag-body-flex의 폭 전체를
       그대로 쓰던 원래(사이드바 도입 전) 폭으로 되돌린다. */
    @media (max-width: 1023px) {
      #sbm-mount-anchor { display: none; }
      .ag-body-flex { max-width: 1200px; gap: 0; }
      .ag-content-bar { max-width: 1200px; padding-left: 24px; } /* 사이드바 숨김 → 왼쪽 오프셋 제거 */
    }

    /* STEP69(매물카드 4개 기본 + 인덱스와 동일한 문의사이드바 임계값): 그리드 본문을
       인덱스(.section, 1200px)와 동일한 폭으로 맞추면서, 우측 상담위젯까지 사이드바(220)+
       gap(20)+그리드(1200)+gap(20)+위젯(220)=1680px가 겹치지 않고 들어갈 만큼 뷰포트가
       넓을 때만(여유 20px 포함 1700px — 인덱스의 #side-contact-mount 임계값과 동일하게
       통일) 셋을 한 줄에 대칭으로 띄운다 — 그리드가 항상 뷰포트 정중앙에 오도록.
       .ag-content-bar(결과바/페이지네이션)도 똑같이 좌우 264px(220+20+24)로 맞춰서 그리드
       위/아래 바가 카드와 나란히 정렬되게 한다(264는 sidebar+gap+content 자체 padding
       합산이라 본문 폭이 줄어도 값이 그대로다). */
    @media (min-width: 1700px) {
      .ag-body-flex { max-width: 1680px; }
      .ag-content-bar { max-width: 1680px; padding: 0 264px; }
      #side-contact-mount { display: block; }
    }
    /* 화면이 더 넓어지면 남는 여백만큼 좌우 사이드바/위젯을 본문에서 조금씩 더
       떨어뜨려(gap 확대) 바깥쪽으로 밀어준다 — index.html(.idx-side-flex)과 동일한 값. */
    @media (min-width: 1900px) {
      .ag-body-flex { gap: 36px; max-width: 1752px; }
      .ag-content-bar { max-width: 1752px; padding: 0 280px; }
    }
    @media (min-width: 2200px) {
      .ag-body-flex { gap: 56px; max-width: 1832px; }
      .ag-content-bar { max-width: 1832px; padding: 0 300px; }
    }
    /* 2026-09(사용자 요청 "한줄로.. 페이지 공간을 더 넓게"): 필터바(.ag-filter-inner)는
       위 본문 폭 확장과 무관하게 1200px로 고정돼 있어 넓은 화면에서 정렬탭+지도/목록 버튼이
       줄바꿈됐다 — 본문(.ag-body-flex)과 같은 폭으로 맞춰 남는 가로공간을 그대로 쓴다. */
    @media (min-width: 1700px) { .ag-filter-inner { max-width: 1680px; } }
    @media (min-width: 1900px) { .ag-filter-inner { max-width: 1752px; } }
    @media (min-width: 2200px) { .ag-filter-inner { max-width: 1832px; } }

    /* ── 에이전트 프로필 배너 ── */
    /* STEP74(사용자 요청 — 참고 이미지("박태희 소장" 목업) 그대로 재현): 어두운
       그라데이션 배너를 버리고 밝은(화이트/연한 하늘색) 배경으로 전환. 당시엔
       섹터4(보유매물)만 다크 그라데이션 포인트색 카드로 남겼었는데, 2026-09-22
       사용자 요청으로 섹터4도 카드1~3과 같은 라이트 톤으로 통일했다(아래 각 카드
       정의부 참고) — 이제 4개 카드가 모두 같은 톤. 같은 날 "전체 페이지 바탕색은
       없는 게 더 낫다"는 사용자 요청으로 body도 흰색으로 바꿨는데, 배너 자체의
       연한 하늘색 그라데이션은 남아있어 상단만 여전히 색이 있어 보였다 — 이걸
       마저 흰색으로 바꿔 배너를 포함한 페이지 전체를 흰 바탕으로 통일한다(카드
       테두리/그림자만으로 경계를 준다). */
    .ag-profile-banner {
      background: #fff;
      border-bottom: 1px solid #e5e9f0;
      padding: 16px 24px;
    }
    /* STEP73(사용자 요청 "전체적으로 어수선하다, 카드식으로") — 예전엔 4개 섹터를
       margin-left+border-left로만 나눈 "한 줄에 쭉 늘어놓은" 레이아웃이라 경계가
       흐릿했다. 이제 섹터 4개(프로필/자기소개/취급분야/보유매물) 전부를 각자 테두리·
       배경을 가진 카드로 만들고, 카드 사이 간격은 구분선 대신 gap으로 준다.
       align-items:stretch로 네 카드의 세로 높이를 통일해 한 줄에 나란한 카드 행으로
       보이게 했다(레퍼런스 이미지 형태). 각 카드는 새 클래스 없이 기존 셀렉터
       (.ag-profile-top/.ag-profile-bio-wrap/.ag-profile-categories/.ag-profile-stats)
       자체에 스타일을 입혔다 — 모바일 미디어쿼리가 이 셀렉터들을 display:none으로
       숨기는 규칙과 특이도가 같아야 소스 순서대로 정상 동작하기 때문(클래스를
       얹으면 특이도가 올라가 모바일 숨김이 깨짐 — #side-contact-mount에서 겪은
       것과 같은 함정, agent.html 주석 참고). */
    /* STEP78(사용자 요청 — "높이를 가변으로 하지말고 이크기 즉 소개 4줄짜리로
       고정해줘") — 이전엔 배너 4칸 행 높이가 align-items:stretch로 그중 제일 긴
       카드(보통 자기소개)에 맞춰 담당자마다 들쭉날쭉했다. min-height로 "소개 4줄"
       기준 높이를 하한선으로 고정하고(자기소개가 없거나 짧아도 배너가 얇아지지
       않음), 아래 .ag-profile-bio에 4줄 clamp를 둬서 반대로 소개가 길어도 그 이상
       늘어나지 않게 상한선도 맞춘다 — 결과적으로 담당자와 무관하게 항상 같은
       높이. */
    .ag-profile-inner {
      max-width: 1200px; margin: 0 auto;
      display: flex; align-items: stretch; gap: 16px;
      min-height: 164px;
    }
    /* STEP76(사용자 요청 — "높이가 너무 높다, 조금 줄여줘" + "배경을 아주 약한
       파란색계통으로") — 카드1~3(.ag-profile-top/.ag-profile-bio-wrap/
       .ag-profile-categories) 패딩을 줄이고 초상 사진 프레임도 132×160→108×124로
       작게 잡아 배너 전체 높이를 낮췄다. 배경은 순백(#fff) 대신 아주 옅은 파란
       톤(#f5f9ff)으로 바꿔 배너 바탕(연한 하늘색 그라데이션)과 카드가 부드럽게
       이어지도록 했다. */
    /* STEP74: 카드1~3(프로필/자기소개/취급분야)은 화이트 카드 + 옅은 그림자로 톤을
       맞춘다(다크 유리 카드 → 라이트 카드). 텍스트는 아래에서 각각 진한 남색/회색으로
       재설정. */
    .ag-profile-top {
      display: flex; align-items: center; gap: 20px;
      flex-shrink: 0;
      background: #e9f0fb;
      border: 1px solid #d7e3f5;
      border-radius: 16px;
      box-shadow: 0 2px 10px rgba(15,23,42,.06);
      padding: 12px 20px;
    }
    /* STEP74: 원형 아바타 → 참고 이미지처럼 세로가 긴 둥근 사각형 인물 사진 프레임으로
       교체. 링(border) 대신 은은한 그림자만 준다. */
    .ag-avatar-wrap {
      width: 108px; height: 124px; border-radius: 14px;
      overflow: hidden; flex-shrink: 0;
      background: #eef2f8;
      box-shadow: 0 3px 10px rgba(15,23,42,.1);
      display: flex; align-items: center; justify-content: center;
    }
    .ag-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; }
    .ag-avatar-wrap .ag-avatar-emoji { font-size: 38px; }
    /* 2026-08-29(6차): 전체매물 모드 — 로고를 프레임 전체에 꽉 채우지 않고, 프레임
       한가운데에 작은 흰색 "둥근 사각" 뱃지를 띄우고 그 안에 로고를 작게 넣는다.
       사람 사진이 아니라 브랜드 마크라는 게 한눈에 구분되도록. */
    .ag-avatar-wrap .ag-avatar-logo-badge {
      width: 54px; height: 54px; border-radius: 16px;
      background: #fff; box-shadow: 0 4px 14px rgba(15,23,42,.12);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .ag-avatar-wrap .ag-avatar-logo { width: 30px; height: 30px; object-fit: contain; }
    .ag-profile-info { flex: 1; min-width: 0; }
    .ag-profile-name {
      font-size: 24px; font-weight: 800; color: #1a1f3c;
      margin: 0 0 4px; letter-spacing: -.3px;
    }
    .ag-profile-role { font-size: 14px; color: #64748b; margin-bottom: 4px; }
    .ag-profile-position {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 3px 10px; border-radius: 20px; width: fit-content;
      background: #eaf1fd; border: 1px solid #d3e3fb;
      font-size: 12px; font-weight: 700; color: #1a56db;
      margin: 0 0 4px;
    }
    .ag-profile-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
    /* STEP66: 자기소개(bio) — 배너 높이가 너무 늘어나지 않도록 최대 2줄까지만
       보여주고 넘치면 말줄임표로 자른다. */
    /* STEP73→74: 섹터2 — 화이트 카드로 통일(다른 카드와 같은 톤). */
    .ag-profile-bio-wrap {
      display: flex; flex-direction: column; justify-content: center;
      flex: 1 1 auto; min-width: 160px;
      background: #e9f0fb;
      border: 1px solid #d7e3f5;
      border-radius: 16px;
      box-shadow: 0 2px 10px rgba(15,23,42,.06);
      padding: 12px 20px;
      position: relative;
    }
    /* STEP74: "소개" 텍스트 라벨 대신 참고 이미지처럼 장식용 따옴표 글리프. 옅은
       인디고 톤으로 본문 텍스트보다 작게 존재감만 준다. */
    .ag-bio-quote {
      font-family: Georgia, 'Times New Roman', serif;
      font-size: 44px; font-weight: 700; color: #c7d2fe;
      line-height: 1; margin-bottom: -6px;
    }
    /* STEP68(v10): 2줄 클램프였을 때 "입력한대로 다 보여달라"는 피드백으로 클램프를
       완전히 제거했었는데, STEP78에서 배너 높이를 고정하면서 다시 상한이 필요해졌다.
       그래서 2줄이 아니라 고정폭에 맞춘 4줄로 clamp를 되살린다 — 4줄을 넘으면
       "더보기" 링크(agent.js toggleBioMore)로 펼쳐서 볼 수 있다. */
    /* STEP68(v11)→74: 폰트/줄간격은 유지하되 라이트 테마에 맞게 텍스트 색만 진한
       회색으로 전환. */
    .ag-profile-bio {
      font-size: 14px; font-weight: 500; color: #334155; line-height: 1.75;
      white-space: pre-line; letter-spacing: -.1px;
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
      overflow: hidden;
    }
    /* STEP68(v4): 자기소개가 2줄을 넘칠 때만(agent.js가 판단) "더보기" 링크를 보여주고,
       누르면 클램프를 풀어 전체 문구를 펼친다(레퍼런스의 "자기소개 더보기 →" 패턴). */
    .ag-profile-bio.ag-bio-expanded {
      -webkit-line-clamp: unset; display: block; overflow: visible;
    }
    .ag-bio-more {
      display: none; margin-top: 6px; font-size: 12px; font-weight: 600;
      color: #1a56db; text-decoration: none; cursor: pointer;
    }
    .ag-bio-more:hover { color: #123e9e; text-decoration: underline; }
    /* STEP68(v2): 취급분야 아이콘 — 담당자가 보유한 매물종류를 "취급분야" 헤딩 + 3열
       그리드로 나열, 아이콘 배지는 흰 배경 + 사이트 포인트색 아이콘으로 통일(전문적으로
       보이도록). 클릭하면 아래 필터가 그 종류로 설정된다(agent.js selectCategoryIcon). */
    /* STEP73→74: 섹터3 — 화이트 카드로 통일. */
    .ag-profile-categories {
      display: flex; flex-direction: column; justify-content: center;
      flex-shrink: 0;
      background: #e9f0fb;
      border: 1px solid #d7e3f5;
      border-radius: 16px;
      box-shadow: 0 2px 10px rgba(15,23,42,.06);
      padding: 12px 20px;
    }
    .ag-cat-heading {
      font-size: 11px; font-weight: 700; color: #94a3b8;
      text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px;
    }
    .ag-cat-grid { display: grid; grid-template-columns: repeat(3, 58px); gap: 10px 12px; }
    .ag-cat-icon {
      display: flex; flex-direction: column; align-items: center; gap: 4px;
      cursor: pointer;
    }
    /* STEP68(v12)→74: 매물종류별로 색이 다 달라 어수선하다는 피드백 — 전문적으로
       보이게 배지 배경을 연한 하늘색 한 가지로 통일하고, 아이콘 색은 사이트 기본
       포인트색으로 고정. 선택(active) 상태는 배경을 포인트색으로 꽉 채워 대비를 준다. */
    .ag-cat-icon-badge {
      width: 34px; height: 34px; border-radius: 10px; margin: 0 auto;
      display: flex; align-items: center; justify-content: center;
      background: #eaf1fd;
      box-shadow: 0 1px 4px rgba(15,23,42,.08);
      transition: transform .15s, box-shadow .15s, background .15s;
    }
    .ag-cat-icon:hover .ag-cat-icon-badge { transform: translateY(-2px) scale(1.06); }
    .ag-cat-icon.active .ag-cat-icon-badge {
      background: var(--color-primary, #1a56db);
      box-shadow: 0 3px 10px rgba(26,86,219,.35);
    }
    .ag-cat-icon-badge .material-symbols-outlined { font-size: 18px; color: var(--color-primary, #2563eb); }
    .ag-cat-icon.active .ag-cat-icon-badge .material-symbols-outlined { color: #fff; }
    .ag-cat-icon-label { font-size: 10px; color: #64748b; white-space: nowrap; }
    .ag-cat-icon.active .ag-cat-icon-label { color: #1a56db; font-weight: 700; }
    .ag-meta-item {
      display: flex; align-items: center; gap: 8px;
      font-size: 24px; color: #1a56db;
    }
    .ag-meta-item a {
      color: #1a56db; text-decoration: none;
      font-weight: 700;
      padding: 4px 2px; /* 탭 영역 확보 */
    }
    .ag-meta-item a:hover { color: #123e9e; text-decoration: underline; }
    .ag-phone-text { display: flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0; }
    .ag-call-icon-btn {
      display: flex; align-items: center; justify-content: center;
      width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
      background: #22c55e; color: #fff;
      box-shadow: 0 3px 10px rgba(34,197,94,.35);
      transition: transform .15s, box-shadow .15s;
    }
    .ag-call-icon-btn:hover { transform: scale(1.08); box-shadow: 0 4px 14px rgba(34,197,94,.45); }
    .ag-call-icon-btn svg { width: 13px; height: 13px; }
    /* STEP73(사용자 요청 — "보유매물 카드도 뭔가 밋밋하다") — 섹터4: 예전엔 각
       .ag-stat-box가 저마다 테두리/배경을 가진 "박스 안의 박스"였는데, 이제 바깥
       .ag-profile-stats 자체를 하나의 카드로 만들고 안의 박스(들)는 padding만
       가진 순수 컬럼으로 단순화했다 — 박스가 1개(보유 매물)뿐인 일반적인 경우
       "이중 테두리"처럼 안 보이고 레퍼런스 이미지처럼 깔끔한 카드 하나로 보인다.
       박스가 여러 개인 내 대시보드(찜/최근본/보유, isMine=1) 모드에서는 옆 박스와
       얇은 세로선(.ag-stat-box + .ag-stat-box)으로만 구분.
       STEP74: 카드1~3은 라이트 테마로 바꿨지만 이 카드(보유 매물)만은 참고 이미지와
       동일하게 유일한 포인트색(다크 그라데이션) 카드로 남긴다. */
    .ag-profile-stats {
      display: flex; flex-shrink: 0;
      /* 2026-09-22(사용자 요청 — "박스자체를 오른쪽 끝에 배치"): 찜/최근본 대시보드처럼
         섹터2(자기소개)·섹터3(취급분야)가 없는 화면에서는 섹터1(프로필) 바로 옆에
         붙어 왼쪽에 몰려 보였다. margin-left:auto로 flex 행의 남는 공간을 이 카드
         앞으로 몰아줘서, 다른 섹터가 꽉 채우지 못하고 남긴 공간이 있을 때 이 카드가
         항상 맨 오른쪽 끝에 붙도록 한다(다른 섹터가 이미 폭을 다 채우는 일반 화면에서는
         남는 공간이 없어 기존과 동일하게 보인다).
      */
      margin-left: auto;
      /* 2026-09-22(사용자 요청 — "색상도 다른카드들과 같이 맞춰줘"): 유일하게 남아있던
         다크 그라데이션 포인트색 카드를 버리고 카드1~3과 동일한 라이트 톤으로 통일.
         동시에 "배경보다 약간 더 진하게"란 요청에 맞춰 카드1~3의 배경/테두리도 아래에서
         함께 살짝 더 진한 톤(#e9f0fb/#d7e3f5)으로 조정했다 — 배너 배경
         (#eef3fc~#f8fafc)과 카드가 뭉개지지 않고 살짝 구분되도록. */
      background: #e9f0fb;
      border: 1px solid #d7e3f5;
      border-radius: 16px;
      box-shadow: 0 2px 10px rgba(15,23,42,.06);
      overflow: hidden; /* 안의 active 배경/구분선이 둥근 모서리를 안 벗어나도록 */
    }
    .ag-stat-box {
      text-align: center;
      display: flex; flex-direction: column; justify-content: center;
      padding: 12px 24px;
      min-width: 92px;
      transition: background .15s;
    }
    .ag-stat-box + .ag-stat-box { border-left: 1px solid #d7e3f5; }
    /* 2026-09-22: 카드 배경을 다크→라이트로 바꾸면서 흰 글씨(#fff)로는 대비가 안 나와
       카드1~3과 같은 진한 남색/회색 텍스트 톤으로 전환. */
    .ag-stat-num { font-size: 28px; font-weight: 900; color: #1a1f3c; line-height: 1; }
    .ag-stat-label { font-size: 11px; color: #64748b; margin-top: 4px; }
    /* 2026-09-22(사용자 요청 — "보유매물 카드 가로폭 줄이고 상단 보유매물/하단
       전체·매매·월세로"): #ag-stat-all 전용 — 숫자 대신 라벨을 맨 위에 두고 그
       아래 배지를 쌓는 세로 레이아웃이라 가로 패딩/최소폭을 다른 칸(찜/본매물)보다
       좁게 줄인다. */
    /* 2026-09-22(사용자 요청 — "폭을 더 줄이고 소개란을 넓혀"): 패딩을 한번 더
       줄여 카드를 더 좁게 — 줄어든 만큼 옆 소개란(.ag-profile-bio-wrap, flex:1)이
       자동으로 넓어진다. */
    #ag-stat-all { padding: 10px 12px; min-width: 0; }
    .ag-stat-label-top { margin-top: 0; font-weight: 700; color: #1a1f3c; }
    /* 아이콘은 모바일 "본 매물"(isMine) 배지 전용 — 데스크톱/일반 화면에서는 숨김 */
    .ag-stat-icon { display: none; }
    /* STEP73→75(사용자 요청 — "전체매물보기탭을 없애고 전체/매매/월세 배지와
       갯수를") — 보유매물 박스 하위: 3칸 미니 그리드/CTA 버튼 대신 "전체 24 · 매매
       10 · 월세 8" 알약(pill) 배지로 교체(agent.js renderAgentStatBreakdown).
       2026-09-22(사용자 요청 — "가로 한줄 말고 세로로 한줄씩"): 배지를 한 줄에
       나란히 늘어놓던 flex-wrap 행 대신 세로로 한 개씩 쌓는 column으로 변경 —
       그만큼 가로폭도 덜 차지해서 카드가 좁아지는 데도 도움이 된다. */
    .ag-stat-breakdown {
      display: flex; flex-direction: column; align-items: center; gap: 5px;
      margin-top: 10px; padding-top: 10px;
      border-top: 1px solid #d7e3f5;
    }
    /* 2026-09-22: 배지도 카드1~3의 취급분야 아이콘 배지(.ag-cat-icon-badge)와 같은
       톤(연한 하늘색 배경 + 포인트색 텍스트)으로 통일. 세로 배치로 바뀌면서 가로
       패딩도 살짝 줄여 좁아진 카드 폭에 맞춘다. */
    .ag-stat-badge {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 3px 9px; border-radius: 20px;
      background: #eaf1fd;
      border: 1px solid #d3e3fb;
      font-size: 11px; font-weight: 600; color: #475569;
      white-space: nowrap;
    }
    .ag-stat-badge b { font-weight: 800; color: #1a56db; margin-right: 2px; }
    .ag-stat-box.active { background: #eaf1fd; }

    /* ── 필터바 ── */
    .ag-filter-bar {
      background: #fff; border-bottom: 1px solid #e2e8f0;
      position: sticky; top: 0; z-index: 100;
      box-shadow: 0 1px 4px rgba(0,0,0,.05);
    }
    .ag-filter-inner {
      /* 2026-09(사용자 요청 "한줄로.. 페이지 공간을 더 넓게"): 예전엔 본문(1200px)과
         똑같이 좁아서 정렬탭+지도/목록 버튼이 줄바꿈됐다 — 검색/필터/정렬이 한 줄에
         들어가도록 기본 폭을 넉넉하게 늘리고, 더 넓은 화면에서는 아래 미디어쿼리로 더 키운다. */
      max-width: 1600px; margin: 0 auto;
      display: flex; align-items: center; gap: 8px;
      padding: 10px 24px; flex-wrap: wrap;
    }
    .ag-search-group {
      display: flex; align-items: center; gap: 6px;
      flex-shrink: 0;
    }
    .ag-search-wrap {
      display: flex; align-items: center;
      background: #f1f5fd; border: 1.5px solid #d0d8f0;
      border-radius: 8px; padding: 0 10px; gap: 6px;
      width: 260px;
    }
    .ag-search-wrap input {
      flex: 1; min-width: 0; border: none; background: transparent;
      font-size: 13px; color: #1e293b; outline: none; height: 34px;
    }
    .ag-search-btn {
      display: flex; align-items: center; justify-content: center;
      width: 34px; height: 34px; flex-shrink: 0;
      border-radius: 8px; border: 1.5px solid #1a56db;
      background: #1a56db; color: #fff; cursor: pointer;
      transition: all .15s;
    }
    .ag-search-btn:hover { background: #164ec2; }

    /* 드롭다운 */
    /* 매물종류/거래유형/금액/면적 — 한 줄 고정, 공간 부족시만 가로 스크롤 */
    .ag-filter-group {
      display: flex; align-items: center; gap: 8px;
      flex-wrap: nowrap;
    }
    .ag-dd-wrap { position: relative; flex-shrink: 0; }
    .ag-filt-btn {
      padding: 6px 13px; border-radius: 20px;
      border: 1.5px solid #cbd5e1; background: #fff;
      font-size: 12px; font-weight: 600; color: #475569;
      cursor: pointer; white-space: nowrap; transition: all .15s;
    }
    .ag-filt-btn:hover { border-color: #1a56db; color: #1a56db; }
    .ag-filt-btn.active { border-color: #1a56db; background: #eff6ff; color: #1a56db; }
    /* 2026-08-29: 초기화 버튼은 원형 아이콘(.ag-filt-reset-icon)으로 교체 —
       스타일은 assets/css/search-filters.css 공용 정의를 그대로 씀. */
    /* 2026-08-29(3차): 캡슐 트리거 버튼(.sf-dd-group .ag-filt-btn) 높이는
       search-filters.css 공용 규칙이 list.html(36px) 기준으로 잡혀 있어 —
       agent.html의 검색창(34px)에 맞춰 버튼 min-height만 2px 줄여서 덮어쓴다. */
    .sf-dd-group .ag-filt-btn { min-height: 30px; }
    .area-unit-toggle { display:flex; border:1px solid #e2e8f0; border-radius:6px; overflow:hidden; }
    .area-unit-btn { padding:3px 10px; font-size:11px; font-weight:600; border:none; background:#f8fafc; color:#94a3b8; cursor:pointer; transition:all .15s; }
    .area-unit-btn.active { background:#1a56db; color:#fff; }
    .area-type-row { display:flex; align-items:center; gap:5px; font-size:12px; color:#475569; cursor:pointer; padding:4px 6px; border-radius:4px; }
    .area-type-row:hover { background:#f1f5f9; }
    .area-type-row input { accent-color:#1a56db; cursor:pointer; }
    .ag-dropdown {
      position: absolute; top: calc(100% + 8px); left: 0;
      background: #fff; border: 1px solid #e2e8f0;
      border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.13);
      padding: 16px 16px 12px; min-width: 220px; z-index: 300; display: none;
    }
    .ag-dropdown.show { display: block; }
    .ag-dd-label { font-size: 11px; font-weight: 700; color: #94a3b8; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .5px; }

    /* 지역(시/도>시/군/구>동) 캐스케이딩 select — list.js와 동일 컴포넌트(2026-08-28 공용화) */
    .ag-dd-select {
      width: 100%; padding: 7px 8px; border-radius: 6px;
      border: 1px solid #e2e8f0; font-size: 12px; color: #1e293b;
      background: #f8fafc;
    }
    .ag-dd-select:disabled { color: #94a3b8; background: #f1f5f9; cursor: not-allowed; }

    /* 섹션 타이틀 */
    .ag-dd-section-title {
      font-size: 11px; font-weight: 700; color: #64748b;
      display: flex; align-items: center; gap: 5px;
      margin: 10px 0 7px;
    }
    .ag-dd-divider { height: 1px; background: #f1f5f9; margin: 10px 0; }

    /* 탭그룹 2열 그리드 */
    .ag-group-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .ag-group-chip {
      padding: 8px 10px; border-radius: 20px;
      border: 1.5px solid #3b82f6; background: #f0f7ff;
      font-size: 12px; font-weight: 600; color: #3b82f6;
      cursor: pointer; transition: all .15s; user-select: none;
      text-align: center; line-height: 1.3;
    }
    .ag-group-chip:hover { background: #dbeafe; border-color: #2563eb; color: #1d4ed8; }
    .ag-group-chip.selected { background: #3b82f6; color: #fff; }

    /* 개별 유형 3열 그리드 */
    .ag-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .ag-type-grid .ag-dd-chip {
      text-align: center; padding: 7px 6px;
      border-radius: 8px; font-size: 12px;
    }

    .ag-dd-options { display: flex; flex-wrap: wrap; gap: 6px; }
    .ag-dd-chip {
      padding: 6px 12px; border-radius: 20px;
      border: 1.5px solid #e2e8f0; font-size: 12px; font-weight: 500;
      color: #475569; cursor: pointer; transition: all .15s; user-select: none;
    }
    .ag-dd-chip:hover { border-color: #93c5fd; background: #f0f7ff; color: #1a56db; }
    .ag-dd-chip.active { border-color: #1a56db; background: #eff6ff; color: #1a56db; font-weight: 700; }

    .ag-dd-footer { margin-top: 12px; padding-top: 10px; border-top: 1px solid #f1f5f9; display: flex; justify-content: flex-end; gap: 6px; }
    .ag-dd-confirm { padding: 7px 16px; background: #1a56db; color: #fff; border: none; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; }
    .ag-dd-clear { padding: 7px 14px; background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 12px; cursor: pointer; }

    /* 정렬탭 — 2026-08-29(3차): list.html의 그룹캡슐(.sf-sort-tabs) 디자인으로
       통일(사용자 요청) — 개별 탭 테두리 대신 회색 캡슐 하나로 묶고, 선택된
       탭만 흰 알약으로 떠 보이게 한다. */
    .ag-sort-tabs {
      display: flex; align-items: center; gap: 1px; margin-left: auto;
      background: #f1f5f9; border-radius: 11px; padding: 2px;
    }
    .ag-sort-tab {
      display: flex; align-items: center; justify-content: center; gap: 3px;
      min-height: 26px; box-sizing: border-box;
      padding: 0 10px; border-radius: 9px;
      font-size: 11px; font-weight: 600; color: #64748b;
      border: none; background: transparent;
      cursor: pointer; transition: all .15s; white-space: nowrap;
    }
    .ag-sort-tab:hover { color: #1a56db; }
    .ag-sort-tab.active {
      background: #fff; color: #1a56db; font-weight: 700;
      box-shadow: 0 1px 4px rgba(26,86,219,.15);
    }
    .sort-arrow { font-size: 9px; color: #cbd5e1; transition: color .15s; }
    .ag-sort-tab.active .sort-arrow { color: #1a56db; }

    /* 2026-09(사용자 요청): 정렬탭 뒤에 list.html과 같은 지도/목록 보기 전환 버튼 */
    .ag-view-toggle { margin-left: 28px; display: flex; border: 1.5px solid #e2e8f0; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
    .ag-view-toggle .lp-vbtn { padding: 7px 14px; font-size: 12px; font-weight: 600; color: #64748b; background: #fff; cursor: pointer; border: none; font-family: inherit; display: flex; align-items: center; gap: 5px; transition: all .15s; }
    .ag-view-toggle .lp-vbtn + .lp-vbtn { border-left: 1.5px solid #e2e8f0; }
    .ag-view-toggle .lp-vbtn.active { background: #1a56db; color: #fff; }
    .ag-view-toggle .lp-vbtn:hover:not(.active) { background: #f8fafc; color: #1e293b; }

    /* ── 매물 그리드 ── */
    .ag-content {
      max-width: 1200px; margin: 0 auto;
      padding: 28px 24px 60px;
    }
    .ag-result-bar {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 18px; padding-bottom: 14px;
      border-bottom: 1px solid #e2e8f0;
    }
    .ag-result-count { font-size: 14px; color: #64748b; }
    .ag-result-count strong { color: #1a56db; font-weight: 700; }

    /* STEP69(사용자 요청: "인덱스처럼 매물카드 4개를 기본으로") — 반응형 auto-fill(280px)
       대신 인덱스 홈페이지(index.css .prop-page)와 동일한 auto-fit(220~260px)로 통일했었다.
       2026-09-22(누적 수정 이력 — 최종적으로 "4장 꽉 찰 땐 여백없이, 카드가 적을 땐
       왼쪽부터 채우고 크기는 그대로"로 정리):
       1차: minmax(220px,1fr)+auto-fit → 4장 꽉 찰 땐 좋았지만, 카드가 적으면 auto-fit이
       빈 트랙을 접어버려서 남은 트랙이 leftover 폭을 전부 흡수해 카드가 거대해짐.
       2차: 카드 자체에 max-width 260/420 캡 → 크기는 잡았지만 트랙은 넓은 채로 남아
       카드가 가운데 둥둥 떠보이고, 개수마다 캡 값이 달라 크기가 들쭉날쭉.
       3차(auto-fit + minmax(220px,260px) 고정 + justify-content:center) → 크기는 일정해
       졌지만 4장이 꽉 차도 트랙 합계가 컨테이너보다 살짝 좁아 좌우 여백 + 가운데 정렬.
       최종: auto-fit 대신 auto-fill + 상한 다시 1fr. auto-fill은 항목 수와 무관하게
       "들어갈 수 있는 트랙 개수"(이 폭 기준 4개)를 항상 다 만들고, 내용 없는 트랙은
       접지 않고 빈 트랙으로 남긴다(auto-fit과의 핵심 차이). 4장이 꽉 차면 4트랙 모두
       내용이 있어 1fr이 컨테이너 끝까지 균등분배 → 여백 없이 꽉 참. 1~3장뿐이면 남은
       빈 트랙도 여전히 존재해 1fr 분배가 "트랙 4개" 기준으로 동일하게 이뤄지고, 카드는
       4장 찼을 때와 같은 폭을 유지한 채 왼쪽 트랙부터 채워지며 빈 트랙은 오른쪽에
       보이지 않게 남는다. */
    .ag-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }
    /* 2026-09-28(사용자 요청 "에이전트에서도 마찬가지?" — admin home_grid_cols 설정,
       추천매물/최신매물과 공통값 재사용). PC 전용 — agent.js가 모바일에서는 이
       data-cols 속성을 아예 심지 않으므로 위 max-width:768px 구간의 고정 1열 규칙이
       그대로 우선 적용된다. */
    .ag-grid[data-cols="5"] { grid-template-columns: repeat(5, 1fr); }
    .ag-grid[data-cols="6"] { grid-template-columns: repeat(6, 1fr); }

    /* 카드 — 마크업/기본 스타일은 공통모듈 property-card.css(.prop-card)를 그대로 쓰고,
       여기서는 그리드 배치와 목록형 화면에 맞는 오버라이드만 얹는다. */
    /* ⚠ .prop-card-h(모바일 가로형 카드, 정사각형 사진)는 여기서 제외 — 아래 height:180px
       고정은 데스크톱 세로형 그리드 카드 전용. 스코프를 안 좁히면 이 규칙이 소스 순서상
       property-card.css의 가로형 정사각형 규칙을 덮어써서 모바일 사진이 찌그러진다. */
    .ag-grid .prop-card:not(.prop-card-h) .prop-card-img { height: 180px; aspect-ratio: unset; }
    .ag-grid .prop-card-img img { object-position: center center; transition: transform .3s; }
    .ag-grid .prop-card:hover .prop-card-img img { transform: scale(1.04); }
    /* LIST 페이지 .lp-card.active와 완전히 동일한 선택 표시 (뒤로가기 시 방금 본 매물 강조) —
       box-shadow/텍스트색 추가효과 없이 border-color+background만. list.css .lp-card.active와
       한 글자도 다르지 않게 유지할 것 (다르면 두 화면에서 선택 카드가 다르게 보임). */
    .ag-grid .prop-card.active { border-color: #1a56db; background: #eff6ff; }

    /* 가격 앞 거래유형 글자 배지(매/전/보/월) — list.css .price-badge와 동일 규칙 */
    .price-badge {
      display: inline-block; font-size: 9px; font-weight: 800;
      padding: 1px 4px; border-radius: 4px; margin-right: 3px;
      vertical-align: 1px; line-height: 1.4;
    }
    .price-badge.badge-sale     { color: #dc2626; background: #fee2e2; }
    .price-badge.badge-jeonse   { color: #c2410c; background: #ffedd5; }
    .price-badge.badge-deposit,
    .price-badge.badge-monthly { color: #1a56db; background: #dbeafe; }
    /* 권리금은 매매가/보증금·월세보다 부수 정보이므로 라벨+금액 전체를 한 단계 작게 표시 */
    .price-premium-part { font-size: .74em; font-weight: 700; margin-left: 6px; }
    .price-premium-part .badge-premium { color: #dc2626; background: #fee2e2; }

    /* 빈 상태 */
    .ag-empty {
      grid-column: 1 / -1;
      text-align: center; padding: 80px 20px; color: #94a3b8;
    }
    .ag-empty svg { opacity: .3; margin-bottom: 16px; }
    .ag-empty p { font-size: 15px; }

    /* 로딩 */
    .ag-loading {
      grid-column: 1 / -1;
      text-align: center; padding: 80px 20px; color: #94a3b8;
      display: flex; flex-direction: column; align-items: center; gap: 12px;
    }
    .ag-spinner {
      width: 30px; height: 30px;
      border: 3px solid #e2e8f0; border-top-color: #1a56db;
      border-radius: 50%; animation: spin .7s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* 페이지네이션 (기존 번호 버튼 스타일 — 다른 화면에서 재사용될 수 있어 유지) */
    .ag-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 32px; flex-wrap: wrap; }
    .ag-page-btn {
      width: 34px; height: 34px; border-radius: 8px;
      border: 1.5px solid #e2e8f0; background: #fff;
      color: #475569; font-size: 13px; font-weight: 600;
      cursor: pointer; transition: all .15s;
    }
    .ag-page-btn:hover { border-color: #1a56db; color: #1a56db; }
    .ag-page-btn.active { background: #1a56db; border-color: #1a56db; color: #fff; }

    /* 무한스크롤 바닥 감지 sentinel(#ag-pagination을 그대로 재활용) — 평소엔 관찰용
       여백만 차지하다가, 다 불러오면 안내 문구로 바뀐다. */
    .ag-pagination.ag-scroll-status {
      min-height: 40px;
      align-items: center;
      color: #94a3b8;
      font-size: 13px;
    }
    .ag-pagination.ag-scroll-status.ag-scroll-end { color: #94a3b8; }

    /* ── 플로팅 버튼(STEP64: index.css와 동일 — 카카오/톡톡/유튜브/전화/맨위로) ── */
    .float-btns {
      position: fixed; right: 16px; bottom: 80px;
      display: flex; flex-direction: column; gap: 8px; z-index: 999;
    }
    .float-btn {
      width: 52px; height: 52px; border-radius: 12px;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      font-size: 10px; font-weight: 700; cursor: pointer;
      box-shadow: 0 3px 12px rgba(0,0,0,.2);
      text-decoration: none;
    }
    .float-talk    { background: #03c75a; color: #fff; }
    .float-blog    { background: #03c75a; color: #fff; } /* 네이버 블로그 — 톡톡과 동일 네이버 브랜드색 */
    .float-kakao   { background: #fee500; color: #3c1e1e; }
    .float-youtube { background: #ff0000; color: #fff; }
    .float-chat    { background: #1a56db; color: #fff; }
    .float-btn span { font-size: 18px; line-height: 1; margin-bottom: 2px; }
    .scroll-top-btn {
      background: rgba(30,30,50,.75); color: #fff; border: none;
      font-family: inherit; font-size: 10px;
    }
    .scroll-top-btn span { font-size: 18px; }
    .scroll-top-btn:hover { background: rgba(30,30,50,.9); }

    /* ── 개인정보 수집 안내 모달(STEP64: index.css에서 그대로 포팅) ── */
    .terms-modal-overlay {
      display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5);
      z-index: 2000; align-items: center; justify-content: center; padding: 16px;
    }
    .terms-modal-overlay.active { display: flex; }
    .terms-modal {
      background: #fff; border-radius: 8px; max-width: 480px; width: 100%;
      max-height: 84vh; display: flex; flex-direction: column; overflow: hidden;
    }
    .terms-modal-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 20px; border-bottom: 1px solid #eee;
    }
    .terms-modal-head h3 { font-size: 16px; font-weight: 800; color: #222; }
    .terms-modal-close {
      background: none; border: none; font-size: 20px; color: #999;
      cursor: pointer; line-height: 1; padding: 4px;
    }
    .terms-modal-body { padding: 18px 20px; overflow-y: auto; font-size: 13px; color: #444; line-height: 1.7; }
    .terms-modal-body h4 { font-size: 14px; font-weight: 800; color: #222; margin: 16px 0 8px; }
    .terms-modal-body h4:first-child { margin-top: 0; }
    .terms-modal-body ul { margin: 6px 0 0; padding-left: 18px; }
    .terms-modal-body li { margin-bottom: 4px; }
    .terms-modal-foot { padding: 14px 20px; border-top: 1px solid #eee; }
    .terms-modal-ok {
      width: 100%; padding: 11px; background: #e65c00; color: #fff;
      border: none; border-radius: 5px; font-size: 14px; font-weight: 700;
      cursor: pointer; font-family: inherit;
    }
    .terms-modal-ok:hover { background: #cc4f00; }

    /* ── 우측 "대표번호 CALL CENTER + 상담 신청" 위젯(STEP65: 왼쪽 사이드바(#sbm-mount)와
       똑같이 .ag-body-flex의 flex 컬럼으로 통합 — index.css의 .side-contact* 규칙 자체는
       그대로 포팅) ── */
    /* 2026-09-22(사용자 요청 — "스크롤해도 사이드바가 화면에 계속 노출되도록"): 왼쪽
       사이드바(#sbm-mount)와 동일한 방식 — 부모(#side-contact-mount)가 flex stretch로
       그리드 높이만큼 늘어나 있고, 그 안에서 실제 보이는 박스(.side-contact)만 sticky로
       붙인다. top 값은 왼쪽 사이드바와 동일하게(.ag-filter-bar 아래 여유 76px) 맞춰
       둘의 상단이 스크롤 중에도 나란히 유지되게 했다. */
    .side-contact { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 76px; }
    .side-callcard {
      background: #fff; border: 1px solid #e5e9f0; border-radius: 12px;
      padding: 16px; text-align: center;
      box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 6px 16px rgba(15,23,42,.05);
    }
    .side-callcard-label { font-size: 12px; color: #46536b; font-weight: 700; margin-bottom: 6px; }
    .side-callcard-label b { color: var(--color-accent-dark, #d9870b); font-weight: 800; }
    .side-callcard-number {
      display: block; font-size: 21px; font-weight: 800; color: var(--color-accent, #f9a21f);
      text-decoration: none; letter-spacing: -.3px; margin-bottom: 6px;
    }
    .side-callcard-sub { font-size: 11.5px; color: #8b96a8; }
    .side-inquiry {
      background: #fff; border: 1px solid #e5e9f0; border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 6px 16px rgba(15,23,42,.05);
    }
    .side-inquiry-title {
      background: var(--color-accent, #f9a21f); color: #fff; text-align: center;
      font-size: 14px; font-weight: 800; padding: 11px 0;
    }
    .side-inquiry-form { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
    .side-inquiry-input, .side-inquiry-textarea {
      width: 100%; border: 1px solid #e2e6ee; border-radius: 7px;
      padding: 9px 10px; font-size: 12.5px; color: #1c2534; background: #f9fafc;
      box-sizing: border-box; font-family: inherit;
    }
    .side-inquiry-textarea { min-height: 64px; resize: vertical; }
    .side-inquiry-input:focus, .side-inquiry-textarea:focus {
      outline: none; border-color: var(--color-accent, #f9a21f); background: #fff;
    }
    .side-inquiry-check-row {
      display: flex; align-items: center; justify-content: space-between; gap: 5px;
      font-size: 10px; color: #6b7688; white-space: nowrap;
    }
    .side-inquiry-check { display: flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }
    .side-inquiry-check input { width: 12px; height: 12px; flex-shrink: 0; accent-color: var(--color-accent, #f9a21f); }
    .side-inquiry-terms-btn {
      border: 1px solid #dde2ea; background: #fff; color: #6b7688;
      font-size: 10px; padding: 4px 7px; border-radius: 6px; cursor: pointer; flex-shrink: 0; white-space: nowrap;
    }
    .side-inquiry-submit {
      width: 100%; border: none; border-radius: 8px; padding: 11px 0;
      background: var(--color-accent, #f9a21f); color: #fff; font-size: 13.5px; font-weight: 800;
      cursor: pointer; transition: background .15s;
    }
    .side-inquiry-submit:hover { background: var(--color-accent-dark, #d9870b); }
    /* "지역별 매물" 카드(2026-10 신규) — .side-callcard/.side-inquiry와 동일한 흰 박스 톤을
       유지하되, 내용은 왼쪽 사이드바 메뉴(sidebar-menu.css .sbm-item)와 같은 컴팩트한
       목록형(index.css에 포팅한 것과 동일 규칙). */
    .side-region-card {
      background: #fff; border: 1px solid #e5e9f0; border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 6px 16px rgba(15,23,42,.05);
    }
    .side-region-title {
      background: var(--color-accent, #f9a21f); color: #fff; text-align: center;
      font-size: 14px; font-weight: 800; padding: 11px 0;
    }
    .side-region-list { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
    .side-region-item {
      display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 7px;
      font-size: 13px; color: #46536b; text-decoration: none; cursor: pointer;
      transition: background .12s, color .12s;
    }
    .side-region-item:hover { background: #f2f5f9; color: #1e293b; }
    /* 다중선택 체크 상태(2026-10) — 좌측 사이드바 메뉴(sidebar-menu.css .sbm-item.active)와
       동일한 톤으로 맞춘다. */
    .side-region-item.active {
      background: #fef3e2; color: var(--color-accent-dark, #d9870b); font-weight: 700;
      box-shadow: inset 0 0 0 1px rgba(249,162,31,.22);
    }
    .side-region-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .side-region-item-check { color: var(--color-accent, #f9a21f); font-size: 13px; flex-shrink: 0; }
    .side-region-item-chevron { color: #cbd5e1; font-size: 14px; flex-shrink: 0; }
    /* 왼쪽 사이드바(#sbm-mount)와 대칭되는 flex 컬럼 — 기본은 숨김, 1700px 이상에서만
       (STEP69: 인덱스와 동일한 임계값) .ag-content-bar 확장 규칙과 함께 보인다(위
       .ag-content-bar 블록 참고).
       버그수정(2026-09): 이 규칙에 display:none이 함께 있으면, 소스 순서상 이 규칙이
       위쪽 "@media (min-width:1700px) { #side-contact-mount{display:block;} }"보다
       뒤에 있어서 동일 특이도(#id 단독) 타이브레이크로 항상 이겨버려 — 1700px 이상에서도
       위젯이 계속 숨겨지고, 그 빈 자리만큼 .ag-content가 넓어져(1200→1440px) 매물카드
       그리드가 4열이 아니라 5열로 나오는 원인이었다. display:none을 이 규칙에서 빼고
       min-width:1700px와 겹치지 않는 max-width:1699px 전용 미디어쿼리로 옮겨서, 소스
       순서에 상관없이 항상 올바른 쪽만 적용되게 고쳤다(사이드바/그리드/위젯 폭 계산은
       그대로 — 위젯이 정상 표시되면 .ag-content가 다시 1200px로 돌아와 4열이 된다). */
    #side-contact-mount { flex: 0 0 220px; width: 220px; }
    @media (max-width: 1699px) {
      #side-contact-mount { display: none; }
    }

    @media (max-width: 768px) {
      /* ── 헤더 ── */
      /* ── 프로필 배너: 사진/성명/전화번호 한 줄 유지, 보유매물 배지는 그 줄 오른쪽 끝에 정사각형으로 ── */
      .ag-profile-banner { padding: 10px 12px; }
      .ag-profile-top { flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 10px; flex: 1 1 auto; width: 100%; }
      .ag-avatar-wrap { width: 64px; height: 64px; border-radius: 10px; }
      .ag-avatar-wrap .ag-avatar-emoji { font-size: 30px; }
      .ag-avatar-wrap .ag-avatar-logo-badge { width: 36px; height: 36px; border-radius: 10px; }
      .ag-avatar-wrap .ag-avatar-logo { width: 22px; height: 22px; }
      .ag-profile-info { flex: 1; min-width: 0; }
      .ag-profile-name {
        font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        margin: 0 0 2px;
      }
      .ag-profile-position { font-size: 9px; padding: 1px 7px; margin-bottom: 2px; }
      .ag-profile-role { font-size: 10px; margin-bottom: 2px; }
      .ag-profile-meta { gap: 6px; width: 100%; }
      .ag-profile-bio-wrap { display: none; } /* 모바일은 배너가 이미 촘촘해서 생략 */
      .ag-profile-categories { display: none; } /* STEP68: 취급분야 아이콘도 모바일에서 동일하게 생략 */
      .ag-profile-inner { min-height: 0; gap: 10px; }
      .ag-meta-item {
        font-size: 13px; width: auto;
        justify-content: flex-start; flex-wrap: nowrap;
      }
      #ag-phone-link { white-space: nowrap; flex-shrink: 0; font-size: 12px; }
      .ag-call-icon-btn { width: 22px; height: 22px; }
      .ag-call-icon-btn svg { width: 11px; height: 11px; }
      /* STEP68(v8)→STEP73: 모바일은 자기소개/취급분야가 숨겨지므로 섹터4(보유매물)
         카드가 섹터1 카드 바로 오른쪽(같은 줄)에 붙는다 — 간격은 .ag-profile-inner의
         gap(16px)이 담당하므로 여기서 더 안 더한다(예전 구분선 시절의 margin-left/
         padding-left는 카드 사이에 이중 여백을 만들어 제거). */
      .ag-profile-stats { display: none; } /* 모바일은 담당자카드만 노출 */

      /* 2026-09-22(사용자 요청 — "본매물로 열릴때 담당자카드를 줄이고 옆에 찜한매물/
         본매물(최근 본 매물) 개수를 배지처리"): 위 규칙(.ag-profile-stats 통째로 숨김)은
         일반 담당자 화면 기준이고, "본 매물"(mine=1) 대시보드로 들어온 경우에는
         agent.js가 .ag-profile-banner에 붙여주는 .is-mine-mode 클래스로 이 규칙만
         되살려서 찜/최근본 개수를 작은 배지로 보여준다. 담당자카드(.ag-profile-top)는
         이 모드에서 이름 배지 하나만 있어도 되므로(전화번호는 애초에 isMine 모드에서
         agent.js가 숨김) 아바타/이름을 더 작게 줄인다. */
      .ag-profile-banner.is-mine-mode .ag-profile-top {
        padding: 6px 10px; gap: 8px; flex: 0 1 auto;
      }
      .ag-profile-banner.is-mine-mode .ag-avatar-wrap { width: 38px; height: 38px; border-radius: 8px; }
      .ag-profile-banner.is-mine-mode .ag-avatar-wrap .ag-avatar-emoji { font-size: 18px; }
      .ag-profile-banner.is-mine-mode .ag-profile-name { font-size: 13px; margin-bottom: 0; }
      .ag-profile-banner.is-mine-mode .ag-profile-role { display: none; }
      .ag-profile-banner.is-mine-mode .ag-profile-inner { min-height: 0; }
      .ag-profile-banner.is-mine-mode .ag-profile-stats {
        display: flex; flex-shrink: 0; margin-left: auto;
        background: none; border: none; box-shadow: none; gap: 6px;
      }
      /* 4번째(전체매물)/배지 칸은 isMine 모드에서 애초에 안 씀 — 배지 2개(찜/본매물)만 */
      .ag-profile-banner.is-mine-mode #ag-stat-all,
      .ag-profile-banner.is-mine-mode #ag-stat-badges-box { display: none !important; }
      /* 네모난 아이콘 배지 — 라벨 텍스트 대신 아이콘(찜:하트/본매물:눈) 하나로 의미 전달 */
      .ag-profile-banner.is-mine-mode .ag-stat-box {
        min-width: 0; width: 52px; height: 52px; padding: 0;
        background: #eaf1fd; border: 1px solid #d3e3fb; border-radius: 12px;
        flex-direction: column; align-items: center; justify-content: center; gap: 2px;
      }
      .ag-profile-banner.is-mine-mode .ag-stat-icon {
        display: block; font-size: 17px; color: #1a56db; line-height: 1;
      }
      .ag-profile-banner.is-mine-mode .ag-stat-num { font-size: 12px; font-weight: 800; color: #1a56db; line-height: 1; }
      .ag-profile-banner.is-mine-mode .ag-stat-label { display: none; } /* 아이콘이 라벨을 대신함 */
      .ag-profile-banner.is-mine-mode .ag-stat-box.active { background: #1a56db; border-color: #1a56db; }
      .ag-profile-banner.is-mine-mode .ag-stat-box.active .ag-stat-icon,
      .ag-profile-banner.is-mine-mode .ag-stat-box.active .ag-stat-num { color: #fff; }

      /* ── 필터바: 검색줄 + 정렬줄만 "제자리에 있다가 스크롤이 그 지점에 닿으면"
         상단에 고정, 매물종류/거래유형/금액/면적 버튼 줄은 그 사이에서 같이
         스크롤되어 사라짐 ──
         ⚠ position:sticky는 상위 어딘가(base.css의 body/html overflow-x:hidden 등)에
         overflow가 걸리면 조용히 무효화되어 "처음부터 안 고정되고 다 같이
         스크롤되는" 현상이 생길 수 있어, 그 대신 agent.js가 스크롤 위치를 직접
         감지해 원래 위치에 도달했을 때만 .is-pinned 클래스(position:fixed)를
         붙였다 뗐다 하는 방식(pseudo-sticky)으로 구현한다. 고정되는 순간 문서
         흐름에서 빠지는 만큼, 바로 앞에 자동 생성되는 스페이서(.ag-search-spacer /
         .ag-sort-spacer)가 그 높이만큼 자리를 대신 차지해 레이아웃이 들썩이지
         않게 한다. */
      .ag-filter-bar { position: static; box-shadow: none; border-bottom: none; }
      .ag-filter-inner {
        padding: 0; gap: 0;
        flex-wrap: wrap;
      }
      .ag-search-spacer { order: 0; flex: 1 1 100%; width: 100%; height: 0; }
      .ag-search-group {
        order: 1; flex: 1 1 100%; gap: 6px;
        background: #fff;
        padding: 10px 14px;
        border-bottom: 1px solid #e2e8f0;
      }
      .ag-search-group.is-pinned {
        position: fixed; top: 0; left: 0; right: 0; z-index: 200;
        box-shadow: 0 1px 4px rgba(0,0,0,.05);
      }
      .ag-search-wrap { width: auto; flex: 1; min-width: 0; }
      .ag-search-wrap input { font-size: 16px; } /* iOS 자동 확대 방지 */
      .ag-search-btn, .ag-filt-reset-icon { flex-shrink: 0; }
      /* 캡슐(.sf-dd-group)과 버튼 크기/가로채움은 search-filters.css 쪽
         .sf-dd-group 규칙(모바일 미디어쿼리)이 담당 — 가로 스크롤 대신
         화면폭에 꽉 차게 flex:1로 분배한다. */
      .ag-filter-group {
        order: 2; width: 100%;
        flex-wrap: nowrap; gap: 6px;
        padding: 8px 14px;
      }
      .ag-sort-spacer { order: 3; flex: 1 1 100%; width: 100%; height: 0; }
      .ag-sort-tabs {
        order: 4; margin-left: 0; width: 100%;
        background: #fff;
        padding: 6px 14px;
        border-top: 1px solid #e2e8f0;
        border-bottom: 1px solid #e2e8f0;
      }
      .ag-sort-tabs.is-pinned {
        position: fixed; top: var(--ag-search-h, 54px); left: 0; right: 0; z-index: 200;
        box-shadow: 0 1px 4px rgba(0,0,0,.05);
      }


      /* 드롭다운 패널: 화면 중앙 고정으로 전환 (좌측 기준 absolute는 모바일에서 화면 밖으로 잘림) */
      .ag-dropdown {
        position: fixed;
        top: auto; bottom: 0; left: 0; right: 0;
        width: 100%; min-width: 0; max-width: none;
        border-radius: 16px 16px 0 0;
        max-height: 70vh; overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: 0 -8px 32px rgba(0,0,0,.25);
        padding: 18px 16px 14px;
      }
      .ag-type-grid { grid-template-columns: repeat(3, 1fr); }

      /* ── 결과/그리드: list.html 사이드바 카드와 동일한 톤 —
         가로형(사진 왼쪽 고정폭 + 설명 오른쪽) 1열, 화면 좌우 여백 없이 꽉 채우고
         카드는 완전 풀블리드(radius/그림자 없이 얇은 구분선으로만 분리).
         카드 마크업/사진 정사각형 처리는 이제 property-card.css(.prop-card-h,
         buildPropCard(p,{layout:'horizontal'}))가 담당 — 여기서는 그리드 컨테이너와
         카드 컨테이너의 풀블리드 톤만 지정한다. */
      /* .ag-body-flex .ag-content(2클래스)가 위에서 padding을 이미 선언해뒀기 때문에,
         이 폭에서 풀블리드로 바꾸려면 같은(또는 더 높은) 우선순위로 다시 덮어써야 한다 —
         아래 .ag-body-flex .ag-content가 그 역할. 위/아래 여백은 .ag-content-bar-top/-bottom이
         맡고, 그리드 자체는 상하좌우 0(완전 풀블리드)으로 비운다. */
      .ag-body-flex .ag-content { padding: 0; }
      .ag-content-bar { max-width: none; padding-left: 0; padding-right: 0; }
      .ag-content-bar-top { padding-top: 18px; }
      .ag-content-bar-bottom { padding-bottom: 40px; }
      .ag-result-bar { margin-bottom: 12px; padding: 0 14px 10px; }
      .ag-pagination { padding: 0 14px; }
      .ag-grid { grid-template-columns: 1fr; gap: 0; }
      .ag-grid .prop-card {
        border-radius: 0;
        border: none;
        border-bottom: 1px solid #f1f5f9;
        box-shadow: none;
      }
      .ag-grid .prop-card:hover { transform: none; box-shadow: none; }
      .ag-grid .prop-card:active { background: #f8fafc; }

      /* 2026-09-28(사용자 리포트 "모바일에서 에이전트에서는 유튜브,카카오 등등 사이드바
         뜰필요 없어"): 상단바에 전화/문자 아이콘, 하단 탭바에 "연락하기"가 이미 있어
         이 플로팅 버튼 묶음(톡톡/블로그/카카오/유튜브/전화/맨위로) 전체가 중복이다.
         모바일에서는 통째로 숨긴다(데스크톱/index.html은 기존 그대로 유지). */
      .float-btns { display: none; }

      .terms-modal { max-height: 88vh; }
      .terms-modal-head { padding: 14px 16px; }
      .terms-modal-body { padding: 16px; font-size: 12.5px; }
      .terms-modal-foot { padding: 12px 16px; }
    }

    @media (max-width: 480px) {
      .ag-profile-banner { padding: 8px 10px; }
      .ag-avatar-wrap { width: 52px; height: 52px; }
      .ag-avatar-wrap .ag-avatar-emoji { font-size: 24px; }
      .ag-avatar-wrap .ag-avatar-logo-badge { width: 30px; height: 30px; border-radius: 8px; }
      .ag-avatar-wrap .ag-avatar-logo { width: 18px; height: 18px; }
      .ag-profile-name { font-size: 13px; }
      .ag-profile-stats { gap: 4px; }
      .ag-stat-box { width: 48px; height: 48px; padding: 0; }
      .ag-stat-num { font-size: 13px; }
      .ag-stat-label { font-size: 7px; }
      /* 2026-09-22: 4번째 칸(#ag-stat-badges-box)이 #ag-stat-all 밖으로 분리되면서,
         내용(.ag-stat-breakdown)만 숨기면 빈 박스가 자리를 차지해 보이므로 박스 자체를 숨긴다. */
      .ag-stat-badges-box { display: none !important; }

      .ag-pagination { gap: 4px; }
      .ag-page-btn { width: 30px; height: 30px; font-size: 12px; }

      /* .float-btns는 768px 이하에서 이미 display:none이라 여기의 위치/크기 조정은
         무의미해서 제거(2026-09-28) */

      .terms-modal-overlay { padding: 10px; align-items: flex-end; }
      .terms-modal { max-height: 90vh; border-radius: 12px 12px 0 0; }
      .terms-modal-body { padding: 14px 16px; font-size: 12px; }
      .terms-modal-body h4 { font-size: 13px; }
    }

/* ════════════════════════════════════════════════════════════════
   2026-09-23(사용자 요청): 상단 배너 → 이름·전화 한 줄 슬림바 / 우측 담당자 카드
   위쪽의 예전 배너(4칸 카드) 규칙들을 하나하나 지우지 않고, 여기서 .ag-slimbar /
   .ag-agent-card 기준으로 덮어쓴다(파일 맨 끝 + 더 높은 특이도라 모든 폭에서 이긴다).
   ════════════════════════════════════════════════════════════════ */

/* ── 슬림 상단바 ── */
.ag-profile-banner.ag-slimbar { padding: 0 24px; background: #fff; border-bottom: 1px solid #e5e9f0; }
.ag-slimbar .ag-profile-inner {
  min-height: 0; height: 48px; gap: 12px; align-items: center;
}
.ag-slimbar .ag-slim-main { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 auto; }
.ag-slimbar .ag-profile-name {
  font-size: 16px; font-weight: 800; color: #1a1f3c; margin: 0; letter-spacing: -.3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.ag-slimbar .ag-profile-position,
.ag-slimbar .ag-profile-role { display: none !important; }   /* 직책/역할은 카드에서 표시 */
.ag-slimbar .ag-meta-item { font-size: 15px; gap: 6px; flex-shrink: 0; }
.ag-slimbar #ag-phone-link { font-size: 15px; padding: 0; }
.ag-slimbar .ag-call-icon-btn { width: 24px; height: 24px; box-shadow: none; }
.ag-slimbar .ag-call-icon-btn svg { width: 12px; height: 12px; }

/* 보유매물 칸은 담당자 카드로 이동 — 바의 stats 영역은 찜/최근본(mine=1) 화면에서만 사용 */
.ag-slimbar #ag-stat-all { display: none !important; }
.ag-slimbar:not(.is-mine-mode) .ag-profile-stats { display: none; }
.ag-profile-banner.ag-slimbar .ag-profile-stats {
  margin-left: auto; background: none; border: none; box-shadow: none; gap: 6px; overflow: visible;
}
.ag-profile-banner.ag-slimbar .ag-stat-box {
  flex-direction: row; align-items: center; gap: 5px;
  width: auto; height: 32px; min-width: 0; padding: 0 12px;
  background: #f1f5fb; border: 1px solid #dbe5f3; border-radius: 16px;
}
.ag-profile-banner.ag-slimbar .ag-stat-box + .ag-stat-box { border-left: 1px solid #dbe5f3; }
.ag-profile-banner.ag-slimbar .ag-stat-icon { display: block; font-size: 16px; color: #1a56db; }
.ag-profile-banner.ag-slimbar .ag-stat-num { font-size: 13px; font-weight: 800; color: #1a56db; line-height: 1; }
.ag-profile-banner.ag-slimbar .ag-stat-label { display: block; font-size: 12px; margin: 0; color: #475569; }
.ag-profile-banner.ag-slimbar .ag-stat-box.active { background: #1a56db; border-color: #1a56db; }
.ag-profile-banner.ag-slimbar .ag-stat-box.active .ag-stat-icon,
.ag-profile-banner.ag-slimbar .ag-stat-box.active .ag-stat-num,
.ag-profile-banner.ag-slimbar .ag-stat-box.active .ag-stat-label { color: #fff; }

/* "담당자 정보" 버튼 — 우측 사이드바가 없는 폭(1700px 미만)에서만, 찜·최근본 화면에선 숨김 */
.ag-slim-info-btn {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  height: 32px; padding: 0 12px; border: 1px solid #dbe5f3; border-radius: 16px;
  background: #f1f5fb; color: #1a56db; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.ag-slim-info-btn .material-symbols-outlined { font-size: 17px; }
.ag-slim-info-chev { font-size: 11px; transition: transform .2s; }
.ag-profile-banner.card-open .ag-slim-info-chev { transform: rotate(180deg); }
.ag-profile-banner.card-open .ag-slim-info-btn { background: #1a56db; border-color: #1a56db; color: #fff; }
.ag-slimbar.is-mine-mode .ag-slim-info-btn { display: none; }
@media (min-width: 1700px) { .ag-slim-info-btn { display: none; } }
/* 2026-09(사용자 요청 "상단 담당자카드 탭 자체를 제거"): 1700px 이상에서는 같은 이름/전화번호가
   우측 담당자 카드(#ag-agent-card, .side-contact)에 이미 보이므로 상단 바 전체를 없앤다
   (일반 화면 한정 — 찜/최근본 탭이 있는 mine=1 대시보드 모드는 그대로 유지).
   1700px 미만은 이 바가 유일한 접근 경로라 그대로 유지. */
@media (min-width: 1700px) { .ag-slimbar:not(.is-mine-mode) { display: none; } }

/* 1700px 미만: 버튼을 누르면 바 아래로 카드가 펼쳐지는 슬롯 */
.ag-inline-card-slot { display: none; max-width: 1200px; margin: 0 auto; padding: 0 0 12px; }
.ag-profile-banner.card-open .ag-inline-card-slot { display: block; }
.ag-slimbar.is-mine-mode .ag-inline-card-slot { display: none !important; }
.ag-inline-card-slot .ag-agent-card { max-width: 460px; margin-left: auto; }

/* ── 우측 담당자 카드 ── */
.ag-agent-card {
  background: #fff; border: 1px solid #e5e9f0; border-radius: 12px; padding: 14px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 6px 16px rgba(15,23,42,.05);
}
body.ag-mine-mode .ag-agent-card { display: none; }
/* 대표번호 카드는 담당자 카드가 없는 찜·최근본 화면에서만 */
body:not(.ag-mine-mode) .side-callcard { display: none; }

/* 2026-09-26(사용자 요청 "회사카드도 표시 미표시 토글" → "에이전트는 그냥 나눠") — admin
   "🖥️ 화면 설정 > 🪪 에이전트 담당자 카드"(agent_card_sections)에서 구성요소별로 껐을 때
   숨긴다. !important를 쓰는 이유: renderProfile()/renderAgentStatBreakdown() 등이 담당자를
   바꿀 때마다 인라인 style.display를 다시 세팅하는데(내용 유무에 따른 자체 표시/숨김
   로직), body 클래스 기반 CSS로 처리해야 그 재렌더링 이후에도 관리자 설정이 계속
   이긴다(agent.js가 body 클래스만 최초 1회 세팅). */
body.agent-card-hide-top #ag-agent-card .ag-card-top { display: none !important; }
body.agent-card-hide-stats #ag-agent-card #ag-stat-badges-box { display: none !important; }
body.agent-card-hide-bio #ag-card-toggle-bio { display: none !important; }
body.agent-card-hide-bio #ag-card-panel-bio { display: none !important; }
body.agent-card-hide-categories #ag-card-toggle-cat { display: none !important; }
body.agent-card-hide-categories #ag-card-panel-cat { display: none !important; }
body.agent-card-hide-bio.agent-card-hide-categories #ag-agent-card .ag-card-toggles { display: none !important; }

.ag-card-top { display: flex; align-items: center; gap: 12px; }
.ag-agent-card .ag-avatar-wrap {
  width: 60px; height: 68px; border-radius: 10px; box-shadow: 0 2px 6px rgba(15,23,42,.1);
}
.ag-agent-card .ag-avatar-wrap .ag-avatar-emoji { font-size: 28px; }
.ag-agent-card .ag-avatar-wrap .ag-avatar-logo-badge { width: 38px; height: 38px; border-radius: 10px; }
.ag-agent-card .ag-avatar-wrap .ag-avatar-logo { width: 22px; height: 22px; }
.ag-card-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ag-card-name { font-size: 16px; font-weight: 800; color: #1a1f3c; letter-spacing: -.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-card-position { font-size: 12px; font-weight: 600; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-card-position:empty { display: none; }
.ag-card-phone {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; width: fit-content;
  font-size: 14px; font-weight: 800; color: #1a56db; text-decoration: none; white-space: nowrap;
}
.ag-card-phone svg { flex-shrink: 0; color: #22c55e; }
.ag-card-phone:hover { text-decoration: underline; }

/* 보유매물 한 줄 — "보유매물  전체 24 · 매매 10 · 월세 8" */
.ag-card-listings {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid #f1f5f9;
  font-size: 11.5px; color: #64748b;
}
.ag-card-listings-label { font-weight: 700; color: #334155; margin-right: 2px; }
.ag-card-listings .ag-stat-breakdown,
.ag-card-listings-badges { display: inline-flex; flex-direction: row; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; border: none; }
.ag-card-listings .ag-stat-badge { background: none; border: none; padding: 0; font-size: 11.5px; font-weight: 600; color: #475569; }
.ag-card-listings .ag-stat-badge b { font-weight: 600; color: #94a3b8; margin-right: 3px; }
.ag-card-listings .ag-stat-badge:first-child { color: #1a56db; font-weight: 800; }

/* 소개 / 취급분야 토글 */
.ag-card-toggles { display: flex; gap: 6px; margin-top: 10px; }
.ag-card-toggle {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  height: 30px; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc;
  font-family: inherit; font-size: 12px; font-weight: 700; color: #475569; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.ag-card-toggle:hover { border-color: #c7d6ee; color: #1a56db; }
.ag-card-toggle.open { background: #eaf1fd; border-color: #c7d6ee; color: #1a56db; }
.ag-card-toggle-chev { font-size: 10px; transition: transform .2s; }
.ag-card-toggle.open .ag-card-toggle-chev { transform: rotate(180deg); }

.ag-card-panel { display: none; margin-top: 8px; }
.ag-card-panel.open { display: block; }

/* 카드 안으로 옮겨온 소개/취급분야 — 예전 배너 카드 스타일(배경/테두리/고정높이)을 걷어낸다.
   모바일 미디어쿼리의 display:none(숨김)도 여기서 되살린다. JS가 내용이 없을 때 거는
   인라인 display:none은 그대로 우선하므로 빈 섹션은 계속 숨겨진다. */
.ag-agent-card .ag-profile-bio-wrap,
.ag-agent-card .ag-profile-categories {
  display: block; min-width: 0; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 10px;
  box-shadow: none; padding: 10px 12px;
}
.ag-agent-card .ag-bio-quote,
.ag-agent-card .ag-cat-heading,
.ag-agent-card .ag-bio-more { display: none !important; }
.ag-agent-card .ag-profile-bio {
  display: block; -webkit-line-clamp: unset; overflow-y: auto; max-height: 260px;
  font-size: 12.5px; line-height: 1.7; color: #334155;
}
.ag-agent-card .ag-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 6px; }
.ag-inline-card-slot .ag-agent-card .ag-cat-grid { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }

@media (max-width: 768px) {
  .ag-profile-banner.ag-slimbar { padding: 0 12px; }
  .ag-slimbar .ag-profile-inner { height: 44px; gap: 8px; }
  .ag-slimbar .ag-slim-main { gap: 8px; }
  .ag-slimbar .ag-profile-name { font-size: 14px; }
  .ag-slimbar .ag-meta-item, .ag-slimbar #ag-phone-link { font-size: 13px; }
  .ag-slimbar .ag-call-icon-btn { width: 22px; height: 22px; }
  .ag-slim-info-btn { padding: 0 10px; height: 30px; }
  .ag-slim-info-label { display: none; }            /* 폰: 아이콘 + ▾만 */
  .ag-profile-banner.ag-slimbar .ag-stat-label { display: none; }  /* 찜/최근본은 아이콘+숫자만 */
  .ag-profile-banner.ag-slimbar .ag-stat-box { padding: 0 10px; height: 30px; }
  .ag-inline-card-slot { padding-bottom: 10px; }
  .ag-inline-card-slot .ag-agent-card { max-width: none; }
}

/* 2026-10: 플로팅 버튼 왼쪽 배치(admin 화면설정 "📌 플로팅 버튼" → _applyFloatLayout) */
.float-btns.float-left { right: auto; left: 16px; }