/* Layout: 方眼の地に案件カード一覧。開くと入力フォーム＋図面の2カラム。 */
:root{
  --paper:#f4f7fa; --surface:#ffffff; --ink:#16202c; --muted:#5a6778; --line:#d6dde6; --line-strong:#9fadbd;
  --accent:#1d5fa6; --accent-ink:#ffffff; --accent-soft:#e3edf8; --grid:rgba(29,95,166,.06);
  --ok:#1d7a4b; --ok-soft:#e1f2e8; --warn:#a86400; --warn-soft:#fbefd9; --bad:#b3261e; --bad-soft:#fbe4e2;
  --f-display:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  --f-body:"Noto Sans JP","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --r:6px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0f141a; --surface:#161d26; --ink:#e3e9f0; --muted:#94a2b3; --line:#283340; --line-strong:#45546a;
  --accent:#6aa6e8; --accent-ink:#0b1622; --accent-soft:#1a2b3f; --grid:rgba(106,166,232,.05);
  --ok:#53c08a; --ok-soft:#163326; --warn:#e3a640; --warn-soft:#3a2b12; --bad:#f17a70; --bad-soft:#3d1c1a; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0f141a; --surface:#161d26; --ink:#e3e9f0; --muted:#94a2b3; --line:#283340; --line-strong:#45546a;
  --accent:#6aa6e8; --accent-ink:#0b1622; --accent-soft:#1a2b3f; --grid:rgba(106,166,232,.05);
  --ok:#53c08a; --ok-soft:#163326; --warn:#e3a640; --warn-soft:#3a2b12; --bad:#f17a70; --bad-soft:#3d1c1a; color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:14px;line-height:1.6;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:20px 20px}
[hidden]{display:none !important}
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px;padding-block:0 48px}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.lbl{font-size:11px;letter-spacing:.06em;color:var(--muted)}
.hint{font-size:12px;color:var(--muted)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:12px;padding-block:10px;flex-wrap:wrap}
.top h1{font-size:19px}
.top small{font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.top .who{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.btn{border:1px solid var(--line-strong);background:var(--surface);padding:6px 12px;border-radius:var(--r);font-weight:500;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;text-decoration:none}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.08);color:var(--accent-ink)}
.btn.ghost{border-color:transparent;background:none}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn.sm{padding:3px 8px;font-size:12px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-block:20px 12px}
.toolbar input[type=search]{flex:1 1 240px;min-width:0;padding:7px 10px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface)}
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden;background:var(--surface);flex-wrap:wrap}
.seg button{border:0;background:none;padding:6px 10px;font-size:13px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
@media (max-width:360px){.cards{grid-template-columns:minmax(0,1fr)}}
.card{border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);padding:0;text-align:left;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.card:hover{border-color:var(--accent)}
.card{position:relative}
.card:has(.newtag){border-color:var(--bad)}
/* ほかの人が更新して、まだ開いていない引合に出す吹き出し */
.newtag{position:absolute;top:8px;left:8px;z-index:1;background:var(--bad);color:#fff;font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.08em;padding:2px 8px;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.newtag::after{content:"";position:absolute;left:10px;bottom:-5px;border:5px solid transparent;border-bottom:0;border-top-color:var(--bad)}
.card .upd{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:11px;color:var(--muted);border-top:1px dashed var(--line);margin-top:4px;padding-top:5px}
.card .upd .by{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.card .upd.fresh{color:var(--bad);font-weight:500}
.card .thumb{height:120px;background:var(--paper);border-bottom:1px solid var(--line);display:grid;place-items:center;overflow:hidden;color:var(--muted);font-family:var(--f-mono);font-size:12px}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .cb{padding:10px 12px;display:flex;flex-direction:column;gap:4px;min-width:0}
.card .cust{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .ttl,.card .pt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.card .meta{display:flex;gap:12px;align-items:center;font-size:12px;color:var(--muted);flex-wrap:wrap}
.card .meta b{font-family:var(--f-mono);color:var(--ink);font-weight:500}
.card .meta .tg,.card .meta .tg b{color:var(--bad)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:1px 8px;border-radius:999px;background:var(--pbg);color:var(--pfg);white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.open{--pbg:var(--accent-soft);--pfg:var(--accent)}
.pill.submitted{--pbg:var(--warn-soft);--pfg:var(--warn)}
.pill.won{--pbg:var(--ok-soft);--pfg:var(--ok)}
.pill.lost{--pbg:var(--paper);--pfg:var(--muted)}
.empty{border:1px dashed var(--line-strong);border-radius:var(--r);padding:36px 20px;text-align:center;background:var(--surface)}
.empty h3{font-size:17px;margin-bottom:6px}
.empty p{margin:0 auto 14px;max-width:46ch;color:var(--muted)}
.dhead{display:flex;align-items:center;gap:12px;margin-block:18px 12px;flex-wrap:wrap}
.savestate{font-size:12px;color:var(--muted);margin-left:auto}
.dgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:18px;align-items:start}
@media (max-width:900px){.dgrid{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);min-width:0}
.ph{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.ph h2{font-size:15px}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px}
.form .full{grid-column:1/-1}
.form label{display:flex;flex-direction:column;gap:4px;min-width:0}
.form input,.form textarea,.form select{border:1px solid var(--line-strong);border-radius:4px;padding:7px 9px;background:var(--surface);width:100%}
.form textarea{resize:vertical;min-height:72px}
.form .tgt{color:var(--bad)}
@media (max-width:520px){.form{grid-template-columns:minmax(0,1fr)}}
.drop{margin:14px;border:1.5px dashed var(--line-strong);border-radius:var(--r);padding:16px;text-align:center;color:var(--muted);font-size:13px;display:block;cursor:pointer}
.drop.over{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.dtabs{display:flex;gap:6px;flex-wrap:wrap;padding:0 14px}
.dtab{display:flex;gap:6px;align-items:center;max-width:100%;border:1px solid var(--line);border-radius:var(--r);background:none;padding:4px 8px;font-size:12px;min-width:0}
.dtab[aria-current="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.dtab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.dtab .k{font-family:var(--f-mono);font-size:10px}
.preview{margin:12px 14px 14px;border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.preview iframe{display:block;width:100%;height:560px;border:0;background:#fff}
.preview img{display:block;max-width:100%;margin:0 auto}
.preview .pbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:6px 8px;border-top:1px solid var(--line);background:var(--surface)}
.preview .pname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.preview .cadbox{padding:28px 16px;text-align:center;color:var(--muted)}
.preview .cadbox .k{font-size:26px;color:var(--accent)}
.qrows{display:flex;flex-direction:column;gap:8px}
.qhead,.qrow{display:grid;grid-template-columns:minmax(0,1.3fr) 108px minmax(0,1fr) minmax(0,1.4fr) 34px;gap:6px;align-items:center}
.qhead{font-size:11px;letter-spacing:.06em;color:var(--muted)}
.qrow input,.qrow select{border:1px solid var(--line-strong);border-radius:4px;padding:6px 8px;background:var(--surface);width:100%;min-width:0}
.qrow .amt{font-family:var(--f-mono);text-align:right}
.qrow .x{border:0;background:none;color:var(--muted);font-size:16px;padding:4px}
.qrow .x:hover{color:var(--bad)}
.qrow .x.really{color:var(--bad);font-size:12px}
.qrow select[data-st="asked"]{color:var(--warn)}.qrow select[data-st="replied"]{color:var(--ok)}.qrow select[data-st="declined"]{color:var(--muted)}
@media (max-width:620px){.qhead{display:none}.qrow{grid-template-columns:minmax(0,1fr) 108px 34px;border:1px solid var(--line);border-radius:var(--r);padding:8px}
  .qrow .amt{grid-column:1/3;text-align:left}.qrow .nt{grid-column:1/3}}
.card .ps{display:flex;flex-direction:column;gap:2px;font-size:12px}
.card .ps div{display:flex;gap:8px;min-width:0}
.card .ps .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .ps .s{white-space:nowrap}.card .ps .s.asked{color:var(--warn)}.card .ps .s.replied{color:var(--ok)}.card .ps .s.declined,.card .ps .s.todo{color:var(--muted)}
.card .ps .a{font-family:var(--f-mono);white-space:nowrap}
.confirm{display:inline-flex;gap:6px;align-items:center;font-size:12px;color:var(--bad);flex-wrap:wrap}
.banner{display:flex;gap:10px;align-items:center;padding:8px 12px;border-radius:var(--r);background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn);margin-bottom:12px;font-size:13px;flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:9px 16px;border-radius:var(--r);font-size:13px;z-index:50;max-width:calc(100% - 32px)}
/* 更新箇所のマーカー（詳細画面。前回見たあとにほかの人が変えた箇所） */
:root{--mark:rgba(255,206,0,.38);--mark-line:#d9a400}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--mark:rgba(255,206,0,.2);--mark-line:#e3b428}}
:root[data-theme="dark"]{--mark:rgba(255,206,0,.2);--mark-line:#e3b428}
.markbar{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;padding:8px 12px;margin-bottom:12px;border-radius:var(--r);background:var(--mark);border:1px solid var(--mark-line);font-size:13px}
.markbar .hint{color:inherit;opacity:.85;margin-top:2px}
.form .chg,.qrow .chg{background:var(--mark);border-color:var(--mark-line)}
.chgtag{display:inline-block;margin-left:8px;padding:0 6px;border-radius:3px;background:var(--mark);border:1px solid var(--mark-line);color:var(--ink);font-size:10px;letter-spacing:0;line-height:1.6;vertical-align:1px}
.qrow.chg-row{border-left:3px solid var(--mark-line);padding-left:6px}
.qrow .qmark{grid-column:1/-1;line-height:1}
.qrow .qmark .chgtag{margin-left:0}
.dtab.chg{border-color:var(--mark-line);background:var(--mark)}
.dtab .k.new{color:var(--ink);font-weight:500}
.login{max-width:360px;margin:48px auto 0;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);padding:20px}
.login h2{font-size:17px;margin-bottom:4px}
.login form{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.login label{display:flex;flex-direction:column;gap:4px}
.login input{border:1px solid var(--line-strong);border-radius:4px;padding:8px 10px;background:var(--surface);width:100%}
.login .err{color:var(--bad);font-size:13px;margin:0}