비인간 허브

---

+ Show component code

:root {
        /* header measurements */
        --header-height-on-desktop: 10rem;
        --header-height-on-mobile: 10rem;
        --header-h1-font-size: clamp(2rem, 5vw, 2.8125rem);
        --header-h2-font-size: clamp(0.875rem, 3vw, 0.9375rem);
 
        --logo-image: url("https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg");
    }
 
    #header {
        --search-textbox-text-color: var(--swatch-secondary-color);
        background: none;
    }
 
    #header::before {
        content: " ";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0.75rem;
        background-image: var(--logo-image);
        background-repeat: no-repeat;
        background-position: center 0;
        background-size: auto calc(var(--header-height-on-desktop) - 1.5rem);
        opacity: 0.8;
        pointer-events: none;
    }
 
    #header h1,
    #header h2 {
        margin: 0;
        padding: 0;
        width: 100%;
        height: var(--header-height-on-desktop);
        display: flex;
        align-items: center;
        justify-content: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    #header h1 a,
    #header h1 a::before,
    #header h2 span,
    #header h2 span::before {
        margin: 0;
        padding: 0;
        z-index: 0;
        display: block;
        text-align: center;
    }
 
    #header h1 {
        z-index: 1;
    }
 
    #header h1 a::before,
    #header h1 a::after {
        content: var(--header-title);
    }
 
    #header h1 a::before  {
        color: rgb(var(--swatch-text-tertiary-color));
        z-index: -1;
        -webkit-text-stroke: 0.325rem rgb(var(--swatch-text-dark));
    }
 
    #header h1 a::after {
        color: rgb(var(--swatch-headerh1-color));
        z-index: 1;
    }
 
    #header h2 {
        z-index: 0;
        text-transform: uppercase;
        pointer-events: none;
    }
 
    #header h2 span {
        margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 2em);
    }
 
    #header h2 span::before,
    #header h2 span::after {
        --wght: 600;
        content: var(--header-subtitle);
        position: absolute;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        width: 100%;
        text-align: center;
    }
 
    #header h2 span::before {
        -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-dark));
    }
 
    #header h2 span::after {
        color: rgb(var(--swatch-headerh2-color));
        z-index: 1;
    }
 
    #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
        color: rgba(0, 0, 0, 0);
    }
 
    @media (min-width: 36rem) {
 
        #login-status {
            flex-grow: 1;
            left: 3%;
            right: initial;
        }
 
         #login-status::before {
            --mask-image: none;
            background-color: transparent;
        }
 
        #login-status:not(:focus-within) {
            color: rgb(var(--login-line-divider-color));
            -webkit-user-select: initial;
            -moz-user-select: initial;
            -ms-user-select: initial;
            user-select: initial;
        }
 
        #login-status #account-topbutton,
        #login-status:not(:focus-within) #account-topbutton {
            --clip-path:
                    polygon( 0 0, 100% 0, 100% 100%, 0 100% );
            background-color: rgba(var(--login-arrow-color), 0);
 
        }
 
        #login-status #account-topbutton::before{
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(var(--login-arrow-color), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton:hover::before {
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
        }
 
        #login-status:not(:focus-within) #account-topbutton::after {
            display: none;
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            pointer-events: all;
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) {
            opacity: 1;
        }
 
        #login-status #my-account {
            --wght: 300;
        }
 
        #account-options {
            background: var(--gradient-header);
        }
 
        #search-top-box {
            top: 1.5em;
            right: 3%;
            background: rgba(var(--search-focus-textbox-bg-color), 0.4);
        }
 
         #search-top-box:focus-within ~ #login-status {
            opacity: 1;
        }
 
        #search-top-box::after {
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
        }
 
        #search-top-box:not(:focus-within)::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0% 100%
                    );
            background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #search-top-box:not(:focus-within):hover::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            background-color: rgb(var(--search-icon-hover-bg-color));
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) {
            max-width: var(--search-width);
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
            max-width: var(--search-width);
            padding: 0 var(--search-height) 0 1em;
            outline-width: 0;
            background-color: rgb(var(--search-focus-textbox-bg-color), 0.35);
            color: rgba(var(--search-textbox-text-color), 0.4);
            cursor: pointer;
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"],
        #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"] {
            pointer-events: all;
            border: none;
        }
 
    }
 
    #page-title::after,
    .meta-title::after,
    #page-title::before,
    .meta-title::before {
        content: "";
        flex-grow: 1;
        height: 0.0625rem;
        background: rgb(var(--swatch-primary));
    }
 
    #page-title::before,
    .meta-title::before {
        margin: auto 1.25rem auto auto;
    }

+ Show component code

