/* Explain: Page layout and spacing variables for consistent rhythm across sections. */
/* 페이지 리듬 기준값: 섹션 위아래 여백, 카드 사이 간격, 두 칸 배치 간격을
   이 변수 한 곳에서 정해 홈페이지와 목록 페이지가 같은 리듬으로 읽히도록 합니다. */
:root {
    --section-space: 4rem;
    --section-gap: 1rem;
    --section-split-gap: 1.5rem;
}

@media (min-width: 640px) {
    :root {
        --section-space: 5rem;
        --section-gap: 1.5rem;
    }
}

@media (min-width: 1024px) {
    :root {
        --section-split-gap: 2rem;
    }
}

.section-pad {
    padding-block: var(--section-space);
}

/* 섹션 머리글 공통 기준: 작은 제목 → 큰 제목 → 설명 문장 */
.section-head {
    margin-inline: auto;
    max-width: 48rem;
    text-align: center;
}

.section-head .eyebrow {
    color: var(--primary-color);
}

.section-head h2 {
    margin-top: 0.85rem;
    font-size: 1.875rem;
    line-height: 1.28;
    color: var(--charcoal-color);
}

.section-lead {
    margin-top: 1.25rem;
    font-size: 1rem;
    line-height: 2rem;
    color: var(--text-muted);
}

@media (min-width: 640px) {
    .section-head h2 {
        font-size: 2.25rem;
    }

    .section-lead {
        font-size: 1.125rem;
    }
}

.section-head-invert h2 {
    color: var(--cream-color);
}

.section-head-invert .eyebrow {
    color: var(--secondary-color);
}

.section-head-invert .section-lead {
    color: color-mix(in srgb, var(--cream-color) 82%, transparent);
}

/* 머리글과 카드 목록 사이 간격도 한 기준으로 */
.section-body {
    margin-top: 2.5rem;
}

/* 카드가 여러 장 놓이는 목록은 칸 수만 화면에 따라 정하고,
   카드 사이 간격은 이 한 값(모바일 1rem, 넓은 화면 1.5rem)을 씁니다. */
.section-grid {
    display: grid;
    gap: var(--section-gap);
}

/* 글과 그림처럼 두 칸으로 나뉘는 배치도 같은 기준의 간격을 씁니다. */
.section-split {
    display: grid;
    gap: var(--section-split-gap);
}

/* 가운데로 모이며 줄바꿈되는 카드 묶음(다섯 갈래 마음)도 같은 카드 간격을 씁니다.
   카드 너비는 간격 값을 그대로 반영해 줄 끝에서 넘치지 않도록 계산합니다. */
.heart-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--section-gap);
}

.heart-grid > * {
    width: 100%;
}

@media (min-width: 640px) {
    .heart-grid > * {
        width: calc(50% - var(--section-gap) / 2);
    }
}

@media (min-width: 1024px) {
    .heart-grid > * {
        width: calc(33.3333% - var(--section-gap) * 2 / 3);
    }
}

.hero-glow {
    position: relative;
    isolation: isolate;
}

.hero-glow h1 {
    text-wrap: balance;
}

/* 페이지 첫머리 공통 기준: 작은 제목 → 큰 제목 → 설명의 크기와 위아래 여백,
   가운데 정렬 폭을 이곳 한 곳에서 정해 모든 페이지의 첫머리가 같은 결로 읽히도록 합니다. */
.page-hero {
    padding-inline: 1rem;
    padding-top: 3rem;
    padding-bottom: 1.5rem;
}

.page-hero-inner {
    margin-inline: auto;
    max-width: 48rem;
    text-align: center;
}

.page-hero-inner .eyebrow {
    color: var(--primary-color);
}

.page-hero-title {
    margin-top: 0.75rem;
    font-family: var(--font-heading);
    font-size: 2.25rem;
    line-height: 1.2;
    color: var(--charcoal-color);
    text-wrap: balance;
}

.page-hero-lead {
    margin-top: 1.25rem;
    font-size: 1.125rem;
    line-height: 2rem;
    color: var(--text-muted);
}

@media (min-width: 640px) {
    .page-hero {
        padding-inline: 1.5rem;
    }

    .page-hero-title {
        font-size: 3rem;
        line-height: 1.1;
    }
}

@media (min-width: 1024px) {
    .page-hero {
        padding-inline: 2rem;
    }
}