/**
 * 서브페이지 스타일
 * 강원대학교 발전기금재단
 * @since 2025.12.30
 */

/* S-Core Dream 폰트 - @font-face만 사용 (@import로 .woff 직접 불러오기 불가) */
@font-face {
    font-family: 'S-Core Dream';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'S-Core Dream';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

/* =====================================================
   공통 서브페이지 스타일
   ===================================================== */

/* 공통 텍스트 색상 클래스 */
.text-green {
    color: #018f5e;
}

.text-orange {
    color: #f5a623;
}

.text-blue-bold {
    color: #0068c9;
    font-size: 20px;
    font-weight: 700;
}

/* 서브 헤더 영역 (전체 너비) */
.sub-header-wrapper {
    width: 100%;
    background: #fff;
}

.sub-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px 0 0 0;
}

.sub-header-inner h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    font-weight: 700;
    color: #242b57;
    margin: 0 0 10px 0;
    padding-top: 10px;
    border-top: 2px solid #101743;
}

/* 서브 컨텐츠 영역 */
.sub-content-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: calc(100vh - 200px);
    /* background-color: #f9f9f9; */
	margin-top: 20px;
}

.sub-content-area {
    flex: 1;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 0;
}

.sub-title-icon {
    vertical-align: middle;
}

.title-divider {
    color: #d3d3d3;
    font-weight: 300;
    margin: 0 20px 0 114px;
}

.sub-title-text {
    font-size: 24px;
    color: #333333;
    font-weight: 400;
}

.sub-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    font-size: 14px !important;
    color: #636c7d;
	border-top: 1px solid #d3d3d3;
}

.sub-breadcrumb a,
.sub-breadcrumb span {
    color: #636c7d;
    font-size: 14px;
    text-decoration: none;
}

.sub-breadcrumb a:hover {
    color: #242b57;
}

.sub-breadcrumb a:last-child {
    color: #333;
}

.sub-breadcrumb img {
    width: 16px;
    height: 16px;
}

.sub-breadcrumb i {
    color: #797e88;
    font-size: 16px;
}

.sub-content-body {
    line-height: 1.8;
    color: #333;
}

/* =====================================================
   이사장 인사말 (sub01a)
   ===================================================== */
.greeting-section {
    display: flex;
    gap: 50px;
    align-items: flex-start;
    padding: 20px 0;
}

.greeting-content {
    flex: 2;
    min-width: 0;
}

.greeting-quote {
    margin-bottom: 25px;
}

.greeting-quote img {
    width: 40px;
    height: auto;
}

.greeting-title-wrap {
    position: relative;
    text-align: center;
    padding: 30px;
}

.greeting-title-wrap .quote-open {
    position: absolute;
    top: 30px;
    left: 0px;
    width: 50px;
    height: auto;
}

.greeting-title-wrap .quote-close {
    position: absolute;
    top: 30px;
    right: 0px;
    width: 50px;
    height: auto;
}

.greeting-title-wrap .quote-open2 {
    position: absolute;
    top: 30px;
    left: 70px;
    width: 50px;
    height: auto;
}

.greeting-title-wrap .quote-close2 {
    position: absolute;
    top: 30px;
    right: 70px;
    width: 50px;
    height: auto;
}

.greeting-title {
    font-size: 30px;
    font-weight: 700;
    color: #333;
    line-height: 1.6;
    margin-bottom: 30px;
    word-break: keep-all;
    text-align: center;
}

.greeting-text {
    font-size: 16px;
    color: #555;
    line-height: 1.9;
    margin-bottom: 20px;
    word-break: keep-all;
    text-align: justify;
}

.greeting-signature {
    margin-top: 40px;
    text-align: left;
}

.greeting-signature .position {
    font-size: 16px;
    color: #333;
    font-weight: 600;
    margin-bottom: 5px;
}

.greeting-signature .name {
    font-size: 30px;
    font-weight: 700;
    color: #333;
}

.greeting-image {
    flex-shrink: 0;
    width: 526px;
    max-width: 100%;
    padding-top: 30px;
}

.greeting-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: none;
}

/* =====================================================
   사업소개 (sub01b)
   ===================================================== */

/* 탭 메뉴 (Bootstrap 5 오버라이드) */
.business-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border: none;
    border-bottom: 1px solid #ddd;
}

.business-tabs .nav-item {
    flex: none;
}

