/* ── Organization Chart ──
 * pages/company/organization.php 인라인 <style> 추출 (Phase D)
 * 다국어 라벨은 attr(data-i18n-label)로 PHP 보간 제거
 */
.org {
    max-width: 900px;
    margin: var(--space-10) auto 0;
    padding-bottom: var(--space-8);
}

.org-row {
    display: flex;
    justify-content: center;
}

/* ── Nodes ── */
.org-node {
    box-sizing: border-box;
    text-align: center;
    position: relative;
    border-radius: var(--radius-lg);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.org-node:hover {
    transform: translateY(-2px);
}

/* CEO */
.org-ceo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--ijs-primary);
    color: #fff;
    padding: var(--space-4) var(--space-10);
    min-width: 200px;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(208, 17, 100, 0.2);
}
.org-ceo .org-name {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: inherit;
}
.org-ceo .org-sub {
    font-size: var(--text-sm);
    opacity: 0.75;
    color: inherit;
    margin-top: 2px;
}

/* Director */
.org-director {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #21232A;
    color: #fff;
    padding: var(--space-3) var(--space-8);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    min-width: 180px;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Division */
.org-division {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--ijs-primary);
    border: 2px solid var(--ijs-primary);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    min-width: 180px;
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    line-height: 1.3;
}

