*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  --body-height: 100dvh;
  max-height: var(--body-height);
  min-height: var(--body-height);
}

/******************************************************************
** font 및 기타
*******************************************************************/
/* --xxlg-font: 1.5rem;
--xlg-font: 1.25rem;
--lg-font: 1.1rem;
--md-font: 1rem;
--sm-font: 0.9rem;
--xsm-font: 0.8rem;
--xxsm-font: 0.75rem; */
.xxlg-font {
  font-size: var(--xxlg-font);
}

.xlg-font {
  font-size: var(--xlg-font);
}

.lg-font {
  font-size: var(--lg-font);
}

.md-font {
  font-size: var(--md-font);
}

.sm-font {
  font-size: var(--sm-font);
}

.xsm-font {
  font-size: var(--xsm-font);
}

.xxsm-font {
  font-size: var(--xxsm-font);
}

/* --lg-height: 2;
--md-height: 1.5;
--sm-height: 1; */
.lg-height {
  line-height: var(--lg-height);
}

.md-height {
  line-height: var(--md-height);
}

.sm-height {
  line-height: var(--sm-height);
}

.bold-font {
  font-weight: var(--bold-font);
}

.normal-font {
  font-weight: var(--normal-font);
}

.light-font {
  font-weight: var(--light-font);
}

.no-drag {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-use-select: none;
  user-select: none;
}

.no-padding {
  padding: 0;
}

body,
form,
div,
span,
p,
h3,
h4,
h5,
h6,
dl,
dt,
dd,
ul,
ol,
li,
fieldset,
th,
td,
textarea,
button,
a,
input,
select {
  color: var(--main-text-color);
}
/******************************************************************
** theme 설정
*******************************************************************/
.container {
  --tab-active-color: #5c5fc0;
  --main-background-color: #f7f8fc;
  --default-bg-color: #fff;
  --default-box-shadow-color: #00000029;
  --main-text-color: #4c4c4c;
  --sub-text-color: #fff;
  --background-white-color: #fff;
  --default-box-shadow: 0px 2px 6px var(--default-box-shadow-color);
  /* --default-box-shadow: 0px 3px 6px var(--default-box-shadow-color); */
  /* --default-box-shadow: 0px 2px 6px 1px var(--default-box-shadow-color); */

  --default-red-color: #ff5a81;
  --default-blue-color: #3376d0;
  --default-yellow-color: #e68a00;
  --default-green-color: #4caf50;
  --default-gray-color: #ccc;
}
/*.container.dark-theme {
    --tab-active-color: #5c5fc0;
    --main-background-color: #202124;
    --default-bg-color: #202124;
    --default-box-shadow-color: #00000029;
    --main-text-color: #e0e0e0;
    --sub-text-color: #4c4c4c;
    }*/
