/* =========================================
   SECTION: Reset & Base Styles
   ========================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
}

body {
	line-height: var(--lap-lh-normal);
	font-family: var(--lap-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	background-color: var(--lap-surface-0, #F7F9FC);
	color: var(--lap-text-primary, #111111);
	font-weight: var(--lap-fw-regular);
	font-size: var(--lap-text-size2);
}

h1, h2, h3, h4, h5, h6,
p {
	margin: 0;
}

h1 {
	font-size: var(--lap-text-size7);
}

h1[tabindex="-1"]:focus {
	/* FocusOnNavigate의 페이지 안내 포커스는 유지하되 비상호작용 제목의 브라우저 기본 테두리만 숨긴다. */
	outline: none;
}

h2 {
	font-size: var(--lap-text-size6);
}

h3 {
	font-size: var(--lap-text-size5);
}

h4 {
	font-size: var(--lap-text-size4);
}

h5 {
	font-size: var(--lap-text-size3);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	border: none;
	background-color: transparent;
	padding: 0;
	cursor: pointer;
}

@media (hover: none) and (pointer: coarse) {
	a,
	button,
	label,
	summary,
	[role="button"],
	input[type="button"],
	input[type="submit"],
	input[type="checkbox"],
	input[type="radio"] {
		/* 모바일 브라우저 기본 tap highlight가 사각형으로 번쩍이지 않도록 제어한다. */
		-webkit-tap-highlight-color: transparent;
	}
}

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

/* =========================================================
   TEXT / TYPOGRAPHY – Global Classes
   ========================================================= */

/* font-weight */
.lap-fw-r {
	font-weight: var(--lap-fw-regular) !important;
}

.lap-fw-m {
	font-weight: var(--lap-fw-medium) !important;
}

.lap-fw-sb {
	font-weight: var(--lap-fw-semibold) !important;
}

.lap-fw-b {
	font-weight: var(--lap-fw-bold) !important;
}

/* font-size */
.lap-fs-caption {
	font-size: var(--lap-text-size1) !important;
}

.lap-fs-body {
	font-size: var(--lap-text-size2) !important;
}

.lap-fs-body-lg {
	font-size: var(--lap-text-size3) !important;
}

.lap-fs-title {
	font-size: var(--lap-text-size4) !important;
}

.lap-fs-title-lg {
	font-size: var(--lap-text-size5) !important;
}

.lap-fs-heading {
	font-size: var(--lap-text-size6) !important;
}

.lap-fs-heading-lg {
	font-size: var(--lap-text-size7) !important;
}

/* font-color */
.lap-text-main {
	color: var(--lap-text-primary);
}

.lap-text-muted {
	color: var(--lap-text-secondary);
}

.lap-text-tertiary {
	color: var(--lap-text-tertiary);
}

.lap-text-disabled {
	color: var(--lap-text-disabled);
}

.lap-text-inverse {
	color: var(--lap-text-white);
}

/* 폼 필수 항목은 빨간 별표 대신 사이트 공통 Primary `(필수)` 표기로 안내한다. */
.lap-required-mark {
	margin-left: var(--lap-2);
	color: var(--lap-primary-500);
	font-size: var(--lap-text-size1);
	font-style: italic;
	font-weight: var(--lap-fw-regular);
	white-space: nowrap;
}



/* =========================================
   SECTION: UI Styles  prefix: lap-
   ========================================= */
/* 오른쪽: 메인 영역 */
.lap-main-area {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 100vh;
}

/* 본문 컨텐츠 영역 */
.lap-content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 0;
	overflow-y: auto;
	scrollbar-gutter: stable; /* 또는 stable both-edges */
	background: var(--lap-surface-0);
}

@media (max-width: 767.98px) {
	/* 모바일 내부 화면은 중첩 스크롤을 만들지 않고 브라우저 window 스크롤을 사용한다. */
	.lap-content {
		flex: 1 0 auto;
		min-height: auto;
		overflow-y: visible;
		scrollbar-gutter: auto;
	}
}

.cursor-pointer {
	cursor: pointer;
}


/* =========================================
   SECTION: Scroll Styles  prefix: lap-scroll
   ========================================= */
/* 모바일은 브라우저/운영체제 기본 스크롤바를 사용하고 데스크톱에서만 형태를 통일한다. */
@media (min-width: 768px) {
	/* Chrome / Edge / Safari */
	.lap-scroll::-webkit-scrollbar {
		width: var(--lap-2);
		height: var(--lap-2);
	}

	.lap-scroll::-webkit-scrollbar-track {
		background: transparent;
	}

	.lap-scroll::-webkit-scrollbar-thumb {
		background-color: var(--lap-gray-300);
		border-radius: var(--lap-r-lg);
	}

	.lap-scroll::-webkit-scrollbar-thumb:hover {
		background-color: var(--lap-gray-400);
	}

	.lap-scroll::-webkit-scrollbar-button {
		display: none;
		width: 0;
		height: 0;
	}
}

/* =========================================
   SECTION: Components Styles  prefix: lap-
   ========================================= */
