@charset "UTF-8";
/* ============================================================
   くにさき歯科 勤怠・給与管理システム
   style.css … デザイントークン・共通部品・キオスク・印刷共通
   （担当: Agent A。画面固有のCSSは b-screens.css / c-screens.css へ）
   ============================================================ */

/* ---------- 1. トークン ---------- */
:root {
  --c-primary:#0e7c86; --c-primary-dark:#0a5d65; --c-primary-pale:#e6f2f3;
  --c-bg:#f5f7f8; --c-surface:#ffffff; --c-text:#1f2a2e; --c-muted:#6b7a80;
  --c-line:#dde5e8; --c-red:#c0392b; --c-red-pale:#fdecea; --c-green:#1e8e5a;
  --c-amber:#b7791f; --c-amber-pale:#fdf6e3;
  --radius:10px; --shadow:0 1px 3px rgba(15,40,44,.08);
  --nav-w:216px; --header-h:56px;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",system-ui,sans-serif;
}

/* ---------- 2. リセット ---------- */
*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
  background:var(--c-bg); color:var(--c-text);
  font-family:inherit; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,ul,ol,dl,figure { margin:0; }
ul,ol { padding-left:1.4em; }
img,svg { vertical-align:middle; }
a { color:var(--c-primary-dark); }
:focus-visible { outline:3px solid rgba(14,124,134,.45); outline-offset:2px; }

/* ---------- 3. レイアウト ---------- */
#app { display:block; min-height:100vh; }

/* aside限定（.b-btn.mnav 等、他画面の "nav" を含むクラス名と衝突させない） */
aside.nav {
  position:fixed; left:0; top:0; bottom:0; width:var(--nav-w);
  background:var(--c-surface); border-right:1px solid var(--c-line);
  display:flex; flex-direction:column; z-index:40; overflow-y:auto;
}
.main-wrap { margin-left:var(--nav-w); min-height:100vh; min-width:0; display:flex; flex-direction:column; }

