/*
Theme Name: 
Theme URI: https://wd.daolplus.org
Author: DaolPlus
Description: 사회적 협동조합 다올플러스를 위한 맞춤형 테마입니다.
Version: 1.0.0
Text Domain: social-coop
*/

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Noto Sans KR", sans-serif; line-height: 1.6; color: #333; overflow-x: hidden; }
.site-header {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; height: 100px;
    /* 1. 시작 색상을 맑은 연하늘색으로 변경 */
    background-color: rgba(227, 242, 253, 0.7); 
    /* 2. 뒷배경이 흐릿하게 비치는 효과 추가 (유리 효과) */
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px);
    transition: background-color 0.3s;

    /* 스크롤 애니메이션 연결 */
    animation: header-transparency linear;
    animation-timeline: scroll();
    animation-range: 0px 100px;
}

/* 헤더가 투명해지는 효과 */
@keyframes header-transparency {
    from {
        background-color: rgba(227, 242, 253, 0.7);
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    to {
        background-color: rgba(255, 255, 255, 0.95);
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    }
}

/* 본문이 헤더 아래로 파고드는 효과 */
@keyframes body-slide-up {
    from {margin-top: 100px;}
    to {margin-top: 0px;}
}
@keyframes body-slide-up-mobile {
    from {margin-top: 70px;}
    to {margin-top: 0px;}
}

		.site-header .inner {max-width: 1200px;margin: 0 auto;padding: 0;display: flex;align-items: center;justify-content: space-between;height: 100px;}
		.mainbody{margin-top:100px; 
    	animation: body-slide-up linear;
    	animation-timeline: scroll();
    	animation-range: 0px 150px;
		}
		.mainlogo img { height: 100px; width:auto; display: block; }
		.mainlogo a { text-decoration: none; display: flex; align-items: center; }
		.gnb > ul { display: flex; gap: 10px; list-style: none; }
.gnb > ul > li { position: relative; }
.gnb > ul > li > a {
	display: inline-flex;
	align-items: center;
	padding: 10px 24px;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	color: #444;
	border-radius: 10px;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	position: relative;
  background: rgba(255, 255, 255, 0.5); /* 반투명한 흰색 배경 */
  border: 1px solid rgba(255, 255, 255, 0.3); /* 은은한 테두리 */
  margin: 0 5px;
}
.gnb > ul > li > a:hover, .gnb > ul > li.active > a {
	 background: linear-gradient(135deg, rgb(179, 229, 252) 0%, rgb(129, 212, 250) 100%);
   color: #fff;               /* 글자색 흰색으로 반전 */
   border: 1px solid transparent;
   box-shadow: 0 8px 15px rgba(129, 212, 250, 0.4); /* 하늘색 그림자 효과 */
   transform: translateY(-3px) scale(1.05); /* 살짝 커지면서 들림 */
}
/* 메뉴 사이에 얇은 구분선 (선택 사항) */
.gnb > ul > li:not(:last-child)::after {
    content: "";
    display: block;
    width: 1px;
    height: 12px;
    background-color: #eee;
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
}

        /* PC 서브메뉴 */
.gnb .sub {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            min-width: 200px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            padding: 10px 0;
            opacity: 0;
            visibility: hidden;
            transition: 0.25s;
            display: flex;
            flex-direction: column;
            z-index: 100;
	border-radius: 15px;
}

        .gnb li:hover > .sub { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
        .gnb .sub li { width: 100%; list-style: none; }
        .gnb .sub li a {
            display: block;
            padding: 10px 20px;
            font-size: 14px;
            color: #555;
            text-decoration: none;
        }
.gnb .sub li a:hover { 
	background-color: rgb(240, 248, 255);
	color: rgb(79, 195, 247);
}

		.btn-contact { padding: 10px 24px; background: #009688; color: #fff; border-radius: 10px; text-decoration: none; font-size: 14px; }
		.menu-toggle { display: none; font-size: 28px; cursor: pointer;}
.site-main{margin-top:100px;padding:20px;}
/* ======모바일========== */
@media (max-width: 768px) {
	.site-header,.site-header .inner { height: 80px;padding:0 10px !important;display:flex;justify-content:space-between;width:100%; }
	.mainlogo img { height: 60px; width:auto;}
	.btn-contact { display: none; }
	.menu-toggle { padding-right:20px;display: block; position: relative; z-index: 2100; color:#e0e;}
	.mainbody { margin-top: 80px; 
		/* 🔥 모바일용 애니메이션으로 변경 */
        animation: body-slide-up-mobile linear; 
        animation-timeline: scroll();
        animation-range: 0px 100px;
	}
	.gnb {
		position: fixed;
		top: 0;
		right: -100%;
		width: 80%;
		height: 100vh;
		background: #414141;
		z-index: 2000;
		padding-top: 20px;
		transition: 0.3s ease-in-out;
		box-shadow: -5px 0 15px rgba(0,0,0,0.1);
		overflow-y: auto;
	}
	/* 상단 타이틀 스타일 */
   .mo-menu-title {
       display: block !important;
       padding: 20px;
       font-size: 20px;
       font-weight: 700;
       color: #eee;
       background: #414141; /* 배경보다 한 단계 어두운 톤 */
       border-bottom: 1px solid #5D4037; /* 은은한 구분선 */
   }

	.gnb.open { right: 0; }
	.gnb > ul { flex-direction: column; width: 100%; padding: 0; }
	.gnb > ul > li {border-bottom: 1px solid rgba(255, 255, 255, 0.05); background: #3d3a33; width: 100%; }

	.gnb > ul > li > a {
		padding: 18px 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 17px;
		width: 100%;
		color:#fff;
		background: #3d3a33;
		box-shadow: 
            inset 0 1px 1px rgba(255, 255, 255, 0.1), /* 상단 미세한 빛 */
            0 2px 4px rgba(0, 0, 0, 0.2);
		border:none;
	}

	/* 📍 모바일 서브메뉴 위치 핵심 수정 */
	.gnb .sub {
		position: static;   /* 흐름에 배치 */
		display: none;      /* 기본 숨김 */
		opacity: 1;         /* 투명도 제거 */
		visibility: visible;
		transform: none !important; /* 🔥 PC용 중앙정렬 강제 해제 */
		left: auto;         /* 🔥 PC용 위치값 초기화 */
		box-shadow: none;
		background: #382a24;
		padding: 0;
		width: 100%;
		}
		.gnb > ul > li:not(.open) > a {background: #4d3a33 !important;}
	.gnb > ul > li.open > a{
    background: #2a1f1b !important; /* 확실히 진한 갈색 */
    color: #ffde00;      /* 글자색도 함께 변경하면 좋습니다 */
    font-weight: 700;
	}
	.gnb li.open > .sub { display: block; }
	.gnb .sub li{border-bottom: 1px solid #4d3a33; width: 100%;}
	.gnb .sub li a {
		position: relative;
		font-size: 15px;
		color: #ddd;
		padding: 12px 20px 12px 45px !important;
	}
    	/* 서브메뉴 앞의 그린색 점 */
		.gnb .sub li a::before {
			content: ""; 
    	position: absolute;
    	left: 25px; 
    	top: 50%;
    	transform: translateY(-50%);
    	width: 5px;
    	height: 5px;
    	background-color: #A2D067; /* 밝은 그린색 */
    	border-radius: 50%;
    	display: inline-block; /* 확실히 노출 */
		}
  /* 아이콘 가독성 */
	.gnb > ul > li.has-sub > a::after { content: "▼"; font-size: 10px; color: #8d6e63; transition: 0.3s; }
	.gnb > ul > li.open > a::after { transform: rotate(180deg); color: #ffde00; }
	  .gnb > ul > li:hover > a,
    .gnb > ul > li > a:hover {
        background-color: transparent !important; 
    		color: #32CD32 !important;
    }
	/* 하단 저작권 스타일 */
    .mo-menu-footer {
        display: block !important;
        margin-top: auto; /* 메뉴가 적을 때 바닥에 고정 */
        padding: 30px 20px;
        font-size: 12px;
        color: #A1887F;
        text-align: center;
        border-top: 1px solid #5D4037;
    }
}

/************************************************************/


/*************  footer **********************/
        footer {
            width: 100%;
            font-size: 14px;
        }
        .footer-inner {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* 1. 푸터 상단 (메뉴바) */
        .footer-top {
            background-color: #383e4b;
            border-bottom: 1px solid #4a505c;
            height: 50px;
            display: flex;
            align-items: center;
        }

        .footer-top .footer-inner {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .footer-menu {list-style: none;display: flex;gap: 20px;}
        .footer-menu li a {color: #ccc;font-weight: 500;position: relative;}
        .footer-menu li a:hover { color: #fff; }

        /* 2. 푸터 하단 (정보 영역) */
        .footer-bottom {
            background-color: #232830;
            padding: 30px 0;
            color: #ccc;
        }

        .footer-bottom .footer-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .footerb-left {
            display: flex;
            align-items: center;
            gap: 40px;
        }

        .footer-logo {
            display: flex;
            align-items: center;
        }
        
        .footer-logo img { 
            height: 100px; 
            width: auto; 
            object-fit: contain; 
        }

        .addr-info address {
            font-style: normal;
            line-height: 1.6;
            font-size: 13px;
        }

        .addr-info span {
            margin-right: 10px;
        }

        .copyright {
            margin-top: 8px;
            display: block;
            color: #888;
            font-size: 12px;
        }

        .footerb-right {
            display: flex;
            gap: 10px;
        }

        .mark-box {
            width: 50px;
            height: 50px;
            background-color: #fff;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 10px;
            color: #333;
            font-weight: bold;
            text-align: center;
            line-height: 1.2;
        }
        
        .mark-box img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }

        .footer-right {
            display: flex;
            align-items: center;
        }

        .family-site-select {
            background-color: #2b303b;
            color: #ccc;
            border: 1px solid #555;
            padding: 5px 10px;
            margin-right: 15px;
            font-size: 13px;
            cursor: pointer;
        }

        .footerbtn-top {
            background-color: #222;
            color: #fff;
            padding: 0 15px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;
            border-left: 1px solid #4a505c;
            cursor: pointer; /* 클릭 가능하다는 표시 */
        }
				.addrbr{display:none}
        /* 반응형 */
        @media (max-width: 768px) {
        	.footer-top .footer-inner {
        		flex-direction: row;
        		justify-content: space-between;
        		align-items: center;
        		padding: 0 15px;
        		height: 50px;   
           }
           .footer-menu {padding-left:10px;gap: 20px;list-style: none;}
           .footer-menu i {font-size: 20px;}
            
           .footer-bottom .footer-inner {
                flex-direction: column;
                align-items: flex-start;
                gap: 20px;
           }
           .footerb-left { flex-direction: column; align-items: flex-start; gap: 20px; }
           .footerb-right { align-self: flex-start; }
           address{word-break: keep-all;}
           .addrbr{display:block}
        }