@charset "utf-8";

/*
  RFZ design system tokens from Figma rfz_designguide.
  Keep legacy tokens in common.css unchanged so the published main page does not shift.
*/
:root {
  --rfz-font-family: "Pretendard", "Malgun Gothic", "맑은 고딕", Arial, sans-serif;

  --rfz-color-primary-5: #ECF2FE;
  --rfz-color-primary-10: #D8E5FD;
  --rfz-color-primary-50: #256EF4;

  --rfz-color-secondary-5: #EEF2F7;
  --rfz-color-secondary-40: #6B96C7;
  --rfz-color-secondary-50: #346FB2;
  --rfz-color-secondary-60: #1C589C;
  --rfz-color-secondary-70: #063A74;

  --rfz-color-gray-0: #FFFFFF;
  --rfz-color-gray-5: #F9F9F9;
  --rfz-color-gray-10: #E7E7E7;
  --rfz-color-gray-20: #D7D7D7;
  --rfz-color-gray-30: #B6B7B7;
  --rfz-color-gray-40: #9E9F9F;
  --rfz-color-gray-50: #868687;
  --rfz-color-gray-60: #6B6C6C;
  --rfz-color-gray-70: #505151;
  --rfz-color-gray-80: #363636;
  --rfz-color-gray-90: #242424;
  --rfz-color-gray-95: #191919;
  --rfz-color-gray-100: #000000;

  --rfz-color-danger-5: #FFECEC;
  --rfz-color-danger-50: #C60F0F;
  --rfz-color-warning-5: #FFF0DC;
  --rfz-color-success-5: #F4FBF5;
  --rfz-color-success-50: #08A21F;
  --rfz-color-info-5: #F5F9FF;
  --rfz-color-info-50: #127CC7;

  --rfz-color-action-primary: #0B50D0;
  --rfz-color-action-primary-hover: #083891;
  --rfz-color-action-primary-selected: #052561;
  --rfz-color-button-primary-fill: #256EF4;
  --rfz-color-button-primary-fill-hover: #0B50D0;
  --rfz-color-button-primary-fill-pressed: #083891;
  --rfz-color-button-secondary-fill: #063A74;
  --rfz-color-button-secondary-fill-hover: #1C589C;
  --rfz-color-button-secondary-fill-pressed: #346FB2;
  --rfz-color-button-tertiary-fill: #F9F9F9;
  --rfz-color-button-tertiary-fill-hover: #E7E7E7;
  --rfz-color-button-tertiary-fill-pressed: #D7D7D7;
  --rfz-color-button-disabled-fill: #D7D7D7;

  --rfz-color-text-bolder: #191919;
  --rfz-color-text-basic: #363636;
  --rfz-color-text-subtle: #6B6C6C;
  --rfz-color-text-disabled: #9E9F9F;
  --rfz-color-input-surface: #FFFFFF;
  --rfz-color-input-surface-disabled: #F9F9F9;
  --rfz-color-input-border: #D7D7D7;
  --rfz-color-input-border-active: #242424;
  --rfz-color-table-line: #E7E7E7;

  --rfz-color-accent-point1: #27AAE1;
  --rfz-color-accent-point2: #54A786;
  --rfz-color-accent-point3: #8DC63F;
  --rfz-color-accent-point4: #FBB03F;

  --rfz-font-body-small: 1.6rem;
  --rfz-font-body-xsmall: 1.4rem;
  --rfz-font-heading-large: 3.2rem;
  --rfz-font-heading-medium: 2.4rem;
  --rfz-letter-spacing-tighter: -0.04em;

  --rfz-space-3: .8rem;
  --rfz-space-4: 1rem;
  --rfz-space-6: 1.6rem;

  --rfz-radius-small: .4rem;
  --rfz-radius-medium2: .8rem;
  --rfz-radius-large1: 2rem;
  --rfz-radius-max: 999rem;

  --rfz-control-height-medium: 4.8rem;

  --color-gray-0: var(--rfz-color-gray-0);
  --color-gray-50: var(--rfz-color-gray-50);
  --color-gray-70: var(--rfz-color-gray-70);
  --color-gray-100: var(--rfz-color-gray-100);

  /* semantic — text */
  --color-text-bolder: var(--rfz-color-text-bolder);
  --color-text-basic: var(--rfz-color-text-basic);
  --color-text-subtle: var(--rfz-color-text-subtle);
  --color-text-inverse-static: #fff;

  /* semantic — action */
  --color-action-primary: var(--rfz-color-action-primary);
  --color-action-secondary: var(--rfz-color-secondary-50);
  --color-action-secondary-hover: var(--rfz-color-secondary-40);

  /* semantic — surface */
  --color-surface-gray: var(--rfz-color-gray-5);
  --color-surface-gray-dark: var(--rfz-color-secondary-5);
  --color-surface-primary-subtler: var(--rfz-color-info-5);
  --color-surface-primary-subtle: var(--rfz-color-primary-10);
  --color-surface-secondary-subtler: var(--rfz-color-primary-5);
  --color-surface-secondary-darker: var(--rfz-color-secondary-70);
  --color-surface-success-subtler: var(--rfz-color-success-5);
  --color-surface-warning-subtler: var(--rfz-color-warning-5);
  --color-surface-danger-subtler: var(--rfz-color-danger-5);

  /* semantic — border */
  --color-border-gray-lighter: var(--rfz-color-gray-10);
  --color-border-gray-light: var(--rfz-color-gray-20);
  --color-border-gray: var(--rfz-color-gray-30);

  /* semantic — accent */
  --color-accent-point1: var(--rfz-color-accent-point1);

  --typo-font-font-family: var(--rfz-font-family);
  --typo-letter-spacing-2: -0.4px;
  --typo-letter-spacing-4: -0.8px;
  --font-size-heading-large: var(--rfz-font-heading-large);
  --font-size-heading-medium: var(--rfz-font-heading-medium);
}