/* Team */
.org-team {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    background: var(--ijs-bg-gray, #F7F8FA);
    color: var(--ijs-dark, #1A1D2E);
    border: 1px solid var(--ijs-border-light, #E5E7EB);
    border-left: 3px solid var(--ijs-primary);
    padding: var(--space-3) var(--space-4);
    width: 100%;
    box-sizing: border-box;
    border-radius: var(--radius-md);
}

/* ── 팀 하위 파트 (level 5) — 언어 무관 바닥 정렬 (DOM 재구조화 B안) ──
   org-columns가 두 컬럼을 같은 높이로 stretch → 각 컬럼 내용을 flexbox로 바닥까지 채워
   마지막 항목(좌: 마지막 팀 / 우: 마지막 파트)을 항상 같은 높이에 정렬. KO/EN 무관. */

/* 양 컬럼의 org-teams가 컬럼 높이를 채움 */
.org-columns .org-teams { flex: 1 1 auto; }
/* 팀만 있는 컬럼(경영지원): 팀들을 균등 분산 → 마지막 팀이 바닥 */
.org-columns .org-teams:not(:has(.org-parts)) { justify-content: space-between; }
/* 파트 있는 컬럼(생산): 생산팀 위 + org-parts가 나머지 채우고 파트 균등 분산 */
.org-columns .org-teams:has(.org-parts) > .org-parts {
    flex: 1 1 auto;
    justify-content: space-between;
}

.org-parts {
    display: flex;
    flex-direction: column;
    align-items: stretch;      /* 파트를 컨테이너(=가장 긴 파트) 폭으로 균일하게 */
    width: fit-content;        /* 컨테이너가 가장 긴 파트에 맞게 축소 → 모든 파트 동일 폭 */
    max-width: 100%;
    margin-top: 0;
    padding-left: var(--space-5);
    box-sizing: border-box;
    position: relative;
}
/* 세로 스파인 — 생산팀(위 gap)에서 마지막 파트 중앙까지 단일 연속선 */
.org-parts::before {
    content: '';
    position: absolute;
    left: var(--space-3);                  /* 12px */
    top: calc(var(--space-2) * -1);        /* -8px → 생산팀 바닥에 닿음 (org-teams gap) */
    bottom: 18px;                          /* 파트 높이(약 36px) 절반 — 마지막 파트 중앙에서 멈춤 */
    width: 1.5px;
    background: var(--ijs-border, #d1d5db);
}
.org-part {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;   /* 내용 세로 중앙 */
    flex: 0 0 auto;            /* space-between 분산 시 크기 유지 */
    min-height: 36px;          /* 고정 높이 — 영문/한글 길이·줄높이 무관하게 일정 */
    background: #fff;
    color: var(--ijs-dark, #1A1D2E);
    border: 1px solid var(--ijs-border-light, #E5E7EB);
    border-left: 2px solid var(--ijs-primary-light, #f08fbb);
    padding: 0 var(--space-3);  /* 세로 패딩 제거(높이는 min-height), 좌우 12px(텍스트 밀착) */
    width: auto;               /* 내용 크기 — 짧게 */
    max-width: 100%;
    box-sizing: border-box;
    border-radius: var(--radius-sm);
}
/* 가로 가지 — 각 파트 중앙에서 스파인으로 */
.org-part::after {
    content: '';
    position: absolute;
    left: calc((var(--space-5) - var(--space-3)) * -1);  /* -8px */
    top: 50%;
    width: calc(var(--space-5) - var(--space-3));         /* 8px */
    height: 1.5px;
    background: var(--ijs-border, #d1d5db);
}
.org-part .org-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    white-space: nowrap;
}
.org-part .org-sub {
    font-size: var(--text-xs);
    opacity: 0.6;
    margin-top: 1px;
}
.org-name {
    display: block;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: inherit;
    line-height: 1.3;
}
/* KO/EN name spans */
.org-ko-name { display: block; }
.org-en-name {
    display: none;
    font-size: var(--text-xs);
    opacity: 0.6;
    font-weight: var(--weight-normal);
    line-height: 1.3;
}
/* Subtitle lang variants */
.org-sub-ko { display: block; }
.org-sub-en { display: none; }

/* KO mode: show KO only */
.org[data-lang="ko"] .org-ko-name { display: block; }
.org[data-lang="ko"] .org-en-name { display: none; }
.org[data-lang="ko"] .org-sub-ko  { display: block; }
.org[data-lang="ko"] .org-sub-en  { display: none; }

/* EN mode: hide KO, show EN as primary */
.org[data-lang="en"] .org-ko-name { display: none; }
.org[data-lang="en"] .org-en-name { display: block; font-size: inherit; opacity: 1; font-weight: inherit; }
.org[data-lang="en"] .org-sub-ko  { display: none; }
.org[data-lang="en"] .org-sub-en  { display: block; }

.org-en {
    display: block;
    font-size: var(--text-xs);
    color: inherit;
    opacity: 0.6;
    font-weight: var(--weight-normal);
    margin-top: 2px;
    line-height: 1.3;
}
.org-director .org-name { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.org-division .org-name { font-size: var(--text-base); font-weight: var(--weight-bold); }
.org-sub {
    display: block;
    font-size: var(--text-xs);
    color: inherit;
    opacity: 0.55;
    font-weight: var(--weight-normal);
    margin-top: 3px;
    line-height: 1.4;
}

/* ── Connectors ── */
.org-connector {
    width: 1.5px;
    height: 32px;
    background: var(--ijs-border);
    margin: 0 auto;
}
.org-connector--sm {
    height: 24px;
}

/* Horizontal branch (JS로 left/width 동적 계산) */
.org-branch {
    position: relative;
    height: 1.5px;
}
.org-branch-line {
    position: absolute;
    top: 0;
    height: 1.5px;
    background: var(--ijs-border);
    /* left, width는 JS adjustOrgBranches()가 설정 */
}

/* ── Columns ── */
.org-columns {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
}

.org-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 380px;
}

.org-teams {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
    margin-top: var(--space-4);
}

.org-l2-section {
    position: relative;
}

/* ── 직속 사이드라인: 공장장 척추 라인에서 직접 분기 (flex 기반) ── */
.org-direct {
    position: relative;
    width: 100%;
    padding: 0;
}
/* 직속 위·아래 connector를 절반으로 (32 → 16) — 위쪽이 좁아 보이도록 */
.org-connector:has(+ .org-direct),
.org-direct + .org-connector {
    height: 16px;
}
/* 중앙 수직 라인 (공장장 척추가 계속됨) */
.org-direct::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1.5px;
    background: var(--ijs-border);
    transform: translateX(-50%);
}
/* 각 사이드라인 노드는 별도 row */
.org-direct-row {
    display: flex;
    align-items: center;
    margin-left: 50%;  /* row를 중앙에서 시작 */
    position: relative;
    z-index: 1;
}
.org-direct-row + .org-direct-row {
    margin-top: var(--space-3);
}
/* 좌측 가지: 중앙 척추 기준 미러 (오른쪽 가지의 좌우 반전) */
.org-direct-row--left {
    margin-left: 0;
    margin-right: 50%;
    flex-direction: row-reverse;
}
/* 가로 arm (중앙 → 노드까지, 고정 길이) */
.org-direct-arm {
    width: 192px;
    height: 1.5px;
    background: var(--ijs-border);
    flex-shrink: 0;
}
.org-direct-node {
    flex: 0 0 auto;
}
.org-division--sideline {
    /* admin 색상 그대로 — 위치만 차별화 */
}

@media (max-width: 768px) {
    /* 모바일: 직속 사이드라인을 메인 트리 아래로 이동 (직관성 개선) */
    .org {
        display: flex;
        flex-direction: column;
    }
    /* 직속 바로 위의 connector만 숨김 — 아래쪽 connector는 공장장↔사업부 연결로 활용 */
    .org-connector:has(+ .org-direct) {
        display: none;
    }
    /* 직속 영역을 사업부 아래로 push */
    .org-direct {
        order: 99;
        margin-top: var(--space-8);
        padding-top: var(--space-5);
        border-top: 1px dashed var(--ijs-border);
        position: relative;
    }
    /* 척추 라인 ::before를 라벨로 재활용 — data-i18n-label에서 동적 텍스트 */
    .org-direct::before {
        content: attr(data-i18n-label);
        position: static;
        display: block;
        width: auto;
        height: auto;
        background: transparent;
        transform: none;
        text-align: center;
        font-size: 11px;
        color: var(--ijs-text-light, #94a3b8);
        font-weight: 700;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        margin-bottom: var(--space-4);
    }
    /* 사이드라인 노드는 중앙 정렬, arm 숨김 (좌/우 방향 무의미 → --left 리셋) */
    .org-direct-row,
    .org-direct-row--left {
        margin-left: 0;
        margin-right: 0;
        flex-direction: row;
        justify-content: center;
        margin-bottom: var(--space-2);
    }
    .org-direct-arm { display: none; }
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .org {
        margin-top: var(--space-4);
        padding-bottom: var(--space-4);
    }

    .org-ceo {
        padding: var(--space-2) var(--space-4);
        min-width: 100px;
        border-radius: var(--radius-md);
    }
    .org-ceo .org-name {
        font-size: var(--text-sm);
    }
    .org-ceo .org-sub {
        font-size: 10px;
    }

    .org-director {
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-xs);
        min-width: 80px;
        border-radius: var(--radius-md);
    }

    .org-columns {
        gap: var(--space-3);
    }

    .org-branch-line {
        width: calc((100% + var(--space-3)) / 2);
    }

    .org-column {
        max-width: none;
    }

    .org-division {
        min-width: 0;
        font-size: 11px;
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-md);
    }

    .org-team {
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-sm);
    }

    .org-teams {
        gap: var(--space-1);
        margin-top: var(--space-2);
    }

    .org-connector {
        height: 18px;
    }
    .org-connector--sm {
        height: 14px;
    }

    .org-name {
        font-size: 12px;
    }
    .org-sub {
        font-size: 10px;
        margin-top: 1px;
    }
}