html,
body {
  font-family: 'SUIT', sans-serif;
  padding: 0;
  margin: 0;
  color: #222040;
  background-color: var(--black-2);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
}

p {
  margin: 0;
}

ul,
li {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0;
}

/* 컬러 */
:root {
  --black-100: #222040;
  --black-80: #4e4d66;
  --black-60: #7a798c;
  --black-40: #a6a6b2;
  --black-20: #d2d2d8;
  --black-10: #e9e9ec;
  --black-5: #f4f4f5;
  --black-2: #fafafb;
  --white: #fff;
  --primary-120: #00b951;
  --primary-100: #00d35c;
  --primary-80: #33dc7d;
  --primary-60: #66e59e;
  --primary-40: #99eebe;
  --primary-20: #ccf6de;
  --primary-10: #e5faee;
  --primary-5: #f2fdf7;
  --accent-100: #0078ff;
  --accent-80: #3393ff;
  --accent-60: #66aeff;
  --accent-40: #99c9ff;
  --accent-20: #cce4ff;
  --accent-10: #e6f2ff;
  --accent-5: #f2f8ff;
  --secondary-100: #e03b00;
  --secondary-80: #e66233;
  --secondary-60: #ec8966;
  --secondary-40: #f3b199;
  --secondary-20: #f9d8cc;
  --secondary-10: #fcece6;
  --secondary-5: #fef5f2;
  --warning: #ffc107;
  --error: #da0000;
}

.primary-120 {
  color: var(--primary-120);
}

.primary-100 {
  color: var(--primary-100);
}

.primary-80 {
  color: var(--primary-80);
}

.primary-60 {
  color: var(--primary-60);
}

.primary-40 {
  color: var(--primary-40);
}

.primary-20 {
  color: var(--primary-20);
}

.primary-10 {
  color: var(--primary-10);
}

.primary-5 {
  color: var(--primary-5);
}

.black-100 {
  color: var(--black-100);
}

.black-80 {
  color: var(--black-80);
}

.black-60 {
  color: var(--black-60);
}

.black-40 {
  color: var(--black-40);
}

.black-20 {
  color: var(--black-20);
}

.black-10 {
  color: var(--black-10);
}

.black-5 {
  color: var(--black-5);
}

.black-2 {
  color: var(--black-2);
}

.accent-100 {
  color: var(--accent-100);
}

.accent-80 {
  color: var(--accent-80);
}

.accent-60 {
  color: var(--accent-60);
}

.accent-40 {
  color: var(--accent-40);
}

.accent-20 {
  color: var(--accent-20);
}

.accent-10 {
  color: var(--accent-10);
}

.accent-5 {
  color: var(--accent-5);
}

.secondary-100 {
  color: var(--secondary-100);
}

.secondary-80 {
  color: var(--secondary-80);
}

.secondary-60 {
  color: var(--secondary-60);
}

.secondary-40 {
  color: var(--secondary-40);
}

.secondary-20 {
  color: var(--secondary-20);
}

.secondary-10 {
  color: var(--secondary-10);
}

.secondary-5 {
  color: var(--secondary-5);
}

.color-warning {
  color: var(--warning);
}

.color-error {
  color: var(--error);
}

.color-white {
  color: var(--white);
}

/* 타이포그래피 */
h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

h2 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

h3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

h4 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

h5 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