.business-tabs .tab-btn {
    padding: 12px 25px 12px 5px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-size: 24px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
}

.business-tabs .tab-btn.active {
    color: #2e7d32;
    border-bottom: 2px solid #2e7d32;
    background: transparent;
}

.business-tabs .tab-btn:hover:not(.active) {
    color: #333;
}

/* 탭 컨텐츠 */
.business-section .tab-content {
    padding-top: 30px;
}

/* 섹션 제목 (점선 하단 테두리) */
.section-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    padding: 10px 0;
    margin-top: 30px;
    margin-bottom: 15px;
    border-bottom: 1px dashed #ccc;
    background: transparent;
}

h3.section-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	font-size: 20px;
	font-weight: 700;
}

h3.section-title::before {
    content: "";
    width: 8px;
    height: 8px;
    background-color: #797e88;
    margin-bottom: 8px;
    box-shadow: 12px 0 0 #018f5e;
}

.tab-pane > .section-title:first-child {
    margin-top: 0;
}

/* 회색 배경 섹션 박스 (전체 너비) */
.section-box-gray {
    background-color: #f9f9f9;
    padding: 20px calc((100vw - 1400px) / 2);
    margin-left: calc((100vw - 1400px) / -2);
    margin-right: calc((100vw - 1400px) / -2);
    margin-bottom: 20px;
    width: 100vw;
}

.section-box-gray .section-title:first-child {
    margin-top: 0;
}

/* 항목 그룹 */
.item-group {
    margin-bottom: 20px;
}

.item-group .item-title {
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    color: #333;
    padding: 8px 15px;
}

.item-group .item-desc {
    padding-left: 15px;
    color: #333;
    line-height: 1.8;
}

.item-group .item-desc li {
    margin-bottom: 5px;
    list-style: none;
}

/* 장학금 항목 컨테이너 (2열 그리드) */
.item-group-horizontal-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

/* 장학금 항목 그룹 (좌우 레이아웃) */
.item-group-horizontal {
    display: flex;
    align-items: stretch;
}

.item-group-horizontal .item-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    min-width: 220px;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    background-color: #0a9c6a;
    padding: 12px 15px;
    border-radius: 5px 0 0 5px;
    margin: 0;
    text-align: center;
}

