/* スライド編集ツール(A案) — 道具の枠。クラスは st- 接頭辞。
   色: ベース=ミント / メイン=黒 / アクセント=オレンジ(現在地・編集中だけ) + 無彩色
   余白: 4/8/16/24/32/48 のみ。文字: 20/16/14/12 の4段。角丸: 16/12/8 の3種 */
:root{
  --bg:#EAF7F5; --mint:#A8E0DB; --ink:#111111; --orange:#FF6A2A;
  --w:#FFFFFF; --g1:#F2F3F3; --g2:#DCDCDC; --g3:#9A9A9A; --g4:#5F5F5F;
  --font:-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);
}
html,body{height:100%;}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.6;
  overflow:hidden;-webkit-text-size-adjust:100%;
}
[hidden]{display:none !important;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation;}
button:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}

.st-app{display:flex;flex-direction:column;height:100vh;height:100dvh;}

/* ---------- ヘッダー ---------- */
.st-head{
  flex:none;background:var(--w);border-bottom:1px solid var(--g2);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"left pg" "tabs tabs";align-items:center;
  padding:env(safe-area-inset-top,0px) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));
}
.st-head-left{grid-area:left;display:flex;align-items:center;gap:8px;height:56px;min-width:0;}
.st-title{font-size:20px;font-weight:800;line-height:1.3;white-space:nowrap;}
.st-icon-btn{display:none;width:44px;height:44px;border-radius:12px;font-size:20px;align-items:center;justify-content:center;background:var(--g1);}
.st-pg{grid-area:pg;height:56px;display:flex;align-items:center;font-size:16px;white-space:nowrap;}
.st-pg-now{font-weight:800;color:var(--ink);}
.st-pg-all{color:var(--g4);margin-left:4px;}
.st-tabs-wrap{grid-area:tabs;margin:0 -16px;min-width:0;}
.st-tabs{
  display:flex;gap:8px;overflow-x:auto;padding:0 16px 8px;scrollbar-width:none;
  scroll-padding:0 32px;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 8px,#000 calc(100% - 8px),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 8px,#000 calc(100% - 8px),transparent 100%);
}
.st-tabs::-webkit-scrollbar{display:none;}
.st-tab{flex:none;height:44px;padding:0 16px;border-radius:12px;white-space:nowrap;color:var(--g4);font-size:16px;line-height:1;}
.st-tab:hover{background:var(--g1);}
.st-tab[aria-selected="true"]{background:var(--ink);color:var(--w);}
.st-tab .short{display:none;}
@media (max-width:767px){
  .st-tab .long{display:none;} .st-tab .short{display:inline;}
}
@media (min-width:1024px){
  .st-head{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"left tabs pg";}
  .st-tabs-wrap{margin:0;}
  .st-tabs{padding:0;-webkit-mask-image:none;mask-image:none;overflow:visible;}
  .st-pg{justify-self:end;}
}
@media (max-width:1023px){
  body[data-toc="1"] .st-icon-btn{display:flex;}
}
/* 発表者ツール: タブ以外のヘッダー要素は出さない */
body[data-mode="present"] .st-head-left,
body[data-mode="present"] .st-pg{display:none;}
body[data-mode="present"] .st-head{padding-top:calc(env(safe-area-inset-top,0px) + 8px);}

/* ---------- 本体 ---------- */
.st-body{flex:1;min-height:0;display:flex;}
.st-toc{display:none;}
body[data-toc="1"] .st-toc{display:block;}
.st-toc{
  width:280px;flex:none;overflow-y:auto;background:var(--w);border-radius:16px;
  margin:16px 0 16px max(16px,env(safe-area-inset-left));padding:8px;
}
@media (max-width:1023px){
  .st-toc{
    position:fixed;top:0;left:0;bottom:0;z-index:30;width:min(80vw,320px);margin:0;border-radius:0 16px 16px 0;
    padding:calc(env(safe-area-inset-top,0px) + 8px) 8px calc(8px + var(--safe-b));
    transform:translateX(-105%);transition:transform .2s ease;
  }
  .st-toc.open{transform:none;}
}
.st-backdrop{display:none;position:fixed;inset:0;z-index:20;background:rgba(17,17,17,.4);}
.st-backdrop.open{display:block;}

