/* 버전 2 — 모달·토스트·서랍·튜터봇 대화창 (설계 3단계의 .ds-modal / .ds-toast 와 4c의 튜터봇 대화창). /v2/ 에서만.
   1) .ds-modal / .ds-toast 표준 클래스  2) 기존 오버레이에 같은 모양 연결(클래스·동작은 그대로).
   오류·경고 의미 색(.append-modal__error 등)은 건드리지 않는다.
   설계: docs/superpowers/specs/2026-10-13-lms-ux-reskin-design.md */

/* ── 1) 표준 클래스 ─────────────────────────────────────────────────────── */
html[data-ui="v2"] .ds-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.5);
}
html[data-ui="v2"] .ds-modal__box {
  box-sizing: border-box;
  width: min(560px, 90vw);
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-2xl);
  background: var(--ds-card);
  color: var(--ds-card-foreground);
  box-shadow: var(--ds-shadow-card-hover);
}
html[data-ui="v2"] .ds-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  padding: 12px 18px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-foreground);
  color: var(--ds-background);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--ds-shadow-card-hover);
}

/* ── 2) 기존 오버레이 연결 ─────────────────────────────────────────────── */
/* 토스트(앱이 만드는 #ts-toast) — 어두운 바탕 유지, 둥글기·테두리만 LMS 모양 */
html[data-ui="v2"] .ts-toast {
  border-radius: var(--ds-radius-xl);
  border-color: var(--ds-border);
  font-size: 14px;
}
html[data-ui="v2"] .undo-toast { border-radius: var(--ds-radius-xl); }
html[data-ui="v2"] .undo-toast button { color: #fda4af; }
html[data-ui="v2"] .undo-toast button:hover { color: #fecdd3; }

/* 모달 상자: 매뉴얼 추가 / 자료 미리보기 */
html[data-ui="v2"] :is(.append-modal__box, .resource-preview-modal__box) {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-2xl);
  background: var(--ds-card);
  color: var(--ds-card-foreground);
  box-shadow: var(--ds-shadow-card-hover);
}
html[data-ui="v2"] .append-modal__header h3,
html[data-ui="v2"] .resource-preview-modal__header h3 { color: var(--ds-foreground); font-weight: 700; }
html[data-ui="v2"] .resource-preview-modal__header p { color: var(--ds-muted-foreground); }
/* 안내 띠: 운영 CSS는 라이트 고정 색(#f9fafb 바탕)이라 다크에서 밝은 면이 됨 → 토큰으로 */
html[data-ui="v2"] .append-modal__hint {
  background: var(--ds-muted);
  border-left-color: var(--ds-primary);
  border-radius: var(--ds-radius-md);
  color: var(--ds-card-foreground);
}
html[data-ui="v2"] .append-modal__hint strong { font-weight: 700; }
/* 입력칸 라벨: 운영 CSS는 #374151 고정이라 다크에서 대비 1.4 */
html[data-ui="v2"] .append-modal__box label { color: var(--ds-card-foreground); }
html[data-ui="v2"] .append-modal__close { color: var(--ds-muted-foreground); border-radius: var(--ds-radius-md); }
html[data-ui="v2"] .append-modal__close:hover { background: var(--ds-muted); color: var(--ds-foreground); }
html[data-ui="v2"] .append-modal__box :is(input, textarea) {
  border: 1px solid var(--ds-input);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-card);
  color: var(--ds-foreground);
}
html[data-ui="v2"] .append-modal__box :is(input, textarea):focus {
  outline: none;
  border-color: var(--ds-ring);
  box-shadow: 0 0 0 3px var(--ds-primary-soft);
}
/* 모달 버튼: 취소=보조, 주 동작=로즈 */
html[data-ui="v2"] :is(.append-modal__btn-primary, .append-modal__btn-secondary) {
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  font-weight: 600;
}
html[data-ui="v2"] .append-modal__btn-secondary { background: var(--ds-card); color: var(--ds-card-foreground); }
html[data-ui="v2"] .append-modal__btn-secondary:hover { background: var(--ds-muted); }
html[data-ui="v2"] .append-modal__btn-primary { border-color: var(--ds-primary); background: var(--ds-primary); color: var(--ds-primary-foreground); }
html[data-ui="v2"] .append-modal__btn-primary:hover:not(:disabled) { border-color: var(--ds-primary-hover); background: var(--ds-primary-hover); }

