@charset "utf-8";
/* =========================================================================
 * header.css — 공통 헤더 (피그마 5604:560 기준)
 * ========================================================================= */

/* 헤더 래퍼 — 상단 고정(fixed), 스크롤해도 유지 */
#hd { position: fixed; top: 0; left: 0; z-index: 200; width: 100%; }

#hd h1, #hd .sound_only { position: absolute; width: 0px; height: 0px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; font-size:0; }

#skip_to_container { position: absolute; left: 0; top: 0; }
#skip_to_container a { position: absolute; left: 0; top: -1000px; }
#skip_to_container a:focus { left: 0; top: 0; z-index: 300; padding: 8px 16px; background: #20262b; color: #fff; }

/* 플로팅 헤더 바 — 높이 70px, 상단에서 25px, 중앙 정렬 (시안 5604:560) */
.hd_bar {
    display: flex;
    align-items: center;
    justify-content: space-between;  /* 로고(좌) · 버튼(우), 메뉴는 정중앙 절대배치 */
    box-sizing: border-box;
    position: relative;
    z-index: 2;                 /* 배경 패널(z-1)보다 위 — 2차 메뉴 열이 배경 위에 표시 */
    width: calc(100% - 40px);   /* 좌우 20px 여백 */
    max-width: 1700px;
    height: 70px;
    margin: 25px auto 0;
    padding: 0 20px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 15px;
    box-shadow: 0 2px 20px rgba(39, 56, 69, 0.08);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: width .22s cubic-bezier(.4, 0, .2, 1),
                max-width .22s cubic-bezier(.4, 0, .2, 1),
                margin .22s cubic-bezier(.4, 0, .2, 1),
                border-radius .22s cubic-bezier(.4, 0, .2, 1),
                box-shadow .22s ease,
                background .22s ease;
    transition-delay: .30s; /* 닫힐 때: 2차 메뉴가 먼저 접힌 뒤 바가 좁아짐 */
}

/* 메뉴 호버(열림) — 플로팅 바가 먼저 전체 너비로 펼쳐지며 상단에 붙고 모서리가 각지게 됨 */
#hd.hd_menu_open .hd_bar {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    border-radius: 0;
    box-shadow: none;
    transition-delay: 0s; /* 열릴 때: 바가 먼저 즉시 펼쳐짐 */
}

/* 스크롤 진행 시 — 호버와 동일하게 바가 최상단에 붙고 전체 너비로 펼쳐짐(2차 메뉴는 열리지 않음) */
#hd.hd_scrolled .hd_bar {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    border-radius: 0;
    box-shadow: 0 2px 14px rgba(39, 56, 69, 0.06);
    transition-delay: 0s;
    /* 스크롤 중에는 backdrop-filter(매 프레임 블러 재계산)를 끄고 불투명 배경으로 → 스크롤 버벅임 제거 */
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
/* 스크롤 상태에서 호버로 메뉴가 열리면 그림자는 제거(호버와 동일하게) */
#hd.hd_scrolled.hd_menu_open .hd_bar { box-shadow: none; }

/* 2차 메뉴 전체 너비 흰색 배경 패널 — 바 아래에서 한번에 펼쳐짐 (시안 5879:663) */
.gnb_mega_bg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 0 solid #ccc;   /* 닫힘: 보더 0 → blur로 인한 1줄 노출 방지 */
    transition: height .30s cubic-bezier(.4, 0, .2, 1), border-top-width .2s ease;
    transition-delay: 0s;   /* 닫힐 때: 먼저 접힘 */
}
#hd.hd_menu_open .gnb_mega_bg {
    border-top-width: 1px;  /* 열릴 때만 상단 구분선 표시 */
    transition-delay: .22s; /* 열릴 때: 바가 100% 펼쳐진 뒤 메뉴가 내려옴(찢어짐 방지) */
}

/* 로고 */
.hd_logo { flex: 0 0 auto; margin: 0; line-height: 0; }
.hd_logo a { display: inline-block; }
.hd_logo img { height: 42px; width: auto; display: block; }

