@import url('/user/new/css/font/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@font-face {
    font-family: 'Aggravo'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroL.woff') format('woff'); font-weight: 300; font-display: swap;
}

@font-face {
    font-family: 'Aggravo'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroM.woff') format('woff'); font-weight: 500; font-display: swap;
}

@font-face {
    font-family: 'Aggravo'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff'); font-weight: 700; font-display: swap;
}





.page-content{ padding-top:85px;}
.inner-container {max-width: 1200px; margin: 0 auto; padding: 0 20px; text-align:left;}




/* =========================================
   브레드크럼 (경로) 영역
========================================= */
.breadcrumb-area{width:100%; padding:30px 0 0; letter-spacing: -0.065rem; text-align:left;}
.breadcrumb-area .home-icon {display:inline-block; width:20px; height:20px; margin-right:3px; background:url('/user/new/images/sub/ico_home.svg') center center no-repeat; vertical-align: middle}
.breadcrumb-area .depth{display: inline-block; vertical-align: middle}
.breadcrumb-area .depth:before {content:''; display:inline-block; width:20px; height:20px; margin-right:3px; background:url('/user/new/images/sub/ico_separator.svg') center center no-repeat; vertical-align: middle;}



/* =========================================
   페이지 타이틀 영역
========================================= */
.page-title-area {padding:80px 0;}
.page-title {font-size: 36px; font-weight: 700; letter-spacing: -0.02em;}



