body {
    font-family: 'Inter', 'KoPub Dotum', sans-serif;
    background-color: #ffffff;
    color: #000000;
    max-width: 700px;
    margin: 20px auto;
    padding: 10px 20px;
    line-height: 1.5;
}

a {
    color: #0000EE;
    cursor: pointer;
}
a:visited {
    color: #551A8B;
}

h1 {
    text-align: center;
    font-size: 1.6em;
    margin-bottom: 2px;
}

.subtitle {
    text-align: center;
    font-size: 0.85em;
    margin-bottom: 3px;
}

.nav-bar {
    text-align: center;
    margin: 10px 0;
    font-size: 0.9em;
}

/* Nav items are real <a href> so they are crawlable and keyboard-focusable,
   but keep the original flat look: no underline, no visited-purple. */
.nav-bar a,
.nav-bar a:visited {
    margin: 0 6px;
    color: #0000EE;
    text-decoration: none;
}

.nav-bar a:hover {
    text-decoration: underline;
}

.nav-sep {
    color: #999;
}

/* Secondary, in-page nav (Research topics, Playground years) */
.sub-nav {
    text-align: center;
    margin: 8px 0;
    font-size: 0.9em;
}

.sub-nav a {
    margin: 0 6px;
}

/* Anchor targets shouldn't sit flush against the viewport top */
[id] {
    scroll-margin-top: 12px;
}

.separator {
    text-align: center;
    margin: 10px 0;
    letter-spacing: 8px;
}

.nav-list {
    list-style-type: disc;
    padding-left: 30px;
}

.nav-list li {
    margin: 4px 0;
}

.news-item {
    margin: 4px 0;
}

/* Leading date gets its own column so the text lines up.
   Scoped to :first-child so <b> used inside the text is unaffected. */
.news-item b:first-child {
    display: inline-block;
    min-width: 6.4em;
    margin-right: 6px;
}

.section-title {
    font-weight: bold;
    font-size: 1.1em;
    margin-top: 15px;
    margin-bottom: 5px;
}

table {
    border-collapse: collapse;
    margin: 8px 0;
    width: 100%;
}

table td, table th {
    padding: 3px 8px;
    text-align: left;
    vertical-align: top;
}

th {
    border-bottom: 1px solid #000;
}

.pub-card {
    border: 1px solid #000;
    padding: 10px 14px;
    margin: 10px 0;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.pub-card img, .pub-card .pub-placeholder {
    width: 120px;
    min-width: 120px;
    height: auto;
    border: 1px solid #ccc;
}

.pub-card .pub-placeholder {
    height: 80px;
    border: 1px dashed #ccc;
}

.pub-card .pub-text {
    flex: 1;
}

.pub-links {
    display: inline;
    margin-left: 4px;
}

.pub-links a {
    display: inline-block;
    font-size: 0.8em;
    font-weight: bold;
    border: 1px solid #000;
    padding: 1px 8px;
    margin-right: 4px;
    color: #000;
    text-decoration: none;
}

.pub-links a:hover {
    background: #000;
    color: #fff;
}

/* Section title with a right-aligned note on the same baseline.
   The note is a sibling, not a child, of .section-title so it keeps its own
   size and weight instead of inheriting the title's bold 1.1em. */
.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 12px;
}

.pub-note {
    font-size: 0.85em;
    color: #555;
    margin-left: auto;
}

.pub-fold {
    margin: 10px 0;
}

.pub-fold summary {
    cursor: pointer;
    font-size: 0.9em;
    color: #555;
}

.pub-fold summary:hover {
    color: #000;
}

/* Project Cards */
.project-card {
    border: 1px solid #000;
    padding: 12px 16px;
    margin: 12px 0;
}

.project-card .card-title {
    font-weight: bold;
    font-size: 1.05em;
    margin-bottom: 4px;
}

.project-card .card-meta {
    font-size: 0.85em;
    color: #555;
    margin-bottom: 6px;
}

.project-card .card-desc {
    margin-bottom: 6px;
}

.project-card .card-pubs {
    font-size: 0.9em;
}

.project-card .card-pubs a {
    margin-right: 4px;
}

/* Publication project tag */
.pub-project {
    font-size: 0.85em;
}

/* Contact address rendered as vector outlines (see _tools/make_email_svg.py),
   so it carries no harvestable text. Scales with the surrounding type. */
.email-img {
    height: 1em;
    width: auto;
    vertical-align: -0.13em;
}

.logo-stroke {
    display: block;
    margin: 20px auto 0;
    max-width: 320px;
    opacity: 0.35;
}

.footer {
    text-align: center;
    margin-top: 10px;
    font-size: 0.85em;
    color: #555;
}

/* Research figures. .fig-placeholder marks a figure that is not drawn yet. */
.fig {
    margin: 14px 0;
}

.fig img {
    display: block;
    width: 100%;
    border: 1px solid #ccc;
}

.fig-placeholder {
    border: 1px dashed #999;
    background: #fafafa;
    color: #777;
    font-size: 0.85em;
    line-height: 1.7;
    padding: 26px 18px;
    text-align: center;
}

.fig figcaption {
    font-size: 0.85em;
    color: #555;
    margin-top: 5px;
}

/* Live figure: the static <img> is replaced by an <svg> that redraws itself. */
.fig svg.fig-live {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #ccc;
    cursor: grab;
    touch-action: pan-y;          /* horizontal drag rotates, vertical scrolls */
}

.fig svg.fig-live:active {
    cursor: grabbing;
}