:root { color-scheme: light; --ink:#202c32; --muted:#54636c; --line:#d7dedc; --paper:#fafbf8; --ready:#166534; --partial:#92400e; --planned:#536373; --accent:#1d4ed8; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#f4f5f0; font:15px/1.65 Pretendard,"Apple SD Gothic Neo",system-ui,sans-serif; }
main { max-width:1600px; margin:auto; padding:clamp(16px,3vw,44px); }
button,input,select { font:inherit; }
button { cursor:pointer; touch-action:manipulation; }
button,input,select { border:1px solid var(--line); border-radius:7px; background:white; color:var(--ink); }
button { min-height:44px; padding:8px 14px; font-weight:650; }
button:hover { border-color:var(--accent); color:var(--accent); }
a { color:var(--accent); }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
[hidden] { display:none !important; }
h1,h2,h3,p { margin:0; }
h1 { font-size:clamp(30px,3vw,44px); line-height:1.25; letter-spacing:-.045em; }
h2 { font-size:24px; line-height:1.35; letter-spacing:-.035em; }
h3 { font-size:18px; line-height:1.5; }
code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.9em; overflow-wrap:anywhere; }
.skip-link { position:fixed; top:8px; left:8px; background:white; padding:12px; z-index:10; transform:translateY(-180%); }
.skip-link:focus { transform:none; }
.page-header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; margin:30px 0 24px; }
.eyebrow { font-size:11px; font-weight:750; letter-spacing:.13em; color:var(--muted); margin-bottom:9px; }
.lead { color:var(--muted); margin-top:12px; }
.snapshot { border-left:2px solid var(--line); padding-left:20px; }
.snapshot p { font-size:13px; margin-top:8px; }
.snapshot small { color:var(--muted); }
.badge { display:inline-flex; align-items:center; gap:6px; border:1px solid; padding:3px 9px; border-radius:5px; font-size:11px; font-weight:750; line-height:1.7; }
.badge.ready { color:var(--ready); background:#eef8ef; border-color:#b7d7be; }
.badge.partial { color:var(--partial); background:#fff6e6; border-color:#ddc196; }
.badge.planned { color:var(--planned); background:#f1f4f7; border-color:#c2ccd5; }
.metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:12px; }
.metric { padding:16px 20px; border:1px solid var(--line); border-radius:10px; background:var(--paper); }
.metric strong { font:600 26px/1.4 ui-monospace,SFMono-Regular,monospace; }
.metric span { display:block; color:var(--muted); font-size:12px; }
.scope-note { margin:18px 0; padding:16px 20px; border:1px solid var(--line); border-left:3px solid #94a8a0; border-radius:6px; color:var(--muted); background:var(--paper); font-size:13px; }
.scope-note strong { color:var(--ink); }
.scope-note p { margin-top:8px; }
.view-tabs { display:flex; gap:5px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin:28px 0; }
.view-tabs button { border:0; border-radius:0; border-bottom:3px solid transparent; background:none; padding:13px 20px; }
.view-tabs button[aria-selected=true] { color:var(--accent); border-bottom-color:var(--accent); }
.section-heading { margin:0 0 18px; }
.section-heading p { margin-top:8px; color:var(--muted); font-size:14px; }
.legend { display:flex; align-items:center; flex-wrap:wrap; gap:10px 24px; font-size:12px; margin:12px 0 16px; color:var(--muted); }
.legend span { display:inline-flex; gap:8px; align-items:center; }
.legend b { font:600 10px/1.5 ui-monospace,monospace; color:var(--ink); border:1px solid var(--line); padding:2px 5px; border-radius:3px; }
.sample { display:inline-block; width:24px; height:16px; border-radius:4px; border:2px solid var(--ready); background:#eef8ef; }
.sample.partial { border:2px dashed var(--partial); background:#fff6e6; }
.sample.planned { border:2px dashed var(--planned); background:#f1f4f7; }
.sample-line { width:28px; height:0; border-top:2px solid var(--ready); }
.sample-line.dashed { border-top:2px dashed var(--planned); }
.graph-shell { border:1px solid #cbd5d1; border-radius:12px; background:white; overflow:hidden; }
.graph-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); padding:10px 16px; font-size:12px; color:var(--muted); }
.zoom-tools { display:flex; align-items:center; gap:6px; }
.zoom-tools button { padding:6px 10px; font-size:12px; }
.zoom-tools output { min-width:48px; text-align:center; font:12px ui-monospace,monospace; }
.graph-viewport { height:730px; overflow:auto; overscroll-behavior:contain; background-color:#fbfcfa; background-image:radial-gradient(#d5ddda .7px,transparent .7px); background-size:16px 16px; }
.erd-viewport { height:780px; }
.graph-surface { position:relative; min-width:100%; }
.graph-stage { position:absolute; left:0; top:0; transform-origin:0 0; }
.graph-stage svg { position:absolute; inset:0; overflow:visible; pointer-events:none; }
.graph-edge { fill:none; stroke:#83968b; stroke-width:1.8; }
.graph-edge[data-state=planned] { stroke:#91a0af; stroke-dasharray:7 6; }
.erd-edge { fill:none; stroke:#738d82; stroke-width:1.3; opacity:.3; }
.erd-edge.highlighted { stroke:var(--accent); stroke-width:2.5; opacity:1; }
.er-group { position:absolute; font-size:14px; font-weight:750; color:#465950; letter-spacing:.01em; }
.component { position:absolute; text-align:left; padding:16px; border:1.8px solid #629474; border-top:4px solid var(--ready); background:#f5fbf5; border-radius:9px; box-shadow:0 2px 3px #24332b08; }
.component.partial { border:1.8px dashed #b38a4b; border-top:4px dashed var(--partial); background:#fffaf0; }
.component.planned { border:1.8px dashed #98a7b5; border-top:4px dashed #6a8092; background:#f5f7fa; }
.component:hover { box-shadow:0 4px 12px #26372e18; border-color:var(--accent); }
.component strong { display:block; font-size:16px; margin:9px 0 3px; color:var(--ink); line-height:1.4; }
.component small { font-size:12px; color:var(--muted); font-weight:400; }
.boundary-notes { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:16px; margin-top:16px; color:var(--muted); font-size:13px; }
.boundary-notes p { padding:12px 16px; border-left:2px solid var(--line); }
.connection-list { margin-top:22px; padding:16px; border:1px solid var(--line); border-radius:8px; background:var(--paper); }
summary { cursor:pointer; font-weight:650; min-height:30px; }
.connection-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); font-size:13px; overflow-wrap:anywhere; }
.connection-row button { font:12px ui-monospace,monospace; max-width:100%; overflow-wrap:anywhere; text-align:left; }
.erd-filters { display:flex; align-items:end; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.erd-filters label { display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:12px; }
.erd-filters label:first-child { flex:1 1 320px; }
.erd-filters input,.erd-filters select { min-height:44px; padding:8px 12px; min-width:0; width:100%; }
.erd-filters #table-count { font-size:13px; color:var(--muted); padding-bottom:10px; }
.inline-check { display:flex; align-items:center; gap:8px; cursor:pointer; min-height:44px; }
input[type=checkbox] { width:18px; height:18px; accent-color:var(--accent); }
.erd-table { position:absolute; border:1px solid #9aada2; border-radius:7px; background:white; box-shadow:0 2px 5px #2030280a; cursor:pointer; overflow:hidden; }
.erd-table:hover,.erd-table:focus-within { border-color:var(--accent); box-shadow:0 0 0 2px #1d4ed844; }
.table-open { width:100%; height:74px; padding:10px 12px; text-align:left; border:0; border-radius:0; background:#eff5f0; }
.table-open strong { display:block; font:650 14px/1.6 ui-monospace,monospace; color:var(--ink); }
.table-open small { color:#425d4c; font-size:11px; font-weight:500; }
.table-row { height:26px; display:grid; grid-template-columns:minmax(0,1fr) 116px; align-items:center; padding:0 12px; gap:6px; border-top:1px solid #edf0eb; font:12px/1.2 ui-monospace,monospace; }
.table-row:nth-child(odd) { background:#fafcf9; }
.col-name { white-space:nowrap; }
.col-key { color:#1d4ed8; font:650 9px/1 ui-monospace,monospace; margin-right:4px; }
.col-type { color:#566b61; font-size:10px; text-align:right; white-space:nowrap; }
.table-footer { height:32px; padding:7px 12px; border-top:1px solid #dce4df; font-size:10px; color:var(--muted); }
.empty-state { padding:60px 24px; color:var(--muted); }
.phase-heading { margin:28px 0 14px; }
.setup-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr)); gap:16px; }
.setup-card { border:1px solid var(--line); border-radius:10px; padding:22px; background:white; }
.setup-card h4 { margin:0 0 12px; font-size:17px; line-height:1.5; }
.setup-card .owner { color:#355c6b; font-size:12px; margin-bottom:12px; }
.setup-card p { font-size:14px; color:var(--muted); }
.setup-card .done-when { border-top:1px solid var(--line); margin:16px 0; padding-top:12px; font-size:12px; }
footer { margin-top:40px; padding-top:20px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
dialog { width:min(860px,calc(100% - 28px)); max-height:90dvh; padding:0; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:white; box-shadow:0 20px 90px #15282230; }
dialog::backdrop { background:#172a36aa; }
.dialog-header { display:flex; align-items:start; justify-content:space-between; gap:16px; position:sticky; top:0; z-index:1; background:white; padding:22px 24px; border-bottom:1px solid var(--line); }
.dialog-header h2 { overflow-wrap:anywhere; font-size:23px; }
.dialog-header button { flex-shrink:0; }
.dialog-content { padding:24px; }
.dialog-content h3 { margin:25px 0 12px; font-size:16px; }
.dialog-content .description { font-size:16px; }
.dialog-content ul { margin:8px 0; padding-left:22px; }
.dialog-content li { margin:8px 0; overflow-wrap:anywhere; }
.column-detail { padding:16px 0; border-bottom:1px solid #e1e6e1; }
.column-detail dt { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.column-detail dt code { color:#1b4334; font-weight:700; }
.column-detail dd { margin:8px 0 0; font-size:14px; color:#45555e; }
.column-detail .column-meta { font-size:12px; color:var(--muted); }
.column-detail .type { padding:2px 6px; border:1px solid var(--line); border-radius:4px; color:#506455; font-size:11px; }
#page-error { padding:20px; background:#fff1f0; color:#8c2419; border:1px solid #e4a196; }
@media (max-width:760px) {
  body { font-size:16px; }
  .snapshot { width:100%; }
  .view-tabs button { padding:12px 9px; font-size:13px; }
  .graph-toolbar { padding:10px; }
  .graph-viewport,.erd-viewport { height:65dvh; min-height:420px; }
  .erd-filters label { flex:1 1 180px; }
  .dialog-header,.dialog-content { padding:16px; }
  .dialog-header h2 { font-size:20px; }
  .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .metric { padding:12px; }
  .graph-toolbar>span { display:none; }
}
@media print { .dashboard-nav,.view-tabs,.zoom-tools { display:none; } .graph-viewport { height:auto; overflow:visible; } }