/* Ontological DB — documentation site. Palette shared with the landing page. */
:root {
  --ground:#eef1f0; --panel:#ffffff; --panel-2:#f6f8f7; --ink:#10161c; --ink-2:#3c4a55;
  --muted:#64737e; --line:rgba(16,22,28,.13); --line-soft:rgba(16,22,28,.07);
  --accent:#059669; --accent-lo:rgba(5,150,105,.10); --amber:#a56a08; --blue:#2f6fd0;
  --code-bg:#f3f6f5; --out-bg:#fbfaf6; --out-line:rgba(165,106,8,.28);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Pretendard","Apple SD Gothic Neo","Noto Sans KR",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,"Cascadia Mono","Noto Sans Mono","Nanum Gothic Coding",monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground:#0e1319; --panel:#151b23; --panel-2:#11171e; --ink:#dbe3ea; --ink-2:#aab8c4;
    --muted:#7f8fa0; --line:rgba(160,174,192,.17); --line-soft:rgba(160,174,192,.09);
    --accent:#10b981; --accent-lo:rgba(16,185,129,.11); --amber:#e0a83a; --blue:#5b9df9;
    --code-bg:#0f151c; --out-bg:#14150f; --out-line:rgba(224,168,58,.30);
  }
}
* { box-sizing: border-box; }
html { scroll-padding-top: 72px; }
body { margin:0; background:var(--ground); color:var(--ink); font:16px/1.72 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

.topbar { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:18px; height:56px; padding:0 22px;
  background:color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.mark { display:flex; align-items:center; gap:9px; color:var(--ink); }
.mark:hover { text-decoration:none; }
.wm { font:700 13px/1 var(--mono); letter-spacing:.14em; }
.crumb { color:var(--ink-2); font-size:14px; padding-left:16px; border-left:1px solid var(--line); }
#filter { margin-left:auto; width:230px; padding:7px 11px; border:1px solid var(--line); border-radius:8px;
  background:var(--panel); color:var(--ink); font:14px var(--sans); }
#filter:focus { outline:2px solid var(--accent-lo); border-color:var(--accent); }
.src { font-size:13px; color:var(--muted); }

.shell { display:grid; grid-template-columns:288px minmax(0,1fr) 232px; max-width:1500px; margin:0 auto; }
.side { position:sticky; top:56px; height:calc(100vh - 56px); overflow:auto; padding:18px 12px 40px 18px; border-right:1px solid var(--line-soft); font-size:14px; }
.side details { margin-bottom:4px; }
.side summary { cursor:pointer; padding:6px 8px; border-radius:6px; font-weight:650; color:var(--ink); list-style:none; display:flex; justify-content:space-between; }
.side summary::-webkit-details-marker { display:none; }
.side summary span { color:var(--muted); font:500 12px var(--mono); }
.side summary:hover { background:var(--line-soft); }
.side a { display:block; padding:4px 8px 4px 16px; margin-left:8px; border-left:1px solid var(--line); color:var(--ink-2); line-height:1.45; }
.side a:hover { color:var(--ink); text-decoration:none; border-left-color:var(--muted); }
.side a.here { color:var(--accent); border-left:2px solid var(--accent); font-weight:600; background:var(--accent-lo); border-radius:0 6px 6px 0; }
.side .hidden { display:none; }

main { min-width:0; padding:34px 44px 80px; }
article { max-width:860px; }
article h1 { font-size:32px; line-height:1.3; letter-spacing:-.02em; margin:0 0 22px; }
article h2 { font-size:23px; line-height:1.35; letter-spacing:-.01em; margin:54px 0 14px; padding-top:20px; border-top:1px solid var(--line); }
article h3 { font-size:18px; margin:34px 0 10px; }
article h4 { font-size:16px; margin:26px 0 8px; }
article p, article li { color:var(--ink-2); }
article strong { color:var(--ink); }
article blockquote { margin:20px 0; padding:12px 18px; border-left:3px solid var(--accent); background:var(--accent-lo); border-radius:0 8px 8px 0; }
article blockquote p { margin:4px 0; color:var(--ink); }
article hr { border:0; border-top:1px solid var(--line); margin:40px 0; }
article img { max-width:100%; border-radius:10px; border:1px solid var(--line); display:block; margin:18px 0; }
code { font:.88em var(--mono); background:var(--code-bg); padding:.12em .38em; border-radius:4px; border:1px solid var(--line-soft); }
pre { margin:16px 0; padding:14px 16px; overflow:auto; background:var(--code-bg); border:1px solid var(--line); border-radius:10px; font:13.5px/1.6 var(--mono); position:relative; }
pre code { background:none; border:0; padding:0; font:inherit; }
/* What the system answered, as opposed to what was typed. */
pre.text { background:var(--out-bg); border-color:var(--out-line); border-left-width:3px; margin-top:-8px; color:var(--ink-2); }
pre.cypher::before, pre.sql::before, pre.bash::before, pre.python::before, pre.text::before {
  position:absolute; top:6px; right:10px; font:600 10.5px var(--mono); letter-spacing:.08em; color:var(--muted); text-transform:uppercase; }
pre.cypher::before { content:"cypher"; color:var(--accent); }
pre.sql::before { content:"sql"; } pre.bash::before { content:"shell"; } pre.python::before { content:"python"; }
pre.text::before { content:"결과"; color:var(--amber); }
pre.mermaid { background:var(--panel); text-align:center; }
.tablewrap { overflow-x:auto; margin:18px 0; border:1px solid var(--line); border-radius:10px; background:var(--panel); }
table { border-collapse:collapse; width:100%; font-size:14.5px; }
th, td { padding:9px 13px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line-soft); }
th { background:var(--panel-2); font-weight:650; color:var(--ink); white-space:nowrap; }
tr:last-child td { border-bottom:0; }
td code { white-space:nowrap; }
figure.video { margin:22px 0; }
figure.video video { width:100%; border-radius:12px; border:1px solid var(--line); background:#000; display:block; }
figure.video figcaption { font-size:13.5px; color:var(--muted); margin-top:8px; }

.feature { display:grid; gap:4px; max-width:860px; margin:0 0 28px; padding:18px 22px; border:1px solid var(--accent); border-radius:12px; background:var(--accent-lo); color:var(--ink); }
.feature:hover { text-decoration:none; filter:brightness(1.03); }
.feature span { font:600 11.5px var(--mono); letter-spacing:.1em; color:var(--accent); text-transform:uppercase; }
.feature b { font-size:19px; }
.feature em { font-style:normal; color:var(--ink-2); font-size:14.5px; }

main > footer { max-width:860px; margin-top:64px; padding-top:16px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
.toc { position:sticky; top:56px; height:calc(100vh - 56px); overflow:auto; padding:34px 18px 40px 6px; font-size:13px; }
.toc b { display:block; margin-bottom:8px; color:var(--muted); font:600 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.toc a { display:block; padding:3px 0 3px 10px; border-left:1px solid var(--line); color:var(--muted); line-height:1.4; }
.toc a.h3 { padding-left:22px; }
.toc a.on { color:var(--accent); border-left-color:var(--accent); }

@media (max-width: 1180px) { .shell { grid-template-columns:260px minmax(0,1fr); } .toc { display:none; } }
@media (max-width: 800px) { .shell { grid-template-columns:1fr; } .side { position:static; height:auto; border-right:0; border-bottom:1px solid var(--line); }
  main { padding:24px 18px 60px; } #filter { width:130px; } .src { display:none; } }

@media print {
  :root { --ground:#fff; --panel:#fff; --panel-2:#f4f6f5; --ink:#10161c; --ink-2:#2b3640; --muted:#5b6872;
    --line:rgba(16,22,28,.18); --line-soft:rgba(16,22,28,.10); --accent:#047857; --accent-lo:rgba(5,150,105,.08);
    --code-bg:#f5f7f6; --out-bg:#fbf9f2; --out-line:rgba(165,106,8,.35); --amber:#8a5806; }
  .topbar, .side, .toc, main > footer, .feature, figure.video { display:none !important; }
  .shell { display:block; } main { padding:0; } article { max-width:none; }
  body { font-size:10.5pt; line-height:1.6; }
  article h1 { font-size:22pt; } article h2 { font-size:15pt; margin-top:26pt; break-after:avoid; } article h3 { font-size:12pt; break-after:avoid; }
  pre { font-size:8pt; white-space:pre-wrap; word-break:break-word; break-inside:avoid-page; }
  pre.text { break-before:avoid; }
  .tablewrap { break-inside:avoid-page; } table { font-size:9pt; } td code { white-space:normal; }
  article img { break-inside:avoid; max-height:9.2in; }
  a { color:inherit; }
}