@charset "UTF-8";

/* ===================================================================
   common2026.css — 동대문구 열린구청장실 2026 개편 공통 스타일
   - reset, 기본 typography, 헤더/푸터 레이아웃
   - 폰트: 운영 절대경로(/common/css/font.css)에서 로드된 패밀리 사용
   =================================================================== */

/* CSS 변수 — 운영 chief 메인 컬러 기준 */
:root {
    /* === 컬러 — 260608 남색(Navy) 팔레트 기준 === */
    /* Primary — 남색(Navy) (260608 팔레트) */
    --color_primary: #2c4a86;
    --color_primary_strong: #1c335f;
    --color_primary_active: #0f1a35;
    --color_primary_hover: var(--color_primary_strong);

    /* Sub — www 시그니처 */
    --color_sub: #414a73;
    --color_sub_dark: #151b3d;

    /* Point — 강조 (운영 빨강은 point_red로 강등) */
    --color_point_red: #d90017;
    --color_point_wine: #2c4a86;
    --color_point_pink: #e02569;
    --color_point_pink_bright: #e4407b;
    --color_point_blue: #008ff5;
    --color_point_navy_deep: #00226b;
    --color_point_purple_blue: #5b4cdc;

    /* Mono Scale — 따뜻한 보라 기 머금은 회색 (colors.md 4) */
    --color_mono_900: #000;
    --color_mono_800: #2c272f;                 /* 푸터 BG */
    --color_mono_700: #383036;                 /* 본문 표준 */
    --color_mono_600: #4a414c;
    --color_mono_500: #54485f;                 /* 보조 텍스트 */
    --color_mono_400: #8a8290;                 /* 흐릿 텍스트 */
    --color_mono_300: #c8c0c8;
    --color_mono_200: #ddd6e0;                 /* 기본 보더 */
    --color_mono_100: #eef1f7;                 /* 섹션 배경 — 남색(Navy) 틴트 */
    --color_mono_50: #faf6fb;
    --color_white: #fff;

    /* Primary 연한 톤 (Hero 도형 fallback, 카드 호버 BG 등) */
    --color_primary_soft: #e9ecf4;             /* 남색(Navy) 라이트 톤 */
    --color_border_soft: #eef0f3;
    --color_accent: #fff;

    /* Semantic Aliases */
    --color_text: var(--color_mono_700);
    --color_text_dark: var(--color_mono_900);
    --color_text_sub: var(--color_mono_500);
    --color_text_muted: var(--color_mono_400);
    --color_bg: var(--color_white);
    --color_bg_soft: var(--color_mono_100);
    --color_bg_dark: var(--color_mono_800);
    --color_border: var(--color_mono_200);
    --color_border_strong: var(--color_mono_300);

    /* Semantic States */
    --color_success: #10b981;
    --color_warning: #f59e0b;
    --color_error: #ef4444;
    --color_info: var(--color_point_blue);

    /* === 폰트 — docs/typography.md 기준, Paperlogy 단일 === */
    --font-base: 'Paperlogy', 'Malgun Gothic', sans-serif;
    --font-heading: 'Paperlogy', 'Malgun Gothic', sans-serif;
    --font-accent: 'Paperlogy', 'Malgun Gothic', sans-serif;

    --container-max: 1440px;
    --container-pad: 40px;

    /* === Radius — docs/radius.md 기준, 14px 표준 === */
    --radius-sm: 4px;
    --radius-md: 14px;
    --radius-lg: 14px;
    --radius-full: 999px;

    --shadow-sm: 0 4px 12px rgba(0,0,0,.06);
    --shadow-md: 0 12px 28px rgba(0,0,0,.08);
    --shadow-lg: 0 18px 40px rgba(0,0,0,.12);

    --transition-base: .25s ease;
}

/* ===== reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, ul, ol, li, dl, dt, dd,
form, fieldset, input, textarea, button, table, th, td, figure, figcaption, picture {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    color: inherit;
}
ul, ol { list-style: none; }
a { text-decoration: none; color: inherit; }
button { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }
img, svg { max-width: 100%; }
table { border-collapse: collapse; border-spacing: 0; }

html { font-size: 16px; }
body {
    font-family: var(--font-base);
    color: var(--color_text);
    background: var(--color_bg);
    line-height: 1.5;
    letter-spacing: -0.5px; /* 전역 자간 — 개별 태그에서 letter-spacing 사용 금지, 여기서만 관리 */
    word-break: keep-all;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 접근성 — 스크린리더 전용 */