.container {
  --container-background: #f7f8fc;
  --default-text-color: #000;
  /** common **/
  --hover-brightness: brightness(95%);
  --active-brightness: brightness(90%);
  /** input **/
  --input-border-color: #555;
  --input-back-color: #fff;
  --input-text-color: var(--main-text-color);
  --input-placeholder-text-color: #999;
  --input-disable-back-color: #dbdbdb;
  --input-readonly-back-color: #f5f5f5;
  --input-rounded-size: 7px;
  /** button **/
  --border-button-back-color: #fff;
  --border-button-border-color: #adafdf;
  --border-button-text-color: #5c5fc0;
  --fill-button-back-color: #5c5fc0;
  --fill-button-text-color: #fff;
  --button-light-ripple-color: #adafdf;
  --button-dark-ripple-color: #5c5fc0;
  /** page-block **/
  --page-block-header-back-color: #5c5fc0;
  --page-block-main-text-color: #fff;
  --page-block-input-back-color: #fff;
  --page-block-input-text-color: #4c4c4c;
  --page-block-button-back-color: #5c5fc0;
  --page-block-button-border-color: #fff;
  --page-block-button-text-color: #fff;
  --page-block-toggle-checked-back-color: #a5a8e8;
  --page-block-toggle-size: 30px;
  /** box **/
  --box-default-shadow: 0px 3px 6px #00000029;
  /** table **/
  --table-border-color: #ccc;
  --table-back-color: #fff;
  --table-head-color: #ececec;
  --table-highlight-color: #f8f6fc;
  --common-table-border-color: #d1d1d1;
  --common-table-back-color: #fff;
  --common-table-row-hover-back-color: #f3f3fa;
  --common-table-row-selected-back-color: #d5d6ef;
  --common-table-row-even-back-color: #f8f6fc;
  /** checkbox **/
  --checkbox-size: 20px;
  --checkbox-icon-size: var(--md-font);
  --checkbox-back-color: #fff;
  --checkbox-border-color: #555;
  --checkbox-icon-color: #fff;
  --checked-checkbox-back-color: #555;
  --checked-checkbox-border-color: #555;
  --checked-checkbox-icon-color: #fff;
  --disabled-checkbox-back-color: #e0e0e0;
  --disabled-checkbox-border-color: #b0b0b0;
  --disabled-checkbox-icon-color: #9e9e9e;
  --disabled-checked-checkbox-back-color: #c0c0c0;
  --disabled-checked-checkbox-border-color: #a0a0a0;
  --disabled-checked-checkbox-icon-color: #808080;
  /** toggle-checkbox **/
  --toggle-checkbox-back-color: #bbb;
  --toggle-checkbox-check-thumb-color: #fff;
  --toggle-checkbox-checked-border-color: #fff;
  --toggle-checkbox-checked-back-color: var(--default-green-color);
  /** radio **/
  --radio-group-gap: 0.5rem;
  --radio-size: 20px;
  --radio-icon-size: 10px;
  --radio-back-color: #fff;
  --radio-border-color: #555;
  --radio-icon-color: #fff;
  --checked-radio-back-color: #fff;
  --checked-radio-border-color: #555;
  --checked-radio-icon-color: #555;
  /** card **/
  --card-border-color: #ccc;
  /** fake scroll bar **/
  --fake-scroll-bar-color: #5c5fc080;
  --fake-scroll-track-color: #e1e1e1;
}
/*.container.dark-theme {*/
/** fake scroll bar **/
/*--fake-scroll-bar-color: #5c5fc080;
    --fake-scroll-track-color: transparent;
}*/
/*.container.dark-theme {
    background-color: var(--main-background-color);
}*/
/******************************************************************
** container
*******************************************************************/
.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0;
  position: relative;
}
/******************************************************************
** page-title
*******************************************************************/
.page-title {
  display: flex;
  gap: 0.5rem;
  padding-left: 0;
  padding-right: 0;
}

.page-title-icon,
.page-title-icon svg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--xlg-font);
  height: var(--xlg-font);
}

/******************************************************************
** header
*******************************************************************/
.header {
  width: 100%;
  height: 40px;
}
/******************************************************************
** components
*******************************************************************/
.rounded-box {
  display: flex;
  flex-direction: column;
  box-shadow: var(--box-default-shadow);
  border-radius: 10px;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid transparent;
  background-color: transparent;
}

/* #region text-input ▷ text input */
.text-input {
  --input-box-width: 200px;
  --input-box-height: 35px;
}
.text-input {
  border: 1px solid var(--input-border-color);
  background-color: var(--input-back-color);
  display: flex;
  gap: 5px;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 0 10px;
  height: var(--input-box-height);
  width: var(--input-box-width);
}
.text-input.rounded-input {
  border-radius: var(--input-rounded-size);
}
.text-input input {
  flex: 1;
  min-width: 0;
  height: 100%;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-size: inherit;
}
.text-input input {
  background-color: transparent !important;
}
.text-input input:focus {
  outline: none;
}
.text-input:has(input:read-only) {
  background-color: var(--input-readonly-back-color);
}
.text-input:has(input:disabled) {
  background-color: var(--input-disable-back-color);
}
.text-input input::placeholder {
  color: var(--input-placeholder-text-color);
}
.text-input .input-icon {
  height: 100%;
  width: var(--input-box-height);
  display: flex;
  justify-content: center;
  align-items: center;
}
.text-input .input-icon.material-icons {
  font-size: var(--xxlg-font);
}

