/* 배송 추적 화면에서만 사용하는 추가 스타일 */

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

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

/*
 * 액세스 키와 시크릿 키를 나란히 놓는 자리. 이름과 값, 단추가 한 줄을 이룬다.
 */
.track-keys{
	display:flex;
	flex-direction:column;
	gap:12px;
}

/* 이름과 단추를 위에 두고 값을 아래에 둔다. 칸이 좁아도 배치가 흐트러지지 않는다. */
.track-keys__row{
	display:flex;
	flex-direction:column;
	gap:6px;
}

.track-keys__head{
	display:flex;
	align-items:center;
	gap:8px;
}

.track-keys__label{
	font-size:13px;
	font-weight:600;
	color:var(--text-sub);
}

.track-keys__act{
	display:inline-flex;
	gap:6px;
	margin-left:auto;
}

.track-keys .track-key{
	width:100%;
	min-width:0;
	max-width:none;
}

/* 키는 길어서 줄바꿈하여 표시한다. */
.track-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;
}

/* 기록 본문은 길어서 접어 둔다. */
.track-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;
}

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

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

.track-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);
}

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

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

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

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

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

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

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

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

.track-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);
}

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

.track-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;
}

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

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

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

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

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

.track-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);
}

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

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

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

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

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

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

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

.track-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;
}

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

/* ---------- API 사용 안내 ---------- */

.guide-top{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	height:var(--topbar-h);
	padding:0 28px;
	background:var(--surface);
	border-bottom:1px solid var(--line);
}

.guide{
	display:flex;
	align-items:flex-start;
	gap:28px;
	padding:28px 28px 80px;
}

/*
 * 차례는 화면에 고정한다. 문서가 길어 아래로 이동한 이후에는 현재 확인 중인 항목을
 * 파악하기 어렵다.
 */
.guide__nav{
	position:sticky;
	top:28px;
	flex:0 0 200px;
	display:flex;
	flex-direction:column;
	padding:16px 0;
	background:var(--surface);
	border:1px solid var(--line);
}

.guide__nav-title{
	margin:0 0 8px;
	padding:0 18px;
	font-size:12px;
	font-weight:700;
	letter-spacing:.02em;
	color:var(--muted);
}

.guide__nav a{
	padding:9px 18px;
	font-size:14px;
	font-weight:500;
	color:var(--text);
	text-decoration:none;
	border-left:2px solid transparent;
}

.guide__nav a:hover{
	background:var(--line-soft);
	border-left-color:var(--blue);
	color:var(--blue-dark);
}

.guide__body{
	flex:1;
	min-width:0;
	max-width:960px;
}

.guide__sec{
	margin:0 0 44px;
	padding:26px 28px;
	background:var(--surface);
	border:1px solid var(--line);
	/* 차례에서 이동했을 때 제목이 상단에 가려지지 않도록 여백을 확보한다. */
	scroll-margin-top:20px;
}

.guide__sec h2{
	margin:0 0 16px;
	padding:0 0 14px;
	font-size:20px;
	border-bottom:1px solid var(--line);
}

.guide__sec h3{
	margin:28px 0 12px;
	font-size:16px;
}

.guide__sec p{
	margin:0 0 14px;
	/* 원본에 둔 줄 나눔을 그대로 표시한다. 문장마다 줄을 나누어 적는다. */
	white-space:pre-line;
	font-size:15px;
	line-height:1.75;
	color:var(--text);
}

.guide__sec code{
	padding:2px 6px;
	background:var(--line-soft);
	font-size:13px;
	color:var(--ink-2);
}

.guide__code{
	margin:0 0 16px;
	padding:16px 18px;
	background:#0f1720;
	font-size:13px;
	line-height:1.7;
	color:#e5e8eb;
	/* 예시는 접지 않는다. 줄이 길면 가로로 스크롤하여 확인한다. */
	white-space:pre;
	overflow-x:auto;
}

.guide__table{
	margin:0 0 16px;
}

.guide__table td{
	font-size:14px;
	line-height:1.7;
	/* 원본에 둔 줄 나눔을 그대로 표시한다. 문장마다 줄을 나누어 적는다. */
	white-space:pre-line;
}

.guide__note{
	margin:0 0 16px !important;
	/* 원본에 둔 줄 나눔을 그대로 표시한다. 문장마다 줄을 나누어 적는다. */
	white-space:pre-line;
	padding:14px 16px;
	background:var(--blue-soft);
	border-left:3px solid var(--blue);
	font-size:14px !important;
	color:var(--blue-dark) !important;
}

.guide__warn{
	display:flex;
	gap:10px;
	white-space:pre-line;
	margin:0 0 16px !important;
	padding:14px 16px;
	background:var(--amber-soft);
	border-left:3px solid var(--amber);
	font-size:14px !important;
	color:#8a5a00 !important;
}

.guide__warn i{
	margin-top:3px;
	color:var(--amber);
}

.guide__steps{
	margin:0;
	padding:0 0 0 20px;
	font-size:15px;
	line-height:1.9;
	color:var(--text);
}

.guide__steps li{
	margin:0 0 6px;
	/* 원본에 둔 줄 나눔을 그대로 표시한다. 문장마다 줄을 나누어 적는다. */
	white-space:pre-line;
}

@media (max-width:1024px){
	.guide{
		flex-direction:column;
		padding:20px 16px 56px;
	}

	.guide__nav{
		position:static;
		flex:none;
		width:100%;
		flex-direction:row;
		flex-wrap:wrap;
		gap:4px;
		padding:12px;
	}

	.guide__nav-title{
		width:100%;
		padding:0 6px;
	}

	.guide__nav a{
		padding:6px 10px;
		border-left:0;
		background:var(--line-soft);
	}

	.guide-top{
		padding:0 16px;
	}

	.guide__sec{
		padding:20px 16px;
	}
}

.track-login__guide{
	display:block;
	margin:16px 0 0;
	font-size:14px;
	font-weight:500;
	color:var(--text-sub);
	text-align:center;
	text-decoration:none;
}

.track-login__guide:hover{
	color:var(--blue-dark);
	text-decoration:underline;
}