/* ==========================================================================
    Fonts (?고듃 濡쒕뵫) - ?먮Ц 100% ?좎?
   ========================================================================== */

/* Lato */
@font-face {
  font-family: 'Lato';
  src: url('../assets/fonts/Lato/Lato-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../assets/fonts/Lato/Lato-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../assets/fonts/Lato/Lato-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../assets/fonts/Lato/Lato-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../assets/fonts/Lato/Lato-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Lora (Variable) */
@font-face {
  font-family: 'Lora';
  src: url('../assets/fonts/Lora/Lora[wght].ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lora';
  src: url('../assets/fonts/Lora/Lora-Italic[wght].ttf') format('truetype');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ==========================================================================
     Colors (?됱긽) - Earthy Palette
     ========================================================================== */
  /* -- 硫붿씤 釉뚮옖??諛?湲곕뒫 ?됱긽 -- */
  --cb-primary: #D8A06F;       /* CTA, 媛뺤“ ?띿뒪?? ?ъ빱???ъ씤??*/
  --cb-primary-hover: #C38A63; /* Base 1 hover/active */

  /* -- 諛곌꼍 諛??쒕㈃ ?됱긽 -- */
  --cb-bg: #F7F3EF;           /* ?섏씠吏€ 罹붾쾭??*/
  --cb-bg-input: #FFFFFF;     /* ?낅젰 ?꾨뱶 諛곌꼍 */
  --cb-surface: #FDF8F4;      /* 移대뱶/?⑤꼸 諛곌꼍 */
  --cb-surface-2: #F3ECE4;    /* 蹂댁“ ?⑤꼸/援щ텇 諛뺤뒪 */
  --cb-white: #FFFFFF;        /* 媛뺥븳 ?€鍮??붿냼 */

  /* -- ?띿뒪???됱긽 -- */
  --cb-text-primary: #332922;   /* 湲곕낯 ?쒕ぉ/蹂몃Ц ?띿뒪??*/
  --cb-text-secondary: #75675E; /* 蹂댁“ ?ㅻ챸湲€/?좎쭨/硫뷀? ?띿뒪??*/
  --cb-text-tertiary: #A89D95;  /* 鍮꾪솢???띿뒪??*/
  --cb-text-placeholder: #A89D95; /* ?낅젰 ?뚮젅?댁뒪?€???띿뒪??*/

  /* -- ?뚮몢由?諛?援щ텇??-- */
  --cb-border: #E6DDD4;         /* ?낅젰 ?뚮몢由?援щ텇??*/


  /* -- Derived Colors -- */
  --cb-transparent: rgba(0, 0, 0, 0);
  --cb-white-70: rgba(255, 255, 255, 0.7);
  --cb-white-72: rgba(255, 255, 255, 0.72);
  --cb-white-75: rgba(255, 255, 255, 0.75);
  --cb-white-78: rgba(255, 255, 255, 0.78);
  --cb-white-82: rgba(255, 255, 255, 0.82);
  --cb-white-90: rgba(255, 255, 255, 0.9);
  --cb-white-20: rgba(255, 255, 255, 0.2);
  --cb-white-0: rgba(255, 255, 255, 0);
  --cb-bg-88: rgba(247, 243, 239, 0.88);
  --cb-bg-72: rgba(247, 243, 239, 0.72);
  --cb-bg-50: rgba(247, 243, 239, 0.5);
  --cb-text-primary-8: rgba(51, 41, 34, 0.08);
  --cb-text-primary-10: rgba(51, 41, 34, 0.1);
  --cb-text-primary-14: rgba(51, 41, 34, 0.14);
  --cb-text-primary-18: rgba(51, 41, 34, 0.18);
  --cb-text-primary-12: rgba(51, 41, 34, 0.12);
  --cb-text-primary-16: rgba(51, 41, 34, 0.16);
  --cb-text-primary-28: rgba(51, 41, 34, 0.28);
  --cb-text-primary-40: rgba(51, 41, 34, 0.4);
  --cb-primary-0: rgba(216, 160, 111, 0);
  --cb-primary-18: rgba(216, 160, 111, 0.18);
  --cb-primary-22: rgba(216, 160, 111, 0.22);
  --cb-primary-25: rgba(216, 160, 111, 0.25);
  --cb-primary-55: rgba(216, 160, 111, 0.55);
  --cb-primary-60: rgba(216, 160, 111, 0.6);
  --cb-primary-85: rgba(216, 160, 111, 0.85);

  /* -- Glass / Card tokens -- */
  --cb-glass-border: 1px solid var(--cb-text-primary-12);
  --cb-glass-surface: var(--cb-white-78);
  --cb-glass-shadow: 0 16px 36px var(--cb-text-primary-12);
  --cb-glass-blur: 6px;
  --cb-scenario-overlay-soft: radial-gradient(120% 120% at 0% 0%, var(--cb-primary-18) 0%, var(--cb-primary-0) 60%);
  --cb-scenario-card-radius: clamp(var(--cb-size-16), 2vw, 22px);
  --cb-scenario-card-padding-tight: clamp(1.1rem, 2vw, 1.35rem);
  --cb-scenario-card-padding-base: clamp(1.1rem, 2.2vw, 1.75rem);
  --cb-scenario-card-min-height-tight: clamp(8.6rem, 11vw, 11.5rem);
  --cb-scenario-card-min-height-base: clamp(11rem, 17vw, 14rem);
  --cb-scenario-card-hover-shadow: 0 22px 48px var(--cb-text-primary-16);
  --cb-scenario-card-inner-shadow: 0 12px 30px var(--cb-text-primary-12), 0 2px 6px var(--cb-text-primary-8);
  --cb-section-card-title-size: var(--cb-font-size-h3);
  --cb-section-card-title-tracking: var(--cb-letter-spacing-snug);

  /* -- ?곹깭 ?됱긽 -- */
  --cb-status-success: #355246; /* ?깃났/?꾨즺 ?곹깭 */
  --cb-status-info: #4E6F95;    /* ?뺣낫/蹂댁“ ?꾨즺 ?곹깭 */
  --cb-status-info-hover: #436281;
  --cb-status-info-bg: #C8DCF4;
  --cb-status-info-bg-hover: #B5CFEE;
  --cb-status-info-border: #AFC6E3;
  --cb-status-error: #C06B76;   /* error/warning status */
  --cb-status-error-hover: #A85A66;
  --cb-status-error-bg: #EFC3CD;
  --cb-status-error-bg-hover: #E5AFBB;
  --cb-status-error-border: #D8A0AA;

  /* -- Floating alert tokens -- */
  --cb-floating-alert-error-border: #F5C2C7;
  --cb-floating-alert-error-bg: #F8D7DA;
  --cb-floating-alert-error-text: #842029;
  --cb-floating-alert-success-border: #BADCBC;
  --cb-floating-alert-success-bg: #D1E7DD;
  --cb-floating-alert-success-text: #0F5132;
  --cb-floating-alert-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);

  /* -- ?ㅽ겕濡ㅻ컮 ?됱긽 -- */
  --color-scroll-thumb: #a0a0a5;
  --color-scroll-thumb-hover: #707075;


   /* ==========================================================================
      Typography (?€?댄룷洹몃옒??
      ========================================================================== */
  --cb-font-family-base: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --cb-font-family-heading: 'Lora', Georgia, 'Times New Roman', serif;

  --cb-font-size-h1: 3.125rem; /* 50px */
  --cb-font-size-h2: 1.75rem;  /* 28px */
  --cb-font-size-h3: 1.375rem; /* 22px */
  --cb-font-size-h4: 1.125rem; /* 18px */
  --cb-font-size-h5: 1rem;     /* 16px */
  --cb-font-size-h6: 0.875rem; /* 14px */
  --cb-font-size-base: 1rem;   /* 16px - 蹂몃Ц 湲곕낯 */
  --cb-font-size-sm: 0.875rem; /* 14px - ?묒? ?띿뒪??*/

  --cb-font-weight-normal: 400;
  --cb-font-weight-semibold: 600;
  --cb-font-weight-bold: 700;

  --cb-line-height-tight: 1.2;
  --cb-line-height-snug: 1.25;
  --cb-line-height-hero: 1.05;
  --cb-line-height-base: 1.5;

  --cb-min-height-line: 1.2em;

  --cb-letter-spacing-tight: -0.02em;
  --cb-letter-spacing-snug: -0.01em;
  --cb-letter-spacing-wide: 0.16em;
  --cb-letter-spacing-widest: 0.24em;

  --cb-text-transform-uppercase: uppercase;
  --cb-text-decoration-none: none;
  --cb-text-decoration-underline: underline;

  /* ==========================================================================
     Spacing & Layout (?щ갚 諛??덉씠?꾩썐)
     ========================================================================== */
  --cb-space-xs: 0.25rem; /* 4px */
  --cb-space-sm: 0.5rem;  /* 8px */
  --cb-space-md: 1rem;    /* 16px */
  --cb-space-lg: 1.5rem;  /* 24px */
  --cb-space-xl: 2.5rem;  /* 40px */
  --cb-space-xxl: 5rem;   /* 80px */

  --cb-layout-max-width: 1280px;
  --cb-content-max-width: 720px;
  --cb-form-max-width: 520px;
  --cb-header-height: 4.25rem;

  /* ==========================================================================
     UI Elements (UI ?붿냼)
     ========================================================================== */
  --cb-border-radius-md: 4px;
  --cb-border-radius-lg: 8px;
  --cb-border-radius-full: 999px;

  --cb-size-12: 12px;
  --cb-size-14: 14px;
  --cb-size-16: 16px;
  --cb-size-18: 18px;
  --cb-size-20: 20px;
  --cb-size-24: 24px;
  --cb-size-32: 32px;
  --cb-size-34: 34px;
  --cb-size-36: 36px;
  --cb-size-40: 40px;
  --cb-size-44: 44px;
  --cb-size-110: 110px;
  --cb-size-140: 140px;
  --cb-size-160: 160px;
  --cb-min-height-card: 120px;
  --cb-progress-card-width: 22rem;
  --cb-progress-track-height: 10px;
  --cb-progress-duration: 0.8s;

  --cb-radio-switch-height: var(--cb-size-40);
  --cb-radio-switch-gap: var(--cb-space-xs);
  --cb-radio-switch-bg: var(--cb-white-90);
  --cb-radio-switch-active-bg: var(--cb-primary-25);
  --cb-radio-switch-active-text: var(--cb-text-primary);
  --cb-radio-switch-text: var(--cb-text-tertiary);
  --cb-radio-switch-active-shadow: inset 0 1px 0 var(--cb-white-75), 0 1px 2px var(--cb-text-primary-12);

  --cb-check-size: 18px;
  --cb-check-radius: var(--cb-border-radius-md);
  --cb-check-border-width: 1.5px;
  --cb-check-border-color: var(--cb-primary-55);
  --cb-check-bg: var(--cb-white);
  --cb-check-bg-checked: var(--cb-primary-18);
  --cb-check-border-color-checked: var(--cb-primary);
  --cb-check-mark: var(--cb-text-primary);
  --cb-check-duration: 0.5s;
  --cb-check-dash-off: 241 9999999;
  --cb-check-dash-on: 70.5097 9999999;
  --cb-check-dash-offset: -262.2723;

  --cb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --cb-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);

  --cb-focus-ring: 0 0 0 2px var(--cb-primary);

  --cb-z-index-sticky: 1020;
  --cb-z-index-modal: 1050;
  --cb-z-index-tooltip: 1070;
  
  --cb-transition-fast: 0.15s ease-in-out;
  --cb-transition-normal: 0.3s ease-in-out;
  --cb-transition-speed: 0.3s;

  --cb-opacity-disabled: 0.5;

}