:root {
  --room: #dfe4eb;
  --room-deep: #cbd3df;
  --paper: rgba(250, 252, 255, .88);
  --paper-solid: #f8fafc;
  --paper-back: #ecf1f9;
  --ink: #141924;
  --muted: #536075;
  --faint: #536075;
  --rule: rgba(65, 77, 96, .32);
  --graphite: #202733;
  --graphite-2: #2b3442;
  --cobalt: #3159d8;
  --magenta: #d94272;
  --magenta-ink: #8d2446;
  --cyan: #269dae;
  --violet: #7357d4;
  --mint: #168d83;
  --shadow: rgba(29, 39, 57, .18);
}

* { box-sizing: border-box; }
html { color-scheme: light; background: var(--room); }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 74% 18%, rgba(255,255,255,.78), transparent 29%),
    linear-gradient(135deg, var(--room) 0 52%, var(--room-deep) 100%);
  font-family: "IBM Plex Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { color: inherit; cursor: pointer; touch-action: manipulation; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; clip: rect(0,0,0,0); overflow: hidden; }
.skip-link { position: fixed; z-index: 300; top: 8px; left: 8px; padding: 10px 14px; color: white; background: var(--graphite); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.atlas-lab { min-height: 100vh; }
.lab-header {
  display: grid;
  grid-template-columns: minmax(310px, 1fr) minmax(540px, 1.6fr);
  align-items: end;
  gap: 34px;
  padding: 24px clamp(24px, 3vw, 50px) 22px;
  border-bottom: 1px solid var(--rule);
  background: rgba(239, 243, 248, .7);
  backdrop-filter: blur(16px);
}
.lab-index { display: block; margin-bottom: 5px; color: var(--cobalt); font-size: .75rem; letter-spacing: .18em; font-weight: 600; }
.lab-brand h1 { margin: 0; font-family: "Gowun Batang", serif; font-size: clamp(2.1rem, 4.4vw, 4rem); line-height: 1.15; font-weight: 700; letter-spacing: -.055em; }
.lab-brand p { margin: 10px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.65; }
.lab-tools { display: grid; grid-template-columns: minmax(240px, 1fr) auto auto; gap: 8px; }
.search-field { display: grid; grid-template-columns: 36px 1fr; align-items: center; border: 1px solid var(--rule); background: rgba(255,255,255,.55); }
.search-field span { text-align: center; color: var(--cobalt); font-size: 1.35rem; }
.search-field input { width: 100%; min-height: 45px; padding: 0 13px 0 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: .9375rem; }
.lab-tools > button { min-height: 45px; padding: 0 16px; border: 1px solid var(--rule); background: rgba(255,255,255,.45); }
.lab-tools > button:hover { background: rgba(255,255,255,.85); }
.lab-tools .primary-action { border-color: var(--graphite); color: white; background: var(--graphite); }
.lab-tools .primary-action:hover { background: var(--cobalt); }

.lab-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: calc(100vh - 122px); }
.thread-index { display: flex; flex-direction: column; padding: 34px 22px 24px; color: #eef3fb; background: linear-gradient(160deg, var(--graphite), #151a22); }
.thread-heading span, .table-head span { font-size: .8125rem; letter-spacing: .1em; color: var(--faint); }
.thread-heading > span { color: #b9c5d8; }
.thread-heading h2 { margin: 7px 0 26px; font-family: "Gowun Batang", serif; font-size: 1.75rem; font-weight: 700; }
.thread-filters { display: grid; }
.thread-filter { position: relative; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; min-height: 53px; padding: 6px 0; border: 0; border-top: 1px solid rgba(255,255,255,.15); color: rgba(241,246,255,.74); background: transparent; text-align: left; }
.thread-filter::after { content: ""; position: absolute; left: 15px; right: -22px; bottom: -1px; height: 1px; background: var(--thread-color); opacity: 0; transform: scaleX(.2); transform-origin: left; transition: opacity .25s, transform .35s; }
.thread-filter:hover, .thread-filter[aria-pressed="true"] { color: white; }
.thread-filter[aria-pressed="true"]::after { opacity: .9; transform: scaleX(1); }
.thread-filter i { width: 25px; height: 25px; border: 5px solid var(--thread-color); border-radius: 50%; box-shadow: inset 0 0 0 3px var(--graphite); }
.thread-filter span { font-size: .9rem; }
.thread-filter small { color: #b9c5d8; font-size: .8125rem; }
.thread-note { margin-top: 34px; }
.thread-sample { display: block; width: 100%; height: 1px; background: linear-gradient(90deg, var(--magenta), transparent); }
.thread-note p { margin: 13px 0 0; color: #b9c5d8; font-family: "Gowun Batang", serif; font-size: .875rem; line-height: 1.75; }
.original-link { margin-top: auto; padding-top: 26px; color: rgba(237,243,252,.76); font-size: .8125rem; text-decoration: none; }
.original-link:hover { color: white; }

.light-table { min-width: 0; padding: 27px clamp(22px, 3vw, 48px) 34px; }
.table-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.table-head h2 { margin: 5px 0 0; font-family: "Gowun Batang", serif; font-size: clamp(1.7rem, 3vw, 2.7rem); font-weight: 700; letter-spacing: -.035em; }
.table-status { display: flex; align-items: center; justify-content: flex-end; gap: 11px; color: var(--muted); font-size: .8125rem; line-height: 1.55; text-align: right; }
.table-status i { width: 42px; height: 1px; background: var(--magenta); }
.table-status #story-count { color: var(--ink); font-weight: 600; }
.specimen-field { position: relative; min-height: 610px; padding: 30px 0 20px; isolation: isolate; overflow-anchor: none; }
.specimen-field::before { content: ""; position: absolute; inset: 0; z-index: -3; background: repeating-linear-gradient(0deg, transparent 0 47px, rgba(77,91,113,.07) 48px), repeating-linear-gradient(90deg, transparent 0 47px, rgba(77,91,113,.07) 48px); mask-image: linear-gradient(to bottom, transparent, black 9%, black 92%, transparent); }
.specimen-field::after { content: "CASE TABLE"; position: absolute; right: 0; top: 10px; z-index: -2; color: rgba(63,77,99,.22); font-size: .58rem; letter-spacing: .23em; }
.relation-threads { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* SVG 본체의 기본 파란 사각형 대신, 키보드 위치는 실제 실의 색으로 표시한다. */
.relation-threads:focus, .relation-threads:focus-visible,
.relation-threads *:focus, .relation-threads *:focus-visible { outline: none; }
.relation-threads, .relation-threads *, .thread-label, .thread-label *,
.specimen button, .specimen a { -webkit-tap-highlight-color: transparent; }
.relation-threads, .specimen-front { -webkit-user-select: none; user-select: none; }
.relation-threads path { fill: none; stroke: rgba(67,80,101,.22); stroke-width: 1; vector-effect: non-scaling-stroke; }
.specimen-field.has-selection .relation-threads path:not(.active):not(.active-under):not(.thread-hit) { opacity: 0; }
.relation-threads path.active-under { stroke: rgba(248,250,252,.94); stroke-width: 6; }
.relation-threads path.active { stroke: var(--magenta); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 2px 5px rgba(80,29,49,.42)); }
.relation-threads path.active.is-drawing { stroke-dashoffset: 1; animation: thread-draw .55s ease-out forwards; }
.relation-threads circle { fill: var(--paper-solid); stroke: var(--magenta); stroke-width: 3; filter: drop-shadow(0 1px 4px rgba(80,29,49,.38)); }
.relation-threads path.thread-hit { stroke: transparent; stroke-width: 28; stroke-linecap: round; pointer-events: stroke; cursor: pointer; }
.relation-threads path.thread-hit:focus,
.relation-threads path.thread-hit:focus-visible { outline: none; stroke: transparent; }
.relation-threads g.is-pinned path.active,
.relation-threads:focus-visible path.active,
.relation-threads g:has(.thread-hit:focus-visible) path.active { stroke: var(--cyan); stroke-width: 3.25; filter: drop-shadow(0 2px 5px rgba(38,157,174,.38)); }
.relation-threads g.is-pinned circle,
.relation-threads:focus-visible circle,
.relation-threads g:has(.thread-hit:focus-visible) circle { stroke: var(--cyan); }
.relation-threads .thread-cue { fill: var(--magenta-ink); stroke: var(--paper-solid); stroke-width: 5px; paint-order: stroke; font-family: "IBM Plex Sans KR", sans-serif; font-size: 17px; font-weight: 600; pointer-events: visiblePainted; cursor: pointer; }
.relation-threads g.is-pinned .thread-cue { visibility: hidden; }
.relation-labels { position: absolute; inset: 0; z-index: 12; pointer-events: none; }
.specimen-field.is-rearranging .relation-threads, .specimen-field.is-rearranging .relation-labels { visibility: hidden; }
.relation-labels:empty { display: none; }
.thread-label { position: absolute; max-width: calc(100vw - 28px); max-height: calc(100dvh - 24px); overflow-y: auto; scrollbar-width: thin; min-width: 0; padding: 14px 16px; border: 1px solid rgba(217,66,114,.7); color: var(--ink); background: var(--paper-solid); box-shadow: 0 12px 26px rgba(29,39,57,.18); font-size: .9375rem; line-height: 1.75; overflow-wrap: anywhere; pointer-events: none; animation: relation-hint-in .16s ease-out both; }
.thread-label[hidden] { display: none; }
.thread-label.is-pinned { pointer-events: auto; cursor: pointer; }
.thread-label:focus { outline: none; }
.thread-label:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--graphite), 0 12px 26px rgba(29,39,57,.18); }
.relation-kicker { display: block; padding-right: 20px; color: var(--magenta-ink); font-size: .8125rem; }
.relation-title { margin: 3px 20px 10px 0; font-size: 1rem; line-height: 1.5; font-weight: 600; word-break: keep-all; }
.note-close { position: absolute; right: 12px; top: 8px; color: var(--magenta-ink); font-size: 1.25rem; }
.relation-detail-pair { margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--rule); color: var(--magenta-ink); font-size: .8125rem; line-height: 1.5; }
.relation-description { margin: 10px 0 0; word-break: keep-all; }
.relation-dismiss-hint { margin: 12px 0 0; padding-top: 8px; border-top: 1px solid var(--rule); color: var(--muted); font-size: .8125rem; line-height: 1.5; }
.thread-instruction { margin: 0 0 10px; color: var(--muted); font-size: .8125rem; line-height: 1.6; }
.connection-go { min-height: 44px; margin-top: 9px; padding: 6px 10px; border: 1px solid var(--rule); color: var(--ink); background: var(--paper-solid); font-size: .8rem; }
.connection-go:hover { border-color: var(--magenta); }
.thread-label .connection-go { width: 100%; text-align: left; }
.specimen.is-located { outline: none; }
.specimen.is-located .specimen-face { border-color: var(--magenta); }
.thread-close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; color: var(--magenta-ink); background: transparent; font-size: 1.25rem; line-height: 1; }
.thread-close:hover { color: var(--ink); background: rgba(217,66,114,.1); }
.thread-label > .thread-close { position: absolute; top: 1px; right: 1px; }
.specimen-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 23px 25px; align-items: stretch; }

