@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: system-owned. The generator rewrites this file when the
   template's token set changes, so put project overrides in site.css, which
   is written once and never touched again and 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: clamp(1.6rem, calc(0.8rem + 4vw), 3.2rem);
    --header-height: 6.1rem;
    --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: 'Cafe24 Ssurround', var(--font-base);
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
        'Liberation Mono', monospace;

    /* ---- font size ----------------------------------------------------- */
    --fs-caption: clamp(1.2rem, calc(1.1rem + 0.5vw), 1.4rem);
    --fs-body: clamp(1.4rem, calc(1.3rem + 0.5vw), 1.6rem);
    --fs-label: clamp(1.5rem, calc(1.4rem + 0.5vw), 1.7rem);
    --fs-title: clamp(1.8rem, calc(1.6rem + 1vw), 2.2rem);
    --fs-page-title: clamp(2.2rem, calc(1.8rem + 2vw), 3rem);
    --fs-hero: clamp(2.6rem, calc(2rem + 3vw), 3.8rem);

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

    /* ---- line height --------------------------------------------------- */
    --lh-none: 1.1;
    --lh-tight: 1.25;
    --lh-snug: 1.4;
    --lh-body: 1.55;
    --lh-relaxed: 1.7;

    /* ---- letter spacing ------------------------------------------------ */
    --ls-normal: 0;
    --ls-tight: -0.01em;
    --ls-wide: 0.02em;

    /* ---- spacing ------------------------------------------------------- */
    --space-2: 0.2rem;
    --space-4: 0.4rem;
    --space-xs: 0.8rem;
    --space-sm: 1.2rem;
    --space-md: 1.6rem;
    --space-lg: 2.4rem;
    --space-xl: 3.2rem;
    --space-2xl: 4.8rem;
    --space-3xl: 6.4rem;

    /* ---- radius -------------------------------------------------------- */
    --radius-sm: 0.4rem;
    --radius-md: 0.8rem;
    --radius-lg: 1.2rem;
    --radius-pill: 999rem;

    /* ---- border and shadow --------------------------------------------- */
    --size-hairline: 1px;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-raised: 0 2px 4px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08);

    /* ---- 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. */
    --figma-primary-100: #fff8f0;
    --figma-primary-200: #ffecd7;
    --figma-primary-400: #ffb45d;
    --figma-primary-500: #ff8800;
    --figma-primary-600: #5b3000;
    --figma-gray-200: #ebebeb;
    --figma-gray-500: #9e9e9e;
    --figma-gray-600: #5e5e5e;

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

    --color-text: #222222;
    --color-text-sub: var(--figma-gray-600);
    --color-text-mute: #7f8894;
    --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: #f03736;
    --color-danger-soft: #ffe0d4;

    --color-line: var(--figma-gray-200);
    --color-line-strong: #b3b3b3;
    --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
 *
 * 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.
 */

