/*
  Functional UI (forms, booking grid, messages). Kept apart from the theme in
  style.css so a new design can restyle these by overriding the --sys-* tokens
  or the .sys-* classes without touching the booking/consult logic.
  Sizes are in px, not stage units: controls must stay tappable on any screen.
*/
.sys{
  --sys-ink:var(--ink, #2B2522);
  --sys-muted:#6E625B;
  --sys-line:#CDBFB5;
  --sys-card:#FBFAF7;
  --sys-accent:var(--brown, #6E3B28);
  --sys-accent-soft:#F0E1D9;
  --sys-ok:#2E6B45;
  --sys-error:#A33A22;
  font-family:var(--f-sans, sans-serif);
  color:var(--sys-ink);
  font-size:15px;
  line-height:1.55;
}
.sys [hidden]{display:none !important;}

.sys-card{background:var(--sys-card);border:1px solid var(--sys-line);border-radius:14px;padding:24px;}
.sys-h{margin:0 0 12px;font-family:var(--f-serif, serif);font-weight:500;font-size:22px;color:var(--sys-accent);}
.sys-h + .sys-h, .sys-section + .sys-section{margin-top:28px;}
.sys-section{margin-top:28px;}

.sys-row{display:flex;gap:12px;flex-wrap:wrap;}
.sys-field{display:flex;flex-direction:column;gap:6px;flex:1 1 180px;margin-bottom:14px;}
.sys-field > span{font-size:14px;color:var(--sys-muted);}
.sys-keep{display:flex;align-items:center;gap:8px;margin:-4px 0 14px;font-size:14px;color:var(--sys-muted);cursor:pointer;}
.sys-keep input{width:18px;height:18px;margin:0;accent-color:currentColor;}
.sys input:not([type=radio]):not([type=checkbox]), .sys select, .sys textarea{
  width:100%;box-sizing:border-box;
  min-height:44px;padding:10px 12px;
  border:1px solid var(--sys-line);border-radius:8px;background:#fff;
  font:inherit;color:var(--sys-ink);
}
.sys textarea{min-height:84px;resize:vertical;}
.sys input:focus-visible, .sys select:focus-visible, .sys textarea:focus-visible,
.sys button:focus-visible{outline:2px solid var(--sys-accent);outline-offset:2px;}

.sys-radios{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;border:0;padding:0;}
.sys-radios legend{font-size:14px;color:var(--sys-muted);margin-bottom:6px;padding:0;}
.sys-radios label{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:1px solid var(--sys-line);border-radius:999px;background:#fff;cursor:pointer;}
.sys-radios label:has(input:checked){border-color:var(--sys-accent);background:var(--sys-accent-soft);}

.sys-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 26px;border:0;border-radius:999px;
  background:var(--rose, #C9A095);color:var(--sys-accent);
  font:inherit;font-weight:500;cursor:pointer;
}
.sys-btn--block{width:100%;}
.sys-btn:disabled{opacity:.5;cursor:default;}
.sys-link{border:0;background:none;padding:6px 4px;font:inherit;font-size:14px;color:var(--sys-accent);text-decoration:underline;cursor:pointer;}

.sys-chips, .sys-slots{display:flex;flex-wrap:wrap;gap:8px;}
.sys-chips{margin-bottom:16px;}
#slotPicker{margin-bottom:16px;}
.sys-chip, .sys-slot{
  min-height:40px;padding:0 14px;border:1px solid var(--sys-line);border-radius:999px;
  background:#fff;font:inherit;font-size:14px;color:var(--sys-ink);cursor:pointer;
  font-variant-numeric:tabular-nums;
}
.sys-slot{border-radius:8px;min-width:68px;}
.sys-chip[aria-pressed=true], .sys-slot[aria-pressed=true]{background:var(--sys-accent);border-color:var(--sys-accent);color:#fff;}

.sys-rooms{padding-top:16px;border-top:1px solid var(--sys-line);}
.sys-chip__count{font-size:12px;opacity:.7;}

.sys-list{list-style:none;margin:0;padding:0;}
.sys-item{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 12px;padding:10px 0;border-bottom:1px solid var(--sys-line);font-variant-numeric:tabular-nums;}
.sys-empty{color:var(--sys-muted);padding:6px 0;}
.sys-item__err{flex-basis:100%;font-size:14px;color:var(--sys-error);}
.sys-item__err:empty{display:none;}

.sys-pick{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px;padding-top:18px;border-top:1px solid var(--sys-line);}
.sys-pick select{width:auto;min-width:110px;}
.sys-pick__label{flex:1 1 200px;font-weight:500;}

.sys-note{color:var(--sys-muted);font-size:14px;}
.sys-msg{min-height:1.4em;margin:10px 0 0;font-size:14px;}
.sys-msg--ok{color:var(--sys-ok);}
.sys-msg--error{color:var(--sys-error);}
.sys-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

@media (prefers-reduced-motion:reduce){.sys *{transition:none !important;}}

/* ---------- day board: rooms down, hours across ---------- */
.sys-board{--board-name:84px;--board-free:#fff;--board-taken:#D8B9AD;--board-past:#EFEAE5;}
.sys-board__grid{display:grid;gap:2px;align-items:stretch;font-variant-numeric:tabular-nums;}
.sys-board__corner{grid-column:1;}
.sys-board__tick{position:relative;height:18px;font-size:11px;color:var(--sys-muted);white-space:nowrap;}
.sys-board__tick:not(:empty){transform:translateX(-50%);}
.sys-board__name{
  min-height:34px;padding:0 6px 0 0;border:0;background:none;text-align:left;
  font:inherit;font-size:13px;color:var(--sys-ink);cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sys-board__name[aria-pressed=true]{font-weight:500;color:var(--sys-accent);}
.sys-board__cell{display:block;min-height:34px;border-radius:3px;padding:0;border:0;}
.sys-board__cell.is-free{background:var(--board-free);box-shadow:inset 0 0 0 1px var(--sys-line);cursor:pointer;}
.sys-board__cell.is-free:hover{background:var(--sys-accent-soft);}
.sys-board__cell.is-picked{background:var(--sys-accent);box-shadow:none;}
.sys-board__cell.is-taken{background:var(--board-taken);}
.sys-board__cell.is-past{background:repeating-linear-gradient(135deg,var(--board-past) 0 3px,#E2DBD4 3px 5px);}
.sys-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 0;font-size:13px;color:var(--sys-muted);}
.sys-legend span{display:inline-flex;align-items:center;gap:6px;}
.sys-legend span::before{content:"";width:14px;height:14px;border-radius:3px;}
.sys-legend .is-free::before{background:var(--board-free);box-shadow:inset 0 0 0 1px var(--sys-line);}
.sys-legend .is-taken::before{background:var(--board-taken);}
.sys-legend .is-past::before{background:repeating-linear-gradient(135deg,var(--board-past) 0 3px,#E2DBD4 3px 5px);}
#boardWrap .sys-chips{margin-bottom:14px;}
.sys-board + .sys-section{padding-top:24px;border-top:1px solid var(--sys-line);}
@media (max-width:520px){
  .sys-board{--board-name:62px;}
  .sys-board__grid{gap:1px;}
  .sys-board__tick.is-minor{visibility:hidden;}
  .sys-board__name{font-size:12px;}
}

/* ---------- student sign-in (js/signin.js) ---------- */
.signin__kakao{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:420px;
  min-height:52px;padding:0 20px;border:0;border-radius:12px;
  background:#FEE500;color:rgba(0,0,0,.85);font:inherit;font-size:16px;font-weight:600;cursor:pointer;
}
.signin__kakao svg{width:22px;height:22px;}
.signin__kakao:disabled{opacity:.6;cursor:default;}
.signin__hint{margin:8px 0 18px;}
.signin__alt{margin-top:6px;}
.signin__alt summary{cursor:pointer;color:var(--sys-accent);font-size:14px;text-decoration:underline;padding:6px 0;}
.signin__alt[open] summary{margin-bottom:12px;}
.signin__title{margin:0 0 6px;font-size:18px;font-weight:600;}
.signin__form{margin-top:12px;}
.signin__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:14px;}
.signin__other{display:block;margin-top:14px;}
.book__login .signin__kakao{max-width:none;}
.signin__policy{display:inline-block;margin:-2px 0 10px;font-size:12.5px;color:var(--sys-muted, #7a6a60);}