/*
 * 연애 세포 테스트 — 빈티지 동물 도감
 * 누렇게 바랜 종이 + 세피아 잉크 판화(빗금) + 초록 천 장정 + 금박.
 * 제목은 Song Myung, 라틴 학명은 IM Fell English 이탤릭. 표본 꼬리표와 도장.
 */
:root {
  --brand: #365b3f;
  --brand-pressed: #2a4831;
  --brand-soft: #dfe8d9;
  --brand-on: #f3ead6;

  --font-display: "Song Myung", "Nanum Myeongjo", "Noto Serif KR", Georgia, serif;

  /* 장식 전용 */
  --art-paper: #f4ecd9;
  --art-paper-2: #e8dcc0;
  --art-ink: #2e2418;
  --art-ink-soft: #6d5e48;
  --art-gold: #c9a24e;
  --art-tag: #f8f3e6;
  --art-rust: #9c3d2e;
  --art-latin: "IM Fell English", Georgia, "Times New Roman", serif;
  --art-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --art-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.25 0 0 0 0 0.18 0 0 0 0 0.08 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --art-foxing: radial-gradient(circle at 12% 18%, rgba(156, 110, 50, 0.12) 0 18px, transparent 40px), radial-gradient(circle at 88% 72%, rgba(156, 110, 50, 0.1) 0 24px, transparent 52px);
}

body {
  background: color-mix(in srgb, var(--art-ink) 12%, var(--art-paper));
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: var(--art-grain);
  opacity: 0.35;
  mix-blend-mode: multiply;
}

.app {
  position: relative;
  z-index: 1;
}

