/* ─── 에디터 헤더 버튼 그룹 (진단/코칭/맞춤법/리셋 + 우측에 서체) ─── */
.tutor-editor__btns {
  
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tutor-editor__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--fz-13);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-2) var(--easing-standard),
              border-color var(--dur-2) var(--easing-standard),
              color var(--dur-2) var(--easing-standard),
              box-shadow var(--dur-2) var(--easing-standard),
              opacity var(--dur-2) var(--easing-standard);
}
.tutor-editor__action--diag {
  border: 1.5px solid var(--accent);
  background: var(--accent);
  color: var(--accent-on);
}
.tutor-editor__action--diag:hover:not(:disabled) {
  box-shadow: 0 8px 22px rgba(31,58,138,0.35);
}
.tutor-editor__action--coach {
  border: 1.5px solid var(--accent);
  background: transparent;
  color: var(--accent);
}
.tutor-editor__action--coach:hover:not(:disabled) {
  background: rgba(31,58,138,0.08);
}
.tutor-editor__action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.tutor-editor__action.is-busy {
  opacity: 0.7;
  pointer-events: none;
}
.tutor-editor__action-icon {
  font-size: 13px;
}

/* ─── 코칭 제안 패널 (우측 코치 컬럼 상단) ─── */
.tutor-coach-suggest {
  
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  animation: tutor-sc-in var(--dur-3) var(--easing-emphasis);
  margin-bottom: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 0 0 auto;
  min-height: 0;
}
/* [hidden] 우선순위 회복 — display:flex 명시 시 UA의 hidden(display:none)이 무력화되는 함정 차단. */
.tutor-coach-suggest[hidden] { display: none; }
.tutor-coach-suggest__head {
  display: grid;
  
  grid-template-columns: 12px auto 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed var(--line);
}
.tutor-coach-suggest__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(31,58,138,0.14);
}
.tutor-coach-suggest__title {
  margin: 0;
  font-size: var(--fz-14);
  font-weight: 700;
  color: var(--ink-strong);
  letter-spacing: 0.02em;
}
.tutor-coach-suggest__meta {
  font-size: var(--fz-12);
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.tutor-coach-suggest__close {
  border: 0;
  background: transparent;
  width: 28px; height: 28px;
  border-radius: 50%;
  color: var(--ink-mute);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--dur-1) var(--easing-standard),
              background var(--dur-1) var(--easing-standard);
}
.tutor-coach-suggest__close:hover {
  color: var(--accent);
  background: rgba(31,58,138,0.08);
}
.tutor-coach-suggest__status {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(31,58,138,0.05);
  border-left: 3px solid var(--accent);
  color: var(--ink-soft);
  font-size: var(--fz-13);
  line-height: var(--lh-snug);
}
.tutor-coach-suggest__status[data-tone="ok"]      { border-left-color: var(--ok); color: var(--ok); background: rgba(30,122,90,0.08); }
.tutor-coach-suggest__status[data-tone="err"]     { border-left-color: var(--err); color: var(--err); background: rgba(182,48,63,0.08); }
.tutor-coach-suggest__status[data-tone="loading"] { color: var(--accent); }
.tutor-coach-suggest__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 0 0 auto;
  min-height: 0;
  
  overflow: visible;
  padding-right: 0;
}

/* 코칭 제안 카드 — 카드 밖 번짐이 없도록 outline만 유지한다. */
.tutor-suggest-card {
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  scroll-margin-top: 80px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    transform var(--dur-2) var(--easing-standard),
    box-shadow var(--dur-2) var(--easing-standard),
    border-color var(--dur-2) var(--easing-standard);
}
/* glass-card::before(라이트 광택 라인)도 카드별로 차단 — 모서리 잔여 제거 */
.tutor-suggest-card::before { display: none !important; }
.tutor-suggest-card:hover {
  border-color: var(--accent-soft, var(--line-strong));
  box-shadow: none;
  transform: none;
}
:root[data-theme="dark"] .tutor-suggest-card {
  background: var(--surface-glass);
  border-color: var(--line);
  box-shadow: none;
}
.tutor-suggest-card.is-active {
  border-color: var(--accent);
  box-shadow: none;
}
.tutor-suggest-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.tutor-suggest-card__close {
  margin-left: auto;
  border: 0;
  background: transparent;
  width: 22px; height: 22px;
  border-radius: 50%;
  color: var(--ink-mute);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--dur-1) var(--easing-standard), background var(--dur-1) var(--easing-standard);
}
.tutor-suggest-card__close:hover {
  color: var(--err);
  background: rgba(182,48,63,0.10);
}
.tutor-suggest-card__section {
  font-size: var(--fz-12);
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(31,58,138,0.06);
  border: 1px solid var(--line);
}
.tutor-suggest-card__quote {
  margin: 0 0 6px;
  padding: 6px 10px;
  font-size: var(--fz-13);
  color: var(--ink);
  font-style: italic;
  background: rgba(31,58,138,0.04);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  line-height: var(--lh-snug);
  word-break: break-word;
}
.tutor-suggest-card__advice {
  margin: 0;
  font-size: var(--fz-14);
  color: var(--ink-soft);
  line-height: var(--lh-base);
}

