:root{
  --bg:#EEF1F5; --surface:#FFFFFF; --surface-2:#F4F6F9; --surface-3:#EBEEF3;
  --ink:#14171F; --ink-soft:#565D6B; --ink-faint:#8B93A3; --line:#DCE1E8; --line-strong:#C6CCD6;
  --accent:#D9861F; --accent-ink:#FFFFFF; --accent-soft:#F5E4CB;
  --st-day:#D9861F; --st-night:#3C4568; --st-off:#8A93A3; --st-leave:#3F8F5F;
  --st-altleave:#2F8E88; --st-reserve:#8A8C3E; --st-family:#8E5A9C; --st-edu:#3E6FC2;
  --danger:#B5453A; --danger-soft:#F6E1DE; --ok:#3F8F5F; --ok-soft:#DFEEE3; --sun:#B5453A;
  --font-ui:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Segoe UI",sans-serif;
  --shadow-sheet:0 -8px 30px -8px rgba(20,23,31,.25);
  --shadow-card:0 1px 2px rgba(20,23,31,.06), 0 1px 1px rgba(20,23,31,.04);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0B0D11; --surface:#171B22; --surface-2:#1D222B; --surface-3:#242A34;
    --ink:#ECEFF4; --ink-soft:#A3ABBA; --ink-faint:#6C7686; --line:#2A303C; --line-strong:#3A4150;
    --accent:#E9A64B; --accent-ink:#14171F; --accent-soft:#3A2E17;
    --st-day:#E9A64B; --st-night:#7C89C4; --st-off:#8A93A3; --st-leave:#5FB683;
    --st-altleave:#4FB8B1; --st-reserve:#B4B665; --st-family:#B686C4; --st-edu:#6E97DE;
    --danger:#E17E71; --danger-soft:#3A211E; --ok:#5FB683; --ok-soft:#1E3226; --sun:#E17E71;
    --shadow-sheet:0 -8px 30px -8px rgba(0,0,0,.55);
    --shadow-card:0 1px 2px rgba(0,0,0,.3), 0 1px 1px rgba(0,0,0,.2);
    color-scheme:dark;
  }
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:var(--bg); color:var(--ink); font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
#root{display:flex; flex-direction:column; min-height:100dvh; position:relative;}

.app-header{
  flex:0 0 auto; padding:calc(env(safe-area-inset-top,0px) + 14px) 18px 12px;
  background:var(--surface); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:8px; position:sticky; top:0; z-index:6;
}
.who{display:flex; align-items:center; gap:9px; min-width:0;}
.avatar{
  width:32px; height:32px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex:0 0 auto;
}
.who-name{font-size:15px; font-weight:650; line-height:1.25;}
.who-role{font-size:11.5px; color:var(--ink-faint); line-height:1.3;}
.logout-btn{
  appearance:none; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
  font:inherit; font-size:12px; font-weight:600; padding:7px 11px; border-radius:9px; cursor:pointer;
}
.logout-btn:hover{border-color:var(--line-strong); color:var(--ink);}

.app-body{flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:12px;}

.app-tabbar{
  flex:0 0 auto; display:flex; border-top:1px solid var(--line); background:var(--surface);
  padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px)); position:sticky; bottom:0; z-index:6;
}
.tab-btn{
  flex:1; appearance:none; border:0; background:transparent; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 4px;
  color:var(--ink-faint); font:inherit; font-size:11px; font-weight:600; border-radius:10px;
}
.tab-btn svg{width:21px; height:21px;}
.tab-btn.active{color:var(--accent);}
.tab-btn .badge{
  position:relative; top:-13px; left:11px; background:var(--danger); color:#fff; font-size:9.5px;
  font-weight:700; min-width:15px; height:15px; border-radius:8px; display:flex; align-items:center;
  justify-content:center; padding:0 3px; margin-bottom:-15px;
}

.center-fill{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:40px 24px; text-align:center; color:var(--ink-soft); font-size:13px;}
.spinner{width:26px; height:26px; border-radius:50%; border:2.5px solid var(--line); border-top-color:var(--accent); animation:spin .7s linear infinite;}
@media (prefers-reduced-motion:reduce){ .spinner{animation-duration:1.4s;} }
@keyframes spin{to{transform:rotate(360deg);}}

