*{box-sizing:border-box} body{font-family:Arial,"Malgun Gothic",sans-serif;margin:0;background:#f4f6f8;color:#222}
button,input,select,textarea{font:inherit} button{cursor:pointer;border:0;border-radius:8px;padding:9px 13px;background:#222;color:#fff}
button.secondary{background:#e8eaed;color:#222}.hidden{display:none!important}
.center-card{width:min(420px,92vw);margin:10vh auto;background:#fff;padding:28px;border-radius:16px;box-shadow:0 8px 30px #0002}
.center-card input{width:100%;padding:12px;margin:7px 0;border:1px solid #ccd1d6;border-radius:8px}.center-card button{width:100%;margin-top:10px}
.msg{min-height:24px;margin-top:8px;color:#b00020}
header{height:62px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid #ddd}
#whoami{margin-left:12px;color:#666;font-size:14px}nav{display:flex;gap:8px;padding:12px 18px;background:#fff}
nav .tab{background:#e8eaed;color:#222}.tab.active{background:#222;color:#fff}
main{padding:0 18px 30px}.panel{background:#fff;border-radius:12px;padding:16px;min-height:420px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.toolbar select{padding:8px}
.upload-btn{display:inline-block;background:#222;color:#fff;padding:9px 13px;border-radius:8px;cursor:pointer}.upload-btn input{display:none}
.pathbar{padding:12px 4px;color:#555;border-bottom:1px solid #eee}
.file-row{display:grid;grid-template-columns:1fr 100px 150px minmax(320px,auto);gap:8px;align-items:center;padding:10px 4px;border-bottom:1px solid #eee}
.file-name{cursor:pointer}.file-name:hover{text-decoration:underline}.file-size,.file-date{color:#666;font-size:13px}.danger{background:#b42318}
.calendar-head{display:flex;justify-content:center;align-items:center;gap:18px}.calendar-head h2{min-width:180px;text-align:center}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.daynames div{padding:8px;text-align:center;font-weight:bold;color:#666}
.day{min-height:110px;border:1px solid #e3e6e8;padding:6px;background:#fff}.day.muted{background:#f8f9fa;color:#aaa}.day .num{font-size:13px;margin-bottom:4px}
.event-chip{font-size:12px;background:#eceff1;border-radius:5px;padding:4px;margin:3px 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}
.event-form{margin-top:18px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:8px}.event-form textarea{grid-column:1/-1;min-height:70px}
.event-form input,.event-form select,.event-form textarea,.user-form input,.user-form select{padding:9px;border:1px solid #ccd1d6;border-radius:8px}
.user-form{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.user-row{padding:10px;border-bottom:1px solid #eee}
@media(max-width:800px){.file-row{grid-template-columns:1fr}.file-size,.file-date{display:none}.actions{justify-content:flex-start}.file-date{display:none}.day{min-height:80px}.event-form{grid-template-columns:1fr}.event-form textarea{grid-column:auto}}

.actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}.small{font-size:12px;color:#777;margin-top:3px}


/* v0.1.5 calendar quick-add modal */
.day{cursor:pointer;transition:background .12s ease}
.day:hover{background:#f2f5f7}
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:1000;
}
.modal-card{
  width:min(520px,96vw);
  background:#fff;
  border-radius:14px;
  padding:18px;
  box-shadow:0 18px 50px #0004;
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.modal-head h3{margin:0}
.modal-card label{
  display:block;
  margin:10px 0 5px;
  font-size:13px;
  color:#555;
}
.modal-card input,
.modal-card select,
.modal-card textarea{
  width:100%;
  padding:10px;
  border:1px solid #ccd1d6;
  border-radius:8px;
}
.modal-card textarea{min-height:90px;resize:vertical}
.modal-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:16px;
}
@media(max-width:650px){
  .modal-grid{grid-template-columns:1fr}
}


/* v0.1.6 calendar selection/edit UX */
.day{
  cursor:pointer;
  transition:background .12s ease, box-shadow .12s ease;
  position:relative;
}
.day:hover{
  background:#f4f6f8;
}
.day.selected-day{
  box-shadow:inset 0 0 0 3px #222;
  background:#eef1f3;
}
.day.selected-day .num{
  font-weight:800;
  text-decoration:underline;
}
.event-chip{
  user-select:none;
}
.event-chip.selected-event{
  outline:2px solid #222;
  font-weight:700;
}
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:1000;
}
.modal-card{
  width:min(520px,96vw);
  background:#fff;
  border-radius:14px;
  padding:18px;
  box-shadow:0 18px 50px #0004;
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.modal-head h3{margin:0}
.modal-card label{
  display:block;
  margin:10px 0 5px;
  font-size:13px;
  color:#555;
}
.modal-card input,
.modal-card select,
.modal-card textarea{
  width:100%;
  padding:10px;
  border:1px solid #ccd1d6;
  border-radius:8px;
}
.modal-card textarea{min-height:90px;resize:vertical}
.modal-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.modal-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:16px;
}
.modal-spacer{flex:1}
@media(max-width:650px){
  .modal-grid{grid-template-columns:1fr}
}


/* v0.2.0 weekend date color */
#calendarGrid .day:nth-child(7n+1) .num,
#calendarGrid .day:nth-child(7n) .num{
  color:#d40000;
}


/* v0.2.1 user management */
.user-row-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.self-user{
  font-size:12px;
  color:#777;
}