/* ============================================================
   Settings - Profile, Workers, Managers, Workspace
   ============================================================ */

.settings-page { max-height: calc(100vh - 80px); overflow-y: auto; }

/* Tab navigation */
.stg-tabs { display: flex; gap: var(--space-1); margin-bottom: var(--space-5); background: var(--bg-subtle); padding: var(--space-1); border-radius: var(--radius); width: fit-content; }
.stg-tab { padding: var(--space-2) var(--space-5); border-radius: var(--radius-sm); border: none; font-size: var(--text-base); font-weight: 600; cursor: pointer; background: transparent; color: var(--text-muted); transition: all var(--transition); font-family: inherit; }
.stg-tab:hover { color: var(--text); }
.stg-tab.active.manager { background: var(--white); color: var(--mg-primary-dark); box-shadow: var(--shadow); }
.stg-tab.active.admin { background: var(--white); color: var(--ad-primary-dark); box-shadow: var(--shadow); }


/* Panel — .section-card로 마이그레이션됨 (components.css 참조). */

/* Key-value rows */
.stg-kv-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) 0; border-bottom: 1px solid var(--border-light); font-size: var(--text-md); }
.stg-kv-row:last-child { border-bottom: none; }
.stg-kv-row .label { color: var(--text-muted); font-weight: 500; font-size: var(--text-md); }
.stg-kv-row .value { font-weight: 600; font-size: var(--text-lg); }
.stg-kv-row .value.code { color: var(--info); font-family: inherit; letter-spacing: 2px; background: var(--info-light); padding: var(--space-1) var(--space-4); border-radius: 6px; font-size: var(--text-xl); font-weight: 800; }

/* 계정 정보 — 값 왼쪽 정렬 (label 고정폭 뒤로 value가 붙음) */
.stg-kv-left .stg-kv-row { justify-content: flex-start; gap: var(--space-5); }
.stg-kv-left .stg-kv-row .label { min-width: 64px; flex-shrink: 0; }
/* 소속 직장 초대코드 — 코드는 라벨 옆 왼쪽, 복사/재발급 버튼은 행 오른쪽 끝으로 */
.stg-invite-btns { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* stg-kv-row가 들어 있는 카드 body는 행을 균등 분배 — 두 카드의 행 갯수가
   다를 때(예: 계정 정보 4행 vs 소속 직장 5행) 빈 공간이 카드 하단에 몰리지 않고
   행 사이로 균등하게 퍼져서 가로선이 안정적인 간격으로 보이도록. */
.section-card__body:has(> .stg-kv-row) { display: flex; flex-direction: column; min-height: 240px; }
.section-card__body:has(> .stg-kv-row) > .stg-kv-row { flex: 1; }

/* 같은 카드의 헤더는 한 쪽에만 수정 버튼이 있어 자연 높이가 달라짐.
   button 있는 헤더의 자연 높이로 min-height을 강제하면 텍스트만 있는 헤더도
   같이 늘어나서 두 카드의 헤더 아래 구분선 위치가 일치. */
.section-card:has(> .section-card__body > .stg-kv-row) > .section-card__header {
  min-height: 76px;
  box-sizing: border-box;
}

/* 프로필 — 계정정보·소속직장 2열 카드 (인라인 스타일 클래스화, 시각 변화 없음) */
.stg-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.stg-profile-grid > .section-card { margin-bottom: 0; }   /* 그리드가 간격 담당 */
.section-card__body.stg-kv-left { padding: 16px 24px; }
.stg-btn-muted { color: var(--text-muted); }              /* 재발급 등 보조 버튼 */

/* 프로필 편집 모달 — 이메일 행(입력+중복확인) / 검증 메시지 / 저장 버튼 */
.stg-email-row { display: flex; gap: 8px; }
.stg-email-row .stg-form-input { flex: 1; }
.stg-email-row .btn-secondary { white-space: nowrap; }
.stg-check-msg { font-size: 11px; margin-top: 4px; min-height: 16px; }
.stg-save-btn { margin-top: 8px; }

/* 근로자/관리자 리스트 헤더 — 타이틀 + 툴바(검색·추가) */
.stg-list-toolbar { display: flex; align-items: center; gap: var(--space-3); }
.stg-list-title { font-size: var(--text-xl); font-weight: 700; color: var(--text); }

/* 데이터 표 셀 — 근로자/관리자 공통 (값 그대로, 시각 변화 없음) */
.stg-cell { font-size: 14px; color: var(--text-secondary); font-weight: 500; text-align: center; }
.stg-cell-muted { font-size: 14px; color: var(--text-muted); text-align: center; }
.stg-cell-name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; text-align: center; }
.stg-cell-phone { font-size: 14px; color: var(--text-secondary); font-weight: 500; font-variant-numeric: tabular-nums; text-align: center; }
.stg-cell-num { font-size: 15px; font-weight: 600; color: var(--text); text-align: center; font-variant-numeric: tabular-nums; }
.stg-cell-stat { font-size: 15px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 800; color: var(--text-secondary); }
.stg-cell-actions { display: flex; gap: 4px; justify-content: center; }
.stg-cell-unit { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-left: 2px; }   /* "명" */
.stg-cell-unit-sm { font-size: 12px; font-weight: 500; margin-left: 1px; }                          /* "건" (색은 부모 상속) */
.stg-icon-primary { color: var(--ad-primary); }   /* 보호자 초대 등 강조 아이콘 버튼 */

