/* /resource/www/css/about/introduction.css */

.about-page-container {
    width: 100%;
    font-family: 'Pretendard', sans-serif;
    color: #333;
}

.about-container {
    width: 1440px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.desktop-only {
    display: block;
}
.mobile-only {
    display: none;
}

/* Responsive Common */
@media (max-width: 1440px) {
    .about-container {
        width: 100%;
    }
}

@media (max-width: 1280px) {
    .about-container {
        padding-left: 0px;
        padding-right: 0px;
    }
    .desktop-only {
        display: none !important;
    }
    .mobile-only {
        display: block !important;
    }
}

/* Section 1: Top Banner */
.about-section-1-wrapper {
    width: 100%;
    /* height is dynamically calculated via JS to allow scrolling */
}

.about-section-1 {
    width: 100%;
    height: 100vh; /* 화면을 채울 수 있게 높이 유지 */
    /* background-image: url('../../images/about/about-intro-bg1.png'); */
    background-size: cover;
    background-position: center;
    color: #FCFCFC;
    text-align: center;
    position: sticky;
    top: 0;
    overflow: hidden;
    /* padding is moved to the inner content */
}
.s1-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.about-section-1::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: 1;
}
.s1-content {
    position: relative;
    z-index: 2;
    padding-top: 15vh; /* header spacing */
    will-change: transform;
}

@media (max-width: 1280px) {
    .s1-content {
        padding-top: 100px;
        padding-left: 16px;
        padding-right: 16px;
    }
}

.s1-label {
	font-size: 20px;
	line-height: 30px;
    color: #fcfcfc;
    font-weight: 700;
    margin-bottom: 8px;
}

@media (max-width: 1280px) {
    .s1-label {
        font-size: 14px;
        line-height: 22px;
    }
}

.s1-title {
    font-family: 'Ria Sans', sans-serif;
    font-size: 48px;
	letter-spacing: -0.04em;
	line-height: 72px;
    font-weight: 700;
    margin-bottom: 40px;
    margin-top: 0;
}

@media (max-width: 1280px) {
    .s1-title {
	    font-size: 20px;
		letter-spacing: -0.04em;
		line-height: 30px;
        margin-bottom: 16px;
    }
}

.s1-desc {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 0;
    color: #E0E0E0;
    margin-top: 0;
}

@media (max-width: 1280px) {
    .s1-desc {
        font-size: 14px;
        margin-bottom: 40px;
        word-break: keep-all;
    }
    .s1-desc br {
        display: none; /* 모바일에서는 수동 줄바꿈 해제 */
    }
}

/* Section 1 Features (4 columns) */
.s1-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 96px;
}

@media (max-width: 1280px) {
    .s1-features {
        display: flex;
        flex-direction: column;
        gap: 0; /* 항목 간 간격은 구분선과 조화롭게 패딩으로 처리 */
        margin-top: 40px;
    }
}

.feature-col {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 10px;
}

@media (max-width: 1280px) {
    .feature-col {
        padding: 32px 0;
    }
    /* 마지막 항목을 제외하고 하단 구분선 추가 */
    .feature-col:not(:last-child)::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background-color: rgba(252, 252, 252, 0.2); /* 시안의 구분선 색상 반영 */
    }
}

.feature-col:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    right: -12px;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 1280px) {
    .feature-col:not(:last-child)::after {
        display: none; /* 모바일에서는 세로 구분선 제거 */
    }
}

.feature-col img,
.feature-col svg {
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
}

@media (max-width: 1280px) {
    .feature-col img,
    .feature-col svg {
        width: 40px;
        height: 40px;
        margin-bottom: 12px;
    }
}

.feature-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}

@media (max-width: 1280px) {
    .feature-title {
        font-size: 18px;
        margin-bottom: 8px;
    }
}

.feature-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #DDDDDD;
}

@media (max-width: 1280px) {
    .feature-desc {
        font-size: 13px;
    }
}

/* Section 1 Boxes (full.png extra content) */
.s1-boxes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 96px;
    text-align: left;
    align-items: end; /* Align columns to the bottom as per Figma */
}

/* Slider Wrapper logic: contents on desktop to maintain grid */
.goal-slider-wrapper {
    display: contents;
}

