@charset "utf-8";

/* ============================================================================
   Tier 1 of 4 — design tokens

   Every value the other three tiers use is declared here and nowhere else.
   A project that wants a different look changes tokens, not rules: nothing
   below this file hard-codes a colour, a size or a duration.

   Ownership: user-owned. The generator writes this file only when it is
   absent, so a project's own token values survive regeneration; the
   design-tokens command updates only its marked Figma block. Project
   overrides can also go in site.css, which loads last.

   The scale is deliberately plain: a neutral greyscale, one accent, a
   system font stack, and a spacing ladder. It is meant to be replaced, not
   admired.

   Sizes are declared in rem against a 62.5% root, so 1rem = 10px and the
   arithmetic in a rule stays readable. Fluid values use clamp() between a
   200px floor and a 600px ceiling; outside that range they pin to the
   min or the max rather than continuing to grow.
   ========================================================================= */

html {
    font-size: 62.5%;
}

:root {
    /* ---- safe area -----------------------------------------------------
       The four insets a notch, a Dynamic Island, a display cutout or a home
       indicator carves out of the viewport. Declared once here so no rule
       below ever writes a raw env() call, and so a rule can compose an inset
       with its own spacing: calc(2rem + var(--safe-bottom)).

       The 0px fallback matters. On a desktop browser, an Android phone
       without a cutout, or any engine that does not implement env(), all
       four resolve to 0px and every calc() above collapses to the design's
       original value. Safe area support is therefore additive: it can only
       add space where the device actually takes some away.

       These read as 0px unless the page also carries viewport-fit=cover in
       its viewport meta. The generated page shell emits that; a hand-written
       page that does not will see zeros. */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);

    /* ---- layout ------------------------------------------------------- */
    --inner-max-width: 96rem;
    /* Fluid values reach their minimum at a 200px viewport and their maximum
       at 600px. The same range is used by every fluid type size below. */
    --inner-padding-x: var(--figma-padding-1); /* 12px: 375 - 351 artboard gutter */
    --header-height: 5.6rem;
    --footer-height: 5.6rem;

    /* ---- font family --------------------------------------------------
       System stack only. The template hosts no font file and requests no
       font from a remote host, so a generated project keeps working with
       no network at all. A project that wants a webfont adds the
       @font-face to site.css and repoints --font-base. */
    --font-base: 'Pretendard', 'Noto Sans KR', system-ui, -apple-system,
        BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    --font-display: 'YK Green Forest', var(--font-base);
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
        'Liberation Mono', monospace;

    /* ---- font size ----------------------------------------------------- */
    /* Fluid 250px-760px, generated by design-tokens from design/figma-export.css.
       The design value is the maximum; the minimum keeps one ratio (10/12). */
    --fs-caption: var(--figma-font-size-4);    /* 12px helper text, step labels */
    --fs-body: var(--figma-font-size-2);       /* 14px list rows, Q/A, buttons  */
    --fs-alert: var(--figma-font-size-7);      /* 15px inline error banner      */
    --fs-label: var(--figma-font-size-3);      /* 16px card titles, form values */
    --fs-title: var(--figma-font-size-5);      /* 18px page title, primary btn  */
    --fs-page-title: var(--figma-font-size-6); /* 20px section headings         */
    --fs-hero: var(--figma-font-size-1);       /* 22px home hero headline       */

    /* ---- font weight --------------------------------------------------- */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* ---- line height --------------------------------------------------- */
    --lh-none: 1.1;
    --lh-tight: 1.3;    /* 130% - headings, card titles, most body copy */
    --lh-snug: 1.4;     /* 140% - hero, buttons, long paragraphs        */
    --lh-body: 1.5;     /* 150% - Q./A. markers                        */
    --lh-relaxed: 1.7;

    /* ---- letter spacing ------------------------------------------------ */
    --ls-normal: 0;
    --ls-tight: -0.02em;  /* the export applies this to nearly every run of text */
    --ls-wide: 0.02em;    /* logo wordmark only */

    /* ---- spacing ------------------------------------------------------- */
    /* margin and gap keep a 0 floor, separate from the padding scale below. */
    --space-2: var(--figma-space-11);  /*  3px */
    --space-4: var(--figma-space-8);   /*  4px */
    --space-xs: var(--figma-space-7);  /*  8px */
    --space-sm: var(--figma-space-1);  /* 12px */
    --space-md: var(--figma-space-5);  /* 16px */
    --space-lg: var(--figma-space-4);  /* 24px */
    --space-xl: var(--figma-space-6);  /* 46px */
    --space-2xl: var(--figma-space-9); /* 48px */
    --space-3xl: var(--figma-space-13);/* 80px */

    /* ---- padding -------------------------------------------------------
       Positive padding has a 10px floor so a control never collapses at the
       250px end. Zero stays zero. Required by common.css / layout.css /
       utilities.css, which reference these names directly. */
    --padding-2: var(--figma-padding-4);   /*  4px design -> 10px floor */
    --padding-4: var(--figma-padding-7);   /*  6px design -> 10px floor */
    --padding-xs: var(--figma-padding-8);  /*  8px design -> 10px floor */
    --padding-sm: var(--figma-padding-1);  /* 12px */
    --padding-md: var(--figma-padding-5);  /* 16px */
    --padding-lg: var(--figma-padding-3);  /* 24px */
    --padding-xl: var(--figma-padding-6);  /* 48px section bottom */
    --padding-2xl: var(--figma-padding-9); /* 80px hero side inset */
    --padding-3xl: var(--figma-padding-9); /* design has no larger step */

    /* ---- radius -------------------------------------------------------- */
    --radius-sm: var(--figma-radius-5);   /* 4px  progress bars           */
    --radius-xs: var(--figma-radius-1);   /* 5px  hero card, notice panel */
    --radius-md: var(--figma-radius-3);   /* 8px  cards, inputs, buttons  */
    --radius-lg: var(--figma-radius-7);   /* 10px result rows             */
    --radius-pill: var(--figma-radius-2); /* 1000px pill                  */

    /* ---- border and shadow --------------------------------------------- */
    --size-hairline: 1px;
    --shadow-card: var(--figma-shadow-1);       /* cards, FAQ rows       */
    --shadow-raised: var(--figma-shadow-3);     /* tooltip, alert banner */
    --shadow-bottom-bar: var(--figma-shadow-2); /* sticky bottom bar     */
    /* These two are filter: drop-shadow() in the design, not box-shadow, so
       the extractor does not collect them. Kept literal on purpose. */
    --shadow-dropdown: 0 0 4px rgba(0, 0, 0, 0.15);
    --shadow-hero-image: 3px 3px 6px rgba(0, 0, 0, 0.2);

    /* ---- motion --------------------------------------------------------
       common.css turns these to 0s under prefers-reduced-motion, so a rule
       that uses the token never has to ask the question itself. */
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --easing-standard: cubic-bezier(0.2, 0, 0, 1);

    /* ---- layering ------------------------------------------------------ */
    --z-base: 0;
    --z-sticky: 100;
    --z-header: 200;
    --z-overlay: 300;

    /* ---- colour --------------------------------------------------------
       Neutral by design. One accent, one danger, and a greyscale. */
    /* Figma brand palette, kept behind the framework's semantic names.
       Names match the Figma styles exactly (main/color N, Gray/N, System/*)
       so a value can be traced back to the design file without guessing. */
    --figma-primary-100: #f3fbfb;
    --figma-primary-200: #ddf9fb;
    --figma-primary-300: #cdf0f4;
    --figma-primary-400: #67cad5;
    --figma-primary-500: #00777b;
    --figma-primary-600: #004251;
    --figma-gray-100: #f8f8f8;
    --figma-gray-200: #ebebeb;
    --figma-gray-300: #e1e1e1;
    --figma-gray-400: #d9d9d9;
    --figma-gray-500: #9e9e9e;
    --figma-gray-600: #5e5e5e;
    --figma-basic: #222222;
    --figma-error: #ff5757;
    --figma-error-bg: #ffeef0;

    /* Values the export uses that carry no Figma style name. */
    --figma-wordmark: #00233d;          /* 청년미래보금자리론 lockup text   */
    --figma-icon: #1f1f1f;              /* default icon vector fill        */
    --figma-notice-bg: #d8f0f0;         /* result-screen notice panel      */
    --figma-caution: #7b6200;           /* partly-met diagnosis row        */
    --figma-fail: #7b0e00;              /* unmet diagnosis row             */
    --figma-logo-gradient: linear-gradient(180deg, #159c6d 0%, #1a5079 100%);
    --figma-glow: radial-gradient(50% 50% at 50% 50%,
        rgba(0, 118, 123, 0.25) 0%, rgba(0, 118, 123, 0) 100%);

    --color-bg: #ffffff;
    --color-bg-soft: var(--figma-primary-100);
    --color-bg-card: #ffffff;
    --color-bg-selected: var(--figma-primary-200);
    --color-bg-disabled: var(--figma-gray-200);

    --color-text: var(--figma-basic);
    --color-text-sub: var(--figma-gray-600);
    --color-text-mute: var(--figma-gray-500);
    --color-text-disabled: var(--figma-gray-500);
    --color-text-invert: #ffffff;

    --color-primary: var(--figma-primary-500);
    --color-primary-strong: var(--figma-primary-600);
    --color-primary-soft: var(--figma-primary-100);
    --color-danger: var(--figma-error);
    --color-danger-soft: var(--figma-error-bg);

    /* Diagnosis result states (DIAG-05). Pass reuses the brand colour. */
    --color-state-pass: var(--figma-primary-500);
    --color-state-caution: var(--figma-caution);
    --color-state-fail: var(--figma-fail);

    --color-line: var(--figma-gray-200);
    --color-line-input: var(--figma-gray-400);
    --color-line-strong: var(--figma-gray-300);
    --color-focus: var(--figma-primary-500);
    --color-scrim: rgba(0, 0, 0, 0.45);
}