/* DashBoard 'panel(card영역)' 높이 고정 컴포넌트 */
.lap-container {
	width: 100%;
	min-width: 0;
}

.lap-panel {
	background: var(--lap-white);
	border: 1px solid var(--lap-gray-200);
	border-radius: var(--lap-r-xl);
}

.lap-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}


.lap-panel-notice-title {
	display: block;
	margin-bottom: var(--lap-2);
	font-weight: var(--lap-fw-bold);
	color: var(--lap-text-secondary);
}

.lap-panel-notice-list {
	display: table;
	width: 100%;
	margin: 0;
	padding: 0;
	border-collapse: separate;
	border-spacing: 0 var(--lap-1);
}

.lap-panel-notice-item {
	display: table-row;
}

.lap-panel-notice-term,
.lap-panel-notice-desc {
	display: table-cell;
	vertical-align: top;
	line-height: var(--lap-lh-normal-plus);
	color: var(--lap-text-secondary);
}

.lap-panel-notice-term {
	width: 1%;
	white-space: nowrap;
	padding-right: var(--lap-1);
}

	.lap-panel-notice-term::before {
		content: "-";
		margin-right: var(--lap-1);
	}

	.lap-panel-notice-term::after {
		content: " :";
	}

.lap-panel-notice-desc {
	min-width: 0;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.lap-title {
	display: flex;
	align-items: center;
	gap: var(--lap-1);
}

.lap-divider {
	margin-top: var(--lap-3);
	margin-bottom: var(--lap-3);
	border-top: 1px solid var(--lap-gray-200);
}

.lap-fixed-card {
	height: 446px;
	display: flex;
	flex-direction: column;
}

.lap-card-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding-right: calc(var(--lap-1));
}

/* 최근 주문/배송, 1:1 문의 내역 panel detail START */
.lap-list-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lap-3);
	padding: var(--lap-2) 0;
}

.lap-list-title {
	display: flex;
	align-items: center;
	gap: var(--lap-3);
	min-width: 0;
}

/* 타이틀(이름, 제목) */
.lap-list-title span:first-child {
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* 최근 주문/배송, 1:1 문의 내역 panel END */

/* DashBoard 'panel(card영역)' 높이 고정 컴포넌트 END*/


/* quick order 컴포넌트 START */

.lap-quick-order {
	background: var(--lap-white);
	border-radius: var(--lap-r-xl);
	padding: var(--lap-6);
}

.lap-header-title {
	display: flex;
	align-items: center;
	gap: var(--lap-2);
	margin-bottom: var(--lap-3);
}

.lap-quick-order__title {
	font-weight: var(--lap-fw-semibold);
	font-size: var(--lap-text-size4);
}

.lap-quick-order__help {
	color: var(--lap-text-tertiary);
}
/* quick order 컴포넌트 END */
/* quick order 테이블 프레임 START */
/*
.lap-table {
	width: 100%;
	background: var(--lap-white);
}

.lap-table-head,
.lap-table-row {
	display: grid;
	align-items: center;
}

.lap-table-head {
	height: var(--lap-12);
	background: var(--lap-gray-200);
	font-weight: var(--lap-fw-semibold);
	text-align: center;
}

.lap-table-row {
	min-height: var(--lap-12);
	border-bottom: 1px solid var(--lap-gray-200);
	color: var(--lap-text-tertiary);
}

	.lap-table-head > div,
	.lap-table-row > div {
		padding: var(--lap-3) var(--lap-4);
	}*/

/* =========================================
   SECTION: Table
   prefix: lap-table-
   ========================================= */

/* 실제 표 */
.lap-table {
	width: 100%;
	min-width: 0;
	background: var(--lap-white);
	border-radius: var(--lap-r-lg);
}

/* 기본 표 헤더/행 */
.lap-table-head,
.lap-table-row {
	display: grid;
	align-items: center;
}

.lap-table-head {
	height: var(--lap-12);
	background: var(--lap-gray-200);
	font-weight: var(--lap-fw-semibold);
	text-align: center;
}

.lap-table-row {
	min-height: var(--lap-12);
	border-bottom: 1px solid var(--lap-gray-200);
	color: var(--lap-text-tertiary);
}

	.lap-table-head > div,
	.lap-table-row > div {
		padding: var(--lap-3) var(--lap-4);
	}

/* wrapper형 가로 스크롤 */
.lap-table-container {
	width: 100%;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	border-radius: var(--lap-r-lg);
	background: var(--lap-white);
}

/* .lap-table 단독 사용 페이지: News, FAQ 등 */
.lap-table:not(.lap-table-container):not(.lap-scroll-container) {
	overflow: hidden;
}

/* .lap-table-container 안에 .lap-table을 넣는 새 구조 대응 */
.lap-table-container > .lap-table {
	border-radius: 0;
}

/* .lap-table과 .lap-table-container를 같은 요소에 같이 쓰는 기존 구조 대응 */
.lap-table.lap-table-container {
	border-radius: var(--lap-r-lg);
}

/* 세로 스크롤 표 대응: 즐겨찾기 등 */
.lap-scroll-container {
	overflow: auto;
	border-radius: var(--lap-r-lg);
	background: var(--lap-white);
}

/* 견적서·거래명세서·세금계산서 등 상거래 문서는 같은 A4 인쇄 여백을 공유한다. */
@page {
	size: A4 portrait;
	margin: 8mm;
}

@media print {
	html,
	body {
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	body * {
		visibility: hidden !important;
	}

	/* visibility만 숨기면 기존 앱 높이가 첫 장을 차지하므로 문서와 그 조상 외에는 인쇄 레이아웃에서 제거한다. */
	body *:not(:has(.lap-business-document-print-area)):not(.lap-business-document-print-area):not(.lap-business-document-print-area *) {
		display: none !important;
	}

	.lap-business-document-print-area,
	.lap-business-document-print-area * {
		visibility: visible !important;
	}

	body *:has(.lap-business-document-print-area) {
		position: static !important;
		width: auto !important;
		height: auto !important;
		min-height: 0 !important;
		max-width: none !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		box-shadow: none !important;
		overflow: visible !important;
		transform: none !important;
	}

	.lap-business-document-print-area {
		position: static !important;
		margin: 0 auto !important;
		transform: none !important;
		background: var(--lap-white) !important;
		break-before: avoid-page !important;
		page-break-before: avoid !important;
	}

	.lap-print-hide {
		display: none !important;
	}
}

	/* 스크롤 컨테이너 안의 표는 바깥이 둥글기를 담당 */
	.lap-scroll-container > .lap-table {
		border-radius: 0;
	}

/* 마지막 행 하단선 정리 */
.lap-table > .lap-table-row:last-child,
.lap-table-body > .lap-table-row:last-child {
	border-bottom: 0;
}


/* quick order 테이블 프레임 END */
/* quick order 페이지네이션 START */
.lap-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--lap-2);
}