/* 초대 코드 모달 (관리자) */
.stg-invite-box { background: var(--ad-primary-light); border: 1px solid var(--ad-primary); border-radius: var(--radius-sm); padding: 20px; text-align: center; margin-bottom: 20px; }
.stg-invite-label { font-size: 12px; color: var(--ad-primary); font-weight: 600; margin-bottom: 8px; }
.stg-invite-code { font-size: 28px; font-weight: 900; letter-spacing: 4px; color: var(--ad-primary); margin-bottom: 8px; }
.stg-invite-actions { display: flex; gap: 8px; justify-content: center; }
.stg-invite-help { text-align: center; color: var(--text-muted); font-size: 12px; margin-bottom: 20px; padding: 0 20px; line-height: 1.6; }
.stg-sms-section { border-top: 1px solid var(--border); padding-top: 16px; }
.stg-subtitle { font-size: 13px; font-weight: 700; margin-bottom: 12px; }
/* .stg-select 등 폼 프리미티브·근무일정(.wk-*) 스타일은 css/form-shared.css로 이동 (super 콘솔과 공유) */

/* 데이터 표 행 — 근로자/관리자 페이지 grid 표.
   셀 사이 세로 구분선(마지막 셀 제외) + 좌우 작은 padding.
   각 셀은 행 전체 높이로 stretch (border-right가 세로선으로 보이도록). */
.stg-data-row { gap: 0 !important; align-items: stretch !important; }
.stg-data-row > * {
  border-right: 1px solid var(--border);
  padding-left: var(--space-2);
  padding-right: var(--space-2);
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* 아바타 셀 — wrapping div(셀) 안에 아바타가 자식.
   아바타를 셀 가운데 정렬 → 좌우 여백 동일. */
.stg-data-row > *:first-child { padding: 0; }
/* 이름 셀 — 가운데 정렬 (다른 셀과 동일) */
.stg-data-row > *:nth-child(2) { justify-content: center; }
.stg-data-row > *:last-child { border-right: none; }
/* 셀 내부 텍스트가 ellipsis 처리되도록 보조 */
.stg-data-row > * > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 정렬 표 헤더 행 — 근로자/관리자 표 공통(buildColumnHeader). 동적 grid-template-columns만 인라인.
   .stg-data-row의 align-items:stretch !important가 우선하므로 여기 center는 기존과 동일하게 무효(시각 변화 없음). */
.stg-col-header {
  display: grid;
  align-items: center;
  padding: var(--space-2) var(--space-1);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg);
  text-align: center;
}

/* 근로자 표 헤더 — 클릭 정렬 (▲/▼, 비활성은 흐린 ↕) */
.stg-sort-th { cursor: pointer; user-select: none; gap: 3px; transition: color var(--transition); }
.stg-sort-th:hover { color: var(--ad-primary); }
.stg-sort-th.active { color: var(--ad-primary); }
.stg-sort-arrow { font-size: 9px; flex-shrink: 0; }
.stg-sort-arrow.dim { opacity: 0.35; }