/* ── Login ── */
.login-screen{flex:1; display:flex; flex-direction:column; justify-content:center; padding:24px 26px; gap:20px; max-width:360px; margin:0 auto; width:100%;}
.login-mark{width:54px; height:54px; border-radius:15px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; margin:0 auto;}
.login-mark svg{width:27px; height:27px;}
.login-title{text-align:center; font-size:18px; font-weight:700;}
.login-sub{text-align:center; font-size:13px; color:var(--ink-soft); line-height:1.6; margin-top:-8px;}
.field label{display:block; font-size:12px; font-weight:650; color:var(--ink-soft); margin-bottom:6px;}
.field input{width:100%; padding:12px 14px; border-radius:11px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; font-size:16px;}
.field input:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);}
.field + .field{margin-top:12px;}
.login-error{font-size:12.5px; color:var(--danger); text-align:center; min-height:16px;}

.btn{appearance:none; border:0; border-radius:11px; font:inherit; font-weight:700; cursor:pointer; padding:13px 16px; font-size:15px;}
.btn-primary{background:var(--accent); color:var(--accent-ink); width:100%;}
.btn-primary:hover{filter:brightness(1.05);}
.btn-primary:active{transform:translateY(1px);}
.btn-primary:disabled{opacity:.55; cursor:not-allowed;}

/* ── Calendar ── */
.cal-wrap{padding:14px 16px 4px;}
.cal-nav{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.cal-nav b{font-size:16px; font-weight:750; font-variant-numeric:tabular-nums;}
.nav-btn{appearance:none; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); width:32px; height:32px; border-radius:10px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.nav-btn:hover{color:var(--ink); border-color:var(--line-strong);}
.cal-dow{display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:4px;}
.cal-dow span{text-align:center; font-size:11px; font-weight:650; color:var(--ink-faint); padding-bottom:6px;}
.cal-dow span:first-child{color:var(--sun);}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:5px;}
.cal-cell{aspect-ratio:1/1.1; border-radius:12px; border:1px solid transparent; background:var(--surface); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; cursor:pointer; position:relative; padding:2px; box-shadow:var(--shadow-card); font:inherit;}
.cal-cell:hover{border-color:var(--line-strong);}
.cal-cell:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
.cal-cell.out{visibility:hidden; box-shadow:none; cursor:default;}
.cal-cell.past{opacity:.4;}
.cal-cell.empty{background:var(--surface-2); box-shadow:none;}
.cal-cell .dnum{font-size:13px; font-weight:700; font-variant-numeric:tabular-nums;}
.cal-cell.today{border-color:var(--accent);}
.cal-cell.today .dnum{color:var(--accent);}
.cal-dot{width:6px; height:6px; border-radius:50%;}
.cal-tag{font-size:9px; font-weight:700;}
.cal-pending{position:absolute; top:3px; right:3px; font-size:8px; width:14px; height:14px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center;}

.legend{display:flex; flex-wrap:wrap; gap:8px 12px; padding:14px 16px 6px; font-size:11px; color:var(--ink-soft);}
.legend span{display:inline-flex; align-items:center; gap:5px;}
.legend i{width:7px; height:7px; border-radius:50%; display:inline-block;}
.unassigned-note{margin:8px 16px; padding:12px 14px; border:1px dashed var(--line-strong); border-radius:12px; font-size:12.5px; color:var(--ink-soft); line-height:1.6; background:var(--surface-2);}

/* ── Bottom sheet ── */
.sheet-backdrop{position:fixed; inset:0; background:rgba(10,12,16,.4); opacity:0; pointer-events:none; transition:opacity .22s ease; z-index:10;}
.sheet-backdrop.open{opacity:1; pointer-events:auto;}
.sheet{position:fixed; left:0; right:0; bottom:0; background:var(--surface); border-radius:20px 20px 0 0; box-shadow:var(--shadow-sheet); transform:translateY(100%); transition:transform .26s cubic-bezier(.32,.72,0,1); z-index:11; max-height:82dvh; display:flex; flex-direction:column; margin:0 auto; max-width:520px; width:100%;}
.sheet.open{transform:translateY(0);}
.sheet-grab{width:36px; height:4px; background:var(--line-strong); border-radius:3px; margin:10px auto 4px;}
.sheet-head{padding:6px 20px 14px; border-bottom:1px solid var(--line);}
.sheet-date{font-size:16px; font-weight:750; font-variant-numeric:tabular-nums;}
.sheet-current{font-size:12.5px; color:var(--ink-soft); margin-top:3px;}
.sheet-body{padding:16px 20px calc(20px + env(safe-area-inset-bottom,0px)); overflow-y:auto;}