@supports(display: grid) {
    :root {
        --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19);
        --body-width-on-desktop: 45.75rem;
    }
    @media only screen and (min-width: 769px) {
        #side-bar .close-menu {
            display: block;
            position: fixed;
            top: 0.5rem;
            left: 0.5rem;
            width: 3rem;
            height: 3rem;
            background: unset;
            opacity: 1;
            pointer-events: all;
            z-index: -1;
        }
 
        #side-bar .close-menu img {
            color: transparent;
        }
 
        #side-bar .close-menu::before,
        #side-bar .close-menu::after {
            content: "";
            box-sizing: border-box;
            position: fixed;
            display: block;
            top: 0.5rem;
            left: 0.5rem;
            width: 3rem;
            height: 3rem;
            padding: 0;
            margin: 0;
            text-align: center;
            pointer-events: all;
            cursor: pointer;
            transition:
                opacity var(--sidebar-transition-timing);
        }
 
        #side-bar .close-menu::before {
            --mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Hamburger' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M4 10h24c1.1 0 2-.9 2-2s-.9-2-2-2H4c-1.1 0-2 .9-2 2s.9 2 2 2zm24 4H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2zm0 8H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2z'/%3E%3C/svg%3E");
            z-index: -1;
            background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important;
            -webkit-mask: var(--mask);
            mask: var(--mask);
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: 50% 50%;
            mask-position: 50% 50%;
            -webkit-mask-size: 60%;
            mask-size: 60%;
        }
 
        #side-bar .close-menu::after {
            z-index: -2;
            background-color: var(--toggle-button-bg, rgb(var(--sidebar-bg-color))) !important;
            border-radius: var(--toggle-roundness, 50%);
            border: var(--toggle-border-color, rgb(var(--sidebar-links-text))) var(--toggle-border-width, 0.25rem) solid;
        }
 
        #side-bar:focus-within .close-menu,
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu {
            pointer-events: none;
        }
 
        #side-bar:focus-within .close-menu::before,
        #side-bar:focus-within .close-menu::after {
            opacity: 0;
            pointer-events: none;
        }
 
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::before,
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::after {
            opacity: 0;
            pointer-events: none;
        }
 
        #side-bar {
            display: block;
            position: fixed;
            top: 0;
            left: calc(var(--sidebar-width-on-desktop)*-1);
            z-index: 10;
            transition:
                left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            margin-top: 0;
        }
 
        #side-bar:focus-within {
            left: 0;
        }
 
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover {
            left: 0;
        }
 
        #side-bar .side-block {
            margin-top: 1rem;
            background-color: rgb(0, 0, 0, 0);
            border-radius: 0;
            border-left-width: 0px;
            border-right-width: 0px;
        }
 
        #main-content::before {
            content: "";
            display: block;
            position: fixed;
            top: 0;
            right: 0;
            z-index: -1;
            opacity: 0;
            transition:
                opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
                width 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
            margin-left: var(--sidebar-width-on-desktop);
            background: rgba(var(--swatch-menubg-black-color), .3) 1px 1px repeat;
            padding-right: 0;
            width: 100%;
            height: 100vh;
            pointer-events: none;
            z-index: 99;
        }
 
        #side-bar:focus-within ~ #main-content::before {
            width: calc(100% - var(--sidebar-width-on-desktop));
            opacity: 1;
            pointer-events: all;
        }
 
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover ~ #main-content::before {
            width: calc(100% - var(--sidebar-width-on-desktop));
            opacity: 1;
            pointer-events: all;
        }
 
        @supports (-moz-appearance:none) and (background-attachment:local) and (not (-moz-osx-font-smoothing:auto)) { #side-bar {
            padding: inherit;
        } }
 
        #content-wrap {
            display: flex;
            flex-direction: row;
            width: calc(100vw - (100vw - 100%));
            min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
            flex-grow: 2;
            height: auto;
            position: relative;
            margin: 0 auto;
            max-width: inherit;
        }
 
        #main-content {
            width: 100%;
            position: initial;
            max-height: 100%;
            padding: 2rem 1rem;
            max-width: var(--body-width-on-desktop, 45.75rem);
            margin: 0 auto;
        }
 
        #page-content {
            max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
        }
 
        @supports (-webkit-hyphens:none) { 
            #side-bar {
                transition:
                    left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
                    padding-right 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
                    background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
                padding-right: 0;
                background-color: rgb(0, 0, 0, 0);
                pointer-events: all;
                overflow-x: visible;
                overflow-y: visible;
                z-index: 999;
            }
 
            #side-bar::-webkit-scrollbar {
                opacity: 0;
                -webkit-transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
                transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
            }
 
            #side-bar .close-menu::before {
                z-index: 999;
            }
 
            #side-bar .close-menu::after {
                z-index: 998;
            }
 
            #side-bar:hover .close-menu::before,
            #side-bar:hover .close-menu::after {
                opacity: 0;
            }
 
            #side-bar:hover {
                left: 0;
                background-color: rgba(var(--swatch-menubg-color), 1);
                padding-right: 0;
            }
 
            #side-bar:hover::-webkit-scrollbar {
                opacity: 1;
            }
 
            #side-bar:hover~#main-content::before {
                width: calc(100% - var(--sidebar-width-on-desktop));
                opacity: 1;
                pointer-events: all;
            }
        }
    }
}

