/* 문서 업무 테마(id: doc).
   게임 요소를 문서 편집기의 부품으로 다시 칠한다: 회색 바탕 위 흰 종이, 눈금자, 서식 도구줄, 찾기 줄, 상태 표시줄.
   모든 규칙은 [data-skin="doc"] 아래에만 둔다(다른 테마로 새지 않게).

   무대(.stage)가 종이다: 종이 폭(--dc-pagew)에 맞춰 가운데에 놓고 위만 14px 띄워, 스크롤하다 만 문서처럼 아래로 이어 보이게 한다.
   눈금자(slot-ruler)의 종이 폭 계산식도 같다. 둘 중 하나를 고치면 다른 쪽도 고쳐야 눈금과 종이가 맞는다.

   화면의 모든 글(게임 이름, 규칙, 범례, 순위표 문구 등)은 틀이 용어 키로 꺼내므로 doc.js 의 terms 에서 바꾼다.
   여기서는 글을 숨기거나 content 로 덧씌우지 않고, 나온 글에 모양만 입힌다. */
/* 본문 글꼴은 저장소 안 파일(assets/fonts)에서 받는다. 파일이 없거나 늦으면 --f-doc 의 대체 글꼴(바탕, 명조 계열)로 먼저 그린다 */
@font-face{font-family:"Nanum Myeongjo";src:url("../fonts/nanum-myeongjo-400.woff2") format("woff2");font-weight:400;font-display:swap}

[data-skin="doc"]{
  --bg:#e3e3e3; --surface:#ffffff; --surface-2:#f4f4f4;
  --ink:#1b1b1b; --muted:#585858; --line:#d6d6d6; --line-strong:#a8a8a8;
  --accent:#2556a8; --accent-ink:#ffffff; --accent-soft:#dbe7f8;
  --error:#b3261e; --error-soft:#fde8e6;
  --gold:#8a5a00; --gold-soft:#ffe3b0;
  --ice:#0b6b88; --ice-soft:#dff3f8;
  --heal:#2e6b2a; --heal-soft:#e3f4dd;
  --clear:#a02a78; --clear-soft:#fbe4f3;
  --lane-1:#2556a8; --lane-2:#6b8fd0; --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-doc:"Nanum Myeongjo","Batang","바탕","AppleMyungjo","Noto Serif KR",serif;
  --f-display:var(--f-body); --f-word:var(--f-doc); --f-num:var(--f-body);
  --word:16px; --radius:3px;
  /* 문서 전용 값 */
  --dc-chrome:#f3f3f3; --dc-ribbon:#fafafa; --dc-canvas:#e3e3e3; --dc-paper:#ffffff; --dc-line:#d2d2d2; --dc-status:#f3f3f3; --dc-hover:#e4e4e4;
  --dc-hl:#fff176; --dc-hl-ink:#111111; --dc-sel:#b9d6fa; --dc-sel-ink:#111111; --dc-guide:#b5b5b5; --dc-guide-ink:#6a6a6a; --dc-done:#666666;
  --dc-foot:#f6f6f1; --dc-ghost:#d6d6d6; --dc-bar2:#7d9bd1; --dc-dim:rgba(0,0,0,.2);
  --dc-k-gold:#ffd27d; --dc-k-ice:#a8e6f0; --dc-k-heal:#b5e8a8; --dc-k-clear:#f5b8e0; --dc-k-bomb:#f4aaa2;
  --dc-toast:#323232; --dc-toast-ink:#ffffff;
  --dc-margin:72px; --dc-pagew:794px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  [data-skin="doc"]{
    --bg:#2f2f2f; --surface:#1d1d1d; --surface-2:#262626;
    --ink:#e8e8e8; --muted:#aaaaaa; --line:#3a3a3a; --line-strong:#6b6b6b;
    --accent:#7fb0f5; --accent-ink:#06142b; --accent-soft:#1f3350;
    --error:#ff8f86; --error-soft:#4a2421;
    --gold:#f2c75a; --gold-soft:#463a10;
    --ice:#6cc6e0; --ice-soft:#173a47;
    --heal:#7fd78b; --heal-soft:#1f3a24;
    --clear:#e59ac8; --clear-soft:#43203a;
    --lane-1:#7fb0f5; --lane-2:#5a7fb8; --lane-3:#ff8f86; --lane-4:#f2a65a;
    --scrim:rgba(0,0,0,.4); --focus:#7db7ff;
    --dc-chrome:#2b2b2b; --dc-ribbon:#323232; --dc-canvas:#333333; --dc-paper:#1d1d1d; --dc-line:#444444; --dc-status:#2b2b2b; --dc-hover:#3d3d3d;
    --dc-hl:#fff176; --dc-hl-ink:#111111; --dc-sel:#2f5fae; --dc-sel-ink:#ffffff; --dc-guide:#5e5e5e; --dc-guide-ink:#9a9a9a; --dc-done:#9a9a9a;
    --dc-foot:#242424; --dc-ghost:#3c3c3c; --dc-bar2:#4a6a9e; --dc-dim:rgba(0,0,0,.45);
    --dc-toast:#e8e8e8; --dc-toast-ink:#1d1d1d;
    color-scheme:dark;
  }
}

