/* ============================================================
   skin01 · LXP 대시보드 통합 CSS (학생 lxp_std + 교수자 lxp_pro)
   대상: lxp_std/00_메인요약대시보드.html(.page), lxp_std/00_마이페이지대시보드.html(.mp),
        lxp_pro/00_메인요약대시보드.html(.page) 등
   · 모든 셀렉터를 .lxp 로 스코프 → 부트스트랩(styles.css) 충돌 차단
   · 값은 전역 토큰(lxp-tokens.css) 소비. 그리드는 부트스트랩(row/col) 사용.
   · 공용 아톰/컴포넌트는 여기 1회 정의(단일 소스). 페이지 고유 차이는 .page/.mp 스코프로 분기.
   2026.08.04 병합 (구 dashboard_std.css + dashboard_mypage.css)
   2026.08.11 교수자(lxp_pro) 전용 컴포넌트 추가 (kpi/ele/lstable/q__stat)
   ============================================================ */
.lxp{
  /* 전역 토큰(lxp-tokens.css)을 소비 — 내부 단축명은 별칭으로 유지(호환).
     값 변경은 lxp-tokens.css 에서. 여기선 매핑만 한다. */
  --ink:var(--lxp-ink); --ink-2:var(--lxp-ink-2); --ink-3:var(--lxp-ink-3);
  --bg:var(--lxp-bg); --surface:var(--lxp-surface); --surface-2:var(--lxp-surface-2);
  --line:var(--lxp-line); --line-strong:var(--lxp-line-strong);
  /* 브랜드색: 테마 토큰(--bs-primary) 단일 소스 — 파생 음영은 color-mix 자동 계산 (Step 1) */
  --brand:var(--bs-primary,#1843b9);
  --brand-press:#0f3ab0; --brand-press:color-mix(in srgb,var(--bs-primary) 88%,#000);
  --brand-deep:#0f3ab0; --brand-deep:color-mix(in srgb,var(--bs-primary) 82%,#000);
  --brand-soft:#e6eefb; --brand-soft:color-mix(in srgb,var(--bs-primary) 10%,#fff);
  --amber:var(--lxp-amber); --amber-soft:var(--lxp-amber-soft);
  --teal:var(--lxp-teal); --teal-soft:var(--lxp-teal-soft);
  --urgent:var(--lxp-danger); --urgent-soft:var(--lxp-danger-soft);
  --green:var(--lxp-success); --green-soft:var(--lxp-success-soft);
  --warn:var(--lxp-warn); --warn-soft:var(--lxp-warn-soft); --warn-dot:var(--lxp-warn-dot);
  --violet:var(--lxp-violet); --violet-soft:var(--lxp-violet-soft);
  --tl-r:var(--lxp-tl-r); --tl-y:var(--lxp-tl-y); --tl-g:var(--lxp-tl-g);
  --radius:var(--lxp-radius);
  --shadow:var(--lxp-shadow);
  --shadow-hover:var(--lxp-shadow-hover);
  color:var(--ink); line-height:1.5;
}
.lxp *{box-sizing:border-box;}
.lxp a{color:inherit;text-decoration:none;}
/* 부트스트랩 텍스트/굵기 유틸을 LXP 디자인값에 맞춤(미세차 보정) — 유틸 우선 전환용 */
.lxp{
  --bs-body-color-rgb:24,32,47;             /* text-body = --lxp-ink(#18202f) */
  --bs-secondary-color:var(--lxp-ink-3);    /* text-body-secondary = --lxp-ink-3 */
  /* 시맨틱 컬러 유틸(text-success/warning/danger)을 LXP 토큰값으로 정합 — 테마 파스텔값과의 미세차 보정.
     .lxp 스코프 한정 → 사이트 전역 부트스트랩엔 영향 없음. text-*는 -rgb 를 읽으므로 rgb도 함께 지정. */
  --bs-success:var(--lxp-success);  --bs-success-rgb:22,163,74;   /* #16a34a */
  --bs-warning:var(--lxp-warn);     --bs-warning-rgb:185,126,10;  /* #b97e0a */
  --bs-danger:var(--lxp-danger);    --bs-danger-rgb:220,38,38;    /* #dc2626 */
}
.lxp .fw-bold{font-weight:700 !important;}  /* 테마 600 → 표준 700 복원 */
/* .num: skin01 기본 숫자 렌더 사용 (고정폭 해제) */

/* 폭: skin01 풀폭(container-fluid) 기준 — 최대폭 제한 없음 */
.lxp .page{max-width:none;}

/* greeting */
.lxp .greet__spacer{flex:1;}
.lxp .achv{height:58px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);}
.lxp .achv:hover{border-color:var(--line-strong);}
.lxp .achv__sm{font-size:var(--lxp-fs-xs);font-weight:600;color:var(--ink-3);margin-top:1px;}
.lxp .achv__sm b{font-weight:700;color:var(--ink-2);}
.lxp .achv__sep{width:1px;height:30px;background:var(--line);}

/* 동기부여 위젯 (연속 학습) */
.lxp .streak{position:relative;width:236px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);align-self:flex-start;}
.lxp .streak__sum{cursor:pointer;list-style:none;}
.lxp .streak__sum::-webkit-details-marker{display:none;}
.lxp .streak__flame{width:36px;height:36px;border-radius:11px;background:var(--amber-soft);font-size:var(--lxp-fs-2xl);}
.lxp .streak__n{color:var(--amber);line-height:1.1;}
.lxp .streak__chev{margin-left:auto;color:var(--ink-3);transition:transform .18s ease;flex:0 0 auto;}
.lxp .streak[open] .streak__chev{transform:rotate(180deg);}
.lxp .streak__exp{position:absolute;top:calc(100% + 6px);right:0;width:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-hover);padding:12px 14px 14px;z-index:40;}
.lxp .streak__expcap{font-size:var(--lxp-fs-xs);font-weight:700;color:var(--ink-3);letter-spacing:.03em;margin:10px 0 9px;}
.lxp .dot b{width:16px;height:16px;border-radius:50%;background:var(--surface-2);border:1.5px solid var(--line-strong);}
.lxp .dot.on b{background:var(--brand);border-color:var(--brand);}
.lxp .dot.today b{box-shadow:0 0 0 3px var(--brand-soft);}
.lxp .streak__wk{font-size:var(--lxp-fs-sm);color:var(--ink-2);font-weight:600;margin-top:9px;}
.lxp .streak__wk b{color:var(--ink);}

/* 미확인 쪽지 배너 */
.lxp .msg{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);}
.lxp .msg__ic{width:40px;height:40px;border-radius:11px;background:var(--violet-soft);color:var(--violet);}
.lxp .msg__body{flex:1;min-width:0;}
.lxp .msg__list li{border-top:1px solid var(--line);}
.lxp .msg__list li:first-child{border-top:none;}
/* d-flex!important 가 [hidden] 의 UA display:none 을 덮어써 '더보기'가 무반응처럼 보이는 문제 방지 */
.lxp .msg__list li[hidden]{display:none !important;}
.lxp .msg__list .msg__btn{flex:0 0 auto;white-space:nowrap;}

/* 출석 배너 */
.lxp .attn{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);}
.lxp .attn__pulse{width:8px;height:8px;border-radius:50%;background:var(--green);
             box-shadow:0 0 0 0 rgba(22,163,74,.6);animation:lxpDashPulse 1s infinite;flex:0 0 auto;}
@keyframes lxpDashPulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.55)}70%{box-shadow:0 0 0 12px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.lxp .attn__txt{flex:1;min-width:0;}
.lxp .attn__btns{flex:0 0 auto;}

/* 학기여정 */
.lxp .journey{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);white-space:nowrap;}
.lxp .journey__sep{flex:0 0 auto;width:1px;height:18px;background:var(--line);}
.lxp .journey__lead .wk b{color:var(--brand);}
.lxp .track{flex:1;display:flex;gap:3px;min-width:80px;}
.lxp .track__seg{flex:1;height:7px;border-radius:3px;background:var(--surface-2);}
.lxp .track__seg.done{background:var(--brand);}
.lxp .track__seg.now{background:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);}
.lxp .track__seg.exam{background:var(--amber);}
.lxp .journey__tag{flex:0 0 auto;font-size:var(--lxp-fs-sm);font-weight:800;color:var(--amber);background:var(--amber-soft);padding:4px 10px;border-radius:99px;}