@media (max-width: 1280px) {
    /* Mobile Swiper Styles */
    .s1-mobile-swiper {
        width: 100%;
        margin-top: 40px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .mobile-slide-inner {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .mobile-pill-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgba(252, 252, 252, 0.5);
        backdrop-filter: blur(50px);
        -webkit-backdrop-filter: blur(50px);
        border-radius: 999px;
        padding: 8px;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 8px;
    }

    .pill-arrow {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background-color: rgba(34, 34, 34, 0.5);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
    }

    .pill-arrow img {
        width: 20px;
        height: 20px;
    }

    .pill-text {
        font-size: 14px;
        font-weight: 500;
        color: #fcfcfc;
        flex: 1;
        text-align: center;
    }

    .mobile-phases-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .m-phase-box {
        background-color: rgba(0, 117, 74, 0.25);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding: 16px;
        text-align: left;
    }
    
    .s1-mobile-swiper .mobile-slide-inner .m-phase-box.top-left {
    	border-radius: 16px 0 0 0 !important;
    }
    .s1-mobile-swiper .mobile-slide-inner .m-phase-box.top-right {
    	border-radius: 0 16px 0 0 !important;
    }
    .s1-mobile-swiper .mobile-slide-inner .box-glass.bot-left {
    	border-radius: 0 0 0 16px !important;
    }
    .s1-mobile-swiper .mobile-slide-inner .box-glass.bot-right {
    	border-radius: 0 0 16px 0 !important;
    }
    .s1-mobile-swiper .mobile-slide-inner .box-glass.bot-left-right {
    	border-radius: 0 0 16px 16px !important;
    }

    .m-phase-box .label {
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 8px;
        color: #FCFCFC;
    }

    .m-phase-box .val {
        font-size: 12px;
        color: #EDEDED;
        display: flex;
        align-items: baseline;
        gap: 8px;
        font-weight: 500;
        word-break: keep-all;
    }

    .m-phase-box .val strong {
        font-size: 20px;
        font-weight: 700;
        color: #FFFFFF;
    }

    .mobile-only .s1-box.box-glass {
        padding: 16px 10px;
        border-radius: 16px;
        height: auto !important;
        min-height: 180px;
    }

    .mobile-only .s1-box .box-list {
        gap: 12px;
        text-align: center;
        justify-content: center;
        height: auto;
    }

    .mobile-only .s1-box .box-list li {
        font-size: 13px;
        word-break: keep-all;
        line-height: 20px;
    }

    /* Slide 2 side-by-side details on mobile */
    .mobile-only .split-stack {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .mobile-only .split-top,
    .mobile-only .split-bottom {
        border-radius: 16px !important;
        height: auto;
        min-height: 100px;
        padding: 16px 10px !important;
    }
}

.box-col {
    display: flex;
    flex-direction: column;
    border-radius: 24px;
}
.box-title {
    padding: 8px 16px;
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
    text-align: center;
    margin-bottom: 24px;
    color: #FFFFFF;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 1280px) {
    .box-title {
        margin-bottom: 12px;
        font-size: 15px;
    }
    .box-col:first-child .box-title {
        display: none; /* 1단계/2단계 박스 위의 빈 타이틀 숨김 */
    }
}
.s1-box-stack {
    display: flex;
    flex-direction: column;
    gap: 8px; /* small gap between stack items */
    flex: 1;
}
.s1-box {
    border-radius: 12px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}
.s1-box.box-green {
    background-color: rgba(0, 117, 74, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-align: left;
    padding: 24px 40px;
    gap: 8px;
}
.box-green:first-child {
    border-radius: 24px 24px 0 0 !important;
}
.box-green:last-child {
    border-radius: 0 0 24px 24px !important;
}
.box-green .step-label {
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    color: #FCFCFC;
}
.box-green .step-value {
    font-size: 16px;
    color: #EDEDED;
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-weight: 500;
}
.box-green .step-value strong {
    font-size: 30px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 46px;
}
.s1-box.box-glass {
    background-color: rgba(252, 252, 252, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15); /* Subtle glass border */
    border-radius: 24px;
    height: 266px;
    box-sizing: border-box;
}
.s1-box .box-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: center;
    height: 216px;
    justify-content: center;
}
.s1-box .box-list li {
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    color: #FCFCFC;
}
.s1-box.text-center {
    text-align: center;
}
.text-center .step-label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}
.text-center .step-desc {
    color: #FCFCFC;
    font-size: 16px;
    font-weight: 500;
}

/* 동의기반 연구자원 축적 특정 스타일 (Figma 반영) */
.split-stack {
    display: flex;
    flex-direction: column;
    gap: 8px !important;
    flex: 1;
}

/* Desktop: split-stack 높이를 s1-box.box-glass와 동일하게 고정 */
.goal-item[data-goal-title="동의기반 연구자원 축적"] .split-stack {
    flex: none;
    height: 266px;
}

.goal-item[data-goal-title="동의기반 연구자원 축적"] .split-top {
    border-radius: 24px 24px 0 0 !important;
    background-color: rgba(252, 252, 252, 0.25) !important;
    border: none !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    min-height: 128px;
}

.goal-item[data-goal-title="동의기반 연구자원 축적"] .split-bottom {
    border-radius: 0 0 24px 24px !important;
    background-color: rgba(252, 252, 252, 0.25) !important;
    border: none !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    min-height: 128px;
}

.goal-item[data-goal-title="동의기반 연구자원 축적"] .step-label {
    font-size: 20px !important;
    line-height: 30px !important;
    font-weight: 500 !important;
    margin-bottom: 0px !important;
    color: #FCFCFC !important;
}

.goal-item[data-goal-title="동의기반 연구자원 축적"] .step-desc {
    font-size: 20px !important;
    line-height: 30px !important;
    font-weight: 500 !important;
}

@media (max-width: 1280px) {
    .goal-item[data-goal-title="동의기반 연구자원 축적"] .box-title {
        font-size: 15px;
        line-height: 22px;
        padding: 6px 12px;
        margin-bottom: 12px;
    }
    
    .goal-item[data-goal-title="동의기반 연구자원 축적"] .split-stack {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    
    .goal-item[data-goal-title="동의기반 연구자원 축적"] .split-top,
    .goal-item[data-goal-title="동의기반 연구자원 축적"] .split-bottom {
        border-radius: 12px !important;
        height: auto;
        min-height: 80px;
        padding: 16px 10px;
    }
    
    .goal-item[data-goal-title="동의기반 연구자원 축적"] .step-label,
    .goal-item[data-goal-title="동의기반 연구자원 축적"] .step-desc {
        font-size: 14px !important;
        line-height: 22px !important;
    }
}


/* Phase Banner */
.phase-banner {
    display: flex;
    flex-direction: column;
    width: 280px;
    background-color: #DDEBE3;
    padding: 30px;
    position: relative;
    margin-top: -60px;
    z-index: 2;
    margin-left: max(0px, calc((100% - 1440px) / 2));
    border-radius: 0 16px 16px 0;
}
.phase-item {
    font-size: 18px;
    font-weight: 600;
    color: #2F694F;
    padding: 12px 0;
    border-bottom: 1px solid rgba(47, 105, 79, 0.2);
}
.phase-item:last-child {
    border-bottom: none;
}
.phase-item span {
    font-weight: 800;
    margin-right: 12px;
}

/* Section 3: Goals */
.about-section-3 {
    text-align: center;
    padding-top: 100px;
    padding-bottom: 100px;
}

@media (max-width: 1280px) {
    .about-section-3 {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

.s3-header {
    margin-bottom: 60px;
}

@media (max-width: 1280px) {
    .s3-header {
        margin-bottom: 40px;
        padding-left: 16px;
        padding-right: 16px;
    }
}

.s3-label {
	font-size: 20px !important;
	line-height: 30px !important;
	font-family: Pretendard !important;
	color: #00754a !important;
	font-weight: 700 !important;
    margin-bottom: 8px;
}

@media (max-width: 1280px) {
	.s3-label {
		font-size: 14px !important;
		line-height: 22px !important;
	}
}


.s3-title {
    font-size: 48px;
	letter-spacing: -0.04em;
	line-height: 72px;
	font-family: 'Ria Sans';
	color: #222;
    font-weight: 700;
    margin-bottom: 24px;
}

@media (max-width: 1280px) {
    .s3-title {
        font-size: 20px;
        letter-spacing: -0.04em;
        line-height: 30px;
        word-break: keep-all;
        margin-bottom: 16px;
    }
}

.s3-desc {
    font-size: 24px;
	line-height: 36px;
	font-weight: 500;
	font-family: Pretendard;
	color: #222;
}

@media (max-width: 1280px) {
    .s3-desc {
        font-size: 12px;
        line-height: 20px;
        word-break: keep-all;
    }
    .s3-desc br {
        display: none;
    }
}

/* Banner Overlay */
.s3-banner {
    position: relative;
    width: 100%;
    margin: 60px 0;
    border-radius: 24px;
    overflow: hidden;
    background-image: url('../../images/about/about-intro-bg2.png');
    background-size: cover;
    background-position: center;
}

@media (max-width: 1280px) {
    .s3-banner {
        margin: 40px 0;
        border-radius: 0px;
    }
}

.s3-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(30,50,40,0.7);
}
.s3-banner-content {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    padding: 60px 40px;
    color: #FFF;
}

@media (max-width: 1280px) {
    .s3-banner-content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 16px;
        padding: 40px 20px;
    }
}

.s3-banner-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    flex: 1;
    text-align: center;
}
.s3-banner-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    height: 60px;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 1280px) {
    .s3-banner-item:not(:last-child)::after {
        display: none;
    }
}

