html {
    --ff-sans: 'IBM Plex Sans KR', sans-serif;
    --ff-mono: 'Fira Code', monospace;
    --c-black: #080808;
    --c-gray: #333333;
    --c-lightgray: #e9e9e9;
    --c-white: #ffffff;
    --c-blue: #00449e;
    color-scheme: light dark;
}

html[data-color-scheme="dark"] {
    --c-black: #fcfcfc;
    --c-gray: #cccccc;
    --c-lightgray: #303134;
    --c-white: #080808;
    --c-blue: #6693db;
    color-scheme: dark light;
}

@media (prefers-color-scheme: dark) {

    html[data-color-scheme="dark"],
    html[data-color-scheme="system"] {
        --c-black: #fcfcfc;
        --c-gray: #cccccc;
        --c-lightgray: #252525;
        --c-white: #080808;
        --c-blue: #6693db;
        color-scheme: dark light;
    }
}

.font-sans {
    font-family: var(--ff-sans);
}

.font-mono {
    font-family: var(--ff-mono);
}

.icon {
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
}

* {
    box-sizing: border-box;
}

::before,
::after {
    box-sizing: inherit;
}

html {
    line-height: 1.3;
}

a,
a:visited {
    color: var(--c-blue);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 1rem;
}

p {
    line-height: 1.6;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

thead {
    background: var(--c-lightgray);
    border-bottom: 1px solid var(--c-black);
}

tbody,
tbody th {
    font-weight: normal;
}

table th {
    text-align: left;
}

table .compact {
    width: 1%;
    white-space: nowrap;
}

tbody tr:hover {
    background: var(--c-lightgray);
}

table th,
table td {
    vertical-align: top;
    padding: 0.2rem 0.6rem;
}

article,
section {
    margin: 0 0 1rem 0;
}

pre,
code,
kbd,
samp {
    font-family: var(--ff-mono);
    font-size: 0.9rem;
}

.nobreak {
    white-space: nowrap;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 50rem;
    margin: 0 auto;
    padding: 1rem 1rem 0 1rem;
    font-family: var(--ff-sans);
    font-size: 16px;
    color: var(--c-black);
    background: var(--c-white);
}

body.noscript .yesscript {
    display: none;
}

body>header {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    margin: 0 0 3rem 0;
    padding: 0.2rem 0;
    background: var(--c-white);
    border-bottom: 1px solid var(--c-black);
}

.logo {
    display: inline;
    font-size: 1rem;
    margin: 0;
}

.logo a {
    color: var(--c-black);
}

.breadcrumbs {
    line-height: 1.3;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
}

.breadcrumbs>* {
    flex-shrink: 0;
}

.breadcrumb-divider {
    margin: 0 0.3rem;
}

.language {
    border: none;
    border-radius: 0.3rem;
    background: var(--c-lightgray);
    color: var(--c-black);
}

.click-to-copy {
    flex-shrink: 0;
    border: none;
    background: none;
    line-height: 1;
    aspect-ratio: 1;
    color: var(--c-black);
    cursor: pointer;
}

.click-to-copy:hover {
    background: var(--c-lightgray);
    border-radius: 50%;
}

.copied {
    display: none;
    position: absolute;
    border: 1px solid var(--c-black);
    padding: 0.3rem;
    right: 0;
    background: var(--c-white);
    font-size: 0.8rem;
}

main {
    flex: 1;
}

.dirlike {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.1rem;
}

.right-content {
    margin-left: auto;
}

body>footer {
    margin: 6rem 0 0 0;
    padding: 0.8rem;
    background: var(--c-lightgray);
    font-size: 0.8rem;
}

body>footer ul {
    display: inline-flex;
    vertical-align: middle;
    list-style: none;
    margin: 0;
    padding: 0;
}

body>footer ul a,
body>footer ul .linklike {
    display: block;
    padding: 0.3rem 0.4rem;
}

.linklike {
    display: inline;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: var(--c-blue);
    cursor: pointer;
}

.linklike:hover {
    text-decoration: underline;
}

.about th[scope="row"] {
    width: 5.2rem;
}

.personal_info ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.about .columns {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
}

.about .personal_info {
    flex-grow: 3;
}

.about .contacts {
    flex-grow: 2;
}

.post figure {
    display: block;
    overflow-x: auto;
    overflow-y: clip;
    margin: 0;
}

.katex {
    font-size: 1.1em !important;
    line-height: 1.0 !important;
}