제1막: 검은 왕이 하늘과 땅을 가르니

항목 카테고리가 미정의 상태입니다.
페이지 콘솔에서 카테고리를 선택하세요.

+ 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;
            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;
            width: var(--body-width-on-desktop, 45.75rem);
            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

@supports(display: grid) {
    :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);
    }
 
    #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);
            box-shadow: calc(var(--search-height) / 2 * -1) 0 calc(var(--search-height) / 2) 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;
            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;
            width: var(--body-width-on-desktop, 45.75rem);
            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

@supports(display: grid) {
    :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);
    }
 
    #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);
            box-shadow: calc(var(--search-height) / 2 * -1) 0 calc(var(--search-height) / 2) 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;
    }
}

+ 테마 코드 보이기

@font-face {
    font-family: 'MapoDPPA';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/MapoDPPA.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
 
@supports(display: grid) {
    :root:lang(ko) {
        --lgurl: var(--logo-image);
        --header-title: "SCP 재단";
        --header-subtitle: "확보 - 격리 - 보호";
 
        /* Typefaces */
        --body-font: "Roboto", 'NanumBarunCatsi', sans-serif;
        --header-font: "Josefin Sans", 'MapoDPPA', sans-serif;
        --title-font: "Josefin Sans", 'MapoDPPA', sans-serif;
        --mono-font: "Fira Code", "Andale Mono", "Courier New", Courier, 'Nanum Gothic Coding', monospace;
    }
 
    #header::before {
        background-image: var(--lgurl);
    }
}
 
.modalbox {
    background: rgb(var(--dark-gray-monochrome));
    box-shadow: 0 2px 6px rgb(0 79 102 / 50%);
}
 
.modalbox .close-credits {
    filter: invert(1);
}

감독관 평의회 명령

이 문서는 3/XXX-KO 등급 보안 인가 대상입니다.
무허가 접근 인원은 재단 격리규약에 따라 처분됩니다.

XXX-KO

---

담당 기지	기지 이사관	연구 책임자	담당 기동특무부대
제21K기지	이강수	이문원 박사	MTF 크시-122

---

일련번호: SCP-XXX-KO

등급: 타우미엘(Thaumiel)

특수 격리 절차: SCP-XXX-KO는 대한민국 지역사령부 소속 제01K기지에 격리되어 있었지만, 제21K기지가 새로 건설된 이후 해당 기지에서 격리를 담당하게 되었다. 대상은 D등급 인원을 수용하는 방을 개조한 전용 개인공간에 격리한다.

SCP-XXX-KO는 재단의 격리 절차에 협조적인 것으로 보이지만, 유사시를 대비하여 MTF 크시-122 "코락스"가 항상 대상을 감시한다. 대상이 개인공간 내에 있을 시에 부대원들이 3인 1조로 보초 임무를 진행하며, 구역 밖으로 나왔을 경우에는 최소 2인 이상의 부대원들이 동행하여야 한다.

또한 해당 기특대 및 대상의 연구에 배정된 재단 인문학부 동아시아사학과의 이문원 연구팀을 제외한 인원들은 무단으로 SCP-XXX-KO와 소통을 시도하는 것이 금지되어 있다. 격리 관련 인원들을 제외한 다른 인원들이 대상과 소통하기 위해서는 이문원 박사의 사전 허가가 필요하다. 다만 SCP-XXX-KO가 현재까지 이러한 감시 절차에 불만스러운 감정을 표하거나 항의한 적은 없었다.

SCP-XXX-KO가 특정한 물품을 요구하는 일은 드물지만, 대상이 재단에 보인 협조적인 태도 및 격리 도중 유용한 격리 관련 정보를 제공한 것을 감안하여 통신장비·전자장비·무기를 제외한 비변칙적 물품의 반입 요구는 허가되었다.

민간 학계에 침투한 재단 인원들은 SCP-XXX-KO가 발언한 내용들이 진지한 연구 주제가 되는 것을 방지하기 위해 지속적으로 현재 알려져 있는 중국 상고사의 내용들을 신화 및 전설로 여겨지도록 학술적 공작 작업을 지속한다. SCP-XXX-KO가 특정한 유물 또는 장소를 언급하였을 경우, 즉시 해당 위치에 재단이 개입해 민간인의 출입을 방지해야 한다.

