@charset "UTF-8";

/* ============================================================
   geotraceX 디자인 시스템
   docs/DESIGN.md 의 구현체. 토스의 공간 운용 + KRDS 규격 + 로고 팔레트.

   새 화면은 이 파일 하나만 링크한다. 레거시 common.css 와 섞지 않는다.
   클래스는 전부 gx- 접두사를 쓴다 - 전환이 끝날 때까지 두 시스템이
   같은 앱 안에 공존하기 때문이다.
   ============================================================ */

/* Pretendard GOV(KRDS 표준 서체)가 아직 저장소에 없다.
   받는 즉시 아래 @font-face 를 하나 더 추가하면 --gx-font-sans 가 자동으로 그것을 먼저 쓴다.
   지금은 Pretendard Variable 이 폴백을 맡는다. 폐쇄망 시연을 대비해 CDN 이 아니라 번들한다.
   SIL Open Font License 1.1 - /fonts/LICENSE.txt */
@font-face {
	font-family: "Pretendard";
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/PretendardVariable.woff2") format("woff2-variations");
}

:root {
	/* ---------- 브랜드 (로고에서 승계) ---------- */
	--gx-primary: #1a54b8;
	--gx-primary-hover: #14418f;
	--gx-primary-pressed: #0e3168;
	--gx-primary-tint: #e8eefb;
	--gx-accent: #f04e23;
	--gx-accent-tint: #fdeee9;
	/* 연한 배경 위에 얹는 글자용. 원색은 tint 위에서 3.2:1 밖에 안 나와 본문 기준(4.5:1)에 못 미친다 */
	--gx-accent-deep: #c2390f;

	/* ---------- 중성 (KRDS gray ramp) ---------- */
	--gx-text: #1e2124;
	--gx-text-secondary: #464c53;
	--gx-text-muted: #6b7785;
	--gx-border-strong: #58616a;
	--gx-border: #b1b8be;
	--gx-border-subtle: #cdd1d5;
	--gx-surface: #f4f5f6;
	--gx-canvas: #ffffff;

	/* ---------- 시스템 (KRDS) ---------- */
	--gx-danger: #de3412;
	--gx-danger-tint: #fdece8;
	--gx-danger-deep: #b82b0e;
	--gx-warning: #ffb114;
	--gx-warning-text: #9e6a00;
	--gx-success: #228738;
	--gx-success-tint: #e8f5eb;
	--gx-success-deep: #1c7030;
	--gx-info: #0b78cb;

	/* ---------- 간격 (8pt + KRDS 보조 단위) ---------- */
	--gx-sp-2: 2px;
	--gx-sp-4: 4px;
	--gx-sp-8: 8px;
	--gx-sp-10: 10px;
	--gx-sp-12: 12px;
	--gx-sp-16: 16px;
	--gx-sp-20: 20px;
	--gx-sp-24: 24px;
	--gx-sp-32: 32px;
	--gx-sp-40: 40px;
	--gx-sp-48: 48px;
	--gx-sp-64: 64px;

	/* ---------- 타입 스케일 ---------- */
	--gx-fs-xs: 12px;
	--gx-fs-sm: 14px;
	--gx-fs-md: 14px;
	--gx-fs-lg: 16px;
	--gx-fs-h3: 20px;
	--gx-fs-h2: 26px;
	--gx-fs-h1: 32px;

	/* ---------- 모서리 ---------- */
	--gx-r-2: 2px;
	--gx-r-4: 4px;
	--gx-r-6: 6px;
	--gx-r-8: 8px;
	--gx-r-10: 10px;
	--gx-r-12: 12px;
	--gx-r-full: 9999px;

	/* ---------- 그림자 (모달 하나뿐) ---------- */
	--gx-shadow-modal: 0 2px 0 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1);

	/* ---------- 레이아웃 ---------- */
	--gx-page-width: 1440px;
	--gx-header-h: 68px;
	--gx-gnb-h: 54px;

	/* ---------- 모션 ---------- */
	--gx-t-fast: 150ms;
	--gx-t-base: 400ms;
	--gx-ease: cubic-bezier(0.4, 0, 0.2, 1);

	--gx-font-sans: "Pretendard GOV", "Pretendard", -apple-system, BlinkMacSystemFont,
		system-ui, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
}

/* ============================================================
   리셋 + 기본 요소
   ============================================================ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
fieldset, legend {
	margin: 0;
	padding: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	/* 세로 스크롤이 생기는 페이지와 아닌 페이지의 내용 폭이 스크롤바(15px)만큼 달라져
	   화면을 옮길 때마다 가운데 정렬된 내용이 7px 씩 튀었다. 스크롤바 자리를 항상 비워둔다. */
	scrollbar-gutter: stable;
}

body {
	min-height: 100vh;
	font-family: var(--gx-font-sans);
	font-size: var(--gx-fs-md);
	font-weight: 450;
	line-height: 1.5;
	color: var(--gx-text);
	background-color: var(--gx-canvas);
	/* -webkit-font-smoothing: antialiased 를 쓰지 않는다. 그것은 macOS 의 서브픽셀
	   렌더링을 회색조로 바꿔 흰 배경 위 글자를 얇게 만든다. 같은 브라우저에서 다른
	   사이트보다 400 이 얇아 보이던 원인이다. 운영체제 기본 렌더링에 맡긴다. */
	word-break: keep-all;
	overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
	font-size: inherit;
	font-weight: 700;
	line-height: 1.5;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

img, svg {
	display: block;
	max-width: 100%;
	border: 0;
}

fieldset {
	border: 0;
	min-width: 0;
}

address {
	font-style: normal;
}

hr {
	display: none;
}

table {
	width: 100%;
	border-collapse: collapse;
}

th, td {
	text-align: left;
}

a {
	color: var(--gx-primary);
	text-decoration: none;
	transition: color var(--gx-t-fast) var(--gx-ease);
}

a:hover {
	color: var(--gx-primary-hover);
}

input, select, textarea, button {
	font: inherit;
	color: inherit;
}

label {
	cursor: pointer;
}

/* 키보드 사용자에게만 포커스 halo. KRDS 4px */
:focus-visible {
	outline: 4px solid var(--gx-primary);
	outline-offset: 0;
}

/* 스크린리더 전용 */
.blind,
legend,
#accessibility,
#returntotop {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* 자릿수 정렬 - 숫자, 날짜, IP, 파일 크기 */
.gx-num {
	font-variant-numeric: tabular-nums;
}

/* 모바일 드로어가 열려 있는 동안 뒤 페이지 스크롤을 막는다 (gx-nav.js가 html에 토글) */
.gx-noscroll {
	overflow: hidden;
}

/* 브라우저 창을 767px 경계 너머로 리사이즈하는 동안 .gx-gnb의 transition이
   갑자기 걸려 슬라이드 애니메이션처럼 보이는 걸 막는다 (gx-nav.js가 토글) */
.gx-resizing .gx-gnb,
.gx-resizing .gx-navbackdrop {
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0ms !important;
		animation-duration: 0ms !important;
	}
}

