.esg33-page {
    /* Page-owned colors retained for this risk-board family. */
    --esg33-green: #b9cf41;
    --esg33-purple: #744d99;
    --esg33-grid: #f0aa59;
    --esg33-fill: #fffaf3;
}

.esg33-page .esg33-flow {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.esg33-page .esg33-flow-step {
    padding: 34px 22px;
    color: var(--esg-color-white);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-indent: 0;
    clip-path: polygon(0 0, 86% 0, 100% 50%, 86% 100%, 0 100%, 10% 50%);
}

.esg33-page .esg33-flow-step.flow-blue {
    background: var(--esg-color-blue);
}

.esg33-page .esg33-flow-step.flow-orange {
    background: var(--esg-color-chart-orange);
}

.esg33-page .esg33-flow-step.flow-teal {
    background: var(--esg-color-teal);
}

.esg33-page .esg33-flow-step.flow-green {
    background: var(--esg33-green);
}

.esg33-page .esg33-flow-step.flow-purple {
    background: var(--esg33-purple);
}

.esg33-page .esg33-risk-board {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    border: 1px solid var(--esg33-grid);
    background: var(--esg-color-white);
}

.esg33-page .esg33-risk-board-label {
    background: var(--esg-color-chart-orange);
    color: var(--esg-color-white);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 12px;
    text-indent: 0;
}

.esg33-page ul,
.esg33-page .esg33-management-table ul {
    list-style: disc;
    list-style-position: outside;
    padding-left: 1.2em; /* 補上給圓點站立的空間 */
}

    .esg33-page ul li,
    .esg33-page .esg33-management-table ul li {
        list-style: disc;
        display: list-item;
    }

.esg33-page .esg33-risk-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.esg33-page .esg33-risk-card {
    min-height: 228px;
    padding: 22px 18px 24px;
    border-left: 1px solid var(--esg33-grid);
    border-bottom: 1px solid var(--esg33-grid);
    background: var(--esg-color-white);
}

.esg33-page .esg33-risk-card:nth-child(-n + 6) {
    border-top: none;
}

.esg33-page .esg33-risk-card:nth-child(6n + 1) {
    border-left: none;
}

.esg33-page .esg33-risk-card:nth-last-child(-n + 6) {
    border-bottom: none;
}

.esg33-page .esg33-risk-card h4 {
    margin: 0 0 18px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
    text-indent: 0;
}

.esg33-page .esg33-risk-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.esg33-page .esg33-risk-card li {
    margin: 10px 10px;
    font-size: 16px;
    line-height: 1.65;
    text-indent: 0;
}

.esg33-page .esg33-risk-card li:last-child {
    margin-bottom: 0;
}

@media (max-width: 1199px) {
    .esg33-page .esg33-risk-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .esg33-page .esg33-risk-card:nth-child(6n + 1) {
        border-left: 1px solid var(--esg33-grid);
    }

    .esg33-page .esg33-risk-card:nth-child(3n + 1) {
        border-left: none;
    }

    .esg33-page .esg33-risk-card:nth-last-child(-n + 6) {
        border-bottom: 1px solid var(--esg33-grid);
    }

    .esg33-page .esg33-risk-card:nth-last-child(-n + 3) {
        border-bottom: none;
    }
}

@media (max-width: 991px) {
    .esg33-page .esg33-flow {
        grid-template-columns: 1fr;
    }

    .esg33-page .esg33-flow-step {
        clip-path: none;
        border-radius: 18px;
        padding: 22px 18px;
    }

    .esg33-page .esg33-risk-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .esg33-page .esg33-risk-card:nth-child(3n + 1) {
        border-left: 1px solid var(--esg33-grid);
    }

    .esg33-page .esg33-risk-card:nth-child(2n + 1) {
        border-left: none;
    }

    .esg33-page .esg33-risk-card:nth-last-child(-n + 3) {
        border-bottom: 1px solid var(--esg33-grid);
    }

    .esg33-page .esg33-risk-card:nth-last-child(-n + 2) {
        border-bottom: none;
    }
}

@media (max-width: 768px) {
    .esg33-page .esg33-risk-board {
        grid-template-columns: 1fr;
    }

    .esg33-page .esg33-risk-board-label {
        writing-mode: horizontal-tb;
        padding: 12px 18px;
    }

    .esg33-page .esg33-risk-grid {
        grid-template-columns: 1fr;
    }

    .esg33-page .esg33-risk-card,
    .esg33-page .esg33-risk-card:nth-child(2n + 1),
    .esg33-page .esg33-risk-card:nth-child(3n + 1),
    .esg33-page .esg33-risk-card:nth-child(6n + 1) {
        border-left: none;
    }

    .esg33-page .esg33-risk-card {
        min-height: auto;
        border-bottom: 1px solid var(--esg33-grid);
    }

    .esg33-page .esg33-risk-card:last-child {
        border-bottom: none;
    }
}