/* キャスト向けの自社の画面の見本（日記を書く画面＝姫デコと同じ見た目、は index.html 側）。
   設計 03 §3: 明るい地・主ボタンは黒・色は状態にだけ使う・店名の横に店の色の小さな印・状態は色だけにせず文字を併記 */
:root{
  --bg:#f5f5f7; --card:#fff; --ink:#1d1d1f; --sub:#6e6e73; --line:#e3e3e8;
  --ok:#1a7f37; --busy:#0b62c4; --wait:#5f6b7a; --ng:#c62828; --warn:#9a5b00;
  --ok-bg:#eaf6ee; --ng-bg:#fdecec; --warn-bg:#fff4e0; --busy-bg:#e8f1fc;
  /* 店の色（仮。本番は新オフィシャルの店の設定 themeColor を使う） */
  --st-hotel:#c8102e; --st-deli:#1f6fd1; --st-tsuma:#8e44ad; --st-first:#2e9d5b; --st-dcp:#d98a00;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic UI",sans-serif;
  -webkit-text-size-adjust:100%;line-height:1.55}
button,input,select{font:inherit}
a{color:inherit}
.wrap{max-width:480px;margin:0 auto;padding:0 0 120px}

/* 見本だけの帯（状態の切り替え） */
.mock{background:#3a3a3c;color:#fff;font-size:12px;padding:6px 12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mock b{font-weight:600}
.mock select{font-size:12px;padding:2px 4px;border-radius:6px;border:0}
.mock a{color:#cfe3ff}

/* 見出し */
.top{padding:18px 16px 6px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.top h1{font-size:21px;margin:0;letter-spacing:.01em}
.top .when{font-size:12px;color:var(--sub);white-space:nowrap}
.back{display:inline-block;padding:12px 16px 0;font-size:15px;text-decoration:none;color:var(--busy)}

/* 帯の知らせ（止めている・つながらない） */
.notice{margin:10px 16px 0;padding:12px 14px;border-radius:12px;font-size:14px}
.notice.warn{background:var(--warn-bg);color:#5c3600}
.notice.ng{background:var(--ng-bg);color:#7a1414}
.notice.info{background:var(--busy-bg);color:#0a3d7a}

/* まとまり */
.sec{margin:14px 12px 0;background:var(--card);border-radius:16px;padding:6px 0;box-shadow:0 0 0 1px var(--line)}
.sec-h{display:flex;justify-content:space-between;align-items:center;padding:10px 14px 4px}
.sec-h h2{font-size:15px;margin:0}
.sec-h .aside{font-size:12px;color:var(--sub)}
.row{padding:12px 14px;border-top:1px solid var(--line)}
.row:first-of-type{border-top:0}
.row.dim{color:var(--sub)}
.note{font-size:12px;color:var(--sub);padding:4px 14px 10px}

/* 店名と店の色の印 */
.store{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px}
.dot{width:10px;height:10px;border-radius:50%;flex:0 0 10px}
.dot.hotel{background:var(--st-hotel)} .dot.deli{background:var(--st-deli)} .dot.tsuma{background:var(--st-tsuma)}
.dot.first{background:var(--st-first)} .dot.dcp{background:var(--st-dcp)}

/* 状態（色だけにせず記号と文字を併記） */
.st{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap}
.st.ok{color:var(--ok);background:var(--ok-bg)}
.st.busy{color:var(--busy);background:var(--busy-bg)}
.st.wait{color:var(--wait);background:#eef0f3}
.st.ng{color:var(--ng);background:var(--ng-bg)}
.st.copy{color:var(--sub);background:#f0f0f3;font-weight:500}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:12px;border:0;padding:12px 16px;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;min-height:46px}
.btn.primary{background:#111;color:#fff}
.btn.primary:disabled{background:#b9b9be;cursor:not-allowed}
.btn.line{background:#fff;color:#111;box-shadow:inset 0 0 0 1.5px #111}
.btn.soft{background:#f0f0f3;color:#111}
.btn.small{min-height:36px;padding:7px 12px;font-size:14px;border-radius:10px}
.btn.block{display:flex;width:100%}
.btn.danger{background:#fff;color:var(--ng);box-shadow:inset 0 0 0 1.5px var(--ng)}

/* 下に固定のボタン */
.dock{position:fixed;left:0;right:0;bottom:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(rgba(245,245,247,0),var(--bg) 30%)}
.dock .in{max-width:448px;margin:0 auto}

/* 数字のカード */
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px 12px 12px}
.kpi{background:#fafafc;border-radius:12px;padding:10px 12px;box-shadow:inset 0 0 0 1px var(--line)}
.kpi .k{font-size:12px;color:var(--sub)}
.kpi .v{font-size:22px;font-weight:700;letter-spacing:.01em}
.kpi .d{font-size:12px;color:var(--sub)}
.kpi .d.up{color:var(--ok)}

/* 進み具合の帯 */
.meter{height:10px;border-radius:999px;background:#e9e9ee;overflow:hidden}
.meter i{display:block;height:100%;background:#111;border-radius:999px}

/* 小さな窓 */
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:flex-end;justify-content:center;z-index:20}
.sheet-bg.on{display:flex}
.sheet{background:#fff;width:100%;max-width:480px;border-radius:18px 18px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom))}
.sheet h3{margin:0 0 8px;font-size:17px}
.sheet p{margin:0 0 14px;font-size:14px;color:#333}
.sheet .btns{display:flex;gap:8px}
.sheet .btns .btn{flex:1}

.hidden{display:none !important}
input.pin{width:100%;font-size:28px;letter-spacing:.6em;text-align:center;padding:12px;border-radius:12px;border:1.5px solid #c7c7cc;background:#fff}
input.pin:focus{outline:none;border-color:#111}
.err{color:var(--ng);font-size:13px;margin-top:6px;min-height:1.2em}

/* 本番の画面で足したもの（2026-11-15） */
.toastx{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:rgba(30,30,32,.92);color:#fff;padding:10px 16px;border-radius:20px;font-size:14px;z-index:99;display:none;max-width:90%;text-align:center}
.toastx.on{display:block}
.loading{padding:14px;font-size:14px;color:var(--sub)}