/* 클라우드러닝 새 디자인 · 공통 컴포넌트 (작업공간 · 공개 영역 공용)
   값은 cl-tokens.css 의 변수를 쓴다. 모든 규칙은 .cl-scope 안에서만 적용된다. */

/* ---------- 화면 틀 ---------- */
.cl-scope .cl-page--wide { max-width: none; }
.cl-page__head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cl-page__meta { margin: 4px 0 0; font-size: var(--cl-fs-caption); color: var(--cl-ink-muted); }
.cl-page__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cl-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; font-size: var(--cl-fs-caption); color: var(--cl-ink-muted); text-decoration: none; }
.cl-back:hover { color: var(--cl-ink); }
.cl-section-title { margin: 0 0 12px; font-size: var(--cl-fs-section-title); font-weight: 700; }

/* 본문 + 오른쪽 보조 열 */
.cl-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.cl-split--narrow { grid-template-columns: minmax(0, 1fr) 280px; }
@media (max-width: 1280px) { .cl-split, .cl-split--narrow { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 버튼 보강 ---------- */
.cl-btn--danger { background: var(--cl-danger); color: #fff; }
.cl-btn--danger:hover { background: #A8191A; }
.cl-btn--tint { background: var(--cl-primary-tint); color: var(--cl-primary-pressed); }
.cl-btn--tint:hover { background: #E9DDFB; }
.cl-btn--sm { height: 28px; padding: 0 10px; font-size: var(--cl-fs-caption); }
.cl-btn[disabled], .cl-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* ---------- 배지 ---------- */
.cl-badge { height: 22px; padding: 0 8px; border-radius: 6px; display: inline-flex; align-items: center; gap: 4px; font-size: var(--cl-fs-micro); font-weight: 500; white-space: nowrap; }
.cl-badge--success { background: var(--cl-success-bg); color: var(--cl-success); }
.cl-badge--warning { background: var(--cl-warning-bg); color: var(--cl-warning); }
.cl-badge--danger { background: var(--cl-danger-bg); color: var(--cl-danger); }
.cl-badge--info { background: var(--cl-primary-tint); color: var(--cl-primary-pressed); }
.cl-badge--neutral { background: var(--cl-hover); color: var(--cl-ink-2); }

/* ---------- 진도 막대 ---------- */
.cl-progress { display: inline-flex; align-items: center; gap: 8px; min-width: 120px; }
.cl-progress__track { flex: 1; height: 6px; border-radius: 999px; background: var(--cl-heat-0); overflow: hidden; }
.cl-progress__bar { display: block; height: 100%; border-radius: inherit; background: var(--cl-primary); }
.cl-progress.is-done .cl-progress__bar { background: var(--cl-success); }
.cl-progress__value { min-width: 36px; text-align: right; font-size: var(--cl-fs-caption); font-weight: 600; }

/* ---------- 빈 상태 · 불러오는 중 ---------- */
.cl-empty { padding: 48px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.cl-empty__icon { width: 48px; height: 48px; border-radius: 12px; background: var(--cl-hover); color: var(--cl-ink-muted); display: grid; place-items: center; margin-bottom: 4px; }
.cl-empty__title { margin: 0; font-size: 17px; font-weight: 600; }
.cl-empty__desc { margin: 0; color: var(--cl-ink-muted); max-width: 360px; }
.cl-empty .cl-btn { margin-top: 8px; }
.cl-loading { padding: 40px 16px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--cl-ink-muted); }
.cl-loading__spinner { width: 16px; height: 16px; border-radius: 999px; border: 2px solid var(--cl-hairline); border-top-color: var(--cl-primary); animation: cl-spin .8s linear infinite; }
@keyframes cl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cl-loading__spinner { animation: none; } }

/* ---------- 칩 · 보기 전환 · 보기 탭 ---------- */
.cl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-chip { height: 30px; padding: 0 12px; border: 0; border-radius: var(--cl-radius-pill); background: var(--cl-canvas); box-shadow: 0 0 0 1px var(--cl-control-border); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.cl-chip:hover { background: var(--cl-hover); }
.cl-chip[aria-pressed="true"] { background: var(--cl-ink); color: #fff; box-shadow: none; }
.cl-chip__count { font-size: var(--cl-fs-micro); opacity: .7; }

.cl-segmented { display: inline-flex; padding: 2px; border-radius: var(--cl-radius-sm); background: var(--cl-hover); }
.cl-segmented__item { width: 30px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: var(--cl-ink-muted); display: grid; place-items: center; cursor: pointer; }
.cl-segmented__item[aria-pressed="true"] { background: var(--cl-canvas); color: var(--cl-ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.cl-scope .cl-segmented__item--text { width: auto; padding: 0 12px; font-size: 13px; font-weight: 600; }
@media (max-width: 900px) { .cl-view-toggle { display: none; } }

.cl-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--cl-grid-head); overflow-x: auto; scrollbar-width: none; }
.cl-tab { height: 40px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; display: inline-flex; align-items: center; gap: 6px; color: var(--cl-ink-muted); font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none; }
.cl-tab:hover { color: var(--cl-ink); }
.cl-tab[aria-selected="true"], .cl-tab[aria-current="page"] { color: var(--cl-ink); border-bottom-color: var(--cl-ink); }
.cl-tab__count { font-size: var(--cl-fs-micro); color: var(--cl-ink-muted); font-weight: 500; }

/* ---------- 필터 줄 · 입력 ---------- */
.cl-toolbar { min-height: var(--cl-h-toolbar); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; }
.cl-toolbar__spacer { flex: 1; }
.cl-search { position: relative; display: inline-flex; align-items: center; }
.cl-search .cl-icon { position: absolute; left: 10px; color: var(--cl-ink-muted); pointer-events: none; }
.cl-search input { height: var(--cl-h-control); width: 220px; padding: 0 10px 0 32px; border: 1px solid var(--cl-control-border); border-radius: var(--cl-radius-sm); background: var(--cl-canvas); }
.cl-search input:focus { outline: 2px solid var(--cl-primary); outline-offset: -1px; border-color: transparent; }
.cl-select { height: var(--cl-h-control); padding: 0 30px 0 10px; border: 1px solid var(--cl-control-border); border-radius: var(--cl-radius-sm); background: var(--cl-canvas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; appearance: none; font: inherit; color: var(--cl-ink); max-width: 260px; }
.cl-select:focus { outline: 2px solid var(--cl-primary); outline-offset: -1px; }
/* 선택 칸 (select-box.js) — 보이는 칸이 원래 select 의 class 를 그대로 받아 화면별 select 스타일이 적용된다 */
.cl-selectbox { display: contents; }
.cl-selectbox__control:disabled { opacity: .5; cursor: not-allowed; }
.cl-selectbox__button { display: inline-grid; grid-template-columns: minmax(0, max-content); align-items: center; text-align: left; white-space: nowrap; cursor: pointer; }
.cl-selectbox__label, .cl-selectbox__sizer > span { grid-area: 1 / 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cl-selectbox__sizer { display: contents; }
.cl-selectbox__sizer > span { visibility: hidden; height: 0; }
.cl-selectbox__input { width: 200px; text-overflow: ellipsis; cursor: pointer; }
.cl-selectbox > .cl-selectbox__input.cl-select { padding-left: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 10px center, right 10px center; }
.cl-selectbox__input:focus { cursor: text; }
.cl-selectbox__input::placeholder { color: var(--cl-ink-muted); opacity: 1; }
/* 스크립트가 바꾸기 전의 원래 select 도 바뀐 칸과 같은 모양 · 너비로 둔다 (페이지가 열릴 때 칸이 덜컥이지 않게) */
select.cl-select[data-select="search"] { padding-left: 32px; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 10px center, right 10px center; }
select.cl-select[data-select="search"]:has(option[value=""]:checked) { color: var(--cl-ink-muted); }
/* 검색 칸은 옵션을 나중에 불러와도 너비가 변하지 않게 고정 (화면별 너비 지정 · 휴대폰 100% 가 있으면 그쪽이 이긴다) */
:where(select.cl-select[data-select="search"]) { width: 200px; }
.cl-selectbox__list { position: fixed; z-index: 1000; max-width: min(420px, calc(100vw - 8px)); margin: 0; padding: 4px; list-style: none; overflow-y: auto; border: 1px solid var(--cl-hairline); border-radius: var(--cl-radius-sm); background: var(--cl-canvas); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.cl-selectbox__list[hidden] { display: none; }
.cl-selectbox__option { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 6px; font-size: 14px; color: var(--cl-ink); cursor: pointer; }
.cl-selectbox__option.is-active { background: var(--cl-hover); }
.cl-selectbox__option[aria-selected="true"] { color: var(--cl-primary-pressed); font-weight: 600; }
.cl-selectbox__option.is-disabled { color: var(--cl-ink-muted); cursor: default; }
.cl-selectbox__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cl-selectbox__empty { padding: 8px 10px; font-size: 13px; color: var(--cl-ink-muted); }
@media (max-width: 900px) { .cl-search, .cl-search input, .cl-select { width: 100%; max-width: none; } .cl-toolbar > * { flex: 1 1 100%; } .cl-toolbar__spacer { display: none; } }

/* ---------- 표 (화면 폭 가득 · 40px 행) ---------- */
.cl-table-wrap { border-top: 1px solid var(--cl-grid-head); overflow-x: auto; }
.cl-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } /* 숫자 · 날짜 · 금액 자릿수가 행마다 맞게 */
.cl-table th { height: var(--cl-h-table-head); padding: 0 12px; text-align: left; font-size: var(--cl-fs-table-head); font-weight: 500; color: var(--cl-ink-muted); border-bottom: 1px solid var(--cl-grid-head); white-space: nowrap; }
.cl-table td { height: var(--cl-h-table-row); padding: 8px 12px; border-bottom: 1px solid var(--cl-grid-row); vertical-align: middle; }
.cl-table tbody tr:hover { background: #FAFAFB; }
.cl-table th:first-child, .cl-table td:first-child { padding-left: 0; }
.cl-table__title { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; display: -webkit-inline-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; vertical-align: top; max-width: 100%; }
.cl-table__title:hover { color: var(--cl-primary-pressed); }
.cl-table__sub { display: block; font-size: var(--cl-fs-caption); color: var(--cl-ink-muted); }
.cl-table__num, .cl-table th.cl-table__num { text-align: right; white-space: nowrap; }
.cl-table__nowrap { white-space: nowrap; }
/* 목록을 처음 불러오는 동안 표 아래(합계 · 쪽 번호)를 숨겨, 표가 그려질 때 아래로 밀리지 않게 (list-steady.js — 작업공간에서만 불러온다)
   목록 칸이 비었거나, list-steady 가 아직 붙지 않았거나, 첫 로딩 중일 때 */
.cl-ws-body :has(> [data-list]:is(:empty, :not([data-steady]), [data-first-load])) > :is(.cl-table-foot, [data-pagination]) { display: none; }
.cl-table-foot { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 0; font-size: var(--cl-fs-caption); color: var(--cl-ink-muted); }

/* 모바일: 표 → 카드형 행 */
@media (max-width: 900px) {
    .cl-table-wrap { border-top: 0; overflow: visible; }
    .cl-table, .cl-table tbody, .cl-table tr, .cl-table td { display: block; width: 100%; }
    .cl-table thead { display: none; }
    .cl-table tr { padding: 12px 0; border-bottom: 1px solid var(--cl-grid-row); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
    .cl-table td { height: auto; padding: 0; border: 0; }
    .cl-table td[data-label]:not([data-primary])::before { content: attr(data-label) " · "; color: var(--cl-ink-muted); font-size: var(--cl-fs-caption); }
    .cl-table td[data-primary] { grid-column: 1 / -1; }
    .cl-table td.cl-table__num { text-align: left; }
    .cl-table tbody tr:hover { background: transparent; }
}

/* ---------- 목록 행 (강좌 · 글) ---------- */
.cl-rows { display: flex; flex-direction: column; border-top: 1px solid var(--cl-grid-head); }
.cl-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--cl-grid-row); }
.cl-row--plain { grid-template-columns: minmax(0, 1fr) auto; }
.cl-row__thumb { width: 120px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--cl-hover); display: block; }
.cl-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-row__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cl-row__eyebrow { font-size: var(--cl-fs-caption); color: var(--cl-ink-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cl-row__title { font-size: 15px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.cl-row__title:hover { color: var(--cl-primary-pressed); }
.cl-row__meta { font-size: var(--cl-fs-caption); color: var(--cl-ink-muted); display: flex; gap: 12px; flex-wrap: wrap; }
.cl-row__side { display: flex; align-items: center; gap: 8px; }
@media (max-width: 900px) { .cl-row { grid-template-columns: 88px minmax(0, 1fr); } .cl-row__thumb { width: 88px; } .cl-row__side { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; } }

/* ---------- 카드 그리드 ---------- */
.cl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 16px; }
.cl-card-item { display: flex; flex-direction: column; background: var(--cl-canvas); border: 1px solid var(--cl-hairline); border-radius: var(--cl-radius-md); overflow: hidden; }
.cl-card-item__thumb { aspect-ratio: 16 / 9; background: var(--cl-hover); display: block; position: relative; }
.cl-card-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-card-item__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cl-card-item__eyebrow { font-size: var(--cl-fs-caption); color: var(--cl-ink-muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cl-card-item__title { font-size: 15px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cl-card-item__title:hover { color: var(--cl-primary-pressed); }
.cl-card-item__meta { font-size: var(--cl-fs-caption); color: var(--cl-ink-muted); }
.cl-card-item__foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* 썸네일이 없을 때: 글자형 */
.cl-thumb-text { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 12px 14px; background: var(--cl-primary-tint); color: var(--cl-primary-pressed); font-weight: 700; line-height: 1.3; overflow: hidden; }
.cl-thumb-text small { font-weight: 500; font-size: var(--cl-fs-micro); opacity: .8; }
.cl-lock { display: inline-flex; align-items: center; gap: 3px; color: var(--cl-ink-muted); font-size: var(--cl-fs-micro); }

/* ---------- 숫자 띠 · 정보 목록 ---------- */
.cl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border: 1px solid var(--cl-hairline); border-radius: var(--cl-radius-md); overflow: hidden; }
.cl-stat { padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--cl-grid-row); }
.cl-stat:last-child { border-right: 0; }
.cl-stat__label { font-size: var(--cl-fs-caption); color: var(--cl-ink-muted); }
.cl-stat__value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cl-dl { margin: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px 12px; }
.cl-dl dt { color: var(--cl-ink-muted); }
.cl-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.cl-panel { padding: 20px; }
.cl-panel + .cl-panel { margin-top: 16px; }

/* ---------- 타임라인 ---------- */
.cl-timeline { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.cl-timeline__item { position: relative; padding: 0 0 16px 20px; }
.cl-timeline__item::before { content: ""; position: absolute; left: 4px; top: 6px; width: 7px; height: 7px; border-radius: 999px; background: var(--cl-ink-faint); }
.cl-timeline__item::after { content: ""; position: absolute; left: 7px; top: 16px; bottom: 0; width: 1px; background: var(--cl-grid-head); }
.cl-timeline__item:last-child::after { display: none; }
.cl-timeline__item.is-urgent::before { background: var(--cl-warning); }
.cl-timeline__item.is-new::before { background: var(--cl-primary); }
.cl-timeline__meta { font-size: var(--cl-fs-micro); color: var(--cl-ink-muted); }
.cl-timeline__title { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cl-timeline__title:hover { color: var(--cl-primary-pressed); }

/* ---------- 페이지네이션 ---------- */
.cl-pagination { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 16px 0; }
.cl-pagination__page, .cl-pagination__arrow { min-width: 32px; height: 32px; padding: 0 6px; border: 0; border-radius: var(--cl-radius-sm); background: transparent; display: grid; place-items: center; cursor: pointer; font-variant-numeric: tabular-nums; }
.cl-pagination__page:hover, .cl-pagination__arrow:hover:not(:disabled) { background: var(--cl-hover); }
.cl-pagination__page.is-current { background: var(--cl-ink); color: #fff; font-weight: 600; }
.cl-pagination__arrow:disabled { color: var(--cl-ink-faint); cursor: default; }

/* ---------- 대화상자 ---------- */
.cl-dialog { width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); padding: 24px; border: 0; border-radius: var(--cl-radius-lg); background: var(--cl-canvas); color: var(--cl-ink); box-shadow: var(--cl-shadow-float); font-family: var(--cl-font); font-size: var(--cl-fs-ui); }
.cl-dialog::backdrop { background: rgba(0, 0, 0, .4); }
.cl-dialog--md { width: min(560px, calc(100vw - 32px)); }
.cl-dialog--lg { width: min(820px, calc(100vw - 32px)); }
.cl-dialog--modal { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.cl-dialog--modal:not([open]) { display: none; }
.cl-dialog__head { height: 56px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--cl-grid-row); }
.cl-dialog__body { padding: 16px 20px 20px; overflow: auto; }
.cl-dialog__title { margin: 0; font-size: 17px; font-weight: 700; }
.cl-dialog--confirm .cl-dialog__title { margin-bottom: 8px; }
.cl-dialog__desc { margin: 0; color: var(--cl-ink-2); white-space: pre-line; }
.cl-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.cl-dialog--modal .cl-dialog__actions { margin: 0; padding: 12px 20px; border-top: 1px solid var(--cl-grid-row); }
.cl-dialog__note { margin: 12px 0 0; font-size: var(--cl-fs-caption); color: var(--cl-ink-muted); }

/* ---------- 토스트 ---------- */
.cl-toast-region { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
/* popover 기본 모양(가운데 · 테두리 · 배경)을 지운다 */
.cl-toast-region[popover] { inset: auto auto 24px 50%; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; }
.cl-toast-region[popover]:not(:popover-open) { display: none; }
.cl-toast { padding: 10px 16px; border-radius: var(--cl-radius-lg); background: var(--cl-ink); color: #fff; box-shadow: var(--cl-shadow-float); font-weight: 500; }
.cl-toast--success { background: var(--cl-success); }
.cl-toast--danger { background: var(--cl-danger); }

/* ---------- 폼 보강 ---------- */
.cl-textarea { width: 100%; min-height: 96px; padding: 10px 12px; border: 1px solid var(--cl-control-border); border-radius: var(--cl-radius-sm); background: var(--cl-canvas); resize: vertical; }
.cl-textarea:focus { outline: 2px solid var(--cl-primary); outline-offset: -1px; border-color: transparent; }
.cl-radio-group { display: flex; gap: 16px; flex-wrap: wrap; }
.cl-radio { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.cl-radio input { width: 16px; height: 16px; margin: 0; accent-color: var(--cl-primary); }
.cl-inline-fields { display: flex; gap: 8px; flex-wrap: wrap; }
.cl-files { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.cl-file { min-height: 36px; padding: 0 6px 0 10px; border: 1px solid var(--cl-hairline); border-radius: var(--cl-radius-sm); display: flex; align-items: center; gap: 8px; }
.cl-file__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-file__size { font-size: var(--cl-fs-micro); color: var(--cl-ink-muted); }
.cl-file button.cl-file__name { border: 0; background: transparent; padding: 0; text-align: left; cursor: pointer; color: var(--cl-primary-pressed); }

/* 본문(편집기 HTML) */
.cl-prose { line-height: 1.7; overflow-wrap: anywhere; }
.cl-prose img { max-width: 100%; height: auto; }
.cl-prose p { margin: 0 0 8px; }

/* ---------- 첫 방문 안내 (코치마크) ---------- */
.cl-coach { position: fixed; inset: 0; z-index: 80; }
.cl-coach__highlight { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45); outline: 2px solid var(--cl-primary-on-dark); transition: all var(--cl-dur) var(--cl-ease); pointer-events: none; }
.cl-coach__card { position: fixed; padding: 20px; border-radius: var(--cl-radius-lg); background: var(--cl-canvas); box-shadow: var(--cl-shadow-float); display: flex; flex-direction: column; gap: 6px; }
.cl-coach__eyebrow { margin: 0; font-size: var(--cl-fs-micro); font-weight: 600; color: var(--cl-primary-pressed); }
.cl-coach__title { margin: 0; font-size: 17px; font-weight: 700; }
.cl-coach__body { margin: 0; color: var(--cl-ink-2); }
.cl-coach__foot { margin-top: 12px; display: flex; align-items: center; gap: 6px; }
.cl-coach__count { margin-right: auto; font-size: var(--cl-fs-caption); color: var(--cl-ink-muted); }
@media (max-width: 900px) { .cl-coach { background: rgba(0, 0, 0, .45); } }

/* 화면 읽기 전용 텍스트 */
.cl-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 학생 · 선생님 공용: 세로 쌓기 · 나의 정보 · 체크박스 줄 */
.cl-stack { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cl-profile-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cl-profile-head__avatar { width: 64px; height: 64px; border-radius: 999px; object-fit: cover; background: var(--cl-primary-tint); color: var(--cl-primary-pressed); display: grid; place-items: center; font-size: 24px; font-weight: 700; flex: none; }
.cl-profile-head__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cl-profile-head__name { font-size: 17px; font-weight: 700; }
.cl-info-rows { display: flex; flex-direction: column; }
.cl-info-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--cl-grid-row); }
.cl-info-row:last-child { border-bottom: 0; }
.cl-info-row__label { color: var(--cl-ink-muted); }
.cl-info-row__value { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 500px) { .cl-info-row { grid-template-columns: minmax(0, 1fr) auto; } .cl-info-row__label { grid-column: 1 / -1; } }
.cl-check { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; user-select: none; }
.cl-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--cl-primary); }

/* ---------- 말줄임: 미리보기 제목은 2줄, 이름 · 과목은 1줄 ---------- */
.cl-clamp-1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-clamp-2 { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* ---------- 검색형 선택 (ui.js comboSelect · 수업커뮤니티 강의 찾기) ---------- */
.cl-combo { position: relative; }
.cl-combo__options { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; max-height: 280px; overflow-y: auto; margin: 4px 0 0; padding: 4px; list-style: none; border: 1px solid var(--cl-hairline); border-radius: var(--cl-radius-sm); background: var(--cl-canvas); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.cl-combo__options[hidden] { display: none; }
.cl-combo__option { padding: 9px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.cl-combo__option:hover, .cl-combo__option[aria-selected="true"] { background: var(--cl-primary-tint); color: var(--cl-primary-pressed); }
.cl-combo__empty { margin: 0; padding: 9px 10px; font-size: 13px; color: var(--cl-ink-muted); }
.cl-combo--select { display: inline-flex; align-items: center; max-width: 100%; }
.cl-combo--select > .cl-icon { position: absolute; z-index: 1; color: var(--cl-ink-muted); pointer-events: none; }
.cl-combo--select > .cl-icon:first-child { left: 12px; }
.cl-combo--select > .cl-icon:nth-child(3) { right: 12px; }
/* 목록형 선택 (menu-select.js) — 화면별 겉모양은 className 으로 덮어쓴다 */
.cl-menu-select { position: relative; }
.cl-menu-select__button { display: inline-flex; align-items: center; gap: 8px; }
.cl-menu-select__list { position: absolute; top: 100%; left: 0; z-index: 20; min-width: 100%; max-height: 280px; overflow-y: auto; margin: 4px 0 0; padding: 4px; list-style: none; border: 1px solid var(--cl-hairline); border-radius: var(--cl-radius-sm); background: var(--cl-canvas); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); outline: none; }
.cl-menu-select__list[hidden] { display: none; }
.cl-menu-select__option { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 6px; font-size: 14px; white-space: nowrap; cursor: pointer; }
.cl-menu-select__option.is-active { background: var(--cl-hover); }
.cl-menu-select__option[aria-selected="true"] { color: var(--cl-primary-pressed); }
.cl-combo--select.is-open > .cl-icon:nth-child(3) { transform: rotate(180deg); }
.cl-combo--select .cl-combo__input { width: 380px; padding: 0 36px; text-overflow: ellipsis; cursor: pointer; }
.cl-combo--select .cl-combo__input:focus { cursor: text; }
.cl-combo--select .cl-combo__options { max-height: 320px; min-width: 100%; }
.cl-combo--select .cl-combo__option { display: flex; align-items: center; gap: 8px; }
.cl-combo--select .cl-combo__option[aria-selected="true"] { background: transparent; font-weight: 600; }
.cl-combo--select .cl-combo__option:hover, .cl-combo--select .cl-combo__option.is-active { background: var(--cl-primary-tint); color: var(--cl-primary-pressed); }
.cl-combo__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) { .cl-combo--select { display: flex; width: 100%; } .cl-combo--select .cl-combo__input { width: 100%; } }

/* ---------- 이미지 저장소 (image-repository.js) ---------- */
.cl-dialog--repo { width: min(1120px, calc(100vw - 32px)); height: min(760px, calc(100vh - 48px)); height: min(760px, calc(100dvh - 48px)); }
.cl-dialog--repo .cl-dialog__body { flex: 1; min-height: 0; padding: 0; overflow: hidden; }
.cl-dialog--repo .cl-dialog__actions { align-items: center; }
.cl-repo { position: relative; height: 100%; display: grid; grid-template-columns: 220px minmax(0, 1fr) 280px; }
.cl-repo__tree { overflow-y: auto; padding: 12px 8px; border-right: 1px solid var(--cl-sidebar-border); background: var(--cl-sidebar); display: flex; flex-direction: column; gap: 10px; }
.cl-repo__area { display: flex; flex-direction: column; gap: 1px; }
.cl-repo__node { width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: var(--cl-radius-sm); background: transparent; display: flex; align-items: center; gap: 8px; font: inherit; font-weight: 600; color: var(--cl-ink); text-align: left; cursor: pointer; }
.cl-repo__node span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-repo__node > .cl-icon { color: var(--cl-ink-muted); }
.cl-repo__node--child { height: 30px; padding-left: 28px; font-weight: 400; color: var(--cl-ink-2); }
.cl-repo__node:hover { background: #EFEFF1; }
.cl-repo__node[aria-current="true"] { background: var(--cl-primary-tint); color: var(--cl-primary-pressed); font-weight: 600; }
.cl-repo__node[aria-current="true"] > .cl-icon { color: currentColor; }

.cl-repo__main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.cl-repo__bar { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--cl-grid-row); }
.cl-repo__crumb { min-width: 0; display: flex; align-items: center; gap: 4px; font-size: 15px; color: var(--cl-ink-muted); }
.cl-repo__crumb strong { color: var(--cl-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-repo__crumb-link { padding: 0; border: 0; background: transparent; font: inherit; color: var(--cl-ink-muted); cursor: pointer; }
.cl-repo__crumb-link:hover { color: var(--cl-primary-pressed); text-decoration: underline; }
.cl-repo__crumb-search { margin-left: 6px; font-size: var(--cl-fs-caption); color: var(--cl-primary-pressed); }
.cl-repo__search input { width: 200px; }

.cl-repo__grid { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: max-content; gap: 14px; align-content: start; }
.cl-repo__tile { position: relative; min-width: 0; padding: 6px 6px 10px; border-radius: var(--cl-radius-md); display: flex; flex-direction: column; gap: 2px; cursor: pointer; outline: none; touch-action: manipulation; }
.cl-repo__tile:hover { background: var(--cl-hover); }
.cl-repo__tile:focus-visible { box-shadow: 0 0 0 2px var(--cl-primary); }
.cl-repo__tile[aria-selected="true"] { background: var(--cl-primary-tint); }
.cl-repo__thumb { position: relative; aspect-ratio: 4 / 3; margin-bottom: 6px; border-radius: var(--cl-radius-sm); background: var(--cl-parchment); display: grid; place-items: center; overflow: hidden; color: var(--cl-ink-faint); }
/* 투명 이미지가 보이도록 옅은 체크무늬 */
.cl-repo__thumb--image { background: repeating-conic-gradient(#F0F0F2 0% 25%, #FFFFFF 0% 50%) 50% / 16px 16px; box-shadow: inset 0 0 0 1px var(--cl-hairline); }
.cl-repo__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cl-repo__tile[aria-selected="true"] .cl-repo__thumb { box-shadow: 0 0 0 2px var(--cl-primary); }
.cl-repo__tile--folder .cl-repo__thumb { background: var(--cl-primary-tint); color: var(--cl-primary); }
.cl-repo__check { position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; border-radius: 999px; background: var(--cl-primary); color: #fff; display: grid; place-items: center; }
.cl-repo__name { padding: 0 2px; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-repo__meta { min-height: 16px; padding: 0 2px; font-size: var(--cl-fs-micro); color: var(--cl-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-repo__more { position: absolute; right: 10px; top: 10px; opacity: 0; border-radius: var(--cl-radius-sm); background: rgba(255, 255, 255, .92); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.cl-repo__tile:hover .cl-repo__more, .cl-repo__tile:focus-within .cl-repo__more, .cl-repo__more:has([aria-expanded="true"]) { opacity: 1; }
.cl-repo__tile[aria-selected="true"] .cl-repo__more { right: 34px; }
.cl-repo__tile--skeleton { pointer-events: none; }
.cl-repo__tile--skeleton .cl-repo__thumb, .cl-repo__tile--skeleton .cl-repo__name, .cl-repo__tile--skeleton .cl-repo__meta { background: var(--cl-hover); border-radius: 6px; }
.cl-repo__tile--skeleton .cl-repo__name { height: 14px; margin: 4px 2px 2px; width: 70%; }
.cl-repo__tile--skeleton .cl-repo__meta { height: 12px; width: 45%; margin-left: 2px; }
.cl-repo__empty { grid-column: 1 / -1; margin: 48px auto; max-width: 320px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--cl-ink-muted); font-size: var(--cl-fs-caption); }
.cl-repo__empty strong { font-size: 15px; color: var(--cl-ink); }
.cl-repo__empty-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--cl-hover); display: grid; place-items: center; color: var(--cl-ink-muted); }
.cl-repo__drop { position: absolute; inset: 8px; z-index: 5; border: 2px dashed var(--cl-primary); border-radius: var(--cl-radius-lg); background: var(--cl-primary-tint); background: color-mix(in srgb, var(--cl-primary-tint) 92%, transparent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--cl-primary-pressed); pointer-events: none; }
.cl-repo__drop[hidden] { display: none; }
.cl-repo__drop strong { font-size: 17px; }
.cl-repo__drop span { font-size: var(--cl-fs-caption); }
.cl-repo__drop.is-blocked { border-color: var(--cl-ink-faint); background: var(--cl-hover); background: color-mix(in srgb, var(--cl-hover) 94%, transparent); color: var(--cl-ink-2); }

.cl-repo__detail { min-height: 0; overflow-y: auto; padding: 16px; border-left: 1px solid var(--cl-grid-row); display: flex; flex-direction: column; gap: 12px; }
.cl-repo__hint { margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: var(--cl-fs-caption); color: var(--cl-ink-muted); }
.cl-repo__hint strong { font-size: 14px; color: var(--cl-ink-2); }
.cl-repo__preview { aspect-ratio: 4 / 3; border-radius: var(--cl-radius-md); background: repeating-conic-gradient(#F0F0F2 0% 25%, #FFFFFF 0% 50%) 50% / 16px 16px; box-shadow: inset 0 0 0 1px var(--cl-hairline); overflow: hidden; }
.cl-repo__preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cl-repo__detail-name { margin: 0; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.cl-repo__info { margin: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px 8px; font-size: var(--cl-fs-caption); }
.cl-repo__info dt { color: var(--cl-ink-muted); }
.cl-repo__info dd { margin: 0; color: var(--cl-ink); }
.cl-repo__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-top: 12px; border-top: 1px solid var(--cl-grid-row); }
.cl-repo__actions .cl-btn { justify-content: flex-start; }
.cl-repo__danger { color: var(--cl-danger); }
.cl-repo__note { margin: 0; padding-top: 12px; border-top: 1px solid var(--cl-grid-row); font-size: var(--cl-fs-caption); color: var(--cl-ink-muted); }
.cl-repo__status { margin: 0 auto 0 0; min-width: 0; font-size: var(--cl-fs-caption); color: var(--cl-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 이름 입력 · 옮길 곳 고르기 */
.cl-repo-name { display: flex; align-items: center; gap: 8px; }
.cl-repo-name .cl-input { flex: 1; }
.cl-repo-name__suffix { color: var(--cl-ink-muted); }
.cl-repo-name__count { font-size: var(--cl-fs-micro); color: var(--cl-ink-muted); }
.cl-repo-places { display: flex; flex-direction: column; gap: 2px; max-height: 360px; overflow-y: auto; }
.cl-repo-place { height: 38px; padding: 0 12px; border: 0; border-radius: var(--cl-radius-sm); background: transparent; display: flex; align-items: center; gap: 8px; font: inherit; font-weight: 600; color: var(--cl-ink); text-align: left; cursor: pointer; }
.cl-repo-place--child { padding-left: 34px; font-weight: 400; }
.cl-repo-place > .cl-icon { color: var(--cl-ink-muted); }
.cl-repo-place:hover { background: var(--cl-hover); }
.cl-repo-place[aria-pressed="true"] { background: var(--cl-primary-tint); color: var(--cl-primary-pressed); }
.cl-repo-place[aria-pressed="true"] > .cl-icon { color: currentColor; }

@media (max-width: 1100px) {
    .cl-repo { grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
    .cl-repo__tree { grid-row: 1 / -1; }
    .cl-repo__detail { grid-column: 2; max-height: 220px; border-left: 0; border-top: 1px solid var(--cl-grid-row); display: grid; grid-template-columns: 140px minmax(0, 1fr); align-content: start; gap: 8px 14px; }
    .cl-repo__detail > :not(.cl-repo__preview) { grid-column: 2; }
    .cl-repo__preview { grid-row: 1 / span 4; }
    .cl-repo__hint { grid-column: 1 / -1 !important; margin: 8px 0; }
}
@media (max-width: 720px) {
    .cl-dialog--repo { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; border-radius: 0; }
    .cl-repo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
    .cl-repo__tree { grid-row: auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 8px; border-right: 0; border-bottom: 1px solid var(--cl-sidebar-border); gap: 4px; scrollbar-width: none; }
    .cl-repo__area { flex-direction: row; gap: 4px; }
    .cl-repo__node, .cl-repo__node--child { width: auto; flex: none; height: 34px; padding: 0 12px; border-radius: var(--cl-radius-pill); }
    .cl-repo__detail { grid-column: 1; }
    .cl-repo__bar { flex-wrap: wrap; padding: 10px 12px; }
    .cl-repo__search { order: 3; flex: 1 1 100%; }
    .cl-repo__search input { width: 100%; }
    .cl-repo__grid { padding: 12px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
    .cl-repo__more { opacity: 1; }
    .cl-repo__status { display: none; }
}

/* ---------- 글 편집기 (toastui) 도구막대: 좁은 화면에서 줄바꿈해 화면 밖으로 밀어내지 않게 ---------- */
.cl-scope .toastui-editor-defaultUI-toolbar { flex-wrap: wrap; height: auto; min-height: 45px; }
@media (max-width: 720px) { .cl-scope .toastui-editor-defaultUI-toolbar { padding: 0 8px; } }

/* ---------- 모달이 열려 있으면 뒤 페이지가 같이 스크롤되지 않게 (iOS 사파리 포함) ---------- */
@media (pointer: coarse) { html:has(dialog[open]:modal) { overflow: hidden; } }
dialog[open] { overscroll-behavior: contain; }

/* ---------- 터치 기기: 작은 버튼은 보이는 크기는 그대로 두고 누르는 영역만 44px(--cl-touch)로 넓힌다 ---------- */
@media (pointer: coarse) {
    .cl-scope :is(.cl-btn, .cl-icon-btn, .cl-chip, .cl-segmented__item, .cl-tab, .cl-ws-account, .cl-back):not(.cl-input-group__btn) { position: relative; }
    .cl-scope :is(.cl-btn, .cl-icon-btn, .cl-chip, .cl-segmented__item, .cl-tab, .cl-ws-account, .cl-back):not(.cl-input-group__btn)::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--cl-touch)); height: max(100%, var(--cl-touch)); transform: translate(-50%, -50%); }
    .cl-scope .cl-select { min-height: var(--cl-touch); }
    .cl-combo__option, .cl-selectbox__option, .cl-repo__node, .cl-repo-place { min-height: var(--cl-touch); }
    /* 키보드 단축키 안내(⌘K · ↑↓ · ↵)는 터치 기기에서 쓸 수 없다 */
    .cl-ws-search kbd, .cl-ws-finder__foot { display: none; }
}

/* 가로로 돌린 휴대폰(높이 500px 이하)은 이미지 저장소를 화면 가득 연다 — 하단 [이 이미지 사용] 버튼이 잘리지 않게 */
@media (max-height: 500px) and (pointer: coarse) { .cl-dialog--repo { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; border-radius: 0; } }

/* 부드러운 스크롤 (Lenis 권장 CSS, smooth-scroll.js 에서 켬) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- 고른 행 · 일괄 작업 바 (manager/common.js selectionBar) ---------- */
.cl-table tbody tr.is-selected { background: var(--cl-primary-tint); }
.cl-selbar { position: fixed; left: 50%; bottom: 24px; z-index: 50; transform: translateX(-50%); padding: 6px 6px 6px 16px; border-radius: 12px; background: var(--cl-ink); color: #fff; display: flex; align-items: center; gap: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.cl-selbar[hidden] { display: none; }
.cl-selbar strong { margin-right: 8px; font-size: 14px; }
.cl-selbar__btn { height: 36px; padding: 0 12px; border: 0; border-left: 1px solid rgba(255, 255, 255, .2); background: transparent; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.cl-selbar__btn:hover { background: rgba(255, 255, 255, .1); }
.cl-selbar__btn.is-danger { color: #FFB4AB; }
.cl-selbar__close { width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; }
.cl-selbar__close:hover { background: rgba(255, 255, 255, .1); }
@media (max-width: 900px) {
    .cl-selbar { left: 16px; right: 16px; bottom: 16px; transform: none; }
    .cl-selbar strong { flex: 1; }
}