---

+ Show component code

:root {
        /* header measurements */
        --header-height-on-desktop: 10rem;
        --header-height-on-mobile: 10rem;
        --header-h1-font-size: clamp(2rem, 5vw, 2.8125rem);
        --header-h2-font-size: clamp(0.875rem, 3vw, 0.9375rem);
 
        --logo-image: url("https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg");
    }
 
    #header {
        --search-textbox-text-color: var(--swatch-secondary-color);
        background: none;
    }
 
    #header::before {
        content: " ";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0.75rem;
        background-image: var(--logo-image);
        background-repeat: no-repeat;
        background-position: center 0;
        background-size: auto calc(var(--header-height-on-desktop) - 1.5rem);
        opacity: 0.8;
        pointer-events: none;
    }
 
    #header h1,
    #header h2 {
        margin: 0;
        padding: 0;
        width: 100%;
        height: var(--header-height-on-desktop);
        display: flex;
        align-items: center;
        justify-content: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    #header h1 a,
    #header h1 a::before,
    #header h2 span,
    #header h2 span::before {
        margin: 0;
        padding: 0;
        z-index: 0;
        display: block;
        text-align: center;
    }
 
    #header h1 {
        z-index: 1;
    }
 
    #header h1 a::before,
    #header h1 a::after {
        content: var(--header-title);
    }
 
    #header h1 a::before  {
        color: rgb(var(--swatch-text-tertiary-color));
        z-index: -1;
        -webkit-text-stroke: 0.325rem rgb(var(--swatch-text-dark));
    }
 
    #header h1 a::after {
        color: rgb(var(--swatch-headerh1-color));
        z-index: 1;
    }
 
    #header h2 {
        z-index: 0;
        text-transform: uppercase;
        pointer-events: none;
    }
 
    #header h2 span {
        margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 2em);
    }
 
    #header h2 span::before,
    #header h2 span::after {
        --wght: 600;
        content: var(--header-subtitle);
        position: absolute;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        width: 100%;
        text-align: center;
    }
 
    #header h2 span::before {
        -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-dark));
    }
 
    #header h2 span::after {
        color: rgb(var(--swatch-headerh2-color));
        z-index: 1;
    }
 
    #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
        color: rgba(0, 0, 0, 0);
    }
 
    @media (min-width: 36rem) {
 
        #login-status {
            flex-grow: 1;
            left: 3%;
            right: initial;
        }
 
         #login-status::before {
            --mask-image: none;
            background-color: transparent;
        }
 
        #login-status:not(:focus-within) {
            color: rgb(var(--login-line-divider-color));
            -webkit-user-select: initial;
            -moz-user-select: initial;
            -ms-user-select: initial;
            user-select: initial;
        }
 
        #login-status #account-topbutton,
        #login-status:not(:focus-within) #account-topbutton {
            --clip-path:
                    polygon( 0 0, 100% 0, 100% 100%, 0 100% );
            background-color: rgba(var(--login-arrow-color), 0);
 
        }
 
        #login-status #account-topbutton::before{
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(var(--login-arrow-color), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton:hover::before {
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
        }
 
        #login-status:not(:focus-within) #account-topbutton::after {
            display: none;
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            pointer-events: all;
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) {
            opacity: 1;
        }
 
        #login-status #my-account {
            --wght: 300;
        }
 
        #account-options {
            background: var(--gradient-header);
        }
 
        #search-top-box {
            top: 1.5em;
            right: 3%;
            background: rgba(var(--search-focus-textbox-bg-color), 0.4);
        }
 
         #search-top-box:focus-within ~ #login-status {
            opacity: 1;
        }
 
        #search-top-box::after {
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
        }
 
        #search-top-box:not(:focus-within)::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0% 100%
                    );
            background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #search-top-box:not(:focus-within):hover::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            background-color: rgb(var(--search-icon-hover-bg-color));
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) {
            max-width: var(--search-width);
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
            max-width: var(--search-width);
            padding: 0 var(--search-height) 0 1em;
            outline-width: 0;
            background-color: rgb(var(--search-focus-textbox-bg-color), 0.35);
            color: rgba(var(--search-textbox-text-color), 0.4);
            cursor: pointer;
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"],
        #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"] {
            pointer-events: all;
            border: none;
        }
 
    }
 
    #page-title::after,
    .meta-title::after,
    #page-title::before,
    .meta-title::before {
        content: "";
        flex-grow: 1;
        height: 0.0625rem;
        background: rgb(var(--swatch-primary));
    }
 
    #page-title::before,
    .meta-title::before {
        margin: auto 1.25rem auto auto;
    }