.body-1 {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.body-2 {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.43;
}

.subtitle-1 {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.43;
}

.subtitle-2 {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.caption-text {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}

/* 푸터 */
.footer {
  padding: 32px 16px 72px 16px;
  background-color: var(--black-5);
}

.footer-terms a {
  text-decoration: none;
  margin-right: 6px;
  color: var(--black-40);
}

.footer-terms .privacy {
  color: var(--black-60);
  font-weight: 600;
}

/* 컨테이너 */
.container-fluid {
  padding: 0 16px;
}

.content-wrap {
  padding: 24px 36px;
  width: 1440px;
}

.container-600 {
  max-width: 600px;
  min-height: 100vh;
  margin: 0 auto;
  background-color: var(--white);
}

.content-wrap-600 {
  padding: 0 16px;
  margin: 32px 0 0 0;
}

/* 프론트 탑앱바 */
.top-nav {
  background-color: var(--white);
  padding: 16px;
  max-width: 600px;
  position: sticky;
  top: 0;
  z-index: 99;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-nav-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
}

.nav-icon {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.top-nav span {
  display: flex;
}

/* 프론트 바텀앱바 */
.bottom-nav {
  max-width: 600px;
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: var(--white);
  position: fixed;
  bottom: 0;
  padding: 8px 0;
  border-radius: 16px 16px 0 0;
  border-top: 1px solid var(--black-5);
}

.bottom-nav-item {
  width: 25%;
  text-align: center;
  font-size: 12px;
  color: var(--black-40);
  text-decoration: none;
}

.bottom-nav-item.active {
  font-weight: 600;
  color: var(--black-100);
}

.bottom-nav-item svg path {
  fill: var(--black-40);
}

.bottom-nav-item.active svg path {
  fill: var(--black-100);
}

.bottom-nav-item div {
  margin-top: 4px;
}

/* 프론트 Y스크롤 컨테이너 */
.scroll-container {
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  white-space: nowrap;
  user-select: none;
  cursor: grab;
  scroll-snap-type: x mandatory;
}

.scroll-container::-webkit-scrollbar {
  display: none;
}

/* width 값 */
.w-5 {
  width: 5%;
}

.w-10 {
  width: 10%;
}

.w-15 {
  width: 15%;
}

.w-20 {
  width: 20%;
}

.w-25 {
  width: 25%;
}

.w-30 {
  width: 30%;
}

.w-35 {
  width: 35%;
}

.w-40 {
  width: 40%;
}

.w-45 {
  width: 45%;
}

.w-50 {
  width: 50%;
}

.w-55 {
  width: 55%;
}

.w-60 {
  width: 60%;
}

.w-65 {
  width: 65%;
}

.w-70 {
  width: 70%;
}

.w-75 {
  width: 75%;
}

.w-80 {
  width: 80%;
}

.w-85 {
  width: 85%;
}

.w-90 {
  width: 90%;
}

.w-95 {
  width: 95%;
}

.w-100 {
  width: 100%;
}

/* 검색폼 및 테이블 */
.search-form {
  padding: 24px;
  background-color: var(--white);
  border: 1px solid var(--black-5);
  border-radius: 24px;
  margin: 24px 0;
}

.search-section {
  padding: 24px 0;
  border-bottom: 1px solid var(--black-2);
}

.search-section:first-child {
  padding-top: 0;
}

.search-section:nth-last-child(2) {
  padding-bottom: 0;
  border-bottom: none;
}

.page-title {
  color: var(--black-80);
}

.search-results {
  padding: 24px;
  background-color: var(--white);
  border: 1px solid var(--black-5);
  border-radius: 24px;
}

.results-count {
  color: var(--primary-100);
}

.table {
  border-color: var(--black-5);
  --bs-table-hover-bg: var(--accent-5);
  margin: 24px 0;
}

.table > thead:not(caption) > * > * {
  background-color: var(--black-2);
  border-top: 1px solid var(--black-5);
  font-size: 14px;
  color: var(--black-80);
  padding: 16px;
}

.table > tbody:not(caption) > * > * {
  border-top: 1px solid var(--black-5);
  font-size: 14px;
  padding: 16px;
}

.table > tbody {
  vertical-align: middle;
}

.table > tbody:not(caption) > * > .table-empty {
  color: var(--black-20);
  --bs-table-hover-bg: none;
  padding: 24px 16px;
}

.table > tbody:not(caption) > * > .t-head {
  color: var(--black-80);
  background-color: var(--black-2);
  font-weight: 700;
  width: 30%;
  vertical-align: top;
}

.table > tbody:not(caption) > * > .t-body {
  vertical-align: top;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
}

.table>tbody:not(caption)>*>.t-head-col {
  color: var(--black-80);
  background-color: var(--black-2);
  font-weight: 700;
  width: 20%;
  vertical-align: top;
}

.table>tbody:not(caption)>*>.t-body-col {
  vertical-align: top;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
  width: 30%;
}

.table-bordered > thead:not(caption) > * > * {
  background-color: var(--black-2);
  border-top: 1px solid #e9ecef;
}

.text-over {
  /*인라인 태그에 사용시 display:block; 사용*/
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-toggle {
  cursor: pointer;
}

.dropdown-menu {
  --bs-dropdown-min-width: 0;
  --bs-dropdown-item-padding-y: 8px;
  --bs-dropdown-link-color: var(--black-100);
  --bs-dropdown-link-hover-color: var(--black-100);
  --bs-dropdown-link-hover-bg: var(--black-2);
  --bs-dropdown-link-active-color: var(--black-100);
  --bs-dropdown-link-active-bg: var(--black-5);
  --bs-dropdown-border-color: var(--black-10);
}

.dropdown-item {
  cursor: pointer;
}

/* 버튼 */

.btn {
  --bs-btn-padding-y: 12px;
  --bs-btn-padding-x: 16px;
  --bs-btn-font-size: 14px;
  --bs-btn-border-radius: 12px;
  --bs-btn-font-weight: 700;
  --bs-btn-line-height: 1.43;
  margin: 0;
}

.btn-lg {
  --bs-btn-padding-y: 16px;
  --bs-btn-padding-x: 24px;
  --bs-btn-font-size: 16px;
  --bs-btn-border-radius: 16px;
  --bs-btn-font-weight: 700;
  --bs-btn-line-height: 1.5;
}

.btn-sm {
  --bs-btn-padding-y: 8px;
  --bs-btn-padding-x: 12px;
  --bs-btn-font-size: 14px;
  --bs-btn-border-radius: 18px;
  --bs-btn-font-weight: 700;
  --bs-btn-line-height: 1.43;
}

.btn-primary {
  --bs-btn-color: var(--white);
  --bs-btn-bg: var(--primary-100);
  --bs-btn-border-color: none;
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--primary-80);
  --bs-btn-hover-border-color: none;
  --bs-btn-focus-shadow-rgb: none;
  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--primary-120);
  --bs-btn-active-border-color: none;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: var(--white);
  --bs-btn-disabled-bg: var(--primary-40);
  --bs-btn-disabled-border-color: none;
}

.btn-secondary {
  --bs-btn-color: var(--black-80);
  --bs-btn-bg: var(--black-5);
  --bs-btn-border-color: none;
  --bs-btn-hover-color: var(--black-40);
  --bs-btn-hover-bg: var(--black-5);
  --bs-btn-hover-border-color: none;
  --bs-btn-focus-shadow-rgb: none;
  --bs-btn-active-color: var(--black-40);
  --bs-btn-active-bg: var(--black-10);
  --bs-btn-active-border-color: none;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: var(--black-40);
  --bs-btn-disabled-bg: var(--black-5);
  --bs-btn-disabled-border-color: none;
}

.btn-outline-primary {
  --bs-btn-color: var(--primary-100);
  --bs-btn-border-color: var(--primary-100);
  --bs-btn-hover-color: var(--primary-60);
  --bs-btn-hover-bg: none;
  --bs-btn-hover-border-color: var(--primary-60);
  --bs-btn-focus-shadow-rgb: none;
  --bs-btn-active-color: var(--primary-100);
  --bs-btn-active-bg: #00d35c10;
  --bs-btn-active-border-color: var(--primary-100);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: var(--black-40);
  --bs-btn-disabled-bg: none;
  --bs-btn-disabled-border-color: var(--black-20);
  --bs-gradient: none;
}

.btn-outline-secondary {
  --bs-btn-color: var(--black-80);
  --bs-btn-border-color: var(--black-10);
  --bs-btn-hover-color: var(--black-40);
  --bs-btn-hover-bg: none;
  --bs-btn-hover-border-color: var(--black-10);
  --bs-btn-focus-shadow-rgb: none;
  --bs-btn-active-color: var(--black-40);
  --bs-btn-active-bg: var(--black-10);
  --bs-btn-active-border-color: var(--black-10);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: var(--black-40);
  --bs-btn-disabled-bg: none;
  --bs-btn-disabled-border-color: var(--black-20);
  --bs-gradient: none;
}

.btn-check:checked + .btn-toggle {
  color: var(--white);
  border: 1px solid var(--primary-100);
  background-color: var(--primary-100);
  border-color: none;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.43;
  border-radius: 18px;
}

.btn-check + .btn-toggle {
  background-color: var(--black-5);
  border: 1px solid var(--black-10);
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.43;
  font-weight: 600;
  color: var(--black-40);
  border-radius: 18px;
  transition: ease 0.2s;
}

.btn-check:not(:checked) + .btn-toggle:hover {
  background-color: var(--black-2);
  border: 1px solid var(--black-5);
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.43;
  font-weight: 600;
  color: var(--black-20);
  border-radius: 18px;
  transition: ease 0.2s;
}

.btn-check:disabled + .btn-toggle {
  color: var(--black-20);
  background-color: var(--black-2);
  border: 1px solid var(--black-5);
}

.btn-shadow {
  color: var(--black-80);
  background-color: var(--white);
  box-shadow: 0 1px 0 0 var(--black-10);
  border: 1px solid var(--black-10);
}

.btn-shadow:active {
  --bs-btn-active-color: var(--black-60);
  --bs-btn-active-bg: var(--black-5);
  --bs-btn-active-border-color: var(--black-10);
}

.btn-shadow:hover {
  color: var(--black-60);
  background-color: var(--white);
  box-shadow: 0 1px 0 0 var(--black-10);
  border: 1px solid var(--black-10);
}

.btn-shadow-secondary {
  color: var(--white);
  background-color: var(--black-60);
  box-shadow: 0 1px 0 0 var(--black-40);
}

.btn-shadow-secondary:hover {
  color: var(--white);
  background-color: var(--black-40);
  box-shadow: 0 1px 0 0 var(--black-40);
}

.btn-shadow-secondary:active {
  color: var(--white);
  background-color: var(--black-40);
  box-shadow: 0 1px 0 0 var(--black-40);
}

/* 인풋필드 */

.form-label {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.43;
  color: var(--black-60);
  font-weight: 600;
}

.form-control {
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.43;
  border-radius: 12px;
  background-color: var(--black-2);
  border: 1px solid var(--black-10);
  color: var(--black-100);
}

.form-control::placeholder {
  color: var(--black-40);
}

.form-control[readonly] {
  cursor: pointer;
}

.form-control:hover {
  background-color: var(--black-2);
  border: 1px solid var(--black-40);
}

.form-control:disabled {
  background-color: var(--white);
  border: 1px solid var(--black-5);
  color: var(--black-20);
}

.form-control:disabled::placeholder {
  color: var(--black-20);
}

.form-control:focus {
  background-color: var(--black-2);
  border: 1px solid var(--black-100);
  box-shadow: inset 0 0 0 1px var(--black-100);
}

.form-control-lg {
  padding: 16px;
  font-size: 16px;
  border-radius: 16px;
  line-height: 1.5;
}

.form-control-sm {
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 8px;
  line-height: 1.43;
}

.is-invalid {
  border: 1px solid var(--error);
  box-shadow: inset 0 0 0 1px var(--error);
  background-color: var(--black-2);
}

.is-invalid:hover {
  border: 1px solid var(--error);
  box-shadow: inset 0 0 0 1px var(--error);
  background-color: var(--black-2);
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
  border: 1px solid var(--error);
  box-shadow: inset 0 0 0 1px var(--error);
  background-color: var(--black-2);
}

.invalid-feedback {
  margin-top: 8px;
  color: var(--error);
  font-size: 14px;
  line-height: 1.43;
}

.form-select {
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.43;
  border-radius: 12px;
  background-color: var(--black-2);
  border: 1px solid var(--black-10);
  color: var(--black-100);
  background-position: right 16px center;
}

.form-select:hover {
  border: 1px solid var(--black-40);
  color: var(--black-100);
}

.form-select:disabled {
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.43;
  border-radius: 12px;
  background-color: var(--white);
  border: 1px solid var(--black-5);
  color: var(--black-20);
  background-position: right 16px center;
}

.form-select:focus {
  border: 1px solid var(--black-100);
  box-shadow: inset 0 0 0 1px var(--black-100);
}

.form-select-lg {
  padding: 16px;
  font-size: 16px;
  line-height: 1.5;
  border-radius: 16px;
}

.form-select-sm {
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.43;
  border-radius: 8px;
  background-position: right 12px center;
}

/* 뱃지 */

.badge {
  font-size: 12px;
  line-height: 1.5;
  padding: 4px 8px;
  border-radius: 13px;
}

.text-bg-primary {
  background-color: var(--primary-100) !important;
}

.text-bg-secondary {
  background-color: var(--accent-100) !important;
}

/* 체크박스 */

.form-check-label {
  cursor: pointer;
  padding-top: 0.095rem;
  padding-left: 4px;
  color: var(--black-100);
  font-weight: 400;
}

.form-check-input {
  --bs-form-check-bg: var(--black-2);
  width: 20px;
  height: 20px;
  cursor: pointer;
  transition: ease 0.1s;
}

.form-check-input[type='checkbox'] {
  border-radius: 6px;
}

.form-check-input:focus {
  border: 1px solid var(--black-10);
}

.form-check-input:checked {
  background-color: var(--primary-100);
  border: 1px solid var(--primary-100);
  width: 20px;
  height: 20px;
}

/* 스위치 */

.form-switch .form-check-input {
  --bs-form-check-bg: var(--black-10);
  border: 1px solid var(--black-10);
  width: 40px;
  height: 24px;
  cursor: pointer;
  transition: ease 0.1s;
}

.form-switch .form-check-input[type='checkbox'] {
  border-radius: 12px;
}

.form-switch .form-check-input:checked {
  --bs-form-check-bg: var(--black-10);
  border: 1px solid var(--primary-100);
  width: 40px;
  height: 24px;
  cursor: pointer;
  transition: ease 0.1s;
}

.form-switch .form-check-label {
  cursor: pointer;
  padding-top: 0.22rem;
  padding-left: 8px;
  color: var(--black-100);
  font-weight: 400;
}

/* 페이지네이션 */
.paging {
  margin-bottom: 0;
  margin-top: 24px;
}

.paging li {
  margin: 0 4px;
}

.paging-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--black-80);
  text-decoration: none;
  min-width: 32px;
  height: 32px;
  border-radius: 16px;
  transition: ease 0.2s;
}

