/* 01. 디자인 토큰 / 기본 요소 */
.page-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 88px;
  padding: 34px 16px;
  background: var(--canvas);
  color: var(--muted);
  font-size: 14px;
}
.page-loading-message {
  text-align: center;
  font-weight: 400;
}
.page-loading-spinner {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border: 3px solid var(--primary-soft);
  border-left-color: var(--primary);
  border-radius: 50%;
  animation: page-loading-spin 0.8s linear infinite;
}
@keyframes page-loading-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-loading-spinner {
    animation: none;
  }
}

/* 스케줄 실행 이력의 검색 배치와 긴 오류 메시지 표시 */
#schedule-executions-content .schedule-search {
  grid-template-columns:
    minmax(200px, 2fr) minmax(120px, 1fr) repeat(2, minmax(155px, 1fr))
    auto;
}
#schedule-executions-content .schedule-search .actions {
  grid-column: 5;
}
.schedule-period-help {
  grid-column: 1 / -1;
  margin: 0;
}
.schedule-execution-table .schedule-job {
  min-width: 180px;
  max-width: 260px;
  overflow-wrap: anywhere;
}
.schedule-job small {
  display: block;
  margin-top: 5px;
}
.schedule-time {
  white-space: nowrap;
}
.schedule-error {
  min-width: 125px;
  max-width: 360px;
  white-space: normal;
}
.schedule-error pre {
  min-width: 250px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  line-height: 1.6;
  margin: 12px 0;
}
.schedule-error .field-help {
  overflow-wrap: anywhere;
}
@media (max-width: 1200px) {
  #schedule-executions-content .schedule-search {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #schedule-executions-content .schedule-search .actions {
    grid-column: 2;
    justify-self: end;
  }
}
@media (max-width: 600px) {
  #schedule-executions-content .schedule-search {
    grid-template-columns: minmax(0, 1fr);
  }
  #schedule-executions-content .schedule-search .actions {
    grid-column: 1;
  }
}

:root {
  color-scheme: light;
  --canvas: #f5f6f8;
  --surface: #fff;
  --soft: #f9fafb;
  --line: #e6e8ed;
  --ink: #222630;
  --muted: #737b89;
  --primary: #6546ff;
  --primary-soft: #f0edff;
  --green: #187750;
  --green-soft: #eaf7f0;
  --red: #b83e50;
  --button-line: #d5d9e4;
  --button-danger: #c92f45;
  --button-danger-soft: #fff0f2;
  --button-danger-hover: #ffe1e6;
  --radius: 12px;
  --shadow: 0 3px 12px #20263805;
  font-family:
    Pretendard, "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  font-size: 13px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #171c22;
  --surface: #20262e;
  --soft: #282f38;
  --line: #39414d;
  --ink: #f1f3f7;
  --muted: #aab4c3;
  --primary-soft: #332955;
  --green: #80d5ae;
  --green-soft: #203e34;
  --button-line: #4b5565;
  --button-danger: #ff9aaa;
  --button-danger-soft: #412831;
  --button-danger-hover: #54303b;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  line-height: 1.6;
}
h1,
h2,
h3,
p {
  margin: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
button,
a {
  transition:
    background 0.15s,
    color 0.15s;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #ad9dff;
  outline-offset: 3px;
}
[hidden] {
  display: none !important;
}
svg.icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.muted {
  color: var(--muted);
}
.text-primary {
  color: var(--primary);
}
.required {
  color: var(--red);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.skip-link {
  position: fixed;
  left: 260px;
  top: -70px;
  z-index: 100;
  background: var(--surface);
  padding: 12px;
}
.skip-link:focus {
  top: 8px;
}
/* 02. 공통 셸 / 사이드 메뉴 */
.admin-shell {
  display: grid;
  grid-template-columns: 257.04px minmax(0, 1fr);
  min-height: 100vh;
}
.sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  background: #171c22;
  color: #edf0f6;
  padding: 25.2px 15.3px 18px;
  display: flex;
  flex-direction: column;
  z-index: 30;
}
.sidebar > .brand,
.sidebar > .workspace,
.sidebar > .sidebar-foot {
  flex-shrink: 0;
}
#admin-navigation {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: #626c7c #171c22;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 11px 26px;
}
.brand-word {
  font-size: 25px;
  letter-spacing: -1.5px;
  font-weight: 800;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--primary);
  color: white;
  border-radius: 9px;
  font-size: 20px;
  font-weight: 800;
}
.brand small {
  font-size: 9px;
  border: 1px solid #454b56;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 1px;
  color: #b6bdca;
  margin-left: auto;
}
.workspace {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 10.8px 9px;
  border: 1px solid #343a44;
  border-radius: 9px;
}
.workspace-icon {
  width: 28.8px;
  height: 28.8px;
  display: grid;
  place-items: center;
  background: #363048;
  color: #c7b9ff;
  border-radius: 7px;
}
.workspace strong {
  font-size: 11px;
}
.workspace small {
  display: block;
  font-size: 9px;
  color: #929cac;
}
.nav-label {
  margin: 24.3px 10.8px 8.1px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #929cac;
  font-weight: 500;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10.8px;
  font-size: 13px;
  color: #bcc4d1;
  border-radius: 7px;
  margin: 4px 0;
}
.nav-link:hover {
  background: #292e39;
  color: white;
}
.nav-link.active {
  background: var(--primary);
  color: white;
  font-weight: 600;
}
.nav-link .count {
  margin-left: auto;
  font-size: 9px;
  background: #ffffff1b;
  padding: 0 5.4px;
  border-radius: 4px;
}
.sidebar-foot {
  margin-top: auto;
  padding: 14.4px 9px 0;
  border-top: 1px solid #343a44;
  font-size: 9.9px;
  color: #929cac;
}
.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #9a85ff;
  border-radius: 50%;
  margin-right: 6px;
}
.sidebar .brand {
  gap: 8.1px;
  padding: 0 9.9px 23.4px;
}
.sidebar .brand-word {
  font-size: 22.5px;
  letter-spacing: -1.35px;
}
.sidebar .brand-mark {
  width: 27px;
  height: 27px;
  border-radius: 8.1px;
  font-size: 18px;
}
.sidebar .brand small {
  font-size: 8.1px;
  padding: 0.9px 4.5px;
  letter-spacing: 0.9px;
}
.sidebar svg.icon {
  width: 16px;
  height: 16px;
}
.sidebar .mi-icon {
  width: 18px;
  height: 18px;
}
.sidebar .dot {
  width: 5.4px;
  height: 5.4px;
  margin-right: 5.4px;
}
.main-area {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.content-region {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 195px;
}
.header {
  height: 70px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
  gap: 16px;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
}
.breadcrumb strong {
  font-weight: 600;
  color: var(--ink);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}
.header-profile {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
}
.avatar {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--primary-soft);
  color: var(--primary);
  border-radius: 10px;
  font-weight: 700;
  flex: none;
}
.avatar.alt {
  background: #eaf3ff;
  color: #4075ae;
}
.avatar.warm {
  background: #fff2e6;
  color: #b47845;
}
.mobile-toggle {
  display: none !important;
}
.content {
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 30px 36px 40px;
  flex: 1;
}
.footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 36px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  color: var(--muted);
}
.mock-note {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 20px;
}
.mock-note .badge {
  font-size: 9px;
  letter-spacing: 0.5px;
}
/* 03. 제목 / 액션 / 버튼 */
.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 25px;
}
.page-heading h1 {
  font-size: 27px;
  line-height: 1.4;
  letter-spacing: -1.1px;
  font-weight: 750;
}
.page-heading p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 7px;
}
.actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* 공통 액션 버튼: btn + 색상/크기 클래스 + data-btn-icon으로 조합합니다. */
.btn {
  display: inline-flex;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 39px;
  padding: 8px 14px;
  border: 1px solid var(--button-line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.btn:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--soft);
}
.btn-primary {
  color: white;
  background: var(--primary);
  border-color: var(--primary);
}
.btn-primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: #5334e6;
}
.btn-danger {
  color: var(--button-danger);
  background: var(--button-danger-soft);
  border-color: color-mix(in srgb, var(--button-danger) 45%, var(--button-danger-soft));
}
.btn-danger:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--button-danger-hover);
}
.btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}
.btn[data-btn-icon]::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background-color: currentColor;
  -webkit-mask: var(--button-icon) center / contain no-repeat;
  mask: var(--button-icon) center / contain no-repeat;
}
.btn[data-btn-icon="search"] {
  --button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E");
}
.btn[data-btn-icon="back"] {
  --button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5m7-7-7 7 7 7'/%3E%3C/svg%3E");
}
.btn[data-btn-icon="edit"] {
  --button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 3 5 5-12 12-6 1 1-6L16 3Zm-2 2 5 5'/%3E%3C/svg%3E");
}
.btn[data-btn-icon="manage"] {
  --button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
}
.btn[data-btn-icon="preview"] {
  --button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.btn[data-btn-icon="add"] {
  --button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.btn[data-btn-icon="delete"] {
  --button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M9 6V3h6v3M5 6l1 15h12l1-15M10 10v7m4-7v7'/%3E%3C/svg%3E");
}
.btn[data-btn-icon="save"] {
  --button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E");
}
.btn[data-btn-icon="copy"] {
  --button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='13' height='13' rx='2'/%3E%3Cpath d='M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3'/%3E%3C/svg%3E");
}
@media (forced-colors: active) {
  .btn[data-btn-icon]::before {
    background-color: ButtonText;
    forced-color-adjust: none;
  }
}
.btn-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
.btn-sm {
  min-height: 32px;
  font-size: 12px;
  padding: 4px 10px;
}
.btn-icon {
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
}
.link-button {
  border: 0;
  background: none;
  color: var(--primary);
  padding: 0;
  text-align: left;
  font-weight: 600;
}
.danger {
  color: var(--red);
}
/* 04. 카드 / 통계 / 안내 */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
  font-size:13px;
}
.panel-head h2,
.panel-head h3 {
  font-size: 14px;
  font-weight: 650;
}
.panel-body {
  padding: 22px;
  font-size:13px;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.stat {
  padding: 20px 22px;
  position: relative;
}
.stat-label {
  font-size: 12px;
  color: var(--muted);
}
.stat-value {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -1px;
  margin: 9px 0 3px;
  line-height: 1.3;
}
.stat-value small {
  font-size: 12px;
  font-weight: 400;
  margin-left: 5px;
  color: var(--muted);
}
.stat-note {
  font-size: 10px;
  color: var(--muted);
}
.stat-icon {
  position: absolute;
  right: 19px;
  top: 20px;
  background: var(--primary-soft);
  color: var(--primary);
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border-radius: 9px;
}
.callout {
  border: 1px solid #e4ddff;
  background: var(--primary-soft);
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.9;
  color: var(--ink);
}
.callout strong {
  display: block;
  font-size: 12px;
}
.split-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
/* 05. 입력 필드 / 검색 필터 / 스위치 */
.field-label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
}
.field,
.select,
textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  outline-offset: 1px;
}
.field::placeholder,
textarea::placeholder {
  color: #939ba9;
}
.field[readonly] {
  background: var(--soft);
}
textarea {
  resize: vertical;
  min-height: 92px;
}
.field-help {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.full {
  grid-column: 1/-1;
}
.filter-bar {
  display: flex;
  gap: 14px;
  align-items: end;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}
.filter-bar .field-label {
  flex: 1;
}
.filter-bar .search-field {
  flex: 2;
}
.search-wrap {
  position: relative;
}
.search-wrap .icon {
  position: absolute;
  left: 12px;
  top: 11px;
  color: var(--muted);
}
.search-wrap .field {
  padding-left: 38px;
}
.filter-bar .actions {
  flex-wrap: nowrap;
  padding-bottom: 1px;
}
.checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}
.switch {
  position: relative;
  display: inline-flex;
  width: 36px;
  height: 21px;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}
