/* ---------- 通知（イベント・退職届） ---------- */
.overlay { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(5,6,20,.6); padding: 16px; overflow-y: auto; transition: background .4s; }
.overlay.heavy { background: rgba(2,2,8,.86); }
.memo {
  width: min(380px, 100%);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-doc);
  border: 3px solid #07081a;
  box-shadow: 0 8px 0 #07081a;
  padding: 14px 16px 16px;
  display: grid; gap: 8px;
  animation: memoin .32s cubic-bezier(.2,1.3,.4,1) 1;
  position: relative;
}
@keyframes memoin { from { transform: translateY(-40px) rotate(-3deg); opacity: 0; } to { transform: none; opacity: 1; } }
.memo-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--ink); padding-bottom: 4px; font-size: 12px; }
.memo-head b { font-size: 14px; letter-spacing: 0.3em; }
.memo h3 { margin: 4px 0 0; font-size: 21px; font-weight: 800; }
.memo p { margin: 0; font-size: 15px; line-height: 1.7; }
.memo .swap { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 6px 0; }
.memo .swap figure { margin: 0; display: grid; justify-items: center; gap: 4px; font-family: var(--f-disp); font-size: 15px; }
.memo .swap img { width: 80px; height: 80px; border: 2px solid var(--ink); }
.memo .swap .arrow { font-family: var(--f-disp); font-size: 22px; color: var(--shu); }
.memo .tapnext { font-family: var(--f-pix); font-size: 12px; color: var(--ink-2); text-align: right; }
.nt-top { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; }
.nt-top:not(:has(img)) { grid-template-columns: 1fr; }
.nt-art { width: 96px; height: 96px; border: 2px solid var(--ink); }
.nt-top h3 { margin: 0 0 4px; font-size: 19px; font-weight: 800; line-height: 1.35; text-wrap: balance; }
.swap-t { text-align: center; font-size: 14px !important; }
.nt-fact { font-size: 12.5px !important; line-height: 1.7 !important; color: var(--ink-2); border-top: 1px dotted var(--rule); padding-top: 6px; }
.nt-fact cite { display: block; font-style: normal; font-size: 11px; }
.nt-choices { display: grid; gap: 8px; margin-top: 4px; }
.nt-btn { font-family: var(--f-pix); background: #fff; color: var(--ink); border: 3px solid #07081a; box-shadow: 0 4px 0 #07081a; padding: 9px 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; }
.nt-btn b { font-weight: 400; font-size: 16px; }
.nt-btn small { font-size: 12px; color: var(--ink-2); }
.nt-btn.pri { background: #e9f2ec; }
.nt-btn.danger { background: #fbe6e2; border-color: #7a1a12; box-shadow: 0 4px 0 #7a1a12; }
.nt-btn.danger b { color: #a82e1e; }
.deltas { display: flex; flex-wrap: wrap; gap: 6px; }
.dl { font-family: var(--f-pix); font-size: 13px; padding: 1px 8px; border: 2px solid currentColor; }
.dl.neg { color: #b8321e; background: #fff0ec; }
.dl.pos { color: #2a7a4a; background: #ecf8f0; }
.nt-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #07081a; }
.memo.tone-heavy { background: #e8e6e0; border-color: #07081a; box-shadow: 0 8px 0 #000; }
.memo.tone-heavy .memo-head { border-bottom-color: #3a3c4a; }
.memo.tone-death { background: #f2f1ee; border: 6px solid #14141c; outline: 2px solid #14141c; outline-offset: -12px; box-shadow: none; padding: 22px 22px 20px; }
.memo.tone-death .memo-head b { letter-spacing: .5em; }
.memo.tone-death h3 { font-size: 22px; }
.memo.tone-good { background: #fbf8ec; }
.help { background: #fff; border: 2px solid var(--ink); padding: 10px 12px; display: grid; gap: 6px; font-family: var(--f-pix); }
.help-h { margin: 0; font-size: 14px !important; font-weight: 400; }
.help ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.help li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; border-top: 1px dotted var(--rule); padding-top: 5px; }
.help .hn { grid-column: 1 / -1; font-size: 12px; color: var(--ink-2); }
.help .ht { display: flex; flex-direction: column; }
.help .ht b { font-weight: 400; font-size: 17px; user-select: all; -webkit-user-select: all; font-variant-numeric: tabular-nums; }
.help .ht small { font-size: 11px; color: var(--ink-2); }
.help .copy { font-family: var(--f-pix); font-size: 12px; padding: 4px 8px; border: 2px solid var(--ink); background: var(--paper); }
.help-note { margin: 0; font-size: 12px !important; line-height: 1.6 !important; color: var(--ink-2); }
#r-fact .help { margin-top: 6px; color: var(--ink); }
.rireki.mourning { border: 8px solid #14141c; box-shadow: none; }
.shogo.mourn { color: var(--ink); font-family: var(--f-doc); font-weight: 800; }
.hist tr.hv td:last-child .k { color: var(--shu-d); }
.memo .memo-stamp { position: absolute; right: 14px; top: 34px; }
.taishoku {
  width: 150px; height: 250px; background: #fbfaf6; color: var(--ink);
  border: 3px solid #07081a; box-shadow: 0 8px 0 #07081a;
  display: grid; place-items: center; position: relative;
  animation: taishoku 1.25s ease-in 1 forwards;
}
.taishoku > span:first-child { writing-mode: vertical-rl; font-family: var(--f-doc); font-weight: 800; font-size: 38px; letter-spacing: 0.25em; margin-top: -40px; }
.taishoku .hanko { position: absolute; bottom: 16px; right: 14px; width: 50px; height: 50px; font-size: 16px; opacity: 0; animation: juri .25s .45s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes juri { from { opacity: 0; transform: scale(2.4) rotate(-6deg); } to { opacity: 1; transform: scale(1) rotate(-6deg); } }
@keyframes taishoku { 0% { transform: translateY(60px); opacity: 0; } 18% { transform: none; opacity: 1; } 75% { transform: none; opacity: 1; } 100% { transform: translateY(-120vh) rotate(8deg); opacity: 1; } }