@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css') layer(reset);
@layer reset, print,base, atom, molecules, organisms, template, page, utillity;
/* 기초정의 */
@layer reset{
/* -------------------------------------------------------------------------- */
/*                                    Reset                                   */
/* -------------------------------------------------------------------------- */
:where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    div,
    p,
    blockquote,
    pre,
    code,
    address,
    ul,
    ol,
    li,
    nav,
    section,
    article,
    header,
    footer,
    main,
    aside,
    dl,
    dt,
    dd,
    table,
    thead,
    tbody,
    tfoot,
    label,
    caption,
    th,
    td,
    form,
    fieldset,
    legend,
    hr,
    input,
    button,
    textarea,
    object,
    figure,
    figcaption,
    span,
    em,
    strong,
    i,
    b,
    u,
    ins
  ) {
  margin: 0;
  padding: 0;
  /* font-family: "Noto Sans KR", sans-serif; */
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui,
    Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic',
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}

:where(body, input, select, textarea, button, img, fieldset) {
  border: none;
}

:where(ul, ol, li) {
  list-style: none;
}

:where(table) {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

:where(address, cite, code, em, i) {
  font-style: normal;
  font-weight: normal;
}

:where(u, ins, a) {
  text-decoration: none;
}

:where(button) {
  background-color: unset;
}

:where(a) {
  color: inherit;
}

:where(button, label, select, summary, [role='button'], [role='option']) {
  cursor: pointer;
}

:where(:disabled, :disabled + label) {
  cursor: not-allowed;
}

:where(input, button, textarea, select) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
}

/* -------------------------------------------------------------------------- */
/*                                  Normalize                                 */
/* -------------------------------------------------------------------------- */
:where(
    input[type='number']::-webkit-inner-spin-button,
    input[type='number']::-webkit-outer-spin-button
  ) {
  -webkit-appearance: none;
}

:where(input[type='number']) {
  -moz-appearance: textfield;
}

:where(
    input[type='number'],
    input[type='text'],
    input[type='password'],
    input[type='url'],
    input[type='email'],
    input[type='tel'],
    input[type='date'],
    textarea
  ) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
}
:where(
    input[type='search']::-webkit-search-decoration,
    input[type='search']::-webkit-search-cancel-button,
    input[type='search']::-webkit-search-results-button,
    input[type='search']::-webkit-search-results-decoration
  ) {
  -webkit-appearance: none;
}