/** common-code-input **/
.common-code-input {
  display: flex;
  gap: 5px;
}

.common-code-input .search-icon {
  height: 100%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.common-code-input .text-input:has(input[data-type="CODE_CODE"]) {
  --input-box-width: 80px;
}
.common-code-input .text-input:has(input[data-type="CODE_CODE"]) {
  padding: 0 10px;
}

.common-code-input input[data-type="CODE_CODE"] {
  text-align: center;
}
/* #endregion */

/* #region calendar-input */
.calendar-input {
  --input-box-width: 160px;
  --input-box-height: 35px;
}
.calendar-input {
  display: flex;
  align-items: center;
  gap: 5px;
  width: var(--input-box-width);
  height: var(--input-box-height);
  border: 1px solid var(--input-border-color);
  background-color: var(--input-back-color);
  padding: 0 0 0 10px;
}
.calendar-input.rounded-input {
  border-radius: var(--input-rounded-size);
}
.calendar-input input {
  flex: 1;
  min-width: 0;
  height: 100%;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
}
.calendar-input .calendar-icon {
  padding: 0 7px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: auto;
  aspect-ratio: 1 / 1;
  border-left: 1px solid var(--input-border-color);
  cursor: pointer;
}
/* #endregion */

/* #region button ▷ framework7에서만 ripple 작동 */
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-width: 100px;
  height: 35px;
  border-radius: 7px;
  padding: 0 10px;
  background-color: var(--default-bg-color);
  color: var(--main-text-color);
  font-size: var(--sm-font);
  --f7-touch-ripple-color: var(--button-light-ripple-color);
}
.button:hover {
  filter: var(--hover-brightness);
}
.button:active {
  color: var(--main-text-color);
}
.button .material-icons {
  color: inherit;
}

/** border-button **/
.button.border-button {
  background-color: var(--border-button-back-color);
  color: var(--border-button-text-color);
  border: 1px solid var(--border-button-text-color);
}
/** border-button **/
.button.fill-button {
  background-color: var(--fill-button-back-color);
  color: var(--fill-button-text-color);
  --f7-touch-ripple-color: var(--button-light-ripple-color);
}
/* #endregion */

/* #region page block 기본 스타일 / 페이지 마다 사용 권장 */
.page-block-wrapper {
  padding: 20px;
  background-color: var(--main-background-color);
  width: 100%;
  height: 100%;
  min-width: 1000px;
  min-height: 600px;
}
.page-block {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: var(--default-bg-color);
  box-shadow: 0 0 6px 0 var(--default-box-shadow-color);
  border-radius: 10px;
}
.page-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--page-block-header-back-color);
  height: 60px;
  border-radius: 10px 10px 0 0;
  padding: 0 20px;
  gap: 20px;
}
.page-block-header .block-header-text {
  display: flex;
  justify-content: left;
  align-items: center;
  height: 100%;
  font-size: var(--xlg-font);
  color: var(--page-block-main-text-color);
}
.block-header-contents {
  position: relative;
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 20px;
  height: 100%;
  color: var(--page-block-main-text-color);
}
.block-header-search {
  display: flex;
  align-items: center;
  width: 350px;
  height: 35px;
  background-color: var(--page-block-input-back-color);
  border-radius: 10px;
  font-size: var(--sm-font);
  padding: 0 10px;
}
.block-header-search > input {
  color: var(--page-block-input-text-color);
  font-size: var(--sm-font);
  font-weight: var(--normal-font);
  flex: 1;
  height: 100%;
}
.block-header-search > .search-icon {
  color: var(--page-block-input-text-color);
  cursor: pointer;
}
.page-block-header .button.border-button {
  background-color: var(--page-block-button-back-color);
  border-color: var(--page-block-button-border-color);
  color: var(--page-block-button-text-color);
}
.page-block-header .toggle-checkbox {
  --toggle-checkbox-height: var(--page-block-toggle-size);
}
.page-block-header .toggle-checkbox input[type="checkbox"]:checked + .checkmark {
  background-color: var(--page-block-toggle-checked-back-color);
}
.page-block-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 20px;
}
/* #endregion */

