/* 눈과 뇌 — 3판 화면: 어두운 네온 HUD(매트릭스 · 마이너리티 리포트풍 · docs/45).
   값은 형제 측정값만 쓴다(형제 broker_portal docs/learn/16_futuristic_ux.md 가 줄마다 출처를 모은 것):
   · 바탕 · 판 · 선 · 글 · 강조 = HTS_FAPB 위젯 스튜디오 다크(main.jsx:7-8 · widgets.jsx:18,26,178)
   · 보조 글 #8b949e(widgets.jsx:178) — 판 위 대비 5.62(시험 U-EYEUI-01 이 계산해 강제)
   · 유리 판 88% · blur 6px · 그림자 · 떠오름 .15s/-1px · 맥박 1.2s .45↔.9 = jgcity 공개 판(:127-129 · :41-45 · :93-97)
   · 나타남 .18s · 8px · .98 = wave3d aijimoon(aifinger-ui.css:1018-1043)
   · 알약 단추 44px · 999px = jgcity(:40-41) · 숫자 tabular-nums = HTS(widgets.jsx:404) · 선택 칠 #1f6feb33(widgets.jsx:296)
   · 움직임은 prefers-reduced-motion: no-preference 안에서만(jgcity :98 · 포털 F6)
   바깥 글꼴 · 그림 없음. © (주)가눔 — 비공개 소스 */
:root {
  color-scheme: dark;
  --bg: #0d1117; --card: #161b22; --line: #30363d; --fg: #e6edf3; --muted: #8b949e; --accent: #00d4ff;
  --select: #1f6feb33; --on-accent: #0d1117;
  --glass-mix: 88%; --glass-blur: 6px;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.35);
  --shadow-glass: 0 4px 16px rgba(0,0,0,.16);
  --glow: 0 0 0 1px rgba(0,212,255,.35), 0 0 18px rgba(0,212,255,.18);
  --dur-lift: .15s; --lift: -1px; --dur-in: .18s; --in-y: 8px; --in-scale: .98; --pulse: 1.2s;
  --tap: 44px; --radius: 12px;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0 auto; max-width: 64rem; padding: 0 1rem 2rem; color: var(--fg); font: 1rem/1.6 system-ui, "Noto Sans KR", "NanumGothic", sans-serif;
  background:
    linear-gradient(rgba(0,212,255,.045) 1px, transparent 1px) 0 0 / 100% 32px,
    linear-gradient(90deg, rgba(0,212,255,.045) 1px, transparent 1px) 0 0 / 32px 100%,
    radial-gradient(1200px 600px at 50% -10%, rgba(0,212,255,.10), transparent 60%), var(--bg);
  background-attachment: fixed;
}
header { position: sticky; top: 0; z-index: 10; padding: .9rem 0 .6rem; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) var(--glass-mix), transparent); backdrop-filter: blur(var(--glass-blur)); }
h1 { margin: 0; font-size: 1.35rem; letter-spacing: .08em; color: var(--accent); text-shadow: 0 0 12px rgba(0,212,255,.45); }
h1::before { content: "◉ "; }
h2 { font-size: 1.1rem; margin: 0 0 .6rem; letter-spacing: .03em; } h3 { font-size: 1rem; margin: .4rem 0; color: var(--accent); }
.muted, small { color: var(--muted); } small { display: block; font-size: .82rem; }
a { color: var(--accent); }

/* HUD 판 — 유리 + 모서리 괄호 */
.card { position: relative; margin: 1rem 0; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: color-mix(in srgb, var(--card) var(--glass-mix), transparent); backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-glass); }
.card::before, .card::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--accent); opacity: .8; pointer-events: none; }
.card::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: var(--radius); }
.card::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: var(--radius); }
.card:focus-within { box-shadow: var(--glow); }

label { display: block; margin-top: .6rem; font-size: .92rem; color: var(--muted); }
input, select, textarea { display: block; width: 100%; min-height: var(--tap); padding: .5rem .7rem; margin-top: .25rem; font: inherit; color: var(--fg);
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
input[type=range] { padding: 0; accent-color: var(--accent); }
input[type=file] { padding: .55rem; }
input[type=file]::file-selector-button { min-height: 36px; margin-right: .7rem; padding: 0 1rem; border: 1px solid var(--accent); border-radius: 999px; background: transparent; color: var(--accent); font: inherit; cursor: pointer; }
button { min-height: var(--tap); padding: 0 1.1rem; margin-top: .6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--fg); font: inherit; cursor: pointer; }
button.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 700; box-shadow: var(--glow); }
button.danger { border-color: var(--fg); font-weight: 700; }
.row { display: flex; flex-wrap: wrap; gap: .6rem; }

.tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; padding: .35rem; border: 1px solid var(--line); border-radius: 999px;
  background: color-mix(in srgb, var(--card) var(--glass-mix), transparent); backdrop-filter: blur(var(--glass-blur)); }
.tabs button { margin: 0; border-color: transparent; background: transparent; }
.tabs button[aria-selected="true"] { background: var(--select); color: var(--accent); border-color: var(--accent); }
.tabs .lock { margin-left: auto; }