/* 판화 그림 공통 */
.lt-art { width: 100%; height: auto; overflow: visible; }
.lt-body { fill: var(--art-paper); stroke: var(--art-ink); stroke-width: 1.6; stroke-linejoin: round; }
.lt-shade { fill: url(#lt-hatch); }
.lt-hatch-line { stroke: var(--art-ink); }
.lt-line { fill: none; stroke: var(--art-ink); stroke-width: 1.2; stroke-linecap: round; }
.lt-thick { fill: none; stroke: var(--art-ink); stroke-width: 5; stroke-linecap: round; }
.lt-dot { fill: var(--art-ink); }
.lt-ground { fill: none; stroke: var(--art-ink); stroke-width: 1; stroke-dasharray: 1 3; }
.lt-water path { fill: none; stroke: var(--art-ink-soft); stroke-width: 1; }
.lt-art--sil .lt-body { fill: var(--art-ink); stroke: none; opacity: 0.16; }

/* ---------- 도감 종이 ---------- */
.lt-page,
.lt-intro {
  position: relative;
  background: var(--art-foxing), var(--art-paper);
  color: var(--art-ink);
  box-shadow: var(--shadow-s);
}

.lt-page {
  margin-top: var(--sp-16);
  padding: var(--sp-20) var(--sp-16);
  border: 1px solid var(--art-ink-soft);
  outline: 1px solid var(--art-ink-soft);
  outline-offset: -6px;
}

/* ---------- 첫 화면 ---------- */
.lt-intro {
  padding: var(--sp-16) var(--sp-16) var(--sp-16);
  border: 1px solid var(--art-ink-soft);
}

.lt-mast {
  padding-bottom: var(--sp-8);
  border-bottom: 3px double var(--art-ink);
}

.lt-mast__ed {
  margin: 0;
  font: 400 12px/1.2 var(--art-latin);
  letter-spacing: 0.1em;
  color: var(--art-ink-soft);
  text-transform: uppercase;
}

.lt-mast__title {
  margin: var(--sp-4) 0 0;
  font: 400 38px/1.1 var(--font-display);
  letter-spacing: -0.02em;
}

.lt-mast__sub {
  margin: var(--sp-4) 0 0;
  font: 400 14px/1.3 var(--font-display);
  color: var(--art-ink-soft);
}

.lt-mast__sub i { font-family: var(--art-latin); }

.lt-stage {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-10);
  padding: var(--sp-12) 0;
}

.lt-plate {
  position: relative;
  flex: 1 1 auto;
  min-height: 210px;
  border: 1.5px solid var(--art-ink);
  outline: 0.5px solid var(--art-ink);
  outline-offset: 3px;
  margin: 4px;
  perspective: 900px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lt-plate__no {
  position: absolute;
  left: var(--sp-8);
  top: var(--sp-6);
  font: 400 12px/1 var(--art-latin);
  letter-spacing: 0.12em;
}

.lt-plate__leaf {
  width: 96%;
  max-width: 340px;
  transform-origin: 0 50%;
}

.lt-plate__leaf.is-out {
  transform: rotateY(-95deg);
  opacity: 0;
  transition: transform 300ms ease-in, opacity 300ms ease-in;
}

.lt-plate__leaf.is-in { animation: lt-turn 700ms var(--art-spring) both; }

/* 판화 여백: 그림 번호와 축척 막대 (장 넘기는 사이에도 판이 비지 않게) */
.lt-plate__fig {
  position: absolute;
  right: var(--sp-8);
  top: var(--sp-6);
  max-width: 60%;
  font: italic 400 12px/1.2 var(--art-latin);
  color: var(--art-ink-soft);
  text-align: right;
}

.lt-plate__scale {
  position: absolute;
  left: var(--sp-12);
  bottom: var(--sp-12);
  display: grid;
  grid-template-columns: repeat(4, 16px);
  grid-template-rows: 5px auto;
  column-gap: 0;
  font: 400 9px/1 var(--art-latin);
  color: var(--art-ink-soft);
}

.lt-plate__scale i {
  border: 0.5px solid var(--art-ink);
}

.lt-plate__scale i:nth-child(odd) { background: var(--art-ink); }
.lt-plate__scale span { grid-row: 2; margin-top: 3px; }
.lt-plate__scale span:last-child { grid-column: 4; justify-self: end; white-space: nowrap; }

/* 판 왼쪽 위 습성 눈금: 세 습성이 어느 쪽인지 점이 튀어 간다 */
.lt-plate__axes {
  position: absolute;
  left: var(--sp-8);
  top: 34px;
  display: grid;
  gap: var(--sp-4);
}

.lt-axis {
  display: grid;
  grid-template-columns: 2.4em 10px 46px 10px;
  align-items: center;
  gap: var(--sp-4);
  font: 400 11px/1 var(--art-latin);
  color: var(--art-ink-soft);
}

.lt-axis small { font: 400 10px/1 var(--font-display); }
.lt-axis b { font-weight: 400; text-align: center; transition: color var(--dur-fast) var(--ease-standard); }
.lt-axis b:nth-of-type(1) { color: var(--art-rust); }
.lt-axis.is-b b:nth-of-type(1) { color: var(--art-ink-soft); }
.lt-axis.is-b b:nth-of-type(2) { color: var(--art-rust); }

.lt-axis i {
  position: relative;
  height: 1px;
  background: var(--art-ink);
}

.lt-axis em {
  position: absolute;
  left: 0;
  top: -4px;
  width: 9px;
  height: 9px;
  border-radius: var(--r-full);
  background: var(--art-rust);
  transition: left 520ms var(--art-spring);
}

.lt-axis.is-b em { left: calc(100% - 9px); }
.lt-axis:nth-child(2) em { transition-delay: 80ms; }
.lt-axis:nth-child(3) em { transition-delay: 160ms; }

/* 표본 꼬리표 */
.lt-tag {
  position: absolute;
  right: -2px;
  bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 132px;
  padding: var(--sp-6) var(--sp-10) var(--sp-6) var(--sp-24);
  background: var(--art-tag);
  border: 1px solid var(--art-ink);
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
  transform-origin: 0 50%;
  transform: rotate(-30deg) translateX(30px);
  opacity: 0;
  box-shadow: var(--shadow-s);
}

.lt-tag.is-in { animation: lt-swing 900ms var(--art-spring) forwards; }

.lt-tag__hole {
  position: absolute;
  left: 8px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border: 1px solid var(--art-ink);
  border-radius: var(--r-full);
}

.lt-tag b { font: 400 15px/1.2 var(--font-display); }
.lt-tag i { font: italic 400 13px/1.2 var(--art-latin); }
.lt-tag span { font: 400 10px/1.3 var(--font-sans); letter-spacing: 0.08em; color: var(--art-ink-soft); }

.lt-stamp {
  position: absolute;
  left: 14%;
  top: 22%;
  padding: var(--sp-4) var(--sp-10);
  border: 3px double var(--art-rust);
  border-radius: var(--r-6);
  color: var(--art-rust);
  font: 400 20px/1.1 var(--font-display);
  transform: rotate(-12deg) scale(2);
  opacity: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.lt-stamp.is-on { animation: lt-stamp 520ms cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards; }

/* 관찰 카드 */
.lt-fieldnote {
  padding: var(--sp-8) var(--sp-12);
  background: repeating-linear-gradient(180deg, transparent 0 21px, color-mix(in srgb, var(--art-ink) 14%, transparent) 21px 22px), var(--art-tag);
  border-left: 3px solid var(--art-rust);
  box-shadow: var(--shadow-s);
  transform: rotate(-0.6deg);
  min-height: 98px;
}

.lt-fieldnote.is-in { animation: lt-slide 560ms var(--art-spring) both; }

.lt-fieldnote__no { font: 400 12px/1 var(--art-latin); letter-spacing: 0.08em; color: var(--art-ink-soft); }
.lt-fieldnote__no b { font-weight: 400; color: var(--art-ink); }

.lt-fieldnote__q {
  margin: var(--sp-4) 0;
  font: 400 17px/22px var(--font-display);
}

.lt-fieldnote__a {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin: 0;
  font: var(--label-02);
  color: var(--art-ink-soft);
}

.lt-fieldnote__box {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--art-ink);
}

.lt-fieldnote.is-checked .lt-fieldnote__box::after {
  content: "";
  position: absolute;
  left: 3px;
  top: -4px;
  width: 6px;
  height: 13px;
  border: solid var(--art-rust);
  border-width: 0 3px 3px 0;
  transform: rotate(40deg);
  animation: lt-pop 360ms var(--art-spring);
}

.lt-fieldnote.is-checked .lt-fieldnote__a { color: var(--art-ink); }

/* 도감 띠 */
.lt-strip {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--sp-8);
}

.lt-strip__label {
  font: 400 13px/1.2 var(--font-display);
  writing-mode: vertical-rl;
}

.lt-strip ol {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lt-strip li {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--art-ink-soft);
  background: var(--art-paper-2);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.lt-strip li svg { position: absolute; inset: 8% 2%; width: 96%; }
.lt-strip li .is-full { opacity: 0; transform: scale(0.4); }
.lt-strip li.is-got { background: var(--art-tag); border-color: var(--art-ink); }
.lt-strip li.is-got .is-full { animation: lt-collect 520ms var(--art-spring) forwards; }
.lt-strip li.is-got .lt-art--sil { opacity: 0; }

/* 표지 버튼 (도감 펼치기) */
.lt-cover {
  position: relative;
  display: block;
  width: 100%;
  min-height: 84px;
  padding: 0 10px 0 0;
  border: 0;
  background: none;
  perspective: 900px;
  cursor: pointer;
  text-align: left;
}

.lt-cover__pages {
  position: absolute;
  z-index: 0;
  right: 2px;
  top: 4px;
  bottom: 4px;
  left: 4px;
  background: repeating-linear-gradient(90deg, var(--art-paper) 0 2px, var(--art-paper-2) 2px 3px);
  border-radius: 0 var(--r-4) var(--r-4) 0;
  box-shadow: var(--shadow-s);
}

.lt-cover__board {
  position: relative;
  z-index: 1;
  display: block;
  padding: var(--sp-10);
  background-color: var(--brand);
  background-image: var(--art-grain);
  background-blend-mode: multiply;
  border-radius: var(--r-4) var(--r-6) var(--r-6) var(--r-4);
  box-shadow: var(--shadow-m);
  transform-origin: 0 50%;
  transition: transform 300ms var(--art-spring);
  border-left: 8px solid var(--brand-pressed);
}

.lt-cover:active .lt-cover__board { transform: rotateY(-14deg); transition-duration: 80ms; }
.lt-cover.is-open .lt-cover__board { animation: lt-open 560ms cubic-bezier(0.5, 0, 0.3, 1) forwards; }

.lt-cover__frame {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  padding: var(--sp-8) var(--sp-12);
  border: 1.5px solid var(--art-gold);
  outline: 0.5px solid var(--art-gold);
  outline-offset: -5px;
  color: var(--art-gold);
}

.lt-cover__small { grid-column: 1 / 3; font: 400 11px/1 var(--art-latin); letter-spacing: 0.3em; }
.lt-cover__title { font: 400 26px/1.25 var(--font-display); color: var(--brand-on); }
.lt-cover__meta { font: 400 12px/1.3 var(--font-display); padding-bottom: 4px; }

.lt-cover--again { margin-top: var(--sp-24); }

.lt-shelf {
  min-height: 44px;
  margin-top: var(--sp-6);
  border: 0;
  background: none;
  color: var(--art-ink);
  font: 400 15px/1.2 var(--font-display);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* ---------- 관찰 일지 (문항) ---------- */
.lt-quiz .lt-page {
  min-height: calc(100dvh - var(--sp-32));
  margin-top: 0;
}

.lt-quizbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lt-back {
  min-height: 44px;
  padding: 0 var(--sp-6);
  border: 0;
  background: none;
  color: var(--art-ink);
  font: 400 15px/1 var(--font-display);
  cursor: pointer;
}

.lt-quizbar__no { font: 400 13px/1 var(--art-latin); letter-spacing: 0.06em; }

.lt-ruler {
  position: relative;
  height: 26px;
  margin: var(--sp-8) 0 var(--sp-20);
  border: 1px solid var(--art-ink);
  background: var(--art-tag);
}

.lt-ruler i {
  position: absolute;
  inset: 0 auto 0 0;
  background: repeating-linear-gradient(90deg, var(--art-ink) 0 1px, transparent 1px 4px);
  opacity: 0.5;
  transition: width 600ms var(--art-spring);
}

.lt-ruler span {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
}

.lt-ruler span i {
  position: relative;
  width: 1px;
  height: 8px;
  background: var(--art-ink);
  font: 400 9px/1 var(--art-latin);
  font-style: normal;
  opacity: 1;
}

.lt-qwrap { perspective: 900px; }

.lt-q.from-next { animation: lt-turn 620ms var(--art-spring) both; transform-origin: 0 50%; }
.lt-q.from-prev { animation: lt-turn-back 620ms var(--art-spring) both; transform-origin: 100% 50%; }

.lt-q__habit {
  margin: 0;
  font: italic 400 14px/1 var(--art-latin);
  color: var(--art-rust);
}

.lt-q__text {
  min-height: 72px;
  margin: var(--sp-8) 0 var(--sp-20);
  font: 400 26px/36px var(--font-display);
  letter-spacing: -0.01em;
}

.lt-q__opts {
  display: grid;
  gap: var(--sp-16);
}

.lt-opt {
  position: relative;
  gap: var(--sp-12);
  min-height: 84px;
  padding: var(--sp-12) var(--sp-16) var(--sp-12) var(--sp-32);
  border: 1px solid var(--art-ink);
  background: var(--art-tag);
  color: var(--art-ink);
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%, 0 50%);
  transform-origin: 0 50%;
  transition: transform 340ms var(--art-spring), background 120ms;
}

.lt-opt:nth-child(2) { transform: rotate(0.8deg); }
.lt-opt:active { transform: rotate(-3deg) scale(0.98); transition-duration: 80ms; }

.lt-opt__hole {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border: 1.5px solid var(--art-ink);
  border-radius: var(--r-full);
}

.lt-opt__key {
  flex: none;
  font: italic 400 24px/1 var(--art-latin);
}

.lt-opt__t { font: var(--body-01-strong); }

.lt-opt[aria-pressed="true"] {
  background: var(--brand);
  color: var(--brand-on);
  animation: lt-swing-pick 520ms var(--art-spring);
}

.lt-opt[aria-pressed="true"] .lt-opt__hole { border-color: var(--brand-on); }

.lt-q__memo {
  margin: var(--sp-24) 0 0;
  padding-top: var(--sp-8);
  border-top: 1px dashed var(--art-ink-soft);
  font: 400 14px/1.5 var(--font-display);
  color: var(--art-ink-soft);
}

/* ---------- 표본 페이지 ---------- */
.lt-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
}

.lt-topline__from { font: 400 16px/1.3 var(--font-display); }

.lt-plateview__no {
  display: flex;
  justify-content: space-between;
  margin: 0;
  font: 400 13px/1 var(--art-latin);
  letter-spacing: 0.14em;
}

.lt-plateview__no span { font-family: var(--font-display); letter-spacing: 0; color: var(--art-ink-soft); }

.lt-plateview__name {
  margin: var(--sp-12) 0 0;
  font: 400 44px/1.1 var(--font-display);
}

.lt-plateview__name small { font-size: 22px; margin-left: var(--sp-4); color: var(--art-ink-soft); }

.lt-plateview__latin {
  margin: var(--sp-2) 0 0;
  font: italic 400 20px/1.3 var(--art-latin);
  color: var(--art-ink-soft);
}

.lt-figure {
  position: relative;
  margin: var(--sp-16) 0;
  padding: var(--sp-16) var(--sp-8) var(--sp-32);
  border: 1.5px solid var(--art-ink);
  outline: 0.5px solid var(--art-ink);
  outline-offset: 3px;
}

.lt-plateview.is-fresh .lt-figure__art { animation: lt-ink 1200ms ease-out both; }

.lt-tag--pinned {
  right: 6px;
  bottom: -14px;
  transform: rotate(-6deg);
  opacity: 1;
}

.lt-tag--pinned b { font-size: 13px; }

.lt-stamp--new {
  left: auto;
  right: 10%;
  top: 10%;
  font-size: 17px;
}

.lt-plateview__head {
  margin: var(--sp-24) 0 var(--sp-8);
  font: 400 21px/1.45 var(--font-display);
}

.lt-plateview__desc {
  margin: 0;
  font: var(--body-02);
}

.lt-facts {
  width: 100%;
  margin-top: var(--sp-16);
  border-collapse: collapse;
  font: var(--body-03);
}

.lt-facts th,
.lt-facts td {
  padding: var(--sp-8) var(--sp-4);
  border-top: 1px solid var(--art-ink-soft);
  text-align: left;
  vertical-align: top;
}

.lt-facts th {
  width: 6.4em;
  font: 400 14px/22px var(--font-display);
  white-space: nowrap;
}

.lt-facts__hand { font: italic 400 15px/22px var(--font-display); color: var(--art-rust); }

.lt-h3 {
  margin: var(--sp-24) 0 var(--sp-8);
  padding-bottom: var(--sp-4);
  border-bottom: 3px double var(--art-ink);
  font: 400 19px/1.2 var(--font-display);
}

.lt-measure { display: grid; gap: var(--sp-10); }

.lt-measure__row {
  display: grid;
  grid-template-columns: 6.2em 1fr 6.2em;
  align-items: center;
  gap: var(--sp-8);
  font: 400 14px/1.2 var(--font-display);
  color: var(--art-ink-soft);
}

.lt-measure__r { text-align: right; }
.lt-measure__row small { font: 400 11px var(--art-latin); margin: 0 var(--sp-4); }
.lt-measure__row .is-on { color: var(--art-ink); text-decoration: underline; text-decoration-color: var(--art-rust); text-underline-offset: 4px; }

.lt-measure__bar {
  position: relative;
  height: 14px;
  background: repeating-linear-gradient(90deg, var(--art-ink) 0 1px, transparent 1px 10%) 0 100% / 100% 6px no-repeat;
  border-bottom: 1px solid var(--art-ink);
}

.lt-measure__bar i {
  position: absolute;
  top: 0;
  left: calc((100 - var(--p)) * 1%);
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: var(--r-full);
  background: var(--brand);
  border: 1.5px solid var(--art-ink);
  animation: lt-pop 600ms var(--art-spring) 400ms both;
}

.lt-rel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
}