:root {
    /* figma color */
    --figma-color-1: rgba(13, 28, 45, 0.08);
    --figma-color-2: #0d1c2d;
    --figma-color-3: #ffffff;
    --figma-color-4: rgba(255, 255, 255, 0.4);
    --figma-color-5: #7f8894;
    --figma-color-6: rgba(69, 104, 255, 0.2);
    --figma-color-7: #4568ff;
    --figma-color-8: #ff8800;
    --figma-color-9: #000000;
    --figma-color-10: #f9f9f9;
    --figma-color-11: rgba(60, 60, 67, 0.18);
    --figma-color-12: rgba(235, 235, 245, 0.3);
    --figma-color-13: rgba(60, 60, 67, 0.6);
    --figma-color-14: #34c759;
    --figma-color-15: #ffd60a;
    --figma-color-16: #ebebeb;
    --figma-color-17: #1f1f1f;
    --figma-color-18: #ffb45d;
    --figma-color-19: rgba(0, 244, 240, 0.6);
    --figma-color-20: rgba(187, 253, 251, 0);
    --figma-color-21: rgba(226, 255, 255, 0);
    --figma-color-22: rgba(255, 255, 255, 0.8);
    --figma-color-23: rgba(255, 255, 255, 0.16);
    --figma-color-24: #fff8f0;
    --figma-color-25: #5b3000;
    --figma-color-26: #ffca3d;
    --figma-color-27: #ffc00d;
    --figma-color-28: #f5eac4;
    --figma-color-29: #fff9d6;
    --figma-color-30: #f8efca;
    --figma-color-31: #ebdcb4;
    --figma-color-32: #599559;
    --figma-color-33: #f5eed1;
    --figma-color-34: #f0bd40;
    --figma-color-35: #8eb93e;
    --figma-color-36: #a8c96b;
    --figma-color-37: #c0d57d;
    --figma-color-38: #edf2e6;
    --figma-color-39: #f6f3cb;
    --figma-color-40: #fe575e;
    --figma-color-41: #fe4f59;
    --figma-color-42: #fe3147;
    --figma-color-43: #fe1f3c;
    --figma-color-44: #fe1938;
    --figma-color-45: #fe5757;
    --figma-color-46: #fa2e2e;
    --figma-color-47: #59956a;
    --figma-color-48: #8b5c29;
    --figma-color-49: #9fd245;
    --figma-color-50: #afd851;
    --figma-color-51: #c5e161;
    --figma-color-52: #d3e76b;
    --figma-color-53: #d8e96f;
    --figma-color-54: #f2f7c7;
    --figma-color-55: #b7cf59;
    --figma-color-56: #a2c11a;
    --figma-color-57: #d8e493;
    --figma-color-58: #478a47;
    --figma-color-59: #739928;
    --figma-color-60: #abbf6c;
    --figma-color-61: #f49142;
    --figma-color-62: #bd5400;
    --figma-color-63: #e37d20;
    --figma-color-64: #fcbf2b;
    --figma-color-65: #f5962b;
    --figma-color-66: #f38009;
    --figma-color-67: #eb6118;
    --figma-color-68: #edd49c;
    --figma-color-69: #ffe34a;
    --figma-color-70: #ffd62e;
    --figma-color-71: #f5c900;
    --figma-color-72: #ece082;
    --figma-color-73: #fff8b6;
    --figma-color-74: #fff9bd;
    --figma-color-75: #ffeb7b;
    --figma-color-76: #fff3b2;
    --figma-color-77: #8dc269;
    --figma-color-78: #c7e873;
    --figma-color-79: #f03736;
    --figma-color-80: #fd8e6f;
    --figma-color-81: #ffe0d4;
    --figma-color-82: #fddd8a;
    --figma-color-83: #222222;
    --figma-color-84: #ffecd7;
    --figma-color-85: rgba(0, 0, 0, 0.2);
    --figma-color-86: rgba(255, 136, 0, 0.3);
    --figma-color-87: #5e5e5e;
    --figma-color-88: #113b6d;
    --figma-color-89: #ffd5c5;
    --figma-color-90: #e59f8f;
    --figma-color-91: #7badb2;
    --figma-color-92: #8dc0c9;
    --figma-color-93: #c7cc66;
    --figma-color-94: #6fa5a8;
    --figma-color-95: #639196;
    --figma-color-96: #685542;
    --figma-color-97: #8569b2;
    --figma-color-98: #755da3;
    --figma-color-99: #62a352;
    --figma-color-100: #5e4684;
    --figma-color-101: #f9b29b;
    --figma-color-102: #519348;
    --figma-color-103: #9e5693;
    --figma-color-104: #894983;
    --figma-color-105: #6d356a;
    --figma-color-106: #665046;
    --figma-color-107: #59433b;
    --figma-color-108: #efe7c5;
    --figma-color-109: #92c165;
    --figma-color-110: #86af5a;
    --figma-color-111: #569146;
    --figma-color-112: #83b566;
    --figma-color-113: #e88213;
    --figma-color-114: #f9901c;
    --figma-color-115: #db740e;
    --figma-color-116: #f4d240;
    --figma-color-117: #ddbc31;
    --figma-color-118: #4f8440;
    --figma-color-119: #cc3932;
    --figma-color-120: #e04e3f;
    --figma-color-121: #f6f6f6;
    --figma-color-122: #4570b4;
    --figma-color-123: #e6e6e6;
    --figma-color-124: #a2cdea;
    --figma-color-125: #88b9d3;
    --figma-color-126: #725c46;
    --figma-color-127: #d13e33;
    --figma-color-128: #c12f2b;
    --figma-color-129: #3f2d1f;
    --figma-color-130: #7188ea;
    --figma-color-131: #7e9af2;
    --figma-color-132: #b3b3b3;
    --figma-color-133: #dbe57c;
    --figma-color-134: #335b25;
    --figma-color-135: #724f2b;
    --figma-color-136: #5f3e1b;
    --figma-color-137: #fff2e5;
    --figma-color-138: #f9dbd4;
    --figma-color-139: #cc4b3e;
    --figma-color-140: #e0bab3;
    --figma-color-141: #fffdfd;
    --figma-color-142: #9e9e9e;

    /* figma font family */
    --figma-font-family-1: 'Pretendard';
    --figma-font-family-2: 'Cafe24 Ssurround';
    --figma-font-family-3: 'Jalnan 2';
    --figma-font-family-4: 'Noto Sans KR';
    --figma-font-family-5: 'Inter';
    --figma-font-family-6: var(--font-body);
    --figma-font-family-7: var(--font-display);

    /* figma font size */
    --figma-font-size-1: clamp(16px, calc(15px + 0.5vw), 18px);
    --figma-font-size-2: clamp(12px, calc(11px + 0.5vw), 14px);
    --figma-font-size-3: clamp(36px, calc(31.5px + 2.25vw), 45px);
    --figma-font-size-4: clamp(17px, calc(16px + 0.5vw), 19px);
    --figma-font-size-5: clamp(31.13px, calc(27.2386px + 1.9457vw), 38.9128px);
    --figma-font-size-6: clamp(15.0222px, calc(14.0222px + 0.5vw), 17.0222px);
    --figma-font-size-7: clamp(14px, calc(13px + 0.5vw), 16px);
    --figma-font-size-8: clamp(11px, calc(10.5px + 0.25vw), 12px);

    /* figma font weight */
    --figma-font-weight-1: 500;
    --figma-font-weight-2: 700;
    --figma-font-weight-3: 400;
    --figma-font-weight-4: 600;
    --figma-font-weight-5: 800;
    --figma-font-weight-6: var(--font-weight-bold);
    --figma-font-weight-7: var(--font-weight-regular);
    --figma-font-weight-8: var(--font-weight-medium);
    --figma-font-weight-9: var(--font-weight-semibold);
    --figma-font-weight-10: var(--font-weight-extrabold);

    /* figma line height */
    --figma-line-height-1: 150%;
    --figma-line-height-2: 118%;
    --figma-line-height-3: 130%;
    --figma-line-height-4: 140%;
    --figma-line-height-5: 22px;
    --figma-line-height-6: 17px;
    --figma-line-height-7: var(--line-height-tight);
    --figma-line-height-8: var(--line-height-normal);
    --figma-line-height-9: var(--line-height-relaxed);

    /* figma letter spacing */
    --figma-letter-spacing-1: -0.011em;
    --figma-letter-spacing-2: -0.02em;
    --figma-letter-spacing-3: var(--letter-spacing-default);

    /* figma space */
    --figma-space-1: clamp(7px, calc(6.5px + 0.25vw), 8px);
    --figma-space-2: clamp(19.2px, calc(16.8px + 1.2vw), 24px);
    --figma-space-3: clamp(3px, calc(2.5px + 0.25vw), 4px);
    --figma-space-4: clamp(5px, calc(4.5px + 0.25vw), 6px);
    --figma-space-5: clamp(9px, calc(8.5px + 0.25vw), 10px);
    --figma-space-6: 0px;
    --figma-space-7: clamp(11px, calc(10.5px + 0.25vw), 12px);
    --figma-space-8: clamp(8.1px, calc(7.6px + 0.25vw), 9.1px);
    --figma-space-9: clamp(16px, calc(15px + 0.5vw), 18px);
    --figma-space-10: clamp(14px, calc(13px + 0.5vw), 16px);
    --figma-space-11: clamp(38.4px, calc(33.6px + 2.4vw), 48px);
    --figma-space-12: clamp(21.6px, calc(18.9px + 1.35vw), 27px);
    --figma-space-13: clamp(40px, calc(35px + 2.5vw), 50px);
    --figma-space-14: clamp(18px, calc(17px + 0.5vw), 20px);
    --figma-space-15: clamp(5.8086px, calc(5.3086px + 0.25vw), 6.8086px);
    --figma-space-16: clamp(12px, calc(11px + 0.5vw), 14px);

    /* figma radius */
    --figma-radius-1: 2px;
    --figma-radius-2: 20px;
    --figma-radius-3: 500px;
    --figma-radius-4: 4px;
    --figma-radius-5: 16px;
    --figma-radius-6: 12px;
    --figma-radius-7: 1px;
    --figma-radius-8: 9px;
    --figma-radius-9: 6.89474px;
    --figma-radius-10: 9.18731px;
    --figma-radius-11: 100000px;
    --figma-radius-12: 8px;
    --figma-radius-13: 1000px;
    --figma-radius-14: 5px;
    --figma-radius-15: 0px;
    --figma-radius-16: 615.942px;
    --figma-radius-17: 10.7433px;
    --figma-radius-18: 9999px;

    /* figma shadow */
    --figma-shadow-1: 0px 0px 6px rgba(0, 0, 0, 0.2);
    --figma-shadow-2: 0px 0px 5px rgba(0, 0, 0, 0.2);
    --figma-shadow-3: 0px -2px 4px rgba(0, 0, 0, 0.2);
    --figma-shadow-4: 0px 2px 6px 1px rgba(0, 0, 0, 0.0901961), 0px 3px 16px rgba(0, 0, 0, 0.0784314), 0px 0px 0px 1px rgba(0, 0, 0, 0.101961);
    --figma-shadow-5: var(--shadow-sm);
    --figma-shadow-6: var(--shadow-md);

}
/* <<< FIGMA-TOKENS:generated */