/* ══════════════════════════════════════════════════════════════════
   메디슬라이드 — 디자인 시스템

   ⚠ 이 파일은 원장님 UX 목업(docs/03-ux-mockup.html)에서 **그대로** 가져왔다.
     React 로 옮겨 그리면 23K자 CSS 와 손으로 맞춘 cqw 타이포가 반드시 미세하게
     어긋난다. 디자인 파일이 곧 구현이 되도록 원본을 쓴다.

   ⚠ 절대 규칙: 앱 크롬 테마(:root) ≠ 슬라이드 캔버스 테마(.deck)
     원장님이 앱을 다크로 써도 슬라이드는 덱 자신의 테마를 지킨다. 프로젝터에
     나가는 것은 덱이지 앱이 아니다(PRD §8.2).

   ⚠ 슬라이드 캔버스는 container-type:inline-size + cqw 다. 어떤 폭에서도 16:9
     비율과 상대 타이포가 유지되며, 이는 실제 렌더가 viewBox 픽셀 좌표계인 것과
     같은 방식이다 — 목업과 실물이 자연히 맞물리는 이유.

   목업에서 걷어낸 것: 프로토타입 셸(.protobar/.screennav/.anno)
   ══════════════════════════════════════════════════════════════════ */

/* ========================================================================
   MediCloud Slide — UX Mockup (PRD v1.6 기준)
   §8.2 색 토큰 그대로 사용
   ⚠ 절대 규칙: 앱 크롬 테마(:root) ≠ 슬라이드 캔버스 테마(.deck)
   ======================================================================== */
:root{
  --bg-canvas:#ffffff; --bg-base:#f5f5f7; --bg-elevated:#ffffff;
  --bg-material:rgba(255,255,255,.72);
  --fg-primary:#1d1d1f; --fg-secondary:#6e6e73; --fg-tertiary:#86868b;
  --separator:rgba(0,0,0,.08); --hairline:rgba(0,0,0,.14);
  --accent:#0a6b7c; --accent-fg:#ffffff; --accent-soft:rgba(10,107,124,.10);
  --critical:#d70015; --warning:#b25000; --success:#1d7a3e;
  --radius-card:14px; --radius-control:10px;
  --ease:cubic-bezier(.4,0,.2,1);
  --shadow-card:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);
  --shadow-deck:0 4px 12px rgba(0,0,0,.08),0 24px 64px rgba(0,0,0,.16);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg-canvas:#000; --bg-base:#000; --bg-elevated:#1c1c1e;
    --bg-material:rgba(28,28,30,.72);
    --fg-primary:#f5f5f7; --fg-secondary:#a1a1a6; --fg-tertiary:#6e6e73;
    --separator:rgba(255,255,255,.12); --hairline:rgba(255,255,255,.2);
    --accent:#3fb6c9; --accent-fg:#001417; --accent-soft:rgba(63,182,201,.14);
    --critical:#ff453a; --warning:#ff9f0a; --success:#30d158;
    --shadow-card:0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.5);
    --shadow-deck:0 4px 12px rgba(0,0,0,.6),0 24px 64px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --bg-canvas:#000; --bg-base:#000; --bg-elevated:#1c1c1e;
  --bg-material:rgba(28,28,30,.72);
  --fg-primary:#f5f5f7; --fg-secondary:#a1a1a6; --fg-tertiary:#6e6e73;
  --separator:rgba(255,255,255,.12); --hairline:rgba(255,255,255,.2);
  --accent:#3fb6c9; --accent-fg:#001417; --accent-soft:rgba(63,182,201,.14);
  --critical:#ff453a; --warning:#ff9f0a; --success:#30d158;
  --shadow-card:0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.5);
  --shadow-deck:0 4px 12px rgba(0,0,0,.6),0 24px 64px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg-base); color:var(--fg-primary);
  font-family:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.02em}
p{margin:0}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
.num{font-variant-numeric:tabular-nums}

/* ---------- 목업 셸 (프로토타입 크롬 — 제품 UI 아님) ---------- */
  position:sticky; top:0; z-index:80; display:flex; gap:14px; align-items:center;
  padding:10px 18px; background:var(--bg-material); backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--separator);
}
  white-space:nowrap; font-size:12.5px; color:var(--fg-secondary);
  padding:5px 11px; border-radius:999px; transition:.18s var(--ease);
}
.seg{display:flex; background:var(--bg-base); border:1px solid var(--separator); border-radius:999px; padding:2px}
.seg button{font-size:12px; padding:4px 10px; border-radius:999px; color:var(--fg-secondary); white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--bg-elevated); color:var(--fg-primary); box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* 화면 전체를 쓴다. 앱 바(52px) 아래를 남김없이 작업 공간으로.
   ⚠ 예전에는 max-width:1560px 였다 — 3826px 모니터에서 절반 이상이 죽은
     여백이었고, 정작 슬라이드가 제일 작았다(2026-08-21 원장님 지적). */
.stage{width:100%; padding:10px 12px 12px; height:calc(100vh - 52px); overflow:hidden}
.stage>.screen.on{height:100%; display:flex; flex-direction:column; min-height:0}
.stage>.screen.on>.app{flex:1; min-height:0; display:flex; flex-direction:column}
/* ⚠ 화면을 뷰포트에 가두면 **세로로 긴 화면의 아래쪽이 닿지 않는다.**
   실제로 소재 화면의 [뼈대 만들기] 버튼이 잘려 누를 수 없었다(2026-08-21).
   틀은 고정하되 **본문이 안에서 스크롤**하게 한다 — 상단 탭과 하단 노트바는
   자리를 지키고, 가운데만 흐른다. */
.stage>.screen.on>.app>.topbar,
.stage>.screen.on>.app>.notesbar{flex:0 0 auto}
.stage>.screen.on>.app>*:not(.topbar):not(.notesbar){
  flex:1 1 auto; min-height:0; overflow:auto}
