/* ==========================================================
   header.css : 사이트 헤더 (theme/charity_ch01/header.inc.php)
   - 1200px 이상 : 가로 메뉴 + 메가메뉴
   - 1199px 이하 : 햄버거 → 전체화면 메뉴
========================================================== */
:root {
	--hd-h: 84px;
	--hd-h-scrolled: 68px;
	--hd-accent: #844ad7;
	--hd-ink: #141414;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
}
.site-header__bar {
	position: relative;
	z-index: 2;
	background: rgba(255, 255, 255, .86);
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	backdrop-filter: saturate(180%) blur(16px);
	border-bottom: 0;
	transition: background-color .25s;
}
.site-header.is-scrolled .site-header__bar,
.site-header.is-mega .site-header__bar { background: rgba(255, 255, 255, .97); }
.site-header.is-scrolled .site-header__bar { box-shadow: 0 6px 24px rgba(0, 0, 0, .06); }

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: calc(1440px + var(--gutter, 40px) * 2);
	height: var(--hd-h);
	margin: 0 auto;
	padding: 0 var(--gutter, 40px);
	box-sizing: border-box;
	transition: height .25s;
}
.site-header.is-scrolled .site-header__inner { height: var(--hd-h-scrolled); }

.site-header__logo { flex-shrink: 0; display: block; }
.site-header__logo img { display: block; height: 44px; width: auto; transition: height .25s; }
/* 글자 로고 : 메인의원 (한글) + MAIN CLINIC (영문) */
.mc-logo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; color: #1b1a1f; text-decoration: none; line-height: 1; transition: color .25s; }
.mc-logo__ko { font-family: 'Pretendard Variable', Pretendard, sans-serif; font-size: 25px; font-weight: 800; letter-spacing: -0.04em; }
.mc-logo__en { padding-left: 1px; font-size: 9.5px; font-weight: 600; letter-spacing: .32em; opacity: .55; }
.site-header--overlay:not(.is-scrolled):not(.is-mega) .site-header__logo.mc-logo { color: #fff; }
@media screen and (max-width: 767px) { .mc-logo__ko { font-size: 21px; } .mc-logo__en { font-size: 8.5px; } }
.site-header.is-scrolled .site-header__logo img { height: 38px; }

/* ----------------------------------------------------------
   메인 첫 화면 : 투명 헤더 (상단 이미지 위)
   스크롤하거나 메가메뉴를 열면 흰 배경으로 전환
---------------------------------------------------------- */
.site-header--overlay { position: fixed; left: 0; right: 0; }
.site-header--overlay:not(.is-scrolled):not(.is-mega) .site-header__bar {
	background: linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .14) 70%, rgba(0, 0, 0, 0) 100%);
	-webkit-backdrop-filter: none; backdrop-filter: none;
	box-shadow: none;
}
.site-header--overlay:not(.is-scrolled):not(.is-mega) .site-header__logo img { filter: brightness(0) invert(1); }
.site-header--overlay:not(.is-scrolled):not(.is-mega) .gnb__link,
.site-header--overlay:not(.is-scrolled):not(.is-mega) .site-header__tel,
.site-header--overlay:not(.is-scrolled):not(.is-mega) .site-header__tel .mc-icon,
.site-header--overlay:not(.is-scrolled):not(.is-mega) .site-header__icon { color: #fff; }
.site-header--overlay:not(.is-scrolled):not(.is-mega) .gnb__link:after { background: #fff; }
.site-header--overlay:not(.is-scrolled):not(.is-mega) .site-header__icon:hover { background: rgba(255, 255, 255, .14); }
.site-header--overlay:not(.is-scrolled):not(.is-mega) .site-header__cta {
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .55);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.site-header--overlay:not(.is-scrolled):not(.is-mega) .site-header__cta:hover { background: #fff; color: var(--hd-ink) !important; }
.site-header--overlay:not(.is-scrolled):not(.is-mega) .site-header__burger span:not(.visuallyhidden) { background: #fff; }
.site-header__logo img, .gnb__link, .site-header__cta, .site-header__burger span { transition: color .25s, background-color .25s, filter .25s, height .25s; }

/* PC 메뉴 */
.gnb { flex: 1 1 auto; height: 100%; }
.gnb__list {
	display: flex;
	justify-content: center;
	height: 100%;
	margin: 0; padding: 0; list-style: none;
}
.gnb__item { position: relative; display: flex; align-items: center; }
.gnb__link {
	position: relative;
	display: flex; align-items: center;
	height: 100%;
	padding: 0 clamp(10px, 1.1vw, 18px);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--hd-ink);
	white-space: nowrap;
	text-decoration: none;
}
.gnb__link:after {
	content: '';
	position: absolute; left: 50%; bottom: 0;
	width: 0; height: 2px;
	background: var(--hd-accent);
	transition: width .25s, left .25s;
}
.gnb__item:hover .gnb__link,
.gnb__item.is-current .gnb__link { color: var(--hd-accent); }
.gnb__item:hover .gnb__link:after,
.gnb__item.is-current .gnb__link:after { left: 14px; width: calc(100% - 28px); }

/* 오른쪽 유틸 */
.site-header__util { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.site-header__tel {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 15px; font-weight: 700;
	letter-spacing: .01em;
	color: var(--hd-ink);
	text-decoration: none;
	transition: color .25s;
}
.site-header__tel .mc-icon { width: 17px; height: 17px; color: var(--hd-accent); transition: color .25s; }
.site-header__cta {
	display: inline-flex; align-items: center; gap: 8px;
	height: 44px;
	padding: 0 20px 0 16px;
	border-radius: 4px;
	background: #121014;
	letter-spacing: -.01em;
	color: #fff !important;
	font-size: 15px; font-weight: 700;
	text-decoration: none;
	transition: background-color .2s, transform .2s;
}
.site-header__cta:hover { background: var(--hd-accent); }
.site-header__cta .mc-icon { width: 17px; height: 17px; color: #c9a8ff; transition: color .2s; }
.site-header__cta:hover .mc-icon { color: #fff; }
.site-header__icon {
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	border-radius: 50%;
	color: var(--hd-ink);
	transition: background-color .2s, color .25s;
}
.site-header__icon:hover { background: rgba(20, 20, 20, .06); }
.site-header__icon .mc-icon { width: 22px; height: 22px; }

.site-header__burger {
	display: none;
	position: relative;
	width: 44px; height: 44px;
	margin-right: -8px;
	padding: 0; border: 0;
	background: transparent;
	cursor: pointer;
}
.site-header__burger span:not(.visuallyhidden) {
	position: absolute; left: 11px;
	width: 22px; height: 2px;
	border-radius: 2px;
	background: var(--hd-ink);
}
.site-header__burger span:nth-child(1) { top: 15px; }
.site-header__burger span:nth-child(2) { top: 21px; }
.site-header__burger span:nth-child(3) { top: 27px; width: 14px; }


/* ----------------------------------------------------------
   메가메뉴
---------------------------------------------------------- */
.mega {
	position: absolute;
	left: 0; right: 0; top: 100%;
	z-index: 1;
	background: #fff;
	border-top: 1px solid rgba(20, 20, 20, .06);
	box-shadow: 0 24px 48px rgba(0, 0, 0, .08);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity .2s, transform .2s, visibility 0s .2s;
}
.site-header.is-mega .mega {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .2s, transform .2s;
}
.mega__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 8px;
	max-width: calc(1440px + var(--gutter, 40px) * 2);
	margin: 0 auto;
	padding: 32px var(--gutter, 40px) 40px;
	box-sizing: border-box;
}
.mega__col { padding: 12px; border-radius: 12px; transition: background-color .2s; }
.mega__col.is-hover { background: #f6f2fc; }
.mega__title {
	display: block;
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid #ececec;
	font-size: 15px; font-weight: 700;
	color: var(--hd-ink);
	text-decoration: none;
}
.mega__col.is-hover .mega__title { color: var(--hd-accent); border-color: rgba(132, 74, 215, .25); }
.mega ul { margin: 0; padding: 0; list-style: none; }
.mega li + li { margin-top: 2px; }
.mega li a {
	display: block;
	padding: 5px 0;
	font-size: 14px;
	line-height: 1.4;
	color: #555;
	text-decoration: none;
	word-break: keep-all;
	transition: color .15s, transform .15s;
}
.mega li a:hover,
.mega li a.is-current { color: var(--hd-accent); transform: translateX(3px); }
.mega li a.is-current { font-weight: 700; }


/* ----------------------------------------------------------
   전체화면 메뉴 (모바일/태블릿)
---------------------------------------------------------- */
.drawer {
	position: fixed;
	inset: 0;
	z-index: 2000;
	background: rgba(10, 10, 10, .45);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s, visibility 0s .25s;
}
.drawer.is-open { opacity: 1; visibility: visible; transition: opacity .25s; }
.drawer__panel {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	display: flex; flex-direction: column;
	width: min(420px, 100%);
	background: #fff;
	overflow-y: auto;
	transform: translateX(24px);
	transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head {
	position: sticky; top: 0; z-index: 1;
	display: flex; align-items: center; justify-content: space-between;
	height: 64px;
	padding: 0 12px 0 20px;
	background: #fff;
	border-bottom: 1px solid #efefef;
}
.drawer__head .site-header__logo img { height: 36px; }
.drawer__close {
	position: relative;
	width: 44px; height: 44px;
	padding: 0; border: 0; background: transparent; cursor: pointer;
}
.drawer__close:before, .drawer__close:after {
	content: ''; position: absolute; left: 11px; top: 21px;
	width: 22px; height: 2px; border-radius: 2px; background: var(--hd-ink);
}
.drawer__close:before { transform: rotate(45deg); }
.drawer__close:after { transform: rotate(-45deg); }

.drawer__list { margin: 0; padding: 8px 0; list-style: none; flex: 1 0 auto; }
.drawer__toggle {
	position: relative;
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 16px 52px 16px 20px;
	border: 0; background: transparent;
	text-align: left;
	font-family: inherit;
	font-size: 18px; font-weight: 700;
	color: var(--hd-ink);
	text-decoration: none;
	cursor: pointer;
}
button.drawer__toggle:after {
	content: '';
	position: absolute; right: 24px; top: 50%;
	width: 8px; height: 8px;
	margin-top: -6px;
	border-right: 2px solid #999; border-bottom: 2px solid #999;
	transform: rotate(45deg);
	transition: transform .2s, margin-top .2s;
}
.drawer__item.is-open > .drawer__toggle { color: var(--hd-accent); }
.drawer__item.is-open > button.drawer__toggle:after { transform: rotate(-135deg); margin-top: -2px; border-color: var(--hd-accent); }
.drawer__sub {
	display: none;
	grid-template-columns: 1fr 1fr;
	gap: 2px 8px;
	margin: 0 20px 12px;
	padding: 12px;
	border-radius: 12px;
	background: #f7f6f9;
	list-style: none;
}
.drawer__item.is-open .drawer__sub { display: grid; }
.drawer__sub a {
	display: block;
	padding: 9px 8px;
	font-size: 15px;
	color: #444;
	text-decoration: none;
	word-break: keep-all;
}
.drawer__sub a.is-current { color: var(--hd-accent); font-weight: 700; }

.drawer__quick {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	padding: 16px 20px;
	border-top: 1px solid #efefef;
}
.drawer__quick a {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
	height: 68px;
	border-radius: 14px;
	background: var(--hd-ink);
	color: #fff;
	font-size: 14px; font-weight: 700;
	text-decoration: none;
}
.drawer__quick a:nth-child(2),
.drawer__quick a:nth-child(3) { background: #f4f2f7; color: var(--hd-ink); }
.drawer__quick .mc-icon { width: 22px; height: 22px; }
.drawer__member { display: flex; gap: 16px; padding: 4px 20px 24px; }
.drawer__member a { font-size: 14px; color: #888; text-decoration: none; }

html.is-drawer-open { overflow: hidden; }


/* ==========================================================
   반응형
========================================================== */
@media screen and (max-width: 1399px) {
	.site-header__tel { display: none; }
}
@media screen and (max-width: 1199px) {
	:root { --hd-h: 68px; --hd-h-scrolled: 60px; }
	.gnb, .mega { display: none; }
	.site-header__inner { justify-content: space-between; }
	.site-header__burger { display: block; }
	.site-header__logo img { height: 38px; }
	.site-header.is-scrolled .site-header__logo img { height: 34px; }
}
@media screen and (max-width: 767px) {
	:root { --hd-h: 60px; --hd-h-scrolled: 56px; }
	.site-header__inner { padding: 0 12px 0 16px; gap: 8px; }
	.site-header__logo img { height: 34px; }
	.site-header__cta { height: 36px; padding: 0 14px; font-size: 14px; }
	.site-header__icon { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.site-header *, .mega, .drawer, .drawer__panel { transition: none !important; }
}

/* 로그인 (아이콘) · 로그인 후 내 메뉴 (드롭다운 : Admin · My · Logout) */
.site-header__member { position: relative; }
.site-header__member-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: rgba(20, 20, 20, .7); cursor: pointer; list-style: none; transition: color .2s, background-color .2s; }
.site-header__member-btn::-webkit-details-marker { display: none; }
.site-header__member-btn .mc-icon { width: 20px; height: 20px; }
/* 로그인 후 : 같은 선 아이콘 + 오른쪽 위 작은 초록 점 (로그인 상태 표시) */
details.site-header__member > .site-header__member-btn { position: relative; }
details.site-header__member > .site-header__member-btn:after { content: ''; position: absolute; right: 7px; top: 7px; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: #22c55e; }
.site-header--overlay:not(.is-scrolled):not(.is-mega) details.site-header__member > .site-header__member-btn:after { border-color: transparent; }
.site-header__member-btn:hover, .site-header__member[open] > .site-header__member-btn { background: rgba(20, 20, 20, .06); color: var(--hd-accent); }
.site-header__member-btn:focus-visible { outline: 2px solid var(--hd-accent); outline-offset: 2px; }
.site-header--overlay:not(.is-scrolled):not(.is-mega) .site-header__member-btn { color: rgba(255, 255, 255, .85); }
.site-header--overlay:not(.is-scrolled):not(.is-mega) .site-header__member-btn:hover,
.site-header--overlay:not(.is-scrolled):not(.is-mega) .site-header__member[open] > .site-header__member-btn { background: rgba(255, 255, 255, .14); color: #fff; }
.site-header__member-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; min-width: 180px; padding: 6px; border: 1px solid rgba(20, 20, 20, .08); border-radius: 10px; background: #fff; box-shadow: 0 12px 32px rgba(20, 20, 20, .12); }
.site-header__member-name { margin: 0; padding: 10px 12px 10px; border-bottom: 1px solid rgba(20, 20, 20, .08); margin-bottom: 4px; font-size: 13px; color: rgba(20, 20, 20, .55); white-space: nowrap; }
.site-header__member-name b { color: #141414; }
.site-header__member-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 6px; font-size: 14px; font-weight: 600; color: #141414; text-decoration: none; white-space: nowrap; }
.site-header__member-menu a:hover { background: rgba(20, 20, 20, .05); color: var(--hd-accent); }
.site-header__member-menu .mc-icon { width: 17px; height: 17px; opacity: .7; }
.site-header__member-menu small { margin-left: auto; font-size: 11px; font-weight: 500; color: rgba(20, 20, 20, .4); }
@media screen and (max-width: 767px) { .site-header__member { display: none; } }

@media screen and (max-width: 767px) { .site-header__cta .mc-icon { display: none; } .site-header__cta { padding: 0 14px; } }

/* 모바일 메뉴 : 안쪽 요소가 화면보다 넓어지지 않게 */
.drawer, .drawer *, .drawer *:before, .drawer *:after { box-sizing: border-box; }
.drawer__panel { overflow-x: hidden; }

/* ----------------------------------------------------------
   메가메뉴 (닥터디자이너 방식) : 항목별 패널
   시술안내 = 왼쪽 제목 + 분류 목록 / 오른쪽 선택한 분류의 시술
---------------------------------------------------------- */
.mega { background: #f7f7f8; border-top: 1px solid rgba(20, 20, 20, .06); box-shadow: 0 24px 40px rgba(0, 0, 0, .06); }
.mega__panel { display: none; }
.mega__panel.is-open { display: block; }
.mega__inner {
	display: grid !important;
	grid-template-columns: 260px minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	column-gap: clamp(40px, 5vw, 80px);
	gap: 0 clamp(40px, 5vw, 80px);
	max-width: calc(1200px + var(--gutter, 40px) * 2);
	padding: 40px var(--gutter, 40px) 48px !important;
}
.mega__title {
	grid-column: 1; grid-row: 1;
	margin: 0 0 18px; padding: 0; border: 0;
	font-size: 20px; font-weight: 700; letter-spacing: -.02em;
	color: var(--hd-ink); text-decoration: none;
}
.mega__cats { grid-column: 1; grid-row: 2; margin: 0; padding: 0; list-style: none; }
.mega__cats li + li { margin-top: 0; }
.mega__cat {
	position: relative;
	display: block;
	padding: 13px 28px 13px 0;
	font-size: 16px; font-weight: 500;
	color: var(--hd-ink); text-decoration: none;
	transition: color .15s;
}
.mega__cat:after {
	content: ''; position: absolute; right: 4px; top: 50%;
	width: 6px; height: 6px; margin-top: -3px;
	border: solid #b5b3bb; border-width: 1px 1px 0 0;
	transform: rotate(45deg);
	transition: border-color .15s;
}
.mega__cat.is-active, .mega__cat:hover { color: var(--hd-accent); font-weight: 700; }
.mega__cat.is-active:after { border-color: var(--hd-accent); }
.mega__items { grid-column: 2; grid-row: 2; }
.mega__list { display: none; flex-wrap: wrap; gap: 14px 44px; margin: 0; padding: 13px 0 0; list-style: none; }
.mega__list.is-active { display: flex; }
.mega__list--flat { grid-column: 2; grid-row: 1 / span 2; align-self: start; padding-top: 4px; }
.mega__list li + li { margin-top: 0; }
.mega .mega__list a {
	display: inline-block; padding: 0;
	font-size: 16px; color: #3d3c42;
	text-decoration: none; white-space: nowrap;
	transform: none; transition: color .15s;
}
.mega .mega__list a:hover, .mega .mega__list a.is-current { color: var(--hd-accent); transform: none; }

/* 모바일 : 시술안내 > 분류 > 시술 2단 펼침 */
.drawer__cats { display: none; margin: 0 20px 12px; border-top: 1px solid #eeedf1; }
.drawer__item.is-open > .drawer__cats { display: block; }
.drawer__cat { border-bottom: 1px solid #eeedf1; }
.drawer__cat-toggle {
	position: relative; display: block; width: 100%;
	padding: 14px 40px 14px 4px;
	border: 0; background: none; text-align: left;
	font-family: inherit; font-size: 16px; font-weight: 600; color: #3d3c42; cursor: pointer;
}
.drawer__cat-toggle:after {
	content: ''; position: absolute; right: 10px; top: 50%;
	width: 7px; height: 7px; margin-top: -5px;
	border: solid #a9a7b0; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.drawer__cat.is-open > .drawer__cat-toggle { color: var(--hd-accent); }
.drawer__cat.is-open > .drawer__cat-toggle:after { transform: rotate(-135deg); margin-top: -1px; border-color: var(--hd-accent); }
.drawer__item.is-open .drawer__cats .drawer__sub { display: none; margin: 0 0 12px; }
.drawer__item.is-open .drawer__cats .drawer__cat.is-open > .drawer__sub { display: grid; }

/* 시술안내 왼쪽 분류 : 줄 간격 넓게, 글자 굵게 (닥터디자이너 비율) */
.mega__title { margin-bottom: 14px; font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.mega__cats { width: 220px; }
.mega__cat { padding: 15px 30px 15px 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.mega__cat.is-active, .mega__cat:hover { font-weight: 700; }
.mega__cat:after { width: 7px; height: 7px; margin-top: -4px; border-width: 1.5px 1.5px 0 0; }
.mega__list { padding-top: 15px; gap: 18px 48px; }
.mega .mega__list a { font-size: 16px; font-weight: 500; }
.mega__inner { padding-top: 44px !important; padding-bottom: 52px !important; }

/* 예전 .mega li a 규칙보다 우선 */
.mega .mega__cats li a.mega__cat { display: block; padding: 15px 30px 15px 0; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--hd-ink); transform: none; }
.mega .mega__cats li a.mega__cat.is-active, .mega .mega__cats li a.mega__cat:hover { color: var(--hd-accent); font-weight: 700; transform: none; }
.mega .mega__title { font-size: 22px; font-weight: 800; }
.mega .mega__items .mega__list { padding-top: 17px; }

/* 스크롤 떨림 방지 : 스크롤해도 헤더 높이·로고 크기는 그대로 (배경·그림자만 바뀜) */
.site-header.is-scrolled .site-header__inner { height: var(--hd-h); }
.site-header.is-scrolled .site-header__logo img { height: 44px; }
.site-header__bar { transition: background-color .25s, box-shadow .25s; will-change: background-color; }
@media screen and (max-width: 1199px) { .site-header.is-scrolled .site-header__logo img { height: 38px; } }
@media screen and (max-width: 767px) { .site-header.is-scrolled .site-header__logo img { height: 34px; } }