/* 분쟁 은하 · 訟事天象圖 — 천상열차분야지도(조선 천문도) 콘셉트.
   먹빛 바탕 + 한지색 글·금니 장식 + 인주(낙관) 포인트, 명조 계열 서체. */
* { margin:0; padding:0; box-sizing:border-box; }
[hidden] { display:none !important; }

:root {
  --ink:#10131b;          /* 먹 */
  --hanji:#e9dfc7;        /* 한지 */
  --hanji-dim:#b3a887;
  --gold:#c9a227;         /* 금니 */
  --seal:#a3282a;         /* 인주 */
  --line:rgba(201,162,39,.28);
  font-family:"Nanum Myeongjo","Noto Serif KR","AppleMyungjo",serif;
}
html, body { width:100%; height:100%; overflow:hidden; background:var(--ink);
  color:var(--hanji); font-family:inherit; }
#space { position:fixed; inset:0; display:block; cursor:grab; }
#space.dragging { cursor:grabbing; }

/* ── 상단 제자(題字) ── */
.topbar { position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:16px 22px; background:linear-gradient(180deg,rgba(16,19,27,.94),rgba(16,19,27,0));
  pointer-events:none; }
.topbar > * { pointer-events:auto; }
.brand { display:flex; gap:14px; align-items:center; }
.logo { width:44px; height:44px; border-radius:8px; background:var(--seal); color:#f3e9d5;
  font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1.5px rgba(243,233,213,.55), 0 2px 10px rgba(0,0,0,.5);
  letter-spacing:1px; }
.brand h1 { font-size:23px; font-weight:800; color:var(--hanji); letter-spacing:3px; }
.brand .sub { font-size:13px; font-weight:600; color:var(--hanji-dim); margin-left:10px; letter-spacing:1px; }
.counts { font-size:12px; color:var(--hanji-dim); margin-top:3px; letter-spacing:.5px; }
.actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.actions button, .actions .cta, .actions .ghost { border:1px solid var(--line); background:rgba(233,223,199,.05);
  color:var(--hanji); font-size:13px; font-weight:700; padding:8px 15px; border-radius:6px;
  cursor:pointer; font-family:inherit; text-decoration:none; letter-spacing:.5px; }
