/* DAYLIGHT KARTE Phase 0 — 落ち着いた医療系トーン(Command Centerと区別できる青灰基調) */ /* ══════ 🪟 重なりの順(z-index)の決まり ══════ (2026-09-02 b249 制定・正本はここ) 先生の逐語「改修箇所履歴のウインドウもそうですが、他のウインドウなどもこのように 隠れないよう(潜らないように)にして欲しいです」 ⚠️ 同じ事故が2度起きている(b217=ふつうの窓 .modal-bg が50で帯の下 / b249=改修りれきの窓 .kaiwin が55で帯の下)。窓の題と✕が帯に塗りつぶされ「掴めない・閉じられない」状態になった。 → 新しい窓・浮くものを足す時は、必ず下の層のどれかに入れる。層をまたぐ数字を作らない。 ┌ 層 ─────────────┬ 使い道 ────────────────────────────────┐ │ 1 〜 99 │ ページの中身と**貼り付いた帯**。帯の最上位は .mnav(黒いバー)=80。 │ │ 帯はここより大きくしない(80が天井) │ │ 🗂 b306: 裏書きの板(.kcol-ura)は z-index 無しのページの中身。LINEの窓(2000)・ │ │ 計画図の列(2000)が板の**上**に重なる(板は動かない・窓は掴んで動かせる) │ 100 〜 999 │ あけておく(帯を足したくなった時の余白) │ │ 🔗 b445 でここを1組だけ使った(下の 800/900)。使う時は必ず**対で**書く │ 800 / 900 │ 🔗 b445: 患者トップのひもづけ窓(.plink-win)を手前に出したい間だけの一時の並び。 │ │ 900=患者ヘッダーの帯(.psticky.pst-front) / 800=LINE(一括)の大窓(.linebw.lbw-under)。 │ │ ひもづけ窓は sticky の帯の中にあり、sticky は z-index の値によらず必ず │ │ 「重なりの入れ物」を作るので、窓だけを前に出せない → 帯ごと上げ、大窓を下げる。 │ │ どちらも帯の天井 80 より上(黒いバーに潜らない)・窓の 1000番台より下 │ │ (裏書きの窓・ふつうの窓は今までどおり前に出る)。窓は閉じない・閉じれば元へ戻る │ 1000番台 │ 🪟 窓。1000=居座る窓(改修りれき .kaiwin・改善ボード .kboard) │ │ 1100=右に出る大きな窓(.fprev・.qpwin) 1110=裏書きの窓(.urapanel) │ │ 1200=ふつうの窓(.modal-bg) │ │ 1210=b504: 予約ボードの窓が LINE の大窓の後ろへ回っている間(.modal-bg.lwswap.under)。 │ │ 前に出ている間は 2100(=下の .modal-bg.lwtop と同じ段)。押した方が前に来る │ 2000番台 │ ✋ 掴んで動かす窓。2000=.dwin/.linewin/.linebw │ │ 2010=開いている間の見積書プレビュー(.qpwin.qtop・b440) │ │ 2100=その上に重ねる窓(.modal-bg.lwtop・.fprev.operec.mstop) │ │ 2200=オペ記録(.opdw-bg) 2300/2301=オペ記録の中の窓とメニュー │ 3000番台 │ 💬 ホバーの小窓・右クリックの小窓・トースト・非常時のバー。 │ │ 3000/3001=右クリックの小窓(.calctx) 3100=ホバー(.apptip) │ │ 3200=トースト(.qtoast) 3900=赤い非常バー(#crashbar) └──────────────────┴────────────────────────────────────────┘ ・窓の中に出す小窓(.palpop・.qpick・.dpop・.drs-menu 等)は親の窓が作る「重なりの文脈」の 中で前に来ればよいので、小さい数字のままでよい(親を跨いで比べられることはない) ・**窓に 1000 未満の数字を付けない**。付けると帯(最大80)に潜って掴めなくなる */ *{box-sizing:border-box;margin:0;padding:0} /* フォントはメディベースと同系(Bootstrap系ゴシック・14px・#333) */ body{font-family:-apple-system,"Helvetica Neue",Helvetica,Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;background:#f7f7f8;color:#333;font-size:14px} a{cursor:pointer;color:#1e6fe0} /* 🛡 2026-09-06 b326 榛澤先生の困りごと: トラックパッドの2本指の横スワイプ=ブラウザの「戻る」で記録が消える → 横方向のはみ出しスクロールをブラウザに渡さない(=スワイプで戻らない。Chrome/Safari/Edge)。 窓(.modal-bg)や絵の箱など自前でスクロールする器にも同じ決まりを付ける */ /* 👈👉 2026-09-09 b378 先生の明示「殊更、私に関してはツーフィンガーで戻る、進むは使わないので、 LINEウインドウ外でもブラウザの戻る、進む、はなしで大丈夫です」→ この決まりを**画面全体**の物とする (html・body に付いているので、中のどの器から溢れた横スワイプも最後はここで止まる)。 ⚠️ アプリの中の「戻る」(EDIT_GUARD・histPush/popstate。main.tsx 冒頭)は別物なので触っていない */ html,body,.modal-bg,.modal,.opdw-view,.opdw-side,.kcol-side,.kcol-ura,.lbw-body,.linechat,.lib,.lib-left,.lib-right,.lib-side{overscroll-behavior-x:none} .app{min-height:100vh;display:flex;flex-direction:column} header{display:flex;align-items:center;justify-content:space-between;background:#20364a;color:#eef3f8;padding:10px 18px} header .brand{font-family:"Hiragino Mincho ProN",serif;letter-spacing:.12em;font-size:16px} header .brand b{color:#8fc1f7} header .brand small{font-size:10px;letter-spacing:.02em;color:#9fb3c6;margin-left:10px} .hright{display:flex;gap:14px;align-items:center;font-size:12px} .hright a{color:#cfe2f5} main{flex:1;max-width:1160px;width:100%;margin:0 auto;padding:18px 16px 60px} main.wide{max-width:none;padding:14px 14px 40px} footer{background:#e6ecf2;color:#7a8794;font-size:10.5px;text-align:center;padding:8px;letter-spacing:.04em} .card{background:#fff;border:1px solid #d8e0e8;border-radius:12px;padding:14px 18px;margin-bottom:12px;box-shadow:0 2px 8px rgba(40,60,90,.05)} .card h2{font-size:18px}.card h2 small{font-weight:400;color:#8794a1;font-size:12px;margin-left:8px} .card h3{font-size:13.5px;color:#42566b;margin-bottom:8px} .empty{text-align:center;color:#93a1af;padding:40px 10px} .err{color:#c0392b;font-size:12.5px;margin:6px 0} .note{background:#fff7e8;border:1px solid #ecd9a8;border-radius:8px;padding:6px 10px;margin-top:8px;font-size:12.5px} .crumbs{display:flex;justify-content:space-between;margin-bottom:10px} .crumbs .print{font-weight:700} .meta{display:flex;gap:14px;flex-wrap:wrap;color:#5c6b7a;font-size:12.5px;margin-top:4px;align-items:center} input,select,textarea{border:1px solid #c8d3de;border-radius:8px;padding:8px 10px;font-size:13.5px;font-family:inherit;background:#fff} textarea{width:100%;resize:vertical} button{border:1px solid #c8d3de;background:#fff;border-radius:8px;padding:7px 16px;font-size:13px;cursor:pointer} button:hover{background:#eef4fa} button.pri{background:#1e6fe0;border-color:#1e6fe0;color:#fff;font-weight:700} button.pri:hover{background:#155cc4} button.mini{padding:2px 10px;font-size:11px} /* 患者検索の1行(2026-08-16 batch94 で横幅を節約) ・検索窓と🔍検索ボタンは1つのまとまり(.sgrp)にして**間の余白を無くす** ・まとまりの幅は行の半分まで(以前は残り全部を検索窓が食べていた) 2026-08-16 batch95(院長要望): その半分を**さらに 15分の13**に縮める(50% × 13/15 = 43.3333%)。 メモ枠(.mgrp)も**まったく同じ幅**にして、空いた右側にCLOSE枠作成を置く ⚠️ 2026-08-16 batch96(院長要望): batch95 の 43.3333% は縮めすぎで、薄い案内文が 「既存患者の氏名や診…」と途中で切れていた。**案内文が両方とも丸ごと見える幅**に戻す。 割合(%)だと窓の幅しだいで切れるので、**中の文字が収まる実寸(px)**で決める: 検索 「既存患者の氏名やカルテID」 + 🔍検索ボタン メモ枠「時刻・苗字・対面or遠隔・〜hなど」+ メモ枠ボタン ← こちらが長い方 2つのまとまりは**同じ幅**(--pickgrp)。狭い画面では縮んでよい(flexの1で許す) */ :root{--pickgrp:326px} .searchrow{display:flex;gap:10px;margin-bottom:8px;align-items:center;flex-wrap:wrap} .searchrow .sgrp{display:flex;gap:0;flex:0 1 var(--pickgrp);min-width:0} .searchrow .sgrp input{flex:1;min-width:0;border-top-right-radius:0;border-bottom-right-radius:0} /* 案内(プレースホルダ)の濃さは**メモ枠と同じ薄さ**にそろえる(2026-08-16 batch96 院長要望) */ .searchrow .sgrp input::placeholder{color:#b9c3cd} .searchrow .sgrp button{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px} /* ⭐ 窓が開いた瞬間、この欄にカーソルが入る(2026-08-16 batch120 院長要望)。 どこに打てばよいかが**ひと目で分かる**よう、カーソルのある間はふちを青くする (院内の他の入力欄=.uraform-i と同じ光らせ方) */ .searchrow .sgrp input:focus{outline:none;border-color:#7fabe0;box-shadow:0 0 0 2px rgba(127,171,224,.18); position:relative;z-index:1} /* 🩷 メモ枠(2026-08-16 batch94 院長要望) LINE問い合わせを捌きながら、患者登録の前に予約枠だけを押さえるための行。 入力窓(左)とピンクの「メモ枠」ボタン(右)の**間に余白は置かない**(.mgrp の中は gap:0)。 行そのものは .searchrow と同じ並び(gap:10px)にしてあるので、 CLOSE枠作成が「新患者登録」の真下にそろう(2026-08-16 batch95) */ .memorow{display:flex;gap:10px;align-items:center;margin:0 0 6px} .memorow .mgrp{display:flex;gap:0;flex:0 1 var(--pickgrp);min-width:0} .memorow input{flex:1;min-width:0;border-top-right-radius:0;border-bottom-right-radius:0} .memorow input::placeholder{color:#b9c3cd} .memorow .memobtn{background:#e592ab;border-color:#e592ab;color:#fff;font-weight:700;white-space:nowrap; border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px} .memorow .memobtn:hover{background:#d97f9a;border-color:#d97f9a} /* 🩷🧡 2026-09-09 b381(先生の逐語「メモ枠がピンクとオレンジ色が並んでいるようにして (現在の状態から、幅は変えない!)」)。**同じボタン・同じ文字・同じ余白のまま**、 背景だけを左半分ピンク(仮予約)/右半分オレンジ(カルテ戻し)の縞にする(色は画面側から その院の現物の受付状態の色を渡す)。押した左右で受付状態が決まる=幅は1pxも変わらない。 ふちの色は画面側が左半分(ピンク)の色に合わせる。 ホバーは色を塗り替えず、少し暗くするだけ(2色を保つ) */ .memorow .memobtn.memo2:hover{filter:brightness(.94)} .memorow .closebtn{white-space:nowrap} .memohint{color:#8794a1;font-size:11.5px;margin:0;line-height:1.5} .memohint.reghint{margin-bottom:12px} /* 検索して当たりが無かった時だけ出す1行(検索前は何も出さない=窓を小さいままにする・batch95) */ .pnohit{color:#8794a1;font-size:12px;margin:10px 0 0} .plist .prow{display:flex;gap:14px;align-items:baseline;background:#fff;border:1px solid #dbe3ea;border-radius:10px;padding:10px 16px;margin-bottom:6px;cursor:pointer} .plist .prow:hover{border-color:#1e6fe0;background:#f6faff} .plist .prow b{color:#1e6fe0} .plist .prow .nm{font-weight:700;font-size:14.5px} .plist .prow small{color:#8794a1} .pform{display:flex;flex-wrap:wrap;gap:8px} .pform input,.pform select{flex:1;min-width:140px} .pform textarea{width:100%} .addrow{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap} .ent .enthead{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:11.5px;color:#5c6b7a;border-bottom:1px dashed #dfe6ec;padding-bottom:6px;margin-bottom:8px} .ent .body{font-size:12.5px} .ent .body div{margin-bottom:2px;line-height:1.48} /* SOAPの見出し(S/O/A/P)だけの飾り。本文の太字にまで掛かっていて、 太字にすると青くなり1文字ずつ縦に並んでしまっていた(2026-08-08 修正) */ .ent .body b.soapk{display:inline-block;width:20px;color:#1e6fe0} /* いま効いている書式のボタンを、押されている見た目にする(2026-08-08 院長要望) */ /* 訂正理由の候補(2026-08-08 院長要望) */ .rsnchips{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 8px} .rsnchips a{font-size:11.5px;color:#1e6fe0;border:1px solid #c9dcf5;background:#f2f8ff;border-radius:12px;padding:2px 10px;cursor:pointer} .rsnchips a:hover{background:#e3f0ff} .rsnchips a.on{background:#1e6fe0;border-color:#1e6fe0;color:#fff;font-weight:700} /* 文字サイズは 小 / 標 / 大 の3つ(2026-08-08 院長要望) 「標」は書き始めの大きさ(既定)と同じに見えるよう、親の大きさをそのまま使う。 「大」はブラウザのxx-large(これまでの「大」と「特大」のちょうど間)。 */ .qpv-fix{background:#127a3d !important;border-color:#127a3d !important} .mbnote{font-size:11px;color:#5c6b7a;margin-left:8px} .richta font[size="3"],.stricht font[size="3"],.ent .body font[size="3"],.entgrid font[size="3"]{font-size:inherit} /* 「小」は書いている最中も保存後と同じ大きさで見せる(2026-08-16 batch99 / 院長報告B)。 これまで編集欄だけブラウザ既定のままで、小さく書けている事に気付けなかった */ .richta font[size="1"],.richta font[size="2"],.stricht font[size="1"],.stricht font[size="2"]{font-size:10.5px} .rtb-b.on{background:#d7dee6;border-color:#8fa2b5;box-shadow:inset 0 1px 3px rgba(20,35,55,.22)} .sumta{font-size:12.5px;line-height:20.5px} .ent.draft{border-left:4px solid #e8a93c} .ent.voided{opacity:.55} .ent.voided .body{text-decoration:line-through} .tag{border-radius:999px;padding:1px 10px;font-size:10.5px;font-weight:700} .tag.ok{background:#e2f2e4;color:#1f6b24} .tag.dr{background:#fdf1dc;color:#9a6a12} .tag.void{background:#fbe4e1;color:#b03a2e} .reason{color:#b03a2e;font-size:12px;margin-bottom:6px} .editor label{display:block;margin-bottom:6px} .editor label span{display:block;font-size:11px;color:#5c6b7a;font-weight:700;margin-bottom:2px} .btnrow{display:flex;gap:8px;margin-top:8px} .revise{border-top:1px dashed #dfe6ec;margin-top:8px;padding-top:8px} .revise>input{width:100%;margin-bottom:8px} .auditrow{display:flex;gap:12px;font-size:12px;border-bottom:1px solid #eef2f6;padding:4px 0} .auditrow .t{color:#8794a1} /* ---- ログイン(メディベース風2カラム+上質な背景4種) ---- */ .login2{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:34px 22px;position:relative;overflow:hidden} .login2 .orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none} /* A 暁 — 桃色の夜明け(デフォルト) */ .bg-a{background:linear-gradient(135deg,#fdf2ec 0%,#f9dcd6 35%,#eec9dd 65%,#cfc0ea 100%)} .bg-a .o1{width:440px;height:440px;background:#ffd9c4;top:-90px;left:-70px} .bg-a .o2{width:380px;height:380px;background:#f3b8d0;bottom:-80px;right:6%} .bg-a .o3{width:320px;height:320px;background:#cdb9f2;top:18%;right:-90px} /* B 絹 — シャンパンベージュ */ .bg-b{background:linear-gradient(120deg,#faf7f1 0%,#f3e7d6 40%,#ead3bd 75%,#ddbfa8 100%)} .bg-b .o1{width:460px;height:460px;background:#f8e3c2;top:-100px;right:-80px} .bg-b .o2{width:360px;height:360px;background:#e9c9a8;bottom:-90px;left:4%} .bg-b .o3{width:280px;height:280px;background:#fff6e8;top:30%;left:-70px} /* C 宵 — 夕暮れの庭 */ .bg-c{background:linear-gradient(160deg,#22374f 0%,#33506d 45%,#77597b 78%,#c78e78 100%)} .bg-c .o1{width:420px;height:420px;background:#f0b78c;bottom:-100px;right:-60px;opacity:.5} .bg-c .o2{width:340px;height:340px;background:#8fa8d0;top:-70px;left:6%;opacity:.4} .bg-c .o3{width:280px;height:280px;background:#d9a0b0;top:34%;right:16%;opacity:.35} /* D 陽 — あたたかい光の部屋 */ .bg-d{background:#fbf7f0} .bg-d .o1{width:520px;height:520px;background:#f4c9ae;top:-120px;left:-90px;opacity:.6} .bg-d .o2{width:420px;height:420px;background:#f7dfd2;bottom:-110px;right:-70px;opacity:.8} .bg-d .o3{width:340px;height:340px;background:#e9d3f0;top:26%;right:10%;opacity:.45} .lg-panel{position:relative;display:flex;gap:26px;flex-wrap:wrap;justify-content:center;z-index:1;max-width:1000px;width:100%} .lg-info{flex:1.35;min-width:300px;background:rgba(255,255,255,.84);backdrop-filter:blur(10px);border-radius:18px;padding:28px 34px;box-shadow:0 16px 44px rgba(90,60,60,.16)} .lg-info h2{font-size:15px;border-bottom:1px solid #e8dad3;padding-bottom:9px;margin-bottom:14px;color:#7a5c55;letter-spacing:.08em} .lg-info p{font-size:12.5px;line-height:2.1;color:#5a4a45;margin-bottom:10px} .lg-tips{background:rgba(250,240,232,.9);border-radius:10px;padding:8px 12px} .lg-form{width:340px;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-radius:18px;padding:36px 34px 28px;box-shadow:0 18px 55px rgba(90,60,60,.26);text-align:center;align-self:center} .lg-form .brand{font-size:19px;letter-spacing:.13em;color:#33424f;font-weight:700} .lg-form .brand b{color:#1e6fe0} .lg-form .sub{font-size:10px;letter-spacing:.28em;color:#b3a49e;margin:5px 0 22px} .lg-form label{display:block;text-align:left;font-size:11px;color:#7a6a64;font-weight:700;margin:12px 0 5px} .lg-form input{width:100%;text-align:left;padding:10px 13px;border-radius:9px;border:1px solid #ddcfc9;font-size:14px} .lg-form button{width:100%;margin-top:22px;background:linear-gradient(135deg,#e8927c,#d4738a);border:none;color:#fff;font-weight:700;padding:12px 0;border-radius:9px;font-size:14px;letter-spacing:.14em;box-shadow:0 6px 18px rgba(212,115,138,.4)} .lg-form button:hover{background:linear-gradient(135deg,#e2836c,#c9647c)} .lg-note{margin-top:16px;font-size:10px;color:#b3a49e} /* 旧ログイン(互換のため残置) */ .login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#20364a,#2c4a66)} .login-card{background:#fff;border-radius:16px;padding:38px 42px;width:360px;text-align:center;box-shadow:0 18px 50px rgba(10,25,45,.35)} .login-card .brand{font-family:"Hiragino Mincho ProN",serif;letter-spacing:.16em;font-size:20px;color:#20364a} .login-card .brand b{color:#1e6fe0} .login-card .sub{font-size:11px;color:#8794a1;margin:6px 0 18px} .login-card input{width:100%;margin-bottom:10px;text-align:center} .login-card button{width:100%;background:#1e6fe0;border-color:#1e6fe0;color:#fff;font-weight:700;padding:10px 0} .login-card .note{margin-top:14px;font-size:10.5px;background:#f2f5f8;border:none;color:#7a8794} @media (max-width:640px){.meta{gap:8px}.hright span{display:none}} /* ---- カレンダー(予約) ---- */ .cal-head{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap;position:sticky;top:44px;z-index:30;background:#f7f7f8;padding:8px 0 6px;box-shadow:0 4px 8px -6px rgba(20,35,55,.25)} .colfil{position:relative;display:flex;align-items:center;gap:6px} .colfil .cft{font-size:12.5px;font-weight:700} .colfil .cfl{color:#1e6fe0;font-size:12.5px;cursor:pointer;text-decoration:underline dotted} .cfmenu{position:absolute;top:30px;left:0;background:#fff;border:1px solid #cfd8e0;border-radius:8px;box-shadow:0 10px 28px rgba(20,35,55,.3);padding:10px 14px;z-index:50;min-width:200px} .cfmenu label{display:block;font-size:13px;padding:4px 0;cursor:pointer;white-space:nowrap} .cfmenu input{margin-right:6px} .cfbtns{margin-top:8px;text-align:right} /* 患者CSV取込 */ .impmap{display:flex;flex-wrap:wrap;gap:8px 18px} .impmap label{display:flex;align-items:center;gap:6px;font-size:12.5px} .impmap label span{width:80px;text-align:right;color:#5c6b7a;font-weight:700;font-size:11.5px} .impmap select{min-width:150px;padding:5px 8px;font-size:12.5px} .cal-date{font-size:15px;margin:0 4px} .legend{display:flex;gap:8px;flex-wrap:wrap;font-size:10px;margin-left:4px} .legend i{display:inline-flex;align-items:center;gap:3px;font-style:normal;color:#5c6b7a} .legend i b{width:10px;height:10px;border-radius:3px;display:inline-block} .cal-grid{display:flex;background:#fff;border:1px solid #d8e0e8;border-radius:10px} .cal-gutter{width:40px;flex-shrink:0;position:relative;border-right:1px solid #e4eaf0} .cal-gutter .gh{position:absolute;right:6px;font-size:13px;font-weight:700;color:#5c6b7a;transform:translateY(-8px);font-variant-numeric:tabular-nums} .cal-col{flex:1;min-width:118px;border-right:1px solid #e4eaf0} .cal-col:last-child{border-right:none} .cal-colhead{height:34px;line-height:34px;text-align:center;font-weight:700;font-size:12.5px;color:#111;border-bottom:1px solid #c9d2db;background:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px} .cal-body{position:relative;cursor:crosshair;background-image: repeating-linear-gradient(to bottom,#cdd7e2 0,#cdd7e2 1px,transparent 1px,transparent 126px), repeating-linear-gradient(to bottom,transparent 0,transparent 63px,#e3eaf1 63px,#e3eaf1 64px,transparent 64px,transparent 126px), url("data:image/svg+xml;utf8,"); background-size:auto,auto,5px 21px;background-position:0 0,0 0,0 0} .cal-appt{position:absolute;left:2px;right:2px;border-radius:3px;color:#fff;padding:2px 4px 3px;font-size:10px;overflow:hidden;line-height:1.3;cursor:grab;box-shadow:none;border:1px solid rgba(0,0,0,.22);box-sizing:border-box;z-index:1;touch-action:auto;user-select:none} .cal-appt.dragging{opacity:.78;z-index:6;box-shadow:0 5px 14px rgba(0,0,0,.4);cursor:grabbing} .cal-appt a{color:#fff;text-decoration:none;cursor:pointer} .ca-h{position:absolute;left:0;right:0;height:7px;cursor:ns-resize;z-index:2} .ca-ht{top:0}.ca-hb{bottom:0} /* ⏰ 予約枠の時刻(2026-08-16 batch101。batch100 を院長の言葉どおりに作り直し) 院長「予約枠が重なって**時間が2行になる場合のみ**、12:10 - 12:45 のように同じ12時なので あるならば、12:10 - 45 と表示する様にして欲しい」 → 枠が広いうちはフル表示(12:10 - 12:45)。細くて2行に折り返す幅になった時だけ短縮(12:10 - 45)。 .ca-time 自身を container にして「時刻が使える幅」で判定するので、 枠を掴んで伸縮すると幅に応じてその場で切り替わる(JSの再描画なし=ちらつきなし)。 しきい値を px ではなく ch(数字1文字の幅)で書いてあるので、 文字が小さい2日/7日表示(8.5px)でも同じ1行で正しく効く。 container query の無い古い環境では常にフル表示に戻るだけで壊れない。 */ .ca-time{font-size:11.5px;opacity:.92;container-type:inline-size;container-name:catime} .ca-tshort{display:none} /* 11.4ch = フル表示「14:00 - 14:35」の実測幅(約10.7ch)+ 折り返し直前で切り替えるための余白。 これより狭くなると2行に折れてしまうので、その手前で短縮版に入れ替える。 2026-08-16 batch102: 時をまたぐ枠(10:30 - 11:30)も同じしきい値で 「10:30 -11:30」(ハイフンの後ろの空白だけを詰めた版)に入れ替える。 フルの幅は同じ13文字なので折り返す幅も同じ = しきい値は1つで足りる */ @container catime (max-width: 11.4ch){ .ca-tfull{display:none} .ca-tshort{display:inline} } .ca-edit{text-decoration:none !important;color:#fff;opacity:.92;font-size:12px;margin-right:3px} /* 予約時間の行と氏名の行の間を、ヨミガナ1文字分(6px)だけ上へ詰める(2026-08-14 batch87 院長要望。 フリガナ行の高さぶん氏名ブロックを持ち上げる。文字の大きさは変えない) */ .ca-nm{display:flex;align-items:flex-end;gap:1px;font-weight:400;font-size:12px;margin-top:-6px} /* 氏名は姓と名に分け、フリガナを漢字の真上にそろえる(2026-08-08 メディベースに合わせた) */ .ca-nmtxt{display:inline-flex;align-items:flex-end;gap:5px;line-height:1.15;min-width:0} .nmpart{display:inline-flex;flex-direction:column;align-items:center;min-width:0} .nmpart b{font-weight:400;white-space:nowrap} .ca-nmtxt small{display:block;font-size:6px;font-weight:400;opacity:.85;line-height:1;white-space:nowrap; transform:scale(.9);transform-origin:center bottom;margin-bottom:-1px} /* 🩷 メモ枠の氏名は「押せる」ことが分かるように下線を引く(押すと新患者登録に進む・batch94) */ .ca-memoreg{color:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer} /* 重なりで左になった枠のメモは、右の枠の下に潜らないよう左半分で折り返す */ .ca-memo.half{width:50%;padding-right:2px} .ca-memo{white-space:pre-wrap;font-size:10.5px;opacity:.95;line-height:1.35} /* ---- モーダル共通 ---- */ /* 🪟 窓(モーダル)の重なりの順(2026-08-28 b217 先生の逐語「診療メモの窓がとても上にあって掴めない」 「術前休止薬なども上の方が欠けた状態で出る、Emptyがあるバーのせいかもしれません」)。 ⚠️ 真因: この土台の z-index が 50 で、**上部の黒いバー(.mnav=80)・予約ボードの貼り付けた行 (.cal-fixhead=60。操作の行とお知らせ「Empty」の行)・右クリックの小窓(.calctx=71)より下** だった。窓の上端は画面の40pxの所に出ていたのに、その帯に**上から塗りつぶされて** 題(掴む所)と✕が見えなくなり、「上にありすぎて掴めない」「上が欠ける」状態になっていた。 → 土台を貼り付けた帯より上に置く。.modal-bg を使うすべての窓(診療メモ・術前休止薬・ 見積送付完了・OP予約管理表・未完バッジの羅列など49か所)がこれで画面の中に収まる。 ⚠️ 掴んで動かせる窓(.dwin/.linewin=2000・オペ記録=2200)との上下は変えていない (今までも .modal-bg の方が下。1200 < 2000 のまま)。 2026-09-02 b249: 番号は冒頭の「重なりの順の決まり」に合わせて 1000 → 1200 にした(順は同じ)。 */ .modal-bg{position:fixed;inset:0;background:rgba(15,30,50,.45);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:1200;overflow:auto} .modal{background:#fff;border-radius:14px;padding:18px 24px 20px;width:100%;max-width:780px;box-shadow:0 18px 50px rgba(10,25,45,.4)} /* ⭐ 押した場所の少し近くに出す窓(2026-08-16 batch95 院長要望) ・画面まん中の固定ではなく、left/top を計算して置く(位置の計算は nearWindowPos) ・予約ボードが見えていた方が「どこを押したか」が分かるので、背景は暗くしない ・幅は 600px 固定(狭い画面では画面幅まで)。高さは中身ぶんだけ=検索前は小さいまま (2026-08-16 batch96: 検索窓・メモ枠の案内文が丸ごと見えるよう 560 → 600px に少しだけ広げた) */ .modal-bg.atclick{display:block;padding:0;background:transparent;overflow:visible} .modal-bg.atclick .modal{position:fixed;width:600px;max-width:calc(100vw - 16px); max-height:calc(100vh - 16px);overflow:auto;border:1px solid #cdd8e4;box-shadow:0 14px 40px rgba(10,25,45,.32)} /* 検索の当たりが多くても窓が伸びすぎないように(伸びすぎると押した場所を避けきれなくなる) */ .modal-bg.atclick .plist{max-height:40vh;overflow:auto} /* 🪟 2026-09-17 b504 先生の逐語「LINEウインドウの上にそれらのウインドウが出るようにしたい(…LINEウインドウを クリックするとラインウインドウが前面に来るように。また、その後それらのウインドウの方をクリックすると それらが前面に来るように。)」 予約ボードから開く窓(予約枠の窓・どなたを診療予約しますか・メモ枠の新患者登録・診療メモ)だけに付く .lwswap。 ・.lwswap = その窓が前(2100 = 既存の「LINEの窓の上に重ねる窓」.modal-bg.lwtop と同じ段) ・.lwswap.under = LINEの大窓(2000)が前。窓は 1210(ふつうの窓 1200 のすぐ上)へ下がるだけで閉じない ・地の暗がりは別の紙(.mb-dim=1200)。大窓(2000)は暗がりより前なので**そのまま押せる**(押した方が前に来る)。 外側を押して閉じる作法も暗がりが受け持つので今までどおり。LINEの大窓が開いていない時は .lwswap を付けない =今までの .modal-bg(1200)のまま(他の窓との上下は1つも変えない) */ .mb-dim{position:fixed;inset:0;background:rgba(15,30,50,.45);z-index:1200} .mb-dim.clear{background:transparent} /* 押した場所に出す窓(.atclick)は今までどおり暗くしない */ .modal-bg.lwswap{background:transparent;pointer-events:none;z-index:2100} .modal-bg.lwswap.under{z-index:1210} .modal-bg.lwswap>.modal{pointer-events:auto} .mhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px} .mhead h3{font-size:16px;color:#25313c} .mclose{font-size:16px;color:#8794a1;cursor:pointer;padding:2px 8px} .frow{display:flex;border-bottom:1px solid #eef2f6;padding:9px 0;gap:12px;align-items:center;flex-wrap:wrap} .frow>span{width:104px;font-size:11.5px;color:#5c6b7a;font-weight:700;flex-shrink:0} .tsel{display:inline-flex;align-items:center;gap:4px} .tsel select{padding:5px 6px;font-size:13px;width:50px} .qbtns{display:flex;gap:4px} .chip{width:16px;height:16px;border-radius:4px;display:inline-block} button.danger{border-color:#d84334;color:#b03a2e} button.danger:hover{background:#fbe4e1} /* ---- カレンダー設定 ---- */ .set2col{display:flex;gap:24px;flex-wrap:wrap} .set2col>div{flex:1;min-width:260px} .set2col h4{font-size:12.5px;color:#42566b;margin-bottom:8px;display:flex;gap:8px;align-items:center} .setrow{display:flex;gap:6px;align-items:center;margin-bottom:5px} .setrow input{flex:1;padding:5px 8px;font-size:12.5px} .setrow input[type=color]{flex:none;width:40px;height:30px;padding:2px} .setrow a{color:#b03a2e;cursor:pointer;padding:0 4px} /* ---- メディベース風 登録フォーム ---- */ .mbtitle{font-size:20px;font-weight:700} .mbtitle small{font-size:13px;color:#666;font-weight:400} .mbform{max-width:900px} .mrow{display:flex;align-items:center;gap:18px;margin-bottom:14px} .mrow .ml{width:190px;text-align:right;font-size:13.5px;flex-shrink:0} .mrow .req{background:#c9302c;color:#fff;font-style:normal;font-size:10.5px;border-radius:3px;padding:1px 7px;margin-left:6px;font-weight:700} .mrow .mi{flex:1;display:flex;flex-direction:column;gap:3px} .mrow .mi>input,.mrow .mi>textarea{width:100%} .mrow .mi>select{align-self:flex-start;min-width:220px} .mrow .hint{color:#888;font-size:11.5px} .bsel{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .bsel .btxt{font-size:13px} .mbtns{display:flex;gap:14px;margin:20px 0 4px 208px} .mbtns .pri{padding:9px 22px} /* ---- 職員(ユーザー)一覧 ---- */ .utable{border:1px solid #d8e0e8;border-radius:8px;overflow:hidden;margin-top:6px} .urow{display:flex;align-items:center;border-bottom:1px solid #e8eef4;padding:8px 12px;gap:10px;font-size:13px} .urow:last-child{border-bottom:none} .urow.uhead{background:#dff0d8;font-weight:700;font-size:12px} .urow.off{opacity:.5} .urow span:nth-child(1){width:34px} .urow span:nth-child(2){flex:1.2} .urow span:nth-child(3){flex:1} .urow span:nth-child(4){width:110px} /* 🏥 b462: 「院」の列(管理者は選び直せる。省スペース優先で幅は詰める) */ .urow span:nth-child(5){width:96px} .urow span:nth-child(6){width:56px} .uclinic select{font-size:12px;padding:1px 2px;max-width:92px} .urow .uacts{display:flex;gap:6px;width:170px} /* b462: 見出しの「操作」も行と同じ幅にして、見出しと中身の列をそろえる */ .urow.uhead span:nth-child(7){width:170px} /* ---- メディベース風 黒ナビ ---- */ .mnav{display:flex;align-items:center;gap:2px;background:#1c1f24;color:#e8ecf1;padding:0 10px;height:44px;font-size:13px;position:sticky;top:0;z-index:80} .mnav a{color:#dfe6ee;padding:0 12px;line-height:44px;cursor:pointer;white-space:nowrap} .mnav a:hover{background:#31363e} .mnav a.on{background:#000;font-weight:700} .brandmini{font-weight:700;letter-spacing:.06em} .brandmini b{color:#8fc1f7} .ndrop{position:relative} .ndrop>a{display:block} .ndmenu{display:none;position:absolute;right:0;top:44px;background:#fff;border:1px solid #cfd8e0;border-radius:0 0 8px 8px;box-shadow:0 8px 24px rgba(20,35,55,.25);z-index:60;min-width:190px;padding:4px 0} .ndrop:hover .ndmenu{display:block} .ndmenu a{display:block;color:#333 !important;padding:8px 16px;line-height:1.4;font-size:13px} .ndmenu a:hover{background:#eef4fa} /* ⚠️ batch205b: 狭い画面(iPad・スマホ)の決まりは `.mnav a{line-height:42〜48px}` のように **バーの中のaを全部**大きくするので、そのままだと**メニューの中の項目まで**1つ48pxになる。 ⚙設定は19項目あるので menu の高さが900pxを超え、下の方(アルゴリズム一覧など)が iPadの画面に入らず押せなくなっていた。メニューの中は画面幅によらず同じ大きさに戻す (`.mnav .ndmenu a` の方が決まりとして強いので、上の狭い画面の決まりに勝つ) */ .mnav .ndmenu a,.mnav .ndsubmenu a{padding:8px 16px;line-height:1.4;font-size:13px} /* 📚 ⚙設定の中のサブメニュー(2026-08-20 batch162・院長の逐語 「設定内の一番下に『アルゴリズム一覧』と載せ、そこをホバーすると…出て、 それをクリックするとルールを記載したウインドウが出る」)。 ・親の .ndmenu は right:0 で右寄せに出るので、サブは**左側**(right:100%)へ開く ・親の項目の上端にそろえる(top:-5px = .ndmenu の padding 4px + 枠 1px ぶん戻す) ・説明文は置かない。項目名だけ(院長の指示) */ .ndsub{position:relative;display:block} .ndsub>a{display:block} .ndsub:hover>a{background:#eef4fa} .ndsubmenu{display:none;position:absolute;right:100%;top:-5px;background:#fff;border:1px solid #cfd8e0; border-radius:8px 0 0 8px;box-shadow:0 8px 24px rgba(20,35,55,.25);z-index:61;min-width:190px;padding:4px 0} .ndsub:hover .ndsubmenu{display:block} /* 🗂 ═══ 2026-09-13 b452 上のバーの「🗂 業務」と「⚙ 設定」 ═══ ・.ndscroll = 2枚のメニューだけに付ける印。画面からはみ出す時は**メニューの中だけ**縦に送れる (窓は伸ばさない。先生の逐語「メニューの中だけ縦に送れるように」)。 ⚠️ 名前のメニュー(.nuserdrop .ndmenu)には付けない(中の打刻の窓がはみ出して切れるため) ・overflow を付けると横も切られるので、中のサブメニュー(アルゴリズム一覧・倉庫)は 横へ飛び出さず、その場で下に開く(position:static)。ホバーで出るのは今までどおり */ .mnav .ndmenu.ndscroll{max-height:calc(100vh - 56px);overflow-y:auto;overscroll-behavior:contain} .ndscroll .ndsubmenu{position:static;right:auto;top:auto;background:#f3f7fb;border:0;border-radius:0; box-shadow:none;z-index:auto;min-width:0;padding:0} .ndscroll .ndsubmenu a{padding-left:30px} .ndscroll .nd-oku.open .ndsubmenu{display:block} /* ↕ 管理者だけの「掴んで並べ替え」の見え方。掴んだ項目を薄く・落ちる先に青い線 (上へ動かす時は相手の上=.nd-dropb / 下へ動かす時は相手の下=.nd-dropa。記録集の行・タブと同じ流儀)。 管理者以外にはこの印は出ない */ .ndscroll .nd-mv{opacity:.45} .ndscroll .nd-dropb{box-shadow:inset 0 2px 0 0 #1e6fe0} .ndscroll .nd-dropa{box-shadow:inset 0 -2px 0 0 #1e6fe0} .ndscroll .nd-drop{box-shadow:inset 0 2px 0 0 #1e6fe0} /* 🖱 ═══ 2026-09-15 b466 右クリックで「業務⇄設定⇄倉庫」へ移す + 掴んで倉庫へ ═══ ・.nd-open = 右クリックの選択を出している間・移した直後だけ、そのメニューを開いたままにする (ふだんは今までどおりホバーで出る) ・.nd-oku.nd-drop>a = 掴んだ項目を「📁 倉庫」の見出しに合わせた時、そこに落とせると分かるようにする ・.navctx = 右クリックで出る小さな選択。メニューの中は縦に送れる作りで切られるので、 メニューの外に position:fixed で出す(上のバーの z-index:80 より前へ) */ .ndrop.nd-open .ndmenu{display:block} .ndscroll .nd-oku.nd-drop>a{background:#dbeaff;box-shadow:inset 0 2px 0 0 #1e6fe0} .ndscroll .nd-ctx{background:#eef4fa} .navctx{position:fixed;z-index:900;background:#fff;border:1px solid #cfd8e0;border-radius:8px; box-shadow:0 8px 24px rgba(20,35,55,.28);padding:4px 0;min-width:170px} .navctx a{display:block;color:#333;padding:8px 14px;font-size:13px;line-height:1.4;white-space:nowrap;cursor:pointer} .navctx a:hover{background:#eef4fa} .nsearch{display:flex;align-items:center;gap:0;margin-left:8px} /* 🔍 2026-09-18 b511 先生の逐語「上部バーが混み合ってきたので…検索窓は5分の4の幅にして」 → 210px × 0.8 = 168px(下の幅ごとの決まり 190→152・140→112 も同じ5分の4にそろえた)。 行の高さ(44px)や他の項目の場所は変えない */ .nsearch input{border-radius:4px 0 0 4px;border:none;padding:7px 10px;font-size:12.5px;width:168px} .nsearch button{border-radius:0 4px 4px 0;border:none;background:#fff;font-weight:700;padding:7px 10px;font-size:12.5px} .nspacer{flex:1} .nuser{color:#9fb3c6;padding:0 6px;white-space:nowrap} .subbrand{background:#e6ecf2;color:#7a8794;font-size:10.5px;padding:3px 14px;letter-spacing:.04em} /* ---- 患者ヘッダー(メディベース風) ---- */ .phead{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid #d8e0e8;border-radius:10px;padding:10px 16px;margin-bottom:8px;flex-wrap:wrap} .pico{font-size:30px;display:flex;align-items:center} .sexico{display:block;border-radius:50%} .pinfo{flex:1;min-width:220px} .pname{font-size:16px;color:#4a5361;font-weight:600} /* メディベースにそろえて薄い黒(2026-08-09 院長要望) */ .pname small{font-weight:400;color:#8794a1;font-size:11px} .psub{color:#5c6b7a;font-size:12px;margin-top:2px} .pbadges{display:flex;gap:10px;align-items:center;margin-top:4px;flex-wrap:wrap} .badge{border-radius:4px;padding:2px 9px;font-size:10.5px;font-weight:700} .badge.alg{background:#3f9d4e;color:#fff} .pnums{display:flex;flex-direction:column;gap:3px;align-items:flex-end;font-size:11px} .pnums span{background:#6b7680;color:#fff;border-radius:4px;padding:2px 9px} /* 🩺 2026-09-06 b321 先生の指示: 診療情報一覧の撤去(上原だけ切替)。カルテIDのすぐ下の小さなピル(文字だけ)。オンで青 */ .pnums a.dinfo-tgl{font-size:10.5px;line-height:1;color:#8a97a5;background:#fff;border:1px solid #d8e0e8;border-radius:999px;padding:3px 8px;cursor:pointer;user-select:none} .pnums a.dinfo-tgl:hover{border-color:#9cc2e8;color:#1e6fe0} .pnums a.dinfo-tgl.on{color:#1e6fe0;border-color:#9cc2e8;background:#eef5fd;font-weight:600} .pn-alert{background:#fbe4e1;border-color:#eab5ae;color:#b03a2e;font-weight:700;margin-bottom:8px} .pn-green{background:#e8f6ea;border-color:#b9dfc0;color:#1c7c31;font-weight:700;margin-bottom:8px} .pn-orange{background:#fdf0e0;border-color:#eccb9a;color:#b06a12;font-weight:700;margin-bottom:8px} .pn-blue{background:#e7f0fb;border-color:#b9d2ef;color:#1a5fb4;font-weight:700;margin-bottom:8px} /* サマリーページ(メディベース同構成: 左=基本情報 右=サマリー・特記・紹介) */ .sumwrap{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-top:10px} .sumcol{flex:1 1 430px;min-width:0} .itbl{width:100%;border-collapse:collapse;background:#fff;font-size:12.5px} .itbl th,.itbl td{border:1px solid #dfe5ea;padding:8px 10px;text-align:left;vertical-align:top} .itbl th{width:132px;background:#fbfcfd;color:#333;font-weight:600} .itbl th.isec{background:#eef1f4;font-weight:700;width:auto} .itbl input,.itbl select,.itbl textarea{width:100%;box-sizing:border-box;font-size:12.5px} .ival{color:#1e6fe0;text-decoration:underline dotted;cursor:pointer;white-space:pre-wrap;word-break:break-word;display:inline-block;min-width:40px;min-height:1em} .ival.iempty{color:#c0392b;font-style:italic} /* 読むだけの値(旧カルテ番号など)。押せると勘違いさせないので下線も色も付けない */ .ival.iro{color:#333;text-decoration:none;cursor:default} .ival.iro.inone{color:#98a4b0} .itbl .mini{margin-left:8px;white-space:nowrap} .itbl .plink{color:#1e6fe0} .sumup{font-size:11.5px;color:#5c6b7a;margin-bottom:6px} .sumup b{color:#333} .dirty{color:#b06a12;font-weight:700} .calcv{color:#333} /* ---- 患者紹介の欄(2026-08-13 batch77) ---- ・見出しに患者の姓を入れるので、132pxだと折り返す。少し広げて折り返さないようにする ・名札はドラッグでもう一方の欄へ移せる(誤登録の付け替え)。掴める物だと分かるように手の形にする */ .itbl th.refth{width:186px;white-space:nowrap} .isechint{font-weight:400;color:#5c6b7a;font-size:11px;margin-left:10px} .refrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:26px;border-radius:6px} .refnone{color:#c0392b;font-style:italic} .refp{background:#eef4fb;border:1px solid #cfe0f1;border-radius:6px;padding:2px 8px;cursor:grab;user-select:none} .refp:active{cursor:grabbing} .refp a{color:#b03a2e;cursor:pointer;margin-left:6px;text-decoration:none} /* ドラッグ中: 掴んでいる名札は薄く、受け取る側の欄は青い点線で「ここに置ける」と見せる */ .refp.refgrab{opacity:.45} .refrow.refsrc{background:#f7f9fb} .refrow.refdrop{outline:2px dashed #1e6fe0;outline-offset:2px;background:#eef4fb} .rtbl th{width:auto;background:#f4f6f8;white-space:nowrap} .rtbl .refhint{background:#eaf4fb;color:#3b6d94} /* ---- 患者ページのタブ ---- */ /* 患者トップのタブ: メディベースと同じ形。ひとつずつ箱で囲まず、等間隔に並べ、 選んだものだけが手前の紙のように見える(2026-08-09 院長要望) */ .ptabs{display:flex;gap:2px;flex-wrap:wrap;margin-bottom:12px;align-items:flex-end;border-bottom:1px solid #d7e0ea} .ptabs a{border:1px solid transparent;border-bottom:0;border-radius:7px 7px 0 0;background:transparent; padding:8px 17px;font-size:13px;color:#3b4b5e;cursor:pointer;margin-bottom:-1px;display:inline-flex; align-items:center;gap:6px;white-space:nowrap} .ptabs a:hover{background:#f2f7fc} .ptabs a.on{border-color:#d7e0ea;background:#fff;font-weight:700;color:#1e6fe0;box-shadow:0 -1px 0 #fff inset} .ptabs a svg{width:15px;height:15px;flex:none;color:#9cc2e8} /* 薄い青の線画(色付きの絵文字は使わない) */ .ptabs a.on svg{color:#1e6fe0} .ptabs a.soon{color:#aab6c1;cursor:not-allowed} /* 🔖 2026-09-06 b321 先生の指示: 「🔖⚙ スタンプ編集」をタブの列のいちばん右へ(margin-left:auto)。見た目は今までどおり小さな文字 (.stgear と同じ 12px・灰色)。タブの枠・余白は付けない */ .ptabs a.stgear{margin-left:auto;align-self:center;border:0;border-radius:6px;padding:3px 8px;margin-bottom:4px;font-size:12px;color:#5c6b7a;background:transparent} .ptabs a.stgear:hover{background:#f2f7fc;color:#1e6fe0} /* LINE は毎日使うものではないので、緑の印象だけ残して他のタブと同じ濃さに(2026-08-09 院長要望) */ .ptabs a.linebtn{background:#f0faf3;border:1px solid #bfe3cd;color:#12874a;font-weight:600;padding:7px 16px; border-radius:7px;margin-bottom:1px;box-shadow:none} .ptabs a.linebtn svg{color:#4bb377} .ptabs a.linebtn:hover{background:#e3f5e9;border-color:#9ed4b4} .ptabs a.linebtn.on{background:#dff3e6;border-color:#6cbd8c;color:#0a6c39;font-weight:700} .ptabs a.linebtn.on svg{color:#0a6c39} /* 💬 「ひもづき未」(2026-09-04 先生の逐語「LINEとのひもづきがまだない人は、患者トップのLINEタブの右に 『ひもづき未』のオレンジ/赤っぽい小さい文字を入れてほしいです」)。 LINEとひもづいていない患者の時だけ、LINEタブのすぐ右に出る**文字だけ**の印(main.tsx の lineUid === null)。 ・色はオレンジと赤の間(#e8590c)・字は 10.5px の小さい文字 ・帯・枠・地色・余白は付けず、1行に固定(white-space:nowrap)+行の高さ1 = タブの列の高さを変えない・折り返さない ・align-self:center = 隣のLINEタブの文字と同じ高さに並べる(.ptabs は align-items:flex-end なので個別に指定) ・b314: 出るのはひもづけ窓を×で閉じた後だけ。押すと窓がまた開く(cursor:pointer)。だが .ptabs a の箱の指定は打ち消す */ .ptabs .line-nolink{font-size:10.5px;line-height:1;color:#e8590c;font-weight:600;align-self:center; margin:0 2px 0 4px;padding:0;white-space:nowrap;cursor:pointer;border:0;border-radius:0;background:transparent} .ptabs a.line-nolink:hover{background:transparent;text-decoration:underline} /* 🔗 2026-09-06 b314 先生の指示: ひもづけ窓を最初から・候補を先に。 LINEとひもづいていない患者では「ひもづき未」の文字の代わりに、この窓が**最初から開いた状態**で出る(main.tsx の plinkOpen)。 ・置き場 = LINEタブのすぐ右(.plink-wrap は幅0でタブの列の高さいっぱい)の**下**に浮かぶ(タブの列の並びは1pxも動かさない) ・中身 = [×(左上)][苗字の入った検索欄] → その下に一覧の行(1つだけ) (🔗 2026-09-06 b316 先生の指摘: 一覧を1つに・LINE検索と同じ並び・右クリックでまとめる。b314の「上=フルネーム候補/下=苗字の一覧」の 2段は撤去し、×の右に検索欄(.plink-head)、その下に LINE(一括)の「全」で同じ語を検索した時と同じ並びの一覧だけ) ・行は LINE(一括)の一覧と同じ部品(.lib-row/.lib-ava/.lib-nm/.lib-last…)を使い、見た目も同じ。窓の中では高さだけ詰める(省スペース) ・✔ = この患者にひもづいた相手(押せない) / 🔗苗字 = 別の患者にひもづいている相手 ・行の右クリックの小窓は LINE(一括)と同じ .calctx.lib-rowctx(下の方の定義。部品も共用) ・帯・説明文は置かない(先生の好み) */ .ptabs .plink-wrap{position:relative;align-self:stretch;width:0;margin-left:4px} .plink-head{display:flex;align-items:center;gap:4px;margin:2px 0 3px} .plink-win{position:absolute;top:100%;left:0;z-index:1500;width:400px;max-height:70vh;overflow:auto; background:#fff;border:1px solid #c8d3de;border-radius:8px;box-shadow:0 6px 18px rgba(20,40,60,.18); padding:2px 6px 6px;cursor:default;font-weight:400;color:#1b2b3a} .ptabs .plink-win a{border:0;border-radius:0;padding:0;margin:0;background:transparent;font-weight:400;font-size:inherit; color:inherit;box-shadow:none;display:inline;white-space:normal} .ptabs .plink-win a:hover{background:transparent} .ptabs .plink-win .plink-x{display:block;width:max-content;font-size:14px;line-height:1;color:#8a97a5;padding:3px 4px; cursor:pointer;text-decoration:none!important;user-select:none} .ptabs .plink-win .plink-x:hover{color:#243b53} .plink-win .lib-row{height:auto;min-height:0;padding:3px 6px;gap:8px;flex-wrap:wrap;border-radius:6px} .plink-win .lib-row .lav-l{width:36px;height:36px} .plink-win .lib-body{height:auto;flex:1 1 0%;min-width:0} .plink-win .lib-row b{padding-right:0} .plink-win .lib-when{left:0;margin-left:8px} .plink-win .lib-l2{padding-right:0;margin-top:0} .plink-mk{flex:0 0 auto;margin-left:6px;font-size:11px;color:#8a97a5;white-space:nowrap} .plink-mk.on{color:#12874a;font-weight:700;font-size:13px} .plink-win .lib-row.plink-mine{cursor:default} .plink-win .lib-row.plink-mine:hover{background:transparent} .plink-win .lib-row.plink-ask{background:#fff7e0;box-shadow:inset 0 0 0 1px #f0d08a} .plink-win .lib-cand-ok{flex:1 0 100%;display:flex;align-items:center;gap:6px;margin-top:2px;font-size:11px;color:#8a5a00} .ptabs .plink-win .lib-cand-yes,.ptabs .plink-win .lib-cand-no{flex:0 0 auto;padding:1px 8px;border-radius:999px;font-size:11px; line-height:1.5;cursor:pointer;text-decoration:none!important;user-select:none;white-space:nowrap} .ptabs .plink-win .lib-cand-yes{margin-left:auto;background:#1e6fe0;border:1px solid #1e6fe0;color:#fff} .ptabs .plink-win .lib-cand-yes:hover{background:#1558b0;border-color:#1558b0} .ptabs .plink-win .lib-cand-no{background:#fff;border:1px solid #c8d3de;color:#5c6b7a} .ptabs .plink-win .lib-cand-no:hover{background:#f0f4f8} /* b316: 検索欄は×の右(同じ行)。残りの幅いっぱい */ .plink-q{flex:1 1 0%;min-width:0;box-sizing:border-box;font-size:11.5px;padding:3px 6px;border:1px solid #dbe3ea;border-radius:5px;margin:0} .ptabs .plink-win .plink-head .plink-x{flex:0 0 auto} .plink-e{font-size:11px;color:#8a97a5;padding:3px 6px} /* 💴 新見積書作成(2026-08-16 batch114 院長要望)。LINEの緑の箱と同じ作りで、色だけ薄い黄色。 タブではなく「窓を開くだけのボタン」なので、押しても表示中のタブは変わらない */ .ptabs a.qnewbtn{background:#fffbe8;border:1px solid #ecdca4;color:#8a6510;font-weight:600;padding:7px 16px; border-radius:7px;margin-bottom:1px;box-shadow:none} .ptabs a.qnewbtn:hover{background:#fdf5d3;border-color:#e0cb85} .ptabs a.qnewbtn.on{background:#fbefc2;border-color:#d5bb63;color:#71530a;font-weight:700} /* 🔴 新見積書作成の2択(2026-08-22 batch176)。押したボタンの真下に小さく出す。説明文は入れない */ .qpickwrap{position:relative;display:inline-flex;align-items:flex-end} /* b249: 押した所に出す小窓。全画面の受け皿(veil)が帯より下だと、帯の上を押しても閉じない */ .qpick-bg{position:fixed;inset:0;z-index:3000;background:transparent} .qpick{position:absolute;top:100%;left:0;margin-top:3px;z-index:3001;display:flex;flex-direction:column;gap:3px; background:#fff;border:1px solid #ddd0a0;border-radius:6px;padding:4px;box-shadow:0 3px 10px rgba(0,0,0,.15)} .qpick button{white-space:nowrap;font-size:12px;padding:5px 10px;border-radius:5px;cursor:pointer;text-align:left} .qpick button.qpick-a{background:#fffbe8;border:1px solid #e0cb85;color:#8a6510;font-weight:700} .qpick button.qpick-a:hover{background:#fbefc2} .qpick button.qpick-b{background:#f6f8fa;border:1px solid #d7e0ea;color:#3b4b5e} .qpick button.qpick-b:hover{background:#eef3f8} /* 名前の右に置く小さな印(禁忌・アレルギー・感染症・コメント)。押すと中身が出る。メディベース準拠 */ .pnamerow{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .palerts{position:relative;display:inline-flex;gap:5px;align-items:center} .pab{cursor:pointer;font-size:11.5px;font-weight:700;border-radius:5px;padding:2px 8px;line-height:1.7;color:#fff;white-space:nowrap} .pab.ab-red{background:#e05a4d} .pab.ab-green{background:#4aab63} .pab.ab-orange{background:#e8994a} .pab.ab-blue{background:#5b9bd5} .pabpop{position:absolute;left:0;top:26px;z-index:40;background:#fff;border:1px solid #c8d3de;border-radius:8px; box-shadow:0 10px 28px rgba(25,45,66,.22);padding:10px 16px;min-width:230px;max-width:520px;cursor:pointer} .pabline{font-size:13px;line-height:1.9;white-space:pre-wrap} .pabline.ab-red{color:#c0392b} .pabline.ab-green{color:#1c7c31} .pabline.ab-orange{color:#b06a12} .pabline.ab-blue{color:#1a5fb4} /* 窓を掴んで動かしている間は、中の iframe にマウスを取られないようにする(つっかえ防止) */ .fprev.dragging iframe{pointer-events:none} /* 看護師の用紙(採血問診表・手術記録)を白紙で刷るとき: その用紙だけを原寸で紙に出す(2026-08-09) */ @media print{ /* ⚠️ 印刷物にブラウザが勝手に足す「日付・題名・URL・ページ番号」を出さない(2026-08-10 院長要望)。 紙は用紙側で余白を持つ。**印刷物を新しく作るときは必ずこの指定があることを確かめる** */ @page{margin:0} /* ⚠️ 用紙以外の要素(隠していても場所は取る)が横に広いと、ブラウザが紙全体を縮めてしまい 用紙が小さく刷られる。紙の幅そのものに固定して原寸で出す(2026-08-10 院長報告) */ html,body.pprint{width:210mm !important;margin:0 !important;padding:0 !important;overflow:hidden !important} body.pprint .fprev.operec{width:210mm !important;height:auto !important} body.pprint .operec-scroll{padding:0 !important} body.pprint .nk-paper,body.pprint .operec-paper,body.pprint .ms-paper,body.pprint .gz-paper{ width:210mm !important;max-width:none !important; box-shadow:none !important;margin:0 !important} /* ⚠️ 1枚に収める。高さを紙より1pxだけ低く切り、次の紙へ送らせない (min-height を紙と同じにすると、枠線1本ぶんのはみ出しで白紙の2枚目が出る。2026-08-10 院長報告) 🍎 297mmちょうどだと紙の高さと同値になり、WebKit(iPad・MacのSafari)は端数の丸めで **白紙の2枚目**を必ず作る(2026-08-14 batch84でWKWebView+NSPrintOperationの実測により確定。 Chromeは html の overflow:hidden で切り落とすため露見しなかった)。1px低くすれば両方で1枚 */ body.pprint .nk-paper,body.pprint .operec-paper,body.pprint .ms-paper,body.pprint .paperprint{ height:calc(297mm - 1px) !important;min-height:0 !important;overflow:hidden !important; page-break-after:avoid !important;break-after:avoid-page !important; page-break-inside:avoid !important;break-inside:avoid !important} body.pprint .operec-bg{width:100% !important;height:auto !important} body.pprint *{visibility:hidden} body.pprint .paperprint,body.pprint .paperprint *{visibility:visible} /* 🍎 用紙の連なり(先祖)以外は「隠す」だけでなく**場所ごと消す**(2026-08-14 batch84)。 visibility:hidden だけだと場所は残り、WebKit(iPad)は見えない画面全体(縦2000px超・横に広い表)を 紙の枚数と縮小率の計算に入れてしまう=iPadの「ほぼ白紙・断片だけ」印刷の正体。 印(.pomit)は main.tsx の usePrintOnly が付け外しする。画面の見た目には一切効かない(印刷の中だけ) */ body.pprint .pomit{display:none !important} body.pprint .dwin{position:absolute !important;left:0 !important;top:0 !important;width:auto !important; border:0 !important;box-shadow:none !important;background:#fff !important} body.pprint .dwin-bar{display:none !important} body.pprint .dwin-body,body.pprint .skwin-body{height:auto !important;max-height:none !important;overflow:visible !important} body.pprint .skwin-body>div{width:auto !important;height:auto !important} body.pprint .paperprint{transform:none !important} /* ⚠️ 採血問診表(780px幅)・手術記録(980px幅)はpxで作った紙なので、そのままではA4(約794×1123px)から はみ出す。印刷のときだけ紙ごと縮めてA4縦1枚の原寸に収める(2026-08-10 院長報告・batch49)。 採血=780×約1174px→0.95倍(高さが決め手)。手術記録=980×約1266px→0.80倍(幅が決め手)。 画面の見た目と拡大縮小には影響しない(印刷時のみ) */ body.pprint .skwin-body .paperprint{width:210mm !important} /* ⚠️ 倍率は画面側が測って決める(--pk)。長い記入が折り返して行が増えたぶんだけ自動で縮み、 必ずA4縦1枚に収まる(2026-08-12 batch63)。測れないときは今までどおり 0.95 / 0.80 */ body.pprint .skwin-body .skpaper{transform:scale(var(--pk,.95)) !important;transform-origin:0 0 !important} body.pprint .skwin-body .skpaper.oppaper{transform:scale(var(--pk,.80)) !important} /* 🖨 記入欄(input)は枠の幅で文字が切れる。紙では折り返す文字(.skiprint)に差し替えて全文を出す。 上の body.pmeasure(画面側の採寸)と同じ指定にしておくこと */ body.pprint .skpaper .skiw{min-width:0 !important;max-width:100% !important;flex-wrap:wrap !important} body.pprint .skpaper input.ski,body.pprint .skpaper textarea.ski{display:none !important} body.pprint .skpaper .skiprint{display:inline-block !important} /* ✍️ b491: 折り返す欄(.skiw.ta)の包みは画面だけ横に広げている。紙では今までの包みに戻す (上の body.pmeasure と対。片方だけ直さないこと) */ body.pprint .skpaper .skiw.ta{flex:0 1 auto !important} /* オペ記録(目・鼻)は版下の画像そのものが1枚の紙。窓の枠を消してA4いっぱいに出す */ body.pprint .fprev.operec{position:absolute !important;left:0 !important;top:0 !important; width:210mm !important;height:auto !important;border:0 !important;box-shadow:none !important;border-radius:0 !important} body.pprint .fprev.operec .fprev-bar{display:none !important} body.pprint .operec-scroll{overflow:visible !important;height:auto !important;padding:0 !important;background:#fff !important} body.pprint .operec-paper{width:210mm !important;box-shadow:none !important;margin:0 !important} /* 🍎 WebKit(iPad・MacのSafari)専用の印刷分岐(batch82のzoom切替)は2026-08-14 batch83で撤去。 iPad実機で逆に白紙化し、「画面の%を下げると印刷にも効く」回避手段まで塞いだため(院長報告)。 main.tsx 側の html.wk の印付けも止めてあり、印刷経路はbatch81時点(全ブラウザtransform)に戻した。 → 2026-08-14 batch84: 実物WebKit(WKWebView+NSPrintOperation)の実測で真因を確定して対処済み。 ①紙の高さ297mmちょうど→端数の丸めで白紙の2枚目(上の height:calc(297mm - 1px) で対処) ②見えないだけで場所の残る画面全体が枚数・縮小率の計算に入る(上の .pomit で対処)。 transform:scale(--pk) 自体はWebKitの印刷でも正しく効くことを実測で確認済み(zoom分岐は不要) */ } /* 患者一覧: メディベースと同じ表(2026-08-10 院長要望) */ .ptable-wrap{overflow-x:auto;background:#fff;border:1px solid #d7e0ea;border-radius:8px} .ptable{width:100%;border-collapse:collapse;font-size:12.5px} .ptable th{background:#f4f8fb;border:1px solid #d7e0ea;padding:7px 10px;text-align:left; font-weight:700;color:#3b4b5e;white-space:nowrap} /* 1行におさめる。文字はメディベースと同じ薄さ(濃い黒にしない) */ .ptable td{border:1px solid #e3eaf1;padding:5px 10px;vertical-align:middle;color:#5a6672; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ptable tbody tr:hover{background:#f7fbff} .pt-nm a{display:block;line-height:1.15;text-decoration:none;white-space:nowrap} .pt-kana{display:block;font-size:9px;color:#a3adb7;letter-spacing:.04em;white-space:nowrap} .pt-name{color:#5b9bd5;font-weight:400;font-size:13.5px;white-space:nowrap} .pt-nm a:hover .pt-name{text-decoration:underline} .pt-addr{max-width:270px} .pt-cm{max-width:170px} .pt-del{text-align:center;width:52px} .pt-del a{cursor:pointer;color:#9aa7b4;font-size:14px} .pt-del a:hover{color:#c0392b} .delchk{display:inline-flex;align-items:center;gap:5px;margin-left:16px;font-size:12.5px;color:#5c6b7a;cursor:pointer} /* 🖨 画像の印刷(2026-08-21 batch169 先生の逐語「画像タブ内の画像 印刷できるようにしてほしい」) ・A4縦・**1ページに1枚**。画像は紙いっぱいに大きく、縦横比は保つ・切り取らない(object-fit:contain) ・上部は小さく1行だけ(氏名・カルテID・画像の名前・撮影日時)。説明文は足さない ⚠️ 印刷の仕掛けそのものは既存のまま(usePrintOnly + .paperprint)。この下の @media print は 「1枚ごとに改ページ」だけを上書きする。上の共通指定(423〜485行)は .paperprint に break-after:avoid を付けているので、**必ずその後ろ**に置くこと(同じ強さなら後勝ち) */ .fprev.imgprint{width:min(830px,calc(100vw - 24px))} .ip-scroll{flex:1;overflow:auto;background:#8f9aa5;padding:12px} .ip-paper{position:relative;width:100%;max-width:794px;height:1122px;margin:0 auto 12px;background:#fff; box-shadow:0 4px 18px rgba(0,0,0,.3);display:flex;flex-direction:column;padding:8mm;box-sizing:border-box} .ip-paper:last-child{margin-bottom:0} /* 記録の見出し(説明文ではない)。1行に収め、はみ出しても紙を膨らませない */ .ip-head{flex:none;font-size:11px;line-height:1.4;color:#111;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid #444;padding-bottom:4px;margin-bottom:6px} .ip-head b{font-weight:700} .ip-head span{margin-left:14px;color:#222} .ip-body{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden} .ip-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block} /* 読み込みがそろうまで「印刷」は押せない(白紙で刷らないため) */ .fprev-bar .ipgo{color:#1a5fb4;font-weight:700} .fprev-bar .ipgo.off{color:#94a2b0;font-weight:400;cursor:default} /* 🖨 プレビュー窓の「この1枚だけ印刷」。✕閉じるの右隣(左上の作法は崩さない) */ .pv-print{cursor:pointer;color:#1a5fb4;font-weight:700;white-space:nowrap;border:1px solid #bcd3ee; background:#f2f8ff;border-radius:6px;padding:4px 10px;font-size:12.5px} .pv-print:hover{background:#e3f0ff} @media print{ body.pprint .fprev.imgprint{position:absolute !important;left:0 !important;top:0 !important; width:210mm !important;height:auto !important;border:0 !important;box-shadow:none !important; border-radius:0 !important;overflow:visible !important;display:block !important} body.pprint .fprev.imgprint .fprev-bar{display:none !important} body.pprint .ip-scroll{display:block !important;overflow:visible !important;height:auto !important; padding:0 !important;background:#fff !important} /* 1枚 = 1ページ。高さは紙より1px低くする(297mmちょうどだとWebKitが白紙の2枚目を作る。batch84) */ body.pprint .ip-paper{width:210mm !important;max-width:none !important;height:calc(297mm - 1px) !important; margin:0 !important;box-shadow:none !important;padding:8mm !important;overflow:hidden !important; display:flex !important; page-break-inside:avoid !important;break-inside:avoid !important; page-break-after:auto !important;break-after:auto !important} /* 2枚目以降は必ず次の紙から(共通指定の break-after:avoid をここで打ち消している) */ body.pprint .ip-paper + .ip-paper{page-break-before:always !important;break-before:page !important} body.pprint .ip-img{max-width:100% !important;max-height:100% !important} } /* 🖊 オペ記録(目・鼻): Photoshopの版下を下絵にして、上部だけを差し込む(2026-08-10 院長要望) */ .fprev.operec{width:min(820px,calc(100vw - 24px))} .operec-scroll{flex:1;overflow:auto;background:#8f9aa5;padding:12px} .operec-paper{position:relative;width:100%;max-width:794px;margin:0 auto;background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.3)} .operec-bg{display:block;width:100%;height:auto} /* 版下の上端〜破線までが空いているので、そこへ重ねる(比率で置くのでどの倍率でもずれない) */ .operec-head{position:absolute;left:0;top:0;width:100%;height:17.3%;padding:2.2% 3% 0;box-sizing:border-box; font-size:clamp(9px,1.55vw,13px);line-height:1.5;color:#111} .operec-head .orh1{display:flex;align-items:baseline;gap:2%} .orh-id{min-width:26%} .orh-ttl{font-weight:700;letter-spacing:.18em;font-size:1.35em} .orh-chk{margin-left:auto;color:#c0392b;font-size:.82em;white-space:nowrap} .operec-head .orh2{display:flex;align-items:baseline;margin-top:.5em} .orh-nm{min-width:26%} .orh-dt{margin-left:auto;font-weight:700} /* ⚠️ 2026-08-13 batch78: ここには max-height:9.2em + overflow:hidden があり、枠に入りきらない 手術名が**黙って切り取られて**いた(院長報告「4行目以降が出ない」)。切り取りはやめ、 文字の大きさと段組み(orbFit)で入るようにする。それでも入らないときは枠からあふれて出す ＝ 下絵と重なっても、書いたことが紙に出ないよりは良い(院長の明示指示)。ここに overflow:hidden を戻さないこと。 */ .orh-box{border:1px solid #111;padding:.35em .6em;margin-top:.5em;max-width:62%; overflow:visible;background:#fff} .orh-box.wide{max-width:94%} /* 2段組みにしたときは枠を横に広げる */ .orb-t{font-weight:700} .orb-dr{font-weight:700} .orb-ls{column-gap:1.2em} .orb-l{white-space:pre-wrap;overflow-wrap:anywhere;break-inside:avoid} .orb-l.none{color:#8a97a4} .orb-k{margin-top:.2em} /* ══ 🖊 オペ記録を画面で書く(2026-08-17 batch128 第1段階) ══════════════════ 2層(背景=版下PNG / 前面=オブジェクトを描き直すキャンバス)。 ⚠️ .opdw-cv は touch-action:none。iPadのApple Pencil・指で描くとき、 ブラウザに「これはスクロールだ」と横取りされないため(これが無いと線が引けない) */ .modal-bg.opdw-bg{z-index:2200;padding:14px 12px;align-items:center} /* 2026-08-18 batch133: 右に図形ライブラリのパネルが付いたので 1180px → 1420px に広げた */ /* ⚠️ 2026-08-18 batch136: 高さを max-height ではなく **height** で決める。 「図を大きく」は用紙の箱の高さから倍率を出すので、高さが中身で決まると (箱が小さい→倍率が小さい→中身が小さい→箱がもっと小さい)と縮み合ってしまう */ /* ⭐ 2026-08-18 batch137: 窓を「左=絵だけ / 右=道具ぜんぶ」の2分割にした(先生の指示)。 ┌─────────────────────────────────────────────┐ │ 🖊 オペ記録(鼻)を画面で書く 患者名 │ ← 題名 ├──────────────────────┬──────────────────────┤ │ 絵(.opdw-view) │ 道具(.opdw-side) │ │ = 100% - --opdw-right│ = --opdw-right │ ├──────────────────────┴──────────────────────┤ │ 患者カルテに保存 / 閉じる │ └─────────────────────────────────────────────┘ ⭐⭐ **右の割合を変えたい時は、下の --opdw-right の1行だけを直す**(例: 44% → 38%)。 左は「残り全部」なので、ここ1つで左右の両方が決まる。 ⭐ 図形ライブラリの高さも --opdw-libh の1行で決まる(窓の縦幅の約1/3) */ /* ⚠️ 窓の横幅の上限を 1420 → 1800px に広げた(2026-08-18 batch137)。 右に44%を渡すと左(絵)が狭くなり、絵が横で頭打ちになるため。広い画面ほど絵が大きく映る。 (画面が1420px以下の端末では今までと同じ = calc(100vw - 24px) が効く) */ /* ⭐ 2026-08-19 batch156: --opdw-libh は「図形ライブラリの箱の高さ」。右パネルは下から [色パレット入りの図形ライブラリの箱]を--opdw-libhで置くので、**箱の上端 = パネルの縦の真ん中あたり**という先生の指定は、この1行で後から調整できる。 ⭐ --opdw-tplw は右端のテンプレ/カテゴリの細い縦の列の幅(これも1行で調整) */ /* ⭐ 2026-08-21 batch173 先生の指示: 「ライブラリがたくさん見れている状況が嬉しいので、**画像ライブラリの上端をもう少し上に**」 → --opdw-libh 39vh → **46vh**(箱が高くなる = 上端が上がる = サムネが1段ぶん多く見える) 「ツールボックスの右もスペースの余裕作り、**『テンプレ』欄や『LCSG』あたりを幅広目に**」 → --opdw-tplw 118px → **150px** ⚠️ 絵の大きさは --opdw-right だけで決まる。この2つはどちらも**右パネルの中の分け方**なので、 広げても・高くしても**絵は1pxも小さくならない**(先生の「絵面が重要」を守るための作り) */ /* ⭐ 2026-08-22 batch175 先生の逐語: 「最前面への『へ』と、最背面への『へ』をなくして、そのぶん広くなった幅に『図を大きく』を 入れて、同じ行にして」「そしてそのぶん、『図形ライブラリ』が１行分上へ移動するように」 → 操作の段が 2行(56px) → **1行(28px)** に収まった(道具の箱 267px → 239px)。 升は「上から auto / 1fr / --opdw-libh」で、ライブラリは**下から**決まるので、 段が縮んだだけでは上端は動かない(余りを 1fr が吸う)。そこで --opdw-libh を **46vh → calc(46vh + 28px)** にして、上端をちょうど1行ぶん(28px)持ち上げた。 ⚠️ 28px は実測値(段の高さの差)。1440x900 では上端 412px → 384px(上から 45.5% → 41.8%)。 ⚠️ 絵の大きさは --opdw-right と切り取り窓(OPD_ZU)だけで決まるので、絵の倍率は1%も下がらない */ /* ⭐ 2026-08-25 batch187 先生のモック: 「図形ライブラリは今より少し下に下がり、テンプレ欄も縦長になります」 → --opdw-libh calc(46vh+28px) → **calc(41vh+28px)**(箱が低くなる = 上端が下がる。 テンプレの縦の列はライブラリの上端まで伸びる作りなので、同じ1行で**縦長**になる) */ /* ⭐ 2026-09-04 batch273 先生の逐語(添付画像つき): 「『直線』『四角』『丸』を左にずらし、『丸』のマークの右端が、『最背面』のマークの右端と なるくらいにしてほしい。その分、丸のマーク約2.8個分くらい？ テンプレリストを左へ長く してほしい。(拡大縮小回転ウインドウも左へ詰める)」 → 足したのは **--opdw-toolw(道具の列の幅)の1つだけ**。右パネルを2列 → **3列**にして、 上半分(裏書・道具の箱・拡大縮小/回転)と下半分(図形ライブラリ・カテゴリ)で 左右の分かれ目を**別々**にした: 上半分: [道具 344px][ テンプレ = 残り全部(2列目+3列目) ] 下半分: [ 図形ライブラリ = 1列目+2列目 ][ カテゴリ 150px ] ╲▭⬭ は .opdw-tbr の margin-left:auto で**道具の箱の右端に貼り付いている**ので、 道具の列が344pxになると3つはそのまま左へ寄る。空いたぶんはテンプレの列が飲み込む = 先生の「その分テンプレリストを左へ長く」。 「🔧 拡大・縮小 / 回転」(.opdw-lib-tools)も同じ1列目なので、同時に左へ詰まる。 ⭐ 344px の根拠(1440x980 での実測): 「↩元に戻す…⬇最背面」の段の中身は **324.2px**。道具の箱は左右に padding 8px + 枠1px なので、 箱の幅を 324.2+18 ≒ **344px** にすると、右端に貼り付いた ⬭ の右端が ちょうど「最背面」の右端に重なる(実測の差 1.8px)。 伸び縮みする1fr のままだと窓幅ごとに右端がずれる(先生の画面でしかそろわない)ので**決め打ち**。 ⭐ 図形ライブラリは**1列目+2列目**にまたがるので、改修前と同じ幅のまま (先生 batch173「ライブラリがたくさん見れている状況が嬉しい」= サムネの数を減らさない)。 ⚠️ 「1段目(ペン〜消しゴム と ╲▭⬭)が2行になる」のは**避けられない・仕様として正**。 1段目の中身は横一列だと399px要るのに、⬭ を324.2pxの所まで寄せるのが先生の指示のため。 先生の添付画像でも ╲▭⬭ は既に「なげなわ・消しゴムの**右下**」に居る = 今の先生の画面と同じ姿。 他の段(線・文字・ゆがみ・元に戻す…最背面)は**1行のまま**(検査が高さで見張る)。 ⚠️ 絵(キャンバス)の大きさは --opdw-right(44%)だけで決まるので、1pxも変わっていない。 ⚠️ 半分の窓(.opdw-half = 処置記録・目のオペ記録)は**今までどおりの2列のまま**(下の打ち消し4行)。 あちらは右パネル全体が392pxしかなく、道具の列を344pxに固定すると テンプレの列が潰れる(先生の「一目で見える」に反する)。 */ /* ⭐⭐ 2026-09-12 b436 先生の逐語(理想図つき): 「手術記録の「図」の領域はそのままだが、図の窓は右へ「図のみ」のボタン半分量くらい広げて欲しい」 「だいぶスペースが空くので、右に位置していた「テンプレウインドウ」を「図のみ」のボタン1.5個分くらい左へ拡大」 → ① --opdw-viewext(26px ≒「図のみ」52.5px の半分): 右パネル(.opdw-side)をそのぶん細くし、図の窓(.opdw-view)は 右の余白をそのぶん広げる(JS も倍率を出す幅からこの分を引く)= **紙の大きさ・位置は1pxも変わらない** ② --opdw-toolw 344px → **240px**: 道具の箱は🔧の箱と合体して縦に積む形になり細くてよい。 テンプレの列の左端 = 344 − 26 − 240 = **78px(≒「図のみ」1.5個)左へ**。図形ライブラリ(1〜3列目)は左端が 26px 右へ ⚠️ 半分の窓(.opdw-half = 目のオペ記録・処置記録・計画の列)は右パネルが 380px しかなく、道具の箱(240px)が 入らなくなるので --opdw-viewext は 0(下の .opdw-half)。中身の並び替えは同じ */ .modal.opdw{--opdw-right:44%;--opdw-libh:calc(41vh + 28px);--opdw-tplw:150px;--opdw-toolw:240px;--opdw-viewext:26px; max-width:min(1800px,calc(100vw - 24px));width:100%;padding:12px 14px 14px; display:flex;flex-direction:column;height:calc(100vh - 28px);max-height:calc(100vh - 28px)} /* ⭐ 2026-09-04 batch276 先生の逐語「『直線』などがあった行は何もなくなるので、その分全体的に上に詰めてください」 1段目が1行に収まって道具の箱が 220.6 → 192.8px(1440x900 の実測。差 27.8px)。 升は「auto / auto / 1fr / --opdw-libh」で図形ライブラリは**下から**決まるので、箱が縮んだだけでは 余りを 1fr が吸って図形ライブラリの上端は動かない(batch175 と同じ理屈)。 → --opdw-libh を **+28px**(calc(41vh + 28px) → calc(41vh + 56px))して、上端をちょうど1行ぶん持ち上げた。 ⚠️ 升は minmax(0,--opdw-libh) なので、縦が足りない画面(1440x900 で「🔧 拡大・縮小 / 回転」が いつも開いている今は余りが数px)では図形ライブラリのほうが縮む = 縦スクロールは出ない。 ⚠️ 半分の窓(.opdw-half = 処置記録・目のオペ記録)には掛けない: 処置記録は図形ライブラリの箱が無く (4段目の升は空)、この値を増やすとテンプレの列が縦に縮むだけになるため */ .modal.opdw:not(.opdw-half){--opdw-libh:calc(41vh + 56px)} /* ══ ⭐ 2026-08-27 batch210「『オペ記録を書く』の半分」(先生の逐語) ═══════════════════ ⭐ **横幅だけ**を半分にする(1800 → 900px)。縦は今までどおり画面いっぱい。 理由: 右の道具は1本の縦の列に積まれているので、縦を半分にすると 道具・テンプレがスクロールに沈む(先生の恒久的な好み「一目で見える」に反する)。 横は、処置記録では図形ライブラリとカテゴリの2つの箱が消えるぶんがちょうど効く。 ⚠️ 左右の割合(--opdw-right)は**ここでは変えない**。決めている所は今までどおり .modal.opdw の1箇所だけ = 先生が「38%にしたい」と言った時に直す場所が増えない (batch136 からの決めごと。「オペ記録の画面設計やり直しの検査」が数で見張っている)。 窓が半分になると細い列だけは詰めたいので、--opdw-tplw(テンプレの列の幅)だけ狭める。 */ .modal.opdw.opdw-half{--opdw-tplw:118px;--opdw-viewext:0px; max-width:min(900px,calc(100vw - 24px))} /* ⭐ 2026-09-04 batch273: 半分の窓(処置記録・目のオペ記録)は**改修前の2列のまま**にする打ち消し。 理由: 右パネルが392pxしかないので、道具の列を344pxに固定するとテンプレの列が40pxに潰れる。 ⚠️ 3つの升の指定も2列のときの値に戻す(3列目を指したままだと、幽霊の4本目の線が生えてしまう)。 → 半分の窓の見た目は1pxも変わっていない(検査「オペ記録の窓6点」等が数で見張る) */ .modal.opdw.opdw-half .opdw-side{grid-template-columns:minmax(0,1fr) var(--opdw-tplw)} .modal.opdw.opdw-half .opdw-tplcol{grid-column:2/3} /* ⭐ 2026-09-04 batch276: 半分の窓でもカテゴリの列は無い = 図形ライブラリ(目のオペ記録で出る)は 2列ぶん(右端まで)。処置記録(noShapeLib)ではこの箱そのものが無いので何も変わらない */ .modal.opdw.opdw-half .opdw-lib-mid{grid-column:1/3} /* 💉 処置記録の紙(batch210)。下絵(顔の線画 916x922)は紙の中央に**等倍で浮かせて**敷くので、 紙の高さは下絵では決まらない。オペ記録と同じ座標系を保つため縦横比で決める */ .opdw-paper.sho{aspect-ratio:996/1412} .opdw-bg-img.sho{position:absolute} /* 💉 処置記録の欄(処置日/ヒアルロン酸/BTX/その他/記録/処置施行Dr。b208の欄をそのまま残す)。 置き場所 = 右の道具の列のいちばん上(絵は1pxも削らない)。 ⚠️ 説明文は足さない。ラベルと欄だけを2列で詰める(省スペース優先) */ .opdw-shrec{grid-column:1;grid-row:1;align-self:start;display:grid; grid-template-columns:auto minmax(0,1fr);gap:3px 6px;align-items:center; background:#f2f6fa;border:1px solid #dbe5ee;border-radius:9px;padding:6px 8px} .opdw-shrec>label{font-size:11.5px;color:#5b6b7b;white-space:nowrap} .opdw-shrec>input,.opdw-shrec>textarea{font-size:12.5px;padding:3px 6px;border:1px solid #c6d3de; border-radius:5px;background:#fff;color:#111;min-width:0;width:100%;box-sizing:border-box} .opdw-shrec>textarea{resize:vertical;line-height:1.35} /* b208 にあった「患者トップ」への道。欄の右下に小さく(説明文なし) */ .opdw-shrec-go{grid-column:1/-1;justify-self:end;font-size:11.5px;color:#1e6fe0;cursor:pointer} .opdw-shrec-go:hover{text-decoration:underline} .opdw-head{justify-content:flex-start;gap:10px;margin-bottom:6px} /* 🛡 2026-09-06 b326 榛澤先生の困りごと: トラックパッドの戻るで記録が消える→編集中は戻るを無効化・2秒ごとに端末へ控え・復元 題名の行の右に「◯月◯日 ◯◯:◯◯ の下書きがあります [戻す] [捨てる]」(1行・窓の高さは変えない) */ .opdw-wip{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#7a5c12;white-space:nowrap} .opdw-wip button{font-size:11.5px;padding:2px 9px;border:1px solid #d8c48a;background:#fff7e0;border-radius:6px;cursor:pointer;color:#7a5c12} .opdw-wip button:hover{background:#f6ecd2} /* ⚠️ 2026-08-21 batch173: 題名の行の「➤ 選択」「🔒 固定」(.opdw-headbtns)は**撤去**した。 先生の指示で「🙎 側貌」と合わせて**紙の右上**へ縦3つに引っ越し(= .opdw-paperbtns) */ .opdw-b:disabled{opacity:.45;cursor:default} .opdw-b:disabled:hover{background:#fff} /* 🔒 固定中は橙色(紙の上の枠も橙色の実線になる = 同じ色で結び付く)。 ⚠️ .opdw-b.on(青)と同じ強さでは**後ろに書いてある青が勝つ**ので、クラスを1つ多く重ねる */ .opdw-b.opdw-lockbtn.on{background:#c07000;border-color:#c07000;color:#fff} /* 🧰 道具。2026-08-18 batch137で**上部から右パネルの中へ引っ越した** (上に横たわっていると、絵を題名の真下まで詰められないため)。段の作りは今までどおり3段: ①何を描くか ②どう描くか(太さ・色・塗り・文字の大きさ) ③置いたものへの操作 */ .opdw-tb{display:flex;flex-direction:column;gap:5px;padding:7px 8px; background:#f2f6fa;border:1px solid #dbe5ee;border-radius:9px} .opdw-tbrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px} .opdw-tbrow+.opdw-tbrow{padding-top:5px;border-top:1px solid #e2eaf2} .opdw-lb{font-size:11.5px;color:#5b6b7b;min-width:26px} /* 選択中の案内。⭐ 2026-08-19 batch156: 4段目(側貌などの小物の段)の中に**同じ行で**入る (batch137の「自分だけの行に落とす」flex:1 1 100% は、段が増えた今はやめた) */ .opdw-hint{font-size:11.5px;color:#1a73e8;flex:1 1 auto;min-width:0;text-align:left} .opdw-hint:empty{display:none} /* 📝 文字まわりは小さめに(先生の指示「テキストツールは必要ですが、少なめ・小さめで大丈夫」) */ .opdw-b.sm{padding:3px 7px;font-size:12px} /* 🧩 第3段階(batch130)のテンプレ図形の候補が並ぶ場所。空のあいだは何も見せない */ .opdw-tpl{display:flex;flex-wrap:wrap;gap:6px} .opdw-tpl:empty{display:none} /* 🙎 側貌写真を重ねる窓(2026-08-18 batch148)。 ⚠️ オペ記録の窓(.opdw-bg は z-index 2200)の**中**に出すので、 同じ重なりの文脈の中で前に来ればよい。四辺の青い棒を掴んで帯を決める */ .opdsp-bg{z-index:2300} .opdsp-crop{position:relative;margin:0 auto;max-width:520px;user-select:none;touch-action:none;line-height:0} .opdsp-crop img{display:block;width:100%;height:auto;-webkit-user-drag:none;border-radius:6px} .opdsp-mask{position:absolute;background:rgba(15,30,50,.55);pointer-events:none} .opdsp-h{position:absolute;background:#1a73e8;opacity:.9;touch-action:none;border-radius:3px} .opdsp-h.l,.opdsp-h.r{width:10px;top:0;height:100%;margin-left:-5px;cursor:ew-resize} .opdsp-h.t,.opdsp-h.b{height:10px;left:0;width:100%;margin-top:-5px;cursor:ns-resize} .opdsp-row{display:flex;flex-wrap:wrap;gap:7px;align-items:center;justify-content:center;padding:10px 4px 2px} .opdsp-ck{display:flex;align-items:center;gap:5px;font-size:12.5px;color:#3c4c5c;cursor:pointer} .opdw-b{border:1px solid #c6d3de;background:#fff;border-radius:7px;padding:7px 11px;font-size:13.5px; line-height:1.15;cursor:pointer;color:#22303c;white-space:nowrap} .opdw-b:hover{background:#eaf2f9} .opdw-b.on{background:#1a73e8;border-color:#1a73e8;color:#fff;font-weight:700} .opdw-col{padding:6px 9px} .opdw-sep{width:1px;align-self:stretch;background:#cfdae4;margin:0 3px} .opdw-z{font-size:12.5px;color:#4a5a6a;min-width:46px;text-align:center} /* 🖼 用紙。中で拡大するので外側はスクロールできる箱にする */ .opdw-view{flex:1;min-height:240px;overflow:auto;background:#8f9aa5;padding:10px;border-radius:8px; /* 🖼 b436: 右へ広げたぶん(--opdw-viewext)は右の余白にする = 紙の幅(紙全体の%)も位置も変わらない */ padding-right:calc(10px + var(--opdw-viewext,0px))} .opdw-paper{position:relative;margin:0 auto;background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.3)} .opdw-bg-img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none;pointer-events:none} /* ══ 🔍「図を大きく」の見方(2026-08-18 batch136 先生の画面設計のやり直し) ═══════════ 先生:「絵面が重要で大きくしたいです(スクロールしなくても全部見れるように)」 ⭐ 紙(.opdw-paper)は**いつも996x1412のまま**。切り取りの枠(.opdw-crop)が線画の区画の 大きさになり、中の紙を左上へずらすことで「区画だけを大きく」見せている。 → 実座標は1pxも変わらないので、描いた図形も・チェック欄も・焼くPNGも見方に左右されない。 ⚠️ 枠の大きさは JS が「箱の内側(余白20px)に丸ごと収まる」px で入れる = 100%ならスクロールが出ない */ /* ⚠️ 余白は 10 → 6px。ここを詰めたぶんだけ絵が大きく映る(JS側の OPD_VPAD と対) */ /* ⚠️ 2026-08-18 batch145: center → **safe center**。ただの center だと、拡大して中身が箱より 大きくなった時に**左へはみ出した分が掴めなくなる**(先生の「絵の左あたりを中心に持ってこよう と思ってもできずに困っている」の一因)。safe center は溢れた時だけ左詰めに切り替わるので、 スクロール・パンで左端まで行ける。溢れていない時は今までどおり真ん中に出る */ /* 🗄 2026-09-08 b353 先生の指示: 図のみの紙を右寄せ・左のグレーを図形の棚(利用者ごと・用紙ごと) safe center → **safe flex-end**: 紙(.opdw-crop)を箱の右端へ寄せ、左右に分かれていた灰色を左に1つにまとめる (safe を残すのは batch145 と同じ理由 = 拡大して溢れた時に左端まで送れる)。 棚(.opdw-shelf)= 紙の左に敷く灰色。紙(.opdw-paper)の子として x<0 に置く(JSが幅を入れる)。 棚がある時の枠(.opdw-crop.zu.shelf)は白地と影を消す(棚は灰色・紙は紙の白がそのまま出る)。 ⚠️ 説明文は無し。左上に極小の「棚」の1文字だけ(.opdw-shelf-lbl) */ .opdw-view.zu{display:flex;align-items:flex-start;justify-content:safe flex-end;padding:6px; padding-right:calc(6px + var(--opdw-viewext,0px))} .opdw-crop.zu{position:relative;overflow:hidden;flex:0 0 auto;background:#fff;border-radius:3px; box-shadow:0 4px 18px rgba(0,0,0,.3)} .opdw-crop.zu.shelf{background:transparent;box-shadow:none} .opdw-shelf{position:absolute;top:-10%;height:120%;background:#8f9aa5;pointer-events:none} .opdw-shelf-lbl{position:absolute;left:4px;top:1px;z-index:3;font-size:9px;line-height:1;color:#dfe5eb; pointer-events:none;user-select:none} .opdw-crop.zu .opdw-paper{box-shadow:none;margin:0} /* 文字を白く塗った下絵。文字入りの版下(.opdw-bg-img)の上に重ねる。 ⚠️ 下の版下は消さない(紙の高さの元であり、保存で焼くのはそちら) */ .opdw-bg-zu{position:absolute;left:0;top:0;width:100%;height:auto; user-select:none;-webkit-user-drag:none;pointer-events:none} /* 「図を大きく」では紙の□とラベルを消してあるので、押せる欄も出さない(要素は残す) */ .opdw-ck.hid{display:none} /* 🔍 見方の切り替えボタン「図のみ / 紙全体」。⚠️ 2026-08-23 batch182 先生の指示で道具の箱の3段目から **紙の右上の縦並び(.opdw-paperbtns)の「固定」と「選択」の間**へ移した(margin-left:auto は不要に) */ .opdw-viewtg{background:#eef4fb;border-color:#9dbfe4;font-weight:700} .opdw-viewtg:hover{background:#dceafa} .opdw-cv{position:absolute;left:0;top:0;width:100%;height:100%;touch-action:none;cursor:crosshair} /* ☑ 押すと✓が入る欄・執刀医サインの欄(2026-08-17 先生の回答)。 位置は用紙の実座標を%に直して重ねてあるので、拡大しても紙の□とずれない。 ⚠️ 座標表(OPE_CHECKS)が空のあいだは1つも出ない */ .opdw-ck{position:absolute;cursor:pointer;border-radius:3px;background:transparent; box-shadow:inset 0 0 0 2px transparent;transition:background .12s,box-shadow .12s} .opdw-ck:hover{background:rgba(26,115,232,.16);box-shadow:inset 0 0 0 2px rgba(26,115,232,.55)} .opdw-ck.on:hover{background:rgba(192,57,43,.14);box-shadow:inset 0 0 0 2px rgba(192,57,43,.5)} /* 📝 押すと文字が打てる欄(鼻翼基部軟骨移植の 右/左。2026-08-18 先生の指示)。 何も入っていない時も「ここは打てる」と分かるよう、うっすら下線を敷く */ .opdw-ck.txt{cursor:text;box-shadow:inset 0 -1px 0 0 rgba(26,115,232,.28)} .opdw-ck.txt:hover{background:rgba(26,115,232,.12);box-shadow:inset 0 0 0 2px rgba(26,115,232,.5)} /* ⭕ 2026-09-10 b409: 押すと**太い丸**が付く語(肋軟骨の右6番/右7番・耳介/耳珠の右左)。 □ではなく語そのものを押すので、ホバーの光も語の形(角の丸い横長)に合わせる。 ⚠️ 案内の文字・帯は足さない(先生の好み)。丸そのものは紙のキャンバスに描かれる */ /* ⭕ 2026-09-10 b411: 丸の欄は**押し所の板を敷かない**(pointer-events:none)。 敷くと「右7番」などの語の上から**ペンを引き始められなくなる**(b409 で入った不具合・b356 の検査が3件不合格)。 丸を付けるのは紙(canvas)の側で「動かさずに押しただけ」を見て行う(main.tsx の up() の中)。 □のチェックと ✕ の案内は今までどおり板で受ける(小さいので引き始めの邪魔にならない) */ .opdw-ck.cir{border-radius:999px;pointer-events:none} /* ✕ 2026-09-10 b409: 語の右うしろの**小さい赤い×**(押すと語に横線が入る=今回はしなかった)。 小さく・目立ちすぎないよう、ふだんは薄く出し、ホバーと「入っている時」だけはっきりさせる */ .opdw-ck.xx{border-radius:3px;opacity:.42} .opdw-ck.xx:hover,.opdw-ck.xx.on{opacity:1} .opdw-ck.xx:hover{background:rgba(208,42,42,.14);box-shadow:inset 0 0 0 2px rgba(208,42,42,.5)} .opdw-ck.xx.on:hover{background:rgba(208,42,42,.14);box-shadow:inset 0 0 0 2px rgba(208,42,42,.5)} .opdw-xmark{display:block;width:100%;height:100%;pointer-events:none} /* 打っている最中の入力欄。欄より少し広く出す(小さい欄でも打ちやすいように) */ .opdw-cked{position:absolute;min-width:150px;font-size:14px;padding:2px 6px; border:2px solid #1a73e8;border-radius:6px;background:#fff;color:#111;z-index:3;box-shadow:0 3px 10px rgba(0,0,0,.25)} .opdw-cv.opdw-t-sel{cursor:default} /* ✋ 2026-08-18 batch145: 道具「◻消しゴム」「✋移動」を撤去した(先生の指示)ので、 その2つのカーソルの決まりも消した。代わりに**スペースキーを押している間**は どの道具でも「掴める手」になる(Photoshop・Illustratorと同じ流儀) */ .opdw-cv.pan,.opdw-view.pan{cursor:grab} .opdw-cv.pan:active,.opdw-view.pan:active{cursor:grabbing} .opdw-cv.opdw-t-text{cursor:text} /* 🫳 ゆがみ(2026-08-18 batch134)。ブラシの円はカーソルに追従(位置はJSがstyleを直接書く) */ .opdw-cv.opdw-t-warp{cursor:crosshair} /* 🧽 消しゴム(2026-08-18 batch149 で復活)。なぞった所だけを消す道具なので、 ブラシの円(.opdw-brush.er)で「どこまで消えるか」を先に見せる */ .opdw-cv.opdw-t-erase{cursor:crosshair} .opdw-brush{position:absolute;display:none;pointer-events:none;border-radius:50%; border:1.6px solid rgba(26,115,232,.9);box-shadow:0 0 0 1px rgba(255,255,255,.75),inset 0 0 0 1px rgba(255,255,255,.75)} .opdw-brush.er{border-color:rgba(224,32,32,.9);background:rgba(224,32,32,.08)} /* 🔄 四隅のすぐ外側にカーソルを置いた時(2026-08-18 batch149)。Photoshopと同じ「回す」印。 ⚠️ 付け外しはJSが classList で直接行う(Reactの再描画を起こさないため) */ .opdw-cv.rotcur{cursor:url('data:image/svg+xml;utf8,') 13 13,crosshair} .opdw-rng{width:110px;accent-color:#1a73e8} /* 📝 文字を打つ欄。押した所に出る(位置は用紙の実座標を%に直したもの)。 ⭐ 2026-08-18 batch149: