/* ==========================================================================
   CSS Variables Reference
   ==========================================================================
   📌 Font 관련
   --default-font-family
   --base-body-font-size
   --base-font-size
   --fs-body-base
   --fs-title-base
   --fs-primary-title
   --fs-title
   --fs-subtitle
   --fs-section-title
   --fs-section-subtitle
   --fs-body
   --fs-copyright

   📌 Width 관련
   --logo-width
   --default-container-width
   --default-content-width
   --default-container-width-small
   --default-content-width-small

   --max-container-width
   --max-content-width
   --max-container-width-small
   --max-content-width-small

   📌 Spacing 관련
   --default-container-padding
   --default-logo-margin
   --default-navbar-padding

   📌 Media Query에서 변경되는 변수
   - (1025px~1280px)
     --max-container-width
     --max-content-width
     --max-container-width-small
     --max-content-width-small

   - (769px~1024px)
     --max-container-width
     --max-content-width
     --max-container-width-small
     --max-content-width-small

   - (최대 768px)
     --fs-body-base
     --fs-title-base
     --max-container-width
     --max-content-width
     --max-container-width-small
     --max-content-width-small
================================================================== */

/* 공통 컨테이너 스타일 override */
:root {
    --gradient-primary: linear-gradient(45deg, #667eea, #764ba2);
    --shadow-hover: 0 20px 40px rgba(102, 126, 234, 0.3);
    --border-glass: 1px solid rgba(255, 255, 255, 0.1);
    --bg-glass: rgba(255, 255, 255, 0.05);
    --backdrop-blur: blur(20px);
    --transition-smooth: all 0.3s ease;
}


.common-container {
    --common-text-color: #86868b;
    --strong-text-color: black;
    position: relative;
    padding: var(--fs-primary-title);
    color: var(--common-text-color);

    & + .common-container {
        padding: 4rem 0;
    }
    h2, h3, h4, h5 {
        margin: 0;
		word-break: keep-all;
    }
    
    .content-wrapper {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
        display: block;
    }
    
    .content-title {
        font-weight: 800;
        text-align: left;
        margin-bottom: var(--fs-title);
        color: var(--strong-text-color);
        position: relative;
    }
    
    
    h3 {
        font-weight: 700;
        text-align: center;
        width: 75%;
        color: var(--common-text-color);
    }


    .content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem 4rem;
        align-items: start;
        background:unset;
        min-height: fit-content;

        &.image-box {
            grid-template-columns: 1fr;
            transform: translateZ(0);
            will-change: transform;
            img {
                transform: translateZ(0);
                will-change: transform;
                max-width: 100%;
                height: auto;
                vertical-align: middle;
                display: inline-block;
            }

            /* Main CSS */
            .grid-wrapper > div {
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .grid-wrapper > div > img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 5px;

            }

            .grid-wrapper {
                display: grid;
                grid-gap: 10px;
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                grid-auto-rows: 200px;
                grid-auto-flow: dense;
            }
            .grid-wrapper .wide {
                grid-column: span 2;
            }
            .grid-wrapper .tall {
                grid-row: span 2;
            }
            .grid-wrapper .big {
                grid-column: span 2;
                grid-row: span 2;
            }
        }
    }

    h3.grid-title {
        grid-column: 1 / 2;
        color: var(--common-text-color);
        margin-bottom: 0;
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        width: 100%;
        text-align: left;
    }

    .content-text {
		font-size: var(--fs-body);
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        color: #e0e0e0;
        p {
			font-size: var(--fs-body);
            margin-bottom: 1.5rem;
            line-height: 1.8;
            color: var(--common-text-color);
            font-weight: 700;
            strong {
                font-weight: 700;
                color: var(--strong-text-color);
            }
        }
    }

    .content-image {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
        aspect-ratio: 4 / 3;
        img {
            will-change: transform;
            transform: translateZ(0);
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 1rem;
        }
    }

}


.common-container.branch-gallary {
    background-color: #f5f5f7;
	.content-title {
		text-align: center;
	}
}


/* Animations */
@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: var(--transition-smooth);

    &.visible {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 990px) {
    .common-container {

        .content { 
            grid-template-columns: 1fr;
        }
        h3.grid-title {
            grid-column: 1 / 2;
            grid-row: 1 / 2;
        }

        .content-text {
            grid-column: 1 / 2;
            grid-row: 3 / 4;

        }

        .content-image {
            grid-column: 1 / 2;
            grid-row: 2 / 3;

        }
    }
}

@media (max-width: 768px) {
    .common-container {
        padding: 2rem 0;
        .content {
            margin: 0;
        }

    }
}



