/* 인증전문의 안내 페이지 전용 CSS */
/* 파일: cert/specialist/guide.php에서 사용되는 스타일시트 */
/* 생성일: 2025-09-03, 출처: guide.php 인라인 스타일 추출 */

/* 자격 인정 평점표 스타일 */
.data-list.specialist-point-table th,
.data-list.specialist-point-table td {
    font-size: 14px;
    line-height: 150%;
}

.data-list.specialist-point-table tbody th {
    background: var(--gray-100, #f4f5f6);
    padding: 10px;
}

.data-list.specialist-point-table tbody th.sub-th {
    background: none;
    padding: 10px 40px;
    font-weight: bold;
    text-align: left;
}

.data-list.specialist-point-table tbody th.sub-th+th.point {
    background: none;
    padding-left: 12px;
    padding-right: 12px;
    font-weight: bold;
    text-align: left;
}

.data-list.specialist-point-table tbody td {
    padding: 10px 40px 10px 60px;
    text-align: left;
}

/* numbered-item 스타일링 */
.data-list.specialist-point-table .numbered-item {
    margin: 0;
    padding-left: 20px;
    position: relative;
}

.data-list.specialist-point-table .numbered-item span {
    position: absolute;
    left: 0;
    top: 0;
}

/* 인증전문의 현황 페이지 스타일 */
/* 세 개의 차트 섹션을 가로로 배치 */
.chart-sections-wrapper {
    display: flex;
}

.chart-sections-wrapper .chart-section .toastui-chart-wrapper {
    text-align: center;
}

.chart-sections-wrapper .map-section,
.chart-sections-wrapper .chart-section {
    flex: 0 0 33.333333%;
    width: 33.333333%;
}

/* 정적 범례 스타일 */
.chart-legend {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-color {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 2px;
}

.legend-text {
    color: #333;
    font-size: 13px;
}

.chart-sections-wrapper .data-list-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
}

.chart-sections-wrapper .chart-box {
    position: relative;
    height: 400px;
    width: 100%;
}

.chart-sections-wrapper .map-box {
    height: 115%;
    position: relative;

}

#korea-map-status {
    width: 100%;
    height: 100%;
    position: relative;
    margin-top: -15%;
}

#korea-map-status .korea-map-svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: block;
}

#map-data-overlay {
    display: none;
    /* 오버레이는 사용하지 않음 */
}

.chart-sections-wrapper .data-list-items {
    background: var(--gray-50);
    border-radius: 8px;
    padding: 15px;
}

.chart-sections-wrapper .data-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-200);
}

.chart-sections-wrapper .data-item:last-child {
    border-bottom: none;
}

.chart-sections-wrapper .data-label {
    color: var(--gray-700);
    font-size: 14px;
}

.chart-sections-wrapper .data-value {
    font-weight: bold;
    color: var(--primary-blue);
    font-size: 15px;
}

/* 반응형 처리 */
@media (max-width: 1200px) {
    .chart-sections-wrapper {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }

    .chart-sections-wrapper .chart-section {
        flex: 1 1 50%;
        width: 50%
    }

    .chart-sections-wrapper .map-section {
        flex: 1 1 100%;
        width: 100%
    }

    .chart-sections-wrapper .map-box {
        width: 50%;
        margin: 0 auto;
    }

    .chart-sections-wrapper .chart-box {
        height: 450px;
    }
}

