.attendance-result { --attendance-color: #247992; box-sizing: border-box; width: min(94vw, 440px); max-width: 94vw; height: auto; max-height: 94dvh; margin: auto; padding: 24px 20px; border: 0; border-radius: 24px; color: #233640; background: #f4fcff; overflow: auto; box-shadow: 0 16px 70px #142d3d44; font-family: -apple-system, BlinkMacSystemFont, "Noto Sans JP", sans-serif; }
.attendance-result::backdrop { background: #172a406b; }
.attendance-result--in { background: #dcf6ff; }
.attendance-result--out { --attendance-color: #b9446f; background: #ffe8ef; }
.attendance-result--early { --attendance-color: #a75a12; background: #fff4df; }
.attendance-result__content { display: flex; flex-direction: column; align-items: stretch; gap: 12px; text-align: center; min-width: 0; }
.attendance-result__content h2 { margin: 0; font-size: 24px; line-height: 1.4; }
.attendance-result__content p { margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.attendance-result__content .attendance-result__time { font-size: clamp(36px, 12vw, 56px); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.attendance-result__content .attendance-result__classification { align-self: center; padding: 4px 20px; border-radius: 20px; background: #fff0cc; color: #8d4600; font-size: 20px; font-weight: 800; }
.attendance-result__mascot { width: min(240px, 100%); height: 240px; align-self: center; display: grid; place-items: center; font-size: 70px; }
.attendance-result__mascot img, .attendance-result__mascot canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
.attendance-result--decision .attendance-result__mascot { width: 140px; height: 140px; }
.attendance-result__actions { display: grid; gap: 10px; margin: 0; }
.attendance-result__button { box-sizing: border-box; width: 100%; min-height: 48px; padding: 12px 16px; border: 0; border-radius: 12px; background: var(--attendance-color); color: #fff; font: inherit; font-weight: 700; cursor: pointer; overflow-wrap: anywhere; }
.attendance-result__button--secondary { border: 1px solid #82959d; color: #304c57; background: #fff; }
.attendance-result__button:disabled { opacity: .6; cursor: wait; }
.attendance-result__reason { display: grid; gap: 8px; margin: 0; text-align: left; font-size: 15px; }
.attendance-result__reason-input { box-sizing: border-box; width: 100%; min-height: 76px; margin: 0; border: 1px solid #899ca3; border-radius: 8px; padding: 10px; font: inherit; font-size: 16px; resize: vertical; background: #fff; color: #193c48; }
.attendance-result__error:empty { display: none; }
.attendance-result__error { color: #a51d3e; }
.attendance-result__content a { color: #185973; padding: 10px; text-decoration: underline; }
@media (max-height: 640px) { .attendance-result { padding: 18px 16px; } .attendance-result__mascot { width: 170px; height: 170px; } .attendance-result__content { gap: 8px; } }

.attendance-result--missing-out { background: #c52c3a; color: #fff; --attendance-color: #fff; }
.attendance-result--missing-out .attendance-result__button { color: #a51c2a; }
.attendance-result__missing-mascot { width: min(240px, 100%); height: 240px; object-fit: contain; align-self: center; }

.attendance-result--absence { background: #ffcf8b; --attendance-color: #9a4a06; }
.attendance-result--paid_leave { background: #d8ed91; --attendance-color: #477014; }
.shift-leave-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px; }
.shift-leave-actions { display:inline-flex; gap:6px; }
.shift-leave-button { border:1px solid #a47837; border-radius:8px; padding:7px 10px; min-height:40px; background:#ffcf8b; color:#53300b; font:inherit; font-size:14px; cursor:pointer; white-space:nowrap; }
.shift-leave-button--paid_leave { background:#d8ed91; border-color:#789f35; color:#30470d; }

.shift-leave-day-heading { margin: 14px 0 8px; }
.shift-leave-day-heading h2 { margin: 0; font-size: 18px; }

.attendance-result__content .attendance-result__missing-title { font-size: min(22px, calc((94vw - 44px) / 17)); white-space: nowrap; letter-spacing: 0; }