/* =============================================================
   common.css — VMS 공통 스타일 (리셋 + 헤더 + 전체메뉴 + 푸터)
   -------------------------------------------------------------
   * layout.js가 실제로 다루는 상태 클래스는 3개뿐입니다.
     - header_on : 스크롤 시 헤더 배경 on
     - menuOn    : 전체메뉴(햄버거) 오픈 시 헤더에 추가
     - openLang  : 언어 선택 드롭다운 오픈 시 .header__lang에 추가
     그 외 searchingOn / forMobile / engHeadr / hovered / buttonActive 등은
     JS가 더 이상 어떤 요소에도 부여하지 않는 죽은 상태 클래스라 이번에 정리했습니다.
   * VMS 마크업(menu_top_ko/en.php, footer_ko/en.php)에 실제로 존재하는
     선택자만 남기고, 검색/패밀리사이트/서브메뉴 관련 규칙은 제거했습니다.
   ============================================================= */

/* ---------- 1. 기본 리셋 ---------- */
html {background-color: #fff}
html, body {color: #333; font-weight: 400; line-height: 1.4; font-family: "Montserrat", sans-serif }
body {overflow-x: hidden }
* {	margin: 0; 	padding: 0; border: none; border-collapse: collapse; font-style: normal; word-break: keep-all; box-sizing: border-box; list-style: none }
html {font-size: 62.5%}
a {text-decoration: none; color: inherit}
a:hover, a:focus, a:active, a:active {text-decoration: none; outline: none}
button {border: none; cursor: pointer}
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0}
input:focus, textarea:focus, button:focus {outline: none}
textarea {font-family: "Montserrat", sans-serif}
img {max-width: 100%; vertical-align: top}
@media screen and (max-width: 768px) {
	a:hover, button:hover {cursor: default}
}
.montFont {font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-style: normal}

/* ---------- 2. 헤더 (.header) ---------- */
.header {position: fixed; top: 0; left: 0; width: 100%; height: var(--headerHeight); transition: background .5s; z-index: 5 }
.header__head {display: flex; align-items: center; justify-content: space-between; width: 95%; margin: 0 auto; height: 100%; position: relative; z-index: 1}
.header__logo {width: 10.2rem; height: 3.6rem; background: url(../images/common/logo.png) no-repeat center/cover; overflow: hidden; text-indent: -99999rem; font-size: 0}
.header__logo a {display: block; height: 100%}
.header__menu > li > a {font-size: 2rem; font-weight: 700; height: 100%; font-family: "Montserrat", sans-serif; display: flex; align-items: center; justify-content: center }
.header__back {display: none}
.header__all {display: flex; align-items: center; justify-content: center; background: none}

/* 언어 선택(KO/EN) 드롭다운 - layout.js가 openLang 클래스를 토글 */
.header__lang {color: #fff }
.header__lang.openLang .header__langWrap {display: flex}
.header__langBtn {background: none; color: #fff; font-size: 1.3rem; display: flex; align-items: center; gap: 1rem }
.header__langBtn::before {content: ""; display: block; width: 2rem; height: 1.9rem; background: url(../images/common/lang.png) no-repeat center/cover}
.header__langWrap {display: none; flex-direction: column; width: 7.5rem; gap: 1.5rem; background-color: #fff; border-radius: 2rem; border: .1rem solid #ddd; padding: 1.2rem 2rem; margin-top: 1rem; position: absolute}
.header__langLink {font-size: 1.3rem; color: #121212; display: flex}
.header__langLink:first-child {justify-content: space-between; align-items: center }
.header__langLink:first-child::after {content: ""; display: block; width: .7rem; height: .4rem; background: url(../images/common/langArr.png) no-repeat center/cover}

/* 우측 버튼 영역 (언어 선택 + 햄버거) */
.header__rightEnd {display: flex; align-items: center; -moz-column-gap: 2rem; column-gap: 2rem }
.header__allWrap {width: 2rem; display: flex; flex-direction: column; justify-content: center; row-gap: .5rem}
.header__allWrap div {height: .2rem; background-color: #fff; position: relative; transition: all .3s}
.header__allWrap div:nth-child(3) {width: 1.6rem}

/* 헤더 상태 클래스: header_on(스크롤 시), menuOn(전체메뉴 오픈 시) - layout.js가 토글 */
.header.header_on, .header.menuOn {background-color: var(--mainColor); border-bottom: .1rem solid #eee}
.header.header_on .header__allWrap div, .header.menuOn .header__allWrap div {background-color: #fff}
.header.header_on .header__lang, .header.menuOn .header__lang {border-color: #eee; color: #000}
.header.header_on .header__lang.openLang .header__langLink:first-child::after, .header.menuOn .header__lang.openLang .header__langLink:first-child::after {content: ""; background-color: #eee}
.header.header_on .header__langBtn, .header.menuOn .header__langBtn {color: #fff}
.header.header_on .header__langBtn::before, .header.menuOn .header__langBtn::before {	background: url(../images/common/lang.png) no-repeat center/cover}
.header.header_on .header__menu > li > a, .header.menuOn .header__menu > li > a {color: #fff}
.header.header_on .header__menu > li:hover > a, .header.menuOn .header__menu > li:hover > a {color: #fff}

@media screen and (max-width: 960px) {
	.header__rightEnd {margin: 0 0rem 0 auto}
	/* 모바일에서 전체메뉴가 열리면 햄버거 아이콘이 닫기(X) 아이콘으로 바뀝니다 (layout.js: closeAll) */
	.header__all.closeAll {width: 1.5rem; height: 1.5rem; background: url(../images/common/close_m.png) no-repeat center/cover	}
	.header__all.closeAll .header__allWrap {display: none}
}
@media screen and (min-width: 960px) {
	.header__menuWrap {display: none}
	.header__all {position: relative}
	.header__all:after {content: ""; display: block; width: 0%; height: 0%; -webkit-backdrop-filter: blur(1.3rem); backdrop-filter: blur(1.3rem); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 100%; transition: all .3s; z-index: 0 }
}
@media screen and (min-width: 1080px) {
	/* PC 화면에서는 헤더 중앙에 방문신청/방문조회 링크가 나란히 표시됩니다 */
	.header__menuWrap {width: 50%; max-width: 121.5rem; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: width .5s; display: flex; align-items: center; justify-content: space-between}
	.header__menuWrap:hover {width: 70%	}
	.header__menu {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; text-align: center}
	.header__menu > li {min-width: -moz-fit-content; min-width: fit-content; width: 0; height: 100%; max-width: 24rem; position: relative; flex-shrink: 0; padding-inline: var(--gap-35); box-sizing: content-box; transition: all .5s}
	.header__menu > li > a {position: relative; font-size: 1.8rem; font-weight: 700; color: #ff0000; } /* TODO: 텍스트 색상이 빨간색(#ff0000)으로 남아있습니다. 테스트용으로 보이니 최종 색상 확인 필요 */
	.header__menu > li:hover > a {color: #fff}
	.header__menu > li:hover::after {content: ""; display: block; width: 8rem; height: .2rem; background-color: var(--mainColor); bottom: 0; position: absolute; left: 50%; transform: translateX(-50%)}
	.header__back {position: absolute; background-color: #fff; width: 100%; height: 0;  top: var(--headerHeight);z-index: 0; border-bottom: 1px solid #eee; opacity: 0; display: block; visibility: hidden; transition: all .3s; overflow: hidden }
}

/* ---------- 3. 전체메뉴 (.allMenu, 햄버거 오버레이) ---------- */
/* layout.js가 .header__all 클릭 시 .allMenu에 showAll 클래스를 토글합니다.
   VMS 메뉴는 뎁스가 1단계뿐이라(방문신청하기 / 방문신청조회), 서브메뉴 관련 스타일은 모두 제거했습니다. */
.allMenu {position: fixed; width: 100%; height: 100%; top: -120%; left: 0; z-index: 6; visibility: hidden; transition: all .5s }
.allMenu__logo {width: 13.1rem}
.allMenu .menu__depth1 > a {font-family: "Montserrat", sans-serif}
@media screen and (max-width: 960px) {
	.allMenu {background-color: #fff; overflow-y: scroll}
	.allMenu__header {display: none}
	.allMenu__wrap {width: 95%; max-width: 150rem; margin: 0 auto}
	.allMenu.showAll {top: var(--headerHeight); visibility: visible	}
	.allMenu__close {display: none} /* 모바일에서는 햄버거 버튼이 곧 닫기 버튼 역할을 하므로 별도 닫기 버튼은 숨김 */
	.allMenu .menu {padding-bottom: 9.1rem}
	.allMenu .menu__depth1 {border-bottom: .1rem solid #eee}
	.allMenu .menu__depth1 > a {display: flex; align-items: center; justify-content: space-between; height: 9rem; font-size: 2.5rem; font-weight: 700; color: #111; padding-inline: 2.5%; cursor: auto	}
}
@media screen and (min-width: 960px) {
	.allMenu {background-color: rgba(0, 0, 0, .99); -webkit-backdrop-filter: blur(1.3rem); backdrop-filter: blur(1.3rem)}
	.allMenu.showAll {top: 0; visibility: visible}
	.allMenu__header {width: 95%; margin-inline: auto; top: var(--gap-60); position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; z-index: 2}
	.allMenu__center {height: 100%; display: flex; align-items: center; position: relative; z-index: 1 }
	.allMenu__close {background: none}
	.allMenu__wrap {width: 95%; max-width: 140rem; margin-inline: auto; padding-top: 2rem }
	.allMenu .menu {display: flex; -moz-column-gap: var(--gap-70); column-gap: var(--gap-70); text-align: center; justify-content: center}
	.allMenu .menu__depth1 {line-height: 1}
	.allMenu .menu__depth1 > a {display: block; color: #fff; font-weight: 700; position: relative; font-size: 2.4rem; margin-bottom: 10rem }
	.allMenu .menu__depth1 > a:hover::before {content: ""; display: block; width: 6rem; height: .2rem; background-color: #fff; position: absolute; left: 50%; transform: translateX(-50%); bottom: -2rem}
}

/* ---------- 4. 푸터 (.footer) ---------- */
.footer {background-color: #2a2a2a; padding-block: var(--gap-15) var(--gap-30)}
.footer__center {position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; row-gap: 1rem;}
.footer__center > p {margin: 0; line-height: 3rem; letter-spacing: -0.02em; word-break: keep-all;}
.footer__center p + p {margin-top: 0rem;}
.footer__bottom {display: flex; align-items: center; flex-direction: column; row-gap: 2rem; -moz-column-gap: var(--gap-10); column-gap: var(--gap-10)}
.footer__btnWrap {display: flex;	gap: 1rem}
.footer__prav {white-space: nowrap; display: flex; align-items: center; justify-content: center; height: 4rem; font-size: var(--fs-15); font-weight: 600; border-radius: var(--gap-5); color: #fff; background-color: #7d7d7d; text-align: center; padding-inline: var(--gap-10) }
@media screen and (max-width: 768px) {
	.footer__prav {width: auto; align-items: center; justify-content: center; text-align: center; }
}
@media screen and (min-width: 960px) {
    .footer__center {display: flex; flex-direction: column; row-gap: 1rem; align-items: center; text-align: center; }
    .footer__bottom {flex-direction: row; justify-content: center;}
}
@media screen and (min-width: 1400px) {
	.footer__center { flex-direction: column; justify-content: space-between}
}