설명: SCP-XXX-KO는 동아시아계로 추정되는 인간 남성이다. 대상의 신장은 약 170cm이다. SCP-XXX-KO는 유전적으로 비변칙적인 호모 사피엔스 사피엔스와 동일하지만, 자신이 상고 시대부터 현재까지 계속해서 살아왔다고 주장한다. 이 주장은 대상이 제공한 정보의 신뢰성을 감안해 사실인 것으로 여겨진다.

대상은 2차 세계대전 말엽인 1945년 초, SCP 재단에 격리되는 것을 자원하였다. 동아시아의 정치적 혼란기가 계속되어 재단의 안정적인 영향력 확보가 어려웠기에 1960년대까지는 제17기지에 격리하였으나, 1971년 대한민국에 소재한 제01K기지가 완공되어 해당 기지로 이송되었다. 특수 격리 절차 문단에 서술된 대로 현재는 신설된 제21K기지에서 대상을 격리하고 있다.

SCP-XXX-KO는 '변칙성의 격리를 통한 인류 사회의 보호' 라는 재단의 이념에 호의적이며, 시행하고 있는 격리 절차에 순종적이다. 대상은 재단은 상고시대 변칙사에 대한 다양한 구술 서사를 제공하였는데, 그가 제공하는 정보는 예전에는 대부분 묵살되었으나 일부 연구진들이 해당 발언에 흥미를 갖고 조사해본 결과 관련된 변칙유물들이 발굴되었고, SCP-XXX-KO가 SCP-XXX-KO-2, 3, 4로 지정된 고대 유적의 정보를 제공한 이후로 대상이 보유한 지식은 귀중한 사료로 취급되고 있다. 과거 SCP-XXX-KO는 안전 등급으로 지정되었으나, 격리의 유용성 때문에 타우미엘 등급으로 재지정되었다.

SCP-XXX-KO를 묘사한 고대 미술품.

SCP-XXX-KO의 모어는 현존하는 그 어떤 언어와도 일치하지 않으나, 재단 소속 언어학자들의 가설에 따르면 원시 중국티베트어족 언어라는 것이 유력하다. SCP-XXX-KO는 표준중국어 및 광동어, 객가어와 같은 현대 중국어 제방언 다수를 구사할 수 있지만 면담 등 대화를 나누는 과정에서 미지의 언어가 포함된 코드 스위칭이 간혹 관찰되어 대상의 모어가 현재 알 수 없는 언어라는 것이 밝혀졌다.

SCP-XXX-KO의 이름은 대상의 모어인 미지의 언어인 것으로 추정되지만, 현대 언어로 자신을 전욱 고양씨(顓頊 高陽氏)라 자칭한 바 있다.

추가 사항: 대상이 제공한 상고시대의 변칙성 지식과 관련하여, 제143기지의 쉐칭 이사관은 SCP-XXX-KO가 하도낙서(河图洛書) 프로젝트에 조력할 수 있는지를 요청하였다. SCP-XXX-KO는 하도낙서 프로젝트의 특별 조언자 인원으로 지정되었으며, MTF 크시-122 및 이문원 박사의 입회 하에 제143기지와 원격으로 교신하는 것이 허용되었다.

---

면담 기록 XXXKO.1

---

다음 면담은 연구책임자 이문원 박사가 수행하였다.

[기록 시작]

[이문원 박사가 기동특무부대원과 함께 SCP-XXX-KO가 거주하는 구역으로 들어온다]

SCP-XXX-KO: (한동안 말이 없음) 무엇을 바라는가.

이문원 박사: 제가 당신과 면담한 지도 십 년 가까이 된 것 같은데, 이제는 저를 좀 친근하게 대해 주셔도 괜찮지 않겠습니까. SCP-XXX-KO 당신이 재단에 반항하는 것도 아닌 데 말입니다. (잠시 멈춤) 저희가 격리하고 있는 인간 또는 지적 존재들은 자기를 일련번호로 부르는 걸 껄끄러워하지만, 제가 아는 한 당신만이 예외였습니다.

