/* 배송 추적 관리 화면의 기본 스타일. 토스 구성을 기준으로 구성한다. */

/*
 * 전역 박스 계산 규칙. 이 선언이 없으면 너비를 100% 로 지정한 입력란과 버튼이 안쪽 여백만큼
 * 카드 바깥으로 확장된다. 이 저장소는 나이스리파츠의 style.css 를 사용하지 않으므로 여기에서
 * 직접 지정한다.
 */
*,
*::before,
*::after{
	box-sizing:border-box;
}

:root{
	/* 색 */
	--ink:#191f28;
	--ink-2:#333d4b;
	--text:#4e5968;
	--text-sub:#6b7684;
	--muted:#8b95a1;
	--line:#e5e8eb;
	--line-soft:#f2f4f6;
	--surface:#ffffff;
	--canvas:#f7f8fa;

	--blue:#3182f6;
	--blue-dark:#1b64da;
	--blue-soft:#e8f2fe;
	--green:#12b886;
	--green-soft:#e4f7f1;
	--red:#f04452;
	--red-soft:#fdecee;
	--amber:#f59f00;
	--amber-soft:#fff4e0;
	--purple:#7f56d9;
	--purple-soft:#f2edfd;

	/* 크기 */
	--topbar-h:64px;
	--sidebar-w:220px;
	--container-max:1560px;
	--control-h:44px;
	--control-h-sm:32px;
	--control-h-lg:56px;

	/* 목록 한 행의 상하 여백과 최소 높이 */
	--row-y:18px;
	--row-x:12px;
	--row-h:68px;

	/* 모서리와 그림자 */
	--r-card:0;
	--r-control:0;
	--r-control-sm:0;
	--r-control-lg:0;
	--r-chip:0;
	--shadow-card:0 1px 3px rgba(25,31,40,.04), 0 1px 2px rgba(25,31,40,.03);
	--shadow-float:0 12px 32px rgba(25,31,40,.14);
	--ease:cubic-bezier(.25,.46,.45,.94);
}

html{
	-webkit-text-size-adjust:100%;
}

body.admin-body{
	margin:0;
	min-width:0;
	background:var(--canvas);
	color:var(--text);
	font-family:Pretendard, -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
	font-size:15px;
	line-height:1.5;
	letter-spacing:-.01em;
	-webkit-font-smoothing:antialiased;
}

.admin-body.is-admin-modal-open{
	overflow:hidden;
}

/*
 * 제목의 모양만 정한다. 여백까지 여기에서 초기화하면 선택자의 우선순위가 높아 개별 규칙의
 * 여백 지정을 덮어쓴다.
 */
.admin-body h1,
.admin-body h2,
.admin-body h3{
	color:var(--ink);
	font-weight:700;
	letter-spacing:-.02em;
}

.admin-body a{
	color:inherit;
	text-decoration:none;
}

.admin-body button{
	font-family:inherit;
	cursor:pointer;
}

/* ---------- 상단 막대 ---------- */

.admin-topbar{
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:40;
	display:flex;
	align-items:center;
	gap:12px;
	height:var(--topbar-h);
	padding:0 24px;
	background:rgba(255,255,255,.88);
	backdrop-filter:saturate(180%) blur(12px);
	border-bottom:1px solid var(--line-soft);
}

.admin-topbar__brand{
	display:flex;
	align-items:center;
	gap:10px;
}

.admin-topbar__spacer{
	margin-left:auto;
}

/* ---------- 뼈대 ---------- */

.admin-layout{
	display:flex;
	align-items:flex-start;
	padding-top:var(--topbar-h);
}

.admin-sidebar{
	position:sticky;
	top:var(--topbar-h);
	flex:none;
	width:var(--sidebar-w);
	height:calc(100vh - var(--topbar-h));
	padding:16px 12px;
	overflow-y:auto;
}

.admin-nav{
	display:flex;
	flex-direction:column;
	gap:2px;
}

.admin-nav__item{
	display:flex;
	align-items:center;
	gap:12px;
	height:46px;
	padding:0 14px;
	border-radius:0;
	color:var(--text-sub);
	font-size:15px;
	font-weight:600;
	transition:background-color .15s var(--ease), color .15s var(--ease);
}

.admin-nav__item i{
	width:18px;
	font-size:15px;
	text-align:center;
	color:var(--muted);
	transition:color .15s var(--ease);
}

