/* Destiny Lore Archive — 게임 화면 결을 따른 겉모습
 *
 * 판(plate): 모서리 하나를 잘라 낸 직사각형. 게임 UI의 기본 도형이라 목록·카드 전부 이것을 쓴다.
 *   잘린 모서리는 clip-path 대신 ::before 삼각형 + ::after 사선으로 그린다.
 *   clip-path는 테두리까지 같이 잘라서 1px 선이 사라지기 때문이다.
 * 색: 책마다 자기 색(--c, books.json)이 있어 그 색을 판 밑선으로 쓴다. 장식이 아니라 데이터다.
 * 글꼴: 화면 글자는 좁은 고딕, 로어 본문만 바탕체 — 읽을 때는 UI가 물러나야 한다.
 */
:root {
  --void: #07080b;
  --plate: #10131a;
  --plate2: #161a23;
  --edge: #232936;
  --ink: #e7e3d8;
  --dim: #8b8880;
  --gold: #d6ac52;
  --fs: 17px;
  --cut: 16px;

  --ui: "IBM Plex Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --lab: "Barlow Condensed", "IBM Plex Sans KR", system-ui, sans-serif;
  --ko: "Gowun Batang", "Batang", serif;
  --lat: "Spectral", Georgia, serif;
}
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--ui);
  -webkit-text-size-adjust: 100%;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* 잘린 모서리 — 판이 놓인 바닥색으로 삼각형을 덮고 그 위에 사선을 긋는다 */
.cut { position: relative; }
.cut::before {
  content: ""; position: absolute; right: -1px; top: -1px;
  width: var(--cut); height: var(--cut); pointer-events: none;
  background: linear-gradient(225deg, var(--void) 0 50%, transparent 50%);
}
.cut::after {
  content: ""; position: absolute; right: -1px; top: -1px; pointer-events: none;
  width: calc(var(--cut) * 1.415); height: 1px;
  background: var(--edge);
  transform: rotate(-45deg); transform-origin: right top;
}
.cut:hover::after { background: var(--c, var(--gold)); }

/* ---------- 머리띠 ---------- */
header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 20px;
  padding: 0 18px; height: 52px;
  background: linear-gradient(180deg, rgba(7, 8, 11, .96), rgba(7, 8, 11, .88));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--edge);
}
/* 머리띠 아래 눈금 한 줄 — 게임 HUD의 계기 눈금 */
header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 26px, transparent 26px 34px);
  opacity: .25;
}
.brand {
  font-family: var(--lab); font-weight: 600; font-size: 19px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
  display: flex; align-items: center; gap: 9px;
}
.brand::before {
  content: ""; width: 11px; height: 11px; background: var(--gold);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
nav { flex: 1; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
nav::-webkit-scrollbar { display: none; }
nav a {
  font-family: var(--lab); font-size: 15px; letter-spacing: .1em;
  color: var(--dim); padding: 6px 11px; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
nav a:hover { color: var(--ink); border-bottom-color: var(--edge); }
.controls { display: flex; gap: 8px; align-items: center; }
#q {
  background: var(--plate); border: 1px solid var(--edge); color: var(--ink);
  padding: 6px 10px; font-family: var(--ui); font-size: 13px; width: 150px; outline: none;
}
#q:focus { border-color: var(--gold); }
.seg { display: inline-flex; border: 1px solid var(--edge); }
/* hidden 속성은 display 규칙이 있으면 진다. 언어 단추는 검수 화면 밖에서 안 보여야 한다. */
.seg[hidden] { display: none; }
.seg button {
  background: none; border: 0; color: var(--dim); font-family: var(--lab);
  font-size: 14px; letter-spacing: .08em; padding: 6px 11px; cursor: pointer;
}
.seg button.on { background: var(--gold); color: var(--void); }
.seg button:hover:not(.on) { color: var(--ink); }

main { max-width: 1180px; margin: 0 auto; padding: 24px 16px 90px; }

/* ---------- 안내줄·구획 ---------- */
.crumb { color: var(--dim); font-size: 13px; margin-bottom: 18px; line-height: 1.6; }
.crumb a { color: var(--dim); border-bottom: 1px solid transparent; }
.crumb a:hover { color: var(--gold); border-bottom-color: var(--gold); }

.cat h2 {
  margin: 34px 0 14px; font-family: var(--lab); font-weight: 600;
  font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
  display: flex; align-items: center; gap: 12px;
}
.cat h2::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--edge), transparent);
}
.cat h2 .pn {
  order: 3; flex: none; color: var(--dim); font-size: 13px;
  font-weight: 400; letter-spacing: .06em; text-transform: none;
}