.skip {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.accessibility {
    position: absolute;
    top: -9999px; left: -9999px;
}
.accessibility a:focus {
    position: fixed;
    top: 0; left: 0;
    width: 200px;
    padding: 12px;
    background: var(--color_primary);
    color: #fff;
    text-align: center;
    z-index: 9999;
}

/* ===== 컨테이너 ===== */
.chief_container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

/* ===== 헤더 ===== */
.chief_header {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: transparent;
}

/* ----- 상단 탑 GNB (보건소 ~ 주요사이트) ----- */
.chief_topbar {
    background: rgba(0, 0, 0, 0.22);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.chief_topbar_inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
    display: flex;
    justify-content: flex-end;
}
.chief_topbar_list {
    display: flex;
    align-items: center;
}
.chief_topbar_item {
    position: relative;
}
.chief_topbar_item + .chief_topbar_item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.2);
}
.chief_topbar_link,
.chief_topbar_button {
    display: inline-block;
    padding: 10px 18px;
    color: rgba(255, 255, 255, 0.82);
    font-family: var(--font-base);
    font-size: 18px; /* 상단 사이트 링크 */
    font-weight: 500;
    line-height: 1;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color .2s;
}
.chief_topbar_link:hover,
.chief_topbar_button:hover {
    color: #fff;
}

.chief_header_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 96px;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

/* 로고 */
.chief_logo {
    display: flex;
    align-items: center;
    gap: 2px;
}
.chief_logo_link {
    display: flex;
    align-items: center;
    gap: 2px;
}
.chief_logo_image {
    display: block;
    width: 160px;
    height: 56px;
    background: url('https://www.ddm.go.kr/site/chief/images/common/logo_bi_wh2022.png') no-repeat center / contain;
    text-indent: -9999px;
    overflow: hidden;
}
.chief_logo_name {
    color: #fff;
    font-family: var(--font-heading);
    font-size: 24px; /* 로고 텍스트 — 헤딩급 */
    font-weight: 700;
    line-height: 1;
}

/* GNB */
.chief_gnb {
    display: flex;
    align-items: center;
}
.chief_gnb_list {
    display: flex;
    gap: 44px;
}
.chief_gnb_item {
    position: relative;
}
.chief_gnb_link {
    position: relative;
    display: inline-block;
    padding: 32px 0;
    color: rgba(255, 255, 255, .82);
    font-family: var(--font-heading);
    font-size: 20px; /* GNB 1뎁스 — 메뉴 */
    font-weight: 600;
    transition: color var(--transition-base);
}
.chief_gnb_link:hover,
.chief_gnb_link.is-active,
.chief_gnb_item:hover .chief_gnb_link,
.chief_gnb_item:focus-within .chief_gnb_link {
    /* 흰색으로 또렷하게 강조 (이전: 노랑 X — 웹접근성) */
    color: #fff;
}
.chief_gnb_link.is-active::after,
.chief_gnb_item:hover .chief_gnb_link::after,
.chief_gnb_item:focus-within .chief_gnb_link::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: 26px;
    height: 3px;
    background: #fff;
    border-radius: 3px;
}

/* GNB 2뎁스 서브메뉴 (hover/focus 드롭다운) */
.chief_gnb_sub {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 200px;
    padding: 12px 0;
    background: var(--color_primary);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
    z-index: 110;
}
.chief_gnb_item:hover .chief_gnb_sub,
.chief_gnb_item:focus-within .chief_gnb_sub {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
}
.chief_gnb_sub_link {
    display: block;
    padding: 10px 22px;
    color: #fff;
    font-family: var(--font-heading);
    font-size: 18px; /* GNB 2뎁스 — 드롭다운 */
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--transition-base), background var(--transition-base);
}
.chief_gnb_sub_link:hover,
.chief_gnb_sub_link:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
}

/* 헤더 우측 도구 — PC: 유저+검색 / 모바일: 햄버거 */
.chief_header_tools {
    display: flex;
    align-items: center;
    gap: 10px;
}
.chief_tool_button {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 18px;
    backdrop-filter: blur(8px);
    transition: all var(--transition-base);
    cursor: pointer;
}
.chief_tool_button:hover {
    background: #fff;
    color: var(--color_primary);
    border-color: #fff;
}
/* 햄버거(전체메뉴) — PC에서는 숨김, 모바일(≤768)에서만 노출 */
.chief_tool_button_menu { display: none; }