.specimen { position: relative; align-self: start; min-width: 0; min-height: 260px; perspective: 1200px; transform: rotate(var(--tilt)); transition: transform .28s ease, filter .28s ease; }
.specimen:nth-child(6n+1) { --tilt: -1.25deg; }.specimen:nth-child(6n+2) { --tilt: .65deg; }.specimen:nth-child(6n+3) { --tilt: -.4deg; }.specimen:nth-child(6n+4) { --tilt: 1deg; }.specimen:nth-child(6n+5) { --tilt: -.7deg; }.specimen:nth-child(6n) { --tilt: .45deg; }
.specimen:hover, .specimen:focus-within { z-index: 4; transform: rotate(0) translateY(-8px); filter: drop-shadow(0 18px 20px var(--shadow)); }
.specimen.is-selected { z-index: 5; transform: none; transition: filter .28s ease; filter: drop-shadow(0 10px 16px rgba(94,39,58,.2)); }
.specimen.is-related { z-index: 5; transform: none; transition: filter .28s ease; filter: drop-shadow(0 8px 13px rgba(94,39,58,.14)); }
.specimen.is-revealed { animation: relation-appear .38s ease-out both; }
.specimen.is-revealed .specimen-face { border-style: dashed; border-color: var(--magenta); }
.specimen.is-returned { z-index: 6; outline: none; }
.specimen.is-returned .specimen-face { border-color: var(--magenta); }
.specimen.is-selected .specimen-face { border-color: var(--magenta); }
.specimen.is-related .specimen-face { border-color: rgba(217,66,114,.72); }
.specimen.is-dimmed { opacity: 1; filter: none; }
.specimen.is-dimmed .specimen-face { box-shadow: 0 4px 10px rgba(44,57,76,.07); }
.relation-tag { position: absolute; z-index: 5; top: -10px; right: 12px; padding: 4px 8px; border: 1px solid var(--magenta); color: var(--magenta-ink); background: var(--paper-solid); box-shadow: 0 3px 8px rgba(39,49,66,.12); font-size: .75rem; letter-spacing: .04em; }
.front-relation-tag { display: flex; align-items: center; gap: 4px; padding: 0 0 0 8px; }
.specimen-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .58s cubic-bezier(.2,.74,.22,1); }
.specimen.is-flipped .specimen-inner { position: relative; min-height: inherit; transform: rotateY(180deg); }
.specimen.is-flipped .specimen-back { position: relative; min-height: inherit; }
.specimen-face { position: absolute; inset: 0; width: 100%; min-height: 100%; padding: 31px 22px 20px; border: 1px solid rgba(95,108,128,.35); color: var(--ink); background: var(--paper); box-shadow: 0 12px 28px rgba(44,57,76,.13); -webkit-backface-visibility: hidden; backface-visibility: hidden; backdrop-filter: blur(9px); text-align: left; }
.specimen-front { display: flex; flex-direction: column; }
.specimen button:focus, .specimen a:focus { outline: none; }
.specimen button:focus-visible, .specimen a:focus-visible { outline: 2px solid var(--graphite); outline-offset: 2px; }
/* 뒤집는 면 바깥의 outline 대신 안쪽 표시로 뒷면 잔상을 방지한다. */
.specimen .specimen-front:focus, .specimen .specimen-front:focus-visible { outline: none; }
.specimen .specimen-front:focus-visible { box-shadow: inset 0 0 0 2px var(--graphite), 0 12px 28px rgba(44,57,76,.13); }
.specimen-back { display: flex; flex-direction: column; transform: rotateY(180deg); background: rgba(236,241,249,.94); }
.specimen-pin { position: absolute; top: 13px; left: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--cobalt); box-shadow: 2px 3px 0 rgba(19,30,51,.24), 0 0 0 4px rgba(49,89,216,.08); }
.specimen[data-format="pair"] .specimen-pin { left: calc(50% - 12px); box-shadow: 18px 0 0 var(--cobalt), 2px 3px 0 rgba(19,30,51,.24), 20px 3px 0 rgba(19,30,51,.24); }
.specimen[data-format="team"] .specimen-pin { box-shadow: -18px 0 0 var(--cobalt), 18px 0 0 var(--cobalt), -16px 3px 0 rgba(19,30,51,.24), 2px 3px 0 rgba(19,30,51,.24), 20px 3px 0 rgba(19,30,51,.24); }
.specimen[data-format="pair"] .specimen-front { border-bottom: 3px double rgba(49,89,216,.38); }
.specimen[data-format="team"] .specimen-front { border-bottom: 3px solid rgba(49,89,216,.3); }
.specimen-code { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .8125rem; letter-spacing: .035em; text-transform: uppercase; }
.specimen-code b { color: var(--muted); font-size: .6875rem; font-weight: 400; letter-spacing: .04em; }
.specimen-code > span { max-width: 65%; text-align: right; letter-spacing: 0; line-height: 1.45; }
.spoiler-badge { align-self: flex-start; margin-top: 10px; padding: 3px 7px; border: 1px solid var(--rule); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.38); font-size: .6875rem; line-height: 1.35; letter-spacing: .02em; }
.specimen h3 { margin: auto 0 14px; font-family: "Gowun Batang", serif; font-size: clamp(1.15rem, 1.75vw, 1.55rem); line-height: 1.38; font-weight: 700; letter-spacing: -.025em; word-break: keep-all; overflow-wrap: normal; line-break: strict; }
.specimen h3 .title-line { display: block; }
.specimen-person { color: var(--muted); font-size: .9375rem; line-height: 1.6; overflow-wrap: anywhere; }
.specimen-person b, .specimen-person > span { display: block; }
.specimen-person b { color: var(--ink); font-weight: 600; }
.specimen-person > span { color: var(--muted); font-size: .8125rem; line-height: 1.55; }
.specimen-turn { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--rule); color: var(--muted); font-size: .8125rem; }
.specimen-turn i { width: 26px; height: 1px; background: var(--magenta); transition: width .25s; }
.specimen-front:hover .specimen-turn i { width: 54px; }
.back-kicker { min-height: 22px; padding-right: 64px; color: var(--magenta-ink); font-size: .8125rem; letter-spacing: .035em; }
.specimen-back .unflip { position: absolute; top: 5px; right: 6px; min-height: 44px; padding: 4px 7px; border: 0; color: var(--muted); background: transparent; font-size: .875rem; }
.specimen-back .unflip:hover { color: var(--cobalt); text-decoration: underline; }
.back-identity { display: grid; gap: 2px; margin: 10px 0 0; font-size: .875rem; line-height: 1.45; overflow-wrap: anywhere; }
.back-identity b { font-weight: 600; }
.back-identity span { color: var(--muted); font-size: .875rem; }
.specimen-summary { margin: 12px 0 14px; font-family: "Gowun Batang", serif; font-size: clamp(1rem, 1.5vw, 1.28rem); line-height: 1.55; overflow-wrap: anywhere; }
.specimen-summary > span, .brief-label { display: block; margin-bottom: 5px; color: var(--magenta-ink); font-family: "IBM Plex Sans KR", sans-serif; font-size: .8125rem; font-weight: 600; letter-spacing: .035em; }
.specimen-brief { margin-top: 12px; padding: 11px 0 3px; border-top: 1px solid var(--rule); }
.specimen-brief ol { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; counter-reset: card-brief; }
.specimen-brief li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 7px; color: var(--ink); font-size: .875rem; line-height: 1.62; overflow-wrap: anywhere; counter-increment: card-brief; }
.specimen-brief li::before { content: counter(card-brief, decimal-leading-zero); color: var(--magenta-ink); font-size: .75rem; font-weight: 600; line-height: 1.9; }
.connection-reason { position: relative; margin: 0; padding: 10px; border: 1px solid var(--rule); color: var(--muted); background: rgba(255,255,255,.35); font-size: .875rem; line-height: 1.65; }
.connection-reason > b { display: block; font-weight: 500; }
.connection-reason > p { margin: 2px 0 0; }
.connection-reason .connection-go { width: 100%; font-size: .75rem; }
.connection-explain { width: 100%; min-height: 44px; margin-top: 8px; padding: 6px; border: 1px solid var(--rule); color: var(--ink); background: var(--paper-solid); font-size: .875rem; }
.connection-explain:hover { border-color: var(--magenta); }
.connection-reason > .thread-close { position: absolute; top: 0; right: 0; }
.card-read { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; margin-top: 0; padding: 10px 12px; color: white; background: var(--graphite); font-size: .9rem; font-weight: 600; text-decoration: none; }
.card-read:hover { background: var(--cobalt); }
.selection-close { align-self: flex-start; min-height: 44px; margin-top: 4px; padding: 6px 0; border: 0; color: var(--muted); background: transparent; font-size: .8125rem; text-decoration: underline; text-underline-offset: 3px; }
.selection-close:hover { color: var(--ink); }
.empty { max-width: 620px; margin: 22px auto 0; padding: clamp(34px, 7vw, 72px) 22px; border: 1px solid var(--rule); color: var(--muted); background: rgba(248,250,252,.54); text-align: center; }
.empty-kicker { color: var(--magenta-ink); font-size: .75rem; font-weight: 600; letter-spacing: .08em; }
.empty h3 { margin: 8px 0 7px; color: var(--ink); font-family: "Gowun Batang", serif; font-size: clamp(1.25rem, 3vw, 1.7rem); line-height: 1.45; }
.empty p { max-width: 50ch; margin: 0 auto; font-size: .9375rem; line-height: 1.75; word-break: keep-all; }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.empty-actions button { min-height: 44px; padding: 8px 13px; border: 1px solid var(--graphite); color: var(--ink); background: transparent; }
.empty-actions button:first-child { color: white; background: var(--graphite); }
.empty-actions button:hover { border-color: var(--cobalt); }
.table-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 17px; border-top: 1px solid var(--rule); }
.table-foot p { margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.65; }.table-foot b { color: var(--ink); font-weight: 600; }
.table-foot button { min-height: 41px; padding: 0 15px; border: 1px solid var(--graphite); background: transparent; }
.table-foot button:hover { color: white; background: var(--graphite); }

