#diagramRoot {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 이 부분은 그대로 둡니다 */
    min-height: auto; /* 또는 100vh */
    color: #fff;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
}

/* ======================================================= */
/* 공통 콘텐츠 블록 스타일 (모든 content-block에 적용) */
/* ======================================================= */
.content-block {
    background-color: rgba(90, 112, 129, 0.6);
    border: 2px solid #ADD8E6;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(173, 216, 230, 0.7);
    display: flex;             /* 플렉스 컨테이너로 만듭니다. */
    flex-direction: column;    /* 자식 요소들을 세로(열) 방향으로 쌓이게 합니다. */
    align-items: center;       /* 세로로 쌓인 자식 요소들을 가로 축(교차 축)에서 중앙 정렬합니다. */
    justify-content: center;
    z-index: 10;
    box-sizing: border-box;
    /* 패딩은 레이아웃마다 조금씩 다를 수 있으므로 각 클래스에서 정의 */
}

.content-block .title {
    font-size: 24px;
    font-weight: bold;
    color: #ADD8E6;
    margin-bottom: 15px;
    text-align: center;
}

.content-block .description {
    font-size: 20px;
    color: white;
    line-height: 1.7;
    text-align: center;
}

/* ======================================================= */
/* PC용 레이아웃 기본 스타일 (Desktop Layout) */
/* ======================================================= */
.diagram-container.desktop-layout {
    width: 100%;
    max-width: 1200px;
    height: 900px;
    min-height: auto;
    transform-origin: center;
    box-sizing: border-box;
    display: block;
}

/* PC용 콘텐츠 블록 (레이아웃 관련 스타일만 정의) */
.content-block.desktop-block {
    position: absolute;
    width: 350px; /* PC 전용 너비 */
    height: 260px;
}

/* PC 블록 위치 */
.desktop-block.block-1 {
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
}

.desktop-block.block-2 {
    bottom: 10%;
    left: 10%;
}

.desktop-block.block-3 {
    bottom: 10%;
    right: 10%;
}

/* PC용 화살표 공통 스타일 */
.connector-arrow.desktop-arrow {
    position: absolute;
    transform-origin: center;
    z-index: 5;
}

/* ======================================================= */
/* 모바일용 레이아웃 기본 스타일 (Mobile Layout) */
/* ======================================================= */
.diagram-container.mobile-layout {
    display: none; /* 기본적으로 숨김 */
    width: 100%;
    height: auto;
    min-height: auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0 15px;
    box-sizing: border-box;
    position: relative;
}

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

/* 모바일용 콘텐츠 블록 (레이아웃 관련 스타일만 정의) */
.content-block.mobile-block {
    position: static;
    width: 100%;
    max-width: 350px; /* 모바일 전용 최대 너비 */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    padding: 20px; /* 모바일 전용 패딩 */
}

/* 모바일 블록 내부 텍스트 크기 조정은 그대로 유지 */
/* .mobile-block .number, .mobile-block .title, .mobile-block .description 은 변경 없음 */

/* 모바일 화살표 (블록과 함께 그룹화된 화살표) */
.connector-arrow.mobile-arrow {
    position: static;
    width: 35px;
    height: 35px;
    margin: 15px auto;
    display: block;
    transform: rotate(90deg);
}

/* 모바일 순환 아이콘 (그룹 바깥에 배치) */
.connector-arrow.mobile-cycle-arrow {
    position: static;
    width: 50px;
    height: 50px;
    margin: 30px auto;
    display: block;
    transform: none;
}

/* ======================================================= */
/* 반응형 전환 (1050px 이하) */
/* ======================================================= */
@media (max-width: 1050px) {
    /* PC 레이아웃 숨기고 모바일 레이아웃 표시 */
    .diagram-container.desktop-layout {
        display: none;
    }
    .diagram-container.mobile-layout {
        display: flex; /* 모바일에서만 보임 */
    }
}