.admin-nav__item:hover{
	background:var(--line-soft);
	color:var(--ink-2);
}

.admin-nav__item.is-active{
	background:var(--blue-soft);
	color:var(--blue-dark);
}

.admin-nav__item.is-active i{
	color:var(--blue);
}

.admin-content{
	flex:1;
	min-width:0;
	padding:28px 28px 80px;
}

/*
 * 본문은 왼쪽 메뉴에 이어 붙인다. 가운데로 모으면 넓은 화면에서 메뉴와 본문 사이가
 * 벌어져 두 영역이 따로 놓인 것처럼 보인다.
 */
.admin-container{
	max-width:var(--container-max);
	margin:0;
}

/* ---------- 화면 제목 ---------- */

.admin-page-title{
	margin:0 0 20px;
	font-size:26px;
	line-height:1.35;
}

/*
 * 화면 설명. 제목에 붙여 두면 제목의 일부로 읽히고 아래 내용과도 붙는다. 별도의 상자로
 * 감싸 설명임을 드러내고 아래 내용과 간격을 둔다.
 */
.admin-page-note{
	margin:0 0 28px;
	padding:16px 18px;
	background:var(--blue-soft);
	border-left:3px solid var(--blue);
	font-size:14px;
	line-height:1.7;
	color:var(--blue-dark);
	/* 원본에 둔 줄 나눔을 그대로 표시한다. 문장마다 줄을 나누어 적는다. */
	white-space:pre-line;
}

/* ---------- 버튼 ---------- */

.abtn,
.admin-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	height:38px;
	padding:0 16px;
	border:1px solid var(--line);
	border-radius:0;
	background:var(--surface);
	color:var(--ink-2);
	font-size:15px;
	font-weight:600;
	letter-spacing:-.01em;
	white-space:nowrap;
	transition:background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), opacity .15s var(--ease);
}

.abtn i,
.admin-btn i{
	font-size:13px;
}

.abtn:hover,
.admin-btn:hover{
	background:var(--line-soft);
}

.abtn:disabled{
	opacity:.45;
	cursor:default;
}

.abtn--primary{
	border-color:transparent;
	background:var(--blue);
	color:#fff;
}

.abtn--primary:hover{
	background:var(--blue-dark);
}

.abtn--danger{
	border-color:transparent;
	background:var(--red-soft);
	color:var(--red);
}

.abtn--danger:hover{
	background:#fbdcdf;
}

/* 되돌릴 수 없는 변경. 주의해서 누르도록 구분한다. */
.abtn--warn{
	border-color:transparent;
	background:var(--amber-soft);
	color:#b87100;
}

.abtn--warn:hover{
	background:#ffe6bd;
}

/* 상태를 바꾸는 단추. 주 동작보다 약하게 표시한다. */
.abtn--soft{
	border-color:transparent;
	background:var(--blue-soft);
	color:var(--blue-dark);
}

.abtn--soft:hover{
	background:#d6e7fd;
}

.abtn--sm{
	height:var(--control-h-sm);
	padding:0 10px;
	border-radius:0;
	font-size:13px;
}

.admin-btn--ghost{
	border-color:transparent;
	background:var(--line-soft);
	color:var(--text);
}

.admin-btn--ghost:hover{
	background:var(--line);
}

/* ---------- 입력 ---------- */

.input{
	height:var(--control-h);
	padding:0 14px;
	max-width:100%;
	border:1px solid var(--line);
	border-radius:0;
	background:var(--surface);
	color:var(--ink);
	font-family:inherit;
	font-size:15px;
	letter-spacing:-.01em;
	transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}

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

.input:focus{
	outline:none;
	border-color:var(--blue);
	box-shadow:0 0 0 3px rgba(49,130,246,.16);
}

select.input{
	appearance:none;
	padding-right:34px;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238b95a1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 13px center;
	cursor:pointer;
}

.input--w-md{
	width:280px;
}

.input--w-lg{
	width:480px;
}

.input--number{
	width:110px;
	text-align:right;
}

/* 단위를 포함하는 입력란. */
.igroup{
	display:inline-flex;
	align-items:center;
	gap:8px;
}

.igroup__addon{
	font-size:14px;
	color:var(--text-sub);
}

/* 이름 없이 표시만 하는 선택 상자. */
.form-check{
	display:inline-flex;
	align-items:center;
}

