@font-face{font-family:Pretendard;src:url("./PretendardVariable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Plate Serif";src:url("./plate-serif.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
:root {
  --plum:#492238; --ink:#2d232a; --rose:#a84560; --paper:#faf8f5; --plate:#e9dfdf; --rule:#d5c9cb;
  font-family:Pretendard,"Malgun Gothic",sans-serif; color-scheme:light; scroll-padding-top:83px; -webkit-text-size-adjust:100%;
}
*,*::before,*::after {box-sizing:border-box}
html {scroll-behavior:smooth}
body {margin:0;background:var(--paper);color:var(--ink);line-height:1.55;word-break:keep-all;-webkit-font-smoothing:antialiased}
img {display:block;max-width:100%}
a {color:inherit;text-decoration:none}
button,input,select,textarea {font:inherit;color:inherit}
button,select {cursor:pointer}
a,button,input,select,summary {-webkit-tap-highlight-color:transparent}
:focus-visible {outline:2px solid #a53b5d;outline-offset:4px}
::selection {background:#d7b9c3;color:#36162c}
.wrap {width:min(1240px,calc(100% - 112px));margin-inline:auto}
.skip {position:fixed;z-index:90;left:12px;top:8px;transform:translateY(-150%);padding:8px 18px;background:var(--plum);color:white}
.skip:focus {transform:none}
.mast {position:sticky;z-index:20;top:0;background:#fffdfa;border-bottom:1px solid rgba(84,54,63,.18)}
.navrow {display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px}
.brand {display:inline-flex;align-items:center;gap:8px;flex-shrink:0;color:#442338;font:670 25px/1 Pretendard,Arial,sans-serif;letter-spacing:-.064em}
.brand img {width:37px;height:37px}
.brand > span span {font-weight:840}
.mast nav {display:flex;align-items:center;gap:clamp(18px,2.9vw,45px);margin-left:auto;margin-right:clamp(14px,3.7vw,58px)}
.mast nav a {padding:12px 0;line-height:1;font-size:14px;font-weight:600;letter-spacing:-.025em}
.mast nav a:hover,.ink-link:hover,.footer-links a:hover {text-decoration:underline;text-underline-offset:5px}
.nav-actions {display:flex;align-items:center;gap:8px}
.nav-apply,.primary-link {display:inline-flex;gap:17px;align-items:center;justify-content:center;color:#fffafa;background:var(--plum);padding:12px 17px;border:1px solid var(--plum);border-radius:2px;font-size:13px;font-weight:620;letter-spacing:-.02em;line-height:1.15}
.nav-apply span,.primary-link span,.ink-link span {font-family:Arial,sans-serif;font-weight:400}
.nav-apply:hover,.primary-link:hover {background:#67324d}
.menu-toggle {display:none;place-items:center;border:0;background:transparent;height:40px;width:40px;padding:9px}
.menu-toggle svg {width:22px;height:22px}
.cover {position:relative;isolation:isolate;overflow:hidden;background:var(--plate);color:#36212d}
.cover-page {position:relative;display:grid;grid-template-columns:minmax(0,54fr) minmax(0,46fr);align-content:center;min-height:clamp(464px,36vw,548px);padding:40px 0}
.cover-heading,.cover-reading {position:relative;grid-column:1;z-index:2}
.cover-kicker {display:flex;align-items:center;gap:10px;margin:0 0 17px;color:#6d344c;font-size:13px;font-weight:670;letter-spacing:.025em}
.cover-kicker > span {position:relative;width:26px;height:1px;background:#8c5364}
.cover-kicker > span::before {content:"";position:absolute;left:0;top:-3px;height:7px;width:1px;background:inherit}
.cover-kicker b {font:400 11px/1 ui-monospace,monospace;color:#ad8793}
.cover h1 {margin:0;font-family:"Plate Serif",Georgia,serif;font-size:clamp(50px,4.95vw,76px);font-weight:510;line-height:1.16;letter-spacing:-.078em}
.cover h1 em {display:inline-block;padding-right:.06em;color:#803751;font-family:Georgia,"Times New Roman","Plate Serif",serif;font-weight:400;line-height:.78;letter-spacing:-.075em}
.cover-reading {margin-top:22px}
.cover-example {max-width:515px;border-left:1px solid #ae8391;padding-left:14px}
.cover-example p {margin:0}
.cover-example-type {color:#815267;font-size:11px;font-weight:650;line-height:1.4}
.cover-example .cover-example-question {margin:4px 0;font-size:clamp(17px,1.38vw,21px);font-weight:610;line-height:1.4;letter-spacing:-.04em}
.cover-example-facts {color:#66525c;font-size:14px;line-height:1.55;letter-spacing:-.025em}
.cover-actions {display:flex;align-items:center;flex-wrap:wrap;gap:16px 25px;margin-top:24px}
.primary-link {min-height:48px;padding:13px 20px;font-size:14px}
.primary-link span {font-size:18px;line-height:1}
.ink-link {display:inline-flex;align-items:center;gap:8px;color:#56273e;font-size:14px;font-weight:650;letter-spacing:-.03em}
.ink-link span {font-size:17px}
.cover-art {position:absolute;display:grid;grid-template-rows:minmax(0,1fr) auto;top:19px;bottom:16px;left:51%;right:-2vw;margin:0;pointer-events:none}
.cover-art img,.cover-art video {width:100%;height:100%;object-fit:contain}
.cover-art figcaption {justify-self:end;display:flex;align-items:center;gap:9px;padding-top:3px;color:#754658;font-size:10px;font-weight:550;letter-spacing:.015em}
.cover-art figcaption > span:last-child {display:flex;gap:8px;align-items:baseline}
.cover-art figcaption i {font:italic 14px/1 Georgia,"Times New Roman",serif;color:#5a2d42}
.plate-cross {position:relative;width:11px;height:11px;display:block}
.plate-cross::before,.plate-cross::after {content:"";position:absolute;top:50%;left:50%;width:11px;height:1px;background:currentColor;transform:translate(-50%,-50%)}
.plate-cross::after {width:1px;height:11px}
.atlas-rail {border-top:1px solid #c7b8bd}
.atlas-shelf {display:grid;grid-template-columns:clamp(93px,9.3vw,145px) minmax(0,1fr);align-items:center;gap:20px}
.atlas-shelf-head h2 {margin:0 0 5px;font-size:17px;font-weight:670;line-height:1.3;letter-spacing:-.04em}
.atlas-index {color:#896e79;font:11px/1.3 ui-monospace,monospace}
.atlas-index b {color:#4d2339;font-weight:650}
.atlas-plates {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:0;min-width:0;gap:0;margin:0;padding:0}
.atlas-plates label {position:relative;display:grid;grid-template-rows:minmax(50px,70px) auto;align-content:center;justify-items:center;gap:5px;min-width:0;padding:9px 4px 10px;cursor:pointer;scroll-snap-align:start}
.atlas-plates label::before {content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;background:#cfbfc4}
.atlas-plates label::after {content:"";position:absolute;bottom:0;left:14%;right:14%;height:2px;background:transparent}
.atlas-plates label:has(input:checked)::after {background:#72314f}
.atlas-plates input {position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)}
.atlas-plates label:has(input:focus-visible) {outline:2px solid #8f425f;outline-offset:-3px}
.atlas-plates img {width:100%;height:100%;object-fit:contain;transition:transform .15s}
.atlas-plates label:hover img {transform:translateY(-2px)}
.atlas-plates label > span {display:inline-flex;align-items:center;gap:5px;color:#674f5d;font-size:13px;font-weight:570;line-height:1.25;white-space:nowrap}
.atlas-plates label > span::before {content:"";width:4px;height:4px;background:transparent}
.atlas-plates label:has(input:checked) > span {color:#51233c;font-weight:730}
.atlas-plates label:has(input:checked) > span::before {background:#83415d}
.atlas-rail-controls {display:none}
.atlas-rail-controls button {display:grid;place-items:center;width:39px;height:34px;padding:0;border:1px solid #bfaab1;border-radius:0;background:transparent;color:#542c42;font-size:16px}
.atlas-rail-controls button + button {border-left:0}
.observations {background:#482236;color:#f5e6e9}
.observations-row {display:grid;grid-template-columns:minmax(180px,.77fr) minmax(0,2.75fr);align-items:center;gap:clamp(30px,6vw,97px);padding-block:21px}
.obs-legend > div {display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.obs-legend strong {font-size:14px;font-weight:650;letter-spacing:-.02em}
.obs-legend time {font:10px/1.4 ui-monospace,monospace;color:#dcbbc5;letter-spacing:0}
.obs-legend > span {display:inline-flex;align-items:center;gap:7px;color:#ddc6cd;font-size:11px}
.obs-legend i,.obs-dots i {flex:0 0 auto;display:block;width:8px;height:8px;border:1px solid #e2bfca;border-radius:50%}
.obs-legend i {width:7px;height:7px}
.obs-engines {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;margin:0;padding:0}
.obs-engines li {display:grid;gap:8px;align-content:center;justify-items:start;padding-block:1px;padding-left:clamp(18px,2.3vw,36px);border-left:1px solid #755267}
.obs-name {font:500 14px/1.2 Pretendard,Arial,sans-serif;letter-spacing:.025em}
.obs-dots {display:flex;gap:clamp(5px,.64vw,10px)}
@media(max-width:1050px) {
  .wrap {width:calc(100% - 72px)}
  .cover-page {min-height:454px;padding-block:35px}
  .cover h1 {font-size:clamp(40px,5.1vw,55px)}
  .cover-example {max-width:420px}
  .obs-dots {gap:5px}
  .observations-row {gap:20px}
}
@media(max-width:820px) {
  .navrow {height:62px}
  .mast nav {display:none;position:absolute;top:100%;left:0;right:0;margin:0;padding:8px 36px 13px;background:#fffdfa;border-bottom:1px solid var(--rule);box-shadow:0 14px 24px rgb(49 28 41 / 8%)}
  .mast.menu-open nav {display:grid;gap:0}
  .mast nav a {padding:12px 0}
  .menu-toggle {display:grid}
  .cover-page {min-height:405px}
  .cover h1 {font-size:clamp(34px,5.1vw,43px)}
  .cover-kicker {font-size:11px;margin-bottom:17px}
  .cover-reading {margin-top:19px}
  .cover-example-facts {font-size:13px}
  .atlas-shelf {grid-template-columns:76px 1fr;gap:8px}
  .atlas-shelf-head h2 {font-size:14px}
  .atlas-plates label {grid-template-rows:53px auto}
  .atlas-plates label > span {font-size:11px}
  .cover-actions {gap:16px;margin-top:19px}
  .primary-link {min-height:44px;padding:11px 13px;font-size:13px;gap:9px}
  .ink-link {font-size:13px}
  .observations-row {grid-template-columns:auto 1fr;gap:18px}
  .obs-legend > div {display:block}
  .obs-legend time {display:block}
  .obs-engines li {padding-left:12px}
  .obs-dots {gap:4px}
  .obs-dots i {width:6px;height:6px}
}
@media(max-width:610px) {
  :root {scroll-padding-top:70px}
  .wrap {width:calc(100% - 40px)}
  .navrow {height:59px;gap:5px}
  .brand {font-size:21px;gap:5px}
  .brand img {width:31px;height:31px}
  .nav-actions {gap:1px}
  .nav-apply {padding:9px 10px;font-size:12px;gap:7px}
  .menu-toggle {width:32px;padding:6px}
  .mast nav {padding-inline:20px}
  .cover-page {display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:23px 0}
  .cover-kicker {margin-bottom:11px}
  .cover h1 {font-size:clamp(32px,8.6vw,48px);line-height:1.15}
  .cover-art {position:static;display:block;align-self:end;width:88%;margin:13px 0 0}
  .cover-art img,.cover-art video {width:100%;height:clamp(146px,39vw,218px);object-position:right center}
  .cover-art figcaption {justify-content:flex-end;padding-top:2px;gap:5px;font-size:9px}
  .cover-art figcaption i {font-size:11px}
  .plate-cross {transform:scale(.72)}
  .cover-reading {margin-top:11px}
  .cover-example {max-width:34em;padding-left:10px}
  .cover-example .cover-example-question {font-size:15px;line-height:1.4;margin-block:2px}
  .cover-example-facts {font-size:12px;line-height:1.45}
  .cover-actions {margin-top:17px;gap:18px}
  .atlas-shelf {display:block}
  .atlas-shelf-head {display:flex;align-items:center;justify-content:space-between;padding-top:8px;gap:12px}
  .atlas-shelf-head > div:first-child {display:flex;align-items:baseline;gap:9px}
  .atlas-shelf-head h2 {margin:0}
  .atlas-rail-controls:not([hidden]) {display:flex}
  .atlas-plates {display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#b999a3 transparent;margin-right:-10px}
  .atlas-plates label {flex:0 0 clamp(74px,21vw,100px);grid-template-rows:50px auto;gap:2px;padding:4px 3px 9px}
  .atlas-plates label:first-child::before {display:none}
  .observations-row {display:block;padding:16px 0 17px}
  .obs-legend,.obs-legend > div {display:flex;align-items:baseline;gap:8px}
  .obs-legend {justify-content:space-between}
  .obs-legend strong {font-size:12px}
  .obs-legend > span {font-size:10px}
  .obs-engines {margin-top:13px}
  .obs-engines li {padding-left:9px;gap:6px}
  .obs-engines li:first-child {padding-left:0;border:0}
  .obs-name {font-size:11px}
  .obs-dots {gap:clamp(2px,.7vw,5px)}
  .obs-dots i {width:6px;height:6px}
}
@media(max-width:365px) {
  .wrap {width:calc(100% - 28px)}
  .brand {font-size:19px}
  .obs-dots {gap:2px}
  .cover-art {width:88%}
}
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  *,*::before,*::after {transition-duration:0s!important;animation-duration:0s!important}
}