.switch span {
  width: 100%;
  background: #c5ccd5;
  border-radius: 20px;
  transition: background 0.2s;
}
.switch span:after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  top: 3px;
  left: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
}
.switch input:checked + span {
  background: var(--primary);
}
.switch input:checked + span:after {
  transform: translateX(15px);
}
.switch input:focus-visible + span {
  outline: 3px solid #ad9dff;
  outline-offset: 3px;
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  gap: 20px;
}
.setting-row p {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}
/* 06. 테이블 / 상태 배지 / 페이지 탐색 */
.table-wrap {
  overflow: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  white-space: nowrap;
  font-size: 12px;
}
th {
  padding: 12px 18px;
  background: var(--soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}
td {
  padding: 17px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
tbody tr:hover {
  background: var(--soft);
}
tbody tr:last-child td {
  border-bottom: 0;
}
.cell-person {
  display: flex;
  align-items: center;
  gap: 11px;
}
.cell-title {
  font-weight: 600;
  font-size: 12px;
}
.cell-sub {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 3px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}
.badge-green {
  background: var(--green-soft);
  color: var(--green);
}
.badge-purple {
  background: var(--primary-soft);
  color: var(--primary);
}
.badge-blue {
  background: #eaf3ff;
  color: #245fa8;
}
:root[data-theme="dark"] .badge-blue {
  background: #20354f;
  color: #95c4ff;
}
.badge-amber {
  background: #fff6e4;
  color: #94600b;
}
.badge-red {
  background: #fff0f1;
  color: #b83e50;
}
.table-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
}
.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.pagination-current {
  white-space: nowrap;
}
.empty-state {
  text-align: center;
  padding: 50px;
  color: var(--muted);
}
/* 출결 목록 및 현장 등록·기록 보정 팝업 */
#attendances-content .attendance-search {
  display: grid;
  grid-template-columns: minmax(160px, 1.4fr) repeat(3, minmax(100px, 1fr));
  gap: 16px;
  align-items: end;
}
#attendances-content .attendance-search .actions {
  grid-column: -2 / -1;
  justify-content: flex-end;
}
.unified-results .attendance-table {
  min-width: 1050px;
}
.attendance-table td {
  overflow-wrap: anywhere;
}
.attendance-table .class-list-attendance-time {
  min-width: 180px;
  width: 180px;
}
.attendance-time-pair {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 10px;
  line-height: 1.6;
}
.attendance-time-pair > span:nth-child(odd) {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.attendance-table small,
.attendance-history-dialog td small {
  display: block;
  margin-top: 5px;
}
.attendance-row-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  width: max-content;
}
.attendance-row-actions .btn {
  flex: none;
  justify-content: center;
}
.attendance-dialog {
  width: min(720px, calc(100% - 32px));
}
.attendance-dialog.attendance-history-dialog {
  width: min(1120px, calc(100% - 32px));
}
.attendance-dialog .dialog-head {
  position: sticky;
  top: 0;
  z-index: 2;
  gap: 16px;
  background: var(--surface);
}
.attendance-dialog .dialog-head > .btn {
  flex-shrink: 0;
}
.attendance-identity {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  margin: 0 0 20px;
  padding: 14px 16px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 8px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.attendance-identity dt {
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--muted);
}
.attendance-identity dd {
  margin: 0;
}
.attendance-identity .row-title {
  font-weight: 400;
  margin-bottom: 0;
}
.attendance-form-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.attendance-form-wide {
  grid-column: 1 / -1;
}
.attendance-form-fields .field-label {
  min-width: 0;
}
.attendance-dialog .dialog-actions {
  position: sticky;
  bottom: 0;
  background: var(--surface);
}
.attendance-dialog .field-error:not(:empty) {
  margin-top: 14px;
}
.attendance-history-dialog table {
  min-width: 900px;
}
.attendance-history-table th:first-child {
  width: 140px;
}
.attendance-history-table th:nth-child(2) {
  width: 235px;
}
.attendance-history-table th:last-child {
  width: 185px;
}
.attendance-history-dialog .attendance-history-table td:last-child {
  white-space: normal;
  overflow-wrap: anywhere;
}
.attendance-history-dialog .attendance-reason {
  min-width: 180px;
  max-width: 300px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
body:has(.attendance-dialog[open]) {
  overflow: hidden;
}
@media (max-width: 700px) {
  .attendance-identity,
  .attendance-form-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  #attendances-content .attendance-search {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #attendances-content .attendance-search > .field-label:first-child {
    grid-column: 1 / -1;
  }
  .attendance-dialog .dialog-head,
  .attendance-dialog .dialog-body,
  .attendance-dialog .dialog-actions {
    padding: 16px;
  }
}
/* 07. 공통 다이얼로그 / 토스트 */
dialog {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0;
  width: min(540px, calc(100% - 32px));
  max-height: 90dvh;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 24px 80px #11182730;
}
dialog::backdrop {
  background: #13192375;
  backdrop-filter: blur(3px);
}
.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}
.dialog-head h2 {
  font-size: 18px;
}
.dialog-body {
  padding: 24px;
}
/* 지점 교실·좌석 편집: 목록 위치를 유지하는 공통 입력 팝업 */
.classroom-timetable-field {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.classroom-timetable-field legend {
  padding: 0 6px;
  font-weight: 600;
}
.classroom-timetable-options {
  display: grid;
  gap: 10px;
  max-height: 220px;
  overflow-y: auto;
}
.classroom-timetable-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.classroom-timetable-option input {
  flex: none;
  margin-top: 4px;
}
.classroom-timetable-summary {
  margin: 0;
  padding-left: 16px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.classroom-timetable-cell {
  display: grid;
  gap: 8px;
  justify-items: start;
}
.seat-editor-dialog {
  width: min(760px, calc(100% - 32px));
  max-height: 90dvh;
  overflow: auto;
}
.seat-editor-dialog .dialog-head {
  position: sticky;
  top: 0;
  z-index: 1;
  gap: 16px;
  background: var(--surface);
}
.seat-editor-dialog .dialog-head .btn {
  flex-shrink: 0;
}
.seat-editor-dialog .dialog-body > .field-help {
  margin: 0 0 16px;
}
.seat-editor-dialog .dialog-actions {
  position: sticky;
  bottom: -24px;
  margin: 20px -24px -24px;
  background: var(--surface);
}
body:has(.seat-editor-dialog[open]) {
  overflow: hidden;
}
@media (max-width: 600px) {
  .seat-editor-dialog .form-grid {
    grid-template-columns: 1fr;
  }
  .seat-editor-dialog .dialog-head h2 {
    font-size: 16px;
  }
}
.dialog-actions {
  display: flex;
  justify-content: end;
  gap: 8px;
  padding: 17px 24px;
  border-top: 1px solid var(--line);
}
.toast {
  position: fixed;
  bottom: 26px;
  left: calc(50% + 128.52px);
  transform: translateX(-50%);
  background: #242b37;
  color: white;
  padding: 12px 20px;
  border-radius: 9px;
  box-shadow: 0 8px 28px #0002;
  font-size: 12px;
  z-index: 100;
  max-width: 90vw;
}
/* 08. 반응형 */
@media (max-width: 760px) {
  .sidebar {
    visibility: hidden;
    top: 62px;
    height: calc(100dvh - 62px);
  }
  .sidebar.open {
    visibility: visible;
  }
}
@media (min-width: 1600px) {
  .content {
    padding: 36px 48px;
  }
}
@media (max-width: 1100px) {
  .content {
    padding: 24px;
  }
  .header {
    padding: 0 24px;
  }
  .stat {
    padding: 17px;
  }
  .stat-icon {
    display: none;
  }
  .split-layout {
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .filter-bar {
    flex-wrap: wrap;
  }
  .filter-bar .search-field {
    flex-basis: 100%;
  }
}
@media (max-width: 760px) {
  .admin-shell {
    display: block;
  }
  .sidebar {
    position: fixed;
    width: 257.04px;
    left: -270px;
    transition: left 0.2s;
  }
  .sidebar.open {
    left: 0;
    box-shadow: 0 0 0 100vmax #0006;
  }
  .mobile-toggle {
    display: inline-flex !important;
  }
  .header {
    height: 62px;
    padding: 0 16px;
    position: relative;
    z-index: 31;
  }
  .header-profile strong,
  .header-actions > .badge,
  .breadcrumb > a,
  .breadcrumb > span {
    display: none;
  }
  .header-actions {
    gap: 8px;
  }
  .content {
    padding: 20px 16px;
  }
  .page-heading {
    align-items: start;
  }
  .page-heading h1 {
    font-size: 23px;
  }
  .page-heading p {
    max-width: 240px;
  }
  .page-heading > .btn {
    font-size: 0;
    width: 38px;
    padding: 0;
  }
  .page-heading > .btn .icon {
    width: 20px;
  }
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .stat-value {
    font-size: 25px;
  }
  .split-layout {
    grid-template-columns: 1fr;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .filter-bar {
    padding: 16px;
    gap: 10px;
  }
  .filter-bar .field-label {
    min-width: 110px;
  }
  .filter-bar .actions {
    margin-left: auto;
  }
  .panel-head {
    padding: 17px;
  }
  .footer {
    padding: 18px 16px;
  }
  .footer span:last-child {
    display: none;
  }
  .toast {
    left: 50%;
  }
  .table-footer {
    padding: 14px;
  }
  .mock-note {
    font-size: 10px;
  }
  .header .breadcrumb {
    gap: 8px;
  }
}

/* 공통 폼 및 탐색 하위 모듈 */
.choice-group {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.choice-group > label:has(.checkbox) {
  display: inline-flex;
  gap: 8px;
  margin: 10px 14px 0 0;
  align-items: center;
}
.nav-children {
  margin-left: 0;
}
/* 2뎁스 메뉴를 상위 메뉴보다 조금 들여써 계층을 구분합니다. */
.nav-node[data-depth="1"] > .nav-children {
  margin-left: 8px;
}
.nav-node[data-depth="2"] > .nav-children {
  margin: 7px 0 14px 16px;
}
.nav-row {
  display: flex;
  align-items: center;
  border-radius: 7px;
  margin: 4px 0;
}
.nav-row .nav-link {
  flex: 1;
  min-width: 0;
  margin: 0;
}
.nav-row .nav-label {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 10px 10.8px;
}
.nav-group {
  margin-top: 9px;
  margin-bottom: 9px;
}
button.nav-label {
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
button.nav-label:hover {
  background: rgba(255, 255, 255, 0.05);
}
.nav-row.ancestor:not(.nav-group) {
  background: #27233b;
  color: #b9aaff;
}
.nav-row.ancestor > .nav-link {
  color: inherit;
}
.nav-row.current {
  background: var(--primary);
  color: white;
}
.nav-fold {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #929cac;
  cursor: pointer;
}
.nav-row.current .nav-fold,
.nav-row.ancestor .nav-fold {
  color: inherit;
}
.nav-fold:hover {
  background: #ffffff0c;
}
.nav-fold svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
.nav-fold[aria-expanded="false"] svg {
  transform: rotate(-90deg);
}
.nav-node[data-depth="3"] > .nav-row .nav-link {
  font-size: 13px;
  min-height: 39px;
  gap: 9px;
  padding: 9px 10px;
}
.menu-common-marker {
  display: inline-block;
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
  margin: 0 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.65;
}
.active .menu-common-marker {
  opacity: 1;
}
.nav-children:empty {
  display: none;
}
.form-error {
  color: #c0392b;
  margin-top: 16px;
}
[hidden] {
  display: none !important;
}

/* 09. 목록 검색 / 상태 탭 / 결과 도구 */
.search-panel {
  margin-bottom: 20px;
}
.search-panel .panel-head {
  border-bottom: 0;
  padding-bottom: 0;
}
.search-grid {
  display: grid;
  grid-template-columns: 130px 160px minmax(180px, 1fr) auto;
  gap: 14px;
  align-items: end;
  padding: 18px 23px 23px;
}
.list-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 0 23px;
  min-height: 64px;
  border-bottom: 1px solid var(--line);
}
.status-tabs {
  display: flex;
  gap: 24px;
  align-self: stretch;
}
.status-tabs button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
}
.status-tabs button[aria-pressed="true"] {
  border-bottom-color: var(--primary);
  color: var(--primary);
  font-weight: 700;
}
.status-tabs button span {
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--soft);
  font-size: 11px;
}
.status-tabs button[aria-pressed="true"] span {
  background: var(--primary-soft);
}
.list-size {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 12px;
}
.list-size .select {
  width: 94px;
  min-height: 34px;
  padding: 5px 10px;
}
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.cell-title > .badge {
  margin-left: 7px;
  vertical-align: middle;
}
.panel-note {
  padding: 14px 23px;
  border-top: 1px solid var(--line);
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
  border-radius: 0 0 var(--radius) var(--radius);
}
.empty-state .actions {
  justify-content: center;
  margin-top: 16px;
}
.empty-state > .btn {
  margin-top: 16px;
}
.account-table th,
.account-table td {
  padding-top: 18px;
  padding-bottom: 18px;
}

/* 10. 페이지형 편집 / 역할 선택 / 접근 범위 미리보기 */
.editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 24px;
  align-items: start;
}
.panel-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.editor-aside {
  position: sticky;
  top: 20px;
}
.editor-layout .panel-head {
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.editor-layout .panel-head h2 {
  font-size: 16px;
}
.editor-layout .panel-body {
  padding: 24px;
}
.form-note {
  margin-top: 16px;
}
.lookup-bar {
  display: flex;
  gap: 12px;
  align-items: end;
  margin-bottom: 10px;
}
.lookup-bar .field-label {
  flex: 1;
  min-width: 0;
}
.member-results {
  margin-top: 16px;
}
.member-results:empty {
  display: none;
}
.member-results table {
  min-width: 400px;
}
.member-results + .callout {
  margin-top: 14px;
}
.role-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.role-option {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 9px;
  cursor: pointer;
  min-width: 0;
}
.role-option:has(:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.role-option input {
  flex: none;
  margin: 3px 0 0;
}
.role-option strong {
  display: block;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.role-option small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
  overflow-wrap: anywhere;
}
.permission-preview {
  margin-top: 20px;
  max-height: 420px;
  overflow-y: auto;
}
.permission-preview ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.permission-preview li {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.permission-preview li small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}
.editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  position: sticky;
  bottom: 12px;
  z-index: 5;
  padding: 17px 22px;
  margin-top: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 5px 24px #20263812;
}
.editor-actions .actions {
  flex: none;
}
.editor-actions .form-error {
  margin: 0 0 5px;
}
.editor-actions .form-error:empty {
  display: none;
}
.editor-layout input[aria-invalid="true"] {
  border-color: var(--red);
}
.editor-layout .password-wrap .field {
  padding-right: 64px;
}
.editor-layout .password-wrap .btn {
  position: absolute;
  right: 5px;
  top: 5px;
}
@media (max-width: 1250px) {
  .search-grid {
    grid-template-columns: 1fr 1fr;
  }
  .search-grid > button {
    justify-self: end;
    grid-column: 2;
  }
  .editor-layout {
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 18px;
  }
  .editor-layout .form-grid,
  .role-options {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 950px) {
  .editor-layout {
    grid-template-columns: 1fr;
  }
  .editor-aside {
    position: static;
  }
  .role-options {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .search-grid {
    grid-template-columns: 1fr;
    padding: 17px;
  }
  .search-grid > button {
    grid-column: auto;
    justify-self: stretch;
  }
  .list-toolbar {
    padding: 0 15px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .status-tabs {
    min-height: 56px;
    gap: 16px;
  }
  .list-size {
    padding-bottom: 12px;
    flex-wrap: wrap;
  }
  .role-options {
    grid-template-columns: 1fr;
  }
  .editor-layout .panel-body {
    padding: 18px;
  }
  .editor-actions {
    flex-wrap: wrap;
    padding: 14px;
    bottom: 6px;
  }
  .editor-actions .actions {
    margin-left: auto;
  }
  .lookup-bar {
    flex-wrap: wrap;
  }
  .table-footer {
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* 공통 입력 항목 오류 */
.field-error {
  margin: 6px 0 0;
  color: #b42318;
  font-size: 12px;
  line-height: 1.5;
}
.field[aria-invalid="true"],
.select[aria-invalid="true"] {
  border-color: #d92d20;
}

/* 11. 역할·권한 목록 / 권한 편집 / 상세 */
.roles-ui .page-heading {
  gap: 20px;
}
.roles-ui .page-heading .actions {
  flex-wrap: wrap;
  flex-shrink: 0;
}
.roles-ui .panel-head {
  gap: 12px;
  flex-wrap: wrap;
}
.roles-ui .panel-head h2 {
  font-size: 15px;
}
.roles-ui .panel-body {
  padding: 22px;
}
.role-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  align-items: start;
  gap: 24px;
}
.role-layout > * {
  min-width: 0;
}
.role-filter {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 145px 155px auto;
  align-items: end;
  gap: 16px;
  padding: 22px;
  margin-bottom: 24px;
}
.role-filter .field-label {
  min-width: 0;
}
.role-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: role-step;
}
.role-steps li {
  position: relative;
  padding-left: 34px;
  margin-top: 22px;
  counter-increment: role-step;
}
.role-steps li:first-child {
  margin-top: 0;
}
.role-steps li::before {
  content: counter(role-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 11px;
  color: var(--primary);
  background: var(--primary-soft);
  border-radius: 6px;
  padding: 2px 5px;
}
.role-steps strong {
  font-size: 12px;
}
.role-steps p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}
.roles-ui .stat-value small {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
  margin-left: 6px;
}
.role-table {
  min-width: 680px;
  width: 100%;
}
.role-table th,
.role-table td {
  padding: 18px 20px;
}
.role-table .btn,
.role-matrix .btn {
  min-height: 30px;
  padding: 4px 10px;
  font-size: 11px;
}
.role-identity {
  display: flex;
  align-items: center;
  gap: 10px;
}
.role-identity small {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
}
.role-name {
  font-weight: 700;
}
.role-name:hover,
.role-text-link:hover {
  color: var(--primary);
  text-decoration: underline;
}
.role-symbol {
  display: grid;
  place-items: center;
  width: 36px;
  height: 38px;
  flex: none;
  border-radius: 9px;
  font-size: 21px;
  background: var(--primary-soft);
  color: var(--primary);
}
.role-text-link {
  color: var(--primary);
  font-size: 12px;
}
.role-intro {
  margin-bottom: 22px;
}
.role-wide {
  grid-column: 1 / -1;
}
.roles-ui textarea {
  resize: vertical;
  min-height: 90px;
}
.role-status-note {
  align-self: center;
}
.role-tools {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 15px 22px;
  border-bottom: 1px solid var(--line);
}
.role-tools .field {
  flex: 1;
  min-width: 100px;
}
.role-tools label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
}
.role-matrix {
  width: 100%;
  min-width: 590px;
  table-layout: fixed;
}
.role-matrix th:first-child {
  width: 31%;
}
.role-matrix th:nth-child(2) {
  width: 20%;
}
.role-matrix th:nth-child(3) {
  width: 29%;
}
.role-matrix th:last-child {
  width: 20%;
}
.role-matrix td,
.role-matrix th {
  white-space: normal;
  padding: 15px 20px;
}
.role-matrix small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 4px;
}
.role-matrix strong {
  font-size: 12px;
}
.role-permission {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.role-permission .checkbox {
  flex: none;
}
.role-number {
  color: var(--primary);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.3;
}
.role-number small {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
}
.role-counts {
  display: flex;
  gap: 30px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.role-counts strong {
  display: block;
  font-size: 17px;
}
.role-counts span {
  color: var(--muted);
  font-size: 11px;
}
.role-diff {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-top: 12px;
}
.role-impact {
  margin-top: 22px;
}
.role-detail-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.role-detail-title h3 {
  font-size: 19px;
  overflow-wrap: anywhere;
}
.role-detail-title .badge {
  margin-left: auto;
  flex: none;
}
.role-description {
  margin-top: 20px;
  color: var(--muted);
  font-size: 13px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.role-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.role-meta dt {
  font-size: 11px;
  color: var(--muted);
}
.role-meta dd {
  font-size: 13px;
  margin: 5px 0 0;
}
.role-person {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.role-person:first-child {
  padding-top: 0;
}
.role-person:last-child {
  margin-bottom: 16px;
}
.role-person strong {
  display: block;
  font-size: 12px;
}
.role-person small {
  color: var(--muted);
  font-size: 11px;
}
.role-risk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
}
.role-risk h3 {
  font-size: 13px;
}
.role-risk p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 5px;
}
.role-risk .btn {
  flex: none;
}
.role-confirm {
  width: min(480px, calc(100% - 32px));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  color: var(--ink);
  background: var(--surface);
}
.role-confirm::backdrop {
  background: #10152266;
}
.role-confirm h2 {
  font-size: 19px;
}
.role-confirm p {
  font-size: 13px;
  margin-top: 15px;
  overflow-wrap: anywhere;
}
.role-confirm .actions {
  justify-content: flex-end;
  margin-top: 26px;
}
.role-confirm .form-error:empty {
  display: none;
}
.role-scroll-hint {
  display: none;
}
:root[data-theme="dark"] .roles-ui .role-number,
:root[data-theme="dark"] .roles-ui .role-text-link {
  color: #b6a7ff;
}
@media (max-width: 1200px) {
  .role-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .role-layout > aside {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: static;
  }
  .role-filter {
    grid-template-columns: minmax(160px, 1fr) 135px 145px;
  }
  .role-filter > .actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}
@media (max-width: 640px) {
  .roles-ui .page-heading {
    flex-direction: column;
  }
  .role-scroll-hint {
    display: block;
    font-size: 11px;
    color: var(--muted);
    padding: 10px 15px;
    border-bottom: 1px solid var(--line);
  }
  .roles-ui .page-heading p {
    max-width: none;
  }
  .role-filter {
    grid-template-columns: 1fr 1fr;
    padding: 17px;
  }
  .role-filter > .field-label:first-child {
    grid-column: 1 / -1;
  }
  .role-layout > aside {
    grid-template-columns: 1fr;
  }
  .role-meta {
    gap: 10px;
  }
  .role-tools {
    flex-wrap: wrap;
    padding: 15px;
  }
  .roles-ui .panel-body {
    padding: 18px;
  }
  .role-matrix th,
  .role-matrix td {
    padding: 14px;
  }
  .role-risk {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

/* 12. 메뉴 관리: 구조 탐색, 상세, 독립 편집 화면 */
.mi-icon {
  display: inline-block;
  width: var(--mi-size, 22px);
  height: var(--mi-size, 22px);
  flex-shrink: 0;
  vertical-align: middle;
}
.mi-mask {
  background-color: currentColor;
  mask-image: var(--mi-image);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: var(--mi-image);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}
.mi-empty {
  display: inline-block;
  width: 22px;
  text-align: center;
  color: var(--muted);
}
.nav-label .mi-icon {
  margin-right: 7.2px;
}
.mi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  padding: 20px;
  gap: 12px;
}
.mi-tile {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  padding: 20px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  min-width: 0;
}
.mi-tile .mi-icon {
  width: 30px;
  height: 30px;
  color: var(--primary);
}
.mi-tile strong,
.mi-tile small {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.mi-tile small {
  font-size: 11px;
  color: var(--muted);
}
.mi-tile.selected {
  background: var(--primary-soft);
  border-color: var(--primary);
}
.mi-large {
  padding: 28px;
  text-align: center;
  background: var(--soft);
  border-radius: 10px;
  margin-bottom: 20px;
  color: var(--primary);
}
.mi-large .mi-icon {
  width: 64px;
  height: 64px;
}
.mi-theme-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 22px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.mi-theme-preview > div {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 22px 8px;
  background: #f8fafc;
  color: #374151;
}
.mi-theme-preview > div:nth-child(2) {
  background: #20262e;
  color: #f1f3f7;
}
.mi-theme-preview > div:nth-child(3) {
  background: #f0edff;
  color: #6546ff;
}
.mi-theme-preview small {
  font-size: 10px;
}
.mi-size-preview {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.mi-size-preview > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.mi-size-preview small {
  color: var(--muted);
  font-size: 11px;
}
.mi-usage {
  list-style: none;
  padding: 0;
  margin: 16px 0;
}
.mi-usage li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 12px 0;
  overflow-wrap: anywhere;
}
.mi-usage a {
  color: var(--primary);
}
.mi-drop {
  padding: 22px;
  background: var(--soft);
  border: 1px dashed var(--line);
  border-radius: 10px;
}
.mi-drop p {
  margin: 10px 0;
  font-size: 12px;
  color: var(--muted);
}
.mi-drop input {
  display: block;
  max-width: 100%;
  margin-bottom: 16px;
}
.mi-dialog {
  width: min(800px, calc(100% - 28px));
  max-height: 85vh;
  padding: 0;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.mi-dialog::backdrop {
  background: #10152277;
}
.mi-picker-field {
  justify-content: flex-start;
  width: 100%;
}
.mi-picker-field > span:last-child {
  margin-left: auto;
  color: var(--muted);
}
.mi-picker-field .mn-glyph {
  height: 28px;
  width: 28px;
  flex-basis: 28px;
}
:root[data-theme="dark"] .mi-tile .mi-icon,
:root[data-theme="dark"] .mi-large,
:root[data-theme="dark"] .mi-usage a {
  color: #b6a7ff;
}
.menus-ui {
  min-width: 0;
}
.menus-ui .page-heading {
  gap: 18px;
}
.menus-ui .page-heading h1 {
  margin-top: 4px;
}
.mn-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
  gap: 22px;
  align-items: start;
}
.mn-workspace > * {
  min-width: 0;
}
.mn-filters {
  padding: 20px;
  border-bottom: 1px solid var(--line);
}
.mn-filters > div:first-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 10px;
}
.mn-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 11px;
}
.mn-tools > div {
  display: flex;
  gap: 5px;
}
.mn-tree {
  padding: 12px;
  min-height: 350px;
  max-height: 650px;
  overflow: auto;
}
.mn-tree ul,
.mn-preview-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mn-tree ul ul {
  margin-left: 18px;
  padding-left: 10px;
  border-left: 1px solid var(--line);
}
.mn-node {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  min-height: 56px;
  padding: 6px 10px;
  margin-bottom: 4px;
}
.mn-node:hover {
  background: var(--soft);
}
.mn-node.selected {
  background: var(--primary-soft);
  border-color: var(--primary);
}
.mn-node.context {
  opacity: 0.65;
}
.mn-node[draggable="true"] {
  cursor: grab;
  user-select: none;
}
.mn-drag-handle {
  color: var(--muted);
  flex: 0 0 20px;
  display: inline-grid;
  place-items: center;
  min-height: 36px;
  font-size: 20px;
  user-select: none;
}
.mn-node[draggable="false"] .mn-drag-handle {
  opacity: 0.3;
}
.mn-node.mn-dragging {
  opacity: 0.45;
}
.mn-node.mn-drop-before {
  box-shadow: 0 -3px 0 var(--primary);
  background: var(--primary-soft);
}
.mn-node.mn-drop-after {
  box-shadow: 0 3px 0 var(--primary);
  background: var(--primary-soft);
}
.mn-node.mn-drop-after:has(+ ul) {
  box-shadow: none;
}
.mn-node.mn-drop-after + ul {
  box-shadow: 0 3px 0 var(--primary);
}
.mn-node.mn-drop-inside {
  background: var(--primary-soft);
  outline: 2px dashed var(--primary);
  outline-offset: -2px;
}
.mn-root-drop {
  padding: 16px;
  margin: 8px 12px;
  border: 2px dashed var(--line);
  border-radius: 9px;
  color: var(--muted);
  text-align: center;
  font-size: 12px;
}
.mn-root-drop.mn-drop-inside {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}
.mn-drag-status {
  margin: 8px 12px;
  padding: 12px;
  border-radius: 9px;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 12px;
  min-height: 56px;
  overflow-wrap: anywhere;
}
.mn-move-fields {
  display: grid;
  gap: 10px;
  margin: 20px 0;
}
.mn-move-fields .select {
  width: 100%;
  min-width: 0;
}
.mn-move-fields .field-help {
  overflow-wrap: anywhere;
}
.mn-select {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 2px 0;
  text-align: left;
  cursor: pointer;
}
.mn-select strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
}
.mn-select small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 5px;
}
.mn-select strong,
.mn-select small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mn-fold {
  display: inline-grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  height: 26px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--muted);
  line-height: 1;
  cursor: pointer;
}
.mn-fold svg {
  display: block;
  width: 16px;
  height: 16px;
}
.mn-fold[aria-expanded="true"] svg {
  transform: rotate(90deg);
}
.mn-glyph {
  display: inline-grid;
  flex: 0 0 32px;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--primary);
  font-size: 20px;
}
.mn-trail {
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
  margin-bottom: 18px;
}
.mn-glyph svg {
  width: 19px;
  height: 19px;
}
.mn-identity .mn-glyph svg {
  width: 25px;
  height: 25px;
}
.mn-identity {
  display: flex;
  align-items: center;
  gap: 13px;
}
.mn-identity .mn-glyph {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
  font-size: 24px;
}
.mn-identity h3 {
  font-size: 20px;
  overflow-wrap: anywhere;
}
.mn-badges {
  display: flex;
  gap: 7px;
  margin: 20px 0;
}
.mn-meta {
  margin: 0;
}
.mn-meta > div {
  display: grid;
  grid-template-columns: 85px minmax(0, 1fr);
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
}
.mn-meta dt {
  color: var(--muted);
}
.mn-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.mn-position {
  padding: 20px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
}
.mn-footer {
  border-top: 1px solid var(--line);
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
#mn-detail .mn-footer {
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}
#mn-detail .mn-footer > .btn {
  min-width: 88px;
  height: 36px;
  padding: 0 12px;
  justify-content: center;
}
#mn-detail .mn-footer > a:last-child {
  margin-left: auto;
}
.mn-back {
  display: inline-block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 16px;
}
.mn-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.mn-check {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.mn-check input {
  accent-color: var(--primary);
}
.mn-form-preview {
  position: sticky;
  top: 20px;
}
#mn-live p {
  margin: 20px 0 12px;
  font-size: 12px;
  color: var(--muted);
}
.mn-dialog {
  width: min(510px, calc(100% - 32px));
  max-height: 85vh;
  overflow: auto;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}
