﻿.home-boxes {
    display: flex;
    gap: 20px;
    margin: 20px 0;
    align-items: stretch; /* 모든 박스 높이 동일 */
}

/* 각 박스 공통 */
.home-box {
    flex: 1;
    background: #fff;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    min-height: 250px; /* 예상 최소 높이 지정 -> 깜빡임 방지 */
    overflow: hidden;  /* 컨텐츠 넘침 방지 */
}

/* 타이틀 색상 구분 */
.region-title { border-bottom: 3px solid #f56a00; padding-bottom: 5px; }
.category-title { border-bottom: 3px solid #00a2ff; padding-bottom: 5px; }
.notice-title { border-bottom: 3px solid #ffcc00; padding-bottom: 5px; }

/* 리스트 박스 */
.box-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* 아이템 간 간격 */
    padding: 10px 0;
    margin: 0;
    list-style: none;
}

.box-list li {
    flex: 0 0 calc(100% / 6 - 8px); /* PC 6개 */
    margin: 0;
}

.box-list li a {
    display: block;
    text-decoration: none;
    color: #333;
    padding: 4px 6px;
    background: #f5f5f5;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;

    /* 핵심 */
    white-space: nowrap;       /* 한 줄로 유지 */
    overflow: hidden;          /* 넘치면 숨김 */
    text-overflow: ellipsis;   /* ... 표시 */
    min-height: 28px;          /* 한 줄 높이 고정 -> 깜빡임 방지 */
    line-height: 28px;
}

.box-list li a.long-text {
    white-space: normal;       /* 긴 글은 줄바꿈 허용 */
    word-break: break-word;     /* 단어 단위 줄바꿈 */
    line-height: 1.4;          /* 줄간격 안정화 */
    min-height: auto;           /* 높이 자동 */
}

/* 반응형 모바일 */
@media (max-width: 768px) {
    .box-list li {
        flex: 0 0 calc(100% / 5 - 8px); /* 모바일 5개 */
    }

    .box-list li a {
        font-size: 13px;
        padding: 3px 5px;
        min-height: 24px;
        line-height: 24px;
    }

    /* 모바일에서는 공지사항 박스 숨김 */
    .notice-box {
        display: none;
    }
}
.main-bottom-3box {
    display: flex;
    gap: 20px;
    margin-top: 40px;
}

.bottom-box {
    flex: 1;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.box-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
}

.customer-box p {
    margin-bottom: 10px;
    font-size: 14px;
}

@media (max-width: 768px) {
    .main-bottom-3box {
        flex-direction: column;
    }
}

.box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.box-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.box-title a {
    text-decoration: none;
    color: #333;
}

.more-link {
    font-size: 13px;
    text-decoration: none;
    color: #888;
}

.more-link:hover {
    color: #f56a00;
}

.notice-box .box-list li a{
    background:none;
    text-align:left;
}

.notice-box .box-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
}

.notice-box .box-list li {
    border-bottom: 1px solid #f2f2f2;
}

.notice-box .box-list li:last-child {
    border-bottom: none;
}

.notice-box .box-list li a {
    display: block;
    padding: 10px 0;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    background: none !important;
    transition: all 0.2s ease;
	text-align: left !important;
}

.notice-box .box-list li a:hover {

}

/* =========================
   하단 3박스 전용 (위쪽 3개 건드리지 않음)
========================= */

.main-bottom-3box {
    display: flex;
    gap: 24px;
    margin-top: 60px;
}

/* 카드 스타일 */
.main-bottom-3box .bottom-box {
    flex: 1;
    background: #fff;
    padding: 26px;
    border-radius: 16px;
    border: 1px solid #f0f0f0;
    transition: all 0.2s ease;
}

.main-bottom-3box .bottom-box:hover {
    border-color: #e2e2e2;
    box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}

/* 헤더 */
.main-bottom-3box .box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid #f3f3f3;
}

.main-bottom-3box .box-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
}

.main-bottom-3box .box-title a {
    text-decoration: none;
    color: #111;
}

.main-bottom-3box .more-link {
    font-size: 13px;
    color: #aaa;
    text-decoration: none;
}

.main-bottom-3box .more-link:hover {
    color: #333;
}

/* 리스트 정리 (회색 배경 제거) */
.main-bottom-3box .box-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
}

.main-bottom-3box .box-list li {
    border-bottom: 1px solid #f2f2f2;
}

.main-bottom-3box .box-list li:last-child {
    border-bottom: none;
}

.main-bottom-3box .box-list li a {
    display: block;
    padding: 10px 0;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    background: none !important;
    transition: all 0.2s ease;
	text-align: left !important;
}

.main-bottom-3box .box-list li a:hover {

}