/* #region TableStyles */
.default-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  text-align: center;
  color: var(--default-text-color);
}

.default-table tr {
  height: 40px;
  background-color: var(--table-back-color);
}

.default-table th {
  font-weight: 600;
  /*background-color: var(--table-head-color);*/
  background-color: #f1f2f7;
}

.default-table.border-table thead tr:last-child th {
  border-top: 1px solid var(--table-border-color);
  border-bottom: 1px solid var(--table-border-color);
}

.default-table.highlight-even tbody tr:nth-child(even) {
  background-color: var(--table-highlight-color);
}

.default-table.border-table th,
.default-table.border-table td {
  border-right: 1px solid var(--table-border-color);
}

.default-table.border-table th:first-child,
.default-table.border-table td:first-child {
  border-left: 1px solid var(--table-border-color);
}

.default-table.border-table:not(:has(thead)) tbody tr:first-child td {
  border-top: 1px solid var(--table-border-color);
}

.default-table.border-table tbody tr td {
  border-bottom: 1px solid var(--table-border-color);
}

.default-table.hover tbody tr:hover {
  filter: var(--hover-brightness);
}

.default-table.active tbody tr:active {
  filter: var(--active-brightness);
  cursor: pointer;
}

.default-table.active tbody tr {
  cursor: pointer;
}

/* #region expense-table */
.expense-table {
  width: 100%;
  border-radius: 15px;
  box-shadow: 0px 3px 6px #00000029;
  overflow: hidden;
}

.expense-table table thead th:not(:last-child),
.expense-table table thead td:not(:last-child) {
  border-right: 1px solid #fff;
}

.expense-table table tbody th:not(:last-child),
.expense-table table tbody td:not(:last-child) {
  border-right: 1px solid #e1e1e1;
}

.expense-table table.highlight-even tbody tr:nth-child(even) {
  background-color: #eeeff9;
}

.expense-table table tr.sum-row th,
.expense-table table tr.sum-row td {
  border-top: 1px solid black;
  background-color: #fff;
  font-weight: var(--bold-font);
}

.expense-table table thead tr th,
.expense-table table thead tr td {
  background-color: #5c5fc04d;
}
/* #endregion */

/* #region common-table */
.common-table {
  position: relative;
  min-width: 100%;
  width: fit-content;
  min-width: 100%;
  min-height: 100%;
  list-style: none;
  /* padding: 1px; */
  margin: 0;
}

.common-table .common-row:not(.common-header, .selected):hover {
  background-color: var(--common-table-row-hover-back-color);
}

.common-table .common-row:not(.common-header, .selected):nth-child(odd) {
  background-color: var(--common-table-row-even-back-color);
}

.common-row {
  display: grid;
  border-bottom: 1px solid var(--common-table-border-color);
  height: 35px;
  width: max-content;
  min-width: 100%;
  background-color: var(--common-table-back-color);
}
.common-row.click-cursor {
  cursor: pointer;
}

.common-header {
  border-top: 1px solid var(--common-table-border-color);
  background-color: #f1f2f7;
}

.common-table .common-row:not(.common-header).selected {
  background-color: var(--common-table-row-selected-back-color);
}

.common-row.common-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.common-col {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  /* flex-direction: column; */
  justify-content: center;
  align-items: center;
  font-weight: var(--normal-font);
  border-right: 1px solid var(--common-table-border-color);
  font-variant-numeric: tabular-nums;
}

.common-col .ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.common-row:first-child {
  border-top: 1px solid var(--common-table-border-color);
}
.common-col:last-child {
  border: none;
}

.common-row.common-header .common-col {
  font-weight: var(--bold-font);
}

.common-col.justify-left {
  justify-content: flex-start;
}
.common-col.justify-right {
  justify-content: flex-end;
}

.common-col.align-left {
  justify-content: left;
  text-align: left;
}
.common-col.align-center {
  justify-content: center;
  text-align: center;
}
.common-col.align-right {
  justify-content: right;
  text-align: right;
}
/* #endregion */
/* #endregion */