/* 초대코드 칩 — 코드 + 복사 아이콘을 한 덩어리로. 칩 전체 클릭 시 복사. */
.wk-code-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px dashed var(--border); border-radius: 6px; background: var(--bg); cursor: pointer; font-family: inherit; transition: all var(--transition); }
.wk-code-chip:hover { border-color: var(--ad-primary); background: var(--white); }
.wk-code-key { font-size: 13px; color: var(--text-muted); }
.wk-code-text { font-size: 14px; font-weight: 700; letter-spacing: 0.5px; color: var(--text); line-height: 1.1; }
.wk-code-copy { font-size: 13px; color: var(--text-muted); transition: color var(--transition); }
.wk-code-chip:hover .wk-code-copy { color: var(--ad-primary); }

/* Worker/Manager list */
.stg-list-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-light); }
.stg-list-item:last-child { border-bottom: none; }
.stg-list-avatar { width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: var(--text-md); color: white; flex-shrink: 0; }
.stg-list-info { flex: 1; min-width: 0; }
.stg-list-name { font-weight: 700; font-size: var(--text-base); }
.stg-list-meta { font-size: var(--text-xs); color: var(--text-muted); }
.stg-list-actions { display: flex; gap: var(--space-2); }

.icon-btn { width: 32px; height: 32px; border: 1px solid var(--border); background: var(--white); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-md); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; transition: all var(--transition); font-family: inherit; }
.icon-btn:hover { background: var(--bg-subtle); border-color: var(--text-muted); }
.icon-btn:focus-visible { outline: none; border-color: var(--ad-primary); box-shadow: var(--focus-ring); }
/* delete만 위험 강조 유지 */
.icon-btn.delete { color: var(--danger); border-color: var(--danger-border); }
.icon-btn.delete:hover { background: var(--danger-light); }

/* Add button */
.stg-add-btn { width: 100%; padding: var(--space-3); border: 2px dashed var(--border); border-radius: var(--radius); background: none; cursor: pointer; font-size: var(--text-base); font-weight: 600; color: var(--text-muted); transition: all var(--transition); font-family: inherit; margin-top: var(--space-3); }
.stg-add-btn:hover { border-color: var(--ad-primary); color: var(--ad-primary); background: rgba(99,102,241,0.03); }
.stg-add-btn:focus-visible { outline: none; border-color: var(--ad-primary); color: var(--ad-primary); box-shadow: var(--focus-ring); }

/* Invite code */
.stg-invite-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; }
.stg-invite-code { font-size: var(--text-2xl); font-weight: 900; letter-spacing: 3px; font-family: inherit; color: var(--ad-primary); }
.stg-invite-action { padding: var(--space-2) var(--space-4); border: 1px solid var(--ad-primary); border-radius: var(--radius-sm); background: var(--white); color: var(--ad-primary); font-size: var(--text-sm); font-weight: 700; cursor: pointer; transition: all var(--transition); font-family: inherit; }
.stg-invite-action:hover { background: var(--ad-primary); color: white; }
.stg-invite-action:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(99,102,241,0.25); }

/* Form fields in modal — .stg-form-* 프리미티브는 css/form-shared.css로 이동 (super 콘솔과 공유) */

/* 표 페이지네이션 컨트롤 */
.stg-pager { display: flex; align-items: center; justify-content: center; gap: var(--space-1); margin-top: var(--space-4); flex-wrap: wrap; }
.stg-pager-btn { min-width: 38px; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); background: var(--white); border-radius: var(--radius-sm); font-size: var(--text-base); font-weight: 600; color: var(--text-secondary); cursor: pointer; font-family: inherit; font-variant-numeric: tabular-nums; transition: all var(--transition); }
.stg-pager-btn:hover:not(:disabled):not(.active) { border-color: var(--ad-primary); color: var(--ad-primary); }
.stg-pager-btn:disabled { opacity: 0.4; cursor: default; }
.stg-pager-btn.active { background: var(--ad-primary); border-color: var(--ad-primary); color: #fff; cursor: default; }
.stg-pager-ellipsis { color: var(--text-muted); font-weight: 700; padding: 0 2px; align-self: flex-end; }

/* 근무 일정 입력(.wk-*) 스타일은 css/form-shared.css로 이동 (super 콘솔과 공유) */