.lap-page-btn,
.lap-page-arrow {
	min-width: 32px;
	height: 32px;
	padding: 0 var(--lap-2);
	border: 0;
	background: transparent;
	cursor: pointer;
}

	.lap-page-btn.is-active {
		font-weight: var(--lap-fw-bold);
		text-decoration: underline;
	}
/* quick order 페이지네이션 END*/


/* DocumentIssuance START */

.lap-panel-notice {
	background: var(--lap-gray-200);
	/*	border-radius: var(--lap-r-lg);*/
	border-radius: var(--lap-r-xl);
	padding: var(--lap-5);
}


/* DocumentIssuance END */

/*   AccountEdit START */
/* 세로 구분선 */
.lap-v-divider {
	width: 1px;
	align-self: stretch;
	background-color: var(--lap-gray-200);
}
/*   AccountEdit END */

/*   News START */
.lap-table-hover:hover {
	background: var(--lap-gray-100);
}

/*   News END */


/*VideoCenter START*/

/*  Search */
.lap-search-box {
	background: var(--lap-gray-200);
	padding: var(--lap-4);
	border-radius: var(--lap-r-md);
	/*width: calc(100% - 280px - var(--lap-4));*/
	display: flex;
	justify-content: center;
}

.lap-search-main {
	display: flex;
	align-items: center;
	gap: var(--lap-3);
	width: 70%;
	max-width: 660px;
	min-width: 320px;
}

	.lap-search-main .lap-input {
		flex: 1;
	}

/* ===============================
   Search Summary
   검색 결과 / 선택 항목 / 검색 후 액션
   =============================== */

.lap-search-summary {
	width: 100%;
	min-width: 0;
}

.lap-search-summary-row {
	width: 100%;
	min-width: 0;
	margin-left: 0;
	margin-right: 0;
	align-items: center;
}

	.lap-search-summary-row > [class*="col-"] {
		min-width: 0;
	}

.lap-search-summary-text {
	display: flex;
	align-items: center;
	gap: var(--lap-2);
	min-width: 0;
	color: var(--lap-text-secondary);
	font-size: var(--lap-text-size2);
	line-height: var(--lap-lh-normal);
	white-space: normal;
}

	.lap-search-summary-text strong {
		color: var(--lap-text-primary);
		font-weight: var(--lap-fw-bold);
	}

.lap-search-summary-divider {
	color: var(--lap-gray-300);
}

.lap-search-summary-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--lap-2);
	min-width: 0;
}

/* Category */

.lap-layout-left {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: var(--lap-4);
}

.lap-category-wrap {
	position: sticky;
	top: var(--lap-3);
	align-self: start;
}

.lap-category-card {
	height: fit-content;
}

.lap-category {
	list-style: none;
	padding: 0;
	margin: 0;
}

	.lap-category li {
		padding: var(--lap-2) 0;
		cursor: pointer;
		color: var(--lap-text-tertiary);
		transition: color .15s;
	}

		.lap-category li:hover {
			color: var(--lap-text-main);
		}

	.lap-category .lap-category-title {
		font-weight: var(--lap-fw-semibold);
		color: var(--lap-text-main);
	}


/* ===============================
   Mobile
   =============================== */

/*@media (max-width: 992px) {*/