.mn-dialog::backdrop {
  background: #10152277;
}
.mn-dialog h2 {
  font-size: 20px;
}
.mn-dialog p {
  margin: 18px 0;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.mn-dialog > .actions {
  justify-content: flex-end;
  margin-top: 24px;
}
.mn-impact {
  max-height: 190px;
  overflow: auto;
  padding: 14px 30px;
  background: var(--soft);
  border-radius: 8px;
  line-height: 2;
}
.mn-preview-tree {
  list-style: none;
  padding: 14px;
  background: var(--soft);
  border-radius: 10px;
}
.mn-preview-tree li {
  padding: 7px 0;
  overflow-wrap: anywhere;
}
.mn-preview-tree li > span {
  vertical-align: middle;
  margin-right: 8px;
}
.mn-preview-tree ul {
  padding-left: 22px;
}
.menus-ui .form-error:empty,
.mn-dialog .form-error:empty {
  display: none;
}
:root[data-theme="dark"] .mn-glyph {
  color: #b6a7ff;
}
@media (max-width: 1100px) {
  .mn-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
  .mn-form-preview {
    position: static;
  }
}
@media (max-width: 640px) {
  .menus-ui .page-heading {
    flex-direction: column;
    align-items: flex-start;
  }
  .menus-ui .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mn-filters {
    padding: 14px;
  }
  .mn-filters > div:first-child {
    grid-template-columns: minmax(0, 1fr);
  }
  .mn-tools {
    align-items: flex-start;
    flex-direction: column;
  }
  .mn-tree {
    padding: 6px;
  }
  .mn-node {
    padding: 6px 5px;
    gap: 5px;
  }
  .mn-node .mn-glyph {
    display: none;
  }
  .mn-tree ul ul {
    margin-left: 8px;
    padding-left: 5px;
  }
  .mn-position {
    flex-wrap: wrap;
  }
  .menus-ui .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 메뉴 영역과 관리자 역할 매핑 */
.area-section {
  margin-bottom: 24px;
}
.area-tabs {
  display: flex;
  gap: 28px;
  border-bottom: 1px solid var(--line);
}
.area-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 3px 16px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
}
.area-tab[aria-current="page"] {
  color: var(--primary);
}
.area-tab[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--primary);
}
.area-count {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 21px;
  border-radius: 6px;
  padding-inline: 6px;
  background: #e9ebf1;
  color: #7e8495;
  font-size: 11px;
}
.area-tab[aria-current="page"] .area-count {
  background: var(--primary-soft);
  color: var(--primary);
}
.area-description {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 17px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8;
}
.area-description strong {
  color: var(--ink);
  font-weight: 600;
}
.area-description .badge {
  white-space: nowrap;
}
.role-mapping-bar {
  margin-top: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  font-size: 12px;
}
.role-mapping-content {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}
.role-chips {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.role-chip {
  display: inline-flex;
  gap: 6px;
  padding: 5px 8px;
  background: var(--primary-soft);
  border-radius: 5px;
  color: var(--primary);
  font-size: 11px;
}
.role-chip code {
  font: inherit;
  opacity: 0.8;
}
.type-source {
  color: var(--muted);
  font-size: 11px;
  margin: 10px 0 16px;
}
.role-mapping-options {
  display: grid;
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 0;
}
.role-mapping-option {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
}
.role-mapping-option:has(input:checked) {
  background: var(--primary-soft);
  border-color: var(--primary);
}
.role-mapping-option input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}
.role-mapping-option strong {
  font-size: 12px;
  font-weight: 600;
}
.role-mapping-option code {
  color: var(--primary);
  margin-right: 6px;
}
.role-mapping-option small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}
.role-mapping-option .badge {
  margin-left: auto;
}
.role-mapping-summary {
  margin-top: 16px;
  padding: 12px;
  border-radius: 8px;
  background: var(--soft);
  font-size: 12px;
  line-height: 1.8;
}
.role-mapping-summary p {
  margin: 5px 0 0;
  color: var(--muted);
}
.role-mapping-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}
@media (max-width: 700px) {
  .role-mapping-bar {
    align-items: flex-start;
    flex-direction: column;
  }
  .role-mapping-option {
    gap: 8px;
  }
  .role-mapping-option .badge {
    font-size: 10px;
  }
}
.area-locked {
  padding: 14px 17px;
  margin-bottom: 22px;
  border: 1px solid #e2dcfc;
  border-radius: 9px;
  background: var(--primary-soft);
  color: #70648f;
  font-size: 12px;
  line-height: 1.9;
}
.area-locked strong {
  color: var(--primary);
}
/* 역할 목록에서 메뉴 권한을 빠르게 편집하는 대화상자 */
.role-list-layout {
  grid-template-columns: minmax(0, 1fr);
}
.role-list-layout > aside {
  display: none;
}
.role-menu-dialog {
  width: min(860px, calc(100vw - 32px));
  max-width: none;
  max-height: 90vh;
  padding: 0;
}
.role-menu-dialog .dialog-body {
  padding: 0;
  min-height: 0;
  overflow: auto;
}
.role-menu-dialog[open] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.role-menu-dialog .dialog-head,
.role-menu-dialog .dialog-actions {
  flex-shrink: 0;
}
.role-menu-dialog .dialog-head {
  padding: 22px;
}
.role-menu-dialog .dialog-head p {
  margin: 6px 0 0;
}
.role-menu-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}
.role-menu-toolbar .field {
  width: min(235px, 55%);
}
.role-menu-scroll {
  overflow: auto;
  max-height: 52vh;
}
.role-menu-matrix {
  min-width: 550px;
}
.role-menu-matrix th:first-child {
  width: auto;
}
.role-menu-matrix th:not(:first-child),
.role-menu-matrix td:not(:first-child) {
  text-align: center;
  width: 150px;
}
.role-menu-matrix td {
  padding: 15px 22px;
}
.role-menu-note {
  padding: 14px 22px;
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  background: var(--surface-soft, #f8f9fc);
}
.role-menu-dialog .dialog-actions {
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  margin: 0;
  border-top: 1px solid var(--line);
}
.role-menu-dialog > .form-error {
  margin: 0;
  padding: 0 22px;
}
.role-menu-discard {
  padding: 12px 22px;
  background: #fff8e8;
}
.role-menu-discard span {
  display: block;
  margin-bottom: 8px;
}
@media (max-width: 540px) {
  .role-menu-dialog .dialog-actions {
    flex-wrap: wrap;
    gap: 12px;
  }
  .role-menu-dialog .dialog-actions > .actions {
    margin-left: auto;
  }
}

/* 게시판 관리: 기존 공통 컴포넌트를 조합하는 화면 배치 */
.board-post-url {
  overflow-wrap: anywhere;
}
.post-table {
  min-width: 760px;
}
.post-body,
.post-summary {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.8;
}
.post-body {
  min-height: 180px;
  padding: 24px 0;
}
.post-summary {
  padding: 16px;
  background: var(--surface-soft);
  border-radius: var(--radius);
}
.post-section {
  margin: 20px 0;
}
#post-choose-files {
  margin-bottom: 16px;
}
.post-editor-fields,
.post-file-list {
  display: grid;
  gap: 18px;
}
.post-editor-fields[hidden] {
  display: none;
}
.post-attachment {
  display: grid;
  justify-items: start;
  gap: 10px;
  min-width: 0;
}
.post-attachment > a {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.post-attachment-preview {
  display: grid;
  place-items: center;
  width: min(100%, 320px);
  min-height: 120px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.post-attachment-preview img {
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
}
.post-file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.post-file-row > span,
.post-file-list > a {
  min-width: 0;
  overflow-wrap: anywhere;
}
.post-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.board-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.board-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.board-management-table {
  min-width: 790px;
}
.board-features {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 230px;
}
.board-category-summary {
  margin: 20px 0 8px;
}
.board-save-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.board-details {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  margin: 0 0 20px;
  font-size: 12px;
}
.board-details dt {
  color: var(--muted);
}
.board-details dd {
  margin: 0;
  text-align: right;
}
#board-category-dialog {
  width: min(640px, calc(100% - 32px));
}
.board-category-row,
.board-category-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px 85px 76px;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.board-category-head {
  margin-top: 18px;
  font-size: 11px;
  color: var(--muted);
}
.board-category-row .field {
  min-width: 0;
}
@media (max-width: 600px) {
  .board-save-bar {
    align-items: flex-start;
    flex-direction: column;
  }
  .board-save-bar .actions {
    align-self: flex-end;
  }
  .board-category-row,
  .board-category-head {
    grid-template-columns: minmax(0, 1fr) 55px 70px;
  }
  .board-category-row .btn {
    grid-column: 1 / -1;
    justify-self: end;
  }
  .board-category-row .field {
    padding: 8px 5px;
  }
}

/* 공통 리스트 템플릿: 검색 패널 / 결과 / 페이지 이동 */
.unified-search {
  margin-bottom: 24px;
}
.unified-search .search-heading {
  min-height: 62px;
  padding: 14px 22px;
}
.search-heading h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.search-heading-icon,
.search-reset-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.search-heading-icon {
  color: var(--muted);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M9 5h11M9 12h11M9 19h11M4 5h.01M4 12h.01M4 19h.01'/%3E%3C/svg%3E");
}
.search-reset-icon {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10a9 9 0 0 1 15-6l3 3M21 2v5h-5M21 14A9 9 0 0 1 6 20l-3-3M3 22v-5h5'/%3E%3C/svg%3E");
}
.search-heading .search-reset {
  color: var(--muted);
  font-weight: 400;
  gap: 6px;
}
.unified-search .filter-bar {
  border-bottom: 0;
  display: grid;
  grid-template-columns:
    minmax(240px, 2fr) minmax(150px, 1fr) minmax(150px, 1fr)
    auto;
  gap: 16px;
}
.unified-search .search-only {
  grid-template-columns:
    minmax(240px, 2fr) minmax(150px, 1fr) minmax(150px, 1fr)
    auto;
}
.unified-search .actions {
  grid-column: 4;
}
.unified-results > .panel-head {
  min-height: 81px;
  gap: 16px;
}
.unified-results > .panel-head h2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 15px;
}
.unified-results .list-options {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}
.unified-results .list-order {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.unified-results .list-options .select {
  width: auto;
  min-height: 40px;
  padding: 9px 12px;
}
.unified-results table {
  min-width: 850px;
}
.unified-results th {
  height: 44px;
  padding: 12px 18px;
}
.unified-results td {
  height: 76px;
  padding: 17px 18px;
}
.unified-results th:first-child,
.unified-results td:first-child {
  padding-left: 24px;
}
.unified-results td:last-child {
  white-space: nowrap;
}
.row-title {
  display: block;
  font-weight: 650;
  margin-bottom: 3px;
}
.row-sub {
  display: block;
  color: var(--muted);
  font-size: 11px;
}
.intake-list-table {
  min-width: 1080px;
}
.intake-list-table td:nth-child(2) {
  max-width: 240px;
  overflow-wrap: anywhere;
  white-space: normal;
}
.intake-list-table .intake-list-status {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.intake-list-table .intake-list-status > span:first-child {
  min-width: 38px;
  font-size: 12px;
}
.intake-list-table .intake-list-status + .intake-list-status {
  margin-top: 6px;
}
.unified-results .table-footer {
  min-height: 66px;
}
.unified-results .badge {
  margin: 2px 3px 2px 0;
}
.unified-empty {
  padding: 46px;
  text-align: center;
}
.unified-empty p {
  color: var(--muted);
  margin: 8px 0 18px;
}

.unified-search .filter-bar > .btn {
  grid-column: 4;
}
.unified-search .filter-bar > .field-label:first-child {
  grid-column: 1;
}
.unified-results .list-size {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.unified-results .list-size select {
  width: auto;
  min-width: 95px;
}
.unified-search .filter-bar > .field-label {
  min-width: 0;
}
.unified-search .filter-bar > .field-label:first-child {
  order: -1;
}
.unified-results .table-footer {
  gap: 16px;
}
@media (max-width: 1150px) {
  .unified-search .filter-bar {
    grid-template-columns: 2fr 1fr;
  }
  .unified-search .filter-bar > .btn,
  .unified-search .actions {
    grid-column: 2;
    justify-self: end;
  }
}
@media (max-width: 760px) {
  .unified-search .filter-bar {
    grid-template-columns: 1fr 1fr;
    padding: 18px;
  }
  .unified-search .filter-bar > .field-label:first-child {
    grid-column: 1 / -1;
  }
  .unified-search .filter-bar > .btn,
  .unified-search .actions {
    grid-column: 1 / -1;
    justify-self: end;
  }
  .unified-results .panel-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .unified-results .list-options {
    width: 100%;
    flex-wrap: wrap;
  }
}

/* 목록 현황 카드도 동일한 가로 폭과 간격을 사용합니다. */
#board-content .board-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: none;
}
.unified-results .field-error:empty,
#consult-create-error:empty {
  display: none;
}

/* 상담 대상 선택은 세 열만 사용하므로 모바일에서도 카드 폭 안에서 표시합니다. */
#consult-candidates table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
#consult-candidates th:last-child {
  width: 80px;
}
#consult-candidates td {
  white-space: normal;
  overflow-wrap: anywhere;
}
@media (max-width: 760px) {
  #board-content .board-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 검색 조건이 두 개이면 빈 세 번째 칸 없이 버튼 앞까지 채웁니다. */
@media (min-width: 1151px) {
  .unified-search .filter-bar:not(:has(> .field-label:nth-of-type(3))) {
    grid-template-columns: minmax(240px, 2fr) minmax(150px, 1fr) auto;
  }
  .unified-search
    .filter-bar:not(:has(> .field-label:nth-of-type(3)))
    > .actions,
  .unified-search .filter-bar:not(:has(> .field-label:nth-of-type(3))) > .btn {
    grid-column: 3;
  }
}

/* 서비스 약관 상세 / 편집 */
.terms-guide {
  margin-top: 18px;
}
.terms-editor-content {
  min-height: 380px;
  line-height: 1.8;
}

/* 게시글 HTML 본문과 Jodit 편집기: 모바일에서도 본문 영역 안에서 줄바꿈합니다. */
.post-body-html {
  white-space: normal;
  overflow-wrap: anywhere;
  overflow-x: auto;
}
.post-body-html p {
  margin: 0 0 1em;
}
.post-body-html ul,
.post-body-html ol {
  padding-left: 1.5em;
  list-style: revert;
}
.post-body-html table {
  border-collapse: collapse;
  max-width: 100%;
}
.post-body-html td,
.post-body-html th {
  border: 1px solid var(--line);
  padding: 8px;
}
#post-form .jodit-container,
#terms-editor .jodit-container {
  width: 100% !important;
  min-width: 0;
  color: var(--ink);
  font-weight: 400;
}
#post-form .jodit-workplace,
#terms-editor .jodit-workplace {
  overflow-wrap: anywhere;
}
#post-form .jodit-toolbar__box,
#terms-editor .jodit-toolbar__box {
  overflow-x: auto;
}

