/* 웹 개발 테마(web) 스타일: 코드 편집기처럼 보이게 틀과 무대 요소를 다시 칠한다.

   [!CRITICAL] 모든 규칙은 [data-skin="web"] 아래에만 둔다. 다른 테마와 정석 테마로 새면 안 된다.
   색은 html 에 다시 정한 토큰이 밝은 편집기와 어두운 편집기를 가른다. 구문 색(--ed-*)은 두 모드 모두 흰/검은 바탕에서 글자 대비 4.5:1 이상으로 골랐다.
   레이아웃: .top .work .dock 을 display:contents 로 풀어 .app 격자 하나에 모든 칸을 직접 놓는다.
   그래야 입력줄이 터미널 아래쪽 입력줄처럼 이어지고, 점수줄이 하단 상태 표시줄의 오른쪽 묶음이 되며, 탐색기가 상태 표시줄까지 내려온다. */

/* ---------- 토큰 ---------- */
[data-skin="web"]{
  --bg:#eceff2; --surface:#ffffff; --surface-2:#f3f4f6; --ink:#1f2328; --muted:#59636e;
  --line:#d8dee4; --line-strong:#9aa4af;
  --accent:#0969da; --accent-ink:#ffffff; --accent-soft:#ddebfb;
  --error:#c42b2b; --error-soft:#fde3e2;
  --scrim:rgba(243,244,246,.9); --focus:#0969da;
  --f-ui:"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --f-mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,"Apple SD Gothic Neo","Malgun Gothic",monospace;
  --f-body:var(--f-ui); --f-display:var(--f-ui); --f-word:var(--f-mono); --f-num:var(--f-mono);
  --word:clamp(14px, .4vw + 10px, 17px);
  --radius:3px;
  --wb-side-w:216px; --wb-gutter:52px;
  --wb-title:#e6e9ed; --wb-title-ink:#3b4148; --wb-tabbar:#eceff2; --wb-side:#f3f4f6; --wb-term:#ffffff;
  --wb-ln:#6b7480; --wb-line-hl:rgba(9,105,218,.07); --wb-sel:rgba(9,105,218,.16); --wb-sel-strong:rgba(9,105,218,.34);
  --wb-cursor:#0969da; --wb-status:#0b5cad; --wb-cell:#dfe3e8; --wb-mini:#c9d0d8;
  --wb-squig:#e5484d; --wb-err-line:rgba(229,72,77,.12);
  --ed-str:#0a6b2d; --ed-key:#a626a4; --ed-num:#a35200; --ed-type:#0b6a8f; --ed-fn:#795e26; --ed-com:#5e6a76; --ed-var:#1f2328; --ed-pun:#4a5560;
  --wb-chev-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){
  [data-skin="web"]{
    --bg:#15171b; --surface:#1e2025; --surface-2:#181a1e; --ink:#d9dde3; --muted:#9099a6;
    --line:#2d3139; --line-strong:#4a525d;
    --accent:#4d9cf0; --accent-ink:#04121f; --accent-soft:#1b3550;
    --error:#ff8078; --error-soft:#3d1f1f;
    --scrim:rgba(21,23,27,.92); --focus:#79b8ff;
    --wb-title:#15171b; --wb-title-ink:#b0b8c3; --wb-tabbar:#17191d; --wb-side:#181a1e; --wb-term:#1a1c20;
    --wb-ln:#8893a2; --wb-line-hl:rgba(255,255,255,.045); --wb-sel:rgba(77,156,240,.24); --wb-sel-strong:rgba(77,156,240,.4);
    --wb-cursor:#cfd6df; --wb-status:#17507f; --wb-cell:#2b3038; --wb-mini:#3a414b;
    --wb-squig:#ff6b6b; --wb-err-line:rgba(255,107,107,.14);
    --ed-str:#98c379; --ed-key:#c678dd; --ed-num:#d19a66; --ed-type:#56b6c2; --ed-fn:#e5c07b; --ed-com:#8591a1; --ed-var:#d9dde3; --ed-pun:#aab3bf;
  }
}

/* ---------- 틀: 격자 하나에 모든 칸을 놓는다 ---------- */
[data-skin="web"] body{background:var(--bg)}
[data-skin="web"] .app{
  max-width:none;margin:0;padding:0;gap:0;
  display:grid;
  grid-template-columns:var(--wb-side-w) minmax(0,1fr) auto;
  grid-template-rows:auto auto minmax(0,1fr) auto auto auto;
  grid-template-areas:"menu menu menu" "side tabs tabs" "side main main" "side entry meter" "side hint hint" "status status status";
}
[data-skin="web"] .top,[data-skin="web"] .work,[data-skin="web"] .dock{display:contents}
[data-skin="web"] .slot-menubar{grid-area:menu}
[data-skin="web"] .slot-toolbar{grid-area:tabs}
/* 점수줄은 상태 표시줄 오른쪽 끝에 겹쳐 놓는다. 세 번째 칸의 폭을 점수줄이 정하면 중간 크기 창에서 입력줄이 0 이 되기 때문이다(2026-11-09 1024x768, 768x1024 실측) */
[data-skin="web"] .top-row{grid-area:6 / 2 / 7 / 4;justify-self:end;z-index:1}
[data-skin="web"] .slot-side{grid-area:side}
[data-skin="web"] .frame{grid-area:main}
[data-skin="web"] .entry{grid-area:entry}
[data-skin="web"] .meter{grid-area:meter}
[data-skin="web"] .app:has(.meter[hidden]) .entry{grid-column:2 / -1}
[data-skin="web"] .hint{grid-area:hint}
[data-skin="web"] .slot-status{grid-area:status}
[data-skin="web"] .launcher-note,
[data-skin="web"] .brand-h,
[data-skin="web"] #btnSound{display:none}

