@charset "UTF-8";
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1, h2, p { margin: 0; }
/* .field 등이 display 를 지정하면 브라우저 기본 hidden 이 덮이므로, hidden 속성은 항상 숨긴다 */
[hidden] { display: none !important; }

/* 관리자 셸: 좌측 사이드바(기본 펼침 240px, 접으면 64px 아이콘 레일) + 본문 */
:root { --sidebar-width: 240px; --sidebar-rail: 64px; }
.admin { display: flex; min-height: 100vh; }
.admin-main { flex: 1; min-width: 0; }
.sidebar {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-direction: column; flex: 0 0 var(--sidebar-width);
  width: var(--sidebar-width); height: 100vh; overflow: hidden;
  background: var(--color-surface); border-right: 1px solid var(--color-border);
  transition: width .18s ease, flex-basis .18s ease;
}
.sidebar__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 72px; padding: 0 var(--space-3) 0 var(--space-5); border-bottom: 1px solid var(--color-border); }
.sidebar__logo { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text); font-size: 1.125rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.sidebar__logo-mark { display: flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--color-primary); color: var(--color-olive); font-weight: 800; }
.sidebar__toggle { display: flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-muted); cursor: pointer; }
.sidebar__toggle:hover { background: var(--color-soft); color: var(--color-text); }
.sidebar__studio { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); }
.sidebar__studio form { margin: 0; }
.sidebar__studio-name { color: var(--color-olive); font-weight: 700; }
.sidebar__studio-badge { display: none; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 auto; border-radius: 50%; background: var(--color-olive-soft); color: var(--color-olive); font-weight: 700; }
.sidebar__nav { display: flex; flex: 1; flex-direction: column; gap: var(--space-1); padding: var(--space-5) var(--space-3); overflow-y: auto; }
.sidebar__item { display: flex; align-items: center; gap: var(--space-3); padding: 12px var(--space-4); border-radius: var(--radius-md); color: var(--color-text); font-size: var(--font-size-md); font-weight: 500; text-decoration: none; white-space: nowrap; }
.sidebar__item svg { flex: none; color: var(--color-muted); }
.sidebar__item:hover { background: var(--color-bg); }
.sidebar__item.is-active { background: var(--color-soft); color: var(--color-olive); font-weight: 700; }
.sidebar__item.is-active svg { color: var(--color-olive); }
.sidebar__item:focus-visible, .sidebar__toggle:focus-visible { outline: 2px solid var(--color-primary-hover); outline-offset: 2px; }
.sidebar__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); }
.sidebar__footer form { margin: 0; }
.sidebar__user { overflow: hidden; color: var(--color-muted); font-size: var(--font-size-sm); text-overflow: ellipsis; white-space: nowrap; }