.paging-link.active {
  color: var(--primary-100);
  background-color: var(--primary-10);
}

.paging-link:not(.active):hover {
  color: var(--black-60);
  background-color: var(--black-2);
  transition: ease 0.2s;
}

.paging-control.disabled {
  cursor: default;
}

.paging-control.disabled img {
  opacity: 0.4;
  pointer-events: none;
}

/* 상세페이지 상태변경 리모컨 */
.detail-control {
  background-color: var(--black-2);
  border: 1px solid var(--black-5);
  padding: 16px;
  border-radius: 16px;
}

.detail-control-btn {
  background-color: var(--white);
  border: 1px solid var(--black-5);
  box-shadow: 0 1px var(--black-10);
}

.detail-control-btn:hover {
  background-color: var(--white);
  border: 1px solid var(--black-5);
  box-shadow: 0 1px var(--black-10);
}

/* generateTabs */
.tabs {
  display: flex;
  background-color: var(--white);
  padding: 12px;
  border-radius: 24px;
  border: 1px solid var(--black-5);
  margin: 24px 0;
}

.tab-item {
  margin: 0 4px;
}

.tab-item:first-child {
  margin-left: 0;
}

.tab-item:last-child {
  margin-right: 0;
}

.tab-link {
  display: block;
  padding: 12px 16px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--black-40);
  transition: ease 0.2s;
}

