:root {
  --kintai-css-ver: "e";   /* 実機でどの版のCSSが読まれているか診断用。CSS更新時に上げる */
  --pink: #e9608a;
  --pink-d: #c64a72;
  --bg: #fff5f8;
  --line: #f0d3dd;
  --ink: #3a2730;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
}

/* ===== ログイン ===== */
.login-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; background: linear-gradient(135deg, #ffe3ec, #fff5f8);
}
.login-card {
  background: #fff; padding: 32px 28px; border-radius: 16px;
  box-shadow: 0 10px 30px rgba(233, 96, 138, .18);
  width: 320px; max-width: 90vw;
}
.login-card h1 { margin: 0 0 4px; color: var(--pink); font-size: 24px; }
.login-card .sub { margin: 0 0 18px; color: #997; font-size: 13px; }
.login-card label { display: block; margin-bottom: 14px; font-size: 13px; color: #765; }
.login-card input {
  width: 100%; margin-top: 4px; padding: 10px; font-size: 15px;
  border: 1px solid var(--line); border-radius: 8px;
}
.login-card button {
  width: 100%; padding: 12px; font-size: 15px; font-weight: 600;
  color: #fff; background: var(--pink); border: 0; border-radius: 8px; cursor: pointer;
}
.login-card button:hover { background: var(--pink-d); }
.err {
  background: #fde8ee; color: #b3325a; padding: 8px 10px;
  border-radius: 8px; font-size: 13px; margin-bottom: 14px;
}

/* ===== ヘッダ ===== */
/* flex-wrap: 狭い端末で ブランド + ユーザーID + 氏名 + ログアウト が一列に収まらず
   ページを横にはみ出させる(=横スクロール発生→固定タブが流れて消える)のを防ぐ。 */
.kt-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 4px 10px; padding: 12px 20px; background: var(--pink); color: #fff;
}
.kt-user { min-width: 0; }
.kt-header .brand { font-size: 18px; font-weight: 700; }
.kt-user { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.kt-user .uid {
  background: rgba(255,255,255,.22); padding: 2px 8px; border-radius: 6px;
  font-weight: 700; letter-spacing: .5px;
}
.kt-user .uname { font-weight: 600; }
.kt-user .logout { color: #fff; text-decoration: underline; font-size: 13px; margin-left: 4px; }

/* ===== タブ ===== */
/* スマホで長い表を下にスクロールしてもタブ(入力/集計/自社情報)が消えないよう画面上部に固定する。
   固定時に下の表が透けないよう背景を敷き、下端に区切り線を出す。 */
.tabs {
  display: flex; gap: 4px; max-width: 860px; margin: 0 auto; padding: 10px 16px 0;
  position: -webkit-sticky; /* 旧iOS WebKit 用フォールバック */
  position: sticky; top: 0; z-index: 40;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.tab {
  padding: 8px 22px; border: 1px solid var(--line); border-bottom: none;
  background: #fff0f5; color: var(--pink-d); border-radius: 10px 10px 0 0;
  cursor: pointer; font-size: 14px; font-weight: 600;
}
.tab.active { background: #fff; color: var(--pink-d); box-shadow: 0 -2px 6px rgba(233,96,138,.08); }

.toolbar .period {
  font-size: 12px; color: var(--pink-d); background: #fde8ee;
  padding: 4px 10px; border-radius: 6px; font-weight: 600;
}
.toolbar .who { font-size: 13px; color: #765; display: flex; align-items: center; gap: 6px; }
.toolbar .who select {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px;
}
.ro-note {
  background: #fff7e6; color: #9a6b00; border: 1px solid #f3e2b0;
  padding: 8px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 8px;
}

/* ===== 集計テーブル ===== */
.sum-wrap { overflow-x: auto; }
.sum-table .c-knum { width: 46px; text-align: center; color: var(--pink-d); font-weight: 600; white-space: nowrap; }
.sum-table thead .c-knum { color: var(--pink-d); font-weight: 700; }
.sum-table .c-uid { width: 90px; }
.sum-table .c-days { width: 90px; }
.sum-table .c-total { width: 100px; }
.sum-table td.c-total, .sum-table td.c-days { font-weight: 600; color: var(--pink-d); }
.sum-table .c-uname { text-align: left; }
.sum-table tr.mine { background: #fff0f5; }
.sum-table tr.mine .c-uname::after { content: " ★"; color: var(--pink); }
.sum-table .link {
  border: 1px solid var(--line); background: #fff; color: var(--pink-d);
  padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 12px;
}
.sum-table .link:hover { background: #fff0f5; }
.sum-table .sum-foot td {
  background: #fde8ee; font-weight: 700; color: var(--pink-d); text-align: center;
}
.sum-table .sum-foot td:first-child { text-align: right; }

/* ===== 本文 ===== */
.section { max-width: 860px; margin: 18px auto; padding: 0 16px; }
/* flex-wrap: スマホで前月/翌月/対象社員/対象期間/保存が横一列に収まらず
   ページ全体を横にはみ出させる(=固定タブも横に流れて消える)のを防ぐため折り返す。 */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.toolbar .spacer { flex: 1; }
.toolbar input[type="month"] {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px;
}
.nav {
  padding: 7px 12px; border: 1px solid var(--line); background: #fff;
  border-radius: 8px; cursor: pointer; font-size: 13px;
}
.nav:hover { background: #fff0f5; }
.summary { font-size: 13px; color: var(--pink-d); font-weight: 600; }
.save {
  padding: 8px 18px; color: #fff; background: var(--pink); border: 0;
  border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;
}
.save:hover { background: var(--pink-d); }
.msg { min-height: 20px; font-size: 13px; margin-bottom: 6px; }
.msg.ok { color: #1a8a4b; }
.msg.err { color: #b3325a; }

/* ===== テーブル ===== */
/* 入力表もスマホで横に広がりページ全体を押し広げないよう、枠内で横スクロールさせる
   (集計の .sum-wrap と同じ扱い)。 */
.kt-wrap { overflow-x: auto; }
.kt-table {
  width: 100%; border-collapse: collapse; background: #fff;
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 4px 16px rgba(233, 96, 138, .08);
}
.kt-table th, .kt-table td {
  border-bottom: 1px solid var(--line); padding: 4px 8px; text-align: center;
  font-size: 13px;
}
.kt-table thead th {
  background: #fde8ee; color: var(--pink-d); font-weight: 600; padding: 8px;
}
.kt-table .c-date { width: 56px; }
.kt-table .c-dow { width: 30px; }
.kt-table .c-work { width: 60px; }
.kt-table .c-kubun { width: 84px; }
.kt-table .c-note { min-width: 140px; }
.kt-table select.kubun-sel { width: 82px; padding: 3px; font-size: 13px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.kt-table tr:has(select.kubun-sel option:checked:not([value=""])) { background: #fff8e1; }
.kt-table .work-cell { font-weight: 600; color: var(--pink-d); }
.kt-table input[type="time"] { padding: 3px; font-size: 13px; border: 1px solid var(--line); border-radius: 6px; }
.kt-table input[type="number"] { width: 60px; padding: 3px; font-size: 13px; border: 1px solid var(--line); border-radius: 6px; text-align: right; }
.kt-table input[type="number"].brk-locked { background: #f1f1f4; color: #777; border-style: dashed; cursor: not-allowed; }
.kt-table input[type="text"] { width: 100%; padding: 4px 6px; font-size: 13px; border: 1px solid var(--line); border-radius: 6px; }
.kt-table tr.sat td.c-date, .kt-table tr.sat td.c-dow { color: #2f6fb3; }
.kt-table tr.sun td.c-date, .kt-table tr.sun td.c-dow { color: #c43; }
.kt-table tr.sat { background: #f5f9ff; }
.kt-table tr.sun { background: #fff6f6; }
/* 祝日(予定表と同じ計算)。日付は赤・背景は薄赤(sat/sun より後に置き優先)。備考欄に㊗ラベル。 */
.kt-table tr.hol td.c-date, .kt-table tr.hol td.c-dow { color: #c43; }
.kt-table tr.hol { background: #fff6f6; }
.kt-table td.c-note { text-align: left; }
.kt-table .hol-chip {
  display: inline-block; margin-bottom: 3px; padding: 1px 7px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  color: #2f6fb3; background: #eaf3fc; border: 1px solid #cfe2f5; border-radius: 6px;
}

/* ===== 自社情報(勤怠設定・勤怠区分) ===== */
.jisha-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.jisha-head h2 { margin: 0; font-size: 18px; color: var(--pink-d); }
.jisha-head .spacer { flex: 1; }
.jisha-box {
  background: #fff; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(233, 96, 138, .08);
}
.jisha-box h3 { margin: 0 0 10px; font-size: 15px; color: var(--pink-d); }
.jisha-box .hint { margin: -4px 0 10px; font-size: 12px; color: #997; }
.jisha-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.jisha-grid label { font-size: 13px; color: #765; display: flex; flex-direction: column; gap: 4px; }
.jisha-grid select, .jisha-grid input[type="time"] {
  padding: 5px 6px; font-size: 13px; border: 1px solid var(--line); border-radius: 6px; background: #fff;
}
.jisha-grid small { color: #997; font-size: 11px; line-height: 1.5; }
.jisha-grid select:disabled, .jisha-grid input:disabled { background: #f1f1f4; color: #777; }
.kubun-table { margin-bottom: 10px; }
.kubun-table .c-kcd { width: 60px; color: #997; }
.kubun-table .c-kcd .new-cd { color: var(--pink); font-size: 11px; }
.kubun-table .c-kryaku { width: 90px; }
.kubun-table .c-kyuu { width: 50px; }
.kubun-table .c-kdel { width: 40px; }
.kubun-table .del-kubun {
  border: 1px solid var(--line); background: #fff; color: #b3325a;
  border-radius: 6px; cursor: pointer; padding: 2px 7px; font-size: 12px;
}
.kubun-table .del-kubun:hover { background: #fff0f5; }
@media (max-width: 600px) {
  .jisha-grid { grid-template-columns: 1fr; }
  /* ヘッダを詰め、固定タブを幅いっぱいの等分ボタンにして押しやすくする */
  .kt-header { padding: 10px 14px; }
  .section { padding: 0 10px; margin: 12px auto; }
  .tabs { padding: 8px 10px 0; }
  .tab { flex: 1; text-align: center; padding: 11px 4px; font-size: 14px; }
  /* ツールバーは折り返し前提。右寄せ用の spacer は畳んで自然に左詰めで折り返す。
     対象社員セレクトが長い氏名でページ幅を超えないよう上限を付ける。 */
  .toolbar { gap: 8px; }
  .toolbar .spacer { display: none; }
  .toolbar .who select { max-width: 60vw; }
  .jisha-head { flex-wrap: wrap; }
}