/*	.lap-layout-left {
		grid-template-columns: 1fr;
	}

	.lap-category-card {
		display: none;
	}*/

	/*.lap-search-box {
		width: 100%;
	}

	.lap-search-main {
		max-width: none;
		width: 100%;
	}
}*/

/*VideoCenter END */


.lap-icon {
	display: inline-block;
	background-color: currentColor;
	-webkit-mask: var(--lap-icon-src) no-repeat 50% 50% / contain;
	mask: var(--lap-icon-src) no-repeat 50% 50% / contain;
}

.lap-icon-16 {
	width: var(--lap-4);
	height: var(--lap-4);
}

.lap-icon-20 {
	width: var(--lap-5);
	height: var(--lap-5);
}

.lap-icon-24 {
	width: var(--lap-6);
	height: var(--lap-6);
}

/* Badges */
.lap-badge {
	width: 80px;
	min-width: 80px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--lap-1) var(--lap-2);
	border-radius: var(--lap-r-max);
	border: 1px solid;
	white-space: nowrap;
}

.lap-badge-success {
	border-color: var(--lap-success-300);
	background: var(--lap-success-50);
	color: var(--lap-success-700);
}

.lap-badge-warning {
	border-color: var(--lap-warning-300);
	background: var(--lap-warning-50);
	color: var(--lap-warning-700);
}

.lap-badge-danger {
	border-color: var(--lap-danger-300);
	background: var(--lap-danger-50);
	color: var(--lap-danger-700);
}

.lap-badge-info {
	border-color: var(--lap-information-300);
	background: var(--lap-information-50);
	color: var(--lap-information-700);
}
/* Badges End */

/* lap table layout component */

.lap-cols {
	display: grid;
	grid-template-columns: minmax(120px, 1fr) /* 주문일자 */
	minmax(120px, 1fr) /* 주문번호 */
	minmax(120px, 1fr) /* 금액 */
	minmax(120px, auto) minmax(120px, auto) minmax(120px, auto) minmax(120px, auto);
	align-items: center;
	min-width: 900px;
}

	/* 버튼 가운데 정렬 */
	.lap-cols > div:nth-child(n+4) {
		display: flex;
		justify-content: center;
	}

/* 링크 */
.lap-link {
	color: var(--lap-color-primary);
	text-decoration: underline;
}

.lap-block {
	display: block;
}


/*.lap-table-container {
	width: 100%;
	overflow-x: auto;
}*/

.lap-white-card {
	background: var(--lap-white);
	border: 1px solid var(--lap-gray-200);
	border-radius: var(--lap-r-lg);
	padding: var(--lap-4);
	margin-bottom: var(--lap-4);
	display: flex;
	flex-direction: column;
	gap: var(--lap-3);
}

.lap-white-card-row {
	display: flex;
	justify-content: space-between;
}

.lap-number-link {
	color: var(--lap-color-primary);
	text-decoration: underline;
}

.lap-table-body {
	height: 818px;
}


.lap-table-body-scroll {
	flex: 1 1 auto;
	overflow-y: auto;
}

/* Alert Layout START */
.alert-layout {
	height: 48px;
	display: flex;
	align-items: center;
	padding: 0 var(--lap-4);
	background: var(--lap-information-50);
	border-radius: var(--lap-r-md);
}

/* Alert Layout END */

/* =========================================
   SECTION: Utilities Styles   prefix: lap-
   ========================================= */

/*Display Mobile only */
.lap-only-mobile-block {
	display: none !important;
}

.lap-only-mobile-flex {
	display: none !important;
}

.lap-only-mobile-inline-flex {
	display: none !important;
}

/*Display Desktop only (md 이상) */
.lap-only-desktop-block {
	display: block !important;
}

.lap-only-desktop-flex {
	display: flex !important;
}

.lap-only-desktop-inline-flex {
	display: inline-flex !important;
}

@media (max-width: 767.98px) {
	/*Display Mobile only */
	.lap-only-mobile-block {
		display: block !important;
	}

	.lap-only-mobile-flex {
		display: flex !important;
	}

	.lap-only-mobile-inline-flex {
		display: inline-flex !important;
	}

	/*Display Desktop only */
	.lap-only-desktop-block {
		display: none !important;
	}

	.lap-only-desktop-flex {
		display: none !important;
	}

	.lap-only-desktop-inline-flex {
		display: none !important;
	}
}
/* =========================================
   Guide Card
   ========================================= */

.lap-guide-section {
	width: 100%;
	min-width: 0;
}

.lap-guide-grid {
	align-items: stretch;
	width: 100%;
	min-width: 0;
	margin-left: 0;
	margin-right: 0;
}

.lap-guide-col {
	display: flex;
	min-width: 0;
}