+ Show component code

@supports(display: grid) {
    :root {
        --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19);
        --body-width-on-desktop: 45.75rem;
    }
    @media only screen and (min-width: 769px) {
        #side-bar .close-menu {
            display: block;
            position: fixed;
            top: 0.5rem;
            left: 0.5rem;
            width: 3rem;
            height: 3rem;
            background: unset;
            opacity: 1;
            pointer-events: all;
            z-index: -1;
        }
 
        #side-bar .close-menu img {
            color: transparent;
        }
 
        #side-bar .close-menu::before,
        #side-bar .close-menu::after {
            content: "";
            box-sizing: border-box;
            position: fixed;
            display: block;
            top: 0.5rem;
            left: 0.5rem;
            width: 3rem;
            height: 3rem;
            padding: 0;
            margin: 0;
            text-align: center;
            pointer-events: all;
            cursor: pointer;
            transition:
                opacity var(--sidebar-transition-timing);
        }
 
        #side-bar .close-menu::before {
            --mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Hamburger' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M4 10h24c1.1 0 2-.9 2-2s-.9-2-2-2H4c-1.1 0-2 .9-2 2s.9 2 2 2zm24 4H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2zm0 8H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2z'/%3E%3C/svg%3E");
            z-index: -1;
            background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important;
            -webkit-mask: var(--mask);
            mask: var(--mask);
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: 50% 50%;
            mask-position: 50% 50%;
            -webkit-mask-size: 60%;
            mask-size: 60%;
        }
 
        #side-bar .close-menu::after {
            z-index: -2;
            background-color: var(--toggle-button-bg, rgb(var(--sidebar-bg-color))) !important;
            border-radius: var(--toggle-roundness, 50%);
            border: var(--toggle-border-color, rgb(var(--sidebar-links-text))) var(--toggle-border-width, 0.25rem) solid;
        }
 
        #side-bar:focus-within .close-menu,
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu {
            pointer-events: none;
        }
 
        #side-bar:focus-within .close-menu::before,
        #side-bar:focus-within .close-menu::after {
            opacity: 0;
            pointer-events: none;
        }
 
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::before,
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::after {
            opacity: 0;
            pointer-events: none;
        }
 
        #side-bar {
            display: block;
            position: fixed;
            top: 0;
            left: calc(var(--sidebar-width-on-desktop)*-1);
            z-index: 10;
            transition:
                left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            margin-top: 0;
        }
 
        #side-bar:focus-within {
            left: 0;
        }
 
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover {
            left: 0;
        }
 
        #side-bar .side-block {
            margin-top: 1rem;
            background-color: rgb(0, 0, 0, 0);
            border-radius: 0;
            border-left-width: 0px;
            border-right-width: 0px;
        }
 
        #main-content::before {
            content: "";
            display: block;
            position: fixed;
            top: 0;
            right: 0;
            z-index: -1;
            opacity: 0;
            transition:
                opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
                width 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
            margin-left: var(--sidebar-width-on-desktop);
            background: rgba(var(--swatch-menubg-black-color), .3) 1px 1px repeat;
            padding-right: 0;
            width: 100%;
            height: 100vh;
            pointer-events: none;
            z-index: 99;
        }
 
        #side-bar:focus-within ~ #main-content::before {
            width: calc(100% - var(--sidebar-width-on-desktop));
            opacity: 1;
            pointer-events: all;
        }
 
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover ~ #main-content::before {
            width: calc(100% - var(--sidebar-width-on-desktop));
            opacity: 1;
            pointer-events: all;
        }
 
        @supports (-moz-appearance:none) and (background-attachment:local) and (not (-moz-osx-font-smoothing:auto)) { #side-bar {
            padding: inherit;
        } }
 
        #content-wrap {
            display: flex;
            flex-direction: row;
            width: calc(100vw - (100vw - 100%));
            min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
            flex-grow: 2;
            height: auto;
            position: relative;
            margin: 0 auto;
            max-width: inherit;
        }
 
        #main-content {
            width: 100%;
            position: initial;
            max-height: 100%;
            padding: 2rem 1rem;
            max-width: var(--body-width-on-desktop, 45.75rem);
            margin: 0 auto;
        }
 
        #page-content {
            max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
        }
 
        @supports (-webkit-hyphens:none) { 
            #side-bar {
                transition:
                    left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
                    padding-right 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
                    background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
                padding-right: 0;
                background-color: rgb(0, 0, 0, 0);
                pointer-events: all;
                overflow-x: visible;
                overflow-y: visible;
                z-index: 999;
            }
 
            #side-bar::-webkit-scrollbar {
                opacity: 0;
                -webkit-transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
                transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
            }
 
            #side-bar .close-menu::before {
                z-index: 999;
            }
 
            #side-bar .close-menu::after {
                z-index: 998;
            }
 
            #side-bar:hover .close-menu::before,
            #side-bar:hover .close-menu::after {
                opacity: 0;
            }
 
            #side-bar:hover {
                left: 0;
                background-color: rgba(var(--swatch-menubg-color), 1);
                padding-right: 0;
            }
 
            #side-bar:hover::-webkit-scrollbar {
                opacity: 1;
            }
 
            #side-bar:hover~#main-content::before {
                width: calc(100% - var(--sidebar-width-on-desktop));
                opacity: 1;
                pointer-events: all;
            }
        }
    }
}

