/* 표 계산 업무 테마(id: sheet).
   게임 요소를 표 계산 프로그램의 부품으로 다시 칠한다: 칸 격자, 수식 입력줄, 시트 탭, 상태 표시줄, 대화 상자.
   모든 규칙은 [data-skin="sheet"] 아래에만 둔다(다른 테마로 새지 않게).

   [!CRITICAL] 칸 크기는 sheet.js 의 GRID(colw 96, rowh 24)와 같아야 한다.
   무대(.stage)를 열 머리글(--sh-ch)과 행 번호(--sh-rn) 자리만큼 들여, 무대 좌표 (0, 0) 이 칸 격자의 시작점이 되게 했다.

   화면의 모든 글(게임 이름, 규칙, 범례, 순위표 문구 등)은 틀이 용어 키로 꺼내므로 sheet.js 의 terms 에서 바꾼다.
   여기서는 글을 숨기거나 content 로 덧씌우지 않고, 나온 글에 모양만 입힌다. */

[data-skin="sheet"]{
  --bg:#f3f3f3; --surface:#ffffff; --surface-2:#f6f6f6;
  --ink:#1f1f1f; --muted:#595959; --line:#dadada; --line-strong:#a6a6a6;
  --accent:#1b6b3f; --accent-ink:#ffffff; --accent-soft:#dff0e6;
  --error:#b3261e; --error-soft:#fde8e6;
  --gold:#7a5600; --gold-soft:#fff2cc;
  --ice:#1f5f9e; --ice-soft:#ddebf7;
  --heal:#2b682b; --heal-soft:#e2efda;
  --clear:#5b3f86; --clear-soft:#e8e1f2;
  --lane-1:#1b6b3f; --lane-2:#3b6fb6; --lane-3:#b3261e; --lane-4:#a85d00;
  --scrim:rgba(0,0,0,.18); --focus:#1a73e8;
  --f-body:"Malgun Gothic","맑은 고딕","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  --f-display:var(--f-body); --f-word:var(--f-body);
  --f-num:Consolas,"D2Coding","SF Mono",ui-monospace,Menlo,monospace;
  --word:13px; --radius:2px;
  /* 표 계산 전용 값 */
  --sh-chrome:#ffffff; --sh-ribbon:#f3f3f3; --sh-status:#f3f3f3; --sh-line:#d4d4d4; --sh-grid:#d9d9d9; --sh-cell:#b5b5b5;
  --sh-head:#f0f0f0; --sh-head-ink:#454545; --sh-head-on:#cfe6d8; --sh-hover:#e6e6e6;
  --sh-sel:rgba(27,107,63,.14); --sh-trace:#2b62c4; --sh-done:#666666; --sh-pond:rgba(179,38,30,.11);
  --sh-bar1-a:#cfe7d9; --sh-bar1-b:#4fa77a; --sh-bar2-a:#d3e2f5; --sh-bar2-b:#5b8fd6;
  --sh-toast:#323232; --sh-toast-ink:#ffffff; --sh-dim:rgba(0,0,0,.2);
  --sh-rn:44px; --sh-ch:24px; --sh-colw:96px; --sh-rowh:24px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  [data-skin="sheet"]{
    --bg:#202020; --surface:#1c1c1c; --surface-2:#242424;
    --ink:#e9e9e9; --muted:#aaaaaa; --line:#3a3a3a; --line-strong:#6b6b6b;
    --accent:#5cc58d; --accent-ink:#06210f; --accent-soft:#1f3b2c;
    --error:#ff8f86; --error-soft:#4a2421;
    --gold:#f2c75a; --gold-soft:#463a10;
    --ice:#80b9f2; --ice-soft:#1b344d;
    --heal:#7fd78b; --heal-soft:#1f3a24;
    --clear:#c5abf0; --clear-soft:#32274a;
    --lane-1:#5cc58d; --lane-2:#80b9f2; --lane-3:#ff8f86; --lane-4:#f2a65a;
    --scrim:rgba(0,0,0,.4); --focus:#7db7ff;
    --sh-chrome:#262626; --sh-ribbon:#2b2b2b; --sh-status:#2b2b2b; --sh-line:#3d3d3d; --sh-grid:#363636; --sh-cell:#5c5c5c;
    --sh-head:#2b2b2b; --sh-head-ink:#bdbdbd; --sh-head-on:#2c4b3a; --sh-hover:#3a3a3a;
    --sh-sel:rgba(92,197,141,.2); --sh-trace:#7fb0ff; --sh-done:#a0a0a0; --sh-pond:rgba(255,143,134,.13);
    --sh-bar1-a:#24453a; --sh-bar1-b:#3f9a6c; --sh-bar2-a:#233a57; --sh-bar2-b:#4b7fc4;
    --sh-toast:#e9e9e9; --sh-toast-ink:#1c1c1c; --sh-dim:rgba(0,0,0,.45);
    color-scheme:dark;
  }
}

/* ---------- 틀: 창 전체를 쓴다 ----------
   위 머리(제목과 메뉴, 도구줄과 요약 칸) / 수식 입력줄 / 시트 / 아래 상태 표시줄.
   .dock 을 display:contents 로 풀어 입력줄은 위로, 안내·눈금·상태는 맨 아래 한 줄로 올린다 */
[data-skin="sheet"] body{font:400 13px/1.4 var(--f-body);background:var(--bg);color:var(--ink)}
[data-skin="sheet"] .app{max-width:none;padding:0;gap:0;background:var(--sh-chrome);
  grid-template-columns:minmax(0,1fr) auto auto;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  grid-template-areas:"head head head" "entry entry entry" "work work work" "hint meter status"}
