/* モック v5（mockup/report-app-mockup-v5.html）の <style> をそのまま切り出したもの。見た目の正本はモック側。末尾「実装で足した分」だけがアプリ固有 */
/* 配色は白文字・白背景の双方で 4.5:1 以上を満たす濃度に調整済み
   （調整前：blue #3B6EF5=4.43 / green #06C755=2.25 / red #FF3B30=3.56 / sub #8E8E93=3.05） */
:root{
  --blue:#2A5AD9;      /* 白文字と 6.02:1 ／ 白地の文字として 6.02:1 */
  --blue-pale:#E8F0FE;
  --green:#2A5AD9;     /* 旧・緑系。ユーザー指定で青統一（ログインボタンと同色）。白文字と 5.89:1 */
  --red:#D62B21;       /* 白文字と 5.02:1 ／ #F5F6F8 上の文字で 4.69:1 */
  --text:#1A1A1A;
  --sub:#63666C;       /* 白地 5.76:1 ／ #F5F6F8 上 5.38:1 ／ #EEF0F3 上 5.00:1 */
  --line:#EBEDF0;
  --bg:#F5F6F8;
  --white:#FFFFFF;
  --safe-b:env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;overflow:hidden;overscroll-behavior:none;}
html{touch-action:manipulation;}
body{
  touch-action:manipulation;
  position:fixed;inset:0;   /* iOSのゴムバンドでページ全体（固定フッター含む）が動くのを防ぐ */
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;font-size:inherit;color:inherit;border:none;background:none;padding:0;cursor:pointer;}
input{font-family:inherit;font-size:16px;color:inherit;}

/* ============ 端末フレーム ============ */
.phone{
  max-width:430px;
  margin:0 auto;
  background:var(--white);
  min-height:100vh;
  height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  box-shadow:0 0 0 1px var(--line);
}
@supports (height:100dvh){ .phone{height:100dvh;min-height:100dvh;} }

