/* 버전 2 — 4c단계: 시간표 변환(#view-timetable)·튜터봇 분석(#view-tutorStats)·가이드(#view-guide) 신규 LMS 모양.
   /v2/ 에서만, 각 화면 id 범위 한정. 경고(.tt-warn)·오류 색은 의미 색이라 그대로 둔다.
   설계: docs/superpowers/specs/2026-10-13-lms-ux-reskin-design.md */

/* ── 시간표 변환 / 튜터봇 분석 공통 큰 카드 ───────────────────────────────── */
html[data-ui="v2"] :is(#view-timetable, #view-tutorStats) .tt-card {
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-2xl);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-card);
}
html[data-ui="v2"] :is(#view-timetable, #view-tutorStats) .tt-card h2 { color: var(--ds-foreground); font-size: 20px; font-weight: 700; }
html[data-ui="v2"] :is(#view-timetable, #view-tutorStats) .tt-sub { color: var(--ds-muted-foreground); }
html[data-ui="v2"] #view-timetable .tt-section-title { color: var(--ds-foreground); }
html[data-ui="v2"] #view-timetable .tt-section-title-muted { color: var(--ds-muted-foreground); }
/* 단계 번호 동그라미 = 로즈 */
html[data-ui="v2"] #view-timetable .tt-step { background: var(--ds-primary-soft); color: var(--ds-primary-active); }
html[data-ui="v2"] #view-timetable .tt-input {
  border-color: var(--ds-input);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-card);
  color: var(--ds-foreground);
}
html[data-ui="v2"] #view-timetable .tt-input:focus {
  outline: none;
  border-color: var(--ds-ring);
  box-shadow: 0 0 0 3px var(--ds-primary-soft);
}
html[data-ui="v2"] #view-timetable .tt-drop { border-radius: var(--ds-radius-xl); }
html[data-ui="v2"] #view-timetable .tt-drop.drag-over { border-color: var(--ds-primary); background: var(--ds-primary-soft); }
html[data-ui="v2"] #view-timetable .tt-help { border-radius: var(--ds-radius-lg); }

/* 튜터봇 분석 카드·기간 탭 */
html[data-ui="v2"] #view-tutorStats .ts-card {
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-card);
  box-shadow: none;
}
html[data-ui="v2"] #view-tutorStats .ts-period-tabs {
  gap: 2px;
  padding: 3px;
  border: 0;
  border-radius: var(--ds-radius-lg);
  background: var(--ds-muted);
}
html[data-ui="v2"] #view-tutorStats .ts-period-tabs button {
  border: 0;
  border-radius: var(--ds-radius-md);
  background: transparent;
  color: var(--ds-muted-foreground);
  font-weight: 600;
}
html[data-ui="v2"] #view-tutorStats .ts-period-tabs button.active {
  background: var(--ds-card);
  color: var(--ds-foreground);
  box-shadow: var(--ds-shadow-card);
}

/* 보강 답변 검토(승인·보관) — 개선 #11 */
html[data-ui="v2"] #view-tutorStats .ts-review__item { border-color: var(--ds-border); border-radius: var(--ds-radius-xl); background: var(--ds-card); }
html[data-ui="v2"] #view-tutorStats .ts-review__answer { border-color: var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-muted); color: var(--ds-foreground); }
html[data-ui="v2"] #view-tutorStats .ts-review__msg { border-color: var(--ds-border); border-radius: var(--ds-radius-lg); color: var(--ds-foreground); }
html[data-ui="v2"] #view-tutorStats .ts-review__msg[data-tone="ok"] { border-color: var(--ds-success); }
html[data-ui="v2"] #view-tutorStats .ts-review__msg[data-tone="error"] { border-color: var(--ds-danger); }
html[data-ui="v2"] #view-tutorStats .ts-review__btn { min-height: 36px; border-color: var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-card); color: var(--ds-foreground); }
html[data-ui="v2"] #view-tutorStats .ts-review__btn--approve { border-color: var(--ds-primary); background: var(--ds-primary); color: var(--ds-primary-foreground); }
html[data-ui="v2"] #view-tutorStats .ts-review__btn:focus-visible { outline: 2px solid var(--ds-ring); outline-offset: 2px; }