/* 무통장 박스 */
.main-bottom-3box .customer-box {
    margin-top: 12px;
    padding: 18px;
    background: #fafafa;
    border-radius: 12px;
}

.main-bottom-3box .customer-box p {
    margin: 0 0 14px 0;
    font-size: 14px;
    line-height: 1.9;
    color: #444;
}

.main-bottom-3box .customer-box p:last-child {
    margin-bottom: 0;
}

.main-bottom-3box .customer-box strong {
    font-weight: 600;
    color: #111;
}

/* 모바일 대응 */
@media (max-width: 768px) {

    .main-bottom-3box {
        flex-direction: column;
        gap: 18px;
    }

    .main-bottom-3box .bottom-box {
        padding: 20px;
    }

    .main-bottom-3box .customer-box {
        padding: 16px;
    }

    .main-bottom-3box .customer-box p {
        font-size: 13px;
        line-height: 1.8;
    }
}

.seo_quick_links {
    margin: 25px 0;
    text-align: center;
}

.seo_quick_links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.seo_quick_links li {
    display: inline-block;
    margin: 0 8px;
}

.seo_quick_links a {
    font-size: 13px;
    color: #888;
    text-decoration: underline;
}

.seo_quick_links a:hover {
    color: #555;
}

.faq-section {
    margin-top: 50px;
    font-family: 'Noto Sans', sans-serif;
	background: #fff; /* FAQ 항목 전체 배경 흰색 */
	padding:20px;
}

.faq-section h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333; /* 진한 회색으로 깔끔하게 */
}

/* 각 FAQ 아이템 */
.faq-item {
    border-bottom: 1px solid #eee; /* 연한 회색으로 밝게 */
    background: #fff; /* FAQ 항목 전체 배경 흰색 */
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* 살짝 그림자 */
}

/* 질문 버튼 */
.faq-question {
    width: 100%;
    text-align: left;
    padding: 16px 20px;
    font-weight: 600;
    font-size: 16px;
    background: #fefefe; /* 밝은 배경 */
    border: none;
    cursor: pointer;
    position: relative;
    color: #222; /* 진한 글자색 */
    transition: background 0.3s ease;
}

.faq-question:hover {
    background: #f2f2f2; /* 마우스 오버시 살짝 밝아짐 */
}

/* 화살표 */
.faq-question::after {
    content: "▼";
    position: absolute;
    right: 20px;
    font-size: 14px;
    color: #555;
    transition: transform 0.3s ease;
}

/* 답변 (닫힘 상태) */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    background: #fafafa; /* 연한 회색으로 밝게 */
    line-height: 1.7;
    color: #444;
    transition: max-height 0.4s ease, padding 0.3s ease;
}

/* 열림 상태 */
.faq-item.active .faq-answer {
    max-height: 500px; /* 길게 늘어나도 자연스럽게 */
    padding: 15px 20px;
}

/* 화살표 회전 */
.faq-item.active .faq-question::after {
    transform: rotate(180deg);
    color: #222; /* 열렸을 때 화살표 진하게 */
}


.intro-box {
    width: 100%;
    background: linear-gradient(135deg, #00aaff, #0066cc); /* 고급 블루 그라데이션 */
    padding: 20px 25px;
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    font-size: 16px;
    color: #ffffff; /* 글자 흰색으로 대비 */
    line-height: 1.6;
    text-align: center;
    font-family: 'Noto Sans KR', sans-serif;
    transition: all 0.3s ease;
}

.intro-box strong {
    color: #ffed66; /* 강조를 위해 골드/노란색 포인트 */
}

.intro-box:hover {
    background: linear-gradient(135deg, #33b3ff, #004c99); /* 호버 시 밝기 변화 */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.home-bottom-blocks {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 40px;
}

/* 왼쪽 / 오른쪽 블록 스타일 */
.home-bottom-blocks > div {
    flex: 1;
    min-width: 250px;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 6px;
    background-color: #fafafa;
}

/* 블록 제목 */
.home-bottom-blocks h3 {
    font-size: 18px;
    margin-bottom: 12px;
}

/* 지역 링크 */
.region-hub-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.region-hub-links li {
    margin-bottom: 8px;
}

.region-hub-links li a {
    display: block;
    padding: 6px 10px;
    background: #f5f5f5;
    color: #333;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.2s;
}

.region-hub-links li a:hover {
    background: #e1e1e1;
}

/* RSS 링크 */
.home-rss-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.home-rss-links li {
    margin-bottom: 8px;
}

.home-rss-links a {
    color: #0073e6;
    text-decoration: none;
    transition: color 0.2s;
}

.home-rss-links a:hover {
    color: #005bb5;
}