/* ============================================================
   live-class 디자인 시스템 — "코리안 클린 (토스풍)"
   Pretendard · 중성 그레이 · 차분한 블루 악센트 · 미니멀 섀도
   모든 화면(포털·기관·수업·위젯·admin)이 이 토큰을 공유한다.
   ※ 색/폰트/모서리/그림자는 반드시 var(--lc-*) 토큰으로.
   ============================================================ */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

:root{
  /* 면 */
  --lc-bg:        #f2f4f6;
  --lc-surface:   #ffffff;
  --lc-surface-2: #f9fafb;
  /* 선 */
  --lc-line:        #eaedf1;
  --lc-line-strong: #e0e4e8;
  /* 글자 */
  --lc-text:   #191f28;
  --lc-text-2: #4e5968;
  --lc-text-3: #8b95a1;
  /* 악센트(토스 블루) */
  --lc-accent:        #2272eb;
  --lc-accent-strong: #1b64da;
  --lc-accent-soft:   #e8f3ff;
  /* 상태색 */
  --lc-live:        #f04452;  --lc-live-soft:#fdeeef;
  --lc-review:      #12b886;  --lc-review-soft:#e6f8f1;
  --lc-archived:    #8b95a1;  --lc-archived-soft:#eef1f4;
  /* 모서리 */
  --lc-r-card:18px; --lc-r-md:14px; --lc-r-btn:11px; --lc-r-input:11px; --lc-r-chip:999px;
  /* 그림자 */
  --lc-shadow:    0 1px 3px rgba(17,31,44,.04), 0 6px 18px rgba(17,31,44,.05);
  --lc-shadow-lg: 0 12px 34px rgba(17,31,44,.10);
  /* 타이포 */
  --lc-font:'Pretendard Variable',Pretendard,system-ui,'Apple SD Gothic Neo',sans-serif;
  --lc-maxw:980px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--lc-font);
  background:var(--lc-bg);
  color:var(--lc-text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.01em;
}
a{color:inherit;text-decoration:none}

/* ===== 컨테이너 ===== */
.lc-container{max-width:var(--lc-maxw);margin:0 auto;padding:0 20px}

/* ===== 카드 ===== */
.lc-card{
  background:var(--lc-surface);
  border:1px solid var(--lc-line);
  border-radius:var(--lc-r-card);
  box-shadow:var(--lc-shadow);
}
.lc-card--flat{box-shadow:none}
.lc-card--hover{transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.lc-card--hover:hover{transform:translateY(-2px);box-shadow:var(--lc-shadow-lg);border-color:var(--lc-line-strong)}

/* ===== 타이틀/텍스트 ===== */
.lc-h1{font-size:24px;font-weight:700;letter-spacing:-.025em;color:var(--lc-text)}
.lc-h2{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--lc-text)}
.lc-eyebrow{font-size:13px;font-weight:600;color:var(--lc-text-3)}
.lc-muted{color:var(--lc-text-3)}
.lc-sub{color:var(--lc-text-2)}

/* ===== 뱃지(생명주기) ===== */
.lc-badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;
  padding:4px 10px;border-radius:var(--lc-r-chip);line-height:1}
.lc-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.lc-badge--live{background:var(--lc-live-soft);color:var(--lc-live)}
.lc-badge--review{background:var(--lc-review-soft);color:var(--lc-review)}
.lc-badge--archived{background:var(--lc-archived-soft);color:var(--lc-archived)}
.lc-badge--plain{background:var(--lc-accent-soft);color:var(--lc-accent)}
.lc-badge--plain::before{display:none}

/* ===== 버튼 ===== */
.lc-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;
  padding:11px 18px;border-radius:var(--lc-r-btn);border:0;
  background:var(--lc-accent);color:#fff;transition:background .15s ease, transform .06s ease}
.lc-btn:hover{background:var(--lc-accent-strong)}
.lc-btn:active{transform:scale(.985)}
.lc-btn--sm{padding:8px 13px;font-size:13.5px}
.lc-btn--ghost{background:var(--lc-surface-2);color:var(--lc-text-2);border:1px solid var(--lc-line)}
.lc-btn--ghost:hover{background:#eef1f4}
.lc-btn:disabled{opacity:.5;cursor:not-allowed}

/* ===== 입력 ===== */
.lc-input{font-family:inherit;font-size:15px;color:var(--lc-text);background:var(--lc-surface);
  border:1px solid var(--lc-line-strong);border-radius:var(--lc-r-input);padding:11px 13px;width:100%;
  transition:border-color .15s ease, box-shadow .15s ease}
.lc-input::placeholder{color:var(--lc-text-3)}
.lc-input:focus{outline:none;border-color:var(--lc-accent);box-shadow:0 0 0 3px var(--lc-accent-soft)}

/* ===== 칩 ===== */
.lc-chip{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;
  padding:6px 12px;border-radius:var(--lc-r-chip);background:var(--lc-surface-2);
  color:var(--lc-text-2);border:1px solid var(--lc-line);cursor:pointer;transition:all .12s ease}
.lc-chip:hover{background:var(--lc-accent-soft);color:var(--lc-accent);border-color:transparent}
.lc-chip--on{background:var(--lc-accent);color:#fff;border-color:transparent}

/* ===== 채팅 말풍선 ===== */
.lc-bubble{font-size:14px;line-height:1.5;padding:9px 13px;border-radius:14px;max-width:86%;
  background:var(--lc-surface-2);color:var(--lc-text);border:1px solid var(--lc-line)}
.lc-bubble--me{align-self:flex-end;background:var(--lc-accent);color:#fff;border-color:transparent}
.lc-bubble .nick{display:block;font-size:11.5px;font-weight:700;color:var(--lc-text-3);margin-bottom:2px}
.lc-bubble--me .nick{color:rgba(255,255,255,.75)}

/* ===== 구분선 ===== */
.lc-divider{height:1px;background:var(--lc-line);border:0;margin:0}

/* ===== 스크롤바(웹킷) ===== */
.lc-scroll::-webkit-scrollbar{width:8px;height:8px}
.lc-scroll::-webkit-scrollbar-thumb{background:#d4d9df;border-radius:99px}
.lc-scroll::-webkit-scrollbar-track{background:transparent}

/* ===== 페이지 로드 페이드 ===== */
@keyframes lc-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.lc-rise{animation:lc-rise .4s ease both}