.lap-guide-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	min-height: calc(var(--lap-1) * 47);
	overflow: hidden;
	background: linear-gradient(135deg, var(--lap-primary-50), var(--lap-white) 48%, var(--lap-gray-100));
	border: 1px solid var(--lap-gray-200);
	border-radius: var(--lap-r-xl);
	box-shadow: var(--lap-shadow-1);
	text-decoration: none;
	transition: transform var(--lap-motion-fast) ease, box-shadow var(--lap-motion-fast) ease, border-color var(--lap-motion-fast) ease;
	appearance: none;
	text-align: left;
	cursor: pointer;
}

	.lap-guide-card:hover {
		transform: translateY(calc(var(--lap-1) * -0.5));
		border-color: var(--lap-primary-200);
		box-shadow: var(--lap-shadow-2);
		text-decoration: none;
	}

	.lap-guide-card:focus-visible {
		border-color: var(--lap-primary-400);
		outline: none;
	}

.lap-guide-card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
	padding: var(--lap-5);
}

.lap-guide-card-eyebrow {
	margin-bottom: var(--lap-2);
	color: var(--lap-color-primary);
	font-size: var(--lap-text-size1);
	font-weight: var(--lap-fw-bold);
	line-height: var(--lap-lh-normal);
}

.lap-guide-card-title {
	display: -webkit-box;
	overflow: hidden;
	color: var(--lap-text-primary);
	font-size: var(--lap-text-size3);
	font-weight: var(--lap-fw-bold);
	line-height: var(--lap-lh-normal);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.lap-guide-card-desc {
	display: -webkit-box;
	overflow: hidden;
	margin-top: var(--lap-2);
	color: var(--lap-text-secondary);
	font-size: var(--lap-text-size2);
	line-height: var(--lap-lh-normal);
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.lap-guide-card-link {
	margin-top: auto;
	padding-top: var(--lap-3);
	color: var(--lap-color-primary);
	font-size: var(--lap-text-size2);
	font-weight: var(--lap-fw-bold);
}

/* =========================================================
   Breadcrumb
   prefix: lap-breadcrumb
   ========================================================= */

.lap-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--lap-2);
	color: var(--lap-text-tertiary);
	font-size: var(--lap-text-size2);
}

	.lap-breadcrumb span {
		color: var(--lap-text-tertiary);
	}

	.lap-breadcrumb button,
	.lap-breadcrumb a {
		color: var(--lap-text-tertiary);
		font-size: inherit;
		font-weight: var(--lap-fw-regular);
		line-height: inherit;
		text-decoration: none;
	}

	.lap-breadcrumb button {
		border: 0;
		background: transparent;
		padding: 0;
		cursor: pointer;
	}

		.lap-breadcrumb button:hover,
		.lap-breadcrumb a:hover {
			color: var(--lap-color-primary);
		}

	.lap-breadcrumb strong {
		color: var(--lap-text-main);
		font-weight: var(--lap-fw-semibold);
	}


/* 회전 유틸 */
.lap-rotate-180 {
	transform: rotate(180deg);
}

/* all */
.lap-m-0 {
	margin: var(--lap-0);
}

.lap-m-1 {
	margin: var(--lap-1);
}

.lap-m-2 {
	margin: var(--lap-2);
}

.lap-m-3 {
	margin: var(--lap-3);
}

.lap-m-4 {
	margin: var(--lap-4);
}

.lap-m-5 {
	margin: var(--lap-5);
}

.lap-m-6 {
	margin: var(--lap-6);
}

.lap-m-7 {
	margin: var(--lap-7);
}

.lap-m-8 {
	margin: var(--lap-8);
}

.lap-m-9 {
	margin: var(--lap-9);
}

.lap-m-10 {
	margin: var(--lap-10);
}

.lap-m-11 {
	margin: var(--lap-11);
}

.lap-m-12 {
	margin: var(--lap-12);
}

/* top */
.lap-mt-0 {
	margin-top: var(--lap-0);
}

.lap-mt-1 {
	margin-top: var(--lap-1);
}

.lap-mt-2 {
	margin-top: var(--lap-2);
}

.lap-mt-3 {
	margin-top: var(--lap-3);
}

.lap-mt-4 {
	margin-top: var(--lap-4);
}

.lap-mt-5 {
	margin-top: var(--lap-5);
}

.lap-mt-6 {
	margin-top: var(--lap-6);
}

.lap-mt-7 {
	margin-top: var(--lap-7);
}

.lap-mt-8 {
	margin-top: var(--lap-8);
}

.lap-mt-9 {
	margin-top: var(--lap-9);
}

.lap-mt-10 {
	margin-top: var(--lap-10);
}

.lap-mt-11 {
	margin-top: var(--lap-11);
}

.lap-mt-12 {
	margin-top: var(--lap-12);
}

/* bottom */
.lap-mb-0 {
	margin-bottom: var(--lap-0);
}

.lap-mb-1 {
	margin-bottom: var(--lap-1);
}

.lap-mb-2 {
	margin-bottom: var(--lap-2);
}

.lap-mb-3 {
	margin-bottom: var(--lap-3);
}

.lap-mb-4 {
	margin-bottom: var(--lap-4);
}

.lap-mb-5 {
	margin-bottom: var(--lap-5);
}

.lap-mb-6 {
	margin-bottom: var(--lap-6);
}

.lap-mb-7 {
	margin-bottom: var(--lap-7);
}

.lap-mb-8 {
	margin-bottom: var(--lap-8);
}

.lap-mb-9 {
	margin-bottom: var(--lap-9);
}

