/* theeye-v2.html 에서 이식. 렌더링 관련 스타일은 손대지 않았다. */
:root{
/* 바탕은 지정받은 #0d0d0d. 위로 얹히는 층들은 완전 중성 회색 대신 파랑
강조색(--anchor) 쪽으로 아주 살짝 기울여, 고른 색이라는 인상을 준다. */
--bg:#0d0d0d; --panel:#0d0d0d; --panel2:#191a1e; --line:#232428; --line2:#31333a;
--track:#141518; /* 탭 세그먼트 뒤 은은한 회색 */
--text:#e4e7ec; --dim:#868d99; --dim2:#5f666f;
--anchor:#6ea8fe; --multi:#e8a33d; --multi-soft:rgba(232,163,61,.14);
--ctrl:#e0645f; --cycle:#b07de8; --ok:#5bbf8f;
--ui:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Pretendard','Noto Sans KR','Malgun Gothic',system-ui,sans-serif;
--mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace;
/* 층을 얹는 반투명 오버레이. 어두운 바탕에서는 흰빛을, 밝은 바탕에서는
검은빛을 얹어야 같은 "살짝 도드라짐"이 된다. 라이트 테마에서 이 값만
뒤집으면 되도록 변수로 뺐다. */
--ov1:rgba(255,255,255,.014); /* 카드 바탕 */
--ov2:rgba(255,255,255,.035); /* 탭 호버 */
--ov3:rgba(255,255,255,.06); /* 선택된 탭 안쪽 테두리 */
--ov4:rgba(255,255,255,.14); /* 색상 팔레트 원 테두리 */
--ov5:rgba(255,255,255,.16); /* 스와치 포커스 링 */
--shadow:rgba(0,0,0,.5);
--tab-on:#26282e; /* 선택된 탭 바탕 */
--strong:#fff; /* 강조 글자(버튼 호버 등) */
--body:#c3c8d0; /* 본문 문단 */
/* 캔버스 전용. 캔버스는 CSS 를 못 쓰므로 JS 가 getComputedStyle 로 읽어 간다.
여기 두는 이유는 **색 정의를 한 곳에만** 두기 위해서다 — JS 에 따로 적으면
테마를 바꿀 때 두 곳을 맞춰야 하고 반드시 어긋난다. */
--cv-label:#a8b0bb; /* 노드 이름 */
--cv-label-bg:rgba(22,24,28,.74); /* 이름 뒤 판 */
--cv-ring:#fff; /* 선택 노드 테두리 */
--cv-foreign:rgba(255,255,255,.35); /* 해외 노드 점선 */
--cv-lock:rgba(255,255,255,.82); /* 자물쇠 아이콘 */
--cv-edge:140,150,165; /* 기본 엣지 RGB 채널 */
/* 헤더 그라디언트와 떠 있는 패널의 바탕. 알파를 쓰는 쪽에서 주므로
RGB 채널만 둔다. 라이트에서 이 값을 안 뒤집으면 밝은 화면 위에
검은 판이 떠 있게 된다(실제로 그랬다). */
/* 강조 글자. 원래는 어두운 바탕에 얹을 파스텔로 골랐던 값들이라,
밝은 바탕에서는 그대로 쓰면 읽히지 않는다. 의미별로 변수를 두고
테마마다 명도를 뒤집는다. */
--t-blue:#b9d3ff; --t-gray:#8b93a0; --t-purple:#b9a8e0;
--t-red:#f0968f; --t-green:#8fd3b3;
--bg-rgb:13,13,13;
--float-rgb:20,21,24;
--cv-lockl:#9aa2b4; /* 잠긴 노드 이름 */
--cv-deadl:#8b93a0; /* 폐지 노드 이름 */
}
/* ── 라이트 테마 ──────────────────────────────────────────
data-theme 은 에 붙는다. 'system' 이면 OS 설정을 따르고,
'light'·'dark' 면 그것을 강제한다. 두 규칙의 내용이 같아 중복이지만,
미디어쿼리는 선택자와 합칠 수 없어 어쩔 수 없다. */
:root[data-theme="light"]{
--bg:#f7f8fa; --panel:#ffffff; --panel2:#ffffff; --line:#e4e6ea; --line2:#d3d6dc;
--track:#eceef2;
--text:#1a1c20; --dim:#5f666f; --dim2:#8b929c;
--multi-soft:rgba(232,163,61,.18);
--ov1:rgba(0,0,0,.02); --ov2:rgba(0,0,0,.04); --ov3:rgba(0,0,0,.07);
--ov4:rgba(0,0,0,.16); --ov5:rgba(0,0,0,.18);
--shadow:rgba(0,0,0,.14);
--tab-on:#ffffff; --strong:#0d0d0d; --body:#3b4048;
--cv-label:#4a5058;
--cv-label-bg:rgba(255,255,255,.82);
--cv-ring:#1a1c20;
--cv-foreign:rgba(0,0,0,.35);
--cv-lock:rgba(0,0,0,.72);
--cv-edge:120,130,145;
--t-blue:#1f56a8; --t-gray:#565d67; --t-purple:#5f43a0;
--t-red:#b03a34; --t-green:#1f6b4c;
--bg-rgb:247,248,250;
--float-rgb:255,255,255;
--cv-lockl:#5d6470;
--cv-deadl:#6b727c;
}
@media (prefers-color-scheme: light){
:root[data-theme="system"]{
--bg:#f7f8fa; --panel:#ffffff; --panel2:#ffffff; --line:#e4e6ea; --line2:#d3d6dc;
--track:#eceef2;
--text:#1a1c20; --dim:#5f666f; --dim2:#8b929c;
--multi-soft:rgba(232,163,61,.18);
--ov1:rgba(0,0,0,.02); --ov2:rgba(0,0,0,.04); --ov3:rgba(0,0,0,.07);
--ov4:rgba(0,0,0,.16); --ov5:rgba(0,0,0,.18);
--shadow:rgba(0,0,0,.14);
--tab-on:#ffffff; --strong:#0d0d0d; --body:#3b4048;
--cv-label:#4a5058;
--cv-label-bg:rgba(255,255,255,.82);
--cv-ring:#1a1c20;
--cv-foreign:rgba(0,0,0,.35);
--cv-lock:rgba(0,0,0,.72);
--cv-edge:120,130,145;
--t-blue:#1f56a8; --t-gray:#565d67; --t-purple:#5f43a0;
--t-red:#b03a34; --t-green:#1f6b4c;
--bg-rgb:247,248,250;
--float-rgb:255,255,255;
--cv-lockl:#5d6470;
--cv-deadl:#6b727c;
}
}
*{box-sizing:border-box;margin:0;padding:0}
/* **hidden 속성이 실제로 감추게 한다.**
브라우저 기본 규칙은 `[hidden]{display:none}` 인데, 작성자 스타일이 UA
스타일을 무조건 이긴다. 그래서 `.login-cta{display:flex}` 같은 규칙이 하나
있으면 `el.hidden=true` 를 해도 그대로 보인다 — 코드는 감췄다고 믿고,
화면에는 남는다.
여기 걸려서 요소마다 `.acct-menu[hidden]`·`.busy[hidden]` 을 하나씩 붙여
왔는데, 그러면 **새로 만드는 요소마다 같은 함정을 다시 밟는다.** 실제로
로그인 유도 블록과 '데이터 갱신' 항목이 그렇게 감춰지지 않고 있었다.
특이도가 같아 순서에 따라 지므로 !important 로 못 박는다. */
[hidden]{display:none !important}
/* 위 리셋의 margin:0 이