/* ---------- 책장 ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 14px; }
.book {
  display: block; background: var(--plate); border: 1px solid var(--edge);
  transition: transform .16s ease, border-color .16s ease;
}
.book:hover { transform: translateY(-3px); border-color: var(--c, var(--gold)); }
.book img, .cover-ph { width: 100%; aspect-ratio: 359 / 460; object-fit: cover; display: block; }
.cover-ph {
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 12px; font-size: 14px; color: rgba(255, 255, 255, .88);
}
.bt {
  display: block; padding: 9px 10px 10px; font-size: 13px; line-height: 1.4;
  border-top: 2px solid var(--c, var(--edge));
}

/* ---------- 아이템 ---------- */
.itemgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 8px; }
.item {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; font-size: 13px;
  background: var(--plate); border: 1px solid var(--edge); --cut: 11px;
}
.item:hover { border-color: var(--gold); background: var(--plate2); }
.item img { width: 32px; height: 32px; flex: none; background: #000; }
.item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 책 머리 ---------- */
.hero {
  display: flex; gap: 24px; align-items: flex-start; padding: 26px; margin-bottom: 24px;
  background:
    linear-gradient(120deg, var(--tint, rgba(60, 60, 70, .4)), transparent 62%),
    var(--plate);
  border: 1px solid var(--edge); --cut: 26px;
}
.hero img { width: 152px; display: block; border: 1px solid var(--edge); }
.hero h1 { margin: 0 0 4px; font-size: 30px; font-weight: 600; text-wrap: balance; }
.hero .sub {
  color: var(--dim); margin: 0 0 12px; font-family: var(--lat);
  font-style: italic; font-size: 15px;
}
.hero .meta { color: var(--dim); font-family: var(--lab); letter-spacing: .1em; font-size: 14px; }

/* ---------- 항목 목록 ---------- */
.entry-list { list-style: none; padding: 0; margin: 0; }
.entry-list a {
  display: flex; gap: 14px; padding: 12px 13px; border-bottom: 1px solid var(--edge);
  border-left: 2px solid transparent;
}
.entry-list a:hover { background: var(--plate); border-left-color: var(--gold); }
.entry-list .num {
  color: var(--dim); min-width: 2.2em; text-align: right;
  font-family: var(--lab); font-variant-numeric: tabular-nums;
}
.entry-list .ten { color: var(--dim); font-size: 13px; margin-left: auto; }
.snip { display: block; color: var(--dim); font-size: 12px; margin-top: 4px; line-height: 1.6; }
.snip mark { background: none; color: var(--gold); }

/* ---------- 읽기 ---------- */
.reader { max-width: 760px; margin: 0 auto; }
.reader h1 { margin: .1em 0 .1em; font-size: 32px; font-weight: 600; text-wrap: balance; }
.reader .sub {
  color: var(--dim); margin: 0; font-family: var(--lat); font-style: italic; font-size: 15px;
}
.reader > .body { border-top: 1px solid var(--edge); padding-top: 22px; }
.itemshot { margin: 18px 0; }
.itemshot img { max-width: 100%; border: 1px solid var(--edge); display: block; }
.itemshot figcaption {
  color: var(--dim); font-size: 12px; margin-top: 6px;
  font-family: var(--lab); letter-spacing: .08em;
}
.body { font-size: var(--fs); line-height: 1.85; margin-top: 20px; }
.body p { margin: 0 0 1.05em; }
.body .ko { font-family: var(--ko); }
.en { font-family: var(--lat); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; padding: 8px 0; border-bottom: 1px solid var(--edge); }
.pair:last-child { border-bottom: 0; }
.pair p { margin: .4em 0; }
.pair .en { color: var(--dim); }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.mismatch, .fixnote, .splitnote {
  color: var(--dim); font-size: 12.5px; line-height: 1.65;
  border-left: 2px solid var(--edge); padding: 6px 12px; margin-bottom: 14px;
}
.fixnote a, .mismatch a { color: var(--gold); }
.xref { color: var(--gold); border-bottom: 1px dotted rgba(214, 172, 82, .55); }
.xref:hover { border-bottom-style: solid; }

.backlinks { margin-top: 40px; border-top: 1px solid var(--edge); padding-top: 16px; }
.backlinks h3 {
  margin: 0 0 12px; font-family: var(--lab); font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim); font-weight: 600;
}
.blist { display: flex; flex-wrap: wrap; gap: 6px; }
.blist a {
  font-size: 12.5px; background: var(--plate); border: 1px solid var(--edge); padding: 5px 11px;
}
.blist a:hover { border-color: var(--gold); color: var(--gold); }
.more, #app > .more, #gbody .more { color: var(--dim); font-size: 12px; margin-top: 10px; }