:where(input[type='date']) {
  position: relative;
}
:where(input[type='date']::-webkit-clear-button, input[type='date']::-webkit-inner-spin-button) {
  display: none;
}
:where(input[type='date']::-webkit-calendar-picker-indicator) {
  position: absolute;
  left: 0;
  top: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

:where(input[type='date']::before) {
  content: attr(data-placeholder);
  width: 100%;
}

:where(input[type='date']:valid::before) {
  display: none;
}

:where(select) {
  appearance: none;
}

:where(html) {
  padding: 0;
  margin: 0;
  font-size: 62.5%;
  -webkit-text-size-adjust: none;
}

:where(body) {
  padding: 0;
  margin: 0;
  font-size: 1rem;
}

:where(caption, legend, .a11y-hidden) {
  overflow: hidden;
  position: absolute;
  border: 0;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
}

:where(dialog, [popover]) {
  overflow: visible;
  height: auto;
}
}
@layer print{
@media print {
  .header,
  .footer,
  .visual {
    display: none;
  }
  .page-break {
    page-break-before: always;
  }
}
@page {
  margin: 1cm 2cm;
}
.print {
  display: block;
}
@media screen {
  .print {
    display: none;
  }
}
}
@layer base{
body {
  &:has(.join, .login) {
    background-color: var(--gray150);
  }
}
}
/* 유틸리티 클래스 단독사용 방지용 */
[class]:not([class*=' ']) {
  &.xxxs,
  &.xxs,
  &.xs,
  &.sm,
  &.base,
  &.md,
  &.lg,
  &.xl,
  &.xxl,
  &.xxxl {
    &::after {
      content: attr(class) '(은)는 단독으로 사용할 수 없습니다.';
      display: block;
      color: tomato;
    }
  }
}
/* 영역 확인용 */
.debug {
  * {
    outline: 2px solid red !important;
    * {
      outline: 2px solid seagreen !important;
      * {
        outline: 2px solid slateblue !important;
        * {
          outline: 2px solid orange !important;
          * {
            outline: 2px solid salmon !important;
          }
        }
      }
    }
  }
}
.debug2 {
  * {
    background-color: rgba(0, 0, 0, 0.05) !important;
  }
}
/* 대체텍스트 점검 */
.alt {
  * {
    &:has(img:not([alt])),
    &:has(img[alt='']) {
      &::after {
        content: '대체텍스트를 넣어주세요';
        position: absolute;
        left: 0;
        top: -1.5rem;
        white-space: nowrap;
        font-size: 1.2rem;
        color: red;
        background-color: var(--white);
      }
    }
  }
}
/* 원자 */
@layer atom.variable{
/* -------------------------------------------------------------------------- */
/*                                    전역CSS                                 */
/* -------------------------------------------------------------------------- */
:root {
  --white: #ffffff;
  --black: #000;

  --gray900: #262626;
  --gray800: #333;
  --gray600: #666;
  --gray500: #767676;
  --gray400: #999;
  --gray300: #ccc;
  --gray250: #e1e1e1;
  --gray220: #e6e6e6;
  --gray200: #ececec;
  --gray150: #f6f6f6;
  --gray120: #f4f4f4;
  --gray110: #fbfbfb;
  --gray100: #fafafa;

  --yellow100: #fffbee;

  --orange600: #ff6226;

  --blue600: #0054ff;
  --blue300: #5386ee;
  --blue100: #f6f9ff;

  --skyblue400: #1ec3f8;

  --primary: var(--blue600);
  --secondary: var(--orange600);

  /* --font-xs: ; */
  --font-sm: 1.2rem;
  --font-base: 1.4rem;
  --font-md: 1.6rem;
  /* --font-lg: ; */
  --font-xl: 2rem;
  --font-2xl: 3.2rem;
  --font-3xl: 3.4rem;

  --lh-sm: 1.2;
  --lh-base: normal;
  --lh-md: 1.8;

  --ls-sm: -0.02rem;
  --ls-base: 0;
  --ls-md: 0.01rem;
  --ls-2xl: -0.032rem;
}
}
@layer utillity{
/* -------------------------------------------------------------------------- */
/*                                    Align                                   */
/* -------------------------------------------------------------------------- */
.align {
  display: flex;
}
.align.both {
  justify-content: space-between;
}
.align.right {
  justify-content: end;
}
.align.center {
  justify-content: center;
}
.align.triple {
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  > * {
    justify-self: center;
  }
  > *:first-child {
    justify-self: start;
  }
  > *:last-child {
    justify-self: end;
  }
}
.align.vt {
  align-items: start;
}
.align.vm {
  align-items: center;
}
.align.vb {
  align-items: end;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-left {
  text-align: left;
}
.align.vertical {
  flex-direction: column;
}

/* -------------------------------------------------------------------------- */
/*                                   Rounded                                  */
/* -------------------------------------------------------------------------- */
.rounded-base {
  border-radius: 0.8rem;
}
.rounded-full {
  border-radius: calc(infinity * 1rem);
}

/* -------------------------------------------------------------------------- */
/*                                    Size                                    */
/* -------------------------------------------------------------------------- */
.w-full {
  width: 100%;
  box-sizing: border-box;
}
}
@layer utillity.spacing{
/* -------------------------------------------------------------------------- */
/*                                   Spacing                                  */
/* -------------------------------------------------------------------------- */
.mt4 {
  margin-top: 0.4rem;
}
.mt8 {
  margin-top: 0.8rem;
}
.mt12 {
  margin-top: 1.2rem;
}
.mt18 {
  margin-top: 1.8rem;
}
.mt20 {
  margin-top: 2rem;
}
.mt24 {
  margin-top: 2.4rem;
}
.mt28 {
  margin-top: 2.8rem;
}
.mt40 {
  margin-top: 4rem;
}
.mt60 {
  margin-top: 4rem;
}

.ml8 {
  margin-left: 0.8rem;
}
.ml12 {
  margin-left: 1.2rem;
}
.ml20 {
  margin-left: 2rem;
}
.ml40 {
  margin-left: 4rem;
}
}
@layer atom.typography{
body {
  font-size: var(--fs, var(--font-base));
  color: var(--gray600);
}
.text-xs {
  color: var(--color, var(--gray600));
  font-size: var(--fs, var(--font-xs));
  line-height: var(--lh, var(--lh-xs));
  letter-spacing: var(--ls, var(--ls-xs));
  font-weight: var(--fw, 400);
}
.text-sm {
  color: var(--color, var(--gray600));
  font-size: var(--fs, var(--font-sm));
  line-height: var(--lh, var(--lh-sm));
  letter-spacing: var(--ls, var(--ls-sm));
  font-weight: var(--fw, 400);
}
.text-base {
  color: var(--color, var(--gray600));
  font-size: var(--fs, var(--font-base));
  line-height: var(--lh, var(--lh-base));
  letter-spacing: var(--ls, var(--ls-base));
  font-weight: var(--fw, 400);
}
.text-md {
  color: var(--color, var(--gray800));
  font-size: var(--fs, var(--font-md));
  line-height: var(--lh, var(--lh-md));
  letter-spacing: var(--ls, var(--ls-md));
  font-weight: var(--fw, 700);
}
.text-lg {
  color: var(--color, var(--gray600));
  font-size: var(--fs, var(--font-lg));
  line-height: var(--lh, var(--lh-lg));
  letter-spacing: var(--ls, var(--ls-lg));
  font-weight: var(--fw, 400);
}
.text-xl {
  color: var(--color, var(--gray600));
  font-size: var(--fs, var(--font-xl));
  line-height: var(--lh, var(--lh-xl));
  letter-spacing: var(--ls, var(--ls-xl));
  font-weight: var(--fw, 400);
}
.text-2xl {
  color: var(--color, var(--gray800));
  font-size: var(--fs, var(--font-2xl));
  line-height: var(--lh, var(--lh-2xl));
  letter-spacing: var(--ls, var(--ls-2xl));
  font-weight: var(--fw, 800);
}
.text-3xl {
  color: var(--color, var(--gray600));
  font-size: var(--fs, var(--font-3xl));
  line-height: var(--lh, var(--lh-3xl));
  letter-spacing: var(--ls, var(--ls-3xl));
  font-weight: var(--fw, 400);
}

/* strong,
b {
  &[class*='text-'] {
    font-weight: var(--fw, 700);
  }
} */

.link {
  text-decoration: underline 1px;
  text-decoration-color: var(--gray800);
  text-underline-offset: 3px;
  font-weight: 500;
}
.link-type2 {
  &:hover {
    color: var(--primary);
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: -0.016rem;
    text-decoration: underline;
  }
}

.ellipsis {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--length, 1);
}

.heading-group {
  &::after {
    content: attr(data-subtitle);
    display: block;
    color: var(--color, var(--gray600));
    font-size: var(--fs, var(--font-base));
    line-height: var(--lh, var(--lh-base));
    letter-spacing: var(--ls, var(--ls-base));
    font-weight: var(--fw, 400);
    margin-top: 1.2rem;
  }
}

/* -------------------------------------------------------------------------- */
/*                                 Text Color                                 */
/* -------------------------------------------------------------------------- */
.text-primary {
  color: var(--primary);
}
.text-secondary {
  color: var(--secondary);
}
.text-dark {
  color: var(--gray800);
}
.text-light {
  color: var(--gray400);
}
}
/* 분자 */
@layer atom.button{

.btn {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  text-align: center;
  justify-content: center;
  border-radius: var(--rounded, 0.4rem);
  font-weight: 700;
  gap: 0.4rem;
  white-space: nowrap;
  line-height: 1;

  /* -------------------------------------------------------------------------- */
  /*                                    크기정의                                  */
  /* -------------------------------------------------------------------------- */
  &.xs {
    --px: 0.95rem;
    --py: 0.7rem;

    padding-inline: var(--px);
    padding-block: var(--py);
    font-size: var(--fs, var(--font-sm));
  }
  &.sm {
    --px: 1.9rem;
    --py: 0.7rem;

    padding-inline: var(--px);
    padding-block: var(--py);
    font-size: var(--fs, var(--font-sm));
  }
  &.base {
    --px: 1.8rem;
    --py: 1rem;

    padding-inline: var(--px);
    padding-block: var(--py);
    font-size: var(--fs, var(--font-base));
  }
  &.md {
    --px: 3rem;
    --py: 1.2rem;

    padding-inline: var(--px);
    padding-block: var(--py);
    font-size: var(--fs, var(--font-md));
  }
  &.lg {
    --px: 1.8rem;
    --py: 1.5rem;

    padding-inline: var(--px);
    padding-block: var(--py);
    font-size: var(--fs, var(--font-base));
    line-height: 1;
  }
  &.fullsize {
    width: 100%;
  }

  /* -------------------------------------------------------------------------- */
  /*                                    색상정의                                  */
  /* -------------------------------------------------------------------------- */
  &.primary {
    color: var(--white);
    background-color: var(--primary);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--primary);
  }
  &.secondary {
    color: var(--gray600);
    background-color: var(--white);
    border: 1px solid var(--gray400);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  }
  &.dark {
    color: var(--white);
    background-color: var(--gray800);
    border: 1px solid var(--gray800);
  }
  &.light {
    color: var(--white);
    background-color: var(--gray300);
    border: 1px solid var(--gray300);
  }
  &:disabled {
    opacity: 0.2;
  }

  /* -------------------------------------------------------------------------- */
  /*                                    아이콘정의                                */
  /* -------------------------------------------------------------------------- */
  &[class*='ico'] {
    &[class*='left'] {
      &::before {
        content: '';
        width: var(--width);
        aspect-ratio: 1;
        background: var(--bg) no-repeat center / contain;
      }
    }
    &[class*='right'] {
      &::after {
        content: '';
        width: var(--width);
        aspect-ratio: 1;
        background: var(--bg) no-repeat center / contain;
      }
    }
  }
  &.ico1 {
    --width: 1rem;
    --bg: url('../images/ico_check.svg');
  }
  &.ico2 {
    --width: 1.2rem;
    --bg: url('../images/ico_file.svg');
  }
}

