/* 分割ボード：外枠 */
.sb-app {
  display: flex; flex-direction: column; background: var(--bg);
  height: calc(100vh - var(--hdr, 56px)); height: calc(100dvh - var(--hdr, 56px)); min-height: 360px;
}
.sb-toolbar {
  position: relative; z-index: 40; flex: none; padding: 0.45rem 0.75rem;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.sb-tbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.sb-title { margin: 0 auto 0 0; font-size: 1rem; font-weight: 700; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.sb-btn[hidden] { display: none; }
.sb-menu {
  position: absolute; top: 100%; right: 0.5rem; z-index: 45; width: min(24rem, calc(100% - 1rem));
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; padding: 0.7rem 0.8rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.sb-menu[hidden] { display: none; }
.sb-menu .sb-quick { width: 100%; }
.sb-chk { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.85rem; font-weight: 400; color: var(--text); cursor: pointer; }
.sb-chk input { width: auto; margin: 0; }
.sb-ratio-label { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; font-size: 0.85rem; font-weight: 400; color: var(--text-sub); }

.sb-btn {
  font: inherit; font-size: 0.85rem; padding: 0.35rem 0.7rem; cursor: pointer;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text);
  width: auto; margin: 0;
}
.sb-btn:hover { border-color: var(--pt-accent, #2563eb); }
.sb-btn.is-on { border-color: var(--pt-accent, #2563eb); color: var(--pt-accent, #2563eb); }
.sb-btn-main { font-size: 1rem; padding: 0.6rem 1.4rem; background: var(--pt-accent, #2563eb); border-color: var(--pt-accent, #2563eb); color: #fff; }
.sb-btn-main:hover { background: var(--pt-accent-hover, #1d4ed8); color: #fff; }
.sb-app select.sb-sel, .sb-app .sb-toolbar select {
  font: inherit; font-size: 0.85rem; padding: 0.3rem 0.4rem; width: auto; margin: 0;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text);
}

/* 分割部分 */
.sb-stage { --sb-r: 50; flex: 1 1 0; min-height: 0; display: flex; flex-direction: row; }
.sb-pane {
  position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column;
  overflow: hidden; background: var(--surface);
}
.sb-pane[data-pos="0"] { flex: 0 0 calc(var(--sb-r) * 1% - 5px); }
.sb-pane[data-pos="1"] { flex: 1 1 0; }
.sb-pane.is-drop::after {
  content: "ここにドロップ"; position: absolute; inset: 0; z-index: 25; display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 700; color: #fff; background: rgba(37, 99, 235, 0.55);
  border: 3px dashed #fff; pointer-events: none;
}

.sb-divider {
  flex: 0 0 10px; position: relative; background: var(--border); cursor: col-resize; touch-action: none;
  -webkit-user-select: none; user-select: none;
}
.sb-divider::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 36px; margin: -18px 0 0 -2px;
  border-radius: 2px; background: var(--text-sub); opacity: 0.6;
}
.sb-divider:hover, .sb-divider.is-drag { background: var(--pt-accent-soft, #eff4ff); }
.sb-divider:focus-visible { outline: 2px solid var(--pt-accent, #2563eb); outline-offset: -2px; }

/* 枠の上の操作バー */
.sb-bar { position: relative; flex: none; background: var(--bg); border-bottom: 1px solid var(--border); z-index: 10; }
.sb-bar-in { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.3rem; padding: 0.3rem 0.5rem; }
.sb-bar .sb-sel { flex: 0 1 11rem; min-width: 6.5rem; }
.sb-acts { flex: 1 1 0; min-width: 2rem; display: flex; gap: 0.3rem; overflow: hidden; }
.sb-acts .sb-btn { flex: none; white-space: nowrap; }
.sb-more, .sb-gear { flex: none; white-space: nowrap; }
.sb-gear[hidden], .sb-set[hidden], .sb-f[hidden], .sb-toast[hidden], .sb-pop[hidden], .sb-pop-item[hidden], .sb-more[hidden] { display: none; }
.sb-pop {
  position: absolute; top: 100%; right: 0.4rem; z-index: 20; min-width: 9rem; max-width: calc(100% - 0.8rem);
  display: flex; flex-direction: column; gap: 0.25rem; padding: 0.4rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.sb-pop-item {
  font: inherit; font-size: 0.85rem; padding: 0.4rem 0.7rem; text-align: left; white-space: nowrap; cursor: pointer; margin: 0; width: auto;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text);
}
.sb-pop-item:hover { border-color: var(--pt-accent, #2563eb); }
.sb-pop-item.is-on { border-color: var(--pt-accent, #2563eb); color: var(--pt-accent, #2563eb); }
.sb-pop-item:disabled { opacity: 0.5; cursor: default; }

.sb-set {
  position: absolute; top: 100%; right: 0.4rem; z-index: 20; width: min(20rem, calc(100% - 0.8rem));
  display: flex; flex-direction: column; gap: 0.5rem; padding: 0.7rem 0.8rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.sb-f { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; font-size: 0.85rem; font-weight: 400; color: var(--text); }
.sb-f.is-check { flex-direction: row; align-items: center; gap: 0.5rem; cursor: pointer; }
.sb-f.is-button .sb-btn { align-self: flex-start; }
.sb-f input[type="checkbox"] { width: auto; margin: 0; }
.sb-f input[type="range"] { width: 100%; margin: 0; padding: 0; }
.sb-f select { width: 100%; margin: 0; font-size: 0.85rem; padding: 0.3rem 0.4rem; }

.sb-body { flex: 1 1 0; min-height: 0; position: relative; container-type: size; overflow: hidden; }
.sb-toast {
  position: absolute; left: 50%; bottom: 0.8rem; transform: translateX(-50%); z-index: 30;
  max-width: calc(100% - 1.6rem); padding: 0.5rem 0.8rem; font-size: 0.85rem; line-height: 1.5;
  background: #1f2937; color: #fff; border-radius: 6px;
}

/* 時計の枠 */
.sbc {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2cqh; padding: 0 2cqw; text-align: center; font-variant-numeric: tabular-nums;
}
.sbc, .sbt, .sbv, .sbw { background: var(--t-bg); color: var(--t-fg); }
:is(.sbc, .sbt, .sbv, .sbw)[data-theme="light"] { --t-bg: #fff; --t-fg: #111827; --t-track: #e5e7eb; --t-ok: #2563eb; --t-warn: #d97706; --t-done: #dc2626; }
:is(.sbc, .sbt, .sbv, .sbw)[data-theme="dark"] { --t-bg: #111827; --t-fg: #f3f4f6; --t-track: #374151; --t-ok: #60a5fa; --t-warn: #fbbf24; --t-done: #f87171; }
:is(.sbc, .sbt, .sbv, .sbw)[data-theme="navy"] { --t-bg: #0f2a4a; --t-fg: #e0f2fe; --t-track: #1e4470; --t-ok: #7dd3fc; --t-warn: #fcd34d; --t-done: #fca5a5; }
:is(.sbc, .sbt, .sbv, .sbw)[data-theme="green"] { --t-bg: #1f4d3a; --t-fg: #f4f7f2; --t-track: #2f6650; --t-ok: #d9f99d; --t-warn: #fde68a; --t-done: #fecaca; }
.sbc { --sbc-k: 1; }
.sbc-time { font-weight: 700; line-height: 1.05; white-space: nowrap; font-size: calc(var(--sbc-k) * min(26cqw, 38cqh)); }
.sbc.has-sec .sbc-time { font-size: calc(var(--sbc-k) * min(17cqw, 38cqh)); }
.sbc.is-12 .sbc-time { font-size: calc(var(--sbc-k) * min(18cqw, 38cqh)); }
.sbc.is-12.has-sec .sbc-time { font-size: calc(var(--sbc-k) * min(12.5cqw, 38cqh)); }
.sbc-date { font-size: calc(var(--sbc-k) * min(6.4cqw, 9cqh)); white-space: nowrap; opacity: 0.9; }
.sbc-date[hidden] { display: none; }

/* 画像の枠 */
.sbi { position: absolute; inset: 0; background: #000; color: #cbd5e1; }
.sbi[data-bg="light"] { background: #fff; color: #475569; }
.sbi-empty {
  position: absolute; inset: 0.6rem; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.6rem; padding: 1rem; text-align: center; border: 2px dashed currentColor; border-radius: 6px; opacity: 0.95;
}
.sbi-empty[hidden], .sbi-view[hidden], .sbi-nav[hidden], .sbi-count[hidden] { display: none; }
.sbi-lead { margin: 0; font-size: 1.05rem; font-weight: 700; }
.sbi-sub { margin: 0 0 0.4rem; font-size: 0.85rem; opacity: 0.85; }
.sbi-view { position: absolute; inset: 0; }
.sbi-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; user-select: none; }
.sbi[data-fit="cover"] .sbi-img { object-fit: cover; }
.sbi-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 2.6rem; height: 3.8rem; padding: 0;
  font: inherit; font-size: 2rem; line-height: 1; color: #fff; background: rgba(0, 0, 0, 0.5);
  border: 0; border-radius: 6px; cursor: pointer; opacity: 0.45;
}
.sbi-nav:hover, .sbi-nav:focus-visible { opacity: 1; }
.sbi-nav, .sbi-count { z-index: 3; }
.sbi-draw { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; touch-action: none; pointer-events: none; }
.sbi[data-mode="pen"] .sbi-draw, .sbi[data-mode="hl"] .sbi-draw, .sbi[data-mode="erase"] .sbi-draw { pointer-events: auto; cursor: crosshair; }
.sbi[data-mode="laser"] .sbi-draw { pointer-events: auto; cursor: none; }
.sbi-laser {
  position: absolute; z-index: 2; left: 0; top: 0; width: 1.8rem; height: 1.8rem; margin: -0.9rem 0 0 -0.9rem; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #ff2a2a 0 32%, rgba(255, 42, 42, 0.5) 52%, rgba(255, 42, 42, 0) 70%); opacity: 0; transition: opacity 0.45s;
}
.sbi-laser.is-on { opacity: 1; transition: none; }
.sbi-prev { left: 0.5rem; }
.sbi-next { right: 0.5rem; }
.sbi-count {
  position: absolute; right: 0.5rem; bottom: 0.5rem; padding: 0.15rem 0.55rem; font-size: 0.8rem;
  color: #fff; background: rgba(0, 0, 0, 0.55); border-radius: 6px;
}

/* タイマー・ビジュアルタイマー・ストップウォッチの共通部分 */
.sbt, .sbv, .sbw {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; font-variant-numeric: tabular-nums; -webkit-user-select: none; user-select: none; outline: none;
}
.sbt-time, .sbv-time, .sbw-time { font-weight: 700; line-height: 1.05; white-space: nowrap; }
.sbt-msg, .sbv-msg { min-height: 1.3em; font-weight: 700; opacity: 0.85; white-space: nowrap; }
.sbt.is-warn .sbt-time, .sbv.is-warn .sbv-time { color: var(--t-warn); }
.sbt.is-done .sbt-time, .sbv.is-done .sbv-time, .sbt.is-done .sbt-msg, .sbv.is-done .sbv-msg { color: var(--t-done); opacity: 1; }
.sbt[data-state="pause"] .sbt-time, .sbv[data-state="pause"] .sbv-time { opacity: 0.6; }
.sbt.is-flash.is-done::after, .sbv.is-flash.is-done::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--t-done);
  opacity: 0; animation: sb-flash 1.2s ease-in-out infinite;
}
@keyframes sb-flash { 0%, 100% { opacity: 0; } 50% { opacity: 0.35; } }

/* タイマー（数字） */
.sbt-time { font-size: min(27cqw, 42cqh); }
.sbt-time.is-long { font-size: min(18cqw, 40cqh); }
.sbt-msg { font-size: min(6cqw, 8cqh); }

/* ビジュアルタイマー */
.sbv { padding: 2cqh 2cqw; gap: 1cqh; }
.sbv-svg { flex: 1 1 0; min-height: 0; width: 100%; }
.sbv-track { fill: var(--t-track); }
.sbv-wedge { fill: var(--t-ok); }
.sbv-ring { fill: none; stroke: var(--t-ok); stroke-width: 9; }
.sbv-svg[data-style="ring"] .sbv-wedge, .sbv-svg[data-style="pie"] .sbv-ring { display: none; }
.sbv-svg[data-style="ring"] .sbv-track { fill: none; stroke: var(--t-track); stroke-width: 9; }
.sbv-ticks { fill: var(--t-fg); opacity: 0.75; }
.sbv.is-warn .sbv-wedge { fill: var(--t-warn); }
.sbv.is-warn .sbv-ring { stroke: var(--t-warn); }
.sbv.is-done .sbv-wedge { fill: var(--t-done); }
.sbv.is-done .sbv-ring { stroke: var(--t-done); }
.sbv-time { flex: none; font-size: min(13cqw, 13cqh); }
.sbv-time.is-long { font-size: min(10cqw, 11cqh); }
.sbv-msg { flex: none; font-size: min(5cqw, 6cqh); }
.sbv[data-digits="0"] .sbv-time { display: none; }

/* ストップウォッチ */
.sbw { padding: 2cqh 3cqw; gap: 2cqh; }
.sbw-time { font-size: min(17cqw, 32cqh); }
.sbw[data-frac="none"] .sbw-time { font-size: min(27cqw, 42cqh); }
.sbw[data-state="pause"] .sbw-time { opacity: 0.6; }
.sbw.has-laps { justify-content: flex-start; }
.sbw.has-laps .sbw-time { font-size: min(11cqw, 20cqh); }
.sbw[data-frac="none"].has-laps .sbw-time { font-size: min(16cqw, 20cqh); }
.sbw-laps { flex: 1 1 0; min-height: 0; width: min(100%, 60cqh + 20cqw); margin: 0; padding: 0; list-style: none; overflow: auto; scrollbar-width: thin; }
.sbw-laps[hidden] { display: none; }
.sbw-lap { display: grid; grid-template-columns: 2.2em 1fr 1fr; gap: 0.5em; padding: 0.25em 0.5em; font-size: min(4.4cqw, 6cqh); border-top: 1px solid var(--t-track); text-align: right; }
.sbw-n { text-align: left; opacity: 0.7; }
.sbw-d { opacity: 0.85; }
.sbw-t { font-weight: 700; }

/* カメラ */
.sbk { position: absolute; inset: 0; background: #000; color: #cbd5e1; }
.sbk[data-bg="light"] { background: #fff; color: #475569; }
.sbk-empty {
  position: absolute; inset: 0.6rem; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.6rem; padding: 1rem; text-align: center; border: 2px dashed currentColor; border-radius: 6px;
}
.sbk-empty[hidden], .sbk-view[hidden], .sbk-badge[hidden], .sbk-zoom[hidden] { display: none; }
.sbk-lead { margin: 0; font-size: 1.05rem; font-weight: 700; }
.sbk-sub { margin: 0 0 0.4rem; font-size: 0.85rem; opacity: 0.85; }
.sbk-view { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
.sbk-video { position: absolute; left: 50%; top: 50%; object-fit: contain; background: transparent; pointer-events: none; }
.sbk[data-fit="cover"] .sbk-video { object-fit: cover; }
.sbk-badge, .sbk-zoom {
  position: absolute; bottom: 0.5rem; padding: 0.15rem 0.6rem; font-size: 0.85rem; color: #fff;
  background: rgba(0, 0, 0, 0.6); border-radius: 6px; pointer-events: none;
}
.sbk-guide { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: difference; }
.sbk-guide[data-guide="none"] { display: none; }
.sbk-guide[data-guide="cross"] {
  background: linear-gradient(#fff, #fff) 50% 0 / 2px 100% no-repeat, linear-gradient(#fff, #fff) 0 50% / 100% 2px no-repeat;
}
.sbk-guide[data-guide="grid3"] {
  background:
    linear-gradient(#fff, #fff) 33.333% 0 / 2px 100% no-repeat, linear-gradient(#fff, #fff) 66.666% 0 / 2px 100% no-repeat,
    linear-gradient(#fff, #fff) 0 33.333% / 100% 2px no-repeat, linear-gradient(#fff, #fff) 0 66.666% / 100% 2px no-repeat;
}
.sbk-guide[data-guide="grid4"] {
  background:
    linear-gradient(#fff, #fff) 25% 0 / 2px 100% no-repeat, linear-gradient(#fff, #fff) 50% 0 / 2px 100% no-repeat, linear-gradient(#fff, #fff) 75% 0 / 2px 100% no-repeat,
    linear-gradient(#fff, #fff) 0 25% / 100% 2px no-repeat, linear-gradient(#fff, #fff) 0 50% / 100% 2px no-repeat, linear-gradient(#fff, #fff) 0 75% / 100% 2px no-repeat;
}
.sbk-badge { left: 0.5rem; }
.sbk-zoom { right: 0.5rem; }
.sbk-view { cursor: grab; }

/* PDF */
.sbp { position: absolute; inset: 0; background: #000; color: #cbd5e1; }
.sbp[data-bg="light"] { background: #e5e7eb; color: #475569; }
.sbp-empty[hidden], .sbp-view[hidden], .sbp-busy[hidden] { display: none; }
.sbp-view { position: absolute; inset: 0; }
.sbp-scroll { position: absolute; inset: 0; overflow: hidden; }
.sbp[data-fit="width"] .sbp-scroll { overflow-y: auto; overflow-x: hidden; }
.sbp-holder { min-width: 100%; min-height: 100%; display: flex; align-items: center; justify-content: center; }
.sbp[data-fit="width"] .sbp-holder { align-items: flex-start; }
.sbp-canvas { display: block; flex: none; background: #fff; }
.sbp-busy {
  position: absolute; left: 0.5rem; top: 0.5rem; padding: 0.15rem 0.6rem; font-size: 0.8rem; color: #fff;
  background: rgba(0, 0, 0, 0.6); border-radius: 6px; pointer-events: none;
}

/* 縦に並べる（幅の狭い画面） */
@media (max-width: 720px) {
  .sb-stage { flex-direction: column; }
  .sb-divider { flex-basis: 12px; cursor: row-resize; }
  .sb-divider::after { width: 36px; height: 4px; margin: -2px 0 0 -18px; }
}
@media (max-width: 900px) {
  .sb-tbar { flex-wrap: nowrap; }
  .sb-title { flex: 1 1 auto; }
  .sb-tbar .sb-btn { flex: none; white-space: nowrap; }
}

/* 全画面：操作は重ねて表示し、しばらく操作がないと隠す */
.sb-fsctl { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 50; display: flex; align-items: center; gap: 0.5rem; transition: opacity 0.4s; }
.sb-fsctl[hidden] { display: none; }
.sb-exit, .sb-lock { display: inline-flex; align-items: center; gap: 0.4rem; }
.sb-exit-ic, .sb-lock-ic { flex: none; }
.sb-exit[data-style="icon"] .sb-exit-tx { display: none; }
.sb-app.pt-fs .sb-exit[data-style="icon"] { padding: 0.6rem; }
.sb-app.pt-fs.pt-fs { padding: 0; background: #000; height: auto; min-height: 0; overflow: hidden; }
.sb-app.pt-fs > .sb-stage { flex: 1 1 0%; }
.sb-app.pt-fs > .sb-toolbar, .sb-app.pt-fs .sb-bar, .sb-app.pt-fs .sb-toast,
.sb-app.pt-fs .sbi-nav, .sb-app.pt-fs .sbi-count, .sb-app.pt-fs .sbi-empty, .sb-app.pt-fs .sbk-empty { display: none; }
.sb-app.pt-fs .sbp-view, .sb-app.pt-fs .sbt, .sb-app.pt-fs .sbv, .sb-app.pt-fs .sbw { cursor: pointer; }
.sb-app.pt-fs .sbt, .sb-app.pt-fs .sbv, .sb-app.pt-fs .sbw { touch-action: none; }
.sb-app.is-locked .sbp-view, .sb-app.is-locked .sbt, .sb-app.is-locked .sbv, .sb-app.is-locked .sbw, .sb-app.is-locked .sbi-view { cursor: default; }
.sb-app.pt-fs .sbk-view { cursor: default; }
.sb-app.pt-fs .sbp-scroll { scrollbar-width: none; }
.sb-app.pt-fs .sbp-scroll::-webkit-scrollbar, .sb-app.pt-fs .sbw-laps::-webkit-scrollbar { display: none; }
.sb-app.pt-fs .sbw-laps { scrollbar-width: none; }
.sb-app.pt-fs .sb-divider { flex-basis: 6px; background: #000; pointer-events: none; cursor: none; }
.sb-app.pt-fs .sb-divider::after { display: none; }
.sb-app.pt-fs .sbi-view { cursor: pointer; }
.sb-app.pt-fs .sb-exit, .sb-app.pt-fs .sb-lock {
  font-size: 1.05rem; padding: 0.55rem 1.1rem; color: #fff; background: rgba(0, 0, 0, 0.7);
  border-color: rgba(255, 255, 255, 0.6);
}
.sb-app.pt-fs .sb-lock[aria-pressed="true"] { background: #b45309; border-color: #fcd34d; }
.sb-app.pt-fs.is-idle { cursor: none; }
.sb-app.pt-fs.is-idle .sbi-view, .sb-app.pt-fs.is-idle .sb-exit, .sb-app.pt-fs.is-idle .sb-lock { cursor: none; }
.sb-app.pt-fs.is-idle .sb-fsctl { opacity: 0.12; }

@media print { .sb-app { display: none; } }

.sb-guide { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.sb-guide .seo-guide { margin: 0; padding: 0; border: 0; background: transparent; }