/* ---------- 틀: 창 전체를 쓴다 ----------
   위 머리(제목과 탭, 서식 도구줄과 글자 수 띠) / 찾기 줄 / 눈금자와 종이 / 아래 상태 표시줄.
   .dock 을 display:contents 로 풀어 입력줄은 위로, 안내·눈금·상태는 맨 아래 한 줄로 올린다 */
[data-skin="doc"] body{font:400 13px/1.4 var(--f-body);background:var(--bg);color:var(--ink)}
[data-skin="doc"] .app{max-width:none;padding:0;gap:0;background:var(--dc-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="doc"] .top{grid-area:head;display:grid;gap:0;background:var(--dc-chrome);
  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="doc"] .top-row{display:contents}
/* 글자 수 띠가 없는 화면(게임 고르기)은 도구줄이 오른쪽 끝까지 이어진다 */
[data-skin="doc"] .top:not(:has(.stats)) .slot-toolbar{grid-column:1 / -1}
[data-skin="doc"] .work{grid-area:work;gap:0}
[data-skin="doc"] .dock{display:contents}
[data-skin="doc"] .entry{grid-area:entry}
[data-skin="doc"] .hint{grid-area:hint}
[data-skin="doc"] .meter{grid-area:meter}
[data-skin="doc"] .slot-status{grid-area:status}
[data-skin="doc"] .launcher-note{grid-area:hint}

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

/* ---------- 서식 도구줄과 글자 수 띠 ---------- */
[data-skin="doc"] .slot-toolbar{grid-area:ribbon;display:flex;align-items:center;gap:2px;min-width:0;overflow:hidden;padding:0 8px;background:var(--dc-ribbon);border-top:1px solid var(--dc-line);border-bottom:1px solid var(--dc-line)}
[data-skin="doc"] .dc-sep{flex:none;width:1px;height:20px;margin:0 6px;background:var(--dc-line)}
[data-skin="doc"] .dc-box{flex:none;display:inline-flex;align-items:center;justify-content:space-between;gap:6px;height:26px;padding:0 8px;border:1px solid var(--dc-line);border-radius:3px;background:var(--surface);font-size:12.5px;white-space:nowrap}
[data-skin="doc"] .dc-box::after{content:"";width:0;height:0;border:4px solid transparent;border-top-color:currentColor;margin-top:4px}
[data-skin="doc"] .dc-box.w44{width:52px} [data-skin="doc"] .dc-box.w84{width:84px} [data-skin="doc"] .dc-box.w96{width:106px}
[data-skin="doc"] .dc-btn{flex:none;display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 4px;border-radius:3px;font:600 14px/1 var(--f-body)}
[data-skin="doc"] .dc-btn.b{font-weight:800}
[data-skin="doc"] .dc-btn.i{font-style:italic;font-family:var(--f-doc)}
[data-skin="doc"] .dc-btn.u{text-decoration:underline;text-underline-offset:3px}
[data-skin="doc"] .dc-btn.s{text-decoration:line-through}
/* 글자 색 단추: 글자 밑에 글자보다 좁은 색 막대 */
[data-skin="doc"] .dc-btn.fc{background:linear-gradient(var(--error),var(--error)) 50% calc(100% - 2px)/14px 3px no-repeat;height:24px;border-radius:0}
[data-skin="doc"] .dc-btn.hl{background:linear-gradient(var(--dc-hl),var(--dc-hl)) 4px 4px/18px 18px no-repeat;color:var(--dc-hl-ink)}
[data-skin="doc"] .dc-ico{flex:none;width:26px;height:26px;position:relative}
[data-skin="doc"] .dc-ico::before{content:"";position:absolute;left:6px;top:6px;width:14px;height:14px}
[data-skin="doc"] .dc-ico.ul::before{background:linear-gradient(currentColor,currentColor) 0 1px/3px 2px no-repeat, linear-gradient(currentColor,currentColor) 5px 1px/9px 2px no-repeat, linear-gradient(currentColor,currentColor) 0 6px/3px 2px no-repeat, linear-gradient(currentColor,currentColor) 5px 6px/9px 2px no-repeat, linear-gradient(currentColor,currentColor) 0 11px/3px 2px no-repeat, linear-gradient(currentColor,currentColor) 5px 11px/9px 2px no-repeat}
[data-skin="doc"] .dc-ico.ol::before{background:linear-gradient(currentColor,currentColor) 0 0/3px 3px no-repeat, linear-gradient(currentColor,currentColor) 5px 1px/9px 2px no-repeat, linear-gradient(currentColor,currentColor) 0 5px/3px 3px no-repeat, linear-gradient(currentColor,currentColor) 5px 6px/9px 2px no-repeat, linear-gradient(currentColor,currentColor) 0 10px/3px 3px no-repeat, linear-gradient(currentColor,currentColor) 5px 11px/9px 2px no-repeat;opacity:.9}
[data-skin="doc"] .dc-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="doc"] .dc-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="doc"] .dc-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="doc"] .dc-ico.al-j::before{background:linear-gradient(currentColor,currentColor) 0 1px/14px 2px no-repeat, linear-gradient(currentColor,currentColor) 0 5px/14px 2px no-repeat, linear-gradient(currentColor,currentColor) 0 9px/14px 2px no-repeat, linear-gradient(currentColor,currentColor) 0 13px/14px 1px no-repeat}