/* 도구 모음이 여러 줄로 바뀌어도 본문과 상태 표시줄을 에디터 높이 안에 배치합니다. */
#terms-editor .jodit-container {
  display: flex;
  flex-direction: column;
}
#terms-editor .jodit-toolbar__box,
#terms-editor .jodit-status-bar {
  flex-shrink: 0;
}
#terms-editor .jodit-workplace {
  flex: 1;
  min-height: 0 !important;
  height: auto !important;
}

.post-body-html img {
  max-width: 100%;
  height: auto;
}
.post-body-html {
  display: flow-root;
}

/* 게시글 댓글: 공통 패널·폼·버튼에 필요한 배치만 추가합니다. */
.comment-compose {
  border-bottom: 1px solid var(--line);
}
.comment-compose-actions,
.comment-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.comment-compose-actions {
  margin-top: 12px;
}
.comment-item {
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}
.comment-item:last-child {
  border-bottom: 0;
}
.comment-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.comment-content {
  margin-top: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.8;
}
.comment-error:not(:empty) {
  padding: 0 22px 16px;
}
@media (max-width: 600px) {
  .comment-compose-actions .actions,
  .comment-item-head .actions {
    margin-left: auto;
  }
  .comment-item {
    padding: 18px;
  }
}

/* 역할 권한 팝업·상세는 같은 메뉴 계층 들여쓰기를 사용합니다. */
.role-menu-label {
  padding-left: calc(var(--menu-depth, 0) * 16px);
}
.role-menu-matrix tr[data-menu-depth="1"] .role-menu-label strong {
  font-weight: 700;
}
/* 지점 관리: 공통 목록·폼 스타일을 보완하는 업무 레이아웃 */
.branch-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.branch-stat {
  padding: 22px;
  margin-bottom: 0;
}
.branch-stat strong {
  display: block;
  font-size: 28px;
  margin-top: 8px;
}
.branch-stat small {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}
.branch-secondary {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 5px;
}
.branch-name {
  font-weight: 600;
}
.branch-address-cell {
  max-width: 280px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.branch-fieldset {
  display: grid;
  gap: 24px;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.branch-fields,
.branch-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 28px;
}
.branch-fields {
  padding: 24px;
}
.branch-fields .full {
  grid-column: 1 / -1;
}
.branch-fields .field,
.branch-fields .select {
  width: 100%;
}
.branch-fields input[readonly] {
  background: var(--soft);
  color: var(--muted);
}
.branch-required {
  color: var(--primary);
}
/* 상세 카드 간격은 panel-stack, 내부 여백은 panel-body 공통 규칙을 따릅니다. */
.branch-details {
  margin: 0;
}
.branch-details dt {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 7px;
}
.branch-details dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.admin-address-toolbar {
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}
.admin-address-toolbar .field-help {
  margin-top: 10px;
}
.address-dialog,
.branch-delete-dialog {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
  background: var(--surface);
  color: var(--ink);
  width: 540px;
  max-width: calc(100vw - 32px);
}
.address-dialog::backdrop,
.branch-delete-dialog::backdrop {
  background: #151c3066;
}
.address-dialog-header {
  justify-content: space-between;
  margin-bottom: 12px;
}
.postcode-host {
  height: min(480px, 65vh);
  min-height: 300px;
}
.branch-delete-dialog .actions {
  justify-content: flex-end;
  margin-top: 22px;
}
@media (max-width: 700px) {
  .branch-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .branch-fields,
  .branch-details {
    grid-template-columns: 1fr;
    padding: 18px;
  }
}

/* 회원 관리: 확정 목업의 목록·편집·상세 컴포넌트 */
@media (min-width: 681px) {
    #members-content[data-type="PARENT"] .unified-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (min-width: 1101px) {
    #members-content[data-type="PARENT"] .member-filters {
        grid-template-columns: minmax(220px, 2fr) minmax(110px, 1fr) auto;
    }
}
#members-content,
.admin-plan-timetable {
    .child-picker {
        width: calc(100% - 32px);
        max-width: 760px;
        max-height: 85vh;
        overflow-y: auto;
    }
    .child-picker-heading,
    .child-picker-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .child-picker-footer {
        margin-top: 20px;
        padding-top: 16px;
        border-top: 1px solid var(--line);
    }
    .child-picker .child-search-empty {
        margin: 0;
        padding: 20px 12px;
        text-align: center;
        font-size: 12px;
    }
    .child-picker [aria-pressed="true"] {
        color: var(--primary);
        border-color: var(--primary);
    }
    .child-search {
        display: flex;
        align-items: end;
        gap: 12px;
        margin-top: 24px;
    }
    .child-search .member-field {
        flex: 1;
        min-width: 0;
    }
    .child-alias {
        margin: 16px 0;
        max-width: 320px;
    }
    .unified-summary {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
        margin-bottom: 24px;
    }
    .unified-summary article {
        padding: 18px 22px;
    }
    .unified-summary strong {
        display: block;
        margin-top: 5px;
        font-size: 26px;
    }
    .unified-summary small {
        margin-left: 5px;
        color: var(--muted);
        font-size: 12px;
    }
    .member-editor,
    .member-detail {
        max-width: 1080px;
        margin: 0 auto;
    }
    .member-detail .member-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
        padding: 28px;
    }
    .member-password-reset {
        padding: 24px 28px;
        border-top: 1px solid var(--line);
    }
    .member-usage-filters {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        align-items: end;
        gap: 16px;
        margin: 20px 0;
    }
    #usage-results table {
        min-width: 1400px;
    }
    .member-password-reset-controls {
        display: flex;
        align-items: flex-end;
        flex-wrap: wrap;
        gap: 12px;
    }
    .member-password-reset-controls .member-field {
        flex: 0 1 360px;
        min-width: 0;
        max-width: 100%;
    }
    .member-password-reset-controls .btn {
        flex-shrink: 0;
        min-height: 40px;
    }
    .member-password-reset-value {
        width: 360px;
        max-width: 100%;
        margin-top: 16px;
    }
.member-id-check {
  display: flex;
  align-items: center;
  gap: 8px;
}

.member-id-check input {
  flex: 1;
  min-width: 0;
}

.member-id-check .btn {
  flex-shrink: 0;
}

.member-password-preview {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    #password-reset-value,
    #branch-registration-password {
        font-weight: 400;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }
    .member-password-reset .field-help,
    .member-password-reset .member-error {
        margin: 10px 0 0;
        line-height: 1.6;
    }
    .member-password-reset .member-error:empty {
        display: none;
    }
    &.member-detail-page .member-detail {
        max-width: none;
    }
    .member-tab-panel,
    .member-plan-detail {
        min-width: 0;
    }
    .member-tab-panel > .page-heading h2 {
        margin: 0;
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -0.6px;
    }
    .member-detail-tabs {
        margin-top: 4px;
    }
    .member-plan-schedules {
        max-height: 440px;
        overflow: auto;
    }
    .member-plan-schedules thead th {
        position: sticky;
        top: 0;
        z-index: 1;
    }
    .member-timetable-form {
        display: flex;
        align-items: flex-end;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 16px;
    }
    .member-timetable-form .member-field {
        flex: 1 1 240px;
        max-width: 480px;
    }
    .member-timetable-preview-summary {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        padding: 22px 0;
        border-top: 1px solid var(--line);
    }
    .member-timetable-preview-summary h3 {
        grid-column: 1 / -1;
        margin: 0;
        font-size: 15px;
    }
    .member-form-caption {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;
        color: var(--muted);
        font-size: 12px;
    }
    .member-section-heading p {
        margin: 5px 0 0;
        color: var(--muted);
        font-size: 12px;
        font-weight: 400;
    }
    .member-editor .member-editor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
        padding: 28px;
    }
    .member-editor .member-field input,
    .member-editor .member-field select {
        min-height: 44px;
        font-weight: 400;
    }
    .member-editor input::placeholder,
    .member-editor textarea::placeholder {
        color: var(--muted);
        font-size: 12px;
        font-weight: 400;
    }
    .member-editor .branch-row {
        padding: 24px 28px;
        border-bottom: 1px solid var(--line);
    }
    .member-editor .branch-row-single {
        grid-template-columns: minmax(0, 1fr);
    }
    .member-editor .branch-row:last-child {
        border-bottom: 0;
    }
    .member-additional summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
        padding: 22px 28px;
        cursor: pointer;
        font-weight: 600;
    }
    .member-additional summary::after {
        content: "⌄";
        color: var(--muted);
    }
    .member-additional[open] summary::after {
        transform: rotate(180deg);
    }
    .member-additional summary small {
        margin-left: 8px;
        color: var(--muted);
        font-size: 12px;
        font-weight: 400;
    }
    .member-additional[open] summary {
        border-bottom: 1px solid var(--line);
    }
    .member-editor-save {
        padding: 20px 0;
        border-top: 1px solid var(--line);
    }
    .member-filters {
        display: grid;
        grid-template-columns: 2fr repeat(2, 1fr) auto;
        align-items: end;
        gap: 16px;
        padding: 22px;
    }
    .member-filters-with-position {
        grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(110px, 1fr)) auto;
    }
    .member-filters label,
    .member-field {
        display: flex;
        flex-direction: column;
        gap: 8px;
        font-size: 13px;
        font-weight: 600;
    }
    .member-filters input,
    .member-filters select,
    .member-field input,
    .member-field select,
    .member-field textarea,
    .branch-row select,
    .branch-row input {
        width: 100%;
        min-width: 0;
        padding: 10px 12px;
        border: 1px solid var(--button-line);
        border-radius: 7px;
        background: var(--surface);
        color: var(--ink);
        font: inherit;
    }
    .member-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
        padding: 24px;
    }
    .member-field textarea {
        min-height: 100px;
        resize: vertical;
    }
    .member-wide {
        grid-column: 1 / -1;
    }
    .member-panel {
        margin-bottom: 22px;
    }
    .member-table {
        overflow-x: auto;
    }
    .member-table table {
        width: 100%;
        white-space: nowrap;
    }
    .member-table td small,
    .member-table td .muted {
        display: block;
        font-size: 12px;
        margin-top: 3px;
    }
    .member-name {
        color: var(--ink);
        font-weight: 700;
    }
    .member-name:hover {
        color: var(--primary);
        text-decoration: underline;
    }
    .member-badge {
        display: inline-flex;
        padding: 3px 9px;
        border-radius: 5px;
        font-size: 12px;
        background: var(--soft);
        color: var(--muted);
    }
    .member-badge.active {
        color: var(--green);
        background: var(--green-soft);
    }
    .member-badge.parent {
        color: var(--primary);
        background: var(--primary-soft);
    }
    .member-badge.deleted {
        color: var(--red);
        background: var(--button-danger-soft);
    }
    .member-save {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 20px 22px;
    }
    .member-save {
        padding: 18px 0;
    }
    .member-overview {
        display: flex;
        align-items: center;
        gap: 18px;
        padding: 24px;
    }
    .member-avatar {
        display: grid;
        place-items: center;
        width: 56px;
        height: 56px;
        background: var(--primary-soft);
        color: var(--primary);
        border-radius: 16px;
        font-size: 22px;
        font-weight: 700;
    }
    .member-meta {
        margin: 0;
    }
    .member-meta:not(.admin-detail) dt {
        color: var(--muted);
        font-size: 12px;
        margin-bottom: 8px;
    }
    .member-meta:not(.admin-detail) dd {
        margin: 0;
        overflow-wrap: anywhere;
        white-space: pre-wrap;
    }
    .branch-row {
        display: grid;
        grid-template-columns: 1fr 140px 2fr auto;
        gap: 14px;
        align-items: end;
        padding: 0 24px 20px;
    }
    .member-empty {
        padding: 60px 24px;
        text-align: center;
        color: var(--muted);
    }
    .member-error {
        color: var(--red);
        margin-bottom: 16px;
    }
    #notice {
        position: fixed;
        bottom: 28px;
        right: 28px;
        padding: 14px 24px;
        color: white;
        background: #26233b;
        border-radius: 10px;
        z-index: 10;
    }
    dialog:not(.admin-member-picker, .member-relation-dialog, .member-learning-dialog, .attendance-dialog) {
        max-width: 460px;
        width: calc(100% - 32px);
        padding: 28px;
        border: 0;
        border-radius: 14px;
        box-shadow: 0 20px 80px #0003;
    }
    dialog::backdrop {
        background: #171c2266;
    }
    dialog:not(.admin-member-picker, .member-relation-dialog, .member-learning-dialog, .attendance-dialog) p {
        margin: 16px 0 24px;
        line-height: 1.8;
    }
    :focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 3px;
    }
    @media (max-width: 1300px) {
        .member-filters-with-position {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
    @media (max-width: 1100px) {
        .member-filters {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .member-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
    @media (max-width: 680px) {
        .member-editor .member-editor-grid,
        .member-detail .member-grid {
            grid-template-columns: 1fr;
            padding: 20px;
        }
        .member-grid,
        .member-filters,
        .branch-row {
            grid-template-columns: 1fr;
        }
        .unified-summary {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .member-save {
            flex-wrap: wrap;
        }
        .page-heading {
            gap: 14px;
        }
    }

}

/* 시간표 관리 */
.tt-stack {
  display: grid;
  gap: 24px;
}
.tt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.tt-grid label {
  display: grid;
  gap: 8px;
}
.tt-grid .wide {
  grid-column: span 2;
}
.tt-grid .field,
.tt-grid .select {
  width: 100%;
}
.tt-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.tt-summary article {
  padding: 18px 22px;
}
.tt-summary strong {
  display: block;
  font-size: 26px;
}
.tt-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(130px, 1fr));
  gap: 12px;
  min-width: 1000px;
}
.tt-day {
  background: var(--soft);
  border-radius: 10px;
  padding: 12px;
  min-height: 210px;
}
.tt-day h3 {
  font-size: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
.tt-slot {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding: 12px 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: 6px;
  background: var(--surface);
  overflow-wrap: anywhere;
}
.tt-slot small {
  color: var(--muted);
  font-size: 11px;
}
.tt-slot.inactive {
  border-left-color: var(--muted);
  opacity: 0.65;
}
.tt-scroll {
  overflow-x: auto;
}
.tt-rows {
  min-width: 790px;
}
.tt-rows .field,
.tt-rows .select {
  width: 100%;
  min-width: 95px;
}
.tt-rows td:nth-child(2) {
  width: 25%;
}
.tt-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
}
.tt-save {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.tt-info {
  padding: 14px 20px;
  background: var(--primary-soft);
  color: var(--primary);
  border-radius: 8px;
}
.tt-operating-days {
  min-width: 190px;
  width: 23%;
  white-space: nowrap;
}

.tt-name {
  color: var(--primary);
  font-weight: 600;
}
.tt-classroom-cell {
  min-width: 180px;
}
.tt-classroom-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: normal;
  overflow-wrap: anywhere;
}
.tt-classroom-list li {
  display: grid;
  gap: 4px;
}
.tt-classroom-list .field-help {
  margin: 0;
}
#timetables-content .unified-search .search-reset {
  border-color: transparent;
  background: transparent;
}
.tt-error {
  color: var(--red);
}
.tt-metadata dt {
  color: var(--ink);
  font-size: 12px;
  font-weight: bold;
}
.tt-metadata dd {
  margin: 6px 0 0;
}
@media (max-width: 760px) {
  .tt-grid,
  .tt-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tt-grid .wide {
    grid-column: 1 / -1;
  }
  .tt-save,
  #timetables-content .page-heading,
  #timetables-content .panel-head {
    flex-wrap: wrap;
  }
  #timetables-content .unified-search .filter-bar {
    grid-template-columns: 1fr;
  }
  #timetables-content .unified-search .actions {
    grid-column: auto;
  }
}

.tt-confirm {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px;
  width: min(440px, calc(100% - 32px));
  background: var(--surface);
  color: var(--ink);
}
.tt-confirm p { margin: 14px 0 24px; }
.tt-confirm::backdrop { background: #12182777; }

#onsite-cancel-dialog {
  width: min(540px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

#onsite-cancel-dialog .admin-detail {
  margin-bottom: 24px;
}

#onsite-cancel-dialog .actions {
  margin-top: 24px;
}

#onsite-cancel-dialog textarea {
  resize: vertical;
  min-height: 88px;
}
#timetables-content .unified-search { margin-bottom: 24px; }
#timetables-content .filter-bar {
  display: grid;
  grid-template-columns: minmax(180px, 2fr) minmax(120px, 1fr) minmax(120px, 1fr) auto;
  gap: 16px;
}
#timetables-content .filter-bar .field,
#timetables-content .filter-bar .select { width: 100%; }
#timetables-content .unified-search .filter-bar > .actions {
  grid-column: 4;
}
@media (max-width: 900px) {
  #timetables-content .filter-bar { grid-template-columns: 1fr 1fr; }
  #timetables-content .unified-search .filter-bar > .actions {
    grid-column: 2;
  }
}
@media (max-width: 600px) {
  #timetables-content .filter-bar { grid-template-columns: 1fr; }
  #timetables-content .unified-search .filter-bar > .actions {
    grid-column: 1;
  }
}
/* 지점 방학 관리 */
.bv-memo {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bv-label {
  display: grid;
  gap: 8px;
}
.bv-label textarea {
  width: 100%;
  resize: vertical;
}
.bv-duration {
  grid-column: 1 / -1;
  color: var(--primary);
  background: var(--primary-soft);
  border-radius: 8px;
  padding: 14px 18px;
}
.bv-delete {
  justify-content: flex-end;
}
#branch-vacations-content .filter-bar {
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
}
#branch-vacations-content .unified-search .filter-bar > .actions {
  grid-column: auto;
  justify-self: end;
}
@media (max-width: 1000px) {
  #branch-vacations-content .filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #branch-vacations-content .unified-search .filter-bar > .actions {
    grid-column: 1 / -1;
  }
}
@media (max-width: 600px) {
  #branch-vacations-content .filter-bar,
  #branch-vacations-content .tt-grid {
    grid-template-columns: 1fr;
  }
}

