/* ============================================================================= UI 刷新の表示層（2026-09-07・見本「01 / EDITORIAL」） ============================================================================= 見本: Codex ui-preview/options/a.html の最終層（利用者が 2026-09-07 に「これなら満足」と確定）。 色は theme.css（既定＝見本の青 #315BE6・他 6 テーマは事業所の選択）。ここで色相を固定しない。 ⚠ 変えるのは見た目だけ。DOM の id / class / ハンドラー / 業務ロジックには触れない。 ⚠ 節の順序: 1 骨組み（全画面）→ 2 見出し・ボタン（全画面）→ 3 利用者一覧 → 4 ホーム → 5 日報（スマホ）。 同じ画面を 2 か所から上書きしない。 ⚠ 既存のスマホ規則（index.html の @media 900px / 700px）は生かし、ここでは整えるだけ。 ============================================================================= */ @media screen { :root { --rf-ground:#f5f7fb; --rf-panel:#fff; --rf-text:#20324b; --rf-muted:#586b80; --rf-line:#dce4ef; --rf-line-strong:#bbc9db; --rf-field:#aabdc1; --rf-rule-dark:#253f66; --rf-font:'Segoe UI','Yu Gothic UI','Hiragino Kaku Gothic ProN',Meiryo,system-ui,sans-serif; --rf-r:4px; --rf-touch:44px; --rf-input:48px; --rf-small:.875rem; --rf-body:1rem; --rf-label:.9375rem; --rf-heading:1.25rem; --rf-title:1.875rem; --rf-number:2rem; --rf-s1:4px; --rf-s2:8px; --rf-s3:12px; --rf-s4:16px; --rf-s5:24px; --rf-s6:32px; --rf-s7:40px; --rf-radius:10px; --rf-control-radius:6px; } /* ---- 1. 骨組み（全画面共通）------------------------------------------------ */ #app{background:var(--rf-ground);color:var(--rf-text);font-family:var(--rf-font)} #app>aside{background:var(--rf-panel);border-right:1px solid var(--nav-line);box-shadow:none} .brand .lamp{display:none} /* 見本にランプは無い */ .brand .wordmark{font-size:10px;letter-spacing:.2em;font-weight:800;color:var(--accent);margin:0} .brand b#side-brand{font-size:24px;font-weight:800;letter-spacing:-.06em;line-height:1.3;color:var(--rf-text)} .brand .brand-accent{color:var(--accent)} .brand .org-box{background:transparent;border:0;border-radius:0} .brand .org-label{font-size:12px;letter-spacing:0;font-weight:500;color:var(--nav-muted);opacity:1;margin-bottom:4px} .brand #side-org-name{font-size:14px;font-weight:600;letter-spacing:0;line-height:1.6} .brand .co{font-size:12px;letter-spacing:0} #nav button{border-radius:0;color:#516773;font-weight:600;font-size:14px;gap:12px;box-shadow:none;min-height:var(--rf-touch)} #nav button:hover{background:var(--nav-hover)} #nav button.active{background:none;box-shadow:none;color:var(--accent);font-weight:750} #nav button.active .nav-count{color:var(--accent)} #nav .ico svg{width:18px;height:18px} #nav .nav-group{font-size:10px;letter-spacing:.12em;font-weight:600;color:var(--nav-muted);padding:0} #nav>.nav-group:first-child{display:none} /* 見本は最初の群に見出しを持たない */ .side-foot{border-top:1px solid var(--nav-line)} #topbar .series{font-size:13px;color:var(--rf-muted)} #topbar .topbar-right{font-size:12px;color:var(--rf-muted);border:1px solid var(--rf-line);border-radius:var(--rf-r);padding:4px 10px;background:var(--rf-panel)} #topbar .topbar-right:empty{display:none} @media(min-width:901px){ #app{grid-template-columns:208px minmax(0,1fr)} #app>aside{padding:32px 22px 20px;gap:0} .brand{padding:0 0 24px} .brand-slot{min-height:0;margin-top:5px} .brand .org-box{border-block:1px solid var(--nav-line);padding:18px 0;margin:0} #nav{display:grid;gap:6px;margin-top:20px} #nav button{padding:12px 4px} #nav .nav-group{margin:20px 4px 5px} #topbar{height:68px;padding:0 46px} #main{padding:0 46px 56px;max-width:1640px} .side-foot{padding-top:24px} } /* ---- 2. 見出し・ボタン・入力（全画面共通）--------------------------------- */ /* 2026-09-08 利用者の注文「見出し帯の高さが広すぎる」→ 上下の余白と h2 を詰めた（36/46px/30 → 20/34px/14） */ /* 2 回目「まだ広い。あと 2 割」→ 20/34px/14 → 12/30px/8（帯の高さ 120px → 92px） */ .view-head{align-items:flex-end;gap:20px;margin:12px 0 8px} .view-head .eyebrow{font-size:11px;letter-spacing:.13em;font-weight:700;color:#687c95;margin-bottom:0} .view-head h2{font-size:30px;font-weight:550;letter-spacing:-.03em;line-height:1.15;margin:0 0 2px} .view-head .desc{font-size:13px;line-height:1.4;color:var(--rf-muted);margin-top:0} .btn{border:1px solid #b7c8ca;border-radius:var(--rf-r);background:var(--rf-panel);color:var(--rf-text); padding:10px 16px;font-size:14px;font-weight:600;min-height:var(--rf-touch);box-shadow:none} .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff} .btn.primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)} .btn:focus-visible,#nav button:focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* ---- 2b. 共通部品（全画面）。見本の作法: 白い面・細い罫線・小さい角丸・影なし ---- */ #main .card{background:var(--rf-panel);border:1px solid var(--rf-line);border-radius:8px;box-shadow:none;padding:24px;margin-bottom:20px} #main .card h3{font-size:16px;font-weight:700;letter-spacing:.02em;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--rf-line);color:var(--rf-text)} #main .card h3::before{display:none} #main .card .muted{font-size:13px;line-height:1.8} /* 表（利用者一覧以外）。見出しは白地に副次色、行は薄い罫線、余白は広め */ #main table{font-size:14px} #main th{background:var(--rf-panel);color:var(--rf-muted);font-size:12px;font-weight:600;padding:12px 12px;border-bottom:1px solid var(--rf-line-strong);line-height:1.5} #main td{padding:16px 12px;border-bottom:1px solid #e4eaf2;vertical-align:middle} #main tr.clickable:hover td{background:var(--row-hover)} #main td .btn.sm{min-height:36px;padding:6px 12px;font-size:13px} /* バッジ（span.chip）。見本の badge: 小さい角丸・12px */ #main .chip{border-radius:var(--rf-r);font-size:12px;font-weight:600;padding:3px 8px} #main .chip.kaigo{background:#edf2f7;color:#46627b} #main .chip.shogai{background:#f0ebf6;color:#725b86} #main .chip.off{border-color:var(--rf-line-strong)} /* 入力（モーダルのフォーム・絞り込み） */ #main input[type="month"],#main select.flt,.frm input,.frm select,.frm textarea,#modal input:not([type=checkbox]):not([type=radio]),#modal select,#modal textarea{ border:1px solid var(--rf-field);border-radius:var(--rf-r);background:var(--rf-panel);color:var(--rf-text); min-height:var(--rf-touch);padding:10px 12px;font-size:15px;box-shadow:none; } .frm label{font-size:14px;font-weight:600;color:var(--rf-text);margin:16px 0 6px} .frm label:first-child{margin-top:0} .btn.sm{border-radius:var(--rf-r);min-height:36px;padding:6px 12px;font-size:13px} .btn.danger{color:var(--warn);border-color:#d9c3c3} .toolbar{gap:10px} .empty{background:#f2f5f8;border:1px solid #e1e7ed;border-left:3px solid #9bacbd;border-radius:8px;color:var(--rf-muted);font-size:15px;line-height:1.9;padding:24px 20px;text-align:left} /* 週間予定: 曜日の列は白い面と細い罫線、予定は淡いアクセント地に左の線（見本の appointment） */ .week-grid{gap:12px} .day-col{background:var(--rf-panel);border:1px solid var(--rf-line);border-radius:8px;padding:12px;min-height:160px;box-shadow:none} .day-col h4{font-size:12px;letter-spacing:.06em;color:var(--rf-muted);text-align:left;padding-bottom:10px;border-bottom:1px solid var(--rf-line);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between} .day-col h4 .add{float:none;color:var(--accent);font-size:20px;line-height:1;min-height:0;padding:0 2px} .sched-item{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 22%,white);border-left:4px solid var(--accent);border-radius:var(--rf-r);padding:10px;margin-bottom:8px;font-size:12px;line-height:1.55;color:var(--rf-text)} .sched-item b{font-size:15px;margin:3px 0} .sched-item .tm{color:var(--accent-deep);font-weight:600;font-size:11px} .sched-item .muted{font-size:11px} /* モーダル: 角は小さく、余白は広く、見出しは大きく */ #modal{border-radius:8px;padding:28px 28px 24px;max-width:560px;box-shadow:0 20px 50px #20324b1f} #modal h3{font-size:22px;font-weight:700;letter-spacing:-.01em;margin-bottom:8px} #modal .actions{margin-top:24px;padding-top:20px;border-top:1px solid var(--rf-line)} #confirm{border-radius:8px} /* 利用者の編集（ui.css の v2 部品）: 角と線を見本に揃える。構造・id は不変 */ [data-ui="v2"] .u-card{border-radius:8px;box-shadow:none;border:1px solid var(--rf-line)} [data-ui="v2"] .u-input,[data-ui="v2"] .u-select,[data-ui="v2"] .u-textarea{border-radius:var(--rf-r);border-color:var(--rf-field);box-shadow:none} [data-ui="v2"] .u-btn{border-radius:var(--rf-r);box-shadow:none} [data-ui="v2"] .u-title{letter-spacing:-.02em} [data-ui="v2"] .u-footbar{box-shadow:0 -1px 0 var(--rf-line)} /* ---- 3. 利用者一覧（.list-table を含む画面だけ）-------------------------- */ #app:has(#main .list-table){--ed-touch:var(--rf-touch)} /* 見本: 見出し → 濃い1本線 → 絞り込み（地の上・囲みなし）→ 白い表 */ #main:has(.list-table) .view-head{border-bottom:0;padding-bottom:0} #main:has(.list-table) .toolbar-row{ background:transparent;border:0;border-radius:0;box-shadow:none; border-top:2px solid var(--rf-rule-dark);padding:12px 0 0;margin:0 0 10px;gap:10px; } #main:has(.list-table) .toolbar-row .search{ flex:1 1 230px;max-width:none;border:1px solid var(--rf-field);border-radius:var(--rf-r); min-height:var(--rf-input);box-shadow:none;background:var(--rf-panel); } #main:has(.list-table) .toolbar-row .search input{font-size:16px;padding:11px 0} #main:has(.list-table) .seg{background:#e9eef6;border:0;border-radius:var(--rf-r);padding:4px} #main:has(.list-table) .seg button{border-radius:calc(var(--rf-r) - 1px);min-height:40px;font-size:14px;color:var(--rf-muted);background:transparent} #main:has(.list-table) .seg button.on{background:var(--rf-panel);color:var(--accent);box-shadow:0 2px 5px #223b4510} #main:has(.list-table) select.flt{border:1px solid var(--rf-field);border-radius:var(--rf-r);min-height:var(--rf-input);min-width:105px;font-size:14px} #main:has(.list-table) .attn{border:1px solid #b7c8ca;border-radius:var(--rf-r);min-height:var(--rf-input);background:var(--rf-panel);font-weight:600} #main:has(.list-table) .attn.on{border-color:var(--accent);color:var(--accent)} #main:has(.list-table) .applied{margin:0 0 14px;font-size:13px;color:var(--rf-muted)} #main:has(.list-table) .fchip{border-radius:var(--rf-r);border-color:var(--rf-line-strong)} #main:has(.list-table) .list-card{background:var(--rf-panel);border:0;border-radius:0;box-shadow:none;padding:0;overflow:visible} #main:has(.list-table) .list-card:focus-visible{outline:2px solid var(--accent);outline-offset:4px} #main:has(.list-table) .list-table{width:100%;font-size:14px;table-layout:auto} #main:has(.list-table) .list-table th{ background:var(--rf-panel);color:var(--rf-muted);font-size:12px;font-weight:600;line-height:1.5; padding:12px 16px;border-bottom:1px solid var(--rf-line-strong); } /* 2026-09-08 利用者の注文「行の高さを狭く」: 上下 28px → 12px（行 103px → 約 63px）。丸は 40 → 32px */ #main:has(.list-table) .list-table td{height:auto;padding:12px 16px;border-bottom:1px solid #e4eaf2;vertical-align:middle;font-size:14px} #main:has(.list-table) .list-table th.c-act{position:relative} #main:has(.list-table) .list-table th.c-name{width:28%;min-width:225px} #main:has(.list-table) .list-table .c-scheme{min-width:104px} #main:has(.list-table) .list-table .c-lvl{min-width:120px} #main:has(.list-table) .list-table .c-exp{min-width:155px} #main:has(.list-table) .list-table .c-plan{min-width:120px} #main:has(.list-table) .list-table .c-act{width:64px;min-width:64px} /* 氏名: 氏名 ＋ ふりがな（見本の .identity）。イニシャルの丸は 2026-09-08 に利用者の判断で外した */ #main:has(.list-table) .identity{display:flex;align-items:center;gap:12px;min-width:190px} #main:has(.list-table) .identity-text{min-width:0} #main:has(.list-table) .rowname{font-size:15px;font-weight:700;line-height:1.4;white-space:normal;overflow-wrap:anywhere} #main:has(.list-table) .kana{font-size:12px;color:var(--rf-muted);line-height:1.4;margin-top:1px;white-space:normal;overflow-wrap:anywhere} #main:has(.list-table) .list-table td[data-th="制度"], #main:has(.list-table) .list-table td[data-th="要介護度・区分"], #main:has(.list-table) .list-table td[data-th="計画書"]{white-space:nowrap} #main:has(.list-table) .list-table td[data-th="認定・支給決定 期限"]{white-space:nowrap;font-variant-numeric:tabular-nums} #main:has(.list-table) .list-table .dt{font-size:14px;white-space:nowrap} #main:has(.list-table) .list-table .left{white-space:nowrap} #main:has(.list-table) .chip{border-radius:var(--rf-r);font-weight:600;font-size:12px;padding:3px 8px} #main:has(.list-table) .kebab{border-radius:var(--rf-r);width:40px;height:40px;background:#edf2fc;color:var(--accent);border:0} #main:has(.list-table) .rowmenu{border-radius:var(--rf-r);box-shadow:var(--lift-lg)} #main:has(.list-table) .rowmenu button{border-radius:calc(var(--rf-r) - 1px)} #main:has(.list-table) .state{padding:56px 24px} /* 中間幅: 表を圧縮せず、一覧の領域だけ横に流す（ページ全体は動かさない） */ @media(max-width:1100px){ #main:has(.list-table) .list-card{overflow-x:auto;overscroll-behavior-x:contain} #main:has(.list-table) .list-table{min-width:850px} #main:has(.list-table) .view-head h2{font-size:28px} } /* ---- 4. ホーム（.stat-row を含む画面）。中身の整えだけ。骨組みは 1 節が持つ ---- */ #main:has(.stat-row){display:flex;flex-direction:column;align-self:flex-start;font-size:var(--rf-body)} #main:has(.stat-row)>.view-head{order:0} #main:has(.stat-row)>.card{order:1;margin-bottom:24px;padding:28px;box-shadow:none;border:1px solid var(--rf-line);border-radius:var(--rf-radius)} #main:has(.stat-row)>.stat-row{order:2;margin:0;background:transparent;border:0;padding:0;gap:12px;grid-template-columns:repeat(5,minmax(0,1fr))} #main:has(.stat-row) .stat{--metric:var(--accent-deep);--metric-bg:var(--accent-soft);background:var(--metric-bg);padding:20px;border:1px solid color-mix(in srgb,var(--metric) 18%,white);border-radius:12px;box-shadow:none;min-width:0} #main:has(.stat-row) .stat::before{display:none} #main:has(.stat-row) .stat .lbl{font-size:var(--rf-small);color:#465a69;line-height:1.65;min-height:46px;margin-bottom:8px} #main:has(.stat-row) .stat .val{font-size:clamp(1.375rem,2.2vw,2rem);color:var(--metric);font-weight:750;letter-spacing:-.025em;font-variant-numeric:tabular-nums;line-height:1.5;overflow-wrap:anywhere} #main:has(.stat-row) .stat .val small{font-size:var(--rf-small);margin-left:4px} #main:has(.stat-row) .card h3{font-size:var(--rf-heading);margin-bottom:20px;letter-spacing:.025em;color:var(--rf-text)} #main:has(.stat-row) .card h3::before{display:none} #main:has(.stat-row) .empty{padding:32px 24px;min-height:120px;text-align:left;background:#f2f5f8;border:1px solid #e1e7ed;border-left:3px solid #9bacbd;border-radius:8px;color:var(--rf-muted);font-size:var(--rf-body);line-height:1.9} #main:has(.stat-row) table{font-size:var(--rf-body)} #main:has(.stat-row) td,#main:has(.stat-row) th{padding:16px 12px} @media(max-width:1100px){ #main:has(.stat-row)>.stat-row{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:24px} } /* ---- 5. 日報（スマホ・#appView）。id・ハンドラー・項目の並びは不変 ------------ */ body:has(#appView:not([hidden])){background:var(--rf-ground)} #appView{font-family:var(--rf-font);color:var(--rf-text);--ink-soft:var(--rf-muted)} #appView>header{background:var(--rf-panel);border-bottom:1px solid var(--rf-line);border-top:4px solid var(--accent);padding:24px max(20px,calc((100% - 760px)/2))} #appView .brand{font-size:22px;letter-spacing:0;color:var(--rf-text);white-space:normal;overflow:visible;font-weight:750} #appView .logout-link{font-size:var(--rf-small);min-height:44px;padding:8px 12px;white-space:nowrap;border:1px solid var(--rf-line);border-radius:var(--rf-control-radius)} #appView .head-row{margin-top:12px;gap:12px;flex-wrap:wrap} #appView .today-line{font-size:var(--rf-small);color:var(--rf-muted)} #appView .month-pill{font-size:var(--rf-small);background:var(--accent-soft);color:var(--accent-deep);border-radius:var(--rf-control-radius);padding:6px 12px} #appView .month-pill .num{font-size:var(--rf-body)} #appView>main{max-width:800px;padding:28px 20px 40px} #appView .card{border:1px solid var(--rf-line);border-top:3px solid var(--accent);border-radius:var(--rf-radius);padding:28px;box-shadow:none;margin-bottom:24px} #appView .card h2{font-size:var(--rf-heading);margin-bottom:24px;line-height:1.5;padding-bottom:18px;border-bottom:1px solid var(--rf-line);letter-spacing:.03em} #appView .card h2::before{display:none} #appView .field{margin-bottom:24px} #appView label{font-size:var(--rf-label);font-weight:600;color:var(--rf-text);letter-spacing:0;margin-bottom:8px;line-height:1.7} #appView input:not([type=hidden]):not([type=checkbox]):not([type=radio]),#appView select,#appView textarea{font-size:var(--rf-body);min-height:var(--rf-input);border:1px solid var(--rf-field);border-radius:var(--rf-control-radius);padding:12px;background:var(--rf-panel);color:var(--rf-text);line-height:1.5} #appView .grid2{gap:20px} #appView .hint{font-size:var(--rf-small);color:var(--rf-muted);line-height:1.85;margin-top:10px} #appView .svc-picked{min-height:56px;font-size:var(--rf-body);line-height:1.7;border:1px solid var(--rf-field);border-radius:var(--rf-control-radius);padding:14px;text-align:left} #appView .svc-picked:disabled{opacity:1;background:var(--rf-ground);color:var(--rf-muted);border-style:dashed} #appView .time-grid{padding:20px;background:#eef2fb;border:1px solid #d8e0f0;border-left:3px solid var(--accent);border-radius:8px;gap:0;margin-bottom:24px;grid-template-columns:1fr} #appView .time-grid label{color:#375777} #appView .time-grid .field:last-child{margin-bottom:0} #appView .time-grid .tsel{max-width:none;gap:10px} #appView .time-grid .now{min-height:48px;min-width:48px;font-size:var(--rf-body);border-radius:var(--rf-control-radius)} #appView .rec-box{border-radius:var(--rf-control-radius);border:1px solid var(--rf-line);margin-bottom:24px} #appView .rec-box>summary,#appView .item-group>summary{min-height:48px;padding:12px 14px;font-size:var(--rf-body);line-height:1.7} #appView .check-grid label{font-size:var(--rf-small)} #appView .seg{gap:12px} #appView .seg button{min-height:48px;font-size:var(--rf-small);line-height:1.7;border-radius:var(--rf-control-radius);padding:10px} #appView .save-btn{min-height:52px;font-size:var(--rf-body);border-radius:var(--rf-control-radius);box-shadow:none;background:var(--accent);color:white;border:1px solid var(--accent-deep)} #appView .mini-btn{min-height:44px;font-size:var(--rf-small);border-radius:var(--rf-control-radius)} #appView .est-line{padding:16px;margin:20px 0;border:1px solid var(--rf-line);border-radius:8px;background:#f2f4fa} #appView .day-total{font-size:var(--rf-body)} #appView .tab-btn{font-size:var(--rf-body);min-height:60px;padding:16px;line-height:1.5} #appView .ssheet-panel{padding:20px 20px calc(20px + env(safe-area-inset-bottom));border-radius:12px 12px 0 0} #appView .ssheet-x{min-width:44px;min-height:44px} /* 日報の下のタブ帯。日報固有の古い緑の変数（--accent-softer）を使わず、共通トークンで */ nav.tabs{border-top:1px solid var(--rf-line);background:var(--rf-panel)} .tab-btn{color:var(--rf-muted);font-weight:600} .tab-btn.active{color:var(--accent);border-top-color:var(--accent);background:var(--accent-soft)} /* ---- 6. 支援項目（service-items.html・#browse を持つ画面だけ）------------------ ⚠ この画面は theme.css →