@charset "utf-8";

/* ========================================================================== */
/* RESET */
/* ========================================================================== */

/* 기본 */
html {
    color: var(--Secondary-Base);
    font-weight: 400;
    font-family: 'Pretendard', sans-serif;
    line-height: normal;
    vertical-align: top;
    box-sizing: border-box;
    appearance: none;
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-appearance: none;
    background: #fff;
}

/* 고정 */
html.fixed,
body.fixed {
    overflow: hidden;
    touch-action: none;
    -webkit-touch-action: none;
}

/* 모바일 가로모드 폰트확대 방지 */
body {
    -webkit-text-size-adjust: none;
}

/* 헤더 폰트 사이즈 초기화 */
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0;
    color: var(--Secondary-Base);
}

/* 텍스트 */
a {
    color: inherit;
    text-decoration: none;
}
a:hover {
    color: inherit;
    text-decoration: none;
}
p {
    margin-bottom: 0;
}
button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    vertical-align: top;
    cursor: pointer;
    box-sizing: border-box;
}

/* 이미지 */
img,
fieldset {
    border: none;
}
img,
object {
    vertical-align: top;
}

/* 리스트 */
ul,
ol {
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}
em,
address {
    font-style: normal;
}

/* 테이블 */
table {
    width: 100%;
    border-spacing: 0;
}
th,
td {
    text-align: center;
    vertical-align: middle;
}
legend,
caption {
    display: none;
}

/* 폼 */
form {
    max-width: 100%;
}
label {
    cursor: pointer;
}
select {
    border-radius: 0;
    background: #fff;
}
textarea {
    resize: none;
}
input,
textarea {
    -webkit-border-radius: 0;
}
/* 사파리 초기화 */
input:-internal-autofill-selected {
    background: transparent !important;
}

/* ========================================================================== */
/* STYLE GUIDE */
/* ========================================================================== */

/* color */
:root {
    --Primary-Base: #08f;
    --Primary-400: #00a0ff;
    --Primary-300: #0088fe;
    --Primary-200: #b2dbff;
    --Primary-100: #cae7fc;
    --Primary-50: #edf5ff;

    --Primary-Blue-0: #e6f3ff;

    --Secondary-Base: #0f172a;
    --Secondary-400: #1e293b;
    --Secondary-300: #334155;
    --Secondary-200: #475569;
    --Secondary-100: #dbe7f6;
    --Secondary-50: #f3f6fb;

    --Secondary-Violet: #7875fc;

    --Voca-Background: #fffaeb;
    --Voca-Text: #b54706;

    --Book-Background: #6fa4ff;
    --Book-Text: #6a6af9;

    --Video-Background: #ecfdf3;
    --Video-Text: #039855;

    --Alerts-Success-Base: #23aa26;
    --Alerts-Success-Dark: #199226;
    --Alerts-Success-Light: #5acc52;

    --Alerts-Warning-Base: #f9aa00;
    --Alerts-Warning-Dark: #d68b00;
    --Alerts-Warning-Light: #fbc53e;

    --Alerts-Error-Base: #f4462c;
    --Alerts-Error-Dark: #d12920;
    --Alerts-Error-Light: #f87f5f;

    --Grayscale-50: #f9f9f9;
    --Grayscale-100: #f1f5f9;
    --Grayscale-200: #e2e8f0;
    --Grayscale-300: #cbd5e1;
    --Grayscale-400: #94a3b8;
    --Grayscale-500: #666d80;
    --Grayscale-600: #475569;
    --Grayscale-700: #334155;
    --Grayscale-800: #1e293b;
    --Grayscale-900: #0f172a;

    --Others-Amber: #fcd34d;
    --Others-Camaron: #ff8092;
    --Others-Portage: #887ef9;

    --Line-Base: #f0f1f7;

    --Text-Black: #0c1221;

    --White-90: rgba(255, 255, 255, 0.9);

    --Label-Colors-Primary: #11151d;
    --Label-Colors-Tertiary: #e7e9ee;

    --Neutral-1: #111;
    --Neutral-03: #333743;
    --Neutral-700: #333d4b;

    --System-Background-Tertiary: #f6f7fa;
    --semantic-error-500: #ef4444;

    --default-width: 400px;

    /* 버튼 최소 높이 (클릭은 가능해야함)*/
    --btn-min-height: 30px;

    /* 메모영역 최소 높이 */
    --memo-min-height: 50px;

    /* 폰트 크기 설정 */
    --font-xsmall-size: 10px;
    --font-small-size: 12px;
    --font-medium-size: 14px;
    --font-large-size: 16px;
    --font-xlarge-size: 18px;
    --font-xxlarge-size: 20px;
    --font-xxxlarge-size: 24px;

    /* 카드 내 정보 최대 너비 */
    --info-in-card-max-width: 180px;

    /* 클릭 가능한 btn 최소 높이 */
    --btn-min-height: 40px;
}