.lt-rel__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-10) var(--sp-8);
  border: 1px solid var(--art-ink);
  background: var(--art-tag);
  text-align: center;
}

.lt-rel__k {
  align-self: flex-start;
  padding: 0 var(--sp-6);
  background: var(--brand);
  color: var(--brand-on);
  font: 400 12px/20px var(--font-display);
}

.lt-rel__card.is-worst .lt-rel__k { background: var(--art-rust); }
.lt-rel__art { width: 100%; max-width: 140px; }
.lt-rel__card b { font: 400 18px/1.2 var(--font-display); }
.lt-rel__card i { font: italic 400 12px/1.3 var(--art-latin); color: var(--art-ink-soft); }

/* 공유 꼬리표 버튼 */
.lt-sharebox {
  margin-top: var(--sp-16);
  display: grid;
  gap: var(--sp-12);
}

.lt-nick {
  display: grid;
  gap: var(--sp-6);
  font: 400 14px/1 var(--font-display);
}

.lt-input {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--sp-10);
  border: 1px solid var(--art-ink);
  border-radius: var(--r-0);
  background: var(--art-tag);
  color: var(--art-ink);
  font: var(--body-02);
  outline: none;
}

.lt-input:focus { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }

.lt-sharebox__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
}

.lt-tagbtn {
  position: relative;
  min-height: 56px;
  padding: 0 var(--sp-10) 0 var(--sp-24);
  border: 1px solid var(--art-ink);
  background: var(--brand);
  color: var(--brand-on);
  font: 400 16px/1.2 var(--font-display);
  text-align: left;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
  cursor: pointer;
  transform-origin: 0 50%;
  transition: transform 340ms var(--art-spring);
}

