:root{color-scheme:light;--paper:#f5efe4;--ink:#202521;--accent:#254c41;--line:#cfc4b3}
*{box-sizing:border-box}body{margin:auto;background:var(--paper);color:var(--ink);font:1rem/1.65 system-ui,sans-serif;padding:clamp(.9rem,3vw,2rem)}a{color:var(--accent);text-underline-offset:.2em}a:focus-visible,button:focus-visible{outline:3px solid #9a4126;outline-offset:3px}nav{display:flex;flex-wrap:wrap;gap:.6rem 1rem}button,.action{display:inline-flex;align-items:center;min-height:44px;padding:.45rem .8rem;border:1px solid var(--accent);background:#fffaf0;color:var(--accent);font:inherit;border-radius:.3rem;cursor:pointer}.primary,button[aria-pressed=true]{background:var(--accent);color:#fff}.site-footer{margin-top:2rem;padding-block:1.2rem;border-top:1px solid var(--line)}.site-footer a{display:inline-block;margin:.3rem .75rem .3rem 0}.catalog{max-width:70rem}.masthead{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;padding-block:.6rem;border-bottom:1px solid var(--line)}.brand{font-family:Georgia,serif;font-weight:700;font-size:1.3rem;text-decoration:none}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(1rem,4vw,3rem);align-items:center;margin:1.5rem 0 2rem;padding:clamp(1rem,4vw,3rem);background:#e6e9d9;border:1px solid var(--line)}.hero h1{font-family:Georgia,serif;font-size:clamp(2rem,5vw,4rem);line-height:1.15;margin:.35em 0}.hero p{max-width:32rem}.hero img{width:100%;max-height:30rem;object-fit:cover;border-radius:.4rem}.hero .action{margin:.4rem .3rem .2rem 0}.filters{display:flex;flex-wrap:wrap;gap:.5rem}.catalog ol{padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:1rem}.catalog li{background:#fffaf0;border:1px solid var(--line)}.catalog li a{display:block;text-decoration:none}.catalog li img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}.catalog li span,.catalog li small{display:block;padding:.4rem .75rem}.catalog li small{color:#535b50}.reader{max-width:43rem}.reader header p{margin:.3rem 0}.reader .actions{display:flex;flex-wrap:wrap;gap:.35rem;margin-block:.5rem}.reader main{font-size:1.125rem;overflow-wrap:anywhere}.reader main.large{font-size:2.25rem}.reader h1{font-family:Georgia,serif;font-size:1.65em;line-height:1.18}.reader figure{margin:0 0 1.35em;border:1px solid var(--line);background:#fffaf0}.reader figure img{width:100%;height:auto;display:block}.reader figcaption{padding:.65em .85em}.reader details{padding:1em;border:1px solid var(--line);background:#fffaf0;margin-block:1em}.reader summary{cursor:pointer;font-weight:700}.reader dt{font-weight:700}.reader dd{margin:0 0 .65em}.next{display:flex;gap:.5rem;flex-wrap:wrap;margin-block:1.5rem}.progress{position:fixed;inset:0 auto auto 0;width:0;height:3px;background:#376b57;z-index:2}@media(max-width:40rem){.hero{grid-template-columns:1fr}.hero img{max-height:17rem}.catalog ol{grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr))}}
html[lang=ko] h1{word-break:keep-all;overflow-wrap:anywhere}
/* Artwork sets the page rhythm. Controls use the same restrained ink and paper. */
:root{--paper:#f8f3e9;--ink:#24231e;--accent:#27473d;--line:#d7cbbb}
.brand{color:#262f29;font-size:1.25rem}.masthead{min-height:58px;align-items:center}
.language-menu{position:relative;z-index:4;padding:0!important;margin:0!important;border:0!important;background:transparent!important}
.language-menu summary{display:flex;align-items:center;gap:.35rem;min-height:44px;padding:.3rem .6rem;list-style:none;font-weight:650;cursor:pointer}
.language-menu summary::after{content:"▾";font-size:.75em}.language-menu summary::-webkit-details-marker{display:none}
.language-menu nav{position:absolute;right:0;top:100%;min-width:10rem;display:grid;gap:0;background:#fffaf1;border:1px solid var(--line);box-shadow:0 8px 24px #211d151a;padding:.25rem}
.language-menu nav a{min-height:44px;display:flex;align-items:center;padding:.35rem .6rem;text-decoration:none}
.language-menu nav [aria-current]{background:#e2e9e2;font-weight:750}
.hero{position:relative;isolation:isolate;background:#262e28;color:#fff8e8;border:0;display:grid;grid-template-columns:.95fr 1.05fr;gap:0;padding:0;align-items:stretch;margin:1.15rem 0 2.2rem}
.hero .hero-copy{align-self:center;padding:clamp(1.2rem,4vw,3.5rem);min-width:0}
.hero .eyebrow,.edition{font-size:.85rem;font-weight:680;letter-spacing:.035em}
.hero .eyebrow{color:#e9c897;margin:0 0 .55rem}.hero h1{font-size:clamp(2.1rem,5vw,4.35rem);margin:.15em 0 .3em}
.hero .primary{color:#252c24;background:#f1d29c;border-color:#f1d29c;font-weight:750;text-decoration:none}
.hero .action:not(.primary){background:transparent;color:#fff8e8;border-color:#b5ad98;text-decoration:none}
.hero img{height:100%;min-height:19rem;max-height:31rem;aspect-ratio:5/4;border-radius:0;object-position:center 46%}
.filters button{border-radius:2rem;padding-inline:.9rem}.catalog li{background:transparent;border:0;border-bottom:1px solid var(--line)}
.catalog li a{color:var(--ink)}.catalog li img{aspect-ratio:4/3}.catalog li span{padding:.55rem .15rem 0;font-weight:700;line-height:1.35}.catalog li small{padding:.15rem .15rem .65rem}
.reader{max-width:45rem}.reader .masthead{margin-bottom:.6rem}.reader .actions{gap:.7rem;margin:0}
.reader .actions button{padding:.3rem .1rem;background:transparent;border:0;text-decoration:underline;text-underline-offset:.2em}
.reader .actions button[aria-pressed=true]{color:#fff;background:var(--accent);padding-inline:.45rem}
.reader h1{margin:.55em 0 .65em;font-size:clamp(1.8rem,5vw,2.75rem)}.reader main.large h1{font-size:1.5em}
.reader .edition{color:#575347;margin:.25rem 0}.reader figure{border:0;background:transparent;margin-bottom:1.5rem}.reader figcaption{padding:.55em .2em .05em;line-height:1.65}
.reader .next{padding:.65rem 0;border-block:1px solid var(--line);margin:1rem 0}.next .action{text-decoration:none}
.hanja-reading{color:#465e53;font-size:.92em}
.site-footer{font-size:.95rem}.site-footer h2{font-size:1rem}.site-footer a{min-height:44px;display:inline-flex;align-items:center}
@media(max-width:40rem){.hero{grid-template-columns:1fr}.hero img{grid-row:1;min-height:0;height:auto;max-height:13rem;aspect-ratio:2/1;object-position:center 43%}.hero h1{font-size:clamp(1.85rem,7.6vw,2.55rem)}.hero .hero-copy{padding:1rem}.hero .action{margin:.3rem .25rem 0 0}.reader{padding-inline:.8rem}.reader figure img{width:calc(100% + 1.6rem);max-width:none;margin-inline:-.8rem}.reader .masthead{min-height:49px}.reader .actions{margin-top:.1rem}.catalog ol{gap:.75rem}.hero .eyebrow{margin:0}}
.reader main{max-width:35rem;margin:auto}.reader .next{align-items:center}.next .up-next{display:flex;gap:.65rem;align-items:center;flex:1 1 13rem}.next .up-next img{width:3.5rem;height:3rem;object-fit:cover;border-radius:.2rem}.next .up-next span{line-height:1.25}.next .up-next small{display:block;font-size:.75em;margin-bottom:.2rem}.reader .notes{padding:1em;border-left:3px solid #a17d56;background:#fffaf1;margin:1.35rem 0}.reader .notes h2{font-size:1.06em;margin:0 0 .5em}.reader .notes dd{margin-bottom:.8em}.reader .notes .source-link{display:inline-block;margin:.3em 0 .7em}.site-footer .follow-links{display:flex;flex-wrap:wrap;gap:.15rem .6rem}.site-footer .follow-links a{margin:0}.site-footer .destination{border-top:1px solid var(--line);margin:.4rem 0 0}.reader .edition{max-width:35rem;margin-inline:auto}.reader .actions{max-width:35rem;margin-inline:auto}.catalog li small{color:#4d554a}.reader .language-menu{margin-left:auto!important}

.reader .notes .commentary{margin:.55rem 0 0;padding-top:.7rem;border-top:1px solid var(--line)}
.art-credit{margin:.75rem 0 0;color:#575347;line-height:1.4}.art-credit small{font-size:.8125rem}