@charset "utf-8";

/*!
 * HANWHA LIFE DesignSystem
 *
 * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
 */

/*!
    GitLab 경로
    : <GitLab>/common/hli-ds-css/dist/css/hli-ds.css
 */

/*!
    Reference

    -디자인시스템 정의
    : https://www.nngroup.com/articles/design-systems-101/

    -디자인시스템에 대하여
    : https://pixso.net/kr/skills/design-system/
    : https://velog.io/@phw3071/%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C%EC%9D%84-%EB%A7%8C%EB%93%9C%EB%8A%94-%EC%9D%B4%EC%9C%A0
    : https://brunch.co.kr/@ultra0034/118
    : https://tech.toktokhan.dev/2021/06/30/design-system/

    -라이선스
      -CCL(Creative Commons License)
        : https://ko.wikipedia.org/wiki/크리에이티브_커먼즈_라이선스
        : https://m.blog.naver.com/designeye2/222120078126

    -참고 CSS
    : https://tailwindcss.com/docs/theme

    권효주/다이렉트개발팀
    제가 참조한 곳들 입니다.
    https://material.angular.io/
    https://ionicframework.com/
    https://mui.com/
 */

/*!
    웹 접근성
    https://www.w3.org/WAI/standards-guidelines/wcag/

    Web Content Accessibility Guidelines (WCAG),
      text content must have a contrast ratio of 4.5:1, or 3:1 for larger text such as headings.
      (WCAG defines large text as between 18.66px and 24px and bold, or 24px or larger.)
 */

@import "./token/designsystem-token_v2.css?_=20231031_4";
/* @import "./token/designsystem-token-dark-mode.css?_=20230914_3"; */
@import "./font/designsystem-font.css?_=20230914_2";
@import "./reset/designsystem-reset.css?_=20230914_2";
@import "./support/designsystem-support.css?_=20230914_2";

