@charset "utf-8";

/**
 * @author  : 김민성
 * @date    : 2026-08-04
 * @desc    : 메인 페이지 스타일
 */
 
 
 
/* 메인 비주얼 스타일 */
.visual {
    position: relative;
    width: 100%;
    height: 100vh;    
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visual__video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1;
    object-fit: cover;
}

.visual__inner {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.visual__title {
    margin-top: 235px;
    margin-bottom: auto;
}

.visual__title-top {
    margin-bottom: 24px;
    font-family: 'noto-serif-kr';
    font-weight: 300;
    font-size: 20px;
    color: #F3E0C0;
    line-height: 100%;
    text-shadow: 10px 4px 14px rgba(0, 0, 0, 0.55), 10px 4px 14px rgba(0, 0, 0, 0.25);
}

.visual__title-main {
    font-family: 'noto-serif-kr';
    font-weight: 300;
    font-size: 48px;
    color: #f5f5f5;
    line-height: 100%;
    text-shadow: 10px 4px 14px rgba(0, 0, 0, 0.55);
}

.visual__subtext {
    margin-top: auto;
    margin-bottom: 144px;
}

.visual__subtext-info {
    margin-bottom: 18px;
    font-family: 'noto-serif-kr';
    font-weight: 200;
    font-size: 18px;
    color: #fff;
    line-height: 100%;
    text-shadow: 10px 4px 14px rgba(0, 0, 0, 0.70), 10px 4px 14px rgba(0, 0, 0, 0.25);
}

.visual__subtext-promise {
    font-family: 'noto-serif-kr';
    font-weight: 400;
    font-size: 24px;
    color: #fff;
    line-height: 100%;
    text-shadow: 10px 4px 14px rgba(0, 0, 0, 0.55);
}

.visual__title--bold {
    font-weight: 600;
    vertical-align: baseline;
}

/* '확신' → '화신' 히어로 텍스트 스왑 애니메이션.
   동작 제어는 ui.js의 initHeroSwap()이 담당한다(클래스 out → in done 토글).
   처음엔 '확신'을 보여주다 위로 흐려지며 사라지고(out, wO),
   '화신'이 아래에서 올라오며 나타난 뒤(in, wI), 서브텍스트(#hsub)가 뒤이어 페이드인된다.
   ── 키프레임 값은 참고 스크립트(.sw)를 그대로 이식. */
.sw {
    display: inline-block;
    will-change: transform, opacity, filter;
}

/* '확신'이 위로 흐려지며 사라지는 단계 */
.sw.out {
    animation: hwSwOut .28s ease forwards;
}

/* '화신'이 아래에서 올라오며 나타나는 단계 */
.sw.in {
    animation: hwSwIn .4s ease forwards;
}

@keyframes hwSwOut {
    0%   { opacity: 1; filter: blur(0);   transform: translateY(0); }
    100% { opacity: 0; filter: blur(6px); transform: translateY(-8px); }
}

@keyframes hwSwIn {
    0%   { opacity: 0; filter: blur(6px); transform: translateY(8px); }
    100% { opacity: 1; filter: blur(0);   transform: translateY(0); }
}

/* 메인 타이틀 줄바꿈: 기본(PC)은 한 줄이라 숨김. 모바일에서만 노출(아래 미디어 쿼리) */
.visual__title-br {
    display: none;
}


/* [메인 섹션] found(화신이 이긴 사건들의 공통점) 스타일 시작 */
.found {
    width: 100%;
    background-color: #F2F0EB;
    overflow: hidden;
}

.found__inner {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding-block: 150px 200px;
}

/* 좌측 컬럼: 킥커 + 일러스트 + 타이틀 + 서브텍스트 */
.found__left {
    position: relative;
    width: 410px;
    flex-shrink: 0;
}

.found__kicker {
    font-family: 'noto-serif-kr';
    font-weight: 600;
    font-size: 18px;
    line-height: 38px;
    color: #961B1E;
}

.found__illust {
    position: absolute;
    top: 390px;
    left: -423px;
    width: 895px;
    height: 509px;
    z-index: 0;
    pointer-events: none;
    will-change: transform; /* 마스크된 일러스트를 자체 레이어로 승격·유지 → 매 프레임 마스크 재계산으로 인한 스크롤 끊김 방지 */
}

.found__illust picture {
    display: block;
    width: 100%;
    height: 100%;
}

.found__illust img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /*-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 80%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 80%);*/
}

.found__title {
    position: relative;
    z-index: 1;
    margin-top: 33px;
    font-family: 'pretendard';
    font-weight: 400;
    font-size: 38px;
    line-height: 54px;
    letter-spacing: -0.76px;
    color: #0F0F0F;
}

.found__desc {
    position: relative;
    z-index: 1;
    margin-top: 40px;
    font-family: 'pretendard';
    font-weight: 400;
    font-size: 20px;
    line-height: 35px;
    letter-spacing: -0.2px;
    color: #0F0F0F;
}

/* 우측 컬럼: 사례 카드 3열
   .found__cards-viewport는 PC에서 display:contents로 레이아웃에서 빠져 기존 그리드를 그대로 유지하고,
   모바일/태블릿에서만 슬라이더 클리핑 뷰포트로 동작한다(ui.js). */
.found__cards-viewport {
    display: contents;
}

.found__cards {
    display: grid;
    grid-template-columns: repeat(3, 240px);
    column-gap: 15px;
    width: 750px;
    margin-top: 15px;
    list-style: none;
}

.found__card-img {
    width: 240px;
    height: 458px;
    border-radius: 9px;
    overflow: hidden;
}

.found__card-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}

.found__card-text {
    margin-top: 35px;
}

.found__card-title {
    margin-bottom: 33px;
    font-family: 'pretendard';
    font-weight: 600;
    font-size: 23px;
    line-height: 32px;
    letter-spacing: -0.47px;
    color: #450F0E;
}

.found__card-desc {
    font-family: 'pretendard';
    font-weight: 300;
    font-size: 15px;
    line-height: 1.7;
    letter-spacing: -0.3px;
    color: #0F0F0F;
}
/* [메인 섹션] found(화신이 이긴 사건들의 공통점) 스타일 끝 */



/* [메인 섹션] attorney(대표변호사) 스타일 시작 */
.attorney {
    width: 100%;
    /* 1920px 고정폭 inner가 화면 중앙에 정렬되므로, 프로필(빨강)과 콘텐츠(하양)의
       경계는 항상 화면 중앙에서 220px 왼쪽(50% - 220px)에 위치한다.
       1920px보다 넓은 화면에서 양옆 여백이 프로필 좌/우 비율과 동일하게 채워지도록
       같은 지점에서 딱 나뉘는 배경으로 처리. (좌: #601A18 / 우: #fff) */
    background: linear-gradient(
        to right,
        #601A18 0,
        #601A18 calc(50% - 220px),
        #fff calc(50% - 220px),
        #fff 100%
    );
    overflow: hidden;
}

.attorney__inner {
    display: flex;
    position: relative;
    left: 50%;                  /* 화면 폭과 무관하게 확실히 가운데 정렬(flex 정렬 대신 위치 기반) */
    width: 1920px;              /* 디자인 고정 폭 유지(화면이 좁아져도 줄어들지 않음) */
    height: 1080px;
    transform: translateX(-50%);  /* 뷰포트가 1920보다 좁으면 좌우 대칭으로 잘리며 가운데 유지 */
    will-change: transform;        /* GPU 레이어로 승격·유지 → 오프스크린 레이어 폐기 후 재래스터화되는 끊김 완화 */
}

/* 좌측: 대표변호사 인물 영역(다크레드 판넬) */
.attorney__profile {
    position: relative;
    flex-shrink: 0;
    width: 740px;
    padding: 164px 0 0 353px;
    box-sizing: border-box;
    background-color: #601A18;
}

/* 배경 장식(로마 기둥 그래픽) */
.attorney__profile-deco {
    position: absolute;
    top: 0;
    left: -300px;
    width: 704px;
    height: 1080px;
    z-index: 0;
    pointer-events: none;
}

.attorney__profile-deco img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left;
}

/* 영문 타이틀 Representative Attorney */
.attorney__eng-title {
    position: relative;
    z-index: 2;
    font-family: 'noto-serif-kr';
    font-weight: 400;
    font-size: 48px;
    line-height: 66px;
    color: #743B3A;
    white-space: nowrap;
}

/* 직함 + 이름 그룹 */
.attorney__name-group {
    position: relative;
    z-index: 2;
    margin-top: 42px;
}

.attorney__role {
    margin-bottom: 20px;
    font-family: 'pretendard';
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
    letter-spacing: -0.18px;
    color: #D5BB8F;
}

.attorney__role-field {
    font-weight: 400;
    vertical-align: baseline;
}

.attorney__name {
    font-family: 'pretendard';
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}

.attorney__name-main {
    font-weight: 600;
    font-size: 42px;
    letter-spacing: -2.53px;
}

.attorney__name-suffix {
    padding-left: 6px;
    font-weight: 300;
    font-size: 26px;
    line-height: 32px;
    letter-spacing: -0.8px;
    vertical-align: bottom;
}

/* 대표변호사 인물 사진 */
.attorney__photo {
    position: absolute;
    top: 454px;
    left: 387px;
    width: 402px;
    height: 626px;
    z-index: 1;
}

.attorney__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* 우측: 콘텐츠 영역 */
.attorney__content {
    position: relative;
    flex: 1;
    padding: 188px 0 0 71px;
    box-sizing: border-box;
    background: #fff;
}

.attorney__headline {
    width: 666px;
    font-family: 'pretendard';
    font-weight: 500;
    font-size: 28px;
    line-height: 42px;
    letter-spacing: -0.56px;
    color: #0F0F0F;
}

/* 슬로건 줄바꿈: 기본(PC/태블릿)은 숨김 → 모바일에서만 노출(아래 미디어 쿼리) */
.attorney__headline-br {
    display: none;
}

/* 3원칙 컬럼(Our Principles / Commitment / Approach) */
.attorney__principles {
    margin-top: 65px;
    display: grid;
    grid-template-columns: repeat(3, 248px);
    column-gap: 31px;
    list-style: none;
}

.attorney__principle-label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    font-family: 'noto-serif-kr';
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    color: #961B1E;
    white-space: nowrap;
}

.attorney__principle-line {
    display: block;
    flex-shrink: 0;
    width: 66px;
    height: 1px;
    background-color: #961B1E;
}

.attorney__principle-title {
    margin-bottom: 32px;
    font-family: 'pretendard';
    font-weight: 600;
    font-size: 19px;
    line-height: 1.5;
    letter-spacing: -0.38px;
    color: #241B0A;
}

.attorney__principle-desc {
    font-family: 'pretendard';
    font-weight: 400;
    font-size: 14px;
    line-height: 1.73;
    letter-spacing: -0.28px;
    color: #241B0A;
}

/* 전문분야 등록증서 이미지 카드 */
.attorney__certs {
    position: absolute;
    top: 672px;
    left: 74px;
    display: flex;
    gap: 32px;
    list-style: none;
}

.attorney__cert {
    width: 187px;
    height: 265px;
    box-sizing: border-box;
    border: 1px solid #E6DBC9;
    box-shadow: 5px 5px 14px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    overflow: hidden;
}