/* #region checkbox */
.default-checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  width: fit-content;
  gap: 5px;
  color: inherit;
}

.default-checkbox input[type="checkbox"] {
  display: none;
}

.default-checkbox .checkmark {
  width: var(--xlg-font);
  height: var(--xlg-font);
  background-color: var(--checkbox-back-color);
  border: 2px solid var(--checkbox-border-color);
  border-radius: 4px;
  position: relative;
  margin-right: 10px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.default-checkbox:hover .checkmark {
  filter: var(--hover-brightness);
}

.default-checkbox:active .checkmark {
  filter: var(--active-brightness);
}

.default-checkbox .checkmark > .check-icon {
  /* visibility: hidden; */
  font-size: var(--md-font);
  color: var(--checkbox-icon-color);
}

.default-checkbox input[type="checkbox"]:checked + .checkmark {
  background-color: var(--checked-checkbox-back-color);
  border-color: var(--checked-checkbox-border-color);
  color: var(--checked-checkbox-icon-color);
}

.default-checkbox input[type="checkbox"]:checked + .checkmark > .check-icon {
  /* visibility: initial; */
  color: var(--checked-checkbox-icon-color);
}

/* input이 disabled일 때 */
.default-checkbox input[type="checkbox"]:disabled + .checkmark {
  background-color: var(--disabled-checkbox-back-color);
  border-color: var(--disabled-checkbox-border-color);
  cursor: not-allowed;
  opacity: 0.6;
}

.default-checkbox input[type="checkbox"]:disabled + .checkmark > .check-icon {
  color: var(--disabled-checkbox-back-color);
}

/* toggle-checkbox */
/*
<label class="toggle-checkbox square-toggle no-drag" title="선택모드에서는 상세보기를 할 수 없습니다.">
  선택모드
  <input type="checkbox" name="" value="check" />
  <span class="checkmark"></span>
</label>
*/
.toggle-checkbox {
  --toggle-checkbox-width: calc(var(--toggle-checkbox-height) * 2);
  --toggle-checkbox-height: 30px;
  --toggle-checkbox-border-radius: var(--toggle-checkbox-height);
  --toggle-checkbox-check-thumb-size: calc(var(--toggle-checkbox-height) - var(--toggle-checkbox-check-thumb-offset) * 2);
  /* --toggle-checkbox-check-thumb-offset: calc((var(--toggle-checkbox-height) - var(--toggle-checkbox-check-thumb-size)) / 2); */
  --toggle-checkbox-check-thumb-offset: 3px;
  --toggle-checkbox-check-thumb-border-radius: 50%;
  --toggle-checkbox-checked-border-size: 2px;
}
.toggle-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  width: fit-content;
  gap: 10px;
  justify-content: center;
  font-size: var(--sm-font);
}
.toggle-checkbox input[type="checkbox"] {
  display: none;
}
.toggle-checkbox .checkmark {
  width: var(--toggle-checkbox-width);
  height: var(--toggle-checkbox-height);
  background-color: var(--toggle-checkbox-back-color);
  border-radius: var(--toggle-checkbox-border-radius);
  position: relative;
  transition: background-color 0.1s ease;
}
.toggle-checkbox .checkmark::before {
  content: "";
  position: absolute;
  top: var(--toggle-checkbox-check-thumb-offset);
  left: var(--toggle-checkbox-check-thumb-offset);
  width: var(--toggle-checkbox-check-thumb-size);
  height: var(--toggle-checkbox-check-thumb-size);
  background-color: var(--toggle-checkbox-check-thumb-color);
  border-radius: var(--toggle-checkbox-check-thumb-border-radius);
  transition: transform 0.1s ease;
}
.toggle-checkbox input[type="checkbox"]:checked + .checkmark {
  background-color: var(--toggle-checkbox-checked-back-color);
}
.toggle-checkbox input[type="checkbox"]:checked + .checkmark::before {
  transform: translateX(var(--toggle-checkbox-height));
}

