:root {
	--bg: #ffffff;
	--bg-soft: #f7f7f5;
	--bg-hover: #efefed;
	--fg: #37352f;
	--fg-soft: #787774;
	--line: #e9e9e7;
	--accent: #2383e2;
	--danger: #e03e3e;
	--radius: 6px;
	--shadow: 0 1px 2px rgba(15, 15, 15, 0.06), 0 0 0 1px rgba(15, 15, 15, 0.05);
	--font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Segoe UI", "Noto Sans KR", sans-serif;
	--mono: ui-monospace, SFMono-Regular, Menlo, monospace;

	--c-gray-bg: #f1f1ef; --c-gray-fg: #787774;
	--c-brown-bg: #f4eeee; --c-brown-fg: #9f6b53;
	--c-orange-bg: #fbecdd; --c-orange-fg: #d9730d;
	--c-yellow-bg: #fbf3db; --c-yellow-fg: #cb912f;
	--c-green-bg: #edf3ec; --c-green-fg: #448361;
	--c-blue-bg: #e7f3f8; --c-blue-fg: #337ea9;
	--c-purple-bg: #f6f3f9; --c-purple-fg: #9065b0;
	--c-pink-bg: #faf1f5; --c-pink-fg: #c14c8a;
	--c-red-bg: #fdebec; --c-red-fg: #d44c47;
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #191919;
		--bg-soft: #202020;
		--bg-hover: #2c2c2c;
		--fg: #e6e6e4;
		--fg-soft: #9b9b9b;
		--line: #2f2f2f;
		--accent: #529cca;
		--shadow: 0 0 0 1px rgba(255, 255, 255, 0.07);
		--c-gray-bg: #2f2f2f; --c-gray-fg: #9b9b9b;
		--c-brown-bg: #4a3228; --c-brown-fg: #c19a86;
		--c-orange-bg: #5c3b23; --c-orange-fg: #e6a065;
		--c-yellow-bg: #56452f; --c-yellow-fg: #dfb35b;
		--c-green-bg: #2b4632; --c-green-fg: #7cb88f;
		--c-blue-bg: #28456c; --c-blue-fg: #7fb2db;
		--c-purple-bg: #483660; --c-purple-fg: #b997d6;
		--c-pink-bg: #522e42; --c-pink-fg: #d88ab4;
		--c-red-bg: #522e2a; --c-red-fg: #e48b85;
	}
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 15px; line-height: 1.55; -webkit-text-size-adjust: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
.muted { color: var(--fg-soft); }
.pad { padding: 16px; }

.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); background: var(--bg); border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; text-decoration: none; letter-spacing: -0.01em; }
.search { flex: 1; }
.search input { width: 100%; max-width: 420px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft); }
.icon-btn { text-decoration: none; padding: 4px 6px; border-radius: var(--radius); color: var(--fg-soft); }
.icon-btn:hover { background: var(--bg-hover); }

main { max-width: 1100px; margin: 0 auto; padding: 0 16px 80px; outline: none; }
.crumbs { margin: 18px 0 4px; font-size: 13px; color: var(--fg-soft); display: flex; gap: 6px; flex-wrap: wrap; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
h1.title { font-size: 30px; line-height: 1.25; margin: 6px 0 14px; letter-spacing: -0.015em; overflow-wrap: anywhere; }

.home-list { list-style: none; padding: 0; margin: 12px 0; }
.home-list li a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--radius); text-decoration: none; }
.home-list li a:hover { background: var(--bg-hover); }
.home-list .sub { padding-left: 22px; }
.home-section { margin-top: 22px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-soft); }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 10px; overflow-x: auto; }
.tabs a { padding: 6px 10px; text-decoration: none; color: var(--fg-soft); border-bottom: 2px solid transparent; white-space: nowrap; font-size: 14px; }
.tabs a.on { color: var(--fg); border-bottom-color: var(--fg); }
.toolbar { display: flex; gap: 8px; align-items: center; margin: 8px 0 12px; flex-wrap: wrap; }
.toolbar input { padding: 5px 9px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); min-width: 0; flex: 1; max-width: 280px; }
.count { font-size: 13px; color: var(--fg-soft); }

