/* Style 4: Flat & Block-based - REVERT & STABILIZE */

/* Reset & Base */
.molit-org-container {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    background: transparent;
}

.molit-org-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.molit-org-container * {
    box-sizing: border-box;
}

/* 텍스트 100% 가운데 정렬 강제 보장 및 a태그 상하 충분한 패딩 */
.molit-org-container a {
    text-decoration: none;
    color: #333;
    display: block;
    padding: 14px 15px;
    text-align: center !important;
    /* 사용자가 강조한 전체 가운데 정렬 */
    transition: background 0.2s;
}

.molit-org-container a:hover {
    background: #f1f5f9;
}

/* 텍스트/카드 공통 리셋 */
.org-card {
    background: transparent;
    text-align: center;
    border: none;
    margin: 0;
    padding: 0;
}

/* 최상위 직책 공통 */
.node-minister {
    background: #112a52;
    font-weight: 700;
    width: 220px;
    margin: 0 auto;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.node-minister a {
    color: #fff;
    font-size: 16px;
}

.node-minister a:hover {
    background: transparent;
    opacity: 0.9;
}

.node-viceminister {
    background: #3b5998;
    font-weight: 700;
    width: 100%;
    margin: 0 auto 15px auto;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.node-viceminister a {
    color: #fff;
    font-size: 15px;
}

.node-viceminister a:hover {
    background: transparent;
    opacity: 0.9;
}

/* 3뎁스 (파란색 국실 간판) 공통 속성 */
.node-bureau {
    background: #5a7bb5;
    font-weight: 700;
    width: 100%;
    margin: 0;
    border-radius: 4px;
}

.node-bureau a {
    color: #fff;
    font-size: 15px;
    padding: 14px 15px;
}

.node-bureau a:hover {
    background: transparent;
    opacity: 0.9;
}

/* ------------------------------------- */
/* PC 반응형 (>= 769px) */
/* ------------------------------------- */
@media (min-width: 860px) {
    .org-level-1 {
        text-align: center;
        margin-bottom: 30px;
    }

    /* 장관 직속 그룹 */
    .direct-sub.direct-1 {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-top: 15px;
    }

    .direct-sub.direct-1>li {
        width: 180px;
        border: 1px solid #e2e8f0;
        border-radius: 4px;
        background: #fff;
        display: flex;
        flex-direction: column;
    }

    .direct-sub.direct-1 .toggle-parent {
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
        font-weight: 500;
    }

    .direct-sub.direct-1 .toggle-target .org-card a {
        border-bottom: 1px dashed #e2e8f0;
    }

    .direct-sub.direct-1 .toggle-target>li:last-child .org-card a {
        border-bottom: none;
    }

    /* 차관 단위 기둥 */
    .org-level-2-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        margin-top: 20px;
    }

    .viceminister-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    /* 차관 직속 그룹 (운영지원과 등) */
    .direct-sub.direct-2 {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-bottom: 20px;
    }

    .direct-sub.direct-2>li {
        border: 1px solid #e2e8f0;
        border-radius: 4px;
        background: #f8fafc;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    }

    .direct-sub.direct-2>li .org-card {
        font-weight: 500;
    }

    /* 3뎁스 기둥 레이아웃 (국토도시실 등 나열) */
    .level-3-list {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 15px;
        width: 100%;
    }

    /* 하나의 국/실 전체 컨테이너 */
    .dept-level-3 {
        flex: 1;
        min-width: 150px;
        display: flex;
        flex-direction: column;
    }

    /* 파란 간판 바로 아래 하위 뎁스들을 담는 최상위 박스 - 강제 15px 여백 주어 딱 붙는 것 방지! */
    .dept-level-3>.sub-depts {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-top: 15px;
        width: 100%;
        background: transparent;
    }

    /* 4뎁스 직속 텍스트 그룹 (기획담당관 등) */
    .dept-level-4-direct {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .dept-level-4-direct .direct-depts {
        display: flex;
        flex-direction: column;
        border: 1px solid #e2e8f0;
        border-radius: 4px;
        background: #fff;
    }

    .dept-level-4-direct .direct-depts .org-card a {
        border-bottom: 1px dashed #e2e8f0;
    }

    .dept-level-4-direct .direct-depts>li:last-child .org-card a {
        border-bottom: none;
    }

    /* 4뎁스 관 (주택정책관 등 회색 헤더 박스) */
    .dept-level-4 {
        border: 1px solid #e2e8f0;
        border-radius: 4px;
        background: #fff;
        overflow: hidden;
    }

    .dept-level-4>.org-card {
        background: #f8fafc;
        font-weight: 700;
        border-bottom: 1px solid #e2e8f0;
    }

    /* 5뎁스 리스트 */
    .dept-level-4>.sub-depts {
        display: flex;
        flex-direction: column;
    }

    .dept-level-4>.sub-depts .org-card a {
        border-bottom: 1px dashed #e2e8f0;
    }

    .dept-level-4>.sub-depts>li:last-child .org-card a {
        border-bottom: none;
    }
}

/* ------------------------------------- */
/* 태블릿/모바일 반응형 (< 769px) */
/* ------------------------------------- */
@media (max-width: 860px) {
    /* 모바일에서 왼쪽 정렬되는 버그 수정을 위해 text-align center 강제유지 */

    .node-minister {
        width: 100%;
    }

    .node-viceminister {
        width: 100%;
        margin-top: 25px;
        margin-bottom: 15px;
    }

    /* 아코디언 설정 초기화 (860px 영역) */
    .toggle-parent {
        position: relative;
        cursor: default;
    }

    .toggle-icon {
        display: none;
    }

    .dept-level-3 {
        margin-bottom: 20px;
    }

    /* 파란 상자(국실)와 그 아래 나오는 박스 간의 여백 확실히 확보 */
    .toggle-target {
        display: block;
        margin-top: 15px;
    }

    /* 4뎁스 직속 */
    .dept-level-4-direct .direct-depts {
        margin-top: 15px;
        margin-bottom: 15px;
        border: 1px solid #e2e8f0;
        border-radius: 4px;
        background: #fff;
    }

    .dept-level-4-direct .direct-depts .org-card a {
        border-bottom: 1px dashed #e2e8f0;
    }

    .dept-level-4-direct .direct-depts>li:last-child .org-card a {
        border-bottom: none;
    }

    /* 4뎁스 관 단위 박스 */
    .dept-level-4 {
        margin-top: 15px;
        border: 1px solid #e2e8f0;
        border-radius: 4px;
        margin-bottom: 15px;
        overflow: hidden;
        background: #fff;
    }

    .dept-level-4>.org-card {
        background: #f8fafc;
        font-weight: 700;
        border-bottom: 1px solid #e2e8f0;
    }

    .dept-level-4>.sub-depts {
        display: flex;
        flex-direction: column;
    }

    .dept-level-4>.sub-depts .org-card a {
        border-bottom: 1px dashed #e2e8f0;
    }

    .dept-level-4>.sub-depts>li:last-child .org-card a {
        border-bottom: none;
    }

    /* 장관/차관 직속 */
    .direct-sub.direct-1 {
        gap: 10px;
        margin-top: 15px;
    }

    .direct-sub.direct-1>li {
        border: 1px solid #e2e8f0;
        border-radius: 4px;
        background: #fff;
    }

    .direct-sub.direct-1 .toggle-parent {
        background: #f8fafc;
        font-weight: 600;
    }

    .direct-sub.direct-1 .toggle-target {
        border-top: 1px solid #e2e8f0;
        margin-top: 0;
    }

    .direct-sub.direct-1 .toggle-target .org-card a {
        border-bottom: 1px dashed #e2e8f0;
    }

    .direct-sub.direct-1 .toggle-target>li:last-child .org-card a {
        border-bottom: none;
    }

    .direct-sub.direct-2 {
        margin-bottom: 15px;
    }

    .direct-sub.direct-2>li {
        border: 1px solid #e2e8f0;
        border-radius: 4px;
        background: #f8fafc;
        font-weight: 600;
    }
}

/* 860px ~ 361px : 2줄 격자 핀터레스트 나열 */
@media (max-width: 860px) and (min-width: 361px) {
    .level-3-list {
        column-count: 2;
        column-gap: 15px;
        display: block;
    }

    .level-3-list>li {
        break-inside: avoid;
        margin-bottom: 20px;
        display: inline-block;
        width: 100%;
    }

    .direct-sub.direct-1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
}

/* 스마트폰 (<= 360px): 1줄 나열 및 아코디언 모드 활성화 */
@media (max-width: 380px) {

    /* 모바일 아코디언에서 파란상자끼리 너무 멀다는 의견 수렴하여 간격 축소 */
    .level-3-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .dept-level-3 {
        margin-bottom: 0;
    }

    .direct-sub.direct-1 {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .toggle-parent {
        cursor: pointer;
    }

    .toggle-icon {
        display: block;
        position: absolute;
        right: 20px;
        top: 18px;
        width: 8px;
        height: 8px;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: rotate(45deg);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .active>.toggle-icon {
        transform: rotate(225deg);
        top: 20px;
    }

    .toggle-target {
        display: none;
        padding-top: 5px;
    }

    /* 열렸을 때 자식들의 margin-top과 충돌 방지 */
    .direct-sub.direct-1 .toggle-parent .toggle-icon {
        border-color: #64748b;
        top: 16px;
    }

    .direct-sub.direct-1 .active .toggle-icon {
        top: 20px;
    }
}