/* 凍結クライアント css.html @ edu-freeze-20260913 = b068ba1 の逐語コピー（改変禁止） */
/* ============================================================
   88衛生ポータル - デザインシステム
   steak88-jfs-fm-pict design-tokens.md 準拠
   メイン #D1311C (赤) / サブ #000 (黒) / アクセント #B28D3A (金)
   スマホファースト (max 430px) / 白黒印刷は帳票側で担保
   ============================================================ */
:root{
  --ink:#000000;
  --main:#D1311C;
  --main-dark:#A82112;
  --badge:#B28D3A;
  --paper:#FFFFFF;
  --mist:#FBEFEC;
  --line:#EAD9D5;
  --caption:#555555;
  --ok:#1A7A3C;
  --ok-soft:#E8F3EC;
  --bg:#F7F5F3;
  --dev:#37474F;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{background:var(--bg);}
body{
  font-family:'Noto Sans JP',sans-serif;color:var(--ink);
  font-size:16px;line-height:1.6;letter-spacing:0.02em;
}
#app{max-width:430px;margin:0 auto;min-height:100vh;background:var(--bg);
  display:flex;flex-direction:column;}

/* ---- ヘッダ ---- */
.hdr{
  background:var(--ink);color:#fff;
  padding:12px 12px;display:flex;align-items:center;gap:8px;
  position:sticky;top:0;z-index:10;
}
.hdr.dev{background:var(--dev);}
.hdr .mark{width:50px;height:42px;border-radius:8px;background:#fff;
  display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;
  padding:1px;}