html[data-sidebar="collapsed"] .sidebar { flex-basis: var(--sidebar-rail); width: var(--sidebar-rail); }
html[data-sidebar="collapsed"] .sidebar__label { display: none; }
html[data-sidebar="collapsed"] .sidebar__top { flex-direction: column; justify-content: center; gap: var(--space-2); padding: var(--space-4) 0; }
html[data-sidebar="collapsed"] .sidebar__toggle svg { transform: rotate(180deg); }
html[data-sidebar="collapsed"] .sidebar__studio { padding: var(--space-3) 0; }
html[data-sidebar="collapsed"] .sidebar__studio-badge { display: flex; }
html[data-sidebar="collapsed"] .sidebar__item { justify-content: center; padding: 12px 0; }
html[data-sidebar="collapsed"] .sidebar__footer { flex-direction: column; padding: var(--space-3) 0; }
.input--sm { height: 30px; font-size: var(--font-size-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

/* 페이지 */
.page { max-width: var(--content-max); margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-10); }
.page--narrow { max-width: 880px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.page-head__eyebrow { font-size: var(--font-size-xs); color: var(--color-muted); letter-spacing: .04em; }
.page-head__title { font-size: var(--font-size-xl); font-weight: 700; line-height: 1.3; }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow: hidden; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }

/* 버튼 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 38px; padding: 0 var(--space-4);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font: inherit; font-weight: 600; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--primary { background: var(--color-primary); color: var(--color-text); }
.btn--primary:hover:not(:disabled) { background: var(--color-primary-hover); }
.btn--secondary { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
.btn--secondary:hover:not(:disabled) { background: var(--color-soft); }
.btn--ghost { background: transparent; color: var(--color-muted); }
.btn--ghost:hover:not(:disabled) { background: var(--color-soft); color: var(--color-text); }
.btn--danger { background: var(--color-danger); color: #fff; }
.btn--danger-ghost { background: transparent; color: var(--color-danger); }
.btn--danger-ghost:hover { background: var(--color-danger-soft); }
.btn--sm { height: 30px; padding: 0 var(--space-3); font-size: var(--font-size-sm); }
.btn--lg { height: 46px; font-size: var(--font-size-md); }
.btn--block { width: 100%; }

/* 입력 */
.input {
  width: 100%; height: 38px; padding: 0 var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: inherit; font: inherit;
}
.input:focus { outline: 2px solid var(--color-primary); outline-offset: -1px; border-color: var(--color-primary-hover); }
.input.is-invalid { border-color: var(--color-danger); }
.input:disabled { background: var(--color-bg); color: var(--color-muted); }
.input--lg { height: 46px; font-size: var(--font-size-md); }
.input--num { max-width: 140px; margin-left: auto; text-align: right; }
.input--code { text-align: center; letter-spacing: .5em; font-size: var(--font-size-lg); }
.field { display: flex; flex: 1; flex-direction: column; gap: var(--space-1); }
.field__label { font-size: var(--font-size-sm); font-weight: 600; }
.field__label-row { display: flex; align-items: center; justify-content: space-between; }
.field__error { color: var(--color-danger); font-size: var(--font-size-xs); }

/* 폼 */
.form { display: flex; flex-direction: column; gap: var(--space-5); }
.card.form { padding: var(--space-6); overflow: visible; }
.form__fieldset { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; margin: 0; padding: 0; border: 0; }
.form__row { display: flex; gap: var(--space-4); }
.form__meta { color: var(--color-muted); font-size: var(--font-size-sm); }
.form__section { display: flex; flex-direction: column; gap: var(--space-3); }
.form__section-head { display: flex; align-items: baseline; justify-content: space-between; }
.form__section-title { font-size: var(--font-size-md); font-weight: 700; }
.form__hint { color: var(--color-muted); font-size: var(--font-size-xs); }
.form__actions { display: flex; justify-content: flex-end; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.search { display: flex; gap: var(--space-2); width: min(420px, 100%); }

/* 탭 */
.tabs { display: inline-flex; gap: var(--space-1); padding: var(--space-1); background: var(--color-soft); border-radius: var(--radius-full); }
.tabs__item { padding: var(--space-1) var(--space-4); border-radius: var(--radius-full); color: var(--color-muted); font-size: var(--font-size-sm); font-weight: 600; text-decoration: none; }
.tabs__item.is-active { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-card); }
.tabs__count { margin-left: 2px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.tabs__item.is-active .tabs__count { color: var(--color-olive); }
.member-filter { display: flex; gap: var(--space-2); }
.member-filter select.input { width: auto; min-width: 120px; }
.member-filter input.input { width: 220px; }
.badge--role { margin-right: var(--space-1); background: var(--color-soft); color: var(--color-text); }
.inline-form { display: inline; margin: 0; }
.invite-code { margin-bottom: var(--space-5); padding: var(--space-5) var(--space-6); border: 1px solid var(--color-primary-hover); border-radius: var(--radius-md); background: var(--color-warning-soft); }
.invite-code__value { margin: var(--space-2) 0; color: var(--color-text); font-size: 1.75rem; font-weight: 800; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.invite-code__hint { color: var(--color-muted); font-size: var(--font-size-sm); }
.radio-row { display: flex; gap: var(--space-5); }
.radio { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }

/* 표 */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: middle; }
.table th { background: var(--color-bg); color: var(--color-muted); font-size: var(--font-size-xs); font-weight: 600; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: #fcfdf6; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .actions { text-align: right; white-space: nowrap; }
.table--form td { padding: var(--space-2) var(--space-3); vertical-align: top; }
.link { color: var(--color-olive); font-weight: 600; text-decoration: none; }
.link:hover { text-decoration: underline; }

/* 배지 */
.badge { display: inline-block; padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: 600; }
.badge--upcoming { background: var(--color-warning-soft); color: #7a5d00; }
.badge--ongoing { background: var(--color-olive-soft); color: var(--color-olive); }
.badge--ended { background: var(--color-neutral-soft); color: var(--color-muted); }
.badge--notice { background: var(--color-olive-soft); color: var(--color-olive); }
.badge--event { background: var(--color-warning-soft); color: #7a5d00; }
.pinned-row { background: var(--color-soft); }
.sidebar__count { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: var(--radius-full); background: var(--color-olive); color: #fff; font-size: var(--font-size-xs); font-weight: 700; text-align: center; }
html[data-sidebar="collapsed"] .sidebar__count { display: none; }
.input--textarea { min-height: 240px; resize: vertical; line-height: 1.6; }
.field__count { text-align: right; }

/* 빈 상태 · 페이지 번호 */
.empty { padding: var(--space-10) var(--space-6); text-align: center; }
.empty__title { font-size: var(--font-size-md); font-weight: 700; }
.empty__desc { margin-top: var(--space-2); color: var(--color-muted); }
.pagination { display: flex; justify-content: center; gap: var(--space-1); margin-top: var(--space-6); }
.pagination__item { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 var(--space-2); border-radius: var(--radius-sm); color: var(--color-muted); text-decoration: none; }
.pagination__item:hover { background: var(--color-soft); }
.pagination__item.is-active { background: var(--color-primary); color: var(--color-text); font-weight: 700; }

/* 알림 · 모달 */
.flash-area { position: fixed; top: var(--space-6); right: var(--space-6); z-index: 20; display: flex; flex-direction: column; gap: var(--space-2); }
.toast { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); box-shadow: var(--shadow-modal); font-weight: 500; transition: opacity .3s; }
.toast--success { background: var(--color-olive); color: #fff; }
.toast--error { background: var(--color-danger-soft); color: var(--color-danger); border: 1px solid #ecc5bc; }
.toast.is-hidden { opacity: 0; pointer-events: none; }
.modal { width: min(420px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); }
.modal::backdrop { background: #333b2566; }
.modal__body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); }
.modal__title { font-size: var(--font-size-md); font-weight: 700; }
.modal__actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* 로그인 · 오류 */
.page-auth, .page-error { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--space-6); }
.auth-card, .error-card {
  display: flex; flex-direction: column; gap: var(--space-5);
  width: min(400px, 100%); padding: var(--space-8);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.auth-card__mark { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-olive); font-weight: 800; }
.auth-card__title { font-size: var(--font-size-lg); font-weight: 700; }
.auth-card__desc { color: var(--color-muted); }
.auth-card__resend { display: flex; justify-content: center; margin: 0; }
.auth-card__back { text-align: center; font-size: var(--font-size-sm); }
.page-auth .flash-area, .page-error .flash-area { position: static; }
.timer { color: var(--color-olive); font-weight: 700; font-variant-numeric: tabular-nums; }
.timer.is-expired { color: var(--color-danger); }
.error-card { align-items: center; text-align: center; }
.error-card__code { color: var(--color-primary-hover); font-size: 2.5rem; font-weight: 800; }
.error-card__title { font-size: var(--font-size-lg); font-weight: 700; }
.error-card__message, .error-card__trace { color: var(--color-muted); }
.error-card__trace { font-size: var(--font-size-xs); }

/* 관리자 WEB 은 PC(화면 너비 1024px 이상)에서만 쓴다. 더 좁으면 모든 화면을 안내로 덮는다(로그인·오류 화면 포함).
   내용은 숨기기만 하므로 htmx 세션 주기 확인은 계속 돌고, 창을 넓히면 원래 화면이 그대로 보인다.
   screen 한정: 인쇄(A4 폭 약 794px)에는 적용하지 않는다. 확대·OS 배율로 폭이 줄어든 PC 도 걸리므로 안내에 Ctrl+0 을 적는다. */
@media screen and (max-width: 1023.98px) {
  body > * { display: none !important; }
  body::before {
    content: "관리자 화면은 PC 웹 브라우저에서 이용해 주세요.\A화면 너비 1024px 이상에서 사용할 수 있어요.\A\A브라우저를 확대해 둔 경우 Ctrl+0(Mac은 ⌘+0)으로 원래 크기로 돌려 주세요.";
    white-space: pre-line;
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-6);
    background: var(--color-bg); color: var(--color-text);
    font-size: var(--font-size-md); font-weight: 600; line-height: 1.7; text-align: center;
  }
}

/* 수련생 상세 */
.detail-card { padding: var(--space-5) var(--space-6); }
.detail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: 0; }
.detail-list dt { color: var(--color-muted); font-size: var(--font-size-xs); }
.detail-list dd { margin: var(--space-1) 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.detail-section { margin-top: var(--space-8); }
.assign-form { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.assign-form select.input { width: 240px; }

/* 반복 입력 행(휴강일·강사) */
.repeat-row { align-items: center; margin-bottom: var(--space-2); }
.repeat-row .input[type="date"] { max-width: 200px; }