/* 주메뉴 (1차) — 바 안에서 페이지 정중앙에 고정 (2차 메뉴 열과 정렬)
   ※ 그누보드 기본 default.css(#gnb …)를 덮어쓰기 위해 #hd #gnb 로 우선순위 상향 */
#hd #gnb.hd_gnb {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    height: 100%;
    display: flex;
    align-items: center;
}
#hd #gnb .gnb_1dul {
    display: flex;
    align-items: center;
    gap: 0;                    /* 간격 대신 균등 셀 폭으로 배치 → 2차 메뉴 열과 정렬 */
    padding: 0;
    border: 0;                 /* 기본 하단 보더 제거 */
    font-size: 17px;
}
#hd #gnb .gnb_1dli {
    float: none;               /* 기본 float:left 해제 (레이아웃 깨짐 방지) */
    width: 160px;              /* 2차 메뉴 열(.gnb_mega_col)과 동일 폭 → 열이 메뉴 바로 아래로 정렬 */
    display: flex;
    justify-content: center;
    line-height: 1.5;
    padding: 0;
    position: relative;
}
#hd #gnb .gnb_1da {
    display: inline-block;
    padding: 0;                /* 기본 padding:0 15px 해제 */
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.5;
    color: #111;
    text-transform: uppercase;
    white-space: nowrap;
}
#hd #gnb .gnb_1dli:last-child .gnb_1da { font-weight: 600; } /* 마지막(디데이회생) 강조 */
/* 1차 메뉴 호버 색상 변경 제거 (기본값 파란색 #3a8afd 덮어쓰기) */
#hd #gnb .gnb_1dli:hover > a,
#hd #gnb .gnb_1da:hover,
#hd #gnb .gnb_1dli:hover .gnb_1da { color: #111; }
#hd #gnb .gnb_empty { font-size: 15px; color: #666; }

/* 2차 메뉴 — 흰색 패널 안, 1차 메뉴 순서대로 세로 열 (시안 5879:663) */
.gnb_mega_inner {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 30px 20px 36px;
}
.gnb_mega_col { width: 160px; }        /* 1차 메뉴 셀(.gnb_1dli)과 동일 폭 → 정확히 아래로 정렬 */
.gnb_mega_col ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;                         /* 시안 항목 간격 15px */
}
/* 항목 흰색 박스 배경 제거 + 호버 색상 변경 제거 (기본 default.css 덮어쓰기) */
#hd .gnb_mega_bg .gnb_2da {
    display: inline-block;
    padding: 0;
    background: transparent;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.5;
    color: #111;
    text-align: center;
    white-space: nowrap;
    word-break: keep-all;
}
#hd .gnb_mega_bg a.gnb_2da:hover,
#hd .gnb_mega_bg .gnb_2da:hover,
#hd .gnb_mega_bg .gnb_2da:focus { color: #111; background: transparent; }

/* 법률상담신청 버튼 */
.hd_consult { flex: 0 0 auto; }
.btn_consult {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px 8px 22px;
    background: linear-gradient(to right, #20262b 0%, #4c5d6a 50%, #7894a8 100%);
    border: 1px solid #fff;
    border-radius: 50px;
}
.btn_consult span {
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.5;
    color: #fff;
    white-space: nowrap;
}
.btn_consult .ic { width: 25px; height: 25px; display: block; }
.btn_consult:hover { filter: brightness(1.08); }

/* 모바일 햄버거 / 메뉴 (기본 숨김) */
#hd_mo_btn { display: none; flex: 0 0 auto; box-sizing: border-box; width: 34px; height: 34px; padding: 6px; background: none; border: 0; cursor: pointer;
    flex-direction: column; align-items: center; justify-content: center; gap: 5px; }   /* 3줄을 세로 정중앙 정렬 */
#hd_mo_btn span { display: block; width: 100%; height: 2px; background: #20262b; border-radius: 2px; transition: .25s; }
#hd_mo_menu { display: none; }
#hd_mo_dim { display: none; }

