@charset "UTF-8";

/* =========================================================
   UI Studio — スライド投影アプリ
   サムネイルの配色トークンをそのまま設計トークンに使用
   ========================================================= */

:root{
  /* 配色（サムネイル準拠） */
  --bg:        #FAFAF7;   /* メイン背景：オフホワイト */
  --bg-2:      #F3F4F6;   /* 補助背景：ごく薄いクールグレー */
  --surface:   #FFFFFF;
  --ink:       #17171B;   /* 本文・見出し：ほぼ黒 */
  --ink-2:     #4C4C57;
  --ink-3:     #8B8B96;
  --ink-4:     #B4B4BE;
  --accent:    #6040FF;   /* アクティブ色：鮮やかな紫 */
  --accent-d:  #4A2EE0;
  --accent-s:  #EEEBFF;   /* 紫の淡色面 */
  --lime:      #DFFF00;   /* 蛍光ライム */
  --line:      #D9DADF;   /* 境界線 */
  --line-2:    #E9EAEE;

  /* 形 */
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 18px;
  --r-xl: 24px;

  /* 寸法 */
  --toolbar-h: 60px;
  --infobar-h: 48px;
  --rail-w: 58px;
  --panel-w: 284px;

  /* キャンバスの余白（js/app.js の fit() と対応させる） */
  --canvas-pad-x: 40px;
  --canvas-pad-y: 38px;

  /* モーション：状態変化＝速く、面の入れ替え＝ゆっくり収まる */
  --t-fast: .16s;
  --t-mid:  .26s;
  --t-slow: .34s;
  --e-out:  cubic-bezier(.33, 0, .2, 1);   /* 立ち上がりが速く、静かに止まる */
  --e-settle: cubic-bezier(.16, 1, .3, 1); /* 行き先へ吸い込まれるように収まる */

  --font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic",
          "Noto Sans JP", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "SF Mono", "SFMono-Regular", "Menlo", "Consolas", monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  font-feature-settings:"palt" 1;
}
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
button:focus-visible{
  outline:3px solid color-mix(in srgb, var(--accent) 72%, white);
  outline-offset:3px;
}
img{ max-width:100%; display:block; }

.ic{
  width:16px; height:16px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}

#app{
  height:100%;
  display:grid;
  grid-template-rows:var(--toolbar-h) 1fr;
}

/* =========================================================
   A. 上部ツールバー
   ========================================================= */
.toolbar{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  padding:0 16px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  position:relative; z-index:30;
}
.tb-left{ display:flex; align-items:center; gap:12px; min-width:0; }
.tb-logo{ height:19px; width:auto; }
.tb-divider{ width:1px; height:18px; background:var(--line); flex:none; }
.tb-file{ display:flex; align-items:baseline; gap:8px; min-width:0; }
.tb-filename{ font-size:13px; font-weight:600; letter-spacing:.01em; }
.tb-ext{ font-size:13px; color:var(--ink-4); margin-left:-7px; }
.tb-saved{
  font-size:10.5px; color:var(--ink-3); letter-spacing:.04em;
  border:1px solid var(--line); border-radius:99px; padding:2px 8px; white-space:nowrap;
}