.attorney__cert img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* CTA 버튼: 구성원 전체보기 */
.attorney__more {
    position: absolute;
    top: 870px;
    left: 536px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 233px;
    padding: 20px 32px;
    box-sizing: border-box;
    border-radius: 110px;
    background-color: #E6DBC9;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.attorney__more:hover {
    background-color: #E5D0AE;
}

.attorney__more-text {
    font-family: 'pretendard';
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
    color: #000;
    white-space: nowrap;
}

.attorney__more-icon {
    display: block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.attorney__more-icon img {
    display: block;
    width: 100%;
    height: 100%;
}
/* [메인 섹션] attorney(대표변호사) 스타일 끝 */



/* [메인 섹션] cases(성공사례) 스타일 시작 */
.cases {
    width: 100%;
    background-color: #F2F0EB;
    box-sizing: border-box;
    overflow: hidden;
}

.cases__inner {
    max-width: 1920px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* 상단: 킥커 + 타이틀 */
.cases__head {
    margin-bottom: 40px;
    text-align: center;
}

.cases__kicker {
    margin-bottom: 12px;
    font-family: 'noto-serif-kr';
    font-weight: 600;
    font-size: 18px;
    line-height: 1.2;
    color: #961B1E;
}

.cases__title {
    font-family: 'pretendard';
    font-weight: 400;
    font-size: 50px;
    line-height: 84px;
    letter-spacing: -3px;
    color: #0F0F0F;
}

/* 분야 탭(형사 / 이혼 및 가사) + 하단 구분선 */
.cases__tabs {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin-bottom: 40px;
}

/* 탭 아래 배경 구분선: 브라우저 전체 너비로 노출 */
.cases__tabs::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 1px;
    transform: translateX(-50%);
    width: 100vw;
    height: 1px;
    background-color: #383838;
}

.cases__tab {
    position: relative;
    width: 160px;
    padding: 0 0 16px;
    background: none;
    border: none;
    font-family: 'pretendard';
    font-weight: 400;
    font-size: 20px;
    letter-spacing: -0.6px;
    color: #383838;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}

.cases__tab.is-active {
    font-weight: 600;
    color: #961B1E;
}

/* 활성 탭 밑줄: 탭 폭(160px)에 딱 맞춰 겹침 없이 정렬 */
.cases__tab.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background-color: #961B1E;
}

/* 카테고리 필터 버튼(보이스피싱 / 음주운전 / 아동청소년위반 / 강간·상해) */
.cases__filter {
    display: flex;
    gap: 11px;
    max-width: 1200px;
    margin: 0 auto 16px;
    list-style: none;
}

.cases__filter-item {
    flex: 1;
}

.cases__filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    border: none;
    border-radius: 8px;
    background-color: #E6DBC9;
    font-family: 'pretendard';
    font-weight: 500;
    font-size: 18px;
    letter-spacing: -0.64px;
    color: #383838;
    cursor: pointer;
}

.cases__filter-btn.is-active {
    background-color: #961B1E;
    font-weight: 800;
    color: #fff;
}

/* 대표사례 카드 */
.cases__panel {
    width: 100%;
}

.cases__card {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    width: 1200px;
    max-width: 100%;
    min-height: 422px;
    margin: 0 auto;
    padding: 33px 42px 30px 44px;
    box-sizing: border-box;
    background-color: #FDFDFC;
    border: 1px solid #E5E7EB;
    border-radius: 17px;
}

/* 탭/필터로 선택되지 않은 그룹·카드는 감춘다 */
.cases__filter[hidden],
.cases__card[hidden] {
    display: none;
}

/* 좌측 컬럼: 뱃지 + 본문(제목/설명/타임라인/태그)을 세로로 쌓는다 */
.cases__card-content {
    flex-shrink: 0;
    width: 621px;
}

.cases__card-body {
    width: 100%;
}

.cases__card-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 105px;
    height: 38px;
    margin-bottom: 13px;
    border-radius: 6px;
    background-color: #961B1E;
    font-family: 'pretendard';
    font-weight: 500;
    font-size: 12.5px;
    letter-spacing: -0.68px;
    color: #fff;
}

.cases__card-title {
    margin-bottom: 10px;
    font-family: 'pretendard';
    font-weight: 600;
    font-size: 27px;
    line-height: 1.5;
    letter-spacing: -0.8px;
    color: #241B0A;
}

.cases__card-desc {
    margin-bottom: 36px;
    max-width: 600px;
    font-family: 'pretendard';
    font-weight: 400;
    font-size: 17px;
    line-height: 1.53;
    letter-spacing: -0.35px;
    color: #241B0A;
}

/* 하단부: 타임라인(상) + 혐의/결과 태그(하)를 세로로 배치 */
.cases__evidence {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
}

/* 3단 타임라인(접수 당일 / 사건 진행 / 전환점) */
.cases__timeline {
    display: flex;
    gap: 10px;
    list-style: none;
}

.cases__timeline-item {
    width: 204px;
    padding-top: 8px;
    border-top: 2px solid #961B1E;
}

.cases__timeline-title {
    margin-bottom: 6px;
    font-family: 'pretendard';
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -0.4px;
    color: #961B1E;
}

.cases__timeline-desc {
    font-family: 'pretendard';
    font-weight: 500;
    font-size: 12px;
    line-height: 1.64;
    letter-spacing: -0.36px;
    color: #241B0A;
}

.cases__timeline-desc strong {
    font-weight: 800;
}

/* 혐의/결과 태그: pill 2개를 타임라인 아래에 가로로 나란히 배치 */
.cases__tags {
    display: flex;
    flex-direction: row;
    gap: 12px;
    list-style: none;
}

.cases__tag {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 303px;
    height: 50px;
    padding: 0 20px;
    box-sizing: border-box;
    border-radius: 34px;
    background-color: #F2F2F2;
}

.cases__tag-label {
    font-family: 'pretendard';
    font-weight: 400;
    font-size: 12px;
    letter-spacing: -0.36px;
    color: #241B0A;
}

.cases__tag-value {
    font-family: 'pretendard';
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -0.42px;
    color: #961B1E;
}

/* 판결문 통합 이미지(1심·항소심 + 승소 스탬프 효과 일체형) */
.cases__card-media {
    position: relative;
    flex-shrink: 0;
    width: 392px;
    align-self: flex-start;
}

.cases__card-media-img {
    display: block;
    width: 100%;
    height: auto;
}

.cases__card-note {
    position: absolute;
    right: 36px;
    bottom: -22px;
    width: 100%;
    font-family: 'pretendard';
    font-weight: 400;
    font-size: 10px;
    letter-spacing: -0.2px;
    color: #8D8D8D;
    text-align: right;
}

/* 하단 CTA 버튼 */
.cases__more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: fit-content;
    margin: 44px auto 0;
    padding: 20px 32px;
    box-sizing: border-box;
    border-radius: 110px;
    background-color: #1B272D;
    text-decoration: none;
}

.cases__more-text {
    font-family: 'pretendard';
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}

.cases__more-icon {
    display: block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.cases__more-icon img {
    display: block;
    width: 100%;
    height: 100%;
    filter: brightness(0) invert(1);
}

/* 형사 그룹: 네이비 배지 + 틸 강조색(타임라인/태그/구분선) */
.cases__filter[data-group="criminal"] .cases__filter-btn.is-active {
    background-color: #293B43;
}

.cases__card[data-group="criminal"] .cases__card-badge {
    background-color: #293B43;
}

.cases__card[data-group="criminal"] .cases__timeline-item {
    border-top-color: #226D77;
}

.cases__card[data-group="criminal"] .cases__timeline-title,
.cases__card[data-group="criminal"] .cases__tag-value {
    color: #226D77;
}
/* [메인 섹션] cases(성공사례) 스타일 끝 */


/* [메인 섹션] reviews(고객 후기) 스타일 시작 */
.reviews {
    width: 100%;
    background-color: #F2F0EB;
    padding: 60px 0 100px;
    box-sizing: border-box;
    overflow: hidden;
}

.reviews__inner {
    display: flex;
    align-items: flex-start;
    gap: 46px;
    position: relative;
    left: 50%;                    /* 화면 중앙 기준 정렬 */
    width: 1560px;                /* 좌측 컬럼(415) + gap(46) + 슬라이더(1099) */
    transform: translateX(-50%);  /* 화면이 1560보다 좁아져도 좌우 대칭으로 잘리며 가운데 유지 */
    box-sizing: border-box;
    padding-left: 180px;
}

/* 좌측 컬럼: 일러스트 + 킥커 + 타이틀 + 서브텍스트 + 캐러셀 컨트롤 */
.reviews__left {
    position: relative;
    width: 415px;
    flex-shrink: 0;
    padding-top: 409px;
    box-sizing: border-box;
}

.reviews__illust {
    position: absolute;
    top: 0;
    left: -439px;
    width: 802px;
    height: 432px;
    z-index: 0;
    pointer-events: none;
}

.reviews__illust img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
}

.reviews__kicker {
    position: relative;
    z-index: 1;
    margin-bottom: 32px;
    font-family: 'noto-serif-kr';
    font-weight: 600;
    font-size: 18px;
    line-height: 38px;
    color: #961B1E;
}

.reviews__title {
    position: relative;
    z-index: 1;
    margin-bottom: 32px;
    font-family: 'pretendard';
    font-weight: 400;
    font-size: 38px;
    line-height: 54px;
    letter-spacing: -0.76px;
    color: #0F0F0F;
}

.reviews__desc {
    position: relative;
    z-index: 1;
    margin-bottom: 91px;
    font-family: 'pretendard';
    font-weight: 400;
    font-size: 20px;
    line-height: 35px;
    letter-spacing: -0.2px;
    color: #000;
}

/* 서브텍스트 줄바꿈: 기본(PC)은 한 줄이라 숨김. 모바일에서만 노출(아래 미디어 쿼리) */
.reviews__desc-br {
    display: none;
}

.reviews__nav {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 16px;
}

.reviews__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 28px;
    box-sizing: border-box;
    cursor: pointer;
    
    /* 기본 상태: 배경 없음, 테두리 및 글자 색상 #601A18 */
    background-color: transparent;
    border: 1px solid #601A18;
    color: #601A18;
    
    /* 호버 전환 효과 */
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.reviews__nav-icon {
    display: block;
    width: 24px;
    height: 24px;
}

/* 마우스 호버 시 (이전/다음 버튼 공통) */
.reviews__nav-btn:hover {
    background-color: #601A18;
    border-color: #601A18;
    color: #fff;
}

/* 우측: 리뷰 카드 자동 롤링 슬라이더 (한 장씩 이동하며 무한 순환) */
.reviews__slider {
    position: relative;
    flex: none;
    /* 카드 3장(361×3) + 카드 사이 간격(8×2) = 딱 3장만 노출(우측 튀어나옴 제거) */
    width: 1099px;
    max-width: 100%;
    /* 상하 패딩으로 카드 호버 시 떠오르는 공간·그림자 여백 확보(가로는 여전히 잘라 3장만 노출).
       카드의 시각적 시작 위치는 그대로 두려고 margin-top에서 padding-top만큼 뺀다(173+16=189). */
    margin-top: 173px;
    padding: 16px 0 34px;
    overflow: hidden;
    /* 드래그/스와이프 슬라이드: 세로 스크롤은 허용(pan-y), 가로 제스처는 JS가 처리 */
    touch-action: pan-y;
    cursor: grab;
}

/* 드래그 중 텍스트/이미지 선택 방지 (ui.js가 클래스 토글) */
.reviews__slider.is-dragging {
    cursor: grabbing;
}

