/* =========================================================
   出張進捗（携帯）の見た目
   ⚠ もとの「出張進捗アプリ」の index.html の写し。
     内勤用（shinchoku.html）と外勤用（shinchoku-cl.html）の両方から読む。
     ⚠ 2つのHTMLに書き写さないこと。片方だけ直して食い違う。
   ========================================================= */
/* =========================================================
   出張進捗（本人用・携帯）

   ⚠ この画面だけ styles.css を読まない。ポータルの共通CSSは
     パソコンの管理画面向けで、字も余白も大きい。

   ⚠ 下の「もとのアプリの指定」は index.html から そのまま写したもの。
     見た目を完全に同じにするため、直さないこと。
     直すと、使い慣れた人が別のアプリだと思ってしまう。
   ========================================================= */

/* ---- ボタンの既定の見た目を消す（もとのアプリより前に書く） ----
   もとのアプリは押せる所を <div onclick> で書いていたが、こちらは
   <button> で書いている（キーボードでも押せて、読み上げにも
   「ボタン」と伝わるため）。ブラウザが勝手に付ける枠・背景・字を消す。
   ⚠ 必ず「もとのアプリの指定」より前に置くこと。
     後ろに置くと、こちらの font-size が向こうの指定に勝ってしまい、
     下のナビが9px→16pxになって字が折り返した（実際にそうなった）。 */
.me-bar, .member-list-card .item, .month-tabs .tab, .bottom-nav .item,
.tf-check, .tf-datebtn, .wk-toggle, .save-btn, .tf-actions .draft,
.tf-actions .submit, .tfcal-actions .a, .travel-btn, .add-btn-row, .me-set,
.top-bar .back, .top-bar .gear,
/* ⚠ カレンダーの日と月送りもここに入れる。入れ忘れると、ブラウザが付ける
   枠と背景が残って、日が四角い箱に見える（実際に「キモい」と言われた）。 */
.cal-day, .tfcal-nav .nv, .cal-actions .btn, .goal-table .row .days-btn {
  font: inherit; color: inherit; border: 0; background: none;
  -webkit-appearance: none; appearance: none;
  width: 100%; text-align: inherit; display: block;
}
.member-list-card .item { text-align: left; }
.member-list-card .item .mini-bar { display: block; }
.tf-datebtn { text-align: left; }
.top-bar .back, .top-bar .gear { width: auto; }

