/*
 * 14000-uloca-site-nav — 공통 셸(틀·헤더·전체 서비스 패널·푸터)
 * 기준: 여행정보(/travel/) — 1100px 틀, 좌우 16px, 위 16px·아래 40px, Pretendard, 강조 #1e73be.
 * 선택자는 .unav-* 또는 body.unav-on 범위만 쓴다.
 */

body.unav-on {
	--unav-frame: 1100px;
	--unav-gutter: 16px;
	--unav-top: 16px;
	--unav-bottom: 40px;
	--unav-ink: #1b2430;
	--unav-muted: #5f6b7a;
	--unav-line: #e3e7ec;
	--unav-soft: #f4f6f9;
	--unav-accent: #1e73be;
	--unav-accent-ink: #155a96;
	--unav-accent-soft: #e8f1fa;
	--unav-r: 12px;
	--unav-font: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
	--unav-ease: cubic-bezier(0.16, 1, 0.3, 1);
	font-family: var(--unav-font);
}

body.unav-on ::selection {
	background: var(--unav-accent-soft);
	color: var(--unav-ink);
}

/* ================= 틀 통일 ================= */

/* #page 는 GP 의 .container 이기도 해서, Bootstrap 을 싣는 화면(부동산)에서 12px 여백이 붙는다 — 0 으로 고정. */
body.unav-on .site.grid-container {
	max-width: var(--unav-frame);
	padding-left: 0;
	padding-right: 0;
}

body.unav-on .site-main {
	margin: 0;
}

/* GP '내용 폭: contained' 페이지(.contained-content)도 같은 여백. */
body.unav-on .inside-article,
body.unav-on.contained-content .inside-article {
	padding: var(--unav-top) var(--unav-gutter) var(--unav-bottom);
}

/* 서비스별 맞춤 — 각 플러그인의 '화면 폭 밖으로 빠져나가기'를 풀어 같은 틀에 넣는다. */
body.unav-on #g2b-bid-container,
body.unav-on .g2b-bi-service-nav,
body.unav-on .uloca-g2b-workspace,
body.unav-on #contents {
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	transform: none;
}

body.unav-on #g2b-bid-container,
body.unav-on #contents {
	padding-top: 0;
	padding-bottom: 0;
}

body.unav-on .ubc {
	max-width: none;
	padding: var(--unav-top) var(--unav-gutter) var(--unav-bottom);
}

/*
 * 틀 잠금 — 입찰(2000)·부동산(3000)은 모바일에서 GP 컨테이너 여백을 !important 로 바꾼다
 * (.grid-container{padding:1px!important}, .inside-article{padding:clamp(12px..)!important}, :has(#contents){padding:30px}).
 * 헤더·본문·푸터가 같은 선을 쓰도록 같은 값으로 되돌린다(더 높은 명시도 + !important).
 */