.msg { min-height: 1.4rem; margin: .5rem 0 0; color: var(--accent); }
.msg.bad, .warn { font-weight: 700; }
.warn { border-left: 3px solid var(--accent); padding-left: .7rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 측정 판독 — HUD 숫자 */
.result, .summary { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--fg); }
.summary { padding: .6rem .8rem; border: 1px dashed var(--accent); border-radius: 10px; background: var(--select); }
.shot { display: block; max-width: 100%; height: auto; margin-top: .6rem; border-radius: 10px; border: 1px solid var(--accent); box-shadow: var(--glow); cursor: crosshair; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } th, td { text-align: left; padding: .4rem; border-bottom: 1px solid var(--line); } th { color: var(--muted); font-weight: 600; }

/* 추이 그래프 */
.chart { width: 100%; height: auto; }
.chart .axis { stroke: var(--line); } .chart .tick, .chart .muted { fill: var(--muted); font-size: 12px; }
.chart .line { fill: none; stroke-width: 2; }
.chart .od { stroke: var(--accent); fill: var(--accent); } .chart .os { stroke: var(--fg); fill: var(--fg); }
.chart .line.od, .chart .line.os { fill: none; }
.legend .od, .legend .k-visual { color: var(--accent); }

/* 눈과 뇌 지도 — 빛나는 신경 경로 */
.brain { width: 100%; max-width: 34rem; height: auto; display: block; margin: .6rem auto; }
.brain .skull { fill: rgba(0,212,255,.03); stroke: var(--line); stroke-dasharray: 4 4; }
.brain .sclera { fill: var(--card); stroke: var(--fg); } .brain .iris { fill: var(--line); } .brain .pupil { fill: var(--bg); stroke: var(--accent); }
.brain .path { fill: none; stroke-width: 3; stroke-linejoin: round; }
.brain .visual { stroke: var(--accent); filter: drop-shadow(0 0 4px rgba(0,212,255,.6)); } .brain .visual.cross { stroke-dasharray: 8 4; }
.brain .reflex { stroke: var(--fg); stroke-width: 2; stroke-dasharray: 2 4; }
.brain .faint { stroke: var(--line); stroke-width: 1; fill: none; }
.brain .node { fill: var(--bg); stroke: var(--accent); stroke-width: 2; } .brain .node.mid { fill: var(--line); }
.brain .label { fill: var(--fg); font-size: 12px; }
.brain .pulse { fill: var(--accent); filter: drop-shadow(0 0 6px var(--accent)); } .brain .pulse.reflex { fill: var(--fg); }
.steps li { margin: .35rem 0; } .steps strong { color: var(--accent); }

/* AI 추천 — 갈래 칩 */
.chips button[aria-checked="true"] { background: var(--select); color: var(--accent); border-color: var(--accent); }
.svc h3 a { text-decoration: none; }

/* 나만의 AI 조직 */
.org-group summary { cursor: pointer; font-weight: 700; color: var(--accent); }
.org-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.org-item > div:first-child { flex: 1 1 18rem; }
.seg { display: flex; gap: .3rem; flex-wrap: wrap; } .seg button { margin: 0; }
.seg button[aria-checked="true"] { background: var(--select); color: var(--accent); border-color: var(--accent); }
.org-role { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.orgchart { width: 100%; height: auto; display: block; }
.orgchart .o-root { fill: var(--select); stroke: var(--accent); stroke-width: 2; } .orgchart .o-root-t { fill: var(--fg); font-size: 15px; font-weight: 700; }
.orgchart .o-dept { fill: var(--card); stroke: var(--accent); } .orgchart .o-dept-t { fill: var(--accent); font-size: 14px; font-weight: 700; }
.orgchart .o-role { fill: var(--bg); stroke: var(--line); } .orgchart .o-role.empty { stroke-dasharray: 4 3; }
.orgchart .o-role-t { fill: var(--fg); font-size: 13px; } .orgchart .o-ai-t { fill: var(--accent); font-size: 12px; }
.orgchart .o-link { fill: none; stroke: var(--accent); stroke-width: 2; filter: drop-shadow(0 0 3px rgba(0,212,255,.5)); } .orgchart .o-link.faint { stroke: var(--line); filter: none; }

footer { margin: 2rem 0 1rem; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .88rem; color: var(--muted); }
footer strong { color: var(--fg); }

/* 움직임 — 움직임 줄이기가 아닐 때만(jgcity :98 · 포털 F6) */
@media (prefers-reduced-motion: no-preference) {
  .card { animation: hud-in var(--dur-in) ease-out both; transition: transform var(--dur-lift) ease, box-shadow var(--dur-lift) ease; }
  .card:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-glass), var(--glow); }
  .brain .node { animation: hud-pulse var(--pulse) ease-in-out infinite; }
  button { transition: box-shadow var(--dur-lift) ease, transform var(--dur-lift) ease; }
  button:hover { box-shadow: var(--glow); }
  @keyframes hud-in { from { opacity: 0; transform: translateY(var(--in-y)) scale(var(--in-scale)); } to { opacity: 1; transform: none; } }
  @keyframes hud-pulse { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }
}
@media (max-width: 40rem) { body { padding: 0 .7rem 2rem; } .tabs .lock { margin-left: 0; } }