.tab-link:hover {
  background-color: var(--black-2);
  transition: ease 0.2s;
}

.tab-link.active {
  color: var(--black-80);
  background-color: var(--black-5);
  box-shadow: 0 1px 0 0 var(--black-10);
}

/* generateFullTabs */

.full-tabs {
  background-color: var(--white);
  padding: 0 16px;
  display: flex;
  border-bottom: 1px solid var(--black-5);
  position: sticky;
  top: 55px;
  z-index: 99;
}

.full-tab-item {
  width: 50%;
}

.full-tab-link {
  width: 100%;
  display: flex;
  padding: 16px 0;
  justify-content: center;
  text-decoration: none;
  color: var(--black-60);
  cursor: pointer;
}

.full-tab-link.active {
  font-weight: 600;
  color: var(--black-100);
  border-bottom: 2px solid var(--black-100);
}


/* 아코디언 */
.accordion {
  --bs-accordion-color: var(--black-100);
  --bs-accordion-bg: var(-white);
  --bs-accordion-border-color: var(--black-5);
  --bs-accordion-active-bg: var(--white);
  --bs-accordion-active-color: var(--black-100);
  --bs-accordion-btn-padding-y: 20px;
  --bs-accordion-btn-padding-x: 16px;
}

.accordion-body {
  background-color: var(--black-2);
  color: var(--black-80);
}

