/* 配達員 確定申告メモ
   藍（アイコンの色）を芯に、屋外でも読める濃淡。文字サイズの変更に追従するよう文字は rem で書く。 */
:root{
  color-scheme:light;
  --brand:#1E3A8A; --brand2:#172E6E; --on-brand:#FFFFFF; --on-brand2:#C7D3F2;
  --bg:#EEF1F6; --card:#FFFFFF; --card2:#F5F7FA; --line:#DDE2EA; --line2:#C4CBD6;
  --text:#141A26; --muted:#556072; --muted2:#7B8595;
  --acc:#1E4FB8; --acc-bg:#E6ECFA; --acc-ink:#163C8F;
  --good:#127A4B; --good-bg:#E2F4EB; --warn:#9A5B00; --warn-bg:#FBF0DA; --bad:#BC2F2A; --bad-bg:#FBE7E5;
  --chart:#2A63D6; --heat0:#EEF1F6; --heat1:#C9D7F5; --heat2:#94B1EC; --heat3:#5A85DE; --heat4:#1E4FB8;
  --sans:"Hiragino Sans","Yu Gothic UI","YuGothic","Noto Sans JP","Meiryo",system-ui,sans-serif;
  --adh:60px; --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  --ad-space:calc(var(--adh) + var(--safe-b));
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --brand:#1B2F6B; --brand2:#142454; --on-brand2:#B8C5EA;
    --bg:#0E1320; --card:#182033; --card2:#1F2940; --line:#2C3650; --line2:#414D69;
    --text:#EEF1F7; --muted:#AEB7C8; --muted2:#8A94A8;
    --acc:#7EA2F2; --acc-bg:#22325A; --acc-ink:#B5CBFA;
    --good:#55C893; --good-bg:#17382B; --warn:#E6B45C; --warn-bg:#3B2E14; --bad:#F0837D; --bad-bg:#40201F;
    --chart:#6F97EE; --heat0:#1F2940; --heat1:#2A3F73; --heat2:#3C5CA6; --heat3:#5D83D8; --heat4:#9DBBF7;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --brand:#1B2F6B; --brand2:#142454; --on-brand2:#B8C5EA;
  --bg:#0E1320; --card:#182033; --card2:#1F2940; --line:#2C3650; --line2:#414D69;
  --text:#EEF1F7; --muted:#AEB7C8; --muted2:#8A94A8;
  --acc:#7EA2F2; --acc-bg:#22325A; --acc-ink:#B5CBFA;
  --good:#55C893; --good-bg:#17382B; --warn:#E6B45C; --warn-bg:#3B2E14; --bad:#F0837D; --bad-bg:#40201F;
  --chart:#6F97EE; --heat0:#1F2940; --heat1:#2A3F73; --heat2:#3C5CA6; --heat3:#5D83D8; --heat4:#9DBBF7;
}
html{font-size:16px;}
html.ts-l{font-size:18px;} html.ts-xl{font-size:20px;}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;background:var(--brand);color:var(--text);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;overscroll-behavior:none;line-height:1.55;-webkit-text-size-adjust:100%;}
button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;background:none;border:none;padding:0;}

/* 高さは画面に固定し、スクロールするのは #main だけ（reference_banner_layout_scroll） */
#app{max-width:560px;margin:0 auto;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:var(--bg);position:relative;}
body.ads-on #app{height:calc(100vh - var(--ad-space));height:calc(100dvh - var(--ad-space));}
#main{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.pad{padding:12px 12px 20px;}