.status-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px;}
.status-chip{appearance:none; text-align:left; cursor:pointer; border-radius:11px; border:1.5px solid var(--line); background:var(--surface-2); padding:10px 12px; display:flex; align-items:center; gap:8px; font:inherit; font-size:13px; font-weight:650; color:var(--ink);}
.status-chip i{width:9px; height:9px; border-radius:50%; flex:0 0 auto;}
.status-chip.sel{border-color:var(--accent); background:var(--accent-soft); color:var(--accent);}
.status-chip:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}

.memo-field{margin-top:14px;}
.memo-field label{display:block; font-size:12px; font-weight:650; color:var(--ink-soft); margin-bottom:6px;}
.memo-field textarea{width:100%; min-height:64px; resize:none; border-radius:11px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; font-size:15px; padding:10px 12px;}
.memo-field textarea:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);}

.sheet-actions{display:flex; gap:8px; margin-top:16px;}
.btn-ghost{background:var(--surface-2); color:var(--ink-soft); flex:1; border:1px solid var(--line);}
.btn-ghost:hover{color:var(--ink);}
.btn-confirm{flex:2;}
.btn-confirm:disabled{opacity:.4; cursor:not-allowed;}

.pending-card{border:1px dashed var(--line-strong); border-radius:13px; padding:14px; text-align:center; background:var(--surface-2);}
.pending-card .pc-title{font-weight:700; font-size:14px; margin-bottom:4px;}
.pending-card .pc-sub{font-size:12.5px; color:var(--ink-soft); margin-bottom:12px;}
.blocked-note{font-size:13px; color:var(--ink-soft); line-height:1.6; padding:6px 2px 2px;}

/* ── Lists ── */
.list{padding:14px 16px 20px; display:flex; flex-direction:column; gap:10px; max-width:520px; margin:0 auto; width:100%;}
.empty{text-align:center; color:var(--ink-faint); font-size:13px; padding:48px 20px;}
.req-card{border:1px solid var(--line); border-radius:13px; padding:13px 15px; background:var(--surface); box-shadow:var(--shadow-card); transition:border-color .3s ease, box-shadow .3s ease;}
.req-card.highlight{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft);}
@media (prefers-reduced-motion:reduce){ .req-card{transition:none;} }
.req-top{display:flex; align-items:flex-start; justify-content:space-between; gap:8px;}
.req-date{font-size:12px; color:var(--ink-faint); font-variant-numeric:tabular-nums; margin-bottom:3px;}
.req-status-line{font-size:14px; font-weight:700; display:flex; align-items:center; gap:6px;}
.req-status-line i{width:8px; height:8px; border-radius:50%;}
.req-memo{font-size:12.5px; color:var(--ink-soft); margin-top:5px;}
.req-name{font-size:12.5px; color:var(--ink-soft); margin-top:2px;}
.pill{font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:999px; white-space:nowrap;}
.pill-pending{background:var(--accent-soft); color:var(--accent);}
.pill-approved{background:var(--ok-soft); color:var(--ok);}
.pill-rejected{background:var(--danger-soft); color:var(--danger);}
.pill-canceled{background:var(--surface-3); color:var(--ink-faint);}
.reject-reason{font-size:12px; color:var(--danger); margin-top:6px;}
.req-actions{display:flex; gap:8px; margin-top:10px;}
.req-actions .btn{padding:9px 12px; font-size:12.5px; flex:1;}
.btn-approve{background:var(--ok); color:#fff;}
.btn-reject{background:transparent; color:var(--danger); border:1px solid var(--danger-soft);}
.reject-box{margin-top:10px; padding-top:10px; border-top:1px dashed var(--line);}
.reject-box textarea{width:100%; min-height:52px; resize:none; border-radius:9px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); font:inherit; font-size:13px; padding:8px 10px;}

/* ── Toast ── */
.toast{position:fixed; left:16px; right:16px; bottom:calc(78px + env(safe-area-inset-bottom,0px)); z-index:20; max-width:480px; margin:0 auto; background:var(--ink); color:var(--bg); font-size:13px; font-weight:600; text-align:center; padding:12px 15px; border-radius:12px; box-shadow:var(--shadow-card); opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .2s ease, transform .2s ease;}
.toast.show{opacity:1; transform:translateY(0);}

@media (prefers-reduced-motion:reduce){
  .sheet, .sheet-backdrop, .toast{transition:none !important;}
}