/* 기타 디자인 */
/* 인포텍스트 */
.infotext {
  color: var(--accent-80);
  background-color: var(--accent-5);
  padding: 16px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 600;
}

/* 상품 리스트 Y스크롤 */
.product-section {
  max-width: 600px;
  padding: 32px 0;
  border-top: 1px solid var(--black-5);
}

.product-scroll {
  display: flex;
  margin: 0 16px;
}

.product-scroll .product-item {
  flex: 0 0 auto;
  margin-right: 12px;
}

.product-scroll .product-item:last-child {
  padding-right: 16px;
}

.product-scroll .product-img {
  width: 150px;
  height: 150px;
  border-radius: 20px;
  background-color: var(--black-5);
  border: 1px solid var(--black-10);
  overflow: hidden;
}

.product-scroll .product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-scroll .product-item a {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--black-100);
}

.product-scroll .product-name {
  width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 1.43;
  font-weight: 600;
}

/* 상품 리스트 */
.product-wrap {
  padding: 0 16px;
  max-width: 600px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.product-wrap .product-item {
  overflow: hidden;
  margin-bottom: 16px;
}

.product-item .product-name {
  font-weight: 600;
}

.product-item a {
  text-decoration: none;
  color: var(--black-100);
}

.product-wrap .product-img {
  border: 1px solid var(--black-10);
  background-color: var(--black-5);
  border-radius: 20px;
  width: 100%;
  padding-top: 100%;
  overflow: hidden;
  position: relative;
}

.product-wrap .product-img img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  object-fit: cover;
  transform: translate(-50%, -50%);
}