/* 카드 (셸: 패딩 없음. 메인=.page는 .card__pad/.card__head 사용, 마이페이지=.mp는 .card 내장 패딩) */
.lxp .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);}
.lxp .card__cnt{min-width:0;
             white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lxp .card__more{white-space:nowrap;}
.lxp .card__more i{font-size:var(--lxp-fs-lg);line-height:1;}
.lxp .card__more:hover{color:var(--brand);}

/* 마이페이지 스코프(.mp): 페이지 폭 + 카드 패딩 내장 */
.lxp .mp{max-width:none;margin:0;padding:18px 4px 8px;}
.lxp .mp .card{padding:18px 20px;margin-bottom:12px;}

/* 공용 라벨 */
.lxp .m-on{background:var(--brand-soft);color:var(--brand);}
.lxp .m-off{background:var(--amber-soft);color:var(--amber);}
.lxp .m-bl{background:var(--green-soft);color:var(--green);}
.lxp .lbl{font-size:var(--lxp-fs-xs);font-weight:700;padding:2px 7px;border-radius:5px;white-space:nowrap;display:inline-block;}
.lxp .lbl--gyo{border:1px solid var(--line-strong);color:var(--ink-2);background:#fff;}
.lxp .lbl--bigyo{border:1px solid #d7cdf3;color:var(--violet);background:var(--violet-soft);}
.lxp .lbl--bihak{border:1px solid #b9dde4;color:var(--teal);background:var(--teal-soft);}
.lxp .tp{font-size:var(--lxp-fs-xs);font-weight:700;padding:2px 7px;border-radius:5px;white-space:nowrap;display:inline-block;
      background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);}
.lxp .tp--mine{background:#fff;border-color:#d7cdf3;color:var(--violet);}

/* 캘린더 + 통합 나의 할 일 */
.lxp .caltodo__cal{flex-basis:300px;min-width:0;}
.lxp .caltodo__div{width:1px;background:var(--line);flex:0 0 auto;}
.lxp .caltodo__q{min-width:0;}
.lxp .cal__nav{width:26px;height:26px;border-radius:8px;border:none;background:transparent;color:var(--ink-3);cursor:pointer;display:grid;place-items:center;}
.lxp .cal__nav:hover{background:var(--surface-2);color:var(--ink);}
.lxp .cal__title .yr{color:var(--ink-3);font-weight:700;margin-left:6px;}
.lxp .cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.lxp .cal__dow{padding:3px 0 5px;}
.lxp .cal__dow.sun{color:var(--urgent);}
.lxp .cal__dow.sat{color:var(--brand);}
.lxp .cal__day{position:relative;height:32px;display:grid;place-items:center;color:var(--ink);
            border-radius:8px;cursor:pointer;border:none;background:transparent;font-family:inherit;padding:0;}
.lxp .cal__day:hover{background:var(--surface-2);}
.lxp .cal__day.sun{color:var(--urgent);}
.lxp .cal__day.sat{color:var(--brand);}
.lxp .cal__day.muted{color:var(--line-strong);cursor:default;}
.lxp .cal__day.muted:hover{background:transparent;}
.lxp .cal__day.today{background:var(--brand);color:#fff;font-weight:700;}
.lxp .cal__day.today:hover{background:var(--brand-press);}
.lxp .cal__day.sel{box-shadow:0 0 0 2px var(--brand) inset;background:var(--brand-soft);color:var(--brand-deep);font-weight:700;}
.lxp .cal__day.today.sel{background:var(--brand-press);color:#fff;box-shadow:0 0 0 3px var(--brand-soft);}
.lxp .cal__day .evt{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--amber);}
.lxp .cal__day.today .evt{background:#fff;}

.lxp .qsub{min-height:26px;}
.lxp .qsub__chip{color:var(--brand-deep);border-radius:99px;}

.lxp .q li{border-top:1px solid var(--line);}
.lxp .q li:first-child{border-top:none;}
.lxp .q__row{border-radius:9px;color:inherit;cursor:pointer;}
.lxp .q__row:hover{background:var(--surface-2);}
.lxp .q__row:hover .q__task{color:var(--brand-deep);}
.lxp .q__type{flex:0 0 72px;min-width:0;}
.lxp .q__task{min-width:0;color:var(--ink);}
.lxp .q__crs{flex:0 0 236px;min-width:0;}
.lxp .q__crs .lbl{flex:0 0 auto;}
.lxp .q__cname{min-width:0;}
.lxp .q__brk{display:none;}
/* stat/ddw(D-day)/due 는 고정폭 대신 auto로 두어 gap-2 만큼만 균등한 여백을 갖도록 함(2026.08.11) */
/* stat/ddw(D-day)/due 를 고정폭+정렬로 맞춰, 리스트(테이블 아님)여도 여러 행에 걸쳐 D-day 가 같은 위치에 오도록 함(2026.08.11) */
.lxp .q__ddw{flex:0 0 60px;}
.lxp .q__due{flex:0 0 100px;white-space:nowrap;text-align:left;}
.lxp .dd{display:inline-block;font-size:var(--lxp-fs-xs);font-weight:700;padding:3px 8px;border-radius:99px;white-space:nowrap;}
.lxp .dd--0{background:var(--urgent);color:#fff;}
.lxp .dd--1{background:var(--urgent-soft);color:var(--urgent);}
.lxp .dd--3{background:var(--amber-soft);color:var(--amber);}
.lxp .dd--n{background:var(--brand-soft);color:var(--brand);}
.lxp .dd--soon{background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line);padding:2px 7px;}
.lxp .q__emptyrow{border-top:none !important;}
.lxp .q__empty-ico{width:56px;height:56px;background:var(--surface-2);font-size:var(--lxp-fs-7xl);color:var(--brand);}

/* 나의 강좌 캐러셀 */
.lxp .cs{position:relative;}
/* .lxp .cs__track{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto); */
/*              gap:12px; */
/*              overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-padding-left:4px; */
/*              padding:2px;scrollbar-width:none;-ms-overflow-style:none;} */
.lxp .cs__track::-webkit-scrollbar{display:none;}
.lxp .cs__arrow{z-index:3;width:30px;height:30px;border-radius:50%;
             background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-hover);
             display:grid;place-items:center;cursor:pointer;color:var(--ink-2);opacity:1;
             transition:opacity .15s,color .15s,border-color .15s;}
.lxp .cs__arrow:hover{color:var(--ink);border-color:var(--line-strong);}
.lxp .cs__arrow--prev{left:-6px;}
.lxp .cs__arrow--next{right:-6px;}
.lxp .cs__arrow > svg{fill:none !important;}
.lxp .cs__arrow:disabled{opacity:0 !important;pointer-events:none;}
@media (hover:none){ .lxp .cs__arrow{display:none;} }

/* 미니카드 */
.lxp .mc{scroll-snap-align:start;min-width:0;min-height:112px;
      border:1px solid var(--line);border-radius:11px;background:var(--surface);
      transition:border-color .15s,box-shadow .15s;}
.lxp .mc:hover{border-color:var(--line-strong);box-shadow:var(--shadow);}
.lxp .mc:hover .mc__nm{color:var(--brand-deep);}
/* 나의 강좌 신호등: 점등된 등 하나만 표시(캡슐 테두리 제거 → 단일 dot) */
.lxp .mc .tl,
.lxp .subj-li .tl{border:none;padding:0;gap:0;}
.lxp .mc .tl span,
.lxp .subj-li .tl span{display:none;}
.lxp .mc .tl.good .g,
.lxp .mc .tl.warn .y,
.lxp .mc .tl.risk .r,
.lxp .subj-li .tl.good .g,
.lxp .subj-li .tl.warn .y,
.lxp .subj-li .tl.risk .r{display:inline-block;opacity:1;}
.lxp .mc__nm{line-height:1.4;
          display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.lxp .t-good{color:var(--green);}
.lxp .t-warn{color:var(--warn);}
.lxp .t-risk{color:var(--urgent);}

/* 신호등 */
.lxp .tl{display:inline-flex;gap:3px;align-items:center;padding:2px;border:1px solid var(--line-strong);border-radius:99px;flex:0 0 auto;}
.lxp .tl span{width:7px;height:7px;border-radius:50%;opacity:.22;}
.lxp .tl .r{background:var(--tl-r);}
.lxp .tl .y{background:var(--tl-y);}
.lxp .tl .g{background:var(--tl-g);}
.lxp .tl.good .g{opacity:1;}
.lxp .tl.warn .y{opacity:1;}
.lxp .tl.risk .r{opacity:1;}

/* 알림 · 공지 */
.lxp .feed li{border-top:1px solid var(--line);}
.lxp .feed li:first-child{border-top:none;}
.lxp .feed__main{min-width:0;}
/* 공지 카테고리 라벨: 카테고리 구분 없이 한 가지 뉴트럴 스타일로 통일 */
.lxp .ntag{font-size:var(--lxp-fs-xs);font-weight:600;padding:2px 8px;border-radius:6px;flex:0 0 auto;
  background:var(--surface-2);color:var(--ink-2);}
/* 신규 공지 표시: 반짝이는 점 */
.lxp .feed__new{width:7px;height:7px;border-radius:50%;background:#3b82f6;flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(59,130,246,.5);animation:dashDotPulse 1.8s infinite;}
@keyframes dashDotPulse{0%{box-shadow:0 0 0 0 rgba(59,130,246,.45)}70%{box-shadow:0 0 0 6px rgba(59,130,246,0)}100%{box-shadow:0 0 0 0 rgba(59,130,246,0)}}
.lxp .feed__unread{width:7px;height:7px;border-radius:50%;background:var(--brand);flex:0 0 auto;}

/* 반응형 */
@media (max-width:1080px){
  .lxp .q__row{flex-wrap:wrap;row-gap:5px;column-gap:7px;}
  .lxp .q__brk{display:block;flex:0 0 100%;height:0;}
  .lxp .q__type{flex:0 0 auto;}
  .lxp .q__task{flex:1 1 auto;}
  .lxp .q__crs{flex:1 1 auto;font-size:var(--lxp-fs-sm);}
}
/* 2행 × 2열(4개) 고정 노출 — 잘림 없음. 모바일(≤520)만 1열 */
@media (max-width:520px){ .lxp .cs__track{grid-auto-columns:calc((100% - 12px) / 1.5);} }
/* 모바일 카드 헤더: 제목+더보기(한 줄), 카운트 문구는 다음 줄로 */
@media (max-width:520px){
  .lxp .card__head{flex-wrap:wrap;}
  .lxp .card__head .card__title{order:1;}
  .lxp .card__head .card__more{order:2;}
  .lxp .card__head .card__cnt{order:3;flex:0 0 100%;margin-top:2px;}
  /* 카드 헤더의 필터 select 묶음(card__controls)도 같은 규칙 — 제목 다음 줄에 전체폭으로 */
  .lxp .card__head .card__controls{order:3;flex:0 0 100%;margin-left:0;margin-top:6px;}
}
/* 모바일 쪽지 행: 보낸이·시간(1행) / 미리보기·확인(2행)로 2단 스택 — 확인 버튼 눌림 방지 */
@media (max-width:520px){
  .lxp .msg__list li{flex-wrap:wrap;row-gap:5px;column-gap:8px;}
  .lxp .msg__list li > *:nth-child(3){margin-left:auto;}        /* 시간 → 1행 오른쪽 */
  .lxp .msg__list li > *:nth-child(2){order:1;flex:1 1 auto;min-width:0;} /* 미리보기 → 2행 좌 */
  .lxp .msg__list li > *:nth-child(4){order:2;margin-left:auto;}          /* 확인 → 2행 오른쪽 정렬 */
}
/* 모바일 공지: 날짜를 목록 하단 전체폭 우측 정렬 */
@media (max-width:520px){
  .lxp .feed li{flex-wrap:wrap;}
  .lxp .feed li > *:last-child{flex:0 0 100% !important;text-align:right;margin-top:2px;}
}
/* 인사+우측칩: 눌려 찌그러지기 전에 미리 세로 스택 (721~820 이름 줄바꿈 방지) */
@media (max-width:860px){
  .lxp .greet{flex-wrap:wrap;gap:14px;} .lxp .greet__spacer{display:none;} .lxp .greet__text h1{font-size:var(--lxp-fs-5xl);}
  .lxp .greet__right{width:100%;flex-wrap:wrap;} .lxp .achv{flex:1;justify-content:center;} .lxp .streak{width:100%;}
}
@media (max-width:720px){
  .lxp .msg{flex-wrap:wrap;}
  .lxp .attn{flex-wrap:wrap;} .lxp .attn__btns{width:100%;} .lxp .attn__btns .btn{flex:1;}
  .lxp .journey{flex-wrap:wrap;gap:10px;white-space:normal;} .lxp .journey__sep{display:none;} .lxp .track{order:4;flex-basis:100%;}
  .lxp .caltodo{flex-wrap:wrap;}
  .lxp .caltodo__cal{flex:1 1 100%;padding:8px 4px 14px;}
  .lxp .caltodo__div{display:none;}
  .lxp .caltodo__q{flex:1 1 100%;padding:16px 16px 18px;border-top:1px solid var(--line);}
  /* 나의 할 일 : 모바일 가독성 — 제목 한 줄 / 강의정보 한 줄(전체폭) / 현황·D-day·마감 한 줄로 명확히 3단 분리 */
  /* 항목을 낱장 카드(둥근 박스)로 분리 — 구분선 방식보다 모바일에서 항목 경계가 뚜렷함 */
  .lxp .q{display:flex;flex-direction:column;gap:8px;}
  .lxp .q li{padding:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;}
  /* 데스크톱용 "첫 항목은 구분선 생략" 규칙(border-top:none)이 카드형에서도 적용되어
     첫 카드만 윗변이 사라져 보이던 문제 수정 — 카드형에선 매 항목이 독립 박스이므로 항상 4변 유지 */
  .lxp .q li:first-child{border-top:1px solid var(--line);}
  .lxp .q__row{row-gap:7px;column-gap:8px;padding:.85rem !important;}
  .lxp .q__task{font-size:var(--lxp-fs-md);line-height:1.4;}
  .lxp .q__crs{max-width:100%;flex-basis:100%;order:1;}
  .lxp .q__cname{font-size:var(--lxp-fs-sm) !important;}
  /* stat/ddw(D-day)/due 는 기본 고정폭을 그대로 유지 — 행마다 D-day 위치가 흔들리지 않도록 함 */
  .lxp .q__stat{order:2;font-size:var(--lxp-fs-sm) !important;}
  .lxp .q__ddw{order:3;}
  .lxp .q__due{order:4;font-size:var(--lxp-fs-sm) !important;}
}
@media (max-width:440px){
  .lxp .attn__btns{flex-direction:column;} .lxp .attn__btns .btn{width:100%;}
}
@media (max-width:380px){
  .lxp .q__due{font-size:var(--lxp-fs-xs);}
  .lxp .cal__day{height:28px;}
}

/* 목업 토스트 */
.lxp .toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(8px);
       background:var(--ink);color:#fff;font-size:var(--lxp-fs-md);font-weight:700;padding:10px 16px;border-radius:10px;
       opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:80;
       max-width:88vw;text-align:center;line-height:1.45;}
.lxp .toast.on{opacity:.94;transform:translateX(-50%) translateY(0);}

.lxp a:focus-visible,.lxp button:focus-visible,.lxp input:focus-visible,.lxp summary:focus-visible{outline:2.5px solid var(--brand);outline-offset:2px;border-radius:8px;}
@media (prefers-reduced-motion:reduce){.lxp *,.lxp .attn__pulse{animation:none!important;transition:none!important;}}

/* ============================================================
   교수자 전용(lxp_pro) — 메인 요약 대시보드 공용 컴포넌트
   ============================================================ */
/* KPI 바 (운영 요약: 강의/학생/제출률/진도율/위험학생) */
.lxp .kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);flex-wrap:wrap;align-self:flex-start;}
.lxp .kpi__c + .kpi__c{border-left:1px solid var(--line);}
/* 클래스명 "is-risk" 사용 주의: 부트스트랩 .alert 컴포넌트와 이름이 겹치면 margin-bottom/padding/border 가 끼어들어
   카드 하단에 원인불명의 여백이 생긴다(2026.08.11 실사용 버그) — 절대 ".alert" 로 명명하지 말 것 */
.lxp .kpi__c.is-risk{color:var(--urgent);}
.lxp a.kpi__c{border-radius:9px;transition:background .15s;}
.lxp a.kpi__c:hover{background:var(--urgent-soft);}
.lxp .kpi__chev{color:var(--urgent);opacity:.65;transition:opacity .15s;line-height:1;display:inline-flex;align-items:center;}
.lxp a.kpi__c:hover .kpi__chev{opacity:1;}
/* 모바일 : 한 줄에 욱여넣다 넘치는 5개 항목이 어수선해 보이는 문제 → 2x2 카드 그리드 + 위험학생 강조 배너로 재구성(2026.08.11) */
@media (max-width:720px){
  .lxp .kpi{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;
            background:transparent;border:none;box-shadow:none;padding:0;align-self:stretch;}
  .lxp .kpi__c{flex-direction:column !important;align-items:flex-start !important;justify-content:center;gap:2px !important;
               min-width:0;background:var(--surface);border:1px solid var(--line);border-left:1px solid var(--line) !important;
               border-radius:12px;padding:12px 14px !important;}
  .lxp .kpi__c + .kpi__c{border-left:1px solid var(--line);}
  .lxp .kpi__c.is-risk{grid-column:1 / -1;flex-direction:row !important;align-items:center !important;
               justify-content:flex-start;background:var(--urgent-soft);border-color:transparent;}
  .lxp .kpi__c.is-risk .kpi__chev{margin-left:auto;}
}

/* 학습 요소 현황 (콘텐츠·토론·자료실·과제·퀴즈·시험) */
.lxp .ele{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:16px 18px;}
.lxp .ele__c{border-radius:12px;transition:background .14s;}
.lxp .ele__c:hover{background:var(--surface-2);}
.lxp .ele__c:hover .ele__chev{opacity:1;transform:translateX(0);}
.lxp .ele__ico{width:42px;height:42px;border-radius:12px;color:#fff;flex:0 0 auto;font-size:var(--lxp-fs-2xl);}
.lxp .ele__chev{color:var(--ink-3);opacity:0;transform:translateX(-3px);transition:opacity .14s,transform .14s;flex:0 0 auto;}
.lxp .e-cont{background:#3d52d5;} .lxp .e-disc{background:#2f9bd6;} .lxp .e-room{background:#22b8c4;}
.lxp .e-task{background:#eab308;} .lxp .e-quiz{background:#ec4f7c;} .lxp .e-exam{background:#6b7280;}
@media (max-width:940px){ .lxp .ele{grid-template-columns:repeat(3,1fr);} }
@media (max-width:520px){ .lxp .ele{grid-template-columns:repeat(2,1fr);gap:8px;} }

/* 나의 할 일 — 교수자 전용 현황 슬롯(마감 전=수행현황 / 마감 후=채점현황) */
.lxp .q__stat{flex:0 0 78px;text-align:right;}
.lxp .q__stat .k{color:var(--ink-3);font-weight:600;margin-right:4px;}
/* 캘린더 점: 연체(채점 대기)는 레드로 구분 */
.lxp .cal__day .evt--over{background:var(--urgent);}

/* 강의 학습지수 표 (위험순, 신호등, 쪽지발송) */
/* min-width로 좁은 화면에서 칼럼이 짓눌려 데이터가 잘리는 대신 가로 스크롤되도록 함(카드 컨테이너 overflow-x:auto와 짝) */
.lxp .lstable{width:100%;min-width:620px;border-collapse:collapse;table-layout:fixed;}
.lxp .lstable thead th{border-bottom:1px solid var(--line-strong);white-space:nowrap;}
.lxp .lstable tbody td{border-bottom:1px solid var(--line);vertical-align:middle;}
.lxp .lstable tbody tr:last-child td{border-bottom:none;}
.lxp .lstable tbody tr:hover{background:var(--surface-2);}
.lxp .ls__name,.lxp .ls__course{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media (max-width:720px){ .lxp .lstable .hide-sm{display:none;} }

/* 표 안 소형 액션 버튼(상세보기/쪽지발송 등) — 부트스트랩 .btn.btn-sm 컴포넌트 위에
   .btn-outline-primary/.btn-outline-secondary 와 동일한 방식(CSS 변수 오버라이드)으로 중립 아웃라인 색만 얹는다.
   구조(패딩·폰트·radius·transition)는 부트스트랩이 전부 담당 → 커스텀 CSS는 색상뿐 */
.lxp .btn-outline-line{
  --bs-btn-color:var(--ink-2);
  --bs-btn-bg:transparent;
  --bs-btn-border-color:var(--line-strong);
  --bs-btn-hover-color:var(--brand);
  --bs-btn-hover-bg:var(--brand-soft);
  --bs-btn-hover-border-color:var(--brand);
  --bs-btn-active-color:var(--brand);
  --bs-btn-active-bg:var(--brand-soft);
  --bs-btn-active-border-color:var(--brand);
  --bs-gradient:none;
}

/* ============================================================
   마이페이지(.mp) 고유 컴포넌트 — 구 dashboard_mypage.css에서 병합
   (별칭/아톰/신호등/그리드/focus 는 위 공용 정의 재사용, 여기서 제외)
   ============================================================ */
/* ── 페이지 헤더 ───────────────────────────── */
/* 페이지 제목: 전체 사이트 공통 스타일(강조). 향후 공용 클래스로 승격 대상 */
.lxp .mp-title{font-size:var(--lxp-fs-10xl);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:0;}
/* 활동지수: 메인 대시보드 .achv(보유배지/마일리지)와 동일 — 흰 카드 셸만 유지, 내부는 부트스트랩 유틸 */
.lxp .ai-mini{display:inline-flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:8px 16px;box-shadow:var(--shadow);cursor:pointer;transition:border-color .15s;}
.lxp .ai-mini:hover{border-color:var(--line-strong);}
/* 제목 기준: 메인 요약 대시보드의 .card__title 과 동일(18px/700) */
.lxp .card-title{font-size:var(--lxp-fs-3xl);font-weight:700;letter-spacing:-.02em;color:var(--ink);margin-bottom:14px;display:block;}
.lxp .sec-note{margin-left:auto;font-size:var(--lxp-fs-sm);color:var(--ink-3);font-weight:600;}
.lxp .sec-cap{font-size:var(--lxp-fs-sm);color:var(--ink-3);font-weight:700;}
.lxp .foot-note{margin-top:10px;font-size:var(--lxp-fs-sm);color:var(--ink-3);font-weight:600;line-height:1.6;}
.lxp .pos{color:var(--green);font-weight:800;}
.lxp .pbar{flex:1;height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden;min-width:30px;}
.lxp .pbar>span{display:block;height:100%;border-radius:99px;background:var(--brand);}
.lxp .pbar>span.f-good{background:var(--tl-g);}
.lxp .pbar>span.f-warn{background:var(--warn-dot);}
.lxp .pbar>span.f-risk{background:var(--urgent);}
.lxp .dd--done{background:var(--green-soft);color:#0b6b3a;}
/* ── 요약 카드 4개 (셸/아이콘만 유지, 내부 텍스트는 부트스트랩 유틸) ── */
.lxp .summary-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;display:flex;align-items:center;justify-content:space-between;}
.lxp .summary-icon{font-size:var(--lxp-fs-7xl);color:var(--brand);opacity:.4;line-height:1;flex:0 0 auto;}
/* 좁은 카드(2열)에서는 아이콘이 flex 폭을 차지해 증감 문구가 줄바뀜되던 문제 →
   아이콘을 절대배치로 우상단에 올려 텍스트 영역이 카드 폭을 전부 쓰도록 함 */
@media (max-width:991px){
  .lxp .summary-card{position:relative;}
  .lxp .summary-icon{position:absolute;top:14px;right:14px;font-size:var(--lxp-fs-5xl);}
}

/* ── 참여도 종합지수 ───────────────────────── */
.lxp .part{display:flex;flex-direction:column;}
.lxp .pt__top{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:20px;padding-bottom:14px;border-bottom:1px solid var(--line);}
.lxp .donut{position:relative;width:132px;height:132px;flex-shrink:0;}
.lxp .donut svg{width:100%;height:100%;}
.lxp .donut__c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;}
.lxp .donut__n{font-size:var(--lxp-fs-9xl);font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.02em;}
.lxp .donut__u{font-size:var(--lxp-fs-3xs);color:var(--ink-3);font-weight:700;}
.lxp .pt__sumt{font-size:var(--lxp-fs-base);font-weight:800;letter-spacing:-.02em;}
.lxp .pt__hr{height:1px;background:var(--line);margin:9px 0;}
.lxp .lg__dot{width:8px;height:8px;border-radius:2px;flex:0 0 auto;}
.lxp .lg__name{font-size:var(--lxp-fs-sm);color:var(--ink-2);font-weight:600;width:56px;flex-shrink:0;}
.lxp .lg__score{font-size:var(--lxp-fs-sm);font-weight:800;}
.lxp .lg__w{font-size:var(--lxp-fs-2xs);color:var(--ink-3);font-weight:700;width:30px;}
.lxp .d-lxp{background:var(--violet);} .lxp .d-att{background:var(--brand);} .lxp .d-task{background:#d98620;}
.lxp .l-lxp{color:var(--violet);} .lxp .l-att{color:var(--brand);} .lxp .l-task{color:#d98620;}
.lxp .subs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;}
.lxp .sub{background:var(--surface-2);border-radius:11px;padding:12px;display:flex;flex-direction:column;gap:7px;}
.lxp .sub__lbl{font-size:var(--lxp-fs-xs);color:var(--ink-3);font-weight:700;}
.lxp .sub__wpill{font-size:var(--lxp-fs-2xs);font-weight:800;padding:2px 8px;border-radius:20px;}
.lxp .w-lxp{background:var(--violet-soft);color:var(--violet);} .lxp .w-att{background:var(--brand-soft);color:var(--brand);} .lxp .w-task{background:#fbf0df;color:#d98620;}
.lxp .sub__score{font-size:var(--lxp-fs-9xl);font-weight:800;line-height:1;}
.lxp .sub__score small{font-size:var(--lxp-fs-xs);font-weight:600;color:var(--ink-3);}
.lxp .sub__hr{height:1px;background:var(--line);}
.lxp .sub__d{font-size:var(--lxp-fs-xs);color:var(--ink-2);font-weight:600;line-height:1.5;}
.lxp .sub__d .hi{font-weight:800;}
.lxp .part__foot{display:flex;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);}
.lxp .part__foot .upd{font-size:var(--lxp-fs-sm);color:var(--ink-3);font-weight:600;}
.lxp .part__foot .crit{margin-left:auto;font-size:var(--lxp-fs-sm);color:var(--brand);font-weight:700;cursor:pointer;}
.lxp .part-notice{font-size:var(--lxp-fs-md);color:#8a5a00;background:var(--amber-soft);border-radius:8px;padding:7px 10px;margin-top:12px;}

/* ── 오늘 할 일 ────────────────────────────── */
.lxp .todo{display:flex;flex-direction:column;}
.lxp .csub__chip{display:inline-flex;align-items:center;background:var(--brand-soft);color:var(--brand-deep);border-radius:99px;padding:3px 10px;font-size:var(--lxp-fs-sm);font-weight:800;}
.lxp .tfoot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line);}
.lxp .lst{list-style:none;margin:10px 0 0;padding:0;}
.lxp .lst>li{border-top:1px solid var(--line);}
.lxp .lst>li:first-child{border-top:none;}
/* 할 일 행: 셸(hover 배경)·좌측 시간열·구분선만 유지, 텍스트는 부트스트랩 유틸 */
.lxp .tdi{display:flex;align-items:center;gap:12px;padding:8px;margin:0 -8px;border-radius:10px;}
.lxp .tdi:hover{background:var(--surface-2);}
.lxp .tdi__l{flex:0 0 62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;}
.lxp .tdi__bar{flex:0 0 1px;align-self:stretch;background:var(--line);}
.lxp .tdi.is-done .tp,.lxp .tdi.is-done .lbl{opacity:.55;}

/* ── 이번 주 학습 일정 (캐러셀) ────────────── */
.lxp .sched-carousel{position:relative;}
/* .lxp .sched-track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-padding-left:4px;padding:2px;scrollbar-width:none;-ms-overflow-style:none;} */
/* .lxp .sched-track::-webkit-scrollbar{display:none;} */
 .lxp .sched-card{scroll-snap-align:start;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px;transition:border-color .15s,box-shadow .15s;} */
.lxp .sched-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow);}
.lxp .sched-arrow{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:var(--lxp-fs-lg);line-height:1;cursor:pointer;z-index:5;opacity:1;transition:opacity .15s,color .15s,border-color .15s;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-hover);font-family:inherit;}
.lxp .sched-arrow:hover{color:var(--ink);border-color:var(--line-strong);}
.lxp .sched-arrow:disabled{opacity:0 !important;pointer-events:none;}
.lxp .sched-arrow-l{left:-6px;} .lxp .sched-arrow-r{right:-6px;}
.lxp .sched-dots{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:12px;}
.lxp .sched-dots button{width:6px;height:6px;border-radius:99px;border:none;background:var(--line-strong);cursor:pointer;padding:0;transition:width .18s,background .18s;}
.lxp .sched-dots button.on{background:var(--brand);width:16px;}
@media (hover:none){ .lxp .sched-arrow{display:none;} }
.lxp .sched-top{display:flex;align-items:center;gap:4px;margin-bottom:8px;}
.lxp .sched-wk{font-size:var(--lxp-fs-md);color:var(--ink-3);font-weight:600;margin-left:auto;white-space:nowrap;}
.lxp .sched-nm{font-size:var(--lxp-fs-xl);font-weight:700;color:var(--ink);margin-bottom:2px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.lxp .sched-owner{font-size:var(--lxp-fs-md);color:var(--ink-3);font-weight:600;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lxp .sched-el{display:flex;align-items:center;gap:5px;margin-top:auto;margin-bottom:6px;}
.lxp .sched-due{font-size:var(--lxp-fs-md);color:var(--ink-3);font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lxp .sched-prog{display:flex;align-items:center;gap:7px;}
.lxp .sched-pct{font-size:var(--lxp-fs-xs);font-weight:800;white-space:nowrap;}

/* ── 최근 학습한 강의 ─────────────────────── */
/* 최근 학습 강의: 레이아웃/타이포는 부트스트랩 유틸로. 커스텀은 배경+hover(유틸로 불가)만 유지 */
.lxp .rl-item{background:var(--surface-2);transition:background .15s;}
.lxp .rl-item:hover{background:var(--brand-soft);}

/* ── 하이라이트 / 재방문 자료 / Empty (텍스트는 부트스트랩 유틸, 박스·CTA만 유지) ─── */
.lxp .hl-box{background:var(--brand-soft);border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;}
.lxp .rw-item{display:flex;align-items:center;gap:8px;background:var(--surface-2);border-radius:9px;padding:8px 10px;}
.lxp .rw-item__lbl{font-size:var(--lxp-fs-3xs);padding:1px 6px;flex-shrink:0;}
.lxp .rw-item__cta{flex-shrink:0;font-size:var(--lxp-fs-sm);color:var(--brand);font-weight:700;cursor:pointer;border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;padding:6px 12px;white-space:nowrap;transition:background .15s,border-color .15s,color .15s;}
.lxp .rw-item__cta:hover{background:var(--brand);border-color:var(--brand);color:#fff;}
.lxp .empty-box{background:var(--surface-2);border-radius:12px;padding:28px 16px;}
.lxp .empty-box.sm{padding:20px 16px;}
.lxp .empty-icon{width:40px;height:40px;background:var(--surface);box-shadow:var(--shadow);font-size:var(--lxp-fs-2xl);color:var(--ink-2);}

/* ── 학습시간 분포도 (히트맵) ─────────────── */
.lxp .heat-wrap{overflow-x:auto;}
.lxp .heat-tbl{width:100%;min-width:260px;table-layout:fixed;border-collapse:collapse;font-size:var(--lxp-fs-2xs);}
.lxp .heat-tbl col.hc-lbl{width:44px;}
.lxp .heat-tbl th{padding:3px 2px;font-weight:700;text-align:center;color:var(--ink-2);}
.lxp .heat-tbl th.hc-corner{padding:3px 4px 3px 0;text-align:right;color:var(--ink-3);font-weight:600;}
.lxp .heat-tbl th.hc-mon{color:var(--brand);}
.lxp .heat-legend{margin-top:8px;display:flex;align-items:center;gap:4px;justify-content:flex-end;}
.lxp .heat-legend span.t{font-size:var(--lxp-fs-3xs);color:var(--ink-3);font-weight:600;}
.lxp .heat-legend span.sw{width:11px;height:11px;border-radius:3px;display:inline-block;}
.lxp .heat-date{font-size:var(--lxp-fs-sm);color:var(--ink-3);font-weight:600;margin-bottom:10px;}
.lxp .heat-date iconify-icon{vertical-align:-2px;margin-right:3px;color:var(--brand);}

/* ── 과목별 현황 (테이블) ─────────────────── */
.lxp .subj-wrap{overflow-x:auto;}
.lxp .subj-tbl{width:100%;border-collapse:collapse;font-size:var(--lxp-fs-md);min-width:680px;}
.lxp .subj-tbl thead tr{border-top:1.5px solid var(--line-strong);border-bottom:1.5px solid var(--line-strong);}
.lxp .subj-tbl th{font-weight:700;color:var(--ink-2);font-size:var(--lxp-fs-md);padding:10px 6px;text-align:center;}
.lxp .subj-tbl th.nm{padding-left:0;}
.lxp .subj-tbl tbody tr{border-bottom:1px solid var(--line);}
.lxp .subj-tbl tbody tr:last-child{border-bottom:1.5px solid var(--line-strong);}
.lxp .subj-tbl td{padding:10px 6px;vertical-align:middle;text-align:center;}
.lxp .subj-tbl td.nm{text-align:left;padding-left:0;}
.lxp .subj-nmrow{display:flex;align-items:center;gap:6px;margin-bottom:2px;flex-wrap:nowrap;}
.lxp .subj-nmrow .t{font-weight:700;color:var(--ink);font-size:var(--lxp-fs-xl);white-space:nowrap;}
.lxp .subj-prof{font-size:var(--lxp-fs-md);color:var(--ink-3);font-weight:600;}
/* 값/보조/미등록 셀은 부트스트랩 유틸로 통일(text-*·fs-3/fs-11·fw-semibold, 값은 인라인 800) */
.lxp .subj-li{display:flex;align-items:center;justify-content:center;gap:6px;}
.lxp .li-info-icon{width:14px;height:14px;font-size:var(--lxp-fs-3xs);}

/* ── 동료대비 학습패턴 (레이더) ──────────── */
.lxp .peer-sub{font-size:var(--lxp-fs-sm);color:var(--ink-3);font-weight:600;margin-top:2px;}
.lxp .peer-legend{margin-top:2px;}
.lxp .peer-legend .sw{width:12px;height:12px;border-radius:3px;flex-shrink:0;}

/* ── 추천 프로그램 ────────────────────────── */
/* 추천: 셸(배경/반경)만 커스텀, 레이아웃/타이포는 유틸. rec-cta는 버튼(hover) 컴포넌트 유지 */
.lxp .rec-item{background:var(--surface-2);border-radius:11px;}
.lxp .rec-cta{flex-shrink:0;font-size:var(--lxp-fs-sm);color:var(--brand);font-weight:700;cursor:pointer;border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;padding:8px 14px;white-space:nowrap;transition:background .15s,border-color .15s,color .15s;}
.lxp .rec-cta:hover{background:var(--brand);border-color:var(--brand);color:#fff;}

/* ── 나의 역량 (진행바만 유지, 라벨/점수는 부트스트랩 유틸) ─── */
.lxp .comp-bar{background:var(--brand-soft);border-radius:10px;height:6px;overflow:hidden;}
.lxp .comp-bar>span{display:block;background:var(--brand);height:100%;border-radius:10px;}
.lxp .comp-bar.hi{background:var(--green-soft);}
.lxp .comp-bar.hi>span{background:var(--green);}
.lxp .card-foot{padding-top:12px;border-top:1px solid var(--line);}

/* ── 획득 배지 ────────────────────────────── */
.lxp .badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;}
.lxp .badge-cell{text-align:center;padding:10px 6px;background:var(--surface-2);border-radius:11px;}
.lxp .badge-img{width:48px;height:48px;object-fit:contain;display:block;margin:0 auto 6px;}

/* ── 보유 마일리지 ────────────────────────── */
.lxp .mi-score-box{text-align:center;background:var(--brand-soft);border-radius:12px;padding:18px 14px;}
.lxp .mi-score-num{font-size:var(--lxp-fs-10xl);font-weight:800;color:var(--brand-deep);line-height:1;letter-spacing:-.02em;}
.lxp .mi-score-unit{font-size:var(--lxp-fs-sm);color:var(--brand);font-weight:700;margin-left:3px;}
.lxp .mi-convert-box{margin-top:10px;background:var(--green-soft);border:1px solid #bfe6cf;border-radius:12px;padding:12px;text-align:center;}
/* 마일리지 전환 불가 안내(케이스B) — mi-convert-box와 동급 bespoke */
.lxp .mi-unavailable-box{margin-top:10px;background:var(--surface-2);border-radius:12px;padding:18px 12px;}
.lxp .mi-unavailable-icon{width:40px;height:40px;background:var(--surface);box-shadow:var(--shadow);font-size:var(--lxp-fs-2xl);color:var(--ink-2);}

/* ── 마이페이지(.mp) 반응형 (그리드는 부트스트랩이 처리) ── */
@media (max-width:640px){
  .lxp .mp .card{padding:14px 16px;border-radius:14px;}
  .lxp .mp-title{font-size:var(--lxp-fs-2xl);}
  .lxp .subs{grid-template-columns:repeat(3,1fr);}
  .lxp .badge-grid{grid-template-columns:repeat(3,1fr);}
}
/* @media (max-width:940px){ .lxp .sched-card{flex-basis:calc((100% - 20px) / 2.5);} } */
/* @media (max-width:520px){ .lxp .sched-card{flex-basis:calc((100% - 10px) / 1.5);} } */
@media (max-width:440px){ .lxp .tdi__l{flex:0 0 56px;} }
/* 모바일(≤520) 마이페이지 상세 반응형 */
@media (max-width:520px){
  /* 참여도 종합지수: 도넛↕요약 세로 스택 + 하위 지표 1열 */
  .lxp .pt__top{flex-direction:column;}
  .lxp .subs{grid-template-columns:1fr;}
  /* 최근 학습 강의·추천 프로그램: 정보는 가로로 넓게, 액션 버튼은 하단 우측으로 */
  .lxp .rl-item, .lxp .rec-item{flex-wrap:wrap;}
  .lxp .rl-item::after, .lxp .rec-item::after{content:"";flex:0 0 100%;height:0;}
  .lxp .rl-item > *:last-child,
  .lxp .rec-item > .rec-cta{order:1;margin-left:auto;}
  /* 최근 학습 강의 제목: 말줄임 삭제(길면 줄바꿈), 플레이 아이콘과 같은 줄 유지 */
  .lxp .rl-item .flex-fill > *:first-child{white-space:normal;overflow:visible;text-overflow:clip;}
  /* 긴 제목이 아이콘 아래로 밀려나지 않도록 텍스트박스 flex-basis를 0으로(아이콘과 동일 줄 고정) */
  .lxp .rl-item > .flex-fill{flex:1 1 0 !important;}
  .lxp .rl-item{align-items:flex-start !important;}
  /* 재방문 자료: 라벨 / 제목(말줄임 삭제) / 버튼을 각각 다른 줄로 세로 배치 */
  .lxp .rw-item{flex-direction:column;align-items:stretch;gap:6px;}
  .lxp .rw-item > .rw-item__lbl{align-self:flex-start;}
  .lxp .rw-item .flex-fill > *:first-child{white-space:normal;overflow:visible;text-overflow:clip;}
  .lxp .rw-item > .rw-item__cta{align-self:flex-end;}
}

/* ============================================================
   교수자 전용(lxp_pro) — 마이페이지 대시보드(.mp) 공용 컴포넌트
   2026.08.11 추가
   ============================================================ */
/* 학습요소 분포도 도넛 전용 팔레트 (학습요소 배지는 공용 컴포넌트의 badge bg-*-subtle 사용) */
.lxp{
  --d-cont:#ef6461; --d-room:#f2994a; --d-task:#f2c94c; --d-disc:#27ae60; --d-exam:#2f9e9e; --d-team:#4f6df5;
}

/* 페이지 헤더 (학기 select + D-day + 다운로드) */
.lxp .phd__dept{font-size:var(--lxp-fs-xs);font-weight:700;color:var(--ink-3);background:var(--surface-2);padding:3px 9px;border-radius:99px;}
.lxp .term-select{font-family:inherit;font-size:var(--lxp-fs-md);font-weight:800;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:9px;padding:7px 30px 7px 12px;cursor:pointer;appearance:none;
  background-repeat:no-repeat;background-position:right 10px center;transition:border-color .15s;
  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='%23858d9f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");}
.lxp .term-select:hover{border-color:var(--brand);}
.lxp .phd__dday{font-size:var(--lxp-fs-sm);font-weight:800;padding:3px 9px;border-radius:99px;background:var(--brand-soft);color:var(--brand);white-space:nowrap;}
.lxp .is-past-mode .phd__dday{background:var(--surface-2);color:var(--ink-3);}
.lxp .phd__export{background:var(--surface);border:1px solid var(--line-strong);color:var(--ink-2);border-radius:9px;padding:9px 14px;
  font-size:var(--lxp-fs-sm);font-weight:700;white-space:nowrap;transition:border-color .15s,color .15s;}
.lxp .phd__export:hover{border-color:var(--brand);color:var(--brand);}
/* 과거 학기 조회 시 액션 비활성화 안내 */
.lxp .past-note{display:none;background:var(--surface-2);color:var(--ink-3);border-radius:10px;padding:9px 14px;}
.lxp .is-past-mode .past-note{display:flex;}
.lxp .is-past-mode .act-btn{opacity:.4;pointer-events:none;}

/* 리치 KPI (4카드, 증감 delta 포함) */
.lxp .kpi2{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.lxp .kpi2__c{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 17px;box-shadow:var(--shadow);}
.lxp .kpi2__ic{width:30px;height:30px;border-radius:9px;background:var(--surface-2);color:var(--ink-3);}
/* 클래스명 "is-risk" 사용 — 부트스트랩 .alert 컴포넌트와 이름 충돌 방지(2026.08.11 실사용 버그 참고) */
.lxp .kpi2__c.is-risk .kpi2__ic{background:var(--urgent-soft);color:var(--urgent);}
.lxp .kpi2__delta.up{color:var(--green);}
.lxp .kpi2__delta.down{color:var(--urgent);}
.lxp .kpi2__delta.flat{color:var(--ink-3);}
@media (max-width:940px){ .lxp .kpi2{grid-template-columns:repeat(2,1fr);} }

/* 필터 select · 카드 보조행(카운트 등) — 여러 표 카드에서 공용 */
.lxp .fsel{font-family:inherit;font-size:var(--lxp-fs-sm);font-weight:700;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:9px;padding:7px 28px 7px 12px;cursor:pointer;appearance:none;
  background-repeat:no-repeat;background-position:right 9px center;min-width:118px;transition:border-color .15s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23858d9f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");}
.lxp .fsel:hover{border-color:var(--brand);}
.lxp .fsel--wide{flex:1;min-width:200px;}
.lxp .card__controls{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.lxp .card__subrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 18px 14px;flex-wrap:wrap;}
.lxp .card__count{color:var(--ink-3);font-weight:700;white-space:nowrap;}
.lxp .table-more{text-align:center;padding-top:14px;}
.lxp .table-more a{font-size:var(--lxp-fs-sm);font-weight:700;color:var(--ink-3);}
.lxp .table-more a:hover{color:var(--brand);}

/* 표 공통(나의 강의 전체/종료일 다가오는 학습/강의 학습지수/콘텐츠 학습 패턴) */
.lxp .cotable,.lxp .dltable,.lxp .lstable2,.lxp .cptable{width:100%;border-collapse:collapse;font-size:var(--lxp-fs-md);table-layout:fixed;}
/* 상단 라인 · th 타이포는 학생 마이페이지 '과목별 현황'(.subj-tbl)과 통일 */
.lxp .cotable thead tr,.lxp .dltable thead tr,.lxp .lstable2 thead tr,.lxp .cptable thead tr{
  border-top:1.5px solid var(--line-strong);border-bottom:1.5px solid var(--line-strong);}
.lxp .cotable thead th,.lxp .dltable thead th,.lxp .lstable2 thead th,.lxp .cptable thead th{
  font-size:var(--lxp-fs-md);font-weight:700;color:var(--ink-2);text-align:center;padding:10px 6px;
  white-space:nowrap;}
.lxp .cotable tbody tr,.lxp .dltable tbody tr,.lxp .lstable2 tbody tr,.lxp .cptable tbody tr{border-bottom:1px solid var(--line);}
.lxp .cotable tbody tr:last-child,.lxp .dltable tbody tr:last-child,
.lxp .lstable2 tbody tr:last-child,.lxp .cptable tbody tr:last-child{border-bottom:1.5px solid var(--line-strong);}
.lxp .cotable tbody td,.lxp .dltable tbody td,.lxp .lstable2 tbody td,.lxp .cptable tbody td{
  padding:10px 6px;vertical-align:middle;text-align:center;}
.lxp .cotable tbody tr:hover,.lxp .dltable tbody tr:hover,
.lxp .lstable2 tbody tr:hover,.lxp .cptable tbody tr:hover{background:var(--surface-2);}
@media (max-width:720px){
  .lxp .cotable,.lxp .dltable,.lxp .lstable2,.lxp .cptable{min-width:560px;}
  .lxp .cotable .hide-sm,.lxp .dltable .hide-sm,.lxp .lstable2 .hide-sm,.lxp .cptable .hide-sm{display:none;}
  /* lstable2/cptable 은 고정폭 칼럼 합이 560px보다 커서, table-layout:fixed 가 칼럼을 강제로
     찌그러뜨려 텍스트가 옆 칼럼과 겹쳐 보이는 원인이었음 → 칼럼 합계에 맞춰 min-width 상향 */
  .lxp .lstable2{min-width:720px;}
  .lxp .cptable{min-width:900px;}
}

/* 나의 강의 전체 표 */
.lxp .co__name{display:flex;align-items:center;justify-content:flex-start;gap:7px;font-weight:700;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lxp .co__ele{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;}

/* 종료일이 다가오는 학습 */
.lxp .dt__coursehd{display:flex;align-items:center;justify-content:flex-start;gap:5px;}
.lxp .dt__cname{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.lxp .dt__eletitle{color:var(--ink-2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;}
.lxp .dt__due{font-weight:800;color:var(--urgent);}


/* 강의 학습지수(마이페이지: 필터+카운트+결석률 포함) */
.lxp .l__name{font-weight:700;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lxp .l__id{color:var(--ink-3);font-weight:600;}
.lxp .l__course{display:flex;align-items:center;justify-content:flex-start;gap:5px;font-weight:600;}
.lxp .l__cname{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.lxp .l__pct{font-size:var(--lxp-fs-md);font-weight:800;white-space:nowrap;}

/* 콘텐츠 학습 패턴 */
.lxp .cp__legend{display:flex;align-items:center;gap:13px;flex-wrap:wrap;}
.lxp .cp__legend span{display:inline-flex;align-items:center;gap:5px;font-size:var(--lxp-fs-sm);font-weight:700;color:var(--ink-2);}
.lxp .cp__legend i{width:9px;height:9px;border-radius:3px;display:inline-block;}
/* 모바일 : 범례 / 콘텐츠 총수 / select 2개(항상 한 줄에 붙어서) 를 각각 줄바꿈해 안정적으로 배치 */
@media (max-width:720px){
  .lxp .cp__subrow{flex-direction:column;align-items:flex-start;gap:10px;}
  .lxp .cp__toolbar{width:100%;min-width:0;}
  .lxp .cp__toolbar .card__count{flex:0 0 100%;}
  /* select는 옵션 텍스트 기준 고유폭을 가지므로 flex-basis만으로는 줄어들지 않음(브라우저 공통 특성) →
     width:0 + overflow:hidden 로 강제 축소, 안의 글자는 말줄임 처리 */
  .lxp .cp__selects{flex:1 1 auto;min-width:0;}
  .lxp .cp__selects .fsel{flex:1 1 0;width:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}
.lxp .p__course{display:flex;align-items:center;justify-content:flex-start;gap:5px;font-weight:600;}
.lxp .p__cname{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.lxp .p__title{font-weight:700;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lxp .p__pct{font-weight:800;}
.lxp .p__date{color:var(--ink-3);font-weight:600;white-space:nowrap;}
.lxp .pat{display:flex;height:10px;border-radius:4px;overflow:hidden;background:var(--surface-2);}
.lxp .pat span{height:100%;}

/* 접속 시간 분포도 (히트맵) */
.lxp .hm__nav{display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.lxp .hm__navbtn{width:26px;height:26px;border-radius:7px;border:1px solid var(--line-strong);background:var(--surface);
  color:var(--ink-2);display:grid;place-items:center;cursor:pointer;}
.lxp .hm__navbtn:hover{background:var(--surface-2);}
.lxp .hm__range{font-weight:700;color:var(--ink-2);}
.lxp .hm{display:grid;grid-template-columns:36px repeat(7,1fr);gap:4px;}
.lxp .hm__hourlbl{font-size:var(--lxp-fs-3xs);color:var(--ink-3);font-weight:600;display:flex;align-items:center;justify-content:flex-end;padding-right:6px;}
.lxp .hm__daylbl{font-size:var(--lxp-fs-xs);color:var(--ink-2);font-weight:700;text-align:center;padding-bottom:6px;}
.lxp .hm__daylbl small{display:block;font-weight:600;color:var(--ink-3);font-size:var(--lxp-fs-3xs);}
.lxp .hm__cell{height:19px;border-radius:4px;background:var(--surface-2);}
.lxp .hm__totrow{grid-column:1 / -1;display:grid;grid-template-columns:36px repeat(7,1fr);gap:4px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);}
.lxp .hm__total{font-size:var(--lxp-fs-sm);color:var(--ink-3);font-weight:700;text-align:center;}
@media (max-width:520px){ .lxp .hm,.lxp .hm__totrow{grid-template-columns:26px repeat(7,1fr);} }

/* 학습요소 분포도 (다색 도넛 + 범례) */
.lxp .donut2{display:flex;flex-direction:column;align-items:center;gap:6px;}
.lxp .donut2__ring{width:min(280px,100%);}
.lxp .donut2__ring svg{display:block;width:100%;height:auto;}
.lxp .donut2__legend2{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:6px;}
.lxp .donut2__li{display:inline-flex;align-items:center;gap:6px;font-size:var(--lxp-fs-sm);font-weight:600;color:var(--ink-2);}
.lxp .donut2__li i{width:10px;height:10px;border-radius:3px;flex:0 0 auto;}

/* 성적 그룹별 비교 */
.lxp .grpsel{display:flex;gap:14px;flex-wrap:wrap;background:var(--surface-2);border-radius:12px;padding:14px 16px;margin:16px 18px 18px;}
.lxp .grpsel__field{flex:1;min-width:180px;display:flex;flex-direction:column;gap:5px;}
.lxp .grpsel__lbl{font-size:var(--lxp-fs-xs);font-weight:800;color:var(--ink-3);letter-spacing:.01em;}
.lxp .grpgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 18px 18px;}
.lxp .grpcard__title{font-size:var(--lxp-fs-sm);font-weight:800;color:var(--ink-2);margin-bottom:14px;}
.lxp .grpbar{display:flex;align-items:flex-end;gap:14px;height:120px;padding:0 8px;border-bottom:1px solid var(--line);}
.lxp .grpbar__col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%;}
.lxp .grpbar__fill{width:100%;max-width:44px;border-radius:6px 6px 0 0;}
.lxp .grpbar__val{font-size:var(--lxp-fs-sm);font-weight:800;}
.lxp .grpbar__lbls{display:flex;gap:14px;padding:0 8px;margin:10px 0 14px;}
.lxp .grpbar__lbl{flex:1;text-align:center;font-size:var(--lxp-fs-xs);color:var(--ink-3);font-weight:700;}
.lxp .grpcallout{display:flex;align-items:center;gap:10px;background:var(--surface-2);border-radius:12px;padding:12px 14px;}
.lxp .grpcallout__ic{width:32px;height:32px;border-radius:9px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;flex:0 0 auto;}
.lxp .grpfoot{font-size:var(--lxp-fs-xs);color:var(--ink-3);padding:0 18px 16px;line-height:1.5;}
@media (max-width:940px){ .lxp .grpgrid{grid-template-columns:1fr;} }

@media (max-width:720px){
  .lxp .page-header{align-items:flex-start !important;flex-direction:column;}
  /* 학기 select(전체폭 1줄) → 기간+D-day(왼쪽) · 다운로드(오른쪽) 다음 줄, 순서대로 짜임새 있게 배치 */
  .lxp .phd__meta{width:100%;row-gap:10px;}
  .lxp .term-select{flex:0 0 100%;}
  .lxp .phd__terminfo{flex:1 1 auto;min-width:0;}
  .lxp .phd__export{flex:0 0 auto;}
  .lxp .donut2__ring{width:min(220px,100%);}
}