/* =========================================================
   Lawyer List — compact, deduped
   ========================================================= */

/* Tokens & layout vars */
:root{
  --brand:#2A6CF0; --ink:#0F172A; --muted:#64748b; --line:#CBD5E1; --bg:#fff;
  --chip-bg-neutral:#F1F5F9; --chip-ink-neutral:#0F172A; --chip-border-neutral:#E2E8F0;

  /* list layout */
  --avatar-pc:150px;      /* PC 프로필 이미지 */
  --avatar-mb:100px;      /* 모바일 프로필 이미지 */
  --card-gap:16px;
  --card-vpad:24px;

  /* font stack */
  --ko-apple-stack:'Apple SD Gothic Neo','AppleSDGothicNeo','Noto Sans KR','Malgun Gothic',
                   -apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}

/* Scope-local font override(전역 Spoqa 등을 덮기) */
body .pc_wrap .list-wrap,
body .pc_wrap .list-wrap *,
body .mobile_wrap .list-wrap,
body .mobile_wrap .list-wrap *,
body .lawyer-card,
body .lawyer-card *{
  font-family:var(--ko-apple-stack)!important;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  letter-spacing:.005em; line-height:1.35;
}


/* ✅ PC/모바일 마크업이 둘 다 렌더링되므로 화면폭으로 1개만 보이게 강제 */
.mobile_wrap { display: none !important; }   /* 기본: PC에서는 모바일 숨김 */


