@charset "utf-8";

/**
 * @author  : 김민성
 * @date    : 2026-08-04
 * @desc    : header, footer 및 공통 레이아웃 스타일
 */
 
 
 
#wrap {
   width: 100%;
}

/* [전체] 풀페이지 레이아웃 (Swiper) — .main.swiper 컨테이너를 화면 높이로 고정하고,
   각 섹션(.swiper-slide)을 한 화면(100vh)씩 차지하게 한다. 넘치는 콘텐츠는 잘라낸다. */
.main.swiper {
   width: 100%;
   height: 100vh;
}

/* 푸터(.footer)는 마지막 슬라이드로 편입되지만 100vh로 늘리지 않고 기존(자연) 높이를 유지한다.
   Swiper 세로 모드가 슬라이드 실제 높이를 읽으므로, 푸터는 화면 하단에 자기 높이만큼만 붙는다. */
.main .swiper-slide:not(.footer) {
   height: 100vh;
   overflow: hidden;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

/* Swiper 기본 스타일(.swiper-slide{height:100%})을 눌러, 푸터는 콘텐츠 높이만 차지하게 한다. */
.main .swiper-slide.footer {
   height: auto;
}

/* ── 모바일(≤768px): 풀페이지(Swiper) 해제 → 일반 세로 스크롤 ──
   컨테이너/래퍼의 고정 높이·overflow·flex를 풀어 섹션들이 자연스럽게 쌓이고 문서가 스크롤되게 한다.
   히어로(.visual)만 100vh를 유지하고, 나머지 섹션은 콘텐츠 높이로 흘러 잘리지 않게 한다.
   (JS는 ui.js에서 모바일일 때 Swiper를 초기화하지 않는다.) */
@media (max-width: 1024px) {
   .main.swiper {
      height: auto;
      overflow: visible;
   }
   .main > .swiper-wrapper {
      display: block;
      height: auto;
      transform: none !important;
   }
   .main .swiper-slide:not(.visual):not(.footer) {
      height: auto;
      overflow: visible;
      justify-content: flex-start;
   }
}

/* 상단 고정 헤더(129px)에 가리지 않도록 컨텐츠를 헤더 높이만큼 아래로 내린다.
   (히어로 .visual은 배경 영상이 헤더까지 꽉 차야 하고,
    .attorney는 하단 정렬이라 오프셋이 필요 없어 제외) */
.main .swiper-slide:not(.visual):not(.attorney):not(.footer) {
   padding-top: 92px;
}

/* 대표변호사(.attorney) 영역만 컨텐츠를 하단(바텀) 기준으로 정렬 */
.main .swiper-slide.attorney {
   justify-content: flex-end;
}

/* header 스타일 */
.header {
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 10;
}

.header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(213, 187, 143, 0.3);
    z-index: 12;
    pointer-events: none;
}

.header__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 334px;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /*transition: height 0.2s ease, opacity 0.2s ease;*/
    /* height 대신 clip-path나 transform으로 애니메이션 제어 권장 */
    clip-path: inset(0 0 calc(100% - 92px) 0); /* 초기 상태는 129px만 보이게 잘라냄 */
    transition: clip-path 0.2s ease, opacity 0.2s ease, background-color 0.3s ease;
    
    /* 서브픽셀 떨림 완화를 위한 하드웨어 가속 유도 */
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
}

.header__inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
   width: 100%;
   max-width: 1200px;
   height: 92px;
   margin-inline: auto;
   padding-top: 12px;
   z-index: 11;
}

.logo__emblem img {
    height: 56px;
}

.gnb__list {
   display: flex;
   gap: 95px;
}

.gnb__item {
   position: relative;
}

/* 상담문의: 모바일 오버레이 전용 항목 → PC GNB에서는 숨김 */
.gnb__item--mobile {
   display: none;
}

.gnb__item::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 56px; /* GNB와 서브메뉴 사이의 간격만큼 지정 */
}

.gnb__link {
   display: inline-block;
   font-family: 'pretendard';
   font-weight: 400;
   font-size: 18px;
   color: #fff;
   line-height: 100%;
   text-align: center;
   transition: color 0.3s ease;
}

.gnb__submenu {
   opacity: 0;
   visibility: hidden;
   position: absolute;
   top: calc(100% + 46px);
   white-space: nowrap;
   transition: opacity 0.2s ease;
   z-index: 11;
}

