/* 무채색 색상은 라이트모드와 밝기가 비슷해보이게 시각 보정이 되어 있음 */
:root {
    --body-font-color: #eee;
    --body-background-color: #18191a;
    --body-background-color-50: #18191a80;
    --default-font-color: #eee;
    --reverse-font-color: #222;
    --default-background-color: #18191a;
    --sercondary-background-color: #222;
    --layer-background-color: #252628;
    --default-anchor-color: #eee;
    --default-visited-anchor-color:  #808080;
    --alpha-3: rgb(255 255 255 / 5%);
    --alpha-5: rgb(255 255 255 / 10%);
    --alpha-10: rgb(255 255 255 / 20%);
    --alpha-20: rgb(255 255 255 / 30%);
    --alpha-30: rgb(255 255 255 / 40%);
    --alpha-40: rgb(255 255 255 / 50%);
    --alpha-50: rgb(255 255 255 / 60%);
    --alpha-70: rgb(255 255 255 / 80%);
    --alpha-80: rgb(255 255 255 / 90%);
    --alpha-reverse-10: rgb(0 0 0 / 10%);
    --alpha-reverse-20: rgb(0 0 0 / 20%);
    --alpha-reverse-90: rgb(0 0 0 / 80%);
}

body {
    color: var(--default-font-color);
    caret-color: var(--default-anchor-color);
    background-color: var(--default-background-color);
}

input[type="checkbox"]::before {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    cursor: pointer;
    content: '';
    background: url(../img/ver2/icon_checkbox_check_darkmode.svg) center center no-repeat;
    border: 1px solid var(--alpha-10);
    border-radius: 50%;
}

#list select,
#check select {
    background: var(--alpha-5) url(../img/ver2/icon_selectbox_select_darkmode.svg) right 12px center no-repeat;
}

/* 카테고리3 현재선택에 별색지정 */
#list .category a.current {
    background: #182729 !important;
    border: 1px solid #1A676C !important;
}

@media only screen and (max-width: 1199px) {
    header nav>ul>li>ul>li>a {
        color: var(--default-anchor-color);
    }

    header #nav .mypage li a {
        border-color: var(--alpha-reverse-20);
    }


    header #nav .navWrap>* {
        background-color: var(--alpha-reverse-10);
    }

    header nav>ul>li>ul>hr {
        background-color: var(--alpha-10);
    }
}

.ck {
    /* Helper variables to avoid duplication in the colors. */
    --ck-custom-background: var(--default-background-color);
    --ck-custom-foreground: var(--default-font-color);
    --ck-custom-border: var(--alpha-30);
    --ck-custom-white: hsl(0deg 0% 100%);

    /* -- Overrides generic colors. ------------------------------------------------------------- */
    --ck-color-base-border: transparent;
    --ck-color-base-active: var(--default-anchor-color);
    --ck-color-base-active-focus: var(--default-anchor-color);
    --ck-focus-ring: var(--default-anchor-color);
    --ck-color-base-background: var(--ck-custom-background);
    --ck-color-base-foreground: var(--ck-custom-foreground);
    --ck-color-focus-border: var(--default-anchor-color);
    --ck-color-text: hsl(0deg 0% 98%);
    --ck-color-shadow-drop: hsl(0deg 0% 0% / 20%);
    --ck-color-shadow-inner: hsl(0deg 0% 0% / 10%);

    /* -- Overrides the default .ck-button class colors. ---------------------------------------- */
    --ck-color-button-default-background: var(--ck-custom-background);
    --ck-color-button-default-hover-background: hsl(270deg 1% 22%);
    --ck-color-button-default-active-background: hsl(270deg 2% 20%);
    --ck-color-button-default-active-shadow: hsl(270deg 2% 23%);
    --ck-color-button-default-disabled-background: var(--ck-custom-background);
    --ck-color-button-on-background: var(--ck-custom-foreground);
    --ck-color-button-on-hover-background: hsl(255deg 4% 16%);
    --ck-color-button-on-active-background: hsl(255deg 4% 14%);
    --ck-color-button-on-active-shadow: hsl(240deg 3% 19%);
    --ck-color-button-on-disabled-background: var(--ck-custom-foreground);
    --ck-color-button-action-background: hsl(168deg 76% 42%);
    --ck-color-button-action-hover-background: hsl(168deg 76% 38%);
    --ck-color-button-action-active-background: hsl(168deg 76% 36%);
    --ck-color-button-action-active-shadow: hsl(168deg 75% 34%);
    --ck-color-button-action-disabled-background: hsl(168deg 76% 42%);
    --ck-color-button-action-text: var(--ck-custom-white);
    --ck-color-button-save: hsl(120deg 100% 46%);
    --ck-color-button-cancel: hsl(15deg 100% 56%);

    /* -- Overrides the default .ck-dropdown class colors. -------------------------------------- */
    --ck-color-dropdown-panel-background: var(--ck-custom-background);
    --ck-color-dropdown-panel-border: var(--ck-custom-foreground);

    /* -- Overrides the default .ck-splitbutton class colors. ----------------------------------- */
    --ck-color-split-button-hover-background: var(--ck-color-button-default-hover-background);
    --ck-color-split-button-hover-border: var(--ck-custom-foreground);

    /* -- Overrides the default .ck-input class colors. ----------------------------------------- */
    --ck-color-input-background: var(--ck-custom-background);
    --ck-color-input-border: hsl(257deg 3% 43%);
    --ck-color-input-text: hsl(0deg 0% 98%);
    --ck-color-input-disabled-background: hsl(255deg 4% 21%);
    --ck-color-input-disabled-border: hsl(250deg 3% 38%);
    --ck-color-input-disabled-text: hsl(0deg 0% 78%);

    /* -- Overrides the default .ck-labeled-field-view class colors. ---------------------------- */
    --ck-color-labeled-field-label-background: var(--ck-custom-background);

    /* -- Overrides the default .ck-list class colors. ------------------------------------------ */
    --ck-color-list-background: var(--ck-custom-background);
    --ck-color-list-button-hover-background: var(--ck-custom-foreground);
    --ck-color-list-button-on-background: hsl(208deg 88% 52%);
    --ck-color-list-button-on-text: var(--ck-custom-white);

    /* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */
    --ck-color-panel-background: var(--ck-custom-background);
    --ck-color-panel-border: var(--ck-custom-border);

    /* -- Overrides the default .ck-toolbar class colors. --------------------------------------- */
    --ck-color-toolbar-background: var(--ck-custom-background);
    --ck-color-toolbar-border: var(--ck-custom-border);

    /* -- Overrides the default .ck-tooltip class colors. --------------------------------------- */
    --ck-color-tooltip-background: hsl(252deg 7% 14%);
    --ck-color-tooltip-text: hsl(0deg 0% 93%);

    /* -- Overrides the default colors used by the ckeditor5-image package. --------------------- */
    --ck-color-image-caption-background: hsl(0deg 0% 97%);
    --ck-color-image-caption-text: hsl(0deg 0% 20%);

    /* -- Overrides the default colors used by the ckeditor5-widget package. -------------------- */
    --ck-color-widget-blurred-border: hsl(0deg 0% 87%);
    --ck-color-widget-hover-border: hsl(43deg 100% 68%);
    --ck-color-widget-editable-focus-background: var(--ck-custom-white);

    /* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */
    --ck-color-link-default: hsl(190deg 100% 75%);
}