---
/* [dx2.astro] 격식 있는 비교표 스타일 */
---

<div class="table-wrapper">
    <table class="formal-table">
        <colgroup>
            <col width="13%" />
            <col width="29%" />
            <col width="29%" />
            <col width="30%" />
        </colgroup>

        <thead>
            <tr>
                <th class="category-header">구분</th>
                <th class="stakeholder-header client">발주자</th>
                <th class="stakeholder-header contractor">시공자</th>
                <th class="stakeholder-header designer">설계자</th>
            </tr>
        </thead>

        <tbody>
            <tr class="highlight-row">
                <td class="category-cell"><strong>필요 역량</strong></td>
                <td class="center-text">실행 의지와 합리적 판단 역량</td>
                <td class="center-text">기술 투자와 운영 역량</td>
                <td class="center-text">기술개발 투자에 의한 S/W 역량</td>
            </tr>

            <tr>
                <td class="category-cell"
                    >수작업 의존 <br />→<br /> S/W 기반 체계화</td
                >
                <td>
                    <ul>
                        <li>
                            행정서류 자동 생성 및 최소화로 <strong
                                >업무 생산성 향상</strong
                            >
                        </li>
                        <li>
                            건설기간 단축, 건설비 및 유지관리비 <strong
                                >총비용 최소화</strong
                            >
                        </li>
                    </ul>
                </td>
                <td>
                    <ul>
                        <li>
                            체계적 공정/자원 관리를 통한 <strong
                                >신뢰성 확보 및 생산성 향상</strong
                            >
                        </li>
                        <li>
                            Model에서의 도면 추출로 쉽고 정확한
                            <strong>시공상세도 작성 용이</strong>
                        </li>
                        <li>
                            시스템 구축 시, 품질·안전·관리 등에 필요한
                            <strong>도서 작성 용이</strong>
                        </li>
                    </ul>
                </td>
                <td>
                    <ul>
                        <li>
                            SW기반 설계프로세스 체계화로 <strong
                                >설계 생산성 향상</strong
                            >
                        </li>
                        <li>
                            프로젝트 정보의 일관 유지 및 관리를 통한 <strong
                                >오류 최소화</strong
                            >
                        </li>
                        <li>
                            다양한 성과물과 정보물 활용으로 추가 <strong
                                >부가가치 창출</strong
                            >
                        </li>
                    </ul>
                </td>
            </tr>

            <tr>
                <td class="category-cell">2D<br />→<br />3D 기반 인지·검토</td>
                <td>
                    <ul>
                        <li>
                            3D 모델을 통한 직관적 시각화로 <strong
                                >품질 향상 및 안전성 제고</strong
                            >
                        </li>
                        <li>
                            건설단계별 수행상태에 대한 쉬운 이해로 관리 <strong
                                >편의성 증대</strong
                            >
                        </li>
                    </ul>
                </td>
                <td>
                    <ul>
                        <li style="letter-spacing: -0.9px;">
                            직관적 시각화로 계획시공 등을 관리하여 <strong
                                >안전성 제고 및 품질 향상</strong
                            >
                        </li>
                        <li>
                            중간태, 완성태 측량을 통한<br />시·공간적 관리의 <strong
                                >편리성 향상</strong
                            >
                        </li>
                    </ul>
                </td>
                <td>
                    <ul>
                        <li>
                            3D 모델을 통한 확인/검증으로 설계
                            <strong>오류 최소화 및 Claim 예방</strong>
                        </li>
                    </ul>
                </td>
            </tr>

            <tr>
                <td class="category-cell"
                    >문서 중심<br />→<br />데이터 통합 기반 협업</td
                >
                <td>
                    <ul>
                        <li>
                            현장 실무자와 발주자의 원활한 의사소통으로 <strong
                                >오류 최소화</strong
                            >
                        </li>
                        <li>
                            디지털 환경 구축을 통한 건설 <strong
                                >정보 통합관리 활용성 강화</strong
                            >
                        </li>
                    </ul>
                </td>
                <td>
                    <ul>
                        <li>
                            불필요한 행정서류 감소를 통한 <strong
                                >협업 및 의사소통 효율 향상</strong
                            >
                        </li>
                    </ul>
                </td>
                <td>
                    <ul>
                        <li>
                            설계 신뢰도 확보 및 발주자 <br />이익 기여로 <strong
                                >상호신뢰 증진</strong
                            >
                        </li>
                    </ul>
                </td>
            </tr>

            <tr>
                <td class="category-cell"
                    >사후 대응<br />→<br />사전 검증 중심 관리</td
                >
                <td>
                    <ul>
                        <li>
                            설계변경, 민원, 재작업, 소송 등의 <strong
                                >사전 예방, 최소화</strong
                            >
                        </li>
                    </ul>
                </td>
                <td>
                    <ul>
                        <li>
                            설계 및 시공 오류 예방과 원활한 의사 소통으로 <strong
                                >공사 Risk 최소화</strong
                            >
                        </li>
                    </ul>
                </td>
                <td>
                    <ul>
                        <li>
                            시공 전 설계검증 강화로<br />
                            <strong>설계 책임 리스크 감소</strong>
                        </li>
                    </ul>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<style>
    /* [테이블 기본 설정] */
    .table-wrapper {
        overflow-x: auto; /* 모바일에서 표가 잘리지 않고 스크롤되게 함 */
        margin-top: 1.95rem;
        font-family: "Pretendard", sans-serif;
    }

    .formal-table {
        width: 100%;
        border-collapse: collapse; /* 선 겹침 방지 */
        border-top: 1px solid #333; /* 맨 위 굵은 선 */
        border-bottom: 1px solid #333; /* 맨 아래 선 */
        background: white;
        font-size: 0.9rem;
        table-layout: fixed; /* 칸 너비 고정 */
        min-width: 800px; /* 표가 너무 찌그러지지 않게 최소 너비 확보 */
    }

    /* [헤더 스타일] - 주체별 색상 구분 */
    th {
        padding: 0.8rem;
        color: white;
        font-weight: 700;
        text-align: center;
        border-left: 1px solid rgba(255, 255, 255, 0.2);
    }
    th:first-child {
        border-left: none;
    }

    .category-header {
        background: rgb(126, 126, 126);
    } /* 구분: 회색 */
    .client {
        background: rgb(126, 126, 126);
    } /* 발주자: 파랑 */
    .contractor {
        background: rgb(126, 126, 126);
    } /* 시공자: 주황 */
    .designer {
        background: rgb(126, 126, 126);
    } /* 설계자: 초록 */

    /* [셀 스타일] */
    td {
        padding: 1rem;
        border-bottom: 1px solid #ddd; /* 가로 줄 */
        border-left: 1px solid #eee; /* 세로 줄 (연하게) */
        color: #333;
        vertical-align: middle; /* 세로 중앙 정렬 */
        word-break: keep-all; /* 단어 끊김 방지 */
    }
    td:first-child {
        border-left: none;
    }

    /* [1열: 구분] 스타일 */
    .category-cell {
        background: #f9f9f9;
        font-weight: 700;
        text-align: center;
        color: #444;
    }

    /* [행: 필요 역량] 강조 스타일 */
    .highlight-row td {
        background: #f0f7ff; /* 아주 연한 파란색 배경 */
        border-bottom: 2px solid #ddd; /* 구분선 강조 */
    }
    .highlight-row .center-text {
        font-weight: 700;
        color: #000;
    }

    /* 텍스트 정렬 유틸리티 */
    .center-text {
        text-align: center;
    }
    .text-gray {
        color: #aaa;
    }

    /* [리스트 스타일] - 깔끔한 점 목록 */
    ul {
        margin: 0;
        padding-left: 1.2rem;
    }
    li {
        margin-bottom: 0.5rem;
        line-height: 1.6;
        list-style-type: disc; /* 기본 점 */
        /* 👇 [핵심] 이 두 줄을 추가/수정 하세요! */
        letter-spacing: -0.02em; /* 글자 사이를 좁혀서 더 많이 들어가게 함 */
        word-break: keep-all; /* 단어가 중간에 끊기지 않게 함 */
    }
    li:last-child {
        margin-bottom: 0;
    }

    /* 강조 글씨 */
    strong {
        font-weight: 700;
        color: #000;
        background: rgba(0, 0, 0, 0.05); /* 형광펜 효과 아주 연하게 */
        padding: 0 2px;
    }
</style>