/* ============================================
   Common CSS - 위드봄산부인과의원
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root {
    --color-primary: #4D6D58;
    --color-primary-strong: #315242;
    --color-cream: #f5f1eb;
    --color-peach: #ebd5b4;
    --color-white: #ffffff;
    --color-text: #2A4734;
    --color-text-sub: #2A4734;
    --color-line: rgba(47, 49, 46, 0.16);

    --font-serif: 'Nanum Myeongjo', serif;
    --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-futura: 'Noto Serif KR', serif;

    --header-height: 68px;
    --container: 1200px;
    --transition: 0.3s ease;
}

.inner-wrap,
.container {
    width: min(var(--container), calc(100% - 120px));
    margin: 0 auto;
}

.section-wrap {
    position: relative;
    width: 100%;
}

.section-en-label {
    display: block;
    margin-bottom: 14px;
    font-family: var(--font-futura);
    font-size: 16px;
    font-weight: 500;
    color: #2A4734;
}

.section-title {
    font-family: var(--font-serif);
    font-size: clamp(26px, 2.5vw, 32px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.03em;
    color: var(--color-text);
}

.section-title.is-light {
    color: var(--color-white);
}

.section-desc {
    margin-top: 25px;
    font-family: var(--font-sans);
    font-size: 16px;
	font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: var(--color-text-sub);
    white-space: pre-line;
}

.section-desc.is-light {
    color: rgba(255, 255, 255, 0.82);
}

.btn-more {
    display: inline-flex;
    align-items: center;
    margin-top: 34px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--color-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-primary);
    transition: opacity var(--transition);
}

.btn-more:hover {
    opacity: 0.65;
}

.btn-light {
    border-bottom-color: rgba(255, 255, 255, 0.7);
    color: var(--color-white);
}

.fade-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in {
    opacity: 0;
    transition: opacity 0.8s ease;
}

.fade-in.is-visible {
    opacity: 1;
}

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

@media (max-width: 1024px) {
    :root {
        --header-height: 62px;
    }

    .container {
        width: min(var(--container), calc(100% - 72px));
    }
}

@media (max-width: 768px) {
    .container {
        width: min(var(--container), calc(100% - 36px));
    }

    .section-desc {
        font-size: 14px;
        line-height: 1.8;
    }
}