.navbtns { display: flex; justify-content: space-between; gap: 10px; margin: 36px 0 0; }
.navbtns a {
  background: var(--plate); border: 1px solid var(--edge); padding: 11px 15px; font-size: 14px;
  max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.navbtns a:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- D1 그리무아 ---------- */
.d1card { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }
.d1card img { width: 100%; border: 1px solid var(--edge); display: block; }
.d1card h1 { margin: 0 0 14px; font-size: 28px; font-weight: 600; }
.d1card .body blockquote {
  margin: 0 0 16px; padding: 10px 0 10px 16px; border-left: 2px solid var(--gold);
  color: var(--ink); font-style: italic;
}
.pagegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; }
.pagegrid img { width: 100%; aspect-ratio: 560 / 728; object-fit: cover; display: block; }
img.miss { display: none; }

/* ---------- 용어집 ---------- */
#gq, #eq {
  background: var(--plate); border: 1px solid var(--edge); color: var(--ink);
  padding: 9px 12px; font-family: var(--ui); font-size: 14px;
  width: 100%; max-width: 420px; outline: none; margin: 0 0 18px;
}
#gq:focus, #eq:focus { border-color: var(--gold); }
.gloss { width: 100%; border-collapse: collapse; font-size: 14px; }
.gloss th {
  text-align: left; color: var(--dim); font-family: var(--lab); font-size: 13px;
  letter-spacing: .12em; text-transform: uppercase; padding: 7px 10px; border-bottom: 1px solid var(--edge);
}
.gloss td { padding: 7px 10px; border-bottom: 1px solid var(--edge); vertical-align: top; }
.gloss td.en { font-family: var(--lat); }
.gloss .alt { color: var(--dim); }
.gloss tr:hover td { background: var(--plate); }

/* ---------- 인물·장소 ---------- */
.entgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 13px; }
.entcard {
  display: flex; flex-direction: column; background: var(--plate);
  border: 1px solid var(--edge); overflow: hidden;
  transition: transform .16s ease, border-color .16s ease;
}
.entcard:hover { transform: translateY(-3px); border-color: var(--gold); }
.portrait, .enthero .ehero-img {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 3 / 4; background: var(--plate2);
}
.portrait img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; display: block;
}
/* 초상화 아래쪽을 판 색으로 녹여 이름표와 이어 붙인다 */
.portrait::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 46%;
  background: linear-gradient(180deg, transparent, rgba(16, 19, 26, .92));
}
.entcard .en-name { padding: 8px 10px 2px; font-size: 15px; line-height: 1.3; }
.entcard .en-sub {
  padding: 0 10px; font-family: var(--lat); font-style: italic;
  font-size: 12px; color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.entcard .en-n {
  margin-top: auto; padding: 7px 10px 8px; font-family: var(--lab);
  font-size: 12.5px; letter-spacing: .08em; color: var(--dim);
  border-top: 1px solid var(--edge);
}

/* 공식 그림이 없는 개체 — 그림인 척하지 않고 문양판을 쓴다 */
.portrait.sigil, .enthero .ehero-img.sigil {
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--s2, #2a3040), transparent 70%),
    repeating-linear-gradient(60deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 9px),
    var(--s1, #171b25);
}
.sigil span {
  font-family: var(--lab); font-size: 46px; font-weight: 600; letter-spacing: .04em;
  color: var(--s3, #cbd0dd); opacity: .82;
}
.sigil::before {
  content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255, 255, 255, .09);
}

/* 개체 머리 — 큰 그림 왼쪽, 설명 오른쪽 */
.enthero {
  display: grid; grid-template-columns: 232px 1fr; gap: 26px; align-items: start;
  margin-bottom: 30px; padding-bottom: 26px; border-bottom: 1px solid var(--edge);
}
.enthero .ehero-img { border: 1px solid var(--edge); --cut: 22px; }
.enthero .ehero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.enthero .ehero-img.sigil span { font-size: 76px; }
.enthero h1 { margin: 0 0 6px; font-size: 38px; font-weight: 600; letter-spacing: -.01em; }
.enthero .sub {
  margin: 0 0 18px; color: var(--dim); font-size: 14px;
  font-family: var(--lab); letter-spacing: .1em; text-transform: uppercase;
}
.enthero .sub .lat { font-family: var(--lat); font-style: italic; text-transform: none; letter-spacing: 0; }
.enthero .basis { color: var(--dim); font-size: 12px; line-height: 1.7; margin: 16px 0 0; }
/* 종족 거르개 — 인물 목록 위. 세력 화면과 다른 축이라 단추 모양도 다르게 둔다. */
.races { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 18px; }
.races button {
  background: var(--plate); border: 1px solid var(--edge); color: var(--dim);
  font-family: var(--lab); font-size: 13px; letter-spacing: .08em;
  padding: 5px 11px; cursor: pointer;
}
.races button span { color: var(--edge); margin-left: 4px; font-variant-numeric: tabular-nums; }
.races button:hover { color: var(--ink); border-color: var(--dim); }
.races button.on { background: var(--gold); border-color: var(--gold); color: var(--void); }
.races button.on span { color: rgba(7, 8, 11, .55); }

/* 그림 올리기 단추 — 로그인한 검수자에게만 보인다 */
.pup {
  display: inline-block; margin-top: 8px; padding: 5px 12px; cursor: pointer;
  border: 1px solid var(--edge); background: var(--plate2);
  font-family: var(--lab); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim);
}
.pup:hover { border-color: var(--gold); color: var(--gold); }

.enthero .credit {
  font-family: var(--lab); font-size: 12px; letter-spacing: .1em;
  color: var(--dim); margin: 8px 0 0;
}
/* 인물란은 성격이 다른 세 가지 글이 세로로 이어진다. 사용자 요청("소개어랑 로어 인용
   대사랑은 칸 색상을 다르게 하던가 해야지")에 따라 셋을 눈으로 구분되게 한다.
     개요(.wikisum)  — 위키에서 옮긴 사실 정리.  판을 깐 회색 상자.
     소개(.intro>p)  — 우리 로어를 읽고 쓴 글.    상자 없는 본문.
     인용(blockquote)— 로어 원문 그대로.          금색 세로선 + 금빛 바탕. */
.wikisum {
  margin: 0 0 16px; padding: 14px 16px;
  background: var(--plate2); border: 1px solid var(--edge); border-left: 3px solid var(--dim);
  font-family: var(--ui); font-size: 14.5px; line-height: 1.85; color: var(--ink);
}
.wikisum p { margin: 0; }
.wikisum .src {
  display: block; margin-top: 9px;
  font-family: var(--lab); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim);
}
.wikisum .src a { color: var(--dim); border-bottom: 1px solid var(--edge); }
.wikisum .src a:hover { color: var(--gold); border-bottom-color: var(--gold); }

