/* 발표 자료 테마(slides) 스타일: 슬라이드 편집기처럼 보이게 틀과 무대 요소를 다시 칠한다.

   [!CRITICAL] 모든 규칙은 [data-skin="slides"] 아래에만 둔다. 다른 테마와 정석 테마로 새면 안 된다.
   색은 두 층이다. 편집기 틀(제목 줄, 리본, 목록, 대화 상자)은 html 에 다시 정한 토큰을 따라 밝은 화면과 어두운 화면이 갈리고,
   흰 슬라이드 종이 위의 요소(단어, 막대, 도형)는 --sl-* 고정색을 쓴다. 어두운 편집기에서도 슬라이드는 흰색이기 때문이다.
   레이아웃: .top .work .dock 을 display:contents 로 풀어 .app 격자 하나에 모든 칸을 직접 놓는다.
   그래야 리본(도구줄 슬롯)과 점수줄이 한 띠로 이어지고, 왼쪽 축소판 목록이 입력줄 높이까지 내려온다. */

/* ---------- 토큰 ---------- */
[data-skin="slides"]{
  --bg:#f3f3f3; --surface:#ffffff; --surface-2:#f3f3f3; --ink:#262626; --muted:#595959;
  --line:#d4d4d4; --line-strong:#8a8a8a;
  --accent:#b7472a; --accent-ink:#ffffff; --accent-soft:#fbe6df;
  --error:#c42b2b; --error-soft:#fbdcdc;
  --scrim:rgba(233,233,233,.86); --focus:#0f6cbd;
  --f-body:"Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR","Segoe UI",system-ui,sans-serif;
  --f-display:var(--f-body); --f-word:var(--f-body); --f-num:var(--f-body);
  --word:clamp(15px, .55vw + 11px, 19px);
  --radius:2px;
  --sl-title:#b7472a; --sl-ribbon:#f3f3f3; --sl-pane:#e8e8e8; --sl-work:#d4d4d4; --sl-notes:#ffffff; --sl-icon:#4a4a4a;
  --sl-side:172px;
  --sl-chev: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='%23595959' stroke-width='1.5'/%3E%3C/svg%3E");
  /* 슬라이드 종이 위의 고정색: 어두운 편집기에서도 종이는 흰색이다 */
  --sl-paper:#ffffff; --sl-text:#262626; --sl-sub:#595959; --sl-line:#bfbfbf; --sl-sel:#0f6cbd; --sl-brand:#b7472a;
  --sl-gold:#8f5400; --sl-gold-bg:#ffe8b0; --sl-ice:#1860a8; --sl-ice-bg:#d3e6f8;
  --sl-heal:#1f7a36; --sl-heal-bg:#d6f0dd; --sl-clear:#6340cf; --sl-clear-bg:#e6defc; --sl-bad:#c42b2b; --sl-bad-bg:#fbdcdc;
  --sl-c1:#ed7d31; --sl-c2:#4472c4; --sl-c3:#a5a5a5; --sl-c4:#ffc000;
  --sl-handle:radial-gradient(circle, #fff 0 2.6px, #0f6cbd 3px 4px, transparent 4.5px);
}
@media (prefers-color-scheme: dark){
  [data-skin="slides"]{
    --bg:#2a2a2a; --surface:#333333; --surface-2:#2a2a2a; --ink:#f0f0f0; --muted:#bcbcbc;
    --line:#4a4a4a; --line-strong:#7c7c7c;
    --accent:#ff9a7a; --accent-ink:#2b0f06; --accent-soft:#5a2a1c;
    --error:#ff8a80; --error-soft:#4a2020;
    --scrim:rgba(36,36,36,.88); --focus:#7fb8f5;
    --sl-title:#8c3a22; --sl-ribbon:#333333; --sl-pane:#262626; --sl-work:#1f1f1f; --sl-notes:#2e2e2e; --sl-icon:#dcdcdc;
    --sl-chev: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='%23d0d0d0' stroke-width='1.5'/%3E%3C/svg%3E");
  }
}

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

/* ---------- 돌아가기: 탭 줄 오른쪽 끝의 "최근 항목" 단추 ----------
   .back 은 틀이 점수줄 묶음(.top-row, 리본 오른쪽) 안에 넣는 링크라 그대로 두면 리본 안에서 큰 상자로 보인다.
   발표 자료 편집기의 탭 줄 오른쪽 끝 단추(공유, 의견)처럼 보이게 .app 기준으로 띄워 탭 줄 높이(30px) 안에 둔다.
   [!CRITICAL] 제목 줄(30px)과 탭 줄(30px)의 높이가 바뀌면 top 도 같이 바꾼다. 탭 줄이 숨는 좁은 화면(760px 이하)에서는 제목 줄 오른쪽으로 올린다 */
[data-skin="slides"] .app{position:relative}
[data-skin="slides"] .back{position:absolute;top:30px;right:10px;z-index:3;display:flex;align-items:center;gap:7px;height:30px;padding:0 10px 0 8px;border:0;border-radius:2px 2px 0 0;background:none;color:#fff;font:400 12.5px/1 var(--f-body);text-decoration:none;white-space:nowrap}
[data-skin="slides"] .back::before{content:"";flex:none;width:6px;height:6px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateX(2px) rotate(45deg)}
[data-skin="slides"] .back:hover{background:rgba(255,255,255,.18);color:#fff}
[data-skin="slides"] .back:focus-visible{outline:2px solid #fff;outline-offset:-3px}

/* ---------- 제목 줄과 탭 ---------- */
[data-skin="slides"] .sl-titlebar{display:flex;align-items:center;gap:14px;height:30px;padding:0 10px;background:var(--sl-title);color:#fff;font-size:12px}
[data-skin="slides"] .sl-qa{display:flex;align-items:center;gap:12px;flex:none;color:#fff}
[data-skin="slides"] .sl-qa .sl-ic{color:#fff}
[data-skin="slides"] .sl-doc{margin:0;flex:1;min-width:0;display:flex;justify-content:center;align-items:center;gap:10px;font:400 12px/1 var(--f-body)}
[data-skin="slides"] .sl-doc-n{color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:4px 2px}
[data-skin="slides"] .sl-saved{white-space:nowrap}
[data-skin="slides"] .sl-search{flex:none;width:190px;height:20px;line-height:20px;padding:0 10px;border-radius:2px;background:#fff;color:#595959}
[data-skin="slides"] .sl-share{flex:none;padding:0 6px}
[data-skin="slides"] .sl-tabs{display:flex;align-items:flex-end;gap:2px;height:30px;padding:0 8px;background:var(--sl-title);color:#fff;font-size:13px;overflow:hidden}
[data-skin="slides"] .sl-tab{height:27px;padding:0 13px;display:flex;align-items:center;white-space:nowrap}
[data-skin="slides"] .sl-tab.is-on{background:var(--sl-ribbon);color:var(--ink);border-radius:2px 2px 0 0}

/* ---------- 리본 ---------- */
[data-skin="slides"] .slot-toolbar,[data-skin="slides"] .top-row{background:var(--sl-ribbon);border-bottom:1px solid var(--line);min-height:90px}
[data-skin="slides"] .slot-toolbar{display:flex;align-items:stretch;overflow:hidden;padding:4px 0 0 6px;min-width:0}
[data-skin="slides"] .sl-grp{flex:none;display:flex;flex-direction:column;padding:0 8px;border-right:1px solid var(--line)}
[data-skin="slides"] .sl-grp-body{flex:1;display:flex;align-items:flex-start;gap:8px;padding-top:2px}
[data-skin="slides"] .sl-grp-cap{font-size:11px;line-height:1.3;color:var(--muted);text-align:center;padding:2px 0 4px;white-space:nowrap}
[data-skin="slides"] .sl-rb{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink);white-space:nowrap;padding:1px 2px}
[data-skin="slides"] .sl-rb.is-big{flex-direction:column;gap:3px;padding:2px 6px;font-size:12px}
[data-skin="slides"] .sl-stack{display:flex;flex-direction:column;gap:2px;justify-content:flex-start}
[data-skin="slides"] .sl-rows{display:flex;flex-direction:column;gap:6px;padding-top:4px}
[data-skin="slides"] .sl-row{display:flex;align-items:center;gap:6px}
[data-skin="slides"] .sl-shapes{display:grid;grid-template-columns:repeat(3,22px);gap:4px 6px;padding-top:6px}
[data-skin="slides"] .sl-sel{height:21px;display:inline-flex;align-items:center;justify-content:space-between;gap:6px;padding:0 6px;border:1px solid var(--line-strong);background:var(--surface);font-size:12px;color:var(--ink)}
[data-skin="slides"] .sl-sel.is-font{width:96px}
[data-skin="slides"] .sl-sel.is-size{width:46px}
[data-skin="slides"] .sl-caret{width:0;height:0;border:4px solid transparent;border-top-color:currentColor;border-bottom:0}
[data-skin="slides"] .sl-fx{width:22px;height:21px;display:inline-grid;place-items:center;font:600 13px/1 var(--f-body);color:var(--ink)}
[data-skin="slides"] .sl-fx.is-small{font-size:10px}
[data-skin="slides"] .sl-fx.is-b{font-weight:800}
[data-skin="slides"] .sl-fx.is-i{font-style:italic}
[data-skin="slides"] .sl-fx.is-u{text-decoration:underline}
[data-skin="slides"] .sl-fx.is-s{text-decoration:line-through}
[data-skin="slides"] .sl-fx.is-clr{border-bottom:3px solid #c42b2b;height:19px}

/* 점수줄은 리본 오른쪽 묶음: 값이 위, 이름이 아래 캡션이다 */
[data-skin="slides"] .top-row{display:flex;flex-wrap:nowrap;align-items:stretch;gap:0;padding:4px 6px 0 0;min-width:0}
[data-skin="slides"] .stats{flex:none;display:flex;flex-wrap:nowrap;gap:0;justify-content:flex-start;align-items:stretch}
[data-skin="slides"] .stat{display:flex;flex-direction:column-reverse;align-items:center;justify-content:flex-start;min-width:70px;padding:0 9px;border-right:1px solid var(--line)}
[data-skin="slides"] .stat dt{width:100%;font:400 11px/1.3 var(--f-body);color:var(--muted);text-align:center;padding:2px 0 4px;white-space:nowrap}
[data-skin="slides"] .stat dd{margin:auto 0;font:600 21px/1.1 var(--f-body);font-variant-numeric:tabular-nums;text-align:center;color:var(--ink)}
[data-skin="slides"] .lv{height:3px;margin-top:4px;background:var(--line)}
[data-skin="slides"] .lv i{background:var(--accent)}
[data-skin="slides"] .tools{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:5px;padding:4px 4px 0 10px}
[data-skin="slides"] .tool-label{order:3;font-size:11px;line-height:1.3;color:var(--muted);text-align:center;padding:0 0 4px}
[data-skin="slides"] .skin-select{order:1;background:var(--surface) var(--sl-chev) no-repeat right 8px center;border:1px solid var(--line-strong);border-radius:2px;padding:3px 24px 3px 8px;font:400 12px/1.3 var(--f-body);color:var(--ink)}
[data-skin="slides"] #btnPause{order:2}
[data-skin="slides"] .btn{border:1px solid var(--line-strong);border-bottom-width:1px;border-radius:2px;background:var(--surface);color:var(--ink);padding:4px 10px;font:400 12px/1.3 var(--f-body);justify-content:center}
[data-skin="slides"] .btn:hover:not(:disabled){background:var(--accent-soft);border-color:var(--accent)}
[data-skin="slides"] .btn:active:not(:disabled){transform:none}
[data-skin="slides"] .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);padding:8px 20px;font-size:14px}
[data-skin="slides"] .btn.primary:hover:not(:disabled){background:var(--accent);filter:brightness(1.08)}
[data-skin="slides"] .btn.quiet{color:var(--ink);border-color:var(--line-strong)}
[data-skin="slides"] .btn kbd{opacity:.8}
[data-skin="slides"] .btn.primary kbd{opacity:1}
[data-skin="slides"] .btn:disabled{opacity:.75}

/* ---------- 리본 아이콘: CSS 로 그린 단순 도형 ---------- */
[data-skin="slides"] .sl-ic{display:inline-block;flex:none;position:relative;width:16px;height:16px;color:var(--sl-icon)}
[data-skin="slides"] .sl-ic.is-big{width:30px;height:30px}
[data-skin="slides"] .sl-ic-save{width:12px;height:12px;border:1.5px solid currentColor;border-radius:2px}
[data-skin="slides"] .sl-ic-save::before{content:"";position:absolute;left:2px;right:2px;top:0;height:4px;border:1px solid currentColor;border-top:0}
[data-skin="slides"] .sl-ic-undo,[data-skin="slides"] .sl-ic-redo,[data-skin="slides"] .sl-ic-reset{width:11px;height:11px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%}
[data-skin="slides"] .sl-ic-redo{transform:scaleX(-1)}
[data-skin="slides"] .sl-ic-paste{width:24px;height:27px;margin:0 1px;border:2px solid currentColor;border-radius:3px}
[data-skin="slides"] .sl-ic-paste::before{content:"";position:absolute;left:5px;right:5px;top:-5px;height:8px;border:2px solid currentColor;border-radius:2px;background:var(--sl-ribbon)}
[data-skin="slides"] .sl-ic-paste::after{content:"";position:absolute;left:4px;right:4px;top:11px;height:2px;background:currentColor;box-shadow:0 5px 0 currentColor,0 10px 0 currentColor}
[data-skin="slides"] .sl-ic-cut{background:linear-gradient(45deg,transparent 44%,currentColor 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,currentColor 44% 56%,transparent 56%)}
[data-skin="slides"] .sl-ic-copy,[data-skin="slides"] .sl-ic-arrange{width:10px;height:12px;margin:0 3px 0 0;border:1.5px solid currentColor;border-radius:1px}
[data-skin="slides"] .sl-ic-copy::before,[data-skin="slides"] .sl-ic-arrange::before{content:"";position:absolute;left:3px;top:3px;width:100%;height:100%;border:1.5px solid currentColor;background:var(--sl-ribbon)}
[data-skin="slides"] .sl-ic-brush{background:linear-gradient(currentColor,currentColor) 4px 0/8px 5px no-repeat,linear-gradient(currentColor,currentColor) 7px 5px/2px 10px no-repeat}
[data-skin="slides"] .sl-ic-newslide{width:30px;height:30px}
[data-skin="slides"] .sl-ic-newslide::before{content:"";position:absolute;left:1px;top:4px;width:22px;height:17px;border:2px solid currentColor;background:var(--sl-ribbon)}
[data-skin="slides"] .sl-ic-newslide::after{content:"";position:absolute;right:0;bottom:2px;width:12px;height:12px;border-radius:50%;background:linear-gradient(#fff,#fff) center/6px 2px no-repeat,linear-gradient(#fff,#fff) center/2px 6px no-repeat,#2b7a3d}
[data-skin="slides"] .sl-ic-layout{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="slides"] .sl-ic-section{background:linear-gradient(currentColor,currentColor) 0 2px/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 7px/70% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 12px/100% 2px no-repeat}
[data-skin="slides"] .sl-ic-find{width:9px;height:9px;margin:0 5px 5px 0;border:2px solid currentColor;border-radius:50%}
[data-skin="slides"] .sl-ic-find::after{content:"";position:absolute;left:7px;top:8px;width:6px;height:2px;background:currentColor;transform:rotate(45deg);transform-origin:0 50%}
[data-skin="slides"] .sl-ic-replace{background:linear-gradient(currentColor,currentColor) 0 3px/10px 2px no-repeat,linear-gradient(currentColor,currentColor) 5px 10px/10px 2px no-repeat}
[data-skin="slides"] .sl-ic-select{width:12px;height:12px;border:1.5px dashed currentColor}
[data-skin="slides"] .sl-ic-quick{width:12px;height:12px;border:1.5px solid currentColor;border-radius:50%;background:radial-gradient(circle,currentColor 2px,transparent 2.5px)}
[data-skin="slides"] .sl-ic-list{background:radial-gradient(circle,currentColor 1.4px,transparent 1.8px) 0 1px/4px 5px repeat-y,linear-gradient(currentColor,currentColor) 6px 2px/10px 1.5px no-repeat,linear-gradient(currentColor,currentColor) 6px 7px/10px 1.5px no-repeat,linear-gradient(currentColor,currentColor) 6px 12px/10px 1.5px no-repeat}
[data-skin="slides"] .sl-ic-numlist{background:linear-gradient(currentColor,currentColor) 0 1px/3px 3px no-repeat,linear-gradient(currentColor,currentColor) 0 6px/3px 3px no-repeat,linear-gradient(currentColor,currentColor) 0 11px/3px 3px no-repeat,linear-gradient(currentColor,currentColor) 6px 2px/10px 1.5px no-repeat,linear-gradient(currentColor,currentColor) 6px 7px/10px 1.5px no-repeat,linear-gradient(currentColor,currentColor) 6px 12px/10px 1.5px no-repeat}
[data-skin="slides"] .sl-ic-indent{background:linear-gradient(currentColor,currentColor) 0 2px/16px 1.5px no-repeat,linear-gradient(currentColor,currentColor) 5px 7px/11px 1.5px no-repeat,linear-gradient(currentColor,currentColor) 0 12px/16px 1.5px no-repeat}
[data-skin="slides"] .sl-ic-cols{background:linear-gradient(currentColor,currentColor) 0 1px/7px 1.5px no-repeat,linear-gradient(currentColor,currentColor) 0 6px/7px 1.5px no-repeat,linear-gradient(currentColor,currentColor) 0 11px/7px 1.5px no-repeat,linear-gradient(currentColor,currentColor) 9px 1px/7px 1.5px no-repeat,linear-gradient(currentColor,currentColor) 9px 6px/7px 1.5px no-repeat,linear-gradient(currentColor,currentColor) 9px 11px/7px 1.5px no-repeat}
[data-skin="slides"] .sl-ic-al-l{background:linear-gradient(currentColor,currentColor) 0 1px/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 0 5px/70% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 0 9px/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 0 13px/50% 1.5px no-repeat}
[data-skin="slides"] .sl-ic-al-c{background:linear-gradient(currentColor,currentColor) 50% 1px/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 50% 5px/70% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 50% 9px/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 50% 13px/50% 1.5px no-repeat}
[data-skin="slides"] .sl-ic-al-r{background:linear-gradient(currentColor,currentColor) 100% 1px/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 100% 5px/70% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 100% 9px/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 100% 13px/50% 1.5px no-repeat}
[data-skin="slides"] .sl-ic-al-j{background:linear-gradient(currentColor,currentColor) 0 1px/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 0 5px/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 0 9px/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 0 13px/100% 1.5px no-repeat}
[data-skin="slides"] .sl-ic-s-rect{width:18px;height:12px;margin-top:2px;border:1.5px solid currentColor}
[data-skin="slides"] .sl-ic-s-oval{width:18px;height:12px;margin-top:2px;border:1.5px solid currentColor;border-radius:50%}
[data-skin="slides"] .sl-ic-s-round{width:18px;height:12px;margin-top:2px;border:1.5px solid currentColor;border-radius:4px}
[data-skin="slides"] .sl-ic-s-arrow{width:18px;height:14px;background:currentColor;clip-path:polygon(0 32%,58% 32%,58% 8%,100% 50%,58% 92%,58% 68%,0 68%)}
[data-skin="slides"] .sl-ic-s-line{width:18px;height:14px;background:linear-gradient(135deg,transparent 46%,currentColor 46% 54%,transparent 54%)}
[data-skin="slides"] .sl-ic-s-tri{width:18px;height:14px;background:currentColor;clip-path:polygon(50% 0,100% 100%,0 100%)}
[data-skin="slides"] .sl-ic-v-norm,[data-skin="slides"] .sl-ic-v-sort,[data-skin="slides"] .sl-ic-v-read,[data-skin="slides"] .sl-ic-v-show{width:13px;height:10px;border:1.5px solid #fff;color:#fff}
[data-skin="slides"] .sl-ic-v-norm{background:linear-gradient(#fff,#fff) 3px 0/1.5px 100% no-repeat}
[data-skin="slides"] .sl-ic-v-sort{background:linear-gradient(#fff,#fff) 50% 0/1.5px 100% no-repeat,linear-gradient(#fff,#fff) 0 50%/100% 1.5px no-repeat}
[data-skin="slides"] .sl-ic-v-read{background:linear-gradient(#fff,#fff) 0 2px/100% 1.5px no-repeat}
[data-skin="slides"] .sl-ic-v-show{background:#fff;clip-path:polygon(0 0,100% 50%,0 100%);border:0}

/* ---------- 왼쪽 축소판 목록 ---------- */
[data-skin="slides"] .slot-side{width:var(--sl-side);background:var(--sl-pane);border-right:1px solid var(--line);overflow:auto;scrollbar-width:none;min-height:0}
[data-skin="slides"] .slot-side::-webkit-scrollbar{display:none}
[data-skin="slides"] .sl-thumbs{display:flex;flex-direction:column;gap:10px;padding:10px 10px 10px 4px}
[data-skin="slides"] .sl-thumb{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:start;gap:4px;font-size:11px;color:var(--muted)}
[data-skin="slides"] .sl-thumb-n{text-align:right;padding-top:2px}
[data-skin="slides"] .sl-thumb.is-cur .sl-thumb-n{color:var(--ink);font-weight:600}
[data-skin="slides"] .sl-pg{position:relative;aspect-ratio:16 / 9;background:#fff;border:1px solid var(--sl-line);overflow:hidden}
[data-skin="slides"] .sl-thumb.is-cur .sl-pg{border:2px solid var(--accent)}
[data-skin="slides"] .sl-pg-t{position:absolute;left:8%;top:12%;width:46%;height:8%;background:#6f6f6f}
[data-skin="slides"] .sl-pg-l{position:absolute;left:8%;height:4%;background:#c4c4c4}
[data-skin="slides"] .sl-pg-l.a{top:34%;width:60%}
[data-skin="slides"] .sl-pg-l.b{top:46%;width:48%}
[data-skin="slides"] .sl-pg-l.c{top:58%;width:54%}
[data-skin="slides"] .sl-pg-l.d{top:70%;width:36%}
[data-skin="slides"] .sl-pg.v1 .sl-pg-l.a,[data-skin="slides"] .sl-pg.v1 .sl-pg-l.b{width:34%}
[data-skin="slides"] .sl-pg-bars{position:absolute;right:8%;bottom:12%;width:34%;height:46%;display:flex;align-items:flex-end;gap:8%}
[data-skin="slides"] .sl-pg-bars i{flex:1;background:var(--sl-c2)}
[data-skin="slides"] .sl-pg-bars i:nth-child(1){height:40%}
[data-skin="slides"] .sl-pg-bars i:nth-child(2){height:62%}
[data-skin="slides"] .sl-pg-bars i:nth-child(3){height:100%;background:var(--sl-c1)}
[data-skin="slides"] .sl-pg-bars i:nth-child(4){height:78%}
[data-skin="slides"] .sl-pg-img{position:absolute;right:8%;bottom:14%;width:30%;height:44%;background:linear-gradient(135deg,#dfe7f3,#b9c8e0)}
[data-skin="slides"] .sl-pg.v3 .sl-pg-l.a,[data-skin="slides"] .sl-pg.v3 .sl-pg-l.b{width:38%}
[data-skin="slides"] .sl-pg.v3 .sl-pg-l.c,[data-skin="slides"] .sl-pg.v3 .sl-pg-l.d{left:52%;top:34%;width:38%}
[data-skin="slides"] .sl-pg.v3 .sl-pg-l.d{top:46%;width:30%}

/* ---------- 작업 영역과 흰 슬라이드 ---------- */
[data-skin="slides"] .canvas{
  container-type:size;
  background:var(--sl-work);border:0;border-radius:0;min-height:min(260px,36vh);
  --sl-w:min(calc(100cqw - 48px), calc((100cqh - 40px) * 16 / 9));
  --sl-h:calc(var(--sl-w) * 9 / 16);
}
/* 무대가 곧 슬라이드다: 가운데 16:9 로 놓고 종이는 뒤에 깐다. 틀이 무대 크기를 다시 재서 게임에 알린다 */
[data-skin="slides"] .stage{inset:0;margin:auto;width:var(--sl-w);height:var(--sl-h);background:transparent;cursor:text}
[data-skin="slides"] .stage.frozen{background:rgba(24,96,168,.1)}
[data-skin="slides"] .skin-deco.sl-paper{inset:0;margin:auto;width:var(--sl-w);height:var(--sl-h);z-index:-1;background:var(--sl-paper);box-shadow:0 1px 5px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.08)}
[data-skin="slides"] .sl-ph{position:absolute;left:8%;right:8%;border:1px dashed #a6a6a6;color:#767676;font:400 max(11px, calc(var(--sl-w) / 50))/1.4 var(--f-body)}
[data-skin="slides"] .sl-ph.is-title{top:7%;height:17%;display:grid;place-items:center;font-size:max(13px, calc(var(--sl-w) / 34))}
[data-skin="slides"] .sl-ph.is-body{top:30%;height:52%;padding:.7em 1em}
[data-skin="slides"] .sl-paper-foot,[data-skin="slides"] .sl-paper-no{position:absolute;bottom:3.5%;font:400 11px/1 var(--f-body);color:var(--sl-sub)}
[data-skin="slides"] .sl-paper-foot{left:4%}
[data-skin="slides"] .sl-paper-no{right:4%}

/* ---------- 노트, 입력줄, 상태 표시줄 ---------- */
[data-skin="slides"] .sl-notes{height:78px;display:flex;flex-direction:column;overflow:hidden;padding:0 14px;background:var(--sl-notes);border-top:1px solid var(--line-strong)}
[data-skin="slides"] .sl-notes-h{padding:5px 0 3px;font:600 11px/1.3 var(--f-body);color:var(--muted)}
[data-skin="slides"] .sl-notes-l{margin:0;font:400 13px/1.55 var(--f-body);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-skin="slides"] .entry{background:var(--sl-notes);border:0;border-radius:0;padding:0 14px;gap:8px}
[data-skin="slides"] .entry:focus-within{border:0;box-shadow:inset 0 -2px 0 var(--accent)}
[data-skin="slides"] .entry:has(#typing.nomatch){border:0;box-shadow:inset 0 -2px 0 var(--error)}
[data-skin="slides"] .sl-prompt{font:600 12px/1 var(--f-body);color:var(--muted);flex:none;padding-right:2px}
[data-skin="slides"] #typing{font:400 14px/1.3 var(--f-body);padding:8px 4px}
[data-skin="slides"] #typing::placeholder{font-weight:400}
[data-skin="slides"] .entry-key{margin-right:0;font-size:11px;opacity:.7}
[data-skin="slides"] .meter{background:var(--sl-notes);padding:0 14px 0 4px;gap:8px;align-self:stretch}
[data-skin="slides"] .meter-label{font-size:12px;color:var(--muted)}
[data-skin="slides"] .meter-cells{gap:2px}
[data-skin="slides"] .meter-cells i{width:8px;height:14px;border-radius:0;border:1px solid var(--line-strong)}
[data-skin="slides"] .meter-cells i.on{background:var(--accent);border-color:var(--accent)}
[data-skin="slides"] .meter.alarm .meter-cells i.on{background:var(--error);border-color:var(--error)}
[data-skin="slides"] .meter-value{font:400 12px var(--f-body);min-width:2.6em;color:var(--ink)}
[data-skin="slides"] .hint{background:var(--sl-notes);padding:0 14px 5px;min-height:0;font-size:12px;line-height:1.4}
[data-skin="slides"] .hint:empty{display:none}
[data-skin="slides"] .slot-status{display:flex;justify-content:space-between;align-items:center;gap:14px;height:24px;padding:0 10px;background:var(--sl-title);color:#fff;font-size:12px;overflow:hidden}
[data-skin="slides"] .sl-st-l,[data-skin="slides"] .sl-st-r{display:flex;align-items:center;gap:16px;white-space:nowrap}
[data-skin="slides"] .sl-views{display:flex;align-items:center;gap:8px}
[data-skin="slides"] .sl-zoom{display:flex;align-items:center;gap:6px}
[data-skin="slides"] .sl-zoom-t{position:relative;width:92px;height:2px;background:rgba(255,255,255,.6)}
[data-skin="slides"] .sl-zoom-t i{position:absolute;left:58%;top:-4px;width:6px;height:10px;background:#fff}

/* ---------- 시작·멈춤·결과 화면: 편집기 위의 대화 상자 ---------- */
[data-skin="slides"] .layer{background:var(--scrim);grid-template-columns:minmax(0,600px) minmax(0,250px);justify-content:center;align-content:center;align-content:safe center;align-items:stretch;gap:0;padding:14px 16px}
[data-skin="slides"] .layer-pause{grid-template-columns:minmax(0,600px)}
[data-skin="slides"] .layer-main{background:var(--surface);border:1px solid var(--line-strong);padding:16px 22px 18px;gap:10px;box-shadow:0 6px 24px rgba(0,0,0,.28)}
[data-skin="slides"] .board{background:var(--surface-2);border:1px solid var(--line-strong);border-left:0;padding:16px 18px;align-self:stretch;align-content:start;box-shadow:0 6px 24px rgba(0,0,0,.28)}
[data-skin="slides"] .layer-title{margin:0;font:600 22px/1.3 var(--f-body);letter-spacing:0;color:var(--ink)}
[data-skin="slides"] .layer-rule{margin:0;font-size:13px;line-height:1.6;color:var(--muted);max-width:none}
/* 새 기록 표식과 "다른 파일 열기" 링크는 이 테마에서 보이지 않는다(돌아가는 길은 제목 줄의 문서 이름 링크) */
[data-skin="slides"] .badge,[data-skin="slides"] .actions .link{display:none}
[data-skin="slides"] .layer-start .layer-rule{margin-top:-6px}
/* 특수 단어 설명은 이름표 옆 글(span)이다 */
[data-skin="slides"] .legend{gap:6px 18px;color:var(--ink)}
[data-skin="slides"] .legend li span{font-size:13px;color:var(--muted)}

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

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

/* ---------- 단어 = 텍스트 상자 ---------- */
[data-skin="slides"] .w{font:400 var(--word)/1.2 var(--f-word);padding:.2em .5em .24em;background:rgba(255,255,255,.92);border:1px solid transparent;border-radius:0;color:var(--sl-text)}
[data-skin="slides"] .w-hit{color:inherit;text-decoration:none;background:#cfe3f6}
[data-skin="slides"] .w-tag{font:600 11px/1 var(--f-body);letter-spacing:0;padding:3px 6px;border-radius:2px;color:#fff}
[data-skin="slides"] .w-tag[data-kind="gold"]{background:var(--sl-gold);color:#fff}
[data-skin="slides"] .w-tag[data-kind="ice"]{background:var(--sl-ice);color:#fff}
[data-skin="slides"] .w-tag[data-kind="heal"]{background:var(--sl-heal);color:#fff}
[data-skin="slides"] .w-tag[data-kind="clear"]{background:var(--sl-clear);color:#fff}
[data-skin="slides"] .w-tag[data-kind="bomb"],[data-skin="slides"] .w-tag[data-kind="boss"]{background:var(--sl-bad);color:#fff}
/* 특수 단어는 도형 채우기 색이다 */
[data-skin="slides"] .w[data-kind="gold"]{background:var(--sl-gold-bg);border-color:var(--sl-gold)}
[data-skin="slides"] .w[data-kind="ice"]{background:var(--sl-ice-bg);border-color:var(--sl-ice)}
[data-skin="slides"] .w[data-kind="heal"]{background:var(--sl-heal-bg);border-color:var(--sl-heal)}
[data-skin="slides"] .w[data-kind="clear"]{background:var(--sl-clear-bg);border-color:var(--sl-clear)}
[data-skin="slides"] .w[data-kind="bomb"]{background:var(--sl-bad-bg);border-color:var(--sl-bad)}
[data-skin="slides"] .w[data-kind="boss"]{background:var(--sl-bad-bg);border:2px solid var(--sl-bad);font-size:calc(var(--word) * 1.08)}
/* 앞부분이 맞으면 점선 테두리, 목표는 선택 핸들 여덟 개 */
[data-skin="slides"] .w[data-kind="normal"].is-match{border:1px dashed #5f5f5f;background:rgba(15,108,189,.05)}
[data-skin="slides"] .w.is-match{border-style:dashed}
[data-skin="slides"] .w.is-target{box-shadow:none;border-style:solid}
[data-skin="slides"] .w[data-kind="normal"].is-target{border:1px solid var(--sl-sel)}
[data-skin="slides"] .w.is-target::after{content:"";position:absolute;inset:-5px;pointer-events:none;background-image:var(--sl-handle),var(--sl-handle),var(--sl-handle),var(--sl-handle),var(--sl-handle),var(--sl-handle),var(--sl-handle),var(--sl-handle);background-position:left top,center top,right top,left center,right center,left bottom,center bottom,right bottom;background-size:9px 9px;background-repeat:no-repeat}
[data-skin="slides"] .w.is-locked{opacity:.5}
[data-skin="slides"] .ent.walker .w{border-bottom-width:1px}
[data-skin="slides"] .ent.walker .w[data-kind="boss"]{border-bottom-width:2px}
[data-skin="slides"] .stage.frozen .w{border-color:var(--sl-ice)}

/* 효과: 점과 고리는 숨기고 점수 글자만 짧은 주석처럼 남긴다 */
[data-skin="slides"] .fx-dot,[data-skin="slides"] .fx-ring,[data-skin="slides"] .blast{display:none}
[data-skin="slides"] .fx-float{font:600 13px/1 var(--f-body);color:var(--sl-sel)}
[data-skin="slides"] .fx-float.big{color:var(--sl-gold);font-size:14px}
[data-skin="slides"] .fx-float.bad{color:var(--sl-bad)}

/* ---------- 소나기: 아래에서 차오르는 사각 도형 ---------- */
[data-skin="slides"] .pond{background:repeating-linear-gradient(135deg,rgba(68,114,196,.22) 0 5px,rgba(68,114,196,.08) 5px 10px);border-top:2px solid var(--sl-c2)}
[data-skin="slides"] .pond::after{inset:-6px 0 auto;height:9px;background-image:var(--sl-handle),var(--sl-handle),var(--sl-handle);background-position:left top,center top,right top;background-size:9px 9px;background-repeat:no-repeat}
[data-skin="slides"] .brim{border-top:1px dashed var(--sl-brand)}
[data-skin="slides"] .brim-label{right:10px;bottom:3px;font:400 11px/1 var(--f-body);color:var(--sl-brand)}

/* ---------- 레이싱: 가로 막대 그래프 ---------- */
[data-skin="slides"] .track{padding:16px 22px 0;background:#fff}
[data-skin="slides"] .track .lane{grid-template-columns:8.4em minmax(0,1fr) 3.2em;height:44px;gap:12px;border-bottom:1px solid #ececec}
[data-skin="slides"] .track .lane:first-child{border-top:0}
[data-skin="slides"] .track .lane-road{display:none}
[data-skin="slides"] .track .lane-name{font-size:13px;color:var(--sl-text)}
[data-skin="slides"] .track .lane-name small{font:400 11px/1.2 var(--f-body);color:var(--sl-sub)}
[data-skin="slides"] .track .lane[data-me] .lane-name{color:var(--sl-brand);font-weight:600}
[data-skin="slides"] .track .lane-bar{display:block;height:20px;border-radius:0;background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),#e2e2e2 calc(25% - 1px) 25%)}
[data-skin="slides"] .track .lane-bar-fill{background:var(--sl-c2)}
[data-skin="slides"] .track .lane:nth-child(1) .lane-bar-fill{background:var(--sl-c1)}
[data-skin="slides"] .track .lane:nth-child(3) .lane-bar-fill{background:var(--sl-c3)}
[data-skin="slides"] .track .lane:nth-child(4) .lane-bar-fill{background:var(--sl-c4)}
[data-skin="slides"] .track .lane-pct{font:600 13px/1 var(--f-body);color:var(--sl-text)}
[data-skin="slides"] .track .lane.is-done .lane-pct{color:var(--sl-heal)}
/* 지문은 아래 텍스트 상자다 */
[data-skin="slides"] .passage{margin:0 24px 12px;left:0;right:0;border:1px solid var(--sl-line);background:#fff;padding:10px 14px;font:400 clamp(15px,.5vw + 10px,18px)/1.7 var(--f-word);color:var(--sl-sub)}
[data-skin="slides"] .pw{color:var(--sl-sub)}
[data-skin="slides"] .pw.is-done{color:var(--sl-text);opacity:.5}
[data-skin="slides"] .pw.is-current{color:var(--sl-text);background:#cfe3f6;border-radius:0}
[data-skin="slides"] .pw.is-error{color:var(--sl-bad);background:var(--sl-bad-bg)}
[data-skin="slides"] .pw-hit{color:var(--sl-text);text-decoration:none;background:#9ec5ea}
[data-skin="slides"] .countdown{font:600 90px/1 var(--f-body);color:var(--sl-text)}
/* 게임 고르기 미리보기의 차: 막대가 늘어나는 모양 */
[data-skin="slides"] .pv-lane .car{width:48px;height:14px;margin-top:-7px;border-radius:0;background:var(--sl-c2);transition:none}
[data-skin="slides"] .pv-lane .car::before,[data-skin="slides"] .pv-lane .car::after{display:none}
[data-skin="slides"] .pv-lane[data-me] .car{background:var(--sl-c1)}

/* ---------- 대포: 사각 도형과 연결선 ---------- */
[data-skin="slides"] .ground{border-top:1px solid var(--sl-line);background:#f2f2f2}
[data-skin="slides"] .fort{background:#dce6f4;border:1px solid var(--sl-c2);border-left:0;border-bottom:0}
[data-skin="slides"] .fort::before{display:none}
[data-skin="slides"] .fort[data-low="true"]{background:var(--sl-bad-bg);border-color:var(--sl-bad)}
[data-skin="slides"] .cannon{background:var(--sl-c2);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--sl-c2)}
[data-skin="slides"] .barrel{background:linear-gradient(var(--sl-c2),var(--sl-c2)) 0 50%/calc(100% - 6px) 3px no-repeat;border-radius:0}
/* 연결선 끝 화살촉: 삼각형으로 잘라 그린다 */
[data-skin="slides"] .barrel::after{content:"";position:absolute;right:0;top:2px;width:9px;height:10px;background:var(--sl-c2);clip-path:polygon(0 0,100% 50%,0 100%)}
[data-skin="slides"] .shell{width:10px;height:10px;margin:-5px 0 0 -5px;background:var(--sl-c1)}
[data-skin="slides"] .pv-cannon{background:var(--sl-c2)}

/* ---------- 총알 피하기: 도형과 연결선 ---------- */
[data-skin="slides"] .arena{background-image:radial-gradient(#d3d3d3 1px,transparent 1.5px);background-size:24px 24px}
[data-skin="slides"] .player{background:var(--sl-c1);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--sl-c1)}
[data-skin="slides"] .bullet{background:var(--sl-bad)}
[data-skin="slides"] .bullet[data-kind="ring"]{background:var(--sl-clear);border-radius:0}
[data-skin="slides"] .bullet[data-kind="rain"]{background:var(--sl-c4);border-radius:0;clip-path:polygon(50% 0,100% 100%,0 100%)}
[data-skin="slides"] .trail{border-top:2px solid var(--sl-c2)}

/* ---------- 게임 고르기: 최근 항목 목록 ---------- */
[data-skin="slides"] .menu{inset:14px;background:var(--surface);border:1px solid var(--line);padding:0 18px 8px;grid-template-rows:auto repeat(4,minmax(98px,1fr))}
[data-skin="slides"] .menu::before{content:"최근 항목";content:"최근 항목" / "";grid-column:1 / -1;padding:12px 0 10px;border-bottom:1px solid var(--line-strong);font:600 15px/1.3 var(--f-body);color:var(--ink)}
[data-skin="slides"] .game-row{grid-template-columns:34px 168px minmax(0,1fr) 9em;grid-template-areas:"key pv text best";gap:6px 18px;padding:8px 8px;border-radius:0}
[data-skin="slides"] .gr-key{grid-area:key;font:400 13px var(--f-body);border:1px solid var(--line-strong);border-bottom-width:1px;border-radius:2px;width:1.9em;height:1.9em}
[data-skin="slides"] .gr-preview{grid-area:pv;width:168px;height:94px;border:1px solid var(--sl-line);border-radius:0;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18)}
[data-skin="slides"] .gr-text{grid-area:text}
[data-skin="slides"] .gr-best{grid-area:best}
[data-skin="slides"] .gr-name{font:600 16px/1.3 var(--f-body);color:var(--ink)}
[data-skin="slides"] .gr-rule{max-width:none;font:400 12px/1.4 var(--f-body);color:var(--muted)}
[data-skin="slides"] .gr-best b{font:600 18px var(--f-body)}
[data-skin="slides"] .game-row:hover,[data-skin="slides"] .game-row:focus-visible{background:var(--accent-soft)}

/* ---------- Esc 숨김 화면: 완성된 슬라이드 한 장 ---------- */
[data-skin="slides"] .boss{background:var(--sl-work);overflow:hidden}
[data-skin="slides"] .sl-boss{position:absolute;inset:0;display:grid;place-items:center}
[data-skin="slides"] .sl-bslide{position:relative;overflow:hidden;width:var(--sl-w);height:var(--sl-h);background:var(--sl-paper);color:var(--sl-text);font-size:max(8px, calc(var(--sl-w) / 52));box-shadow:0 1px 5px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.08)}
[data-skin="slides"] .sl-bs-bar{position:absolute;left:0;top:0;bottom:0;width:1.6%;background:var(--sl-brand)}
[data-skin="slides"] .sl-bs-title{position:absolute;left:6.5%;top:8%;right:6%;font:600 2.5em/1.15 var(--f-body);color:var(--sl-text)}
[data-skin="slides"] .sl-bs-sub{position:absolute;left:6.5%;top:21%;right:6%;font:400 1.05em/1.3 var(--f-body);color:var(--sl-sub)}
[data-skin="slides"] .sl-bs-body{position:absolute;left:6.5%;right:6%;top:32%;bottom:11%;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:5%}
[data-skin="slides"] .sl-bs-list{margin:0;padding:0 0 0 1.2em;font:400 1.4em/1.5 var(--f-body);display:grid;align-content:start;gap:.5em}
[data-skin="slides"] .sl-bs-list li::marker{color:var(--sl-brand)}
[data-skin="slides"] .sl-chart{display:grid;grid-template-rows:auto minmax(0,1fr);gap:.6em;min-width:0}
[data-skin="slides"] .sl-chart-t{font:600 1em/1.3 var(--f-body);color:var(--sl-sub);text-align:center}
[data-skin="slides"] .sl-chart-plot{position:relative;display:flex;align-items:stretch;gap:6%;padding:0 4%;border-bottom:1px solid #8a8a8a;margin-bottom:1.9em}
[data-skin="slides"] .sl-col{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
[data-skin="slides"] .sl-col-v{font:600 .95em/1.2 var(--f-body);color:var(--sl-text);padding-bottom:.2em}
[data-skin="slides"] .sl-col-bar{display:block;width:72%;background:var(--sl-c2)}
[data-skin="slides"] .sl-col.is-hi .sl-col-bar{background:var(--sl-c1)}
[data-skin="slides"] .sl-col-k{position:absolute;top:100%;left:-20%;right:-20%;margin-top:.3em;text-align:center;font:400 .85em/1.2 var(--f-body);color:var(--sl-sub);white-space:nowrap}
[data-skin="slides"] .sl-bs-foot{position:absolute;left:6.5%;right:4%;bottom:4%;display:flex;justify-content:space-between;font:400 .8em/1 var(--f-body);color:var(--sl-sub)}

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

/* ---------- 좁은 화면 ---------- */
@media (max-width: 1500px){ [data-skin="slides"] .sl-grp:nth-child(n+6){display:none} }
@media (max-width: 1380px){ [data-skin="slides"] .sl-grp:nth-child(n+5){display:none} }
@media (max-width: 1240px){ [data-skin="slides"] .sl-grp:nth-child(n+4){display:none} }
@media (max-width: 1100px){ [data-skin="slides"] .sl-grp:nth-child(n+3){display:none} }
@media (max-width: 860px){ [data-skin="slides"] .sl-grp:nth-child(n+2){display:none} }
@media (max-width: 900px){
  [data-skin="slides"]{--sl-side:0px}
  [data-skin="slides"] .slot-side{display:none}
  [data-skin="slides"] .layer{grid-template-columns:minmax(0,600px)}
  [data-skin="slides"] .board{border-left:1px solid var(--line-strong);border-top:0;padding:14px 18px}
}
@media (max-width: 760px){
  [data-skin="slides"] .back{top:0;right:6px;border-radius:2px}
  [data-skin="slides"] .app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto auto auto;grid-template-areas:"menu" "ribr" "main" "meter" "entry" "hint" "status"}
  [data-skin="slides"] .top-row{grid-area:ribr;justify-self:stretch}
  [data-skin="slides"] .app:has(.meter[hidden]) .entry{grid-column:1}
  [data-skin="slides"] .slot-toolbar,[data-skin="slides"] .sl-tabs,[data-skin="slides"] .sl-search,[data-skin="slides"] .sl-share,[data-skin="slides"] .slot-below,[data-skin="slides"] .sl-st-r{display:none}
  [data-skin="slides"] .top-row{flex-direction:column;min-height:0;padding:4px 8px 6px}
  [data-skin="slides"] .stats{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));justify-content:stretch}
  [data-skin="slides"] .stat{min-width:0;padding:2px 4px;flex-direction:row;justify-content:center;gap:6px;align-items:baseline;border-right:0}
  [data-skin="slides"] .stat dt{width:auto;padding:0;order:0}
  [data-skin="slides"] .stat dd{margin:0;font-size:15px}
  [data-skin="slides"] .lv{display:none}
  [data-skin="slides"] .tools{flex-direction:row;align-items:center;padding:4px 0 0}
  [data-skin="slides"] .tool-label{order:0;padding:0}
  [data-skin="slides"] .canvas{--sl-w:calc(100cqw - 12px);--sl-h:calc(100cqh - 12px)}
  [data-skin="slides"] .menu{inset:8px;padding:0 10px 6px}
  [data-skin="slides"] .game-row{grid-template-columns:34px minmax(0,1fr);grid-template-areas:"key text" "pv pv" "best best"}
  [data-skin="slides"] .gr-preview{width:100%;height:72px}
  [data-skin="slides"] .gr-best{display:flex;align-items:baseline;gap:8px}
  [data-skin="slides"] .menu{grid-template-rows:none}
  [data-skin="slides"] .layer{padding:10px}
  [data-skin="slides"] .layer-main{padding:14px 16px}
  [data-skin="slides"] .sl-bslide{width:calc(100cqw - 12px);height:calc((100cqw - 12px) * 9 / 16)}
}
@media (max-height: 640px){
  [data-skin="slides"] .slot-below{display:none}
}
@media (prefers-reduced-motion: reduce){
  [data-skin="slides"] .stage.frozen{transition:none}
}