MOFA/css/global.css

@font-face {
    font-family: 'Pretendard';
    src: url('Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'SpoqaHanSansNeo';
    src: url('SpoqaHanSansNeo-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

:root {
    /* icons */
    --file-icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.3367 6.22068C14.3787 5.66758 13.2403 5.5177 12.1718 5.804C11.1033 6.0903 10.1923 6.78934 9.63918 7.74733L7.13663 12.0819C7.02602 12.2735 6.84381 12.4133 6.63012 12.4705C6.41642 12.5278 6.18872 12.4978 5.99712 12.3872C5.80552 12.2766 5.66572 12.0944 5.60846 11.8807C5.5512 11.667 5.58117 11.4393 5.69179 11.2477L8.19433 6.91315C8.57774 6.24906 9.0882 5.667 9.69657 5.20018C10.3049 4.73337 10.9993 4.39096 11.74 4.19249C12.4807 3.99402 13.2532 3.94338 14.0135 4.04348C14.7737 4.14357 15.5068 4.39242 16.1709 4.77583C16.835 5.15924 17.4171 5.6697 17.8839 6.27806C18.3507 6.88643 18.6931 7.58078 18.8916 8.32147C19.09 9.06216 19.1407 9.8347 19.0406 10.595C18.9405 11.3552 18.6916 12.0883 18.3082 12.7524L14.9715 18.5318C14.4184 19.4898 13.5074 20.1888 12.4389 20.4751C11.3704 20.7614 10.2319 20.6115 9.27395 20.0584C8.31596 19.5053 7.61693 18.5943 7.33062 17.5258C7.04432 16.4573 7.1942 15.3189 7.7473 14.3609L11.084 8.58151C11.4159 8.00672 11.9625 7.5873 12.6036 7.41551C13.2447 7.24373 13.9278 7.33366 14.5026 7.66552C15.0773 7.99738 15.4968 8.54398 15.6686 9.18508C15.8403 9.82618 15.7504 10.5093 15.4185 11.0841L12.0818 16.8634C11.9712 17.055 11.789 17.1948 11.5753 17.2521C11.3616 17.3094 11.1339 17.2794 10.9423 17.1688C10.7507 17.0581 10.6109 16.8759 10.5536 16.6622C10.4964 16.4485 10.5264 16.2208 10.637 16.0292L13.9737 10.2499C14.0843 10.0583 14.1143 9.83058 14.057 9.61688C13.9998 9.40318 13.86 9.22098 13.6684 9.11036C13.4768 8.99974 13.2491 8.96977 13.0354 9.02703C12.8217 9.08429 12.6395 9.22409 12.5289 9.41569L9.19214 15.1951C8.86028 15.7699 8.77035 16.4529 8.94213 17.094C9.11392 17.7351 9.53334 18.2817 10.1081 18.6136C10.6829 18.9455 11.366 19.0354 12.0071 18.8636C12.6482 18.6918 13.1948 18.2724 13.5267 17.6976L16.8634 11.9182C17.4165 10.9602 17.5664 9.82177 17.2801 8.75327C16.9938 7.68477 16.2947 6.77377 15.3367 6.22068Z' fill='%233366FF'/%3E%3C/svg%3E%0A");
    /* pallete */
    --white: #fff;
    --black: #222222;
}

* {
    font-size: 16px;
    font-family: 'Pretendard';
    color: var(--black);
}

body {
    margin: 0;
    min-width: 1400px;
    overflow-x: auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a {
    margin: initial;

    &[ellipsis] {
        width: var(--width);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    &.clip-icon {
        position: relative;
        display: flex;
        align-items: center;
        gap: 8px;
        color: #3366FF;
        text-decoration: underline;

        &:before {
            content: '';
            background-image: var(--file-icon);
            background-position: left center;
            background-repeat: no-repeat;
            display: block;
            left: 0;
            width: 24px;
            height: 24px;
        }
    }
}

h1 {
    font-size: 3em;
    font-weight: 700;
    line-height: 1.2em;

    &[center] {
        text-align: center;
    }
}

h2 {
    font-size: 40px;
    font-weight: 700;
    line-height: 56px;

    &.editor-title {
        font-family: 'SpoqaHanSansNeo';
        font-size: 34px;
        font-weight: 700;
        line-height: 42.57px;
        padding-top: 55px;
        padding-bottom: 45px;

        &.white {
            padding-top: 48px;
            padding-bottom: 40px;
            text-align: center;
        }
    }
}

h3 {
    font-size: 1.25em;
    line-height: 1.4em;
}

section {
    padding-top: var(--section-top);

    &.single {}
}

a {
    text-decoration: none;

    &[hashtag] {
        color: #3366FF;
        font-weight: 500;

        &:before {
            content: '#'
        }
    }
}

p {
    color: var(--color);
    margin: initial;
    display: -webkit-box;
    /* 표시줄수 */
    -webkit-line-clamp: var(--clamp);
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

    &[alarm] {
        font-size: 24px !important;
        font-weight: 700;
        line-height: 33.6px !important;
        color: #EE0000
    }

    &[center] {
        text-align: center;
    }

    &.underline {
        text-decoration: underline;
    }

    &.p16_r {
        font-size: 16px;
        font-weight: 400;
        line-height: 22.4px;

    }

    &.p20_sb {
        font-size: 20px;
        font-weight: 600;
        line-height: 28px;
    }

    &.p20_r {
        font-size: 20px;
        font-weight: 400;
        line-height: 28px;
    }

    &.p20_b {
        font-size: 20px;
        font-weight: 700;
        line-height: 28px;
    }

    &.p24_r {
        font-size: 24px;
        font-weight: 400;
        line-height: 33.6px;
    }

    &.p24_m {
        font-size: 24px;
        font-weight: 500;
        line-height: 33.6px;

    }

    &.p24_b {
        font-size: 24px;
        font-weight: 700;
        line-height: 33.6px;
    }
}

b {
    &.underline {
        text-decoration: underline;
    }
}

span {
    color: var(--color);
}

ul {
    list-style: none;
    padding-left: 0;

    &[dash] {
        li {
            position: relative;
            padding-left: 14px;

            &:before {
                position: absolute;
                left: 0;
                content: '-'
            }
        }
    }

    &[circle] {
        li {
            position: relative;
            padding-left: 14px;

            &:before {
                position: absolute;
                left: 0;
                content: 'ㅇ'
            }
        }
    }
}

button {
    border: initial;
    border-radius: 8px;
    background-color: var(--bg);

    &[variant="fill"] {
        color: #fff;
        padding: 13px 32px;

        &.cancel {
            font-size: 20px;
            font-weight: 600;
            line-height: 28px;
            color: #444444
        }

        &.view {
            font-size: 20px;
            font-weight: 600;
            line-height: 28px;
            color: #3366FF
        }
    }

    &[variant="border"] {
        color: #3366FF;
        padding: 13px 32px;
        box-shadow: inset 0 0 0 1px #3366FF;
        font-size: 20px;
        font-weight: 600;
        line-height: 28px;

    }
}

hr {
    &[horizontal] {
        background-color: red;
    }
}


container {
    display: block;
    max-width: 1400px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

[row] {
    display: flex;
    gap: var(--gap);
    padding-top: var(--pt);
    padding-right: var(--pr);
    padding-bottom: var(--pb);
    padding-left: var(--pl);

    &[middle] {
        align-items: center
    }

    &[between] {
        justify-content: space-between;
    }

    &[center] {
        justify-content: center;
    }

    &[flexend] {
        justify-content: flex-end;
    }

    &[end] {
        align-items: flex-end;
    }

    &[start] {
        align-items: flex-start;
    }

    &[shrink] {
        flex-shrink: 1;
    }

    &[grow] {
        flex-grow: 1;
    }

    &[scroll] {
        max-height: auto;
        overflow: auto;
    }

    &[scroll="400px"] {
        height: 400px;
        overflow: auto;
    }
    &[wrap]{
        flex-wrap: wrap;
    }
}

[col] {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding-top: var(--pt);
    padding-right: var(--pr);
    padding-bottom: var(--pb);
    padding-left: var(--pl);

    &[center] {
        align-items: center;
    }

    &[middle] {
        justify-content: center;
    }

    &[shrink] {
        flex-shrink: 1;
    }

    &[grow] {
        flex-grow: 1;
    }

}

[relative] {
    position: relative;
}

[absolute] {
    position: absolute;
}

[box] {
    border-radius: 8px;
    background-color: var(--bg);
    padding: var(--p);
}

chip {
    &[done] {
        padding: 4px 12px;
        border-radius: 4px;
        box-shadow: 0 0 0 1px #D1DDFF;
        color: #3366FF;
        font-size: 14px;
        font-weight: 500;
        line-height: 19.6px;
    }
}

.p20_m {
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
}

.center {
    text-align: center;
}