/* >>> FIGMA-TOKENS:generated >>> */
/*
 * Token candidates extracted from Figma-exported CSS.
 * Source: figma-export.css
 * Fluid viewport: 250px to 375px. Design values are maxima.
 * Font minima use one ratio; positive padding has a 10px floor.
 *
 * Absolute coordinates, element dimensions and one-off offsets were
 * intentionally omitted. Rename neutral candidates after visual review
 * (for example --color-1 to --color-primary) before using them widely.
 */

@font-face { /* Source: https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css */
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: swap;
	src: local('Pretendard Black'), url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/../../../packages/pretendard/dist/web/static/woff2/Pretendard-Black.woff2") format('woff2'), url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/../../../packages/pretendard/dist/web/static/woff/Pretendard-Black.woff") format('woff');
}
@font-face { /* Source: https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css */
	font-family: 'Pretendard';
	font-weight: 800;
	font-display: swap;
	src: local('Pretendard ExtraBold'), url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/../../../packages/pretendard/dist/web/static/woff2/Pretendard-ExtraBold.woff2") format('woff2'), url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/../../../packages/pretendard/dist/web/static/woff/Pretendard-ExtraBold.woff") format('woff');
}
@font-face { /* Source: https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css */
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold'), url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/../../../packages/pretendard/dist/web/static/woff2/Pretendard-Bold.woff2") format('woff2'), url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/../../../packages/pretendard/dist/web/static/woff/Pretendard-Bold.woff") format('woff');
}
@font-face { /* Source: https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css */
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: local('Pretendard SemiBold'), url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/../../../packages/pretendard/dist/web/static/woff2/Pretendard-SemiBold.woff2") format('woff2'), url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/../../../packages/pretendard/dist/web/static/woff/Pretendard-SemiBold.woff") format('woff');
}
@font-face { /* Source: https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css */
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard Medium'), url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/../../../packages/pretendard/dist/web/static/woff2/Pretendard-Medium.woff2") format('woff2'), url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/../../../packages/pretendard/dist/web/static/woff/Pretendard-Medium.woff") format('woff');
}
@font-face { /* Source: https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css */
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'), url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/../../../packages/pretendard/dist/web/static/woff2/Pretendard-Regular.woff2") format('woff2'), url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/../../../packages/pretendard/dist/web/static/woff/Pretendard-Regular.woff") format('woff');
}
@font-face { /* Source: https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css */
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src: local('Pretendard Light'), url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/../../../packages/pretendard/dist/web/static/woff2/Pretendard-Light.woff2") format('woff2'), url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/../../../packages/pretendard/dist/web/static/woff/Pretendard-Light.woff") format('woff');
}
@font-face { /* Source: https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css */
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src: local('Pretendard ExtraLight'), url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/../../../packages/pretendard/dist/web/static/woff2/Pretendard-ExtraLight.woff2") format('woff2'), url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/../../../packages/pretendard/dist/web/static/woff/Pretendard-ExtraLight.woff") format('woff');
}
@font-face { /* Source: https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css */
	font-family: 'Pretendard';
	font-weight: 100;
	font-display: swap;
	src: local('Pretendard Thin'), url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/../../../packages/pretendard/dist/web/static/woff2/Pretendard-Thin.woff2") format('woff2'), url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/../../../packages/pretendard/dist/web/static/woff/Pretendard-Thin.woff") format('woff');
}
@font-face {
    font-family: 'YK Green Forest';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("fonts/YKGreenForest-Light.woff2") format('woff2'),
         url("fonts/YKGreenForest-Light.woff") format('woff');
}
@font-face {
    font-family: 'YK Green Forest';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/YKGreenForest-Medium.woff2") format('woff2'),
         url("fonts/YKGreenForest-Medium.woff") format('woff');
}
@font-face {
    font-family: 'YK Green Forest';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/YKGreenForest-Bold.woff2") format('woff2'),
         url("fonts/YKGreenForest-Bold.woff") format('woff');
}
:root {
    /* figma color */
    --figma-color-1: #ffffff;
    --figma-color-2: #ebebeb;
    --figma-color-3: #1f1f1f;
    --figma-color-4: #f3fbfb;
    --figma-color-5: #67cad5;
    --figma-color-6: #004251;
    --figma-color-7: #00777b;
    --figma-color-8: #ddf9fb;
    --figma-color-9: rgba(0, 0, 0, 0.2);
    --figma-color-10: #222222;
    --figma-color-11: #5e5e5e;
    --figma-color-12: #cdf0f4;
    --figma-color-13: #e1e1e1;
    --figma-color-14: #d9d9d9;
    --figma-color-15: #9e9e9e;
    --figma-color-16: rgba(0, 0, 0, 0.15);
    --figma-color-17: #ff5757;
    --figma-color-18: #7b6200;
    --figma-color-19: #7b0e00;

    /* figma font family */
    --figma-font-family-1: 'Pretendard';
    --figma-font-family-2: 'YK Green Forest';

    /* figma font size */
    --figma-font-size-1: clamp(18.3333px, calc(11px + 2.9333vw), 22px);
    --figma-font-size-2: clamp(11.6667px, calc(7px + 1.8667vw), 14px);
    --figma-font-size-3: clamp(13.3333px, calc(8px + 2.1333vw), 16px);
    --figma-font-size-4: clamp(10px, calc(6px + 1.6vw), 12px);
    --figma-font-size-5: clamp(15px, calc(9px + 2.4vw), 18px);
    --figma-font-size-6: clamp(16.6667px, calc(10px + 2.6667vw), 20px);
    --figma-font-size-7: clamp(12.5px, calc(7.5px + 2vw), 15px);

    /* figma font weight */
    --figma-font-weight-1: 700;
    --figma-font-weight-2: 400;
    --figma-font-weight-3: 800;
    --figma-font-weight-4: 500;
    --figma-font-weight-5: 600;

    /* figma line height */
    --figma-line-height-1: 140%;
    --figma-line-height-2: 150%;
    --figma-line-height-3: 130%;

    /* figma letter spacing */
    --figma-letter-spacing-1: 0.02em;
    --figma-letter-spacing-2: -0.02em;

    /* figma space */
    --figma-space-1: clamp(8px, calc(0px + 3.2vw), 12px);
    --figma-space-2: clamp(6.6667px, calc(0px + 2.6667vw), 10px);
    --figma-space-3: 0px;
    --figma-space-4: clamp(16px, calc(0px + 6.4vw), 24px);
    --figma-space-5: clamp(10.6667px, calc(0px + 4.2667vw), 16px);
    --figma-space-6: clamp(30.6667px, calc(0px + 12.2667vw), 46px);
    --figma-space-7: clamp(5.3333px, calc(0px + 2.1333vw), 8px);
    --figma-space-8: clamp(2.6667px, calc(0px + 1.0667vw), 4px);
    --figma-space-9: clamp(32px, calc(0px + 12.8vw), 48px);
    --figma-space-10: clamp(4px, calc(0px + 1.6vw), 6px);
    --figma-space-11: clamp(2px, calc(0px + 0.8vw), 3px);
    --figma-space-12: clamp(3.3333px, calc(0px + 1.3333vw), 5px);
    --figma-space-13: clamp(53.3333px, calc(0px + 21.3333vw), 80px);

    /* figma padding */
    --figma-padding-1: clamp(10px, calc(6px + 1.6vw), 12px);
    --figma-padding-2: 0px;
    --figma-padding-3: clamp(16px, calc(0px + 6.4vw), 24px);
    --figma-padding-4: 10px;
    --figma-padding-5: clamp(10.6667px, calc(0px + 4.2667vw), 16px);
    --figma-padding-6: clamp(32px, calc(0px + 12.8vw), 48px);
    --figma-padding-7: 10px;
    --figma-padding-8: 10px;
    --figma-padding-9: clamp(53.3333px, calc(0px + 21.3333vw), 80px);

    /* figma radius */
    --figma-radius-1: 5px;
    --figma-radius-2: 1000px;
    --figma-radius-3: 8px;
    --figma-radius-4: 0px;
    --figma-radius-5: 4px;
    --figma-radius-6: 100px;
    --figma-radius-7: 10px;
    --figma-radius-8: 0.75px;

    /* figma shadow */
    --figma-shadow-1: 0px 0px 5px rgba(0, 0, 0, 0.2);
    --figma-shadow-2: 0px -2px 4px rgba(0, 0, 0, 0.2);
    --figma-shadow-3: 0px 0px 10px rgba(0, 0, 0, 0.15);

    --font-base: var(--figma-font-family-1), system-ui, sans-serif;
}
/* <<< FIGMA-TOKENS:generated */