.lt-tagbtn:active { transform: rotate(-4deg); transition-duration: 80ms; }
.lt-tagbtn--alt { background: var(--art-tag); color: var(--art-ink); }
.lt-tagbtn--sm { min-height: 48px; white-space: nowrap; padding-right: var(--sp-16); }
.lt-tagbtn.is-loading { opacity: 0.6; pointer-events: none; }

.lt-tagbtn__hole {
  position: absolute;
  left: 9px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border: 1.5px solid currentColor;
  border-radius: var(--r-full);
}

.lt-pair__k {
  display: flex;
  justify-content: space-between;
  margin: 0 0 var(--sp-12);
  padding-bottom: var(--sp-6);
  border-bottom: 3px double var(--art-ink);
  font: 400 19px/1.2 var(--font-display);
}

.lt-pair__k b { font-weight: 400; color: var(--brand); }

.lt-invite p,
.lt-dare p {
  margin: 0 0 var(--sp-12);
  font: var(--body-02);
}

.lt-dare p b { font: 400 19px/1 var(--font-display); color: var(--brand); }

.lt-pair__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-4);
}

.lt-pair__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.lt-pair__col b { font: 400 18px/1.2 var(--font-display); }
.lt-pair__col span { font: var(--caption-01); color: var(--art-ink-soft); }