/* ===== 검색 패널 — 검색 아이콘 클릭 시 헤더 아래 슬라이드 다운 ===== */
.chief_search_panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 95;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--color_mono_200);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
    transform-origin: top center;
}
.chief_search_panel[hidden] { display: none; }
.chief_search_panel.is-open {
    animation: chief_search_slide_down .25s ease-out;
}
@keyframes chief_search_slide_down {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.chief_search_panel_inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 24px var(--container-pad);
}
.chief_search_form {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px 12px 22px;
    background: var(--color_mono_100);
    border: 1px solid var(--color_mono_200);
    border-radius: var(--radius-full);
    transition: border-color .2s, background .2s;
}
.chief_search_form:focus-within {
    background: #fff;
    border-color: var(--color_primary);
}
.chief_search_icon {
    display: grid;
    place-items: center;
    color: var(--color_mono_500);
    flex-shrink: 0;
}
.chief_search_input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--color_mono_700);
    font-family: var(--font-base);
    font-size: 20px; /* 검색 입력 — 액션 */
    font-weight: 500;
    padding: 6px 0;
}
.chief_search_input::placeholder { color: var(--color_mono_400); }
.chief_search_submit {
    padding: 10px 22px;
    color: #fff;
    background: var(--color_primary);
    border: 0;
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: 20px; /* 검색 버튼 */
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-base);
}
.chief_search_submit:hover { background: var(--color_primary_strong); }
.chief_search_close {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color: var(--color_mono_500);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--transition-base);
    flex-shrink: 0;
}
.chief_search_close:hover {
    color: var(--color_mono_900);
    background: var(--color_mono_100);
}

/* ===== 푸터 ===== */
.chief_footer {
    background: #2a2d33;
    color: rgba(255,255,255,.7);
    padding: 56px 0 40px;
    /* 운영 layout.css의 element 규칙 footer{font-size:0;line-height:0;text-align:center;}가
       서브페이지에서 푸터 텍스트를 무너뜨리는 것을 강제 보정 */
    font-size: 16px !important;
    line-height: 1.5 !important;
    text-align: left;
}
.chief_footer_inner {
    position: relative;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}
.chief_footer_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    margin-bottom: 28px;
}
.chief_footer_logo {
    display: block;
    width: 140px;
    height: 48px;
    background: url('https://www.ddm.go.kr/site/chief/images/common/logo_bi_wh2022.png') no-repeat left center / contain;
    text-indent: -9999px;
    overflow: hidden;
    opacity: .8;
}
.chief_footer_nav {
    display: flex;
    gap: 28px;
}
.chief_footer_nav_link {
    font-size: 18px; /* 푸터 nav — 메인 본문급 강조 */
    color: #fff;
    font-weight: 500;
    transition: color var(--transition-base);
}
.chief_footer_nav_link:hover {
    color: #fff;
    text-decoration: underline;
}
.chief_footer_info {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 16px; /* 푸터 정보 */
    line-height: 1.8;
    color: rgba(255,255,255,.6);
    margin-bottom: 14px;
}
.chief_footer_info_item {
    position: relative;
    padding-right: 16px;
}
.chief_footer_info_item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0; top: 50%;
    width: 1px; height: 12px;
    background: rgba(255,255,255,.2);
    transform: translateY(-50%);
}
.chief_footer_copy {
    font-size: 16px; /* 푸터 카피라이트 */
    color: rgba(255,255,255,.4);
}

/* 상단이동 버튼 — 보조 기능, 모노톤. 푸터 #2a2d33 대비 밝은 회색.
   스크롤 400px 이상에서 페이드인 (.is-visible 토글) */
.chief_to_top {
    position: fixed;
    right: 32px;
    bottom: 32px;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    color: var(--color_mono_700);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--color_mono_200);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .3s ease, transform .3s ease, background var(--transition-base), color var(--transition-base), visibility 0s linear .3s;
    z-index: 90;
}
.chief_to_top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .3s ease, transform .3s ease, background var(--transition-base), color var(--transition-base), visibility 0s linear 0s;
}
.chief_to_top:hover {
    background: var(--color_mono_900);
    color: #fff;
    border-color: var(--color_mono_900);
}
.chief_to_top:focus-visible {
    outline: 2px solid var(--color_mono_700);
    outline-offset: 3px;
}
@media (max-width: 768px) {
    .chief_to_top {
        right: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px;
    }
}