.toggle-checkbox.border-toggle .checkmark {
  border: var(--toggle-checkbox-checked-border-size) solid var(--toggle-checkbox-checked-border-color);
}
.toggle-checkbox.border-toggle .checkmark::before {
  width: calc(var(--toggle-checkbox-check-thumb-size) - var(--toggle-checkbox-checked-border-size) * 2);
  height: calc(var(--toggle-checkbox-check-thumb-size) - var(--toggle-checkbox-checked-border-size) * 2);
}

.toggle-checkbox.square-toggle {
  --toggle-checkbox-border-radius: 10px;
  --toggle-checkbox-check-thumb-border-radius: 8px;
}
/* #endregion */

/* #region radio */
.default-radio-group {
  display: flex;
  gap: var(--radio-group-gap);
}

.default-radio {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  width: fit-content;
}

.default-radio input[type="radio"] {
  display: none;
}

.default-radio .checkmark {
  width: var(--xlg-font);
  height: var(--xlg-font);
  background-color: var(--radio-back-color);
  border: 2px solid var(--radio-border-color);
  border-radius: var(--xlg-font);
  position: relative;
  margin-right: 0.5rem;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.default-radio:hover .checkmark {
  filter: var(--hover-brightness);
}

.default-radio:active .checkmark {
  filter: var(--active-brightness);
}

.default-radio .checkmark > .check-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--radio-icon-size);
  height: var(--radio-icon-size);
  border-radius: var(--radio-icon-size);
  background-color: var(--radio-icon-color);
}

.default-radio input[type="radio"]:checked + .checkmark {
  background-color: var(--checked-radio-back-color);
  border-color: var(--checked-radio-border-color);
  color: var(--checked-radio-icon-color);
}

/* disabled + checked 상태 */
.default-checkbox input[type="checkbox"]:disabled:checked + .checkmark {
  background-color: var(--disabled-checked-checkbox-back-color);
  border-color: var(--disabled-checked-checkbox-border-color);
  color: var(--disabled-checked-checkbox-icon-color);
}

.default-radio input[type="radio"]:checked + .checkmark > .check-icon {
  color: var(--checked-radio-icon-color);
  background-color: var(--checked-radio-icon-color);
}
/* #endregion */

/* #region card */
.card {
  --card-border-radius: 10px;
  display: flex;
  flex-direction: column;
  border-radius: var(--card-border-radius);
  border: 1px solid var(--card-border-color);
  background-color: transparent;
  background-clip: border-box;
  word-break: keep-all;
}

.card-img {
  flex: 1 1 auto;
  border-top-left-radius: var(--card-border-radius);
  border-top-right-radius: var(--card-border-radius);
}

.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-left-radius: var(--card-border-radius);
  border-top-right-radius: var(--card-border-radius);
}

.card-body {
  flex: 1 1 auto;
  padding: 10px;
}

.card .card-title {
  font-size: var(--lg-font);
  font-weight: var(--bold-font);
}

.card.shadow {
  box-shadow: var(--box-default-shadow);
}

.card .card-spacebetween {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.card .card-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--sm-font);
  line-height: var(--sm-height);
}
/* #endregion */

/* #region tab */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.tab-btn-group {
  display: flex;
  border-bottom: 1px solid #ccc;
  background-color: var(--mono_back);
}

.tab-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  /* min-width: 10rem; */
  padding: 0.5rem 1rem;
  background-color: #dfdfdf;
  cursor: pointer;
  flex: 1;
}

.tab-btn:hover:not(.active) {
  filter: var(--hover-brightness);
}

.tab-btn:active:not(.active) {
  filter: var(--active-brightness);
}

.tab-btn.active {
  background-color: white;
  cursor: initial;
}

.tab-btn.active::before {
  content: "";
  position: absolute;
  bottom: -1px;
  height: 1px;
  width: 100%;
  background-color: white;
}
/* #endregion */

/* #region modal */
.modal {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 15000;
}