.rfz-stack {display: flex; flex-direction: column; gap: var(--rfz-stack-gap, var(--rfz-space-6));}
.rfz-cluster {display: flex; flex-wrap: wrap; align-items: center; gap: var(--rfz-cluster-gap, var(--rfz-space-4));}
.rfz-surface {background: var(--rfz-color-gray-0); border: 1px solid var(--rfz-color-table-line); border-radius: var(--rfz-radius-large1);}
.rfz-text-subtle {color: var(--rfz-color-text-subtle);}
.rfz-text-primary {color: var(--rfz-color-action-primary);}
.rfz-heading-lg {font-size: var(--rfz-font-heading-large); font-weight: 700; line-height: 1.4; letter-spacing: var(--rfz-letter-spacing-tighter);}
.rfz-heading-md {font-size: var(--rfz-font-heading-medium); font-weight: 700; line-height: 1.4; letter-spacing: var(--rfz-letter-spacing-tighter);}

/* 타이포그래피 — gasys-ui-guide.html class 기준 */
.display-large,
.display-medium,
.display-small,
.heading-xlarge,
.heading-large,
.heading-medium,
.heading-small,
.heading-xsmall,
.heading-xxsmall,
.body-large,
.body-medium,
.body-small,
.body-xsmall,
.body-large-bold,
.body-medium-bold,
.body-small-bold,
.body-xsmall-bold {
  font-family: var(--typo-font-font-family, Pretendard);
  font-style: normal;
  letter-spacing: var(--typo-letter-spacing-2, -0.04em);
}

.display-large {font-size: 6rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em;}
.display-medium {font-size: 4.8rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em;}
.display-small {font-size: 4rem; font-weight: 700; line-height: 1.4; }

.heading-xlarge {font-size: 4rem; font-weight: 700; line-height: 1.5;}
.heading-large {font-size: var(--font-size-heading-large, 3.2rem); font-weight: 700; line-height: 1.4; }
.heading-medium {font-size: var(--font-size-heading-medium, 2.4rem); font-weight: 700; line-height: 1.4; }
.heading-small {font-size: 1.9rem; font-weight: 700; line-height: 1.4;}
.heading-xsmall {font-size: 1.7rem; font-weight: 700; line-height: 1.4; ;}
.heading-xxsmall {font-size: 1.5rem; font-weight: 700; line-height: 1.4; }

.body-large {font-size: 1.9rem; font-weight: 500; line-height: 1.5; }
.body-medium {font-size: 1.7rem; font-weight: 500; line-height: 1.5;}
.body-small {font-size: 1.5rem; font-weight: 500; line-height: 1.5; }
.body-xsmall {font-size: 1.4rem; font-weight: 500; line-height: 1.5; }
.body-large-bold {font-size: 1.9rem; font-weight: 700; line-height: 1.5; }
.body-medium-bold {font-size: 1.7rem; font-weight: 700; line-height: 1.5; }
.body-small-bold {font-size: 1.5rem; font-weight: 700; line-height: 1.5; }
.body-xsmall-bold {font-size: 1.4rem; font-weight: 700; line-height: 1.5;}

/* ── 타이포그래피 반응형 ── */
@media (max-width: 768px) {
  /* display */
  .display-large  { font-size: 4rem; }
  .display-medium { font-size: 3.2rem; }
  .display-small  { font-size: 2.8rem; }
  /* heading */
  .heading-xlarge { font-size: 2.8rem; }
  .heading-large  { font-size: 2.4rem; }
  .heading-medium { font-size: 2rem; }
  .heading-small  { font-size: 1.7rem; }
  /* body */
  .body-large      { font-size: 1.7rem; }
  .body-large-bold { font-size: 1.7rem; }
}
@media (max-width: 480px) {
  /* display */
  .display-large  { font-size: 2.8rem; }
  .display-medium { font-size: 2.4rem; }
  .display-small  { font-size: 2rem; }
  /* heading */
  .heading-xlarge  { font-size: 2.2rem; }
  .heading-large   { font-size: 1.9rem; }
  .heading-medium  { font-size: 1.9rem; }
  .heading-small   { font-size: 1.7rem; }
  /* body — xsmall 이하는 고정 */
  .body-large      { font-size: 1.5rem; }
  .body-medium     { font-size: 1.5rem; }
  .body-large-bold  { font-size: 1.5rem; }
  .body-medium-bold { font-size: 1.5rem; }
}

.page-title-wrap {display: flex; flex-direction: column; gap: .4rem;}
.hd-title {display: flex; flex-direction: column;}
.g-conts-area {display: flex; flex-direction: column; gap: 2rem;}
.g-desc-body {font-size: 1.7rem; font-weight: 500; color: var(--color-gray-70, #505151); letter-spacing: -0.04em; line-height: 1.7;}
.g-desc-area {display: flex; flex-direction: column; gap: 1.2rem;}
.con-tit {font-size: 1.9rem; font-weight: 700; color: var(--color-text-bolder, #191919); letter-spacing: -0.04em; line-height: 1.4;}
.g-desc {font-size: 1.5rem; font-weight: 500; color: var(--color-gray-70, #505151); letter-spacing: -0.04em; line-height: 1.7;}
.gap-layout-h1-h1 {gap: .4rem;}
.gap-layout-text-text-medium {gap: 1.2rem;}
.gap-layout-title-body-medium {gap: .8rem;}