body.unav-on .site.grid-container {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body.unav-on .site-header .inside-header.grid-container,
body.unav-on .site-footer .inside-site-info.grid-container {
	padding-left: var(--unav-gutter) !important;
	padding-right: var(--unav-gutter) !important;
}

body.unav-on .inside-article,
body.unav-on .inside-article:has(#contents) {
	padding: var(--unav-top) var(--unav-gutter) var(--unav-bottom) !important;
}

body.unav-on #g2b-bid-container,
body.unav-on #contents {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* MovieSpot 배경은 100vw(스크롤바 폭 포함)로 화면 끝까지 깔려 가로로 몇 px 넘친다 — 화면 단위로 잘라 가로 스크롤을 없앤다. */
html:has(> body.unav-svc-moviespot),
body.unav-svc-moviespot {
	overflow-x: clip;
}

body.unav-svc-moviespot .pl-container {
	max-width: var(--unav-frame);
	padding-left: var(--unav-gutter);
	padding-right: var(--unav-gutter);
}

/* 넓은 표는 자기 상자 안에서만 가로로 움직인다. */
body.unav-svc-g2b .entry-content table,
body.unav-svc-apt .entry-content table {
	max-width: 100%;
}

/* ================= 헤더 ================= */

body.unav-on .site-header {
	border-bottom: 1px solid var(--unav-line);
}

body.unav-on .site-header .inside-header {
	position: relative;
	max-width: var(--unav-frame);
	margin: 0 auto;
	padding: 0 var(--unav-gutter);
	flex-direction: row;
	flex-wrap: nowrap;
	text-align: left;
}

body.unav-on .site-branding-container {
	min-width: 0;
	flex-shrink: 1;
}

/* 서비스 이름이 길어도 로고는 줄이지 않고 이름만 말줄임 */
body.unav-on .site-branding-container .site-logo {
	flex-shrink: 0;
	margin-right: 12px;
}

body.unav-on .site-branding {
	min-width: 0;
}

.unav-brand {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.unav-brand a,
.unav-brand a:hover {
	color: var(--unav-ink);
	text-decoration: none;
}

.unav-bar {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.unav-all {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 38px;
	padding: 0 14px 0 11px;
	border: 1px solid var(--unav-line);
	border-radius: 999px;
	background: #fff;
	color: var(--unav-ink);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.unav-all .unav-svg {
	color: var(--unav-accent);
}

.unav-all:hover {
	border-color: #c9d3de;
	background: var(--unav-soft);
	color: var(--unav-ink);
}

.unav-all[aria-expanded="true"] {
	border-color: var(--unav-accent);
	background: var(--unav-accent);
	color: #fff;
}

.unav-all[aria-expanded="true"] .unav-svg {
	color: #fff;
}

.unav-account {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0 10px;
	border-radius: 999px;
	color: var(--unav-ink);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.unav-account:hover {
	background: var(--unav-soft);
	color: var(--unav-ink);
}

.unav-bar .menu-bar-item > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	color: var(--unav-ink);
}

.unav-bar .menu-bar-item > a:hover {
	background: var(--unav-soft);
}

/* 0.2.6 이 페이지 링크 복사: 검색 버튼과 같은 38px 둥근 아이콘 버튼 + 아래쪽 알림 */
.unav-copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--unav-ink);
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

.unav-copy:hover {
	background: var(--unav-soft);
	color: var(--unav-ink);
}

.unav-copy.is-done {
	color: var(--unav-accent);
}

.unav-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 10002;
	margin: 0;
	padding: 11px 18px;
	border-radius: 999px;
	background: var(--unav-ink);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	box-shadow: 0 10px 30px -8px rgba(27, 36, 48, 0.45);
	transform: translateX(-50%);
	animation: unav-toast 2.2s var(--unav-ease) both;
	pointer-events: none;
}

@keyframes unav-toast {
	0% { opacity: 0; transform: translate(-50%, 6px); }
	10%, 85% { opacity: 1; transform: translate(-50%, 0); }
	100% { opacity: 0; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.unav-toast {
		animation: none;
	}
}

body.unav-on .unav-copy:focus-visible,
body.unav-on .unav-all:focus-visible,
body.unav-on .unav-bar a:focus-visible,
body.unav-on .unav-panel a:focus-visible,
body.unav-on .unav-footer a:focus-visible {
	outline: 2px solid var(--unav-accent);
	outline-offset: 2px;
}

/* ================= 전체 서비스 패널 ================= */

.unav-panel {
	position: absolute;
	top: calc(100% + 1px);
	right: var(--unav-gutter);
	z-index: 10000;
	width: min(780px, calc(100vw - 32px));
	max-height: calc(100vh - 80px);
	overflow: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: #c9d3de transparent;
	background: #fff;
	border: 1px solid var(--unav-line);
	border-radius: 16px;
	box-shadow: 0 18px 48px -12px rgba(27, 36, 48, 0.22), 0 2px 6px rgba(27, 36, 48, 0.06);
	text-align: left;
	transform-origin: top right;
}

.unav-panel[hidden] {
	display: none;
}

.unav-panel.is-entering {
	opacity: 0;
	transform: translateY(-4px) scale(0.98);
}

.unav-panel.is-open {
	opacity: 1;
	transform: none;
	transition: opacity 0.16s var(--unav-ease), transform 0.16s var(--unav-ease);
}

.unav-panel__groups {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: auto auto;
	grid-auto-flow: column;
	padding: 8px;
}

.unav-pgroup {
	padding: 18px 12px 12px;
}

/* 그룹 경계: 열 사이 세로선, 같은 열 위아래 가로선 */
.unav-pgroup:nth-child(n + 3) {
	border-left: 1px solid var(--unav-line);
}

.unav-pgroup:nth-child(2n) {
	border-top: 1px solid var(--unav-line);
}

.unav-pgroup__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	padding: 0 8px;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--unav-accent-ink);
}

.unav-pgroup__title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--unav-line);
}

.unav-pgroup__list,
.unav-pgroup__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.unav-pitem {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border-radius: 10px;
	color: var(--unav-ink);
	text-decoration: none;
	transition: background-color 0.15s;
}

.unav-pitem:hover {
	background: var(--unav-soft);
	color: var(--unav-ink);
}

.unav-pitem.is-current {
	background: var(--unav-accent-soft);
}

.unav-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--unav-soft);
	color: var(--unav-accent);
}

.unav-pitem:hover .unav-chip {
	background: #fff;
}

.unav-pitem.is-current .unav-chip {
	background: var(--unav-accent);
	color: #fff;
}