.s3-banner-item img,
.s3-banner-item svg {
    width: 48px;
    height: 48px;
}

@media (max-width: 1280px) {
    .s3-banner-item img,
    .s3-banner-item svg {
        width: 40px;
        height: 40px;
    }
}

.s3-banner-item p {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
}

@media (max-width: 1280px) {
    .s3-banner-item p {
        font-size: 13px;
    }
}

/* Stats */
.s3-stats {
    display: flex;
    justify-content: center;
    gap: 60px;
    text-align: left;
    margin-top: 40px;
    max-width: 1200px; /* 사업 목표 설명 문구와 비슷한 폭으로 제한 */
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1280px) {
    .s3-stats {
        gap: 40px;
    }
}

@media (max-width: 1280px) {
    .s3-stats {
        flex-direction: column;
        gap: 40px;
        margin-top: 20px;
        padding-left: 16px;
        padding-right: 16px;
    }
}

.stat-col {
    flex: 1;
    max-width: 440px;
}

@media (max-width: 1280px) {
    .stat-col {
        max-width: 100%;
    }
}

.stat-col-right {
    border-left: 1px solid #E0E0E0;
    padding-left: 60px;
}

@media (max-width: 1280px) {
    .stat-col-right {
        border-left: none;
        padding-left: 0;
        padding-top: 40px;
        border-top: 1px solid #E0E0E0;
    }
}
.stat-stage {
    margin-bottom: 12px;
}
.st-num {
    font-size: 24px;
    font-weight: 800;
    color: #222;
}
.st-period {
    font-size: 14px;
    color: #999;
    font-weight: 500;
    margin-left: 8px;
}
.stat-green {
    color: #2E7D32;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid #F0F0F0;
}
.stat-table {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    color: #444;
}
.stat-name {
    font-weight: 600;
}
.stat-val {
    font-weight: 500;
}
.stat-val strong {
    font-size: 16px;
    font-weight: 800;
    color: #111;
    margin-right: 4px;
}