/* -------------------------------------------------------------------------- */
/*                                    아이콘전용                                */
/* -------------------------------------------------------------------------- */
.ico-button {
  --size: var(--icon-size, 3rem);
  --rounded: 0;

  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--size);
  aspect-ratio: 1;
  border-radius: var(--rounded, 0);
  background-color: transparent;
  cursor: pointer;
  position: relative;

  /* 아이콘 유효성 검사 */
  &:has(svg:not(svg[aria-hidden='true'])) {
    &::after {
      content: 'svg에 aria-hidden을 정의하세요';
      position: absolute;
      left: 0;
      top: -1.5rem;
      white-space: nowrap;
      font-size: 1.2rem;
      color: red;
      background-color: var(--white);
    }
  }
  &:not([aria-label]) {
    &::after {
      content: 'button에 aria-label에 대체텍스트를 넣어주세요';
      position: absolute;
      left: 0;
      top: -1.5rem;
      white-space: nowrap;
      font-size: 1.2rem;
      color: red;
      background-color: var(--white);
    }
  }

  /* 아이콘 크기 정의 */
  &.xs {
    --icon-size: 1.5rem;
  }
  &.sm {
    --icon-size: 1.6rem;
  }
  &.base {
    --icon-size: 2rem;
  }
  &.md {
    --icon-size: 2.5rem;
  }
  &.lg {
    --icon-size: 2.8rem;
  }
}

/* -------------------------------------------------------------------------- */
/*                                    버튼그룹                                  */
/* -------------------------------------------------------------------------- */
.btn-group {
  display: inline-flex;
  gap: 0.8rem;
  &.fixed {
    position: sticky;
    inset: auto 0 -2.8rem;
    background-color: var(--white);
    padding-bottom: 2.8rem;
  }
}

/* -------------------------------------------------------------------------- */
/*                                    기타버튼                                  */
/* -------------------------------------------------------------------------- */
.btn-payment1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.2rem;
  width: 100%;
  height: 12rem;
  padding: 1rem 1.4rem;
  border-radius: 1.2rem;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02rem;
  color: var(--white);
  background-color: var(--blue300);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  &::before {
    content: url(../images/ico_pay1.svg);
  }
}
.btn-payment2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.2rem;
  width: 100%;
  height: 12rem;
  padding: 1rem 1.4rem;
  border-radius: 1.2rem;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02rem;
  color: var(--white);
  background-color: var(--skyblue400);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  &::before {
    content: url(../images/ico_pay2.svg);
  }
}

.btn-calendar {
  width: 4.6rem;
  aspect-ratio: 1;
  background: url(../images/ico_calendar.svg) no-repeat center / 2rem auto var(--gray800);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border-radius: 0.4rem;
}
.btn-del {
  width: 2.2rem;
  aspect-ratio: 1;
  background: url(../images/btn_del.svg) no-repeat center;
}
}
@layer atom.badge{
.badge {
  --paddingX: 0.6rem;
  --paddingY: 0.4rem;
  --fontSize: 1.4rem;
  --radius: 0.8rem;

  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  text-align: center;
  justify-content: center;
  padding-inline: var(--paddingX);
  padding-block: var(--paddingY);
  font-size: var(--fontSize, var(--font-base));
  border-radius: var(--radius);

  /* -------------------------------------------------------------------------- */
  /*                                    색상정의                                  */
  /* -------------------------------------------------------------------------- */
  &.white {
    color: var(--gray400);
    background-color: var(--white);
    border: 1px solid var(--gray300);
  }
  &.white2 {
    --paddingX: 0.8rem;
    --radius: 10rem;
    --fontSize: 1.2rem;

    color: var(--gray800);
    background-color: var(--white);
    border: 1px solid var(--gray300);
    font-weight: 500;
  }
  &.light {
    --paddingX: 0.8rem;
    --fontSize: 1.2rem;
    font-weight: 500;
    --radius: 10rem;
    color: var(--gray400);
    background-color: rgba(0, 0, 0, 0.05);
  }
}
}
@layer molecules.textfield{
.text-field {
  --paddingX: 1.4rem;
  --width: auto;
  --height: 4.6rem;
  --borderColor: var(--gray300);
  --rounded: 0.4rem;
  --fontSize: 1.4rem;
  --color: var(--gray800);
  --placeholderColor: var(--gray300);
  --disabled: 0.4;
  --hoverBorderColor: var(--gray300);
  --focusBorderColor: var(--gray300);

  padding-inline: var(--paddingX);
  padding-block: var(--paddingY, 0);
  width: var(--width);
  height: var(--height);
  border: 1px solid var(--borderColor);
  border-radius: var(--rounded);
  box-sizing: border-box;
  color: var(--color);
  font-size: var(--fontSize);
  &::placeholder {
    color: var(--placeholderColor);
  }
  &:hover {
    border-color: var(--hoverBorderColor);
  }
  &:focus {
    border-color: var(--focusBorderColor);
    outline: none;
  }
  &:disabled {
    opacity: var(--disabled);
  }
  &:read-only {
    --color: var(--gray300);
    background-color: var(--gray100);
  }
  &.error {
    border: 1px solid var(--secondary);
    color: var(--danger);
  }
}
textarea {
  &.text-field {
    --width: 100%;
    --height: 10rem;
    --paddingY: 1rem;
    resize: vertical;
  }
}
}
@layer molecules.radio{

.radio {
  --offImage: url(../images/ico_radio_off.svg);
  --onImage: url(../images/ico_radio_on.svg);
  --fontSize: 1.4rem;
  --offColor: var(--gray600);
  --onColor: var(--gray600);
  --pl: 3.2rem;
  --height: 2.4rem;

  display: inline-flex;
  align-items: center;

  input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    &:checked {
      + label {
        color: var(--onColor);
        background: var(--onImage) no-repeat left;
      }
    }
    &:focus {
      + label {
        outline: 2px solid #000;
        border-radius: 2px;
      }
    }
  }
  label {
    padding-left: var(--pl);
    background: var(--offImage) no-repeat left;
    font-size: var(--fontSize);
    color: var(--offColor);
    height: var(--height);
    align-content: center;
  }

  &:has(label:empty) {
    --pl: 24px;
  }
}

