*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
    all: unset;
    display: revert;
}

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

html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

a,
button {
    cursor: revert;
}

ol,
ul,
menu,
summary {
    list-style: none;
}

img {
    max-inline-size: 100%;
    max-block-size: 100%;
}

table {
    border-collapse: collapse;
}

input,
textarea {
    user-select: auto;
    -webkit-user-select: auto;
}

textarea {
    white-space: revert;
}

meter {
    -webkit-appearance: revert;
    appearance: revert;
}

:where(pre) {
    all: revert;
    box-sizing: border-box;
}

::placeholder {
    color: unset;
}

:where([hidden]) {
    display: none;
}

:where([contenteditable]:not([contenteditable='false'])) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    line-break: after-white-space;
    -webkit-line-break: after-white-space;
    user-select: auto;
    -webkit-user-select: auto;
}

:where([draggable='true']) {
    -webkit-user-drag: element;
}

:where(dialog:modal) {
    all: revert;
    box-sizing: border-box;
}

::-webkit-details-marker {
    display: none;
}

:root {
    /* Primary Color - Primary color는 버튼, 활성 상태와 같은 UI 전체의 주요 구성 요소에 사용된다. */
    --Primary-0: #ffffff;
    --Primary-5: #eff5ff;
    --Primary-10: #d3e1fb;
    --Primary-20: #a7c4f7;
    --Primary-30: #7ca6f3;
    --Primary-40: #5089ef;
    --Primary-50: #246beb;
    --Primary-60: #1d56bc;
    --Primary-70: #16408d;
    --Primary-80: #0e2b5e;
    --Primary-90: #07152f;
    --Primary-100: #000000;

    --Primary-normal: var(--Primary-50);
    --Primary-hover: var(--Primary-60);
    --Primary-pressed: var(--Primary-70);

    /* Secondary Color - • Secondary color는 필터, 칩과 같이 UI에서 보조적인 역할을 하는 구성 요소 전반에 사용된다 */
    --Secondary-0: #ffffff;
    --Secondary-5: #edf1f5;
    --Secondary-10: #cdd7e4;
    --Secondary-20: #b4c4d6;
    --Secondary-30: #99b0cb;
    --Secondary-40: #2a5c96;
    --Secondary-50: #003675;
    --Secondary-60: #002b5e;
    --Secondary-70: #002046;
    --Secondary-80: #00162f;
    --Secondary-90: #000b17;
    --Secondary-100: #000000;

    --Secondary-normal: var(--Secondary-50);
    --Secondary-hover: var(--Secondary-60);
    --Secondary-pressed: var(--Secondary-70);

    /* Grayscale - • Grayscale은 정보전달과 위계를 나타내는 중요한 역할을 한다. 주로 BG, Text, Line에 사용되며 특히 텍스트는 가독성을 고려해야 하므로 배경과의 명암비를 고려해야 한다. */
    --Grayscale-0: #ffffff;
    --Grayscale-5: #f8f8f8;
    --Grayscale-10: #f0f0f0;
    --Grayscale-20: #e4e4e4;
    --Grayscale-30: #d8d8d8;
    --Grayscale-40: #c6c6c6;
    --Grayscale-50: #8e8e8e;
    --Grayscale-60: #717171;
    --Grayscale-70: #555555;
    --Grayscale-80: #2d2d2d;
    --Grayscale-90: #1d1d1d;
    --Grayscale-100: #000000;

    --background-base: var(--Grayscale-0);
    --background-layer-1: var(--Grayscale-5);
    --background-layer-2: var(--Grayscale-10);

    --Border-normal: var(--Grayscale-40);
    --Border-hover: var(--Grayscale-60);

    --states-disabled: var(--Grayscale-20);

    --Text-Disabled: var(--Grayscale-50);
    --Text-Body: var(--Grayscale-70);
    --Text-Title: var(--Grayscale-90);

    --button-text-default: var(--Grayscale-50);
    --button-text-hover: var(--Grayscale-60);
    --button-text-active: var(--Grayscale-70);

    /* Point Color - Point color는 Primary와 Secondary의 균형을 맞추거나 요소에 대한 집중도 높이는 데 사용된다. */
    --point-0: #ffffff;
    --point-5: #fdf2f3;
    --point-10: #fbd6d8;
    --point-20: #f5a3a8;
    --point-30: #f1747c;
    --point-40: #ec4651;
    --point-50: #e71825;
    --point-60: #b9131e;
    --point-70: #8b0e16;
    --point-80: #5c0a0f;
    --point-90: #2e0507;
    --point-100: #000000;

    --point-surface: var(--point-5);
    --point-border: var(--point-10);
    --point-base: var(--point-50);
    --point-text: var(--point-60);

    --point-normal: var(--Point-50);
    --point-hover: var(--Point-60);
    --point-ressed: var(--Point-70);

    /* ////////////////////////////////////////////////////////////////////////////////////////////////////
    System colors - Role color는 사용자에게 직관적으로 시스템 상태를 보여주는 색상으로, 텍스트와 모양(아이콘)을 함께 사용하는 것을 권
    //////////////////////////////////////////////////////////////////////////////////////////////////// */

    /* System Color - Danger: 오류, 금지, 위험, 삭제, 불가 등을 표시할 때 사용한다. */
    --Danger-5: #feecf0;
    --Danger-10: #fcd4de;
    --Danger-20: #f799b1;
    --Danger-30: #f36689;
    --Danger-40: #ef3e5e;
    --Danger-50: #eb003b;
    --Danger-60: #d50136;
    --Danger-70: #8d0023;
    --Danger-80: #5e0018;
    --Danger-90: #2f000c;

    --danger-surface: var(--Danger-5);
    --danger-border: var(--Danger-10);
    --danger-base: var(--Danger-50);
    --danger-text: var(--Danger-60);

    /* System Color - Warning: 실수나 오류가 발생하지 않도록 주의 사항을 전달할 때 사용한다. */
    --Warning-5: #fff8e9;
    --Warning-10: #ffeac1;
    --Warning-20: #ffe2a7;
    --Warning-30: #ffd47c;
    --Warning-40: #ffc550;
    --Warning-50: #ffb724;
    --Warning-60: #98690a;
    --Warning-70: #66490e;
    --Warning-80: #4d370b;
    --Warning-90: #332507;

    --warning-surface: var(--Warning-5);
    --warning-border: var(--Warning-10);
    --warning-base: var(--Warning-50);
    --warning-text: var(--Warning-60);

    /* System Color - Success: 성공, 완료, 진행 등의 결과를 전달할 때 사용한다. */
    --Success-5: #eef7f0;
    --Success-10: #cee9d4;
    --Success-20: #b2dcbb;
    --Success-30: #8cca99;
    --Success-40: #33a14b;
    --Success-50: #008a1e;
    --Success-60: #006e18;
    --Success-70: #005312;
    --Success-80: #00370c;
    --Success-90: #002207;

    --success-surface: var(--Success-5);
    --success-border: var(--Success-10);
    --success-base: var(--Success-50);
    --success-text: var(--Success-60);

    /* System Color - Information: 정보를 제공하거나 특별히 강조가 필요할 때 사용한다. */
    --Information-5: #e9f0ff;
    --Information-10: #d4e1ff;
    --Information-20: #a9c3ff;
    --Information-30: #7da4ff;
    --Information-40: #5286ff;
    --Information-50: #2768ff;
    --Information-60: #1f53cc;
    --Information-70: #173e99;
    --Information-80: #0c1f4d;
    --Information-90: #040a1a;

    --information-surface: var(--Information-5);
    --information-border: var(--Information-10);
    --information-base: var(--Information-50);
    --information-text: var(--Information-60);

    /* ////////////////////////////////////////////////////////////////////////////////////////////////////
        Theme Color
    //////////////////////////////////////////////////////////////////////////////////////////////////// */

    /* navy */
    --navy-5: #f1f1f9;
    --navy-10: #d3d5ed;
    --navy-20: #a7abda;
    --navy-30: #7b82c8;
    --navy-40: #4f58b5;
    --navy-50: #232ea3;
    --navy-60: #1c2582;
    --navy-70: #151c62;
    --navy-80: #0e1241;
    --navy-90: #070921;

    /* blue */
    --blue-5: #f0f3ff;
    --blue-10: #d2dcfe;
    --blue-20: #a4b8fe;
    --blue-30: #7795fd;
    --blue-40: #4971fd;
    --blue-50: #1c4efc;
    --blue-60: #163eca;
    --blue-70: #112f97;
    --blue-80: #0b1f65;
    --blue-90: #061032;

    /* royal blue */
    --Royal-blue-5: #ebf5ff;
    --Royal-blue-10: #c7e3ff;
    --Royal-blue-20: #8fc8ff;
    --Royal-blue-30: #56acff;
    --Royal-blue-40: #1e90ff;
    --Royal-blue-50: #0074e5;
    --Royal-blue-60: #0056aa;
    --Royal-blue-70: #00407f;
    --Royal-blue-80: #002b55;
    --Royal-blue-90: #00152a;

    /* sky blue */
    --sky-blue-5: #f0fbff;
    --sky-blue-10: #d4f3fe;
    --sky-blue-20: #a9e6fc;
    --sky-blue-30: #7ddafb;
    --sky-blue-40: #52cdf9;
    --sky-blue-50: #27c1f8;
    --sky-blue-60: #1f9ac6;
    --sky-blue-70: #177495;
    --sky-blue-80: #104d63;
    --sky-blue-90: #082732;

    /* aqua */
    --aqua-5: #e7fdfd;
    --aqua-10: #cefbfb;
    --aqua-20: #9df6f6;
    --aqua-30: #6df2f2;
    --aqua-40: #3beded;
    --aqua-50: #15dfdf;
    --aqua-60: #03c4c4;
    --aqua-70: #078c8c;
    --aqua-80: #045d5d;
    --aqua-90: #022f2f;

    /* teal */
    --teal-5: #edf8f8;
    --teal-10: #ceebeb;
    --teal-20: #9dd7d7;
    --teal-30: #6dc3c3;
    --teal-40: #3cafaf;
    --teal-50: #0b9b9b;
    --teal-60: #097c7c;
    --teal-70: #075d5d;
    --teal-80: #043e3e;
    --teal-90: #021f1f;

    /* green */
    --green-5: #eef7ee;
    --green-10: #cce6cc;
    --green-20: #99cc99;
    --green-30: #66b366;
    --green-40: #339933;
    --green-50: #008000;
    --green-60: #006600;
    --green-70: #004d00;
    --green-80: #003300;
    --green-90: #001a00;

    /* lime green */
    --lime-green-5: #f3fcf3;
    --lime-green-10: #d6f5d6;
    --lime-green-20: #adebad;
    --lime-green-30: #84e184;
    --lime-green-40: #5bd75b;
    --lime-green-50: #32cd32;
    --lime-green-60: #1fad1f;
    --lime-green-70: #1e7b1e;
    --lime-green-80: #145214;
    --lime-green-90: #0a290a;

    /* lime */
    --lime-5: #f7ffea;
    --lime-10: #eefed6;
    --lime-20: #deffab;
    --lime-30: #cefe83;
    --lime-64: #bcf95d;
    --lime-50: #a1f524;
    --lime-60: #8edd13;
    --lime-70: #699b1c;
    --lime-80: #476912;
    --lime-90: #253709;

    /* olive */
    --olive-5: #f8f8ed;
    --olive-10: #ebebcc;
    --olive-20: #d6d699;
    --olive-30: #c2c266;
    --olive-40: #adad33;
    --olive-50: #999900;
    --olive-60: #7a7a00;
    --olive-70: #5c5c00;
    --olive-80: #3d3d00;
    --olive-90: #1f1f00;

    /* Yellow */
    --Yellow-5: #fffbe5;
    --Yellow-10: #fff6cc;
    --Yellow-20: #ffee99;
    --Yellow-30: #ffe566;
    --Yellow-40: #ffdd33;
    --Yellow-50: #ffd400;
    --Yellow-60: #d6ab00;
    --Yellow-70: #a38500;
    --Yellow-80: #6b5700;
    --Yellow-90: #332a00;

    /* gold */
    --gold-5: #fdf7e9;
    --gold-10: #faefd3;
    --gold-20: #f5dfa7;
    --gold-30: #f1cf7a;
    --gold-40: #ecbf4e;
    --gold-50: #e7af22;
    --gold-60: #b98c1b;
    --gold-70: #8b6914;
    --gold-80: #5c460e;
    --gold-90: #2e2307;

    /* Saddle brown */
    --saddle-brown-5: #f8f2ed;
    --saddle-brown-10: #ecdccd;
    --saddle-brown-20: #d9b99c;
    --saddle-brown-30: #c6976a;
    --saddle-brown-40: #b37439;
    --saddle-brown-50: #a05107;
    --saddle-brown-60: #804106;
    --saddle-brown-70: #603104;
    --saddle-brown-80: #402003;
    --saddle-brown-90: #201001;

    /* brown */
    --brown-5: #f9f2f0;
    --brown-10: #eed8d3;
    --brown-20: #dcb0a7;
    --brown-30: #cb897c;
    --brown-40: #b96150;
    --brown-50: #a83a24;
    --brown-60: #862e1d;
    --brown-70: #652316;
    --brown-80: #43170e;
    --brown-90: #220c07;

    /* dark red */
    --dark-red-5: #faeff0;
    --dark-red-10: #f1cecf;
    --dark-red-20: #e39d9f;
    --dark-red-30: #d56b70;
    --dark-red-40: #c73a40;
    --dark-red-50: #b90910;
    --dark-red-60: #94070d;
    --dark-red-70: #6f050a;
    --dark-red-80: #4a0406;
    --dark-red-90: #250203;

    /* red */
    --red-5: #fef1f1;
    --red-10: #fccccc;
    --red-20: #f89999;
    --red-30: #f56666;
    --red-40: #f23b3b;
    --red-50: #ee0000;
    --red-60: #cd0404;
    --red-70: #8f0000;
    --red-80: #5f0000;
    --red-90: #300000;

    /* orange */
    --orange-5: #fff4f0;
    --orange-10: #ffdacc;
    --orange-20: #ffb599;
    --orange-30: #ff8f66;
    --orange-40: #ff6a33;
    --orange-50: #ff4500;
    --orange-60: #d53209;
    --orange-70: #992900;
    --orange-80: #661c00;
    --orange-90: #330e00;

    /* coral */
    --coral-5: #fff8f5;
    --coral-10: #ffe6dc;
    --coral-20: #ffccba;
    --coral-30: #feb397;
    --coral-40: #fe9975;
    --coral-50: #fe8052;
    --coral-60: #d36942;
    --coral-70: #a85131;
    --coral-80: #7e3a21;
    --coral-90: #532210;

    /* salmon */
    --salmon-5: #fff1f0;
    --salmon-10: #ffe3e0;
    --salmon-20: #ffc8c1;
    --salmon-30: #feaca3;
    --salmon-40: #fe9184;
    --salmon-50: #fe7565;
    --salmon-60: #d75f51;
    --salmon-70: #b0493d;
    --salmon-80: #893228;
    --salmon-90: #621c14;

    /* hot pink */
    --hot-pink-5: #fff5fc;
    --hot-pink-10: #ffe3f5;
    --hot-pink-20: #ffc6ec;
    --hot-pink-30: #ffaae2;
    --hot-pink-40: #ff8dd9;
    --hot-pink-50: #ff6fce;
    --hot-pink-60: #d05aa8;
    --hot-pink-70: #a14482;
    --hot-pink-80: #732d5b;
    --hot-pink-90: #3d1530;

    /* pink */
    --pink-5: #fff0f8;
    --pink-10: #ffd0e9;
    --pink-20: #ffa1d4;
    --pink-30: #ff72be;
    --pink-40: #fd51ad;
    --pink-50: #ff1493;
    --pink-60: #cc1076;
    --pink-70: #990c58;
    --pink-80: #66083b;
    --pink-90: #33041d;

    /* fuchsia */
    --fuchsia-5: #fdf2fd;
    --fuchsia-10: #f9d1f9;
    --fuchsia-20: #f2a3f2;
    --fuchsia-30: #ec75ec;
    --fuchsia-40: #e547e5;
    --fuchsia-50: #df19df;
    --fuchsia-60: #b214b2;
    --fuchsia-70: #860f86;
    --fuchsia-80: #590a59;
    --fuchsia-90: #2d052d;

    /* purple */
    --purple-5: #f5eef7;
    --purple-10: #e1cce6;
    --purple-20: #c499cc;
    --purple-30: #a666b3;
    --purple-40: #893399;
    --purple-50: #6b0080;
    --purple-60: #560066;
    --purple-70: #40004d;
    --purple-80: #2b0033;
    --purple-90: #15001a;

    /* Blue violet */
    --Blue-violet-5: #f4effa;
    --Blue-violet-10: #ded1f1;
    --Blue-violet-20: #bda2e3;
    --Blue-violet-30: #9b74d4;
    --Blue-violet-40: #7a45c6;
    --Blue-violet-50: #5917b8;
    --Blue-violet-60: #471293;
    --Blue-violet-70: #350e6e;
    --Blue-violet-80: #24094a;
    --Blue-violet-90: #120525;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Apple SD Gothic Neo', Arial,
        sans-serif;
}

code,
pre {
    font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

.wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.no-scroll {
    overflow: hidden;
}