/* Process Flow */
.process-section {
    padding: 80px 0;
    text-align: center;
}

@media (max-width: 1280px) {
    .process-section {
        padding: 60px 16px;
    }
    .process-section .about-container .s3-img-cont {
        overflow-x: auto; /* 가로 스크롤 허용 */
        -webkit-overflow-scrolling: touch;
    }
}

.process-img {
    max-width: 100%;
    margin-top: 40px;
}

@media (max-width: 1280px) {
    .process-img {
        margin-top: 24px;
        max-width: none; /* 너비 제한 해제 */
        width: 700px; /* 모바일에서 글자가 보일 정도의 최소 너비 확보 */
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Outcomes / Values */
.outcomes-section {
    padding-top: 100px;
    padding-bottom: 100px;
    text-align: center;
}

@media (max-width: 1280px) {
    .outcomes-section {
        padding: 60px 16px;
    }
}

.outcome-intro {
    margin-bottom: 80px;
}

@media (max-width: 1280px) {
    .outcome-intro {
        margin-bottom: 40px;
    }
}

.outcome-icon img {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
}

.outcome-label {
    font-size: 20px !important;
	line-height: 30px !important;
	font-family: Pretendard !important;
	color: #00754a !important;
	font-weight: 700 !important;
    margin-bottom: 8px;
}

@media (max-width: 1280px) {
    .outcome-label {
        font-size: 14px !important;
		line-height: 22px !important;
    }
}

.outcome-intro h3 {
    font-size: 48px;
	letter-spacing: -0.04em;
	line-height: 72px;
	font-family: 'Ria Sans';
	color: #222;
    margin: 0 0 16px 0;
}

@media (max-width: 1280px) {
    .outcome-intro h3 {
        font-size: 20px;
        letter-spacing: -0.04em;
        line-height: 30px;
        margin-bottom: 12px;
    }
}

.outcome-intro p {
    font-size: 24px;
	line-height: 36px;
	font-weight: 500;
	font-family: Pretendard;
	color: #222;
    margin: 0;
}

@media (max-width: 1280px) {
    .outcome-intro p {
        font-size: 12px;
        line-height: 20px;
        word-break: keep-all;
    }
}

/* Vision Accordions (R&D 인프라 제공) */
.about-vision-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

@media (max-width: 1280px) {
    .about-vision-body {
        gap: 16px;
    }
}

.about-vision-card {
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    background: rgba(43, 85, 45, 0.8) no-repeat center center;
    background-size: cover;
    background-color: rgba(30, 40, 45, 0.7) !important;
    background-blend-mode: multiply;
    cursor: pointer;
    text-align: left;
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.vision-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.about-vision-card.is-active .vision-bg-video {
    opacity: 1;
}

.about-vision-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.about-vision-card.is-active::before {
    opacity: 1;
}

@media (max-width: 1280px) {
    .about-vision-card {
        padding: 24px 16px;
        gap: 16px;
        border-radius: 16px;
    }
}

.about-vision-card.bg-research {
    background-image: url('../../images/main/en/research-bg.png');
}
.about-vision-card.bg-medical {
    background-image: url('../../images/main/en/medical-bg.png');
}
.about-vision-card.bg-industrial {
    background-image: url('../../images/main/en/industrial-bg.png');
}
.about-vision-card.bg-policy {
    background-image: url('../../images/main/en/policy-bg.png');
}

.about-vision-card-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    z-index: 1;
}
.about-vision-card-header h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #FCFCFC;
}

@media (max-width: 1280px) {
    .about-vision-card-header h3 {
        font-size: 20px;
    }
}

.about-vision-compare-section {
    display: none;
    flex-direction: column;
    gap: 16px;
    position: relative;
    z-index: 1;
}
.about-vision-card.is-active .about-vision-compare-section {
    display: flex;
}
.about-vision-card.is-active {
    gap: 40px;
}

@media (max-width: 1280px) {
    .about-vision-card.is-active {
        gap: 24px;
    }
}

.about-vision-compare-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 20px 24px;
}

