:root{
  --line:#000;
  --black: rgba(0,0,0,1);

  --biz:#fff;
  --off:#e6f0ff;
  --paid:#e6ffe6;

  --todayBorder:#d40000;

  --primary:#2563eb;
  --primaryShadow:#0b1b4a;

  --radius:16px;
  --settingYellow:#fff7bf; /* 薄い黄色 */
}

*{box-sizing:border-box}
html{font-size:19px}
body{
  margin:0;
  background:#fcfcfd; /* ほぼ白 */
  color:var(--black);
  font-family:system-ui,-apple-system,"Segoe UI","Noto Sans JP",sans-serif;
}

/* ===== header ===== */
.navCenter{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  align-items:center;
  padding:12px 0 6px;
}
.navBtn, .navLink{
  border:2px solid var(--line);
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  font-size:1rem;
  background:#fff;
  color:var(--black);
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 4px 0 rgba(0,0,0,0.25);
  transition:transform .08s ease, box-shadow .08s ease, filter .12s ease;
}
.navBtn:hover, .navLink:hover{transform:translateY(-1px); filter:saturate(1.05)}
.navBtn:active, .navLink:active{transform:translateY(1px); box-shadow:none}

/* ===== footer ===== */
.appFooter{
  margin-top:24px;
  border-top:2px solid var(--line);
  background:#fff;
}
.footerImg{
  height:120px;
  background:url("footer.jpg") center/cover no-repeat;
}

/* ✅ サイトの役割が一瞬で伝わる説明文 */
.appDesc{
  margin:16px auto 0;
  text-align:center;
  color:var(--black);
  max-width:980px;
}
.appDesc .catch{
  display:block;
  font-size:1.3rem;
  font-weight:900;
}
.appDesc .sub{
  display:block;
  margin-top:6px;
  font-size:1.05rem;
  font-weight:600;
  color:#333;
}

.wrap{max-width:1100px;margin:0 auto;padding:16px}
.panel{
  margin-top:18px;
  border:2px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
}
.hidden{display:none}

.panelHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
}
.panelHead h2{margin:0;font-size:1.25rem}
.hint{margin:0;color:var(--black);font-size:0.95rem}
.hint.small{margin-top:10px}
.panelRight{display:flex;gap:10px;flex-wrap:wrap}

/* ===== form ===== */
.formGrid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;
}
.field{display:flex;flex-direction:column;gap:6px}
.label{font-size:0.95rem;color:var(--black)}
.control{
  width:100%;
  padding:12px 12px;
  border:2px solid var(--line);
  border-radius:14px;
  font-size:1rem;
  background:#fff;
  color:var(--black);
}

/* ✅ 設定用プルダウン */
.control.setting{
  background:var(--settingYellow);
  cursor:pointer;
}
.control.setting.open{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(37,99,235,.18);
}