/* ================== ここから もとのアプリの指定（そのまま） ================== */

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Helvetica Neue', Arial, sans-serif; background: #EEF2F7; color: #0F172A; min-height: 100vh; padding: 12px; padding-bottom: 80px; }
.container { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.loading { text-align: center; padding: 40px; color: #64748B; font-size: 14px; }
.error { background: #FEE2E2; border: 1px solid #FCA5A5; border-radius: 8px; padding: 12px; color: #991B1B; font-size: 12px; }
.top-bar { display: flex; justify-content: space-between; align-items: center; }
.top-bar .gear { font-size: 22px; cursor: pointer; padding: 8px; background: #fff; border-radius: 8px; line-height: 1; }
.top-bar .back { font-size: 13px; color: #1E40AF; cursor: pointer; padding: 8px 12px; background: #fff; border-radius: 8px; }
.top-bar .title { font-size: 14px; font-weight: 500; }
.team-card { background: #1E3A8A; border-radius: 10px; padding: 12px 14px; color: #fff; }
.team-card .label { font-size: 10px; color: #93C5FD; }
.team-card .row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; }
.team-card .total { font-size: 18px; font-weight: 500; }
.team-card .goal { font-size: 11px; color: #93C5FD; }
.team-card .bar { height: 5px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-top: 8px; overflow: hidden; }
.team-card .bar .fill { height: 100%; background: #60A5FA; }
.team-card .rate { font-size: 10px; color: #93C5FD; margin-top: 4px; text-align: right; }
.member-list-card { background: #fff; border-radius: 10px; padding: 4px; }
.team-header { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px 8px; border-bottom: 1.5px solid #1E3A8A; }
.team-header .team-name { font-size: 13px; font-weight: 600; color: #1E3A8A; }
.team-header .team-sub { font-size: 10px; color: #64748B; }
.team-header .team-sub b { color: #1E3A8A; font-size: 12px; margin-left: 2px; }
.member-list-card .list-title { padding: 12px 14px 6px; font-size: 12px; color: #64748B; font-weight: 500; }
.member-list-card .item { padding: 12px 14px; border-bottom: 0.5px solid #F1F5F9; cursor: pointer; }
.member-list-card .item:last-child { border-bottom: none; }
.member-list-card .item .head { display: flex; justify-content: space-between; align-items: center; }
.member-list-card .item .name { font-size: 15px; font-weight: 500; }
.member-list-card .item .rate { font-size: 12px; font-weight: 500; }
.member-list-card .item .rate .chev { color: #94A3B8; font-size: 15px; margin-left: 4px; }
.member-list-card .item .mini-bar { height: 4px; background: #F1F5F9; border-radius: 999px; margin-top: 6px; overflow: hidden; }
.member-list-card .item .mini-bar .fill { height: 100%; }
.member-list-card .item .sub { display: flex; justify-content: space-between; font-size: 10px; color: #94A3B8; margin-top: 4px; }
.member-list-card .item-simple { padding: 14px; font-size: 15px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; border-bottom: 0.5px solid #F1F5F9; }
.member-list-card .item-simple:last-child { border-bottom: none; }
.member-list-card .item-simple .chev { color: #94A3B8; font-size: 18px; }
.member-list-card .item-with-action .delete-btn { color: #DC2626; font-size: 12px; padding: 5px 12px; background: #FEE2E2; border-radius: 4px; }
.add-btn-row { padding: 14px; text-align: center; color: #1E40AF; font-size: 13px; font-weight: 500; cursor: pointer; border-top: 0.5px dashed #CBD5E1; margin-top: 4px; }
.header-card { background: #fff; border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; }
.header-card .label { font-size: 10px; color: #64748B; margin-bottom: 2px; }
.date-line { display: flex; align-items: baseline; gap: 4px; }
.date-line .year { font-size: 11px; color: #94A3B8; }
.date-line .num { font-size: 20px; font-weight: 500; line-height: 1; }
.date-line .unit { font-size: 12px; color: #64748B; }
.date-line .dow { font-size: 11px; color: #94A3B8; margin-left: 2px; }
.header-card .right { text-align: right; }
.header-card .right .progress { font-size: 18px; font-weight: 500; color: #C2410C; line-height: 1; }
.header-card .right .progress-sub { font-size: 10px; color: #94A3B8; }
.page-header { background: #fff; border-radius: 10px; padding: 12px 14px; }
.page-header .title { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.page-header .range { font-size: 11px; color: #64748B; }
.section-title { display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: 0.03em; margin-bottom: 10px; margin-top: 8px; color: #fff; }
.section-title.month { background: #1E3A8A; }
.section-title.pace { background: #475569; }
.section-title.week { background: #1E40AF; }
.section-title.daily { background: #64748B; }
.month-card { background: #1E3A8A; border-radius: 10px; padding: 14px; color: #fff; }
.month-blocks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 12px; }
.block { background: rgba(255,255,255,0.06); padding: 8px 10px; border-radius: 6px; }
.block.goal { background: #FFF7ED; border: 1.5px solid #FDBA74; }
.block.goal .label { color: #C2410C; }
.block.goal .value { color: #9A3412; }
.block.alert { background: rgba(252,211,77,0.15); border: 0.5px solid rgba(252,211,77,0.4); }
.block.alert .label { color: #FCD34D; }
.block.alert .value { color: #FCD34D; }
.block .label { font-size: 9px; color: #93C5FD; }
.block .value { font-size: 12px; font-weight: 500; color: #fff; margin-top: 2px; }
.achievement { background: rgba(255,255,255,0.1); padding: 12px; border-radius: 8px; margin-bottom: 8px; border: 0.5px solid rgba(255,255,255,0.15); }
.achievement-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.achievement .label { font-size: 10px; color: #93C5FD; }
.achievement .value-area { display: flex; align-items: baseline; gap: 4px; }
.achievement .num { font-size: 24px; font-weight: 500; line-height: 1; }
.achievement .unit { font-size: 12px; color: #93C5FD; }
.achievement .comment { font-size: 10px; color: #93C5FD; }
.progress-bar { height: 6px; background: rgba(255,255,255,0.15); border-radius: 999px; overflow: hidden; }
.progress-bar .fill { height: 100%; background: #60A5FA; transition: width 0.5s; }
.today-line { background: rgba(255,255,255,0.06); border-radius: 8px; padding: 8px 10px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.today-line .lbl { font-size: 10px; color: #93C5FD; }
.today-line .val { font-size: 14px; font-weight: 500; }
.today-line .val .sub { font-size: 9px; color: #93C5FD; font-weight: 400; }
.month-footer { display: flex; justify-content: space-between; padding: 0 4px; font-size: 11px; }
.month-footer .item { color: #fff; }
.month-footer .lbl { color: #93C5FD; font-size: 9px; margin-right: 4px; }
.pace-card { background: #fff; border-radius: 10px; padding: 10px; }
.pace-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.pace-cell { background: #F8FAFC; border-radius: 6px; padding: 7px 9px; }
.pace-cell .lbl { font-size: 9px; color: #64748B; }
.pace-cell .val { font-size: 12px; font-weight: 500; margin-top: 2px; }
.pace-cell.bad { background: #FEF2F2; }
.pace-cell.bad .lbl, .pace-cell.bad .val { color: #B91C1C; }
.pace-cell.good { background: #F0FDF4; }
.pace-cell.good .lbl, .pace-cell.good .val { color: #15803D; }
.forecast { margin-top: 6px; background: #EFF6FF; border-radius: 6px; padding: 8px 10px; display: flex; justify-content: space-between; align-items: baseline; }
.forecast .lbl { font-size: 9px; color: #3B82F6; }
.forecast .val { font-size: 13px; font-weight: 500; color: #1E3A8A; }
.forecast .val .sub { font-size: 9px; color: #3B82F6; font-weight: 400; }
.week-card { background: #1E40AF; border-radius: 10px; padding: 12px 14px; color: #fff; display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.week-card .label { font-size: 9px; opacity: 0.7; margin-bottom: 4px; }
.week-card .value { font-size: 16px; font-weight: 500; line-height: 1.1; }
.week-card .right { text-align: right; font-size: 10px; }
.week-card .right .lbl { opacity: 0.7; }
.stat-block { background: #fff; border-radius: 8px; padding: 10px; margin-bottom: 6px; border: 0.5px solid #BFDBFE; }
.stat-block-header { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.stat-block-header .bar { width: 3px; height: 14px; border-radius: 2px; background: #1E40AF; }
.stat-block-header .title { font-size: 11px; font-weight: 500; color: #1E40AF; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.stat-cell { text-align: center; padding: 6px 4px; border-radius: 6px; background: #EFF6FF; }
.stat-cell .lbl { font-size: 9px; color: #3B82F6; }
.stat-cell .val { font-size: 16px; font-weight: 500; margin-top: 2px; line-height: 1.1; color: #1E3A8A; }
.stat-cell .val .pct { font-size: 10px; }
.stat-cell.hl { background: #1E40AF; }
.stat-cell.hl .lbl { color: #BFDBFE; }
.stat-cell.hl .val { color: #fff; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.stat-row .item { padding: 6px 8px; border-radius: 6px; background: #EFF6FF; }
.stat-row .lbl { font-size: 9px; color: #3B82F6; }
.stat-row .val { font-size: 12px; font-weight: 500; margin-top: 2px; color: #1E3A8A; }
.daily-card { background: #fff; border-radius: 8px; padding: 10px; }
.daily-header { display: grid; grid-template-columns: 34px 1fr 84px; gap: 8px; padding: 0 8px 6px; }
.daily-header .label { font-size: 9px; text-align: right; font-weight: 500; color: #1E40AF; }
.daily-row { display: grid; grid-template-columns: 34px 1fr 84px; gap: 8px; align-items: center; padding: 8px; border-radius: 6px; border: 0.5px solid transparent; margin-bottom: 4px; }
.daily-row.normal { border-color: #E2E8F0; }
.daily-row.rest { background: #F8FAFC; color: #94A3B8; }
.daily-row.today { background: #FFF7ED; border-color: #FDBA74; border-width: 1.5px; }
.daily-row.future { opacity: 0.4; }
.daily-row .day { font-size: 11px; font-weight: 500; }
.daily-row.today .day { color: #C2410C; }
.daily-row .bar-area { display: flex; gap: 2px; align-items: center; }
.daily-row .bar { height: 4px; border-radius: 999px; }
.daily-row .bar-v { background: #1E40AF; }
.daily-row.today .bar-v { background: #C2410C; }
.daily-row .bar-empty { background: #F1F5F9; flex: 1; height: 4px; border-radius: 999px; }
.daily-row.today .bar-empty { background: #FED7AA; }
.daily-row .amount { font-size: 11px; font-weight: 500; text-align: right; color: #1E40AF; }
.daily-row .amount.muted { color: #94A3B8; }
.daily-row.today .amount { color: #C2410C; }
.daily-row .rest-label { font-size: 10px; color: #94A3B8; }
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 0.5px solid #E2E8F0; padding: 8px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; max-width: 480px; margin: 0 auto; }
.bottom-nav .item { text-align: center; padding: 6px 0; color: #94A3B8; cursor: pointer; font-size: 9px; border-radius: 6px; }
.bottom-nav .item.active { color: #1E40AF; font-weight: 500; background: #EFF6FF; }
.bottom-nav .item .icon { display: block; font-size: 18px; margin-bottom: 2px; }
.month-tabs { background: #fff; border-radius: 10px; padding: 4px; display: flex; gap: 2px; }
.month-tabs .tab { flex: 1; padding: 8px 4px; text-align: center; font-size: 12px; color: #94A3B8; cursor: pointer; border-radius: 6px; }
.month-tabs .tab.active { background: #1E40AF; color: #fff; font-weight: 500; }
.month-tabs .tab.active-teal { background: #0F766E; color: #fff; font-weight: 500; }
.save-btn.teal { background: #0F766E; }
.goal-table .row .perday { font-size: 10px; color: #0F766E; text-align: center; font-weight: 500; }
.goal-table .row .perday .sub { display: block; font-size: 8px; color: #94A3B8; font-weight: 400; }
.wt-card { background: #1E40AF; border-radius: 10px; padding: 12px; color: #fff; margin-bottom: 6px; }
.wt-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.wt-block { background: rgba(255,255,255,0.08); border-radius: 6px; padding: 7px 9px; }
.wt-block.goal { background: #FFF7ED; border: 1.5px solid #FDBA74; }
.wt-block.goal .lbl { color: #C2410C; }
.wt-block.goal .val { color: #9A3412; }
.wt-block .lbl { font-size: 9px; color: #93C5FD; }
.wt-block .val { font-size: 13px; font-weight: 500; margin-top: 2px; }
.wt-ach { background: rgba(255,255,255,0.1); border: 0.5px solid rgba(255,255,255,0.15); border-radius: 8px; padding: 8px 10px; }
.wt-ach-head { display: flex; justify-content: space-between; align-items: baseline; }
.wt-ach .lbl { font-size: 10px; color: #93C5FD; }
.wt-ach .num { font-size: 20px; font-weight: 500; }
.wt-ach .unit { font-size: 11px; color: #93C5FD; }
.wt-bar { height: 5px; background: rgba(255,255,255,0.15); border-radius: 999px; overflow: hidden; margin-top: 5px; }
.wt-bar .fill { height: 100%; background: #60A5FA; }
.wt-foot { display: flex; justify-content: space-between; font-size: 10px; padding: 6px 2px 0; }
.wt-foot .lbl { color: #93C5FD; font-size: 9px; }
.tg-table { background: #fff; border-radius: 8px; padding: 10px; font-size: 11px; border: 0.5px solid #BFDBFE; margin-bottom: 6px; }
.tg-head { display: grid; grid-template-columns: 1fr 80px 80px; gap: 6px; padding: 4px; color: #64748B; font-size: 10px; border-bottom: 0.5px solid #E2E8F0; }
.tg-head .t { text-align: right; color: #C2410C; }
.tg-head .r { text-align: right; color: #1E40AF; }
.tg-row { display: grid; grid-template-columns: 1fr 80px 80px; gap: 6px; padding: 6px 4px; border-bottom: 0.5px solid #F1F5F9; }
.tg-row:last-child { border-bottom: none; }
.tg-row .k { color: #64748B; }
.tg-row .t { text-align: right; }
.tg-row .r { text-align: right; font-weight: 500; }
.tg-row .r.ok { color: #0F766E; }
.tg-row .r.ng { color: #B91C1C; }
.tg-row .r.nu { color: #1E3A8A; }
.travel-btn { background: #fff; border: 1px solid #B91C1C; color: #B91C1C; border-radius: 8px; padding: 8px; text-align: center; font-size: 11px; font-weight: 500; margin-bottom: 8px; cursor: pointer; }
.travel-btn .st { font-weight: 400; font-size: 9px; margin-left: 4px; }
.month-tabs .tab.active-red { background: #B91C1C; color: #fff; font-weight: 500; }
.tf-card { background: #fff; border-radius: 10px; padding: 10px; }
.tf-group { margin-top: 8px; }
.tf-group:first-child { margin-top: 0; }
.tf-lbl { font-size: 9px; color: #64748B; margin-bottom: 2px; }
.tf-lbl .req { color: #DC2626; }
.tf-card input, .tf-card select, .tf-card textarea { width: 100%; border: 0.5px solid #E2E8F0; border-radius: 4px; padding: 7px 8px; font-size: 12px; box-sizing: border-box; background: #fff; font-family: inherit; }
.tf-card select { background: #F8FAFC; }
.tf-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tf-range { display: flex; gap: 4px; align-items: center; }
.tf-range input { text-align: center; }
.tf-range .sep { color: #94A3B8; flex-shrink: 0; }
.tf-checks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.tf-datebtn { border: 0.5px solid #E2E8F0; border-radius: 4px; padding: 7px 8px; font-size: 12px; background: #fff; cursor: pointer; min-height: 17px; }
.tf-datebtn .ph { color: #CBD5E1; font-size: 11px; }
.tfcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.tfcal-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.tfcal-nav .ttl { font-size: 13px; font-weight: 500; }
.tfcal-nav .nv { width: 32px; height: 32px; border-radius: 8px; background: #F1F5F9; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #475569; cursor: pointer; }
.tfcal-nav .nv.dis { opacity: 0.3; cursor: default; }
.tfcal-actions { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 6px; margin-top: 12px; }
.tfcal-actions .a { padding: 10px; text-align: center; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; }
.tfcal-actions .clear { background: #F1F5F9; color: #64748B; }
.tfcal-actions .cancel { background: #F1F5F9; color: #64748B; }
.tfcal-actions .ok { color: #fff; }
.tf-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.tf-day { border: 0.5px solid #E2E8F0; background: #F8FAFC; color: #64748B; border-radius: 6px; padding: 6px 0; text-align: center; font-size: 10px; cursor: pointer; }
.tf-day .w { display: block; font-size: 8px; color: #94A3B8; }
.tf-day.on { background: #FEE2E2; border-color: #FCA5A5; color: #DC2626; font-weight: 500; }
.tf-day.on .w { color: #F87171; }
.tf-check { border: 0.5px solid #E2E8F0; background: #F8FAFC; color: #94A3B8; border-radius: 6px; padding: 6px 2px; text-align: center; font-size: 9px; cursor: pointer; }
.tf-check.on { background: #F0FDF4; border-color: #86EFAC; color: #15803D; font-weight: 500; }
.tf-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 6px; margin-top: 10px; }
.tf-actions .draft { background: #fff; border: 1px solid #B91C1C; color: #B91C1C; border-radius: 8px; padding: 10px; text-align: center; font-size: 11px; font-weight: 500; cursor: pointer; }
.tf-actions .submit { background: #B91C1C; color: #fff; border-radius: 8px; padding: 10px; text-align: center; font-size: 11px; font-weight: 500; cursor: pointer; }
.tf-status { display: inline-block; font-size: 9px; border-radius: 999px; padding: 2px 8px; margin-left: 4px; font-weight: 500; }
.tf-status.done { background: #DCFCE7; color: #15803D; }
.tf-status.draft { background: #FFEDD5; color: #C2410C; }
.tf-locked-note { background: #F1F5F9; border: 1px solid #CBD5E1; color: #475569; border-radius: 8px; padding: 10px 12px; font-size: 11px; line-height: 1.6; margin-bottom: 8px; }
.tf-locked-note b { color: #B91C1C; }
.tf-card.locked { opacity: 0.75; }
.tf-card.locked input, .tf-card.locked select { background: #F8FAFC; color: #64748B; }
.tf-card.locked .tf-datebtn, .tf-card.locked .tf-check { background: #F8FAFC; color: #94A3B8; cursor: default; }
.tperm-week { font-size: 11px; font-weight: 500; color: #0F172A; margin: 8px 0 4px; }
.cfm-title { font-size: 15px; font-weight: 600; color: #0F172A; margin-bottom: 10px; }
.cfm-body { font-size: 12px; color: #334155; line-height: 1.8; }
.cfm-body .warn { color: #B91C1C; font-weight: 500; }
.cfm-actions { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; margin-top: 16px; }
.cfm-actions .btn { padding: 12px; text-align: center; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; }
.cfm-actions .cancel { background: #F1F5F9; color: #64748B; }
.cfm-actions .ok { background: #B91C1C; color: #fff; }
.cfm-actions .ok.blue { background: #1E40AF; }
.cfm-input { width: 100%; padding: 12px; border: 1px solid #CBD5E1; border-radius: 8px; font-size: 16px; text-align: center; letter-spacing: 0.2em; margin-top: 12px; box-sizing: border-box; }
.cfm-error { color: #B91C1C; font-size: 11px; margin-top: 6px; text-align: center; }
.me-bar { background: #1E3A8A; color: #fff; border-radius: 10px; padding: 10px 14px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.me-bar .lbl { font-size: 10px; color: #93C5FD; }
.me-bar .nm { font-size: 14px; font-weight: 500; }
.me-bar .chev { margin-left: auto; color: #93C5FD; font-size: 16px; }
.me-set { border-top: 0.5px dashed #CBD5E1; margin-top: 4px; padding: 12px 14px; text-align: center; color: #1E40AF; font-size: 12px; font-weight: 500; cursor: pointer; }
.me-chip { display: inline-block; background: #DBEAFE; color: #1E40AF; font-size: 9px; border-radius: 4px; padding: 1px 5px; margin-left: 4px; vertical-align: 1px; font-weight: 500; }
/* iPhone は入力欄のフォントが16px未満だと、タップしたときに画面が勝手に拡大する。
   16pxにすると拡大しない。数字が少し大きく見えるが、操作しやすさを優先する。 */
@supports (-webkit-touch-callout: none) {
  .goal-table .row input,
  .wk-in input,
  .tf-card input,
  .tf-card select,
  .tf-card textarea,
  .add-form input { font-size: 16px; }
}
.perm-card { background: #fff; border-radius: 10px; padding: 12px; }
.perm-title { font-size: 12px; font-weight: 500; color: #0F172A; margin-bottom: 6px; }
.perm-note { font-size: 10px; color: #64748B; line-height: 1.6; margin-bottom: 8px; }
.perm-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.perm-chip { border: 1px solid #E2E8F0; background: #F8FAFC; color: #64748B; border-radius: 999px; padding: 6px 12px; font-size: 11px; cursor: pointer; }
.perm-chip.on { background: #DCFCE7; border-color: #22C55E; color: #15803D; font-weight: 500; }
.save-btn.attn { animation: attnPulse 1.2s ease-in-out infinite; }
@keyframes attnPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(194,65,12,0.5); } 50% { box-shadow: 0 0 0 8px rgba(194,65,12,0); } }
.unsaved-bar { position: fixed; bottom: 88px; left: 50%; transform: translateX(-50%); background: #C2410C; color: #fff; padding: 8px 14px; border-radius: 999px; font-size: 11px; font-weight: 500; z-index: 7000; box-shadow: 0 4px 12px rgba(194,65,12,0.4); cursor: pointer; white-space: nowrap; }
.unsaved-bar .tap { background: #fff; color: #C2410C; border-radius: 999px; padding: 3px 10px; margin-left: 6px; font-size: 10px; }
.shift-banner { background: #FFF7ED; border: 1px solid #FB923C; color: #C2410C; border-radius: 8px; padding: 10px 12px; font-size: 11px; font-weight: 500; margin-bottom: 8px; cursor: pointer; }
.shift-banner.info { background: #EFF6FF; border-color: #60A5FA; color: #1E40AF; }
.shift-banner.urgent { background: #FEE2E2; border-color: #F87171; color: #B91C1C; }
.goal-table .row .name.unsubmitted { color: #DC2626; }
.unsub-tag { display: inline-block; background: #FEE2E2; color: #DC2626; font-size: 8px; border-radius: 4px; padding: 1px 4px; margin-left: 3px; font-weight: 500; vertical-align: 1px; }
.cal-locked-note { background: #F1F5F9; border: 0.5px solid #CBD5E1; color: #64748B; border-radius: 6px; padding: 8px 10px; font-size: 10px; margin-bottom: 8px; line-height: 1.5; }
.wk-toggle { background: #F0FDFA; border: 0.5px dashed #0F766E; border-radius: 6px; padding: 6px; text-align: center; color: #0F766E; font-size: 10px; font-weight: 500; margin: 0 0 8px; cursor: pointer; }
.wk-toggle.open { background: #0F766E; border: 0.5px solid #0F766E; color: #fff; border-radius: 6px 6px 0 0; margin-bottom: 0; }
.wk-detail { background: #F8FAFC; border-radius: 0 0 8px 8px; padding: 8px; margin: 0 0 8px; border: 0.5px solid #E2E8F0; border-top: none; }
.wk-detail-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.wk-in { background: #F0FDFA; border: 0.5px dashed #0F766E; border-radius: 8px; padding: 6px 8px; }
.wk-in .lbl { display: block; font-size: 9px; color: #0F766E; font-weight: 500; margin-bottom: 3px; }
.wk-in .lbl .opt { font-weight: 400; color: #5EEAD4; color: #14B8A6; }
.wk-in input { width: 100%; border: 0.5px solid #99F6E4; background: #fff; border-radius: 4px; padding: 4px 6px; text-align: right; font-size: 12px; box-sizing: border-box; }
.wk-calc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wk-calc .c { background: #fff; border-radius: 6px; padding: 6px 4px; text-align: center; border: 0.5px solid #F1F5F9; }
.wk-calc .l { font-size: 8px; color: #94A3B8; }
.wk-calc .v { font-size: 11px; font-weight: 500; color: #475569; margin-top: 2px; }
.month-tabs .tab .period { display: block; font-size: 9px; opacity: 0.75; margin-top: 2px; }
.goal-table { background: #fff; border-radius: 10px; padding: 10px; }
.goal-table .header { display: grid; grid-template-columns: 86px 1fr 74px; gap: 8px; padding: 6px 4px; border-bottom: 0.5px solid #E2E8F0; font-size: 10px; color: #64748B; font-weight: 500; }
.goal-table .header .ra { text-align: right; }
.goal-table .header .ca { text-align: center; }
.goal-table .row { display: grid; grid-template-columns: 86px 1fr 74px; gap: 8px; padding: 8px 4px; border-bottom: 0.5px solid #F1F5F9; align-items: center; }
.goal-table .row .name { font-size: 13px; font-weight: 500; }
/* ⚠ 班は名前の下に、折り返さずに出す。名前の横に置くと、名前の長さで
   班の位置が人ごとにずれ、「南／口班」のように途中で切れる。 */
.goal-table .row .name .tm {
  display: block; font-size: 9px; color: #94A3B8;
  white-space: nowrap; margin-top: 1px; font-weight: 400;
}
.goal-table .row input { width: 100%; padding: 6px 8px; border: 0.5px solid #E2E8F0; border-radius: 4px; font-size: 12px; text-align: right; }
.goal-table .row .days-btn { width: 100%; padding: 6px 8px; border: 0.5px solid #E2E8F0; border-radius: 4px; font-size: 12px; text-align: center; background: #EFF6FF; color: #1E40AF; cursor: pointer; font-weight: 500; }
.save-btn { margin-top: 12px; background: #1E40AF; color: #fff; text-align: center; padding: 12px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; }
.save-btn.saving { background: #94A3B8; }
.goal-note { font-size: 10px; color: #64748B; margin-top: 8px; padding: 0 4px; line-height: 1.6; }
.add-form { background: #fff; border-radius: 10px; padding: 14px; margin-top: 8px; }
.add-form .label { font-size: 11px; color: #64748B; margin-bottom: 4px; display: block; margin-top: 8px; }
.add-form input { width: 100%; padding: 8px 10px; border: 0.5px solid #E2E8F0; border-radius: 6px; font-size: 13px; }
.add-form .actions { display: flex; gap: 8px; margin-top: 14px; }
.add-form .btn { flex: 1; padding: 10px; text-align: center; border-radius: 6px; font-size: 13px; cursor: pointer; }
.add-form .btn-primary { background: #1E40AF; color: #fff; font-weight: 500; }
.add-form .btn-secondary { background: #F1F5F9; color: #64748B; }
.toast { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); background: #0F172A; color: #fff; padding: 10px 20px; border-radius: 999px; font-size: 12px; z-index: 9999; }
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15,23,42,0.6); z-index: 8000; display: flex; align-items: center; justify-content: center; padding: 12px; }
.modal-content { background: #fff; border-radius: 12px; padding: 14px; max-width: 400px; width: 100%; max-height: 90vh; overflow-y: auto; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.modal-header .title { font-size: 14px; font-weight: 500; }
.modal-header .today-info { font-size: 11px; color: #94A3B8; }
.cal-dow-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: 10px; color: #94A3B8; text-align: center; margin-bottom: 6px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-day { height: 44px; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; padding: 2px; }
.cal-day .num { font-weight: 500; }
.cal-day .mark { font-size: 12px; line-height: 1; }
.cal-day .mark.small { font-size: 9px; }
.cal-day.empty { visibility: hidden; }
.cal-day.past-on { background: #DBEAFE; color: #1E40AF; }
.cal-day.past-off { background: #F1F5F9; color: #94A3B8; }
.cal-day.past-other { background: #FEF3C7; color: #78350F; }
.cal-day.today-cell { border: 2px solid #C2410C; background: #FFF7ED; color: #C2410C; }
.cal-day.future-on { background: #EFF6FF; color: #1E40AF; border: 0.5px dashed #93C5FD; cursor: pointer; }
.cal-day.future-off { background: #F8FAFC; color: #94A3B8; border: 0.5px dashed #CBD5E1; cursor: pointer; }
.cal-day.future-other { background: #FDE68A; color: #78350F; border: 0.5px dashed #F59E0B; cursor: pointer; }
/* =========================================================
   行き先の項目の色。出張管理のシフト表（pages/shucchou.html の .sh-c-*）と
   まったく同じ11色（ユーザー確認：「地域と〇以外の項目の配色はシフト表と一緒に」）。
   ⚠ 色を決めるのはサーバー（lib/trip.js の shiftCellColor）。
     画面で言葉から色を決めないこと（項目を足したときに食い違う）。
   ⚠ .cal-day を付けて書く。付けないと .cal-day.past-other のほうが強く、
     この色が出ない。
   ⚠ これからの日は点線の枠を残す（押せる日だと分かるように）。
   ========================================================= */
.cal-day.sh-c-yellow { background: #fdf4d3; color: #6b5310; }
.cal-day.sh-c-green  { background: #c6e5b8; color: #1d5a16; }
.cal-day.sh-c-teal   { background: #bfe0e8; color: #0d4b57; }
.cal-day.sh-c-blue   { background: #e6f0fb; color: #17427a; }
.cal-day.sh-c-indigo { background: #cfd2f2; color: #2e3183; }
.cal-day.sh-c-purple { background: #ece7f6; color: #4a3a7a; }
.cal-day.sh-c-pink   { background: #f2a9c4; color: #6e1c3c; }
.cal-day.sh-c-khaki  { background: #e2ddc2; color: #57501c; }
.cal-day.sh-c-orange { background: #f6c445; color: #6b4e05; }
.cal-day.sh-c-red    { background: #fbeceb; color: #b3352e; }
.cal-day.sh-c-gray   { background: #eceae3; color: #55554a; }
/* 今日のマスは枠を残す（色が付いても「今日」が分かるように） */
.cal-day.today-cell[class*="sh-c-"] { border: 2px solid #C2410C; }
.cal-legend { display: flex; justify-content: space-around; font-size: 9px; color: #64748B; margin-top: 12px; padding-top: 10px; border-top: 0.5px solid #E2E8F0; flex-wrap: wrap; gap: 4px; }
.cal-legend .li { display: flex; align-items: center; gap: 4px; }
.cal-legend .dot { width: 10px; height: 10px; border-radius: 2px; }
.cal-note { background: #FFF7ED; border: 1px solid #FDBA74; border-radius: 6px; padding: 8px 10px; margin-top: 10px; font-size: 10px; color: #9A3412; line-height: 1.5; }
.cal-total { background: #FFF7ED; border: 1px solid #FDBA74; padding: 10px 12px; margin-top: 10px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; }
.cal-total .lbl { font-size: 12px; color: #9A3412; }
.cal-total .val { font-size: 20px; font-weight: 500; color: #9A3412; }
.cal-actions { display: flex; gap: 8px; margin-top: 12px; }
.cal-actions .btn { flex: 1; text-align: center; padding: 10px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.cal-actions .btn-cancel { background: #F1F5F9; color: #64748B; }
.cal-actions .btn-save { background: #1E40AF; color: #fff; font-weight: 500; }
.cal-actions .btn-save.saving { background: #94A3B8; }
/* ---- 🔀 並び順設定 ---- */
.ord-row { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 0.5px solid #F1F5F9; }
.ord-row:last-child { border-bottom: none; }
.ord-name { flex: 1; font-size: 14px; }
.ord-crown { font-size: 15px; opacity: 0.2; cursor: pointer; width: 24px; text-align: center; }
.ord-crown.on { opacity: 1; }
.ord-star { font-size: 14px; opacity: 0.2; cursor: pointer; width: 24px; text-align: center; }
.ord-star.on { opacity: 1; }
.ord-btns { display: flex; gap: 4px; }
.ord-btn { width: 32px; height: 30px; display: flex; align-items: center; justify-content: center; background: #F1F5F9; color: #475569; border-radius: 6px; font-size: 12px; cursor: pointer; }
.ord-btn.dis { opacity: 0.2; }
.team-header .ord-btns { margin-left: auto; }
/* =========================================================
   日報。⚠ いまの日報の画面（/business-trip-report）をそのまま枠の中に出す。
   ⚠ 日報の見た目は日報側のCSS（trip-report.html）が持っている。ここでは触らない。
     ここにあるのは「枠の大きさ」と「ご自身のぶんです」の知らせだけ。
   ========================================================= */
.np-lock { background: #FFF7ED; border: 1px solid #FB923C; color: #9A3412; border-radius: 8px;
  padding: 10px 12px; font-size: 11px; line-height: 1.7; margin-bottom: 8px; }
.np-lock b { font-weight: 500; }
/* 日報の画面をはめる枠。
   ⚠ 高さは「画面の高さ − 下のナビ − 上下の余白」。決め打ちにすると、
     機種によって下が切れたり、二重にスクロールが出たりする。
   ⚠ 画面ぜんぶを使う。日報は項目が多いので、狭いと使いものにならない。 */
.np-frame { display: block; width: 100%; border: 0; border-radius: 10px;
  background: #fff; height: calc(100vh - 92px); }