/* UNITE2026 テーマ12 デモ */
:root{
  --teal:#1E8C9B; --teal-d:#166a76; --teal-l:#e6f4f6;
  --magenta:#FF16B0; --lime:#EAF930; --slate:#44546B;
  --ink:#1F2937; --muted:#5A5A5A; --line:#E3E7EB;
  --bg:#F5F7F8; --card:#fff;
  --line-green:#06C755; --line-bg:#8CABD8;
  --ok:#2E9E5B; --warn:#E08B00; --bad:#D64545;
  --r:14px; --shadow:0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased;
  font-size:14px; line-height:1.7;
}
button{font-family:inherit}
h1,h2,h3,h4{margin:0; font-weight:700; line-height:1.4}

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line);
}
.hdr-in{max-width:1280px; margin:0 auto; padding:12px 24px; display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px}
/* サービスロゴ「みつば」。マークは brand/build_logo.js が出す web-snippet.html の写し */
.brand .logo{display:flex; align-items:center; gap:8px; font-size:17px; font-weight:800; letter-spacing:.02em}
.brand .logo .mark{width:26px; height:26px; display:block; flex:none}
.brand .logo .nm{line-height:1}
.brand .sub{font-size:11px; color:var(--muted)}
.tabs{display:flex; gap:4px; margin-left:auto; background:#EDF1F3; padding:4px; border-radius:11px}
.tabs button{
  border:0; background:transparent; padding:8px 16px; border-radius:8px; cursor:pointer;
  font-size:13px; font-weight:600; color:var(--muted); transition:.15s; white-space:nowrap;
}
.tabs button:hover{color:var(--ink)}
.tabs button.on{background:#fff; color:var(--teal); box-shadow:0 1px 3px rgba(0,0,0,.10)}
.badge-demo{
  font-size:10px; font-weight:700; letter-spacing:.06em; color:#fff; background:var(--magenta);
  padding:3px 8px; border-radius:999px;
}

/* ---------- layout ---------- */
.wrap{max-width:1280px; margin:0 auto; padding:24px}
.pane{display:none}
.pane.on{display:block; animation:fade .28s ease}
@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.pane-head{margin-bottom:18px; max-width:860px}
.pane-head h2{font-size:20px}
.pane-head p{margin:6px 0 0; color:var(--muted); font-size:13px}

.split{display:grid; grid-template-columns:minmax(340px,392px) 1fr; gap:24px; align-items:start}
@media(max-width:980px){.split{grid-template-columns:1fr}}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.card-h{padding:14px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px}
.card-h h3{font-size:14px}
.card-h .tagline{font-size:11px; color:var(--muted); margin-left:auto}
.card-b{padding:18px}

/* ---------- phone / LINE ---------- */
.phone{
  width:392px; max-width:100%; border-radius:36px; background:#1a1a1a; padding:11px;
  box-shadow:0 20px 60px rgba(16,24,40,.22); position:sticky; top:88px;
}
.phone-screen{border-radius:27px; overflow:hidden; background:var(--line-bg); display:flex; flex-direction:column; height:706px}
.ph-status{background:#5B7BA6; color:#fff; font-size:10px; padding:7px 18px 3px; display:flex; justify-content:space-between}
.ph-nav{background:#5B7BA6; color:#fff; padding:6px 14px 10px; display:flex; align-items:center; gap:9px}
.ph-nav .av{width:26px;height:26px;border-radius:50%;background:#fff;display:grid;place-items:center}
.ph-nav .av .mk{width:17px;height:17px;display:block}
.ph-nav .nm{font-size:13px; font-weight:600}
.ph-nav .rt{margin-left:auto; opacity:.8; font-size:13px}
.chat{flex:1; overflow-y:auto; padding:14px 12px 8px; scroll-behavior:smooth}
.chat::-webkit-scrollbar{width:0}
.row{display:flex; margin-bottom:10px; align-items:flex-end; gap:6px}
.row.me{justify-content:flex-end}
.ava{width:30px;height:30px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.ava .mk{width:20px;height:20px;display:block}
.bub{
  max-width:250px; padding:9px 13px; border-radius:17px; font-size:13.5px; line-height:1.65;
  background:#fff; box-shadow:0 1px 1px rgba(0,0,0,.08); white-space:pre-wrap; word-break:break-word;
}
.row.me .bub{background:var(--line-green); color:#fff; border-radius:17px}
.bub .small{font-size:11.5px; color:var(--muted); display:block; margin-top:4px}
.row.me .bub .small{color:rgba(255,255,255,.85)}
.typing{display:flex; gap:4px; padding:12px 15px}
.typing i{width:6px;height:6px;border-radius:50%;background:#bbb;animation:bnc 1.1s infinite}
.typing i:nth-child(2){animation-delay:.15s} .typing i:nth-child(3){animation-delay:.3s}
@keyframes bnc{0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-4px);opacity:1}}

/* rich card inside chat */
.lcard{max-width:262px; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.12)}
.lcard .lc-h{padding:11px 13px 9px; background:linear-gradient(120deg,var(--teal),#2AA9B8); color:#fff}
.lcard .lc-h .t{font-size:13.5px; font-weight:700}
.lcard .lc-h .s{font-size:10.5px; opacity:.9}
.lcard .lc-b{padding:11px 13px; font-size:12.5px}
.lcard .lc-b .kv{display:flex; gap:8px; padding:3px 0; border-bottom:1px dashed #eee}
.lcard .lc-b .kv:last-child{border:0}
.lcard .lc-b .kv b{color:var(--muted); font-weight:600; min-width:56px; font-size:11.5px}
.lcard .why{background:var(--teal-l); border-radius:8px; padding:8px 10px; font-size:11.5px; margin-top:8px; color:var(--teal-d)}
.lcard .lc-f{display:flex; border-top:1px solid #eee}
.lcard .lc-f button{flex:1; border:0; background:#fff; padding:10px; font-size:12px; color:var(--teal); font-weight:600; cursor:pointer}
.lcard .lc-f button+button{border-left:1px solid #eee}
.lcard .lc-f button:hover{background:#f6fbfc}
.pill{display:inline-block; font-size:10px; padding:2px 7px; border-radius:999px; margin:2px 3px 0 0}
.pill.g{background:#E6F6EC; color:#1E7A45} .pill.y{background:#FDF3E0; color:#8A5A00}
.pill.r{background:#FCEBEB; color:#A32B2B} .pill.b{background:#E8F1FD; color:#20558F}

/* quick replies */
.qr{padding:0 10px 10px; display:flex; gap:6px; overflow-x:auto; flex:none}
.qr::-webkit-scrollbar{height:0}
.qr button{
  border:1px solid var(--line-green); background:#fff; color:#0a9c45; border-radius:999px;
  padding:7px 14px; font-size:12.5px; white-space:nowrap; cursor:pointer; flex:none; font-weight:600;
}
.qr button:hover{background:#f0fdf5}
.qr button.alt{border-color:#c9d3da; color:var(--muted)}
.ph-input{background:#fff; border-top:1px solid #e6e6e6; padding:8px 12px; display:flex; align-items:center; gap:8px; font-size:12px; color:#bbb; flex:none}
.ph-input .box{flex:1; background:#f2f2f2; border-radius:999px; padding:6px 12px}
.progress{height:3px; background:#e8e8e8; flex:none}
.progress i{display:block; height:100%; background:var(--line-green); width:0; transition:width .4s}

/* ---------- side explainer ---------- */
.explain .card+.card{margin-top:16px}
.note{font-size:12.5px; color:var(--muted)}
.kvlist{display:grid; gap:8px}
.kvrow{display:flex; gap:10px; font-size:12.5px; padding:7px 10px; background:#F7F9FA; border-radius:8px}
.kvrow b{min-width:96px; color:var(--slate); font-weight:600}
.kvrow.hit{background:var(--teal-l); animation:pop .5s}
@keyframes pop{from{transform:scale(.97); opacity:.4} to{transform:none; opacity:1}}
.radar-wrap{display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.legend{display:grid; gap:5px; font-size:12px}
.legend div{display:flex; gap:8px; align-items:center}
.legend .bar{height:6px; border-radius:3px; background:var(--teal); min-width:4px}
ul.tight{margin:0; padding-left:18px; font-size:12.5px; color:var(--muted)}
ul.tight li{margin:4px 0}
.spec{font-size:12px; color:var(--muted); border-left:3px solid var(--lime); padding:2px 0 2px 11px; margin-top:10px}

/* ---------- portal ---------- */
.seg{display:inline-flex; background:#EDF1F3; padding:3px; border-radius:9px; margin-bottom:16px}
.seg button{border:0; background:transparent; padding:7px 15px; border-radius:7px; font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer}
.seg button.on{background:#fff; color:var(--teal); box-shadow:0 1px 3px rgba(0,0,0,.1)}
.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}
.chip{border:1px solid var(--line); background:#fff; border-radius:999px; padding:6px 14px; font-size:12.5px; cursor:pointer; color:var(--muted)}
.chip.on{background:var(--teal); border-color:var(--teal); color:#fff; font-weight:600}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px}
.fc{background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column}
.fc-h{padding:14px 16px 10px; border-bottom:1px solid #f0f2f4}
.fc-h .nm{font-size:14.5px; font-weight:700}
.fc-h .loc{font-size:11.5px; color:var(--muted); margin-top:2px}
.fc-b{padding:12px 16px; flex:1; font-size:12.5px}
.fc-b .kv{display:flex; gap:8px; padding:4px 0}
.fc-b .kv b{min-width:74px; color:var(--muted); font-weight:600; font-size:11.5px; flex:none}
.fc-f{padding:10px 16px; background:#FAFBFC; border-top:1px solid #f0f2f4; display:flex; align-items:center; gap:10px; font-size:11.5px; color:var(--muted)}
.fc-f button{margin-left:auto; border:0; background:var(--teal); color:#fff; border-radius:8px; padding:7px 14px; font-size:12px; font-weight:600; cursor:pointer}
.fc-f button:hover{background:var(--teal-d)}
.matchbar{display:flex; gap:3px; margin-top:8px}
.matchbar i{height:5px; border-radius:3px; flex:1; background:#EDF1F3}
.matchbar i.on{background:var(--teal)}
.score{font-size:11px; color:var(--teal); font-weight:700}

/* admin */
.admin-grid{display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start}
@media(max-width:980px){.admin-grid{grid-template-columns:1fr}}
.field{margin-bottom:14px}
.field label{display:block; font-size:12px; font-weight:600; color:var(--slate); margin-bottom:5px}
.field .inp{border:1px solid var(--line); border-radius:9px; padding:9px 12px; font-size:13px; background:#fff}
.field .hint{font-size:11px; color:var(--muted); margin-top:4px}
.tick{display:flex; gap:8px; flex-wrap:wrap}
.tick span{border:1px solid var(--line); border-radius:8px; padding:6px 11px; font-size:12px; color:var(--muted)}
.tick span.on{background:var(--teal-l); border-color:var(--teal); color:var(--teal-d); font-weight:600}
.inbox{display:grid; gap:10px}
.inbox .it{border:1px solid var(--line); border-radius:10px; padding:11px 13px; font-size:12.5px; background:#fff}
.inbox .it .who{font-weight:700; font-size:12.5px}
.inbox .it .mt{font-size:11px; color:var(--muted)}
.nudge{background:#FFFBEB; border:1px solid #F5E3AF; border-radius:10px; padding:12px 14px; font-size:12.5px; color:#7A5A00}

/* ---------- dashboard ---------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:20px}
.kpi{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; box-shadow:var(--shadow)}
.kpi .l{font-size:11.5px; color:var(--muted)}
.kpi .v{font-size:30px; font-weight:800; line-height:1.2; margin-top:2px}
.kpi .v span{font-size:14px; font-weight:600; color:var(--muted); margin-left:2px}
.kpi .d{font-size:11.5px; font-weight:700; margin-top:2px}
.kpi .d.up{color:var(--ok)} .kpi .d.dn{color:var(--ok)}
.kpi .n{font-size:11px; color:var(--muted); margin-top:6px; border-top:1px dashed var(--line); padding-top:6px}
.dgrid{display:grid; grid-template-columns:1.15fr .85fr; gap:20px; align-items:start}
@media(max-width:1040px){.dgrid{grid-template-columns:1fr}}
table.heat{width:100%; border-collapse:collapse; font-size:12.5px}
table.heat th{font-weight:600; color:var(--muted); font-size:11.5px; padding:6px; text-align:center}
table.heat th:first-child{text-align:left}
table.heat td{padding:5px 6px; text-align:center}
table.heat td:first-child{text-align:left; color:var(--slate); font-weight:600}
.cell{border-radius:7px; padding:9px 0; font-weight:700; color:#fff}
.funnel{display:grid; gap:8px}
.fn{display:flex; align-items:center; gap:12px; font-size:12.5px}
.fn .lb{min-width:132px; color:var(--slate)}
.fn .track{flex:1; background:#EDF1F3; border-radius:6px; height:26px; overflow:hidden}
.fn .fill{height:100%; background:linear-gradient(90deg,var(--teal),#3FB6C4); border-radius:6px; display:flex; align-items:center; justify-content:flex-end; padding-right:9px; color:#fff; font-weight:700; font-size:12px}
.fn .num{min-width:54px; text-align:right; font-weight:800; color:var(--slate); font-size:13px}
.fn .pc{min-width:48px; text-align:right; color:var(--muted); font-size:11.5px}
.alist{display:grid; gap:10px}
.al{display:flex; gap:11px; padding:12px 14px; border-radius:10px; font-size:12.5px; line-height:1.65}
.al .dot{width:8px;height:8px;border-radius:50%; margin-top:7px; flex:none}
.al.high{background:#FDECEC} .al.high .dot{background:var(--bad)}
.al.mid{background:#FFF7E8} .al.mid .dot{background:var(--warn)}
.al.low{background:#EEF4FA} .al.low .dot{background:var(--slate)}
table.plain{width:100%; border-collapse:collapse; font-size:12.5px}
table.plain th{text-align:left; font-size:11.5px; color:var(--muted); font-weight:600; padding:8px 10px; border-bottom:1px solid var(--line)}
table.plain td{padding:9px 10px; border-bottom:1px solid #F2F4F6}
table.plain td:first-child{font-weight:600}
.flag{font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:999px}
.flag.bad{background:#FCEBEB; color:#A32B2B} .flag.ok{background:#E6F6EC; color:#1E7A45}

.footnote{margin-top:26px; font-size:11.5px; color:var(--muted); border-top:1px solid var(--line); padding-top:14px}


/* ロジックモデル（行政ダッシュボード） */
.lm{margin-bottom:14px}
.lm-h{border-left:4px solid #ccc;padding:2px 0 2px 8px;margin-bottom:6px;font-size:12.5px}
.lm-r{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:5px 0 5px 12px;border-bottom:1px solid #eee}
.lm-r .k{font-size:12.5px;color:#333}
.lm-r .v{font-size:13px;font-weight:700;color:#1F2937;text-align:right}
.lm-r .b{grid-column:1/3;font-size:11px;color:#8A8A8A}


/* 事業所ポータル：自動下書き */
.prefill{background:#EAF7F4;border-left:4px solid #14a08a;border-radius:6px;padding:12px 14px;margin-bottom:16px;font-size:13px;line-height:1.7;color:#1F2937}
.prefill b{color:#0d7a68}
.prefill-time{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:10px;background:#14a08a;color:#fff;font-size:11.5px;font-weight:700}
.auto{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:9px;background:#14a08a;color:#fff;font-size:10.5px;font-weight:700;vertical-align:middle}
.manual{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:9px;background:#F2A200;color:#fff;font-size:10.5px;font-weight:700;vertical-align:middle}