.form-check--center{
	justify-content:center;
	width:100%;
}

.form-check input[type="checkbox"]{
	width:18px;
	height:18px;
	margin:0;
	accent-color:var(--blue);
	cursor:pointer;
}

.form-check input[type="checkbox"]:disabled{
	cursor:default;
	opacity:.4;
}

/* ---------- 카드 ---------- */

.admin-panel{
	margin-bottom:24px;
	background:var(--surface);
	border-radius:0;
	box-shadow:var(--shadow-card);
	overflow:hidden;
}

.admin-panel__head{
	display:flex;
	align-items:center;
	gap:10px;
	padding:22px 24px;
	border-bottom:1px solid var(--line);
}

.admin-panel__head h2{
	margin:0;
	font-size:17px;
}

.admin-panel__body{
	padding:24px 24px 28px;
}

.admin-panel__body--flush{
	padding:0;
	overflow-x:auto;
}

/* ---------- 검색 영역 ---------- */

.admin-filter{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:8px;
	margin-bottom:20px;
	padding:18px 20px;
	background:var(--surface);
	border-radius:0;
	box-shadow:var(--shadow-card);
}

.admin-filter .input{
	min-width:160px;
}

.admin-filter .input[type="text"]{
	flex:1;
	min-width:220px;
}

/* ---------- 목록 위 줄 ---------- */

.admin-toolbar{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:10px;
	margin-bottom:14px;
	padding:0 4px;
}

.admin-toolbar__left,
.admin-toolbar__right{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:8px;
}

.admin-toolbar__right{
	margin-left:auto;
}

.admin-toolbar .admin-cell-sub{
	display:inline;
	margin:0;
	font-size:14px;
	font-weight:600;
	color:var(--text);
}

/* ---------- 표 ---------- */

.admin-table{
	width:100%;
	border-collapse:collapse;
	font-size:14px;
}

.admin-table th,
.admin-table td{
	padding:var(--row-y) var(--row-x);
	text-align:center;
	vertical-align:middle;
	font-variant-numeric:tabular-nums;
}

.admin-table thead th{
	position:relative;
	padding-top:14px;
	padding-bottom:14px;
	background:var(--line-soft);
	color:var(--text-sub);
	font-size:13px;
	font-weight:600;
	white-space:nowrap;
}

.admin-table tbody tr{
	height:var(--row-h);
	border-top:1px solid var(--line);
}

.admin-table tbody tr:hover{
	background:var(--canvas);
}

.admin-table td{
	color:var(--text);
}

/*
 * 목록 표의 최소 너비. 화면이 좁을 때 칸을 계속 줄이면 마지막 칸의 글자가 한 줄에 두세
 * 자씩 끊긴다. 이 너비 아래에서는 칸을 줄이지 않고 카드 안에서 가로로 움직인다.
 */
.admin-list-table{
	min-width:880px;
}

.admin-table-empty{
	padding:72px 16px !important;
	color:var(--muted);
	font-size:14px;
}

/*
 * 본문 칸의 좌측 정렬. 머리글은 가운데 정렬을 유지하므로 본문 칸만 대상으로 한다.
 * 선택자의 우선순위를 칸의 기본 정렬보다 높인다. 낮으면 지정이 적용되지 않는다.
 */
.admin-table td.admin-cell-left{
	text-align:left;
}

.admin-cell-strong{
	display:block;
	color:var(--ink);
	font-weight:600;
}

.admin-cell-sub{
	display:block;
	margin-top:6px;
	font-size:13px;
	color:var(--muted);
	line-height:1.55;
	/* 한글이 낱말 가운데에서 분리되지 않도록 어절 단위로 줄바꿈한다. */
	word-break:keep-all;
	overflow-wrap:break-word;
}

.admin-cell-muted{
	color:var(--muted);
}

/*
 * 칸의 너비. 화면이 좁으면 축소할 수 있는 권장값이다. 최소 너비까지 지정하면 합계가 내용
 * 영역을 초과하여 마지막 칸이 잘린다.
 */
.admin-col-w60{ width:60px }
.admin-col-w90{ width:90px }
.admin-col-w110{ width:110px }
.admin-col-w140{ width:140px }
.admin-col-w150{ width:150px }
.admin-col-w160{ width:160px }
.admin-col-w180{ width:180px }
.admin-col-w200{ width:200px }
.admin-col-w300{ width:300px }