/* ============================================================
   페이지 뼈대
   ============================================================ */

.gx-page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.gx-inner {
	width: 100%;
	max-width: var(--gx-page-width);
	margin: 0 auto;
	padding: 0 var(--gx-sp-24);
}

.gx-main {
	flex-grow: 1;
	padding: var(--gx-sp-40) 0 var(--gx-sp-64);
}

/* ---------- 헤더 ---------- */

.gx-header {
	flex: none;
	height: var(--gx-header-h);
	background: var(--gx-canvas);
	border-bottom: 1px solid var(--gx-border-subtle);
}

.gx-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gx-sp-16);
	height: 100%;
}

.gx-brand {
	display: flex;
	align-items: center;
	gap: var(--gx-sp-12);
}

.gx-brand__mark {
	display: block;
}

.gx-brand__sep {
	width: 1px;
	height: 20px;
	background: var(--gx-border-subtle);
}

.gx-brand__name {
	font-size: var(--gx-fs-lg);
	color: var(--gx-text-secondary);
}

.gx-userbox {
	display: flex;
	align-items: center;
	gap: var(--gx-sp-16);
	font-size: 15px;
	color: var(--gx-text-secondary);
}

.gx-userbox strong {
	font-weight: 700;
	color: var(--gx-text);
}

.gx-userbox .gx-btn,
.gx-gnb__who .gx-btn,
.gx-gnb__footer .gx-btn {
	border-color: var(--gx-border);
}

.gx-manual {
	color: var(--gx-primary);
}

.gx-manual:hover {
	background: var(--gx-primary-tint);
	border-color: var(--gx-primary);
	color: var(--gx-primary-hover);
}

.gx-manual__icon {
	flex: none;
}

/* 제품소개서·데모영상 버튼은 한 묶음이라 다른 항목보다 붙여 둔다 */
.gx-userbox .gx-manual + .gx-manual {
	margin-left: calc(var(--gx-sp-8) * -1);
}

/* 모바일 햄버거 - 데스크탑에서는 아예 없는 셈 치고 자리도 안 차지한다.
   버튼 자체는 44px 터치 영역을 지키되, 테두리가 없으니 아이콘(22px) 잉크 기준으로
   봤을 때 로고와 같은 24px 여백에 서게 오른쪽으로 당겨준다(버튼 상자 자체는 여백을
   덜 갖지만 히트 영역은 그대로 넓다) */
.gx-navtoggle {
	display: none;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-right: -9px;
	padding: 0;
	background: none;
	border: none;
	border-radius: var(--gx-r-6);
	color: var(--gx-text);
	cursor: pointer;
}

.gx-navtoggle:hover {
	background: var(--gx-surface);
}

/* 모바일 드로어 전용 조각(사용자/닫기 줄, 제품소개서 푸터, 배경막) - 데스크탑에서는 그릴 필요가 없다 */
.gx-gnb__head,
.gx-gnb__footer,
.gx-navbackdrop {
	display: none;
}

/* ---------- GNB ---------- */

.gx-gnb {
	flex: none;
	height: var(--gx-gnb-h);
	background: var(--gx-canvas);
	border-bottom: 1px solid var(--gx-border-subtle);
}

.gx-gnb__list {
	display: flex;
	align-items: stretch;
	gap: var(--gx-sp-8);
	height: 100%;
}

.gx-gnb__item {
	position: relative;
	display: flex;
}

.gx-gnb__link {
	display: inline-flex;
	align-items: center;
	gap: var(--gx-sp-8);
	padding: 0 var(--gx-sp-20);
	font-size: var(--gx-fs-lg);
	color: var(--gx-text-secondary);
	white-space: nowrap;
}

.gx-gnb__link:hover {
	color: var(--gx-text);
}

.gx-gnb__item.is-active > .gx-gnb__link {
	font-weight: 700;
	color: var(--gx-text);
	box-shadow: inset 0 -3px 0 0 var(--gx-primary);
}

.gx-gnb__caret {
	flex: none;
}

/* 하위 메뉴 */
.gx-gnb__sub {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	display: none;
	min-width: 180px;
	padding: var(--gx-sp-4) 0;
	background: var(--gx-canvas);
	border: 1px solid var(--gx-border);
	border-radius: var(--gx-r-8);
}

.gx-gnb__item:hover .gx-gnb__sub,
.gx-gnb__item:focus-within .gx-gnb__sub {
	display: block;
}

.gx-gnb__sublink {
	display: flex;
	align-items: center;
	height: 40px;
	padding: 0 var(--gx-sp-20);
	font-size: var(--gx-fs-sm);
	color: var(--gx-text-secondary);
}

.gx-gnb__sublink:hover {
	background: var(--gx-surface);
	color: var(--gx-text);
}

/* 지금 보고 있는 하위 화면 - 상위 항목만 굵어지는 걸로는 벡터/영상 중 뭘 보고 있는지 안 보였다 */
.gx-gnb__sublink.is-active {
	font-weight: 700;
	color: var(--gx-text);
}

/* ---------- 푸터 ---------- */

.gx-footer {
	flex: none;
	padding: var(--gx-sp-32) 0;
	background: var(--gx-surface);
	border-top: 1px solid var(--gx-border-subtle);
}

.gx-footer__inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: var(--gx-sp-16);
	font-size: var(--gx-fs-xs);
	color: var(--gx-text-muted);
	text-align: center;
}

/* 옆 문구가 두 줄(12px, line-height 1.5 * 2 + 줄간격)이라 그 높이에 맞춘다 */
.gx-footer__logo {
	height: 40px;
	width: auto;
}

.gx-footer__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gx-sp-4);
}

/* ============================================================
   페이지 머리
   ============================================================ */

.gx-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--gx-sp-8);
	font-size: var(--gx-fs-sm);
	color: var(--gx-text-muted);
}

.gx-breadcrumb a {
	color: var(--gx-text-muted);
}

.gx-breadcrumb a:hover {
	color: var(--gx-text-secondary);
}