.item-group-horizontal .item-desc {
    flex: 1;
    background-color: #fff;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-left: none;
    border-radius: 0 3px 3px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.item-group-horizontal .item-desc li {
    margin-bottom: 2px;
    list-style: none;
    font-size: 16px;
    line-height: 1.6;
    padding-left: 12px;
    text-indent: -12px;
    letter-spacing: -0.12em;
}

.item-group-horizontal .item-desc li::before {
    content: "·";
    margin-right: 5px;
    color: #333;
}

/* 재단 정보 박스 */
.foundation-box {
    margin-top: 30px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    background: #fff;
}

.foundation-box .foundation-header {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: #edf3fa;
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.foundation-box .foundation-header .icon img {
    width: 100%;
    height: auto;
}

.foundation-box .foundation-header .header-text {
    flex: 1;
}

.foundation-box .foundation-header .title {
    font-size: 20px;
    font-weight: 600;
    color: #101743;
    margin-bottom: 5px;
}

.foundation-box .foundation-header .desc {
    font-size: 16px;
    color: #333;
    line-height: 1.5;
}

.foundation-box .foundation-body {
    padding: 20px;
}

.foundation-box .foundation-body .info-highlight {
    margin-bottom: 15px;
    padding: 15px;
    border-bottom: 1px solid #eee;
    background: #f9f7fc;
}

.foundation-box .foundation-body .info-highlight p {
    margin-bottom: 5px;
    color: #0068c9;
    font-size: 16px;
    line-height: 1.6;
}

.foundation-box .foundation-body .info-highlight p::before {
    content: "·";
    margin-right: 8px;
    color: #1976d2;
}

.foundation-box .foundation-body .info-detail p {
    margin-bottom: 5px;
    color: #333;
    font-size: 16px;
    line-height: 1.8;
}

/* =====================================================
   오시는 길 (sub01e)
   ===================================================== */

/* 교통편 섹션 */
.traffic-section {
    margin-bottom: 30px;
}

.traffic-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 600;
    color: #333;
    padding-bottom: 15px;
    border-bottom: 2px solid #333;
    margin-bottom: 0;
}

.traffic-title .traffic-icon {
    width: 33px;
    height: 29px;
}

.traffic-title .traffic-text {
    font-size: 20px;
    color: #333;
    line-height: 29px;
    padding-top: 3px;
}

/* 교통편 테이블 */
.traffic-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.traffic-table th,
.traffic-table td {
    padding: 20px 15px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 16px;
    line-height: 1.6;
    vertical-align: top;
}

.traffic-table th {
    width: 180px;
    font-size: 18px;
    font-weight: 500;
    color: #333;
    text-align: left;
    background: transparent;
}

.traffic-table td {
    color: #555;
}

/* =====================================================
   기부방법 안내 (sub08e)
   ===================================================== */

/* 기부 안내 섹션 */
.donation-guide-section {
    padding: 20px 0;
}

.donation-guide-row {
    display: flex;
    gap: 20px;
    padding: 10px 20px;
    align-items: stretch;
    background: linear-gradient(45deg, #ededed, #f9f9f9);
}

/* 왼쪽 이미지 영역 */
.donation-guide-image {
    flex: 0 0 857px;
    max-width: 857px;
}

.donation-guide-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* 오른쪽 내용 영역 */
.donation-guide-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.donation-guide-text {
    font-size: 16px;
    color: #555;
    line-height: 1.9;
    margin-bottom: 30px;
    word-break: keep-all;
}

/* 버튼 영역 */
.donation-guide-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.btn-donation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 15px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    min-height: 50px;
    text-align: center;
}

.btn-donation span {
    text-align: center;
}

.btn-donation i {
    font-size: 18px;
}

.btn-donation-primary {
    background-color: #101743;
    color: #fff;
    border: 1px solid #101743;
}

.btn-donation-primary:hover {
    background-color: #242b57;
    border-color: #242b57;
    color: #fff;
}

.btn-donation-secondary {
    background-color: #101743;
    color: #fff;
    border: 1px solid #101743;
}

.btn-donation-secondary:hover {
    background-color: #242b57;
    border-color: #242b57;
    color: #fff;
}

/* 기금 사용처 섹션 */
.fund-usage-section {
    padding: 40px 0;
}

.fund-usage-section + .fund-usage-section {
    border-top: 1px solid #d9d9d9;
}

.fund-usage-header {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 30px;
}

.fund-usage-icon {
    flex-shrink: 0;
}

.fund-usage-icon img {
    width: 80px;
    height: auto;
}

.fund-usage-title {
    flex: 1;
}

.fund-usage-title h3 {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin: 0 0 15px 0;
}

.fund-usage-desc {
    font-size: 16px;
    color: #333;
    line-height: 1.8;
    margin-bottom: 15px;
}

.fund-usage-highlight {
    font-size: 18px;
    color: #018f5e;
    font-weight: 500;
    margin: 0;
}

/* 카드 영역 */
.fund-usage-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-left: 100px; /* 아이콘(80px) + gap(20px) */
}

.fund-usage-card {
    background: #fff;
    overflow: hidden;
}

.fund-usage-card-img {
    width: 100%;
    aspect-ratio: 255 / 131;
    overflow: hidden;
}

.fund-usage-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fund-usage-card-content {
    padding: 20px;
}

.fund-usage-card-content h4 {
    font-size: 18px;
    font-weight: 500;
    color: #018f5e;
    margin: 0 0 10px 0;
}

.fund-usage-card-content p {
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    margin: 0;
}

/* =====================================================
   아침천사 캠페인 (sub08c)
   ===================================================== */

/* 아침천사 섹션 */
.morning-angel-section {
    margin: 0;
}

/* 히어로 영역 */
.morning-angel-hero {
    position: relative;
    width: 100%;
}

.morning-angel-hero-bg {
    width: 100%;
}

.morning-angel-hero-bg img {
    width: 100%;
    height: auto;
    display: block;
}

