/* ============================================================ CAIA APP KIT — 管理画面共通UI（CAIA LAPI のフォーマットを標準化）対象: CHAT/FOR を除く全アプリ（MANAGER / GReview / GBP / Proof / NAS / CC / LAPI / 今後の新規） ------------------------------------------------------------ 使い方: 1) このCSSを読み込む 2) のように製品キーを指定（下の [data-caia] で製品色が入る） ※ 指定しない場合は :root の既定値（LAPI／LINEグリーン）が使われます 3) 構造は app-shell.html を参照レスポンシブ（3段）: - スマホ〜767px : サイドバー→下部タブバー化、1カラム、テーブル→カード化 - PC幅狭 768〜1179px: サイドバーはアイコンのみ（64px） - PC幅広 1180px〜 : サイドバー全幅（210px）、コンテンツ最大1440px ============================================================ */ /* ---------- 製品色（台帳 tokens.json と一致） ---------- */ :root{ --base:#06C755; --dark:#05803A; --wash:#E7F9EF; /* 既定=LAPI（LINEグリーン） */ --on-base:#fff; /* base塗りの上に置く文字色 */ --ground:#F3F4F6; --surface:#fff; --surface-2:#F8F9FA; /* 下地は中立グレー（LINE緑は彩度が高く、地まで緑にすると全体が緑がかる） */ --ink:#1A1D21; --ink-2:#565C63; --ink-3:#868D96; --rule:#E3E5E8; --rule-2:#EDEEF1; --side:#0F1512; --side-ink:#D6DCD8; --side-dim:#7C8580; --warn:#8A5A00; --warn-bg:#FAF2E2; --bad:#B3261E; --bad-bg:#FBEBEA; --ok:#2E6B4F; --ok-bg:#E8F4EE; --nav-w:210px; --nav-w-mini:64px; --content-max:1440px; --radius:10px; } /* 製品ごとの色（html/body に data-caia="" を付ける） */ [data-caia="chat"],[data-caia="for"]{--base:#7A6BB5;--dark:#473C73;--wash:#EEEBF7; --ground:#F5F4F9;--surface-2:#FAF9FC;--ink:#1F1B2E;--ink-2:#5B5470;--ink-3:#8B849E; --rule:#E4E1EC;--rule-2:#EFEDF4;--side:#1A1626;--side-ink:#D8D3E6;--side-dim:#837C99} [data-caia="mgr"]{--base:#0E7490;--dark:#155E75;--wash:#ECFEFF; --ground:#F1F6F8;--surface-2:#F7FBFC;--ink:#16242A;--ink-2:#4C6169;--ink-3:#7C919A; --rule:#DCE7EA;--rule-2:#EAF1F3;--side:#0D1A1F;--side-ink:#CFE1E7;--side-dim:#6E8489} [data-caia="gr"]{--base:#FBBC04;--dark:#8A5A00;--wash:#FEF6E0; --ground:#FAF7EF;--surface-2:#FDFBF6;--ink:#26200F;--ink-2:#665C42;--ink-3:#968B72; --rule:#E9E2D2;--rule-2:#F2EDE2;--side:#1D1809;--side-ink:#E6DCC3;--side-dim:#8C8168; /* ゴールドは白地で1.71しかない → base塗りの上は黒文字にする */ --on-base:#1F2937; /* 既定の注意色(#8A5A00)がGRのdarkと同値でぶつかるため、注意だけ赤橙へ逃がす（台帳の一般則） */ --warn:#9A3412;--warn-bg:#FDEBE3} [data-caia="gbp"]{--base:#5D94CF;--dark:#385F94;--wash:#EAF1FA; --ground:#F2F5FA;--surface-2:#F8FAFD;--ink:#182231;--ink-2:#4E5E75;--ink-3:#7E8CA3; --rule:#DFE6F0;--rule-2:#ECF0F6;--side:#101724;--side-ink:#D3DEEE;--side-dim:#71809A} [data-caia="prf"]{--base:#DA7A0A;--dark:#92510A;--wash:#FDF3E2; --ground:#F9F5EF;--surface-2:#FCFAF6;--ink:#2A2015;--ink-2:#6B5A47;--ink-3:#9A8B78; --rule:#EBE2D5;--rule-2:#F3EDE4;--side:#1F1710;--side-ink:#E6D9C6;--side-dim:#8E7F6C} [data-caia="nas"]{--base:#546A7B;--dark:#3A4B58;--wash:#EEF1F4; --ground:#F3F5F7;--surface-2:#F9FAFB;--ink:#1A2027;--ink-2:#54606C;--ink-3:#87919C; --rule:#E1E6EA;--rule-2:#EDF0F3;--side:#141A20;--side-ink:#D5DDE4;--side-dim:#78848F} [data-caia="cc"]{--base:#D6455A;--dark:#9B2C3C;--wash:#FDEDEF; --ground:#FAF4F5;--surface-2:#FDF9FA;--ink:#2A1519;--ink-2:#6B4A50;--ink-3:#9A7A80; --rule:#EDDCDF;--rule-2:#F5EAEC;--side:#1F1114;--side-ink:#EAD2D6;--side-dim:#8E6E74; /* 製品色が赤系のため危険色を暗く倒す（台帳の一般則） */ --bad:#8F1D13;--bad-bg:#F6E4E2} [data-caia="lapi"]{--base:#06C755;--dark:#05803A;--wash:#E7F9EF; /* 下地は中立グレー。緑はブランド色（星・ボタン・アクティブ）だけに使う */ --ground:#F3F4F6;--surface-2:#F8F9FA;--ink:#1A1D21;--ink-2:#565C63;--ink-3:#868D96; --rule:#E3E5E8;--rule-2:#EDEEF1;--side:#0F1512;--side-ink:#D6DCD8;--side-dim:#7C8580} [data-caia="cam"]{--base:#7B4BA0;--dark:#592F79;--wash:#F3EBFA; --ground:#F5F3F7;--surface-2:#FAF9FB;--ink:#221D26;--ink-2:#5D5463;--ink-3:#908797; --rule:#E6E2E9;--rule-2:#F2F0F4;--side:#150F1A;--side-ink:#DCD5E2;--side-dim:#867891} [data-caia="short"]{--base:#A3339B;--dark:#741B6E;--wash:#FAEBF9; --ground:#F8F3F7;--surface-2:#FCF9FB;--ink:#241A22;--ink-2:#63535F;--ink-3:#94848F; --rule:#EBE0E8;--rule-2:#F3ECF1;--side:#1A0F18;--side-ink:#E4D4E0;--side-dim:#8B7686} [data-caia="cardex"]{--base:#2B4E8A;--dark:#17325F;--wash:#EAEFF8; --ground:#F2F4F9;--surface-2:#F8F9FC;--ink:#141A28;--ink-2:#4C5670;--ink-3:#7E879E; --rule:#DFE3EE;--rule-2:#ECEFF5;--side:#0E1626;--side-ink:#D2DAEA;--side-dim:#717C96} /* ---------- ベース ---------- */ *{box-sizing:border-box} html,body{height:100%} body{margin:0;background:var(--ground);color:var(--ink); font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",system-ui,sans-serif; font-size:14px;line-height:1.7;-webkit-text-size-adjust:100%} a{color:var(--base)} h1,h2,h3{line-height:1.45} /* ---------- シェル ---------- */ .app{display:grid;grid-template-columns:var(--nav-w) 1fr;min-height:100vh} .main{min-width:0;display:flex;flex-direction:column} /* サイドバー */ .nav{background:var(--side);padding:14px 0 14px;display:flex;flex-direction:column; position:sticky;top:0;height:100vh;overflow-y:auto} .nav .wordmark{font-family:'Futura','Jost','Century Gothic',sans-serif;font-weight:700;letter-spacing:.1em; color:#fff;padding:0 18px;display:flex;align-items:center;gap:8px;font-size:15px} .nav .wordmark .lite{font-weight:300} .nav .wordmark .name,.nav .wordmark .lite{position:relative;left:-12px} /* 星に寄せる */ .nav .star{width:34px;height:34px;display:inline-flex;flex:none;position:relative;left:-5px;top:-1px} .nav-tenant{font-size:10.5px;color:var(--side-dim);padding:11px 18px 14px;letter-spacing:.03em} .nav .grp{font-family:'Futura','Jost',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.15em; text-transform:uppercase;color:var(--side-dim);padding:16px 18px 5px} .nav a.item{display:flex;align-items:baseline;gap:9px;padding:10px 18px;color:var(--side-ink); text-decoration:none;font-size:13.5px;border-left:3px solid transparent} .nav a.item:hover{background:rgba(255,255,255,.06)} .nav a.item.active{background:color-mix(in srgb,var(--base) 16%,transparent); border-left-color:var(--base);color:#fff;font-weight:700} .nav a.item .ic{width:18px;flex:none;display:inline-block;text-align:center; font-size:15px;line-height:1} /* ラベルとベースラインで揃える（字形ごとの高さ差を吸収） */ .navbadge{margin-left:auto;align-self:center;display:inline-flex;align-items:center;justify-content:center; background:var(--base);color:var(--on-base);font-size:10.5px;font-weight:700;line-height:1; border-radius:10px;padding:1px 6px 0;min-width:19px;height:19px;flex:none} /* 数字は下端が揃うので1px下げて視覚的に中央 */ .nav .foot{margin-top:auto;padding:12px 18px 0;font-size:10px;color:var(--side-dim)} /* トップバー */ .topbar{display:flex;align-items:center;gap:14px;padding:15px 14px 8px;background:var(--surface); border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:10} .topbar h1{margin:0;font-size:16px;font-weight:700;line-height:1.2;position:relative;top:1px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .topbar .right{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--ink-2); flex:none;white-space:nowrap} .topbar .right form{display:contents} /* フォーム包みでも横並びを保つ */ .topbar select{font:inherit;font-size:12.5px;border:1px solid var(--rule);border-radius:7px; padding:5px 8px;background:var(--surface-2);color:var(--ink);max-width:180px} .topbar .tb-title{flex:1;min-width:0;display:flex;align-items:center;gap:14px} .topbar .tb-brand{display:none} /* PCではサイドバーのワードマークがあるので不要 */ .topbar .sp-brand{display:none} .nav-btn{display:none} /* ハンバーガーはスマホのみ */ .nav-scrim{display:none} .nav-close{display:none} /* 閉じるボタンはスマホのドロワーのみ */ .nav .item.only-sp{display:none} /* ログアウト等はスマホのメニュー内だけ */ .content{padding:22px 14px 56px;max-width:var(--content-max);width:100%} /* ---------- 部品 ---------- */ .card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius); padding:18px 20px;margin-bottom:16px} .card h2{margin:0 0 12px;font-size:14.5px} .card-head{display:flex;align-items:center;gap:12px;margin:0 0 12px;flex-wrap:wrap} .card-head h2{margin:0} .card-head .sp{margin-left:auto} .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:700;font-size:13px; padding:8px 15px;border-radius:8px;border:1px solid var(--base);background:var(--base);color:var(--on-base); cursor:pointer;text-decoration:none;min-height:38px} .btn:hover{filter:brightness(.94)} .btn:active{transform:translateY(1px)} .btn:disabled{background:var(--rule);border-color:var(--rule);color:var(--ink-3);cursor:not-allowed;transform:none;filter:none} .btn.ghost{background:transparent;color:var(--dark);border-color:var(--rule)} .btn.ghost:hover{background:var(--surface-2);filter:none} .btn.danger{background:transparent;color:var(--bad);border-color:var(--bad);font-weight:700} .btn.danger:hover{background:var(--bad-bg);filter:none} .btn.sm{font-size:11.5px;padding:4px 10px;font-weight:600;min-height:30px} .btn.wide{width:100%} table.grid{width:100%;border-collapse:collapse;font-size:13px} .grid th{text-align:left;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3); font-weight:700;padding:0 12px 8px 0;border-bottom:1px solid var(--rule);white-space:nowrap} .grid td{padding:9px 12px 9px 0;border-bottom:1px solid var(--rule-2);vertical-align:middle} .grid tr:last-child td{border-bottom:none} .grid td.num,.grid th.num{font-variant-numeric:tabular-nums;text-align:right;padding-right:18px} .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700; padding:2px 9px;border-radius:11px;border:1px solid var(--rule);color:var(--ink-2); background:var(--surface-2);white-space:nowrap} .chip .sw{width:7px;height:7px;border-radius:50%} .chip.ok{color:var(--ok);border-color:var(--ok);background:var(--ok-bg)} .chip.warn{color:var(--warn);border-color:var(--warn);background:var(--warn-bg)} .chip.bad{color:var(--bad);border-color:var(--bad);background:var(--bad-bg)} .chip.base{color:var(--dark);border-color:var(--base);background:var(--wash)} input[type=text],input[type=email],input[type=password],input[type=url],input[type=number], input[type=date],input[type=search],select,textarea{ width:100%;border:1px solid var(--rule);border-radius:8px;padding:9px 11px;font:inherit; font-size:16px;background:var(--surface-2);color:var(--ink)} /* 16px = iOSの自動ズーム防止 */ @media(min-width:768px){ input[type=text],input[type=email],input[type=password],input[type=url],input[type=number], input[type=date],input[type=search],select,textarea{font-size:13.5px} } input:focus,select:focus,textarea:focus{outline:none;border-color:var(--base); box-shadow:0 0 0 3px color-mix(in srgb,var(--base) 16%,transparent)} textarea{resize:vertical;min-height:72px} label.fl{display:block;font-size:11px;color:var(--ink-3);font-weight:600;letter-spacing:.04em;margin:0 0 4px} .field{margin-bottom:13px} .help{font-size:11.5px;color:var(--ink-3);margin-top:4px} .flash{border-radius:8px;padding:10px 14px;font-size:13px;margin-bottom:14px} .flash.ok{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok)} .flash.err{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad)} .flash.warn{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn)} .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px} .tile{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:13px 16px} .tile .k{font-size:11px;color:var(--ink-3)} .tile .v{font-size:27px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.3} .tile.warn{border-color:var(--warn);background:var(--warn-bg)} .tile.bad{border-color:var(--bad);background:var(--bad-bg)} a.tile{text-decoration:none;color:inherit;display:block} a.tile:hover{border-color:var(--base)} .note{font-size:12px;color:var(--ink-3)} code{font-family:ui-monospace,Menlo,monospace;font-size:.88em;background:var(--rule-2);padding:1.5px 5px;border-radius:4px} .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .empty{border:1px dashed var(--rule);border-radius:var(--radius);padding:34px 20px;text-align:center;color:var(--ink-2)} .empty .big{font-size:30px;display:block;margin-bottom:8px;opacity:.5} /* 下部タブバー（スマホのみ表示） */ .tabbar{display:none} /* ============================================================ レスポンシブ 3段 ============================================================ */ /* --- PC幅狭 768〜1179px: サイドバーをアイコンのみに --- */ @media(min-width:768px) and (max-width:1179px){ .app{grid-template-columns:var(--nav-w-mini) 1fr} .nav .wordmark{justify-content:center;padding:0 8px;gap:0} .nav .wordmark .name,.nav .wordmark .lite{display:none} .nav-tenant,.nav .grp,.nav .foot{display:none} .nav a.item{justify-content:center;padding:12px 8px;gap:0;position:relative} .nav a.item .t{display:none} .nav a.item .ic{width:auto;font-size:17px} .navbadge{position:absolute;top:5px;right:9px;margin:0;padding:0 4px;font-size:9.5px;min-width:16px;height:16px} .content{padding:20px 14px 56px} .topbar{padding:12px 14px} } /* --- PC幅広 1180px〜: サイドバー全幅 --- */ @media(min-width:1180px){ .app{grid-template-columns:var(--nav-w) 1fr} } /* --- スマホ〜767px: サイドバー→下部タブバー、1カラム、テーブル→カード --- */ @media(max-width:767px){ .app{grid-template-columns:1fr} /* サイドバー → 左から出るドロワー（ハンバーガーで開閉・CSSのみ／JS不要） */ .nav{position:fixed;top:0;right:0;left:auto;width:266px;max-width:82vw;height:100vh;z-index:60; transform:translateX(100%);transition:transform .22s ease;box-shadow:0 0 30px rgba(0,0,0,.45)} #caia-nav:checked ~ .app .nav{transform:none} .nav-scrim{display:block;position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.45); opacity:0;pointer-events:none;transition:opacity .2s} #caia-nav:checked ~ .nav-scrim{opacity:1;pointer-events:auto} .nav .item.only-sp{display:flex;margin-top:auto;border-top:1px solid rgba(255,255,255,.12)} /* ドロワーではワードマークを出さない（背後のダーク帯と二重になるため）。テナント名から始める */ .nav .wordmark{display:none} .nav-tenant{padding:2px 18px 12px} .nav-close{display:inline-flex;align-items:center;justify-content:center;align-self:flex-end; width:34px;height:34px;margin:0 12px 4px;flex:none;cursor:pointer; border:1px solid rgba(255,255,255,.28);border-radius:9px;background:transparent; color:#fff;font-size:19px;line-height:1} .nav-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none; border:1px solid rgba(255,255,255,.32);border-radius:9px;background:transparent;color:#fff; font-size:16px;line-height:1;cursor:pointer;margin-left:auto;order:2} /* ダーク帯の右端 */ /* スマホのヘッダーは2段。1段目=ダーク帯（PCのサイドバーと同じ色）に製品名とアカウント操作、 2段目=白帯に画面タイトル。サイドバーが消えるぶんの「身元表示」をダーク帯が担う */ .topbar{padding:0;gap:0;flex-wrap:wrap;background:var(--side);border-bottom:none} .topbar .tb-brand{display:flex;align-items:center;gap:10px;width:100%;padding:9px 14px} .topbar .tb-title{width:100%;flex:none;padding:10px 14px;gap:10px; background:var(--surface);border-bottom:1px solid var(--rule)} .topbar h1{top:0;font-size:16px} .topbar .right{margin-left:auto;gap:8px;font-size:12px} .topbar .right .hide-sp{display:none} .topbar select{max-width:130px;font-size:16px} /* iOSズーム防止 */ /* スマホは製品名を出す（サイドバーのワードマークが無くなるため） */ .topbar .sp-brand{display:inline-flex;align-items:center;gap:6px;font-family:'Futura','Jost',sans-serif; font-size:12px;font-weight:700;letter-spacing:.06em;color:#fff;flex:none} .topbar .sp-brand .lite{font-weight:300} .topbar .sp-brand .star{width:26px;height:26px;display:inline-flex} .content{padding:16px 14px 78px;max-width:100%} /* 下部タブバーぶんの余白 */ .card{padding:15px 15px;border-radius:12px} .row2{grid-template-columns:1fr} .tiles{grid-template-columns:1fr 1fr;gap:10px} .tile .v{font-size:23px} .btn{min-height:44px} /* タップターゲット44px */ .btn.sm{min-height:34px} /* テーブル → カード化（を付ける） */ .grid.stack thead{display:none} .grid.stack,.grid.stack tbody,.grid.stack tr,.grid.stack td{display:block;width:100%} .grid.stack tr{background:var(--surface);border:1px solid var(--rule);border-radius:10px; padding:12px 14px;margin-bottom:10px} .grid.stack td{border:none;padding:3px 0;display:flex;gap:10px;align-items:baseline} .grid.stack td::before{content:attr(data-l);flex:none;min-width:6.5em;font-size:10.5px; letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:700} .grid.stack td.num{text-align:left;padding-right:0} /* 下部タブバー（サイドバーの主要項目を最大5つ） */ .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20; background:var(--side);border-top:1px solid rgba(255,255,255,.08); padding-bottom:env(safe-area-inset-bottom)} .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; padding:9px 4px 7px;color:var(--side-dim);text-decoration:none;font-size:10px;position:relative;min-height:54px} .tabbar a.active{color:#fff} .tabbar a.active::before{content:"";position:absolute;top:0;left:22%;right:22%;height:2px; background:var(--base);border-radius:0 0 2px 2px} .tabbar a .ic{font-size:18px;line-height:1} .tabbar .navbadge{position:absolute;top:5px;right:50%;margin-right:-20px} } /* --- 印刷 --- */ @media print{ .nav,.tabbar,.topbar .right{display:none} .app{grid-template-columns:1fr} .card{break-inside:avoid;border-color:#ccc} } /* ---------- 画面内の2ペイン（フォルダツリー・絞り込みなど） ---------- .nav はグローバルナビ（どの画面でも同じ）。フォルダツリーやタグ絞り込みは「その画面に属するもの」なので .content の中に置く。 .nav に混ぜると、テナントごとに増減する項目でナビの高さが青天井になり、スマホのドロワー／タブバーの設計も壊れる。 */ .split{display:grid;gap:14px;align-items:start} @media(min-width:1000px){ .split{grid-template-columns:var(--pane-w,220px) minmax(0,1fr)} } .pane{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius); padding:12px 10px;min-width:0} .pane>summary{list-style:none;cursor:pointer;font-size:12.5px;font-weight:700; display:flex;align-items:center;gap:7px;padding:2px 4px} .pane>summary::-webkit-details-marker{display:none} .pane>summary::after{content:"▾";margin-left:auto;color:var(--ink-3);font-size:11px} .pane[open]>summary::after{content:"▴"} .pane-head{font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--ink-3); padding:2px 6px 8px} /* ツリー（フォルダ・タグ）。深さは .tree .d1 / .d2 で付ける */ .tree{display:flex;flex-direction:column;gap:1px} .tree a{display:flex;align-items:baseline;gap:7px;padding:6px 8px;border-radius:7px; color:var(--ink-2);text-decoration:none;font-size:13px} .tree a:hover{background:var(--surface-2)} .tree a.active{background:var(--wash);color:var(--dark);font-weight:700} .tree a .n{margin-left:auto;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums} .tree a.active .n{color:var(--dark)} .tree .d1{padding-left:22px} .tree .d2{padding-left:36px} /* スマホでは畳む。

にすればJS不要で開閉できる */ @media(max-width:999px){ .pane{padding:8px 8px} .pane .tree{max-height:min(46vh,320px);overflow-y:auto} } /* ============================================================ パネル版（CAIA FOR の右パネルに読み込むアプリ用）使い方: ＋下の p-* 部品。サイドバー・タブバーは使わない。前提: 幅 320〜760px・高さいっぱい・パネル内で自前スクロール ============================================================ */ body.panel{height:100dvh;margin:0;display:flex;flex-direction:column; background:var(--surface);font-size:13px;overflow:hidden} /* 見出し帯: 星＋CAIA製品名（左） / テナント・アカウント（右） */ .p-head{flex:none;display:flex;align-items:center;gap:10px;padding:12px 14px; border-bottom:1px solid var(--rule);background:var(--surface)} .p-brand{display:inline-flex;align-items:baseline;gap:6px;flex:none; font-family:'Futura','Jost','Century Gothic',sans-serif;font-size:14px;letter-spacing:.08em} .p-brand .star{width:17px;height:17px;display:inline-flex;flex:none;align-self:center} .p-brand .name{font-weight:700;color:var(--dark)} .p-brand .lite{font-weight:300;color:var(--base)} .p-tenant{margin-left:auto;min-width:0;display:inline-flex;align-items:center;gap:5px; font-size:11.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* タブ（使う場合だけ） */ .p-head:has(+.p-tabs){border-bottom:none} /* タブが続くときは線を1本にまとめる */ .p-tabs{flex:none;display:flex;gap:6px;padding:2px 14px 11px;background:var(--surface); border-bottom:1px solid var(--rule)} .p-tabs button{flex:1;font:inherit;font-size:12px;cursor:pointer;border:1px solid var(--rule); background:var(--surface);color:var(--ink-2);border-radius:9px;padding:7px 4px;min-height:34px} .p-tabs button.on{background:var(--wash);border-color:var(--base);color:var(--dark);font-weight:700} /* 本体（ここだけスクロール） */ .p-body{flex:1;min-height:0;overflow-y:auto;padding:12px 14px 16px;background:var(--ground)} .p-body>*+*{margin-top:10px} /* 数値の並び（店舗数・要対応など） */ .p-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px} .p-stat{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:9px 12px 11px;text-align:center} .p-stat .k{display:block;font-size:10.5px;color:var(--ink-3);letter-spacing:.03em} .p-stat .v{display:block;font-size:24px;font-weight:800;line-height:1.2;margin-top:2px; font-variant-numeric:tabular-nums;letter-spacing:-.01em} .p-stat.warn{border-color:var(--warn);background:var(--warn-bg)} .p-stat.warn .v{color:var(--warn-ink)} /* 一覧の見出し */ .p-sec{font-size:11px;font-weight:700;color:var(--ink-3);letter-spacing:.04em;margin:14px 0 6px} /* 行（店舗・スレッド・依頼など）。a でも div でも可 */ .p-item{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left; background:var(--surface);border:1px solid var(--rule);border-radius:10px; padding:11px 12px;color:inherit;text-decoration:none} .p-item+.p-item{margin-top:8px} a.p-item:hover,button.p-item:hover{border-color:var(--base);background:var(--wash)} .p-item .b{min-width:0;flex:1} .p-item .t{display:block;font-weight:700;font-size:13px;line-height:1.5} .p-item .m{display:block;font-size:11px;color:var(--ink-3);line-height:1.6;margin-top:2px} .p-item .chip{flex:none;margin-top:1px} /* 下部の操作（ログアウト等）。本文の最後に置く */ .p-foot{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule); display:flex;justify-content:center} /* 読み込み中・エラー */ .p-load{flex:1;display:flex;align-items:center;justify-content:center;gap:9px; color:var(--ink-3);font-size:12.5px} .p-load .dot{width:12px;height:12px;border-radius:50%;background:var(--base); animation:p-pulse 1.4s ease-in-out infinite} @keyframes p-pulse{0%,100%{transform:scale(.7);opacity:.5}50%{transform:scale(1);opacity:1}} /* 幅が狭いパネル（〜380px）: 余白を詰めて2列を1列に */ @media(max-width:380px){ .p-head{padding:10px 11px} .p-body{padding:10px 11px 14px} .p-stats{grid-template-columns:1fr} .p-tenant{font-size:11px} }