:root {
  --bg: #f6f7f9; --panel: #fff; --line: #e3e6ea; --ink: #1d2228; --dim: #666f7a;
  --accent: #c8102e; --navy: #26313d; --warn: #8a5a00; --warn-bg: #fdf1dc;
  --side: 194px; --aside: 380px;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.55 "Malgun Gothic", system-ui, sans-serif; color: var(--ink); background: var(--bg); }
body.masked .layout, body.masked #viewer { filter: blur(18px); }
.hidden { display: none !important; }
.mono { font-family: Consolas, monospace; font-size: 12.5px; }
.empty { color: var(--dim); padding: 10px 0; font-size: 14px; }
button { font: inherit; cursor: pointer; border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 5px 10px; }
button:hover { background: #f0f2f5; }
h3.sec { font-size: 14px; color: var(--dim); margin: 18px 0 8px; }

header { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--navy); color: #fff; }
.brand { font-weight: 700; }
.brand span { font-weight: 400; opacity: .75; margin-left: 6px; }
.who { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.who form { margin: 0; }
#menu { display: none; background: transparent; color: #fff; border-color: #44515f; }

/* ── 3단 레이아웃: 사이드바 · 본문 · 상세 패널 ───────────────── */
.layout { display: grid; grid-template-columns: var(--side) minmax(0, 1fr) auto; align-items: start; }

#side { position: sticky; top: 0; align-self: stretch; display: flex; flex-direction: column; gap: 2px;
  padding: 12px 10px; background: #fff; border-right: 1px solid var(--line); min-height: calc(100vh - 49px); }
.nav { text-align: left; border: 0; border-radius: 7px; padding: 8px 11px; color: #3b4652; background: transparent; }
.nav:hover { background: #eef1f5; }
.nav.on { background: var(--navy); color: #fff; font-weight: 700; }
.toggle { display: flex; align-items: flex-start; gap: 7px; margin-top: 18px; padding: 0 4px; font-size: 13px; color: #3b4652; cursor: pointer; word-break: keep-all; }
.toggle input { margin: 2px 0 0; flex: none; }
.side-note { margin: 5px 4px 0; font-size: 11.5px; color: var(--dim); line-height: 1.5; word-break: keep-all; }

main { min-width: 0; padding: 0 0 28px; }
/* 표 머리행이 top:53px 로 이 줄 바로 아래에 붙는다. 높이를 고정해 어긋나지 않게 한다. */
.bar { display: flex; gap: 10px; align-items: center; height: 53px; padding: 0 16px; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
#q { flex: 1; max-width: 460px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.count { color: var(--dim); font-size: 13px; }
/* 초광폭 모니터에서 표가 과하게 늘어나지 않도록 본문 폭을 제한한다 */
#body { padding: 14px 16px; max-width: 1680px; }

/* ── 타임라인: 주체별 4열 표 (내부용 PDF와 같은 형식) ───────── */
.tl-head h2 { font-size: 20px; margin: 2px 0 4px; letter-spacing: -.3px; }
.tl-head p { margin: 0 0 12px; font-size: 12.5px; color: var(--dim); }
/* overflow 를 주면 sticky 의 기준 상자가 이 요소가 되어 머리행이 표 안으로 내려온다.
   좁은 화면에서는 세로 연표로 바뀌므로 가로 스크롤 상자가 필요 없다. */
.tl-wrap { border: 1px solid #cfd6de; border-radius: 4px; background: #fff; }

table.tl { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
table.tl th { color: #fff; font-size: 12.5px; font-weight: 700; text-align: left; padding: 7px 10px;
  position: sticky; top: 53px; z-index: 3; }
th.h-when { background: #3a4048; width: 92px; }
th.h-union { background: #1f3a5f; }
th.h-gu { background: #3d6099; }
th.h-nsr { background: var(--accent); }
th.h-molit { background: #2e7d4f; }

table.tl td { border-bottom: 1px solid #e6eaef; padding: 7px 10px; vertical-align: top; }
table.tl tbody tr:nth-child(even) td { background: #fafbfc; }
table.tl tbody tr.internal td { background: var(--warn-bg); }
td.when { font-weight: 700; font-size: 12.5px; color: #2b3138; background: #eef1f5 !important; white-space: nowrap; }
table.tl tbody tr.internal td.when { background: #f6e6c8 !important; }
td.none { color: #c2c9d1; text-align: left; }
td.hit { cursor: pointer; }
td.hit:hover { background: #eaf1fb !important; }
td.hit .t { display: block; word-break: keep-all; }
td.hit .d { color: #46505b; font-size: 12.5px; margin-top: 3px; word-break: keep-all; }
td.hit .r { color: #5a7ca8; font-size: 11.5px; margin-top: 4px; }
/* 묶인 사건 한 줄 */
td.grouped .gcount { font-size: 11px; font-weight: 700; color: #4a6b96; background: #e4edf8; border-radius: 9px; padding: 1px 7px; margin-left: 4px; }
.gmini { list-style: none; margin: 5px 0 0; padding: 0 0 0 9px; border-left: 2px solid #dbe2ea; }
.gmini li { font-size: 12.5px; color: #46505b; padding: 1px 0; word-break: keep-all; }
.gmini .mono { color: #7b8592; margin-right: 4px; }
.gsub { font-size: 12px; color: var(--dim); margin-top: 2px; }
.lane-tag { display: none; }

.src { display: inline-block; font-size: 10.5px; font-weight: 700; color: #fff; padding: 1px 6px; border-radius: 3px; margin: 3px 3px 0 0; vertical-align: middle; white-space: nowrap; }
.s-doc { background: #2e7d4f; } .s-drawing { background: #2b5fa8; } .s-minutes { background: #37475a; }
.s-record { background: #c07800; } .s-kakao { background: var(--accent); } .s-quote { background: #7b8592; }
.s-plan { background: #7b8592; }

.legend { margin-top: 12px; padding: 10px 12px; background: #eef1f5; border-left: 3px solid #9aa6b4; border-radius: 3px; }
.legend p { margin: 0 0 4px; font-size: 12px; color: #3f4954; line-height: 1.8; }
.legend p:last-child { margin: 0; }

.chip { font-size: 11.5px; padding: 2px 7px; border-radius: 10px; background: #eef1f4; color: #47525e; white-space: nowrap; }
.chip.yes { background: #e7f4ec; color: #1c6b3a; }
.chip.no, .chip.lock { background: #fbe9ec; color: #9c1026; }
.chip.warn { background: #f6e2bd; color: var(--warn); }

/* ── 표 ─────────────────────────────────────────────────────── */
table.docs { width: 100%; border-collapse: collapse; background: #fff; font-size: 14px; }
table.docs th, table.docs td { border-bottom: 1px solid var(--line); padding: 7px 9px; text-align: left; vertical-align: top; }
table.docs th { background: #eef1f4; font-size: 12.5px; color: #47525e; position: sticky; top: 53px; }
table.docs tbody tr { cursor: pointer; }
table.docs tbody tr:hover { background: #f4f7fb; }

/* ── 검색 결과 ──────────────────────────────────────────────── */
.hits { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.hits li { padding: 7px 9px; background: #fff; border: 1px solid var(--line); border-radius: 7px; margin-bottom: 5px; cursor: pointer; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.hits li:hover { background: #f4f7fb; }
.hit-lane { font-size: 11.5px; color: var(--dim); background: #eef1f4; border-radius: 9px; padding: 1px 7px; }

/* ── 일정 ───────────────────────────────────────────────────── */
table.tl tr.sched-row td { background: #f2f7ff; }
table.tl tr.sched-row td.when { background: #e3edfb !important; color: #2f568c; }
td.sched { border-left: 0; }
td.sched .t { color: #1f3f6b; }

.sched-form { background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 9px; }
.sched-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--dim); }
.sched-form input, .sched-form select, .sched-form textarea {
  font: inherit; font-size: 14px; color: var(--ink); padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.sched-form textarea { resize: vertical; }
.sf-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.sf-date { flex: 0 0 170px; }
.sf-lane { flex: 1 1 200px; }
.sf-actions { align-items: center; margin-top: 2px; }
.sf-actions button[type="submit"] { background: var(--navy); color: #fff; border-color: var(--navy); font-weight: 700; }
.sf-actions button[type="submit"]:hover { background: #33404f; }
.sf-del { color: var(--accent); border-color: #eccfd5; }
.sf-del:hover { background: #fbe9ec; }
.sf-msg { font-size: 12.5px; color: var(--accent); }

.hits li .hit-lane.l-union { background: #1f3a5f; color: #fff; }
.hits li .hit-lane.l-gu { background: #3d6099; color: #fff; }
.hits li .hit-lane.l-nsr { background: var(--accent); color: #fff; }
.hits li .hit-lane.l-molit { background: #2e7d4f; color: #fff; }

/* ── 우측 상세 패널 ─────────────────────────────────────────── */
#panel { width: var(--aside); background: var(--panel); border-left: 1px solid var(--line); padding: 16px; position: sticky; top: 0; max-height: 100vh; overflow: auto; }
#panel h2 { font-size: 16.5px; margin: 0 26px 8px 0; line-height: 1.4; }
#panel h3 { font-size: 13px; margin: 16px 0 6px; color: var(--dim); }
.panel-close { position: absolute; top: 10px; right: 12px; border: 0; font-size: 19px; background: none; line-height: 1; }
#panel dl { display: grid; grid-template-columns: 82px 1fr; gap: 4px 8px; margin: 10px 0 0; font-size: 13.5px; }
#panel dt { color: var(--dim); }
#panel dd { margin: 0; }
.detail { font-size: 14px; color: #39424c; margin: 12px 0 0; }
.parts, .refs { margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.parts li { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.parts audio { width: 100%; }
.refs li { padding: 6px 7px; border-radius: 6px; }
.refs li.link { cursor: pointer; }
.refs li.link:hover { background: #f0f4f9; }
.ref-head { word-break: keep-all; }
.ref-head.link { cursor: pointer; }
.ref-head.link:hover { color: #1f4d86; text-decoration: underline; }
/* 근거 자료에서 바로 원문을 여는 버튼들 */
.pbtns { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 2px; }
.pbtns button { font-size: 12px; padding: 3px 10px; border-color: #c3d2e4; color: #1f4d86; background: #f2f7fd; }
.pbtns button:hover { background: #e3edfa; }
.pbtns audio { width: 100%; }
.fname { color: var(--dim); font-size: 12.5px; word-break: break-all; }
.missing { color: var(--accent); }
/* 위원 메모 — 서버에 저장돼 모든 위원이 함께 본다 */
.notes { list-style: none; margin: 0 0 10px; padding: 0; }
.notes li { padding: 8px 10px; background: #f7f9fc; border: 1px solid #e6ebf2;
  border-radius: 8px; margin-bottom: 6px; }
.note-body { font-size: 13.5px; line-height: 1.55; word-break: keep-all; white-space: pre-wrap; }
.note-by { font-weight: 700; color: #1f4d86; }
.note-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; color: var(--dim); }
.note-del { font-size: 11.5px; padding: 1px 8px; color: var(--accent); border-color: #eccfd5; }
.note-del:hover { background: #fbe9ec; }
.note-form textarea { width: 100%; font: inherit; font-size: 13.5px; padding: 8px;
  border: 1px solid var(--line); border-radius: 7px; resize: vertical; color: var(--ink); }
.note-form .sf-actions { margin-top: 6px; }
.note-form button[type="submit"] { background: var(--navy); color: #fff; border-color: var(--navy); font-weight: 700; }

/* ── 원문 뷰어 ──────────────────────────────────────────────── */
#viewer { position: fixed; inset: 0; background: #14181d; z-index: 50; display: flex; flex-direction: column; }
.viewer-top { display: flex; align-items: center; gap: 10px; padding: 8px 14px; color: #e9edf2; background: #1d2430; }
.viewer-nav { margin-left: auto; display: flex; align-items: center; gap: 8px; }
#pageinfo { font-family: Consolas, monospace; }
/* align-items 기본값 stretch 가 이미지를 세로로 늘려 비율을 깨뜨린다.
   세로로 긴 문서는 max-width 에 걸려 티가 안 났지만 가로 사진은 늘어났다. */
.viewer-body { flex: 1; overflow: auto; display: flex; align-items: flex-start;
  justify-content: center; padding: 14px; }
#page { width: auto; height: auto; max-width: 100%; align-self: flex-start; object-fit: contain;
  user-select: none; -webkit-user-drag: none; pointer-events: none; box-shadow: 0 2px 20px #0008; }

/* ── 로그인 ─────────────────────────────────────────────────── */
.login-page { display: grid; place-items: center; min-height: 100vh; background: var(--navy); }
.login-box { background: #fff; padding: 28px; border-radius: 12px; width: 320px; display: flex; flex-direction: column; gap: 10px; }
.login-box h1 { margin: 0; font-size: 20px; }
.login-box .sub { margin: 0; color: var(--dim); font-size: 14px; }
.login-box label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--dim); }
.login-box input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font: inherit; color: var(--ink); }
.login-box button { background: var(--navy); color: #fff; border: 0; padding: 9px; font-weight: 700; }
.login-box .error { color: var(--accent); font-size: 13px; margin: 0; }
.login-box .notice { color: var(--dim); font-size: 12px; margin: 4px 0 0; }

/* ── 로그인 직후 인트로 ─────────────────────────────────────── */
body.intro-on { overflow: hidden; }
#intro { position: fixed; inset: 0; z-index: 100; overflow: hidden; background: #0b1119;
  opacity: 1; transition: opacity .6s ease; }
body.intro-done #intro { opacity: 0; pointer-events: none; }

/* 이미지를 위에, 그라데이션을 아래에 깐다. 이미지가 없으면 그라데이션만 보인다. */
.intro-bg { position: absolute; inset: 0; background-color: #12202f;
  /* --intro-img 는 app.html 이 버전 붙여 넘긴다 (캐시 무효화). 없으면 그라데이션만. */
  background-image: var(--intro-img, url("/static/intro.jpg")),
                    linear-gradient(140deg, #16273a 0%, #24405c 45%, #7d5a44 100%);
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat;
  /* 원본이 960x490 이라 큰 화면에서는 조금 확대된다. 아주 약한 블러로 눌러준다.
     블러 가장자리가 비치지 않게 살짝 키워서 깐다. */
  filter: blur(.5px); transform-origin: center;
  inset: -6px;
  animation: intro-zoom 5.5s cubic-bezier(.22, .61, .36, 1) both; }

.intro-veil { position: absolute; inset: 0;
  background: linear-gradient(90deg, #07101ae0 0%, #07101a9c 42%, #07101a33 78%, #07101a00 100%),
              linear-gradient(0deg, #060d16cc 0%, #060d1600 46%); }

/* 컨테이너는 고정하고 자식만 순서대로 등장시킨다.
   (컨테이너에 애니메이션을 걸면 transform 이 세로 중앙정렬을 덮어쓴다) */
.intro-text { position: absolute; left: clamp(22px, 7vw, 92px); top: 50%; transform: translateY(-50%);
  color: #fff; max-width: min(82vw, 560px); }
.intro-eyebrow { margin: 0 0 12px; font-size: clamp(11px, 1.5vw, 13px); letter-spacing: .22em;
  color: #9fc1e6; animation: intro-rise .9s .25s ease-out both; }
.intro-text h1 { margin: 0; font-size: clamp(30px, 6vw, 58px); font-weight: 800;
  line-height: 1.1; text-shadow: 0 2px 26px #00000070;
  animation: intro-hero 1.2s .5s cubic-bezier(.16, .84, .44, 1) both; }
.intro-rule { width: 78px; height: 3px; margin: 16px 0 14px; border-radius: 2px;
  background: linear-gradient(90deg, #ffffff, #ffffff00);
  transform-origin: left center; animation: intro-wipe 1s 1.05s cubic-bezier(.16, .84, .44, 1) both; }
.intro-sub { margin: 0; font-size: clamp(15px, 2.4vw, 22px); color: #dbe7f4; font-weight: 500;
  animation: intro-rise 1s .95s ease-out both; }
.intro-who { margin: 24px 0 0; font-size: 13px; color: #9fb3c9;
  padding-top: 14px; border-top: 1px solid #ffffff2e; display: inline-block;
  animation: intro-rise 1s 1.45s ease-out both; }

.intro-skip { position: absolute; right: 20px; bottom: 18px; background: #ffffff1f; color: #e8eef5;
  border: 1px solid #ffffff3d; border-radius: 20px; padding: 6px 15px; font-size: 13px;
  backdrop-filter: blur(4px); animation: intro-rise .7s 2.1s ease-out both; }
.intro-skip:hover { background: #ffffff33; }

@keyframes intro-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes intro-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes intro-hero {
  from { opacity: 0; transform: translateY(24px) scale(.97); letter-spacing: .07em; }
  to { opacity: 1; transform: none; letter-spacing: -.02em; }
}
@keyframes intro-wipe { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .intro-bg, .intro-eyebrow, .intro-text h1, .intro-rule, .intro-sub, .intro-who, .intro-skip {
    animation-duration: .01ms; animation-delay: 0ms;
  }
  #intro { transition-duration: .01ms; }
}

@media print { body { display: none !important; } }

/* ── 좁은 화면: 상세 패널을 아래에서 올라오는 시트로 ──────────
   예전에는 본문 아래에 이어 붙여서, 긴 타임라인에서는 사건을 눌러도
   화면이 그대로라 한참 스크롤해야 내용이 보였다. */
@media (max-width: 1180px) {
  .layout { grid-template-columns: var(--side) minmax(0, 1fr); }
  #panel {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 40;
    width: auto; max-height: 84vh; overflow: auto;
    border: 0; border-top: 1px solid var(--line); border-radius: 15px 15px 0 0;
    box-shadow: 0 -10px 36px #0000002e;
    padding: 6px 16px 28px;
  }
  /* 손잡이 표시 */
  #panel::before { content: ""; display: block; width: 38px; height: 4px; margin: 6px auto 10px;
    background: #cfd6de; border-radius: 3px; }
  #panel h2 { margin-right: 34px; }
  .panel-close { position: sticky; float: right; top: 0; right: 0; margin: -4px -6px 0 0;
    width: 32px; height: 32px; border-radius: 50%; background: #eef1f5; z-index: 2; }
  body.panel-open { overflow: hidden; }
  body.panel-open::after { content: ""; position: fixed; inset: 0; background: #0b111947; z-index: 39; }
}

/* ── 모바일: 사이드바는 서랍, 4열 레인은 세로 연표로 ─────────── */
@media (max-width: 860px) {
  #menu { display: block; }
  .layout { grid-template-columns: minmax(0, 1fr); }
  #side { position: fixed; top: 49px; left: 0; bottom: 0; width: 220px; z-index: 20;
    transform: translateX(-100%); transition: transform .18s ease; box-shadow: 2px 0 14px #0002; }
  body.side-open #side { transform: none; }

  /* 표를 유지하되 2열로 줄인다(조합·협상단 / 그 외).
     열 구성 자체는 app.js 가 화면 폭을 보고 바꾼다. */
  table.tl { font-size: 12px; }
  table.tl th { position: static; padding: 6px 7px; font-size: 11px; line-height: 1.35; }
  th.h-when { width: 62px; }
  th.h-rest { background: #4a5563; }          /* 여러 기관이 섞인 열 */
  table.tl td { padding: 7px; }
  /* 고정 레이아웃이라 nowrap 이면 긴 날짜가 칸 밖으로 넘친다 */
  td.when { padding: 7px 5px; font-size: 11px; white-space: normal; line-height: 1.35; }
  /* 2열에서는 어느 쪽이 빈 칸인지 한눈에 보이므로 — 는 지운다 */
  table.tl td.none { font-size: 0; }
  td.hit .t { font-size: 12.5px; }
  td.hit .d { font-size: 11.5px; margin-top: 2px; }
  td.hit .r { font-size: 10.5px; }
  .gmini li { font-size: 11px; }
  .gmini { padding-left: 7px; }
  .src { font-size: 10px; padding: 1px 5px; margin: 2px 2px 0 0; }

  /* 오른쪽 열은 기관이 섞이므로 배지로 구분한다.
     왼쪽(조합·협상단) 열은 열 제목만으로 분명하니 배지를 숨긴다. */
  .lane-tag { display: inline-block; font-size: 10px; font-weight: 700; color: #fff;
    border-radius: 8px; padding: 1px 6px; margin-bottom: 3px; background: #6b7683; }
  tr.l-union .lane-tag { display: none; }
  tr.l-gu .lane-tag { background: #3d6099; }
  tr.l-nsr .lane-tag { background: var(--accent); }
  tr.l-molit .lane-tag { background: #2e7d4f; }
  table.tl tbody tr.internal td { background: var(--warn-bg); }

  /* 자료 목록 표도 카드로 바꾼다. 좁은 화면에서 표를 유지하면
     "용산구 → 새서울철도" 가 한 글자씩 세로로 쪼개진다. */
  table.docs, table.docs tbody, table.docs tr, table.docs td { display: block; }
  table.docs thead { display: none; }
  table.docs { background: transparent; }
  table.docs tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 8px;
    background: #fff; border: 1px solid var(--line); border-radius: 9px;
    padding: 10px 12px; margin-bottom: 8px; }
  table.docs tbody tr:hover { background: #fff; }
  table.docs td { border: 0; padding: 0; }

  .c-id { display: none; }                 /* 자료 id 는 화면에서 감춘다 */
  .c-title { order: 1; flex: 1 1 100%; font-weight: 600; font-size: 14.5px;
    line-height: 1.45; word-break: keep-all; }
  .c-party { order: 2; flex: 1 1 100%; font-size: 12.5px; color: #5a6672; word-break: keep-all; }
  .c-kind { order: 3; font-size: 11.5px; color: #47525e; background: #eef1f4;
    border-radius: 10px; padding: 2px 8px; white-space: nowrap; }
  .c-date { order: 4; color: var(--dim); }
  .c-status { order: 5; }
  .c-open { order: 6; margin-left: auto; font-size: 11.5px; color: var(--dim); white-space: nowrap; }

  /* 머리글 줄바꿈 정리 */
  header { gap: 9px; padding: 9px 12px; }
  .brand { font-size: 15px; white-space: nowrap; }
  .brand span { display: none; }
  .who { font-size: 12.5px; gap: 7px; }
  .who form button { white-space: nowrap; padding: 4px 9px; }
  /* 좁은 화면에서는 검색줄이 세로를 많이 먹고 제목을 가린다. 고정하지 않는다. */
  .bar { position: static; height: auto; padding: 9px 12px; flex-wrap: wrap; gap: 6px; }
  .tl-head h2 { font-size: 17px; }
  .tl-head p { font-size: 11.5px; }
  table.docs th { top: 0; }
}