/* =========================================================
   MAIN PAGE
========================================================= */
.main-page {
    --main-green: #72b512;
    --main-green-hover: #5c9e08;
    --main-green-dark: #438300;
    --main-green-deep: #315f13;

    --main-lime: #a7c80a;
    --main-yellow: #f3d20b;

    --main-text: #252b23;
    --main-body: #677060;
    --main-muted: #8a9186;
    --main-line: #e2e9da;

    --main-soft: #f5faeb;
    --main-soft-green: #edf6dc;
    --main-soft-yellow: #fffbea;

    width: 100%;
    overflow: hidden;
    color: var(--main-text);
}

.main-page,
.main-page *,
.main-page *::before,
.main-page *::after {
    box-sizing: border-box;
}

.main-page a {
    color: inherit;
    text-decoration: none;
}

.main-page img {
    max-width: 100%;
}

.main-page ul,
.main-page ol,
.main-page dl,
.main-page dd {
    margin: 0;
    padding: 0;
}

.main-page ul,
.main-page ol {
    list-style: none;
}

.main-page button,
.main-page input,
.main-page select,
.main-page textarea {
    font-family: inherit;
}

.main-page p {
    margin-top: 0;
}

.main-inner {
    width: min(1440px, calc(100% - 60px));
    margin: 0 auto;
}
/* =========================================================
   HERO
========================================================= */
.main-hero {
    position: relative;
    min-height: 620px;
    padding: 85px 0 130px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 88% 14%,
            rgba(243, 210, 11, 0.14) 0,
            rgba(243, 210, 11, 0.14) 9%,
            transparent 24%
        ),
        radial-gradient(
            circle at 12% 88%,
            rgba(167, 200, 10, 0.10) 0,
            rgba(167, 200, 10, 0.10) 14%,
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #fbfdf8 0%,
            #f3f8ea 58%,
            #fffef7 100%
        );
}

.main-hero::before {
    content: '';
    position: absolute;
    top: -250px;
    right: -170px;
    width: 620px;
    height: 620px;
    border: 85px solid rgba(114, 181, 18, 0.05);
    border-radius: 50%;
}

.main-hero::after {
    content: '';
    position: absolute;
    left: -150px;
    bottom: -210px;
    width: 430px;
    height: 430px;
    border: 68px solid rgba(243, 210, 11, 0.04);
    border-radius: 50%;
}

.hero-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 70px;
}

.hero-content {
    min-width: 0;
}

.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: var(--main-green-dark);
}

.hero-eyebrow::before {
    content: '';
    width: 36px;
    height: 3px;
    border-radius: 999px;
    background: var(--main-yellow);
}

.main-page h2.hero-title {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    font-family: inherit !important;
    font-size: clamp(40px, 4.7vw, 60px) !important;
    line-height: 1.08 !important;
    font-weight: 700 !important;
    letter-spacing: -0.08em !important;
    color: #1f271f !important;
    text-align: left !important;
    word-break: keep-all;
}

.main-page h2.hero-title::before,
.main-page h2.hero-title::after {
    content: none !important;
    display: none !important;
}

.hero-title span {
    position: relative;
    display: inline-block;
    color: var(--main-green-dark);
}

.hero-title span::after {
    content: '';
    position: absolute;
    left: -2px;
    right: -2px;
    bottom: 4px;
    z-index: -1;
    height: 14px;
    border-radius: 999px;
    background: rgba(243, 210, 11, 0.65);
}

.hero-description {
    margin: 26px 0 0;
    font-size: 19px;
    line-height: 1.85;
    letter-spacing: -0.04em;
    color: var(--main-body);
    word-break: keep-all;
}


/* =========================================================
   HERO BANNER SLIDER
========================================================= */
.hero-banner {
    min-width: 0;
}

.hero-slider {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(114, 181, 18, 0.16);
    border-radius: 38px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 28px 60px rgba(78, 116, 34, 0.12);
}

.hero-slides {
    position: relative;
}

.hero-slide {
    display: none;
}

.hero-slide.active {
    display: block;
}

.hero-slide a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.hero-slide-image {
    position: relative;
    height: 410px;
    overflow: hidden;
    background: #edf3e4;
}

.hero-slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-slide-text {
    padding: 26px 28px 28px;
    background: #fff;
	display:none;
}

.hero-slide-label {
    display: inline-block;
    margin-bottom: 10px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--main-soft-green);
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    color: var(--main-green-dark);
}