.gx-breadcrumb strong {
	font-weight: 700;
	color: var(--gx-text);
}

/* 페이지 머리 - 제목 아래 굵은 규칙선 하나로 "제목과 설명" 영역을 만든다.
   면(패널)을 쓰지 않는 이유는 이 시스템이 이미 카드/표/필터바로 판을 많이 쓰기 때문이다.
   설명이 없는 화면에서도 규칙선과 제목만으로 성립한다. */
.gx-pagehead {
	margin: var(--gx-sp-16) 0 var(--gx-sp-32);
}

.gx-pagehead__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--gx-sp-24);
	padding-bottom: var(--gx-sp-12);
	border-bottom: 2px solid var(--gx-text);
}

.gx-pagehead__title {
	font-size: var(--gx-fs-h2);
	font-weight: 700;
	color: var(--gx-text);
}

/* 제목 줄 오른쪽 끝 - 지원포맷처럼 화면 전체에 걸리는 조건 */
.gx-pagehead__meta {
	flex: none;
	font-size: var(--gx-fs-sm);
	font-weight: 700;
	color: var(--gx-text-muted);
	white-space: nowrap;
}

.gx-pagehead__desc {
	margin-top: var(--gx-sp-12);
	font-size: var(--gx-fs-md);
	color: var(--gx-text-secondary);
}

.gx-sectiontitle {
	margin: var(--gx-sp-32) 0 var(--gx-sp-16);
	font-size: var(--gx-fs-h3);
	font-weight: 700;
	color: var(--gx-text);
}

/* 섹션 머리 - 제목 아래 2px 잉크선. gx-pagehead 와 같은 언어다.
   섹션 제목과 카드 띠 제목이 둘 다 20/700 이라 크기만으로는 위계가 안 선다.
   선이 무게를 얹어 섹션이 위로 올라간다.
   이 선을 gx-sectiontitle(목록 화면)에는 주지 않는다 - 그 화면들은 이미 위에
   gx-pagehead 의 2px 선을 갖고 있어, 같은 선이 둘이면 서로 힘을 깎는다.
   메인은 pagehead 가 없으므로 이 선이 화면에서 가장 강한 선이다. */
.gx-sectionhead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--gx-sp-16);
	margin: var(--gx-sp-32) 0 var(--gx-sp-16);
	padding-bottom: var(--gx-sp-12);
	border-bottom: 2px solid var(--gx-text);
}

.gx-sectionhead > h2 {
	font-size: var(--gx-fs-h3);
	font-weight: 700;
}

.gx-sectionhead .gx-btn {
	flex: none;
}

/* ============================================================
   버튼
   ============================================================ */

.gx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gx-sp-8);
	height: 40px;
	padding: 0 var(--gx-sp-16);
	font-size: var(--gx-fs-md);
	font-weight: 700;
	border: 1px solid transparent;
	border-radius: var(--gx-r-6);
	background: var(--gx-surface);
	color: var(--gx-text);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color var(--gx-t-fast) var(--gx-ease),
		color var(--gx-t-fast) var(--gx-ease),
		border-color var(--gx-t-fast) var(--gx-ease);
}

/* 기본형(회색 면) - 로그아웃처럼 늘 떠 있지만 주목받을 필요는 없는 동작 */
.gx-btn:hover {
	background: #e7e9ec;
}

.gx-btn--xs { height: 28px; padding: 0 var(--gx-sp-12); font-size: var(--gx-fs-xs); border-radius: var(--gx-r-4); }
.gx-btn--sm { height: 34px; padding: 0 12px; font-size: var(--gx-fs-sm); }
.gx-btn--lg { height: 44px; padding: 0 var(--gx-sp-20); border-radius: var(--gx-r-8); }
.gx-btn--block { width: 100%; }

.gx-btn--primary {
	background: var(--gx-primary);
	border-color: var(--gx-primary);
	color: var(--gx-canvas);
}

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

.gx-btn--primary:active {
	background: var(--gx-primary-pressed);
	border-color: var(--gx-primary-pressed);
}

.gx-btn--secondary {
	background: var(--gx-primary-tint);
	border-color: var(--gx-primary);
	color: var(--gx-primary-pressed);
}

.gx-btn--secondary:hover {
	background: #dbe5f8;
	color: var(--gx-primary-pressed);
}

.gx-btn--tertiary {
	background: var(--gx-canvas);
	border-color: var(--gx-border-strong);
	color: var(--gx-text);
}

.gx-btn--tertiary:hover {
	background: var(--gx-surface);
	color: var(--gx-text);
}

.gx-btn--danger {
	background: var(--gx-danger);
	border-color: var(--gx-danger);
	color: var(--gx-canvas);
}

.gx-btn[disabled],
.gx-btn[aria-disabled="true"] {
	background: var(--gx-border-subtle);
	border-color: var(--gx-border-subtle);
	color: var(--gx-text-muted);
	cursor: default;
}

/* 카드 바닥의 바로가기 - 평소 비어 있다가 hover 에 채워진다 */
.gx-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gx-sp-8);
	height: 40px;
	border: 1px solid var(--gx-primary);
	border-radius: var(--gx-r-6);
	/* 카드에서 실제로 누르는 것은 이것 하나다. 화면에서 가장 진한 파랑을 여기 준다 -
	   아이콘 타일이 더 진하면 색이 중요도를 거꾸로 가리킨다. */
	background: var(--gx-primary);
	color: var(--gx-canvas);
	font-size: var(--gx-fs-md);
	font-weight: 700;
	transition: background-color var(--gx-t-fast) var(--gx-ease),
		color var(--gx-t-fast) var(--gx-ease);
}

.gx-cta:hover {
	background: var(--gx-primary-hover);
	border-color: var(--gx-primary-hover);
	color: var(--gx-canvas);
}

.gx-cta:active {
	background: var(--gx-primary-pressed);
	border-color: var(--gx-primary-pressed);
}

.gx-cta__ar {
	transition: transform var(--gx-t-fast) var(--gx-ease);
}

.gx-cta:hover .gx-cta__ar {
	transform: translateX(3px);
}

.gx-btnrow {
	display: flex;
	justify-content: flex-end;
	gap: var(--gx-sp-12);
	margin-top: var(--gx-sp-24);
}

/* 화면 단위 동작 - 제출, 적용, 목록으로, 다시 추적하기처럼 이 화면에서 할 일 그 자체.
   카드 밖 가운데에 두고 폭을 넉넉히 준다. 카드 안 보조 동작(취소 등)은 제자리에 둔다. */
