/* ============================================================
   공유 폼/근무일정 에디터 스타일
   관리자 콘솔(index.html)·슈퍼관리자 콘솔(super.html) 양쪽에서 로드.
   schedule-editor.js가 쓰는 클래스와, 모달 폼 프리미티브를 한곳에 모음.
   토큰은 variables.css(양쪽 공통)에 의존.
   ============================================================ */

/* ── 모달 폼 필드 프리미티브 ─────────────────────── */
.stg-form-hint { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-4); }
.req-star { color: var(--danger); font-weight: 700; }
.stg-form-field { margin-bottom: var(--space-4); }
.stg-form-label { font-size: var(--text-base); font-weight: 700; color: var(--text-secondary); margin-bottom: var(--space-2); display: block; }
.stg-form-input { width: 100%; padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--text-md); font-family: inherit; transition: border-color var(--transition); }
.stg-form-input:focus { outline: none; border-color: var(--ad-primary); box-shadow: var(--focus-ring-input); }
.stg-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.stg-select { cursor: pointer; }   /* 관리자 배정 셀렉트 */

/* ── 근무 일정 입력 — work_schedule = { mon:{start,end}|null, ... } ── */
.wk-sched-section { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border-light); }
.wk-sched-title { font-size: var(--text-xl); font-weight: 800; color: var(--text); margin-bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-2); }
.wk-sched-title i { color: var(--ad-primary); }

/* 근무형태 토글 (전체 | 요일별) */
.wk-mode-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1); background: var(--bg-subtle); border-radius: var(--radius-sm); padding: 4px; }
.wk-mode-btn { padding: var(--space-3); border: none; background: transparent; border-radius: calc(var(--radius-sm) - 4px); font-size: var(--text-md); font-weight: 700; color: var(--text-muted); cursor: pointer; transition: all var(--transition); }
.wk-mode-btn.active { background: var(--white); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

.wk-sched-info { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--ad-primary-light); color: var(--ad-primary-dark); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; }

/* 근무 요일 핀 */
.wk-day-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.wk-day-pill { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--white); font-size: var(--text-md); font-weight: 700; color: var(--text-secondary); cursor: pointer; transition: all var(--transition); }
.wk-day-pill:hover { border-color: var(--ad-primary); }
.wk-day-pill.active { background: var(--ad-primary); border-color: var(--ad-primary); color: #fff; }

/* 시간 입력 행 */
.wk-time-row { display: flex; align-items: center; gap: var(--space-3); }
.wk-sched-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.wk-sched-row:last-child { margin-bottom: 0; }
.wk-day-badge { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--ad-primary-light); color: var(--ad-primary-dark); font-weight: 800; font-size: var(--text-md); }
.wk-time-in { flex: 1; min-width: 0; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--text-md); font-family: inherit; }
.wk-time-in:focus { outline: none; border-color: var(--ad-primary); box-shadow: var(--focus-ring-input); }
.wk-sched-row .sep, .wk-time-row .sep { color: var(--text-muted); flex-shrink: 0; }
.wk-copy-btn { flex-shrink: 0; width: 36px; height: 36px; border: 1px solid var(--border); background: var(--white); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; transition: all var(--transition); }
.wk-copy-btn:hover { border-color: var(--ad-primary); color: var(--ad-primary); }
.wk-sched-empty { padding: var(--space-4); text-align: center; color: var(--text-muted); font-size: var(--text-sm); background: var(--bg-subtle); border-radius: var(--radius-sm); }

/* 설정된 근무시간 요약 (읽기 전용, 에디터 상태에 따라 라이브 갱신) */
.wk-sched-summary { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--ad-primary-light); border: 1px solid rgba(99,102,241,0.2); border-radius: var(--radius-sm); }
.wk-sched-sum-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.wk-sched-sum-days { font-size: var(--text-md); font-weight: 700; color: var(--text); }
.wk-sched-sum-time { font-size: var(--text-md); font-weight: 700; color: var(--ad-primary-dark); font-variant-numeric: tabular-nums; }
.wk-sched-sum-empty { color: var(--text-muted); font-size: var(--text-sm); }