.reviews__slider.is-dragging .reviews__track {
    user-select: none;
}

/* 우측 끝 페이드: 배경색(#F2F0EB)으로 서서히 가려 뒤에 후기가 이어짐을 암시 */
.reviews__slider::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(to right, rgba(242, 240, 235, 0), #F2F0EB 50%);
}

/* 트랙은 콘텐츠 폭(max-content)만큼 늘어나야 카드가 줄지 않고 한 장씩 이동한다.
   카드 세트를 JS로 앞뒤에 한 벌씩 복제해 양방향 무한 순환을 만든다.
   transform / transition 은 JS가 인라인으로 제어한다. */
.reviews__track {
    display: flex;
    width: max-content;
    list-style: none;
    will-change: transform;
}

/* gap 대신 margin-right: 이동 스텝(카드폭 + 간격)을 균일하게 유지 */
.reviews__slide {
    flex-shrink: 0;
    margin-right: 8px;
}

/* 의뢰인 후기 카드 (Figma node 751-53267 기준) — 고정 비주얼 카드(링크 아님) */
.reviews__card {
    display: flex;
    flex-direction: column;
    width: 361px;
    height: 662px;
    padding: 28px 30px 30px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 25px;
    box-shadow: 0 3px 6px #F2F0EC;
    text-decoration: none;
    color: inherit;
}

/* 카드 상단: 사건 유형 태그 + 의뢰인 정보 (고정 콘텐츠) */
.reviews__card-head {
    margin-bottom: 12px;
}

/* 사건 유형 태그 — 좌측 정렬 pill (기본 형사: 남색) */
.reviews__card-tag {
    display: inline-block;
    padding: 8px 22px;
    border-radius: 8px;
    background-color: #293B43;
    font-family: 'pretendard';
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.4px;
    color: #fff;
}

/* 사건 유형 태그 — 이혼: 빨강 배경 */
.reviews__card-tag--divorce {
    background-color: #961B1E;
}

/* 의뢰인 정보 — 가운데 정렬, 좌우 짧은 구분선 */
.reviews__card-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    font-family: 'pretendard';
    font-weight: 400;
    font-size: 13.5px;
    letter-spacing: -0.3px;
    color: #A5957A;
    white-space: nowrap;
}

/* 텍스트 좌우 구분선: 남는 공간을 채우되 너무 길어지지 않도록 상한 */
.reviews__card-meta::before,
.reviews__card-meta::after {
    content: "";
    flex: 1 1 auto;
    max-width: 34px;
    min-width: 10px;
    height: 1px;
    background-color: #D9D0C2;
}

/* 대화 캡처 이미지
   - 상단 모서리만 라운드(하단은 아래 페이드로 자연스럽게 사라짐)
   - Figma 카드의 대화창 비율(316:328) 유지 → 카드 폭이 달라져도 비율대로 스케일
   - 하단은 카드 배경(흰색)으로 서서히 사라지는 페이드(mask) 처리 */
.reviews__chat {
    flex: none;
    width: 100%;
    aspect-ratio: 316 / 328;
    overflow: hidden;
    border-radius: 18px 18px 0 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}

.reviews__chat img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    -webkit-user-drag: none;
    user-select: none;
}

/* 인용문 + 근황 + 결과 배지 묶음 (가운데 정렬, 남은 공간을 채워 배지를 하단 고정) */
.reviews__card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 22px;
    text-align: center;
}

/* 후기 헤드라인(강조 인용문) — 2줄 초과 시 말줄임표 */
.reviews__card-quote {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: 'pretendard';
    font-weight: 600;
    font-size: 21px;
    line-height: 1.4;
    letter-spacing: -0.64px;
    color: #241B0A;
}

/* 후기 본문(근황) — 2줄 초과 시 말줄임표 */
.reviews__card-summary {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 17px;
    font-family: 'pretendard';
    font-weight: 400;
    font-size: 15px;
    line-height: 1.7;
    letter-spacing: -0.3px;
    color: #241B0A;
}

/* 결과 배지 — 기본(형사): 빨간 테두리 pill, 카드 하단 고정 */
.reviews__card-result {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    margin-top: auto;
    padding: 16px 20px;
    border: 1px solid #961B1E;
    border-radius: 999px;
    font-family: 'pretendard';
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.4px;
    color: #961B1E;
}
/* [메인 섹션] reviews(고객 후기) 스타일 끝 */


/* [메인 섹션] practice(취급분야 Practice Areas) 스타일 시작 */
.practice {
    width: 100%;
    background-color: #F2F0EB;
    padding: 72px 0 90px;
    box-sizing: border-box;
    overflow: hidden;
}

.practice__inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 240px;
    box-sizing: border-box;
}

/* 상단: 킥커 + 타이틀 + 서브텍스트 */
.practice__head {
    margin-bottom: 56px;
    text-align: center;
}

.practice__kicker {
    margin-bottom: 12px;
    font-family: 'noto-serif-kr';
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    color: #961B1E;
}

.practice__title {
    margin-bottom: 16px;
    font-family: 'pretendard';
    font-weight: 500;
    font-size: 40px;
    line-height: 1.4;
    letter-spacing: -2.4px;
    color: #0F0F0F;
}

.practice__desc {
    font-family: 'pretendard';
    font-weight: 400;
    font-size: 19px;
    line-height: 1.4;
    letter-spacing: -0.2px;
    color: #000;
}

/* 모바일 전용 줄바꿈(br)은 PC에서 숨김 (모바일 미디어쿼리에서 inline 처리) */
.practice .br-mo {
    display: none;
}

/* 취급분야 리스트 2단(이혼·가사 5항목 / 형사 4항목), 상·중·하 구분선 */
/* 구분선(border)은 inner가 아닌 wrap(브라우저 화면) 폭 전체로 쭉 이어지도록,
   groups/row를 full-bleed로 두고 리스트 내용만 inner 폭에 맞춰 가운데 정렬 */
.practice__groups {
    border-top: 1px solid #E2D9D9;
}

.practice__row {
    border-bottom: 1px solid #E2D9D9;
}

.practice__list {
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding: 32px 240px;
    box-sizing: border-box;
    list-style: none;
}

.practice__list--family {
    justify-content: center;
    gap: 53px;
}

.practice__list--criminal {
    justify-content: center;
    gap: 56px;
}

.practice__link {
    display: flex;
    align-items: center;
    gap: 17px;
    text-decoration: none;
}

.practice__thumb {
    display: block;
    width: 155px;
    height: 65px;
    flex-shrink: 0;
    border-radius: 67px;
    overflow: hidden;
}

.practice__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.practice__name {
    font-family: 'pretendard';
    font-weight: 600;
    font-size: 23px;
    letter-spacing: -0.2px;
    color: #111827;
    white-space: nowrap;
}

/* 모바일 무한 롤링(마퀴)용 복제 항목: 기본(데스크톱/태블릿)에서는 숨긴다.
   JS가 원본 항목을 통째로 복제해 [원본][복제] 2세트를 만들며, 모바일에서만 노출한다. */
.practice__item.is-marquee-clone {
    display: none;
}
/* [메인 섹션] practice(취급분야 Practice Areas) 스타일 끝 */


/* [메인 섹션] centers(전문센터 안내) — practice 섹션에 병합, 콘텐츠 폭(1440) 내부에 배치 */
.centers {
    max-width: 1920px;
    margin: 62px auto 0;
    box-sizing: border-box;
}

.centers__row {
    display: flex;
    height: 260px;
}

/* 좌/우 컬러 패널: 타이틀 + 설명 + 원형 화살표 버튼 */
.centers__panel {
    position: relative;
    flex: 0 0 508px;
    width: 508px;
    box-sizing: border-box;
    padding: 67px 0 0 44px;
    color: #fff;
}

.centers__panel--divorce {
    background-color: #601A18;
}

.centers__panel--criminal {
    flex: 0 0 507px;
    width: 507px;
    background-color: #293B43;
}

.centers__title {
    margin-bottom: 24px;
    font-family: 'pretendard';
    font-weight: 600;
    font-size: 28px;
    line-height: 1;
    color: #fff;
}

.centers__desc {
    font-family: 'pretendard';
    font-weight: 400;
    font-size: 18px;
    line-height: 29px;
    color: #fff;
}

/* 모바일 전용 줄바꿈(br)은 PC에서 숨김 (모바일 미디어쿼리에서 inline 처리) */
.centers .br-mo {
    display: none;
}

/* 원형 화살표 버튼: 좌/우 패널 내 배치 위치가 서로 달라 개별 지정 */
.centers__btn {
    position: absolute;
    top: 178px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 7px;
    border: 0.57px solid #D5BB8F;
    border-radius: 91px;
}

.centers__panel--divorce .centers__btn {
    left: 423px;
}

.centers__panel--criminal .centers__btn {
    left: 418px;
}

.centers__btn img {
    display: block;
    width: 27px;
    height: 27px;
    filter: brightness(0) saturate(100%) invert(77%) sepia(21%) saturate(958%) hue-rotate(345deg) brightness(91%) contrast(89%);
}

/* 중앙 이미지 */
.centers__picture {
    flex: 1 1 auto;
    height: 260px;
}

.centers__picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* [메인 섹션] centers(전문센터 안내) 스타일 끝 */


/* [메인 섹션] consultation(상담 전 FAQ) 스타일 시작 */
.consultation {
    width: 100%;
    min-height: 1080px;
    box-sizing: border-box;
    background-color: #1B272D;
    overflow: hidden;
}

/* 세로 적층: 상단 타이틀 블록 + 하단 전체폭 아코디언 */
.consultation__inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* 상단: 킥커 + 타이틀 + 서브텍스트 */
.consultation__left {
    margin-bottom: 108px;
}

.consultation__kicker {
    margin-bottom: 22px;
    font-family: 'noto-serif-kr';
    font-weight: 600;
    font-size: 15px;
    line-height: 34px;
    color: #D5BB8F;
}

.consultation__title {
    margin-bottom: 22px;
    font-family: 'pretendard';
    font-weight: 400;
    font-size: 38px;
    line-height: 53px;
    letter-spacing: -2.29px;
    color: #fff;
}

/* 타이틀 줄바꿈: 기본(PC/태블릿)은 한 줄, 모바일에서만 2줄로 노출 */
.consultation__title-br {
    display: none;
}

.consultation__desc {
    font-family: 'pretendard';
    font-weight: 500;
    font-size: 21px;
    line-height: 35px;
    letter-spacing: -0.21px;
    color: #D5BB8F;
}

/* 하단: FAQ 아코디언 (전체폭, 상단 골드 강조선 + 항목 사이/하단 회색 구분선)
   - 구분선은 100% 폭, 문항/답변 콘텐츠는 좌우 16px 안쪽에 배치 */
.consultation__accordion {
    width: 100%;
    border-top: 1px solid #D5BB8F;
    border-bottom: 1px solid rgba(197, 197, 197, 0.5);
    list-style: none;
}

.consultation__item {
    padding: 40px 16px;
}

/* 항목 사이 구분선(첫 항목 제외 — 상단 골드선과 중복 방지) */
.consultation__item:not(:first-child) {
    border-top: 1px solid rgba(197, 197, 197, 0.5);
}

.consultation__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

.consultation__question-text {
    font-family: 'pretendard';
    font-weight: 500;
    font-size: 22px;
    line-height: 22px;
    letter-spacing: -0.76px;
    color: #fff;
}