[data-skin="sheet"] .top{grid-area:head;display:grid;gap:0;background:var(--sh-chrome);border-bottom:1px solid var(--sh-line);
  grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-rows:34px 44px;
  grid-template-areas:"back title menu tools" "ribbon ribbon ribbon stats"}
[data-skin="sheet"] .top-row{display:contents}
/* 요약 칸이 없는 화면(게임 고르기)은 도구줄이 오른쪽 끝까지 이어진다 */
[data-skin="sheet"] .top:not(:has(.stats)) .slot-toolbar{grid-column:1 / -1}
[data-skin="sheet"] .work{grid-area:work;gap:0}
[data-skin="sheet"] .dock{display:contents}
[data-skin="sheet"] .entry{grid-area:entry}
[data-skin="sheet"] .hint{grid-area:hint}
[data-skin="sheet"] .meter{grid-area:meter}
[data-skin="sheet"] .slot-status{grid-area:status}
[data-skin="sheet"] .launcher-note{grid-area:hint}

/* ---------- 제목과 메뉴 ---------- */
/* 돌아가기는 파일 이름 앞의 경로 조각이다: 왼쪽 꺾쇠 모양과 "파일 목록" 글자, 뒤에 가는 구분선. 눌러서 파일 목록으로 돌아간다 */
[data-skin="sheet"] .back{grid-area:back;align-self:center;display:flex;align-items:center;gap:7px;height:24px;margin-left:8px;padding:0 4px 0 8px;border:0;border-radius:3px;background:none;color:var(--ink);font:400 13px/1 var(--f-body);text-decoration:none;white-space:nowrap}
[data-skin="sheet"] .back::before{content:"";flex:none;width:6px;height:6px;border-left:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateX(2px) rotate(45deg)}
[data-skin="sheet"] .back::after{content:"";flex:none;width:1px;height:16px;margin-left:4px;background:var(--sh-line)}
[data-skin="sheet"] .back:hover{background:var(--sh-hover);color:var(--ink)}
[data-skin="sheet"] .back:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
[data-skin="sheet"] .brand-h{grid-area:title;display:flex;align-items:center;min-width:0;padding:0 10px 0 6px}
[data-skin="sheet"] .brand{display:flex;align-items:center;gap:8px;min-width:0;color:var(--ink)}
[data-skin="sheet"] .brand::before{content:"";flex:none;width:15px;height:20px;border-radius:2px;background:
  linear-gradient(#fff,#fff) 3px 6px/9px 1px no-repeat, linear-gradient(#fff,#fff) 3px 10px/9px 1px no-repeat,
  linear-gradient(#fff,#fff) 3px 14px/9px 1px no-repeat, linear-gradient(#fff,#fff) 7px 4px/1px 13px no-repeat, var(--accent)}
[data-skin="sheet"] .brand-game{display:block;min-width:0;max-width:260px;font:600 14px/1.3 var(--f-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-skin="sheet"] .slot-menubar{grid-area:menu;display:flex;align-items:center;min-width:0;overflow:hidden;padding:0 4px}
[data-skin="sheet"] .sh-menu{padding:3px 9px;border-radius:3px;font-size:13px;white-space:nowrap}
[data-skin="sheet"] .sh-menu:hover{background:var(--sh-hover)}
[data-skin="sheet"] .tools{grid-area:tools;gap:8px;padding:0 12px;justify-content:flex-end}
[data-skin="sheet"] .tool-label{font-size:12px;color:var(--muted)}
[data-skin="sheet"] .skin-select{background-color:var(--surface);border:1px solid var(--line-strong);border-radius:2px;padding:3px 24px 3px 8px;font:400 12px var(--f-body);color:var(--ink)}
[data-skin="sheet"] #btnSound{display:none}
[data-skin="sheet"] #btnPause{padding:3px 12px;font-size:12px}

/* ---------- 도구줄과 요약 칸 ---------- */
[data-skin="sheet"] .slot-toolbar{grid-area:ribbon;display:flex;align-items:center;gap:2px;min-width:0;overflow:hidden;padding:0 8px;background:var(--sh-ribbon);border-top:1px solid var(--sh-line)}
[data-skin="sheet"] .sh-sep{flex:none;width:1px;height:20px;margin:0 6px;background:var(--sh-line)}
[data-skin="sheet"] .sh-box{flex:none;display:inline-flex;align-items:center;justify-content:space-between;gap:6px;height:24px;padding:0 6px;border-radius:3px;font-size:12.5px;white-space:nowrap}
[data-skin="sheet"] .sh-box::after{content:"";width:0;height:0;border:4px solid transparent;border-top-color:currentColor;margin-top:4px}
[data-skin="sheet"] .sh-box.w44{width:44px} [data-skin="sheet"] .sh-box.w56{width:56px} [data-skin="sheet"] .sh-box.w96{width:96px}
[data-skin="sheet"] .sh-btn{flex:none;display:inline-grid;place-items:center;min-width:26px;height:24px;padding:0 4px;border-radius:3px;font:600 13px/1 var(--f-body)}
[data-skin="sheet"] .sh-btn.wide{padding:0 8px;font-weight:400;font-size:12.5px}
[data-skin="sheet"] .sh-btn.i{font:italic 600 14px/1 Georgia,"Times New Roman",serif}
[data-skin="sheet"] .sh-btn.s{text-decoration:line-through}
/* 글자 색 단추: 글자 밑에 글자보다 좁은 색 막대 */
[data-skin="sheet"] .sh-btn.fc{background:linear-gradient(var(--error),var(--error)) 50% calc(100% - 1px)/14px 3px no-repeat;height:22px;border-radius:0}
[data-skin="sheet"] .sh-ico{flex:none;width:26px;height:24px;position:relative}
[data-skin="sheet"] .sh-ico::before{content:"";position:absolute;left:6px;top:5px;width:14px;height:14px}
[data-skin="sheet"] .sh-ico.fill::before{background:linear-gradient(#f2c811,#f2c811) 0 100%/14px 4px no-repeat, linear-gradient(currentColor,currentColor) 2px 1px/10px 7px no-repeat;opacity:.85}
[data-skin="sheet"] .sh-ico.borders::before{box-sizing:border-box;border:1.5px solid currentColor;background:linear-gradient(currentColor,currentColor) 50% 0/1.5px 100% no-repeat, linear-gradient(currentColor,currentColor) 0 50%/100% 1.5px no-repeat}
[data-skin="sheet"] .sh-ico.al-l::before{background:linear-gradient(currentColor,currentColor) 0 1px/14px 2px no-repeat, linear-gradient(currentColor,currentColor) 0 5px/9px 2px no-repeat, linear-gradient(currentColor,currentColor) 0 9px/14px 2px no-repeat, linear-gradient(currentColor,currentColor) 0 13px/9px 1px no-repeat}
[data-skin="sheet"] .sh-ico.al-c::before{background:linear-gradient(currentColor,currentColor) 0 1px/14px 2px no-repeat, linear-gradient(currentColor,currentColor) 50% 5px/9px 2px no-repeat, linear-gradient(currentColor,currentColor) 0 9px/14px 2px no-repeat, linear-gradient(currentColor,currentColor) 50% 13px/9px 1px no-repeat}
[data-skin="sheet"] .sh-ico.al-r::before{background:linear-gradient(currentColor,currentColor) 0 1px/14px 2px no-repeat, linear-gradient(currentColor,currentColor) 100% 5px/9px 2px no-repeat, linear-gradient(currentColor,currentColor) 0 9px/14px 2px no-repeat, linear-gradient(currentColor,currentColor) 100% 13px/9px 1px no-repeat}

/* 점수줄은 요약 칸(작은 표)이 된다: 위 머리 칸, 아래 값 칸 */
[data-skin="sheet"] .stats{grid-area:stats;display:flex;flex-wrap:nowrap;gap:0;justify-content:flex-end;align-items:center;margin:0;padding:3px 12px 3px 8px;background:var(--sh-ribbon);border-top:1px solid var(--sh-line)}
[data-skin="sheet"] .stat{display:grid;min-width:66px;margin-left:-1px;border:1px solid var(--sh-cell);background:var(--surface)}
[data-skin="sheet"] .stat dt{padding:0 6px;font-size:11px;line-height:16px;text-align:center;white-space:nowrap;color:var(--sh-head-ink);background:var(--sh-head);border-bottom:1px solid var(--sh-cell)}
[data-skin="sheet"] .stat dd{position:relative;padding:0 6px;font:600 13px/19px var(--f-num);text-align:right}
[data-skin="sheet"] .lv{position:absolute;left:0;right:0;bottom:0;height:3px;margin:0;background:transparent;border-radius:0}
[data-skin="sheet"] .lv i{background:var(--accent)}

/* ---------- 수식 입력줄 ---------- */
[data-skin="sheet"] .entry{height:30px;border:0;border-bottom:1px solid var(--sh-line);border-radius:0;background:var(--surface)}
[data-skin="sheet"] .entry:focus-within{border-color:var(--accent);box-shadow:inset 0 -1px 0 var(--accent)}
[data-skin="sheet"] .entry:has(#typing.nomatch){border-color:var(--error);background:var(--error-soft)}
[data-skin="sheet"] .slot-prompt{display:flex;align-items:center;flex:none}
[data-skin="sheet"] .sh-name{display:inline-flex;align-items:center;width:92px;height:22px;margin:0 8px;padding:0 8px;border:1px solid var(--sh-cell);background:var(--surface);font:400 12.5px var(--f-num)}
[data-skin="sheet"] .sh-fx{display:inline-flex;align-items:center;height:22px;padding:0 12px 0 10px;border-left:1px solid var(--sh-line);font:italic 600 14px/1 Georgia,"Times New Roman",serif;color:var(--muted)}
[data-skin="sheet"] #typing{font:400 13px/1.2 var(--f-body);padding:0 10px;height:100%;color:var(--ink)}
[data-skin="sheet"] #typing.nomatch{color:var(--error)}
[data-skin="sheet"] #typing::placeholder{color:var(--muted);font-weight:400}
[data-skin="sheet"] .entry-key{display:none}

/* ---------- 시트 ---------- */
[data-skin="sheet"] .canvas{border:0;border-radius:0;background:var(--surface)}
[data-skin="sheet"] .stage{inset:var(--sh-ch) 0 0 var(--sh-rn);cursor:cell;background-color:var(--surface);
  background-image:linear-gradient(to right, transparent calc(var(--sh-colw) - 1px), var(--sh-grid) calc(var(--sh-colw) - 1px)), linear-gradient(to bottom, transparent calc(var(--sh-rowh) - 1px), var(--sh-grid) calc(var(--sh-rowh) - 1px));
  background-size:var(--sh-colw) 100%, 100% var(--sh-rowh);background-repeat:repeat-x, repeat-y}
/* 멈춤(보류) 효과: 칸 선 위에 옅은 파란 막을 덮는다. 정석 테마의 단색 배경이 격자를 지우지 않게 격자를 다시 적는다 */
[data-skin="sheet"] .stage.frozen{background-color:var(--surface);
  background-image:linear-gradient(to right, transparent calc(var(--sh-colw) - 1px), var(--sh-grid) calc(var(--sh-colw) - 1px)), linear-gradient(to bottom, transparent calc(var(--sh-rowh) - 1px), var(--sh-grid) calc(var(--sh-rowh) - 1px)), linear-gradient(var(--ice-soft),var(--ice-soft));
  background-size:var(--sh-colw) 100%, 100% var(--sh-rowh), 100% 100%;background-repeat:repeat-x, repeat-y, no-repeat}
[data-skin="sheet"] .stage.frozen .w{border-color:var(--sh-cell)}
[data-skin="sheet"] .sh-corner{left:0;top:0;width:var(--sh-rn);height:var(--sh-ch);background:var(--sh-head);border-right:1px solid var(--sh-cell);border-bottom:1px solid var(--sh-cell)}
[data-skin="sheet"] .sh-corner::after{content:"";position:absolute;right:5px;bottom:5px;border:6px solid transparent;border-right-color:var(--sh-cell);border-bottom-color:var(--sh-cell)}
[data-skin="sheet"] .sh-cols{left:var(--sh-rn);right:0;top:0;height:var(--sh-ch);display:flex;overflow:hidden;background:var(--sh-head);border-bottom:1px solid var(--sh-cell)}
[data-skin="sheet"] .sh-cols span{flex:none;box-sizing:border-box;width:var(--sh-colw);text-align:center;font:400 12px/23px var(--f-body);color:var(--sh-head-ink);border-right:1px solid var(--sh-cell)}
[data-skin="sheet"] .sh-rows{left:0;top:var(--sh-ch);bottom:0;width:var(--sh-rn);display:flex;flex-direction:column;overflow:hidden;background:var(--sh-head);border-right:1px solid var(--sh-cell)}
[data-skin="sheet"] .sh-rows span{flex:none;box-sizing:border-box;height:var(--sh-rowh);text-align:center;font:400 12px/23px var(--f-body);color:var(--sh-head-ink);border-bottom:1px solid var(--sh-cell)}
[data-skin="sheet"] .sh-cols .is-on,[data-skin="sheet"] .sh-rows .is-on{background:var(--sh-head-on);color:var(--ink);font-weight:700}
[data-skin="sheet"] .sh-cols .is-on{border-bottom:2px solid var(--accent)}
[data-skin="sheet"] .sh-rows .is-on{box-shadow:inset -2px 0 0 var(--accent)}

/* 시트 탭 */
[data-skin="sheet"] .slot-below{display:flex;align-items:stretch;height:28px;background:var(--sh-ribbon);border-top:1px solid var(--sh-line);overflow:hidden}
[data-skin="sheet"] .sh-nav{flex:none;display:flex;align-items:center;gap:8px;padding:0 12px}
[data-skin="sheet"] .sh-tri{width:0;height:0;border:5px solid transparent;border-right:7px solid var(--muted);border-left:0}
[data-skin="sheet"] .sh-tri.r{border-right:0;border-left:7px solid var(--muted)}
[data-skin="sheet"] .sh-add{flex:none;display:grid;place-items:center;width:30px;font:400 18px/1 var(--f-body);color:var(--muted)}
[data-skin="sheet"] .sh-tab{flex:none;display:flex;align-items:center;padding:0 18px;font-size:12.5px;color:var(--muted);border-right:1px solid var(--sh-line);white-space:nowrap}
[data-skin="sheet"] .sh-tab.on{background:linear-gradient(var(--accent),var(--accent)) 0 100%/100% 3px no-repeat,var(--surface);color:var(--accent);font-weight:700}

/* 아래 한 줄: 안내(준비), 눈금, 상태 */
[data-skin="sheet"] .hint,[data-skin="sheet"] .launcher-note{display:flex;align-items:center;gap:10px;min-width:0;min-height:24px;margin:0;padding:0 12px;background:var(--sh-status);border-top:1px solid var(--sh-line);font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-skin="sheet"] .hint:empty::before{content:"준비";content:"준비" / ""}
[data-skin="sheet"] .hint.warn{color:var(--error)}
[data-skin="sheet"] .meter{align-self:stretch;gap:8px;padding:0 12px;background:var(--sh-status);border-top:1px solid var(--sh-line)}
[data-skin="sheet"] .meter-label{font-size:12px}
[data-skin="sheet"] .meter-cells{gap:2px}
[data-skin="sheet"] .meter-cells i{width:8px;height:12px;border-radius:0;border-color:var(--sh-cell)}
[data-skin="sheet"] .meter-cells i.on{background:var(--accent);border-color:var(--accent)}
[data-skin="sheet"] .meter.alarm .meter-cells i.on{background:var(--error);border-color:var(--error)}
[data-skin="sheet"] .meter-value{font:600 12px var(--f-num);min-width:3.2em}
[data-skin="sheet"] .slot-status{display:flex;align-items:center;gap:16px;padding:0 12px;background:var(--sh-status);border-top:1px solid var(--sh-line);font-size:12px;color:var(--muted);white-space:nowrap}
/* 평균·개수·합계는 숨김 화면 표의 선택 범위 값이라 숨김 중에만 보인다. 게임 화면에는 선택한 값 범위가 없다 */
[data-skin="sheet"] .sh-st{visibility:hidden}
[data-skin="sheet"] .app:has(.canvas.hiding) .sh-st{visibility:visible}
[data-skin="sheet"] .sh-zoom{display:flex;align-items:center;gap:8px;margin-left:8px}
[data-skin="sheet"] .sh-zbar{width:72px;height:2px;background:var(--sh-cell);position:relative}
[data-skin="sheet"] .sh-zbar::after{content:"";position:absolute;left:50%;top:-4px;width:2px;height:10px;background:var(--muted)}

/* ---------- 안내 글(토스트) ---------- */
[data-skin="sheet"] .toast{left:auto;right:14px;top:auto;bottom:12px;transform:none;padding:8px 14px;border-radius:3px;font:400 13px/1.3 var(--f-body);color:var(--sh-toast-ink);background:var(--sh-toast)}
[data-skin="sheet"] .toast.show{animation:sh-toast 1.3s ease forwards}
@keyframes sh-toast{0%{opacity:0}12%{opacity:1}80%{opacity:1}100%{opacity:0}}
@keyframes sh-clear{to{opacity:0}}

/* ---------- 시작·결과 화면: 대화 상자 ---------- */
[data-skin="sheet"] .canvas:has(.layer:not([hidden]))::after{content:"";position:absolute;inset:0;z-index:9;background:var(--sh-dim);pointer-events:none}
/* 숨김 화면(.hiding)에서는 안내판이 visibility 로만 감춰져 이 어둠 막이 그대로 남아 가짜 표를 덮었다(2026-11-09 시작 화면 Esc 실측). 같은 특이도로 뒤에서 끈다 */
[data-skin="sheet"] .canvas.hiding:has(.layer)::after{display:none}
[data-skin="sheet"] .layer{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:min(860px,calc(100% - 24px));max-height:calc(100% - 24px);gap:0;padding:0;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-content:start;background:var(--surface);color:var(--ink);border:1px solid var(--sh-cell);box-shadow:0 10px 30px rgba(0,0,0,.3)}
[data-skin="sheet"] .layer::before{grid-column:1 / -1;display:block;padding:0 14px;background:var(--sh-head);border-bottom:1px solid var(--sh-cell);font:600 13px/32px var(--f-body);color:var(--ink)}
[data-skin="sheet"] .layer-start::before{content:"입력 설정";content:"입력 설정" / ""}
[data-skin="sheet"] .layer-result::before{content:"처리 결과";content:"처리 결과" / ""}
[data-skin="sheet"] .layer-pause::before{content:"숨김";content:"숨김" / ""}
/* 한 칸짜리 열이 내용 길이(결과 칸 격자의 최대 폭)를 따라 대화 상자 밖으로 늘어나지 않게 폭을 묶는다 */
[data-skin="sheet"] .layer-main{grid-template-columns:minmax(0,1fr);gap:12px;padding:16px 20px 20px}
[data-skin="sheet"] .layer-title{font:600 17px/1.3 var(--f-body);letter-spacing:0}
[data-skin="sheet"] .layer-rule{margin:-4px 0 0;max-width:none;font-size:13px;line-height:1.55;color:var(--muted)}

/* 범례: 특수 값의 조건부 서식 설명 */
[data-skin="sheet"] .legend{gap:6px 18px;font-size:12.5px}
[data-skin="sheet"] .legend li > span{font:400 12.5px/1.4 var(--f-body);color:var(--muted)}

/* 설정 양식 */
[data-skin="sheet"] .start-form{gap:14px}
[data-skin="sheet"] .row{gap:14px 24px}
[data-skin="sheet"] .seg legend,[data-skin="sheet"] .name,[data-skin="sheet"] .custom label{font-size:12px;color:var(--muted)}
[data-skin="sheet"] .opts label{min-width:40px;padding:4px 10px;border:1px solid var(--sh-cell);border-radius:2px;background:var(--surface);font-weight:400;font-size:13px}
[data-skin="sheet"] .opts label:hover{border-color:var(--ink)}
[data-skin="sheet"] .opts input:checked + label{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
[data-skin="sheet"] .name input,[data-skin="sheet"] .custom textarea{border:1px solid var(--sh-cell);border-radius:2px;background:var(--surface);color:var(--ink);font-size:13px;padding:5px 8px}
/* 체크 상자의 이름표(b)는 보이는 채로 둔다. 보이지 않게 하면 체크 상자가 이름 없는 입력칸이 된다(axe label 위반 실측 2026-11-09) */
[data-skin="sheet"] .check b{font:600 13px/1.4 var(--f-body);color:var(--ink)}
[data-skin="sheet"] .check small{font:400 12px/1.4 var(--f-body);color:var(--muted)}
[data-skin="sheet"] .check input{accent-color:var(--accent)}
[data-skin="sheet"] .link{font-size:13px;color:var(--muted)}
[data-skin="sheet"] .link:hover{color:var(--accent)}
[data-skin="sheet"] .btn{border:1px solid var(--sh-cell);border-bottom-width:1px;border-radius:2px;background:var(--surface);color:var(--ink);padding:4px 12px;font-weight:400}
[data-skin="sheet"] .btn:hover:not(:disabled){border-color:var(--accent);background:var(--sh-hover)}
[data-skin="sheet"] .btn:active:not(:disabled){transform:none}
[data-skin="sheet"] .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);padding:6px 20px;font-size:13px;font-weight:600}
[data-skin="sheet"] .btn.primary:hover:not(:disabled){background:var(--accent);filter:brightness(1.12)}
[data-skin="sheet"] .btn.quiet{color:var(--muted)}
[data-skin="sheet"] kbd{border-radius:2px;font-size:11px}

/* 결과 */
[data-skin="sheet"] .final-score{font:700 34px/1 var(--f-num);letter-spacing:0}
[data-skin="sheet"] .final-unit{font-size:13px}
[data-skin="sheet"] .badge{border-radius:0;padding:3px 8px;font:600 12px/1.3 var(--f-body)}
[data-skin="sheet"] .results{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px 14px}
[data-skin="sheet"] .results dt{font-size:12px}
[data-skin="sheet"] .results dd{font:600 15px/1.3 var(--f-num)}
[data-skin="sheet"] .board{padding:16px 18px;border-left:1px solid var(--sh-cell);background:var(--surface-2);align-self:stretch}
[data-skin="sheet"] .board-title{font-size:13px}
[data-skin="sheet"] .board-list li{padding:5px 0;border-bottom:1px solid var(--sh-grid)}
[data-skin="sheet"] .board-list li.is-mine{background:var(--accent-soft);border-radius:0}
[data-skin="sheet"] .b-rank,[data-skin="sheet"] .b-score{font-family:var(--f-num)}
[data-skin="sheet"] .board-list li:nth-child(-n+3) .b-rank{color:var(--accent)}

/* ---------- 무대 요소: 칸 값 ---------- */
[data-skin="sheet"] .fx-dot,[data-skin="sheet"] .fx-ring,[data-skin="sheet"] .blast{display:none}
[data-skin="sheet"] .fx-float{padding:0 5px;font:600 12px/18px var(--f-num);color:var(--accent);background:var(--surface);border:1px solid var(--accent)}
[data-skin="sheet"] .fx-float.big{color:var(--gold);border-color:var(--gold)}
[data-skin="sheet"] .fx-float.bad{color:var(--error);border-color:var(--error)}
[data-skin="sheet"] .w{display:flex;align-items:center;box-sizing:border-box;height:var(--sh-rowh);min-width:var(--sh-colw);padding:0 6px;
  font:400 var(--word)/22px var(--f-word);color:var(--ink);background:var(--surface);border:1px solid var(--sh-cell);border-radius:0}
[data-skin="sheet"] .w > .w-tag{margin-right:6px}
[data-skin="sheet"] .w-hit{color:var(--accent);font-weight:700;text-decoration:none}
[data-skin="sheet"] .w-tag{font:700 10px/1 var(--f-body);padding:2px 4px;border-radius:2px;letter-spacing:0}
[data-skin="sheet"] .w.is-match{background:var(--sh-sel);border-color:var(--accent)}
[data-skin="sheet"] .w.is-target{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent), 0 0 0 1px var(--accent)}
[data-skin="sheet"] .w.is-target::after{content:"";position:absolute;right:-4px;bottom:-4px;width:6px;height:6px;background:var(--accent);border:1px solid var(--surface)}
[data-skin="sheet"] .w.is-locked{opacity:.55}
[data-skin="sheet"] .w[data-kind="gold"]{background:var(--gold-soft);border-color:var(--gold)}
[data-skin="sheet"] .w[data-kind="ice"]{background:var(--ice-soft);border-color:var(--ice)}
[data-skin="sheet"] .w[data-kind="heal"]{background:var(--heal-soft);border-color:var(--heal)}
[data-skin="sheet"] .w[data-kind="clear"]{background:var(--clear-soft);border-color:var(--clear)}
[data-skin="sheet"] .w[data-kind="bomb"]{background:var(--error-soft);border-color:var(--error)}
[data-skin="sheet"] .w[data-kind="boss"]{background:var(--error-soft);border-width:2px;border-color:var(--error);font-size:var(--word);font-weight:700}
[data-skin="sheet"] .w.is-match[data-kind]{border-color:var(--accent)}
[data-skin="sheet"] .w.is-pop,[data-skin="sheet"] .w.is-sink{animation:sh-clear .3s ease-out forwards}
[data-skin="sheet"] .ent.walker .w{border-bottom-width:1px}
[data-skin="sheet"] .ent.walker .w[data-kind="boss"]{border-bottom-width:2px}
[data-skin="sheet"] .ent.anchor .w{font-size:var(--word)}

/* 소나기: 아래쪽 행이 미처리 색으로 칠해진다 */
[data-skin="sheet"] .pond{background:var(--sh-pond);border-top:2px solid var(--error)}
[data-skin="sheet"] .pond::after{display:none}
[data-skin="sheet"] .brim{border-top:1px dashed var(--error)}
[data-skin="sheet"] .brim-label{right:10px;bottom:2px;padding:0 6px;background:var(--error-soft);color:var(--error);font:500 11px/16px var(--f-num)}

/* 레이싱: 차선은 행, 진행은 데이터 막대, 지문은 긴 선택 칸 */
[data-skin="sheet"] .track{padding:0}
[data-skin="sheet"] .lane{grid-template-columns:9em minmax(0,1fr) 4em;gap:0;height:48px;border-top:0;border-bottom:1px solid var(--sh-grid);background:var(--surface)}
[data-skin="sheet"] .lane:first-child{border-top:0}
[data-skin="sheet"] .lane-name{align-content:center;align-self:stretch;padding:0 10px;font-size:13px;border-right:1px solid var(--sh-grid)}
[data-skin="sheet"] .lane-name small{font-size:11px}
[data-skin="sheet"] .lane-road{display:none}
[data-skin="sheet"] .lane-bar{display:block;position:relative;align-self:stretch;height:auto;border-radius:0;background:transparent;border-right:1px solid var(--sh-grid)}
[data-skin="sheet"] .lane-bar-fill{position:absolute;left:0;top:10px;bottom:10px;height:auto;background:linear-gradient(90deg,var(--sh-bar2-a),var(--sh-bar2-b));border-right:2px solid var(--sh-bar2-b)}
[data-skin="sheet"] .lane[data-me] .lane-bar-fill{background:linear-gradient(90deg,var(--sh-bar1-a),var(--sh-bar1-b));border-right-color:var(--accent)}
[data-skin="sheet"] .lane-pct{align-self:center;padding:0 10px;font:600 12.5px var(--f-num);color:var(--ink)}
[data-skin="sheet"] .lane.is-done .lane-pct{color:var(--accent)}
[data-skin="sheet"] .passage{padding:8px 12px 10px;border:2px solid var(--accent);border-radius:0;background:var(--surface);font:400 15px/1.7 var(--f-body);gap:0 .4em}
[data-skin="sheet"] .pw{color:var(--ink)}
[data-skin="sheet"] .pw.is-done{color:var(--sh-done);opacity:1}
[data-skin="sheet"] .pw.is-current{background:var(--sh-sel);border-radius:0;box-shadow:0 0 0 1px var(--accent);color:var(--ink)}
[data-skin="sheet"] .pw.is-error{background:var(--error-soft);color:var(--error)}
[data-skin="sheet"] .pw-hit{color:var(--accent);font-weight:700;text-decoration:none}

/* 레이싱 미리보기(게임 고르기)에서는 막대 하나가 오간다 */
[data-skin="sheet"] .car{position:absolute;top:50%;width:48px;height:14px;margin-top:-7px;border-radius:0;background:linear-gradient(90deg,var(--sh-bar2-a),var(--sh-bar2-b));border-right:2px solid var(--sh-bar2-b)}
[data-skin="sheet"] .lane[data-me] .car{background:linear-gradient(90deg,var(--sh-bar1-a),var(--sh-bar1-b));border-right-color:var(--accent)}
[data-skin="sheet"] .car::before,[data-skin="sheet"] .car::after{display:none}

/* 대포: 성은 고정된 첫 열, 포신은 참조 추적 화살표, 포탄은 작은 점 */
[data-skin="sheet"] .ground{border-top:2px solid var(--ink);background:var(--sh-head)}
[data-skin="sheet"] .fort{width:var(--sh-colw);background:var(--sh-head);border:0;border-right:2px solid var(--ink)}
[data-skin="sheet"] .fort::before{display:none}
[data-skin="sheet"] .fort::after{content:"고정 열";content:"고정 열" / "";position:absolute;left:0;right:0;top:4px;text-align:center;font:400 11px/1.2 var(--f-body);color:var(--muted)}
[data-skin="sheet"] .fort[data-low="true"]{background:var(--error-soft);border-color:var(--error)}
[data-skin="sheet"] .cannon{width:10px;height:10px;margin:-5px 0 0 -5px;background:var(--sh-trace)}
[data-skin="sheet"] .barrel{width:54px;height:2px;margin-top:-1px;border-radius:0;background:var(--sh-trace)}
[data-skin="sheet"] .barrel::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:9px solid var(--sh-trace);border-right:0}
[data-skin="sheet"] .shell{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--sh-trace)}

/* 총알 피하기: 나는 선택된 칸, 총알은 오류 칸, 흔적은 화살표 선 */
[data-skin="sheet"] .arena{background:none}
[data-skin="sheet"] .player{width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:0;background:var(--sh-sel);border:2px solid var(--accent);box-shadow:none}
[data-skin="sheet"] .player::after{content:"";position:absolute;right:-5px;bottom:-5px;width:6px;height:6px;background:var(--accent);border:1px solid var(--surface)}
[data-skin="sheet"] .bullet{display:grid;place-items:center;width:38px;height:14px;margin:-7px 0 0 -19px;border-radius:0;background:var(--error-soft);border:1px solid var(--error);box-sizing:border-box;overflow:hidden}
[data-skin="sheet"] .bullet::after{content:"#N/A";font:700 9px/1 var(--f-num);color:var(--error);letter-spacing:0}
[data-skin="sheet"] .bullet[data-kind="ring"]::after{content:"#REF!"}
[data-skin="sheet"] .bullet[data-kind="rain"]::after{content:"#NAME?"}
[data-skin="sheet"] .bullet[data-kind="ring"],[data-skin="sheet"] .bullet[data-kind="rain"]{background:var(--error-soft)}
[data-skin="sheet"] .trail{height:2px;border:0;background:var(--sh-trace);transform-origin:0 50%;margin-top:-1px}
[data-skin="sheet"] .trail::after{content:"";position:absolute;right:0;top:-4px;border:5px solid transparent;border-left:9px solid var(--sh-trace);border-right:0}

/* ---------- 게임 고르기: 문서 목록 ---------- */
[data-skin="sheet"] .menu{padding:4px 12px;background:var(--surface)}
[data-skin="sheet"] .game-row{border-radius:0;border-bottom:1px solid var(--sh-grid);gap:12px 24px;padding:12px 8px}
[data-skin="sheet"] .game-row:hover,[data-skin="sheet"] .game-row:focus-visible{background:var(--sh-hover)}
[data-skin="sheet"] .gr-key{width:1.9em;height:1.9em;border-radius:2px;border-bottom-width:1px;font:600 14px var(--f-num)}
/* 목록 줄 설명(.gr-rule)은 base 의 max-width:40ch 를 풀어 한 줄로 둔다 */
[data-skin="sheet"] .gr-name{font:600 16px/1.35 var(--f-body);color:var(--ink)}
[data-skin="sheet"] .gr-rule{max-width:none;font:400 12.5px/1.4 var(--f-body);color:var(--muted)}
[data-skin="sheet"] .gr-preview{border-radius:0;border:1px solid var(--sh-cell);background-color:var(--surface);
  background-image:linear-gradient(to right, transparent 47px, var(--sh-grid) 47px), linear-gradient(to bottom, transparent 17px, var(--sh-grid) 17px);background-size:48px 100%, 100% 18px;background-repeat:repeat-x, repeat-y}
[data-skin="sheet"] .gr-preview .w{min-width:0;height:20px;font-size:12px;line-height:18px}
[data-skin="sheet"] .gr-preview .lane{display:block;height:24px;border:0;grid-template-columns:none}
[data-skin="sheet"] .gr-best b{font-size:18px}
[data-skin="sheet"] .gr-top{display:none}

/* ---------- 숨김 화면: 틀의 점수와 입력 내용 감추기 ----------
   무대 쪽은 틀이 감추고, 틀 쪽(요약 칸, 미처리 칸, 안내, 입력한 글자)은 여기서 자리와 띠 바탕은 그대로 두고 글만 보이지 않게 한다 */
[data-skin="sheet"] .app.is-hiding .stats > *,
[data-skin="sheet"] .app.is-hiding .meter > *{visibility:hidden}
[data-skin="sheet"] .app.is-hiding .hint{color:transparent}
[data-skin="sheet"] .app.is-hiding #typing{color:transparent}
[data-skin="sheet"] .app.is-hiding #typing::placeholder{color:transparent}

/* ---------- 숨김 화면: 거래처별 매출 집계 표 ---------- */
/* 숨김 화면은 눌러서 돌아가는 가짜 화면이라 스크롤하지 않는다(스크롤 영역에 포커스할 곳이 없다는 axe 위반을 피한다) */
[data-skin="sheet"] .boss{background:var(--surface);overflow:hidden}
[data-skin="sheet"] .sh-tbl{border-collapse:separate;border-spacing:0;table-layout:fixed;background:var(--surface);font:400 13px/22px var(--f-body);color:var(--ink)}
[data-skin="sheet"] .sh-tbl th,[data-skin="sheet"] .sh-tbl td{box-sizing:border-box;height:var(--sh-rowh);padding:0 6px;border-right:1px solid var(--sh-grid);border-bottom:1px solid var(--sh-grid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-skin="sheet"] .sh-tbl thead th{position:sticky;top:0;z-index:2;background:var(--sh-head);color:var(--sh-head-ink);font-weight:400;font-size:12px;text-align:center;border-color:var(--sh-cell)}
[data-skin="sheet"] .sh-tbl tbody th{position:sticky;left:0;z-index:1;background:var(--sh-head);color:var(--sh-head-ink);font-weight:400;font-size:12px;text-align:center;border-color:var(--sh-cell)}
/* 왼쪽 위 모서리 칸의 글자는 이름표로만 남기고 보이지 않게 한다(빈 표 머리글 axe 위반을 피한다) */
[data-skin="sheet"] .sh-tbl .corner{font-size:0}
[data-skin="sheet"] .sh-tbl .n{text-align:right;font-variant-numeric:tabular-nums}
[data-skin="sheet"] .sh-tbl .b{font-weight:700}
[data-skin="sheet"] .sh-tbl .t{font-size:16px}
[data-skin="sheet"] .sh-tbl .mu{color:var(--muted)}
[data-skin="sheet"] .sh-tbl .sp{overflow:visible;text-overflow:clip}
[data-skin="sheet"] .sh-tbl .h{background:var(--accent-soft);font-weight:700;border-bottom:2px solid var(--accent)}
[data-skin="sheet"] .sh-tbl .tot{font-weight:700;border-top:2px solid var(--ink);background:var(--surface-2)}
[data-skin="sheet"] .sh-tbl .sel-r{background:var(--sh-sel)}
[data-skin="sheet"] .sh-tbl .sel{outline:2px solid var(--accent);outline-offset:-2px}
/* 선택한 범위의 열 머리글과 줄 번호는 진하게(상태 표시줄의 평균·개수·합계가 이 범위의 값이다) */
[data-skin="sheet"] .sh-tbl thead th.on,[data-skin="sheet"] .sh-tbl tbody th.on{background:var(--sh-head-on);color:var(--ink);font-weight:700}
[data-skin="sheet"] .sh-tbl thead th.on{border-bottom:2px solid var(--accent)}

/* ---------- 좁은 화면 ---------- */
@media (max-width: 900px){
  [data-skin="sheet"] .slot-menubar{display:none}
}
@media (max-width: 640px){
  [data-skin="sheet"] .top{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:34px auto;grid-template-areas:"back title tools" "stats stats stats"}
  [data-skin="sheet"] .slot-toolbar{display:none}
  [data-skin="sheet"] .back{margin-left:4px;padding:0 2px 0 6px;font-size:12.5px}
  [data-skin="sheet"] .brand-h{padding:0 6px 0 4px}
  [data-skin="sheet"] .brand-game{max-width:112px}
  [data-skin="sheet"] .tools{padding:0 8px;gap:6px}
  [data-skin="sheet"] .stats{order:0;width:auto;justify-content:stretch;gap:0;padding:4px 8px}
  [data-skin="sheet"] .stat{flex:1 1 0;min-width:0}
  [data-skin="sheet"] .stat dt{padding:0 2px;font-size:10px}
  [data-skin="sheet"] .stat dd{padding:0 4px;font-size:12px}
  [data-skin="sheet"] .sh-name{width:56px;margin:0 6px;padding:0 6px}
  [data-skin="sheet"] .sh-fx{padding:0 8px 0 8px}
  [data-skin="sheet"] .sh-st{display:none}
  [data-skin="sheet"] .sh-zoom{margin-left:0}
  [data-skin="sheet"] .hint,[data-skin="sheet"] .launcher-note{padding:0 8px}
  [data-skin="sheet"] .lane{grid-template-columns:5.6em minmax(0,1fr) 3.2em}
  [data-skin="sheet"] .lane-name{padding:0 6px}
  [data-skin="sheet"] .lane-pct{padding:0 6px}
  [data-skin="sheet"] .fort{width:64px}
  [data-skin="sheet"] .layer{grid-template-columns:minmax(0,1fr)}
  [data-skin="sheet"] .layer-main{padding:14px 14px 16px}
  [data-skin="sheet"] .board{border-left:0;border-top:1px solid var(--sh-cell);padding:14px}
  [data-skin="sheet"] .game-row{grid-template-columns:auto minmax(0,1fr)}
}
@media (max-height: 700px){
  [data-skin="sheet"] .lane{height:40px}
  [data-skin="sheet"] .lane-bar-fill{top:7px;bottom:7px}
}
@media (max-height: 600px){
  [data-skin="sheet"] .lane{height:34px}
  [data-skin="sheet"] .lane-bar-fill{top:5px;bottom:5px}
}
@media (prefers-reduced-motion: reduce){
  [data-skin="sheet"] .toast.show{animation:fade 1.2s forwards}
  [data-skin="sheet"] .w.is-pop,[data-skin="sheet"] .w.is-sink{animation-duration:.01s}
}