@keyframes thread-draw { to { stroke-dashoffset: 0; } }
@keyframes relation-appear { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes relation-hint-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (max-width: 1020px) {
  .lab-header { grid-template-columns: 1fr; align-items: stretch; }
  .lab-shell { grid-template-columns: 200px minmax(0,1fr); }
  .specimen-grid { gap: 18px; }
  .specimen-face { padding-left: 17px; padding-right: 17px; }
}

@media (max-width: 760px) {
  .lab-header { gap: 20px; padding: 20px 16px 17px; }
  .lab-brand h1 { font-size: 2.45rem; }
  .lab-tools { grid-template-columns: 1fr auto; }
  .search-field { grid-column: 1 / -1; }
  .lab-tools > button { min-height: 44px; }
  .lab-shell { display: block; }
  .thread-index { padding: 18px 15px 16px; }
  .thread-heading { display: flex; align-items: baseline; justify-content: space-between; }
  .thread-heading h2 { margin: 0 0 13px; font-size: 1.3rem; }
  .thread-filters { display: flex; gap: 7px; overflow-x: auto; padding: 1px 1px 5px; scrollbar-width: none; }
  .thread-filters::-webkit-scrollbar { display: none; }
  .thread-filter { flex: 0 0 auto; grid-template-columns: 18px auto; min-height: 44px; padding: 0 11px; border: 1px solid rgba(255,255,255,.2); }
  .thread-filter::after { display: none; }
  .thread-filter[aria-pressed="true"] { background: rgba(255,255,255,.12); }
  .thread-filter i { width: 16px; height: 16px; border-width: 3px; box-shadow: none; }
  .thread-filter small, .thread-note, .original-link { display: none; }
  .light-table { padding: 20px 14px 28px; }
  .table-head { align-items: flex-start; }
  .table-status { display: grid; gap: 3px; }
  .table-status i { display: none; }
  .table-status #selected-status { max-width: 150px; }
  .specimen-field { min-height: 520px; padding-top: 22px; }
  .specimen-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px 11px; }
  .specimen { min-height: 248px; transform: none; }
  .specimen:focus-within { transform: none; }
  .specimen-face { backdrop-filter: none; background: var(--paper-solid); }
  .specimen-back { background: var(--paper-back); }
  .specimen-face { padding: 28px 13px 14px; }
  .specimen.is-revealed:not(.is-flipped) { align-self: start; height: 260px; min-height: 260px; }
  .specimen h3 { font-size: 1rem; }
  .specimen[data-id="p06"] h3 { font-size: .9rem; letter-spacing: -.035em; }
  .specimen-person { font-size: .875rem; }
  .specimen-summary { margin: 10px 0 11px; font-size: 1rem; line-height: 1.58; }
  .card-read { min-height: 46px; }
  .specimen-brief { margin-top: 10px; padding-top: 9px; }
  .specimen-brief ol { gap: 7px; }
  .connection-reason { font-size: .875rem; }
  .specimen.is-flipped { min-height: 340px; }
  .specimen-back .unflip { top: 5px; right: 6px; min-height: 44px; padding: 4px 7px; font-size: .875rem; }
  .specimen-brief li { grid-template-columns: 18px minmax(0, 1fr); gap: 5px; font-size: .875rem; line-height: 1.58; }
  .table-foot { align-items: stretch; flex-direction: column; }
  .table-foot button { width: 100%; }
  .relation-tag { top: -8px; right: 8px; padding: 3px 6px; font-size: .6875rem; }
  .thread-close { width: 44px; height: 44px; }
  .front-relation-tag { top: -16px; padding: 0 0 0 8px; }
  .empty { margin-top: 12px; padding: 32px 15px; }
}