.lap-mb-10 {
	margin-bottom: var(--lap-10);
}

.lap-mb-11 {
	margin-bottom: var(--lap-11);
}

.lap-mb-12 {
	margin-bottom: var(--lap-12);
}

/* start (left) */
.lap-ms-0 {
	margin-left: var(--lap-0);
}

.lap-ms-1 {
	margin-left: var(--lap-1);
}

.lap-ms-2 {
	margin-left: var(--lap-2);
}

.lap-ms-3 {
	margin-left: var(--lap-3);
}

.lap-ms-4 {
	margin-left: var(--lap-4);
}

.lap-ms-5 {
	margin-left: var(--lap-5);
}

.lap-ms-6 {
	margin-left: var(--lap-6);
}

.lap-ms-7 {
	margin-left: var(--lap-7);
}

.lap-ms-8 {
	margin-left: var(--lap-8);
}

.lap-ms-9 {
	margin-left: var(--lap-9);
}

.lap-ms-10 {
	margin-left: var(--lap-10);
}

.lap-ms-11 {
	margin-left: var(--lap-11);
}

.lap-ms-12 {
	margin-left: var(--lap-12);
}

/* end (right) */
.lap-me-0 {
	margin-right: var(--lap-0);
}

.lap-me-1 {
	margin-right: var(--lap-1);
}

.lap-me-2 {
	margin-right: var(--lap-2);
}

.lap-me-3 {
	margin-right: var(--lap-3);
}

.lap-me-4 {
	margin-right: var(--lap-4);
}

.lap-me-5 {
	margin-right: var(--lap-5);
}

.lap-me-6 {
	margin-right: var(--lap-6);
}

.lap-me-7 {
	margin-right: var(--lap-7);
}

.lap-me-8 {
	margin-right: var(--lap-8);
}

.lap-me-9 {
	margin-right: var(--lap-9);
}

.lap-me-10 {
	margin-right: var(--lap-10);
}

.lap-me-11 {
	margin-right: var(--lap-11);
}

.lap-me-12 {
	margin-right: var(--lap-12);
}

/* x-axis */
.lap-mx-0 {
	margin-left: var(--lap-0);
	margin-right: var(--lap-0);
}

.lap-mx-1 {
	margin-left: var(--lap-1);
	margin-right: var(--lap-1);
}

.lap-mx-2 {
	margin-left: var(--lap-2);
	margin-right: var(--lap-2);
}

.lap-mx-3 {
	margin-left: var(--lap-3);
	margin-right: var(--lap-3);
}

.lap-mx-4 {
	margin-left: var(--lap-4);
	margin-right: var(--lap-4);
}

.lap-mx-5 {
	margin-left: var(--lap-5);
	margin-right: var(--lap-5);
}

.lap-mx-6 {
	margin-left: var(--lap-6);
	margin-right: var(--lap-6);
}

.lap-mx-7 {
	margin-left: var(--lap-7);
	margin-right: var(--lap-7);
}

.lap-mx-8 {
	margin-left: var(--lap-8);
	margin-right: var(--lap-8);
}

.lap-mx-9 {
	margin-left: var(--lap-9);
	margin-right: var(--lap-9);
}

.lap-mx-10 {
	margin-left: var(--lap-10);
	margin-right: var(--lap-10);
}

.lap-mx-11 {
	margin-left: var(--lap-11);
	margin-right: var(--lap-11);
}

.lap-mx-12 {
	margin-left: var(--lap-12);
	margin-right: var(--lap-12);
}

/* y-axis */
.lap-my-0 {
	margin-top: var(--lap-0);
	margin-bottom: var(--lap-0);
}

.lap-my-1 {
	margin-top: var(--lap-1);
	margin-bottom: var(--lap-1);
}

.lap-my-2 {
	margin-top: var(--lap-2);
	margin-bottom: var(--lap-2);
}

.lap-my-3 {
	margin-top: var(--lap-3);
	margin-bottom: var(--lap-3);
}

.lap-my-4 {
	margin-top: var(--lap-4);
	margin-bottom: var(--lap-4);
}

.lap-my-5 {
	margin-top: var(--lap-5);
	margin-bottom: var(--lap-5);
}

.lap-my-6 {
	margin-top: var(--lap-6);
	margin-bottom: var(--lap-6);
}

.lap-my-7 {
	margin-top: var(--lap-7);
	margin-bottom: var(--lap-7);
}

.lap-my-8 {
	margin-top: var(--lap-8);
	margin-bottom: var(--lap-8);
}

.lap-my-9 {
	margin-top: var(--lap-9);
	margin-bottom: var(--lap-9);
}

.lap-my-10 {
	margin-top: var(--lap-10);
	margin-bottom: var(--lap-10);
}

.lap-my-11 {
	margin-top: var(--lap-11);
	margin-bottom: var(--lap-11);
}

.lap-my-12 {
	margin-top: var(--lap-12);
	margin-bottom: var(--lap-12);
}

/* p- : all sides */
.lap-p-0 {
	padding: var(--lap-0);
}

.lap-p-1 {
	padding: var(--lap-1);
}