/* 요금제 관리 */
.plan-seat-dialog {
  width: min(760px, calc(100% - 32px));
}
.plan-seat-dialog .dialog-body {
  max-height: 65vh;
  overflow: auto;
}
.plan-seat-dialog h2 {
  overflow-wrap: anywhere;
}
.plan-copy-dialog {
  width: min(1120px, calc(100% - 32px));
}
.plan-copy-table {
  min-width: 940px;
}
.plan-copy-table .field {
  min-width: 130px;
}
.plan-copy-table textarea {
  min-width: 220px;
}
.plan-copy-dialog #add-copy-row {
  margin-top: 16px;
}
/* 폼·목록·버튼·카드·표는 관리자 공통 CSS를 사용합니다. */
#plans-content .unified-results {
  margin-top: 20px;
}
.plan-description {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.plan-amount {
  font-weight: 700;
  white-space: nowrap;
}
.plan-table {
  min-width: 1000px;
}
#plans-content .unified-search .filter-bar {
  grid-template-columns: minmax(200px, 2fr) repeat(4, minmax(110px, 1fr)) auto;
}
#plans-content .unified-search .actions {
  grid-column: auto;
}
#plans-content .unified-search .search-reset {
  border-color: transparent;
  background: transparent;
}
#plans-content .tt-grid .wide {
  grid-column: 1 / -1;
}
#plans-content table small {
  display: block;
  margin-top: 5px;
}
.plan-picker {
  max-height: 480px;
  overflow: auto;
}
.plan-picker table {
  min-width: 660px;
}
#plans-content .plan-picker td {
  padding: 8px 18px;
}
#plans-content .plan-picker td small {
  margin-top: 2px;
}
#plans-content .tt-grid > label {
  min-width: 0;
}
#plans-content .panel-head {
  gap: 16px;
}
@media (max-width: 1200px) {
  #plans-content .unified-search .filter-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  #plans-content .panel-head,
  #plans-content .board-save-bar {
    flex-wrap: wrap;
  }
  #plans-content .tt-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  #plans-content .unified-search .filter-bar {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 일별 결제 내역: 공통 컴포넌트의 화면 배치 */
/* 관리자 공통 카드·표·입력·버튼·레이아웃 위에 목업 배치만 보완합니다. */
.payment-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
#daily-payments-content .unified-results {
  margin-top: 20px;
}
#daily-payments-content .filter-bar {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
#daily-payments-content .filter-bar > .actions {
  grid-column: auto;
  justify-self: end;
}
#daily-payments-content .wide {
  grid-column: 1 / -1;
}
#daily-payments-content .tt-grid > label {
  display: grid;
  gap: 8px;
  min-width: 0;
}
#daily-payments-content .field,
#daily-payments-content .select {
  width: 100%;
}
#daily-payments-content small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
}
#daily-payments-content .panel-head {
  gap: 16px;
}
.payment-table {
  min-width: 1420px;
}
.payment-schedules {
  max-height: 400px;
  overflow: auto;
}
.payment-schedules table {
  min-width: 690px;
}
.payment-schedules th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface, #f8f9fc);
}
#daily-payments-content .payment-schedules td {
  padding: 10px 18px;
}
.payment-money {
  font-weight: 700;
  white-space: nowrap;
}
.payment-total {
  color: var(--primary);
  font-size: 24px;
}
/* 결제 상세: 최종 금액, 산정 내역, 취소 기록을 의미별로 구분합니다. */
.payment-information-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}
.payment-information-grid > * {
  min-width: 0;
}
.payment-overview {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}
.payment-calculation {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.payment-amount-highlight {
  margin: 0;
}
.payment-amount-highlight dt {
  font-size: 13px;
  font-weight: 700;
}
.payment-amount-highlight dd {
  margin: 10px 0 0;
  color: var(--primary);
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.payment-processing {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.payment-information h3 {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 700;
}
.payment-breakdown {
  display: grid;
  gap: 12px;
  margin: 0;
}
.payment-breakdown > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
}
.payment-breakdown.admin-detail dd {
  margin: 0;
  font-size: 14px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.payment-discount-value {
  color: var(--green);
}
.payment-breakdown-total {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.payment-breakdown-total dt,
.payment-breakdown.admin-detail .payment-breakdown-total dd {
  font-size: 14px;
  font-weight: 700;
}
.payment-cancellation {
  margin-top: 24px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}
.payment-cancellation-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.payment-refund-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.payment-refund-status strong {
  font-size: 13px;
}
.payment-cancellation-details > div {
  min-width: 0;
}
.payment-cancellation-amounts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: center;
  margin: 0;
}
.payment-cancellation-amounts.admin-detail dd {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.payment-repayment-amount dd {
  color: #c43c00;
}
:root[data-theme="dark"] .payment-repayment-amount dd {
  color: #ffad80;
}
.payment-final-refund {
  padding: 16px;
  border-radius: 8px;
  background: var(--primary-soft);
}
.payment-cancellation-amounts.admin-detail .payment-final-refund dd {
  color: var(--primary);
  font-size: 26px;
}
.payment-cancellation [data-cancellation-amounts] > .field-help {
  margin: 12px 0 20px;
}
.payment-cancellation-details .payment-note {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (max-width: 1100px) {
  .payment-information-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}
@media (max-width: 700px) {
  .payment-overview,
  .payment-calculation,
  .payment-cancellation {
    padding: 16px;
  }
  .payment-cancellation-details,
  .payment-cancellation-amounts {
    grid-template-columns: minmax(0, 1fr);
  }
}
.payment-periods {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.payment-periods label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.payment-error {
  color: var(--danger, #e44b5f);
  margin: 0;
}
.payment-error:empty {
  display: none;
}
.payment-note {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.payment-modal-fields {
  display: grid;
  gap: 14px;
  margin: 18px 0;
}
#live-payment-confirm {
  width: min(560px, calc(100vw - 32px));
  max-height: 85vh;
  overflow: auto;
}
#live-payment-confirm .tt-metadata {
  grid-template-columns: 1fr 1fr;
}
.payment-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
}
.payment-form-grid > *,
.payment-price-layout > * {
  min-width: 0;
}
#daily-payments-content [hidden] {
  display: none !important;
}
.payment-member-picker {
  display: flex;
  align-items: center;
  gap: 12px;
}
.payment-member-picker .payment-readonly {
  flex: 1;
  min-width: 0;
}
.payment-member-picker .btn {
  flex-shrink: 0;
}
.payment-readonly {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  min-height: 42px;
  margin: 0;
  overflow-wrap: anywhere;
}
.payment-readonly span {
  color: var(--muted);
}
.payment-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.payment-plan-summary {
  font-size: 16px;
  font-weight: 700;
}
.payment-schedule-details {
  min-width: 0;
  border-top: 1px solid var(--line);
}
.payment-schedule-details > summary,
.payment-discounts > summary {
  padding: 16px 0;
  font-weight: 600;
  cursor: pointer;
}
.payment-schedule-details > summary {
  padding-left: 24px;
  padding-right: 24px;
}
.payment-schedule-details summary span,
.payment-discounts summary span {
  margin-left: 8px;
  font-weight: 400;
}
.payment-price-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr);
  gap: 32px;
  align-items: start;
}
.payment-price-options > .field-label {
  max-width: 320px;
}
.payment-price-summary {
  margin: 0;
  display: grid;
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.payment-price-summary > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.payment-price-summary dd {
  margin: 0;
}
.payment-final-price {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.payment-amount-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}
#payment-amount-reason {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.payment-amount-dialog {
  width: min(480px, calc(100vw - 32px));
  max-height: 85vh;
  overflow-y: auto;
}
.payment-amount-dialog form {
  display: grid;
  gap: 16px;
}
.payment-amount-dialog p {
  margin: 0;
}
.payment-amount-original {
  margin: 0;
  padding: 16px;
  border-radius: 8px;
  background: var(--soft);
}
.payment-amount-dialog .actions {
  justify-content: flex-end;
}
.kicc-checkout {
  width: min(720px, calc(100vw - 32px));
  max-height: 90vh;
  overflow: auto;
}
#payment-card-history {
  min-width: 0;
}
#payment-refund-progress:empty {
  display: none;
}
#payment-refund-history:empty {
  display: none;
}
#payment-refund-history {
  min-width: 0;
}
#daily-payments-content .refund-history-panel {
  margin-top: 0;
}
.refund-history-disclosure {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.refund-history-disclosure > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}
.refund-history-disclosure > summary .muted {
  margin-left: 8px;
  font-weight: 400;
}
.refund-history-disclosure #payment-refund-history {
  margin-top: 16px;
}
.refund-history-disclosure .refund-history-panel {
  box-shadow: none;
}
.refund-history-panel table {
  min-width: 800px;
}
#daily-payments-content #payment-card-history .payment-card-results {
  margin-top: 0;
}
.payment-card-results table {
  min-width: 1040px;
}
.payment-card-summary,
.payment-card-print-help {
  padding: 12px 24px;
  margin: 0;
  font-size: 12px;
}
.payment-card-print-help,
.payment-card-number {
  color: var(--muted);
}
.payment-card-number {
  display: block;
  margin-top: 4px;
  font-size: 11px;
}
.payment-card-actions {
  min-width: 140px;
  max-width: 200px;
  white-space: normal;
}
.payment-card-pending {
  margin: 0 24px 16px;
  padding: 12px 16px;
  border: 1px solid var(--button-line);
  border-radius: 8px;
  background: var(--soft);
}
.payment-card-cancel-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 28px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.payment-card-cancel-dialog::backdrop {
  background: #13192470;
}
.payment-card-cancel-dialog [hidden] {
  display: none !important;
}
.payment-card-cancel-dialog h2 {
  margin: 0 0 8px;
  font-size: 21px;
}
.payment-card-cancel-amount {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 24px 0;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.payment-card-cancel-amount strong {
  color: var(--button-danger);
  font-size: 26px;
  overflow-wrap: anywhere;
}
.payment-card-cancel-guide {
  margin: 22px 0;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--soft);
  line-height: 1.6;
}
.payment-card-cancel-dialog textarea {
  width: 100%;
  resize: vertical;
}
.payment-card-cancel-status {
  margin: 16px 0;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.payment-card-cancel-status:empty {
  display: none;
}
.payment-card-cancel-dialog .actions {
  margin-top: 24px;
  flex-wrap: wrap;
}
@media (max-width: 560px) {
  .payment-card-cancel-dialog {
    padding: 20px;
  }
  .payment-card-cancel-dialog [data-confirm-card-cancel],
  .payment-card-cancel-dialog [data-retry-card-cancel] {
    flex: 1 1 100%;
  }
}
.kicc-checkout [hidden] {
  display: none !important;
}
.kicc-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.kicc-heading h2 {
  font-size: 22px;
}
.kicc-checkout p {
  margin: 8px 0;
}
.kicc-heading p,
.kicc-plan span,
.kicc-totals span,
.kicc-history li span,
.kicc-history li small {
  color: var(--muted);
  font-size: 12px;
}
.kicc-plan {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 0;
}
.kicc-order-info {
  margin-bottom: 16px;
}
.kicc-order-info summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
}
.kicc-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 20px;
  background: var(--soft);
  border-radius: 12px;
}
.kicc-totals > div {
  display: grid;
  gap: 6px;
}
.kicc-totals strong {
  font-size: 20px;
  overflow-wrap: anywhere;
}
.kicc-remaining strong {
  color: var(--primary);
}
:is(.kicc-cancel-only, .kicc-refund-mode) .kicc-member {
  margin: 20px 0 12px;
  color: var(--muted);
}
.kicc-cancel-only .kicc-totals {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 8px;
}
.kicc-cancel-only .kicc-totals > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}
:is(.kicc-cancel-only, .kicc-refund-mode) .kicc-history {
  margin-top: 24px;
}
:is(.kicc-cancel-only, .kicc-refund-mode) .kicc-history ol {
  display: grid;
  gap: 12px;
  margin: 12px 0 0;
}
:is(.kicc-cancel-only, .kicc-refund-mode) .kicc-history li {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
:is(.kicc-cancel-only, .kicc-refund-mode) .kicc-history li > div {
  gap: 8px;
}
:is(.kicc-cancel-only, .kicc-refund-mode) .kicc-history .badge {
  display: inline-flex;
}
:is(.kicc-cancel-only, .kicc-refund-mode) [data-progress] {
  margin-top: 16px;
}
.kicc-refund-mode .kicc-totals {
  border: 1px solid var(--line);
  border-radius: 8px;
}
.kicc-refund-mode .kicc-footer {
  align-items: flex-start;
}
.kicc-refund-mode .kicc-footer > button {
  margin-left: auto;
}
.kicc-charge-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  gap: 16px;
  padding: 24px 0;
}
.kicc-charge-form > button {
  grid-column: 1 / -1;
  min-height: 44px;
}
.kicc-history h3 {
  font-size: 14px;
}
.kicc-history-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.kicc-history-heading h3 span {
  margin-left: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}
.kicc-history ol {
  list-style: none;
  padding: 0;
  margin: 12px 0;
}
.kicc-history li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.kicc-history li > div {
  display: grid;
  gap: 4px;
}
.kicc-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.kicc-recovery {
  margin-bottom: 20px;
  padding: 18px;
  border: 1px solid var(--primary);
  border-radius: 12px;
  background: var(--soft);
}
.kicc-recovery-card {
  margin-top: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.kicc-recovery-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.kicc-recovery-heading h2,
.kicc-recovery-heading h3 {
  margin: 0;
  overflow-wrap: anywhere;
}
.kicc-recovery-card .admin-detail,
.kicc-recovery-detail .admin-detail {
  margin: 20px 0;
}
.kicc-recovery-card .actions,
.kicc-recovery-detail > .actions {
  margin-top: 20px;
}
dialog.kicc-recovery-detail {
  width: min(960px, calc(100vw - 32px));
  max-height: 88vh;
  overflow: auto;
}
.kicc-recovery-detail > .kicc-recovery-heading {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.kicc-recovery-detail > h3 {
  overflow-wrap: anywhere;
  margin: 20px 0 8px;
}
.kicc-recovery-detail .unified-results table {
  min-width: 680px;
}
.kicc-recovery-detail .panel-head {
  flex-wrap: wrap;
}
.kicc-recovery-detail .list-options .select {
  min-width: 120px;
}
.kicc-recovery-history {
  margin-top: 24px;
}
.kicc-recovery-history article {
  display: grid;
  gap: 6px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.kicc-recovery-history article span {
  color: var(--muted);
  overflow-wrap: anywhere;
}
@media (max-width: 700px) {
  dialog.kicc-recovery-detail {
    padding: 18px;
  }
}
@media (max-width: 560px) {
  .kicc-checkout {
    padding: 20px;
  }
  .kicc-totals {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .kicc-totals > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }
  .kicc-charge-form {
    grid-template-columns: 1fr;
  }
  .kicc-footer > button {
    width: 100%;
  }
}
.payment-member-dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: 85vh;
  overflow: auto;
}
.payment-member-dialog .dialog-head {
  gap: 16px;
  align-items: center;
  padding: 0 0 16px;
}
.payment-member-dialog .dialog-head h2 {
  margin: 0;
}
.payment-member-dialog > .field-help {
  margin: 16px 0 0;
  line-height: 1.6;
}
.payment-member-dialog #member-search-results {
  margin-top: 24px;
}
.payment-member-dialog .panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.payment-member-dialog .panel-head h2 {
  margin: 0;
  font-size: 15px;
}
.payment-member-search {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin-top: 20px;
}
.payment-member-search label {
  flex: 1;
  min-width: 0;
}
.payment-member-search input[name="query"] {
  width: 100%;
}
.payment-member-search .payment-member-scope {
  display: flex;
  flex-basis: 100%;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
}
.payment-member-scope .checkbox {
  flex: 0 0 16px;
  margin: 0;
}
.payment-member-scope strong {
  color: var(--ink);
  font-weight: 600;
}
.payment-member-scope:focus-within {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.payment-member-dialog td,
.payment-member-dialog th {
  white-space: nowrap;
}
.payment-member-dialog .unified-results table {
  min-width: 620px;
}
.payment-member-dialog .list-options .select {
  min-width: 120px;
}
@media (max-width: 1000px) {
  #daily-payments-content .filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .payment-notice,
  #daily-payments-content .panel-head,
  #daily-payments-content .board-save-bar {
    flex-wrap: wrap;
  }
  #daily-payments-content .filter-bar,
  #daily-payments-content .tt-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  #daily-payments-content .page-heading {
    flex-wrap: wrap;
  }
  .payment-form-grid,
  .payment-price-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .payment-price-layout {
    gap: 20px;
  }
  .payment-member-picker {
    flex-wrap: wrap;
  }
  .payment-member-picker .payment-readonly {
    flex-basis: 100%;
  }
  .payment-member-dialog {
    padding: 18px;
  }
  .payment-member-dialog td,
  .payment-member-dialog th {
    padding: 12px 8px;
  }
  #live-payment-confirm .tt-metadata {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 시간표의 학기·방학 공통 영단어 제공 요일 설정입니다. */
.tt-english-days {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px 24px;
  padding: 18px 24px;
}

.tt-english-days fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.tt-english-days legend {
  padding: 0;
  font-size: 14px;
  font-weight: 600;
}

.tt-english-day-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.tt-english-day-options label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--canvas);
  font-size: 14px;
  cursor: pointer;
}

.tt-english-day-options label:has(input:checked) {
  border-color: var(--primary);
  color: var(--primary);
}

.tt-english-day-options label:has(input:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.tt-english-day-options label:has(input:disabled) {
  cursor: default;
}

.tt-english-day-options input {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--primary);
}

.tt-english-day-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.tt-english-day-actions .btn {
  min-height: 38px;
  white-space: nowrap;
}

.tt-english-day-actions [role="alert"] {
  margin: 0;
  color: var(--red);
}

.tt-english-day-actions [role="alert"]:empty {
  display: none;
}

@media (max-width: 700px) {
  .tt-english-days {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 20px;
  }

  .tt-english-day-actions {
    align-items: flex-start;
  }
}

/* 영단어 제공 내역·시험 관리·배정 일정·단어 목록의 공통 이동 탭입니다. */
.english-management-tabs {
  display: flex;
  gap: 24px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.english-management-tabs a {
  padding: 13px 2px;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.english-management-tabs a[aria-current="page"] {
  border-bottom-color: var(--primary);
  color: var(--primary);
}

.english-management-tabs a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* 실제 업무 모듈의 공통 스타일을 유지하고 지점 상세 탭의 배치만 추가합니다. */
.bd-tabs {
  display: flex;
  gap: 24px;
  position: sticky;
  top: 0;
  z-index: 5;
  padding-top: 5px;
  margin-bottom: 22px;
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: thin;
}

.bd-tabs [role="tab"] {
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 13px 2px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.bd-tabs [role="tab"][aria-selected="true"] {
  border-bottom-color: var(--primary);
  color: var(--primary);
}

.bd-tabs .badge {
  margin-left: 4px;
}

.bd-basic-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.bd-basic-grid > #branch-teachers {
  grid-column: 1 / -1;
}

.bd-basic-grid > .bd-location {
  grid-column: 1 / -1;
  min-width: 0;
}

.bd-location-map {
  width: 100%;
  height: clamp(280px, 40vw, 420px);
  margin-top: 16px;
  border-radius: 8px;
}

.bd-subtabs {
  margin-bottom: 20px;
}

.bd-section-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding: 18px 22px;
}

.bd-section-context strong {
  font-size: 14px;
}

.bd-section-context p {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

.bd-page [role="tabpanel"],
.bd-page [role="tabpanel"] > .panel-stack {
  min-width: 0;
}

.bd-page #branch-tab-panel .page-heading {
  margin-bottom: 20px;
}

.bd-page #branch-tab-panel .page-heading h2 {
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.5px;
}