.lt-pair__rel {
  padding: var(--sp-6) var(--sp-8);
  border: 3px double var(--art-rust);
  color: var(--art-rust);
  font: 400 15px/1.2 var(--font-display);
  writing-mode: vertical-rl;
  transform: rotate(-4deg);
  animation: lt-stamp 520ms cubic-bezier(0.2, 0.9, 0.3, 1.2) 300ms both;
}

.lt-pair__note {
  margin: var(--sp-12) 0;
  font: 400 16px/1.5 var(--font-display);
}

.lt-table {
  width: 100%;
  border-collapse: collapse;
  font: var(--body-03);
  color: var(--art-ink);
}

.lt-table th,
.lt-table td {
  padding: var(--sp-6) var(--sp-4);
  border-bottom: 1px solid var(--art-ink-soft);
  text-align: left;
  vertical-align: top;
}

.lt-table thead th {
  font: 400 13px/1.3 var(--font-display);
  border-bottom: 2px solid var(--art-ink);
}

.lt-table tbody th { font: 400 14px/1.4 var(--font-display); white-space: nowrap; }
.lt-table td.is-diff { color: var(--art-rust); }
.lt-table i { font-family: var(--art-latin); color: var(--art-ink-soft); }
.lt-table code { font: italic 400 14px var(--art-latin); color: var(--art-rust); }
.lt-table--pair td, .lt-table--pair th { text-align: center; }

