/* v3 — 마스터·디테일 2단. 페이지 스크롤 0, 패널별 독립 스크롤. */

html, body { height: 100%; overflow: hidden; }
.shell {
  display: grid;
  grid-template-columns: var(--w-list) 1fr;
  height: calc(100dvh - var(--h-topbar) - var(--h-filterbar));
  max-width: 1680px; margin: 0 auto;
  border-left: 1px solid var(--line-200); border-right: 1px solid var(--line-200);
}
.pane { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.pane--list { border-right: 1px solid var(--line-200); background: var(--bg-rail); }
.pane--detail { background: var(--bg); }
.pane--detail:focus { outline: none; }

/* ── 리스트 헤더 ── */
.panehead {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  height: var(--h-filterbar); padding: 0 var(--s3);
  background: var(--bg-rail); border-bottom: 1px solid var(--line-200);
  font-size: var(--fs-12); color: var(--ink-500);
}
.panehead b { color: var(--ink-900); }
.panehead select {
  font-size: var(--fs-11); color: var(--ink-700); background: var(--bg);
  border: 1px solid var(--line-200); border-radius: var(--r-2); padding: 3px 5px;
}

/* ── 이슈 항목 ── */
.ilist { padding-bottom: var(--s6); }
.ii {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 10px 12px 9px; border-bottom: 1px solid var(--line-100);
  border-left: 3px solid transparent; background: var(--bg);
  transition: background var(--dur) var(--ease);
}
.ii:hover { background: var(--bg-sunken); }
.ii[aria-selected="true"] { background: var(--navy-50); border-left-color: var(--navy-800); }
.ii:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

.ii__top { display: flex; align-items: center; gap: var(--s2); }
.rank-num {
  font-size: var(--fs-12); font-weight: 700; color: var(--ink-400);
  font-variant-numeric: tabular-nums; width: 20px; flex: none;
}
.ii[aria-selected="true"] .rank-num { color: var(--navy-700); }
.ii__spacer { flex: 1; }
.ii__title {
  font-size: var(--fs-13); font-weight: 500; line-height: var(--lh-snug); color: var(--ink-900);
  margin-top: 3px; word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ii__meta {
  margin-top: 3px; font-size: var(--fs-11); color: var(--ink-400);
  letter-spacing: var(--ls-wide); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.density-bar { height: 2px; background: var(--navy-100); margin-top: 6px; border-radius: 1px; }
.density-bar i { display: block; height: 100%; background: var(--navy-500); opacity: .55; border-radius: 1px; }

/* ── 상세 ── */
.actionbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: var(--s2);
  height: var(--h-filterbar); padding: 0 var(--s5);
  background: var(--bg); border-bottom: 1px solid var(--line-200);
}
.pager { display: flex; align-items: center; gap: 4px; font-size: var(--fs-12); color: var(--ink-500); }
.pager button {
  width: 24px; height: 24px; display: grid; place-items: center;
  border: 1px solid var(--line-200); border-radius: var(--r-2); color: var(--ink-700);
}
.pager button:hover:not(:disabled) { background: var(--bg-sunken); }
.pager button:disabled { opacity: .4; cursor: default; }
.actionbar .spacer { flex: 1; }

.detail-grid {
  display: grid; grid-template-columns: 1fr var(--w-aside); gap: var(--s6);
  padding: var(--s5) var(--s5) var(--s8);
}
.detail-main { min-width: 0; }

.lede { font-size: var(--fs-15); line-height: 1.62; color: var(--ink-700);
  word-break: keep-all; overflow-wrap: anywhere; }
.lede__hd { font-size: var(--hd, 22px); line-height: var(--lh-tight); font-weight: 700;
  color: var(--ink-900); letter-spacing: var(--ls-tight); }
.lede__sep { color: var(--ink-400); font-weight: 400; }

.imeta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-top: var(--s3); font-size: var(--fs-12); color: var(--ink-500); }
.imeta__nums { font-variant-numeric: tabular-nums; }
.imeta__nums b { color: var(--ink-900); font-weight: 700; }
.isec { margin-top: var(--s5); }

/* 우측 메타 컬럼 */
.aside-card {
  border: 1px solid var(--line-200); border-radius: var(--r-3);
  background: var(--bg-rail); padding: var(--s4);
}
.aside-card + .aside-card { margin-top: var(--s3); }
.aside-card h3 {
  font-size: var(--fs-11); font-weight: 700; color: var(--ink-400);
  letter-spacing: var(--ls-wide); margin-bottom: var(--s2);
}
.kv { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2);
  font-size: var(--fs-12); color: var(--ink-500); padding: 3px 0; }
.kv b { color: var(--ink-900); font-weight: 700; font-variant-numeric: tabular-nums; }
.bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--line-100); margin-top: 6px; }
.bar i { display: block; height: 100%; }
.bar .orig { background: var(--navy-600); }
.bar .wire { background: var(--navy-300); }
.tagrow { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

@media (max-width: 1279px) {
  .detail-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .detail-aside { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s3); }
  .aside-card + .aside-card { margin-top: 0; }
}

/* ── 모바일: 목록 ↔ 상세 전환 ── */
@media (max-width: 767px) {
  html, body { overflow: auto; height: auto; }
  .shell { grid-template-columns: 1fr; height: auto; border: none; }
  .pane { overflow: visible; }
  body[data-view="list"] .pane--detail { display: none; }
  body[data-view="detail"] .pane--list { display: none; }
  .pane--list { border-right: none; }
  .detail-grid { padding: var(--s4) var(--s4) 72px; }
  .lede__hd { font-size: 18px; }
  .actionbar { padding: 0 var(--s4); }
  .topbar-inner { flex-wrap: wrap; height: auto; padding: var(--s3) var(--s4); gap: var(--s2); }
  .topbar-meta { width: 100%; flex-wrap: wrap; gap: var(--s2); }
  .filterbar { height: auto; flex-wrap: wrap; padding: var(--s2) var(--s4); gap: var(--s2); }
  .search-box input { width: 150px; }
  .stat-line { width: 100%; }
  .back-btn { display: inline-flex !important; }
}
.back-btn { display: none; }