.hero-slide-text strong {
    display: block;
    margin-bottom: 8px;
    font-size: 26px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: -0.05em;
    color: #283126;
    word-break: keep-all;
}

.hero-slide-text p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: #6d756a;
    word-break: keep-all;
}

.hero-slider-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 22px 10px 20px;
    background: #fff;
}

.hero-arrow {
    width: 38px;
    height: 38px;
    border: 1px solid #dbe5d1;
    border-radius: 50%;
    background: #fff;
    font-size: 22px;
    line-height: 1;
    color: var(--main-green-dark);
    cursor: pointer;
    transition: all 0.2s ease;
}

.hero-arrow:hover {
    background: var(--main-green);
    border-color: var(--main-green);
    color: #fff;
}

.hero-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
}

.hero-dots button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #cfd8c6;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hero-dots button.active {
    width: 28px;
    border-radius: 999px;
    background: var(--main-green);
}


/* =========================================================
   HERO RESPONSIVE
========================================================= */
@media (max-width: 1100px) {
    .hero-layout {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .hero-slide-image {
        height: 380px;
    }
}

@media (max-width: 640px) {
    .main-hero {
        min-height: 0;
        padding: 55px 0 105px;
    }

    .main-page h2.hero-title {
        font-size: 38px !important;
        line-height: 1.15 !important;
    }

    .hero-title strong::after {
        bottom: 2px;
        height: 10px;
    }

    .hero-description {
        margin-top: 20px;
        font-size: 15px;
        line-height: 1.75;
        word-break: normal;
    }

    .hero-slider {
        border-radius: 24px;
    }

    .hero-slide-image {
        height: 250px;
    }

    .hero-slide-text {
        padding: 18px 18px 20px;
    }

    .hero-slide-text strong {
        font-size: 20px;
    }

    .hero-slide-text p {
        font-size: 14px;
    }

    .hero-slider-controls {
        padding: 0 16px 16px;
    }

    .hero-arrow {
        width: 34px;
        height: 34px;
        font-size: 20px;
    }
}

/* =========================================================
   HERO PANEL
========================================================= */
.hero-panel {
    position: relative;
    min-height: 455px;
    padding: 52px 48px;
    overflow: hidden;

    border: 1px solid rgba(114, 181, 18, 0.2);
    border-radius: 42px 42px 125px 42px;

    background:
        radial-gradient(
            circle at 92% 12%,
            rgba(243, 210, 11, 0.15) 0,
            rgba(243, 210, 11, 0.15) 8%,
            transparent 27%
        ),
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f8fbed 100%
        );

    box-shadow: 0 32px 70px rgba(88, 128, 35, 0.1);
}

.hero-panel::after {
    content: '';
    position: absolute;
    right: -115px;
    bottom: -135px;

    width: 330px;
    height: 330px;

    border: 50px solid rgba(167, 200, 10, 0.09);
    border-radius: 50%;
}

.hero-panel-decoration span {
    position: absolute;
    display: block;
    border-radius: 50%;
}

.hero-panel-decoration span:nth-child(1) {
    top: 45px;
    right: 52px;

    width: 22px;
    height: 22px;

    background: var(--main-yellow);
}

.hero-panel-decoration span:nth-child(2) {
    top: 79px;
    right: 88px;

    width: 8px;
    height: 8px;

    background: var(--main-green);
}

.hero-panel-decoration span:nth-child(3) {
    left: 39px;
    bottom: 46px;

    width: 14px;
    height: 14px;

    border: 3px solid var(--main-lime);
}

.hero-panel-content {
    position: relative;
    z-index: 2;
}

.hero-panel-label {
    margin: 0 0 12px;
    padding: 0;

    font-size: 14px;
    line-height: 1.5;
    font-weight: 700;

    color: var(--main-green-dark);
}

.hero-panel-title {
    display: block;

    font-size: 39px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -0.065em;

    color: #315f13;
}

.hero-panel-text {
    max-width: 470px;
    margin: 15px 0 34px;
    padding: 0;

    font-size: 16px;
    line-height: 1.75;
    letter-spacing: -0.03em;

    color: var(--main-body);
    word-break: keep-all;
}

.hero-values {
    display: grid;
    gap: 11px;
}

.hero-value {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 15px;

    min-height: 72px;
    padding: 12px 18px;

    border: 1px solid #e0e9d6;
    border-radius: 18px;

    background: rgba(255, 255, 255, 0.87);
}