＋코드 보기

/*
    Calamity Theme
    [2021 Wikidot Theme]
    Created by Oboebandgeek99
    Based on Swirling Ashes Theme created by Croquembouche.
    The UnHuman logo was created by Oboebandgeek99 based on an image in the Public Domain. Licensed under CC-BY-SA 3.0.
*/
 
@import url('https://fonts.googleapis.com/css?family=Cabin+Sketch|Ubuntu|Space+Mono|Baumans&display=swap');
@import url('http://scpko.wdfiles.com/local--files/unfont/UnDotum.css');
@font-face {
    font-family: '을지로10년후체';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/BMEuljiro10yearslater.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: '세방고딕';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2104@1.0/SEBANG_Gothic_Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
 
/* BHL Vars */
 
:root:lang(ko) {
    --theme-base: "black-highlighter";
    --theme-id: "calamity";
    --theme-name: "대참사 테마";
 
    /* Header */
    --logo-image: none;
    --header-title: "비인간";
    --header-subtitle: "말세 이후의 삶";
 
    /* Typefaces */
    --body-font: "Ubuntu", "UnDotum", sans-serif;
    --header-font: "Cabin Sketch", "을지로10년후체", sans-serif;
    --title-font: "Baumans", "세방고딕", sans-serif;
    --mono-font: "Space Mono", "Andale Mono", "Courier New", Courier, monospace;
 
}

정보

---

Unhuman Hub: 비인간 허브
원작: https://scp-wiki.wikidot.com/unhuman-hub
저자: Oboebandgeek99
역자: Abyshroom

---

---

재앙은 대상이 지정되어 있었다. 특정했다. 말하자면 한정된 것이었다. 지구를 파괴한 것도 아니며, 모든 생명체를 죽인 것도 아니었다. 그저 인간들만 죽일 뿐이었다.

그렇다면 인간이 종말에서 살아남아 번영하려면 어찌해야 할까?
간단하다.

그리하여 되어야 할 것을 말하니

비인간

비인간 이야기

새로운 세상의 이야기

Goodbye Nightflower
Cinéma Chaotique - Written by Oboebandgeek99
Goodbye Nightflower: Beginnings - Written by Oboebandgeek99
Haphway There - Written by Oboebandgeek99
Goodbye Nightflower: The Shining City - Written by Oboebandgeek99

Otel Entra’s Quest to find Music and become the Best Lich Rapper in the Wasteland
Otel Entra And The Demolition Derby - Written by Tropinano
Otel Entra And The Complex Disaster of Living Like a Lich - Written by Tropinano
Otel Entra And The Stupid Hat - Written by Tropinano
Otel Entra And The Cheese Wheel - Written by Tropinano

Thur'lex the Devourer
thur-lex-the-devourer - Written by Mooagain
thur-lex-the-devourer-and-bernie - Written by Mooagain
thur-lex-the-devourer-commits-voter-fraud - Written by Mooagain
thur-lex-the-devourer-wins-a-fight - Written by Mooagain
thur-lex-the-devourer-conquers-a-small-house - Written by Mooagain
thur-lex-the-devourer-is-barely-in-this-one - Written by Mooagain
SCP-6550 - Thur'lex the Devourer - Written by Mooagain

Other Tales
The Unhuman Experience: Former Prime Minister Harold Holt - Written by Tstaffor
Color and Light - Written by Oboebandgeek99
With Astraeus Watching Over - Written by Oboebandgeek99

재단에 남겨진 이들

The Omni Bot
Jalick and the Omni Bot - Written by Marceline_Raynes
SCP-6801 - The Promethean, The Mech, and the Omni Bot - Written by Marceline_Raynes

Molly on the Shore
SCP-5825 - Molly on the Shore - Written by Oboebandgeek99
Ship to Wreck - Written by Oboebandgeek99
Siren Song - Written by Oboebandgeek99

Sanctuary-64
Do Androids Dream of Sanctuary? - Written by BlueJones
Unhuman, Not Inhumane - Written by Quadraginta

Médecin, Not Medicine
Oh Lord - Written by tiredsn0w
Rapid Departure II - Written by tiredsn0w
That's Not Love, Isabel - written by tiredsn0w
So... Your Relationship - Written by tiredsn0w
Jailbreak - Written by tiredsn0w

Other Documentation
SCP-6060 - Only Human - Written by Mew-ltiverse and Oboebandgeek99
The Bright Pit - Written by Marceline_Raynes
SCP-7220 - I, Not Robot - Written by Mooagain
Beyond the Rubicon - Written by Ralliston

다른 곳에 남겨진 이들

The Icarus Takes Flight - Written by BlueJones
Corporate Dealings After The Calamity - Written by Kensing

세계관

개요

비인간은 복잡하면서도 굉장히 유연한 설정입니다. 다음은 그 기초가 되는 내용들입니다.

1. 막연히 현재로 살아가던 어느 날, '재앙'이 도래하여 '온전한 인간'을 죽이기 시작했다.
   1. 아무도, 심지어는 재단조차 이 재앙이 도래함을 목격하지 못했다.
2. 허나, 인간성은 온전한 인간으로 고려될 수조차 없는 변칙적인 형태의 인간들에 의해 살아남았다.
   1. 또한, 일부는 변칙성에 영향을 받아 부활하기도 했다.
   2. 이에 더하여, 일부 존재들이 이 재앙 이후 이 행성에 도착하였다.
   3. 이 '비인간'들 (이제부터 그러한 존재들을 공통적으로 해당 단어로 언급) 다수는 조건적인 불멸성이라는 것을 지니고 있다. 불멸자지만, 대가를 치뤄야 한다.
3. 재앙은 설령 인간의 지능을 가지고 있더라도 인간이 아닌 것은 그 무엇도 죽이지 않았다.
4. 심각하고 급작스런 생태학적인 변화에도 지구상의 생명체들은 삶을 이어나갔고 심지어 일부는 더욱 번영하기도 하였다.
5. 일부 비인간들은 함께 뭉쳐 공동체를 형성하였다. 다른 비인간들은 스캐빈저가 되어 세상을 떠돌아다녔다.
6. 비인간 대부분이 특정 마법들을 배울 수 있다.
7. 생존자 대부분은 재단과 다른 요주의 단체들을 모르는 자들이었기에, 해당 단체들의 영향력은 간접적이다.

비인간 허브의 설정은 일반적으로 정치적인 모략이나 세계 세력의 간섭이 없는 모험 이야기나 캐릭터의 이야기를 적는 것에 최적화되어 있습니다. 다음 내용을 읽어 구체적인 내용을 확인하세요. 만일 비인간 허브에 기여하고 싶다면 '비인간 허브 글 적기' 탭을 확인해주세요.

재앙

• 알 수 없을 정도의 시간 전, 지구상의 모든 인간을 전부 죽여버린 것처럼 보이는 어떠한 사건이 발생했습니다.
• 아무도 이 종말이 무엇이었는지 정확히 알지 못합니다. 불멸자들은 아마 그 사건이 기억을 지워버리는 무언가와 함께 발생했거나, 혹은 그 사건이 너무나도 심한 정신적 외상을 초래할 정도라서 해당 사건을 겪은 자들이 기억을 즉시 막아버린 것으로 추측하고 있습니다.
• SCP-2000은 작동하지 않았거나, 혹은 그 존재를 알고 있는 자들 전부가 죽었습니다. 종말의 힘이 SCP-2000을 알았기에 이를 대상으로 삼았거나, 아예 모두가 죽어 SCP-2000을 알고 있는 자들이 없게 된 것이죠.
  • 동일한 상황이 종말 복구/예방형 SCP들에게 이루어졌습니다.
  • 그말인즉슨, SCP-2000의 장소와 기기는 여전히 존재한다는 것입니다. 도서관으로 향하는 길도 함께요. 아마 언젠가, 누군가 이를 찾아낼 수 있겠죠.
• 대부분의 조직과 정형화된 요단은 사라졌습니다. 몇몇 낙오된 집단(예시: 특정 변칙적 종교 집단)은 종말 이전부터 존재했으며, 일부 집단은 종말 이후에 생겨났습니다. 세부사항은 '거주자' 부분을 확인해주세요.

세상

• 자연적으로 환원된 일부 구역이 존재하지만, 대부분은 여전히 인간 문명에서 환원되지 않은 채로 있습니다.
• 일부 정착지들이 인간 사회의 잿더미 속에서 환원된 반면, 다른 정착지들은 멀리 외딴 곳에 형성되어 있습니다.
• 많은 반(半)전형적 생명체들은 정착지에서 살아가고 있습니다. 대부분은 그 바깥 세상으로부터 단절되어, 자급자족하는 공동체를 만들어 살아가고 있죠.
• 일부는 황무지에서 스캐빈저로 살아가는 것을 선호합니다. 표면적으로는 그러한 어려운 삶이 불멸자에게 뭐라도 할 일을 준다는 이유 때문입니다.
• 산업화는 더 이상 아무짝에도 쓸모없어 보입니다. 만일 자원을 발견하면 산업화된 기술을 다시 시작할 수 있겠지만, 물자 수송을 바라는 바깥의 극소수의 사람들 중에서도 그 물자로 다시 산업화를 시작하고자 하는 것에 관심 있는 사람은 거의 없습니다.

규칙 (마법, 기술 등)

• 마법이 존재하며, 대부분이 어느 정도 이를 배울 수 있습니다. 스캐빈저는 생존 자체에도 테크노맨시¹에 대한 이본적인 지식이 있어야 하며, 정착민 또한 더 오래 살기 위하여 주로 의학 마법을 사용합니다.
• 마법의 가장 흔한 형태는 테크노맨시입니다. 태고의 마법을 이용하여 산업 혁명 이후의 기술을 발전시킵니다.
  • 가장 흔한 예시는 공통번역기입니다. 거의 모든 이들이 다른 사람들의 말을 번역해주는 번역 도구를 가지고 있습니다. (마치 바벨피쉬²처럼요.)
• 불멸은 마법의 일종이긴 하지만 조건성을 가집니다. 마법을 제외하면 인간과 다름이 없었던 몇몇 불멸자들은 재앙에서 죽음을 맞이했지만, 일부 불멸자들은 확실히 생존하기 위해 인간이라 불릴 수 있는 선에서 벗어났습니다. 하지만 이와는 별개로 '불멸자'라고 불리는 모든 이들은 이제 살아남기 위해 기본적인 수준의 자가정비능력을 필요로 합니다. 모든 것에는 대가가 필요합니다.

거주자

모두가 알고 있듯, 모든 인간이 종말에서 명을 달리했습니다. 다시 말해, 지적 생명체는 여전히 지구상에 존재합니다. 물론 이들을 찾기 조금 더 힘들어졌지만요. 지적 생명체는 다음 세 가지 카테고리로 세분화됩니다. 생존자, 전생자, 신인류.

생존자 - 살아남은 자들

종말에서 살아남았지만, 온전히 인간으로서 남지는 못한 이들.

• 변이자 - 주로 인간과 동물의 형태를 오가며 모습을 바꾸는, 변신이 가능한 자들. 뱀파이어/늑대인간을 생각하면 편합니다.
• 크리쳐 - 인간과 유사하거나 인간의 지능을 가진 채로 비인간이 되어 살아남은 동물들.
  • 예렌_Yeren - SCP-1000 혹은 빅풋이라고 불리는 존재인 예렌은 수가 늘어나고 있으며, 작은 공동체를 형성하여 유목민의 평화로운 삶을 살고 있습니다. 그들은 지구를 거닐곤 했던 인간들과 복잡한 관계를 가지고 있습니다. 뭔가를 숨기고 있는 걸까요?
• 기계인간 - 인간 지능과 동일하거나 상회하는 AI를 탑재한 로봇. 대부분은 생존자이며, 일부는 신인류입니다.
• 일반인 - 종말 발발 시 살아있던 인간의 자손인 일반적인 인간. 대부분이 이들을 그저 전설으로 생각하고 있습니다.

전생자 - 부활한 자들

종말 이전에 사망하여 이후에 부활한 자들.

• 리치 - 가늠하기도 힘들 정도로 옛날에 죽은 이후 마법에 의해 살아난 자들. 일부는 종말 이전에 부활한 자들이지만, 대부분은 종말 이후에 부활했습니다. 온전한 인간의 형태로도, 움직이는 해골으로도, 혹은 그 중간의 형태로도 생길 수 있습니다.
• 좀비 프로메테우스 - 죽은 이후에 과학적인 방법으로 종말 직후 다시 살아난 이들. 리치는 부패가 얼마나 진행되었든 상관없이 부활할 수 있는 반면, 프로메테우스는 죽은 직후에 부활해야 하며 지속적으로 부패를 방지해야 합니다. 식사를 거의 하지 않으며, 약간… 상한 것처럼 생겼다고 종종 묘사됩니다. 프로메테우스는 리치보다 더욱 수가 적습니다.
• 유령 - 지구를 떠돌아다닌다고 여겨졌던, 물리적인 형태가 없는 인간의 영혼. 아무도 이들이 실재하는지는 모르지만, 대다수는 충분히 가능성 있는 이야기라고 생각하고 있습니다.

신인류 - 새로운 인간의 형태

종말 이후에 지구에 온 이들, 혹은 진화한 지성체.

• 외계인 - 타 행성이나 타 차원에서 온 존재.
• 여행자 - 과거로부터 온 시간여행자. 시간여행 자체가 힘들 뿐 아니라 늘 같은 미래로 이끌어주지는 않기 때문에 소수만이 존재한다.
• 진화체 - 재앙 이후에 진화한 생명체.

비인간 허브 글 적기

그래서 비인간 허브의 글을 적고 싶고, 뭔가 도움말이 필요하시단 거죠! 어떻게 시작하는지 알려드릴게요.

일반적인 정보

• 세계관 탭만큼이나 이 탭도 잘 읽어주세요.
• 모든 것의 이론이나 역학에 너무 매몰되지 마세요. 이 설정에서 모든 걸 설명할 필요는 없답니다.
• 즐기세요! 이 설정은 제가 포스트 아포칼립스 세상에서 괴물같은 것들이 생존하는 영화의 아이디어를 좋아했기 때문에 만든 거거든요.
• 일반적으로, 만일 당신이 다른 사용자에 의해 만들어진 캐릭터(예시: 캔델라_Candela, 오텔 엔트라_{Otel Entra}, 젤릭_Jalick 등)를 비인간 허브에 이용하고 싶다면 원작자에게 그 캐릭터들을 이용해도 괜찮은지 확인해주세요. 또, 당신은 그 캐릭터에 대하여 근본적으로 모순되는 내용은 적으면 안 되구요.
• 당신이 이야기를 포스트했다면 허브에 추가하세요! 주로 재단에 대한 내용을 다루는 SCP 글이나 이야기는 '재단에 남겨진 이들' 탭에 추가하고, 주로 요단 서식이나 요단에 대한 이야기를 다룬다면 '다른 곳에 남겨진 이들' 탭에 추가하시면 됩니다. 그리고 '새로운 세상의 이야기'에는 재앙 이후의 세상에 대한 새로운 설정을 주로 다루는 이야기를 추가하시면 되고 말이죠.
• 만약 당신의 글이 연작의 일부라면, 당신 연작의 제목을 관련된 메인 헤더의 아래에 있는 서브헤더에 추가해주세요!

테마

인간성
인간 이후의 세상에서, 인류의 지역은 어떨까요? 무법지대이며, 잔혹한 황무지를 기대할 수도 있겠고, 가끔은… 아니 종종 평화롭고 협력적일 수도 있겠죠. 한때 인간이었던 자들이 더 이상 자신이 인간이 아님을 보여주는, 반박의 여지가 없는 증거를 마주하면 어떻게 될까요?
역사
특히 역사를 잃어버린 것처럼 보일 때, 우리는 어떻게 역사와 상호작용하고 다룰 수 있을까요? 지난날의 과오로부터 배워야만 하는 걸까요? 혹은 그냥 잊는 게 좋은 것들이 있는 거까요?
불멸성
주인공 대부분은 (조건적으로) 불멸자입니다. 그들은 어떻게 자신의 삶에 충족감을 느낄 수 있을까요? 불멸성이 그들이 바라 마지않던 것이었나요? 불멸성의 대가는 무엇인가요? 불멸자가 되기 위해 무엇을 포기했나요?

장르

• 포스트 아포칼립스 세계관의 이야기지만, 장르는 훨씬 가볍습니다.
• Goodbye Nightflower는 주인공들이 자신이 살아가는 세상을 탐험하는, 모험 장르가 주인 이야기입니다.
• Molly on the Shore은 훨씬 비극적인 스토리라인을 가지고 있지만, 비극의 초점이 재앙에 맞추어져 있지는 않습니다. 초점이 맞추어져 있는 것은 주인공이 살고 있는 연구자의 삶과 그녀의 주변 관계죠.
• 그보다 더 어두운 장르는 훨씬 적어야 합니다. 만일 당신이 그림다크³를 적고 싶다면, 그 장르에 더 적절한 카논이 있을 테죠.

재단

• 변칙적인 것들과 재단이 카논 전반에 영향을 미쳤습니다.
• 하지만 대부분 재단에는 초점이 맞추어져 있지 않습니다. 재단이 세상에 어떤 영향을 미쳤는지가 주된 내용이죠.
• 사실 재단은 더 이상 존재하지 않습니다. 하지만 특정 거주자들이 재단이었던 것을 기억할 수도 있겠죠.

그 외

• 다른 대부분의 요단들은 재단과 비슷한 상태입니다.
• 하지만 모든 요단이 그렇다는 건 아니죠. 사르킥 숭배나 부서진 신의 교단처럼 많은 변칙적인 종교 집단이 이런저런 형태로 여전히 남아있습니다.
• 재단과 다름없이, 다른 요단의 영향 또한 카논에 무게를 실어줄 수 있습니다.

Footnotes

1. 역주: 기술(테크놀로지)와 마법의 합성어

2. 역주: 더글러스 애덤스의 책 <은하수를 여행하는 히치하이커를 위한 안내서>에 등장하는, 어떤 언어라도 번역할 수 있는 물고기

3. 역주: 어둡고 폭력적인 주제의 판타지 소설

[[footnoteblock]]

---