.lt-link {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--art-ink-soft);
  font: 400 14px/1.2 var(--font-display);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* 수집 격자 */
.lt-shelf-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lt-shelf-grid.is-mini { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }

.lt-cell__btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: var(--sp-16) var(--sp-4) var(--sp-8);
  border: 1px dashed var(--art-ink-soft);
  background: var(--art-paper-2);
  color: var(--art-ink-soft);
  cursor: pointer;
  text-align: center;
}

.lt-cell__btn:disabled { cursor: default; }
.is-got .lt-cell__btn { border-style: solid; border-color: var(--art-ink); background: var(--art-tag); color: var(--art-ink); }
.is-got .lt-cell__btn:active { transform: scale(0.96); }
.is-seen .lt-cell__btn { opacity: 0.7; }

.lt-cell__no {
  position: absolute;
  left: var(--sp-6);
  top: var(--sp-4);
  font: 400 11px/1 var(--art-latin);
}

.lt-cell__name { font: 400 15px/1.3 var(--font-display); }
.is-mini .lt-cell__name { font-size: 12px; }
.is-mini .lt-cell__btn { padding-top: var(--sp-12); }
.lt-cell__meta { font: var(--caption-01); color: var(--art-ink-soft); }
.lt-shelf-note { margin: var(--sp-8) 0 var(--sp-16); font: var(--body-03); color: var(--art-ink-soft); }

/* ---------- SEO 본문: 일러두기 ---------- */
.lt-doc {
  margin-top: var(--sp-48);
  padding: var(--sp-24) var(--sp-16);
  background: var(--art-foxing), var(--art-paper);
  border: 1px solid var(--art-ink-soft);
  outline: 1px solid var(--art-ink-soft);
  outline-offset: -6px;
  color: var(--art-ink);
}

.lt-doc__head p {
  margin: 0;
  font: italic 400 14px/1 var(--art-latin);
  letter-spacing: 0.1em;
  color: var(--art-ink-soft);
}

.lt-doc h2 {
  margin: var(--sp-6) 0 var(--sp-8);
  padding-bottom: var(--sp-8);
  border-bottom: 3px double var(--art-ink);
  font: 400 26px/1.25 var(--font-display);
  color: var(--art-ink);
}

.lt-doc h3 {
  margin: var(--sp-24) 0 var(--sp-8);
  font: 400 19px/1.3 var(--font-display);
  color: var(--brand);
}

.lt-doc h3::before { content: "§ "; font-family: var(--art-latin); color: var(--art-ink-soft); }

.lt-specimen {
  padding: var(--sp-12) var(--sp-16) var(--sp-12) var(--sp-24);
  background: var(--art-tag);
  border: 1px solid var(--art-ink);
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
}

.lt-doc .lt-specimen p { margin: 0; color: var(--art-ink); }
.lt-specimen__title { font: italic 400 14px/1.4 var(--art-latin) !important; color: var(--art-ink-soft) !important; }

