/* style.css */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
	overflow-x:hidden;
    font-family:'Malgun Gothic','맑은 고딕',sans-serif;
    background:#ffffff;
    color:#222;
    line-height:1.6;
}

a{
    text-decoration:none;
}

.wrap{
    max-width:1280px;
    margin:0 auto;
    padding:0 20px;
}

/* =========================
   HEADER
========================= */

.site-header{
    background:#ffffff;
    border-bottom:1px solid #ececec;
    position:sticky;
    top:0;
    z-index:999;
}

.header-flex{
    height:72px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo{
    font-size:24px;
    font-weight:800;
    color:#111;
}

.top-nav{
    display:flex;
    gap:24px;
}

.top-nav a{
    color:#444;
    font-size:15px;
    font-weight:700;
}

.top-nav a:hover{
    color:#23a0d1;
}

/* =========================
   HERO
========================= */

.hero{
    padding:80px 0 60px;
    background:linear-gradient(135deg,#23a0d1,#1f77ff);
    color:#ffffff;
    text-align:center;
}

.hero h1{
    font-size:46px;
    line-height:1.35;
    margin-bottom:16px;
    font-weight:800;
}

.hero p{
    font-size:18px;
    opacity:0.96;
    margin-bottom:30px;
}

/* 검색창 */

.search-form{
    max-width:820px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 150px;
    gap:12px;
}

.search-form input{
    height:56px;
    border:none;
    border-radius:12px;
    padding:0 18px;
    font-size:16px;
}

.search-form button{
    height:56px;
    border:none;
    border-radius:12px;
    background:#ffffff;
    color:#1f77ff;
    font-size:16px;
    font-weight:800;
    cursor:pointer;
}

.search-form button:hover{
    opacity:0.92;
}

/* 빠른 메뉴 */

.quick-menu{
    margin-top:28px;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
}

.quick-menu a{
    padding:10px 16px;
    border-radius:10px;
    color:#ffffff;
    background:rgba(255,255,255,0.15);
    font-size:14px;
    font-weight:700;
}

.quick-menu a:hover{
    background:rgba(255,255,255,0.24);
}

/* =========================
   CONTENT
========================= */

.section{
    padding:65px 0;
}

.section-title{
    text-align:center;
    margin-bottom:35px;
}

.section-title h2{
    font-size:34px;
    color:#111;
    margin-bottom:10px;
}

.section-title p{
    color:#666;
    font-size:16px;
}

/* 카드 */

.card-grid{
	display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.facility-card{
    border:1px solid #ececec;
    border-radius:16px;
    padding:24px;
    background:#ffffff;
    transition:0.2s;
}

.facility-card:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 24px rgba(0,0,0,0.06);
}

.facility-card h3{
	min-width:0;
	word-break:break-word;
    font-size:21px;
    margin-bottom:18px;
    color:#111;
    line-height:1.4;
	white-space: normal !important;
}

.facility-card ul{
    list-style:none;
}

.facility-card li{
	word-break:break-word;
    padding:7px 0;
    font-size:15px;
    color:#444;
    border-bottom:1px solid #f4f4f4;
}

.facility-card li:last-child{
    border-bottom:none;
}

.facility-card strong{
    display:inline-block;
    width:70px;
    color:#111;
}

.btn-link{
    display:inline-block;
    margin-top:18px;
    padding:11px 16px;
    background:#23a0d1;
    color:#ffffff;
    border-radius:10px;
    font-size:14px;
    font-weight:700;
}

.btn-link:hover{
    background:#1d89b4;
}

/* 검색 없음 */

.empty-box{
    grid-column:1 / -1;
    padding:45px;
    text-align:center;
    border:1px solid #ececec;
    border-radius:16px;
    background:#ffffff;
    color:#666;
    font-size:16px;
}

/* =========================
   FOOTER
========================= */

.site-footer{
    margin-top:50px;
    padding:55px 0;
    background:#111827;
    color:#d1d5db;
}

.footer-top strong{
	display:block;
    font-size:24px;
    color:#ffffff;
    margin-bottom:10px;
}

.footer-top p{
    max-width:700px;
    line-height:1.8;
    color:#c7cdd8;
}

.footer-links{
    margin-top:25px;
    display:flex;
    flex-wrap:wrap;
    gap:18px;
}

.footer-links a{
    color:#ffffff;
    font-size:14px;
}

.footer-copy{
    margin-top:25px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,0.08);
    font-size:14px;
    color:#9ca3af;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1024px){

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

    .hero h1{
        font-size:38px;
    }
}

@media(max-width:768px){

    .header-flex{
        height:auto;
        padding:14px 0;
        flex-direction:column;
        gap:12px;
    }

    .top-nav{
        gap:14px;
        flex-wrap:wrap;
        justify-content:center;
    }

    .hero{
        padding:60px 0 45px;
    }

    .hero h1{
        font-size:30px;
    }

    .hero p{
        font-size:15px;
    }

    .search-form{
        grid-template-columns:1fr;
    }

    .card-grid{
        grid-template-columns:1fr;
    }

    .section-title h2{
        font-size:26px;
    }
}

/* =========================
   CARD LINK
========================= */

.card-link-wrap{
    display:block;
    color:inherit;
}

.card-link-wrap:hover h3{
    color:#23a0d1;
}

/* =========================
   DETAIL PAGE
========================= */

.detail-top{
    margin-bottom:30px;
}

.breadcrumb{
    font-size:14px;
    color:#666;
    margin-bottom:14px;
}

.breadcrumb a{
    color:#23a0d1;
}

.detail-title{
    font-size:40px;
    color:#111;
    margin-bottom:10px;
    line-height:1.4;
}

.detail-sub{
    color:#666;
    font-size:16px;
}

.detail-grid{
    display:grid;
    grid-template-columns:2fr 340px;
    gap:24px;
}

.detail-card{
    border:1px solid #ececec;
    border-radius:16px;
    background:#fff;
    padding:28px;
    margin-bottom:24px;
}

.detail-card h2{
    font-size:24px;
    margin-bottom:18px;
}

.detail-table{
    width:100%;
    border-collapse:collapse;
}

.detail-table th{
    width:140px;
    text-align:left;
    padding:14px 10px;
    border-bottom:1px solid #f1f1f1;
    color:#111;
}

.detail-table td{
    padding:14px 10px;
    border-bottom:1px solid #f1f1f1;
    color:#444;
}

.detail-table a{
    color:#23a0d1;
}

.intro-box{
    line-height:1.9;
    color:#444;
}

.detail-side{
    position:sticky;
    top:95px;
    height:fit-content;
}

.side-btn{
    display:block;
    width:100%;
    padding:16px;
    margin-bottom:12px;
    border-radius:12px;
    text-align:center;
    color:#fff;
    font-weight:700;
    background:#111827;
}

.side-btn.blue{
    background:#23a0d1;
}

.side-btn.green{
    background:#10b981;
}

.side-btn.gray{
    background:#6b7280;
}

/* =========================
   MOBILE
========================= */

@media(max-width:1024px){

    .detail-grid{
        grid-template-columns:1fr;
    }

    .detail-side{
        position:static;
    }
}

@media(max-width:768px){

    .detail-title{
        font-size:28px;
    }

    .detail-card{
        padding:20px;
    }

    .detail-table th,
    .detail-table td{
        display:block;
        width:100%;
        padding:8px 0;
    }

    .detail-table th{
        border-bottom:none;
        padding-bottom:4px;
    }

    .detail-table td{
        padding-top:0;
    }
}

/* =========================
   UX UPGRADE
========================= */

/* 카드 hover 강화 */
.facility-card{
	word-break:break-word;
	overflow:hidden;
	position:relative;
    display:flex;
    flex-direction:column;
	min-width:0;
}

.card-link-wrap{
    flex:1;
}

.home-btn{
    margin-top:16px;
    align-self:flex-start;
}

.facility-card:hover{
    transform:translateY(-6px);
    box-shadow:0 16px 36px rgba(0,0,0,0.08);
    border-color:#d9eef7;
}

/* 카드 클릭 힌트 */
.facility-card::after{
    content:"상세보기 →";
    position:absolute;
    right:20px;
    bottom:18px;
    font-size:13px;
    color:#23a0d1;
    opacity:0;
    transition:0.2s;
}

.facility-card:hover::after{
    opacity:1;
}

/* 버튼 통일 */
.btn-link,
.side-btn{
    transition:0.2s;
}

.btn-link:hover,
.side-btn:hover{
    transform:translateY(-2px);
}

/* 검색창 집중효과 */
.search-form input:focus{
    outline:none;
    box-shadow:0 0 0 4px rgba(35,160,209,0.15);
}

/* 스크롤 부드럽게 */
html{
    scroll-behavior:smooth;
}

/* =========================
   MOBILE HAMBURGER MENU
========================= */

/* 기본적으로 모바일 버튼은 숨김 */
.m-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.m-menu-btn span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #111;
    border-radius: 3px;
    transition: all 0.3s;
}

