.pro-container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
}
.pro-header {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}
.pro-header img {
    max-width: 114px;
    margin-right: 20px;
}
.pro-header-text p {
    margin: 0;
}
.pro-header-text .title {
    font-size: 28px;
    font-weight: 500;
}
.filter-section {
    margin-bottom: 30px;
}
.filter-row {
    display: flex;
    border-bottom: 1px solid #ddd;
}
.filter-label {
    width: 228px;
    background: #F4F7F9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    font-weight: normal;
    font-size: 16px;
}
.filter-content {
    flex: 1;
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    font-size: 16px;
}
.checkbox-item {
    display: flex;
    align-items: center;
    margin-right: 15px;
    font-weight: normal;
}
.checkbox-item input {
    margin-right: 5px;
}
.tab-container {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.tab-btn {
    flex: 1;
    padding: 15px;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s;
}
.tab-btn.active {
    background: #136EC0;
    color: #fff;
}
.tab-btn:not(.active) {
    background: #e0e0e0;
    color: #666;
}
.chart-section {
    margin-top: 30px;
}
.chart-title {
    font-size: 24px;
    font-weight: normal;
    margin-bottom: 15px;
}
.chart-container {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
}
.chart-box {
    height: 400px;
}
.total-count-box {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 40px;
    text-align: center;
    font-size: 80px;
    font-weight: 500;
    margin-bottom: 30px;

    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-row {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    align-items: stretch;
}
.flex-col-3 {
    flex: 0 0 30%;
    display: flex;
    flex-direction: column;
}
.flex-col-7 {
    flex: 1;
}
.data-list {
    margin-top: 20px;
}
.data-item {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
}
.data-item-title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
    color: #136EC0;
}
.data-item-info {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 14px;
    color: #666;
}
.data-item-info span {
    background: #f5f5f5;
    padding: 5px 10px;
    border-radius: 4px;
}
.more-btn {
    display: block;
    width: 100%;
    max-width: 340px;
    margin: 20px auto;
    padding: 15px;
    border: 1px solid #136EC0;
    background: transparent;
    color: #136EC0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
}
.loading {
    text-align: center;
    padding: 100px;
}
.loading .spinner {
    width: 60px;
    height: 60px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #136EC0;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.pie-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 10px;
    row-gap: 100px;
    margin-top: 60px;
}
.pie-item {
    text-align: center;
}
.pie-item .label {
    margin-top: 10px;
    padding: 5px 15px;
    border: 1px solid #333;
    border-radius: 20px;
    display: inline-block;
    font-weight: 500;
}
.select-all-btn {
    padding: 5px 15px;
    background: #136EC0;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 10px;
}
/* =========================
   RAW DATA - ProRawDataItem 스타일
   ========================= */

.raw-list {
    margin-top: 20px;
}

/* card: border-t md:border md:rounded-lg mt-r-md-7 pt-r-6 pt-r-md-10 px-r-md-12 pb-5 md:pb-r-13 */
.raw-card {
    border-top: 1px solid #ddd;
    padding: 24px 0 20px; /* pt-r-6=24px, pb-5=20px */
}

@media (min-width: 768px) {
    .raw-card {
        border: 1px solid #ddd;
        border-radius: 8px;
        margin-top: 28px;       /* mt-r-md-7=28px */
        padding: 40px 48px 52px; /* pt-r-md-10=40px, px-r-md-12=48px, pb-r-13=52px */
    }
}

/* top: md:flex justify-start items-stretch */
.raw-top {
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .raw-top {
        flex-direction: row;
        align-items: stretch;
    }
}

/* badge: w-fit rounded-full md:rounded-none px-4 py-1 md:w-full max-w-[187px] font-size-12-24 */
.raw-badge {
    width: fit-content;
    color: #fff;
    font-size: 12px;
    text-align: center;
    padding: 4px 16px;      /* py-1=4px, px-4=16px */
    border-radius: 999px;
    font-weight: 500;
}

@media (min-width: 640px) {
    .raw-badge { font-size: 16px; }
}

@media (min-width: 768px) {
    .raw-badge {
        width: 100%;
        max-width: 187px;
        border-radius: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 12px;
        font-size: 20px;
    }
}

@media (min-width: 1024px) {
    .raw-badge { font-size: 24px; }
}

/* badge colors */
.badge-paper { background: #49DA84; }
.badge-patent-app { background: #328DE0; }
.badge-patent-reg { background: #F0C15D; }
.badge-self { background: #F37172; }
.badge-etc { background: #8CC5F2; }

/* body: flex-1 ml-r-md-8 mt-2 md:mt-0 */
.raw-body {
    flex: 1;
    margin-top: 8px;        /* mt-2=8px */
}

@media (min-width: 768px) {
    .raw-body {
        margin-top: 0;
        margin-left: 32px;  /* ml-r-md-8=32px */
    }
}

/* title: font-size-16-24 font-normal */
.raw-title {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 400;
    color: #111;
}

@media (min-width: 640px) {
    .raw-title { font-size: 18.67px; }
}

@media (min-width: 768px) {
    .raw-title { font-size: 21.33px; }
}

@media (min-width: 1024px) {
    .raw-title { font-size: 24px; }
}

/* meta-row wrapper: mt-r-5=20px */
.raw-meta-row {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: #111;
}

@media (min-width: 640px) {
    .raw-meta-row { font-size: 14px; }
}

@media (min-width: 768px) {
    .raw-meta-row {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 0;
        font-size: 16px;
    }
}

@media (min-width: 1024px) {
    .raw-meta-row { font-size: 18px; }
}

.raw-meta {
    display: inline-flex;
    align-items: center;
}

/* 연구유형 gap: mx-r-md-11=44px */
.raw-meta-gap {
    margin-left: 0;
}

@media (min-width: 768px) {
    .raw-meta-gap {
        margin-left: 44px;
    }
}

.raw-meta-label {
    display: inline-block;
    min-width: 60px;
    color: #111;
}

@media (min-width: 768px) {
    .raw-meta-label {
        min-width: auto;
        font-weight: normal;
        font-size: 0.85em;
    }
}

/* sep: mx-r-2=8px */
.raw-meta-sep {
    display: inline-block;
    margin: 0 8px;
    color: #136EC0;
    font-weight: 700;
}

.raw-meta-value {
    color: #111;
}

/* participant: font-size-12-18, no extra margin-top in reference */
.raw-participant {
    font-size: 12px;
    line-height: 1.5;
    color: #111;
}

@media (min-width: 640px) {
    .raw-participant { font-size: 14px; }
}

@media (min-width: 768px) {
    .raw-participant { font-size: 16px; }
}

@media (min-width: 1024px) {
    .raw-participant { font-size: 18px; }
}

/* bottom: mt-r-5=20px, md: mt-r-md-8=32px pt-r-md-8=32px border-t */
.raw-bottom {
    margin-top: 20px;
}

@media (min-width: 768px) {
    .raw-bottom {
        display: flex;
        align-items: stretch;
        border-top: 1px solid #ddd;
        padding-top: 32px;
        margin-top: 32px;
    }
}

/* table: font-size-12-18, py-r-4=16px */
.raw-table {
    width: 100%;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-collapse: collapse;
    flex: 1;
}

.raw-table td {
    padding: 16px 10px;
    text-align: center;
    vertical-align: middle;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.5;
    color: #111;
    word-break: keep-all;
}

@media (min-width: 640px) {
    .raw-table td { font-size: 14px; }
}

@media (min-width: 768px) {
    .raw-table td { font-size: 16px; }
}

@media (min-width: 1024px) {
    .raw-table td { font-size: 18px; }
}

.raw-th {
    background: #F4F7F9;
    font-weight: 400;
    width: 50px;
}

@media (min-width: 640px) {
    .raw-th { width: 16.66%; }
}

@media (min-width: 768px) {
    .raw-th { width: 187px; }
}

.raw-td {
    background: #fff;
}

.raw-th-top,
.raw-td-top {
    border-top: 1px solid #ddd;
}

/* link btn: max-w-[124px] md:max-w-[170px] font-size-14-24 mx-auto md:ml-[50px] mt-r-5=20px mt-r-md-0 py-r-5=20px */
.raw-link-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 124px;
    border-radius: 8px;
    padding: 20px 12px;     /* py-r-5=20px */
    font-size: 14px;
    font-weight: normal;
    line-height: 24px;
    text-decoration: none;
    margin: 20px auto 0;    /* mt-r-5=20px, mx-auto */
    background: #136EC0;
    color: #fff;
}

@media (min-width: 640px) {
    .raw-link-btn { font-size: 17.33px; }
}

@media (min-width: 768px) {
    .raw-link-btn {
        max-width: 170px;
        font-size: 20.67px;
        margin: 0;
        margin-left: 50px;  /* md:ml-[50px] */
        height: auto;
    }
}

@media (min-width: 1024px) {
    .raw-link-btn { font-size: 24px; }
}

.raw-link-btn.disabled {
    background: #cbd5e1;
    color: #64748b;
    pointer-events: none;
}

@media (max-width: 767px) {
    .pro-header img {
        max-width: 50px;
        margin-right: 10px;
    }
    .pro-header-text .title {
        font-size: 16px;
        font-weight: 500;
    }
    .pro-container h2 {
        font-size: 24px !important;
    }
    .tab-btn {
        font-size: 16px;
        font-weight: normal;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .filter-row {
        flex-direction: column !important;
    }
    .filter-label {
        width: 100% !important;
        justify-content: center;
        padding: 10px 15px;
    }
    .filter-content {
        padding: 15px !important;
    }
    .flex-row {
        flex-direction: column !important;
        margin-top: 40px !important;
    }
    .flex-col-3 {
        flex: none !important;
        width: 100%;
    }
    .chart-title {
        font-size: 20px;
    }
    .chart-section {
        margin-top: 40px;
    }
    .chart-container {
        margin: 0;
        padding: 0;
    }
    #materialAllChart {
        height: 200px !important;
    }
    #materialAllChart + div {
        margin-top: 0;
    }
    .pie-item.label {
        display: inline-block;
        font-size: 18px;
        font-weight: normal;
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }
    .total-count-box {
        margin-bottom: 0;
    }
    .pie-grid {
        grid-template-columns: 1fr !important;
        column-gap: 10px;
        row-gap: 10px;
    }
    .chart-container + .pie-grid {
        margin-top: 20px;
    }
    .pie-item > div {
        height: 200px !important;
    }
    .pie-item .label {
        margin-top: 4px;
        margin-bottom: 40px;
        font-size: 14px;
        font-weight: normal;
    }
    .raw-meta {
        display: flex;
        align-items: flex-start;
        width: 100%;
    }
    .raw-meta-label {
        min-width: 5em !important;
        flex-shrink: 0;
    }
    .raw-meta-row {
        gap: 4px;
        font-size: 14px;
        font-weight: normal;
    }
    .raw-participant {
        display: flex;
        align-items: flex-start;
        margin-top: 4px;
        font-size: 14px;
        font-weight: normal;
    }
    .raw-link-btn {
        padding: 10px 12px !important;
        max-width: 100px !important;
    }

    /* 테이블 모바일 레이아웃: tbody 단일 grid로 통합 → 제목칸 너비 자동 동기화 */
    .raw-table { display: block; }
    .raw-table tbody {
        display: grid;
        grid-template-columns: auto 1fr auto 1fr;
    }
    .raw-table tbody tr { display: contents; }

    /* 1행: 용암해수 활용 전체 폭 */
    .raw-table tr:nth-child(1) td:nth-child(1) { grid-column: 1; grid-row: 1; border-bottom: 1px solid #ddd; }
    .raw-table tr:nth-child(1) td:nth-child(2) { grid-column: 2 / 5; grid-row: 1; border-bottom: 1px solid #ddd; }

    /* 2행: 분류 / 활용분야 */
    .raw-table tr:nth-child(1) td:nth-child(3) { grid-column: 1; grid-row: 2; }
    .raw-table tr:nth-child(1) td:nth-child(4) { grid-column: 2; grid-row: 2; }
    .raw-table tr:nth-child(1) td:nth-child(5) { grid-column: 3; grid-row: 2; }
    .raw-table tr:nth-child(1) td:nth-child(6) { grid-column: 4; grid-row: 2; }

    /* 3행: 기능성 전체 폭 */
    .raw-table tr:nth-child(2) td:nth-child(1) { grid-column: 1; grid-row: 3; }
    .raw-table tr:nth-child(2) td:nth-child(2) { grid-column: 2 / 5; grid-row: 3; }

    /* 제목칸: 너비 자동(grid 열 공유), 배경 꽉 채우고 텍스트 중앙 */
    .raw-table .raw-th {
        width: auto !important;
        white-space: nowrap;
        align-self: stretch;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .pro-container {
        padding: 10px;
    }
}