.intro { margin: 0 0 18px; }
.intro > p {
  margin: 0; font-family: var(--ko); font-size: 15.5px; line-height: 1.9; color: var(--ink);
}
.intro .elink { color: inherit; text-decoration: none; border-bottom: 1px solid var(--edge); }
.intro .elink:hover { border-bottom-color: var(--gold); color: var(--gold); }
.intro blockquote.eq {
  margin: 14px 0 0; padding: 11px 16px;
  border-left: 3px solid var(--gold); background: rgba(214, 172, 82, .06);
  font-family: var(--ko); font-size: 14.5px; line-height: 1.85; color: var(--ink);
}
.intro blockquote.eq cite {
  display: block; margin-top: 7px; font-style: normal;
  font-family: var(--lab); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.intro blockquote.eq cite a { color: var(--dim); text-decoration: none; }
.intro blockquote.eq cite a:hover { color: var(--gold); }
.intro .refs {
  margin: 12px 0 0; font-size: 12px; line-height: 1.9; color: var(--dim);
  font-family: var(--lab); letter-spacing: .04em;
}
.intro .refs a { color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--edge); }
.intro .refs a:hover { color: var(--gold); }

/* 기계로 뽑은 등장 대사 — 고른 인용과 헷갈리지 않게 금색을 쓰지 않는다 */
.quotes { margin: 0 0 4px; }
.quotes blockquote {
  margin: 0 0 10px; padding: 10px 0 10px 16px; border-left: 2px solid var(--edge);
  font-family: var(--ko); font-size: 15px; line-height: 1.8; color: var(--dim);
}

footer {
  color: var(--dim); text-align: center; padding: 22px;
  font-size: 12px; border-top: 1px solid var(--edge);
}