.modal-background {
  /* position: relative; */
  width: 100%;
  height: 100%;
  background-color: #0000004d;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-body {
  min-width: 100px;
  min-height: 100px;
  max-width: 100%;
  max-height: 100%;
  background-color: var(--background-white-color);
  box-shadow: 2px 3px 6px #0000004d;
  border-radius: 10px;
  position: relative;
  padding: 1rem;
}

.modal-close-btn {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  color: var(--main-text-color);
}

.modal .material-icons {
  color: var(--main-text-color);
}
/* #endregion */

/* #region scroll */
.scroll-wrapper {
  overflow: hidden !important;
  padding: 0 !important;
  position: relative;
}

.scroll-wrapper > .scroll-content {
  border: none !important;
  box-sizing: content-box !important;
  height: auto;
  left: 0;
  margin: 0;
  max-height: none;
  max-width: none !important;
  overflow: scroll !important;
  padding: 0;
  position: relative !important;
  top: 0;
  width: auto !important;
}

.scroll-wrapper > .scroll-content::-webkit-scrollbar {
  height: 0;
  width: 0;
}

/***************SCROLL***************/
.scroll-element {
  display: none;
}

.scroll-element,
.scroll-element div {
  box-sizing: content-box;
}

.scroll-element.scroll-x.scroll-scrollx_visible,
.scroll-element.scroll-y.scroll-scrolly_visible {
  display: block;
}

.scroll-element .scroll-bar,
.scroll-element .scroll-arrow {
  cursor: default;
}

.scroll-textarea {
  border: 1px solid #cccccc;
  border-top-color: #999999;
}

.scroll-textarea > .scroll-content {
  overflow: hidden !important;
}

.scroll-textarea > .scroll-content > textarea {
  border: none !important;
  box-sizing: border-box;
  height: 100% !important;
  margin: 0;
  max-height: none !important;
  max-width: none !important;
  overflow: scroll !important;
  outline: none;
  padding: 2px;
  position: relative !important;
  top: 0;
  width: 100% !important;
}

.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {
  height: 0;
  width: 0;
}

/*************** SIMPLE INNER SCROLLBAR ***************/

.inner-scroll > .scroll-element,
.inner-scroll > .scroll-element div {
  border: none;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 10;
}

.inner-scroll > .scroll-element div {
  display: block;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

.inner-scroll > .scroll-element.scroll-x {
  bottom: 5px;
  height: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 30px);
}

.inner-scroll > .scroll-element.scroll-y {
  height: calc(100% - 30px);
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
}

.inner-scroll > .scroll-element .scroll-element_outer {
  overflow: hidden;
}

.inner-scroll > .scroll-element .scroll-element_outer,
.inner-scroll > .scroll-element .scroll-element_track,
.inner-scroll > .scroll-element .scroll-bar {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}

.inner-scroll > .scroll-element .scroll-element_track,
.inner-scroll > .scroll-element .scroll-bar {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  filter: alpha(opacity=40);
  opacity: 0.4;
}

.inner-scroll > .scroll-element .scroll-element_track {
  background-color: #e0e0e0;
}

.inner-scroll > .scroll-element .scroll-bar {
  background-color: #c2c2c2;
}

.inner-scroll > .scroll-element:hover .scroll-bar {
  background-color: #919191;
}

.inner-scroll > .scroll-element.scroll-draggable .scroll-bar {
  background-color: #919191;
}

/* update scrollbar offset if both scrolls are visible */

.inner-scroll > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track {
  left: -12px;
}

.inner-scroll > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track {
  top: -12px;
}

.inner-scroll > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {
  left: -12px;
}

.inner-scroll > .scroll-element.scroll-y.scroll-scrollx_visible .scrollscroll-xelement_size {
  top: -12px;
}

/** custom inner-scroll design **/

.inner-scroll:has(.edms-draft-info-wrap) {
  border-radius: 0px 0px 10px 10px;
  box-shadow: 0px 3px 6px #00000029;
}

.inner-scroll .expense-table {
  width: fit-content;
}

.inner-scroll tr.sum-row {
  height: 50px;
}