.radio-group {
  display: flex;
  gap: 2rem;
}
}
@layer molecules.checkbox{

.checkbox {
  --offImage: url(../images/ico_check_off.svg);
  --onImage: url(../images/ico_check_on.svg);
  --fontSize: 1.4rem;
  --offColor: var(--gray600);
  --onColor: var(--gray600);
  --pl: 3.2rem;
  --height: 2.4rem;

  display: inline-flex;
  align-items: center;

  input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    &:checked {
      + label {
        color: var(--onColor);
        background: var(--onImage) no-repeat left;
      }
    }
    &:focus {
      + label {
        outline: 2px solid #000;
        border-radius: 2px;
      }
    }
    &:disabled {
      + label {
        opacity: 0.2;
      }
    }
  }
  label {
    padding-left: var(--pl);
    background: var(--offImage) no-repeat left;
    font-size: var(--fontSize);
    color: var(--offColor);
    height: var(--height);
    align-content: center;
  }

  &:has(label:empty) {
    --pl: 24px;
  }
}

.check-option {
  .checked-block {
    display: none;
  }
  &:has(:checked) {
    .checked-block {
      display: block;
    }
  }
}

.check-group {
  display: grid;
  gap: 0.8rem;
  &.scroll {
    max-height: var(--height, 9rem);
    overflow: auto;
  }
}
}
@layer molecules.select{
.select {
  --height: 4.6rem;
  --pl: 1.4rem;
  --pr: 3.2rem;
  --rounded: 0.4rem;
  --borderColor: silver;
  --arrowImage: url(../images/ico_select.svg);
  --bgColor: var(--white);
  --fontSize: 1.6rem;
  --fontColor: var(--gray800);

  min-width: var(--width);
  height: var(--height);
  padding-inline: var(--pl) var(--pr);
  border-radius: var(--rounded);
  border: 1px solid var(--borderColor);
  background: var(--arrowImage) no-repeat right var(--pl) center var(--bgColor);
  color: var(--fontColor);
  font-size: var(--fontSize);
  appearance: none;
  &.error {
    --borderColor: var(--orange600);
  }
  &[readonly] {
    --color: var(--gray300);
    background-color: var(--gray100);
  }
  &[disabled] {
    --color: var(--gray300);
    background-color: var(--gray100);
  }
}
}
@layer molecules.switch{
.switch {
  --width: 3.6rem;
  --height: 2rem;
  --padding: 0.3rem;
  --borderColor: transparent;
  --offColor: var(--white);
  --offBgColor: var(--gray300);
  --onColor: var(--white);
  --onBgColor: var(--primary);
  --textColor: #000;

  input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);

    &:checked {
      + label {
        background-color: var(--onBgColor);
        justify-content: start;

        &::before {
          left: 100%;
          translate: calc(-100% - 2px) -50%;
          background-color: var(--onColor);
        }
        &::after {
          content: attr(data-on);
        }
      }
    }
    &:focus {
      + label {
        outline: 1px solid var(--gray600);
        outline-offset: 2px;
      }
    }
  }
  label {
    position: relative;
    z-index: 10;
    display: inline-flex;
    border-radius: var(--width);
    width: var(--width);
    height: var(--height);
    padding: var(--padding) calc(var(--padding) * 4);
    border: 1px solid var(--borderColor);
    align-items: center;
    justify-content: end;
    transition: 0.4s;
    background-color: var(--offBgColor);
    box-sizing: border-box;
    &::before {
      --left: var(--padding);
      --cricle: calc(var(--height) - (var(--left) * 3));

      content: '';
      position: absolute;
      left: var(--left);
      top: 50%;
      translate: 0 -50%;
      width: var(--cricle);
      height: var(--cricle);
      border-radius: 100%;
      background-color: var(--offColor);
      transition: 0.4s;
    }
    &::after {
      content: attr(data-off);
      text-align: center;
      white-space: nowrap;
      line-height: 1;
      transition: 0.4s;
      color: var(--textColor);
    }
  }
}
}
@layer molecules.chip{
.chip {
  --borderOnColor: var(--primary);
  --borderOffColor: var(--gray300);
  --fontOnColor: var(--primary);
  --fontOffColor: var(--gray800);
  --bgOnColor: var(--white);
  --bgOffColor: var(--white);
  --px: 1.4rem;
  --py: 1rem;
  --fontSize: 1.2rem;
  --rounded: 0.4rem;
  --gap: 0.8rem;

  display: flex;
  align-items: center;
  gap: var(--gap);

  .reset {
    height: 3.4rem;
  }

  &.lg {
    --px: 2.6rem;
    --py: 1.35rem;
    --fontSize: 1.6rem;
    --rounded: 0.4rem;
    --gap: 0.8rem;
  }

  input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    &:checked {
      + label {
        border-color: var(--borderOnColor);
        background-color: var(--bgOnColor);
        color: var(--fontOnColor);
      }
    }
    &:focus {
      + label {
        outline: 2px solid #000;
        outline-offset: 2px;
      }
    }
  }
  label {
    padding: var(--py) var(--px);
    border: 1px solid var(--borderOffColor);
    background-color: var(--bgOffColor);
    border-radius: var(--rounded);
    font-size: var(--fontSize);
    color: var(--fontOffColor);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    line-height: 1;
  }
}
}
@layer molecules.floatingLabel{
.floating-label {
  position: relative;
  font-size: 16px;
  input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--gray700);
    font-size: 16px;
    box-sizing: border-box;
  }
  label {
    position: absolute;
    left: 10px;
    top: 10px;
    transition: 0.3s ease-out;
    color: var(--gray600);
    background-color: white;
  }
  input:focus + label,
  input:not(:placeholder-shown) + label {
    top: -10px;
    font-size: 12px;
    color: var(--blue400);
    padding: 4px 10px;
  }
}
}
@layer molecules.date{

input[type='date'] {
  --bg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>');
  --paddingRight: 1.5rem;
  --paddingLeft: 0.5rem;
  --height: 4.6rem;
  --rounded: 0.3rem;
  --borderColor: var(--gray400);

  position: relative;
  padding-inline: var(--paddingLeft) var(--paddingRight);
  border: 1px solid var(--borderColor);
  height: var(--height);
  border-radius: var(--rounded);

  &::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    background: none;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  &::after {
    content: attr(data-placeholder);
    position: absolute;
    left: var(--paddingLeft);
    top: 50%;
    translate: 0 -50%;
  }
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background: no-repeat right 0.2rem center / 2.5rem auto #fff;
    background-image: var(--bg);
  }
  &:valid {
    &::after {
      display: none;
    }
    &::before {
      background-color: transparent;
    }
  }
}