.hdr .mark img{width:100%;height:100%;object-fit:contain;}
.hdr .tt{flex:1 1 auto;min-width:0;}
.hdr .t1{font-size:14px;font-weight:900;letter-spacing:0.03em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.hdr .t2{font-size:10.5px;opacity:0.75;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:180px;}
.hdr .env{position:absolute;top:2px;right:10px;background:#FFB300;color:#000;
  font-size:9px;font-weight:700;padding:1px 7px;border-radius:8px;}
.hdr .langbtn{margin-left:auto;background:transparent;border:1px solid rgba(255,255,255,.5);
  color:#fff;font-size:11px;padding:4px 8px;border-radius:14px;white-space:nowrap;flex-shrink:0;}
.hdr .langbtn + .langbtn{margin-left:6px;}

/* ---- 画面共通 ---- */
.scr{padding:16px;flex:1;display:none;}
.scr.on{display:block;}
.sec-title{
  font-size:18px;font-weight:900;
  border-left:6px solid var(--main);padding-left:10px;margin:6px 0 4px;
}
.sec-sub{font-size:12px;color:var(--caption);padding-left:16px;margin-bottom:14px;}
.store-chip{
  display:inline-block;background:var(--mist);border:1px solid var(--line);
  color:var(--ink);font-size:12.5px;font-weight:700;
  padding:3px 12px;border-radius:14px;margin-bottom:10px;
}

/* ---- カード ---- */
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:14px;margin-bottom:12px;box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.card.tap{cursor:pointer;transition:transform .05s;}
.card.tap:active{transform:scale(.985);}
.card .row{display:flex;align-items:center;gap:12px;}
.card .ic{width:44px;height:44px;flex-shrink:0;border-radius:10px;
  background:var(--mist);display:flex;align-items:center;justify-content:center;}
.card .ic img{width:34px;height:34px;object-fit:contain;}
.card .body{flex:1;min-width:0;}
.card .ttl{font-size:15.5px;font-weight:700;}
.card .cap{font-size:12px;color:var(--caption);}
.card .arrow{color:var(--badge);font-weight:900;font-size:18px;}

/* ---- バッジ ---- */
.pill{font-size:11px;font-weight:900;padding:3px 10px;border-radius:11px;white-space:nowrap;}
.pill.todo{background:var(--main);color:#fff;}
.pill.done{background:var(--ok-soft);color:var(--ok);border:1px solid var(--ok);}
.pill.wait{background:#FDF6E7;color:var(--badge);border:1px solid var(--badge);}

/* ---- ボタン ---- */
.btn{
  display:block;width:100%;border:none;border-radius:12px;
  font-family:inherit;font-size:16.5px;font-weight:900;letter-spacing:.05em;
  padding:15px;margin-top:14px;cursor:pointer;
}
.btn-p{background:var(--main);color:#fff;}
.btn-p:active{background:var(--main-dark);}
.btn-p:disabled{background:#C9C4C0;color:#fff;}
.btn-s{background:#fff;color:var(--ink);border:1.5px solid var(--ink);}
.btn-ghost{background:transparent;color:var(--caption);font-size:13.5px;
  font-weight:700;padding:10px;}
.btn .sub{display:block;font-size:11px;font-weight:400;opacity:.85;}

/* ---- 言語選択 (L0) ---- */
.langlist .btn{margin-top:10px;text-align:left;padding-left:20px;
  background:#fff;border:1.5px solid var(--line);color:var(--ink);font-weight:700;}
.langlist .btn .native{font-size:18px;font-weight:900;}
.langlist .btn .en{font-size:11.5px;color:var(--caption);font-weight:400;}

/* ---- 名前選択 (S0) ---- */
.namegrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.namebtn{
  background:#fff;border:1.5px solid var(--line);border-radius:12px;
  padding:13px 8px;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.namebtn .kana{display:block;font-size:10px;color:var(--badge);font-weight:600;}
.namebtn:active{background:var(--mist);}
.namebtn.donetoday{border-color:var(--ok);background:var(--ok-soft);}

/* ---- 健康チェック (S2) ---- */
.hc-item{
  background:#fff;border:1.5px solid var(--line);border-radius:12px;
  padding:12px 14px;margin-bottom:10px;display:flex;align-items:center;gap:12px;
}
.hc-item .ic{width:46px;height:46px;flex-shrink:0;}
.hc-item .ic img{width:100%;height:100%;object-fit:contain;}
.hc-item .lbl{flex:1;min-width:0;}
.hc-item .lbl b{font-size:14.5px;display:block;line-height:1.35;}
.hc-item .lbl span{font-size:10.5px;color:var(--caption);display:block;line-height:1.3;}
.seg{display:flex;flex-shrink:0;border-radius:10px;overflow:hidden;border:1.5px solid var(--ink);}
.seg button{
  font-family:inherit;border:none;background:#fff;color:var(--ink);
  font-size:14px;font-weight:900;padding:10px 0;width:62px;cursor:pointer;
}
.seg button+button{border-left:1.5px solid var(--ink);}
.seg button.ok-on{background:var(--ok);color:#fff;}
.seg button.ng-on{background:var(--main);color:#fff;}
.tempbox{display:flex;align-items:center;gap:10px;}
.tempbox input{
  font-family:inherit;font-size:26px;font-weight:900;text-align:center;
  width:120px;padding:8px;border:1.5px solid var(--ink);border-radius:10px;
}
.tempbox .unit{font-size:18px;font-weight:900;}

/* ---- NG確認・完了 ---- */
.alertbox{
  background:var(--mist);border:2px solid var(--main);border-radius:12px;
  padding:16px;text-align:center;
}
.alertbox .big{font-size:18px;font-weight:900;color:var(--main);}
.alertbox img{width:64px;height:64px;margin:8px auto;}
.donebox{background:var(--ok-soft);border:2px solid var(--ok);border-radius:12px;
  padding:22px 16px;text-align:center;}
.donebox .big{font-size:20px;font-weight:900;color:var(--ok);}
.donebox img{width:64px;height:64px;margin:8px auto;}

/* ---- 動画・クイズ (S3/S4) ---- */
.video-wrap{position:relative;width:100%;padding-top:56.25%;border-radius:12px;
  overflow:hidden;background:#000;margin-bottom:12px;}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.quiz-q{font-size:16px;font-weight:900;margin:14px 0 8px;}
.quiz-q .no{display:inline-flex;width:28px;height:28px;border-radius:50%;
  background:var(--badge);color:#fff;align-items:center;justify-content:center;
  font-size:14px;margin-right:8px;}
.choice{
  display:block;width:100%;text-align:left;background:#fff;font-family:inherit;
  border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;
  font-size:14.5px;font-weight:700;margin-bottom:8px;cursor:pointer;
}
.choice.sel{border-color:var(--main);background:var(--mist);}
.quiz-result-ok{color:var(--ok);font-size:18px;font-weight:900;text-align:center;padding:10px;}
.quiz-result-ng{color:var(--main);font-size:16px;font-weight:900;text-align:center;padding:10px;}

/* ---- フォーム ---- */
.fld{margin-bottom:12px;}
.fld label{font-size:13px;font-weight:700;display:block;margin-bottom:4px;}
.fld input[type=text],.fld input[type=password],.fld input[type=date],.fld textarea,.fld select{
  width:100%;font-family:inherit;font-size:16px;padding:11px;
  border:1.5px solid var(--line);border-radius:10px;background:#fff;
}
.note{font-size:11.5px;color:var(--caption);background:#FDF6E7;
  border:1px dashed var(--badge);border-radius:8px;padding:8px 10px;margin:10px 0;}

/* ---- 店長画面 ---- */
.mgr-row{
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;margin-bottom:8px;display:flex;align-items:center;gap:10px;
}
.mgr-row .nm{flex:1;font-size:14.5px;font-weight:700;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mgr-row .st-ok{color:var(--ok);font-weight:900;font-size:13px;}
.mgr-row .st-none{color:#AAA;font-weight:700;font-size:13px;}
.mgr-row .st-ng{background:var(--main);color:#fff;font-weight:900;font-size:12px;
  padding:4px 10px;border-radius:10px;border:none;font-family:inherit;cursor:pointer;}
.mgr-row .st-ngdone{color:var(--main);font-weight:700;font-size:12px;}
.statbar{display:flex;gap:8px;margin-bottom:12px;}
.stat{flex:1;background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:8px;text-align:center;}
.stat .v{font-size:22px;font-weight:900;}
.stat .k{font-size:10.5px;color:var(--caption);}
.stat.ng .v{color:var(--main);}
.stat.ok .v{color:var(--ok);}
.checkrow{display:flex;align-items:center;gap:10px;background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:6px;}
.checkrow input{width:22px;height:22px;accent-color:var(--main);}
.checkrow label{font-size:14.5px;font-weight:700;flex:1;}

/* ---- 管理者UI (?view=admin / PC寄り) ---- */
#app.wide{max-width:860px;}
.tabbar{display:flex;gap:6px;margin-bottom:14px;border-bottom:2px solid var(--ink);}
.tab{
  font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;
  background:#EDEAE7;color:var(--ink);border:1px solid var(--line);border-bottom:none;
  border-radius:8px 8px 0 0;padding:9px 18px;
}
.tab.on{background:var(--ink);color:#fff;border-color:var(--ink);}
.filterbar{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap;}
.filterbar input,.filterbar select{
  font-family:inherit;font-size:14px;padding:8px 10px;
  border:1.5px solid var(--line);border-radius:8px;background:#fff;
}
.btn-mini{
  font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;
  background:var(--ink);color:#fff;border:none;border-radius:8px;padding:8px 16px;
}
.btn-mini:active{background:#333;}
table.adm{width:100%;border-collapse:collapse;background:#fff;margin-bottom:16px;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:13px;}
table.adm th{background:var(--ink);color:#fff;font-weight:700;padding:8px 10px;
  text-align:center;font-size:12.5px;white-space:nowrap;}
table.adm td{border-top:1px solid var(--line);padding:7px 10px;text-align:center;}
table.adm td.l{text-align:left;}
table.adm tr.ngrow{background:var(--mist);}
.ngc{color:var(--main);font-weight:900;}
.cap2{font-size:11px;color:var(--caption);}

/* ---- フッター ---- */
.foot{
  text-align:center;font-size:10px;color:var(--caption);
  padding:14px 16px 20px;line-height:1.5;
}
.loading{position:fixed;inset:0;background:rgba(255,255,255,.75);z-index:50;
  display:none;align-items:center;justify-content:center;flex-direction:column;gap:12px;}
.loading.on{display:flex;}
.spinner{width:44px;height:44px;border:5px solid var(--line);
  border-top-color:var(--main);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.loading .msg{font-size:13.5px;font-weight:700;color:var(--ink);}