/* +/- 토글 아이콘: 가로선은 항상 노출, 세로선은 열림 상태에서 숨김 */
.consultation__question-icon {
    position: relative;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.consultation__question-icon::before,
.consultation__question-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #D5BB8F;
    transform: translate(-50%, -50%);
}

.consultation__question-icon::before {
    width: 17px;
    height: 1.5px;
}

.consultation__question-icon::after {
    width: 1.5px;
    height: 17px;
}

.consultation__item.is-active .consultation__question-icon::after {
    display: none;
}

/* 열린 문항의 답변 영역: 문항과 21px 간격 */
.consultation__answer {
    margin-top: 21px;
    padding-right: 50px;
}

.consultation__answer-text {
    width: 527px;
    max-width: 100%;
    font-family: 'pretendard';
    font-weight: 400;
    font-size: 15px;
    line-height: 25px;
    letter-spacing: -0.06px;
    color: #fff;
}
/* [메인 섹션] consultation(상담 전 FAQ) 스타일 끝 */


/* [메인 섹션] contact(상담 신청 폼) 스타일 시작 */
.contact {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #E0D5C3; /* 좌측 및 1920 바깥 여백은 폼과 동일한 단색 유지 */
}

/* 우측 사무실 이미지: '폼 오른쪽 끝 ~ 브라우저 우측 끝' 컬럼에 배치.
   절대배치(top:0/bottom:0)라 섹션 상단 헤더 패딩 영역까지 꽉 차고,
   left는 폼 오른쪽 끝에 맞춰 폼을 침범하지 않으며(1920 초과 시 콘텐츠 중앙정렬 반영),
   right:0으로 두어 브라우저가 1920보다 커져도 오른쪽까지 이미지가 꽉 찬다. */
.contact::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc((100% - 1920px) / 2 + 1171px); /* 중앙 정렬된 폼(1171) 오른쪽 끝 */
    right: 0;                                  /* 브라우저 우측 끝까지 꽉 채움 */
    background: url(../images/main/contact-office.webp) no-repeat right center;
    background-size: cover;
    pointer-events: none;
}

/* 모바일/태블릿 전용 상단 히어로 이미지 요소: 데스크톱에서는 숨김(우측 .contact::after 배경 사용) */
.contact__hero {
    display: none;
}

/* [contact 하단] 모바일 전용 오시는 길 섹션: 데스크톱/태블릿에서는 숨김(≤768px에서만 노출) */
.contact-map {
    display: none;
}

.contact__inner {
    position: relative;
    z-index: 1; /* 폼이 우측 이미지 위에 오도록 */
    display: flex;
    align-items: stretch;
    left: 50%;                    /* 화면 중앙 기준 정렬 */
    width: 1920px;                /* 디자인 고정 폭 유지(폼 좌측 + 우측 이미지 노출 영역) */
    min-height: 1080px;
    transform: translateX(-50%);  /* 화면이 1920보다 좁아져도 좌우 대칭으로 잘리며 가운데 유지 */
}

/* 좌측: 베이지 패널 (서브카피 + 타이틀 + 상담 신청 폼) */
.contact__form-wrap {
    width: 1171px;
    flex-shrink: 0;
    padding: 127px 72px 160px 364px; /* 콘텐츠 left 352, 헤더(제목)는 폭 747까지 확장 */
    box-sizing: border-box;
    background-color: #E0D5C3;
}

.contact__subtitle {
    margin-bottom: 6px;
    max-width: 580px;
    font-family: 'pretendard';
    font-weight: 500;
    font-size: 23px;
    line-height: 37px;
    letter-spacing: -0.23px;
    color: #961B1E;
}

.contact__title {
    margin-bottom: 54px;
    max-width: 747px;
    font-family: 'pretendard';
    font-weight: 400;
    font-size: 40px;
    line-height: 68px;
    letter-spacing: -2.4px;
    color: #0F0F0F;
}

/* 모바일 전용 줄바꿈(br)은 PC에서 숨김 (모바일 미디어쿼리에서 inline 처리) */
.contact .br-mo {
    display: none;
}

/* 폼 본문은 콘텐츠 폭(611)으로 고정, 헤더보다 좁게 좌측 정렬 */
.contact__form {
    width: 611px;
    max-width: 100%;
}

/* 폼 공통: 라벨 + 인풋 그룹 간격 */
.contact__field {
    margin-bottom: 28px;
}

.contact__label {
    display: block;
    margin-bottom: 8px;
    font-family: 'pretendard';
    font-weight: 600;
    font-size: 16px;
    line-height: 23px;
    color: #241B0A;
}

.contact__required {
    margin-left: 2px;
    font-size: 12px;
    color: #961B1E;
}

/* 인풋/셀렉트/텍스트영역 공통 */
.contact__input,
.contact__select,
.contact__textarea {
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-radius: 9px;
    background-color: rgba(255, 255, 255, 0.9);
    font-family: 'pretendard';
    font-weight: 400;
    font-size: 18px;
    color: #241B0A;
}

.contact__input,
.contact__select {
    height: 45px;
    padding: 0 20px;
}

.contact__input::placeholder,
.contact__select:invalid,
.contact__textarea::placeholder {
    font-weight: 300;
    font-size: 18px;
    color: #ABA195;
}

.contact__textarea {
    height: 121px;
    padding: 14px 20px;
    line-height: 1.5;
    resize: none;
}

/* 연락처 3분할 인풋 */
.contact__phone-group {
    display: flex;
    align-items: center;
    gap: 14px;
}

.contact__input--phone {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.contact__phone-dash {
    flex-shrink: 0;
    font-size: 18px;
    color: #241B0A;
    opacity: 0.5;
}

/* 거주지역 / 상담분야 2단 */
.contact__row {
    display: flex;
    gap: 23px;
    margin-bottom: 28px;
}

.contact__field--half {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

/* 거주지역·상담분야 커스텀 셀렉트 (피그마 드롭다운 스펙, ui.js consult-select 재사용) */
.contact .consult-select {
    position: relative;
    width: 100%;
}

/* 닫힘 상태: 인풋과 동일한 반투명 흰 필드 */
.contact .consult-select__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 9px;
    background-color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
}

.contact .consult-select__value {
    overflow: hidden;
    font-family: 'pretendard';
    font-weight: 400;
    font-size: 18px;
    letter-spacing: -0.36px;
    color: #241B0A;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.contact .consult-select__value[data-placeholder] {
    font-weight: 300;
    color: #ABA195;
}

/* 화살표(∨): 열림 시 180° 회전 */
.contact .consult-select__arrow {
    position: relative;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    transition: transform 0.2s ease;
}

.contact .consult-select__arrow::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 35%;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #961B1E;
    border-bottom: 1.5px solid #961B1E;
    transform: translate(-50%, -50%) rotate(45deg);
}

.contact .consult-select__toggle[aria-expanded="true"] .consult-select__arrow {
    transform: rotate(180deg);
}

/* 옵션 리스트(열림 상태): 필드 하단에 부착 */
.contact .consult-select__options {
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    z-index: 10;
    width: 100%;
    max-height: 264px; /* 약 6행 노출 후 스크롤 */
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain; /* 목록 끝에서 페이지로 스크롤 전파 방지 */
    list-style: none;
    border-radius: 9px;
    background-color: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 20px rgba(36, 27, 10, 0.12);
}

.contact .consult-select__options[hidden] {
    display: none;
}