/* セグメント型コントロール */
.tb-center{ display:flex; justify-content:center; }
.segmented{
  position:relative;
  display:flex;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:10px;
  padding:3px;
}
.segmented button{
  position:relative; z-index:2;
  min-width:104px; height:28px;
  font-size:13px; font-weight:600; letter-spacing:.02em;
  color:var(--ink-3);
  border-radius:7px;
  transition:color .18s ease;
}
.segmented button.is-active{ color:var(--ink); }
.seg-thumb{
  position:absolute; z-index:1; top:3px; left:3px;
  width:calc(50% - 3px); height:calc(100% - 6px);
  background:var(--surface);
  border-radius:7px;
  box-shadow:0 1px 2px rgba(23,23,27,.10), 0 0 0 1px rgba(23,23,27,.04);
  transition:transform var(--t-slow) var(--e-settle);
}
.tb-right{ display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.slide-controls{ display:flex; align-items:center; gap:8px; }

.timer{
  display:flex; align-items:center; gap:7px;
  height:30px; padding:0 11px;
  border:1px solid var(--line); border-radius:8px;
  background:var(--surface);
  transition:border-color .15s ease, background .15s ease;
}
.timer:hover{ border-color:var(--ink-4); }
.timer .ic{ width:14px; height:14px; color:var(--ink-3); }
.timer-val{ font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.timer-plan{ font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.timer.is-running{ border-color:var(--accent); background:var(--accent-s); }
.timer.is-running .ic{ color:var(--accent); }
.timer.is-behind .timer-plan{ color:#D0342C; font-weight:600; }

.btn-ghost{
  display:flex; align-items:center; gap:6px;
  height:30px; padding:0 12px;
  font-size:12.5px; font-weight:600; color:var(--ink-2);
  border:1px solid var(--line); border-radius:8px; background:var(--surface);
  white-space:nowrap;
  transition:border-color .15s ease, color .15s ease;
}
.btn-ghost:hover{ border-color:var(--ink-4); color:var(--ink); }
.demo-link{ text-decoration:none; }
.btn-primary{
  display:flex; align-items:center; gap:7px;
  height:30px; padding:0 14px;
  font-size:12.5px; font-weight:700; letter-spacing:.02em;
  color:#fff; background:var(--accent); border-radius:8px;
  transition:background .15s ease;
}
.btn-primary:hover{ background:var(--accent-d); }

/* =========================================================
   本体レイアウト
   ========================================================= */
.workspace{
  display:grid;
  grid-template-columns:1fr;
  min-height:0;
  background:var(--bg);
}

/* B. ツールレール */
.rail{
  display:flex; flex-direction:column; align-items:center;
  gap:4px; padding:12px 0;
  background:var(--surface);
  border-right:1px solid var(--line);
}
.rail-btn{
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:9px; color:var(--ink-3);
  transition:background .15s ease, color .15s ease;
}
.rail-btn .ic{ width:19px; height:19px; }
.rail-btn:hover{ background:var(--bg-2); color:var(--ink); }
.rail-btn.is-active{ background:var(--accent-s); color:var(--accent); }
.rail-sep{ flex:1; }
.rail-help{ color:var(--ink-4); }

/* 左パネル */
.panel{
  display:flex; flex-direction:column; min-height:0;
  background:var(--surface);
  border-right:1px solid var(--line);
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  height:42px; padding:0 18px;
  border-bottom:1px solid var(--line-2);
  flex:none;
}
.panel-title{ font-size:11px; font-weight:700; letter-spacing:.10em; color:var(--ink-3); }
.panel-count{ font-size:11px; color:var(--ink-4); font-variant-numeric:tabular-nums; }
.panel-body{ overflow-y:auto; overscroll-behavior:contain; padding:10px 0 28px; flex:1; }
.panel-body::-webkit-scrollbar{ width:8px; }
.panel-body::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px; border:2px solid var(--surface); }

/* セクション一覧 */
.sec{ padding:1px 10px; }
.sec-head{
  display:grid; grid-template-columns:18px 1fr auto; gap:10px;
  align-items:start;
  width:100%; padding:10px 10px;
  border-radius:9px; text-align:left;
  transition:background var(--t-fast) var(--e-out);
}
.sec-head:hover{ background:var(--bg-2); }
.sec-no{
  font-size:10.5px; font-weight:700; color:var(--ink-4);
  font-variant-numeric:tabular-nums; letter-spacing:.04em;
  line-height:1.6;
}
.sec-name{ font-size:12.5px; font-weight:600; line-height:1.5; min-width:0; }
.sec-time{ font-size:10px; color:var(--ink-4); font-variant-numeric:tabular-nums; line-height:2; }
.sec.is-current .sec-head{ background:var(--accent-s); }
.sec.is-current .sec-no,
.sec.is-current .sec-name{ color:var(--accent); }
.sec.is-current .sec-time{ color:var(--accent); opacity:.7; }
.sec.is-done .sec-no,
.sec.is-done .sec-name{ color:var(--ink-4); }

.sec-list{ padding:3px 0 8px 10px; margin-left:20px; border-left:1px solid var(--line-2); }
.sec-item{
  display:flex; align-items:center; gap:9px;
  width:100%; padding:6px 9px;
  border-radius:7px; text-align:left;
  color:var(--ink-2);
  transition:background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.sec-item:hover{ background:var(--bg-2); color:var(--ink); }
.sec-item-n{ font-size:10px; color:var(--ink-4); font-variant-numeric:tabular-nums; width:16px; flex:none; }
.sec-item-t{
  font-size:11.5px; line-height:1.4; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sec-item.is-current{ background:var(--ink); color:#fff; }
.sec-item.is-current .sec-item-n{ color:rgba(255,255,255,.55); }

/* ノートパネル */
.notes-wrap{ padding:14px 16px 20px; }
.notes-meta{
  display:flex; align-items:center; gap:8px;
  font-size:10.5px; color:var(--ink-3); letter-spacing:.04em;
  margin-bottom:10px;
}
.notes-chip{
  background:var(--bg-2); border-radius:99px; padding:2px 8px;
  font-weight:600; color:var(--ink-2);
}
.notes-title{ font-size:13.5px; font-weight:700; line-height:1.5; margin:0 0 10px; }
.notes-body{ font-size:12px; line-height:1.85; color:var(--ink-2); white-space:pre-wrap; margin:0; }
.notes-next{
  margin-top:18px; padding-top:14px; border-top:1px dashed var(--line);
  font-size:11px; color:var(--ink-3); line-height:1.7;
}
.notes-next b{ display:block; font-size:10px; letter-spacing:.08em; color:var(--ink-4); margin-bottom:4px; }

/* アウトラインパネル */
.outline{ padding:6px 10px 20px; }
.ol-sec{ margin-bottom:14px; }
.ol-sec-h{
  display:flex; align-items:baseline; gap:8px;
  font-size:10.5px; font-weight:700; letter-spacing:.06em; color:var(--ink-3);
  padding:6px 6px 4px;
}
.ol-row{
  display:flex; gap:8px; width:100%; text-align:left;
  padding:5px 6px; border-radius:7px; transition:background .12s;
}
.ol-row:hover{ background:var(--bg-2); }
.ol-row.is-current{ background:var(--accent-s); }
.ol-n{ font-size:10px; color:var(--ink-4); font-variant-numeric:tabular-nums; flex:none; width:16px; padding-top:2px; }
.ol-t{ font-size:11.5px; line-height:1.5; color:var(--ink-2); }
.ol-row.is-current .ol-t{ color:var(--accent); font-weight:600; }

/* =========================================================
   C. キャンバス
   ========================================================= */
.canvas{
  position:relative;
  display:flex; flex-direction:column; min-width:0; min-height:0;
  background:var(--bg);
}
.canvas-scroll{
  flex:1; min-height:0;
  display:grid; place-items:center;
  padding:var(--canvas-pad-y) var(--canvas-pad-x);
}
.artboard-slot{ position:relative; }

/* 選択枠（サムネイルのモチーフ） */
.selection{ position:relative; }
.selection::after{
  content:""; position:absolute; inset:-9px;
  border:1.5px solid var(--accent);
  border-radius:3px;
  pointer-events:none;
  transition:opacity .2s ease;
}
.sel-tag{
  position:absolute; left:-9px; bottom:calc(100% + 13px);
  display:flex; align-items:center; gap:7px;
  height:21px; padding:0 9px;
  background:var(--accent); color:#fff;
  font-size:10.5px; font-weight:700; letter-spacing:.05em;
  border-radius:4px; white-space:nowrap;
}
.sel-tag em{ font-style:normal; opacity:.65; font-weight:600; }
.handle{
  position:absolute; width:9px; height:9px;
  background:#fff; border:1.5px solid var(--accent); border-radius:2px;
  pointer-events:none; z-index:3;
}
.handle.tl{ left:-13.5px; top:-13.5px; }
.handle.tr{ right:-13.5px; top:-13.5px; }
.handle.bl{ left:-13.5px; bottom:-13.5px; }
.handle.br{ right:-13.5px; bottom:-13.5px; }
.selection::after,
.sel-tag,
.handle{ display:none; }

.stage{
  position:relative; overflow:hidden;
  background:var(--surface);
  box-shadow:0 1px 2px rgba(23,23,27,.06), 0 10px 34px -12px rgba(23,23,27,.20);
}

/* スライドは重ねた層として差し替える。
   新しい層は不透明になりながら前の層の上に重なるので、
   切替の途中で下地（白／黒）が覗くことがない。 */
.slide-layer{ position:absolute; inset:0; }
.slide-layer > .slide{ position:absolute; top:0; left:0; }
.slide-layer.is-enter{ opacity:0; }
.slide-layer.is-enter.from-next{ transform:scale(1.018); }
.slide-layer.is-enter.from-back{ transform:scale(1.006); }
.slide-layer.is-anim{
  transition:opacity var(--t-slow) var(--e-out), transform .62s var(--e-settle);
  will-change:opacity, transform;
}

/* キャンバス下部のバー */
.canvas-bar{
  flex:none;
  display:flex; align-items:center; gap:10px;
  height:44px; padding:0 18px;
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(8px);
}
.nav-btn{
  width:28px; height:28px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:8px; background:var(--surface);
  color:var(--ink-2);
  transition:border-color .15s, color .15s;
}
.nav-btn:hover{ border-color:var(--ink); color:var(--ink); }
.nav-btn:disabled{ opacity:.35; cursor:default; }
.counter{ display:flex; align-items:baseline; gap:4px; font-variant-numeric:tabular-nums; }
.counter b{ font-size:13px; font-weight:700; }
.counter span{ font-size:11.5px; color:var(--ink-3); }
.canvas-bar-sep{ width:1px; height:16px; background:var(--line); }
.crumb{
  display:flex; align-items:center; gap:8px;
  font-size:11.5px; color:var(--ink-3); min-width:0;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.crumb b{ color:var(--ink-2); font-weight:600; }
.crumb i{ font-style:normal; color:var(--ink-4); }

/* =========================================================
   F. 下部の情報バー
   ========================================================= */
.infobar{
  display:grid; grid-template-columns:1fr minmax(180px,420px) 1fr;
  align-items:center; gap:20px;
  padding:0 18px;
  background:var(--surface);
  border-top:1px solid var(--line);
}
.ib-left,.ib-right{ display:flex; align-items:center; gap:12px; }
.ib-right{ justify-content:flex-end; }
.ib-item{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.ib-item .ic{ width:14px; height:14px; color:var(--ink-4); }
.ib-muted{ color:var(--ink-3); letter-spacing:.04em; }
.ib-center{ display:flex; align-items:center; }
.progress{
  position:relative; width:100%; height:4px;
  background:var(--bg-2); border-radius:99px; overflow:hidden;
}
.progress-fill{
  position:absolute; inset:0 auto 0 0; width:0;
  background:var(--accent); border-radius:99px;
  transition:width .5s var(--e-settle);
}
.progress-ticks{ position:absolute; inset:0; }
.progress-ticks i{ position:absolute; top:0; bottom:0; width:1px; background:rgba(255,255,255,.9); }

/* =========================================================
   オーバーレイ（一覧・ヘルプ）
   ========================================================= */
.overlay{
  position:fixed; inset:0; z-index:60;
  background:rgba(250,250,247,.94);
  backdrop-filter:saturate(180%) blur(14px);
  display:flex; flex-direction:column;
  opacity:0;
  transition:opacity var(--t-mid) var(--e-out);
}
.overlay.is-in{ opacity:1; }
.overlay[hidden]{ display:none; }
.overlay-head{
  flex:none; display:flex; align-items:center; gap:16px;
  height:58px; padding:0 24px; border-bottom:1px solid var(--line);
}
.overlay-title{ font-size:12px; font-weight:700; letter-spacing:.10em; color:var(--ink-3); }
.overlay-filter{ display:flex; gap:6px; flex:1; overflow-x:auto; }
.filter-chip{
  height:26px; padding:0 12px; border-radius:99px;
  border:1px solid var(--line); background:var(--surface);
  font-size:11.5px; font-weight:600; color:var(--ink-2); white-space:nowrap;
  transition:.14s;
}
.filter-chip:hover{ border-color:var(--ink-4); }
.filter-chip.is-active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.overlay-body{
  flex:1; overflow-y:auto; padding:24px;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(258px,1fr)); gap:20px 18px;
  align-content:start;
}
.thumb{ text-align:left; }
.thumb-frame{
  position:relative; width:100%; aspect-ratio:16/9;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-s);
  overflow:hidden;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.thumb:hover .thumb-frame{ border-color:var(--accent); box-shadow:0 6px 22px -8px rgba(96,64,255,.4); transform:translateY(-2px); }
.thumb.is-current .thumb-frame{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); }
.thumb-frame .slide{ transform-origin:top left; position:absolute; top:0; left:0; }
.thumb-meta{ display:flex; align-items:baseline; gap:7px; margin-top:8px; padding:0 2px; }
.thumb-n{ font-size:10.5px; font-weight:700; color:var(--ink-4); font-variant-numeric:tabular-nums; }
.thumb-t{ font-size:11.5px; color:var(--ink-2); line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.overlay-help{ align-items:center; justify-content:center; }
.help-card{
  width:min(560px, calc(100vw - 48px));
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:0 24px 60px -20px rgba(23,23,27,.28);
  overflow:hidden;
  transform:translateY(10px) scale(.99);
  transition:transform var(--t-slow) var(--e-settle);
}
.overlay.is-in .help-card{ transform:none; }
.help-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line-2); }
.help-list{ margin:0; padding:8px 20px 20px; }
.help-list > div{ display:flex; align-items:center; gap:14px; padding:8px 0; border-bottom:1px solid var(--line-2); }
.help-list > div:last-child{ border-bottom:0; }
.help-list dt{ display:flex; gap:5px; width:132px; flex:none; }
.help-list dd{ margin:0; font-size:12.5px; color:var(--ink-2); }
kbd{
  display:inline-grid; place-items:center; min-width:24px; height:22px; padding:0 6px;
  font-family:var(--font); font-size:11px; font-weight:600;
  background:var(--bg-2); border:1px solid var(--line); border-bottom-width:2px;
  border-radius:5px; color:var(--ink-2);
}

.blackout{ position:fixed; inset:0; background:#000; z-index:90; }
.blackout[hidden]{ display:none; }

/* 狭い画面 */
@media (max-width:1180px){
  :root{ --panel-w:244px; --canvas-pad-x:28px; --canvas-pad-y:30px; }
}
@media (max-width:920px){
  .workspace{ grid-template-columns:1fr; }
  .tb-file{ display:none; }
}

@media (max-width:640px){
  :root{
    --toolbar-h:56px;
    --infobar-h:0px;
    --canvas-pad-x:14px;
    --canvas-pad-y:26px;
  }
  #app{ grid-template-rows:var(--toolbar-h) 1fr; }
  .toolbar{
    grid-template-columns:1fr auto;
    gap:8px;
    padding:0 10px;
  }
  .tb-left,
  .toolbar .tb-divider,
  .timer-plan,
  .btn-primary{ display:none; }
  .tb-center{ justify-content:flex-start; min-width:0; }
  .segmented{ width:min(228px, 100%); }
  .segmented button{ min-width:0; width:50%; height:34px; }
  .tb-right{ gap:6px; }
  .slide-controls{ gap:4px; }
  .timer,
  .btn-ghost{
    min-width:44px;
    height:44px;
    padding:0 10px;
    justify-content:center;
    white-space:nowrap;
  }
  .btn-ghost{ font-size:0; }
  .btn-ghost .ic{ width:18px; height:18px; }
  .workspace{ grid-template-columns:1fr; }
  .rail,
  .infobar{ display:none; }
  .canvas-bar{ padding:0 12px; }
  .canvas-bar-sep,
  .crumb{ display:none; }
  .selection::after{ inset:-6px; }
  .sel-tag{ left:-6px; bottom:calc(100% + 10px); }
  .overlay-head{ padding:10px 12px; gap:8px; }
  .overlay-filter{ overflow-x:auto; justify-content:flex-start; }
  .overlay-body{ padding:14px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}

/* =========================================================
   親アジェンダ（部）— 左パネル
   セクションの上に1階層。セクション行より弱く、地の色で束ねる
   ========================================================= */
.pgrp{ margin:0 0 6px; padding:0 0 6px; border-bottom:1px solid var(--line-2); }
.pgrp:last-child{ border-bottom:0; }
.pgrp-h{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px 8px;
  font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--ink-3);
}
.pgrp-no{
  padding:2px 7px; border-radius:5px;
  background:var(--bg-2); color:var(--ink-2);
}
.pgrp-name{ flex:1; color:var(--ink-2); letter-spacing:.02em; }
.pgrp-p{ color:var(--ink-4); font-variant-numeric:tabular-nums; }
.pgrp.is-current .pgrp-no{ background:var(--accent); color:#fff; }
.pgrp.is-current .pgrp-name{ color:var(--accent); }

/* アウトライン表示の部見出し */
.ol-part{
  margin:14px 0 6px; padding:6px 10px;
  font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--ink-2);
  background:var(--bg-2); border-radius:6px;
}
.outline > .ol-part:first-child{ margin-top:0; }

/* パンくずの部バッジ */
.cb-part{
  display:inline-flex; align-items:center; padding:2px 8px; margin-right:10px;
  border-radius:5px; background:var(--accent-s); color:var(--accent);
  font-size:11px; font-weight:700; letter-spacing:.06em;
}

/* Copy / enlargement dialogs and complete-deck printing. */
dialog{border:1px solid var(--line);padding:20px;border-radius:14px;box-shadow:0 16px 80px #0005;color:var(--ink);background:var(--surface)}dialog::backdrop{background:#111827bd}.media-dialog{width:min(1440px,96vw);height:min(1050px,96vh);max-width:96vw;max-height:96vh}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;font-size:16px;font-weight:600}.dialog-head button{border:1px solid var(--line);border-radius:7px;padding:10px 14px;font-size:14px;min-height:44px}#expandedImage{width:100%;height:calc(100% - 60px);object-fit:contain;object-position:center}.prompt-dialog{width:min(1000px,92vw);height:min(860px,90vh)}#promptFullText{display:block;width:100%;height:calc(100% - 130px);resize:none;border:1px solid var(--line);border-radius:8px;padding:20px;font:16px/1.8 var(--font);color:var(--ink);background:#fafafa}.dialog-actions{display:flex;align-items:center;gap:16px;margin-top:16px}.dialog-actions .prompt-copy{font-size:16px}.dialog-actions p{font-size:14px}#printDeck{display:none}
@media(max-width:760px){.toolbar{grid-template-columns:auto 1fr;gap:6px;padding:6px 10px;height:auto}.tb-left{display:none}.tb-center{justify-content:flex-start}.tb-right{gap:6px}.tb-right .btn-ghost{font-size:11px;padding:0 8px}.tb-right .demo-link{display:none}:root{--canvas-pad-x:12px;--canvas-pad-y:16px}dialog{padding:12px}.dialog-head{font-size:14px}#promptFullText{font-size:15px;padding:12px}.dialog-actions{gap:8px}}
@media print{@page{size:1280px 720px;margin:0}html,body{width:1280px;height:auto!important;overflow:visible!important;background:white}#app,dialog,.overlay,.blackout{display:none!important}#printDeck{display:block!important}#printDeck .slide{transform:none!important;break-inside:avoid;break-after:page;page-break-after:always;print-color-adjust:exact;-webkit-print-color-adjust:exact}#printDeck .slide:last-child{break-after:auto;page-break-after:auto}.prompt-copy,.text-button,.ui-enlarge-hint,.copy-status{visibility:hidden}.ui-image-button{box-shadow:none}a{color:inherit}}
@media print{.bonus-link{display:none}.bonus-body::after{content:'試し読み・受け取り方法は、主催者の案内をご確認ください。';display:block;font-size:25px;line-height:1.5}}