/* ============================================================
   베스트 학원관리 — 디자인 토큰 · 공통 컴포넌트
   값은 docs/design/DESIGN_STANDARD.dc.html 과 CLAUDE.md 기준.
   새 색·크기를 여기 밖에서 만들지 않는다.
   ============================================================ */

:root {
  /* 면 · 선 */
  --surface: #FFFFFF;
  --card-bd: #E7E5E1;
  --divider: #EDECE9;
  --control-bd: #E4E2DE;
  --row-rule: #F3F2EF;
  --selected: #F7F1DF;
  --hover: #F3F2EF;
  --bar-track: #EEEDEA;
  --cell-idle: #F1F0ED;

  /* 글자 4단계 — 이보다 옅은 회색은 글자에 쓰지 않는다 */
  --ink-1: #17150F;
  --ink-2: #4A463D;
  --ink-3: #6E6759;
  --ink-4: #6F6A61;

  /* 액션 */
  --accent: #D97757;
  /* 흰 글자를 얹는 면 색. #D97757 은 흰 글자 대비가 3.1:1 이라 안 읽힌다 (AA 기준 4.5:1) */
  --accent-solid: #B35A36;

  /* 데이터 시각화 5단 */
  --viz-1: #6C7F54;
  --viz-2: #B9BA75;
  --viz-3: #F5D687;
  --viz-4: #F3A155;
  --viz-5: #C44B56;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface);
  font-family: 'Pretendard', -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* IBM Plex Mono의 점 있는 0 끄기 */
  font-feature-settings: 'zero' 0;
  color: var(--ink-1);
}