.gx-btnrow--center {
	justify-content: center;
	margin-top: var(--gx-sp-32);
}

.gx-btnrow--center .gx-btn {
	min-width: 200px;
	padding: 0 var(--gx-sp-32);
}

/* ============================================================
   폼
   ============================================================ */

.gx-field {
	display: flex;
	flex-direction: column;
	gap: var(--gx-sp-8);
}

.gx-label {
	font-size: var(--gx-fs-sm);
	font-weight: 700;
	color: var(--gx-text-secondary);
}

.gx-input,
.gx-select {
	width: 100%;
	height: 44px;
	padding: 0 var(--gx-sp-16);
	font-size: var(--gx-fs-lg);
	background: var(--gx-canvas);
	border: 1px solid var(--gx-border-strong);
	border-radius: var(--gx-r-8);
	color: var(--gx-text);
	transition: border-color var(--gx-t-fast) var(--gx-ease);
}

/* 셀렉트는 입력칸과 달리 칸 전체를 채우지 않는다. 고를 수 있는 값의 길이에 맞춰 선다.
   폭을 늘리면 짧은 값과 화살표 사이가 한 뼘 벌어져 빈 칸처럼 보인다.
   (브라우저가 가장 긴 option 에 맞춰 폭을 잡아주므로 값이 잘리지도 않는다) */
.gx-select {
	width: auto;
	max-width: 100%;
	border-radius: var(--gx-r-6);
	/* 네이티브 화살표는 테두리에 바짝 붙어서 위치를 잡을 수 없다. 직접 그려 넣고
	   오른쪽에서 12px 띄운다. 글자와 겹치지 않게 그만큼 padding 을 준다. */
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.5 L8 10.5 L12 6.5' fill='none' stroke='%23464c53' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--gx-sp-12) center;
	background-size: 16px 16px;
	padding-right: var(--gx-sp-40);
}

/* .gx-field 는 세로 flex 라 자식이 기본으로 늘어난다. 셀렉트만 제 폭을 지키게 한다 */
.gx-field > .gx-select {
	align-self: flex-start;
}

/* 필터 바는 예외 - 날짜칸/입력칸과 한 줄에 나란히 서므로 배정된 폭을 채운다 */
.gx-filter .gx-select {
	width: 100%;
}

/* gx-field 여러 개를 한 줄에 나란히 놓을 때 (예: 삽입 화면의 송신자 정보) */
.gx-fieldrow {
	display: flex;
	gap: var(--gx-sp-16);
}

.gx-fieldrow > .gx-field {
	flex: 1;
	min-width: 0;
}

.gx-checkline {
	display: inline-flex;
	align-items: center;
	gap: var(--gx-sp-8);
	font-size: var(--gx-fs-sm);
	color: var(--gx-text);
	white-space: nowrap;
	cursor: pointer;
}

.gx-fieldrow .gx-select {
	width: 100%;
}

/* 표 안에 들어가는 컨트롤. 행 높이(44)를 밀어내지 않게 한 단계 작다 */
.gx-input--sm,
.gx-select--sm {
	height: 32px;
	padding: 0 var(--gx-sp-12);
	font-size: var(--gx-fs-sm);
	border-radius: var(--gx-r-6);
}

/* 표 안 셀렉트는 칸 폭만큼 늘리지 않고 값에 딱 맞춘다.
   min-width 를 주면 짧은 값에서 박스만 남고 화살표가 멀찍이 떨어져 보인다. */
.gx-select--sm {
	width: auto;
	min-width: 0;
	background-position: right var(--gx-sp-10) center;
	background-size: 14px 14px;
	padding-right: var(--gx-sp-32);
}

.gx-input::placeholder {
	color: var(--gx-text-muted);
}

.gx-input[readonly] {
	cursor: pointer;
}

.gx-input[disabled],
.gx-select[disabled] {
	background: var(--gx-border-subtle);
	color: var(--gx-text-muted);
	cursor: default;
}

.gx-input[aria-invalid="true"] {
	border-width: 2px;
	border-color: var(--gx-danger);
}

.gx-errortext {
	font-size: var(--gx-fs-sm);
	color: var(--gx-danger);
}

/* 날짜 입력 - 우측 달력 아이콘 자리 */
.gx-datefield {
	position: relative;
}

.gx-datefield .gx-input {
	padding-right: var(--gx-sp-48);
}

.gx-datefield__icon {
	position: absolute;
	top: 12px;
	right: var(--gx-sp-16);
	pointer-events: none;
}

.gx-daterange {
	display: flex;
	align-items: center;
	gap: var(--gx-sp-10);
}

.gx-daterange__sep {
	color: var(--gx-text-muted);
}

/* ---------- 검색 필터 바 ---------- */

.gx-filter {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: var(--gx-sp-16);
	padding: var(--gx-sp-24);
	background: var(--gx-surface);
	border-radius: var(--gx-r-8);
}

.gx-filter__item {
	display: flex;
	flex-direction: column;
	gap: var(--gx-sp-8);
	flex: none;
}

.gx-filter__item--grow {
	flex: 1 1 240px;
}

.gx-filter .gx-btn {
	flex: none;
}

/* ============================================================
   카드
   ============================================================ */

.gx-card {
	display: flex;
	flex-direction: column;
	background: var(--gx-canvas);
	border: 1px solid var(--gx-border);
	border-radius: var(--gx-r-8);
	overflow: hidden;
	transition: border-color var(--gx-t-fast) var(--gx-ease);
}

.gx-card--link:hover {
	border-color: var(--gx-primary);
}

/* 카드 상단 띠 - 아이콘+제목, 또는 오류 알림 */
/* 파랑은 조작(버튼/링크/활성 탭/현재 쪽/진행률)에만 쓴다. 카드 띠는 누르는 것이
   아니라 구역 이름이므로 중성 회색을 깐다. 파란 면을 깔면 눌리는 것처럼 읽힌다. */
.gx-card__band {
	display: flex;
	align-items: center;
	gap: var(--gx-sp-16);
	padding: var(--gx-sp-20) var(--gx-sp-32);
	background: var(--gx-surface);
}

/* 띠 안 아이콘 - 회색 면 위에 선 아이콘만 파랗게 뜨면 남다 만 색처럼 보인다.
   타일로 감싸 "이 카드의 마크"로 읽히게 한다. 타일이 색을 맡으므로 아이콘 선은
   currentColor 로 그린다 - 타일 색만 바꾸면 선이 따라온다.
   타일은 옅은 판이다. 원색을 쓰면 화면에서 가장 진한 파랑이 되는데, 타일은 카드에서
   제일 안 중요한 요소(식별 표지)다. 원색은 실제로 누르는 .gx-cta 가 가져간다. */