/* 코칭 5종 kind 배지 — 단일 indigo 명도 변주 */
.tutor-suggest-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fz-12);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}
.tutor-suggest-badge[data-kind="structure"]  { background: #16275E; }
.tutor-suggest-badge[data-kind="argument"]   { background: #1F3A8A; }
.tutor-suggest-badge[data-kind="tone"]       { background: #2E50B5; }
.tutor-suggest-badge[data-kind="expression"] { background: #5478D9; }
.tutor-suggest-badge[data-kind="missing"]    { background: #7A98E0; }

/* 다크 토글에서도 외곽 배경은 제거 — 페이지 톤 반전 그대로 노출. */
:root[data-theme="dark"] .tutor-coach-suggest { background: transparent; }

/* ─── 자석 화살표 — 코칭 카드용 추가 룰 (기존 .tutor-arrow 활용) ─── */
.tutor-suggest-card:hover ~ .tutor-arrows path.tutor-arrow {
  /* 호버 시 nothing — JS에서 active-card-change로 강조 */
}

/* ─── target_text 영역 시각화 (SVG <g.tutor-target-mark>) ─── */
.tutor-target-mark { transition: opacity var(--dur-2) var(--easing-standard); }
.tutor-target-mark.is-active line { stroke-width: 2; }
.tutor-target-mark.is-stale       { opacity: 0.5; }

/* ─── 코칭 페이지네이션 컨트롤 ─── */
.tutor-coach-suggest__pager {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--line);
  font-size: var(--fz-12);
  flex: 0 0 auto;
  
  flex-wrap: nowrap;
  min-width: 0;
}
.tutor-coach-suggest__pager-btn {
  flex-shrink: 0;
}
.tutor-coach-suggest__pager-btn {
  border: 1px solid var(--line-strong);
  background: var(--surface-glass-2);
  color: var(--ink-soft);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fz-12);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--easing-standard),
              color var(--dur-1) var(--easing-standard),
              background var(--dur-1) var(--easing-standard),
              opacity var(--dur-1) var(--easing-standard);
}
.tutor-coach-suggest__pager-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface);
}
.tutor-coach-suggest__pager-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.tutor-coach-suggest__pager-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: center;
}
.tutor-coach-suggest__pager-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 0;
  background: var(--line-strong);
  padding: 0;
  cursor: pointer;
  transition: background var(--dur-1) var(--easing-standard),
              transform var(--dur-1) var(--easing-standard);
}
.tutor-coach-suggest__pager-dot:hover { background: var(--accent-soft, var(--accent)); }
.tutor-coach-suggest__pager-dot[data-active="true"] {
  background: var(--accent);
  transform: scale(1.25);
}
.tutor-coach-suggest__pager-idx {
  font-variant-numeric: tabular-nums;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  min-width: 38px;
  text-align: right;
}