/* ---------- ヘッダー ---------- */
header{flex:0 0 auto;background:var(--brand);color:var(--on-brand);padding-top:var(--safe-t);}
.hrow{display:flex;align-items:center;min-height:52px;padding:0 4px;}
.htitle{flex:1;min-width:0;font-size:1.0625rem;font-weight:700;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hbtn{flex:none;min-width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:10px;color:var(--on-brand);font-size:.875rem;font-weight:600;padding:0 8px;}
.hbtn:active{background:rgba(255,255,255,.16);}
.hsub{font-size:.75rem;color:var(--on-brand2);padding:0 12px 8px;}

/* ---------- タブ ---------- */
nav.tabs{flex:0 0 auto;display:flex;background:var(--card);border-top:1px solid var(--line);}
nav.tabs button{flex:1;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--muted);font-size:.6875rem;font-weight:600;position:relative;}
nav.tabs button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
nav.tabs button.on{color:var(--acc);}
nav.tabs button:active{background:var(--card2);}
.tabdot{position:absolute;top:7px;left:calc(50% + 9px);min-width:16px;height:16px;border-radius:8px;background:var(--bad);color:#fff;font-size:10px;line-height:16px;text-align:center;padding:0 4px;font-weight:700;}

/* ---------- カード ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden;}
.card>h3,.ch{margin:0;padding:12px 14px 2px;font-size:.8125rem;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:8px;}
.ch .sp,.sp{flex:1;}
.cb{padding:8px 14px 14px;}
.note{font-size:.8125rem;color:var(--muted);line-height:1.65;}
.note+.note{margin-top:6px;}
.empty{padding:26px 16px;text-align:center;color:var(--muted);font-size:.9375rem;}
.tiny{font-size:.75rem;color:var(--muted2);}
.money{font-variant-numeric:tabular-nums;}

.kpis{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line);}
.kpi{background:var(--card);padding:10px 14px;min-width:0;}
.kpi span{display:block;font-size:.75rem;color:var(--muted);}
.kpi b{display:block;font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kpi.big{grid-column:1 / -1;}
.kpi.big b{font-size:1.75rem;}

/* ---------- ボタン ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:0 16px;border-radius:12px;font-weight:700;font-size:.9375rem;border:1px solid var(--line2);background:var(--card);color:var(--text);}
.btn:active{background:var(--card2);}
.btn.pri{background:var(--acc);border-color:var(--acc);color:#fff;}
:root[data-theme="dark"] .btn.pri{color:#0E1320;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.pri{color:#0E1320;}}
.btn.pri:active{filter:brightness(.92);}
.btn.danger{color:var(--bad);}
.btn.wide{width:100%;}
.btn.small{min-height:48px;padding:0 12px;font-size:.8125rem;font-weight:600;}
.btns{display:flex;gap:8px;}
.btns>*{flex:1;}

/* ---------- ホームの速記 ---------- */
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;}
.qbtn{min-height:60px;border-radius:12px;background:var(--acc-bg);color:var(--acc-ink);font-weight:700;font-size:.875rem;padding:6px;line-height:1.3;}
.qbtn small{display:block;font-size:.6875rem;font-weight:600;opacity:.8;}
.qbtn:active{filter:brightness(.95);}
.qbtn.alt{background:var(--card2);color:var(--text);border:1px solid var(--line);}