.app-header {
  position:sticky; top:0; z-index:30; height:var(--header-h);
  display:flex; align-items:center; gap:14px; padding:0 22px;
  background:var(--c-surface); border-bottom:1px solid var(--c-line);
}
.app-header-title { font-size:17px; font-weight:700; letter-spacing:.01em; }
.app-header-title span { font-weight:400; font-size:14px; color:var(--c-muted); margin-left:8px; }
.app-header-right { margin-left:auto; display:flex; align-items:center; gap:12px; flex:none; }
.today-label { font-size:15px; color:var(--c-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.badge-demo { white-space:nowrap; }

.screen { flex:1; min-width:0; max-width:100%; padding:22px 24px 72px; }

/* メニューボタン（640px以下だけ出る。既定は非表示・JSが組み終わるまで hidden） */
.menu-btn {
  display:none; align-items:center; gap:6px; flex:none;
  padding:0 12px; min-height:44px;
  border:1px solid var(--c-line); border-radius:8px;
  background:var(--c-surface); color:var(--c-primary-dark); font-weight:700;
}
.menu-btn:hover { background:var(--c-primary-pale); }
.menu-btn[hidden] { display:none; }

/* 全画面の引き出しメニュー（開閉はJSのhidden属性） */
.mobile-nav {
  display:none; position:fixed; inset:0; z-index:60;
  background:var(--c-surface); color:var(--c-text);
  flex-direction:column; overflow-y:auto;
}
.mobile-nav[hidden] { display:none; }
body.nav-open { overflow:hidden; }
.mobile-nav-head {
  position:sticky; top:0; z-index:1; background:var(--c-surface);
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; border-bottom:1px solid var(--c-line);
}
.mobile-nav-brand { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.mobile-nav-mark {
  width:36px; height:36px; flex:none; border-radius:9px;
  background:var(--c-primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px;
}
.mobile-nav-name { font-size:18px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mobile-nav-close { width:48px; height:48px; min-height:48px; padding:0; flex:none; color:var(--c-muted); }
.mobile-nav-list { padding:12px 14px 8px; display:flex; flex-direction:column; gap:8px; }
.mobile-nav-item {
  display:flex; align-items:center; justify-content:flex-start; gap:12px;
  width:100%; min-height:60px; padding:10px 14px;
  border:1px solid var(--c-line); border-radius:10px;
  background:var(--c-surface); color:var(--c-text);
  font-size:18px; font-weight:700; text-align:left; white-space:normal;
}
.mobile-nav-item .icon { flex:none; color:var(--c-primary-dark); }
.mobile-nav-item.active { background:var(--c-primary); border-color:var(--c-primary); color:#fff; }
.mobile-nav-item.active .icon { color:#fff; }
.mobile-nav-foot { padding:14px; color:var(--c-muted); font-size:13px; text-align:center; }

/* ---------- 4. サイドバーナビ ---------- */
.nav-brand {
  padding:16px 18px 14px; border-bottom:1px solid var(--c-line);
  display:flex; align-items:center; gap:10px;
}
.nav-brand-mark {
  width:34px; height:34px; flex:none; border-radius:9px;
  background:var(--c-primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px;
}
.nav-brand-text { line-height:1.25; }
.nav-brand-text b { display:block; font-size:15px; }
.nav-brand-text small { color:var(--c-muted); font-size:11.5px; }

.nav-list { padding:10px 10px 16px; display:flex; flex-direction:column; gap:2px; }
.nav-item {
  display:flex; align-items:center; gap:10px; width:100%;
  padding:11px 12px; border:0; border-radius:8px; background:transparent;
  color:var(--c-text); font:inherit; font-size:16px; text-align:left; cursor:pointer;
}
.nav-item:hover { background:var(--c-primary-pale); }
.nav-item.active { background:var(--c-primary); color:#fff; font-weight:700; }
.nav-item .icon { flex:none; }
.nav-foot { margin-top:auto; padding:12px 16px 16px; border-top:1px solid var(--c-line); color:var(--c-muted); font-size:12px; }

/* ---------- 5. アイコン ---------- */
.icon { display:inline-block; vertical-align:-0.16em; flex:none; }

/* ---------- 6. 見出し・テキスト ---------- */
.screen-head { display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:18px; min-width:0; max-width:100%; }
.screen-title { font-size:22px; font-weight:700; display:flex; align-items:center; gap:9px; }
.screen-sub { color:var(--c-muted); font-size:14px; }
.screen-head .spacer { flex:1; }

.sec-title { font-size:17px; font-weight:700; margin:0 0 10px; display:flex; align-items:center; gap:8px; }
.muted { color:var(--c-muted); }
.small { font-size:14px; }
.tiny { font-size:12.5px; }
.num, .tnum { font-variant-numeric:tabular-nums; }
.right { text-align:right; }
.center { text-align:center; }
.nowrap { white-space:nowrap; }
.strong { font-weight:700; }
.text-red { color:var(--c-red); }
.text-green { color:var(--c-green); }
.text-amber { color:var(--c-amber); }
.text-primary { color:var(--c-primary-dark); }

/* ---------- 7. カード・パネル ---------- */
.card, .panel, .box {
  background:var(--c-surface); border:1px solid var(--c-line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:18px;
  min-width:0; max-width:100%;
}
.card + .card, .panel + .panel { margin-top:16px; }
.card-head { display:flex; align-items:center; gap:10px; margin:-2px 0 12px; }
.card-head h3, .card-head .card-title { font-size:17px; font-weight:700; }
.card-head .spacer { flex:1; }
.card-tight { padding:12px 14px; }

.row { display:flex; gap:16px; flex-wrap:wrap; min-width:0; }
.row > .col { flex:1 1 320px; min-width:0; max-width:100%; }
.stack { display:flex; flex-direction:column; gap:16px; min-width:0; }
.toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; min-width:0; max-width:100%; }
.toolbar .spacer { flex:1; }

/* ---------- 8. ボタン ---------- */
button, .btn, .button {
  font:inherit; font-size:16px; line-height:1.2;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 16px; min-height:42px;
  border:1px solid var(--c-line); border-radius:8px;
  background:var(--c-surface); color:var(--c-text);
  cursor:pointer; text-decoration:none; white-space:nowrap;
}
button:hover, .btn:hover, .button:hover { background:#f0f6f7; }
button:active, .btn:active, .button:active { transform:translateY(1px); }
button[disabled], .btn.disabled, .btn[disabled] { opacity:.5; cursor:not-allowed; }

.btn-primary, button.primary { background:var(--c-primary); border-color:var(--c-primary); color:#fff; font-weight:700; }
.btn-primary:hover, button.primary:hover { background:var(--c-primary-dark); border-color:var(--c-primary-dark); }
.btn-danger, button.danger { background:var(--c-red); border-color:var(--c-red); color:#fff; font-weight:700; }
.btn-danger:hover, button.danger:hover { background:#a5301f; }
.btn-ghost { background:transparent; border-color:transparent; }
.btn-ghost:hover { background:var(--c-primary-pale); }
.btn-outline { background:var(--c-surface); border-color:var(--c-primary); color:var(--c-primary-dark); font-weight:700; }
.btn-sm { min-height:34px; padding:5px 11px; font-size:14px; }
.btn-lg { min-height:54px; padding:12px 24px; font-size:19px; font-weight:700; }
.btn-icon { min-height:38px; width:38px; padding:0; }
.btn-block { width:100%; }

.btn-group { display:inline-flex; }
.btn-group > button, .btn-group > .btn { border-radius:0; margin-left:-1px; }
.btn-group > :first-child { border-radius:8px 0 0 8px; margin-left:0; }
.btn-group > :last-child { border-radius:0 8px 8px 0; }
.btn-group > .active { background:var(--c-primary); border-color:var(--c-primary); color:#fff; font-weight:700; }

/* ---------- 9. フォーム ---------- */
label { font-size:14px; color:var(--c-muted); }
input, select, textarea {
  font:inherit; font-size:16px; color:var(--c-text);
  padding:8px 10px; min-height:42px;
  border:1px solid var(--c-line); border-radius:8px; background:var(--c-surface);
  max-width:100%;
}
input[type=checkbox], input[type=radio] { min-height:0; width:20px; height:20px; vertical-align:-.2em; accent-color:var(--c-primary); }
textarea { min-height:84px; line-height:1.5; }
input:disabled, select:disabled, textarea:disabled { background:#f2f5f6; color:var(--c-muted); }
input[type=number], input.num { font-variant-numeric:tabular-nums; text-align:right; }

.field { display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
.field > label { font-weight:700; color:var(--c-text); font-size:14px; }
.field .hint { color:var(--c-muted); font-size:12.5px; }
.field-row { display:flex; gap:14px; flex-wrap:wrap; }
.field-row > .field { flex:1 1 220px; }
.inline-label { display:inline-flex; align-items:center; gap:7px; font-size:15px; color:var(--c-text); }

/* ---------- 10. 表 ---------- */
table { border-collapse:collapse; }
.table, table.data {
  width:100%; border-collapse:collapse; background:var(--c-surface);
  font-variant-numeric:tabular-nums; font-size:16px;
}
.table th, .table td, table.data th, table.data td {
  border:1px solid var(--c-line); padding:8px 10px; text-align:left; vertical-align:middle;
}
.table thead th, table.data thead th {
  background:var(--c-primary-pale); color:var(--c-primary-dark); font-weight:700;
  position:sticky; top:var(--header-h); z-index:3;
}
.table tbody tr:hover, table.data tbody tr:hover { background:#f3f9fa; }
.table tfoot td, .table tfoot th { background:#f7fafb; font-weight:700; }
.table-dense { font-size:14px; }
.table-dense th, .table-dense td { padding:4px 6px; }
.table-scroll { overflow:auto; border:1px solid var(--c-line); border-radius:var(--radius); background:var(--c-surface); }
.table-scroll .table { border:0; }
.table-scroll .table thead th { top:0; }
.table-scroll .table th, .table-scroll .table td { border-left:0; }
.table-scroll .table th:first-child, .table-scroll .table td:first-child { border-left:1px solid var(--c-line); }

/* ---------- 11. バッジ・チップ ---------- */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 9px; border-radius:999px; font-size:12.5px; font-weight:700; line-height:1.8;
  background:var(--c-primary-pale); color:var(--c-primary-dark); border:1px solid transparent;
}
.badge-demo { background:var(--c-amber-pale); color:var(--c-amber); border-color:#ecdcae; }
.badge-red { background:var(--c-red-pale); color:var(--c-red); border-color:#f4cdc7; }
.badge-green { background:#e6f5ee; color:var(--c-green); border-color:#c3e6d5; }
.badge-amber { background:var(--c-amber-pale); color:var(--c-amber); border-color:#ecdcae; }
.badge-gray { background:#eef2f3; color:var(--c-muted); border-color:#dfe6e8; }
.badge-lg { font-size:14px; padding:4px 12px; }

.chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border:1px solid var(--c-line); border-radius:999px; background:var(--c-surface); font-size:14px; }

/* 状態カラー（勤怠マーク共通） */
.mk-ketsu { background:#eef1f2; color:var(--c-muted); }
.mk-yuu   { background:#e6f5ee; color:var(--c-green); }
.mk-over  { color:var(--c-red); font-weight:700; }

/* 注意カード */
.note { border-radius:var(--radius); padding:12px 15px; border:1px solid; font-size:15px; display:flex; gap:9px; align-items:flex-start; }
.note-info { background:var(--c-primary-pale); border-color:#bcdcdf; color:var(--c-primary-dark); }
.note-warn { background:var(--c-amber-pale); border-color:#ecdcae; color:var(--c-amber); }
.note-err  { background:var(--c-red-pale); border-color:#f4cdc7; color:var(--c-red); }
.note .icon { margin-top:2px; }

/* バー（扶養上限などの進捗） */
.bar { height:12px; border-radius:999px; background:#e8eef0; overflow:hidden; }
.bar > i { display:block; height:100%; background:var(--c-primary); border-radius:999px; }
.bar.warn > i { background:var(--c-amber); }
.bar.danger > i { background:var(--c-red); }

/* ---------- 12. トースト ---------- */
.toast-area {
  position:fixed; right:22px; bottom:22px; z-index:600;
  display:flex; flex-direction:column; gap:10px; align-items:flex-end; pointer-events:none;
}
.toast {
  pointer-events:auto; display:flex; align-items:center; gap:9px;
  background:var(--c-text); color:#fff; font-size:16px;
  padding:12px 17px; border-radius:9px; box-shadow:0 8px 24px rgba(15,40,44,.26);
  max-width:440px; opacity:0; transition:opacity .12s linear;
}
.toast.show { opacity:1; }
.toast.ok { background:var(--c-green); }
.toast.warn { background:#8a5a0e; } /* 白文字とのコントラスト確保（--c-amberでは3.6:1しかない） */
.toast.err { background:var(--c-red); }

/* ---------- 13. モーダル ---------- */
.modal-back {
  position:fixed; inset:0; z-index:500; padding:24px;
  background:rgba(20,35,38,.44); display:flex; align-items:center; justify-content:center;
}
.modal {
  width:520px; max-width:100%; max-height:90vh; display:flex; flex-direction:column;
  background:var(--c-surface); border-radius:var(--radius); box-shadow:0 16px 48px rgba(15,40,44,.28);
}
.modal-head { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--c-line); }
.modal-title { font-size:18px; font-weight:700; flex:1; min-width:0; }
.modal-close { border:0; background:transparent; min-height:34px; width:34px; padding:0; border-radius:8px; color:var(--c-muted); }
.modal-close:hover { background:#eef3f4; }
.modal-body { padding:18px; overflow:auto; }
.modal-foot { display:flex; justify-content:flex-end; gap:10px; padding:13px 18px; border-top:1px solid var(--c-line); background:#fafcfc; border-radius:0 0 var(--radius) var(--radius); }

/* ---------- 14. キオスク（打刻画面） ---------- */
/* iPad（1024×768横／768×1024縦）で、15名がスクロールなしに収まる高さで組む。
   時計・日付は1行、名前ボタンは88px以上・22px以上。
   v1.8.0 から区分の見出しは無し（スタッフ画面の並び順のまま1つの升目）。 */
body.kiosk .nav, body.kiosk .app-header { display:none; }
body.kiosk .menu-btn, body.kiosk .mobile-nav { display:none; }
body.kiosk .main-wrap { margin-left:0; }
body.kiosk .screen { padding:0; }
body.kiosk { background:#eef5f6; }

/* 打刻中は指で押すだけ。長押しの選択・ダブルタップの拡大・青いハイライトを止める */
body.kiosk, body.kiosk .kiosk, body.kiosk .kiosk * {
  -webkit-touch-callout:none;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* 打刻画面の入れ物。body にも kiosk クラスが付くので、必ず div.kiosk と書く
   （.kiosk だけだと body にも同じ余白・min-height が二重にかかる） */
div.kiosk {
  min-height:100vh; display:flex; flex-direction:column;
  padding:12px 20px 16px; position:relative;
}
.kiosk-lock {
  position:absolute; right:14px; top:10px; z-index:5;
  width:46px; height:46px; min-height:46px; padding:0; border-radius:10px;
  background:rgba(255,255,255,.7); border:1px solid var(--c-line); color:var(--c-muted);
}
.kiosk-lock:hover { background:#fff; color:var(--c-primary-dark); }

.kiosk-top {
  display:flex; align-items:center; justify-content:center;
  gap:20px; flex-wrap:wrap; padding:0 62px 8px;
}
.kiosk-clock {
  font-size:72px; font-weight:700; line-height:1.05; letter-spacing:.01em;
  color:var(--c-primary-dark); font-variant-numeric:tabular-nums;
}
.kiosk-clock .sec { font-size:34px; color:var(--c-primary); margin-left:5px; }
.kiosk-when { text-align:left; }
.kiosk-date { font-size:24px; font-weight:700; color:var(--c-text); font-variant-numeric:tabular-nums; }
.kiosk-clinic { font-size:14px; color:var(--c-muted); margin-top:1px; }

/* 「いつ・何をする画面か」の1行。打刻専用のiPadでは出さない（js側で判断）。
   本体の .c-help（14b節）はこの下に書いてあるので、body.kiosk を付けて勝たせる */
body.kiosk .kiosk-help { margin:0 0 8px; }

.kiosk-lead { font-size:21px; font-weight:700; text-align:center; margin:0 0 10px; }
/* 出勤中の人数（全体で1つ）。「お名前を押してください」の横に小さく */
.kiosk-lead .badge { margin-left:10px; vertical-align:middle; font-size:14px; font-weight:700; }

/* 名前ボタンの升目。並びはスタッフ画面の並び順（区分の見出しは v1.8.0 で廃止。.kiosk-group-title は旧版の名残） */
.kiosk-groups {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px; align-content:start;
}
/* 列は3〜4列まで。広い画面で5列以上になると、名前より探す目のほうが疲れる */
@media (min-width:600px) { .kiosk-groups { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:900px) { .kiosk-groups { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.kiosk-group-title {
  grid-column:1 / -1;
  font-size:15px; font-weight:700; color:var(--c-primary-dark);
  display:flex; align-items:center; gap:8px; line-height:1.3;
}
.kiosk-group-title .badge { font-weight:700; }

.kiosk-staff-btn {
  min-height:88px; padding:8px 12px; border-radius:12px;
  border:2px solid var(--c-line); background:var(--c-surface);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  position:relative; white-space:normal;
}
.kiosk-staff-btn:hover { border-color:var(--c-primary); background:var(--c-primary-pale); }
.kiosk-staff-btn:active { border-color:var(--c-primary); background:var(--c-primary-pale); }
.kiosk-staff-name { font-size:26px; font-weight:700; line-height:1.15; }
.kiosk-staff-kana { font-size:14px; color:var(--c-muted); line-height:1.3; }
.kiosk-staff-btn.working { border-color:var(--c-green); background:#f0faf5; }
.kiosk-staff-state {
  position:absolute; right:7px; top:6px; font-size:12px; font-weight:700;
  color:var(--c-green); background:#e6f5ee; border-radius:999px; padding:1px 8px;
}

/* 打刻画面の中身。ここが縦にのびるので、本人画面の2大ボタンが画面の真ん中に来る */
#kioskBody { flex:1; display:flex; flex-direction:column; min-height:0; min-width:0; }

/* 本人画面。「出勤」「退勤」の2つだけが主役。戻るは左上に大きく */
.kiosk-person { position:relative; flex:1; display:flex; flex-direction:column; min-width:0; }
.kiosk-person-main {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; min-width:0;
}
.kiosk-back {
  position:absolute; left:0; top:0; z-index:4;
  display:inline-flex; align-items:center; gap:8px;
  min-height:64px; padding:10px 26px 10px 20px; font-size:21px; font-weight:700;
  border:2px solid var(--c-line); border-radius:12px;
  background:var(--c-surface); color:var(--c-primary-dark);
}
.kiosk-back:hover { border-color:var(--c-primary); background:var(--c-primary-pale); }
.kiosk-person-name { font-size:52px; font-weight:700; line-height:1.15; text-align:center; }
.kiosk-person-kana { font-size:18px; color:var(--c-muted); text-align:center; margin-top:-10px; }
.kiosk-person-state { font-size:22px; color:var(--c-text); text-align:center; }
.kiosk-person-punches {
  font-size:15px; text-align:center; max-width:100%; overflow-wrap:anywhere;
  padding-top:8px; border-top:1px solid var(--c-line); margin-top:8px;
}
.kiosk-choice { display:flex; gap:22px; flex-wrap:wrap; justify-content:center; width:100%; max-width:820px; }
.kiosk-big-btn {
  flex:1 1 300px; min-height:150px; border-radius:16px; border:3px solid var(--c-line);
  background:var(--c-surface); font-size:42px; font-weight:700; color:var(--c-muted);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.kiosk-big-btn .sub { font-size:16px; font-weight:400; }
.kiosk-big-btn.on-in { border-color:var(--c-primary); background:var(--c-primary); color:#fff; }
.kiosk-big-btn.on-out { border-color:var(--c-green); background:var(--c-green); color:#fff; }
.kiosk-big-btn:hover { filter:brightness(1.03); }
/* いまの状態ではない方。控えめにするが、押し間違いの取り消しに使うので押せるまま */
.kiosk-big-btn.dim { opacity:.72; border-color:#c9d6da; color:#7c8b91; }

/* 完了画面 */
.kiosk-done { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; }
.kiosk-done-check {
  width:92px; height:92px; border-radius:999px;
  background:var(--c-primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.kiosk-done.out .kiosk-done-check { background:var(--c-green); }
.kiosk-done-greet { font-size:50px; font-weight:700; color:var(--c-primary-dark); }
.kiosk-done-name { font-size:60px; font-weight:700; line-height:1.1; }
.kiosk-done-dir { font-size:26px; color:var(--c-muted); }
.kiosk-done-time { font-size:100px; font-weight:700; line-height:1; color:var(--c-primary); font-variant-numeric:tabular-nums; }
.kiosk-done-note { font-size:16px; color:var(--c-muted); }
.kiosk-done.out .kiosk-done-greet { color:var(--c-green); }
.kiosk-done.out .kiosk-done-time { color:var(--c-green); }

.kiosk-foot { margin-top:10px; display:flex; align-items:center; justify-content:center; gap:10px; color:var(--c-muted); font-size:14px; }

/* 背の低い画面（iPadの横向き 1024×768 など）。
   名前ボタンの大きさ（88px以上・22px以上）は変えず、まわりの余白だけを詰めて
   15名がスクロールなしに収まるようにする。 */
@media (max-height:860px) {
  div.kiosk { padding:8px 16px 10px; }
  .kiosk-lock { right:10px; top:7px; width:42px; height:42px; min-height:42px; }
  .kiosk-top { gap:16px; padding:0 56px 4px; }
  .kiosk-clock { font-size:52px; }
  .kiosk-clock .sec { font-size:25px; }
  .kiosk-date { font-size:20px; }
  .kiosk-clinic { font-size:13px; }
  body.kiosk .kiosk-help { margin:0 0 6px; padding:4px 10px; font-size:13px; }
  .kiosk-lead { font-size:18px; margin:0 0 6px; }
  .kiosk-groups { gap:8px; }
  .kiosk-group-title { font-size:14px; }
  .kiosk-staff-name { font-size:24px; }
  .kiosk-foot { margin-top:6px; font-size:13px; }
}

/* iPadの横向き（768px）はここ。15名が入る高さまで詰める（v1.6 は区分の見出し3本込みで15名。v1.8.0 は見出し無しで行に余裕がある）。
   「お名前を押してください」は、名前ボタンだけの画面では言わなくても分かるので出さない。 */
@media (max-height:800px) {
  div.kiosk { padding:6px 16px 6px; }
  .kiosk-top { padding:0 52px 0; }
  .kiosk-clock { font-size:42px; }
  .kiosk-clock .sec { font-size:21px; }
  .kiosk-date { font-size:19px; }
  body.kiosk .kiosk-help { margin:0 0 5px; padding:3px 10px; font-size:12.5px; }
  .kiosk-lead { font-size:17px; margin:0 0 5px; }
  .kiosk-groups { gap:5px; }
  .kiosk-group-title { font-size:13px; line-height:1.15; }
  .kiosk-foot { margin-top:4px; }
}

/* PINキーパッド */
.pinpad { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
.pinpad button { min-height:60px; font-size:26px; font-weight:700; }
.pin-view { font-size:34px; letter-spacing:.35em; text-align:center; min-height:52px; font-variant-numeric:tabular-nums; }

/* ---------- 14b. 画面の1行説明（見出しの直下・薄い帯） ---------- */
.c-help {
  display:block; width:100%;
  margin:-4px 0 14px; padding:6px 12px;
  border-radius:8px; border:1px solid var(--c-line);
  background:var(--c-primary-pale); color:var(--c-primary-dark);
  font-size:13.5px; line-height:1.5; font-weight:700;
}

/* iPadをつなぐQRコード（設定 → データ管理） */
.sy-qr { text-align:center; margin:0 0 14px; }
.sy-qr svg { max-width:100%; height:auto; }
.sy-qrsteps { margin:0 0 12px; padding-left:1.3em; font-size:15px; line-height:1.8; }
.sy-qrsteps li { margin:0 0 2px; }

/* ---------- 15. ユーティリティ ---------- */
.mt0{margin-top:0}.mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.mb0{margin-bottom:0}.mb4{margin-bottom:4px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.mb24{margin-bottom:24px}
.gap8{gap:8px}.gap12{gap:12px}.gap16{gap:16px}
.flex{display:flex}.flex-col{display:flex;flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}
.wrap{flex-wrap:wrap}.grow{flex:1}
.hidden{display:none !important}
.empty-state { text-align:center; color:var(--c-muted); padding:48px 16px; font-size:16px; }
.error-card { border:1px solid #f4cdc7; background:var(--c-red-pale); color:var(--c-red); border-radius:var(--radius); padding:16px 18px; }
.error-card b { display:block; margin-bottom:4px; }

/* ---------- 16. 幅の狭い画面（受付PCが小さい場合） ---------- */
@media (max-width:1000px) {
  :root { --nav-w:72px; }
  .nav-item { justify-content:center; padding:12px 0; }
  .nav-item span.label { display:none; }
  .nav-brand-text { display:none; }
  .nav-brand { justify-content:center; padding:14px 0; }
  .nav-foot { display:none; }   /* アイコンだけの幅では説明文が縦に潰れるので出さない */
  .screen { padding:18px 14px 64px; }
  .kiosk-clock { font-size:60px; }
  .kiosk-clock .sec { font-size:28px; }
  .kiosk-date { font-size:21px; }
  .kiosk-done-time { font-size:80px; }
  .kiosk-person-name { font-size:44px; }
  .kiosk-big-btn { flex:1 1 260px; min-height:130px; font-size:38px; }
}

/* 横に長い表の画面（勤怠・シフト）は、表が収まらない幅ではナビをアイコンだけに畳んで表に幅を譲る */
@media (max-width:1560px) {
  body[data-screen="attendance"], body[data-screen="shift"] { --nav-w:72px; }
  body[data-screen="attendance"] .nav-item, body[data-screen="shift"] .nav-item { justify-content:center; padding:12px 0; }
  body[data-screen="attendance"] .nav-item span.label, body[data-screen="shift"] .nav-item span.label { display:none; }
  body[data-screen="attendance"] .nav-brand-text, body[data-screen="shift"] .nav-brand-text { display:none; }
  body[data-screen="attendance"] .nav-brand, body[data-screen="shift"] .nav-brand { justify-content:center; padding:14px 0; }
  body[data-screen="attendance"] .nav-foot, body[data-screen="shift"] .nav-foot { display:none; }
  body[data-screen="attendance"] .screen, body[data-screen="shift"] .screen { padding:18px 16px 64px; }
}

/* ---------- 16b. スマホ（640px以下）：サイドバーをやめて引き出しメニューに ----------
   1000px/1560pxのアイコンレールより後ろに置くこと（--nav-w の指定を打ち消すため） */
@media (max-width:640px) {
  aside.nav { display:none; }
  .main-wrap { margin-left:0; }
  .menu-btn { display:inline-flex; }
  .mobile-nav { display:flex; }

  /* ヘッダーは1行に収める（医院名＋デモバッジ＋メニュー。日付はホーム画面にある） */
  .app-header { gap:8px; padding:0 12px; }
  .app-header-title { font-size:16px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .app-header-title span { display:none; }
  .app-header-right { gap:8px; }
  .today-label { display:none; }

  /* 本文の余白と部品 */
  .screen { padding:16px 12px 56px; }
  .screen-head { gap:10px; margin-bottom:14px; }
  .screen-title { font-size:20px; }
  .card, .panel, .box { padding:14px 13px; }
  .card-tight { padding:11px 12px; }
  .card + .card, .panel + .panel { margin-top:12px; }
  .row { gap:12px; }
  .row > .col { flex:1 1 100%; }
  .stack { gap:12px; }
  .toolbar { gap:8px; }
  .field-row > .field { flex:1 1 100%; }

  /* モーダル・トーストが左右にはみ出さないように */
  .modal-back { padding:12px; }
  .modal { max-height:92vh; }
  .modal-body { padding:14px; }
  .modal-head, .modal-foot { padding:12px 14px; }
  .toast-area { left:12px; right:12px; bottom:12px; align-items:stretch; }
  .toast { max-width:100%; }

  /* --- キオスク（打刻画面） --- */
  .kiosk { padding:0 13px 24px; }
  .kiosk-lock { right:9px; top:9px; width:44px; height:44px; min-height:44px; }
  .kiosk-top { padding:58px 0 12px; }   /* 鍵ボタンの下から時計を始める（重なり防止） */
  .kiosk-clock {
    display:flex; align-items:baseline; justify-content:center;
    font-size:min(76px, 20vw); white-space:nowrap;
  }
  .kiosk-clock .sec { font-size:24px; margin-left:4px; }
  .kiosk-date { font-size:19px; margin-top:6px; }
  .kiosk-clinic { font-size:14px; }
  .kiosk-lead { font-size:21px; margin:2px 0 12px; }

  .kiosk-group { padding:12px 12px 14px; }
  .kiosk-staff-grid { grid-template-columns:1fr; gap:10px; }
  .kiosk-staff-btn { min-height:76px; width:100%; }
  .kiosk-staff-name { font-size:28px; }

  .kiosk-person { gap:14px; padding:6px 0 10px; }
  .kiosk-person-name { font-size:clamp(32px, 11vw, 54px); }
  .kiosk-person-kana { font-size:16px; margin-top:-8px; }
  .kiosk-person-state { font-size:19px; }
  .kiosk-person-punches { font-size:15px; }
  .kiosk-choice { gap:12px; }
  .kiosk-big-btn { flex:1 1 100%; min-height:112px; font-size:34px; border-width:2px; }
  .kiosk-big-btn .sub { font-size:15px; }
  .kiosk-back { min-height:52px; font-size:17px; padding:10px 20px; }

  .kiosk-done { gap:10px; }
  .kiosk-done-check { width:72px; height:72px; }
  .kiosk-done-greet { font-size:clamp(26px, 8.6vw, 52px); }
  .kiosk-done-name { font-size:clamp(34px, 12vw, 66px); }
  .kiosk-done-dir { font-size:22px; }
  .kiosk-done-time { font-size:clamp(52px, 19vw, 108px); }
  .kiosk-done-note { font-size:15px; }
  .kiosk-foot { font-size:14px; text-align:center; }

  .pinpad button { min-height:56px; font-size:24px; }
}

/* ---------- 17. 印刷（画面をそのまま印刷した場合の最低限。帳票は App.print のiframe側） ---------- */
@media print {
  @page { size:A4; margin:12mm; }
  body { background:#fff; }
  .nav, .app-header, .menu-btn, .mobile-nav, .toast-area, .modal-back, .no-print, .kiosk-lock { display:none !important; }
  .main-wrap { margin-left:0; }
  .screen { padding:0; }
  .card, .panel, .box, .table-scroll { box-shadow:none; border-color:#999; }
  .table th, .table td { border-color:#999; }
  a { text-decoration:none; color:#000; }
}

/* ===== v1.4 ===== */
/* 外部レビューの4点（源泉パラメータの隠し・略語の説明・一括適用のプレビュー・アイコンレールの補助）
   に対応した追加分。設定/スタッフ/シフトの新しい部品もここへ置く（担当ファイルの分離を守るため）。 */

/* ---------- v1.4-1. アイコンだけに畳んだ左メニューを、マウスが乗っている間だけ広げる ----------
   aside.nav は position:fixed。--nav-w（.main-wrap の margin-left）はそのままにして
   aside の width だけを広げるので、本文のレイアウトは動かない（レールの上に重なる）。
   ・640px以下は aside.nav 自体が display:none（引き出しメニュー）なので対象外。
   ・hover できない端末は @media (hover:hover) で除外し、従来どおりアイコンだけのままにする。 */
:root { --nav-w-open:216px; }

@media (hover:hover) and (min-width:641px) and (max-width:1000px) {
  aside.nav { transition:width .15s ease, box-shadow .15s ease; }
  aside.nav:hover { width:var(--nav-w-open); box-shadow:6px 0 20px rgba(15,40,44,.14); }
  aside.nav:hover .nav-item { justify-content:flex-start; padding:11px 12px; }
  aside.nav:hover .nav-item span.label { display:inline; }
  aside.nav:hover .nav-brand { justify-content:flex-start; padding:16px 18px 14px; }
  aside.nav:hover .nav-brand-text { display:block; }
  aside.nav:hover .nav-foot { display:block; }
}

/* 勤怠・シフト画面だけ1560px以下で畳まれる分（1000px以下は上の規則が受け持つ） */
@media (hover:hover) and (min-width:1001px) and (max-width:1560px) {
  body[data-screen="attendance"] aside.nav,
  body[data-screen="shift"] aside.nav { transition:width .15s ease, box-shadow .15s ease; }
  body[data-screen="attendance"] aside.nav:hover,
  body[data-screen="shift"] aside.nav:hover { width:var(--nav-w-open); box-shadow:6px 0 20px rgba(15,40,44,.14); }
  body[data-screen="attendance"] aside.nav:hover .nav-item,
  body[data-screen="shift"] aside.nav:hover .nav-item { justify-content:flex-start; padding:11px 12px; }
  body[data-screen="attendance"] aside.nav:hover .nav-item span.label,
  body[data-screen="shift"] aside.nav:hover .nav-item span.label { display:inline; }
  body[data-screen="attendance"] aside.nav:hover .nav-brand,
  body[data-screen="shift"] aside.nav:hover .nav-brand { justify-content:flex-start; padding:16px 18px 14px; }
  body[data-screen="attendance"] aside.nav:hover .nav-brand-text,
  body[data-screen="shift"] aside.nav:hover .nav-brand-text { display:block; }
  body[data-screen="attendance"] aside.nav:hover .nav-foot,
  body[data-screen="shift"] aside.nav:hover .nav-foot { display:block; }
}

/* 動きを減らす設定の端末では幅のアニメーションをやめる（表示内容は同じ） */
@media (prefers-reduced-motion:reduce) {
  aside.nav { transition:none !important; }
}

/* ---------- v1.4-2. 設定：源泉所得税パラメータ（要約＋上級者向けの折りたたみ） ---------- */
.st-whsum {
  display:flex; flex-wrap:wrap; align-items:center; gap:2px 4px;
  font-size:15.5px; line-height:1.8; margin-bottom:12px;
}
.st-whsum > i { color:var(--c-muted); font-style:normal; }

.st-adv { margin-top:14px; border-top:1px solid var(--c-line); padding-top:12px; }
.st-advsum {
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:8px;
  font-size:14.5px; color:var(--c-muted); padding:6px 10px;
  border:1px solid var(--c-line); border-radius:8px; background:var(--c-bg);
}
.st-advsum::-webkit-details-marker { display:none; }
.st-advsum::before { content:"＋"; font-weight:700; color:var(--c-primary-dark); }
.st-adv[open] > .st-advsum::before { content:"−"; }
.st-advsum:hover { background:var(--c-primary-pale); color:var(--c-primary-dark); }
.st-adv[open] > .st-advsum { margin-bottom:12px; }
.st-advbody { padding-top:2px; }

/* ---------- v1.4-3. スタッフ：職種の略語の凡例 ---------- */
.st-rolelegend {
  margin:0 0 10px; font-size:13.5px; color:var(--c-muted);
}
.st-role { border-bottom:1px dotted var(--c-line); }

/* ---------- v1.4-4. シフト：一括適用のプレビューと「元に戻す」 ---------- */
.sh-prev { width:100%; border-collapse:collapse; margin:10px 0 4px; font-size:15px; }
.sh-prev th, .sh-prev td { border:1px solid var(--c-line); padding:5px 10px; text-align:left; }
.sh-prev th { background:var(--c-bg); font-weight:700; font-size:14px; }
.sh-prev td.n { text-align:right; font-variant-numeric:tabular-nums; width:8em; }
.sh-undo { color:var(--c-primary-dark); }

/* ===== v1.5 クラウド保存 ===== */

/* ヘッダのバッジ。色は .badge-green / .badge-amber / .badge-red / .badge-gray を付け替える */
.sync-badge {
  white-space:nowrap; cursor:pointer; max-width:14em;
  overflow:hidden; text-overflow:ellipsis;
}
.sync-badge:hover { filter:brightness(0.97); }
.sync-badge:focus-visible { outline:2px solid var(--c-primary); outline-offset:2px; }

/* 打刻キオスク中はヘッダーが隠れるので、画面の左上に小さく出す（色で状態が分かる） */
.sync-kiosk-badge { display:none; }
body.kiosk .sync-kiosk-badge {
  display:inline-block; position:fixed; left:14px; top:12px; z-index:60;
  font-size:12px; opacity:.9; pointer-events:none; white-space:nowrap;
  max-width:42vw; overflow:hidden; text-overflow:ellipsis;
}
@media print { .sync-badge, .sync-kiosk-badge { display:none !important; } }

/* 設定 → データ管理 の「クラウド保存」カード */
.sy-state {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 12px; border-radius:var(--radius); border:1px solid var(--c-line);
  background:var(--c-bg); margin-bottom:12px;
}
.sy-state .sy-dot { width:10px; height:10px; border-radius:50%; background:var(--c-muted); flex:none; }
.sy-state.ok .sy-dot { background:var(--c-green); }
.sy-state.pending .sy-dot, .sy-state.offline .sy-dot { background:var(--c-amber); }
.sy-state.error .sy-dot, .sy-state.auth_error .sy-dot { background:var(--c-red); }
.sy-state b { font-size:15.5px; }
.sy-state small { color:var(--c-muted); font-size:13.5px; }
.sy-state .sy-sep { color:var(--c-line); }

.sy-form { display:flex; flex-wrap:wrap; gap:12px 16px; margin:4px 0 12px; }
.sy-form .st-field { flex:1 1 260px; min-width:0; }
.sy-btns { display:flex; flex-wrap:wrap; gap:10px; }
.sy-err { color:var(--c-red); font-size:14px; margin:6px 0 0; overflow-wrap:anywhere; }
.sy-meta { color:var(--c-muted); font-size:13.5px; margin-top:8px; overflow-wrap:anywhere; }

@media (max-width:640px) {
  .sync-badge { max-width:9.5em; font-size:11.5px; }
  .sy-form .st-field { flex:1 1 100%; }
  .sy-btns .c-btn { flex:1 1 100%; justify-content:center; }
}


/* ---------- 14c. この端末をつなぐ（join.js・v1.6.2） ---------- */
/* ホーム画面に入れた直後のiPad（未接続・デモのまま）で、デモの名前を出す前に出す画面。
   打刻画面と同じ全画面（body.kiosk）に、中央の1枚だけ。 */
div.kiosk.join { align-items:center; justify-content:center; }
.join-box {
  width:100%; max-width:640px; background:var(--c-surface); border:1px solid var(--c-line);
  border-radius:16px; padding:28px 30px 20px; box-shadow:0 8px 30px rgba(14,124,134,.08);
  display:flex; flex-direction:column; gap:14px; text-align:center;
}
.join-mark {
  width:58px; height:58px; border-radius:50%; margin:0 auto; display:flex; align-items:center; justify-content:center;
  background:var(--c-primary-pale); color:var(--c-primary-dark);
}
.join-title { font-size:28px; font-weight:700; line-height:1.25; }
.join-lead { font-size:17px; line-height:1.7; color:var(--c-text); }
.join-hint {
  display:flex; gap:10px; align-items:flex-start; text-align:left;
  background:var(--c-amber-pale); border:1px solid #ecdcae; color:#6b4f00; border-radius:10px;
  padding:10px 12px; font-size:15px; line-height:1.6;
}
.join-hint svg { flex:none; margin-top:3px; color:var(--c-amber); }
.join-form { display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:4px; }
.join-input {
  width:min(100%, 360px); font-size:46px; font-weight:700; letter-spacing:.28em; text-align:center;
  padding:10px 0 10px .28em; border:2px solid var(--c-line); border-radius:12px; background:#fff;
  font-variant-numeric:tabular-nums; color:var(--c-primary-dark);
  -webkit-user-select:text; user-select:text;
}
.join-input:focus { outline:none; border-color:var(--c-primary); box-shadow:0 0 0 4px var(--c-primary-pale); }
.join-input::placeholder { color:#c9d6da; }
.join-btn { width:min(100%, 360px); flex:0 0 auto; min-height:84px; font-size:30px; }
.join-btn[disabled] { opacity:.6; }
.join-msg { min-height:24px; font-size:16px; color:var(--c-muted); }
.join-msg.err { color:var(--c-red); font-weight:700; }
.join-note { font-size:14px; color:var(--c-muted); line-height:1.6; }
.join-foot {
  display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
  border-top:1px solid var(--c-line); padding-top:12px; margin-top:4px; font-size:13px;
}
.join-skip {
  border:0; background:transparent; color:var(--c-muted); text-decoration:underline; font-size:13px;
  min-height:32px; padding:4px 6px; cursor:pointer;
}
.join-skip:hover { color:var(--c-primary-dark); }
@media (max-width:640px) {
  .join-box { padding:20px 16px 14px; }
  .join-title { font-size:23px; }
  .join-input { font-size:38px; }
}

/* 設定→クラウド保存「iPadをつなぐ」のモーダル（つなぐ番号） */
.sy-pair { text-align:center; padding:6px 0 10px; }
.sy-pair-code { min-height:64px; display:flex; align-items:center; justify-content:center; }
.sy-pair-digits {
  font-size:54px; font-weight:700; letter-spacing:.14em; color:var(--c-primary-dark);
  font-variant-numeric:tabular-nums; line-height:1.1;
}
.sy-pair-digits i { display:inline-block; width:.5em; }
.sy-pair-until { font-size:14px; color:var(--c-muted); margin-top:4px; min-height:20px; }
.sy-pair-until.expired { color:var(--c-red); font-weight:700; }
.sy-pair-row { display:flex; gap:14px; align-items:flex-start; margin-top:10px; }
.sy-pair-row .c-note { flex:1; margin:0; }
.sy-qr-small { flex:none; }
.sy-qr-small svg { width:150px; height:150px; }
@media (max-width:640px) {
  .sy-pair-digits { font-size:42px; }
  .sy-pair-row { flex-direction:column; align-items:center; }
}