/* 공통 사항 */
/** ResourceLoaderSkinModule: normalize,elements,content-tables,content-links,content-media,interface-message-box,interface-category,toc */

html {
    background: @color-bg-base;
}

body {
    background: @color-bg-base;
    /*max-width: 800px;
    margin: 0 auto;*/
    font-family: @font-family;

    > nav,
    > footer {
        padding: 1em;
    }
}

body.skin-zephyr {
    color: @color-text-base;
    h1, h2, h3, h4, h5, h6 {
        color: @color-text-base;
    }

    a {
        color: @color-link-base;

        &:visited {
            color: @color-link-base--visited;
        }

        &.new {
            color: @color-link-new;
            &:visited {
                color: @color-link-new--visited;
            }
        }

        &.mw-selflink {
            color: inherit;
        }
    }

    div.thumbinner {
        border-color: @color-gray;
        background-color: @color-bg-tertiary;
        color: @color-thumb;
        a {
            color: @color-thumb;
        }
    }
    hr {
        background-color: @color-border-secondary;
    }

    h1, h2 {
        border-bottom-color: @color-border-secondary;
    }

    /* gallery box */
    ul.gallery {
        .gallerybox .thumb {
            background-color: @color-bg-tertiary;
        }
    }

    :not(pre) > code {
        color: var(--color-text-code);
        background-color: var(--color-bg-code);
        border-radius: 4px;
        /*background-color: inherit;*/
        border: 0;
        font-size: 90%;
        font-family: SFMono-Regular,Menlo,Monaco,Consolas,Courier New,monospace;
        /*word-break: break-word;*/

        &.sof {
            color: var(--color-text-code--sof);
            /*color: #0c0d0e;*/
            background-color: var(--color-bg-code--sof);
            /*background-color:rgb(227, 230, 232);*/
            border: 0;
            border-radius: 4px;
            font-size: 13px;
            box-sizing:border-box;
            padding:2px 4px;
            line-height:1.5;
            font-weight:400;
            font-family:ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, Monaco, Consolas, monospace;
        }
        &.github {
            color: rgb(31, 35, 40);
            // color: rgb(230, 237, 243); // dark
            background-color: rgba(175, 184, 193, 0.2);
            // background-color: rgba(110, 118, 129, 0.4); // dark
            box-sizing: border-box;
            padding: 0.2em 0.4em;
            margin: 0;
            font-size: 85%;
            white-space: break-spaces;
            background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted));
            border-radius: 6px;
            font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
            line-height: 1.5;
            word-wrap: break-word;
        }
    }
}

.mw-body-content {
    /* h2 태그와 밑줄 사이의 공간 줄이기 */
    h2 {
        padding: 0;
        line-height: 1.3;
    }
}

/** CONTENT */

.content {
    &__header {
        position: relative;
        margin-bottom: 0.5em;
    }

    &__heading {
        padding: 0 50px 0 0;
        margin: 0;
        border-bottom: 0;
        float: left;
    }

    &__language-btn {
        float: right;
    }

    &__indicators {
        position: absolute;
        top: 10px;
        right: 0;
    }

    &__tagline {
        clear: both;
        color: @color-text-base;
        font-size: 0.85em;
        margin-bottom: 12px;
        line-height: 1;

        &:empty {
            display: none;
        }
    }

    &__actions {
        display: flex;
    }
}

/* The following rules will not be needed in future */
.mw-editsection {
    font-size: 0.5em;
    margin-left: 8px;
}

.messagebox {
    color: @color-text-base;
    background-color: @background-color-warning;
    border-color: @color-gray;

    a {
        color: @color-text-base;
        font-weight: bold;
    }
}

.thumbimage {
    background: transparent;
    border: 0;
}



/* others */
#mw-indicator-mw-helplink a {
    text-indent: -999px;
    filter: invert(0.8);
    overflow: hidden;
    display: flex;
}

/* scrollbar theme */
:root[data-theme="dark"] {
    color-scheme: dark;
}