/* ---------- 제목 줄, 파일 탭, 경로 ---------- */
[data-skin="web"] .wb-titlebar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:28px;padding:0 12px;background:var(--wb-title);color:var(--wb-title-ink);font:400 12px/1 var(--f-ui);border-bottom:1px solid var(--line)}
[data-skin="web"] .wb-menus{display:flex;gap:14px;white-space:nowrap;overflow:hidden}
[data-skin="web"] .wb-doc{margin:0;font:400 12px/1 var(--f-ui);text-align:center;white-space:nowrap}
/* 돌아가기: 제목 줄 오른쪽 끝의 "프로젝트 열기". .back 은 틀이 점수줄 묶음(.top-row, 아래 상태 표시줄 오른쪽) 안에 넣는 링크라
   그대로 두면 상태 표시줄 위에 겹친다. 제목 줄(28px)에 놓으려고 .app 기준으로 띄운다.
   [!CRITICAL] 제목 줄 높이(28px)가 바뀌면 height 도 같이 바꾼다 */
[data-skin="web"] .app{position:relative}
[data-skin="web"] .back{position:absolute;top:0;right:8px;z-index:3;display:flex;align-items:center;gap:7px;height:28px;padding:0 8px 0 6px;border:0;border-radius:3px;background:none;color:var(--wb-title-ink);font:400 12px/1 var(--f-ui);text-decoration:none;white-space:nowrap}
[data-skin="web"] .back::before{content:"";flex:none;width:5px;height:5px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateX(2px) rotate(45deg);opacity:.7}
[data-skin="web"] .back:hover{background:rgba(128,128,128,.18);color:var(--ink)}
[data-skin="web"] .back:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
[data-skin="web"] .wb-tabs{display:flex;align-items:stretch;height:34px;background:var(--wb-tabbar);border-bottom:1px solid var(--line);overflow:hidden}
[data-skin="web"] .wb-tab{display:flex;align-items:center;gap:7px;padding:0 12px;font:400 13px/1 var(--f-ui);color:var(--muted);border-right:1px solid var(--line);white-space:nowrap}
[data-skin="web"] .wb-tab.is-on{background:var(--surface);color:var(--ink);box-shadow:inset 0 2px 0 var(--accent)}
[data-skin="web"] .wb-x{position:relative;width:14px;height:14px;margin-left:4px;opacity:.7}
[data-skin="web"] .wb-x::before,[data-skin="web"] .wb-x::after{content:"";position:absolute;left:2px;right:2px;top:6px;height:1.5px;background:currentColor;transform:rotate(45deg)}
[data-skin="web"] .wb-x::after{transform:rotate(-45deg)}
[data-skin="web"] .wb-x.is-dirty::before{left:3px;right:3px;top:3px;height:8px;border-radius:50%;transform:none}
[data-skin="web"] .wb-x.is-dirty::after{display:none}
[data-skin="web"] .wb-fi{display:inline-grid;place-items:center;flex:none;width:17px;height:13px;border-radius:2px;font:700 8px/1 var(--f-ui);font-style:normal;color:#fff;background:#6b7280}
[data-skin="web"] .wb-fi-js{background:#866300}
[data-skin="web"] .wb-fi-css{background:#2f6fcb}
[data-skin="web"] .wb-fi-html{background:#c4521a}
[data-skin="web"] .wb-fi-json{background:#6b7280}
[data-skin="web"] .wb-fi-md{background:#4b6a88}
[data-skin="web"] .slot-ruler{background:var(--surface)}
[data-skin="web"] .wb-crumbs{display:flex;align-items:center;height:24px;padding:0 14px;background:var(--surface);font:400 12px/1 var(--f-ui);color:var(--muted);white-space:nowrap;overflow:hidden}
[data-skin="web"] .wb-crumb + .wb-crumb::before{content:"";display:inline-block;width:5px;height:5px;margin:0 9px 1px 5px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);opacity:.7}
[data-skin="web"] .wb-crumb.is-last{color:var(--ink)}

/* ---------- 탐색기 ---------- */
[data-skin="web"] .slot-side{width:var(--wb-side-w);background:var(--wb-side);border-right:1px solid var(--line);overflow:auto;scrollbar-width:none;min-height:0;font:400 13px/22px var(--f-ui);color:var(--ink)}
[data-skin="web"] .slot-side::-webkit-scrollbar{display:none}
[data-skin="web"] .wb-ex-h{padding:9px 16px 5px;font:600 11px/1.2 var(--f-ui);letter-spacing:.06em;color:var(--muted)}
[data-skin="web"] .wb-ex-p{display:flex;align-items:center;gap:5px;height:22px;padding:0 8px;font-weight:600}
[data-skin="web"] .wb-row{display:flex;align-items:center;gap:6px;height:22px;padding-right:8px;white-space:nowrap}
[data-skin="web"] .wb-row.d0{padding-left:20px}
[data-skin="web"] .wb-row.d1{padding-left:34px}
[data-skin="web"] .wb-row.d2{padding-left:48px}
[data-skin="web"] .wb-row.is-on{background:var(--wb-sel)}
[data-skin="web"] .wb-chev{flex:none;width:6px;height:6px;margin:0 5px 0 3px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg)}
[data-skin="web"] .wb-chev.is-open{transform:rotate(45deg) translate(-1px,-1px)}

/* ---------- 편집기 영역과 줄 번호 홈 ---------- */
[data-skin="web"] .canvas{background:var(--surface);border:0;border-radius:0;min-height:min(240px,34vh)}
[data-skin="web"] .stage{inset:0 0 0 var(--wb-gutter);cursor:text}
[data-skin="web"] .skin-deco.wb-gutter{inset:0;z-index:-1;overflow:hidden}
[data-skin="web"] .wb-gutter-n{position:absolute;left:0;top:0;width:var(--wb-gutter);display:flex;flex-direction:column}
[data-skin="web"] .wb-ln{display:block;height:22px;padding-right:14px;text-align:right;font:400 12.5px/22px var(--f-mono);color:var(--wb-ln)}
[data-skin="web"] .wb-ghost{position:absolute;left:calc(var(--wb-gutter) + 6px);top:0;right:0;bottom:0;overflow:hidden;opacity:.3;font:500 13px/22px var(--f-mono);color:var(--ed-var)}
[data-skin="web"] .wb-gl{height:22px;white-space:pre}
[data-skin="web"] .wb-activeline{position:absolute;left:0;right:0;top:0;height:22px;background:var(--wb-line-hl);transition:transform .08s linear}

/* ---------- 터미널과 입력줄 ---------- */
[data-skin="web"] .wb-term{display:flex;flex-direction:column;height:136px;background:var(--wb-term);border-top:1px solid var(--line)}
[data-skin="web"] .wb-term-tabs{display:flex;align-items:center;gap:18px;height:28px;padding:0 14px;font:400 12px/1 var(--f-ui);color:var(--muted);white-space:nowrap}
[data-skin="web"] .wb-pt{height:28px;display:flex;align-items:center;border-bottom:1px solid transparent}
[data-skin="web"] .wb-pt.is-on{color:var(--ink);border-bottom-color:var(--accent)}
[data-skin="web"] .wb-term-r{margin-left:auto;font-family:var(--f-mono)}
[data-skin="web"] .wb-log{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:0 14px 4px;font:500 12px/20px var(--f-mono)}
[data-skin="web"] .wb-ll{display:flex;gap:10px;white-space:nowrap;min-width:0;color:var(--ink)}
[data-skin="web"] .wb-cmd{color:var(--ink)}
[data-skin="web"] .wb-ts{color:var(--muted)}
[data-skin="web"] .wb-ll.k-g .wb-lm{color:var(--ed-str)}
[data-skin="web"] .wb-ll.k-w .wb-lm{color:var(--ed-num)}
[data-skin="web"] .wb-ll.k-t .wb-lm{color:var(--ed-type)}
[data-skin="web"] .entry{background:var(--wb-term);border:0;border-radius:0;padding:0 14px;gap:8px}
[data-skin="web"] .entry:focus-within{border:0}
/* 틀린 입력: 띠 대신 프롬프트 글자를 오류 색으로 */
[data-skin="web"] .entry:has(#typing.nomatch){border:0}
[data-skin="web"] .entry:has(#typing.nomatch) .slot-prompt{color:var(--error)}
[data-skin="web"] .wb-prompt{font:600 13px/1 var(--f-mono);color:var(--ed-str);flex:none}
[data-skin="web"] #typing{font:500 13px/1.4 var(--f-mono);padding:7px 0;caret-color:var(--wb-cursor)}
[data-skin="web"] #typing::placeholder{font-weight:400}
[data-skin="web"] .entry-key{margin-right:0;font:500 11px var(--f-mono);opacity:.7}
[data-skin="web"] .meter{background:var(--wb-term);padding:0 14px 0 6px;gap:8px;align-self:stretch}
[data-skin="web"] .meter-label{font:400 12px var(--f-ui);color:var(--muted)}
[data-skin="web"] .meter-cells{gap:2px}
[data-skin="web"] .meter-cells i{width:7px;height:13px;border-radius:1px;border:1px solid var(--line-strong)}
[data-skin="web"] .meter-cells i.on{background:var(--ed-type);border-color:var(--ed-type)}
[data-skin="web"] .meter.alarm .meter-cells i.on{background:var(--error);border-color:var(--error)}
[data-skin="web"] .meter-value{font:500 12px var(--f-mono);min-width:2.8em;color:var(--ink)}
[data-skin="web"] .hint{background:var(--wb-term);padding:0 14px 6px;min-height:0;font:400 12px/1.4 var(--f-ui)}
[data-skin="web"] .hint:empty{display:none}

/* ---------- 상태 표시줄: 왼쪽은 편집기 상태, 오른쪽은 점수줄 ---------- */
[data-skin="web"] .slot-status{display:flex;align-items:center;height:24px;padding:0 10px;background:var(--wb-status);color:#fff;font:400 12px/1 var(--f-ui);overflow:hidden}
[data-skin="web"] .wb-st-l{display:flex;align-items:center;gap:16px;white-space:nowrap}
[data-skin="web"] .wb-st-i{display:inline-flex;align-items:center;gap:5px}
[data-skin="web"] .wb-branch{position:relative;width:9px;height:11px;border-left:1.5px solid #fff}
[data-skin="web"] .wb-branch::before,[data-skin="web"] .wb-branch::after{content:"";position:absolute;width:5px;height:5px;border:1.5px solid #fff;border-radius:50%;background:var(--wb-status)}
[data-skin="web"] .wb-branch::before{left:-4px;top:-2px}
[data-skin="web"] .wb-branch::after{left:2px;bottom:-1px}
[data-skin="web"] .top-row{display:flex;align-items:center;flex-wrap:nowrap;gap:0;height:24px;padding:0 8px 0 0;background:var(--wb-status);color:#fff}
[data-skin="web"] .stats{display:flex;flex-wrap:nowrap;gap:0;align-items:center;justify-content:flex-start}
[data-skin="web"] .stat{display:flex;flex-direction:row;align-items:baseline;gap:6px;min-width:0;padding:0 10px;white-space:nowrap}
[data-skin="web"] .stat dt{font:400 12px/1 var(--f-ui);color:rgba(255,255,255,.9)}
[data-skin="web"] .stat dd{margin:0;font:600 12px/1 var(--f-mono);color:#fff}
[data-skin="web"] .lv{display:none}
[data-skin="web"] .tools{display:flex;align-items:center;gap:6px;padding-left:8px}
[data-skin="web"] .tool-label{font:400 12px/1 var(--f-ui);color:rgba(255,255,255,.9)}
[data-skin="web"] .skin-select,[data-skin="web"] #btnPause{height:19px;padding:0 8px;border:1px solid rgba(255,255,255,.5);border-radius:3px;background:transparent;color:#fff;font:400 12px/1 var(--f-ui)}
[data-skin="web"] .skin-select{appearance:none;padding-right:22px;background:transparent var(--wb-chev-w) no-repeat right 7px center}
[data-skin="web"] .skin-select option{color:#1f2328;background:#fff}
[data-skin="web"] #btnPause{border-bottom-width:1px}
[data-skin="web"] #btnPause:hover:not(:disabled){background:rgba(255,255,255,.16);border-color:#fff}

/* ---------- 버튼과 고르기 칸 ---------- */
[data-skin="web"] .btn{border:1px solid var(--line-strong);border-bottom-width:1px;border-radius:3px;background:var(--surface);color:var(--ink);padding:5px 12px;font:400 13px/1.3 var(--f-ui);justify-content:center}
[data-skin="web"] .btn:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)}
[data-skin="web"] .btn:active:not(:disabled){transform:none}
[data-skin="web"] .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);padding:8px 18px;font-size:14px}
[data-skin="web"] .btn.primary:hover:not(:disabled){background:var(--accent);filter:brightness(1.1)}
[data-skin="web"] .btn.quiet{color:var(--ink);border-color:var(--line-strong)}
[data-skin="web"] .btn kbd{opacity:.8;font-family:var(--f-mono)}
[data-skin="web"] .btn.primary kbd{opacity:1}
[data-skin="web"] #btnPause:disabled{opacity:.85}

/* ---------- 시작·멈춤·결과 화면: 실행 설정 대화 상자 ---------- */
[data-skin="web"] .layer{background:var(--scrim);grid-template-columns:minmax(0,580px) minmax(0,240px);justify-content:center;align-content:center;align-content:safe center;align-items:stretch;gap:0;padding:14px 16px}
[data-skin="web"] .layer-pause{grid-template-columns:minmax(0,580px)}
[data-skin="web"] .layer-main{background:var(--wb-side);border:1px solid var(--line-strong);padding:16px 22px 18px;gap:10px;box-shadow:0 8px 28px rgba(0,0,0,.35)}
[data-skin="web"] .board{background:var(--surface);border:1px solid var(--line-strong);border-left:0;padding:16px 18px;align-self:stretch;align-content:start;box-shadow:0 8px 28px rgba(0,0,0,.35)}
[data-skin="web"] .layer-title{margin:0;font:600 18px/1.3 var(--f-ui);letter-spacing:0;color:var(--ink)}
[data-skin="web"] .layer-rule{margin:0;font-size:13px;line-height:1.6;color:var(--muted);max-width:none}
/* 새 기록 표식과 "다른 프로젝트 열기" 링크는 이 테마에서 보이지 않는다(돌아가는 길은 제목 줄 오른쪽의 "프로젝트 열기") */
[data-skin="web"] .badge,[data-skin="web"] .actions .link{display:none}
[data-skin="web"] .layer-start .layer-title{font-family:var(--f-mono)}
[data-skin="web"] .layer-start .layer-rule{margin-top:-4px}
[data-skin="web"] .legend{gap:6px 18px;color:var(--ink)}
[data-skin="web"] .legend li span{font-size:13px;color:var(--muted)}

[data-skin="web"] .start-form{gap:12px}
[data-skin="web"] .row{gap:10px 28px}
[data-skin="web"] .seg legend{font-size:12px;color:var(--muted)}
[data-skin="web"] .opts label{min-width:40px;padding:5px 12px;border:1px solid var(--line-strong);border-bottom-width:1px;border-radius:3px;background:var(--surface);font-weight:400;font-size:13px}
[data-skin="web"] .opts label:hover{border-color:var(--accent);background:var(--accent-soft)}
[data-skin="web"] .opts input:checked + label{background:var(--accent-soft);border-color:var(--accent);color:var(--ink);font-weight:600}
[data-skin="web"] .custom textarea,[data-skin="web"] .name input{border:1px solid var(--line-strong);border-radius:3px;background:var(--surface);color:var(--ink);font-family:var(--f-mono)}
[data-skin="web"] .name input{width:160px;padding:6px 8px;font-size:13px}
[data-skin="web"] .check small,[data-skin="web"] .small{font-size:12px}
[data-skin="web"] .final-score{font:600 34px/1 var(--f-mono);letter-spacing:0}
[data-skin="web"] .final-unit{font-size:14px}
[data-skin="web"] .results{grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:10px 16px}
[data-skin="web"] .results dd{font:600 16px/1.3 var(--f-mono)}
[data-skin="web"] .board-title{font-size:13px;font-weight:600}
[data-skin="web"] .board-list li{padding:6px 0;border-bottom:1px solid var(--line)}
[data-skin="web"] .board-list li.is-mine{background:var(--accent-soft);border-radius:0}
/* 목록이 비었을 때만 안내 한 줄(board-note)을 보이고, 기록이 있으면 안내는 감춘다 */
[data-skin="web"] .board-note{font-size:12px;color:var(--muted)}
[data-skin="web"] .board-list:not(:empty) + .board-note{display:none}
[data-skin="web"] .b-rank,[data-skin="web"] .b-score,[data-skin="web"] .b-meta{font-family:var(--f-mono)}
[data-skin="web"] .board-list li:nth-child(-n+3) .b-rank{color:var(--accent)}

/* ---------- 알림 ---------- */
[data-skin="web"] .toast{left:auto;right:16px;top:auto;bottom:14px;transform:none;padding:8px 14px;font:400 13px/1.3 var(--f-ui);background:var(--wb-side);color:var(--ink);border:1px solid var(--line-strong);border-radius:3px;box-shadow:0 2px 10px rgba(0,0,0,.3)}
@media (prefers-reduced-motion: no-preference){
  [data-skin="web"] .toast.show{animation:wb-toast 1.6s ease-out forwards}
}
@keyframes wb-toast{0%{opacity:0;transform:translateY(6px)}12%{opacity:1;transform:none}82%{opacity:1}100%{opacity:0}}

/* ---------- 단어 = 문자열이나 식별자 토큰 ---------- */
[data-skin="web"] .w{font:500 var(--word)/1.3 var(--f-word);padding:.1em .4em .14em;background-color:var(--surface);border:1px solid transparent;border-radius:3px;color:var(--ed-str)}
[data-skin="web"] .w::before,[data-skin="web"] .w::after{content:'"'}
[data-skin="web"] .w::before{order:1;margin-right:1px}
[data-skin="web"] .w::after{order:3;margin-left:1px}
[data-skin="web"] .w > .w-tag{order:0}
[data-skin="web"] .w-hit,[data-skin="web"] .w-rest{order:2}
[data-skin="web"] .w-hit{color:var(--ink);text-decoration:none;background:var(--wb-sel-strong);border-radius:2px}
/* 특수 단어 표식은 편집기의 인라인 힌트처럼 작은 이름표다 */
[data-skin="web"] .w-tag{font:500 11px/1 var(--f-ui);letter-spacing:0;padding:2px 6px;margin-right:6px;border-radius:3px;background:rgba(128,128,128,.1);color:var(--muted)}
[data-skin="web"] .w-tag[data-kind="gold"]{background:rgba(128,128,128,.1);color:var(--ed-num)}
[data-skin="web"] .w-tag[data-kind="ice"]{background:rgba(128,128,128,.1);color:var(--ed-type)}
[data-skin="web"] .w-tag[data-kind="heal"]{background:rgba(128,128,128,.1);color:var(--ed-fn)}
[data-skin="web"] .w-tag[data-kind="clear"]{background:rgba(128,128,128,.1);color:var(--ed-key)}
[data-skin="web"] .w-tag[data-kind="bomb"],[data-skin="web"] .w-tag[data-kind="boss"]{background:var(--error-soft);color:var(--error)}
[data-skin="web"] .w > .w-tag{margin-right:6px}
/* 특수 단어는 다른 구문 색이다 */
[data-skin="web"] .w[data-kind="gold"]{color:var(--ed-num)}
[data-skin="web"] .w[data-kind="ice"]{color:var(--ed-type)}
[data-skin="web"] .w[data-kind="heal"]{color:var(--ed-fn)}
[data-skin="web"] .w[data-kind="clear"]{color:var(--ed-key)}
[data-skin="web"] .w[data-kind="bomb"]{color:var(--error);text-decoration:underline wavy var(--wb-squig);text-underline-offset:4px}
[data-skin="web"] .w[data-kind="boss"]{color:var(--error);font-weight:700;border-color:var(--error);font-size:calc(var(--word) * 1.08)}
/* 앞부분이 맞으면 선택 영역, 목표는 커서 테두리 */
[data-skin="web"] .w.is-match{background-image:linear-gradient(var(--wb-sel),var(--wb-sel));border-color:transparent}
[data-skin="web"] .w.is-target{box-shadow:none;border-color:var(--wb-cursor)}
[data-skin="web"] .w.is-locked{opacity:.5}
[data-skin="web"] .ent.walker .w{border-bottom-width:1px}
[data-skin="web"] .stage.frozen .w{border-color:transparent}
[data-skin="web"] .stage.frozen .w.is-target{border-color:var(--wb-cursor)}

/* 효과: 점과 고리는 숨기고 점수 글자만 짧은 로그처럼 남긴다 */
[data-skin="web"] .fx-dot,[data-skin="web"] .fx-ring,[data-skin="web"] .blast{display:none}
[data-skin="web"] .fx-float{font:600 12px/1 var(--f-mono);color:var(--ed-type)}
[data-skin="web"] .fx-float.big{color:var(--ed-num);font-size:13px}
[data-skin="web"] .fx-float.bad{color:var(--error)}

/* ---------- 소나기: 아래에서 차오르는 오류 줄 ---------- */
[data-skin="web"] .pond{border-top:1px solid var(--error);background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='22'%3E%3Cpath d='M0 19.5L1.5 18L3 19.5L4.5 18L6 19.5' fill='none' stroke='%23e5484d' stroke-width='1.1'/%3E%3C/svg%3E") 0 100% / 6px 22px repeat,
  repeating-linear-gradient(to top,var(--wb-err-line) 0 21px,transparent 21px 22px)}
[data-skin="web"] .pond::after{background:none}
[data-skin="web"] .brim{border-top:1px dashed var(--line-strong)}
[data-skin="web"] .brim-label{right:12px;bottom:3px;font:500 11px/1 var(--f-mono);color:var(--muted)}

/* ---------- 레이싱: 빌드 단계별 진행 ---------- */
[data-skin="web"] .track{padding:12px 20px 0;background:var(--surface)}
[data-skin="web"] .track .lane{grid-template-columns:7.8em minmax(0,1fr) 3.6em;height:38px;gap:12px;border-bottom:0}
[data-skin="web"] .track .lane:first-child{border-top:0}
[data-skin="web"] .track .lane-road{display:none}
[data-skin="web"] .track .lane-name{font:500 13px/1.25 var(--f-mono);color:var(--ink)}
[data-skin="web"] .track .lane-name small{font:400 11px/1.2 var(--f-mono);color:var(--muted)}
[data-skin="web"] .track .lane[data-me] .lane-name{color:var(--accent);font-weight:700}
[data-skin="web"] .track .lane-bar{display:block;height:12px;border-radius:0;background:repeating-linear-gradient(90deg,var(--wb-cell) 0 7px,transparent 7px 9px)}
[data-skin="web"] .track .lane-bar-fill{--c:var(--ed-type);background:repeating-linear-gradient(90deg,var(--c) 0 7px,transparent 7px 9px)}
[data-skin="web"] .track .lane:nth-child(1) .lane-bar-fill{--c:var(--accent)}
[data-skin="web"] .track .lane:nth-child(3) .lane-bar-fill{--c:var(--ed-num)}
[data-skin="web"] .track .lane:nth-child(4) .lane-bar-fill{--c:var(--ed-key)}
[data-skin="web"] .track .lane-pct{font:600 12px/1 var(--f-mono);color:var(--ink)}
[data-skin="web"] .track .lane.is-done .lane-pct{color:var(--ed-str)}
/* 지문은 주석 블록이다 */
[data-skin="web"] .passage{padding:12px 18px;border-top:1px solid var(--line);background:var(--surface);font:500 clamp(14px,.35vw + 10px,16px)/1.8 var(--f-mono);color:var(--ed-com)}
[data-skin="web"] .passage::before{content:"/*";flex:none;color:var(--ed-com);margin-right:.1em}
[data-skin="web"] .passage::after{content:"*/";flex:none;color:var(--ed-com)}
[data-skin="web"] .pw{color:var(--ed-com)}
[data-skin="web"] .pw.is-done{color:var(--ed-com);opacity:.6}
[data-skin="web"] .pw.is-current{color:var(--ink);background:var(--wb-sel);border-radius:2px}
[data-skin="web"] .pw.is-error{color:var(--error);background:var(--error-soft)}
[data-skin="web"] .pw-hit{color:var(--ink);text-decoration:none;background:var(--wb-sel-strong)}
[data-skin="web"] .countdown{font:700 90px/1 var(--f-mono);color:var(--ink)}
/* 게임 고르기 미리보기의 차: 진행 칸이 늘어나는 모양 */
[data-skin="web"] .pv-lane .car{width:48px;height:10px;margin-top:-5px;border-radius:0;background:repeating-linear-gradient(90deg,var(--ed-type) 0 7px,transparent 7px 9px);transition:none}
[data-skin="web"] .pv-lane .car::before,[data-skin="web"] .pv-lane .car::after{display:none}
[data-skin="web"] .pv-lane[data-me] .car{background:repeating-linear-gradient(90deg,var(--accent) 0 7px,transparent 7px 9px)}

/* ---------- 대포: 코드 블록과 디버거 ---------- */
[data-skin="web"] .ground{border-top:1px solid var(--line);background:var(--wb-side)}
[data-skin="web"] .fort{background:linear-gradient(var(--wb-sel),var(--wb-sel)) var(--surface);border:1px solid var(--accent);border-left:0;border-bottom:0}
[data-skin="web"] .fort::before{content:"{ }";left:0;right:0;top:12px;height:auto;background:none;text-align:center;font:500 30px/1 var(--f-mono);color:var(--accent)}
[data-skin="web"] .fort[data-low="true"]{background:linear-gradient(var(--error-soft),var(--error-soft)) var(--surface);border-color:var(--error)}
[data-skin="web"] .fort[data-low="true"]::before{color:var(--error)}
[data-skin="web"] .cannon{background:radial-gradient(circle,var(--error) 0 7px,transparent 7.5px)}
[data-skin="web"] .barrel{background:linear-gradient(var(--ed-fn),var(--ed-fn)) 0 50%/calc(100% - 5px) 2px no-repeat;border-radius:0}
[data-skin="web"] .barrel::after{content:"";position:absolute;right:0;top:3px;width:8px;height:8px;background:var(--ed-fn);clip-path:polygon(0 0,100% 50%,0 100%)}
[data-skin="web"] .shell{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--ed-type)}
[data-skin="web"] .pv-cannon{background:radial-gradient(circle,var(--error) 0 7px,transparent 7.5px)}

/* ---------- 총알 피하기: 블록 커서와 진단 표시 ----------
   크기는 dodge.html 의 충돌 크기(나 반지름 14, 총알 반지름 7)와 맞춘다: 나 28px 높이의 블록 커서, 총알 14px 의 진단 아이콘.
   2026-11-09 디자인 검토에서 "나(8x22 커서)를 찾기 어렵고 총알(가는 물결)이 약하다" 는 지적이 있어,
   나는 강조색 면에 테두리 고리를 두르고 총알은 편집기 문제 창의 오류·경고·정보 아이콘처럼 꽉 찬 원으로 그렸다 */
[data-skin="web"] .arena{background:none}
[data-skin="web"] .player{width:18px;height:28px;margin:-14px 0 0 -9px;border-radius:2px;background:var(--accent);box-shadow:0 0 0 3px var(--wb-sel-strong)}
@media (prefers-reduced-motion: no-preference){
  [data-skin="web"] .player:not(.is-hurt){animation:wb-caret 1.1s steps(1) infinite}
}
@keyframes wb-caret{50%{opacity:.55}}
/* 총알은 종류마다 색과 표시가 다르다: 오류(빨강 x), 경고(노랑 느낌표), 정보(파랑 i). 흰 고리로 뒤의 코드와 떼어 놓는다 */
[data-skin="web"] .bullet{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='7' cy='7' r='7' fill='%23e5484d'/%3E%3Cpath d='M4.4 4.4l5.2 5.2M9.6 4.4l-5.2 5.2' stroke='%23fff' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
  width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--ic) center / 14px 14px no-repeat;box-shadow:0 0 0 2px var(--surface)}
[data-skin="web"] .bullet[data-kind="ring"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='7' cy='7' r='7' fill='%23d29922'/%3E%3Cpath d='M7 3.3v4.4' stroke='%231f2328' stroke-width='1.9' stroke-linecap='round'/%3E%3Ccircle cx='7' cy='10.4' r='1.1' fill='%231f2328'/%3E%3C/svg%3E")}
[data-skin="web"] .bullet[data-kind="rain"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='7' cy='7' r='7' fill='%233b82f6'/%3E%3Ccircle cx='7' cy='3.8' r='1.1' fill='%23fff'/%3E%3Cpath d='M7 6.4v4.2' stroke='%23fff' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E")}
[data-skin="web"] .trail{height:3px;border-top:0;background:var(--wb-sel-strong)}
[data-skin="web"] .pv-player{background:var(--wb-cursor)}
/* 순간이동 자리 글자는 편집기 배경색 면 위에 얹는다: 아래 코드 줄과 겹쳐 읽히지 않게 면을 깔고 둘레를 편집기 색으로 한 겹 더 지운다.
   목표 단어(.is-target)의 테두리색은 위 규칙이 정하므로 여기서는 목표가 아닐 때만 테두리색을 준다 */
[data-skin="web"] .ent.anchor .w{padding:.28em .75em;background-color:var(--surface);box-shadow:0 0 0 4px var(--surface), 0 2px 8px rgba(0,0,0,.14)}
[data-skin="web"] .ent.anchor .w:not(.is-target){border-color:var(--line-strong)}

/* ---------- 게임 고르기: 최근 프로젝트 목록 ---------- */
[data-skin="web"] .menu{padding:6px 28px 8px;grid-template-rows:auto repeat(4,minmax(98px,1fr))}
[data-skin="web"] .menu::before{content:"최근 프로젝트";content:"최근 프로젝트" / "";grid-column:1 / -1;padding:10px 0 10px;border-bottom:1px solid var(--line);font:600 13px/1.3 var(--f-ui);color:var(--muted)}
[data-skin="web"] .game-row{grid-template-columns:34px minmax(0,1fr) 168px 8.5em;gap:6px 22px;padding:8px 8px;border-radius:3px}
[data-skin="web"] .gr-key{font:500 13px var(--f-mono);border:1px solid var(--line-strong);border-bottom-width:1px;border-radius:3px;width:1.9em;height:1.9em}
[data-skin="web"] .gr-preview{width:168px;height:94px;border:1px solid var(--line);border-radius:3px;background:var(--surface)}
[data-skin="web"] .gr-name{font:600 15px/1.3 var(--f-mono);color:var(--ink)}
[data-skin="web"] .gr-rule{max-width:none;font:400 12px/1.4 var(--f-mono);color:var(--muted)}
[data-skin="web"] .gr-best b{font:600 18px var(--f-mono)}
[data-skin="web"] .game-row:hover,[data-skin="web"] .game-row:focus-visible{background:var(--wb-sel)}

/* ---------- Esc 숨김 화면: 그럴듯한 코드 ---------- */
[data-skin="web"] .boss{background:var(--surface);overflow:hidden}
[data-skin="web"] .wb-editor{position:absolute;inset:0;display:flex;font:500 13px/22px var(--f-mono)}
[data-skin="web"] .wb-code{flex:1;min-width:0;overflow:hidden}
[data-skin="web"] .wb-cl{display:flex;height:22px;white-space:pre}
[data-skin="web"] .wb-cn{flex:none;width:var(--wb-gutter);padding-right:14px;text-align:right;color:var(--wb-ln)}
[data-skin="web"] .wb-ct{padding-left:6px;color:var(--ed-var)}
[data-skin="web"] .wb-cl.is-hot{background:var(--wb-line-hl)}
[data-skin="web"] .wb-cl.is-hot .wb-cn{color:var(--ink)}
[data-skin="web"] .wb-c{color:var(--ed-com);font-style:italic}
[data-skin="web"] .wb-s{color:var(--ed-str)}
[data-skin="web"] .wb-n{color:var(--ed-num)}
[data-skin="web"] .wb-k{color:var(--ed-key)}
[data-skin="web"] .wb-f{color:var(--ed-fn)}
[data-skin="web"] .wb-v{color:var(--ed-var)}
[data-skin="web"] .wb-p{color:var(--ed-pun)}
[data-skin="web"] .wb-mini{flex:none;width:76px;background:repeating-linear-gradient(to bottom,var(--wb-mini) 0 2px,transparent 2px 4px) 10px 6px / 46px 62% no-repeat;border-left:1px solid var(--line)}

/* 숨김 화면에서는 점수줄, 눈금, 안내도 감춘다 */
[data-skin="web"] .app.is-hiding .stats,
[data-skin="web"] .app.is-hiding .meter > *{visibility:hidden}
[data-skin="web"] .app.is-hiding .hint{color:transparent}
[data-skin="web"] .app.is-hiding .entry-key{visibility:hidden}
[data-skin="web"] .app.is-hiding .entry{box-shadow:none}
[data-skin="web"] .app.is-hiding #typing{color:transparent}
[data-skin="web"] .app.is-hiding #typing::placeholder{color:transparent}

/* ---------- 좁은 화면 ---------- */
@media (max-width: 1500px){ [data-skin="web"] .wb-st-opt{display:none} }
@media (max-width: 1060px){ [data-skin="web"] .wb-menus{display:none} [data-skin="web"] .wb-titlebar{grid-template-columns:1fr} [data-skin="web"] .wb-doc{text-align:left} }
@media (max-width: 1100px){ [data-skin="web"] .wb-pos{display:none} }
@media (max-width: 900px){
  [data-skin="web"]{--wb-side-w:0px}
  [data-skin="web"] .slot-side{display:none}
  [data-skin="web"] .app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto auto auto auto;grid-template-areas:"menu" "tabs" "main" "meter" "entry" "hint" "stats" "status"}
  [data-skin="web"] .top-row{grid-area:stats;justify-self:stretch;flex-direction:column;align-items:stretch;height:auto;padding:4px 10px 6px}
  [data-skin="web"] .app:has(.meter[hidden]) .entry{grid-column:1}
  [data-skin="web"] .stats{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  [data-skin="web"] .stat{padding:2px 4px;justify-content:center}
  [data-skin="web"] .tools{padding:2px 0 0}
  [data-skin="web"] .stage{inset:0 0 0 38px}
  [data-skin="web"] .wb-gutter-n,[data-skin="web"] .wb-cn{width:38px}
  [data-skin="web"] .wb-ln,[data-skin="web"] .wb-cn{padding-right:8px}
  [data-skin="web"] .layer{grid-template-columns:minmax(0,580px)}
  [data-skin="web"] .board{border-left:1px solid var(--line-strong);padding:14px 18px}
}
@media (max-width: 760px){
  [data-skin="web"] .slot-below,[data-skin="web"] .slot-ruler,[data-skin="web"] .wb-st-l .wb-st-i:nth-child(n+3){display:none}
  [data-skin="web"] .menu{padding:4px 12px 6px;grid-template-rows:none}
  [data-skin="web"] .game-row{grid-template-columns:34px minmax(0,1fr);grid-template-areas:"key text" "pv pv" "best best"}
  [data-skin="web"] .gr-preview{width:100%;height:72px}
  [data-skin="web"] .gr-best{display:flex;align-items:baseline;gap:8px}
  [data-skin="web"] .layer{padding:10px}
  [data-skin="web"] .layer-main{padding:14px 16px}
  [data-skin="web"] .wb-mini{display:none}
}
@media (max-height: 640px){
  [data-skin="web"] .slot-below{display:none}
}