.bd-page #branch-tab-panel > .panel-stack > .page-heading,
.bd-page #branch-tab-panel > .panel-stack > .bd-subtabs {
  margin-bottom: 0;
}

.bd-page #branch-classrooms table {
  min-width: 1020px;
}

.bd-page #classroom-seats table {
  min-width: 760px;
}

.bd-page .bd-native .unified-search {
  margin-bottom: 20px;
}

/* 지점 상세의 검색 조건은 요금제와 같은 간격·크기·반응형 배치를 사용합니다. */
.bd-page #branch-tab-panel .unified-search .bd-filter-bar {
  display: grid;
  grid-template-columns:
    minmax(200px, 2fr) repeat(var(--bd-filter-count), minmax(110px, 1fr)) auto;
  gap: 16px;
}

.bd-page #branch-tab-panel .bd-filter-bar > .field-label {
  min-width: 0;
  grid-column: auto;
}

.bd-page #branch-tab-panel .bd-filter-bar > [hidden] {
  display: none;
}

.bd-page #branch-tab-panel .bd-filter-bar .field,
.bd-page #branch-tab-panel .bd-filter-bar .select {
  width: 100%;
}

.bd-page #branch-tab-panel .unified-search .bd-filter-bar > .actions {
  grid-column: auto;
  justify-self: end;
}

.bd-page #branch-tab-panel .unified-search .search-reset {
  border-color: transparent;
  background: transparent;
}

.bd-page #branch-tab-panel .unified-results {
  margin-top: 0;
}

.bd-page #branch-tab-panel .panel-head {
  gap: 16px;
}

@media (max-width: 1200px) {
  .bd-page #branch-tab-panel .unified-search .bd-filter-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.bd-page .table-wrap:focus-visible,
.bd-tabs [role="tab"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.bd-page .bd-group-summary {
  margin-bottom: 20px;
}

.bd-page .bd-group-summary .branch-details {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .bd-basic-grid {
    grid-template-columns: 1fr;
  }

  .bd-page .bd-group-summary .branch-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .bd-page .page-heading {
    gap: 14px;
  }

  .bd-page .page-heading > .actions {
    justify-content: flex-end;
    flex-shrink: 0;
  }

  .bd-page > .page-heading > .actions {
    flex-direction: column;
  }

  .bd-tabs {
    gap: 20px;
  }

  .bd-section-context {
    align-items: start;
    flex-direction: column;
  }

  .bd-page .panel-head {
    flex-wrap: wrap;
  }

  .bd-page #branch-tab-panel .page-heading {
    flex-wrap: wrap;
  }

  .bd-page #branch-tab-panel .page-heading > .actions {
    flex-shrink: 1;
  }

  .bd-page #branch-tab-panel .unified-search .bd-filter-bar {
    grid-template-columns: minmax(0, 1fr);
  }
}

.bd-tabs [role="tab"] {
  text-decoration: none;
}
.bd-subtabs {
  position: static;
}
.bd-basic-grid + .board-save-bar {
  margin-top: 20px;
}

/* 학습관리: 주간·월간 목록, 기록 입력, 리포트 미리보기 */
/* 공통 관리자 컴포넌트는 유지하고 학습 화면에 필요한 배치만 추가합니다. */
.lm-page,
.lm-main,
.lm-aside,
.lm-detail-layout > * {
  min-width: 0;
}

.lm-page > .panel,
.lm-main > .panel,
.lm-aside > .panel {
  margin-bottom: 22px;
}

.lm-page .page-heading h1 {
  line-height: 1.4;
}

.lm-page .panel-head {
  gap: 14px;
}

.lm-page .panel-head h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lm-page .field-label,
.lm-page .field,
.lm-page .select {
  min-width: 0;
}

.lm-page .field,
.lm-page .select {
  width: 100%;
}

.lm-page .lm-search {
  grid-template-columns: minmax(180px, 1.5fr) repeat(3, minmax(130px, 1fr)) auto;
}

.lm-page .lm-search > .btn,
.lm-page .lm-search > .actions {
  grid-column: auto;
}

.lm-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.lm-stat {
  padding: 18px 22px;
}

.lm-stat > .muted,
.lm-stat > span,
.lm-stat > small {
  display: block;
  font-size: 12px;
}

.lm-context {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(150px, 1.2fr) minmax(270px, 2fr) minmax(90px, 0.8fr);
  gap: 22px;
  margin: 0;
}

.lm-context > div {
  min-width: 0;
}

.lm-context dt {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
}

.lm-context dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.lm-full {
  grid-column: 1 / -1;
}

.lm-form-context {
  padding: 14px 18px;
  margin-bottom: 22px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}

.lm-form-context strong {
  color: var(--ink);
  font-size: 13px;
}

.lm-list-table td:first-child > small,
.lm-plan-table td:first-child > small {
  display: block;
  margin-top: 4px;
  font-size: 11px;
}

.lm-plan-table {
  min-width: 1040px;
}

