/* 백엔드 개발 테마: 서버 로그 보기와 DB 콘솔.
   모든 규칙은 [data-skin="backend"] 아래에만 둔다(다른 테마로 새지 않게).
   화면의 모든 글(게임 이름, 규칙, 특수 단어 설명, 순위표 문구 등)은 틀이 용어 키로 꺼내므로 backend.js 의 terms 에서 바꾼다.
   여기서는 글을 숨기거나 content 로 덧씌우지 않고, 나온 글에 모양만 입힌다. */

/* ---------- 색과 글꼴 ---------- */
[data-skin="backend"]{
  --bg:#e9edf2; --surface:#ffffff; --surface-2:#f5f7fa; --panel:#f0f3f7;
  --ink:#1b2430; --muted:#546071; --line:#d5dce5; --line-strong:#aeb9c7;
  --accent:#1a5fc8; --accent-ink:#ffffff; --accent-soft:#dbe8fa;
  --error:#c42a2a; --error-soft:#fbe5e5;
  --gold:#1a5fc8; --gold-soft:#dbe8fa; --ice:#4a586b; --ice-soft:#e4e9ef; --heal:#1b7a3c; --heal-soft:#dcf3e3; --clear:#6a3fc2; --clear-soft:#ebe4fa;
  --scrim:rgba(255,255,255,.94); --focus:#1a5fc8;
  --lv-info:#1a5fc8; --lv-info-bg:#dbe8fa;
  --lv-debug:#4a586b; --lv-debug-bg:#e4e9ef;
  --lv-notice:#1b7a3c; --lv-notice-bg:#dcf3e3;
  --lv-trace:#6a3fc2; --lv-trace-bg:#ebe4fa;
  --lv-warn:#8a5a00; --lv-warn-bg:#fbefcf;
  --lv-error:#c42a2a; --lv-error-ink:#ffffff;
  --ok:#1b7a3c;
  --hl:#ffe27a; --hl-ink:#2a2100;
  --row-sel:rgba(26,95,200,.11);
  --st-bg:#1a5fc8; --st-ink:#ffffff;
  --f-body:"Gothic A1","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --f-display:var(--f-body);
  --bk-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,"Apple SD Gothic Neo","Malgun Gothic",monospace;
  --f-num:var(--bk-mono); --f-word:var(--bk-mono);
  --word:clamp(14px, .45vw + 9px, 16px);
  --radius:4px;
  --bk-fs:12.5px;
  --bk-cols:6ch 14ch 9ch minmax(0,1fr);
}
@media (prefers-color-scheme: dark){
  [data-skin="backend"]{
    --bg:#0a0e13; --surface:#0e1319; --surface-2:#121921; --panel:#111820;
    --ink:#dce3ec; --muted:#8e9aab; --line:#232d3a; --line-strong:#3a4757;
    --accent:#6aa8ff; --accent-ink:#04152e; --accent-soft:#16304f;
    --error:#ff7b72; --error-soft:#2b1618;
    --gold:#6aa8ff; --gold-soft:#16304f; --ice:#a9b4c3; --ice-soft:#1b2430; --heal:#4ccf74; --heal-soft:#12301c; --clear:#b99bff; --clear-soft:#2a2150;
    --scrim:rgba(14,19,25,.94); --focus:#7db7ff;
    --lv-info:#6aa8ff; --lv-info-bg:#16304f;
    --lv-debug:#a9b4c3; --lv-debug-bg:#232d3a;
    --lv-notice:#4ccf74; --lv-notice-bg:#12301c;
    --lv-trace:#b99bff; --lv-trace-bg:#2a2150;
    --lv-warn:#e7b341; --lv-warn-bg:#2d2410;
    --lv-error:#ff7b72; --lv-error-ink:#1c0706;
    --ok:#4ccf74;
    --hl:#8a6500; --hl-ink:#ffffff;
    --row-sel:rgba(106,168,255,.14);
    --st-bg:#17365f; --st-ink:#d6e6ff;
    color-scheme:dark;
  }
}

/* ---------- 틀 ---------- */
[data-skin="backend"] body{font:400 13px/1.5 var(--f-body);background:var(--bg)}
/* font 줄임 속성이 합자(=> 를 화살표로 잇는 것)를 되살리므로 !important 로 끈다. 화면에는 쓴 글자 그대로 보여야 한다 */
[data-skin="backend"] *,[data-skin="backend"] *::before,[data-skin="backend"] *::after{font-variant-ligatures:none!important}
[data-skin="backend"] .app{max-width:none;gap:0;padding:0;grid-template-columns:minmax(0,1fr)}
[data-skin="backend"] .top{gap:0;background:var(--panel);border-bottom:1px solid var(--line)}
[data-skin="backend"] .work{gap:0}
[data-skin="backend"] .brand-game{font:700 14px/1.2 var(--bk-mono);letter-spacing:0;color:var(--ink);white-space:nowrap}
/* 돌아가기: 서비스 이름 앞의 경로 조각("서비스 목록 / 이름"). 단추 틀을 없애고 위 바의 경로(bk-crumb)처럼 조용한 글자로 두며,
   뒤에 기울어진 구분선을 붙여 이름과 이어 읽히게 한다 */