SCP-XXX-KO: 나 또한, 자네들이 어찌하여 그리하는지를 알기 때문이다. 길고도 긴 세월 동안, 내가 저질렀던 것이 그대들의 대의와 상통한다고 볼 수 있었으니.

이문원 박사: 재단의 연구진들이 당신의 말에 귀 기울이고, 또 당신을 유용한 정보자원, 뭐 이렇게 취급하는 게 불쾌한다면 사적으로는 죄송하다고 생각됩니다만, 으로서 대우한 것도 꽤 오래 전 일이었습니다. 하지만 재단은 당신을 SCP-XXX-KO로만 지칭했을 뿐 사람으로서 어떤 이름을 가졌는지는 별 관심이 없었더군요.

SCP-XXX-KO: 원하는 바를 말하라.

이문원 박사: 당신이 스스로를 전욱이라고 불렀던 것을 알고 있습니다.

SCP-XXX-KO: 맞다.

이문원 박사: 그 말은, 당신이 중국 신화와 «사기», «산해경»에 언급된 인물, 삼황오제(三皇五帝)의 현제(玄帝) 전욱 고양씨라는 말씀이십니까?

SCP-XXX-KO: 그렇다, 삼황이라 말하고, 오제라고 말하는 것은 괴이, 다시 말해 자네 같은 재단이라는 무리가 변칙성이라 일컫는 것을 모르는 백성들이나 말하는 것이지만 말이다. 실제로 일어난 일은 공구(孔丘)의 도를 따르는 이들이 믿는 것처럼 평화로운 선양이 아니었고, 애초에 서로 동포라고조차도 여기지 않았다.

이문원 박사: 그렇지만, 그들이 전하는 바에 따르면 SCP-XXX-KO 당신이 황제(黃帝)나 신농(神農)과 동시대를 살았다고 증언하는 자료이니 말입니다. 그것까지도 전적으로 꾸며낸 날조라고 할 수는 없지 않겠습니까?

SCP-XXX-KO: 황제 공손헌원(公孫軒轅)과 신농(神農)이라… 그 이름을 혀에 담아본 것이 도무지 셈할 수가 없구나…

이문원 박사: 당신이 그 존재들과 동시대 사람이었던 것이 맞습니까?

SCP-XXX-KO: (잠깐의 침묵) …그렇다.

(SCP-XXX-KO가 말을 하려는 듯 하지만, 한동안 대화가 진행되지 않는다.)

SCP-XXX-KO: 지금까지, 나는 그대들이 묻는 바에 진실되이 답하였다. 거짓을 뱉고자 하는 뜻은 추호도 없다. 이번에는 무엇을 묻고 싶은가.

이문원 박사: SCP 재단은 지금으로부터 수십 세기도 더 전에 다수의 변칙성, 변칙개체가 개입된 대전쟁이 동아시아 지역에서 일어났음을 알고 있습니다. 저희가 확보한 정보에 따르면 '삼황오제'라고 일컫는 이들이 그 전쟁에서 싸웠다고 알고 있습니다. 당신이 그 전쟁의 참전자라는 것이지요.

SCP-XXX-KO: 내가 갓 어린아이의 티를 벗자마자, 전쟁터에 끌려가 괴이(怪異)를 부리는 이들, 그 자체가 괴이인 이족(異族)과 싸워야 했다. 내 삶은 전사였고, 또 그 전사들을 이끄는 군주였다. 누구와 어떻게 싸웠는지, 그 모든 이야기를 원한다면 해 줄수는 있다. 하지만 그대들의 습성으로 보아하건대, 모든 이야기를 듣기에는 그대들의 시간이 촉박하지 아니한가.

이문원 박사: 잘 아시는군요(웃음). 지금은 해산되어서 없어진 기동특무부대가 지금의 북한, 삼지연이라는 곳에서 발견한 것입니다. 이 언어는 지금까지 알려진 인류의 언어와도 일치하지 않고, 당신이 쓰는 말과도 일치하지가 않더군요. 번역을 시도했지만 지금까지는 이 불완전한 조각을 얻어내는 게 한계였습니다.

