@charset "utf-8";

/*!
 * HANWHA LIFE DesignSystem V2 배포용
 */

.blind {position: absolute; overflow: hidden; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px;}
.hidden {display: none !important;}

/* designsystem-token_v2.css */
:root {
  --hli-color-background-0: #FFFFFF;
  --hli-color-background-1: #F5F5F5;
  --hli-color-background-dimmed: rgba(0, 0, 0, 0.5);
  --hli-color-surface-primary: #FA6600;
  --hli-color-surface-secondary: #403F3E;
  --hli-color-surface-neutral: #FFFFFF;
  --hli-color-surface-neutral-1: #F5F5F5;
  --hli-color-surface-neutral-2: #F0F0F0;
  --hli-color-surface-neutral-3: #E5E4E3;
  --hli-color-text-primary: #FA6600;
  --hli-color-text-body: #272B2F;
  --hli-color-text-body-1: #403F3E;
  --hli-color-text-body-2: #5E5C5A;
  --hli-color-text-body-3: #7E7C7A;
  --hli-color-text-body-0: #FFFFFF;
  --hli-color-text-neutral-1: #908F8E;
  --hli-color-text-neutral-2: #B4B3B2;
  --hli-color-border-1: #F5F5F5;
  --hli-color-border-2: #F0F0F0;
  --hli-color-border-3: #E5E4E3;
  --hli-color-border-4: #908F8E;
  --hli-color-additional-semantic-1: #009ca5;
  --hli-color-additional-semantic-2: #F53F3F;
  --hli-color-additional-semantic-3: #F8B62B;
  --hli-color-additional-semantic-4: #B4B3B2;
  --hli-color-additional-custom-1: #819EDE;
  --hli-color-additional-custom-2: #FF8F4C;
  --hli-color-additional-custom-3: #FACD5F;

  --hli-color-state-dark-1: rgba(0, 0, 0, 0.02);
  --hli-color-state-dark-2:rgba(0, 0, 0, 0.1);
  --hli-color-state-dark-3: rgba(0, 0, 0, 0.16);
  --hli-color-state-light-1: rgba(255, 255, 255, 0.6);

  /* Radius */
  --hli-border-radius-small: 4px;
  --hli-border-radius-medium: 8px;
  --hli-border-radius-large: 12px;
  --hli-border-radius-xlarge: 16px;
  --hli-border-radius-xxlarge: 100px;

  /* FontSize */
  --hli-font-size-title-xsmall: 1rem;
  --hli-font-size-title-small: 1.125rem;
  --hli-font-size-title-medium: 1.25rem;
  --hli-font-size-title-large: 1.375rem;
  --hli-font-size-title-xlarge: 1.625rem;
  --hli-font-size-text-xsmall: 0.75rem;
  --hli-font-size-text-small: 0.875rem;
  --hli-font-size-text-medium: 1rem;

  /* FontWeight */
  --hli-font-weight-light: 300;
  --hli-font-weight-regular: 400;
  --hli-font-weight-bold: 700;

  /* LineHeight */
  --hli-font-line-height-medium: 1.4;
  --hli-font-line-height-large: 1.5;
}

@media (min-width: 1024px) {
  :root {
    --hli-font-size-title-xsmall: 1.125rem;
    --hli-font-size-title-small: 1.25rem;
    --hli-font-size-title-medium: 1.375rem;
    --hli-font-size-title-large: 1.875rem;
    --hli-font-size-title-xlarge: 2.375rem;
    --hli-font-size-text-xsmall: 0.875rem;
    --hli-font-size-text-small: 1rem;
    --hli-font-size-text-medium: 1.125rem;
  }
}

/* designsystem-font.css */
@font-face {
  font-family: HanwhaGothic;
  font-weight: 700;
  src: local('HanwhaGothic'), url('https://static.hanwhalife.com/static/ds/font/hanwha-gothic/04HanwhaGothicB.woff2') format('woff2'),
    url('https://static.hanwhalife.com/static/ds/font/hanwha-gothic/04HanwhaGothicB.woff') format('woff');
}
@font-face {
  font-family: HanwhaGothic;
  font-weight: 400;
  src: local('HanwhaGothic'), url('https://static.hanwhalife.com/static/ds/font/hanwha-gothic/05HanwhaGothicR.woff2') format('woff2'),
    url('https://static.hanwhalife.com/static/ds/font/hanwha-gothic/05HanwhaGothicR.woff') format('woff');
}
@font-face {
  font-family: HanwhaGothic;
  font-weight: 300; /* DS 기본 폰트 굵기 */
  src: local('HanwhaGothic'), url('https://static.hanwhalife.com/static/ds/font/hanwha-gothic/06HanwhaGothicL.woff2') format('woff2'),
    url('https://static.hanwhalife.com/static/ds/font/hanwha-gothic/06HanwhaGothicL.woff') format('woff');
}

/* designsystem-reset.css */
*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
}

hr {
  margin: 1rem 0;
  color: inherit;
  background-color: currentColor;
  border: 0;
  opacity: 0.25;
}

hr:not([size]) {
  height: 1px;
}

h6,
h5,
h4,
h3,
h2,
h1 {
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
}

p {
  margin: 0;
}