/* =========================================
   서브 이미지
========================================= */
.sub-title {width: 100%; height: 500px; background-color: #f5f5f5;}
.sub-title img {width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block;}



/* =========================================
   본문 영역
========================================= */
.half-section {padding: 100px 0 120px;}
.half-layout {display: flex; gap: 80px;}

/* 좌측 */
.half-left {flex: 0 0 380px;}
.half-heading {font-size: 32px; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; word-break: keep-all;}

/* 우측 */
.half-right {flex: 1;}
.half-text p {font-size: 16px; line-height: 1.7; color: #333; margin-bottom:22px; word-break: keep-all;}
.half-text p:last-child {margin-bottom: 0;}



/* 인사말 */
.greeting-signature {margin-top: 60px; display: flex; align-items: center; gap: 16px; font-size:16px; font-weight: 700; letter-spacing: -0.01em;}



@media screen and (max-width: 1024px) {
    .half-layout { gap: 40px; }
    .half-left { flex: 0 0 300px; }
    .half-heading { font-size: 28px; }
}

@media screen and (max-width: 768px) {
    .sub-title { height: 350px; }
    .page-title { font-size: 28px; }
    .half-layout { flex-direction: column; gap: 32px;}
    .half-left { flex: auto; }
    .half-heading { font-size: 24px; }
    .half-text p { font-size: 15px; margin-bottom: 20px; }
    .greeting-signature { margin-top: 40px;}
}



/* =========================================
   연혁
========================================= */
.history-section {width: 100%; padding: 100px 0; overflow: hidden; background-color: #ffffff;} /* 배경색 명시 */
.history-inner {max-width: 1200px; margin: 0 auto; padding: 0 20px;}

/* 마스터 컨테이너: 전체 선의 기준점 */
.timeline-master {position: relative; padding-bottom: 50px;}

/* 중앙 배경 선 & 진행 선 */
.timeline-line-bg,
.timeline-line-progress {position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1px;}
.timeline-line-bg {bottom: 0; background-color: #e0e0e0; z-index: 1;}
.timeline-line-progress {background-color: #5A52C3; height: 0; transition: height 0.1s ease-out; z-index: 2;}

/* 연도별 그룹 간격 */
.year-group {margin-bottom: 100px;}
.year-group:last-child {margin-bottom: 0;}

/* 연도 타이틀 (선 위로 올라오게 처리) */
.year-title {text-align: center; margin-bottom: 60px; position: relative; z-index: 5;}
.year-title span {
	display: inline-block;
	font-size: 42px; 
	font-weight: 800; 
	color: #5A52C3; 
	letter-spacing: -0.02em;
	background-color: #ffffff; /* 중요: 배경 선을 가리기 위해 섹션 배경색과 동일하게 설정 */
	padding: 0 30px; /* 좌우 여백으로 선 가림 영역 확보 */
}

/* 타임라인 아이템 리스트 */
.timeline-list {position: relative; overflow: hidden;} /* 아이템 float 방지 및 영역 확보 */
.timeline-item {position: relative; width: 50%; padding: 0 40px; margin-bottom: 60px;}
.timeline-item:last-child {margin-bottom: 0;}

/* 도트 (점) */
.timeline-item::before {content: ''; position: absolute; top: 4px; width: 8px; height: 8px; background-color: #e0e0e0; border-radius: 50%; z-index: 5; transition: background-color 0.4s ease, transform 0.4s ease;}

/* 좌우 지그재그 배치 */
.timeline-item:nth-child(odd) {left: 50%; text-align: left;}
.timeline-item:nth-child(odd)::before {left: -4px;}
.timeline-item:nth-child(even) {left: 0; text-align: right;}
.timeline-item:nth-child(even)::before {right: -4px;}

/* 텍스트 스타일 */
.timeline-date {font-size: 16px; font-weight: 700; color: #999999; margin-bottom: 16px; transition: color 0.4s ease;}
.timeline-content p {font-size: 15px; color: #333333; line-height: 1.3; margin-bottom:10px; word-break: keep-all;}

/* 활성화(Active) 상태 */
.timeline-item.active::before {background-color: #5A52C3; transform: scale(1.3); box-shadow: 0 0 0 4px rgba(85, 73, 214, 0.1);}
.timeline-item.active .timeline-date {color: #5A52C3;}

/* 모바일 반응형 */
@media screen and (max-width: 768px) {
	.year-title { text-align: left; margin-bottom: 40px; }
	.year-title span { font-size: 32px; padding: 0; padding-right: 20px; background-color: transparent;}
	.timeline-line-bg { left: 20px; transform: none; background-color: #5A52C3; }
	.timeline-line-progress { display: none; }
	.timeline-item { width: 100%; left: 0 !important; padding-left: 50px !important; padding-right: 0 !important; text-align: left !important; }
	.timeline-item::before { left: 16px !important; right: auto !important; background-color: #5A52C3; }
	.timeline-date { color: #5A52C3; }
}



/* =========================================
   오시는길
========================================= */
.location-section {width: 100%; padding: 100px 0; overflow: hidden;}
.location-inner {max-width: 1200px; margin: 0 auto; padding: 0 20px; text-align:left;}
.location-inner > h3 {margin-bottom:30px; font-size: 32px; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; word-break: keep-all;}
.location-inner > ul > li{font-size: 16px; line-height: 1.5; color: #333; word-break: keep-all;}
.location-inner > p{font-size: 16px; line-height: 1.6; color: #333; margin-top:22px; word-break: keep-all;}
.location-map > div{width:100%; margin:50px auto 20px;}

@media screen and (max-width: 1024px) {
    .location-inner > h3{ font-size: 28px; }
}

@media screen and (max-width: 768px) {
    .location-inner > h3{ font-size: 24px; }
    .location-inner > ul > li, .location-inner > p{ font-size: 15px;}
}



/* =========================================
   사업내용
========================================= */
.company-section {width: 100%; padding: 110px 0 100px; overflow: hidden;}
.company-top-area {padding-bottom:120px; display: flex; justify-content: center;}
.company-image-box {position: relative; width: 100%; max-width: 450px; height: 450px; background: url('/user/new/images/sub/img_company.png') no-repeat center center; background-size: cover; border-radius: 12px; z-index: 1;}
.company-image-box::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.4); z-index: 1;}
.company-text {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 180%; max-width: 800px; text-align: center; font-size: 22px; font-weight: 700; color: #111; line-height: 1.6; word-break: keep-all; z-index:10}

/* 하단 아코디언 갤러리 영역 */
.accordion-slider {display: flex; width: 100%; height: 600px; margin: 0 auto; gap: 8px; padding: 0 20px;}
.accordion-item {position: relative; flex: 1; background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 4px; overflow: hidden; cursor: pointer; transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);}
.accordion-item:hover, .accordion-item.active {flex: 5;}
.accordion-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 60%); opacity: 0; transition: opacity 0.4s ease;}
.accordion-item:hover .accordion-overlay, .accordion-item.active .accordion-overlay {opacity: 1;}
.accordion-content {position: absolute; bottom: -20px; left: 0; width: 100%; padding: 40px; color: #fff; text-align:left; opacity: 0; transition: all 0.5s ease; transition-delay: 0s;}
.accordion-item:hover .accordion-content, .accordion-item.active .accordion-content {opacity: 1; bottom: 0; transition-delay: 0.2s;}
.accordion-content h3 {font-size: 28px; font-weight: 700; margin-bottom: 12px;}
.accordion-content .desc {font-size: 16px; font-weight: 600; line-height: 1.5; margin-bottom: 24px; color: #eee;}
.accordion-content .desc2{margin-top:15px; padding:15px; background:rgba(255,255,255,0.1); border-radius:5px; font-size:12px; line-height:1.3; color:#ccc;}
.company-list {list-style: none;}
.company-list li {padding-left:10px; background:url('/user/images/common/bul_bar.png') left 8px no-repeat;font-size: 14px; line-height: 1.3; color: #fff; margin-bottom: 4px;}

@media screen and (max-width: 768px) {
    .company-image-box { max-width: 100%; height: 350px; }
    .company-text { width: 90%;max-width: 100%; font-size: 16px;}
    .accordion-slider {flex-direction: column; height: auto;}
    .accordion-item {flex: none; width: 100%; max-height: 100px; transition:max-height 0.6s cubic-bezier(0.25, 1, 0.5, 1); }    
    .accordion-item:hover, .accordion-item.active {max-height: 1500px;}
    .accordion-content {position: relative; bottom: auto; height: auto; padding: 150px 20px 30px;}
    .accordion-content h3 { font-size: 22px; }
	.accordion-content .desc {font-size: 14px; margin-bottom:12px; }
    .company-list li {font-size: 13px; margin-bottom: 6px; line-height: 1.3; word-break: keep-all; }
}



/* =========================================
   게시판
========================================= */
.board-section {width: 100%; padding: 60px 0;}
.board-container {max-width: 1200px; margin: 0 auto; padding: 0 20px;}

/* 검색창  */
.board-top-bar {display: flex; justify-content: flex-end; margin-bottom: 20px;}
.search-box {position: relative; width: 100%; max-width: 320px; display: flex; background-color: #f5f5f5; border-radius: 4px; padding: 2px;}
.search-box input {width: 100%; border: none; background: transparent; padding: 10px 45px 10px 16px; font-size: 14px; color: #333; outline: none;}
.search-box input::placeholder {color: #aaa;}
.search-submit {position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: none; background: transparent; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: #333; cursor: pointer;}
.board-table-wrap {width: 100%; border-top: 2px solid #111;}
.board-table {width: 100%; border-collapse: collapse; table-layout: fixed;}
.board-table th {font-size: 15px; font-weight: 700; color: #111; padding: 20px 10px; border-bottom: 1px solid #e5e5e5; text-align: center;}
.board-table tbody td {padding: 18px 10px; font-size: 14px; color: #444; border-bottom: 1px solid #e9e9e9; text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.board-table tbody td.col-title {text-align: left; white-space: normal;}
.board-table tbody td.col-title a {color: #222222; text-decoration: none; font-weight: 500; transition: color 0.2s ease;}
.board-table tbody td.col-title a:hover {color: #5549d6;}
.board-table tbody tr:hover {background-color: #fafafa;}
.board-table tr.notice-row {background-color: #fcfbff;}
.badge-notice {display: inline-block; padding: 3px 8px; font-size: 11px; font-weight: 700; color: #fff; background-color: #5549d6; border-radius: 3px;}
.col-num   { width: 8%; }
.col-title { width: 54%; }
.col-name  { width: 14%; }
.col-date  { width: 14%; }
.col-views { width: 10%; }

/* 빈 상태 (Empty State) 내부 스타일 */
.board-empty {padding: 120px 0; border-bottom: 1px solid #f0f0f0;}
.empty-msg-box {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;}

/* 보라색 원형 (!) 아이콘 */
.empty-icon {width: 36px; height: 36px; background-color: #5549d6; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.empty-icon span {color: #ffffff; font-size: 18px; font-weight: 700; line-height: 1;}
.empty-text {font-size: 15px; color: #666666; font-weight: 500; letter-spacing: -0.01em;}

/* 하단 페이지네이션 스타일 */
.board-pagination {display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 40px;}

/* 화살표 버튼 공통 */
.page-btn {width: 36px; height: 36px; background-color: #5549d6; color: #ffffff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s ease;}
.page-btn:hover {background-color: #3e33b8;}

/* 숫자 버튼 */
.page-number {width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: #333333; border: 1px solid #d9d9d9; background-color: #ffffff;}

/* 활성화 상태 */
.page-number.active {border-color: #d9d9d9; color: #333333;}

@media screen and (max-width: 768px) {
    .board-section { padding: 40px 0; }
    .board-top-bar { justify-content: flex-end; }
    .search-box { max-width: 100%; }
    .board-table thead {display: none;}
	.board-table, .board-table tbody, .board-table tr, .board-table td {display: block; width: 100%; }
    .board-empty {padding: 80px 0; }
    .empty-text {font-size: 14px; }
    .board-table-wrap {border-top: 1px solid #111;}
.board-table tbody tr { 
        display: flex; 
        flex-wrap: wrap; 
        align-items: center; /* 요소들의 수직 중앙 정렬을 맞춰줍니다 */
        padding: 16px 4px 20px; 
        border-bottom: 1px solid #e9e9e9; 
        background-color: transparent !important; 
    }
    
    .board-table tbody td { 
        padding: 0; 
        border: none; 
        text-align: left; 
        white-space: normal; 
        overflow: visible; 
        text-overflow: clip; 
        font-size: 13px; 
        color: #888888;
    }
.board-table tbody td.col-num { 
        width: 100%; 
        margin-bottom: 8px; 
    }
    .board-table tbody td.col-num:not(:has(.badge-notice)) { 
        display: none; 
    }
	
	.board-table tbody td.col-title { 
        width: 100%; 
        font-size: 15px; 
        margin-bottom: 10px; 
    }
    .board-table tbody td.col-title a { 
        font-weight: 600; 
        color: #111; 
        line-height: 1.4; 
    }
    
    .board-table tbody td.col-name,
    .board-table tbody td.col-date,
    .board-table tbody td.col-views {
        width: auto; /* 내용만큼만 너비 차지 */
		display:inline-block;
        
        align-items: center; /* 텍스트와 가운뎃점(·)의 높이를 완벽히 맞춤 */
    }

    /* 구분선(·) 유지 */
    .board-table tbody td.col-name::after, 
    .board-table tbody td.col-date::after {
        content: "·"; 
        margin: 0 6px; 
        color: #ccc; 
    }  
    
    .board-table tbody td.col-views::before {
        content: "조회 ";
        margin-right: 2px;
    }
}



/* =========================================
   후원하기
========================================= */
.donation-section {width: 100%; padding: 80px 0;}
.donation-container {max-width: 1200px; margin: 0 auto; padding: 0 20px;}
.donation-card-wrap {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px;}
.donation-card {background-color: #f7f7f9; border-radius: 12px; padding: 50px 40px; display: flex; flex-direction: column; text-align:left;}
.card-eng-title {font-size: 15px; font-weight: 700; color: #554498; margin-bottom: 60px;}
.card-text-area {flex-grow: 1; margin-bottom: 30px;}
.card-kr-title {font-size: 18px; font-weight: 700; margin-bottom: 12px;}
.card-desc {font-size: 15px; color: #444; line-height: 1.6; word-break: keep-all;}
.bank-info-list {display: flex; flex-direction: column;}
.donation-row {display: flex; font-size: 14px;}
.donation-row dt {width: 60px; color: #666;}
.donation-row dd {position: relative; padding-left: 14px; color: #111; font-weight: 500;}
.donation-row dd::before {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background-color: #ddd;}
.card-btn-group {display: flex; flex-direction: column; gap: 8px;}
.donation-btn {display: flex; justify-content: center; align-items: center; width: 100%; height: 52px; border-radius: 4px; font-size: 15px; font-weight: 600; text-decoration: none; border: none; transition: background-color 0.2s ease;}
.btn-purple {background-color: #5549d6; color: #fff;}
.btn-purple:hover {background-color: #3e33b8; color:#fff;}
.btn-gray {background-color: #e5e5e5; color: #a0a0a0; cursor: not-allowed;}
.donation-banner {position: relative; width: 100%; border-radius: 12px; overflow: hidden; background: url('/user/new/images/sub/img_donation.png') no-repeat center bottom; background-size: cover; padding: 80px 20px; text-align: center; color: #fff;}
.donation-banner::before {content: ''; position: absolute; inset: 0; background: rgba(85, 68, 152, 0.35); z-index: 1;}
.banner-content {position: relative; z-index: 2;}
.banner-title {font-size: 32px; font-weight: 700; line-height: 1.5; margin-bottom: 16px; word-break: keep-all;}
.banner-sub {font-size: 15px; color: #d0d0d0; margin-bottom: 40px;}
.banner-contact {font-size: 22px; font-weight: 600; display: flex; justify-content: center; align-items: center; gap: 16px;}
.banner-contact .divider {font-size: 16px; color: #888; font-weight: 300;}

@media screen and (max-width: 768px) {
    .donation-section { padding: 40px 0; }
    .donation-card-wrap {grid-template-columns: 1fr; gap: 16px; }
    .donation-card {padding: 40px 24px; }    
    .card-eng-title { margin-bottom: 40px; }
    .card-kr-title { font-size: 20px; }
    .donation-banner {padding: 60px 20px; }
    .banner-title {font-size: 22px; margin-bottom: 12px; }
    .banner-sub {font-size: 13px; margin-bottom: 30px; }
    .banner-contact {font-size: 18px; gap: 10px; }
}



/* =========================================
   후원혜택
========================================= */
.benefit-section {position: relative; width: 100%; padding: 120px 0 180px; background-color: #ffffff; overflow: hidden;}
.benefit-container {max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 2;}
.benefit-grid {display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 40px; row-gap: 60px;}
.benefit-card {border-radius: 16px; padding: 40px 30px; display: flex; flex-direction: column; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02); min-height: 340px;}
.bg-purple { background-color: #f7v6ff; background: #f6f3ff; }
.bg-mint { background-color: #f0f7f4; }
.benefit-card-icon {width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;}
.icon-purple { color: #5549d6; }
.icon-mint { color: #00c781; }
.benefit-card-text {margin-top: auto; font-size: 14px; line-height: 1.7; color: #333333; font-weight: 500; word-break: keep-all; text-align:left;}
.benefit-grid .benefit-card:nth-child(1) {grid-column: 1; grid-row: 1;}
.benefit-grid .benefit-card:nth-child(2) {grid-column: 2; grid-row: 1;}
.benefit-grid .benefit-card:nth-child(3) {grid-column: 1; grid-row: 2; transform: translateY(30px);}
.benefit-grid .benefit-card:nth-child(4) {grid-column: 3; grid-row: 2; transform: translateY(30px);}

.marquee-container {position: absolute; bottom: 120px; left: 0; width: 100%; overflow: hidden; pointer-events: none; z-index: 1;}
.marquee-track {display: flex; width: max-content; white-space: nowrap; animation: linearMarquee 20s linear infinite;}
.marquee-text {font-family: 'Aggravo'; font-weight:300; font-size: 260px; color: #000000; letter-spacing: -6px; display: inline-block;}

@keyframes linearMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
}

@media screen and (max-width: 1024px) {
    .marquee-text { font-size: 180px; }
    .benefit-grid { grid-template-columns: repeat(2, 1fr); }
    .benefit-grid .benefit-card:nth-child(n) { transform: translateY(0); grid-column: auto; grid-row: auto; }
}

@media screen and (max-width: 768px) {
    .benefit-section { padding: 60px 0 100px; }
    .benefit-grid {grid-template-columns: 1fr; gap: 20px; }
    .benefit-card {min-height: auto; padding: 30px 24px; }
	.benefit-card-text {margin-top: 40px;}
    .marquee-container {bottom: 60px; }
    .marquee-text {font-size: 110px; letter-spacing: -2px;}
}










/* =========================================
   FAQ
========================================= */
.faq-section {
    width: 100%;
    padding: 60px 0;
}

.faq-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =========================================
   1. 검색창 (게시판과 동일)
========================================= */
.faq-top-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

/* =========================================
   2. FAQ 리스트 및 아코디언 (PC)
========================================= */
.faq-list-wrap {
    border-top: 2px solid #111;
}

.faq-item {
    border-bottom: 1px solid #e9e9e9;
}

/* 질문(Header) 영역 */
.faq-question {
    display: flex;
    align-items: center;
    padding: 24px 20px;
    cursor: pointer;
    background-color: #fff;
    transition: background-color 0.2s ease;
}

.faq-question:hover {
    background-color: #fafafa;
}

/* 카테고리 (좌측) */
.faq-category {
    width: 15%; /* 고정 비율 부여 */
    font-size: 15px;
    font-weight: 600;
    color: #555;
    text-align: left;
}

/* 질문 제목 (중앙) */
.faq-title {
    width: 80%; /* 나머지 공간 차지 */
    font-size: 16px;
    font-weight: 500;
    color: #222;
	text-align:left;
}

/* 우측 화살표 아이콘 */
.faq-icon {
   width: 5%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.faq-icon .icon-closed {
    display: block;
}
.faq-icon .icon-opened {
    display: none;
}

/* 2. 클릭(열린) 상태 (.active가 붙었을 때): 두 이미지의 숨김 상태를 반전 */
.faq-item.active .faq-icon .icon-closed {
    display: none;
}
.faq-item.active .faq-icon .icon-opened {
    display: block;
}


/* 답변 영역 (초기엔 숨김) */
/* 부드러운 애니메이션을 위해 CSS Grid 트랜지션 활용 */
.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease;
    background-color: #faf8ff;
	text-align:left;
}

/* [열린 상태] 답변 영역 등장 */
.faq-item.active .faq-answer {
    grid-template-rows: 1fr;
}

.answer-inner {
    overflow: hidden;
    /* 질문 제목 위치와 동일하게 들여쓰기를 맞춤 (카테고리 15% + 여백 고려) */
    padding: 0 20px 0 calc(15% + 20px); 
    font-size: 15px;
    line-height: 1.8;
    color: #444;
}

/* Grid가 열리고 나서 내부 콘텐츠 여백 조절 */
.faq-item.active .answer-inner {
    padding-top: 40px;
    padding-bottom: 40px;
}




/* =========================================
   반응형 모바일 (768px 이하)
========================================= */
@media screen and (max-width: 768px) {
    .faq-section { padding: 40px 0; }
    .search-box { max-width: 100%; }

    /* 질문 영역 세로 배치로 변경 */
    .faq-question {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 16px;
        position: relative; /* 우측 화살표 절대위치를 위한 기준점 */
    }

    /* 카테고리를 제목 위 작은 배지(Badge) 모양으로 변경 */
    .faq-category {
        width: auto;
        text-align: left;
        background-color: #f0f0f0;
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 12px;
        margin-bottom: 10px;
        color: #666;
    }

    /* 제목이 화살표를 덮지 않도록 우측 여백 확보 */
    .faq-title {
        width: 100%;
        font-size: 15px;
        padding-right: 30px;
        line-height: 1.4;
    }

    /* 화살표 아이콘을 우측 중앙에 고정 */
    .faq-icon {
        position: absolute;
        top: 50%;
        right: 16px;
        transform: translateY(-50%);
    }

    .answer-inner {
        padding: 0 16px;
        font-size: 14px;
    }
    .faq-item.active .answer-inner {
        padding-top: 30px;
        padding-bottom: 30px;
    }
}








/* =========================================
   공지사항
========================================= */


/* 제목 정렬 및 아이콘 배치를 위한 내부 Flex 래퍼 */
.title-flex {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
}

/* 제목 텍스트 말줄임표 처리 */
.title-text {
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.title-text:hover {
    text-decoration: underline;
}

/* 뱃지 및 아이콘 고정 (찌그러짐 방지) */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    border-radius: 4px;
    flex-shrink: 0;
}
.badge-orange { background-color: #f2a45c; }
.badge-green { background-color: #4db886; }

.new-dot {
    width: 4px; height: 4px;
    background-color: #4a80f6;
    border-radius: 50%;
    flex-shrink: 0;
}
.icon-attach {
    display: flex;
    align-items: center;
    color: #888;
    flex-shrink: 0;
}

/* =========================================
   반응형 모바일 (768px 이하) - Table 깨짐 방지 트릭
========================================= */
@media screen and (max-width: 768px) {
    

    /* 제목 영역 너비 확장 및 줄바꿈 허용 */
    .title-flex {
        padding: 0;
        align-items: flex-start;
    }
    .title-text {
        white-space: normal;
        line-height: 1.4;
        word-break: keep-all;
    }



}















.board-gallery-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* PC 기준 3열 배치 */
    gap: 30px; /* 카드 사이 간격 */
}

/* 갤러리 카드 아이템 */
.gallery-item {
    display: flex;
    flex-direction: column;
    background-color: #f9f9fc; /* 연한 보랏빛 배경 */
    border-radius: 12px; /* 모서리 둥글게 */
    overflow: hidden;
    border: 2px solid transparent; /* 기본 투명 테두리 */
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* 마우스 호버 및 포커스 시 효과 (가운데 보라색 테두리 구현) */
.gallery-item:hover, 
.gallery-item.active {
    border-color: #9b8aee; /* 호버 시 보라색 테두리 */
    box-shadow: 0 4px 12px rgba(155, 138, 238, 0.15);
    transform: translateY(-4px); /* 살짝 위로 떠오르는 효과 */
}

/* 썸네일 이미지 영역 */
.gallery-thumb {
    width: 100%;
    aspect-ratio: 16 / 10; /* 이미지 비율 고정 (원하는 비율로 수정 가능) */
    overflow: hidden;
    background-color: #e9e9e9; /* 이미지 로딩 전 배경색 */
}

/* [핵심] 이미지 크기에 상관없이 꽉 차게 맞추기 */
.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 찌그러지지 않고 비율을 유지하며 컨테이너를 덮음 */
    transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-thumb img {
    transform: scale(1.05); /* 호버 시 이미지 살짝 확대 */
}

/* 하단 텍스트 정보 영역 */
.gallery-info {
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* 우측 정렬 */
    text-align: right;     /* 우측 정렬 */
    gap: 8px;
	background:#F9F6FF;
}

.gallery-date {
    font-size: 13px;
    color: #666;
    letter-spacing: 0.5px;
}

.gallery-title {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    line-height: 1.4;
    word-break: keep-all; /* 단어 단위로 줄바꿈 */
}

@media screen and (max-width: 768px) {
    .board-section { padding: 40px 0; }
    .board-top-bar { justify-content: flex-end; }
    .search-box { max-width: 100%; }

    /* 모바일에서는 1열(세로) 배치로 변경 */
    .board-gallery-wrap {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }

    /* 텍스트 패딩 축소 */
    .gallery-info {
        padding: 20px 16px;
    }

    /* 모바일 환경에서는 호버 시 떠오르는 효과를 약하게 조정 */
    .gallery-item:hover, .gallery-item.active {
        transform: translateY(0);
    }
}