@media (max-width: 768px) {
    .chart-sections-wrapper .chart-section {
        min-width: 100%;
    }

    .chart-sections-wrapper .data-list-title {
        font-size: 16px;
    }

    .chart-sections-wrapper .data-item {
        padding: 6px 0;
    }

    .chart-sections-wrapper .data-label {
        font-size: 13px;
    }

    .chart-sections-wrapper .data-value {
        font-size: 14px;
    }

    .chart-sections-wrapper .map-box {
        width: 85%;
        margin: 0 auto;
    }

    .chart-legend {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .legend-item {
        flex: 0 1 45%;
    }
}

.data-list.specialist-point-table tbody td.bg-condition {
    padding-left: 12px;
    padding-right: 12px;
    text-align: center;
    background: var(--gray-100, #f4f5f6);
}

.data-list.specialist-point-table tbody .point {
    color: var(--primary-blue-500m, #2e3192);
    padding-left: 12px;
    padding-right: 12px;
}

.data-list.specialist-point-table .column-title span {
    font-weight: normal;
}

.renewal_rule-text-box {
    padding: 40px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.renewal_rule-text {
    max-width: 948px;
    width: 100%;
    padding: 50px 54px;
    border-radius: 30px;
    background: var(--gray-100, #F4F5F6);
    font-size: 16px;
    line-height: 150%;
    /* 24px */
}

.renewal_rule-text u {
    color: var(--primary-blue-500m, #2E3192);
    font-weight: 600;
    text-decoration: underline;
}

.renewal_rule-text p {
    color: var(--primary-blue-500m, #2E3192);
}

.map-container {
    background: #fff;
}

.map-container h3 {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-blue-500m, #2E3192);
}

.map-inner-conatiner {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    justify-content: space-between;
}

.map-info-box {
    width: 50%;
    display: flex;
    gap: 24px;
    flex-direction: column;
}

#korea-map {
    width: 100%;
    height: 500px;
    background: #f8f9fa;
    border-radius: 8px;
    display: block;
    position: relative;
    overflow: hidden;
}

.korea-map-svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    cursor: pointer;
    border: none;
    outline: none;
    background: transparent;
}

/* 반응형 처리 */
@media (max-width: 768px) {
    .map-inner-conatiner {
        flex-direction: column;
        gap: 20px;
    }

    .map-info-box,
    #korea-map {
        width: 100%;
    }

    #korea-map {
        height: 400px;
    }
}

.map-info {
    margin-top: 15px;
    padding: 15px;
    background: var(--gray-50, #F9FAFB);
    border-radius: 8px;
    font-size: 14px;
    color: var(--gray-700, #374151);
    text-align: center;
}

/* SVG 요소에 대한 추가 스타일링 */
#korea-map svg {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.chart-section {
    margin-bottom: 40px;
}

.chart-wrapper {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.chart-wrapper .data-list-group {
    flex: 0 0 calc(50% - 15px);
}

.chart-wrapper .chart-box {
    flex: 0 0 calc(50% - 15px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-wrapper .chart-box>div {
    width: 100%;
    max-width: 490px;
}

/* 기존 float 스타일 제거 */
.chart-wrapper .w40,
.chart-wrapper .w60,
.chart-wrapper .floatl {
    float: none;
    width: auto;
    padding: 0;
}

@media (max-width: 768px) {
    .chart-wrapper {
        flex-direction: column;
        gap: 20px;
    }

    .chart-wrapper .data-list-group,
    .chart-wrapper .chart-box {
        flex: none;
        width: 100%;
    }
}

@media (max-width: 768px) {

    .data-list.specialist-point-table th,
    .data-list.specialist-point-table td {
        font-size: 13px;
        line-height: 150%;
    }

    .data-list.specialist-point-table tbody th.sub-th {
        padding: 8px 20px;
    }

    .data-list.specialist-point-table tbody td {
        padding: 8px 20px 8px 30px;
    }
}


.localdoctor-content {
    display: flex;
    gap: 30px;
}

.localdoctor-content .map-container {
    width: 32%;
}

.localdoctor-content .data-list-wrap {
    width: 68%;
}

@media (max-width: 1200px) {
    .localdoctor-content {
        display: flex;
        gap: 30px;
        flex-direction: column;
    }

    .localdoctor-content .map-container {
        width: 100%;
    }

    .localdoctor-content .data-list-wrap {
        width: 100%;
    }
}