/* 옵션 행: 기본은 연회색(Light), hover·선택 시 베이지 배경 + 진한 글자(SemiBold) */
.contact .consult-select__option {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 20px;
    font-family: 'pretendard';
    font-weight: 300;
    font-size: 18px;
    letter-spacing: -0.36px;
    color: #ABA195;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.contact .consult-select__option:hover,
.contact .consult-select__option:focus,
.contact .consult-select__option[aria-selected="true"] {
    background-color: rgba(224, 213, 195, 0.2);
    font-weight: 600;
    color: #241B0A;
}

/* 개인정보 동의 체크박스 */
.contact__agree {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 63px;   /* 상담내용 하단과의 간격(위 필드 margin과 상쇄되어 63px 적용) */
    margin-bottom: 24px;
}

.contact__agree-input {
    width: 14px;
    height: 14px;
    margin: 0;
    flex-shrink: 0;
    accent-color: #961B1E;
    cursor: pointer;
}

.contact__agree-label {
    font-family: 'pretendard';
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -0.36px;
    color: #241B0A;
    cursor: pointer;
}

/* 상담 신청하기 버튼 */
.contact__submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 262px;
    padding: 20px 32px;
    box-sizing: border-box;
    border: none;
    border-radius: 110px;
    background-color: #961B1E;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* hover/focus: 진한 적색으로 전환 + 화살표 살짝 이동 */
.contact__submit:hover,
.contact__submit:focus-visible {
    background-color: #601A18;
}

.contact__submit-text {
    font-family: 'pretendard';
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}

.contact__submit-icon {
    display: block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.contact__submit-icon img {
    display: block;
    width: 100%;
    height: 100%;
    filter: brightness(0) invert(1);
}

/* 우측 이미지 패널은 섹션 배경으로 대체(별도 컬럼 제거) */
/* [메인 섹션] contact(상담 신청 폼) 스타일 끝 */


/* 반응형 */
@media (min-width: 1920px) {
    /* 배경 빨강/흰색 경계를 좌측 프로필 판넬(740px) 오른쪽 끝과 항상 일치시킨다.
       inner가 1920px 고정·가운데 정렬이므로 판넬 끝 = 중앙(50%) - 220px.
       화면이 좁아져도 경계가 740px 아래로는 내려가지 않도록 max()로 하한을 둔다(안전장치). */
    .attorney {
        background: linear-gradient(
            to right,
            #601A18 max(740px, 50% - 220px),
            #fff max(740px, 50% - 220px)
        );
    }
}


/* ===== 태블릿 반응형 (max-width: 1024px) ===== */
@media (max-width: 1024px) {

    /* [visual] 메인 비주얼 태블릿 스타일 시작 */
    .visual__title {
        margin-top: 180px;
    }

    .visual__title-top {
        margin-bottom: 18px;
        font-size: 18px;
    }

    .visual__title-main {
        font-size: 40px;
        line-height: 1.3;
    }

    .visual__subtext {
        margin-bottom: 110px;
    }

    .visual__subtext-info {
        margin-bottom: 14px;
        font-size: 16px;
    }

    .visual__subtext-promise {
        font-size: 20px;
    }
    /* [visual] 메인 비주얼 태블릿 스타일 끝 */


    /* [found] 화신이 이긴 사건들 태블릿 스타일 시작 */
    /* 모바일에서는 hidden */
    .found {
        display: none !important;
    }
    
    .found__inner {
        flex-direction: column;
        align-items: stretch;
        padding-block: 60px 100px;
        padding-inline: 40px;
        gap: 60px; /* found__desc ↔ 카드 슬라이드 사이 간격 */
    }

    .found__left {
        width: 100%;
    }

    /* 배경 일러스트: 우측 상단에 은은하게 걸치도록 재배치 + 좌우 반전 */
    .found__illust {
        top: 0;
        left: auto;
        right: -60px;
        width: 460px;
        height: auto;
    }

    .found__illust img {
        height: auto; /* 컨테이너 height:auto에 맞춰 비율대로 표시(0 붕괴 방지) */
    }

    .found__title {
        margin-top: 27px;
        font-size: 34px;
        line-height: 1.4;
    }

    .found__desc {
        margin-top: 25px;
        font-size: 18px;
        line-height: 1.7;
    }

    /* 카드 슬라이더: 뷰포트(클리핑) + 트랙(가로 이동)
       - .found__cards-viewport: PC에선 display:contents 로 그리드 유지, 여기선 클리핑 컨테이너 */
    .found__cards-viewport {
        display: block;
        overflow: hidden;
    }

    /* 3열 그리드 → 가로 트랙(flex) */
    .found__cards {
        display: flex;
        width: max-content;
        margin-top: 0;
        column-gap: 20px;
        will-change: transform;
    }

    .found__card {
        flex: 0 0 auto;
        width: 280px;
    }

    .found__card-img {
        width: 100%;
        height: 380px;
    }
    /* [found] 화신이 이긴 사건들 태블릿 스타일 끝 */


    /* [attorney] 대표변호사 태블릿 스타일 시작 */
    /* PC 2단 고정 레이아웃(inner 1920px 고정·중앙정렬) → 세로 1단 스택으로 전환.
       (헤더 position:fixed 84px에 가리지 않도록 프로필 상단 여백으로 오프셋) */
    .attorney__inner {
        flex-direction: column;
        left: auto;
        width: 100%;
        height: auto;
        transform: none;
        overflow: hidden;
    }

    /* 상단 히어로: 다크레드 프로필 판넬 (전체 폭) */
    .attorney__profile {
        width: 100%;
        min-height: 600px;
        padding: 120px 40px 0;
    }

    /* 로마 기둥 배경 장식: 판넬 전체 기준으로 축소 */
    .attorney__profile-deco {
        width: 100%;
        height: 100%;
        left: -200px;
    }

    /* 인물 사진: 판넬 우측 하단 정렬 (PC 비율 402:626 유지) */
    .attorney__photo {
        top: auto;
        right: 40px;
        bottom: 0;
        left: auto;
        width: 300px;
        height: auto;
        aspect-ratio: 402 / 626;
    }

    /* 우측 콘텐츠 → 전체 폭 스택 */
    .attorney__content {
        padding: 60px 40px 80px;
    }

    .attorney__headline {
        width: 100%;
        max-width: 720px;
    }

    /* 3원칙: 고정 248px 3열 → 가변 3열 유지 */
    .attorney__principles {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 24px;
    }

    /* 증서 카드: absolute → 일반 흐름 */
    .attorney__certs {
        position: static;
        margin-top: 56px;
    }

    /* CTA 버튼: absolute → 일반 흐름 */
    .attorney__more {
        position: static;
        margin-top: 56px;
    }
    /* [attorney] 대표변호사 태블릿 스타일 끝 */


    /* [cases] 성공사례 태블릿 스타일 시작 */
    /* PC 가로 2단 카드(본문 621 + 이미지 392) → 세로 스택.
       타임라인 3열·태그 2열은 넓은 폭이 남으므로 가변폭으로 유지한다. */
    .cases__inner {
        padding: 60px 40px 80px;
    }

    .cases__title {
        font-size: 40px;
        line-height: 1.4;
        letter-spacing: -1.6px;
    }

    /* 카드: 가로 2단 → 세로 스택(본문 위 / 판결문 이미지 아래) */
    .cases__card {
        flex-direction: column;
        gap: 32px;
        width: 100%;
        min-height: 0;
        padding: 32px;
    }

    .cases__card-content {
        width: 100%;
    }

    .cases__card-desc {
        max-width: none;
    }

    /* 타임라인 3열: 고정 204px → 가변폭(1fr) 유지 */
    .cases__timeline {
        width: 100%;
    }

    .cases__timeline-item {
        flex: 1;
        width: auto;
    }

    /* 태그 2열: 고정 303px → 가변폭(1fr) 유지 */
    .cases__tag {
        flex: 1;
        width: auto;
    }

    /* 판결문 이미지: 본문 아래 중앙 정렬, 최대폭 제한 */
    .cases__card-media {
        width: 100%;
        max-width: 480px;
        align-self: center;
    }

    .cases__card-note {
        right: 0;
    }
    /* [cases] 성공사례 태블릿 스타일 끝 */


    /* [reviews] 고객 후기 태블릿 스타일 시작 */
    /* PC 2단(좌측 텍스트 415 + 슬라이더 1099, inner 1560 고정·중앙) → 세로 스택 + JS 카드 슬라이더(ui.js) 유지.
       슬라이더는 transform 기반(getStep이 카드폭을 실측)이라 카드폭만 줄이면 nav 버튼 이동이 그대로 동작한다. */
    .reviews {
        overflow: hidden !important;
    }
       
    .reviews__inner {
        flex-direction: column;
        align-items: stretch;
        left: auto;
        width: 100%;
        transform: none;
        gap: 48px;
        padding: 0 40px;
        box-sizing: border-box;
    }

    .reviews__left {
        width: 100%;
        padding-top: 0; /* 일러스트용 상단 여백(409) 해제 */
    }

    /* 배경 일러스트: 우측 상단에 은은하게 걸치도록 재배치 + 좌우 반전 (found 태블릿과 동일 방향) */
    .reviews__illust {
        top: -20px;
        left: auto;
        right: -200px;
        width: 520px;
        height: auto;
    }

    .reviews__illust img {
        height: auto; /* 컨테이너 height:auto에 맞춰 비율대로 표시(0 붕괴 방지) */
        transform: scaleX(-1);
    }

    .reviews__desc {
        margin-bottom: 40px; /* PC 91 → 축소 (아래 nav 버튼과의 간격) */
    }

    /* 슬라이더: 고정폭 1099 → 전체 폭, 상단 여백(189) 해제 */
    .reviews__slider {
        width: 100%;
        margin-top: 0;
    }
    /* 우측 끝 페이드는 PC(3장 노출)에서만 — 태블릿 이하는 숨김 */
    .reviews__slider::after {
        display: none;
    }

    /* 카드: PC 361 → 330 (세로도 비율 축소) */
    .reviews__card {
        width: 330px;
        height: 620px;
    }
    /* [reviews] 고객 후기 태블릿 스타일 끝 */


    /* [practice] 취급분야 + 전문센터 태블릿 스타일 시작 */
    /* PC inner 좌우 240px → 40px 축소. 취급분야 리스트는 항목 폭 합이 화면을 넘으므로
       가운데 정렬 → 좌측 정렬 + 가로 스크롤로 전환(줄바꿈 붕괴 방지).
       전문센터는 3단 가로를 유지하되 좌우 패널을 가변폭(flex:1)·중앙 이미지를 고정폭으로 줄여 붕괴 방지. */
    .practice {
        padding: 60px 0 0;
    }

    .practice__inner {
        padding: 0 40px;
    }

    .practice__head {
        margin-bottom: 40px;
    }

    .practice__title {
        font-size: 34px;
        letter-spacing: -1.6px;
    }

    /* 취급분야: 모바일과 동일한 3×3 이미지 카드 그리드 (Figma).
       groups=그리드, row/list=display:contents 로 풀어 li 9개를 3열 그리드에 직접 배치. */
    .practice__groups {
        border-top: 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    .practice__row {
        display: contents;
        border-bottom: 0;
    }
    .practice__list {
        display: contents;
        padding: 0;
    }
    .practice__item {
        margin: 0;
    }
    .practice__item.is-marquee-clone {
        display: none;
    }
    .practice__link {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        aspect-ratio: 130 / 124;
        overflow: hidden;
    }
    .practice__link::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(35, 29, 22, 0.24) 0%, rgba(35, 29, 22, 0.6) 100%);
        pointer-events: none;
    }
    .practice__thumb {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
    .practice__name {
        position: relative;
        z-index: 1;                /* 그라데이션(::after) 위로 라벨 */
        color: #fff;
        font-size: 20px;
        letter-spacing: -0.2px;
        white-space: nowrap;
    }

    /* 전문센터: 좌우 패널 가변폭 + 중앙 이미지 고정폭으로 축소(가로 3단 유지) */
    /* 부모(.practice)가 flex-column이라 좌우 auto 마진이 stretch를 막는다 →
       width:100% + margin 좌우 0으로 전체 폭 강제 */
    .centers {
        width: 100%;
        max-width: none;
        margin: 0;
    }
    .centers__panel,
    .centers__panel--criminal {
        flex: 1 1 0;
        width: auto;
        padding: 60px 0 0 40px;
    }
    .centers__picture {
        flex: 0 0 200px;
        display: none;
    }
    /* 버튼: 패널 폭이 가변이라 left 고정값 대신 우측 기준으로 재배치 */
    .centers__panel--divorce .centers__btn,
    .centers__panel--criminal .centers__btn {
        left: auto;
        right: 40px;
    }
    /* [practice] 취급분야 + 전문센터 태블릿 스타일 끝 */


    /* [consultation] 상담 전 FAQ 태블릿 스타일 시작 */
    /* PC는 풀페이지 Swiper 슬라이드(min-height 1080)라 layout.css가 ≤1024에서
       height:auto로 흐름을 풀어도 min-height 1080이 남아 거대한 빈 공간이 생긴다 → 해제.
       중앙 1200 컨테이너에는 좌우 패딩이 없어 콘텐츠가 화면 가장자리에 붙으므로 40px 패딩 부여.
       세로 적층(타이틀 블록 + full-bleed 아코디언) 구조와 JS 토글 동작은 그대로 유지. */
    .consultation {
        min-height: 0;
    }

    .consultation__inner {
        max-width: none;
        padding: 60px 40px 100px;
    }

    .consultation__left {
        margin-bottom: 72px;
    }

    .consultation__title {
        font-size: 34px;
        line-height: 1.35;
        letter-spacing: -1.36px;
    }

    .consultation__desc {
        font-size: 18px;
        line-height: 1.6;
    }

    /* 문항이 좁아진 폭에서 2줄로 넘칠 수 있어 line-height 확보 */
    .consultation__question-text {
        font-size: 20px;
        line-height: 1.4;
    }
    /* [consultation] 상담 전 FAQ 태블릿 스타일 끝 */


    /* [contact] 상담 신청 폼 태블릿 스타일 시작 */
    /* PC 2단(1920 고정 inner + 우측 배경 이미지) → 세로 1단(상단 히어로 + 폼)으로 전환.
       ≤1024에서 Swiper가 해제(layout.css)되므로 일반 흐름에 맞춰 재구성한다. */

    /* 슬라이드 상단 헤더 클리어 패딩(layout.css 92px) 해제 → 히어로가 최상단에 붙도록.
       (layout.css의 :not(...) 규칙보다 특정성을 높여 확실히 덮어씀) */
    .main.swiper .swiper-slide.contact:not(.visual):not(.attorney):not(.footer) {
        padding-top: 0;
    }

    /* 우측 배경 이미지는 숨기고, 상단 히어로 요소로 대체 */
    .contact::after {
        display: none;
    }

    .contact__hero {
        display: block;
        width: 100%;
        height: 360px;
        background: url(../images/main/contact-office.webp) no-repeat center 30%;
        background-size: cover;
    }

    /* 1920 고정 2단 → 세로 1단 흐름 */
    .contact__inner {
        display: block;
        left: auto;
        width: 100%;
        min-height: 0;
        transform: none;
    }

    /* 베이지 폼 패널: 전체 폭, 좌우 40 여백, 폼은 중앙 정렬(과확장 방지) */
    .contact__form-wrap {
        width: 100%;
        padding: 56px 40px 80px;
    }

    .contact__form {
        width: 100%;
        max-width: 611px;
        margin: 0 auto;
    }

    .contact__subtitle {
        font-size: 20px;
        line-height: 32px;
    }

    .contact__title {
        margin-bottom: 40px;
        font-size: 36px;
        line-height: 1.4;
        letter-spacing: -1.6px;
    }
    /* [contact] 상담 신청 폼 태블릿 스타일 끝 */

}


/* ===== 모바일 반응형 (max-width: 768px) ===== */
@media (max-width: 768px) {

    /* [visual] 메인 비주얼 모바일 스타일 시작 */
    .main.swiper .swiper-slide.visual {
        height: calc(100vh - 64px);  /* 폴백: dvh 미지원 브라우저 */
        height: calc(100dvh - 64px); /* 주소창 표시/숨김에 따른 실제 보이는 높이 반영 */
        max-height: 813px;
        /*aspect-ratio: 391 / 502;*/
        background-color: #130C04; /* 영상 축소 시 드러나는 여백을 다크로 채움 */
    }

    /* 배경 영상: 모바일에서는 살짝 축소해 더 넓게 보이도록 (cover 확대 완화) */
    .visual__video {
        transform: translate(-50%, -50%) scale(0.8);
    }

    .visual__inner {
        width: 100%;
        padding: 0;
    }

    .visual__title {
        margin-top: 135px;
        padding: 0 20px;
    }

    .visual__title-top {
        margin-bottom: 12px;
        font-size: 16px;
        color: #F3E0C0;
        text-shadow: 5px 2px 7px rgba(0, 0, 0, 0.55), 5px 2px 7px rgba(0, 0, 0, 0.25);
    }

    .visual__title-main {
        font-size: 31px;
        line-height: 1.35;
        letter-spacing: -1.2px;
        text-shadow: 5px 2px 7px rgba(0, 0, 0, 0.55);
    }

    /* 모바일: "화신이 있어야 / 이깁니다" 2줄 (Figma 모바일 스펙) */
    .visual__title-br {
        display: inline;
    }

    /* 서브 텍스트: Figma 하단 다크 컨테이너(#130C04) 재현 - 전체 폭 다크 배경.
       .visual__inner가 이미 전체 폭(width:100%, padding:0)이므로 full-bleed 트릭 없이
       width:100%만으로 좌우 꽉 차게 한다. (100vw+transform은 flex 부모와 충돌해 좌측 overflow 발생) */
    .visual__subtext {
        margin-bottom: 0;
        width: 100%;
        box-sizing: border-box;
        padding: 24px 20px;
        background-color: #130C04;
    }

    .visual__subtext-info {
        margin-bottom: 8px;
        font-size: 14px;
        color: #D5BB8F;
        text-shadow: none;
    }

    .visual__subtext-promise {
        font-size: 18px;
        text-shadow: none;
    }
    /* [visual] 메인 비주얼 모바일 스타일 끝 */


    /* [found] 화신이 이긴 사건들 모바일 스타일 시작 */
    /* Figma 모바일 스펙 기준 (node-id: 2023-2188), 좌측 정렬 · 좌우 20px 패딩
       세로 간격은 Figma 수치와 동일하게: 상단 40 / 킥커→타이틀 27 / 타이틀→서브 25 /
       서브→카드 71 / 하단 60 (px) */
    .found {
        padding: 0px!important;
    }
    
    .found__inner {
        padding-block: 40px 60px;
        padding-inline: 20px;
        gap: 71px; /* found__desc ↔ 카드 슬라이드 사이 간격 (Figma 257→328) */
    }

    .found__kicker {
        font-size: 16px;
        line-height: 22px;
    }

    /* 배경 일러스트: 우측 상단에 살짝 걸치게 (Figma 약 345px 폭) */
    .found__illust {
        top: 100px;
        right: 10px;
        width: 340px;
    }

    .found__title {
        margin-top: 27px; /* 킥커 → 타이틀 (Figma) */
        font-size: 34px;
        line-height: 45px;
        letter-spacing: -1.36px;
    }

    .found__desc {
        margin-top: 25px; /* 타이틀 → 서브텍스트 (Figma) */
        font-size: 16px;
        line-height: 26.5px;
        letter-spacing: -0.16px;
    }

    /* 카드 슬라이더: Figma 폭 210px · 간격 10px (가로는 가변, 세로는 Figma 수치 고정) */
    .found__cards {
        column-gap: 10px;
    }

    .found__card {
        width: 210px;
    }

    .found__card-img {
        height: 298px;      /* Figma 카드 이미지 높이 */
        border-radius: 10px;
    }
    
    .found__card-img img {
        object-position: top;
    }

    .found__card-text {
        margin-top: 21px;   /* 이미지 → 텍스트 (Figma flex gap) */
    }

    .found__card-title {
        margin-bottom: 21px; /* 카드 제목 → 본문 (Figma flex gap) */
        font-size: 22px;
        line-height: 1.3;
        letter-spacing: -0.44px;
        color: #0F0F0F;
    }

    .found__card-desc {
        font-size: 16px;
        line-height: 1.7;
        letter-spacing: -0.32px;
    }
    /* [found] 화신이 이긴 사건들 모바일 스타일 끝 */


    /* [attorney] 대표변호사 모바일 스타일 시작 */
    /* Figma 모바일 스펙 기준 (node-id: 2110-2187)
       히어로(다크레드, Figma 612): 좌측 인물(미러링) + 우측 증서 2장 세로 스택.
       영문 타이틀 1줄, 직함/이름 우측 정렬. 3원칙 grid(3열) → 1열 세로 스택.
       헤더(fixed 84px)에 가리지 않도록 히어로 내부 레이아웃을 +69px 아래로 오프셋. */
    .attorney__inner {
        flex-direction: column;
        left: auto;
        width: 100%;
        height: auto;
        transform: none;
    }

    /* 상단 히어로: 다크레드 판넬. Figma 612 + 헤더 클리어 오프셋 69 = 681 */
    .attorney__profile {
        width: 100%;
        min-height: 620px;
        padding: 21px 35px 0;        /* 상단 90 = 헤더(84) 클리어, 좌우 35 = Figma 텍스트 레일 */
    }

    /* 로마 기둥 배경 장식: Figma left -215 기준 */
    .attorney__profile-deco {
        left: -215px;
        width: auto;
        height: 100%;
    }

    /* 영문 타이틀: Figma 1줄 · 28 / 37.8 (#743B3A) */
    .attorney__eng-title {
        font-size: 28px;
        line-height: 37.8px;
        text-align: center;
    }
    .attorney__eng-br {
        display: none;               /* PC는 2줄, 모바일은 1줄 */
    }

    /* 직함 + 이름: 우측 정렬 (Figma right rail, 우측 35) */
    .attorney__name-group {
        margin-top: 31px;
        text-align: right;
    }
    .attorney__role {
        margin-bottom: 14px;
        font-size: 16px;
    }
    .attorney__name-main {
        font-size: 37px;
        letter-spacing: -2.22px;
    }
    .attorney__name-suffix {
        font-size: 23px;
    }

    /* 인물 사진: 좌측 하단 정렬 + 좌우 반전(Figma 미러링), 276×429 */
    .attorney__photo {
        top: auto;
        left: -43px;
        right: auto;
        bottom: 0;
        width: 276px;
        height: 429px;
    }

    /* 전문분야 등록증서: 히어로 우측 세로 스택으로 이동.
       콘텐츠(본디 부모)를 static 처리해 증서 absolute 기준을 inner(히어로 포함)로 끌어올림. */
    .attorney__content {
        position: static;
        padding: 36px 20px 60px;     /* 히어로 아래 36 (Figma 612→648) */
    }
    .attorney__certs {
        position: absolute;
        top: 235px;                  /* Figma 226 + 오프셋 69 */
        right: 35px;
        left: auto;
        flex-direction: column;
        gap: 13px;
        width: 114.86px;             /* Figma 증서 폭 */
        margin: 0;
        z-index: 2;
    }
    .attorney__cert {
        width: 100%;
        height: auto;
        aspect-ratio: 115 / 162;     /* Figma 114.86 × 162.34 */
        border-width: 1px;
        box-shadow: 3px 3px 9px rgba(0, 0, 0, 0.1);
    }

    .attorney__headline {
        width: 100%;
        padding-left: 15px;
        font-size: 27px;
        line-height: 42px;
        letter-spacing: -1.08px;
    }
    /* 슬로건: 모바일 전용 줄바꿈 노출 (Figma 4줄 구성) */
    .attorney__headline-br {
        display: inline;
    }

    /* 3원칙: 3열 grid → 1열 세로 스택 (블록 pitch 242) */
    .attorney__principles {
        margin-top: 28px;            /* 헤드라인 → 첫 원칙 (Figma 816→844) */
        grid-template-columns: 1fr;
        row-gap: 43px;
        padding-left: 15px;
    }
    .attorney__principle-line {
        width: 73.56px;
    }
    .attorney__principle-label {
        gap: 8px;
        margin-bottom: 8px;
        font-size: 14px;
    }
    .attorney__principle-title {
        margin-bottom: 36px;
        font-size: 22px;
        line-height: 1.5;
        letter-spacing: -0.44px;
    }
    .attorney__principle-desc {
        font-size: 17px;
        letter-spacing: -0.34px;
    }

    /* CTA 버튼: absolute → 일반 흐름, 전체 폭 (Figma 349×67, radius 77) */
    .attorney__more {
        position: static;
        width: 100%;
        margin-top: 60px;            /* 마지막 원칙 → 버튼 (Figma 1527→1587) */
        padding: 24px 27px;
        border-radius: 77px;
    }
    .attorney__more-text {
        font-size: 20px;
    }
    .attorney__more-icon {
        width: 17px;
        height: 17px;
    }
    /* [attorney] 대표변호사 모바일 스타일 끝 */


    /* [cases] 성공사례 모바일 스타일 시작 */
    /* Figma 모바일 스펙 기준 (node-id: 2026-2191), 좌우 20px 패딩.
       PC 가로 2단 카드 → 세로 1단 스택. 타임라인 3열→세로, 태그 2열→세로 pill.
       필터는 라벨이 길어(5개) 가로 스크롤 행으로 처리해 줄바꿈 붕괴를 막는다. */
    .main .cases {
        padding-top: 0px !important;
    }
    
    .cases__inner {
        padding: 40px 20px 60px;
        overflow: hidden;
    }

    /* 헤드: 킥커 16 / 타이틀 34 (Figma) */
    .cases__head {
        margin-bottom: 40px;
    }

    .cases__kicker {
        margin-bottom: 12px;
        font-size: 16px;
    }

    .cases__title {
        font-size: 34px;
        line-height: 45px;
        letter-spacing: -1.36px;
    }

    /* 분야 탭: 고정 160px → 균등 분할(flex:1), 18px */
    .cases__tabs {
        gap: 0;
        margin-bottom: 32px;
    }

    .cases__tab {
        flex: 1;
        width: auto;
        padding-bottom: 14px;
        font-size: 18px;
        letter-spacing: -0.54px;
    }

    /* 카테고리 필터: 5개 라벨을 3열 기준으로 2줄 wrap (마지막 줄 좌측 정렬) */
    .cases__filter {
        gap: 8px;
        max-width: none;
        margin-bottom: 24px;
        flex-wrap: wrap;
    }

    .cases__filter-item {
        flex: 0 0 calc((100% - 16px) / 3);
    }

    .cases__filter-btn {
        height: 48px;
        padding: 0 8px;
        border-radius: 6px;
        font-size: 13px;
        letter-spacing: -0.3px;
        white-space: nowrap;
    }

    /* 카드: 가로 2단 → 세로 스택 */
    .cases__card {
        flex-direction: column;
        gap: 28px;
        width: 100%;
        min-height: 0;
        padding: 24px 20px;
        border-radius: 18px;
    }

    .cases__card-content {
        width: 100%;
    }

    .cases__card-badge {
        width: 112px;
        height: 40px;
        margin-bottom: 14px;
        border-radius: 7px;
        font-size: 13.5px;
        letter-spacing: -0.4px;
    }

    .cases__card-title {
        margin-bottom: 12px;
        font-size: 21px;
        line-height: 1.4;
        letter-spacing: -0.65px;
    }

    .cases__card-desc {
        margin-bottom: 46px;
        max-width: none;
        font-size: 14.5px;
        line-height: 1.7;
        letter-spacing: -0.29px;
    }

    .cases__evidence {
        gap: 38px;
    }

    /* 타임라인: 3열 가로 → 세로 스택(상단 구분선 유지) */
    .cases__timeline {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    .cases__timeline-item {
        width: 100%;
        padding: 12px 0;
        border-top-width: 1px;
    }

    .cases__timeline-title {
        margin-bottom: 6px;
        font-size: 16px;
        letter-spacing: -0.48px;
    }

    .cases__timeline-desc {
        font-size: 14.5px;
        line-height: 1.5;
        letter-spacing: -0.29px;
    }

    /* 혐의/결과 태그: 가로 2열 → 세로 스택(풀폭 pill) */
    .cases__tags {
        flex-direction: column;
        gap: 15px;
        width: 100%;
    }

    .cases__tag {
        width: 100%;
        height: 46px;
        gap: 16px;
        padding: 15px 24px;
        border-radius: 40px;
    }

    .cases__tag-label {
        font-size: 14px;
        font-weight: 700;
    }

    .cases__tag-value {
        font-size: 16.5px;
    }

    /* 판결문 이미지: 본문 아래 전체 폭, 안내문구는 이미지 위(Figma) */
    .cases__card-media {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-self: center;
    }

    .cases__card-note {
        position: static;
        order: -1;
        right: auto;
        bottom: auto;
        width: 100%;
        margin-bottom: 8px;
        font-size: 9px;
        text-align: center;
    }

    /* CTA 버튼: 전체 폭 pill (Figma 349×67, radius 77) */
    .cases__more {
        width: 100%;
        margin-top: 32px;
        padding: 24px 28px;
        border-radius: 77px;
        justify-content: center; /* 전체 폭이라도 텍스트+화살표를 가운데로 모아 오른쪽 여백 방지 */
    }

    .cases__more-text {
        font-size: clamp(16px, 5vw, 20px); /* 좁은 화면에서 긴 텍스트 오버플로 방지, 기본 20px 유지 */
    }

    .cases__more-icon {
        width: 17px;
        height: 17px;
    }

    /* ── 모바일 무한 슬라이더(Figma node 2110-2189) ──
       카테고리 필터·타임라인·태그를 감춘 간결 카드를 좌우로 무한 슬라이드한다.
       .is-mslider 는 JS(ui.js)가 모바일 브레이크포인트에서 .cases 에 부여한다. */
    .cases.is-mslider .cases__filter {
        display: none;
    }

    /* inner 는 .cases(세로 flex)의 아이템이라 min-width:auto 로 두면 트랙의 min-content(≈1880px)만큼
       가로로 부풀어 화면을 뚫는다. min-width:0 으로 컨테이너 폭에 맞춰 접고, 넘치는 트랙은 패널이 잘라낸다. */
    .cases.is-mslider .cases__inner {
        min-width: 0;
        width: 100%;
    }

    /* 패널 = 뷰포트(넘치는 트랙을 잘라낸다) */
    .cases.is-mslider .cases__panel {
        overflow: hidden;
    }

    /* 트랙: 카드들을 가로로 나열하고 transform 으로 이동 */
    .cases.is-mslider .cases__track {
        display: flex;
        gap: 12px;
        align-items: stretch;
        will-change: transform;
    }

    /* 슬라이드 카드: 고정 폭(Figma 307) · 세로 스택 유지 */
    .cases.is-mslider .cases__track > .cases__card {
        display: flex;
        flex-direction: column;
        flex: 0 0 auto;
        width: min(307px, 80vw);
        min-height: 0;
        margin: 0;
        gap: 20px;
        padding: 26px 24px 28px;
    }

    /* 타임라인·태그(evidence)는 모바일 슬라이더에서 감춘다 */
    .cases.is-mslider .cases__evidence {
        display: none;
    }

    /* 배지: 빨강 pill → 대괄호 텍스트(#293B43) */
    .cases.is-mslider .cases__card-badge {
        width: auto;
        height: auto;
        margin-bottom: 16px;
        padding: 0;
        justify-content: flex-start;
        background: transparent;
        border-radius: 0;
        font-weight: 400;
        font-size: 14px;
        letter-spacing: -0.28px;
        color: #293B43;
    }

    .cases.is-mslider .cases__card-badge::before { content: '['; }
    .cases.is-mslider .cases__card-badge::after  { content: ']'; }

    .cases.is-mslider .cases__card-title {
        margin-bottom: 14px;
        font-size: 22px;
        line-height: 1.35;
        letter-spacing: -0.66px;
    }

    /* 설명: 3줄 말줄임(Figma 3줄 고정) */
    .cases.is-mslider .cases__card-desc {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 0;
        font-size: 14px;
        line-height: 1.7;
        letter-spacing: -0.28px;
    }

    /* 판결문 이미지 캡션(이미지 위, 가운데) */
    .cases.is-mslider .cases__card-note {
        font-size: 9px;
    }
    /* [cases] 성공사례 모바일 스타일 끝 */


    /* [reviews] 고객 후기 모바일 스타일 시작 */
    /* Figma 모바일 스펙 기준 (node-id: 2026-2192), 좌측 정렬 · 좌우 20px 패딩.
       PC 2단 → 세로 스택. 카드는 Figma 폭 307 · 간격 11 · 높이 560(≈PC 660×0.85).
       슬라이드는 기존 transform 슬라이더(ui.js) + 좌/우 nav 버튼으로 동작(모바일 스와이프 대체). */
    .reviews {
        padding: 40px 0 60px !important;
    }

    .reviews__inner {
        flex-direction: column;
        align-items: stretch;
        left: auto;
        width: 100%;
        transform: none;
        gap: 30px;
        padding: 0 20px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .reviews__left {
        width: 100%;
        padding-top: 0;
    }

    /* 배경 일러스트: 우측에 은은하게 걸치도록 (Figma 타이틀 우측 뒤 장식) */
    .reviews__illust {
        top: 160px;
        left: auto;
        right: -50px;
        width: 400px;
        height: auto;
    }

    .reviews__illust img {
        height: auto;
        transform: scaleX(-1);
    }

    /* 킥커 "Client Reviews" (Figma 16 / line 22 / 킥커→타이틀 26) */
    .reviews__kicker {
        margin-bottom: 26px;
        font-size: 16px;
        line-height: 22px;
    }

    /* 타이틀 (Figma 34 / line 45 / -1.36 / 타이틀→서브 25) */
    .reviews__title {
        margin-bottom: 25px;
        font-size: 34px;
        line-height: 45px;
        letter-spacing: -1.36px;
    }

    /* 서브텍스트 (Figma 16 / line 26.5 / -0.16), 모바일에서만 2줄로 줄바꿈 */
    .reviews__desc {
        margin-bottom: 40px;
        font-size: 16px;
        line-height: 26.5px;
        letter-spacing: -0.16px;
    }

    .reviews__desc-br {
        display: inline;
    }

    /* nav 버튼: 모바일에서는 숨김 (드래그/스와이프로 슬라이드) */
    .reviews__nav {
        display: none;
    }

    /* 슬라이더: 전체 폭, 상단 여백 해제 */
    .reviews__slider {
        width: 100%;
        margin-top: 0;
    }

    /* 카드 간격: Figma 11px */
    .reviews__slide {
        margin-right: 11px;
    }

    /* 카드: 모바일 폭 307(좁은 화면은 폭 캡), 내부 좌우 패딩 28 */
    .reviews__card {
        width: 307px;
        max-width: calc(100vw - 60px);
        height: 550px;
        padding: 24px 28px 26px;
        border-radius: 20px;
    }

    /* 사건 유형 태그 */
    .reviews__card-tag {
        padding: 6px 18px;
        font-size: 13px;
        border-radius: 7px;
    }

    /* 의뢰인 정보 */
    .reviews__card-meta {
        margin-top: 12px;
        font-size: 11.5px;
    }

    .reviews__card-meta::before,
    .reviews__card-meta::after {
        width: 18px;
    }

    /* 인용문 + 근황 본문 묶음: 대화 캡처와의 간격 축소 */
    .reviews__card-body {
        margin-top: 18px;
    }

    /* 후기 헤드라인 */
    .reviews__card-quote {
        font-size: 16.8px;
        letter-spacing: -0.5px;
    }

    /* 후기 본문 */
    .reviews__card-summary {
        margin-top: 13px;
        font-size: 11.2px;
        letter-spacing: -0.22px;
    }

    /* 결과 배지 */
    .reviews__card-result {
        padding: 13px 18px;
        font-size: 15px;
    }
    /* [reviews] 고객 후기 모바일 스타일 끝 */


    /* [practice] 취급분야(Practice Areas) 모바일 스타일 시작 */
    /* Figma 모바일 스펙 기준 (node-id: 751-64858).
       기존 무한 롤링(마퀴)을 걷어내고, 9개 항목을 3×3 이미지 카드 그리드로 표시한다.
       DOM 순서(가사 5 + 형사 4)가 Figma 읽기 순서(이혼·상간소송·재산분할 / 양육권·상속·고소대리 /
       음주운전·성범죄·사기죄)와 일치하므로, row/list를 display:contents 로 풀어
       groups 그리드에 li 9개가 직접(간격 0, full-bleed) 배치되게 한다. */
    .practice {
        padding: 40px 0 0 !important;
    }

    .practice__inner {
        padding: 0 20px;
    }

    .practice__head {
        margin-bottom: 59px;       /* Figma: 서브텍스트 하단 → 카드 그리드 상단 간격 */
    }

    .practice__kicker {
        margin-bottom: 12px;
        font-size: 16px;
        line-height: 22px;
    }

    .practice__title {
        margin-bottom: 16px;
        font-size: 34px;
        line-height: 45px;
        letter-spacing: -1.36px;
    }

    .practice__desc {
        font-size: 16px;
        line-height: 26.5px;
        letter-spacing: -0.16px;
    }

    /* 줄바꿈: 모바일 전용 br 노출 (Figma 모바일 스펙 줄바꿈 반영) */
    .practice .br-mo {
        display: inline;
    }

    /* 3×3 그리드: groups가 그리드 컨테이너, row/list는 display:contents로 통과시켜
       두 리스트의 li 9개가 하나의 3열 그리드에 이어서 배치되게 한다(간격 0, full-bleed). */
    .practice__groups {
        border-top: 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    .practice__row {
        display: contents;
        border-bottom: 0;
    }
    .practice__list {
        display: contents;
        padding: 0;
    }
    .practice__item {
        margin: 0;
    }
    /* 무한 롤링 복제본은 그리드에서 제외(마퀴 비활성으로 생성되지 않지만 안전장치) */
    .practice__item.is-marquee-clone {
        display: none;
    }

    /* 카드: 이미지 위에 하단이 짙어지는 그라데이션 + 흰색 라벨(가운데 정렬).
       카드 비율은 Figma 130×124. 라벨은 카드 세로 중앙에 배치된다. */
    .practice__link {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        aspect-ratio: 130 / 124;
        overflow: hidden;
    }
    .practice__link::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(35, 29, 22, 0.24) 0%, rgba(35, 29, 22, 0.6) 100%);
        pointer-events: none;
    }
    .practice__thumb {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
    .practice__name {
        position: relative;
        z-index: 1;                /* 그라데이션(::after) 위로 라벨을 올린다 */
        color: #fff;
        font-size: 17px;
        line-height: 38.274px;
        letter-spacing: -0.246px;
        white-space: nowrap;
    }
    /* [practice] 취급분야(Practice Areas) 모바일 스타일 끝 */


    /* [centers] 전문센터 안내 모바일 스타일 시작 */
    /* Figma 모바일: 중앙 이미지(full-bleed) → 이혼 패널 → 형사 패널 세로 스택.
       DOM 순서(이혼 패널 / 이미지 / 형사 패널)와 표시 순서가 다르므로
       이미지를 order:-1 로 최상단에 배치한다. 각 패널 390×159 비율, 우측 원형 화살표 버튼. */
    /* 부모(.practice)가 flex-column이라 좌우 auto 마진이 stretch를 막는다 →
       width:100% + margin 0으로 전체 폭(full-bleed) 강제 */
    .centers {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .centers__row {
        flex-direction: column;
        height: auto;
    }

    /* 중앙 이미지: 최상단 full-bleed (Figma 392×176) */
    .centers__picture {
        display: none;
        order: -1;
        width: 100%;
        height: fit-content;
    }

    /* 좌/우 패널 → 전체 폭 세로 스택 (Figma 높이 159) */
    .centers__panel,
    .centers__panel--criminal {
        flex: none;
        width: 100%;
        height: 159px;
        padding: 27px 0 0 21px;
    }

    .centers__title {
        margin-bottom: 12px;
        font-size: 20px;
    }

    .centers__desc {
        font-size: 14px;
        line-height: 23.8px;
    }

    /* 줄바꿈: 모바일 전용 br 노출 (Figma 모바일 스펙 줄바꿈 반영) */
    .centers .br-mo {
        display: inline;
    }

    /* 원형 화살표 버튼: 우측 정렬 (Figma 38.3px, 우측 30 / 패널 상단 기준 89) */
    .centers__btn {
        top: 89px;
        padding: 6px;
    }
    .centers__panel--divorce .centers__btn,
    .centers__panel--criminal .centers__btn {
        left: auto;
        right: 30px;
    }
    .centers__btn img {
        width: 25px;
        height: 25px;
    }
    /* [centers] 전문센터 안내 모바일 스타일 끝 */


    /* [consultation] 상담 전 FAQ 모바일 스타일 시작 */
    /* Figma 모바일 스펙 기준 (node-id: 2027-2194), 좌측 정렬 · 좌우 20px 패딩.
       PC 풀페이지 Swiper(min-height 1080)·중앙 1200 컨테이너 → 일반 흐름(콘텐츠 높이).
       세로 적층(타이틀 블록 + full-bleed FAQ 아코디언) 구조와 JS 아코디언 토글은 그대로,
       폰트·간격만 Figma 수치로 축소한다. (아코디언이라 가로 슬라이드 전환은 없음) */
    .consultation {
        padding-top: 10px !important;
        min-height: 0;
    }

    .consultation__inner {
        max-width: none;
        padding: 40px 20px 60px;
    }

    /* 상단 타이틀 블록: 킥커 16 / 타이틀 34 / 서브 16, 서브 → 아코디언 60px */
    .consultation__left {
        margin-bottom: 60px;
    }

    .consultation__kicker {
        margin-bottom: 22px;
        font-size: 16px;
        line-height: 22px;
    }

    .consultation__title {
        margin-bottom: 24px;
        font-size: 34px;
        line-height: 45px;
        letter-spacing: -1.36px;
    }
    /* 모바일 전용 줄바꿈: "연락하기 전에 / 이런 게 걱정되셨나요?" (Figma 2줄) */
    .consultation__title-br {
        display: inline;
    }

    .consultation__desc {
        font-size: 16px;
        line-height: 26.5px;
        letter-spacing: -0.16px;
    }

    /* 아코디언: full-bleed 구분선 유지, 문항 내부 좌우 여백 축소(좌 10 → 텍스트 좌 30 정렬) */
    .consultation__item {
        padding: 26px 10px;
    }

    .consultation__question {
        gap: 20px;
        align-items: flex-start;
    }

    .consultation__question-text {
        font-size: 18px;
        line-height: 27px;
        letter-spacing: -0.5px;
    }

    /* +/- 토글 아이콘: Figma 15.75px → 16px */
    .consultation__question-icon {
        width: 16px;
        height: 16px;
        margin-top: 6px;
    }
    .consultation__question-icon::before {
        width: 16px;
    }
    .consultation__question-icon::after {
        height: 16px;
    }

    /* 답변: 문항과 20px 간격, 전체 폭(14 / line 23) */
    .consultation__answer {
        margin-top: 20px;
    }

    .consultation__answer-text {
        width: 100%;
        font-size: 14px;
        line-height: 23px;
        letter-spacing: -0.056px;
        padding-right: 40px;
    }
    /* [consultation] 상담 전 FAQ 모바일 스타일 끝 */


    /* [contact] 상담 신청 폼 모바일 스타일 시작 */
    /* Figma 모바일 스펙 기준 (node-id: 2027-2195), 좌우 22px 패딩.
       상단 히어로 이미지(사무실) → 하단 베이지 폼 패널 세로 적층.
       치수·폰트는 Figma 수치(390 기준)로 축소, 태블릿 규칙 위에서 덮어쓴다. */

    /* 히어로: Figma 이미지 영역 비율(390:586)로 세로형 표시 */
    .contact__hero {
        height: auto;
        aspect-ratio: 390 / 586;
        background-position: right;
    }

    /* 폼 패널: 좌우 22 패딩, 폼 전체 폭 사용 */
    .contact__form-wrap {
        padding: 44px 22px 48px;
    }

    .contact__form {
        max-width: 100%;
        margin: 0;
    }

    /* 서브카피 (Figma 16 / line 25.9 / -0.16 / #961B1E) */
    .contact__subtitle {
        margin-bottom: 4px;
        font-size: 16px;
        line-height: 25.9px;
        letter-spacing: -0.16px;
    }

    /* 타이틀 (Figma 34 / line 45 / -1.36, 자연 2줄 줄바꿈) */
    .contact__title {
        margin-bottom: 50px;
        font-size: 34px;
        line-height: 45px;
        letter-spacing: -1.36px;
    }

    /* 줄바꿈: 모바일 전용 br 노출 (Figma 모바일 스펙 줄바꿈 반영) */
    .contact .br-mo {
        display: inline;
    }

    /* 필드 간격 (Figma 라벨 간 cadence ≈ 96px) */
    .contact__field {
        margin-bottom: 30px;
    }

    /* 라벨 (Figma 16 / SemiBold, 라벨→필드 ≈ 9px) */
    .contact__label {
        margin-bottom: 9px;
        font-size: 16px;
        line-height: 1;
    }

    .contact__required {
        font-size: 10px;
    }

    /* 인풋/셀렉트/텍스트영역: Figma 16px, radius 6, 좌우 12 패딩 */
    .contact__input,
    .contact__select,
    .contact__textarea {
        border-radius: 6px;
        font-size: 16px;
    }

    .contact__input,
    .contact__select {
        height: 40px;
        padding: 0 12px;
    }

    .contact__input::placeholder,
    .contact__select:invalid,
    .contact__textarea::placeholder {
        font-size: 16px;
    }

    .contact__textarea {
        height: 100px;
        padding: 12px;
    }

    /* 연락처 3분할: 간격 축소, 가운데 정렬 유지 */
    .contact__phone-group {
        gap: 8px;
    }

    .contact__phone-dash {
        font-size: 16px;
    }

    /* 거주지역·상담분야: PC 2열 → 모바일 세로 1열(Figma) */
    .contact__row {
        flex-direction: column;
        gap: 0px;
        margin-bottom: 0px;
    }

    /* 커스텀 셀렉트: 인풋과 동일하게 40 높이 / radius 6 / 16px */
    .contact .consult-select__toggle {
        height: 40px;
        padding: 0 12px;
        border-radius: 6px;
    }

    .contact .consult-select__value {
        font-size: 16px;
    }

    .contact .consult-select__option {
        height: 40px;
        padding: 0 12px;
        font-size: 16px;
    }

    /* 개인정보 동의: Figma 가운데 정렬, 2줄 문구 */
    .contact__agree {
        justify-content: center;
        margin-top: 30px;
        margin-bottom: 22px;
        text-align: center;
    }

    .contact__agree-label {
        font-size: 14px;
        line-height: 1.5;
    }

    /* 상담 신청 버튼: 전체 폭 pill(Figma 349×67 / radius 77 / 텍스트 20 Bold) */
    .contact__submit {
        width: 100%;
        padding: 22px 28px;
        border-radius: 77px;
    }

    .contact__submit-text {
        font-size: 20px;
    }

    .contact__submit-icon {
        width: 17px;
        height: 17px;
    }
    /* [contact] 상담 신청 폼 모바일 스타일 끝 */


    /* [contact-map] contact 하단 모바일 전용 오시는 길 시작 (Figma node 2118:2187 / 390 기준)
       - 베이지 배경 #f2f0eb, 좌측 정렬 헤딩·주소 + 하단 풀폭(좌우 20px inset) 라운드 지도 카드 */
    .contact-map {
        display: block;
        width: 100%;
        background-color: #f2f0eb;
    }

    /* 상단 72 / 좌우 30(주소·제목 기준) / 하단 60 */
    .contact-map__inner {
        padding: 72px 30px 60px;
    }

    /* 제목: Pretendard Bold 26 / #201d1d */
    .contact-map__title {
        font-size: 26px;
        font-weight: 700;
        line-height: 1;
        color: #201d1d;
    }

    /* 주소: Pretendard SemiBold 20 / #450f0e / 자간 -0.4 / 줄간격 30 */
    .contact-map__address {
        margin-top: 30px;
        font-size: 20px;
        font-weight: 600;
        line-height: 30px;
        letter-spacing: -0.4px;
        color: #450f0e;
    }

    /* 지도 카드: 좌우 20px inset(inner 30 - 10) / radius 30 / 비율 350:452 */
    .contact-map__figure {
        margin-top: 30px;
        margin-inline: -10px;
        aspect-ratio: 350 / 452;
        border-radius: 30px;
        overflow: hidden;
        background-color: #601a18; /* iframe 로드 전 fallback */
    }

    .contact-map__figure iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
    }
    /* [contact-map] contact 하단 모바일 전용 오시는 길 끝 */

}

/* 상담 폼 ↔ WPForms 브리지 스타일은 css/contact-form.css 로 이동
   (메인 + 상담문의 페이지 공용, functions.php 에서 조건부 로드) */