/* Ortodonzia Estense Appliance Studio — 配色「和紙ポップ」 ベース: 和紙（明るい室内向けライト）。8 時間見る画面なので、紙色 #f5f2ec に墨 #33302b （コントラスト約 10:1・純白/純黒なし）で地の眩しさを抑え、ポップさは面を明るくするのではなく 「小さい面積に高彩度を置く」ことで出す: ① 部品の種類を色で符号化（藍 STL / 若草 シェル / 山吹 バー / 藤 リング / 紅梅 刻印） ② 工程レール = ラボの工程票。済んだ工程には朱印を捺す ③ 実行色は縹（はなだ）。クリーム地 + 朱系は AI の常套配色なので意図的に外している 色は必ず :root のトークンを使うこと（ハードコード禁止）。 */ :root { /* ---- 面（純白・純黒を使わない。長時間見るため本文コントラストは約 10:1 に抑える） ---- */ --bg: #47586a; /* ビューポート = 鉄御納戸（青鉄の作業台）。石膏色の模型と和紙の 工程票が最も浮く、模型と色相・明度の離れた中暗の青灰。 v23.360（先生指示「背景色が AI っぽい・和紙以外全てを変更」）: クリーム系の台は AI 生成の常套なので、技工ラボの金属作業台へ */ --panel: #f5f2ec; /* 和紙 */ --panel-2: #ebe6db; --sunken: #fffdf8; /* 入力欄 */ --line: #cdc6b8; --hair: #e1dbce; /* 弱い罫 */ --text: #33302b; /* 墨 */ --muted: #6e6960; /* v23.366: 4.10:1 → 4.88:1（WCAG AA 準拠・taste-skill コントラスト監査） */ --on-accent: #ffffff; /* アクセント面に載る文字 */ /* ---- 色（小さい面積に高彩度を置く） ---- */ --accent: #1f6f9c; /* 縹（はなだ）= 実行・選択 */ --accent-2: #7fb3cf; --accent-w: #ddedf6; /* アクセントの薄い面 */ --warn: #c8891c; /* 山吹 */ --danger: #cf4436; /* 朱 */ --danger-w: #f7e2df; --ok: #5f9440; /* 若草 */ --stock: #3a5f9e; /* 藍 */ --wisteria: #6f5fa8; /* 藤 */ --plum: #c4577a; /* 紅梅 */ --stamp: #d0402f; /* 朱印 */ --shadow: 0 0 0 1px rgba(0,0,0,.14); /* v23.361: ドロップシャドウ全廃 — 1px の実線罫線（Linear 流） */ /* v23.366 taste-skill 準拠 — 角丸は 4 段のみ（SHAPE CONSISTENCY LOCK）: 小要素 = 6px（--r）・コントロール = 8px（--r-ctl）・コンテナ = 12px（--r-box）・ピル = 999px。 新しい角丸値の直書きは禁止 — この 4 段から選ぶ。 */ --r: 6px; --r-ctl: 8px; --r-box: 12px; --tip-bg: #33302b; /* 和紙の繊維（3.5%）。外部参照なし・オフライン動作 */ --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23f)' opacity='.035'/%3E%3C/svg%3E"); /* v23.361（先生指示「全てのフォントを Noto Sans に」）: 本文・ラベル・数値の 3 役すべて Noto Sans JP（400/700 を /fonts に自己ホスト・オフライン動作）。数値の桁揃えは tabular-nums（v23.359）が担保するため等幅フォントは廃止 */ --mono: "Noto Sans JP", "Noto Sans", system-ui, sans-serif; --label: "Noto Sans JP", "Noto Sans", system-ui, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { background: var(--bg); color: var(--text); font-family: "Noto Sans JP", "Noto Sans", system-ui, sans-serif; /* v23.361 */ font-size: 13px; overflow: hidden; } /* 見出し・ラベル・タブも Noto Sans（v23.361: 全書体統一・差は太さで出す） */ .brand-q, .brand-sub, .steps-title, .tab, .fp-tab, .prop-head, .lib-head, .bl-head, .ctype { font-family: var(--label); font-weight: 700; letter-spacing: .01em; /* v23.361: 書体差 → 太さ差 */ } button { font: inherit; color: inherit; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-ctl); /* v23.366 SHAPE LOCK: コントロール = 8px */ padding: 5px 11px; cursor: pointer; transition: background .12s, border-color .12s, color .12s; } button:hover { border-color: var(--muted); background: var(--panel); } /* v23.361: CTA 以外は無彩 — hover は色でなく明度と輪郭で示す */ button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; } button.primary:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); filter: brightness(1.12); } /* v23.222（先生指示「全てのボタンには枠を必ず。ボタンに見えない」）: ghost も枠付きに */ button.ghost { background: var(--panel-2); border-color: var(--line); color: var(--muted); } button.ghost:hover { background: var(--panel); border-color: var(--muted); color: var(--text); } button.small { font-size: 11px; padding: 3px 8px; } button.wide { width: 100%; } input[type=text], input[type=number], input[type=password], select { background: var(--sunken); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 4px 8px; font: inherit; } input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-w); } input[type=number] { width: 144px; text-align: right; font-family: var(--mono); font-size: 14px; padding: 8px 10px; } /* v23.35（先生指示）: v22.72 で消したスピナー（上下の矢印）を全数値欄で復活。 当時は欄が 72px と狭く矢印が値を隠していたが、欄を 2 倍（144px・字 14px）に拡大したため両立できる。 */ .mono { font-family: var(--mono); } .small { font-size: 11px; } .muted { color: var(--muted); } /* ---- 上部バー ---- */ #topbar { height: 46px; display: flex; align-items: center; gap: 16px; padding: 0 14px; background: var(--panel); background-image: var(--paper); border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: baseline; gap: 8px; } .brand-q { font-weight: 600; letter-spacing: 0.15em; font-size: 13px; } .brand-q b, .brand-q em { color: var(--accent); font-weight: 700; font-style: normal; } .brand-sub { color: var(--muted); letter-spacing: 0.18em; font-size: 10px; text-transform: uppercase; } .brand-tag { font-size: 10px; color: var(--warn); border: 1px solid var(--warn); border-radius: 6px; padding: 1px 5px; } .proj { display: flex; align-items: center; gap: 8px; flex: 1; } #projName { width: 220px; } .proj-right { display: flex; gap: 8px; align-items: center; } .save-state { font-size: 11px; color: var(--muted); font-family: var(--mono); } /* ---- レイアウト ---- */ #layout { display: flex; height: calc(100vh - 46px); } /* ---- 工程レール（署名要素: 工程票のようなステップ進行） ---- */ #steps { width: 160px; background: var(--panel); background-image: var(--paper); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 12px 0 10px; position: relative; } /* ラボの工程票に見立てた 1 本の縦罫。工程はこの上に並ぶ */ #steps::before { content: ''; position: absolute; left: 27px; top: 42px; bottom: 58px; width: 2px; background: repeating-linear-gradient(var(--hair) 0 4px, transparent 4px 8px); } .steps-title { font-size: 9px; color: var(--muted); letter-spacing: 0.26em; padding: 0 14px 10px; text-transform: uppercase; } .step { display: flex; align-items: center; gap: 12px; text-align: left; padding: 7px 12px; background: transparent; border: none; border-radius: 0; position: relative; color: var(--muted); } .step:hover { background: transparent; color: var(--text); } .step.active { background: transparent; color: var(--text); } .step-no { font-family: var(--mono); font-size: 11px; width: 20px; height: 20px; flex: none; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--muted); position: relative; z-index: 1; } /* 済 = 朱印を捺す（少し傾ける） */ .step.done .step-no { border-color: var(--stamp); color: var(--stamp); font-weight: 700; transform: rotate(-7deg); } .step.done .step-name { color: var(--text); } .step.active .step-no { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; box-shadow: 0 0 0 4px var(--accent-w); transform: none; } .step-name { font-size: 12px; } .step.active .step-name { font-weight: 700; } .step-desc { grid-column: 2; font-size: 10px; color: var(--muted); } .steps-foot { margin-top: auto; font-size: 10px; color: var(--muted); padding: 8px 14px; line-height: 2; font-family: var(--mono); } .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin: 0 4px; } .dot.off { background: var(--danger); } .dot.on { background: var(--ok); } /* ---- ビューポート ---- */ #viewport-wrap { flex: 1; position: relative; min-width: 0; } #viewport { position: absolute; inset: 0; } #vp-toolbar { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 4px; box-shadow: var(--shadow); } .tool { border-color: transparent; background: transparent; color: var(--muted); border-radius: 6px; } .tool:hover { background: var(--panel-2); border-color: transparent; color: var(--text); } .tool.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; } .vp-sep { width: 1px; background: var(--line); margin: 2px 3px; } #vp-hint { /* v23.98l（先生報告「下の文字が隠れて見えない」）: 下部のオブジェクトスナップバーの上に出す */ position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: var(--r); padding: 6px 12px; font-size: 12px; color: var(--text); box-shadow: var(--shadow); display: none; } #vp-hint.show { display: block; } /* ---- 右パネル ---- */ #rightpanel { width: 292px; background: var(--panel); background-image: var(--paper); border-left: 1px solid var(--line); display: flex; flex-direction: column; } .tabs { display: flex; border-bottom: 1px solid var(--line); } .tab { flex: 1; border: none; border-radius: 0; background: transparent; padding: 9px 0; color: var(--muted); font-size: 11.5px; letter-spacing: 0.06em; } .tab:hover { background: transparent; color: var(--text); border-color: transparent; } .tab.active { color: var(--accent); font-weight: 700; box-shadow: inset 0 -3px 0 var(--accent); } .tabpage { display: none; flex: 1; overflow-y: auto; padding: 10px; } .tabpage.active { display: block; } .panel-actions { margin-bottom: 10px; display: flex; gap: 6px; } .filebtn { display: inline-block; background: var(--accent); border: 1px solid var(--accent); border-radius: var(--r-ctl); padding: 5px 11px; cursor: pointer; color: var(--on-accent); font-weight: 600; } .filebtn:hover { filter: brightness(1.12); } .filebtn input { display: none; } .empty-note { color: var(--muted); font-size: 12px; line-height: 1.9; padding: 16px 4px; } /* コンポーネントリスト */ .complist { list-style: none; } .complist li { display: flex; align-items: center; gap: 7px; padding: 6px 7px; border: 1px solid transparent; border-radius: 6px; cursor: pointer; } .complist li:hover { background: var(--panel-2); } /* v23.229（先生要望「選択中が分かりにくい」）: 3D のボックス枠と同じ配色 — 主選択 = 橙 / 複数選択 = 青 */ .complist li.selected { background: var(--panel-2); border-color: #ff8a2a; box-shadow: inset 3px 0 0 #ff8a2a; } /* v22.99: 種類ごとに色を持たせる（色が飾りではなく情報を持つので、賑やかでも散らからない）。 クラスは main.js が ct- を付ける。既定は無彩色。 */ .ctype { font-size: 9px; font-weight: 700; padding: 1px 4px; border-radius: 6px; letter-spacing: 0.04em; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; /* v22.41: 幅を固定して名前の開始位置を揃える（可変幅だと行ごとにガタつく） */ display: inline-block; min-width: 32px; text-align: center; flex: none; cursor: help; } .ctype.ct-imported_stl { background: var(--stock); border-color: var(--stock); color: var(--on-accent); } .ctype.ct-band { background: #4f7d35; border-color: #4f7d35; color: var(--on-accent); } .ctype.ct-bar, .ctype.ct-wire, .ctype.ct-loop { background: var(--warn); border-color: var(--warn); color: var(--text); } .ctype.ct-ring { background: var(--wisteria); border-color: var(--wisteria); color: var(--on-accent); } .ctype.ct-sleeve { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .ctype.ct-attachment, .ctype.ct-screw { background: #a94464; border-color: #a94464; color: var(--on-accent); } .ctype.ct-boolean_result { background: var(--panel-2); border-color: var(--line); color: var(--muted); } /* 旧クラス（念のため残す） */ .ctype.band { color: #4f7d35; border-color: #4f7d35; } .ctype.stl { color: var(--stock); border-color: var(--stock); } .cname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cvis, .cdel, .clock { background: transparent; border: none; color: var(--muted); padding: 2px 4px; } .cvis:hover { color: var(--text); } .cdel:hover { color: var(--danger); } .complist li.hidden-comp .cname { opacity: 0.4; } /* ライブラリ */ .lib-section { margin-bottom: 14px; } .lib-head { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; padding: 5px 8px; border-left: 3px solid; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; } .lib-head.stock { border-color: var(--stock); } .lib-head.user { border-color: var(--user); } .lib-note { font-size: 9px; color: var(--muted); font-weight: 400; } .liblist { list-style: none; } .liblist li { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 6px; } .liblist li:hover { background: var(--panel-2); } .libname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- v23.92: 枠選択のラバーバンド（Rhino 風・実線 = 完全包含 / 破線 = 触れているもの） ---- */ .marquee-rect { position: fixed; z-index: 800; pointer-events: none; } .marquee-rect.win { border: 1.5px solid var(--accent); background: rgba(31, 111, 156, 0.10); } .marquee-rect.cross { border: 1.5px dashed #1f8f5f; background: rgba(31, 143, 95, 0.10); } /* ---- v23.89: 作り方プレイヤー — 事例集（オーバーレイ z=200）の上に出す + 製作者の解説 ---- */ #howtoPanel { z-index: 320; } /* v23.114: 工程ごとの製作ポイント（コメント）と編集バー */ .howto-stepnote { margin: 6px 0 2px; padding: 7px 10px; background: #f4ecd7; border: 1px solid #d8c896; border-radius: 8px; font-size: 12.5px; line-height: 1.55; color: #5c5030; white-space: pre-wrap; } .howto-stepnote.hidden { display: none; } .howto-editbar { display: flex; gap: 6px; margin-top: 6px; } .howto-editbar.hidden { display: none; } .howto-editbar button { flex: 1; } #howtoNote { margin: 6px 10px 2px; padding: 8px 10px; background: var(--accent-w); border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; } #howtoNote .hn-head { font-size: 12px; } #howtoNote .hn-badge { font-size: 11px; color: var(--muted); margin-left: 6px; } #howtoNote .hn-body { margin-top: 4px; white-space: pre-wrap; word-break: break-word; max-height: 160px; overflow-y: auto; } #howtoNote button { margin-top: 6px; } /* ---- v23.88: ウィザードの小パネル（背景を塞がない = プレビューを見ながら調整） ---- */ /* ---- v23.98e（先生提案）: R・Tools — Rhino 風ツールのフローティングパレット ---- */ #rtPanel { position: fixed; top: 86px; left: 12px; z-index: 940; width: 305px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 8px 10px; max-height: calc(100vh - 130px); overflow-y: auto; } #rtPanel.hidden { display: none; } #rtPanel .rt-head { display: flex; align-items: center; cursor: move; margin: 0 0 6px; border-bottom: 1px solid var(--line); padding-bottom: 6px; } #rtPanel #ddInsertMenu { display: block; } /* v23.98f: Rhino 風アイコン列（自作 SVG）+ 選択ツールのパラメータのみ表示（省スペース） */ #rtPanel .rt-icons { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; margin-bottom: 6px; } /* v23.152: 融合パレット内のグループ見出し（加工 / 作図・挿入）と加工アイコン列（旧 Tool ドロップダウン） */ #rtPanel .rt-grp-label { font-size: 10px; font-weight: 600; color: var(--muted, #6b7785); letter-spacing: .02em; margin: 2px 2px 3px; } #rtPanel #rtIconsEdit { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line); } /* v23.226a（先生指示「カット 4 種は加工の二段目に」）: グリッドの行送り（全列ぶち抜きの高さ 0 要素） */ #rtPanel .rt-rowbreak { grid-column: 1 / -1; height: 0; } /* v23.222（先生指示）: アイコンも必ず枠付き = ボタンに見えるように */ #rtPanel .rt-ic { height: 28px; padding: 2px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; } #rtPanel .rt-ic:hover { background: var(--accent-2, #ddedf6); border-color: var(--accent-2); } /* v23.98k（先生要望）: 選択中のツールはアイコン色を背景と反転（濃紺地 + 白線画）で明示 v23.222: マグネット等の .active も同じ反転 */ #rtPanel .rt-ic.on, #rtPanel .rt-ic.active { background: #2b4a8b; border-color: #2b4a8b; } #rtPanel .rt-ic.on svg, #rtPanel .rt-ic.active svg { stroke: #ffffff; } #rtPanel .rt-ic.on svg .f, #rtPanel .rt-ic.active svg .f { fill: #9db8e8; } #rtPanel .rt-ic svg { width: 20px; height: 20px; stroke: #2b4a8b; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } #rtPanel .rt-ic svg .f { fill: #b8ccf0; } #rtPanel .rt-sec.hidden { display: none; } /* v23.222: パレット外のアイコントグル（左右対称・ミラー継続・ミラー拘束）— 枠付き・有効時は反転 */ .ic-btn { height: 28px; min-width: 34px; padding: 2px 6px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .ic-btn:hover { background: var(--accent-w); border-color: var(--accent-2); } .ic-btn svg { width: 20px; height: 20px; stroke: #2b4a8b; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .ic-btn svg .f { fill: #b8ccf0; } .ic-btn.on { background: #2b4a8b; border-color: #2b4a8b; } .ic-btn.on svg { stroke: #ffffff; } .ic-btn.on svg .f { fill: #9db8e8; } /* v23.221: ブラシのサイズ・強さのイラスト（ラベルの代わりの小アイコン） */ #tpSliders .sic svg { width: 16px; height: 16px; stroke: #2b4a8b; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; } #tpSliders.hidden { display: none; } /* ---- v23.98h（先生要望）: 押し出しドット ● — サーフェス選択で法線軸上に表示・ドラッグで押し出し ---- */ .ex-dot { position: fixed; width: 14px; height: 14px; border-radius: 50%; z-index: 900; background: #f0b400; border: 2px solid #7a5b00; box-sizing: border-box; cursor: grab; box-shadow: 0 0 0 1px rgba(0,0,0,.35); touch-action: none; } .ex-dot:hover { transform: scale(1.25); } .ex-dot:active { cursor: grabbing; } /* v23.111: 伸縮ドット（ガムボール矢印の途中の軸色 ● — ドラッグで 1 軸スケール） */ .st-dot { position: fixed; width: 12px; height: 12px; border-radius: 50%; z-index: 900; border: 2px solid; box-sizing: border-box; cursor: grab; box-shadow: 0 0 0 1px rgba(0,0,0,.35); touch-action: none; } .st-dot:hover { transform: scale(1.3); } .st-dot:active { cursor: grabbing; } /* v23.98g（先生報告「横スクロールが必要で使いにくい」）: パレット内は縦 1 列 = 横スクロールなし */ #rtPanel { overflow-x: hidden; } #rtPanel .ins-grid { grid-template-columns: 1fr; gap: 4px 0; } #rtPanel .ins-grid label { justify-content: space-between; } #rtPanel .ins-grid select { max-width: 150px; } /* v23.348（先生報告「リテンション加工の Tool バーが縦長すぎてスクロールが必要」）: リテンションのセクションだけパネルを広げて入力 6 項目を 2 カラムに（v23.346 の 認証画面と同じ手法）。チェックと実行ボタン・見出しは全幅。パネル幅はセクション 表示中のみ 305px → 470px（他のセクションは従来のまま）。 */ #rtPanel:has([data-rtsec="retention"]:not(.hidden)) { width: 470px; } #rtPanel [data-rtsec="retention"] .ins-grid { grid-template-columns: 1fr 1fr; gap: 4px 12px; } #rtPanel [data-rtsec="retention"] .ins-grid .rt-chk, #rtPanel [data-rtsec="retention"] .ins-grid .ins-actions { grid-column: 1 / -1; } #rtPanel [data-rtsec="retention"] .ins-grid select { max-width: 128px; } #rtPanel .ins-grid .ins-actions { justify-content: stretch; flex-direction: column; gap: 4px; } #rtPanel .ins-grid .ins-actions button { width: 100%; } #wizPanel { position: fixed; top: 86px; right: 16px; z-index: 950; width: 320px; max-height: 84vh; overflow-y: auto; /* v23.118: フレンケル等の項目が多いウィザードでもはみ出さない */ background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 10px 12px; } /* ---- v23.86: 挿入メニューの整列（先生指示「入力項目が大きすぎて変に改行」対策） ---- */ .ins-grid { display: grid; grid-template-columns: repeat(4, max-content); gap: 6px 14px; align-items: center; padding: 8px 10px; } .ins-grid .ins-head { grid-column: 1 / -1; } .ins-grid label { display: flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; margin: 0; } .ins-grid input[type="number"] { width: 58px; padding: 2px 4px; } .ins-grid select { max-width: 130px; } .ins-grid .ins-actions { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; } /* ---- v23.85: Osnap バー（画面下に固定・Rhino 風） ---- */ /* v23.98l（先生報告「患者リストでも R・Tools が出たまま」）: 全画面オーバーレイ （患者リスト・ログイン・マスターモード等 .fullscreen-overlay）表示中は、 設計画面のフローティング UI（R・Tools / オブジェクトスナップバー / 押し出しドット / ガムボールのマーク・数値入力）をまとめて隠す */ body:has(.fullscreen-overlay:not(.hidden)) #rtPanel, body:has(.fullscreen-overlay:not(.hidden)) #osnapBar, body:has(.fullscreen-overlay:not(.hidden)) .ex-dot, body:has(.fullscreen-overlay:not(.hidden)) .st-dot, body:has(.fullscreen-overlay:not(.hidden)) .gb-mark, body:has(.fullscreen-overlay:not(.hidden)) .gb-num { display: none !important; } #osnapBar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 850; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 4px 10px; background: var(--panel-2); border-top: 1px solid var(--line); font-size: 12px; user-select: none; } #osnapBar .os-title { color: var(--muted); font-size: 12px; margin-right: 2px; } #osnapBar label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; } #osnapBar label.os-na { opacity: .45; cursor: default; } #osnapBar input { margin: 0; } /* ---- v23.84: ガムボール設定マーク（Rhino のメニューボール風・ガムボール右上に常時表示） ---- */ .gb-mark { position: fixed; z-index: 900; width: 14px; height: 14px; border-radius: 50%; background: var(--panel); border: 2px solid var(--accent); box-shadow: var(--shadow); cursor: pointer; } .gb-mark:hover { background: var(--accent-w); } .gb-mark.rel { border-color: #c8891c; background: #c8891c; } /* 「移動…」待ち */ .gb-mark.anch { background: var(--accent); } /* カスタム基点あり */ /* v23.421: 外科パネルのコンパクト化 — 余白を詰め、見出しは折りたたみ可能（▾/▸） */ #surgeryPanel .fp-body { font-size: 12.5px; } #surgeryPanel .fp-body > label, #surgeryPanel .sg-sec > label { margin: 1px 0; } #surgeryPanel .fp-actions.act-row { gap: 4px; margin: 3px 0; } #surgeryPanel .fp-actions .act-btn, #surgeryPanel .fp-actions .secondary { padding: 3px 8px; } /* v23.427（先生ご指摘「ボタンが縦長でスクロールが増える」）: 外科パネルの操作行は、 ボタンが収まらないとき**文字を 1 文字ずつ縦に折り返すのではなく、ボタンごと次の行へ 折り返す**。white-space: nowrap でボタンの最小幅 = 文字列の幅になり、 flex-wrap がボタン単位の折り返しを引き受ける（②の サイズ〜反対側へミラー が対象）。 */ #surgeryPanel .fp-actions.act-row { flex-wrap: wrap; } #surgeryPanel .fp-actions.act-row .act-btn, #surgeryPanel .fp-actions.act-row .secondary, #surgeryPanel .fp-actions.act-row > label { white-space: nowrap; } /* v23.427: ③ の左右 2 列の表（左右対称の術式のみ。バー設計 Adj の表と同じ考え方） */ #sgEditTbl table.sg-edit { width: 100%; border-collapse: collapse; } #sgEditTbl table.sg-edit th, #sgEditTbl table.sg-edit td { padding: 1px 2px; font-weight: normal; } #sgEditTbl table.sg-edit th { opacity: .75; } #sgEditTbl table.sg-edit th:nth-child(n+2), #sgEditTbl table.sg-edit td:nth-child(n+2) { text-align: center; } #sgEditTbl table.sg-edit input { width: 62px; } #sgEditTbl table.sg-edit td[colspan] input { width: 62px; } #sgEditTbl table.sg-edit .sg-edit-head { padding-top: 5px; opacity: .75; } #surgeryPanel .prop-head.sg-sec-head { cursor: pointer; user-select: none; margin-top: 4px; } #surgeryPanel .prop-head.sg-sec-head::before { content: '▾ '; opacity: .55; font-size: 10px; } #surgeryPanel .prop-head.sg-sec-head.sg-closed::before { content: '▸ '; opacity: 1; } #surgeryPanel .prop-head.sg-sec-head:hover { color: var(--accent, #2f6f68); } /* v23.429（先生ご要望「閉じているときに開けるように見えない — もう少し目立つように」）: 閉じた見出しはボタン状（薄い縹の面 + 輪郭 + 濃い矢印・:root トークンのみ・影は使わない）にし、 クリックで開けることがひと目で分かるようにする。開いている見出しは従来どおりの薄い表示。 */ #surgeryPanel .prop-head.sg-sec-head.sg-closed { background: var(--accent-w); border: 1px solid var(--accent-2); border-radius: 6px; color: var(--accent); padding: 4px 8px; margin: 6px 0 2px; } #surgeryPanel .prop-head.sg-sec-head.sg-closed:hover { border-color: var(--accent); filter: brightness(1.04); } #surgeryPanel .sg-mv-grid label { margin: 0; } /* v23.419: ランドマーク名の浮きラベル（ホバー・ドラッグ中） */ .sg-lm-tip { position: fixed; z-index: 950; pointer-events: none; background: rgba(18, 30, 42, .88); color: #fff; font-size: 12px; line-height: 1.4; padding: 2px 8px; border-radius: 6px; white-space: nowrap; } #libCtxMenu { position: fixed; z-index: 4000; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 4px; min-width: 150px; box-shadow: 0 0 0 1px rgba(0,0,0,.14); display: flex; flex-direction: column; } #libCtxMenu button { background: none; border: none; color: var(--text); text-align: left; padding: 7px 12px; border-radius: 6px; cursor: pointer; font-size: 12.5px; } #libCtxMenu button:hover { background: var(--accent-w); } #libCtxMenu button.danger { color: var(--danger); } #libCtxMenu button.danger:hover { background: var(--danger-w); } .liblist li[draggable="true"] { cursor: grab; } .liblist li[draggable="true"]:active { cursor: grabbing; } .libthumb { width: 38px; height: 38px; border-radius: 6px; background: var(--sunken); border: 1px solid var(--line); object-fit: contain; flex: none; } .libcat { font-size: 9px; color: var(--muted); } /* 設定 */ .prop-section { margin-bottom: 16px; } .prop-head { font-size: 10px; font-weight: 600; letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase; padding-bottom: 5px; border-bottom: 1px solid var(--hair); margin-bottom: 8px; } .prop-body .row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .prop-body .row > span:first-child { flex: 1; } .build-result { margin-top: 8px; font-size: 11px; line-height: 1.8; color: var(--muted); white-space: pre-wrap; } .build-result .ok { color: var(--accent); } /* ---- フローティングパネル ---- */ .floatpanel { position: fixed; top: 128px; left: 190px; width: 372px; z-index: 30; /* v23.35: 数値欄2倍・一項目一行のため 340→372 */ background: var(--panel); background-image: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 12px; max-height: calc(100vh - 144px); overflow-y: auto; overflow-x: hidden; } .floatpanel.wide { width: 560px; left: 50%; transform: translateX(-50%); } /* v23.220（先生指示「無駄な空白が多い・可能な限り横幅を減らす」）: バー設計は細幅。 Adj のポイント別 6 列（30 + 6×38px + 隙間）が収まる下限に合わせた */ #barPanel { width: 336px; } .floatpanel.hidden { display: none; } .fp-title { font-family: var(--label); font-weight: 700; letter-spacing: 0.08em; margin-bottom: 10px; display: flex; justify-content: space-between; /* v23.49（先生指示）: パネル内をスクロールしてもタイトルが上端に残り、いつでも掴んで移動できる */ position: sticky; top: 0; z-index: 5; background: var(--panel); background-image: var(--paper); } .fp-close { background: transparent; border: none; color: var(--muted); font-size: 15px; } /* v22.43: 工程タブ — 必ず 1 列（折り返さない）。 flex-wrap:nowrap + flex:0 1 auto + min-width:0 で、入り切らない時だけ 幅の広いタブから縮んで … になる（説明は title で出す）。 */ .fp-tabs { display: flex; flex-wrap: nowrap; gap: 2px; margin: 2px 0 8px; } .fp-tabs { border-bottom: 1px solid var(--hair); } .fp-tab { flex: 0 1 auto; min-width: 0; background: transparent; border: none; color: var(--muted); border-radius: 0; padding: 8px 10px; font-size: 13px; line-height: 1.25; cursor: pointer; font-family: var(--label); letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } .fp-tab:hover { color: var(--text); background: transparent; border-color: transparent; } /* v23.34（先生指示）: 選択中のタブは Import の主動作ボタンと同じアクセント背景で一目で分かるように （従来の下線だけでは分かりにくい）。下線 box-shadow は背景に置き換えたため廃止 */ .fp-tab.active { background: var(--accent); color: var(--on-accent); font-weight: 700; border-color: transparent; border-radius: 8px 8px 0 0; box-shadow: none; } .fp-tabpage.hidden { display: none; } /* v23.478（先生ご指摘「文字が大きくて読めないタブはだめでしょう」）: 手術パネルは 4 タブに なったため、既定の 13px + letter-spacing では 372px 幅に入り切らず「① ランド…」と省略されて いた。手術パネル専用に文字とパディングを詰め、4 本とも全文が読めるようにする。 */ /* v23.483: 手術パネルだけ少し広くする。4 タブ（① ランドマーク〜⑥-⑧ 製作）を 11px で 並べると 372px ではスクロールバーぶんで溢れ、環境によって「…」が戻る恐れがあった。 ランドマークの長い名前（上顎第一大臼歯頬側近心咬頭頂）と基準平面の 7 列表にも効く。 */ #surgeryPanel { width: 404px; } .fp-tabs.sg-tabs { gap: 1px; } .fp-tabs.sg-tabs .fp-tab { font-size: 11px; letter-spacing: 0; padding: 7px 5px; } /* v23.479（先生ご指示「タブに縁も付けてください。タブに見えにくいです」）: 手術パネルのタブに 枠線 + タブ形の角丸 + 薄い下地を付け、下辺はタブ列の下線と繋がる「タブらしい」見た目にする。 選択中はアクセント背景（従来どおり）+ アクセント色の枠。 */ .fp-tabs.sg-tabs .fp-tab { border: 1px solid var(--line); border-bottom: none; border-radius: 8px 8px 0 0; background: rgba(0, 0, 0, 0.035); } .fp-tabs.sg-tabs .fp-tab:hover { background: rgba(0, 0, 0, 0.07); border-color: var(--line); } .fp-tabs.sg-tabs .fp-tab.active { border-color: var(--accent); background: var(--accent); } .fp-steps { margin: 0 0 10px 18px; font-size: 12px; line-height: 2; color: var(--muted); } .fp-steps li.on { color: var(--text); } .fp-steps li.done { color: var(--accent); } .fp-params { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; } .fp-params label { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; gap: 2px 6px; } .fp-params select, .fp-params input[type="text"] { max-width: 100%; min-width: 0; } /* v23.35（先生指示「一項目あたり一行」）: 折り返しをやめ、長い項目名は … で詰める（説明は従来どおりホバー） */ .fp-params label > span:first-child { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fp-actions { display: flex; gap: 6px; margin-bottom: 8px; } .fp-note { font-size: 10px; color: var(--muted); line-height: 1.7; } .fp-body { display: flex; flex-direction: column; gap: 10px; } .preset-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .preset { display: flex; flex-direction: column; padding: 8px; } /* v23.23: Import パネルの「STL 取り込み」はファイル入力なので label。見た目はボタンの preset と揃える */ label.preset { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; transition: background .12s, border-color .12s; } label.preset:hover { border-color: var(--accent-2); background: var(--accent-w); } /* v23.25: Import パネルの体裁（先生指示）。preset の題字は共通ルールで 10px・muted に なり読みにくいため、このパネルだけ題字を通常サイズ・太字に（説明は従来どおりホバー）。 v23.29（先生指示「Import を参考に UI 統一」）: Export パネルも同じ大きなボタン体裁に揃える。 */ #importPanel .preset, #exportPanel .preset { padding: 10px 12px; text-align: left; align-items: flex-start; } #importPanel .preset > span:first-child, #exportPanel .preset > span:first-child { font-size: 13px; color: var(--text); font-weight: 600; } /* v23.28: 次にやる操作をアクセント色で示す（工程が進むと自動で移る）。label/button 共通 */ #importPanel .imp-next { background: var(--accent); border-color: var(--accent); } #importPanel .imp-next:hover { background: var(--accent); border-color: var(--accent); filter: brightness(1.12); } #importPanel .imp-next > span:first-child { color: var(--on-accent); } .preset span { font-size: 10px; color: var(--muted); } .preset:hover span { color: inherit; } /* 履歴 */ .hist-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .hist-head { font-size: 11px; color: var(--muted); margin-bottom: 6px; } .histlist { list-style: none; max-height: 320px; overflow-y: auto; } .histlist li { padding: 6px 8px; border-bottom: 1px solid var(--line); font-size: 12px; display: flex; align-items: center; gap: 8px; } .histlist .grow { flex: 1; } .histlist .when { font-family: var(--mono); font-size: 10px; color: var(--muted); } /* ---- ビューキューブ ---- */ #viewcube { position: absolute; top: 56px; right: 14px; width: 84px; height: 84px; perspective: 340px; z-index: 5; user-select: none; } #vc-inner { position: absolute; transform-style: preserve-3d; margin: 21px; width: 42px; height: 42px; } .vc-face { position: absolute; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: var(--panel); border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; backface-visibility: hidden; } .vc-face:hover { background: var(--accent-2); color: var(--on-accent); border-color: var(--accent); } .vc-front { transform: translateZ(21px); } .vc-back { transform: rotateY(180deg) translateZ(21px); } .vc-right { transform: rotateY(90deg) translateZ(21px); } .vc-left { transform: rotateY(-90deg) translateZ(21px); } .vc-top { transform: rotateX(90deg) translateZ(21px); } .vc-bottom { transform: rotateX(-90deg) translateZ(21px); } /* 設定行の折返し対策（長いラベル・セレクト） */ .prop-body .row { flex-wrap: wrap; } .prop-body .row select { max-width: 168px; } /* トースト */ #toast { position: fixed; bottom: 18px; right: 18px; z-index: 99; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; } .toastmsg { background: var(--panel-2); border: 1px solid var(--accent-2); border-radius: 6px; padding: 8px 14px; font-size: 12px; animation: tin 0.18s ease-out; } .toastmsg.warn { border-color: var(--warn); } @keyframes tin { from { opacity: 0; transform: translateY(6px); } } @media (prefers-reduced-motion: reduce) { .toastmsg { animation: none; } } /* v23.235: 更新通知バナー（アップデート検知 → 保存して再読み込み）。画面最上部・中央・非ブロッキング */ #updBanner { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; align-items: center; gap: 10px; max-width: 92vw; background: #fff6e5; color: #7a4b00; border: 1px solid #e0a94a; border-radius: 8px; padding: 8px 12px; font-size: 13px; box-shadow: 0 0 0 1px rgba(0,0,0,.14); animation: tin 0.2s ease-out; } #updBanner .upd-msg { font-weight: 600; } #updBanner button { white-space: nowrap; } /* リタッチブラシ */ .fp-retouch { border-top: 1px solid var(--line); padding-top: 10px; margin-bottom: 10px; } .fp-retouch.hidden { display: none; } .fp-retouch-head { font-size: 11px; color: var(--muted); font-weight: 700; letter-spacing: 0.08em; margin-bottom: 7px; } .brushbtn.active { background: var(--accent-2); border-color: var(--accent); } .fp-brushsize { display: flex; align-items: center; gap: 8px; font-size: 12px; } .fp-brushsize input { flex: 1; } /* パネルのドラッグと縮小 */ .fp-title.vp-drag { cursor: move; user-select: none; } .fp-btns { display: flex; gap: 4px; } .fp-min { background: transparent; border: none; color: var(--muted); font-size: 14px; padding: 0 5px; } .fp-min:hover, .fp-close:hover { color: var(--text); } .floatpanel.mini .fp-steps, .floatpanel.mini .fp-note, .floatpanel.mini .fp-retouch { display: none; } .floatpanel.mini { width: 250px; } /* 右パネル縮小 */ .side-collapse { border: none; background: transparent; color: var(--muted); padding: 0 8px; font-size: 14px; } #rightpanel.collapsed { width: 30px; } #rightpanel.collapsed .tab, #rightpanel.collapsed .tabpage { display: none; } #rightpanel.collapsed .side-collapse { transform: rotate(180deg); } .preset.qsel { background: var(--accent-2); border-color: var(--accent); } /* ポイント別リスト（v22.22: 1 点 1 行のグリッド — 番号 / 浮かせ / 太さ / 扁平 / 回転） */ .barlifts { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; max-height: 190px; overflow-y: auto; overflow-x: auto; } .barlifts .bl-head, .barlifts .bl-row { display: grid; grid-template-columns: 30px repeat(3, minmax(40px, 1fr)); gap: 4px; align-items: center; } /* v22.69: レクト断面では 上/下/屈曲 の 3 列が増える（先生指示: 制御点間で部分的に使うため） v22.71: 「浮かせ」列を削除したので 太さ/扁平/回転 + 上/下/屈曲 = 6 列 */ .barlifts.rect .bl-head, .barlifts.rect .bl-row { grid-template-columns: 30px repeat(6, minmax(38px, 1fr)); } .barlifts .bl-head { position: sticky; top: 0; z-index: 1; background: var(--panel); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-align: center; padding-bottom: 3px; } /* v23.13（先生指示: ①②③ が小さすぎて見えない）— 番号を大きくはっきり表示 */ .barlifts .bl-no { font: 700 16px/1 var(--mono); color: var(--text); text-align: center; cursor: pointer; } .barlifts .bl-no:hover { color: var(--accent); } /* v22.85（先生指示）: 選択中の制御点の行を光らせる。3D 側の赤い縁取りと色を揃えて対応を示す */ .barlifts .bl-row.sel { background: var(--danger-w); box-shadow: inset 3px 0 0 var(--danger); border-radius: 6px; } .barlifts .bl-row.sel .bl-no { color: var(--danger); font-weight: 800; font-size: 18px; } .barlifts input[type=number] { width: 100%; min-width: 0; box-sizing: border-box; padding: 3px 5px; font: 500 13px/1.3 var(--mono); text-align: right; /* v23.35: ①〜の数値が小さい→13px */ } /* グループバッジ */ .gbadge { display: inline-block; background: var(--accent-2); color: var(--on-accent); font-size: 9px; font-weight: 700; padding: 0 4px; border-radius: 6px; margin-right: 4px; cursor: pointer; } .gbadge:hover { background: var(--accent-2); } /* ツールバーの小型化 */ #vp-toolbar .tool { padding: 3px 8px; font-size: 11px; } #vp-toolbar { gap: 3px; padding: 4px 6px; } /* ライブラリフォルダツリー */ .libfolder { cursor: pointer; font-weight: 700; color: var(--muted); padding: 4px 2px; user-select: none; } .libfolder:hover { color: var(--text); } .libfolder.collapsed { opacity: 0.75; } .liblist li[data-incat] { padding-left: 16px; } .cren, .cunbuild, .cview { background: transparent; border: none; color: var(--muted); padding: 2px 3px; font-size: 11px; } .cren:hover, .cunbuild:hover, .cview:hover { color: var(--text); } /* v22.41: 名前を優先して伸ばす（アイコン・ボタンは縮まない） */ .complist li > button { flex: none; } /* ツールバー: 縦書き崩れの解消（横長許容） */ #vp-toolbar { flex-wrap: nowrap; max-width: none; } #vp-toolbar .tool { white-space: nowrap; padding: 3px 7px; font-size: 11px; line-height: 1.3; } #vp-toolbar .vp-sep { margin: 0 2px; } /* 選択部品直下のクイック外観バー */ /* v21.94: グループヘッダ行と折り畳み */ #componentList li.cgroup { display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: rgba(111,95,168,.10); border-left: 3px solid var(--wisteria); font-weight: 600; cursor: pointer; } #componentList li.cgroup .gcaret { width: 14px; text-align: center; color: var(--wisteria); cursor: pointer; } #componentList li.cgroup .gname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #componentList li.cgroup .gcount { color: var(--muted); } #componentList li.cgroup .gop { width: 64px; } #componentList li.in-group { padding-left: 24px; box-shadow: inset 3px 0 0 rgba(111,95,168,.45); } .cquick { display: flex; align-items: center; gap: 8px; padding: 4px 8px 6px 26px; background: var(--accent-w); } .cquick .qcolor { width: 30px; height: 22px; padding: 0; border: 1px solid var(--line); } .cquick .qop { flex: 1; } /* 認証・患者リスト */ .fullscreen-overlay { position: fixed; inset: 0; background: var(--bg); z-index: 200; display: flex; align-items: center; justify-content: center; } .fullscreen-overlay.hidden { display: none; } .auth-card { width: 320px; background: var(--panel); background-image: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 10px; } /* v23.346（先生報告「ID 登録画面が上下にはみ出て見えない」）: flex の align-items:center は子が親より大きいと上下が視界外に切れてスクロールも できない（flex 仕様）。ログインのオーバーレイだけスクロール可にし、カードは margin:auto — 画面に収まるときは従来どおり中央・収まらないときは上から全体を スクロールで読める。上下 16px の余白も常に確保。 */ #authOverlay { overflow-y: auto; padding: 16px 0; } #authOverlay .auth-card { margin: auto; flex-shrink: 0; } /* v23.346（先生指示「横幅を広くしてスクロールをなくして」）: 登録申請モードはカードを 広げ、追加入力 8 項目を 2 カラムのグリッドに — 縦の高さがほぼ半分になり、一般的な ノート PC（縦 768px）でもスクロール無しで全項目が見える。data-mode は setAuthMode が 設定済みのため CSS だけで完結。招待コードは全幅（説明文が長く、必須の要）。 */ #authOverlay[data-mode="signup"] .auth-card { width: min(680px, calc(100vw - 32px)); } #authOverlay[data-mode="signup"] #authSignupExtra:not(.hidden) { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px 14px; align-items: end; } #authOverlay[data-mode="signup"] #authSignupExtra label:has(#authSignupInvite) { grid-column: 1 / -1; } #authOverlay[data-mode="signup"] #authSignupExtra label:has(#authPass2) { grid-column: 1 / -1; } .auth-brand { color: var(--accent); font-family: var(--label); font-weight: 700; letter-spacing: 0.12em; font-size: 17px; text-align: center; } .auth-sub { color: var(--muted); text-align: center; font-size: 12px; margin-top: -6px; } .auth-title { font-weight: 600; margin: 10px 0 2px; } .auth-card label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); } .auth-card input { background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-ctl); /* v23.360: --bg は作業台色になったため入力地は --sunken へ */ color: var(--text); padding: 8px 10px; font-size: 14px; } .auth-err { color: var(--danger); font-size: 12px; min-height: 16px; } .auth-card .primary { margin-top: 4px; } /* v23.115（先生報告「患者一覧の横幅が狭い」）: 画面幅に応じて広げる（従来 640px 固定） */ .patient-card { width: min(1680px, 96vw); max-height: 86vh; /* v23.129（先生要望）: 余白をやめて横幅を使う */ background: var(--panel); background-image: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 12px; } .patient-head { display: flex; align-items: center; gap: 14px; } .patient-new { display: flex; gap: 8px; } .patient-new input { flex: 1; background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-ctl); color: var(--text); padding: 8px 10px; } .patient-list { overflow: auto; border-top: 1px solid var(--line); } .patient-row { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--line); cursor: pointer; } .patient-row:hover { background: var(--accent-w); } .patient-row .pname { font-weight: 600; flex: 1; } .patient-row .pmeta { color: var(--muted); font-size: 12px; } /* ネームプレートの折り畳み */ .np-fold { border: 1px solid var(--line); border-radius: 6px; margin: 6px 0; padding: 0 6px 4px; } .np-fold summary { cursor: pointer; padding: 6px 2px; font-size: 12px; color: var(--muted); user-select: none; } .np-fold summary:hover { color: var(--text); } .np-fold[open] summary { color: var(--accent); } /* 説明文の省スペース化: 本文は隠し、ⓘ ホバーで表示 */ .fp-steps, .fp-note, .fp-help { display: none !important; } .info-dot { display: inline-block; margin: 4px 2px; padding: 1px 8px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font-size: 11px; cursor: help; user-select: none; } .info-dot:hover { color: var(--accent); border-color: var(--accent); } .preset span:nth-child(2) { display: none; } .complist li.multi-sel { outline: 2px solid #3ba0ff; outline-offset: -2px; } /* v23.229: 3D の青枠と同色 */ /* ---- コンパクト操作ボタン（v21.37: Tag / D-A Bool / Parts / Align / Clear）---- */ #npFold:not([open]) { display: none; } /* 開閉は Tag ボタンが担当（閉時は枠ごと非表示） */ .act-row { display: flex; gap: 4px; margin-bottom: 8px; } .act-btn { flex: none; min-width: 0; padding: 6px 4px; font-size: 11px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 6px; letter-spacing: .02em; background: var(--panel-2); } .act-row .act-btn { flex: 1 1 0; } /* 均等割りは横一列の行内のみ（縦 flex 内では潰れるため） */ .act-btn.accent { border-color: var(--accent-2); color: var(--accent); } .act-btn.accent:hover { background: var(--accent-w); } .act-btn.on { background: var(--accent-2); color: var(--on-accent); } /* v23.30（先生指示「Import を参考に UI 統一」）: Build（確定）ボタンを Import の主動作ボタンと 同じ存在感に。全幅・大きめ・アクセント色。単一アクションの Build タブ内なので縦伸びの心配なし。 ★咬合器の act-row 内 primary（artBake 等）は横並びを崩さないよう対象外＝id で限定 */ #bandCommit, #barCommit { width: 100%; padding: 10px 12px; font-size: 13px; font-weight: 600; background: var(--accent); border-color: var(--accent); color: var(--on-accent); } #bandCommit:hover, #barCommit:hover { filter: brightness(1.12); } /* ---- ホバー説明ツールチップ（data-tip 属性 / i18n は data-i18n-tip で登録）---- */ [data-tip] { position: relative; } [data-tip]:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 240px; white-space: normal; background: var(--tip-bg); color: #f5f2ec; border: 1px solid var(--tip-bg); border-radius: 6px; padding: 6px 9px; font-size: 11px; line-height: 1.6; text-align: left; z-index: 80; pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,.16); } [data-tip]:hover::before { content: ''; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--tip-bg); z-index: 80; pointer-events: none; } /* 行の左右端ボタンは画面外クリップを避けて端寄せ */ .act-row .act-btn:first-child[data-tip]:hover::after { left: 0; transform: none; } .act-row .act-btn:last-child[data-tip]:hover::after { left: auto; right: 0; transform: none; } /* v22.50: フローティングパネル内は左端起点で右へ伸ばす（パネル・画面左端からのはみ出し防止・先生報告） */ .floatpanel [data-tip]:hover::after { left: 0; transform: none; max-width: min(300px, 70vw); } .floatpanel [data-tip]:hover::before { left: 12px; transform: none; } /* v21.62: ツールバードロップダウン */ .tb-dd { position: relative; display: inline-block; } .tb-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; background: var(--panel, #f5f2ec); border: 1px solid var(--line, #cdc6b8); border-radius: 8px; padding: 4px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.14); min-width: 220px; } .tb-menu.hidden { display: none; } #clipFlipBtn.hidden { display: none; } /* v22.06: 断面中のみ表示 */ .tb-menu > button { text-align: left; background: transparent; color: var(--text, #33302b); border: none; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 12.5px; } .tb-menu > button:hover { background: var(--accent-2, #ddedf6); } .tb-menu label { font-size: 11.5px; color: var(--muted, #7a756b); } /* v22.08: 汎用 hidden ルール（btnMaster等、個別ルールに漏れた要素対策・根本修正） */ .hidden { display: none !important; } /* v22.19: ガンボール数値入力（Rhino 風）— 矢印/円弧クリックで出る小さな入力欄 */ .gb-num { position: fixed; z-index: 9000; display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 0 0 1px rgba(0,0,0,.14); } .gb-num .gb-ax { font: 700 12px/1 var(--mono); min-width: 10px; text-align: center; } .gb-num input { width: 84px; padding: 4px 6px; background: var(--sunken); color: var(--text); border: 1px solid var(--line); border-radius: 6px; font: 500 13px/1.2 var(--mono); outline: none; } .gb-num input:focus { border-color: var(--accent); } .gb-num .gb-unit { font: 500 11px/1 var(--mono); color: var(--muted); } /* v22.61: 折り畳みセクション（先生指示: 咬合器の項目が増えたため）。 マーカーは ::before で描く — data-i18n の textContent 差し替えに巻き込まれない */ /* v23.22（先生指示「折りたたんでいるのが分かりにくい・》を目立たせて・区切り線が細い」）: 矢印をアクセント色の太字「❯」にして開閉で回転・節の上に太い区切り線を敷く */ .prop-head.collapsible { cursor: pointer; user-select: none; border-top: 2px solid var(--line); padding-top: 7px; margin-top: 6px; } .prop-head.collapsible::before { content: '❯'; display: inline-block; width: 1.15em; color: var(--accent); font-weight: 900; font-size: 12px; transform: translateY(-1px); transition: transform .12s ease; } .prop-head.collapsible.open::before { transform: translateY(1px) rotate(90deg); } /* ---- v22.85: リンガルブラケットベース（限定機能） ---- */ .lg-prog { height: 4px; background: var(--panel-2); border-radius: 6px; overflow: hidden; margin: 6px 0; } .lg-prog i { display: block; height: 100%; width: 0%; background: var(--warn); transition: width .1s; } .lg-verdict { padding: 6px 8px; border-radius: 6px; font-weight: 600; margin: 4px 0; font-size: 12px; } .lg-verdict.ok { background: rgba(95,148,64,.12); color: var(--ok); border: 1px solid rgba(95,148,64,.45); } .lg-verdict.ng { background: var(--danger-w); color: var(--danger); border: 1px solid rgba(207,68,54,.45); } .lg-list { max-height: 180px; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; margin: 4px 0; } .lg-row { display: flex; align-items: center; gap: 6px; padding: 3px 8px; font-size: 11px; cursor: default; } .lg-row:hover { background: var(--panel-2); } .lg-row.lg-muted { color: var(--muted); } .lg-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .lg-name { min-width: 34px; font-weight: 600; } .lg-meta { color: var(--muted); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lg-report { width: 100%; height: 84px; background: var(--sunken); color: var(--muted); border: 1px solid var(--line); border-radius: 6px; font: 10px/1.5 var(--mono); padding: 5px; resize: none; white-space: pre; } /* v23.361 */ /* v22.86: パッド生成（Bracket Base ステップ2） */ /* v23.49（先生指示「数値入力欄の高さや左右のズレを無くす」）: 2 列グリッドで左右を揃え、 input と select の高さ・字の大きさを完全に統一する（従来は flex-wrap で行ごとに幅が変わりズレていた）。 */ .lg-gen{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 10px; align-items:end; margin-top:8px} .lg-gen label{display:flex; flex-direction:column; gap:2px; min-width:0} .lg-gen input, .lg-gen select{width:100%; box-sizing:border-box; height:36px; font-size:14px; padding:6px 8px} .lg-gen button{grid-column:1 / -1; white-space:nowrap; margin-top:2px} /* 生成ボタンは常に全幅 */ /* v22.86: 歯面なぞりパッド */ .lg-trace{margin-top:8px; padding-top:8px; border-top:1px solid var(--hair)} .lg-trace-row{display:flex; gap:6px; align-items:center; margin-top:6px} .lg-trace-row .small:first-child{flex:1} .lg-sec{margin-top:10px; padding-top:8px; border-top:1px solid var(--hair); font-weight:600; font-size:12px; opacity:.85} /* v22.90: 歯式割当グリッド */ .lg-fdi-grid{display:grid; grid-template-columns:repeat(8,1fr); gap:3px; margin-top:6px} .lg-fdi-cell{padding:4px 0; font-size:11px; border:1px solid var(--line,var(--line)); background:var(--panel-2); color:var(--text); border-radius:4px; cursor:pointer} .lg-fdi-cell.used{border-color:var(--ok); color:var(--ok)} .lg-fdi-cell.swap-src{outline:2px solid var(--accent); outline-offset:-2px; font-weight:700} /* v23.41: 転位歯の入れ替え 1 つ目 */ .lg-fdi-cell.missing{opacity:.35; text-decoration:line-through} #lgFdiState.ng{color:var(--danger)} /* ---- v22.91: スライダー横の数値入力欄（数値を打って Enter で確定・スライダーと双方向連動） ---- */ input.range-num { width: 56px; flex: none; padding: 1px 4px; margin-left: 4px; font: 14px/1.4 var(--mono); } /* v23.37: 11px→14px（数値欄の字を全欄 14px に統一・先生指示）/ v23.361: Noto Sans */ /* ---- v22.94: お知らせ（What's New） ---- */ .wn-notice { position: fixed; top: 52px; left: 50%; transform: translateX(-50%); z-index: 60; background: var(--accent); color: var(--on-accent); padding: 8px 12px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; box-shadow: 0 0 0 1px rgba(0,0,0,.14); } .wn-notice:hover { background: var(--accent-2); } .wn-notice .wn-x { background: none; border: none; color: var(--accent-w); font-size: 15px; cursor: pointer; padding: 0 2px; } .wn-notice .wn-x:hover { color: var(--on-accent); } .wn-entry { border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-bottom: 10px; } .wn-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .wn-head b { font-size: 14px; } .wn-date { color: var(--muted); font: 11px/1 var(--mono, monospace); } .wn-eff { margin: 2px 0 6px; } .wn-item { margin: 6px 0; } .wn-item .wn-id { color: var(--muted); margin: 2px 0 0 1em; line-height: 1.5; } /* ---- v22.95: 工程ログ / 事例集 ---- */ .howto-img { width: 100%; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-2); min-height: 120px; } .howto-cap { font-size: 13px; margin: 6px 0 4px; line-height: 1.5; } .howto-bar { display: flex; gap: 6px; align-items: center; } .pt-viewsw { display: flex; gap: 6px; margin: 6px 0; } .pt-viewsw .on { background: var(--accent-w); border-color: var(--accent); } /* v23.83: 共有事例集 — 外枠はスクロール、内側にタグ絞り込みバー + カードグリッド */ .pt-gallery { max-height: 58vh; overflow-y: auto; padding: 2px; } /* v23.115: マスターのアカウント一覧（左サイドバー）+ あかさたな / A-Z 索引 */ .pt-main { display: flex; gap: 14px; min-height: 0; flex: 1; } .pt-listwrap { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; } .pt-accounts { width: 250px; flex: none; border-right: 1px solid var(--line); padding-right: 12px; display: flex; flex-direction: column; gap: 6px; min-height: 0; max-height: 62vh; } .pt-accounts.hidden { display: none; } .pt-acct-head { font-size: 12px; color: var(--muted); font-weight: 600; } .pt-idx { display: flex; flex-wrap: wrap; gap: 3px; } .pt-idx button { border: 1px solid var(--line); background: var(--panel-2); border-radius: 6px; font-size: 11px; padding: 2px 6px; cursor: pointer; color: var(--text); min-width: 22px; } .pt-idx button.on { background: var(--accent-w); border-color: var(--accent); font-weight: 700; } .pt-acct-list { overflow-y: auto; min-height: 0; border-top: 1px solid var(--line); } .pt-acct { display: block; width: 100%; text-align: left; padding: 6px 8px; border: 0; background: none; cursor: pointer; font-size: 12.5px; color: var(--text); border-bottom: 1px solid var(--line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pt-acct:hover { background: var(--accent-w); } .pt-acct.on { background: var(--accent-w); font-weight: 700; box-shadow: inset 3px 0 0 var(--accent); } .pt-acct .n { color: var(--muted); font-size: 11px; margin-left: 4px; } .pt-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; } .sc-filterbar { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; align-items: center; } .sc-tagpick { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 4px; } .sc-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); cursor: pointer; color: var(--muted); user-select: none; } .sc-tag input { margin: 0; } .sc-tag.on { background: var(--accent-w); border-color: var(--accent); color: inherit; } .sc-tag.mini { padding: 0 6px; font-size: 10px; cursor: default; } .sc-tags { display: flex; flex-wrap: wrap; gap: 3px; margin: 3px 0; min-height: 14px; } .sc-thumbwrap { position: relative; } .sc-price { position: absolute; top: 6px; right: 6px; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #c8891c; color: #fff; } .sc-price.free { background: #1f8f5f; } .sc-mine { position: absolute; top: 6px; left: 6px; font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--accent); color: #fff; } /* v23.241: 事例集の回転プレビュー（ドラッグでターンテーブル） */ .sc-turn { touch-action: none; cursor: grab; } .sc-turn:active { cursor: grabbing; } .sc-turnbadge { position: absolute; bottom: 6px; right: 6px; font-size: 10px; pointer-events: none; padding: 1px 7px; border-radius: 999px; background: rgba(20, 28, 44, .62); color: #fff; } .sc-turncv { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--panel-2); } .pt-card { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--panel); transition: border-color .12s, box-shadow .12s; } .pt-card:hover { border-color: var(--accent-2); box-shadow: var(--shadow); } .pt-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--panel-2); } .pt-card .pc-noimg { width: 100%; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 11px; background: var(--panel-2); } .pt-card .pc-body { padding: 6px 8px; } .pt-card .pc-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pt-card .pc-meta { font-size: 10.5px; color: var(--muted); display: flex; justify-content: space-between; margin-top: 2px; } .pt-card .pc-howto { width: 100%; margin-top: 4px; } /* ---- v22.95.1: お知らせ内の PDF 埋め込みと事例集 ---- */ .wn-pdf { margin-top: 6px; } .wn-pdf iframe { width: 100%; height: 56vh; border: 1px solid var(--line); border-radius: 6px; background: var(--on-accent); } .wn-pdf-link { display: inline-block; margin-top: 4px; color: var(--accent); text-decoration: underline; } .wn-gal-head { font-weight: 700; font-size: 13px; margin: 14px 0 6px; padding-top: 10px; border-top: 1px solid var(--line); } .wn-gal { max-height: none; } /* ---- v22.98: バージョンバッジ（マスターのみ表示） ---- */ #verBadge { position: fixed; left: 118px; bottom: 6px; z-index: 55; color: var(--muted); /* v23.21: マスコットが左下へ来たため右隣へ */ font: 11px/1 var(--mono, monospace); pointer-events: none; opacity: .85; } /* v23.237: 配信バージョン管理（マスターのみ・verBadge の上）— 標準/β の版 + 標準版をアップデート */ /* v23.459（先生指示）: 左下の浮きパネル → オブジェクトスナップの下バー右端へ組み込み */ #chanPanel { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-left: auto; white-space: nowrap; } #chanPanel button { padding: 2px 10px; } #chanPanel .ch-lbl { color: var(--muted); } #chanPanel .ch-sep { color: var(--muted); margin: 0 2px; } #chanPanel button { margin-left: 6px; white-space: nowrap; } #chanPanel button:disabled { opacity: .45; cursor: default; } /* ---- v22.99: 塗りの手順・グループ削除（配色は和紙ポップのトークン経由） ---- */ .lg-phase { display: flex; gap: 6px; align-items: center; margin: 4px 0; } .lg-phase .on { background: var(--accent-w); border-color: var(--accent); color: var(--accent); font-weight: 700; } /* v23.54（先生指示）: 塗り工程を工程表（枠付き）に。現在の工程 = 青背景に白文字 */ .lg-steps3 { display: flex; gap: 4px; align-items: stretch; margin: 6px 0; } .lg-step-chip { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 6px 4px; min-height: 42px; line-height: 1.15; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--text); font-size: 11px; text-align: center; cursor: pointer; } .lg-step-chip b { font-size: 13px; font-weight: 800; opacity: .8; } .lg-step-chip:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-w); } .lg-step-chip:disabled { opacity: .5; cursor: default; } /* 現在選択中の工程 = 青背景に白文字（先生指示） */ .lg-step-chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .lg-step-chip.on b { opacity: 1; } /* ③ 接続・生成が押せる状態のとき（生成可能）は青枠で誘導し、押しやすく */ .lg-step-chip.ready { border-color: var(--accent); color: var(--accent); font-weight: 700; } .lg-step-chip.ready:hover { background: var(--accent); color: var(--on-accent); } .lg-step-sep { align-self: center; color: var(--muted); font-size: 14px; } /* v23.54: クリアランス＋「③ 生成」＋「クリア」を 1 行に（省スペース） */ .lg-genrow { grid-column: 1 / -1; display: flex; gap: 8px; align-items: end; } .lg-genrow label { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .lg-genrow input { width: 100%; box-sizing: border-box; height: 36px; font-size: 14px; padding: 6px 8px; } .lg-genrow button { flex: 0 0 auto; height: 36px; white-space: nowrap; margin: 0; } /* v23.54: title 付き項目はカーソルで「説明あり」と分かるように */ .lg-gen label[title] > span[data-i18n], .lg-genrow label[title] > span[data-i18n] { cursor: help; } .cgroup .gdel { background: none; border: none; cursor: pointer; opacity: .55; color: var(--muted); } .cgroup .gdel:hover { opacity: 1; color: var(--danger); } /* v23.35: スライダー横の自動数値欄（wheel.js）とガンボール数値入力は行に収まる幅で（字は 14px のまま） */ input.range-num { width: 96px; padding: 8px 10px; } /* v23.37: 通常の数値欄と同じ余白・大きさに */ .gb-num input[type=number] { width: 96px; padding: 5px 8px; font-size: 13px; } /* v23.35（先生指示）: スリーブの「既存ラウンドバー上を2点クリックして生成」と Bracket Base の「基準3点」ボタンに枠を付けて、押せるボタンだと分かるように */ #sleeveStart, #lgRef3, #lgTrace { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); } /* v23.37: 「歯面を塗る」にも枠（先生指示・押せるボタンだと分かるように） */ #sleeveStart:hover, #lgRef3:hover { border-color: var(--accent-2); background: var(--accent-w); color: var(--text); } /* v23.44: ゲームパッドのボタン割り当て表 */ .gp-map{display:flex; flex-direction:column; gap:4px; margin:4px 0} .gp-row{display:flex; align-items:center; gap:8px} .gp-blab{display:inline-block; min-width:52px; font-weight:600; color:var(--ink); font-size:13px} /* v23.50（先生指示）: 学習式リマップ — 割り当て表示(bval)を伸ばし、「学習」ボタンと「動作」select を添える */ .gp-bval{flex:1; min-width:0; font-size:13px; font-weight:600; color:var(--accent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .gp-learn{flex:0 0 auto; white-space:nowrap} .gp-learn.learning{background:var(--accent); color:var(--on-accent); border-color:transparent} .gp-row select.gp-act{flex:0 0 auto; max-width:132px; font-size:12px; padding:4px 6px} .gp-cap{min-width:96px; white-space:nowrap} /* v23.67: 構成リストのグループ D&D（ドラッグで運び、グループ or 行へ落として追加） */ #componentList li.dragging { opacity: .45; } #componentList li.drop-target { outline: 2px dashed var(--wisteria, #6f5fa8); outline-offset: -2px; background: rgba(111,95,168,.10); } #componentList li.cgroup.drop-target { background: rgba(111,95,168,.16); } .cgroup .gungroup { background: none; border: none; cursor: pointer; opacity: .55; color: var(--muted); } .cgroup .gungroup:hover { opacity: 1; color: var(--wisteria, #6f5fa8); } /* ================================================================ v23.127: コミュニティ（掲示板 / メッセージ / ギフト / 要望・バグ報告） */ .comm-card { max-width: 900px; width: 94vw; display: flex; flex-direction: column; max-height: 86vh; } .comm-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 6px 0 8px; } .comm-tabs button { background: none; border: none; border-bottom: 2px solid transparent; padding: 7px 14px; cursor: pointer; color: var(--muted); font-size: 13px; } .comm-tabs button.on { color: var(--text); border-bottom-color: var(--accent, #4f7d35); font-weight: 600; } .comm-body { overflow-y: auto; flex: 1; min-height: 240px; } .comm-bar { display: flex; gap: 8px; align-items: center; margin: 4px 0 8px; flex-wrap: wrap; } .comm-bar .on { color: var(--accent, #4f7d35); font-weight: 600; } .comm-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .comm-post { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; } .comm-text { margin: 4px 0; line-height: 1.6; } .comm-orig { font-size: 11px; opacity: .75; margin-top: 2px; } .comm-reply { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; } .comm-reply-box { background: rgba(79,125,53,.07); border-radius: 6px; padding: 6px 10px; margin-top: 6px; } .comm-msg { max-width: 78%; border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px; align-self: flex-start; } .comm-msg.mine { align-self: flex-end; background: rgba(79,125,53,.08); } .comm-dm { max-height: 48vh; overflow-y: auto; padding: 4px; } .comm-att-img { max-width: 240px; max-height: 180px; border-radius: 6px; display: block; margin: 4px 0; cursor: zoom-in; } .comm-att-video { max-width: 320px; max-height: 220px; border-radius: 6px; display: block; margin: 4px 0; } .comm-att-file { display: inline-block; margin: 4px 6px 0 0; font-size: 12px; } .comm-attacher { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; } .comm-chip { font-size: 11px; border: 1px solid var(--line); border-radius: 12px; padding: 1px 8px; } .comm-badge { display: inline-block; min-width: 16px; text-align: center; background: #cf4436; color: #fff; border-radius: 12px; font-size: 10px; padding: 1px 4px; margin-left: 4px; vertical-align: top; } .comm-gift-form { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; } .comm-gift-row { border-top: 1px solid var(--line); padding-top: 4px; } .comm-st-pending { color: #c8891c; } .comm-st-accepted, .comm-st-done { color: #1f8f5f; } .comm-st-declined, .comm-st-canceled, .comm-st-rejected { color: #cf4436; } .comm-st-doing { color: #c8891c; } .comm-share-note { font-size: 12px; color: #1f8f5f; margin: 3px 0; } .comm-kind { border: 1px solid var(--line); border-radius: 12px; padding: 0 8px; } /* 患者一覧の完成 / 制作中バッジ */ /* v23.362 色の役割整理: 完成=若草（済の役割色）・制作中=無彩（正常な状態に注意色を使わない）・ 共有=藤（帰属の情報色）。同じ色に複数の意味を持たせない。 */ .pt-done { color: var(--ok); font-size: 12px; white-space: nowrap; } .pt-wip { color: var(--muted); font-size: 12px; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; } .pt-sharedfrom { color: var(--wisteria); font-size: 12px; white-space: nowrap; } /* v23.128: TAD の Build ボタン（部品リスト行） */ .ctadbuild { color: #1f8f5f !important; font-weight: 600; } /* v23.129（先生要望）: 患者リスト行の省スペース化 — アイコンボタン・メモ */ .patient-row > button { white-space: nowrap; } .patient-row .picon { min-width: 30px; text-align: center; padding: 4px 6px; font-size: 15px; } .patient-row .pmemo { color: var(--muted); font-size: 12px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ================================================================ v23.137（先生要望「UI が崩れてきている・スクロールを減らして体裁を整えて」） ---------------------------------------------------------------- */ /* ---- ① 上部バー: 幅 1520px 以下で詰める（「スナップショット」等の 2 行折れ防止） ---- */ #topbar button { white-space: nowrap; } @media (max-width: 1520px) { #topbar { gap: 8px; padding: 0 10px; } #topbar .brand-sub { display: none; } #projName { width: 150px; } #topbar button { padding: 4px 8px; font-size: 12px; } #projSelect { max-width: 150px; } #topbar .save-state { font-size: 11px; } } @media (max-width: 1280px) { #topbar .brand-q { letter-spacing: 0.04em; font-size: 12px; } #projName { width: 120px; } } /* ---- ② 「新しくなりました」バナー: ツールバーに重ならない位置へ（従来 top:52px が ツールバー行を覆い、断面・干渉などのボタンが押せなく見えた） ---- */ .wn-notice { top: 94px; } /* ---- ③ ウィザードパネル: 「閉じる」の縦 1 文字折れ防止 + 決定ボタンを常に見える位置に （sticky フッター・小さい画面ではみ出して押せなかった） ---- */ #wizPanel .patient-head > span:first-child { flex: 1 1 auto; min-width: 0; } #wizPanel .patient-head button { white-space: nowrap; flex: none; } #wizPanel label.small { margin: 4px 0 !important; } #wizPanel > div:last-child { position: sticky; bottom: -10px; background: var(--panel-2); padding: 8px 0 10px; margin-top: 8px; border-top: 1px solid rgba(0,0,0,.14); } /* ---- ④ CT / TAD パネル: 断面を 2 列グリッドに（縦一列 3 枚 → スクロール大幅減） ---- */ .ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; align-items: start; } .ct-cell { min-width: 0; } .ct-cell canvas { width: 100%; border: 1px solid var(--line); border-radius: 6px; cursor: crosshair; background: #000; display: block; } .ct-cell input[type="range"] { width: 100%; margin: 2px 0 0; } .ct-cell .small { margin: 0 0 2px; } /* ---- ⑤ フローティングパネル内の入力・文字の統一（詰まり・不揃い対策） ---- */ .floatpanel .fp-body { font-size: 13px; } .floatpanel .fp-body input[type="number"] { width: 64px; padding: 3px 6px; } .floatpanel .fp-body select { max-width: 180px; } .floatpanel .fp-title { white-space: nowrap; } .floatpanel .fp-title > span:first-child { overflow: hidden; text-overflow: ellipsis; } /* ---- ⑥ 患者リスト: メモを行の 2 行目に全幅表示（先生要望「一覧のところにも表示」） クリックで編集。長文は 2 行まで + …（title 属性で全文） ---- */ .patient-row { flex-wrap: wrap; row-gap: 2px; } .patient-row .pmemo { flex-basis: 100%; order: 99; max-width: none; margin: 0 0 2px; color: #7a5c12; background: rgba(200, 137, 28, 0.09); border-radius: 6px; padding: 3px 10px; font-size: 12.5px; line-height: 1.45; white-space: pre-wrap; cursor: pointer; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .patient-row .pmemo:hover { background: rgba(200, 137, 28, 0.16); } /* 患者カード: 既定（width: min(1680px, 96vw)）が既にレスポンシブなので上書きしない */ /* 縦の狭い画面（ノート PC）では断面を 3 列 1 行に — スクロールをゼロに近づける */ @media (max-height: 860px) { #dicomPanel .ct-grid, #tadSecPanel .ct-grid { grid-template-columns: 1fr 1fr 1fr; } } /* ================================================================ v23.138（先生要望）: ①TAD 断面パネルの大画面レイアウト（Blue Sky 風・⛶ で切替） ---------------------------------------------------------------- */ #tadSecPanel.tad-big { max-height: none; overflow: hidden; display: flex; flex-direction: column; } #tadSecPanel.tad-big .fp-body { max-height: none !important; flex: 1 1 auto; overflow-y: auto; } #tadSecPanel.tad-big .ct-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px 16px; margin-top: 8px !important; } /* 断面を可能な限り大きく・ただし縦にはみ出さない（正方形キャンバスなので高さで頭打ち） */ #tadSecPanel.tad-big .ct-cell canvas { width: min(100%, calc(100vh - 250px)); margin: 0 auto; } #tadSecPanel.tad-big .ct-cell input[type="range"] { width: min(100%, calc(100vh - 250px)); margin-left: auto; margin-right: auto; display: block; } #tadSecPanel.tad-big .ct-cell .small { text-align: center; font-size: 13px; } /* ---------------------------------------------------------------- v23.138 ②: 他パネルの UI 整理の続き（v23.137 と同方針・先生要望「スクロールを減らして」） 1280×720 実測: Bracket Base（lingualPanel）は 524px・出力（exportPanel）は 193px の 縦スクロールが残っていた。縦の狭い画面ではパネルを広げて 2 段組（CSS columns = 上→下→右列の読み順が保たれる）にし、スクロールをほぼゼロへ。 */ @media (max-height: 800px) { #lingualPanel:not(.mini) { width: min(720px, 58vw); } #exportPanel:not(.mini) { width: min(640px, 52vw); } /* .fp-body は既定 display:flex（405 行目）— columns を効かせるため block へ戻す。 gap の代わりに子へ margin を付けて縦リズムを保つ */ #lingualPanel:not(.mini) .fp-body, #exportPanel:not(.mini) .fp-body { display: block; column-count: 2; column-gap: 20px; } #lingualPanel:not(.mini) .fp-body > *, #exportPanel:not(.mini) .fp-body > * { margin-bottom: 10px; } #lingualPanel .fp-body > *, #exportPanel .fp-body > * { break-inside: avoid; } #lingualPanel .fp-steps { font-size: 11.5px; margin: 4px 0 6px; } /* 大きな一枚ボタンの余白も少し詰める */ #exportPanel .fp-body > button { margin: 3px 0; } } /* v23.165（先生報告「Tool の説明書きがカーソルと被って読めない」）: Tool パレット脇の固定ツールチップ（標準 title の代替・カーソルに被らない） */ .oe-side-tip { position: fixed; z-index: 1200; width: max-content; max-width: 260px; background: var(--tip-bg); color: #f5f2ec; border: 1px solid var(--tip-bg); border-radius: 6px; padding: 6px 9px; font-size: 11px; line-height: 1.6; text-align: left; white-space: normal; pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,.16); } .oe-side-tip.hidden { display: none; } /* v23.194（先生指示「数値入力欄の大きさがまちまち・不揃い」）: 咬合器パネル（構成タブ）内の 数値欄を全て同じ余白・字サイズに統一（関節の前後/上下・顆頭座標・実測値・DPI なども同じ高さに揃う） */ #articSection input[type=number] { padding: 3px 6px; font-size: 13px; box-sizing: border-box; } /* v23.260（先生指示②）: 作図・挿入 — 押し出しの次のツールから二段目へ */ #rtIcons .rt-newrow { grid-column: 1; } /* v23.260（先生指示⑥）: 「新しくなりました」はマスコット（Bot）の吹き出しへ — 画面上部を空ける */ .wn-notice { top: auto; left: 14px; bottom: 168px; transform: none; max-width: 300px; border-radius: 12px; line-height: 1.5; } .wn-notice::after { content: ""; position: absolute; left: 34px; bottom: -9px; border: 10px solid transparent; border-top-color: var(--panel, #fff); border-bottom: none; } /* v23.260（先生指示⑤）: 断面・融合・検査・重ね合わせは Tool パレットのメニュー行へ */ #rtMenuRow { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px 2px; align-items: center; } #rtMenuRow .tool { padding: 3px 10px; font-size: 12px; } #rtMenuRow .tb-dd { position: relative; } #rtMenuRow .tb-menu { z-index: 80; } /* v23.260（先生指示⑤）: 半自動は工程サイドバーへ（Import の次）— メニューは右側へ開く */ #steps { overflow: visible; } #steps .tb-dd { position: relative; display: block; margin: 4px 10px; } #steps .tb-dd .tool { width: 100%; text-align: left; } #steps .tb-menu { left: calc(100% + 6px); top: 0; z-index: 80; } /* v23.260（先生指示④）: 並び替えモードの見た目 */ .rt-reorder #rtIcons .rt-ic, .rt-reorder #rtIconsEdit .rt-ic { outline: 1px dashed #2b4a8b; cursor: grab; } .rt-reorder #rtIcons .rt-ic.drag-over, .rt-reorder #rtIconsEdit .rt-ic.drag-over { outline: 2px solid #2b4a8b; } #rtCfg.active { background: #2b4a8b; color: #fff; border-radius: 6px; } /* v23.261（先生報告①）: 半自動メニュー展開中は工程①〜⑤を隠して半自動だけに */ #steps.wiz-open .step, #steps.wiz-open .steps-title { display: none; } /* v23.261（先生報告②「Tool のボタンにも縁を。ボタンに見えない」）: 移設先の .tool に ボタンらしい縁・背景・ホバーを付ける（ヘッダの Tool / パレットのメニュー行 / 工程バーの半自動） */ #topbar .tool, #rtMenuRow .tool, #steps .tool { border: 1px solid var(--line, #c8c2b6); background: var(--panel-2, #f3efe7); border-radius: 8px; padding: 4px 12px; cursor: pointer; } #topbar .tool:hover, #rtMenuRow .tool:hover, #steps .tool:hover { background: var(--accent-2, #ddedf6); border-color: var(--accent-2, #9cc4dc); } /* v23.262（先生指示①）: メニュー 4 つ（断面/融合/検査/重ね合わせ）を常に 1 行に — 4 等分グリッド・同じ高さ・長い言語は … で省略（ツールチップで全文） */ #rtMenuRow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px 8px 2px; } #rtMenuRow .tb-dd { position: relative; display: block; min-width: 0; } #rtMenuRow .tool { width: 100%; height: 26px; padding: 2px 6px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* v23.262（先生指示②「ボタンの高さ・数値入力欄の高さや幅を揃える。ムダに大きいのは みっともない」）: フローティングパネルと Tool パレット内のコントロール標準寸法。 高さ 26px に統一・数値欄は標準幅 76px（インライン指定・グリッド指定がある箇所はそちらが優先） */ .floatpanel input[type="number"], #rtPanel input[type="number"] { height: 26px; box-sizing: border-box; padding: 2px 6px; width: 76px; } .floatpanel select, #rtPanel select { height: 26px; box-sizing: border-box; padding: 2px 4px; } .floatpanel button:not(.preset):not(.primary), #rtPanel button:not(.rt-ic):not(.primary) { min-height: 26px; } .floatpanel .preset { padding: 8px 12px; } /* Import 等の大型プリセットを一回り圧縮 */ .floatpanel .primary, #rtPanel .primary { min-height: 28px; padding-top: 4px; padding-bottom: 4px; } /* v23.262（先生指示③）: 並び替え — グリッド（空きスロット）を表示し、三段目も使えるように。 空きは .rt-gap（通常時は透明のままセルを占有 = 自由配置の保存に使う） */ #rtIcons .rt-gap, #rtIconsEdit .rt-gap { min-height: 28px; border-radius: 6px; } .rt-reorder #rtIcons .rt-gap, .rt-reorder #rtIconsEdit .rt-gap { outline: 1px dashed #b6ac97; background: rgba(0,0,0,.03); } .rt-reorder #rtIcons .rt-gap.drag-over, .rt-reorder #rtIconsEdit .rt-gap.drag-over { outline: 2px solid #2b4a8b; background: rgba(43,74,139,.08); } /* v23.263（先生報告「微妙な空白なのできれいにマス目を使えるように」）: 作図・挿入（#rtIcons）も加工と同じ 8 等分グリッドに明示統一 — セル幅・空きマスの 寸法が完全に一致し、並び替えのマス目がきれいに揃う */ #rtPanel #rtIcons { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; } #rtIcons .rt-gap, #rtIconsEdit .rt-gap { height: 28px; min-height: 28px; box-sizing: border-box; } /* v23.265（先生要望）: 咬合平面設定後の「正中の調整」バー */ #midBox { position: fixed; left: 50%; top: 60px; transform: translateX(-50%); z-index: 70; background: var(--panel, #fff); border: 1px solid var(--line, #c8c2b6); border-radius: 12px; padding: 8px 12px; display: flex; gap: 10px; align-items: center; box-shadow: 0 0 0 1px rgba(0,0,0,.14); } #midBox.hidden { display: none; } /* v23.268（先生要望②③）: 処理中の「お待ちください」オーバーレイ + マスコット動画（白背景を透明化） */ #busyOverlay { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(30, 34, 40, .10); backdrop-filter: blur(1px); } #busyOverlay.hidden { display: none; } #busyCanvas { width: 180px; height: auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); } #busyText { background: var(--panel, #fff); border: 1px solid var(--line, #c8c2b6); border-radius: 12px; padding: 6px 14px; font-size: 13px; box-shadow: 0 0 0 1px rgba(0,0,0,.14); } /* v23.269: 台付けライン バー（ピンク） */ #solPlaneBox { position: fixed; left: 50%; top: 60px; transform: translateX(-50%); z-index: 70; background: var(--panel, #fff); border: 2px solid #f06292; border-radius: 12px; padding: 8px 12px; display: flex; gap: 10px; align-items: center; box-shadow: 0 0 0 1px rgba(0,0,0,.14); } #solPlaneBox.hidden { display: none; } /* v23.272: 歯のセグメンテーション（β）バー */ #segBox { position: fixed; left: 50%; top: 60px; transform: translateX(-50%); z-index: 70; background: var(--panel, #fff); border: 1px solid var(--line, #c8c2b6); border-radius: 12px; padding: 8px 12px; display: flex; gap: 10px; align-items: center; box-shadow: 0 0 0 1px rgba(0,0,0,.14); } #segBox.hidden { display: none; } #segGum.active { background: #f06292; color: #fff; } /* v23.275: ライブラリのまとめて削除 */ .libbulk { margin-left: auto; padding: 1px 8px; } .liblist li.sel { background: #ffe3ec; outline: 1px solid #f06292; border-radius: 6px; } .liblist li.sel .libname::before { content: '☑ '; color: #d81b60; } #libBulkBar { position: sticky; bottom: 0; display: flex; gap: 6px; padding: 6px; background: var(--panel, #fff); border-top: 1px solid var(--line); } #libBulkBar button.danger { background: #d81b60; border-color: #d81b60; color: #fff; } /* ============================================================================ v23.359 — 和紙ポップの磨き上げ（frontend-design スキル準拠・テーマは維持） 方針: 色は既存トークンのみ / 既存セレクタは削除・改名しない / 追記中心。 ① 品質フロア: キーボードフォーカスの全域可視・reduced-motion の包括対応・ スクロールバーと文字選択色を紙のトーンに統一 ② 計器盤の数字: 等幅タブラー数字で桁が揺れない（数値を読む道具としての精度感） ③ 統率された動き: ボタンは「押した」1px・工程の朱印は「捺した」一拍 — 動きは この 2 箇所だけに絞る（散発させない） ============================================================================ */ /* ① キーボードフォーカス — マウス操作時は出ず、Tab 移動時だけ縹のリングが出る */ a:focus-visible, select:focus-visible, input:focus-visible, [tabindex]:focus-visible, .tab:focus-visible, .fp-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* ① 文字選択 = 縹の薄面（OS 既定の青は和紙から浮く） */ ::selection { background: var(--accent-w); color: var(--text); } /* ① スクロールバー — 紙の上の道具として細く・主張しない */ * { scrollbar-width: thin; scrollbar-color: var(--line) transparent; } *::-webkit-scrollbar { width: 9px; height: 9px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--accent-2); border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-corner { background: transparent; } /* ② 数値は等幅タブラー数字 — 入力・座標・工程番号の桁が揺れない */ input[type=number], .mono, .step-no { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* ③ ボタンの押下 = 1px 沈む（朱印を「捺す」のと同じ、指先の手応え） */ button:active:not(:disabled) { transform: translateY(1px); } button:disabled { opacity: .55; cursor: default; } /* ③ 工程の朱印 — done になった瞬間、判子を捺すように一拍おいて据わる */ @keyframes oe-stamp-in { 0% { transform: rotate(-7deg) scale(1.35); opacity: .0; } 55% { transform: rotate(-7deg) scale(.92); opacity: 1; } 100% { transform: rotate(-7deg) scale(1); } } .step.done .step-no { animation: oe-stamp-in .28s cubic-bezier(.2,.8,.3,1) both; } /* トースト — 左縁の色帯で種別が一目で分かる（通常=縹 / 注意=山吹）+ 紙の影 */ .toastmsg { border-left: 3px solid var(--accent); box-shadow: var(--shadow); } .toastmsg.warn { border-left-color: var(--warn); background: var(--sunken); } /* ① reduced-motion — 動きを求めない設定では全ての動きを止める（包括） */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } button:active:not(:disabled) { transform: none; } .step.done .step-no { animation: none; } } /* v23.364: v23.361 の入口ページ（Linear Hero）は撤去 — ログインはカード中央のみ（v355 形・書式は現行のまま） */ /* ============================================================================ v23.362 — 患者リスト（症例台帳）の情報設計 視線: ①患者名（主役・15px/600）→ ②状態と相対時刻（比較・右端固定）→ ③行クリックで開く（主行動）。副行動（掲載・書き出し）と破壊（削除）は 行にポインタを載せた時だけ濃く出る — 一覧を「読む」邪魔をしない。 運用: 長いメモは 1 行省略（全文は title）・日時欠損は「—」・ゼロ件は招待文。 ============================================================================ */ .patient-row { border-bottom: 1px solid var(--hair); } .patient-row .pname { font-size: 15px; } .patient-row .ptime { margin-left: auto; font-family: var(--mono); font-size: 12px; min-width: 72px; text-align: right; color: var(--muted); } /* 行動は最後 — 副・破壊ボタンはポインタを載せた行だけ実体化（キーボードでは常時） */ .patient-row .picon { opacity: .28; transition: opacity .12s; } .patient-row:hover .picon, .patient-row:focus-within .picon { opacity: 1; } @media (hover: none) { .patient-row .picon { opacity: 1; } } /* タッチ環境では常時表示 */ /* メモ: 1 行で省略 — 行の高さを暴れさせない（全文はホバーの title） */ .patient-row .pmemo { white-space: nowrap; text-overflow: ellipsis; } /* ゼロ件 = 行動への招待（空白ではなく、次の一手を示す） */ #ptList .pt-empty { padding: 48px 16px; text-align: center; color: var(--muted); font-size: 13px; } /* ============================================================================ v23.366 — taste-skill（anti-slop）規律の全ページ適用 方針: 既存の意匠（和紙ポップ + 鉄御納戸 + Noto Sans + 1px 罫線）は維持し、 スキルの「監査系」規律だけを全域に適用する。 ① SHAPE LOCK — 角丸 4 段（6/8/12/999）に統一（:root コメント参照） ② CONTRAST — --muted を WCAG AA へ（4.88:1） ③ 見出しの引き締め — 表示級のタイトルは tracking を締め、階層を明確化 ④ タクタイル — :active の物理感（v23.359 の 1px 沈みを scale で補強） ⑤ フォーム規律 — placeholder をラベル代わりにしない（コントラストを落とし補助に徹する） ============================================================================ */ /* ③ 表示級タイトル（ログインのブランド行・オーバーレイ見出し）— 締めた字間・明確な階層 */ .auth-brand { letter-spacing: .08em; font-weight: 700; } .auth-sub { color: var(--muted); letter-spacing: .04em; } .auth-title, .ov-title, .panel-title { letter-spacing: -0.01em; font-weight: 700; } /* ④ 押した感（taste 4.5 Tactile）— ボタンは沈み + わずかな縮み。reduced-motion では v23.359 が停止 */ button:active:not(:disabled) { transform: translateY(1px) scale(0.99); } /* ⑤ placeholder はラベルではない（taste 4.6）— 视覚的に補助へ落とす */ input::placeholder, textarea::placeholder { color: var(--muted); opacity: .55; } /* ① の残余監査: 丸バッジ・ピルは意図的な 999px のみ許容（既存 5 箇所・変更なし） */ /* ============================================================================ v23.367 — taste-skill 全ページ適用（第 2 弾: 視覚刷新） 先生指示「全てのページに適応してください」— v23.366 の監査系に加え、 見て分かる刷新を全画面へ。和紙ポップの語彙（縹・和紙・墨）は維持。 ① モーダルの scrim 化 — 作業（3D）が背後に透ける現代的モーダル。 ログイン(auth)だけは全画面ベタを維持（背後に見せる文脈が無い） ② scrim 上のカードは背景色ティントの柔影 + 1px リング（taste 4.4 準拠） ③ ボタン 3 階層の仕上げ — primary は内側ハイライトで面の質を上げる ④ 入力・select の状態遷移（border/リングを 120ms で） ⑤ フォールド（details）の開閉と区切りを罫線言語に統一 ============================================================================ */ /* ① 作業の上に載るモーダルは scrim（墨の半透明 + blur）。auth は従来のベタ。 */ .fullscreen-overlay:not(#authOverlay):not(#busyOverlay) { background: rgba(22, 30, 38, .52); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); } #busyOverlay { background: rgba(22, 30, 38, .62); } /* 処理中は blur なし（GPU 負荷を避ける） */ /* ② scrim 上のカード: 柔影は背景（鉄御納戸）の色相でティント + 1px リング */ .fullscreen-overlay:not(#authOverlay) .auth-card, .fullscreen-overlay .patient-card { box-shadow: 0 18px 44px -18px rgba(16, 26, 36, .45), 0 0 0 1px rgba(0, 0, 0, .14); } /* ③ primary の面の質 — 上端 1px の内側ハイライト（塗りボタンの安っぽさ対策） */ button.primary, .filebtn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); } button.primary:active:not(:disabled) { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18); } /* ④ 入力の状態遷移 — フォーカスへ滑らかに */ input[type=text], input[type=number], input[type=password], select, textarea { transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease; } input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--accent); } /* ボタンの hover 遷移も統一（v23.362 の無彩 hover を滑らかに） */ button { transition: background-color .12s ease, border-color .12s ease, color .12s ease, transform .06s ease; } /* ⑤ フォールド・グループの区切りを罫線言語へ（カード乱立の抑制・taste 4.4） */ details > summary { cursor: pointer; } details[open] > summary { border-bottom: 1px solid var(--hair); margin-bottom: 6px; padding-bottom: 4px; } /* ============================================================================ v23.368 — 枠なしログイン + プロフィール画像（先生見本: TITAN Dental Design） 「枠がない方がカッコいい」— ログインはカードを捨て、明るいスチール調の 柔らかいグラデーション空間に要素が直接浮かぶ。書式（Noto Sans・縹 CTA）は継続。 ============================================================================ */ #authOverlay { background: radial-gradient(900px 520px at 18% 22%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%), radial-gradient(1100px 640px at 82% 78%, rgba(159, 176, 191, .45), rgba(159, 176, 191, 0) 62%), linear-gradient(155deg, #dde3e9 0%, #cdd5dd 46%, #b9c4cf 100%); } #authOverlay .auth-card { background: transparent; background-image: none; border: none; box-shadow: none; border-radius: 0; width: 340px; padding: 0; align-items: stretch; } #authOverlay .auth-brand { text-align: center; font-size: 26px; letter-spacing: .22em; color: #2a3540; margin-right: -.22em; } #authOverlay .auth-sub { text-align: center; letter-spacing: .3em; margin-right: -.3em; font-size: 12px; color: #5a6774; text-transform: uppercase; } #authOverlay .auth-title { text-align: center; color: #3a4652; } /* アイコン — 白フチの丸・柔影。未登録はシルエット（data URI） */ .auth-avatar { display: flex; justify-content: center; margin: 14px 0 4px; } .auth-avatar img { width: 96px; height: 96px; border-radius: 999px; object-fit: cover; /* v23.369（先生指摘「未設定時に微妙な余白」）: シルエットを丸いっぱいに使う専用 SVG — 頭が上 1/3・肩が下辺で切れる見本（TITAN）の形。size 100% で余白ゼロ。 */ background: #fff center / 100% no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Ccircle cx='48' cy='36' r='15' fill='%23262b31'/%3E%3Cpath fill='%23262b31' d='M48 56c-17 0-28 9-28 21v19h56V77c0-12-11-21-28-21Z'/%3E%3C/svg%3E"); border: 3px solid #fff; box-shadow: 0 10px 26px -12px rgba(38, 52, 66, .5), 0 0 0 1px rgba(0, 0, 0, .08); } /* 入力 — 白地・薄い輪郭・角丸はコントロール規格（8px） */ #authOverlay .auth-card input { background: #ffffff; border: 1px solid rgba(20, 30, 40, .18); height: 38px; padding: 0 12px; font-size: 14px; } #authOverlay .auth-card input:focus-visible { border-color: var(--accent); } #authOverlay .auth-card label > span { color: #5a6774; } /* CTA — 縹の全幅。導線リンクは墨系 */ #authOverlay button.primary { width: 100%; height: 40px; font-size: 14px; letter-spacing: .12em; } #authOverlay a { color: #3a4652; } #authOverlay .auth-err { text-align: center; } /* 見本の四隅: Ver は左下・言語は右下 */ #authOverlay #loginVer { position: fixed; left: 14px; bottom: 12px; margin: 0; } #authOverlay .auth-lang-corner { position: fixed; right: 14px; bottom: 10px; margin: 0 !important; } /* 設定のミニプレビュー */ .avatar-mini { width: 26px; height: 26px; border-radius: 999px; object-fit: cover; border: 1px solid var(--line); background: var(--panel-2) center / 100% no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Ccircle cx='48' cy='36' r='15' fill='%23838b94'/%3E%3Cpath fill='%23838b94' d='M48 56c-17 0-28 9-28 21v19h56V77c0-12-11-21-28-21Z'/%3E%3C/svg%3E"); } /* v23.386（先生要望・3DLeone Viewer の見本）: 右下のビュー切り替えボタン列（ビューキューブは残置） */ /* v23.409（先生報告「右下のビュー切り替えが重なっていて見にくい」）: 画面下部の オブジェクトスナップバー（position:fixed・z-index 850）がボタンの下半分を覆っていた。 #vp-hint（v23.98l）と同じく、バーの上に出す。 v23.411（先生ご要望）: 十字レイアウト — [上] [左] [前] [右] [後] [下] [⛶] ← 余る「後」と全体表示は下段の左右 */ #viewBtns { position:absolute; right:14px; bottom:48px; display:grid; gap:4px; z-index:8; grid-template-areas: ". vup vflip" "vleft vfront vright" "vback vdown vfit"; } /* v23.433: 右上 = 断面の反転（半） */ #viewBtns .vb[data-view="top"] { grid-area: vup; } #viewBtns .vb[data-view="left"] { grid-area: vleft; } #viewBtns .vb[data-view="front"] { grid-area: vfront; } #viewBtns .vb[data-view="right"] { grid-area: vright; } #viewBtns .vb[data-view="back"] { grid-area: vback; } #viewBtns .vb[data-view="bottom"] { grid-area: vdown; } #viewBtns #vbFit { grid-area: vfit; } #viewBtns #clipFlipBtn { grid-area: vflip; } /* v23.433: 断面中のみ表示（hidden で空セル） */ #viewBtns .vb { min-width:34px; height:30px; padding:0 8px; border:1px solid #c8d2dc; border-radius:6px; background:rgba(255,255,255,.88); color:#3a4a58; font-size:12px; cursor:pointer; } #viewBtns .vb:hover { background:#eef4f9; border-color:#8fb3d0; } /* v23.389（先生指示）: 急速拡大装置（半自動）の作り方ガイド + 操作アニメーション */ #rpeGuide { position:fixed; inset:0; background:rgba(30,42,54,.45); z-index:60; display:flex; align-items:center; justify-content:center; } #rpeGuide.hidden { display:none; } #rpeGuideBox { width:min(860px, 92vw); max-height:88vh; background:#fff; border-radius:12px; box-shadow: 0 18px 44px -18px rgba(16, 26, 36, .45); /* scrim モーダルと同じ許容影（v23.367 のデザイン方針に整合） */ display:flex; flex-direction:column; } #rpeGuideHead { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #e3e9ef; font-size:15px; } #rpeGuideHead button { border:none; background:none; font-size:16px; cursor:pointer; color:#5a6b7a; } #rpeGuideBody { overflow:auto; padding:14px 18px 20px; } .rg-step { display:flex; gap:12px; margin:12px 0; } .rg-n { flex:0 0 30px; height:30px; border-radius:50%; background:#2f7fd1; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; } .rg-tx p { margin:4px 0 0; color:#41505e; font-size:13px; line-height:1.6; } .rg-anims { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; margin-top:10px; } .rg-anims figure { margin:0; border:1px solid #dde5ec; border-radius:8px; padding:8px; background:#f7fafc; } .rg-anims figcaption { font-size:11.5px; color:#4a5966; margin-top:6px; line-height:1.5; } .rg-svg { width:100%; height:auto; display:block; } /* 1) 枠選択: 破線枠が広がり、点が選択色へ */ .rga-box { fill:rgba(47,127,209,.08); stroke:#2f7fd1; stroke-dasharray:5 4; animation:rgaBox 3s ease-in-out infinite; } @keyframes rgaBox { 0%,12% { x:30px; y:25px; width:10px; height:70px; } 55%,100% { x:30px; y:25px; width:160px; height:70px; } } .rga-p { fill:#2f7fd1; } .rga-p1 { animation:rgaPick 3s infinite; animation-delay:.55s; } .rga-p2 { animation:rgaPick 3s infinite; animation-delay:.95s; } .rga-p3 { animation:rgaPick 3s infinite; animation-delay:1.35s; } @keyframes rgaPick { 0%,30% { fill:#2f7fd1; } 45%,90% { fill:#e2712f; } 100% { fill:#2f7fd1; } } /* 2) 歯頚部トレース: 経路が伸びる */ .rga-trace { stroke-dasharray:420; stroke-dashoffset:420; animation:rgaTrace 3.2s ease-in-out infinite; } @keyframes rgaTrace { 0%,15% { stroke-dashoffset:420; } 70%,88% { stroke-dashoffset:0; } 100% { stroke-dashoffset:0; } } /* 3) 吸着: 浮いた点は面へ・食い込んだ点は面上へ */ .rga-snapdn { fill:#2f7fd1; animation:rgaDn 3s ease-in-out infinite; } @keyframes rgaDn { 0%,25% { cy:40px; } 60%,100% { cy:80px; } } .rga-snapup { fill:#c05252; animation:rgaUp 3s ease-in-out infinite; } @keyframes rgaUp { 0%,25% { cy:108px; } 60%,100% { cy:80px; } } /* 4) 方向を決めて離す: リング回転 → 矢印が傾く → 点が矢印方向へ */ .rga-ring { transform-origin:110px 60px; animation:rgaRing 3.4s ease-in-out infinite; } @keyframes rgaRing { 0%,20% { transform:rotate(0deg); } 45%,100% { transform:rotate(0deg); } } .rga-arrow { transform-origin:110px 60px; animation:rgaArrow 3.4s ease-in-out infinite; } @keyframes rgaArrow { 0%,20% { transform:rotate(0deg); } 45%,100% { transform:rotate(32deg); } } .rga-esc { fill:#c05252; } .rga-e1 { animation:rgaE1 3.4s ease-in-out infinite; } @keyframes rgaE1 { 0%,55% { transform:translate(0,0); } 85%,100% { transform:translate(14px,-22px); } } .rga-e2 { animation:rgaE2 3.4s ease-in-out infinite; } @keyframes rgaE2 { 0%,55% { transform:translate(0,0); } 85%,100% { transform:translate(10px,-16px); } } /* 5) 沿わせ: 食い込んだ直線 → 点が現れて面に沿う */ .rga-conf0 { animation:rgaC0 3.2s ease-in-out infinite; } @keyframes rgaC0 { 0%,35% { opacity:1; } 55%,100% { opacity:0; } } .rga-conf1 { opacity:0; animation:rgaC1 3.2s ease-in-out infinite; } @keyframes rgaC1 { 0%,35% { opacity:0; } 55%,100% { opacity:1; } } .rga-confp { fill:#e2712f; opacity:0; animation:rgaC1 3.2s ease-in-out infinite; } /* v23.402（第 2 段: 骨片の移動）: 移動量の入力を 2 列に並べる。 ラベルが長いので縦積みにし、数値欄は幅いっぱい（誤入力を防ぐため十分な当たり判定を取る）。 */ /* v23.403: ガムボールのモード切替（移動 / 回転 / サイズ）— 選択中のモードを枠で示す */ .sg-mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; margin: 4px 0 6px; } /* v23.462（先生指示）: ④の移動量は 3 列 2 段（1 段目 = 前後 / 前後の傾斜 / 上下・ 2 段目 = 左右 / 左右の傾き / 左右へのふり）。ラベルは短縮し単位と符号はツールチップへ。 */ .sg-mv-grid.sg-mv-3 { grid-template-columns: repeat(3, 1fr); gap: 4px 6px; } .sg-mv-grid.sg-mv-3 > label > span { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sg-mv-grid.sg-mv-3 input { padding-left: 4px; padding-right: 2px; } /* v23.462（先生指示「選択している方は背景色をつけるように」）: 顎の切替の選択側 */ #surgeryPanel .sg-jaw-btn.on { background: var(--accent-2); color: var(--on-accent); border-color: var(--accent-2); font-weight: 700; } #surgeryPanel .sg-jaw-btn.on:hover { filter: brightness(1.05); } /* v23.463: 両顎モード中、編集中の顎（上顎 / 下顎）は薄い下線で示す */ #surgeryPanel .sg-jaw-btn.sg-jaw-edit { box-shadow: inset 0 -3px 0 var(--accent-2); } /* v23.464（先生指示「ゴチャゴチャしている。改行やボタンのサイズもバラバラで全く読めない ボタンもある」）: ボタンの大きさを揃える**等幅グリッド行**。ボタンは行の幅を等分し、 文字は折り返さない（読めない「…」を作らないよう、ラベル側を短くしてある）。 */ #surgeryPanel .sg-grid { display: grid; gap: 4px; margin: 3px 0; align-items: end; } #surgeryPanel .sg-grid.c2 { grid-template-columns: 1fr 1fr; } #surgeryPanel .sg-grid.c4 { grid-template-columns: repeat(4, 1fr); } #surgeryPanel .sg-grid > button { width: 100%; min-width: 0; white-space: nowrap; padding: 3px 4px; } #surgeryPanel .sg-grid > label { margin: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; } #surgeryPanel .sg-grid > label > span { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #surgeryPanel .sg-grid > label > select { width: 100%; min-width: 0; } /* v23.465（先生ご指摘「ボタンの文字のサイズが違います」）: act-btn は全体で 11px・secondary は 13px（既定）だったため、同じ行に並ぶと大きさが揃わなかった。手術パネル内の操作ボタンは すべて 12px に統一する（顎の切替 両顎/上顎/下顎 も同じ）。 */ #surgeryPanel .fp-actions .act-btn, #surgeryPanel .fp-actions .secondary, #surgeryPanel .sg-grid > button, #surgeryPanel .sg-jaw-btn { font-size: 12px; } .sg-mv-grid label { display: flex; flex-direction: column; gap: 2px; } .sg-mv-grid input { width: 100%; } /* v23.456（先生指示「番号や文字が小さく Step がわかりにくい」）: Surgery の工程見出しを強調 */ .prop-head.sg-step { font-size: 14px; font-weight: 700; padding: 4px 0 3px; border-bottom: 2px solid #00b0ff; letter-spacing: .02em; } /* v23.457（先生指示「ツールバー（手術プランニングパネル）の既定位置が下の方 — 上に。スクロールが なくなるように」）: Surgery パネルの既定位置を上へ・最大高も画面いっぱいに */ #surgeryPanel { top: 56px; max-height: calc(100vh - 70px); }