/*
 * 관리 칸의 단추. 칸의 너비에 맞추어 한 줄에 놓을 개수가 정해지고 어느 줄에서나 크기가
 * 같아진다. 개수에 따라 폭이 들쭉날쭉해 보이던 문제를 없앤다.
 */
.table-actions{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(104px, 1fr));
	gap:8px;
	width:100%;
}

.table-actions .abtn{
	width:100%;
}

.table-actions .abtn{
	height:var(--control-h-sm);
	padding:0 12px;
	border-radius:0;
	font-size:13px;
}

/* 기록 본문을 접어 두는 영역. */
.admin-table td .track-key + .abtn{
	margin-left:6px;
	vertical-align:middle;
}

.admin-table details summary{
	display:inline-flex;
	align-items:center;
	gap:4px;
	color:var(--blue);
	font-size:13px;
	cursor:pointer;
	list-style:none;
}

.admin-table details summary::-webkit-details-marker{
	display:none;
}

.admin-table details[open] summary{
	margin-bottom:8px;
}

/* ---------- 서식 ---------- */

.sheet{
	width:100%;
	border-collapse:collapse;
}

.sheet th{
	/*
	 * 항목 이름은 줄을 나누지 않는다. 칸 너비는 표가 좁아지면 지정한 값보다 줄어들어,
	 * 이름이 두 줄로 나뉘고 입력란과 높이가 어긋난다.
	 */
	white-space:nowrap;
	padding-right:20px;
}

.sheet th,
.sheet td{
	padding:18px 0;
	text-align:left;
	vertical-align:top;
}

.sheet tbody tr + tr th,
.sheet tbody tr + tr td{
	border-top:1px solid var(--line-soft);
}

.sheet th{
	padding-right:16px;
	color:var(--ink-2);
	font-size:15px;
	font-weight:600;
	line-height:var(--control-h);
}

/*
 * 입력란이 없는 안내용 서식. 기본 서식은 항목 이름의 줄 높이를 입력란 높이에 맞추므로,
 * 값이 글자만 있는 표에서는 이름이 값보다 아래에 배치된다. 양측의 줄 높이를 동일하게
 * 지정한다.
 */
.sheet--plain th,
.sheet--plain td{
	padding:14px 0;
	line-height:1.6;
}

.sheet--plain th{
	padding-right:16px;
}

/* 반영하지 않은 변경이 있을 때 본문 위쪽에 표시하는 알림. */
.admin-notice{
	white-space:pre-line;
	display:flex;
	align-items:center;
	gap:12px;
	margin:0 0 20px;
	padding:14px 18px;
	background:var(--amber-soft);
	border-left:3px solid var(--amber);
	font-size:14px;
	line-height:1.65;
	color:#8a5a00;
}

.admin-notice > i{
	flex:0 0 auto;
	color:var(--amber);
}

.admin-notice__msg{
	flex:1;
	min-width:0;
}

.admin-notice__msg b{
	color:#7a4f00;
}

.admin-notice__act{
	flex:0 0 auto;
}

@media (max-width:768px){
	.admin-notice{
		flex-wrap:wrap;
	}

	.admin-notice__act{
		width:100%;
	}
}

/* 서식 안에 나란히 두는 선택 항목. */
.sheet__checks{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:8px 18px;
	/*
	 * 입력란과 높이를 맞춘다. 지정하지 않으면 선택 항목의 높이가 입력란보다 낮아
	 * 항목 이름과 세로 위치가 어긋난다.
	 */
	min-height:var(--control-h);
}

.acheck{
	display:inline-flex;
	align-items:center;
	gap:7px;
	font-size:14px;
	color:var(--text);
	cursor:pointer;
}

.acheck input{
	width:16px;
	height:16px;
	margin:0;
	accent-color:var(--blue);
	cursor:pointer;
}

/* 이름을 앞에 둔 시각 표기. 무엇의 시각인지 구분할 수 있어야 한다. */
.admin-stamp{
	display:flex;
	align-items:baseline;
	justify-content:center;
	gap:6px;
	font-size:13px;
	line-height:1.6;
	color:var(--text);
}

.admin-stamp__label{
	flex:0 0 auto;
	font-size:12px;
	font-weight:600;
	color:var(--muted);
}