.tutor-coach-suggest__pager-nums {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
  flex-wrap: nowrap;
  overflow: hidden;
}
.tutor-coach-suggest__pager-num {
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
  font-size: var(--fz-12);
  font-weight: 600;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-1) var(--easing-standard),
              color var(--dur-1) var(--easing-standard),
              background var(--dur-1) var(--easing-standard);
}
.tutor-coach-suggest__pager-num:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.tutor-coach-suggest__pager-num[data-active="true"] {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.tutor-coach-suggest__pager-btn--last {
  /* "끝" 버튼은 nav 직후 next 옆에 — 줄이 좁아도 항상 보이도록 flex-shrink:0. */
  flex-shrink: 0;
}


/* ───── 모바일 (≤720) — 코칭 카드 반응형 개선 ─────────────────────
 * 목표: 카드 크기/간격 최적화, 텍스트 가독성 개선 */
@media (max-width: 720px) {
  /* 코칭 제안 패널 간격 축소 */
  .tutor-coach-suggest { padding: var(--space-3) var(--space-3); }

  /* 카드 내부 padding 축소 */
  .tutor-suggest-card { padding: var(--space-3) var(--space-3); }

  /* 배지 폰트 크기 최적화 */
  .tutor-suggest-badge { font-size: var(--fz-11); padding: 2px 8px; }

  /* 섹션 라벨 크기 축소 */
  .tutor-suggest-card__section { font-size: var(--fz-11); padding: 2px 6px; }

  /* 인용문 padding 축소 */
  .tutor-suggest-card__quote { padding: 6px 8px; font-size: var(--fz-12); }

  /* 조언 텍스트 line-height 개선 */
  .tutor-suggest-card__advice { font-size: var(--fz-13); line-height: var(--lh-snug); }

  /* 페이저 버튼 크기 축소 */
  .tutor-coach-suggest__pager-btn { min-width: 32px; height: 32px; padding: 6px 10px; font-size: var(--fz-12); }
  .tutor-coach-suggest__pager-num { min-width: 24px; height: 24px; padding: 0 4px; font-size: var(--fz-11); }
}


/* 우측 상단 3번째 뱃지 modifier — shelf 패턴과 대구. 청록 그라데이션. */
.tutor-stats-launcher__btn--flow {
  background: linear-gradient(135deg, rgba(58, 104, 144, 0.06), rgba(58, 104, 144, 0.14));
  border-color: rgba(58, 104, 144, 0.20);
}
.tutor-stats-launcher__btn--flow:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(58, 104, 144, 0.14), rgba(58, 104, 144, 0.22));
}
:root[data-theme="dark"] .tutor-stats-launcher__btn--flow {
  background: linear-gradient(135deg, rgba(110, 180, 200, 0.06), rgba(110, 180, 200, 0.14));
  border-color: rgba(110, 180, 200, 0.22);
}
:root[data-theme="dark"] .tutor-stats-launcher__btn--flow:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(110, 180, 200, 0.14), rgba(110, 180, 200, 0.24));
  border-color: rgba(110, 180, 200, 0.42);
}


.tutor-flow {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-glass-2);
  animation: tutor-sc-in var(--dur-3) var(--easing-emphasis);
  margin-bottom: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 0 0 auto;
  min-height: 0;
}
.tutor-flow[hidden] { display: none; }

.tutor-flow__head {
  display: grid;
  grid-template-columns: 12px auto 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed var(--line);
}
.tutor-flow__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #3a6890;
  box-shadow: 0 0 0 4px rgba(58, 104, 144, 0.14);
}
.tutor-flow__title {
  margin: 0;
  font-size: var(--fz-14);
  font-weight: 700;
  color: var(--ink-strong);
  letter-spacing: 0.02em;
}
.tutor-flow__meta {
  font-size: var(--fz-12);
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.tutor-flow__close {
  border: 0;
  background: transparent;
  width: 28px; height: 28px;
  border-radius: 50%;
  color: var(--ink-mute);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--dur-1) var(--easing-standard),
              background var(--dur-1) var(--easing-standard);
}
.tutor-flow__close:hover {
  color: var(--accent);
  background: rgba(58, 104, 144, 0.08);
}
.tutor-flow__status {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(58, 104, 144, 0.06);
  border-left: 3px solid #3a6890;
  color: var(--ink-soft);
  font-size: var(--fz-13);
  line-height: var(--lh-snug);
}
.tutor-flow__status[data-tone="err"]     { border-left-color: var(--err); color: var(--err); background: rgba(182,48,63,0.08); }
.tutor-flow__status[data-tone="loading"] { color: #3a6890; }

/* 5단 grid — "2열 세로 5단". 라벨 셀 + 요약 셀 + stage 사이 ↓ 화살표. */
.tutor-flow__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 20px 12px;
}
.tutor-flow__list[hidden] { display: none; }
.tutor-flow__row {
  display: contents;  /* 부모 grid의 행 단위로 자식 두 셀이 자연 배치되도록. */
}
.tutor-flow__stage {
  position: relative;  /* ::after 화살표 anchor */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: var(--radius-sm);
  font-size: var(--fz-15);
  font-weight: 700;
  color: var(--ink-strong);
  letter-spacing: 0.04em;
  background: rgba(58, 104, 144, 0.06);
  border-left: 3px solid transparent;
  transition: background var(--dur-1) var(--easing-standard);
}
/* 단계 사이 ↓ — 마지막 row(종합)는 제외. row gap 20px 안 중앙에 위치. */
.tutor-flow__stage::after {
  content: '↓';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 4px);
  color: rgba(58, 104, 144, 0.55);
  font-size: var(--fz-14);
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}
.tutor-flow__row:last-of-type .tutor-flow__stage::after { display: none; }