/* 에디터는 예외 — 세 칸이 저마다 스크롤한다. 바깥까지 흐르면 스크롤이 겹친다 */
.stage>.screen.on>.app>.editor{overflow:hidden}
.screen{display:none}
.screen.on{display:block; animation:fade .35s var(--ease)}
@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
/* 화면 제목·단계 표시는 목업이 검토자에게 설명하려고 붙인 크롬이다.
   기본은 감추고, [안내] 를 켰을 때만 코치마커로 보여 준다. */
.screen-head{display:none}
body.coach-on .screen-head{display:flex; align-items:baseline; gap:12px;
  margin:0 4px 10px; flex-wrap:wrap; padding:8px 12px; border-radius:12px;
  background:var(--accent-soft); border:1px dashed var(--accent)}
.screen-head h2{font-size:22px}
.screen-head .step{font-size:12px; color:var(--fg-tertiary); font-variant-numeric:tabular-nums; border:1px solid var(--separator); padding:2px 8px; border-radius:999px}
.screen-head .desc{font-size:13px; color:var(--fg-secondary); margin-left:auto; text-align:right}

/* 명세 주석 */
  display:none; margin:12px 4px 0; padding:11px 14px; border-radius:var(--radius-control);
  background:var(--accent-soft); border:1px solid var(--separator);
  font-size:12.5px; color:var(--fg-secondary); line-height:1.75;
}

/* ---------- 앱 프레임 ---------- */
.app{
  background:var(--bg-canvas); border:1px solid var(--separator);
  border-radius:18px; overflow:hidden; box-shadow:var(--shadow-card);
}
.topbar{
  display:flex; align-items:center; gap:14px; height:52px; padding:0 16px;
  background:var(--bg-material); backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--separator);
}
/* ⌂ 는 첫 페이지(발표 설정)로 돌아가는 길이다.
   ⚠ 목업에서는 <span> 이라 **눌리지 않는 장식**이었다. 워크플로 탭에는 소재부터
     리허설까지만 있어, 한 번 넘어가면 첫 페이지로 돌아올 길이 아예 없었다
     (2026-08-21 원장님 지적). 리허설이 갇히던 것과 같은 종류다. */
/* ⌂ 은 **눌리는 것처럼 보여야** 한다.
   ⚠ 처음에는 색만 바꾸는 호버였다. 원장님 지적(2026-08-21): "여러 번 써 보면
     알겠지만 직관적으로는 누르는 것인지 모르겠다." 맞는 말이다 — 호버는
     마우스를 올려야 알고, 올릴 생각이 들어야 올린다. 그래서 **평소에도**
     테두리로 단추임을 알리고, 손이 닿으면 살짝 떠오르며 액센트로 물든다. */
.topbar .home{
  font-size:16px; line-height:1; color:var(--fg-secondary);
  width:30px; height:30px; display:inline-flex; align-items:center;
  justify-content:center; border:1px solid var(--separator);
  border-radius:9px; background:var(--bg-elevated);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease),
             border-color .16s var(--ease), color .16s var(--ease),
             background .16s var(--ease);
}
.topbar .home:hover{
  color:var(--accent); border-color:var(--accent);
  background:var(--accent-soft); transform:translateY(-1px);
  box-shadow:0 2px 10px var(--accent-soft);
}
.topbar .home:active{transform:translateY(0); box-shadow:none}
.topbar .home:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* 어두운 화면(리허설·뷰어)에서는 형광 액센트가 그대로 살아난다 */
.topbar-dark .home{
  color:rgba(255,255,255,.72); border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
}
.topbar-dark .home:hover{
  color:var(--accent); border-color:var(--accent);
  background:rgba(63,182,201,.16);
  box-shadow:0 0 0 3px rgba(63,182,201,.16), 0 2px 14px rgba(63,182,201,.35);
}

/* 워크플로 탭 맨 앞의 [발표설정] — 되돌아가기가 앞으로 가기와 같은 모양이다.
   가는 방향이 다르다는 것만 왼쪽 끝이라는 자리로 말한다. */
.flowtabs button[data-go="home"]{color:var(--fg-tertiary)}
.flowtabs button[data-go="home"]:hover{color:var(--accent)}
.topbar-dark .flowtabs button[data-go="home"]{color:rgba(255,255,255,.5)}
.topbar-dark .flowtabs button[data-go="home"]:hover{color:var(--accent)}
.topbar .deckname{font-size:14px; font-weight:600; max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.topbar .deckname em{font-style:normal; color:var(--fg-tertiary); font-weight:400; font-size:12px; margin-left:6px}
.flowtabs{display:flex; gap:2px; margin:0 auto; background:var(--bg-base); border-radius:999px; padding:3px}
.flowtabs button{font-size:13px; padding:5px 14px; border-radius:999px; color:var(--fg-secondary); transition:.2s var(--ease)}
.flowtabs button[aria-current="true"]{background:var(--bg-elevated); color:var(--fg-primary); box-shadow:0 1px 3px rgba(0,0,0,.12); font-weight:600}
.topbar .right{display:flex; align-items:center; gap:8px}

/* 버튼 */
.btn{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500;
  padding:7px 14px; border-radius:var(--radius-control);
  border:1px solid var(--separator); background:var(--bg-elevated); color:var(--fg-primary);
  transition:.18s var(--ease);
}
.btn:hover{border-color:var(--hairline)}
.btn.primary{background:var(--accent); color:var(--accent-fg); border-color:transparent}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent; border-color:transparent; color:var(--fg-secondary)}
.btn.ghost:hover{background:var(--accent-soft); color:var(--fg-primary)}
.btn.lg{font-size:15px; padding:11px 22px; border-radius:12px}
.btn.sm{font-size:12px; padding:4px 9px; border-radius:8px}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn.wide{width:100%; justify-content:center}