.gx-card__icon {
	--gx-icon-bg: var(--gx-primary-tint);
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--gx-r-12);
	background: var(--gx-icon-bg);
	color: var(--gx-primary);
}

/* 뒤에 겹친 도형을 가리려고 면을 쓰는 부분(돋보기 렌즈 등) - 타일 색으로 뚫는다 */
.gx-card__icon .gx-icon-knockout {
	fill: var(--gx-icon-bg);
}

/* 파랑이면 링크로 읽힌다. 제목은 본문색 */
.gx-card__band h2,
.gx-card__band h3 {
	font-size: var(--gx-fs-h3);
	font-weight: 700;
	color: var(--gx-text);
}

.gx-card__band--spread {
	justify-content: space-between;
}

.gx-card__body {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: var(--gx-sp-16);
	padding: var(--gx-sp-32);
}

.gx-card__desc {
	font-size: var(--gx-fs-md);
	color: var(--gx-text-secondary);
}

.gx-card__rule {
	height: 1px;
	background: var(--gx-border-subtle);
}

.gx-cardgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gx-sp-24);
}

/* 지원포맷 - 확장자 하나당 배지 하나. 포맷은 서로 우열이 없으니 색을 통일한다.
   파랑/오렌지는 조작과 판정에 예약돼 있어 여기 쓰지 않는다. */
.gx-fmts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

/* 카드 안에서는 여기부터가 바닥 블록이다 - 설명 길이와 무관하게 아래로 붙는다 */
.gx-card__body > .gx-fmts {
	margin-top: auto;
}

.gx-fmt {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 var(--gx-sp-8);
	background: var(--gx-surface);
	border: 1px solid var(--gx-border-subtle);
	border-radius: var(--gx-r-4);
	font-size: var(--gx-fs-xs);
	font-weight: 700;
	color: var(--gx-text-secondary);
	white-space: nowrap;
}

/* 샘플 파일이 걸린 배지 - 눌러서 받을 수 있다는 걸 색과 밑줄로 알린다 */
a.gx-fmt--link {
	color: var(--gx-primary);
	text-decoration: none;
}

a.gx-fmt--link:hover {
	color: var(--gx-primary-hover);
	background: var(--gx-primary-tint);
	border-color: var(--gx-primary);
	text-decoration: underline;
}

/* 지원포맷 같은 보조 꼬리표 */
.gx-tag {
	align-self: flex-start;
	margin-top: auto;
	padding: var(--gx-sp-4) var(--gx-sp-8);
	font-size: var(--gx-fs-xs);
	color: var(--gx-text-muted);
	background: var(--gx-surface);
	border-radius: var(--gx-r-4);
}

/* ============================================================
   달력 팝업 (gx-datepicker.js)
   ============================================================ */

.gx-datepicker {
	position: absolute;
	z-index: 60;
	width: 280px;
	padding: var(--gx-sp-16);
	background: var(--gx-canvas);
	border: 1px solid var(--gx-border-subtle);
	border-radius: var(--gx-r-12);
	box-shadow: var(--gx-shadow-modal);
	display: none;
}

.gx-datepicker.is-open {
	display: block;
}

.gx-datepicker__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--gx-sp-12);
}

.gx-datepicker__nav,
.gx-datepicker__title {
	border: none;
	background: transparent;
	border-radius: var(--gx-r-6);
	cursor: pointer;
}

.gx-datepicker__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--gx-text-secondary);
	font-size: var(--gx-fs-lg);
}

.gx-datepicker__nav:hover {
	background: var(--gx-surface);
}

.gx-datepicker__title {
	padding: var(--gx-sp-4) var(--gx-sp-8);
	font-size: var(--gx-fs-lg);
	font-weight: 700;
	color: var(--gx-text);
}

button.gx-datepicker__title:hover {
	background: var(--gx-surface);
}

.gx-datepicker__weekrow,
.gx-datepicker__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}

.gx-datepicker__weekday {
	text-align: center;
	font-size: var(--gx-fs-xs);
	color: var(--gx-text-muted);
	padding-bottom: var(--gx-sp-8);
}

.gx-datepicker__weekday--sun {
	color: var(--gx-danger);
}

.gx-datepicker__weekday--sat {
	color: var(--gx-primary);
}

.gx-datepicker__day {
	aspect-ratio: 1;
	width: 100%;
	border: none;
	background: transparent;
	border-radius: var(--gx-r-full);
	font-size: var(--gx-fs-sm);
	color: var(--gx-text);
	cursor: pointer;
}

.gx-datepicker__day:hover {
	background: var(--gx-surface);
}

.gx-datepicker__day--muted {
	color: var(--gx-text-muted);
}

.gx-datepicker__day--today {
	box-shadow: inset 0 0 0 1px var(--gx-primary);
	font-weight: 700;
}

.gx-datepicker__day--selected,
.gx-datepicker__day--selected:hover {
	background: var(--gx-primary);
	color: #fff;
	font-weight: 700;
}

.gx-datepicker__months {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gx-sp-8);
}

.gx-datepicker__month {
	height: 40px;
	border: none;
	background: transparent;
	border-radius: var(--gx-r-6);
	font-size: var(--gx-fs-sm);
	color: var(--gx-text);
	cursor: pointer;
}

.gx-datepicker__month:hover {
	background: var(--gx-surface);
}

.gx-datepicker__month--current {
	box-shadow: inset 0 0 0 1px var(--gx-primary);
	font-weight: 700;
	color: var(--gx-primary);
}

.gx-datepicker__foot {
	margin-top: var(--gx-sp-12);
	padding-top: var(--gx-sp-12);
	border-top: 1px solid var(--gx-border-subtle);
	text-align: center;
}

.gx-datepicker__today {
	border: none;
	background: transparent;
	font-size: var(--gx-fs-sm);
	font-weight: 700;
	color: var(--gx-primary);
	cursor: pointer;
	padding: var(--gx-sp-8);
}

.gx-datepicker__today:hover {
	text-decoration: underline;
}

/* ============================================================
   워터마크 키 추가/수정 팝업 (selectSetupList.html)
   ============================================================ */

.gx-row-clickable {
	cursor: pointer;
}

.gx-row-clickable:hover {
	background: var(--gx-surface);
}

.gx-modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 70;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--gx-sp-16);
	background: rgba(30, 33, 36, 0.45);
}

