:root { --ink:#252b27; --muted:#788078; --line:#dfe5dc; --paper:#f7f8f3; --card:#fff; --accent:#e8895b; --accent-dark:#bf633e; --sage:#dce8d7; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'Gowun Dodum', sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { height:78px; display:flex; align-items:center; justify-content:space-between; max-width:1120px; margin:auto; padding:0 28px; }
.header-nav { display:flex; align-items:center; gap:20px; font:600 13px 'Space Grotesk',sans-serif; } .header-nav > a:not(.button), .export-menu summary { color:var(--muted); cursor:pointer; } .header-nav > a:not(.button):hover, .export-menu summary:hover { color:var(--accent-dark); }
.export-menu { position:relative; } .export-menu summary { list-style:none; } .export-menu summary::-webkit-details-marker { display:none; } .export-links { position:absolute; z-index:2; right:0; top:26px; display:grid; min-width:145px; border:1px solid var(--line); background:white; box-shadow:4px 4px 0 var(--sage); } .export-links a { padding:11px 13px; white-space:nowrap; } .export-links a:hover { background:var(--paper); color:var(--accent-dark); }
.brand { display:flex; gap:10px; align-items:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; letter-spacing:-.5px; }
.user-badge { color:var(--muted); font-size:12px; } .nav-button { border:0; padding:0; color:var(--muted); background:transparent; cursor:pointer; font:600 13px 'Space Grotesk',sans-serif; } .nav-button:hover { color:var(--accent-dark); }
.brand-mark { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--ink); color:#fff; font-family:'Gowun Dodum'; }
.shell { max-width:1064px; margin:auto; padding:40px 28px 96px; }
.hero { padding:42px 0 58px; max-width:630px; }
.eyebrow { color:var(--accent-dark); font:600 12px 'Space Grotesk',sans-serif; letter-spacing:2px; margin:0 0 16px; }
h1,h2,p { margin-top:0; } h1 { font-size:clamp(38px, 6vw, 68px); line-height:1.12; letter-spacing:-2px; margin-bottom:24px; } h1 em { color:var(--accent-dark); font-style:normal; } .hero-copy { color:var(--muted); font-size:17px; line-height:1.8; }
.button { border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 20px; border-radius:4px; font:600 14px 'Space Grotesk',sans-serif; transition:transform .18s, background .18s; } .button:hover { transform:translateY(-2px); } .button-dark { color:white; background:var(--ink); } .button-accent { color:white; background:var(--accent-dark); } .button-light { border:1px solid var(--line); background:white; } .button-danger { color:#a54835; border:1px solid #e8cfc8; background:#fff8f5; }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); padding-bottom:18px; margin-bottom:24px; } .search { display:flex; align-items:center; gap:10px; width:min(100%, 470px); border-bottom:2px solid var(--ink); padding:8px 4px; } .search-icon { font-size:28px; line-height:20px; transform:rotate(-20deg); } .search input { width:100%; border:0; outline:0; color:var(--ink); background:transparent; font:16px 'Gowun Dodum'; } .clear-search { color:var(--muted); font-size:24px; } .result-count { color:var(--muted); font-size:14px; }
.tag-filter { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:-8px 0 24px; } .filter-label { color:var(--muted); font:600 12px 'Space Grotesk',sans-serif; margin-right:4px; } .tag-filter-link { padding:6px 10px; border:1px solid var(--line); color:var(--muted); background:white; font:12px 'Space Grotesk',sans-serif; } .tag-filter-link:hover,.tag-filter-link.active { border-color:var(--accent); color:var(--accent-dark); background:#fff0e8; } .tag-filter-link small { color:var(--muted); }
.page-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .page-card { min-height:245px; display:flex; flex-direction:column; padding:22px; border:1px solid var(--line); background:var(--card); transition:box-shadow .2s, transform .2s; } .page-card:hover { box-shadow:8px 8px 0 var(--sage); transform:translate(-2px,-2px); } .card-top { display:flex; justify-content:space-between; color:var(--muted); font:11px 'Space Grotesk',sans-serif; letter-spacing:1px; } .card-index { color:var(--accent-dark); } .page-card h2 { font-size:23px; line-height:1.3; margin:28px 0 10px; } .page-card h2 a:hover { color:var(--accent-dark); } .page-card p { color:var(--muted); line-height:1.65; font-size:14px; margin-bottom:18px; } .tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; color:var(--accent-dark); font:12px 'Space Grotesk',sans-serif; } .tags span { padding:4px 8px; background:#fff0e8; }
.empty-state { text-align:center; padding:80px 20px; border:1px dashed #cbd4c7; } .empty-symbol { color:var(--accent); font-size:36px; } .empty-state h2 { margin:12px 0 8px; } .empty-state p { color:var(--muted); margin-bottom:24px; }
.editor-heading { padding:22px 0 32px; } .back-link { display:inline-block; color:var(--muted); font-size:14px; margin-bottom:42px; } .back-link:hover { color:var(--accent-dark); } .editor-heading h1 { font-size:48px; margin-bottom:0; } .editor-form { max-width:760px; } .editor-form label { display:block; margin:22px 0 8px; font-weight:bold; } .editor-form label span { color:var(--muted); font-size:12px; font-weight:normal; } .editor-form input,.editor-form textarea { width:100%; border:1px solid var(--line); border-radius:2px; outline:0; padding:13px 14px; color:var(--ink); background:#fff; font:16px 'Gowun Dodum'; } .editor-form textarea { resize:vertical; line-height:1.75; } .editor-form input:focus,.editor-form textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px #f7dfd2; } .form-actions,.reading-actions { display:flex; gap:10px; margin-top:30px; }
.reading-page { max-width:760px; margin:auto; } .reading-meta { display:flex; gap:18px; align-items:center; color:var(--muted); font:11px 'Space Grotesk',sans-serif; letter-spacing:1px; margin-bottom:20px; } .reading-page h1 { font-size:52px; margin-bottom:34px; } .reading-content { min-height:230px; border-top:1px solid var(--line); padding-top:30px; font-size:17px; line-height:2; white-space:normal; } .reading-actions { border-top:1px solid var(--line); padding-top:20px; } .reading-actions form { margin:0; }
.markdown-body h1,.markdown-body h2,.markdown-body h3 { line-height:1.3; margin:1.4em 0 .55em; letter-spacing:-.5px; } .markdown-body h1 { font-size:30px; } .markdown-body h2 { font-size:25px; } .markdown-body h3 { font-size:21px; } .markdown-body p { margin:0 0 1em; } .markdown-body ul,.markdown-body ol { padding-left:25px; } .markdown-body blockquote { margin:1em 0; padding:10px 18px; border-left:4px solid var(--accent); color:var(--muted); background:#fff8f5; } .markdown-body a { color:var(--accent-dark); text-decoration:underline; } .markdown-body pre { overflow:auto; padding:16px; border-radius:3px; color:#eef4ed; background:#252b27; line-height:1.55; } .markdown-body code { padding:2px 5px; border-radius:3px; background:#edf1eb; font:14px Consolas,monospace; } .markdown-body pre code { padding:0; background:transparent; } .markdown-body table { width:100%; border-collapse:collapse; margin:1em 0; } .markdown-body th,.markdown-body td { padding:8px 10px; border:1px solid var(--line); text-align:left; } .markdown-body th { background:#edf1eb; }
.history-list { max-width:760px; border-top:1px solid var(--line); } .history-card { padding:24px 0; border-bottom:1px solid var(--line); } .history-meta { display:flex; gap:14px; color:var(--muted); font:11px 'Space Grotesk',sans-serif; letter-spacing:.5px; } .history-card h2 { margin:12px 0; font-size:24px; } .history-content { margin-top:16px; padding:16px; background:#fff; color:var(--muted); line-height:1.8; white-space:normal; }
.flash-stack { margin-bottom:18px; } .flash { padding:12px 16px; border-left:4px solid var(--accent); background:#fff0e8; font-size:14px; } .site-footer { color:var(--muted); max-width:1064px; padding:0 28px 28px; margin:auto; font-size:12px; }
.trash-list { border-top:1px solid var(--line); } .trash-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 0; border-bottom:1px solid var(--line); } .trash-row h2 { margin:0 0 5px; font-size:20px; } .trash-row p { margin:0; color:var(--muted); font-size:13px; } .trash-actions { display:flex; gap:8px; } .trash-actions form { margin:0; }
.permission-note { margin-top:28px; color:var(--muted); } .permission-note a,.auth-switch a { color:var(--accent-dark); font-weight:bold; } .request-form { border-top:1px solid var(--line); margin-top:30px; padding-top:22px; } .request-form label { display:block; margin-bottom:9px; font-weight:bold; } .request-row { display:flex; gap:10px; } .request-row input { flex:1; border:1px solid var(--line); padding:12px; font:14px 'Gowun Dodum'; } .request-row input:focus { outline:2px solid #f7dfd2; }
.auth-panel { max-width:480px; margin:40px auto; } .auth-panel h1 { font-size:52px; margin-bottom:12px; } .auth-copy { color:var(--muted); margin-bottom:30px; } .auth-panel .button { margin-top:26px; } .auth-switch { color:var(--muted); margin-top:24px; text-align:center; }
.request-list,.user-list { border-top:1px solid var(--line); } .request-card,.user-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 0; border-bottom:1px solid var(--line); } .request-card h2 { margin:8px 0 4px; font-size:20px; } .request-card p { margin:0; color:var(--muted); font-size:14px; } .request-meta { display:flex; gap:12px; color:var(--muted); font:11px 'Space Grotesk',sans-serif; } .status-pending { color:var(--accent-dark); } .status-approved { color:#477c55; } .status-rejected { color:#a54835; } .request-actions,.role-form { display:flex; gap:8px; } .request-actions form { margin:0; } .user-row strong { display:block; font:600 16px 'Space Grotesk',sans-serif; } .user-row span { color:var(--muted); font-size:13px; } .role-badge { padding:6px 10px; background:#fff0e8; color:var(--accent-dark) !important; font-size:12px !important; } .role-form select { border:1px solid var(--line); padding:8px; background:#fff; font:13px 'Gowun Dodum'; }
@media (max-width:700px) { .site-header { padding:0 18px; } .header-nav { gap:10px; } .header-nav > a:not(.button), .export-menu summary, .nav-button { font-size:11px; } .header-nav .button { padding:0 12px; } .user-badge { display:none; } .shell { padding:20px 18px 70px; } .hero { padding:38px 0 42px; } .hero h1 { font-size:46px; } .toolbar { align-items:flex-end; flex-direction:column; gap:12px; } .search { width:100%; } .page-grid { grid-template-columns:1fr; } .page-card { min-height:190px; } .editor-heading h1,.reading-page h1,.auth-panel h1 { font-size:40px; } .reading-meta { align-items:flex-start; flex-direction:column; gap:8px; } .trash-row,.request-card,.user-row { align-items:flex-start; flex-direction:column; } .request-row { align-items:stretch; flex-direction:column; } }