/* 배지·칩 */
.badge{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 8px; border-radius:999px; line-height:1.4}
.badge.err{background:rgba(215,0,21,.12); color:var(--critical)}
.badge.warn{background:rgba(178,80,0,.12); color:var(--warning)}
.badge.ok{background:rgba(29,122,62,.12); color:var(--success)}
.badge.info{background:var(--accent-soft); color:var(--accent)}
.badge.mute{background:var(--bg-base); color:var(--fg-tertiary)}
.chip{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; padding:3px 9px; border-radius:999px; background:var(--bg-base); color:var(--fg-secondary); border:1px solid var(--separator); white-space:nowrap}
.chip.cite{background:var(--accent-soft); color:var(--accent); border-color:transparent; font-weight:500}
.dot{width:7px; height:7px; border-radius:50%; display:inline-block; flex:none}
.dot.full{background:var(--success)} .dot.part{background:var(--warning)} .dot.empty{background:var(--fg-tertiary)}

/* 카드 */
.card{background:var(--bg-elevated); border:1px solid var(--separator); border-radius:var(--radius-card); padding:16px}
.muted{color:var(--fg-secondary)}
.tiny{font-size:12px; color:var(--fg-tertiary)}
.cap{font-size:13px; color:var(--fg-secondary)}
hr.sep{border:0; border-top:1px solid var(--separator); margin:14px 0}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.spread{display:flex; justify-content:space-between; align-items:center; gap:10px}

/* ---------- 슬라이드 캔버스 (덱 테마 — 앱 테마와 완전 분리) ---------- */
.deck{
  container-type:inline-size;
  --d-bg:#ffffff; --d-fg:#101418; --d-muted:#5c6672; --d-accent:#0a6b7c;
  --d-rule:#e3e7ea; --d-soft:#eef4f5; --d-warn:#b25000;
  background:var(--d-bg); color:var(--d-fg);
  aspect-ratio:16/9; width:100%; border-radius:10px; overflow:hidden; position:relative;
  box-shadow:var(--shadow-deck);
  font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
}
.deck[data-deck="dark"]{--d-bg:#0d1417; --d-fg:#f2f6f7; --d-muted:#9fb0b5; --d-accent:#3fb6c9; --d-rule:#222f33; --d-soft:#152025}
.deck .pad{position:absolute; inset:0; padding:5.4cqw 6cqw; display:flex; flex-direction:column}
.deck .eyebrow{font-size:1.55cqw; letter-spacing:.14em; text-transform:uppercase; color:var(--d-accent); font-weight:700}
.deck .s-title{font-size:4cqw; font-weight:700; line-height:1.24; letter-spacing:-.02em; margin-top:.8cqw}
.deck .s-sub{font-size:2cqw; color:var(--d-muted); margin-top:1.6cqw; line-height:1.5}
.deck .s-h{font-size:2.9cqw; font-weight:700; line-height:1.3}
.deck .s-rule{height:2px; background:var(--d-accent); width:7cqw; margin:1.3cqw 0 2.1cqw}
.deck .s-body{font-size:1.95cqw; line-height:1.62}
.deck ul.s-list{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:1.3cqw}
.deck ul.s-list li{font-size:1.95cqw; line-height:1.5; padding-left:2.6cqw; position:relative}
.deck ul.s-list li::before{content:''; position:absolute; left:0; top:.72cqw; width:.85cqw; height:.85cqw; border-radius:50%; background:var(--d-accent)}
.deck .s-key{color:var(--d-accent); font-weight:700}
.deck .s-foot{margin-top:auto; padding-top:1.5cqw; border-top:1px solid var(--d-rule); font-size:1.25cqw; color:var(--d-muted); display:flex; gap:1.4cqw; align-items:center}
.deck .s-pagenum{margin-left:auto; font-variant-numeric:tabular-nums}
.deck table.s-tbl{width:100%; border-collapse:collapse; font-size:1.6cqw; font-variant-numeric:tabular-nums}
.deck table.s-tbl th{text-align:left; font-weight:600; color:var(--d-muted); font-size:1.35cqw; padding:.75cqw 1cqw; border-bottom:1.5px solid var(--d-rule)}
.deck table.s-tbl td{padding:.75cqw 1cqw; border-bottom:1px solid var(--d-rule)}
.deck table.s-tbl td.hi{color:var(--d-warn); font-weight:700}
.deck .imgbox{background:var(--d-soft); border:1px solid var(--d-rule); border-radius:.9cqw; display:flex; align-items:center; justify-content:center; color:var(--d-muted); font-size:1.4cqw; position:relative; overflow:hidden; text-align:center; padding:1cqw}
.deck .imgcap{font-size:1.25cqw; color:var(--d-muted); margin-top:.8cqw}
.deck .cols{display:grid; gap:3cqw; flex:1; min-height:0}
.deck .cols.c2{grid-template-columns:1fr 1fr}
.deck .cols.c58{grid-template-columns:1.12fr 1fr}
.deck .cite{font-size:1.15cqw; color:var(--d-accent); vertical-align:super; font-weight:700}
.deck .tl{display:flex; margin-top:1.2cqw}
.deck .tl .step{flex:1; padding-right:1.2cqw; position:relative}
.deck .tl .step::before{content:''; position:absolute; left:0; top:1.5cqw; right:0; height:2px; background:var(--d-rule)}
.deck .tl .step .pin{width:1.5cqw; height:1.5cqw; border-radius:50%; background:var(--d-accent); position:relative; top:.75cqw; margin-bottom:1.5cqw}
.deck .tl .step .d{font-size:1.3cqw; color:var(--d-accent); font-weight:700}
.deck .tl .step .t{font-size:1.5cqw; line-height:1.4; margin-top:.35cqw}
.deck .coi{font-size:2.2cqw; line-height:1.7}
.deck .barchart{display:flex; align-items:flex-end; gap:2.2cqw; height:100%; padding-top:1cqw}
.deck .barchart .b{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%}
.deck .barchart .b i{display:block; width:100%; background:var(--d-accent); border-radius:.4cqw .4cqw 0 0}
.deck .barchart .b i.alt{background:var(--d-soft); border:1px solid var(--d-accent)}
.deck .barchart .b span{font-size:1.35cqw; color:var(--d-muted); margin-top:.7cqw; text-align:center}
.deck .barchart .b b{font-size:1.5cqw; margin-bottom:.5cqw}

/* 캔버스 위 편집 오버레이 */
.slot-outline{position:absolute; border:1.5px dashed var(--accent); border-radius:6px; pointer-events:none}
.slot-outline::after{content:attr(data-label); position:absolute; top:-9px; left:8px; font-size:10px; background:var(--accent); color:var(--accent-fg); padding:1px 6px; border-radius:5px; letter-spacing:.02em}
.nocite{border-bottom:2px dotted var(--critical); padding-bottom:1px}

/* ---------- 에디터 3분할 ---------- */
.editor{display:grid; grid-template-columns:220px minmax(0,1fr) 320px; flex:1; min-height:0}
.navigator{border-right:1px solid var(--separator); background:var(--bg-base); overflow:auto; min-height:0; padding:10px 8px}
.nav-sec{font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--fg-tertiary); text-transform:uppercase; padding:10px 8px 6px; display:flex; align-items:center; gap:6px}
.thumb{display:flex; gap:8px; padding:6px; border-radius:10px; cursor:pointer; transition:.16s var(--ease); align-items:flex-start}
.thumb:hover{background:var(--accent-soft)}
.thumb[aria-selected="true"]{background:var(--bg-elevated); box-shadow:0 0 0 2px var(--accent) inset}
.thumb .n{font-size:11px; color:var(--fg-tertiary); width:14px; text-align:right; padding-top:12px; font-variant-numeric:tabular-nums}
.thumb .mini{flex:1; aspect-ratio:16/9; background:var(--bg-elevated); border:1px solid var(--separator); border-radius:5px; padding:5px; overflow:hidden}
.thumb .mini .t{height:4px; width:70%; background:var(--fg-tertiary); border-radius:2px; opacity:.55}
.thumb .mini .l{height:3px; width:90%; background:var(--fg-tertiary); border-radius:2px; opacity:.25; margin-top:4px}
.thumb .mini .l.s{width:60%}
.thumb .flags{display:flex; flex-direction:column; gap:3px; padding-top:10px}
.thumb.hidden-slide{opacity:.45}
.canvas-area{background:var(--bg-base); padding:14px 18px; display:flex; flex-direction:column; gap:10px; min-width:0; min-height:0}
.canvas-toolbar{display:flex; gap:8px; align-items:center; justify-content:center}
/* ⚠ 예전에는 max-width:820px 였다. 창을 넓혀도 슬라이드가 커지지 않던 진짜
   원인이 여기다. 이제 남는 자리를 다 쓰되 16:9 를 지킨다 —
   가로가 남으면 세로에 맞추고(aspect-ratio), 세로가 남으면 가로에 맞춘다. */
