/* U-Twin 시안 — 공용 토큰과 정직성 표식. 다크 단일 테마.
   제품 그림(평면도 · 재생 띠)은 U-Board 갤러리의 «청사진 도면» 스킨(warehouse-racks)을 채택한다 — 남색 종이 · 흰 선 · 기둥 열 번호 · 표제란 · 고정폭.
   페이지 활자는 갤러리 «스위스 타이포그래피»(ward-beds)를 참고한다 — 굵은 산세리프 · 굵은 괘선 · 큰 숫자.
   개념: 도면 작성 관례(제도 필름 · 흑연 선 · 범례)를 정직성의 어휘로 쓴다.
   추정 = 해칭, 복원 불가 = 숨은선(점선) 윤곽, 원천 정정 = 개정 삼각형, 끊김 = 끊어진 선.
   정상 값은 조용하다 — 표식은 무언가 다를 때만 나타난다.
   랜딩(public/) · 데모(demo/)가 함께 쓴다. 게시할 때 각 루트로 복사한다(site/README.md). */

:root {
  /* 다크 단일 테마(owner 2026-11-03 — 디지털 트윈 화면의 업계 관행). 랜딩 히어로의 운영 트윈 보드와 같은 톤:
     깊은 남색 바탕 · 시안 발광 강조. 페이지 바탕은 보드(#060b14)보다 한 단계 밝아 보드가 «화면»으로 떠 보인다. */
  color-scheme: dark;
  /* 면 */
  --paper: #0a1220;        /* 관제실 벽 — 남색으로 기운 검정 */
  --sheet: #0f1a2c;        /* 패널 */
  --ink: #e6f0ff;          /* 글자 */
  --ink-2: #b3c3da;        /* 보조 글자 */
  --ink-3: #8197b6;        /* 약한 글자(바탕 대비 4.5:1 이상) */
  --line: #233a5c;         /* 가는 선 */
  --line-2: #16284a;       /* 아주 가는 선 · 격자 */
  --plan-wall: #c9dcf2;    /* 도면 벽체 */
  --plan-room: #10203a;    /* 실 채움 */
  /* 브랜드 · 상호작용 */
  --accent: #38d6ff;       /* 시안 — 조작 가능한 것 · 살아 있는 흐름 */
  --accent-ink: #04131f;
  --accent-soft: #0e2e45;
  /* 의미색 — 강조색과 따로 */
  --stale: #ffb020;        /* 오래됨: 호박색 */
  --stale-soft: #2e230b;
  --down: #b3c3da;         /* 끊김: 색이 아니라 끊어진 선이 말한다 */
  --alarm: #ff8a5c;        /* 설비 이상(값의 상태) */
  --alarm-soft: #3a1c12;
  --redline: #ff5d5d;      /* 원천 정정 — 제도의 레드라인 */
  --hatch: rgba(230, 240, 255, 0.24);
  --ok: #3ee08f;
  /* 글꼴 */
  --f-display: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --f-ui: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --f-data: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* 크기 */
  --r: 6px;
  /* 청사진 판 — 데모 평면도(갤러리 warehouse-racks 스킨 그대로) */
  --bp-frame: #111827;
  --bp-paper: #0b3a75;
  --bp-ink: #e8f1ff;
  --bp-muted: #9fd3ff;
  --bp-accent: #ffb020;
  --bp-err: #ff6b5b;
  --bp-grid: rgba(232, 241, 255, 0.07);
  --bp-line: rgba(232, 241, 255, 0.35);
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 14px 34px -16px rgba(0, 0, 0, 0.8);
}
body { background: var(--paper); color: var(--ink); }

/* ---------- 정직성 표식(범례) ---------- */
.mk {
  display: inline-flex; align-items: center; gap: 0.35em;
  font: 500 0.75rem/1 var(--f-ui); letter-spacing: 0.01em;
  padding: 0.28em 0.5em; border-radius: 3px; white-space: nowrap;
  color: var(--ink-2); border: 1px solid var(--line);
  background: var(--sheet);
}
.mk svg { width: 0.95em; height: 0.95em; flex: none; }
.mk-stale { color: var(--stale); border-color: color-mix(in srgb, var(--stale) 45%, transparent); background: var(--stale-soft); }
.mk-down { color: var(--down); border-style: dashed; border-color: var(--down); background: transparent; }
.mk-est {
  color: var(--ink);
  background: repeating-linear-gradient(135deg, var(--hatch) 0 1px, transparent 1px 5px), var(--sheet);
}
.mk-calc { color: var(--ink); border-color: var(--ink-3); font-family: var(--f-data); }
.mk-gap { color: var(--ink-2); border: 1px dashed var(--ink-3); background: transparent; }
.mk-restated { color: var(--ink-2); border-color: var(--ink-3); border-bottom-width: 3px; border-bottom-style: double; }
.mk-corr { color: var(--redline); border-color: color-mix(in srgb, var(--redline) 50%, transparent); background: transparent; }
.mk-q { color: var(--ink-2); border-style: dotted; }
.mk-alarm { color: var(--alarm); border-color: color-mix(in srgb, var(--alarm) 45%, transparent); background: var(--alarm-soft); }
.mk-ok { color: var(--ok); }

/* 값 자체에 거는 처리 */
.v-stale { color: var(--ink-2); }
.v-down { color: var(--ink-3); text-decoration: line-through; text-decoration-style: dashed; text-decoration-thickness: 1px; }
.v-est { background: repeating-linear-gradient(135deg, var(--hatch) 0 1px, transparent 1px 5px); padding: 0 0.15em; border-radius: 2px; }

/* 효과 등급(쓰기) */
.fx {
  display: inline-flex; align-items: center; gap: 0.4em; font: 600 0.72rem/1 var(--f-ui);
  letter-spacing: 0.04em; padding: 0.3em 0.55em; border-radius: 3px; border: 1px solid currentColor;
}
.fx-read { color: var(--ink-2); }
.fx-record { color: var(--accent); }
.fx-actuate { color: var(--alarm); }

/* 공용 */
[hidden] { display: none !important; }
:where(body) { word-break: keep-all; overflow-wrap: break-word; }
.num { font-family: var(--f-data); font-variant-numeric: tabular-nums; }
.eyebrow { font: 600 0.72rem/1.2 var(--f-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* 설계 주석(#notes) — 내부 검토용. 공개 게시에서는 장부가 없어 아무것도 그리지 않는다 */
.has-note { outline: 1.5px dashed var(--accent); outline-offset: 3px; position: relative; }
.note-tag {
  position: absolute; top: -0.9rem; left: 0; z-index: 50; pointer-events: none;
  font: 600 0.62rem/1 var(--f-data); color: var(--accent-ink); background: var(--accent);
  padding: 0.25em 0.45em; border-radius: 2px; white-space: nowrap;
}
.note-tag[data-st="mock"] { background: var(--stale); color: var(--accent-ink); }