/* ===== 반응형 — 1024 이하 ===== */
@media (max-width: 1024px) {
    :root {
        --container-pad: 24px;
    }
    .chief_header_inner { height: 72px; }
    .chief_logo_image { width: 130px; height: 44px; }
    .chief_logo_name { font-size: 20px; } /* tablet 로고 */
    .chief_gnb_list { gap: 24px; }
    .chief_gnb_link { padding: 24px 0; } /* font-size는 PC 기본 16px 유지 (1024 tablet 본문 최소 16) */
    .chief_tool_button { width: 38px; height: 38px; }

    .chief_footer_top { flex-direction: column; gap: 20px; align-items: flex-start; }
}

/* ===== 모바일 — 768 이하 ===== */
@media (max-width: 768px) {
    .chief_gnb { display: none; } /* 모바일은 햄버거 메뉴로 대체 */
    .chief_header_inner { height: 60px; }
    .chief_logo_name { display: none; }
    .chief_footer_nav { flex-wrap: wrap; gap: 12px 20px; }

    /* 모바일은 햄버거만 노출 — 유저/검색은 추후 모바일 메뉴 안으로 흡수 */
    .chief_tool_button_user,
    .chief_tool_button_search { display: none; }
    .chief_tool_button_menu { display: grid; }

    /* 검색 패널 모바일 축소 */
    .chief_search_panel_inner { padding: 16px var(--container-pad); }
    .chief_search_form { padding: 8px 12px 8px 16px; gap: 8px; }
    .chief_search_input { font-size: 18px; }
    .chief_search_submit { padding: 8px 16px; font-size: 18px; }
}

/* ===================================================================
   헤더 · 푸터 공통 오버라이드 (main · sub 공유) — main2026.css에서 이관
   =================================================================== */
.chief_gnb_list {
    gap: 28px;
}
.chief_gnb_item,
.chief_gnb_link {
    font-size: 22px;
}
/* 좁은 폭에서 메뉴 라벨이 2줄로 줄바꿈되는 것 방지 */
.chief_gnb_link {
    white-space: nowrap;
}

/* 로고 이미지 — 원본 144x72(2:1) 비율 보정 */
.chief_logo_image {
    width: 112px;
}
.chief_logo_link {
    gap: 10px;
}

/* 상단 topbar 링크 호버 — 흰색 + 언더라인 */
.chief_topbar_link:hover,
.chief_topbar_button:hover {
    color: #fff;
    text-decoration: underline;
}

/* 푸터 — 네이비 톤 모노톤 (웹접근성 대비 확보 위해 깊은 네이비로 조정) */
.chief_footer {
    background: #28344f;
}
/* 카피라이트 — white .4는 어떤 어두운 배경에서도 AA(4.5:1) 미달 → 불투명도 상향 */
.chief_footer_copy {
    color: rgba(255, 255, 255, 0.62);
}

/* GNB 반응형 — 1000까지 GNB 노출 유지(그 이하는 햄버거 드로어), 표준 BP 1600/1024 */
@media (max-width: 1600px) {
    .chief_gnb_list { gap: 12px; }
    .chief_gnb_item,
    .chief_gnb_link { font-size: 18px; }
    .chief_logo_name { font-size: 20px; }
}
/* 1025~1280 좁은 폭 — 로고·GNB·우측 아이콘 겹침 방지 (여백·글자·아이콘 압축) */
@media (max-width: 1280px) {
    :root { --container-pad: 24px; }
    .chief_gnb_list { gap: 8px; }
    .chief_gnb_item,
    .chief_gnb_link { font-size: 16px; }
    .chief_logo_name { font-size: 18px; }
    .chief_logo_image { width: 96px; height: 48px; }
    .chief_tool_button { width: 40px; height: 40px; }
}
@media (max-width: 1024px) {
    .chief_gnb_list { gap: 10px; }
    .chief_gnb_item,
    .chief_gnb_link { font-size: 16px; }
    /* 로고는 한 세트 — 숨기지 않고 크기만 축소 */
    .chief_logo_name { font-size: 18px; }
    .chief_logo_image { width: 88px; }
}
/* ≤1000 — GNB 숨기고 햄버거(전체메뉴 드로어)로 전환 */
@media (max-width: 1000px) {
    .chief_gnb { display: none; }
    .chief_tool_button_menu { display: grid; }
}
@media (max-width: 768px) {
    /* 모바일 사이드 거터 20px (헤더·본문·푸터 공통) */
    :root { --container-pad: 20px; }
    /* 로고 세트 유지 (부제 숨김 오버라이드) */
    .chief_logo_name { display: block; font-size: 16px; }
    .chief_topbar_link,
    .chief_topbar_button { font-size: 14px; padding: 8px 9px; }
}
@media (max-width: 480px) {
    .chief_topbar_inner { padding: 0 12px; }
    .chief_topbar_link,
    .chief_topbar_button { font-size: 13px; padding: 7px 7px; }
}