/* 멈춘 상태를 알리는 띠. 조치가 필요하다는 점이 드러나야 한다. */
.admin-notice--bad{
	background:var(--red-soft);
	border-left-color:var(--red);
	color:#a3232f;
}

.admin-notice--bad > i{
	color:var(--red);
}

.admin-notice--bad .admin-notice__msg b{
	color:#8f1f29;
}

/* 목록 칸에 표식을 나란히 둔다. */
.admin-chips{
	display:inline-flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:4px;
}

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

.admin-form-foot{
	display:flex;
	justify-content:flex-end;
	gap:8px;
	margin-top:24px;
	padding-top:24px;
	border-top:1px solid var(--line);
}

/* ---------- 상태 표시 ---------- */

.state{
	display:inline-flex;
	align-items:center;
	height:28px;
	padding:0 11px;
	border-radius:0;
	background:var(--line-soft);
	color:var(--text-sub);
	font-size:13px;
	font-weight:600;
	white-space:nowrap;
}

.state--blue{ background:var(--blue-soft); color:var(--blue-dark) }
.state--green{ background:var(--green-soft); color:#0b8f6c }
.state--red{ background:var(--red-soft); color:var(--red) }
.state--amber{ background:var(--amber-soft); color:#b87100 }
.state--purple{ background:var(--purple-soft); color:var(--purple) }
.state--gray{ background:var(--line-soft); color:var(--text-sub) }

/* 한 칸에 상태와 설명이 함께 배치되면 위쪽에 간격을 둔다. */
.admin-table td .state + .admin-cell-sub{
	margin-top:8px;
}

/* ---------- 안내 막대 ---------- */

.admin-alert{
	display:flex;
	align-items:flex-start;
	gap:10px;
	margin-bottom:20px;
	padding:18px 20px;
	border-radius:0;
	background:var(--blue-soft);
	color:var(--blue-dark);
	font-size:14px;
	line-height:1.6;
}

.admin-alert i{
	margin-top:2px;
}

.admin-alert__line{
	display:block;
}

.admin-alert__line + .admin-alert__line{
	margin-top:6px;
}

.admin-alert--warn{
	background:var(--amber-soft);
	color:#95601a;
}

/* ---------- 쪽 이동 ---------- */

.admin-pager{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	gap:6px;
	margin-top:24px;
}

.admin-pager__btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:38px;
	height:38px;
	padding:0 10px;
	border-radius:0;
	background:var(--surface);
	color:var(--text-sub);
	font-size:14px;
	font-weight:600;
	box-shadow:var(--shadow-card);
	transition:background-color .15s var(--ease), color .15s var(--ease);
}

.admin-pager__btn:hover{
	background:var(--line-soft);
	color:var(--ink-2);
}

.admin-pager__btn.is-current{
	background:var(--blue);
	color:#fff;
	box-shadow:none;
}

/* ---------- 모달 ---------- */

.admin-modal{
	display:none;
	position:fixed;
	inset:0;
	z-index:60;
	align-items:center;
	justify-content:center;
	padding:24px 16px;
}

.admin-modal.is-open{
	display:flex;
}

.admin-modal__backdrop{
	position:absolute;
	inset:0;
	background:rgba(25,31,40,.45);
}

.admin-modal__panel{
	position:relative;
	width:100%;
	max-width:720px;
	max-height:calc(100vh - 48px);
	display:flex;
	flex-direction:column;
	background:var(--surface);
	border-radius:0;
	box-shadow:var(--shadow-float);
	overflow:hidden;
}

.admin-modal__panel--sm{
	max-width:400px;
}

/* 원문을 담는 모달. 줄이 접히지 않도록 넓게 둔다. */
.admin-modal__panel--lg{
	max-width:920px;
}

.admin-modal__head{
	display:flex;
	align-items:center;
	gap:10px;
	padding:22px 24px 16px;
}

.admin-modal__head h2{
	margin:0;
	font-size:19px;
}

.admin-modal__close{
	margin-left:auto;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:32px;
	height:32px;
	border:0;
	border-radius:0;
	background:transparent;
	color:var(--muted);
	font-size:16px;
	transition:background-color .15s var(--ease), color .15s var(--ease);
}

.admin-modal__close:hover{
	background:var(--line-soft);
	color:var(--ink-2);
}

.admin-modal__body{
	flex:1;
	padding:0 24px 12px;
	overflow-y:auto;
	/*
	 * 세로 스크롤 막대의 자리를 항상 확보한다. 내용이 길어져 막대가 나타나는 순간 본문
	 * 너비가 줄어들어, 서식이 밀리면서 가로 스크롤이 함께 생긴다.
	 */
	scrollbar-gutter:stable;
	font-size:15px;
	line-height:1.6;
	color:var(--text);
}

/*
 * 문단 여백은 요소 전체가 아니라 필요한 영역에만 지정한다. 자식 선택자로 한정해야
 * 서식 안의 설명 문구가 자기 여백을 유지한다.
 */
.admin-modal__body > p{
	margin:0;
	/* 알림 문구는 문장마다 줄을 나누어 표시한다. */
	white-space:pre-line;
}

/* ---------- 모달에 담는 배송 이력 ---------- */

/* 모달 제목 옆에 택배사와 운송장을 함께 표시한다. */
.admin-modal__sub{
	margin-left:8px;
	font-size:13px;
	font-weight:500;
	color:var(--text-sub);
}

.track-steps{
	margin:20px 0 0;
	padding:0 0 0 18px;
	list-style:none;
	/* 단계를 연결하는 세로선. 왼쪽 여백 안에 배치한다. */
	border-left:2px solid var(--line);
}

.track-steps__item{
	position:relative;
	padding:0 0 18px 14px;
}

.track-steps__item:last-child{
	padding-bottom:0;
}

/* 단계를 표시하는 점. 세로선 위에 겹쳐 배치한다. */
.track-steps__item::before{
	position:absolute;
	/* 점의 중심을 단계 이름의 가운데에 맞춘다. */
	top:4px;
	/* 점의 중심을 세로선 위에 정렬한다. 테두리를 포함한 너비의 절반만큼 이동한다. */
	left:-26px;
	width:10px;
	height:10px;
	background:#fff;
	border:2px solid var(--line);
	border-radius:50%;
	content:'';
}

.track-steps__item.is-current::before{
	background:var(--blue);
	border-color:var(--blue);
}

.track-steps__state{
	display:block;
	font-size:14px;
	font-weight:600;
	color:var(--text-sub);
}

.track-steps__item.is-current .track-steps__state{
	color:var(--blue-dark);
}

.track-steps__meta{
	display:block;
	margin-top:3px;
	font-size:13px;
	color:var(--text-sub);
}

.track-steps__empty{
	margin:20px 0 0;
	font-size:14px;
	color:var(--text-sub);
	/* 안내 문구는 문장마다 줄을 나누어 표시한다. */
	white-space:pre-line;
}

/* ---------- 모달에 담는 원문 ---------- */

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

.admin-modal__body > .admin-raw__label:first-child{
	margin-top:4px;
}

.track-raw--wide{
	min-width:0;
	max-height:340px;
	margin:0;
	font-size:13px;
	line-height:1.7;
	/* 원문은 접지 않고 그대로 둔다. 줄이 길면 가로로 움직여 확인한다. */
	white-space:pre;
}

.admin-modal__foot{
	display:flex;
	justify-content:flex-end;
	gap:8px;
	padding:16px 24px 22px;
}

.admin-modal__panel--sm .admin-modal__foot .abtn{
	flex:1;
}

/* ---------- 좁은 화면 ---------- */

@media (max-width:1024px){
	.admin-topbar{
		padding:0 16px;
	}

	.admin-layout{
		flex-direction:column;
	}

	.admin-sidebar{
		position:static;
		width:100%;
		height:auto;
		padding:12px 16px 0;
		overflow-x:auto;
	}

	.admin-nav{
		flex-direction:row;
		gap:6px;
	}

	.admin-nav__item{
		height:40px;
		padding:0 12px;
		white-space:nowrap;
	}

	.admin-content{
		width:100%;
		padding:20px 16px 56px;
	}

	.admin-page-title{
		font-size:22px;
	}

	.input--w-md,
	.input--w-lg{
		width:100%;
	}

	.sheet th,
	.sheet td{
		display:block;
		padding:0;
	}

	.sheet th{
		padding-top:14px;
		line-height:1.5;
	}

	.sheet td{
		padding:10px 0 18px;
	}

	.sheet tbody tr + tr th{
		border-top:1px solid var(--line-soft);
	}

	.sheet tbody tr + tr td{
		border-top:0;
	}
}