/* typo */
html, body {
    /*
        일반적으로 브라우저 기본 폰트 크기는 "font-size: 16px" 입니다.
        폰트 크기를 62.5% 로 설정하게 되면 기본 폰트 크기는 10px (16 * 62.5 = 10)이 됩니다.
     */

    /*
        https://bitsofco.de/the-new-system-font-stack/

        font-family: HanwhaGothic, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
        font-family: HanwhaGothic, 'Helvetica Neue', 'Apple SD Gothic Neo', 'Roboto', 'Noto Sans KR', sans-serif;
    */
    font-family: HanwhaGothic, -apple-system, system-ui, HelveticaNeue, AppleSDGothicNeo, sans-serif;

    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgb(0 0 0 / 0%);

    background: var(--hli-color-background-0, #FFFFFF);
    color: var(--hli-color-text-body, #272B2F);

    font-size: 16px;
    font-weight: var(--hli-font-weight-regular);
    line-height: var(--hli-font-line-height-medium);

    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-font-smoothing: subpixel-antialiased;
}


/* HanwhaGothic V1 폰트 저해상도 깨지는 이슈 대응 */
/* window.devicePixelRatio < 2 는 skew() 로 긴급 대응하도록 한다. */
/* @media (-webkit-min-device-pixel-ratio: 1.5) */
/* @media (max-resolution: 1.9999dppx) { */
    /* Chrome 87 버전은 selector 에 2개 넣으면 안되네....최신 114는 되는데...ㅠㅠ */
    /* 20231011 HanwhaGothic 폰트 고도화(v2) 에 따라 저해상도 대비가 완료되어 주석 처리한다. */
    /*
    :not(input,textarea,img) {
        -webkit-transform: skew(var(--hli-color-text-body-2, -0.03deg));
        transform: skew(var(--hli-color-text-body-2, -0.03deg));
    }
    */
    /*
    a, button, caption, span, p, ul, li, th, td,
    .typography-title1, .typography-title2, .typography-title3, .typography-title4,
    .typography-title5, .typography-subtitle1, .typography-subtitle2, .typography-body1,
    .typography-body2, .typography-caption {
        -webkit-transform: skew(var(--hli-color-text-body-2, -0.03deg));
        transform: skew(var(--hli-color-text-body-2, -0.03deg));
    }
     */
/* } */


/* test
@media (min-resolution: 1dppx) { h2 { color: #f00 } }
@media (min-resolution: 2dppx) { h2 { color: #0f0 } }
@media (min-resolution: 3dppx) { h2 { color: #00f } }
*/



/*
Category	Size(px/rem)	Line Height(%)	Weight	    Usage
Title1	    26 / 1.625	    150	            bold	    상품/ 마케팅성 페이지 타이틀
Title2	    22 / 1.375	    150	            bold	    페이지 타이틀, 금액강조, 메인탭
Title3	    20 / 1.25	    150	            bold	    콘텐츠 타이틀 01
Title4	    18 / 1.123	    150	            bold	    콘텐츠 타이틀 02, 카드 내 타이틀
Title5	    16 / 1	        150	            bold	    카테고리타이틀
Subtitle1	18 / 1.123	    150	            regular	    서브타이틀, 강조성
Subtitle2	16 / 1	        150	            regular	    서브타이틀, 리스트 타이틀, 버튼레이블
Body1	    16 / 1	        150	            light	    바디텍스트, 리스트 양끝정렬, 버튼레이블
Body2	    14 / 0.875	    150	            light	    바디텍스트, 디스크립션, 오버라인, 버튼레이블
Caption	    12 / 0.75	    140	            light	    캡션, 오버라인

Weight
bold : 700
regular: 400
light: 300
 */
/* typography */
.typography-title1 {
  font-size: var(--hli-font-size-title-xlarge, 1.625rem) !important;
  font-weight: var(--hli-font-weight-bold, 700) !important;
  line-height: var(--hli-font-line-height-large, 1.5) !important;
  word-break: keep-all;
  transition: all 0.4s ease;
}
.typography-title2 {
  font-size: var(--hli-font-size-title-large, 1.375rem) !important;
  font-weight: var(--hli-font-weight-bold, 700) !important;
  line-height: var(--hli-font-line-height-large, 1.5) !important;
  word-break: keep-all;
  transition: all 0.4s ease;
}
.typography-title3 {
  font-size: var(--hli-font-size-title-medium, 1.25rem) !important;
  font-weight: var(--hli-font-weight-bold, 700) !important;
  line-height: var(--hli-font-line-height-large, 1.5) !important;
  word-break: keep-all;
  transition: all 0.4s ease;
}
.typography-title4 {
  font-size: var(--hli-font-size-title-small, 1.125rem) !important;
  font-weight: var(--hli-font-weight-bold, 700) !important;
  line-height: var(--hli-font-line-height-large, 1.5) !important;
  word-break: keep-all;
  transition: all 0.4s ease;
}
.typography-title5 {
  font-size: var(--hli-font-size-title-xsmall, 1rem) !important;
  font-weight: var(--hli-font-weight-bold, 700) !important;
  line-height: var(--hli-font-line-height-large, 1.5) !important;
  word-break: keep-all;
  transition: all 0.4s ease;
}
.typography-subtitle1 {
  font-size: var(--hli-font-size-title-small, 1.125rem) !important;
  font-weight: var(--hli-font-weight-regular, 400) !important;
  line-height: var(--hli-font-line-height-large, 1.5) !important;
  word-break: keep-all;
  transition: all 0.4s ease;
}
.typography-subtitle2 {
  font-size: var(--hli-font-size-title-xsmall, 1rem) !important;
  font-weight: var(--hli-font-weight-regular, 400) !important;
  line-height: var(--hli-font-line-height-large, 1.5) !important;
  word-break: keep-all;
  transition: all 0.4s ease;
}
.typography-body1 {
  font-size: var(--hli-font-size-text-medium, 1rem) !important;
  font-weight: var(--hli-font-weight-light, 300) !important;
  line-height: var(--hli-font-line-height-large, 1.5) !important;
  word-break: keep-all;
  transition: all 0.4s ease;
}
.typography-body2 {
  font-size: var(--hli-font-size-text-small, 0.875rem) !important;
  font-weight: var(--hli-font-weight-light, 300) !important;
  line-height: var(--hli-font-line-height-large, 1.5) !important;
  word-break: keep-all;
  transition: all 0.4s ease;
}
.typography-caption {
  font-size: var(--hli-font-size-text-xsmall, 0.75rem) !important;
  font-weight: var(--hli-font-weight-light, 300) !important;
  line-height: var(--hli-font-line-height-medium, 1.4) !important;
  word-break: keep-all;
  transition: all 0.4s ease;
}

/* text color */
.text-primary {
  color: var(--hli-color-text-primary) !important;
}
.text-body {
  color: var(--hli-color-text-body) !important;
}
.text-body1 {
  color: var(--hli-color-text-body-1) !important;
}
.text-body2 {
  color: var(--hli-color-text-body-2) !important;
}
.text-body3 {
  color: var(--hli-color-text-body-3) !important;
}

/* background color */
.bg-0 {
  background-color: var(--hli-color-background-0) !important;
}
.bg-1 {
  background-color: var(--hli-color-background-1) !important;
}
.bg-dimmed {
  background-color: var(--hli-color-background-1) !important;
}

/* border */
.border {
  border: 1px solid var(--hli-color-border-1) !important;
}
.border-top {
  border-top: 1px solid var(--hli-color-border-1) !important;
}
.border-end {
  border-right: 1px solid var(--hli-color-border-1) !important;
}
.border-bottom {
  border-bottom: 1px solid var(--hli-color-border-1) !important;
}
.border-start {
  border-left: 1px solid var(--hli-color-border-1) !important;
}
.border-color1 {
  border-color: var(--hli-color-border-1) !important;
}
.border-color2 {
  border-color: var(--hli-color-border-2) !important;
}
.border-color3 {
  border-color: var(--hli-color-border-3) !important;
}
.border-color4 {
  border-color: var(--hli-color-border-4) !important;
}
.border-color5 {
  border-color: var(--hli-color-border-5) !important;
}

/* spacing */
.mb-1 {
  margin-bottom: var(--hli-spacing-xxxsmall, 0.25rem) !important;
}
.mb-2 {
  margin-bottom: var(--hli-spacing-xxsmall, 0.5rem) !important;
}
.mb-3 {
  margin-bottom: var(--hli-spacing-xsmall, 0.75rem) !important;
}
.mb-4 {
  margin-bottom: var(--hli-spacing-small, 1rem) !important;
}
.mb-5 {
  margin-bottom: var(--hli-spacing-medium, 1.25rem) !important;
}
.mb-6 {
  margin-bottom: var(--hli-spacing-large, 1.5rem) !important;
}
.mb-7 {
  margin-bottom: var(--hli-spacing-xlarge, 1.75rem) !important;
}
.mb-8 {
  margin-bottom: var(--hli-spacing-xxlarge, 2rem) !important;
}
.mb-9 {
  margin-bottom: var(--hli-spacing-xxxlarge, 3rem) !important;
}
.mb-10 {
  margin-bottom: 4rem !important;
}

.mt-1 {
  margin-top: var(--hli-spacing-xxxsmall, 0.25rem) !important;
}
.mt-2 {
  margin-top: var(--hli-spacing-xxsmall, 0.5rem) !important;
}
.mt-3 {
  margin-top: var(--hli-spacing-xsmall, 0.75rem) !important;
}
.mt-4 {
  margin-top: var(--hli-spacing-small, 1rem) !important;
}
.mt-5 {
  margin-top: var(--hli-spacing-medium, 1.25rem) !important;
}
.mt-6 {
  margin-top: var(--hli-spacing-large, 1.5rem) !important;
}
.mt-7 {
  margin-top: var(--hli-spacing-xlarge, 1.75rem) !important;
}
.mt-8 {
  margin-top: var(--hli-spacing-xxlarge, 2rem) !important;
}
.mt-9 {
  margin-top: var(--hli-spacing-xxxlarge, 3rem) !important;
}
.mt-10 {
  margin-top: 4rem !important;
}

.ml-1 {
  margin-left: var(--hli-spacing-xxxsmall, 0.25rem) !important;
}
.ml-2 {
  margin-left: var(--hli-spacing-xxsmall, 0.5rem) !important;
}
.ml-3 {
  margin-left: var(--hli-spacing-xsmall, 0.75rem) !important;
}
.ml-4 {
  margin-left: var(--hli-spacing-small, 1rem) !important;
}
.ml-5 {
  margin-left: var(--hli-spacing-medium, 1.25rem) !important;
}
.ml-6 {
  margin-left: var(--hli-spacing-large, 1.5rem) !important;
}
.ml-7 {
  margin-left: var(--hli-spacing-xlarge, 1.75rem) !important;
}
.ml-8 {
  margin-left: var(--hli-spacing-xxlarge, 2rem) !important;
}
.ml-9 {
  margin-left: var(--hli-spacing-xxxlarge, 3rem) !important;
}
.ml-10 {
  margin-left: 4rem !important;
}

.mr-1 {
  margin-right: var(--hli-spacing-xxxsmall, 0.25rem) !important;
}
.mr-2 {
  margin-right: var(--hli-spacing-xxsmall, 0.5rem) !important;
}
.mr-3 {
  margin-right: var(--hli-spacing-xsmall, 0.75rem) !important;
}
.mr-4 {
  margin-right: var(--hli-spacing-small, 1rem) !important;
}
.mr-5 {
  margin-right: var(--hli-spacing-medium, 1.25rem) !important;
}
.mr-6 {
  margin-right: var(--hli-spacing-large, 1.5rem) !important;
}
.mr-7 {
  margin-right: var(--hli-spacing-xlarge, 1.75rem) !important;
}
.mr-8 {
  margin-right: var(--hli-spacing-xxlarge, 2rem) !important;
}
.mr-9 {
  margin-right: var(--hli-spacing-xxxlarge, 3rem) !important;
}
.mr-10 {
  margin-right: 4rem !important;
}

/* text 관련 */
.text-underline {
  text-decoration: underline !important;
}
.text-start {
  text-align: left !important;
}
.text-center {
  text-align: center !important;
}
.text-end {
  text-align: right !important;
}
.fw-bold {
  font-weight: bold !important;
}
.fw-normal {
  font-weight: normal !important;
}

/* list 관련 */
.list-style-disc {
  padding-left: 1rem;
  list-style: disc;
}
.list-style-disc li {
  list-style: disc;
}

/* divider 관련 */
.divider-thin {
  width: 100%;
  height: 1px;
  background-color: var(--hli-color-border-2);
  border-radius: var(--hli-border-radius-medium, 8px);
}
.divider-thick {
  width: 100%;
  height: 0.75rem;
  background-color: var(--hli-color-border-1);
  border-radius: var(--hli-border-radius-small, 4px);
}


/* input */
input[type="text"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea {
  font-size: var(--hli-font-size-text-medium, 1rem);
  font-weight: var(--hli-font-weight-light, 300);
  line-height: var(--hli-font-line-height-large, 1.5);
  color: var(--hli-color-text-body-1);
  background-color: var(--hli-color-surface-neutral-1);
  border: 1px solid var(--hli-color-border-3, #E2E5EA);
  border-radius: var(--hli-border-radius-medium, 8px);
  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
  height: 2.5rem;
}
input[type="text"]:hover,
input[type="password"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
textarea:hover {
    /* hover anim */
    box-shadow: rgba(0, 0, 0, 0.1) 100rem 100rem inset;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
textarea {
  height: 3.5rem;
}
input::-webkit-input-placeholder {
  color: var(--hli-color-text-neutral-1, #A6ABB1);
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  color: var(--hli-color-text-body-1);
  background-color: var(--hli-color-surface-neutral-1);
  -webkit-appearance: none;
  margin: 0;
}


/* button */
button,
input[type="button"],
a.button {
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 0px;
    background: #F0F0F0;
    line-height: 1.5;

    /* default */
    height: 2.5rem;
    padding: 0px 1rem;
    border-radius: var(--hli-border-radius-medium, 8px);
    font-size: var(--hli-font-size-text-medium, 1.125rem);
    font-weight: var(--hli-font-weight-light, 300);
}
button.secondary:focus-visible,
input[type="button"].secondary:focus-visible,
a.button.secondary:focus-visible {
  outline: 2px solid var(--hli-color-surface-primary, #fa6600);
}
button:hover,
button.hover,
input[type="button"]:hover,
input[type="button"].hover,
a.button:hover {
    box-shadow: rgba(0, 0, 0, 0.1) 100rem 100rem inset;
    /* hover anim */
    /* box-shadow: 0 10px 22px 0 rgb(0 0 0 / 4%); */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    /*transform: translateY(-4px);*/
}
button:active,
button.pressed,
input[type="button"]:active,
input[type="button"].pressed,
a.button:active,
a.button.pressed {
    box-shadow: rgba(0, 0, 0, 0.16) 100rem 100rem inset;
}
button:disabled,
button.disabled,
input[type="button"]:disabled,
input[type="button"].disabled,
a.button.disabled {
    box-shadow: rgba(255, 255, 255, 0.6) 100rem 100rem inset;
}

button.primary,
input[type="button"].primary,
a.button.primary {
    color: var(--hli-color-text-body-0);
    background-color: var(--hli-color-surface-primary);
}
button.secondary,
input[type="button"].secondary,
a.button.secondary {
    color: var(--hli-color-text-body-0);
    background-color: var(--hli-color-surface-secondary);
}
button.neutral1,
input[type="button"].neutral1,
a.button.neutral1 {
    color: var(--hli-color-text-body-1);
    background-color: var(--hli-color-surface-neutral-1);
}
button.neutral2,
input[type="button"].neutral2,
a.button.neutral2 {
    color: var(--hli-color-text-body-1);
    background-color: var(--hli-color-surface-neutral-2);
}
button.neutral3,
input[type="button"].neutral3,
a.button.neutral3 {
    color: var(--hli-color-text-body-1);
    background-color: var(--hli-color-surface-neutral-3);
}

button.xsmall,
input[type="button"].xsmall,
a.button.xsmall {
    height: 2rem;
    padding: 0px 0.75rem;
    font-size: var(--hli-font-size-text-small, 0.875rem);
    font-weight: var(--hli-font-weight-light, 300);
    border-radius: var(--hli-border-radius-small, 4px);
}
button.small,
input[type="button"].small,
a.button.small {
    height: 2.5rem;
    padding: 0px 1rem;
    font-size: var(--hli-font-size-text-small, 0.875rem);
    font-weight: var(--hli-font-weight-light, 300);
    border-radius: var(--hli-border-radius-medium, 8px);
}
button.medium,
input[type="button"].medium,
a.button.medium {
    height: 3rem;
    padding: 0px 1rem;
    font-size: var(--hli-font-size-text-medium, 1rem);  /* default: var(--hli-font-size-text-small, 0.875rem); */
    font-weight: var(--hli-font-weight-light, 300);
    border-radius: var(--hli-border-radius-medium, 8px);
}
button.large,
input[type="button"].large,
a.button.large {
    height: 3.0rem; /* default: 3.5rem; */
    max-height: 56px;
    padding: 0px 1rem;
    font-size: default: var(--hli-font-size-text-medium, 1rem);
    font-weight: var(--hli-font-weight-regular, 400);
    border-radius: 12px; /* default: var(--hli-border-radius-medium, 8px); */
    padding: 12px 16px;
}


/* input[type="file"] */
/* 참고: https://webdir.tistory.com/435 */
input[type="file"] {
    display: block;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: var(--hli-border-radius-medium, 8px);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
input[type="file"].hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip:rect(0,0,0,0);
  border: 0;
}


/* select */
.select-box {
  display: block;
  width: 100%;
  height: 56px;
  padding: 16px 44px 16px 16px;
  margin-top: 4px;
  /*color: var(--hli-color-text-neutral-1);*/
  color: var(--hli-color-text-body-3);
  background-color: var(--hli-color-surface-neutral-1, #F5F6F7);
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.29289 7.29289C4.68342 6.90237 5.31658 6.90237 5.70711 7.29289L10 11.5858L14.2929 7.29289C14.6834 6.90237 15.3166 6.90237 15.7071 7.29289C16.0976 7.68342 16.0976 8.31658 15.7071 8.70711L10.7071 13.7071C10.3166 14.0976 9.68342 14.0976 9.29289 13.7071L4.29289 8.70711C3.90237 8.31658 3.90237 7.68342 4.29289 7.29289Z' fill='%238C959D'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: calc(100% - 16px) 50%;
  border: 1px solid var(--hli-color-border-3, #E2E5EA);
  border-radius: var(--hli-border-radius-medium, 8px);
  -webkit-appearance: none;
  appearance: none;
}
.select-box:focus {
  color: var(--hli-color-text-body);
  border-color: var(--hli-color-surface-secondary);
}
.select-box:required:invalid {
  color: var(--hli-color-text-body);
  border-color: var(--hli-color-surface-secondary);
}


/* table */
.table-wrap {
  width: 100%;
  overflow: hidden;
}
.table-wrap thead {
	background-color: var(--hli-color-surface-neutral-1);
}
.table-wrap th,
.table-wrap td {
	padding: 8px 4px;
	font-size: 12px;
	font-weight: 300;
	line-height: 1.4;
	border-left: 1px solid var(--hli-color-border-3);
	border-bottom: 1px solid var(--hli-color-border-3);
  text-align: center;
}
.table-wrap th:first-child,
.table-wrap td:first-child {
	border-left: 0;
}
.table-wrap td {
  padding: 8px;
  color: var(--hli-color-text-body-2);
}

a:hover {
    color: inherit;
    text-decoration: underline;
    transform: translateY(-4px);
    transition: all 0.4s ease;
}
/*
a:hover {
    box-shadow: 0 6px 24px 0 rgb(0 0 0 / 8%);
    -webkit-transition: -webkit-transform 0.2s ease-out,box-shadow 0.2s ease-out;
    transition: transform 0.2s ease-out,box-shadow 0.2s ease-out;
    -webkit-transform: translateY(-4px);
    -moz-transform: translateY(-4px);
    -ms-transform: translateY(-4px);
    transform: translateY(-4px);
}
*/