* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  margin: 0; padding: 0; color: #222; background: #fafbfc; font-size: 13px;
  display: flex; flex-direction: column; height: 100vh; overflow: hidden;
}
header {
  flex: 0 0 auto;
  background: #fff; border-bottom: 1px solid #e1e4e8;
  padding: 8px 16px;
}
.topbar {
  display: flex; align-items: center; gap: 16px;
}
.topbar h1 { margin: 0; font-size: 16px; }
.meta { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.meta button {
  padding: 3px 10px; border: 1px solid #d1d5da; background: #f6f8fa;
  border-radius: 4px; cursor: pointer;
}
.meta button:hover { background: #e1e4e8; }

.tabs { display: flex; gap: 4px; margin-top: 6px; border-bottom: 2px solid #d1d5da; }
.tabs .tab {
  padding: 6px 14px; border: 1px solid #d1d5da; border-bottom: none;
  background: #f6f8fa; cursor: pointer; font-size: 13px;
  border-radius: 4px 4px 0 0;
}
.tabs .tab.active { background: #fff; border-bottom: 2px solid #fff; margin-bottom: -2px; font-weight: 600; }

.tabpanel { display: none; padding-top: 6px; }
.tabpanel.active { display: block; }

.rules { font-size: 12px; margin-bottom: 6px; }
.rules .r { display: inline-block; margin-right: 8px; padding: 1px 6px; border-radius: 3px; }
.rules .r.r1    { background: #ffb3b3; color: #5a0000; }
.rules .r.r2    { background: #ffcc80; color: #5a2a00; }
.rules .r.r3    { background: #fff59d; color: #4a4000; }
.hl-r1 { color: #d73a49; font-weight: 700; }
.hl-r2 { color: #f57c00; font-weight: 700; }
.hl-r3 { color: #c4a015; font-weight: 700; }
.rules .r.short { background: #fff5b1; }
.rules .r.med   { background: #ffd8b1; }
.rules .r.super { background: #ffcccc; }

.attent-input { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.attent-input label { font-size: 12px; }
.attent-input textarea {
  flex: 1; min-width: 300px; padding: 4px 6px;
  border: 1px solid #d1d5da; border-radius: 3px;
  font-family: ui-monospace, "Consolas", monospace; font-size: 12px;
}
.attent-input button {
  padding: 4px 10px; border: 1px solid #d1d5da; border-radius: 3px;
  background: #f6f8fa; cursor: pointer;
}
#attentSaved { font-size: 11px; color: #28a745; }

.filters { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; }
.filters label { display: flex; align-items: center; gap: 4px; }
.filters input[type=text], .filters select {
  padding: 2px 6px; border: 1px solid #d1d5da; border-radius: 3px;
}

main { padding: 0; flex: 1; overflow: auto; min-height: 0; }
table { width: 100%; border-collapse: collapse; display: none; }
table.active { display: table; }
thead th {
  position: sticky; top: 0; background: #f6f8fa; border-bottom: 1px solid #d1d5da;
  padding: 6px 8px; text-align: left; font-weight: 600; cursor: default;
  font-size: 12px; white-space: nowrap; z-index: 5;
}
thead th.sortable { cursor: pointer; }
thead th.sortable:hover { background: #e1e4e8; }
thead th.sortable.asc::after  { content: ' ▲'; opacity: .6; }
thead th.sortable.desc::after { content: ' ▼'; opacity: .6; }
thead th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr { border-bottom: 1px solid #eaecef; }
tbody tr:hover { background: #f6f8fa; }
tbody td { padding: 4px 8px; }
tbody td.name a { color: #0366d6; text-decoration: none; }
tbody td.name a:hover { text-decoration: underline; }
tbody td.name a.discls-btn {
  display: inline-block; margin-left: 4px; padding: 1px 5px;
  background: #f1f8ff; border: 1px solid #c8e1ff; border-radius: 4px;
  font-size: 11px; line-height: 1; text-decoration: none; vertical-align: middle;
}
tbody td.name a.discls-btn:hover { background: #ddebff; text-decoration: none; }
tbody td.name .redesig-badge {
  display: inline-block; margin-left: 4px; padding: 1px 6px;
  background: #fff0f0; border: 1px solid #f8c8c8; border-radius: 4px;
  color: #c23030; font-size: 11px; line-height: 1.4; vertical-align: middle;
  font-weight: 600;
}

.pos { color: #d73a49; }
.neg { color: #0366d6; }
.flag-r1    { background: #ffb3b3; }   /* 빨강 — 룰① 우선 */
.flag-r2    { background: #ffcc80; }   /* 주황 — 룰② */
.flag-r3    { background: #fff59d; }   /* 노랑 — 룰③ */
.flag-short { background: #fff5b1; }
.flag-med   { background: #ffd8b1; }
.flag-super { background: #ffcccc; }

.ox-yes { color: #d73a49; font-weight: 700; }
.ox-no  { color: #6a737d; }
td.ox   { text-align: center; }

.progbar {
  position: relative; width: 80px; height: 14px; background: #eaecef; border-radius: 2px;
  display: inline-block; vertical-align: middle; overflow: hidden;
}
.progbar > span {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, #28a745, #ffd33d 70%, #d73a49);
}
.progtext { display: inline-block; min-width: 36px; text-align: right; margin-left: 4px;
  font-variant-numeric: tabular-nums; font-size: 11px; }
.high-yes { color: #d73a49; font-weight: 600; }
.high-no  { color: #6a737d; }

.tag {
  display: inline-block; padding: 0 5px; border-radius: 2px; font-size: 10px; margin-right: 2px;
}
.tag.r1    { background: #ffb3b3; color: #5a0000; }
.tag.r2    { background: #ffcc80; color: #5a2a00; }
.tag.r3    { background: #fff59d; color: #4a4000; }
.tag.short { background: #fff5b1; }
.tag.med   { background: #ffd8b1; }
.tag.super { background: #ffcccc; }

.kindtag {
  display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 11px;
  border: 1px solid transparent;
}
.kindtag.kind-attent { background: #fff3cd; border-color: #ffe082; }
.kindtag.kind-warn   { background: #ffe0b2; border-color: #ff9800; }

.desig-info {
  font-size: 12px; color: #555; flex: 1;
}

/* sticky 좌측 컬럼 — Page 2 (#tbl-warn) + Page 3 (#tbl-release) */
#tbl-warn, #tbl-release { table-layout: auto; }
#tbl-warn th.sticky, #tbl-warn td.sticky,
#tbl-release th.sticky, #tbl-release td.sticky {
  position: sticky; background: #fff; z-index: 4;
}
#tbl-warn thead th.sticky, #tbl-release thead th.sticky { background: #f6f8fa; z-index: 7; top: 0; }
#tbl-warn tbody tr:hover td.sticky, #tbl-release tbody tr:hover td.sticky { background: #f6f8fa; }
/* 좌측 5컬럼 누적 left */
#tbl-warn th.sticky:nth-child(1), #tbl-warn td.sticky:nth-child(1),
#tbl-release th.sticky:nth-child(1), #tbl-release td.sticky:nth-child(1) { left:   0; min-width: 32px; }
#tbl-warn th.sticky:nth-child(2), #tbl-warn td.sticky:nth-child(2),
#tbl-release th.sticky:nth-child(2), #tbl-release td.sticky:nth-child(2) { left:  32px; min-width: 60px; }
#tbl-warn th.sticky:nth-child(3), #tbl-warn td.sticky:nth-child(3),
#tbl-release th.sticky:nth-child(3), #tbl-release td.sticky:nth-child(3) { left:  92px; min-width: 70px; }
#tbl-warn th.sticky:nth-child(4), #tbl-warn td.sticky:nth-child(4),
#tbl-release th.sticky:nth-child(4), #tbl-release td.sticky:nth-child(4) { left: 162px; min-width: 130px; }
#tbl-warn th.sticky:nth-child(5), #tbl-warn td.sticky:nth-child(5),
#tbl-release th.sticky:nth-child(5), #tbl-release td.sticky:nth-child(5) { left: 292px; min-width: 110px; box-shadow: 2px 0 4px rgba(0,0,0,0.06); }
.explain {
  font-size: 12px; color: #444; background: #f6f8fa;
  padding: 6px 10px; border-left: 3px solid #6a737d; margin: 4px 0 6px;
}
.explain em { font-style: normal; color: #d73a49; font-weight: 600; }
.explain .hl-yes { color: #28a745; font-weight: 600; }
.explain .hl-no  { color: #d73a49; font-weight: 600; }
.verdict-confirm { color: #d73a49; font-weight: 700; }
.verdict-candidate { color: #f59e0b; font-weight: 600; }
.verdict-none      { color: #6a737d; }