/* タイマー */
.timer{display:flex;align-items:center;gap:12px;}
.timer .clock{flex:1;font-size:2rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2;}
.timer .big{flex:none;min-width:128px;min-height:60px;border-radius:14px;font-weight:800;font-size:1.0625rem;background:var(--acc);color:#fff;}
.timer .big.stop{background:var(--bad);color:#fff;}
:root[data-theme="dark"] .timer .big{color:#0E1320;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .timer .big{color:#0E1320;}}

.todo{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:8px 14px;border-top:1px solid var(--line);text-align:left;font-size:.9375rem;font-weight:600;}
.todo:active{background:var(--card2);}
.todo .ar{margin-left:auto;color:var(--muted2);flex:none;}
.todo .dt{display:block;font-size:.75rem;color:var(--muted);font-weight:400;}
.statusline{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.75rem;color:var(--muted);padding:0 4px 10px;}
.unlock{color:var(--good);font-weight:700;}

/* ---------- チップ ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{min-height:48px;padding:0 14px;border-radius:24px;border:1px solid var(--line2);background:var(--card);font-size:.9375rem;font-weight:600;color:var(--text);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chip.on{background:var(--acc);border-color:var(--acc);color:#fff;}
:root[data-theme="dark"] .chip.on{color:#0E1320;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chip.on{color:#0E1320;}}
.chip:active{filter:brightness(.95);}
.scrollx{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;}
.scrollx::-webkit-scrollbar{display:none;}
.scrollx .chip{flex:none;}
.seg{display:flex;background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:3px;margin-bottom:10px;}
.seg button{flex:1;min-height:44px;border-radius:9px;font-size:.875rem;font-weight:600;color:var(--muted);white-space:nowrap;padding:0 4px;}
.seg button.on{background:var(--card);color:var(--acc);box-shadow:0 1px 2px rgba(0,0,0,.14);}

/* ---------- 一覧 ---------- */
.row{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:8px 14px;border-top:1px solid var(--line);text-align:left;}
.card>.row:first-child{border-top:none;}
.row:active{background:var(--card2);}
.row .m{flex:1;min-width:0;}
.row .t{font-size:.9375rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.row .s{font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.row .v{flex:none;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;}
.row .v small{display:block;font-size:.6875rem;font-weight:400;color:var(--muted);}
.badge{display:inline-block;font-size:.6875rem;font-weight:700;padding:1px 7px;border-radius:6px;background:var(--card2);color:var(--muted);border:1px solid var(--line);vertical-align:1px;}
.badge.good{background:var(--good-bg);color:var(--good);border-color:transparent;}
.badge.warn{background:var(--warn-bg);color:var(--warn);border-color:transparent;}
.badge.bad{background:var(--bad-bg);color:var(--bad);border-color:transparent;}
.grouph{font-size:.75rem;font-weight:700;color:var(--muted);padding:10px 14px 4px;background:var(--card2);border-top:1px solid var(--line);display:flex;justify-content:space-between;}
.card>.grouph:first-child{border-top:none;}
.fab{position:sticky;bottom:12px;float:right;margin:0 2px 12px 0;}

/* ---------- フォーム ---------- */
.fld{padding:10px 14px;border-top:1px solid var(--line);}
.card>.fld:first-child{border-top:none;}
.fl{display:block;font-size:.75rem;font-weight:700;color:var(--muted);margin-bottom:6px;}
.fh{font-size:.75rem;color:var(--muted);margin-top:6px;line-height:1.55;}
input[type=text],input[type=number],input[type=date],input[type=time],input[type=search],select,textarea,input[inputmode]{
  width:100%;min-height:48px;border:1px solid var(--line2);border-radius:10px;background:var(--card);color:var(--text);padding:8px 12px;font-size:1rem;outline:none;}
/* iPhone の日付・月の欄は未入力だと灰色の空欄に見えるので、他の入力欄と同じ見た目にそろえる */
input[type=date],input[type=time],input[type=month]{-webkit-appearance:none;appearance:none;background:var(--card);min-width:0;}
select{-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted2) 50%),linear-gradient(135deg,var(--muted2) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:26px;}
input:focus,select:focus,textarea:focus{border-color:var(--acc);}
textarea{resize:vertical;line-height:1.6;}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.check{display:flex;align-items:center;gap:10px;min-height:48px;font-size:.9375rem;}
.check input{width:24px;height:24px;flex:none;accent-color:var(--acc);}
.picker{display:flex;align-items:center;gap:8px;width:100%;min-height:52px;padding:8px 12px;border:1px solid var(--line2);border-radius:10px;background:var(--card);text-align:left;font-weight:600;}
.picker .ar{margin-left:auto;color:var(--muted2);}
input[type=range]{width:100%;height:44px;accent-color:var(--acc);}
.ratiov{font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums;}

/* 金額入力 */
.amount{display:flex;align-items:baseline;justify-content:flex-end;gap:4px;padding:8px 14px;font-variant-numeric:tabular-nums;width:100%;}
.amount .y{font-size:1.25rem;color:var(--muted);}
.amount .n{font-size:2.5rem;font-weight:800;line-height:1.15;}
.amount .n.zero{color:var(--muted2);}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 10px 10px;}
.keypad button{min-height:54px;border-radius:12px;background:var(--card2);border:1px solid var(--line);font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums;}
.keypad button:active{background:var(--acc-bg);}
.keypad button.fn{font-size:1.125rem;color:var(--muted);}
.savebar{flex:0 0 auto;display:flex;gap:8px;padding:8px 12px;background:var(--card);border-top:1px solid var(--line);}
.savebar .btn{min-height:52px;}
.savebar .btn.pri{flex:1;font-size:1.0625rem;}
details.fold{border-top:1px solid var(--line);}
details.fold>summary{list-style:none;display:flex;align-items:center;min-height:52px;padding:0 14px;font-weight:700;font-size:.9375rem;color:var(--acc-ink);cursor:pointer;}
details.fold>summary::-webkit-details-marker{display:none;}
details.fold>summary::after{content:"＋";margin-left:auto;color:var(--muted2);}
details.fold[open]>summary::after{content:"−";}
.receipt{max-width:100%;max-height:260px;border-radius:10px;display:block;border:1px solid var(--line);}

/* ---------- シート ---------- */
.mask{position:fixed;inset:0;background:rgba(8,12,24,.55);z-index:50;display:flex;align-items:flex-end;justify-content:center;}
.sheet{width:100%;max-width:560px;background:var(--card);border-radius:18px 18px 0 0;max-height:82vh;display:flex;flex-direction:column;padding-bottom:var(--safe-b);}
body.ads-on .mask{bottom:var(--ad-space);}
.sheet h4{margin:0;padding:16px 16px 4px;font-size:1.0625rem;}
.sheet .sb{padding:8px 16px 16px;overflow-y:auto;min-height:0;}
.sheet .sf{padding:8px 12px 12px;display:flex;gap:8px;border-top:1px solid var(--line);}
.sheet .sf .btn{flex:1;}
.opt{display:block;width:100%;min-height:52px;padding:10px 16px;text-align:left;border-top:1px solid var(--line);font-weight:600;font-size:.9375rem;}
.opt:active,.opt.on{background:var(--acc-bg);}
.opt small{display:block;font-weight:400;color:var(--muted);font-size:.75rem;}

/* トースト */
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(136px + var(--safe-b));width:calc(100% - 24px);max-width:520px;background:#1C2333;color:#fff;border-radius:12px;padding:6px 8px 6px 16px;font-size:.875rem;display:none;align-items:center;gap:8px;z-index:60;min-height:48px;box-shadow:0 4px 14px rgba(0,0,0,.3);}
#toast.on{display:flex;}
#toast span{flex:1;}
#toast button{color:#9DBBF7;font-weight:700;min-height:44px;padding:0 10px;}
body.ads-on #toast{bottom:calc(136px + var(--ad-space));}

/* ---------- グラフ ---------- */
.bars{display:flex;align-items:flex-end;gap:2px;height:120px;padding-top:6px;}
.bars .b{flex:1;min-width:0;height:100%;display:flex;align-items:flex-end;position:relative;}
.bars .b i{display:block;width:100%;background:var(--chart);border-radius:4px 4px 0 0;min-height:0;}
.bars .b.on i{background:var(--acc-ink);}
.axis{display:flex;gap:2px;margin-top:4px;border-top:1px solid var(--line2);padding-top:3px;}
.axis span{flex:1;min-width:0;text-align:center;font-size:.625rem;color:var(--muted);overflow:visible;white-space:nowrap;}
.vread{min-height:1.5em;font-size:.8125rem;font-weight:600;color:var(--text);}
.hbars{display:grid;gap:8px;}
.hbar .l{display:flex;justify-content:space-between;gap:8px;font-size:.8125rem;}
.hbar .l b{font-variant-numeric:tabular-nums;white-space:nowrap;}
.hbar .tr{height:8px;background:var(--card2);border-radius:4px;overflow:hidden;margin-top:3px;}
.hbar .tr i{display:block;height:100%;background:var(--chart);border-radius:0 4px 4px 0;}
.heat{display:grid;grid-template-columns:1.6em repeat(8,1fr);gap:2px;font-size:.625rem;color:var(--muted);align-items:center;text-align:center;}
.heat button{aspect-ratio:1.2;border-radius:4px;min-width:0;display:block;width:100%;}
.h0{background:var(--heat0);} .h1{background:var(--heat1);} .h2{background:var(--heat2);} .h3{background:var(--heat3);} .h4{background:var(--heat4);}
.heatkey{display:flex;align-items:center;gap:3px;font-size:.6875rem;color:var(--muted);margin-top:8px;}
.heatkey i{width:18px;height:10px;border-radius:2px;display:block;}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center;}
.cal .wd{font-size:.6875rem;color:var(--muted);padding:2px 0;}
.cal .d{min-height:48px;border-radius:8px;background:var(--card2);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.75rem;line-height:1.2;width:100%;}
.cal .d.has{background:var(--acc-bg);color:var(--acc-ink);font-weight:700;}
.cal .d.today{outline:2px solid var(--acc);outline-offset:-2px;}
.cal .d small{font-size:.5625rem;font-variant-numeric:tabular-nums;font-weight:600;}
.cal .blank{min-height:48px;}
.diff0{color:var(--good);font-weight:700;} .diffx{color:var(--bad);font-weight:700;}
.warnbox{background:var(--warn-bg);color:var(--warn);border-radius:10px;padding:10px 12px;font-size:.8125rem;line-height:1.6;font-weight:600;}
.infobox{background:var(--acc-bg);color:var(--acc-ink);border-radius:10px;padding:10px 12px;font-size:.875rem;line-height:1.65;}
.disc{font-size:.75rem;color:var(--muted);line-height:1.6;padding:8px 2px;}
.lines{margin:0;padding:0;list-style:none;}
.lines li{padding:8px 0;border-top:1px solid var(--line);font-size:.875rem;line-height:1.7;}
.lines li:first-child{border-top:none;}
.txrow{display:flex;align-items:center;gap:8px;min-height:56px;padding:6px 8px 6px 14px;border-top:1px solid var(--line);}
.txrow .m{flex:1;min-width:0;font-size:.875rem;}
.txrow.indent .m{padding-left:12px;color:var(--muted);}
.txrow.strong .m{font-weight:700;}
.txrow .v{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;}
.linkbtn{color:var(--acc-ink);font-weight:600;text-decoration:underline;min-height:44px;font-size:.875rem;}
/* 初回の設定 */
.onb{min-height:100%;display:flex;flex-direction:column;padding:12px 16px 16px;}
.onb h2{font-size:1.5rem;line-height:1.35;margin:12px 0 8px;}
.onb p{margin:0 0 12px;color:var(--muted);font-size:.9375rem;}
.onb .steps{font-size:.75rem;font-weight:700;color:var(--acc-ink);}
.onb .gap{flex:1;min-height:12px;}
.shot{border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden;margin-bottom:12px;}