@charset "utf-8";
:root {
 	    --gold-point: #b8860b;
		--point-gold: #b8860b;
		--point-blue: #2c5a94;
		--point-navy: #001A70;
		--bg-light: #f8f9fa;
		--bg-matte: #f5f5f7;
		--line-gray: #eee;
		--text-black: #222;
		--text-sub: #666;
		--header-pc-height:130px; /* 로고+메뉴 높이 확보 */
	    --sheader-pc-height: 220px; /* 로고+메뉴 높이 확보 */
		/* 1200px / 메뉴 6개 = 정확히 200px */
		--menu-width: 200px;
		--white:#ffffff;
		--blue:#0027b0;
	}

    body { font-family: 'Pretendard', sans-serif; background-color: var(--bg-matte); color: var(--text-dark); margin: 0; }
	/* [Common] */
	* { margin:0; padding:0; box-sizing:border-box; font-family:'Pretendard', sans-serif; letter-spacing: -0.04em; }
	ul { list-style:none; }
	a { text-decoration:none; color:inherit; }
	.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 0px; }


	/* [PC Header] */
	header.pc-header { 
		width:100%; 
		/* height: var(--header-pc-height); */
		background:#fff;
		position:fixed;
		top:0; 
		z-index:10000; 
		/* border-bottom:1px solid var(--line-gray);  */
	}
	main { padding-top: var(--header-pc-height); }
	smain { padding-top: var(--sheader-pc-height) !important; }

	 	/* 헤더 상단 레이아웃 */
    .header-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0;
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
    }
	/*
	.header-top { 
		height: 90px; display: flex; justify-content: center; align-items: center; 
		border-bottom: 1px solid #f9f9f9;
	}
	.logo { font-size:2.2rem; font-weight:800; color: var(--point-blue); cursor: pointer; }
     */

    /* 왼쪽: 클리닉 명칭 */
    .header-left {
        flex: 1;
        display: flex;
        align-items: center;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-dark);
        letter-spacing: -0.02em;
    }
    .header-left .clinic-sub {
        color: var(--point-navy);
        margin-right: 8px;
		
        font-weight: 800;
    }

    /* 중앙: 로고 */
    .header-top .logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .header-top .logo img {
        height: 45px; /* 로고 크기 조정 */
        display: block;
    }

    /* 오른쪽: 로그인/회원 메뉴 */
    .header-right {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 20px;
    }
    .member-link {
        font-size: 0.85rem;
        color: var(--text-gray);
        text-decoration: none;
        transition: color 0.3s;
    }
    .member-link:hover {
        color: var(--point-blue);
    }
    
    /* 관리자 버튼 스타일 */
    .admin-btn {
        background: var(--point-blue);
        color: #fff !important;
        padding: 5px 12px;
        border-radius: 20px;
        font-weight: 600;
    }
     
	/* 2단: 메뉴 영역 */
	.header-bottom { 
		height: 60px; background: var(--point-navy);color:var(--white); border-top:1px solid #c4e4f4; 
	}

	/* [PC Navigation - 메뉴 간 구분선 스타일 수정] */
	.pc-nav-wrap { 
		max-width: 1200px; margin: 0 auto; height: 100%; 
		display: flex; justify-content: center;
	}
	.pc-main-menu { 
		display:flex; width: 100%; height: 100%; 
	}
	
    .pc-main-menu > li { 
            width: var(--menu-width); 
			height: 100%; 
			position: relative; /* 구분선 배치를 위한 기준점 */
			display: flex;
			align-items: center;
		}

	/* 대메뉴 사이의 구분선 (|) 구현 */
	/* 첫 번째 메뉴를 제외한 나머지 메뉴 왼쪽에 세로 바 생성 */
	.pc-main-menu > li:not(:first-child)::before {
		content: '';
		display: block;
		width: 1px;
		height: 14px; 
		
		/* 1. 색상 수정: 네이비 배경(var(--point-navy)) 위에서 잘 보이도록 흰색 투명도 적용 */
		background-color: rgba(255, 255, 255, 0.3); 
		
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		
		/* 2. 우선순위 보장: 배경이나 링크에 가려지지 않게 함 */
		z-index: 1;
	}

	.pc-main-menu > li > a { 
		width: 100%; height: 100%; display: flex; align-items: center; 
		border-left: 0 !important; /* 기존 라인 확실히 제거 */
		justify-content: center; font-weight:700; font-size:1.1rem; transition: 0.3s; 
		position: relative;
		color: #fff;
		z-index: 2;
	}
	
	/* 마지막 메뉴의 오른쪽 라인도 제거 */
	.pc-main-menu > li:last-child > a { 
		border-right: 0;
	}

	.pc-main-menu > li.active > a { 
		color:var(--point-blue); 
		background: #fcfcfc !important;
	}

	.pc-main-menu > li:hover > a { 
		color:var(--point-blue); 
		background: #fcfcfc; 
	}

	/* [Mega Menu 스타일은 유지하되 라인만 정리] */
	.mega-menu-bg { 
		position:absolute; 
		left:0; width:100%; 
		background:rgba(255,255,255,1.0); height:0; overflow:hidden; transition: 0.3s ease; 
		box-shadow: 0 15px 20px rgba(0,0,0,0.05); border-top: 1px solid #f5f5f5; 
	}
	
	.mega-menu-inner { 
		max-width: 1200px; margin: 0 auto; padding: 30px 25px 50px; 
		display: flex; justify-content: center;
	}	
	
	.submenu-column { 
		width: var(--menu-width);
		text-align: center; 
		flex: none;
	}
	.submenu-column li a { display:block; padding:10px 0; font-size:0.95rem; color:#777; }
	.submenu-column li a:hover { color: var(--point-blue); font-weight: 600; }

	/* [Mobile Header] */
	.m-header { 
		display:none; height:60px; justify-content:space-between; align-items:center; 
		padding:0 20px; border-bottom:1px solid var(--line-gray); position:fixed; 
		top:0; width:100%; background:#fff; z-index:10001; 
	}
	.m-nav-wrap { 
		 position:fixed;
		 top:0; 
		 right:-100%; 
		 width:300px; 
		 height:100%; 
		 background:#fff; 
		 z-index:20000; 
		 transition:0.4s; 
		 box-shadow:-5px 0 15px rgba(0,0,0,0.1);
		 /* --- 여기서부터 추가/수정 --- */
		display: flex;
		flex-direction: column; /* 헤더와 바디를 세로로 배치 */
	 
	 }
	.m-nav-wrap.active { right:0; }
	
	
	.m-nav-head { padding: 25px 20px; border-bottom: 2px solid var(--point-blue); display: flex; justify-content: space-between; align-items: center; }
	.m-main-menu > li { border-bottom: 1px solid #f0f0f0; }
	/*.m-main-menu > li > a { display: flex; justify-content: space-between; padding: 18px 20px; font-weight: 700; } */
    .m-main-menu > li > a { display: block; padding: 18px 20px; font-weight: 700; font-size: 1.1rem; } 

	.m-sub-menu { display: none; background: #f9f9f9; padding: 10px 0; }
	.m-sub-menu li a { display: block; padding: 12px 30px; font-size: 0.95rem; border-bottom: 1px solid #eee; }
	.m-header .logo { font-size:1.2rem; font-weight:800; color:var(--point-blue); }
	.m-open-btn { font-size: 1.5rem; cursor: pointer; }
	.overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); display:none; z-index:15000; }
	
	
	/* [Footer] */
	footer { background: #f1f1f1; padding: 60px 0 140px; border-top: 1px solid var(--line-gray); }
	footer .container { display: flex; justify-content: space-between; align-items: flex-end; }
	.footer-info { line-height: 1.8; color: #777; font-size: 0.9rem; }
	.footer-right { text-align: right; }
	.footer-links { display: flex; gap: 20px; justify-content: flex-end; margin-bottom: 15px; }
	.footer-links a { font-weight: 700; color: #444; }
	.copyright { color: #bbb; font-size: 0.85rem; }

	/* [Footer CTA] */
	.footer-cta { 
		position: fixed; bottom: 0; width: 100%; height: 85px; 
		background: var(--point-navy); color: #fff; z-index: 9999; 
		display: flex; align-items: center; box-shadow: 0 -5px 20px rgba(0,0,0,0.2);
	}
	.footer-cta .container { display: flex; justify-content: space-between; align-items: center; }
	/* 	.footer-cta .container { display: flex; justify-content: space-between; align-items: center; gap: 20px; } */
	.cta-text span { font-size: 0.9rem; color: var(--gold-point); font-weight: 600; display: block; }
	/*.cta-text span { font-size: 0.9rem; color: var(--gold-point); font-weight: 600; display: block; margin-bottom: 2px; } */
	.cta-text strong { font-size: 1.25rem; font-weight: 700; }
	/* .cta-text strong { font-size: 1.25rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; } */


	.tel-btn { 
		background: var(--gold-point); color: #fff; padding: 12px 30px; border-radius: 50px; 
		display: flex; align-items: center; gap: 15px; font-weight: 800; font-size: 1.4rem;
	}
/*.tel-btn { 
	background: var(--gold-point); color: #fff !important; 
	padding: 10px 25px; border-radius: 50px; 
	display: flex; align-items: center; gap: 15px; 
	text-decoration: none; transition: 0.3s;
	}
	*/
	
	.tel-btn .btn-label { font-size: 0.95rem; font-weight: 600; border-right: 1px solid rgba(255,255,255,0.3); padding-right: 15px; }
	.tel-btn .btn-number { font-size: 1.5rem; font-weight: 800; letter-spacing: 0.02em; }
	.tel-btn:hover { background: #a3780a; transform: translateY(-2px); }

/* --- 모바일 화면 반응형 스타일 (화면 너비 768px 이하일 때) --- */
@media (max-width: 768px) {
    /* 1. 푸터 기본 패딩 조절 (하단 85px는 움직이는 하단 바(CTA)에 가려지지 않기 위함) */
    footer { 
        padding: 40px 0 105px; 
    }

    /* 2. 양옆으로 찢어지던 레이아웃을 위아래(세로) 정렬로 변경하고 가운데 정렬 */
    footer .container { 
        flex-direction: column; 
        align-items: center; 
        text-align: center;
        gap: 20px; 
    }

    /* 3. 주소, 병원명 등 글자가 모바일에서 단어 단위로 깔끔하게 떨어지도록 설정 */
    .footer-info { 
        font-size: 0.85rem; 
        line-height: 1.6;
        word-break: keep-all; /* 단어가 중간에 안 잘리고 다음 줄로 넘어가게 함 */
    }

    /* 4. 오른쪽 링크 영역도 가운데로 정렬 */
    .footer-right { 
        text-align: center; 
        width: 100%;
    }

    /* 5. 개인정보처리방침, 비급여안내 링크를 가로로 예쁘게 배치 */
    .footer-links { 
        justify-content: center; 
        margin-bottom: 10px; 
        gap: 25px; /* 링크 사이 간격을 넓혀서 터치하기 쉽게 변경 */
    }

    /* --- [Footer CTA] 최하단 고정 바 모바일 최적화 --- */
    .footer-cta {
        height: auto;
        padding: 12px 0;
    }
    
    .footer-cta .container {
        flex-direction: row; /* 하단 바는 모바일에서도 가로 정렬 유지 */
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 0 15px; /* 양옆 여백 */
    }

    .cta-text span {
        font-size: 0.8rem;
    }

    .cta-text strong {
        font-size: 1.05rem;
    }

    /* 전화걸기 버튼 크기를 모바일 화면에 맞게 축소 */
    .tel-btn {
        padding: 8px 18px;
        font-size: 1.1rem;
        gap: 8px;
    }
}

	/* [Responsive] */
	@media (max-width: 1024px) {
			header.pc-header { display:none; }
			.header-left, .header-right { display: none; } /* 모바일에서는 로고 중심 */
            .header-top .logo { position: static; transform: none; margin: 0 auto; }
			/* 로고 컨테이너: 높이를 고정하고 내부 이미지를 정렬 */
				.m-header .logo { 
					display: flex; 
					align-items: center; 
					height: 40px; /* 모바일 헤더 높이에 맞게 조절 */
				}

				.m-header .logo img {
					width: auto;      /* 너비 자동 */
					max-width: 180px; /* 모바일에서 로고가 너무 커지지 않게 제한 */
					height: 100%;     /* 부모 높이에 맞춤 */
					object-fit: contain; /* 비율 유지하며 컨테이너 안에 쏙 들어가게 함 */
					flex-shrink: 0;   /* ★중요: 플렉스 박스 안에서 눌리는 것 방지 */
				}
				.m-nav-head {
						display: flex;             /* 요소들을 한 줄(가로)로 배치 */
						justify-content: space-between; /* 양 끝으로 벌림 (왼쪽: 제목, 오른쪽: 닫기버튼) */
						align-items: center;       /* 수직 방향 중앙 정렬 */
						padding: 15px 20px;        /* 상하좌우 여백 (디자인에 맞춰 조절) */
						border-bottom: 1px solid #eee; /* 하단 구분선 (선택사항) */
						background-color: #ffffff;    /* 배경색 고정 */
					}

					.m-nav-head h2 {
						margin: 0;                 /* 제목 기본 마진 제거 */
						padding: 0;
						font-size: 1.25rem;        /* 글자 크기 조절 */
						font-weight: 600;
						color: #333;
					}

					.m-close-btn {
						cursor: pointer;
						padding: 5px;              /* 클릭 영역 확보 */
					}

					.m-close-btn i {
						font-size: 1.5rem;         /* X 아이콘 크기 조절 */
						color: #000;               /* 아이콘 색상 */
					}

				/* 만약 헤더가 flex라면 로고와 메뉴 버튼 사이 간격을 벌려줌 */
				.m-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 10px 20px;
				}
				.m-nav-wrap {
						position: fixed;
						top: 0;
						right: -100%;
						width: 300px;
						height: 100%;
						background: #fff;
						z-index: 20000;
						display: flex;         /* flex 레이아웃 적용 */
						flex-direction: column; /* 위아래로 배치 */
						transition: 0.4s;
					}

					.m-nav-body {
						flex: 1;               /* 헤더를 제외한 나머지 공간 다 차지 */
						overflow-y: auto;      /* 이 공간에서만 스크롤 발생 */
						-webkit-overflow-scrolling: touch;
					}
		
			
					/* 모바일 서브메뉴 컨테이너 초기화 */
					.m-main-menu .submenu-column {
						display: none;      /* 기본적으로 숨김 (JS로 제어) */
						padding: 10px 0;
						background-color: #f8f9fa; /* 서브메뉴 배경색 차별화 */
						list-style: none;
						margin: 0;
						width:100%;
					}

/* 1. 서브메뉴 리스트 항목 - 가로 나열 방지 */
				.m-main-menu .submenu-column li {
					display: block !important; /* flex나 inline-block 방지 */
					width: 100% !important;
					padding: 0 !important;
					margin: 0 !important;
					border: none !important;
				}

				/* 2. 서브메뉴 링크 - 텍스트 정렬 및 들여쓰기 */
				.m-main-menu .submenu-column li a {
					display: block !important;
					padding: 12px 40px !important; /* 왼쪽 여백을 줘서 주메뉴와 구분 */
					font-size: 0.95rem !important;
					line-height: 1.4 !important;  /* 줄간격 확보 */
					color: #666 !important;
					text-align: left !important;
					white-space: normal !important; /* 글자가 길면 다음줄로 자연스럽게 넘어가게 함 */
					word-break: keep-all !important; 
				}

				/* 주메뉴 스타일 보완 (화살표 위치 등) */
				.m-main-menu > li > a {
					display: block;
					padding: 18px 20px;
					font-weight: 700;
					font-size: 1.1rem;
					border-bottom: 1px solid #eee;
					position: relative;
				}
					
					/* 4. 클릭했을 때 배경색 살짝 변경 (선택사항) */
					.m-main-menu .submenu-column li a:active {
						background: #e9ecef;
					}

				/* 화살표 아이콘을 위한 위치 설정 */
				.m-main-menu > li > a {
					position: relative;
					display: block;
				}

				/* 서브메뉴가 있는 항목에 화살표 표시 (FontAwesome 기준) */
				.m-main-menu > li.has-sub > a::after {
					content: '\f107'; /* 아래 화살표 */
					font-family: 'Font Awesome 6 Free';
					font-weight: 900;
					position: absolute;
					right: 20px;
					transition: 0.3s;
				}

				/* 메뉴가 열렸을 때 화살표 회전 */
				.m-main-menu > li.has-sub.open > a::after {
					transform: rotate(180deg);
				}
			 main { padding-top: 100px; }
			.container { padding: 25px 25px !important; }
			.hero h1 { font-size: 1.8rem !important; }
			.grid-3 { grid-template-columns: 1fr; }
			.loc-flex { flex-direction: column; gap: 40px; }
			 footer .container { flex-direction: column; text-align: center; align-items: center; gap: 30px; }
			.footer-right { text-align: center; }
			.footer-links { justify-content: center; }
			.cta-text { display: none; }
				 /* 모바일 하단 CTA 최적화 */
			.tel-btn { 
				width: 100%; justify-content: center; border-radius: 8px; 
				flex-direction: row; padding: 15px; gap: 10px;
			}
			.tel-btn .btn-label { border-right: none; padding-right: 0; font-size: 0.9rem; }
			.tel-btn .btn-number { font-size: 1.4rem; }

	}