/* 모바일 환경 (768px 이하) */
@media(max-width: 768px) {
    .header-flex {
        justify-content: space-between;
        flex-direction: row !important; /* 가로 배열 유지 */
        padding: 0 20px;
    }

    .m-menu-btn {
        display: flex; /* 모바일에서 버튼 표시 */
    }

    .top-nav {
        display: none; /* 기본 메뉴 숨김 */
        position: absolute;
        top: 72px; /* 헤더 높이만큼 아래에 배치 */
        left: 0;
        width: 100%;
        background: #fff;
        border-bottom: 1px solid #eee;
        flex-direction: column;
        gap: 0 !important;
        padding: 10px 0;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }

    .top-nav.active {
        display: flex; /* 버튼 클릭 시 메뉴 표시 */
    }

    .top-nav a {
        padding: 15px 20px;
        width: 100%;
        border-bottom: 1px solid #f9f9f9;
        font-size: 16px;
    }

    /* 버튼 클릭 시 'X' 모양으로 애니메이션 (선택사항) */
    .m-menu-btn.active span:nth-child(1) {
        transform: translateY(8.5px) rotate(45deg);
    }
    .m-menu-btn.active span:nth-child(2) {
        opacity: 0;
    }
    .m-menu-btn.active span:nth-child(3) {
        transform: translateY(-8.5px) rotate(-45deg);
    }
}

