/**
 * organization-svg.css
 * 의생명연구원 조직도 — 순수 SVG 버전 페이지 전용 컨테이너
 *
 * 역할: SVG 자체에는 viewBox 기반 좌표만 있으므로,
 *       페이지 레벨에서 가로 스크롤·여백·최소 폭 제어만 담당.
 *       SVG 내부 스타일은 #bri-org-svg 스코프로 자체 캡슐화되어 있음.
 */

/* ===================================
   SVG 래퍼 — 좁은 뷰포트 대비 가로 스크롤
   =================================== */
.org-svg-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--space-8) 0 var(--space-14);
}

.org-svg-wrap > svg#bri-org-svg {
    display: block;
    width: 100%;
    min-width: 1052px;     /* organization.css와 동일 최소 폭 */
    max-width: 1480px;     /* SVG viewBox 폭 (viewBox -40 0 1480 1120 기준) */
    height: auto;
    margin: 0 auto;
}

/* ===================================
   인쇄: SVG 폭을 페이지에 맞춤
   =================================== */
@media print {
    .org-svg-wrap {
        overflow: visible;
        padding: 0;
    }
    .org-svg-wrap > svg#bri-org-svg {
        min-width: 0;
        width: 100%;
        page-break-inside: avoid;
    }
}

/* ===================================
   SVG 내부 스타일 (페이지 <defs><style>에서 이전)
   color 토큰: common.css color tokens (primary 계열)
   font 토큰: typography.md # Type Scale
   =================================== */

/* SUIT는 common.css 전역 상속 — SVG는 명시적 상속 보강 */
#bri-org-svg { font-family: inherit; }

/* 연결선 — primary-100 */
#bri-org-svg .conn {
    stroke: var(--color-primary-100);
    stroke-width: 2;
    fill: none;
    stroke-linecap: square;
}

/* 노드 공통 — 클릭/포커스 */
#bri-org-svg .org-node[data-tel] { cursor: pointer; }
#bri-org-svg .org-node:focus { outline: none; }
#bri-org-svg .org-node:focus-visible .node-rect {
    stroke: var(--color-primary-500);
    stroke-width: 3;
}

/* hover 시 부드러운 drop-shadow */
#bri-org-svg .org-node { transition: filter 0.18s ease; }
#bri-org-svg .org-node:hover {
    filter: drop-shadow(0 4px 10px rgba(0, 54, 144, 0.18));
}

/* 기존 그림자 rect 비표시 (HTML에는 잔존) */
#bri-org-svg .node-rect-shadow { display: none; }

/* Lv1 root — primary-900 배경 */
#bri-org-svg .lv1 .node-rect {
    fill: var(--color-primary-900);
    stroke: var(--color-primary-900);
    stroke-width: 2;
}
#bri-org-svg .lv1 .org-node__role {
    fill: var(--color-white);
    font-size: var(--fs-section);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
}
#bri-org-svg .lv1:hover .node-rect {
    fill: var(--color-primary-950);
    stroke: var(--color-primary-950);
}

/* Lv2 — primary-700 배경 */
#bri-org-svg .lv2 .node-rect {
    fill: var(--color-primary-700);
    stroke: var(--color-primary-700);
    stroke-width: 2;
}
#bri-org-svg .lv2 .org-node__role {
    fill: var(--color-white);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
}
#bri-org-svg .lv2:hover .node-rect {
    fill: var(--color-primary-500);
    stroke: var(--color-primary-500);
}

/* Lv3 — 흰 배경 + primary-500 border */
#bri-org-svg .lv3 .node-rect {
    fill: var(--color-white);
    stroke: var(--color-primary-500);
    stroke-width: 2;
}
#bri-org-svg .lv3 .org-node__role {
    fill: var(--color-primary-500);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls);
}
#bri-org-svg .lv3:hover .node-rect {
    fill: var(--color-primary-25);
}

/* Dashed 노드 — 점선 테두리 */
#bri-org-svg .dashed .node-rect {
    fill: var(--color-white);
    stroke: var(--color-primary-500);
    stroke-width: 2;
    stroke-dasharray: 4 3;
}
#bri-org-svg .dashed .org-node__role {
    fill: var(--color-primary-500);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls);
}
#bri-org-svg .dashed:hover .node-rect {
    fill: var(--color-primary-25);
}

/* 모션 감소 환경 */
@media (prefers-reduced-motion: reduce) {
    #bri-org-svg .org-node { transition: none; }
}

/* ===================================
   전화번호 모달 내부 스타일
   =================================== */
.org-tel-modal__table {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

/* 헤더 행 */
.org-tel-modal__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-primary-25);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.org-tel-modal__head-label {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-primary-700);
  white-space: nowrap;
}

/* 데이터 행 */
.org-tel-modal__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-3) var(--space-1);
  border-bottom: 1px solid var(--color-gray-300);
}

.org-tel-modal__row:last-child {
  border-bottom: none;
}

.org-tel-modal__name {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-gray-900);
}

/* 전화번호 + 이메일 세로 2줄 */
.org-tel-modal__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}

.org-tel-modal__tel,
.org-tel-modal__email {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-primary-700);
  text-decoration: none;
  white-space: nowrap;
}

.org-tel-modal__tel:hover,
.org-tel-modal__email:hover {
  text-decoration: underline;
}

/* 모달 최소 폭 */
#orgTelModal .modal__dialog {
  min-width: 480px;
}

/* 바로가기 없을 때 footer 영역 전체 숨김 */
#orgTelModal .modal__footer:has(> .is-hidden:only-child) {
  display: none;
}

#orgTelGoBtn.is-hidden {
  display: none;
}