.lap-p-2 {
	padding: var(--lap-2);
}

.lap-p-3 {
	padding: var(--lap-3);
}

.lap-p-4 {
	padding: var(--lap-4);
}

.lap-p-5 {
	padding: var(--lap-5);
}

.lap-p-6 {
	padding: var(--lap-6);
}

.lap-p-7 {
	padding: var(--lap-7);
}

.lap-p-8 {
	padding: var(--lap-8);
}

.lap-p-9 {
	padding: var(--lap-9);
}

.lap-p-10 {
	padding: var(--lap-10);
}

.lap-p-11 {
	padding: var(--lap-11);
}

.lap-p-12 {
	padding: var(--lap-12);
}

/* pt- : top */
.lap-pt-0 {
	padding-top: var(--lap-0);
}

.lap-pt-1 {
	padding-top: var(--lap-1);
}

.lap-pt-2 {
	padding-top: var(--lap-2);
}

.lap-pt-3 {
	padding-top: var(--lap-3);
}

.lap-pt-4 {
	padding-top: var(--lap-4);
}

.lap-pt-5 {
	padding-top: var(--lap-5);
}

.lap-pt-6 {
	padding-top: var(--lap-6);
}

.lap-pt-7 {
	padding-top: var(--lap-7);
}

.lap-pt-8 {
	padding-top: var(--lap-8);
}

.lap-pt-9 {
	padding-top: var(--lap-9);
}

.lap-pt-10 {
	padding-top: var(--lap-10);
}

.lap-pt-11 {
	padding-top: var(--lap-11);
}

.lap-pt-12 {
	padding-top: var(--lap-12);
}

/* pb- : bottom */
.lap-pb-0 {
	padding-bottom: var(--lap-0);
}

.lap-pb-1 {
	padding-bottom: var(--lap-1);
}

.lap-pb-2 {
	padding-bottom: var(--lap-2);
}

.lap-pb-3 {
	padding-bottom: var(--lap-3);
}

.lap-pb-4 {
	padding-bottom: var(--lap-4);
}

.lap-pb-5 {
	padding-bottom: var(--lap-5);
}

.lap-pb-6 {
	padding-bottom: var(--lap-6);
}

.lap-pb-7 {
	padding-bottom: var(--lap-7);
}

.lap-pb-8 {
	padding-bottom: var(--lap-8);
}

.lap-pb-9 {
	padding-bottom: var(--lap-9);
}

.lap-pb-10 {
	padding-bottom: var(--lap-10);
}

.lap-pb-11 {
	padding-bottom: var(--lap-11);
}

.lap-pb-12 {
	padding-bottom: var(--lap-12);
}

/* ps- : start (left) */
.lap-ps-0 {
	padding-left: var(--lap-0);
}

.lap-ps-1 {
	padding-left: var(--lap-1);
}

.lap-ps-2 {
	padding-left: var(--lap-2);
}

.lap-ps-3 {
	padding-left: var(--lap-3);
}

.lap-ps-4 {
	padding-left: var(--lap-4);
}

.lap-ps-5 {
	padding-left: var(--lap-5);
}

.lap-ps-6 {
	padding-left: var(--lap-6);
}

.lap-ps-7 {
	padding-left: var(--lap-7);
}

.lap-ps-8 {
	padding-left: var(--lap-8);
}

.lap-ps-9 {
	padding-left: var(--lap-9);
}

.lap-ps-10 {
	padding-left: var(--lap-10);
}

.lap-ps-11 {
	padding-left: var(--lap-11);
}

.lap-ps-12 {
	padding-left: var(--lap-12);
}

/* pe- : end (right) */
.lap-pe-0 {
	padding-right: var(--lap-0);
}

.lap-pe-1 {
	padding-right: var(--lap-1);
}

.lap-pe-2 {
	padding-right: var(--lap-2);
}

.lap-pe-3 {
	padding-right: var(--lap-3);
}

.lap-pe-4 {
	padding-right: var(--lap-4);
}

.lap-pe-5 {
	padding-right: var(--lap-5);
}

.lap-pe-6 {
	padding-right: var(--lap-6);
}

.lap-pe-7 {
	padding-right: var(--lap-7);
}

.lap-pe-8 {
	padding-right: var(--lap-8);
}

.lap-pe-9 {
	padding-right: var(--lap-9);
}

.lap-pe-10 {
	padding-right: var(--lap-10);
}

.lap-pe-11 {
	padding-right: var(--lap-11);
}

.lap-pe-12 {
	padding-right: var(--lap-12);
}

.lap-px-0 {
	padding-left: var(--lap-0);
	padding-right: var(--lap-0);
}

.lap-px-1 {
	padding-left: var(--lap-1);
	padding-right: var(--lap-1);
}

.lap-px-2 {
	padding-left: var(--lap-2);
	padding-right: var(--lap-2);
}

.lap-px-3 {
	padding-left: var(--lap-3);
	padding-right: var(--lap-3);
}

.lap-px-4 {
	padding-left: var(--lap-4);
	padding-right: var(--lap-4);
}

