/* 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:#fafafa;
    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 {
    padding: 60px 0;
    background-color: #f8fafc;
}

/* 사이트맵 컨테이너 (그리드 레이아웃) */
.sitemap-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

/* 각 메뉴 그룹 박스 */
.sitemap-group {
    background: #ffffff;
    padding: 30px;
    border-radius: 20px;
    border: 1px solid #edf2f7;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* 그룹 제목 (기본 메뉴, 시설별 찾기 등) */
.sitemap-group h3 {
    font-size: 20px;
    font-weight: 800;
    color: #1a202c;
    margin-bottom: 20px;
    padding-left: 12px;
    border-left: 4px solid #1f77ff; /* 파란색 포인트 바 */
    line-height: 1;
}

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

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

/* 내부 그리드 (시설별 찾기 2단 정렬) */
.sitemap-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 15px;
}

/* 링크 스타일 */
.sitemap-group a {
    color: #4a5568;
    font-size: 15px;
    text-decoration: none;
    transition: color 0.2s;
    display: inline-block;
}

.sitemap-group a:hover {
    color: #1f77ff;
    text-decoration: underline;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .sitemap-container {
        grid-template-columns: 1fr; /* 모바일에선 한 줄로 */
    }
    
    .sitemap-grid {
        grid-template-columns: 1fr; /* 시설별 찾기도 모바일에선 한 줄로 */
    }
}

/* ==================================================
   정책안내 페이지 스타일 (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:#f8fafc;
}

.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;
    }
}