.hero-value-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 13px;
    background: var(--main-soft-green);

    font-size: 13px;
    line-height: 1;
    font-weight: 800;

    color: var(--main-green-dark);
}

.hero-value-text {
    min-width: 0;
}

.hero-value strong {
    display: block;
    margin-bottom: 3px;

    font-size: 17px;
    line-height: 1.4;
    font-weight: 800;

    color: #303b28;
}

.hero-value p {
    margin: 0;
    padding: 0;

    font-size: 14px;
    line-height: 1.5;

    color: #7b8377;
}


/* =========================================================
   QUICK MENU
========================================================= */
.main-quick {
    position: relative;
    z-index: 5;
    margin-top: -76px;
}

.quick-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    overflow: hidden;

    border: 1px solid var(--main-line);
    border-radius: 25px;

    background: #fff;
    box-shadow: 0 22px 48px rgba(62, 92, 31, 0.1);
}

.quick-list li {
    min-width: 0;
}

.quick-list li + li {
    border-left: 1px solid var(--main-line);
}

.quick-list a {
    position: relative;

    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 26px;
    align-items: center;
    gap: 17px;

    min-height: 124px;
    padding: 24px 27px;

    background: #fff;

    transition:
        background 0.22s ease,
        color 0.22s ease;
}

.quick-list a:hover {
    z-index: 2;

    background:
        linear-gradient(
            135deg,
            #7fbc22,
            #5b9f0b
        );

    color: #fff;
}

.quick-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    border-radius: 15px;
    background: var(--main-soft-green);

    font-size: 13px;
    line-height: 1;
    font-weight: 800;

    color: var(--main-green-dark);

    transition:
        background-color 0.22s ease,
        color 0.22s ease;
}

.quick-text {
    min-width: 0;
}

.quick-text strong {
    display: block;
    margin-bottom: 6px;

    font-size: 19px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: -0.045em;
}

.quick-text span {
    display: block;
    min-height: 45px;

    font-size: 15px;
    line-height: 1.5;

    color: #798174;

    white-space: normal;
    word-break: keep-all;
}

.quick-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    font-size: 19px;
    line-height: 1;

    color: #a6af9f;

    transition:
        transform 0.22s ease,
        color 0.22s ease;
}

.quick-list a:hover .quick-number {
    background: rgba(255, 255, 255, 0.19);
    color: #fff;
}

.quick-list a:hover .quick-text span {
    color: rgba(255, 255, 255, 0.84);
}

.quick-list a:hover .quick-arrow {
    color: #fff;
    transform: translateX(4px);
}


/* =========================================================
   INFORMATION
========================================================= */
.main-information {
    padding: 100px 0 115px;
}

.information-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(350px, 0.75fr);

    gap: 35px;
}

.news-panel {
    min-width: 0;
    padding: 42px;

    border: 1px solid var(--main-line);
    border-radius: 30px;

    background: #fff;
}

.main-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;

    margin-bottom: 26px;
}

.section-eyebrow {
    display: block;
    margin-bottom: 8px;

    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.13em;

    color: var(--main-green-dark);
}

.main-page .main-section-head h3,
.main-page .business-heading h3 {
    position: static !important;
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: none !important;

    font-family: inherit !important;
    font-size: 34px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    letter-spacing: -0.06em !important;

    color: #252d25 !important;
    text-align: left !important;
}

.main-page .main-section-head h3::before,
.main-page .main-section-head h3::after,
.main-page .business-heading h3::before,
.main-page .business-heading h3::after {
    content: none !important;
    display: none !important;
}

.section-more,
.business-more {
    display: inline-flex;
    align-items: center;
    gap: 13px;

    flex: 0 0 auto;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;

    color: #687164;
}

.section-more:hover,
.business-more:hover {
    color: var(--main-green-dark);
}


/* 뉴스 탭 */
.news-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 25px;
}

.news-tabs button {
    height: 39px;
    padding: 0 17px;

    border: 1px solid #dfe7da;
    border-radius: 999px;

    background: #fff;

    font-size: 18px;
    line-height: 1;
    color: #707970;

    cursor: pointer;
}

.news-tabs button.active {
    border-color: var(--main-green);
    background: var(--main-green);

    font-weight: 700;
    color: #fff;
}

.news-panel-list {
    display: none;
}

.news-panel-list.active {
    display: block;
}