.date-month {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  .selection {
    display: inline-grid;
    grid-template-columns: 3rem min-content 3rem;
    border-radius: 0.4rem;
    border: 1px solid var(--gray300);
    background: var(--white);
    height: 4.6rem;
    box-sizing: border-box;
    > button {
      background: var(--bg) no-repeat center;
    }
    .prev {
      --bg: url(../images/ico_prev_month.svg);
    }
    .next {
      --bg: url(../images/ico_next_month.svg);
    }
    > span {
      align-self: center;
      color: var(--gray800);
      white-space: nowrap;
      font-weight: 500;
      letter-spacing: -0.016rem;
    }
  }
}
}
@layer molecules.file{
.add-file {
  display: inline-flex;
  font-size: 0;
  input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
  }
  label {
    width: 2rem;
    aspect-ratio: 1;
    background: url(../images/ico_file.svg) no-repeat center;
  }
}
}
@layer molecules.pipe{

.pipe-type1 {
  --width: 1px;
  --height: 10px;
  --marginX: 1rem;
  --bg: var(--gray600);
}

[class*='pipe-'] {
  display: inline-flex;
  align-items: center;
  > * {
    display: flex;
    align-items: center;
    + * {
      &::before {
        content: '';
        width: var(--width);
        height: var(--height);
        margin-inline: var(--marginX);
        background: var(--bg);
      }
    }
  }
}
}
@layer molecules.step{
.step {
  display: inline-flex;
  gap: 5.2rem;
  li {
    width: 8.4rem;
    aspect-ratio: 1;
    text-align: center;
    align-content: center;
    color: var(--gray300);
    font-style: 1.4rem;
    font-weight: 700;
    line-height: 1.6rem;
    letter-spacing: -0.014rem;
    background: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2284%22%20height%3D%2285%22%20viewBox%3D%220%200%2084%2085%22%20fill%3D%22none%22%3E%20%20%20%3Cpath%20d%3D%22M84%2042.5C84%2065.696%2084%2084.5%2042%2084.5C0%2084.5%200%2065.696%200%2042.5C0%2019.304%200%200.5%2042%200.5C84%200.5%2084%2019.304%2084%2042.5Z%22%20fill%3D%22white%22%2F%3E%20%3C%2Fsvg%3E);
    background-size: 100% auto;
    &.active {
      color: var(--primary);
    }
    + li {
      position: relative;
      &::before {
        content: '';
        position: absolute;
        left: -3.2rem;
        top: 50%;
        translate: 0 -50%;
        width: 1.2rem;
        height: 0.4rem;
        background-color: var(--gray300);
        border-radius: 4rem;
      }
    }

    strong {
      display: block;
      margin-bottom: 0.8rem;
      font-size: 3.4rem;
      font-weight: 800;
      line-height: 1.6rem;
      letter-spacing: -0.034rem;
    }
  }
}
}
@layer molecules.block{
.block-type1 {
  padding: 6rem;
  background-color: var(--white);
  border: 1px solid var(--primary);
  border-radius: 2.4rem;
  box-shadow: 36px 36px 36px 0px rgba(0, 0, 0, 0.05);
}
.block-type2 {
  padding: 2rem;
  background-color: var(--white);
  border: 1px solid var(--gray300);
  border-radius: 1.4rem;
}
.block-type3 {
  padding: 2.4rem;
  background-color: var(--white);
  border: 1px solid var(--gray250);
  border-radius: 0.4rem;
}
.block-type4 {
  padding: 2rem;
  background-color: var(--white);
  border: 1px solid var(--gray300);
}

.scroll-box {
  padding: 2rem;
  border: 1px solid var(--gray250);
  background-color: var(--white);
  height: var(--height, 18rem);
  overflow: auto;
}
}
@layer molecules.pagination{
.pagination {
  display: flex;
  align-items: center;
  ol {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-inline: 2rem;
  }
  a {
    display: block;
    width: 3.2rem;
    aspect-ratio: 1;
    align-content: center;
    text-align: center;
    color: var(--gray400);
    font-size: 1.4rem;
    letter-spacing: -0.028rem;
    border-radius: 100%;
    border: 1px solid transparent;
    box-sizing: border-box;
    &[aria-current] {
      color: var(--primary);
      font-size: 1.6rem;
      font-weight: 700;
      letter-spacing: -0.032rem;
      border-color: var(--primary);
    }
  }
  button {
    width: 3.2rem;
    aspect-ratio: 1;
    background: var(--bg) no-repeat center;
  }
  .btn-prev {
    --bg: url(../images/ico_prev.svg);
  }
  .btn-next {
    --bg: url(../images/ico_next.svg);
  }
}
}
@layer molecules.tab{

.tab-type1 {
  display: flex;
  background: linear-gradient(var(--gray250), var(--gray250)) no-repeat left bottom / 100% 1px;
  button {
    padding-inline: 1.2rem;
    padding-bottom: 1.2rem;
    color: var(--gray400);
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: -0.016rem;
  }
  .active {
    button {
      font-weight: 700;
      color: var(--gray800);
      background: linear-gradient(var(--gray800), var(--gray800)) no-repeat left bottom / 100% 1px;
    }
  }
}

[data-tab-content] {
  display: none;
  &.active {
    display: block;
  }
}
}
@layer molecules.accordion{

.accordion-type1 {
  border-radius: 0.4rem;
  border: 1px solid var(--gray300);
  background: var(--white);
  + .accordion-type1 {
    margin-top: 1.2rem;
  }
  summary {
    padding: 2rem;
    color: var(--gray800);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.016rem;
    list-style: none;
    background: var(--bg, url(../images/ico_details.svg)) no-repeat right 2rem center;
  }
  .content {
    padding: 1.2rem 2rem 2rem;
  }
  &[open] {
    summary {
      --bg: url(../images/ico_details_open.svg);
    }
  }
}

.accordion-type2 {
  overflow: auto;
  height: 32.5rem;
  border-bottom: 1px solid var(--gray300);
  > div {
    border-top: 1px solid var(--gray300);
  }
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    color: var(--gray800);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.016rem;
    &:has(input:checked) {
      + .content {
        display: block;
      }
    }
  }
  .content {
    display: none;
    padding: 0 0 2rem;
  }
}

