/* 관리자·강사 시간표 공통 색상. 화면별 포털 테마와 무관하게 같은 상태는 같은 색을 쓴다. */
:root {
    --lh-book-surface: #FFFFFF;
    --lh-book-grid: #CACACA;
    --lh-book-header: #F8F9FA;
    --lh-book-closed: #EDEFF2;
    --lh-book-today: color-mix(in srgb, #8B0020 14%, #FFFFFF);
    --lh-book-text: #212529;
    --lh-book-muted: #6C757D;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

@media (max-width: 959.98px) {
    html {
        overscroll-behavior: none;
    }
}

/*a, .btn-link {*/
/*    color: #006bb7;*/
/*}*/

a {
    text-decoration: none;
}

.btn-primary {
    color: #fff;
    background-color: #8B0020;
    border-color: #8B0020;
    font-weight: 600;
    text-transform: none;
}

.btn-primary:hover {
    color: #fff;
    background-color: #6B0018;
    border-color: #6B0018;
}

.btn-primary:active {
    color: #fff !important;
    background-color: #520012 !important;
    border-color: #520012 !important;
}

.btn-outline-primary {
    color: #8B0020;
    border-color: #D4A3AD;
    background-color: #FFFFFF;
    font-weight: 600;
}

.btn-outline-primary:hover {
    color: #8B0020;
    background-color: #FCE8EC;
    border-color: #8B0020;
}

.btn-outline-primary:active {
    background-color: #F8D3DA !important;
    border-color: #8B0020 !important;
    color: #8B0020 !important;
}

/* .active는 :active(마우스 누름) 의사클래스가 아니라 선택된 상태를 나타내는 별도 CSS 클래스라
   위 :hover/:active 오버라이드로는 안 잡힌다 — Bootstrap 기본값(파란 배경)이 그대로 노출되던 원인.
   .ui-section-tab.active 등 앱 전역의 "선택된 칩/탭" 패턴과 동일하게 진한 배경 + 흰 글자로 통일한다. */
.btn-outline-primary.active {
    background-color: #8B0020;
    border-color: #8B0020;
    color: #FFFFFF;
}

.btn-outline-secondary.active {
    background-color: #424242;
    border-color: #424242;
    color: #FFFFFF;
}

.btn-primary:disabled {
    background-color: #CCCCCC;
    border-color: #CCCCCC;
    color: #666666;
    cursor: not-allowed;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.btn, .ui-section-tab, .ui-mobile-tab-item {
    -webkit-tap-highlight-color: transparent;
}

.btn-primary:focus {
    box-shadow: none;
}

.btn-primary:focus-visible {
    color: #fff;
    background-color: #6B0018;
    border-color: #6B0018;
    box-shadow: 0 0 0 0.25rem rgba(139, 0, 32, 0.4);
    outline: none;
}

.btn-outline-primary:focus, .btn-outline-secondary:focus {
    box-shadow: none;
}

.btn-outline-primary:focus-visible, .btn-outline-secondary:focus-visible {
    outline: 2px solid #8B0020;
    outline-offset: 2px;
}

/* "← 목록" 뒤로가기 버튼 — 외곽선 없는 텍스트 버튼 */
.ui-back-to-list-btn {
    border: none;
    background-color: transparent;
    color: #6C757D;
    font-weight: 500;
}

.ui-back-to-list-btn:hover { color: #424242; }
.ui-back-to-list-btn:focus { box-shadow: none; }
.ui-back-to-list-btn:focus-visible { outline: 2px solid #8B0020; outline-offset: 2px; }

.form-control {
    border-color: #CACACA;
}

.form-control:hover:not(:disabled):not(:focus) {
    border-color: #9A9A9A;
}

.form-control:focus {
    border-color: #8B0020;
    box-shadow: 0 0 0 0.2rem rgba(139, 0, 32, 0.25);
    outline: none;
}

.form-control:disabled {
    background-color: #E9ECEF;
    border-color: #E0E0E0;
    color: #9A9A9A;
    cursor: not-allowed;
}

.form-control.is-invalid {
    border-color: #D32F2F;
}

.form-control.is-invalid:focus {
    border-color: #D32F2F;
    box-shadow: 0 0 0 0.2rem rgba(211, 47, 47, 0.25);
}

.invalid-feedback {
    color: #D32F2F;
    font-size: 13px;
    margin-top: 6px;
    font-weight: 500;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}


:root,
:root.light {
    --bg-color: #f7f5f2;
    --surface: #ffffff;
    --text-grey: #9a9a9a;
    --text-primary: #0e0e0e;
    --border-color: #cacaca;
}

/* Pie chart legend list (used by the home dashboard cards and their detail dialogs) */
.ui-pie-legend-list {
    flex: 0 0 auto;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
    font-weight: 400;
}

.ui-pie-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ui-pie-legend-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
}

.ui-pie-legend-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-pie-legend-count {
    font-weight: 700;
    margin-left: auto;
    padding-left: 6px;
    white-space: nowrap;
}

/* Shown instead of RadzenPieSeries when its data is empty - an empty series makes
   Radzen compute NaN slice coordinates (division by a zero total), which the browser
   rejects as an invalid SVG path (see docs/wiki/02-decisions for the incident). Height
   is set per-context below so the tile/dialog header doesn't visibly resize. */
.ui-pie-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lh-text-muted);
    font-size: 11px;
}

.ui-stat-dialog-header .ui-pie-empty {
    height: 220px;
}

/* Fixed-height master/detail layout for the statistics detail dialogs:
   header (date/year filter + chart) stays put, only the two table panels below scroll. */
.ui-stat-dialog {
    display: flex;
    flex-direction: column;
    height: 72vh;
    max-height: 680px;
    min-height: 460px;
}

.ui-stat-dialog-header {
    flex: 0 0 auto;
}

/* 통계 다이얼로그 헤더의 "시작일/종료일/연도" 라벨 — 카드 제목 급(12px, 500)으로 통일(2026-09-05). */
.ui-stat-dialog-header .form-label {
    font-weight: 500;
}

.ui-stat-dialog-header .rz-chart {
    height: 220px;
    --rz-chart-axis-font-size: 0.6875rem;
}

.ui-stat-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    gap: 16px;
    margin-top: 12px;
}

.ui-stat-master-panel,
.ui-stat-detail-panel {
    min-height: 0;
    overflow-y: auto;
    border: 1px solid var(--lh-border);
    border-radius: 8px;
}

.ui-stat-master-panel {
    flex: 0 0 38%;
    min-width: 220px;
}

.ui-stat-detail-panel {
    flex: 1 1 auto;
    min-width: 0;
}

/* 모바일에서는 마스터/디테일 두 표를 가로로 나란히 두면 각 칸이 너무 좁아져 보기 어렵다 —
   세로로 쌓고 마스터 패널은 고정 높이로 줄여 디테일 패널에 공간을 더 준다(2026-08-22). */
/* 2026-10-02: 모바일에서 다이얼로그 높이(72vh)를 고정해 두면 헤더(기간 입력 + 차트)가 300~400px를
   차지해 상세 패널에 22~130px만 남았다(일일 매출 22px — 날짜를 눌러도 상세 표가 안 보임). 모바일은 고정
   높이를 풀고 상세 표를 내부 스크롤 없이 모두 펼쳐, 다이얼로그 본문(modal-dialog-scrollable)이 스크롤되게 한다. */
@media (max-width: 599.98px) {
    .ui-stat-dialog {
        height: auto;
        max-height: none;
        min-height: 0;
    }

    .ui-stat-dialog-body {
        flex-direction: column;
    }

    .ui-stat-master-panel {
        flex: 0 0 auto;
        max-height: 160px;
        min-width: 0;
    }

    .ui-stat-detail-panel {
        flex: 0 0 auto;
        min-height: 120px;
        overflow-y: visible;
    }
}

.ui-stat-master-panel table thead th,
.ui-stat-detail-panel table thead th {
    position: sticky;
    top: 0;
    background: var(--lh-surface);
    z-index: 1;
}

.ui-stat-master-row {
    cursor: pointer;
}

/* 통계 다이얼로그에서 고른 날짜(월·항목) 행은 연한 버건디로 칠한다. Bootstrap 표는 칸마다 자체 배경
   (--bs-table-bg, table-hover의 inset 그림자)을 칠해 행(tr) 배경이 가려지므로 칸 단위로 덮는다
   (2026-10-03 사용자 요청 — 회원 목록 선택 행과 같은 #F8ECEF). */
.ui-stat-master-row.selected > td {
    --bs-table-bg: #F8ECEF;
    --bs-table-bg-state: #F8ECEF;
    --bs-table-accent-bg: #F8ECEF;
    background-color: #F8ECEF;
    color: #8B0020;
    font-weight: 600;
}

/* Use Class (not Style) to narrow MudDatePicker fields: MudBlazor's picker copies the
   component's Style string onto the popup calendar's own paper too, which would shrink
   the calendar popup to the same width as the field. Class is not shared with the popup. */
.ui-stat-date-field {
    width: 175px;
}

/* 2026-10-02: 모바일에서 시작일·종료일(175px × 2)이 다이얼로그 폭을 넘어 종료일 칸이 오른쪽으로 잘렸다 —
   날짜 묶음을 한 줄 전체로 두고 두 칸이 남은 폭을 반씩 나눠 쓴다. */
@media (max-width: 599.98px) {
    .ui-stat-dialog-header div:has(> div > .ui-stat-date-field) {
        flex: 1 1 100%;
        min-width: 0;
    }

    .ui-stat-dialog-header div:has(> .ui-stat-date-field) {
        flex: 1 1 0;
        min-width: 0;
    }

    .ui-stat-dialog-header .ui-stat-date-field {
        width: 100%;
        min-width: 0;
    }
}

/* ============================================================
   회원 관리 (User Management) 공용 UI 클래스
   Browse(7:5)/Focus(12/12)/Mobile flat 모드에서 UserList, UserInfoPanel,
   UserAccount, UserInfo, UserBookList, UserLessonList, UserTicketList,
   UserTicketInfo 등 여러 컴포넌트가 공유하므로 전역으로 둔다(Blazor CSS 격리
   ::deep 함정 회피 목적, docs/wiki/01-planning/03-ui-ux/10-user-management-design.md 참고).
   ============================================================ */

.ui-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    white-space: nowrap;
}