/* 아이콘 공통 스타일 */
.quick-card .icon {
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.quick-card .material-symbols-outlined {
    font-size: 32px; /* 아이콘 크기 */
    color: #000000;  /* 검은색 설정 */
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* 마우스 올렸을 때 아이콘 색상 변경 (선택사항) */
.quick-card:hover .material-symbols-outlined {
    color: #1f77ff; 
}


/* 로고 이미지 반응형 스타일 */
.responsive-logo {
    /* PC에서의 최대 가로 크기 지정 */
    width: 250px; 
    
    /* 화면이 250px보다 작아지면 화면 너비의 100%에 맞춤 */
    max-width: 100%; 
    
    /* 가로 크기에 맞춰 세로 비율을 자동으로 유지 */
    height: auto; 
    
    /* 로고 주변 정렬 보정 */
    display: block;
}

/* 모바일 전용 미세 조정 (선택 사항) */
@media (max-width: 768px) {
    .responsive-logo {
        /* 모바일에서 로고가 너무 크다면 조금 더 작게 조절 가능 */
        width: 180px; 
    }
}

/* ==================================================
   지도로 찾기 카드 전용 스타일
   ================================================== */
.quick-card.point-card {
    background-color: #e3f2fd; /* 연한 노란색 배경 */
    border: 1px solid #2196f3;  /* 테두리도 조금 더 진하게 */
}

.quick-card.point-card:hover {
    background-color: #fff176; /* 마우스 올렸을 때 조금 더 진해짐 */
    transform: translateY(-5px); /* 살짝 위로 올라가는 효과 추가 */
}

/* 아이콘 색상도 별도로 지정하고 싶다면 */
.quick-card.point-card .material-symbols-outlined {
    color: #f57f17; /* 주황색 계열 아이콘 */
}


/* ==================================================
   사이트맵 페이지 전용 스타일 (sitemap.php 전용)
   ================================================== */

/* 섹션 전체 배경 및 간격 */
.section.sitemap-bg {
    padding: 80px 0;
    background-color: #fff;
}

/* 사이트맵 컨테이너 (가로 배치) */
.sitemap-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px; /* 섹션 간 간격 */
    margin-top: 50px;
    flex-wrap: wrap; /* 화면 작아지면 자동 줄바꿈 */
}

/* 각 메뉴 그룹 박스 */
.sitemap-group {
    flex: 1;
    min-width: 250px; /* 최소 너비 확보 */
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* 그룹 제목 (상단 굵은 선 포인트) */
.sitemap-group h3 {
    font-size: 22px;
    font-weight: 800;
    color: #111;
    margin-bottom: 25px;
    padding-bottom: 15px;
    padding-left: 0; /* 기존 코드의 padding-left 제거 */
    border-left: none; /* 기존 코드의 세로 바 제거 */
    border-bottom: 2px solid #1f77ff; /* 롯데 스타일의 가로 강조선 */
    line-height: 1.2;
}

/* 리스트 스타일 */
.sitemap-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sitemap-group ul li {
    margin-bottom: 14px;
}

/* 시설별 찾기 2단 정렬 (필요한 경우 유지) */
.sitemap-grid {
    display: block; /* 롯데 스타일은 세로 나열이 더 깔끔함 */
}

/* 링크 스타일 (불렛 포인트 추가) */
.sitemap-group a {
    color: #555;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.2s;
    display: flex;
    align-items: center;
}

/* 링크 앞의 불렛 기호 (·) */
.sitemap-group a::before {
    content: '·';
    margin-right: 10px;
    font-weight: 900;
    color: #ccc;
    font-size: 18px;
}

.sitemap-group a:hover {
    color: #1f77ff;
    text-decoration: none;
    font-weight: 700;
    transform: translateX(3px); /* 마우스 올리면 살짝 이동 */
}

/* 커뮤니티 내부 하위 메뉴 스타일 (이전 질문 답변 반영) */
.sitemap-group ul ul {
    margin-top: 8px;
    margin-left: 10px; /* ㄴ 표시를 위해 왼쪽 여백 조절 */
    padding-left: 0;
    border-left: none; /* 기존 선은 제거 */
}

.sitemap-group ul ul li {
    margin-bottom: 10px;
}

.sitemap-group ul ul a {
    font-size: 14px;
    color: #777; /* 상위 메뉴보다 약간 흐리게 */
    display: flex;
    align-items: center;
}

/* ㄴ 기호 구현 */
.sitemap-group ul ul a::before {
    content: '└'; /* ㄴ 모양의 특수 기호 */
    margin-right: 8px;
    color: #bbb; /* 기호 색상을 살짝 연하게 */
    font-weight: normal;
}

/* 마우스 호버 시 강조 */
.sitemap-group ul ul a:hover {
    color: #1f77ff;
}

/* ==================================================
   정책안내 페이지 스타일 (policy.php)
   ================================================== */

.policy-container {
    max-width: 900px;
    margin: 40px auto 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.policy-content h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 800;
    color: #111;
    margin-bottom: 20px;
}

.policy-content h3 .material-symbols-outlined {
    color: #1f77ff;
    font-size: 28px;
}

.policy-text {
    background: #ffffff;
    padding: 30px;
    border-radius: 15px;
    border: 1px solid #eee;
    line-height: 1.8;
    color: #444;
}

.policy-text p {
    margin-bottom: 15px;
}

.policy-text ul, .policy-text ol {
    padding-left: 20px;
}

.policy-text li {
    margin-bottom: 10px;
}

/* 면책공고 박스 강조 */
.gray-box .policy-text {
    background: #f8f9fa;
    border-color: #e9ecef;
    font-size: 14px;
    color: #666;
}

@media (max-width: 768px) {
    .policy-text {
        padding: 20px;
    }
    .policy-content h3 {
        font-size: 19px;
    }
}

/* =========================
   GUIDE PAGE
========================= */

.guide-wrap{
    max-width:1100px;
    margin:0 auto;
    padding:50px 20px;
}

.guide-hero{
    background:linear-gradient(135deg,#23a0d1,#1f77ff);
    color:#fff;
    padding:55px 35px;
    border-radius:18px;
    margin-bottom:40px;
}

.guide-hero h1{
    font-size:40px;
    margin-bottom:15px;
    line-height:1.4;
}

.guide-hero p{
    font-size:18px;
    line-height:1.8;
}

.guide-box{
    background:#fff;
    border:1px solid #eee;
    border-radius:16px;
    padding:35px;
    margin-bottom:28px;
}

.guide-box h2{
    font-size:30px;
    margin-bottom:18px;
}

.guide-box h3{
    font-size:22px;
    margin:25px 0 12px;
}

.guide-box p,
.guide-box li{
    line-height:1.9;
    color:#444;
}

.guide-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.guide-card{
    border:1px solid #eee;
    border-radius:14px;
    padding:24px;
    background:#fafafa;
}

.cta-search{
    text-align:center;
    padding:40px;
    background:#f7fbff;
    border-radius:18px;
}

.cta-search a{
    display:inline-block;
    margin-top:18px;
    padding:14px 28px;
    background:#23a0d1;
    color:#fff;
    border-radius:10px;
    font-weight:700;
}

@media(max-width:768px){
    .guide-grid{
        grid-template-columns:1fr;
    }

    .guide-hero h1{
        font-size:28px;
    }

    .guide-box{
        padding:24px;
    }
}

/* =========================
   서비스 목적 정하기
========================= */

.service-table{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:25px;
}

.service-row{
    display:grid;
    grid-template-columns:1.4fr 60px 1fr;
    align-items:center;
    gap:12px;
    padding:16px;
    border:1px solid #eee;
    border-radius:14px;
    background:#fff;
}

.need{
    font-weight:700;
    color:#222;
}

.arrow{
    text-align:center;
    font-size:22px;
    color:#999;
}

.result{
    text-align:center;
    padding:12px;
    border-radius:10px;
    color:#fff;
    font-weight:800;
}

/* 컬러 */
.blue{background:#23a0d1;}
.green{background:#10b981;}
.orange{background:#f59e0b;}
.teal{background:#14b8a6;}
.purple{background:#8b5cf6;}
.pink{background:#ec4899;}
.brown{background:#a16207;}
.gray{background:#6b7280;}
.navy{background:#334155;}
.sky{background:#0ea5e9;}
.red{background:#ef4444;}

@media(max-width:768px){

.service-row{
    grid-template-columns:1fr;
    text-align:center;
}

.arrow{
    transform:rotate(90deg);
}
}

/* =========================
   컬럼 페이지
========================= */

.column-page{
    padding:60px 0;
    background:#ffffff;
}

.column-hero{
    background:#fff;
    border:1px solid #eee;
    border-radius:18px;
    padding:35px;
    margin-bottom:30px;
}

.column-hero h1{
    font-size:36px;
    margin-bottom:12px;
    color:#111;
}

.column-hero p{
    color:#666;
    line-height:1.8;
}

.column-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
}

.column-card{
    background:#fff;
    border:1px solid #eee;
    border-radius:16px;
    padding:26px;
    transition:.2s;
}

.column-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 28px rgba(0,0,0,.06);
}

.badge{
    display:inline-block;
    padding:6px 10px;
    background:#eef6fb;
    color:#23a0d1;
    border-radius:30px;
    font-size:13px;
    font-weight:700;
    margin-bottom:14px;
}

.column-card h2{
    font-size:24px;
    line-height:1.45;
    margin-bottom:12px;
}

.column-card h2 a{
    color:#111;
}

.column-card h2 a:hover{
    color:#23a0d1;
}

.column-date{
    font-size:14px;
    color:#888;
    margin-bottom:14px;
}

.column-card p{
    color:#555;
    line-height:1.8;
}

.read-more{
    display:inline-block;
    margin-top:18px;
    padding:11px 15px;
    background:#23a0d1;
    color:#fff;
    border-radius:10px;
    font-size:14px;
    font-weight:700;
}

@media(max-width:768px){

.column-grid{
    grid-template-columns:1fr;
}

.column-hero h1{
    font-size:28px;
}

.column-card h2{
    font-size:20px;
}

}

/* =========================
   방문자(카운터)
========================= */

.copyright-area{
    position:relative;
    display:inline-block;
    cursor:pointer;
}

.visit-box{
    position:absolute;
    left:50%;
    bottom:30px;
    transform:translateX(-50%);
    background:#222;
    color:#fff;
    padding:10px 15px;
    border-radius:8px;
    font-size:13px;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    transition:all .25s ease;
    z-index:9999;
    box-shadow:0 5px 15px rgba(0,0,0,.2);
}

.copyright-area:hover .visit-box{
    opacity:1;
    visibility:visible;
    bottom:40px;
}

@media(max-width:768px){
    .copyright-area:active .visit-box,
    .copyright-area:focus-within .visit-box{
        opacity:1;
        visibility:visible;
        bottom:40px;
    }
}

/* =========================
   별점
========================= */

#stars span {
    color:#ccc;
    font-size:24px;
    cursor:pointer;
}

#stars span.active {
    color:gold;
}

/* =========================
   카카오 광고 (모바일 쏠림 완벽 해결)
========================= */

/* PC 설정 */
.cta-box {
    display: grid;
    grid-template-columns: 1fr 250px;
    gap: 30px;
    align-items: center;
    background: linear-gradient(135deg,#23a0d1,#1f77ff);
    padding: 45px;
    /* 수정: border-radius를 0으로 변경하여 라운딩 제거 */
    border-radius: 0 !important; 
    min-height: 300px;
	margin-bottom: 0 !important;
}

.cta-ad {
    width: 250px;
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 안전장치: 광고 영역 자체도 직각 유지 */
    border-radius: 0 !important;
}

/* 모바일 설정 */
@media (max-width: 768px) {
    .cta-box {
        grid-template-columns: 1fr !important;
        padding: 30px 20px !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        /* 모바일에서도 라운딩은 절대 금지 */
        border-radius: 0 !important;
    }

    .cta-content {
        margin-bottom: 25px;
        text-align: center !important;
    }

    .cta-ad {
        width: 100% !important;
        max-width: 250px;
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
    }

    .kakao_ad_area {
        margin: 0 auto !important;
        display: block !important;
        /* 수정: scale 변형 제거 (보류의 결정적 원인) */
        transform: none !important; 
        margin-bottom: 0 !important;
    }
}

/* =========================
   자유게시판 스타일 (PC + 모바일 통합본)
========================= */
.freeboard-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.freeboard-table thead tr {
    background: #f8fafc;
    border-bottom: 1px solid #eee;
}

.freeboard-table th {
    padding: 16px 10px;
    font-size: 14px;
    font-weight: 800;
    color: #111;
    text-align: center;
}

.freeboard-table td {
    padding: 18px 10px;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.freeboard-table tr:hover {
    background: #fafcff;
}

/* 제목 스타일 */
.post-link {
    color: #7a0026; /* 고려대 느낌 와인색 */
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
}

.post-link:hover {
    color: #23a0d1;
}

.title-flex {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cmt-num {
    color: #ef4444;
    font-size: 13px;
    font-weight: 700;
}

/* 공지사항 행 배경색 */
.notice-row {
    background: #fff8ef !important;
}

/* =========================
   모바일 전용 (768px 이하) - 카드형 변환
========================= */
@media (max-width: 768px) {
    /* 1. 전체 게시판을 감싸는 박스의 테두리와 배경을 제거 (외곽 중복 방지) */
    .detail-card {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
    }

    /* 2. 테이블 구조를 완전히 해제하여 리스트 형태로 변환 */
    .freedetail-table, 
    .freedetail-table thead, 
    .freedetail-table tbody, 
    .freedetail-table tr, 
    .freedetail-table td {
        display: block !important;
        width: 100% !important;
    }

    /* 3. 테이블 헤더(번호, 지역, 제목 등) 숨기기 */
    .freedetail-table thead {
        display: none !important;
    }

    /* 4. 각 게시글(행)을 개별 흰색 카드로 만들기 */
    .freedetail-table tr {
        margin-bottom: 12px !important;
        padding: 18px 15px !important;
        border: 1px solid #eee !important;
        border-radius: 12px !important;
        background: #fff !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important;
        box-sizing: border-box !important;
    }

    /* 5. 각 셀의 여백과 배경 제거 */
    .freedetail-table td {
        padding: 0 !important;
        border: none !important;
        background: none !important;
        text-align: left !important;
    }

    /* 번호는 숨기기 */
    .col-id { display: none !important; }

    /* 지역 배지 간격 */
    .col-region { margin-bottom: 8px !important; }

    /* 제목 스타일 */
    .col-title { margin-bottom: 12px !important; }
    .col-title .post-link {
        font-size: 17px !important;
        font-weight: 700 !important;
        display: block !important;
    }

    /* 6. 핵심: 작성자 | 조회 | 날짜 | 번호 한 줄 정렬 */
    .mobile-feed-row .col-author, 
    .mobile-feed-row .col-view, 
    .mobile-feed-row .col-date,
    .mobile-feed-row .col-id {
        display: inline-block !important; /* 가로로 나열 */
        width: auto !important;           /* 자기 크기만큼만 차지 */
        margin: 0 !important;
        padding: 0 !important;
        font-size: 13px !important;
        color: #999 !important;
        vertical-align: middle !important;
        float: none !important;
    }

    /* 구분선 (|) 넣기: 작성자 뒤, 조회수 뒤, 날짜 뒤에 추가 */
    .mobile-feed-row .col-author::after, 
    .mobile-feed-row .col-view::after,
    .mobile-feed-row .col-date::after {
        content: "|";
        margin: 0 8px;
        color: #eee;
        display: inline-block;
    }

    /* 마지막 요소인 번호 뒤에는 구분선 제거 */
    .mobile-feed-row .col-id::after {
        content: none !important;
    }

    /* 번호 앞에 '#' 기호나 텍스트 추가 (선택사항) */
    .mobile-feed-row .col-id::before {
        content: "No. ";
    }

    .mobile-feed-row .col-view::before {
        content: "조회 ";
    }

    }
	
/* =========================
   메인 검색바 개선
========================= */

.top-search-bar{
    width:100%;
    max-width:900px;

    margin:0 auto;

    display:flex;
    align-items:center;
    gap:10px;
}

.top-search-bar input{
    flex:1;
    min-width:0;

    height:56px;
    padding:0 18px;

    border:none;
    border-radius:12px;

    background:#fff;

    font-size:15px;

    box-sizing:border-box;
}

.top-search-bar select{
    width:180px;
    height:56px;

    padding:0 14px;

    border:none;
    border-radius:12px;

    background:#fff;

    font-size:15px;

    box-sizing:border-box;

    appearance:none;
    -webkit-appearance:none;
}

.top-search-bar button{
    width:110px;
    height:56px;

    border:none;
    border-radius:12px;

    background:#111827;
    color:#fff;

    font-size:15px;
    font-weight:800;

    cursor:pointer;

    box-sizing:border-box;
}

@media(max-width:768px){

    .hero .wrap{
        padding-left:16px;
        padding-right:16px;
    }

    .top-search-bar{
        width:100%;
        display:flex;
        flex-direction:column;
        gap:12px;
    }

    .top-search-bar input,
    .top-search-bar select,
    .top-search-bar button{

        display:block;

        width:100%;
        max-width:100%;

        height:56px;
        min-height:56px;

        padding:0 16px;

        box-sizing:border-box;

        border-radius:12px;

        font-size:16px;
    }

    .top-search-bar button{
        padding:0;
    }
}

/* =========================
   커뮤니티 공통 레이아웃
========================= */

.community-layout{
    display:grid;
    grid-template-columns:300px 1fr;
    gap:40px;
    align-items:start;
}

.community-layout main{
    min-width:0;
}

.side-menu-box{
    background:#fff;
    border:1px solid #ececec;
    border-radius:16px;
    padding:20px;
    position:sticky;
    top:100px;
    height:fit-content;
}

.side-menu-box h2{
    font-size:20px;
    font-weight:800;
    margin-bottom:20px;
    padding-bottom:10px;
    border-bottom:2px solid #23a0d1;
}

.side-nav{
    list-style:none;
}

.side-nav li{
    margin-bottom:8px;
}

.side-nav a{
    display:block;
    padding:12px 15px;
    border-radius:10px;
    background:#f9f9f9;
    color:#444;
    font-weight:700;
    transition:.2s;
}

.side-nav a:hover{
    background:#23a0d1;
    color:#fff;
}

@media(max-width:768px){

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

    .side-menu-box{
        position:static;
    }

    .column-grid{
        grid-template-columns:1fr;
    }
}

/* =========================
   발달장애인 연대표
========================= */

.timeline-list{
    margin-top:30px;
    padding-left:28px;
    border-left:3px solid #23a0d1;
}

.timeline-row{
    position:relative;
    margin-bottom:38px;
}

.timeline-row:last-child{
    margin-bottom:0;
}

.timeline-row::before{
    content:"";
    position:absolute;
    left:-36px;
    top:6px;

    width:14px;
    height:14px;

    background:#23a0d1;

    border-radius:50%;

    border:4px solid #fff;

    box-shadow:0 0 0 2px #23a0d1;
}

.timeline-year{
    display:inline-block;

    margin-bottom:10px;

    font-size:20px;
    font-weight:800;

    color:#23a0d1;
}

.timeline-text{
    margin-bottom:10px;

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

    color:#444;
}

.timeline-text strong{
    color:#111;
}

/* 모바일 */
@media(max-width:768px){

    .timeline-list{
        padding-left:22px;
    }

    .timeline-row::before{
        left:-30px;
        width:12px;
        height:12px;
    }

    .timeline-year{
        font-size:18px;
    }

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

/* =========================
   SEARCH FORM (검색 영역)
========================= */

.search-form {
    display: flex;
    gap: 10px;
    align-items: stretch;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

/* 검색창 */
.search-input {
    flex: 2;
    padding: 12px 14px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    outline: none;
}

/* 드롭다운 개선 */
.search-select {
    flex: 0 0 140px;   /* 길이 고정 (핵심) */
    padding: 12px 14px;
    font-size: 15px;

    border: 1px solid #ddd;
    border-radius: 8px;

    background-color: #fff;
    appearance: none;        /* 기본 화살표 스타일 제거 */
    -webkit-appearance: none;
    -moz-appearance: none;

    cursor: pointer;
}

/* 버튼 */
.search-btn {
    flex: 0 0 110px;
    padding: 12px 14px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    background: #2d6cdf;
    color: #fff;
    cursor: pointer;
}

/* hover */
.search-btn:hover {
    background: #1f56b8;
}

/* 모바일 */
@media (max-width: 768px) {

    .search-form {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    /* 핵심: flex 영향 완전 차단 */
    .search-input,
    .search-select,
    .search-btn {
        width: 100% !important;
        flex: none !important;

        height: 44px;
        box-sizing: border-box;

        font-size: 16px;

        border: 1px solid #ddd;
        border-radius: 8px;

        padding: 0 12px;
        margin: 0;

        appearance: none;
        -webkit-appearance: none;
    }

    .search-input {
        background: #fff;
    }

    .search-select {
        background: #fff;
    }

    .search-btn {
        background: #2d6cdf;
        color: #fff;
        border: none;

        display: block;
        text-align: center;
        line-height: 44px;
        padding: 0;
    }
}

/* =========================
   유관기관 스타일 (통합)
========================= */

/* 전체 레이아웃: 사이드바(300px) + 콘텐츠(1fr) */
.community-grid {
    display: grid;
    grid-template-columns: 300px 1fr; 
    gap: 40px;
    margin-top: 30px;
    align-items: start; /* 사이드바가 길어져도 콘텐츠가 늘어나지 않게 함 */
}

.section {
    background-color: #fff !important;
}

/* 좌측 메뉴 */
.side-menu-box {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 16px;
    padding: 20px;
    height: fit-content;
    position: sticky;
    top: 100px; /* 스크롤 시 상단 고정 위치 */
    z-index: 10;
}

.side-menu-box h2 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #23a0d1;
}

.side-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.side-nav li {
    margin-bottom: 8px;
}

.side-nav a {
    display: block;
    padding: 12px 15px;
    border-radius: 10px;
    color: #444;
    background: #f9f9f9;
    font-weight: 700;
    transition: 0.2s;
    text-decoration: none;
}

.side-nav a:hover, .side-nav a.active {
    background: #23a0d1;
    color: #fff;
}

/* 우측 콘텐츠 내부 그리드: 2열 배치 */
.guide-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* 로고 이미지 박스: 380x95 규격 */
.card-img-box {
    width: 100%;
    max-width: 380px; 
    height: 95px;    
    overflow: hidden;
    margin: 0 auto 20px; 
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-img-box img {
    width: auto;
    max-width: 100%;  
    height: auto;
    max-height: 100%; 
    object-fit: contain; 
}

/* 버튼 스타일: 교육부 색상(#23a0d1) */
.btn-link-unified {
    width: 100%; 
    padding: 12px; 
    background: #23a0d1;
    color: #fff; 
    border-radius: 6px; 
    text-align: center; 
    text-decoration: none; 
    font-weight: 500;
    display: block;
    transition: background 0.2s ease;
}

.btn-link-unified:hover {
    background: #1b8bb8;
}

/* =========================
   유관기관 모바일 대응 (768px 이하)
========================= */
@media screen and (max-width: 768px) {
    /* 사이드바와 콘텐츠를 세로로 나열 */
    .community-grid { 
        grid-template-columns: 1fr; 
        gap: 20px;
    }
    
    .side-menu-box { 
        position: static; 
        margin-bottom: 10px; 
    }

    /* 부처 카드도 모바일에서는 1열로 변경 */
    .guide-grid {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }
}

/* =========================
   index 아이콘 관련
========================= */
    /* 시설 유형별 카드 메뉴 스타일 */
    .type-menu-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
        margin: 40px 0;
    }
    .type-card {
        background: #fff;
        border-radius: 15px;
        padding: 35px 20px;
        text-align: center;
        text-decoration: none;
        color: #333;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
        border: 1px solid #eee;
    }
    .type-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 10px 25px rgba(31, 119, 255, 0.2);
        border-color: #1f77ff;
    }
    .type-card h3 { font-size: 1.4rem; margin-bottom: 10px; color: #222; }
    .type-card p { color: #888; font-size: 0.9rem; }
    
    /* 강조 색상 */
    .type-card.active { border-left: 8px solid #1f77ff; }
	
	/* 최신글 가운데 정렬 */
	.community-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:22px;
    width:100%;
}

@media(max-width:768px){
    .community-grid{
        grid-template-columns:1fr;
    }
}

.type-icon{
    font-size:24px;
    margin-bottom:18px;
    color:#222;
}

.type-card:hover .type-icon{
    transform:translateY(-2px);
}

.type-icon i{
    transition:.2s;
}