* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, -apple-system, "Malgun Gothic", sans-serif;
  background: #f6f6f7; color: #1c1c1e;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 12px; }
h1 { font-size: 18px; margin: 8px 0 12px; }

.tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.tabs button {
  flex: 1; padding: 12px; font-size: 15px; border: 0; border-radius: 10px;
  background: #e5e5ea; color: #3a3a3c; cursor: pointer;
}
.tabs button[aria-selected="true"] { background: #1c1c1e; color: #fff; font-weight: 600; }

.monthbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.monthbar button { border: 0; background: #fff; border-radius: 8px; padding: 8px 14px; font-size: 16px; cursor: pointer; }
.monthbar strong { font-size: 16px; }

.staffpick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.staffpick button {
  border: 2px solid transparent; border-radius: 999px; padding: 7px 14px;
  font-size: 14px; color: #fff; cursor: pointer;
}
.staffpick button[aria-pressed="true"] { border-color: #1c1c1e; font-weight: 700; }

.grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.dow { text-align: center; font-size: 12px; color: #8e8e93; padding: 4px 0; }
.dow.sun { color: #e4572e; }
.cell {
  background: #fff; border-radius: 8px; min-height: 66px; padding: 4px;
  display: flex; flex-direction: column; gap: 2px; cursor: pointer; border: 0; text-align: left;
}
.cell.empty { background: transparent; cursor: default; }
.cell .d { font-size: 12px; color: #636366; }
.cell.sun .d { color: #e4572e; }
.chip {
  font-size: 11px; color: #fff; border-radius: 4px; padding: 1px 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 관리자 화면에서 확정 여부를 토글하는 칩 */
.chip.pick { cursor: pointer; }
.chip.pick:focus-visible { outline: 2px solid #1c1c1e; outline-offset: 1px; }

/* 관리자 화면 입력줄 */
#newName { padding: 8px 10px; font-size: 14px; border: 1px solid #d1d1d6; border-radius: 8px; }
#addStaff, #confirmBtn {
  border: 0; background: #1c1c1e; color: #fff; border-radius: 8px;
  padding: 9px 14px; font-size: 14px; cursor: pointer;
}
#confirmBtn { margin-right: 8px; }
#confirmBtn:disabled { background: #c7c7cc; cursor: not-allowed; }
.grid .loadfail { grid-column: 1 / -1; margin: 12px 0; font-size: 13px; color: #a4290f; }
#confirmMsg { font-size: 13px; color: #1c7c3a; }
#login input { padding: 8px 10px; font-size: 14px; border: 1px solid #d1d1d6; border-radius: 8px; }
#loginBtn { border: 0; background: #1c1c1e; color: #fff; border-radius: 8px; padding: 9px 14px; font-size: 14px; cursor: pointer; }

.more {
  font-size: 11px; color: #636366; background: none; border: 0;
  padding: 0; text-align: left; cursor: pointer; align-self: flex-start;
}
.cell:focus-visible, .more:focus-visible { outline: 2px solid #1c1c1e; outline-offset: 1px; }

.banner {
  background: #ffe5e0; color: #a4290f; padding: 10px; border-radius: 8px;
  margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.banner button { border: 0; background: #a4290f; color: #fff; border-radius: 6px; padding: 6px 12px; cursor: pointer; }
.hidden { display: none; }

dialog { border: 0; border-radius: 12px; padding: 16px; min-width: 220px; }
dialog h3 { margin: 0 0 10px; font-size: 15px; }
dialog ul { margin: 0; padding-left: 18px; }
dialog form { margin-top: 12px; text-align: right; }