@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  font-size: 62.5%;
}

* {
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
  touch-action: pan-y;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body,
input,
select,
textarea,
button,
a {
  font-weight: 400;
  font-family: Pretendard, "Noto Sans Korea", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color: #333333;
  word-break: keep-all;
  word-wrap: break-word;
  -ms-word-break: keep-all;
  -ms-word-wrap: break-word;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

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

a:active, a:hover {
  text-decoration: none;
}

input {
  -webkit-appearance: none;
  font-size: inherit;
}

input:focus-visible {
  outline: none;
}

textarea {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  font-family: inherit;
}

button {
  overflow: visible;
  border: 0;
  padding: 0;
  background-color: transparent;
  cursor: pointer;
}

button:disabled {
  cursor: default;
}

button::-moz-focus-inner {
  padding: 0;
  margin: -1px;
}

fieldset, img {
  border: 0 none;
  vertical-align: top;
}

img {
  display: block;
  max-width: 100%;
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
  backface-visibility: hidden;
}

@font-face {
  font-family: "Pretendard";
  font-weight: 800;
  font-display: swap;
  src: local("Pretendard ExtraBold"), local("Pretendard-ExtraBold"), url("../../font/Pretendard-ExtraBold.subset.woff2") format("woff2"), url("../../font/Pretendard-ExtraBold.subset.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-display: swap;
  src: local("Pretendard Bold"), local("Pretendard-Bold"), url("../../font/Pretendard-Bold.subset.woff2") format("woff2"), url("../../font/Pretendard-Bold.subset.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-display: swap;
  src: local("Pretendard SemiBold"), local("Pretendard-SemiBold"), url("../../font/Pretendard-SemiBold.subset.woff2") format("woff2"), url("../../font/Pretendard-SemiBold.subset.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-display: swap;
  src: local("Pretendard Medium"), local("Pretendard-Medium"), url("../../font/Pretendard-Medium.subset.woff2") format("woff2"), url("../../font/Pretendard-Medium.subset.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-display: swap;
  src: local("Pretendard Regular"), local("Pretendard-Regular"), url("../../font/Pretendard-Regular.subset.woff2") format("woff2"), url("../../font/Pretendard-Regular.subset.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 300;
  font-display: swap;
  src: local("Pretendard Light"), local("Pretendard-Light"), url("../../font/Pretendard-Light.subset.woff2") format("woff2"), url("../../font/Pretendard-Light.subset.woff") format("woff");
}
.blind {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: polygon(0 0, 0 0, 0 0);
}

.hidden {
  display: none !important;
}

:root {
  --scale: 1.5;
}

.icon {
  width: 20px;
  height: 20px;
  display: inline-block;
}
.icon.add {
  background-image: url("../img/icon/icon_add.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
}
.icon.add-black {
  background-image: url("../img/icon/icon_add_black.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
}
.icon.add-gray {
  background-image: url("../img/icon/icon_add_gray.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
}
.icon.alarm {
  background-image: url("../img/icon/icon_bell.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px;
  position: relative;
}
.icon.arrow-up-down {
  background-image: url("../img/icon/icon_arrow_updown.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
}
.icon.arrow-down {
  background-image: url("../img/icon/icon_arrow_down.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
}
.icon.arrow-up {
  background-image: url("../img/icon/icon_arrow_down.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
  transform: rotate(180deg);
}
.icon.bookmark {
  background-image: url("../img/icon/icon_bookmark_off.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
}
.icon.bookmark--disabled {
  background-image: url("../img/icon/icon_bookmark_disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  cursor: not-allowed;
}
.icon.change {
  background-image: url("../img/icon/icon_change.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
}
.icon.check {
  background-image: url("../img/icon/icon_check.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
}
.icon.close {
  background-image: url("../img/icon/icon_close.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
}
.icon.close-black {
  background-image: url("../img/icon/icon_close_black.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
}
.icon.delete {
  background-image: url("../img/icon/icon_delete.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
}
.icon.download {
  background-image: url("../img/icon/icon_download.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
}
.icon.exit {
  background-image: url("../img/icon/icon_exit.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
}
.icon.enlarge {
  background-image: url("../img/icon/icon_enlarge.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
}
.icon.filter {
  background-image: url("../img/icon/icon_filter.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
}
.icon.filter-white {
  background-image: url("../img/icon/icon_filter_white.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
}
.icon.greater-down {
  background-image: url("../img/icon/icon_greater_down.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
}
.icon.greater-down-gray {
  background-image: url("../img/icon/icon_greater_down_gray.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
}
.icon.help {
  background-image: url("../img/icon/icon_help.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
}
.icon.history {
  background-image: url("../img/icon/icon_history.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px;
}
.icon.profile {
  background-image: url("../img/icon/icon_profile.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
}
.icon.search {
  background-image: url("../img/icon/icon_search_gray.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
}
.icon.template {
  background-image: url("../img/icon/icon_template.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
}
.icon.save {
  background-image: url("../img/icon/icon_save.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
}
.icon.minus-black {
  background-image: url("../img/icon/icon_minus_black.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
}
.icon.upload {
  background-image: url("../img/icon/icon_upload.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
}
.icon.tag-editor {
  background-image: url("../img/icon/icon_tag_editor.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
}
.icon.question {
  background-image: url("../img/icon/icon_question.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
}
.icon.video {
  background-image: url("../img/icon/icon_video.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
}
.icon.prev {
  background-image: url("../img/icon/icon_prev.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
}
.icon.next {
  background-image: url("../img/icon/icon_next.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
}
.icon.first {
  background-image: url("../img/icon/icon_last.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  transform: rotate(180deg);
}
.icon.last {
  background-image: url("../img/icon/icon_last.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
}
.icon.openNew {
  background-image: url("../img/icon/icon_openNew.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
}
.icon.pencil {
  background-image: url("../img/icon/icon_pencil.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
}
.icon.pencil-black {
  background-image: url("../img/icon/icon_pencil_black.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.icon.triangle-down {
  background-image: url("../img/icon/icon_triangle_down.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
}
.icon.more {
  background-image: url("../img/icon/icon_more.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
}
.icon.more-vertical {
  background-image: url("../img/icon/icon_more_vert.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
}
.icon.more-gray {
  background-image: url("../img/icon/icon_more_gray.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
}
.icon.return {
  background-image: url("../img/icon/icon_return.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
}
.icon.setting {
  background-image: url("../img/icon/icon_setting_lined.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
}
.icon.drawer-menu {
  background-image: url("../img/icon/icon_hamburger_menu.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px;
}
.icon.question-circle {
  background-image: url("../img/icon/icon_question-circle.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
}
.icon.delivery {
  background-image: url("../img/icon/icon_delivery-outline.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
  margin-right: 1px;
}
.icon.delivery-check {
  background-image: url("../img/icon/icon_delivery-check.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
  margin-right: 1px;
}
.icon.list {
  background-image: url("../img/icon/icon_list.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  margin-right: 2px;
}

.loading-mask {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100vw;
  height: 100vh;
  background: rgba(51, 51, 51, 0.06);
}
.loading-mask__block {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 78px;
  padding: 15px;
  background: #FFFFFF;
  box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.1);
}
.loading-mask__image {
  display: block;
  width: 100%;
  height: 100%;
}

.search {
  position: relative;
}
.search input[type=text].search__input {
  height: calc(30px * 1.1429);
  padding: 5px 12px 5px 32px !important;
  position: relative;
  background-image: url("../img/icon/icon_search_gray.svg");
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 20px;
}

.tooltip__container {
  position: relative;
}
.tooltip__container:hover .tooltip__text {
  display: block;
}
.tooltip__wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.tooltip__text {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 51;
  background-color: #333333;
  color: #FFFFFF;
  font-size: 1.2rem;
  line-height: 1.4;
  padding: 4px 6px;
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
  white-space: nowrap;
}
.tooltip__text-red {
  background: #B83333;
}
.tooltip__text--top {
  top: -28px;
}
.tooltip__text--top-left {
  top: -28px;
  left: 0;
  transform: translateX(0);
}
.tooltip__text--top-right {
  top: -28px;
  left: unset;
  right: 0;
  transform: translateX(0);
}
.tooltip__text--bottom {
  bottom: -28px;
}
.tooltip__text--bottom-left {
  bottom: -28px;
  left: 0;
  transform: translateX(0);
}
.tooltip__text--bl-line {
  bottom: -44px;
  left: 0;
  transform: translateX(0);
}
.tooltip__text--disabled-selectbox.force-hide {
  display: none !important;
}
.tooltip__box {
  position: absolute;
  width: auto !important;
  bottom: -22px;
  left: 6px;
  z-index: 1;
  background-color: #333333;
  color: #FFFFFF;
  font-size: 1.2rem;
  line-height: 1.4;
  padding: 4px 6px;
  border-radius: 2px;
}

.badge {
  border-radius: 2px;
  font-weight: 600;
  padding: 2px 7px;
  font-size: 1.2rem;
}
.badge--free {
  border: 1px solid #8F8F8F;
  color: #8F8F8F;
}
.badge--subscription {
  background-color: #7D45B7;
  color: #FFFFFF;
}

.form-group__badge {
  position: absolute;
  right: 0.5rem;
  background: #ddf1e6;
  padding: 4px 6px;
  color: #52B833;
  font-weight: 600;
  font-size: 1.2rem;
  border-right: 2px;
}
.form-group__badge-success {
  padding: 4px 6px 4px 22px;
  background-image: url("../img/icon/icon_check_green.svg");
  background-repeat: no-repeat;
  background-position: 8px center;
  background-size: 11px;
}

.status--gray {
  background-color: #707070;
}

.status--teal {
  background-color: #33B8AA;
}

.status--dark-cyan {
  background-color: #007B99;
}

.status--blue {
  background-color: #0E64C8;
}

.status--purple {
  background-color: #7D45B7;
}

.status--indigo {
  background-color: #5033B8;
}

.status--green {
  background-color: #52B833;
}

.status--red {
  background-color: #D46B61;
}

.answer-status {
  display: inline-block;
  height: 26px;
  padding: 3px 22px;
  font-size: 1.4rem;
  line-height: 1.4;
  color: #FFFFFF;
  border-radius: 2px;
}

.dropdown {
  position: absolute;
  top: 30px;
  z-index: 1;
  background-color: #FFFFFF;
  width: 100%;
  border: 1px solid #8F8F8F;
  border-top: 0;
}
.dropdown__list .search {
  width: 100%;
  padding: 6px 8px;
  border-bottom: 1px solid #D6D6D6;
  margin-bottom: 0;
}
.dropdown__list .search input[type=text].search__input {
  width: 100%;
}
.dropdown__list .search .clear-icon {
  right: 3%;
  top: 50%;
  transform: translateY(-50%);
}
.dropdown__list .no-results {
  height: 100px;
}
.dropdown__list .no-results > p {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #8F8F8F;
  font-size: 14px;
  font-weight: 500;
}
.dropdown__items {
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
}
.dropdown__item > div {
  color: #1F1F1F;
}
.dropdown__submenu {
  display: none;
}
.dropdown__submenu .dropdown__option {
  padding-inline-start: 36px;
}
.dropdown__submenu.open {
  display: block;
}
.dropdown__sublist {
  display: none;
}
.dropdown__sublist .dropdown__option {
  padding-inline-start: 60px;
}
.dropdown__sublist.open {
  display: block;
}
.dropdown__option {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 1.4rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #707070;
  gap: 2px;
  min-height: 30px;
  padding: 3px 10px;
  margin-bottom: 2px;
  border-radius: 2px;
  cursor: pointer;
}
.dropdown__option span {
  display: inline-block;
  width: 100%;
  position: relative;
}
.dropdown__option span.selected::after {
  content: "";
  background-image: url("../img/icon/icon_check.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px;
  position: absolute;
  right: 4px;
  width: 20px;
  top: 0;
  height: 20px;
  display: block;
  filter: invert(40%) sepia(76%) saturate(621%) hue-rotate(105deg) brightness(80%) contrast(90%);
}
.dropdown__option .dropdown__toggle {
  height: 20px;
}
.dropdown__option .dropdown__toggle[disabled] {
  pointer-events: none;
}
.dropdown__option .dropdown__toggle[disabled] .icon {
  filter: invert(82%) sepia(0%) saturate(4256%) hue-rotate(70deg) brightness(105%) contrast(93%);
}
.dropdown__option.open .dropdown__toggle {
  transform: rotate(180deg);
}
.dropdown__option:hover {
  background-color: rgba(36, 42, 48, 0.04);
  transition: opacity 0s ease 0s;
}

.quantity-control .quantity__value {
  min-width: 5rem;
  height: 3rem;
  padding: 0.5rem;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.4;
  border: 0;
  transform-origin: unset;
  transform: unset;
  width: auto;
  max-width: 100%;
  background: transparent;
}
.quantity-control button {
  width: 3rem;
  min-width: 3rem;
  height: 3rem;
}

.page-tabs__container {
  height: 2.8rem;
  padding: 2px;
  background-color: #EFEFEF;
  border-radius: 2px;
  position: relative;
}
.page-tabs__list {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
}
.page-tabs__item {
  position: relative;
  z-index: 1;
  flex-grow: 1;
  text-align: center;
}
.page-tabs__item.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  border-radius: 2px;
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
  z-index: -1;
}
.page-tabs__button {
  padding: 2px 20px;
  font-size: 1.4rem;
  line-height: 1.4;
  color: #8F8F8F;
  font-weight: 600;
  letter-spacing: -0.02em;
  transition: color 0.3s ease;
  text-wrap-mode: nowrap;
}
.page-tabs__item.active .page-tabs__button {
  color: #333333;
}

.clear-icon {
  display: none;
  background-image: url("../img/icon/icon_close.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  width: 22px;
  height: 22px;
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
.clear-icon:hover {
  background-color: rgba(51, 51, 51, 0.06);
  border-radius: 2px;
}

.btn--clear--info {
  display: none;
}

.empty__message {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 1.6rem;
  color: #D6D6D6;
  letter-spacing: -0.02em;
}
.empty__message-box {
  width: 100%;
  height: 16rem;
}

.step-indicator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2.5rem;
}
.step-indicator__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid #8F8F8F;
  font-size: 14px;
  font-weight: 600;
  color: #8F8F8F;
}
.step-indicator__label {
  font-size: 14px;
  font-weight: 600;
  color: #8F8F8F;
  margin-left: 8px;
}
.step-indicator__line {
  width: 100%;
  height: 1px;
  flex: 1;
  background: #8F8F8F;
}
.step-indicator__line.active {
  background: #B83333;
}
.step-indicator__step {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.step-indicator__step:nth-child(2) {
  justify-content: center;
}
.step-indicator__step:last-child {
  justify-content: end;
}
.step-indicator__step--prev .step-indicator__number {
  background: #B83333;
  border-color: #B83333;
  color: #FFFFFF;
}
.step-indicator__step--prev .step-indicator__label {
  color: #B83333;
}
.step-indicator__step--active .step-indicator__number {
  border-color: #B83333;
  color: #B83333;
}
.step-indicator__step--active .step-indicator__label {
  color: #B83333;
}

.center {
  text-align: center !important;
}

.left {
  text-align: left !important;
}

.right {
  text-align: right !important;
}

.underline {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.placeholder__text {
  color: #8F8F8F;
  font-weight: 600;
}

.required::after {
  content: "*";
  color: #B83333;
  margin-left: 2px;
}

.dim-layer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99;
  transition: opacity 0.3s ease;
  opacity: 0;
}
.dim-layer.dim-layer--active {
  display: block;
  opacity: 1;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: fit-content;
  text-align: center;
  text-decoration: none;
  text-wrap: nowrap;
  font-size: 1.4rem;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: all 0.3s ease;
}
.btn--primary {
  background-color: #B83333;
  color: #FFFFFF;
}
.btn--primary:hover {
  background: rgb(172.0204255319, 47.6795744681, 47.6795744681);
  transition: all 0.3s ease;
}
.btn--primary:active {
  background: rgb(164.0340425532, 45.4659574468, 45.4659574468);
}
.btn--primary:disabled, .btn--primary.disabled {
  background: #D6D6D6;
  color: #8F8F8F;
  cursor: not-allowed;
}
.btn--secondary {
  background-color: #333333;
  color: #FFFFFF;
}
.btn--secondary:hover {
  background: rgb(43.35, 43.35, 43.35);
  transition: all 0.3s ease;
}
.btn--secondary:active {
  background: rgb(38.25, 38.25, 38.25);
}
.btn--secondary:disabled, .btn--secondary.disabled {
  background: #D6D6D6;
  color: #8F8F8F;
  cursor: not-allowed;
}
.btn--tertiary {
  background-color: #EFEFEF;
  color: #707070;
}
.btn--tertiary:hover {
  background: rgb(231.35, 231.35, 231.35);
  transition: all 0.3s ease;
}
.btn--tertiary:active {
  background: rgb(226.25, 226.25, 226.25);
}
.btn--tertiary:disabled, .btn--tertiary.disabled {
  background: #D6D6D6;
  color: #8F8F8F;
  cursor: not-allowed;
}
.btn--kakao {
  background-color: #FFEB00;
  color: #333333;
}
.btn--kakao:hover {
  background: rgb(239.7, 220.9, 0);
  transition: all 0.3s ease;
}
.btn--kakao:active {
  background: rgb(229.5, 211.5, 0);
}
.btn--kakao:disabled, .btn--kakao.disabled {
  background: #D6D6D6;
  color: #8F8F8F;
  cursor: not-allowed;
}
.btn--purple {
  background-color: #7D45B7;
  color: #FFFFFF;
}
.btn--purple:hover {
  background: rgb(117.4107142857, 64.8107142857, 171.8892857143);
  transition: all 0.3s ease;
}
.btn--purple:active {
  background: rgb(112.3511904762, 62.0178571429, 164.4821428571);
}
.btn--purple:disabled, .btn--purple.disabled {
  background: #D6D6D6;
  color: #8F8F8F;
  cursor: not-allowed;
}
.btn--brown {
  background-color: #BC5B16;
  color: #FFFFFF;
}
.btn--brown:hover {
  background: rgb(174.3028571429, 84.37, 20.3971428571);
  transition: all 0.3s ease;
}
.btn--brown:active {
  background: rgb(165.1714285714, 79.95, 19.3285714286);
}
.btn--brown:disabled, .btn--brown.disabled {
  background: #D6D6D6;
  color: #8F8F8F;
  cursor: not-allowed;
}
.btn--green {
  background-color: #52B833;
  color: #FFFFFF;
}
.btn--green:hover {
  background: rgb(76.6612765957, 172.0204255319, 47.6795744681);
  transition: all 0.3s ease;
}
.btn--green:active {
  background: rgb(73.1021276596, 164.0340425532, 45.4659574468);
}
.btn--green:disabled, .btn--green.disabled {
  background: #D6D6D6;
  color: #8F8F8F;
  cursor: not-allowed;
}
.btn--ghost {
  background: transparent;
  color: #333333;
}
.btn--ghost--gray {
  color: #707070;
}
.btn--ghost:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.btn:disabled, .btn.disabled {
  background-color: #8F8F8F;
  color: rgba(255, 255, 255, 0.7);
  cursor: not-allowed;
}
.btn:disabled .icon, .btn.disabled .icon {
  filter: invert(60%) sepia(11%) saturate(6%) hue-rotate(339deg) brightness(200%) contrast(100%);
}
.btn--outline {
  border: 1px solid #8F8F8F;
  background: transparent;
}
.btn--outline--black {
  border: 1px solid #333333;
}
.btn--outline--black:hover {
  background: rgb(240.72, 240.72, 240.72);
}
.btn--outline--black:disabled, .btn--outline--black.disabled {
  background-color: #D6D6D6;
  color: #8F8F8F;
  border: 0;
  cursor: not-allowed;
}
.btn--outline--black:disabled .icon, .btn--outline--black.disabled .icon {
  filter: invert(52%) sepia(100%) saturate(1%) hue-rotate(316deg) brightness(90%) contrast(85%);
}
.btn--outline--darkGray {
  border: 1px solid #8F8F8F;
  color: #8F8F8F;
}
.btn--outline--darkGray:hover {
  background: rgb(247.16, 247.16, 247.16);
}
.btn--outline--darkGray:disabled, .btn--outline--darkGray.disabled {
  background-color: #D6D6D6;
  color: #8F8F8F;
  border: 0;
  cursor: not-allowed;
}
.btn--outline--darkGray:disabled .icon, .btn--outline--darkGray.disabled .icon {
  filter: invert(52%) sepia(100%) saturate(1%) hue-rotate(316deg) brightness(90%) contrast(85%);
}
.btn--outline--gray {
  border: 1px solid #D6D6D6;
  color: #707070;
}
.btn--outline--gray:hover {
  background: rgb(252.13, 252.13, 252.13);
}
.btn--outline--gray:disabled, .btn--outline--gray.disabled {
  background-color: #D6D6D6;
  color: #8F8F8F;
  border: 0;
  cursor: not-allowed;
}
.btn--outline--gray:disabled .icon, .btn--outline--gray.disabled .icon {
  filter: invert(52%) sepia(100%) saturate(1%) hue-rotate(316deg) brightness(90%) contrast(85%);
}
.btn--outline--red {
  border: 1px solid #B83333;
}
.btn--outline--red:hover {
  background: rgb(250.8223404255, 239.9276595745, 239.9276595745);
}
.btn--outline--red:disabled, .btn--outline--red.disabled {
  background-color: #D6D6D6;
  color: #8F8F8F;
  border: 0;
  cursor: not-allowed;
}
.btn--outline--red:disabled .icon, .btn--outline--red.disabled .icon {
  filter: invert(52%) sepia(100%) saturate(1%) hue-rotate(316deg) brightness(90%) contrast(85%);
}
.btn--icon {
  width: 30px;
  height: 30px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn--icon.line {
  border: 1px solid #333333;
}
.btn--icon--xs {
  width: 20px;
  height: 20px;
}
.btn--icon--sm {
  width: 24px;
  height: 24px;
}
.btn--icon--sm .icon {
  width: 16px;
  height: 16px;
}
.btn--icon--md .delete {
  background-size: 24px;
}
.btn--text {
  background: transparent;
  color: #333333;
  font-weight: 400;
  border: none;
}
.btn--text--red {
  color: #B83333;
}
.btn--text--red:hover {
  background-color: rgb(255, 241, 240);
}
.btn--text--gray {
  color: #707070;
}
.btn--text--under {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.btn--sm {
  height: 26px;
  padding: 0 10px;
  font-size: 1.3rem;
}
.btn--md {
  height: 30px;
  padding: 5px 12px;
  font-weight: 600;
}
.btn--lg {
  height: 34px;
  padding: 0 14px;
  font-weight: 600;
}
.btn--xlg {
  height: 50px;
  padding: 15px 8px;
  font-weight: 600;
}
.btn__tag-edit {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid #333333;
  border-radius: 2px;
}

.quantity-control {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.quantity-control > .quantity__button:hover {
  background-color: rgba(51, 51, 51, 0.06);
}

.quantity__button {
  border: 1px solid #8F8F8F;
  border-radius: 2px;
  width: 2.4rem;
  height: 2.4rem;
}
.quantity__button--minus {
  background-image: url("../img/icon/icon_minus_gray.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
}
.quantity__button--plus {
  background-image: url("../img/icon/icon_add_gray.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
}
.quantity__button:disabled {
  background-color: #D6D6D6;
  cursor: not-allowed;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 9999s ease-out;
  -webkit-box-shadow: 0 0 0 1000px white inset;
}

/* checkbox 초기화 */
input[type=checkbox].form-check__checkbox {
  display: none;
}

input[type=checkbox].form-check__checkbox + label {
  font-size: 1.6rem;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #333333;
  display: inline-block;
  padding-left: 26px;
  cursor: pointer;
}
input[type=checkbox].form-check__checkbox + label.form-check__label--strong {
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  input[type=checkbox].form-check__checkbox + label {
    font-size: 1.4rem;
    padding-left: 24px;
  }
}

input[type=checkbox].form-check__checkbox + label::before {
  display: block;
  content: "";
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid #8F8F8F;
  border-radius: 2px;
  color: #FFFFFF;
}
input[type=checkbox].form-check__checkbox + label::before:hover {
  border-color: #333333;
}
@media screen and (max-width: 767px) {
  input[type=checkbox].form-check__checkbox + label::before {
    width: 14px;
    height: 14px;
    line-height: 14px;
  }
}

input[type=checkbox].form-check__checkbox:checked + label::before {
  content: "";
  background: url("../../img/icon/icon_check.svg") no-repeat center #B83333;
  border-color: #B83333;
  background-size: 20px;
}

input[type=checkbox].form-check__checkbox:checked:disabled + label::before {
  border-color: #8F8F8F;
  background: url("../../img/icon/icon_check_gray.svg") no-repeat center #D6D6D6;
  background-size: 1.2rem;
  cursor: not-allowed;
}

.tabulator-cell input[type=checkbox].form-check__checkbox + label {
  position: unset;
}

.tabulator-cell input[type=checkbox].form-check__checkbox + label::before {
  left: 50%;
  transform: translate(-50%, -50%);
}

.form-check__label .required {
  color: #B83333;
}
.form-check-custom input[type=checkbox].form-check__checkbox + label {
  color: #8F8F8F;
  font-size: 1.2rem;
  line-height: 1.8;
}
.form-check__wrap .form-check {
  margin-bottom: 6px;
}

#templateStatusFilterModal .form-check {
  position: relative;
}

/* 기능=체크박스 > 스타일 라디오 */
.form-radio:has(.form-check__checkbox) {
  width: 30px;
  height: 30px;
  position: relative;
}
.form-radio input[type=checkbox].form-check__checkbox + label::before {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.form-radio input[type=checkbox].form-check__checkbox:checked + label::before {
  width: 10px;
  height: 10px;
  background-color: #B83333;
  border: 3px solid #FFFFFF;
  box-shadow: 0 0 0 1.5px #B83333;
  background-image: none;
}
.form-radio.disabled input[type=checkbox].form-check__checkbox + label::before {
  width: 18px;
  height: 18px;
  background: #D6D6D6;
  border: 0;
  box-shadow: inset 0 0 0 2px #8F8F8F;
}
.form-radio.disabled input[type=checkbox].form-check__checkbox:checked + label::before {
  width: 18px;
  height: 18px;
  border: 0;
  box-shadow: inset 0 0 0 3px #8F8F8F;
  background-image: none;
}

/* 라디오버튼 커스텀 */
input[type=radio] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 17px;
  height: 17px;
  box-shadow: inset 0 0 0 1px #8F8F8F;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
input[type=radio]:hover {
  border-color: #B83333;
}
input[type=radio]:checked {
  width: 16px;
  height: 16px;
  background-color: #B83333;
  border: 3.5px solid #FFFFFF;
  box-shadow: 0 0 0 1.5px #B83333;
}
input[type=radio]:checked:disabled {
  width: 18px;
  height: 18px;
  background: #D6D6D6;
  box-shadow: inset 0 0 0 4px #8F8F8F;
  border-radius: 50%;
  cursor: not-allowed;
  border: 0;
}
input[type=radio]:disabled {
  width: 17px;
  height: 17px;
  background: #D6D6D6;
  box-shadow: inset 0 0 0 2px #8F8F8F;
  border-radius: 50%;
  cursor: not-allowed;
}

/* 텍스트 input */
input[type=text],
input[type=email],
input[type=password] {
  padding: 5.71px 12.71px;
  color: #333333;
  border: 1px solid #8F8F8F;
  border-radius: 2px;
  font-size: 1.6rem;
  font-weight: 500;
  width: calc(100% * 1.1429);
  transform: scale(0.875);
  transform-origin: left top;
  letter-spacing: -0.02em;
  margin-bottom: calc(32px - 32px * 1.1429);
  margin-right: -14.28625%;
}
input[type=text]:active, input[type=text]:focus, input[type=text]:focus-visible,
input[type=email]:active,
input[type=email]:focus,
input[type=email]:focus-visible,
input[type=password]:active,
input[type=password]:focus,
input[type=password]:focus-visible {
  border-color: #000000;
}
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=password]::placeholder {
  opacity: 0.5;
}
input[type=text].sm,
input[type=email].sm,
input[type=password].sm {
  height: calc(28px * 1.1429);
  width: calc(100% * 1.1429);
  margin-bottom: calc(28px - 28px * 1.1429);
}
input[type=text].md,
input[type=email].md,
input[type=password].md {
  height: calc(30px * 1.1429);
  width: calc(100% * 1.1429);
  margin-bottom: calc(30px - 30px * 1.1429);
}
input[type=text].input--margin-adjust-large,
input[type=email].input--margin-adjust-large,
input[type=password].input--margin-adjust-large {
  margin-right: -10.28625%;
}
input[type=text].input--margin-adjust-medium,
input[type=email].input--margin-adjust-medium,
input[type=password].input--margin-adjust-medium {
  margin-right: -11.28625%;
}
input[type=text].input--margin-adjust-small,
input[type=email].input--margin-adjust-small,
input[type=password].input--margin-adjust-small {
  margin-right: -12.28625%;
}

input[type=text]:disabled,
input[type=email]:disabled,
input[type=password]:disabled {
  background: #EFEFEF;
  color: #8F8F8F;
  cursor: not-allowed;
}
input[type=text]:disabled:-webkit-autofill,
input[type=email]:disabled:-webkit-autofill,
input[type=password]:disabled:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #EFEFEF inset !important;
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 9999s ease-out;
  -webkit-text-fill-color: #8F8F8F;
}

input[type=date] {
  height: 30px;
  border-radius: 2px;
  border: 1px solid #333333;
  padding: 0 10px;
  background-image: url("../img/icon/icon_calander.svg");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 26px;
}

input[type=date]::-webkit-clear-button,
input[type=date]::-webkit-inner-spin-button {
  display: none;
}

input[type=date]::-webkit-calendar-picker-indicator {
  background: transparent;
  z-index: 1;
}

/* datepicker */
input.datepicker {
  border: 1px solid #333333;
  background-image: url("../img/icon/icon_calander.svg");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 30px;
  cursor: pointer;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  input.datepicker__double {
    width: calc(32px * 1.1429);
    text-indent: -999px;
  }
}
@media screen and (max-width: 767px) {
  input.datepicker__double {
    width: calc(32px * 1.1429);
    text-indent: -999px;
  }
}

.datepicker-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.datepicker-container .datepicker-input {
  height: calc(30px * 1.1429);
  margin-bottom: calc(30px - 30px * 1.1429);
  border: 1px solid #333333;
}
.datepicker-container .datepicker-input__double {
  padding: 5.71px 22px 5.71px 12.71px;
}
.datepicker__field {
  position: relative;
  width: 134px;
}
.datepicker__field::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 31px;
  width: 1px;
  height: 30px;
  background-color: #333333;
  transform: translateY(-50%);
}
.datepicker .separator {
  font-size: 1.4rem;
  font-weight: 600;
}
.datepicker-icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background-image: url("../img/icon/icon_calander.svg");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 28px;
  cursor: pointer;
}
.datepicker__input {
  background-image: url("../img/icon/icon_search_gray.svg");
  background-repeat: no-repeat;
  background-position: left 8px center;
  background-size: 20px;
  width: 100%;
  max-width: 200px;
  padding-left: 30px !important;
}
.datepicker__input-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.datepicker__input-label {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.datepicker__res {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.drp-calendar.left {
  padding: 14px 7px 14px 14px !important;
}
.drp-calendar.left .datepicker__input-wrap {
  padding-right: 8px;
}
.drp-calendar.right {
  padding: 14px 14px 14px 7px !important;
}
.drp-calendar.right .datepicker__select-wrap {
  padding-right: 0;
}

.daterangepicker .drp-calendar {
  width: 50% !important;
  max-width: revert !important;
}
.daterangepicker .drp-calendar.single {
  width: 100% !important;
}
.daterangepicker td.start-date {
  border-radius: 2px 0 0 2px !important;
}
.daterangepicker td.start-date.end-date {
  border-radius: 2px !important;
}
.daterangepicker td.end-date {
  border-radius: 0 2px 2px 0 !important;
}
.daterangepicker td.in-range {
  background-color: #B83333 !important;
  color: #FFFFFF !important;
}
.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: #333333 !important;
}
@media screen and (max-width: 767px) {
  .daterangepicker .drp-calendar {
    width: 100% !important;
  }
}

/* 테이블 커스텀 인풋 */
input[type=text].custom-column-input {
  padding: 6px 12px;
  margin-left: 4px;
}

input[type=text].edit-input {
  min-width: 80px;
  flex: 1;
  padding: 4px 6px;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 비밀번호 설정 인풋 */
.password-inputs {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 2.4rem;
}
.password-inputs__eye-btn {
  width: 30px;
  height: 30px;
}

input[type=tel].password-inputs__field {
  -webkit-text-security: disc;
  width: 30px;
  height: 30px;
  border: 1px solid #333333;
  font-size: 4rem;
  line-height: 30px;
  text-align: center;
  padding-bottom: 6px;
}

/* 텍스트에어리어 */
textarea {
  border: 1px solid #8F8F8F;
  border-radius: 2px;
  color: #333333;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  min-height: 100px;
  padding: 5.71px 12.71px;
  outline: none;
  width: calc(100% * 1.1429);
  transform: scale(0.875);
  transform-origin: left top;
  margin-right: -14.28625%;
}
textarea::placeholder {
  opacity: 0.5;
}
textarea:active, textarea:focus, textarea:focus-visible {
  border: 1px solid #000000;
}
textarea.input--margin-adjust-small {
  margin-right: -12.28625%;
}
textarea:disabled {
  background: #EFEFEF;
  color: #8F8F8F;
  cursor: not-allowed;
}

/* 셀렉트박스 커스텀 */
.selectbox {
  position: relative;
  cursor: pointer;
  min-width: 120px;
  /* 셀렉트박스 옵션 */
}
.selectbox--date {
  min-width: 158px;
}
.selectbox--change {
  min-width: 140px;
}
.selectbox--modal-check {
  min-width: 160px;
}
.selectbox__trigger {
  width: 100%;
  text-align: left;
  background-color: #FFFFFF;
  border: 1px solid #333333;
  padding: 5px 40px 5px 12px;
  height: 30px;
  font-size: 1.4rem;
  font-weight: 500;
  border-radius: 2px;
  text-wrap: nowrap;
}
.selectbox__trigger::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  display: block;
  border-left: 1px solid #333333;
  transition: transform 0.3s;
  background-image: url("../img/icon/icon_greater_down.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px;
}
.selectbox__trigger:focus, .selectbox__trigger:focus-visible {
  outline: none;
  border-color: #000000 !important;
}
.selectbox__trigger:disabled {
  background: #D6D6D6;
  border-color: #8F8F8F;
  color: #8F8F8F;
  cursor: not-allowed;
}
.selectbox__trigger:disabled::after {
  border-color: #8F8F8F;
  background-image: url("../img/icon/icon_greater_down_gray.svg");
}
.selectbox__options {
  display: none;
  box-sizing: border-box;
  position: absolute;
  background-color: #FFFFFF;
  border: 1px solid #333333;
  border-radius: 2px;
  max-height: 200px;
  width: 100%;
  margin-top: 2px;
  padding: 0.4rem;
  z-index: 45;
  overflow-x: auto;
  text-wrap: nowrap;
}
.selectbox__option {
  display: block;
  width: 100%;
  padding: 0.4rem 1rem;
  line-height: 22px;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  cursor: pointer;
  border-radius: 3px;
  text-overflow: ellipsis;
  overflow: hidden;
}
.selectbox__option:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.selectbox__option:focus-visible {
  outline: none;
}
.selectbox.open .selectbox__options {
  display: block;
}
.selectbox.open .select__trigger {
  border-radius: 2px 2px 0 0;
}
.selectbox.open .select__trigger::after {
  transform: rotate(180deg);
}
.selectbox--open .selectbox__options {
  display: block;
}
.selectbox--column {
  min-width: 160px;
}
.selectbox--payment {
  width: 100%;
}
.selectbox__icon {
  display: inline-block;
  vertical-align: middle;
}
.selectbox--order-status .selectbox__text {
  width: 80px;
  height: 26px;
  padding: 2px 6px;
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.selectbox--inquiryStatus .selectbox__trigger {
  padding: 2px 0 2px 2px;
}
.selectbox--shippingStatus .selectbox__trigger {
  padding: 1px 0 1px 13px;
}
.selectbox.disabled .selectbox__trigger {
  background: #D6D6D6;
  border-color: #8F8F8F;
  color: #8F8F8F;
  cursor: not-allowed;
}
.selectbox.disabled .selectbox__trigger::after {
  border-color: #8F8F8F;
  background-image: url("../img/icon/icon_greater_down_gray.svg");
}

/* 셀렉트박스 커스텀 */
.select {
  position: relative;
}
.select__wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  height: 30px;
  padding: 5px 30px 5px 12px;
  background: #FFFFFF;
  border: 1px solid #333333;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  cursor: pointer;
}
.select__wrapper::after {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0;
  top: -1px;
  background-image: url(../img/icon/icon_greater_down.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px;
  border-left: 1px solid #333333;
}
.select__button {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.select__dropdown {
  display: none;
  position: absolute;
  width: 100%;
  border: 1px solid #333333;
  border-top: 0;
  background: #FFFFFF;
}
.select__item {
  padding: 5px 10px;
  cursor: pointer;
}
.select__item:hover {
  background: #EBEBEB;
}
.select__option {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02rem;
}
.select--disabled .select__wrapper {
  background: #D6D6D6;
  border-color: #8F8F8F;
  cursor: not-allowed;
}
.select--disabled .select__wrapper::after {
  border-color: #8F8F8F;
  opacity: 0.7;
}
.select--disabled .select__button {
  color: #8F8F8F;
  cursor: not-allowed;
}

/* 주문전표 셀렉트박스 커스텀 */
.selectBox__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.selectBox__header .selectBox__label {
  min-width: 80px;
}
.selectBox__options {
  display: none;
  position: absolute;
  background-color: #FFFFFF;
  border: 1px solid #8F8F8F;
  width: calc(100% - 20px);
  box-sizing: border-box;
  z-index: 9999;
  max-height: 200px;
  overflow-x: auto;
  text-wrap: nowrap;
}
.selectBox__list {
  display: flex;
  flex-direction: column;
}
.selectBox__item {
  padding: 3px 6px;
  cursor: pointer;
}
.selectBox__item:hover {
  background: rgba(51, 51, 51, 0.06);
}
.selectBox__item:last-child {
  margin-bottom: 0;
}
.selectBox__item--selected {
  background: rgba(51, 51, 51, 0.06);
}
.selectBox__label {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 3px 14px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #FFFFFF;
  border-radius: 2px;
}
.selectBox__label--oc {
  background-color: #007B99;
}
.selectBox__label--sh {
  background-color: #707070;
}
.selectBox__label--sr {
  background-color: #0E64C8;
}
.selectBox__label--rq {
  background-color: #7D45B7;
}
.selectBox__label--sp {
  background-color: #BC5B16;
}
.selectBox__label--sc {
  background-color: #52B833;
}
.selectBox__label--pc {
  background-color: #83CC6D;
}

/* 필터 검색 */
.filter-selectbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.filter-selectbox .search {
  flex: 1;
}

/*  다중선택 */
.autocomplete {
  position: relative;
}
.autocomplete__selected {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-height: 30px;
  height: auto;
  padding: 2px 6px;
  border: 1px solid #333333;
  border-radius: 2px;
  cursor: pointer;
}
.autocomplete__added {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 2px;
}
.autocomplete__item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 24px;
  padding: 2px 3px;
  margin-right: 4px;
  background: #EBEBEB;
  border-radius: 2px;
}
.autocomplete__handle {
  min-width: 8px;
}
.autocomplete__text {
  padding-left: 3px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.autocomplete__remove {
  width: 16px;
  min-width: 16px;
}
.autocomplete__list {
  display: none;
  position: absolute;
  z-index: 1;
  background: #FFFFFF;
  width: 100%;
  margin-top: 3px;
  border: 1px solid #333333;
  border-radius: 2px;
}
.autocomplete__option:hover {
  background: #EBEBEB;
}
.autocomplete__btn {
  width: 100%;
  padding: 6px 10px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
}
.autocomplete__input {
  width: 4px;
}
.autocomplete input[type=text].autocomplete__field {
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  transform-origin: left center;
  appearance: none;
  font-family: inherit;
}

/* 토글 스위치 버튼 */
.toggle-switch {
  display: inline-block;
  position: relative;
  width: 36px;
  height: 22px;
}
.toggle-switch__input:checked + .toggle-switch__slider {
  background-color: #B83333;
}
.toggle-switch__input:checked + .toggle-switch__slider::before {
  transform: translateX(14px);
}
.toggle-switch__slider {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #D6D6D6;
  border-radius: 34px;
  cursor: pointer;
  transition: 0.4s;
}
.toggle-switch__slider::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 14px;
  height: 14px;
  background-color: #fff;
  border-radius: 50%;
  transition: 0.4s;
}

/* 인풋 커스텀 */
.form-group__input-box:has(.custom-input) {
  display: flex;
  align-items: center;
  height: 30px;
  min-height: 30px;
  padding: 5px 58px 5px 12px;
  border: 1px solid #8F8F8F;
  border-radius: 2px;
  font-size: 1.4rem;
  font-weight: 600;
  cursor: text;
}

.form-group__input-box:has(.custom-input:focus) {
  border-color: #000000;
}

.form-group__input-box:has(.custom-input.disabled) {
  background: #EFEFEF;
  color: #8F8F8F;
  cursor: not-allowed;
}

.form-group__input-box:has(.addressFiled-modal--open) {
  height: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.custom-input {
  position: relative;
  display: flex;
  align-items: center;
  width: inherit;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  outline: none;
}
.custom-input::-webkit-scrollbar {
  display: none;
}
.custom-input__content {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
}
.custom-input__text {
  margin-left: 0.4rem;
  font-size: 1.2rem;
  color: #8F8F8F;
  letter-spacing: -0.02em;
}
.custom-input:focus {
  outline: none;
}
.custom-input .item-name[contenteditable=true] {
  border-right: solid rgba(0, 0, 0, 0) 1px;
  outline: none;
  min-height: 19px;
  padding-right: 1px;
  line-height: 20px;
}
.custom-input .item-name.t-blue {
  color: #0E64C8;
}
.custom-input .item-code {
  font-size: 1.2rem;
  font-weight: 600;
  color: #8F8F8F;
  margin-left: 5px;
}
.custom-input .item-code.t-lightBlue {
  color: #5290D8;
}

[contenteditable=true]:empty:before,
[contenteditable=false]:empty:before {
  content: attr(data-placeholder);
  display: block;
  position: absolute;
  top: 0;
  min-width: 2px;
  min-height: 6px;
  opacity: 0.35;
  font-weight: 500;
}

fieldset[disabled] .selectbox__trigger {
  color: #8F8F8F;
  background-color: #D6D6D6;
  border-color: #8F8F8F;
  cursor: not-allowed;
}
fieldset[disabled] .selectbox__trigger.selected {
  color: #8F8F8F;
}
fieldset[disabled] .selectbox__trigger::after {
  opacity: 0.5;
}
fieldset[disabled] .form-group__table .table__header .table__cell {
  background-color: #D6D6D6;
  color: #8F8F8F;
}
fieldset[disabled] .form-group__table .table__cell--input {
  background-color: #EBEBEB;
}
fieldset[disabled] .form-group__table .table__body .table__cell input[type=text] {
  color: #8F8F8F;
  background-color: #EBEBEB;
}

.form-group--inventory fieldset[disabled] .form-group__table .table__cell {
  color: #333333;
}
.form-group--inventory fieldset[disabled] .form-group__table .table__body .table__cell input[type=text] {
  color: #333333;
}

/* 드래그 중 요소 스타일 */
.sortable-fallback {
  display: none !important;
}

/* management, template 페이지 테이블 */
.table {
  position: relative;
  width: 100%;
  /*  테이블 더보기 메뉴 */
}
.table__scrollX {
  overflow-x: auto;
}
.table__tabs {
  position: relative;
  display: inline-flex;
  gap: 6px;
  flex-wrap: nowrap;
  margin: 0;
  width: 100%;
  height: 3rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  transition: all 0.3s;
  white-space: nowrap;
}
.table__tabs-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  top: -29px;
  left: 0;
  width: 100%;
  max-width: 65%;
  overflow: hidden;
  gap: 6px;
}
.table__tabs ::-webkit-scrollbar {
  display: none;
}
.table__tab {
  display: flex;
  align-items: center;
  white-space: nowrap;
  background-color: #8F8F8F;
  height: 30px;
  border: 1px solid #8F8F8F;
  border-radius: 2px 2px 0 0;
  padding: 5px 12px;
  cursor: pointer;
}
.table__tab > span {
  font-size: 14px;
  color: #FFFFFF;
}
.table__tab.hidden {
  display: none;
}
.table__tab--selected {
  background-color: #B83333;
}
.table__tab .icon {
  background-size: 15px;
  cursor: pointer;
  border: 1px solid #FFFFFF;
  border-radius: 2px;
}
.table__tab .icon#editIcon {
  margin-left: 8px;
}
.table__tab--more {
  position: relative;
  border: 1px solid #8F8F8F;
  border-radius: 2px 2px 0 0;
  background-color: #8F8F8F;
  color: #FFFFFF;
  padding: 5px 12px;
  height: 30px;
  font-size: 14px;
  cursor: pointer;
}
.table__tab--more .more__icon {
  max-width: unset;
  width: 16px;
  height: 20px;
  filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(23deg) brightness(118%) contrast(118%);
}
.table__tab--more-list {
  position: absolute;
  z-index: 1;
  padding: 6px;
  background: #FFFFFF;
  border: 1px solid #D6D6D6;
  border-radius: 3px;
  margin-top: 2px;
  max-height: 280px;
  min-width: 140px;
  overflow-y: auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.06);
}
.table__tab--more-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 1.4rem;
  min-height: 26px;
  letter-spacing: -0.02em;
  cursor: pointer;
  padding: 0 6px;
  color: #333333;
  border-radius: 2px;
}
.table__tab--more-item:hover {
  background-color: rgba(51, 51, 51, 0.06);
}
.table__inner {
  margin-top: 5px;
}
.table__inner .tabulator {
  background-color: #FFFFFF;
  border: 0;
}
.table__inner .tabulator.is-scrolling .header-cell.tabulator-frozen-left,
.table__inner .tabulator.is-scrolling .tabulator-cell.tabulator-frozen-left {
  box-shadow: 2px 0px 4px 0 rgba(0, 0, 0, 0.15);
  z-index: 2;
}
.table__inner .tabulator.is-scrolling .tabulator-calcs-top .tabulator-cell.tabulator-frozen-left {
  background: #f2f2f2;
}
.table__inner .tabulator.is-scrolling .tabulator-cell.tabulator-frozen-left {
  background: #FFFFFF;
}
.table__inner .tabulator .tabulator-header {
  border: 1px solid #8F8F8F;
  background: #D6D6D6;
}
.table__inner .tabulator .tabulator-header:has(.tabulator-calcs-holder) {
  border-bottom: 0;
}
.table__inner .tabulator .tabulator-header .tabulator-calcs-holder {
  width: 100%;
  border-top-color: #8F8F8F;
  border-bottom: 0;
}
.table__inner .tabulator .tabulator-header .tabulator-header-contents .tabulator-headers {
  display: inline-flex;
  align-items: center;
}
.table__inner .tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left {
  border-right: 1px solid #8F8F8F;
}
.table__inner .tabulator .tabulator-header .tabulator-col {
  border-color: #8F8F8F;
  background: #D6D6D6;
  height: 34px;
  color: #333333;
  font-weight: 600;
  vertical-align: baseline;
  justify-content: center;
}
.table__inner .tabulator .tabulator-header .tabulator-col.custom-checkbox-cell:has(.form-check) {
  width: 40px !important;
}
.table__inner .tabulator .tabulator-header .tabulator-col .tabulator-col-content {
  padding: 7px 10px;
}
.table__inner .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title-holder:has(.form-check) {
  height: 18px;
}
.table__inner .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  height: 100%;
}
.table__inner .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .form-check {
  position: unset;
}
.table__inner .tabulator .tabulator-header .tabulator-col .tabulator-col-content .table__add-column {
  display: flex;
  justify-content: center;
  align-items: center;
}
.table__inner .tabulator .tabulator-frozen-right {
  position: static !important;
}
.table__inner .tabulator .tabulator-tableholder {
  border: 1px solid #8F8F8F;
  border-top: 0;
}
.table__inner .tabulator .tabulator-tableholder .tabulator-placeholder[tabulator-render-mode=virtual] {
  height: calc(100vh - 468px);
}
.table__inner .tabulator .tabulator-tableholder .tabulator-placeholder[tabulator-render-mode=virtual] .tabulator-placeholder-contents {
  font-weight: 500;
  font-size: 18px;
  color: #D6D6D6;
  letter-spacing: -0.28px;
}
.table__inner .tabulator .tabulator-footer {
  border: 0;
  background-color: #FFFFFF;
  margin-top: 15px;
}
.table__inner .tabulator .tabulator-footer .tabulator-paginator {
  text-align: center;
}
.table__inner .tabulator .tabulator-footer .tabulator-pages {
  margin: 0;
}
.table__inner .tabulator .tabulator-footer .tabulator-paginator > .tabulator-page {
  text-indent: -99999px;
  white-space: nowrap;
  overflow: hidden;
  /* First 페이지 버튼에 배경 이미지 추가 */
  /* Prev 페이지 버튼에 배경 이미지 추가 */
  /* Next 페이지 버튼에 배경 이미지 추가 */
  /* Last 페이지 버튼에 배경 이미지 추가 */
}
.table__inner .tabulator .tabulator-footer .tabulator-paginator > .tabulator-page:nth-of-type(1) {
  background-image: url("../img/icon/icon_last.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  transform: rotate(180deg);
}
.table__inner .tabulator .tabulator-footer .tabulator-paginator > .tabulator-page:nth-of-type(2) {
  background-image: url("../img/icon/icon_prev.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
}
.table__inner .tabulator .tabulator-footer .tabulator-paginator > .tabulator-page:nth-of-type(3) {
  background-image: url("../img/icon/icon_next.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
}
.table__inner .tabulator .tabulator-footer .tabulator-paginator > .tabulator-page:nth-of-type(4) {
  background-image: url("../img/icon/icon_last.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
}
.table__inner .tabulator .tabulator-footer .tabulator-paginator > .tabulator-page:disabled {
  cursor: not-allowed;
}
.table__inner .tabulator .tabulator-footer .tabulator-page {
  width: 30px;
  height: 30px;
  border: 1px solid #333333;
  font-weight: 600;
  font-size: 14px;
  margin: 0 5px;
}
.table__inner .tabulator .tabulator-footer .tabulator-page:not(:disabled):hover {
  background-color: #EFEFEF;
  color: #333333;
}
.table__inner .tabulator .tabulator-footer .tabulator-page.active {
  background-color: #B83333;
  color: #FFFFFF;
  border-color: #B83333;
}
.table__inner .tabulator .tabulator-footer .tabulator-page.active:hover {
  background-color: #B83333;
  color: #FFFFFF;
}
.table__inner .tabulator .tabulator-row {
  border-bottom: 1px solid #8F8F8F;
}
.table__inner .tabulator .tabulator-row.tabulator-row-even {
  background-color: #FFFFFF;
}
.table__inner .tabulator .tabulator-row:has(input[type=checkbox].form-check__checkbox:disabled) {
  background-color: rgba(51, 51, 51, 0.06);
}
.table__inner .tabulator .tabulator-row.tabulator-selected {
  background-color: rgba(51, 51, 51, 0.06);
}
.table__inner .tabulator .tabulator-row.tabulator-selected:hover, .table__inner .tabulator .tabulator-row.tabulator-selectable:hover {
  background-color: rgba(51, 51, 51, 0.06);
  cursor: revert;
}
.table__inner .tabulator .tabulator-row .tabulator-cell {
  height: 34px;
  line-height: 30px;
  padding: 2px 10px;
  font-size: 14px;
  color: #333333;
  border-color: #8F8F8F;
  letter-spacing: -0.28px;
}
.table__inner .tabulator .tabulator-row .tabulator-cell:has(.quantity-control) {
  padding: 2px 4px;
}
.table__inner .tabulator .tabulator-row .tabulator-cell:has(.form-radio) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.table__inner .tabulator .tabulator-row .tabulator-cell:has(.form-check) {
  position: relative;
  width: 40px !important;
}
.table__inner .tabulator .tabulator-row .tabulator-cell:has(.name) {
  color: #B83333;
}
.table__inner .tabulator .tabulator-row .tabulator-cell:has(.toggle-switch) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.table__inner .tabulator .tabulator-row .tabulator-cell .name {
  color: #B83333;
  cursor: pointer;
  border-bottom: 1px solid #B83333;
}
.table__inner .tabulator .tabulator-row .tabulator-cell:last-of-type {
  border-right: 1px solid #8F8F8F;
}
.table__inner .tabulator .tabulator-row .tabulator-cell.tabulator-row-header {
  border-bottom: 0;
}
.table__inner .tabulator .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left {
  border-right: 1px solid #8F8F8F;
}
.table__inner .tabulator .tabulator-row.tabulator-calcs-top .tabulator-cell:has(.btn-more) {
  display: inline-flex;
  justify-content: unset;
  align-items: center;
}
.table__inner .tabulator .tabulator-row.tabulator-calcs-top .tabulator-cell .btn-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.table__inner .tabulator .tabulator-row.tabulator-calcs-top .tabulator-cell .btn-container .btn-more {
  margin-left: auto;
}
.table__inner .tabulator input[type=checkbox].form-check__checkbox + label {
  padding: 0;
  text-indent: -9999px;
}
.table__inner--disabled .tabulator .tabulator-row {
  background-color: #EFEFEF !important;
}
.table__inner--disabled .tabulator .tabulator-row .tabulator-cell .name {
  border-bottom: 1px solid #8F8F8F;
  color: #8F8F8F;
}
.table__inner--disabled .tabulator input[type=checkbox].form-check__checkbox:disabled + label::before {
  border-color: #8F8F8F;
  background: #D6D6D6;
  cursor: not-allowed;
}
.table__header .table__cell:has(.form-check) {
  width: 34px;
  padding: 4px 10px;
}
.table__body .table__row:first-of-type .table__cell {
  border-top: 0;
}
.table__body .table__cell {
  background: #FFFFFF;
  color: #333333;
  font-size: 14px;
  letter-spacing: -0.28px;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
  height: 34px;
  padding: 4px 10px;
  border-top: 1px solid #8F8F8F;
  border-right: 1px solid #8F8F8F;
}
.table__body .table__cell-content.error {
  color: #B83333;
}
.table__body .table__cell-content.updated {
  color: #0E64C8;
}
.table__body .table__cell > span {
  white-space: nowrap;
}
.table__body .table__cell:last-child {
  border-right: 0;
}
.table__body .table__cell:not(:has(+ .table__cell)) {
  border-right: 0;
}
.table__body .table__cell.right {
  text-align: right;
}
.table__body .table__cell.center {
  text-align: center;
}
.table__body .table__cell .table-name,
.table__body .table__cell .table__item-name,
.table__body .table__cell .payment-method__name {
  color: #B83333;
  border-bottom: 1px solid #B83333;
}
.table__body .table__cell .table-name.work-info,
.table__body .table__cell .table__item-name.work-info,
.table__body .table__cell .payment-method__name.work-info {
  cursor: pointer;
}
.table__body .table__cell:has(.form-radio) {
  padding: 2px;
}
.table__body .table__cell .table-flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
}
.table__body .table__cell:has(.quantity) {
  padding: 4px;
}
.table__body .table__cell:has(.quantity-control) {
  padding: 2px;
}
.table__body .table__cell .quantity {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.table__body .table__row--summary .table__cell {
  background: #EBEBEB;
}
.table__body .table__row--summary .table__cell.text--invalid {
  color: #B83333;
}
.table__label-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.table__label-wrap .tooltip__container {
  height: 2rem;
  margin-left: 0.2rem;
}
.table__label-wrap .tooltip__text {
  text-align: left;
}
.table .table__cell-drag {
  display: inline-flex;
  cursor: grab;
  width: 10px;
  border-radius: 2px;
}
.table .table__cell-drag > img {
  width: 100%;
}
.table .table__cell-drag:hover {
  background: rgba(51, 51, 51, 0.06);
}
.table__footer {
  height: 34px;
  color: #333333;
  line-height: 1.4;
  font-size: 14px;
}
.table__footer-cell {
  padding: 4px 10px;
  border-right: 1px solid #8F8F8F;
  vertical-align: middle;
}
.table__box {
  border: 1px solid #8F8F8F;
  margin-top: 5px;
  overflow-x: auto;
  width: 100%;
}
.table__menu {
  display: none;
  position: absolute;
  padding: 0.4rem;
  margin-top: 0.8rem;
  background: #FFFFFF;
  z-index: 100;
  width: 120px;
  border: 1px solid #D6D6D6;
  box-shadow: 0px 4px 12px 0px rgba(184, 188, 200, 0.32);
  border-radius: 3px;
}
.table__menu-item {
  padding: 0.4rem 1rem;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.3s;
}
.table__menu-item:hover {
  background-color: rgba(51, 51, 51, 0.06);
}
.table__menu-button {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  height: 20px;
}
.table__menu-button .icon {
  background-size: 20px;
  filter: invert(32%) sepia(0%) saturate(1852%) hue-rotate(313deg) brightness(95%) contrast(88%);
}
.table__menu-button .icon.arrow-up-down {
  background-size: 18px;
}
.table__menu-label {
  font-size: 1.3rem;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #555555;
}
.table__filter {
  position: absolute;
  display: none;
}
.table__filter .selectbox__options {
  box-shadow: 0px 4px 12px 0px rgba(184, 188, 200, 0.32);
  border-color: #D6D6D6;
}
.table__wrapper--selected .table {
  width: 100%;
}
.table__agreement {
  margin-top: 1rem;
}
.table__agreement input[type=checkbox].form-check__checkbox + label {
  color: #8F8F8F;
  font-size: 1.2rem;
}
.table#tagTemplateTable, .table#tagTable, .table#tagEditTable {
  min-width: 460px;
}
.table#templateColumnTable .tabulator-headers {
  width: 100%;
}
.table#templateColumnTable .tabulator-col[tabulator-field=title] {
  width: 100% !important;
}

/* 모달 테이블 */
.modal__table {
  position: relative;
  width: 100%;
  border: 1px solid #8F8F8F;
}
.modal__table:not(:has(.table__tabs-container)) {
  overflow-y: auto;
}
.modal__table--flex {
  flex: 1;
  width: 70%;
  overflow-x: auto;
}
.modal__table .table__tabs-container {
  max-width: 95%;
}
.modal__table .table__header tr {
  border-bottom: 1px solid #8F8F8F;
}
.modal__table .table__header th {
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  height: 32px;
  padding: 2px 20px;
  border-right: 1px solid #8F8F8F;
  font-size: 1.4rem;
  font-weight: 600;
  color: #333333;
  background-color: #D6D6D6;
}
.modal__table .table__header th:last-child {
  border-right: 0;
}
.modal__table .table__body .table__row.disabled {
  background: #EBEBEB;
  pointer-events: none;
}
.modal__table .table__body.disabled .table__cell {
  background-color: #E3E3E3;
  color: #8F8F8F;
  pointer-events: none;
  user-select: none;
  opacity: 0.8;
}
.modal__table .table__body.disabled .table__cell .name {
  color: #8F8F8F;
}
.modal__table .table__row--no-data {
  height: 100px;
  text-align: center;
}
.modal__table .table__row--no-data .table__cell {
  font-weight: 500;
  font-size: 16px;
  color: #D6D6D6;
  letter-spacing: -0.28px;
  border-bottom: 0;
}
.modal__table .table__row--summary .table__cell {
  font-weight: 600;
}
.modal__table .table__cell .name {
  vertical-align: middle;
  color: #B83333;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.modal__table .table__cell .btn--delete {
  vertical-align: middle;
  height: 20px;
}
.modal__table .table__cell .table__input {
  border: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  text-align: right;
  background-color: transparent;
}
.modal__table .table__cell .table__input-text {
  border: 0;
  height: 100%;
  padding: 0;
  background-color: transparent;
}
.modal__table .table__cell.table-quantity {
  min-width: 120px;
  padding: 2px 3px;
}
.modal__table .table__cell.table-quantity .quantity-control button {
  width: 28px;
  height: 28px;
  border: 1px solid #333333;
  border-radius: 2px;
}
.modal__table .table__cell.table-quantity .quantity-control button:hover {
  background-color: rgba(51, 51, 51, 0.06);
}
.modal__table .table__cell.table-quantity .quantity-control .quantity__value {
  border: 0;
  text-align: center;
  min-width: 4rem;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.4;
  background-color: transparent;
}
.modal__table .table__cell--item {
  min-width: 140px;
  padding: 2px 30px 2px 10px;
}
.modal__table .table__cell--item .table__cell-drag {
  vertical-align: middle;
  height: 21px;
  width: 10px;
  margin-right: 2px;
  cursor: grab;
}
.modal__table .table__cell:has(.btn--delete) {
  width: 32px;
  padding: 2px 6px;
}
.modal__table .table__cell:has(.btn--delete) .btn--delete .icon {
  background-size: 24px;
}
.modal__table .table__cell.disabled {
  background-color: #E3E3E3;
  color: #8F8F8F;
  pointer-events: none;
  user-select: none;
  opacity: 0.8;
}
.modal__table .table__cell.disabled input,
.modal__table .table__cell.disabled button {
  background-color: #E3E3E3 !important;
}
.modal__table .table__cell--compact {
  padding: 2px 2px 2px 6px;
}
.modal__table:has(.tabulator) {
  border: 0;
}
.modal__table#itemSelectViewTable {
  border-top: 0;
}
.modal__table #tagTable .tabulator-tableholder .tabulator-cell:not(.custom-checkbox-cell) {
  padding: 2px 38px 2px 10px;
}

/*  태그관리 네임 */
#tagManagerModal .modal__table #tagTable .tabulator-tableholder .tabulator-cell:not(.custom-checkbox-cell) {
  padding: 2px 38px 2px 10px;
}

#packageModal .packaging .modal__table {
  max-height: 220px;
}

/*  div 커스텀 테이블 */
.data-table {
  border: 1px solid #8F8F8F;
  border-radius: 2px;
}
.data-table .table {
  display: table;
  width: 100%;
  border-collapse: collapse;
}
.data-table .table .col-quantity {
  min-width: 80px;
}
.data-table .table .col-quantity .quantity-control {
  width: 100%;
  gap: 0.6rem;
}
.data-table .table .col-quantity .quantity-control label {
  flex: 1;
  width: calc(100% - 60px - 4px);
}
.data-table .table .col-number {
  min-width: 180px;
  max-width: 180px;
}
.data-table .table .col-status {
  min-width: 150px;
}
.data-table .table__heading {
  display: table-header-group;
  background: #D6D6D6;
  height: 34px;
  line-height: 27px;
}
.data-table .table__head {
  position: relative;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  border-right: 1px solid #8F8F8F;
  border-bottom: 1px solid #8F8F8F;
  padding: 3px 20px;
}
.data-table .table__head:first-child {
  border-left: none;
}
.data-table .table__head:last-child {
  border-right: none;
}
.data-table .table__head:has(.form-check) {
  border-right: 0;
  background-color: #D6D6D6;
}
.data-table .table__body {
  display: table-row-group;
}
.data-table .table__cell {
  position: relative;
  border-top: 1px solid #8f8f8f;
}
.data-table .table__cell:has(.form-check) {
  background-color: #FFFFFF;
  border-right: 0;
}
.data-table .table__cell:first-of-type {
  border-left: none;
}
.data-table .table__cell--compact {
  padding: 2px 3px 2px 7px;
}
.data-table .table__cell-drag {
  vertical-align: middle;
  height: 21px;
  width: 10px;
  margin-right: 2px;
  cursor: grab;
}
.data-table .table__cell-name {
  vertical-align: middle;
  color: #B83333;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.data-table .table__cell-info {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.4rem;
}
.data-table .table__cell-info > p {
  color: #52B833;
  cursor: pointer;
}
.data-table .table__cell-info .info--name {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.data-table .table__cell-info .info--code {
  font-size: 1.2rem;
}
.data-table .table__cell.input-error::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: 0 0 0 1.4px #B83333;
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}
.data-table .table__cell input[type=text] {
  padding: 0;
  border: 0;
  border-radius: 0;
  text-align: right;
  box-sizing: border-box;
  height: 100%;
}
.data-table .table__cell input[type=text].input__item-price, .data-table .table__cell input[type=text].input__extra-price, .data-table .table__cell input[type=text].input__fee-price, .data-table .table__cell input[type=text].input__total-price, .data-table .table__cell input[type=text].input__logistics-price, .data-table .table__cell input[type=text].input__workCost-price {
  min-width: 128px;
}
.data-table .table__cell input[type=text].quantity__value {
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 200px;
}
.data-table .table__cell.disabled {
  background-color: #E3E3E3;
  color: #8F8F8F;
  pointer-events: none;
  user-select: none;
  opacity: 0.8;
}
.data-table .table__cell.disabled input {
  background-color: #E3E3E3 !important;
  color: initial;
}
.data-table .table__cell:has(.table__info).disabled {
  pointer-events: unset;
  user-select: unset;
}
.data-table .table__row {
  display: table-row;
}
.data-table .table__row--empty {
  cursor: pointer;
}
.data-table .table__row--summary {
  font-weight: 600;
  text-align: right;
}
.data-table .table__row--summary .table__cell:first-child {
  position: sticky;
  min-width: 35px;
  width: 35px;
  padding: 0;
  left: 0;
  z-index: 2;
  border-right: 0;
  background: #EBEBEB;
}
.data-table .table__row--summary .table__cell:first-child::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background: #8F8F8F;
  pointer-events: none;
}
.data-table .table__input.text--invalid {
  color: #B83333 !important;
}
.data-table .table__head, .data-table .table__cell {
  display: table-cell;
  white-space: nowrap;
}
.data-table .table__head:has(.form-check), .data-table .table__cell:has(.form-check) {
  position: sticky;
  left: 0;
  min-width: 35px;
  width: 35px;
  padding: 0;
  opacity: inherit;
  z-index: 2;
}
.data-table .table__head:has(.form-check)::after, .data-table .table__cell:has(.form-check)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background: #8F8F8F;
  pointer-events: none;
}
.data-table .table__head:nth-child(2), .data-table .table__cell:nth-child(2) {
  min-width: 250px;
}
.data-table .table .form-check input[type=checkbox].form-check__checkbox + label::before {
  left: 50%;
  transform: translate(-50%, -50%);
}
.data-table .table .icon__search {
  width: 26px;
}
.data-table .table#inventoryMovementItemTable .table__cell.disabled input, .data-table .table#inventoryAdjustmentItemTable .table__cell.disabled input {
  color: #1F1F1F;
}
.data-table__footer {
  height: 34px;
  background-color: #FFFFFF;
  cursor: pointer;
  border-top: 1px solid #8F8F8F;
}
.data-table__add-row {
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 35px;
}
.data-table__add-row:hover {
  background: rgba(51, 51, 51, 0.06);
}
.data-table__add-row-button {
  display: flex;
  align-items: center;
  position: sticky;
  left: 35px;
  z-index: 2;
}
.data-table__add-row-button > i.icon.add-gray {
  background-size: 18px;
}
.data-table__add-row-button > span {
  color: #8F8F8F;
}
.data-table.orderItemTable .table__row > div:nth-last-child(-n+4) {
  min-width: 130px;
}
.data-table.disabled {
  cursor: not-allowed;
}
.data-table.disabled input, .data-table.disabled button {
  pointer-events: none;
}
.data-table.disabled .table__head {
  cursor: not-allowed;
  pointer-events: none;
}
.data-table.disabled .table__cell,
.data-table.disabled .data-table__footer {
  cursor: not-allowed;
  pointer-events: none;
  background: #EBEBEB;
}
.data-table.is-scrolling .table__head:has(.form-check)::before,
.data-table.is-scrolling .table__cell:has(.form-check)::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  box-shadow: 2px 0px 4px 0 rgba(0, 0, 0, 0.15);
  pointer-events: none;
  transition: all 0.3s;
}
.data-table.is-scrolling .table__row--summary .table__cell:first-child::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  box-shadow: 2px 0px 4px 0 rgba(0, 0, 0, 0.15);
  pointer-events: none;
  transition: all 0.3s;
}

#excelUploadModal .data-table {
  overflow-y: hidden;
}

div[data-name=dispatchItems] .table__row > .col-quantity,
div[data-name=dispatchOutItems] .table__row > .col-quantity {
  min-width: 150px;
  width: 150px;
  max-width: 150px;
}

/*  주문전표 > 품목정보 날짜 영역 */
.reservation__date {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.reservation__date .datepicker__btn {
  order: 1;
}
.reservation__date .datepicker__text {
  order: 0;
  font-size: 14px;
  color: #333333;
}

/*  테이블 컬럼 버튼 */
.options-menu .btn--icon .icon {
  background-size: 22px;
}
.options-menu .btn--icon .icon.change, .options-menu .btn--icon .icon.return {
  background-size: 24px;
}

/*  모달 테이블 내 텍스트 공통 스타일 */
.table__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}
.table__info-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  flex: 1;
  width: max-content;
}
.table__info-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}
.table__info-right .btn--reset {
  width: 20px;
  height: 20px;
}
.table__info-name {
  font-size: 14px;
  font-weight: 600;
  text-wrap: auto;
}
.table__info-name .tag-name {
  display: block;
  width: 100%;
  max-width: 380px;
  text-wrap: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.table__info-name.custom-input {
  flex: 1;
}
.table__info-sub {
  font-size: 12px;
  color: #8F8F8F;
  font-weight: 600;
  margin-left: 4px;
}

/*  페이지네이션 */
.pagination {
  margin-top: 2rem;
}
.pagination--wrapper, .pagination__numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
}
.pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid #333333;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 600;
}
.pagination__btn.active {
  background-color: #B83333;
  color: #FFFFFF;
  border-color: #B83333;
}
.pagination__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 모달 내 공통 */
.form-group {
  margin-top: 1rem;
  min-height: 3rem;
}
.form-group__label {
  min-width: 120px;
}
.form-group__label--sm {
  min-width: 80px;
}
.form-group__label-text {
  font-size: 1.4rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #333333;
}
.form-group__label .tooltip__container {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: bottom;
}
.form-group__label .tooltip__container button {
  height: 100%;
  height: 100%;
}
.form-group__label .tooltip__container .tooltip__text {
  min-width: 14rem;
  line-height: 1.4;
}
.form-group__content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  min-height: 3rem;
}
.form-group__content.start {
  align-items: flex-start;
}
.form-group__content:has(.form-group__error) {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.form-group__content:has(.form-group__error) .form-group__label {
  margin-top: 0.6rem;
}
.form-group__content:has(.form-group__error):has(.data-table) {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.form-group__content.datepicker__option {
  margin-top: 1rem;
}
.form-group__content.datepicker__option .reservation__date {
  border: 1px solid #8F8F8F;
  border-radius: 2px;
  padding-left: 13px;
}
.form-group__content.datepicker__option .reservation__date .datepicker {
  padding: 0;
  height: 100%;
  transform: none;
  margin-right: 0;
  width: 100%;
}
.form-group__content.datepicker__option .reservation__date,
.form-group__content.datepicker__option .datepicker-container,
.form-group__content.datepicker__option .datepicker__field {
  width: 100%;
}
.form-group__body {
  width: calc(100% - 120px - 10px);
}
.form-group__input {
  position: relative;
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.form-group__input-wrapper {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.form-group__input-wrapper input.datepicker {
  border: 1px solid #8F8F8F;
}
.form-group__input-wrapper input.datepicker:focus, .form-group__input-wrapper input.datepicker:focus-visible {
  border-color: #000000;
}
.form-group__input-wrapper:has(.selectbox--relatedPages) {
  width: 100%;
}
.form-group__input-wrapper .selectbox {
  width: 100%;
}
.form-group__input-wrapper .selectbox__trigger {
  border-color: #8F8F8F;
  height: 3rem;
  color: rgba(143, 143, 143, 0.6);
}
.form-group__input-wrapper .selectbox__trigger.selected {
  color: #333333;
}
.form-group__input-wrapper .selectbox__trigger::after {
  border-color: #8F8F8F;
}
.form-group__input-wrapper .selectbox__options, .form-group__input-wrapper .selectbox__option {
  border-color: #8F8F8F;
}
.form-group__input-wrapper .selectbox--period {
  width: auto;
}
.form-group__input-wrapper.product-control {
  border: 1px solid #8F8F8F;
  border-top: 0;
  background: #FFFFFF;
  gap: 0;
  padding-left: 1.2rem;
}
.form-group__input-wrapper.product-control:has(.btn--delete) {
  padding-left: 0;
}
.form-group__input-wrapper.product-control .btn--delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  min-width: 3rem;
  height: 3rem;
  border-right: 1px solid #8F8F8F;
}
.form-group__input-wrapper.product-control .btn--delete .icon {
  background-size: 24px;
}
.form-group__input-wrapper:has(.form-group__input-field--select)::after {
  content: "";
  position: absolute;
  right: 0;
  width: 30px;
  height: 30px;
  border-left: 1px solid #8F8F8F;
  cursor: pointer;
  background-image: url("../img/icon/icon_greater_down.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px;
}
.form-group__input-container {
  position: relative;
  width: 100%;
}
.form-group__input-container .timer {
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  font-size: 1.3rem;
  font-weight: 600;
}
.form-group__input > div {
  flex: 1 1 auto;
  width: 100%;
}
.form-group__input > div.form-group__tag-area .form-group__input-wrapper:not(:first-of-type) input {
  border-top: 0;
  border-radius: 0 0 2px 2px;
  height: calc(30px * 1.1429);
  margin-bottom: calc(30px - 30px * 1.1429);
}
.form-group__input > div.modal__table {
  border-top: 0;
}
.form-group__input-img {
  position: relative;
}
.form-group__input-img::after {
  content: "";
  width: 1px;
  height: 30px;
  background-color: #8F8F8F;
  position: absolute;
  right: 30px;
}
.form-group__input-img .clear-icon {
  right: 35px;
}
.form-group__input-img label {
  width: 100%;
}
.form-group__input-img .form-group__input-box input[type=text] {
  padding: 5.71px 48px 5.71px 12.71px;
}
.form-group__input-icon {
  position: absolute;
  right: 0;
  top: 50%;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  display: inline-block;
  padding: 4px;
  cursor: pointer;
}
.form-group__input-field--textarea {
  height: calc(200px * 1.1429);
  margin-bottom: calc(200px - 200px * 1.1429) !important;
  resize: none;
}
@media screen and (max-width: 767px) {
  .form-group__input-field--textarea {
    height: calc(100px * 1.1429);
    margin-bottom: calc(100px - 100px * 1.1429);
    resize: none;
  }
}
.form-group__input-field--readonly {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border: 1px solid #8F8F8F;
  padding: 0 12px;
  font-size: 1.4rem;
  font-weight: 600;
}
.form-group__input-field--readonly .form-group__input-price {
  margin-left: 0.6rem;
  font-size: 1.2rem;
  color: #8F8F8F;
}
.form-group__input-box {
  width: 100%;
  background: #FFFFFF;
}
.form-group__input-box input[type=text],
.form-group__input-box input[type=email],
.form-group__input-box input[type=password] {
  height: calc(30px * 1.1429);
  margin-bottom: calc(30px - 30px * 1.1429);
  padding: 5.71px 32px 5.71px 12.71px;
}
.form-group__input-box:has(.datepicker) {
  position: relative;
}
.form-group__input-box .weekday-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 94px;
  font-size: 12px;
  font-weight: 600;
  color: #8F8F8F;
  cursor: text;
}
.form-group__input-text {
  text-decoration: underline;
}
.form-group__input-address .form-group__input-icon {
  top: 0;
  transform: unset;
  border-bottom: 1px solid #8F8F8F;
}
.form-group__input-address.form-group__input-img::after {
  top: 0;
}
.form-group__input-address .clear-icon {
  top: 15px;
}
.form-group__input-value {
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #333333;
  font-weight: 400;
}
.form-group__input .result-list__item {
  position: relative;
}
.form-group__input .result-list__item::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  background: #333333;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 100%;
}
.form-group__input .result-list__item .form-group__input-value {
  padding-left: 1rem;
  margin-bottom: 0.2rem;
}
.form-group__input-link {
  font-size: 1.4rem;
  text-decoration: underline;
}
.form-group__input:has(.selectbox) {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.form-group__input:has(.table__scrollX) {
  width: 70%;
}
.form-group__input.disabled {
  pointer-events: none;
}
.form-group__input.disabled input,
.form-group__input.disabled .form-group__input-wrapper {
  background-color: #D6D6D6;
}
.form-group__input.disabled .form-group__item-code-text {
  color: #8F8F8F;
}
.form-group__input.disabled .quantity-control,
.form-group__input.disabled .form-group__input-icon {
  opacity: 0.6;
}
.form-group__input.disabled .table .table__row {
  background-color: #D6D6D6;
}
.form-group__input.disabled .table .table__cell {
  color: #8F8F8F;
}
.form-group__input.disabled .table .table__cell button {
  opacity: 0.6;
}
.form-group--inventory .form-group__input-wrapper {
  justify-content: flex-start;
}
.form-group--inventory .form-group__input-wrapper .item-code {
  font-size: 1.2rem;
  font-weight: 400;
  color: #8F8F8F;
}
.form-group__text {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  text-wrap-mode: nowrap;
}
.form-group__text.error {
  border-color: #B83333;
}
.form-group__text.code__display, .form-group__text.date-text {
  line-height: 3rem;
}
.form-group__text-field {
  border: 1px solid #8F8F8F;
  border-top: 0;
  width: 100%;
  padding: 5.71px 12.71px;
  height: 3rem;
}
.form-group__text-sub {
  font-size: 12px;
  font-weight: 400;
  color: #8F8F8F;
}
.form-group__error {
  display: none;
}
.form-group__error-text {
  position: relative;
  font-size: 1.3rem;
  color: #B83333;
  letter-spacing: -0.02em;
  line-height: 1.9rem;
  margin-top: 0.4rem;
  padding-left: 1.8rem;
}
.form-group__error-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("../img/icon/icon_error.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  display: inline-block;
  width: 1.8rem;
  height: 1.8rem;
  vertical-align: middle;
}
.form-group__error-text.sm {
  font-size: 1.2rem;
}
.form-group__success-text {
  position: relative;
  font-size: 1.3rem;
  color: #52B833;
  letter-spacing: -0.02em;
  line-height: 1.9rem;
  margin-top: 0.4rem;
  padding-left: 1.8rem;
}
.form-group__success-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("../img/icon/icon_alert_success.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  display: inline-block;
  width: 1.8rem;
  height: 1.8rem;
  vertical-align: middle;
}
.form-group__message {
  display: none;
}
.form-group__message-text {
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  margin-top: 0.4rem;
}
.form-group__message-text.error {
  color: #B83333;
}
.form-group__message-text.error::before {
  content: "";
  background-image: url("../img/icon/icon_error.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 4px;
}
.form-group__message-text.success {
  color: #52B833;
}
.form-group__info {
  display: none;
}
.form-group__info-text {
  font-size: 1.3rem;
  color: #52B833;
  letter-spacing: -0.02em;
  margin-top: 0.4rem;
}
.form-group__info-text::before {
  content: "";
  background-image: url("../img/icon/icon_error.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  filter: invert(58%) sepia(47%) saturate(603%) hue-rotate(61deg) brightness(93%) contrast(103%);
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 4px;
}
.form-group__price {
  font-size: 1.4rem;
}
.form-group__textarea-field {
  width: 100%;
  height: calc(32px * 1.1429);
  min-height: 32px;
  line-height: 1.4;
  resize: none;
  padding: 5px 12px;
  transform-origin: left center;
}
.form-group__list {
  width: 100%;
  border: 1px solid #8F8F8F;
  border-radius: 2px;
}
.form-group__list-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 5px 12px;
  border-bottom: 1px solid #8F8F8F;
}
.form-group__list-item:last-of-type {
  border-bottom: 0;
}
.form-group__item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex: 1;
}
.form-group__item:not(:has(.form-group__box-drag)) {
  padding-left: 1.2rem;
}
.form-group__item-code-text {
  display: inline-block;
  font-size: 1.4rem;
  text-decoration: underline;
  font-weight: 600;
}
.form-group__item-details {
  font-size: 1.2rem;
  font-weight: 600;
  color: #8F8F8F;
  margin-left: 5px;
}
.form-group__more-link {
  font-size: 1.2rem;
  font-weight: 600;
  color: #8F8F8F;
  text-decoration: underline;
  cursor: pointer;
}
.form-group__box {
  padding: 1rem 1rem 0;
  margin: 1rem 0;
  background-color: #F5F5F5;
  border: 1px solid #D6D6D6;
  border-radius: 2px;
}
.form-group__box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.form-group__box-header .form-group__delete-btn .icon {
  background-size: 22px;
}
.form-group__box-body {
  display: block;
  max-height: max-content;
  padding-bottom: 1.6rem;
  transition: max-height 0.3s ease;
  overflow: hidden;
}
.form-group__box-toggle {
  width: 2.6rem;
  height: 2.6rem;
}
.form-group__box-title {
  flex: 1;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0.5rem;
}
.form-group__box-drag {
  cursor: grab;
  margin-left: 0.2rem;
}
.form-group__box-drag .form-group__icon {
  width: 1.4rem;
  height: 2rem;
}
.form-group__box.collapsed .form-group__box-toggle {
  transform: rotate(180deg);
}
.form-group__box.collapsed .form-group__box-body {
  max-height: 0;
  padding-bottom: 1rem;
}
.form-group__table {
  width: 100%;
  border: 1px solid #8F8F8F;
  box-sizing: border-box;
}
.form-group__table .table__header,
.form-group__table .table__body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.form-group__table .table__header {
  border-bottom: 1px solid #8F8F8F;
}
.form-group__table .table__cell {
  flex: 1;
  height: 3rem;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  box-sizing: border-box;
}
.form-group__table .table__cell--header {
  border-right: 1px solid #8F8F8F;
  background-color: #D6D6D6;
  padding: 0.5rem 1.2rem;
  font-weight: 600;
}
.form-group__table .table__cell--header:last-child {
  border-right: 0;
}
.form-group__table .table__cell--input {
  padding: 1px;
  border-right: 1px solid #8F8F8F;
  border-top: 0;
}
.form-group__table .table__cell--input input[type=text] {
  padding: 0 1.2rem;
  border: 0;
  border-radius: 0;
  text-align: right;
  box-sizing: border-box;
}
.form-group__table .table__cell--input:last-child {
  border-right: 0;
}
.form-group__btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.form-group__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.form-group__status-message {
  padding: 0.5rem 1rem;
  font-size: 1.4rem;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  border-radius: 2px;
}
.form-group__preview-container {
  width: 160px !important;
  max-height: 160px;
  margin-top: 1rem;
}
@media screen and (max-width: 767px) {
  .form-group {
    margin-top: 1rem;
  }
  .form-group__content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
}
.form-group .timer {
  position: absolute;
  top: 50%;
  right: 30px;
  font-size: 1.2rem;
  transform: translateY(-50%);
  letter-spacing: -0.02em;
}

.form-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.form-container--credit-card {
  margin-top: 0;
}

/* 쇼핑몰 연동관리 > 수집처 박스 */
.action-box {
  background: #EBEBEB;
  border: 1px solid #8F8F8F;
  padding: 1rem;
}
.action-box > div {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.action-box__body {
  margin-top: 1rem;
}
.action-box__body .form-group__input-wrapper {
  width: 100%;
}
.action-box__title {
  display: inline-block;
  min-width: 13rem;
  font-size: 1.4rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #333333;
}

/* 모달 내 기준일자 */
.datepicker-group__body {
  width: 100%;
}
.datepicker-group .datepicker-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* 태그 */
.tag-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  gap: 2px;
  margin-top: 10px;
}
.tag-list__items {
  width: 100%;
}
.tag-list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px;
  border-radius: 2px;
  position: relative;
}
.tag-list__label {
  font-size: 1.4rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #333333;
  flex: 1;
}
.tag-list .tag-select {
  width: 100%;
}
.tag-list .tag-select__label {
  font-size: 1.3rem;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #8F8F8F;
}
.tag-list--selected {
  border-bottom: 1px solid #D6D6D6;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.tag-list__more {
  position: absolute;
  z-index: 1;
  background: white;
  border: 1px solid #efefef;
  width: 120px;
  top: 37px;
  right: -85px;
  padding: 4px;
  border-radius: 3px;
  box-shadow: 0 10px 14px rgba(0, 0, 0, 0.06), 0 14px 32px rgba(0, 0, 0, 0.12);
}
.tag-list__more .tag-menu__item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 1.4rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #333333;
  gap: 2px;
  padding: 4px 6px;
  cursor: pointer;
}
.tag-list__more .tag-menu__item:hover {
  background-color: rgba(0, 0, 0, 0.03);
}
.tag-list__more .tag-menu__item .pencil-black {
  background-size: 18px;
}
.tag-list__more .tag-menu__item--delete {
  filter: invert(25%) sepia(61%) saturate(1853%) hue-rotate(334deg) brightness(65%) contrast(95%);
  color: #B83333;
}
.tag-list__more .tag-menu__item--delete:hover {
  background-color: rgba(184, 51, 51, 0.03);
}
.tag-list__more .more {
  width: 24px;
  height: 24px;
}
.tag-list__more .more:hover {
  background-color: rgba(36, 42, 48, 0.04);
}

/* 우측 사이드 모달 */
.side-modal {
  position: fixed;
  width: 100dvw;
  height: 100dvh;
  z-index: 3001;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
.side-modal__inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 40%;
  height: 100vh;
  background: #fff;
  transition: transform 0.25s ease-out;
  transform: translateX(100%);
  float: right;
  box-shadow: 0 0 0 0 rgba(36, 42, 48, 0), 0 24px 36px 0 rgba(36, 42, 48, 0.4);
}
.side-modal__inner > * {
  width: 100%;
}
.side-modal__inner.open {
  transform: translateX(0);
}
.side-modal__inner.close {
  transform: translateX(100%);
}
.side-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid #EFEFEF;
}
.side-modal__header h3 {
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #333333;
}
@media screen and (max-width: 767px) {
  .side-modal__header h3 {
    font-size: 1.8rem;
  }
}
.side-modal__header-right {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.side-modal__header-right .tooltip__wrap {
  gap: 8px;
}
.side-modal__header-right .tooltip__wrap .tooltip__btn:last-of-type .icon {
  background-size: 18px;
}
.side-modal__body {
  height: calc(100dvh - 59px - 63px);
  overflow-x: auto;
  padding: 12px 24px 20px;
  justify-content: start;
}
.side-modal__bottom {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 14px 24px;
  gap: 8px;
  border-top: 1px solid #EFEFEF;
}
.side-modal__bottom:has(.reset-btn) {
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .side-modal__inner {
    width: 80%;
  }
  .side-modal__header {
    padding: 1.3rem 1.5rem;
  }
  .side-modal__header h3 {
    font-size: 1.6rem;
  }
  .side-modal__body {
    padding: 1.5rem 0.5rem 1.5rem 1.5rem;
  }
}

/* 권한편집 */
.permission-form__table-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-bottom: 1px solid #F5F5F5;
}
.permission-form__header-title {
  min-width: 95px;
  padding: 1rem 2rem;
  font-size: 1.4rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02rem;
}
.permission-form__group {
  padding: 0 0 0.2rem 1rem;
  border-bottom: 1px solid #F5F5F5;
}
.permission-form__group:last-child {
  border-bottom: 0;
}
.permission-form__group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4rem;
}
.permission-form__group-title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 1.4rem;
  min-width: 230px;
  line-height: 1.4;
  letter-spacing: -0.02rem;
  cursor: pointer;
}
.permission-form__group-title > span {
  margin-left: 1rem;
}
.permission-form__group-all .permission-form__group-title span {
  margin-left: 30px;
}
.permission-form__group-checkboxes {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.permission-form__group-checkboxes .form-check {
  min-width: 95px;
  text-align: center;
}
.permission-form__group-checkboxes input[type=checkbox].form-check__checkbox + label {
  text-indent: -9999px;
  padding: 0 9px;
  line-height: 1.2;
}
.permission-form__group-checkboxes input[type=checkbox].form-check__checkbox + label::before {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.permission-form__group.active .toggle-arrow .icon {
  transform: rotate(-180deg);
}
.permission-form__group.active .permission-form__items {
  max-height: 300px;
}
.permission-form__items {
  padding-left: 40px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.permission-form__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 3rem;
}
.permission-form__item-title {
  font-size: 1.4rem;
  line-height: 1.4;
  letter-spacing: -0.02rem;
  color: #707070;
}
.permission-form__item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 3rem;
}
.permission-form__sub-items .permission-form__item-content {
  padding-left: 2rem;
}

.modal {
  position: fixed;
  width: 100vw;
  height: 100dvh;
  z-index: 3002;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
  /* 전표 히스토리 모달 */
  /* 컨펌 모달 */
  /* 모달 내 댓글 영역 */
  /* 템플릿 모달 */
}
.modal--sm .modal__inner {
  width: 480px;
}
@media screen and (max-width: 767px) {
  .modal--sm .modal__inner {
    width: 90%;
  }
}
.modal--sl .modal__inner {
  width: 560px;
}
.modal--md .modal__inner {
  width: 640px;
}
@media screen and (max-width: 767px) {
  .modal--md .modal__inner {
    width: 90%;
  }
}
.modal--md2 .modal__inner {
  width: 720px;
}
.modal--ml .modal__inner {
  width: 50%;
}
.modal--lg .modal__inner {
  width: 60%;
}
.modal--xlg .modal__inner {
  width: 70%;
}
.modal--xxlg .modal__inner {
  width: 85%;
}
.modal__inner {
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  min-width: 340px;
  max-height: calc(100% - 40px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 3px;
  box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 767px) {
  .modal__inner {
    min-width: 270px;
    width: 90%;
  }
}
.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin: 32px 0 16px;
  padding: 0 32px;
}
.modal__header-content .modal__description {
  margin-top: 1rem;
}
.modal__title {
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #333333;
}
@media screen and (max-width: 767px) {
  .modal__title {
    font-size: 1.8rem;
  }
}
.modal__title-sub {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #8F8F8F;
}
.modal__tabs {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 1rem;
  height: 30px;
  padding: 0 10px;
  margin: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  transition: all 0.3s;
  white-space: nowrap;
}
.modal__tab {
  display: flex;
  align-items: center;
  white-space: nowrap;
  background-color: #8F8F8F;
  height: 30px;
  border: 1px solid #8F8F8F;
  border-radius: 2px 2px 0 0;
  padding: 5px 12px;
  font-size: 1.4rem;
  color: #FFFFFF;
  font-weight: 500;
  cursor: pointer;
}
.modal__tab.active {
  background-color: #B83333;
}
.modal__body {
  padding: 4px 32px 40px;
  flex-grow: 1;
  overflow-y: auto;
}
.modal__body .search {
  width: 100%;
}
.modal__body .address-list .pagination {
  margin-top: 1rem;
}
.modal__body .address-list__hint {
  margin: 1rem 0 2rem;
  padding: 2.4rem;
  border: 1px solid #8F8F8F;
}
.modal__body .address-list__hint-title {
  font-size: 1.6rem;
}
.modal__body .address-list__hint-description {
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  margin-top: 0.4rem;
}
.modal__body .address-list__hint-list {
  margin-top: 1.4rem;
}
.modal__body .address-list__hint-item + * {
  padding-top: 0.4rem;
}
.modal__body .address-list__hint-combination {
  font-size: 1.4rem;
  line-height: 1.4;
  color: #333333;
}
.modal__body .address-list__hint-example {
  display: block;
  font-size: 1.3rem;
  line-height: 1.8;
  color: #B83333;
}
.modal__body .address-list__item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  border: 1px solid #8F8F8F;
  margin-top: 1rem;
  cursor: pointer;
}
.modal__body .address-list__item--selected {
  background: rgba(51, 51, 51, 0.06);
}
.modal__body .address-list__postal-code {
  color: #8F8F8F;
  font-weight: 600;
  font-size: 1.2rem;
}
.modal__body .address-list__postal-code-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 100%;
  padding: 0 4px;
  border-right: 1px solid #D6D6D6;
  text-align: center;
  grid-column: 1;
  grid-row: span 2;
}
.modal__body .address-list__primary, .modal__body .address-list__secondary {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.8;
  cursor: pointer;
  grid-column: 2;
  padding: 6px;
}
.modal__body .address-list__primary:hover, .modal__body .address-list__secondary:hover {
  background: rgba(51, 51, 51, 0.06);
}
.modal__body .address-list__primary {
  grid-row: 1;
}
.modal__body .address-list__secondary {
  grid-row: 2;
  border-top: 1px solid #D6D6D6;
}
.modal__body .address-list__badge {
  display: inline-block;
  min-width: 38px;
  height: 18px;
  line-height: 18px;
  margin-right: 6px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-align: center;
  background-color: #E3E3E3;
  border-radius: 2px;
  color: #707070;
}
.modal__body .address-detail {
  margin-top: 2.4rem;
}
.modal__body.nonScroll {
  overflow: unset;
  min-height: 80px;
  padding: 4px 24px 20px;
}
.modal__body:has(.settings) {
  padding: 0;
  border-top: 1px solid #D6D6D6;
}
.modal__list-wrap {
  margin-top: 1rem;
}
.modal__list-wrap .checkbox-agreement {
  margin-top: 2rem;
}
.modal__table--selected-title {
  font-size: 1.4rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #333333;
  margin: 1.4rem 0;
}
.modal__table .table__inner .tabulator .tabulator-header .tabulator-col:last-of-type,
.modal__table .table__inner .tabulator .tabulator-row .tabulator-cell:last-of-type {
  border-right: 0;
}
.modal__table .table__inner .tabulator .tabulator-tableholder {
  max-height: 100% !important;
  height: 260px !important;
}
.modal__table .table__inner .tabulator .tabulator-tableholder .tabulator-placeholder[tabulator-render-mode=virtual] {
  height: 240px;
}
.modal__select--header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.modal__select--title {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.4;
}
.modal__select--content {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
}
.modal__select--content .form-group__label {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
}
.modal__select--content .btn--icon {
  visibility: hidden;
  opacity: 0;
}
.modal__select--content .btn--icon .pencil-black {
  background-size: 22px;
}
.modal__select--content .form-group__content.active .btn--icon {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s;
}
.modal__controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2rem;
}
.modal__controls-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.modal__controls .search {
  width: calc(45% * 1.1429);
}
.modal__controls--spaced {
  margin-bottom: 4rem;
}
.modal__description {
  font-size: 1.4rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #8F8F8F;
}
.modal__description.black {
  color: #8F8F8F;
}
.modal__description--sub {
  margin-top: 8px;
  color: #8F8F8F;
}
.modal__description--sub p {
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 4px;
}
.modal__description--sub p span {
  color: #B83333;
}
.modal__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-top: 1px solid #D6D6D6;
}
.modal__footer > div {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  gap: 8px;
}
.modal__footer > div.form-check {
  position: relative;
  justify-content: start;
}
.modal__footer > div.form-check input[type=checkbox].form-check__checkbox + label {
  font-size: 1.4rem;
  padding-left: 24px;
}
.modal__footer > div.form-check input[type=checkbox].form-check__checkbox + label::before {
  width: 14px;
  height: 14px;
}
.modal__history-list--header {
  border-bottom: 1px solid #EFEFEF;
  margin-top: 1rem;
  color: #8F8F8F;
}
.modal__history-list--body {
  max-height: 400px;
  overflow-y: auto;
}
.modal__history-date {
  min-width: 16rem;
}
.modal__history-user {
  width: 6rem;
}
.modal__history-content {
  min-width: 26rem;
}
.modal__history-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1.2rem;
  font-size: 1.4rem;
}
.modal__history-item > * {
  padding: 0.6rem 0;
  border-right: 1px solid #EFEFEF;
}
.modal__history-item > *:last-child {
  border-right: 0;
}
.modal--confirm .modal__inner {
  box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.1);
}
.modal--confirm .modal__inner .modal__body {
  padding: 24px;
}
.modal--confirm .modal__inner .modal__title {
  font-size: 1.8rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #333333;
}
@media screen and (max-width: 767px) {
  .modal--confirm .modal__inner .modal__title {
    font-size: 1.8rem;
  }
}
.modal--confirm .modal__inner .modal__description {
  font-size: 1.4rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #8F8F8F;
  margin-top: 10px;
}
.modal--confirm .modal__inner .modal__footer {
  border-top: 0;
  justify-content: flex-end;
  gap: 8px;
}
.modal-comments {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #D6D6D6;
}
.modal-comments__form {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.modal-comments__profile {
  width: 3rem;
  height: 3rem;
  border-radius: 4px;
}
.modal-comments__profile-img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 4px;
  color: #FFFFFF;
  font-size: 1.2rem;
}
.modal-comments__list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1.4rem;
}
.modal-comments__comment {
  background: #F7F7F7;
  width: 100%;
  padding: 1.2rem;
  letter-spacing: -0.02em;
  border-radius: 2px;
}
.modal-comments__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-comments__content-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.8rem;
}
.modal-comments__content-right {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
}
.modal-comments__content-right .icon {
  background-size: 20px;
}
.modal-comments__author {
  font-weight: 600;
  font-size: 1.4rem;
}
.modal-comments__meta {
  font-size: 1.2rem;
  color: #8F8F8F;
}
.modal-comments__text {
  font-size: 1.4rem;
  margin-left: 3.8rem;
  margin-top: 0.4rem;
}
.modal-comments__reply-wrap {
  padding-left: 3rem;
  margin-top: 1.4rem;
}
.modal-comments__reply + * {
  margin-top: 1rem;
}
.modal-comments__input-wrap {
  flex: 1;
}
.modal--template .modal__header {
  margin: 20px 0 16px;
  padding: 0 20px;
}
.modal--template .modal__body {
  padding: 4px 24px 40px 24px;
}
.modal--template .modal__body--padded {
  padding: 4px 24px 0 24px;
}
.modal--template .modal__body--padded .list {
  padding-bottom: 20px;
}
.modal--template .modal__body:has(.settings) {
  padding: 0;
}
.modal--template.modal--bulk-change .modal__body {
  padding: 14px 24px 40px 24px;
}
.modal.z-index-low {
  z-index: 3003;
}
.modal.z-index-medium {
  z-index: 3004;
}
.modal.z-index-high {
  z-index: 3005;
}

/* 설정 모달 */
.modal-setting .modal__inner {
  width: 830px;
  height: 730px;
}
.modal-setting .modal__header {
  align-items: center;
  margin: 20px 0 16px;
  padding: 0 20px;
}
.modal-setting .modal__body {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  height: calc(100% - 55px);
  padding: 0;
  border-bottom: 1px solid #D6D6D6;
}
.modal-setting .modal__menu {
  width: 23rem;
}
.modal-setting .modal__menu-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4rem;
  padding: 5px 10px 5px 20px;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.modal-setting .modal__menu-item--active .icon {
  transform: rotate(-180deg);
}
.modal-setting .modal__menu-item--active .modal__submenu {
  max-height: 30rem;
}
.modal-setting .modal__submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.modal-setting .modal__submenu-item {
  position: relative;
}
.modal-setting .modal__submenu-item.active {
  background-color: rgba(51, 51, 51, 0.06);
}
.modal-setting .modal__submenu-item.active::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 100%;
  background-color: #B83333;
  position: absolute;
  left: 0;
}
.modal-setting .modal__submenu-link {
  display: block;
  padding: 0.5rem 0 0.5rem 3rem;
  height: 3rem;
  color: #707070;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.modal-setting .modal__content {
  width: 600px;
  height: 100%;
  padding: 2rem;
  border-left: 1px solid #D6D6D6;
}
.modal-setting .modal__content-title {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.4;
}
.modal-setting .modal__content-description {
  font-size: 1.2rem;
  font-weight: 600;
  color: #8F8F8F;
  line-height: 1.4;
  letter-spacing: -0.02rem;
  margin: 0.5rem 0;
}
.modal-setting .modal__content-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-setting .selectbox-group {
  padding-bottom: 1rem;
}
.modal-setting .selectbox-group-wrap > div {
  border-top: 1px solid #333333;
  padding-top: 1rem;
}
.modal-setting .selectbox-group-wrap > div:first-of-type {
  border-top: 0;
}
.modal-setting .selectbox-group__criteria {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.modal-setting .selectbox-group__label {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.04em;
  min-width: 13rem;
}

/* alert */
.alert {
  color: #333333;
  padding: 9px 12px;
  border-radius: 4px;
  opacity: 0;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  overflow: hidden;
}
.alert__container {
  position: fixed;
  top: 0;
  left: 50%;
  min-width: 300px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: translateX(-50%);
}
.alert.show {
  opacity: 1;
  transform: translateY(20px);
}
.alert.hide {
  opacity: 0;
  transform: translateY(0);
}
.alert--error {
  background-color: #FFF2F0;
  border: 1px solid #FFCCC7;
}
.alert--success {
  background-color: #F6FFED;
  border: 1px solid #B7EB8F;
}
.alert--info {
  background-color: #E6F4FF;
  border: 1px solid #91CAFF;
}
.alert--warning {
  background-color: #FFFBE6;
  border: 1px solid #FFE58F;
}
.alert__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.alert__content--left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.alert__icon {
  width: 20px;
}
.alert__message {
  font-size: 13px;
  letter-spacing: -0.02em;
  font-weight: 500;
}
.alert__close-btn {
  width: 16px;
}

/* 설정 모달 */
.settings__wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  height: calc(100vh - 400px);
}
.settings__menu {
  width: 230px;
  height: 100%;
  border-right: 1px solid #D6D6D6;
}
.settings__category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  padding: 0 10px 0 20px;
  cursor: pointer;
}
.settings__category-header:hover {
  background-color: rgba(51, 51, 51, 0.06);
}
.settings__category-title {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.settings__category.active .settings__category-header .toggle-arrow {
  transform: rotateX(-180deg);
}
.settings__category.active .settings__list {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.settings__list {
  max-height: 300px;
}
.settings__item {
  position: relative;
  height: 30px;
}
.settings__item:hover {
  background-color: rgba(51, 51, 51, 0.06);
}
.settings__item.active {
  background-color: rgba(51, 51, 51, 0.06);
}
.settings__item.active::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 100%;
  background: #B83333;
}
.settings__link {
  display: block;
  padding-left: 3rem;
  font-size: 1.4rem;
  color: #707070;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 30px;
}
.settings__content {
  flex: 1;
  height: 100%;
  padding: 20px;
}
.settings__section-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.settings__description {
  font-size: 12px;
  color: #8F8F8F;
  letter-spacing: -0.02em;
  line-height: 1.4;
  font-weight: 600;
  margin-top: 10px;
}
.settings__form-group-wrapper {
  margin-top: 2rem;
}
.settings__form-group-wrapper .preview {
  border-top: 1px solid #333333;
  padding-top: 10px;
}
.settings__form-group-wrapper .preview__description {
  margin-bottom: 1rem;
  font-size: 1.1rem;
  line-height: 1.4;
}
.settings__form-group-wrapper .preview__filename {
  font-size: 1.4rem;
  line-height: 1.4;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.settings__form-group-wrapper .autocomplete__selected {
  border-color: #8F8F8F;
}
.settings__form-group-wrapper .business__logo-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.settings__form-group-wrapper .business__logo-wrapper img {
  filter: grayscale(100%) contrast(20%) brightness(170%);
}
.settings__form-group-wrapper .business__logo-wrapper .business__logo-text {
  font-size: 13px;
  letter-spacing: -0.02em;
  color: #8F8F8F;
}
.settings__form-group-wrapper .business__table .table__row .table__cell:last-child {
  max-width: 160px;
}
.settings__form-group-wrapper .business__table .business__logo {
  margin: 0 auto;
  max-width: 100%;
  max-height: 100%;
  filter: grayscale(100%) contrast(20%) brightness(170%);
  -webkit-user-drag: none;
  user-drag: none;
}
.settings__form-group-wrapper .business__table .business__logo-text {
  text-align: center;
  color: #8F8F8F;
  text-wrap: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
}

/* 출고전표 > 합포장 모달 */
.packaging {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid #333333;
  border-radius: 2px;
  /* 합포장 미포함 */
}
.packaging.active .toggle__btn {
  transform: rotate(-180deg);
}
.packaging.active .packaging__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.packaging-container .table .table__cell-content {
  font-weight: 600;
}
.packaging__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
}
.packaging__header-toggle {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.packaging__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.packaging__subtitle {
  display: inline-block;
  margin-bottom: 2px;
  font-size: 11px;
  color: #8F8F8F;
}
.packaging__content {
  max-height: 300px;
}
.packaging__content-inner {
  margin-top: 10px;
}
.packaging .table .table__cell-content {
  font-weight: 600;
}
.packaging--not {
  margin-top: 1rem;
  border-top: 1px solid #8F8F8F;
}

/* 모달 템플릿인풋 상단 기능 영역 */
.actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.actions__controls {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
}
.actions__tools {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
}
.actions__count-info {
  font-size: 1.4rem;
  font-weight: 600;
  color: #8F8F8F;
}

/* 엑셀 업로드 */
.excel-upload__header {
  margin: 2rem 0;
}
.excel-upload__title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.excel-upload__description {
  margin-top: 1rem;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #8F8F8F;
}
.excel-upload__body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 2rem;
}
.excel-upload__body.upload {
  border: 1px dashed #B83333;
  height: 400px;
}
.excel-upload__body.upload .upload__text {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2rem;
  text-align: center;
}
.excel-upload__body.dragover {
  border: 2px dashed #B83333;
  background-color: rgba(184, 51, 51, 0.1);
}
.excel-upload__body.preview .preview__table {
  width: 100%;
  border: 1px solid #8F8F8F;
}
.excel-upload__body.preview .preview__table.tabulator .tabulator-header .tabulator-col {
  background: #D6D6D6;
  border-right: 1px solid #8F8F8F;
}
.excel-upload__body.preview .preview__table.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left {
  min-width: 40px !important;
  width: 40px !important;
}
.excel-upload__body.preview .preview__table.tabulator .tabulator-tableholder .tabulator-range-overlay .tabulator-range {
  border-color: #B83333;
}
.excel-upload__body.preview .preview__table.tabulator .tabulator-tableholder .tabulator-range-overlay .tabulator-range-cell-active {
  border: 2px solid #B83333;
}
.excel-upload__body.preview .preview__table.tabulator .tabulator-tableholder .tabulator-range-overlay .tabulator-range.tabulator-range-active:after {
  background-color: #B83333;
}
.excel-upload__body.preview .preview__table .tabulator-row {
  border-color: #8f8f8f;
}
.excel-upload__body.preview .preview__table .tabulator-row .tabulator-cell {
  padding: 4px 10px;
  border-color: #8F8F8F;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.excel-upload__body.preview .preview__table .tabulator-row .tabulator-cell.tabulator-row-header {
  background: #D6D6D6;
}
.excel-upload__body.preview .preview__table .tabulator-row .tabulator-cell.tabulator-range-selected:not(.tabulator-range-only-cell-selected):not(.tabulator-range-row-header) {
  background-color: #E99584;
}
.excel-upload__body.preview .preview__table .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left {
  border-right: 1px solid #8F8F8F;
  width: 40px !important;
}
.excel-upload__body.preview .preview__table .tabulator-row:last-child {
  border-bottom: 0;
}
.excel-upload__body.preview .preview__table .tabulator-row:hover {
  background-color: rgba(51, 51, 51, 0.06);
}
.excel-upload__body.preview .preview__table .tabulator-row.tabulator-range-highlight.tabulator-range-selected .tabulator-cell.tabulator-range-row-header, .excel-upload__body.preview .preview__table .tabulator-row .tabulator-row.tabulator-range-selected .tabulator-cell.tabulator-range-row-header {
  background: #D46B61;
  color: #333333;
}
.excel-upload__body.preview .preview__table .tabulator-row.tabulator-selected {
  background: #E99584;
}
.excel-upload__body.preview .preview__table .tabulator-row.tabulator-selected .tabulator-cell.tabulator-row-header {
  background: #D46B61;
}
.excel-upload__body.preview .preview__table .tabulator-row.highlight-prev, .excel-upload__body.preview .preview__table .tabulator-row.highlight-prev .tabulator-cell.tabulator-row-header {
  background: #B83333;
  color: #FFFFFF;
}
.excel-upload__data {
  margin-top: 20px;
}
.excel-upload__data .list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 300px;
  overflow-y: auto;
}
.excel-upload__data .list__item {
  display: grid;
  align-items: center;
  grid-template-columns: 120px 180px 1fr 300px;
  gap: 10px;
  grid-template-areas: "group1 group2 group3 group4";
}
.excel-upload__data .list__item .selectBox__label {
  width: auto;
}
.excel-upload__data .list__title {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: #333333;
}
.excel-upload__data .list__select {
  grid-area: group4;
  padding: 0 12px;
}
.excel-upload__data .list__select > p {
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.excel-upload__data .list__select-change > p {
  font-weight: 600;
}
.excel-upload__data.selectable .list__item:not(:has(.list__select)) > :nth-child(3) {
  grid-column: span 2;
}
.excel-upload__data.confirm .list__item {
  grid-template-columns: 120px 180px 1fr;
  grid-template-areas: "group1 group2 group3";
}
.excel-upload__data.edit .list__item {
  grid-template-columns: 120px 180px 1fr 30px;
  align-items: start;
}
.excel-upload .excel__tab-menu {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  width: 100%;
}
.excel-upload .excel__tab-item {
  height: 28px;
  padding: 5px 12px;
  background: #8F8F8F;
  color: #FFFFFF;
  line-height: 1.4;
  font-size: 12px;
  font-weight: 600;
  border-radius: 0 0 2px 2px;
  cursor: pointer;
}
.excel-upload .excel__tab-item.active {
  background: #B83333;
}
.excel-upload__form {
  background: #EBEBEB;
  border: 1px solid #8F8F8F;
  border-radius: 2px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.excel-upload__section {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.excel-upload__field {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}
.excel-upload__field:first-child {
  margin-top: 0;
}
.excel-upload__field-group {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  flex: 1;
}
.excel-upload__field-group .select {
  min-width: 180px;
}
.excel-upload__input-wrapper {
  width: 100%;
}
.excel-upload__label {
  min-width: 120px;
}
.excel-upload__label > p {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.excel-upload__list-group {
  display: flex;
  flex-direction: column;
}
.excel-upload__list-group > button {
  width: 100%;
  margin-top: 1.5rem;
  padding: 0.5rem 0;
}
.excel-upload__list-group > button:hover {
  background: rgba(51, 51, 51, 0.06);
}

/* 엑셀 업로드 양식등록 */
.option-group {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-direction: column;
  gap: 1rem;
}
.option-group__title {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.option-group__subtitle {
  margin-top: 0.4rem;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.02rem;
  line-height: 1.4;
}
.option-group__item {
  position: relative;
  flex: 1;
  text-align: left;
  cursor: pointer;
}
.option-group__item-inner {
  display: inline-flex;
  align-items: center;
  justify-content: start;
  gap: 1.2rem;
  width: 100%;
  height: 10rem;
  padding: 1rem 1.4rem;
  box-shadow: inset 0 0 0 1px #E3E3E3;
  border-radius: 2px;
}
.option-group__item-inner:after {
  content: "";
  width: 0%;
  height: 4px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 2px 2px 0 0;
  background-color: #B83333;
}
.option-group__item:is(:hover, :active, :focus) .option-group__item-inner {
  transform: translateY(-4px);
  box-shadow: 0.2rem 0.4rem 1.2rem 0.1 rgba(0, 0, 0, 0.08);
}
.option-group__item:is(:hover, :active, :focus) .option-group__item-inner::after {
  content: "";
  width: 100%;
  transition: width 0.3s ease-in-out;
}
.option-group__item.active .option-group__item-inner {
  box-shadow: 0 0 0 1px #B83333;
  border-radius: 2px;
}
.option-group__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: #F5F5F5;
  border-radius: 3px;
}
.option-group__icon > img {
  width: 32px;
}

/* 엑셀 수정대상 선택 모달 */
.excel-edit {
  padding: 6rem 6rem 5rem;
}
.excel-edit__title {
  font-size: 1.6rem;
  font-weight: 600;
}
.excel-edit__description {
  font-size: 1.4rem;
  font-weight: 600;
  color: #8F8F8F;
  margin-top: 1rem;
}
.excel-edit__content {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 2rem;
  margin-top: 3rem;
}
.excel-edit__box {
  position: relative;
  flex: 1;
  cursor: pointer;
  transition: all 0.3s;
}
.excel-edit__box-inner {
  height: 100%;
  padding: 2rem;
  box-shadow: inset 0 0 0 1px #E3E3E3;
  border-radius: 2px;
}
.excel-edit__box-inner:after {
  content: "";
  width: 0%;
  height: 4px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 3px 3px 0 0;
  background-color: #B83333;
}
.excel-edit__box-title {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.4;
}
.excel-edit__box-description {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.4;
}
.excel-edit__box-items {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}
.excel-edit__box:is(:hover, :active, :focus) .excel-edit__box-inner {
  transform: translateY(-4px);
  box-shadow: 0.2rem 0.4rem 1.2rem 0.1 rgba(0, 0, 0, 0.08);
}
.excel-edit__box:is(:hover, :active, :focus) .excel-edit__box-inner::after {
  content: "";
  width: 100%;
  transition: width 0.3s ease-in-out;
}
.excel-edit__box.active .excel-edit__box-inner::after {
  content: "";
  width: 100%;
  height: 4px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 3px 3px 0 0;
  background-color: #B83333;
}
.excel-edit__item {
  height: 26px;
  padding: 3px 10px;
  color: #8F8F8F;
  background: #D6D6D6;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
  cursor: pointer;
}
.excel-edit__item:hover {
  color: #333333;
}
.excel-edit__item.selected {
  background: #B83333;
  color: #FFFFFF;
}

/* 업로드 양식 관리 */
.sheet-config {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
}
.sheet-config__item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.4rem;
}
.sheet-config__item .quantity-control {
  background: #FFFFFF;
  border: 1px solid #333333;
  padding: 0.2rem;
}
.sheet-config__item .quantity-control button {
  width: 2.6rem;
  min-width: 2.6rem;
  height: 2.6rem;
  border-color: #333333;
}
.sheet-config__item .quantity-control button.quantity__button--plus {
  background-image: url("../img/icon/icon_add_black.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
}
.sheet-config__item .quantity-control button.quantity__button--minus {
  background-image: url("../img/icon/icon_minus_black.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
}
.sheet-config__item .quantity-control .quantity__value {
  height: 1.8rem;
}
.sheet-config__label {
  font-size: 1.4rem;
  font-weight: 600;
}
.sheet-config .form-check {
  position: relative;
}
.sheet-config .form-check input[type=checkbox].form-check__checkbox + label {
  font-size: 1.4rem;
  font-weight: 600;
}

.footer {
  background-color: #B83333;
  width: 100%;
}
.footer__inner {
  max-width: 1200px;
  width: 90%;
  height: 100%;
  margin: 0 auto;
  padding: 4rem 0;
}
.footer__logo {
  background: url("../../img/common/footer_logo_white.svg") no-repeat center;
  width: 160px;
  height: 38px;
  background-size: contain;
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  margin-top: 4rem;
  padding-top: 2.4rem;
}
.footer__info-link {
  color: #FFFFFF;
}
.footer__info-link.inquiry {
  color: #D6D6D6;
}
.footer__info-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.2rem;
}
.footer__info-section p {
  position: relative;
  padding-right: 0.6rem;
  margin-right: 0.6rem;
  color: #FFFFFF;
  font-size: 1.4rem;
  line-height: 1.4;
}
.footer__info-section p::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 14px;
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
}
.footer__info-section p:last-child::after {
  display: none;
}
.footer__links {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  color: #FFFFFF;
  font-size: 1.4rem;
}
.footer__links .footer__link {
  color: #FFFFFF;
  font-weight: 500;
  margin-left: 1rem;
}
@media screen and (max-width: 767px) {
  .footer__inner {
    padding: 6rem 0;
  }
  .footer__top {
    padding: 0 1.5rem;
  }
  .footer__bottom {
    display: block;
  }
  .footer__info-section {
    flex-wrap: wrap;
  }
  .footer__links {
    align-items: start;
    margin-top: 4rem;
  }
  .footer__links .footer__link {
    margin-left: 0;
    margin-right: 1rem;
  }
  .footer__copy {
    margin-top: 1.2rem;
  }
}

.header {
  width: 100%;
  height: 12rem;
  background: #FFFFFF;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
}
.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  height: 80px;
  border-bottom: 1px solid #8F8F8F;
}
@media screen and (max-width: 767px) {
  .header__inner {
    height: 5.7rem;
    padding: 1rem 1.4rem;
  }
}
.header__logo {
  background: url("../../img/common/logo.jpg") no-repeat center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.5s ease;
  width: 200px;
  height: 38px;
  background-size: contain;
}
@media screen and (max-width: 767px) {
  .header__logo {
    width: 13.3rem;
  }
}
.header__link {
  display: block;
  height: 100%;
}
.header__center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease;
}
.header__center .header__business-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  height: 38px;
}
.header__center .header__business-logo .logo-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 4px;
}
.header__center .header__business-logo .logo-item > p {
  font-size: 13px;
  letter-spacing: -0.02em;
  color: #8F8F8F;
}
.header__center .header__business-logo img {
  filter: grayscale(100%) contrast(20%) brightness(170%);
  transition: filter 0.3s ease;
}
.header__center .header__business-logo img:hover {
  filter: grayscale(30%) contrast(100%) brightness(120%);
  opacity: 0.6;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.header__center .header__business-logo .selected img {
  filter: grayscale(0%);
}
.header__center .header__business-logo .selected img:hover {
  filter: grayscale(0%);
  opacity: 1;
}
.header__center .header__business-logo .selected p {
  font-weight: 600;
  color: #333333;
}
.header__right {
  position: absolute;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.5s ease;
}
.header__utils {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.header__utils > .btn {
  height: 34px;
  font-size: 1.4rem;
  padding: 0 16px;
  border-radius: 2px;
  font-weight: 600;
}
.header__utils--login {
  gap: 1rem;
  opacity: 0;
  visibility: hidden;
}
.header__utils--mobile {
  display: none;
}
.header__utils--anonymous {
  opacity: 1;
  visibility: visible;
}
@media screen and (max-width: 767px) {
  .header__utils--login {
    gap: 1.2rem;
  }
  .header__utils--mobile {
    display: block;
  }
  .header__utils--mobile .icon.profile {
    background-size: 26px;
    width: 22px;
    height: 22px;
  }
  .header__utils--pc {
    display: none;
  }
}
.header--authenticated .header__center {
  opacity: 1;
  visibility: visible;
}
.header--authenticated .header__utils--login {
  opacity: 1;
  visibility: visible;
}
@media screen and (max-width: 767px) {
  .header--authenticated .header__utils--login {
    animation: unset;
  }
}
.header__cube-label {
  font-size: 1.4rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #B83333;
}
.header__cube-count {
  color: #333333;
}
@media screen and (max-width: 767px) {
  .header__cube {
    display: none;
  }
}
.header__item {
  position: relative;
}
.header__item--cube {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
@media screen and (max-width: 767px) {
  .header__item--cube {
    display: none;
  }
}
.header__item > .btn--icon {
  width: 32px;
  height: 32px;
  position: relative;
}
.header__item > .btn--icon.header__btn--alarm {
  background-image: url("../img/icon/icon_bell.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px;
}
.header__item > .btn--icon .alarm-count {
  background-color: #B83333;
  color: #FFFFFF;
  position: absolute;
  height: 15px;
  min-width: 15px;
  top: -2px;
  right: -1px;
  padding: 1px 3px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 2px;
  letter-spacing: -0.02em;
}
@media screen and (max-width: 767px) {
  .header__item > .btn--icon .icon {
    background-size: 26px;
  }
}
.header__btn--cube {
  height: 30px;
  padding: 0 12px;
  font-weight: 600;
}

.nav {
  height: 40px;
  border-bottom: 1px solid #8F8F8F;
}
.nav__list {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  gap: 45px;
}
.nav__link {
  font-size: 1.4rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: #1F1F1F;
  transition: color 0.25s;
}
.nav__link:hover {
  color: #B83333;
}
@media screen and (max-width: 767px) {
  .nav {
    display: none;
  }
}

.side-menu {
  display: none;
}
@media screen and (max-width: 767px) {
  .side-menu {
    display: block;
    position: fixed;
    top: 0;
    left: -80%;
    z-index: 100;
    width: 70%;
    height: 100%;
    background-color: #FFFFFF;
    transition: left 0.3s ease;
    box-shadow: 0 0 0 0 rgba(36, 42, 48, 0), 0 24px 36px 0 rgba(36, 42, 48, 0.4);
  }
  .side-menu--active {
    left: 0;
  }
  .side-menu__inner {
    height: 100%;
  }
  .side-menu__close {
    border-bottom: 1px solid #8F8F8F;
    padding: 1.3rem;
  }
  .side-menu__list {
    display: block;
  }
  .side-menu__item {
    border-bottom: 1px solid #8F8F8F;
  }
  .side-menu__link {
    display: block;
    padding: 1.6rem;
    font-size: 1.4rem;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #1F1F1F;
  }
  .side-menu__auth {
    padding: 1.6rem;
  }
  .side-menu__auth .btn {
    width: 100%;
    height: 4.5rem;
    font-weight: 600;
  }
}

.alarm__box {
  display: none;
  position: absolute;
  right: 0;
  background-color: #ffffff;
  border-radius: 3px;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.04);
  border: 1px solid #D6D6D6;
  margin-top: 4px;
  width: 420px;
}
.alarm__close {
  display: none;
  padding: 1.4rem 1.4rem 0;
}
.alarm__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.4rem;
  border-bottom: 1px solid #EFEFEF;
}
.alarm__title {
  font-size: 1.6rem;
  font-weight: 600;
}
.alarm__content {
  padding: 1rem;
  max-height: 500px;
  overflow-x: auto;
}
.alarm__item {
  cursor: pointer;
  border-radius: 2px;
  position: relative;
}
.alarm__item + * {
  padding-top: 1rem;
  margin-top: 1rem;
}
.alarm__item:first-of-type::before {
  display: none;
}
.alarm__item::before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 1px;
  background-color: #D6D6D6;
  position: absolute;
  top: 0;
}
.alarm__item-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  position: relative;
}
.alarm__item-container:hover {
  background-color: #F7F7F7;
}
.alarm__item-indicator {
  position: absolute;
  width: 6px;
  height: 6px;
  display: inline-block;
  background-color: #B83333;
  border-radius: 100px;
  left: 1px;
  top: 1rem;
}
.alarm__item-indicator--unread {
  display: none;
}
.alarm__item-profile {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
}
.alarm__item-profile .profile-img--name {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #6a2eb8;
  font-size: 1.3rem;
  border-radius: 4px;
  font-weight: 400;
  color: #fff;
  text-align: center;
}
.alarm__item-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex: 1 1 auto;
  gap: 1rem;
}
.alarm__item-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}
.alarm__item-author {
  font-size: 1.4rem;
  font-weight: 400;
  color: #8F8F8F;
  margin-bottom: 0.6rem;
  letter-spacing: -0.02em;
}
.alarm__item-author span {
  color: #333333;
  font-weight: 600;
  margin-right: 0.4rem;
}
.alarm__item-document {
  font-size: 1.2rem;
  font-weight: 400;
  color: #8F8F8F;
  letter-spacing: -0.02em;
}
.alarm__item-document span {
  color: #333333;
  font-weight: 600;
  margin-right: 0.4rem;
}
.alarm__item-hashtag {
  color: #B83333;
}
.alarm__item-comment {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: keep-all;
}
.alarm__item-time {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #8F8F8F;
}
.alarm__item__btn-wrap .alarm__item__btn--decline {
  margin-left: 0.4rem;
}
.alarm__empty {
  height: 180px;
}
.alarm__empty-message {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 1.4rem;
  color: #8F8F8F;
}
@media screen and (max-width: 767px) {
  .alarm__box {
    position: fixed;
    top: 0;
    z-index: 6;
    width: 100%;
    border: 0;
    margin-top: 0;
  }
  .alarm__close {
    display: block;
  }
  .alarm__content {
    max-height: calc(100vh - 44px - 48px);
  }
}

.user-menu {
  background-color: #FFFFFF;
}
.user-menu--modal {
  display: none;
  position: absolute;
  right: 0;
  min-width: 19rem;
  border-radius: 3px;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.04);
  border: 1px solid #D6D6D6;
  margin-top: 1rem;
}
@media screen and (max-width: 767px) {
  .user-menu--modal {
    display: none;
  }
}
.user-menu--toggle {
  display: none;
}
@media screen and (max-width: 767px) {
  .user-menu--toggle {
    display: block;
    position: fixed;
    top: 0;
    right: -80%;
    z-index: 100;
    width: 70%;
    height: 100%;
    background-color: #FFFFFF;
    transition: right 0.3s ease;
    box-shadow: 0 0 0 0 rgba(36, 42, 48, 0), 0 24px 36px 0 rgba(36, 42, 48, 0.4);
  }
  .user-menu--toggle--active {
    right: 0;
  }
  .user-menu--toggle .user-menu__link {
    border-bottom: 1px solid #8F8F8F;
    display: block;
    padding: 1.6rem;
    font-size: 1.4rem;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #1f1f1f;
  }
}
.user-menu__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #EFEFEF;
  padding: 12px 24px 12px 14px;
}
.user-menu__img {
  width: 32px;
  height: 32px;
  cursor: pointer;
}
.user-menu__img span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #6a2eb8;
  font-size: 1.4rem;
  border-radius: 4px;
  font-weight: 400;
  color: #fff;
  text-align: center;
}
.user-menu__info h3 {
  font-size: 1.4rem;
  line-height: 1.4;
}
.user-menu__info p {
  font-size: 1.2rem;
  color: #8F8F8F;
}
.user-menu__list {
  padding: 6px;
}
.user-menu__link {
  font-size: 1.4rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #333333;
  display: block;
  padding: 6px 14px;
}
.user-menu__link:hover {
  background-color: rgba(51, 51, 51, 0.06);
  border-radius: 3px;
}
.user-menu__footer {
  border-top: 1px solid #EFEFEF;
}
.user-menu__footer .user-menu__link {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 1.4rem;
  color: #8F8F8F;
  letter-spacing: -0.02em;
}
.user-menu__footer .user-menu__link .icon {
  filter: invert(82%) sepia(0%) saturate(4256%) hue-rotate(70deg) brightness(105%) contrast(93%);
}
@media screen and (max-width: 767px) {
  .user-menu__list {
    padding: 0;
  }
  .user-menu__img {
    width: 28px;
    height: 28px;
  }
  .user-menu__img span {
    font-size: 1.2rem;
  }
  .user-menu__footer {
    border-top: 0;
    padding: 1.6rem;
  }
  .user-menu__footer .btn {
    width: 100%;
    height: 4.5rem;
    font-weight: 600;
  }
}

@keyframes fadeInRight {
  from {
    transform: translateX(-200%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}