:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; background: #f7fafc; color: #173149; -webkit-tap-highlight-color: transparent; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, select:focus-visible { outline: 3px solid #4099b4; outline-offset: 2px; }
.app { max-width: 680px; min-height: 100dvh; padding: calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 32px); margin: auto; }
.app-header, .brand, .month-bar, .sheet-head { display: flex; align-items: center; justify-content: space-between; }
.app-header { padding: 0 4px 22px; }
.brand { justify-content: flex-start; gap: 9px; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.brand-mark { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; background: #dff1f5; color: #25829d; font-size: 25px; line-height: 1; font-weight: 700; }
.icon-button, .nav-button, .close-button { display: grid; place-items: center; border: 0; background: transparent; color: #2c6177; }
.icon-button { width: 44px; height: 44px; border-radius: 12px; font-size: 22px; }
.calendar { background: white; border: 1px solid #e6eef2; border-radius: 24px; box-shadow: 0 12px 40px rgba(20, 62, 86, .065); overflow: hidden; }
.month-bar { padding: 19px 18px 11px; }
.month-bar h1 { font-size: 22px; letter-spacing: .02em; margin: 0; font-weight: 750; font-variant-numeric: tabular-nums; }
.nav-button { width: 44px; height: 44px; border-radius: 50%; background: #f0f6f8; font-size: 31px; line-height: 1; padding-bottom: 5px; }
.nav-button:disabled { opacity: .32; cursor: default; }
.summary { display: flex; margin: 3px 18px 15px; background: #f1f7f9; border-radius: 15px; padding: 11px 4px; }
.summary > div { flex: 1; text-align: center; font-variant-numeric: tabular-nums; }
.summary > div + div { border-left: 1px solid #dae8ed; }
.summary span { display: block; color: #697f8c; font-size: 11px; margin-bottom: 2px; }
.summary strong { color: #225d73; font-size: 20px; }
.summary small { color: #69818d; font-size: 11px; margin-left: 2px; }
.weekdays, .days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.weekdays { border-top: 1px solid #e9eff2; background: #fff; }
.weekdays span { text-align: center; padding: 11px 0 9px; font-size: 11px; font-weight: 700; color: #8294a0; }
.weekdays span:first-child { color: #c57474; }.weekdays span:last-child { color: #5684a4; }
.days { padding: 0 7px 9px; }
.day { position: relative; border: 1px solid transparent; border-radius: 10px; background: transparent; text-align: left; min-width: 0; min-height: 73px; padding: 8px 3px 4px; display: flex; flex-direction: column; align-items: center; gap: 5px; color: #334e61; }
.day:not(.blank):active { background: #e7f4f7; }
.day.blank { cursor: default; pointer-events: none; }
.day.scheduled { background: #f1f8fa; }
.day.attended { background: #eaf6f2; }
.day.makeup-source { background: #eff4fc; }
.day.makeup-target { background: #e9f4fb; }
.day.today { border-color: #b1d2df; }
.day .number { font-size: 14px; font-weight: 630; font-variant-numeric: tabular-nums; line-height: 20px; }
.day.sunday .number { color: #c57474; }.day.saturday .number { color: #5684a4; }
.day .badge { display: block; max-width: 100%; font-size: 10px; font-weight: 730; line-height: 16px; border-radius: 5px; padding: 0 2px; color: #367d93; white-space: nowrap; }
.day.attended .badge { color: #24755e; }.day.makeup-source .badge, .day.makeup-target .badge { color: #396d9d; }
.day .detail { font-size: 10px; color: #537a97; white-space: nowrap; line-height: 13px; letter-spacing: -.035em; }
.day .planned-dot { width: 5px; height: 5px; border-radius: 50%; background: #48a6bd; margin-top: -5px; }
.key { display: flex; justify-content: center; flex-wrap: wrap; gap: 13px; padding: 20px 4px 0; color: #68808c; font-size: 11px; }
.key span { display: inline-flex; align-items: center; gap: 5px; }.key i { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 5px; font-size: 11px; font-style: normal; font-weight: 750; }
.key-dot { background: #f1f8fa; }.key-dot::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #48a6bd; }.key-check { color: #24755e; background: #eaf6f2; }.key-makeup { color: #396d9d; background: #e9f4fb; }
.footer-note { margin: 15px 0 0; text-align: center; color: #8296a1; font-size: 11px; }
.notice { margin: 0 0 14px; background: #fff3e5; border: 1px solid #f4c896; color: #784b19; padding: 12px; border-radius: 12px; font-size: 13px; }
.sheet { width: min(calc(100% - 24px), 460px); border: 0; border-radius: 22px; padding: 0; color: #173149; box-shadow: 0 25px 90px #17314945; max-height: calc(100dvh - 32px); }
.sheet::backdrop { background: rgba(16, 39, 54, .38); }.sheet-inner { padding: 23px 22px 28px; overflow: auto; max-height: calc(100dvh - 32px); }
.sheet-head { align-items: flex-start; gap: 12px; margin-bottom: 20px; }.eyebrow { font-size: 11px; color: #668492; font-weight: 700; }.sheet h2 { font-size: 21px; margin: 5px 0 0; }.close-button { width: 44px; height: 44px; border-radius: 50%; background: #f1f6f8; font-size: 26px; flex: none; }
.status-panel { background: #f2f8fa; padding: 17px; border-radius: 14px; margin-bottom: 14px; color: #2b6075; font-size: 14px; line-height: 1.6; }.status-panel strong { display: block; font-size: 17px; color: #183c52; margin-bottom: 2px; }
.action-button { width: 100%; min-height: 52px; border-radius: 13px; border: 0; font-size: 15px; font-weight: 750; margin-top: 10px; padding: 10px; }
.action-button.primary { background: #21839b; color: white; }.action-button.secondary { background: #edf5f7; color: #276277; }.action-button.danger { background: #fff2f0; color: #a45046; }.action-button:disabled { opacity: .48; cursor: not-allowed; }
.field-label { display: block; font-size: 13px; color: #547180; font-weight: 700; margin: 19px 0 8px; }
.source-select { width: 100%; min-height: 52px; border: 1px solid #cedfe5; border-radius: 12px; background: white; padding: 0 14px; font-size: 16px; color: #173149; }
.explain, .settings-text, .settings-foot { color: #68808c; font-size: 13px; line-height: 1.7; }.settings-foot { margin: 22px 2px 0; font-size: 12px; }
@media (max-width: 370px) { .app { padding-left: 10px; padding-right: 10px; }.days { padding-left: 3px; padding-right: 3px; }.day { min-height: 67px; }.day .badge, .day .detail { font-size: 9px; } }
@media (min-width: 650px) { .app { padding-top: 32px; }.day { min-height: 83px; } }
[hidden] { display: none !important; }
.gate { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.gate-card { width: min(100%, 390px); background: white; border: 1px solid #e6eef2; border-radius: 24px; padding: 30px 26px; box-shadow: 0 12px 40px rgba(20,62,86,.065); }
.gate-logo { width: 48px; height: 48px; font-size: 34px; }
.gate-card h1 { font-size: 23px; margin: 18px 0 6px; }.gate-card p { font-size: 14px; color: #68808c; }
.pin-input { width: 100%; min-height: 52px; border-radius: 12px; border: 1px solid #cedfe5; padding: 0 14px; font-size: 20px; letter-spacing: .3em; }
.login-error { color: #a45046 !important; line-height: 1.5; }
.migration { background: #ecf7f9; border: 1px solid #b7dee7; border-radius: 14px; padding: 14px; margin-bottom: 14px; font-size: 13px; }
.migration strong, .migration span { display: block; }.migration span { color: #526e7b; margin: 5px 0 12px; line-height: 1.5; }
.migration div { display: flex; gap: 9px; }.migration button { border: 0; background: white; color: #26738b; padding: 10px 12px; border-radius: 10px; font-weight: 700; min-height: 44px; }
.migration button:first-child { background: #21839b; color: white; }