:root { color-scheme: dark; font-family: Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif; --bg:#15141c; --panel:#211f2b; --line:#3a3648; --text:#f3f0f7; --muted:#aaa4b7; --primary:#b295dc; --danger:#ff7e89; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); min-height:100vh; }
a { color:inherit; }
.site-header { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:15px max(20px,calc((100vw - 980px)/2)); background:rgba(21,20,28,.94); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.brand { text-decoration:none; font-size:21px; font-weight:1000; color:var(--primary); }
nav { display:flex; flex-wrap:wrap; gap:15px; }
nav a { text-decoration:none; color:var(--muted); font-size:14px; font-weight:700; }
nav a:hover { color:var(--text); }
.document-shell { width:min(920px,calc(100% - 32px)); margin:34px auto 70px; background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:clamp(22px,5vw,52px); }
h1 { margin:0 0 10px; font-size:clamp(27px,5vw,42px); }
.meta { color:var(--muted); padding-bottom:22px; border-bottom:1px solid var(--line); }
.document-content { white-space:pre-wrap; line-height:1.85; word-break:keep-all; overflow-wrap:anywhere; }
.document-content h2 { margin-top:36px; }
.loading, .empty { color:var(--muted); text-align:center; padding:80px 10px; }
.error { color:var(--danger); white-space:pre-wrap; }
footer { color:var(--muted); text-align:center; padding:0 20px 40px; font-size:13px; }
.delete-card { display:grid; gap:14px; max-width:520px; margin-top:26px; }
label { display:grid; gap:7px; font-weight:700; }
input { width:100%; padding:12px; border-radius:11px; border:1px solid var(--line); background:#17151e; color:var(--text); font:inherit; }
button { padding:12px 16px; border:0; border-radius:11px; background:var(--primary); color:#17131d; font:inherit; font-weight:900; cursor:pointer; }
button.danger { background:rgba(255,126,137,.16); border:1px solid rgba(255,126,137,.4); color:var(--danger); }
.notice-card { padding:16px; border:1px solid var(--line); border-radius:14px; margin:10px 0; }
.notice-card h2 { margin:0 0 7px; font-size:18px; }
@media(max-width:680px){ .site-header{align-items:flex-start;flex-direction:column;gap:10px}.document-shell{margin-top:16px}nav{gap:10px} }