/* @import url('https://waps.l3s.uni-hannover.de/live/cs_/https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&display=swap'); */
@import url('https://waps.l3s.uni-hannover.de/live/cs_/https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Nanum+Myeongjo&display=swap');

:root {
    --link-color: blue;
    --link-visited: var(--link-color);
    --link-active: red;
    --line-height: 1.3em;
    --body-margin: 2em;
    --monospace: 'Atkinson Hyperlegible Mono', monospace;
    --monospace-size: 13px;
}

body {
    margin: var(--body-margin);
    font-size: 16px;
    text-align: justify;
    font-family: 'Times', 'Times New Roman', 'Nanum Myeongjo', serif;
    line-height: var(--line-height);
}
*[lang=ko] {
    font-size: 15px;
    line-height: 1.6em;
}

h1, h2, h3, h4, h5, h5 {
    line-height: var(--line-height);
}

a, button {
    text-decoration: none;
    color: var(--link-color);
    cursor: pointer;
}
a:visited {
    color: var(--link-visited);
}
a:active, button:active {
    color: var(--link-active);
}
a:hover, button:hover {
    text-decoration: underline;
}
a:not(:has(img))[target="_blank"]::after {
    content: "↪";
    color: red;
    background: yellow;
}

button {
    font-family: inherit;
    font-size: inherit;
}

details summary {
    cursor: pointer;
    border: 1px dotted transparent;
}
details summary:hover,
details[open] summary {
    border-color: lightgray;
}
details[open] summary {
    font-style: italic;
}

img {
    max-width: 100%;
    height: auto;
}
figure {
    position: relative;
    margin: 0;
    line-height: 0;
}
figure figcaption {
    display: none;
}
figure:hover figcaption {
    padding: 5px;
    box-sizing: border-box;
    line-height: var(--line-height);
    width: max-content;
    max-width: min(calc(100% - 3em), 20em);
    background: var(--link-color);
    color: white;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    pointer-events: none;
}

ul {
    padding: 0;
}
li {
    list-style-position: inside;
    list-style-type: "· ";
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}

.monospace,
header,
a::after,
figure:hover figcaption {
    font-family: var(--monospace);
    font-size: var(--monospace-size);
}