a { color: inherit; text-decoration: none; }
input, button { font-family: inherit; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #D8D4C9; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

.mono { font-family: 'IBM Plex Mono', monospace; }

/* ── 셸 ────────────────────────────────────────────────── */

.shell {
  /* CareNote와 같이 가로를 꽉 채운다. 대메뉴만 고정폭(240px)이고 본문이 남는 폭을 차지한다.
     핸드오프 원본은 1480px 고정이었으나 실제 모니터 폭을 그대로 쓰기로 했다. */
  width: 100%;
  min-height: 100vh;
  background: var(--surface);
  border: 0;
  border-radius: 0;
  display: flex;
  align-items: flex-start;
}

.shell__main {
  flex: 1;
  min-width: 0;
  /* .shell 이 align-items:flex-start 라 세로로 늘어나지 않는다.
     리스트 패널이 문서 하단까지 흘러내리려면 본문이 최소 한 화면 높이를 가져야 한다. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

/* ── 대메뉴 ─────────────────────────────────────────────── */

.nav {
  width: 240px;
  flex: none;
  background: var(--surface);
  box-shadow: inset -1px 0 0 var(--divider);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.nav__logo {
  height: 62px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
}

.nav__logo span {
  font-family: 'Mea Culpa', cursive;
  font-size: 30px;
  line-height: 1;
  letter-spacing: .1em;
  background: linear-gradient(100deg, #3F7A1E 0%, #6E8F14 26%, #C08A0A 54%, #C4571A 80%, #A82E2C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .3px #6E5A12;
  color: #3F7A1E;
}

.nav__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 4px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nav__section {
  padding: 8px 8px 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ink-4);
}

.nav__section--gap { padding-top: 18px; }

.nav__track,
.nav__module {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border-radius: 9px;
  cursor: pointer;
  background: transparent;
}

.nav__track { height: 36px; }
.nav__module { height: 34px; }
.nav__track:hover,
.nav__module:hover { background: var(--hover); }

.nav__track.is-on,
.nav__module.is-on { background: var(--selected); }

.nav__track img { width: 15px; height: 15px; object-fit: contain; flex: none; }
.nav__track span:nth-of-type(1) { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.nav__track.is-on span:nth-of-type(1) { font-weight: 700; color: var(--ink-1); }
.nav__track .nav__meta { margin-left: auto; font-size: 12.5px; color: var(--ink-4); }
.nav__track.is-on .nav__meta { color: #57513F; }

.nav__module span:nth-of-type(1) { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.nav__module.is-on span:nth-of-type(1) { font-weight: 600; color: var(--ink-1); }
.nav__module.is-gap { margin-top: 10px; }
.nav__module.is-off { opacity: .5; cursor: default; }

.nav__badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 99px;
  background: #FFF0C8;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: #7A5507;
}

/* ── 헤더 ───────────────────────────────────────────────── */

.header {
  height: 62px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 22px;
  background: var(--surface);
  box-shadow: inset 0 -1px 0 var(--divider);
  position: sticky;
  top: 0;
  z-index: 20;
}

.header__icon { width: 22px; height: 22px; object-fit: contain; flex: none; }
.header__title { font-size: 18px; font-weight: 700; color: var(--ink-1); letter-spacing: -.01em; }
.header__track { font-size: 12.5px; color: var(--ink-3); }

/* ── 콤보박스 ───────────────────────────────────────────── */

.combo { position: relative; }

.combo__trigger {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid var(--control-bd);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
}

.combo.is-open .combo__trigger { border-color: var(--ink-1); }
.combo__caret { margin-left: auto; font-size: 10px; color: var(--ink-3); }

.combo__menu {
  display: none;
  position: absolute;
  top: 39px;
  left: 0;
  z-index: 30;
  background: #fff;
  border: 1px solid var(--card-bd);
  border-radius: 12px;
  box-shadow: 0 16px 32px -14px rgba(23, 21, 15, .22);
  padding: 5px;
}

.combo.is-open .combo__menu { display: block; }

/* 목록이 아니라 정보+액션을 담는 콤보 메뉴 — 훈련시간표 팝오버가 첫 사용처 */
.combo__menu--panel { right: 0; left: auto; padding: 12px; }
.tt-info { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.tt-info__name { font-size: 13px; color: var(--ink-1); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-info__date { font-size: 12px; color: var(--ink-3); }
.tt-info--empty { font-size: 12.5px; color: var(--ink-3); }
.tt-info__error { margin-top: 8px; font-size: 12px; color: #A83A44; }
.tt-upload { width: 100%; justify-content: center; cursor: pointer; position: relative; }
.tt-upload input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.combo__item {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border-radius: 9px;
  cursor: pointer;
}

.combo__item:hover { background: var(--hover); }
.combo__item.is-on { background: #FFF3D2; }

/* ── 컨트롤 ─────────────────────────────────────────────── */

.search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--control-bd);
  border-radius: 6px;
  background: var(--surface);
}

.search input {
  width: 128px;
  border: 0;
  outline: 0;
  font-size: 14px;
  color: var(--ink-1);
  background: transparent;
}

.btn {
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--control-bd);
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
  color: var(--ink-2);
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 버튼 앞 아이콘 — stroke 가 currentColor 라 버튼 글자색을 그대로 따라간다 */
.btn__ico { width: 14px; height: 14px; flex: none; }

.btn--primary {
  border: 0;
  padding: 0 15px;
  background: var(--accent-solid);
  color: #FFFFFF;
  font-weight: 600;
}

.btn--sm { height: 32px; padding: 0 12px; font-size: 13.5px; }
.btn--sm.btn--primary { padding: 0 14px; }

.chip {
  height: 27px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 11px;
  border-radius: 99px;
  border: 1px solid var(--control-bd);
  background: #FFFFFF;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.chip.is-on {
  background: var(--accent-solid);
  border-color: var(--accent-solid);
  color: #FFFFFF;
  font-weight: 600;
}

.chip__count { font-family: 'IBM Plex Mono', monospace; font-size: 12px; opacity: .7; }

.pill {
  display: inline-flex;
  align-items: center;
  height: 21px;
  padding: 0 9px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 600;
}

/* ── 요약 4박스 ─────────────────────────────────────────── */

.kpis { flex: none; padding: 16px 22px 14px; display: flex; gap: 12px; }
/* 홈 카드 안에 넣을 때는 카드 자체 패딩(16px)을 쓰므로 겹치지 않게 뺀다 */
.kpis--panel { padding: 0; }

.kpi {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--card-bd);
  border-radius: 14px;
  padding: 15px 17px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.kpi__head { display: flex; align-items: center; gap: 7px; }
.kpi__dot { width: 6px; height: 6px; border-radius: 99px; }
.kpi__label { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); }
.kpi__tag { margin-left: auto; font-size: 12px; font-weight: 600; }
.kpi__value { display: flex; align-items: baseline; gap: 6px; }
.kpi__value b {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 30px;
  font-weight: 600;
  color: var(--ink-1);
  letter-spacing: -.02em;
  line-height: 1;
}
.kpi__unit { font-size: 13.5px; color: var(--ink-3); }
.kpi__foot { display: flex; flex-direction: column; gap: 6px; }
.kpi__sub { font-size: 12.5px; color: var(--ink-3); text-wrap: pretty; }

/* ── 바 ─────────────────────────────────────────────────── */

.bar { height: 3px; border-radius: 99px; background: var(--bar-track); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 99px; }
.bar--lg { height: 6px; }

/* ── 본문: 리스트 1 : 상세 2 ─────────────────────────────── */

/* 남은 세로 공간을 모두 차지해야 리스트 패널이 하단까지 이어진다 */
.content { flex: 1; padding: 0 22px; display: flex; gap: 14px; align-items: stretch; }

/* 리스트 패널은 하단 테두리·라운드 없이 문서 하단으로 흘러내린다 */
.panel-list {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--card-bd);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel-list__head {
  flex: none;
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.panel-list__title { display: flex; align-items: center; gap: 8px; }
.panel-list__title b { font-size: 14.5px; font-weight: 700; color: var(--ink-1); }
.panel-list__count { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--ink-3); }
.panel-list__sort { margin-left: auto; font-size: 12.5px; color: var(--ink-3); cursor: pointer; }
.panel-list__search { margin: 10px 0 12px; }
.panel-list__chips { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.panel-list__body { flex: 1; padding: 0 8px 8px; }

.row {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border-radius: 9px;
  cursor: pointer;
  background: transparent;
}

.row:hover { background: #F8F6F1; }
.row.is-on { background: var(--selected); }
.row__dot { width: 5px; height: 5px; border-radius: 99px; flex: none; }
.row__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-1);
  width: 60px;
  flex: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row.is-on .row__name { font-weight: 700; }

/* 실습 기관 리스트 — 이름 칸이 학생 이름 기준(60px)이라 기관명이 잘린다.
   '대전대학교천안한방병원'(11자)까지 다 보이도록 이 리스트에서만 넓힌다. */
.row--site .row__name { width: 158px; }
.row--site .row__career { width: 92px; white-space: nowrap; }
.row__course { font-size: 12px; font-weight: 600; flex: none; width: 26px; }
.row__bar { flex: 1; min-width: 0; }
.row__att { font-size: 12.5px; font-weight: 500; width: 34px; text-align: right; flex: none; }
.row__warn {
  width: 14px;
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  flex: none;
}
.row__due { font-size: 12.5px; font-weight: 500; width: 50px; text-align: right; flex: none; }

/* 상세 패널은 리스트를 스크롤해도 따라온다 */
.panel-detail {
  flex: 2;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--card-bd);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  align-self: flex-start;
  position: sticky;
  top: 76px;
}

.detail__head { flex: none; padding: 18px 22px 16px; display: flex; align-items: flex-start; gap: 14px; }

/* 증명사진 3:4 — 원형 금지 */
.photo { width: 59px; height: 78px; flex: none; border-radius: 8px; object-fit: cover; background: var(--row-rule); }
.photo--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
}

.detail__id { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.detail__name { font-size: 23px; font-weight: 700; color: var(--ink-1); letter-spacing: -.01em; }
.detail__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detail__meta span.mono, .detail__meta > span { font-size: 13px; }
.detail__sep { width: 1px; height: 11px; background: var(--control-bd); }
.detail__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }

/* 직계 자식은 모두 flex:none — 짜부라짐 방지 */
.detail__body { padding: 0 22px 22px; display: flex; flex-direction: column; gap: 16px; }
.detail__body > * { flex: none; }

.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--card-bd); /* --divider(#EDECE9)는 흰 배경 타일 사이에서 거의 안 보여 4칸이 붙어 보였다 */
  border: 1px solid var(--card-bd);
  border-radius: 14px;
  overflow: hidden;
}

.tile { background: var(--surface); padding: 13px 15px; display: flex; flex-direction: column; gap: 6px; }
.tile__label { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.tile__value { display: flex; align-items: baseline; gap: 5px; }
.tile__value b { font-family: 'IBM Plex Mono', monospace; font-size: 23px; font-weight: 600; line-height: 1; }
.tile__unit, .tile__note { font-size: 12.5px; color: var(--ink-3); }
.tile__note { font-size: 12px; }

.cols { display: flex; gap: 14px; align-items: stretch; }

.card {
  min-width: 0;
  border: 1px solid var(--card-bd);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.card--table { padding: 0; overflow: hidden; gap: 0; }
.card__head { display: flex; align-items: center; gap: 8px; }
.card__head b { font-size: 13.5px; font-weight: 700; color: var(--ink-1); }
.card__note { font-size: 12.5px; color: var(--ink-3); }

.card--table .card__head { height: 38px; padding: 0 16px; box-shadow: inset 0 -1px 0 var(--bar-track); }
.card__row {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  box-shadow: inset 0 -1px 0 var(--row-rule);
}

.card__foot {
  margin-top: auto;
  padding-top: 12px;
  box-shadow: inset 0 1px 0 var(--bar-track);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.heatmap { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.heatmap__cell {
  height: 18px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}

.legend { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.legend__item { display: flex; align-items: center; gap: 5px; }
.legend__swatch { width: 9px; height: 9px; border-radius: 3px; }
.legend__label { font-size: 12px; color: var(--ink-2); }
.legend__count { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600; color: var(--ink-1); }

.ms { display: flex; align-items: center; gap: 9px; }
.ms__dot { width: 7px; height: 7px; border-radius: 99px; flex: none; }
.ms__label { font-size: 13px; }
.ms__date { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }

.log { padding: 10px 16px; display: flex; gap: 10px; box-shadow: inset 0 -1px 0 var(--row-rule); }
.log__date { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--ink-3); flex: none; width: 36px; }
.log__rule { width: 3px; border-radius: 99px; flex: none; }
.log__text { font-size: 13px; color: var(--ink-2); text-wrap: pretty; }

/* ── 훈련생 관리카드(화면 02) 전용 ─────────────────────── */

/* 이 화면의 대상이 아닌 계열 — 대메뉴에서 클릭 불가 */
.nav__track.is-off { opacity: .5; cursor: default; }

/* 리스트 행: 이름 · 취업처 · 상태 · 상담수 · 최근일 */
.row__company {
  font-size: 13px;
  color: var(--ink-2);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row__career { font-size: 12.5px; font-weight: 600; width: 52px; text-align: right; flex: none; }
.row__consults { font-size: 12.5px; color: var(--ink-3); width: 36px; text-align: right; flex: none; }
.row__lastat { font-size: 12.5px; color: var(--ink-3); width: 34px; text-align: right; flex: none; }

/* 취업 정보 카드의 값 칸 */
.row__ellipsis { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 상담 이력: 기존 .log 에 종류·기록자 칸을 더한다 */
.log__kind { font-size: 12.5px; font-weight: 600; width: 60px; flex: none; }
.log__by { font-size: 12.5px; color: var(--ink-3); flex: none; }
.card--table .log__text { flex: 1; }

/* ── 출결(화면 03) 전용 ─────────────────────────────────── */

/* 날짜 이동 — 좌우 화살표 + 라벨 */
.daynav {
  display: flex;
  align-items: center;
  gap: 1px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--control-bd);
  border-radius: 6px;
  background: var(--surface);
}

.daynav__btn {
  width: 26px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  color: var(--ink-2);
  font-size: 13px;
  text-decoration: none;
}

.daynav__btn:hover { background: var(--hover); color: var(--ink-1); text-decoration: none; }
.daynav__label { min-width: 96px; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--ink-1); }

/* 리스트 행: 이름 · 상태 · 입퇴실 · 출석률 바 · 원천 */
.row__state { font-size: 12.5px; font-weight: 600; width: 40px; flex: none; }
.row__inout { font-size: 12.5px; color: var(--ink-3); width: 96px; flex: none; white-space: nowrap; }
.row__src { font-size: 12px; width: 30px; text-align: right; flex: none; }

/* ── 실습 배정(화면 04) · 수납(화면 05) 전용 ─────────────── */

.row__period { font-size: 12.5px; color: var(--ink-3); width: 80px; flex: none; }
.row__doc { font-size: 12.5px; font-weight: 600; width: 30px; text-align: right; flex: none; }

/* 항목별 납부 점 — 리스트 행에 항목 수만큼 찍는다 */
.row__cells { display: flex; align-items: center; gap: 3px; flex: 1; min-width: 0; }
.row__cells i { width: 12px; height: 6px; border-radius: 2px; flex: none; }
.row__days { font-size: 12px; color: var(--ink-3); width: 30px; text-align: right; flex: none; }

/* ── 기준정보(화면 06) 전용 ──────────────────────────────── */

/* 헤더 탭 */
.tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 34px;
  margin-left: 10px;
  padding: 3px;
  border-radius: 8px;
  background: var(--cell-idle);
}

.tabs__item {
  height: 28px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}

.tabs__item.is-on {
  background: var(--surface);
  font-weight: 700;
  color: var(--ink-1);
  box-shadow: 0 1px 2px rgba(23, 21, 15, .12);
}

.tabs__count { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--ink-3); }

/* 두 줄짜리 리스트 행 (제목 + 설명) */
.mrow {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
}

.mrow:hover { background: var(--hover); }
.mrow.is-on { background: var(--selected); }
.mrow__dot { width: 5px; height: 5px; border-radius: 99px; flex: none; }
.mrow__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.mrow__title { font-size: 14px; font-weight: 500; color: var(--ink-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow.is-on .mrow__title { font-weight: 700; }
.mrow__sub { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow__meta { font-size: 12.5px; font-weight: 600; flex: none; }

/* 타일 값이 숫자가 아니면 모노를 풀어 준다 — 모노는 지표 숫자 전용 */
.tile__value--text { font-family: 'Pretendard', -apple-system, system-ui, sans-serif; letter-spacing: -.01em; }

/* ── 상세 탭 ─────────────────────────────────────────
   세그먼트 칩형으로 바꿨다(2026-09-11, 밑줄형 다음 3번째 시도) — macOS 설정창 세그먼트처럼
   회색 트랙 하나 안에 알약 칩 4개, 활성 칩만 흰 배경+옅은 그림자로 떠 오른다.
   트랙 배경은 새 색 없이 기존 --bar-track 을 쓴다. 폴더형·밑줄형과 달리 본문과 이어붙일
   경계가 없는 독립된 컨트롤이라 아래쪽에 별도 처리가 필요 없다. */
.dtabs-wrap{min-width:0}
.dtabs{display:flex;gap:2px;margin:18px 0 0;padding:3px;
  background:var(--bar-track);border-radius:9px}
.dtabs button{flex:1;background:none;border:0;border-radius:6px;text-align:center;
  font:inherit;font-size:13.5px;font-weight:500;color:var(--ink-3);
  padding:7px 18px;cursor:pointer;white-space:nowrap}
.dtabs button:hover{color:var(--ink-2)}
.dtabs button.is-on{background:#fff;color:var(--ink-1);font-weight:700;
  box-shadow:0 1px 3px rgba(23,21,15,.12)}

/* 요약 탭처럼 .cols 를 두 줄로 쌓는 패널은 block 이라 줄 사이 간격이 0이었다 —
   위 줄(이수시간·출결)에 아래 줄(수납 내역·상담 이력)이 바로 붙어 어색했다.
   flex column + gap 으로 패널 안 어떤 블록이 몇 개든 같은 간격을 준다. */
.dpanel{display:none;padding-top:18px}
.dpanel.is-on{display:flex;flex-direction:column;gap:16px}

/* 카드 폼 — hwp 훈련생 관리카드의 칸을 그대로 옮긴 것 */
/* 라벨+값 쌍을 한 줄에 둘씩. hwp 카드도 '이름|주민번호' 식 2열이다.
   한 줄을 다 쓰는 칸(주소·보유자격증 3칸 등)은 .wide 를 준다. */
.cardform{display:grid;grid-template-columns:104px minmax(0,1fr) 104px minmax(0,1fr);
  gap:8px 16px;align-items:start}
.cardform .wide{grid-column:2 / -1}
@media (max-width:1180px){
  .cardform{grid-template-columns:104px minmax(0,1fr)}
  .cardform .wide{grid-column:2 / -1}
}
.cardform label{color:#6E6759;font-size:12.5px;padding-top:8px}
.cardform .ro{padding:8px 0;border-bottom:1px solid #EFECE3;font-size:13.5px;color:#17150F}
.cardform input,.cardform select{width:100%;border:1px solid #E4E0D6;border-radius:3px;
  padding:7px 10px;font:inherit;font-size:13.5px;background:transparent;color:#17150F}
.cardform input:focus,.cardform select:focus{outline:none;border-color:#5A6B23}
.cardform input.is-blank{border-color:#DCCFA8}
.cardform .multi{display:flex;gap:8px}
.cardform .multi input{flex:1}
.cardform__note{grid-column:1 / -1;font-size:12px;color:#8A6108;margin-top:6px}
.cardform__sub{grid-column:1 / -1;margin:18px 0 2px;font-size:12.5px;font-weight:700;color:#5A6B23;
  letter-spacing:.04em;border-bottom:2px solid #EFF3E0;padding-bottom:5px}
/* margin-bottom을 안 쓴다 — 부모 .dpanel.is-on 의 flex gap이 카드 사이 간격을 이미 준다.
   margin-bottom을 같이 쓰면 flex gap에서는 마진이 안 겹쳐(collapse) 간격이 두 배로 벌어진다. */
.jobcard{border:1px solid #E4E0D6;border-radius:4px;padding:16px 18px}
.jobcard__head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.jobcard__head b{font-size:13.5px}
.jobcard__head .seq{font-size:11px;background:#EFF3E0;color:#5A6B23;border-radius:3px;padding:1px 8px}
.jobempty{border:1px dashed #D8D3C4;border-radius:4px;padding:28px;text-align:center;color:#8A857A;
  font-size:13px}

/* 목록에서 바로 수강생 추가 */
.btn-add{margin-left:auto;border:1px solid #D8D3C4;background:transparent;color:#4A463D;
  font:inherit;font-size:12px;padding:3px 9px;border-radius:3px;cursor:pointer;line-height:1.4}
.btn-add:hover{border-color:#5A6B23;color:#5A6B23}

/* 클릭해서 바로 고치는 값 */
.editable{cursor:text;border-bottom:1px dashed transparent;transition:border-color .12s}
.editable:hover{border-bottom-color:#C9C3B3}
.editable.is-editing{outline:none;border-bottom:1px solid #B35A36;background:#FFFCF8}

/* ── 상담 ─ 2026-09-11 CareNote(Views/Docs/Consultation.cshtml 가족사항 표)의
   "행 전체가 입력칸 + 오른쪽 × 삭제 + 위에 + 행 추가" 패턴을 참고해 다시 짰다.
   전에는 읽기 전용 이력 + 별도 새 기록 입력칸 두 구획이었다(수정·삭제 불가 사양) —
   지금은 과거 기록도 그 자리에서 바로 고치고 지운다. */
.consult-tbl-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.consult-tbl-head__label{font-size:13.5px;font-weight:700;color:var(--ink-1)}

.consult-tbl{width:100%;border-collapse:collapse;font-size:13px;
  border:1px solid var(--control-bd);border-radius:8px;overflow:hidden}
.consult-tbl th{background:#F5F3EC;border:1px solid var(--control-bd);padding:7px 10px;
  font-weight:600;color:#4A463D;font-size:12.5px;text-align:center;white-space:nowrap}
.consult-tbl td{border:1px solid var(--row-rule);padding:2px 3px;vertical-align:top}

/* 셀 안 입력칸 — 테두리 없이 셀에 꽉 채운다. 포커스 때만 옅게 배경을 준다. */
.consult-in{width:100%;border:0;outline:0;background:transparent;
  padding:7px 8px;font:inherit;font-size:13px;color:var(--ink-1);box-sizing:border-box}
.consult-in:focus{background:#FFFCF8}
.consult-ta{resize:vertical;line-height:1.55;min-height:38px}

.consult-del{background:none;border:0;cursor:pointer;color:#C9C3B3;
  font-size:16px;line-height:1;padding:6px;width:100%}
.consult-del:hover{color:#A83A44}

/* ── 실습 배정 — 기관에 배정된 학생 리스트 (2026-09-11 학생 중심 → 기관 중심 개편) ──
   .card--table 안에서만 쓴다 — 바깥 테두리는 카드가 이미 주므로 여기선 안 그린다.
   이슈 입력칸은 .consult-in을 그대로 재사용한다. */
.site-students{width:100%;border-collapse:collapse;font-size:13px}
.site-students th{background:#F5F3EC;padding:7px 10px;box-shadow:inset 0 -1px 0 var(--control-bd);
  font-weight:600;color:#4A463D;font-size:12.5px;text-align:left;white-space:nowrap}
.site-students td{padding:8px 10px;vertical-align:middle;box-shadow:inset 0 -1px 0 var(--row-rule)}
.site-students td.issue{padding:2px 3px} /* .consult-in이 자체 패딩을 가지므로 이중 여백을 뺀다 */
.site-students__empty{text-align:center;color:#8A857A;font-size:12.5px;padding:24px 0}

.consult-tbl__empty{text-align:center;color:#8A857A;font-size:12.5px;padding:16px 0}

/* ── 실습기관 목록(화면 06 실습기관 탭) — 상세 없이 표 하나 ───────────
   .card--table 안에서만 쓴다. 메모 칸은 .consult-in을 그대로 재사용한다. */
.site-table{width:100%;border-collapse:collapse;font-size:13px}
.site-table th{background:#F5F3EC;padding:7px 10px;box-shadow:inset 0 -1px 0 var(--control-bd);
  font-weight:600;color:#4A463D;font-size:12.5px;text-align:left;white-space:nowrap}
.site-table td{padding:8px 10px;vertical-align:middle;box-shadow:inset 0 -1px 0 var(--row-rule)}
.site-table td.issue{padding:2px 3px}

/* ── 수강생 명부 (인쇄 전용) ──────────────────────────
   화면에는 안 보인다. "수강생 명부"를 누르면 body 에 .mode-roster 가 붙고
   그때만 이 시트가 나온다. 관리카드 인쇄와 대상이 달라서 갈라 둔다. */
.roster-sheet{display:none}
.roster-sheet h1{font-size:16pt;text-align:center;margin:0 0 4px;letter-spacing:2px}
.roster-sheet__sub{display:flex;justify-content:space-between;font-size:9pt;color:#333;margin-bottom:8px}
.roster-sheet table{width:100%;border-collapse:collapse;font-size:8pt}
.roster-sheet th,.roster-sheet td{border:1px solid #555;padding:3px 5px;vertical-align:middle;
  word-break:break-all;line-height:1.35}
.roster-sheet th{background:#EEE;font-weight:600;text-align:center;white-space:nowrap}
.roster-sheet td.c{text-align:center;white-space:nowrap}
.roster-sheet__foot{margin-top:6px;font-size:8pt;color:#444;text-align:right}

@media print{
  /* 공통 — 화면 크롬은 안 찍는다 */
  .nav,.topbar,.panel-list,.dtabs,.detail__actions,.toast{display:none!important}

  /* 기본: 관리카드(선택한 학생) */
  body:not(.mode-roster) #rosterPrint{display:none!important}

  /* 수강생 명부 인쇄 */
  body.mode-roster .panel-detail,
  body.mode-roster .tiles,
  body.mode-roster .kpis,
  body.mode-roster .cols{display:none!important}
  body.mode-roster #rosterPrint{display:block!important}
  body.mode-roster{background:#fff}

  /* 명부는 칼럼이 11개라 가로로 찍는다 */
  @page roster{size:A4 landscape;margin:10mm}
  body.mode-roster #rosterPrint{page:roster}

  /* 지급대장 2종(교재및문제집 · 실습복) — 학생 명부와 같은 패턴, 기수 전원 한 장씩 */
  body:not(.mode-supply-book) #supplyBookPrint{display:none!important}
  body:not(.mode-supply-uniform) #supplyUniformPrint{display:none!important}
  body.mode-supply-book .panel-detail, body.mode-supply-book .tiles,
  body.mode-supply-book .kpis, body.mode-supply-book .cols,
  body.mode-supply-uniform .panel-detail, body.mode-supply-uniform .tiles,
  body.mode-supply-uniform .kpis, body.mode-supply-uniform .cols{display:none!important}
  body.mode-supply-book #supplyBookPrint,
  body.mode-supply-uniform #supplyUniformPrint{display:block!important}
  body.mode-supply-book, body.mode-supply-uniform{background:#fff}
  @page supplyLedger{size:A4 landscape;margin:10mm}
  body.mode-supply-book #supplyBookPrint,
  body.mode-supply-uniform #supplyUniformPrint{page:supplyLedger}
}

/* ── 오리엔테이션 — 인쇄물 목록 ─────────────────────────── */
.doc-page { padding: 22px; max-width: 720px; }
.doc-page__lead { font-size: 13.5px; color: var(--ink-3); margin-bottom: 16px; }
.doc-page__note { font-size: 12.5px; color: var(--ink-3); margin-top: 14px; }

.doc-card {
  background: var(--surface);
  border: 1px solid var(--card-bd);
  border-radius: 14px;
  overflow: hidden;
}

.doc-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--row-rule);
}
.doc-row:last-child { border-bottom: none; }

.doc-row__badge {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--cell-idle);
  color: var(--ink-2);
}
.doc-row__badge--hwp { background: #EAF0E0; color: #4A5A2C; }
.doc-row__badge--hwpx { background: #EAF0E0; color: #4A5A2C; }
.doc-row__badge--pptm, .doc-row__badge--pptx { background: #FCEAE0; color: #8A3F1C; }
.doc-row__badge--docx, .doc-row__badge--doc { background: #E4EDF5; color: #234A6E; }
.doc-row__badge--xlsx, .doc-row__badge--xls { background: #E9F4EA; color: #235A34; }
.doc-row__badge--pdf { background: #F5E4E4; color: #7A2323; }

.doc-row__body { flex: 1; min-width: 0; }
.doc-row__name { font-size: 14.5px; font-weight: 600; color: var(--ink-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-row__meta { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }

.doc-empty { padding: 60px 0; text-align: center; color: var(--ink-3); }

/* ── 홈 — 계열 4개 2×2 요약 카드 ──────────────────────────── */

.home-grid {
  flex: 1;
  padding: 22px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-content: start;
}

@media (max-width: 900px) {
  .home-grid { grid-template-columns: 1fr; }
}

.home-card {
  min-width: 0;
  border: 1px solid var(--card-bd);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.home-card__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.home-card__icon { width: 18px; height: 18px; object-fit: contain; flex: none; }
.home-card__head b { font-size: 15px; font-weight: 700; color: var(--ink-1); }
.home-card__status { font-size: 12.5px; font-weight: 600; }
.home-card__meta { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }

/* 홈 카드 안 타일은 4칸 고정 대신 남는 폭만큼 자동으로 나눈다(보수교육은 실습이 빠져 3장) */
.home-card .tiles { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }

.home-card__links { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; }
.home-card__link {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
  padding: 6px 10px;
  border: 1px solid var(--control-bd);
  border-radius: 99px;
}
.home-card__link:hover { color: var(--ink-1); border-color: var(--ink-2); }

.doc-empty span { font-size: 12px; }

/* ── 로그인 ─────────────────────────────────────────────── */

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  padding: 20px;
}

.login-card {
  width: 100%;
  max-width: 360px;
  border: 1px solid var(--card-bd);
  border-radius: 16px;
  padding: 34px 30px 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.login-logo {
  text-align: center;
  font-family: 'Mea Culpa', cursive;
  font-size: 36px;
  line-height: 1;
  letter-spacing: .1em;
  background: linear-gradient(100deg, #3F7A1E 0%, #6E8F14 26%, #C08A0A 54%, #C4571A 80%, #A82E2C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .3px #6E5A12;
  color: #3F7A1E;
}

.login-title { text-align: center; font-size: 14px; color: var(--ink-3); margin-top: -8px; }

.login-form { display: flex; flex-direction: column; gap: 12px; }

.login-field { display: flex; flex-direction: column; gap: 6px; }
.login-field label { font-size: 12.5px; color: var(--ink-3); }
.login-field input {
  height: 42px;
  padding: 0 13px;
  border: 1px solid var(--control-bd);
  border-radius: 6px;
  font-size: 14px;
  color: var(--ink-1);
  background: var(--surface);
}
.login-field input:focus { outline: none; border-color: var(--ink-1); }

.login-error {
  font-size: 12.5px;
  color: #A83A44;
  background: #FBEBEC;
  border-radius: 6px;
  padding: 9px 12px;
}

.login-submit {
  height: 42px;
  border: 0;
  border-radius: 6px;
  background: var(--accent-solid);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
}
.login-submit:hover { opacity: .92; }