.tutor-flow__summary {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: rgba(58, 104, 144, 0.04);
  color: var(--ink-strong);
  font-size: var(--fz-14);
  line-height: var(--lh-base);
  min-height: 44px;
}

/* 4단 progression — alpha 강화 + 결은 deep gradient로 종착 강조 (구 종합 톤 인계). */
.tutor-flow__row[data-stage="기"] .tutor-flow__stage { background: rgba(58, 104, 144, 0.12); }
.tutor-flow__row[data-stage="승"] .tutor-flow__stage { background: rgba(58, 104, 144, 0.22); }
.tutor-flow__row[data-stage="전"] .tutor-flow__stage { background: rgba(58, 104, 144, 0.36); color: #ffffff; }
.tutor-flow__row[data-stage="결"] .tutor-flow__stage {
  background: linear-gradient(135deg, rgba(31, 58, 138, 0.65), rgba(31, 58, 138, 0.85));
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(31, 58, 138, 0.16);
}

/* 흐름 진단 카드 — 4단 위에 메타 진단 인계. accent: 올리브-슬레이트 #3a5e3a. */
.tutor-flow__diagnosis {
  position: relative;
  margin: 16px 0 0 0;
  padding: 14px 16px 12px;
  border-radius: var(--radius-md);
  background: rgba(58, 94, 58, 0.06);
  border: 1px solid rgba(58, 94, 58, 0.22);
  border-left: 4px solid #3a5e3a;
}
.tutor-flow__diagnosis[hidden] { display: none; }
/* 결 → 진단 분기 ↓ — stage::after와 별개 anchor, stage 컬럼 중앙. */
.tutor-flow__diagnosis::before {
  content: '↓';
  position: absolute;
  top: -18px;
  left: 34px;
  transform: translateX(-50%);
  font-size: var(--fz-18);
  font-weight: 800;
  color: rgba(58, 94, 58, 0.62);
  line-height: 1;
  pointer-events: none;
}
.tutor-flow__diagnosis-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px 0;
}
.tutor-flow__diagnosis-icon { font-size: var(--fz-16); line-height: 1; }
.tutor-flow__diagnosis-title {
  margin: 0;
  font-size: var(--fz-14);
  font-weight: 800;
  color: var(--ink-strong);
  letter-spacing: 0.02em;
}
.tutor-flow__diagnosis-pattern {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(58, 94, 58, 0.18);
  color: #1f3a1f;
  font-size: var(--fz-12);
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.tutor-flow__diagnosis-verdict {
  margin: 0;
  font-size: var(--fz-15);
  line-height: var(--lh-base);
  color: var(--ink-strong);
  font-weight: 600;
}
.tutor-flow__diagnosis-weak {
  margin: 10px 0 0 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(58, 94, 58, 0.30);
  font-size: var(--fz-13);
  line-height: var(--lh-snug);
}
.tutor-flow__diagnosis-weak[hidden] { display: none; }
.tutor-flow__diagnosis-weak-label {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  background: rgba(122, 31, 58, 0.10);
  color: #7a1f3a;
  font-size: var(--fz-11);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.tutor-flow__diagnosis-weak-text { flex: 1; color: var(--ink-strong); }
.tutor-flow__diagnosis-cohesion {
  margin: 10px 0 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed rgba(228, 162, 106, 0.42);
  font-size: var(--fz-12);
  color: var(--ink-soft);
}
.tutor-flow__diagnosis-cohesion[hidden] { display: none; }
.tutor-flow__diagnosis-cohesion-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: var(--fz-13);
  font-weight: 800;
  line-height: 1;
}
.tutor-flow__diagnosis-cohesion-mark[data-cohesion="○"] { background: rgba(70, 130, 90, 0.18);  color: #2d5e3a; }
.tutor-flow__diagnosis-cohesion-mark[data-cohesion="△"] { background: rgba(228, 162, 106, 0.20); color: #8a5a2b; }
.tutor-flow__diagnosis-cohesion-mark[data-cohesion="×"] { background: rgba(122, 31, 58, 0.14);  color: #7a1f3a; }
.tutor-flow__diagnosis-cohesion-text { color: var(--ink-strong); font-weight: 600; }

/* 살구색 칩 (수미상관 응답 라벨) — 진단 카드 내 재사용. */
.tutor-flow__chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(228, 162, 106, 0.22);
  color: #8a5a2b;
  font-size: var(--fz-11);
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* 다크 테마 — stage + 화살표 + summary + 진단 카드 보정. */
:root[data-theme="dark"] .tutor-flow__stage        { color: #e6ecf6; }
:root[data-theme="dark"] .tutor-flow__stage::after { color: rgba(138, 180, 248, 0.65); }
:root[data-theme="dark"] .tutor-flow__summary      { background: rgba(138, 180, 248, 0.06); color: var(--ink-strong); }
:root[data-theme="dark"] .tutor-flow__chip         { color: #ffd1a4; background: rgba(228, 162, 106, 0.28); }
:root[data-theme="dark"] .tutor-flow__diagnosis    { background: rgba(58, 94, 58, 0.14); border-color: rgba(120, 180, 120, 0.34); border-left-color: #6a9e6a; }
:root[data-theme="dark"] .tutor-flow__diagnosis::before { color: rgba(120, 180, 120, 0.72); }
:root[data-theme="dark"] .tutor-flow__diagnosis-pattern { background: rgba(120, 180, 120, 0.22); color: #cfe6cf; }
:root[data-theme="dark"] .tutor-flow__diagnosis-weak-label { background: rgba(220, 100, 130, 0.18); color: #f0a0b0; }
:root[data-theme="dark"] .tutor-flow__diagnosis-cohesion-mark[data-cohesion="○"] { background: rgba(100, 170, 120, 0.22); color: #c0e8c8; }
:root[data-theme="dark"] .tutor-flow__diagnosis-cohesion-mark[data-cohesion="△"] { background: rgba(228, 162, 106, 0.22); color: #ffd1a4; }
:root[data-theme="dark"] .tutor-flow__diagnosis-cohesion-mark[data-cohesion="×"] { background: rgba(220, 100, 130, 0.20); color: #f0a0b0; }

/* 모바일 — 라벨 컬럼 + 화살표 + 진단 카드 컴팩트. */
@media (max-width: 560px) {
  .tutor-flow { padding: var(--space-3) var(--space-3); }
  .tutor-flow__list   { grid-template-columns: 56px 1fr; gap: 16px 8px; }
  .tutor-flow__stage  { min-height: 40px; font-size: var(--fz-13); }
  .tutor-flow__stage::after { font-size: var(--fz-12); transform: translate(-50%, 2px); }
  .tutor-flow__summary { padding: 10px 12px; font-size: var(--fz-13); min-height: 40px; line-height: var(--lh-snug); }
  .tutor-flow__diagnosis { padding: 12px 14px 10px; margin-top: 14px; }
  .tutor-flow__diagnosis::before { top: -14px; left: 28px; font-size: var(--fz-16); }
  .tutor-flow__diagnosis-title { font-size: var(--fz-13); }
  .tutor-flow__diagnosis-pattern { font-size: var(--fz-11); padding: 2px 8px; }
  .tutor-flow__diagnosis-verdict { font-size: var(--fz-14); }
  .tutor-flow__diagnosis-weak { font-size: var(--fz-12); gap: 8px; }
}