/* 왼쪽 반투명 박스 */
.morning-angel-hero-box {
    position: absolute;
    top: 0;
    bottom: 6px;
    left: 70px;
    background: rgba(217, 217, 217, 0.9);
    padding: 30px 40px;
    width: 550px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.hero-subtitle {
    font-family: 'S-Core Dream', sans-serif !important;
    font-size: 45px;
	font-weight: 300;
    color: #101743;
    margin-bottom: 5px;
}

.hero-title {
    font-family: 'S-Core Dream', sans-serif !important;
    font-size: 45px;
    font-weight: 300;
    color: #101743;
    margin-bottom: 15px;
}

.hero-title .text-orange {
    font-family: 'S-Core Dream', sans-serif !important;
    color: #101743;
    font-weight: 700;
	font-size: 45px;
}

.hero-desc {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    line-height: 1.8;
}

/* 히어로 스텝 목록 */
.hero-steps {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.hero-steps li {
    font-size: 16px;
    color: #333;
    line-height: 1.8;
}

.hero-steps li strong,
.hero-steps strong {
    font-weight: 700;
}

/* 히어로 버튼 */
.hero-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.btn-angel {
    flex: 1;
    display: inline-block;
    padding: 12px 25px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    text-align: center;
}

.btn-angel-primary {
    background-color: #101743;
    color: #fff;
    border: 1px solid #101743;
}

.btn-angel-primary:hover {
    background-color: #242b57;
    border-color: #242b57;
    color: #fff;
}

.btn-angel-secondary {
    background-color: #101743;
    color: #fff;
    border: 1px solid #101743;
}

.btn-angel-secondary:hover {
    background-color: #242b57;
    border-color: #242b57;
    color: #fff;
}

/* 히어로 연락처 */
.hero-contact {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.hero-contact p {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    margin: 0;
    line-height: 1.6;
}

.hero-contact .text-green {
    font-size: 18px;
}

/* 하단 설명 영역 */
.morning-angel-info {
    padding: 40px 0;
}

.morning-angel-info + .morning-angel-info {
    border-top: 1px solid #d9d9d9;
}

.info-question h3 {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 15px;
}

.info-content {
    display: flex;
    gap: 40px;
    align-items: center;
}

.info-text {
    flex: 1;
}

.info-highlight {
    font-size: 16px;
    color: #333;
    line-height: 1.8;
    margin-bottom: 15px;
}

.info-highlight .text-green {
    color: #018f5e;
    font-weight: 500;
}

.info-highlight .text-green-medium {
    font-size: 18px;
    font-weight: 500;
    color: #018f5e;
}

.info-desc {
    font-size: 16px;
    color: #555;
    line-height: 1.8;
}

/* 캐릭터 이미지 섹션 (하단 분리) */
.info-character-section {
    margin-top: 30px;
}

.info-character-section img {
    max-width: 100%;
    height: auto;
}

/* 섹션 구분선 */
.section-divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 0;
}

/* =====================================================
   강대만세 프로젝트 (sub08b)
   ===================================================== */

/* 강대만세 섹션 */
.kangdae-manse-section {
    margin: 0;
}

/* 히어로 영역 - 좌우 레이아웃 */
.kangdae-manse-hero {
    display: flex;
    gap: 0;
    align-items: stretch;
}

/* 왼쪽 이미지 영역 */
.kangdae-manse-hero-image {
    flex: 0 0 50%;
    max-width: 50%;
}

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

/* 오른쪽 콘텐츠 박스 */
.kangdae-manse-hero-box {
    flex: 0 0 50%;
    max-width: 50%;
    background: rgba(217, 217, 217, 0.9);
    padding: 40px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.kangdae-manse-hero-box .hero-subtitle {
    font-family: 'S-Core Dream', sans-serif !important;
    font-size: 45px;
    font-weight: 300;
    color: #101743;
    margin-bottom: 5px;
}

.kangdae-manse-hero-box .hero-title {
    font-family: 'S-Core Dream', sans-serif !important;
    font-size: 45px;
    font-weight: 300;
    color: #101743;
    margin-bottom: 15px;
}

.kangdae-manse-hero-box .hero-title .text-highlight {
    font-family: 'S-Core Dream', sans-serif !important;
    color: #101743;
    font-weight: 700;
    font-size: 45px;
}

.kangdae-manse-hero-box .hero-desc {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    line-height: 1.8;
}

.kangdae-manse-hero-box .hero-steps {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.kangdae-manse-hero-box .hero-steps li {
    font-size: 16px;
    color: #333;
    line-height: 1.8;
}

.kangdae-manse-hero-box .hero-steps li strong {
    font-weight: 700;
}

.kangdae-manse-hero-box .hero-steps-text {
    font-size: 16px;
    color: #333;
    line-height: 1.8;
    margin: 15px 0;
}

.kangdae-manse-hero-box .hero-steps-text strong {
    font-weight: 700;
}

/* 강대만세 버튼 */
.kangdae-manse-hero-box .hero-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.btn-manse {
    flex: 1;
    display: inline-block;
    padding: 12px 25px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    text-align: center;
}

.btn-manse-primary {
    background-color: #101743;
    color: #fff;
    border: 1px solid #101743;
}

.btn-manse-primary:hover {
    background-color: #242b57;
    border-color: #242b57;
    color: #fff;
}

.btn-manse-secondary {
    background-color: #101743;
    color: #fff;
    border: 1px solid #101743;
}

.btn-manse-secondary:hover {
    background-color: #242b57;
    border-color: #242b57;
    color: #fff;
}

/* 강대만세 연락처 */
.kangdae-manse-hero-box .hero-contact {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.kangdae-manse-hero-box .hero-contact p {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    margin: 0;
    line-height: 1.6;
}

.kangdae-manse-hero-box .hero-contact .text-green {
    font-size: 18px;
}

/* 강대만세 하단 설명 영역 */
.kangdae-manse-info {
    padding: 40px 0;
}

.kangdae-manse-info + .kangdae-manse-info {
    border-top: 1px solid #d9d9d9;
}

.kangdae-manse-info .info-question h3 {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 15px;
}

.kangdae-manse-info .info-content {
    display: flex;
    gap: 40px;
    align-items: center;
}

.kangdae-manse-info .info-text {
    flex: 1;
}

.kangdae-manse-info .info-highlight {
    font-size: 16px;
    color: #333;
    line-height: 1.8;
    margin-bottom: 15px;
}

/* =====================================================
   기부참여 안내 (sub02a)
   ===================================================== */

.donation-participation-section {
    padding: 20px 0;
}

.donation-participation-title {
    font-size: 30px !important;
    font-weight: 300 !important;
    color: #333;
    margin: 0 0 20px 0;
}

.donation-method-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.donation-method-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 25px 20px;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    border-left: none;
    border-right: none;
    background: transparent;
    margin-bottom: -1px;
}

/* 전체 폭 배경색 카드 */
.donation-method-card-gray {
    background: #f9f9f9;
    margin-left: calc((100vw - 1400px) / -2);
    margin-right: calc((100vw - 1400px) / -2);
    padding-left: calc((100vw - 1400px) / 2 + 20px);
    padding-right: calc((100vw - 1400px) / 2 + 20px);
}

.donation-method-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d3d3d3;
    border-radius: 5px;
    padding: 10px;
}

.donation-method-icon img {
    width: auto;
    height: auto;
}

.donation-method-content {
    flex: 1;
    min-width: 0;
}

.donation-method-title {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin: 0 0 8px 0;
}

.donation-method-desc {
    font-size: 16px;
    color: #555;
    line-height: 1.7;
    margin: 0 0 10px 0;
}

.donation-method-address {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    margin: 0 0 10px 0;
}

.donation-method-contact {
    margin: 0;
}

.donation-method-contact a {
    font-size: 18px;
    font-weight: 600;
    color: #018f5e;
    text-decoration: none;
}

.donation-method-contact a:hover {
    text-decoration: underline;
}

.btn-donation-method {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    background-color: #101743;
    border: 1px solid #101743;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-donation-method:hover {
    background-color: #242b57;
    border-color: #242b57;
    color: #fff;
}

/* =====================================================
   반응형 스타일
   ===================================================== */
@media (max-width: 992px) {
    /* 공통 */
    .sub-content-area {
        padding: 20px 15px;
    }

    .sub-content-header h2 {
        font-size: 24px;
    }

    /* 이사장 인사말 */
    .greeting-section {
        flex-direction: column-reverse;
        gap: 30px;
    }

    .greeting-image {
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
    }

    .greeting-title-wrap {
        padding: 20px;
    }

    .greeting-title-wrap .quote-open,
    .greeting-title-wrap .quote-close {
        width: 30px;
        left: 5px;
        right: 5px;
    }

    .greeting-title {
        font-size: 20px;
    }

    .greeting-text {
        font-size: 15px;
    }

    /* 기부방법 안내 반응형 */
    .donation-guide-row {
        flex-direction: column;
        gap: 30px;
    }

    .donation-guide-image {
        flex: 1 1 100%;
        max-width: 100%;
        width: 100%;
    }

    .donation-guide-buttons {
        flex-direction: column;
    }

    .btn-donation {
        width: 100%;
    }

    /* 기금 사용처 반응형 */
    .fund-usage-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .fund-usage-icon img {
        width: 60px;
    }

    .fund-usage-highlight {
        text-align: left;
    }

    .fund-usage-cards {
        grid-template-columns: 1fr;
        margin-left: 0;
    }

    /* 아침천사 캠페인 반응형 */
    .morning-angel-hero {
        display: flex;
        flex-direction: column;
    }

    .morning-angel-hero-box {
        position: static;
        width: 100%;
        height: auto;
        left: 0;
        padding: 25px 20px;
        order: 1;
    }

    .morning-angel-hero-bg {
        order: 0;
    }

    .hero-subtitle {
        font-size: 26px;
        font-weight: 300;
    }

    .hero-title {
        font-size: 26px;
        font-weight: 300;
    }

    .hero-title .text-orange {
        font-size: 26px;
        font-weight: 700;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .btn-angel {
        width: 100%;
        text-align: center;
    }

    .info-content {
        flex-direction: column;
        text-align: center;
    }

    .info-character-section img {
        width: 100%;
    }

    /* 강대만세 프로젝트 반응형 */
    .kangdae-manse-hero {
        flex-direction: column;
    }

    .kangdae-manse-hero-image {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .kangdae-manse-hero-box {
        flex: 1 1 100%;
        max-width: 100%;
        padding: 25px 20px;
    }

    .kangdae-manse-hero-box .hero-subtitle {
        font-size: 26px;
        font-weight: 300;
    }

    .kangdae-manse-hero-box .hero-title {
        font-size: 26px;
        font-weight: 300;
    }

    .kangdae-manse-hero-box .hero-title .text-highlight {
        font-size: 26px;
        font-weight: 700;
    }

    .kangdae-manse-hero-box .hero-buttons {
        flex-direction: column;
    }

    .btn-manse {
        width: 100%;
        text-align: center;
    }

    .kangdae-manse-info .info-content {
        flex-direction: column;
        text-align: center;
    }

    /* 기부참여 안내 반응형 */
    .donation-method-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px 15px;
    }

    .donation-method-icon {
        width: 60px;
        height: 60px;
    }

    .donation-method-content {
        width: 100%;
    }

    .btn-donation-method {
        width: 100%;
        text-align: center;
    }

    .donation-method-card-gray {
        margin-left: -15px;
        margin-right: -15px;
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* =====================================================
   온라인 약정하기 (yak_in25) 스타일
   ===================================================== */

/* Placeholder 스타일 */
.table-responsive input::placeholder {
    color: #555;
    font-size: 16px;
}

/* 모바일 레이아웃 */
@media all and (max-width: 767px) {
    .moLeft {
        text-align: left;
    }
    .moPed {
        padding: 2px 10px;
    }
    .moPed2 {
        padding: 2px 20px;
    }
}

/* 태블릿/데스크톱 레이아웃 */
@media all and (min-width: 768px) {
    .moLeft {
        text-align: center;
    }
}

/* =====================================================
   온라인 약정 폼 (yak_in25) 스타일
   ===================================================== */

.yak-form-container {
    font-size: 16px;
}

.yak-section-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.yak-required-note {
    font-size: 16px;
    color: #dc3545;
    font-weight: normal;
}

.yak-section {
    padding: 20px;
    margin-bottom: 20px;
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
    /* 전체 폭 배경 적용 */
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
}

.yak-section-personal {
    background: #f9f9f9;
}

.yak-section-agreement {
    background: #f9f7fc;
}

.yak-form-row {
    display: flex;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid #d9d9d9;
}

.yak-form-row:last-child {
    border-bottom: none;
}

.yak-form-label {
    width: 180px;
    min-width: 180px;
    font-weight: 600;
    padding-top: 8px;
    font-size: 16px;
}

.yak-form-label .required {
    color: #dc3545;
    font-size: 10px;
    margin-left: 3px;
}

.yak-form-content {
    flex: 1;
}

.yak-form-content .form-control {
    font-size: 16px;
}

.yak-form-content .form-select {
    font-size: 16px;
}

.yak-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    padding-top: 8px;
}

.yak-radio-group .form-check {
    margin: 0;
}

.yak-radio-group .form-check-input {
    margin-top: 0.25em;
}

.yak-radio-group .form-check-label {
    font-size: 16px;
    cursor: pointer;
}

.yak-sub-inputs {
    margin-top: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 5px;
}

.yak-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.yak-input-group .form-control {
    flex: 1;
}

.yak-input-group .separator {
    color: #6c757d;
}

.yak-bank-info {
    margin-top: 10px;
    padding: 10px;
    background: #fff3cd;
    border-radius: 5px;
    font-size: 16px;
}

.yak-privacy-item {
    padding: 10px 0;
    cursor: pointer;
    font-size: 16px;
}

.yak-privacy-item:hover {
    color: #0d6efd;
}

.yak-privacy-content {
    display: none;
    margin-top: 10px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #fff;
}

.yak-privacy-agree {
    background: #f1f1f1;
    padding: 15px;
    border-radius: 5px;
    margin-top: 10px;
}

.yak-submit-section {
    text-align: center;
    padding: 30px 0;
}

.yak-submit-section .recipient {
    font-size: 24px;
    margin-bottom: 20px;
}

/* 우편번호 검색 버튼 */
.btn-zip-search {
    background-color: #7fb3e3;
    color: #fff;
    border: 1px solid #7fb3e3;
}

.btn-zip-search:hover {
    background-color: #6aa3d3;
    border-color: #6aa3d3;
    color: #fff;
}

/* 약정신청 버튼 */
.btn-yak-submit {
    background-color: #242b57;
    color: #fff;
    border: 1px solid #242b57;
    font-size: 20px;
}

.btn-yak-submit:hover {
    background-color: #1a2045;
    border-color: #1a2045;
    color: #fff;
}

/* 약정 폼 반응형 */
@media (max-width: 768px) {
    .yak-form-row {
        flex-direction: column;
    }

    .yak-form-label {
        width: 100%;
        min-width: 100%;
        padding-bottom: 8px;
    }

    .yak-input-group {
        flex-wrap: wrap;
    }
}

/* =====================================================
   기부자 예우안내 (sub03a)
   ===================================================== */

.benefit-section {
    padding: 20px 0;
}

.benefit-title {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    padding-bottom: 15px;
    margin-bottom: 30px;
    border-bottom: 2px solid #333;
}

.benefit-card {
    display: flex;
    border-bottom: 1px solid #e5e5e5;
}

.benefit-card:first-of-type {
    border-top: 1px solid #e5e5e5;
}

.benefit-amount {
    flex: 0 0 150px;
    padding: 20px 15px;
    font-size: 20px;
    font-weight: 700;
    color: #333;
    background-color: #f8f9fa;
    display: flex;
    align-items: flex-start;
}

.benefit-content {
    flex: 1;
    padding: 20px;
}

.benefit-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.benefit-badge {
    display: inline-block;
    padding: 8px 15px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    background-color: #101743;
    border-radius: 20px;
}

.benefit-item {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.6;
}

.benefit-group {
    margin-bottom: 12px;
}

.benefit-group:last-child {
    margin-bottom: 0;
}

.benefit-subtitle {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    margin-bottom: 5px;
}

.benefit-detail {
    font-size: 16px;
    color: #666;
    margin-bottom: 3px;
    padding-left: 5px;
    line-height: 1.5;
}

.benefit-notice {
    margin-top: 20px;
    font-size: 13px;
    color: #888;
}

/* 기부자 예우안내 반응형 - 태블릿 */
@media (max-width: 991px) {
    .benefit-amount {
        flex: 0 0 120px;
        font-size: 14px;
    }
}

/* 기부자 예우안내 반응형 - 모바일 */
@media (max-width: 767px) {
    .benefit-section {
        padding: 15px 0;
    }

    .benefit-title {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .benefit-card {
        flex-direction: column;
    }

    .benefit-amount {
        flex: none;
        width: 100%;
        padding: 12px 15px;
        font-size: 15px;
        border-bottom: 1px solid #e5e5e5;
    }

    .benefit-content {
        padding: 15px;
    }

    .benefit-badge {
        padding: 6px 12px;
        font-size: 13px;
    }

    .benefit-item {
        font-size: 14px;
        line-height: 1.7;
    }

    .benefit-subtitle {
        font-size: 13px;
    }

    .benefit-detail {
        font-size: 12px;
    }

    .benefit-notice {
        font-size: 12px;
    }
}