/* ---------- 움직임 ---------- */
@media (prefers-reduced-motion: no-preference) {
  .turn-fwd { animation: turnFwd .3s ease-out; transform-origin: left center; }
  .turn-back { animation: turnBack .3s ease-out; transform-origin: right center; }
  .grid > *, .entgrid > *, .pagegrid > * {
    animation: rise .34s ease-out backwards;
    animation-delay: calc(var(--i, 0) * 18ms);
  }
  /* 개체 화면에 들어올 때 초상화를 빛이 한 번 훑는다 */
  .ehero-img::before {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(214, 172, 82, .3) 50%, transparent 62%);
    transform: translateX(-115%);
    animation: sweep .85s .12s ease-out 1;
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes sweep { to { transform: translateX(115%); } }
@keyframes turnFwd {
  from { opacity: 0; transform: perspective(1400px) rotateY(-7deg) translateX(30px); }
  to { opacity: 1; transform: none; }
}
@keyframes turnBack {
  from { opacity: 0; transform: perspective(1400px) rotateY(7deg) translateX(-30px); }
  to { opacity: 1; transform: none; }
}

/* 좁은 화면에서는 머리띠를 두 줄로 접는다 — 한 줄로는 이름표+검색+조절판 둘이 안 들어간다.
   .controls를 display:contents로 풀어 그 안의 것들을 머리띠에 직접 배치한다.
   1줄: 이름표 · 언어 · 글자크기   2줄: 차림표(가로 스크롤) · 검색 */
@media (max-width: 860px) {
  header { height: auto; flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  .brand { order: 1; font-size: 17px; margin-right: auto; }
  .brand span { display: none; }
  .controls { display: contents; }
  #langSeg { order: 2; }
  .controls .seg + .seg { order: 3; }
  nav { order: 4; flex: 1 1 200px; }
  nav a { padding: 5px 10px 6px; }
  #q { order: 5; flex: 0 0 106px; width: 106px; }
  .seg button { padding: 6px 8px; }
}
@media (max-width: 760px) {
  main { padding: 18px 12px 80px; }
  .pair, .cols, .d1card { grid-template-columns: 1fr; }
  .hero { flex-direction: column; }
  .pair .en { border-bottom: 1px dotted var(--edge); padding-bottom: 8px; }
  .enthero { grid-template-columns: 1fr; gap: 18px; }
  .enthero .ehero-img { width: 190px; }
  .enthero h1 { font-size: 30px; }
  .entgrid { grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)); gap: 10px; }
  .reader h1 { font-size: 26px; }
}

/* 개체 이름 옆 병기 — 같은 인물의 다른 표기(엘릭스니 본명, 가명 등) */
.also {
  font-size: .62em;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--dim, #8b8577);
  white-space: nowrap;
}

/* 세력 화면 — 하위 갈래 제목 */
.fsub {
  font-family: "Barlow Condensed", "IBM Plex Sans KR", sans-serif;
  font-size: 1.05rem; font-weight: 600; letter-spacing: .06em;
  margin: 1.6rem 0 .6rem; padding-bottom: .35rem;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: .5rem;
}
.fsub span { font-size: .78em; color: var(--dim); font-weight: 400; }
.fnote { color: var(--dim); font-size: .86rem; margin: -.2rem 0 1rem; }

/* ── 로그인 · 검수 ────────────────────────────────────────── */
.authbar { display: flex; align-items: center; gap: .55rem; margin-left: auto; }
.authbar .me { font-size: .78rem; color: var(--gold); letter-spacing: .04em; }
.authbar .who { font-size: .78rem; letter-spacing: .06em; }
.linkish {
  background: none; border: 1px solid var(--line); color: var(--dim);
  font: inherit; font-size: .74rem; letter-spacing: .06em;
  padding: .25rem .6rem; cursor: pointer;
}
.linkish:hover { color: var(--ink); border-color: var(--gold); }