.accordion-type3 {
  border-radius: 0.4rem;
  border: 1px solid var(--gray300);
  background: var(--white);
  + .accordion-type3 {
    margin-top: 1.2rem;
  }
  summary {
    padding: 2rem;
    color: var(--gray800);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.016rem;
    list-style: none;
    background: var(--bg, url(../images/ico_details.svg)) no-repeat right 2rem center;
  }
  .content {
    padding: 1.2rem 2rem 2rem;
  }
  &[open] {
    summary {
      --bg: url(../images/ico_details_open.svg);
    }
  }
}
}
/* 유기체 */
@layer organisms.table{
.table-type1 {
  thead {
    border-top: 1px solid var(--gray800);
    th {
      padding: 1rem;
      background-color: var(--gray100);
      color: var(--gray600);
      font-size: var(--font-base);
      font-weight: 600;
      letter-spacing: -0.014rem;
    }
  }
  tbody {
    border-top: 1px solid var(--gray200);
    &.text-center {
      --padding: 0.7rem;
    }
    tr {
      border-bottom: 1px solid var(--gray200);
    }
    td {
      padding-block: 1.2rem;
      padding-inline: 0.7rem;
      font-size: 1.6rem;
      &:first-child {
        padding-left: var(--padding, 0);
      }
      &:last-child {
        padding-right: var(--padding, 0);
      }
      .text-field {
        --width: 100%;
      }
    }
  }
  &.hover {
    tbody {
      tr:hover {
        background-color: var(--blue100);
      }
    }
  }
  .active {
    background-color: var(--bg, var(--yellow100));
  }
  .text-md {
    --color: var(--gray600);
    --fw: 500;
  }
  .text-sm {
    --color: var(--gray400);
  }
}
.table-type2 {
  text-align: center;
  th,
  td {
    padding: 0.8rem 0.6rem;
    border: 1px solid var(--gray200);
    color: var(--gray600);
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: -0.011rem;
  }
  thead {
    background-color: var(--gray150);
    th {
      border-bottom: none;
    }
  }
  .active {
    background: rgba(0, 84, 255, 0.2);
  }
}

.table-type3 {
  thead {
    border-top: 1px solid var(--gray800);
    th {
      padding: 1rem;
      background-color: var(--gray100);
      color: var(--gray900);
      font-size: var(--font-base);
      font-weight: 400;
      letter-spacing: -0.014rem;
      border-top: 1px solid var(--gray200);
      border-bottom: 1px solid var(--gray200);
      border-left: 1px solid var(--gray200);

      &:first-child {
        border-left: none;
      }
      &:last-child {
        border-right: none;
      }
    }
    tr:first-child {
      th {
        border-top: none;
      }
    }
    tr:last-child {
      th {
        border-bottom: none;
      }
    }
  }
  tbody {
    border-top: 1px solid var(--gray200);
    &.text-center {
      --padding: 0.7rem;
    }
    tr {
      border-bottom: 1px solid var(--gray200);
      &:first-child {
        td {
          border-top: none;
        }
      }
    }
    td {
      padding-block: 1.2rem;
      padding-inline: 0.7rem;
      font-size: 1.6rem;
      color: var(--gray500);
      border-top: 1px solid var(--gray200);
      border-bottom: 1px solid var(--gray200);
      border-left: 1px solid var(--gray200);

      &:first-child {
        padding-left: var(--padding, 0);
        border-left: none;
      }
      &:last-child {
        padding-right: var(--padding, 0);
        border-right: none;
      }
      .text-field {
        --width: 100%;
      }
    }
  }
  .dark {
    border-left-color: rgba(0, 0, 0, 0.2);
  }
  .line {
    border-left: 1px solid var(--gray200) !important;
  }
}

.table-sort {
  display: inline-block;
  position: relative;
  &.active {
    --rotate: 0;
    ul {
      display: block;
    }
  }
  > button {
    display: flex;
    gap: 1rem;
    align-items: center;
    white-space: nowrap;
    &::after {
      content: url(../images/ico_sort.svg);
      rotate: var(--rotate, 180deg);
      font-size: 0;
    }
  }
  ul {
    display: none;
    position: absolute;
    left: 50%;
    translate: -50%;
    background-color: var(--white);
    border: 1px solid var(--gray300);
    li + li {
      border-top: 1px solid var(--gray300);
    }
    button {
      width: 7.4rem;
      padding-block: 1rem;
      color: var(--gray800);
      font-size: 1.2rem;
      font-weight: 600;
      letter-spacing: -0.072rem;
    }
  }
}

.table-data-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  &.active {
    --rotate: 180deg;
    background-color: transparent;
  }
  &::after {
    content: url(../images/ico_sort.svg);
    rotate: var(--rotate, 0);
    font-size: 0;
  }
  + .table-data-sort {
    margin-left: 1.4rem;
  }
}

