/* DESIGN.md v0.3（CAPXLE 共通デザイン設計書）の値。名前は DESIGN.md の colors と同じ。
   白い地・1px の線・主ボタンは墨・青は 1 色（リンクと選択）・朱は「要確認」だけ・丸ごと丸い物は作らない。 */
:root{--primary:#1A2130;--bg:#FFFFFF;--surface:#F6F8FA;--text:#1A2130;--muted:#687385;--accent:#2F6B8A;--accent-strong:#1F516B;--accent-soft:#E9F2F6;
--on-accent:#FFFFFF;--ink:#1A2130;--on-ink:#FFFFFF;--border:#E6E8EC;--line-ui:#7D8899;--ok:#1B7A4A;--ok-bg:#E6F4EC;--warn:#B8402B;--warn-bg:#FBEDE9;--bad:#B8402B;--bad-bg:#FBEDE9;
--r:6px;--r-s:4px;--shadow:0 4px 14px rgba(26,33,48,.08)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--primary:#E6E9EF;--bg:#0F1319;--surface:#161B23;--text:#E6E9EF;--muted:#9AA5B5;--accent:#6FB2D1;--accent-strong:#9ACBE2;--accent-soft:#172A35;--on-accent:#0B1218;--ink:#E6E9EF;--on-ink:#0F1319;--border:#262D38;--line-ui:#738096;--ok:#5FCB93;--ok-bg:#12291D;--warn:#EE7F67;--warn-bg:#2E1B17;--bad:#EE7F67;--bad-bg:#2E1B17;--shadow:none}}
:root[data-theme="dark"]{--primary:#E6E9EF;--bg:#0F1319;--surface:#161B23;--text:#E6E9EF;--muted:#9AA5B5;--accent:#6FB2D1;--accent-strong:#9ACBE2;--accent-soft:#172A35;--on-accent:#0B1218;--ink:#E6E9EF;--on-ink:#0F1319;--border:#262D38;--line-ui:#738096;--ok:#5FCB93;--ok-bg:#12291D;--warn:#EE7F67;--warn-bg:#2E1B17;--bad:#EE7F67;--bad-bg:#2E1B17;--shadow:none}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.75 Inter,"Noto Sans JP","Hiragino Sans","Yu Gothic",Meiryo,system-ui,sans-serif;font-feature-settings:"palt" 0}
a{color:var(--accent)}
header.top{background:var(--bg);border-bottom:1px solid var(--border);padding:0 16px;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
header.top b{font-size:15px;font-weight:600}
header.top .who{font-size:13px;color:var(--muted)}
nav.steps{display:flex;gap:4px;overflow-x:auto;padding:0 12px;background:var(--bg);border-bottom:1px solid var(--border);scrollbar-width:none}
nav.steps a{flex:none;text-decoration:none;color:var(--muted);padding:10px 10px 8px;font-size:14px;white-space:nowrap;border-bottom:2px solid transparent;min-height:44px;display:inline-flex;align-items:center;gap:4px;transition:color .15s}
nav.steps a b{font-weight:600;font-variant-numeric:tabular-nums}
nav.steps a.on{color:var(--accent-strong);border-bottom-color:var(--accent);font-weight:600}
nav.sub{display:flex;gap:4px;padding:0 12px;background:var(--surface);border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
nav.sub a{flex:none;text-decoration:none;color:var(--muted);padding:6px 10px;font-size:13px;min-height:44px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
nav.sub a.on{color:var(--accent-strong);font-weight:600;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.count{background:var(--warn-bg);color:var(--warn);border:1.5px solid var(--warn);border-radius:2px;font-size:11px;font-weight:700;padding:0 5px;line-height:1.5;font-variant-numeric:tabular-nums}
main{max-width:880px;margin:0 auto;padding:20px 16px 64px}
main.wide{max-width:1120px}
h1{font-size:24px;font-weight:600;margin:4px 0 8px;line-height:1.4}
h2{font-size:18px;font-weight:600;margin:28px 0 8px;line-height:1.5}
h3{font-size:15px;font-weight:600;margin:16px 0 6px}
p{margin:8px 0}
.lead{color:var(--muted)}
.card{background:var(--bg);border:1px solid var(--border);padding:16px;margin:14px 0}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row.end{justify-content:flex-end}
label{display:block;font-weight:600;margin:12px 0 4px}
input[type=text],input[type=email],input[type=password],input[type=datetime-local],input[type=search],textarea,select{width:100%;font:inherit;padding:9px 12px;min-height:44px;border:1px solid var(--line-ui);border-radius:var(--r);background:var(--bg);color:var(--text)}
textarea{min-height:120px;resize:vertical}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button,.btn{font:inherit;font-weight:600;border:1px solid var(--ink);background:var(--ink);color:var(--on-ink);padding:9px 18px;border-radius:var(--r);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;transition:background-color .15s,color .15s}
button.sub,.btn.sub{background:var(--bg);color:var(--text);border-color:var(--line-ui)}
button.link{background:transparent;border-color:transparent;color:var(--accent);padding:9px 8px}
button.danger{background:var(--bg);border-color:var(--line-ui);color:var(--warn)}
button.sm,.btn.sm{min-height:44px;padding:4px 12px;font-size:14px}
main a:not(.btn):not(.tag),a.tag{display:inline-flex;align-items:center;min-height:44px}
table.list td a.name{min-height:44px}
button[disabled],button[aria-disabled=true]{opacity:.5;cursor:not-allowed}
.vh{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.choice{border:1px solid var(--line-ui);border-radius:var(--r);padding:12px 14px;background:var(--bg);text-align:left;color:var(--text);font-weight:600;min-height:44px}
.choice.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-strong)}
.flash{padding:10px 14px;margin:12px 0;border-radius:var(--r-s)}
.flash.ok{background:var(--ok-bg);color:var(--ok)}
.flash.bad,.flash.warn{background:var(--warn-bg);color:var(--warn);border-left:3px solid var(--warn)}
.flash.band{margin:0;border-radius:0}
.small{font-size:13px;color:var(--muted)}
table.price{width:100%;border-collapse:collapse;margin:8px 0}
table.price td{padding:10px 6px;border-bottom:1px solid var(--border);vertical-align:top}
table.price td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
table.price tr.total td{border-bottom:3px double var(--text);border-top:1px solid var(--text);font-size:18px}
table.facts{width:100%;border-collapse:collapse}
table.facts th,table.facts td{padding:8px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top;font-size:14px;line-height:1.6}
table.facts th{width:30%;color:var(--muted);font-weight:600}
ol.guide{padding-left:22px}
ol.guide li{margin:8px 0}
mark.ng{background:var(--warn-bg);color:var(--warn);padding:0 3px;border-radius:2px;font-weight:700}
.bubble{padding:10px 14px;border-radius:var(--r);margin:8px 0;max-width:92%;white-space:pre-wrap;border:1px solid var(--border)}
.bubble.owner{background:var(--accent-soft);margin-left:auto;border-color:transparent}
.bubble.room{background:var(--bg)}
.big{font-size:28px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.3}
.stats{display:flex;flex-wrap:wrap;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stat{flex:1 1 130px;padding:10px 14px;border-left:1px solid var(--border)}
.stat:first-child{border-left:0;padding-left:0}
.stat span{display:block;font-size:12px;color:var(--muted)}
.tag{display:inline-flex;align-items:center;gap:4px;background:var(--accent-soft);color:var(--accent-strong);border-radius:var(--r-s);padding:0 8px;font-size:12px;font-weight:600;line-height:1.8}
.tag form{display:inline;margin:0}
.tag button{min-height:44px;min-width:44px;margin:-10px -12px -10px -4px;padding:0 4px;border:0;background:transparent;color:var(--accent-strong);font-size:14px}
.badge{display:inline-block;border-radius:var(--r-s);padding:0 8px;font-size:12px;font-weight:600;line-height:1.8;background:var(--surface);color:var(--muted);white-space:nowrap}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.acc{background:var(--accent-soft);color:var(--accent-strong)}
.stamp{display:inline-block;border:1.5px solid var(--warn);color:var(--warn);background:var(--warn-bg);border-radius:2px;font-size:11px;font-weight:700;padding:0 6px;line-height:1.6;transform:rotate(-2deg);white-space:nowrap}
.new{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:middle}
.drafts label.d{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--border);border-radius:var(--r);padding:10px;margin:8px 0;font-weight:400;cursor:pointer}
.drafts label.d.on{border-color:var(--accent);background:var(--accent-soft)}
.drafts label.d{position:relative}
.drafts input[type=radio]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.drafts label.d:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.drafts label.d:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
/* 一覧（友だち・配信・受け箱）：帳簿の表。狭い幅では 1 行ずつ縦に積む */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin:16px 0 0;overflow-x:auto}
.tabs a{flex:none;text-decoration:none;color:var(--muted);padding:8px 12px;min-height:44px;display:inline-flex;align-items:center;gap:6px;border-bottom:2px solid transparent}
.tabs a.on{color:var(--accent-strong);border-bottom-color:var(--accent);font-weight:600}
table.list{width:100%;border-collapse:collapse;font-size:13px;line-height:1.5}
table.list th{background:var(--surface);color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.06em;text-align:left;padding:8px;position:sticky;top:0}
table.list td{padding:10px 8px;border-bottom:1px solid var(--border);vertical-align:top}
table.list td.n,table.list th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.list tr.sel td{background:var(--accent-soft)}
table.list tr.todo td:first-child{border-left:3px solid var(--warn)}
table.list td a.name{font-weight:600;font-size:15px}
.acts{display:flex;gap:6px;flex-wrap:wrap}
.acts form{margin:0}
.tbl{overflow-x:auto}
.find{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:10px;align-items:end}
.find label{margin:0 0 4px}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.cols .side{order:2}
.thread{display:flex;flex-direction:column;gap:6px}
.msg{max-width:88%;padding:8px 12px;border-radius:var(--r);white-space:pre-wrap;border:1px solid var(--border);background:var(--bg)}
.msg.owner{align-self:flex-end;background:var(--accent-soft);border-color:transparent}
.msg .meta{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.msg.owner .meta{color:var(--accent-strong)}
.phone{background:#7494c0;border-radius:18px;padding:12px;max-width:360px}
.phone .m{background:#fff;border-radius:14px;padding:8px 12px;margin:8px 0;max-width:85%;color:#222;white-space:pre-wrap;font-size:14px}
.phone .m.reply{background:#cdf0b9}
/* LINE の見た目の見本（第三者の画面の例えなので、LINE らしい色は見本の中だけ） */
.pv{margin:12px 0}
.pv-tabs{display:flex;gap:4px;margin-bottom:10px}
.pv-tabs button{background:var(--bg);color:var(--text);border-color:var(--line-ui);min-height:44px;padding:4px 12px;font-size:14px}
.pv-tabs button[aria-selected=true]{background:var(--accent-soft);color:var(--accent-strong);border-color:var(--accent)}
.pv-grid{display:flex;gap:20px;flex-wrap:wrap}
.pv-grid>div[hidden]{display:none}
.ph{background:#1f2430;border-radius:28px;padding:10px;width:290px;max-width:100%}
.ph .scr{background:#fff;border-radius:20px;overflow:hidden;color:#111;font-size:13px;line-height:1.5;min-height:320px;display:flex;flex-direction:column}
.ph .bar{background:#f7f8fa;border-bottom:1px solid #e3e6ea;padding:8px 12px;font-weight:700;font-size:13px;display:flex;justify-content:space-between}
.ph .talk{background:#8ca7d2;flex:1;padding:10px;display:flex;flex-direction:column;gap:6px}
.ph .day{align-self:center;background:rgba(0,0,0,.6);color:#fff;border-radius:10px;font-size:11px;padding:0 8px}
.ph .who{display:flex;gap:6px;align-items:flex-start}
.ph .av{flex:none;width:30px;height:30px;border-radius:50%;background:#dfe5ee;color:#2c364b;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:12px}
.ph .nm{font-size:11px;color:#101a30}
.ph .b{background:#fff;color:#111;border-radius:4px 14px 14px 14px;padding:8px 10px;white-space:pre-wrap;word-break:break-word;max-width:200px}
.ph .b a,.ph .b u{color:#1a5fb4;text-decoration:underline}
.ph .t{font-size:11px;color:#101a30;align-self:flex-end}
.ph .item{display:flex;gap:10px;padding:10px 12px;border-bottom:1px solid #eceff3;align-items:center;background:#fff}
.ph .item .av{width:40px;height:40px}
.ph .item .tx{flex:1;min-width:0}
.ph .item .tx b{display:block;font-size:13px}
.ph .item .tx span{display:block;color:#566070;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.ph .item .tm{font-size:11px;color:#566070;align-self:flex-start}
.ph .item .u{font-style:normal;background:#046b2e;color:#fff;border-radius:10px;font-size:10px;padding:0 6px;font-weight:700;display:inline-block;margin-top:2px}
.ph .item.dim .tx b{color:#3d4654}
@media (max-width:760px){

.find{grid-template-columns:1fr 1fr}.find .q{grid-column:1/3}
.cols{grid-template-columns:1fr}.cols .side{order:-1}
table.list thead{position:absolute;left:-9999px}
table.list,table.list tbody,table.list tr,table.list td{display:block;width:100%}
table.list tr{border-bottom:1px solid var(--border);padding:8px 0}
table.list td{border:0;padding:2px 8px}
table.list td[data-l]::before{content:attr(data-l) "：";color:var(--muted);font-size:12px}
table.list td.n{text-align:left}
table.list tr.todo{border-left:3px solid var(--warn)}
table.list tr.todo td:first-child{border-left:0}
table.list tr.sel{background:var(--accent-soft)}
table.list tr.sel td{background:transparent}
}
@media (max-width:520px){h1{font-size:20px}main{padding:16px 16px 56px}.row>*{flex:1 1 auto}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}