/* 계약 위험 알림 서랍 */
html[data-ui="v2"] .contract-risk-drawer {
  border-left-color: var(--ds-border);
  background: var(--ds-card);
  color: var(--ds-card-foreground);
  box-shadow: var(--ds-shadow-card-hover);
}
html[data-ui="v2"] .contract-risk-hdr { border-bottom-color: var(--ds-border); }
html[data-ui="v2"] .contract-risk-hdr-title { color: var(--ds-foreground); }
/* "모두 읽음": 운영 CSS 글자색 #1d4ed8 고정 → 다크에서 어두운 면 위 짙은 파랑(대비 부족) */
html[data-ui="v2"] .contract-risk-all-read-btn { color: var(--ds-info-fg); }
/* 닫기(✕): 운영 CSS 연한 회색 #94a3b8 → 라이트에서 대비 2.6 */
html[data-ui="v2"] .contract-risk-close-btn { color: var(--ds-muted-foreground); }

/* ── 튜터봇 대화창: 큰 둥근 카드 + 로즈 주 버튼(보내기) + 공용 입력칸 ───────────── */
html[data-ui="v2"] .tutor-modal {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-2xl);
  background: var(--ds-card);
  color: var(--ds-card-foreground);
  box-shadow: var(--ds-shadow-card-hover);
}
html[data-ui="v2"] .tutor-modal__header h3 { color: var(--ds-foreground); font-weight: 700; }
/* 머리 아바타: 에메랄드(#10b981) 위 흰 글자는 대비 2.5 → 어두운 초록 글자(6:1 이상) */
html[data-ui="v2"] .tutor-chat-avatar--hdr { color: #022c22; font-weight: 700; }
/* 입력칸·보내기 버튼: 운영 CSS가 ID 선택자(#tutor-send)로 색을 정하므로 같은 구조로 덮는다 */
html[data-ui="v2"] .tutor-chat-inp-pill textarea { color: var(--ds-foreground); }
html[data-ui="v2"] .tutor-chat-inp-pill textarea::placeholder { color: var(--ds-muted-foreground); }
html[data-ui="v2"] .tutor-chat-inp-pill #tutor-send:disabled {
  background: var(--ds-muted);
  color: var(--ds-muted-foreground);
}
html[data-ui="v2"] .tutor-chat-inp-pill #tutor-send.tutor-send--ready {
  background: var(--ds-primary);
  color: var(--ds-primary-foreground);
  box-shadow: 0 4px 14px var(--ds-primary-soft);
}
html[data-ui="v2"] .tutor-chat-inp-pill #tutor-send.tutor-send--busy {
  background: var(--ds-primary-disabled);
  color: var(--ds-primary-foreground);
}
html[data-ui="v2"] .tutor-chat-inp-hint { color: var(--ds-muted-foreground); }
/* 추천 질문: 운영 CSS는 흰 바탕·회색 글자 고정이라 다크에서 밝은 면이 됨 → 토큰으로 */
html[data-ui="v2"] .tutor-chips__title { color: var(--ds-muted-foreground); }
html[data-ui="v2"] .tutor-chips__badge {
  background: var(--ds-primary-soft);
  color: var(--ds-primary-active);
}
html[data-ui="v2"] .tutor-chip {
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-muted);
  color: var(--ds-card-foreground);
}
html[data-ui="v2"] .tutor-chip:hover {
  border-color: var(--ds-primary);
  background: var(--ds-primary-soft);
}