.gx-modal-backdrop[hidden] {
	display: none;
}

.gx-modal {
	width: 100%;
	max-width: 360px;
	padding: var(--gx-sp-24);
	background: var(--gx-canvas);
	border: 1px solid var(--gx-border-subtle);
	border-radius: var(--gx-r-12);
	box-shadow: var(--gx-shadow-modal);
}

.gx-modal__title {
	margin: 0 0 var(--gx-sp-16);
	font-size: var(--gx-fs-lg);
	font-weight: 700;
	color: var(--gx-text);
}

.gx-modal__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: var(--gx-sp-16);
}

.gx-modal__field label {
	font-size: var(--gx-fs-sm);
	color: var(--gx-text-muted);
}

.gx-modal__actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--gx-sp-8);
}

.gx-modal__actions--split {
	justify-content: space-between;
	margin-top: var(--gx-sp-16);
	padding-top: var(--gx-sp-16);
	border-top: 1px solid var(--gx-border-subtle);
}

/* ============================================================
   파일 업로드
   ============================================================ */

/* gx-input/gx-select와 같은 44px 줄에 맞춘다 - 옆에 select를 나란히 둘 때(삽입/추적 화면의
   워터마크 키 + 파일 경로) 파일칸만 눈에 띄게 두꺼워 보이던 것을 없앤다 */
.gx-upload {
	display: flex;
	align-items: center;
	gap: var(--gx-sp-16);
	height: 44px;
	padding: 0 var(--gx-sp-20);
	background: var(--gx-canvas);
	border: 2px dashed var(--gx-border);
	border-radius: var(--gx-r-8);
	transition: border-color .12s, background .12s;
}

.gx-upload.is-dragover {
	border-color: var(--gx-primary);
	background: var(--gx-surface);
}

/* 네이티브 file 입력은 눈에서만 감춘다. 이름/accept/required 는 그대로 살아 있다 */
.gx-upload__input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.gx-upload__name {
	flex-grow: 1;
	min-width: 0;
	font-size: var(--gx-fs-md);
	color: var(--gx-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gx-upload__name.is-picked {
	color: var(--gx-text);
}

.gx-upload__hint {
	font-size: var(--gx-fs-sm);
	color: var(--gx-text-muted);
	white-space: nowrap;
}

/* 파일 입력에 포커스가 가면 드롭 영역 전체가 포커스를 받은 것처럼 보이게 한다 */
.gx-upload__input:focus-visible + .gx-upload__label {
	outline: 4px solid var(--gx-primary);
}

/* ============================================================
   진행률
   ============================================================ */

.gx-progress {
	display: flex;
	flex-direction: column;
	gap: var(--gx-sp-8);
}

.gx-progress__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--gx-sp-16);
}

.gx-progress__label {
	font-size: var(--gx-fs-sm);
	font-weight: 700;
	color: var(--gx-text-secondary);
}

.gx-progress__pct {
	font-size: var(--gx-fs-sm);
	color: var(--gx-text-secondary);
	font-variant-numeric: tabular-nums;
}

.gx-progress__track {
	height: 8px;
	background: var(--gx-border-subtle);
	border-radius: var(--gx-r-full);
	overflow: hidden;
}

.gx-progress__bar {
	width: 0%;
	height: 100%;
	background: var(--gx-primary);
	transition: width var(--gx-t-fast) linear;
}

/* ============================================================
   배지 - 판정만 말한다. 클릭되지 않는다
   ============================================================ */

.gx-badge {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 var(--gx-sp-8);
	font-size: var(--gx-fs-sm);
	font-weight: 700;
	border: 1px solid var(--gx-border-subtle);
	border-radius: var(--gx-r-4);
	background: var(--gx-surface);
	color: var(--gx-text-secondary);
	white-space: nowrap;
}