.chief_to_top.is-visible {
    width: 80px;
    height: 80px;
}
/* 모바일 — 탑버튼 축소 (is-visible 80px가 ≤768 base를 이기는 것 보정) */
@media (max-width: 768px) {
    .chief_to_top.is-visible { width: 44px; height: 44px; }
}

/* === 모바일 전체메뉴 드로어 (≤768 햄버거) === */
.chief_mmenu {
    position: fixed;
    inset: 0;
    z-index: 200;
}
.chief_mmenu[hidden] { display: none; }
body.chief_mmenu_open { overflow: hidden; }

.chief_mmenu_dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    transition: opacity .3s ease;
}
.chief_mmenu.is-open .chief_mmenu_dim { opacity: 1; }

.chief_mmenu_panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 86%;
    max-width: 360px;
    background: #fff;
    box-shadow: -8px 0 30px rgba(0, 0, 0, .2);
    transform: translateX(100%);
    transition: transform .3s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.chief_mmenu.is-open .chief_mmenu_panel { transform: translateX(0); }

.chief_mmenu_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--color_mono_200);
}
.chief_mmenu_title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color_mono_900);
}
.chief_mmenu_close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color_mono_700);
    border-radius: 50%;
}
.chief_mmenu_close:hover { background: var(--color_mono_100); }

.chief_mmenu_nav { padding: 4px 0; }
.chief_mmenu_group { border-bottom: 1px solid var(--color_mono_100); }
.chief_mmenu_link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 20px;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--color_mono_900);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base);
}
/* 호버는 옅은 네이비 틴트, 클릭(펼침) 시 행 배경을 네이비로 채움 — 글자색은 네이비 X */
.chief_mmenu_link:hover { background: var(--color_primary_soft); }
.chief_mmenu_link.is-open {
    background: var(--color_primary);
    color: #fff;
}
.chief_mmenu_chevron {
    flex-shrink: 0;
    color: var(--color_mono_400);
    transition: transform .25s ease, color var(--transition-base);
}
.chief_mmenu_link.is-open .chief_mmenu_chevron {
    transform: rotate(180deg);
    color: #fff;
}
.chief_mmenu_sub {
    background: var(--color_mono_50);
    padding: 4px 0 8px;
}
.chief_mmenu_sub[hidden] { display: none; }
.chief_mmenu_sub a {
    display: block;
    padding: 12px 20px 12px 32px;
    font-size: 16px;
    color: var(--color_mono_700);
    transition: background var(--transition-base), color var(--transition-base);
}
.chief_mmenu_sub a:hover { background: var(--color_mono_100); }

.chief_mmenu_util {
    margin-top: auto;
    padding: 18px 20px;
    border-top: 1px solid var(--color_mono_200);
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
}
.chief_mmenu_util_link {
    font-size: 16px;
    color: var(--color_mono_700);
    transition: color var(--transition-base);
}
.chief_mmenu_util_link:hover { color: var(--color_primary); }

/* === 주요사이트(패밀리) — 운영 family 패널과 동일 (중앙 모달형) === */
.chief_family_panel { position: fixed; inset: 0; z-index: 200; }
.chief_family_panel[hidden] { display: none; }
.chief_family_dim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity .25s linear;
}
.chief_family_panel.is-open .chief_family_dim { opacity: 1; }