table {
  tr:has([data-depth]) {
    background-color: var(--gray120);
  }
  [data-depth] {
    display: grid;
    grid-template-columns: 1fr min-content;
    align-items: center;
    gap: 0.8rem;
    &::after {
      content: url(../images/ico_table_depth.svg);
      rotate: var(--rotate, 0);
      font-size: 0;
      transition: 0.4s;
    }
    &.on {
      --rotate: 180deg;
      background-color: transparent;
    }
  }
  [data-depth-content] {
    display: none;
    background-color: var(--gray110);
    &.on {
      display: table-row;
    }
  }
  .depth2 {
    td:first-child {
      padding-left: 2rem;
      &[colspan] {
        div {
          display: grid;
          grid-template-columns: 6rem 1fr;
          img {
            justify-self: center;
          }
          .link-type2 {
            text-align: left;
          }
        }
      }
    }
  }
  .depth3 {
    td:first-child {
      padding-left: 4rem;
      &[colspan] {
        div {
          display: grid;
          grid-template-columns: 6rem 1fr;
          img {
            justify-self: center;
          }
          .link-type2 {
            text-align: left;
          }
        }
      }
    }
  }
}
}
@layer organisms.formgroup{
.form-member {
  display: grid;
  grid-template-rows: 5.2rem 5.2rem 6rem;
  gap: 0.8rem;
  input {
    padding-left: 4.3rem;
    &::placeholder {
      color: var(--gray400);
    }
    &[type='text'] {
      background: url(../images/ico_login_id.svg) no-repeat 2rem center;
    }
    &[type='password'] {
      background: url(../images/ico_login_pw.svg) no-repeat 2rem center;
    }
    &[type='email'] {
      background: url(../images/ico_login_email.svg) no-repeat 2rem center;
    }
  }
}
.form-row {
  display: grid;
  /* display: flex; */
  gap: 1.2rem;
  .label,
  > label {
    color: var(--color, var(--gray800));
    font-size: var(--fs, var(--font-md));
    line-height: var(--lh, var(--lh-md));
    letter-spacing: var(--ls, var(--ls-md));
    font-weight: var(--fw, 700);
  }
  select {
    --width: 42rem;
    /* justify-self: start; */
  }
}

.form-group {
  display: grid;
  gap: 2rem;
  align-content: start;
}
.form-group2 {
  display: grid;
  gap: 0.8rem;
  .form-row {
    display: grid;
    grid-template-columns: var(--width, 6rem) 1fr;
    gap: 3rem;
    align-items: center;
    .select {
      --width: auto;
    }
  }
  .title {
    font-size: 1.6rem;
    color: var(--gray600);
    font-weight: 500;
    letter-spacing: -0.016rem;
    white-space: nowrap;
  }
}
.form-inline-group {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 1fr var(--col2, min-content);
  align-items: center;
}

.send-message {
  display: grid;
  grid-template-columns: 1fr min-content;
  gap: 0.8rem;
  textarea {
    height: 100%;
    border-color: transparent;
    resize: none;
  }
}

.search-data {
  display: inline-block;
  position: relative;
  input {
    width: var(--width, 20rem);
    padding-right: 4.6rem;
    box-sizing: border-box;
  }
  button {
    position: absolute;
    right: 0;
    top: 0;
    width: 4.6rem;
    aspect-ratio: 1;
  }
}

.form-media {
  display: grid;
  gap: 0.8rem;
  > div {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: 12rem 1fr 6.1rem 6.1rem 10rem;
    select {
      --width: 100%;
    }
  }
}
.form-db {
  display: grid;
  gap: 0.8rem;
  > div {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: 1fr 12rem min-content;
    align-items: center;
    select {
      --width: 100%;
    }
  }
}
.form-age {
  display: grid;
  gap: 0.8rem;
  > div {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: 12rem 12rem min-content 12rem;
    align-items: center;
    select {
      --width: 100%;
    }
  }
}

.form-campaign {
  display: inline-flex;
  gap: 0.8rem;
  align-items: center;
  padding: 1.3rem 2rem;
  input {
    --width: 12rem;
    text-align: right;
    ~ label {
      margin-left: 1.2rem;
    }
  }
  label {
    color: var(--gray800);
    font-size: 1.4rem;
    letter-spacing: -0.014rem;
  }
}

.form-icon {
  display: grid;
  grid-template-columns: 1fr min-content min-content;
  gap: 0.8rem;
}
}
@layer organisms.header{
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.6rem 2.8rem;
  background-color: var(--primary);
  .utillity {
    display: flex;
    gap: 1.2rem;
    align-items: center;
    .log {
      color: rgba(255, 255, 255, 0.6);
    }
    .logout {
      --color: var(--white);
      --fw: 500;
    }
  }
}
}
@layer organisms.sidebar{
.sidebar {
  > li {
    > details > summary,
    > a {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 1.2rem 2.8rem;
      box-sizing: border-box;
      gap: 1.2rem;
      color: var(--gray600);
      font-size: 1.6rem;
      font-weight: 600;
      letter-spacing: -0.016rem;
      &::before {
        content: '';
        width: 2.4rem;
        aspect-ratio: 1;
        background: var(--bg) no-repeat center / contain;
      }
      &.active,
      &:hover {
        color: var(--primary);
        background-color: var(--gray220);
        &::before {
          background: var(--hoverBg) no-repeat center / contain;
        }
      }
    }
    details {
      &[open] {
        summary {
          color: var(--primary);
          background-color: var(--gray220);
          &::before {
            background: var(--hoverBg) no-repeat center / contain;
          }
        }
      }

      summary {
        position: relative;
        list-style: none;
        &::after {
          content: '';
          position: absolute;
          right: 2.8rem;
          top: 50%;
          translate: 0 -50%;
          width: 1rem;
          height: 0.6rem;
          background: url(../images/ico_depth.svg) no-repeat;
        }
      }
      ul {
        display: grid;
        gap: 0.8rem;
        padding-left: 6.3rem;
        padding-bottom: 2rem;
      }
      a {
        color: var(--gray600);
        font-size: 1.4rem;
        letter-spacing: -0.014rem;
        line-height: 2.4rem;
        font-weight: 600;
        &.active,
        &:hover {
          color: var(--primary);
        }
      }
    }
  }
  .ico1 {
    --bg: url('../images/ico_side1.svg');
    --hoverBg: url('../images/ico_side1_on.svg');
  }
  .ico2 {
    --bg: url('../images/ico_side2.svg');
    --hoverBg: url('../images/ico_side2_on.svg');
  }
  .ico3 {
    --bg: url('../images/ico_side3.svg');
    --hoverBg: url('../images/ico_side3_on.svg');
  }
  .ico4 {
    --bg: url('../images/ico_side4.svg');
    --hoverBg: url('../images/ico_side4_on.svg');
  }
  .ico5 {
    --bg: url('../images/ico_side5.svg');
    --hoverBg: url('../images/ico_side5_on.svg');
  }
  .ico6 {
    --bg: url('../images/ico_side6.svg');
    --hoverBg: url('../images/ico_side6_on.svg');
  }
  .ico7 {
    --bg: url('../images/ico_side7.svg');
    --hoverBg: url('../images/ico_side7_on.svg');
  }
}
}
@layer organisms.dialog{
.dialog {
  width: 47.6rem;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  border: none;
  border-radius: 2rem;
  border: 1px solid var(--gray300);
  box-shadow: 3.6rem 3.6rem 3.6rem 0px rgba(0, 0, 0, 0.05);
  &.sm {
    width: 34rem;
  }
  &.xl {
    width: 77.2rem;
  }
  &.xxl {
    width: 100rem;
  }
  &.xxxl {
    width: 122.8rem;
  }
  &.backdrop {
    &::backdrop {
      background-color: rgba(0, 0, 0, 0.7);
    }
  }
  .btn-close {
    position: absolute;
    inset: 1.4rem 2.4rem auto auto;
    font-size: 0;
  }
}
.dialog-header {
  padding: 1.8rem 2.4rem;
  border-bottom: 1px solid var(--gray250);
}
.dialog-content {
  padding: 2.4rem 2.8rem;
  max-height: 70vh;
  overflow: auto;
}

.dialog.plain {
  width: min-content;
  border-radius: 0;
  box-shadow: none;
  border: none;
}
}
@layer organisms.list{

.list-type1 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0.8rem 4rem;
  height: var(--height, auto);
  li {
    display: flex;
    justify-content: space-between;
  }
  &.left {
    li {
      display: grid;
      grid-template-columns: minmax(10rem, auto) 1fr;
      gap: 0.8rem;
      .badge {
        justify-self: start;
        white-space: nowrap;
      }
    }
  }
}

