/* ============================================================ * プロトタイプ専用スタイル（本番 style.css / admin.css の上に重ねる） * ・プレゼン用パネル * ・3D ビューワー代替表示、動画プレースホルダ、疑似カメラ * ============================================================ */ :root { --panel-w: 320px; } /* ---------- プレゼン用パネル ---------- */ #presenter { position: fixed; top: 0; right: 0; bottom: 0; width: var(--panel-w); background: #0F172A; color: #CBD5E1; z-index: 500; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 220ms ease; box-shadow: -10px 0 30px rgba(15,23,42,0.25); font-size: 12.5px; overflow-y: auto; } #presenter.open { transform: translateX(0); } .pp-head { position: sticky; top: 0; background: #0F172A; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); } .pp-title { font-size: 15px; font-weight: 800; color: #fff; letter-spacing: 0.02em; } .pp-sub { font-size: 11px; color: #94A3B8; margin-top: 2px; } .pp-close { background: transparent; border: 1px solid rgba(255,255,255,0.15); color: #CBD5E1; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 16px; } .pp-section { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); } .pp-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #64748B; margin-bottom: 8px; } .pp-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .pp-row > span { font-weight: 700; color: #E2E8F0; } .pp-seg { display: inline-flex; background: rgba(255,255,255,0.06); border-radius: 8px; padding: 2px; } .pp-seg button { background: transparent; border: 0; color: #94A3B8; font-size: 11.5px; font-weight: 700; padding: 5px 9px; border-radius: 6px; cursor: pointer; font-family: inherit; } .pp-seg button.on { background: linear-gradient(135deg, #0EA5E9, #14B8A6); color: #fff; } .pp-note { font-size: 11px; color: #64748B; line-height: 1.6; } .pp-current-title { font-size: 14px; font-weight: 800; color: #fff; } .pp-current-desc { font-size: 11.5px; color: #CBD5E1; line-height: 1.7; margin-top: 4px; } .pp-list { padding-top: 8px; } .pp-group { font-size: 10.5px; font-weight: 800; color: #7DD3FC; margin: 10px 0 4px; letter-spacing: 0.04em; } .pp-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 8px; color: #E2E8F0; text-decoration: none; font-weight: 600; } .pp-item:hover { background: rgba(255,255,255,0.06); } .pp-item.active { background: rgba(14,165,233,0.18); color: #fff; } .pp-path { font-size: 10px; color: #64748B; font-family: ui-monospace, Menlo, monospace; font-weight: 500; } .pp-flow-steps { display: flex; flex-wrap: wrap; gap: 4px; font-size: 11px; color: #CBD5E1; line-height: 1.7; } .pp-foot { padding: 12px 16px 18px; font-size: 10.5px; color: #64748B; margin-top: auto; } #pp-fab { position: fixed; right: 14px; top: 14px; z-index: 490; background: #0F172A; color: #fff; border: 0; border-radius: 999px; padding: 9px 14px; font-size: 12px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 20px rgba(15,23,42,0.3); font-family: inherit; } #pp-fab[hidden] { display: none; } /* パネル表示中はアプリ全体を左側の残り幅に寄せる。 fixed 配置の部品（フッターナビ・チャット入力・トースト）は viewport 基準なので中心を補正する。 */ body.with-panel { padding-right: var(--panel-w); } body.with-panel .bottom-nav, body.with-panel .chat-input-bar, body.with-panel .toast { left: calc((100vw - var(--panel-w)) / 2); } body.with-panel .modal-overlay { right: var(--panel-w); } body.with-panel.is-admin .kladmin-shell { min-height: 100vh; } @media (max-width: 1099px) { body.with-panel { padding-right: 0; } body.with-panel .bottom-nav, body.with-panel .chat-input-bar, body.with-panel .toast { left: 50%; } body.with-panel .modal-overlay { right: 0; } } /* ---------- 共通の小物 ---------- */ .kl-spinner { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%; display: inline-block; animation: chatSpin 0.8s linear infinite; flex-shrink: 0; } .help-hint { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--brand-dark); text-decoration: none; line-height: 1.6; } .help-hint-list { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-2); } .info-tip { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; border: 1.2px solid var(--line); background: #fff; color: var(--muted); font-size: 11px; font-weight: 800; line-height: 1; cursor: pointer; padding: 0; font-family: inherit; } .info-tip.open { background: rgba(14,165,233,0.12); color: var(--brand-dark); } .info-tip-body { flex-basis: 100%; margin: 6px 0 0; font-size: 11px; line-height: 1.7; color: var(--text-2); background: var(--bg-soft); border-radius: 10px; padding: 8px 10px; } .info-tip-body[hidden] { display: none; } /* ---------- 3D ビューワー代替 ---------- */ .kl3d { position: relative; height: 320px; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, #F5FBFE 0%, #E2F1FB 100%); border: 1px solid rgba(14,165,233,0.15); } .kl3d-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(85,134,181,0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(85,134,181,0.18) 1px, transparent 1px); background-size: 28px 28px; opacity: 0.5; } .kl3d-floor { position: absolute; left: 10%; right: 10%; bottom: 18px; height: 40px; background: radial-gradient(ellipse at center, rgba(85,134,181,0.25), transparent 70%); transform: scaleY(0.5); } .kl3d-figure { position: absolute; left: 50%; top: 50%; height: 84%; width: auto; transform: translate(-50%, -52%); } .kl3d-reset { position: absolute; top: 8px; right: 8px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25); background: rgba(15,23,42,0.55); color: rgba(255,255,255,0.85); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; font-family: inherit; } .kl3d-hint { position: absolute; top: 9px; left: 10px; font-size: 10px; font-weight: 700; color: rgba(15,23,42,0.5); letter-spacing: 0.04em; pointer-events: none; } .kl3d-overlay { position: absolute; top: 24px; left: 8px; max-width: 44%; display: flex; flex-direction: column; gap: 1px; padding: 4px 6px; border-radius: 8px; background: rgba(255,255,255,0.55); pointer-events: none; } .kl3d-overlay div { font-size: 11px; font-weight: 800; color: #DC2626; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kl3d-pad { position: absolute; left: 8px; bottom: 8px; display: grid; grid-template-columns: repeat(3, 26px); grid-template-rows: repeat(3, 26px); gap: 3px; } .kl3d-zoom { position: absolute; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 6px; } .kl3d-pad button, .kl3d-zoom button { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid rgba(15,23,42,0.15); background: rgba(255,255,255,0.72); color: #0F172A; font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0; box-shadow: 0 1px 3px rgba(15,23,42,0.12); font-family: inherit; } .kl3d-label { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 800; color: var(--brand-dark); background: rgba(255,255,255,0.8); padding: 3px 10px; border-radius: 999px; white-space: nowrap; } .kl3d-oil-note { margin-left: 8px; color: #F97316; } .kl3d-proto { position: absolute; top: 40px; right: 8px; max-width: 46%; font-size: 9.5px; color: rgba(15,23,42,0.45); text-align: right; line-height: 1.4; pointer-events: none; } /* ---------- 疑似カメラ（QRスキャン） ---------- */ .kl-fakecam { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, #3f4a5c, #14181f 75%); display: flex; align-items: center; justify-content: center; } .kl-fakeqr { width: 46%; aspect-ratio: 1; background: repeating-linear-gradient(0deg, #fff 0 8px, transparent 8px 12px), repeating-linear-gradient(90deg, #fff 0 10px, #000 10px 14px); background-blend-mode: difference; opacity: 0.85; border: 6px solid #fff; border-radius: 4px; transition: box-shadow 200ms; } .kl-fakeqr.found { box-shadow: 0 0 0 4px #14B8A6, 0 0 30px #14B8A6; } .kl-fakesensor { position: absolute; right: 8%; bottom: 8%; width: 26%; opacity: 0.5; } /* ---------- 動画プレースホルダ ---------- */ .kl-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; background: linear-gradient(135deg, #0F172A, #1E293B); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; } .kl-video--yt { border-radius: 12px; background: #000; } .kl-video-play { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.92); color: #0F172A; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,0.35); } .kl-video-play svg { width: 24px; height: 24px; margin-left: 3px; } .kl-video-play--yt { width: 68px; height: 48px; border-radius: 12px; background: #FF0000; color: #fff; } .kl-video-ytlabel { position: absolute; left: 12px; bottom: 10px; font-size: 11px; font-weight: 800; color: rgba(255,255,255,0.7); letter-spacing: 0.04em; } .kl-video-cue { position: absolute; bottom: 44px; left: 6%; right: 6%; text-align: center; } .kl-video-cue { color: #fff; font-size: 13px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.6); } .kl-video-cue::before { content: ""; } .kl-video-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: rgba(0,0,0,0.45); display: flex; align-items: center; gap: 10px; padding: 0 12px; font-size: 11px; color: #fff; font-weight: 700; } .kl-video-track { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.3); position: relative; } .kl-video-track span { position: absolute; left: 0; top: 0; bottom: 0; width: 18%; background: #14B8A6; border-radius: 2px; } /* BCエクササイズのアニメーション（本番はページ内