.canvas-hold{position:relative; flex:1; min-height:0; width:100%;
  container-type:size;                 /* 아래에서 100cqh 를 쓰려면 세로도 재야 한다 */
  display:flex; align-items:center; justify-content:center}
/* 남는 자리 중 **작은 쪽**에 맞춘다. .deck 은 aspect-ratio:16/9 라 폭만 정하면
   높이가 따라온다. 가로가 남으면 세로가, 세로가 남으면 가로가 기준이 된다. */
.canvas-hold>.deck{width:min(100cqw, calc(100cqh * 16 / 9))}
.inspector{border-left:1px solid var(--separator); background:var(--bg-elevated); display:flex; flex-direction:column; min-height:0}
.insp-tabs{display:flex; padding:8px; gap:2px; border-bottom:1px solid var(--separator)}
.insp-tabs button{flex:1; font-size:12px; padding:6px 2px; border-radius:8px; color:var(--fg-secondary)}
.insp-tabs button[aria-current="true"]{background:var(--accent-soft); color:var(--accent); font-weight:600}
.insp-body{padding:14px; overflow:auto; flex:1}
.insp-pane{display:none} .insp-pane.on{display:block}
.field{margin-bottom:14px}
.field label{display:block; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--fg-tertiary); margin-bottom:6px}
.control{display:flex; align-items:center; gap:6px; background:var(--bg-base); border:1px solid var(--separator); border-radius:9px; padding:7px 10px; font-size:13px}
.swatches{display:flex; gap:6px; flex-wrap:wrap}
.sw{width:24px; height:24px; border-radius:7px; border:1px solid var(--separator); cursor:pointer}
.sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--bg-elevated),0 0 0 4px var(--accent)}
.notesbar{border-top:1px solid var(--separator); background:var(--bg-material); backdrop-filter:blur(20px); padding:10px 16px; display:flex; gap:14px; align-items:flex-start}
.notesbar .script{flex:1; font-size:13px; color:var(--fg-secondary); line-height:1.7}
.notesbar .script s{text-decoration:none; border-bottom:1px dashed var(--separator)}
.timepill{font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--fg-secondary)}

/* 검증 슬라이드오버 */
.valwrap{position:relative}
.valpanel{
  position:absolute; top:0; right:0; bottom:0; width:340px; z-index:20;
  background:var(--bg-material); backdrop-filter:saturate(180%) blur(24px);
  border-left:1px solid var(--separator); padding:16px; overflow:auto;
  transform:translateX(102%); transition:transform .3s var(--ease); box-shadow:-16px 0 40px rgba(0,0,0,.10);
}
.valpanel.on{transform:none}
.valitem{border:1px solid var(--separator); background:var(--bg-elevated); border-radius:10px; padding:11px 12px; margin-bottom:9px; cursor:pointer; transition:.16s var(--ease)}
.valitem:hover{border-color:var(--hairline); transform:translateX(-2px)}
.valitem .t{font-size:13px; font-weight:600; margin-bottom:3px}
.valitem .m{font-size:12px; color:var(--fg-secondary); line-height:1.5}
.valitem .w{font-size:11px; color:var(--fg-tertiary); margin-top:6px; display:flex; gap:6px; align-items:center}
.lbar{width:3px; border-radius:2px; align-self:stretch}