abbr[title],
abbr[data-bs-original-title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul {
  list-style: none;
}

ol,
ul,
dl,
li {
  padding: 0;
  margin: 0;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 0.875em;
}

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

a:not([href], [class]),
a:not([href], [class]):hover {
  color: inherit;
  text-decoration: none;
}

figure {
  margin: 0;
}

img,
svg {
  vertical-align: top;
}

img {
  max-width: 100%;
}

table {
  caption-side: bottom;
  border-collapse: collapse;
}

caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: #6c757d;
  text-align: left;
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

label {
  display: inline-block;
}

button {
  border-radius: 0;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
select {
  text-transform: none;
}

[role='button'] {
  cursor: pointer;
}

select {
  word-wrap: normal;
}

[list]::-webkit-calendar-picker-indicator {
  display: none;
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}

button:not(:disabled),
[type='button']:not(:disabled),
[type='reset']:not(:disabled),
[type='submit']:not(:disabled) {
  cursor: pointer;
}

::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

button:focus:not(:focus-visible) {
  outline: 0;
}

textarea {
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: calc(1.275rem + 0.3vw);
  line-height: inherit;
}

legend + * {
  clear: left;
}

output {
  display: inline-block;
}

iframe {
  border: 0;
}

summary {
  display: list-item;
  cursor: pointer;
}

progress {
  vertical-align: baseline;
}

[hidden] {
  display: none !important;
}

strong {
  font-weight: 700; /* 한화고딕 bold */
}

/* designsystem.css */
body {
  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%);
  color: #272B2F;
}

/* typography */
.typography-title1 {
  font-size: var(--hli-font-size-title-xlarge) !important;
  font-weight: var(--hli-font-weight-bold) !important;
  line-height: var(--hli-font-line-height-large) !important;
  word-break: keep-all;
}
.typography-title2 {
  font-size: var(--hli-font-size-title-large) !important;
  font-weight: var(--hli-font-weight-bold) !important;
  line-height: var(--hli-font-line-height-large) !important;
  word-break: keep-all;
}
.typography-title3 {
  font-size: var(--hli-font-size-title-medium) !important;
  font-weight: var(--hli-font-weight-bold) !important;
  line-height: var(--hli-font-line-height-large) !important;
  word-break: keep-all;
}
.typography-title4 {
  font-size: var(--hli-font-size-title-small) !important;
  font-weight: var(--hli-font-weight-bold) !important;
  line-height: var(--hli-font-line-height-large) !important;
  word-break: keep-all;
}
.typography-title5 {
  font-size: var(--hli-font-size-title-xsmall) !important;
  font-weight: var(--hli-font-weight-bold) !important;
  line-height: var(--hli-font-line-height-large) !important;
  word-break: keep-all;
}
.typography-subtitle2 {
  font-size: var(--hli-font-size-title-xsmall) !important;
  font-weight: var(--hli-font-weight-regular) !important;
  line-height: var(--hli-font-line-height-large) !important;
  word-break: keep-all;
}
.typography-body1 {
  font-size: var(--hli-font-size-text-medium) !important;
  font-weight: var(--hli-font-weight-light) !important;
  line-height: var(--hli-font-line-height-large) !important;
  word-break: keep-all;
}
.typography-body2 {
  font-size: var(--hli-font-size-text-small) !important;
  font-weight: var(--hli-font-weight-light) !important;
  line-height: var(--hli-font-line-height-large) !important;
  word-break: keep-all;
}
.typography-caption {
  font-size: var(--hli-font-size-text-xsmall) !important;
  font-weight: var(--hli-font-weight-light) !important;
  line-height: var(--hli-font-line-height-medium) !important;
  word-break: keep-all;
}

/* 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;
}
.text-body-0 {
  color: var(--hli-color-text-body-0) !important;
}
.text-neutral-1 {
  color: var(--hli-color-text-neutral-1) !important;
}
.text-neutral-2 {
  color: var(--hli-color-text-neutral-2) !important;
}
.text-semantic-1 {
  color: var(--hli-color-additional-semantic-1) !important;
}
.text-semantic-2 {
  color: var(--hli-color-additional-semantic-2) !important;
}
.text-semantic-3 {
  color: var(--hli-color-additional-semantic-3) !important;
}
.text-semantic-4 {
  color: var(--hli-color-additional-semantic-4) !important;
}
.text-custom-1 {
  color: var(--hli-color-additional-custom-1) !important;
}
.text-custom-2 {
  color: var(--hli-color-additional-custom-2) !important;
}
.text-custom-3 {
  color: var(--hli-color-additional-custom-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-dimmed) !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;
}

/* spacing */
.mt-0 {
  margin-top: 0 !important;
}
.mt-1 {
  margin-top: 0.25rem !important;
}
.mt-2 {
  margin-top: 0.5rem !important;
}
.mt-3 {
  margin-top: 0.75rem !important;
}
.mt-4 {
  margin-top: 1rem !important;
}
.mt-5 {
  margin-top: 1.25rem !important;
}
.mt-6 {
  margin-top: 1.5rem !important;
}
.mt-7 {
  margin-top: 1.75rem !important;
}
.mt-8 {
  margin-top: 2rem !important;
}
.mt-9 {
  margin-top: 3rem!important;
}
.mb-0 {
  margin-bottom: 0 !important;
}
.mb-1 {
  margin-bottom: 0.25rem !important;
}
.mb-2 {
  margin-bottom: 0.5rem !important;
}
.mb-3 {
  margin-bottom: 0.75rem !important;
}
.mb-4 {
  margin-bottom: 1rem !important;
}
.mb-5 {
  margin-bottom: 1.25rem !important;
}
.mb-6 {
  margin-bottom: 1.5rem !important;
}
.mb-7 {
  margin-bottom: 1.75rem !important;
}
.mb-8 {
  margin-bottom: 2rem !important;
}
.mb-9 {
  margin-bottom: 3rem!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 {
  border-top: 1px solid var(--hli-color-border-2);
}
.divider-thick {
  border-top: 0.75rem solid var(--hli-color-border-1);
}