.lm-plan-table td:first-child {
  min-width: 190px;
  max-width: 300px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.lm-plan-table .actions,
.lm-list-table .actions {
  flex-wrap: nowrap;
}

.lm-record-cell {
  display: grid;
  justify-items: start;
  text-align: left;
  gap: 3px;
  width: 100%;
  min-width: 64px;
  min-height: 55px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.lm-record-cell:not(:disabled):hover {
  border-color: var(--button-line);
  background: var(--primary-soft);
  color: var(--primary);
}

.lm-record-cell strong {
  font-size: 13px;
  font-weight: 600;
}

.lm-record-cell small {
  color: var(--muted);
  font-size: 10px;
}

.lm-week-table .lm-today {
  background: var(--primary-soft);
}

.lm-week-table th.lm-today {
  color: var(--primary);
  font-weight: 650;
}

.lm-record-edit {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
}

.lm-record-edit .field-label {
  flex: 1;
  min-width: 0;
}

.lm-record-edit > .btn {
  flex-shrink: 0;
  margin-bottom: 3px;
}

.lm-next-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}

.lm-audit {
  margin-top: 26px;
  padding: 18px 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.lm-audit > summary {
  cursor: pointer;
  font-size: 12px;
}

.lm-audit .lm-context {
  margin-top: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lm-delete-area {
  display: flex;
  justify-content: flex-end;
  padding-top: 24px;
  margin-top: 22px;
  border-top: 1px solid var(--line);
}

.lm-stat-value {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 5px 0 1px;
  color: var(--ink);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
}

.lm-stat-value small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.lm-tabs {
  margin-top: 2px;
}

.lm-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: 22px;
}

.lm-aside {
  position: sticky;
  top: 68px;
}

.lm-metadata {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
  margin: 0;
}

.lm-metadata dt {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
}

.lm-metadata dd {
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.lm-amount-input {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface, #fff);
  overflow: hidden;
}

.lm-amount-input:focus-within {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.lm-amount-input .field {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  height: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
}

.lm-amount-unit {
  flex: 0 0 auto;
  max-width: 45%;
  padding: 0 12px 0 4px;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lm-progress-value {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
}

.lm-quantity-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.lm-quantity-grid .field {
  text-align: right;
}

.lm-grid-scroll {
  width: 100%;
  overflow: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.lm-grid-scroll:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.lm-week-table {
    min-width: 920px;
}

.lm-week-table th,
.lm-week-table td {
    padding: 12px 6px;
  vertical-align: middle;
}

.lm-week-table th:first-child,
.lm-week-table td:first-child {
    min-width: 160px;
  padding-left: 22px;
}

.lm-week-table td:first-child {
    white-space: normal;
    overflow-wrap: anywhere;
}

.lm-week-table td:first-child small,
.lm-week-table td:nth-last-child(2) small {
    display: block;
    margin-top: 4px;
    font-size: 11px;
}

.lm-week-table .lm-record-cell {
  min-width: 52px;
  padding: 8px;
  border: 0;
}

.lm-week-table th:nth-child(n + 2):nth-child(-n + 8) {
  padding-left: 14px;
}

.lm-week-table th small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
}

.lm-week-table .lm-day-input {
  width: 70px;
  min-width: 70px;
  height: 36px;
  padding: 7px 8px;
  text-align: right;
}

.lm-week-table .lm-plan-title {
  max-width: 240px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.lm-week-table .lm-total {
  color: var(--primary);
  font-weight: 650;
}

.lm-cell-note {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.lm-progress {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 120px;
}

.lm-progress progress {
  width: 84px;
  height: 7px;
  accent-color: var(--primary);
}

.lm-progress span {
  min-width: 35px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.lm-report-preview {
  display: grid;
  gap: 22px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.lm-report-preview > header {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.lm-report-preview h2 {
  margin-bottom: 8px;
  font-size: 20px;
}

.lm-report-section {
  display: grid;
  gap: 10px;
}

.lm-report-section h3 {
  font-size: 14px;
}

.lm-report-section p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.8;
}

.lm-report-section .lm-summary {
  margin-bottom: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lm-report-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 0;
}

.lm-stat-value.lm-stat-note {
  font-size: 16px;
}

.lm-report-identity {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: var(--muted);
  font-size: 12px;
}

.lm-report-identity strong {
  color: var(--ink);
  font-size: 14px;
}

.lm-report-status {
  grid-template-columns: minmax(0, 1fr);
}

.lm-report-actions {
  display: grid;
  gap: 9px;
  margin-top: 22px;
}

.lm-report-help {
  margin-top: 18px;
}

.lm-monthly-summary > .panel {
  margin-bottom: 22px;
}

.lm-monthly-summary > .lm-note {
    margin-bottom: 22px;
}

.lm-monthly-summary .lm-report-metrics {
  margin-bottom: 18px;
}

.lm-boundary-badge {
  margin-left: 8px;
}

.lm-wrap-cell {
  min-width: 180px;
  max-width: 360px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.lm-record-period {
  padding-bottom: 14px;
}

.lm-note {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.lm-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  padding: 18px 22px;
}

.lm-form-actions > .actions {
  margin-left: auto;
}

.lm-dialog {
  width: min(800px, calc(100% - 32px));
}

.lm-family-section > h3 {
  color: var(--primary);
}

.lm-family-section > h4 {
  margin: 24px 0 12px;
  font-size: 15px;
}

.lm-family-text {
  white-space: pre-line;
  overflow-wrap: anywhere;
  line-height: 1.8;
}

.lm-family-total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 20px 0 12px;
  padding: 20px;
  border-radius: 12px;
  background: var(--primary-soft);
}

.lm-family-total strong {
  font-size: 24px;
  color: var(--primary);
}

.lm-family-progress {
  height: 6px;
  min-width: 70px;
  margin-top: 8px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--line);
}

.lm-family-progress span {
  display: block;
  height: 100%;
  background: var(--primary);
}

.lm-family-additions {
  padding: 0;
  list-style: none;
}

.lm-family-additions li {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}

.lm-family-note {
  margin-top: 16px;
  padding: 16px;
  border-radius: 8px;
  background: var(--primary-soft);
}

@media (max-width: 600px) {
  .lm-family-section table,
  .lm-family-section tbody,
  .lm-family-section tr,
  .lm-family-section td {
    display: block;
    min-width: 0;
    width: 100%;
  }

  .lm-family-section thead {
    display: none;
  }

  .lm-family-section tr {
    margin-bottom: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
  }

  .lm-family-section td {
    padding: 12px;
    white-space: normal;
  }

  .lm-family-section td::before {
    content: attr(data-report-label);
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 11px;
  }
}

.lm-dialog .dialog-head {
  position: sticky;
  top: 0;
  z-index: 2;
  gap: 14px;
  padding: 20px 24px;
  background: var(--surface);
}

.lm-dialog .dialog-head > .btn {
  flex-shrink: 0;
}

.lm-dialog .dialog-body {
  padding: 24px;
}

.lm-dialog .lm-goal-help {
  margin-top: 16px;
}

.lm-dialog .dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 24px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.lm-dialog .field-error:not(:empty) {
  margin-top: 14px;
}

.lm-dialog .panel-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
  gap: 16px;
}

.lm-dialog .lm-form-actions {
  margin: 0;
  padding: 18px 24px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.lm-dialog .lm-report-preview {
  border: 0;
  border-radius: 0;
}

@media (max-width: 1200px) {
  .lm-context {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lm-context .lm-period {
    grid-column: 1 / -1;
  }

  .lm-page .lm-search {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lm-page .lm-search > .btn,
  .lm-page .lm-search > .actions {
    grid-column: 2;
    justify-self: end;
  }

  .lm-detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .lm-aside {
    position: static;
  }
}

@media (max-width: 760px) {
.lm-prototype-badge .badge {
    padding: 3px 6px;
    font-size: 9px;
  }

  .lm-page .page-heading {
    gap: 14px;
  }

  .lm-page .page-heading > .actions {
    justify-content: flex-end;
    flex-shrink: 0;
    flex-wrap: wrap;
  }

  .lm-page .panel-head {
    flex-wrap: wrap;
  }

  .lm-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .lm-stat {
    padding: 16px;
  }

  .lm-stat-value {
    font-size: 25px;
  }

  .lm-quantity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lm-metadata {
    grid-template-columns: minmax(0, 1fr);
  }

  .lm-context,
  .lm-audit .lm-context {
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lm-dialog .dialog-head,
  .lm-dialog .dialog-body,
  .lm-dialog .dialog-actions {
    padding: 18px;
  }

  .lm-page .lm-search > .field-label:first-child,
  .lm-page .lm-search > .btn,
  .lm-page .lm-search > .actions {
    grid-column: 1 / -1;
  }

  .lm-form-actions {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .lm-report-preview {
    gap: 18px;
    padding: 20px;
  }
}

/* 계획 변경 요청 상세의 입력 배치와 원문 줄바꿈 */
.unified-results .plan-request-table {
  table-layout: fixed;
  min-width: 1050px;
}
.plan-request-table .request-student-column {
  width: 150px;
}
.plan-request-table .request-period-column {
  width: 155px;
}
.plan-request-table .request-study-column {
  width: 150px;
}
.plan-request-table .request-status-column {
  width: 160px;
}
.plan-request-table .request-action-column {
  width: 95px;
}
.plan-request-table td {
  overflow-wrap: anywhere;
}
.plan-request-table .request-time {
  margin-top: 6px;
}
.plan-request-reason-preview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  white-space: pre-wrap;
  line-height: 1.6;
}
@media (min-width: 1151px) {
  #request-search.filter-bar {
    grid-template-columns: minmax(200px, 2fr) repeat(2, minmax(120px, 1fr)) minmax(160px, 1fr) auto;
  }
  #request-search .actions {
    grid-column: 5;
  }
}
.plan-request-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 16px;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.plan-request-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.plan-request-study {
  grid-column: span 2;
}
.plan-request-editor > .field-help {
  margin: 16px 0 0;
}
.plan-request-summary {
  display: grid;
  gap: 24px;
}
.plan-request-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 32px;
  margin: 0;
}
.plan-request-meta dt,
.plan-request-reason h3 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.plan-request-meta dd {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.plan-request-reason {
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.plan-request-reason p {
  margin: 0;
  line-height: 1.7;
}
@media (max-width: 640px) {
  .plan-request-meta,
  .plan-request-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .plan-request-study {
    grid-column: auto;
  }
}
#plan-requests-content,
#request-process {
  display: grid;
  gap: 20px;
  min-width: 0;
}
#plan-requests-content > *,
#request-process > *,
#request-history {
  min-width: 0;
}
/* 상세 카드: 일별 결제 내역의 항목명과 값 표현을 공통 기본값으로 사용합니다. */
.admin-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
}
.admin-detail > div,
.admin-detail-item {
  min-width: 0;
  overflow-wrap: anywhere;
}
.admin-detail dt,
.admin-detail-label,
.parent-consult-reason .admin-detail-label {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: bold;
}
.admin-detail dd,
.admin-detail-value,
.parent-consult-value.admin-detail-value {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
}
.attendance-detail {
  margin-bottom: 24px;
}
.member-meta.admin-detail dd {
  white-space: pre-wrap;
}
.attendance-detail .row-title {
  font-weight: 400;
  margin-bottom: 0;
}
@media (max-width: 700px) {
  .admin-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* 보호자 상담 목록과 신청·일정·상담 기록 */
@media (min-width: 1151px) {
  #consult-search {
    grid-template-columns: minmax(220px, 1.6fr) minmax(130px, 1fr)
      minmax(160px, 1fr) minmax(150px, 1.1fr) auto;
    gap: 12px;
    align-items: end;
  }
  #consult-search > .actions {
    grid-column: 5;
  }
}
#parent-consults-content,
.parent-consult-sections {
  display: grid;
  gap: 20px;
  min-width: 0;
}
#parent-consults-content > *,
.parent-consult-sections > *,
#consult-history {
  min-width: 0;
}
.parent-consult-table {
  min-width: 1000px;
  table-layout: fixed;
}
.parent-consult-table .consult-person {
  width: 150px;
}
.parent-consult-table .consult-state {
  width: 190px;
}
.parent-consult-table .consult-schedule {
  width: 190px;
}
.parent-consult-table .consult-action {
  width: 90px;
}
.parent-consult-preview {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.parent-consult-grid,
.parent-consult-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.parent-consult-meta {
  margin: 0;
}
.parent-consult-meta dt {
  color: var(--muted);
  margin-bottom: 8px;
}
.parent-consult-meta dd {
  margin: 0;
}
.parent-consult-wide {
  grid-column: 1 / -1;
}
.parent-consult-share-help {
  margin-top: 10px;
}
.parent-consult-cancel-dialog .dialog-head,
.parent-consult-cancel-dialog .dialog-body,
.parent-consult-cancel-dialog .dialog-actions {
  padding: 20px 24px;
}
.parent-consult-cancel-dialog .dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--line);
}
.parent-consult-cancel-dialog .field-help {
  margin-top: 10px;
}
.consult-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
}
.parent-consult-grid > .actions {
  flex-wrap: wrap;
}
.parent-consult-value {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.7;
  margin: 0;
}
.parent-consult-reason {
  margin-top: 24px;
}
.parent-consult-reason h3 {
  margin: 0 0 10px;
  font-size: 14px;
}
.parent-consult-grid .field-label {
  min-width: 0;
}
@media (max-width: 700px) {
  .parent-consult-grid,
  .parent-consult-meta {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* 설문 등록·수정: 단계별 편집과 선택한 문항의 입력 작업 공간 */
.survey-editor-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 24px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.survey-editor-tabs .survey-editor-tab {
  justify-content: flex-start;
  gap: 12px;
  min-height: 52px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.survey-editor-tabs .survey-editor-tab[aria-selected="true"] {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.survey-step-number,
.survey-option-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
}

.survey-editor-tab[aria-selected="true"] .survey-step-number {
  background: var(--primary);
  color: #fff;
}

.survey-composition {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}

.survey-editor-outline {
  position: sticky;
  top: 16px;
  overflow: hidden;
}

.survey-outline-items {
  max-height: min(600px, calc(100dvh - 260px));
  min-height: 120px;
  overflow-y: auto;
  padding: 12px;
}

.survey-outline-group + .survey-outline-group {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.survey-editor .survey-outline-section,
.survey-editor .survey-outline-question {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  height: auto;
  gap: 10px;
  padding: 12px 10px;
  border-color: transparent;
  background: transparent;
  color: var(--ink);
  text-align: left;
  white-space: normal;
}

.survey-outline-section > [data-section-label] {
  flex: 1;
  overflow-wrap: anywhere;
}

.survey-outline-section > .muted {
  flex-shrink: 0;
  font-size: 11px;
}

.survey-outline-number {
  min-width: 18px;
  color: var(--muted);
  font-size: 12px;
}

.survey-outline-questions {
  display: grid;
  gap: 4px;
  margin-left: 12px;
}

.survey-editor .survey-outline-question[aria-current="true"] {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.survey-outline-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

.survey-outline-meta {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

.survey-outline-add {
  justify-self: start;
  margin: 8px 0 0 28px;
}

.survey-outline-footer {
  padding: 16px;
  border-top: 1px solid var(--line);
}

.survey-outline-footer .btn {
  width: 100%;
}

.survey-composition-main {
  display: grid;
  min-width: 0;
  gap: 16px;
}

.survey-area-settings > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.survey-area-settings > summary > span:last-child {
  flex-shrink: 0;
  color: var(--primary);
  font-size: 12px;
}

.survey-area-settings[open] > summary {
  border-bottom: 1px solid var(--line);
}

.survey-area-actions,
.survey-question-footer {
  display: flex;
  justify-content: flex-end;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
}

.survey-editor-period {
  padding: 0 20px 20px;
}

.survey-workspace .survey-editor-period .survey-fields {
  padding: 12px 0 0;
}

.survey-editor .field-help {
  margin-top: 0;
  margin-bottom: 0;
}

.survey-options-editor {
  padding: 20px;
  border-top: 1px solid var(--line);
}

.survey-option-row {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.survey-option-main {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.survey-option-main.is-scored {
  grid-template-columns: 26px minmax(0, 1fr) 110px;
}

.survey-option-number {
  margin-top: 28px;
}

.survey-option-main textarea.field {
  min-height: 64px;
  resize: vertical;
}

.survey-option-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0 0 38px;
}

.survey-option-settings {
  flex: 1 1 180px;
  min-width: 0;
  font-size: 12px;
}

.survey-option-settings summary {
  color: var(--muted);
  cursor: pointer;
}

.survey-option-settings .survey-flags {
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.survey-order-actions {
  flex-wrap: wrap;
}

.survey-add-option {
  width: 100%;
  margin-top: 16px;
}

.survey-bulk-editor {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.survey-bulk-editor .btn {
  justify-self: start;
}

.survey-editor-selector {
  display: grid;
  grid-template-columns: minmax(200px, 320px) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
  padding: 20px;
}

.survey-editor-empty,
.survey-preview-heading {
  padding: 28px;
}

.survey-editor-empty {
  color: var(--muted);
  text-align: center;
}

.survey-editor-savebar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 20px;
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.survey-editor-savebar .field-help {
  display: block;
  margin-top: 4px;
}

.survey-editor-savebar > .actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 1100px) {
  .survey-composition {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 12px;
  }

  .survey-editor-savebar > .actions {
    flex: 1 1 100%;
  }
}

@media (max-width: 850px) {
  .survey-composition {
    grid-template-columns: minmax(0, 1fr);
  }

  .survey-editor-outline {
    position: static;
  }

  .survey-outline-items {
    max-height: 240px;
  }

  .survey-editor-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .survey-editor-tabs .survey-editor-tab {
    padding: 8px;
    gap: 8px;
  }

  .survey-editor-selector {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}

@media (max-width: 500px) {
  .survey-option-main.is-scored {
    grid-template-columns: 26px minmax(0, 1fr);
  }

  .survey-option-main.is-scored > .field-label:last-child {
    grid-column: 2;
  }

  .survey-option-footer {
    margin-left: 0;
  }

  .survey-options-editor,
  .survey-editor-savebar {
    padding: 16px;
  }
}

:root[data-theme="dark"] .survey-editor-tab[aria-selected="true"],
:root[data-theme="dark"] .survey-editor .survey-outline-question[aria-current="true"],
:root[data-theme="dark"] .survey-area-settings > summary > span:last-child {
  color: var(--ink);
}

/* 설문 상세: 문항과 결과 기준을 영역별로 펼쳐 확인합니다. */
.survey-detail {
  display: grid;
  gap: 24px;
}

.survey-detail-groups,
.survey-detail-rules {
  display: grid;
  gap: 12px;
}

.survey-detail-group {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.survey-detail-group > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
}

.survey-detail-group > summary::-webkit-details-marker {
  display: none;
}

.survey-detail-group > summary::after {
  content: '+';
  flex: 0 0 18px;
  text-align: center;
  font-size: 20px;
  color: var(--muted);
}

.survey-detail-group[open] > summary::after {
  content: '−';
}

.survey-detail-group > summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -3px;
}

.survey-detail-group-title {
  flex: 1;
  min-width: 0;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.survey-detail-number {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.survey-detail-group > summary > .muted {
  flex-shrink: 0;
  font-size: 12px;
}

.survey-detail-group-body {
  padding: 20px;
  border-top: 1px solid var(--line);
}

.survey-detail-rule {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.survey-detail-rule h3 {
  margin: 0 0 18px;
  font-size: 15px;
}

.survey-detail-rule .admin-detail {
  display: grid;
  gap: 18px;
  margin: 0;
}

.survey-detail .survey-question h3 {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.survey-detail .survey-question {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.survey-detail-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  list-style: none;
}

.survey-detail-options li {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  .survey-detail-group > summary,
  .survey-detail-group-body,
  .survey-detail-rule {
    padding: 16px;
  }

  .survey-detail-options {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 상담 접수 상세에만 적용하는 답변·결과 안내 간격입니다. */
.intake-detail .intake-result-message {
  margin: 20px 0 24px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.intake-detail .intake-result-message .admin-detail-value {
  line-height: 1.85;
}

.intake-detail .survey-question h4 {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.intake-detail .survey-academy {
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.intake-detail #member-link .survey-fields > div {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.intake-detail > .panel > .panel-head {
  gap: 12px;
  flex-wrap: wrap;
}

.intake-detail > .panel > .panel-head h2 {
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  .intake-detail .intake-result-message {
    padding: 16px;
  }
}

/* 회원·보호자 공통 검색 팝업 */
.admin-member-picker {
  width: min(960px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface, #fff);
  color: inherit;
  overflow: auto;
}
.admin-member-picker::backdrop {
  background: rgba(15, 23, 42, .45);
}
.admin-member-picker > .panel-head {
  padding: 0 0 16px;
}
.admin-member-picker > .field-help {
  margin: 0 0 16px;
}
.admin-member-picker [data-picker-error]:empty {
  display: none;
}
.admin-member-picker .table-wrap {
  overflow-x: auto;
}
.admin-member-picker table {
  min-width: 600px;
}
.admin-member-picker td {
  white-space: normal;
  overflow-wrap: anywhere;
}

.admin-member-picker-compact table {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
}
.admin-member-picker-compact th:last-child {
  width: 72px;
}

.admin-member-picker td {
  font-size: 14px;
}
.admin-member-picker .row-sub {
  font-size: 12px;
  line-height: 1.6;
}
@media (max-width: 600px) {
  .admin-member-picker {
    padding: 16px;
  }
  .admin-member-picker-compact thead {
    display: none;
  }
  .admin-member-picker-compact tbody tr:has([data-picker-select]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
  }
  .admin-member-picker-compact td[data-label] {
    height: auto;
    min-width: 0;
    grid-column: 1;
    padding: 8px 12px;
    border: 0;
  }
  .admin-member-picker-compact td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 12px;
  }
  .admin-member-picker-compact tr:has([data-picker-select]) td:last-child {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    padding: 8px;
    border: 0;
  }
}

/* 자녀 연결: 회원 선택 후 별칭 확인 단계 */
#child-picker {
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 24px;
  overflow-y: auto;
}
#child-picker [hidden] {
  display: none !important;
}
#child-picker .child-picker-heading,
#child-picker .child-picker-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
#child-picker .child-search {
  display: flex;
  align-items: end;
  gap: 12px;
  margin: 20px 0;
}
#child-picker .child-search .member-field {
  flex: 1;
  min-width: 0;
}
#child-picker .child-selected-card {
  display: grid;
  gap: 8px;
  padding: 20px;
  margin: 20px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow-wrap: anywhere;
}
#child-picker .child-selected-card .btn {
  justify-self: start;
  margin-top: 4px;
}
#child-picker .child-alias {
  max-width: none;
  margin: 20px 0;
}
#child-picker .child-picker-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
#child-picker .member-error:empty {
  display: none;
}
#child-picker .member-table {
  overflow-x: auto;
}
#child-picker .child-search-empty {
  padding: 20px 12px;
  margin: 0;
  text-align: center;
  font-size: 12px;
}
@media (max-width: 600px) {
  #child-picker {
    padding: 16px;
  }
  #child-picker .child-search {
    flex-wrap: wrap;
  }
  #child-picker .child-search .member-field {
    flex-basis: 100%;
  }
}

.parent-link-editor {
  display: grid;
  gap: 20px;
  padding: 20px;
  margin-bottom: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.parent-link-editor[hidden] {
  display: none;
}
.parent-link-selection {
  display: grid;
  gap: 8px;
  overflow-wrap: anywhere;
}
.parent-link-selection .btn {
  justify-self: start;
}
.parent-link-editor [data-parent-error]:empty {
  display: none;
}

/* 팝업 검색은 바깥 화면 폭과 무관하게 입력란과 버튼을 두 칸으로 배치합니다. */
.admin-member-picker .unified-search .filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.admin-member-picker .unified-search .filter-bar > .field-label:first-child {
  flex: 1 1 200px;
  min-width: 0;
  max-width: none;
}
.admin-member-picker .unified-search .filter-bar > .btn {
  flex: 0 0 auto;
  margin-left: auto;
}

#members-content .member-relation-dialog {
  width: min(640px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  padding: 0;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}
.member-relation-dialog form {
  display: grid;
  gap: 20px;
}
#members-content .member-relation-dialog p {
  margin: 0;
}
.member-relation-dialog .parent-link-selection {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.member-relation-dialog [data-error]:empty {
  display: none;
}

/* 관계 목록은 하나의 카드 안에서 헤더·표·건수를 이어서 표시합니다. */
#members-content .member-relations-panel > .panel-body {
  padding: 0;
}
#members-content .member-relations-panel > .panel-head {
  flex-wrap: wrap;
  gap: 12px;
}
#members-content .member-relations-panel .member-error:empty {
  display: none;
}
#members-content .member-relations-panel .member-error:not(:empty) {
  margin: 16px 24px;
}
#members-content .member-relations-panel > .panel-body > button {
  margin: 0 24px 16px;
}

/* 일별 결제 상세의 환불 단계 팝업 */
dialog.payment-refund-dialog {
  width: min(800px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  color: var(--ink);
}
dialog.payment-refund-dialog .refund-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
dialog.payment-refund-dialog h2 {
  margin: 0;
  font-size: 22px;
}
.payment-refund-dialog p {
  margin: 10px 0;
  line-height: 1.65;
}
.payment-refund-dialog .refund-heading p {
  margin-bottom: 0;
  color: var(--muted);
}
.refund-heading > .btn {
  flex-shrink: 0;
}
.refund-body {
  padding: 24px 28px 28px;
}
.refund-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
}
.refund-steps li {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}
.refund-steps li > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--soft);
  border: 1px solid var(--line);
  font-weight: 700;
}
.refund-steps .is-current {
  color: var(--primary);
  font-weight: 700;
}
.refund-steps .is-current > span {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.refund-steps .is-done > span {
  background: var(--primary-soft);
  border-color: var(--primary-soft);
  color: var(--primary);
}
.payment-refund-dialog fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.payment-refund-dialog legend,
.payment-refund-dialog h3 {
  margin: 0 0 16px;
  padding: 0;
  font-size: 15px;
  font-weight: 700;
}
.refund-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.refund-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.refund-option:has(input:checked) {
  background: var(--primary-soft);
  border-color: var(--primary);
}
.refund-option input,
.refund-confirm input {
  accent-color: var(--primary);
  flex-shrink: 0;
  margin: 3px 0 0;
}
.refund-option strong,
.refund-option small {
  display: block;
  line-height: 1.5;
}
.refund-option small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}
.payment-refund-dialog section:not(:empty) {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.payment-refund-dialog .field-label {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}
.payment-refund-dialog [hidden] {
  display: none !important;
}
.payment-refund-dialog .admin-detail {
  padding: 18px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.payment-refund-dialog dd {
  overflow-wrap: anywhere;
}
.payment-refund-dialog .refund-total dd {
  color: var(--primary);
}
.payment-refund-dialog .refund-retained-amount dd {
  color: #c2410c;
}
:root[data-theme="dark"] .payment-refund-dialog .refund-retained-amount dd {
  color: #fb923c;
}
.payment-refund-dialog .refund-final-amount {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.refund-final-label {
  display: inline-block;
  margin-left: 6px;
  color: var(--primary);
  font-size: 12px;
}
.payment-refund-dialog .refund-final-amount strong {
  color: var(--primary);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
}
.refund-final-amount small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}
.refund-amount-editor {
  margin-top: 16px;
}
.payment-refund-dialog .refund-wide-field {
  grid-column: 1 / -1;
}
.refund-wide-field dd {
  white-space: pre-wrap;
}
.refund-flow-next {
  margin-top: 20px;
}
.refund-flow-next .field-help {
  margin-top: 6px;
}
.refund-amount-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.refund-amount-input {
  display: flex;
  flex: 1 1 180px;
  align-items: center;
  gap: 8px;
  max-width: 280px;
}
.refund-amount-input .field {
  min-width: 0;
  text-align: right;
}
.refund-amount-editor .field-help {
  margin-top: 8px;
}
.refund-amount-editor [data-amount-feedback]:empty {
  display: none;
}
.refund-amount-editor .is-invalid {
  color: var(--danger, #dc2626);
}
.refund-breakdown {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
}
.refund-breakdown summary {
  cursor: pointer;
  font-weight: 600;
}
.refund-breakdown p + p {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.refund-reason .required {
  display: inline;
  font-style: normal;
  margin-left: 6px;
  color: var(--red);
  font-size: 11px;
}
.refund-confirm {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--soft);
}
.refund-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}
.refund-original-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 12px 0;
}
.payment-refund-dialog [data-error]:empty {
  display: none;
}
.payment-refund-dialog [data-error]:not(:empty) {
  padding: 12px 16px;
  background: var(--button-danger-soft);
  border-radius: 8px;
  margin: 18px 0 0;
}
@media (max-width: 640px) {
  dialog.payment-refund-dialog {
    max-height: calc(100dvh - 24px);
  }
  .payment-refund-dialog .refund-heading,
  .refund-body {
    padding: 20px 16px;
  }
  .refund-options {
    grid-template-columns: 1fr;
  }
  .refund-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 8px;
  }
  .refund-actions .btn,
  .refund-original-card .btn {
    width: 100%;
  }
}