/* ---------- 그리드/리스트 유틸 ---------- */
.grid{display:grid; gap:14px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
.sbcard{background:var(--bg-elevated); border:1px solid var(--separator); border-radius:var(--radius-card); padding:13px; transition:.18s var(--ease); cursor:grab}
.sbcard:hover{box-shadow:var(--shadow-card); transform:translateY(-2px)}
.sbcard .no{font-size:11px; color:var(--fg-tertiary); font-variant-numeric:tabular-nums}
.sbcard .sec{font-size:11px; font-weight:700; color:var(--accent); letter-spacing:.04em; text-transform:uppercase}
.sbcard .msg{font-size:14px; font-weight:600; line-height:1.45; margin:7px 0 10px}
.sbcard.empty{border:1.5px dashed var(--critical); background:transparent}
.sbcard.empty .msg{color:var(--critical); font-weight:600}
.secband{grid-column:1/-1; display:flex; align-items:center; gap:10px; margin-top:10px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-tertiary)}
.secband::after{content:''; flex:1; height:1px; background:var(--separator)}
.stickybar{position:sticky; bottom:0; margin-top:16px; background:var(--bg-material); backdrop-filter:blur(20px); border:1px solid var(--separator); border-radius:14px; padding:12px 16px; display:flex; align-items:center; gap:14px; box-shadow:var(--shadow-card)}
.meter{height:6px; border-radius:3px; background:var(--bg-base); overflow:hidden; flex:1; min-width:120px}
.meter i{display:block; height:100%; background:var(--accent)}

