/* 차량정보 API 화면에서만 사용하는 추가 스타일 */

.nv-brand{
	font-size:18px;
	font-weight:700;
	letter-spacing:-.03em;
	color:var(--ink);
}

.nv-topbar__who{
	margin-right:4px;
	font-size:14px;
	font-weight:600;
	color:var(--text-sub);
}

/* 키는 길므로 줄바꿈하여 표시한다. */
.nv-key{
	display:inline-block;
	/* 다른 칸이 넓어져도 주소와 키가 한 글자씩 분리되지 않을 만큼의 공간을 유지한다. */
	min-width:150px;
	max-width:360px;
	font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size:13px;
	color:var(--ink-2);
	word-break:break-all;
	line-height:1.5;
	vertical-align:middle;
}

/* 기록 본문은 길므로 접은 상태로 표시한다. */
.nv-raw{
	margin:0 0 8px;
	/* 좁은 칸에서도 본문을 읽을 수 있도록 최소 너비를 지정한다. */
	min-width:240px;
	max-height:220px;
	overflow:auto;
	padding:12px 14px;
	background:var(--line-soft);
	border-radius:0;
	font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size:12px;
	line-height:1.6;
	color:var(--ink-2);
	white-space:pre-wrap;
	word-break:break-all;
	text-align:left;
}

/* ---------- 로그인 ---------- */

.nv-login{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:100vh;
	padding:40px 20px;
}

.nv-login__panel{
	width:100%;
	max-width:400px;
	padding:36px 32px 32px;
	background:var(--surface);
	border-radius:0;
	box-shadow:0 4px 24px rgba(25,31,40,.06);
}

.nv-login__title{
	margin:0 0 28px;
	font-size:24px;
	text-align:center;
}

.nv-login__field{
	margin-bottom:16px;
}

.nv-login__field label{
	display:block;
	margin-bottom:8px;
	font-size:14px;
	font-weight:600;
	color:var(--ink-2);
}

.nv-login__field .input{
	width:100%;
	height:56px;
	border-radius:0;
	font-size:16px;
}

.nv-login__error{
	margin:0 0 16px;
	padding:14px 16px;
	border-radius:0;
	background:var(--red-soft);
	font-size:14px;
	color:var(--red);
}

.nv-login__submit{
	width:100%;
	height:var(--control-h-lg);
	margin-top:12px;
	border-radius:0;
	font-size:17px;
}

/* ---------- 설치 ---------- */

.nv-install{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:100vh;
	padding:48px 20px;
}

.nv-install__panel{
	width:100%;
	max-width:600px;
	padding:36px 32px 32px;
	background:var(--surface);
	border-radius:0;
	box-shadow:0 4px 24px rgba(25,31,40,.06);
}

.nv-install__title{
	margin:0 0 24px;
	font-size:24px;
	text-align:center;
}

.nv-install__lead{
	display:flex;
	align-items:flex-start;
	gap:10px;
	margin:0 0 28px;
	padding:16px 18px;
	border-radius:0;
	font-size:15px;
	font-weight:600;
	line-height:1.6;
}

.nv-install__lead i{
	margin-top:3px;
}

.nv-install__lead--ok{
	background:var(--green-soft);
	color:#0b8f6c;
}

.nv-install__lead--bad{
	background:var(--red-soft);
	color:var(--red);
}

.nv-install__sub{
	margin:0 0 10px;
	font-size:14px;
	color:var(--text-sub);
}

.nv-install__list{
	margin:0 0 24px;
	padding:0;
	list-style:none;
}

.nv-install__list li{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:10px;
	padding:16px 2px;
	font-size:15px;
	border-bottom:1px solid var(--line);
}

.nv-install__list li:first-child{
	border-top:1px solid var(--line);
}

.nv-install__list li.is-ok i{ color:var(--green) }
.nv-install__list li.is-bad i{ color:var(--red) }

.nv-install__list li span{
	flex:1;
	min-width:0;
	color:var(--ink-2);
	word-break:break-all;
}

.nv-install__list li b{
	font-size:13px;
	font-weight:600;
	color:var(--muted);
}

.nv-install__list li em{
	flex:none;
	width:100%;
	padding-left:26px;
	font-size:13px;
	font-style:normal;
	color:var(--red);
	word-break:break-all;
}

.nv-install__note{
	margin:0 0 20px;
	font-size:14px;
	line-height:1.7;
	color:var(--text-sub);
}

.nv-install__note b{
	color:var(--ink-2);
}

.nv-install__note code{
	display:block;
	margin-top:10px;
	padding:12px 14px;
	background:var(--line-soft);
	border-radius:0;
	font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size:13px;
	color:var(--ink-2);
	word-break:break-all;
}

.nv-install__go{
	width:100%;
	height:var(--control-h-lg);
	border-radius:0;
	font-size:17px;
}


/* ---------- 차량정보 API 화면 전용 ---------- */

/* 처리 결과의 여러 줄 사유를 줄 단위로 표시한다. */
[data-nv-alert-message]{
	white-space:pre-line;
}

.nv-password{
	display:inline-flex;
	align-items:center;
	gap:6px;
}

/* 배송 추적 공통 스타일에 정의되지 않은 열 너비 */
.admin-col-w80{ width:80px }
.admin-col-w100{ width:100px }
.admin-col-w120{ width:120px }
.admin-col-w130{ width:130px }
.admin-col-w220{ width:220px }
.admin-col-w230{ width:230px }
.admin-col-w380{ width:380px }
.admin-col-w480{ width:480px }

.input--w-sm{
	width:120px;
	max-width:100%;
}

.sheet__empty{
	color:var(--muted);
}

.admin-modal__panel--wide{
	max-width:1080px;
}

