@charset "UTF-8";


.vision {
    position:relative;
    width:100%;
}
.vision__top {text-align:center;}
.vision__subtitle {
    display:inline-flex;    
    align-items:center;
    width: 25.22rem;
    height: 4.5rem;
    padding: 1.2rem 3.7853rem 1.2rem 3.1088rem;
    gap: 1.0359rem;
    border-radius: 5rem;
    background: linear-gradient(90deg, #54C2F0 0%, #69BEEB 7.14%, #79BBE6 14.29%, #88B7E1 21.43%, #94B3DC 28.57%, #A0AFD7 35.71%, #AAABD2 42.86%, #B4A6CD 50%, #BDA2C8 57.14%, #C69DC3 64.29%, #CE98BE 71.43%, #D693B9 78.57%, #DE8DB4 85.71%, #E587AF 92.86%, #EC81AA 100%);
    color: #FFF;
    text-align: center;
    font-size: 1.5962rem;
    font-weight: 700;
    margin-bottom:1.6rem;
}
.vision__title {
    margin-top:1.4rem;
    color:var(--text-basic);
    text-align: center;
    font-size: 3.2rem;
    font-weight: 700;
}
@media screen and (max-width:640px) {
    .vision__title {font-size:2.8rem;}
}
.vision__list {
    margin-top:2.4rem;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap: 2rem;
}
@media screen and (max-width:768px) {
    .vision__list {
        grid-template-columns:1fr;
    }
}
.vision__card {
    position:relative;
    background-color:#F7F8F9 ;
    border-radius: 1rem;
    overflow:hidden;
}
.vision__card__head {
    display: flex;
    padding: 2rem;
    align-items: flex-start;
    gap: 2.1rem;
    align-self: stretch;
    border-radius: 1rem 1rem 0 0;
    background: var(--color-primary);
    color: var(--white, #FFF);
    font-size: 1.9rem;
    font-style: normal;
    font-weight: 700;
}
.vision__card__body {
    padding: 2rem;
    border-radius: 0 0 1rem 1rem;    
}
.vision__card__desc {
    color: var(--text-basic, #2F3640);
    font-size: 1.6rem;
}
.vision__card__desc + .vision__card__desc {margin-top:0.8rem;}

.business-direction {
    position:relative;
    margin-top:7.2rem;
}
.business-direction__content {
    margin-top:2.4rem;
    color: var(--text-basic, #2F3640);
    font-size: 1.6rem;
    font-weight: 400;
    text-align:center;
}
.business-direction__content img {
    max-width:100%;
}
.space-status {
    position:relative;
    margin-top:7.2rem;
}
.space-status__content {
    margin-top:2.4rem;
    color: var(--text-basic, #2F3640);
    font-size: 1.6rem;
    font-weight: 400;
}
.space-status__item {
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    gap:4rem;
}
@media screen and (max-width:820px) {
    .space-status__item {
        flex-direction: column;
        gap: 2.4rem;
    }
}
.space-status__item + .space-status__item {margin-top:4rem;}
.space-status__item__image {
    flex:none;
    width:47.2rem;
}
.space-status__item__image img {
    width:100%;
    border-radius: 1rem;
}
@media screen and (max-width:820px) {
    .space-status__item__image {width:100%;}
}
.space-status__item__image img {
    width:100%;
}
.space-status__item__info {
    flex:1;  
}
.space-status__item__title {
    margin-bottom:0.8rem;
    color: var(--text-basic);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 150%; /* 3.6rem */
}
.space-status__item__tag {
    color: var(--sub-text1, #7F8C8D);
    font-size: 1.4rem;
}
.space-status__item__text {
    margin-top:1.2rem;
    font-size:1.6rem;
    color:var(--text-basic);
}
.space-status__item__info .color-blue {color:#1166A0 !important;}
.space-status__item__info .color-tangerine {color:#EA7F26!important;}
.space-status__item__info .color-hot-pink {color:var(--color-secondary) !important;}
.space-status__item__info .color-green {color:var(--maya-blue) !important;}
.space-status__item__info .contact-info {margin-top:1.8rem;}
.space-status__item__info .contact-info__item {
    display:flex;
    align-items:flex-start;
    gap:1.1rem;
}
.space-status__item__info .contact-info__item + .contact-info__item {margin-top:0.8rem;}
.space-status__item__info .contact-info__label {
    flex:none;
    width:2rem;
}
.space-status__item__info .contact-info__label img {max-width:100%;}
.space-status__item__info .contact-info__value {
    color: var(--sub-text1, #7F8C8D);
    font-size: 1.6rem;
}
.space-status__note {
    margin-top:4.4rem;
    padding:3rem 2rem;
    border-radius: 1rem;
    background: #F7F8F9;
    text-align:center;
    color: var(--text-basic, #2F3640);
    font-size:1.6rem;
}
.space-status__note strong {
    color: var(--text-basic);
    font-weight: 700;
}

.youth-history {
    position:relative;
    margin-top:7.2rem;
}
.youth-history__content {
    position:relative;
    margin-top:2.4rem;
    color: var(--text-basic, #2F3640);
}
.youth-history__item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
}
@media screen and (max-width:640px) {
    .youth-history__item {flex-direction:column;}
}
.youth-history__item__head {
    position: relative;
    width:12rem;
}
@media screen and (max-width:768px) {
    .youth-history__item__head {width:10rem;}
}
@media screen and (max-width:640px) {
    .youth-history__item__head {margin-bottom:1rem;}
}
.youth-history__title {
    color:var(--text-basic);
    font-size: 2.4rem;
    font-weight: 700;
}
.youth-history__item__body {
    position: relative;
    width: calc(100% - 12rem);
    z-index: 2;
}
@media screen and (max-width:768px) {
    .youth-history__item__body {width:calc(100% - 10rem);}
}
@media screen and (max-width:640px) {
    .youth-history__item__body {width:100%;}
}
.youth-history__month {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
    position: relative;
    gap:0 3.6rem;
}
@media screen and (max-width:640px) {
    .youth-history__month {gap:0 2rem;}
}
.youth-history__month + .youth-history__month {margin-top:0.8rem;}
.youth-history__item .youth-history__month:last-child {padding-bottom:3.7rem;}
@media screen and (max-width:640px) {
    .youth-history__item .youth-history__month:last-child::after {display:none !important;}
}
.youth-history__item .youth-history__month--last {padding-bottom:0 !important;}
.youth-history__item .youth-history__month--last::after {display:none !important;}

.youth-history__month > dt {
    position: relative;
    padding-left:4.8rem;
    color: var(--text-basic, #2F3640);
    font-size:1.6rem;
    font-weight: 400;
}
@media screen and (max-width:640px) {
    .youth-history__month > dt {padding-left:2rem;}
}
.youth-history__month > dt::before {
    content: "";
    display: block;
    position: absolute;
    top: 0.8rem;
    left: 0;
    width:0.7rem;
    height: 0.7rem;
    background-color:var(--color-primary);
    border-radius: 100%;
}
.youth-history__month > dd {
    flex:1;
    position: relative;    
    color: var(--sub-text1, #7F8C8D);
    font-size:1.6rem;
}
.youth-history__month::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -13px;
    left:3px;
    width: 1px;
    height: calc(100% + 4px);
    background-color: var(--sub-text2, #B2BEC3);
}

.bi-info {
    position:relative;
    margin-top:7.2rem;
}
.bi-info__image {
    margin-top:2.4rem;
    padding:3.2rem 2rem;
    border-radius:1rem;
    background: #F7F8F9;
    text-align:center;
}
.bi-info__image img {max-width:100%;}

.organization {
    position:relative;
    width:100%;
}
@media screen and (max-width:1024px) {
    .organization::after {
        content: '';
        display: block;
        position: absolute;
        top:0;
        left:50%;
        width:1px;
        height:100%;
        background-color: var(--sub-text2);
        transform: translateX(-50%);
        z-index: -1;
    }
}
.organization__title {
    color: var(--text-basic, #2F3640);
    text-align: center;
    font-size: 3.2rem;
    font-weight: 700;
    margin-bottom: 4rem;
}
@media screen and (max-width:640px) {
    .organization__title {font-size: 2.4rem;}
}

/* 센터장 섹션 */
.organization__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom:9rem;
}
@media screen and (max-width:1024px) {   
    .organization__top {margin-bottom:5rem;}
}
.organization__director {
    position: relative;
    display: flex;
    width: 18rem;
    height: 18rem;
    padding: 5.2rem 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 9rem;
    background: linear-gradient(135deg, #1A1A2E 0%, #16213E 100%);
    color:#fff;
}
.organization__director::after {
    content: '';
    position: absolute;
    bottom:-18rem;
    left:50%;
    width:1px;
    height:18rem;
    background-color: var(--sub-text2);
    transform: translateX(-50%);
}
@media screen and (max-width:1024px) {   
    .organization__director::after {display:none;}
}
.organization__director-name {
    font-size: 3.2rem;
    font-weight: 700;
    letter-spacing: 0.16rem;
}
.organization__director-subtitle {
    margin-top:0.4rem;
    color: rgba(255, 255, 255, 0.70);
    font-family: "Pretendard GOV";
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 2.4rem */
}
.organization__line {
    background:var(--sub-text2);
}
.organization__line--vertical {
    width:1px;
    height:18.9rem;
}
.organization__line--horizontal {
    height:1px;
    width: 100%;
}
.organization__committee {    
    position: relative;
    width: 20.3rem;
    height: 5.5rem;
    padding: 1.4rem 3.2rem 0 3.2rem;
    margin-top:2.3rem;
    margin-left:60rem;
    align-items: flex-start;
    justify-content:center;
    border-radius: 3rem;
    background: linear-gradient(135deg, #5EBEAA 0%, #4CAF94 100%);
    color: #FFF;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    z-index: 1;
}
@media screen and (max-width:1024px) {   
    .organization__committee {
        margin-left:0;
        margin-top:5rem;
    }
}
.organization__committee span {font-weight: 400;}
.organization__committee::before {
    content: '';
    display: block;
    position: absolute;
    top:50%;
    left:-20rem;
    width:20rem;
    height:1px;
    background-color:var(--sub-text2);    
    transform: translateY(-50%);
}
@media screen and (max-width:1024px) {   
    .organization__committee::before {
        display:none;
    }
}

/* 팀 섹션 */
.organization__teams {
    position:relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.4rem;
}
@media screen and (max-width:1024px) {
    .organization__teams {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}
.organization__teams::before {
    content: '';
    display: block;
    position: absolute;
    top:-5.1rem;
    left:17.1rem;
    width:calc(100% - 34.2rem);
    height:1px;
    background-color: var(--sub-text2);
}
@media screen and (max-width:1024px) {
    .organization__teams::before {
        display:none;
    }
}

.organization__team {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius:2.4rem;
    min-height: 69.85rem;
    background: #FFF;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.organization__team::before {
    content: '';
    display: block;
    position: absolute;
    top:-5.1rem;
    left:50%;
    width:1px;
    height:5.1rem;
    background-color: var(--sub-text2);
    transform: translateX(-50%);
}
@media screen and (max-width:1024px) {
    .organization__team::before {display:none;}
}
.organization__team-header {
    padding:3rem 3.2rem 3.2rem;
    color: #FFF;
    text-align: left;
    position: relative;
    border-top-left-radius: 2.2rem;
    border-top-right-radius: 2.2rem;
}
.organization__team-header::after {
    content: '';
    position: absolute;
    top: 1.6rem;
    right: 1.6rem;
    width: 8rem;
    height: 8rem;
    background-image:url(../new_imgs/youth_center/org_icon.svg);
    background-repeat: no-repeat;
    background-size:100% auto;
}
.organization__team--pink .organization__team-header {
    background: linear-gradient(135deg, #EC4899 0%, #DB2777 100%);
}
.organization__team--blue .organization__team-header {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
}
.organization__team--blue::before {
    display: none;
}
.organization__team--orange .organization__team-header {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
}
.organization__team-title {
    color: #FFF;
    font-size: 2.8rem;
    font-weight: 700;
}
.organization__team-subtitle {
    margin-top:0.8rem;
    color: rgba(255, 255, 255, 0.90);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 150%; /* 2.4rem */
}
.organization__team-body {
    position:relative;
}
.organization__team-list {
    list-style: none;
    padding:3.2rem;
    padding-bottom:0;    
}
.organization__team-list li {
    padding: 1.2rem 0;
    padding-left:2rem;
    color: var(--text-basic, #2F3640);
    font-size: 1.6rem;
    border-bottom: 1px solid #F0F0F0;
    position: relative;
}
.organization__team-list li:last-child {
    border-bottom: none;
}
.organization__team-list li::before {
    content: '';
    position: absolute;
    top:1.9rem;
    left: 0;
    width: 0.8rem;
    height: 0.8rem;
    color: #999;    
    border-radius: 0.4rem;
}
.organization__team--pink .organization__team-list li::before {
    color: #E91E63;
    background: linear-gradient(135deg, #EC4899 0%, #DB2777 100%);
    box-shadow: 0 0 10px 0 rgba(236, 72, 153, 0.50);
}
.organization__team--blue .organization__team-list li::before {
    border-radius: 0.4rem;
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    box-shadow: 0 0 10px 0 rgba(59, 130, 246, 0.50);
}
.organization__team--orange .organization__team-list li::before {
    border-radius: 0.4rem;
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    box-shadow: 0 0 10px 0 rgba(245, 158, 11, 0.50);
}
.organization__team-contact {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    padding: 1.6rem 1.6rem;
    background: #F8F9FA;
    border-radius: 0.8rem;
    color: var(--text-basic, #2F3640);
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    border-bottom-left-radius: 2.2rem;
    border-bottom-right-radius: 2.2rem;
}
.organization__team-contact--pink {
    background: rgba(236, 72, 153, 0.10);
}
.organization__team-contact--blue {
    background: rgba(59, 130, 246, 0.10);
}
.organization__team-contact--orange {
    background: rgba(245, 158, 11, 0.10);
}


.directions-item {
    position:relative;
    width:100%;    
}
.directions-item__title {
    padding:2.4rem;
    color: var(--white);
    font-size: 2.4rem;
    font-weight: 700;
    border-radius:1rem 1rem 0 0;
}
.directions-item__title.blue {background-color:#1166A0 !important;}
.directions-item__title.tangerine {background-color:#EA7F26!important;}
.directions-item__title.hot-pink {background-color:var(--color-secondary) !important;}
.directions-item__title.green {background-color:var(--maya-blue) !important;}
.directions-item + .directions-item {margin-top:4.4rem;}
.directions-item__map {    
    position:relative;
    width:100%;
    height:30.8rem;
}
.directions-item__map iframe {
    width:100%;
    height:30.8rem;
    border:0;
}
.directions-item__info {
    position:relative;    
    padding:2.4rem;
    border-radius:0 0 1rem 1rem;
    border-style:solid;
    border-width:1px;
    border-top:0;
}
.directions-item__info.blue {border-color:#1166A0 !important;}
.directions-item__info.tangerine {border-color:#EA7F26!important;}
.directions-item__info.hot-pink {border-color:var(--color-secondary) !important;}
.directions-item__info.green {border-color:var(--maya-blue) !important;}
.directions-item__list {
    margin-top:2rem;
    color: var(--sub-text1);
    font-size: 1.6rem;
}
.directions-item__list li {
    display:flex;
    gap:0.8rem;
}
.directions-item__list li .icon {
    flex:none;
    width:2rem;
}
.directions-item__list li + li {margin-top:0.8rem;}

.directions {
    position:relative;
    width:100%;
}
.directions__ca {
    position:relative;
    margin-top:4.4rem;
}
.directions__ca ul {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:2.4rem;
}
@media screen and (max-width:480px) {
    .directions__ca ul {
        grid-template-columns:repeat(2, 1fr);
    }
}
.directions__ca__btn {
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    width:100%;
    height:5.2rem;
    border-radius: 0.5rem !important;
    background-color:#F0F1F4;
    color: var(--sub-text2);
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
}
.directions__ca__btn.active {    
    color: var(--white, #FFF);
    background: var(--primary-color, #54C2F0);    
    border-color: var(--primary-color, #54C2F0);
}

.directions__map {
    position:relative;
    width:100%;
    margin-top:4.4rem;
}
#direction_map {
    position:relative;
    width:100%;
    height:40rem;
}
.directions__map iframe {
    width:100%;
    height:100%;
}
.directions__info {
    display:flex;
    flex-direction:row;
    justify-content:center;
    margin-top:4rem;
    font-size:1.6rem;
    gap:5.8rem;
    color:var(--text-basic);
}
@media screen and (max-width:957px) {
    .directions__info {
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        gap:2rem;
    }
}
@media screen and (max-width:700px) {
    .directions__info {
        display:grid;
        grid-template-columns:1fr;
        gap: 2rem;
    }
}

.directions__info__item {
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:1.1rem;
}
.directions__info__item .icon {
    flex:none;
    display:inline-block;
    width:2rem;
    height:2rem;
}
.directions__info__item .icon img {
    width:100%;
    height:100%;
}

/* Hero Section */
.rental-hero {
    text-align: center;
    margin-bottom: 4rem;
}

@media (max-width: 768px) {
    .rental-hero {
        margin-bottom: 3rem;
    }
}

.rental-title {
    font-size: 4rem;
    font-weight: 700;
    color: var(--text-basic);
    margin-bottom: 1.2rem;
    letter-spacing: -0.02em;
}

@media (max-width: 768px) {
    .rental-title {
        font-size: 3.2rem;
    }
}
@media (max-width: 480px) {
    .rental-title {
        font-size: 2.8rem;
    }
}
.rental-subtitle {
    font-size:1.6rem;
    color: var(--text-basic);
    margin-top:2.4rem;
}


/* Spaces Grid */
.spaces-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.2rem;
    margin-bottom: 4.8rem;
}

@media (max-width: 1024px) {
    .spaces-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .spaces-grid {
        gap: 2.4rem;
        margin-bottom: 3.2rem;
    }
}

.space-card {
    background: white;
    border:1px solid #d7e2ec;;
    border-radius: 1.6rem;
    overflow: hidden;
    transition: all 0.3s ease;
}
.space-image-wrapper {
    position: relative;
    height: 24rem;
    overflow: hidden;
}

@media (max-width: 768px) {
    .space-image-wrapper {
        height: 18rem;
    }
}

@media (max-width: 480px) {
    .space-image-wrapper {
        height: 16rem;
    }
}

.space-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.space-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.4) 70%,
        transparent 100%
    );
    padding: 2.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.floor-badge {
    background: var(--color-primary);
    color:var(--white);
    font-size: 1.4rem;
    font-weight: 700;
    padding: 0.6rem 1.4rem;
    border-radius: 2rem;
    display: inline-block;
    width: fit-content;
}

@media (max-width: 480px) {
    .floor-badge {
        font-size: 1.2rem;
        padding: 0.5rem 1.2rem;
    }
}

.rental-space-name {
    color:var(--white);
    font-size: 2.4rem;
    font-weight: 700;
    margin: 0;
}

@media (max-width: 480px) {
    .rental-space-name {
        font-size: 2rem;
    }
}

.space-info {
    padding: 2.4rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1.6rem 0;
    border-bottom: 0.1rem solid #f1f5f9;
}

.info-item:last-child {
    border-bottom: none;
}

.info-label {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--sub-text1);
}

.info-value {
    font-size: 1.6rem;
    color: var(--text-basic);
    line-height: 1.5;
}

/* Apply Section */
.apply-section {
    text-align: center;
    margin-top:6.4rem;
    margin-bottom: 6.4rem;
}

.apply-button {
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    background: var(--color-primary);
    color:var(--white);
    padding: 1.6rem 4rem;
    border-radius: 5rem;
    font-size: 1.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .apply-button {
        padding: 1.4rem 3.2rem;
        font-size: 1.6rem;
    }
}

.apply-button:hover {
    transform: translateY(-0.2rem);
    opacity: 0.9;
}

.button-icon {
    width: 2.4rem;
    height: 2.4rem;
}

/* Info Section */
.info-section {margin-top: 7.2rem;}
.info-box {margin-top:2.4rem;}
.highlight {
    color: var(--color-secondary);
    font-weight: 700;
}
/* Notice List */
.notice-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.notice-list li {
    font-size:1.6rem;
    color: var(--text-basic);
    padding-left:1.2rem;
    position: relative;
}
.notice-list li + li {margin-top: 0.8rem;}
.notice-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 700;
}
.notice {
    font-size: 1.5rem;
    color: var(--sub-text1);
    margin: 0;
    line-height: 1.6;
}

.contact-info {
    font-size: 1.6rem;
    color: var(--text-basic);
}
.contact-info.mb0 {margin-bottom: 0;}

/* Procedures */
.procedure-note {
    margin-top:2rem;
    font-size: 1.6rem;
    color: var(--text-basic);
    margin-bottom:2rem;
}

.procedures-wrapper {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 2.4rem;
    margin-top:2.4rem;
}

@media (max-width: 1024px) {
    .procedures-wrapper {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }
}

.procedure-flow {
    display: contents;
}

@media (max-width: 1024px) {
    .procedure-flow {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

.procedure-card {
    background-color:#F0F1F4;
    border-radius: 1.6rem;
    padding: 2.4rem 2rem;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media (max-width: 1024px) {
  .procedure-card {
    width: 100%;
    max-width: 50rem;
  }
}

@media (max-width: 768px) {
    .procedure-card {
        padding: 2rem 1.6rem;
    }
}
.procedure-icon {
    width: 5.6rem;
    height: 5.6rem;
    margin: 0 auto 1.6rem;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .procedure-icon {
        width: 5rem;
        height: 5rem;
    }
}

.procedure-icon svg {
    width: 2.8rem;
    height: 2.8rem;
    color:var(--white);
}

@media (max-width: 480px) {
    .procedure-icon svg {
        width: 2.5rem;
        height: 2.5rem;
    }
}

.procedure-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-basic);
    margin-bottom: 1rem;
}

.procedure-description {
    font-size: 1.6rem;
    color: var(--sub-text1);
    line-height: 1.5;
    white-space: pre-line;
    margin: 0;
}

.procedure-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1024px) {
    .procedure-arrow {
        transform: rotate(90deg);
        padding: 0;
        margin: 0.8rem 0;
    }
}

.procedure-arrow svg {
    width: 2rem;
    height: 2rem;
    color: var(--sub-text2);
}

/* Calendar */
.calendar-placeholder {
    position:relative;
    margin-top:2.4rem;
    padding:0 !important;
}


.calendar-icon {
    width: 6.4rem;
    height: 6.4rem;
    color: var(--sub-text1);
}

.calendar-placeholder p {
    font-size: 1.8rem;
    color: var(--sub-text1);
    margin: 0;
}

/* 센터 소개 페이지 스타일 */
.section-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--text-basic);
    margin-bottom: 2.4rem;
}

@media (max-width: 768px) {
    .section-title {
        font-size: 2.4rem;
        margin-bottom: 2rem;
    }
}

.center-box {position:relative;}
.center-box.fst {
    padding-top:0;
    border-top:0;
}
.center-box__image {
    position:relative;
    width:100%;
    margin-bottom:2.4rem;
}
.center-box__image img {
    width:100%;
    border-radius:1rem;
}
.center-box__info {
    position:relative;
    width:100%;
    margin-top:2.4rem;
}
@media (max-width:820px) {
    .center-box__info {
        width:100%;
        padding-left:0;
    }
}
.center-box__title {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--text-basic);
    margin-bottom:2.4rem;
}
.center-box dl {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
}
.center-box dl + dl {margin-top:1.2rem;}
.center-box dt {
    width:6.3rem;
    font-size: 1.6rem;
    font-weight:700;
    color: var(--color-secondary);
}
.center-box dd {
    flex:1;
    font-size: 1.6rem;
    color: var(--text-basic);
}
.center-box dd .sns-icon {
    display:inline-block;
    width:4rem;
    height:4rem;
    margin-right:0.4rem;
}
.center-box dd .sns-icon img,
.center-box dd .sns-icon svg {
    width:100%;
    height:100%;
}
.time-item {
    display:flex;
    flex-direction:row;
    align-items:baseline;
}
.time-item + .time-item {margin-top:0.8rem;}
.time-item__label {
    flex:none;
    width:14rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-basic);
    margin-right:0.8rem;
}
.time-item__value {
    font-size: 1.6rem;
    color: var(--text-basic);
}


/* 센터 소개 */
.center-intro {
    width:100%;
    position: relative;
    margin-top:2.4rem;
}

.center-intro__content {
    width:100%;
    position: relative;
    
}
.center-intro__text {
    font-size: 1.6rem;
    color: var(--text-basic);
}

.center-intro__date {
    display: inline-flex;
    align-items: center;
    gap: 1.6rem;
    padding: 1.6rem 3.2rem;
    background: var(--color-primary);
    border-radius: 5rem;
}

.center-intro__date .label {
    font-size: 1.6rem;
    font-weight: 700;
    color:var(--white);
}

.center-intro__date .value {
    font-size: 2rem;
    font-weight: 700;
    color:var(--white);
}

@media (max-width: 768px) {
    .center-intro__date {
        padding: 1.2rem 2.4rem;
        gap: 1.2rem;
    }
    
    .center-intro__date .label {
        font-size: 1.4rem;
    }
    
    .center-intro__date .value {
        font-size: 1.8rem;
    }
}

/* 공간 안내 */
.space-guide {
    margin-bottom: 7.2rem;
}

.space-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-bottom: 2.4rem;
}

@media (max-width: 1024px) {
    .space-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .space-grid {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }
}


.space-card__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 1.6rem;
}

@media (max-width: 768px) {
    .space-card__title {
        font-size: 1.8rem;
    }
}

.space-card__info {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.space-type {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.type-label {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--sub-text1);
}

.type-value {
    font-size: 1.6rem;
    color: var(--text-basic);
    line-height: 1.6;
}

.space-guide__note {
    padding: 2rem;
    background: #f7fbfe;
    border-radius: 1rem;
    text-align: center;
    font-size: 1.6rem;
    color: var(--text-basic);
}

.space-guide__note .link-text {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: underline;
}

.space-guide__note .link-text:hover {
    color: var(--text-basic);
}

/* 정보 섹션 (운영시간 & 주소) */
.info-section {
    margin-bottom: 7.2rem;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3.2rem;
}

@media (max-width: 768px) {
    .info-grid {
        grid-template-columns: 1fr;
        gap: 2.4rem;
    }
}


.info-box__title {
    padding: 2rem 2.4rem;
    background: var(--color-primary);
    color:var(--white);
    font-size: 2rem;
    border-radius:1rem;
    font-weight: 700;
    margin: 0;
}

@media (max-width: 768px) {
    .info-box__title {
        font-size: 1.8rem;
        padding: 1.6rem 2rem;
    }
}

.info-list {
    padding: 2.4rem;
}

@media (max-width: 768px) {
    .info-list {
        padding: 2rem;
    }
}

.info-item {
    display: flex;
    gap: 1.6rem;
    padding: 1.6rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
    border-bottom: none;
}

.info-item__label {
    flex: none;
    width: 10rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-basic);
}

@media (max-width: 768px) {
    .info-item__label {
        width: 8rem;
        font-size: 1.4rem;
    }
}

.info-item__value {
    flex: 1;
    font-size: 1.6rem;
    color: var(--sub-text1);
    line-height: 1.6;
}

.info-item__value small {
    font-size: 1.4rem;
    color: var(--sub-text1);
}

@media (max-width: 768px) {
    .info-item__value {
        font-size: 1.4rem;
    }
    
    .info-item__value small {
        font-size: 1.2rem;
    }
}

/* 연락처 섹션 */
.contact-section {
    margin-bottom: 7.2rem;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

@media (max-width: 1024px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2.4rem;
    background: white;
    border:1px solid #d7e2ec;;
    border-radius: 1.6rem;
    transition: all 0.3s ease;
}

.contact-item:hover {border-color: var(--color-primary);}
.contact-item__icon {
    flex: none;
    width: 5.6rem;
    height: 5.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    border-radius: 50%;
    color:var(--white);
    font-size: 2.4rem;
}

@media (max-width: 768px) {
    .contact-item__icon {
        width: 4.8rem;
        height: 4.8rem;
        font-size: 2rem;
    }
}

.contact-item__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.contact-item__label {
    font-size: 1.4rem;
    color: var(--sub-text1);
    font-weight: 600;
}

.contact-item__value {
    font-size: 1.8rem;
    color: var(--text-basic);
    font-weight: 700;
}

.contact-item__value.link {
    color: var(--color-primary);
    text-decoration: none;
}

.contact-item__value.link:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .contact-item__label {
        font-size: 1.2rem;
    }
    
    .contact-item__value {
        font-size: 1.6rem;
    }
}

/* SNS 섹션 */
.sns-section {
    margin-bottom: 7.2rem;
}

.sns-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

@media (max-width: 768px) {
    .sns-grid {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }
}

.sns-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
    padding: 3.2rem 2.4rem;
    background: white;
    border:1px solid #d7e2ec;;
    border-radius: 1.6rem;
    text-decoration: none;
    transition: all 0.3s ease;
}
.sns-card:hover {
    border-color: var(--color-primary);
}
.sns-card__icon {
    width: 6rem;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color:var(--white);
    font-size: 3.2rem;
}
.sns-card__icon img {
    width:100%;
    height: 100%;
}

@media (max-width: 768px) {
    .sns-card__icon {
        width: 5.6rem;
        height: 5.6rem;
        font-size: 2.8rem;
    }
    
    .sns-card__icon img {
        width: 2.8rem;
        height: 2.8rem;
    }
}

.sns-card__name {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-basic);
}

@media (max-width: 768px) {
    .sns-card__name {
        font-size: 1.6rem;
    }
}

/* 프로그램 섹션 */
.program-section {
    margin-bottom: 7.2rem;
}

.program-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.6rem;
}

@media (max-width: 1024px) {
    .program-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .program-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }
}

@media (max-width: 480px) {
    .program-grid {
        grid-template-columns: 1fr;
    }
}

.program-card {
    display:flex;
    justify-content:center;
    align-items:center;
    padding: 2rem 1.6rem;
    border: 1px solid var(--color-primary);
    border-radius: 1.2rem;
    color: var(--text-basic);
    font-size: 1.6rem;
    text-align: center;
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .program-card {
        padding: 1.6rem 1.2rem;
    }
}

/* 통합 공간 안내 디자인 */
.space-guide-integrated {
    margin-bottom: 7.2rem;
}

.space-integrated-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem;
    margin-top: 2.4rem;
}
.space-integrated-grid--4column {
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) {
    .space-integrated-grid {
        grid-template-columns:repeat(2, 1fr);
        gap: 2rem;
    }
    .space-integrated-grid--4column {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width:639px) {
    .space-integrated-grid {
        grid-template-columns:repeat(1, 1fr);
        gap: 2rem;
    }
    .space-integrated-grid--4column {
        grid-template-columns: repeat(1, 1fr);
    }
}

.space-integrated-card {
    background: white;
    border: 1px solid var(--maya-blue);
    border-radius: 2rem;
    overflow: hidden;
    transition: all 0.3s ease;
}
.space-integrated-card__header {
    padding: 2.4rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--maya-blue) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.space-integrated-card__title {
    font-size: 2.4rem;
    font-weight: 700;
    color: white;
    margin: 0 0 0.4rem 0;
}

.space-integrated-card__subtitle {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

@media (max-width: 768px) {
    .space-integrated-card__header {
        padding: 2rem;
    }
    
    .space-integrated-card__title {
        font-size: 2rem;
    }
    
    .space-integrated-card__subtitle {
        font-size: 1.3rem;
    }
}

.space-integrated-card__body {
    padding: 2.4rem;
}

@media (max-width: 768px) {
    .space-integrated-card__body {
        padding: 2rem;
    }
}

.space-detail {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}


.space-detail__item {
    display: flex;
    gap: 1.6rem;
    align-items: flex-start;
}

.space-detail__icon {
    flex: none;
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f7fbfe 0%, #e8f4fc 100%);
    border: 1px solid var(--maya-blue);
    border-radius: 1.2rem;
    color: var(--color-primary);
    font-size: 2rem;
}

@media (max-width: 768px) {
    .space-detail__icon {
        width: 4rem;
        height: 4rem;
        font-size: 1.8rem;
    }
}

.space-detail__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.space-detail__label {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-primary);
}
.space-detail__value {
    font-size: 1.6rem;
    color: var(--text-basic);
    line-height: 1.6;
}

.space-detail__value div {
    margin-top: 0.4rem;
}

.space-detail__value div:first-child {
    margin-top: 0;
}

.space-detail__value strong {
    color: var(--text-basic);
    font-weight: 700;
    margin-right: 0.4rem;
}

.space-detail__value .sub-info {
    font-size: 1.4rem;
    color: var(--sub-text1);
    margin-top: 0.4rem;
}

@media (max-width: 768px) {
    .space-detail__value {
        font-size: 1.5rem;
    }
    
    .space-detail__value .sub-info {
        font-size: 1.3rem;
    }
}

/* 동구청년센터 전용 스타일 */

/* 감성적인 센터 소개 */
.center-intro--simple .center-intro__content {
    text-align: center;
}

.center-intro__slogan {
    font-size:2.4rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom:2rem;
}
@media (max-width: 480px) {
    
    .center-intro__slogan br {
        display: none;
    }
}

.center-intro__description {
    display: flex;
    flex-direction: column;
    gap:0.8rem;
}

.center-intro__description p {
    font-size: 1.6rem;
    color: var(--text-basic);
}

.center-intro__description p.highlight {
    font-weight: 700;
    color: var(--color-primary);
    margin-top: 0.8rem;
}

@media (max-width: 768px) {   
    .center-intro__description p br {
        display: none;
    }
}

/* 간단한 센터 정보 (공간, 운영시간, 주소) */
.simple-center-info {
    margin-bottom: 7.2rem;
}

.simple-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.simple-info-grid > .simple-info-card:first-child {
    grid-column: 1 / -1;
}

@media (max-width: 1024px) {
    .simple-info-grid {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }
}

.simple-info-card {
    background: white;
    border: 1px solid var(--maya-blue);
    border-radius: 1.6rem;
    overflow: hidden;
    transition: all 0.3s ease;
}
.simple-info-card--full {
    grid-column: 1 / -1;
}

.simple-info-card__header {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 2rem 2.4rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--maya-blue) 100%);
}

@media (max-width: 768px) {
    .simple-info-card__header {
        padding: 1.6rem 2rem;
    }
}

.simple-info-card__icon {
    flex: none;
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: white;
    font-size: 2rem;
}

@media (max-width: 768px) {
    .simple-info-card__icon {
        width: 3.6rem;
        height: 3.6rem;
        font-size: 1.8rem;
    }
}

.simple-info-card__title {
    font-size: 2rem;
    font-weight: 700;
    color: white;
    margin: 0;
}

@media (max-width: 768px) {
    .simple-info-card__title {
        font-size: 1.8rem;
    }
}

.simple-info-card__body {
    padding: 2.4rem;
}

@media (max-width: 768px) {
    .simple-info-card__body {
        padding: 2rem;
    }
}

/* 층별 공간 안내 */
.floor-info {
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem;
}
.floor-info.grid-3 {grid-template-columns:repeat(3, 1fr);}
.floor-info.grid-4 {grid-template-columns:repeat(4, 1fr);}
@media screen and (max-width:960px) {
    .floor-info.grid-4 {grid-template-columns:repeat(2, 1fr);}
    .floor-info.grid-3 {grid-template-columns:repeat(2, 1fr);}
}
@media screen and (max-width: 480px) {
    .floor-info {grid-template-columns: 1fr;}
    .floor-info.grid-3 {grid-template-columns:1fr;}
    .floor-info.grid-4 { grid-template-columns:1fr;}
}


.floor-info__item {
    display: flex;
    gap: 1.6rem;
    align-items: center;
}

@media (max-width: 480px) {
    .floor-info__item {
        align-items: flex-start;
        gap: 0.8rem;
    }
}

.floor-label {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.6rem;
    height: 3.6rem;
    background: var(--color-primary);
    border-radius: 0.8rem;
    color: white;
    font-size: 1.6rem;
    font-weight: 700;
}

.floor-label.location-label {
    width: auto;
    min-width: 7rem;
    padding: 0 1.6rem;
}

@media (max-width: 480px) {
    .floor-label {
        width: 5rem;
        height: 3.2rem;
        font-size: 1.4rem;
    }
    
    .floor-label.location-label {
        min-width: 6rem;
        padding: 0 1.2rem;
    }
}

.floor-value {
    flex: 1;
    font-size: 1.6rem;
    color: var(--text-basic);
    line-height: 1.6;
}

/* 운영시간 */

.time-value {
    font-size: 1.6rem;
    color: var(--sub-text1);
    margin-bottom: 1.2rem;
}

.time-hours {
    font-size:1.6rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

@media (max-width: 768px) {
    .time-value {
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }
    
    .time-hours {
        font-size: 2.8rem;
    }
}

/* 주소 */
.address-value {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--text-basic);
    margin: 0;
}

@media (max-width: 768px) {
    .address-value {
        font-size: 2rem;
    }
}

/* 복수 주소 안내 */
.address-info {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.address-info__item {
    display: flex;
    flex-direction:column;
    gap: 1.6rem;
    padding: 1.6rem;
    background: #f7fbfe;
    border-radius: 1rem;
}

@media (max-width: 480px) {
    .address-info__item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
        padding: 1.2rem;
    }
}

.address-label {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7rem;
    height: 3.6rem;
    padding: 0 1.6rem;
    background: var(--color-primary);
    border-radius: 0.8rem;
    color: white;
    font-size: 1.6rem;
    font-weight: 700;
}

@media (max-width: 480px) {
    .address-label {
        min-width: 6rem;
        height: 3.2rem;
        padding: 0 1.2rem;
        font-size: 1.4rem;
    }
}

.address-content {
    flex: 1;
}

.address-main {
    font-size:1.6rem;
    font-weight: 700;
    color: var(--text-basic);
    margin: 0 0 0.4rem 0;
    line-height: 1.6;
}

.address-detail {
    font-size: 1.5rem;
    color: var(--sub-text1);
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .address-main {
        font-size: 1.6rem;
    }
    
    .address-detail {
        font-size: 1.4rem;
    }
}

/* SNS 2개용 그리드 */
.sns-grid--two {
    grid-template-columns: repeat(2, 1fr);
    max-width: 64rem;
}

@media (max-width: 768px) {
    .sns-grid--two {
        grid-template-columns: 1fr;
        max-width: 48rem;
    }
}

/* SNS 4개용 그리드 */
.sns-grid--four {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
    .sns-grid--four {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .sns-grid--four {
        grid-template-columns: 1fr;
    }
}

/* 수성구청년센터 전용 스타일 */

/* 대표 사진 섹션 - Swiper */
.center-photo {
    margin-bottom: 5.6rem;
    position: relative;
}

.center-photo-swiper {
    width: 100%;
    overflow: hidden;
    border-radius: 1rem;
}
.center-photo-swiper .swiper-pagination {
    bottom: 2rem;
}

.center-photo-swiper .swiper-pagination-bullet {
    width: 1.2rem;
    height: 1.2rem;
    background: white;
    opacity: 0.7;
}

.center-photo-swiper .swiper-pagination-bullet-active {
    background: var(--color-primary);
    opacity: 1;
}


/* 달성청년혁신센터 전용 스타일 */

/* Feature 그리드 (3개 박스) */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.feature-grid.feature-grid--3column {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width:480px) {
    .feature-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .feature-grid.feature-grid--3column {
        grid-template-columns: repeat(1, 1fr);
    }
}

.feature-card {
    padding:1.6rem;
    border-radius:1rem;
    text-align: center;
    background-color:#F7F8F9;
}

.feature-card__title {
    font-size:1.9rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 2rem 0;
}

.feature-card__content {
    font-size: 1.6rem;
    color: var(--text-basic);
    margin: 0;
}

@media (max-width: 768px) {
    .feature-card {
        padding: 2.4rem 2rem;
    }
    
    .feature-card__title {
        font-size: 1.8rem;
        margin-bottom: 1.6rem;
    }
    
    .feature-card__content {
        font-size: 1.5rem;
    }
}

/* 공간 안내 (센터/청년마당 구분) */
.space-info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.space-info__item {
    display: flex;
    gap: 1.6rem;
    align-items: flex-start;
    padding: 2rem;
    background: #f7fbfe;
    border-radius: 1rem;
}

@media (max-width: 480px) {
    .space-info__item {
        flex-direction: column;
        gap: 1.2rem;
        padding: 1.6rem;
    }
}

.space-label {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7rem;
    height: 3.6rem;
    padding: 0 1.6rem;
    background: var(--color-primary);
    border-radius: 0.8rem;
    color: white;
    font-size: 1.6rem;
    font-weight: 700;
}

@media (max-width: 480px) {
    .space-label {
        min-width: 6rem;
        height: 3.2rem;
        padding: 0 1.2rem;
        font-size: 1.4rem;
    }
}

.space-list {
    flex: 1;
    font-size: 1.6rem;
    color: var(--text-basic);
    margin: 0;
    line-height: 1.8;
}

@media (max-width: 768px) {
    .space-list {
        font-size: 1.5rem;
    }
}

/* 이중 운영시간 (센터/청년마당 구분) */
.dual-time-info {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.dual-time-info__section {
    display: flex;
    gap: 1.6rem;
    align-items: flex-start;
    padding: 2rem;
    background: #f7fbfe;
    border-radius: 1rem;
}

@media (max-width: 480px) {
    .dual-time-info__section {
        flex-direction: column;
        gap: 1.2rem;
        padding: 1.6rem;
    }
}

.dual-time-label {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7rem;
    height: 3.6rem;
    padding: 0 1.6rem;
    background: var(--color-primary);
    border-radius: 0.8rem;
    color: white;
    font-size: 1.6rem;
    font-weight: 700;
}

@media (max-width: 480px) {
    .dual-time-label {
        min-width: 6rem;
        height: 3.2rem;
        padding: 0 1.2rem;
        font-size: 1.4rem;
    }
}

.dual-time-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.dual-time-row {
    font-size:1.6rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .dual-time-row {
        font-size: 1.6rem;
    }
}

.center-photo-swiper .swiper-button-prev:after,
.center-photo-swiper .swiper-button-next:after {
    font-size: 2rem;
    color: var(--color-primary);
    font-weight: 900;
}

@media (max-width: 768px) {
    .center-photo-swiper .swiper-button-prev,
    .center-photo-swiper .swiper-button-next {
        width: 3.6rem;
        height: 3.6rem;
    }
    
    .center-photo-swiper .swiper-button-prev:after,
    .center-photo-swiper .swiper-button-next:after {
        font-size: 1.6rem;
    }
}

/* 미션 중심 소개 */
.center-intro--mission .center-intro__slogan {
    font-size: 3.2rem;
}

.center-intro__slogan--primary {
    color: var(--text-basic);
}

@media (max-width: 768px) {
    .center-intro--mission .center-intro__slogan {
        font-size: 2.6rem;
    }
}

/* 수성구 센터 안내 */
/* ==================== 공통 센터 정보 영역 (구군 센터 공통) - 리스트형 UI ==================== */

.center-info-section {
    width:100%;
    margin-top:3.2rem;
}

.info-card-grid {
    display: flex;
    flex-direction: column;
    gap:2.4rem;
    margin-top:2.4rem;
}

.info-card {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    transition: none;
    border-bottom: 1px solid #eef2f6;
    padding-bottom:2.4rem;
}

.info-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.info-card__header {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 0;
    background: transparent;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .info-card__header {
        padding: 0;
    }
}

.info-card__icon {
    flex: none;
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7fbfe;
    border: 1px solid var(--maya-blue);
    border-radius: 50%;
    color: var(--color-primary);
    font-size: 2rem;
}

@media (max-width: 768px) {
    .info-card__icon {
        width: 3.6rem;
        height: 3.6rem;
        font-size: 1.8rem;
    }
}

.info-card__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-basic);
    margin: 0;
}


.info-card__body {
    padding: 0;
}

@media (max-width: 768px) {
    .info-card__body {
        padding: 0;
    }
}

/* 공간 리스트 (그리드 제거, 심플 리스트 형태로 변경) */
.space-list-grid {
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:1.6rem;
}
.space-list-grid--3column {
    grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width:640px) {
    .space-list-grid--single {
        grid-template-columns: 1fr;
    }
    .space-list-grid--3column {
        grid-template-columns: repeat(2, 1fr);
    }
    .space-list-grid {grid-template-columns: repeat(2, 1fr);}
}
.space-list-grid ul {
    font-size: 1.6rem;
    margin-top: 0.4rem;
}
.space-list-grid ul li {
    display: flex;
    flex-direction: row;
}
.space-list-grid ul li::before {
    flex: none;
    content: "•";
    color: var(--color-primary);
    font-weight: 700;
    display: inline-block;
    width: 1.2rem;
}

/* 공간 리스트 아이템 (리스트형 UI) */
.space-list-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:1.6rem;
    border-radius: 1rem;
    text-align: left;
    transition: all 0.3s ease;
    min-height: 10rem;
    text-align: center;
    align-items: center;
    background-color:#F7F8F9;
}
.space-list-item.vertical-top {
    flex-direction: column;
    justify-content: flex-start;
}


.space-list-item.align_left {
    flex-direction: column;
    align-items: flex-start;
}
.space-badge {
    display: inline-block;
    padding: 0.4rem 1.2rem;
    border-radius: 2rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    width: fit-content; /* 추가: 텍스트 내용만큼만 너비 차지 */
    margin-bottom: 0.8rem;
}

.space-badge--rental {
    background: var(--color-secondary);
}

.space-badge--office {
    background: var(--maya-blue);
    color: var(--white);
}

.yc-space-name {
    font-size: 1.6rem;
    color: var(--text-basic);
    font-weight: 600;
}

.time-info {
    font-size: 1.6rem;
    color: var(--text-basic);
}
.time-info.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap:1.6rem;
}
@media (max-width:620px) {
    .time-info.grid {
        grid-template-columns: 1fr;
    }
}

.time-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap:0.8rem;
}
@media (max-width:940px) {
    .time-grid {
        grid-template-columns: 1fr;
        gap:0.8rem;
    }
}

.time-info-title {
    font-weight: 700;
    color: var(--color-secondary);
    font-size:1.6rem;
    margin-bottom:0.8rem;
}
.time-info .mt-16 {
    margin-top:1.6rem;
}

/* 2줄 운영시간 */
.time-info--dual {
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem;
}
@media screen and (max-width:640px) {
    .time-info--dual {
        grid-template-columns: 1fr;
    }
}
.time-row {
    display: flex;
    align-items: center;
    gap:0.8rem;
}
@media (max-width: 480px) {
    .time-row {
        gap: 0.4rem;
    }
}

/* 부가정보 시간 행 */
.time-row--note {
    margin-top: 0.8rem;
    background: transparent;
    padding: 0.8rem 0;
}

.time-row--note .time-label,
.time-row--note .time-hours {
    font-size: 1.3rem;
    color: var(--sub-text2);
}

@media (max-width: 480px) {
    .time-row--note {
        padding: 0.8rem 0;
    }
}

.time-label {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-basic);
}

.time-row .time-hours {
    font-size:1.6rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

@media (max-width: 768px) {
    .time-label {
        font-size: 1.5rem;
    }
    
    .time-row .time-hours {
        font-size: 1.8rem;
    }
}

/* 작은 주소 */
.address-value--small {
    font-size: 1.8rem;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .address-value--small {
        font-size: 1.6rem;
    }
}

/* 첫번째 요소 전체 너비 사용 (기존 그리드용, 현재는 flex column이므로 제거됨) */
@media (min-width: 769px) {
    /* 기존 info-card-grid가 2컬럼이었으나, 리스트 UI로 변경됨 */
}

/* �޼�û�����ż��� ���� ��Ÿ�� */


.feature-icon {
    display:block;
    position:relative;
    width:6rem;
    height:6rem;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0.8rem;
}



/* 공간 안내 (달성/수성구청년센터 공통) */
.simple-info-card__body .space-info {padding:0;}
.space-info__item {
    display: flex;
    gap: 1.6rem;
    flex-direction:column;
    align-items: flex-start;
    padding: 2rem;
    background: #f7fbfe;
    border-radius: 1rem;
}

@media (max-width: 480px) {
    .space-info__item {
        flex-direction: column;
        gap: 1.2rem;
        padding: 1.6rem;
    }
}

.space-list {
    flex: 1;
    font-size: 1.6rem;
    color: var(--text-basic);
    margin: 0;
    line-height: 1.8;
}

@media (max-width: 768px) {
    .space-list {
        font-size: 1.5rem;
    }
}

/* ���� ��ð� (����/û�⸶�� ����) */
.dual-time-info {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.dual-time-info__section {
    display: flex;
    gap: 1.6rem;
    align-items: flex-start;
    padding: 2rem;
    background: #f7fbfe;
    border-radius: 1rem;
}

@media (max-width: 480px) {
    .dual-time-info__section {
        flex-direction: column;
        gap: 1.2rem;
        padding: 1.6rem;
    }
}

.dual-time-label {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7rem;
    height: 3.6rem;
    padding: 0 1.6rem;
    background: var(--color-primary);
    border-radius: 0.8rem;
    color: white;
    font-size: 1.6rem;
    font-weight: 700;
}

@media (max-width: 480px) {
    .dual-time-label {
        min-width: 6rem;
        height: 3.2rem;
        padding: 0 1.2rem;
        font-size: 1.4rem;
    }
}

.dual-time-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
@media (max-width: 768px) {
    .dual-time-row {
        font-size: 1.6rem;
    }
}


/* 정보 */
.center-info {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.center-info__item {
    display: flex;
    flex-direction:column;
    gap: 1.6rem;
    padding: 1.6rem;
    background: #f7fbfe;
    border-radius: 1rem;
}

@media (max-width: 480px) {
    .center-info__item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
        padding: 1.2rem;
    }
}

.center-label {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7rem;
    height: 3.6rem;
    padding: 0 1.6rem;
    background: var(--color-primary);
    border-radius: 0.8rem;
    color: white;
    font-size: 1.6rem;
    font-weight: 700;
}

@media (max-width: 480px) {
    .center-label {
        min-width: 6rem;
        height: 3.2rem;
        padding: 0 1.2rem;
        font-size: 1.4rem;
    }
}

.center-content {
    flex: 1;
}

.center-main {
    font-size:1.6rem;
    font-weight: 700;
    color: var(--text-basic);
    margin: 0 0 0.4rem 0;
    line-height: 1.6;
}
.center-main.mt8 {margin-top:0.8rem;}

.center-detail {
    font-size: 1.5rem;
    color: var(--sub-text1);
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .center-main {
        font-size: 1.6rem;
    }
    
    .center-detail {
        font-size: 1.4rem;
    }
}

/* 통합 센터 카드 (센터/청년마당 각각 별도 카드) */
.integrated-center-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top:2.4rem;
}

@media (max-width: 768px) {
    .integrated-center-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* 통합 센터 그리드 1열 변형 */
.integrated-center-grid--single {
    grid-template-columns: 1fr !important;
}

.integrated-center-card {
    background-color:#F7F8F9;
    border-radius:1rem;
    overflow: hidden;
}

.integrated-center-card__header {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--maya-blue) 100%);
    padding:1.6rem;
    text-align: center;
    color: white;
}

.integrated-center-card__title {
    font-size:1.9rem;
    font-weight: 700;
}

.integrated-center-card__subtitle {
    font-size: 1.6rem;
    margin: 0;
    opacity: 0.95;
}

.integrated-center-card__body {
    padding:1.6rem;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.box-section {
    display: flex;
    gap: 1.6rem;
    align-items: flex-start;
}

.box-section__icon {
    flex: none;
    width: 4.4rem;
    height: 4.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f7fbfe 0%, #ffffff 100%);
    border: 1px solid var(--sub-text2);
    border-radius: 1rem;
    color: var(--color-primary);
    font-size: 2rem;
}

@media (max-width: 768px) {
    .box-section__icon {
        width: 4rem;
        height: 4rem;
        font-size: 1.8rem;
    }
}

.box-section__content {
    flex: 1;
}

.box-section__title {
    font-size:1.6rem;
    font-weight: 700;
    color: var(--text-basic);
    margin: 0 0 0.8rem 0;
}

.box-section__text {
    font-size: 1.6rem;
    color: var(--sub-text1);
    margin: 0;
    line-height: 1.8;
}

@media (max-width: 768px) {
    .box-section__title {
        font-size: 1.6rem;
    }
    
    .box-section__text {
        font-size: 1.5rem;
    }
}

/* ==================== Utility Classes ==================== */

/* Margin Top 유틸리티 */
.mt-8 {
    margin-top: 0.8rem;
}

.mt-12 {
    margin-top: 1.2rem;
}

/* ===================================
   주요 사업소개 (Key Projects)
   =================================== */

.key-projects {
    position: relative;
    margin-top:2.4rem;
}

.key-project-section {
    position: relative;
}

.key-project-section + .key-project-section {
    margin-top:4rem;
}


.key-project-card {
    position: relative;
    display: grid;
    grid-template-columns: 38rem 1fr;
    background: white;
    overflow: hidden;
    transition: none;
}

@media (max-width: 1024px) {
    .key-project-card {
        grid-template-columns: 28rem 1fr;
    }
}

@media (max-width: 768px) {
    .key-project-card {
        grid-template-columns: 1fr;
        border-radius: 2rem;
    }
}

/* 이미지 영역 */
.key-project-card__image-wrapper {
    position: relative;
    width:100%;
}

.key-project-card__image {
    max-width:100%;
}

/* 번호 배지 */
.key-project-card__number-badge {
    position: absolute;
    top:0;
    left:0;
    width: 8rem;
    height: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--maya-blue) 100%);   
    border-radius: 50%;
    color: #fff;
    font-size: 3.6rem;
    font-weight: 900;
    font-family: 'Arial Black', 'Noto Sans KR', sans-serif;
    letter-spacing: -0.05em;
    transition: none;
}

@media (max-width: 1024px) {
    .key-project-card__number-badge {
        width: 7rem;
        height: 7rem;
        font-size: 3.2rem;
        top: 2rem;
        left: 2rem;
    }
}

@media (max-width: 768px) {
    .key-project-card__number-badge {
        width: 6rem;
        height: 6rem;
        font-size: 2.8rem;
        top: 1.6rem;
        left: 1.6rem;
    }
}

/* 콘텐츠 영역 */
.key-project-card__content {
    display: flex;
    flex-direction: column;
    padding-left:3.6rem;
}

@media (max-width: 1024px) {
    .key-project-card__content {
        padding-left: 3.2rem;
    }
}

@media (max-width: 768px) {
    .key-project-card__content {
        padding-top:3.2rem;
        padding-left:0;
    }
}

.key-project-card__title {
    margin: 0 0 2rem 0;
    color: var(--text-basic);
    font-size:2.4rem;
    font-weight: 700;
    position: relative;
}
@media (max-width: 768px) {        
    .key-project-card__title:after {
        width: 5rem;
        height: 0.3rem;
    }
}

.key-project-card__description {
    margin: 0 0 2.4rem 0;
    color: var(--text-basic, #2F3640);
    font-size: 1.6rem;
}
.key-project-card__programs {
    margin-bottom: 2.4rem;
    flex: 1;
}
.program-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.program-list li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1.2rem;
    color: var(--text-basic, #2F3640);
    font-size: 1.6rem;
    transition: none;
}

.program-list li:before {
    content: '';
    position: absolute;
    left: 0;
    top:0.7rem;
    width: 0.8rem;
    height: 0.8rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--maya-blue) 100%);
    border-radius: 50%;
    transition: none;
}
.key-project-card__link {
    margin-top: auto;
}
.btn-activity-link {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem 3rem;
    background: var(--color-primary);
    color: var(--white);
    text-decoration: none;
    border-radius: 5rem;
    font-size: 1.6rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.btn-activity-link:hover {color:var(--text-basic);}
.btn-activity-link:hover:before {opacity: 1;}
.btn-activity-link i,
.btn-activity-link span {
    position: relative;
    z-index: 1;
}
.btn-activity-link i {
    font-size: 2rem;
    transition: none;
}
@media (max-width: 768px) {
    .btn-activity-link {
        padding: 1.2rem 2.4rem;
        font-size: 1.5rem;
        gap: 0.8rem;
    }
    
    .btn-activity-link i {
        font-size: 1.8rem;
    }
}

.facility-header {
    position: relative;
    width:100%;
    margin-top:3.2rem;
    text-align: center;
}

.facility-header__hours {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1.6rem;
    padding: 2.4rem 3.6rem;
    border-radius: 2rem;
    background-color: #F0F1F4;
}

.facility-header__hours > div {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}
.facility-header__hours-icon {
    width: 2.4rem;
    height: 2.4rem;
    color: var(--color-primary, #54C2F0);
    flex-shrink: 0;
}

.facility-header__hours-text {
    font-size: 1.6rem;
    color: var(--text-basic);
}

@media screen and (max-width: 768px) {
    .facility-header__hours {
        padding: 2rem 2.4rem;
        gap: 1.2rem;
    }
    
    .facility-header__hours > div {
        padding: 1rem 1.6rem;
        gap: 1rem;
    }
    
    .facility-header__hours-icon {
        width: 2rem;
        height: 2rem;
    }
    
    .facility-header__hours-text {
        font-size: 1.4rem;
    }
}

/* Space List - 기본 레이아웃 */
.facility-spaces {
    display: flex;
    flex-wrap: wrap;
    gap: 2.4rem;
    margin-top:3.2rem;
    justify-content: center;
}

/* 3개 레이아웃 - 한 줄에 3개 */
.facility-spaces--3 .facility-space {
    flex: 0 0 calc((100% - 4.8rem) / 3);
    max-width: calc((100% - 4.8rem) / 3);
}

/* 4개 레이아웃 - 한 줄에 4개 */
.facility-spaces--4 .facility-space {
    flex: 0 0 calc((100% - 7.2rem) / 4);
    max-width: calc((100% - 7.2rem) / 4);
}
.facility-spaces--5 {
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:1.6rem;
}
.facility-spaces--5 .facility-space__image-wrapper {height:17rem;}


/* 태블릿 반응형 */
@media (max-width: 1200px) {
    .facility-spaces {
        gap: 2.4rem;
    }
    
    .facility-spaces--3 .facility-space,
    .facility-spaces--4 .facility-space{
        flex: 0 0 calc(50% - 1.2rem);
        max-width: calc(50% - 1.2rem);
    }
    
}

@media (max-width: 1200px) {
    .facility-spaces--5 {
        grid-template-columns: repeat(3, 1fr);
        gap:2.4rem;
    }
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .facility-spaces {
        gap: 2rem;
    }
    
    .facility-spaces--3 .facility-space,
    .facility-spaces--4 .facility-space{
        flex: 0 0 100%;
        max-width: 100%;
    }
    .facility-spaces--5 {
        grid-template-columns: repeat(1, 1fr);
        gap:2rem;
    }
    .facility-spaces--5 .facility-space__image-wrapper {height:22rem;}
}

/* Facility Space Item - 카드 스타일 */
.facility-space {
    display: flex;
    flex-direction: column;
    border-radius:1rem;
    overflow: hidden;
    background-color:#F0F1F4;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.facility-space:nth-child(1) { animation-delay: 0s; }
.facility-space:nth-child(2) { animation-delay: 0.1s; }
.facility-space:nth-child(3) { animation-delay: 0.15s; }
.facility-space:nth-child(4) { animation-delay: 0.2s; }
.facility-space:nth-child(5) { animation-delay: 0.25s; }

/* Facility Space Image */
.facility-space__image-wrapper {
    position: relative;
    width: 100%;
    height: 22rem;
    overflow: hidden;
}

.facility-space__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .facility-space__image-wrapper {
        height: 20rem;
    }
}

.facility-space__badge {
    position: absolute;
    top: 1.6rem;
    right: 1.6rem;
    padding: 0.8rem 1.6rem;
    background: linear-gradient(135deg, var(--color-secondary) 0%, #45a8d8 100%);
    color: white;
    font-size: 1.3rem;
    font-weight: 700;
    border-radius: 2rem;
    box-shadow: 0 0.4rem 1.2rem rgba(84, 194, 240, 0.4);
    z-index: 1;
}

/* Facility Space Info */
.facility-space__info {
    padding:2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.facility-space__name {
    font-size: 2rem;
    font-weight: 700;
    color:var(--text-basic);
    margin-bottom: 2rem;
    padding-bottom: 1.2rem;
    border-bottom: 0.3rem solid var(--color-primary, #54C2F0);
}

.facility-space__details {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    flex: 1;
}

/* Facility Detail Item */
.facility-detail {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
}

.facility-detail__icon {
    width: 2rem;
    height: 2rem;
    color: var(--color-primary, #54C2F0);
    flex-shrink: 0;
    margin-top: 0.3rem;
}

@media (max-width: 768px) {
    .facility-detail__icon {
        width: 1.8rem;
        height: 1.8rem;
    }
}

.facility-detail__content {
    flex: 1;
}

.facility-detail__label {
    display: block;
    font-size: 1.4rem;
    color: var(--sub-text1);
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}

.facility-detail__value {
    font-size: 1.6rem;
    color: var(--text-basic);
}

.facility-detail__value--bold {
    font-weight: 700;
    color: #1a1a1a;
}

.cility-detail__value--bold {
    font-weight: 700;
    color: #1a1a1a;
}


.center-info-map {
    position: relative;
    display:flex;
    flex-direction:row;
}
@media (max-width: 960px) {
    .center-info-map {
        flex-direction: column;
    }
}

.center-info-map.center {align-items: center;}
.center-info-map.center .center-info__content {padding-left:0;}
.map-box {
    position: relative;
    width:36.2rem;
}
@media (max-width: 960px) {
    .map-box {
        width:100%;
        max-width: 36.2rem;
        margin: 0 auto;
        text-align:center;
    }
}
.map-box svg {
    width:100%;
    max-width:36.2rem;
    height:auto;
}

/* Interactive map regions */
.map-box .map_link path[id$='_bg'] {
    transition: fill 0.3s ease-in-out;
    cursor: pointer;
}

.map-box .map_link:hover path[id$='_bg'] {
    fill: var(--maya-blue, #85D4F7);
}
.map-box .map_link:hover path[id$='_bg2'] {
    fill: var(--maya-blue, #85D4F7);
}

.map-box .map_link.on path[id$='_bg'] {
    fill: var(--maya-blue, #85D4F7);
}
.map-box .map_link.on path[id$='_bg2'] {
    fill: var(--maya-blue, #85D4F7);
}

.map-box .map_link g[id$='_label'] {
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    pointer-events: none;
}

.center-info__content {
    position:relative;
    width:calc(100% - 36.2rem);
    padding-left:4rem;
}
@media (max-width:960px) {
    .center-info__content {
        width:100%;
        padding-left:0;
        margin-top:3.2rem;
    }
}
.center-info__text {
    font-size:4rem;
    color:var(--text-basic);
    font-weight:700;
    text-align:center;
}
.center-info__text img {
    width: 4.8rem;
    height: 4.8rem;
    margin: 0 0.5rem;
    vertical-align: -8px;
}

@keyframes icon-bounce {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-8px) rotate(-5deg);
    }
    75% {
        transform: translateY(-4px) rotate(5deg);
    }
}

@media (max-width: 768px) {
    .center-info__text {
        width:100%;
        text-align:center;
        font-size:2.4rem;
    }
}



/* ---- Section Title ---- */
.bd-section {
    position: relative;
    margin-top:2.4rem;
}
.bd-section-title {
    font-weight: 400;
    font-size: 1.8rem;
    color:var(--sub-text1);
    text-align: center;
    margin-bottom:2.4rem;
}

/* ---- Slogan Box ---- */
.bd-slogan-outer {
    display: flex;
    justify-content: center;
    margin-bottom: 2.4rem;
}

.bd-slogan-box {
    background: #54c2f0;
    border-radius: 1rem;
    padding:2.8rem 5.2rem 2.8rem;
    position: relative;
    min-width: 32rem;
    max-width: 55rem;
    width: 100%;
    text-align: center;
}

.bd-slogan-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2d5bab;
    border-radius: 9999rem;
    padding: 0.4rem 1.4rem;
    margin-bottom: 1.2rem;
}

.bd-slogan-badge span {
    font-weight: 700;
    font-size: 1.4rem;
    color: #fff;
    white-space: nowrap;
}

.bd-slogan-heading {
    font-weight: 900;
    font-size: 4rem;
    color: #fff;
    white-space: nowrap;
}

/* ---- Subtitle ---- */
.bd-subtitle {
    font-weight: 700;
    font-size: 2.4rem;
    color:var(--text-basic);
    text-align: center;
    margin-bottom: 1.6rem;
}

/* ---- Arrow Divider ---- */
.bd-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.6rem;
}

.bd-divider-inner {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 25.8rem;
}

.bd-divider-bar {
    height: 0.4rem;
    border-radius: 9999rem;
    background: #54c2f0;
}

.bd-divider-bar-short {
    width: 5rem;
    flex-shrink: 0;
}

.bd-divider-bar-long {flex: 1;}

.bd-divider-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0.6rem;
}

.bd-divider-arrow svg {display: block;}

/* ---- Gradient Banner ---- */
.bd-banner {
    border-radius: 1rem;
    overflow: hidden;
    background: linear-gradient(
        167.811deg,
        #54c2f0 0%,
        #69beef 7.14%,
        #79bbe6 14.29%,
        #88b7e1 21.43%,
        #94b3dc 28.57%,
        #a0afd7 35.71%,
        #aaabd2 42.86%,
        #b4a6cd 50%,
        #bda2c8 57.14%,
        #c699c3 64.29%,
        #ce98be 71.43%,
        #d693b9 78.57%,
        #de8db4 85.71%,
        #e587af 92.86%,
        #ec81aa 100%
    );
    position: relative;
    padding: 3.2rem;
    margin-bottom: 1.6rem;
    min-height: 21.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bd-banner-deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.1;
}

.bd-banner-circle1 {
    position: absolute;
    left: 1.6rem;
    top: 1.6rem;
    width: 8rem;
    height: 8rem;
    border: 0.4rem solid #fff;
    border-radius: 9999rem;
}

.bd-banner-circle2 {
    position: absolute;
    right: 1.44rem;
    top: 7.2rem;
    width: 12.8rem;
    height: 12.8rem;
    border: 0.4rem solid #fff;
    border-radius: 9999rem;
}

.bd-banner-text {
    font-family: 'Pretendard GOV', sans-serif;
    font-weight: 900;
    font-size: 3.2rem;
    line-height: 4.8rem;
    color: #fff;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* ---- Cards Grid ---- */
.bd-cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.6rem;
}

/* ---- Card ---- */
.bd-card {
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0.1rem 0.4rem rgba(0,0,0,0.06);
}
@media (max-width: 900px) {
    .bd-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 600px) {
    .bd-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 400px) {
    .bd-cards {
        grid-template-columns: 1fr;
    }
}

.bd-card-header {
    background: #54c2f0;
    padding: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    flex-shrink: 0;
}

.bd-card-header p {
    font-weight: 700;
    font-size: 1.6rem;
    color: #fff;
    text-align: center;
}

.bd-card-body {
    background-color:#F7F8F9;
    padding: 1.6rem;
    flex: 1;
}

/* ---- List ---- */
.bd-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    font-weight: 400;
}

.bd-list-item {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.bd-bullet {
    font-size: 1.2rem;
    line-height: 1.8rem;
    color: #54c2f0;
    flex-shrink: 0;
}

.bd-list-text {
    font-size: 1.4rem;
    line-height: 2.1rem;
    color: #2f3640;
}

@media (max-width: 600px) {
    .bd-wrap {
        padding: 2.4rem 1.6rem 4rem;
    }

    .bd-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .bd-slogan-heading {
        font-size: 2.4rem;
        line-height: 3.6rem;
        white-space: normal;
    }

    .bd-subtitle {
        font-size: 1.8rem;
        line-height: 2.8rem;
    }

    .bd-banner-text {
        font-size: 2rem;
        line-height: 3.2rem;
    }

    .bd-banner {
        min-height: 16rem;
        padding: 2.4rem 2rem;
    }

    .bd-section-title {
        font-size: 1.4rem;
        line-height: 2.1rem;
    }
}