.inner-scroll.hide-scroll .scroll-x {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.inner-scroll.hide-scroll .scroll-y {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
/* #endregion */

/* #region default-textarea */
.default-textarea {
  --default-textarea-box-width: 100%;
  --default-textarea-box-height: 70px;
}
.default-textarea {
  border: 1px solid var(--input-border-color);
  background-color: var(--input-back-color);
  display: flex;
  gap: 5px;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  height: var(--default-textarea-box-height);
  width: var(--default-textarea-box-width);
}
.default-textarea textarea {
  height: 100%;
  width: 100%;
}
.default-textarea.rounded-input {
  border-radius: var(--input-rounded-size);
}
.default-textarea:has(textarea:read-only) {
  background-color: var(--input-readonly-back-color);
}
.default-textarea:has(textarea:disabled) {
  background-color: var(--input-disable-back-color);
}
/* #endregion */

/******************************************************************
** frame work 7의 기본 스타일 변경
*******************************************************************/
.dialog {
  max-width: 100%;
  max-height: 100%;
  min-width: fit-content;
  width: 280px;
  margin: 0;
}
.dialog.modal-in {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.content-area-WEB.ss-container > .ss-wrapper .ss-content .page {
  width: 100%;
  min-width: 100%;
}
/******************************************************************
** media query
*******************************************************************/

/* #region 모바일 전체 (해상도 1023px ~ ) */
@media all and (max-width: 1023px) {
  .container.m-container {
    --ss-scroll-right-bottom: 3px;
    --ss-scrollbar-size: 5px;

    --mobile-padding-size: 15px;
    --mobile-gab-size: 10px;
  }
  .container.m-container {
    width: 100dvw;
  }
  .m-container.ss-container {
    --ss-scroll-right-bottom: 3px;
    --ss-scrollbar-size: 5px;
  }
  .m-container .page-block-wrapper {
    min-height: 100%;
    min-width: 0;
    height: fit-content;
    padding: 15px;
  }
  .m-container .page-block {
    min-height: 100%;
    height: auto;
    box-shadow: none;
    border-radius: 0;
    background-color: transparent;
    gap: 10px;
  }
  .m-container .page-block-header {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    height: fit-content;
    flex-wrap: wrap;
  }
  .m-container .page-block-header .block-header-text {
    color: var(--main-text-color);
    font-weight: var(--bold-font);
    gap: 5px;
  }
  .m-container .page-block-body {
    padding: 0;
  }
  /* #region modal */
  .modal-body {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
  /* #endregion */

  /* #region default-radio */
  .default-radio {
    font-size: var(--sm-font);
  }
  /* #endregion */

  /* #region default-checkbox */

  /* #region toggle-checkbox */
  .toggle-checkbox {
    --toggle-checkbox-width: calc(var(--toggle-checkbox-height) * 2);
    --toggle-checkbox-height: 30px;
    --toggle-checkbox-border-radius: var(--toggle-checkbox-height);
    --toggle-checkbox-check-thumb-size: calc(var(--toggle-checkbox-height) - var(--toggle-checkbox-check-thumb-offset) * 2);
    /* --toggle-checkbox-check-thumb-offset: calc((var(--toggle-checkbox-height) - var(--toggle-checkbox-check-thumb-size)) / 2); */
    --toggle-checkbox-check-thumb-offset: 3px;
    --toggle-checkbox-check-thumb-border-radius: 50%;
    --toggle-checkbox-checked-border-size: 2px;
  }
  /* #endregion */
  /* #endregion */

  /* #region button */
  .button {
    height: 30px;
    min-width: 80px;
  }
  /* #endregion */

  #NamoSE_Ifr__crossEditorTextarea {
    width: 100% !important;
  }
}
/* #endregion */

/* #region 상세 media query */

/* #region 테블릿 가로 (해상도 768px ~ 1023px) */
@media all and (min-width: 768px) and (max-width: 1023px) {
}
/* #endregion */

/* #region 모바일 가로 & 테블릿 세로 (해상도 480px ~ 767px) */
@media all and (min-width: 480px) and (max-width: 767px) {
}
/* #endregion */

/* #region 모바일 세로 (해상도 ~ 479px) */
@media all and (max-width: 479px) {
}
/* #endregion */

/* #endregion */