:root { color-scheme:light dark; --bg:#f5f4ed; --panel:#fffef9; --ink:#223c31; --muted:#69776c; --line:#dce1d5; --accent:#345c43; --field:#fff; --soft:#e9eee3; --error:#a7352d; font:15px/1.65 system-ui,-apple-system,"Noto Sans KR",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100svh; display:flex; flex-direction:column; background:var(--bg); color:var(--ink); }
main.shell { flex:1; }
[hidden] { display:none !important; }
a { color:inherit; text-underline-offset:4px; }
button,input,select,textarea { font:inherit; }
button,a,select,textarea { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { opacity:.55; cursor:wait; }
:focus-visible { outline:3px solid #81aa85; outline-offset:3px; }
.shell { width:min(1100px,calc(100% - 64px)); margin-inline:auto; }
.topbar { min-height:92px; display:flex; justify-content:space-between; align-items:center; gap:20px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:9px; text-decoration:none; font-size:19px; font-weight:750; letter-spacing:-.7px; }
.topbar nav a { font-size:13px; text-decoration:none; color:var(--muted); }
.intro { padding:58px 0 42px; }
.eyebrow { font-size:10px; font-weight:750; letter-spacing:2px; color:var(--muted); margin:0 0 14px; }
h1 { font-size:clamp(30px,4.8vw,49px); line-height:1.3; letter-spacing:-2px; margin:0 0 20px; font-weight:730; }
h1 span { color:#8caa68; }
.intro>p:last-child { color:var(--muted); font-size:15px; margin:0; }
.board-layout { display:grid; grid-template-columns:340px minmax(0,1fr); gap:52px; align-items:start; padding-bottom:70px; }
.composer { background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:26px; position:sticky; top:24px; }
h2 { font-size:20px; margin:0; letter-spacing:-.6px; line-height:1.4; }
.section-heading,.feed-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.anonymous { color:var(--accent); background:var(--soft); font-size:11px; border-radius:20px; padding:3px 10px; }
label { display:block; font-size:12px; font-weight:650; margin:24px 0 8px; }
select,textarea { color:var(--ink); background:var(--field); border:1px solid var(--line); border-radius:10px; width:100%; padding:11px 12px; }
select { min-height:46px; font-size:14px; }
textarea { display:block; resize:vertical; min-height:150px; max-height:400px; font-size:16px; line-height:1.7; }
textarea::placeholder { color:var(--muted); opacity:.8; }
.count { display:flex; justify-content:space-between; gap:8px; font-size:10px; color:var(--muted); margin-top:7px; }
.notice { font-size:11px; color:var(--muted); margin:18px 0; line-height:1.7; }
.notice strong { font-weight:600; color:var(--ink); }
.primary,.secondary,.danger { min-height:44px; border-radius:10px; padding:10px 16px; border:1px solid var(--line); }
.primary { display:flex; justify-content:space-between; width:100%; background:var(--accent); color:#fff; font-weight:650; border-color:var(--accent); }
.secondary { background:var(--panel); color:var(--ink); }
.danger { background:#983d34; border-color:#983d34; color:#fff; }
.composer-note { padding-top:18px; border-top:1px solid var(--line); margin:22px 0 0; font-size:11px; color:var(--muted); }
.feed-heading { margin:3px 0 24px; }
.feed-heading .eyebrow { margin-bottom:8px; }
.feed-heading h2 { font-size:25px; }
.text-button { background:none; border:0; color:var(--muted); font-size:12px; padding:10px 0; min-height:44px; }
.feed-toolbar { display:flex; align-items:center; gap:12px; padding:0 0 18px; border-bottom:1px solid var(--line); }
.feed-toolbar label { margin:0; flex-shrink:0; }
.feed-toolbar select { width:min(220px,55%); background:transparent; font-size:12px; min-height:40px; padding:8px; }
.feed-toolbar>span { margin-left:auto; font-size:11px; color:var(--muted); flex-shrink:0; }
.note { border-bottom:1px solid var(--line); padding:24px 0; }
.note-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.game-tag { background:var(--soft); color:var(--ink); font-size:11px; font-weight:600; border-radius:6px; padding:3px 9px; }
time { color:var(--muted); font-size:11px; }
.note-message { white-space:pre-wrap; overflow-wrap:anywhere; font-size:15px; margin:15px 0 0; line-height:1.85; }
.note-actions { display:flex; gap:20px; }
.replies { margin-left:12px; padding-left:16px; border-left:2px solid var(--line); }
.reply-note { padding:16px 0; }
.reply-note:last-of-type { border-bottom:0; }
.reply-target { white-space:pre-wrap; overflow-wrap:anywhere; color:var(--muted); font-size:12px; margin:8px 0; }
.reply-deleted { color:var(--muted); }
#reply-submit { width:auto; }
.delete { margin-left:auto; color:var(--error); min-height:32px; }
.empty { padding:66px 20px; text-align:center; color:var(--muted); }
.empty>span { display:block; font-size:44px; color:#83a078; }
.empty h3 { font-size:17px; color:var(--ink); margin:15px 0 7px; }
.empty p { font-size:12px; margin:0; }
.status { font-size:12px; color:var(--error); margin:12px 0 0; overflow-wrap:anywhere; }
.status:empty { display:none; }
.status.success { color:var(--accent); }
#more { display:block; margin:24px auto 0; }
.trap { display:none; }
.footer { border-top:1px solid var(--line); padding-block:16px; color:var(--muted); font-size:12px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 24px; }
.footer .policy-links { justify-content:flex-start; color:inherit; }
.footer .policy-links a:hover { color:var(--ink); }
.footer-admin { display:flex; gap:16px; margin-left:auto; }
dialog { width:min(460px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:28px; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:20px; box-shadow:0 20px 100px #0003; }
dialog::backdrop { background:#14241bb0; }
dialog p:not(.eyebrow) { font-size:13px; color:var(--muted); }
.dialog-close { float:right; border:0; background:transparent; color:var(--ink); width:44px; height:44px; margin:-12px -12px 0 0; font-size:26px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:24px; }
@media(max-width:800px) { .shell { width:calc(100% - 40px); } .board-layout { grid-template-columns:300px minmax(0,1fr); gap:28px; } .composer { padding:20px; } }
@media(max-width:650px) { .topbar { min-height:72px; } .intro { padding:34px 0 28px; } .intro>p:last-child { font-size:13px; } h1 { letter-spacing:-1.4px; } .board-layout { grid-template-columns:1fr; gap:38px; padding-bottom:40px; } .composer { position:static; } textarea { min-height:120px; height:130px; } .feed-heading h2 { font-size:22px; } .footer { font-size:10px; } }
@media(prefers-color-scheme:dark) { :root { --bg:#17221c; --panel:#1e2c23; --ink:#e6eddf; --muted:#a0b09f; --line:#36493a; --accent:#53794e; --field:#19251e; --soft:#304330; --error:#ffa99c; } .anonymous { color:#c3d5b9; } .status.success { color:#c3d5b9; } }