.lt-specimen ul { margin: var(--sp-6) 0; padding: 0; list-style: none; }
.lt-doc .lt-specimen li { font: var(--body-03); }
.lt-specimen li span { display: inline-block; width: 3em; font-family: var(--font-display); }
.lt-specimen li b { color: var(--brand); }
.lt-doc .lt-specimen__out { font: 400 17px/1.5 var(--font-display); }
.lt-specimen__out b { font-weight: 400; color: var(--brand); }
.lt-specimen__out i { font-family: var(--art-latin); }
.lt-doc .lt-specimen__note { font: 400 14px/1.5 var(--font-display); color: var(--art-rust); }

.lt-doc__small {
  margin: var(--sp-8) 0 0;
  font: var(--caption-01);
  color: var(--art-ink-soft);
}

.lt-table--species td:first-child { font: 400 13px var(--art-latin); }

/* ---------- 채집자 주석 (FAQ) ----------
 * 옛 도감의 각주: 주석 기호 + 질문 + 점선 리더 + 쪽수. 펼치면 작은 활자의 각주가 내려온다. */
.lt-notes {
  margin-top: var(--sp-32);
  padding-top: var(--sp-8);
  border-top: 0.5px solid var(--art-ink);
  box-shadow: 0 -3px 0 -2px var(--art-ink);
}

.lt-doc .lt-notes h3 { margin-top: var(--sp-12); }

.lt-doc .lt-notes__lede {
  margin: 0 0 var(--sp-8);
  font: italic 400 14px/1.5 var(--font-display);
  color: var(--art-ink-soft);
}

.lt-doc details.lt-fn {
  padding: 0;
  border: 0;
}

.lt-fn summary {
  display: flex;
  align-items: baseline;
  gap: var(--sp-6);
  min-height: var(--tap-min);
  padding: var(--sp-12) 0 var(--sp-6);
  list-style: none;
  cursor: pointer;
}

.lt-fn summary::-webkit-details-marker { display: none; }

.lt-fn__mark {
  flex: none;
  width: 1.1em;
  font: 400 20px/1 var(--art-latin);
  color: var(--art-rust);
  transition: transform var(--dur-slow) var(--art-spring);
}

.lt-fn[open] .lt-fn__mark { transform: scale(1.35) rotate(-8deg); }

.lt-fn__q {
  flex: 0 1 auto;
  font: 400 17px/1.4 var(--font-display);
  color: var(--art-ink);
}

/* 점선 리더 + 쪽수 */
.lt-fn__page {
  flex: 1 0 3.2em;
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  font: italic 400 13px/1 var(--art-latin);
  color: var(--art-ink-soft);
  white-space: nowrap;
}

.lt-fn__page::before {
  content: "";
  flex: 1 1 auto;
  border-bottom: 1.5px dotted var(--art-ink-soft);
}

.lt-doc .lt-fn p {
  margin: 0 0 var(--sp-8) calc(1.1em + var(--sp-6));
  padding: var(--sp-8) 0 var(--sp-8) var(--sp-12);
  border-left: 0.5px solid var(--art-ink);
  font: 400 13px/1.7 var(--font-display);
  color: var(--art-ink);
  transform-origin: 0 0;
  animation: lt-fn-drop 420ms var(--art-spring) both;
}

.lt-fn p i { font-family: var(--art-latin); }

@keyframes lt-fn-drop {
  0% { opacity: 0; transform: translateY(-8px) scaleY(0.6); }
  100% { opacity: 1; transform: none; }
}

/* ---------- 관련 도감 (다른 도구) ----------
 * 같은 서가의 다른 도감 3권: 왼쪽으로 튀어나온 천 색인 탭 + 금박 권 번호 */
.lt .more-sites {
  margin-top: var(--sp-40);
  padding-left: 0;
}

.lt .more-sites__title {
  display: flex;
  align-items: baseline;
  gap: var(--sp-8);
  margin: 0 0 var(--sp-12);
  padding-bottom: var(--sp-6);
  border-bottom: 3px double var(--art-ink);
  font: 400 22px/1.2 var(--font-display);
  opacity: 1;
  color: var(--art-ink);
}

.lt .more-sites__title i { font: italic 400 14px/1 var(--art-latin); color: var(--art-ink-soft); }

.lt .more-sites__grid { gap: var(--sp-8); }

.lt .more-sites__item {
  position: relative;
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-areas: "tab name" "tab desc";
  column-gap: var(--sp-12);
  align-items: center;
  min-height: 64px;
  padding: var(--sp-10) var(--sp-16) var(--sp-10) 0;
  border: 1px solid var(--art-ink-soft);
  border-left: 0;
  background: var(--art-foxing), var(--art-paper);
  color: var(--art-ink);
  text-decoration: none;
  transition: transform var(--dur-slow) var(--art-spring);
}

.lt .more-sites__item:nth-child(2) { margin-left: var(--sp-12); }
.lt .more-sites__item:nth-child(3) { margin-left: var(--sp-24); }
.lt .more-sites__item:active { transform: translateX(8px); transition-duration: 80ms; }

