:root{
  --fs: 13px;      /* 폰트 크기 */
  --lh: 18px;      /* 라인 높이(px 고정; JS에서 실제값으로 덮어써도 됨) */
  --pad-top: 13px; /* 라인번호와 코드 상단 정렬용 패딩 */
  /*color-scheme: dark;*/
}

/* 페이지 기본 */
*{ box-sizing: border-box; }
body{
  margin: 0;
  background: #1e1e1e;
  color: #eee;
  font-family: Consolas, Menlo, monospace;
}

/* 툴바 (있으면) */
.toolbar{
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px; background: #111; border-bottom: 1px solid #333;
}
.toolbar .title{ font-weight: 600; font-size: 14px; }
.toolbar .title small{ color: #aaa; }
.btn{
  padding: 6px 12px; border: 1px solid #0008; border-radius: 6px;
  cursor: pointer; font-size: 12px; margin-left: 8px;
}
.btn.blue{ background:#007bff; color:#fff; }
.btn.teal{ background:#17a2b8; color:#fff; }
.btn.green{ background:#28a745; color:#fff; }
.btn.gray{ background:#6c757d; color:#fff; }
.btn.white{ background:#fff; color:#8000ff; }

/* 보기 레이아웃 래퍼 (헤더 제외 높이 지정은 JS에서) */
#view-wrap{ display: flex; height: calc(100vh - 56px); }

/* ── 가짜 거터(라인번호) ───────────────────────────── */
.view-gutter{
  width: 4.2em;
  background: #222;
  border-right: 1px solid #333;
  padding: var(--pad-top) 6px 8px;   /* 상단 13px로 코드와 맞춤 */
  overflow: auto;
  counter-reset: lineno;
  font-family: Consolas, Menlo, monospace;
  font-size: var(--fs);
  line-height: var(--lh);
  font-variant-ligatures: none;
}
.view-gutter .ln{
  position: relative;
  height: var(--lh);       /* px 고정 → 누적 오차 방지 */
  line-height: var(--lh);
}
.view-gutter .ln::before{
  counter-increment: lineno;
  content: counter(lineno);
  position: absolute;
  right: 6px;
  color: #b9c0c8;
  opacity: .9;
  font-variant-numeric: tabular-nums;
}
.view-gutter .ln.hl{ background:#2a2a00; outline:1px solid #6c6c00; }

/* ── 코드 영역(읽기) ──────────────────────────────── */
.view-code{
  flex: 1;
  overflow: auto;                     /* 가로/세로 스크롤 */
  padding: var(--pad-top) 10px 8px;   /* 상단 13px로 거터와 맞춤 */
}
.view-code pre{ margin: 0; }
.view-code code.hljs{
  display: block;
  background: #1e1e1e;
  white-space: pre;     /* 줄접지 금지 → 긴 줄은 하단 가로 스크롤 */
  line-height: var(--lh);
  font-family: Consolas, Menlo, monospace;
  font-size: var(--fs);
  font-variant-ligatures: none;
  letter-spacing: 0;
}

/* highlight.js 기본 패딩 제거(줄 정렬 정확도 ↑) */
pre code.hljs{ padding: 0 !important; }

/* 스크롤바(가시성 개선용, 선택사항) */
.view-gutter::-webkit-scrollbar,
.view-code::-webkit-scrollbar{ height:10px; width:10px; }
.view-gutter::-webkit-scrollbar-thumb,
.view-code::-webkit-scrollbar-thumb{ background:#444; border-radius:6px; }

/* ── 편집 영역(CodeMirror) ─────────────────────────── */
#editor-container{ display:none; height: calc(100vh - 56px); }
.CodeMirror{
  height: 100%;
  font-size: var(--fs);
  line-height: var(--lh);
  font-family: Consolas, Menlo, monospace;
}