/* Design tokens, reset and shared utilities */
:root {

    --font-family-base: "Poppins", "Pretendard", sans-serif;

    --primary: #00AF86;
    --text: #0f172a;
    --text-sub: #334155;

    /* Grey */
    --grey-50: #f9fafb;
    --grey-100: #f2f4f6;
    --grey-200: #e5e8eb;
    --grey-300: #d1d6db;
    --grey-400: #b0b8c1;
    --grey-500: #8b95a1;
    --grey-600: #6b7684;
    --grey-700: #4e5968;
    --grey-800: #333d4b;
    --grey-900: #191f28;

    /* Blue */
    --blue-50: #e8f3ff;
    --blue-100: #c9e2ff;
    --blue-200: #90c2ff;
    --blue-300: #64a8ff;
    --blue-400: #4593fc;
    --blue-500: #3182f6;
    --blue-600: #2272eb;
    --blue-700: #1b64da;
    --blue-800: #1957c2;
    --blue-900: #194aa6; 

    /* Red */
    --red-50: #ffeeee;
    --red-100: #ffd4d6;
    --red-200: #feafb4;
    --red-300: #fb8890;
    --red-400: #f66570;
    --red-500: #f04452;
    --red-600: #e42939;
    --red-700: #d22030;
    --red-800: #bc1b2a;
    --red-900: #a51926;


    /* Orange */
    --orange-50: #fff3e0;
    --orange-100: #ffe0b0;
    --orange-200: #ffcd80;
    --orange-300: #ffbd51;
    --orange-400: #ffa927;
    --orange-500: #fe9800;
    --orange-600: #fb8800;
    --orange-700: #f57800;
    --orange-800: #ed6700;
    --orange-900: #e45600;

    /* Yellow */
    --yellow-50: #fff9e7;
    --yellow-100: #ffefbf;
    --yellow-200: #ffe69b;
    --yellow-300: #ffdd78;
    --yellow-400: #ffd158;
    --yellow-500: #ffc342;
    --yellow-600: #ffb331;
    --yellow-700: #faa131;
    --yellow-800: #ee8f11;
    --yellow-900: #dd7d02;

    /* Green */
    --green-50: #f0faf6;
    --green-100: #aeefd5;
    --green-200: #76e4b8;
    --green-300: #3fd599;
    --green-400: #15c47e;
    --green-500: #03b26c;
    --green-600: #02a262;
    --green-700: #029359;
    --green-800: #028450;
    --green-900: #027648;

    /* Teal */
    --teal-50: #edf8f8;
    --teal-100: #bce9e9;
    --teal-200: #89d8d8;
    --teal-300: #58c7c7;
    --teal-400: #30b6b6;
    --teal-500: #18a5a5;
    --teal-600: #109595;
    --teal-700: #0c8585;
    --teal-800: #097575;
    --teal-900: #076565;

    /* Purple */
    --purple-50: #f9f0fc;
    --purple-100: #edccf8;
    --purple-200: #da9bef;
    --purple-300: #c770e4;
    --purple-400: #b44bd7;
    --purple-500: #a234c7;
    --purple-600: #9128b4;
    --purple-700: #8222a2;
    --purple-800: #73228e;
    --purple-900: #65237b;

    /* Background */
    --white: #ffffff;
    --transparent: transparent;
    --grey-background: var(--grey-50);


    /* Text */

    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;
    --fw-800: 800;
    --fw-900: 900;

}




html {
    overflow-y: scroll;
}

[hidden] {
    display: none !important;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    vertical-align: top;
}

*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-base);
    font-size: 16px;
    font-weight: var(--fw-400);
    line-height: 1.5;
    letter-spacing: -.03em;
    color: var(--text);
    background: var(--white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
}

ul,
ol,
li {
    list-style: none;
}

p {
    word-break: keep-all;
}

img {
    max-width: 100%;
    border: 0;
}

a,
button {
    color: inherit;
    background-color: inherit;
    border: 0;
    font-size: inherit;
    word-break: keep-all;
}

a {
    text-decoration: none;
}

button {
    cursor: pointer;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

/* Use the Lucide chevron for dropdowns while retaining native select behavior. */
select:not([multiple]):not([size]),
select:not([multiple])[size="1"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 44px;
    background-image: url("/assets/icons/chevron-down.svg");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 20px 20px;
}

.site-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    vertical-align: middle;
}

#hd {
    background: var(--grey-900);
}

#hd,
#wrapper {
    min-width: auto;
}

.inner {
    padding: 0 clamp(24px, 3.33vw, 64px);
}

[data-fade] {
    opacity: 0;
}

body.menu-open {
    overflow: hidden;
}

.accordion-content :is(a, button):focus-visible {
    outline-offset: -2px;
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

@media screen and (max-width: 970px) {
    body {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }

    [data-fade] {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}

/* Chinese pages: Pretendard has no Chinese glyphs, and keep-all would stop lines breaking between characters. */
html[lang="zh-CN"] {
    --font-family-base: "Poppins", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

html[lang="zh-CN"] body * {
    word-break: normal !important;
}