/* 점수줄은 글자 수 띠(단어 수 계수기)가 된다: 이름 옆에 값 */
[data-skin="doc"] .stats{grid-area:stats;display:flex;flex-wrap:nowrap;gap:0;justify-content:flex-end;align-items:center;margin:0;padding:0 12px 0 8px;background:var(--dc-ribbon);border-top:1px solid var(--dc-line);border-bottom:1px solid var(--dc-line)}
[data-skin="doc"] .stat{display:flex;align-items:baseline;gap:6px;min-width:0;padding:0 10px;border-left:1px solid var(--dc-line)}
[data-skin="doc"] .stat:first-child{border-left:0}
[data-skin="doc"] .stat dt{font-size:12px;white-space:nowrap;color:var(--muted)}
[data-skin="doc"] .stat dd{position:relative;font:700 13px/1.4 var(--f-body);font-variant-numeric:tabular-nums}
[data-skin="doc"] .lv{display:none}

/* ---------- 찾기 줄 ---------- */
[data-skin="doc"] .entry{gap:8px;height:38px;padding:0 12px;border:0;border-bottom:1px solid var(--dc-line);border-radius:0;background:var(--dc-chrome)}
[data-skin="doc"] .entry:focus-within{border-color:var(--accent)}
[data-skin="doc"] .entry:has(#typing.nomatch){border-color:var(--error)}
[data-skin="doc"] .slot-prompt{display:flex;align-items:center;gap:6px;flex:none}
[data-skin="doc"] .dc-mag{position:relative;display:block;width:11px;height:11px;margin:0 3px 3px 0;border:2px solid var(--muted);border-radius:50%}
[data-skin="doc"] .dc-mag::after{content:"";position:absolute;left:8px;top:8px;width:6px;height:2px;background:var(--muted);transform:rotate(45deg);transform-origin:0 50%}
[data-skin="doc"] .dc-find{font-size:13px;color:var(--ink)}
[data-skin="doc"] #typing{flex:0 1 420px;height:26px;padding:0 10px;border:1px solid var(--line-strong);border-radius:3px;background:var(--surface);font:400 13px/1.2 var(--f-body);color:var(--ink)}
[data-skin="doc"] #typing:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
[data-skin="doc"] #typing.nomatch{color:var(--error);border-color:var(--error);box-shadow:0 0 0 1px var(--error)}
[data-skin="doc"] #typing::placeholder{color:var(--muted)}
[data-skin="doc"] .entry::after{content:"다음";content:"다음" / "";flex:none;padding:3px 14px;border:1px solid var(--line-strong);border-radius:3px;background:var(--surface);font-size:12.5px;color:var(--ink)}
[data-skin="doc"] .entry-key{display:none}

/* ---------- 눈금자와 종이 ---------- */
[data-skin="doc"] .slot-ruler:empty{display:none}
[data-skin="doc"] .slot-ruler{height:24px;display:flex;justify-content:center;background:var(--dc-canvas);border-bottom:1px solid var(--dc-line)}
[data-skin="doc"] .dc-ruler{width:100%;display:flex;justify-content:center}
[data-skin="doc"] .dc-ruler-page{position:relative;width:min(var(--dc-pagew), calc(100% - 32px));height:18px;margin-top:3px;overflow:hidden;
  background:
    repeating-linear-gradient(90deg, var(--dc-guide-ink) 0 1px, transparent 1px 37.8px) var(--dc-margin) 100% / calc(100% - var(--dc-margin) * 2) 7px no-repeat,
    repeating-linear-gradient(90deg, var(--dc-guide) 0 1px, transparent 1px 18.9px) var(--dc-margin) 100% / calc(100% - var(--dc-margin) * 2) 4px no-repeat,
    linear-gradient(90deg, var(--dc-guide) 0 var(--dc-margin), var(--dc-paper) var(--dc-margin) calc(100% - var(--dc-margin)), var(--dc-guide) calc(100% - var(--dc-margin)))}
[data-skin="doc"] .dc-rn{position:absolute;top:1px;font:400 9px/1 var(--f-body);color:var(--dc-guide-ink)}
[data-skin="doc"] .dc-indent{position:absolute;left:calc(var(--dc-margin) - 4px);top:1px;border:4px solid transparent;border-top:5px solid var(--dc-guide-ink);border-bottom:0}
[data-skin="doc"] .dc-indent.r{left:auto;right:calc(var(--dc-margin) - 4px)}
[data-skin="doc"] .canvas{border:0;border-radius:0;background:var(--dc-canvas)}
[data-skin="doc"] .stage{inset:14px max(16px, calc((100% - var(--dc-pagew)) / 2)) 0;cursor:text;background:var(--dc-paper);box-shadow:0 0 0 1px var(--dc-line), 0 2px 10px rgba(0,0,0,.18)}
[data-skin="doc"] .stage.frozen{background:linear-gradient(var(--ice-soft),var(--ice-soft)), var(--dc-paper)}
[data-skin="doc"] .stage.frozen .w{border-color:transparent}
/* 종이의 머리글과 본문 영역 모서리 표시(여백 안내선). 단어보다 아래에 깔린다.
   머리글 글자는 doc.js 가 무대의 --dc-head 로 준다(문서 이름과 오늘 날짜로 만든 글이라 CSS 에 박아 두지 않는다) */
[data-skin="doc"] .stage::before{content:var(--dc-head, "");position:absolute;inset:0;padding:22px var(--dc-margin) 0;font:400 10.5px/1 var(--f-body);letter-spacing:.02em;color:var(--dc-guide-ink);pointer-events:none;
  background:
    linear-gradient(var(--dc-guide),var(--dc-guide)) calc(var(--dc-margin) - 10px) 56px / 10px 1px no-repeat,
    linear-gradient(var(--dc-guide),var(--dc-guide)) var(--dc-margin) 46px / 1px 10px no-repeat,
    linear-gradient(var(--dc-guide),var(--dc-guide)) calc(100% - var(--dc-margin)) 56px / 10px 1px no-repeat,
    linear-gradient(var(--dc-guide),var(--dc-guide)) calc(100% - var(--dc-margin)) 46px / 1px 10px no-repeat}
[data-skin="doc"] .dc-vscroll{right:0;top:0;bottom:0;width:14px;background:linear-gradient(var(--dc-guide),var(--dc-guide)) 3px 18px / 8px 130px no-repeat, color-mix(in srgb, var(--dc-chrome) 70%, transparent);border-left:1px solid var(--dc-line)}

/* 아래 한 줄: 안내, 눈금, 상태 */
[data-skin="doc"] .hint,[data-skin="doc"] .launcher-note{display:flex;align-items:center;gap:10px;min-width:0;min-height:24px;margin:0;padding:0 12px;background:var(--dc-status);border-top:1px solid var(--dc-line);font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-skin="doc"] .hint:empty::before{content:"편집 중";content:"편집 중" / ""}
[data-skin="doc"] .hint.warn{color:var(--error)}
[data-skin="doc"] .meter{align-self:stretch;gap:8px;padding:0 12px;background:var(--dc-status);border-top:1px solid var(--dc-line)}
[data-skin="doc"] .meter-label{font-size:12px}
[data-skin="doc"] .meter-cells{gap:2px}
[data-skin="doc"] .meter-cells i{width:8px;height:12px;border-radius:1px;border-color:var(--dc-guide)}
[data-skin="doc"] .meter-cells i.on{background:var(--accent);border-color:var(--accent)}
[data-skin="doc"] .meter.alarm .meter-cells i.on{background:var(--error);border-color:var(--error)}
[data-skin="doc"] .meter-value{font:600 12px var(--f-body);min-width:3.2em}
[data-skin="doc"] .slot-status{display:flex;align-items:center;gap:16px;padding:0 12px;background:var(--dc-status);border-top:1px solid var(--dc-line);font-size:12px;color:var(--muted);white-space:nowrap}
[data-skin="doc"] .dc-zoom{display:flex;align-items:center;gap:8px;margin-left:8px}
[data-skin="doc"] .dc-zbar{width:72px;height:2px;background:var(--dc-guide);position:relative}
[data-skin="doc"] .dc-zbar::after{content:"";position:absolute;left:50%;top:-4px;width:2px;height:10px;background:var(--muted)}

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

/* ---------- 시작·결과 화면: 대화 상자 ---------- */
[data-skin="doc"] .canvas:has(.layer:not([hidden]))::after{content:"";position:absolute;inset:0;z-index:9;background:var(--dc-dim);pointer-events:none}
/* 숨김 화면(.hiding)에서는 안내판이 visibility 로만 감춰져 이 어둠 막이 그대로 남아 가짜 문서를 덮었다(2026-11-09 시작 화면 Esc 실측). 같은 특이도로 뒤에서 끈다 */
[data-skin="doc"] .canvas.hiding:has(.layer)::after{display:none}
[data-skin="doc"] .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(--dc-guide);border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
[data-skin="doc"] .layer::before{grid-column:1 / -1;display:block;padding:0 16px;background:var(--dc-chrome);border-bottom:1px solid var(--dc-line);border-radius:6px 6px 0 0;font:600 13px/34px var(--f-body);color:var(--ink)}
[data-skin="doc"] .layer-start::before{content:"작성 설정";content:"작성 설정" / ""}
[data-skin="doc"] .layer-result::before{content:"작성 결과";content:"작성 결과" / ""}
[data-skin="doc"] .layer-pause::before{content:"숨김";content:"숨김" / ""}
/* 한 칸짜리 열이 내용 길이(결과 칸 격자의 최대 폭)를 따라 대화 상자 밖으로 늘어나지 않게 폭을 묶는다 */
[data-skin="doc"] .layer-main{grid-template-columns:minmax(0,1fr);gap:12px;padding:16px 20px 20px}
[data-skin="doc"] .layer-title{font:700 18px/1.3 var(--f-doc);letter-spacing:0}
[data-skin="doc"] .layer-rule{margin:-4px 0 0;max-width:none;font-size:13px;line-height:1.55;color:var(--muted)}

/* 범례: 특수 단어(형광펜·메모)의 설명 */
[data-skin="doc"] .legend{gap:6px 18px;font-size:12.5px}
[data-skin="doc"] .legend li > span{font:400 12.5px/1.4 var(--f-body);color:var(--muted)}

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

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

/* ---------- 무대 요소: 본문 글자 ---------- */
[data-skin="doc"] .fx-dot,[data-skin="doc"] .fx-ring,[data-skin="doc"] .blast{display:none}
[data-skin="doc"] .fx-float{padding:0 5px;font:600 12px/18px var(--f-body);color:var(--accent);background:var(--surface);border:1px solid var(--accent);border-radius:2px}
[data-skin="doc"] .fx-float.big{color:var(--gold);border-color:var(--gold)}
[data-skin="doc"] .fx-float.bad{color:var(--error);border-color:var(--error)}
[data-skin="doc"] .w{display:flex;align-items:center;box-sizing:border-box;height:28px;padding:0 3px;font:400 var(--word)/28px var(--f-word);color:var(--ink);background:transparent;border:0;border-radius:2px}
[data-skin="doc"] .w > .w-tag{margin-right:5px}
[data-skin="doc"] .w-hit{color:inherit;font-weight:700;text-decoration:none}
[data-skin="doc"] .w-tag{font:700 10px/1 var(--f-body);padding:2px 5px;border-radius:2px;letter-spacing:0}
[data-skin="doc"] .w.is-match{background:var(--dc-hl);color:var(--dc-hl-ink)}
[data-skin="doc"] .w.is-target{background:var(--dc-sel);color:var(--dc-sel-ink)}
[data-skin="doc"] .w.is-target::after{content:"";position:absolute;right:-1px;top:4px;bottom:4px;width:2px;background:var(--ink);animation:dc-caret 1s steps(1) infinite}
[data-skin="doc"] .w.is-locked{opacity:.55}
[data-skin="doc"] .w[data-kind="gold"]{background:var(--dc-k-gold);color:#111}
[data-skin="doc"] .w[data-kind="ice"]{background:var(--dc-k-ice);color:#111}
[data-skin="doc"] .w[data-kind="heal"]{background:var(--dc-k-heal);color:#111}
[data-skin="doc"] .w[data-kind="clear"]{background:var(--dc-k-clear);color:#111}
[data-skin="doc"] .w[data-kind="bomb"]{background:var(--dc-k-bomb);color:#111}
[data-skin="doc"] .w[data-kind="boss"]{background:var(--surface);border:1.5px solid var(--error);border-radius:4px;padding:0 8px;font-size:var(--word);font-weight:700}
/* 특수 단어는 형광펜 색을 지키려고 앞부분 일치와 목표를 테두리 고리로 알린다(normal 은 제외) */
/* 교정 요청(boss)은 바탕이 종이색이라 앞부분 일치와 목표에서 형광펜·선택 색을 따로 받는다(그대로 두면 어두운 화면에서 검은 글자가 어두운 바탕에 묻힌다) */
[data-skin="doc"] .w[data-kind="boss"].is-match{background:var(--dc-hl);color:var(--dc-hl-ink)}
[data-skin="doc"] .w[data-kind="boss"].is-target{background:var(--dc-sel);color:var(--dc-sel-ink)}
[data-skin="doc"] .w.is-match[data-kind]:not([data-kind="normal"]),[data-skin="doc"] .w.is-target[data-kind]:not([data-kind="normal"]){box-shadow:0 0 0 2px var(--accent)}
[data-skin="doc"] .w.is-pop,[data-skin="doc"] .w.is-sink{animation:dc-clear .3s ease-out forwards}
[data-skin="doc"] .ent.walker .w{border-bottom-width:0}
[data-skin="doc"] .ent.walker .w[data-kind="boss"]{border-bottom-width:1.5px}
[data-skin="doc"] .ent.anchor .w{font-size:var(--word)}

/* 소나기: 아래 각주 영역이 위로 올라온다 */
[data-skin="doc"] .pond{background:var(--dc-foot);border-top:1px solid var(--dc-guide)}
[data-skin="doc"] .pond::before{content:"";position:absolute;left:var(--dc-margin);top:10px;width:132px;border-top:1px solid var(--ink)}
[data-skin="doc"] .pond::after{inset:24px var(--dc-margin) 0;background:repeating-linear-gradient(to bottom, transparent 0 8px, var(--dc-ghost) 8px 10px, transparent 10px 18px)}
[data-skin="doc"] .brim{border-top:1px dashed var(--dc-guide-ink)}
[data-skin="doc"] .brim-label{right:10px;bottom:2px;padding:0 6px;background:var(--surface);color:var(--dc-guide-ink);font:400 11px/16px var(--f-body)}

/* 레이싱: 진행 현황 표, 지문은 본문 단락.

   표는 머리줄(.dc-thead, doc.js 가 무대 위에 얹는 장식)과 차선 네 줄로 이루어진다. 차선 높이는 레이싱이 정한 --lane-h 를 따라
   종이 높이를 채우고, 지문은 표 바로 아래 본문 단락으로 이어진다(2026-11-09 디자인 검토: 표와 지문 사이가 비어 어색했음).
   그래서 무대를 세로 흐름으로 바꿔 표 아래에 지문을 붙인다. 행이 높아져도 표 안 글은 가운데 맞춤, 진행 막대는 행 높이에 비례해 굵어진다. */
[data-skin="doc"]{--dc-table-top:64px;--dc-thead-h:30px;--dc-lane-cols:8em minmax(0,1fr) 4em}
[data-skin="doc"] .stage[data-game="racing"]{display:flex;flex-direction:column}
/* 머리글(22px)과 본문 영역 모서리 표시(56px) 아래에서 표가 시작한다. 표 머리줄 높이만큼 더 내려서 차선을 놓는다 */
[data-skin="doc"] .track{position:relative;flex:none;padding:calc(var(--dc-table-top) + var(--dc-thead-h)) var(--dc-margin) 0}
[data-skin="doc"] .lane{grid-template-columns:var(--dc-lane-cols);gap:0;height:var(--lane-h, 40px);border:1px solid var(--dc-guide);border-top:0;background:transparent}
[data-skin="doc"] .lane:first-child{border-top:0}
[data-skin="doc"] .lane-name{align-content:center;align-self:stretch;padding:0 10px;font-size:13px;border-right:1px solid var(--dc-guide)}
[data-skin="doc"] .lane-name small{font-size:11px}
[data-skin="doc"] .lane-road{display:none}
[data-skin="doc"] .lane-bar{display:block;align-self:center;height:clamp(8px, calc(var(--lane-h, 40px) * .2), 18px);margin:0 12px;border-radius:4px;background:var(--dc-line)}
[data-skin="doc"] .lane-bar-fill{background:var(--dc-bar2);border-radius:4px}
[data-skin="doc"] .lane[data-me] .lane-bar-fill{background:var(--accent)}
[data-skin="doc"] .lane-pct{align-self:stretch;display:flex;align-items:center;justify-content:flex-end;padding:0 10px;font:600 12.5px var(--f-body);color:var(--ink);border-left:1px solid var(--dc-guide)}
[data-skin="doc"] .lane.is-done .lane-pct{color:var(--accent)}
/* 표 머리줄: 차선과 같은 칸 비율(--dc-lane-cols)과 같은 좌우 여백으로 무대의 종이 위에 겹쳐 놓는다 */
[data-skin="doc"] .dc-thead{left:max(16px, calc((100% - var(--dc-pagew)) / 2));right:max(16px, calc((100% - var(--dc-pagew)) / 2));top:calc(14px + var(--dc-table-top));height:var(--dc-thead-h);padding:0 var(--dc-margin);font-size:13px}
[data-skin="doc"] .dc-thead-row{display:grid;grid-template-columns:var(--dc-lane-cols);height:100%;border:1px solid var(--dc-guide);background:var(--surface-2);font:700 12.5px/1 var(--f-body);color:var(--ink)}
[data-skin="doc"] .dc-thead-row span{display:flex;align-items:center;padding:0 10px;min-width:0;white-space:nowrap;overflow:hidden}
[data-skin="doc"] .dc-thead-row span:first-child{border-right:1px solid var(--dc-guide)}
[data-skin="doc"] .dc-thead-row span:last-child{justify-content:flex-end;border-left:1px solid var(--dc-guide)}
/* 지문은 표 바로 아래 본문 단락이다. 무대가 세로 흐름이라 절대 위치를 풀고 좌우 여백만 남긴다 */
[data-skin="doc"] .passage{position:relative;flex:none;left:auto;right:auto;bottom:auto;margin:0 var(--dc-margin);padding:16px 0 26px;border:0;background:transparent;font:400 16px/1.9 var(--f-doc);gap:0 .4em}
[data-skin="doc"] .pw{color:var(--ink)}
[data-skin="doc"] .pw.is-done{color:var(--dc-done);opacity:1}
[data-skin="doc"] .pw.is-current{background:var(--dc-sel);color:var(--dc-sel-ink);border-radius:2px}
[data-skin="doc"] .pw.is-error{background:transparent;color:var(--ink);text-decoration:underline wavy var(--error);text-underline-offset:4px}
[data-skin="doc"] .pw-hit{color:inherit;font-weight:700;text-decoration:none}

/* 게임 고르기 미리보기: 막대 하나가 오간다 */
[data-skin="doc"] .car{position:absolute;top:50%;width:48px;height:8px;margin-top:-4px;border-radius:4px;background:var(--dc-bar2)}
[data-skin="doc"] .lane[data-me] .car{background:var(--accent)}
[data-skin="doc"] .car::before,[data-skin="doc"] .car::after{display:none}

/* 대포: 왼쪽 여백의 포인터가 단어를 가리키고, 포탄은 커서 표시 */
[data-skin="doc"] .ground{border-top:1px solid var(--dc-guide);background:transparent}
[data-skin="doc"] .ground::after{content:"- 2 -";position:absolute;left:0;right:0;bottom:8px;text-align:center;font:400 11px/1 var(--f-body);color:var(--dc-guide-ink)}
[data-skin="doc"] .fort{width:var(--dc-margin);overflow:hidden;background:var(--surface-2);border:0;border-right:1px dashed var(--dc-guide)}
[data-skin="doc"] .fort::before{content:"17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25";white-space:pre;left:0;right:10px;top:10px;height:auto;background:none;text-align:right;font:400 11px/22px var(--f-body);color:var(--dc-guide-ink)}
[data-skin="doc"] .fort[data-low="true"]{background:var(--error-soft);border-color:var(--error)}
[data-skin="doc"] .cannon{width:0;height:0;margin:-7px 0 0 -6px;border-radius:0;background:none;border:7px solid transparent;border-left:12px solid var(--ink);border-right:0}
[data-skin="doc"] .barrel{width:52px;height:2px;margin-top:-1px;border-radius:0;background:var(--accent);opacity:.75}
[data-skin="doc"] .shell{width:2px;height:16px;margin:-8px 0 0 -1px;border-radius:0;background:var(--ink)}

/* 총알 피하기: 나는 글자 커서, 총알은 빨간 물결 밑줄, 흔적은 선택 강조 줄 */
[data-skin="doc"] .arena{background:none}
[data-skin="doc"] .player{width:2px;height:22px;margin:-11px 0 0 -1px;border-radius:0;background:var(--ink);box-shadow:none;animation:dc-caret 1s steps(1) infinite}
[data-skin="doc"] .player.is-hurt{animation:blink .18s steps(2) infinite}
[data-skin="doc"] .bullet{width:28px;height:5px;margin:-3px 0 0 -14px;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='5'%3E%3Cpath d='M0 3.8 Q1.5 0.6 3 2.6 T6 3.8' fill='none' stroke='%23d32f2f' stroke-width='1.6'/%3E%3C/svg%3E") 0 0 / 6px 5px repeat-x}
[data-skin="doc"] .bullet[data-kind="ring"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='5'%3E%3Cpath d='M0 3.8 Q1.5 0.6 3 2.6 T6 3.8' fill='none' stroke='%231a5fd0' stroke-width='1.6'/%3E%3C/svg%3E")}
[data-skin="doc"] .bullet[data-kind="rain"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='5'%3E%3Cpath d='M0 3.8 Q1.5 0.6 3 2.6 T6 3.8' fill='none' stroke='%23178a3c' stroke-width='1.6'/%3E%3C/svg%3E")}
[data-skin="doc"] .trail{height:12px;border:0;margin-top:-6px;border-radius:2px;background:var(--dc-sel);opacity:.8;transform-origin:0 50%}

/* ---------- 게임 고르기: 문서 목록 ---------- */
[data-skin="doc"] .menu{padding:4px 12px;background:var(--surface)}
[data-skin="doc"] .game-row{border-radius:0;border-bottom:1px solid var(--dc-line);gap:12px 24px;padding:12px 8px}
[data-skin="doc"] .game-row:hover,[data-skin="doc"] .game-row:focus-visible{background:var(--dc-hover)}
[data-skin="doc"] .gr-key{width:1.9em;height:1.9em;border-radius:3px;border-bottom-width:1px;font:600 14px var(--f-body)}
/* 목록 줄 설명(.gr-rule)은 base 의 max-width:40ch 를 풀어 한 줄로 둔다 */
[data-skin="doc"] .gr-name{font:700 16px/1.35 var(--f-doc);color:var(--ink)}
[data-skin="doc"] .gr-rule{max-width:none;font:400 12.5px/1.4 var(--f-body);color:var(--muted)}
[data-skin="doc"] .gr-preview{border-radius:2px;border:1px solid var(--dc-guide);background:repeating-linear-gradient(to bottom, var(--dc-paper) 0 13px, var(--dc-ghost) 13px 15px, var(--dc-paper) 15px 20px)}
[data-skin="doc"] .gr-preview .w{height:22px;font-size:13px;line-height:22px}
[data-skin="doc"] .gr-preview .lane{display:block;height:24px;border:0;grid-template-columns:none}
[data-skin="doc"] .gr-best b{font-size:18px}
[data-skin="doc"] .gr-top{display:none}

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

/* ---------- 숨김 화면: 주간업무보고 본문 ---------- */
/* 숨김 화면은 눌러서 돌아가는 가짜 화면이라 스크롤하지 않는다(스크롤 영역에 포커스할 곳이 없다는 axe 위반을 피한다) */
[data-skin="doc"] .boss{background:var(--dc-canvas);overflow:hidden}
[data-skin="doc"] .dc-page{box-sizing:border-box;width:min(var(--dc-pagew), calc(100% - 32px));min-height:1123px;margin:14px auto 40px;padding:56px var(--dc-margin) 64px;background:var(--dc-paper);box-shadow:0 0 0 1px var(--dc-line), 0 2px 10px rgba(0,0,0,.18);font:400 14.5px/1.85 var(--f-doc);color:var(--ink)}
[data-skin="doc"] .dc-page h2{margin:0 0 22px;text-align:center;font:700 24px/1.3 var(--f-doc);letter-spacing:.2em}
[data-skin="doc"] .dc-page h3{margin:24px 0 8px;font:700 16px/1.5 var(--f-doc)}
[data-skin="doc"] .dc-page p{margin:8px 0}
[data-skin="doc"] .dc-page ul{margin:6px 0;padding-left:22px}
[data-skin="doc"] .dc-page li{margin:2px 0}
[data-skin="doc"] .dc-page table{width:100%;border-collapse:collapse;font:400 13.5px/1.6 var(--f-body);margin:8px 0}
[data-skin="doc"] .dc-page th,[data-skin="doc"] .dc-page td{padding:4px 10px;border:1px solid var(--dc-guide);text-align:left}
[data-skin="doc"] .dc-page th{background:var(--surface-2);font-weight:700;white-space:nowrap}
[data-skin="doc"] .dc-meta th{width:16%}

/* ---------- 좁은 화면 ---------- */
@media (max-width: 900px){
  [data-skin="doc"] .slot-menubar{display:none}
}
@media (max-width: 640px){
  [data-skin="doc"]{--dc-margin:26px}
  [data-skin="doc"] .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="doc"] .slot-toolbar{display:none}
  [data-skin="doc"] .back{margin-left:4px;padding:0 2px 0 6px;font-size:12.5px}
  [data-skin="doc"] .brand-h{padding:0 6px 0 4px}
  [data-skin="doc"] .brand-game{max-width:112px}
  [data-skin="doc"] .tools{padding:0 8px;gap:6px}
  [data-skin="doc"] .stats{order:0;width:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:0 4px;justify-content:stretch}
  [data-skin="doc"] .stat{justify-content:space-between;padding:2px 8px;border-left:0;border-bottom:1px solid var(--dc-line)}
  [data-skin="doc"] .stat:nth-last-child(-n+3){border-bottom:0}
  [data-skin="doc"] .stat dt{font-size:11px;overflow:hidden;text-overflow:ellipsis}
  [data-skin="doc"] .stat dd{font-size:12px}
  [data-skin="doc"] .entry{padding:0 8px}
  [data-skin="doc"] .entry::after{display:none}
  [data-skin="doc"] #typing{flex:1 1 auto}
  [data-skin="doc"] .dc-st{display:none}
  [data-skin="doc"] .dc-zoom{margin-left:0}
  [data-skin="doc"] .hint,[data-skin="doc"] .launcher-note{padding:0 8px}
  /* 표 머리줄(.dc-thead)과 차선이 같은 칸 비율을 쓴다. 마지막 칸은 머리줄 글자("달성률")가 잘리지 않을 만큼 둔다 */
  [data-skin="doc"]{--dc-lane-cols:5.6em minmax(0,1fr) 4em}
  [data-skin="doc"] .dc-thead-row span{padding:0 6px}
  [data-skin="doc"] .lane-name{padding:0 6px}
  [data-skin="doc"] .lane-bar{margin:0 8px}
  [data-skin="doc"] .lane-pct{padding:0 6px}
  [data-skin="doc"] .fort{width:var(--dc-margin)}
  [data-skin="doc"] .layer{grid-template-columns:minmax(0,1fr)}
  [data-skin="doc"] .layer-main{padding:14px 14px 16px}
  [data-skin="doc"] .board{border-left:0;border-top:1px solid var(--dc-line);padding:14px}
  [data-skin="doc"] .game-row{grid-template-columns:auto minmax(0,1fr)}
  [data-skin="doc"] .dc-page{padding:36px var(--dc-margin) 48px;font-size:13.5px}
}
/* 낮은 화면: 차선 높이는 레이싱이 무대 높이에 맞춰 정하므로 여기서는 표 위 여백만 줄인다 */
@media (max-height: 600px){
  [data-skin="doc"]{--dc-table-top:60px}
}
@media (prefers-reduced-motion: reduce){
  [data-skin="doc"] .toast.show{animation:fade 1.2s forwards}
  [data-skin="doc"] .w.is-pop,[data-skin="doc"] .w.is-sink{animation-duration:.01s}
  [data-skin="doc"] .w.is-target::after,[data-skin="doc"] .player{animation:none}
}