/* 천 색인 탭: 가장자리가 둥근 손잡이 */
.lt-idx__tab {
  grid-area: tab;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: calc(var(--sp-10) * -1) 0;
  border-radius: var(--r-8) 0 0 var(--r-8);
  background: var(--brand);
  color: var(--art-gold);
  font: 400 19px/1 var(--art-latin);
  box-shadow: inset -6px 0 0 color-mix(in srgb, var(--art-ink) 25%, transparent);
}

.lt-idx__tab small { font: italic 400 10px/1.2 var(--art-latin); color: var(--brand-on); }
.lt .more-sites__item:nth-child(2) .lt-idx__tab { background: var(--art-rust); }
.lt .more-sites__item:nth-child(3) .lt-idx__tab { background: var(--art-ink); }

.lt .more-sites__name { grid-area: name; font: 400 18px/1.3 var(--font-display); }
.lt .more-sites__desc { grid-area: desc; font: italic 400 13px/1.4 var(--font-display); opacity: 1; color: var(--art-ink-soft); }

.lt .site-footer { color: var(--art-ink-soft); }

/* ---------- 키프레임 ---------- */
@keyframes lt-turn {
  0% { opacity: 0; transform: rotateY(95deg); }
  60% { opacity: 1; transform: rotateY(-10deg); }
  100% { opacity: 1; transform: none; }
}

@keyframes lt-turn-back {
  0% { opacity: 0; transform: rotateY(-95deg); }
  60% { opacity: 1; transform: rotateY(10deg); }
  100% { opacity: 1; transform: none; }
}

@keyframes lt-swing {
  0% { opacity: 0; transform: rotate(-34deg) translateX(30px); }
  40% { opacity: 1; transform: rotate(8deg); }
  70% { transform: rotate(-9deg); }
  100% { opacity: 1; transform: rotate(-4deg); }
}

@keyframes lt-swing-pick {
  0% { transform: rotate(0); }
  35% { transform: rotate(-4deg) scale(0.97); }
  70% { transform: rotate(2deg); }
  100% { transform: rotate(0); }
}

@keyframes lt-stamp {
  0% { opacity: 0; transform: rotate(-12deg) scale(2.2); }
  60% { opacity: 1; transform: rotate(-12deg) scale(0.9); }
  100% { opacity: 1; transform: rotate(-12deg) scale(1); }
}

@keyframes lt-slide {
  0% { opacity: 0; transform: translateX(40px) rotate(3deg); }
  60% { opacity: 1; transform: translateX(-4px) rotate(-1deg); }
  100% { opacity: 1; transform: rotate(-0.6deg); }
}

@keyframes lt-pop {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

@keyframes lt-collect {
  0% { opacity: 0; transform: scale(0.3) rotate(-20deg); }
  60% { opacity: 1; transform: scale(1.15) rotate(4deg); }
  100% { opacity: 1; transform: none; }
}

@keyframes lt-open {
  0% { transform: none; }
  100% { transform: rotateY(-120deg); opacity: 0.4; }
}

@keyframes lt-ink {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* ---------- 표본 상자 (친구 초대) ----------
 * 칸막이 두 칸짜리 표본 상자: 왼쪽은 내 동물, 오른쪽은 실루엣만 비친 빈칸 */
.lt-case {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0 0 var(--sp-12);
  border: 3px solid var(--art-ink);
  background: var(--art-paper-2);
  box-shadow: inset 0 0 0 4px var(--art-paper);
}

.lt-case__slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-12) var(--sp-8) var(--sp-8);
}

.lt-case__slot + .lt-case__slot { border-left: 3px solid var(--art-ink); }

.lt-case__art { width: 100%; max-width: 130px; height: auto; }

.lt-case__slot.is-empty .lt-case__art { opacity: 0.5; }

.lt-case__q {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
  font: italic 400 44px/1 var(--art-latin);
  color: var(--art-rust);
  animation: lt-q-bob 1.6s var(--art-spring) infinite alternate;
}

.lt-case__tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--sp-4);
  padding: var(--sp-4) var(--sp-10);
  background: var(--art-tag);
  border: 1px solid var(--art-ink);
  transform: rotate(-3deg);
}

.lt-case__slot.is-empty .lt-case__tag { border-style: dashed; transform: rotate(2deg); }
.lt-case__tag b { font: 400 15px/1.3 var(--font-display); }
.lt-case__tag i { font: italic 400 11px/1.3 var(--art-latin); color: var(--art-ink-soft); }

@keyframes lt-q-bob {
  from { transform: translate(-50%, -50%) rotate(-8deg); }
  to { transform: translate(-50%, -62%) rotate(6deg); }
}