.gnb__subitem {
   margin-bottom: 17px;
}

.gnb__sublink {
    position: relative;
    display: inline-block;
    padding-bottom: 5px;
    font-family: 'pretendard';
    font-weight: 400;
    font-size: 14px;
    color: #fff;
    line-height: 100%;
}

/* 호버 시 왼쪽 → 오른쪽으로 그어지는 빨간 밑줄(scaleX 애니메이션). PC·모바일 공통 */
.gnb__sublink::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background-color: #961B1E;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease;
}

.gnb__sublink:hover::after {
    transform: scaleX(1);
}

/* gnb hover 스타일 */
.header:hover .header__bg {
   clip-path: inset(0 0 0 0); /* 전체 영역 보이기 */
}

.header:hover .gnb__submenu, .gnb__submenu:hover {
   opacity: 1;
   visibility: visible;
}

.gnb__item:hover .gnb__link {
   text-shadow: 0.3px 0 0 #fff, -0.3px 0 0 #fff, 0 0.3px 0 #fff;
}

.gnb__sublink:hover {
   font-weight: 600;
}

/* [메인] 스크롤 시 헤더 테마 전환 — 히어로(.visual) 이후 섹션부터 화이트 헤더로 */
.header.is-scrolled .header__bg {
    background-color: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 흰 배경과 구분되도록 하단 라인을 골드로 (서브페이지와 동일 톤) */
.header.is-scrolled::after {
    background-color: rgba(213, 187, 143, 1);
}

/* GNB 텍스트(대·소메뉴)를 검은색으로 */
.header.is-scrolled .gnb__link,
.header.is-scrolled .gnb__sublink {
    color: #000;
}

.header.is-scrolled .gnb__item:hover .gnb__link {
    text-shadow: 0.3px 0 0 #000, -0.3px 0 0 #000, 0 0.3px 0 #000;
}

/* 서브페이지 메뉴 스타일 */
.sub-header::after {
    background-color: rgba(213, 187, 143, 1);
}

.sub-header .header__bg {
    background-color: rgba(0, 0, 0, 0);
}

/* 법률사무소 화신(로펌소개·구성원 소개·오시는 길) — 헤더 배경을 상단 섹션색과 동일하게 (블러 제거) */
.sub-header--firm .header__bg {
    background-color: #FBF9F4;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 이혼 및 가사(이혼전문센터·이혼·상간소송·재산분할·양육권·상속) — 헤더 배경을 상단 섹션색과 동일하게 (블러 제거) */
.sub-header--divorce .header__bg {
    background-color: #231D16;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 형사사건(형사전문센터·고소대리·음주운전·성범죄·사기죄) — 헤더 배경을 상단 섹션색과 동일하게 (블러 제거) */
.sub-header--criminal .header__bg {
    background-color: #040F11;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 상담 안내(상담문의) — 헤더 배경을 상단 섹션색과 동일하게 (블러 제거) */
.sub-header--consult .header__bg {
    background-color: #1b2529;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 성공사례 그룹 — 페이지별 상단 섹션색과 동일하게 (블러 제거) */
.sub-header--cases .header__bg {        /* 성공사례(.cases) */
    background-color: #F2F0EB;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.sub-header--case-detail .header__bg {  /* 성공사례 상세(.case-detail) */
    background-color: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.sub-header--reviews .header__bg {      /* 의뢰인 후기 / 후기 상세(.review / .review-story) */
    background-color: #FBFAF9;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.sub-header .gnb__link {
    color: #000;
}

.sub-header .gnb__sublink {
    color: #000;
}

.sub-header .gnb__item:hover .gnb__link {
    text-shadow: 0.3px 0 0 #000, -0.3px 0 0 #000, 0 0.3px 0 #000;
}
/* header 스타일 끝 */


/* [하단 영역] footer 스타일 시작 */
.footer {
    width: 100%;
    background-color: #fff;
}

.footer__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 51px 0 56px 0;
}

/* 상단 영역: 브랜드 + 내비게이션 */
.footer__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 128px;
}

.footer__brand {
    display: grid;
    grid-template-columns: 82px 1fr;
    column-gap: 36px;
    row-gap: 7px;
}

.footer__logo {
    display: block;
    grid-row: 1 / 3;
    width: 82px;
    padding-top: 8px;
}

.footer__logo img {
    display: block;
    width: 100%;
    height: auto;
}

.footer__tag {
    grid-column: 2;
    grid-row: 1;
    font-family: 'pretendard';
    font-weight: 500;
    font-size: 13px;
    line-height: 24px;
    color: #8e6b31;
}

.footer__title {
    grid-column: 2;
    grid-row: 2;
    font-family: 'pretendard';
    font-weight: 600;
    font-size: 24px;
    line-height: 38px;
    letter-spacing: -0.72px;
    color: #241b0a;
}

.footer__nav {
    margin-top: 6px;
}

/* 컬럼 폭은 피그마 각 컬럼 시작 좌표 간 간격을 그대로 반영 (932 / 1113 / 1270 / 1396 / 1529) */
.footer__nav-list {
    display: grid;
    grid-template-columns: 181px 157px 126px 133px auto;
}

.footer__nav-title {
    display: block;
    margin-bottom: 20px;
    font-family: 'pretendard';
    font-weight: 600;
    font-size: 19px;
    color: #241b0a;
    text-decoration: none;
}

.footer__nav-link {
    display: block;
    font-family: 'pretendard';
    font-weight: 400;
    font-size: 14px;
    line-height: 29px;
    color: #241b0a;
    text-decoration: none;
}

/* 하단 영역: 사업자 정보 + 카피라이트 */
.footer__bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.footer__info-item {
    font-family: 'pretendard';
    font-weight: 200;
    font-style: normal;
    font-size: 12px;
    line-height: 23px;
    color: #8e6b31;
}

/* 사업자 정보 줄바꿈용 <br>은 기본(PC)에서 숨기고, 구분선(|)만 노출한다.
   (모바일에서는 반대로 <br>을 노출하고 구분선을 숨김 → 미디어쿼리에서 처리) */
.footer__br-mo {
    display: none;
}

.footer__copyright {
    font-family: 'pretendard';
    font-weight: 400;
    font-size: 14px;
    line-height: 1.55;
    letter-spacing: -0.43px;
    color: #8e6b31;
    text-align: right;
}
/* [하단 영역] footer 스타일 끝 */


/* [플로팅 영역] quick-nav(우측 고정 사이드 메뉴) 스타일 시작 */
.quick-nav {
    position: fixed;
    bottom: 95px;
    right: 80px;
    width: 80px;
    height: 440px;
    z-index: 50;
    /* 기본 테마: 기존 버건디 알약(비주얼/히어로 및 서브페이지 등 기본 상태) */
    --qn-bg: rgba(139, 0, 0, 0.6);
    --qn-fg: #efd3a4;
    --qn-line: rgba(239, 211, 164, 0.3);
    --qn-blur: 13px;
}

/* 빨강(버건디) 알약 — 상담 안내 페이지 등에서 명시적으로 사용 (불투명) */
.quick-nav[data-nav-pill="red"] {
    --qn-bg: #8b0000;
    --qn-fg: #efd3a4;
    --qn-line: rgba(239, 211, 164, 0.3);
    --qn-blur: 0px;
}

/* 밝은 배경 섹션 위: 다크 알약 + 골드 */
.quick-nav[data-nav-pill="dark"] {
    --qn-bg: #1b272d;
    --qn-fg: #efd3a4;
    --qn-line: rgba(239, 211, 164, 0.3);
    --qn-blur: 10px;
}

/* 어두운 배경 섹션 위: 베이지 알약 + 버건디 */
.quick-nav[data-nav-pill="beige"] {
    --qn-bg: #e6dbc9;
    --qn-fg: #601a18;
    --qn-line: rgba(96, 26, 24, 0.3);
    --qn-blur: 10px;
}

/* 알약형 배경 + 글래스(blur) 효과 (색상은 섹션별 테마 변수로 전환) */
.quick-nav__inner {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 20px 0;
    border-radius: 100px;
    background-color: var(--qn-bg);
    backdrop-filter: blur(var(--qn-blur));
    -webkit-backdrop-filter: blur(var(--qn-blur));
    transition: background-color 0.4s ease;
}

.quick-nav__list {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.quick-nav__item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* 아이템 사이 구분선 (4개 아이템 → 3개 라인) */
.quick-nav__item + .quick-nav__item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 1px;
    background-color: var(--qn-line);
    transition: background-color 0.4s ease;
}

.quick-nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    text-decoration: none;
}

/* 아이콘: SVG를 마스크로 사용해 색상만 테마 변수로 제어 (images/common/quick-*.svg) */
.quick-nav__icon {
    display: block;
    background-color: var(--qn-fg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: background-color 0.4s ease;
}

.quick-nav__icon--firm {
    width: 33px;
    height: 37px;
}

.quick-nav__icon--call {
    width: 25px;
    height: 25px;
}

.quick-nav__icon--mail {
    width: 29px;
    height: 21px;
}

.quick-nav__icon--map {
    width: 24px;
    height: 32px;
}

.quick-nav__text {
    font-family: 'pretendard';
    font-weight: 600;
    font-size: 14px;
    line-height: 14px;
    color: var(--qn-fg);
    text-align: center;
    white-space: nowrap;
    transition: color 0.4s ease;
}

/* 모바일 전용 항목(네이버 예약)은 PC(기본)에서 숨긴다 — 모바일 미디어쿼리에서 노출 */
.quick-nav__item--mobile {
    display: none;
}

/* 라벨 전환: PC는 원래 이름(긴급상담·온라인상담), 모바일은 전화상담·상담신청 */
.quick-nav__text--mobile {
    display: none;
}
/* [플로팅 영역] quick-nav(우측 고정 사이드 메뉴) 스타일 끝 */

/* [브레드크럼 영역] sub-breadcrumb 스타일 시작 */
.sub-breadcrumb {
    position: absolute;
    top: 122px;
    left: 50%;
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding: 4px 0px 4px 28px;
    transform: translateX(-50%);
    background: url('../images/icon/icon-breadcrumb.svg') no-repeat left center;
    z-index: 1;
}

.sub-breadcrumb__list {
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.sub-breadcrumb__item {
    font-family: 'pretendard';
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
    letter-spacing: -0.3px;
    color: #080a09;
}

/* 항목 구분자 ( | ) */
.sub-breadcrumb__item + .sub-breadcrumb__item::before {
    content: '|';
    margin-right: 10px;
    color: #080a09;
    font-weight: 300;
}

/* 현재 위치 (활성) */
.sub-breadcrumb__item[aria-current="page"] {
    color: #988667;
}

/* 하얀색 버전 */
.sub-breadcrumb--white .sub-breadcrumb__item {
    color: #fff;
}

.sub-breadcrumb--white .sub-breadcrumb__item + .sub-breadcrumb__item::before {
    color: #fff;
}

.sub-breadcrumb--white .sub-breadcrumb__item[aria-current="page"] {
    color: #D5BB8F
}
/* [브레드크럼 영역] sub-breadcrumb 스타일 끝 */


/* ============================================================
   [헤더/GNB] 모바일 전용 요소 — 기본(PC) 숨김
   (햄버거 버튼 / 오버레이 상단바 / 오버레이 하단 캐치프레이즈)
   ============================================================ */
.gnb-toggle,
.gnb__head,
.gnb__foot {
    display: none;
}

@media (max-width: 1024px) {
    /* [헤더/GNB] 모바일 스타일 시작 (태블릿 사이즈부터 적용) */

    /* GNB 오버레이(.gnb, 내부 z-index:100)가 하단 quick-nav 바(z-index:60)보다
       위에 오도록 헤더 자체의 스택 층을 끌어올린다. (.gnb의 z-index는 헤더 스택
       컨텍스트 내부값이라, 헤더가 바보다 낮으면 오버레이가 바 밑에 깔린다) */
    .header {
        z-index: 110;
    }

    /* ── 닫힌 상태 헤더 바 ── */
    .header__inner {
        max-width: 100%;
        height: 84px;              /* 피그마 모바일 헤더: 상하 24 + 로고 36 = 84 */
        padding: 0 20px;
    }
    .header__bg {
        height: 84px;
        clip-path: none;
        /* 피그마: 반투명 블러 → 솔리드 다크(#130c04). (서브페이지/스크롤 상태는
           .sub-header/.is-scrolled 규칙이 특정성으로 이겨 기존대로 유지) */
        background-color: #130c04;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .logo__emblem img {
        height: 36px;
    }
    /* 모바일 헤더는 하단 구분선(보더) 없음 (피그마) */
    .header::after {
        display: none;
    }

    /* ── 햄버거(메뉴 열기) 버튼 ── */
    .gnb-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 32px;               /* 피그마 메뉴 아이콘 32×32 */
        height: 32px;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
    }
    .gnb-toggle__bar {
        width: 24px;
        height: 3px;               /* 피그마 stroke ≈2.67px + 둥근 끝 */
        background-color: #d5bb8f; /* 피그마: 골드(#D5BB8F). 서브/스크롤 시 검정으로 전환(기존 규칙) */
        border-radius: 2px;
    }
    /* 서브페이지·스크롤 헤더(밝은 배경)에서는 햄버거를 검은색으로 */
    .sub-header .gnb-toggle__bar,
    .header.is-scrolled .gnb-toggle__bar {
        background-color: #000;
    }

    /* ── 전체화면 오버레이(.gnb) : 기본은 숨김, .is-open 시 노출 ── */
    .gnb {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        padding: 0 30px;
        background-color: #0b0704;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        z-index: 100;
        opacity: 0;
        visibility: hidden;
        transform: translateX(100%);
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    }
    .gnb.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }
    /* 브라우저 리사이즈 중에는 오버레이 전환 애니메이션을 끈다.
       (데스크톱↔모바일 폭을 넘나들 때, 숨어 있던 오버레이가 순간적으로
        휙 슬라이드되어 스쳐 지나가는 현상 방지) */
    .is-resizing .gnb {
        transition: none;
    }

    /* ── 오버레이 상단바 : MENU 라벨 + 닫기(X) ── */
    .gnb__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* .gnb의 좌우 패딩(30px)을 음수 마진으로 상쇄해 하단 보더를 화면 끝까지 뻗게 하고,
           내용(MENU·닫기)은 다시 30px 안쪽으로 유지한다. */
        margin: 0 -30px;
        padding: 52px 30px 22px;   /* 피그마: MENU 상단 ~59, 구분선 ~98 */
        flex-shrink: 0;
        border-bottom: 1px solid rgba(213, 187, 143, 0.3);
    }
    .gnb__label {
        font-family: 'pretendard';
        font-weight: 400;
        font-size: 24px;
        color: #d5bb8f;
        line-height: 1;
    }
    .gnb__close {
        position: relative;
        width: 24px;
        height: 24px;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
    }
    .gnb__close::before,
    .gnb__close::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 22px;
        height: 1.5px;
        background-color: #d5bb8f;
    }
    .gnb__close::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }
    .gnb__close::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    /* ── 메뉴 리스트(세로 정렬) ── */
    .gnb__list {
        display: flex;
        flex-direction: column;
        gap: 34px;              /* 24px 라인 + 34 = 약 58px 간격(피그마 대분류 간격) */
        margin-top: 46px;
    }
    .gnb__item {
        position: static;
        margin: 0;
    }
    /* 상담문의: 모바일 오버레이에서 노출 */
    .gnb__item--mobile {
        display: block;
    }
    .gnb__item::after {
        display: none;          /* PC hover 브릿지 제거 */
    }
    .gnb__link {
        display: block;
        font-family: 'pretendard';
        font-weight: 600;
        font-size: 24px;
        color: #fff;
        line-height: 1;
        text-align: left;
    }

    /* ── 서브메뉴 : 아코디언(기본 접힘, .gnb__item.is-open 시 펼침 — JS 바인딩) ── */
    .gnb__submenu {
        position: static;
        top: auto;
        white-space: normal;
        display: flex;
        flex-direction: column;
        gap: 18px;              /* 17px 라인 + 22 = 약 40px 간격(피그마 소분류 간격) */
        opacity: 1;
        visibility: visible;
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.2s ease, margin-top 0.2s ease;
    }
    .gnb__item.is-open .gnb__submenu {
        max-height: 420px;
        margin-top: 36px;          /* 피그마: 대분류 → 첫 서브항목 ~36 */
        margin-bottom: 41px;       /* 서브메뉴 아래 다음 대분류까지 ~75(=41+리스트 gap 34) */
    }
    .gnb__subitem {
        margin: 0;
    }
    .gnb__sublink {
        display: inline-block;
        font-family: 'pretendard';
        font-weight: 400;
        font-size: 17px;
        color: #fff;
        line-height: 1;
        padding-bottom: 7px;       /* 밑줄(3px)+간격(2px): 호버 밑줄이 글자에 붙지 않도록 */
    }
    /* 활성(현재 페이지) 서브링크만 굵게 + 밑줄.
       (기존엔 대분류마다 첫 항목 .is-lead 가 항상 활성처럼 보였음 → 현재 페이지 기준으로 전환) */
    .gnb__sublink[aria-current="page"] {
        font-weight: 700;
        border-bottom: 3px solid #961B1E;
        padding-bottom: 5px;
    }

    /* 오버레이는 항상 다크 배경 → 서브/스크롤 헤더의 검정 텍스트 규칙 무효화 */
    .sub-header .gnb__link,
    .header.is-scrolled .gnb__link,
    .sub-header .gnb__sublink,
    .header.is-scrolled .gnb__sublink {
        color: #fff;
    }

    /* ── 오버레이 하단 : 브랜드 캐치프레이즈 (좌: 엠블럼 / 우: 태그↑·타이틀↓ 세로 배치) ── */
    .gnb__foot {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "emblem tag"
            "emblem title";
        column-gap: 20px;
        align-items: center;
        margin-top: auto;       /* 세로 flex 하단으로 밀착 */
        margin-inline: auto;
        padding: 30px 0 40px;
        flex-shrink: 0;
    }
    .gnb__foot-emblem {
        grid-area: emblem;
    }
    .gnb__foot-emblem img {
        display: block;
        width: 52px;
        height: auto;
    }
    .gnb__foot-tag {
        grid-area: tag;
        align-self: end;
        font-family: 'pretendard';
        font-weight: 500;
        font-size: 12px;
        color: #d5bb8f;
        line-height: 1.34;
        margin-bottom: 6px;
    }
    .gnb__foot-title {
        grid-area: title;
        align-self: start;
        font-family: 'pretendard';
        font-weight: 600;
        font-size: 20px;
        color: #fff;
        line-height: 1.45;
        letter-spacing: -0.6px;
    }

    /* [헤더/GNB] 모바일 스타일 끝 */


    /* [퀵네비/모바일 하단바] 모바일 스타일 시작 */
    /* PC 우측 세로 알약(fixed) → 화면 하단 가로 고정 바로 전환.
       색상 변수는 data-nav-pill 속성 선택자(특정성 0,2,0)가 덮어쓰므로,
       모바일 팔레트는 [data-nav-pill]까지 함께 지정해 동일 특정성 + 후순위로 확실히 이긴다. */
    .quick-nav,
    .quick-nav[data-nav-pill] {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 64px;
        z-index: 60;
        /* 피그마 모바일 팔레트: 아이보리 배경 + 버건디 전경/구분선 */
        --qn-bg: #f2f0eb;
        --qn-fg: #601a18;
        --qn-line: rgba(96, 26, 24, 0.18);
        --qn-blur: 7.5px;
    }
    /* 알약(둥근 모서리·상하 패딩) 해제 → 각진 하단 바 + 상단 경계선 */
    .quick-nav__inner {
        padding: 0;
        border-radius: 0;
        border-top: 1px solid rgba(96, 26, 24, 0.12);
    }
    /* 세로 스택 → 가로 스택(항목 균등 분할은 기존 flex:1 그대로 재사용) */
    .quick-nav__list {
        flex-direction: row;
    }
    /* 항목 사이 구분선: 가로선(항목 위) → 세로선(항목 왼쪽)으로 전환 */
    .quick-nav__item + .quick-nav__item::before {
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 1px;
        height: 34px;
    }
    
    .quick-nav__item:nth-of-type(2)::before {
        display: none;
    }
    
    
    /* 아이콘 ↔ 라벨 간격 축소 */
    .quick-nav__link {
        gap: 6px;
    }
    /* 아이콘 크기 축소(하단 바 높이에 맞춰 피그마 모바일 아이콘 스케일 근사) */
    .quick-nav__icon--firm { width: 24px; height: 27px; }
    .quick-nav__icon--call { width: 22px; height: 22px; }
    .quick-nav__icon--mail { width: 25px; height: 18px; }
    .quick-nav__icon--map  { width: 20px; height: 26px; }
    /* 라벨: 피그마 스펙(SemiBold 12px, 버건디) — 강제 줄바꿈(<br>)은 한 줄로 */
    .quick-nav__text {
        font-size: 12px;
        line-height: 1;
    }
    .quick-nav__text br {
        display: none;
    }
    /* PC 전용 항목(로펌소개·오시는길)은 숨기고, 모바일 전용 항목(네이버 예약)은 노출 */
    .quick-nav__item--pc {
        display: none;
    }
    .quick-nav__item--mobile {
        display: flex;
    }
    /* 라벨 전환: 모바일은 전화상담·상담신청으로 노출 */
    .quick-nav__text--pc {
        display: none;
    }
    .quick-nav__text--mobile {
        display: block;
    }
    /* 네이버 아이콘 크기(피그마 ~25px 정사각) */
    .quick-nav__icon--naver {
        width: 24px;
        height: 24px;
    }
    /* [퀵네비/모바일 하단바] 모바일 스타일 끝 */


    /* [푸터] 모바일 스타일 시작 (태블릿 사이즈부터 적용) */
    /* PC의 큰 좌우 패딩 → 모바일 좌우 여백으로 축소.
       하단은 고정된 모바일 하단바(.quick-nav, height:64px)에 카피라이트가
       가리지 않도록 여유 패딩(≈64px + 40px)을 확보한다. */
    .footer__inner {
        padding: 40px 24px 104px;
    }

    /* 상단 영역: 모바일 피그마에는 5단 내비가 없으므로 브랜드만 노출.
       PC의 space-between 정렬이 무의미해져 하단 간격만 재조정한다. */
    .footer__top {
        margin-bottom: 56px;
    }
    /* 5단 내비 링크 모음은 모바일 디자인에 없음 → 숨김 */
    .footer__nav {
        display: none;
    }

    /* 브랜드: 로고(좌) + 태그·타이틀(우) 그리드 구조는 유지하되 모바일 스케일로 축소 */
    .footer__brand {
        grid-template-columns: 55px 1fr;   /* 피그마 로고 폭 ≈55px */
        column-gap: 24px;                  /* 로고 우측 ~ 텍스트 시작 간격 ≈24px */
        row-gap: 5px;
    }
    .footer__logo {
        width: 55px;
        padding-top: 4px;
    }
    .footer__tag {
        font-size: 9px;                    /* 피그마 8.9px */
        line-height: 16px;
    }
    .footer__title {
        font-size: 16px;                   /* 피그마 16.11px */
        line-height: 25px;
        letter-spacing: -0.48px;
    }

    /* 하단 영역: PC의 좌우 양끝 정렬 → 세로 가운데 정렬 스택 */
    .footer__bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer__info {
        text-align: center;
    }
    .footer__info-item {
        font-size: 15px;                   /* 피그마 15px */
        line-height: 24px;
    }
    /* 모바일에서만 사업자 정보를 피그마 스펙대로 줄바꿈:
       <br>을 노출하고 PC용 구분선(|)은 숨긴다 */
    .footer__br-mo {
        display: inline;
    }
    .footer__sep {
        display: none;
    }
    /* 카피라이트: 우측 정렬 → 가운데 정렬, 사업자 정보와 충분한 간격 확보 */
    .footer__copyright {
        margin-top: 48px;
        font-size: 16px;                   /* 피그마 16px */
        line-height: 1.55;
        letter-spacing: -0.48px;
        text-align: center;
    }
    /* [푸터] 모바일 스타일 끝 */
    
    /* [브레드크럼 영역] sub-breadcrumb 스타일 시작 */
    .sub-breadcrumb {
        top: 100px;
        left: 20px;
        width: fit-content;
        max-width: none;
        padding: 4px 0px 4px 24px;
        background: url(../images/icon/icon-breadcrumb.svg) no-repeat left center / 14px;
        transform: translateX(0);
    }
    
    .sub-breadcrumb__list {
        column-gap: 6px;
    }
    
    .sub-breadcrumb__item {
        font-size: 14px;
    }
    
    .sub-breadcrumb__item + .sub-breadcrumb__item::before {
        margin-right: 6px;
    }
    /* [브레드크럼 영역] sub-breadcrumb 스타일 끝 */
}


/* [헤더/GNB] 모바일 스타일 시작 (모바일 사이즈부터 적용) */
@media (max-width: 768px) {
    
}