.modal {
  position: fixed; inset: 0; background: rgba(4, 5, 8, .78);
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 1rem;
}
.loginbox {
  background: var(--plate); border: 1px solid var(--line);
  padding: 1.6rem 1.5rem; width: min(24rem, 100%);
  display: flex; flex-direction: column; gap: .8rem;
}
.loginbox h2 { margin: 0; font-size: 1.1rem; letter-spacing: .06em; }
.loginbox .hint { margin: -.4rem 0 .2rem; font-size: .78rem; color: var(--dim); }
.loginbox label { display: flex; flex-direction: column; gap: .3rem; font-size: .76rem; color: var(--dim); }
.loginbox input {
  background: #0b0d12; border: 1px solid var(--line); color: var(--ink);
  padding: .5rem .6rem; font: inherit;
}
.loginbox input:focus { outline: none; border-color: var(--gold); }
.loginbox .err { margin: 0; color: #e08585; font-size: .78rem; }
.loginbox .row { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .2rem; }
.loginbox button {
  background: var(--gold); border: none; color: #1a1408; font: inherit; font-weight: 600;
  padding: .45rem 1rem; cursor: pointer; letter-spacing: .04em;
}
.loginbox button.ghost { background: none; border: 1px solid var(--line); color: var(--dim); font-weight: 400; }

/* 가입 신청 화면 — 로그인 상자와 같은 결이되 화면 안에 놓인다 */
.signup {
  background: var(--plate); border: 1px solid var(--line);
  padding: 1.6rem 1.5rem; width: min(26rem, 100%);
  display: flex; flex-direction: column; gap: .8rem;
}
.signup .hint { margin: 0 0 .2rem; font-size: .8rem; color: var(--dim); line-height: 1.8; }
.signup label { display: flex; flex-direction: column; gap: .3rem; font-size: .76rem; color: var(--dim); }
.signup input {
  background: #0b0d12; border: 1px solid var(--line); color: var(--ink);
  padding: .5rem .6rem; font: inherit;
}
.signup input:focus { outline: none; border-color: var(--gold); }
.signup .err { margin: 0; color: #e08585; font-size: .78rem; }
.signup .row { display: flex; justify-content: flex-end; margin-top: .2rem; }
.signup button {
  background: var(--gold); border: none; color: #1a1408; font: inherit; font-weight: 600;
  padding: .45rem 1.2rem; cursor: pointer; letter-spacing: .04em;
}
.loginbox .hint a { color: var(--gold); border-bottom: 1px solid var(--gold); }

/* 읽기 화면의 검수 바로가기 — 검수자에게만 보인다 */
.tocheck {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin: 1.4rem 0 0; padding: .6rem .9rem;
  background: var(--plate); border: 1px solid var(--line);
  font-family: var(--lab); font-size: .82rem; letter-spacing: .06em;
}
.tocheck a { color: var(--gold); border-bottom: 1px solid var(--gold); }
.tocheck .tostate { color: var(--dim); }
.tocheck .tostate.done { color: #7fb27f; }
.tocheck b { color: var(--ink); }

/* 검수 화면 — 로어를 읽어 내려가다가 후보가 걸린 문단 아래에서 바로 판정한다.
   판정 칸은 글의 일부가 아니라 **끼어든 것**으로 보여야 읽는 흐름이 안 끊긴다. */
/* 읽는 흐름을 끊고 끼어드는 칸이라 **바탕색부터 달라야** 한다.
   (사용자: "검수쪽은 색상을 바꿔줘. 검은색이면 뭔지 잘 모르겠어")
   판과 같은 어두운 색이면 본문인지 판정 칸인지 눈으로 안 갈린다. */
.rflow .rcard {
  margin: .4rem 0 1.8rem;
  background: #1c2333;
  border: 1px solid #33405c;
  border-left: 4px solid var(--gold);
  box-shadow: 0 0 0 1px rgba(214, 172, 82, .12), 0 6px 18px rgba(0, 0, 0, .45);
}
.rflow .rcard::before, .rflow .rcard::after { display: none; }  /* 잘린 모서리는 여기선 방해 */
.rflow .rcard .rid { color: var(--gold); font-weight: 600; }
.rflow .rcard .ren, .rflow .rcard .rko { color: #9aa6bd; }
.rflow .rcard .rissue { color: #ffe6b0; }
.rflow .rcard .rbtn { border-color: #44557a; color: #b9c3d6; }
.rflow .rcard textarea, .rflow .rcard input { background: #131926; border-color: #33405c; }
.rflow .pair { margin-bottom: 1rem; }
/* 후보가 걸린 문단임을 위쪽에서도 알 수 있게 */
.rflow .pair:has(+ .rcard) { background: rgba(214, 172, 82, .05); }
.rnext { margin: 1.6rem 0 0; }
.rnext button {
  background: var(--gold); border: 0; color: #1a1408; font: inherit; font-weight: 600;
  padding: .55rem 1.4rem; cursor: pointer; letter-spacing: .04em;
}
.rby i { color: var(--dim); font-style: normal; }

/* 확정한 뒤 이어지는 문장 — 확정된 것만 반영해 문단째로 보여 준다 */
.rafter {
  margin: .6rem 0 .2rem; padding: .55rem .7rem;
  background: rgba(127, 178, 127, .07); border: 1px solid rgba(127, 178, 127, .3);
}
.rafter .rlabel { display: block; margin: 0 0 .35rem; color: #8fce8f; }
.rafter p {
  margin: 0; font-family: var(--ko); font-size: .92rem; line-height: 1.9; color: #cfd6e2;
}
.rafter ins {
  background: rgba(127, 178, 127, .24); color: #b7e0b7;
  text-decoration: none; padding: 0 .05em;
}

.rtable { width: 100%; border-collapse: collapse; margin-top: .8rem; font-size: .86rem; }
.rtable th, .rtable td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--line); }
.rtable th { color: var(--dim); font-weight: 500; font-size: .76rem; letter-spacing: .06em; }
.rtable td:not(:first-child), .rtable th:not(:first-child) { text-align: right; width: 4.5rem; }
.rtable tr.done td { color: var(--dim); }

.rlist { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.rcard { background: var(--plate); border: 1px solid var(--line); padding: 1rem 1.1rem; }
.rhead { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.rid { font-size: .72rem; color: var(--dim); letter-spacing: .06em; }
.rcat { font-size: .72rem; color: var(--dim); }
.rstate { margin-left: auto; font-size: .72rem; padding: .12rem .5rem; border: 1px solid var(--line); }
.rstate[data-state="확정"] { color: #8fce8f; border-color: #3d5a3d; }
.rstate[data-state="기각"] { color: #d08c8c; border-color: #5a3d3d; }
.rstate[data-state="보류"] { color: #d0c08c; border-color: #5a523d; }
.ren, .rko { margin: .2rem 0; font-size: .84rem; color: var(--dim); }
.ren span, .rko span { color: var(--ink); }
/* 지금 번역에서 문제로 지목된 조각 — 수정 칸에서 이 부분만 손보면 된다 */
/* 원래 문단 — 지적된 조각만 붉게. 바로 아래 수정 칸과 대 보라고 있는 것이다. */
.rorig {
  margin: .2rem 0 .4rem; padding: .55rem .7rem;
  background: #131926; border: 1px solid #2a3446;
  font-family: var(--ko); font-size: .92rem; line-height: 1.85; color: #b9c3d6;
}
.rorig mark { background: rgba(224, 133, 133, .22); color: #ffd9d9; padding: 0 .1em; }

/* 이렇게 바뀝니다 — 뺀 글자는 붉게 그어서, 넣은 글자는 녹색으로.
   둘 다 **바뀐 글자에만** 붙는다. 조각 전체를 칠하면 한 글자만 고친 것도
   문장을 통째로 갈아치우는 것처럼 보인다. */
.rdiff {
  margin: .2rem 0 .6rem; padding: .55rem .7rem;
  background: #131926; border: 1px solid #2a3446;
  font-family: var(--ko); font-size: .92rem; line-height: 1.9; color: #b9c3d6;
}
.rdiff del {
  background: rgba(224, 133, 133, .2); color: #e8a9a9;
  text-decoration: line-through; padding: 0 .05em;
}
.rdiff ins {
  background: rgba(127, 178, 127, .24); color: #b7e0b7;
  text-decoration: none; padding: 0 .05em;
}

.rtable { width: 100%; border-collapse: collapse; margin-top: .8rem; font-size: .86rem; }
.rtable th, .rtable td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--line); }
.rtable th { color: var(--dim); font-weight: 500; font-size: .76rem; letter-spacing: .06em; }
.rtable td:not(:first-child), .rtable th:not(:first-child) { text-align: right; width: 4.5rem; }
.rtable tr.done td { color: var(--dim); }

.rlist { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.rcard { background: var(--plate); border: 1px solid var(--line); padding: 1rem 1.1rem; }
.rhead { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.rid { font-size: .72rem; color: var(--dim); letter-spacing: .06em; }
.rcat { font-size: .72rem; color: var(--dim); }
.rstate { margin-left: auto; font-size: .72rem; padding: .12rem .5rem; border: 1px solid var(--line); }
.rstate[data-state="확정"] { color: #8fce8f; border-color: #3d5a3d; }
.rstate[data-state="기각"] { color: #d08c8c; border-color: #5a3d3d; }
.rstate[data-state="보류"] { color: #d0c08c; border-color: #5a523d; }
.ren, .rko { margin: .2rem 0; font-size: .84rem; color: var(--dim); }
.ren span, .rko span { color: var(--ink); }
/* 지금 번역에서 문제로 지목된 조각 — 수정 칸에서 이 부분만 손보면 된다 */
/* 원래 문단 — 지적된 조각만 붉게. 바로 아래 수정 칸과 대 보라고 있는 것이다. */
.rorig {
  margin: .2rem 0 .4rem; padding: .55rem .7rem;
  background: #131926; border: 1px solid #2a3446;
  font-family: var(--ko); font-size: .92rem; line-height: 1.85; color: #b9c3d6;
}
.rorig mark { background: rgba(224, 133, 133, .22); color: #ffd9d9; padding: 0 .1em; }

/* 넣은 자리 — 새로 들어간 말만 녹색. 손으로 고치면 표시가 사라진다. */
.rdiff {
  margin: .2rem 0 .4rem; padding: .55rem .7rem;
  background: #131926; border: 1px solid #2a3446;
  font-family: var(--ko); font-size: .92rem; line-height: 1.85; color: #7c8699;
}
.rdiff ins {
  background: rgba(127, 178, 127, .22); color: #b7e0b7;
  text-decoration: none; padding: 0 .1em;
}

.rtable { width: 100%; border-collapse: collapse; margin-top: .8rem; font-size: .86rem; }
.rtable th, .rtable td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--line); }
.rtable th { color: var(--dim); font-weight: 500; font-size: .76rem; letter-spacing: .06em; }
.rtable td:not(:first-child), .rtable th:not(:first-child) { text-align: right; width: 4.5rem; }
.rtable tr.done td { color: var(--dim); }

.rlist { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.rcard { background: var(--plate); border: 1px solid var(--line); padding: 1rem 1.1rem; }
.rhead { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.rid { font-size: .72rem; color: var(--dim); letter-spacing: .06em; }
.rcat { font-size: .72rem; color: var(--dim); }
.rstate { margin-left: auto; font-size: .72rem; padding: .12rem .5rem; border: 1px solid var(--line); }
.rstate[data-state="확정"] { color: #8fce8f; border-color: #3d5a3d; }
.rstate[data-state="기각"] { color: #d08c8c; border-color: #5a3d3d; }
.rstate[data-state="보류"] { color: #d0c08c; border-color: #5a523d; }
.ren, .rko { margin: .2rem 0; font-size: .84rem; color: var(--dim); }
.ren span, .rko span { color: var(--ink); }
/* 지금 번역에서 문제로 지목된 조각 — 수정 칸에서 이 부분만 손보면 된다 */
/* 원래 문단 — 지적된 조각만 붉게. 바로 아래 수정 칸과 대 보라고 있는 것이다. */
.rorig {
  margin: .2rem 0 .4rem; padding: .55rem .7rem;
  background: #131926; border: 1px solid #2a3446;
  font-family: var(--ko); font-size: .92rem; line-height: 1.85; color: #b9c3d6;
}
.rorig mark { background: rgba(224, 133, 133, .22); color: #ffd9d9; padding: 0 .1em; }

/* 고친 자리 — 뺀 것은 붉게 그어서, 넣은 것은 푸르게. 위의 '원래'와 색을 맞춘다. */
.rdiff {
  margin: .2rem 0 .4rem; padding: .55rem .7rem;
  background: #131926; border: 1px solid #2a3446;
  font-family: var(--ko); font-size: .92rem; line-height: 1.85; color: #7c8699;
}
.rdiff del {
  background: rgba(224, 133, 133, .18); color: #e8a9a9;
  text-decoration: line-through; padding: 0 .1em;
}
.rdiff ins {
  background: rgba(127, 178, 127, .2); color: #b7e0b7;
  text-decoration: none; padding: 0 .1em;
}
.rdiff .same { color: var(--dim); font-style: italic; }
.rissue { margin: .6rem 0 .2rem; font-size: .9rem; }
.rwhy { margin: .1rem 0 .5rem; font-size: .82rem; color: var(--dim); }
.rlabel { display: block; font-size: .74rem; color: var(--dim); margin-top: .6rem; }
.rlabel em { color: var(--gold); font-style: normal; }
.rsug, .rnote {
  display: block; width: 100%; margin-top: .25rem; box-sizing: border-box;
  background: #0b0d12; border: 1px solid var(--line); color: var(--ink);
  padding: .45rem .55rem; font: inherit; font-size: .88rem; resize: vertical;
}
.rsug:focus, .rnote:focus { outline: none; border-color: var(--gold); }
.rrow { display: flex; gap: .4rem; align-items: center; margin-top: .8rem; flex-wrap: wrap; }
.rbtn {
  background: none; border: 1px solid var(--line); color: var(--dim);
  font: inherit; font-size: .78rem; padding: .3rem .8rem; cursor: pointer;
}
.rbtn:hover:not(:disabled) { color: var(--ink); border-color: var(--gold); }
.rbtn.on { background: var(--gold); border-color: var(--gold); color: #1a1408; font-weight: 600; }
.rbtn:disabled { opacity: .45; cursor: default; }
.rby { margin-left: auto; font-size: .72rem; color: var(--dim); }

@media (max-width: 720px) {
  .authbar { order: 3; margin-left: 0; }
}

/* 초상화가 어느 시점의 모습인지 */
.pwhich { margin: -.4rem 0 .8rem; font-size: .76rem; color: var(--dim); }