.chief_family_content {
    position: fixed;
    top: 0;
    left: calc(50% - 705px);
    z-index: 50;
    width: 1410px;
    height: calc(100vh - 60px);
    margin: 30px 0;
    padding: 62px 40px 40px;
    border-radius: 40px;
    background: #f7f8fc;
    text-align: center;
}
.chief_family_subtitle {
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 24px;
    color: #414a73;
    font-weight: 400;
}
.chief_family_h2 img { display: inline-block; }
.chief_family_list {
    margin-top: 44px;
    border-radius: 5px;
    overflow: hidden;
    font-size: 0;
}
.chief_family_item {
    display: inline-block;
    position: relative;
    margin-right: 2px;
    vertical-align: top;
    box-shadow: -10px 0 30px rgba(65, 74, 115, 0.05);
}
.chief_family_item.n1 { width: 378px; }
.chief_family_item.n1 .chief_family_box { padding: 16px 20px 35px 30px; }
.chief_family_item.n2 { width: 192px; }
.chief_family_item.n2 li { width: 100%; }
.chief_family_item.n3 { width: calc(100% - 857px); }
.chief_family_item.n4 { width: 281px; margin-right: 0; }
.chief_family_box {
    overflow-y: auto;
    height: calc(100vh - 330px);
    padding: 16px 40px 35px 40px;
    background: #fff;
    font-size: 0;
    line-height: 0;
    text-align: left;
}
.chief_family_box ul + ul {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #ebecf2;
}
.chief_family_item li {
    position: relative;
    width: 49%;
    margin-right: 2%;
    padding-left: 15px;
    display: inline-block;
    text-align: left;
    vertical-align: top;
}
.chief_family_item li:nth-child(even) { margin-right: 0; }
.chief_family_item li:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    background: #888da6;
    border-radius: 50%;
}
.chief_family_box a {
    display: inline-block;
    padding: 4px 0;
    font-size: 15px;
    line-height: 18px;
    color: #52535e;
    letter-spacing: -0.03em;
}
.chief_family_box a:hover,
.chief_family_box a:focus-visible {
    color: var(--color_primary);
    text-decoration: underline;
}
.chief_family_category {
    position: relative;
    padding: 13px 0;
    background: #414a73;
}
.chief_family_item:nth-child(even) .chief_family_category { background: #888da6; }
.chief_family_category span {
    position: relative;
    font-size: 18px;
    color: #fff;
    line-height: 24px;
}
.chief_family_category span:before {
    content: '';
    display: block;
    position: absolute;
    top: 1px;
    right: -14px;
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
}
.chief_family_close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
    color: #fff;
    background: #414a73;
    border-radius: 50%;
    display: grid;
    place-items: center;
}
/* 운영 family 반응형 (1440 / 1200 / 800 / 640) */
@media (max-width: 1440px) {
    .chief_family_content { left: 0; width: 100%; padding: 45px 30px 30px; }
    .chief_family_box { height: calc(100vh - 300px); padding: 16px 25px 25px 25px; }
    .chief_family_item.n1 { width: 300px; }
    .chief_family_item.n1 .chief_family_box { padding: 16px 25px 25px 25px; }
    .chief_family_item.n2 { width: 150px; }
    .chief_family_item.n3 { width: calc(100% - 696px); }
    .chief_family_item.n4 { width: 240px; }
}
@media (max-width: 1200px) {
    .chief_family_content { left: 2%; width: 96%; }
    .chief_family_item.n1 { width: calc(50% - 1px); }
    .chief_family_item.n2 { width: calc(50% - 1px); margin-right: 0; }
    .chief_family_item.n2 li { width: 49%; }
    .chief_family_item.n3 { width: calc(50% - 1px); margin-top: 2px; }
    .chief_family_item.n4 { width: calc(50% - 1px); margin-top: 2px; }
    .chief_family_box { height: calc(50vh - 180px); }
}
@media (max-width: 800px) {
    .chief_family_list { height: calc(100% - 120px); overflow-y: auto; }
    .chief_family_subtitle { font-size: 16px; }
    .chief_family_h2 { transform: scale(0.8); }
    .chief_family_item.n1,
    .chief_family_item.n2,
    .chief_family_item.n3,
    .chief_family_item.n4 { width: 100%; margin: 0; }
    .chief_family_box { height: auto; overflow: initial; padding: 16px 20px 15px 20px; }
}
@media (max-width: 640px) {
    .chief_family_content { padding: 30px 20px 30px; }
    .chief_family_list { height: calc(100% - 90px); margin-top: 20px; }
    .chief_family_category { padding: 8px 0; }
    .chief_family_category span { font-size: 15px; }
    .chief_family_box a { font-size: 14px; line-height: 16px; }
    .chief_family_close { width: 30px; height: 30px; }
}