.table-wrap { overflow-x: auto; border-top: 1px solid var(--line); -webkit-overflow-scrolling: touch; }
table.db { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 14px; }
table.db th, table.db td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 7px 9px; text-align: left; vertical-align: top; max-width: 320px; }
table.db th:last-child, table.db td:last-child { border-right: none; }
table.db th { font-weight: 500; color: var(--fg-soft); background: var(--bg); position: sticky; top: 0; cursor: pointer; user-select: none; white-space: nowrap; }
table.db th .arrow { font-size: 11px; }
table.db td.t { font-weight: 600; min-width: 180px; }
table.db td.t a { text-decoration: none; }
table.db tr:hover td { background: var(--bg-soft); }
.clip { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.card { display: block; text-decoration: none; padding: 12px 14px; border-radius: 8px; background: var(--bg); box-shadow: var(--shadow); }
.card:hover { background: var(--bg-soft); }
.card h3 { margin: 0 0 8px; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.card .kv { font-size: 13px; color: var(--fg-soft); margin: 3px 0; }

.board { display: flex; gap: 12px; overflow-x: auto; align-items: flex-start; padding-bottom: 8px; }
.lane { flex: 0 0 260px; background: var(--bg-soft); border-radius: 8px; padding: 8px; }
.lane h4 { margin: 2px 4px 8px; font-size: 13px; font-weight: 500; display: flex; gap: 6px; align-items: center; }
.lane .card { margin-bottom: 8px; }

.chip { display: inline-block; padding: 0 7px; border-radius: 4px; font-size: 13px; line-height: 20px; margin: 1px 4px 1px 0; white-space: nowrap; background: var(--c-gray-bg); color: var(--fg); }
.chip.gray { background: var(--c-gray-bg); } .chip.brown { background: var(--c-brown-bg); } .chip.orange { background: var(--c-orange-bg); }
.chip.yellow { background: var(--c-yellow-bg); } .chip.green { background: var(--c-green-bg); } .chip.blue { background: var(--c-blue-bg); }
.chip.purple { background: var(--c-purple-bg); } .chip.pink { background: var(--c-pink-bg); } .chip.red { background: var(--c-red-bg); }
a.ref { text-decoration: none; border-bottom: 1px solid var(--line); }
a.ref:hover { border-bottom-color: var(--fg-soft); }
.check { font-size: 14px; }

.props { display: grid; grid-template-columns: minmax(110px, 160px) 1fr; gap: 2px 10px; margin: 0 0 20px; font-size: 14px; }
.props dt { color: var(--fg-soft); padding: 5px 0; overflow-wrap: anywhere; }
.props dd { margin: 0; padding: 5px 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .props { grid-template-columns: 1fr; } .props dt { padding-bottom: 0; } .props dd { padding-top: 0; padding-bottom: 8px; border-bottom: 1px solid var(--line); } }

.body { border-top: 1px solid var(--line); padding-top: 14px; overflow-wrap: anywhere; }
.body h1, .body h2, .body h3 { line-height: 1.3; margin: 1.4em 0 0.4em; }
.body h1 { font-size: 24px; } .body h2 { font-size: 20px; } .body h3 { font-size: 17px; }
.body table { border-collapse: collapse; display: block; overflow-x: auto; font-size: 14px; }
.body th, .body td { border: 1px solid var(--line); padding: 5px 8px; }
.body code { font-family: var(--mono); font-size: 0.9em; background: var(--bg-soft); padding: 1px 4px; border-radius: 4px; }
.body pre { background: var(--bg-soft); padding: 12px; border-radius: 6px; overflow-x: auto; }
.body blockquote, .body aside { margin: 12px 0; padding: 10px 14px; background: var(--bg-soft); border-radius: 6px; border-left: 3px solid var(--line); }
.body img { max-width: 100%; height: auto; border-radius: 4px; }
.body a { color: var(--accent); }

.section-h { font-size: 13px; color: var(--fg-soft); margin: 26px 0 6px; font-weight: 500; }
.backlinks a { display: block; padding: 4px 0; text-decoration: none; }
.actions { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.btn { padding: 6px 12px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg); cursor: pointer; text-decoration: none; font-size: 14px; }
.btn:hover { background: var(--bg-hover); }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.danger { color: var(--danger); }
textarea.edit { width: 100%; min-height: 50vh; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); font-family: var(--mono); font-size: 13px; line-height: 1.5; }
input.edit { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); font-size: 20px; font-weight: 600; }
.note { padding: 10px 12px; border-radius: var(--radius); background: var(--c-yellow-bg); margin: 10px 0; font-size: 14px; }
.note.err { background: var(--c-red-bg); }

.login { max-width: 360px; margin: 12vh auto 0; display: grid; gap: 10px; }
.login input { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.list-plain { list-style: none; padding: 0; }
.list-plain li { padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; gap: 10px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.search-hit { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.search-hit small { color: var(--fg-soft); display: block; }