.lap-px-5 {
	padding-left: var(--lap-5);
	padding-right: var(--lap-5);
}

.lap-px-6 {
	padding-left: var(--lap-6);
	padding-right: var(--lap-6);
}

.lap-px-7 {
	padding-left: var(--lap-7);
	padding-right: var(--lap-7);
}

.lap-px-8 {
	padding-left: var(--lap-8);
	padding-right: var(--lap-8);
}

.lap-px-9 {
	padding-left: var(--lap-9);
	padding-right: var(--lap-9);
}

.lap-px-10 {
	padding-left: var(--lap-10);
	padding-right: var(--lap-10);
}

.lap-px-11 {
	padding-left: var(--lap-11);
	padding-right: var(--lap-11);
}

.lap-px-12 {
	padding-left: var(--lap-12);
	padding-right: var(--lap-12);
}

/* py- : top + bottom */
.lap-py-0 {
	padding-top: var(--lap-0);
	padding-bottom: var(--lap-0);
}

.lap-py-1 {
	padding-top: var(--lap-1);
	padding-bottom: var(--lap-1);
}

.lap-py-2 {
	padding-top: var(--lap-2);
	padding-bottom: var(--lap-2);
}

.lap-py-3 {
	padding-top: var(--lap-3);
	padding-bottom: var(--lap-3);
}

.lap-py-4 {
	padding-top: var(--lap-4);
	padding-bottom: var(--lap-4);
}

.lap-py-5 {
	padding-top: var(--lap-5);
	padding-bottom: var(--lap-5);
}

.lap-py-6 {
	padding-top: var(--lap-6);
	padding-bottom: var(--lap-6);
}

.lap-py-7 {
	padding-top: var(--lap-7);
	padding-bottom: var(--lap-7);
}

.lap-py-8 {
	padding-top: var(--lap-8);
	padding-bottom: var(--lap-8);
}

.lap-py-9 {
	padding-top: var(--lap-9);
	padding-bottom: var(--lap-9);
}

.lap-py-10 {
	padding-top: var(--lap-10);
	padding-bottom: var(--lap-10);
}

.lap-py-11 {
	padding-top: var(--lap-11);
	padding-bottom: var(--lap-11);
}

.lap-py-12 {
	padding-top: var(--lap-12);
	padding-bottom: var(--lap-12);
}

/* gap */

.lap-row-g-4 {
	--bs-gutter-x: var(--lap-4);
	--bs-gutter-y: var(--lap-4);
}

.lap-g-0 {
	gap: var(--lap-0);
}

.lap-g-1 {
	gap: var(--lap-1);
}

.lap-g-2 {
	gap: var(--lap-2);
}

.lap-g-3 {
	gap: var(--lap-3);
}

.lap-g-4 {
	gap: var(--lap-4);
}

.lap-g-5 {
	gap: var(--lap-5);
}

.lap-g-6 {
	gap: var(--lap-6);
}

.lap-g-7 {
	gap: var(--lap-7);
}

.lap-g-8 {
	gap: var(--lap-8);
}

.lap-g-9 {
	gap: var(--lap-9);
}

.lap-g-10 {
	gap: var(--lap-10);
}

.lap-g-11 {
	gap: var(--lap-11);
}

.lap-g-12 {
	gap: var(--lap-12);
}

.lap-gx-0 {
	column-gap: var(--lap-0);
}

.lap-gx-1 {
	column-gap: var(--lap-1);
}

.lap-gx-2 {
	column-gap: var(--lap-2);
}

.lap-gx-3 {
	column-gap: var(--lap-3);
}

.lap-gx-4 {
	column-gap: var(--lap-4);
}

.lap-gx-5 {
	column-gap: var(--lap-5);
}

.lap-gx-6 {
	column-gap: var(--lap-6);
}

.lap-gx-7 {
	column-gap: var(--lap-7);
}

.lap-gx-8 {
	column-gap: var(--lap-8);
}

.lap-gx-9 {
	column-gap: var(--lap-9);
}

.lap-gx-10 {
	column-gap: var(--lap-10);
}

.lap-gx-11 {
	column-gap: var(--lap-11);
}

.lap-gx-12 {
	column-gap: var(--lap-12);
}

/* row gap (y-axis) */
.lap-gy-0 {
	row-gap: var(--lap-0);
}

.lap-gy-1 {
	row-gap: var(--lap-1);
}

.lap-gy-2 {
	row-gap: var(--lap-2);
}

.lap-gy-3 {
	row-gap: var(--lap-3);
}

.lap-gy-4 {
	row-gap: var(--lap-4);
}

.lap-gy-5 {
	row-gap: var(--lap-5);
}

.lap-gy-6 {
	row-gap: var(--lap-6);
}

.lap-gy-7 {
	row-gap: var(--lap-7);
}

.lap-gy-8 {
	row-gap: var(--lap-8);
}

.lap-gy-9 {
	row-gap: var(--lap-9);
}

.lap-gy-10 {
	row-gap: var(--lap-10);
}

.lap-gy-11 {
	row-gap: var(--lap-11);
}

.lap-gy-12 {
	row-gap: var(--lap-12);
}