:root{
  --bg:#f3f5f7; --card:#fff; --text:#1f2937; --muted:#6b7280; --line:#dde3e8;
  --accent:#243b53; --green:#3fa66b; --green-soft:#e9f7ef;
  --yellow:#f2b51d; --yellow-soft:#fff7df; --red:#d9534f; --red-soft:#fdecec;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;background:var(--bg);color:var(--text)}
header{background:var(--accent);color:#fff;padding:18px 16px}
header .inner,main{max-width:760px;margin:auto}
h1{margin:0;font-size:20px}.sub{margin-top:4px;font-size:12px;opacity:.8}
main{padding:14px 12px 50px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.section-title{font-size:17px;font-weight:700;margin:0 0 12px}
.subsection-title{font-size:14px;font-weight:700;margin:0 0 10px}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#e9eef4;color:var(--accent);font-size:11px;font-weight:700}
.date-nav{display:grid;grid-template-columns:100px 1fr 100px;gap:10px;align-items:center}
.date-nav button,.month-btn{background:#fff;color:var(--accent);border:1px solid var(--line);border-radius:9px;padding:9px;font-weight:700}
.date-center{text-align:center}.date-center strong{display:block;font-size:19px;margin-top:4px}.date-center span{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.member-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.member{border:1px solid var(--line);border-radius:10px;padding:10px;background:#fafbfc}.member .role{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn,button.primary{display:block;width:100%;border:0;border-radius:10px;padding:12px 14px;background:var(--accent);color:#fff;text-decoration:none;text-align:center;font-size:15px;font-weight:700;cursor:pointer}
.btn.secondary,button.secondary{background:#fff;color:var(--accent);border:1px solid var(--accent)}
.notice{background:#fffaf0;border-left:4px solid #d69e2e;padding:10px 12px;border-radius:8px;font-size:13px;line-height:1.7}
label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
select,input,textarea{width:100%;padding:11px 12px;border:1px solid #cbd2d9;border-radius:9px;background:#fff;font-size:16px}
.form-row{margin-bottom:14px}.help,.compact-note{font-size:11px;color:var(--muted);margin-top:5px}
.page-divider{margin:30px 0 12px;text-align:center;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.05em}


.top-category-progress{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.top-category-row{
  display:grid;
  grid-template-columns:110px 1fr 42px;
  align-items:center;
  gap:8px;
  padding:6px 0;
  font-size:12px;
}
.top-category-row > span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.top-category-row > strong{
  text-align:right;
  font-size:12px;
}
.top-category-track{
  height:7px;
  background:#e7ebef;
  border-radius:999px;
  overflow:hidden;
}
.top-category-track i{
  display:block;
  height:100%;
  background:var(--green);
  border-radius:999px;
}
@media(max-width:520px){
  .top-category-row{
    grid-template-columns:94px 1fr 38px;
    gap:6px;
  }
}


.member-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  font-weight:700;
}
.attendance-badge{
  display:inline-block;
  padding:3px 7px;
  border-radius:999px;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}
.attendance-badge.in{
  background:var(--green-soft);
  color:#23603d;
}
.attendance-badge.out{
  background:#eef1f4;
  color:#667085;
}
.member.attendance-out{
  opacity:.68;
  background:#f7f8fa;
}
.member.attendance-in{
  border-color:#bcdcc8;
}

/* shift */
.calendar-head{display:grid;grid-template-columns:44px 1fr 44px;gap:8px;align-items:center;margin:8px 0 12px;text-align:center}
.calendar-title{font-size:18px;font-weight:700}.calendar-person{font-size:12px;color:var(--muted);margin-top:2px}
.calendar{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.dow,.day{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.dow{text-align:center;padding:7px 2px;font-size:12px;font-weight:700;background:#f7f9fb}
.day{min-height:64px;padding:6px 5px;position:relative;background:#fff}.day span{font-size:13px;font-weight:600}.day small{display:block;margin-top:6px;font-size:11px;font-weight:700}
.day.workday{background:var(--green-soft)}.day.empty{background:#f7f8fa}.sun{color:#b42318}.sat{color:#175cd3}
.calendar-legend,.preview-legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:9px;font-size:11px;color:var(--muted)}
.legend-box,.preview-dot{width:13px;height:13px;border-radius:3px;border:1px solid var(--line);display:inline-block;margin-right:4px}.legend-work,.preview-o{background:var(--green-soft)}.preview-tri{background:var(--yellow-soft)}.preview-x{background:var(--red-soft)}
.request-cta{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}.request-cta-copy{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}.request-cta-copy span{font-size:12px;color:var(--muted)}
.basic-pattern{margin:4px 0 16px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#f8fafc}
.basic-pattern-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px}.basic-pattern-head span{font-size:11px;color:var(--muted)}
.weekday-pattern{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.weekday-pattern div{text-align:center;border:1px solid var(--line);border-radius:8px;background:#fff;padding:7px 2px}.weekday-pattern span{display:block;font-size:11px;color:var(--muted);margin-bottom:3px}.pat-o{color:#285943}.pat-x{color:#9b1c1c}
.request-preview{margin:14px 0 18px}.request-preview-title{font-size:14px;font-weight:700;margin-bottom:8px}.request-preview .day.req-o{background:var(--green-soft)}.request-preview .day.req-tri{background:var(--yellow-soft)}.request-preview .day.req-x{background:var(--red-soft)}
.half-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}.half-btn{background:#fff;color:var(--accent);border:1px solid var(--line);border-radius:9px;padding:10px;font-weight:700}.half-btn.active{background:var(--accent);color:#fff}
.request-note{background:#f7f9fb;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:12px;line-height:1.7;margin-bottom:10px}
.request-day{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.request-date{font-size:14px;font-weight:700}
.choice-group{display:flex;gap:6px}.choice{width:42px;height:38px;border-radius:9px;background:#fff;border:1px solid #cbd2d9;font-size:18px}.selected-o{background:var(--green-soft);border-color:#8bc4a5}.selected-tri{background:var(--yellow-soft);border-color:#e2bd63}.selected-x{background:var(--red-soft);border-color:#e3a3a3}
.request-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.request-summary div{border:1px solid var(--line);border-radius:9px;padding:9px 6px;text-align:center}.request-summary span{display:block;font-size:10px;color:var(--muted)}.request-summary strong{display:block;margin-top:3px;font-size:15px}

/* work status redesigned */
.progress-summary{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:center}
.progress-big strong{display:block;font-size:34px;line-height:1}.progress-big span{font-size:11px;color:var(--muted)}
.progress-bar{height:12px;background:#e6ebef;border-radius:999px;overflow:hidden}.progress-fill{height:100%;background:var(--green);border-radius:999px}
.filter-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;padding:10px 0 0;border-top:1px solid var(--line)}
.switch{width:42px;height:24px;border-radius:999px;background:#d1d5db;position:relative;cursor:pointer}.switch::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;left:3px;box-shadow:0 1px 2px rgba(0,0,0,.2)}.switch.on{background:var(--accent)}.switch.on::after{left:21px}
.work-group{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden;background:#fff}.work-group-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:#f6faf7;font-weight:700}.work-group-head small{color:var(--muted);font-size:11px}
.work-row{display:grid;grid-template-columns:1fr auto;gap:12px;padding:12px 14px;border-top:1px solid var(--line);align-items:center;cursor:pointer}.work-row:hover{background:#fafbfc}.work-row-title{font-weight:700}.work-row-meta{font-size:11px;color:var(--muted);margin-top:3px}.mini-progress{display:flex;align-items:center;gap:8px}.mini-track{width:86px;height:8px;background:#e6ebef;border-radius:999px;overflow:hidden}.mini-fill{height:100%;background:var(--green);border-radius:999px}.mini-fill.warn{background:var(--yellow)}
.detail-card{border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:12px;background:#fff}.detail-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.detail-title{font-size:18px;font-weight:700}.detail-assignee{font-size:12px;color:var(--muted);margin-top:2px}
.current-step{margin-top:14px;padding:12px;background:var(--green-soft);border:1px solid #b9dfc8;border-radius:10px;text-align:center}.current-step span{display:block;font-size:11px;color:#3e6b52}.current-step strong{display:block;font-size:20px;margin-top:3px;color:#205c3b}
.step-count{display:flex;justify-content:space-between;align-items:center;margin:12px 0 6px;font-size:12px}
.slider-wrap{position:relative;padding:6px 0 2px}.step-slider{width:100%;accent-color:var(--green)}
.step-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:2px}
.step-list{margin-top:12px;border-top:1px solid var(--line)}.step-item{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;padding:9px 2px;border-bottom:1px solid #edf0f2}.step-num{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#eef1f4;font-size:11px;font-weight:700}.step-item.done .step-num{background:var(--green);color:#fff}.step-item.current{background:var(--yellow-soft);padding-left:6px;padding-right:6px;border-radius:8px}.step-item.current .step-num{background:var(--yellow);color:#fff}.step-status{font-size:11px;color:var(--muted)}.step-item.done .step-status{color:var(--green);font-weight:700}
.independent-list{margin-top:12px}.independent-item{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}.independent-item input{width:22px;height:22px}.independent-status{font-size:11px;color:var(--muted)}


.compact-work-progress{
  margin-bottom:12px;
}
.compact-work-progress-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  margin-bottom:8px;
}
.compact-work-progress-head div{
  display:flex;
  align-items:baseline;
  gap:8px;
}
.compact-work-progress-head span{
  font-size:12px;
  color:var(--muted);
}
.compact-work-progress-head strong{
  font-size:24px;
}
.compact-work-progress-head small{
  color:var(--muted);
  font-size:11px;
}

/* manager */
.status-select{width:auto;min-width:110px;font-size:13px;padding:8px 10px}
footer{text-align:center;color:var(--muted);font-size:11px;margin-top:22px}
/* スマホのタップ領域と、狭い画面での折り返し */
button,input,select,textarea{font-family:inherit;max-width:100%}
button{min-height:44px;cursor:pointer}
button:disabled{opacity:.55;cursor:not-allowed}
button.secondary{padding:12px 14px;border-radius:10px;font-size:15px;font-weight:700}
.choice{width:44px;height:44px}
.calendar{grid-template-columns:repeat(7,minmax(0,1fr))}
.day{min-width:0}
.member-top,.basic-pattern-head,.filter-row{flex-wrap:wrap}
.switch{border:0;min-width:44px;min-height:44px;flex-shrink:0}
.switch::after{top:13px}
.switch.on::after{left:23px}
[hidden]{display:none!important}
:focus-visible{outline:3px solid #175cd3;outline-offset:3px}
.step-slider{padding:0;min-height:44px}
.detail-card{scroll-margin-top:16px}
.work-row:not([data-task]){cursor:default}
/* 工程の完了ボタンと表示専用の進捗バー */
.completion-summary{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:20px 0 12px;padding-top:16px;border-top:1px solid var(--line);font-size:14px}
.completion-help{font-size:13px;color:var(--muted);line-height:1.7;margin:12px 0}
.completion-list{display:grid;gap:10px}
.completion-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 10px;border:1px solid var(--line);border-radius:10px;background:#fff}
.completion-number{width:28px;height:28px;border-radius:50%;background:#e6ebef;color:#475569;display:grid;place-items:center;font-weight:700;font-size:14px}
.completion-title{font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.completion-button{min-width:68px;padding:8px 12px;background:#fff;color:var(--accent);border:1px solid var(--accent);border-radius:8px;font-size:14px;font-weight:700}
.completion-row.is-done .completion-number{background:var(--green);color:#fff}
.completion-row.is-done .completion-button{background:var(--green-soft);color:#23603d;border-color:#8bc4a5}
.completion-row.is-next{background:var(--yellow-soft)}
@media(max-width:380px){.completion-row{grid-template-columns:28px minmax(0,1fr);gap:8px}.completion-button{grid-column:2;justify-self:stretch}}
.form-feedback{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7}
@media(max-width:520px){
  .actions{grid-template-columns:1fr}.date-nav{grid-template-columns:72px minmax(0,1fr) 72px;gap:6px}.member-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .date-center strong{font-size:16px}.date-nav button{padding:8px 3px}
  .request-day{gap:6px}.request-date{font-size:13px}
  .progress-summary{grid-template-columns:92px 1fr}.work-row{grid-template-columns:1fr}.mini-progress{justify-content:space-between}.mini-track{flex:1}
}