/* =============================== 반응형 =============================== */
@media (max-width: 1024px) {
    .hd_bar { gap: 16px; padding: 0 16px; }
    /* PC 메뉴/버튼/2차 패널 숨김 (PC nav 는 #hd #gnb.hd_gnb 로 지정돼 있어 동일 특이도로 덮어씀) */
    #hd #gnb.hd_gnb { display: none; }
    .gnb_mega_bg { display: none; }
    .btn_consult {padding: 5px 5px 5px 12px;}
    .btn_consult span {font-size:14px;}
    /* 상담버튼을 우측으로 밀어 햄버거 바로 옆에 붙임 (로고=좌 / 상담+햄버거=우, 사이는 .hd_bar gap 16px) */
    .hd_consult { margin-left: auto; }
    #hd_mo_btn { display: flex; margin-left: 0; }   /* flex 로 켜야 내부 3줄 중앙정렬 적용 */

    /* 모바일 슬라이드 메뉴 */
    #hd_mo_menu {
        display: block;
        position: fixed; top: 0; right: -300px;
        width: 280px; max-width: 82%; height: 100%;
        padding: 70px 24px 40px;
        background: #fff; z-index: 400;
        box-shadow: -4px 0 24px rgba(39,56,69,.15);
        transition: right .3s ease;
        overflow-y: auto;
    }
    #hd_mo_menu.on { right: 0; }
    /* 닫기(×) 중심을 아코디언 캐럿 세로선에 맞춤 (버튼 40px 중심 = right 12 + 20 = 32px = 캐럿 중심) */
    #hd_mo_close { position: absolute; top: 18px; right: 12px; width: 40px; height: 40px; padding: 0; text-align: center; background: none; border: 0; font-size: 30px; line-height: 1; color: #20262b; cursor: pointer; }
    #hd_mo_menu .mo_1dul > li > a { position: relative; display: block; padding: 14px 0; font-family: 'Pretendard',sans-serif; font-weight: 600; font-size: 18px; color: #111; text-transform: uppercase; border-bottom: 1px solid #eee; }
    /* 하위 있는 1차 메뉴: 캐럿 표시(열리면 회전) */
    #hd_mo_menu .mo_1dul > li.has_sub > a::after { content: ''; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px; margin-top: -7px; border-right: 2px solid #9aa4ab; border-bottom: 2px solid #9aa4ab; transform: rotate(45deg); transition: transform .25s; }
    #hd_mo_menu .mo_1dul > li.has_sub.on > a::after { margin-top: -3px; transform: rotate(-135deg); }
    /* 2차: 기본 접힘 → 1차 .on 일 때 펼침 (아코디언) */
    #hd_mo_menu .mo_2dul { max-height: 0; overflow: hidden; padding: 0; transition: max-height .3s ease; }
    #hd_mo_menu .mo_1dul > li.on > .mo_2dul { max-height: 70vh; padding: 6px 0 12px; }
    #hd_mo_menu .mo_2dul li a { display: block; padding: 8px 12px; font-family: 'Pretendard',sans-serif; font-size: 15px; color: #555; }
    #hd_mo_dim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 390; opacity: 0; visibility: hidden; transition: .3s; }
    #hd_mo_dim.on { opacity: 1; visibility: visible; }
    body.mo_menu_open { overflow: hidden; }
}

@media (max-width: 480px) {
    .hd_bar { width: calc(100% - 24px); height: 50px; margin-top: 14px; padding: 0 14px; border-radius: 12px; }
    .hd_logo img { height: 29px; }
    /* 모바일 슬라이드 메뉴 글자 한 단계 축소 (font-size 만 조정) */
    #hd_mo_close { font-size: 26px; }
    #hd_mo_menu .mo_1dul > li > a { font-size: 16px; }
    #hd_mo_menu .mo_2dul li a { font-size: 14px; }
	.hd_bar {gap:5px}
}