[data-skin="backend"] .back{display:flex;align-items:center;gap:12px;padding:0;border:0;border-radius:0;background:none;color:var(--muted);font:500 12px var(--bk-mono);text-decoration:none;white-space:nowrap}
[data-skin="backend"] .back::after{content:"";flex:none;width:1px;height:14px;background:var(--line-strong);transform:rotate(20deg)}
[data-skin="backend"] .back:hover{color:var(--accent);text-decoration:underline}
[data-skin="backend"] .back:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* 위 바(경로, 실시간 표시) */
[data-skin="backend"] .bk-bar{display:flex;align-items:center;gap:6px 14px;min-height:30px;padding:0 12px;background:var(--surface-2);border-bottom:1px solid var(--line);font:500 12px var(--bk-mono);color:var(--muted);overflow:hidden;white-space:nowrap}
[data-skin="backend"] .bk-crumb{display:flex;align-items:center;gap:8px;min-width:0}
[data-skin="backend"] .bk-sep{font-style:normal;color:var(--line-strong)}
[data-skin="backend"] .bk-cur{color:var(--ink);font-weight:700}
[data-skin="backend"] .bk-live{margin-left:auto;display:flex;align-items:center;gap:6px;color:var(--ink)}
[data-skin="backend"] .bk-pill{padding:1px 8px;border:1px solid var(--line-strong);border-radius:3px;background:var(--surface);color:var(--ink)}
[data-skin="backend"] .bk-user{color:var(--muted)}
[data-skin="backend"] .bk-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
[data-skin="backend"] .bk-dot.warn{background:var(--lv-warn)}
[data-skin="backend"] .bk-dot.err{background:var(--lv-error)}
[data-skin="backend"] .bk-dot.pulse{animation:bk-pulse 1.6s ease-in-out infinite}
@keyframes bk-pulse{50%{opacity:.35}}

