:root {
  color-scheme: light;
  --page: #F3F6F3; --surface: #FCFDFC; --surface-alt: #F0F4F0;
  --ink: #10160F; --ink-2: #55605A; --ink-muted: #8B948B;
  --border: rgba(16,22,15,0.11); --border-strong: rgba(16,22,15,0.18);
  --accent: #1F6F53; --accent-ink: #FFFFFF; --critical: #d03b3b;
  --shadow: 0 1px 2px rgba(16,22,15,0.06), 0 8px 24px -12px rgba(16,22,15,0.18);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: #0D120F; --surface: #171F1A; --surface-alt: #1C261F;
    --ink: #F5F7F5; --ink-2: #C2C7C0; --ink-muted: #8B9088;
    --border: rgba(255,255,255,0.11); --border-strong: rgba(255,255,255,0.20);
    --accent: #4FB58C; --accent-ink: #08130E; --critical: #E08585;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font-family: "Noto Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
.loading-veil { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-muted); font-size: 14px; background: var(--page); z-index: 50; }

.wrap { max-width: 980px; margin: 0 auto; padding: 40px 20px 64px; }
h1.title { font-family: "Noto Serif KR", serif; font-weight: 700; font-size: clamp(22px, 3vw, 28px); margin: 0 0 6px; }
.subtitle { margin: 0 0 24px; font-size: 14px; color: var(--ink-2); line-height: 1.6; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; margin-bottom: 16px; }
.table-wrap { overflow-x: auto; }
table.dir { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 13.5px; }
table.dir th { padding: 10px 12px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-muted); background: var(--surface-alt); border-bottom: 1px solid var(--border); white-space: nowrap; }
table.dir td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.dir tr:last-child td { border-bottom: none; }
td[contenteditable] { border-radius: 5px; cursor: text; }
td[contenteditable]:empty::before { content: attr(data-placeholder); color: var(--ink-muted); font-style: italic; }
[contenteditable]:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-radius: 3px; }
td.col-name { min-width: 180px; font-weight: 600; }
td.col-link { min-width: 260px; font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 12px; color: var(--ink-2); word-break: break-all; }
td.col-date { width: 110px; }
td.col-note { min-width: 160px; }
td.col-open { width: 70px; } td.col-del { width: 40px; }
.open-btn { border: 1px solid var(--border); background: var(--surface-alt); color: var(--accent); font: inherit; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.open-btn:hover { border-color: var(--accent); }
.del-btn { border: none; background: none; color: var(--ink-muted); cursor: pointer; font-size: 14px; padding: 4px; }
.del-btn:hover { color: var(--critical); }
.add-btn { background: var(--accent); color: var(--accent-ink); border: none; border-radius: 9px; padding: 11px 18px; font-weight: 700; font-size: 13.5px; cursor: pointer; }