body{ background:#fff; }
.pc_wrap{ display:block; padding-top:160px!important; }
.list-wrap{ max-width:900px; margin:0 auto; padding:0 16px 100px; }

/* Section title */
.section-title{
  font-size:18px; font-weight:600; color:var(--ink);
  padding:30px 2px 16px; display:flex; align-items:center; gap:8px;
}
.section-title::before{ content:""; width:4px; height:18px; background:var(--brand); border-radius:2px; }

/* ----------------------------------------------
   Category bar (tabs skin, 모바일 대응 포함)
---------------------------------------------- */

@media (max-width:700px){


  .list-wrap {
    padding-top: 140px;
  }
}

/* ----------------------------------------------
   Chips
---------------------------------------------- */
.lc__chips,.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 10px; border-radius:9999px;
  background:var(--chip-bg-neutral); color:var(--chip-ink-neutral);
  border:1px solid var(--chip-border-neutral);
  font-size:13px; font-weight:500; line-height:1; white-space:nowrap;
}
.chip:hover{ background:#EEF2F7; border-color:#CBD5E1; }
@media (max-width:700px){ .chip{ font-size:12px; padding:5px 9px; } }


/* ★ 분야 칩 1줄만 노출 (PC/모바일 공통) */
.lawyer-card .lc__chips{
  flex-wrap: nowrap;
  overflow: hidden;
}

/* ----------------------------------------------
   Lawyer card (list형 3열: 아바타-본문-CTA)
---------------------------------------------- */
.lawyer-card{
  display:grid;
  grid-template-columns: var(--avatar-pc) minmax(0, 1fr) auto;
  gap:var(--card-gap);
  align-items:center;                   /* 본문 수직 가운데 */
  padding:var(--card-vpad) 16px;
  margin:0!important;
  border:0!important; border-radius:0!important; box-shadow:none!important;
  background:#fff;
  min-height:calc(var(--avatar-pc) + (var(--card-vpad) * 2));
  cursor:pointer;
}
/* 항목 사이 구분선 */
.lawyer-card + .lawyer-card{ border-top:1px solid var(--line)!important; }
/* hover */

/* grid 배치 */
.lawyer-card > :first-child{ grid-column:2; grid-row:1; min-width: 0;} /* 본문 */
.lawyer-card .lc__right{ display:contents; }              /* wrapper 제거 */
.lawyer-card .lc__avatar{
  grid-column:1; grid-row:1;
  width:var(--avatar-pc)!important; height:var(--avatar-pc)!important;
  min-width:var(--avatar-pc); min-height:var(--avatar-pc);
  border-radius:50%; object-fit:cover; object-position:center;
  justify-self:center; align-self:center;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  border:2px solid #fff; background:#dbe2ef;
}
.lawyer-card .lc__cta{
  grid-column:3; grid-row:1;
  justify-self:end; align-self:center; min-width:120px; height:36px;
}

/* 반응형: 2열 + CTA는 본문 아래 */
@media (max-width:900px){
  .lawyer-card{
    grid-template-columns:var(--avatar-mb) 1fr;
    gap:14px; min-height:calc(var(--avatar-mb) + (var(--card-vpad) * 2));
    align-items:start;
    padding-left: 0;
    padding-right: 0;
    grid-template-columns: var(--avatar-mb) minmax(0, 1fr);
  }
  .lawyer-card .lc__avatar{
    width:var(--avatar-mb)!important; height:var(--avatar-mb)!important;
    min-width:var(--avatar-mb); min-height:var(--avatar-mb);
  }
  .lawyer-card .lc__cta{ grid-column:2; grid-row:2; justify-self:end; margin-top:8px; }
}

/* Card text blocks */
.lc__office{ color:#6b7280; font-size:13px; margin-bottom:6px; font-weight:600;   white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;}
.lc__title{ display:flex; align-items:baseline; gap:8px; margin:0 0 6px; }
.lc__name{ font-size:18px; font-weight:700; color:var(--ink); }
.lc__bio{
  color:#374151; font-size:14px; margin:4px 0 8px; font-weight:400;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;
}

/* ----------------------------------------------
   Badges & CTA
---------------------------------------------- */
/* 빠른상담 배지: 배경 제거, 대표색만 */
.badge-fast{
  display:inline-flex; align-items:center; gap:4px;
  height:22px; padding:0 8px; font-size:12px; font-weight:700; line-height:1; white-space:nowrap; flex-shrink:0;
  background:transparent!important; color:#2A6CF0 !important; border:0; box-shadow:none;
}
.badge-fast svg{ width:14px; height:14px; flex:0 0 auto; color:currentColor; fill:currentColor; }
.badge-fast:hover{ background:rgba(42,108,240,.06); }
.badge-fast:focus-visible{ outline:2px solid rgba(42,108,240,.35); outline-offset:2px; }

.lc__cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 14px; border-radius:10px;
  background:#2A6CF0!important;  /* 아래 “변호사 상담 받기”와 동일색 */
  color:#fff!important;
  font-weight:700; font-size:13px; border:1px solid transparent; text-decoration:none !important;
  box-shadow:none;                /* 그림자도 제거해서 안 떠오르게 */
}
.lc__cta:hover{  /* 밝기 변화 제거 */
  filter:none;
}
.lc__cta:active{ /* 눌렀을 때 y축 이동 제거 */
  transform:none;
}
/* 포커스 아웃라인은 그대로 두는 게 접근성상 좋음 */
.lc__cta:focus-visible{
  outline:2px solid rgba(42,108,240,.4);
  outline-offset:2px;
}
/* ----------------------------------------------
   Empty state
---------------------------------------------- */
.suggest{ margin-top:18px; border:1px solid #DCE7F9; background:#F3F8FF; border-radius:14px; padding:18px; }
.suggest .s-hd{ color:#0f766e; font-weight:800; margin-bottom:6px; font-size:14px; }
.suggest .s-tt{ color:#0b5fd3; font-weight:900; font-size:16px; }


/* 1) 헤더가 항상 최상위 (PC/Mobile 모두 커버) */
.pc_wrap .pc_newhead_2,
.pc_wrap .basic_sd_top,
.pc_wrap .mcnsall_top,
.mobile_wrap .basic_sd_top,
.mobile_wrap .mcnsall_top,
.site-header{
  position: relative;   /* z-index 적용을 위해 반드시 필요 */
  z-index: 10;        /* 헤더 레이어 최상단 */
}




/* 3) 리스트 항목은 기본 레이어 (불필요한 stacking context 제거) */
.lawyer-card{
  position: relative;   /* 필요시 */
  z-index: 1;           /* 헤더보다 낮음 */
}
.lawyer-card:hover{
  transform: none;      /* transform이 있으면 자체 스택이 생겨 헤더를 덮을 수 있음 */
}

/* (상세 페이지 히어로가 있다면) 히어로는 헤더보다 낮게 */
.hero, .hero-banner{ position: relative; z-index: 0; }
.hero-card{ position: relative; z-index: 1; } /* 배너 위로만 */


.section-card.lawyer-reco-block {
  background:#fff !important;   /* 이미 쓰고 있으면 그대로 두고 */
  border:none !important;       /* 테두리만 제거 */
  box-shadow:none;              /* 필요하면 그림자도 같이 제거 */

  background:#fff !important;
  padding-left: 0;
  padding-right: 0;
}


/* 기본(PC): 사진 아래 뱃지는 숨김 */
.badge-fast--under { display: none; }

/* 모바일에서만: 이름 옆 뱃지는 숨기고, 사진 아래 뱃지는 노출 */
@media (max-width: 768px) {
  .mobile_wrap .badge-fast--inline { display: none !important; }
  .mobile_wrap .lawyer-card .badge-fast--under{
    display: inline-flex !important;
    grid-column: 1;        /* 아바타 컬럼 */
    grid-row: 2;           /* 아바타 아래 줄(CTA와 같은 row) */
    justify-self: center;  /* 핵심: 컬럼 안에서 가운데 */
    width: max-content;    /* 내용만큼만 */
  
  }


    .pc_wrap { display: none !important; padding-top: 0 !important; } /* 모바일에서 PC 숨김 */
  .mobile_wrap { display: block !important; }                       /* 모바일에서 모바일만 노출 */

}

/* ----------------------------------------------
   Category bar (Hybrid: PC 줄바꿈 / Mobile 스크롤+Fade)
---------------------------------------------- */
.catbar {
    position: sticky;
    top: 64px;
    z-index: 15;
    background: var(--bg); /* #fff */
    margin: 0;             /* 여백 초기화 */
    padding: 10px 0;       /* 상하 여백 */
    /* border-bottom: 1px solid var(--line); <- 버튼형일 때는 밑줄이 없는 게 더 깔끔할 수 있어 주석 처리하거나 필요 시 유지 */
}

/* PC 기본: 줄바꿈(Wrap) 허용하여 한눈에 보기 */
.catbar__scroller {
    display: flex;
    flex-wrap: wrap;       /* PC: 줄바꿈 허용 */
    gap: 8px;              /* 버튼 사이 간격 */
    padding: 0 12px;
}

/* ★ 버튼 스타일 (캡슐형) ★ */
.catbar .cat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
    font-weight: 500;
    font-size: 15px;
    
    /* 캡슐 버튼 디자인 */
    color: #6B7280;        /* 회색 텍스트 */
    background: #ffffff;   /* 흰색 배경 */
    border: 1px solid #E5E7EB; /* 회색 테두리 */
    border-radius: 100px;  /* 둥근 모서리 */
    padding: 8px 16px;     /* 내부 여백 */
    
    transition: all 0.2s ease;
}

/* 마우스 올렸을 때 */
.catbar .cat:hover {
    background: #F9FAFB;
    border-color: #D1D5DB;
    color: #111827;
}

/* ★ 활성화(Active) 상태: 파란색 배경 + 흰색 글씨 ★ */
.catbar .cat.is-active {
    background: var(--brand); /* #2A6CF0 */
    border-color: var(--brand);
    color: #ffffff;
    font-weight: 600;
}

/* 기존 밑줄 제거 (버튼형이므로 불필요) */
.catbar .cat.is-active::after {
    display: none;
}

/* ----------------------------------------------
   Mobile Only: 가로 스크롤 + 우측 Fade 효과
---------------------------------------------- */
@media (max-width: 768px) {
    .catbar {
        top: 56px;           /* 모바일 헤더 높이 대응 */
        margin: 0 0 8px;
        padding: 0;
        overflow: hidden;    /* 페이드 영역 밖 정리 */
    }

    .catbar__scroller {
        flex-wrap: nowrap !important; /* 모바일: 줄바꿈 금지 */
        overflow-x: auto;             /* 가로 스크롤 */
        -webkit-overflow-scrolling: touch;
        gap: 6px;                     /* 간격 조금 좁힘 */
        padding: 12px 0px;           /* 터치 여백 확보 */
        padding-right: 20px;          /* 우측 페이드 영역 확보 */
        
        /* 스크롤바 숨김 */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .catbar__scroller::-webkit-scrollbar { display: none; }

    .catbar .cat {
        font-size: 14px;
        padding: 7px 14px; /* 모바일용 패딩 조정 */
    }
    
    /* ★ 우측 흐릿한 효과 (Fade Gradient) ★ */
    /* 버튼 뒤로 글씨가 사라지는 효과 */
    .catbar::after {
        content: "";
        position: absolute;
        top: 0; bottom: 0; right: 0;
        width: 40px;
        /* 배경색(#fff)으로 자연스럽게 사라짐 */
        background: linear-gradient(to right, rgba(255,255,255,0), #fff);
        pointer-events: none; /* 클릭 통과 */
        z-index: 20;
    }
}

/* ----------------------------------------------
   Chips (오른쪽 흐림 효과 적용)
---------------------------------------------- */
.lc__chips, .chips {
    display: flex;
    flex-wrap: nowrap !important; /* 줄바꿈 방지 (한 줄로) */
    gap: 8px;
    
    /* 넘치는 내용 숨김 & 페이드 기준점 설정 */
    overflow: hidden;
    position: relative;
    padding-right: 20px; /* 페이드 영역 밑에 글자가 겹치지 않도록 여백 확보 */
}

/* 개별 칩 스타일 (기존 유지) */
.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 9999px;
    background: var(--chip-bg-neutral);
    color: var(--chip-ink-neutral);
    border: 1px solid var(--chip-border-neutral);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap; /* 칩 내부 텍스트 줄바꿈 방지 */
    flex: 0 0 auto;      /* 찌그러짐 방지 */
}

.chip:hover {
    background: #EEF2F7;
    border-color: #CBD5E1;
}

/*오른쪽 페이드(Fade) 효과 추가 */
.lc__chips::after, .chips::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 20px; /* 흐려지는 범위의 너비 */
    
    /* 카드 배경색(#fff)에 맞춰 자연스럽게 사라지도록 설정 */
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
    
    pointer-events: none; /* 클릭 방해 금지 */
    z-index: 5;
}

/* 모바일 폰트 사이즈 조정 (기존 유지) */
@media (max-width: 700px) {
    .chip {
        font-size: 12px;
        padding: 5px 9px;
    }
}

/* Lawyer card 내부 칩 설정 강제 (중복 방지용 안전장치) */
.lawyer-card .lc__chips {
    flex-wrap: nowrap;
    overflow: hidden;
}


/* =========================================
   [PC/Mobile 공통] 메인 페이지 폰트 강제 적용
   ========================================= */

/* 메인 변호사 검색 섹션 전체 폰트 변경 */
.home-lawyer-section,
.home-lawyer-section * {
    font-family: "Apple SD Gothic Neo", "AppleSDGothicNeo", 
                 "Noto Sans KR", "Malgun Gothic", 
                 -apple-system, blinkmacsystemfont, 
                 "Segoe UI", roboto, sans-serif !important;
}

/* 카테고리 버튼 폰트 명시적 지정 (우선순위 확보) */
.home-lawyer-cat {
    font-family: "Apple SD Gothic Neo", "AppleSDGothicNeo", 
                 "Noto Sans KR", "Malgun Gothic", sans-serif !important;
}