/* Coach Section */
#about-ju-coach.common-container {
	--common-text-color: black;
	background:linear-gradient(180deg, #f5f5f7, #ffffff);
	position: relative;
	min-height: calc(var(--lvh) * 120);
	h3 {
		width: 100%;
	}
	.content-wrapper {
		max-width: var(--max-container-width-small);
	}


	.coach-content {
		display: grid;
		grid-template-columns: repeat(12, minmax(0,1fr));
		align-items: start;
		margin-top: 60px;
	}

	.coach-profile {
		text-align: center;
		grid-column: 1 / 5;
		grid-row: 1 / auto;
		.profile-image {
			margin-bottom: 2rem;
			display: flex;
			justify-content: center;
			aspect-ratio: 3 / 4;
			box-shadow: 0 20px 40px rgba(0,0,0,0.3);
			position: relative;
			overflow: hidden;
			border-radius: 1.5rem;
			
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.coach-info h3 {
			font-size: var(--fs-subtitle);
			color: black;
			margin-bottom: 0.5rem;
			font-weight: 700;
			text-align: center !important;
		}

		.coach-title {
			color: #667eea;
			font-weight: 500;
			margin-bottom: 2rem;
		}
	}

	.coach-message-text {
		grid-column: 6 / 13;
		grid-row: 1 / auto;
		border-radius: 25px;
		backdrop-filter: var(--backdrop-blur);
		border: var(--border-glass);

		.message-content {
			h3 {
				color: white;
				margin-bottom: 2rem;
				background: var(--gradient-primary);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				font-weight: 700;
				width: 100%;
				text-align: left;
			}

			p {
				font-size: var(--fs-body);
				color: #86868b;
				line-height: 1.475;
				margin-bottom: 1.5rem;
				font-weight: 700;
				&.message-closing {
					font-weight: 700 !important;
					color: #667eea !important;
					text-align: center;
					margin-top: 2.5rem !important;
					padding-top: 2rem;
					border-top: var(--border-glass);
				}
			}
		}
	}

	.coach-content:nth-of-type(even) {
		.coach-profile {
			grid-column: 9 / 13;
		}
		.coach-message-text {
			grid-column: 1 / 8;
		}
	}


	/* 코치들 사이 간격 추가 */
	.coach-content + .coach-content {
		margin-top: var(--fs-primary-title);
		padding-top: var(--fs-primary-title);
		border-top: 1px solid rgba(0,0,0,0.1);
	}

}


/* Location Info */
.location-info.common-container {
    background-color: white;
    .content {
        display: grid; grid-template-columns: 1fr 1fr;
        align-items: start;
        gap: 2rem 4rem;
        h3 {
            grid-column: 1 / -1;
            font-weight: 750;
            margin-bottom: 0;
        }
    }
    .info-box {
        width: 100%;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: max-content 1fr;
        height: fit-content;
        gap:1rem 1.5rem;
        .info-box-content {
            display: contents;
            > span {
                line-height: 1.5;
            }
            > span.table-head {
                font-weight: 750;
                line-height: 1.5;
            }
        }
    }
    .map-button-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap:0.75rem;
    }
    .map-button {
		font-size: calc(var(--fs-body) * 0.875);
        display:flex;
        align-items:center;
		justify-content: center;
        gap:0.25rem;
        font-variation-settings:
            'FILL' 1,
            'wght' 400,
            'GRAD' 0,
            'opsz' 24;
        .material-symbols-outlined {
			font-size: calc(var(--fs-body));
        }
    }
    .map-box {
        display: grid;
        grid-template-columns: 1fr;
        gap:1rem;
    }
    .iframe-wrapper {
        border-radius: 1rem;
        overflow: hidden;
        aspect-ratio: 4 / 3; 
    }
}



/* Responsive */
@media (max-width: 990px)   { 
	.location-info.common-container {
		background-color: #f5f5f7;
		.content {
			display: grid; grid-template-columns: 1fr;
		}
	}

		/* Coach Section 모바일 */
	#about-ju-coach.common-container {

		.content-title {
			text-align: center;
		}
		.content-wrapper {
			max-width: var(--max-container-width);
			padding: calc(var(--default-container-padding) / 2);
		}
		.coach-content {
			grid-template-columns: 1fr;
			gap: 2rem;
		}

		.coach-profile {
			grid-column: 1 / 2;
			grid-row: 1 / 2;

			position: static;

			.profile-image {
				width: 62.5%;
				margin: 0 auto 2rem auto;
			}


		}

		.coach-message-text {
				grid-column: 1 / 2;
				grid-row: 2 / 3;
			.message-content  {

			}
		}

		.coach-content:nth-of-type(even) {
			.coach-profile {
				grid-column: 1 / 2;
				grid-row: 1 / 2;			
			}
			.coach-message-text {
				grid-column: 1 / 2;
				grid-row: 2 / 3;			
			}
		}
	}
}


@media (max-width: 768px)   {
    .location-info.common-container {
        .content {

        }
        .info-box {
            width: 100%;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: max-content 1fr;
            height: fit-content;
            gap:0.5rem 0.75rem;
            .info-box-content {
                display: contents;
                > span {
                }
                > span.table-head {
                }
            }
        }
        .map-button {
            display:flex;
            align-items:center;
            gap:0.125rem;
			font-size: calc(var(--fs-body) * 0.75);
            font-variation-settings:
                'FILL' 1,
                'wght' 400,
                'GRAD' 0,
                'opsz' 24;
            .material-symbols-outlined {
				font-size: calc(var(--fs-body) * 0.875);
            }
        }
    }
}


@media (max-width: 480px)   {
    .location-info.common-container {
        .map-button {
			font-size: calc(var(--fs-body) * 0.625);
            .material-symbols-outlined {
				font-size: calc(var(--fs-body) * 0.75);
            }
        }
    }
}