.admin-cell-link{
	color:inherit;
	text-decoration:none;
}

.admin-cell-link:hover,
.admin-cell-link:focus-visible{
	color:var(--blue);
	text-decoration:underline;
}

/* 선택 시 차대번호를 클립보드에 복사한다. 복사 후 잠시 "복사됨"을 표시한다. */
.nv-copy{
	padding:0;
	border:0;
	background:none;
	color:inherit;
	font:inherit;
	cursor:copy;
}

.nv-copy:hover,
.nv-copy:focus-visible{
	color:var(--blue);
	text-decoration:underline;
}

.nv-copy.is-copied::after{
	content:"복사됨";
	margin-left:6px;
	color:var(--blue);
	font-size:12px;
}

/* 탭 */
.admin-tabs{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-bottom:16px;
}

.admin-tabs__item{
	display:inline-flex;
	align-items:center;
	gap:6px;
	height:var(--control-h-sm);
	padding:0 14px;
	background:var(--surface);
	border:1px solid var(--line);
	font-size:14px;
	font-weight:600;
	color:var(--text);
	text-decoration:none;
}

.admin-tabs__item:hover{
	color:var(--ink);
}

.admin-tabs__item.is-active{
	background:var(--blue);
	border-color:var(--blue);
	color:#fff;
}

.admin-tabs__count{
	font-size:12px;
	font-weight:500;
	opacity:.8;
}

/* 목록의 날짜·구분처럼 짧은 값은 줄바꿈하지 않는다. 칸이 좁아지면 한 글자씩 분리되어 읽기 어렵다. */
.nv-nowrap{
	white-space:nowrap;
}

/* 참조값·사유처럼 공백 없이 긴 값은 칸 안에서 줄바꿈한다. 줄바꿈하지 않으면 표가 화면보다 넓어진다. */
.nv-break{
	word-break:break-all;
}

/* 부품코드 목록은 쉼표 뒤에서만 줄바꿈한다. 코드 중간에서 분리되면 다른 코드로 인식된다. */
.nv-key.nv-codes{
	word-break:keep-all;
}

/* 값과 표시 전환 버튼을 한 줄에 배치한다. 칸이 좁아도 버튼이 값 아래로 이동하지 않는다. */
.nv-secret{
	display:inline-flex;
	align-items:center;
	gap:6px;
}

.nv-secret .nv-key{
	min-width:0;
}

/*
 * 검색 영역의 짧은 입력란(작업 번호 등). 공통 스타일은 글자 입력란을 모두 넓게 확장하므로, 짧은 입력란이
 * 함께 있으면 버튼이 다음 줄로 이동한다.
 */
.admin-filter .input.input--w-sm{
	flex:0 0 120px;
	min-width:120px;
}

/* 사용 여부 스위치. 목록의 버튼과 서식의 확인란에 동일한 모양을 적용한다. */
.nv-switch{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:0;
	border:0;
	background:transparent;
	color:var(--text-sub);
	font:inherit;
	font-size:13px;
	cursor:pointer;
	vertical-align:middle;
}
.nv-switch__input{
	position:absolute;
	width:1px;
	height:1px;
	opacity:0;
	pointer-events:none;
}
.nv-switch__track{
	position:relative;
	flex:none;
	display:block;
	width:40px;
	height:22px;
	border-radius:11px;
	background:#d1d6db;
	transition:background-color .15s var(--ease);
}
.nv-switch__thumb{
	position:absolute;
	top:2px;
	left:2px;
	width:18px;
	height:18px;
	border-radius:50%;
	background:#fff;
	box-shadow:0 1px 3px rgba(15, 23, 42, .25);
	transition:transform .15s var(--ease);
}
.nv-switch.is-on,
.nv-switch__input:checked ~ .nv-switch__text{
	color:var(--blue);
	font-weight:600;
}
.nv-switch.is-on .nv-switch__track,
.nv-switch__input:checked + .nv-switch__track{
	background:var(--blue);
}
.nv-switch.is-on .nv-switch__thumb,
.nv-switch__input:checked + .nv-switch__track .nv-switch__thumb{
	transform:translateX(18px);
}
.nv-switch__text{
	min-width:3em;
	text-align:left;
	white-space:nowrap;
}
.nv-switch__text[data-on]::after{
	content:attr(data-off);
}
.nv-switch__input:checked ~ .nv-switch__text[data-on]::after{
	content:attr(data-on);
}
.nv-switch:focus-visible,
.nv-switch__input:focus-visible + .nv-switch__track{
	outline:2px solid var(--blue);
	outline-offset:2px;
}
.nv-switch[disabled]{
	cursor:wait;
	opacity:.6;
}


/* 현황 화면의 수치 */
.nv-stats{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
	gap:12px;
	margin-bottom:20px;
}

.nv-stat{
	padding:18px 20px;
	background:var(--surface);
	border:1px solid var(--line);
}

.nv-stat__label{
	margin:0 0 8px;
	font-size:13px;
	font-weight:600;
	color:var(--text-sub);
}

.nv-stat__value{
	margin:0;
	font-size:26px;
	font-weight:700;
	letter-spacing:-.02em;
	color:var(--ink);
	font-variant-numeric:tabular-nums;
}

.nv-stat__sub{
	margin:6px 0 0;
	font-size:12px;
	color:var(--muted);
}

/* 관리 화면의 차대번호 조회 */
.nv-lookup{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	align-items:center;
}

.nv-lookup .input{
	width:260px;
	max-width:100%;
	font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
	text-transform:uppercase;
}

/* 차량 상세의 부품 품목군 제목 */
.nv-group{
	padding:10px var(--row-x);
	background:var(--line-soft);
	font-size:13px;
	font-weight:700;
	color:var(--ink-2);
	text-align:left;
}