.product-wrap .product-name {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 프론트 스크롤 탭 */

.scroll-tab-wrap {
  position: sticky;
  top: 55px;
  max-width: 600px;
  overflow: hidden;
  width: 100%;
  background-color: var(--white);
  z-index: 99;
}

.scroll-tab {
  display: flex;
  overflow: auto hidden;
  align-items: center;
  white-space: nowrap;
  padding: 0 16px;
  border-bottom: 1px solid var(--black-5);
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scroll-tab::-webkit-scrollbar {
  display: none;
}

.scroll-tab-item {
  display: flex;
  padding: 12px;
  border: 0;
  background-color: var(--white);
  color: var(--black-40);
}

.scroll-tab-item.active {
  color: var(--black-100);
  font-weight: 700;
  border-bottom: 2px solid var(--black-100);
}

/* 텍스트 에디터 프론트뷰 */
.texteditor {
  padding: 16px 0;
}

.texteditor img {
  width: 100%;
}

.texteditor p {
  padding: 0 16px;
}

.texteditor blockquote {
  padding: 0 16px;
}

.texteditor pre {
  padding: 0 16px;
}

.texteditor h1 {
  padding: 0 16px;
}

.texteditor h2 {
  padding: 0 16px;
}

.texteditor h3 {
  padding: 0 16px;
}

.texteditor h4 {
  padding: 0 16px;
}

.texteditor h5 {
  padding: 0 16px;
}

.texteditor h6 {
  padding: 0 16px;
}