@charset 'utf-8';

:root {
	--color-bg: #ffffff; /* 전체 배경 */
	--color-surface: #ffffff; /* 카드/섹션 배경 */
	--color-surface-soft: #ffffff;
	--color-primary: #1d4585; /* 메인 블루 */
	--color-primary-rgb: 29, 69, 133; /* 메인 블루 RGB for rgba(...) usage */
	--color-primary-soft: #1d4ed8;
	--color-accent-red: #dc143c; /* 크림슨 레드 포인트 */
	--color-text-main: #222;
	--color-text-sub: #52565e;
	--color-text-sub-dark: #b8b0b0;
	--color-border-subtle: #cacaca;
	
        --theme-primary: #4a69bd;      
        --theme-dark: #2c3e50;          
        --theme-gradient: linear-gradient(135deg, #2c3e50 0%, #4a69bd 100%);
        --mobile-bar-height: 70px;
	--radius-sm: 0.5rem;
	--radius-md: 0.75rem;
	--radius-lg: 1rem;
	--radius-xl: 1.5rem;
	--shadow-soft: 0 0.2rem 0.2rem rgba(50, 50, 50, 0.25);
	--fz-xxl: 56px;     
  	--fz-xl: 42px;       
  	--fz-lg: 24px;      
  	--fz-md: 20px;     
  	--fz-sm: 16px;    
}
@media screen and (max-width: 576px) {
	:root {
	--fz-xxl: 32px;
	--fz-xl: 24px;
	--fz-lg: 18px;
	--fz-md: 16px;
	--fz-sm: 14px;
	}
}
    
.desktop-floating-wrapper {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-end;
}
.btn-type-online { color: #fff; } 
.btn-type-phone { color: #fff; }  
.desktop-floating-wrapper .btn-type-phone::after {
    content: '02-523-1911';
    position: absolute;
    top: 50%;
    right: 120%;
    transform: translateY(-50%) translateX(10px); 
    opacity: 0;
    background: #00000099;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 1.2rem;
    white-space: nowrap;
    pointer-events: none;

    /* transition 효과 */
    transition: opacity .25s ease, transform .25s ease;
}

.desktop-floating-wrapper .btn-type-phone:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}


.floating-btn {
    width: auto;
    height: 48px; /* 높이 고정 */
    padding: 0 20px;
    border-radius: 24px; /* 알약 형태 */
    background: var(--theme-gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none !important;
    position: relative;
    border:0;
}

.floating-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    color: white;
}

.floating-text {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1; /* 아이콘과 텍스트 높이 정렬 */
}
.floating-icon-small {
    font-size: 1.2rem;
}
    .mobile-bottom-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: var(--mobile-bar-height);
        background: #ffffff;
        box-shadow: 0 -2px 20px rgba(0,0,0,0.1);
        z-index: 9999;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        display: none; /* PC에서는 숨김 */
        justify-content: space-around;
        align-items: center;
        padding: 0 10px;
    }

    .mobile-btn-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #555;
        height: 100%;
        transition: background-color 0.2s;
	border:0;
	background-color: #fff;
    }
    
    .mobile-btn-item:active {
        background-color: #f8f9fa;
    }

    /* 아이콘 원형 배경 */
    .mobile-icon-circle {
        width: 32px;
        height: 32px;
        margin-bottom: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
    }

    .mobile-btn-text {
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: -0.5px;
    }



    /* 반응형 처리: 모바일(md 이하)에서만 하단바 표시 */
    @media (max-width: 768px) {
        .desktop-floating-wrapper { display: none; }
        .mobile-bottom-bar { display: flex; }
        
        /* 모바일 하단바가 컨텐츠를 가리지 않도록 body padding 추가 */
        body { padding-bottom: var(--mobile-bar-height); }
    }
.fz-xxl {
	font-size: var(--fz-xxl);
}
.fz-xl {
	font-size: var(--fz-xl);
}
.fz-lg {
	font-size: var(--fz-lg);
}
.fz-md {
	font-size: var(--fz-md);
}
.fz-sm {
	font-size: var(--fz-sm);
}


* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f3f5f9; 
}

::-webkit-scrollbar-thumb {
  background: #324a70; 
  border-radius: 4px;
  border: 2px solid #f3f5f9; 
}

::-webkit-scrollbar-thumb:hover {
  background: #2b4160; 
}

.aTag {
	cursor: pointer;
	color: #0d6efd;
	border: 1px solid #0d6efd;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	padding: 0 1rem; 
	font-weight: 700;
	transition: transform 0.2s ease;
}
.aTag::after {
	content: "→";
	margin-left: 0.25rem;
	font-size: inherit;
	display: inline-block;
}

.aTag:hover {
	transform: translateY(-2px);
	color: #3586ff;
	box-shadow: var(--shadow-soft);
}
body {
	font-family: "Noto Sans KR", sans-serif;
	color: var(--color-text-main);
	background-color: var(--color-bg);
	min-height: 100vh;
}
main {
	min-height: calc(100vh - 241px);
	padding-top: 5rem;
}
@media (max-width: 768px) {
	main {
		padding-top: 5rem;
		padding-bottom: 100px;
	}
}

