/* ============================================================
   expanded.css — 주석판 전용 레이어
   기본판 app.css 위에 얹힌다. 주석·평가·비평 요소만 담는다.
   ============================================================ */

/* 잉크색(--ink 계열)과 .ed-switch 는 app.css 에 정의되어 있다.
   두 판본이 함께 쓰기 때문이다. */

/* ---------------- 판본 표시 ---------------- */
.ed-mark {
  font-size: 10px; color: var(--ink); border: 1px solid var(--ink);
  padding: 1px 6px; margin-left: 6px; letter-spacing: .06em;
}
.brand .dot.ink { background: var(--ink); box-shadow: 0 0 0 3px var(--ink-soft); }
.topbar { border-bottom-color: var(--ink-dim); }

/* ---------------- 주석 블록 ---------------- */
.annos {
  margin: 46px 0 0; padding-top: 30px;
  border-top: 1px solid var(--border);
}
.annos-head {
  display: flex; align-items: center; gap: 11px; margin-bottom: 6px;
  font-family: var(--font-ui); font-size: 12px; color: var(--ink); letter-spacing: .05em;
}
.annos-head .line { flex: 1; height: 1px; background: var(--ink-dim); opacity: .5; }
.annos-note {
  font-family: var(--font-ui); font-size: 10.5px; color: var(--fg-faint);
  margin-bottom: 22px; line-height: 1.8; word-break: keep-all;
}

.anno {
  position: relative; margin-bottom: 22px;
  border: 1px solid var(--ink-dim); border-left: 3px double var(--ink);
  background: var(--bg-panel);
}
.anno-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 11px 15px 10px; border-bottom: 1px solid var(--border-soft);
  background: var(--ink-soft);
}
.anno-kind {
  font-family: var(--font-ui); font-size: 10px; letter-spacing: .12em;
  border: 1px solid currentColor; padding: 1px 6px; flex: none;
}
.anno-kind.k-주석 { color: var(--ink); }
.anno-kind.k-반론 { color: var(--miss); }
.anno-kind.k-의견 { color: var(--accent); }
.anno-kind.k-유보 { color: var(--warn); }
.anno-title {
  font-family: var(--font-body); font-size: 15.5px; font-weight: 700;
  color: var(--fg-strong); line-height: 1.55; word-break: keep-all; flex: 1; min-width: 0;
}
.anno-body { padding: 15px 17px 3px; }
.anno-body .prose { font-size: calc(var(--read-size) - 1px); }
.anno-body .prose > *:last-child { margin-bottom: 15px; }
.anno-body .prose h2, .anno-body .prose h3 { display: none; }

/* 주석 안의 강조는 잉크색으로 */
.anno-body .prose strong { color: var(--ink); }
.anno-body .prose blockquote { border-left-color: var(--ink); }

/* ---------------- 낱권 평가 ---------------- */
.verdict {
  border: 1px solid var(--ink-dim); border-left: 3px double var(--ink);
  background: var(--ink-soft); padding: 13px 15px; margin-bottom: 18px;
}
.verdict .vd-top {
  display: flex; align-items: center; gap: 10px; margin-bottom: 9px; flex-wrap: wrap;
}
.verdict .vd-stars {
  font-family: var(--font-ui); font-size: 13px; color: var(--ink); letter-spacing: .1em; flex: none;
}
.verdict .vd-v {
  font-family: var(--font-body); font-size: 15px; font-weight: 700;
  color: var(--fg-strong); line-height: 1.5; word-break: keep-all;
}
.verdict .vd-b {
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.85;
  color: var(--fg-muted); word-break: keep-all;
}
.verdict .vd-tag {
  font-family: var(--font-ui); font-size: 9.5px; color: var(--ink);
  border: 1px solid var(--ink-dim); padding: 1px 5px; flex: none;
}

/* ---------------- 비평 목록 ---------------- */
.essay-grid { display: grid; gap: 10px; margin-top: 22px; }
.essay-card {
  display: grid; grid-template-columns: 46px 1fr auto; gap: 15px; align-items: start;
  border: 1px solid var(--border); border-left: 3px double var(--ink);
  background: var(--bg-panel); padding: 16px 17px; text-align: left; transition: .13s;
}
.essay-card:hover { border-color: var(--ink); background: var(--bg-hover); transform: translateX(2px); }
.essay-card .ec-n {
  font-family: var(--font-ui); font-size: 20px; color: var(--ink); line-height: 1.2; text-align: center;
}
.essay-card .ec-t {
  display: block; font-family: var(--font-body); font-size: 17px; font-weight: 700;
  color: var(--fg-strong); line-height: 1.5; word-break: keep-all; margin-bottom: 7px;
}
.essay-card .ec-s {
  display: block; font-family: var(--font-body); font-size: 13.5px; line-height: 1.8;
  color: var(--fg-muted); word-break: keep-all;
}
.essay-card .ec-m { font-family: var(--font-ui); font-size: 10.5px; color: var(--fg-faint); white-space: nowrap; }

/* ---------------- 비평 본문 ---------------- */
.essay-top { margin-bottom: 32px; }
.essay-kicker {
  font-family: var(--font-ui); font-size: 11px; color: var(--ink);
  letter-spacing: .1em; margin-bottom: 14px;
}
h1.essay-title {
  font-family: var(--font-body); font-size: 32px; line-height: 1.4; font-weight: 700;
  color: var(--fg-strong); word-break: keep-all; margin-bottom: 14px;
}
.essay-sub {
  font-family: var(--font-body); font-size: 15.5px; line-height: 1.9;
  color: var(--fg-muted); word-break: keep-all;
}
.essay-rule {
  height: 1px; margin-top: 24px;
  background: linear-gradient(to right, var(--ink), var(--border) 40%, transparent);
}
.essay-sign {
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--border);
  font-family: var(--font-ui); font-size: 10.5px; color: var(--fg-faint); line-height: 1.9;
}
.essay-sign b { color: var(--ink); font-weight: 400; }

/* 비평 본문의 § 표시는 잉크색 */
#essay-page .prose h2::before { color: var(--ink); }
#essay-page .prose h3 { color: var(--ink); }
#essay-page .prose ul > li::before { color: var(--ink); }

/* ---------------- 사이드바 비평 항목 ---------------- */
.nav-item.ink { border-left-color: transparent; }
.nav-item.ink .num { color: var(--ink-dim); }
.nav-item.ink.active { background: var(--ink-soft); border-left-color: var(--ink); }
.nav-item.ink.active .num { color: var(--ink); }
.part-label.ink { color: var(--ink); }

/* 주석이 있는 일차 표시 */
.nav-item .anno-dot {
  width: 4px; height: 4px; background: var(--ink); flex: none; opacity: .8;
}

@media (max-width: 700px) {
  .essay-card { grid-template-columns: 34px 1fr; }
  .essay-card .ec-m { display: none; }
}

@media print {
  .anno { break-inside: avoid; }
}