.actions button:hover, .actions .ghost:hover { background:rgba(201,162,39,.16); border-color:var(--gold); }
.actions button.accent { border-color:var(--gold); color:var(--gold); }
.actions button.accent.on { background:var(--gold); color:#191510; }
.actions .cta { background:var(--seal); border-color:var(--seal); color:#f3e9d5; font-weight:800; }

/* ── 성단 범례 ── */
.legend { position:fixed; top:80px; left:0; right:0; z-index:19; display:flex; gap:6px;
  padding:6px 22px; overflow-x:auto; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent); }
.legend::-webkit-scrollbar { display:none; }
.lchip { flex:none; display:flex; gap:7px; align-items:center; border:1px solid rgba(201,162,39,.22);
  background:rgba(16,19,27,.6); color:var(--hanji-dim); font-size:12px; font-weight:700;
  padding:5px 12px; border-radius:6px; cursor:pointer; font-family:inherit; backdrop-filter:blur(4px); }
.lchip .dot { width:7px; height:7px; border-radius:50%; }
.lchip:hover, .lchip.on { background:rgba(201,162,39,.16); color:var(--hanji); border-color:var(--gold); }

/* ── 연대기 HUD ── */
.year-hud { position:fixed; left:50%; bottom:74px; transform:translateX(-50%); z-index:21;
  display:flex; gap:14px; align-items:baseline; background:rgba(16,19,27,.82);
  border:1px solid var(--line); border-radius:8px; padding:10px 24px; backdrop-filter:blur(6px); }
.year-hud #year-label { font-size:34px; font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums; }
.year-hud #year-count { font-size:14px; color:var(--hanji-dim); }

/* ── 툴팁 ── */
.tooltip { position:fixed; z-index:30; max-width:270px; background:rgba(20,23,31,.96);
  border:1px solid var(--line); border-radius:8px; padding:10px 13px;
  font-size:12.5px; line-height:1.55; pointer-events:none; backdrop-filter:blur(6px); }
.tooltip .t { font-weight:800; color:var(--hanji); }
.tooltip .m { color:var(--hanji-dim); font-size:11.5px; margin-top:3px; }

/* ── 사례 상세 (두루마리 패널) ── */
.detail { position:fixed; top:136px; right:22px; z-index:30; width:308px; /* 목록(28) 위 */
  background:linear-gradient(180deg,rgba(24,27,36,.96),rgba(18,21,29,.96));
  border:1px solid var(--line); border-top:3px solid var(--gold); border-radius:8px;
  padding:18px; backdrop-filter:blur(8px); }
.detail .close { position:absolute; top:10px; right:12px; border:0; background:none;
  color:var(--hanji-dim); font-size:20px; cursor:pointer; font-family:inherit; }
.detail .kind { display:inline-block; font-size:11px; font-weight:800; border-radius:4px;
  padding:3px 10px; margin-bottom:9px; background:rgba(163,40,42,.2); color:#d98a80;
  border:1px solid rgba(163,40,42,.4); letter-spacing:.5px; }
.detail h2 { font-size:16px; font-weight:800; color:var(--hanji); line-height:1.45; margin-bottom:8px; }
.detail .meta { font-size:12.5px; color:var(--hanji-dim); margin-bottom:10px; line-height:1.5; }
.detail .ratio .bar { height:11px; border-radius:3px; overflow:hidden; display:flex; margin:6px 0 4px;
  border:1px solid rgba(233,223,199,.18); }
.detail .ratio .bar i { display:block; height:100%; }
.detail .ratio .bar i:first-child { background:var(--seal); }
.detail .ratio .bar i:last-child { background:#3d5a80; }
.detail .ratio .lbl { display:flex; justify-content:space-between; font-size:11.5px; color:var(--hanji); }
.detail .fine { font-size:10.5px; color:#7a7261; margin-top:10px; line-height:1.5; }

/* ── 내 사건 칩 ── */
.mycase-chip { position:fixed; left:50%; bottom:98px; transform:translateX(-50%); z-index:26;
  width:max-content; max-width:calc(100vw - 24px);
  text-align:center; background:rgba(16,19,27,.94); border:1.5px solid var(--gold); border-radius:8px;
  padding:14px 28px; backdrop-filter:blur(8px); animation:pop .4s ease; }
.mycase-chip .line { font-size:12.5px; color:var(--gold); font-weight:800; margin-bottom:5px; letter-spacing:.5px; }
.mycase-chip .big { font-size:17px; color:var(--hanji); margin-bottom:9px; }
.mycase-chip a { display:inline-block; background:var(--seal); color:#f3e9d5; font-size:13.5px;
  font-weight:800; text-decoration:none; border-radius:6px; padding:8px 20px; }
@keyframes pop { from { transform:translateX(-50%) scale(.85); opacity:0 } }

/* ── 목록 보기 (KWCAG 대체 뷰) ── */
.listview { position:fixed; inset:70px 0 0 0; z-index:28; overflow-y:auto;
  background:rgba(14,16,23,.98); padding:22px 26px 60px; }
.listview h2 { font-size:17px; font-weight:800; color:var(--hanji); margin:20px 0 8px;
  display:flex; gap:9px; align-items:center; letter-spacing:1px; }
.listview h2 .dot { width:9px; height:9px; border-radius:50%; }
.listview ul { list-style:none; }
.listview li { font-size:13.5px; color:var(--hanji-dim); padding:6px 0 6px 19px;
  border-bottom:1px solid rgba(201,162,39,.1); }
.listview li .k { color:#7a7261; font-size:12px; margin-left:6px; }
.listview li[data-id] { cursor:pointer; }
.listview li[data-id]:hover { color:var(--hanji); background:rgba(201,162,39,.08); }
.detail .src { margin-top:10px; font-size:12px; }
.detail .src a { color:var(--gold); }

/* ── 푸터 ── */
.foot { position:fixed; left:0; right:0; bottom:0; z-index:20; display:flex;
  justify-content:space-between; gap:12px; padding:10px 22px; font-size:11.5px; color:#7a7261;
  background:linear-gradient(0deg,rgba(16,19,27,.92),rgba(16,19,27,0)); pointer-events:none;
  letter-spacing:.3px; }

@media (max-width:820px) {
  .brand .sub, .foot .hint, .counts { display:none; }
  .brand h1 { font-size:18px; letter-spacing:1px; }
  .detail { left:12px; right:12px; width:auto; top:auto; bottom:98px; }
  /* 모바일에서도 전체 보기(축소 복귀)·목록 보기(KWCAG 대체 뷰)는 유지 — 크기만 축소 */
  .actions { gap:5px; }
  .actions button, .actions .cta { font-size:11.5px; padding:6px 10px; }
  #btn-timeline { display:none; }
}