header:has(#main_nav) {
	min-height: 5rem;box-shadow: 0 1px 3px rgba(0,0,0,0.06);

}

a {
	text-decoration: none;
}
.btn,
.btn * {
	white-space: nowrap;
}
@media (max-width: 576px) {
	.btn,
	.btn * {
		white-space: normal;
	}
}
.text-crimson {
	color: var(--color-accent-red) !important;
}

.footer-grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6px 20px;
}

.footer-grid li a {
	color: #ccc;
	text-decoration: none;
}

.footer-grid li a:hover {
	color: #fff;
}
/* quill editor -------------------------------------------------- */
.ql-editor {
	padding: 6rem;
}
.ql-editor h2{
		margin:2rem -4rem 1rem;
		font-size: var(--fz-lg);
	color: var(--color-primary);
	display:flex;
	padding: .5rem 1rem;
	border: 1px solid var(--color-primary);
	}

 
.ql-editor h3 {
  margin-top:1.5rem;
  font-size: var(--fz-md);
  font-weight: 600;
  margin-bottom: .5rem;
  color: var(--color-primary);
  position: relative;
}

.ql-editor h3::before{
  content:"\25C6";
  position: absolute;
  left: -1.5rem; 
  color: var(--color-primary);
}

.ql-editor h4 {
  margin-top:1rem;
  font-size: var(--fz-md);
  font-weight: 400;
  margin-bottom: .5rem;
  color: var(--color-primary);
  position: relative;
}

.ql-editor h4::before{
  content:"\2022"; 
  position: absolute;
  left: -.5rem;
  color: var(--color-primary);
  font-size: .8em;
}

.ql-editor ol,
.ql-editor ul {
	padding-left: 0;
}
.ql-editor li {
	margin-bottom: 0.5rem;
	line-height: 1.8;
}
.ql-editor p {
	line-height: 1.8;
	margin-left: -2rem;
	font-size: var(--fz-md);
}
.ql-editor img {
	max-width: 100%;
	height: auto;
}
.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
	padding-left: 2.5em;
}
	@media (max-width: 768px) {
		.ql-editor {
			padding: 1rem;
		}
		.ql-editor h2 {
			font-size: var(--fz-md);
			line-height: 1.45;
			margin-top: 1.8rem;
			margin-bottom: 0.8rem;
			font-weight: 600;
			margin-left:0;
			margin-right: 0;
		}
		
		.ql-editor h3 {
			font-size: var(--fz-md);
			line-height: 1.5;
			margin-top: 1.2rem;
			margin-bottom: 0.5rem;
			font-weight: 600;
			margin-left: 0;
			margin-right: 0;
		}
		.ql-editor h3::before{
			display:inline;
			position:static;
		}
		.ql-editor p {
			font-size: var(--fz-sm);
			margin-left: 0;
			margin-right: 0;
		}
	}
/* NAVBAR -------------------------------------------------- */
/* collapsing 클래스 추가로 애니메이션 시작과 동시에 배경 적용 */

@media (max-width: 1200px) {
	#main_nav .container:has(.show),
	#main_nav .container:has(.collapsing) {
		background-color: #fff;
		padding-bottom: 1rem;
		transition: background-color 0.2s ease, padding 0.2s ease;
	}
	header:has(.show) .navbar,
	header:has(.collapsing) .navbar {
		background-color: #fff;
		transition: background-color 0.2s ease;
	}
	header:has(.show) *,
	header:has(.collapsing) * {
		z-index: 2;
	}
	header:has(.show)::before,
	header:has(.collapsing)::before {
		content: "";
		position: fixed;
		inset: 0;
		background: #00000091;
		z-index: 1;
		user-select: none;
		transition: opacity 0.2s ease;
		opacity: 1;
	}
	header:has(.collapse:not(.show):not(.collapsing))::before {
		opacity: 0;
		pointer-events: none;
	}
}
#main_nav {
	background-color: rgb(255, 255, 255);
	min-height: 5rem;
}

/* #main_nav.nav-scrolled {
	background-color: #ffffff !important;
	box-shadow: 0 1px 6px rgba(0,0,0,0.08);
} */
#main_nav > .container {
 gap: 1rem;
}
#main_nav .navbar-brand {
	letter-spacing: -0.03em;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	/* color: var(--color-text-main); */
}
 
#main_nav .navbar-brand-icon {
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background-color: var(--color-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 0.9rem;
}

#main_nav .navbar-nav .nav-link {
	/* color: #4c4d4e; */
	font-weight: 400;
	font-size: var(--fz-md);
	padding-inline: 0.85rem;
}

#main_nav .navbar-nav .nav-link:hover,
#main_nav .navbar-nav .nav-link:focus {
	color: var(--color-primary);
}

#main_nav .navbar-nav .nav-link.active {
	/* color: #090564; */
	font-weight: 800;
	position: relative;
}

/* 네비게이션 텍스트에 mix-blend-mode 적용 */
#main_nav .navbar-brand,
#main_nav .nav-link,
#main_nav .navbar-toggler-icon {
	color: var(--color-primary);
}