아이들의 일과 나날에서 [슬프다?]일이 여럿 일어났으되, 그 중 [두렵다? 증오하다?] 하는 일은 하늘이 [일그러지다? 갈라지다?] 하였을 때이다. [손상되어 판독 불가능] 하였을 때 많은 아이들이 [쓰러지다? 묻히다?] 하였으며 살아남은 자들 중 눈물 흘리지 않는 이들이 없었다.

북한 삼지연 지역에서 발견된 변칙적인 기록물. 기동특무부대 세타-120¹이 발견함.

[슬프다?]가 지나가고 난 뒤 우리는 처음으로 우리 바깥의 [무리? 사람?]을 [칭송하다? 경외하다?]하게 되었다. 우리는 여럿을 잃었으되 [손상되어 판독 불가능] 였으므로 [이하 내용 상당수 소실됨]

아아, 그러나 우리는 바깥의 [무리? 사람?]들의 눈빛이 변했음을 알아차리지 못하였다. 이는 우리가 [눈물? 비탄?]에 가득차서 시야가 흐려졌기 때문이리라. 아이들은 예전부터 바깥의 [무리? 사람?]들을 여러 번 대면한 적 있었고 그들도 우리를 [알다? 보다?] 하였다. 하지만 [슬프다?] 이전에 그들이 우리를 대하는 것은 그저 뭇 [동물?]이나 이방인을 대하는 것과 다르지 않았으나, 그 후에는 저자들이 우리를 [대접하다? 응답하다?] 하는 것이 마치 적을 대하는 것과 같았기 때문이다.

그들에게는 [미워하다?]가 많다. 그들을 해치는 [동물?]들도 많았으며 서로 [싸우다?] 하는 일도 잦았으니. 하지만 우리를 보는 시선은 그보다 더 [끔찍하다?} [두렵다? 증오하다?] 였으며 서로 죽이가다고 우리를 [마주하다?] 하면 [함께하다? 손을 잡다?] 하였다. 그 때부터 아이들은 바깥의 [무리? 사람?]들과 [이하 내용 상당수 소실됨]

그 날의 [두렵다? 증오하다?]일이 아니었다면 우리는 능히 새로운 적을 무찌를 수 있었겠으나, 아이들을 많이 잃은 까닭에 그들은 쉬이 [침략하다?] 할 수 있었다. [부끄럽다? 치욕?] 으로 우리는 그들에게 [땅? 집?]을 [주다?] 하고 그림자 속에 [굽히다? 무릎꿇다?] 할 수밖에 없었다.

SCP-XXX-KO: 성성(猩猩)들이 쓴 것이로군, 나는 이것이 성성이들이 쓰던 글자였던 것만을 알 뿐이었다. 그대들은 이 글자들의 뜻을 약간이라도 알아볼 수 있나 보군.

이문원 박사: 알아보시는군요. 당신이 '성성'이라고 부르는 종족들을 저희는 SCP-1000라고 부릅니다. 이 변칙적 생물종과 고대 인류가 지구 전역에서 싸웠던 흔적을 '빅풋 음모론'이라고 치부해 은폐하는 작업에 한동안 제가 종사했던 적 있습니다. 이것 참, 쓸데없는 이야기가 자꾸 늘어지는군요. 당신이 입을 여는 일이 워낙 없다 보니, 제 이야기가 더 길어지는 것 같군요.

SCP-XXX-KO: (침묵)

이문원 박사: 여하간 재단이 묻고 싶은 것은 이렇습니다. 당신은 SCP-1000 집단과의 싸움에 참전했습니까?

SCP-XXX-KO: 묻는다니 답하겠다. 그렇다.

Footnotes

1. 북한 지역에 잠입하여 변칙성을 탐사 및 확보, 격리하는 임무를 수행하는 기동특무부대. 현재 해산됨

---

• • _
  비평・댓글비평・댓글

  
  댓글 투고 폼

  댓글란 맨 위로

  - hide block

ERROR

The Crssk's portal does not exist.

오류:	Crssk 사용자의 포털 페이지가 존재하지 안습니다. 이용 안내를 참조해 포털 페이지를 작성하세요.

이용 안내

1. portal:crssk ( 16 Aug 2020 06:57 )