/* ===== buttons ===== */
.primary{
  padding:12px 18px;
  border-radius:999px;
  border:2px solid var(--line);
  background:linear-gradient(180deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%);
  color:#fff;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 7px 0 var(--primaryShadow);
  transition:transform .08s ease, box-shadow .08s ease, filter .12s ease;
}
.primary:hover{transform:translateY(-1px); filter:saturate(1.05)}
.primary:active{transform:translateY(2px); box-shadow:none}
.primary:disabled{
  background:#ccc;
  color:#222;
  cursor:not-allowed;
  box-shadow:none;
  filter:none;
}
.ghost{
  padding:12px 16px;
  border-radius:999px;
  border:2px solid var(--line);
  background:linear-gradient(180deg,#ffffff 0%, #f3f4f6 100%);
  font-weight:900;
  cursor:pointer;
  color:var(--black);
  box-shadow:0 5px 0 rgba(0,0,0,0.25);
  transition:transform .08s ease, box-shadow .08s ease, filter .12s ease;
}
.ghost:hover{transform:translateY(-1px); filter:saturate(1.03)}
.ghost:active{transform:translateY(2px); box-shadow:none}

/* ===== legend & toggle ===== */
.legend{display:flex;gap:14px;flex-wrap:wrap;margin:14px 0 10px}
.lg{display:flex;align-items:center;gap:8px;font-size:0.95rem;color:var(--black)}
.sw{width:18px;height:18px;border:2px solid var(--line);border-radius:6px;display:inline-block}
.sw.biz{background:var(--biz)}
.sw.off{background:var(--off)}
.sw.paid{background:var(--paid)}
.sw.today{background:#fff;border-color:var(--todayBorder)}

.subHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.toggleMode{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.chip{
  padding:10px 14px;
  border-radius:999px;
  border:2px solid var(--line);
  cursor:pointer;
  font-weight:900;
  color:var(--black);
  box-shadow:0 4px 0 rgba(0,0,0,0.25);
}
.chip:active{transform:translateY(1px); box-shadow:none}
.chip.on{outline:4px solid rgba(0,0,0,0.15)}
.chipOff{background:var(--off)}
.chipPaid{background:var(--paid)}

.secTitle{margin:14px 0 8px;font-size:1.1rem}

/* ===== calendar ===== */
.dow{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  text-align:center;
  font-size:0.95rem;
  color:var(--black);
  margin-bottom:8px;
}
.grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:10px;
}
.day{
  min-height:112px;
  padding:10px;
  border-radius:14px;
  border:2px solid var(--line);
  background:var(--biz);
  position:relative;
  user-select:none;
  cursor:pointer;
  color:var(--black);
  box-shadow:0 4px 0 rgba(0,0,0,0.18);
}
.day:hover{transform:translateY(-1px)}
.day:active{transform:translateY(1px); box-shadow:none}
.day.off{background:var(--off)}
.day.paid{background:var(--paid)}
.day.today{border-color:var(--todayBorder)}

.date{font-size:1.05rem;font-weight:900}
.meta{margin-top:8px;font-size:0.95rem;color:var(--black)}
.holidayName{margin-top:4px;font-size:0.9rem;color:#d40000;line-height:1.1}

/* タグ */
.tag{
  position:absolute;
  top:8px; right:8px;
  font-size:0.9rem;
  padding:2px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
}
.tag.closing{background:#ffe5e5}
.tag.before{background:#fff3cd}

/* ✅ カレンダー上コメント（12px・改行折返し・最大3行） */
.resultLine{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;

  font-size:12px;
  font-weight:900;
  color:var(--black);

  white-space:pre-wrap;
  word-break:break-word;

  line-height:1.2;
  max-height:calc(12px * 1.2 * 3);
  overflow:hidden;
}

/* ✅ 選択日：薄黄色 */
.day.selected{
  background:var(--settingYellow) !important;
  outline:4px solid rgba(0,0,0,0.10);
}

/* ✅ 締日：薄赤塗りつぶし */
.day.closingDay{
  background:#ffe5e5 !important;
  border-color:#d40000 !important;
  color:var(--black) !important;
}
.day.closingDay .meta,
.day.closingDay .date{
  color:var(--black) !important;
}
.day.closingDay .holidayName{
  color:#d40000 !important;
}

/* ===== today ===== */
.checksBox{margin-top:14px;border-top:1px solid rgba(0,0,0,0.15);padding-top:12px}
.todayMeta{display:none !important;}

.dayPicker{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0}
.badge{
  border:2px solid var(--line);
  border-radius:999px;
  padding:6px 10px;
  background:#fff;
  font-weight:900;
  font-size:0.9rem;
}

#selectedDateLabel{
  display:inline-block;
  padding:6px 10px;
  border:2px solid var(--line);
  border-radius:999px;
  background:var(--settingYellow);
}

#editabilityBadge{
  background:var(--settingYellow);
}

#dayComment{
  background:var(--settingYellow);
}
#dayComment:disabled{opacity:.7}

/* ===== チェック項目 ===== */
.checkList{display:flex;flex-direction:column;gap:6px}

.checkItem{
  padding:6px 10px;
  gap:10px;
  border-radius:12px;
  cursor:pointer;
  border:2px solid var(--line);

  display:flex;
  justify-content:flex-start;
  align-items:center;

  background:linear-gradient(180deg,#ffffff 0%, #f3f4f6 100%);
  box-shadow:
    0 4px 0 rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.9);
  transition:
    transform .08s ease,
    box-shadow .08s ease,
    background .15s ease,
    filter .12s ease;
}

/* ✅ hover/active/focus で薄緑 */
.checkItem:not(.done):not(.disabled):hover,
.checkItem:not(.done):not(.disabled):active,
.checkItem:not(.done):not(.disabled):focus-within{
  background:linear-gradient(180deg,#eaffea 0%, #dcfce7 100%);
}

/* 押し込み */
.checkItem:active{
  transform:translateY(2px);
  box-shadow:none;
}

/* 完了 */
.checkItem.done{
  background:linear-gradient(180deg,#dcfce7 0%, #bbf7d0 100%);
}

/* 無効 */
.checkItem.disabled{
  opacity:.6;
  pointer-events:none;
}

.labelWrap{display:flex;flex-direction:column;gap:0}
.labelWrap .name{font-weight:900; font-size:0.98rem; line-height:1.2}
.labelWrap .sub{display:none}

/* checkbox（見た目） */
.cb{
  position:absolute;
  opacity:0;
}
.cbUI{
  width:28px;
  height:28px;
  border-radius:0;
  border:2px solid var(--line);
  background:linear-gradient(180deg,#ffffff 0%, #f3f4f6 100%);
  box-shadow:0 4px 0 rgba(0,0,0,0.18);
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.cbUI::after{
  content:"";
  width:14px;
  height:8px;
  border-left:4px solid transparent;
  border-bottom:4px solid transparent;
  transform:rotate(-45deg) translateY(-1px);
}
.cb:checked + .cbUI{
  background:linear-gradient(180deg, #bbf7d0 0%, #22c55e 55%, #16a34a 100%);
  border-color:#0a7a34;
}
.cb:checked + .cbUI::after{
  border-left-color:#fff;
  border-bottom-color:#fff;
}

/* 種別バッジ */
.typeBadge{
  display:inline-flex;
  align-items:center;
  height:22px;
  padding:0 10px;
  border-radius:999px;
  border:2px solid #aaa;
  background:#f3f4f6;
  font-weight:900;
  font-size:0.78rem;
  color:#666;
  box-shadow:0 2px 0 rgba(0,0,0,0.15);
}

/* ===== 退勤ボタン：チェック項目の下 ===== */
.leaveArea{
  margin-top:12px;
  display:flex;
  justify-content:center;
}
.primary.leave{
  width:min(520px, 100%);
  font-size:1.25rem;
  letter-spacing:0.02em;
  background:linear-gradient(180deg,#34d399 0%, #22c55e 55%, #16a34a 100%);
  box-shadow:0 9px 0 #064e2a;
}
.primary.leave:active{
  transform:translateY(3px);
  box-shadow:none;
}

/* ===== alert ===== */
.inlineAlert{
  margin-top:12px;
  border:2px solid var(--line);
  border-radius:14px;
  background:#fff3cd;
  padding:14px;
  color:var(--black);
}
.inlineAlert p{margin:0 0 10px;font-weight:900}
.inlineAlert a{
  display:inline-block;
  padding:12px 14px;
  border-radius:999px;
  border:2px solid var(--line);
  background:#fff;
  text-decoration:none;
  font-weight:900;
  color:var(--black);
  box-shadow:0 4px 0 rgba(0,0,0,0.18);
}
.inlineAlert a:active{transform:translateY(1px); box-shadow:none}

/* ===== month nav ===== */
.monthNav{
  margin:12px 0 12px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.navMonth{
  padding:10px 14px;
  border-radius:14px;
  border:2px solid var(--line);
  background:#fff;
  cursor:pointer;
  font-weight:900;
  color:var(--black);
  box-shadow:0 4px 0 rgba(0,0,0,0.25);
}
.navMonth:active{transform:translateY(1px); box-shadow:none}
.monthLabel{display:flex;align-items:baseline;gap:8px;color:var(--black)}
.mini{color:var(--black);font-size:0.95rem}

.footer{margin:18px 0 10px;display:flex;justify-content:flex-end}

/* ===== トースト ===== */
.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%) translateY(20px);
  opacity:0;
  pointer-events:none;
  z-index:9998;

  padding:12px 16px;
  border-radius:999px;
  border:2px solid var(--line);
  background:#fff;
  box-shadow:0 6px 0 rgba(0,0,0,0.20);
  font-weight:900;
  transition:opacity .18s ease, transform .18s ease;
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.toast.good{ background:#dcfce7; }
.toast.warn{ background:#fff3cd; }
.toast.info{ background:#e6f0ff; }

/* ===== モーダル（背景ブロック） ===== */
body.modalOpen{
  overflow:hidden;
}

.fxLayer{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  pointer-events:none; /* 通常は無効 */
}
.fxLayer.on{
  display:flex;
  pointer-events:auto; /* ✅ ここが重要：モーダルがクリックを受ける */
}

/* ===== 全画面パネル ===== */
.fxPanel{
  position:relative;
  z-index:2;
  width:min(760px, 96vw);
  border-radius:26px;
  border:3px solid #000;
  box-shadow:0 16px 0 rgba(0,0,0,0.35);
  padding:22px 18px 16px;
  text-align:center;
  background:#fff;
  animation:fxPop .35s ease-out;
}
.fxPanel.good{ background:linear-gradient(180deg,#dcfce7 0%, #ffffff 60%); }
.fxPanel.info{ background:linear-gradient(180deg,#e6f0ff 0%, #ffffff 60%); }
.fxPanel.warn{ background:linear-gradient(180deg,#fff3cd 0%, #ffffff 60%); }

@keyframes fxPop{
  0%{ transform:scale(.90); opacity:0; }
  100%{ transform:scale(1); opacity:1; }
}

.fxBig{
  font-size:6rem;
  font-weight:900;
  line-height:1;
  margin:8px 0 10px;
  text-shadow:0 6px 0 rgba(0,0,0,0.18);
}
.fxHeadline{
  font-size:1.8rem;
  font-weight:900;
  margin:0 0 8px;
}
.fxSub{
  font-size:1.1rem;
  font-weight:700;
  color:#222;
  line-height:1.6;
  margin-bottom:12px;
}

.fxClose{
  border:2px solid #000;
  border-radius:999px;
  padding:10px 14px;
  background:#fff;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 5px 0 rgba(0,0,0,0.25);
}
.fxClose:active{ transform:translateY(2px); box-shadow:none; }

/* ===== 確認ダイアログ（小さめ） ===== */
.fxPanel.small{
  width:min(520px, 92vw);
  padding:16px 14px 14px;
  border-radius:22px;
}
.fxPanel.small .fxBig{ font-size:4.6rem; }
.fxPanel.small .fxHeadline{ font-size:1.45rem; }
.fxPanel.small .fxSub{ font-size:1.0rem; margin-bottom:10px; }

/* 2択ボタン */
.fxActions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:10px;
}
.fxBtn{
  min-width:220px;
  font-size:1.05rem;
  font-weight:900;
}

/* ===== 紙吹雪 ===== */
.confetti{
  position:absolute;
  top:-16px;
  border-radius:2px;
  animation:confettiFall 1.5s ease-out forwards;
  z-index:0;
}
@keyframes confettiFall{
  0%{ transform:translateY(-10px) rotate(0deg); opacity:1; }
  100%{ transform:translateY(110vh) rotate(320deg); opacity:0; }
}

/* ===== 軽い演出 ===== */
.pulse{ animation:pulseAnim .45s ease-out; }
@keyframes pulseAnim{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.02); }
  100%{ transform:scale(1); }
}
.shake{ animation:shakeAnim .45s ease-out; }
@keyframes shakeAnim{
  0%{ transform:translateX(0); }
  20%{ transform:translateX(-6px); }
  40%{ transform:translateX(6px); }
  60%{ transform:translateX(-4px); }
  80%{ transform:translateX(4px); }
  100%{ transform:translateX(0); }
}

/* ✅ キーボード操作の視認性 */
:focus-visible{
  outline:3px solid #2563eb;
  outline-offset:2px;
}

@media (max-width:600px){
  .appDesc .catch{ font-size:1.15rem; }
  .appDesc .sub{ font-size:0.95rem; }
  .fxBtn{ min-width:100%; }
}