/* 브랜드 아이콘 */
#main_nav .navbar-brand-icon i {
	color: #fff;
}

/* 버튼은 제외하거나 별도 처리 */
#main_nav .btn-primary {
	mix-blend-mode: normal; 
}
#consultationButton {
	font-size: var(--fz-md);
}
/* 드롭다운 메뉴 (필요시) */
#main_nav .dropdown-menu .dropdown-item {
	color: #fff;
}
.dropdown-menu {
	border-radius: 0.75rem;
	border: 1px solid rgba(31, 41, 55, 0.9);
	box-shadow: var(--shadow-soft);
	padding: 0.4rem;
	font-size: 0.9rem;
	background-color: #fff;
}

.dropdown-item {
	border-radius: 0.5rem;
	color: #111;
}

.dropdown-item:hover {
	background-color: #111827;
	color: var(--color-primary);
}

/* BUTTONS -------------------------------------------------- */
.btn-primary {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	font-weight: 600;
}

.btn-primary:hover {
	background-color: var(--color-primary-soft);
	border-color: var(--color-primary-soft);
}

.btn-outline-primary {
	border-color: #4b5563;
	color: #111;
	font-weight: 500;
	background-color: transparent;
}

.btn-outline-primary:hover {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: #ffffff;
}

.btn-pill {
	border-radius: 999px;
}

/* SECTION -------------------------------------------------- */
.section-padding {
	padding: 15rem 0 10rem;
}

@media (max-width: 768px) {
	.section-padding {
		padding: 2.5rem 0;
	}

	.container {
		padding-left: 1rem;
		padding-right: 1rem;
		max-width: 100%;
		overflow-x: hidden;
	}
}

.section-title {
	font-weight: 700;
	letter-spacing: -0.03em;
	margin-bottom: 1.2rem;
	color: #fff;
	font-size: clamp(1.25rem, 4vw, 2rem);
}

@media (max-width: 768px) {
	.section-title {
		font-size: var(--fz-lg); /* ~22px mapped to --fz-lg */
	}
}

.section-eyebrow {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--color-surface-soft);
	margin-bottom: 0.5rem;
}

/* PAGE HEADER -------------------------------------------------- */
.page-header {
	height: 400px;
	display: flex;
	justify-content: center;
	align-items: center;
}
/* FOOTER -------------------------------------------------- */
#footer {
	background-color: #fff;
	color: #9ca3af;
	padding: 3rem 0 2rem;
	border-top: 1px solid var(--color-border-subtle);
}

#footer h5 {
	color: #111;
	font-size: var(--fz-md);
	margin-bottom: 1rem;
}

#footer p,
#footer a {
	font-size: var(--fz-md);
	color: #9ca3af;
}

#footer a:hover {
	color: #111;
}

#footer hr {
	border-color: #1f2937;
}

#footer-bottom {
	font-size: var(--fz-md);
	color: #6b7280;
}

/* filter chip, search -------------------------------------------------- */
.filter-chip {
	border-radius: 999px;
	border: 1px solid var(--color-border-subtle);
	color: var(--color-text);
	font-size: var(--fz-md);
	padding: 0.25rem 0.75rem;
}

.filter-chip.active {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
	font-weight: bold;
}

.search {
	display: flex;
}
.search button {
	border: none;
	background-color: var(--color-primary);
	color: #fff;
}
.search-inner {
	position: relative;
	max-width: 260px;
}

.search-inner i {
	position: absolute;
	top: 50%;
	left: 0.7rem;
	transform: translateY(-50%);
	font-size: var(--fz-md);
	color: #6b7280;
}

.search-inner .form-control {
	padding-left: 2rem;
	background-color: #ffffff;
	border-color: var(--color-border-subtle);
	color: var(--color-text);
	font-size: var(--fz-md);
	border-radius: 0;
}
.search .bi-search {
	margin-left: .5rem;
}

/* Read hero banner: 이미지 위에 어두운 오버레이를 덮기 위한 안전한 구조 */
.read-hero {
	width: 100%;
	height: 100px;
	margin-bottom: 2rem;
	position: relative;
	overflow: hidden;
}
.read-hero img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* 어두운 반투명 오버레이: 부모(.read-hero) 내부에 ::after로 올리고 z-index를 높여 이미지 위에 보이게 함 */
.read-hero::after {
	content: "";
	position: absolute;
	inset: 0; /* top:0; right:0; bottom:0; left:0; */
	background: rgba(0, 0, 0, 0.35); /* 어두운 회색 오버레이 (원하면 rgba(29,69,135,0.25)로 블루 톤 가능) */
	z-index: 2;
	pointer-events: none;
}

/* 필요하면 내부 텍스트/아이콘을 위로 올림 */
.read-hero img {
	position: relative;
	z-index: 1; /* 이미지가 오버레이보다 아래에 있도록 설정 */
}
/******************************** 반응형 ********************************/

@media (max-width: 1200px) {
	header:has(#main_nav),
 	#main_nav {
 		min-height: 5rem;
 		background-color: #fff;
 	}
	header:has(#main_nav) {
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	}
	#main_nav .navbar-nav .nav-link.active::after {
		width: 100%;
		bottom: 0;
	}
}