@media (max-width: 1280px) {
    .about-vision-compare-card {
        padding: 16px;
        gap: 8px;
    }
}

.about-vision-compare-card ul {
    margin: 0;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.about-vision-compare-card li {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #FCFCFC;
    position: relative;
    list-style: none;
}

@media (max-width: 1280px) {
    .about-vision-compare-card li {
        font-size: 14px;
    }
}

.about-vision-compare-card li::before {
    content: '-';
    position: absolute;
    left: -14px;
}
.tag-as-is, .tag-to-be {
    display: inline-block;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 99px;
    width: fit-content;
}

@media (max-width: 1280px) {
    .tag-as-is, .tag-to-be {
        padding: 4px 10px;
        font-size: 12px;
    }
}

.tag-as-is {
    background-color: #EDEDED;
    color: #222;
}
.tag-to-be {
    background-color: #008855;
    color: #FCFCFC;
}

/* Standardization */
.standard-section {
    padding: 80px 0;
    text-align: center;
}

@media (max-width: 1280px) {
    .standard-section {
        padding: 60px 16px;
    }
}

.standard-section h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
}

@media (max-width: 1280px) {
    .standard-section h3 {
        font-size: 20px;
        margin-bottom: 12px;
    }
}

.standard-section p {
    color: #222;
    font-size: 24px;
	line-height: 36px;
	font-weight: 500;
	font-family: Pretendard;
}

@media (max-width: 1280px) {
    .standard-section p {
        font-size: 12px;
		line-height: 20px;
        word-break: keep-all;
    }
    .standard-section br {
        display: none;
    }
}

/* 769~893px: s1-boxes 세 컬럼 내부 텍스트 줄바꿈 방지 */
@media (min-width: 769px) and (max-width: 893px) {
    .goal-item .box-list li {
        font-size: 15px;
        line-height: 22px;
    }
    .goal-item[data-goal-title="동의기반 연구자원 축적"] .step-label {
        font-size: 15px !important;
        line-height: 22px !important;
    }
    .goal-item[data-goal-title="동의기반 연구자원 축적"] .step-desc {
        font-size: 15px !important;
        line-height: 22px !important;
    }
}