.refund-period {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.refund-period h4 {
  margin: 0 0 12px;
  line-height: 1.6;
  font-size: 13px;
}
.payment-refund-dialog .refund-period .admin-detail {
  margin: 0 0 12px;
}
.refund-period-result {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.refund-period-result strong {
  color: var(--primary);
  white-space: nowrap;
}

/* 상세 페이지에서 중단 후 이어가는 환불 진행 카드 */
.payment-refund-dialog.refund-progress-panel [data-flow] {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.refund-progress-panel .refund-actions {
  gap: 8px;
  flex-wrap: wrap;
}

.refund-progress-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.refund-stage-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 24px 0 18px;
}
.payment-refund-dialog .refund-stage-heading h3 {
  margin: 0 0 8px;
  font-size: 15px;
}
.refund-stage-heading > .badge {
  flex-shrink: 0;
}
.payment-refund-dialog .refund-flow-amounts {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.refund-flow-amounts > div {
  padding: 20px;
}
.refund-flow-amounts > div + div {
  border-left: 1px solid var(--line);
}
.payment-refund-dialog .refund-flow-amounts dd {
  margin-top: 10px;
  font-size: 20px;
  font-weight: 700;
}
.payment-refund-dialog .refund-flow-amounts .refund-final-amount {
  grid-column: auto;
  padding-top: 20px;
  border-top: 0;
  background: var(--primary-soft);
}
.payment-refund-dialog .refund-flow-context {
  grid-template-columns: minmax(180px, 1fr) 2fr;
  margin: 24px 0 0;
  padding: 20px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}
.refund-reason-value {
  white-space: pre-wrap;
}
.refund-active-task {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.payment-refund-dialog .refund-task-amounts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin: 18px 0 0;
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.refund-task-amounts dd {
  font-variant-numeric: tabular-nums;
}
.refund-completion-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
}
.refund-completion-icon {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
}
.refund-original-history {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.refund-original-history summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
}
@media (max-width: 700px) {
  .refund-stage-heading {
    flex-direction: column-reverse;
    gap: 10px;
  }
  .payment-refund-dialog .refund-flow-amounts,
  .payment-refund-dialog .refund-flow-context {
    grid-template-columns: minmax(0, 1fr);
  }
  .refund-flow-amounts > div {
    padding: 16px;
  }
  .refund-flow-amounts > div + div {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .payment-refund-dialog .refund-flow-amounts .refund-final-amount {
    border-top: 1px solid var(--line);
    padding-top: 16px;
  }
  .refund-active-task {
    padding: 16px;
  }
  .refund-active-task .refund-task-heading > .btn {
    width: 100%;
  }
}
.payment-refund-dialog .refund-progress-status h3 {
  margin: 0;
}
.refund-progress-panel .refund-flow-next {
  padding: 18px;
  border-radius: 12px;
  background: var(--soft);
}
.refund-progress-panel .refund-secondary-actions {
  justify-content: flex-start;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.payment-refund-dialog.refund-edit-dialog {
  width: min(560px, calc(100vw - 32px));
}
.refund-edit-dialog .refund-actions {
  gap: 8px;
}
.refund-edit-preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px;
  margin: 18px 0 24px;
  border-radius: 10px;
  background: var(--soft);
}
.refund-edit-preview strong {
  color: var(--primary);
  font-size: 20px;
  white-space: nowrap;
}
.refund-edit-dialog [data-edit-error]:empty {
  display: none;
}

.refund-progress-panel .refund-progress-description {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 12px;
}

.refund-repayment-details {
  margin-top: 24px;
}
.refund-repayment-heading,
.refund-repayment-card-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.payment-refund-dialog .refund-repayment-heading h3 {
  margin: 0;
}
.refund-repayment-card + .refund-repayment-card {
  margin-top: 12px;
}
.refund-repayment-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
}
.refund-repayment-card-status {
  font-size: 12px;
  margin-bottom: 16px;
}
.payment-refund-dialog .refund-repayment-fields {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
@media (max-width: 1000px) {
  .payment-refund-dialog .refund-repayment-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .payment-refund-dialog .refund-repayment-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

.refund-flow-stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0 0 20px;
  margin: 0 0 20px;
  border-bottom: 1px solid var(--line);
  list-style: none;
}
.payment-order-statuses {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
.refund-flow-stages li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}
.refund-flow-stages li > span {
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--soft);
}
.refund-flow-stages .is-current {
  color: var(--primary);
  font-weight: 700;
}
.refund-flow-stages .is-current > span {
  background: var(--primary);
  color: white;
}
.refund-flow-stages .is-done {
  color: var(--text);
}
.refund-cancel-task {
  margin-top: 24px;
}
.refund-task-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.payment-refund-dialog .refund-task-heading h3 {
  margin: 0 0 8px;
}
.refund-task-heading .btn {
  flex-shrink: 0;
}
.refund-original-card small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}
@media (max-width: 640px) {
  .refund-flow-stages li {
    flex-direction: column;
    text-align: center;
  }
  .refund-task-heading {
    flex-direction: column;
  }
}

/* 현장 개별 결제 목록: 공통 목록 헤더와 페이징을 유지합니다. */
.onsite-payment-detail {
  display: grid;
  gap: 22px;
  min-width: 0;
}
.onsite-payment-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.onsite-payment-detail .panel {
  min-width: 0;
}
.onsite-payment-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.onsite-payment-identifier {
  grid-column: 1 / -1;
}
.onsite-payment-followup {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line);
}
.onsite-payment-followup .actions {
  justify-content: flex-start;
  flex-wrap: wrap;
}
.onsite-payment-followup p {
  margin: 0;
}
.onsite-payment-followup #onsite-error:empty {
  display: none;
}
@media (max-width: 1000px) {
  .onsite-payment-info-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .onsite-payment-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .onsite-payment-summary {
    grid-template-columns: minmax(0, 1fr);
  }
  .onsite-payment-followup .btn {
    white-space: normal;
    text-align: center;
  }
}
#onsite-payments-content .onsite-payment-search {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#onsite-payments-content .onsite-payment-search > .actions {
  grid-column: 1 / -1;
  justify-self: end;
}
.onsite-payment-table {
  min-width: 1100px;
}
.onsite-payment-table small {
  display: block;
  margin-top: 4px;
}
@media (max-width: 760px) {
  #onsite-payments-content .onsite-payment-search {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 영단어 목록 및 읽기 전용 상세 팝업 */
.english-word-table {
  min-width: 1200px;
}
.english-word-table .english-word-text {
  min-width: 130px;
  max-width: 230px;
  overflow-wrap: anywhere;
  white-space: normal;
}
.english-word-table .english-word-meaning {
  min-width: 180px;
  max-width: 320px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.english-word-dialog {
  width: min(960px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: hidden;
}
.english-word-dialog[open] {
  display: flex;
  flex-direction: column;
}
.english-word-dialog .dialog-head {
  justify-content: space-between;
  flex-shrink: 0;
}
.english-word-dialog .dialog-body {
  display: grid;
  gap: 20px;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}
.english-word-dialog .dialog-actions {
  flex-shrink: 0;
}
.english-word-dialog .admin-detail dd {
  white-space: pre-wrap;
}
.english-word-detail-section {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.english-word-detail-section h3 {
  margin: 0 0 18px;
  font-size: 14px;
}
.english-word-dialog .english-word-metadata {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.english-word-dialog .english-word-content .admin-detail-grid {
  grid-template-columns: minmax(0, 1fr);
}
.english-word-content .english-word-answers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.english-word-answers li {
  max-width: 100%;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  overflow-wrap: anywhere;
}
.english-word-highlight {
  padding: 0 2px;
  border-radius: 2px;
  background: #fff1a8;
  color: inherit;
  font-weight: 600;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
[data-theme="dark"] .english-word-highlight {
  background: #67591f;
}
body:has(.english-word-dialog[open]) {
  overflow: hidden;
}
@media (max-width: 1000px) {
  .english-word-dialog .english-word-metadata {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .english-word-dialog .english-word-metadata {
    grid-template-columns: minmax(0, 1fr);
  }
  .english-word-dialog .dialog-head,
  .english-word-dialog .dialog-body,
  .english-word-dialog .dialog-actions {
    padding: 16px;
  }
  .english-word-detail-section {
    padding: 16px;
  }
}
@media (min-width: 1151px) {
  #english-word-search {
    grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(110px, 1fr)) auto;
  }
}

/* 영단어 학습 배정 및 회차별 단어 팝업 */
.english-study-table {
  min-width: 760px;
}
.english-study-dialog {
  width: min(820px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}
.english-study-dialog[open] {
  display: flex;
  flex-direction: column;
}
.english-study-dialog .dialog-head,
.english-study-dialog .dialog-actions {
  flex-shrink: 0;
}
.english-study-dialog .dialog-body {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}
.english-study-detail-dialog {
  width: min(960px, calc(100vw - 32px));
  height: min(860px, calc(100dvh - 32px));
}
.english-study-detail-dialog .dialog-body:has(.english-study-words) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 20px;
  overflow: hidden;
}
.english-study-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.english-study-words {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
}
.english-study-words .panel-head,
.english-study-words .table-footer {
  flex-shrink: 0;
}
.english-study-words .table-wrap {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}
.english-study-words thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
}
.english-study-word {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.english-study-generate-form {
  display: grid;
  gap: 20px;
  margin-top: 20px;
}
body:has(.english-study-dialog[open]) {
  overflow: hidden;
}
@media (min-width: 1151px) {
  #english-study-search {
    grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(140px, 1fr) auto;
  }
}

.english-study-words table {
  min-width: 660px;
  width: 100%;
  table-layout: fixed;
}
.english-study-words th:first-child {
  width: 64px;
}
.english-study-words th:nth-child(2) {
  width: 24%;
}
.english-study-words th:nth-child(4),
.english-study-words th:nth-child(5) {
  width: 100px;
}

.english-study-words td.english-study-word,
.english-study-words td.english-study-meaning {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (max-width: 1000px) {
  .english-study-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .english-study-summary {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }
  .english-study-dialog .dialog-head,
  .english-study-dialog .dialog-body,
  .english-study-dialog .dialog-actions {
    padding: 16px;
  }
}

/* 영단어 시험 상세: 문항과 선택값을 함께 확인합니다. */
.english-exam-summary { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.english-exam-questions { display: grid; gap: 20px; margin-top: 24px; }
.english-exam-question { border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.english-exam-question h3 { margin: 0 0 16px; font-size: 16px; overflow-wrap: anywhere; }
.english-exam-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.english-exam-options li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  overflow-wrap: anywhere;
}
.english-exam-options li.is-selected { border-color: var(--primary); background: var(--primary-soft); }
.english-exam-option-tags { display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0; }
@media (max-width: 600px) {
  .english-exam-question { padding: 14px; }
  .english-exam-options li { align-items: flex-start; flex-direction: column; gap: 8px; }
}

/* 관리자 회원 시험 테스트의 답안 작성 컨트롤입니다. */
.english-exam-writing-bar,
.english-exam-submit-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.english-exam-writing-bar .field-help {
  flex: 1 1 260px;
  margin: 0;
}
.english-exam-options li.is-writable {
  padding: 0;
}
.english-exam-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 14px 12px;
  cursor: pointer;
}
.english-exam-choice input {
  flex-shrink: 0;
  margin-top: 3px;
  accent-color: var(--primary);
}
.english-exam-choice:has(input:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 8px;
}
.english-exam-save-message:empty {
  display: none;
}

/* 제공 단어별 학습 상태와 접을 수 있는 예문입니다. */
.english-assign-word-list {
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 18px;
}
.english-assign-word-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  overflow-wrap: anywhere;
}
.english-assign-word-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.english-assign-word-heading h3 {
  min-width: 0;
  margin: 0;
  font-size: 16px;
}
.english-assign-word-heading > .badge {
  flex-shrink: 0;
}
.english-assign-word-number {
  color: var(--muted);
}
.english-assign-word-meaning {
  margin: 10px 0 18px;
  white-space: pre-wrap;
}
.english-assign-learning {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.english-assign-example {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.english-assign-example summary {
  cursor: pointer;
  font-weight: 600;
}
.english-assign-example summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}
.english-assign-example .admin-detail {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}
.english-assign-example dd {
  white-space: pre-wrap;
}
.english-assign-example:not([open]) .example-open,
.english-assign-example[open] .example-closed {
  display: none;
}
@media (max-width: 600px) {
  .english-assign-word-list { padding: 12px; }
  .english-assign-word-card { padding: 14px; }
  .english-assign-learning { grid-template-columns: 1fr; }
}

/* 시험 검색은 회원·시험일·구분·진행 상태·점수와 검색 버튼의 폭을 각각 확보합니다. */
#english-exams-content .filter-bar {
  grid-template-columns: minmax(200px, 2fr) repeat(4, minmax(150px, 1fr)) auto;
}

#english-exams-content .filter-bar .field,
#english-exams-content .filter-bar .select {
  width: 100%;
  min-width: 0;
}

#english-exams-content .filter-bar > .actions {
  grid-column: 6;
}

@media (max-width: 1350px) {
  #english-exams-content .filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #english-exams-content .filter-bar > .field-label:first-child {
    grid-column: auto;
  }

  #english-exams-content .filter-bar > .actions {
    grid-column: 1 / -1;
    justify-self: end;
  }
}

@media (max-width: 600px) {
  #english-exams-content .filter-bar {
    grid-template-columns: minmax(0, 1fr);
  }
}

.english-assign-dialog .dialog-body {
  display: block;
}
.english-assign-dialog .english-study-summary {
  margin-bottom: 20px;
}
/* 회원 학습 이력에서 이동한 주간 항목을 표시합니다. */
.member-learning-tabs {
  position: static;
}

.learning-history-target {
  outline: 2px solid currentColor;
  outline-offset: -2px;
  scroll-margin-block: 24px;
}

/* 회원 상세 학습 이력: 날짜 검색, 유형 태그, 목록과 조회 전용 상세입니다. */
#member-learning-history .filter-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 18px 16px;
  border-bottom: 0;
}
#member-learning-history .filter-bar > .field-label {
  grid-column: auto;
  min-width: 0;
}
#member-learning-history .filter-bar .field,
#member-learning-history .filter-bar .select {
  width: 100%;
  min-width: 0;
  height: 40px;
}
#member-learning-history .filter-bar > .actions {
  grid-column: -2 / -1;
  justify-self: end;
  padding: 0;
}
#member-learning-history .filter-bar > .field-error {
  grid-column: 1 / -1;
  margin: 0;
}
#member-learning-history .field-error:empty {
  display: none;
}
#member-learning-history .unified-results table {
  min-width: 820px;
  table-layout: fixed;
}
#member-learning-history .unified-results th.member-learning-date {
  width: 230px;
}
#member-learning-history .unified-results th.member-learning-type {
  width: 112px;
}
#member-learning-history .unified-results th.member-learning-branch {
  width: 140px;
}
#member-learning-history .unified-results th:last-child {
  width: 100px;
}
#member-learning-history .unified-results td {
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.65;
}
#member-learning-history .unified-results td:first-child {
  font-variant-numeric: tabular-nums;
}
#member-learning-history .unified-results td:last-child {
  white-space: nowrap;
}
#member-learning-history .member-learning-date-group th {
  width: auto;
  background: var(--soft);
  color: var(--ink);
  font-weight: 600;
}
#member-learning-history .member-learning-description .row-title {
  font-size: 13px;
  line-height: 1.6;
}
#member-learning-history .member-learning-description .row-sub {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.6;
}
#member-learning-history .member-learning-dialog {
  width: min(960px, calc(100vw - 48px));
  max-width: 960px;
  max-height: min(900px, calc(100dvh - 48px));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
}
#member-learning-history .member-learning-dialog[open] {
  display: flex;
  flex-direction: column;
}
.member-learning-dialog .dialog-head,
.member-learning-dialog .dialog-actions {
  flex-shrink: 0;
  padding: 20px 24px;
  background: var(--surface);
}
.member-learning-dialog .dialog-head h2 {
  margin: 0;
}
.member-learning-dialog .dialog-head .btn {
  flex-shrink: 0;
}
.member-learning-dialog .dialog-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 28px;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 24px;
}
.member-learning-dialog .dialog-body > * {
  flex-shrink: 0;
}
.member-learning-dialog .dialog-actions {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--line);
}
.member-learning-dialog .dialog-actions[hidden] {
  display: none;
}
#member-learning-history .member-learning-dialog p {
  margin: 0;
  line-height: 1.7;
}
.member-learning-dialog .member-learning-detail-summary {
  margin: 0;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.member-learning-dialog .member-learning-detail-wide {
  grid-column: 1 / -1;
}
.member-learning-dialog dd {
  overflow-wrap: anywhere;
  line-height: 1.7;
}
.member-learning-dialog .member-learning-detail-section > h3 {
  margin: 0 0 16px;
  font-size: 15px;
}
.member-learning-dialog .member-learning-word-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
}
#member-learning-history .member-learning-dialog .english-assign-word-meaning {
  margin: 12px 0;
}
.member-learning-dialog .english-exam-questions {
  margin-top: 0;
}
#member-learning-history .member-learning-records table {
  min-width: 0;
  table-layout: auto;
}
#member-learning-history .member-learning-records th {
  width: auto;
}
.member-learning-records .panel-head h3 {
  margin: 0;
  font-size: 14px;
}
.member-learning-dialog .member-learning-plan-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
#member-learning-history .member-learning-records td {
  height: auto;
  padding-top: 13px;
  padding-bottom: 13px;
}
#member-learning-history .member-learning-records th:last-child,
#member-learning-history .member-learning-records td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.member-learning-plan-values dd {
  font-variant-numeric: tabular-nums;
}
body:has(.member-learning-dialog[open]) {
  overflow: hidden;
}
@media (max-width: 1050px) {
  #member-learning-history .filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .member-learning-dialog .member-learning-plan-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 16px;
  }
  #member-learning-history .member-learning-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
  }
  .member-learning-dialog .dialog-head,
  .member-learning-dialog .dialog-body,
  .member-learning-dialog .dialog-actions {
    padding: 18px;
  }
  .member-learning-dialog .member-learning-word-list,
  .member-learning-dialog .english-exam-options {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 480px) {
  #member-learning-history .filter-bar {
    grid-template-columns: minmax(0, 1fr);
  }
}

#member-learning-history .badge-teal {
  background: #e5f8f8;
  color: #146b72;
}
:root[data-theme="dark"] #member-learning-history .badge-teal {
  background: #183b40;
  color: #94d9df;
}

/* 계획 상세는 정보를 압축하고, 기록 표는 본문 스크롤의 자연 높이를 유지합니다. */
.member-learning-dialog.member-learning-compact-dialog .dialog-head,
.member-learning-dialog.member-learning-compact-dialog .dialog-actions {
  padding: 14px 20px;
}
.member-learning-dialog.member-learning-compact-dialog .dialog-body {
  gap: 18px;
  padding: 18px 20px;
}
.member-learning-plan-dialog .member-learning-detail-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 14px;
  padding-bottom: 16px;
}
.member-learning-plan-dialog .member-learning-week {
  grid-column: 1 / -1;
}
.member-learning-plan-dialog .member-learning-detail-section > h3 {
  margin-bottom: 12px;
}
.member-learning-dialog.member-learning-plan-dialog .member-learning-plan-values {
  gap: 14px 18px;
  padding: 16px;
}
#member-learning-history .member-learning-plan-dialog .member-learning-records .panel-head {
  min-height: 0;
  padding: 14px 18px;
}
#member-learning-history .member-learning-plan-dialog .member-learning-records td {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* 상담 원문과 계획 의견은 라벨이 있는 독립 카드로 읽습니다. */
.member-learning-consult-dialog .member-learning-detail-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 14px;
  padding-bottom: 16px;
}
.member-learning-consult-dialog .member-learning-week {
  grid-column: 1 / -1;
}
.member-learning-consult-dialog .member-learning-consult-values {
  display: grid;
  gap: 14px;
  margin: 0;
}
.member-learning-consult-values > div {
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.member-learning-consult-values dd {
  overflow-wrap: anywhere;
  line-height: 1.8;
}
.member-learning-consult-dialog .member-learning-detail-section > h3 {
  margin-bottom: 12px;
}

/* 기록 상세는 항목·과목·수행량을 구분하고 추가 학습에는 별도 기록임을 안내합니다. */
.member-learning-record-dialog .member-learning-detail-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 14px;
  padding-bottom: 16px;
}
.member-learning-record-dialog .member-learning-detail-section > h3 {
  margin-bottom: 12px;
}
.member-learning-record-dialog .member-learning-record-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
#member-learning-history .member-learning-dialog .member-learning-record-note {
  margin-top: 12px;
}
.member-learning-record-dialog .member-learning-week {
  grid-column: 1 / -1;
}
.member-learning-record-values dd {
  font-variant-numeric: tabular-nums;
}

/* 영단어·시험 상세도 기본 정보와 결과를 구분하고 동일한 여백을 사용합니다. */
.member-learning-english-dialog .member-learning-detail-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 14px;
  padding-bottom: 16px;
}
.member-learning-english-dialog .member-learning-week {
  grid-column: 1 / -1;
}
.member-learning-english-dialog .member-learning-detail-section > h3 {
  margin-bottom: 12px;
}
.member-learning-dialog .member-learning-activity-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 18px;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.member-learning-activity-values dd {
  font-variant-numeric: tabular-nums;
}
.member-learning-english-dialog .english-assign-word-card,
.member-learning-english-dialog .english-exam-question {
  padding: 16px;
}
@media (max-width: 700px) {
  .member-learning-dialog .member-learning-activity-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 회원 상세에서도 출결관리의 검색·목록 패널 간격을 유지합니다. */
.member-detail-page #attendances-content {
  display: grid;
  gap: 20px;
  min-width: 0;
}
.member-detail-page .attendance-table .class-list-attendance-time {
  min-width: 180px;
}

.member-detail-page #attendances-content > .panel,
.member-detail-page #attendances-content > .page-heading {
  margin: 0;
}
@media (min-width: 701px) {
  .member-detail-page #attendances-content .attendance-search {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 수업관리 공통 목록: 번호 → 회원(이름/아이디) → 지점 → 기간 → 업무 항목 */
.class-list-table .class-list-number,
.branch-list-table .admin-list-number,
.admin-list-table .admin-list-number {
  width: 64px;
  min-width: 64px;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.class-list-member-name {
  display: block;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.class-list-member-id {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.class-list-period-date {
  display: block;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.class-list-period-date + .class-list-period-date {
  margin-top: 4px;
}
.plan-request-table .request-branch-column {
  width: 110px;
}
.unified-results .plan-request-table.class-list-table {
  min-width: 1100px;
}