.ui-badge-active { background-color: #D8F3DC; color: #2D6A4F; }
.ui-badge-upcoming { background-color: #DBEAFE; color: #1D4ED8; }
.ui-badge-expired { background-color: #E9ECEF; color: #6C757D; }
.ui-badge-refunded { background-color: #F8D7DA; color: #D90429; }
.ui-badge-deleted { background-color: #E9ECEF; color: #6C757D; text-decoration: line-through; }
.ui-badge-holding { background-color: #FEF3C7; color: #B45309; }

.ui-toggle-group {
    display: inline-flex;
    border: 1px solid #CACACA;
    border-radius: 4px;
    overflow: hidden;
    width: fit-content;
}

.ui-toggle-item {
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    color: #424242;
    background-color: #FFFFFF;
    border: none;
    border-right: 1px solid #CACACA;
    cursor: pointer;
    white-space: nowrap;
}

.ui-toggle-item:last-child { border-right: none; }
.ui-toggle-item.active { background-color: #8B0020; color: #FFFFFF; font-weight: 700; }
.ui-toggle-item:focus-visible { outline: 2px solid #8B0020; outline-offset: -2px; }

.ui-card-box {
    border: 1px solid #CACACA;
    border-radius: 6px;
    padding: 16px;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ui-card-box-header {
    font-size: 14px;
    font-weight: 700;
    color: #8B0020;
    border-bottom: 1px solid #E0E0E0;
    padding-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.ui-kv-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
}

.ui-kv-list--grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 12px;
}

.ui-kv-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px dashed #E0E0E0;
}

.ui-kv-list--grid-2 .ui-kv-item { border-bottom: none; padding: 2px 0; }

.ui-kv-item:last-child { border-bottom: none; }
.ui-kv-key { color: #6C757D; white-space: nowrap; }
.ui-kv-val { font-weight: 600; color: #0E0E0E; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ui-kv-val--wrap { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.ui-account-info-row { min-height: 53px; }
.ui-account-kakao { grid-column: 1 / -1; min-width: 0; border-bottom: 1px dashed #E0E0E0; padding-bottom: 6px; }
.ui-account-device-count {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--lh-primary, #8B0020);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ui-account-device-count:focus-visible { outline: 2px solid #8B0020; outline-offset: 3px; }
.ui-registered-devices { display: flex; flex-direction: column; gap: 20px; }
.ui-registered-device { border-bottom: 1px solid #CACACA; padding-bottom: 12px; }
.ui-registered-device:last-child { padding-bottom: 0; border-bottom: 0; }
.ui-registered-device-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 10px;
    margin-bottom: 6px;
    background-color: #F4F4F4;
}
.ui-registered-device > .ui-kv-list { padding: 0 10px; gap: 2px; }
.ui-registered-device .ui-kv-item { border-bottom: 0; }

/* .ui-kv-item 안에서 UiUpdate*(수정 가능 필드) 컴포넌트가 자체 py-2 패딩 + UiBody(Typo.body2 →
   Bootstrap .small, 12px 기준 0.875em=10.5px)를 쓰면서 평범한 .ui-kv-key/.ui-kv-val 행(예: 아이디)과
   글자 크기·굵기·행 높이가 서로 어긋나던 문제(2026-08-22). 라벨/값을 .ui-kv-key/.ui-kv-val과 동일한
   타이포그래피로 맞추고 자체 패딩은 제거해 .ui-kv-item의 padding: 4px 0에만 의존하게 한다.
   선택자를 .ui-kv-list .ui-kv-item ...(세 단계)로 둔 것은 스타일 우선순위 때문이다 — 예를 들어
   UiUpdateTextField.razor 자체의 scoped 스타일이 .ui-update-text-placeholder에
   color: var(--text-grey) !important(#9a9a9a)를 이미 걸어 두고 있어(다른 목적의 기존 규칙),
   .ui-kv-item .ui-update-text-placeholder(클래스 2개, 명시도 동일)로는 로드 순서상
   Blazor의 scoped 번들(Frontend.Web.styles.css, app.css보다 나중에 로드됨)에 밀렸다
   (아이디 #6C757D vs 이름 #9a9a9a로 라벨 색이 달라 보이던 원인, 2026-08-22 재수정). */
.ui-kv-list .ui-kv-item .ui-update-text-placeholder,
.ui-kv-list .ui-kv-item .ui-field-label {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #6C757D !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ui-kv-list .ui-kv-item .ui-update-text-body {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #0E0E0E !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* UiUpdateRadioGroup/UiUpdateCheckBox는 라벨/값이 아니라 자신의 루트 래퍼 자체에 py-2를 둬서(다른
   UiUpdate* 컴포넌트와 달리) 위 라벨/값 패딩 제거만으로는 행 높이가 맞춰지지 않았다. 코멘트가 있는
   UiUpdateCheckComment만 코멘트 줄 공간이 실제로 필요하므로 제외한다 — 처음엔 `.flex-column`을
   구분자로 썼으나 UiUpdateCheckBoxGroup/UiUpdateAccessibility도 편집 모드 확장을 위해 같은
   `d-flex flex-column py-2` 래퍼를 쓰고 있어 이 두 컴포넌트(유입경로/접근성)까지 함께 제외되어
   행 높이가 8px 더 커지는 회귀가 있었다(2026-08-22) — CheckComment 전용 마커 클래스로 좁혔다. */
.ui-kv-item > .py-2:not(.ui-update-comment-root) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* UiUpdateCheckComment(.ui-update-comment-root, 예: 블랙 회원)는 코멘트 줄 공간이 필요해 위 규칙에서
   제외했지만, 그 결과 .ui-kv-item 자체 padding-top(4px) 위에 이 컴포넌트의 py-2(8px)가 그대로
   더해져 이 행만 위쪽 여백이 유독 커 보였다(2026-08-22). 위쪽만 지우고 아래쪽은 코멘트 줄이
   실제로 필요로 하는 여백이라 유지한다. */
.ui-kv-item > .py-2.ui-update-comment-root {
    padding-top: 0 !important;
}

/* UiUpdateCheckComment의 자유 입력 코멘트(예: 블랙 회원 메모)는 값이 아니라 보조 설명 텍스트라
   굵게/진하게 강조하지 않는다 — 위 규칙이 지운 여백만 한 줄 정도 되살린다. */
.ui-kv-list .ui-kv-item .ui-update-text-body.mt-1 {
    font-weight: 400 !important;
    color: #6C757D !important;
    margin-top: 4px !important;
}

/* 회원/레슨 코멘트처럼 길이 제한이 없는 자유 입력 텍스트용 — 한 줄 말줄임 대신 2줄 클램프로
   Focus 360 개요 카드(UserFocusOverview)의 그리드 폭을 벗어나지 않게 한다 */
.ui-kv-val--clamp {
    text-align: left;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
}

/* 회원 탭 (여러 회원을 동시에 열어두는 탭) */
.ui-member-tab-bar {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    border-bottom: 2px solid #E0E0E0;
    padding-bottom: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    min-width: 0;
}

.ui-member-tab-wrapper {
    display: flex;
    align-items: center;
    background-color: #F7F5F2;
    border: 1px solid #CACACA;
    border-radius: 4px 4px 0 0;
    padding: 2px 4px;
    flex: 0 0 auto;
}

.ui-member-tab-wrapper.active {
    background-color: #FFFFFF;
    border-color: #CACACA #CACACA #FFFFFF #CACACA;
    margin-bottom: -6px;
}

.ui-member-tab {
    padding: 4px 8px;
    font-size: 13px;
    font-weight: 500;
    color: #6C757D;
    background: none;
    border: none;
    cursor: pointer;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-member-tab-wrapper.active .ui-member-tab { color: #8B0020; font-weight: 700; }
.ui-member-tab:focus-visible { outline: 2px solid #8B0020; }

.ui-member-tab-close {
    font-size: 11px;
    color: #9A9A9A;
    border: none;
    background: none;
    cursor: pointer;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.ui-member-tab-close:hover { background-color: #E0E0E0; color: #424242; }
.ui-member-tab-close:focus-visible { outline: 2px solid #8B0020; }

/* 회원 상세 5개 섹션 탭 (계정 정보 / 지점 정보 / 예약 목록 / 레슨 목록 / 수강권) */
.ui-section-tab-bar {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid #CACACA;
    padding-bottom: 8px;
    overflow-x: auto;
}

.ui-section-tab {
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #424242;
    background-color: #F7F5F2;
    border: 1px solid #CACACA;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    flex: 0 0 auto;
}

.ui-section-tab.active { background-color: #8B0020; color: #FFFFFF; font-weight: 700; border-color: #8B0020; }
.ui-section-tab:focus { outline: none; box-shadow: none; }
.ui-section-tab:focus-visible { outline: 2px solid #8B0020; }

/* 회원 상세(Browse/Focus 공통)를 감싸는 카드 */
.ui-user-detail-card {
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    padding: 20px;
}

.ui-detail-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

/* 회원 탭은 헤더와 분리된 자체 행 — 가로 스크롤만 허용하고 세로로 줄바꿈되지 않게 함 */
.ui-detail-tab-row {
    overflow: hidden;
    margin-bottom: 12px;
}

.ui-focus-member-id {
    font-size: 14px;
    font-weight: 700;
    color: #0E0E0E;
}

.ui-focus-member-id .ui-focus-member-meta {
    font-size: 12px;
    font-weight: 400;
    color: #6C757D;
}

/* 목록과 함께 보기(Browse) 모드에서 회원 탭 바 위에 노출되는 식별 정보 */
.ui-browse-member-meta {
    font-size: 12px;
    color: #6C757D;
    margin-bottom: 4px;
}

.ui-ticket-card {
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid #CACACA;
    border-radius: 6px;
    padding: 12px;
    background-color: #FFFFFF;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.ui-ticket-card.selected { border-color: #8B0020; border-width: 2px; background-color: #FCE8EC; }
.ui-ticket-card:focus-visible { outline: 2px solid #8B0020; outline-offset: 2px; }

/* 수강권 요약 그리드 (Focus: 4열, Browse/Mobile: 1열) */
.ui-ticket-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    width: 100%;
}

.ui-ticket-summary-grid--single {
    grid-template-columns: 1fr;
}

.ui-ticket-detail-panel {
    border: 1px solid #8B0020;
    border-radius: 8px;
    padding: 14px;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-top: 8px;
}

.ui-ticket-stat-tiles {
    display: flex;
    gap: 8px;
    width: 100%;
}

.ui-stat-tile {
    flex: 1;
    background-color: #F7F5F2;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    padding: 6px;
    text-align: center;
}

.ui-stat-tile-label { font-size: 10px; color: #6C757D; }
.ui-stat-tile-val { font-size: 14px; font-weight: 700; color: #8B0020; }

.ui-sub-history-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #F7F5F2;
    padding: 6px;
    border-radius: 4px;
}

.ui-sub-history-grid--grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 10px;
}

.ui-sub-history-box {
    background: #FFFFFF;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid #E0E0E0;
    width: 100%;
}

.ui-sub-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.ui-sub-history-toggle {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    font-size: 11px;
    font-weight: 700;
    color: #424242;
    cursor: pointer;
    padding: 2px 0;
    overflow: hidden;
}

.ui-sub-history-toggle span.ui-toggle-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; text-align: left; }
.ui-sub-history-toggle span.ui-toggle-icon { flex: 0 0 auto; margin-left: 2px; font-size: 10px; }
.ui-sub-history-toggle:focus-visible { outline: 2px solid #8B0020; }
.ui-sub-history-body { font-size: 11px; color: #424242; margin-top: 4px; }

.ui-pagination-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: #6C757D;
    border-top: 1px solid #E0E0E0;
    padding-top: 6px;
    margin-top: 4px;
}

/* 모바일 flat 레이아웃 (카드/elevation 없음) */
.ui-mobile-detail-header {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    border-bottom: 1px solid #E0E0E0;
    margin-bottom: 4px;
}

.ui-mobile-detail-title { font-weight: 700; font-size: 15px; color: #8B0020; }
.ui-mobile-detail-branch { font-size: 11px; color: #6C757D; }

.ui-mobile-tab-scroll {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 4px;
    border-bottom: 1px solid #E0E0E0;
}

.ui-mobile-tab-item {
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    color: #424242;
    background: #F7F5F2;
    border: 1px solid #CACACA;
    border-radius: 4px;
    white-space: nowrap;
    cursor: pointer;
    flex: 0 0 auto;
}

.ui-mobile-tab-item.active { background-color: #8B0020; color: #FFFFFF; font-weight: 700; border-color: #8B0020; }
.ui-mobile-tab-item:focus { outline: none; box-shadow: none; }
.ui-mobile-tab-item:focus-visible { outline: 2px solid #8B0020; }

.ui-mobile-flat-section {
    padding: 12px 4px;
    border-bottom: 1px solid #E0E0E0;
    background-color: #FFFFFF;
}

.ui-mobile-section-title {
    font-size: 13px;
    font-weight: 700;
    color: #8B0020;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.ui-mobile-ticket-item {
    border: 1px solid #CACACA;
    border-radius: 4px;
    padding: 10px;
    background-color: #FFFFFF;
    margin-bottom: 8px;
}

.ui-mobile-ticket-item.selected { border-color: #8B0020; border-width: 2px; background-color: #FCE8EC; }

.ui-mobile-ticket-expanded-detail {
    border: 1px solid #8B0020;
    border-radius: 4px;
    padding: 10px;
    background-color: #FFFFFF;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ui-mobile-stat-tiles { display: flex; gap: 4px; width: 100%; }
.ui-mobile-stat-tile { flex: 1; background-color: #F7F5F2; border: 1px solid #E0E0E0; border-radius: 4px; padding: 4px; text-align: center; }
.ui-mobile-stat-label { font-size: 9px; color: #6C757D; }
.ui-mobile-stat-val { font-size: 11px; font-weight: 700; color: #8B0020; }

/* 회원 상세 로딩 스켈레톤 (인디터미네이트 프로그레스바 금지 규칙, 2026-08-11) */
.ui-detail-skeleton { display: flex; flex-direction: column; gap: 12px; }

.ui-skeleton-block {
    background: linear-gradient(90deg, #F0EDE8 25%, #F7F5F2 37%, #F0EDE8 63%);
    background-size: 400% 100%;
    animation: ui-skeleton-shimmer 1.4s ease infinite;
    border-radius: 4px;
}

@keyframes ui-skeleton-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* 회원 상세 Focus 모드 "종합 360도 뷰" 2x2 대시보드
   (docs/wiki/01-planning/03-ui-ux/10-user-management-design.md §2.2,
   docs/concepts/ui/user/user_management_desktop_mockup.html #frame-full-focus-view,
   user_management_focus_states_mockup.html 값 그대로 적용) */
.ui-focus-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
}

/* 회원 상세 세로 배치(Grid): 목록 아래 전체 폭에 섹션 카드 격자 — 열 개수는 사용자 선택(2~4),
   1200px 미만은 2열 (docs/wiki/01-planning/03-ui-ux/10-user-management-design.md §11) */
.ui-user-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
    width: 100%;
}

@media (min-width: 1200px) {
    .ui-user-detail-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ui-user-detail-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 좁은 카드에서 필터 토글이 잘리지 않게 줄바꿈 */
.ui-user-detail-grid .ui-toggle-group { flex-wrap: wrap; max-width: 100%; }

/* 세로 배치/아래 펼침에서 상세로 스크롤할 때 머리줄이 가장자리에 붙지 않게 */
.ui-detail-scroll-anchor { scroll-margin-top: 8px; }

.ui-detail-header-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ui-detail-header-controls .ui-toggle-label {
    font-size: 12px;
    color: #6C757D;
}

.ui-empty-state-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    color: #6C757D;
    font-size: 12px;
    background: #F7F5F2;
    border-radius: 4px;
    flex: 1;
    gap: 6px;
}

.ui-error-state-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    color: #D90429;
    font-size: 12px;
    background: #FFF5F5;
    border: 1px dashed #F8D7DA;
    border-radius: 4px;
    flex: 1;
    gap: 6px;
}

/* Card 4(최근 활동)의 최근 예약/최근 레슨 서브 블록 — 서로 독립된 API이므로
   한쪽의 loading/empty/error가 다른 쪽 성공 블록을 가리지 않게 개별 박스로 감싼다 */
.ui-recent-activity-block {
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    padding: 6px 8px;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* 회원 정보의 예약·레슨 목록 줄과 최근 예약·레슨 내용 — 누르면 예약 정보 다이얼로그(취소·당일 취소·복원)가 열린다. */
.ui-user-book-row {
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    padding: 8px;
    background: #F7F5F2;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.ui-user-book-row:hover,
.ui-recent-activity-link:hover {
    border-color: #8B0020;
}

.ui-user-book-row:focus-visible,
.ui-recent-activity-link:focus-visible {
    outline: 2px solid #8B0020;
    outline-offset: 1px;
}

.ui-recent-activity-link {
    margin: 0 -4px;
    padding: 0 4px 2px;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
}

.ui-recent-activity-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ============================================================
   대시보드/홈 (전체 재설계 배치 4) 공용 UI 클래스
   강조색은 앱 전체 브랜드 컬러(#8B0020 버건디)로 통일한다 — 2026-08-11 결정,
   docs/wiki/02-decisions/2026-08-11-08-dashboard-home-accent-color-unification.md 참고.
   ============================================================ */

.lh-card {
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    background-color: #FFFFFF;
}

.lh-card > .card-header,
.lh-card > .card-footer {
    background-color: transparent;
    border-color: #E0E0E0;
}

.ui-dashboard-tile-clickable:focus-visible {
    outline: 2px solid #8B0020;
    outline-offset: 2px;
    background-color: #FCE8EC;
}

.ui-dashboard-tile-clickable:active {
    background-color: #F8ECEF;
    border-color: #8B0020;
}

/* 오늘의 레슨 그리드 (데스크톱) — 항상 6열로 늘려 채우지 않고, 축소된 글씨 크기에 맞춘
   고정폭 카드를 한 줄에 들어가는 만큼만 배치하고 남으면 다음 줄로 넘긴다. */
.ui-today-lesson-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 150px);
    gap: 12px;
}

/* 다이얼로그 목록형/차트형 검색·페이지네이션 (신규회원/회원수/매출/공지 목록 등) */
.ui-dialog-search-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.ui-dialog-search-bar .form-control {
    max-width: 220px;
}

.ui-dialog-empty {
    padding: 32px 16px;
    text-align: center;
    color: #6C757D;
    font-size: 11px;
    font-weight: 400;
}

/* 순서 변경 다이얼로그 공통(UiReorderList, 2026-09-05) — 예전엔 HTML5 draggable="true"/dragstart를
   썼는데 터치 기기에서는 그 이벤트 자체가 발생하지 않아 모바일에서 드래그가 전혀 안 됐다. Pointer
   Events 기반 JS(uiReorderList.js)로 교체하면서 손잡이 아이콘에 touch-action: none을 줘야 터치
   드래그 중 브라우저가 페이지 스크롤로 제스처를 가로채지 않는다. */
.ui-reorder-handle {
    cursor: grab;
    touch-action: none;
}

[data-reorder-item].ui-reorder-dragging {
    cursor: grabbing;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background-color: #FFFFFF;
}

/* ============================================================
   지점관리(/branch)·전지점관리(/common) 카드 공통 셸 (브리프 45, 2026-08-14)
   docs/wiki/05-briefs/45-claude-branch-common-usability-improvements.md
   ============================================================ */

/* 카드마다 다른 최대 높이를 쓰지 않도록 변수 하나로 관리한다(브리프 §1). AppBar(64px 안팎) +
   페이지 제목 영역을 뺀 실사용 뷰포트에서 헤더/본문/하단 액션이 자연스럽게 보이도록 잡은 값.
   아래 --lh-* 토큰은 브리프 52 확정 시안(docs/wiki/01-planning/03-ui-ux/13-branch-common-visual-redesign.md,
   docs/concepts/ui/branch-common/mockup.html :root)의 값을 그대로 옮긴 것이다. */
:root {
    --ui-mgmt-card-max-height: 520px;

    --lh-primary: #8B0020;
    --lh-primary-hover: #6B0018;
    --lh-primary-active: #520012;
    --lh-primary-tint: #FDF6F7;
    --lh-primary-light: #FCE8EC;
    --lh-primary-border: #F3C4CC;
    --lh-bg-cream: #F7F5F2;
    --lh-surface: #FFFFFF;
    --lh-border: #D6D2CE;
    --lh-border-light: #EBE5DF;
    --lh-text-primary: #0E0E0E;
    --lh-text-secondary: #6C757D;
    --lh-text-muted: #9A9A9A;

    /* 다이얼로그 제목 글씨 크기 일원화(2026-09-04) — 이전엔 다이얼로그마다 fs-5/fs-6/무클래스/UiH6가
       뒤섞여 있었다. 모든 TitleContent가 .ui-dialog-title 하나로 통일됐으니, 크기를 바꿀 땐 이 변수
       하나만 고치면 전체 다이얼로그에 반영된다.
       2026-09-05: 관리자 메인화면 텍스트 위계 통일 규칙(섹션 제목/핵심 숫자 14px·700, 카드 제목
       12px·500, 일반 정보 11px·400)에 맞춰 다이얼로그 제목을 "섹션 제목" 급으로 재분류 — 16px에서
       14px로 낮춤. */
    --lh-dialog-title-size: 14px;

    /* 브리프 62(시스템 로그 뷰어, docs/concepts/ui/admin-logs/mockup.html)에서 추가로 필요해진 토큰.
       기존 --lh-* 값과 겹치지 않는 신규 항목만 추가했다. */
    --lh-border-dark: #CACACA;
    --lh-surface-subtle: #F0EDE8;
    --lh-badge-audit: #198754;
    --lh-badge-info: #0D6EFD;
    --lh-badge-warning: #FFC107;
    --lh-badge-error: #DC3545;
    --lh-badge-critical: #842029;
}

.ui-mgmt-card .card-body {
    display: flex;
    flex-direction: column;
}

/* 데스크톱(md 이상)에서만 최대 높이 상한을 건다. 모바일은 flat 자연 흐름 유지(브리프 §1).
   본문 전체(.card-body)는 스크롤시키지 않는다 — 필터 행/헤더/페이지네이션까지 함께
   스크롤되면 sticky만으로는 뒤 콘텐츠와 겹치는 문제가 생기므로(2026-08-14 시각 검증에서 발견),
   실제 스크롤은 목록 영역(.ui-mgmt-card-table-scroll) 또는 필드 목록 래퍼(.ui-mgmt-card-scroll-body)
   에만 걸어 헤더·필터·페이지네이션이 항상 자기 자리에 자연스럽게 고정되게 한다. */
@media (min-width: 960px) {
    /* 브리프 45는 짧은 카드를 억지로 늘리지 않기로 결정했으나(자연 높이 유지), 실제로는
       같은 행의 카드 높이가 제각각이라 시각적으로 어색하다는 사용자 피드백(2026-08-18)에
       따라 min-height도 max-height와 동일하게 걸어 행 안의 카드 높이를 통일한다. */
    .ui-mgmt-card .card-body {
        min-height: var(--ui-mgmt-card-max-height);
        max-height: var(--ui-mgmt-card-max-height);
        overflow: hidden;
    }

    .ui-mgmt-card .ui-mgmt-table {
        display: flex;
        flex-direction: column;
        min-height: 0;
        flex: 1 1 auto;
    }

    .ui-mgmt-card .ui-mgmt-card-table-scroll,
    .ui-mgmt-card .ui-mgmt-card-scroll-body {
        min-height: 0;
        flex: 1 1 auto;
        overflow-y: auto;
    }
}

/* 카드 헤더(제목 + 액션 버튼군)가 좁은 lg=3 열 폭에서 제목 텍스트를 압축해 한 글자씩
   세로로 줄바꿈되던 문제(2026-08-14 시각 검증에서 발견, 예: "강사 목록"+버튼 3개,
   "카카오 메시지"+날짜선택+전송) 수정 — 제목은 압축하지 않고, 공간이 부족하면 액션
   그룹이 다음 줄로 넘어가게 한다(브리프 §1 "정상적인 flex wrap" 지시). */
.ui-mgmt-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 8px;
    column-gap: 12px;
    padding: 10px 14px;
}

.ui-mgmt-card .card-header > *:first-child {
    flex-shrink: 0;
}

/* 카드 머리의 버튼 묶음. 4열 배치(카드 폭 약 266px)에서 묶음이 카드보다 넓으면 버튼이 눌려 글자가
   "전/체", "+등/록"처럼 한 글자씩 접혔다 — 버튼 글자는 줄바꿈하지 않고, 묶음 안에서 버튼 단위로 다음 줄로 넘긴다. */
.ui-mgmt-card .card-header .btn {
    white-space: nowrap;
}

.ui-mgmt-card .card-header > div {
    flex-wrap: wrap;
    row-gap: 6px;
}

.ui-mgmt-card {
    border: 1px solid var(--lh-border);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ui-mgmt-card:hover {
    border-color: #BEB7AF;
    box-shadow: 0 3px 8px rgba(139, 0, 32, 0.06);
}

/* 브리프 52(2026-08-15 시각 재설계) — 흰 배경 헤더를 브랜드 액센트 바로 교체.
   좌측 4px 액센트 바 + 웜톤 배경으로 카드가 예약관리/대시보드 배치와 같은 위계를 갖는다.
   list형/detail형 카드 헤더는 이 CSS 하나를 공유한다 — 위계는 헤더가 아니라 우측 액션
   버튼 유무·본문 구조(kv-item vs row-clickable)로만 구분된다(기획서 §3.2). */
.ui-mgmt-card .card-header {
    background-color: #FCFAF8;
    border-left: 4px solid var(--lh-primary);
}

.ui-mgmt-card-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1A1A1A;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ui-mgmt-card-title i {
    color: var(--lh-primary);
    font-size: 1rem;
}

.ui-mgmt-table .table thead th {
    background-color: #F8F6F4;
    color: #5C5650;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 10px;
    border-bottom: 2px solid #E2DED9;
    position: sticky;
    top: 0;
    z-index: 2;
}

.ui-mgmt-table .table td {
    padding: 6px 12px;
    font-size: 0.875rem;
}

.ui-mgmt-empty {
    padding: 16px !important;
    text-align: center;
    color: #6c757d;
}

/* 빈 상태 박스(브리프 52) — 카드 헤더 액센트와 어울리는 톤. 문구는 실제 코드 기준 그대로,
   비어있음을 알리는 아이콘 + 선택적 outline CTA 버튼만 감싼다. */
.ui-mgmt-empty-box {
    padding: 36px 16px;
    text-align: center;
    color: var(--lh-text-secondary);
    background-color: #FAF8F6;
    border-radius: 6px;
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.ui-mgmt-empty-box i {
    font-size: 1.75rem;
    color: #BDB6B0;
}

.ui-mgmt-empty-box span {
    font-size: 0.8125rem;
    font-weight: 500;
}

/* 상세형 카드(BranchInfoDetailCard/CommonInfoDetailCard)의 key-value 행(브리프 52). */
.ui-mgmt-kv-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    padding: 7px 0;
    border-bottom: 1px dashed #EAE5E0;
    font-size: 0.8125rem;
    width: 100%;
}

.ui-mgmt-kv-item:last-child {
    border-bottom: none;
}

.ui-mgmt-kv-key {
    color: var(--lh-text-secondary);
    font-weight: 500;
    white-space: nowrap;
    min-width: 65px;
    flex-shrink: 0;
}

.ui-mgmt-kv-val {
    font-weight: 600;
    color: #1A1A1A;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

.ui-mgmt-kv-edit-btn {
    color: #6C757D;
    background: transparent;
    border: none;
    padding: 4px 6px;
    min-height: 28px;
    min-width: 28px;
    border-radius: 4px;
    cursor: pointer;
}

.ui-mgmt-kv-edit-btn:hover {
    color: var(--lh-primary);
    background-color: var(--lh-primary-tint);
}

/* BranchInfoDetailCard/CommonInfoDetailCard는 위 .ui-mgmt-kv-item 마크업 대신 기존
   공유 컴포넌트(UiUpdateTextField 등, 브리프 45)를 IsVertical="false"로 재사용한다 —
   그 컴포넌트는 다른 배치 화면에서도 쓰이므로 내부 클래스를 직접 바꾸지 않고,
   .ui-mgmt-card-scroll-body(이 두 카드에서만 쓰이는 wrapper) 안에서만 새 톤을 입힌다. */
.ui-mgmt-card-scroll-body > div {
    padding: 7px 0;
    border-bottom: 1px dashed #EAE5E0;
    font-size: 0.8125rem;
}

.ui-mgmt-card-scroll-body > div:last-child {
    border-bottom: none;
}

/* 지점·전지점 관리 카드의 정보 위계(고객 요청 2026-09-17, image02 "Bold 최소화"): Bold는 카드 제목·주요 이름·
   선택된 탭에만 쓰고, 전화번호·시간·금액 같은 일반 값은 보통체, 라벨·직책·과목 같은 보조 정보는 회색이다. */
.ui-mgmt-card-scroll-body .ui-update-text-placeholder {
    color: var(--lh-text-secondary) !important;
    font-weight: 400;
    min-width: 65px !important;
}

.ui-mgmt-card-scroll-body .ui-update-text-body {
    font-weight: 400;
    color: #1A1A1A !important;
}

.ui-mgmt-card-scroll-body .ui-update-icon {
    color: #6C757D;
    min-width: 28px;
    min-height: 28px;
}

.ui-mgmt-card-scroll-body .ui-update-icon:hover {
    color: var(--lh-primary);
    background-color: var(--lh-primary-tint);
}

/* 뱃지 어휘(브리프 52) — 휴일/일정 범위, 상태, 관리자 역할. 값 자체는 바꾸지 않고
   렌더링에 쓰는 클래스만 이 어휘로 통일한다. */
.ui-badge-custom {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: 4px;
    line-height: 1.3;
    white-space: nowrap;
    flex-shrink: 0;
}

.ui-badge-holiday-pub { background: #FEE2E2; color: #B91C1C; border: 1px solid #FECACA; }
.ui-badge-holiday-all { background: #E0E7FF; color: #3730A3; border: 1px solid #C7D2FE; }
.ui-badge-holiday-branch { background: var(--lh-primary-light); color: var(--lh-primary); border: 1px solid var(--lh-primary-border); }
.ui-badge-status-active { background: #D8F3DC; color: #2D6A4F; border: 1px solid #B7E4C7; }
.ui-badge-status-inactive { background: #F1F3F5; color: #6C757D; border: 1px solid #DEE2E6; }
.ui-badge-status-error { background: #FEE2E2; color: #DC2626; border: 1px solid #FCA5A5; }
.ui-badge-role-chief { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }
.ui-badge-role-admin { background: #EBF3FC; color: #1E60B5; border: 1px solid #CFE1F7; }
.ui-badge-role-branch { background: #E0F2FE; color: #0369A1; border: 1px solid #BAE6FD; }
.ui-badge-role-manager { background: #F3F4F6; color: #4B5563; border: 1px solid #E5E7EB; }

/* 레슨 알림 카드의 강사/회원 구분 뱃지(2026-08-19) — 기존에 둘 다 text-bg-info를 써서 구분이
   안 되던 것을 고쳤다. 다른 ui-badge-* 팔레트와 겹치지 않는 톤으로 신설. */
.ui-badge-notify-teacher { background: #EDE9FE; color: #5B21B6; border: 1px solid #DDD6FE; }
.ui-badge-notify-member { background: #CFFAFE; color: #0E7490; border: 1px solid #A5F3FC; }

/* 전지점 매니저 목록의 권한/지점 드롭다운 필터(브리프 52) — 라벨을 select 테두리에 걸치는
   플로팅 라벨 스타일. 2개가 항상 한 행(`row g-2` + `col-6`)에 나란히 배치된다. */
.ui-filter-select-wrap {
    position: relative;
    width: 100%;
}

.ui-filter-select-label {
    position: absolute;
    top: -7px;
    left: 10px;
    background-color: #FFFFFF;
    padding: 0 4px;
    font-size: 0.6875rem;
    font-weight: 500;
    color: #6C757D;
    line-height: 1;
    z-index: 1;
}

.ui-filter-select {
    width: 100%;
    height: 36px;
    padding: 6px 28px 6px 12px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #212529;
    background-color: #FFFFFF;
    border: 1px solid #CED4DA;
    border-radius: 6px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 10px;
    cursor: pointer;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.ui-filter-select:focus {
    border-color: var(--lh-primary);
    outline: 0;
    box-shadow: 0 0 0 0.15rem rgba(139, 0, 32, 0.15);
}

/* Bootstrap 네이티브 다이얼로그(UiDialogHost/UiDialog, 2026-08-18 MudDialog 전면 교체) — 목업의
   mock-modal-* 크롬을 그대로 반영한다. MudDialog 프레임이 사라졌으므로 이제 액센트 바를 실제로 적용한다. */
.ui-dialog-content {
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border: 1px solid #D8D2CB;
    overflow: hidden;
}

.ui-dialog-header {
    background-color: #FCFAF8;
    border-bottom: 1px solid var(--lh-border-light, #EBE5DF);
    border-left: 5px solid var(--lh-primary, #8B0020);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ui-dialog-footer {
    background-color: #F8F6F4;
    border-top: 1px solid var(--lh-border-light, #EBE5DF);
    padding: 8px 16px;
}

/* 다이얼로그 제목 공통 스타일(2026-09-04) — 67개 다이얼로그의 TitleContent가 fs-5/fs-6/무클래스/UiH6로
   제각각이던 것을 이 클래스 하나로 통일했다. 크기 조정은 --lh-dialog-title-size 변수만 고치면 된다. */
.ui-dialog-title {
    font-size: var(--lh-dialog-title-size);
    font-weight: 700;
}

/* Bootstrap 기본 .modal-body 상하 패딩(1rem=16px)이 카드 본문(.ui-mgmt-card .card-body, 16px)과
   같은 값이라 그 자체는 과하지 않지만, 헤더/푸터 크롬까지 겹치면 다이얼로그 하나에 여백 레이어가
   3겹(헤더+바디+푸터) 쌓여 카드보다 상하 여백이 훨씬 크게 느껴진다(2026-08-18 사용자 지적).
   바디 상하 패딩을 살짝 줄여 체감 여백을 낮춘다. */
.ui-dialog-content .modal-body {
    padding-top: 14px;
    padding-bottom: 14px;
}

/* 다이얼로그 크기 3단계 규칙(2026-08-18) — 단일 소스: MaxWidth.ExtraSmall/Medium/Large만 쓴다.
   Small(bootstrap 기본 modal-sm 300px)은 신규 다이얼로그에 사용하지 않는다 — ExtraSmall(400px)보다도
   좁아 이름과 실제 크기가 뒤바뀌어 혼란을 준다. 상세 기준은 결정 로그 참고. */
.ui-modal-xs {
    max-width: 400px;
}

.ui-modal-md {
    max-width: 560px;
}

/* UiText(모든 UiH1-6/UiBody/UiCaption 등 타이포그래피 래퍼의 공통 렌더러)가 MudText 대신 순수
   h1-h6/p/span을 직접 그리면서 추가한 클래스(2026-08-18) — 브라우저 기본 마진을 0으로 초기화해
   MudText가 갖고 있던 암묵적 여백이 되살아나지 않게 한다. 필요한 여백은 호출부의 Class(py-2, mb-1
   등)로 명시한다. */
.ui-text {
    margin: 0;
}

.ui-text-caption {
    font-size: 0.75rem;
}

.ui-text-overline {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Ui/Edit/* 필드 컴포넌트의 읽기 모드 레이아웃(mockup.html #1-2 "매니저 정보" 읽기 모드 인용,
   2026-08-19) — 라벨 왼쪽 고정폭 + 값 오른쪽 정렬, 점선 구분선. 수정 모드(라벨 위 + 입력 아래
   세로 폼)와 달리 EditMode=false일 때만 이 클래스를 쓴다. */
.ui-edit-field-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed #EDE8E3;
}

.ui-edit-field-item:last-child {
    border-bottom: none;
}

.ui-edit-field-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #6C757D;
    min-width: 90px;
    flex-shrink: 0;
}

.ui-edit-field-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: #212529;
    text-align: right;
    flex: 1 1 auto;
}

/* 다이얼로그 콘텐츠 섹션 소제목 공통 스타일(2026-09-04) — "레슨 타입"/"과목별 레슨 타입"처럼 필드
   라벨이 아니라 그 위 필드 묶음을 소개하는 제목. 기존엔 파일마다 text-secondary(크기 미지정, 16px
   상속)나 개별 scoped 규칙으로 제각각이었다 — .ui-edit-field-label과 같은 13px 기준으로 통일. */
.ui-dialog-section-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #6C757D;
    margin-bottom: 6px;
}

.ui-modal-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 500px;
}

.ui-modal-bottom .ui-dialog-content {
    border-radius: 12px 12px 0 0;
}

.ui-modal-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 500px;
}

@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 8px;
    }
    .modal-dialog.modal-fullscreen-sm-down {
        margin: 0;
        max-width: none;
    }
    .ui-dialog-footer > .btn {
        min-width: 44px;
        min-height: 44px;
        font-size: .875rem !important;
        padding: 8px 14px !important;
    }
    .modal-fullscreen-sm-down .ui-dialog-footer {
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }
}

/* 관리자·강사 예약 상세의 공통 정보 위계. 모바일은 flat 필드로 표시한다. */
.ui-book-dialog-heading { display:flex; align-items:center; gap:8px; min-width:0; }
.ui-book-status-badge { flex-shrink:0; font-size:12px; }
.ui-book-cancel-today { --bs-btn-color:#7a5617; --bs-btn-border-color:#b78521; --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#7a5617; --bs-btn-hover-border-color:#7a5617; --bs-btn-active-color:#fff; --bs-btn-active-bg:#614511; --bs-btn-active-border-color:#614511; }
.ui-book-dialog { font-size:14px; line-height:1.5; }
.ui-book-details-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0 0 16px; }
.ui-book-detail { min-width:0; padding:8px; border:1px solid var(--lh-border-light); border-radius:6px; background:#f8f9fa; }
.ui-book-detail dt,.ui-book-detail-label { margin:0 0 3px; font-size:13px; font-weight:500; color:var(--lh-text-secondary); }
.ui-book-detail dd,.ui-book-detail-value { margin:0; font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.ui-book-member-link { display:block; max-width:100%; padding:0; border:0; background:transparent; color:var(--bs-link-color); font:inherit; text-align:left; text-decoration:underline; overflow-wrap:anywhere; }
.ui-book-member-link:focus-visible { outline:2px solid var(--lh-primary); outline-offset:2px; }
.ui-book-time-detail { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; padding:8px; border:1px solid var(--lh-border-light); border-radius:6px; }
.ui-book-time-detail > div { min-width:0; }
.ui-book-time-detail > button { flex-shrink:0; }
.ui-book-note-label { font-size:14px; font-weight:600; }
.ui-book-note-text { white-space:pre-wrap; overflow-wrap:anywhere; }
.ui-book-note-hint { font-size:12px; color:var(--lh-text-secondary); }
.ui-book-note-context { display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; margin-bottom:16px; padding:10px 12px; border-radius:6px; background:#f8f9fa; overflow-wrap:anywhere; }
.ui-book-note-context strong { min-width:0; font-size:14px; }
.ui-book-note-context span { font-size:13px; color:var(--lh-text-secondary); }
@media (max-width: 575.98px) {
    .ui-book-detail { padding:8px 0; border-width:0 0 1px; border-radius:0; background:transparent; }
    .ui-book-time-detail { padding:8px 0; border-width:0 0 1px; border-radius:0; }
    .ui-book-note-context { padding-inline:0; border-radius:0; background:transparent; border-bottom:1px solid var(--lh-border-light); }
}

/* 수강권 정보의 "과목별 레슨 타입" 2단 카드 그리드(2026-09-04) — 기존 col-4(3열) +
   UiEditSelect(라벨 왼쪽/값 오른쪽 가로 배치)가 좁은 너비에서 "50분" 같은 값이 "50"/"분"으로
   줄바꿈되며 잘려 보이던 문제를 인용 캡처(image 1.png) 기준으로 수정했다. 과목명은 위,
   레슨 시간은 아래로 세로 배치하는 카드 2열 그리드로 교체(image 2.png 기준). */
.ui-lesson-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ui-lesson-type-card {
    border: 1px solid var(--lh-border-light, #EBE5DF);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ui-lesson-type-card-label {
    font-size: 0.8125rem;
    color: var(--lh-text-secondary, #6C757D);
}

.ui-lesson-type-card-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--lh-text-primary, #0E0E0E);
}

/* 수강권 발급(TicketCreateDialog) 폼 폴리시(2026-09-04, image_ticket_2.png 기준) */

/* 1. 입력창 높이/필드 간격 축소 — form-control-sm/form-select-sm 적용 + 필드 스택 gap을 8px→6px로,
   라벨 하단 여백도 줄인다. */
.ui-ticket-create-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 8px;
}

.ui-ticket-create-form .form-label {
    margin-bottom: 2px;
    font-size: 0.8125rem;
}

/* 2. 시작일 — 네이티브 type=date는 브라우저/OS 로캘로 표시 형식이 고정돼(예: "2026. 9. 4.")
   CSS/포맷 문자열로 "2026.09.04" 형태를 직접 만들 수 없다. 네이티브 입력 텍스트를 투명 처리하고
   그 위에 원하는 형식의 텍스트를 겹쳐 왼쪽 정렬로 표시하되, 클릭/탭은 그대로 네이티브 입력(및 달력
   피커)에 전달되도록 pointer-events: none으로 통과시킨다. */
.ui-date-field-wrapper {
    position: relative;
}

.ui-date-field-native {
    color: transparent;
}

.ui-date-field-native::-webkit-datetime-edit,
.ui-date-field-native::-webkit-datetime-edit-fields-wrapper {
    color: transparent;
}

.ui-date-field-display {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 0.875rem;
    color: var(--lh-text-primary, #0E0E0E);
}

/* 3. 최종 결제 금액 요약 카드 */
.ui-price-summary-card {
    background-color: var(--lh-surface-subtle, #F0EDE8);
    border-radius: 10px;
    padding: 12px 14px;
}

.ui-price-summary-label {
    font-size: 0.8125rem;
    color: var(--lh-text-secondary, #6C757D);
    margin-bottom: 2px;
}

.ui-price-summary-value {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--lh-primary, #8B0020);
}

.ui-price-summary-divider {
    border: none;
    border-top: 1px dashed var(--lh-border-light, #EBE5DF);
    margin: 8px 0;
}

.ui-price-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
    color: var(--lh-text-secondary, #6C757D);
}

/* 4. 하단 취소/등록 버튼 — 이 다이얼로그는 2026-08-18 결정 로그(2026-08-18-01)의 "다이얼로그 액션
   버튼은 Size.Small(31px)" 기준보다 크게, 두 버튼을 동일 높이로 키워 강조한다(image_ticket_2.png
   기준 예외 — 사용자가 이 화면에 한해 명시적으로 요청). 다른 다이얼로그로 확장하지 않는다. */
.ui-dialog-btn-lg {
    height: 46px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9375rem;
}

.ui-dialog-btn-lg.btn-light-neutral {
    background-color: var(--lh-surface-subtle, #F0EDE8);
    border-color: var(--lh-surface-subtle, #F0EDE8);
    color: var(--lh-text-primary, #0E0E0E);
}

.ui-dialog-btn-lg.btn-light-neutral:hover {
    background-color: #E5E0D9;
    border-color: #E5E0D9;
    color: var(--lh-text-primary, #0E0E0E);
}

/* 다이얼로그 내 목록 테이블 공통 스타일(2026-09-04) — 헤더에 연한 배경을 줘 본문과 구분하고,
   table-layout: fixed로 열 너비가 셀 내용에 따라 흔들리지 않게 고정하며(첫 열은 번호/날짜류라 좁게,
   나머지는 균등 분배), 행 높이/폰트 크기를 줄여 다이얼로그 안에서 더 조밀하게 보이도록 한다. */
.ui-dialog-table {
    table-layout: fixed;
}

.ui-dialog-table thead th {
    background-color: var(--lh-surface-subtle, #F0EDE8);
    color: var(--lh-text-secondary, #6C757D);
    font-size: 12px;
    font-weight: 500;
    padding: 6px 8px;
    white-space: nowrap;
}

.ui-dialog-table tbody td {
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 400;
    vertical-align: middle;
}

.ui-dialog-table th:first-child,
.ui-dialog-table td:first-child {
    width: 15%;
}

/* 클라이언트 정렬 머리글(UiSortHeader, 기획 12번 §7) — 회원 목록 ui-table-sort와 같은 모양. */
.ui-sort-header-btn {
    color: inherit;
    font: inherit;
    font-weight: inherit;
    white-space: nowrap;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.ui-sort-header-btn:hover {
    color: #8B0020;
}

.ui-sort-header-btn:focus-visible {
    outline: 2px solid #8B0020;
    outline-offset: -2px;
}

.ui-sort-header-btn--active {
    color: #8B0020;
    font-weight: 600;
}

.ui-sort-header-indicator {
    margin-left: 2px;
    font-size: 9px;
}

/* 지점 정보 카드의 "운영 과목 설정" 토글 칩(브리프 52). */
.ui-subject-chip {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    background: none;
}

.ui-subject-chip.active {
    background: var(--lh-primary);
    color: #FFF;
    border-color: var(--lh-primary);
    box-shadow: 0 1px 3px rgba(139, 0, 32, 0.2);
}

.ui-subject-chip.inactive {
    background: #FFF;
    color: #495057;
    border-color: #CED4DA;
}

.ui-subject-chip.inactive:hover {
    border-color: var(--lh-primary);
    color: var(--lh-primary);
}

.ui-mgmt-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 0;
    font-size: 0.8125rem;
}

@media (max-width: 767.98px) {
    .ui-mgmt-card {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        border-bottom: 1px solid #E5E0DB;
    }

    .ui-mgmt-card .card-header,
    .ui-mgmt-card .card-body {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* 좁은 화면에서는 헤더가 다음 줄로 넘어가지 않고 제목을 말줄임 처리한다(브리프 52) —
       데스크톱의 flex-wrap과 달리 모바일 탭 구조에서는 카드 하나가 화면 전체 폭을 쓰므로
       줄바꿈보다 말줄임이 자연스럽다. */
    .ui-mgmt-card .card-header {
        flex-wrap: nowrap !important;
    }

    .ui-mgmt-card-title {
        font-size: 0.875rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1 1 auto;
        min-width: 0;
    }

    .ui-mgmt-row-clickable {
        min-height: 48px !important;
    }

    .btn-sm {
        font-size: 0.75rem !important;
        padding: 3px 8px !important;
        min-height: 30px;
    }
}

/* 모바일 탭 내비게이션(브리프 52) — 지점관리 9개/전지점관리 8개 카드를 세로로 무한 나열하는
   대신 상단 가로 스크롤 탭에서 한 번에 하나만 노출한다(모바일 카드형 금지 규칙과 별개로,
   반복되는 스크롤 피로를 줄이기 위한 신규 도입). */
.ui-mgmt-mobile-tab-bar {
    display: flex;
    align-items: center;
    overflow-x: auto;
    white-space: nowrap;
    gap: 0;
    padding: 0 6px;
    background: #FFFFFF;
    border-bottom: 1px solid #E5E0DA;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    box-sizing: border-box;
}

.ui-mgmt-mobile-tab-bar::-webkit-scrollbar {
    display: none;
}

.mobile-tab-btn,
.mobile-common-tab-btn {
    font-size: 0.84375rem;
    padding: 11px 13px;
    border-radius: 0;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    border-bottom: 2.5px solid transparent;
    background: transparent;
    color: #6C757D;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 36px;
}

.mobile-tab-btn:hover,
.mobile-common-tab-btn:hover {
    color: #1A1A1A;
}

.mobile-tab-btn.active,
.mobile-common-tab-btn.active {
    background: transparent !important;
    color: var(--lh-primary) !important;
    font-weight: 700;
    border-bottom: 2.5px solid var(--lh-primary) !important;
    box-shadow: none;
}

/* 지점 정보(Branch.razor)/전지점 관리(Common.razor) 모바일 탭 스와이프 전환 애니메이션.
   패널은 d-none(display:none)에서 이 클래스로 전환되므로, 브라우저가 display:none에서 벗어날 때마다
   애니메이션을 자동으로 재생한다(별도 JS 타이머 불필요) — 데스크톱은 모든 패널이 항상 보이는
   그리드라 탭 전환 개념이 없어 max-width 미디어 쿼리로 모바일에만 한정한다. */
@media (max-width: 767.98px) {
    .ui-mgmt-tab-panel-enter {
        animation: ui-mgmt-tab-fade-in 0.22s ease;
    }
}

@keyframes ui-mgmt-tab-fade-in {
    from {
        opacity: 0;
        transform: translateX(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* 카드 로딩 스켈레톤 (인디터미네이트 프로그레스바 금지 규칙 적용, UiMgmtCardSkeleton.razor에서 사용) */
.ui-mgmt-card-skeleton {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
}

.ui-mgmt-card-skeleton-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ui-mgmt-card-skeleton-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ui-mgmt-card-skeleton-lines {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ui-mgmt-card-skeleton-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
}

/* 클릭 가능한 목록 행의 키보드 포커스 표시 + 최소 44px 조작 영역(브리프 §5).
   hover/selected 배경(브리프 52)은 브랜드 액센트 톤으로 통일한다. */
.ui-mgmt-row-clickable {
    cursor: pointer;
    border-radius: 4px;
    min-height: 44px;
    outline: none;
    transition: background-color 0.12s ease;
}

.ui-mgmt-row-clickable:hover {
    background-color: var(--lh-primary-tint);
}

.ui-mgmt-row-clickable:focus-visible {
    outline: 2px solid var(--lh-primary);
    outline-offset: -2px;
    background-color: var(--lh-primary-light);
}

.ui-mgmt-row-clickable.selected {
    background-color: #F8ECEF;
    border-left: 3px solid var(--lh-primary);
    padding-left: 5px;
}

/* 아이콘 단독 버튼(수정/삭제 등)의 최소 조작 영역(브리프 §5) — 아이콘 자체 크기는 유지하고 히트 영역만 확장한다. */
.ui-mgmt-icon-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 지점 미선택/Context 초기화 안내, 전지점관리 페이지 범위 설명(브리프 §2) */
.ui-mgmt-page-title-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.ui-mgmt-page-scope-text {
    color: var(--text-grey);
    font-size: 0.875rem;
}

.ui-mgmt-guidance-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 24px;
    text-align: center;
    color: var(--text-grey);
    background: var(--bg-color);
    border-radius: 8px;
}

.ui-docs-page {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ui-docs-frame {
    flex: 1 1 auto;
    width: 100%;
    min-height: 480px;
    border: 0;
    border-radius: 8px;
}

/* MudSnackbar를 대체하는 토스트 알림(UiSnackbarHost, 2026-08-19) — 다이얼로그(z-index 1040~) 위에서도
   보여야 하므로 그보다 높은 대역을 쓴다. */
.ui-snackbar-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: calc(100vw - 32px);
    width: 360px;
}

.ui-snackbar-toast {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    color: #fff;
    animation: ui-snackbar-in 0.15s ease-out;
}

@keyframes ui-snackbar-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.ui-snackbar-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.ui-snackbar-message {
    flex: 1 1 auto;
    font-size: 0.875rem;
    white-space: pre-line;
}

.ui-dialog-message {
    white-space: pre-line;
}

.ui-snackbar-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.8;
}

.ui-snackbar-close:hover {
    opacity: 1;
}

.ui-snackbar-success { background-color: #2D6A4F; }
.ui-snackbar-error { background-color: #B91C1C; }
.ui-snackbar-warning { background-color: #B45309; }
.ui-snackbar-info { background-color: #1E60B5; }
.ui-snackbar-normal { background-color: #343A40; }

@media (max-width: 575.98px) {
    .ui-snackbar-container {
        bottom: 12px;
        width: calc(100vw - 24px);
    }
}

/* ============================================================
   시스템 로그 뷰어 (/admin/logs, 브리프 62)
   docs/concepts/ui/admin-logs/mockup.html의 클래스를 그대로 옮기되, 데모 전용 스캐폴딩
   (.mockup-header/.view-switcher/.view-section 토글, .mobile-frame 시뮬레이터)은 제외했다.
   ============================================================ */

.ui-log-page-title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--lh-border); flex-wrap: wrap; gap: 12px; }
.ui-log-page-title { font-size: 1.25rem; font-weight: 700; color: var(--lh-text-primary); display: flex; align-items: center; gap: 8px; margin: 0; }

.ui-log-nav-tabs { border-bottom: 2px solid var(--lh-border); margin-bottom: 20px; }
.ui-log-nav-tabs .nav-link { color: var(--lh-text-secondary); font-weight: 600; border: none; border-bottom: 3px solid transparent; padding: 10px 18px; margin-bottom: -2px; background: transparent; }
.ui-log-nav-tabs .nav-link.active { color: var(--lh-primary); border-bottom: 3px solid var(--lh-primary); }

.ui-log-stat-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }
.ui-log-stat-card { background: var(--lh-surface); border: 1px solid var(--lh-border); border-radius: 8px; padding: 16px 18px; display: flex; flex-direction: column; }
.ui-log-stat-card-label { font-size: 0.8125rem; font-weight: 600; color: var(--lh-text-secondary); margin-bottom: 6px; }
.ui-log-stat-card-value-row { display: flex; align-items: baseline; justify-content: space-between; }
.ui-log-stat-card-value { font-size: 1.5rem; font-weight: 700; color: var(--lh-text-primary); }

.ui-log-filter-panel { background: var(--lh-surface-subtle); border: 1px solid var(--lh-border); border-radius: 8px; padding: 16px; margin-bottom: 20px; }
.ui-log-filter-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ui-log-filter-group { display: flex; align-items: center; gap: 6px; }
.ui-log-filter-label { font-size: 0.8125rem; font-weight: 600; color: var(--lh-text-secondary); white-space: nowrap; }
.ui-log-quick-period-group .btn { padding: 4px 10px; font-size: 0.8125rem; font-weight: 600; }
.ui-log-filter-chips-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--lh-border); }
.ui-log-filter-chip { background: var(--lh-surface); border: 1px solid var(--lh-border-dark); border-radius: 16px; padding: 3px 10px; font-size: 0.75rem; color: var(--lh-text-primary); display: inline-flex; align-items: center; gap: 6px; }
.ui-log-filter-chip-remove { cursor: pointer; color: var(--lh-text-secondary); font-weight: bold; background: none; border: none; padding: 0; line-height: 1; }
.ui-log-filter-chip-remove:hover { color: var(--lh-badge-error); }

.ui-log-table-container { border: 1px solid var(--lh-border); border-radius: 8px; overflow: hidden; background: var(--lh-surface); overflow-x: auto; }
.ui-log-table { margin-bottom: 0; font-size: 0.875rem; }
.ui-log-table thead th { background-color: var(--lh-surface-subtle); color: var(--lh-text-secondary); font-weight: 600; font-size: 0.8125rem; border-bottom: 1px solid var(--lh-border); padding: 12px 14px; white-space: nowrap; }
.ui-log-table tbody td { padding: 12px 14px; vertical-align: middle; border-bottom: 1px solid var(--lh-border); }
.ui-log-table tbody tr { cursor: pointer; transition: background-color 0.12s ease-in-out; }
.ui-log-table tbody tr:hover { background-color: rgba(139, 0, 32, 0.03); }
.ui-log-table tbody tr:last-child td { border-bottom: none; }
.ui-log-table tbody tr:focus-visible { outline: 2px solid var(--lh-primary); outline-offset: -2px; }

.ui-log-summary-cell { max-width: 480px; }
.ui-log-summary-headline { font-weight: 600; color: var(--lh-text-primary); margin-bottom: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ui-log-summary-detail { font-size: 0.78rem; color: var(--lh-text-secondary); }
.ui-log-actor-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; font-weight: 500; }
.ui-log-actor-role-sub { font-size: 0.7rem; color: var(--lh-text-muted); }

.badge-severity { font-size: 0.75rem; font-weight: 700; padding: 4px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.3px; }
.badge-severity-info { background-color: #E7F1FF; color: #0A58CA; border: 1px solid #B6D4FE; }
.badge-severity-warning { background-color: #FFF3CD; color: #664D03; border: 1px solid #FFE69C; }
.badge-severity-error { background-color: #F8D7DA; color: #842029; border: 1px solid #F5C2C7; }
.badge-severity-critical { background-color: #842029; color: #FFFFFF; font-weight: 800; box-shadow: 0 0 0 2px rgba(132, 32, 41, 0.2); }

.badge-category { font-size: 0.75rem; font-weight: 600; padding: 3px 8px; border-radius: 4px; background: var(--lh-surface-subtle); color: var(--lh-text-secondary); border: 1px solid var(--lh-border); }
.badge-category.audit { background-color: #E8F5E9; color: #1B5E20; border-color: #C8E6C9; }
.badge-category.client { background-color: #EDE7F6; color: #4A148C; border-color: #D1C4E9; }
.badge-action-group { background: #F0F4F8; color: #2D3748; border: 1px solid #CBD5E1; font-weight: 600; font-size: 0.75rem; padding: 3px 8px; border-radius: 12px; display: inline-flex; align-items: center; gap: 4px; }

.ui-log-action-group-card { border: 1px solid var(--lh-border); border-radius: 8px; margin-bottom: 14px; background: var(--lh-surface); overflow: hidden; transition: box-shadow 0.15s ease-in-out; }
.ui-log-action-group-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
.ui-log-action-header { padding: 14px 18px; background: var(--lh-surface-subtle); border-bottom: 1px solid var(--lh-border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; border: none; width: 100%; text-align: left; }
.ui-log-action-header-left { display: flex; align-items: center; gap: 12px; }
.ui-log-action-title { font-size: 0.95rem; font-weight: 700; color: var(--lh-text-primary); }
.ui-log-action-sub-events { padding: 0; list-style: none; margin: 0; }
.ui-log-action-sub-event-item { padding: 12px 18px 12px 36px; border-bottom: 1px dashed var(--lh-border); display: flex; align-items: center; justify-content: space-between; position: relative; font-size: 0.84rem; cursor: pointer; }
.ui-log-action-sub-event-item:last-child { border-bottom: none; }
.ui-log-action-sub-event-item::before { content: "↳"; position: absolute; left: 18px; color: var(--lh-text-muted); font-weight: bold; }

.ui-log-diff-card { background: var(--lh-bg-cream); border: 1px solid var(--lh-border); border-radius: 6px; padding: 14px 16px; margin: 14px 0; }
.ui-log-diff-row { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; font-size: 0.875rem; flex-wrap: wrap; }
.ui-log-diff-row:last-child { margin-bottom: 0; }
.ui-log-diff-label { font-weight: 600; color: var(--lh-text-secondary); min-width: 90px; }
.ui-log-diff-before { color: #842029; background: #F8D7DA; padding: 2px 6px; border-radius: 4px; text-decoration: line-through; }
.ui-log-diff-after { color: #0F5132; background: #D1E7DD; padding: 2px 6px; border-radius: 4px; font-weight: 600; }

.ui-log-related-events-box { background: var(--lh-surface); border: 1px solid var(--lh-border); border-radius: 6px; padding: 14px 16px; margin-top: 14px; }
.ui-log-related-event-timeline-item { padding: 8px 0 8px 24px; position: relative; border-left: 2px solid var(--lh-border); font-size: 0.84rem; }
.ui-log-related-event-timeline-item:last-child { border-left-color: transparent; }
.ui-log-related-event-timeline-item::before { content: ""; position: absolute; left: -6px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--lh-primary); }

.ui-log-code-box { background: #1E1E1E; color: #D4D4D4; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.8125rem; padding: 14px; border-radius: 6px; overflow-x: auto; max-height: 280px; white-space: pre-wrap; line-height: 1.4; }

.ui-log-mobile-item { padding: 12px 10px; border-bottom: 1px solid var(--lh-border); cursor: pointer; background: none; border-left: none; border-right: none; border-top: none; width: 100%; text-align: left; }
.ui-log-mobile-item:last-child { border-bottom: none; }
.ui-log-mobile-chip-row { padding: 8px; border-bottom: 1px solid var(--lh-border); background: var(--lh-surface-subtle); display: flex; gap: 4px; overflow-x: auto; }

.ui-log-state-panel { text-align: center; padding: 56px 24px; }
.ui-log-state-icon { font-size: 3rem; margin-bottom: 16px; opacity: 0.6; }
/* Teacher portal shares the member portal's responsive navigation rhythm while
   keeping its own scope so member-only component rules cannot leak into it. */
.teacher-portal-scope { --lh-primary:#8b0020; --lh-primary-hover:#6b0018; --lh-primary-light:#fce8ec; --lh-bg:#f7f5f2; --lh-surface:#fff; --lh-border:#e5e0d8; --lh-text:#0f172a; --lh-text-secondary:#64748b; color:var(--lh-text); }
.teacher-main-area { min-width:0; height:100%; overflow:hidden; background:var(--lh-bg); }
.teacher-content-scroll { height:100%; overflow-y:auto; padding:22px clamp(20px,3vw,36px) 44px; }
.teacher-page { max-width:1180px; margin:0 auto; }
.teacher-page-header { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:16px; }
.teacher-compact-header h1 { margin:0; font-size:1.65rem; font-weight:800; line-height:1.15; letter-spacing:-.035em; }
.teacher-eyebrow { margin:0 0 5px; color:var(--lh-primary); font-size:.72rem; font-weight:750; letter-spacing:.045em; }
.teacher-header-copy { margin:6px 0 0; color:var(--lh-text-secondary); font-size:.84rem; }
.teacher-text-link, .teacher-section-heading a { color:var(--lh-primary); font-size:.8rem; font-weight:700; text-decoration:none; }
.teacher-text-link:hover, .teacher-section-heading a:hover { color:var(--lh-primary-hover); }
.teacher-metric-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:18px; border-block:1px solid var(--lh-border); background:rgba(255,255,255,.58); }
.teacher-metric-strip > div { display:flex; align-items:baseline; justify-content:center; gap:10px; padding:12px 16px; border-right:1px solid var(--lh-border); }
.teacher-metric-strip > div:last-child { border-right:0; }
.teacher-metric-strip span { color:var(--lh-text-secondary); font-size:.76rem; font-weight:600; }
.teacher-metric-strip strong { font-size:1.25rem; font-weight:800; font-variant-numeric:tabular-nums; }
.teacher-metric-strip strong.is-attention { color:var(--lh-primary); }
.teacher-home-grid, .teacher-record-grid { display:grid; grid-template-columns:minmax(0,1.62fr) minmax(300px,.78fr); gap:18px; align-items:start; }
.teacher-home-aside { display:grid; gap:18px; }
.teacher-home-branch-banner { margin:-22px calc(clamp(20px,3vw,36px) * -1) 20px; }
.teacher-home-notice { min-width:0; }.teacher-home-notice > div { width:100%; }.teacher-home-notice .ui-dialog-empty { padding:48px 18px; border:1px solid var(--lh-border); border-radius:12px; background:#fff; }
.teacher-flat-section { min-width:0; padding:18px 20px; background:var(--lh-surface); border:1px solid var(--lh-border); border-radius:12px; }
.teacher-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:9px; }
.teacher-section-heading h2 { margin:1px 0 0; font-size:.98rem; font-weight:800; }
.teacher-section-heading > span { color:var(--lh-text-secondary); font-size:.75rem; }
.teacher-section-kicker { display:block; color:var(--lh-primary); font-size:.62rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.teacher-empty { padding:34px 12px; color:var(--lh-text-secondary); font-size:.84rem; text-align:center; }
.teacher-lesson-row, .teacher-record-row { display:grid; align-items:center; gap:12px; min-height:56px; padding:9px 2px; border-bottom:1px solid #f0ece7; }
.teacher-lesson-row { grid-template-columns:62px minmax(0,1fr) auto auto; }
.teacher-record-row { grid-template-columns:66px minmax(120px,1fr) auto minmax(76px,auto); }
.teacher-lesson-row:last-child, .teacher-record-row:last-child { border-bottom:0; }
.teacher-lesson-row time { color:var(--lh-primary); font-size:.92rem; font-weight:800; font-variant-numeric:tabular-nums; }
.teacher-lesson-row > div, .teacher-record-person, .teacher-member-row > div:nth-child(2), .teacher-member-detail > div:nth-child(2) { display:flex; min-width:0; flex-direction:column; }
.teacher-lesson-row strong, .teacher-record-person strong, .teacher-member-row strong, .teacher-member-detail strong { font-size:.86rem; }
.teacher-lesson-row div span, .teacher-record-person span, .teacher-member-row div span, .teacher-member-detail div span, .teacher-member-detail small { color:var(--lh-text-secondary); font-size:.72rem; }
.teacher-status { display:inline-flex; align-items:center; min-height:24px; padding:3px 8px; border-radius:6px; font-size:.69rem; font-weight:750; white-space:nowrap; }
.teacher-status.is-upcoming { color:#1d4ed8; background:#eff6ff; }.teacher-status.is-done { color:#2e7d32; background:#edf7ee; }.teacher-status.is-cancelled { color:#856404; background:#fff8e1; }
.teacher-member-row { display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:9px; padding:9px 0; border-bottom:1px solid #f0ece7; }
.teacher-member-row:last-child { border-bottom:0; }
.teacher-member-avatar { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; color:var(--lh-primary); background:var(--lh-primary-light); font-size:.75rem; font-weight:800; }
.teacher-member-next { color:var(--lh-text-secondary); font-size:.68rem; text-align:right; white-space:nowrap; }
.teacher-profile-summary dl { margin:0; }.teacher-profile-summary dl > div { display:flex; justify-content:space-between; gap:14px; padding:7px 0; border-bottom:1px solid #f0ece7; font-size:.79rem; }.teacher-profile-summary dl > div:last-child { border:0; }.teacher-profile-summary dt { color:var(--lh-text-secondary); font-weight:500; }.teacher-profile-summary dd { margin:0; font-weight:700; text-align:right; }.teacher-profile-summary a { color:var(--lh-primary); }
.teacher-search { display:flex; align-items:center; gap:8px; width:min(260px,100%); padding:8px 11px; border:1px solid var(--lh-border); border-radius:8px; background:#fff; color:var(--lh-text-secondary); }
.teacher-search:focus-within { border-color:var(--lh-primary); box-shadow:0 0 0 3px rgba(139,0,32,.12); }.teacher-search input { width:100%; border:0; outline:0; background:transparent; font-size:.82rem; }
.teacher-filter-tabs { display:flex; gap:4px; padding-bottom:10px; border-bottom:1px solid var(--lh-border); overflow-x:auto; }
.teacher-filter-tabs button { min-height:32px; padding:5px 11px; border:0; border-radius:7px; background:transparent; color:var(--lh-text-secondary); font-size:.76rem; font-weight:700; white-space:nowrap; transition:background .18s,color .18s; }
.teacher-filter-tabs button:hover { background:#f7f5f2; }.teacher-filter-tabs button.active { color:#fff; background:var(--lh-primary); }.teacher-filter-tabs button:focus-visible, .teacher-note-action:focus-visible { outline:3px solid rgba(139,0,32,.22); outline-offset:2px; }
.teacher-record-row time { display:flex; flex-direction:column; font-variant-numeric:tabular-nums; }.teacher-record-row time strong { font-size:.83rem; }.teacher-record-row time span { color:var(--lh-text-secondary); font-size:.7rem; }
.teacher-note-action { min-height:30px; max-width:100%; padding:4px 9px; border:1px solid var(--lh-border); border-radius:7px; background:#fff; color:var(--lh-text); font-size:.72rem; font-weight:700; white-space:nowrap; }.teacher-note-action:hover { border-color:var(--lh-primary); color:var(--lh-primary); }.teacher-note-action.is-primary { border-color:var(--lh-primary); background:var(--lh-primary); color:#fff; }.teacher-note-action.is-primary:hover { background:var(--lh-primary-hover); color:#fff; }
.teacher-note-label-short { display:none; }
.teacher-member-detail { display:grid; grid-template-columns:32px minmax(0,1fr); gap:9px; padding:11px 0; border-bottom:1px solid #f0ece7; }.teacher-member-detail .teacher-member-next { grid-column:2; text-align:left; }.teacher-note-context { display:flex; justify-content:space-between; gap:12px; margin-bottom:16px; padding:11px 12px; border-radius:8px; background:#f7f5f2; font-size:.82rem; }.teacher-note-context span { color:var(--lh-text-secondary); }
.teacher-attention-row { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:51px; padding:8px 0; border-bottom:1px solid #f0ece7; }.teacher-attention-row:last-child { border-bottom:0; }.teacher-attention-row > div { display:flex; min-width:0; flex-direction:column; }.teacher-attention-row strong { font-size:.84rem; }.teacher-attention-row span { color:var(--lh-text-secondary); font-size:.74rem; }.teacher-empty-compact { padding-block:24px; }
.teacher-week-strip { margin:0 0 18px; }.teacher-home-primary { display:grid; gap:18px; min-width:0; }.teacher-home-weekly { margin:0; }.teacher-home-schedule-key { display:flex; justify-content:flex-end; gap:14px; margin:-2px 0 12px; color:var(--lh-text-secondary); font-size:.68rem; font-weight:650; }.teacher-home-schedule-key span { display:inline-flex; align-items:center; gap:5px; }.teacher-home-schedule-key span::before { width:8px; height:8px; border-radius:2px; content:""; }.teacher-home-schedule-key .is-open::before { border:1px solid var(--lh-book-grid); background:var(--lh-book-surface); }.teacher-home-schedule-key .is-closed::before { border:1px solid var(--lh-book-grid); background:var(--lh-book-closed); }.teacher-home-schedule-key .is-booked::before { background:var(--lh-primary); }
.teacher-profile-layout { display:grid; grid-template-columns:minmax(240px,.68fr) minmax(0,1.45fr); gap:18px; align-items:start; }.teacher-profile-identity { text-align:center; }.teacher-profile-avatar { display:grid; place-items:center; width:72px; height:72px; margin:4px auto 12px; border-radius:50%; background:var(--lh-primary); color:#fff; font-size:1.55rem; font-weight:750; }.teacher-profile-identity > strong { display:block; font-size:1.15rem; }.teacher-profile-identity > span { display:block; margin-top:3px; color:var(--lh-text-secondary); font-size:.78rem; }.teacher-profile-identity dl { margin:22px 0 0; text-align:left; }.teacher-profile-identity dl > div { display:flex; justify-content:space-between; gap:18px; padding:11px 0; border-top:1px solid var(--lh-border); }.teacher-profile-identity dt,.teacher-profile-readonly dt { color:var(--lh-text-secondary); font-size:.74rem; font-weight:650; }.teacher-profile-identity dd,.teacher-profile-readonly dd { margin:0; color:var(--lh-text-primary); font-weight:650; }.teacher-profile-form,.teacher-profile-readonly { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:20px 0 0; }.teacher-profile-form label > span { display:block; margin-bottom:7px; color:var(--lh-text-secondary); font-size:.76rem; font-weight:700; }.teacher-profile-readonly > div { padding:14px 0; border-bottom:1px solid var(--lh-border); }.teacher-profile-readonly dd { margin-top:6px; }.teacher-profile-actions { display:flex; justify-content:flex-end; margin-top:22px; }.teacher-profile-message { margin-top:16px; padding:10px 12px; border-radius:6px; font-size:.78rem; font-weight:650; }.teacher-profile-message.is-success { background:#edf7f1; color:#217a4b; }.teacher-profile-message.is-error { background:#fff0f0; color:#b42332; }
.teacher-home-week-grid { display:grid; grid-template-columns:56px repeat(7,minmax(72px,1fr)); overflow-x:auto; border-top:1px solid var(--lh-book-grid); border-left:1px solid var(--lh-book-grid); border-radius:9px; background:var(--lh-book-surface); }.teacher-home-week-cell { min-height:42px; padding:6px; border-right:1px solid var(--lh-book-grid); border-bottom:1px solid var(--lh-book-grid); }.teacher-home-week-corner,.teacher-home-week-day,.teacher-home-week-time { background:var(--lh-book-header); }.teacher-home-week-day { display:flex; align-items:center; justify-content:center; gap:4px; color:var(--lh-book-text); font-size:.7rem; }.teacher-home-week-day strong { color:var(--lh-book-text); font-size:.76rem; }.teacher-home-week-day.is-today { background:var(--lh-book-today); }.teacher-home-week-day.is-today strong,.teacher-home-week-day.is-today span { color:var(--lh-primary); }.teacher-home-week-time { display:grid; place-items:center; color:var(--lh-book-muted); font-size:.7rem; font-weight:750; font-variant-numeric:tabular-nums; }.teacher-home-week-slot { display:grid; place-items:center; font-size:.66rem; font-weight:750; }.teacher-home-week-slot.is-open { color:var(--lh-book-muted); background:var(--lh-book-surface); }.teacher-home-week-slot.is-closed { color:var(--lh-book-muted); background:var(--lh-book-closed); }.teacher-home-week-slot.is-booked { color:var(--lh-book-text); background:var(--lh-book-surface); }
.teacher-summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:20px; }.teacher-summary-tile,.teacher-section { background:#fff; border:1px solid var(--lh-border); border-radius:8px; }.teacher-summary-tile { padding:16px; }.teacher-summary-value { font-size:1.5rem; font-weight:750; color:var(--lh-primary); }.teacher-section { padding:18px; margin-bottom:16px; }
.teacher-admin-page { --teacher-admin-accent:var(--lh-primary,#8b0020); --teacher-admin-accent-soft:var(--lh-primary-light,#f8e9ed); color:var(--lh-text-primary,#292524); }
.teacher-admin-header { align-items:center; margin-bottom:18px; }.teacher-admin-header .btn { min-height:40px; font-weight:700; }.teacher-admin-layout { align-items:start; }.teacher-roster-section { padding:0; overflow:hidden; }.teacher-roster-toolbar { padding:16px 16px 12px; border-bottom:1px solid var(--lh-border); background:#fff; }.teacher-admin-search { position:relative; display:block; }.teacher-admin-search > i { position:absolute; top:50%; left:12px; z-index:1; translate:0 -50%; color:var(--lh-text-secondary); }.teacher-admin-search .form-control { min-height:42px; padding-left:36px; border-color:var(--lh-border); }.teacher-admin-search .form-control:focus { border-color:var(--teacher-admin-accent); box-shadow:0 0 0 3px rgba(139,0,32,.12); }.teacher-roster-filters { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,1.1fr); gap:8px; margin-top:10px; }.teacher-roster-filters label > span { display:block; margin:0 0 4px; color:var(--lh-text-secondary); font-size:.68rem; font-weight:700; }.teacher-roster-filters .form-select { min-height:38px; padding-block:6px; border-color:var(--lh-border); font-size:.78rem; }.teacher-roster-count { padding:10px 16px 6px; color:var(--lh-text-secondary); font-size:.72rem; }.teacher-roster-count strong { color:var(--lh-text-primary); font-variant-numeric:tabular-nums; }.teacher-roster-list { padding:0 16px 10px; }.teacher-roster-row { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto 16px; align-items:center; gap:12px; width:100%; min-height:82px; padding:12px; border:0; border-bottom:1px solid var(--lh-border); background:#fff; color:var(--lh-text-primary); text-align:left; transition:background-color .18s,color .18s,transform .12s; }.teacher-roster-row::before { position:absolute; inset:10px auto 10px 0; width:3px; border-radius:2px; background:transparent; content:""; }.teacher-roster-row:hover { background:#faf8f6; }.teacher-roster-row:active { transform:translateY(1px); }.teacher-roster-row:focus-visible { z-index:1; outline:3px solid rgba(139,0,32,.22); outline-offset:-1px; }.teacher-roster-row.is-selected { background:var(--teacher-admin-accent-soft); }.teacher-roster-row.is-selected::before { background:var(--teacher-admin-accent); }.teacher-roster-row > i { color:var(--lh-text-secondary); }.teacher-roster-row.is-selected > i { color:var(--teacher-admin-accent); }.teacher-roster-identity,.teacher-roster-meta { display:flex; min-width:0; flex-direction:column; }.teacher-roster-identity { gap:2px; }.teacher-roster-identity strong { overflow:hidden; font-size:.9rem; text-overflow:ellipsis; white-space:nowrap; }.teacher-roster-identity small,.teacher-roster-meta small { color:var(--lh-text-secondary); font-size:.7rem; }.teacher-roster-meta { align-items:flex-end; gap:3px; text-align:right; }.teacher-roster-meta small strong { color:var(--lh-text-primary); font-variant-numeric:tabular-nums; }.teacher-employment { padding:2px 6px; border-radius:4px; font-size:.65rem; font-weight:750; }.teacher-employment.is-working { color:#276749; background:#edf7f1; }.teacher-employment.is-retired { color:#6b645e; background:#f1efec; }.teacher-roster-skeleton { padding:0 16px 12px; }.teacher-roster-skeleton > div { display:grid; grid-template-columns:minmax(0,1fr) 70px 14px; align-items:center; gap:12px; height:82px; border-bottom:1px solid var(--lh-border); }.teacher-roster-skeleton .ui-skeleton-block { height:14px; margin:0; }.teacher-roster-skeleton .ui-skeleton-block:nth-child(2) { height:28px; }.teacher-inline-state { display:flex; min-height:210px; align-items:center; justify-content:center; flex-direction:column; gap:7px; padding:32px 20px; color:var(--lh-text-secondary); text-align:center; }.teacher-inline-state > i { color:var(--teacher-admin-accent); font-size:1.4rem; }.teacher-inline-state strong { color:var(--lh-text-primary); font-size:.9rem; }.teacher-inline-state span { max-width:38ch; font-size:.78rem; }.teacher-inline-state .btn { min-height:38px; margin-top:7px; }.teacher-admin-tabs { display:flex; gap:2px; margin-bottom:10px; overflow-x:auto; border-bottom:1px solid var(--lh-border); scrollbar-width:none; }.teacher-admin-tabs::-webkit-scrollbar { display:none; }.teacher-admin-tabs button { flex:0 0 auto; min-height:42px; padding:8px 11px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--lh-text-secondary); font-size:.76rem; font-weight:700; white-space:nowrap; transition:color .18s,border-color .18s,background-color .18s; }.teacher-admin-tabs button:hover { color:var(--teacher-admin-accent); background:#faf8f6; }.teacher-admin-tabs button.is-active { border-bottom-color:var(--teacher-admin-accent); color:var(--teacher-admin-accent); }.teacher-admin-tabs button:focus-visible { outline:3px solid rgba(139,0,32,.22); outline-offset:-3px; }.teacher-mobile-back { display:none; }.teacher-detail-section { min-height:310px; }.teacher-detail-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:-2px 0 22px; padding-bottom:16px; border-bottom:1px solid var(--lh-border); }.teacher-detail-header h2 { margin:2px 0 0; font-size:1.35rem; font-weight:800; letter-spacing:-.025em; }.teacher-detail-header > div > span:last-child { color:var(--lh-text-secondary); font-size:.78rem; }.teacher-detail-subject { display:block; color:var(--teacher-admin-accent); font-size:.68rem; font-weight:750; }.teacher-tertiary-action { min-height:36px; padding:6px 8px; border:0; border-radius:6px; background:transparent; color:var(--teacher-admin-accent); font-size:.76rem; font-weight:700; }.teacher-tertiary-action:hover { background:var(--teacher-admin-accent-soft); }.teacher-tertiary-action:focus-visible { outline:3px solid rgba(139,0,32,.22); }.teacher-data-heading { display:grid; grid-template-columns:minmax(120px,1.2fr) repeat(3,minmax(100px,1fr)); gap:12px; padding:0 4px 8px; border-bottom:1px solid var(--lh-border); color:var(--lh-text-secondary); font-size:.68rem; font-weight:700; }.teacher-info-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; margin:0; }.teacher-info-list > div { padding:12px 0; border-bottom:1px solid var(--lh-border); }.teacher-info-list dt { color:var(--lh-text-secondary); font-size:.7rem; }.teacher-info-list dd { margin:4px 0 0; font-size:.86rem; font-weight:650; }.teacher-schedule-mutation { display:grid; grid-template-columns:minmax(130px,1fr) minmax(100px,.7fr) minmax(110px,.75fr) auto; align-items:end; gap:10px; margin-bottom:10px; padding:14px; border:1px solid var(--lh-border); border-radius:8px; background:#faf9f7; }.teacher-schedule-mutation .form-label { margin-bottom:5px; font-size:.72rem; font-weight:700; }.teacher-add-mutation { min-height:38px; white-space:nowrap; }
.teacher-list-row { display: grid; grid-template-columns: minmax(120px, 1.2fr) repeat(3, minmax(100px, 1fr)); align-items: center; gap: 12px; min-height: 52px; padding: 10px 4px; border-bottom: 1px solid var(--lh-border, #ded8d2); }
.teacher-list-row:last-child { border-bottom: 0; }
.teacher-timetable { display: grid; grid-template-columns: 72px repeat(7, minmax(100px, 1fr)); overflow-x: auto; }
.teacher-timetable-cell { min-height: 48px; padding: 8px; border-right:1px solid var(--lh-book-grid); border-bottom:1px solid var(--lh-book-grid); font-size: .8rem; }
.teacher-view-tabs { width:max-content; margin-bottom:14px; border-bottom:0; }.teacher-view-tabs button { min-width:74px; }
.teacher-schedule-overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:18px; overflow:hidden; border:1px solid var(--lh-border); border-radius:12px; background:var(--lh-surface); }
.teacher-schedule-changes-button { display:flex; align-items:center; gap:12px; width:100%; padding:0; border:0; background:transparent; text-align:left; color:inherit; cursor:pointer; }
.teacher-schedule-changes-button:hover strong { color:var(--lh-primary); }
.teacher-schedule-changes-button:focus-visible { outline:2px solid var(--lh-primary); outline-offset:4px; }
.teacher-schedule-changes-button > i:last-child { margin-left:auto; flex:0 0 16px; width:16px; height:16px; background:transparent; }
.teacher-schedule-overview > div { display:flex; align-items:center; gap:12px; min-width:0; padding:15px 18px; border-right:1px solid var(--lh-border); }.teacher-schedule-overview > div:last-child { border-right:0; }
.teacher-schedule-overview i { display:grid; flex:0 0 36px; width:36px; height:36px; place-items:center; border-radius:9px; background:var(--lh-primary-light); color:var(--lh-primary); font-size:.95rem; }
.teacher-schedule-overview span { display:flex; min-width:0; flex-direction:column; color:var(--lh-text-secondary); font-size:.7rem; font-weight:650; }.teacher-schedule-overview strong { margin-top:1px; color:var(--lh-text); font-size:1rem; font-variant-numeric:tabular-nums; }
.teacher-schedule-board { padding-top:14px; }.teacher-period-nav { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:12px; margin-bottom:14px; }.teacher-period-nav strong { text-align:center; font-size:.88rem; font-variant-numeric:tabular-nums; }.teacher-period-nav button { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--lh-border); border-radius:8px; background:#fff; color:var(--lh-text); transition:border-color .18s,color .18s,transform .12s; }.teacher-period-nav button:hover { border-color:var(--lh-primary); color:var(--lh-primary); }.teacher-period-nav button:active { transform:translateY(1px); }.teacher-period-nav button:focus-visible { outline:3px solid rgba(139,0,32,.22); outline-offset:2px; }
.teacher-schedule-key { display:flex; justify-content:flex-end; gap:15px; margin:-4px 0 12px; color:var(--lh-text-secondary); font-size:.68rem; font-weight:650; }.teacher-schedule-key span { display:inline-flex; align-items:center; gap:5px; }.teacher-schedule-key span::before { width:7px; height:7px; border-radius:2px; background:#d9d5cf; content:""; }.teacher-schedule-key .is-closed::before { border:1px solid var(--lh-book-grid); background:var(--lh-book-closed); }.teacher-schedule-key .is-regular::before { background:#cf9aaa; }.teacher-schedule-key .is-temporary::before { background:#d2a85d; }.teacher-schedule-key .is-booked::before { background:#7894c7; }
.teacher-timetable { border-top:1px solid var(--lh-book-grid); border-left:1px solid var(--lh-book-grid); border-radius:9px; background:var(--lh-book-surface); }.teacher-timetable-cell { border-color:var(--lh-book-grid); }.teacher-timetable-day { display:flex; min-height:54px; align-items:center; justify-content:center; gap:5px; background:var(--lh-book-header); font-weight:750; color:var(--lh-book-text);}.teacher-timetable-day.is-today { color:var(--lh-primary); background:var(--lh-book-today); }.teacher-timetable-day small { padding:2px 4px; border-radius:4px; background:var(--lh-primary); color:#fff; font-size:.56rem; }.teacher-timetable-corner { background:var(--lh-book-header); }.teacher-timetable-time { display:flex; align-items:center; justify-content:center; background:var(--lh-book-header); color:var(--lh-book-muted); font-weight:800; font-variant-numeric:tabular-nums; }.teacher-timetable-slot { display:flex; min-height:52px; align-content:center; flex-wrap:wrap; gap:3px; background:var(--lh-book-surface); }.teacher-timetable-slot.is-today { background:var(--lh-book-surface); }.teacher-timetable-slot.is-closed { background:var(--lh-book-closed); }.teacher-mobile-slot.is-closed { background:var(--lh-book-closed); }.teacher-timetable-slot.has-status { box-shadow:inset 3px 0 0 #cf9aaa; }
.teacher-mobile-period,.teacher-mobile-timetable { display:none; }.teacher-schedule-list + .teacher-schedule-list { margin-top:14px; }.teacher-schedule-label,.teacher-timetable-slot > span { display:inline-flex; margin:1px 2px 1px 0; padding:3px 6px; border-radius:5px; font-size:.66rem; font-weight:750; line-height:1.15; }.teacher-schedule-label.is-regular,.teacher-timetable-slot > .is-regular { background:var(--lh-primary-light); color:var(--lh-primary); }.teacher-schedule-label.is-temporary,.teacher-timetable-slot > .is-temporary { background:#fff4dc; color:#7a5617; }.teacher-schedule-label.is-booked,.teacher-timetable-slot > .is-booked { background:#edf3ff; color:#315b9c; }
.teacher-schedule-board + .teacher-schedule-list { margin-top:14px; }
.teacher-schedule-card-list { display:grid; gap:0; }.teacher-schedule-card { display:grid; grid-template-columns:40px minmax(0,1fr) auto auto; align-items:center; gap:12px; min-height:68px; padding:10px 2px; border-bottom:1px solid #f0ece7; }.teacher-schedule-card:last-child { border-bottom:0; }.teacher-schedule-card-icon { display:grid; width:36px; height:36px; place-items:center; border-radius:9px; background:#f4f1ed; color:var(--lh-primary); }.teacher-schedule-card > div:nth-child(2) { display:flex; min-width:0; flex-direction:column; }.teacher-schedule-card strong { font-size:.84rem; font-variant-numeric:tabular-nums; }.teacher-schedule-card strong em { margin-left:5px; color:var(--lh-primary); font-size:.76rem; font-style:normal; }.teacher-schedule-card div span,.teacher-schedule-count { color:var(--lh-text-secondary); font-size:.72rem; }.teacher-schedule-card .teacher-status { justify-self:end; }.teacher-status.is-active { color:#2e7d32; background:#edf7ee; }.teacher-status.is-ended { color:var(--lh-text-secondary); background:#f1f0ee; }.teacher-status.is-temporary { color:#7a5617; background:#fff4dc; }
.teacher-workspace-skeleton .ui-skeleton-block { margin:0; }.teacher-skeleton-header { display:grid; gap:7px; width:min(280px,70%); margin-bottom:18px; }.teacher-skeleton-header .ui-skeleton-block:first-child { width:42%; height:12px; }.teacher-skeleton-header .ui-skeleton-block:last-child { width:76%; height:31px; }.teacher-skeleton-grid { display:grid; grid-template-columns:minmax(0,1.62fr) minmax(300px,.78fr); gap:18px; }.teacher-skeleton-heading { width:34%; height:18px; margin-bottom:14px!important; }.teacher-skeleton-row { display:grid; grid-template-columns:60px minmax(0,1fr) 64px; align-items:center; gap:12px; height:56px; border-bottom:1px solid #f0ece7; }.teacher-skeleton-row .ui-skeleton-block:nth-child(1) { height:15px; }.teacher-skeleton-row .ui-skeleton-block:nth-child(2) { width:55%; height:24px; }.teacher-skeleton-row .ui-skeleton-block:nth-child(3) { height:24px; }.teacher-skeleton-member { display:grid; grid-template-columns:32px minmax(0,1fr); align-items:center; gap:10px; height:52px; }.teacher-skeleton-member > .ui-skeleton-block { width:32px; height:32px; border-radius:9px; }.teacher-skeleton-member > div { display:grid; gap:6px; }.teacher-skeleton-member > div .ui-skeleton-block:first-child { width:42%; height:12px; }.teacher-skeleton-member > div .ui-skeleton-block:last-child { width:72%; height:10px; }.teacher-skeleton-metrics { margin-top:18px; }.teacher-skeleton-metrics .ui-skeleton-block { width:56px; height:30px; }.teacher-skeleton-tabs { display:flex; gap:6px; margin-bottom:14px; }.teacher-skeleton-tabs .ui-skeleton-block { width:74px; height:34px; }.teacher-skeleton-timetable > .ui-skeleton-block { height:520px; }

/* 관리자 강사 관리: 데스크톱에서는 장식보다 데이터 밀도를 우선한다. */
.teacher-admin-title { margin:0; font-size:1.35rem; font-weight:800; letter-spacing:-.025em; line-height:1.2; }
.teacher-admin-branch { margin-top:2px; color:var(--lh-text-secondary); font-size:.72rem; }
.teacher-section-nav { display:flex; gap:2px; margin:-2px 0 12px; overflow-x:auto; border-bottom:1px solid var(--lh-border); scrollbar-width:none; }
.teacher-section-nav::-webkit-scrollbar { display:none; }
.teacher-section-nav a { flex:0 0 auto; min-height:34px; padding:7px 10px; color:var(--lh-text-secondary); font-size:.7rem; font-weight:700; text-decoration:none; white-space:nowrap; transition:background-color .18s,color .18s; }
.teacher-section-nav a:hover { background:#faf8f6; color:var(--teacher-admin-accent); }
.teacher-section-nav a:focus-visible,.teacher-block-header button:focus-visible { outline:3px solid rgba(139,0,32,.22); outline-offset:-2px; }
.teacher-admin-content-grid,.teacher-admin-primary-column,.teacher-admin-secondary-column { display:grid; min-width:0; gap:12px; }
.teacher-workspace-block { min-width:0; scroll-margin-top:16px; padding:12px 14px; border:1px solid var(--lh-border); border-radius:8px; background:#fff; }
.teacher-block-header { display:flex; min-height:28px; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:7px; }
.teacher-block-header > div { display:flex; align-items:baseline; gap:7px; min-width:0; }
.teacher-block-header span { color:var(--lh-text-primary); font-size:.78rem; font-weight:800; }
.teacher-block-header strong { color:var(--teacher-admin-accent); font-size:.68rem; font-variant-numeric:tabular-nums; }
.teacher-block-header small { color:var(--lh-text-secondary); font-size:.64rem; }
.teacher-block-header button { flex:0 0 auto; min-height:28px; padding:3px 5px; border:0; border-radius:5px; background:transparent; color:var(--teacher-admin-accent); font-size:.66rem; font-weight:700; }
.teacher-block-header button:hover { background:var(--teacher-admin-accent-soft); }
.teacher-block-empty { padding:18px 4px; color:var(--lh-text-secondary); font-size:.72rem; text-align:center; }
.teacher-member-compact { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1px 8px; padding:7px 1px; border-bottom:1px solid var(--lh-border); }
.teacher-member-compact:last-child { border-bottom:0; }
.teacher-member-compact strong { overflow:hidden; font-size:.74rem; text-overflow:ellipsis; white-space:nowrap; }
.teacher-member-compact span,.teacher-member-compact small { color:var(--lh-text-secondary); font-size:.62rem; }
.teacher-member-compact small { grid-column:1 / -1; }
.teacher-info-compact { margin:0; }
.teacher-info-compact > div { display:grid; grid-template-columns:minmax(72px,.7fr) minmax(0,1.3fr); gap:8px; padding:6px 1px; border-bottom:1px solid var(--lh-border); }
.teacher-info-compact > div:last-child { border-bottom:0; }
.teacher-info-compact dt { color:var(--lh-text-secondary); font-size:.63rem; font-weight:600; }
.teacher-info-compact dd { overflow:hidden; margin:0; font-size:.7rem; font-weight:650; text-align:right; text-overflow:ellipsis; white-space:nowrap; }
.teacher-schedule-block { margin-top:12px; }
.teacher-schedule-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.teacher-schedule-columns h3 { margin:0; padding-bottom:6px; border-bottom:1px solid var(--lh-border); font-size:.72rem; font-weight:800; }
.teacher-schedule-row { display:flex; min-height:36px; align-items:center; justify-content:space-between; gap:10px; padding:5px 1px; border-bottom:1px solid var(--lh-border); }
.teacher-schedule-row strong { font-size:.7rem; font-variant-numeric:tabular-nums; }
.teacher-schedule-row span { color:var(--lh-text-secondary); font-size:.65rem; }
.teacher-schedule-row button { display:grid; flex:0 0 28px; width:28px; height:28px; place-items:center; border:0; border-radius:5px; background:transparent; color:var(--lh-text-secondary); }.teacher-schedule-row button:hover { background:#fff0f0; color:#b42332; }.teacher-schedule-row button:focus-visible { outline:3px solid rgba(139,0,32,.22); }
.teacher-regular-schedule-row > div { display:flex; min-width:0; flex-direction:column; gap:2px; }
.teacher-schedule-row .teacher-schedule-detail { display:inline-flex; flex:0 0 auto; width:auto; min-width:62px; height:30px; padding:0 8px; align-items:center; justify-content:center; border:1px solid var(--lh-border); background:var(--lh-surface); color:var(--lh-primary); font-size:.65rem; font-weight:700; }
.teacher-schedule-row .teacher-schedule-detail:hover { border-color:var(--lh-primary); background:var(--lh-primary-soft); color:var(--lh-primary); }
.teacher-day-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; margin-bottom:12px; }.teacher-day-actions > span { margin-right:auto; color:var(--lh-text-secondary); font-size:.68rem; }.teacher-day-actions .btn { min-height:32px; padding:4px 8px; font-size:.68rem; }
.teacher-batch-panel { margin-bottom:14px; overflow:hidden; border:1px solid var(--lh-border); border-radius:8px; }.teacher-batch-panel > header { display:flex; align-items:center; justify-content:space-between; min-height:36px; padding:6px 10px; background:#faf9f7; }.teacher-batch-panel > header strong { font-size:.72rem; }.teacher-batch-panel > header button { border:0; background:transparent; color:var(--lh-text-secondary); font-size:.65rem; }.teacher-batch-row { display:grid; grid-template-columns:100px 70px minmax(0,1fr) 28px; align-items:center; gap:8px; min-height:34px; padding:3px 10px; border-top:1px solid var(--lh-border); font-size:.68rem; }.teacher-batch-row strong { font-variant-numeric:tabular-nums; }.teacher-batch-row button { display:grid; width:28px; height:28px; place-items:center; border:0; background:transparent; color:var(--lh-text-secondary); }.teacher-apply-batch { width:calc(100% - 20px); min-height:36px; margin:8px 10px 10px; font-size:.72rem; }
.teacher-temporary-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:6px; border-bottom:1px solid var(--lh-border); }.teacher-temporary-heading h3 { padding:0; border:0; }.teacher-temporary-heading .form-control { width:132px; min-height:30px; padding:3px 6px; font-size:.68rem; }
@media (min-width: 1200px) {
    .teacher-admin-content-grid { grid-template-columns:minmax(0,2fr) minmax(220px,1fr); align-items:start; }
}
@media (min-width: 992px) {
    .teacher-admin-header { margin-bottom:12px; }
    .teacher-admin-header .btn { min-height:36px; padding:6px 11px; font-size:.78rem; }
    .teacher-admin-layout { --bs-gutter-x:1rem; }
    .teacher-roster-toolbar { padding:12px 12px 9px; }
    .teacher-admin-search .form-control { min-height:36px; padding-block:5px; font-size:.78rem; }
    .teacher-roster-filters { gap:6px; margin-top:7px; }
    .teacher-roster-filters label > span { margin-bottom:2px; font-size:.62rem; }
    .teacher-roster-filters .form-select { min-height:33px; padding-block:4px; padding-left:8px; font-size:.7rem; }
    .teacher-roster-count { padding:7px 12px 4px; font-size:.67rem; }
    .teacher-roster-list { padding:0 12px 8px; }
    .teacher-roster-row { grid-template-columns:minmax(0,1fr) auto 12px; gap:8px; min-height:66px; padding:8px; }
    .teacher-roster-row::before { inset-block:8px; }
    .teacher-roster-identity strong { font-size:.8rem; }
    .teacher-roster-identity small,.teacher-roster-meta small { overflow:hidden; max-width:100%; font-size:.64rem; text-overflow:ellipsis; white-space:nowrap; }
    .teacher-roster-meta { min-width:72px; }
    .teacher-employment { padding:1px 5px; font-size:.6rem; }
    .teacher-admin-tabs { margin-bottom:7px; }
    .teacher-admin-tabs button { min-height:34px; padding:5px 10px; font-size:.7rem; }
    .teacher-detail-section { min-height:280px; padding:14px 16px; }
    .teacher-detail-header { margin:0 0 13px; padding-bottom:10px; }
    .teacher-detail-header h2 { margin-top:1px; font-size:1.08rem; }
    .teacher-detail-header > div > span:last-child { font-size:.7rem; }
    .teacher-detail-subject { font-size:.62rem; }
    .teacher-tertiary-action { min-height:32px; padding:4px 7px; font-size:.7rem; }
    .teacher-summary-grid { gap:8px; margin-bottom:12px; }
    .teacher-summary-tile { padding:10px 12px; }
    .teacher-summary-tile .small { font-size:.67rem; }
    .teacher-summary-value { font-size:1.15rem; line-height:1.25; }
    .teacher-data-heading { gap:10px; padding-bottom:6px; font-size:.63rem; }
    .teacher-list-row { gap:10px; min-height:42px; padding:6px 4px; font-size:.76rem; }
    .teacher-info-list { gap:0 20px; }
    .teacher-info-list > div { padding:8px 0; }
    .teacher-info-list dt { font-size:.64rem; }
    .teacher-info-list dd { margin-top:2px; font-size:.78rem; }
    .teacher-schedule-mutation { gap:8px; margin-bottom:16px; padding:10px; }
    .teacher-schedule-mutation .form-label { margin-bottom:3px; font-size:.66rem; }
    .teacher-schedule-mutation .form-control { min-height:34px; padding-block:4px; font-size:.76rem; }
    .teacher-mutation-actions .btn { min-height:34px; padding:5px 8px; font-size:.7rem; }
    .teacher-detail-section > .h6 { margin-bottom:5px; font-size:.78rem; }
    .teacher-detail-section > .h6.mt-4 { margin-top:16px!important; }
    .teacher-empty-compact { padding-block:16px; font-size:.76rem; }
}

@media (max-width: 899.98px) {
    .teacher-record-grid { grid-template-columns:1fr; }.teacher-members-panel { margin-top:0; }
    .teacher-record-row { grid-template-columns:66px minmax(0,1fr) auto minmax(76px,auto); }
    .teacher-schedule-overview > div { padding-inline:14px; }
    .teacher-home-grid { grid-template-columns:minmax(0,1fr) minmax(220px,.7fr); }.teacher-home-aside { gap:14px; }
    .teacher-desktop-period,.teacher-desktop-timetable { display:none; }.teacher-mobile-period { display:grid; }.teacher-schedule-key { justify-content:flex-start; }.teacher-mobile-timetable { display:grid; grid-template-columns:58px minmax(0,1fr); }.teacher-mobile-time { background:var(--lh-book-header); padding:13px 8px 13px 0; border-bottom:1px solid var(--lh-book-grid); color:var(--lh-book-muted); font-size:.8rem; font-weight:800; font-variant-numeric:tabular-nums; }.teacher-mobile-slot { display:flex; min-height:48px; align-items:center; flex-wrap:wrap; gap:3px; padding:8px 0; border-bottom:1px solid var(--lh-book-grid); background:var(--lh-book-surface);}.teacher-slot-empty { color:var(--lh-text-secondary); font-size:.78rem; }
}

@media (max-width: 599.98px) {
    .teacher-content-scroll { padding:16px 16px calc(80px + env(safe-area-inset-bottom)); }
    .teacher-home-branch-banner { margin:-16px -16px 16px; }
    .teacher-page-header { align-items:start; flex-direction:column; }.teacher-compact-header h1 { font-size:1.45rem; }.teacher-text-link { display:none; }
    .teacher-metric-strip { grid-template-columns:repeat(4,minmax(0,1fr)); margin-inline:-16px; }.teacher-metric-strip > div { flex-direction:column; align-items:center; gap:1px; padding:9px 4px; }.teacher-metric-strip strong { font-size:1.05rem; }
    .teacher-home-grid,.teacher-record-grid { grid-template-columns:1fr; gap:12px; }.teacher-flat-section { border-width:1px 0; border-radius:0; margin-inline:-16px; padding:16px; }.teacher-home-aside { gap:12px; }
    .teacher-lesson-row { grid-template-columns:56px minmax(0,1fr) auto; }.teacher-lesson-row .teacher-note-action { grid-column:2 / -1; justify-self:start; }
    .teacher-week-strip { margin:0 0 12px; }.teacher-home-primary { gap:12px; }.teacher-home-schedule-key { justify-content:flex-start; }.teacher-home-week-grid { margin-right:-16px; border-radius:0; grid-template-columns:52px repeat(7,72px); }
    .teacher-profile-layout { grid-template-columns:1fr; gap:12px; }.teacher-profile-form,.teacher-profile-readonly { grid-template-columns:1fr; gap:0; }.teacher-profile-actions .btn { width:100%; min-height:44px; }
    .teacher-summary-grid { grid-template-columns:1fr; }.teacher-section { border-width:0 0 1px; border-radius:0; margin-inline:-16px; padding:16px; }
    .teacher-admin-page { padding-inline:0!important; }.teacher-admin-header { align-items:flex-start; padding-inline:4px; }.teacher-admin-header .btn { min-height:44px; }.teacher-admin-layout { margin-inline:-16px; }.teacher-admin-layout > * { padding-inline:0; }.teacher-roster-section,.teacher-detail-section { margin-inline:0; }.teacher-roster-toolbar { padding:14px 16px 12px; }.teacher-admin-search .form-control { min-height:44px; }.teacher-roster-filters { grid-template-columns:1fr 1fr; }.teacher-roster-filters label:last-child { grid-column:1 / -1; }.teacher-roster-filters .form-select { min-height:44px; font-size:.82rem; }.teacher-roster-list { padding-inline:16px; }.teacher-roster-row { min-height:88px; padding-inline:12px 8px; }.teacher-roster-pane.is-mobile-hidden,.teacher-detail-pane.is-mobile-hidden { display:none; }.teacher-mobile-back { display:inline-flex; align-items:center; gap:7px; min-height:44px; margin:0 12px 8px; padding:6px 4px; border:0; background:transparent; color:var(--teacher-admin-accent); font-size:.84rem; font-weight:750; }.teacher-mobile-back:focus-visible { outline:3px solid rgba(139,0,32,.22); }.teacher-admin-tabs { margin:0; padding:0 12px; background:#fff; }.teacher-admin-tabs button { min-height:44px; }.teacher-detail-section { min-height:0; padding:18px 16px 28px; }.teacher-detail-header { align-items:flex-start; margin-bottom:18px; }.teacher-detail-header h2 { font-size:1.25rem; }.teacher-tertiary-action { min-height:44px; }.teacher-summary-grid { gap:0; margin:0; border-block:1px solid var(--lh-border); }.teacher-summary-tile { display:flex; align-items:center; justify-content:space-between; min-height:64px; padding:10px 2px; border:0; border-bottom:1px solid var(--lh-border); border-radius:0; }.teacher-summary-tile:last-child { border-bottom:0; }.teacher-summary-value { font-size:1.25rem; }.teacher-data-heading { display:none; }.teacher-list-row { gap:7px 12px; padding:13px 2px; }.teacher-list-row > *::before { display:block; color:var(--lh-text-secondary); font-size:.65rem; font-weight:650; content:attr(data-label); }.teacher-info-list { grid-template-columns:1fr; }.teacher-schedule-mutation { grid-template-columns:1fr 1fr; margin-inline:-2px; padding:12px; }.teacher-mutation-actions { grid-column:1 / -1; }.teacher-mutation-actions .btn { flex:1; min-width:64px; min-height:44px; }
    .teacher-section-nav { margin:0 -16px 12px; padding-inline:12px; }.teacher-section-nav a { min-height:44px; padding:12px 9px; font-size:.72rem; }.teacher-admin-content-grid,.teacher-admin-primary-column,.teacher-admin-secondary-column { gap:0; }.teacher-workspace-block { margin-inline:-16px; padding:15px 16px 18px; border-width:0 0 1px; border-radius:0; }.teacher-schedule-block { margin-top:0; }.teacher-block-header button { min-height:44px; padding-inline:8px; }.teacher-schedule-columns { grid-template-columns:1fr; gap:16px; }.teacher-member-compact { min-height:52px; align-content:center; }.teacher-member-compact strong { font-size:.8rem; }.teacher-member-compact span,.teacher-member-compact small { font-size:.68rem; }
    .teacher-record-row { grid-template-columns:50px minmax(0,1fr) auto auto; gap:9px 8px; }.teacher-record-row .teacher-note-action { justify-self:end; min-width:44px; padding-inline:7px; }.teacher-note-label-long { display:none; }.teacher-note-label-short { display:inline; }.teacher-members-panel { scroll-margin-top:12px; }
    .teacher-list-row { grid-template-columns: minmax(0, 1fr) auto; }
    .teacher-list-row > :nth-child(n+3) { grid-column: 1 / -1; }
    .teacher-filter-tabs button,.teacher-note-action { min-height:44px; }.teacher-lesson-row div span,.teacher-record-person span,.teacher-member-row div span,.teacher-member-detail div span,.teacher-member-detail small,.teacher-member-next { font-size:.75rem; }
    .teacher-schedule-overview { grid-template-columns:1fr; margin-inline:-16px; border-inline:0; border-radius:0; }.teacher-schedule-overview > div { min-height:58px; padding:10px 16px; border-right:0; border-bottom:1px solid var(--lh-border); }.teacher-schedule-overview > div:last-child { border-bottom:0; }.teacher-schedule-overview i { flex-basis:34px; width:34px; height:34px; }.teacher-schedule-overview span { flex-direction:row; align-items:baseline; justify-content:space-between; width:100%; }.teacher-schedule-overview strong { font-size:.92rem; }
    .teacher-desktop-period,.teacher-desktop-timetable { display:none; }.teacher-mobile-period { display:grid; }.teacher-schedule-key { justify-content:flex-start; overflow-x:auto; }.teacher-mobile-timetable { display:grid; grid-template-columns:58px minmax(0,1fr); }.teacher-mobile-time { background:var(--lh-book-header); padding:13px 8px 13px 0; border-bottom:1px solid var(--lh-book-grid); color:var(--lh-book-muted); font-size:.8rem; font-weight:800; font-variant-numeric:tabular-nums; }.teacher-mobile-slot { display:flex; min-height:48px; align-items:center; flex-wrap:wrap; gap:3px; padding:8px 0; border-bottom:1px solid var(--lh-book-grid); background:var(--lh-book-surface);}.teacher-slot-empty { color:var(--lh-text-secondary); font-size:.78rem; }.teacher-schedule-label { font-size:.75rem; }
    .teacher-schedule-card { grid-template-columns:36px minmax(0,1fr) auto; gap:10px; }.teacher-schedule-count { grid-column:2; }.teacher-schedule-card .teacher-status { grid-column:3; grid-row:1 / span 2; }.teacher-schedule-card-icon { width:34px; height:34px; }
    .teacher-skeleton-grid { grid-template-columns:1fr; gap:12px; }.teacher-skeleton-grid > * { margin-inline:-16px; }.teacher-skeleton-grid aside { display:none; }.teacher-skeleton-metrics { margin-top:12px; }.teacher-skeleton-timetable { margin-inline:-16px; }.teacher-skeleton-timetable > .ui-skeleton-block { height:560px; }
    .teacher-schedule-mutation > div:nth-child(3),.teacher-schedule-mutation .teacher-add-mutation { grid-column:1 / -1; }.teacher-schedule-mutation .teacher-add-mutation { min-height:44px; }.teacher-day-actions { flex-wrap:wrap; justify-content:stretch; }.teacher-day-actions > span { flex-basis:100%; }.teacher-day-actions .btn { flex:1; min-height:44px; }.teacher-batch-row { grid-template-columns:1fr 58px 64px 44px; padding-inline:8px; }.teacher-batch-row button { width:44px; height:44px; }.teacher-apply-batch { min-height:44px; }.teacher-temporary-heading .form-control { min-height:44px; }
}


/* 지점·전지점 관리 카드 목록 행의 글자 위계(고객 요청 2026-09-17, image02). 카드마다 행 마크업
   (span/UiBody/UiSubText)이 달라 구조로 맞춘다: 왼쪽 묶음의 첫 줄 = 주요 이름(굵게), 그 아래 줄 =
   직책·과목·날짜 같은 보조 정보(작고 회색), 오른쪽 값(전화번호·금액) = 보통체 회색. */
.ui-mgmt-card .ui-mgmt-row-clickable > .flex-column > :first-child {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1A1A1A;
}

.ui-mgmt-card .ui-mgmt-row-clickable > .flex-column > :first-child .small {
    font-size: 0.875rem;
    font-weight: 600;
}

.ui-mgmt-card .ui-mgmt-row-clickable > .flex-column > :not(:first-child) {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--lh-text-secondary) !important;
}

.ui-mgmt-card .ui-mgmt-row-clickable > :not(.flex-column):not(:last-child) {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--lh-text-secondary) !important;
    white-space: nowrap;
}

/* 카드 안 체크박스 라벨(전체 보기 등)도 목록 글자와 같은 크기로 맞춘다(고객 요청 2026-09-17 "일관된 폰트 크기"). */
.ui-mgmt-card .form-check-label {
    font-size: 0.8125rem;
}

/* 강사 관리 — 고객 목업(2026-09-17 murabel-ui-mockup_8.html) 기준 탭·글자 크기·Bold 구분(데스크톱).
   구성은 이미 목업과 같아 바꾸지 않는다: 섹션 바로가기를 테두리 버튼형으로, 블록 제목은 키우고,
   목록·표의 일시는 보통체(이름·제목만 굵게), 표 머리글은 회색 띠로 맞춘다. */
@media (min-width: 900px) {
    .teacher-section-nav { gap: 7px; margin: 4px 0 16px; border-bottom: 0; }
    .teacher-section-nav a {
        min-height: 0;
        padding: 9px 16px;
        border: 1px solid var(--lh-border);
        border-radius: 6px;
        background: #fff;
        color: #333;
        font-size: .8125rem;
        font-weight: 500;
    }
    .teacher-section-nav a:hover { border-color: var(--teacher-admin-accent); background: #fff; color: var(--teacher-admin-accent); }

    .teacher-block-header { margin-bottom: 12px; }
    .teacher-block-header span { font-size: .9375rem; font-weight: 700; }
    .teacher-block-header strong { padding: 0 6px; border-radius: 9px; background: #EEF0F3; color: #5C5650; font-size: .7rem; }

    .teacher-data-heading {
        padding: 9px 10px;
        border-bottom: 0;
        border-radius: 4px;
        background: #F5F7F9;
        color: #657080;
        font-size: .75rem;
        font-weight: 600;
    }
    .teacher-list-row { padding-inline: 10px; font-size: .8125rem; }
    .teacher-list-row strong { font-weight: 400; }

    .teacher-member-compact strong { font-size: .8125rem; }
    .teacher-member-compact span, .teacher-member-compact small { font-size: .72rem; }
    .teacher-detail-header h2 { font-size: 1.5rem; }
}

/* 회원 관리 페이지 제목 줄(고객 목업 2026-09-17): 제목·안내 문구 왼쪽, 신규 회원 등록 오른쪽. */
.ui-user-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.ui-user-page-subtitle {
    margin: 0;
    font-size: 12px;
    color: var(--lh-text-secondary);
}

.ui-user-page-create {
    min-height: 40px;
    padding: 8px 16px;
    font-weight: 700;
    white-space: nowrap;
}

@media (min-width: 768px) {
    #teacher-bookings .teacher-data-heading,
    #teacher-bookings .teacher-list-row { grid-template-columns: minmax(120px, 1.2fr) repeat(2, minmax(100px, 1fr)); }
}

.teacher-lesson-note-cell { min-width: 0; }
.teacher-lesson-note-preview { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; white-space: pre-line; overflow-wrap: anywhere; }

.teacher-lesson-note-missing { color: var(--teacher-admin-accent, #8b0020); font-style: italic; }

.teacher-detail-placeholder { position: relative; }
.teacher-detail-placeholder .ui-skeleton-block { animation: none; }
.teacher-detail-placeholder-prompt { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 180px; pointer-events: none; }
.teacher-detail-placeholder-prompt strong { padding: 12px 20px; background: var(--lh-bg, #fff); color: var(--lh-text-secondary, #666); font-size: .9rem; }
.teacher-admin-detail-skeleton { pointer-events: none; }
.teacher-admin-detail-skeleton .ui-skeleton-block { margin-bottom: 0; }

/* Member status guide — supplied section design. */
.ui-member-list-guide{--burgundy:#8b1235;--text:#37353a;--muted:#747077;--line:#e6e2e5;--surface:#fff;--header:#f7f4f5;--body-size:13px;--note-size:12px;--title-size:14px;font-size:var(--body-size);line-height:1.7}
.ui-member-list-guide{background:var(--surface);border:1px solid #ddd7db;border-radius:8px;overflow:hidden}
.ui-member-list-guide .guide-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:52px;border:0;background:var(--header);padding:14px 24px;text-align:left;cursor:pointer;color:var(--burgundy)}
.ui-member-list-guide .guide-toggle:hover{background:#f1ecef}
.ui-member-list-guide .guide-toggle:focus-visible{outline:2px solid var(--burgundy);outline-offset:-4px}
.ui-member-list-guide .guide-title{display:flex;gap:10px;align-items:center;font-size:var(--title-size);line-height:1.5;font-weight:600}
.ui-member-list-guide .dot{width:6px;height:6px;border-radius:50%;background:var(--burgundy);flex-shrink:0}
.ui-member-list-guide .toggle-action{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:var(--note-size);font-weight:400;white-space:nowrap}
.ui-member-list-guide .chevron{width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:translateY(2px) rotate(-45deg)}
.ui-member-list-guide:not([open]) .chevron{transform:translateY(-2px) rotate(135deg)}
.ui-member-list-guide .guide-content{display:grid;grid-template-columns:1.08fr 1fr;gap:24px;padding:24px;align-items:start}
.ui-member-list-guide .column{min-width:0}
.ui-member-list-guide .right{border-left:1px solid var(--line);padding-left:24px}
.ui-member-list-guide .section-title{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:var(--title-size);font-weight:500;line-height:1.5;color:var(--text)}
.ui-member-list-guide .check{display:inline-block;width:12px;height:12px;flex-shrink:0;position:relative;font-size:0}
.ui-member-list-guide .check::after{content:"";position:absolute;left:3px;top:1px;width:5px;height:9px;border-right:1.5px solid var(--burgundy);border-bottom:1.5px solid var(--burgundy);transform:rotate(45deg)}
.ui-member-list-guide .intro{margin:0 0 16px;color:#615c64;font-size:var(--body-size);line-height:1.7;word-break:keep-all;overflow-wrap:anywhere}
.ui-member-list-guide .table-wrap{border:1px solid var(--line);border-radius:5px;overflow:hidden}
.ui-member-list-guide table{width:100%;border-collapse:collapse;font-size:var(--body-size);line-height:1.7}
.ui-member-list-guide th, .ui-member-list-guide td{padding:10px 14px;vertical-align:top;text-align:left;word-break:keep-all;overflow-wrap:anywhere}
.ui-member-list-guide thead th{background:#f6f5f6;font-size:var(--note-size);font-weight:500;color:#67616a;padding-top:8px;padding-bottom:8px}
.ui-member-list-guide tbody th{font-weight:500;width:94px;white-space:nowrap}
.ui-member-list-guide tbody tr{border-top:1px solid var(--line)}
.ui-member-list-guide .notes{margin:16px 0 0;padding-left:16px;color:var(--muted);font-size:var(--note-size);line-height:1.7}
.ui-member-list-guide .notes li+li{margin-top:6px}
.ui-member-list-guide .footnote{margin:16px 0 0;color:var(--muted);font-size:var(--note-size);line-height:1.7;word-break:keep-all;overflow-wrap:anywhere}
.ui-member-list-guide summary{list-style:none}
.ui-member-list-guide summary::-webkit-details-marker{display:none}
.ui-member-list-guide .guide-collapse{display:none}
.ui-member-list-guide[open] .guide-collapse{display:inline}
.ui-member-list-guide[open] .guide-expand{display:none}
@media(max-width:960px){.ui-member-list-guide .guide-content{grid-template-columns:1fr;gap:24px}
.ui-member-list-guide .right{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:24px}}
@media(max-width:540px){
.ui-member-list-guide{--body-size:12px;--note-size:11px;--title-size:13px;border-radius:6px}
.ui-member-list-guide .guide-toggle{min-height:44px;padding:11px 12px;gap:8px}
.ui-member-list-guide .guide-title{gap:7px}
.ui-member-list-guide .toggle-action{gap:6px}
.ui-member-list-guide .guide-content{padding:14px 12px;gap:18px}
.ui-member-list-guide .right{padding-top:18px}
.ui-member-list-guide .section-title{margin-bottom:8px}
.ui-member-list-guide .intro{margin-bottom:10px;line-height:1.6;word-break:normal}
.ui-member-list-guide table{line-height:1.6}
.ui-member-list-guide th,.ui-member-list-guide td{padding:7px 9px;word-break:normal;overflow-wrap:break-word}
.ui-member-list-guide thead th{padding:6px 9px}
.ui-member-list-guide tbody th{width:68px}
.ui-member-list-guide .notes{margin-top:10px;padding-left:14px;line-height:1.65}
.ui-member-list-guide .notes li+li{margin-top:4px}
.ui-member-list-guide .footnote{margin-top:10px;line-height:1.65;word-break:normal}
}

/* Shared daily/monthly statistics tiles, independent of mounted components. */

    .ui-daily-stat-tile {
        border: 1px solid var(--lh-border);
        border-radius: 8px;
        padding: 10px;
        background-color: #FFFFFF;
        height: 100%;
    }

    .ui-daily-stat-tile .rz-chart {
        height: 160px;
        --rz-chart-axis-font-size: 0.6875rem;
    }

    .ui-daily-stat-tile .ui-pie-empty {
        height: 160px;
    }

    .ui-daily-stat-tile-tall .rz-chart {
        height: 200px;
    }

/* 강사 시간표는 관리자 예약 항목을 조회용으로 공유한다. */
.teacher-timetable-bookings { width:100%; min-width:0; display:flex; flex-direction:column; gap:4px; color:var(--lh-book-text); text-align:left; }
.teacher-timetable-booking { min-width:0; }
.teacher-booking-time { display:block; margin-bottom:2px; color:var(--lh-book-muted); font-size:.65rem; font-variant-numeric:tabular-nums; }
.teacher-home-week-slot.is-booked { background:var(--lh-book-surface); color:var(--lh-book-text); align-items:start; justify-items:stretch; }

/* 예약 유무와 별개로 닫힌 셀의 상태색을 유지한다. */
.teacher-home-week-slot.is-booked.is-closed { background:var(--lh-book-closed); }
.teacher-home-week-slot .book-item-card { font-size:.8rem; font-weight:400; }


/* 관리자·강사 공통 시간표: Book.razor의 컴포넌트 스타일을 공유한다. */


/* -------- 스케줄 매트릭스 그리드 (일일/주간 공용, 자식 컴포넌트로 전파) -------- */

.ui-book-table-shell {
    position: relative;
    overflow: hidden;
    overflow: clip;
}

/* 강사명(주간은 날짜·과목·강사) 헤더 줄. 가로 스크롤 컨테이너 안에서는 세로 sticky가 안 되므로
   헤더만 별도 줄로 빼서 페이지 스크롤에 고정하고, 가로 위치는 bookScrollFade.js가 본문과 맞춘다
   (고객 요청 2026-09-15 "PC 시간표 상단 강사명 고정"). */
.ui-book-table-head {
    position: sticky;
    /* sticky 기준선은 스크롤 영역(.main-content)의 안쪽 여백만큼 내려와 있어서, 그대로 두면
       헤더 위로 여백만큼 시간표가 비쳐 보인다 — 여백(MainLayout.razor.css: 24px, 960px 미만 12px)만큼
       끌어올려 스크롤 영역 맨 위에 붙인다. */
    top: -24px;
    z-index: 7;
    overflow: hidden;
    border-radius: 6px 6px 0 0;
}

@media (max-width: 959.98px) {
    .ui-book-table-head {
        top: -12px;
    }}

.ui-book-table--head {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* .ui-book-table(아래)의 border가 같은 우선순위로 덮지 않도록 두 클래스로 지정한다. */
.ui-book-table.ui-book-table--body {
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.ui-book-table-head + .ui-book-table-scroll {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* 가로만 스크롤한다. 세로는 자르지 않고 모든 시간대를 한 번에 펼친 뒤 페이지 전체 스크롤로 본다
   (max-height로 높이를 잘라 자체 세로 스크롤을 만들면 시간표 안/페이지 두 개의 스크롤이 겹친다).
   이 컨테이너 안에서는 세로 sticky가 안 되므로 헤더는 위 .ui-book-table-head로 분리했다 —
   여기서는 시간 열(left: 0)의 가로 고정만 쓴다. */
.ui-book-table-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    border-radius: 6px;
}

.ui-scroll-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    pointer-events: none;
    z-index: 6;
    opacity: 1;
    transition: opacity .15s ease;
}

.ui-scroll-fade-hidden {
    opacity: 0;
}

.ui-scroll-fade-left {
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0));
}

.ui-scroll-fade-right {
    right: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0));
}

.ui-book-table {
    color: var(--lh-book-text);
    display: grid;
    /* 카드 폭을 채운다. 열 너비는 고정이고 남는 폭은 마지막 빈 열이 차지한다. 열이 많으면 GridStyle의
       min-width(열 수 × 열 너비)만큼 넓어져 가로 스크롤된다. */
    width: 100%;
    background: var(--lh-book-grid);
    gap: 1px;
    border: 1px solid var(--lh-book-grid);
    border-radius: 6px;
    /* NOT overflow:hidden here — that would make this grid (which itself scrolls inside
       .ui-book-table-scroll) the sticky containing block for its sticky grid-item children
       (header/time/corner), instead of .ui-book-table-scroll. Corner-clipping to match
       border-radius happens one level up on .ui-book-table-scroll instead. */
}

.ui-book-table-corner,
.ui-book-table-header,
.ui-book-table-time,
.ui-book-table-cell {
    background: var(--lh-book-surface);
}

/* 열이 카드보다 좁을 때 남는 폭을 채우는 빈 열. 선만 이어지고 내용·클릭은 없다. */
.ui-book-table-filler {
    background: var(--lh-book-surface);
    min-width: 0;
}

.ui-book-table-filler--head {
    background: var(--lh-book-header);
}

.ui-weekly-filler-head {
    grid-column: -2 / -1;
    grid-row: 1 / span var(--ui-weekly-header-rows, 3);
}

.ui-book-table-cell.ui-book-table-cell-divided {
    display: grid;
    grid-template-rows: repeat(2, minmax(24px, 1fr));
    padding: 0;
    gap: 1px;
    background: var(--lh-book-grid);
}

.ui-book-table-cell.ui-book-table-cell-divided.ui-book-table-cell-merged > .ui-book-slot {
    grid-row: 1 / -1;
}

.ui-book-slot {
    min-height: 48px;
    /* 클릭 영역(empty/edit cell의 min-height)은 줄이지 않고 바깥 여백만 줄여 행 높이를 낮춘다. */
    padding: 2px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    background: var(--lh-book-surface);
}

.ui-book-slot-half {
    height: 100%;
    min-height: 24px;
}

/* 정규 닫힘은 텍스트 없이 배경색만으로 구분하므로(§3.5) 흰색 열린 칸과 확실히 달라 보여야 한다. */
.ui-book-slot-closed {
    background: var(--lh-book-closed);
}

.ui-book-closed-label {
    color: #ADB5BD;
    font-size: .75rem;
    text-align: center;
}

/* 편집 버튼과, 그 뒤에 깔리는 시간표 내용(참고용 배경)을 겹쳐 놓는 레이어.
   배경은 클릭/포인터 이벤트를 받지 않는다. */
.ui-book-edit-layer {
    position: relative;
    flex: 1 1 auto;
    align-self: stretch;
    display: flex;
    min-width: 0;
}

/* 배경은 편집 모드가 아닐 때의 .ui-book-slot 안쪽과 똑같은 레이아웃이어야 한다 — 편집 모드에서도
   시간표가 평소와 같은 모양/높이로 보여야 하기 때문. "흐름에 남겨" 칸 높이도 스스로 결정한다
   (잘라내면 예약이 2건 이상인 칸에서 아래쪽 예약이 안 보인다). */
.ui-book-edit-backdrop {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    gap: 2px;
    min-width: 0;
    opacity: .32;
    pointer-events: none;
}

/* 편집 버튼은 배경 전체를 덮어 클릭 영역이 칸 전체가 되게 한다.
   기본 min-height(44px)에 눌리면 배경보다 커져 칸 밖으로 삐져나온다. */
.ui-book-edit-layer > .ui-book-edit-cell {
    position: absolute;
    inset: 0;
    z-index: 1;
    min-height: 0;
}

/* 30분/50분 편집은 1시간 단위라 반 칸마다 버튼을 두지 않고 칸 전체를 덮는 버튼 하나를 올린다. */
.ui-book-table-cell-hour-edit {
    position: relative;
}

.ui-book-hour-edit-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
}

.ui-book-hour-edit-overlay > .ui-book-edit-cell {
    min-height: 0;
}

.ui-book-edit-cell-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    line-height: 1.2;
}

/* 배경에 시간표 내용이 비치므로 라벨 뒤에 반투명 흰 칩을 둬 글자가 겹쳐 읽히지 않게 한다
   (선택된 칸은 버튼 자체가 불투명한 모드 색이라 칩이 필요 없다). */
.ui-book-edit-cell:not(.ui-book-edit-cell-selected) .ui-book-edit-cell-label {
    padding: 1px 7px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .86);
}

.ui-book-edit-cell {
    width: 100%;
    min-height: 44px;
    border: 1px dashed var(--lh-book-grid);
    border-radius: 4px;
    color: #6C757D;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ui-book-slot-half .ui-book-edit-cell {
    min-height: 22px;
}

.ui-book-slot-half .ui-book-empty-cell {
    min-height: 22px;
}

.ui-book-edit-cell:hover,
.ui-book-edit-cell:focus-visible {
    border-color: #8B0020;
    color: #8B0020;
    outline: 2px solid rgba(139, 0, 32, .3);
}

.ui-book-edit-cell-selected {
    border-style: solid;
    color: var(--lh-book-surface);
}

.ui-book-edit-cell-selected:hover,
.ui-book-edit-cell-selected:focus-visible {
    color: var(--lh-book-surface);
}

.ui-book-edit-cell-selected-open { background: #2E7D32; border-color: #2E7D32; }
.ui-book-edit-cell-selected-close { background: #C62828; border-color: #C62828; }
.ui-book-edit-cell-selected-divide { background: #8B0020; border-color: #8B0020; }
.ui-book-edit-cell-selected-combine { background: #4A5568; border-color: #4A5568; }

.ui-book-table-corner,
.ui-book-table-header {
    position: sticky;
    top: 0;
    z-index: 3;
    min-height: 42px;
    padding: 5px 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: var(--lh-book-header);
    font-weight: 600;
    font-size: .8rem;
}

.ui-book-table-corner {
    left: 0;
    z-index: 5;
    font-size: .75rem;
    color: #6C757D;
    font-weight: 400;
}

.ui-book-table-time {
    position: sticky;
    left: 0;
    z-index: 2;
    min-height: 48px;
    padding: 4px 8px;
    text-align: right;
    font-size: .72rem;
    color: #6C757D;
    font-weight: 600;
    background: var(--lh-book-header);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.ui-book-table-cell {
    min-height: 48px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* 그리드 아이템 기본값(min-width:auto)이면 긴 내용이 열 너비를 밀어내므로 0으로 고정한다. */
    min-width: 0;
}

.ui-book-table-cell:not(.ui-book-table-cell-divided) > .ui-book-slot {
    flex: 1 1 auto;
}

.ui-book-table-today {
    color: #8B0020;
    background-color: rgba(139, 0, 32, .04);
}

.ui-weekly-date-header.ui-book-table-today,
.ui-weekly-empty-date-header.ui-book-table-today {
    background-color: var(--lh-book-today);
}

.ui-weekly-empty-table {
    display: grid;
    grid-template-columns: repeat(7, minmax(140px, 1fr));
    min-width: 980px;
    gap: 1px;
    background: var(--lh-book-grid);
    border: 1px solid var(--lh-book-grid);
    border-radius: 6px;
    overflow: hidden;
}

.ui-weekly-empty-date-header {
    position: sticky;
    top: 0;
    min-height: 48px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lh-book-header);
}

.ui-weekly-empty-message {
    grid-column: 1 / -1;
    min-height: 120px;
    padding: 36px 16px;
    background: var(--lh-book-surface);
    color: #6C757D;
}

.ui-weekly-corner {
    grid-row: span var(--ui-weekly-header-rows, 3);
    min-height: calc(var(--ui-weekly-header-rows, 3) * 42px);
}

.ui-weekly-date-header {
    top: 0;
    min-height: 42px;
    padding: 5px 8px;
    z-index: 4;
}

.ui-weekly-subject-header {
    top: 42px;
    min-height: 40px;
    padding: 5px 8px;
    background: #F1F3F5;
    z-index: 4;
}

/* 편집 모드에서 강사 헤더에 붙는 `종일` 선택 버튼(그 강사의 하루 칸 전체를 토글). */
/* 편집 모드에서 강사 헤더의 이름 아래에 붙는 전체 선택 체크박스. 일부만 선택이면 "–"(indeterminate).
   label 여백으로 누르는 영역을 넓힌다. */
.ui-book-day-select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px 2px;
    margin: 0;
    cursor: pointer;
}

.ui-book-day-select .form-check-input {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    border-color: #8B0020;
}

.ui-book-day-select .form-check-input:checked,
.ui-book-day-select .form-check-input:indeterminate {
    background-color: #8B0020;
    border-color: #8B0020;
}

.ui-book-day-select .form-check-input:focus {
    box-shadow: 0 0 0 .2rem rgba(139, 0, 32, .25);
}

.ui-weekly-teacher-header {
    top: 82px;
    min-height: 44px;
    padding: 5px 8px;
    z-index: 4;
}

.ui-book-empty-cell {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 4px;
    color: #ADB5BD;
    background: transparent;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: .7rem;
}

.ui-book-schedule-label {
    color: #6C757D;
    font-size: .65rem;
    line-height: 1.2;
}

.ui-book-empty-cell:hover,
.ui-book-empty-cell:focus-visible {
    color: #8B0020;
    background: rgba(139, 0, 32, .08);
    outline: none;
}

/* 예약 카드 색상 범례 — 아래 lesson-thirty/fifty/sixty 카드 색과 같은 값을 쓴다(색을 바꾸면 같이 바꾼다). */
.ui-book-lesson-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
    font-size: .75rem;
    color: #6C757D;
}

.ui-book-lesson-legend li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ui-book-lesson-legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid;
}

.ui-book-lesson-legend-swatch.lesson-thirty { background: #EAF3FB; border-color: #BBD9F0; }
.ui-book-lesson-legend-swatch.lesson-fifty { background: #FBF3E7; border-color: #EFD7AE; }
.ui-book-lesson-legend-swatch.lesson-sixty { background: #F3EEFB; border-color: #D9C9F0; }

.book-slot-stack {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.slot-add-action {
    min-height: 34px;
    border: 1px dashed #8B0020;
    border-radius: 4px;
    background: var(--lh-book-surface);
    color: #8B0020;
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
}

/* 앞 레슨이 이어져 예약할 수 없는 칸. 단순 "닫힘"(var(--lh-book-header) 평면 회색)과 구분되도록
   회색 빗금 배경을 쓴다 — 둘 다 회색이지만 원인이 다르므로 한눈에 구별되어야 한다. */
.slot-unavailable {
    width: 100%;
    min-height: 44px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 2px 4px;
    border: 1px solid #D7DCE1;
    border-radius: 4px;
    background: repeating-linear-gradient(-45deg, #F1F3F5, #F1F3F5 6px, #E9ECEF 6px, #E9ECEF 12px);
    color: #6C757D;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    cursor: not-allowed;
}

.ui-book-slot-half .slot-unavailable {
    min-height: 22px;
}

.booking-conflict {
    border: 2px solid #C53030;
    border-radius: 6px;
    padding: 4px;
    background: #FFF5F5;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.booking-conflict-label {
    display: block;
    color: #C53030;
    font-size: .62rem;
    font-weight: 800;
    text-align: center;
}

@media (max-width: 959.98px) {
    .ui-book-table-corner,
    .ui-book-table-time {
        padding: 4px;
        font-size: .65rem;
    }

    .ui-book-table-time,
    .ui-book-table-cell {
        min-height: 44px;
    }

    .ui-book-table-cell.ui-book-table-cell-divided {
        grid-template-rows: repeat(2, minmax(28px, 1fr));
    }

    .ui-book-slot {
        min-height: 44px;
        padding: 2px;
        gap: 0;
    }

    .ui-book-slot-half {
        min-height: 28px;
    }

    .ui-book-empty-cell,
    .ui-book-edit-cell {
        min-height: 44px;
        border-radius: 0;
    }

    .ui-book-slot-half .ui-book-empty-cell,
    .ui-book-slot-half .ui-book-edit-cell {
        min-height: 28px;
    }

    .book-slot-stack {
        gap: 2px;
    }

    .slot-add-action,
    .slot-unavailable {
        min-height: 28px;
        font-size: .58rem;
    }

    .booking-conflict {
        padding: 2px;
        gap: 2px;
    }

    .booking-conflict-label {
        font-size: .55rem;
    }}

.ui-book-table-time {
    font-size: .75rem;
    font-weight: 400;
}

.ui-daily-book-table .ui-book-table-header > span:first-child {
    font-size: .8125rem;
    font-weight: 600;
    color: #1A1A1A;
}

.ui-daily-book-table .ui-book-table-header > span.text-secondary {
    font-size: .7rem !important;
}

/* 강사 포털은 조회 전용으로 공통 시간표를 사용한다. */
.teacher-timetable-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:12px; }
.teacher-timetable-toolbar .teacher-period-nav { flex:1; margin:0; }
.ui-book-table-shell--fit-width .ui-scroll-fade { display:none; }
/* 강사 시간표의 좌우 끝에서 브라우저의 탄성 스크롤이 남지 않게 한다. */
html:has(.teacher-schedule-page),
.teacher-content-scroll:has(.teacher-schedule-page),
.teacher-schedule-timetable .ui-book-table-head,
.teacher-schedule-timetable .ui-book-table-scroll { overscroll-behavior-x:none; }
.teacher-schedule-timetable .ui-book-table-shell--fit-width .ui-book-table-scroll {
    overflow:clip;
    touch-action:pan-y pinch-zoom;
}
.ui-book-readonly-cell { cursor:default; }
.ui-book-readonly-cell:hover { background:transparent; color:#ADB5BD; }
@media (max-width:959.98px) {
    .teacher-timetable-toolbar { align-items:stretch; }
    .teacher-timetable-toolbar .ui-toggle-item { min-height:44px; }
    .teacher-timetable-toolbar .teacher-period-nav { flex-basis:100%; }
}

.teacher-schedule-timetable .ui-book-table-head { top:-22px; }
@media (max-width:599.98px) { .teacher-schedule-timetable .ui-book-table-head { top:-16px; } }

/* Shared administrator/member monthly calendar. */
    .ui-calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 2px;
    }

    .ui-calendar-dow {
        text-align: center;
        font-size: 12px;
        font-weight: 500;
        color: var(--lh-text-secondary);
        padding: 2px 0;
    }

    .ui-calendar-cell {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        height: 36px;
        border-radius: 4px;
        cursor: pointer;
        padding-top: 3px;
    }

    .ui-calendar-cell:hover:not(.ui-calendar-selected) {
        background-color: var(--lh-primary-tint);
    }

    .ui-calendar-outside {
        opacity: 0.35;
    }

    .ui-calendar-cell:focus-visible {
        outline: 2px solid #8B0020;
        outline-offset: -2px;
    }

    .ui-calendar-cell.ui-calendar-selected,
    button.ui-calendar-cell.ui-calendar-selected {
        background-color: transparent;
        outline: 1px solid #8B0020;
        outline-offset: -1px;
    }

    .ui-calendar-cell.ui-calendar-selected:focus-visible {
        outline-width: 2px;
    }

    .ui-calendar-date {
        font-size: 11px;
        font-weight: 400;
    }

    .ui-calendar-today {
        font-weight: 700;
        color: #8B0020;
        background-color: #FCE8EC;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .ui-calendar-markers {
        display: flex;
        gap: 2px;
        margin-top: 2px;
        height: 6px;
    }

    .ui-calendar-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        display: inline-block;
    }

    .ui-calendar-month-toggle {
        display: flex;
        align-items: center;
    }

.ui-calendar-month-title { min-width: 90px; text-align: center; font-size: 14px; font-weight: 700; }
button.ui-calendar-cell { border: 0; background-color: transparent; color: var(--lh-text-primary); padding: 3px 0 0; }

/* Approved ticket refund dialog, 2026-10-20. All selectors are refund-specific. */
.ui-refund-header{display:flex;justify-content:space-between;align-items:flex-start;padding:22px 24px 18px;border-bottom:1px solid var(--line);gap:16px;flex-shrink:0}
.ui-refund-header h1{font-size:21px;line-height:1.35;letter-spacing:-.6px;margin:0 0 7px;font-weight:700}.ui-refund-header p{margin:0;color:var(--muted);font-size:13px}.ui-refund-status{font-size:11px;font-weight:600;color:#625d63;padding:3px 6px;background:#f2f0f1;margin-left:8px;vertical-align:1px}.ui-refund-icon-close{border:0;background:transparent;width:28px;height:28px;color:#777;font-size:24px;line-height:1}
.ui-refund-body{padding:20px 24px 22px;overflow:auto;overscroll-behavior:contain;scroll-behavior:auto;min-height:0}.ui-refund-section-heading{font-size:13px;font-weight:700;margin:0 0 12px;display:flex;align-items:center;justify-content:space-between;gap:12px}.ui-refund-text-action{border:0;background:transparent;padding:0;color:var(--muted);font-size:12px;text-decoration:underline;text-underline-offset:3px}
.ui-refund-ticket-top{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;margin-bottom:16px}.ui-refund-ticket-top div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.ui-refund-ticket-top span{color:var(--muted);font-size:12px}.ui-refund-ticket-top strong{font-size:13px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.ui-refund-balance{width:100%;border-collapse:collapse;table-layout:fixed;font-variant-numeric:tabular-nums}.ui-refund-balance th{font-size:11px;font-weight:400;color:var(--muted);border-top:1px solid var(--line);padding:10px 2px 7px;text-align:center}.ui-refund-balance td{vertical-align:top;text-align:center;padding:0 2px 10px;border-bottom:1px solid var(--line)}.ui-refund-balance-count{font-size:16px;display:flex;align-items:baseline;justify-content:center;gap:5px;white-space:nowrap}.ui-refund-balance-count s{font-size:inherit;font-weight:400;color:#999097;text-decoration-thickness:1px}.ui-refund-balance-count .ui-refund-arrow{font-size:11px;color:#a69ba2}.ui-refund-balance-count strong{font-weight:600;font-size:inherit}.ui-refund-balance td:first-child strong{color:var(--accent)}.ui-refund-balance small{display:block;font-size:10px;font-weight:400;color:var(--muted);margin-top:6px}.ui-refund-balance .ui-refund-source-unknown{font-size:11px;color:var(--muted);font-weight:400}
.ui-refund-balance-notes{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:9px}.ui-refund-balance-notes p{font-size:11px;color:var(--muted);margin:0;line-height:1.6}.ui-refund-ticket-details{margin-top:12px}.ui-refund-ticket-details summary{font-size:12px;color:var(--muted);cursor:pointer}.ui-refund-details-table{width:100%;border-collapse:collapse;margin-top:10px;font-size:12px}.ui-refund-details-table th{text-align:left;font-weight:400;color:var(--muted);padding:7px 8px 7px 0;border-bottom:1px solid var(--line)}.ui-refund-details-table td{text-align:right;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.ui-refund-work-grid{display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:24px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}.ui-refund-work-grid h2{font-size:14px;font-weight:700;letter-spacing:-.2px;margin:0 0 16px}.ui-refund-type-label{font-size:12px;display:block;margin-bottom:8px;color:#5e575f}.ui-refund-types{display:flex;gap:0;margin-bottom:16px;border:1px solid #dbd4d7;border-radius:6px;overflow:hidden}.ui-refund-types button{background:#fff;color:#777;padding:9px;flex:1;border:0;font-size:12px;font-weight:500}.ui-refund-types button+button{border-left:1px solid #dbd4d7}.ui-refund-types button[aria-pressed=true]{background:var(--tint);color:var(--accent);font-weight:700;box-shadow:inset 0 -2px var(--accent)}
.ui-refund-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px}.ui-refund-field label{display:block;font-size:12px;margin-bottom:7px;color:#5e575f}.ui-refund-input-wrap{position:relative}.ui-refund-input-wrap input{width:100%;min-width:0;height:39px;border:1px solid #ddd7da;background:#fff;border-radius:5px;padding:9px 30px 9px 10px;color:#2c282c;font-size:13px;font-variant-numeric:tabular-nums}.ui-refund-input-wrap input[type=date]{padding-right:8px;font-size:12px}.ui-refund-input-wrap .ui-refund-unit{position:absolute;right:10px;top:11px;font-size:12px;color:#9a9198;pointer-events:none}.ui-refund-field small{font-size:10px;color:var(--muted);line-height:1.5;display:block;margin-top:5px}
.ui-refund-calculate-wrap{display:flex;align-items:end}.ui-refund-calculate{width:100%;height:39px;border:1px solid #c89ba7;background:#fff;color:var(--accent);font-weight:600;border-radius:5px;font-size:12px}.ui-refund-calculate:hover{background:var(--tint)}.ui-refund-form-note{font-size:11px;color:var(--muted);line-height:1.65;margin:13px 0 0;word-break:keep-all}
.ui-refund-field .ui-refund-lesson-reference{display:flex;flex-wrap:wrap;gap:3px 10px;margin-top:7px;color:var(--muted);font-size:11px;line-height:1.6}.ui-refund-lesson-reference span{white-space:nowrap}.ui-refund-lesson-reference strong{font-weight:600;color:#51484e;font-variant-numeric:tabular-nums}
.ui-refund-result{background:var(--tint);padding:18px 18px 14px;align-self:start;border-radius:6px}.ui-refund-result h2{font-size:12px;color:#71616a;font-weight:500;margin-bottom:7px}.ui-refund-amount{font-size:33px;font-weight:700;color:var(--accent);letter-spacing:-1px;font-variant-numeric:tabular-nums;line-height:1.35}.ui-refund-amount .ui-refund-won{font-size:15px;font-weight:500;letter-spacing:0;margin-left:3px}.ui-refund-result-caption{font-size:11px;color:#8b7580;margin:5px 0 16px}.ui-refund-result-table{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}.ui-refund-result-table th{text-align:left;font-weight:400;color:#73656e;padding:7px 0}.ui-refund-result-table td{text-align:right;font-weight:500;white-space:nowrap}.ui-refund-result-table .ui-refund-final-row th,.ui-refund-result-table .ui-refund-final-row td{padding-top:11px;border-top:1px solid #e7dbe0;color:#31252c;font-weight:600}.ui-refund-math-detail{margin-top:15px;border-top:1px solid #e7dbe0;padding-top:12px}.ui-refund-math-detail summary{font-size:11px;color:#735866;cursor:pointer}.ui-refund-math-detail table{margin-top:5px;font-size:11px}.ui-refund-math-detail .ui-refund-explain{font-size:10px;line-height:1.6;color:#8b7580;margin:9px 0 0}.ui-refund-delta{padding-top:10px;margin-top:12px;border-top:1px solid #e7dbe0;font-size:12px;line-height:1.8}.ui-refund-delta div{display:flex;justify-content:space-between}.ui-refund-delta strong{font-variant-numeric:tabular-nums;color:var(--accent)}
.ui-refund-result-empty{padding:28px 0;color:#8a7c84;font-size:12px;line-height:1.8}.ui-refund-result-empty strong{font-weight:500;color:#5e4c57;display:block;margin-bottom:5px}.ui-refund-inline-notice{background:#fbf6ec;border-left:2px solid #bd9556;padding:11px 13px;margin-top:16px;font-size:12px;line-height:1.7;color:#796443}.ui-refund-inline-notice strong{font-weight:600}.ui-refund-error-box{border:1px solid var(--line);padding:28px;margin:8px 0;font-size:13px;line-height:1.8}.ui-refund-error-box p{color:var(--muted);font-size:12px}.ui-refund-error-box button{padding:8px 14px;border:1px solid #d8c4cb;background:white;color:var(--accent);border-radius:4px}
.ui-refund-history{margin-top:18px;border-top:1px solid var(--line);padding-top:14px;font-size:12px}.ui-refund-history summary{color:#70666d;cursor:pointer}.ui-refund-history table{font-size:11px}
.ui-refund-footer{padding:15px 24px 18px;border-top:1px solid var(--line);flex-shrink:0;background:white}.ui-refund-confirmation{font-size:11px;line-height:1.6;display:flex;gap:8px;align-items:flex-start;margin-bottom:13px;color:#6e666e}.ui-refund-confirmation input{margin:2px 0 0;accent-color:var(--accent);width:14px;height:14px;flex-shrink:0}.ui-refund-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.ui-refund-footer-total{font-size:11px;color:var(--muted)}.ui-refund-footer-total strong{font-size:16px;color:var(--accent);font-variant-numeric:tabular-nums;display:block;margin-top:3px}.ui-refund-action-buttons{display:flex;gap:8px}.ui-refund-action-buttons button{height:39px;padding:0 16px;border-radius:5px;font-size:12px;font-weight:600}.ui-refund-cancel{background:white;color:#716b72;border:1px solid #ded8dc}.ui-refund-confirm{background:var(--accent);color:white;border:1px solid var(--accent);min-width:106px}.ui-refund-confirm:hover:not(:disabled){background:#6b0018}
.ui-refund-loading-skeleton{min-height:420px}.ui-refund-skeleton{background:#f0edef;border-radius:3px;min-height:18px}.ui-refund-skeleton-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0}.ui-refund-skeleton-tall{height:150px}.ui-refund-skeleton-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.ui-refund-skeleton-grid .ui-refund-skeleton{height:50px}
@media(max-width:767px){.ui-refund-header{padding:17px 18px 14px}.ui-refund-header h1{font-size:19px}.ui-refund-header p{font-size:12px}.ui-refund-body{padding:17px 18px 22px}.ui-refund-ticket-top{grid-template-columns:1fr;gap:9px;margin-bottom:13px}.ui-refund-ticket-top strong{font-size:12px}.ui-refund-balance-notes{align-items:flex-start}.ui-refund-balance-notes p{font-size:10px}.ui-refund-work-grid{grid-template-columns:1fr;gap:22px;margin-top:18px;padding-top:18px}.ui-refund-result{background:transparent;border-radius:0;padding:20px 0 0;border-top:1px solid var(--line)}.ui-refund-result h2{font-size:12px}.ui-refund-amount{font-size:32px}.ui-refund-math-detail{margin-top:12px}.ui-refund-footer{padding:12px 18px 14px}.ui-refund-confirmation{font-size:10px;margin-bottom:10px}.ui-refund-action-buttons button{padding:0 12px}.ui-refund-confirm{min-width:96px}.ui-refund-footer-total strong{font-size:15px}}

.ui-refund-header.ui-dialog-header{background:#fff;border-left:0;padding:22px 24px 18px;align-items:flex-start}
.ui-dialog-content .ui-refund-body{padding:20px 24px 22px;font-size:14px;color:#272529;--ink:#272529;--muted:#777078;--line:#e8e4e5;--accent:#8b0020;--tint:#faf4f6}
.ui-refund-header,.ui-refund-footer{--muted:#777078;--line:#e8e4e5;--accent:#8b0020;--tint:#faf4f6;color:#272529}
.ui-refund-footer.ui-dialog-footer{display:block;margin:0;background:#fff;padding:15px 24px 18px}
.ui-refund-footer>*{margin:0}.ui-refund-footer .ui-refund-confirmation{margin-bottom:13px}
.ui-refund-fields{border:0;padding:0;min-width:0}.ui-refund-total-usage{color:var(--muted);font-size:11px;font-weight:400}
.ui-refund-body button,.ui-refund-header button,.ui-refund-footer button{cursor:pointer;font-family:inherit}
.ui-refund-body button:disabled,.ui-refund-header button:disabled,.ui-refund-footer button:disabled{opacity:.4;cursor:default}
.ui-refund-body :is(button,input,summary):focus-visible,.ui-refund-header button:focus-visible,.ui-refund-footer :is(button,input):focus-visible{outline:2px solid #8b0020;outline-offset:3px}
.ui-refund-inline-notice ul{margin:6px 0;padding-left:18px}.ui-refund-history .table{font-size:11px}
@media(max-width:767px){
 .ui-refund-header.ui-dialog-header{padding:17px 18px 14px}.ui-dialog-content .ui-refund-body{padding:17px 18px 22px}
 .ui-refund-footer.ui-dialog-footer{padding:12px 18px 14px}.ui-refund-footer .ui-refund-confirmation{margin-bottom:10px}
 .ui-refund-ticket-top strong{white-space:normal;text-align:right}.ui-refund-total-usage{font-size:10px;text-align:right}
}

/* Teacher member names use the same burgundy as other teacher action links. */
.teacher-page .teacher-member-link { display: block; align-self: flex-start; min-width: 0; max-width: 100%; padding: 0; border: 0; background: transparent; color: var(--lh-primary); font-family: inherit; font-size: .86rem; line-height: 1.5; font-weight: 700; text-align: left; overflow-wrap: anywhere; text-decoration: none; cursor: pointer; }
.teacher-page .teacher-member-link:hover { text-decoration: underline; }
.teacher-page .teacher-member-link:focus-visible { outline: 2px solid var(--lh-primary); outline-offset: 3px; }
.teacher-book-member-references { margin-top: 20px; }
.teacher-metric-strip--history { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.teacher-record-person, .teacher-member-row > div:nth-child(2), .teacher-member-detail > div:nth-child(2) { gap: 3px; }
.teacher-member-detail { align-items: start; }
.teacher-member-detail:last-child { border-bottom: 0; }
/* Teacher lesson records reuse the member note paper and query controls. */
.teacher-history-notes { --lh-note-surface: #fff; --lh-text-primary: #0f172a; min-width: 0; }
.teacher-history-notes .teacher-record-row { min-height: 0; border-bottom: 0; }
.teacher-history-notes .teacher-filter-tabs { margin: 0; padding: 0 32px 16px; border-bottom: 0; }
.teacher-history-notes .teacher-member-link { font-size: inherit; line-height: inherit; }
.teacher-history-note-actions { display: flex; justify-content: flex-end; margin-top: 20px; }
.teacher-history-error { padding: 24px 32px; background: #fff; color: var(--lh-text-secondary); font-size: .8rem; }
@media (max-width: 767.98px) { .teacher-history-notes .teacher-filter-tabs { padding-inline: 20px; } }

/* Shared by member management and dashboard dialogs, including child components. */
.ui-member-badge {
    flex-shrink: 0;
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    vertical-align: 1px;
    white-space: nowrap;
}
.ui-member-badge--before { background-color: #EDF0F4; color: #687385; }
.ui-member-badge--active { background-color: #E7F6EC; color: #2C8050; }
.ui-member-badge--expiring { background-color: #FFF0D7; color: #A87116; }
.ui-member-badge--holding { background-color: #F1E8FB; color: #7B4DB0; }
.ui-member-badge--ended { background-color: #F1F3F5; color: #868E96; }

/* Native date segments remain readable while a date is being edited. */
.ui-date-field-wrapper:focus-within .ui-date-field-native,
.ui-date-field-wrapper:focus-within .ui-date-field-native::-webkit-datetime-edit,
.ui-date-field-wrapper:focus-within .ui-date-field-native::-webkit-datetime-edit-fields-wrapper {
    color: var(--lh-text-primary, #0E0E0E);
    caret-color: var(--lh-text-primary, #0E0E0E);
}
.ui-date-field-wrapper:focus-within .ui-date-field-display { visibility: hidden; }
.nav-icon.bi { display: inline-flex; align-items: center; justify-content: center; font-size: 21px; }
.admin-bottom-nav-item > .bi { font-size: 21px; }
.member-ticket-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.member-ticket-actions > a, .member-ticket-actions > button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
@media (max-width: 599.98px) {
    .member-home-mobile .member-ticket-actions { width: 100%; }
    .member-home-mobile .member-ticket-actions > a, .member-home-mobile .member-ticket-actions > button { flex: 1 1 0; width: auto; }
    .member-home-mobile .member-ticket-footer .member-ticket-actions .btn-burgundy { width: auto; }
}

/* Teacher header belongs to the teacher page scroll; time cells remain fixed horizontally. */
.teacher-schedule-timetable .ui-book-table-shell { overflow: visible; }
/* Keep the -22px/-16px offsets above: they cancel the scroll container padding,
   so bookings cannot show through a gap above the pinned weekday header. */
.teacher-schedule-timetable .ui-book-table-head { background: #fff; border-radius: 0; }
.teacher-schedule-timetable .ui-book-table-corner { position: sticky; left: 0; z-index: 9; background: #f8f9fa; }
.teacher-schedule-timetable .ui-book-table-time { position: sticky; left: 0; z-index: 4; background: #f8f9fa; }
.ui-refund-mode { margin: 18px 0; }
.ui-refund-manual { padding-top: 8px; }
.ui-refund-manual > label { display: block; margin-bottom: 6px; font-size: .875rem; font-weight: 600; }

/* 내 수강권도 홈과 같은 잔여 홀딩·예약·신청 동작을 제공합니다. */
.member-owned-ticket-select { display: block; width: 100%; min-height: 44px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
article.desktop-ticket-item { cursor: default; }
.member-owned-ticket-actions { display: grid; gap: 12px; margin-top: 12px; }
.member-owned-ticket-actions .lh-holding-badge { justify-self: start; }
.member-owned-ticket-actions .member-ticket-actions > a,
.member-owned-ticket-actions .member-ticket-actions > button { flex: 1 1 0; min-height: 44px; padding: 8px 12px; white-space: nowrap; }
.member-ticket-mobile-lists > .member-owned-ticket-actions { margin-bottom: 24px; }
.member-ticket-list-section.member-ticket-holding-section { padding: 0; border-bottom: 0; }
.member-ticket-holding-section .member-holding-flow { max-width: none; margin: 0; padding: 0; }
.member-ticket-holding-section .member-holding-history { margin-top: 0; }
.member-ticket-holding-section .member-holding-history-heading h2 { font-weight: 800; }
.member-ticket-holding-section .member-holding-history-item:last-child { border-bottom: 0; }

/* 내 정보의 공통 버전 정보 진입과 읽기 전용 상세. */
.account-app-info-entry { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 56px; margin-top: 24px; padding: 16px 0; border: 0; border-top: 1px solid var(--lh-border); background: transparent; color: var(--lh-text-primary); text-align: left; font: inherit; }
.account-app-info-entry > span:first-child { font-weight: 600; }
.account-app-info-version { display: flex; align-items: center; gap: 12px; color: var(--lh-text-secondary); font-size: .875rem; overflow-wrap: anywhere; }
.app-info-product > strong { font-size: 1.25rem; }
.app-info-product > p { margin: 8px 0 24px; color: var(--lh-text-secondary); font-size: .875rem; }
.app-info-details { margin: 0; }
.app-info-details > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--lh-border); }
.app-info-details dt { color: var(--lh-text-secondary); font-weight: 400; }
.app-info-details dd { margin: 0; overflow-wrap: anywhere; user-select: text; }
.app-info-message { margin: 16px 0 0; font-size: .875rem; }
.member-owned-ticket-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.member-owned-ticket-badges { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }

.app-info-actions .btn { min-height: 44px; }