.list-type2 {
  display: grid;
  gap: 0.8rem;
  font-size: 1.6rem;
  color: var(--gray600);
  font-weight: 500;
  li {
    display: flex;
    justify-content: space-between;
  }
  .result {
    border-top: 1px solid var(--gray200);
    padding-top: 1.4rem;
    margin-top: 0.6rem;
    font-weight: 700;
    color: var(--gray800);
  }
  .bold {
    font-weight: 700;
    color: var(--gray800);
  }
}

.list-type3 {
  li {
    padding-block: 2.4rem;
    border-top: 1px solid var(--gray200);
  }
  .title {
    padding-bottom: 2rem;
    color: var(--gray400);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.016rem;
  }
  .desc {
    .text-xl {
      --color: var(--gray800);
    }
    .text-md {
      --fw: 500;
    }
  }
}

.list-type4 {
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 1.2rem;
  height: 19.5rem;
  padding: 2rem;
  border-radius: 0.4rem;
  border: 1px solid var(--gray250);
  background: var(--white) s;
  li {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.list-type5 {
  display: grid;
  gap: 1.2rem;
  overflow: auto;
  align-content: start;
  height: 13rem;
  li {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    color: var(--gray600);
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: -0.016rem;
    img {
      margin-left: 0.4rem;
    }
  }
}

.list-type6 {
  display: flex;
  border: 1px solid var(--gray250);
  li {
    flex: 1;
    height: 8.4rem;
    align-content: center;
    text-align: center;
    + li {
      border-left: 1px solid var(--gray250);
    }
    div {
      font-size: 1.6rem;
      padding-bottom: 0.8rem;
    }
    strong {
      color: var(--gray800);
      font-size: 2.4rem;
    }
  }
}
}
/* 템플릿 */
@layer template.layout{
.container {
  display: grid;
  grid-template-columns: 22rem 1fr;
  background: var(--white);
  height: calc(100vh - var(--headerHeight, 7.1rem));
}
.aside {
  padding-block: 4rem;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
main {
  padding: 4rem;
  width: 108rem;
  &.w-md {
    width: 120rem;
  }
  &.w-lg {
    width: 130rem;
  }
  &.w-xl {
    width: 148.4rem;
  }
}

/* -------------------------------------------------------------------------- */
/*                                   Columns                                  */
/* -------------------------------------------------------------------------- */

.column-2 {
  display: grid;
  grid-template-columns: var(--col1, 1fr) var(--col2, 1fr);
  gap: var(--gap, 4rem);
}
.column-3 {
  display: grid;
  grid-template-columns: var(--col1, 1fr) var(--col2, 1fr) var(--col3, 1fr);
  gap: var(--gap, 2rem);
}
.column-4 {
  display: grid;
  grid-template-columns: var(--col1, 1fr) var(--col2, 1fr) var(--col3, 1fr) var(--col4, 1fr);
  gap: var(--gap, 2.4rem);
}
.column-5 {
    display: grid;
    grid-template-columns: var(--col1, 1fr) var(--col2, 1fr) var(--col3, 1fr) var(--col4, 1fr) var(--col5, 1fr);
    gap: var(--gap, 2rem);
}
}
@layer template.chat{
.chat {
  display: grid;
  gap: 1.2rem;
  padding: 2rem;
  border-radius: 1.4rem;
  border: 1px solid var(--gray300);
  background: var(--white);
}
.chat-message-list {
  padding: 4rem 2rem;
  box-sizing: border-box;
  background-color: var(--gray150);
  height: 48.7rem;
  overflow: auto;
  ul {
    display: grid;
    gap: 2rem;
    align-content: end;
    height: 100%;
  }
  li {
    max-width: 26rem;
    word-break: keep-all;
  }
  .post {
    --radius: 2rem 2rem 0rem 2rem;
    --bg: var(--primary);
    --color: var(--white);

    justify-self: end;
    text-align: right;
  }
  .get {
    --radius: 2rem 2rem 2rem 0rem;
    --bg: var(--white);
    --color: var(--gray600);
    --border: rgba(0, 0, 0, 0.1);

    justify-self: start;
    text-align: left;
  }
  .message-text {
    padding: 1.4rem 2rem;
    color: var(--color);
    font-size: 1.4rem;
    font-weight: 500;
    border-radius: var(--radius);
    background: var(--bg);
    box-sizing: border-box;
    border: 1px solid var(--border);
  }
  .message-info {
    color: var(--gray300);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.8rem;
    letter-spacing: -0.06rem;
    margin-top: 0.4rem;
  }
}
}
@layer template.complete{

.join-complete {
  display: grid;
  width: 39rem;
  margin-inline: auto;
  img {
    justify-self: center;
    margin-top: 12.04rem;
  }
  a {
    margin-top: 4rem;
    height: 6rem;
  }
  p {
    --color: var(--gray400);
    --fw: 500;

    margin-top: 0.8rem;
    text-align: center;
  }
  strong {
    --color: var(--gray800);
    margin-top: 2.7rem;
    text-align: center;
  }
}

.charge-complete {
  display: grid;
  text-align: center;
  line-height: 1;
  img {
    justify-self: center;
  }
  strong {
    --color: var(--gray800);
    margin-top: 2rem;
  }
  .text-md {
    --color: var(--gray400);
    --fw: 500;
    margin-top: 0.4rem;
  }
  .text-base {
    --color: var(--gray300);
    --fw: 500;
    margin-top: 0.8rem;
  }
}
}
/* 페이지 */
@layer page.login{
.login {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;

  h1 {
    position: absolute;
    left: 0;
    top: -9.4rem;
  }
  .text-base {
    --color: var(--gray600);
  }
  .login-wrap {
    width: 39rem;
  }
  .form-member {
    width: 39rem;
  }
}
}
@layer page.join{
body:has(.join) {
  align-content: center;
  min-height: 100vh;
}
.join {
  margin-inline: auto;
  width: 54rem;
}

.join-wrap {
  display: grid;
  gap: 1.2rem;
}
}
@layer page.join{
.find-pw {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  .form-member {
    width: 39rem;
  }
  .text-md {
    --color: var(--gray400);
    --fw: 500;
  }
}
}
@layer page.matter{
.matter-modify {
  --col2: 40rem;
}
}