/* ── 가이드 ───────────────────────────────────────────────────────────── */
html[data-ui="v2"] #view-guide .guide-toc { border-right-color: var(--ds-border); }
html[data-ui="v2"] #view-guide .guide-toc-item { border-radius: 0 var(--ds-radius-lg) var(--ds-radius-lg) 0; }
html[data-ui="v2"] #view-guide .guide-toc-item.active {
  border-left-color: var(--ds-primary);
  background: var(--ds-primary-soft);
  color: var(--ds-primary-active);
}
html[data-ui="v2"] #view-guide .guide-card {
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow-card);
}
html[data-ui="v2"] #view-guide .guide-h1 { font-size: 24px; font-weight: 700; }
html[data-ui="v2"] #view-guide .guide-arch { border-radius: var(--ds-radius-xl); }


/* 서비스 지도(가이드 맨 앞) — 2026-10-19 */
html[data-ui="v2"] #view-guide .sm-group { margin-top: 20px; }
html[data-ui="v2"] #view-guide .sm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
html[data-ui="v2"] #view-guide .sm-card { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-xl); background: var(--ds-card); color: var(--ds-card-foreground); }
html[data-ui="v2"] #view-guide .sm-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
html[data-ui="v2"] #view-guide .sm-card__name { font-size: 15px; font-weight: 700; color: var(--ds-foreground); }
html[data-ui="v2"] #view-guide .sm-card__level { flex-shrink: 0; padding: 2px 8px; border-radius: 999px; background: var(--ds-muted); color: var(--ds-muted-foreground); font-size: 12px; font-weight: 600; }
html[data-ui="v2"] #view-guide .sm-card--L3 .sm-card__level { background: var(--ds-primary-soft); color: var(--ds-primary-active); }
html[data-ui="v2"] #view-guide .sm-card--planned { border-style: dashed; }
html[data-ui="v2"] #view-guide .sm-card__summary { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ds-muted-foreground); }
html[data-ui="v2"] #view-guide .sm-card__data { font-size: 12px; color: var(--ds-muted-foreground); }
html[data-ui="v2"] #view-guide .sm-card__data a { color: inherit; text-decoration: underline; }
html[data-ui="v2"] #view-guide .sm-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
html[data-ui="v2"] #view-guide .sm-card__owner { font-size: 12px; color: var(--ds-muted-foreground); }
html[data-ui="v2"] #view-guide .sm-card__open { min-height: 32px; padding: 0 12px; display: inline-flex; align-items: center; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-card); color: var(--ds-foreground); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; }
html[data-ui="v2"] #view-guide .sm-card__open:hover { background: var(--ds-muted); }
html[data-ui="v2"] #view-guide .sm-card__open:focus-visible { outline: 2px solid var(--ds-ring); outline-offset: 2px; }
html[data-ui="v2"] #view-guide .sm-card__admin { display: grid; gap: 3px; padding-top: 8px; border-top: 1px dashed var(--ds-border); font-size: 12px; line-height: 1.5; color: var(--ds-muted-foreground); overflow-wrap: anywhere; }
html[data-ui="v2"] #view-guide .sm-card__admin span { font-weight: 700; color: var(--ds-foreground); }
html[data-ui="v2"] #view-guide .sm-howto { margin-top: 20px; padding: 12px 14px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-muted); font-size: 13px; line-height: 1.55; color: var(--ds-foreground); }
html[data-ui="v2"] #view-guide .sm-retry { border: 0; background: none; padding: 0; color: var(--ds-primary-active); font: inherit; text-decoration: underline; cursor: pointer; }