/* Evidence 공통 셸 — 토큰·상태바·눈금자·섹션 헤더·콜로폰 (issue #49)
   페이지 고유 스타일은 각 HTML 의 inline <style> 에 둔다. */
:root{
  --bg:#0a0b0d; --bg-2:#0e1012; --panel:#101214; --panel-2:#14171a;
  --ink:#e6ebe8; --sub:#98a29d; --faint:#59635e; --ghost:#3a423e;
  --line:#1d2124; --line-2:#282d31;
  --sig:#3ee6a1; --sig-deep:#1fbf82; --sig-soft:rgba(62,230,161,.10);
  --amber:#e2a63d; --amber-soft:rgba(226,166,61,.10);
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --sans:'Pretendard Variable',Pretendard,'Apple SD Gothic Neo',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.8; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; position:relative;
}
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 100%);
}
body::after{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit; text-decoration:none}
a:focus-visible{outline:1.5px solid var(--sig); outline-offset:3px}
::selection{background:rgba(62,230,161,.25)}
.console{position:relative; z-index:1; max-width:980px; margin:0 auto; padding:0 28px}

.draft-banner{
  position:relative; z-index:2; background:var(--amber); color:#131313;
  text-align:center; font:600 12px/2.4 var(--mono); letter-spacing:.08em;
}

.statusbar{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:16px 0 12px; font:500 11.5px/1 var(--mono); letter-spacing:.14em;
  color:var(--sub); text-transform:uppercase;
}
.statusbar .id{color:var(--ink); font-weight:600}
.statusbar .id::after{
  content:'▮'; color:var(--sig); margin-left:2px;
  animation:blink 1.1s steps(1) infinite;
}
.statusbar .right{display:flex; gap:18px; align-items:center; color:var(--faint)}
.live{display:inline-flex; align-items:center; gap:7px; color:var(--sig)}
.live i{
  width:7px; height:7px; border-radius:50%; background:var(--sig);
  box-shadow:0 0 8px rgba(62,230,161,.8); animation:pulse 2.2s ease infinite;
}

.ruler{
  height:16px; border-bottom:1px solid var(--line-2); position:relative; opacity:.95;
  background:
    repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 10px) left bottom/auto 6px repeat-x,
    repeating-linear-gradient(90deg, var(--faint) 0 1px, transparent 1px 100px) left bottom/auto 11px repeat-x;
}

.sec-head{
  display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:1px solid var(--line-2); padding-bottom:10px;
}
.sec-head h2{font:600 13px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase}
.sec-head h2 b{color:var(--sig); font-weight:600}
.sec-head .aux{font:400 11px/1 var(--mono); letter-spacing:.1em; color:var(--faint)}

.colophon{
  margin-top:52px; padding:24px 0 44px; border-top:1px solid var(--line);
  text-align:center; font:400 11px/2 var(--mono); letter-spacing:.12em; color:var(--ghost);
}

@keyframes blink{50%{opacity:0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes bootIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@keyframes fill{from{transform:scaleX(0)} to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}
@media (max-width:640px){
  .console{padding:0 20px}
  .statusbar .right .loc{display:none}
}