.appbar{
  flex:0 0 auto;
  background:var(--white);
  border-bottom:1px solid var(--line);
  padding:14px 16px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.appbar .company{font-size:17px;font-weight:700;letter-spacing:.01em;}
.appbar .who{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--sub);background:none;border:none;padding:0;min-height:44px;font-family:inherit;}
.avatar{
  width:32px;height:32px;border-radius:50%;
  background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;flex:0 0 auto;
}
.appbar.sub{justify-content:flex-start;}
.appbar .title{font-size:17px;font-weight:700;}
.appbar .right{display:flex;align-items:center;gap:6px;}
/* 役職ラベル（部長・社長）。ベタ塗り＋白文字で同系色の重ねを避ける */
.rolepill{
  display:inline-flex;align-items:center;
  font-size:11px;font-weight:700;line-height:1;
  padding:5px 8px;border-radius:999px;
  background:var(--blue);color:#fff;
}
/* ヘッダー右上のアイコンボタン（部長→役員ビュー） */
.iconbtn{
  width:40px;height:40px;border-radius:12px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:var(--white);color:var(--blue);
  border:1.5px solid #C9D4EE;
}
.iconbtn:active{background:var(--blue-pale);}
.iconbtn svg{width:22px;height:22px;}
.iconbtn.on{background:var(--blue);color:#fff;}

.body{
  flex:1 1 auto;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;   /* 端までスクロールしてもページ側に伝播させない */
  background:var(--bg);
  padding-bottom:calc(74px + var(--safe-b));  /* 固定タブバーぶんの逃げ */
}
.pane{display:none;padding:16px 16px calc(28px + var(--safe-b));}
.pane.on{display:block;}

/* ============ タブバー ============ */
/* 最下部の要素なので safe-area 分を自分で持つ（ホームインジケータとの重なり防止）。
   モック注記もこの中に入れて、インセットの二重取りを避けている */
.tabbar{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;z-index:30;
  display:flex;flex-direction:column;
  background:var(--white);
  border-top:1px solid var(--line);
  padding:6px 4px calc(4px + var(--safe-b));
}
.tabrow{display:flex;}
.tabbtn{
  flex:1;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:4px 0 2px;
  color:var(--sub);
  position:relative;
}
.tabbtn .ico{
  width:52px;height:28px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.tabbtn svg{width:22px;height:22px;}
.tabbtn .lbl{font-size:11px;font-weight:600;letter-spacing:0;}
.tabbtn.on{color:var(--blue);}
.tabbtn.on .ico{background:var(--blue-pale);}
.tabdot{
  position:absolute;top:2px;right:calc(50% - 20px);
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--red);color:#fff;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.footnote{
  flex:0 0 auto;
  text-align:center;
  font-size:11px;
  color:var(--sub);
  margin-top:5px;padding:5px 8px 0;
  border-top:1px solid var(--line);
  letter-spacing:.02em;
}

/* ============ 共通パーツ ============ */
.card{
  background:var(--white);
  border-radius:16px;
  box-shadow:0 1px 3px rgba(26,26,26,.05);
  padding:16px;
  margin-bottom:14px;
}
.card.tight{padding:14px 16px;}
.sect-title{
  font-size:13px;font-weight:700;color:var(--sub);
  letter-spacing:.04em;margin:22px 2px 8px;
}
.sect-title:first-child{margin-top:2px;}
.list{
  background:var(--white);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(26,26,26,.05);
  margin-bottom:14px;
}
.row{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  width:100%;text-align:left;
}
.row:last-child{border-bottom:none;}
.row:active{background:#FAFBFC;}
.row .main{flex:1 1 auto;min-width:0;}
.row .ttl{font-size:16px;font-weight:600;line-height:1.4;}
.row .meta{font-size:13px;color:var(--sub);margin-top:3px;}
.row .snip{font-size:14px;color:#5A5D63;margin-top:5px;line-height:1.5;}
.chev{
  flex:0 0 auto;width:9px;height:9px;
  border-right:2px solid #C7C9CE;border-top:2px solid #C7C9CE;
  transform:rotate(45deg);margin-left:2px;
}
/* ピル・バッジは「ベタ塗り＋白文字」に統一（同系色の重ねを排除） */
.pill{
  display:inline-flex;align-items:center;
  font-size:12px;font-weight:700;line-height:1;
  padding:5px 9px;border-radius:999px;
  background:var(--blue);color:#fff;
}
.pill.red{background:var(--red);color:#fff;}
.pill.green{background:var(--green);color:#fff;}
/* 業務記録の区分など、青ピルと並べる副次ラベル（白地＋濃い文字） */
.pill.ghost{background:var(--white);color:var(--text);border:1px solid #C9D8F5;}
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 7px;border-radius:11px;
  background:var(--red);color:#fff;font-size:12px;font-weight:700;line-height:1;
}
.btn{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:52px;border-radius:14px;
  font-size:17px;font-weight:700;
}
.btn.green{background:var(--green);color:#fff;}
.btn.green:active{background:#086C2F;}
.btn.blue{background:var(--blue);color:#fff;}
.btn.ghost{background:var(--white);color:var(--blue);border:1px solid var(--line);}
.btn.line{background:#fff;border:1px solid var(--line);color:var(--text);}
.linkbtn{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:44px;text-align:center;
  color:var(--blue);font-size:15px;font-weight:600;padding:10px 0;
}
.hint{font-size:13px;color:var(--sub);line-height:1.6;}

/* ============ ログイン ============ */
#screen-login{
  position:absolute;inset:0;z-index:60;
  background:var(--white);
  display:flex;flex-direction:column;
  padding:0 26px;
  overflow-y:auto;
}
.login-inner{margin:auto 0;padding:56px 0 24px;width:100%;}
.login-mark{
  font-size:12px;font-weight:700;color:var(--blue);
  letter-spacing:.14em;margin-bottom:6px;
}
.login-name{font-size:27px;font-weight:800;letter-spacing:.01em;line-height:1.3;}
.login-co{font-size:14px;color:var(--sub);margin-top:6px;}
.field{margin-top:16px;}
.field label{display:block;font-size:13px;font-weight:700;color:var(--sub);margin-bottom:6px;}
.field input{
  width:100%;height:52px;padding:0 14px;
  background:var(--bg);border:1px solid var(--line);border-radius:12px;
}
.field input:focus{outline:none;border-color:var(--blue);background:#fff;}
.login-note{
  font-size:13px;color:var(--sub);line-height:1.6;
  margin-top:18px;padding:12px 14px;background:var(--bg);border-radius:12px;
}
.login-foot{text-align:center;font-size:11px;color:var(--sub);padding:0 0 calc(18px + var(--safe-b));}

/* ============ Todayカード ============ */
.today{
  background:var(--white);border-radius:16px;padding:16px;
  box-shadow:0 1px 3px rgba(26,26,26,.05);margin-bottom:18px;
}
.today .date{font-size:14px;color:var(--sub);font-weight:600;}
.today .head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.today .cnt{font-size:24px;font-weight:800;margin-top:2px;letter-spacing:.01em;}
.today .cnt em{font-style:normal;font-size:15px;font-weight:700;color:var(--sub);margin-left:4px;}
.status-line{
  display:flex;align-items:center;gap:8px;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  font-size:15px;font-weight:600;
}
.status-line.warn{color:var(--red);}
.status-line.ok{color:var(--green);}

/* ============ ホーム：あいさつ ============ */
.hgreet{padding:2px 2px 0;margin-bottom:10px;}
.hgreet .nm{font-size:20px;font-weight:800;letter-spacing:.01em;line-height:1.4;}
.hgreet .dt{font-size:14px;color:var(--sub);font-weight:600;margin-top:2px;}

/* ============ 次にすること ============ */
/* 各記録のアクションプラン（期日付き）を、期日が近い順に最大3件 */
/* ============ ホーム 文字入力の導線 ============ */
.txt-div{
  display:flex;align-items:center;gap:12px;margin:0 2px 12px;
  color:#A8AEB9;font-size:12px;font-weight:700;letter-spacing:.08em;
}
.txt-div::before,.txt-div::after{content:'';flex:1;height:1px;background:#D5D9E0;}
.txt-btns{display:flex;gap:10px;margin-bottom:4px;}
.txt-btn{
  flex:1;min-height:50px;display:flex;align-items:center;justify-content:center;gap:7px;
  background:var(--white);border:1.5px solid #D5D9E0;border-radius:14px;
  font-size:15px;font-weight:700;color:var(--text);
}
.txt-btn:active{background:var(--blue-pale);border-color:var(--blue);}
.txt-btn svg{width:19px;height:19px;color:var(--blue);flex:0 0 auto;}

/* ============ ホーム「今日の記録」カード ============ */
.today-card{
  display:block;width:100%;text-align:left;
  background:var(--white);border-radius:16px;padding:16px;
  box-shadow:0 1px 4px rgba(20,40,80,.06);
}
.today-card:active{opacity:.85;}
.today-nums{display:flex;align-items:center;gap:0;}
.today-nums .cell{flex:1;text-align:center;}
.today-nums .cell + .cell{border-left:1px solid var(--line);}
.today-nums .n{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2;}
.today-nums .n small{font-size:13px;font-weight:700;margin-left:2px;}
.today-nums .cell{position:relative;}
.today-nums .cell.up .n{color:var(--blue);animation:numPop .55s ease-out;}
@keyframes numPop{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
.today-nums .l{font-size:12px;font-weight:700;color:var(--sub);margin-top:2px;}
.today-status{
  display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line);font-size:14px;font-weight:600;
}
.today-status .chev{margin-left:auto;color:var(--sub);}

/* ============ 大マイクボタン ============ */
.mic-wrap{display:flex;flex-direction:column;align-items:center;padding:2px 0 16px;}
.mic-btn{
  width:112px;height:112px;border-radius:50%;
  background:#5B8AF7; /* 薄めの青（ユーザー指定）。白アイコンと3.27:1 */
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(91,138,247,.34);
  position:relative;
}
.mic-btn:active{transform:scale(.96);}
.mic-btn svg{width:46px;height:46px;color:#fff;}
.mic-ring{
  position:absolute;inset:-10px;border-radius:50%;
  border:2px solid rgba(91,138,247,.30);
  animation:ringPulse 2.4s ease-out infinite;
}
@keyframes ringPulse{
  0%{transform:scale(.92);opacity:.9}
  70%{transform:scale(1.14);opacity:0}
  100%{opacity:0}
}
.mic-cap{margin-top:12px;font-size:16px;font-weight:700;}
.mic-sub{font-size:13px;color:var(--sub);margin-top:2px;}

/* ============ 録音オーバーレイ ============ */
.overlay{
  position:absolute;inset:0;z-index:50;
  background:var(--white);
  display:none;flex-direction:column;
  padding:0 24px var(--safe-b);
}
.overlay.on{display:flex;}
.ov-inner{margin:auto 0;width:100%;text-align:center;padding:40px 0;}
.rec-dot{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:700;color:var(--red);letter-spacing:.06em;
}
.rec-dot i{width:10px;height:10px;border-radius:50%;background:var(--red);animation:blink 1.1s infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.timer{font-size:44px;font-weight:800;letter-spacing:.02em;margin:10px 0 4px;font-variant-numeric:tabular-nums;}
.rec-guide{
  background:var(--blue-pale);border-radius:16px;padding:16px 4px;margin-top:16px;
  display:flex;text-align:left;
}
.gcol{flex:1;min-width:0;padding:0 14px;}
.gcol + .gcol{border-left:1px dashed rgba(42,90,217,.22);}
.gcol .gh{
  font-size:11px;font-weight:800;color:var(--blue);letter-spacing:.08em;margin-bottom:10px;
}
.gcol.alt .gh{color:#5A6B8C;}
.gstep{
  position:relative;padding-left:18px;
  font-size:13.5px;font-weight:700;color:var(--text);line-height:1.35;
}
.gstep + .gstep{margin-top:12px;}
.gstep::before{
  content:'';position:absolute;left:0;top:4px;width:8px;height:8px;border-radius:50%;
  background:var(--blue);
}
.gstep:not(:last-child)::after{
  content:'';position:absolute;left:3px;top:15px;height:14px;width:2px;
  background:rgba(42,90,217,.25);border-radius:1px;
}
.gstep .gsub{display:block;font-size:11px;font-weight:600;color:var(--sub);margin-top:1px;}
.gcol.alt .gstep::before{background:#5A6B8C;}
.gcol.alt .gstep:not(:last-child)::after{background:rgba(90,107,140,.28);}
.rec-hint{font-size:15px;color:var(--sub);margin-top:8px;}
.rec-said{
  background:var(--bg);border-radius:14px;padding:14px 16px;
  font-size:15px;color:#5A5D63;text-align:left;margin-top:22px;line-height:1.65;min-height:74px;
}
.stop-btn{
  width:84px;height:84px;border-radius:50%;
  background:var(--red);margin:26px auto 0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(214,43,33,.30);
}
.stop-btn i{width:28px;height:28px;background:#fff;border-radius:6px;display:block;}
.ov-cancel{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:120px;margin-top:12px;color:var(--sub);font-size:15px;font-weight:600;}

/* 整形中 */
.spinner{
  width:52px;height:52px;margin:0 auto 20px;border-radius:50%;
  border:4px solid var(--line);border-top-color:var(--blue);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.proc-t{font-size:19px;font-weight:700;}
.proc-s{font-size:14px;color:var(--sub);margin-top:8px;line-height:1.7;}
.proc-steps{margin:22px auto 0;max-width:280px;text-align:left;}
/* 未完了ステップは opacity で薄めず、コントラストを満たす色差で表現する */
.proc-steps div{
  font-size:14px;color:var(--sub);padding:6px 0 6px 24px;position:relative;
  transition:color .3s,font-weight .3s;
}
.proc-steps div.done{color:var(--text);font-weight:700;}
.proc-steps div::before{
  content:"";position:absolute;left:2px;top:12px;
  width:8px;height:8px;border-radius:50%;background:#D5D7DB;
}
.proc-steps div.done::before{background:var(--green);}

/* 完了画面 */
.done-mark{
  width:88px;height:88px;border-radius:50%;background:var(--green);
  margin:0 auto 20px;display:flex;align-items:center;justify-content:center;
}
.done-mark i{
  display:block;width:30px;height:16px;
  border-left:5px solid #fff;border-bottom:5px solid #fff;
  transform:rotate(-45deg) translate(2px,-4px);border-radius:2px;
}
.done-t{font-size:23px;font-weight:800;}
.done-s{font-size:15px;color:var(--sub);margin-top:10px;line-height:1.7;}
.done-box{
  background:var(--bg);border-radius:14px;padding:14px 16px;margin:22px 0 26px;
  font-size:14px;color:#5A5D63;text-align:left;line-height:1.8;
}

/* ============ 月次レポート（フルスクリーン） ============ */
.overlay.doc{padding:0;}
.doc-head{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:13px 16px;border-bottom:1px solid var(--line);background:var(--white);
}
.doc-head .t{flex:1;font-size:16px;font-weight:800;line-height:1.35;}
.doc-close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:flex-end;min-height:44px;min-width:60px;font-size:15px;font-weight:700;color:var(--blue);}
.doc-body{flex:1 1 auto;overflow-y:auto;background:var(--bg);padding:16px 16px 24px;}
.doc-foot{flex:0 0 auto;padding:12px 16px calc(14px + var(--safe-b));border-top:1px solid var(--line);background:var(--white);}
.notice{
  background:var(--blue-pale);color:var(--text);
  border-radius:12px;padding:11px 13px;font-size:13px;font-weight:600;line-height:1.55;
}
.doc-ed{
  padding:6px 8px;margin:0 -8px;border-radius:8px;
  border:1px solid transparent;outline:none;line-height:1.75;
}
.doc-ed:focus{border-color:var(--blue);background:#fff;}
.cnt-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);}
.cnt-row:last-child{border-bottom:none;}
.cnt-row .nm{flex:1;font-size:15px;font-weight:600;}
.cnt-row .bar{flex:0 0 84px;height:8px;border-radius:4px;background:var(--bg);overflow:hidden;}
.cnt-row .bar i{display:block;height:100%;background:var(--blue);border-radius:4px;}
.cnt-row .vl{flex:0 0 46px;text-align:right;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;}
.cnt-row.total{border-top:2px solid var(--line);margin-top:4px;}
.doc-ico{
  flex:0 0 auto;width:40px;height:40px;border-radius:12px;background:var(--blue);
  display:flex;align-items:center;justify-content:center;
}
.doc-ico svg{width:21px;height:21px;color:#fff;}

/* ============ 業務日報（帳票風ポップアップ） ============ */
.rpt-paper{
  background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:18px 14px 20px;box-shadow:0 2px 10px rgba(20,40,80,.06);
}
.rpt-titlebar{margin-bottom:12px;}
.rpt-title{
  padding-top:4px;text-align:center;
  font-size:20px;font-weight:800;letter-spacing:.42em;text-indent:.42em;color:var(--text);
}
.rpt-meta{
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-size:13px;font-weight:600;color:var(--text);
  border-top:2px solid var(--text);border-bottom:1px solid #C9CDD6;
  padding:8px 2px;margin-bottom:14px;
}
.rpt-sec{margin-top:14px;}
.rpt-sec .h{
  font-size:12px;font-weight:800;color:var(--sub);letter-spacing:.08em;
  padding-bottom:4px;margin-bottom:6px;border-bottom:2px solid var(--text);
}
table.rpt-t{width:100%;border-collapse:collapse;}
.rpt-t th,.rpt-t td{
  border:1px solid #C9CDD6;padding:7px 8px;font-size:13px;line-height:1.55;
  text-align:left;vertical-align:top;color:var(--text);
}
.rpt-t th{background:var(--bg);font-size:11px;font-weight:700;color:var(--sub);white-space:nowrap;}
.rpt-t .tm{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:700;}
.rpt-t .cs{font-weight:700;}
.rpt-t .kd{font-size:11px;font-weight:700;color:var(--blue);white-space:nowrap;}
.rpt-box{
  border:1px solid #C9CDD6;border-radius:4px;padding:9px 10px;
  font-size:13px;line-height:1.65;color:var(--text);min-height:44px;
}
.rpt-box.empty{color:var(--sub);}
/* 手修正できる欄（タップで編集） */
.rpt-ed{outline:none;}
.rpt-t .cs.rpt-ed{display:inline-block;min-width:3em;}
.rpt-t .kd.rpt-ed{display:inline-block;min-width:2.5em;}
.rpt-ed:focus{background:#fff;box-shadow:inset 0 0 0 2px var(--blue);border-radius:4px;}
.rpt-box.rpt-ed:empty::before{content:attr(data-ph);color:var(--sub);}

/* ============ 整形結果カード ============ */
.result-head{
  display:flex;align-items:center;gap:8px;
  background:var(--blue-pale);border-radius:14px;padding:12px 14px;margin-bottom:14px;
}
.result-head .t{font-size:14px;font-weight:700;color:var(--text);line-height:1.5;}
.fld{padding:12px 0;border-bottom:1px solid var(--line);}
.fld:last-child{border-bottom:none;padding-bottom:2px;}
.fld .k{
  font-size:12px;font-weight:700;color:var(--sub);
  letter-spacing:.04em;display:flex;align-items:center;justify-content:space-between;
}
.fld .k .edit{
  display:inline-flex;align-items:center;min-height:44px;padding-left:16px;margin:-14px 0;
  color:var(--blue);font-weight:600;font-size:12px;
}
.fld .v{
  font-size:16px;line-height:1.65;margin-top:5px;
  padding:9px 8px;margin-left:-8px;border-radius:8px;
  border:1px solid transparent;outline:none;min-height:44px;white-space:pre-wrap;
}
.fld .v:focus{border-color:var(--blue);background:#fff;}
.fld .v:active{background:#FAFBFC;}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
/* ログイン：立場の切り替え（モック確認用） */
.roleseg{display:flex;gap:8px;}
.roleseg-btn{
  flex:1;min-height:48px;border-radius:12px;font-size:14px;font-weight:700;
  padding:0 4px;letter-spacing:-.01em;
  background:#EDF2FD;color:var(--text);border:1px solid #C9D8F5;
}
.roleseg-btn.on{background:var(--blue);color:#fff;border-color:var(--blue);}
.rolehint{font-size:13px;color:var(--sub);margin-top:8px;line-height:1.55;}
.chip{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:14px;font-weight:600;padding:0 15px;border-radius:999px;
  background:#EDF2FD;color:var(--text);border:1px solid #C9D8F5;
}
.chip.on{background:var(--blue);color:#fff;border-color:var(--blue);}
.editnote{font-size:13px;color:var(--sub);text-align:center;margin:-4px 0 14px;}

/* ---- 振り分けチップ（訪問報告／業務記録） ---- */
.kindrow{
  background:var(--white);border-radius:14px;padding:13px 14px;margin-bottom:12px;
  box-shadow:0 1px 3px rgba(26,26,26,.05);
}
.kindrow .lb{font-size:14px;font-weight:700;margin-bottom:8px;}
.kindrow .sel{display:flex;flex-wrap:wrap;gap:8px;}
.kindrow .nt{font-size:12.5px;color:var(--sub);line-height:1.6;margin-top:8px;}
/* 任意項目バッジ・補足 */
.fld .opt{
  display:inline-flex;align-items:center;margin-left:6px;
  font-size:11px;font-weight:700;line-height:1;padding:4px 7px;border-radius:999px;
  background:var(--white);color:var(--text);border:1px solid #C9D8F5;
}
.fld .optnote{font-size:12.5px;color:var(--sub);line-height:1.6;margin-top:4px;}
.cardnote{
  font-size:12.5px;color:var(--sub);line-height:1.7;
  background:var(--bg);border-radius:12px;padding:11px 13px;margin:0 0 14px;
}

/* ---- 複数件に分けた結果（段階：split） ---- */
/* チェック（含める／外す）とカード本体（タップで編集）を別ボタンに分ける。
   ボタンの入れ子を避けるため、外枠は div のまま */
.split-card{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--white);border-radius:14px;padding:12px 12px 12px 8px;margin-bottom:10px;
  box-shadow:0 1px 3px rgba(26,26,26,.05);
}
.split-chk{
  flex:0 0 auto;width:44px;height:44px;margin:-2px 0;
  display:flex;align-items:center;justify-content:center;
}
.split-chk i{
  display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:7px;
  border:2px solid #9AA0A8;background:var(--white);
}
.split-chk.on i{background:var(--blue);border-color:var(--blue);}
.split-chk.on i::after{
  content:"";display:block;width:11px;height:6px;
  border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;
  transform:rotate(-45deg) translate(1px,-2px);
}
.split-body{
  flex:1 1 auto;min-width:0;display:flex;align-items:flex-start;gap:8px;
  text-align:left;padding:2px 0;
}
.split-body:active{opacity:.7;}
.split-body .main{flex:1 1 auto;min-width:0;}
.split-body .ttl{display:block;font-size:16px;font-weight:700;line-height:1.4;}
.split-body .meta{display:block;font-size:13px;color:var(--sub);margin-top:3px;}
.split-body .snip{display:block;font-size:14px;color:#5A5D63;margin-top:5px;line-height:1.55;}
.split-body .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.split-body .chev{margin-top:6px;}
/* 外した記録は薄くせず、文字色ではなく取り消しの明示で表す */
.split-card.off .split-body .ttl{color:var(--sub);}
.split-off{font-size:12px;font-weight:700;color:var(--sub);margin-top:6px;display:block;}

/* ---- 役員ビュー最下部：社長用の記録導線 ---- */
.execrec{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;min-height:48px;margin-top:6px;padding:10px 12px;
  border-top:1px solid var(--line);
  color:var(--blue);font-size:14px;font-weight:600;text-align:center;line-height:1.5;
}
.execrec svg{width:18px;height:18px;flex:0 0 auto;}

/* ============ 日報 ============ */
/* 今日の記録（集計カード）：件数・時間内訳・確認導線を1枚にまとめる */
.dsum-h{font-size:13px;font-weight:700;color:var(--sub);letter-spacing:.04em;}
.dsum-n{font-size:20px;font-weight:700;color:var(--text);margin-top:6px;line-height:1.4;}
.dsum-t{font-size:15px;font-weight:600;color:var(--text);margin-top:8px;line-height:1.6;}
.dsum-note{font-size:12.5px;color:var(--sub);line-height:1.7;margin-top:10px;}
.card-link{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;min-height:48px;margin:12px 0 -4px;padding:10px 12px;
  border:none;border-top:1px solid var(--line);background:transparent;
  color:var(--blue);font-family:inherit;font-size:15px;font-weight:700;
  text-align:center;line-height:1.5;cursor:pointer;
}
.card-link .chev{border-right-color:var(--blue);border-top-color:var(--blue);}
.sum-row{display:flex;padding:9px 0;border-bottom:1px solid var(--line);gap:12px;}
.sum-row:last-child{border-bottom:none;}
.sum-row .k{flex:0 0 84px;font-size:13px;font-weight:700;color:var(--sub);padding-top:2px;}
.sum-row .v{flex:1;font-size:15px;line-height:1.65;}

/* ============ 役員ビュー ============ */
.seg{
  display:flex;background:#EEF0F3;border-radius:12px;padding:3px;margin-bottom:16px;
}
.seg button{
  flex:1;min-height:44px;padding:9px 0;border-radius:9px;
  font-size:15px;font-weight:700;color:var(--sub);
}
.seg button.on{background:var(--white);color:var(--blue);box-shadow:0 1px 3px rgba(26,26,26,.08);}
.stats{display:flex;gap:10px;margin-bottom:6px;}
.stat{
  flex:1;background:var(--white);border-radius:16px;padding:14px 10px;text-align:center;
  box-shadow:0 1px 3px rgba(26,26,26,.05);
}
.stat .n{font-size:26px;font-weight:800;letter-spacing:.01em;line-height:1.2;}
.stat .n small{font-size:14px;font-weight:700;color:var(--sub);margin-left:1px;}
.stat .l{font-size:12px;color:var(--sub);font-weight:600;margin-top:4px;}
.stat.alert .n{color:var(--red);}
.mem{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);width:100%;text-align:left;}
.mem:last-child{border-bottom:none;}
.mem .nm{flex:1;font-size:16px;font-weight:600;}
.mem .ct{font-size:14px;color:var(--sub);margin-right:2px;}

/* ============ 検索 ============ */
.searchbar{
  display:flex;align-items:center;gap:9px;
  background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:0 14px;height:50px;margin-bottom:14px;
}
.searchbar svg{width:19px;height:19px;color:var(--sub);flex:0 0 auto;}
.searchbar input{flex:1;border:none;background:none;outline:none;height:100%;}
.tl{position:relative;padding-left:22px;}
.tl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:var(--line);}
.tl-item{position:relative;margin-bottom:12px;}
.tl-item::before{
  content:"";position:absolute;left:-21px;top:20px;
  width:10px;height:10px;border-radius:50%;background:var(--blue);border:2px solid #fff;
  box-shadow:0 0 0 2px var(--line);
}
.cust-head{
  background:var(--white);border-radius:16px;padding:15px 16px;margin-bottom:14px;
  box-shadow:0 1px 3px rgba(26,26,26,.05);
}
.cust-head .nm{font-size:19px;font-weight:800;}
.cust-head .mt{font-size:13px;color:var(--sub);margin-top:4px;}

/* ============ 整形カード：ボトムシート ============ */
/* ホームの上に下から重なる。上部 52px だけホームがのぞき、そこは半透明の黒スクリム。
   閉じるのは左上の×のみ（スクリムタップ・スワイプでは閉じない＝入力の誤消失を防ぐ） */
.fsheet-wrap{
  position:absolute;inset:0;z-index:65;
  display:none;
}
.fsheet-wrap.on{display:block;}
.fsheet-scrim{
  position:absolute;inset:0;
  background:rgba(26,26,26,.42);
  animation:fsFade .25s ease-out;
}
@keyframes fsFade{from{opacity:0}to{opacity:1}}
.fsheet{
  position:absolute;left:0;right:0;top:52px;bottom:0;
  background:var(--bg);
  border-radius:20px 20px 0 0;
  box-shadow:0 -6px 24px rgba(26,26,26,.18);
  display:flex;flex-direction:column;
  overflow:hidden;
  animation:fsUp .25s ease-out;
}
@keyframes fsUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.fsheet-wrap.closing .fsheet{animation:fsDown .25s ease-out both;}
.fsheet-wrap.closing .fsheet-scrim{animation:fsFadeOut .25s ease-out both;}
@keyframes fsDown{from{transform:translateY(0)}to{transform:translateY(100%)}}
@keyframes fsFadeOut{from{opacity:1}to{opacity:0}}
.fsheet-head{
  flex:0 0 auto;position:relative;
  height:48px;
  background:var(--bg);
  border-radius:20px 20px 0 0;
}
.fsheet-grip{
  position:absolute;left:50%;top:8px;transform:translateX(-50%);
  width:38px;height:4px;border-radius:2px;background:#C7C9CE;
}
.fsheet-close{
  position:absolute;left:6px;top:2px;
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  color:var(--text);
}
.fsheet-close svg{width:20px;height:20px;}
.fsheet-close:active{background:#EAECEF;}
/* 確定しました（段階4）では×とグラバーを出さない（タップと自動クローズで閉じる） */
.fsheet-close[hidden],.fsheet-grip[hidden]{display:none !important;}
.fsheet-body{
  flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:2px 16px calc(24px + var(--safe-b));
}
/* シート表示中は背後のホームを動かさない */
.body.locked{overflow:hidden;}

/* シート内の段階（録音中 → 整形中 → 分割一覧／整形カード）。
   シート自体は開いたまま、中身だけを 0.2s のクロスフェードで差し替える */
.fstage{animation:fstageIn .2s ease-out both;}
.fstage[hidden]{display:none !important;}
#sheetRec,#sheetProc,#sheetSaved{
  min-height:100%;
  display:flex;align-items:center;justify-content:center;
}
/* 速報しました：シート内のどこをタップしても閉じる段階 */
#sheetSaved{cursor:pointer;}
.fstage-inner{width:100%;text-align:center;padding:2px 0 6px;}
@keyframes fstageIn{from{opacity:0}to{opacity:1}}
/* シートの地色（#F5F6F8）に合わせた調整。全画面オーバーレイ（白地）とは地色が違うため。
   あわせて、スクロールなしで1画面に収まるよう余白を詰める */
#sheetRec .rec-said{background:var(--white);border:1px solid var(--line);margin-top:14px;}
#sheetRec .timer{margin:4px 0 0;}
#sheetRec .rec-guide{margin-top:10px;}
#sheetRec .rec-hint{margin-top:6px;}
#sheetRec .stop-btn{width:72px;height:72px;margin-top:14px;}
#sheetRec .stop-btn i{width:24px;height:24px;}
#sheetRec .ov-cancel{margin-top:8px;}
#sheetProc .spinner{border-color:#DDE0E5;border-top-color:var(--blue);}

/* ============ シート・トースト ============ */
.backdrop{
  position:absolute;inset:0;z-index:70;background:rgba(26,26,26,.42);
  display:none;align-items:flex-end;
}
.backdrop.on{display:flex;animation:fade .18s ease;}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{
  width:100%;background:var(--white);
  border-radius:20px 20px 0 0;padding:10px 20px calc(24px + var(--safe-b));
  max-height:82%;overflow-y:auto;animation:up .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes up{from{transform:translateY(30px)}to{transform:translateY(0)}}
.grip{width:38px;height:4px;border-radius:2px;background:#DCDEE2;margin:0 auto 14px;}
.sheet h3{font-size:19px;font-weight:800;margin:0 0 4px;}
.sheet .sh-meta{font-size:13px;color:var(--sub);margin-bottom:14px;}
.sheet .sh-body{font-size:15px;line-height:1.75;}
.toast{
  position:absolute;left:50%;bottom:calc(92px + var(--safe-b));transform:translate(-50%,14px);
  background:rgba(26,26,26,.92);color:#fff;
  font-size:15px;font-weight:600;padding:13px 22px;border-radius:12px;
  z-index:80;opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;
  white-space:normal;width:max-content;max-width:84%;text-align:center;line-height:1.55;
}
.toast.on{opacity:1;transform:translate(-50%,0);}

/* ============ 上長へ速報しました（シート段階4） ============ */
.saved-mark{display:block;width:88px;height:88px;margin:0 auto 20px;}
.saved-tap{font-size:13px;color:var(--sub);margin-top:22px;}

/* ============ 確定直後のハイライト ============ */
/* 黄色 → 透明へ2秒でフェード。prefers-reduced-motion では
   共通の抑制ルールで即座に終端（＝透明）になるため、フェードは起きない */
@keyframes justSaved{from{background-color:#FFE58F;}to{background-color:transparent;}} /* 確定直後の強調は黄色（yellow fade。青基調の中で確実に浮く） */
.row.just-saved,
.card.just-saved{
  animation:justSaved 2s ease-out both;
  border-radius:10px;
}
.card.just-saved{border-radius:16px;}

/* ============ アニメーション抑制（機能は維持） ============ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .mic-ring{display:none;}                  /* 拡大リングは出さない */
  .rec-dot i{opacity:1;}                    /* 点滅させず点灯のまま */
  .spinner{border-top-color:var(--blue);}   /* 回転せずリングとして表示 */
}

/* ============ 実装で足した分（モックには無い） ============ */
/* hidden 属性は class の display に負けるので、ここで必ず勝たせる */
[hidden]{display:none !important;}
/* 時刻入力・顧客検索の入力欄 */
.tin{
  width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:#FAFBFC;font-size:16px;color:var(--text);-webkit-appearance:none;appearance:none;
}
.tin:focus{outline:none;border-color:var(--blue);background:#fff;}
#custSearchList{margin-top:8px;}
#formTranscript{background:#FAFBFC;border:1px solid var(--line);border-radius:10px;padding:10px 12px;}