/* 파일 카드 */
.filecard{display:flex; gap:12px; align-items:center; padding:12px; border:1px solid var(--separator); border-radius:12px; background:var(--bg-elevated)}
.filecard .ico{width:38px; height:38px; border-radius:9px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex:none}
.filecard .meta{flex:1; min-width:0}
.filecard .nm{font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dropzone{border:1.5px dashed var(--hairline); border-radius:16px; padding:34px; text-align:center; background:var(--bg-elevated)}
.dropzone.hot{border-color:var(--accent); background:var(--accent-soft)}

/* 옵션 선택 */
.opt{border:1px solid var(--separator); background:var(--bg-elevated); border-radius:12px; padding:14px; text-align:left; cursor:pointer; transition:.18s var(--ease); width:100%}
.opt:hover{border-color:var(--hairline)}
.opt[aria-pressed="true"]{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.opt .h{font-size:14px; font-weight:600}
.opt .d{font-size:12px; color:var(--fg-secondary); margin-top:3px; line-height:1.5}
.pillrow{display:flex; gap:8px; flex-wrap:wrap}
.pill{border:1px solid var(--separator); background:var(--bg-elevated); border-radius:999px; padding:7px 14px; font-size:13px; color:var(--fg-secondary); cursor:pointer; transition:.16s var(--ease)}
.pill:hover{border-color:var(--hairline); color:var(--fg-primary)}
.pill[aria-pressed="true"]{background:var(--accent); color:var(--accent-fg); border-color:transparent; font-weight:600}

/* 뷰어 */
.viewerframe{background:#000; border-radius:18px; padding:0; overflow:hidden; position:relative}
.viewer-stage{position:relative; background:#0b0b0c; padding:28px 28px 0}
.caption{position:absolute; left:50%; transform:translateX(-50%); bottom:16px; background:rgba(0,0,0,.66); color:#fff; font-size:15px; padding:8px 16px; border-radius:10px; max-width:80%; text-align:center; backdrop-filter:blur(8px)}
.vcontrols{display:flex; align-items:center; gap:14px; padding:14px 22px; background:rgba(20,20,22,.9); color:#f5f5f7}
.vcontrols .prog{flex:1; height:4px; background:rgba(255,255,255,.2); border-radius:2px; position:relative; cursor:pointer}
.vcontrols .prog i{display:block; height:100%; background:#fff; border-radius:2px}
.vcontrols .prog .mk{position:absolute; top:-3px; width:2px; height:10px; background:rgba(255,255,255,.45)}
.vcontrols button{color:#f5f5f7; font-size:13px; padding:5px 10px; border-radius:8px}
.vcontrols button:hover{background:rgba(255,255,255,.14)}
.chapter{display:flex; gap:8px; padding:12px 22px; background:rgba(20,20,22,.94); overflow-x:auto; border-top:1px solid rgba(255,255,255,.08)}
.chapter button{color:rgba(255,255,255,.62); font-size:12px; padding:5px 11px; border-radius:999px; white-space:nowrap}
.chapter button[aria-current="true"]{background:rgba(255,255,255,.16); color:#fff}

/* 대본/나레이션 */
.sent{display:flex; gap:10px; padding:10px 12px; border-radius:10px; cursor:pointer; transition:.16s var(--ease); align-items:flex-start}
.sent:hover{background:var(--accent-soft)}
.sent[aria-selected="true"]{background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent) inset}
.sent .tc{font-size:11px; color:var(--fg-tertiary); font-variant-numeric:tabular-nums; padding-top:3px; width:42px; flex:none}
.sent .tx{font-size:13.5px; line-height:1.6}
.sent .st{font-size:11px; flex:none; padding-top:3px}
.wave{height:26px; display:flex; align-items:center; gap:2px}
.wave i{display:block; width:3px; border-radius:2px; background:var(--accent); opacity:.5}

/* 요금제 */
.plan{background:var(--bg-elevated); border:1px solid var(--separator); border-radius:18px; padding:22px; display:flex; flex-direction:column}
.plan.feature{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.plan .pname{font-size:14px; font-weight:700}
.plan .price{font-size:34px; font-weight:700; letter-spacing:-.03em; margin:10px 0 2px; font-variant-numeric:tabular-nums}
.plan .price small{font-size:14px; font-weight:500; color:var(--fg-secondary)}
.plan ul{list-style:none; margin:14px 0 18px; padding:0; display:flex; flex-direction:column; gap:8px; font-size:13px; color:var(--fg-secondary)}
.plan ul li{display:flex; gap:8px; align-items:flex-start}
.plan ul li b{color:var(--fg-primary); font-weight:600}
.featgroup{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-tertiary); margin-top:6px}

/* 반응형 (§8.5) */
@media (max-width:1439px){
  .editor{grid-template-columns:220px minmax(0,1fr)}
  .inspector{position:absolute; right:0; top:52px; bottom:0; width:320px; z-index:15; box-shadow:-16px 0 40px rgba(0,0,0,.12)}
  .g4{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1023px){
  .editor{grid-template-columns:1fr}
  .navigator{display:none}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .flowtabs{display:none}
}

/* ---------- 앱 바 (목업 프로토타입 인바를 대체) ----------
   화면 스위처가 아니다. 브랜드·본체 복귀·서비스 상태·테마만 둔다. */
.appbar{position:sticky; top:0; z-index:80; display:flex; gap:14px; align-items:center;
  padding:10px 18px; background:var(--bg-material); backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--separator)}
.appbar .brand{display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--fg-primary);
  font-size:15px; font-weight:700; letter-spacing:-.01em; white-space:nowrap}
.appbar .brand:hover{opacity:.75}
.appbar .brandsub{font-size:12.5px; color:var(--fg-tertiary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.appbar .apbright{margin-left:auto; display:flex; align-items:center; gap:10px}
.ms-mark{width:26px; height:26px; color:var(--accent); display:block; flex:none}
@media (max-width:760px){.appbar .brandsub{display:none}}

/* ---------- 렌더 서비스 SVG 를 캔버스에 맞춘다 ----------
   ⚠ 서비스가 주는 SVG 는 width="1280" height="720" 고정이라(§6 좌표계),
     그대로 넣으면 컨테이너를 넘쳐 오른쪽이 잘린다(2026-08-18 실측 — 표지
     제목이 중간에서 끊겼다). viewBox 가 있으므로 크기만 100% 로 늦추면
     비율을 지키며 통째로 들어온다. JS 쪽 mountSvg() 와 이중 방어다. */
.deck > svg{width:100% !important; height:100% !important; display:block}

/* ── M4 에디터 ① — 슬롯 선택 오버레이 · 인스펙터 편집기 ─────────────────
   오버레이 좌표는 /v1/layouts 의 실측(1280×720 기준 %)이다.
   목업에 있던 가짜 점선과 다르다 — 그 점선은 지웠다. */
.deck .slotpick{position:absolute; border:1px dashed transparent; border-radius:4px; cursor:pointer; z-index:4}
.deck .slotpick:hover{border-color:var(--accent); background:var(--accent-soft)}
.deck .slotpick.on{border:1.5px solid var(--accent)}
.deck .slotpick .tag{position:absolute; top:3px; left:3px; font-size:11px; font-weight:600; padding:2px 8px; border-radius:6px; background:var(--accent); color:var(--accent-fg); white-space:nowrap; display:none; pointer-events:none}
.deck .slotpick:hover .tag,.deck .slotpick.on .tag{display:block}
.insp-ta{width:100%; min-height:84px; padding:9px 11px; border:1px solid var(--separator); border-radius:9px; background:var(--bg-base); color:var(--fg-primary); font:inherit; font-size:13px; line-height:1.6; resize:vertical}
.insp-ta:focus{outline:none; border-color:var(--accent)}
.insp-ta::placeholder{color:var(--fg-tertiary)}

/* ── M4 에디터 ② — 레이아웃 갤러리 · 네비게이터 도구 ─────────────────── */
.layout-card{position:relative; padding:5px; border:1px solid var(--separator); border-radius:9px; background:var(--bg-elevated); cursor:pointer; display:flex; flex-direction:column; gap:4px}
.layout-card .mini{position:relative; display:block; aspect-ratio:16/9; background:var(--bg-base); border-radius:5px; overflow:hidden}
.layout-card .mini i{position:absolute; background:var(--accent-soft); border:1px solid var(--separator); border-radius:2px}
.layout-card .nm{font-size:10.5px; color:var(--fg-secondary); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.layout-card.cur{box-shadow:0 0 0 2px var(--accent) inset}
.layout-card:disabled{opacity:.35; cursor:not-allowed}
.layout-card:not(:disabled):hover{border-color:var(--accent)}
.thumb{position:relative}
.thumb .tools{display:none; position:absolute; top:3px; right:3px; gap:2px; z-index:3}
.thumb:hover .tools{display:flex}
.thumb .tools button{font-size:10px; line-height:1; padding:3px 5px; border-radius:5px; border:1px solid var(--separator); background:var(--bg-elevated); color:var(--fg-secondary); cursor:pointer}
.thumb .tools button:hover{color:var(--accent); border-color:var(--accent)}

/* ── 테마 팩 — 감마의 테마 갤러리에 해당 ──────────────────────────── */
.packrow{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px}
.pack{display:flex; flex-direction:column; gap:5px; padding:10px 11px; border:1px solid var(--separator); border-radius:10px; background:var(--bg-elevated); cursor:pointer; text-align:left}
.pack .dots{display:flex; gap:4px}
.pack .dots i{width:14px; height:14px; border-radius:50%; border:1px solid var(--separator)}
.pack .pl{font-size:13px; font-weight:600}
.pack .pd{color:var(--fg-tertiary)}
.pack[aria-pressed="true"]{box-shadow:0 0 0 2px var(--accent) inset; border-color:transparent}
.pack:hover{border-color:var(--accent)}

/* 미구현 컨트롤은 눌리는 것처럼 보이지 않게 — disabled 가 곧 정직성이다 */
.opt:disabled{opacity:.45; cursor:not-allowed}
.pill:disabled{opacity:.45; cursor:not-allowed}

/* 소재 — 추출 결과 탭의 표·이미지 미리보기 */
.ex-table{width:100%; border-collapse:collapse; font-size:12px}
.ex-table th,.ex-table td{border:1px solid var(--separator); padding:5px 7px; text-align:left; vertical-align:top}
.ex-table th{background:var(--bg-base); font-weight:600}
.ex-imgs{display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:8px}
.ex-img{border:1px solid var(--separator); border-radius:8px; overflow:hidden; background:var(--bg-base)}
.ex-img img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block}
.ex-img .cap{padding:5px 6px; font-size:10.5px; color:var(--fg-tertiary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ══════════ 코치마커 — 설명은 보고 싶을 때만 ══════════════════════
   원장님 지시(2026-08-21): "모든 지시나 안내문은 코칭마커 스타일로 단계적 안내
   혹은 전체 안내로 보고 싶을 때만. 남는 공간은 슬라이드 작업공간에."

   ⚠ 감추는 것은 **설명**이지 **상태**가 아니다. PHI 경고·준비 중 고지·검증
     결과·렌더 서비스 상태는 사용자가 몰라서는 안 되므로 그대로 둔다. */
.coach-note{display:none}
body.coach-on .coach-note{display:block; padding:7px 11px; border-radius:10px;
  background:var(--accent-soft); border:1px dashed var(--accent);
  color:var(--fg-secondary); font-size:12.5px; line-height:1.6}

/* 안내 단추 — 앱 바 오른쪽 */
.coachbtn{display:inline-flex; align-items:center; gap:6px; padding:4px 10px;
  border-radius:999px; border:1px solid var(--separator); font-size:12px;
  color:var(--fg-secondary); background:var(--bg-elevated)}
.coachbtn[aria-pressed="true"]{border-color:var(--accent); color:var(--accent);
  background:var(--accent-soft)}

/* 단계 안내 — 하나씩 짚어 준다 */
.coach-veil{position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.45);
  display:none}
.coach-veil.on{display:block}
.coach-spot{position:fixed; z-index:81; border-radius:12px; pointer-events:none;
  box-shadow:0 0 0 3px var(--accent), 0 0 0 9999px rgba(0,0,0,.45);
  transition:all .22s var(--ease)}
.coach-pop{position:fixed; z-index:82; max-width:360px; padding:14px 16px;
  border-radius:14px; background:var(--bg-elevated); color:var(--fg-primary);
  box-shadow:var(--shadow-card); border:1px solid var(--separator);
  transition:all .22s var(--ease)}
.coach-pop .t{font-size:14px; font-weight:600; margin-bottom:5px}
.coach-pop .d{font-size:13px; line-height:1.7; color:var(--fg-secondary)}
.coach-pop .row{display:flex; align-items:center; gap:8px; margin-top:12px}
.coach-pop .n{font-size:12px; color:var(--fg-tertiary); font-variant-numeric:tabular-nums;
  margin-right:auto}

/* ── 다음 단계 버튼은 늘 손에 닿아야 한다 ─────────────────────────
   원장님 보고(2026-08-21): 추출 목록이 길어지자 [뼈대 만들기] 가 화면 아래로
   밀려, 브라우저 스크롤바가 없으면 **누를 수가 없었다.**

   그래서 칸을 세로 흐름으로 두고 — 결과 카드만 안에서 스크롤하고,
   안내와 다음 단계 버튼은 자리를 지킨다. 목록이 아무리 길어도 버튼은 보인다. */
.col-flow{display:flex; flex-direction:column; min-height:0; height:100%}
.col-flow>.flow-body{flex:1 1 auto; min-height:0; display:flex; flex-direction:column}
.col-flow .flow-scroll{flex:1 1 auto; min-height:0; overflow:auto}
.col-flow>.flow-cta{flex:0 0 auto}

/* 어두운 화면(리허설·뷰어) 위의 상단 바 — 밝은 화면과 같은 자리, 같은 조작.
   색만 뒤집는다. 발표자가 보는 화면이 아니라 **만드는 사람이 보는 틀**이다. */
.topbar.topbar-dark{
  background:rgba(20,20,22,.86); border-bottom:1px solid rgba(255,255,255,.10);
  color:#f5f5f7;
}
.topbar-dark .home,
.topbar-dark .deckname{color:rgba(255,255,255,.82)}
.topbar-dark .flowtabs{background:rgba(255,255,255,.07)}
.topbar-dark .flowtabs button{color:rgba(255,255,255,.62)}
.topbar-dark .flowtabs button[aria-current="true"]{
  background:rgba(255,255,255,.14); color:#fff}
.topbar-dark .btn.ghost{color:rgba(255,255,255,.72)}
.topbar-dark .btn.ghost:hover{color:#fff}

/* 다음 단계 버튼 — 상단 바 오른쪽, [공유] 왼쪽. 화면이 바뀌어도 같은 자리다.
   ⚠ 예전에는 화면마다 자리가 달랐다(소재는 오른쪽 아래, 스토리보드는 고정바,
     디자인은 카드 안). 매번 눈으로 찾아야 했고, 소재에서는 목록이 길어지면
     화면 밖으로 밀리기까지 했다.
   크기는 글자 폭 + 좌우 한 자씩(1em) — 원장님 지시. */
.topbar .btn.next-step{
  padding:6px 1em; border-radius:9px; font-size:13px; font-weight:600;
  white-space:nowrap; margin-right:8px;
}
.topbar-dark .btn.next-step{color:var(--accent-fg)}

/* ══════ 스토리보드 카드 — 요약이 아니라 내용 ══════════════════════
   ⚠ 예전에는 4열 격자에 첫 문장 90자 + 배지 숫자("표 4행 3열")뿐이었다.
     카드가 작아 글씨가 안 보였고, 정작 표와 그림은 숫자로만 있었다
     (2026-08-21 원장님 지적). 스토리보드가 "내용을 그대로 배열해 주는 자리"
     라면 표도 그림도 실물이어야 한다. 그래서 넓게(1~2열) 두고 다 보여 준다. */
.sb-cols-1{grid-template-columns:1fr}
.sb-cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1100px){.sb-cols-2{grid-template-columns:1fr}}

.sbcard{display:flex; flex-direction:column; gap:8px}
.sbcard .spread{align-items:center}
.sbcard .sbmeta{display:flex; align-items:center; gap:6px}
.sbcard .sblayout{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px; color:var(--fg-tertiary)}
.sbcard .msg{font-size:15px; margin:0}
.sbcard .sblines{margin:0; padding-left:18px; list-style:disc}
.sbcard .sblines li{font-size:13.5px; line-height:1.65; color:var(--fg-secondary)}
.sbcard .sbnote{margin:0}

/* 그림 — 실물 썸네일. 넓이에 맞추되 카드를 잡아먹지 않게 높이를 묶는다 */
.sbcard .sbimg{width:100%; max-height:230px; object-fit:contain;
  background:var(--bg-base); border:1px solid var(--separator); border-radius:9px}
.sb-cols-1 .sbcard .sbimg{max-height:320px}

/* 표 — 슬라이드에 담기는 그 크기 그대로. 좁으면 표만 가로로 흐른다 */
.sbcard .sbtblwrap{overflow-x:auto}
.sbcard .sbtbl{width:100%; border-collapse:collapse; font-size:12.5px}
.sbcard .sbtbl th,.sbcard .sbtbl td{border:1px solid var(--separator);
  padding:5px 8px; text-align:left; vertical-align:top}
.sbcard .sbtbl th{background:var(--accent-soft); color:var(--accent); font-weight:700}
.sbcard .sbtbl tr:nth-child(even) td{background:var(--bg-base)}

/* 고칠 수 있는 자리는 고칠 수 있어 보여야 한다 — 손이 닿으면 밑줄, 누르면 상자 */
.sbed{border-radius:5px; padding:1px 3px; margin:-1px -3px; cursor:text;
  transition:background .14s var(--ease), box-shadow .14s var(--ease)}
.sbed:hover{background:var(--accent-soft)}
.sbed:focus{outline:none; background:var(--bg-canvas);
  box-shadow:0 0 0 2px var(--accent)}
.sbtbl .sbed:focus{box-shadow:0 0 0 2px var(--accent) inset}

/* ══ 스토리보드 구성 도구 — 손이 닿을 때만 드러난다 ═══════════════════
   늘 보이면 카드가 단추 밭이 되고, 없으면 있는 줄을 모른다. Gamma 처럼
   카드에 마우스가 오거나 안에서 편집이 시작될 때만 드러낸다. */
.sbtools,.sbrowtools,.sbadd,.sbfig .sbx,.sbrowx .sbx{
  opacity:0; transition:opacity .14s var(--ease)}
.sbcard:hover .sbtools,.sbcard:focus-within .sbtools,
.sbcard:hover .sbadd,.sbcard:focus-within .sbadd,
.sbcard:hover .sbfig .sbx,.sbcard:focus-within .sbfig .sbx,
.sbcard:hover .sbrowx .sbx,.sbcard:focus-within .sbrowx .sbx{opacity:1}
.sblines li:hover .sbrowtools,.sblines li:focus-within .sbrowtools{opacity:1}
.sbtools:focus-within,.sbrowtools:focus-within,.sbadd:focus-within{opacity:1}

.sbtools{display:flex; align-items:center; gap:3px; flex-shrink:0}
.sbmini{font-size:11px; line-height:1; padding:4px 6px; border-radius:6px;
  border:1px solid var(--separator); background:var(--bg-canvas);
  color:var(--fg-secondary); cursor:pointer; white-space:nowrap}
.sbmini:hover{background:var(--accent-soft); color:var(--accent);
  border-color:var(--accent)}
.sbmini.danger:hover{background:#fdeceb; color:#c0392b; border-color:#c0392b}
.sbx{font-size:12px; line-height:1; width:18px; height:18px; padding:0;
  border-radius:50%; border:1px solid var(--separator); background:var(--bg-canvas);
  color:var(--fg-tertiary); cursor:pointer}
.sbx:hover{background:#fdeceb; color:#c0392b; border-color:#c0392b}

.sbcard .sbmeta{min-width:0; flex-wrap:wrap}
.sblines li{position:relative}
.sbrowtools{display:inline-flex; align-items:center; gap:4px;
  margin-left:6px; vertical-align:middle}
.sbadd{margin-top:-2px}

/* 그림 — 지우기 단추는 그림 위 모서리에 */
.sbfig{position:relative; margin:0}
.sbfig .sbx{position:absolute; top:6px; right:6px;
  background:var(--bg-material,#fff); box-shadow:0 1px 4px rgba(0,0,0,.18)}

/* 표 — 행 지우기 칸은 좁고 조용하게 */
.sbcard .sbtbl th.sbrowx,.sbcard .sbtbl td.sbrowx{
  width:26px; padding:2px; text-align:center; background:transparent;
  border-color:transparent}

/* 끌 수 없는데 손잡이 모양이면 거짓말이다 — 카드 순서는 ↑↓ 단추로 옮긴다 */
.sbcard{cursor:default}
/* 예비 장은 발표에 나가지 않는다. 배지만으로는 훑을 때 눈에 안 띈다 */
.sbcard.hidden-slide{opacity:.55; border-style:dashed}
.sbcard.hidden-slide:hover,.sbcard.hidden-slide:focus-within{opacity:1}