/* ============ 意匠v2.0　案2「顔のボード」＋案1「つぎはこれ」の札 ============ */
body, .ph { font-family: "BIZ UDPGothic", "BIZ UDGothic", "Yu Gothic", sans-serif; }
.ph { background: #F5F7F9; color: #17202C; }
/* 上部：白地に濃い文字。色は主な操作の緑にしぼる */
.sb { background: #fff; color: #17202C; }
.a-top { background: #fff; color: #17202C; border-bottom: 1px solid #E3E7EC; padding: .5em 1em .7em; }
.a-top b { font-size: 1.04em; }
.a-back { color: #0E7A50; }
.a-disp { background: #EEF2F7; color: #2B3545; border-radius: 999px; padding: .35em .8em; min-height: 44px; }
.a-badge { background: #6D3FD0; color: #fff; min-height: 32px; display: inline-flex; align-items: center; }
.a-body { background: #F5F7F9; }
.a-cap { color: #3A4556; font-size: .86em; }
.a-head, .a-list, .a-row, .cal, .skel, .pair div { border-radius: .9em; }
.a-list { box-shadow: 0 1px 0 #E1E6EC; }
.a-item { min-height: 52px; }
.a-item em { color: #0E7A50; }
.a-item .lnk, .lnk { color: #0E7A50; }
/* ボタン：高さ56以上、主な操作は緑 */
.a-btn { background: #0E7A50; border-radius: .9em; padding: 1em .5em; min-height: 56px; display: flex; align-items: center; justify-content: center; }
.a-btn.sub, button.a-btn.sub { background: #fff; color: #0E7A50; box-shadow: inset 0 0 0 2px #0E7A50; border: 0; }
.a-btn.off { background: #C9D0D8; }
.a-btn.ng { background: #B3261E; }
.a-foot { border-top: 1px solid #E1E6EC; }
.a-tab > .on { color: #0E7A50; box-shadow: inset 0 3px 0 #0E7A50; }
.a-tab > span { min-height: 48px; }
/* 選ぶ部品 */
.seg > span { min-height: 44px; border-radius: .8em; }
.seg > .on { background: #0E7A50; }
.seg > .on.ng { background: #B3261E; }
.chk.on i, .a-row.sel .a-radio { background: #0E7A50; }
.a-row.sel .a-radio { box-shadow: inset 0 0 0 5px #0E7A50; background: transparent; }
.a-row.sel { box-shadow: inset 0 0 0 2px #0E7A50; background: #E6F4EC; }
.a-in[contenteditable="true"]:focus { box-shadow: inset 0 0 0 2px #0E7A50; }
.a-item.sel { background: #E6F4EC; box-shadow: inset .25em 0 0 #0E7A50; }
.steps > .c { background: #0E7A50; } .steps > .d { background: #CFE9DA; color: #0B5E3D; }
.gid { background: #0E7A50 !important; }
/* 状態の札：色に加えて形の印を付ける */
.chip { display: inline-flex !important; align-items: center; gap: .3em; }
.chip.done { background: #E3F2E8; color: #146A31 !important; }
.chip.done::before { content: "✓"; display: inline-flex; width: 1.15em; height: 1.15em; border-radius: 50%; background: #1B7F3B; color: #fff; font-size: .8em; align-items: center; justify-content: center; }
.chip.draft { background: #E8EFFF; color: #1D4FC4 !important; }
.chip.draft::before { content: ""; width: .9em; height: .9em; border-radius: 50%; border: 2px solid #2257D6; background: linear-gradient(90deg, #2257D6 50%, #fff 50%); }
.chip.todo { background: #FFF0DD; color: #A34E00 !important; }
.chip.todo::before { content: "!"; width: 1.1em; height: 1em; background: #C25E00; color: #fff; font-size: .72em; font-weight: 900; display: inline-flex; justify-content: center; align-items: flex-end; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.chip.away { background: #EEF1F4; color: #3A4556 !important; }
.chip.info { background: #E3EEFB; color: #1D4FC4 !important; }
.bn.info { border-color: #0E7A50; background: #E6F4EC; color: #0B4B33; }
.toast { background: #0B5E3D; }

/* ---- 今日の記録 ---- */
.v20day b { font-size: 1em; }
.mk { width: 1.25em; height: 1.25em; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; font-style: normal; color: #fff; font-weight: 900; font-size: .9em; line-height: 1; }
.mk.done { background: #1B7F3B; }
.mk.draft { border: 2.5px solid #2257D6; background: linear-gradient(90deg, #2257D6 50%, #fff 50%); }
.mk.lack { background: #C25E00; border-radius: 2px; clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 1.4em; padding-top: .3em; font-size: .78em; height: 1.3em; }
.mk.none { border: 2.5px dashed #6A7486; background: #fff; }
.mk.unsent { background: #6D3FD0; }
.v20s { display: inline-flex; align-items: center; gap: .3em; font-size: .82em; font-weight: 700; white-space: nowrap; }
.v20s-done .v20w { color: #146A31; } .v20s-draft .v20w { color: #1D4FC4; } .v20s-lack .v20w { color: #A34E00; } .v20s-none .v20w { color: #3A4556; }
.v20cnts { display: grid; grid-template-columns: repeat(5, 1fr); gap: .1em; background: #fff; border-radius: .9em; padding: .45em .2em; margin-bottom: .6em; box-shadow: 0 1px 0 #E1E6EC; }
.v20cnt { display: flex; flex-direction: column; align-items: center; gap: .1em; min-height: 44px; justify-content: center; }
.v20cnt > div { display: flex; align-items: center; gap: .25em; }
.v20cnt b { font-size: 1.3em; }
.v20cnt > span { font-size: .78em; font-weight: 700; color: #3A4556; text-align: center; line-height: 1.2; }
.v20cnt.zero { opacity: .5; }
.v20next { background: #FFF6D9; border: 3px solid #F2B705; border-radius: 1.1em; padding: .8em .9em .6em; margin-bottom: .4em; }
.v20next.done { background: #E6F4EC; border-color: #0E7A50; }
.v20next.done p { font-size: .92em; line-height: 1.6; margin: .5em 0 .6em; }
.v20tag { display: inline-block; background: #F2B705; color: #3A2A00; font-size: .82em; font-weight: 700; padding: .15em .8em; border-radius: .8em; }
.v20next.done .v20tag { background: #0E7A50; color: #fff; }
.v20who { display: flex; align-items: center; gap: .7em; margin-top: .5em; }
.v20who .av { width: 2.8em; height: 2.8em; font-size: 1.15em; }
.v20nm { display: block; font-size: 1.3em; }
.v20what { display: inline-flex; align-items: center; gap: .3em; font-weight: 700; font-size: 1.02em; }
.v20why { display: flex; align-items: center; gap: .5em; margin-top: .5em; font-size: .9em; color: #4E3B00; line-height: 1.45; flex-wrap: wrap; }
.v20btns { display: flex; flex-direction: column; gap: .3em; margin-top: .6em; }
.v20btns .a-btn.sub { background: transparent; box-shadow: none; color: #6B5300; min-height: 44px; padding: .4em; }
.av { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; flex: none; width: 2.2em; height: 2.2em; }
.av-A { background: #D9622B; } .av-B { background: #2E7D9A; } .av-C { background: #7B5BB5; } .av-D { background: #8C939E; }
.v20board { background: #fff; border-radius: .9em; padding: .2em .3em; box-shadow: 0 1px 0 #E1E6EC; }
.v20r { display: grid; grid-template-columns: 5.2em repeat(3, 1fr); align-items: center; min-height: 3.6em; border-bottom: 1px solid #EEF1F4; }
.v20r:last-child { border-bottom: 0; }
.v20h { min-height: 3em; border-bottom: 2px solid #E1E6EC; }
.v20ch { display: flex; flex-direction: column; align-items: center; gap: .1em; font-size: .8em; font-weight: 700; color: #3A4556; }
.v20rh { display: flex; flex-direction: column; align-items: center; gap: .1em; font-size: .8em; font-weight: 700; min-height: 44px; justify-content: center; cursor: pointer; }
.v20c { margin: .15em; min-height: 3.2em; border-radius: .7em; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.v20c .v20s { flex-direction: column; gap: .15em; white-space: normal; text-align: center; line-height: 1.2; }
.v20c.c-lack { background: #FFF0DD; box-shadow: inset 0 0 0 2px #E08A2E; }
.v20c.c-none { background: #F1F3F6; }
.v20c.c-draft { background: #EEF3FF; }
.v20c.c-done { background: #F2F8F4; }
.v20r.away .v20away { grid-column: 2 / -1; padding: 0 .3em; }
.v20r.away .av { opacity: .55; }
.v20tapnote { font-size: .8em !important; }
.v20ic { flex: none; }
.ml .v20r { grid-template-columns: 4.6em repeat(3, 1fr); }
.ml .v20cnt > span { font-size: .66em; }
/* ボタンの文字の大きさと枠をそろえる */
button.a-btn, .a-btn { font-family: inherit; font-size: 1.02em !important; font-weight: 700; border: 0 !important; line-height: 1.35; }
.v20btns .a-btn.sub { font-size: .95em !important; }
.v20next.done .a-btn { width: 100%; }
/* 開始画面の勤務は、大きな2枚から選ぶ */
.ph[data-sid="G02"] .seg { flex-wrap: nowrap; gap: .6em; }
.ph[data-sid="G02"] .seg > span { flex: 1; min-height: 64px; justify-content: center; font-size: 1.1em; font-weight: 700; border-radius: 1em; }
/* 一覧の頁：画面番号の札を、画面の名前の上に置く */
.pt h2 { flex-direction: column; align-items: flex-start; gap: .25em; }

/* ---- 別の担当の確認を受けた直し ---- */
/* 押せる所は、どれも44以上。補助のボタンも56にそろえる（指摘D6） */
.a-badge { min-height: 44px; padding: 0 .8em; border-radius: 999px; cursor: pointer; }
.v20away { display: flex; align-items: center; min-height: 44px; cursor: pointer; }
.v20btns .a-btn.sub { min-height: 56px; }
/* 待ちの札（承認済み・本人確認待ち、未承認）：時計の形を付け、一覧の枠の指定を受けない（指摘D7） */
.ph .chip.info { padding: .2em .65em; border-radius: 999px; max-width: none; line-height: 1.5; font-size: .78em !important; background: #E3EEFB; }
.chip.info::before { content: ""; flex: none; width: .95em; height: .95em; border-radius: 50%; box-sizing: border-box; border: 2px solid #1D4FC4;
  background: linear-gradient(#1D4FC4, #1D4FC4) 50% 22% / 2px 34% no-repeat, linear-gradient(#1D4FC4, #1D4FC4) 64% 50% / 32% 2px no-repeat; }
/* 言葉の途中で折り返さない（指摘D8） */
.v20cnt > span { word-break: keep-all; }
.nw { white-space: nowrap; display: inline-block; }
/* 押せない保存のボタンも、文字が読める濃さにする */
.a-btn.off { background: #D5DBE2; color: #3A4556 !important; }
/* 月のカレンダーの日の種類を、読める大きさにする */
.cal-g div small { font-size: .74em; }

/* 札は中身の幅だけにする（再確認D7）。やさしい日本語の説明は言葉の途中で折り返さない（再確認N4） */
.chip { width: fit-content; flex: none; }
.v20tapnote { word-break: keep-all; }
/* 1文字だけの行を作らない */
.ph p, .ph small, .ph .a-note { text-wrap: pretty; }

/* 押せる所は画面のどこでも44以上（最終確認B） */
.a-back { min-width: 44px !important; min-height: 44px !important; }
.lnk { min-height: 44px !important; min-width: 44px; justify-content: center; }
.a-back { margin-right: -.6em; justify-content: flex-start; }
.lnk, .a-item .lnk { min-width: 44px !important; }