.unav-pitem__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.unav-pitem__name {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.unav-pitem__hint {
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--unav-muted);
}

.unav-badge {
	margin-left: auto;
	flex-shrink: 0;
	padding: 3px 8px;
	border-radius: 999px;
	background: #fff;
	color: var(--unav-accent-ink);
	font-size: 11.5px;
	font-weight: 800;
}

.unav-pgroup__links a {
	display: block;
	padding: 7px 8px;
	border-radius: 8px;
	color: var(--unav-ink);
	font-size: 14px;
	text-decoration: none;
}

.unav-pgroup__links a:hover {
	background: var(--unav-soft);
	color: var(--unav-ink);
}

.unav-panel__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 20px;
	border-top: 1px solid var(--unav-line);
	background: var(--unav-soft);
	border-radius: 0 0 16px 16px;
	font-size: 13px;
	color: var(--unav-muted);
}

.unav-panel__account {
	color: var(--unav-accent-ink);
	font-weight: 700;
}

@media (max-width: 860px) {
	.unav-panel__groups {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		grid-auto-flow: row;
	}

	.unav-pgroup:nth-child(2n),
	.unav-pgroup:nth-child(n + 3) {
		border-top: 0;
		border-left: 0;
	}

	/* 좁은 화면은 위에서 아래로 읽으므로 레지스트리 순서(여행→생활→영화→문서→콘텐츠→더 보기)로 되돌린다. */
	.unav-pgroup--outdoor { order: 1; }
	.unav-pgroup--life { order: 2; }
	.unav-pgroup--movie { order: 3; }
	.unav-pgroup--document { order: 4; }
	.unav-pgroup--content { order: 5; }
	.unav-pgroup--more { order: 6; }
}

@media (max-width: 599px) {
	.unav-brand {
		font-size: 15px;
		max-width: 40vw;
	}

	.unav-all {
		padding: 0 12px 0 10px;
	}

	.unav-bar .unav-account {
		display: none;
	}

	.unav-panel {
		position: fixed;
		top: var(--unav-panel-top, 64px);
		left: 8px;
		right: 8px;
		width: auto;
		max-height: calc(100vh - var(--unav-panel-top, 64px) - 12px);
		transform-origin: top center;
	}

	.unav-panel__groups {
		grid-template-columns: 1fr;
		padding: 4px;
	}

	.unav-pgroup {
		padding: 16px 8px 6px;
	}

	.unav-pgroup + .unav-pgroup {
		border-top: 1px solid var(--unav-line);
	}

	/* 닫기 버튼은 스크림 위에 그대로 보이게 */
	.unav-all[aria-expanded="true"] {
		position: relative;
		z-index: 10001;
	}

	/* 시트 뒤 페이지를 어둡게 눌러 패널과 구분 */
	.unav-panel.is-open {
		box-shadow: 0 18px 48px -12px rgba(27, 36, 48, 0.3), 0 0 0 100vmax rgba(27, 36, 48, 0.32);
	}
}

@media (prefers-reduced-motion: reduce) {
	.unav-panel.is-open,
	.unav-panel.is-entering {
		transition: none;
		transform: none;
		opacity: 1;
	}
}

/* ================= 푸터 ================= */

body.unav-on .site-footer .site-info {
	background: var(--unav-soft);
	border-top: 1px solid var(--unav-line);
	color: var(--unav-muted);
}

body.unav-on .site-footer .inside-site-info {
	max-width: var(--unav-frame);
	margin: 0 auto;
	padding: 40px var(--unav-gutter) 28px;
	display: block;
}

body.unav-on .site-footer .copyright-bar {
	width: 100%;
	text-align: left;
}

.unav-footer {
	font-size: 14px;
	line-height: 1.6;
	color: var(--unav-muted);
}

.unav-footer a {
	color: var(--unav-ink);
	text-decoration: none;
}

.unav-footer a:hover {
	color: var(--unav-accent-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.unav-footer__top {
	display: grid;
	grid-template-columns: minmax(200px, 1fr) 3fr;
	gap: 32px;
}

.unav-footer__name {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.unav-footer__brand p {
	max-width: 26ch;
	margin: 8px 0 0;
	font-size: 13px;
}

.unav-footer__cols {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px;
}

.unav-footer__col h2 {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 800;
	color: var(--unav-ink);
}

.unav-footer__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.unav-footer__col li {
	margin: 0 0 6px;
}

.unav-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 20px;
	margin-top: 32px;
	padding-top: 16px;
	border-top: 1px solid var(--unav-line);
	font-size: 13px;
}

.unav-footer__bottom p {
	margin: 0;
}

.unav-footer__policy {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
}

@media (max-width: 860px) {
	.unav-footer__top {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.unav-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 16px;
	}
}