:root{
  --bg:#f5f4f0;
  --card:#ffffff;
  --ink:#23262b;
  --sub:#6b7280;
  --line:#e7e5df;
  --field:#fbfaf7;
  --accent:#f0efe9;
  --brand:#1E88E5;
  --brand-dark:#1668b5;
  --on-brand:#ffffff;
  --day:#c98a1e;
  --night:#5b46b8;
  --sat:#3b6fa8;
  --off:#b0aca4;
  --high:#d8523f;
  --shadow:0 1px 2px rgba(20,22,26,.04),0 8px 24px rgba(20,22,26,.06);
  --r:14px;
}
[data-theme="dark"]{
  --bg:#1e1e1e;
  --card:#2d2d2d;
  --ink:#e0e0e0;
  --sub:#aaaaaa;
  --line:#444444;
  --field:#262626;
  --accent:#3a3a3a;
  --brand:#79C7FF;
  --brand-dark:#9ad6ff;
  --on-brand:#0e2438;
  --day:#e0a53f;
  --night:#b0a2f2;
  --sat:#93b8e0;
  --off:#777777;
  --high:#ef6d5a;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Segoe UI",sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding:calc(20px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
  transition:background .2s,color .2s;
}
.wrap{max-width:460px;margin:0 auto}

header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:4px 2px 18px}
.head-left{min-width:0}
h1{font-size:1.3rem;font-weight:700;margin:0;letter-spacing:.02em;display:flex;align-items:center;gap:8px}
/* flex-start にしないと子が同じ幅に引き伸ばされ、文字幅が測れなくなる */
h1 .brand-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;gap:2px}
h1 .brand-ja{font-size:1em}
h1 .brand-en{display:block;font-size:.34em;font-weight:700;color:#7a88a5;white-space:nowrap}
[data-theme="dark"] h1 .brand-en{color:#93a1c2}
/* アイコンの高さ＝「スマレコ」＋「SMILE RECORD」2行分の高さに固定 */
h1 .ico{width:1.64em;height:1.64em;flex:none;color:var(--brand)}
header p{margin:4px 0 0;color:var(--sub);font-size:.82rem}

.btn-theme{display:flex;align-items:center;gap:6px;flex:none;
  background:var(--accent);border:1px solid var(--line);color:var(--sub);
  padding:5px 10px;border-radius:6px;cursor:pointer;font-family:inherit;font-size:12px;font-weight:700;
  transition:all .15s;-webkit-tap-highlight-color:transparent}
.btn-theme:hover{border-color:#888;color:var(--ink)}
.btn-theme svg{width:14px;height:14px;flex:none}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 16px;margin-bottom:16px}
.label{font-size:.78rem;font-weight:700;color:var(--sub);letter-spacing:.04em;margin:0 0 8px}

select,input[type=text],input[type=date],input[type=time],input[type=number]{
  font-family:inherit;font-size:1rem;color:var(--ink);
  background:var(--field);border:1px solid var(--line);border-radius:10px;
  padding:11px 10px;appearance:none;-webkit-appearance:none;min-width:0;
}
select{padding-right:26px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center}
/* 日付・時刻の入力欄には自前のアイコンを出す（iOS Safari はネイティブのアイコンを描画しないため） */
input[type=date],input[type=time]{
  padding-right:34px;background-repeat:no-repeat;background-position:right 10px center;background-size:16px 16px;
}
input[type=date]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.9' stroke-linecap='round'%3E%3Crect x='3.2' y='4.8' width='17.6' height='16' rx='2.6'/%3E%3Cpath d='M3.2 9.6h17.6M8 3.2v3.2M16 3.2v3.2'/%3E%3C/svg%3E")}
input[type=time]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='M12 6.8V12l3.6 2.2'/%3E%3C/svg%3E")}
[data-theme="dark"] input[type=date]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaaaaa' stroke-width='1.9' stroke-linecap='round'%3E%3Crect x='3.2' y='4.8' width='17.6' height='16' rx='2.6'/%3E%3Cpath d='M3.2 9.6h17.6M8 3.2v3.2M16 3.2v3.2'/%3E%3C/svg%3E")}
[data-theme="dark"] input[type=time]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaaaaa' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='M12 6.8V12l3.6 2.2'/%3E%3C/svg%3E")}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator{opacity:0;cursor:pointer}
input:focus-visible,select:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---- 打刻 ---- */
.now{text-align:center;padding:4px 0 2px}
.now-state{font-size:.78rem;font-weight:700;letter-spacing:.05em;color:var(--sub)}
.now-clock{font-family:"Roboto Mono",ui-monospace,monospace;font-weight:700;font-size:2.6rem;letter-spacing:-.02em;
  margin:2px 0 0;color:var(--ink);font-variant-numeric:tabular-nums}
.now-since{font-size:.82rem;color:var(--sub);margin:0}
.big{width:100%;margin-top:14px;padding:16px;border:none;border-radius:12px;
  background:var(--brand);color:var(--on-brand);font-family:inherit;font-size:1.05rem;font-weight:700;
  cursor:pointer;transition:background .15s,transform .05s;-webkit-tap-highlight-color:transparent}
.big:hover{background:var(--brand-dark)}
.big:active{transform:scale(.99)}
.big.stop{background:var(--high);color:#fff}
.big.stop:hover{background:#b8422f}
.linkbtn{display:block;margin:10px auto 0;background:none;border:none;color:var(--sub);
  font-family:inherit;font-size:.78rem;text-decoration:underline;cursor:pointer;padding:4px}
.linkbtn:hover{color:var(--high)}

/* ---- 見積り控除（外れていた時間） ---- */
.lost-toggle{margin:10px 0 0;text-align:left;padding:4px 2px}
.lost-toggle.set{color:var(--brand);font-weight:700}
.lost-panel{margin-top:8px;padding:12px;border:1px dashed var(--line);border-radius:10px;background:var(--field)}
.lost-chips{display:flex;flex-wrap:wrap;gap:6px}
.lost-chip{border:1px solid var(--line);background:var(--card);color:var(--ink);
  font-family:inherit;font-size:.82rem;padding:6px 12px;border-radius:999px;cursor:pointer;
  transition:all .15s;-webkit-tap-highlight-color:transparent}
.lost-chip:hover{border-color:var(--brand)}
.lost-chip.active{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.lost-custom{display:flex;align-items:center;gap:8px;margin-top:10px}
.lost-custom input{width:88px;flex:none;padding:9px 10px}
.lost-unit{font-size:.85rem;color:var(--sub)}
.lost-custom .linkbtn{margin:0 0 0 auto;padding:4px}

/* ---- 手入力 ---- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.field-row+.grid2{margin-top:8px}
.grid2 input,.grid2 select{width:100%}
.field-row{display:flex;gap:8px;align-items:center;margin-top:8px}
.field-row input[type=date]{flex:1}
.field-row select{flex:none;width:112px}
.offbtn{flex:none;width:112px;padding:11px 8px;border-radius:10px;border:1px solid var(--line);
  background:var(--field);color:var(--sub);font-family:inherit;font-size:.85rem;font-weight:700;
  cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent}
.offbtn:hover{border-color:var(--high);color:var(--high)}
input.wide{width:100%;margin-top:8px}
.btn-row{display:flex;gap:10px;margin-top:14px}
.cbtn{flex:1;padding:12px;border-radius:10px;border:1px solid var(--brand);background:var(--card);color:var(--brand);
  font-family:inherit;font-weight:700;font-size:.9rem;cursor:pointer;transition:background .15s;-webkit-tap-highlight-color:transparent}
.cbtn:hover{background:var(--accent)}
.cbtn.primary{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.cbtn.primary:hover{background:var(--brand-dark)}
.cbtn.ghost{border-color:var(--line);color:var(--sub)}
.cbtn.ghost:hover{background:var(--accent);color:var(--ink)}
[data-theme="dark"] .cbtn:not(.primary):not(.ghost){color:var(--brand);border-color:#3f7ba8}
.hint{color:var(--high);font-size:.78rem;margin:8px 2px 0;display:none}
.hint.show{display:block}
#formCard.editing{border-color:var(--brand)}
.edit-flag{display:none;font-weight:500;color:var(--brand)}
#formCard.editing .edit-flag{display:inline}

/* ---- 月ナビ ---- */
.mnav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 12px}
.mnav button{width:38px;height:38px;flex:none;border-radius:10px;border:1px solid var(--line);
  background:var(--field);color:var(--ink);font-size:1.1rem;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mnav button:hover{background:var(--accent)}
.mnav h2{margin:0;font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums}

/* ---- 集計 ---- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.stat{background:var(--card);padding:11px 12px}
.stat dt{font-size:.72rem;color:var(--sub);font-weight:700;letter-spacing:.04em;margin:0}
.stat dd{margin:2px 0 0;font-family:"Roboto Mono",ui-monospace,monospace;font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums}

/* ---- 日別リスト ---- */
.days{list-style:none;margin:0;padding:0}
.days li{display:flex;gap:10px;align-items:flex-start;padding:9px 2px;border-bottom:1px solid var(--line)}
.days li:last-child{border-bottom:none}
.days li.today{background:var(--accent);border-radius:8px;padding-left:6px;padding-right:6px}
.dnum{flex:none;width:46px;display:flex;align-items:baseline;gap:3px;
  font-family:"Roboto Mono",ui-monospace,monospace;font-weight:700;font-size:1rem;
  font-variant-numeric:tabular-nums;padding-top:1px}
.dnum::before{content:"";flex:1}
.dnum .dw{font-family:inherit;font-size:.7rem;font-weight:500;color:var(--sub)}
.dnum.sat{color:var(--sat)}
.dnum.sun{color:var(--high)}
.dbody{flex:1;min-width:0}
.slot{display:flex;gap:7px;align-items:flex-start;margin-bottom:2px}
.slot:last-child{margin-bottom:0}
.slot .sic{flex:none;width:15px;display:flex;justify-content:center;padding-top:5px;color:var(--day)}
.slot .sic svg{width:11px;height:11px}
.slot.night .sic{color:var(--night)}
.chips{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.entry{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
.chip{border:1px solid var(--line);background:var(--field);border-radius:7px;padding:2px 7px;
  font-size:.8rem;font-variant-numeric:tabular-nums;cursor:pointer;-webkit-tap-highlight-color:transparent;
  font-family:inherit;color:var(--ink);line-height:1.5;text-align:left}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.cn{color:var(--sub);font-size:.74rem;line-height:1.45;padding-left:2px;word-break:break-all}
.dtot{flex:none;font-family:"Roboto Mono",ui-monospace,monospace;font-size:.8rem;color:var(--sub);
  font-variant-numeric:tabular-nums;padding-top:3px;white-space:nowrap}
.dblank{color:var(--sub);opacity:.5;font-size:.85rem;padding-top:1px}
.doff{color:var(--off);font-weight:700;font-size:.9rem;letter-spacing:.1em}
.dxbtn{flex:none;border:none;background:none;color:#c3bfb7;cursor:pointer;font-size:.85rem;
  line-height:1;padding:6px;border-radius:7px;-webkit-tap-highlight-color:transparent}
.dxbtn:hover{color:var(--high);background:rgba(216,82,63,.12)}
[data-theme="dark"] .dxbtn{color:#6a6a6a}
.dxpad{flex:none;width:29px}

.legend{display:flex;gap:14px;flex-wrap:wrap;margin:12px 2px 0;font-size:.74rem;color:var(--sub)}
.legend span{display:flex;align-items:center;gap:4px}
.legend span svg{width:11px;height:11px;flex:none}
#lgDay svg{color:var(--day)}
#lgNight svg{color:var(--night)}

/* ---- about / footer ---- */
details.about{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden}
details.about>summary{list-style:none;cursor:pointer;padding:15px 16px;font-weight:700;font-size:.9rem;color:var(--ink);display:flex;align-items:center;justify-content:space-between;-webkit-tap-highlight-color:transparent}
details.about>summary::-webkit-details-marker{display:none}
details.about>summary::after{content:"＋";color:var(--sub);font-weight:400;font-size:1.1rem}
details.about[open]>summary::after{content:"−"}
details.about .doc{padding:0 16px 16px}
details.about .doc ul{margin:0;padding-left:1.1em}
details.about .doc li{font-size:.83rem;color:var(--sub);line-height:1.7;margin-bottom:8px}
details.about .doc li:last-child{margin-bottom:0}
details.about .doc strong{color:var(--ink)}
.ver{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line);
  font-size:.74rem;color:var(--sub);font-variant-numeric:tabular-nums}
.ver b{font-family:"Roboto Mono",ui-monospace,monospace;font-weight:700;color:var(--ink)}
.footer-copyright{margin-top:4px;padding:14px 4px 0;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.footer-copy-text{margin:0;font-size:.76rem;color:var(--sub)}
.footer-link{color:var(--sub);text-decoration:none;border-bottom:1px solid var(--line)}
.footer-link:hover{color:var(--brand);border-color:var(--brand)}
.footer-tools-link{font-size:.76rem;white-space:nowrap}
.note-s{color:var(--sub);font-size:.74rem;margin:10px 2px 0;line-height:1.6}

/* ---- toast ---- */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-size:.85rem;font-weight:500;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:20;max-width:88vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- 更新バー ---- */
.update-bar{position:fixed;left:0;right:0;bottom:0;background:var(--brand);color:var(--on-brand);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:none;align-items:center;justify-content:center;gap:14px;
  font-size:.85rem;z-index:30}
.update-bar.show{display:flex}
.update-bar button{background:var(--on-brand);color:var(--brand);border:none;border-radius:8px;padding:7px 14px;
  font-family:inherit;font-weight:700;font-size:.82rem;cursor:pointer}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* =====================================================
   印刷（A4横・1ページに2ヶ月／日曜始まりカレンダー）
   ===================================================== */
#printArea{display:none}

@page{size:A4 landscape;margin:8mm}

@media print{
  html,body{background:#fff;color:#000;padding:0;margin:0}
  .wrap,.toast,.update-bar{display:none !important}
  #printArea{display:flex;flex-direction:column;gap:4mm;height:186mm;
    font-family:"Noto Sans JP",-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;color:#000}

  .p-month{flex:1 1 0;display:flex;flex-direction:column;min-height:0}
  .p-head{display:flex;align-items:baseline;gap:5mm;margin:0 0 1.4mm;border-bottom:.6mm solid #000;padding-bottom:.7mm}
  .p-head h2{margin:0;font-size:12.5pt;font-weight:700;letter-spacing:.06em}
  .p-sum{font-size:7.5pt;font-weight:500;margin-left:auto;letter-spacing:.02em}
  .p-sum b{font-weight:700}

  .p-cal{flex:1 1 0;display:flex;flex-direction:column;min-height:0;
    border:.5mm solid #000;border-radius:2mm;overflow:hidden}
  .p-wh{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:.5mm solid #000;
    font-size:7pt;font-weight:700;text-align:center}
  .p-wh span{padding:.4mm 0}
  .p-wh span+span{border-left:.2mm solid #999}
  .p-wh .sun,.p-wh .sat{background:#f0f0f0}

  .p-weeks{flex:1 1 0;display:flex;flex-direction:column;min-height:0}
  .p-week{flex:1 1 0;display:grid;grid-template-columns:repeat(7,1fr);
    border-top:.35mm solid #666;min-height:0}
  .p-week:first-child{border-top:none}

  .p-cell{display:grid;grid-template-columns:4.2mm 1fr;grid-template-rows:1fr 1fr;
    min-width:0;overflow:hidden;border-left:.35mm solid #666}
  .p-cell:first-child{border-left:none}
  .p-cell.void{background:#f7f7f7}
  .p-dn{grid-column:1;grid-row:1 / 3;display:flex;justify-content:center;
    padding-top:.5mm;font-size:6.4pt;font-weight:700;line-height:1.2;
    border-right:.2mm solid #bbb;font-variant-numeric:tabular-nums}

  .p-slot{grid-column:2;display:flex;gap:.5mm;padding:.3mm .7mm;
    font-size:5.6pt;line-height:1.3;min-height:0;overflow:hidden;font-variant-numeric:tabular-nums}
  .p-slot+.p-slot{border-top:.2mm dotted #aaa}
  .p-slot .pic{flex:none;width:2mm;padding-top:.35mm}
  .p-slot .pic svg{width:2mm;height:2mm;display:block}
  .p-slot .ptx{flex:1;min-width:0}
  /* 時刻は折り返さない。収まらない場合は文字を落として1行に保つ */
  .p-slot .ln{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .p-slot .memo{font-size:.88em;color:#333}
  .p-slot.n3{font-size:5pt;line-height:1.2}

  .p-offcell{grid-column:2;grid-row:1 / 3;align-items:center;justify-content:center;
    font-size:11pt;font-weight:700;border-top:none}
}