.st-toc-row{
  position:relative;display:flex;gap:8px;align-items:flex-start;width:100%;text-align:left;
  min-height:48px;padding:8px 8px 8px 16px;border-radius:8px;
}
.st-toc-row:hover{background:var(--g1);}
.st-toc-row[aria-current="true"]{background:var(--mint);box-shadow:inset 4px 0 0 var(--orange);}
.st-toc-row.is-section{font-weight:800;margin-top:24px;}
.st-toc-row:first-child{margin-top:0;}
.st-toc-n{flex:0 0 24px;font-size:12px;line-height:24px;color:var(--g4);font-weight:400;}
.st-toc-t{flex:1;min-width:0;font-size:16px;line-height:1.6;word-break:auto-phrase;overflow-wrap:break-word;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
.st-toc-body{flex:1;min-width:0;}
.st-ph{display:inline-block;max-width:100%;}
.st-tag{display:inline-block;margin-top:4px;padding:0 8px;border-radius:8px;background:var(--g1);color:var(--ink);font-size:12px;line-height:24px;font-weight:400;}
.st-toc-row[aria-current="true"] .st-tag{background:var(--w);}

.st-main{
  flex:1;min-width:0;overflow-y:auto;overflow-x:hidden;position:relative;
  padding:16px max(16px,env(safe-area-inset-right)) calc(16px + var(--safe-b)) 16px;
}
body:not([data-toc="1"]) .st-main{padding-left:max(16px,env(safe-area-inset-left));}

/* ---------- スライド表示 ---------- */
.st-fit{
  position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:16px;background:var(--mint);--s:.2;
}
.st-fit>.slide{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--s));user-select:none;-webkit-user-select:none;}
.st-wrap{margin:0 auto;width:100%;}
@media (min-width:1024px){
  .st-wrap.is-fit{max-width:calc((100dvh - 200px) * 16 / 9);}
}
.st-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px;}
.st-nav-btn{width:44px;height:44px;border-radius:12px;background:var(--w);border:1px solid var(--g2);font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;}
.st-nav-btn:disabled{color:var(--g3);cursor:default;}
.st-caption{display:none;flex:1;min-width:0;text-align:center;font-size:16px;font-weight:800;line-height:1.6;word-break:auto-phrase;overflow-wrap:break-word;}
@media (max-width:767px){
  .st-caption{display:block;}
}
.st-btn{height:44px;min-width:44px;padding:0 16px;border-radius:12px;background:var(--w);border:1px solid var(--g2);font-size:16px;line-height:1;white-space:nowrap;}
.st-btn:hover{background:var(--g1);}
.st-btn.primary{background:var(--ink);color:var(--w);border-color:var(--ink);}
.st-btn.primary:hover{background:#333;}

/* ---------- 一覧 / PDF プレビュー ---------- */
.st-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
@media (min-width:768px){.st-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (min-width:1024px){.st-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
.st-thumb{display:block;width:100%;text-align:left;background:var(--w);border-radius:12px;padding:8px;border:2px solid transparent;min-width:0;}
.st-thumb[aria-current="true"]{border-color:var(--orange);}
.st-thumb .st-fit{border-radius:8px;pointer-events:none;}
.st-thumb-cap{display:flex;gap:8px;align-items:baseline;margin-top:8px;min-width:0;}
.st-thumb-n{flex:none;font-size:12px;color:var(--g4);}
.st-thumb-t{flex:1;min-width:0;font-size:14px;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.st-thumb-cap .st-tag{margin:0;flex:none;}
.st-static .st-thumb{cursor:default;}

/* ---------- スクロール ---------- */
.st-scroll-item{margin-bottom:24px;}
.st-scroll-item:last-child{margin-bottom:0;}
.st-scroll-label{font-size:12px;line-height:24px;color:var(--g4);margin-bottom:4px;}
.st-scroll-label[aria-current="true"]{color:var(--ink);font-weight:700;}

/* ---------- メモ ---------- */
.st-split{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;}
@media (min-width:1024px){.st-split{grid-template-columns:minmax(0,1fr) 320px;align-items:start;}}
.st-panel{background:var(--w);border-radius:16px;padding:16px;min-width:0;}
.st-panel-h{font-size:14px;font-weight:700;color:var(--g4);margin-bottom:8px;line-height:1.6;}
.st-memo{width:100%;min-height:160px;resize:vertical;border:1px solid var(--g2);border-radius:12px;padding:16px;font:inherit;font-size:16px;line-height:1.6;background:var(--w);color:var(--ink);}
.st-status{font-size:12px;line-height:24px;color:var(--g4);min-height:24px;margin-top:8px;}

/* ---------- 編集 ---------- */
.st-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:16px;}
.st-badge{display:inline-flex;align-items:center;height:32px;padding:0 16px;border:2px solid var(--orange);border-radius:999px;font-size:14px;font-weight:800;color:var(--ink);background:var(--w);}
.st-hint{font-size:14px;color:var(--g4);}
.st-editing [data-st-edit]{cursor:text;}
.st-editing [data-st-edit]:hover,.st-editing [data-st-edit]:focus{outline:8px dashed rgba(255,106,42,.6);outline-offset:8px;}
.st-editing .slide{user-select:text;-webkit-user-select:text;}

/* ---------- 発表者ツール ---------- */
.st-pres{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;}
@media (min-width:1024px){.st-pres{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:start;}}
.st-pres-side{display:flex;flex-direction:column;gap:16px;min-width:0;}
.st-pres-btns{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:16px;}
.st-pres-next .st-fit{border-radius:8px;}
.st-pres-memo{font-size:16px;line-height:1.6;white-space:pre-wrap;overflow-wrap:break-word;min-height:96px;}
.st-pres-memo.is-empty{color:var(--g4);}
.st-timer{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;}
.st-timer-n{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;min-width:96px;}
.st-fs{position:fixed;inset:0;z-index:50;background:var(--ink);display:flex;align-items:center;justify-content:center;}
.st-fs .st-fit{width:min(100vw,calc(100vh * 16 / 9));width:min(100vw,calc(100dvh * 16 / 9));border-radius:0;}
.st-fs-close{position:absolute;top:calc(8px + env(safe-area-inset-top,0px));right:max(8px,env(safe-area-inset-right));}

/* ---------- PDF ---------- */
.st-pdf-note{font-size:14px;color:var(--g4);margin:8px 0 0;}
.st-pdf-head{margin-bottom:16px;}

/* ---------- 印刷 ---------- */
#st-print{display:none;}
@page{size:1920px 1080px;margin:0;}
@media print{
  html,body{height:auto !important;overflow:visible !important;background:#fff;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .st-app,.st-fs,.st-chrome{display:none !important;}
  #st-print{display:block !important;}
  #st-print .slide{position:relative !important;transform:none !important;margin:0 !important;break-after:page;page-break-after:always;}
  #st-print .slide:last-child{break-after:auto;page-break-after:auto;}
}