/* 점수줄은 지표 칩 */
[data-skin="backend"] .top-row{gap:6px 16px;padding:7px 12px}
[data-skin="backend"] .stats{flex:1 1 auto;justify-content:flex-start;gap:6px 8px}
[data-skin="backend"] .stat{display:flex;align-items:baseline;gap:8px;min-width:0;padding:3px 9px;background:var(--surface);border:1px solid var(--line);border-radius:4px}
[data-skin="backend"] .stat dt{font:500 11px var(--f-body);color:var(--muted);white-space:nowrap}
[data-skin="backend"] .stat dd{display:flex;align-items:center;gap:8px;font:700 13px/1.3 var(--bk-mono);color:var(--ink)}
[data-skin="backend"] .lv{width:34px;height:4px;margin:0;border-radius:1px}
[data-skin="backend"] .tool-label,[data-skin="backend"] #btnSound{display:none}
[data-skin="backend"] .tools{margin-left:auto;gap:8px}
[data-skin="backend"] .skin-select{padding:4px 26px 4px 9px;border-radius:4px;border-color:var(--line-strong);background-color:var(--surface);font:600 12px var(--f-body);color:var(--ink)}
[data-skin="backend"] .btn{padding:4px 10px;border-radius:4px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:600 12px var(--f-body);gap:6px}
[data-skin="backend"] .btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
[data-skin="backend"] .btn:active:not(:disabled){transform:none}
[data-skin="backend"] .btn.primary{padding:8px 16px;font-size:13px;background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
[data-skin="backend"] .btn.primary:hover:not(:disabled){background:var(--accent);color:var(--accent-ink);filter:brightness(1.08)}
[data-skin="backend"] .btn.quiet{color:var(--muted)}
[data-skin="backend"] kbd{font:600 11px var(--bk-mono);border-radius:3px;padding:0 5px;opacity:.85}

/* 탭과 필터 줄 */
[data-skin="backend"] .bk-tabs{display:flex;align-items:stretch;gap:2px;padding:0 12px;border-top:1px solid var(--line);min-width:0}
[data-skin="backend"] .bk-tab{display:flex;align-items:center;padding:0 12px;font:600 12px var(--f-body);color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
[data-skin="backend"] .bk-tab.is-on{color:var(--ink);border-bottom-color:var(--accent)}
[data-skin="backend"] .bk-filter{flex:1 1 auto;display:flex;align-items:center;gap:10px;margin:5px 8px 5px 14px;padding:0 10px;min-width:0;overflow:hidden;white-space:nowrap;background:var(--surface);border:1px solid var(--line-strong);border-radius:4px;font:500 12px var(--bk-mono)}
[data-skin="backend"] .bk-filter .k{color:var(--accent);font-weight:700}
[data-skin="backend"] .bk-filter .v{color:var(--ink)}
[data-skin="backend"] .bk-act{display:flex;align-items:center;margin:5px 0;padding:0 10px;border:1px solid var(--line-strong);border-radius:4px;background:var(--surface);font:600 12px var(--f-body);color:var(--ink);white-space:nowrap}

/* 옆 서비스 목록 */
[data-skin="backend"] .slot-side{width:212px;padding:6px 0 10px;border-right:1px solid var(--line);background:var(--panel)}
[data-skin="backend"] .bk-gh{padding:10px 14px 4px;font:700 11px var(--f-body);color:var(--muted)}
[data-skin="backend"] .bk-item{display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:center;gap:9px;padding:5px 14px;font:500 12px var(--bk-mono);color:var(--ink)}
[data-skin="backend"] .bk-item .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-skin="backend"] .bk-item small{font:500 11px var(--bk-mono);color:var(--muted)}
[data-skin="backend"] .bk-item.is-on{background:var(--accent-soft);box-shadow:inset 2px 0 0 var(--accent)}

/* 열 머리글과 로그 줄(무대 뒤 장식 포함) */
[data-skin="backend"] .frame{background:var(--surface);min-width:0}
[data-skin="backend"] .bk-head{display:grid;grid-template-columns:var(--bk-cols);align-items:center;height:26px;font:500 var(--bk-fs) var(--bk-mono);background:var(--panel);border-bottom:1px solid var(--line)}
[data-skin="backend"] .bk-head span{font:700 11px var(--bk-mono);color:var(--muted);padding:0 0 0 8px}
[data-skin="backend"] .canvas{border:0;border-radius:0;background:var(--surface)}
[data-skin="backend"] .skin-deco{z-index:-1}
/* 로그 줄은 아래에 붙인다(flex-end): 소나기의 오류 줄(.pond)이 아래에서 차올라 같은 자리를 덮으므로 줄 번호·시각이 이어진다 */
[data-skin="backend"] .bk-log{inset:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;background:
  linear-gradient(var(--line),var(--line)) 6ch 0 / 1px 100% no-repeat,
  linear-gradient(var(--line),var(--line)) 20ch 0 / 1px 100% no-repeat,
  linear-gradient(var(--line),var(--line)) 29ch 0 / 1px 100% no-repeat;font:500 var(--bk-fs) var(--bk-mono)}
[data-skin="backend"] .bk-row{flex:none;display:grid;grid-template-columns:var(--bk-cols);height:22px;align-items:center;font:500 var(--bk-fs)/22px var(--bk-mono);color:var(--muted);white-space:nowrap}
[data-skin="backend"] .bk-row:nth-child(even){background:color-mix(in srgb,var(--surface-2) 70%,transparent)}
[data-skin="backend"] .bk-row > span{padding-left:8px;overflow:hidden;text-overflow:ellipsis}
[data-skin="backend"] .bk-lv{font-weight:700}
[data-skin="backend"] .lv-warn{color:var(--lv-warn)}
[data-skin="backend"] .lv-error{color:var(--lv-error)}
[data-skin="backend"] .bk-msg{color:color-mix(in srgb,var(--ink) 70%,var(--surface))}

/* 아래 콘솔 */
[data-skin="backend"] .slot-below{border-top:1px solid var(--line);background:var(--panel)}
[data-skin="backend"] .bk-ch{display:flex;align-items:center;gap:0;height:26px;padding:0 12px;border-bottom:1px solid var(--line);font:600 12px var(--f-body);color:var(--muted)}
[data-skin="backend"] .bk-ch span{padding:0 10px;height:100%;display:flex;align-items:center;border-bottom:2px solid transparent;margin-bottom:-1px}
[data-skin="backend"] .bk-ch span.on{color:var(--ink);border-bottom-color:var(--accent)}
[data-skin="backend"] .bk-ch em{margin-left:auto;font:500 11px var(--bk-mono);font-style:normal;color:var(--muted)}
[data-skin="backend"] .bk-cb{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:0 18px;align-items:start;padding:6px 12px 8px}
[data-skin="backend"] .bk-sql{margin:0;font:500 12px/1.55 var(--bk-mono);color:var(--ink);white-space:pre-wrap;overflow:hidden;max-height:4.7em;overflow-wrap:anywhere}
[data-skin="backend"] .bk-sql .ps{color:var(--accent);font-weight:700}
[data-skin="backend"] .sql-k{color:var(--accent);font-weight:700}
[data-skin="backend"] .sql-s{color:var(--ok)}
[data-skin="backend"] .sql-n{color:var(--lv-warn)}
[data-skin="backend"] .sql-c{color:var(--muted);font-style:italic}

/* 표(콘솔 결과, 숨김 화면 결과) */
[data-skin="backend"] .bk-tbl{border-collapse:collapse;width:100%;font:500 12.5px/1.75 var(--bk-mono);color:var(--ink)}
[data-skin="backend"] .bk-tbl th{position:sticky;top:0;text-align:left;font-weight:700;color:var(--muted);background:var(--panel);padding:0 14px;border-bottom:1px solid var(--line-strong);white-space:nowrap}
[data-skin="backend"] .bk-tbl td{padding:0 14px;border-bottom:1px solid var(--line);white-space:nowrap}
[data-skin="backend"] .bk-tbl .num{text-align:right}
[data-skin="backend"] .bk-tbl tbody tr:nth-child(even){background:var(--surface-2)}
[data-skin="backend"] .bk-console .bk-tbl{font-size:12px;line-height:1.5}
[data-skin="backend"] .bk-console .bk-tbl th,[data-skin="backend"] .bk-console .bk-tbl td{padding:0 10px}

/* 입력줄은 콘솔 입력 */
[data-skin="backend"] .dock{gap:0;grid-template-columns:minmax(0,1fr) auto;background:var(--panel);border-top:1px solid var(--line)}
[data-skin="backend"] .entry{border:0;border-radius:0;background:var(--surface);border-bottom:1px solid var(--line);padding-left:12px}
[data-skin="backend"] .entry:focus-within{border-color:transparent;box-shadow:inset 0 0 0 2px var(--accent)}
[data-skin="backend"] .entry:has(#typing.nomatch){border-color:transparent;box-shadow:inset 0 -2px 0 var(--lv-error)}
[data-skin="backend"] .bk-ps{font:700 13px var(--bk-mono);color:var(--accent);white-space:nowrap}
[data-skin="backend"] .slot-prompt{display:flex;align-items:center}
[data-skin="backend"] #typing{font:500 15px/1.2 var(--bk-mono);padding:12px 10px;color:var(--ink)}
[data-skin="backend"] #typing::placeholder{color:transparent}
[data-skin="backend"] input,[data-skin="backend"] textarea{caret-color:var(--accent)}
[data-skin="backend"] .entry-key{margin-right:12px;color:var(--muted)}
[data-skin="backend"] .meter{gap:8px;padding:0 12px;background:var(--surface);border-bottom:1px solid var(--line);align-self:stretch}
[data-skin="backend"] .meter-label{font:600 11px var(--f-body)}
[data-skin="backend"] .meter-cells{gap:2px}
[data-skin="backend"] .meter-cells i{width:7px;height:14px;border-radius:1px;border-color:var(--line-strong)}
[data-skin="backend"] .meter-cells i.on{background:var(--accent);border-color:var(--accent)}
[data-skin="backend"] .meter.alarm .meter-cells i.on{background:var(--lv-error);border-color:var(--lv-error)}
[data-skin="backend"] .meter-value{font:700 12px var(--bk-mono)}
[data-skin="backend"] .hint{padding:3px 12px;min-height:24px;font:500 12px/18px var(--bk-mono);color:var(--muted)}
[data-skin="backend"] .hint:not(:empty)::before{content:"-- "}
[data-skin="backend"] .hint.warn{color:var(--lv-error)}
[data-skin="backend"] .slot-status{grid-column:1 / -1}
[data-skin="backend"] .bk-status{display:flex;align-items:center;gap:18px;height:24px;padding:0 12px;background:var(--st-bg);color:var(--st-ink);font:500 11.5px var(--bk-mono);white-space:nowrap;overflow:hidden}
[data-skin="backend"] .bk-status span{display:flex;align-items:center;gap:6px}
[data-skin="backend"] .bk-status .end{margin-left:auto}
[data-skin="backend"] .bk-status .bk-dot{background:#7ee29b}
[data-skin="backend"] .bk-status b{font-weight:700}
[data-skin="backend"] .shake{animation-name:shake}

/* 알림 */
[data-skin="backend"] .toast{left:auto;right:14px;top:12px;transform:none;font:600 13px/1 var(--bk-mono);padding:9px 12px;border-radius:4px;background:var(--ink);color:var(--surface);z-index:12}
[data-skin="backend"] .toast.show{animation:bk-toast 1.6s ease forwards}
@keyframes bk-toast{0%{opacity:0;transform:translateY(-6px)}12%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}

/* ---------- 시작, 결과 화면 ---------- */
[data-skin="backend"] .layer{background:var(--scrim);grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:16px 24px;padding:clamp(14px, 2.4vw, 28px);align-content:center}
[data-skin="backend"] .layer-main{gap:14px;padding:18px 20px 20px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
[data-skin="backend"] .layer-title{margin:0;font:700 15px/1.3 var(--bk-mono);letter-spacing:0;color:var(--ink);text-wrap:wrap}
[data-skin="backend"] #resultTitle{padding-bottom:10px;border-bottom:1px solid var(--line)}
[data-skin="backend"] #resultTitle::before{content:"[exit] ";color:var(--muted)}
[data-skin="backend"] #startTitle{padding-bottom:10px;border-bottom:1px solid var(--line)}
[data-skin="backend"] .layer-start .layer-rule{max-width:62ch;font:400 13px/1.65 var(--f-body);color:var(--muted)}
[data-skin="backend"] .layer-rule{margin:0;max-width:none}
[data-skin="backend"] .legend{gap:6px 22px;font-size:12px}
[data-skin="backend"] .legend li > span{font:400 12px/1.4 var(--f-body);color:var(--muted)}
[data-skin="backend"] .start-form{gap:14px}
[data-skin="backend"] .row{gap:12px 26px;align-items:flex-start}
[data-skin="backend"] .seg legend{font:700 11px var(--f-body);color:var(--muted);margin-bottom:6px}
[data-skin="backend"] .opts label{min-width:0;padding:4px 11px;border:1px solid var(--line-strong);border-radius:3px;background:var(--surface);color:var(--ink);font:600 12px var(--bk-mono)}
[data-skin="backend"] .opts label:hover{border-color:var(--accent)}
[data-skin="backend"] .opts input:checked + label{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
[data-skin="backend"] .custom textarea,[data-skin="backend"] .name input{border:1px solid var(--line-strong);border-radius:4px;background:var(--surface);color:var(--ink);font:500 13px var(--bk-mono)}
[data-skin="backend"] .name input{width:170px}
[data-skin="backend"] .name input::placeholder{color:transparent}
[data-skin="backend"] .name > span{font:700 11px var(--f-body);color:var(--muted)}
[data-skin="backend"] .check b{font:600 13px var(--f-body);color:var(--ink)}
[data-skin="backend"] .check small{font:400 12px var(--f-body);color:var(--muted)}
[data-skin="backend"] .check input{accent-color:var(--accent)}
[data-skin="backend"] .start-form .link{display:none}
[data-skin="backend"] .actions{gap:10px 16px}
[data-skin="backend"] .small{font:400 12px var(--f-body);color:var(--muted)}
[data-skin="backend"] .online-note{display:none}

[data-skin="backend"] .final{gap:4px 12px}
[data-skin="backend"] .final-score{font:700 38px/1 var(--bk-mono);letter-spacing:-.02em;color:var(--ink)}
[data-skin="backend"] .final-unit{font:600 13px var(--f-body);color:var(--muted)}
[data-skin="backend"] .badge{padding:2px 8px;border:1px solid var(--accent);border-radius:3px;background:var(--accent-soft);color:var(--accent);font:700 11px var(--bk-mono)}
[data-skin="backend"] .results{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:0;max-width:none;border-top:1px solid var(--line);border-left:1px solid var(--line)}
[data-skin="backend"] .results > div{padding:8px 12px;background:var(--surface);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
[data-skin="backend"] .results dt{font:500 11px var(--f-body);color:var(--muted)}
[data-skin="backend"] .results dd{font:700 16px/1.4 var(--bk-mono);color:var(--ink)}

/* 순위표는 최근 실행 이력 표 */
[data-skin="backend"] .board{align-self:start;gap:0;padding:0;border:1px solid var(--line);border-radius:6px;background:var(--surface);overflow:hidden}
[data-skin="backend"] .board-title{margin:0;padding:9px 14px;background:var(--panel);border-bottom:1px solid var(--line);font:700 12px var(--f-body);color:var(--ink)}
/* 목록이 비었을 때만 안내 한 줄(board-note, "0 rows")을 보이고, 기록이 있으면 안내는 감춘다 */
[data-skin="backend"] .board-note{display:block;padding:12px 14px;font:500 12px var(--bk-mono);color:var(--muted)}
[data-skin="backend"] .board-list:not(:empty) + .board-note{display:none}
[data-skin="backend"] .board-list li{grid-template-columns:2.4em minmax(0,1fr) auto;padding:6px 14px;border-bottom:1px solid var(--line);font:500 12.5px var(--bk-mono)}
[data-skin="backend"] .board-list li.is-mine{margin:0;padding:6px 14px;border-radius:0;background:var(--accent-soft)}
[data-skin="backend"] .b-rank{color:var(--muted);font:700 12px var(--bk-mono)}
[data-skin="backend"] .board-list li:nth-child(-n+3) .b-rank{color:var(--accent)}
[data-skin="backend"] .b-name{font-weight:600}
[data-skin="backend"] .b-score{font:700 13px var(--bk-mono)}
[data-skin="backend"] .b-meta{font:500 11px var(--bk-mono);color:var(--muted)}

/* ---------- 무대: 단어는 로그 줄 안의 값 ---------- */
[data-skin="backend"] .stage{cursor:text}
[data-skin="backend"] .w{padding:.22em .62em .26em .5em;font:500 var(--word)/1.25 var(--f-word);background:var(--surface);border:1px solid var(--line-strong);border-radius:3px;color:var(--ink)}
[data-skin="backend"] .w::before{content:'msg="';order:0;font-size:.8em;color:var(--muted)}
[data-skin="backend"] .w::after{content:'"';order:5;font-size:.8em;color:var(--muted)}
[data-skin="backend"] .app[data-game="cannon"] .w::before{content:'path="'}
[data-skin="backend"] .app[data-game="dodge"] .w::before{content:'id="'}
[data-skin="backend"] .w > .w-tag{order:-1;margin-right:.6em}
[data-skin="backend"] .w-hit{color:var(--hl-ink);background:var(--hl);text-decoration:none;border-radius:2px}
[data-skin="backend"] .w.is-match{background:var(--surface);border-color:var(--accent)}
[data-skin="backend"] .w.is-target{box-shadow:0 0 0 1px var(--accent)}
[data-skin="backend"] .w.is-locked{opacity:.5}
[data-skin="backend"] .ent:has(> .w.is-target)::before{content:"";position:absolute;left:-4000px;right:-4000px;top:-3px;bottom:-3px;z-index:-1;background:var(--row-sel);border-top:1px solid var(--accent);border-bottom:1px solid var(--accent);pointer-events:none}
[data-skin="backend"] .w[data-kind="gold"]{border-color:var(--lv-info)}
[data-skin="backend"] .w[data-kind="ice"]{border-color:var(--lv-debug)}
[data-skin="backend"] .w[data-kind="heal"]{border-color:var(--lv-notice)}
[data-skin="backend"] .w[data-kind="clear"]{border-color:var(--lv-trace)}
[data-skin="backend"] .w[data-kind="bomb"]{border-color:var(--lv-error)}
[data-skin="backend"] .w[data-kind="boss"]{border-width:2px;border-color:var(--lv-error);font-size:calc(var(--word) * 1.1)}
[data-skin="backend"] .ent.walker .w{border-bottom-width:1px}
[data-skin="backend"] .ent.walker .w[data-kind="boss"]{border-bottom-width:2px}
[data-skin="backend"] .w-tag{font:700 10.5px/1 var(--bk-mono);letter-spacing:0;padding:2px 5px;border-radius:2px}
[data-skin="backend"] .w-tag[data-kind="gold"]{background:var(--lv-info-bg);color:var(--lv-info)}
[data-skin="backend"] .w-tag[data-kind="ice"]{background:var(--lv-debug-bg);color:var(--lv-debug)}
[data-skin="backend"] .w-tag[data-kind="heal"]{background:var(--lv-notice-bg);color:var(--lv-notice)}
[data-skin="backend"] .w-tag[data-kind="clear"]{background:var(--lv-trace-bg);color:var(--lv-trace)}
[data-skin="backend"] .w-tag[data-kind="bomb"],[data-skin="backend"] .w-tag[data-kind="boss"]{background:var(--lv-error);color:var(--lv-error-ink)}
[data-skin="backend"] .w.is-pop{animation:bk-out .2s ease-out forwards}
[data-skin="backend"] .w.is-sink{animation:bk-sink .45s ease-in forwards}
@keyframes bk-out{to{opacity:0}}
@keyframes bk-sink{to{transform:translateY(8px);opacity:0}}
[data-skin="backend"] .stage.frozen{background:color-mix(in srgb,var(--accent) 7%,transparent)}
[data-skin="backend"] .stage.frozen .w{border-color:var(--accent)}
[data-skin="backend"] .fx-dot,[data-skin="backend"] .fx-ring,[data-skin="backend"] .blast{display:none}
[data-skin="backend"] .fx-float{font:700 12px var(--bk-mono);color:var(--accent)}
[data-skin="backend"] .fx-float.big{color:var(--lv-info);font-size:13px}
[data-skin="backend"] .fx-float.bad{color:var(--lv-error)}

/* 소나기: 아래에 쌓이는 ERROR 줄 */
[data-skin="backend"] .pond{display:flex;align-items:flex-end;overflow:hidden;background:var(--error-soft);border-top:1px solid var(--lv-error)}
[data-skin="backend"] .pond::after{display:none}
/* 오류 줄 글자는 backend.js 가 줄 목록과 같은 번호·시각으로 만들어 --bk-pond 로 준다(CSS 에 박아 두면 뒤의 로그 줄과 번호가 어긋난다) */
[data-skin="backend"] .pond::before{flex:none;padding-left:8px;white-space:pre;font:500 var(--bk-fs)/22px var(--bk-mono);color:var(--lv-error);
  content:var(--bk-pond, "")}
[data-skin="backend"] .brim{border-top:1px dashed var(--lv-error)}
[data-skin="backend"] .brim-label{right:10px;bottom:3px;padding:0 6px;background:var(--surface);font:700 11px var(--bk-mono);color:var(--lv-error)}

/* 레이싱: 작업 큐 진행 막대 */
[data-skin="backend"] .track{padding:0}
[data-skin="backend"] .lane{grid-template-columns:200px minmax(0,1fr) 52px;gap:0 16px;height:44px;padding:0 14px;border-bottom:1px solid var(--line)}
[data-skin="backend"] .lane:first-child{border-top:0}
[data-skin="backend"] .lane{background:var(--surface)}
[data-skin="backend"] .lane:nth-child(odd){background:var(--surface-2)}
[data-skin="backend"] .lane-road,[data-skin="backend"] .lane-name small{display:none}
[data-skin="backend"] .lane-name > span{font:600 12.5px var(--bk-mono);color:var(--ink)}
[data-skin="backend"] .lane[data-me] .lane-name{color:var(--accent)}
[data-skin="backend"] .lane-bar{display:block;height:10px;border-radius:2px;background:var(--line)}
[data-skin="backend"] .lane-bar-fill{background:var(--lv-debug);border-radius:2px}
[data-skin="backend"] .lane[data-me] .lane-bar-fill{background:var(--accent)}
[data-skin="backend"] .lane.is-done .lane-bar-fill{background:var(--ok)}
[data-skin="backend"] .lane-pct{font:700 12px var(--bk-mono);color:var(--ink)}
[data-skin="backend"] .lane.is-done .lane-pct{color:var(--ok)}
[data-skin="backend"] .passage{padding:14px 18px 16px;border-top:1px solid var(--line-strong);background:var(--surface-2);font:500 clamp(16px, 1vw + 9px, 21px)/1.75 var(--bk-mono)}
[data-skin="backend"] .pw{color:var(--muted)}
[data-skin="backend"] .pw.is-done{color:var(--ink);opacity:.5}
[data-skin="backend"] .pw.is-current{color:var(--hl-ink);background:var(--hl);border-radius:2px}
[data-skin="backend"] .pw.is-error{color:var(--lv-error);background:var(--error-soft)}
[data-skin="backend"] .pw-hit{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:4px}
[data-skin="backend"] .countdown{font:700 80px/1 var(--bk-mono);color:var(--ink)}

/* 대포: 게이트웨이와 요청 */
[data-skin="backend"] .ground{background:var(--surface-2);border-top:1px solid var(--line-strong)}
[data-skin="backend"] .fort{background:var(--accent-soft);border:0;border-right:1px solid var(--accent)}
[data-skin="backend"] .fort::before{content:"gateway";position:absolute;left:10px;right:auto;top:8px;height:auto;background:none;font:700 11px var(--bk-mono);color:var(--muted)}
[data-skin="backend"] .fort[data-low="true"]{background:var(--error-soft);border-color:var(--lv-error)}
[data-skin="backend"] .cannon{width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:3px;background:var(--accent)}
[data-skin="backend"] .barrel{width:46px;height:2px;margin-top:-1px;border-radius:0;background:var(--accent);opacity:.55}
[data-skin="backend"] .shell{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:1px;background:var(--accent)}

/* 총알 피하기: 나는 선택 줄 커서, 총알은 ERR 표식 */
[data-skin="backend"] .arena{background:none}
[data-skin="backend"] .player{width:10px;height:18px;margin:-9px 0 0 -5px;border-radius:1px;background:var(--accent);box-shadow:none}
[data-skin="backend"] .player::before{content:"";position:absolute;left:-4000px;right:-4000px;top:-2px;bottom:-2px;z-index:-1;background:var(--row-sel);border-top:1px solid var(--accent);border-bottom:1px solid var(--accent)}
[data-skin="backend"] .bullet{width:26px;height:14px;margin:-7px 0 0 -13px;border-radius:2px;background:var(--lv-error);display:grid;place-items:center}
[data-skin="backend"] .bullet::before{content:"ERR";font:700 9.5px/1 var(--bk-mono);color:var(--lv-error-ink)}
[data-skin="backend"] .bullet[data-kind="ring"]{background:var(--surface);border:1px solid var(--lv-warn)}
[data-skin="backend"] .bullet[data-kind="ring"]::before{color:var(--lv-warn)}
[data-skin="backend"] .bullet[data-kind="rain"]{background:var(--lv-trace-bg);border:1px dashed var(--lv-trace)}
[data-skin="backend"] .bullet[data-kind="rain"]::before{color:var(--lv-trace)}
[data-skin="backend"] .trail{border-top:1px dashed var(--accent)}
[data-skin="backend"] .ent.anchor .w{font-size:var(--word)}

/* ---------- 숨김 화면 ---------- */
[data-skin="backend"] .boss{background:var(--surface);color:var(--ink);font:500 var(--bk-fs)/22px var(--bk-mono)}
[data-skin="backend"] .bk-logview{font-size:var(--bk-fs)}
[data-skin="backend"] .bk-logview .bk-row:nth-child(even){background:var(--surface-2)}
[data-skin="backend"] .bk-logview .bk-row{color:var(--ink)}
[data-skin="backend"] .bk-logview .bk-ln,[data-skin="backend"] .bk-logview .bk-time{color:var(--muted)}
[data-skin="backend"] .bk-stack{margin:0;padding:2px 0 6px calc(6ch + 14ch + 9ch + 8px);font:500 var(--bk-fs)/20px var(--bk-mono);color:var(--lv-error);background:var(--error-soft)}
[data-skin="backend"] .bk-editor{margin:0;padding:10px 0;background:var(--surface-2);border-bottom:1px solid var(--line);font:500 13px/1.75 var(--bk-mono)}
[data-skin="backend"] .bk-editor .ln{display:flex;gap:14px;padding:0 14px;white-space:pre}
[data-skin="backend"] .bk-editor .code{white-space:pre-wrap}
[data-skin="backend"] .bk-editor .ln i{width:2ch;text-align:right;font-style:normal;color:var(--muted)}
[data-skin="backend"] .bk-runbar{display:flex;align-items:center;gap:12px;padding:5px 14px;background:var(--panel);border-bottom:1px solid var(--line);font:600 12px var(--f-body);color:var(--muted)}
[data-skin="backend"] .bk-runbar b{padding:2px 12px;border-radius:3px;background:var(--accent);color:var(--accent-ink)}
[data-skin="backend"] .bk-runbar em{margin-left:auto;font:500 11px var(--bk-mono);font-style:normal}
/* 숨김 화면에서는 점수줄과 눈금, 안내 줄도 감춘다(자리는 그대로 두어 화면이 들썩이지 않게 visibility 로 감춘다) */
[data-skin="backend"] .app.is-hiding :is(.stats,.hint,.meter > *){visibility:hidden}
[data-skin="backend"] .app.is-hiding #typing{color:transparent}
/* SQL 결과 화면에는 로그 열 머리글이 어울리지 않아 머리글 띠는 두고 글자만 감춘다(.hiding 일 때만).
   display:none 으로 없애면 위 띠가 사라진 만큼 무대가 26px 커져 숨길 때 화면 틀이 들썩인다(2026-11-09 레이싱·총알 피하기 실측) */
[data-skin="backend"] .frame:has(.canvas.hiding .bk-editor) .bk-head span{visibility:hidden}
[data-skin="backend"] .bk-foot{margin:0;padding:8px 14px;font:500 12px var(--bk-mono);color:var(--muted)}

/* ---------- 게임 고르기 화면: 서비스 목록 ---------- */
[data-skin="backend"] .menu{padding:0;grid-template-rows:none;grid-auto-rows:minmax(108px, auto)}
[data-skin="backend"] .game-row{padding:12px 16px;gap:12px 24px;border-radius:0;border-bottom:1px solid var(--line);grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) 11em}
[data-skin="backend"] .game-row:hover,[data-skin="backend"] .game-row:focus-visible{background:var(--accent-soft)}
[data-skin="backend"] .gr-key{width:2em;height:2em;border:1px solid var(--line-strong);border-radius:3px;font:700 12px var(--bk-mono);color:var(--muted)}
[data-skin="backend"] .gr-name{font:700 15px/1.3 var(--bk-mono);color:var(--ink)}
[data-skin="backend"] .gr-rule{max-width:none;font:400 12.5px/1.5 var(--f-body);color:var(--muted)}
[data-skin="backend"] .gr-best small{font:500 11px var(--f-body);color:var(--muted)}
[data-skin="backend"] .gr-best b{font:700 18px var(--bk-mono);color:var(--ink)}
[data-skin="backend"] .gr-top{display:none}
[data-skin="backend"] .gr-preview{border-radius:4px;border:1px solid var(--line);background:var(--surface)}
[data-skin="backend"] .gr-preview .w{font-size:13px}
[data-skin="backend"] .launcher-note{display:none}
[data-skin="backend"] .pv-lane{height:14px;margin-top:8px;border:1px solid var(--line);border-radius:2px;background:var(--line)}
[data-skin="backend"] .pv-lane .car{display:block;left:0;top:0;width:0;height:100%;margin:0;border-radius:0;background:var(--accent);animation:bk-fill var(--d, 5s) linear infinite}
[data-skin="backend"] .pv-lane .car::before,[data-skin="backend"] .pv-lane .car::after{display:none}
@keyframes bk-fill{from{width:4%}to{width:100%}}
[data-skin="backend"] .pv-cannon{position:absolute}

/* ---------- 좁은 화면 ---------- */
@media (max-width: 1020px){
  [data-skin="backend"] .slot-side{display:none}
  [data-skin="backend"] .layer{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 760px){
  [data-skin="backend"] .game-row{grid-template-columns:auto minmax(0,1fr)}
}
@media (max-width: 640px){
  [data-skin="backend"] .bk-pill,[data-skin="backend"] .bk-user,[data-skin="backend"] .slot-below,[data-skin="backend"] .bk-filter,[data-skin="backend"] .bk-act{display:none}
  [data-skin="backend"] .bk-tabs{padding:0 8px}
  [data-skin="backend"] .top-row{padding:6px 10px;gap:6px 10px}
  [data-skin="backend"] .stats{order:3;width:100%;justify-content:flex-start;gap:4px 6px}
  [data-skin="backend"] .stat{flex-direction:column;gap:0;padding:2px 7px;min-width:0}
  [data-skin="backend"] .stat dd{font-size:12px}
  [data-skin="backend"] .lane{grid-template-columns:104px minmax(0,1fr) 40px;gap:0 8px;padding:0 8px}
  [data-skin="backend"] .lane-name > span::before{font-size:11px}
  [data-skin="backend"] .dock{grid-template-columns:minmax(0,1fr)}
  [data-skin="backend"] .meter{border-top:0}
  [data-skin="backend"] .bk-status .sp{display:none}
  [data-skin="backend"] .layer{padding:12px}
  [data-skin="backend"] .layer-main{padding:14px}
  [data-skin="backend"]{--bk-cols:5ch 12ch 8ch minmax(0,1fr)}
  [data-skin="backend"] .bk-ln,[data-skin="backend"] .bk-head span:first-child{display:none}
  [data-skin="backend"] .bk-row,[data-skin="backend"] .bk-head{grid-template-columns:12ch 8ch minmax(0,1fr)}
  [data-skin="backend"] .bk-log{background:
    linear-gradient(var(--line),var(--line)) 12ch 0 / 1px 100% no-repeat,
    linear-gradient(var(--line),var(--line)) 20ch 0 / 1px 100% no-repeat}
  [data-skin="backend"] .bk-stack{padding-left:calc(12ch + 8ch + 8px)}
  [data-skin="backend"] .pond::before{content:var(--bk-pond-s, "")}
}
@media (prefers-reduced-motion: reduce){
  [data-skin="backend"] .bk-dot.pulse,[data-skin="backend"] .pv-lane .car{animation:none}
  [data-skin="backend"] .toast.show{animation:bk-out 1.4s forwards}
}