/* テーマ：ライト / 中間 / ダーク（html の data-theme で切り替え）。ずぼらにかんり と同じ作り */
:root,.lookprev[data-pt="light"]{
  color-scheme:light;
  --bg:#f6f5f2;--panel:#fff;--text:#222;--sub:#6b6b6b;--line:#e3e1dc;--soft:#f0efeb;
  --accent:#c0607a;--accent-text:#fff;
  --c1:#c8574a;--c2:#d8873a;--c3:#b9a23e;--c4:#6ea85e;--c5:#3f9a6b;
  --ph-lead:#8a8f99;--ph-work:#3d6fb6;--ph-delivered:#2f8a9e;--ph-billed:#d08a2e;--ph-paid:#3f9a6b;--ph-lost:#a3a3a3;
  --shadow:rgba(0,0,0,.12);
}
:root[data-theme="dim"],.lookprev[data-pt="dim"]{
  color-scheme:dark;
  --bg:#3b3f46;--panel:#474c54;--text:#f1f2f4;--sub:#c0c4ca;--line:#5d636c;--soft:#41464e;
  --accent:#ec9db2;--accent-text:#2a1b20;
  --c1:#f09a8f;--c2:#f0b070;
  --ph-lead:#b5bac3;--ph-work:#8fb4ea;--ph-delivered:#6fc3d4;--ph-billed:#f0b46a;--ph-paid:#7fd0a3;--ph-lost:#9a9fa6;
  --shadow:rgba(0,0,0,.3);
}
:root[data-theme="dark"],.lookprev[data-pt="dark"]{
  color-scheme:dark;
  --bg:#1b1c1e;--panel:#25272a;--text:#e8e6e3;--sub:#9a9894;--line:#3a3c40;--soft:#2f3134;
  --accent:#e58aa2;--accent-text:#1b1012;
  --c1:#e07a70;--c2:#e09f5e;
  --ph-lead:#9a9fa8;--ph-work:#7aa5e6;--ph-delivered:#5cb3c6;--ph-billed:#e0a457;--ph-paid:#6cc495;--ph-lost:#76797e;
  --shadow:rgba(0,0,0,.4);
}
:root,.lookprev{
  --sel:color-mix(in srgb,var(--accent) 18%,var(--panel));
  --accent-soft:color-mix(in srgb,var(--accent) 8%,var(--panel));
  --accent-line:color-mix(in srgb,var(--accent) 45%,var(--line));
  --bg-tint:color-mix(in srgb,var(--accent) 5%,var(--bg));
}
:root[data-fs="l"]{font-size:112.5%}
:root[data-fs="xl"]{font-size:125%}
/* スクロールバーの有無でページが横にずれないよう、常に幅を確保する */
html{scrollbar-gutter:stable;accent-color:var(--accent)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg-tint);color:var(--text);font-family:"BIZ UDPGothic","BIZ UDPゴシック","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI","Meiryo",system-ui,sans-serif;font-size:1rem;line-height:1.55;-webkit-text-size-adjust:100%}
body.locked{overflow:hidden}
body.dragging{user-select:none;cursor:grabbing}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
a{color:var(--accent)}
::selection{background:color-mix(in srgb,var(--accent) 30%,transparent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input:not([type=checkbox]):not([type=color]),select,textarea{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:6px 9px;min-width:0}
textarea{width:100%;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
input[type=checkbox]{width:18px;height:18px;margin:0;flex:0 0 auto}

header{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--panel);position:sticky;top:0;z-index:5;flex-wrap:wrap;box-shadow:inset 0 3px 0 var(--accent),0 1px 0 var(--line)}
header h1{font-size:1.0625rem;margin:0;font-weight:700;color:var(--accent);letter-spacing:.04em}
.tabs{display:flex;gap:4px;margin-left:auto}
.tabs button{border:0;background:transparent;padding:6px 12px;border-radius:8px;color:var(--sub);white-space:nowrap}
.tabs button:hover{background:var(--accent-soft);color:var(--text)}
.tabs button.on{background:var(--accent);color:var(--accent-text);font-weight:600}
main{max-width:1480px;margin:0 auto;padding:16px}
.page{display:none}.page.on{display:block}
.card{background:var(--panel);border:1px solid color-mix(in srgb,var(--accent) 14%,var(--line));border-radius:12px;padding:14px;min-width:0;box-shadow:0 1px 3px var(--shadow)}
.btn{border:1px solid var(--line);background:var(--panel);padding:6px 12px;border-radius:8px;text-decoration:none;color:var(--text);display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.btn:hover{background:var(--accent-soft);border-color:var(--accent-line)}
.btn.primary{background:var(--accent);color:var(--accent-text);border-color:var(--accent);font-weight:600}
.btn.primary:hover{background:color-mix(in srgb,var(--accent) 85%,#000)}
.btn.danger{color:var(--c1)}
.btn.primary.danger{background:var(--c1);border-color:var(--c1);color:#fff}
.btn:disabled{opacity:.45;cursor:default}
.btn.small{padding:3px 9px;font-size:0.875rem}
.seg{display:inline-flex;border:1px solid var(--accent-line);border-radius:8px;overflow:hidden;flex-wrap:wrap}
.seg button{border:0;background:var(--panel);padding:5px 12px;font-size:0.875rem}
.seg button:hover{background:var(--accent-soft)}
.seg button.on{background:var(--accent);color:var(--accent-text);font-weight:600}
.note{font-size:0.8125rem;color:var(--sub)}
.empty{font-size:0.875rem;color:var(--sub);padding:4px 0;margin:0}
.warn{font-size:0.8125rem;color:var(--c1);margin:6px 0 0}
.check{display:inline-flex;align-items:center;gap:6px}
.spacer{flex:1}
.demobar{background:color-mix(in srgb,var(--c2) 18%,var(--panel));padding:8px 16px;font-size:0.875rem;display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.toolbar input[type=search]{width:240px;max-width:100%}
.toolbar .note{margin:0}
#page-jobs > .note{margin:0 0 8px}

/* 段階の色（区分ごと） */
.ph-lead{--pc:var(--ph-lead)}.ph-work{--pc:var(--ph-work)}.ph-delivered{--pc:var(--ph-delivered)}
.ph-billed{--pc:var(--ph-billed)}.ph-paid{--pc:var(--ph-paid)}.ph-lost{--pc:var(--ph-lost)}
.stg{display:inline-block;font-size:0.75rem;font-weight:600;padding:1px 8px;border-radius:999px;white-space:nowrap;
  color:var(--pc);background:color-mix(in srgb,var(--pc) 14%,var(--panel));border:1px solid color-mix(in srgb,var(--pc) 40%,transparent)}
.badge{display:inline-block;font-size:0.6875rem;padding:1px 7px;border-radius:999px;white-space:nowrap;border:1px solid var(--line);color:var(--sub)}
.badge.me{border-color:var(--accent);color:var(--accent);font-weight:600}
.badge.cl{color:var(--sub)}
.badge.warn{border-color:var(--c1);color:var(--c1)}
.badge.run{border-color:var(--c5);color:var(--c5);font-weight:600}
.due{display:inline-block;font-size:0.75rem;white-space:nowrap;color:var(--sub)}
.due.near{color:var(--text)}
.due.soon{color:var(--c2);font-weight:700}
.due.over{color:var(--c1);font-weight:700}
.due.okb{color:var(--c5);font-weight:700}
.ch{display:inline-block;font-size:0.6875rem;padding:0 6px;border-radius:4px;background:var(--soft);color:var(--sub);margin-left:6px;white-space:nowrap}

/* ---------- ボード ---------- */
.board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}
.col{background:color-mix(in srgb,var(--pc) 6%,var(--soft));border-radius:12px;border-top:3px solid var(--pc);padding:8px;min-width:0;transition:background .1s}
.col.over{background:color-mix(in srgb,var(--pc) 18%,var(--soft));box-shadow:inset 0 0 0 2px var(--pc)}
.colh{display:flex;align-items:baseline;gap:6px;padding:2px 4px 8px}
.colh b{font-size:0.9375rem}
.colh span{font-size:0.75rem;color:var(--sub);margin-left:auto;white-space:nowrap}
.colb{display:flex;flex-direction:column;gap:8px;min-height:40px}
.colempty{font-size:0.8125rem;color:var(--sub);text-align:center;padding:10px 0;border:1px dashed var(--line);border-radius:8px}
.jcard{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 10px;cursor:grab;display:flex;flex-direction:column;gap:3px;box-shadow:0 1px 2px var(--shadow);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.jcard:hover{border-color:var(--accent-line)}
.jcard.lifted{opacity:.35}
.jcard.ghost{position:fixed;z-index:50;pointer-events:none;box-shadow:0 12px 30px var(--shadow);transform:rotate(1.5deg);opacity:.96}
.jt{font-weight:700;font-size:0.9375rem;line-height:1.35;overflow-wrap:anywhere}
.jc{font-size:0.8125rem;color:var(--sub);overflow-wrap:anywhere}
.jf{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.jf .amt{margin-left:auto;font-size:0.8125rem;font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- リスト ---------- */
.jlist{display:flex;flex-direction:column;padding:4px}
.jlist.card{padding:6px}
.jrow{display:grid;grid-template-columns:110px minmax(0,1fr) auto 90px;gap:10px;align-items:center;border:0;background:transparent;text-align:left;padding:9px 8px;border-radius:8px;border-bottom:1px solid var(--line)}
.jrow:last-child{border-bottom:0}
.jrow:hover{background:var(--accent-soft)}
.jrow .stg{justify-self:start;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.jmain{display:flex;flex-direction:column;min-width:0}
.jmain b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jmain small{color:var(--sub);font-size:0.8125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jmeta{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.amt{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.shcol .jrow{grid-template-columns:100px minmax(0,1fr) auto}

/* ---------- ホーム ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.stat{border-radius:10px;padding:10px 12px;min-width:0;border-left:3px solid var(--accent);background:var(--accent-soft)}
.stat .k{font-size:0.8125rem;color:var(--sub)}
.stat .v{font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.hstats{margin-bottom:14px}
.hgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.hbox.wide{grid-column:1/-1}
.hbox h3{margin:0 0 6px;font-size:0.9375rem;color:var(--accent)}
.hrow{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;border:0;background:transparent;text-align:left;padding:7px 6px;border-radius:8px;border-bottom:1px solid var(--line)}
.hrow:last-child{border-bottom:0}
.hrow:hover{background:var(--accent-soft)}
.hm{display:flex;flex-direction:column;min-width:0}
.hm b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm small{font-size:0.8125rem;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hr{text-align:right;font-size:0.875rem;white-space:nowrap;display:flex;flex-direction:column;font-variant-numeric:tabular-nums}
.hr small{font-size:0.75rem;color:var(--sub)}
.hl .stg{max-width:88px;overflow:hidden;text-overflow:ellipsis}
.runbar{display:flex;align-items:center;gap:10px;background:color-mix(in srgb,var(--c5) 14%,var(--panel));border:1px solid color-mix(in srgb,var(--c5) 40%,transparent);border-radius:10px;padding:8px 12px;margin-bottom:12px;font-size:0.9375rem;flex-wrap:wrap}
.runbar .btn{margin-left:auto}
.welcome{max-width:640px}
.welcome h2{margin:0 0 6px;color:var(--accent);font-size:1.125rem}

/* ---------- クライアント ---------- */
.clist{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.clist > .card{grid-column:1/-1}
.ccard{display:flex;flex-direction:column;gap:4px;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-width:0;box-shadow:0 1px 3px var(--shadow)}
.ccard:hover{border-color:var(--accent-line)}
.cn{display:flex;align-items:baseline;gap:8px;min-width:0}
.cn b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn small{font-size:0.75rem;color:var(--sub);white-space:nowrap}
.cc .ch{margin:0 4px 0 0}
.cs{font-size:0.875rem;font-variant-numeric:tabular-nums;display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}
.cs small{font-size:0.75rem;color:var(--sub)}
.cw{font-size:0.8125rem;color:var(--c2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 詳細シート ---------- */
.sheetwrap{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.35);display:flex;justify-content:center;align-items:flex-start;padding:24px 16px;overflow:hidden}
.sheet{background:var(--panel);border-radius:14px;border-top:4px solid var(--accent);width:min(1080px,100%);max-height:calc(100dvh - 48px);overflow-y:auto;overscroll-behavior:contain;box-shadow:0 20px 50px var(--shadow)}
.shhead{display:flex;gap:10px;align-items:center;padding:14px 18px 8px;position:sticky;top:0;background:var(--panel);z-index:2}
.shtitle{flex:1;font-size:1.125rem!important;font-weight:700;border-color:transparent!important;background:var(--soft)!important}
.shbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:0 18px 10px;border-bottom:1px solid var(--line)}
.shgrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0 22px;padding:4px 18px 8px}
.shcol{min-width:0}
.shsec{padding:12px 0;border-bottom:1px dashed var(--line)}
.shsec:last-child{border-bottom:0}
.shsec h3{margin:0 0 8px;font-size:0.9375rem;color:var(--accent)}
.shfoot{display:flex;gap:8px;justify-content:space-between;flex-wrap:wrap;padding:12px 18px 16px;border-top:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
.fld{display:flex;flex-direction:column;gap:3px;min-width:0}
.fld > span{font-size:0.8125rem;color:var(--sub)}
.fld.wide{grid-column:1/-1}
.fld.inline{flex-direction:row;align-items:center;gap:8px}
.fld.check{flex-direction:row;align-items:center;align-self:end;padding-bottom:6px}
.rows{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.row{display:flex;gap:6px;align-items:center;min-width:0;flex-wrap:wrap}
.row > span{font-size:0.875rem;color:var(--sub)}
.grow{flex:1 1 90px}
.tiny{width:64px}
.amtin{width:110px}
.row.dl .duet{font-size:0.8125rem;min-width:56px;color:var(--sub)}
.row.dl.near .duet{color:var(--text)}
.row.dl.soon .duet{color:var(--c2);font-weight:700}
.row.dl.over .duet{color:var(--c1);font-weight:700}
.row.dl.done input:not([type=checkbox]){opacity:.55;text-decoration:line-through}
.caution{background:color-mix(in srgb,var(--c2) 14%,var(--panel));border-radius:8px;padding:8px 10px;font-size:0.875rem;margin:10px 0 0;overflow-wrap:anywhere}
.caution b{display:block;font-size:0.75rem;color:var(--c2)}
.memoadd{display:flex;gap:6px;align-items:flex-end;margin-bottom:8px}
.notes{display:flex;flex-direction:column;gap:6px}
.noteitem{display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:8px;align-items:start;font-size:0.875rem;background:var(--soft);border-radius:8px;padding:6px 8px}
.noteitem p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.nd{color:var(--sub);font-size:0.8125rem}
.money{background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:10px;padding:8px 12px;margin-top:10px}
.mline{display:flex;justify-content:space-between;gap:10px;font-size:0.875rem;font-variant-numeric:tabular-nums}
.mline.big{font-size:1rem}
.mline.big b{font-size:1.125rem}
.revrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.revrow > span{font-size:0.875rem;color:var(--sub)}
.revn{font-size:1.375rem;min-width:28px;text-align:center;font-variant-numeric:tabular-nums}
.timer{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.tnow{font-weight:700;color:var(--c5);font-variant-numeric:tabular-nums}

/* ---------- 設定 ---------- */
.setsec{margin-bottom:24px}
.setsec h3{margin:0 0 10px;font-size:1rem;color:var(--accent)}
.setsec > .note{margin:0 0 10px}
.setrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:6px 0}
.setrow .lbl{width:110px;font-size:0.875rem;color:var(--sub);flex-shrink:0}
.swrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sw{width:30px;height:30px;border-radius:50%;border:2px solid transparent;padding:0;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.sw.on{border-color:var(--text);box-shadow:inset 0 0 0 2px var(--panel)}
.swrow label{display:inline-flex;align-items:center;gap:6px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--soft);border-radius:999px;padding:3px 4px 3px 12px;font-size:0.875rem;display:inline-flex;align-items:center;gap:4px}
.chip button{border:0;background:transparent;color:var(--sub);width:24px;height:24px;border-radius:50%;padding:0}
.chip button:hover{background:var(--line);color:var(--text)}
.stg-rows .row > .note{min-width:32px}
.actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px;flex-wrap:wrap}

/* ---------- ダイアログ・トースト ---------- */
dialog{border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:14px;background:var(--panel);color:var(--text);padding:18px;width:min(440px,calc(100vw - 24px))}
dialog::backdrop{background:rgba(0,0,0,.35)}
dialog h2{margin:0 0 10px;font-size:1.0625rem;color:var(--accent)}
.askmsg{margin:0 0 12px;font-size:0.9375rem;white-space:pre-wrap}
#askInput{width:100%;margin-bottom:6px}
#toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--text);color:var(--bg);border-radius:10px;padding:10px 14px;font-size:0.9375rem;display:none;gap:14px;align-items:center;z-index:60;width:max-content;max-width:calc(100vw - 32px)}
#toast.show{display:flex}
#toast button{background:transparent;border:0;color:inherit;text-decoration:underline;padding:0;white-space:nowrap}

/* ---------- PC・スマホの出し分け ---------- */
.mobileonly{display:none}
@media (max-width:899px){
  .pconly{display:none!important}
  .mobileonly{display:block}
  header{position:static;padding:10px 14px}
  /* タブは画面の下に固定（片手で押しやすい） */
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;margin:0;display:flex;gap:4px;justify-content:space-around;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:var(--panel);border-top:1px solid var(--line);box-shadow:0 -2px 12px var(--shadow)}
  .tabs button{flex:1;min-width:0;padding:10px 2px;font-size:0.875rem;border-radius:10px}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  #toast{bottom:calc(84px + env(safe-area-inset-bottom))}
  main{padding:10px 12px}
  .btn{min-height:40px}
  .btn.small{min-height:36px;padding:4px 12px}
  .hgrid{grid-template-columns:minmax(0,1fr)}
  .shgrid{grid-template-columns:minmax(0,1fr)}
  /* 詳細は全画面で */
  .sheetwrap{padding:0}
  .sheet{width:100%;max-height:none;height:100dvh;border-radius:0;padding-bottom:env(safe-area-inset-bottom)}
}
@media (max-width:640px){
  .toolbar input[type=search]{width:100%;flex:1 1 100%}
  .toolbar .btn.primary{flex:1 1 100%}
  .hstats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jrow{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px}
  .jrow .stg{grid-column:1/-1}
  .jrow .jmeta{grid-column:1/-1;justify-content:flex-start;grid-row:3}
  .jrow .amt{grid-row:2;grid-column:2}
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .shhead,.shbar,.shgrid,.shfoot{padding-left:14px;padding-right:14px}
  .noteitem{grid-template-columns:minmax(0,1fr) auto}
  .noteitem .nd{grid-column:1/-1}
  .hrow{grid-template-columns:76px minmax(0,1fr) auto;gap:8px}
  .setrow{flex-direction:column;align-items:flex-start;gap:6px}
  .setrow .lbl{width:auto}
}

/* ---------- 書類（見積書・請求書・領収書） ---------- */
.docrow{display:grid;grid-template-columns:64px minmax(0,1fr) auto 96px;gap:10px;align-items:center;width:100%;border:1px solid var(--line);background:var(--panel);text-align:left;padding:7px 10px;border-radius:8px}
.docrow:hover{background:var(--accent-soft);border-color:var(--accent-line)}
.docrow .dt{font-weight:700;font-size:0.875rem}
.docrow .dn{display:flex;flex-direction:column;min-width:0;font-size:0.875rem;font-variant-numeric:tabular-nums}
.docrow .dn small{color:var(--sub);font-size:0.75rem}
.dochead{flex:1;display:flex;align-items:baseline;gap:8px;font-size:1.0625rem;color:var(--accent)}
.dochead small{color:var(--sub);font-weight:400;font-size:0.875rem}
.docgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px;padding:6px 18px 18px;align-items:start}
.docform{min-width:0;display:flex;flex-direction:column;gap:8px}
.docform .caution{margin:0}
.dsub{margin:10px 0 4px;font-size:0.875rem;color:var(--accent)}
.docacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.docprev{position:sticky;top:64px;min-width:0;background:var(--soft);border-radius:10px;padding:12px}
.paperbox{position:relative;width:100%;overflow:hidden}
.paperbox .paper{position:absolute;left:0;top:0;transform-origin:0 0;box-shadow:0 2px 12px rgba(0,0,0,.18)}
.stampprev{width:56px;height:56px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:6px}
#printArea{display:none}

/* A4の紙（テーマに関係なく白い紙に黒い文字） */
.paper{width:794px;height:1123px;background:#fff;color:#222;padding:64px 64px 56px;font-size:13px;line-height:1.6;overflow:hidden;
  font-family:"BIZ UDPGothic","BIZ UDPゴシック","Hiragino Sans","Noto Sans JP","Yu Gothic","Meiryo",sans-serif;font-variant-numeric:tabular-nums;color-scheme:light}
.dp-title{text-align:center;font-size:26px;font-weight:700;letter-spacing:.5em;padding-left:.5em;border-bottom:3px double #333;width:260px;margin:0 auto 18px}
.dp-meta{text-align:right;font-size:12px;margin-bottom:14px}
.dp-top{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;margin-bottom:22px}
.dp-name{font-size:19px;font-weight:700;border-bottom:1px solid #333;padding-bottom:3px;margin-bottom:8px;overflow-wrap:anywhere}
.dp-subj{margin-bottom:4px}
.dp-lead{margin:6px 0 10px}
.dp-big{display:flex;align-items:baseline;gap:12px;border-bottom:2px solid #333;padding:4px 2px;margin-bottom:6px}
.dp-big span{font-size:13px}
.dp-big b{font-size:24px;margin-left:auto}
.dp-big small{font-size:11px}
.dp-recamt{display:flex;align-items:baseline;gap:14px;background:#f2f2f2;border:1px solid #999;padding:10px 14px;margin:6px 0}
.dp-recamt b{font-size:26px;margin-left:auto;letter-spacing:.04em}
.dp-proviso{border-bottom:1px solid #999;padding:2px 2px 4px}
.dp-due{font-size:12px}
.dp-from{position:relative;font-size:12px;padding-top:4px;overflow-wrap:anywhere}
.dp-shop{font-size:15px;font-weight:700}
.dp-stamp{position:absolute;right:0;top:0;width:72px;height:72px;object-fit:contain;opacity:.92}
.dp-rectax{font-size:12px;margin:-8px 0 16px}
.dp-items{width:100%;border-collapse:collapse;margin-bottom:10px}
.dp-items th{background:#eee;font-weight:600;font-size:12px;border:1px solid #999;padding:5px 8px;text-align:left}
.dp-items td{border:1px solid #bbb;padding:6px 8px;overflow-wrap:anywhere}
.dp-items .n{text-align:right;width:96px;white-space:nowrap}
.dp-items th.n{text-align:center}
.dp-items th:nth-child(2),.dp-items td:nth-child(2){width:56px}
.dp-sum{margin-left:auto;border-collapse:collapse;min-width:300px;margin-bottom:18px}
.dp-sum th{text-align:left;font-weight:400;padding:4px 10px;border-bottom:1px solid #ccc}
.dp-sum td{text-align:right;padding:4px 10px;border-bottom:1px solid #ccc;white-space:nowrap}
.dp-sum tr.b th,.dp-sum tr.b td{font-weight:700;font-size:14px;border-bottom:1px solid #333}
.dp-sum tr.s th,.dp-sum tr.s td{font-size:11px;color:#555}
.dp-box{border:1px solid #bbb;padding:8px 12px;margin-bottom:12px;font-size:12px}
.dp-bh{font-weight:700;margin-bottom:2px}
.dp-sm{font-size:11px;color:#555;margin-top:2px}
.dp-note{white-space:pre-wrap;overflow-wrap:anywhere}

@media (max-width:899px){
  .docgrid{grid-template-columns:minmax(0,1fr);padding:6px 14px 18px}
  .docprev{position:static;padding:8px}
  .docrow{grid-template-columns:56px minmax(0,1fr) auto;gap:6px 10px}
  .docrow .amt{grid-column:2/-1;text-align:left}
}

/* 印刷（PDFに保存）：書類だけをA4いっぱいに */
@page{size:A4;margin:0}
@media print{
  body{background:#fff;padding:0!important}
  body > *:not(#printArea){display:none!important}
  #printArea{display:block}
  #printArea .paper{width:210mm;height:296mm;box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.dochead{min-width:0;white-space:nowrap;overflow:hidden}
.dochead small{overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){
  .row .grow{flex-basis:60px}
  .row .tiny{width:48px}
  .row .amtin{width:88px}
  .shhead{gap:6px}
}

/* ---------- 売上 ---------- */
.yearnav{display:flex;align-items:center;gap:8px}
.yearnav b{font-size:1.125rem;color:var(--accent);min-width:64px;text-align:center}
.sbasis{margin:0 0 10px}
.sstats{margin-bottom:14px}
.stat .v small{display:block;font-size:0.8125rem;font-weight:400;color:var(--sub)}
.sgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sgrid .card h3{margin:0 0 10px;font-size:0.9375rem;color:var(--accent)}
.swide{grid-column:1/-1}
/* 月ごとの棒グラフ */
.mchart{position:relative;padding-left:44px;height:220px;margin-bottom:26px}
.mgrid{position:absolute;inset:0 0 0 44px}
.tick{position:absolute;left:0;right:0;border-top:1px solid var(--line)}
.tick span{position:absolute;right:calc(100% + 6px);top:-0.6em;font-size:0.6875rem;color:var(--sub);white-space:nowrap}
.mbars{position:absolute;inset:0 0 0 44px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2px}
.mcol{position:relative;display:flex;align-items:flex-end;justify-content:center;height:100%;border-radius:4px;outline-offset:0}
.mcol:hover,.mcol:focus-visible{background:var(--accent-soft)}
.mbar{width:min(60%,28px);background:var(--accent);border-radius:4px 4px 0 0;min-height:0}
.mlabels span.now{color:var(--text);font-weight:700}
.mlabels{position:absolute;left:44px;right:0;bottom:-22px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2px;text-align:center;font-size:0.75rem;color:var(--sub)}
.mtip{position:absolute;top:-6px;transform:translate(-50%,-100%);background:var(--text);color:var(--bg);font-size:0.8125rem;padding:5px 9px;border-radius:8px;white-space:nowrap;pointer-events:none;z-index:3}
.mtable summary{cursor:pointer;font-size:0.875rem;color:var(--accent)}
.tscroll{overflow-x:auto;max-width:100%}
.stable{width:100%;border-collapse:collapse;font-size:0.875rem;font-variant-numeric:tabular-nums;margin-top:8px}
.stable th,.stable td{padding:6px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.stable th:first-child,.stable td:first-child{text-align:left;white-space:normal}
.stable th{font-weight:600;color:var(--sub);font-size:0.8125rem}
.stable tfoot td{font-weight:700;border-top:2px solid var(--line)}
/* 横向きの棒（ジャンル・窓口） */
.blist{display:flex;flex-direction:column;gap:8px}
.brow{display:grid;grid-template-columns:minmax(0,10em) minmax(0,1fr) auto;gap:10px;align-items:center;font-size:0.875rem}
.bk{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt{height:12px;background:var(--soft);border-radius:4px;overflow:hidden}
.bb{display:block;height:100%;background:var(--accent);border-radius:0 4px 4px 0}
.bv{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bv small{color:var(--sub);margin-left:6px;font-size:0.75rem;display:inline-block;min-width:2.5em}
.csvlist{display:flex;flex-direction:column;gap:10px}
.csvitem{display:flex;gap:14px;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.csvitem p{margin:2px 0 0}
#page-sales .jrow{grid-template-columns:76px minmax(0,1fr) auto 96px}
@media (max-width:899px){
  .sgrid{grid-template-columns:minmax(0,1fr)}
  .mchart{height:180px}
}
@media (max-width:640px){
  .csvitem{flex-direction:column;align-items:stretch}
  #page-sales .jrow{grid-template-columns:minmax(0,1fr) auto}
  #page-sales .jrow > .note{grid-column:1/-1}
  .sstats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tabs button{font-size:0.8125rem}
}

/* ---------- アカウント ---------- */
.cloudstate{font-size:0.75rem;color:var(--sub)}
.cloudstate[data-s="error"]{color:var(--c1)}
.acctname{margin:0 0 6px}
.policylinks{display:flex;gap:16px;padding:4px 2px}
#authDialog form{display:flex;flex-direction:column;gap:10px}
#authDialog .note{margin:0}
#authDialog input{width:100%}
.authseg{align-self:flex-start}
.authleft{margin-right:auto}
.author{display:flex;align-items:center;gap:10px;margin:4px 0 0;color:var(--sub);font-size:0.8125rem}
.author::before,.author::after{content:"";flex:1;height:1px;background:var(--line)}
.authgoogle{width:100%}
@media (max-width:640px){
  .authleft{flex:1 1 100%;order:3}
}

/* ---------- 料金表 ---------- */
.ptabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.ptabs button{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:5px 14px;display:inline-flex;align-items:center;gap:6px}
.ptabs button:hover{border-color:var(--accent-line)}
.ptabs button.on{background:var(--accent);color:var(--accent-text);border-color:var(--accent);font-weight:600}
.ptabs button small{font-size:0.6875rem;background:var(--panel);color:var(--accent);border-radius:999px;padding:0 6px;font-weight:700}
.ptabs .padd{border-style:dashed;color:var(--sub)}
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:14px;align-items:start}
.pside{display:flex;flex-direction:column;gap:14px;position:sticky;top:64px;min-width:0;max-height:calc(100dvh - 80px);overflow-y:auto;overscroll-behavior:contain;padding-bottom:2px}
.pside h3,.plist h3{margin:0 0 8px;font-size:0.9375rem;color:var(--accent)}
.psec{padding:6px 0 12px;border-bottom:1px dashed var(--line);margin-bottom:8px}
.psec:last-child{border-bottom:0;margin-bottom:0}
.prow{display:grid;grid-template-columns:minmax(0,1fr) 80px auto 84px;gap:10px;align-items:center;padding:5px 6px;border-radius:8px}
.prow.on,.arow.on{background:var(--accent-soft)}
.pn{display:flex;gap:8px;align-items:flex-start;min-width:0;cursor:pointer}
.pn input{margin-top:3px}
.pn span{display:flex;flex-direction:column;min-width:0}
.pn b{font-weight:600;overflow-wrap:anywhere}
.pn small{font-size:0.75rem;color:var(--sub);overflow-wrap:anywhere}
.pu,.pt{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pu{color:var(--sub);font-size:0.875rem}
.pt{font-weight:700}
.pq{display:inline-flex;align-items:center;gap:3px}
.pq input{width:46px;text-align:center;padding:4px 2px}
.pq .btn.small{padding:2px 8px;min-width:30px}
.arow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:5px 6px;border-radius:8px}
.ar{display:inline-flex;align-items:center;gap:3px;font-size:0.8125rem;color:var(--sub);white-space:nowrap}
.ar input{width:52px;text-align:right;padding:4px 6px}
.psel{margin-bottom:6px;font-size:0.875rem}
.psel .mline{color:var(--sub)}
.psum .money .mline span{overflow-wrap:anywhere}
/* 編集 */
.ptname{align-items:flex-end;margin-bottom:6px}
.psechead{margin-bottom:6px}
.psechead input{font-weight:600}
.peditrows{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.pehead,.perow{display:grid;grid-template-columns:minmax(0,1.4fr) 100px minmax(0,1.4fr) auto;gap:6px;align-items:center}
.pehead{font-size:0.75rem;color:var(--sub);padding:0 2px}
.perow input{width:100%}
.pebtns{display:inline-flex;gap:4px}
.adjrows{display:flex;flex-direction:column;gap:10px;margin-bottom:8px}
.aedit{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-bottom:10px;border-bottom:1px dashed var(--line)}
.aval{display:inline-flex;align-items:center;gap:3px;font-size:0.8125rem;color:var(--sub)}
.aval .tiny{width:60px}
@media (max-width:1100px){
  .pehead{display:none}
  .perow{grid-template-columns:minmax(0,1fr) 100px;padding-bottom:8px;border-bottom:1px dashed var(--line)}
  .perow input[data-pf$=".note"]{grid-column:1/-1}
  .perow .pebtns{grid-column:1/-1;justify-content:flex-end}
}
@media (max-width:899px){
  .pgrid{grid-template-columns:minmax(0,1fr)}
  .pside{position:static;max-height:none;overflow:visible}
  .tabs button{font-size:0.8125rem;padding:10px 0}
}
@media (max-width:640px){
  .prow{grid-template-columns:minmax(0,1fr) auto;gap:4px 8px}
  .prow .pu{grid-column:2;grid-row:1}
  .prow .pq{grid-column:1;grid-row:2;padding-left:26px}
  .prow .pt{grid-column:2;grid-row:2}
  .ptname .btn{flex:1}
}
@media (max-width:640px){
  .row.psechead input.grow,.row.ptname .fld.grow{flex:1 1 100%}
  .psechead .btn{flex:1}
  .aedit input.grow{flex:1 1 100%}
  .aedit .pebtns{margin-left:auto}
}
/* スマホ：見積の最終金額を画面の下にいつも出す */
.pbar{display:none}
@media (max-width:899px){
  .pbar{display:flex;position:fixed;left:0;right:0;bottom:calc(53px + env(safe-area-inset-bottom));z-index:19;align-items:center;justify-content:space-between;gap:10px;
    padding:8px 16px;background:var(--panel);border-top:1px solid var(--accent-line);box-shadow:0 -2px 10px var(--shadow)}
  .pbar b{font-size:1.125rem;color:var(--accent);font-variant-numeric:tabular-nums}
  #page-price{padding-bottom:56px}
}
/* 案件のボード：スマホは1列（2列だとカードが細くなりすぎる） */
@media (max-width:640px){.board{grid-template-columns:minmax(0,1fr)}}
/* ホーム：案件がまだないときの各欄 */
.hempty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border:1px dashed var(--line);border-radius:10px;text-align:center}
.hempty p{margin:0;color:var(--sub);font-size:0.875rem}
.hhint{margin:0 0 10px}
.linkbtn{border:0;background:transparent;color:var(--accent);text-decoration:underline;padding:0 2px;font-size:inherit}
/* 料金表：見積もる画面の並び（チェックリスト → 加算・割引 → 見積） */
.pcalc{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,300px) minmax(280px,320px);gap:14px;align-items:start}
.psumwrap{position:sticky;top:64px;min-width:0}
.padj{min-width:0}
@media (max-width:1199px){
  /* 中くらいの幅：左にチェックリスト、右に加算・割引と見積（見積は下に寄せて画面に残す） */
  .pcalc{grid-template-columns:minmax(0,1fr) minmax(280px,340px);grid-template-areas:"list adj" "list sum";align-items:stretch}
  .pcalc .plist{grid-area:list;align-self:start}
  .pcalc .padj{grid-area:adj;align-self:start}
  .pcalc .psumwrap{grid-area:sum;position:static}
  .pcalc .psum{position:sticky;top:64px}
}
@media (max-width:899px){
  .pcalc{grid-template-columns:minmax(0,1fr);grid-template-areas:"list" "adj" "sum"}
  .pcalc .psum{position:static}
}

/* ---------- 設定（ずぼらにかんり と同じ並び） ---------- */
.setlayout{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);padding:0;overflow:hidden}
.setnav{border-right:1px solid var(--line);padding:16px 0;min-width:0}
.settitle{font-size:1.25rem;margin:0 16px 12px}
.setsearch{display:block;width:calc(100% - 32px);margin:0 16px 10px;padding:8px 14px!important;border-radius:999px!important}
.setnavlist button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;border:0;border-right:3px solid transparent;background:transparent;
  padding:13px 16px;font-size:0.9375rem;color:var(--text);text-align:left}
.setnavlist button:hover{background:var(--soft)}
.setnavlist button.on{background:var(--sel);border-right-color:var(--accent);font-weight:600}
.setnavlist .chev{color:var(--sub);font-size:1.25rem;line-height:1}
.setmain{padding:16px 22px;min-width:0}
.panetitle{font-size:1.25rem;margin:0 0 4px}
.panedesc{margin:0 0 18px}
.setnohit{margin:0 0 12px}
.setlayout:not(.searching) .setsec h3.dup{display:none}
.setlayout.searching .panedesc{display:none}
.setlayout.searching .setpane:not([hidden])~.setpane:not([hidden]){margin-top:8px;padding-top:12px;border-top:1px solid var(--line)}
.setback{display:none}
.policylinks{display:flex;gap:18px;flex-wrap:wrap;margin:0}
@media (max-width:899px){
  .setlayout{grid-template-columns:minmax(0,1fr)}
  .setnav{border-right:0;padding-bottom:4px}
  .setnavlist button{border-right:0;border-top:1px solid var(--line);padding:15px 16px}
  .setlayout:not(.listing):not(.searching) .setnav{display:none}
  .setlayout.listing .setmain{display:none}
  .setlayout.searching .setnavlist{display:none}
  .setlayout:not(.listing):not(.searching) .setback{display:inline-flex;margin-bottom:12px}
  .setmain{padding:14px}
}
/* 文字の大きさ・テーマの見本（横に小さく） */
.lookwrap{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap}
.lookrows{flex:1 1 300px;min-width:0}
.lookprev{flex:0 0 230px;width:230px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg);color:var(--text);
  font-size:calc(12px * var(--pfs,1));line-height:1.5;pointer-events:none;user-select:none;box-shadow:0 2px 8px var(--shadow)}
.lp-bar{padding:6px 10px;background:var(--panel);box-shadow:inset 0 2px 0 var(--accent);border-bottom:1px solid var(--line);color:var(--accent);font-weight:700}
.lp-card{margin:8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);overflow:hidden}
.lp-head{padding:4px 8px;background:var(--accent-soft);border-bottom:1px solid var(--line);color:var(--accent);font-weight:700}
.lp-item{padding:3px 8px;border-left:3px solid var(--accent);margin:4px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-t{color:var(--sub);margin-right:6px}
.lp-foot{display:flex;align-items:center;gap:6px;padding:4px 8px 8px}
.lp-note{color:var(--sub);font-size:.85em;margin-right:auto;white-space:nowrap}
.lp-btn{background:var(--accent);color:var(--accent-text);border-radius:6px;padding:1px 8px;font-weight:700;white-space:nowrap}
@media (max-width:640px){.lookprev{flex-basis:100%;width:auto;max-width:280px}}
/* 設定の保存（変更があるときだけ出す） */
.savebar{position:sticky;bottom:12px;z-index:15;display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap;
  margin-top:12px;padding:10px 14px;background:var(--panel);border:1px solid var(--accent);border-radius:12px;box-shadow:0 -2px 12px var(--shadow)}
.savebar .note{margin-right:auto;min-width:0;color:var(--accent);font-weight:700}
.savebar:not(.dirty){display:none}
@media (max-width:899px){.savebar{bottom:calc(64px + env(safe-area-inset-bottom))}}
@media (max-width:640px){
  .savebar .note{flex:1 1 100%;margin-right:0}
  .savebar .btn{flex:1}
}
#choiceDlg .actions{margin-top:12px}