@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700&display=swap');
:root { --ink:#17251f; --muted:#607064; --paper:#f4f5ef; --surface:#fff; --line:#dce2d8; --green:#345840; --accent:#c5ee89; --danger:#a0372c; --danger-bg:#fbefed; --radius:12px; }
* { box-sizing:border-box; } [hidden] { display:none!important; }
body { margin:0; background:var(--paper); color:var(--ink); font:14px/1.65 'DM Sans','Noto Sans KR',sans-serif; }
button,input,select,textarea { font:inherit; } a { color:var(--green); text-underline-offset:4px; } button { cursor:pointer; border:1px solid var(--ink); border-radius:8px; background:var(--ink); color:var(--surface); padding:10px 16px; font-weight:600; min-height:44px; }
button:hover { background:var(--green); } button:disabled { opacity:.55; cursor:wait; } .quiet { color:var(--ink); background:var(--surface); border-color:var(--line); } .quiet:hover { background:var(--paper); } .danger { color:var(--danger); border-color:var(--danger); background:var(--surface); } .danger:hover { background:var(--danger-bg); }
:focus-visible { outline:3px solid var(--green); outline-offset:3px; }
.topbar { max-width:1280px; margin:24px auto 0; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.brand { font-size:28px; font-weight:700; letter-spacing:-1.6px; text-decoration:none; color:var(--ink); } .brand span,h1 span { color:var(--green); } .account { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:16px; font-size:12px; } #operator-name { font-weight:600; }
main { max-width:1200px; margin:56px auto 64px; } .eyebrow { color:var(--muted); letter-spacing:2px; font-size:10px; font-weight:700; margin:0 0 12px; } h1 { font-size:40px; letter-spacing:-2px; line-height:1.3; margin:0 0 12px; } h2 { font-size:20px; letter-spacing:-.6px; margin:0 0 8px; } .page-heading>p:last-child,.section-heading p { color:var(--muted); margin:0; } .feedback { min-height:24px; margin:24px 0; color:var(--green); } .feedback.error,.error { color:var(--danger); } .error:empty { display:none; }
.auth-panel { max-width:440px; padding:32px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); } .auth-panel>p:not(.eyebrow) { color:var(--muted); } form:not(.toolbar) { display:grid; gap:12px; } form label { font-weight:600; } input,textarea,select { width:100%; background:var(--surface); color:var(--ink); border:1px solid #b7c5b7; border-radius:8px; padding:10px 12px; min-height:44px; } textarea { resize:vertical; line-height:1.8; } input::placeholder { color:var(--muted); } small,.helper { font-size:12px; color:var(--muted); font-weight:400; } #password-confirm-wrap { display:grid; gap:12px; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); background:var(--ink); color:var(--surface); border-radius:var(--radius); padding:24px 0; } .stats>div { padding:0 28px; border-left:1px solid #435447; } .stats>div:first-child { border:0; } .stats span { display:block; color:#d6e0d0; font-size:12px; } .stats strong { font-size:32px; line-height:1.4; font-weight:500; }
.section-nav { display:flex; gap:8px; flex-wrap:wrap; padding:32px 0 20px; } .section-nav button { color:var(--muted); border-color:transparent; background:transparent; } .section-nav button[aria-pressed=true] { background:var(--surface); border-color:var(--line); color:var(--ink); }
.panel { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:28px; } .section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:24px; } .section-heading p { font-size:12px; } .toolbar { display:flex; gap:12px; align-items:center; margin-bottom:24px; } .toolbar input { max-width:420px; } .toolbar select { max-width:180px; } .toolbar button { white-space:nowrap; }
.table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; text-align:left; } th { padding:12px; color:var(--muted); font-size:11px; font-weight:500; border-bottom:1px solid var(--line); white-space:nowrap; } td { padding:20px 12px; border-bottom:1px solid var(--line); vertical-align:top; font-size:13px; } td:first-child { min-width:210px; } td .secondary { display:block; color:var(--muted); font-size:11px; overflow-wrap:anywhere; } td .nickname { font-weight:600; } .badge { display:inline-block; font-size:11px; color:var(--green); border:1px solid var(--line); background:var(--paper); padding:4px 8px; border-radius:5px; white-space:nowrap; } .badge.suspended { color:var(--danger); background:var(--danger-bg); border-color:#edc8c1; } td .reason { display:block; margin-top:8px; max-width:240px; overflow-wrap:anywhere; }
.more { display:block; margin:24px auto 0; } .empty { text-align:center; color:var(--muted); padding:40px 16px; margin:0; } .chat-item { padding:20px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr auto; gap:12px 24px; } .chat-item p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; } .chat-item .meta { font-size:11px; color:var(--muted); margin-bottom:8px; } .chat-item .message { grid-column:1; } .chat-item button { grid-column:2; grid-row:1/3; align-self:center; } .chat-item.is-hidden .message { color:var(--muted); } .chat-item .hidden-reason { color:var(--danger); font-size:12px; }
.notice-panel { max-width:850px; } .actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; } .audit-items { list-style:none; margin:0; padding:0; } .audit-items li { border-bottom:1px solid var(--line); padding:20px 0; } .audit-items p { margin:4px 0; overflow-wrap:anywhere; } .audit-items .meta { font-size:11px; color:var(--muted); }
dialog { width:min(480px,calc(100vw - 32px)); max-height:90dvh; overflow-y:auto; padding:28px; color:var(--ink); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 16px 64px #17251f30; } dialog::backdrop { background:#17251f99; } dialog p { margin:0; overflow-wrap:anywhere; } #dialog-explanation { color:var(--muted); font-size:13px; } #reason-wrap { display:grid; gap:8px; } footer { max-width:1200px; margin:0 auto 24px; border-top:1px solid var(--line); padding-top:20px; display:flex; justify-content:space-between; color:var(--muted); font-size:11px; }
@media(max-width:1320px) { .topbar,main,footer { margin-left:24px; margin-right:24px; } }
@media(max-width:700px) { .topbar { margin-top:16px; padding:12px 16px; align-items:flex-start; } .account { gap:8px 12px; } #operator-name { flex-basis:100%; text-align:right; } main { margin-top:36px; } h1 { font-size:32px; } .stats { grid-template-columns:repeat(2,1fr); padding:8px 0; } .stats>div { padding:12px 20px; } .stats>div:nth-child(3) { border:0; } .stats strong { font-size:28px; } .panel,.auth-panel { padding:20px; } .section-heading { gap:12px; flex-wrap:wrap; } .section-nav { gap:4px; padding-top:24px; } .section-nav button { padding:8px 12px; } .toolbar { flex-wrap:wrap; } .toolbar input { flex:1; min-width:140px; } .chat-item { grid-template-columns:1fr; } .chat-item button { grid-column:1; grid-row:auto; justify-self:start; } }
@media(max-width:380px) { .topbar,main,footer { margin-left:12px; margin-right:12px; } .brand { font-size:24px; } .account { font-size:10px; } .section-nav button { padding:8px; font-size:12px; } .panel { padding:16px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; } }