/* 대표 게시물 */
.news-featured {
    display: grid;
    grid-template-columns: 95px minmax(0, 1fr);
    align-items: center;
    gap: 27px;

    padding: 25px;

    border: 1px solid #e4ecd9;
    border-radius: 21px;

    background:
        linear-gradient(
            135deg,
            #f7fbea,
            #fcfdf8
        );
}

.news-date {
    padding-right: 22px;
    border-right: 1px solid #d6e0ce;
    text-align: center;
}

.news-date strong {
    display: block;

    font-size: 35px;
    line-height: 1;
    font-weight: 800;

    color: var(--main-green-dark);
}

.news-date span {
    display: block;
    margin-top: 7px;

    font-size: 12px;
    line-height: 1.4;

    color: #7a8577;
}

.news-featured-text {
    min-width: 0;
}

.news-category {
    display: block;
    margin-bottom: 7px;

    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;

    color: var(--main-green-dark);
}

.news-featured-text strong {
    display: block;
    overflow: hidden;

    font-size: 20px;
    line-height: 1.5;
    font-weight: 800;
    letter-spacing: -0.045em;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-featured-text p {
    margin: 7px 0 0;
    padding: 0;

    font-size: 14px;
    line-height: 1.6;

    color: #737c72;
}


/* 게시물 목록 */
.news-list {
    margin-top: 18px !important;
}

.news-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    min-height: 48px;

    border-bottom: 1px dashed #e4e7e2;
}

.news-list li:last-child {
    border-bottom: 0;
}

.news-list a {
    position: relative;
    min-width: 0;
    padding-left: 13px;
    overflow: hidden;

    font-size: 18px;
    line-height: 1.5;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-list a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;

    width: 4px;
    height: 4px;

    border-radius: 50%;
    background: var(--main-lime);

    transform: translateY(-50%);
}

.news-list time {
    flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
    font-size: 18px;
    line-height: 1.4;

    color: #999f97;
}


/* =========================================================
   SIDE INFORMATION
========================================================= */
.information-side {
    display: grid;
    gap: 20px;
}

.side-card {
    position: relative;
    min-height: 265px;
    padding: 34px;
    overflow: hidden;

    border-radius: 28px;
}

.side-card-label {
    display: block;
    margin-bottom: 11px;

    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.side-card > strong {
    display: block;

    font-size: 25px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: -0.05em;
}


/* 후원 */
/*
.donation-card {
    border: 1px solid #eee6a8;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(243, 210, 11, 0.36) 0,
            rgba(243, 210, 11, 0.36) 15%,
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #fffdf0,
            #f8f8dd
        );
}
*/
.donation-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #eee6a8;
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(243, 210, 11, 0.36) 0,
            rgba(243, 210, 11, 0.36) 15%,
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #fffdf0,
            #f8f8dd
        );
}

.donation-card::before {
    content: '';
    position: absolute;
    left: -18px;
    bottom: -18px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(167, 200, 10, 0.08);
}

.donation-card::after {
    content: '';
    position: absolute;
    right: 18px;
    top: 18px;
    width: 90px;
    height: 90px;
    opacity: 0.11;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M32 52s-14-8.6-14-20c0-5.4 4.2-9.5 9.5-9.5 3.2 0 5.6 1.6 7 4 1.4-2.4 3.8-4 7-4C46.8 22.5 51 26.6 51 32c0 11.4-14 20-14 20Z' stroke='%23978640' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 40c4.5 0 6.5-2 8.5-5 1.6-2.4 3-4 6.5-4 2.8 0 4.3 1 6 2.5 1.8 1.5 3.8 3 7.5 3 2.3 0 4.3-.5 5.5-1' stroke='%23978640' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.donation-card .side-card-label {
    color: #8b7900;
}

.donation-card p {
    margin: 14px 0 20px;
    padding: 0;

    font-size: 15px;
    line-height: 1.7;

    color: #706f5d;
    word-break: keep-all;
}

.donation-account {
    padding: 15px 17px;

    border: 1px solid rgba(151, 141, 64, 0.14);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.78);
}

.donation-account span,
.donation-account em {
    display: block;

    font-size: 15px;
    line-height: 1.4;
    font-style: normal;

    color: #8a8876;
}

.donation-account strong {
    display: block;
    margin: 5px 0;

    font-size: 17px;
    line-height: 1.4;
    font-weight: 800;

    color: #4b4b3e;
}