@media (max-width: 520px) {
  .specimen.is-flipped { min-height: 340px; }
  .specimen-summary { font-size: 1rem; }
  .connection-reason { font-size: .875rem; }
  .specimen-back .unflip { font-size: .875rem; }
  .specimen-brief li { grid-template-columns: 18px minmax(0, 1fr); gap: 5px; font-size: .875rem; }
}

@media (max-width: 380px) {
  .lab-tools > button { padding: 0 10px; font-size: .78rem; }
  .table-head { display: grid; }
  .table-status { justify-content: start; text-align: left; }
  .specimen { min-height: 258px; }
  .specimen.is-flipped { min-height: 340px; }
  .specimen-code span:last-child { display: none; }
  .specimen-back .back-kicker { display: none; }
  .specimen-back .back-identity { margin-top: 7px; }
  .card-read { gap: 3px; padding: 8px; font-size: .8125rem; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .specimen, .specimen:hover, .specimen:focus-within { transform: none; }
  .relation-threads path.active { animation: none; stroke-dashoffset: 0; }
}

/* 운영체제의 어두운 화면에서도 같은 회백색·흑연색 위계를 유지한다. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --room: #121820;
    --room-deep: #0b1016;
    --paper: rgba(28, 36, 47, .92);
    --paper-solid: #1c2430;
    --paper-back: #232e3c;
    --ink: #f0f3f7;
    --muted: #b7c1ce;
    --faint: #b7c1ce;
    --rule: rgba(196, 208, 224, .28);
    --graphite: #090e15;
    --graphite-2: #18212d;
    --cobalt: #91a8ff;
    --magenta: #ff78a4;
    --magenta-ink: #ffabc5;
    --cyan: #66c5d3;
    --violet: #a895f0;
    --mint: #65c8bc;
    --shadow: rgba(0, 0, 0, .5);
  }
  .lab-header { background: rgba(19, 26, 35, .78); }
  .search-field, .lab-tools > button { background: rgba(255,255,255,.055); }
  .lab-tools > button:hover { background: rgba(255,255,255,.12); }
  .lab-tools .primary-action { background: #080d13; }
  .specimen-field::before { opacity: .54; }
  .specimen-field::after { color: rgba(214,224,237,.2); }
  .relation-threads path { stroke: rgba(190,202,218,.28); }
  .relation-threads path.active-under { stroke: rgba(10,14,20,.94); }
  .specimen-face { border-color: var(--rule); box-shadow: 0 12px 28px rgba(0,0,0,.32); }
  .connection-reason { background: rgba(255,255,255,.04); }
  .thread-label { box-shadow: 0 14px 30px rgba(0,0,0,.42); }
}

/* 모션은 마우스가 있는 장치에서만. 터치 후 hover가 남아 카드가 움직이지 않게 한다. */
@media (hover: none), (pointer: coarse) {
  .specimen:hover, .specimen:focus-within { transform: none; }
}