.gx-badge--found { background: var(--gx-accent-tint); border-color: #f4bda8; color: var(--gx-accent-deep); }
.gx-badge--none { background: var(--gx-surface); border-color: var(--gx-border-subtle); color: var(--gx-text-secondary); }
.gx-badge--success { background: var(--gx-success-tint); border-color: #b3ddbe; color: var(--gx-success-deep); }
.gx-badge--fail { background: var(--gx-danger-tint); border-color: #f4beb0; color: var(--gx-danger-deep); }

/* ============================================================
   표
   ============================================================ */

.gx-tablebox {
	background: var(--gx-canvas);
	border: 1px solid var(--gx-border);
	border-radius: var(--gx-r-8);
	overflow: hidden;
}

/* colgroup 의 폭을 그대로 지킨다. 안 그러면 내용 길이에 따라 열이 제멋대로 밀린다 */
.gx-table {
	table-layout: fixed;
}

/* 한 줄로 두고 넘치면 말줄임 - 파일 경로처럼 길어질 수 있는 값 */
.gx-ellip {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 줄바꿈 금지 - 연락처, 직급/직책, 시각처럼 끊기면 읽기 나빠지는 값 */
.gx-nowrap {
	white-space: nowrap;
}

/* 열이 아주 많아 1200px 안에 다 못 들어가는 표 - 열을 숨기는 대신 가로로 민다 */
.gx-tablebox--scroll {
	overflow-x: auto;
}

.gx-table--wide {
	min-width: 1260px;
}

/* 가로로 미는 표에서는 열 제목이 두 줄로 접히지 않게 한다 */
.gx-table--wide th {
	white-space: nowrap;
}

/* 열이 많아 20px 여백으로는 값이 잘리는 표 (시스템 로그처럼 6열 이상) */
.gx-table.gx-table--tight th,
.gx-table.gx-table--tight td {
	padding: 0 var(--gx-sp-16);
}

.gx-table th {
	height: 40px;
	padding: 0 var(--gx-sp-20);
	font-size: var(--gx-fs-sm);
	font-weight: 700;
	color: var(--gx-text);
	/* 카드 띠와 같은 이유로 중성. 파란 머리는 선택된 행처럼 보인다 */
	background: var(--gx-surface);
	border-bottom: 1px solid var(--gx-border);
}

/* 표 본문은 이 화면의 내용 그 자체다. 보조색(#464c53)으로 내리면 13px 400 과 겹쳐
   화면에서 가장 얇게 읽힌다. 본문색을 쓴다 - 머리와는 굵기(700)로 이미 갈린다. */
.gx-table td {
	height: 44px;
	padding: 0 var(--gx-sp-20);
	font-size: var(--gx-fs-sm);
	color: var(--gx-text);
	border-bottom: 1px solid var(--gx-border-subtle);
}

.gx-table tbody tr {
	transition: background-color var(--gx-t-fast) var(--gx-ease);
}

.gx-table tbody tr:hover {
	background: var(--gx-surface);
}

.gx-table tbody tr:last-child td {
	border-bottom: 0;
}

.gx-table .gx-c {
	text-align: center;
}

.gx-table .gx-r {
	text-align: right;
}

.gx-table__empty {
	padding: var(--gx-sp-64) var(--gx-sp-20);
	text-align: center;
	font-size: var(--gx-fs-md);
	color: var(--gx-text-muted);
}

/* 정의형 상세표 */
.gx-deftable th {
	width: 140px;
	height: 44px;
	padding: 0 var(--gx-sp-20);
	font-size: var(--gx-fs-sm);
	font-weight: 700;
	color: var(--gx-text);
	background: var(--gx-surface);
	border-bottom: 1px solid var(--gx-border-subtle);
}

.gx-deftable td {
	padding: 0 var(--gx-sp-20);
	font-size: var(--gx-fs-md);
	color: var(--gx-text);
	border-bottom: 1px solid var(--gx-border-subtle);
}

.gx-deftable tr:first-child th,
.gx-deftable tr:first-child td {
	border-top: 1px solid var(--gx-border);
}

.gx-deftable tr:last-child th,
.gx-deftable tr:last-child td {
	border-bottom: 1px solid var(--gx-border);
}

.gx-deftable .gx-deftable__long {
	padding: var(--gx-sp-20);
	line-height: 1.6;
	vertical-align: top;
}

/* ============================================================
   페이지네이션
   ============================================================ */

.gx-paging {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--gx-sp-16);
	margin-top: var(--gx-sp-24);
}

.gx-paging__count {
	font-size: var(--gx-fs-sm);
	color: var(--gx-text-muted);
}

.gx-paging__list {
	display: flex;
	align-items: center;
	gap: var(--gx-sp-4);
}

.gx-pg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 var(--gx-sp-8);
	font-size: var(--gx-fs-sm);
	color: var(--gx-text-secondary);
	background: transparent;
	border: 0;
	border-radius: var(--gx-r-6);
	cursor: pointer;
	transition: background-color var(--gx-t-fast) var(--gx-ease);
}

.gx-pg:hover {
	background: var(--gx-surface);
	color: var(--gx-text-secondary);
}

.gx-pg.is-current {
	background: var(--gx-primary);
	color: var(--gx-canvas);
	font-weight: 700;
	cursor: default;
}

.gx-pg.is-current:hover {
	background: var(--gx-primary);
	color: var(--gx-canvas);
}

.gx-pg[disabled] {
	color: var(--gx-border);
	cursor: default;
}

.gx-pg[disabled]:hover {
	background: transparent;
}

.gx-paging__gap {
	min-width: 24px;
	text-align: center;
	font-size: var(--gx-fs-sm);
	color: var(--gx-text-muted);
}

.gx-paging__size {
	display: flex;
	align-items: center;
	gap: var(--gx-sp-8);
	font-size: var(--gx-fs-sm);
	color: var(--gx-text-muted);
}

/* 단축 padding 은 기본 .gx-select 가 화살표 자리로 비워둔 padding-right 까지 되돌린다.
   그러면 값과 화살표가 겹친다. 좌우를 따로 적어 화살표 자리를 지킨다. */
.gx-paging__size .gx-select {
	width: auto;
	height: 34px;
	padding: 0 var(--gx-sp-40) 0 var(--gx-sp-12);
	font-size: var(--gx-fs-sm);
}

/* ============================================================
   알림 - 카드 상단 띠. 좌측 컬러 바 방식은 쓰지 않는다
   ============================================================ */

.gx-alertband {
	display: flex;
	align-items: center;
	gap: var(--gx-sp-10);
	padding: 14px var(--gx-sp-24);
	background: var(--gx-danger);
	color: var(--gx-canvas);
	font-size: var(--gx-fs-sm);
	font-weight: 700;
}

/* 본문 안에 단독으로 놓이는 알림 - 카드 없이 띠만 쓸 때 모서리를 맡는다 */
.gx-alertbox {
	margin-bottom: var(--gx-sp-24);
	border-radius: var(--gx-r-8);
	overflow: hidden;
}

.gx-alertband--success { background: var(--gx-success); }
.gx-alertband--info { background: var(--gx-info); }

.gx-alertband__icon {
	flex: none;
}

/* ============================================================
   반응형 - 컨트롤 치수는 줄이지 않는다. 배치만 바꾼다
   ============================================================ */

@media (max-width: 1023px) {
	.gx-cardgrid {
		grid-template-columns: minmax(0, 1fr);
	}

	.gx-gnb__list {
		overflow-x: auto;
	}

	.gx-filter__item,
	.gx-filter__item--grow {
		flex: 1 1 100%;
	}

	.gx-fieldrow {
		flex-direction: column;
	}

	.gx-tablebox {
		overflow-x: auto;
	}

	.gx-table {
		min-width: 900px;
	}
}

@media (max-width: 767px) {
	/* 헤더 - 로고만 남기고 나머지(GNB, 제품소개서/사용자/로그아웃)는 햄버거 안으로 */
	.gx-header {
		height: auto;
	}

	/* gx-inner와 클래스를 같이 쓰는 요소라 padding 통째로 덮으면 좌우 여백(24px)까지
	   같이 날아간다 - 위아래만 건드린다 */
	.gx-header__inner {
		padding-top: var(--gx-sp-12);
		padding-bottom: var(--gx-sp-12);
	}

	/* 서비스명 부제("공간정보 유통경로추적솔루션")가 길어서 두 줄로 접히면
	   브랜드 블록 자체가 커져 햄버거 버튼이 다음 줄로 밀려난다 - 앱 헤더(햄버거가 있는
	   #gxHeadWrap 쪽)에서만 로고만 남긴다. gxBrand를 같이 쓰는 로그인 화면은 햄버거가
	   없어 자리가 넉넉하니 그대로 둔다(바로 아래 규칙에서 로고 밑줄로 세운다) */
	.gx-headwrap .gx-brand__sep,
	.gx-headwrap .gx-brand__name {
		display: none;
	}

	/* 로그인 화면 브랜드 - 모바일에서는 로고만, 부제는 뺀다 */
	.gx-login__col .gx-brand__sep,
	.gx-login__col .gx-brand__name {
		display: none;
	}

	/* 로그인 화면 - 로고와 카드 사이 여백이 데스크탑 값(48+32) 그대로면 모바일에서 휑하다 */
	.gx-login {
		padding: var(--gx-sp-24) var(--gx-sp-16);
	}

	.gx-login__col {
		gap: var(--gx-sp-20);
	}

	.gx-navtoggle {
		display: inline-flex;
	}

	/* 데스크탑 헤더의 userbox(제품소개서/사용자명/로그아웃)는 모바일에서 아예 안 그린다 -
	   같은 내용이 드로어 안 .gx-gnb__userbox로 따로 있다 */
	.gx-userbox {
		display: none;
	}

	/* 배경막 - 클릭하면 닫힘(gx-nav.js), 열렸을 때만 손을 받는다 */
	.gx-navbackdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(30, 33, 36, 0.48);
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--gx-t-base) var(--gx-ease);
		z-index: 60;
	}

	.gx-headwrap.is-open .gx-navbackdrop {
		opacity: 1;
		pointer-events: auto;
	}

	/* GNB 자체가 오른쪽에서 슬라이드해 들어오는 드로어가 된다. display로 여닫으면
	   transition이 안 먹으므로 늘 렌더링해두고 transform만 움직인다.
	   위(사용자/닫기) - 가운데(메뉴, 넘치면 이 부분만 스크롤) - 아래(제품소개서) 3단 flex */
	.gx-gnb {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(82vw, 360px);
		height: 100%;
		background: var(--gx-canvas);
		border-bottom: none;
		border-left: 1px solid var(--gx-border-subtle);
		box-shadow: var(--gx-shadow-modal);
		overflow: hidden;
		transform: translateX(100%);
		transition: transform var(--gx-t-base) var(--gx-ease);
		z-index: 70;
	}

	.gx-headwrap.is-open .gx-gnb {
		transform: translateX(0);
	}

	.gx-gnb__head {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: space-between;
		gap: var(--gx-sp-12);
		padding: var(--gx-sp-12);
		background: var(--gx-canvas);
		border-bottom: 1px solid var(--gx-border-subtle);
	}

	.gx-gnb__who {
		display: flex;
		align-items: center;
		gap: var(--gx-sp-12);
		min-width: 0;
		font-size: var(--gx-fs-sm);
		color: var(--gx-text-secondary);
	}

	.gx-gnb__who strong {
		font-weight: 700;
		color: var(--gx-text);
	}

	.gx-gnb__close {
		display: inline-flex;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		padding: 0;
		background: none;
		border: none;
		color: var(--gx-text-secondary);
		cursor: pointer;
	}

	.gx-gnb__close:hover {
		color: var(--gx-text);
	}

	.gx-gnb__list {
		flex: 1 1 auto;
		flex-direction: column;
		align-items: stretch;
		height: auto;
		overflow-x: visible;
		overflow-y: auto;
		padding: var(--gx-sp-8) var(--gx-sp-8) 0;
	}

	.gx-gnb__item {
		flex-direction: column;
	}

	.gx-gnb__link {
		height: 44px;
		padding: 0 var(--gx-sp-12);
	}

	.gx-gnb__item.is-active > .gx-gnb__link {
		box-shadow: inset 3px 0 0 0 var(--gx-primary);
	}

	/* 캐럿은 데스크탑에서 hover로 펼침을 암시하는 장식이다 - 모바일은 늘 펼쳐 두니 의미가 없다 */
	.gx-gnb__caret {
		display: none;
	}

	/* 하위메뉴 - 데스크탑처럼 hover로 띄우지 않고 늘 펼쳐 둔다(터치엔 hover가 없다).
	   한쪽만 들여쓴 박스로 감싸면 균형이 깨져 보인다 - 박스 대신 드로어 폭을 그대로
	   가로지르는 위/아래 선으로 구획만 나눈다(list의 8px 패딩을 음수 마진으로 상쇄) */
	.gx-gnb__sub {
		position: static;
		display: block;
		min-width: 0;
		margin: var(--gx-sp-4) var(--gx-sp-4) var(--gx-sp-8);
		padding: var(--gx-sp-4) 0;
		background: transparent;
		border: 1px solid var(--gx-border-subtle);
	}

	.gx-gnb__sublink {
		height: 36px;
		padding: 0 var(--gx-sp-12) 0 var(--gx-sp-24);
	}

	.gx-gnb__footer {
		display: flex;
		flex: none;
		justify-content: center;
		flex-wrap: wrap;
		gap: var(--gx-sp-8);
		padding: var(--gx-sp-16);
		background: var(--gx-canvas);
		border-top: 1px solid var(--gx-border-subtle);
	}

	/* 제목 + 지원포맷 뱃지 - 한 줄에 우겨넣지 않고 각자 줄을 준다 */
	.gx-pagehead__row {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--gx-sp-8);
	}

	/* 파일 선택 - 버튼/파일명/힌트가 44px 한 줄에 다 안 들어가 넘치던 것 */
	.gx-upload {
		flex-wrap: wrap;
		height: auto;
		min-height: 44px;
		padding: var(--gx-sp-12) var(--gx-sp-16);
	}

	.gx-upload__name,
	.gx-upload__hint {
		flex-basis: 100%;
		white-space: normal;
	}

	/* 검색기간 - 한 줄에 [날짜] ~ [날짜]. 날짜칸은 인라인 style="width:175px"가
	   박혀 있어 !important로만 이길 수 있다. 남는 폭을 반씩 나눠 갖게 하고, 달력 아이콘
	   자리를 줄인 만큼 날짜 텍스트("2026-09-18")가 들어갈 자리를 확보한다 */
	.gx-daterange {
		gap: var(--gx-sp-8);
	}

	.gx-datefield {
		flex: 1 1 0;
		min-width: 0;
		width: auto !important;
	}

	.gx-datefield .gx-input {
		padding: 0 var(--gx-sp-24) 0 var(--gx-sp-10);
		font-size: var(--gx-fs-sm);
	}

	.gx-datefield__icon {
		right: var(--gx-sp-4);
	}

	.gx-datefield__icon svg {
		width: 16px;
		height: 16px;
	}

	.gx-daterange__sep {
		flex: none;
	}

	/* 페이지네이션 - 3칸이 각자 좌측 정렬로 세로로 쌓이면 어색하다. 건수 표시는
	   빼고(공간도 좁고 페이지 번호로 대충 짐작 가능) 남은 둘은 가운데로 모은다 */
	.gx-paging {
		justify-content: center;
	}

	.gx-paging__count {
		display: none;
	}
}