.donation-card > a {
    display: inline-flex;
    align-items: center;
    gap: 20px;

    margin-top: 20px;

    font-size: 14px;
    line-height: 1.4;
    font-weight: 800;

    color: #716500;
}


/* 상담 */
/*
.contact-card {
    background:
        radial-gradient(
            circle at 100% 100%,
            rgba(243, 210, 11, 0.14) 0,
            rgba(243, 210, 11, 0.14) 17%,
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #66aa10,
            #438300
        );

    color: #fff;
}
*/
.contact-card {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 100% 100%,
            rgba(243, 210, 11, 0.14) 0,
            rgba(243, 210, 11, 0.14) 17%,
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #66aa10,
            #438300
        );
    color: #fff;
}

.contact-card::before {
    content: '';
    position: absolute;
    right: -30px;
    bottom: -30px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.contact-card::after {
    content: '';
    position: absolute;
    right: 22px;
    bottom: 18px;
    width: 110px;
    height: 110px;
    opacity: 0.14;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M22 46c-6 0-10-4-10-10V20c0-6 4-10 10-10h20c6 0 10 4 10 10v16c0 6-4 10-10 10H30l-8 8v-8Z' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M25 24h14M25 31h10' stroke='white' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M44 18c2.8 0 5 2.2 5 5' stroke='white' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M42.5 22.5c0 5.8-4.7 10.5-10.5 10.5' stroke='white' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.contact-card .side-card-label {
    color: #fff178;
}

.contact-number {
    display: inline-block;
    margin: 13px 0 19px;

    font-size: 34px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.035em;

    color: #fff;
}

.contact-info {
    display: grid;
    gap: 8px;
}

.contact-info > div {
    display: grid;
    grid-template-columns: 75px minmax(0, 1fr);
    gap: 12px;

    font-size: 16px;
    line-height: 1.5;
}

.contact-info dt {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.96);
}

.contact-info dd {
    color: rgba(255, 255, 255, 0.78);
}


/* =========================================================
   BUSINESS
========================================================= */
.main-business {
    padding: 105px 0 115px;

    background:
        linear-gradient(
            180deg,
            #f7f9f4,
            #f3f7ed
        );
}

.business-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;

    margin-bottom: 38px;
}

.business-heading p {
    margin: 12px 0 0;
    padding: 0;

    font-size: 16px;
    line-height: 1.65;

    color: var(--main-body);
}

.business-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.business-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 285px;
    padding: 30px;
    overflow: hidden;

    border: 1px solid var(--main-line);
    border-radius: 26px;

    background: #fff;

    transition:
        transform 0.24s ease,
        box-shadow 0.24s ease,
        border-color 0.24s ease;
}

.business-card::after {
    content: '';
    position: absolute;
    right: -55px;
    bottom: -75px;

    width: 160px;
    height: 160px;

    border: 26px solid rgba(167, 200, 10, 0.08);
    border-radius: 50%;
}

.business-card:hover {
    z-index: 2;

    border-color: #bed89f;

    transform: translateY(-9px);
    box-shadow: 0 22px 42px rgba(81, 123, 34, 0.12);
}

.business-index {
    position: absolute;
    top: 25px;
    right: 27px;

    font-size: 12px;
    line-height: 1;
    font-weight: 800;

    color: #a6ada2;
}

.business-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 61px;
    height: 61px;
    margin-bottom: 25px;

    border-radius: 18px;
    background: var(--main-soft-green);

    color: var(--main-green-dark);
}

