/* Administration only. The OBS document deliberately does not load the global
   body/metric typography or shell. Its editor uses the same L1–L4 fallback
   values inside .admin-ui, leaving #stage and the transparent canvas intact. */
.admin-ui{
  --admin-page:var(--maple-page,#f7f1e3);--admin-surface:var(--maple-surface,#fffaf0);
  --admin-panel:var(--maple-panel,#f3e7d0);--admin-line:var(--maple-line,#c7ad88);
  --admin-text:var(--maple-text,#493d32);--admin-muted:var(--maple-muted,#6d5944);
  --admin-accent:var(--maple-accent,#9d4524);--admin-good:var(--maple-positive,#38642c);
  --admin-font:var(--site-font-display,'Maplestory','Malgun Gothic','맑은 고딕',sans-serif);
  --admin-number:var(--site-font-ui,system-ui,-apple-system,'Segoe UI','Noto Sans KR',sans-serif);
  --admin-l1:var(--ui-type-l1-size,32px);--admin-l2:var(--ui-type-l2-size,22px);
  --admin-l3:var(--ui-type-l3-size,16px);--admin-l4:var(--ui-type-l4-size,14px);
  color:var(--admin-text);font-family:var(--admin-font);font-size:var(--admin-l4);line-height:1.65;color-scheme:light;
}
.admin-ui *{box-sizing:border-box}
.admin-ui :is(input,textarea,select,button){min-width:0;max-width:100%;font-family:var(--admin-number);font-size:16px;line-height:1.4}
.admin-ui :is(input,textarea,select){border:1px solid var(--admin-line);border-radius:10px;padding:10px 12px;color:var(--admin-text);background:var(--admin-surface);accent-color:var(--admin-good)}
.admin-ui :is(input,select,button){min-height:44px}
.admin-ui :is(input,textarea)::placeholder{color:var(--admin-muted);opacity:1}
.admin-ui button{padding:10px 16px;border:1px solid var(--admin-line);border-radius:10px;background:var(--admin-panel);color:var(--admin-text);font-family:var(--admin-font);font-weight:700;cursor:pointer}
.admin-ui button:hover{background:#ead8b9;border-color:#a98050}
.admin-ui button:disabled{cursor:default;background:#e8dfcf;color:#6d6051;border-color:#c3b59e}
.admin-ui :is(a,button,input,select,textarea):focus-visible{outline:2px solid var(--admin-accent);outline-offset:3px}
.admin-ui button.primary{background:var(--admin-accent);border-color:#873b20;color:#fffaf0}
.admin-ui button.primary:hover{background:#84391f}
.admin-ui button.danger{background:#fae9e6;border-color:#c48d84;color:#973d32}
.admin-ui button.danger:hover{background:#f2d3cc}
.admin-ui h1{font-size:var(--admin-l1);line-height:1.3;letter-spacing:-.02em}
.admin-ui h2{font-size:var(--admin-l2);line-height:1.4;letter-spacing:-.02em}

/* Q&A inbox: one style owner, including loaded and empty states. */
body.qna-admin{margin:0;min-height:100vh;background:var(--admin-page)}
.qna-admin .wrap{width:min(1100px,calc(100% - 40px));margin:20px auto 40px}
.qna-admin .brand{display:flex;align-items:center;gap:20px;margin-bottom:16px}
.qna-admin .brand>a{position:relative;flex:0 0 126px;width:126px;height:84px}
.qna-admin .brandArt{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.qna-admin .gameLogo{position:absolute;z-index:1;left:33%;top:13%;width:38%;height:24%;object-fit:contain}
.qna-admin .brand>span{color:var(--admin-muted);font-size:var(--admin-l4)}
.qna-admin .card{border:1px solid var(--admin-line);border-radius:18px;background:var(--admin-surface);overflow:hidden;box-shadow:0 3px 0 #dfccb0}
.qna-admin .head{padding:20px 24px;background:var(--admin-panel);border-bottom:1px solid var(--admin-line);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.qna-admin .head h1{margin:0}
.qna-admin .head small{font-size:var(--admin-l4);color:var(--admin-muted)}
.qna-admin .body{padding:24px}
.qna-admin .login{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;max-width:480px}
.qna-admin .tools{display:none;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.qna-admin .tools.show{display:flex}
.qna-admin .toolBtns{display:flex;gap:8px;flex-wrap:wrap}
.qna-admin :is(.count,.date,.page){color:var(--admin-muted);font-family:var(--admin-number);font-size:14px}
.qna-admin .status{min-height:23px;margin:10px 0;color:var(--admin-muted);overflow-wrap:anywhere}
.qna-admin .status:empty{display:none}
.qna-admin .list{display:grid;gap:12px}
.qna-admin .entry{min-width:0;border:1px solid #d8c5a7;border-radius:12px;background:var(--admin-surface);overflow:hidden}
.qna-admin .entryTop{padding:12px 16px;background:#f5ecd9;display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;font-size:14px}
.qna-admin .badge{padding:3px 9px;border:1px solid #bdcba6;border-radius:8px;background:#e9efde;color:var(--admin-good);font-weight:700}
.qna-admin .nick{color:var(--admin-text);font-weight:700;overflow-wrap:anywhere}
.qna-admin .page{margin-left:auto;max-width:45%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qna-admin .message{padding:16px;color:var(--admin-text);font-family:var(--admin-number);font-size:15px;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere}
.qna-admin .empty{padding:32px 16px;text-align:center;color:var(--admin-muted);border:1px dashed var(--admin-line);border-radius:12px}

/* OBS controls only: keep every selector under #editor. The stage stays 1920px;
   the editor itself fits the operator's viewport instead of that capture width. */
#editor.admin-ui{width:min(1480px,100vw);margin-left:max(0px,calc((100vw - 1480px)/2));padding:28px 24px 40px;background:var(--admin-page);border:1px solid var(--admin-line)}
#editor .editorHead{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
#editor .eyebrow{color:var(--admin-accent);font-size:12px;font-weight:700;letter-spacing:.08em}
#editor .editorHead h1{margin:6px 0 8px}
#editor .editorHead p{margin:0;color:var(--admin-muted)}
#editor .resolution{flex-shrink:0;padding:12px 16px;border:1px solid var(--admin-line);border-radius:12px;background:var(--admin-panel);text-align:right}
#editor .resolution strong{display:block;color:var(--admin-accent);font-family:var(--admin-number);font-size:22px}
#editor .resolution span{color:var(--admin-muted);font-size:12px}
#editor :is(.adminGate,.editCard,.visibilityCard,.saveBar){border:1px solid var(--admin-line);border-radius:14px;background:var(--admin-surface)}
#editor .adminGate{margin-bottom:20px;overflow:hidden}
#editor .adminGate.hidden{display:none}
#editor .adminGateHead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 20px;background:var(--admin-panel);border-bottom:1px solid var(--admin-line)}
#editor .adminGateHead h2{margin:0}
#editor .adminGateHead span{color:var(--admin-muted)}
#editor .adminGateBody{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:20px}
#editor .adminGateBody input{width:220px}
#editor .adminGateBody button{background:var(--admin-accent);color:#fffaf0;border-color:#873b20}
#editor .adminGateBody button:hover{background:#84391f}
#editor .adminGateBody button:disabled{background:#e8dfcf;color:#6d6051;border-color:#c3b59e}
#editor .shieldError{flex:1;min-width:180px;min-height:23px;margin:0;color:#973d32;overflow-wrap:anywhere}
#editor.locked :is(.visibilityCard,.editorGrid,.saveBar){display:none}
#editor .visibilityCard{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 20px;margin-bottom:20px}
#editor .visibilityCard h2{margin:0 auto 0 0}
#editor .visibilityCard p{flex:1 1 300px;margin:0;color:var(--admin-muted)}
#editor .visibilityToggle{color:var(--admin-good);background:#e9efde;border-color:#a8bb8e}
#editor .visibilityToggle:before{content:'●';margin-right:8px}
#editor .visibilityToggle:hover{background:#dce8cb}
#editor .visibilityToggle.isHidden{color:var(--admin-muted);background:#eee6d8;border-color:#c3b59e}
#editor .visibilityToggle.isHidden:before{content:'○'}
#editor .editorGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
#editor .editCard{min-width:0;padding:20px}
#editor .editCard h2{margin:0 0 16px}
#editor .headingInput{width:100%;margin-bottom:16px;font-size:var(--admin-l2);font-family:var(--admin-font);font-weight:700;background:var(--admin-panel)}
#editor .fieldBlock{display:block;margin-bottom:12px;color:var(--admin-muted)}
#editor .fieldBlock span{display:block;margin-bottom:6px}
#editor :is(.titleInput,textarea){width:100%}
#editor textarea{resize:vertical;line-height:1.65}
#editor .tickerEdit{grid-column:1/-1}
#editor .controls{display:flex;align-items:flex-start;gap:12px 16px;flex-wrap:wrap;margin-top:16px}
#editor .controls label{display:flex;flex-direction:column;gap:6px;max-width:100%;color:var(--admin-muted)}
#editor .controls input[type=number]{width:96px}
#editor .controls input[type=color]{width:64px;padding:4px 6px}
#editor .controls input[type=range]{width:220px;padding:0}
#editor .controls output{color:var(--admin-good);font-family:var(--admin-number)}
#editor .saveBar{margin-top:20px;padding:16px 20px}
#editor .saveMessage{margin:0;color:#973d32}
#editor .saveMessage.ok{color:var(--admin-good)}
@media(max-width:899px){
  .admin-ui{--admin-l1:var(--ui-type-l1-size,28px);--admin-l2:var(--ui-type-l2-size,20px);--admin-l3:var(--ui-type-l3-size,15px)}
  #editor .editorHead{align-items:flex-start;flex-wrap:wrap}
  #editor .editorGrid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  .qna-admin .wrap{width:calc(100% - 24px);margin-top:12px}
  .qna-admin .brand{gap:12px}
  .qna-admin .brand>a{flex-basis:114px;width:114px;height:76px}
  .qna-admin :is(.head,.body){padding:16px}
  .qna-admin .tools{align-items:flex-start;flex-direction:column}
  .qna-admin .page{margin-left:0;max-width:100%;width:100%}
  .qna-admin .entryTop{padding:12px}
  .qna-admin .message{padding:12px}
  #editor.admin-ui{padding:20px 12px 28px}
  #editor :is(.editCard,.adminGateHead,.adminGateBody,.visibilityCard,.saveBar){padding:16px}
  #editor .adminGateBody{display:grid;grid-template-columns:minmax(0,1fr)}
  #editor .adminGateBody input{width:100%}
  #editor .shieldError{min-width:0}
  #editor .visibilityToggle{width:100%}
}