/* Moderation UI: Discord-style suspension screen (templates/suspended.html), the one-time warning
   modal (templates/_moderation.html), "내 경고·제재 기록" and the user report form.
   The suspension page is standalone, so tokens are repeated here instead of relying on style.css. */
:root{
  --mod-bg:#0b0c0f;--mod-surface:#15171d;--mod-surface-2:#1b1e26;--mod-line:#2a2e38;
  --mod-text:#f3f4f6;--mod-secondary:#b3b8c3;--mod-muted:#858b99;
  --mod-red:#f0717a;--mod-red-soft:#3a1d22;--mod-amber:#e9bb65;--mod-amber-soft:#3a2f17;--mod-accent:#7165ff;
  --mod-font:"Pretendard","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---- standalone lock page ---- */
body.mod-locked{margin:0;min-height:100vh;min-height:100dvh;background:var(--mod-bg);color:var(--mod-text);font-family:var(--mod-font);display:flex;align-items:center;justify-content:center;padding:24px 16px;box-sizing:border-box;overflow-x:hidden}
.mod-locked *{box-sizing:border-box}
.mod-backdrop{position:fixed;inset:0;display:grid;grid-template-columns:72px 240px 1fr;gap:0;filter:blur(6px) saturate(.7);opacity:.45;pointer-events:none}
.mod-backdrop span{display:block;background:var(--mod-surface)}
.mod-backdrop span:nth-child(1){background:#090a0d}
.mod-backdrop span:nth-child(2){background:#101217;border-right:1px solid var(--mod-line)}
.mod-backdrop span:nth-child(3){background:linear-gradient(180deg,#14161c 0,#14161c 56px,var(--mod-bg) 56px)}
.mod-locked::after{content:"";position:fixed;inset:0;background:rgba(5,6,8,.72);pointer-events:none}

.mod-dialog{position:relative;z-index:2;width:100%;max-width:470px;background:var(--mod-surface);border:1px solid var(--mod-line);border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.55);padding:30px 28px 22px;text-align:center}
.mod-brand{display:inline-flex;align-items:center;gap:8px;color:var(--mod-secondary);font-size:14px;font-weight:700;letter-spacing:.01em;margin-bottom:18px;text-decoration:none}
.mod-brand img{width:22px;height:22px;border-radius:6px}
.mod-icon{width:64px;height:64px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;background:var(--mod-red-soft);color:var(--mod-red)}
.mod-icon svg{width:30px;height:30px}
.mod-icon-warn{background:var(--mod-amber-soft);color:var(--mod-amber)}
.mod-dialog h1,.mod-dialog h2{margin:0 0 10px;font-size:22px;line-height:1.35;font-weight:800;word-break:keep-all}
.mod-desc{margin:0 0 18px;color:var(--mod-secondary);font-size:15px;line-height:1.65;word-break:keep-all}
.mod-desc strong{color:var(--mod-text)}
.mod-facts{margin:0 0 16px;padding:0;border:1px solid var(--mod-line);border-radius:10px;background:var(--mod-surface-2);text-align:left;overflow:hidden}
.mod-facts div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;padding:12px 14px;border-top:1px solid var(--mod-line)}
.mod-facts div:first-child{border-top:0}
.mod-facts dt{margin:0;color:var(--mod-muted);font-size:13px;font-weight:700;padding-top:1px}
.mod-facts dd{margin:0;min-width:0;font-size:14.5px;line-height:1.55;overflow-wrap:anywhere}
.mod-facts dd small{display:block;color:var(--mod-amber);font-size:13px;margin-top:2px}
.mod-note{margin:0 0 18px;padding:10px 12px;border-radius:9px;background:var(--mod-amber-soft);color:#f3d9a4;font-size:13.5px;line-height:1.55;text-align:left;word-break:keep-all}
.mod-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.mod-actions form{margin:0;display:contents}
.mod-btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;min-width:0;flex:1 1 140px;padding:0 16px;border-radius:9px;border:1px solid var(--mod-line);background:transparent;color:var(--mod-text);font:inherit;font-size:15px;font-weight:700;cursor:pointer;text-decoration:none}
.mod-btn:hover{background:var(--mod-surface-2)}
.mod-btn-primary{background:var(--mod-accent);border-color:var(--mod-accent);color:#fff}
.mod-btn-primary:hover{background:#8379ff}
.mod-btn:focus-visible{outline:2px solid #a8a1ff;outline-offset:2px}
.mod-links{margin:0;color:var(--mod-muted);font-size:12.5px;line-height:1.7}
.mod-links a{color:var(--mod-secondary)}

/* ---- warning modal on normal pages ---- */
.mod-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(5,6,8,.74);backdrop-filter:blur(3px);overflow-y:auto}
.mod-overlay .mod-dialog{margin:auto}
.mod-overlay .mod-actions{margin-bottom:10px}
.mod-appeal{margin:6px 0 0;text-align:left;border-top:1px solid var(--mod-line);padding-top:12px}
.mod-appeal summary{cursor:pointer;color:var(--mod-secondary);font-size:13.5px;font-weight:600;list-style-position:inside}
.mod-appeal textarea{display:block;width:100%;min-height:96px;margin:10px 0 8px;padding:10px 12px;border-radius:9px;border:1px solid var(--mod-line);background:var(--mod-bg);color:var(--mod-text);font:inherit;font-size:14px;resize:vertical}
.mod-appeal .mod-btn{width:100%}
.mod-count{display:flex;justify-content:center;gap:6px;margin:0 0 14px}
.mod-count i{width:34px;height:7px;border-radius:4px;background:var(--mod-line)}
.mod-count i.is-on{background:var(--mod-amber)}

/* ---- pages inside the normal layout ---- */
.mod-page{max-width:760px}
.mod-record{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mod-record li{padding:14px 16px;border:1px solid var(--line,#252830);border-radius:10px;background:var(--surface,#121419)}
.mod-record .mod-record-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-bottom:6px;min-width:0}
.mod-record p{margin:0;line-height:1.6;overflow-wrap:anywhere}
.mod-meter{display:flex;gap:6px;align-items:center;margin:6px 0 14px}
.mod-meter i{width:44px;height:8px;border-radius:4px;background:var(--line-strong,#363b47)}
.mod-meter i.is-on{background:var(--amber,#e9bb65)}
.mod-excerpt{margin:0 0 14px;padding:12px 14px;border-left:3px solid var(--line-strong,#363b47);background:var(--surface-2,#171a21);border-radius:0 8px 8px 0;color:var(--secondary,#a9adb7);white-space:pre-wrap;overflow-wrap:anywhere}
.cm-act-report{color:var(--muted,#7f8593)}
.ggu-quota{margin:6px 0 0;font-size:12px;color:var(--secondary,#a9adb7)}
.ggu-quota.is-empty{color:var(--amber,#e9bb65)}

@media (max-width:520px){
  .mod-dialog{padding:24px 18px 18px;border-radius:12px}
  .mod-dialog h1,.mod-dialog h2{font-size:20px}
  .mod-backdrop{grid-template-columns:0 0 1fr}
}