.business-icon svg {
    width: 34px;
    height: 34px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.business-card > strong {
    display: block;
    margin-bottom: 12px;

    font-size: 20px;
    line-height: 1.45;
    font-weight: 700;
    letter-spacing: -0.05em;
}

.business-card > p {
    margin: 0;
    padding: 0;

    font-size: 16px;
    line-height: 1.75;

    color: #727b71;
    word-break: keep-all;
}

.business-arrow {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;
    margin-top: auto;

    border-radius: 50%;
    background: var(--main-soft-green);

    font-size: 16px;
    line-height: 1;

    color: var(--main-green-dark);

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.business-card:hover .business-arrow {
    background: var(--main-green);
    color: #fff;
    transform: translateX(4px);
}


/* =========================================================
   TABLET
========================================================= */
@media (max-width: 1180px) {
    .hero-layout {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(450px, 1.1fr);

        gap: 50px;
    }

    .hero-panel {
        padding: 45px 38px;
    }

    .information-layout {
        grid-template-columns:
            minmax(0, 1.45fr)
            minmax(330px, 0.75fr);
    }

    .business-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 1050px) {
    .quick-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quick-list li + li {
        border-left: 0;
    }

    .quick-list li:nth-child(even) {
        border-left: 1px solid var(--main-line);
    }

    .quick-list li:nth-child(-n + 2) {
        border-bottom: 1px solid var(--main-line);
    }
}


/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 900px) {
    .main-inner {
        width: min(calc(100% - 36px), 720px);
    }

    .hero-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .main-page h2.hero-title {
        font-size: 46px !important;
    }

    .hero-description {
        font-size: 17px;
    }

    .hero-panel {
        min-height: auto;
        padding: 38px 30px;

        border-radius: 30px 30px 90px 30px;
    }

    .hero-panel-title {
        font-size: 32px;
    }

    .information-layout {
        grid-template-columns: 1fr;
    }

    .information-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 640px) {
    .main-inner {
        width: calc(100% - 28px);
    }

    .hero-eyebrow {
        font-size: 11px;
    }

    .main-page h2.hero-title {
        font-size: 37px !important;
        line-height: 1.2 !important;
    }

    .hero-title strong::after {
        bottom: 2px;
        height: 10px;
    }

    .hero-description {
        margin-top: 20px;

        font-size: 15px;
        line-height: 1.8;

        word-break: normal;
    }

    .hero-buttons {
        margin-top: 27px;
    }

    .hero-button {
        flex: 1 1 100%;
        width: 100%;
    }

    .hero-panel {
        padding: 30px 22px;
    }

    .hero-panel-title {
        font-size: 27px;
    }

    .hero-panel-text {
        margin-bottom: 26px;
        font-size: 14px;
    }

    .hero-value {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 12px;
        padding: 11px 13px;
    }

    .hero-value p {
        display: none;
    }

    .hero-value strong {
        font-size: 15px;
    }


    /* 퀵메뉴 */
    .main-quick {
        margin-top: -58px;
    }

    .quick-list {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .quick-list li,
    .quick-list li:nth-child(even) {
        border-left: 0;
        border-bottom: 1px solid var(--main-line);
    }

    .quick-list li:last-child {
        border-bottom: 0;
    }

    .quick-list a {
        min-height: 90px;
        padding: 17px 18px;
    }

    .quick-text strong {
        font-size: 16px;
    }

    .quick-text span {
        font-size: 12px;
    }


    /* 센터소식 */
    .main-information {
        padding: 72px 0 80px;
    }

    .news-panel {
        padding: 25px 19px;
        border-radius: 22px;
    }

    .main-section-head {
        align-items: center;
    }

    .main-page .main-section-head h3,
    .main-page .business-heading h3 {
        font-size: 28px !important;
    }

    .section-more,
    .business-more {
        font-size: 12px;
    }

    .news-tabs {
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .news-tabs button {
        flex: 0 0 auto;
    }

    .news-featured {
        grid-template-columns: 67px minmax(0, 1fr);
        gap: 17px;
        padding: 18px 15px;
    }

    .news-date {
        padding-right: 15px;
    }

    .news-date strong {
        font-size: 29px;
    }

    .news-featured-text strong {
        font-size: 16px;
    }

    .news-featured-text p {
        display: none;
    }

    .news-list li {
        gap: 12px;
    }

    .news-list a {
        font-size: 14px;
    }

    .news-list time {
        font-size: 11px;
    }


    /* 후원 및 상담 */
    .information-side {
        grid-template-columns: 1fr;
    }

    .side-card {
        min-height: auto;
        padding: 27px 23px;

        border-radius: 22px;
    }

    .side-card > strong {
        font-size: 22px;
    }

    .contact-number {
        font-size: 29px;
    }


    /* 주요사업 */
    .main-business {
        padding: 75px 0 80px;
    }

    .business-heading {
        align-items: flex-start;
        margin-bottom: 28px;
    }

    .business-heading p {
        font-size: 14px;
    }

    .business-more {
        display: none;
    }

    .business-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .business-card {
        min-height: 245px;
        padding: 25px;

        border-radius: 22px;
    }
}
@media (max-width: 640px) {
    .contact-card::after {
        width: 78px;
        height: 78px;
        right: 14px;
        bottom: 14px;
        opacity: 0.10;
    }

    .donation-card::after {
        width: 64px;
        height: 64px;
        right: 14px;
        top: 14px;
        opacity: 0.09;
    }
}